样式修改，离开提醒，智能批改加载

package-lock.json

@@ -20,7 +20,7 @@
         "@wangeditor/editor": "^5.1.23",
         "@wangeditor/editor-for-react": "^1.0.6",
         "ahooks": "^3.7.10",
-        "antd": "^5.14.2",
+        "antd": "^5.16.1",
         "axios": "^1.6.7",
         "lodash": "^4.17.21",
         "react": "^18.2.0",
@@ -32,6 +32,7 @@
         "sass-loader": "^14.1.1",
         "swiper": "^11.0.7",
         "typescript": "^4.9.5",
+        "vfonts": "^0.0.3",
         "web-vitals": "^2.1.4",
         "zustand": "^4.5.1"
       },
@@ -82,9 +83,9 @@
       }
     },
     "node_modules/@ant-design/cssinjs": {
-      "version": "1.18.4",
-      "resolved": "https://registry.npmmirror.com/@ant-design/cssinjs/-/cssinjs-1.18.4.tgz",
-      "integrity": "sha512-IrUAOj5TYuMG556C9gdbFuOrigyhzhU5ZYpWb3gYTxAwymVqRbvLzFCZg6OsjLBR6GhzcxYF3AhxKmjB+rA2xA==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmmirror.com/@ant-design/cssinjs/-/cssinjs-1.19.1.tgz",
+      "integrity": "sha512-hgQ3wiys3X0sqDKWkqCJ6EYdF79i9JCvtavmIGwuuPUKmoJXV8Ff0sY+yQQSxk2dRmMyam/bYKo/Bwor45hnZw==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "@emotion/hash": "^0.8.0",
@@ -100,9 +101,9 @@
       }
     },
     "node_modules/@ant-design/icons": {
-      "version": "5.3.4",
-      "resolved": "https://r.cnpmjs.org/@ant-design/icons/-/icons-5.3.4.tgz",
-      "integrity": "sha512-U5eTSeSFr2V9SeJzYOo5mybAZfsoNuiIA8bvFoZUe+h9LBLs8UwrVaVwcMQC4AhBuojXkLMlmtnIlvUczXXHaQ==",
+      "version": "5.3.6",
+      "resolved": "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.3.6.tgz",
+      "integrity": "sha512-JeWsgNjvkTTC73YDPgWOgdScRku/iHN9JU0qk39OSEmJSCiRghQMLlxGTCY5ovbRRoXjxHXnUKgQEgBDnQfKmA==",
       "dependencies": {
         "@ant-design/colors": "^7.0.0",
         "@ant-design/icons-svg": "^4.4.0",
@@ -124,9 +125,9 @@
       "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA=="
     },
     "node_modules/@ant-design/react-slick": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/@ant-design/react-slick/-/react-slick-1.0.2.tgz",
-      "integrity": "sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==",
+      "version": "1.1.2",
+      "resolved": "https://registry.npmmirror.com/@ant-design/react-slick/-/react-slick-1.1.2.tgz",
+      "integrity": "sha512-EzlvzE6xQUBrZuuhSAFTdsr4P2bBBHGZwKFemEfq8gIGyIQCxalYfZW/T2ORbtQx5rU69o+WycP3exY/7T1hGA==",
       "dependencies": {
         "@babel/runtime": "^7.10.4",
         "classnames": "^2.2.5",
@@ -2033,9 +2034,9 @@
       "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA=="
     },
     "node_modules/@babel/runtime": {
-      "version": "7.24.0",
-      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.0.tgz",
-      "integrity": "sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==",
+      "version": "7.24.4",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.4.tgz",
+      "integrity": "sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==",
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -5193,15 +5194,15 @@
       }
     },
     "node_modules/antd": {
-      "version": "5.15.3",
-      "resolved": "https://r.cnpmjs.org/antd/-/antd-5.15.3.tgz",
-      "integrity": "sha512-53dpdGbfwipHVbqITmppp8N16i+BscMzz8NUNwaJgxwSvO9VQh/NfC/90lqGq3I2oBmxQ8TzRIxzFVKD/9OhlQ==",
+      "version": "5.16.1",
+      "resolved": "https://registry.npmmirror.com/antd/-/antd-5.16.1.tgz",
+      "integrity": "sha512-XAlLRrgYV+nj9FHnkXEPS6HNcKcluEa8v44e7Cixjlp8aOXRhUI6IfZaKpc2MPGjQ+06rp62/dsxOUNJW9kfLA==",
       "dependencies": {
         "@ant-design/colors": "^7.0.2",
-        "@ant-design/cssinjs": "^1.18.4",
-        "@ant-design/icons": "^5.3.3",
-        "@ant-design/react-slick": "~1.0.2",
-        "@babel/runtime": "^7.24.0",
+        "@ant-design/cssinjs": "^1.18.5",
+        "@ant-design/icons": "^5.3.6",
+        "@ant-design/react-slick": "~1.1.2",
+        "@babel/runtime": "^7.24.4",
         "@ctrl/tinycolor": "^3.6.1",
         "@rc-component/color-picker": "~1.5.3",
         "@rc-component/mutate-observer": "^1.1.0",
@@ -5213,21 +5214,21 @@
         "qrcode.react": "^3.1.0",
         "rc-cascader": "~3.24.0",
         "rc-checkbox": "~3.2.0",
-        "rc-collapse": "~3.7.2",
+        "rc-collapse": "~3.7.3",
         "rc-dialog": "~9.4.0",
         "rc-drawer": "~7.1.0",
         "rc-dropdown": "~4.2.0",
-        "rc-field-form": "~1.42.1",
+        "rc-field-form": "~1.44.0",
         "rc-image": "~7.6.0",
         "rc-input": "~1.4.5",
         "rc-input-number": "~9.0.0",
         "rc-mentions": "~2.11.1",
         "rc-menu": "~9.13.0",
         "rc-motion": "^2.9.0",
-        "rc-notification": "~5.3.0",
+        "rc-notification": "~5.4.0",
         "rc-pagination": "~4.0.4",
         "rc-picker": "~4.3.0",
-        "rc-progress": "~3.5.1",
+        "rc-progress": "~4.0.0",
         "rc-rate": "~2.12.0",
         "rc-resize-observer": "^1.4.0",
         "rc-segmented": "~2.3.0",
@@ -5235,7 +5236,7 @@
         "rc-slider": "~10.5.0",
         "rc-steps": "~6.0.1",
         "rc-switch": "~4.1.0",
-        "rc-table": "~7.42.0",
+        "rc-table": "~7.45.4",
         "rc-tabs": "~14.1.1",
         "rc-textarea": "~1.6.3",
         "rc-tooltip": "~6.2.0",
@@ -14536,9 +14537,9 @@
       }
     },
     "node_modules/rc-collapse": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmmirror.com/rc-collapse/-/rc-collapse-3.7.2.tgz",
