version temp3

2025-10-28 12:12:48 +08:00
parent 1a919d57ba
commit 4ddb31e663
100 changed files with 1756 additions and 2136 deletions
--- a/COLOR_GUIDE.md
+++ b/COLOR_GUIDE.md
@@ -0,0 +1,195 @@
+# 颜色使用指南
+
+## 🎨 主题色系统
+
+本项目采用统一的颜色管理系统，支持主题切换和颜色规范化管理。
+
+### 主色调
+- **主色调**: `#5D7EEB` (蓝色)
+- **CSS变量**: `var(--color-primary)`
+- **Tailwind类名**: `bg-primary`, `text-primary`, `border-primary`
+
+## 📁 文件结构
+
+```
+src/assets/
+├── colors.css          # 统一颜色变量定义
+├── vant-theme.css      # Vant组件主题配置
+├── main.css           # 主样式文件（导入所有样式）
+└── base.css           # 基础样式
+
+tailwind.config.js     # Tailwind颜色配置
+```
+
+## 🎯 使用方式
+
+### 1. CSS变量方式（推荐）
+
+```css
+/* 在CSS中使用 */
+.my-button {
+  background-color: var(--color-primary);
+  color: var(--color-text-white);
+  border-color: var(--color-border-primary);
+}
+
+.my-text {
+  color: var(--color-text-secondary);
+}
+```
+
+### 2. Tailwind类名方式
+
+```html
+<!-- 在HTML中使用 -->
+<button class="bg-primary text-white border-primary">
+  主要按钮
+</button>
+
+<div class="text-gray-600 bg-gray-50">
+  文本内容
+</div>
+```
+
+### 3. Vue组件中使用
+
+```vue
+<template>
+  <div class="service-card" :style="{ backgroundColor: serviceColor }">
+    <h3 class="text-primary">{{ title }}</h3>
+    <p class="text-gray-600">{{ description }}</p>
+  </div>
+</template>
+
+<script setup>
+// 使用CSS变量
+const serviceColor = 'var(--color-service-personal)';
+</script>
+```
+
+## 🌈 颜色分类
+
+### 主题色系
+- `--color-primary`: 主色调 (#5D7EEB)
+- `--color-primary-50` 到 `--color-primary-900`: 主色调渐变
+- `--color-primary-light`: 浅色变体
+- `--color-primary-dark`: 深色变体
+
+### 语义化颜色
+- `--color-success`: 成功色 (#07c160)
+- `--color-warning`: 警告色 (#ff976a)
+- `--color-danger`: 危险色 (#ee0a24)
+- `--color-info`: 信息色 (#1989fa)
+
+### 文本颜色
+- `--color-text-primary`: 主要文本 (#323233)
+- `--color-text-secondary`: 次要文本 (#646566)
+- `--color-text-tertiary`: 三级文本 (#969799)
+- `--color-text-white`: 白色文本 (#ffffff)
+
+### 背景颜色
+- `--color-bg-primary`: 主要背景 (#ffffff)
+- `--color-bg-secondary`: 次要背景 (#fafafa)
+- `--color-bg-tertiary`: 三级背景 (#f8f8f8)
+
+### 业务特定颜色
+- `--color-service-personal`: 个人大数据服务色
+- `--color-service-company`: 小微企业服务色
+- `--color-service-loan`: 贷前背调服务色
+
+## 🔧 自定义主题
+
+### 修改主色调
+
+1. **更新CSS变量** (`src/assets/colors.css`)
+```css
+:root {
+  --color-primary: #your-new-color;
+  --color-primary-light: rgba(your-rgb, 0.1);
+  --color-primary-dark: rgba(your-rgb, 0.8);
+}
+```
+
+2. **更新Vant主题** (`src/assets/vant-theme.css`)
+```css
+:root {
+  --van-theme-primary: #your-new-color;
+}
+```
+
+3. **更新Tailwind配置** (`tailwind.config.js`)
+```js
+colors: {
+  primary: {
+    DEFAULT: '#your-new-color',
+    // ... 其他变体
+  }
+}
+```
+
+### 添加新颜色
+
+在 `src/assets/colors.css` 中添加：
+
+```css
+:root {
+  --color-custom: #your-color;
+  --color-custom-light: rgba(your-rgb, 0.1);
+}
+```
+
+## 📱 响应式颜色
+
+```css
+/* 移动端特定颜色 */
+@media (max-width: 768px) {
+  .text-primary-mobile { 
+    color: var(--color-primary) !important; 
+  }
+}
+```
+
+## 🌙 暗色主题
+
+项目支持暗色主题自动切换：
+
+```css
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-text-primary: #ffffff;
+    --color-bg-primary: #1a1a1a;
+    /* ... 其他暗色变量 */
+  }
+}
+```
+
+## ✅ 最佳实践
+
+### 推荐做法
+- ✅ 使用CSS变量而不是硬编码颜色
+- ✅ 使用语义化的颜色名称
+- ✅ 使用Tailwind类名进行快速开发
+- ✅ 保持颜色命名的一致性
+
+### 避免做法
+- ❌ 硬编码颜色值 (`color: #5D7EEB`)
+- ❌ 使用任意值 (`bg-[#5D7EEB]`)
+- ❌ 混合使用不同的颜色管理方式
+- ❌ 忽略颜色对比度和可访问性
+
+## 🔍 调试工具
+
+### 浏览器开发者工具
+1. 打开开发者工具
+2. 在Elements面板中查看CSS变量
+3. 在Computed面板中查看最终计算值
+
+### 颜色检查工具
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [Coolors](https://coolors.co/) - 颜色搭配工具
+
+## 📚 相关文档
+
+- [VANT_THEME_CONFIG.md](./VANT_THEME_CONFIG.md) - Vant主题配置说明
+- [Tailwind CSS Colors](https://tailwindcss.com/docs/customizing-colors)
+- [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)