Compare commits
36 Commits
main
...
f5b2bea15a
| Author | SHA1 | Date | |
|---|---|---|---|
| f5b2bea15a | |||
| 7a5b6680f2 | |||
|
|
4bae331d4f | ||
|
|
4708af1e93 | ||
| fad8c10e69 | |||
|
|
84680a9639 | ||
|
|
9710da8b3d | ||
|
|
8b145d79d3 | ||
| 6ca081afa8 | |||
| d6491ecba4 | |||
|
|
cddbba0e0f | ||
|
|
781a3137a6 | ||
| f944dd680c | |||
|
|
d977da5c38 | ||
|
|
e06bd84f29 | ||
| a351d0ac79 | |||
| 9a91093325 | |||
| a2a3bd2bee | |||
| fb3b072975 | |||
| cc774b717e | |||
| 2ab6dd1050 | |||
| 8c2ea4488b | |||
| 5151379726 | |||
| 0c5ab186da | |||
| 4645bf93ff | |||
| a16d39ef52 | |||
| 95956e5a5b | |||
| ba8cbf564d | |||
| 5607d07586 | |||
|
|
c07f2c8dbe | ||
|
|
669fd4cc6a | ||
|
|
0b11680aea | ||
| 84462f165a | |||
| 2d1fe95be0 | |||
| 67fb44fc73 | |||
| 582b9e10fa |
7
.gitignore
vendored
7
.gitignore
vendored
@@ -6,6 +6,10 @@ yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
.idea
|
||||
.vite
|
||||
.vscode
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
@@ -45,8 +49,6 @@ typings/
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
@@ -87,6 +89,7 @@ typings/
|
||||
|
||||
# Vite
|
||||
.vite/
|
||||
*.timestamp-*.mjs
|
||||
|
||||
# Electron-Forge
|
||||
out/
|
||||
|
||||
@@ -1 +1 @@
|
||||
pnpm exec lint-staged
|
||||
npm exec lint-staged
|
||||
|
||||
4
.idea/electron-all.iml
generated
4
.idea/electron-all.iml
generated
@@ -1,7 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="WEB_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<content url="file://$MODULE_DIR$">
|
||||
<excludeFolder url="file://$MODULE_DIR$/.vite" />
|
||||
</content>
|
||||
<orderEntry type="inheritedJdk" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/prettierrc",
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"printWidth": 160,
|
||||
"objectWrap": "preserve",
|
||||
"bracketSameLine": true,
|
||||
"trailingComma": "all"
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"bracketSpacing": true,
|
||||
"arrowParens": "always",
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
@@ -1,21 +1,21 @@
|
||||
export default {
|
||||
module.exports = {
|
||||
extends: ['@commitlint/config-conventional'],
|
||||
rules: {
|
||||
'type-enum': [
|
||||
2,
|
||||
'always',
|
||||
[
|
||||
'feat', // 新功能
|
||||
'fix', // 修复 bug
|
||||
'docs', // 文档变更
|
||||
'style', // 代码格式(不影响代码运行的变动)
|
||||
'feat', // 新功能
|
||||
'fix', // 修复 bug
|
||||
'docs', // 文档变更
|
||||
'style', // 代码格式(不影响代码运行的变动)
|
||||
'refactor', // 重构(既不是新增功能,也不是修改 bug 的代码变动)
|
||||
'perf', // 性能优化
|
||||
'test', // 添加测试或修改现有测试
|
||||
'chore', // 构建过程或辅助工具的变动
|
||||
'ci', // CI 配置文件和脚本的变动
|
||||
'build', // 影响构建系统或外部依赖的更改
|
||||
'revert', // 回滚提交
|
||||
'perf', // 性能优化
|
||||
'test', // 添加测试或修改现有测试
|
||||
'chore', // 构建过程或辅助工具的变动
|
||||
'ci', // CI 配置文件和脚本的变动
|
||||
'build', // 影响构建系统或外部依赖的更改
|
||||
'revert', // 回滚提交
|
||||
],
|
||||
],
|
||||
'type-case': [2, 'always', 'lower-case'],
|
||||
@@ -24,4 +24,4 @@ export default {
|
||||
'subject-full-stop': [2, 'never', '.'],
|
||||
'header-max-length': [2, 'always', 100],
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
99
doc/OpenCode API 总结与对话功能接口分析.md
Normal file
99
doc/OpenCode API 总结与对话功能接口分析.md
Normal file
@@ -0,0 +1,99 @@
|
||||
# OpenCode API 总结与对话功能接口分析
|
||||
|
||||
## 1. API 总结表格
|
||||
|
||||
以下表格总结了 OpenCode 服务器暴露的 API 的用途、传参和返回值格式:
|
||||
|
||||
| 分类 | 方法 | 路径 | 描述 | 请求体/查询参数 | 响应 |
|
||||
|---|---|---|:-:|---|---|
|
||||
| **全局** | `GET` | `/global/health` | 获取服务器健康状态和版本 | 无 | `{ healthy: true, version: string }` |
|
||||
| | `GET` | `/global/event` | 获取全局事件(SSE 流) | 无 | 事件流 |
|
||||
| **项目** | `GET` | `/project` | 列出所有项目 | 无 | `Project[]` |
|
||||
| | `GET` | `/project/current` | 获取当前项目 | 无 | `Project` |
|
||||
| **路径和 VCS** | `GET` | `/path` | 获取当前路径 | 无 | `Path` |
|
||||
| | `GET` | `/vcs` | 获取当前项目的 VCS 信息 | 无 | `VcsInfo` |
|
||||
| **实例** | `POST` | `/instance/dispose` | 销毁当前实例 | 无 | `boolean` |
|
||||
| **配置** | `GET` | `/config` | 获取配置信息 | 无 | `Config` |
|
||||
| | `PATCH` | `/config` | 更新配置 | `Config` | `Config` |
|
||||
| | `GET` | `/config/providers` | 列出提供商和默认模型 | 无 | `{ providers: Provider[], default: { [key: string]: string } }` |
|
||||
| **提供商** | `GET` | `/provider` | 列出所有提供商 | 无 | `{ all: Provider[], default: {...}, connected: string[] }` |
|
||||
| | `GET` | `/provider/auth` | 获取提供商认证方式 | 无 | `{ [providerID: string]: ProviderAuthMethod[] }` |
|
||||
| | `POST` | `/provider/{id}/oauth/authorize` | 使用 OAuth 授权提供商 | 无 | `ProviderAuthAuthorization` |
|
||||
| | `POST` | `/provider/{id}/oauth/callback` | 处理提供商的 OAuth 回调 | 无 | `boolean` |
|
||||
| **会话** | `GET` | `/session` | 列出所有会话 | 无 | `Session[]` |
|
||||
| | `POST` | `/session` | 创建新会话 | `{ parentID?, title? }` | `Session` |
|
||||
| | `GET` | `/session/status` | 获取所有会话的状态 | 无 | `{ [sessionID: string]: SessionStatus }` |
|
||||
| | `GET` | `/session/:id` | 获取会话详情 | 无 | `Session` |
|
||||
| | `DELETE` | `/session/:id` | 删除会话及其所有数据 | 无 | `boolean` |
|
||||
| | `PATCH` | `/session/:id` | 更新会话属性 | `{ title? }` | `Session` |
|
||||
| | `GET` | `/session/:id/children` | 获取会话的子会话 | 无 | `Session[]` |
|
||||
| | `GET` | `/session/:id/todo` | 获取会话的待办事项列表 | 无 | `Todo[]` |
|
||||
| | `POST` | `/session/:id/init` | 分析应用并创建 AGENTS.md | `{ messageID, providerID, modelID }` | `boolean` |
|
||||
| | `POST` | `/session/:id/fork` | 在某条消息处分叉现有会话 | `{ messageID? }` | `Session` |
|
||||
| | `POST` | `/session/:id/abort` | 中止正在运行的会话 | 无 | `boolean` |
|
||||
| | `POST` | `/session/:id/share` | 分享会话 | 无 | `Session` |
|
||||
| | `DELETE` | `/session/:id/share` | 取消分享会话 | 无 | `Session` |
|
||||
| | `GET` | `/session/:id/diff` | 获取本次会话的差异 | `messageID?` | `FileDiff[]` |
|
||||
| | `POST` | `/session/:id/summarize` | 总结会话 | `{ providerID, modelID }` | `boolean` |
|
||||
| | `POST` | `/session/:id/revert` | 回退消息 | `{ messageID, partID? }` | `boolean` |
|
||||
| | `POST` | `/session/:id/unrevert` | 恢复所有已回退的消息 | 无 | `boolean` |
|
||||
| | `POST` | `/session/:id/permissions/:permissionID` | 响应权限请求 | `{ response, remember? }` | `boolean` |
|
||||
| **消息** | `GET` | `/session/:id/message` | 列出会话中的消息 | `limit?` | `{ info: Message, parts: Part[]}[]` |
|
||||
| | `POST` | `/session/:id/message` | 发送消息并等待响应 | `{ messageID?, model?, agent?, noReply?, system?, tools?, parts }` | `{ info: Message, parts: Part[]}` |
|
||||
| | `GET` | `/session/:id/message/:messageID` | 获取消息详情 | 无 | `{ info: Message, parts: Part[]}` |
|
||||
| | `POST` | `/session/:id/prompt_async` | 异步发送消息(不等待响应) | 与 `/session/:id/message` 相同 | `204 No Content` |
|
||||
| | `POST` | `/session/:id/command` | 执行斜杠命令 | `{ messageID?, agent?, model?, command, arguments }` | `{ info: Message, parts: Part[]}` |
|
||||
| | `POST` | `/session/:id/shell` | 运行 shell 命令 | `{ agent, model?, command }` | `{ info: Message, parts: Part[]}` |
|
||||
| **命令** | `GET` | `/command` | 列出所有命令 | 无 | `Command[]` |
|
||||
| **文件** | `GET` | `/find?pattern=<pat>` | 在文件中搜索文本 | `pattern` | 匹配对象数组 |
|
||||
| | `GET` | `/find/file?query=<q>` | 按名称查找文件和目录 | `query` | `string[]`(路径) |
|
||||
| | `GET` | `/find/symbol?query=<q>` | 查找工作区符号 | `query` | `Symbol[]` |
|
||||
| | `GET` | `/file?path=<path>` | 列出文件和目录 | `path` | `FileNode[]` |
|
||||
| | `GET` | `/file/content?path=<p>` | 读取文件 | `path` | `FileContent` |
|
||||
| | `GET` | `/file/status` | 获取已跟踪文件的状态 | 无 | `File[]` |
|
||||
| **工具(实验性)** | `GET` | `/experimental/tool/ids` | 列出所有工具 ID | 无 | `ToolIDs` |
|
||||
| | `GET` | `/experimental/tool?provider=<p>&model=<m>` | 列出指定模型的工具及其 JSON Schema | `provider, model` | `ToolList` |
|
||||
| **LSP、格式化器和 MCP** | `GET` | `/lsp` | 获取 LSP 服务器状态 | 无 | `LSPStatus[]` |
|
||||
| | `GET` | `/formatter` | 获取格式化器状态 | 无 | `FormatterStatus[]` |
|
||||
| | `GET` | `/mcp` | 获取 MCP 服务器状态 | 无 | `{ [name: string]: MCPStatus }` |
|
||||
| | `POST` | `/mcp` | 动态添加 MCP 服务器 | `{ name, config }` | MCP 状态对象 |
|
||||
| **代理** | `GET` | `/agent` | 列出所有可用的代理 | 无 | `Agent[]` |
|
||||
| **日志** | `POST` | `/log` | 写入日志条目 | `{ service, level, message, extra? }` | `boolean` |
|
||||
| **TUI** | `POST` | `/tui/append-prompt` | 向提示词追加文本 | 无 | `boolean` |
|
||||
| | `POST` | `/tui/open-help` | 打开帮助对话框 | 无 | `boolean` |
|
||||
| | `POST` | `/tui/open-sessions` | 打开会话选择器 | 无 | `boolean` |
|
||||
| | `POST` | `/tui/open-themes` | 打开主题选择器 | 无 | `boolean` |
|
||||
| | `POST` | `/tui/open-models` | 打开模型选择器 | 无 | `boolean` |
|
||||
| | `POST` | `/tui/submit-prompt` | 提交当前提示词 | 无 | `boolean` |
|
||||
| | `POST` | `/tui/clear-prompt` | 清除提示词 | 无 | `boolean` |
|
||||
| | `POST` | `/tui/execute-command` | 执行命令 | `{ command }` | `boolean` |
|
||||
| | `POST` | `/tui/show-toast` | 显示提示消息 | `{ title?, message, variant }` | `boolean` |
|
||||
| | `GET` | `/tui/control/next` | 等待下一个控制请求 | 无 | 控制请求对象 |
|
||||
| | `POST` | `/tui/control/response` | 响应控制请求 | `{ body }` | `boolean` |
|
||||
| **认证** | `PUT` | `/auth/:id` | 设置认证凭据 | 必须匹配提供商的数据结构 | `boolean` |
|
||||
| **事件** | `GET` | `/event` | 服务器发送事件流 | 无 | 服务器发送事件流 |
|
||||
| **文档** | `GET` | `/doc` | OpenAPI 3.1 规范 | 无 | 包含 OpenAPI 规范的 HTML 页面 |
|
||||
|
||||
## 2. 对话功能接口分析
|
||||
|
||||
根据您的需求,实现对话功能,最核心的接口是 **消息 (Message)** 类别下的 API。
|
||||
|
||||
具体来说,您应该使用以下接口:
|
||||
|
||||
* **`POST /session/:id/message`**: 这个接口用于**发送消息并等待响应**。这是实现对话功能最主要的接口,您可以通过它向 OpenCode 服务器发送用户输入的消息,并获取服务器返回的对话响应。请求体中可以包含 `messageID` (可选), `model` (可选), `agent` (可选), `noReply` (可选), `system` (可选), `tools` (可选), `parts` 等参数,返回 `{ info: Message, parts: Part[]}`,其中 `info` 包含消息的元数据,`parts` 包含消息的具体内容。
|
||||
|
||||
* **`GET /session/:id/message`**: 这个接口用于**列出会话中的消息**。在对话过程中,您可能需要获取历史消息记录以展示给用户或进行上下文管理。通过 `limit?` 查询参数可以限制返回的消息数量,返回 `{ info: Message, parts: Part[]}[]`。
|
||||
|
||||
* **`GET /session/:id/message/:messageID`**: 这个接口用于**获取消息详情**。如果您需要获取特定消息的详细信息,可以使用此接口,返回 `{ info: Message, parts: Part[]}`。
|
||||
|
||||
* **`POST /session/:id/prompt_async`**: 这个接口用于**异步发送消息(不等待响应)**。如果您希望发送消息后立即返回,不等待服务器的响应,可以使用此接口。这在某些场景下可能有助于提高用户体验,例如在后台处理耗时操作时。请求体与 `POST /session/:id/message` 相同,返回 `204 No Content`。
|
||||
|
||||
除了上述消息相关的接口,**会话 (Session)** 类别下的接口也至关重要,特别是:
|
||||
|
||||
* **`POST /session`**: 用于**创建新会话**。在开始新的对话之前,您需要创建一个会话。请求体可以包含 `parentID?` (可选) 和 `title?` (可选),返回 `Session` 对象。
|
||||
|
||||
* **`GET /session`**: 用于**列出所有会话**。您可以获取当前用户的所有会话列表,以便用户选择或管理历史对话。
|
||||
|
||||
**总结:**
|
||||
|
||||
要实现对话功能,您首先需要通过 `POST /session` 创建一个会话,然后使用 `POST /session/:id/message` 发送用户消息并接收响应。同时,您可以使用 `GET /session/:id/message` 来获取历史消息,以维护对话上下文。`POST /session/:id/prompt_async` 可以用于异步发送消息,提升用户体验。
|
||||
149
doc/OpenCode 对话功能实现路径.md
Normal file
149
doc/OpenCode 对话功能实现路径.md
Normal file
@@ -0,0 +1,149 @@
|
||||
# OpenCode 对话功能实现路径
|
||||
|
||||
本文档旨在提供一个在 OpenCode 平台中实现对话功能的完整技术路径,涵盖会话管理、消息发送以及利用事件流(SSE)进行流式渲染的详细步骤和建议。
|
||||
|
||||
## 1. 核心概念回顾
|
||||
|
||||
在 OpenCode 中实现对话功能,主要依赖以下几个核心接口:
|
||||
|
||||
* **`POST /session`**: 用于创建新的对话会话,获取 `sessionID`。
|
||||
* **`POST /session/:id/prompt_async`**: 用于异步发送用户消息到指定会话,服务器会立即返回,不等待 AI 响应完成。
|
||||
* **`GET /event`**: 作为 SSE(Server-Sent Events)接口,用于实时接收服务器产生的各类事件,包括 AI 消息的生成和更新。
|
||||
* **`GET /session/:id/message`**: 用于获取指定会话的历史消息记录。
|
||||
|
||||
## 2. 对话生命周期与接口调用顺序
|
||||
|
||||
以下是实现一个完整的流式对话功能的推荐流程:
|
||||
|
||||
### 步骤 1: 初始化 - 创建会话
|
||||
|
||||
在用户开始对话之前,需要为其创建一个新的会话。每个会话都有一个唯一的 `sessionID`,用于标识和管理该对话的上下文。
|
||||
|
||||
* **接口**: `POST /session`
|
||||
* **用途**: 启动一个新的对话。
|
||||
* **请求体示例**: `{
|
||||
"title": "我的新对话"
|
||||
}` (标题可选)
|
||||
* **响应**: 返回一个 `Session` 对象,其中包含 `id` 字段,即 `sessionID`。
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "some-session-id",
|
||||
"title": "我的新对话",
|
||||
"createdAt": "2023-01-01T12:00:00Z",
|
||||
"updatedAt": "2023-01-01T12:00:00Z"
|
||||
}
|
||||
```
|
||||
|
||||
### 步骤 2: 建立事件监听
|
||||
|
||||
为了实现 AI 响应的流式渲染,客户端需要连接到 `/event` 接口,持续监听服务器发出的事件。这将允许您实时接收 AI 生成的文本片段。
|
||||
|
||||
* **接口**: `GET /event`
|
||||
* **用途**: 接收服务器发送的实时事件流(SSE)。
|
||||
* **机制**: 客户端建立一个持久的 HTTP 连接,服务器通过此连接推送事件。您需要一个支持 SSE 的客户端库来处理这个连接。
|
||||
* **过滤**: 客户端需要根据 `sessionID` 和 `messageID`(稍后从 `prompt_async` 的响应中获取或从事件流中识别)来过滤和处理相关事件。
|
||||
|
||||
**伪代码示例 (JavaScript)**:
|
||||
|
||||
```javascript
|
||||
const eventSource = new EventSource('/event');
|
||||
|
||||
eventSource.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
// 根据事件类型和 sessionID 过滤事件
|
||||
if (data.type === 'message.updated' && data.sessionID === currentSessionId) {
|
||||
// 处理消息更新事件,例如追加 AI 生成的文本片段到 UI
|
||||
console.log('Received message update:', data.message.parts);
|
||||
// 假设 data.message.parts[0].text 包含最新文本
|
||||
// updateUIWithStreamingText(data.message.parts[0].text);
|
||||
}
|
||||
// 其他事件处理,例如 message.created, session.updated 等
|
||||
};
|
||||
|
||||
eventSource.onerror = (error) => {
|
||||
console.error('EventSource failed:', error);
|
||||
eventSource.close();
|
||||
};
|
||||
```
|
||||
|
||||
### 步骤 3: 发送用户消息
|
||||
|
||||
当用户输入消息后,通过 `prompt_async` 接口将其发送到服务器。这个接口会立即返回,不会阻塞客户端,让流式渲染可以同时进行。
|
||||
|
||||
* **接口**: `POST /session/:id/prompt_async`
|
||||
* **用途**: 异步发送用户消息,触发 AI 响应生成。
|
||||
* **路径参数**: `:id` 为当前会话的 `sessionID`。
|
||||
* **请求体示例**: `{
|
||||
"parts": [
|
||||
{ "text": "你好,OpenCode!" }
|
||||
],
|
||||
"model": "your-model-id", // 可选,指定使用的模型
|
||||
"agent": "your-agent-id" // 可选,指定使用的代理
|
||||
}`
|
||||
* **响应**: `204 No Content`。这意味着服务器已接收请求并开始处理,但不会立即返回 AI 的完整响应。
|
||||
|
||||
**伪代码示例 (JavaScript)**:
|
||||
|
||||
```javascript
|
||||
async function sendUserMessage(sessionId, messageText) {
|
||||
const response = await fetch(`/session/${sessionId}/prompt_async`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
parts: [{ text: messageText }]
|
||||
})
|
||||
});
|
||||
|
||||
if (response.status === 204) {
|
||||
console.log('User message sent successfully, awaiting streaming response via /event.');
|
||||
// 此时前端可以显示用户消息,并准备接收 AI 的流式响应
|
||||
} else {
|
||||
console.error('Failed to send user message:', response.statusText);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 步骤 4: 处理流式响应与渲染
|
||||
|
||||
在步骤 2 中建立的 `/event` 监听器会接收到 AI 生成消息的实时更新。您需要解析这些事件,并将 AI 生成的文本片段逐步显示在用户界面上。
|
||||
|
||||
* **事件类型**: 主要关注 `message.updated` 事件,其 `message` 字段会包含 `parts` 数组,其中包含 AI 正在生成的文本。
|
||||
* **渲染逻辑**: 每次收到新的文本片段时,将其追加到 AI 消息的显示区域,而不是替换。
|
||||
* **完成标志**: 当 AI 消息生成完成时,通常会有一个特定的事件或 `message.updated` 事件中的状态标志来指示。例如,当 `message.updated` 事件中的 `message.status` 变为 `completed` 或 `final` 时,表示流式输出结束。
|
||||
|
||||
### 步骤 5: 获取历史消息 (可选)
|
||||
|
||||
如果用户重新加载页面或需要查看之前的对话记录,可以使用此接口获取会话的所有历史消息。
|
||||
|
||||
* **接口**: `GET /session/:id/message`
|
||||
* **用途**: 获取指定会话的所有消息。
|
||||
* **路径参数**: `:id` 为当前会话的 `sessionID`。
|
||||
* **查询参数**: `limit?` (可选) 用于限制返回的消息数量。
|
||||
* **响应**: 返回一个消息数组,每个元素包含 `info: Message` 和 `parts: Part[]`。
|
||||
|
||||
## 3. 完整流程图
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[用户打开应用] --> B{是否已有会话?}
|
||||
B -- 否 --> C[调用 POST /session]
|
||||
C --> D[获取 sessionID]
|
||||
B -- 是 --> D[使用现有 sessionID]
|
||||
D --> E[建立 GET /event SSE 连接]
|
||||
E --> F[用户输入消息]
|
||||
F --> G[调用 POST /session/:id/prompt_async]
|
||||
G --> H[前端显示用户消息]
|
||||
H --> I[通过 SSE 接收 message.updated 事件]
|
||||
I -- 文本片段 --> J[实时渲染 AI 响应]
|
||||
I -- 消息完成 --> K[AI 响应渲染完成]
|
||||
K --> F
|
||||
subgraph 历史消息
|
||||
L[用户请求历史消息] --> M[调用 GET /session/:id/message]
|
||||
M --> N[显示历史消息]
|
||||
end
|
||||
```
|
||||
|
||||
## 4. 总结
|
||||
|
||||
在 OpenCode 中实现流式对话功能,关键在于**分离消息发送和消息接收**。通过 `POST /session/:id/prompt_async` 异步发送消息,并通过 `GET /event` 实时监听服务器的总线事件来获取 AI 生成的文本片段,从而实现流畅的流式问答体验。`GET /event` 接口是您实现流式渲染的正确选择,因为它提供了所有会话相关的实时更新,包括 AI 消息的逐字生成过程。
|
||||
106
eslint.config.js
106
eslint.config.js
@@ -1,106 +0,0 @@
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
import vitest from 'eslint-plugin-vitest'
|
||||
import globals from 'globals'
|
||||
import js from '@eslint/js'
|
||||
import pluginVue from 'eslint-plugin-vue'
|
||||
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
|
||||
|
||||
export default defineConfig([
|
||||
{
|
||||
name: 'app/files-to-lint',
|
||||
files: ['**/*.{js,mjs,jsx,vue}'],
|
||||
},
|
||||
|
||||
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**', '**/cypress/**', '**/public/**']),
|
||||
|
||||
{
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...globals.browser,
|
||||
...globals.node,
|
||||
// Electron globals
|
||||
process: 'readonly',
|
||||
__dirname: 'readonly',
|
||||
// Vite globals
|
||||
MAIN_WINDOW_VITE_DEV_SERVER_URL: 'readonly',
|
||||
MAIN_WINDOW_VITE_NAME: 'readonly',
|
||||
// Allow using Vue Composition API and <script setup> macros without explicit imports
|
||||
// because unplugin-auto-import injects them at build time, while ESLint works on source text.
|
||||
// Mark as read-only to prevent accidental reassignment warnings.
|
||||
// Composition API
|
||||
ref: 'readonly',
|
||||
shallowRef: 'readonly',
|
||||
computed: 'readonly',
|
||||
reactive: 'readonly',
|
||||
shallowReactive: 'readonly',
|
||||
readonly: 'readonly',
|
||||
unref: 'readonly',
|
||||
toRef: 'readonly',
|
||||
toRefs: 'readonly',
|
||||
toRaw: 'readonly',
|
||||
markRaw: 'readonly',
|
||||
isRef: 'readonly',
|
||||
isReactive: 'readonly',
|
||||
isReadonly: 'readonly',
|
||||
isProxy: 'readonly',
|
||||
watch: 'readonly',
|
||||
watchEffect: 'readonly',
|
||||
watchPostEffect: 'readonly',
|
||||
watchSyncEffect: 'readonly',
|
||||
// Lifecycle
|
||||
onMounted: 'readonly',
|
||||
onUpdated: 'readonly',
|
||||
onUnmounted: 'readonly',
|
||||
onBeforeMount: 'readonly',
|
||||
onBeforeUpdate: 'readonly',
|
||||
onBeforeUnmount: 'readonly',
|
||||
onActivated: 'readonly',
|
||||
onDeactivated: 'readonly',
|
||||
onErrorCaptured: 'readonly',
|
||||
onRenderTracked: 'readonly',
|
||||
onRenderTriggered: 'readonly',
|
||||
// Misc
|
||||
nextTick: 'readonly',
|
||||
getCurrentInstance: 'readonly',
|
||||
inject: 'readonly',
|
||||
provide: 'readonly',
|
||||
// Vue 3.5+ template ref helper
|
||||
useTemplateRef: 'readonly',
|
||||
// <script setup> compiler macros
|
||||
defineProps: 'readonly',
|
||||
defineEmits: 'readonly',
|
||||
defineExpose: 'readonly',
|
||||
withDefaults: 'readonly',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// Enable Vitest globals and rules for test files
|
||||
{
|
||||
name: 'app/tests-vitest',
|
||||
files: ['tests/**/*.{test,spec}.{js,jsx,ts,tsx}'],
|
||||
plugins: { vitest },
|
||||
rules: {
|
||||
// Apply Vitest recommended rules
|
||||
...(vitest.configs?.recommended?.rules ?? {}),
|
||||
},
|
||||
languageOptions: {
|
||||
// Register Vitest testing globals so ESLint doesn't flag them as undefined
|
||||
globals: (vitest.environments && vitest.environments.env && vitest.environments.env.globals) || {
|
||||
describe: 'readonly',
|
||||
test: 'readonly',
|
||||
it: 'readonly',
|
||||
expect: 'readonly',
|
||||
vi: 'readonly',
|
||||
beforeAll: 'readonly',
|
||||
afterAll: 'readonly',
|
||||
beforeEach: 'readonly',
|
||||
afterEach: 'readonly',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
js.configs.recommended,
|
||||
...pluginVue.configs['flat/essential'],
|
||||
skipFormatting,
|
||||
])
|
||||
@@ -1,8 +0,0 @@
|
||||
body {
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
|
||||
sans-serif;
|
||||
margin: auto;
|
||||
max-width: 38rem;
|
||||
padding: 2rem;
|
||||
}
|
||||
23
jsconfig.json
Normal file
23
jsconfig.json
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/renderer/*"]
|
||||
},
|
||||
"allowJs": true,
|
||||
"checkJs": false,
|
||||
"jsx": "preserve",
|
||||
"strict": false,
|
||||
"noEmit": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"resolveJsonModule": true,
|
||||
"types": ["node"],
|
||||
"typeRoots": ["./node_modules/@types", "./node_modules"]
|
||||
},
|
||||
"include": ["src/**/*", "*.config.mjs", "*.config.js"],
|
||||
"exclude": ["node_modules", "dist", ".vite"]
|
||||
}
|
||||
2327
package-lock.json
generated
2327
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
41
package.json
41
package.json
@@ -1,26 +1,26 @@
|
||||
{
|
||||
"name": "my-app",
|
||||
"productName": "my-app",
|
||||
"name": "Zhiju",
|
||||
"productName": "Zhiju",
|
||||
"version": "1.0.0",
|
||||
"description": "My Electron application description",
|
||||
"description": "Zhiju Ai Assistant",
|
||||
"main": ".vite/build/main.js",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "electron-forge start",
|
||||
"start": "electron-forge start",
|
||||
"package": "electron-forge package",
|
||||
"make": "electron-forge make",
|
||||
"publish": "electron-forge publish",
|
||||
"lint": "eslint . --fix --cache",
|
||||
"lint": "echo \"No linting configured\"",
|
||||
"prepare": "husky",
|
||||
"format": "prettier --write src/"
|
||||
"format": "prettier --write .",
|
||||
"format:check": "prettier --check ."
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "houakang",
|
||||
"author": "zhiju.com.cn",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@commitlint/cli": "^20.1.0",
|
||||
"@commitlint/config-conventional": "^20.0.0",
|
||||
"@commitlint/cli": "^20.5.0",
|
||||
"@commitlint/config-conventional": "^20.5.0",
|
||||
"@electron-forge/cli": "^7.11.1",
|
||||
"@electron-forge/maker-deb": "^7.11.1",
|
||||
"@electron-forge/maker-rpm": "^7.11.1",
|
||||
@@ -30,19 +30,14 @@
|
||||
"@electron-forge/plugin-fuses": "^7.11.1",
|
||||
"@electron-forge/plugin-vite": "^7.11.1",
|
||||
"@electron/fuses": "^1.8.0",
|
||||
"@eslint/js": "^9.37.0",
|
||||
"@tailwindcss/vite": "^4.2.2",
|
||||
"@vitejs/plugin-vue": "^6.0.5",
|
||||
"@vue/eslint-config-prettier": "^10.2.0",
|
||||
"autoprefixer": "^10.4.27",
|
||||
"electron": "^41.2.0",
|
||||
"eslint": "^9.37.0",
|
||||
"eslint-plugin-vitest": "^0.5.4",
|
||||
"eslint-plugin-vue": "~10.5.0",
|
||||
"globals": "^16.4.0",
|
||||
"husky": "^9.1.7",
|
||||
"lint-staged": "^16.2.6",
|
||||
"prettier": "3.6.2",
|
||||
"tailwindcss": "^4.2.2",
|
||||
"lint-staged": "^16.4.0",
|
||||
"postcss": "^8.5.9",
|
||||
"prettier": "3.8.1",
|
||||
"tailwindcss": "^3.4.19",
|
||||
"vite": "^5.4.21"
|
||||
},
|
||||
"dependencies": {
|
||||
@@ -51,13 +46,15 @@
|
||||
"bonjour-service": "^1.3.0",
|
||||
"electron-squirrel-startup": "^1.0.1",
|
||||
"element-plus": "^2.13.6",
|
||||
"lucide-vue-next": "^1.0.0",
|
||||
"pinia": "^3.0.4",
|
||||
"vue": "^3.5.32",
|
||||
"vue-router": "^4.6.4"
|
||||
"vue-router": "^4.6.4",
|
||||
"js-base64": "3.7.5",
|
||||
"jsencrypt": "^3.5.4"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,vue}": [
|
||||
"eslint --fix",
|
||||
"prettier --write"
|
||||
]
|
||||
}
|
||||
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
BIN
resources/darwin/arm64/opencode
Normal file
BIN
resources/darwin/arm64/opencode
Normal file
Binary file not shown.
BIN
resources/darwin/x64/opencode
Normal file
BIN
resources/darwin/x64/opencode
Normal file
Binary file not shown.
@@ -1,57 +1,87 @@
|
||||
import { app, BrowserWindow, shell, ipcMain } from 'electron'
|
||||
import path from 'node:path'
|
||||
import fs from 'node:fs'
|
||||
import net from 'node:net'
|
||||
import { spawn } from 'node:child_process'
|
||||
import started from 'electron-squirrel-startup'
|
||||
import Bonjour from 'bonjour-service'
|
||||
import { app, BrowserWindow, shell, ipcMain, Menu } from 'electron';
|
||||
import path from 'node:path';
|
||||
import fs from 'node:fs';
|
||||
import net from 'node:net';
|
||||
import { spawn } from 'node:child_process';
|
||||
import started from 'electron-squirrel-startup';
|
||||
import { Bonjour } from 'bonjour-service';
|
||||
|
||||
if (started) app.quit()
|
||||
if (started) app.quit();
|
||||
|
||||
const bonjour = new Bonjour()
|
||||
const devices = new Map()
|
||||
// ========== Bonjour 服务发现 ==========
|
||||
const bonjour = new Bonjour();
|
||||
let discoveredServices = new Map();
|
||||
|
||||
function getDiscoveredServices() {
|
||||
return Array.from(discoveredServices.values());
|
||||
}
|
||||
|
||||
function startBonjourDiscovery() {
|
||||
const browser = bonjour.find({});
|
||||
|
||||
browser.on('up', (service) => {
|
||||
console.log('[bonjour] Service up:', service.name);
|
||||
discoveredServices.set(service.fqdn, service);
|
||||
notifyServicesChanged();
|
||||
});
|
||||
|
||||
browser.on('down', (service) => {
|
||||
console.log('[bonjour] Service down:', service.name);
|
||||
discoveredServices.delete(service.fqdn);
|
||||
notifyServicesChanged();
|
||||
});
|
||||
|
||||
return browser;
|
||||
}
|
||||
|
||||
function notifyServicesChanged() {
|
||||
const services = getDiscoveredServices();
|
||||
BrowserWindow.getAllWindows().forEach((win) => {
|
||||
win.webContents.send('bonjour:services-updated', services);
|
||||
});
|
||||
}
|
||||
|
||||
// ========== OpenCode 服务管理 ==========
|
||||
const DEFAULT_PORT = 4096
|
||||
let opencodeProcess = null
|
||||
let opencodePort = null
|
||||
let opencodeStarting = null
|
||||
const DEFAULT_PORT = 4096;
|
||||
let opencodeProcess = null;
|
||||
let opencodePort = null;
|
||||
let opencodeStarting = null;
|
||||
|
||||
function isPortAvailable(port) {
|
||||
return new Promise((resolve) => {
|
||||
const server = net.createServer()
|
||||
server.once('error', () => resolve(false))
|
||||
server.once('listening', () => server.close(() => resolve(true)))
|
||||
server.listen(port, '127.0.0.1')
|
||||
})
|
||||
const server = net.createServer();
|
||||
server.once('error', () => resolve(false));
|
||||
server.once('listening', () => server.close(() => resolve(true)));
|
||||
server.listen(port, '127.0.0.1');
|
||||
});
|
||||
}
|
||||
|
||||
async function resolvePort() {
|
||||
let port = DEFAULT_PORT
|
||||
let port = DEFAULT_PORT;
|
||||
while (!(await isPortAvailable(port))) {
|
||||
port++
|
||||
if (port > 65535) throw new Error('没有可用的端口')
|
||||
port++;
|
||||
if (port > 65535) throw new Error('没有可用的端口');
|
||||
}
|
||||
return port
|
||||
return port;
|
||||
}
|
||||
|
||||
function waitForReady(port, timeout = 15000) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const start = Date.now()
|
||||
const start = Date.now();
|
||||
const check = () => {
|
||||
const socket = net.createConnection({ port, host: '127.0.0.1' })
|
||||
const socket = net.createConnection({ port, host: '127.0.0.1' });
|
||||
socket.once('connect', () => {
|
||||
socket.end()
|
||||
resolve()
|
||||
})
|
||||
socket.end();
|
||||
resolve();
|
||||
});
|
||||
socket.once('error', () => {
|
||||
socket.destroy()
|
||||
if (Date.now() - start >= timeout) return reject(new Error('OpenCode 服务启动超时'))
|
||||
setTimeout(check, 300)
|
||||
})
|
||||
}
|
||||
check()
|
||||
})
|
||||
socket.destroy();
|
||||
if (Date.now() - start >= timeout) return reject(new Error('OpenCode 服务启动超时'));
|
||||
setTimeout(check, 300);
|
||||
});
|
||||
};
|
||||
check();
|
||||
});
|
||||
}
|
||||
|
||||
function buildInfo() {
|
||||
@@ -59,141 +89,169 @@ function buildInfo() {
|
||||
running: !!opencodeProcess,
|
||||
port: opencodePort,
|
||||
url: opencodePort ? `http://127.0.0.1:${opencodePort}` : null,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function buildEnv(exeDir) {
|
||||
const env = { ...process.env }
|
||||
const env = { ...process.env };
|
||||
for (const key of Object.keys(env)) {
|
||||
if (key.startsWith('npm_')) delete env[key]
|
||||
if (key.startsWith('npm_')) delete env[key];
|
||||
}
|
||||
env.INIT_CWD = exeDir
|
||||
env.PWD = exeDir
|
||||
return env
|
||||
env.INIT_CWD = exeDir;
|
||||
env.PWD = exeDir;
|
||||
return env;
|
||||
}
|
||||
|
||||
function getExePath() {
|
||||
// 开发模式:__dirname = .vite/build,往上两级到项目根
|
||||
// 打包模式:用 process.resourcesPath
|
||||
// 根据平台和架构确定可执行文件名及目录
|
||||
const isWin = process.platform === 'win32';
|
||||
const exeName = isWin ? 'opencode.exe' : 'opencode';
|
||||
|
||||
if (app.isPackaged) {
|
||||
return path.join(process.resourcesPath, 'opencode.exe')
|
||||
return path.join(process.resourcesPath, exeName);
|
||||
}
|
||||
return path.join(__dirname, '..', '..', 'resources', 'windows', 'x64', 'opencode.exe')
|
||||
|
||||
// 开发模式:__dirname = .vite/build,往上两级到项目根
|
||||
const platformDir = process.platform === 'darwin' ? 'darwin' : 'windows';
|
||||
const archDir = process.arch === 'arm64' ? 'arm64' : 'x64';
|
||||
return path.join(__dirname, '..', '..', 'resources', platformDir, archDir, exeName);
|
||||
}
|
||||
|
||||
async function startOpencode() {
|
||||
if (opencodeProcess) return buildInfo()
|
||||
if (opencodeStarting) return opencodeStarting
|
||||
if (opencodeProcess) return buildInfo();
|
||||
if (opencodeStarting) return opencodeStarting;
|
||||
|
||||
opencodeStarting = (async () => {
|
||||
const exePath = getExePath()
|
||||
console.log('[opencode] exe path:', exePath)
|
||||
const exeDir = path.dirname(exePath)
|
||||
await fs.promises.access(exePath, fs.constants.F_OK)
|
||||
const exePath = getExePath();
|
||||
console.log('[opencode] exe path:', exePath);
|
||||
const exeDir = path.dirname(exePath);
|
||||
await fs.promises.access(exePath, fs.constants.F_OK);
|
||||
|
||||
opencodePort = await resolvePort()
|
||||
// macOS/Linux 需要确保可执行权限
|
||||
if (process.platform !== 'win32') {
|
||||
await fs.promises.chmod(exePath, 0o755);
|
||||
}
|
||||
|
||||
opencodePort = await resolvePort();
|
||||
opencodeProcess = spawn(exePath, ['serve', '--port', String(opencodePort)], {
|
||||
cwd: exeDir,
|
||||
windowsHide: true,
|
||||
env: buildEnv(exeDir),
|
||||
})
|
||||
...(process.platform === 'win32' ? { windowsHide: true } : {}),
|
||||
});
|
||||
|
||||
opencodeProcess.stdout?.on('data', (d) => console.log(`[opencode] ${d.toString().trim()}`))
|
||||
opencodeProcess.stderr?.on('data', (d) => console.error(`[opencode error] ${d.toString().trim()}`))
|
||||
opencodeProcess.once('error', (e) => console.error('[opencode spawn error]', e))
|
||||
opencodeProcess.stdout?.on('data', (d) => console.log(`[opencode] ${d.toString().trim()}`));
|
||||
opencodeProcess.stderr?.on('data', (d) => console.error(`[opencode error] ${d.toString().trim()}`));
|
||||
opencodeProcess.once('error', (e) => console.error('[opencode spawn error]', e));
|
||||
opencodeProcess.once('close', (code) => {
|
||||
console.log(`[opencode exited] code=${code}`)
|
||||
opencodeProcess = null
|
||||
opencodePort = null
|
||||
opencodeStarting = null
|
||||
})
|
||||
console.log(`[opencode exited] code=${code}`);
|
||||
opencodeProcess = null;
|
||||
opencodePort = null;
|
||||
opencodeStarting = null;
|
||||
});
|
||||
|
||||
await waitForReady(opencodePort)
|
||||
return buildInfo()
|
||||
})()
|
||||
await waitForReady(opencodePort);
|
||||
return buildInfo();
|
||||
})();
|
||||
|
||||
try {
|
||||
return await opencodeStarting
|
||||
return await opencodeStarting;
|
||||
} catch (err) {
|
||||
opencodeProcess?.kill()
|
||||
opencodeProcess = null
|
||||
opencodePort = null
|
||||
opencodeStarting = null
|
||||
throw err
|
||||
opencodeProcess?.kill();
|
||||
opencodeProcess = null;
|
||||
opencodePort = null;
|
||||
opencodeStarting = null;
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
function stopOpencode() {
|
||||
opencodeProcess?.kill()
|
||||
opencodeProcess = null
|
||||
opencodePort = null
|
||||
opencodeStarting = null
|
||||
opencodeProcess?.kill();
|
||||
opencodeProcess = null;
|
||||
opencodePort = null;
|
||||
opencodeStarting = null;
|
||||
}
|
||||
|
||||
// ========== IPC Handlers ==========
|
||||
function registerIpcHandlers() {
|
||||
ipcMain.handle('opencode:start', () => startOpencode())
|
||||
ipcMain.handle('opencode:start', () => startOpencode());
|
||||
ipcMain.handle('opencode:stop', () => {
|
||||
stopOpencode()
|
||||
return buildInfo()
|
||||
})
|
||||
ipcMain.handle('opencode:info', () => buildInfo())
|
||||
ipcMain.handle('opencode:port', () => opencodePort)
|
||||
stopOpencode();
|
||||
return buildInfo();
|
||||
});
|
||||
ipcMain.handle('opencode:info', () => buildInfo());
|
||||
ipcMain.handle('opencode:port', () => opencodePort);
|
||||
|
||||
ipcMain.handle('opencode:health', async () => {
|
||||
if (!opencodePort) throw new Error('OpenCode 服务未启动')
|
||||
const res = await fetch(`http://127.0.0.1:${opencodePort}/global/health`)
|
||||
if (!res.ok) throw new Error(`健康检查失败: ${res.status}`)
|
||||
return res.json()
|
||||
})
|
||||
if (!opencodePort) throw new Error('OpenCode 服务未启动');
|
||||
const res = await fetch(`http://127.0.0.1:${opencodePort}/global/health`);
|
||||
if (!res.ok) throw new Error(`健康检查失败: ${res.status}`);
|
||||
return res.json();
|
||||
});
|
||||
|
||||
ipcMain.handle('opencode:session:create', async (_e, data) => {
|
||||
if (!opencodePort) throw new Error('OpenCode 服务未启动')
|
||||
if (!opencodePort) throw new Error('OpenCode 服务未启动');
|
||||
const res = await fetch(`http://127.0.0.1:${opencodePort}/session`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data ?? {}),
|
||||
})
|
||||
if (!res.ok) throw new Error(`创建会话失败: ${res.status}`)
|
||||
return res.json()
|
||||
})
|
||||
});
|
||||
if (!res.ok) throw new Error(`创建会话失败: ${res.status}`);
|
||||
return res.json();
|
||||
});
|
||||
|
||||
ipcMain.handle('opencode:session:send', async (_e, sessionId, text) => {
|
||||
if (!opencodePort) throw new Error('OpenCode 服务未启动')
|
||||
if (!opencodePort) throw new Error('OpenCode 服务未启动');
|
||||
const res = await fetch(`http://127.0.0.1:${opencodePort}/session/${sessionId}/message`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ parts: [{ type: 'text', text }] }),
|
||||
})
|
||||
if (!res.ok) throw new Error(`发送消息失败: ${res.status}`)
|
||||
return res.json()
|
||||
})
|
||||
});
|
||||
if (!res.ok) throw new Error(`发送消息失败: ${res.status}`);
|
||||
return res.json();
|
||||
});
|
||||
|
||||
// ========== Bonjour 设备发现 IPC ==========
|
||||
ipcMain.handle('get-devices', () => {
|
||||
return Array.from(devices.values())
|
||||
})
|
||||
ipcMain.handle('opencode:session:prompt-async', async (_e, sessionId, text) => {
|
||||
if (!opencodePort) throw new Error('OpenCode 服务未启动');
|
||||
const res = await fetch(`http://127.0.0.1:${opencodePort}/session/${sessionId}/prompt_async`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ parts: [{ type: 'text', text }] }),
|
||||
});
|
||||
if (!res.ok) throw new Error(`发送消息失败: ${res.status}`);
|
||||
// 204 No Content,无需解析响应体
|
||||
return true;
|
||||
});
|
||||
|
||||
ipcMain.on('refresh-devices', () => {
|
||||
// 重新扫描逻辑
|
||||
// const allWindows = BrowserWindow.getAllWindows();
|
||||
// const mainWindow = allWindows[0]; // 假设第一个是主窗口
|
||||
// Bonjour
|
||||
ipcMain.handle('bonjour:get-services', () => getDiscoveredServices());
|
||||
|
||||
// 停止并重新开始搜索
|
||||
// 注意:这里需要访问 browser 实例,我们可以在 registerIpcHandlers 外层定义或在应用启动时初始化
|
||||
if (global.bonjourBrowser) {
|
||||
global.bonjourBrowser.stop()
|
||||
devices.clear()
|
||||
global.bonjourBrowser.start()
|
||||
// 窗口控制
|
||||
ipcMain.on('window:minimize', (event) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender);
|
||||
win?.minimize();
|
||||
});
|
||||
ipcMain.on('window:maximize', (event) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender);
|
||||
if (win?.isMaximized()) {
|
||||
win.unmaximize();
|
||||
} else {
|
||||
win?.maximize();
|
||||
}
|
||||
})
|
||||
});
|
||||
ipcMain.on('window:close', (event) => {
|
||||
const win = BrowserWindow.fromWebContents(event.sender);
|
||||
win?.close();
|
||||
});
|
||||
}
|
||||
|
||||
// ========== 窗口 ==========
|
||||
const createWindow = () => {
|
||||
// 移除菜单栏,保留窗口边框和原生按钮
|
||||
Menu.setApplicationMenu(null);
|
||||
|
||||
const mainWindow = new BrowserWindow({
|
||||
width: 1280,
|
||||
height: 800,
|
||||
width: 1600,
|
||||
height: 1000,
|
||||
minWidth: 800,
|
||||
minHeight: 600,
|
||||
webPreferences: {
|
||||
@@ -201,69 +259,45 @@ const createWindow = () => {
|
||||
contextIsolation: true,
|
||||
nodeIntegration: false,
|
||||
},
|
||||
titleBarStyle: 'hiddenInset',
|
||||
frame: true,
|
||||
show: false,
|
||||
})
|
||||
});
|
||||
|
||||
mainWindow.once('ready-to-show', () => mainWindow.show())
|
||||
|
||||
// Setup Bonjour discovery
|
||||
const browser = bonjour.find({})
|
||||
global.bonjourBrowser = browser
|
||||
|
||||
browser.on('up', (service) => {
|
||||
console.log('Found device:', service.name)
|
||||
const device = {
|
||||
id: service.fqdn,
|
||||
name: service.name,
|
||||
type: service.type,
|
||||
port: service.port,
|
||||
addresses: service.addresses,
|
||||
txt: service.txt,
|
||||
host: service.host,
|
||||
referer: service.referer,
|
||||
}
|
||||
devices.set(device.id, device)
|
||||
mainWindow.webContents.send('device-found', device)
|
||||
})
|
||||
|
||||
browser.on('down', (service) => {
|
||||
console.log('Lost device:', service.name)
|
||||
devices.delete(service.fqdn)
|
||||
mainWindow.webContents.send('device-lost', service.fqdn)
|
||||
})
|
||||
mainWindow.webContents.openDevTools();
|
||||
mainWindow.once('ready-to-show', () => mainWindow.show());
|
||||
|
||||
mainWindow.webContents.setWindowOpenHandler(({ url }) => {
|
||||
shell.openExternal(url)
|
||||
return { action: 'deny' }
|
||||
})
|
||||
shell.openExternal(url);
|
||||
return { action: 'deny' };
|
||||
});
|
||||
|
||||
// 注入 baseUrl,让渲染进程的 getBaseUrl() 能拿到正确端口
|
||||
mainWindow.webContents.on('did-finish-load', () => {
|
||||
if (opencodePort) {
|
||||
mainWindow.webContents.executeJavaScript(`window.__opencodeBaseUrl = 'http://127.0.0.1:${opencodePort}'`)
|
||||
mainWindow.webContents.executeJavaScript(`window.__opencodeBaseUrl = 'http://127.0.0.1:${opencodePort}'`);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
|
||||
mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL)
|
||||
mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
|
||||
} else {
|
||||
mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`))
|
||||
mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
app.whenReady().then(() => {
|
||||
registerIpcHandlers()
|
||||
createWindow()
|
||||
registerIpcHandlers();
|
||||
startBonjourDiscovery();
|
||||
createWindow();
|
||||
|
||||
app.on('activate', () => {
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow()
|
||||
})
|
||||
})
|
||||
if (BrowserWindow.getAllWindows().length === 0) createWindow();
|
||||
});
|
||||
});
|
||||
|
||||
app.on('window-all-closed', () => {
|
||||
stopOpencode()
|
||||
if (process.platform !== 'darwin') app.quit()
|
||||
})
|
||||
stopOpencode();
|
||||
if (process.platform !== 'darwin') app.quit();
|
||||
});
|
||||
|
||||
app.on('before-quit', () => stopOpencode())
|
||||
app.on('before-quit', () => stopOpencode());
|
||||
|
||||
@@ -1,17 +1,11 @@
|
||||
import { contextBridge, ipcRenderer } from 'electron'
|
||||
import { contextBridge, ipcRenderer } from 'electron';
|
||||
|
||||
contextBridge.exposeInMainWorld('electronAPI', {
|
||||
// 通用 IPC(保留原有)
|
||||
send: (channel, data) => ipcRenderer.send(channel, data),
|
||||
on: (channel, callback) => ipcRenderer.on(channel, (_event, ...args) => callback(...args)),
|
||||
invoke: (channel, data) => ipcRenderer.invoke(channel, data),
|
||||
|
||||
// Bonjour 设备发现 API
|
||||
onDeviceFound: (callback) => ipcRenderer.on('device-found', (_event, value) => callback(value)),
|
||||
onDeviceLost: (callback) => ipcRenderer.on('device-lost', (_event, value) => callback(value)),
|
||||
getDevices: () => ipcRenderer.invoke('get-devices'),
|
||||
refreshDevices: () => ipcRenderer.send('refresh-devices'),
|
||||
})
|
||||
});
|
||||
|
||||
contextBridge.exposeInMainWorld('opencode', {
|
||||
start: () => ipcRenderer.invoke('opencode:start'),
|
||||
@@ -21,4 +15,14 @@ contextBridge.exposeInMainWorld('opencode', {
|
||||
health: () => ipcRenderer.invoke('opencode:health'),
|
||||
createSession: (data) => ipcRenderer.invoke('opencode:session:create', data),
|
||||
sendMessage: (sessionId, text) => ipcRenderer.invoke('opencode:session:send', sessionId, text),
|
||||
})
|
||||
promptAsync: (sessionId, text) => ipcRenderer.invoke('opencode:session:prompt-async', sessionId, text),
|
||||
});
|
||||
|
||||
contextBridge.exposeInMainWorld('bonjour', {
|
||||
getServices: () => ipcRenderer.invoke('bonjour:get-services'),
|
||||
onServicesUpdated: (callback) => {
|
||||
const listener = (_event, services) => callback(services);
|
||||
ipcRenderer.on('bonjour:services-updated', listener);
|
||||
return () => ipcRenderer.removeListener('bonjour:services-updated', listener);
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
/**
|
||||
* This file will automatically be loaded by vite and run in the "renderer" context.
|
||||
* To learn more about the differences between the "main" and the "renderer" context in
|
||||
* Electron, visit:
|
||||
*
|
||||
* https://electronjs.org/docs/tutorial/process-model
|
||||
*
|
||||
* By default, Node.js integration in this file is disabled. When enabling Node.js integration
|
||||
* in a renderer process, please be aware of potential security implications. You can read
|
||||
* more about security risks here:
|
||||
*
|
||||
* https://electronjs.org/docs/tutorial/security
|
||||
*
|
||||
* To enable Node.js integration in this file, open up `main.js` and enable the `nodeIntegration`
|
||||
* flag:
|
||||
*
|
||||
* ```
|
||||
* // Create the browser window.
|
||||
* mainWindow = new BrowserWindow({
|
||||
* width: 800,
|
||||
* height: 600,
|
||||
* webPreferences: {
|
||||
* nodeIntegration: true
|
||||
* }
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
|
||||
import './index.css'
|
||||
|
||||
console.log('👋 This message is being logged by "renderer.js", included via Vite')
|
||||
@@ -1,7 +1,298 @@
|
||||
<template>
|
||||
<router-view />
|
||||
<div class="flex flex-col h-screen w-screen overflow-hidden">
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
<!-- 侧边栏 -->
|
||||
<aside :class="['flex flex-col bg-[#EEEFF2] border-r border-gray-200 transition-all duration-300 no-drag', appStore.collapsed ? 'w-16' : 'w-[244px]']">
|
||||
<!-- 自定义菜单 -->
|
||||
<nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
|
||||
<div
|
||||
v-for="(item, index) in menus"
|
||||
:key="index"
|
||||
:class="[
|
||||
'flex items-center justify-between cursor-pointer transition-all duration-200 ease-out group relative overflow-hidden',
|
||||
appStore.collapsed ? 'justify-center px-0 py-3 mx-auto w-11 rounded-xl' : 'w-[216px] h-[37px] rounded-[10px] pl-3 pr-[146px] py-0 mx-auto',
|
||||
$route.path === item.index ? 'bg-[#DEE0E4] text-gray-900' : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700',
|
||||
]"
|
||||
@click="handleMenuClick(item)"
|
||||
>
|
||||
<!-- 图标 -->
|
||||
<div
|
||||
:class="[
|
||||
'flex items-center justify-center shrink-0 transition-transform duration-200',
|
||||
appStore.collapsed ? 'w-6 h-6' : 'w-5 h-5',
|
||||
$route.path === item.index ? 'scale-110' : 'group-hover:scale-105',
|
||||
]"
|
||||
>
|
||||
<LucideIcon :name="item.icon" :size="appStore.collapsed ? 20 : 18" :class="['transition-colors duration-200']" />
|
||||
</div>
|
||||
|
||||
<!-- 文字 -->
|
||||
<span v-show="!appStore.collapsed" class="ml-3 text-sm font-medium whitespace-nowrap transition-all duration-200">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
</div>
|
||||
<el-divider></el-divider>
|
||||
<div class="w-54 h-8 text-sm mx-3 py-4 flex items-center" style="color: #8a9097">历史记录</div>
|
||||
<div
|
||||
v-for="(item, index) in historyStore.historyItems"
|
||||
:key="index"
|
||||
:class="[
|
||||
'flex items-center w-[216px] h-[37px] justify-between rounded-[10px] pl-3 pr-3 mx-auto cursor-pointer transition-all duration-200',
|
||||
route.params.id === item.id ? 'bg-[#DEE0E4] text-gray-900' : 'text-gray-500 hover:bg-gray-50 hover:text-gray-700',
|
||||
]"
|
||||
@click="onHistoryClick(item)"
|
||||
:title="item.name"
|
||||
>
|
||||
<span class="text-sm font-medium whitespace-nowrap truncate flex-1">{{ item.name }}</span>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 服务状态栏 -->
|
||||
<div class="flex items-center justify-between px-3 py-2 border-t border-gray-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="w-2 h-2 rounded-full"
|
||||
:class="{
|
||||
'bg-green-500': appStore.serviceStatus === appStore.SERVICE_STATUS.RUNNING,
|
||||
'bg-yellow-500': appStore.serviceStatus === appStore.SERVICE_STATUS.CONNECTING,
|
||||
'bg-red-500': appStore.serviceStatus === appStore.SERVICE_STATUS.FAILED,
|
||||
'bg-gray-400': appStore.serviceStatus === appStore.SERVICE_STATUS.IDLE,
|
||||
}"
|
||||
/>
|
||||
<span class="text-xs text-gray-600">
|
||||
{{ statusLabel }}
|
||||
</span>
|
||||
</div>
|
||||
<el-button
|
||||
v-if="appStore.serviceStatus !== appStore.SERVICE_STATUS.RUNNING"
|
||||
size="small"
|
||||
type="primary"
|
||||
:loading="appStore.serviceStatus === appStore.SERVICE_STATUS.CONNECTING"
|
||||
@click="startService"
|
||||
>
|
||||
{{ appStore.serviceStatus === appStore.SERVICE_STATUS.FAILED ? '重新启动' : '启动' }}
|
||||
</el-button>
|
||||
<el-button v-else size="small" type="danger" plain @click="stopService"> 停止 </el-button>
|
||||
</div>
|
||||
|
||||
<!-- 用户区域 -->
|
||||
<div class="flex items-center justify-between p-3 border-t border-gray-200">
|
||||
<div class="flex items-center">
|
||||
<el-avatar :size="32" />
|
||||
<div v-show="!appStore.collapsed" class="ml-3">
|
||||
<div class="text-sm font-medium">123</div>
|
||||
<div class="text-xs text-gray-500">12321</div>
|
||||
</div>
|
||||
</div>
|
||||
<LucideIcon v-show="!appStore.collapsed" name="bolt" color="#808080" size="18"></LucideIcon>
|
||||
</div>
|
||||
|
||||
<!-- <!– 折叠按钮 –>-->
|
||||
<!-- <div class="p-3 border-t border-gray-200">-->
|
||||
<!-- <el-button :icon="appStore.collapsed ? Expand : Fold" circle size="small" @click="appStore.toggleSidebar" />-->
|
||||
<!-- </div>-->
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="flex flex-col flex-1 overflow-hidden">
|
||||
<!-- 页面内容 -->
|
||||
<main class="flex-1 overflow-hidden p-6">
|
||||
<div class="h-full overflow-auto">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// App 根组件,路由视图入口
|
||||
import { ref, onMounted, onUnmounted, computed, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useAppStore } from '@/stores/app';
|
||||
import { useHistoryStore } from '@/stores/history';
|
||||
import { House, Monitor, Expand, Fold, ChatDotRound, Search, Collection, Clock } from '@element-plus/icons-vue';
|
||||
import router from '@/router';
|
||||
import axios from 'axios';
|
||||
|
||||
const route = useRoute();
|
||||
const appStore = useAppStore();
|
||||
const historyStore = useHistoryStore();
|
||||
|
||||
const statusLabel = computed(() => {
|
||||
switch (appStore.serviceStatus) {
|
||||
case appStore.SERVICE_STATUS.CONNECTING:
|
||||
return '连接中';
|
||||
case appStore.SERVICE_STATUS.RUNNING:
|
||||
return '服务运行中';
|
||||
case appStore.SERVICE_STATUS.FAILED:
|
||||
return '连接失败';
|
||||
case appStore.SERVICE_STATUS.IDLE:
|
||||
default:
|
||||
return '服务未启动';
|
||||
}
|
||||
});
|
||||
|
||||
const menus = ref([
|
||||
{ name: '新对话', index: '/', icon: 'plus' },
|
||||
{ name: '知识空间', index: '/knowledge', icon: 'book' },
|
||||
// { name: 'opencode对话', index: '/chat', icon: 'bot' },
|
||||
{ name: '发现设备', index: '/bonjour', icon: 'server' },
|
||||
{ name: '测试页', index: '/test', icon: 'flask-conical' },
|
||||
]);
|
||||
|
||||
// 处理菜单点击
|
||||
function handleMenuClick(item) {
|
||||
if (item.index) {
|
||||
router.push(item.index);
|
||||
}
|
||||
}
|
||||
|
||||
const isServiceRunning = ref(false);
|
||||
let checkInterval = null;
|
||||
let retryCount = 0;
|
||||
const MAX_RETRY = 3;
|
||||
const RETRY_DELAY = 3000;
|
||||
|
||||
// 查询历史会话列表
|
||||
async function loadHistorySessions() {
|
||||
await historyStore.loadHistorySessions();
|
||||
}
|
||||
|
||||
// 点击历史会话,跳转到对话页面并加载该会话
|
||||
async function onHistoryClick(item) {
|
||||
try {
|
||||
const baseUrl = window.__opencodeBaseUrl || 'http://127.0.0.1:4096';
|
||||
const detailUrl = `${baseUrl}/session/${item.id}/message`;
|
||||
const response = await axios.get(detailUrl);
|
||||
console.log('[onHistoryClick] 会话详情数据:', response.data);
|
||||
} catch (err) {
|
||||
console.error('[onHistoryClick] 获取会话详情失败:', err);
|
||||
}
|
||||
// 跳转到对话页面
|
||||
router.push({
|
||||
name: 'Chat',
|
||||
params: { id: item.id },
|
||||
});
|
||||
}
|
||||
|
||||
// 启动服务
|
||||
async function startService() {
|
||||
if (appStore.serviceStatus === appStore.SERVICE_STATUS.CONNECTING) return;
|
||||
|
||||
appStore.serviceStatus = appStore.SERVICE_STATUS.CONNECTING;
|
||||
retryCount = 0;
|
||||
doStartService();
|
||||
}
|
||||
|
||||
async function doStartService() {
|
||||
try {
|
||||
const info = await window.opencode.start();
|
||||
if (info.running) {
|
||||
isServiceRunning.value = true;
|
||||
appStore.serviceStatus = appStore.SERVICE_STATUS.RUNNING;
|
||||
// 更新 baseUrl 供 http 层使用
|
||||
if (info.url) window.__opencodeBaseUrl = info.url;
|
||||
// 服务启动成功后,初始化 SSE 连接
|
||||
appStore.initSSE();
|
||||
retryCount = 0;
|
||||
} else {
|
||||
handleRetry();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('启动服务失败:', err);
|
||||
handleRetry();
|
||||
}
|
||||
}
|
||||
|
||||
function handleRetry() {
|
||||
if (retryCount < MAX_RETRY) {
|
||||
retryCount++;
|
||||
console.log(`[App.vue] 启动失败,第 ${retryCount} 次重连中...`);
|
||||
setTimeout(doStartService, RETRY_DELAY);
|
||||
} else {
|
||||
appStore.serviceStatus = appStore.SERVICE_STATUS.FAILED;
|
||||
isServiceRunning.value = false;
|
||||
console.error(`[App.vue] 重连 ${MAX_RETRY} 次后依然失败,停止重连。`);
|
||||
}
|
||||
}
|
||||
|
||||
// 停止服务
|
||||
async function stopService() {
|
||||
try {
|
||||
await window.opencode.stop();
|
||||
isServiceRunning.value = false;
|
||||
appStore.serviceStatus = appStore.SERVICE_STATUS.IDLE;
|
||||
historyStore.clearHistory();
|
||||
appStore.closeSSE();
|
||||
} catch (err) {
|
||||
console.error('停止服务失败:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// 检查服务状态
|
||||
async function checkServiceStatus() {
|
||||
// 如果正在重连中,则不进行状态更新,避免干扰
|
||||
if (appStore.serviceStatus === appStore.SERVICE_STATUS.CONNECTING) return;
|
||||
|
||||
try {
|
||||
const info = await window.opencode?.info();
|
||||
const isRunning = info?.running || false;
|
||||
|
||||
// 更新服务状态
|
||||
isServiceRunning.value = isRunning;
|
||||
if (isRunning) {
|
||||
appStore.serviceStatus = appStore.SERVICE_STATUS.RUNNING;
|
||||
// 服务运行中,更新 baseUrl 并加载历史记录
|
||||
if (info?.url) {
|
||||
window.__opencodeBaseUrl = info.url;
|
||||
}
|
||||
// 如果历史记录为空,则加载
|
||||
if (historyStore.historyItems.length === 0) {
|
||||
loadHistorySessions();
|
||||
}
|
||||
// 确保 SSE 连接已建立
|
||||
if (!appStore.sseConnected) {
|
||||
appStore.initSSE();
|
||||
}
|
||||
} else {
|
||||
// 只有当前是运行中才变更为未启动,防止覆盖 FAILED 状态
|
||||
if (appStore.serviceStatus === appStore.SERVICE_STATUS.RUNNING) {
|
||||
appStore.serviceStatus = appStore.SERVICE_STATUS.IDLE;
|
||||
}
|
||||
// 服务未运行,清空历史记录
|
||||
historyStore.clearHistory();
|
||||
}
|
||||
} catch (err) {
|
||||
// 获取状态失败,视为服务断开
|
||||
isServiceRunning.value = false;
|
||||
if (appStore.serviceStatus === appStore.SERVICE_STATUS.RUNNING) {
|
||||
appStore.serviceStatus = appStore.SERVICE_STATUS.IDLE;
|
||||
}
|
||||
historyStore.clearHistory();
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 初始检查
|
||||
checkServiceStatus();
|
||||
// 定期检查服务状态(每2秒)
|
||||
checkInterval = setInterval(checkServiceStatus, 2000);
|
||||
|
||||
// 监听启动服务的指令
|
||||
watch(
|
||||
() => appStore.startServiceFlag,
|
||||
(newVal) => {
|
||||
if (newVal > 0) {
|
||||
startService();
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (checkInterval) {
|
||||
clearInterval(checkInterval);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
147
src/renderer/components/LoginDialog.vue
Normal file
147
src/renderer/components/LoginDialog.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" :show-close="false" width="680px" border-radius="16px" :close-on-click-modal="true" class="login-dialog">
|
||||
<div class="flex h-[420px] rounded-2xl overflow-hidden">
|
||||
<!-- 左侧表单区 -->
|
||||
<div class="flex flex-col items-center justify-center w-1/2 px-10 py-8 bg-white">
|
||||
<!-- Logo 占位,后续替换为真实图片 -->
|
||||
<div class="mb-4">
|
||||
<div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center text-2xl">🤖</div>
|
||||
</div>
|
||||
|
||||
<p class="text-base font-semibold text-gray-700 mb-6">登录后体验更多功能</p>
|
||||
|
||||
<el-form :model="form" :rules="rules" ref="formRef" class="w-full" @submit.prevent="handleLogin">
|
||||
<el-form-item prop="sparkDevice">
|
||||
<el-select v-model="form.sparkDevice" placeholder="请选择设备" size="large" class="w-full" :no-data-text="'暂未发现设备,请先扫描'">
|
||||
<el-option
|
||||
v-for="device in sparkStore.devices"
|
||||
:key="device.name"
|
||||
:label="`${device.name} (${device.addresses?.[0]}:${device.port})`"
|
||||
:value="device.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="form.username" placeholder="请输入账号" :prefix-icon="User" size="large" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="form.password" type="password" placeholder="请输入密码" show-password size="large" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="w-full flex justify-end mb-4">
|
||||
<span class="text-xs text-gray-400 cursor-pointer hover:text-green-500">忘记密码?</span>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
class="w-full !bg-black !border-black !rounded-full !text-white font-semibold"
|
||||
:loading="loading"
|
||||
@click="handleLogin"
|
||||
>
|
||||
登录
|
||||
</el-button>
|
||||
|
||||
<div class="mt-4 flex items-center gap-2 text-xs text-gray-400">
|
||||
<el-checkbox v-model="agreed" size="small" />
|
||||
<span>请先阅读<a href="#" class="text-green-500">用户协议与隐私政策</a></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧品牌区 -->
|
||||
<div class="flex flex-col items-center justify-between w-1/2 bg-[#5DC98A] px-8 py-8 rounded-r-2xl">
|
||||
<div class="self-end text-white text-2xl font-bold tracking-widest">玄鉴</div>
|
||||
<div class="flex flex-col items-center gap-3 text-white text-center">
|
||||
<p class="text-xl font-semibold">我是AI工作助手</p>
|
||||
<p class="text-sm opacity-80">能独立思考、自主执行的工作伙伴</p>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { User } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useSparkStore } from '@/stores/spark';
|
||||
import { loginAction } from '@/http/api.js';
|
||||
|
||||
const sparkStore = useSparkStore();
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['update:modelValue', 'login-success']);
|
||||
|
||||
const visible = ref(props.modelValue);
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(val) => (visible.value = val)
|
||||
);
|
||||
watch(visible, (val) => emit('update:modelValue', val));
|
||||
|
||||
const formRef = ref(null);
|
||||
const loading = ref(false);
|
||||
const agreed = ref(false);
|
||||
|
||||
const form = ref({
|
||||
sparkDevice: sparkStore.selectedDevice?.name || '',
|
||||
username: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
const rules = {
|
||||
sparkDevice: [{ required: true, message: '请选择设备', trigger: 'change' }],
|
||||
username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
|
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||||
};
|
||||
|
||||
async function handleLogin() {
|
||||
if (!agreed.value) {
|
||||
ElMessage.warning('请先阅读并同意用户协议与隐私政策');
|
||||
return;
|
||||
}
|
||||
await formRef.value?.validate(async (valid) => {
|
||||
if (!valid) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const device = sparkStore.devices.find((d) => d.name === form.value.sparkDevice);
|
||||
if (device) sparkStore.selectDevice(device);
|
||||
|
||||
const url = sparkStore.selectedDeviceUrl;
|
||||
console.log('[Login] spark device:', device);
|
||||
console.log('[Login] target url:', url);
|
||||
|
||||
await loginAction({ email: form.value.username, password: form.value.password }, url);
|
||||
ElMessage.success(`登录成功 | ${url ?? '未选择设备'}`);
|
||||
emit('login-success', { username: form.value.username, device });
|
||||
visible.value = false;
|
||||
} catch (err) {
|
||||
ElMessage.error('登录失败,请重试');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-dialog) {
|
||||
border-radius: 16px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
:deep(.el-dialog__header) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.el-dialog__body) {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
30
src/renderer/components/base/AppIcon.vue
Normal file
30
src/renderer/components/base/AppIcon.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<component
|
||||
:is="icon"
|
||||
:size="size"
|
||||
:color="color"
|
||||
:stroke-width="strokeWidth"
|
||||
class="lucide-icon"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
icon: {
|
||||
type: Object, // 注意:这里接收的是 Lucide 图标组件对象
|
||||
required: true,
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 24,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'currentColor',
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
default: 2,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
42
src/renderer/components/base/LucideIcon.vue
Normal file
42
src/renderer/components/base/LucideIcon.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import * as LucideIcons from 'lucide-vue-next';
|
||||
|
||||
const props = defineProps({
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 24,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'currentColor',
|
||||
},
|
||||
strokeWidth: {
|
||||
type: [Number, String],
|
||||
default: 2,
|
||||
},
|
||||
});
|
||||
|
||||
const icon = computed(() => {
|
||||
// Lucide 图标通常是 PascalCase,用户输入可能是 kebab-case
|
||||
const pascalName = props.name
|
||||
.split('-')
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join('');
|
||||
|
||||
return LucideIcons[pascalName] || LucideIcons[props.name] || null;
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="icon" v-if="icon" :size="size" :color="color" :stroke-width="strokeWidth" class="lucide-icon" />
|
||||
<span
|
||||
v-else
|
||||
class="lucide-icon-fallback"
|
||||
:style="{ width: size + 'px', height: size + 'px', display: 'inline-block' }"
|
||||
></span>
|
||||
</template>
|
||||
@@ -1,20 +1,26 @@
|
||||
import { getAction, postAction, deleteAction } from './manage.js'
|
||||
import url, { getBaseUrl } from './url.js'
|
||||
import { getAction, postAction, deleteAction } from './manage.js';
|
||||
import url, { getBaseUrl } from './url.js';
|
||||
import { encryptPassword } from '@/utils/crypto.js';
|
||||
|
||||
// 健康检查
|
||||
export const getHealthAction = () => getAction(url.health)
|
||||
export const getHealthAction = () => getAction(url.health);
|
||||
|
||||
// 用户登录
|
||||
export const loginAction = (data, sparkBaseUrl) =>
|
||||
postAction(url.user.login, { email: data.email, password: encryptPassword(data.password) }, {}, sparkBaseUrl);
|
||||
|
||||
// 会话
|
||||
export const createSessionAction = (data) => postAction(url.session.create, data)
|
||||
export const getSessionAction = (id) => getAction(url.session.detail(id))
|
||||
export const listSessionsAction = () => getAction(url.session.list)
|
||||
export const deleteSessionAction = (id) => deleteAction(url.session.delete(id))
|
||||
export const createSessionAction = (data) => postAction(url.session.create, data);
|
||||
export const getSessionAction = (id) => getAction(url.session.detail(id));
|
||||
export const listSessionsAction = () => getAction(url.session.list);
|
||||
export const deleteSessionAction = (id) => deleteAction(url.session.delete(id));
|
||||
|
||||
// 消息
|
||||
export const sendMessageAction = (sessionId, data) => postAction(url.message.send(sessionId), data)
|
||||
export const listMessagesAction = (sessionId) => getAction(url.message.list(sessionId))
|
||||
export const sendMessageAction = (sessionId, data) => postAction(url.message.send(sessionId), data);
|
||||
export const promptAsyncAction = (sessionId, data) => postAction(url.message.promptAsync(sessionId), data);
|
||||
export const listMessagesAction = (sessionId) => getAction(url.message.list(sessionId));
|
||||
|
||||
// SSE 事件流(返回 EventSource 实例,由调用方管理生命周期)
|
||||
export function createEventSource() {
|
||||
return new EventSource(`${getBaseUrl()}${url.event}`)
|
||||
return new EventSource(`${getBaseUrl()}${url.event}`);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import axios from 'axios'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getBaseUrl } from './url.js'
|
||||
import axios from 'axios';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { getBaseUrl } from './url.js';
|
||||
|
||||
// baseURL 由主进程动态分配端口,通过 getBaseUrl() 运行时获取
|
||||
const axiosInstance = axios.create({
|
||||
@@ -10,131 +10,142 @@ const axiosInstance = axios.create({
|
||||
'Content-Type': 'application/json;charset=utf-8',
|
||||
},
|
||||
responseType: 'json',
|
||||
})
|
||||
});
|
||||
|
||||
// 每次请求前动态更新 baseURL,确保服务启动后端口变更能被感知
|
||||
axiosInstance.interceptors.request.use((config) => {
|
||||
config.baseURL = getBaseUrl();
|
||||
return config;
|
||||
});
|
||||
|
||||
// 请求拦截
|
||||
axiosInstance.interceptors.request.use((config) => {
|
||||
config.headers = config.headers || {}
|
||||
let Authorization = localStorage.getItem('Authorization')
|
||||
config.headers = config.headers || {};
|
||||
let Authorization = localStorage.getItem('Authorization');
|
||||
// 优先使用本地持久化的 Authorization 头(完整值)
|
||||
config.headers.Authorization = Authorization || ''
|
||||
config.headers.Authorization = Authorization || '';
|
||||
|
||||
if ('get' === config?.method?.toLowerCase()) {
|
||||
if (config.params) {
|
||||
config.params.timestamp = new Date().getTime()
|
||||
config.params.timestamp = new Date().getTime();
|
||||
}
|
||||
}
|
||||
// 移除敏感信息日志
|
||||
// console.log(config, 'axios request.use config')
|
||||
return config
|
||||
})
|
||||
return config;
|
||||
});
|
||||
axiosInstance.interceptors.response.use(
|
||||
(response) => {
|
||||
// 移除敏感信息日志
|
||||
// console.log(response, 'response response')
|
||||
// 若请求为二进制下载(blob),直接透传响应,交由调用方自行处理
|
||||
try {
|
||||
const isBlob = response?.config?.responseType === 'blob'
|
||||
const isBlob = response?.config?.responseType === 'blob';
|
||||
if (isBlob) {
|
||||
// 仍然尝试持久化可能返回的 Authorization
|
||||
const respHeaders = response?.headers || {}
|
||||
const newAuthorization = respHeaders['authorization'] || respHeaders['Authorization']
|
||||
const respHeaders = response?.headers || {};
|
||||
const newAuthorization = respHeaders['authorization'] || respHeaders['Authorization'];
|
||||
if (newAuthorization && typeof newAuthorization === 'string') {
|
||||
localStorage.setItem('Authorization', newAuthorization)
|
||||
localStorage.setItem('Authorization', newAuthorization);
|
||||
}
|
||||
return response
|
||||
return response;
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
console.log(e);
|
||||
// 忽略检查失败
|
||||
}
|
||||
// 如果响应头里带有 Authorization,则使用 useStorage 持久化到 localStorage,
|
||||
// 以便后续请求自动携带该请求头
|
||||
try {
|
||||
const respHeaders = response?.headers || {}
|
||||
const newAuthorization = respHeaders['authorization'] || respHeaders['Authorization']
|
||||
const respHeaders = response?.headers || {};
|
||||
const newAuthorization = respHeaders['authorization'] || respHeaders['Authorization'];
|
||||
if (newAuthorization && typeof newAuthorization === 'string') {
|
||||
localStorage.setItem('Authorization', newAuthorization)
|
||||
localStorage.setItem('Authorization', newAuthorization);
|
||||
}
|
||||
} catch (e) {
|
||||
// 忽略持久化失败,避免影响主流程
|
||||
console.warn('持久化 Authorization 失败:', e)
|
||||
console.warn('持久化 Authorization 失败:', e);
|
||||
}
|
||||
// 204 No Content(如 prompt_async)直接视为成功
|
||||
if (response.status === 204) {
|
||||
return Promise.resolve(null);
|
||||
}
|
||||
|
||||
if (response.status === 200) {
|
||||
const res = response.data || {}
|
||||
const code = res.code
|
||||
const msg = res.message || res.msg
|
||||
const res = response.data || {};
|
||||
const code = res.code;
|
||||
const msg = res.message || res.msg;
|
||||
|
||||
// 明确的 200 成功,但需要按业务码再判断
|
||||
if (code === 0) {
|
||||
// 业务成功
|
||||
return Promise.resolve(res)
|
||||
return Promise.resolve(res);
|
||||
}
|
||||
|
||||
// 特殊业务码处理
|
||||
if (code === 401) {
|
||||
// 清除持久化的 Authorization,避免后续使用失效的头部
|
||||
localStorage.removeItem('Authorization')
|
||||
sessionStorage.removeItem('Token')
|
||||
localStorage.removeItem('Authorization');
|
||||
sessionStorage.removeItem('Token');
|
||||
// 延迟跳转,确保消息显示
|
||||
setTimeout(() => {
|
||||
window.location.href = '/#/login'
|
||||
}, 500)
|
||||
return Promise.reject(new Error('认证失败,请重新登录'))
|
||||
window.location.href = '/#/login';
|
||||
}, 500);
|
||||
return Promise.reject(new Error('认证失败,请重新登录'));
|
||||
}
|
||||
|
||||
// 其余非 0 的业务码统一拦截提示,但不在这里显示 ElMessage
|
||||
// 交由业务层使用 await-to-js 处理
|
||||
return Promise.reject(new Error(msg || '请求失败'))
|
||||
return Promise.reject(new Error(msg || '请求失败'));
|
||||
}
|
||||
|
||||
// 非 2xx 按错误分支处理(通常会进入 error 拦截器)
|
||||
return Promise.reject(new Error('请求失败'))
|
||||
return Promise.reject(new Error('请求失败'));
|
||||
},
|
||||
(error) => {
|
||||
console.error('请求错误:', error)
|
||||
console.error('请求错误:', error);
|
||||
|
||||
if (error.response) {
|
||||
// 服务器响应错误
|
||||
const status = error.response.status
|
||||
const message = error.response.data?.message || error.response.data?.msg || '请求失败'
|
||||
const status = error.response.status;
|
||||
const message = error.response.data?.message || error.response.data?.msg || '请求失败';
|
||||
|
||||
switch (status) {
|
||||
case 400:
|
||||
ElMessage.error(`无效的请求参数:${message}`)
|
||||
break
|
||||
ElMessage.error(`无效的请求参数:${message}`);
|
||||
break;
|
||||
case 401:
|
||||
// 清除持久化的 Authorization,避免后续使用失效的头部
|
||||
localStorage.removeItem('Authorization')
|
||||
ElMessage.error('未授权访问或登录已过期,请重新登录')
|
||||
break
|
||||
localStorage.removeItem('Authorization');
|
||||
ElMessage.error('未授权访问或登录已过期,请重新登录');
|
||||
break;
|
||||
case 403:
|
||||
ElMessage.error('访问被拒绝')
|
||||
break
|
||||
ElMessage.error('访问被拒绝');
|
||||
break;
|
||||
case 404:
|
||||
ElMessage.error('资源未找到')
|
||||
break
|
||||
ElMessage.error('资源未找到');
|
||||
break;
|
||||
case 500:
|
||||
ElMessage.error('服务器内部错误')
|
||||
break
|
||||
ElMessage.error('服务器内部错误');
|
||||
break;
|
||||
case 502:
|
||||
case 503:
|
||||
case 504:
|
||||
ElMessage.error('服务暂时不可用,请稍后重试')
|
||||
break
|
||||
ElMessage.error('服务暂时不可用,请稍后重试');
|
||||
break;
|
||||
default:
|
||||
ElMessage.error(`请求失败: ${message}`)
|
||||
ElMessage.error(`请求失败: ${message}`);
|
||||
}
|
||||
} else if (error.request) {
|
||||
// 网络错误
|
||||
ElMessage.error('网络连接失败,请检查网络连接')
|
||||
ElMessage.error('网络连接失败,请检查网络连接');
|
||||
} else {
|
||||
// 其他错误
|
||||
ElMessage.error('请求发送失败')
|
||||
ElMessage.error('请求发送失败');
|
||||
}
|
||||
|
||||
return Promise.reject(error)
|
||||
},
|
||||
)
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default axiosInstance
|
||||
export default axiosInstance;
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import request from './index.js'
|
||||
import request from './index.js';
|
||||
|
||||
export function getAction(url, params) {
|
||||
return request({ url, method: 'GET', params })
|
||||
return request({ url, method: 'GET', params });
|
||||
}
|
||||
|
||||
export function postAction(url, data, headers = {}) {
|
||||
return request({ url, method: 'POST', data, headers })
|
||||
export function postAction(url, data, headers = {}, baseURL) {
|
||||
return request({ url, method: 'POST', data, headers, ...(baseURL ? { baseURL } : {}) });
|
||||
}
|
||||
|
||||
export function putAction(url, data) {
|
||||
return request({ url, method: 'PUT', data })
|
||||
return request({ url, method: 'PUT', data });
|
||||
}
|
||||
|
||||
export function deleteAction(url, params) {
|
||||
return request({ url, method: 'DELETE', params })
|
||||
return request({ url, method: 'DELETE', params });
|
||||
}
|
||||
|
||||
189
src/renderer/http/sse.js
Normal file
189
src/renderer/http/sse.js
Normal file
@@ -0,0 +1,189 @@
|
||||
import { createEventSource } from './api.js';
|
||||
|
||||
/**
|
||||
* 全局 SSE 管理器
|
||||
* 负责管理 EventSource 连接,并将事件分发到注册的监听器
|
||||
*/
|
||||
class SSEManager {
|
||||
constructor() {
|
||||
this.eventSource = null;
|
||||
this.listeners = new Map();
|
||||
this.isConnected = false;
|
||||
this.eventBuffer = []; // 用于存储连接前产生的事件
|
||||
this.maxBufferSize = 1000;
|
||||
}
|
||||
|
||||
/**
|
||||
* 建立 SSE 连接
|
||||
*/
|
||||
connect() {
|
||||
if (this.eventSource) {
|
||||
console.log('[SSEManager] 连接已存在,跳过');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('[SSEManager] 建立 SSE 连接...');
|
||||
this.eventSource = createEventSource();
|
||||
this.isConnected = true;
|
||||
|
||||
this.eventSource.onmessage = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.data);
|
||||
console.log('[SSEManager] 收到事件:', data.type, data);
|
||||
this._dispatchEvent(data);
|
||||
} catch (err) {
|
||||
console.error('[SSEManager] 解析事件数据失败:', err);
|
||||
}
|
||||
};
|
||||
|
||||
this.eventSource.onerror = (err) => {
|
||||
console.error('[SSEManager] SSE 连接错误:', err);
|
||||
this.isConnected = false;
|
||||
// 触发错误监听器
|
||||
this._dispatchEvent({ type: 'sse.error', error: err });
|
||||
};
|
||||
|
||||
this.eventSource.onopen = () => {
|
||||
console.log('[SSEManager] SSE 连接已打开');
|
||||
this.isConnected = true;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭 SSE 连接
|
||||
*/
|
||||
disconnect() {
|
||||
if (this.eventSource) {
|
||||
console.log('[SSEManager] 关闭 SSE 连接');
|
||||
this.eventSource.close();
|
||||
this.eventSource = null;
|
||||
this.isConnected = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 重新连接 SSE
|
||||
*/
|
||||
reconnect() {
|
||||
this.disconnect();
|
||||
this.connect();
|
||||
}
|
||||
|
||||
/**
|
||||
* 注册事件监听器
|
||||
* @param {string} eventType - 事件类型,如 'message.part.updated'
|
||||
* @param {Function} callback - 回调函数
|
||||
* @returns {Function} 取消监听的函数
|
||||
*/
|
||||
on(eventType, callback) {
|
||||
if (!this.listeners.has(eventType)) {
|
||||
this.listeners.set(eventType, new Set());
|
||||
}
|
||||
this.listeners.get(eventType).add(callback);
|
||||
|
||||
// 返回取消监听的函数
|
||||
return () => {
|
||||
this.off(eventType, callback);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除事件监听器
|
||||
* @param {string} eventType - 事件类型
|
||||
* @param {Function} callback - 回调函数
|
||||
*/
|
||||
off(eventType, callback) {
|
||||
if (this.listeners.has(eventType)) {
|
||||
this.listeners.get(eventType).delete(callback);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 分发事件到所有注册的监听器
|
||||
* @param {Object} data - 事件数据
|
||||
*/
|
||||
_dispatchEvent(data) {
|
||||
const eventType = data.type;
|
||||
|
||||
// 存储到缓冲区
|
||||
this._bufferEvent(data);
|
||||
|
||||
// 分发到特定类型的监听器
|
||||
if (this.listeners.has(eventType)) {
|
||||
this.listeners.get(eventType).forEach((callback) => {
|
||||
try {
|
||||
callback(data);
|
||||
} catch (err) {
|
||||
console.error(`[SSEManager] 监听器执行失败 (${eventType}):`, err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 分发到通配符监听器 (*)
|
||||
if (this.listeners.has('*')) {
|
||||
this.listeners.get('*').forEach((callback) => {
|
||||
try {
|
||||
callback(data);
|
||||
} catch (err) {
|
||||
console.error('[SSEManager] 通配符监听器执行失败:', err);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 将事件存储到缓冲区
|
||||
* @param {Object} data - 事件数据
|
||||
*/
|
||||
_bufferEvent(data) {
|
||||
this.eventBuffer.push({
|
||||
data,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
|
||||
// 限制缓冲区大小
|
||||
if (this.eventBuffer.length > this.maxBufferSize) {
|
||||
this.eventBuffer.shift();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取缓冲区中的事件
|
||||
* @param {string} eventType - 可选的事件类型过滤
|
||||
* @param {number} since - 可选的时间戳,获取此时间之后的事件
|
||||
* @returns {Array} 事件列表
|
||||
*/
|
||||
getBufferedEvents(eventType, since) {
|
||||
let events = this.eventBuffer;
|
||||
|
||||
if (since) {
|
||||
events = events.filter((e) => e.timestamp > since);
|
||||
}
|
||||
|
||||
if (eventType) {
|
||||
events = events.filter((e) => e.data.type === eventType);
|
||||
}
|
||||
|
||||
return events.map((e) => e.data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空事件缓冲区
|
||||
*/
|
||||
clearBuffer() {
|
||||
this.eventBuffer = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取连接状态
|
||||
* @returns {boolean}
|
||||
*/
|
||||
getConnectionStatus() {
|
||||
return this.isConnected;
|
||||
}
|
||||
}
|
||||
|
||||
// 导出单例实例
|
||||
export const sseManager = new SSEManager();
|
||||
|
||||
export default sseManager;
|
||||
@@ -1,6 +1,6 @@
|
||||
// OpenCode 服务地址由主进程动态分配端口,通过 getBaseUrl() 获取
|
||||
export function getBaseUrl() {
|
||||
return window.__opencodeBaseUrl || 'http://127.0.0.1:4096'
|
||||
return window.__opencodeBaseUrl || 'http://127.0.0.1:4096';
|
||||
}
|
||||
|
||||
const url = {
|
||||
@@ -18,11 +18,17 @@ const url = {
|
||||
// 消息
|
||||
message: {
|
||||
send: (sessionId) => `/session/${sessionId}/message`,
|
||||
promptAsync: (sessionId) => `/session/${sessionId}/prompt_async`,
|
||||
list: (sessionId) => `/session/${sessionId}/message`,
|
||||
},
|
||||
|
||||
// 用户
|
||||
user: {
|
||||
login: '/v1/user/login',
|
||||
},
|
||||
|
||||
// SSE 事件流
|
||||
event: '/event',
|
||||
}
|
||||
};
|
||||
|
||||
export default url
|
||||
export default url;
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<div class="flex h-screen w-screen overflow-hidden bg-gray-50">
|
||||
<!-- 侧边栏 -->
|
||||
<aside :class="['flex flex-col bg-white border-r border-gray-200 transition-all duration-300', appStore.collapsed ? 'w-16' : 'w-56']">
|
||||
<!-- Logo -->
|
||||
<div class="flex items-center h-14 px-4 border-b border-gray-200 shrink-0">
|
||||
<el-icon class="text-blue-500 text-xl shrink-0"><Monitor /></el-icon>
|
||||
<span v-if="!appStore.collapsed" class="ml-2 font-semibold text-gray-800 truncate">
|
||||
{{ appStore.title }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 导航菜单 -->
|
||||
<el-menu :default-active="$route.path" :collapse="appStore.collapsed" :collapse-transition="false" router class="flex-1 border-none">
|
||||
<el-menu-item index="/">
|
||||
<el-icon><House /></el-icon>
|
||||
<template #title>首页</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/chat">
|
||||
<el-icon><ChatDotRound /></el-icon>
|
||||
<template #title>OpenCode 对话</template>
|
||||
</el-menu-item>
|
||||
<el-menu-item index="/devices">
|
||||
<el-icon><Monitor /></el-icon>
|
||||
<template #title>发现设备</template>
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
|
||||
<!-- 折叠按钮 -->
|
||||
<div class="p-3 border-t border-gray-200">
|
||||
<el-button :icon="appStore.collapsed ? Expand : Fold" circle size="small" @click="appStore.toggleSidebar" />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="flex flex-col flex-1 overflow-hidden">
|
||||
<!-- 顶部栏 -->
|
||||
<header class="flex items-center justify-between h-14 px-6 bg-white border-b border-gray-200 shrink-0">
|
||||
<h1 class="text-base font-medium text-gray-700">{{ currentTitle }}</h1>
|
||||
<div class="flex items-center gap-2">
|
||||
<el-avatar :size="32" class="bg-blue-500">U</el-avatar>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 页面内容 -->
|
||||
<main class="flex-1 overflow-hidden p-6">
|
||||
<div class="h-full overflow-auto">
|
||||
<router-view />
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
import { House, Monitor, Expand, Fold, ChatDotRound } from '@element-plus/icons-vue'
|
||||
|
||||
const route = useRoute()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const currentTitle = computed(() => route.meta?.title || appStore.title)
|
||||
</script>
|
||||
@@ -1,21 +1,27 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
|
||||
import 'element-plus/dist/index.css'
|
||||
import router from './router'
|
||||
import App from './App.vue'
|
||||
import './style.css'
|
||||
|
||||
const app = createApp(App)
|
||||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import ElementPlus from 'element-plus';
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
||||
import 'element-plus/dist/index.css';
|
||||
import router from './router';
|
||||
import App from './App.vue';
|
||||
import './styles/index.css';
|
||||
import AppIcon from './components/base/AppIcon.vue';
|
||||
import LucideIcon from './components/base/LucideIcon.vue';
|
||||
|
||||
const app = createApp(App);
|
||||
// 注册所有 Element Plus 图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component)
|
||||
app.component(key, component);
|
||||
}
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
app.use(ElementPlus)
|
||||
// 注册自定义图标组件
|
||||
app.component('AppIcon', AppIcon);
|
||||
app.component('LucideIcon', LucideIcon);
|
||||
|
||||
app.mount('#app')
|
||||
const pinia = createPinia();
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
app.use(ElementPlus);
|
||||
|
||||
app.mount('#app');
|
||||
|
||||
@@ -1,36 +1,36 @@
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import { createRouter, createWebHashHistory } from 'vue-router';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@/layouts/DefaultLayout.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'Home',
|
||||
component: () => import('@/views/home/HomeView.vue'),
|
||||
meta: { title: '首页' },
|
||||
},
|
||||
{
|
||||
path: '/chat',
|
||||
name: 'Chat',
|
||||
component: () => import('@/views/chat/ChatView.vue'),
|
||||
meta: { title: 'OpenCode 对话' },
|
||||
},
|
||||
{
|
||||
path: '/devices',
|
||||
name: 'Devices',
|
||||
component: () => import('@/views/devices/DevicesView.vue'),
|
||||
meta: { title: '发现设备' },
|
||||
},
|
||||
],
|
||||
name: 'Home',
|
||||
component: () => import('@/views/home/HomeView.vue'),
|
||||
meta: { title: '首页' },
|
||||
},
|
||||
]
|
||||
{
|
||||
path: '/chat/:id?',
|
||||
name: 'Chat',
|
||||
component: () => import('@/views/chat/ChatView.vue'),
|
||||
meta: { title: 'OpenCode 对话' },
|
||||
},
|
||||
{
|
||||
path: '/bonjour',
|
||||
name: 'Bonjour',
|
||||
component: () => import('@/views/bonjour/BonjourView.vue'),
|
||||
meta: { title: '发现设备' },
|
||||
},
|
||||
{
|
||||
path: '/test',
|
||||
name: 'Test',
|
||||
component: () => import('@/views/test/TestView.vue'),
|
||||
meta: { title: '测试页' },
|
||||
},
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
// Electron 中使用 hash 模式
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
})
|
||||
});
|
||||
|
||||
export default router
|
||||
export default router;
|
||||
|
||||
@@ -1,13 +1,157 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref, computed } from 'vue';
|
||||
import { sseManager } from '@/http/sse.js';
|
||||
|
||||
export const useAppStore = defineStore('app', () => {
|
||||
const title = ref('My App')
|
||||
const collapsed = ref(false)
|
||||
// 服务运行状态常量
|
||||
const SERVICE_STATUS = {
|
||||
IDLE: 'idle', // 未启动
|
||||
CONNECTING: 'connecting', // 连接中
|
||||
RUNNING: 'running', // 服务运行中
|
||||
FAILED: 'failed', // 连接失败
|
||||
};
|
||||
|
||||
function toggleSidebar() {
|
||||
collapsed.value = !collapsed.value
|
||||
const title = ref('智聚超脑');
|
||||
const collapsed = ref(false);
|
||||
const serviceStatus = ref(SERVICE_STATUS.IDLE);
|
||||
const startServiceFlag = ref(0); // 用于触发外部启动服务的标记
|
||||
|
||||
function triggerStartService() {
|
||||
startServiceFlag.value++;
|
||||
}
|
||||
|
||||
return { title, collapsed, toggleSidebar }
|
||||
})
|
||||
// SSE 相关状态
|
||||
const sseConnected = ref(false);
|
||||
const currentSessionEvents = ref([]);
|
||||
const assistantMessageIds = ref(new Set());
|
||||
|
||||
function toggleSidebar() {
|
||||
collapsed.value = !collapsed.value;
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化 SSE 连接
|
||||
* 在连接 OpenCode 成功后调用
|
||||
*/
|
||||
function initSSE() {
|
||||
if (sseConnected.value) {
|
||||
console.log('[AppStore] SSE 已连接,跳过初始化');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('[AppStore] 初始化 SSE 连接...');
|
||||
|
||||
// 监听连接状态
|
||||
sseManager.on('sse.error', () => {
|
||||
sseConnected.value = false;
|
||||
});
|
||||
|
||||
// 监听消息部分更新事件
|
||||
sseManager.on('message.part.updated', (data) => {
|
||||
const props = data.properties || {};
|
||||
const part = props.part;
|
||||
if (!part || part.type !== 'text') return;
|
||||
|
||||
currentSessionEvents.value.push({
|
||||
type: 'message.part.updated',
|
||||
data: props,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
|
||||
// 监听消息更新事件
|
||||
sseManager.on('message.updated', (data) => {
|
||||
const props = data.properties || {};
|
||||
const info = props.info;
|
||||
if (info && info.role === 'assistant') {
|
||||
assistantMessageIds.value.add(info.id);
|
||||
}
|
||||
|
||||
currentSessionEvents.value.push({
|
||||
type: 'message.updated',
|
||||
data: props,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
|
||||
// 监听会话空闲事件
|
||||
sseManager.on('session.idle', (data) => {
|
||||
const props = data.properties || {};
|
||||
currentSessionEvents.value.push({
|
||||
type: 'session.idle',
|
||||
data: props,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
});
|
||||
|
||||
// 建立连接
|
||||
sseManager.connect();
|
||||
sseConnected.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 关闭 SSE 连接
|
||||
*/
|
||||
function closeSSE() {
|
||||
sseManager.disconnect();
|
||||
sseConnected.value = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* 重新连接 SSE
|
||||
*/
|
||||
function reconnectSSE() {
|
||||
sseManager.reconnect();
|
||||
sseConnected.value = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空当前会话的事件
|
||||
*/
|
||||
function clearSessionEvents() {
|
||||
currentSessionEvents.value = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查消息 ID 是否是助手消息
|
||||
*/
|
||||
function isAssistantMessage(messageId) {
|
||||
return assistantMessageIds.value.has(messageId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加助手消息 ID
|
||||
*/
|
||||
function addAssistantMessageId(messageId) {
|
||||
assistantMessageIds.value.add(messageId);
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空助手消息 ID 集合
|
||||
*/
|
||||
function clearAssistantMessageIds() {
|
||||
assistantMessageIds.value.clear();
|
||||
}
|
||||
|
||||
return {
|
||||
title,
|
||||
collapsed,
|
||||
toggleSidebar,
|
||||
// SSE
|
||||
sseConnected,
|
||||
currentSessionEvents,
|
||||
assistantMessageIds,
|
||||
initSSE,
|
||||
closeSSE,
|
||||
reconnectSSE,
|
||||
clearSessionEvents,
|
||||
isAssistantMessage,
|
||||
addAssistantMessageId,
|
||||
clearAssistantMessageIds,
|
||||
// 服务运行状态
|
||||
serviceStatus,
|
||||
SERVICE_STATUS,
|
||||
startServiceFlag,
|
||||
triggerStartService,
|
||||
};
|
||||
});
|
||||
|
||||
104
src/renderer/stores/history.js
Normal file
104
src/renderer/stores/history.js
Normal file
@@ -0,0 +1,104 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref } from 'vue';
|
||||
import axios from 'axios';
|
||||
|
||||
export const useHistoryStore = defineStore('history', () => {
|
||||
// State
|
||||
const historyItems = ref([]);
|
||||
const isLoading = ref(false);
|
||||
|
||||
// Getters
|
||||
const getHistoryItems = () => historyItems.value;
|
||||
const getHistoryById = (id) => historyItems.value.find((item) => item.id === id);
|
||||
|
||||
// Actions
|
||||
/**
|
||||
* 加载历史会话列表
|
||||
*/
|
||||
async function loadHistorySessions() {
|
||||
console.log('[historyStore] 开始加载历史会话...');
|
||||
isLoading.value = true;
|
||||
try {
|
||||
const baseUrl = window.__opencodeBaseUrl || 'http://127.0.0.1:4096';
|
||||
console.log('[historyStore] baseUrl:', baseUrl);
|
||||
const response = await axios.get(`${baseUrl}/session`);
|
||||
console.log('[historyStore] 响应数据:', response.data);
|
||||
const sessions = response.data || [];
|
||||
console.log('[historyStore] 会话数量:', sessions.length);
|
||||
|
||||
// 将会话列表转换为历史记录格式
|
||||
historyItems.value = sessions.map((session) => ({
|
||||
id: session.id,
|
||||
name: session.title || `会话 ${session.slug || session.id.slice(0, 8)}...`,
|
||||
slug: session.slug,
|
||||
created: session.time?.created,
|
||||
updated: session.time?.updated,
|
||||
}));
|
||||
console.log('[historyStore] 转换后的历史记录:', historyItems.value);
|
||||
} catch (err) {
|
||||
console.error('[historyStore] 加载历史会话失败:', err);
|
||||
historyItems.value = [];
|
||||
} finally {
|
||||
isLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空历史记录
|
||||
*/
|
||||
function clearHistory() {
|
||||
historyItems.value = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* 添加单个历史记录项(用于新创建的会话)
|
||||
*/
|
||||
function addHistoryItem(item) {
|
||||
// 检查是否已存在
|
||||
const exists = historyItems.value.find((h) => h.id === item.id);
|
||||
if (!exists) {
|
||||
historyItems.value.unshift({
|
||||
id: item.id,
|
||||
name: item.title || `会话 ${item.slug || item.id.slice(0, 8)}...`,
|
||||
slug: item.slug,
|
||||
created: item.time?.created,
|
||||
updated: item.time?.updated,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建新会话
|
||||
* @param {string} title - 会话标题
|
||||
* @returns {Promise<Object>} 创建的会话对象
|
||||
*/
|
||||
async function createSession(title) {
|
||||
console.log('[historyStore] 创建新会话,title:', title);
|
||||
try {
|
||||
const session = await window.opencode.createSession({ title });
|
||||
console.log('[historyStore] 创建会话成功:', session);
|
||||
|
||||
// 添加到历史记录
|
||||
addHistoryItem(session);
|
||||
|
||||
return session;
|
||||
} catch (err) {
|
||||
console.error('[historyStore] 创建会话失败:', err);
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
// State
|
||||
historyItems,
|
||||
isLoading,
|
||||
// Getters
|
||||
getHistoryItems,
|
||||
getHistoryById,
|
||||
// Actions
|
||||
loadHistorySessions,
|
||||
clearHistory,
|
||||
addHistoryItem,
|
||||
createSession,
|
||||
};
|
||||
});
|
||||
55
src/renderer/stores/spark.js
Normal file
55
src/renderer/stores/spark.js
Normal file
@@ -0,0 +1,55 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
const STORAGE_KEY = 'selected_spark_device';
|
||||
|
||||
export const useSparkStore = defineStore('spark', () => {
|
||||
// 运行时发现的设备列表(动态,不持久化)
|
||||
const devices = ref([]);
|
||||
|
||||
// 当前选中的设备,启动时从 localStorage 恢复
|
||||
const selectedDevice = ref(JSON.parse(localStorage.getItem(STORAGE_KEY) || 'null'));
|
||||
|
||||
// 选中设备的完整 URL,优先取 IPv4 地址
|
||||
const selectedDeviceUrl = computed(() => {
|
||||
if (!selectedDevice.value) return null;
|
||||
const { addresses, port, referer } = selectedDevice.value;
|
||||
// 优先找 IPv4(不含冒号的地址)
|
||||
const ipv4 = addresses?.find((a) => !a.includes(':'));
|
||||
// 兜底用 referer.address(mDNS 响应来源 IP)
|
||||
const ip = ipv4 || referer?.address;
|
||||
return ip ? `http://${ip}:${port}` : null;
|
||||
});
|
||||
|
||||
// 更新设备列表(由 BonjourView 调用)
|
||||
function setDevices(list) {
|
||||
devices.value = list;
|
||||
|
||||
// 如果之前选中的设备还在列表里,用最新数据刷新它
|
||||
if (selectedDevice.value) {
|
||||
const fresh = list.find((d) => d.name === selectedDevice.value.name);
|
||||
if (fresh) selectDevice(fresh);
|
||||
}
|
||||
}
|
||||
|
||||
// 选中某台设备,并持久化到 localStorage
|
||||
function selectDevice(device) {
|
||||
selectedDevice.value = device;
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(device));
|
||||
}
|
||||
|
||||
// 清除选中
|
||||
function clearSelectedDevice() {
|
||||
selectedDevice.value = null;
|
||||
localStorage.removeItem(STORAGE_KEY);
|
||||
}
|
||||
|
||||
return {
|
||||
devices,
|
||||
selectedDevice,
|
||||
selectedDeviceUrl,
|
||||
setDevices,
|
||||
selectDevice,
|
||||
clearSelectedDevice,
|
||||
};
|
||||
});
|
||||
@@ -1,5 +1,3 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
/* =====================
|
||||
shadcn CSS 变量 (light)
|
||||
===================== */
|
||||
@@ -111,6 +109,15 @@ body,
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
a,
|
||||
.no-drag {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
3
src/renderer/styles/index.css
Normal file
3
src/renderer/styles/index.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
25
src/renderer/utils/crypto.js
Normal file
25
src/renderer/utils/crypto.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import { Base64 } from 'js-base64';
|
||||
import JSEncrypt from 'jsencrypt';
|
||||
|
||||
// RSA 公钥,替换为实际公钥内容
|
||||
const RSA_PUBLIC_KEY = `-----BEGIN PUBLIC KEY-----
|
||||
MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArq9XTUSeYr2+N1h3Afl/
|
||||
z8Dse/2yD0ZGrKwx+EEEcdsBLca9Ynmx3nIB5obmLlSfmskLpBo0UACBmB5rEjBp
|
||||
2Q2f3AG3Hjd4B+gNCG6BDaawuDlgANIhGnaTLrIqWrrcm4EMzJOnAOI1fgzJRsOO
|
||||
UEfaS318Eq9OVO3apEyCCt0lOQK6PuksduOjVxtltDav+guVAA068NrPYmRNabVK
|
||||
RNLJpL8w4D44sfth5RvZ3q9t+6RTArpEtc5sh5ChzvqPOzKGMXW83C95TxmXqpbK
|
||||
6olN4RevSfVjEAgCydH6HN6OhtOQEcnrU97r9H0iZOWwbw3pVrZiUkuRD1R56Wzs
|
||||
2wIDAQAB
|
||||
-----END PUBLIC KEY-----`;
|
||||
|
||||
/**
|
||||
* 对密码进行加密:Base64 编码 → RSA 加密
|
||||
* @param {string} password 原始密码
|
||||
* @returns {string|false} 加密后的密文,失败返回 false
|
||||
*/
|
||||
export function encryptPassword(password) {
|
||||
const base64Pwd = Base64.encode(password);
|
||||
const encrypt = new JSEncrypt();
|
||||
encrypt.setPublicKey(RSA_PUBLIC_KEY);
|
||||
return encrypt.encrypt(base64Pwd);
|
||||
}
|
||||
143
src/renderer/views/bonjour/BonjourView.vue
Normal file
143
src/renderer/views/bonjour/BonjourView.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import { Search, Refresh } from '@element-plus/icons-vue';
|
||||
import { useSparkStore } from '@/stores/spark';
|
||||
|
||||
const sparkStore = useSparkStore();
|
||||
const services = ref([]);
|
||||
const loading = ref(false);
|
||||
let unsubscribe = null;
|
||||
|
||||
const filterServices = (list) => list.filter((s) => s.type === 'polygence-spark');
|
||||
|
||||
const fetchServices = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const all = await window.bonjour.getServices();
|
||||
const filtered = filterServices(all);
|
||||
services.value = filtered;
|
||||
sparkStore.setDevices(filtered);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch bonjour services:', error);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchServices();
|
||||
unsubscribe = window.bonjour.onServicesUpdated((updatedServices) => {
|
||||
const filtered = filterServices(updatedServices);
|
||||
services.value = filtered;
|
||||
sparkStore.setDevices(filtered);
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (unsubscribe) unsubscribe();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bonjour-container">
|
||||
<div class="header">
|
||||
<div class="title-section">
|
||||
<h2 class="title">发现设备</h2>
|
||||
<p class="subtitle">局域网内已发现的 mDNS / Bonjour 设备</p>
|
||||
</div>
|
||||
<el-button :icon="Refresh" :loading="loading" @click="fetchServices" circle />
|
||||
</div>
|
||||
|
||||
<el-table :data="services" style="width: 100%" v-loading="loading">
|
||||
<el-table-column prop="name" label="名称" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="type" label="类型" width="100" />
|
||||
<el-table-column prop="protocol" label="协议" width="80" />
|
||||
<el-table-column prop="port" label="端口" width="80" />
|
||||
<el-table-column label="地址" min-width="180">
|
||||
<template #default="scope">
|
||||
<div v-for="addr in scope.row.addresses" :key="addr" class="address-tag">
|
||||
{{ addr }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="TXT 记录" min-width="200">
|
||||
<template #default="scope">
|
||||
<div v-if="Object.keys(scope.row.txt || {}).length > 0">
|
||||
<div v-for="(val, key) in scope.row.txt" :key="key" class="txt-record">
|
||||
<span class="txt-key">{{ key }}:</span> {{ val }}
|
||||
</div>
|
||||
</div>
|
||||
<span v-else class="empty-txt">-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div v-if="services.length === 0 && !loading" class="empty-state">
|
||||
<el-empty description="暂未发现设备" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bonjour-container {
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin: 4px 0 0;
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.address-tag {
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
background-color: var(--el-fill-color-light);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.txt-record {
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.txt-key {
|
||||
font-weight: bold;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.empty-txt {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
:deep(.el-table) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +1,5 @@
|
||||
<template>
|
||||
<div class="chat-page">
|
||||
<!-- 服务状态栏 -->
|
||||
<div class="status-bar">
|
||||
<div class="status-indicator">
|
||||
<span class="dot" :class="serviceStatus" />
|
||||
<span class="status-text">{{ statusText }}</span>
|
||||
</div>
|
||||
<div class="status-actions">
|
||||
<el-button v-if="!isRunning" size="small" type="primary" :loading="isStarting" @click="startService"> 启动服务 </el-button>
|
||||
<el-button v-else size="small" type="danger" plain @click="stopService"> 停止服务 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<div ref="messagesRef" class="messages">
|
||||
<div v-if="messages.length === 0" class="empty-hint">
|
||||
@@ -20,6 +8,19 @@
|
||||
</div>
|
||||
<div v-for="msg in messages" :key="msg.id" class="bubble-wrap" :class="msg.role">
|
||||
<div class="bubble">
|
||||
<!-- 推理过程(仅助手消息显示) -->
|
||||
<div v-if="msg.parts?.reasoning?.length > 0" class="reasoning-section">
|
||||
<div class="reasoning-header" @click="msg.showReasoning = !msg.showReasoning">
|
||||
<el-icon :size="14"><ArrowRight v-if="!msg.showReasoning" /><ArrowDown v-else /></el-icon>
|
||||
<span>思考过程</span>
|
||||
</div>
|
||||
<div v-show="msg.showReasoning" class="reasoning-content">
|
||||
<div v-for="(r, idx) in msg.parts.reasoning" :key="idx" class="reasoning-item">
|
||||
{{ r.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 文本内容 -->
|
||||
<pre class="bubble-text">{{ msg.text }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
@@ -32,158 +33,264 @@
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 5 }"
|
||||
placeholder="输入消息,Ctrl+Enter 发送"
|
||||
:disabled="!isRunning || isSending"
|
||||
:disabled="isSending"
|
||||
resize="none"
|
||||
@keydown.ctrl.enter.prevent="send" />
|
||||
<el-button type="primary" :disabled="!isRunning || isSending || !inputText.trim()" :loading="isSending" @click="send"> 发送 </el-button>
|
||||
@keydown.ctrl.enter.prevent="send"
|
||||
/>
|
||||
<el-button type="primary" :disabled="isSending || !inputText.trim()" :loading="isSending" @click="send"> 发送 </el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onUnmounted, nextTick } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ChatDotRound } from '@element-plus/icons-vue'
|
||||
import { createEventSource } from '@/http/api.js'
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { ChatDotRound, ArrowRight, ArrowDown } from '@element-plus/icons-vue';
|
||||
import { useAppStore } from '@/stores/app.js';
|
||||
import { sseManager } from '@/http/sse.js';
|
||||
import axios from 'axios';
|
||||
|
||||
const isRunning = ref(false)
|
||||
const isStarting = ref(false)
|
||||
const isSending = ref(false)
|
||||
const inputText = ref('')
|
||||
const messages = ref([])
|
||||
const messagesRef = ref(null)
|
||||
const currentSessionId = ref(null)
|
||||
let eventSource = null
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const isSending = ref(false);
|
||||
const inputText = ref('');
|
||||
const messages = ref([]);
|
||||
const messagesRef = ref(null);
|
||||
const currentSessionId = ref(null);
|
||||
const localAssistantMessageIds = new Set();
|
||||
let unsubscribeCallbacks = [];
|
||||
|
||||
const serviceStatus = computed(() => {
|
||||
if (isStarting.value) return 'starting'
|
||||
return isRunning.value ? 'running' : 'stopped'
|
||||
})
|
||||
// 从路由参数中获取 sessionId
|
||||
const routeSessionId = computed(() => route.params.id || route.query.sessionId);
|
||||
|
||||
const statusText = computed(() => {
|
||||
if (isStarting.value) return '正在启动...'
|
||||
return isRunning.value ? '服务运行中' : '服务未启动'
|
||||
})
|
||||
// 加载历史消息
|
||||
async function loadHistoryMessages(sessionId) {
|
||||
if (!sessionId) return;
|
||||
try {
|
||||
const baseUrl = window.__opencodeBaseUrl || 'http://127.0.0.1:4096';
|
||||
const requestUrl = `${baseUrl}/session/${sessionId}/message`;
|
||||
console.log('[loadHistoryMessages] ========================================');
|
||||
console.log('[loadHistoryMessages] 开始获取消息,sessionId:', sessionId);
|
||||
console.log('[loadHistoryMessages] 请求URL:', requestUrl);
|
||||
|
||||
const response = await axios.get(requestUrl);
|
||||
const messagesData = response.data || [];
|
||||
|
||||
console.log('[loadHistoryMessages] 获取成功!消息数量:', messagesData.length);
|
||||
console.log('[loadHistoryMessages] 原始消息数据 (JSON):', JSON.stringify(messagesData, null, 2));
|
||||
console.log('[loadHistoryMessages] ========================================');
|
||||
|
||||
// 清空当前消息
|
||||
messages.value = [];
|
||||
localAssistantMessageIds.clear();
|
||||
appStore.clearAssistantMessageIds();
|
||||
|
||||
// 处理历史消息
|
||||
messagesData.forEach((item) => {
|
||||
const { info, parts } = item;
|
||||
if (!info || !parts) return;
|
||||
|
||||
// 按 type 分类存储 parts
|
||||
const partsByType = {
|
||||
text: [],
|
||||
reasoning: [],
|
||||
'step-start': [],
|
||||
'step-finish': [],
|
||||
// 可以在这里添加更多 type
|
||||
};
|
||||
|
||||
parts.forEach((part) => {
|
||||
if (partsByType.hasOwnProperty(part.type)) {
|
||||
partsByType[part.type].push(part);
|
||||
} else {
|
||||
// 未识别的 type 统一放到 others
|
||||
if (!partsByType.others) partsByType.others = [];
|
||||
partsByType.others.push(part);
|
||||
}
|
||||
});
|
||||
|
||||
console.log(`[loadHistoryMessages] 消息 ${info.id} 的 parts 分类:`, partsByType);
|
||||
|
||||
// 提取文本内容(用于展示)
|
||||
const text = partsByType.text.map((part) => part.text).join('');
|
||||
|
||||
if (text || info.role === 'assistant') {
|
||||
messages.value.push({
|
||||
id: info.id,
|
||||
role: info.role,
|
||||
text: text,
|
||||
parts: partsByType, // 存储分类后的 parts,方便后续按 type 渲染
|
||||
rawParts: parts, // 保留原始 parts
|
||||
showReasoning: false, // 默认折叠推理过程
|
||||
});
|
||||
|
||||
// 记录 assistant 消息 ID
|
||||
if (info.role === 'assistant') {
|
||||
localAssistantMessageIds.add(info.id);
|
||||
appStore.addAssistantMessageId(info.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log('[loadHistoryMessages] 处理后的消息列表:', messages.value);
|
||||
scrollToBottom();
|
||||
} catch (err) {
|
||||
console.error('加载历史消息失败:', err);
|
||||
ElMessage.error(`加载历史消息失败: ${err.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
// 监听路由参数变化,加载对应会话
|
||||
watch(
|
||||
routeSessionId,
|
||||
async (newSessionId) => {
|
||||
if (newSessionId) {
|
||||
currentSessionId.value = newSessionId;
|
||||
// 等待历史消息加载完毕,避免在 send 时 messages 被清空
|
||||
await loadHistoryMessages(newSessionId);
|
||||
|
||||
// 处理从首页带过来的初始消息
|
||||
const text = route.query.text;
|
||||
if (text) {
|
||||
inputText.value = text;
|
||||
// 清除 query 中的 text,防止刷新页面时重复发送
|
||||
const query = { ...route.query };
|
||||
delete query.text;
|
||||
router.replace({ query });
|
||||
|
||||
// 触发发送逻辑
|
||||
send();
|
||||
}
|
||||
|
||||
// 确保 SSE 连接已建立
|
||||
if (!appStore.sseConnected) {
|
||||
appStore.initSSE();
|
||||
}
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
function scrollToBottom() {
|
||||
nextTick(() => {
|
||||
if (messagesRef.value) {
|
||||
messagesRef.value.scrollTop = messagesRef.value.scrollHeight
|
||||
messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function upsertAssistantBubble(msgId, text) {
|
||||
const existing = messages.value.find((m) => m.id === msgId)
|
||||
const existing = messages.value.find((m) => m.id === msgId);
|
||||
if (existing) {
|
||||
existing.text = text
|
||||
existing.text = text;
|
||||
} else {
|
||||
messages.value.push({ id: msgId, role: 'assistant', text })
|
||||
messages.value.push({ id: msgId, role: 'assistant', text });
|
||||
}
|
||||
scrollToBottom()
|
||||
scrollToBottom();
|
||||
}
|
||||
|
||||
function connectSSE() {
|
||||
if (eventSource) eventSource.close()
|
||||
eventSource = createEventSource()
|
||||
/**
|
||||
* 注册 SSE 事件监听器
|
||||
*/
|
||||
function registerSSEListeners() {
|
||||
// 监听消息部分更新事件
|
||||
const unsubscribePartUpdated = sseManager.on('message.part.updated', (data) => {
|
||||
const props = data.properties || {};
|
||||
const part = props.part;
|
||||
if (!part || part.type !== 'text') return;
|
||||
if (part.sessionID !== currentSessionId.value) return;
|
||||
// 通过 messageID 前缀区分用户/助手消息:只渲染 assistant 消息的 part
|
||||
// assistant 消息的 messageID 会在 message.updated 事件中记录,用 localAssistantMessageIds 集合过滤
|
||||
if (!localAssistantMessageIds.has(part.messageID) && !appStore.isAssistantMessage(part.messageID)) return;
|
||||
upsertAssistantBubble(part.messageID, part.text || '');
|
||||
});
|
||||
|
||||
eventSource.onmessage = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.data)
|
||||
const props = data.properties || {}
|
||||
|
||||
if (data.type === 'message.part.updated') {
|
||||
const part = props.part
|
||||
if (!part || part.type !== 'text') return
|
||||
if (part.sessionID !== currentSessionId.value) return
|
||||
upsertAssistantBubble(part.messageID, part.text || '')
|
||||
}
|
||||
|
||||
if (data.type === 'message.completed') {
|
||||
isSending.value = false
|
||||
}
|
||||
} catch (_) {
|
||||
console.error('解析 SSE 消息失败', _)
|
||||
return
|
||||
// 监听消息更新事件
|
||||
const unsubscribeMessageUpdated = sseManager.on('message.updated', (data) => {
|
||||
const props = data.properties || {};
|
||||
const info = props.info;
|
||||
// 记录 assistant 消息的 ID,供 message.part.updated 过滤使用
|
||||
if (info && info.role === 'assistant' && info.sessionID === currentSessionId.value) {
|
||||
localAssistantMessageIds.add(info.id);
|
||||
appStore.addAssistantMessageId(info.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
eventSource.onerror = () => {
|
||||
isSending.value = false
|
||||
}
|
||||
// 监听会话空闲事件
|
||||
const unsubscribeSessionIdle = sseManager.on('session.idle', (data) => {
|
||||
const props = data.properties || {};
|
||||
// session.idle 表示 AI 响应已全部完成,重置发送状态
|
||||
if (props.sessionID === currentSessionId.value) {
|
||||
isSending.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
// 保存取消订阅函数
|
||||
unsubscribeCallbacks.push(unsubscribePartUpdated, unsubscribeMessageUpdated, unsubscribeSessionIdle);
|
||||
}
|
||||
|
||||
async function startService() {
|
||||
isStarting.value = true
|
||||
try {
|
||||
const info = await window.opencode.start()
|
||||
isRunning.value = info.running
|
||||
// 更新 baseUrl 供 http 层使用
|
||||
if (info.url) window.__opencodeBaseUrl = info.url
|
||||
connectSSE()
|
||||
ElMessage.success('服务已启动')
|
||||
} catch (err) {
|
||||
ElMessage.error(`启动失败: ${err.message}`)
|
||||
} finally {
|
||||
isStarting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function stopService() {
|
||||
await window.opencode.stop()
|
||||
isRunning.value = false
|
||||
currentSessionId.value = null
|
||||
messages.value = []
|
||||
if (eventSource) {
|
||||
eventSource.close()
|
||||
eventSource = null
|
||||
}
|
||||
ElMessage.info('服务已停止')
|
||||
/**
|
||||
* 注销 SSE 事件监听器
|
||||
*/
|
||||
function unregisterSSEListeners() {
|
||||
unsubscribeCallbacks.forEach((unsubscribe) => {
|
||||
if (typeof unsubscribe === 'function') {
|
||||
unsubscribe();
|
||||
}
|
||||
});
|
||||
unsubscribeCallbacks = [];
|
||||
}
|
||||
|
||||
async function send() {
|
||||
const text = inputText.value.trim()
|
||||
if (!text || isSending.value) return
|
||||
const text = inputText.value.trim();
|
||||
if (!text || isSending.value) return;
|
||||
|
||||
// 首次发送时创建会话
|
||||
// 首次发送时创建会话,使用用户输入的第一条消息作为 title
|
||||
if (!currentSessionId.value) {
|
||||
try {
|
||||
const session = await window.opencode.createSession()
|
||||
currentSessionId.value = session.id
|
||||
const session = await window.opencode.createSession({ title: text });
|
||||
currentSessionId.value = session.id;
|
||||
} catch (err) {
|
||||
ElMessage.error(`创建会话失败: ${err.message}`)
|
||||
return
|
||||
ElMessage.error(`创建会话失败: ${err.message}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
messages.value.push({ id: Date.now(), role: 'user', text })
|
||||
inputText.value = ''
|
||||
isSending.value = true
|
||||
scrollToBottom()
|
||||
messages.value.push({ id: Date.now(), role: 'user', text });
|
||||
inputText.value = '';
|
||||
isSending.value = true;
|
||||
scrollToBottom();
|
||||
|
||||
try {
|
||||
await window.opencode.sendMessage(currentSessionId.value, text)
|
||||
await window.opencode.promptAsync(currentSessionId.value, text);
|
||||
// 发送成功后等待 SSE 事件流推送 AI 响应,isSending 由 session.idle 事件重置
|
||||
} catch (err) {
|
||||
ElMessage.error(`发送失败: ${err.message}`)
|
||||
isSending.value = false
|
||||
console.error('发送指令失败:', err);
|
||||
// 如果是服务未运行,尝试启动服务
|
||||
if (appStore.serviceStatus !== appStore.SERVICE_STATUS.RUNNING) {
|
||||
ElMessage.info('服务未运行,正在尝试启动...');
|
||||
appStore.triggerStartService();
|
||||
}
|
||||
ElMessage.error(`发送失败: ${err.message}`);
|
||||
isSending.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化时同步服务状态
|
||||
window.opencode
|
||||
?.info()
|
||||
.then((info) => {
|
||||
isRunning.value = info.running
|
||||
if (info.running) {
|
||||
if (info.url) window.__opencodeBaseUrl = info.url
|
||||
connectSSE()
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
onMounted(() => {
|
||||
// 组件挂载时注册 SSE 监听器
|
||||
registerSSEListeners();
|
||||
// 确保全局 SSE 连接已建立
|
||||
if (!appStore.sseConnected) {
|
||||
appStore.initSSE();
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (eventSource) eventSource.close()
|
||||
})
|
||||
// 组件卸载时注销 SSE 监听器
|
||||
unregisterSSEListeners();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -195,52 +302,6 @@ onUnmounted(() => {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e4e7ed;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.dot.stopped {
|
||||
background: #c0c4cc;
|
||||
}
|
||||
.dot.starting {
|
||||
background: #e6a23c;
|
||||
animation: pulse 1s infinite;
|
||||
}
|
||||
.dot.running {
|
||||
background: #67c23a;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.messages {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
@@ -301,6 +362,43 @@ onUnmounted(() => {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.reasoning-section {
|
||||
margin-bottom: 8px;
|
||||
border-radius: 6px;
|
||||
background: rgba(0, 0, 0, 0.03);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.reasoning-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 10px;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.reasoning-header:hover {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.reasoning-content {
|
||||
padding: 0 10px 8px;
|
||||
}
|
||||
|
||||
.reasoning-item {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
line-height: 1.5;
|
||||
padding: 4px 0;
|
||||
border-left: 2px solid #ddd;
|
||||
padding-left: 8px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.input-area {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
|
||||
@@ -1,109 +0,0 @@
|
||||
<template>
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="mb-4 flex justify-between items-center">
|
||||
<div>
|
||||
<h2 class="text-xl font-bold text-gray-800">发现设备</h2>
|
||||
<p class="text-sm text-gray-500">局域网内已发现的 mDNS 设备</p>
|
||||
</div>
|
||||
<el-button type="primary" :icon="Refresh" @click="refreshDevices" :loading="loading"> 重新扫描 </el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="devices.length === 0" class="flex-1 flex items-center justify-center">
|
||||
<el-empty description="未发现设备,正在扫描中..." />
|
||||
</div>
|
||||
|
||||
<div v-else class="flex-1 overflow-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<el-card v-for="device in devices" :key="device.id" shadow="hover" class="device-card">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-bold truncate" :title="device.name">{{ device.name }}</span>
|
||||
<el-tag size="small">{{ device.type }}</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div class="flex items-start">
|
||||
<span class="text-gray-400 w-16 shrink-0">地址:</span>
|
||||
<span class="text-gray-700 break-all">{{ device.addresses.join(', ') }}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="text-gray-400 w-16 shrink-0">端口:</span>
|
||||
<span class="text-gray-700">{{ device.port }}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="text-gray-400 w-16 shrink-0">主机名:</span>
|
||||
<span class="text-gray-700 truncate" :title="device.host">{{ device.host }}</span>
|
||||
</div>
|
||||
<div v-if="Object.keys(device.txt || {}).length > 0" class="mt-2 pt-2 border-t border-gray-100">
|
||||
<div class="text-xs font-semibold text-gray-500 mb-1">额外信息 (TXT):</div>
|
||||
<div v-for="(val, key) in device.txt" :key="key" class="flex items-start text-xs">
|
||||
<span class="text-gray-400 w-16 shrink-0">{{ key }}:</span>
|
||||
<span class="text-gray-600 break-all">{{ val }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { Refresh } from '@element-plus/icons-vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const devices = ref([])
|
||||
const loading = ref(false)
|
||||
|
||||
const loadDevices = async () => {
|
||||
try {
|
||||
const list = await window.electronAPI.getDevices()
|
||||
devices.value = list
|
||||
} catch (err) {
|
||||
console.error('Failed to get devices:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const refreshDevices = () => {
|
||||
loading.value = true
|
||||
devices.value = []
|
||||
window.electronAPI.refreshDevices()
|
||||
setTimeout(() => {
|
||||
loading.value = false
|
||||
loadDevices()
|
||||
ElMessage.success('刷新指令已发送')
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadDevices()
|
||||
|
||||
window.electronAPI.onDeviceFound((device) => {
|
||||
const index = devices.value.findIndex((d) => d.id === device.id)
|
||||
if (index === -1) {
|
||||
devices.value.push(device)
|
||||
} else {
|
||||
devices.value[index] = device
|
||||
}
|
||||
})
|
||||
|
||||
window.electronAPI.onDeviceLost((deviceId) => {
|
||||
devices.value = devices.value.filter((d) => d.id !== deviceId)
|
||||
})
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// IPC 监听在渲染进程中可能需要清理,但在 Electron contextBridge 中
|
||||
// 如果是简单的 `on` 监听,关闭页面通常会自动处理,或者这里需要实现更复杂的移除逻辑
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.device-card :deep(.el-card__header) {
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.device-card :deep(.el-card__body) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,403 +1,334 @@
|
||||
<template>
|
||||
<div class="home-container">
|
||||
<!-- 顶部欢迎区 -->
|
||||
<div class="welcome-section">
|
||||
<div class="welcome-content">
|
||||
<h1 class="welcome-title">
|
||||
<span class="greeting">你好,开发者</span>
|
||||
<span class="emoji">👋</span>
|
||||
</h1>
|
||||
<p class="welcome-subtitle">准备好开始今天的创作了吗?</p>
|
||||
<!-- 中间内容区:标题、副标题、卡片 -->
|
||||
<div class="center-content">
|
||||
<!-- 第一行:标题 -->
|
||||
<div class="title-section">
|
||||
<span class="title-highlight">玄</span>
|
||||
<span class="title-normal mr-4">鉴万物</span>
|
||||
<span class="title-highlight">鉴</span>
|
||||
<span class="title-normal">知明理 </span>
|
||||
</div>
|
||||
|
||||
<!-- 第二行:副标题 -->
|
||||
<div class="subtitle-section">本地运行、自主规划、安全可控的AI工作搭子</div>
|
||||
|
||||
<!-- 第三行:卡片 -->
|
||||
<div class="card-section flex gap-8 items-center">
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">
|
||||
<el-icon :size="42"><Document /></el-icon>
|
||||
</div>
|
||||
<div class="card-title">智能文档处理</div>
|
||||
<div class="card-desc">支持多种格式文档的智能解析与处理</div>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">
|
||||
<el-icon :size="42"><Document /></el-icon>
|
||||
</div>
|
||||
<div class="card-title">智能文档处理</div>
|
||||
<div class="card-desc">支持多种格式文档的智能解析与处理</div>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="card-icon">
|
||||
<el-icon :size="42"><Document /></el-icon>
|
||||
</div>
|
||||
<div class="card-title">智能文档处理</div>
|
||||
<div class="card-desc">支持多种格式文档的智能解析与处理</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片区 -->
|
||||
<el-row :gutter="16" class="stats-row">
|
||||
<el-col :span="8" v-for="(stat, index) in stats" :key="index">
|
||||
<el-card class="stat-card" shadow="hover">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon" :style="{ background: stat.color + '20' }">
|
||||
<el-icon :size="24" :color="stat.color">
|
||||
<component :is="stat.icon" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<p class="stat-value">{{ stat.value }}</p>
|
||||
<p class="stat-label">{{ stat.label }}</p>
|
||||
</div>
|
||||
<!-- 底部:输入框 -->
|
||||
<div class="input-section">
|
||||
<div class="input-wrapper">
|
||||
<textarea
|
||||
v-model="inputText"
|
||||
class="input-textarea"
|
||||
placeholder="描述任务,/ 调用技能与工具,@调用知识库"
|
||||
:disabled="isCreating"
|
||||
@keydown="handleKeydown"
|
||||
></textarea>
|
||||
<div class="input-toolbar">
|
||||
<div class="toolbar-left">
|
||||
<button class="toolbar-btn file-btn">
|
||||
<el-icon><Plus /></el-icon>
|
||||
<span>添加文件</span>
|
||||
</button>
|
||||
<button class="toolbar-btn symbol-btn">/</button>
|
||||
<button class="toolbar-btn symbol-btn">@</button>
|
||||
</div>
|
||||
<div class="stat-trend" :class="stat.trend > 0 ? 'up' : 'down'">
|
||||
<el-icon><component :is="stat.trend > 0 ? Top : Bottom" /></el-icon>
|
||||
<span>{{ Math.abs(stat.trend) }}% 较上周</span>
|
||||
<div class="toolbar-right">
|
||||
<button class="send-btn" :disabled="!inputText.trim() || isCreating" @click="handleSend">
|
||||
<el-icon><Promotion /></el-icon>
|
||||
</button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 主要内容区 -->
|
||||
<el-row :gutter="16" class="main-content">
|
||||
<!-- 快捷操作区 -->
|
||||
<el-col :span="12">
|
||||
<el-card class="action-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-icon><Grid /></el-icon>
|
||||
<span>快捷操作</span>
|
||||
</div>
|
||||
</template>
|
||||
<div class="action-grid">
|
||||
<div v-for="action in actions" :key="action.label" class="action-item" @click="action.onClick">
|
||||
<div class="action-icon" :style="{ background: action.color + '20' }">
|
||||
<el-icon :size="28" :color="action.color">
|
||||
<component :is="action.icon" />
|
||||
</el-icon>
|
||||
</div>
|
||||
<span class="action-label">{{ action.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 最近文件区 -->
|
||||
<el-col :span="12">
|
||||
<el-card class="recent-card" shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-icon><Clock /></el-icon>
|
||||
<span>最近访问</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-scrollbar height="280px">
|
||||
<div class="recent-list">
|
||||
<div v-for="(item, index) in recents" :key="index" class="recent-item" @click="handleFileClick(item)">
|
||||
<div class="file-icon">
|
||||
<el-icon :size="20"><Document /></el-icon>
|
||||
</div>
|
||||
<div class="file-info">
|
||||
<p class="file-name">{{ item.name }}</p>
|
||||
<p class="file-path">{{ item.path }}</p>
|
||||
</div>
|
||||
<span class="file-time">{{ item.time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from 'vue-router'
|
||||
import { Document, Plus, FolderOpened, Setting, Upload, Top, Bottom, Grid, Clock, Timer, VideoCamera } from '@element-plus/icons-vue'
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useAppStore } from '@/stores/app';
|
||||
import { useHistoryStore } from '@/stores/history';
|
||||
import { Document, Plus, Promotion } from '@element-plus/icons-vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
const historyStore = useHistoryStore();
|
||||
const inputText = ref('');
|
||||
const isCreating = ref(false);
|
||||
|
||||
const stats = [
|
||||
{
|
||||
label: '文件总数',
|
||||
value: '128',
|
||||
trend: 12,
|
||||
icon: Document,
|
||||
color: '#409EFF',
|
||||
},
|
||||
{
|
||||
label: '今日编辑',
|
||||
value: '24',
|
||||
trend: -3,
|
||||
icon: Timer,
|
||||
color: '#67C23A',
|
||||
},
|
||||
{
|
||||
label: '运行次数',
|
||||
value: '56',
|
||||
trend: 8,
|
||||
icon: VideoCamera,
|
||||
color: '#E6A23C',
|
||||
},
|
||||
]
|
||||
// 处理发送消息
|
||||
async function handleSend() {
|
||||
// 检查 opencode 服务是否已启动
|
||||
if (appStore.serviceStatus !== appStore.SERVICE_STATUS.RUNNING) {
|
||||
ElMessage.warning('暂时没有运行的智能体');
|
||||
return;
|
||||
}
|
||||
const text = inputText.value.trim();
|
||||
if (!text || isCreating.value) return;
|
||||
|
||||
const actions = [
|
||||
{
|
||||
label: '新建文件',
|
||||
icon: Plus,
|
||||
color: '#409EFF',
|
||||
onClick: () => router.push('/editor'),
|
||||
},
|
||||
{
|
||||
label: '打开文件',
|
||||
icon: FolderOpened,
|
||||
color: '#67C23A',
|
||||
onClick: () => {},
|
||||
},
|
||||
{
|
||||
label: '导入项目',
|
||||
icon: Upload,
|
||||
color: '#E6A23C',
|
||||
onClick: () => {},
|
||||
},
|
||||
{
|
||||
label: '系统设置',
|
||||
icon: Setting,
|
||||
color: '#F56C6C',
|
||||
onClick: () => {},
|
||||
},
|
||||
]
|
||||
isCreating.value = true;
|
||||
try {
|
||||
// 创建会话,title 使用用户输入的文本
|
||||
const session = await historyStore.createSession(text);
|
||||
console.log('创建会话成功:', session);
|
||||
|
||||
const recents = [
|
||||
{ name: 'main.js', path: '/src/main', time: '2 分钟前' },
|
||||
{ name: 'App.vue', path: '/src/renderer', time: '1 小时前' },
|
||||
{ name: 'index.css', path: '/src/renderer', time: '昨天' },
|
||||
{ name: 'forge.config.js', path: '/', time: '3 天前' },
|
||||
{ name: 'package.json', path: '/', time: '5 天前' },
|
||||
]
|
||||
// 清空输入框
|
||||
inputText.value = '';
|
||||
|
||||
const handleFileClick = (item) => {
|
||||
console.log('点击文件:', item)
|
||||
// 跳转到对话页面,并将消息文本带入 query
|
||||
router.push({
|
||||
name: 'Chat',
|
||||
params: { id: session.id },
|
||||
query: { text: text },
|
||||
});
|
||||
} catch (err) {
|
||||
console.error('创建会话失败:', err);
|
||||
} finally {
|
||||
isCreating.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 处理键盘事件
|
||||
function handleKeydown(e) {
|
||||
// Enter 发送,Shift+Enter 换行
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSend();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.home-container {
|
||||
padding: 24px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
}
|
||||
|
||||
/* 欢迎区样式 */
|
||||
.welcome-section {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.welcome-content {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
background: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.greeting {
|
||||
background: linear-gradient(90deg, #409eff 0%, #67c23a 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin: 8px 0 0 0;
|
||||
}
|
||||
|
||||
/* 统计卡片区 */
|
||||
.stats-row {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
/* 中间内容区 */
|
||||
.center-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
margin: 6px 0 0 0;
|
||||
}
|
||||
|
||||
.stat-trend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.stat-trend.up {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.stat-trend.down {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
/* 主要内容区 */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.action-card,
|
||||
.recent-card {
|
||||
border-radius: 12px;
|
||||
border: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
/* 快捷操作区 */
|
||||
.action-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 20px 16px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: #f5f7fa;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.action-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 12px;
|
||||
/* 第一行:标题 */
|
||||
.title-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.3s ease;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.action-item:hover .action-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.action-label {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
font-weight: 500;
|
||||
.title-highlight {
|
||||
font-weight: 900;
|
||||
font-size: 42px;
|
||||
line-height: 48px;
|
||||
letter-spacing: -0.39px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 最近文件区 */
|
||||
.recent-list {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.recent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.recent-item:hover {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 8px;
|
||||
background: #ecf5ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.file-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
font-size: 14px;
|
||||
.title-normal {
|
||||
font-weight: 900;
|
||||
font-size: 42px;
|
||||
line-height: 48px;
|
||||
letter-spacing: -0.39px;
|
||||
text-align: center;
|
||||
color: #303133;
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-path {
|
||||
/* 第二行:副标题 */
|
||||
.subtitle-section {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22.75px;
|
||||
letter-spacing: -0.15px;
|
||||
text-align: center;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
/* 第三行:卡片 */
|
||||
.card-section {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
width: 220px;
|
||||
height: 158px;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 25px 16px;
|
||||
gap: 8px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #409eff;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.55px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #909399;
|
||||
margin: 4px 0 0 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.file-time {
|
||||
font-size: 12px;
|
||||
/* 底部:输入框 */
|
||||
.input-section {
|
||||
margin-top: auto;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
width: 760px;
|
||||
height: 114px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #dcdfe6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.input-textarea {
|
||||
width: 758px;
|
||||
height: 60px;
|
||||
padding: 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #303133;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.input-textarea::placeholder {
|
||||
color: #c0c4cc;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input-toolbar {
|
||||
height: 54px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.toolbar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dcdfe6;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.toolbar-btn:hover {
|
||||
border-color: #409eff;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.file-btn {
|
||||
width: 84px;
|
||||
height: 28px;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.symbol-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: none;
|
||||
background: #409eff;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.send-btn:hover {
|
||||
background: #66b1ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
17
src/renderer/views/test/TestView.vue
Normal file
17
src/renderer/views/test/TestView.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<div class="flex items-center justify-center h-full">
|
||||
<el-button type="primary" size="large" @click="showLogin = true">打开登录弹窗</el-button>
|
||||
<LoginDialog v-model="showLogin" @login-success="onLoginSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import LoginDialog from '@/components/LoginDialog.vue';
|
||||
|
||||
const showLogin = ref(false);
|
||||
|
||||
function onLoginSuccess(user) {
|
||||
console.log('登录成功:', user);
|
||||
}
|
||||
</script>
|
||||
8
tailwind.config.js
Normal file
8
tailwind.config.js
Normal file
@@ -0,0 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@@ -1,17 +1,21 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import { resolve } from 'path';
|
||||
|
||||
// https://vitejs.dev/config
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
tailwindcss(),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src/renderer'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
watch: {
|
||||
usePolling: true,
|
||||
interval: 1000,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user