edit调整

src/pages/Home/Home.tsx

@@ -1,19 +1,18 @@
-import { MyHomework } from '@/pages/Home/component/MyHomework';
-import React from 'react';
-import './index.scss';
-import TeachersHomeWork from './component/TeachersHomeWork';
+import { MyHomework } from "@/pages/Home/component/MyHomework";
+import TeachersHomeWork from "./component/TeachersHomeWork";
+import "./index.scss";
 
 interface HomeProps {
   current: string;
 }
 
 function Home({ current }: HomeProps) {
-  const state: 'teachers' | 'student' = 'teachers';
+  const state: "teachers" | "student" = "student";
   return (
     <div className="home-container">
-      {current === 'work' &&
+      {current === "work" &&
         // @ts-ignore
-        (state === 'teachers' ? <TeachersHomeWork/> : <MyHomework/>)}
+        (state === "teachers" ? <TeachersHomeWork /> : <MyHomework />)}
     </div>
   );
 }

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

@@ -4,11 +4,6 @@
   height: 100%;
 }
 
-.edit-text {
-  margin-left: 30px;
-  margin-top: 20px;
-}
-
 .down {
   text-align: right;
 }
@@ -19,11 +14,15 @@
   gap: 10px;
   margin-top: auto;
   flex-direction: column;
+  height: 100%;
 }
 
 
 .button-right {
-  text-align: right;
+  display: flex;
+  gap: 20px;
+  justify-content: flex-end;
+
 }
 
 
@@ -35,4 +34,11 @@
 
 .edit-root {
   border: solid 1px #cccccc;
+  height: 100%;
+}
+
+.edit-box-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }

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

@@ -1,66 +1,31 @@
-import { Button } from '@/components/Button/Button';
-import '@wangeditor/editor/dist/css/style.css'; // 引入 css
-import './index.scss';
-import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
-import { Editor, Toolbar } from '@wangeditor/editor-for-react';
-import { Typography } from 'antd';
-import { useEffect, useState } from 'react';
+import { Button } from "@/components/Button/Button";
+import { useEffect, useState } from "react";
 import WordEditor from "@/components/WordEditor/WordEditor";
