Compare commits

..

22 Commits

Author SHA1 Message Date
f944dd680c feat: 对话功能开发 2026-04-12 10:55:28 +08:00
a351d0ac79 feat: 首页开发 2026-04-12 10:35:58 +08:00
9a91093325 feat: 首页开发 2026-04-12 10:34:33 +08:00
a2a3bd2bee feat: 首页开发 2026-04-12 09:55:14 +08:00
fb3b072975 feat: 对话功能开发 2026-04-12 00:14:41 +08:00
cc774b717e feat: 对话功能开发 2026-04-11 17:53:31 +08:00
2ab6dd1050 feat: 加载历史记录 2026-04-11 17:23:50 +08:00
8c2ea4488b feat: 开发对话功能 2026-04-11 16:54:09 +08:00
5151379726 feat: 侧边栏开发 2026-04-11 16:27:01 +08:00
0c5ab186da feat: 侧边栏开发,降低tailwind版本 2026-04-11 15:45:13 +08:00
4645bf93ff refactor: 代码调整 2026-04-11 15:32:31 +08:00
a16d39ef52 feat: 页面结构调整 2026-04-11 15:02:03 +08:00
95956e5a5b feat: 调整 2026-04-11 14:38:09 +08:00
ba8cbf564d feat: 添加darwin code 2026-04-10 23:52:30 +08:00
5607d07586 fix: 移除eslint功能 2026-04-10 15:50:05 +08:00
houakang
c07f2c8dbe Merge branch 'fix-error' of https://gitea.cirry.cn/cirry/electron-opencode into fix-error 2026-04-10 15:19:33 +08:00
houakang
669fd4cc6a chore: 删除不再需要的.npmrc配置文件 2026-04-10 15:19:23 +08:00
houakang
0b11680aea feat(icons): 添加 Lucide 图标组件并集成到首页
添加 Lucide Vue 图标库依赖,创建 AppIcon 基础组件用于统一管理图标
移除 .npmrc 文件并更新 pre-commit 钩子使用 npm 替代 pnpm
2026-04-10 15:19:12 +08:00
84462f165a fix: 移除eslint功能 2026-04-10 14:20:47 +08:00
2d1fe95be0 fix: 删除冗余文件 2026-04-10 14:14:24 +08:00
67fb44fc73 feat: 添加发现设备页面 2026-04-10 11:25:56 +08:00
582b9e10fa feat: 添加发现设备页面 2026-04-10 11:25:40 +08:00
38 changed files with 2377 additions and 2931 deletions

6
.gitignore vendored
View File

@@ -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

View File

@@ -1 +1 @@
pnpm exec lint-staged
npm exec lint-staged

View File

@@ -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
.npmrc
View File

@@ -1 +0,0 @@
electron_mirror=https://npmmirror.com/mirrors/electron/

View File

@@ -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"
}

View File

@@ -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],
},
}
};

View 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` 可以用于异步发送消息,提升用户体验。

View File

@@ -0,0 +1,149 @@
# OpenCode 对话功能实现路径
本文档旨在提供一个在 OpenCode 平台中实现对话功能的完整技术路径涵盖会话管理、消息发送以及利用事件流SSE进行流式渲染的详细步骤和建议。
## 1. 核心概念回顾
在 OpenCode 中实现对话功能,主要依赖以下几个核心接口:
* **`POST /session`**: 用于创建新的对话会话,获取 `sessionID`
* **`POST /session/:id/prompt_async`**: 用于异步发送用户消息到指定会话,服务器会立即返回,不等待 AI 响应完成。
* **`GET /event`**: 作为 SSEServer-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 消息的逐字生成过程。

View File

@@ -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,
])

View File

@@ -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
View 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"]
}

2313
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -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,13 @@
"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"
},
"lint-staged": {
"*.{js,vue}": [
"eslint --fix",
"prettier --write"
]
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

Binary file not shown.

Binary file not shown.

View File

@@ -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());

View File

@@ -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);
},
});

View File

@@ -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')

View File

@@ -1,7 +1,210 @@
<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 text-gray-500 hover:bg-gray-50 hover:text-gray-700 cursor-pointer transition-all duration-200"
@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="isServiceRunning ? 'bg-green-500' : 'bg-gray-400'" />
<span class="text-xs text-gray-600">
{{ isServiceRunning ? '服务运行中' : '服务未启动' }}
</span>
</div>
<el-button v-if="!isServiceRunning" size="small" type="primary" @click="startService"> 启动 </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>
<!-- &lt;!&ndash; 折叠按钮 &ndash;&gt;-->
<!-- <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 } 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 menus = ref([
{ name: '新对话', index: '/', icon: 'plus' },
{ name: '知识空间', index: '/knowledge', icon: 'book' },
{ name: 'opencode对话', index: '/chat', icon: 'bot' },
{ name: '发现设备', index: '/bonjour', icon: 'server' },
]);
// 处理菜单点击
function handleMenuClick(item) {
if (item.index) {
router.push(item.index);
}
}
const isServiceRunning = ref(false);
let checkInterval = null;
// 查询历史会话列表
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({
path: '/chat',
query: { sessionId: item.id },
});
}
// 启动服务
async function startService() {
try {
const info = await window.opencode.start();
isServiceRunning.value = info.running;
// 更新 baseUrl 供 http 层使用
if (info.url) window.__opencodeBaseUrl = info.url;
// 服务启动成功后,初始化 SSE 连接
if (info.running) {
appStore.initSSE();
}
} catch (err) {
console.error('启动服务失败:', err);
}
}
// 停止服务
async function stopService() {
try {
await window.opencode.stop();
isServiceRunning.value = false;
historyStore.clearHistory();
} catch (err) {
console.error('停止服务失败:', err);
}
}
// 检查服务状态
async function checkServiceStatus() {
try {
const info = await window.opencode?.info();
const isRunning = info?.running || false;
// 更新服务状态
isServiceRunning.value = isRunning;
if (isRunning) {
// 服务运行中,更新 baseUrl 并加载历史记录
if (info?.url) {
window.__opencodeBaseUrl = info.url;
}
// 如果历史记录为空,则加载
if (historyStore.historyItems.length === 0) {
loadHistorySessions();
}
} else {
// 服务未运行,清空历史记录
historyStore.clearHistory();
}
} catch (err) {
// 获取状态失败,视为服务断开
isServiceRunning.value = false;
historyStore.clearHistory();
}
}
onMounted(() => {
// 初始检查
checkServiceStatus();
// 定期检查服务状态每2秒
checkInterval = setInterval(checkServiceStatus, 2000);
});
onUnmounted(() => {
if (checkInterval) {
clearInterval(checkInterval);
}
});
</script>

View 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>

View 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>

View File

@@ -1,20 +1,21 @@
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';
// 健康检查
export const getHealthAction = () => getAction(url.health)
export const getHealthAction = () => getAction(url.health);
// 会话
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}`);
}

