kirigaya/openmcp-client
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改 about 页面

Browse Source
This commit is contained in:
锦恢 2025-04-22 17:10:09 +08:00
parent 859d506ea9
commit 3b1afa70bd
6 changed files with 87 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
build_service.sh
View File

@ -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"

1
configure.sh
View File

@ -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

52
renderer/src/views/about/index.vue
View File

@ -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,14 +21,25 @@
<p>
如果感兴趣，欢迎加入我们的QQ群和我们讨论
</p>
<el-button
class="join-qq"
type="primary"
@click="joinQQGroup('https://qm.qq.com/cgi-bin/qm/qr?k=C6ZUTZvfqWoI12lWe7L93cWa1hUsuVT0&jump_from=webapi&authKey=McW6B1ogTPjPDrCyGttS890tMZGQ1KB3QLuG4aqVNRaYp4vlTSgf2c6dMcNjMuBD')"
>
<span class="iconfont icon-QQ"></span>
加入 OpenMCP 技术群
</el-button>
<div style="display: inline-flex;">
<el-button
class="join-qq"
type="primary"
@click="joinQQGroup('https://qm.qq.com/cgi-bin/qm/qr?k=C6ZUTZvfqWoI12lWe7L93cWa1hUsuVT0&jump_from=webapi&authKey=McW6B1ogTPjPDrCyGttS890tMZGQ1KB3QLuG4aqVNRaYp4vlTSgf2c6dMcNjMuBD')"
>
<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;

36
src/extension.ts
View File

@ -3,26 +3,8 @@ import * as fs from 'fs';
import * as fspath from 'path';
import * as OpenMCPService from '../resources/service';
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;
}
function getLaunchCWD(context: vscode.ExtensionContext, uri: vscode.Uri) {
// TODO: 启动上下文？
// 获取当前打开的项目的路径
const workspaceFolder = vscode.workspace.getWorkspaceFolder(uri);
return workspaceFolder?.uri.fsPath || '';
}
import { getLaunchCWD, getWebviewContent } from './webview';
import { panels } from './global';
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();
});
})

4
src/global.ts Normal file
View File

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

23
src/webview.ts Normal file
View File

@ -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 || '';
}