From 6de3b722ed3e9c812760c3ba2c78a7271ea91a08 Mon Sep 17 00:00:00 2001 From: Gsh <15170702455@163.com> Date: Mon, 18 Aug 2025 23:07:34 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=B0=E5=A2=9E=E6=96=87=E4=BB=B6?= =?UTF-8?q?=E5=8A=A9=E6=89=8B=E7=9B=AE=E5=BD=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Yi.Ai.FileAssistant/ui/.gitignore | 25 +++++ Yi.Ai.FileAssistant/ui/index.html | 21 ++++ Yi.Ai.FileAssistant/ui/index.md | 143 ---------------------------- Yi.Ai.FileAssistant/ui/main.js | 26 +++++ Yi.Ai.FileAssistant/ui/package.json | 15 +++ 5 files changed, 87 insertions(+), 143 deletions(-) create mode 100644 Yi.Ai.FileAssistant/ui/.gitignore create mode 100644 Yi.Ai.FileAssistant/ui/index.html delete mode 100644 Yi.Ai.FileAssistant/ui/index.md create mode 100644 Yi.Ai.FileAssistant/ui/main.js create mode 100644 Yi.Ai.FileAssistant/ui/package.json diff --git a/Yi.Ai.FileAssistant/ui/.gitignore b/Yi.Ai.FileAssistant/ui/.gitignore new file mode 100644 index 00000000..49ef0bd1 --- /dev/null +++ b/Yi.Ai.FileAssistant/ui/.gitignore @@ -0,0 +1,25 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +!.vscode/settings.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/Yi.Ai.FileAssistant/ui/index.html b/Yi.Ai.FileAssistant/ui/index.html new file mode 100644 index 00000000..db2a2716 --- /dev/null +++ b/Yi.Ai.FileAssistant/ui/index.html @@ -0,0 +1,21 @@ + + +
+ + + +👋
+ + + + diff --git a/Yi.Ai.FileAssistant/ui/index.md b/Yi.Ai.FileAssistant/ui/index.md deleted file mode 100644 index 99ee51da..00000000 --- a/Yi.Ai.FileAssistant/ui/index.md +++ /dev/null @@ -1,143 +0,0 @@ -```markdown -# MCP + Electron 桌面端架构说明 - -本文档整理了使用 **Vue3 + TypeScript + Electron + Node.js** 构建桌面端应用,并与 **C# 实现的 MCP Server** 通信的整体流程与任务清单。 - ---- - -## 1. 总体架构流程图 - -```mermaid -flowchart TD - subgraph DesktopApp["桌面端应用 (Electron + Vue3 + TS)"] - UI["用户界面 (Vue3 + ElementPlus)"] - IPC["IPC 通信 (Electron Renderer ⇔ Main)"] - end - - subgraph NodeLayer["Node.js 服务层 (MCP Client SDK)"] - NodeClient["MCP Client (TypeScript)"] - Adapter["协议适配 / API 转换"] - end - - subgraph CSharpMCP["C# MCP Server"] - CSharpSrv["MCP Server (.NET 实现)"] - end - - User["👤 用户"] --> UI - UI --> IPC - IPC --> NodeClient - NodeClient --> Adapter - Adapter <--> CSharpSrv -``` - - - - - -说明: - -- 用户操作 Electron 桌面应用(Vue3 UI) -- Vue3 通过 IPC 将请求发送给 Node.js 主进程 -- Node.js 主进程作为 MCP Client 调用 C# MCP Server -- C# MCP Server 处理请求并返回结果,Node.js 再返回给前端 UI - -## 2. 项目架构图 - -```mermaid - -flowchart TD - subgraph Frontend["前端 (Electron + Vue3 + TS)"] - FE1["界面层 (Vue3 + ElementPlus)"] - FE2["渲染进程 (Electron Renderer)"] - FE3["主进程 (Electron Main)"] - end - - subgraph Backend["Node.js 层"] - BE1["MCP Client (TypeScript SDK)"] - BE2["协议桥接层 (调用 C# MCP Server)"] - end - - subgraph CSharp["C# MCP Server"] - CS1["MCP 服务端 (C# 实现)"] - CS2["提供资源 / 工具 / 数据"] - end - - FE1 --> FE2 --> FE3 --> BE1 --> BE2 --> CS1 --> CS2 -``` - -## 3. 关键技术栈 - -| 层级 | 技术 | 作用 | -|------|------|------| -| **桌面端 UI** | Vue3 + TypeScript | 构建现代化桌面端界面 | -| | Element Plus | UI 组件库 | -| | Electron | 将前端打包为桌面应用,支持跨平台 (Win/Mac/Linux) | -| **Node 服务层** | Node.js | 桥接前端与 C# MCP 服务 | -| | MCP TypeScript SDK | 与 MCP Server 通信的官方 SDK | -| | IPC (Electron) | 渲染进程和主进程之间通信 | -| **后端服务** | C# (.NET) | 实现 MCP Server,提供业务逻辑 | -| | MCP C# SDK | 实现 MCP 协议的标准方式 | -| **通用** | Model Context Protocol (MCP) | 定义 LLM/客户端与工具/数据服务的通信协议 | - -## 4. Model Context Protocol (MCP) 参考 - -### 作用 -MCP(Model Context Protocol)是为大语言模型 (LLM) 定义的一种协议,使其可以安全、标准化地访问外部工具和数据。 - -在本项目中: -- Node.js 层充当 MCP Client,负责发请求 -- C# 层充当 MCP Server,负责处理请求并返回结果 - -### 常见 MCP SDK 实现 -- TypeScript MCP SDK -- Python MCP SDK -- C# MCP SDK -- Go / Rust / Kotlin / Java 等语言版本 - -### 官方参考服务 -- Filesystem:安全文件操作 -- Git:读取和操作 Git 仓库 -- Memory:知识图谱式持久化存储 -- Time:时间与时区转换 - -## 5. 开发任务清单 - -### 前端 (Electron + Vue3) -- 设计桌面 UI 界面 -- 实现 Electron 渲染进程 ⇔ 主进程的 IPC 通信 -- 提供用户操作入口(调用 Node 层 API) - -### Node.js 服务 -- 集成 MCP TypeScript SDK,作为 MCP 客户端 -- 负责和 C# MCP Server 建立通信(Stdio / Socket 等) -- 封装 API,供前端调用 - -### C# MCP Server -- 使用 MCP C# SDK 实现协议服务端 -- 提供具体的资源 / 工具 / 数据接口 -- 保证安全和权限控制 - -### 打包与部署 -- 使用 Electron Builder / Forge 打包应用 -- 跨平台支持(Windows / macOS / Linux) -- 测试桌面端 → Node.js → MCP Server 的完整链路 - -## 6. 流程总结 - -1. 用户在桌面应用 (Electron + Vue3) 中操作 UI -2. Electron 将指令通过 Node.js 服务 转换为 MCP 请求 -3. Node.js 服务与 C# MCP Server 通信 -4. C# MCP Server 返回结果 → Node.js → Electron → UI 显示 - ---- - -这个 Markdown 文档包含: -- 总体架构流程图 -- 项目架构图 -- 关键技术栈 -- MCP 相关说明 -- 开发任务清单 -- 流程总结 - -可以直接复制到文档或者笔记里使用。 -``` diff --git a/Yi.Ai.FileAssistant/ui/main.js b/Yi.Ai.FileAssistant/ui/main.js new file mode 100644 index 00000000..ad5d6735 --- /dev/null +++ b/Yi.Ai.FileAssistant/ui/main.js @@ -0,0 +1,26 @@ +const { app, BrowserWindow } = require('electron/main') + +const createWindow = () => { + const win = new BrowserWindow({ + width: 800, + height: 600 + }) + + win.loadFile('index.html') +} + +app.whenReady().then(() => { + createWindow() + + app.on('activate', () => { + if (BrowserWindow.getAllWindows().length === 0) { + createWindow() + } + }) +}) + +app.on('window-all-closed', () => { + if (process.platform !== 'darwin') { + app.quit() + } +}) diff --git a/Yi.Ai.FileAssistant/ui/package.json b/Yi.Ai.FileAssistant/ui/package.json new file mode 100644 index 00000000..fefeb291 --- /dev/null +++ b/Yi.Ai.FileAssistant/ui/package.json @@ -0,0 +1,15 @@ +{ + "name": "file-app", + "version": "1.0.0", + "main": "main.js", + "scripts": { + "start": "electron .", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "description": "", + "devDependencies": { + "electron": "^23.1.3" + } +}