Files
huangzhenting 717af46606 feat: Vue UI 增强 — 统计/筛选联动、自动跟随、交互优化
- 新增 getVueStats(since?)/apiGetVueStats/GET /api/vue/stats,供 Vue UI 专用
  SQLite 模式走数据库全量聚合+since过滤,getStats() 保持原样不影响 HTML 版本
- Vue UI 所有 /api/stats 调用改为 /api/vue/stats
- SSE stats 事件改为调 statsStore.load() 从 /api/vue/stats 拉最新数据
- 时间筛选增加 1小时/6小时选项,状态筛选改为 emoji 图标风格
- 状态筛选选中态:全部用蓝紫渐变底色,图标按钮用对应颜色边框+文字
- AppHeader/RequestList 缩写处全面补充 title tooltip
- 新增「自动跟随」功能:选中记录后可开启,SSE 推送新请求时自动切换并滚动到顶部
- 修复 ConfigDrawer draft 可能为 null 的 TS 错误
- 修复 CSS typo:.rfmt.responses background 颜色值多余空格
- upsertRequest 改用 Object.assign 避免 SSE 推送时替换对象引用打断 hover
2026-03-23 17:35:13 +08:00
..

cursor2api Vue3 日志 UI

基于 Vue3 + Vite + TypeScript 构建的日志查看与配置前端,挂载在 /vuelogs 路由下。

技术栈

  • Vue 3.5 + Pinia 状态管理
  • Vite 6 构建工具
  • TypeScript
  • highlight.js代码高亮
  • markedMarkdown 渲染)

目录结构

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 原生 HTMLpublic/logs.html 服务端 cookie 鉴权
/vuelogs 本 Vue3 应用 前端登录页处理

两者独立共存,互不影响。