# UI 重设计提示词（给 Claude 生成前端用）

> 用法：把下面「===== 提示词开始 ===== 」到「===== 提示词结束 =====」之间的全部内容
> 复制粘贴给 Claude（claude.ai），让它生成完整的 HTML/CSS/JS 设计稿。
> 拿到设计稿后，再交给 Codex 按现有 Flask 项目结构落地实现。

---

===== 提示词开始 =====

你是一位资深的政企级数据可视化产品设计师 + 前端工程师。请为我设计一套**指挥中心暗色科技风**的前端界面，覆盖 4 个页面，并产出可直接运行的 HTML/CSS/JS 设计稿。

## 一、项目背景

- 项目名称：**未成年人侵财智能管控中枢**
- 用途：参加**省级数字侦查竞赛**，面向公安刑侦部门，主题是「未成年人侵财犯罪打击治理」（盗窃、抢劫、抢夺、诈骗、敲诈勒索）。
- 使用者：一线侦查民警、研判人员、领导汇报演示。
- 关键诉求：界面要**专业、有科技感、演示冲击力强**，像公安大屏指挥中心；同时保证数据可读、操作清晰。
- 语言：全中文界面（zh-CN）。

## 二、严格的技术约束（必须遵守，否则无法落地）

这是一个**离线内网**部署的项目，没有任何外网访问：

1. **禁止任何外部资源**：不能用 Google Fonts、CDN、外链图标库、外链图片、外链 JS/CSS。所有东西必须内嵌或本地化。
2. **字体只能用系统字体栈**：
   `font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;`
   数字/数据等宽用：`ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;`，大数字加 `font-variant-numeric: tabular-nums;`
3. **样式用 Tailwind CSS v3 工具类**（项目已本地构建 tailwind.css）。复杂效果（辉光、渐变边框、网格背景）写在一个 `<style>` 块里作为补充。
4. **图表必须用 ECharts**（项目已本地打包 echarts.min.js，全局变量 `echarts`）。不要用其它图表库。给出 ECharts 的 option 配置（暗色主题）。
5. **纯原生 JS（vanilla）**，不要 React/Vue/jQuery。最终要嵌入 Flask + Jinja2 模板。
6. **所有图标用内联 SVG**（线性风格，1.5px 描边，`stroke="currentColor"`，24×24 viewBox）。**严禁使用 emoji 当图标**（当前旧版本用了 🔍🤖👤🔗📚，必须全部换成 SVG）。
7. 适配分辨率：主力 1920×1080，最低兼容 1366×768（民警工作站），不需要移动端。
8. 性能：服务器是 CPU-only 内网机器，避免大面积 `backdrop-filter: blur` 等高开销效果，辉光用 box-shadow 即可。

## 三、视觉风格规范：指挥中心暗色科技风

### 配色 Token（请在 :root 里定义 CSS 变量并全程复用）

```
--bg-base:      #0a0e1a   /* 全局背景，最深 */
--bg-surface:   #0f1729   /* 卡片/面板背景 */
--bg-elevated:  #16203a   /* 悬浮/高亮区块 */
--border:       rgba(56,189,248,0.14)   /* 卡片描边，青色微光 */
--border-strong:rgba(56,189,248,0.30)
--text-primary: #e6edf7
--text-second:  #94a3b8
--text-muted:   #5b6b80
--accent-cyan:  #38bdf8   /* 主强调色（科技青） */
--accent-blue:  #3b82f6   /* 次强调色 */
--glow-cyan:    0 0 18px rgba(56,189,248,0.35)
```

风险等级配色（全站统一，图谱/画像/总览都用同一套）：
```
极高 extreme  #ef4444    高 high #f97316    中 medium #eab308
低 low #3b82f6           正常 normal #22c55e
```
图谱节点配色（统一）：人员=青蓝 #38bdf8 / 案件=紫 #a855f7 / 学校=琥珀 #f59e0b / 监护人=翠绿 #10b981 / 高风险人员=红 #ef4444。

