zcf0508 · zcf0508 · Sep 7, 2023 · Sep 7, 2023
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "dev": "nodemon",
     "dev:ext": "npm -C packages/vscode run dev",
     "build": "tsup",
+    "build:ext": "npm -C packages/vscode run build",
     "play": "npm -C packages/playground run dev",
     "lint": "eslint .",
     "test": "vitest",

diff --git a/packages/vscode/package.json b/packages/vscode/package.json
@@ -47,6 +47,17 @@
         }
       }
     ],
+    "configuration": {
+      "title": "Vue Hook Optimizer",
+      "properties": {
+        "vho.theme": {
+          "type": "string",
+          "default": "auto",
+          "enum": ["auto", "light", "dark"],
+          "description": "Choose settings that are suitable for the current theme"
+        }
+      }
+    },
     "menus": {
       "commandPalette": [
         {
@@ -80,7 +91,7 @@
   },
   "scripts": {
     "build": "tsc ./script/index.ts && tsup",
-    "dev": "tsc ./script/index.ts --watch & tsup --watch",
+    "dev": "tsc ./script/index.ts --watch & tsup --watch --env.NODE_ENV development",
     "lint": "eslint .",
     "vscode:prepublish": "pnpm build",
     "publish": "vsce publish --no-dependencies",

diff --git a/packages/vscode/script/index.ts b/packages/vscode/script/index.ts
@@ -1,41 +1,19 @@
 let network: any;
 
-function init(dataString: string) {
+function init(dataString: string, theme: string) {
   // 获取容器
-  var container = document.getElementById('mynetwork');
+  const container = document.getElementById('mynetwork');
 
   // 将数据赋值给vis 数据格式化器
-  var data = JSON.parse(dataString);
-  var options = {
+  const data = JSON.parse(dataString);
+  const options = Object.assign({
     physics: {
       solver: 'forceAtlas2Based',
       forceAtlas2Based: {
         gravitationalConstant: -100,
       },
     },
-    groups: {
-      used: {
-        color: {
-          border: '#3d7de4',
-          background: '#9dc2f9',
-          highlight: {
-            border: '#3d7de4',
-            background: '#9dc2f9',
-          },
-        },
-      },
-      normal: {
-        color: {
-          border: '#ccc',
-          background: '#ddd',
-          highlight: {
-            border: '#ccc',
-            background: '#ddd',
-          },
-        },
-      },
-    },
-  };
+  }, JSON.parse(theme));
 
   // 初始化关系图
   // @ts-ignore

diff --git a/packages/vscode/src/index.ts b/packages/vscode/src/index.ts
@@ -2,6 +2,7 @@ import * as vscode from 'vscode';
 import { window } from 'vscode';
 import { analyze } from './analyze';
 import { template } from 'lodash-es';
+import { light, dark } from './themes';
 import path from 'path';
 
 const visTemplate = template(`<html>
@@ -47,7 +48,9 @@ const visTemplate = template(`<html>
         w-[200px]
         px-4 py-2
         border-[#ddd] border-[1px] border-solid rounded-md
+        bg-transparent
         shadow
+        backdrop-blur
       "
     >
     </div>
@@ -65,7 +68,7 @@ const visTemplate = template(`<html>
     <div
       class="
         inline-block mr-1
-        bg-[#9dc2f9] 
+        bg-[<%= legend_used %>] 
         border border-solid border-[#3d7de4]
         w-[10px] h-[10px]
       "
@@ -76,7 +79,7 @@ const visTemplate = template(`<html>
     <div
       class="
         inline-block mr-1
-        bg-[#eee] 
+        bg-[<%= legend_normal %>] 
         border border-solid border-[#ddd]
         w-[10px] h-[10px]
       "
@@ -87,7 +90,7 @@ const visTemplate = template(`<html>
     <div
       class="
         inline-block mr-1
-        border border-solid border-[#333]
+        border border-solid border-[<%= legend_variant %>]
         rounded-full 
         w-[10px] h-[10px]
       "
@@ -98,7 +101,7 @@ const visTemplate = template(`<html>
     <div
       class="
         inline-block mr-1
-        border border-solid border-[#333]
+        border border-solid border-[<%= legend_func %>]
         rotate-45 transform scale-80
         w-[10px] h-[10px]
       "
@@ -109,7 +112,7 @@ const visTemplate = template(`<html>
 </div>
 
 <script type="text/javascript">
-init('<%= data %>')
+init('<%= data %>', '<%= config %>')
 const inputEle = findSearchInput();
 if(inputEle) {
   inputEle.addEventListener('input', (e) => {
@@ -124,10 +127,10 @@ if(inputEle) {
 </body>
 </html>`);
 
-function getWebviewUri(webview: vscode.Webview, extensionPath: string, filename: string) {
+function getWebviewUri(webview: vscode.Webview, extensionPath: string, filename: string, dir: string = 'script') {
   const jsFilePath = vscode.Uri.file(path.resolve(
     extensionPath, 
-    `./script/${filename}`
+    `./${dir}/${filename}`
   ));
   return webview.asWebviewUri(jsFilePath);
 }
@@ -139,6 +142,8 @@ let alerted = false;
 
 export function activate(context: vscode.ExtensionContext) {
   context.subscriptions.push(vscode.commands.registerCommand('vho.action.analyze', async () => {
+    // 根据主题获取vis config
+    const config = getVisConfigByTheme();
     // 获取当前vue文件的内容
     const editor = window.activeTextEditor;
     if (!editor) {
@@ -173,6 +178,11 @@ export function activate(context: vscode.ExtensionContext) {
       libTailwind: getWebviewUri(panel.webview, context.extensionPath, 'tailwindcss.min.js'),
       libIndex: getWebviewUri(panel.webview, context.extensionPath, 'index.js'),
       data: JSON.stringify(res.data.vis),
+      config: JSON.stringify(config?.vis),
+      legend_used: config?.legend.used,
+      legend_normal: config?.legend.normal,
+      legend_variant: config?.legend.variant,
+      legend_func: config?.legend.func,
     });
 
     outputChannel.append(`${fileName}: \n`);
@@ -201,6 +211,27 @@ export function activate(context: vscode.ExtensionContext) {
   }));
 }
 
+function getVisConfigByTheme () {
+  const config = vscode.workspace.getConfiguration('vho');
+  const theme = config.get('theme');
+
+  if (theme === 'auto') {
+    const themeKind = vscode.window.activeColorTheme.kind;
+    if (themeKind === 2 || themeKind === 3) {
+      return dark;
+    } else if (themeKind === 1 || themeKind === 4) {
+      return light;
+    } else {
+      outputChannel.append('The current theme is not supported at the moment, so it will be set as light theme.');
+      return light;
+    }
+  } else if (theme === 'light') {
+    return light;
+  } else if (theme === 'dark') {
+    return dark;
+  }
+}
+
 export function deactivate() {
 
 }
diff --git a/packages/vscode/src/themes/dark.ts b/packages/vscode/src/themes/dark.ts
@@ -0,0 +1,53 @@
+const used_bg = '#9dc2f9';
+const used_border = '#3d7de4';
+const used_highlight_bg = '#9dc2f9';
+const used_highlight_border = '#3d7de4';
+const used_font_color = '#fff';
+
+const normal_bg = '#ddd';
+const normal_border = '#ccc';
+const normal_highlight_bg = '#ddd';
+const normal_highlight_border = '#ccc';
+const normal_font_color = '#c8c9cc';
+
+
+const options = {
+  vis: {
+    groups: {
+      used: {
+        color: {
+          border: used_border,
+          background: used_bg,
+          highlight: {
+            border: used_highlight_border,
+            background: used_highlight_bg,
+          },
+        },
+        font: {
+          color: used_font_color,
+        },
+      },
+      normal: {
+        color: {
+          border: normal_border,
+          background: normal_bg,
+          highlight: {
+            border: normal_highlight_border,
+            background: normal_highlight_bg,
+          },
+        },
+        font: {
+          color: normal_font_color,
+        },
+      },
+    },
+  },
+  legend: {
+    used: used_bg,
+    normal: normal_bg,
+    variant: '#fff',
+    func: '#fff',
+  },
+};
+
+export default options;
diff --git a/packages/vscode/src/themes/index.ts b/packages/vscode/src/themes/index.ts
@@ -0,0 +1,2 @@
+export { default as light } from './light';
+export { default as dark } from './dark';
diff --git a/packages/vscode/src/themes/light.ts b/packages/vscode/src/themes/light.ts
@@ -0,0 +1,52 @@
+const used_bg = '#9dc2f9';
+const used_border = '#3d7de4';
+const used_highlight_bg = '#9dc2f9';
+const used_highlight_border = '#3d7de4';
+const used_font_color = '#000';
+
+const normal_bg = '#ddd';
+const normal_border = '#ccc';
+const normal_highlight_bg = '#ddd';
+const normal_highlight_border = '#ccc';
+const normal_font_color = '#000';
+
+const options = {
+  vis: {
+    groups: {
+      used: {
+        color: {
+          border: used_border,
+          background: used_bg,
+          highlight: {
+            border: used_highlight_border,
+            background: used_highlight_bg,
+          },
+        },
+        font: {
+          color: used_font_color,
+        },
+      },
+      normal: {
+        color: {
+          border: normal_border,
+          background: normal_bg,
+          highlight: {
+            border: normal_highlight_border,
+            background: normal_highlight_bg,
+          },
+        },
+        font: {
+          color: normal_font_color,
+        },
+      },
+    },
+  },
+  legend: {
+    used: used_bg,
+    normal: normal_bg,
+    variant: '#000',
+    func: '#000',
+  },
+};
+
+export default options;
diff --git a/packages/vscode/tsup.config.ts b/packages/vscode/tsup.config.ts
@@ -1,13 +1,16 @@
 import { defineConfig } from 'tsup';
 
-export default defineConfig({
-  entry: [
-    'src/index.ts',
-  ],
-  format: ['cjs'],
-  shims: false,
-  dts: false,
-  external: [
-    'vscode',
-  ],
+export default defineConfig((options) => {
+  return {
+    entry: [
+      'src/index.ts',
+    ],
+    sourcemap: options.env?.NODE_ENV === 'development',
+    format: ['cjs'],
+    shims: false,
+    dts: false,
+    external: [
+      'vscode',
+    ],
+  };
 });