# 主题设置与企业沉稳 AI 模式 概念文档

更新时间：2026-06-25

文档路径：document/development/2026-06-25/feature/theme-settings-enterprise-ai-style/CONCEPT.md

## 功能一句话

将系统设置中的“界面皮肤”升级为“主题设置”，从单纯色板选择扩展为产品体验风格选择，并让 AI 模式在“企业沉稳”主题下呈现更符合企业级 SaaS 的低噪声、结构化、克制风格。

## 背景与问题

当前系统设置里的外观入口仍偏向“界面皮肤”语义，主要表达颜色和视觉皮肤选择。这个命名过窄，无法承载用户希望配置的完整体验风格。

现有 AI 模式默认更接近动感活泼风格，使用较多渐变、明亮色块和活跃视觉标识。它适合演示和助手化体验，但在企业级财务、审批、风控、报销场景中，容易显得色彩过重，不够沉稳。

用户希望在系统设置中明确提供主题类型，至少覆盖：

1. 动感活泼：保留当前这种更有活力、更有 AI 助手感的主题。
2. 企业沉稳：符合企业 SaaS 风格，尤其 AI 模式下的对话图标、样式和整体风格需要克制、稳定，减少颜色渲染。
3. 专业智能：作为第三类默认方案，介于前两者之间，保留少量智能化识别感，但整体更收敛。

## 目标与非目标

目标：

- 将“界面皮肤”入口重命名为“主题设置”，让用户理解这里配置的是整体体验风格。
- 将主题从一组颜色选项收敛成三类可理解的主题类型。
- 在“企业沉稳”主题下，让 AI 模式呈现企业后台应用的专业感。
- 保持现有设置保存链路稳定，优先复用当前 appearance 配置和主题变量机制。
- 为后续进一步扩展租户品牌色、暗色模式、组件密度预留结构边界。

非目标：

- 不重做整个系统设置信息架构。
- 不一次性重写所有业务页面的视觉风格。
- 不改变 AI 意图识别、报销流程、审批逻辑和后端业务规则。
- 不新增复杂的租户级主题发布、审批或版本管理能力。
- 不引入新的前端主题框架或额外依赖。

## 用户与场景

管理员在系统设置中进入“主题设置”，选择适合当前组织的产品体验风格。

演示、培训、轻量工作台场景可以使用“动感活泼”，保留当前更有活力的 AI 交互表达。

企业正式生产环境可以使用“企业沉稳”，让财务、审批、风控和 AI 对话看起来像成熟的企业应用，而不是营销页或玩具化助手。

希望保留智能化识别但又不希望过度活泼的组织，可以使用“专业智能”。

## 功能能力

主题设置页面需要提供三类主题：

- 动感活泼：当前风格延续，允许渐变、轻动效和更明显的 AI 识别色。
- 企业沉稳：低饱和色、白灰底、轻描边、少阴影、少渐变，强调信息层级和业务可信度。
- 专业智能：更克制的智能风格，允许小面积蓝灰、紫灰或品牌色点缀，但避免大面积彩色渲染。

页面文案调整：

- 左侧菜单从“界面皮肤”调整为“主题设置”。
- 页面标题从“界面皮肤与企业主色”调整为“主题风格与界面体验”。
- 保存反馈从“界面皮肤已保存”调整为“主题设置已保存”。
- 说明文案从“皮肤/配色”改为“主题/体验风格”。

AI 模式联动：

- 动感活泼：保留当前 AI 模式视觉语言。
- 企业沉稳：对 AI 对话区、消息气泡、工具调用状态、思考过程、图标、卡片、提示块做克制化覆写。
- 专业智能：保留轻量 AI 识别感，但降低渐变、发光、背景装饰和高饱和强调色。

## 方案设计

配置模型优先沿用当前系统设置外观配置，避免为了命名调整引入后端迁移风险。

首期可以继续复用 `appearanceForm.themeSkin` 作为持久化字段，将值从原先色板语义逐步映射为主题语义：

- `vivid`：动感活泼。
- `enterprise`：企业沉稳。
- `intelligent`：专业智能。

为了减少现有 CSS 变量和本地存储影响，前端可以在兼容期保留 `themeSkin` 字段，同时在 DOM 上补充更清晰的主题标识：

```text
document.documentElement.dataset.themeSkin = value
document.documentElement.dataset.themeMode = value
```

旧值兼容策略：

- 旧的 `sky`、`blue`、`emerald` 等明亮主题默认映射到“动感活泼”。
- 旧的 `navy`、`slate` 等偏稳重主题默认映射到“企业沉稳”。
- 无法识别的值回退到“企业沉稳”，保证生产环境默认更克制。

设置页结构：

- 保留现有表单保存机制。
- 将原色板卡片改为三张主题选项卡。
- 每个主题卡展示名称、适用场景、视觉关键词和小型预览。
- 当前选中主题需要有明确选中态，但避免大面积彩色边框。

