fix: 新增文件助手目录
This commit is contained in:
Gsh
25
Yi.Ai.FileAssistant/ui/.gitignore
vendored
Normal file
25
Yi.Ai.FileAssistant/ui/.gitignore
vendored
Normal file
@@ -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?
|
||||||
21
Yi.Ai.FileAssistant/ui/index.html
Normal file
21
Yi.Ai.FileAssistant/ui/index.html
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta
|
||||||
|
http-equiv="Content-Security-Policy"
|
||||||
|
content="default-src 'self'; script-src 'self'"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
http-equiv="X-Content-Security-Policy"
|
||||||
|
content="default-src 'self'; script-src 'self'"
|
||||||
|
/>
|
||||||
|
<title>Hello from Electron renderer!</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Hello from Electron renderer!</h1>
|
||||||
|
<p>👋</p>
|
||||||
|
<p id="info"></p>
|
||||||
|
</body>
|
||||||
|
<script src="./renderer.js"></script>
|
||||||
|
</html>
|
||||||
@@ -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 相关说明
|
|
||||||
- 开发任务清单
|
|
||||||
- 流程总结
|
|
||||||
|
|
||||||
可以直接复制到文档或者笔记里使用。
|
|
||||||
```
|
|
||||||
26
Yi.Ai.FileAssistant/ui/main.js
Normal file
26
Yi.Ai.FileAssistant/ui/main.js
Normal file
@@ -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()
|
||||||
|
}
|
||||||
|
})
|
||||||
15
Yi.Ai.FileAssistant/ui/package.json
Normal file
15
Yi.Ai.FileAssistant/ui/package.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user