房友平台主题色系统配置

更新时间: 2024年11月3日
主题色: #ff7e00（房友橙）

🎨 核心颜色系统

主题色（Primary）

主题色是品牌色，贯穿整个产品的核心颜色。

颜色名称	色值	说明	使用场景
主题色	`#ff7e00`	房友橙，品牌主色	主按钮、链接、选中状态、重要标记
浅橙色	`#ff9933`	主题色变浅 20%	按钮 hover 状态、次要强调
更浅橙色	`#ffb366`	主题色变浅 40%	背景色、辅助提示
深橙色	`#cc6500`	主题色加深 20%	按钮按下状态、深色强调
极浅橙色	`#fff3e6`	主题色变浅 90%	卡片背景、标签背景

功能色（Functional）

用于传递功能信息的颜色。

颜色类型	色值	说明	使用场景
成功色	`#52c41a`	绿色	成功提示、完成状态、上线标记
警告色	`#faad14`	黄色	警告提示、待处理状态
错误色	`#f5222d`	红色	错误提示、删除操作、下线标记
信息色	`#1890ff`	蓝色	信息提示、普通消息

中性色（Neutral）

用于文本、背景、边框等。

颜色名称	色值	说明	使用场景
主文本色	`#333333`	深灰色	标题、正文
次文本色	`#666666`	中灰色	副标题、次要信息
辅助文本色	`#999999`	浅灰色	说明文字、占位符
禁用文本色	`#c0c0c0`	更浅灰色	禁用状态文字
边框色	`#e0e0e0`	浅灰色	边框、分割线
背景色	`#f5f5f5`	极浅灰色	页面背景、卡片背景
纯白背景	`#ffffff`	白色	内容区域背景

📱 前端配置

uni-app 客户端配置（fy_client）

配置文件: fy_client/src/uni.scss

scss

// 主题色（房友橙）
$uni-color-primary: #ff7e00;

// 主题色辅助色
$uni-color-primary-light: #ff9933;   // 浅橙色
$uni-color-primary-lighter: #ffb366; // 更浅橙色
$uni-color-primary-dark: #cc6500;    // 深橙色

// 功能色
$uni-color-success: #52c41a;  // 成功（绿色）
$uni-color-warning: #faad14;  // 警告（黄色）
$uni-color-error: #f5222d;    // 错误（红色）
$uni-color-info: #1890ff;     // 信息（蓝色）

使用方式:

vue

<template>
  <!-- 直接在组件中使用 -->
  <view class="primary-bg">主题色背景</view>
</template>

<style lang="scss" scoped>
.primary-bg {
  background-color: $uni-color-primary;
  color: #fff;
}
</style>

管理后台配置（fy_admin）

配置文件: fy_admin/src/stores/themeConfig.ts

typescript

// 默认 primary 主题颜色（房友橙）
primary: '#ff7e00',

Element Plus 自动生成的辅助色: Element Plus 会基于主题色自动生成以下 CSS 变量：

--el-color-primary: #ff7e00
--el-color-primary-light-3: 浅色系
--el-color-primary-light-5: 更浅色系
--el-color-primary-light-7: 极浅色系
--el-color-primary-light-9: 背景色系
--el-color-primary-dark-2: 深色系

使用方式:

vue

<template>
  <!-- Element Plus 组件自动应用主题色 -->
  <el-button type="primary">主按钮</el-button>
  
  <!-- 自定义样式使用 CSS 变量 -->
  <div class="custom-primary">自定义主题色</div>
</template>

<style lang="scss" scoped>
.custom-primary {
  color: var(--el-color-primary);
  border: 1px solid var(--el-color-primary);
  
  &:hover {
    background-color: var(--el-color-primary-light-9);
  }
}
</style>

🎯 使用规范

1. 主题色使用场景

✅ 应该使用主题色的地方:

主要操作按钮（如"提交"、"确定"、"保存"）
链接文字
选中状态（如菜单高亮、复选框选中）
重要标记和徽章
品牌相关元素（如 Logo、标题）

❌ 不应该使用主题色的地方:

大面积背景（会造成视觉疲劳）
所有按钮（次要按钮应使用中性色）
错误提示（应使用错误色）
成功提示（应使用成功色）

2. 颜色搭配建议

主题色 + 白色（推荐）:

背景: #ffffff
主色: #ff7e00
文字: #333333

主题色 + 浅灰背景:

背景: #f5f5f5
主色: #ff7e00
文字: #333333

主题色渐变（特殊场景）:

渐变: linear-gradient(135deg, #ff7e00 0%, #ff9933 100%)

3. 按钮颜色使用规范

按钮类型	背景色	文字色	使用场景
主按钮	`#ff7e00`	`#ffffff`	主要操作、强调操作
次按钮	`#ffffff`	`#333333`	次要操作、取消操作
成功按钮	`#52c41a`	`#ffffff`	确认成功、审核通过
警告按钮	`#faad14`	`#ffffff`	警告操作、重要提醒
危险按钮	`#f5222d`	`#ffffff`	删除操作、危险操作
文字按钮	透明	`#ff7e00`	链接类操作

🔄 主题色生成算法

管理后台使用 Element Plus 的颜色算法自动生成主题色变体。

变浅算法 (getLightColor):

typescript

// level 范围: 0-1，越大越浅
const getLightColor = (color: string, level: number): string => {
  let rgb = hexToRgb(color);
  for (let i = 0; i < 3; i++) {
    rgb[i] = Math.floor((255 - rgb[i]) * level + rgb[i]);
  }
  return rgbToHex(rgb[0], rgb[1], rgb[2]);
}

加深算法 (getDarkColor):

typescript

// level 范围: 0-1，越大越深
const getDarkColor = (color: string, level: number): string => {
  let rgb = hexToRgb(color);
  for (let i = 0; i < 3; i++) {
    rgb[i] = Math.floor(rgb[i] * (1 - level));
  }
  return rgbToHex(rgb[0], rgb[1], rgb[2]);
}

生成示例:

javascript

// 基础色: #ff7e00
getLightColor('#ff7e00', 0.1) // #ff8b19 - light-1
getLightColor('#ff7e00', 0.2) // #ff9933 - light-2
getLightColor('#ff7e00', 0.3) // #ffa64d - light-3
getLightColor('#ff7e00', 0.9) // #fff3e6 - light-9

getDarkColor('#ff7e00', 0.2)  // #cc6500 - dark-2

📦 配置清单

需要修改主题色的文件

fy_admin (管理后台)

[x] src/stores/themeConfig.ts - 主题色配置
[x] 系统自动生成 CSS 变量，无需手动配置

fy_client (客户端)

[x] src/uni.scss - uni-app 样式变量

文档

[x] docs/Ai总结文档/2024-11-03-主题色系统配置.md - 本文档

🚀 后续优化建议

1. 主题切换功能（可选）

如果需要支持多主题切换，可以考虑：

在管理后台添加主题色选择器
使用 CSS 变量实现动态主题切换
保存用户的主题偏好

2. 深色模式（可选）

深色模式下的主题色调整：

scss

// 深色模式下，主题色需要调整亮度
$dark-mode-primary: #ff9933;  // 比正常主题色稍浅

3. 无障碍优化

确保主题色与背景色的对比度符合 WCAG 2.0 AA 标准：

主题色 (#ff7e00) 在白色背景上的对比度: 3.6:1 ✅
白色文字在主题色背景上的对比度: 5.8:1 ✅

📝 更新记录

日期	版本	更新内容	更新人
2024-11-03	1.0.0	初始化主题色系统，设置主题色为 #ff7e00	AI

📞 联系方式

如有主题色相关问题，请联系项目维护者。

房友平台主题色系统配置 ​

🎨 核心颜色系统 ​

主题色（Primary） ​

功能色（Functional） ​

中性色（Neutral） ​

📱 前端配置 ​

uni-app 客户端配置（fy_client） ​

管理后台配置（fy_admin） ​

🎯 使用规范 ​

1. 主题色使用场景 ​

2. 颜色搭配建议 ​

3. 按钮颜色使用规范 ​

🔄 主题色生成算法 ​

📦 配置清单 ​

需要修改主题色的文件 ​

fy_admin (管理后台) ​

fy_client (客户端) ​

文档 ​

🚀 后续优化建议 ​

1. 主题切换功能（可选） ​

2. 深色模式（可选） ​

3. 无障碍优化 ​

📝 更新记录 ​

📞 联系方式 ​

房友平台主题色系统配置

🎨 核心颜色系统

主题色（Primary）

功能色（Functional）

中性色（Neutral）

📱 前端配置

uni-app 客户端配置（fy_client）

管理后台配置（fy_admin）

🎯 使用规范

1. 主题色使用场景

2. 颜色搭配建议

3. 按钮颜色使用规范

🔄 主题色生成算法

📦 配置清单

需要修改主题色的文件

fy_admin (管理后台)

fy_client (客户端)

文档

🚀 后续优化建议

1. 主题切换功能（可选）

2. 深色模式（可选）

3. 无障碍优化

📝 更新记录

📞 联系方式