-      "integrity": "sha512-ZRw6ipDyOnfLFySxAiCMdbHtb5ePAsB9mT17PA6y1mRD/W6KHRaZeb5qK/X9xDV1CqgyxMpzw0VdS74PCcUk4A==",
+      "version": "3.7.3",
+      "resolved": "https://registry.npmmirror.com/rc-collapse/-/rc-collapse-3.7.3.tgz",
+      "integrity": "sha512-60FJcdTRn0X5sELF18TANwtVi7FtModq649H11mYF1jh83DniMoM4MqY627sEKRCTm4+WXfGDcB7hY5oW6xhyw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -14598,9 +14599,9 @@
       }
     },
     "node_modules/rc-field-form": {
-      "version": "1.42.1",
-      "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.42.1.tgz",
-      "integrity": "sha512-SqiEmWNP+I61Lt80+ofPvT+3l8Ij6vb35IS+x14gheVnCJN0SRnOwEgsqCEB5FslT7xqjUqDnU845hRZ1jzlAA==",
+      "version": "1.44.0",
+      "resolved": "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.44.0.tgz",
+      "integrity": "sha512-el7w87fyDUsca63Y/s8qJcq9kNkf/J5h+iTdqG5WsSHLH0e6Usl7QuYSmSVzJMgtp40mOVZIY/W/QP9zwrp1FA==",
       "dependencies": {
         "@babel/runtime": "^7.18.0",
         "async-validator": "^4.1.0",
@@ -14711,9 +14712,9 @@
       }
     },
     "node_modules/rc-notification": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmmirror.com/rc-notification/-/rc-notification-5.3.0.tgz",
-      "integrity": "sha512-WCf0uCOkZ3HGfF0p1H4Sgt7aWfipxORWTPp7o6prA3vxwtWhtug3GfpYls1pnBp4WA+j8vGIi5c2/hQRpGzPcQ==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmmirror.com/rc-notification/-/rc-notification-5.4.0.tgz",
+      "integrity": "sha512-li19y9RoYJciF3WRFvD+DvWS70jdL8Fr+Gfb/OshK+iY6iTkwzoigmSIp76/kWh5tF5i/i9im12X3nsF85GYdA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -14796,9 +14797,9 @@
       }
     },
     "node_modules/rc-progress": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmmirror.com/rc-progress/-/rc-progress-3.5.1.tgz",
-      "integrity": "sha512-V6Amx6SbLRwPin/oD+k1vbPrO8+9Qf8zW1T8A7o83HdNafEVvAxPV5YsgtKFP+Ud5HghLj33zKOcEHrcrUGkfw==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/rc-progress/-/rc-progress-4.0.0.tgz",
+      "integrity": "sha512-oofVMMafOCokIUIBnZLNcOZFsABaUw8PPrf1/y0ZBvKZNpOiu5h4AO9vv11Sw0p4Hb3D0yGWuEattcQGtNJ/aw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.6",
@@ -14926,9 +14927,9 @@
       }
     },
     "node_modules/rc-table": {
-      "version": "7.42.0",
-      "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.42.0.tgz",
-      "integrity": "sha512-GwHV9Zs3HvWxBkoXatO/IeKoElzy3Ojf3dcyw1Rj3cyQVb+ZHtexslKdyzsrKRPJ0mUa62BoX+ZAg3zgTEql8w==",
+      "version": "7.45.4",
+      "resolved": "https://registry.npmmirror.com/rc-table/-/rc-table-7.45.4.tgz",
+      "integrity": "sha512-6aSbGrnkN2GLSt3s1x+wa4f3j/VEgg1uKPpaLY5qHH1/nFyreS2V7DFJ0TfUb18allf2FQl7oVYEjTixlBXEyQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "@rc-component/context": "^1.4.0",
@@ -17656,6 +17657,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/vfonts": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmmirror.com/vfonts/-/vfonts-0.0.3.tgz",
+      "integrity": "sha512-nguyw8L6Un8eelg1vQ31vIU2ESxqid7EYmy8V+MDeMaHBqaRSkg3dTBToC1PR00D89UzS/SLkfYPnx0Wf23IQQ=="
+    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "resolved": "https://r2.cnpmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

package.json

@@ -15,7 +15,7 @@
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-react": "^1.0.6",
     "ahooks": "^3.7.10",
-    "antd": "^5.14.2",
+    "antd": "^5.16.1",
     "axios": "^1.6.7",
     "lodash": "^4.17.21",
     "react": "^18.2.0",
@@ -27,6 +27,7 @@
     "sass-loader": "^14.1.1",
     "swiper": "^11.0.7",
     "typescript": "^4.9.5",
+    "vfonts": "^0.0.3",
     "web-vitals": "^2.1.4",
     "zustand": "^4.5.1"
   },