趋势涨跌（公安语境）：案件/风险**上升用红色 ▲**，**下降用绿色 ▼**（与股票相反，因为犯罪上升是坏事）。

### 质感与细节要求

- 卡片：`--bg-surface` 背景 + 1px `--border` 描边 + 12px 圆角；hover 时描边变 `--border-strong` 并加轻微 `--glow-cyan`。
- 关键数字（大指标、风险分）：青色辉光 `text-shadow`，等宽数字，做一个**数字滚动到位**的进场动画。
- 全局背景：`--bg-base` 上叠加一层极淡的网格点阵 SVG 纹理（透明度 ~0.03）增强科技感。
- 标题/分区标题：小号、字间距加大（letter-spacing）、`--text-second` 颜色、左侧可加一个青色竖条 accent。
- 顶部加一条 1px 的青→蓝渐变高光线作为品牌点缀。
- 状态彩条：预警/列表项左侧用 3px 风险色竖条。
- 动效克制：进场 fade+translateY、hover 150ms、图表 800ms 缓动；不要花哨弹跳。
- 加载态用骨架屏微光（shimmer），不要转圈 spinner 为主。
- 空状态、错误态都要有专门设计（SVG 占位图标 + 说明文字），不要只显示「--」。

### ECharts 暗色主题统一要求

- `backgroundColor: 'transparent'`
- 坐标轴线 `#1e293b`，刻度文字 `#94a3b8` 11px，分割线 `rgba(148,163,184,0.08)`
- 折线：青色渐变线 + 区域渐变填充（青色 0.25 → 透明），`lineStyle` 加 `shadowBlur` 辉光
- 饼/环形图：环形（radius ['45%','70%']），扇区用风险/分类色，中心可放总数文字
- 柱状图：青蓝渐变 `linearGradient`，圆角端
- tooltip：深色背景 `#0f1729`、青色描边、白字
- 关系图（force graph）：节点带 `shadowBlur` 辉光、连线半透明青色、`emphasis.focus:'adjacency'`

## 四、统一应用框架（4 个页面共用）

设计一个**统一的顶部导航壳**（解决当前各页风格不一致的核心问题）：

- 左侧：盾形/六边形 SVG Logo + 标题「未成年人侵财智能管控中枢」+ 当前页副标题。
- 中部：导航 Tab —「态势总览 / 个人画像 / 关系图谱 / AI研判」，当前页高亮（青色底+辉光），有 hover 态。
- 右侧：实时时钟（HH:MM:SS，等宽数字）+ 一个绿色脉冲圆点表示「系统在线」+ 刷新按钮。
- 整个壳风格统一，4 个页面都套用同一个 header。

## 五、四个页面的详细规格

> 下面每个页面的「字段」就是后端真实返回的数据，请如实展示，不要编造字段；可补充演示用占位数据。

### 页面 1：态势总览 Dashboard（路由 /dashboard）

整页暗色大屏，**首屏不滚动**，12 列栅格自适应铺满。结构：

1. **顶部 4 个核心指标卡**（一行）：
   - 管控总人数（青色）、高风险人数（橙色，带 ▲▼ 同比）、本月新增案件（红色）、平均风险评分（琥珀色）。
   - 每张卡：小标题 + 大号辉光数字（滚动进场）+ 迷你 sparkline 或环形进度点缀 + 同比变化箭头。
2. **第二行图表区**：
   - 月度趋势（折线，青色辉光，可切换 案件/人员/评分）
   - 风险等级分布（环形图，5 档风险色，中心显示总人数）
   - 案件类型分布（环形图，盗窃/抢劫/抢夺/诈骗/敲诈勒索）
3. **第三行**：
   - 辖区排名（横向柱状图，Top 8 辖区按高风险人数）
   - 年龄分布（环形/柱状，14岁以下 / 14-16岁 / 16-18岁）
   - **实时预警流**（可滚动列表，最重要的演示区，要醒目）：每条 = 左侧风险色竖条 + 姓名 + 时间 + 预警内容 + 风险等级标签 + 「详情」链接（跳 /profile/{zjhm}）。30 秒自动刷新，新预警有淡入高亮动画。
