fix: 更新组件库

This commit is contained in:
Gsh
2025-08-18 21:02:55 +08:00
parent ec27ee58b4
commit 2cf6326764
2 changed files with 143 additions and 1 deletions

View File

@@ -0,0 +1,143 @@
```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) 参考
### 作用
MCPModel 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 相关说明
- 开发任务清单
- 流程总结
可以直接复制到文档或者笔记里使用。
```

View File

@@ -56,7 +56,6 @@ declare module 'vue' {
UserManagement: typeof import('./../src/components/userPersonalCenter/components/UserManagement.vue')['default']
VerificationCode: typeof import('./../src/components/LoginDialog/components/FormLogin/VerificationCode.vue')['default']
WelecomeText: typeof import('./../src/components/WelecomeText/index.vue')['default']
X: typeof import('./../src/components/userPersonalCenter/components/x.vue')['default']
}
export interface GlobalDirectives {
vLoading: typeof import('element-plus/es')['ElLoadingDirective']