主题风格

主题风格是用于配置和管理系统界面颜色主题的功能模块，支持自定义系统的配色方案，包括主色调、辅色调、背景色等，以满足不同品牌和用户的视觉需求。

主界面概述

主界面显示当前系统已配置的主题配色方案列表，包含以下功能区域：

列表展示区域

显示系统中所有已配置的主题配色方案，包含以下信息：

• 应用：显示配色方案所属的应用，如系统。

• 配色名称：显示配色方案的名称，如商务蓝。

• 配色方案：直观展示配色方案的主色调和辅助色调。

• 操作：提供对配色方案的编辑功能。

选择系统配色功能

点击主界面中的"编辑"按钮后，将弹出选择系统配色的弹窗。选择系统配色的流程如下：

• 配色方案列表：显示系统中已有的配色方案，如商务蓝，每个配色方案显示其主色调、辅色和配色。

• 新增配色按钮：点击后可进入新增配色方案的编辑界面。

• 取消按钮：取消当前操作，关闭弹窗。

• 确定按钮：确认选择的配色方案，应用到系统中。

编辑色调功能

在选择系统配色弹窗中，点击已有的配色方案或点击"新增配色"按钮后，将进入编辑色调界面。编辑色调功能包含以下配置项：

• 色调名称：输入配色方案的名称。

• 页面背景色：设置系统页面的背景颜色，在uni-app中使用变量：var(--page-bg-color)。

• 主色调：设置系统的主要颜色，在uni-app中使用变量：var(--primary-color)。

• 主色调浅色（淡）：设置主色调的浅色版本，在uni-app中使用变量：var(--primary-color-light)。

• 主色调深色（深）：设置主色调的深色版本，在uni-app中使用变量：var(--primary-color-light2)。

• 辅色调：设置系统的辅助颜色，在uni-app中使用变量：var(--primary-help-color2)。

• 灰色调：设置系统的灰色系颜色，在uni-app中使用变量：var(--primary-color-dark)。

• 禁用色：设置系统中禁用状态的颜色，在uni-app中使用变量：var(--primary-color-disabled)。

• 新增颜色按钮：点击后可添加自定义的颜色变量。

• 重置按钮：重置当前所有颜色设置为默认值。

• 取消按钮：取消当前编辑操作，返回上一级界面。

• 保存按钮：保存当前的色调配置。

新增颜色功能

在编辑色调界面中，点击"新增颜色"按钮后，将弹出新增颜色的弹窗。新增颜色的流程如下：

• 名字：输入自定义颜色的名称。

• 颜色key值：输入自定义颜色的变量名（key值不能与当前存在的key值重复）。

• 颜色value：选择或输入自定义颜色的色值。

• 颜色提示：输入对该颜色的描述或使用提示。

• 取消按钮：取消当前操作，关闭弹窗。

• 保存按钮：保存新增的颜色配置。