- 数字时钟每秒刷新；指标 60s 刷新；预警 30s 刷新。

### 页面 2：个人画像 Profile（路由 /profile/{身份证号}）

这是数据最密集的页，暗色卡片化布局。顶部一张人物总览卡 + 下方三栏网格：

- **顶部画像卡**：左侧圆形头像（无照片用姓名首字 + 渐变底）；姓名 + 风险等级徽章（风险色辉光）+ 性别·年龄；身份证号·户籍地；一条 0–100 风险分进度条（按风险色，带辉光，动画填充）；右侧 5 维分数小卡片：案件 /30、行为 /25、家庭 /20、教育 /15、社交 /10（每维一个迷你环形或条）；右上「展开关系图谱」按钮（跳 /graph?zjhm=）。
- **左栏（占 2/3）**：
  - 涉案记录：时间轴样式，每条 = 发案时间 + 案由/案件名 + 办案单位。
  - 行为记录：时间 + 行为描述 + 发生地点。
  - 轨迹分析：左「高频出现地点 Top5（地点+次数）」，右「活动时段」小柱状图（24 小时分布，用 ECharts）；底部「最近出现：时间 · 卡口设备」。
- **右栏（占 1/3）**：
  - 家庭信息：监护人(电话)、家庭状况、困难类型、儿童类别。
  - 教育状态：状态标签（辍学/流失/旷课/在校/未知，不同色）+ 学校 + 就学情况。
  - 关系网络：共犯人员列表（姓名链接到其 /profile + 共犯次数）。
  - 旅馆入住（如有）：旅馆名 + 入住时间 + 同住人。
  - 管控建议：要点列表，青色项目符号，作为收尾重点区块（可强调）。
- 加载时用骨架屏；查无此人显示专门空状态。

### 页面 3：关系图谱 Graph（路由 /graph）

全屏 ECharts 力导向关系图 + 右侧详情抽屉：

- 顶部（在统一壳内）：搜索框（占位「输入姓名 / 身份证号 / 案件编号…」）+ 搜索按钮；右侧「1层 / 2层」探索深度切换（科技感分段按钮）。
- 主画布：全屏暗色力导向图。节点按类型用统一配色并带辉光，高风险人员节点红色更大并有呼吸光环；连线半透明青色，关系标签（涉嫌/共犯/监护/就读）小字，「共犯」连线用红色加粗。支持拖拽、缩放(roam)、点击选中(高亮邻接)、双击展开该节点关系。
- 左下角：图例（人员/案件/学校/监护人/高风险）。
- 右侧详情抽屉（点节点滑出）：
  - 人员：姓名、证件号、风险分、风险等级 +「查看画像」「展开关系」按钮。
  - 案件：案件编号、案件名称、案由、发案时间。
  - 监护人：姓名、联系电话。学校：学校名称。
  - 搜索多结果时，抽屉里列出结果供点击选择。
- 未搜索时画布中央放一个 SVG 占位图 + 引导文字「搜索姓名或身份证号，展开关系图谱」。

### 页面 4：AI 研判助手 AI Analyst（路由 /ai-analyst）

左侧功能侧栏 + 右侧对话区（流式输出），暗色科技风、要有「AI 智能体」的高级感：

- **左侧栏**：
  - 「快捷功能」分组：3 个大按钮（每个=SVG 图标块+标题+副说明）：
    1. 人员研判（输入证件号，AI 分析侵财风险）——**点击弹出一个站内输入弹窗/内联输入框，绝对不要用浏览器原生 prompt()**。
    2. 串并案分析（AI 自动发现侵财系列案线索）。
    3. 知识问答（基于侵财法律知识库 RAG，是一个可切换的开关态按钮，激活时高亮）。
  - 「快捷提问」分组：3 个预设问题小按钮（盗窃量刑标准 / 侵财预防措施 / 附条件不起诉）。
  - 底部：「清空对话」。