企业沉稳 AI 模式样式：

- 通过 `[data-theme-mode="enterprise"]` 或 `[data-theme-skin="enterprise"]` 覆写 `personal-workbench-ai-mode.css` 中的 AI 模式变量。
- 背景从多层 radial-gradient 收敛为白灰底或极轻线性渐变。
- 对话气泡使用白底、浅灰描边和稳定文字层级。
- AI 图标使用低饱和单色或品牌主色的小面积点缀。
- 思考过程、工具调用、风险提示等区域使用结构化信息块，减少发光、彩色渐变和装饰性元素。
- 风险、成功、警告等语义色保留，但只在图标、状态条或小面积标签上表达。

专业智能主题样式：

- 保留少量 AI 识别色，例如主色强调、轻量渐变按钮或小面积状态标识。
- 背景和卡片仍以企业应用的可读性为主。
- 避免全屏强背景、过多彩色阴影和过密装饰。

## 算法与公式

本功能不涉及复杂算法。

需要定义稳定的主题值映射函数：

```text
normalizeThemeMode(rawTheme):
  if rawTheme in ["vivid", "sky", "blue", "emerald", "purple"]:
    return "vivid"
  if rawTheme in ["enterprise", "navy", "slate", "gray"]:
    return "enterprise"
  if rawTheme in ["intelligent"]:
    return "intelligent"
  return "enterprise"
```

主题应用顺序：

```text
后端保存值 / 本地缓存值
  -> normalizeThemeMode
  -> 写入 appearanceForm.themeSkin
  -> 写入 root dataset
  -> 应用 CSS 变量
  -> AI 模式按 data-theme-mode 覆写组件样式
```

## 测试方案

前端单元和静态测试：

- 断言系统设置外观入口显示为“主题设置”。
- 断言页面标题显示为“主题风格与界面体验”。
- 断言三类主题均可见：动感活泼、企业沉稳、专业智能。
- 断言企业沉稳主题保存后写入稳定主题值。
- 断言旧主题值能通过 normalize 逻辑回退到可识别主题。
- 断言 AI 模式存在企业沉稳主题 CSS 钩子。

构建验证：

- 运行前端构建，确保主题设置改动不破坏现有页面。
- 运行已有设置相关测试，确保系统设置保存链路不回归。

真实页面验收：

- 打开 `/app/settings?section=appearance`，确认左侧菜单、页面标题、三类主题和保存反馈符合预期。
- 切换到“企业沉稳”后打开 AI 工作台，确认对话区域、图标、消息、思考过程和提示块明显减少彩色渲染。
- 切回“动感活泼”，确认现有风格仍可正常展示。
- 切到“专业智能”，确认介于两者之间，不退化为纯色板换色。

## 指标与验收

功能验收：

- “界面皮肤”在设置入口和页面主标题中完成改名。
- 用户可以选择三类主题，而不是面对一堆颜色皮肤。
- 选择主题后刷新页面仍保持选中态。
- 企业沉稳主题下，AI 模式整体视觉明显更接近企业 SaaS。
- 动感活泼主题不丢失现有活力风格。
- 专业智能主题具备独立视觉边界。

设计验收：

- 企业沉稳主题下不出现大面积高饱和渐变背景。
- AI 对话图标和卡片不依赖强发光、强阴影或多彩背景表达层级。
- 风险、审批、单据、工具调用等业务信息优先使用结构化排版。
- 主题卡片文字不溢出，不在移动端产生拥挤或重叠。

工程验收：

- 不新增前端依赖。
- 不引入后端表结构迁移。
- 旧主题值有明确兼容策略。
- 相关测试、构建和真实页面验收通过。

## 风险与开放问题

第三类主题默认命名为“专业智能”。如果后续用户指定更贴合业务的名称，可以只替换展示文案，不影响主题值和实现结构。

仅靠全局 CSS 变量可能无法完全消除 AI 模式的活泼感。企业沉稳主题需要对 AI 模式局部样式做有针对性的覆写。

旧色板值如果直接隐藏，可能让已有用户困惑。首期需要在兼容层处理旧值，并保证保存一次后落到新的三类主题值。

如果后续需要租户品牌色和主题组合，应该把“主题模式”和“品牌主色”拆成两个独立配置，避免再次把体验风格退化成颜色选择。

## 本轮文档记录

本轮已完成主题设置功能的前端实现：系统设置入口改名为“主题设置”，主题选项收敛为“动感活泼 / 企业沉稳 / 专业智能”三类，并通过主题归一化兼容旧色板值。

企业沉稳主题已联动 AI 工作台样式：根节点写入 `data-theme-mode="enterprise"`，AI 模式背景、图标容器、输入框、消息、思考过程和建议动作改为低饱和、轻描边、少渲染的企业 SaaS 风格。
