cursor2api Vue3 日志 UI
基于 Vue3 + Vite + TypeScript 构建的日志查看与配置前端，挂载在 /vuelogs 路由下。
技术栈
- Vue 3.5 + Pinia 状态管理
- Vite 6 构建工具
- TypeScript
- highlight.js（代码高亮）
- marked（Markdown 渲染）
目录结构
vue-ui/
├── src/
│ ├── App.vue # 根组件
│ ├── main.ts # 入口
│ ├── api.ts # API 请求封装
│ ├── types.ts # 类型定义
│ ├── components/
│ │ ├── LoginPage.vue # 登录页
│ │ ├── AppHeader.vue # 顶部导航（含配置按钮）
│ │ ├── LogList.vue # 日志列表
│ │ ├── RequestList.vue # 请求列表（支持后端过滤和分页）
│ │ ├── DetailPanel.vue # 请求详情面板
│ │ ├── PayloadView.vue # Payload 查看
│ │ ├── PhaseTimeline.vue # 阶段时间线
│ │ └── ConfigDrawer.vue # 配置抽屉（热重载配置）
│ ├── composables/
│ │ └── useSSE.ts # SSE 实时推送
│ └── stores/
│ ├── auth.ts # 登录状态
│ ├── logs.ts # 日志数据
│ ├── stats.ts # 统计数据
│ └── config.ts # 配置状态
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts
本地开发
# 同时启动后端（项目根目录）
npm run dev
# 启动前端开发服务器（vue-ui 目录，默认 http://localhost:5173）
cd vue-ui && npm install && npm run dev
前端开发服务器会自动将 /api 请求代理到 http://localhost:3010。
构建
cd vue-ui && npm run build
产物输出到项目根目录的 public/vue/，后端通过 /vuelogs 路由提供服务。
重要：Docker 镜像打包前必须先执行此构建步骤，否则容器内将缺少前端静态资源。
Docker 部署
# 1. 准备配置文件
cp config.yaml.example config.yaml
# 2. 构建前端
cd vue-ui && npm install && npm run build && cd ..
# 3. 构建并启动容器
docker compose up -d --build
# 4. 访问日志 UI
open http://localhost:3010/vuelogs
注意事项：
config.yaml挂载时不能加:ro只读标志，否则配置抽屉无法保存- 如遇到
EACCES: permission denied写入权限错误，需设置文件权限：chmod 666 config.yaml
配置抽屉
点击顶部右侧的 ⚙ 配置 按钮可打开配置面板。大部分配置保存后通过 fs.watch 热重载，下一次请求即生效，无需重启。
| 分组 | 字段 | 说明 |
|---|---|---|
| 基础 | cursor_model |
使用的 Cursor 模型 |
| 基础 | timeout |
请求超时（秒） |
| 基础 | max_auto_continue |
自动续写次数 |
| 基础 | max_history_messages |
历史消息条数上限（建议改用 max_history_tokens） |
| 基础 | max_history_tokens |
历史消息 token 数上限（推荐），默认 150000，参考值 130000~170000 |
| 功能 | thinking.enabled |
Thinking 模式（跟随客户端/强制关闭/强制开启） |
| 功能 | sanitize_response |
响应内容清洗 |
| 历史压缩 | compression.* |
压缩开关、级别、保留条数等 |
| 工具处理 | tools.* |
Schema 模式、透传/禁用 |
| 日志持久化 | logging.db_enabled / logging.db_path |
SQLite 持久化（推荐） |
| 日志持久化 | logging.file_enabled / logging.dir / logging.persist_mode |
JSONL 文件持久化 |
| 高级 | refusal_patterns |
自定义拒绝检测正则 |
与原有日志页面的关系
| 路由 | 实现 | 鉴权方式 |
|---|---|---|
/logs |
原生 HTML（public/logs.html） |
服务端 cookie 鉴权 |
/vuelogs |
本 Vue3 应用 | 前端登录页处理 |
两者独立共存，互不影响。