-
-const editorConfig: Partial<IEditorConfig> = {
-  placeholder: '请输入内容...',
-};
-
-const toolbarConfig: Partial<IToolbarConfig> = {};
+import "./index.scss";
 
 export function Edit() {
-  const article =
-    '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字';
-
-  const [editor, setEditor] = useState<IDomEditor | null>(null);
-
-  const [isModified, setIsModified] = useState(false)
-  const handleValueChange = (state: boolean)=> {
-    setIsModified(state)
-  }
-
-  useEffect(() => {
-    return () => {
-      if (editor == null) return;
-      editor.destroy();
-      setEditor(null);
-    };
-  }, [editor]);
+  const [isModified, setIsModified] = useState(false);
+  const handleValueChange = (state: boolean) => {
+    setIsModified(state);
+  };
 
   return (
     <div className="edit">
-      <div>写作题目</div>
-      <div className="edit-text">
-        <Typography.Paragraph
-          ellipsis={{
-            rows      : 2,
-            expandable: true,
-            symbol    : '展开',
-          }}
-        >
-          {article}
-        </Typography.Paragraph>
-        <div className="down">
-          <Button type="link">下载</Button>
-        </div>
-      </div>
       <div className="edit-box">
         <div>编辑区</div>
         <div className="edit-root">
           <WordEditor
-              onValueChange={handleValueChange}
-              key={"13412453353_123524534324"}
-              title={"13412453353_123524534324.docx"}
-              url={"http://eai-files.oss-cn-shanghai.aliyuncs.com/13412453353_123524534324.docx"}
+            onValueChange={handleValueChange}
+            key={"13412453353_123524534324"}
+            title={"13412453353_123524534324.docx"}
+            url={
+              "http://eai-files.oss-cn-shanghai.aliyuncs.com/13412453353_123524534324.docx"
+            }
           ></WordEditor>
         </div>
         <div className="button-right">
-          <Button>只能批改</Button>
+          <Button>提交</Button>
+          <Button>暂存</Button>
         </div>
       </div>
     </div>

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

@@ -1,18 +1,20 @@
-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 { 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";
 
 export function MyHomework() {
-    return <div className="my-work">
-        <div className="my-work-slider">
-            <AiDialogBox/>
-            <Dictionaries/>
-        </div>
-        <div className="my-work-input">
-            <Edit/>
-        </div>
-        <Slider/>
-    </div>;
+  return (
+    <div className="my-work">
+      <div className="my-work-slider">
+        <AiDialogBox />
+        <Dictionaries />
+      </div>
+      <div className="my-work-input">
+        <Edit />
+      </div>
+      <Slider />
+    </div>
+  );
 }

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

@@ -78,3 +78,7 @@
   box-shadow: rgba(0, 0, 0, 0.1) 0 4px 10px;
 }
 
+.edit-text {
+  margin-left: 10px;
+}
+

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

@@ -1,52 +1,62 @@
-import "./index.scss"
-import {MenuUnfoldOutlined} from "@ant-design/icons";
-import {useState} from "react";
+import { MenuUnfoldOutlined } from "@ant-design/icons";
+import { Typography } from "antd";
+import { Button } from "@/components/Button/Button";
+import { useState } from "react";
+import "./index.scss";
 
 export function Slider() {
-    const [isShrink, setShrink] = useState(false)
+  const [isShrink, setShrink] = useState(false);
 
-    const rootClassName = `slider-content ${isShrink ? 'shrink' : ''}`
+  const article =
+    "这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字";
 
-    return <div className={rootClassName}>
-        <div className="slider-icons" onClick={() => setShrink(!isShrink)}>
-            <MenuUnfoldOutlined/>
-        </div>
-        <div className="slider-item-box">
-            {
-                isShrink && <>
-                    <div className="slider-item">
-                        范文
-                    </div>
-                    <div className="slider-item">
-                        文献
-                    </div>
-                    <div className="slider-item">
-                        批改
-                    </div>
-                </>
-            }
-            {
-                !isShrink && <>
-                    <div>
-                        范文、介绍
-                    </div>
-                    <div className="slider-tag">
-                        <div className="slider-tag-item">
-                            introduction
-                        </div>
-                        <div className="slider-tag-item">
-                            methodology
-                        </div>
-                        <div className="slider-tag-item">
-                            范文样例
-                        </div>
-                    </div>
-                    <div>
-                        智能批改修改意见
-                    </div>
-                    <div className="capacity-item"></div>
-                </>
-            }
-        </div>
+  const rootClassName = `slider-content ${isShrink ? "shrink" : ""}`;
+
+  return (
+    <div className={rootClassName}>
+      <div className="slider-icons" onClick={() => setShrink(!isShrink)}>
+        <MenuUnfoldOutlined />
+      </div>
+      <div className="slider-item-box">
+        {isShrink && (
+          <>
+            <div className="slider-item">写作</div>
+            <div className="slider-item">范文</div>
+            <div className="slider-item">文献</div>
+            <div className="slider-item">批改</div>
+          </>
+        )}
+        {!isShrink && (
+          <>
+            <div>写作题目</div>
+            <div className="edit-text">
+              <Typography.Paragraph
+                ellipsis={{
+                  rows: 2,
+                  expandable: true,
+                  symbol: "展开",
+                }}
+              >
+                {article}
+              </Typography.Paragraph>
+              <div className="down">
+                <Button type="link">下载</Button>
+              </div>
+            </div>
+            <div>范文、介绍</div>
+            <div className="slider-tag">
+              <div className="slider-tag-item">introduction</div>
+              <div className="slider-tag-item">methodology</div>
+              <div className="slider-tag-item">范文样例</div>
+            </div>
+            <div className="edit-box-header">
+              智能批改修改意见
+              <Button>智能批改</Button>
+            </div>
+            <div className="capacity-item"></div>
+          </>
+        )}
+      </div>
     </div>
-}
+  );
+}