- **顶部**：标题旁一个模式标签（「通用模式」灰 /「知识库模式」紫，切换有过渡）。
- **对话区**：
  - 用户消息：右侧，青蓝实底气泡。
  - AI 消息：左侧，深色卡片气泡，**支持 Markdown 渲染**（标题/加粗/列表/行内代码/分点），加粗用琥珀色，标题用青色。
  - 流式输出：先显示「思考中」三点跳动动画，然后逐字流式追加。
  - 串并案分析会先收到一条 meta 提示（已检索 N 起案件，发现 M 组相似对），用一个独立的「分析进度」信息条样式展示，再接 AI 正文。
  - 空状态：居中 AI 机器人 SVG + 「未成年人侵财犯罪 AI 研判助手」+ 引导语。
- **输入区**：底部多行输入框（自动增高，Enter 发送 / Shift+Enter 换行）+ 发送按钮；生成中按钮禁用并显示「生成中…」。

## 六、需要顺手解决的旧版问题（设计时请规避）

1. 4 个页面之前主题不统一（有的暗有的亮）——本次必须全部统一为暗色科技风、共用同一个 header 壳。
2. 全部 emoji 图标 → 换成内联 SVG 线性图标。
3. 人员研判的 `prompt()` 原生弹窗 → 换成站内设计的弹窗或内联输入。
4. 统一的空状态 / 加载骨架屏 / 错误态设计。
5. 颜色、圆角、间距、按钮、徽章、卡片全部走同一套设计 Token，保证一致性。

## 七、交付物要求

请输出一个**完整、可直接在浏览器打开预览的单文件 HTML 设计稿**（内含 Tailwind 类 + 一个 `<style>` 设计系统 + 原生 JS + ECharts option 占位数据），用顶部 Tab 在 4 个页面间切换，**完整体现统一设计系统和这 4 个页面的真实布局与组件**。要求：

- 一份清晰的设计系统说明区（配色 Token、字体、卡片/按钮/徽章/图表规范）。
- 4 个页面都用合理的演示假数据填充，效果接近真实可演示。
- 代码整洁、结构清晰、有注释，便于后续工程师按 Flask + Jinja 模板拆分落地。
- 所有图标内联 SVG；不引用任何外部资源；中文界面。

请先用 2–3 句话说明你的设计思路，然后给出完整 HTML 代码。

===== 提示词结束 =====

---

## 拿到 Claude 设计稿后，给 Codex 的落地说明（备忘）

设计稿生成后，落地时让 Codex 注意：

- 现有页面文件（替换其内容，保持路由不变）：
  - `templates/modules/dashboard/dashboard.html` + `static/modules/dashboard/dashboard.js`
  - `templates/modules/profile/profile.html` + `static/modules/profile/profile.js`
  - `templates/modules/graph/graph.html` + `static/modules/graph/graph.js`
  - `templates/modules/ai_analyst/analyst.html` + `static/modules/ai_analyst/analyst.js`
- 静态资源用 `{{ url_for('static', filename='...') }}`；ECharts 用 `static/vendor/echarts.min.js`；CSS 用 `static/dist/tailwind.css`。
- 后端 API 与数据字段保持不变（见各 `modules/*/routes.py`）：
  - Dashboard：`/api/dashboard/summary|trend|distribution|alerts|ranking`
  - Profile：`/api/profile/{zjhm}`（basic/score/family/education/cases/behaviors/trajectory/relations/hotels/suggestions）
  - Graph：`/api/graph/person/{zjhm}`、`/api/graph/search`
  - AI：`/api/ai/chat`、`/api/ai/analyze/person`、`/api/ai/analyze/serial`（均为 SSE 流式）
- 改完模板/Tailwind 类后必须执行 `npm run build:css` 重新生成 tailwind.css。
- 保持离线内网约束：不得新增任何外链资源。