# 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
```

## 本地开发

```bash
# 同时启动后端（项目根目录）
npm run dev

# 启动前端开发服务器（vue-ui 目录，默认 http://localhost:5173）
cd vue-ui && npm install && npm run dev
```

前端开发服务器会自动将 `/api` 请求代理到 `http://localhost:3010`。

## 构建

```bash
cd vue-ui && npm run build
```

产物输出到项目根目录的 `public/vue/`，后端通过 `/vuelogs` 路由提供服务。

> **重要**：Docker 镜像打包前必须先执行此构建步骤，否则容器内将缺少前端静态资源。

## Docker 部署

```bash
# 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` 写入权限错误，需设置文件权限：
  ```bash
  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 应用 | 前端登录页处理 |

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