upp

src/components/ZRichText/index.module.scss

@@ -10,9 +10,9 @@
         display: none;
       }
 
-      // .bf-content {
-      //   height: 300px;
-      // }
+      .bf-content {
+        height: calc(100% - 92px);
+      }
 
       .bf-controlbar {
         position: relative;
@@ -23,6 +23,7 @@
           right: 15px;
           cursor: pointer;
           color: var(--themeColor);
+          display: none;
         }
 
         .upImgBoxNo {

src/components/ZRichText/index.tsx

@@ -36,42 +36,47 @@ type Props = {
 function ZRichText({ check, dirCode, isLook, myUrl, full }: Props, ref: any) {
   // 添加 上传 图片的dom
   useEffect(() => {
-    if (!isLook) {
-      setTimeout(() => {
-        const dom = document.querySelector(".bf-controlbar")!;
-        const div = document.createElement("div");
-        div.className = "upImgBox";
-        // div.title = "上传图片";
-        div.innerHTML = "上传图片";
-        div.onclick = async () => {
-          myInput.current?.click();
-        };
-        dom.appendChild(div);
-      }, 200);
-
-      // 监听 富文本 的 class 变化，在全屏的时候会 富文本会添加上 fullscreen 的类
-      // 修复顶部样式冲突问题
-
-      const editorDom = document.querySelector(
-        ".bf-container"
-      ) as HTMLDivElement;
-
-      const observer = new MutationObserver(() => {
-        // console.log("change");
-        const dom = document.querySelector(".layoutRightTop") as HTMLDivElement;
-
-        if (editorDom.className.includes("fullscreen")) dom.style.zIndex = "-1";
-        else dom.style.zIndex = "100";
-      });
-
-      observer.observe(editorDom, {
-        attributes: true,
-      });
-
-      // 销毁监听
-      return () => {
-        observer.disconnect();
+    setTimeout(() => {
+      const dom = document.querySelector(".bf-controlbar")!;
+      const div = document.createElement("div");
+      div.className = "upImgBox";
+      // div.title = "上传图片";
+      div.innerHTML = "上传图片";
+      div.onclick = async () => {
+        myInput.current?.click();
       };
+      dom.appendChild(div);
+    }, 200);
+
+    // 监听 富文本 的 class 变化，在全屏的时候会 富文本会添加上 fullscreen 的类
+    // 修复顶部样式冲突问题
+
+    const editorDom = document.querySelector(".bf-container") as HTMLDivElement;
+
+    const observer = new MutationObserver(() => {
+      // console.log("change");
+      const dom = document.querySelector(".layoutRightTop") as HTMLDivElement;
+
+      if (editorDom.className.includes("fullscreen")) dom.style.zIndex = "-1";
+      else dom.style.zIndex = "100";
+    });
+
+    observer.observe(editorDom, {
+      attributes: true,
+    });
+
+    // 销毁监听
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    const testDom = document.querySelector(".upImgBox") as HTMLDivElement;
+    if (testDom) {
+      isLook
+        ? (testDom.style.display = "none")
+        : (testDom.style.display = "block");
     }
   }, [isLook]);
 

src/pages/A1outline/index.module.scss

@@ -1,7 +1,8 @@
 .A1outline {
   background-color: #fff;
   border-radius: 10px;
-  padding: 24px;
+  padding: 1px 24px 24px;
+  position: relative;
 
   :global {
     .A1top {
@@ -11,7 +12,18 @@
 
     .A1main {
       width: calc(100% - 150px);
-      height: calc(100% - 50px);
+      height: calc(100% - 10px);
+    }
+
+    .A1Btn {
+      position: absolute;
+      right: 30px;
+      top: 50%;
+      transform: translateY(-50%);
+      .ant-btn{
+        display: block;
+        margin-bottom: 15px;
+      }
     }
   }
 }

src/pages/A1outline/index.tsx

@@ -10,7 +10,7 @@ import { MessageFu } from "@/utils/message";
 function A1outline() {
   // 富文本的ref
   const ZRichTextRef = useRef<any>(null);
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
 
   const dispatch = useDispatch();
 
@@ -33,38 +33,44 @@ function A1outline() {
   const [isEdit, setIsEdit] = useState(true);
 
   // 点击确定
-  const btnOkFu = useCallback(async() => {
+  const btnOkFu = useCallback(async () => {
     try {
-      setLoading(true)
+      setLoading(true);
       const rtf = ZRichTextRef.current?.fatherBtnOkFu();
       await editIntroAPI({
         id: detailId,
-        rtf: rtf.val
-      })
-      setIsEdit(true)
-      MessageFu.success('保存成功')
+        rtf: rtf.val,
+      });
+      setIsEdit(true);
+      MessageFu.success("保存成功");
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
   }, [detailId]);
 
   const handleCancel = () => {
-    setIsEdit(true)
+    setIsEdit(true);
     ZRichTextRef.current?.ritxtShowFu(text);
-  }
+  };
 
   return (
     <div className={styles.A1outline}>
       <div className="pageTitle">概述管理</div>
       <div className="A1top">
-        {
-          isEdit ? (
-            <Button type="primary" onClick={() => setIsEdit(false)}>编辑</Button>
-          ) : <>
-            <Button style={{marginRight: '10px'}} onClick={handleCancel}>取消</Button>
-            <Button loading={loading} type="primary" onClick={btnOkFu}>保存</Button>
-          </>
-        }
+        <div className="A1Btn">
+          {isEdit ? (
+            <Button type="primary" onClick={() => setIsEdit(false)}>
+              编辑
+            </Button>
+          ) : (
+            <>
+              <Button onClick={handleCancel}>取消</Button>
+              <Button loading={loading} type="primary" onClick={btnOkFu}>
+                保存
+              </Button>
+            </>
+          )}
+        </div>
       </div>
       <div className="A1main">
         <ZRichText

src/pages/A2intro/index.module.scss

@@ -1,15 +1,24 @@
 .A2intro {
   background-color: #fff;
   border-radius: 10px;
-  padding: 24px;
+  padding:10px 24px 24px;
 
   :global {
     .A2main {
-      height: calc(100% - 62px - 32px);
+      width: calc(100% - 150px);
+      height: calc(100% - 62px);
     }
+
     .A2toolbar {
-      margin-bottom: 10px;
-      text-align: right;
+      position: absolute;
+      right: 30px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      .ant-btn {
+        display: block;
+        margin-bottom: 15px;
+      }
     }
   }
 }

src/pages/A2intro/index.tsx

@@ -9,18 +9,20 @@ import { MessageFu } from "@/utils/message";
 
 function A2intro() {
   const dispatch = useDispatch();
-  const tableInfo = useSelector((state: RootState) => state.A2intro.tableInfo.map((i, idx) => ({
-    ...i,
-    key: `${idx}`,
-    label: i.name,
-  })));
-  const [activeKey, setActiveKey] = useState('0');
+  const tableInfo = useSelector((state: RootState) =>
+    state.A2intro.tableInfo.map((i, idx) => ({
+      ...i,
+      key: `${idx}`,
+      label: i.name,
+    }))
+  );
+  const [activeKey, setActiveKey] = useState("0");
   const [isLook, setIsLook] = useState(true);
   const [loading, setLoading] = useState(false);
   const ZRichTextRef = useRef<any>(null);
 
   const getList = useCallback(async () => {
-    const data = await getAboutListAPI()
+    const data = await getAboutListAPI();
     ZRichTextRef.current?.ritxtShowFu(data[0].rtf);
     dispatch({ type: "A2/getList", payload: data });
   }, [dispatch]);
@@ -29,54 +31,54 @@ function A2intro() {
     getList();
   }, [getList]);
 
-  const handleSave = async() => {
+  const handleSave = async () => {
     try {
-      setLoading(true)
-      const val = ZRichTextRef.current?.fatherBtnOkFu().val
+      setLoading(true);
+      const val = ZRichTextRef.current?.fatherBtnOkFu().val;
       await editAboutAPI({
         id: tableInfo[Number(activeKey)].id,
-        rtf: val
-      })
-      setIsLook(true)
-      MessageFu.success('保存成功')
-      const clone = [...tableInfo]
-      clone[Number(activeKey)].rtf = val
+        rtf: val,
+      });
+      setIsLook(true);
+      MessageFu.success("保存成功");
+      const clone = [...tableInfo];
+      clone[Number(activeKey)].rtf = val;
       dispatch({ type: "A2/getList", payload: clone });
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
   };
 
   const cancelSave = () => {
-    setIsLook(true)
+    setIsLook(true);
     ZRichTextRef.current?.ritxtShowFu(tableInfo[Number(activeKey)].rtf);
-  }
+  };
 
   return (
     <div className={styles.A2intro}>
       <div className="pageTitle">简介管理</div>
 
-      {/* @ts-ignore */}
-      <Tabs items={tableInfo} onChange={v => {
-        setActiveKey(v)
-        setIsLook(true)
-        ZRichTextRef.current?.ritxtShowFu(tableInfo[Number(v)].rtf);
-      }} />
+      <Tabs
+        // @ts-ignore
+        items={tableInfo}
+        onChange={(v) => {
+          setActiveKey(v);
+          setIsLook(true);
+          ZRichTextRef.current?.ritxtShowFu(tableInfo[Number(v)].rtf);
+        }}
+      />
 
       <div className="A2toolbar">
         {isLook ? (
           <Button onClick={() => setIsLook(false)}>编辑</Button>
-        ) : <>
-          <Button
-            style={{marginRight: '10px'}}
-            onClick={cancelSave}
-          >取消</Button>
-          <Button
-            type="primary"
-            loading={loading}
-            onClick={handleSave}
-          >保存</Button>
-        </>}
+        ) : (
+          <>
+            <Button onClick={cancelSave}>取消</Button>
+            <Button type="primary" loading={loading} onClick={handleSave}>
+              保存
+            </Button>
+          </>
+        )}
       </div>
 
       <div className="A2main">