merge

package.json

@@ -244,16 +244,20 @@
         "ws": "^8.18.1"
     },
     "devDependencies": {
-        "@types/node": "16.x",
+        "@types/node": "^22.15.29",
         "@types/pako": "^2.0.3",
         "@types/showdown": "^2.0.0",
         "@types/vscode": "^1.72.0",
+        "@vitejs/plugin-vue": "^5.2.4",
         "copy-webpack-plugin": "^13.0.0",
         "fork-ts-checker-webpack-plugin": "^9.1.0",
         "null-loader": "^4.0.1",
         "ts-loader": "^9.5.1",
         "turbo": "^2.5.3",
         "typescript": "^5.4.2",
+        "vite": "^6.3.5",
+        "vite-plugin-vue-devtools": "^7.7.6",
+        "vue-tsc": "^2.2.10",
         "webpack": "^5.99.5",
         "webpack-cli": "^5.1.4"
     },

renderer/src/App.vue

@@ -62,7 +62,7 @@ onMounted(async () => {
 		return;
 	}
 
-	document.addEventListener('click', () => {
+	document?.addEventListener('click', () => {
 		Connection.showPanel = false;
 	});
 

renderer/src/components/main-panel/chat/chat-box/options/prompt.vue

@@ -70,7 +70,7 @@ async function whenGetPromptResponse(msg: PromptsGetResponse) {
             return;
         }
 
-        const container = document.createElement('div');
+        const container = document?.createElement('div');
         const promptChatItem = createApp(PromptChatItem, {
             messages: msg.messages
         });
@@ -88,7 +88,7 @@ async function whenGetPromptResponse(msg: PromptsGetResponse) {
         }
 
         // 设置光标到插入元素的后方
-        const newRange = document.createRange();
+        const newRange = document?.createRange();
         newRange.setStartAfter(firstElement);
         newRange.collapse(true);
         const selection = window.getSelection();

renderer/src/components/main-panel/chat/chat-box/options/resource.vue

@@ -82,7 +82,7 @@ async function whenGetResourceResponse(msg: ResourcesReadResponse) {
             return;
         }
 
-        const container = document.createElement('div');
+        const container = document?.createElement('div');
         const resourceChatItem = createApp(ResourceChatItem, {
             contents: msg.contents
         });
@@ -101,7 +101,7 @@ async function whenGetResourceResponse(msg: ResourcesReadResponse) {
             editor.appendChild(firstElement);
         }
 
-        const newRange = document.createRange();
+        const newRange = document?.createRange();
         newRange.setStartAfter(firstElement);
         newRange.collapse(true);
         const selection = window.getSelection();

renderer/src/components/main-panel/chat/chat-box/rich-textarea.vue

@@ -187,7 +187,7 @@ function handlePaste(event: ClipboardEvent) {
             if (selection && selection.rangeCount > 0) {
                 const range = selection.getRangeAt(0);
                 range.deleteContents();
-                const textNode = document.createTextNode(pastedText);
+                const textNode = document?.createTextNode(pastedText);
                 range.insertNode(textNode);
                 range.setStartAfter(textNode);
                 range.collapse(true);

renderer/src/components/main-panel/chat/message/toolcall-result-item.vue

@@ -110,7 +110,7 @@ const showFullImage = () => {
     const img = new Image();
     img.src = thumbnail.value;
     img.onload = () => {
-        const overlay = document.createElement('div');
+        const overlay = document?.createElement('div');
         overlay.style.position = 'fixed';
         overlay.style.top = '0';
         overlay.style.left = '0';
@@ -121,9 +121,9 @@ const showFullImage = () => {
         overlay.style.display = 'flex';
         overlay.style.justifyContent = 'center';
         overlay.style.alignItems = 'center';
-        overlay.onclick = () => document.body.removeChild(overlay);
+        overlay.onclick = () => document?.body.removeChild(overlay);
 
-        const imgContainer = document.createElement('div');
+        const imgContainer = document?.createElement('div');
         imgContainer.style.maxWidth = '90vw';
         imgContainer.style.maxHeight = '90vh';
         imgContainer.style.overflow = 'auto';
@@ -137,7 +137,7 @@ const showFullImage = () => {
 
         imgContainer.appendChild(fullImg);
         overlay.appendChild(imgContainer);
-        document.body.appendChild(overlay);
+        document?.body.appendChild(overlay);
     };
 };
 

renderer/src/hook/color.ts

@@ -151,12 +151,12 @@ export class MacroColor {
     private theme: 'light' | 'dark' = 'dark';
     public foregroundColor: RgbColor | undefined;
     public backgroundColor: RgbColor | undefined;
-    public foregroundColorString: string;
+    public foregroundColorString: string = '';
-    public backgroundColorString: string;
+    public backgroundColorString: string = '';
 
     constructor(option: ComputedColorOption = {}) {
         this.option = option;
-        this.rootStyles = getComputedStyle(document.documentElement);
+        this.rootStyles = getComputedStyle(document?.documentElement);
 
         const foregroundColorString = this.rootStyles.getPropertyValue(option.BaseForegroundColorMacroName || '--foreground');
         const backgroundColorString = this.rootStyles.getPropertyValue(option.BaseBackgroundColorMacroName || '--background');
@@ -178,8 +178,7 @@ export class MacroColor {
         if (sidebarColorString === backgroundColorString) {
             // trae 默认主题的特点：sidebarColorString 和 backgroundColorString 一样
             // 把 默认主题的特点：sidebarColorString 的颜色加深一些
-            const newSidebarColor = this.theme === 'dark' ? '#252a38' : '#edeff2';
+            document?.documentElement.style.setProperty('--sidebar', 'var(--vscode-icube-colorBg2)');
-            document.documentElement.style.setProperty('--sidebar', 'var(--vscode-icube-colorBg2)');
         }
     }
 

renderer/src/hook/css.ts

@@ -2,40 +2,40 @@ import { isLightColorTheme, parseColor } from "./color";
 
 export function setDefaultCss() {
     // 改变默认颜色
-    document.body.style.setProperty('--el-color-primary', 'var(--main-color)');
+    document?.body.style.setProperty('--el-color-primary', 'var(--main-color)');
-    document.body.style.setProperty('--el-color-primary-light-9', 'var(--main-color)');
+    document?.body.style.setProperty('--el-color-primary-light-9', 'var(--main-color)');
-    document.body.style.setProperty('--el-color-primary-light-3', 'var(--main-color)');
+    document?.body.style.setProperty('--el-color-primary-light-3', 'var(--main-color)');
-    document.body.style.setProperty('--el-text-color-secondary', 'var(--foreground)');
+    document?.body.style.setProperty('--el-text-color-secondary', 'var(--foreground)');
-    document.body.style.setProperty('--el-text-color-regular', 'var(--foreground)');
+    document?.body.style.setProperty('--el-text-color-regular', 'var(--foreground)');
-    document.body.style.setProperty('--el-border-color', 'var(--vscode-input-border)');
+    document?.body.style.setProperty('--el-border-color', 'var(--vscode-input-border)');
-    document.body.style.setProperty('--el-fill-color-blank', 'var(--sidebar)');
+    document?.body.style.setProperty('--el-fill-color-blank', 'var(--sidebar)');
-    document.body.style.setProperty('--el-fill-color-light', 'var(--vscode-button-hoverBackground)');
+    document?.body.style.setProperty('--el-fill-color-light', 'var(--vscode-button-hoverBackground)');
-    document.body.style.setProperty('--el-switch-on-color', 'var(--main-color)');
+    document?.body.style.setProperty('--el-switch-on-color', 'var(--main-color)');
-    document.body.style.setProperty('--el-border', 'var(--sidebar)');
+    document?.body.style.setProperty('--el-border', 'var(--sidebar)');
-    document.body.style.setProperty('--el-border-color-light', 'var(--sidebar)');
+    document?.body.style.setProperty('--el-border-color-light', 'var(--sidebar)');
-    document.body.style.setProperty('--el-border-color-lighter', 'var(--sidebar)');
+    document?.body.style.setProperty('--el-border-color-lighter', 'var(--sidebar)');
-    document.body.style.setProperty('--el-bg-color-overlay', 'var(--sidebar)');
+    document?.body.style.setProperty('--el-bg-color-overlay', 'var(--sidebar)');
-    document.body.style.setProperty('--el-color-info', 'var(--foreground)');
+    document?.body.style.setProperty('--el-color-info', 'var(--foreground)');
-    document.body.style.setProperty('--el-color-info-light-8', 'var(--main-color)');
+    document?.body.style.setProperty('--el-color-info-light-8', 'var(--main-color)');
-    document.body.style.setProperty('--el-fill-color-light', 'var(--sidebar-item-selected)');
+    document?.body.style.setProperty('--el-fill-color-light', 'var(--sidebar-item-selected)');
-    document.body.style.setProperty('--el-color-primary-dark-2', 'var(--main-light-color)');
+    document?.body.style.setProperty('--el-color-primary-dark-2', 'var(--main-light-color)');
-    document.body.style.setProperty('--el-fill-color-dark', 'var(--main-light-color)');
+    document?.body.style.setProperty('--el-fill-color-dark', 'var(--main-light-color)');
-    document.body.style.setProperty('--el-fill-color-darker', 'var(--main-light-color)');
+    document?.body.style.setProperty('--el-fill-color-darker', 'var(--main-light-color)');
-    document.body.style.setProperty('--el-color-primary-light-5', 'var(--button-disabled)');
+    document?.body.style.setProperty('--el-color-primary-light-5', 'var(--button-disabled)');
-    document.body.style.setProperty('--el-bg-color', 'var(--background)');
+    document?.body.style.setProperty('--el-bg-color', 'var(--background)');
-    document.body.style.setProperty('--el-text-color-primary', 'var(--foreground)');
+    document?.body.style.setProperty('--el-text-color-primary', 'var(--foreground)');
-    document.body.style.setProperty('--el-button-hover-text-color', 'var(--background)');
+    document?.body.style.setProperty('--el-button-hover-text-color', 'var(--background)');
 
-    // document.body.style.setProperty('--el-color-white', 'var(--background)');
+    // document?.body.style.setProperty('--el-color-white', 'var(--background)');
     
     // 设置全局宏
-    document.body.style.setProperty('--time-scale-height', '30px');
+    document?.body.style.setProperty('--time-scale-height', '30px');
-    document.body.style.setProperty('--vcd-render-padding', '30px');
+    document?.body.style.setProperty('--vcd-render-padding', '30px');
-    document.body.style.setProperty('--sidebar-width', '330px');
+    document?.body.style.setProperty('--sidebar-width', '330px');
-    document.body.style.setProperty('--toolbar-height', '60px');
+    document?.body.style.setProperty('--toolbar-height', '60px');
 
     // 下面是 get style
-    const style = getComputedStyle(document.documentElement);
+    const style = getComputedStyle(document?.documentElement);
     // 根据颜色亮度来设置额外的宏
     const bgColorString = style.getPropertyValue('--background');
     
@@ -56,7 +56,7 @@ export function setDefaultCss() {
     if (mode === 'debug') {
         // 判断颜色深浅，模拟 .vscode-dark 的加入
         const theme = getThemeColor();
-        const app = document.getElementById('app');
+        const app = document?.getElementById('app');
         
         app?.classList.add('vscode-' + theme);
     }
@@ -68,7 +68,7 @@ export function getThemeColor(): 'light' | 'dark' {
     if (themeColor) {
         return themeColor;
     }
-    const rootStyles = getComputedStyle(document.documentElement);
+    const rootStyles = getComputedStyle(document?.documentElement);
     const backgroundColorString = rootStyles.getPropertyValue('--background');
     const backgroundColor = parseColor(backgroundColorString);
     if (backgroundColor) {
@@ -81,9 +81,9 @@ export function getThemeColor(): 'light' | 'dark' {
 }
 
 function setExtraLightColorCss() {
-    document.body.style.setProperty('--vline-stroke-color', '#ddd');
+    document?.body.style.setProperty('--vline-stroke-color', '#ddd');
 }
 
 function setExtraDarkColorCss() {
-    document.body.style.setProperty('--vline-stroke-color', '#333');
+    document?.body.style.setProperty('--vline-stroke-color', '#333');
 }

renderer/src/hook/global.ts

@@ -19,12 +19,7 @@ export function getThemeColor(): 'light' | 'dark' {
         return themeColor;
     }
 
-    const myDocument = document as any;
+    const rootStyles = getComputedStyle(document?.documentElement);
-    if (!myDocument) {
-        return 'dark';
-    }
-
-    const rootStyles = getComputedStyle(document.documentElement);
     const backgroundColorString = rootStyles.getPropertyValue('--background');
     const backgroundColor = Color.parseColor(backgroundColorString);
     if (backgroundColor) {

renderer/src/router/index.ts

@@ -41,9 +41,7 @@ const router = createRouter({
 
 
 router.beforeEach((to, from, next) => {
-	const myDocument = document as any;
+	if (to.meta.title && document) {
-
-	if (to.meta.title && myDocument) {
 		document.title = `OpenMCP | ${to.meta.title}`;
 	}
 	next();

renderer/src/views/setting/color.ts

@@ -11,7 +11,7 @@ export const colorManager = reactive({
     mainColor: 'white',
 
     initColor() {
-        const rootStyles = getComputedStyle(document.documentElement);            
+        const rootStyles = getComputedStyle(document?.documentElement);            
         this.mainColor = rootStyles.getPropertyValue('--main-color');
     }
 });
@@ -26,16 +26,11 @@ export function onGeneralColorChange(colorString: string) {
         return;
     }
     const { r, g, b } = color;
-
-    const myDocument = document as any;
-    if (!myDocument) {
-        return;
-    }
     
-    document.documentElement.style.setProperty(
+    document?.documentElement.style.setProperty(
         '--main-color', `rgb(${r}, ${g}, ${b})`);
 
-    document.documentElement.style.setProperty(
+    document?.documentElement.style.setProperty(
         '--main-light-color', `rgba(${r}, ${g}, ${b}, 0.7)`);
 }
 

resources/openmcp-sdk-release/package.json

@@ -33,6 +33,7 @@
         "pako": "^2.1.0",
         "tesseract.js": "^6.0.1",
         "uuid": "^11.1.0",
-        "ws": "^8.18.1"
+        "ws": "^8.18.1",
+        "https-proxy-agent": "^7.0.6"
     }
 }

webpack/vite.config.task-loop.js

@@ -0,0 +1,54 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    define: {
+		'window': {
+			'nodejs': true,
+			'navigator': {
+				'userAgent': 2
+			},
+		},
+		'document': {
+			body: {}
+		}
+    },
+    plugins: [
+        vue(),
+        viteStaticCopy({
+            targets: [
+                {
+                    src: resolve(__dirname, '../resources/openmcp-sdk-release/*'),
+                    dest: resolve(__dirname, '../openmcp-sdk')
+                }
+            ]
+        })
+    ],
+    build: {
+		target: 'node18',
+        lib: {
+            entry: resolve(__dirname, '..', 'renderer/src/components/main-panel/chat/core/task-loop.ts'),
+            name: 'TaskLoop',
+            fileName: 'task-loop',
+            formats: ['cjs']
+        },
+        outDir: resolve(__dirname, '..', 'openmcp-sdk'),
+        emptyOutDir: false,
+        rollupOptions: {
+            external: {
+                vue: 'vue',
+                'element-plus': './tools.js'
+            }
+        },
+        minify: true,
+        sourcemap: false,  // 禁用sourcemap生成
+        cssCodeSplit: false  // 禁用CSS文件生成
+    },
+    resolve: {
+        alias: {
+            '@': resolve(__dirname, '..', 'renderer/src')
+        }
+    }
+});