feat: 增加代码保存按钮，增加 js 代码的格式化功能

xjq7 · Oct 22, 2022 · 556fda2 · 556fda2
1 parent 1750279
commit 556fda2
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 119 deletions.
diff --git a/client/src/components/CodeEditorMonaco/index.tsx b/client/src/components/CodeEditorMonaco/index.tsx
@@ -70,6 +70,10 @@ const Component = (props: Props, ref: ForwardedRef<Expose>) => {
         value: codeCache || template[type],
         language: languageMap[type],
         theme: themeType,
+        formatOnType: true,
+        smoothScrolling: true,
+        formatOnPaste: true,
+        readOnly: false,
       });
 
       return () => editorRef.current?.dispose();

diff --git a/client/src/pages/editor/index.tsx b/client/src/pages/editor/index.tsx
@@ -113,15 +113,19 @@ const Component = () => {
         ?.getModel()
         ?.onDidChangeContent(
           debounce(() => {
-            storage.set(
-              CodeStorageKey[codeType],
-              editorRef.current?.getEditor()?.getValue()
-            );
+            saveCode();
           }, 1500)
         );
     }
   }, [editorRef.current]);
 
+  const saveCode = () => {
+    storage.set(
+      CodeStorageKey[codeType],
+      editorRef.current?.getEditor()?.getValue()
+    );
+  };
+
   const renderInput = () => {
     return (
       <TextArea
@@ -197,6 +201,24 @@ const Component = () => {
 
       <Editor ref={editorRef} type={codeType} themeType={themeType} />
       <div className={styles.operator}>
+        {codeType === CodeType.nodejs && (
+          <Button
+            type="primary"
+            size="sm"
+            className="mr-2"
+            onClick={() => {
+              editorRef.current
+                ?.getEditor()
+                ?.getAction('editor.action.formatDocument')
+                ?.run();
+            }}
+          >
+            format
+          </Button>
+        )}
+        <Button type="primary" size="sm" className="mr-2" onClick={saveCode}>
+          save
+        </Button>
         <Button
           type="primary"
           size="sm"

diff --git a/client/vite.config.ts b/client/vite.config.ts
@@ -5,16 +5,21 @@ import analyze from 'rollup-plugin-analyzer';
 import dayjs from 'dayjs';
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), analyze()],
-  base: 'https://image.xjq.icu/runcode/' + dayjs().format('YYYY-MM-DD') + '/',
-  resolve: {
-    alias: {
-      '~': path.resolve(__dirname, './src/'),
-      '~components': path.resolve(__dirname, './src/components'),
-      '~store': path.resolve(__dirname, './src/store'),
-      '~utils': path.resolve(__dirname, './src/utils'),
-      '~constant': path.resolve(__dirname, './src/constant'),
+export default ({ mode }) => {
+  return defineConfig({
+    plugins: [react(), analyze()],
+    base:
+      mode === 'dev'
+        ? '/'
+        : 'https://image.xjq.icu/runcode/' + dayjs().format('YYYY-MM-DD') + '/',
+    resolve: {
+      alias: {
+        '~': path.resolve(__dirname, './src/'),
+        '~components': path.resolve(__dirname, './src/components'),
+        '~store': path.resolve(__dirname, './src/store'),
+        '~utils': path.resolve(__dirname, './src/utils'),
+        '~constant': path.resolve(__dirname, './src/constant'),
+      },
     },
-  },
-});
+  });
+};