src/components/AIChatter/AIChatter.module.scss

@@ -4,7 +4,8 @@
   height: 60%;
   padding: 10px;
   box-sizing: border-box;
-  margin-bottom: 15px;
+  background-color: #ffffff;
+  border-radius: 10px;
 
   .header {
     position: relative;
@@ -17,7 +18,7 @@
       right: 0;
       bottom: 0;
       height: 10px; /* 控制阴影的高度 */
-      box-shadow: 0 8px 8px -4px rgba(0,0,0,0.2); /* 自定义阴影的大小和颜色 */
+      box-shadow: 0 8px 8px -4px rgba(0, 0, 0, 0.2); /* 自定义阴影的大小和颜色 */
       z-index: -1; /* 确保阴影在内容下方 */
     }
   }

src/context/AppContext.ts

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+
+
+interface AppContextInstance {
+  current?: string[];
+  onSetCurrent?: Function | null;
+}
+
+export const AppContext = createContext<AppContextInstance>({});

src/index.css

@@ -1,13 +1,14 @@
 * {
-    padding: 0;
-    margin: 0;
+	padding: 0;
+	margin: 0;
+	font-family: v-sans !important;
 }
 
 body, html, #root {
-    height: 100%;
+	height: 100%;
 }
 
 :root {
-    --main-color: #1677ff;
-    --boder-color: #d5d5d5;
+	--main-color: #1677ff;
+	--boder-color: #d5d5d5;
 }

src/index.tsx

@@ -1,15 +1,16 @@
+import router from '@/router';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import 'vfonts/Lato.css';
 import './index.css';
-import {RouterProvider} from "react-router";
-import router from "@/router";
+import { RouterProvider } from 'react-router';
 
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById('root') as HTMLElement,
 );
 root.render(
   <React.StrictMode>
-      <RouterProvider router={router}></RouterProvider>
-  </React.StrictMode>
+    <RouterProvider router={router}></RouterProvider>
+  </React.StrictMode>,
 );

src/layout/Layout/Layout.tsx

@@ -1,3 +1,4 @@
+import { AppContext } from '@/context/AppContext';
 import React, { useState } from 'react';
 import Header from '../Header/Header';
 import './index.scss';
@@ -25,16 +26,31 @@ const items = [
 // 简单的三段式布局
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   const [current, setCurrent] = useState(['square']);
+  const [onSetCurrent, setOnSetCurrent] = useState<Function | null>(null);
 
   function onChange({ key }: { key: string }) {
+    const res = current[0];
+    if (res === 'work') {
+      const current = () => () => {
+        setCurrent([key]);
+        setOnSetCurrent(null);
+        return void 0;
+      };
+      // @ts-ignore
+      setOnSetCurrent(current);
+      return;
+    }
     setCurrent([key]);
   }
 
   return (
-    <div className="app">
-      <Header items={items} onChange={onChange} current={current}></Header>
-      {children(current[0])}
-    </div>
+    // 监听onSetCurrent变化出现弹出离开 调用设置
+    <AppContext.Provider value={{ current, onSetCurrent }}>
+      <div className="app">
+        <Header items={items} onChange={onChange} current={current}></Header>
+        {children(current[0])}
+      </div>
+    </AppContext.Provider>
   );
 };
 

src/pages/App.tsx

