32 lines
1.8 KiB
Markdown
32 lines
1.8 KiB
Markdown
|
# AI 对话 UI 样式重构与 SaaS 化设计方案
|
|||
|
|
|
|||
|
|
为了让 X-Financial AI 助手的对话界面展现更专业的金融与 SaaS 企业化视觉，我们对前端全局的 Markdown 渲染样式进行了重构。
|
|||
|
|
|
|||
|
|
## 设计目标
|
|||
|
|
- **中性色打底**：对话块背景、边框移除饱和偏色，统一采用 Slate/Neutral 冷灰色调（如 `#f8fafc` 和 `#cbd5e1`）。
|
|||
|
|
- **降低色彩冗余**：将非必须的高亮蓝色改为中性灰色，各单据卡片仅在状态字样与极淡头部透明底中体现状态点缀，避免彩色杂乱堆积。
|
|||
|
|
- **界面扁平微阴影**：移除带有斜向彩色发光的阴影与复杂的背景图案，采用 1px 实线描边配合微阴影，契合 Stripe, Jira 等现代 SaaS 产品规范。
|
|||
|
|
|
|||
|
|
## 详细参数定义
|
|||
|
|
- **引用块 (`blockquote` / `.ai-html-callout`)**：
|
|||
|
|
- 边框：`3px solid #cbd5e1`
|
|||
|
|
- 背景：`#f8fafc`
|
|||
|
|
- 文字：`#334155`
|
|||
|
|
- **信息网格 (`.ai-html-focus-grid`)**：
|
|||
|
|
- 边框：`3px solid #cbd5e1`
|
|||
|
|
- 标题颜色：`#475569` (Slate-600)
|
|||
|
|
- **单据卡片 (`.ai-document-card`)**：
|
|||
|
|
- 描边：`1px solid #e2e8f0`
|
|||
|
|
- 投影：`0 1px 2px 0 rgba(15, 23, 42, 0.05)`
|
|||
|
|
- 头部默认背景：`rgba(241, 245, 249, 0.5)`
|
|||
|
|
- 状态点缀色：
|
|||
|
|
- `is-success` (Teal-700): `#0f766e`
|
|||
|
|
- `is-warning` (Amber-700): `#b45309`
|
|||
|
|
- `is-danger` (Red-700): `#b91c1c`
|
|||
|
|
- is-pending (Blue-600): `#2563eb`
|
|||
|
|
|
|||
|
|
## 消息排版格式规范
|
|||
|
|
- **限制 Alert 引用块为单条**：在警示/阻塞状态下，只允许包含一条 `>` 引用块用作 Alert 提示。
|
|||
|
|
- **列表扁平化**：发起前核对结果等普通多维状态信息，一律不使用 `>` 引用块，合并为标准的无序列表展示，保持界面视觉扁平、整洁。
|
|||
|
|
- **常规表单数据平铺**：时间、单据编号等字段，均采用扁平加粗文本平铺，不再触发 focus-grid 等具有边框线的额外容器。
|