diff --git a/package.json b/package.json index 5922e9e..e4e94ca 100644 --- 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 index 11cf89a..4aa65e1 100644 --- 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 index 7567964..0e3db00 100644 --- 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 index 92b754b..0136072 100644 --- 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(` @@ -47,7 +48,9 @@ const visTemplate = template(` w-[200px] px-4 py-2 border-[#ddd] border-[1px] border-solid rounded-md + bg-transparent shadow + backdrop-blur " > @@ -65,7 +68,7 @@ const visTemplate = template(`