@@ -6,7 +6,7 @@ function App() {
   return (
     <Layout>
       {
-        (current) => <Content current={current}/>
+        (current) => <Content current={current} />
       }
     </Layout>
   );

src/pages/Home/Home.tsx

@@ -1,26 +1,26 @@
-import {MyHomework} from "@/pages/Home/component/MyHomework";
-import TeachersHomeWork from "./component/TeachersHomeWork";
-import "./index.scss";
-import {CourseSquare} from "@/pages/CourseSquare";
-import useStore from "@/store";
+import { CourseSquare } from '@/pages/CourseSquare';
+import { MyHomework } from '@/pages/Home/component/MyHomework';
+import useStore from '@/store';
+import TeachersHomeWork from './component/TeachersHomeWork';
+import './index.scss';
 
 interface HomeProps {
-    current: string;
+  current: string;
 }
 
-function Home({current}: HomeProps) {
-    const store = useStore()
-    const state: "teachers" | "student" = store.user.role === 'STUDENT'? 'student': 'teachers';
-    return (
-        <div className="home-container">
-            {current === "work" &&
-                // @ts-ignore
-                (state === "teachers" ? <TeachersHomeWork/> : <MyHomework/>)}
-            {
-                current === "square" && <CourseSquare/>
-            }
-        </div>
-    );
+function Home({ current }: HomeProps) {
+  const store = useStore();
+  const state: 'teachers' | 'student' = store.user.role === 'STUDENT' ?   'student':'teachers';
+  return (
+    <div className="home-container">
+      {current === 'work' &&
+        // @ts-ignore
+        (state === 'teachers' ? <TeachersHomeWork/> : <MyHomework/>)}
+      {
+        current === 'square' && <CourseSquare/>
+      }
+    </div>
+  );
 }
 
 export default Home;

src/pages/Home/component/Dictionaries/index.scss

@@ -1,8 +1,11 @@
 .dictionaries {
   height: 40%;
+  background-color: #ffffff;
+  padding: 10px;
+  border-radius: 10px;
 
   .box-dialog {
-    border: solid 1px #e1e1e1;
+    border: solid 1px #efefef;
     border-radius: 5px;
     margin-top: 10px;
     height: calc(100% - 40px);

src/pages/Home/component/Edit/index.scss

@@ -33,7 +33,7 @@
 }
 
 .edit-root {
-  border: solid 1px #cccccc;
+  border: solid 1px rgba(199, 199, 199, 0.3);
   height: 100%;
 }
 
@@ -41,4 +41,4 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-}
+}

src/pages/Home/component/MyHomework/index.scss

@@ -18,5 +18,8 @@
     width: 100%;
     flex: 1;
     max-width: 100%;
+    background-color: #ffffff;
+    padding: 10px;
+    border-radius: 10px;
   }
 }

src/pages/Home/component/MyHomework/index.tsx

@@ -1,69 +1,98 @@
-import { AiDialogBox } from "@/pages/Home/component/AiDialogBox";
-import { Dictionaries } from "@/pages/Home/component/Dictionaries";
-import { Edit } from "@/pages/Home/component/Edit";
-import "./index.scss";
-import { Slider } from "@/pages/Home/component/Silder";
-import AIChatter from "@/components/AIChatter/AIChatter";
-import {useEffect, useState} from "react";
-import {IDialogue} from "@/types/dialogue";
-import useApis from "@/apis";
-import useStore from "@/store";
-import {useNavigate} from "react-router";
-import {engagementVO} from "@/types/vo";
+import useApis from '@/apis';
+import AIChatter from '@/components/AIChatter/AIChatter';
+import { AppContext } from '@/context/AppContext';
+import { Dictionaries } from '@/pages/Home/component/Dictionaries';
+import { Edit } from '@/pages/Home/component/Edit';
+import './index.scss';
+import { Slider } from '@/pages/Home/component/Silder';
+import useStore from '@/store';
+import { IDialogue } from '@/types/dialogue';
+import { engagementVO } from '@/types/vo';
+import { Modal } from 'antd';
+import { useContext, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
 
 export function MyHomework() {
-    const apis = useApis()
-    const store = useStore()
-    const nav = useNavigate()
+  const apis = useApis();
+  const store = useStore();
+  const nav = useNavigate();
+  const app = useContext(AppContext);
+  const [open, setOpen] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
 
-    const [data, setData] = useState<{
-        messages: IDialogue[],
-        dialogueId: string;
-        engagement: engagementVO
-    }>({
-        messages: [],
-        dialogueId: '',
-        engagement: {} as engagementVO
-    })
+  const [data, setData] = useState<{
+    messages: IDialogue[],
+    dialogueId: string;
+    engagement: engagementVO
+  }>({
+    messages  : [],
+    dialogueId: '',
+    engagement: {} as engagementVO,
+  });
 
-    const fetchData = async () => {
-        await apis.getAIDialogues(1, store.user.id)
-            .then((_res:any) => {
-                const data = _res.data.data
+  const fetchData = async () => {
+    await apis.getAIDialogues(1, store.user.id)
+              .then((_res: any) => {
+                const data = _res.data.data;
                 setData(prev => ({
-                    ...prev,
-                    dialogueId: data.dialogueId,
-                    messages: data.messages.content
-                }))
-            })
+                  ...prev,
+                  dialogueId: data.dialogueId,
+                  messages  : data.messages.content,
+                }));
+              });
 
-        await apis.getEngagement(store.user.id, 1)
-            .then((_res:any) => {
-                console.log(_res)
-                setData(prev => ({...prev, engagement: _res.data.data}))
-            }).catch((_err:any) => {
-                console.log(_err)
-                nav('/login')
-            })
-    }
+    await apis.getEngagement(store.user.id, 1)
+              .then((_res: any) => {
+                console.log(_res);
+                setData(prev => ({ ...prev, engagement: _res.data.data }));
+              }).catch((_err: any) => {
+        console.log(_err);
+        nav('/login');
+      });
+  };
+
+  // ok
+  function handleOk() {
+    app?.onSetCurrent?.();
+    // 加载中
+    setConfirmLoading(true);
+  }
 