View File

@@ -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;

View File

@@ -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,12 @@ const url = {
// 消息
message: {
send: (sessionId) => `/session/${sessionId}/message`,
promptAsync: (sessionId) => `/session/${sessionId}/prompt_async`,
list: (sessionId) => `/session/${sessionId}/message`,
},
// SSE 事件流
event: '/event',
}
};
export default url
export default url;

View File

@@ -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>

View File

@@ -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');

View File

@@ -1,36 +1,30 @@
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',
name: 'Chat',
component: () => import('@/views/chat/ChatView.vue'),
meta: { title: 'OpenCode 对话' },
},
{
path: '/bonjour',
name: 'Bonjour',
component: () => import('@/views/bonjour/BonjourView.vue'),
meta: { title: '发现设备' },
},
];
const router = createRouter({
// Electron 中使用 hash 模式
history: createWebHashHistory(),
routes,
})
});
export default router
export default router;

View File

@@ -1,13 +1,138 @@
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 title = ref('智聚超脑');
const collapsed = ref(false);
// SSE 相关状态
const sseConnected = ref(false);
const currentSessionEvents = ref([]);
const assistantMessageIds = ref(new Set());
function toggleSidebar() {
collapsed.value = !collapsed.value
collapsed.value = !collapsed.value;
}
return { title, collapsed, toggleSidebar }
})
/**
* 初始化 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,
};
});

View 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,
};
});

View File

@@ -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 {

View File

@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

View File

@@ -0,0 +1,134 @@
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { Search, Refresh } from '@element-plus/icons-vue';
const services = ref([]);
const loading = ref(false);
let unsubscribe = null;
const fetchServices = async () => {
loading.value = true;
try {
services.value = await window.bonjour.getServices();
} catch (error) {
console.error('Failed to fetch bonjour services:', error);
} finally {
loading.value = false;
}
};
onMounted(() => {
fetchServices();
unsubscribe = window.bonjour.onServicesUpdated((updatedServices) => {
services.value = updatedServices;
});
});
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>

View File

@@ -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,234 @@
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 } 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 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.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 response = await axios.get(`${baseUrl}/session/${sessionId}/message`);
const messagesData = response.data || [];
console.log('[loadHistoryMessages] 原始消息数据:', messagesData);
// 清空当前消息
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,
(newSessionId) => {
if (newSessionId) {
currentSessionId.value = newSessionId;
loadHistoryMessages(newSessionId);
// 确保 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 由 message.completed 事件重置
} catch (err) {
ElMessage.error(`发送失败: ${err.message}`)
isSending.value = false
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 +272,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 +332,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;

View File

@@ -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>

View File

@@ -1,403 +1,325 @@
<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 { useHistoryStore } from '@/stores/history';
import { Document, Plus, Promotion } from '@element-plus/icons-vue';
const router = useRouter()
const router = useRouter();
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() {
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)
// 跳转到对话页面
router.push({
path: '/chat',
query: { sessionId: session.id },
});
} 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>

8
tailwind.config.js Normal file
View File

@@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
};

View File

@@ -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,
},
},
});