6bdaeed6d4
- .gitignore 新增 .zcode/（ZCode 工具本地配置，不入库） - 更新交通/通信/差旅等财务规则表 - 补充 2026-06-25/26 开发日志（chat UI SaaS 化、主题企业 AI 风格、bug 日志）
1.8 KiB
1.8 KiB
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):#0f766eis-warning(Amber-700):#b45309is-danger(Red-700):#b91c1c- is-pending (Blue-600):
#2563eb
- 描边：
消息排版格式规范
- 限制 Alert 引用块为单条：在警示/阻塞状态下，只允许包含一条
>引用块用作 Alert 提示。 - 列表扁平化：发起前核对结果等普通多维状态信息，一律不使用
>引用块，合并为标准的无序列表展示，保持界面视觉扁平、整洁。 - 常规表单数据平铺：时间、单据编号等字段，均采用扁平加粗文本平铺，不再触发 focus-grid 等具有边框线的额外容器。