feat: 添加i18n，美化界面

2025-03-20 02:29:01 +08:00
parent 27d9bdf54e
commit c206add7eb
56 changed files with 2743 additions and 928 deletions
--- a/src/pages/container/module/DrawEdit.tsx
+++ b/src/pages/container/module/DrawEdit.tsx
@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState } from 'react';
+import { BaseEditor } from '@kevisual/codemirror/editor/editor.ts';
+import { Drawer } from '@mui/material';
+import { useShallow } from 'zustand/shallow';
+import { useContainerStore } from '../store';
+import { Tooltip } from '@mui/material';
+import { IconButton } from '@kevisual/center-components/button/index.tsx';
+import { LeftOutlined, SaveOutlined } from '@ant-design/icons';
+
+export const DrawEdit = () => {
+  const editorElRef = useRef<HTMLDivElement>(null);
+  const editorRef = useRef<BaseEditor>(null);
+  const containerStore = useContainerStore(
+    useShallow((state) => {
+      return {
+        openDrawEdit: state.openDrawEdit,
+        setOpenDrawEdit: state.setOpenDrawEdit,
+        data: state.data,
+        updateData: state.updateData,
+      };
+    }),
+  );
+  const { openDrawEdit, setOpenDrawEdit } = containerStore;
+  const [mount, setMount] = useState(false);
+  useEffect(() => {
+    if (openDrawEdit && editorElRef.current && !mount) {
+      editorRef.current = new BaseEditor();
+      editorRef.current.createEditor(editorElRef.current);
+      setMount(true);
+    }
+
+    return () => {
+      if (editorRef.current) {
+        editorRef.current.destroyEditor();
+      }
+    };
+  }, [openDrawEdit]);
+
+  useEffect(() => {
+    if (openDrawEdit && containerStore.data?.id && mount) {
+      const editor = editorRef.current;
+      const formData = containerStore.data;
+      const fileType = editor?.getFileType(formData.title);
+      const language = editor?.language;
+      if (fileType && fileType !== language) {
+        editor?.setLanguage(fileType, editorElRef.current!);
+      } else {
+        editor?.resetEditor(editorElRef.current!);
+      }
+      editor?.setContent(formData.code || '');
+    }
+  }, [openDrawEdit, containerStore.data?.id, mount]);
+
+  return (
+    <Drawer
+      open={openDrawEdit}
+      ModalProps={{
+        keepMounted: true, // 保持挂载
+        hideBackdrop: true, // 移除mask
+        disableEnforceFocus: true, // 允许操作背景内容
+        disableAutoFocus: true, // 防止自动聚焦
+      }}
+      anchor='right'>
+      <div className='bg-secondary w-[600px] h-[48px]'>
+        <div className='text-white flex p-2'>
+          <div className='ml-2 flex gap-2'>
+            <Tooltip title='返回'>
+              <IconButton
+                sx={{
+                  '&:hover': {
+                    color: 'primary.main',
+                  },
+                }}
+                onClick={() => {
+                  setOpenDrawEdit(false);
+                }}>
+                <LeftOutlined />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title='保存'>
+              <IconButton
+                sx={{
+                  '&:hover': {
+                    color: 'primary.main',
+                  },
+                }}
+                onClick={() => {
+                  const code = editorRef.current?.getContent();
+                  containerStore.updateData({ id: containerStore.data.id, code }, { refresh: false });
+                }}>
+                <SaveOutlined />
+              </IconButton>
+            </Tooltip>
+          </div>
+          <div className='flex-1 ml-2 flex items-center'>{containerStore.data?.title}</div>
+        </div>
+      </div>
+      <div className='border-primary' style={{ height: 'calc(100% - 50px)' }} ref={editorElRef}></div>
+    </Drawer>
+  );
+};
+
+export default DrawEdit;