fix: update designer config (#186)

* docs: add section to generate local https ca * fix: support disable format code * fix: disable autoRemoveUnusedImports in CodeEditor * fix: update toggle view setting
NetEase · Jul 12, 2024 · 85c053b · 85c053b
1 parent 32f5667
commit 85c053b
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 152 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@ coverage/
 .umi-production/
 .log
 .eslintcache
+*.pem
diff --git a/README.md b/README.md
@@ -70,6 +70,23 @@ yarn
 yarn start
 ```
 
+### Local Https certificate
+
+If you need to use https in the local development environment, you can use the following command to generate a certificate:
+
+```bash
+brew install mkcert
+
+# install the local certificate
+mkcert -install
+
+# enter the playground app directory
+cd apps/playground
+
+# generate a certificate
+mkcert local.netease.com # or change to your own domain name
+```
+
 ## 💬 Community
 
 Join NetEase Tango Community to share your ideas, suggestions, or questions and connect with other users and contributors.

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -70,6 +70,23 @@ yarn
 yarn start
 ```
 
+### 本地 https 证书
+
+如果需要在本地开发环境中使用 https，可以使用以下命令生成证书：
+
+```bash
+brew install mkcert
+
+# 将 mkcert 添加到本地根 CA，仅在本地生效
+mkcert -install
+
+# 进入 playground 应用目录
+cd apps/playground
+
+# 为网站生成一个由 mkcert 签名的证书
+mkcert local.netease.com
+```
+
 ## 💬 社区讨论
 
 参与 NetEase Tango 的社区，以分享您的想法、建议或问题，并与其他用户和贡献者建立联系。

diff --git a/apps/playground/local.netease.com-key.pem b/apps/playground/local.netease.com-key.pem
diff --git a/apps/playground/local.netease.com.pem b/apps/playground/local.netease.com.pem
diff --git a/apps/playground/src/pages/index.tsx b/apps/playground/src/pages/index.tsx
@@ -187,6 +187,9 @@ export default function App() {
           />
         </Sidebar>
         <WorkspacePanel>
+          <WorkspaceView mode="code">
+            <CodeEditor />
+          </WorkspaceView>
           <WorkspaceView mode="design">
             <Sandbox
               onMessage={(e) => {
@@ -208,9 +211,6 @@ export default function App() {
               navigatorExtra={<Button size="small">hello world</Button>}
             />
           </WorkspaceView>
-          <WorkspaceView mode="code">
-            <CodeEditor />
-          </WorkspaceView>
         </WorkspacePanel>
         <SettingPanel />
       </DesignerPanel>

diff --git a/packages/core/src/models/designer.ts b/packages/core/src/models/designer.ts
@@ -239,6 +239,13 @@ export class Designer {
 
   setActiveView(view: DesignerViewType) {
     this._activeView = view;
+    if (view === 'dual') {
+      this.setActiveSidebarPanel('');
+      this.toggleRightPanel(false);
+      this.toggleIsPreview(true);
+    } else if (view === 'design') {
+      this.toggleIsPreview(false);
+    }
   }
 
   setActiveSidebarPanel(panel: string) {

diff --git a/packages/core/src/models/workspace.ts b/packages/core/src/models/workspace.ts
@@ -442,7 +442,9 @@ export class Workspace extends EventTarget implements IWorkspace {
   updateFile(filename: string, code: string, shouldFormatCode = false) {
     const file = this.getFile(filename);
     file.update(code);
-    if (shouldFormatCode && file instanceof TangoViewModule) {
+
+    const shouldFormat = shouldFormatCode ?? this.projectConfig?.designerConfig?.autoFormatCode;
+    if (shouldFormat && file instanceof TangoViewModule) {
       file.removeUnusedImportSpecifiers().update();
     }
     this.history.push({

diff --git a/packages/designer/src/editor.tsx b/packages/designer/src/editor.tsx
@@ -23,113 +23,111 @@ const ideConfig = {
 
 export interface CodeEditorProps extends Partial<MultiEditorProps> {
   /**
-   * 是否自动清楚未使用的导入
+   * 是否自动清除未使用的导入
    */
   autoRemoveUnusedImports?: boolean;
 }
 
-export const CodeEditor = observer(
-  ({ autoRemoveUnusedImports = true, ...rest }: CodeEditorProps) => {
-    const editorRef = useRef(null);
-    const workspace = useWorkspace();
-    const designer = useDesigner();
-    const files = workspace.listFiles();
-    const activeFile = workspace.activeFile;
+export const CodeEditor = observer(({ autoRemoveUnusedImports, ...rest }: CodeEditorProps) => {
+  const editorRef = useRef(null);
+  const workspace = useWorkspace();
+  const designer = useDesigner();
+  const files = workspace.listFiles();
+  const activeFile = workspace.activeFile;
 
-    let loc: any; // 记录视图代码的选中位置
-    const selectNode = workspace.selectSource.firstNode;
-    if (selectNode && activeFile === workspace.activeViewFile) {
-      loc = selectNode.loc;
-    }
+  let loc: any; // 记录视图代码的选中位置
+  const selectNode = workspace.selectSource.firstNode;
+  if (selectNode && activeFile === workspace.activeViewFile) {
+    loc = selectNode.loc;
+  }
 
-    useEffect(() => {
-      editorRef.current?.refresh(files, activeFile, loc);
-    }, [files, activeFile, loc]);
+  useEffect(() => {
+    editorRef.current?.refresh(files, activeFile, loc);
+  }, [files, activeFile, loc]);
 
-    const fileSave = useCallback(
-      (path: string, value: string) => {
-        if (!isJsFile(path)) {
-          // 非 js 文件直接保存
-          workspace.updateFile(path, value, autoRemoveUnusedImports);
-          return;
-        }
+  const fileSave = useCallback(
+    (path: string, value: string) => {
+      if (!isJsFile(path)) {
+        // 非 js 文件直接保存
+        workspace.updateFile(path, value, autoRemoveUnusedImports);
+        return;
+      }
 
-        // js 文件需要先检查语法，只有语法正确才会保存
-        if (isValidCode(value)) {
-          workspace.updateFile(path, value, autoRemoveUnusedImports);
-        } else {
-          Modal.confirm({
-            title: '检测到代码中存在语法错误，暂时无法将代码同步给设计器，是否回退到安全代码？',
-            onOk: () => {
-              editorRef.current?.refresh(files, activeFile);
-            },
-            onCancel: () => {},
-          });
-        }
-      },
-      [workspace, autoRemoveUnusedImports, activeFile, files],
-    );
+      // js 文件需要先检查语法，只有语法正确才会保存
+      if (isValidCode(value)) {
+        workspace.updateFile(path, value, autoRemoveUnusedImports);
+      } else {
+        Modal.confirm({
+          title: '检测到代码中存在语法错误，暂时无法将代码同步给设计器，是否回退到安全代码？',
+          onOk: () => {
+            editorRef.current?.refresh(files, activeFile);
+          },
+          onCancel: () => {},
+        });
+      }
+    },
+    [workspace, autoRemoveUnusedImports, activeFile, files],
+  );
 
-    const handleFileChange = useCallback(
-      (type: string, info: any) => {
-        switch (type) {
-          case 'addFile':
-            workspace.addFile(info.path, info.value);
-            break;
-          case 'deleteFile':
-          case 'deleteFolder':
-            workspace.removeFile(info.path);
-            break;
-          case 'renameFile':
-            workspace.renameFile(info.path, info.newpath);
-            workspace.setActiveFile(info.newpath);
-            break;
-          case 'renameFolder':
-            workspace.renameFolder(info.path, info.newpath);
-            break;
-          case 'addFolder':
-          default:
-            break;
-        }
-      },
-      [workspace],
-    );
+  const handleFileChange = useCallback(
+    (type: string, info: any) => {
+      switch (type) {
+        case 'addFile':
+          workspace.addFile(info.path, info.value);
+          break;
+        case 'deleteFile':
+        case 'deleteFolder':
+          workspace.removeFile(info.path);
+          break;
+        case 'renameFile':
+          workspace.renameFile(info.path, info.newpath);
+          workspace.setActiveFile(info.newpath);
+          break;
+        case 'renameFolder':
+          workspace.renameFolder(info.path, info.newpath);
+          break;
+        case 'addFolder':
+        default:
+          break;
+      }
+    },
+    [workspace],
+  );
 
-    const handlePathChange = useCallback(
-      (path: string) => {
-        workspace.setActiveFile(path);
-      },
-      [workspace],
-    );
+  const handlePathChange = useCallback(
+    (path: string) => {
+      workspace.setActiveFile(path);
+    },
+    [workspace],
+  );
 
-    const borderStyle =
-      designer.activeView === 'dual'
-        ? {
-            borderLeft: 'solid 1px var(--tango-colors-line2)',
-          }
-        : {};
+  const borderStyle =
+    designer.activeView === 'dual'
+      ? {
+          borderLeft: 'solid 1px var(--tango-colors-line2)',
+        }
+      : {};
 
-    return (
-      <Box display="flex" flexDirection="row" height="100%" bg="white" {...borderStyle}>
-        <MultiEditor
-          ref={editorRef}
-          options={{
-            fontSize: 14,
-            automaticLayout: true,
-          }}
-          ideConfig={ideConfig}
-          onFileSave={fileSave}
-          onPathChange={handlePathChange}
-          onFileChange={handleFileChange}
-          defaultPath={activeFile}
-          defaultTheme="GithubLightDefault"
-          defaultFiles={files}
-          {...rest}
-        />
-      </Box>
-    );
-  },
-);
+  return (
+    <Box display="flex" flexDirection="row" height="100%" bg="white" {...borderStyle}>
+      <MultiEditor
+        ref={editorRef}
+        options={{
+          fontSize: 14,
+          automaticLayout: true,
+        }}
+        ideConfig={ideConfig}
+        onFileSave={fileSave}
+        onPathChange={handlePathChange}
+        onFileChange={handleFileChange}
+        defaultPath={activeFile}
+        defaultTheme="GithubLightDefault"
+        defaultFiles={files}
+        {...rest}
+      />
+    </Box>
+  );
+});
 
 function isJsFile(path: string) {
   return /.jsx?$/.test(path);
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,3 +9,4 @@ coverage/ @@
     .umi-production/
     .log
     .eslintcache
+    *.pem