修改 about 页面

build_service.sh

@@ -6,5 +6,6 @@ mkdir -p ./resources
 
 (cd ./renderer && npm run build && mv ./dist ../resources/renderer) &
 (cd ./service && npm run build && mv ./dist ../resources/service) &
+
 wait
 echo "finish building services in ./resources"

configure.sh

@@ -1,3 +1,4 @@
 cd renderer && npm i && cd ..
 cd service && npm i && node patch-mcp-sdk.js && cd ..
+cd servers && uv sync
 npm i

renderer/src/views/about/index.vue

@@ -1,7 +1,9 @@
 <template>
 	<div class="about-container">
 
-        <span class="openmcp-logo" style="height: 230px; width: 230px;">
+        <span class="about-icon-container">
+			<span class="iconfont icon-openmcp"></span>
+			<span>openmcp</span>
         </span>
 
 		<p>
@@ -19,6 +21,8 @@
 		<p>
 			如果感兴趣，欢迎加入我们的QQ群和我们讨论
 		</p>
+
+		<div style="display: inline-flex;">
 			<el-button
 				class="join-qq"
 				type="primary"
@@ -27,6 +31,15 @@
 				<span class="iconfont icon-QQ"></span>
 				加入 OpenMCP 技术群
 			</el-button>
+			<el-button type="primary"
+				class="join-qq"
+				@click="gotoWebsite('https://zhuanlan.zhihu.com/p/1894785817186121106')"
+			>
+				<span class="iconfont icon-send"></span>
+				OpenMCP 发布页
+			</el-button>
+		</div>
+
 	</div>
 </template>
 
@@ -39,6 +52,10 @@ function joinQQGroup(url: string) {
 	window.open(url, '_blank');
 }
 
+function gotoWebsite(url: string) {
+	window.open(url, '_blank');
+}
+
 </script>
 
 <style>
@@ -51,6 +68,23 @@ function joinQQGroup(url: string) {
     justify-content: center;
 }
 
+.about-icon-container {
+	box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.3);
+	border-radius: .8em;
+	padding: 20px 50px;
+	color: var(--main-color);
+	background-color: var(--background);
+	display: flex;
+	font-size: 30px;
+	flex-direction: column;
+	margin-bottom: 20px;
+}
+
+
+.about-icon-container .iconfont {
+	font-size: 180px;
+}
+
 .about-container > span > img {
 	height: 150px;
 	width: 150px;

src/extension.ts

@@ -3,26 +3,8 @@ import * as fs from 'fs';
 import * as fspath from 'path';
 
 import * as OpenMCPService from '../resources/service';
-
+import { getLaunchCWD, getWebviewContent } from './webview';
-function getWebviewContent(context: vscode.ExtensionContext, panel: vscode.WebviewPanel): string | undefined {
+import { panels } from './global';
-    const viewRoot = fspath.join(context.extensionPath, 'resources', 'renderer');
-    const htmlIndexPath = fspath.join(viewRoot, 'index.html');
-    const html = fs.readFileSync(htmlIndexPath, { encoding: 'utf-8' })?.replace(/(<link.+?href="|<script.+?src="|<img.+?src=")(.+?)"/g, (m, $1, $2) => {
-        const absLocalPath = fspath.resolve(viewRoot, $2);        
-        const webviewUri = panel.webview.asWebviewUri(vscode.Uri.file(absLocalPath));
-
-        const replaceHref = $1 + webviewUri?.toString() + '"';
-        return replaceHref;
-    });
-    return html;
-}
-
-function getLaunchCWD(context: vscode.ExtensionContext, uri: vscode.Uri) {
-    // TODO: 启动上下文？
-    // 获取当前打开的项目的路径
-    const workspaceFolder = vscode.workspace.getWorkspaceFolder(uri);
-    return workspaceFolder?.uri.fsPath || '';
-}
 
 export function activate(context: vscode.ExtensionContext) {
     console.log('activate openmcp');
@@ -37,6 +19,12 @@ export function activate(context: vscode.ExtensionContext) {
     context.subscriptions.push(
         vscode.commands.registerCommand('openmcp.showOpenMCP', async (uri: vscode.Uri) => {
 
+            if (panels.has(uri.fsPath)) {
+                const panel = panels.get(uri.fsPath);
+                panel?.reveal();
+                return;
+            }
+
             const panel = vscode.window.createWebviewPanel(
                 'OpenMCP',
                 'OpenMCP',
@@ -48,6 +36,8 @@ export function activate(context: vscode.ExtensionContext) {
                 }
             );
 
+            panels.set(uri.fsPath, panel);
+
             const cwd = getLaunchCWD(context, uri);
             // 获取 uri 相对于 cwd 的路径
             const relativePath = fspath.relative(cwd, uri.fsPath);
@@ -93,7 +83,11 @@ export function activate(context: vscode.ExtensionContext) {
 
             });
 
-            panel.onDidDispose(() => {
+            panel.onDidDispose(async () => {
+                // 删除
+                panels.delete(uri.fsPath);
+
+                // 退出
                 panel.dispose();
             });
         })

src/global.ts

@@ -0,0 +1,4 @@
+import * as vscode from 'vscode';
+
+export type FsPath = string;
+export const panels = new Map<FsPath, vscode.WebviewPanel>();

src/webview.ts

@@ -0,0 +1,23 @@
+import * as vscode from 'vscode';
+import * as fs from 'fs';
+import * as fspath from 'path';
+
+export function getWebviewContent(context: vscode.ExtensionContext, panel: vscode.WebviewPanel): string | undefined {
+    const viewRoot = fspath.join(context.extensionPath, 'resources', 'renderer');
+    const htmlIndexPath = fspath.join(viewRoot, 'index.html');
+    const html = fs.readFileSync(htmlIndexPath, { encoding: 'utf-8' })?.replace(/(<link.+?href="|<script.+?src="|<img.+?src=")(.+?)"/g, (m, $1, $2) => {
+        const absLocalPath = fspath.resolve(viewRoot, $2);        
+        const webviewUri = panel.webview.asWebviewUri(vscode.Uri.file(absLocalPath));
+
+        const replaceHref = $1 + webviewUri?.toString() + '"';
+        return replaceHref;
+    });
+    return html;
+}
+
+export function getLaunchCWD(context: vscode.ExtensionContext, uri: vscode.Uri) {
+    // TODO: 启动上下文？
+    // 获取当前打开的项目的路径
+    const workspaceFolder = vscode.workspace.getWorkspaceFolder(uri);
+    return workspaceFolder?.uri.fsPath || '';
+}