From c8a9951be6531ba14cecd9add964ef0a2ff1d02c Mon Sep 17 00:00:00 2001 From: Kirigaya <1193466151@qq.com> Date: Sun, 13 Apr 2025 02:09:26 +0800 Subject: [PATCH] opt layout --- package.json | 5 +- renderer/public/iconfont.css | 10 ++- renderer/public/iconfont.woff2 | Bin 4384 -> 4496 bytes renderer/src/App.vue | 28 +++--- renderer/src/components/sidebar/connected.vue | 82 +++++++++++++++--- renderer/src/components/sidebar/index.vue | 5 +- renderer/src/components/sidebar/mcp-title.vue | 4 +- .../sidebar/sidebar-item-container.vue | 27 +++--- renderer/src/components/sidebar/sidebar.ts | 2 +- renderer/src/views/connect/connection.ts | 25 +++++- service/src/controller/connect.ts | 7 +- service/src/controller/handler.ts | 29 +++++++ service/src/controller/index.ts | 6 +- 13 files changed, 177 insertions(+), 53 deletions(-) diff --git a/package.json b/package.json index 8d76cb8..2290f2b 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,9 @@ { "name": "openmcp", - "displayName": "openmcp", + "displayName": "OpenMCP", "description": "An all in one MCP Client/TestTool", "version": "0.0.1", + "publisher": "kirigaya", "author": { "name": "kirigaya", "email": "1193466151@qq.com" @@ -19,7 +20,7 @@ ], "activationEvents": [], "main": "./dist/extension.js", - "icon": "./icons/openmcp.png", + "icon": "icons/openmcp.png", "contributes": { "commands": [ { diff --git a/renderer/public/iconfont.css b/renderer/public/iconfont.css index dee1de8..2c10aa2 100644 --- a/renderer/public/iconfont.css +++ b/renderer/public/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "iconfont"; /* Project id 4870215 */ - src: url('iconfont.woff2?t=1744289078529') format('woff2'), - url('iconfont.woff?t=1744289078529') format('woff'), - url('iconfont.ttf?t=1744289078529') format('truetype'); + src: url('iconfont.woff2?t=1744476757936') format('woff2'), + url('iconfont.woff?t=1744476757936') format('woff'), + url('iconfont.ttf?t=1744476757936') format('truetype'); } .iconfont { @@ -13,6 +13,10 @@ -moz-osx-font-smoothing: grayscale; } +.icon-connect:before { + content: "\ecda"; +} + .icon-openmcp:before { content: "\e666"; } diff --git a/renderer/public/iconfont.woff2 b/renderer/public/iconfont.woff2 index 9ed60a0274fbcd074b8923bcccd5b96aa2c0c064..73dd05ecfe462cbbcfe797a4a5ab0ccfacb467f8 100644 GIT binary patch literal 4496 zcmV;B5pV8yPew8T0RR9101=P?3jhEB03T=o01-d{0RR9100000000000000000000 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 literal 4384 zcmV+*5#R22Pew8T0RR9101+Sn3jhEB03PH301(mu0RR9100000000000000000000 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 { pinkLog(`version: ${data.version}`); }, { once: true }); +// 监听 connect +bridge.addCommandListener('connect', async data => { + const { code, msg } = data; + connectionResult.success = (code === 200); + connectionResult.logString = msg; + + const res = await getServerVersion() as { name: string, version: string }; + connectionResult.serverInfo.name = res.name || ''; + connectionResult.serverInfo.version = res.version || ''; + +}, { once: true }); + + + function initDebug() { connectionArgs.commandString = 'mcp run ../servers/main.py'; connectionMethods.current = 'STDIO'; - bridge.addCommandListener('connect', data => { - const { code, msg } = data; - connectionResult.success = (code === 200); - connectionResult.logString = msg; - }, { once: true }); - setTimeout(() => { // 初始化 设置 loadSetting(); @@ -56,12 +64,6 @@ function initProduce() { connectionArgs.commandString = 'mcp run ../servers/main.py'; connectionMethods.current = 'STDIO'; - bridge.addCommandListener('connect', data => { - const { code, msg } = data; - connectionResult.success = (code === 200); - connectionResult.logString = msg; - }, { once: true }); - // 初始化 设置 loadSetting(); diff --git a/renderer/src/components/sidebar/connected.vue b/renderer/src/components/sidebar/connected.vue index 9f0f38d..a95b71b 100644 --- a/renderer/src/components/sidebar/connected.vue +++ b/renderer/src/components/sidebar/connected.vue @@ -2,12 +2,24 @@
- + + {{ displayServerName }} + + + + + + {{ statusString }} - {{ statusString }}
@@ -38,7 +50,17 @@ const statusColorStyle = computed(() => { } }); +const fullDisplayServerName = computed(() => { + return connectionResult.serverInfo.name + '/' + connectionResult.serverInfo.version; +}); +const displayServerName = computed(() => { + if (connectionResult.serverInfo.name.length > 20) { + return connectionResult.serverInfo.name.substring(0, 20); + } else { + return connectionResult.serverInfo.name; + } +}); function toggleConnectionPanel() { Connection.showPanel = true; @@ -59,27 +81,65 @@ function toggleConnectionPanel() { .status-circle { height: 12px; width: 12px; - margin-right: 10px; + margin-right: 8px; border-radius: 99%; + box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); } .extra-connect-container { - cursor: pointer; user-select: none; } .connected-status-container { user-select: none; - cursor: pointer; display: flex; align-items: center; - width: 100%; - justify-content: center; + width: auto; + padding: 8px 0; + flex-direction: column; + border-radius: 6px; + transition: background-color 0.3s ease; } -.connected-status-container:hover .status-string { - color: var(--main-color); +.connected-status-container .connect-status { + display: flex; + align-items: center; + margin-top: 20px; +} + +.connected-status-container:hover { + background-color: var(--sidebar-hover); +} + + +.status-string { + color: var(--foreground); transition: var(--animation-3s); + font-size: 13px; + font-weight: 500; + white-space: nowrap; + margin-top: 4px; +} + +.mcp-server-info { + display: flex; + flex-direction: column; +} + +.mcp-server-info .name { + font-size: 14px; + font-weight: 600; + max-width: 60px; + white-space: wrap; + background-color: #f39a6d; + padding: 5px; + border-radius: .5em; + color: #1e1e1e; +} + +.mcp-server-info .version { + font-size: 12px; + font-weight: 400; } \ No newline at end of file diff --git a/renderer/src/components/sidebar/index.vue b/renderer/src/components/sidebar/index.vue index e9984fb..8f56738 100644 --- a/renderer/src/components/sidebar/index.vue +++ b/renderer/src/components/sidebar/index.vue @@ -2,8 +2,6 @@
-
-
@@ -15,7 +13,6 @@