-    useEffect( () => {
 
-        fetchData()
+  useEffect(() => {
+    fetchData().then(r => {
+    });
+  }, []);
 
-    }, [])
+  useEffect(() => {
+    if (app.onSetCurrent) {
+      setOpen(true);
+    }
+  }, [app.onSetCurrent]);
 
   return (
     <div className="my-work">
       <div className="my-work-slider">
         {/*<AiDialogBox />*/}
-          <AIChatter dialogueId={data.dialogueId} messages={data.messages}/>
-        <Dictionaries />
+        <AIChatter dialogueId={data.dialogueId} messages={data.messages}/>
+        <Dictionaries/>
       </div>
       <div className="my-work-input">
         <Edit engagement={data.engagement}/>
       </div>
       <Slider dialogueId={data.dialogueId}/>
+      <Modal
+        title="警告"
+        open={open}
+        onOk={handleOk}
+        confirmLoading={confirmLoading}
+        onCancel={handleOk}
+        okText="保存"
+        cancelText="离开"
+        centered
+      >
+        你的文档未保存，是否保存？
+      </Modal>
     </div>
   );
 }

src/pages/Home/component/Silder/index.scss

@@ -8,6 +8,7 @@
   padding: 20px 0;
   box-sizing: border-box;
   flex-shrink: 0;
