会话趋势
201次
标题 14px / 600，内容与操作共用全局字体与颜色。
全局样式表
统一字体、字重、颜色、圆角、间距与基础组件。此页面直接引用 design-system.css；原型使用同一份文件，数值修改会同步生效。
字体层级
Figma 字体画板中的 32 / 28 / 20 展示字号及 16 / 14 / 12 常用层级，配合 600 / 500 / 400 字重。正文使用 14px；图表辅助读数使用 10px，核心经营数据保留 40px 的移动端展示尺寸。
--font-size-display-lg
展示标题
统一的产品体验
32px / 600展示标题
--font-size-display-md
标题与次级经营数据
服务工作台
28px / 600标题与次级经营数据
--font-size-display-sm
重点内容
你好，我是小悦
20px / 600重点内容
--font-size-title
模块与弹层标题
客户资料与接待设置
16px / 600模块与弹层标题
--font-size-body
正文、按钮、报表标题
周六下午可以安排试听，您更方便哪个时段？
14px / 400–600正文、按钮、报表标题
--font-size-caption
辅助信息
来源渠道、最近联系时间和字段说明
12px / 400–500辅助信息
--font-size-compact
紧凑图例与图表刻度
10-10 10-11 10-12 10-13
10px / 400–500紧凑图例与图表刻度
--font-size-data
移动端数据强调
201次会话
40px / 600移动端数据强调
Regular · 正文400 / --font-weight-regular
Medium · 操作500 / --font-weight-medium
Semibold · 标题600 / --font-weight-semibold
字体文件未从 Figma 导出。字体栈采用 Inter → PingFang SC → Microsoft YaHei → system-ui，按设备可用字体回退；不是字体文件的逐字形还原。品牌 Logo 保留原图。
语义颜色
主色按本次已确认的蓝色主题保留。正文采用中性色层级；深蓝数据卡、聊天回复和透明毛玻璃使用各自的前景色。状态与图表系列分别命名，避免混用。
基础组件
按钮 / 44px / 8px 圆角
状态标签
已连接需要处理连接异常已停用
输入框 / 默认与聚焦
卡片 / 16px 圆角与内边距
会话筛选：双列表单与 32px 多选标签使用语义颜色，标签组限制高度并支持滚动，重置 / 确认固定在抽屉底部；所有新增文案支持三语。客户查询：搜索、筛选与批量操作同一行，图标触控区 44px；筛选表单双列对齐、底部查询与重置固定。联系方式空值单行，有值两行；英文分类允许换行。布局均维护在 design-system.css，使用相同浅暗语义变量。
间距与圆角
间距采用 4px 基础步长；常用间距为 8 / 12 / 16 / 20 / 24 / 32px。页面与标准卡片使用 16px 留白。
控件 8px、消息气泡 12px、卡片 16px、弹层 24px；圆形头像与胶囊输入条单独定义。
接入与适配
| 文件 | 职责 |
|---|---|
| design-system.css | 唯一的基础变量与公共视觉规范，包含浅色 / 深色及移动端组件适配。 |
| styles.css / ui.css | 页面布局、图表几何与业务组件结构；字号、字重、文字颜色、常用圆角已改为引用统一变量。 |
| reports.js | 图表系列引用全局配色变量；报表计算、筛选与点选交互保持原有逻辑。 |
| styleguide.html | 样式目录与组件预览；颜色、间距、圆角的数值直接读取共享样式。 |
原型按 styles.css → ui.css → design-system.css 的顺序加载。新增页面引用语义变量，不再引入零散字号、非标准字重或新的灰蓝文字色。SVG 路径、手机外框、原始 Logo 字形与图形尺寸属于几何 / 资源例外。
参考：用户指定设计节点 ↗ · Typegraphy 字体规范 ↗。字号与字重已通过匿名画布核对（查看核对截图 ↗）；控件尺寸、蓝色、系统字体回退和移动数据大字为本原型的适配规则。
主题与语言
主题覆盖所有产品页面及公共组件，界面语言即时切换并保存到本机。客户姓名、账号、消息与输入保持原文，表单内部值、权限与业务状态保持不变。
| 设置 | 选项 | 入口与规则 |
|---|---|---|
| 主题 | 浅色 / 暗黑 | 偏好设置、通用页菜单、聊天地球按钮；语义颜色变量统一控制背景、文字、边框及状态色。 |
| 界面语言 | 简体中文 / 繁體中文 / English | 完整覆盖页面、弹窗、提示和无障碍标签；语言名称始终使用各语言自称，避免切换后找不到入口。 |
| 布局 | 中文与英文窄屏 | 英文长标签可换行，图表标签使用紧凑词条；控制台与表单保持同一视觉规范。 |
| 内容 | 界面与业务数据 | 界面词条集中在 locales.js，客户消息、备注与未发送草稿保留原文。 |
底部抽屉动效
公共抽屉与客户嵌套抽屉共用，关闭完成后移除节点；退出期间锁定内容，嵌套抽屉收起后恢复父层、焦点与滚动位置。
| 过程 | 表现 | 时长 | 统一变量 |
|---|---|---|---|
| 打开 | 从底部完整滑入，遮罩淡入 | 280ms | --drawer-enter-duration--drawer-enter-easing |
| 关闭 | 从当前可见位置滑向底部，遮罩淡出 | 220ms | --drawer-exit-duration--drawer-exit-easing |
| 减少动态效果 | 立即打开和收起，焦点与清理行为保持 | 0ms | prefers-reduced-motion |