# OCR 前端 UI 风格约束

本项目 OCR 前端必须复用 `/Users/alphaPlanet/vibecoding/website` 的后台工作台风格，不另做一套视觉体系。

## 参考源

- 布局壳：`/Users/alphaPlanet/vibecoding/website/govcrawler/api/static/admin.html`
- 样式 token 与组件类：`/Users/alphaPlanet/vibecoding/website/govcrawler/api/static/css/admin.css`
- 菜单、标签页、页面标题模式：`/Users/alphaPlanet/vibecoding/website/govcrawler/api/static/js/core.js`
- 工作台页面密度与卡片表格模式：`/Users/alphaPlanet/vibecoding/website/govcrawler/api/static/js/pages/dashboard.js`

后续如果 `website` 后台风格调整，OCR 前端应同步更新，不以本文档作为独立视觉源。

## 布局

必须采用同一类后台工作台结构：

- 外层：`flex min-h-screen`
- 左侧菜单栏：固定宽度 `272px`，`min-width:272px`
- 顶部标题区：高度 `72px`
- 标签页条：高度 `44px`
- 右侧工作区：`flex-1 overflow-auto p-5 space-y-5`

OCR 页面结构对应为：

- 左侧菜单：识别任务、表单模板、字段映射、数据查询、运行监控、系统配置
- 顶部标题：产品名 + 当前环境/运行状态 + 全局搜索/刷新
- 标签页：工作台为固定标签，其他功能页打开后进入可关闭标签
- 工作区：页面标题区、筛选区、表格/卡片/详情面板

不要做营销式首页、巨型 hero、独立视觉插画、独立配色主题。

## 字体与基础色

字体必须复用：

```css
font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
```

主要颜色必须复用：

- 页面背景：`#F3F5F8`
- 侧边栏背景：`#0F172A`
- 侧边栏底部块：`#111827`
- 主蓝色：`#1D4ED8`
- 内容卡片背景：`#FFFFFF`
- 主边框：`#D9E1EA`
- 次级边框：`#E5EBF1`
- 输入框边框：`#CBD5E1`
- 标签页背景：`#EEF2F7`
- 主文字：`#0F172A`
- 正文文字：`#334155` / `#475569`
- 辅助文字：`#64748B` / `#94A3B8`

## 字号与密度

必须保持 `website` 后台的紧凑办公密度：

- 顶部 H1：`24px / 32px`，`font-weight:600`
- 页面 banner 标题：`16px`，`font-weight:600`
- 卡片标题：`15px`，`font-weight:600`
- 普通正文、表格主体、输入框：`13px` 或 `14px`
- 辅助说明：`12px`
- 徽标、小提示：`10px` 或 `11px`
- 不使用随视口变化的字号，不使用负字距

## 组件规则

必须复用这些组件风格：

- 卡片：白底，`1px solid #D9E1EA`，`border-radius:8px`
- 主按钮：`#1D4ED8`，白字，`13px`，`padding:8px 18px`，`border-radius:6px`
- 成功按钮：`#059669`，白字
- 次按钮/描边按钮：白底，`1px solid #CBD5E1`，`border-radius:6px`
- 输入框：`height:34px` 或同等密度，`13px`，focus 使用蓝色边框和淡蓝阴影
- 状态徽标：沿用 `pill-green`、`pill-blue`、`pill-amber`、`pill-red`、`pill-slate`
- 表格：浅色表头 `#F8FAFC`，行间线 `#F1F5F9`，单元格 `px-5 py-3`
- 弹窗：白底，`border-radius:10px`，顶部/底部分割线，底部背景 `#F8FAFC`

图标使用与 `website` 一致的 Lucide 风格。OCR 前端采用 Vue 3 + JavaScript + Vite；如后续引入 shadcn-vue/Radix Vue 组件，也必须调成上述尺寸和颜色，而不是采用默认主题。

## 标签页交互

标签页必须复用 `website` 的工作区标签模式：

- `dashboard`/工作台标签固定，不可关闭
- 侧边栏打开功能页时，如果标签不存在则追加
- 点击标签切换工作区内容
- 非工作台标签可关闭
- 当前标签：白底、深色文字
- 非当前标签：`#EEF2F7` 背景、`#475569` 文字

## OCR 页面落位

第一版建议菜单结构：

- 工作台：识别任务总览、今日识别量、待校验、失败任务、最近任务
- OCR 识别：上传图片/PDF、任务进度、原图预览、识别结果
- 表单模板：业务表单定义、字段标准化、版本管理
- 字段映射：OCR 字段与表单字段映射、置信度规则、人工校验规则
- 数据查询：标准化结果查询、按表单/人员/日期检索、接口调用记录
- 运行监控：OCR provider 服务健康、GPU/CPU 状态、队列、错误日志
- 系统配置：模型服务地址、MySQL 配置、字段字典、权限

这些页面只能在既有后台框架中呈现，不得另建独立页面风格。