+  background-color: #ffffff;
 
   &.shrink {
     width: 80px;

src/pages/Home/component/Silder/index.tsx

@@ -20,10 +20,12 @@ export const Slider: React.FC<ISliderProps> = ({ dialogueId }) => {
 
   const [aiRemark, setAiRemark] = useState('');
 
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   const [open, setOpen] = useState(false);
 
+  const [expanded, setExpanded] = useState(false);
+
   const article =
     '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字';
 
@@ -72,8 +74,13 @@ export const Slider: React.FC<ISliderProps> = ({ dialogueId }) => {
               <Typography.Paragraph
                 ellipsis={{
                   rows      : 2,
-                  expandable: true,
-                  symbol    : '展开',
+                  expandable: 'collapsible',
+                  symbol    : expanded ? '收起' : '展开',
+                  expanded  : expanded,
+                  // @ts-ignore
+                  onExpand: (_, info) => {
+                    setExpanded(info.expanded);
+                  },
                 }}
               >
                 {article}
@@ -93,12 +100,19 @@ export const Slider: React.FC<ISliderProps> = ({ dialogueId }) => {
               <Button onClick={handleRewrite}>智能批改</Button>
             </div>
             {
-              aiRemark === '' ?
-                <div className="capacity-item"></div> :
-                <>
-                  <Spin spinning={loading} style={{ height: '100%', width: '100%' }}></Spin>
-                  {!loading && <div className={'remark'}>{aiRemark}</div>}
-                </>
+              <div className="capacity-item">
+                <Spin
+                  spinning={loading}
+                  style={{
+                    height      : '100%',
+                    width       : '100%',
+                    display     : 'flex',
+                    alignItems  : 'center',
+                    justifyContent: 'center',
+                  }}
+                />
+                {!loading && <div className={'remark'}>{aiRemark}</div>}
+              </div>
             }
           </>
         )}

src/pages/Home/component/TeachersHomeWork/index.scss

@@ -1,4 +1,5 @@
 .teachers {
   height: 100%;
   overflow: hidden;
+  background-color: #ffffff;
 }

src/pages/Home/component/TeachersWorkDetails/index.scss

@@ -1,4 +1,4 @@
-$border: solid 1px #d5d5d5;
+$border: solid 1px rgba(213, 213, 213, 0.4);
 
 .word-details {
   width: 85%;
@@ -36,11 +36,15 @@ $border: solid 1px #d5d5d5;
 
       .edit-text {
         margin-left: 0;
+        border-bottom: $border;
+        text-indent: 2rem;
+        box-sizing: border-box;
       }
 
       .edit-details {
         display: flex;
         flex-direction: column;
+        margin-top: 10px;
         gap: 5px;
       }
 
@@ -50,6 +54,9 @@ $border: solid 1px #d5d5d5;
         flex: 1;
         display: flex;
         flex-direction: column;
+        padding: 10px;
+        border: $border;
+        border-radius: 10px;
 
         .edit-box {
           border: $border;
@@ -58,6 +65,13 @@ $border: solid 1px #d5d5d5;
           height: 100%;
         }
       }
+
+      .edit-container-box {
+        border: $border;
+        padding: 10px;
+        box-sizing: border-box;
+        border-radius: 10px;
+      }
     }
 
     .word-right {
@@ -80,6 +94,11 @@ $border: solid 1px #d5d5d5;
 
       .word-right-bottom {
         margin-top: auto;
+
+        .edit-root {
+          border-radius: 10px;
+          padding: 5px;
+        }
       }
 
       .scoring {
@@ -104,7 +123,7 @@ $border: solid 1px #d5d5d5;
       .record {
         .record-select {
           display: flex;
-          width: 100%;
+          width: 99%;
           height: 200px;
           margin-top: 20px;
           border: $border;

src/pages/Home/component/TeachersWorkDetails/index.tsx

@@ -1,7 +1,5 @@
 import { Button } from '@/components/Button/Button';
 import WordEditor from '@/components/WordEditor/WordEditor';
-import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
-import { Editor, Toolbar } from '@wangeditor/editor-for-react';
 import { Typography } from 'antd';
 import { useState } from 'react';
 import Arrow from '../../../../image/arrow.png';
@@ -25,6 +23,8 @@ export function TeachersWorkDetailsLeft({ current }: TeachersWorkDetailsLeftProp
   const article =
     '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字';
 
+  const [expanded, setExpanded] = useState(false);
+
   return <div className="word-left">
     <div className="edit-container-box">
       <div>
@@ -34,8 +34,10 @@ export function TeachersWorkDetailsLeft({ current }: TeachersWorkDetailsLeftProp
         <Typography.Paragraph
           ellipsis={{
             rows      : 2,
-            expandable: true,
-            symbol    : '展开',
+            symbol    : expanded ? '收起' : '展开',
+            expanded,
+            expandable: 'collapsible',
+            onExpand  : (_, info) => setExpanded(info.expanded),
           }}
         >
           {article}
@@ -68,12 +70,6 @@ export function TeachersWorkDetailsLeft({ current }: TeachersWorkDetailsLeftProp
   </div>;
 }
 
-const toolbarConfig: Partial<IToolbarConfig> = {};
-
-const editorConfig: Partial<IEditorConfig> = {
-  placeholder: '请输入内容...',
-};
-
 /**
  * 教师批改作文右侧
  * @param onConfirm
@@ -83,9 +79,8 @@ const editorConfig: Partial<IEditorConfig> = {
 export function TeachersWorkDetailsRight({
   current,
 }: TeachersWorkDetailsLeftProps) {
-  const [editor, setEditor] = useState<IDomEditor | null>(null);
-  const [html, setHtml] = useState('');
   const [select, setSelect] = useState(0);
+  const [textareaValue, setTextareaValue] = useState('');
 
   return <div className="word-right">
     <div className="word-right-container">
@@ -123,22 +118,16 @@ export function TeachersWorkDetailsRight({
       <div className="edit-box">
         <div>修改意见与评价</div>
         <div className="edit-root">
-          <Toolbar
-            editor={editor}
-            defaultConfig={toolbarConfig}
-            mode="default"
-            style={{ borderBottom: '1px solid #ccc' }}
-          />
-          <div className="edit-toolbar-box">
-            <Editor
-              value={html}
-              defaultConfig={editorConfig}
-              onCreated={setEditor}
-              onChange={(editor) => setHtml(editor.getHtml())}
-              mode="default"
-              style={{ height: '300px', overflowY: 'hidden' }}
-            />
-          </div>
+        <textarea
+          value={textareaValue}
+          onChange={(e) => setTextareaValue(e.target.value)}
+          placeholder=" 在这里输入修改意见与评价..."
+          style={{
+            height      : '415px', width: '99%', resize: 'vertical', outline: 'none', border: 'none', fontSize: '16px',
+            borderRadius: '10px',
+          }}
+        />
+
         </div>
         <div className="button-right">
           <Button>智能批改</Button>

src/pages/Home/index.scss

@@ -2,4 +2,5 @@
   height: 100%;
   flex: 1;
   overflow: hidden;
+  background-color: #F5F5F5;
 }

yarn.lock

@@ -32,10 +32,10 @@
   dependencies:
     "@ctrl/tinycolor" "^3.6.1"
 
-"@ant-design/cssinjs@^1.18.4":
-  version "1.18.4"
-  resolved "https://registry.npmmirror.com/@ant-design/cssinjs/-/cssinjs-1.18.4.tgz"
-  integrity sha512-IrUAOj5TYuMG556C9gdbFuOrigyhzhU5ZYpWb3gYTxAwymVqRbvLzFCZg6OsjLBR6GhzcxYF3AhxKmjB+rA2xA==
+"@ant-design/cssinjs@^1.18.5":
+  version "1.19.1"
+  resolved "https://registry.npmmirror.com/@ant-design/cssinjs/-/cssinjs-1.19.1.tgz"
+  integrity sha512-hgQ3wiys3X0sqDKWkqCJ6EYdF79i9JCvtavmIGwuuPUKmoJXV8Ff0sY+yQQSxk2dRmMyam/bYKo/Bwor45hnZw==
   dependencies:
     "@babel/runtime" "^7.11.1"
     "@emotion/hash" "^0.8.0"
@@ -50,10 +50,10 @@
   resolved "https://registry.npmmirror.com/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz"
   integrity sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==
 
-"@ant-design/icons@^5.3.1", "@ant-design/icons@^5.3.3":
-  version "5.3.4"
-  resolved "https://r.cnpmjs.org/@ant-design/icons/-/icons-5.3.4.tgz"
-  integrity sha512-U5eTSeSFr2V9SeJzYOo5mybAZfsoNuiIA8bvFoZUe+h9LBLs8UwrVaVwcMQC4AhBuojXkLMlmtnIlvUczXXHaQ==
+"@ant-design/icons@^5.3.1", "@ant-design/icons@^5.3.6":
+  version "5.3.6"
+  resolved "https://registry.npmmirror.com/@ant-design/icons/-/icons-5.3.6.tgz"
+  integrity sha512-JeWsgNjvkTTC73YDPgWOgdScRku/iHN9JU0qk39OSEmJSCiRghQMLlxGTCY5ovbRRoXjxHXnUKgQEgBDnQfKmA==
   dependencies:
     "@ant-design/colors" "^7.0.0"
     "@ant-design/icons-svg" "^4.4.0"
@@ -61,10 +61,10 @@
     classnames "^2.2.6"
     rc-util "^5.31.1"
 
-"@ant-design/react-slick@~1.0.2":
-  version "1.0.2"
-  resolved "https://registry.npmmirror.com/@ant-design/react-slick/-/react-slick-1.0.2.tgz"
-  integrity sha512-Wj8onxL/T8KQLFFiCA4t8eIRGpRR+UPgOdac2sYzonv+i0n3kXHmvHLLiOYL655DQx2Umii9Y9nNgL7ssu5haQ==
+"@ant-design/react-slick@~1.1.2":
+  version "1.1.2"
+  resolved "https://registry.npmmirror.com/@ant-design/react-slick/-/react-slick-1.1.2.tgz"
+  integrity sha512-EzlvzE6xQUBrZuuhSAFTdsr4P2bBBHGZwKFemEfq8gIGyIQCxalYfZW/T2ORbtQx5rU69o+WycP3exY/7T1hGA==
   dependencies:
     "@babel/runtime" "^7.10.4"
     classnames "^2.2.5"
@@ -1159,10 +1159,10 @@
   resolved "https://r.cnpmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.6", "@babel/runtime@^7.23.9", "@babel/runtime@^7.24.0", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
-  version "7.24.0"
-  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.0.tgz"
-  integrity sha512-Chk32uHMg6TnQdvw2e9IlqPpFX/6NLuK0Ys2PqLb7/gL5uFn9mXvK715FGLlOLQrcO4qIkNHkvPGktzzXexsFw==
+"@babel/runtime@^7.10.1", "@babel/runtime@^7.10.4", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.16.7", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.0", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.6", "@babel/runtime@^7.23.9", "@babel/runtime@^7.24.4", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+  version "7.24.4"
+  resolved "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.4.tgz"
+  integrity sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==
   dependencies:
     regenerator-runtime "^0.14.0"
 
@@ -2974,16 +2974,16 @@ ansi-styles@^6.1.0:
   resolved "https://r.cnpmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz"
   integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
 
-antd@^5.14.2:
-  version "5.15.3"
-  resolved "https://r.cnpmjs.org/antd/-/antd-5.15.3.tgz"
-  integrity sha512-53dpdGbfwipHVbqITmppp8N16i+BscMzz8NUNwaJgxwSvO9VQh/NfC/90lqGq3I2oBmxQ8TzRIxzFVKD/9OhlQ==
+antd@^5.16.1:
+  version "5.16.1"
+  resolved "https://registry.npmmirror.com/antd/-/antd-5.16.1.tgz"
+  integrity sha512-XAlLRrgYV+nj9FHnkXEPS6HNcKcluEa8v44e7Cixjlp8aOXRhUI6IfZaKpc2MPGjQ+06rp62/dsxOUNJW9kfLA==
   dependencies:
     "@ant-design/colors" "^7.0.2"
-    "@ant-design/cssinjs" "^1.18.4"
-    "@ant-design/icons" "^5.3.3"
-    "@ant-design/react-slick" "~1.0.2"
-    "@babel/runtime" "^7.24.0"
+    "@ant-design/cssinjs" "^1.18.5"
+    "@ant-design/icons" "^5.3.6"
+    "@ant-design/react-slick" "~1.1.2"
+    "@babel/runtime" "^7.24.4"
     "@ctrl/tinycolor" "^3.6.1"
     "@rc-component/color-picker" "~1.5.3"
     "@rc-component/mutate-observer" "^1.1.0"
@@ -2995,21 +2995,21 @@ antd@^5.14.2:
     qrcode.react "^3.1.0"
     rc-cascader "~3.24.0"
     rc-checkbox "~3.2.0"
-    rc-collapse "~3.7.2"
+    rc-collapse "~3.7.3"
     rc-dialog "~9.4.0"
     rc-drawer "~7.1.0"
     rc-dropdown "~4.2.0"
-    rc-field-form "~1.42.1"
+    rc-field-form "~1.44.0"
     rc-image "~7.6.0"
     rc-input "~1.4.5"
     rc-input-number "~9.0.0"
     rc-mentions "~2.11.1"
     rc-menu "~9.13.0"
     rc-motion "^2.9.0"
-    rc-notification "~5.3.0"
+    rc-notification "~5.4.0"
     rc-pagination "~4.0.4"
     rc-picker "~4.3.0"
-    rc-progress "~3.5.1"
+    rc-progress "~4.0.0"
     rc-rate "~2.12.0"
     rc-resize-observer "^1.4.0"
     rc-segmented "~2.3.0"
@@ -3017,7 +3017,7 @@ antd@^5.14.2:
     rc-slider "~10.5.0"
     rc-steps "~6.0.1"
     rc-switch "~4.1.0"
-    rc-table "~7.42.0"
+    rc-table "~7.45.4"
     rc-tabs "~14.1.1"
     rc-textarea "~1.6.3"
     rc-tooltip "~6.2.0"
@@ -8534,10 +8534,10 @@ rc-checkbox@~3.2.0:
     classnames "^2.3.2"
     rc-util "^5.25.2"
 
-rc-collapse@~3.7.2:
-  version "3.7.2"
-  resolved "https://registry.npmmirror.com/rc-collapse/-/rc-collapse-3.7.2.tgz"
-  integrity sha512-ZRw6ipDyOnfLFySxAiCMdbHtb5ePAsB9mT17PA6y1mRD/W6KHRaZeb5qK/X9xDV1CqgyxMpzw0VdS74PCcUk4A==
+rc-collapse@~3.7.3:
+  version "3.7.3"
+  resolved "https://registry.npmmirror.com/rc-collapse/-/rc-collapse-3.7.3.tgz"
+  integrity sha512-60FJcdTRn0X5sELF18TANwtVi7FtModq649H11mYF1jh83DniMoM4MqY627sEKRCTm4+WXfGDcB7hY5oW6xhyw==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "2.x"
@@ -8576,10 +8576,10 @@ rc-dropdown@~4.2.0:
     classnames "^2.2.6"
     rc-util "^5.17.0"
 
-rc-field-form@~1.42.1:
-  version "1.42.1"
-  resolved "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.42.1.tgz"
-  integrity sha512-SqiEmWNP+I61Lt80+ofPvT+3l8Ij6vb35IS+x14gheVnCJN0SRnOwEgsqCEB5FslT7xqjUqDnU845hRZ1jzlAA==
+rc-field-form@~1.44.0:
+  version "1.44.0"
+  resolved "https://registry.npmmirror.com/rc-field-form/-/rc-field-form-1.44.0.tgz"
+  integrity sha512-el7w87fyDUsca63Y/s8qJcq9kNkf/J5h+iTdqG5WsSHLH0e6Usl7QuYSmSVzJMgtp40mOVZIY/W/QP9zwrp1FA==
   dependencies:
     "@babel/runtime" "^7.18.0"
     async-validator "^4.1.0"
@@ -8651,10 +8651,10 @@ rc-motion@^2.0.0, rc-motion@^2.0.1, rc-motion@^2.3.0, rc-motion@^2.3.4, rc-motio
     classnames "^2.2.1"
     rc-util "^5.21.0"
 
-rc-notification@~5.3.0:
-  version "5.3.0"
-  resolved "https://registry.npmmirror.com/rc-notification/-/rc-notification-5.3.0.tgz"
-  integrity sha512-WCf0uCOkZ3HGfF0p1H4Sgt7aWfipxORWTPp7o6prA3vxwtWhtug3GfpYls1pnBp4WA+j8vGIi5c2/hQRpGzPcQ==
+rc-notification@~5.4.0:
+  version "5.4.0"
+  resolved "https://registry.npmmirror.com/rc-notification/-/rc-notification-5.4.0.tgz"
+  integrity sha512-li19y9RoYJciF3WRFvD+DvWS70jdL8Fr+Gfb/OshK+iY6iTkwzoigmSIp76/kWh5tF5i/i9im12X3nsF85GYdA==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "2.x"
@@ -8692,10 +8692,10 @@ rc-picker@~4.3.0:
     rc-resize-observer "^1.4.0"
     rc-util "^5.38.1"
 
-rc-progress@~3.5.1:
-  version "3.5.1"
-  resolved "https://registry.npmmirror.com/rc-progress/-/rc-progress-3.5.1.tgz"
-  integrity sha512-V6Amx6SbLRwPin/oD+k1vbPrO8+9Qf8zW1T8A7o83HdNafEVvAxPV5YsgtKFP+Ud5HghLj33zKOcEHrcrUGkfw==
+rc-progress@~4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmmirror.com/rc-progress/-/rc-progress-4.0.0.tgz"
+  integrity sha512-oofVMMafOCokIUIBnZLNcOZFsABaUw8PPrf1/y0ZBvKZNpOiu5h4AO9vv11Sw0p4Hb3D0yGWuEattcQGtNJ/aw==
   dependencies:
     "@babel/runtime" "^7.10.1"
     classnames "^2.2.6"
@@ -8770,10 +8770,10 @@ rc-switch@~4.1.0:
     classnames "^2.2.1"
     rc-util "^5.30.0"
 
-rc-table@~7.42.0:
-  version "7.42.0"
-  resolved "https://registry.npmmirror.com/rc-table/-/rc-table-7.42.0.tgz"
-  integrity sha512-GwHV9Zs3HvWxBkoXatO/IeKoElzy3Ojf3dcyw1Rj3cyQVb+ZHtexslKdyzsrKRPJ0mUa62BoX+ZAg3zgTEql8w==
+rc-table@~7.45.4:
+  version "7.45.4"
+  resolved "https://registry.npmmirror.com/rc-table/-/rc-table-7.45.4.tgz"
+  integrity sha512-6aSbGrnkN2GLSt3s1x+wa4f3j/VEgg1uKPpaLY5qHH1/nFyreS2V7DFJ0TfUb18allf2FQl7oVYEjTixlBXEyQ==
   dependencies:
     "@babel/runtime" "^7.10.1"
     "@rc-component/context" "^1.4.0"
@@ -10540,6 +10540,11 @@ vary@~1.1.2:
   resolved "https://r2.cnpmjs.org/vary/-/vary-1.1.2.tgz"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+vfonts@^0.0.3:
+  version "0.0.3"
+  resolved "https://registry.npmmirror.com/vfonts/-/vfonts-0.0.3.tgz"
+  integrity sha512-nguyw8L6Un8eelg1vQ31vIU2ESxqid7EYmy8V+MDeMaHBqaRSkg3dTBToC1PR00D89UzS/SLkfYPnx0Wf23IQQ==
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://r2.cnpmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz"