TrueGrowth/docs/TDESIGN_THEME_INTEGRATION.md

TDesign 主题集成 - Opentu 品牌色彩

本文档说明了如何在项目中集成 TDesign 组件库并应用 Opentu 品牌色彩系统。

🎨 品牌色彩系统

主品牌色 - 橙金色系

--brand-primary: #F39C12          /* 主品牌色 */
--brand-primary-dark: #E67E22      /* 深色变体 */
--brand-primary-darker: #D35400    /* 更深色变体 */
--brand-primary-light: #FEF5E7     /* 浅色变体 */
--brand-primary-light-darker: #FDE68A /* 中等浅色变体 */

辅助品牌色 - 蓝紫色系

--brand-secondary: #5A4FCF         /* 辅助色 */
--brand-secondary-light: #7B68EE   /* 浅色变体 */
--brand-secondary-lighter: #9966CC /* 更浅色变体 */

创作激活色 - 玫红色系

--accent-create: #E91E63           /* 创作激活色 */
--accent-create-light: #F06292     /* 浅色变体 */

渐变色

--brand-gradient: linear-gradient(135deg, #F39C12 0%, #E67E22 30%, #5A4FCF 70%, #E91E63 100%);
--brush-gradient: linear-gradient(135deg, #5A4FCF 0%, #7B68EE 50%, #E91E63 100%);

📁 文件结构

packages/drawnix/src/styles/
├── index.scss              # 主样式入口文件
├── tdesign-theme.scss      # TDesign 主题配置
├── theme.scss              # 应用主题变量
└── variables.module.scss   # SCSS 变量和混入

apps/web/src/
└── styles.scss             # 全局样式文件

🔧 配置说明

1. TDesign 主题配置

在 tdesign-theme.scss 中，我们覆盖了 TDesign 的默认 CSS 变量：

:root {
  /* 主品牌色映射到 TDesign 变量 */
  --td-brand-color: #F39C12;
  --td-brand-color-hover: #E67E22;
  --td-brand-color-active: #D35400;
  
  /* 功能色彩 */
  --td-success-color: #00B894;
  --td-warning-color: #E67E22;
  --td-error-color: #E91E63;
}

2. 组件样式定制

针对特定 TDesign 组件的样式定制：

.drawnix {
  /* 按钮组件 */
  .t-button--theme-primary {
    background: linear-gradient(135deg, var(--td-brand-color) 0%, var(--td-brand-color-6) 100%);
  }
  
  /* 输入框组件 */
  .t-input:focus {
    border-color: var(--td-brand-color);
    box-shadow: 0 0 0 2px rgba(243, 156, 18, 0.2);
  }
}

3. 全局样式配置

在 apps/web/src/styles.scss 中定义了全局品牌样式：

:root {
  --aitu-brand-primary: #F39C12;
  --aitu-gradient-primary: linear-gradient(135deg, #F39C12 0%, #E67E22 30%, #5A4FCF 70%, #E91E63 100%);
}

🎯 使用方法

1. 在 React 组件中使用 TDesign

import { Button, Dialog } from 'tdesign-react';

function MyComponent() {
  return (
    <div>
      {/* 主要按钮会自动应用品牌色 */}
      <Button theme="primary">创建项目</Button>
      
      {/* 次要按钮 */}
      <Button variant="outline">取消</Button>
    </div>
  );
}

2. 使用品牌色彩 CSS 变量

.my-custom-component {
  background: var(--brand-primary);
  color: white;
  
  &:hover {
    background: var(--brand-primary-dark);
  }
}

3. 使用渐变色

.gradient-background {
  background: var(--brand-gradient);
}

.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

4. 使用预定义的品牌样式类

function MyComponent() {
  return (
    <div>
      {/* 使用品牌按钮样式 */}
      <button className="aitu-button-primary">主要操作</button>
      <button className="aitu-button-secondary">次要操作</button>
      
      {/* 使用渐变背景 */}
      <div className="aitu-gradient-bg">渐变背景</div>
      
      {/* 使用渐变文字 */}
      <h1 className="aitu-gradient-text">Opentu</h1>
    </div>
  );
}

🔍 支持的 TDesign 组件

以下 TDesign 组件已经配置了品牌色彩：

• ✅ Button（按钮）
• ✅ Dialog（对话框）
• ✅ Input（输入框）
• ✅ Tabs（标签页）
• ✅ Switch（开关）
• ✅ Checkbox（复选框）
• ✅ Radio（单选框）
• ✅ Select（选择器）
• ✅ Progress（进度条）
• ✅ Loading（加载中）
• ✅ Tag（标签）
• ✅ Badge（徽章）
• ✅ Notification（通知）
• ✅ Message（消息）
• ✅ Slider（滑块）
• ✅ DatePicker（日期选择器）
• ✅ TimePicker（时间选择器）
• ✅ Upload（上传）
• ✅ Steps（步骤条）
• ✅ Anchor（锚点）
• ✅ BackTop（回到顶部）

🌙 深色模式支持

项目已经配置了基础的深色模式支持：

@media (prefers-color-scheme: dark) {
  :root {
    --td-bg-color-page: #1a1a1a;
    --td-bg-color-container: #2d2d2d;
    --td-text-color-primary: #ffffff;
    --td-text-color-secondary: #b3b3b3;
  }
}

📱 响应式设计

品牌色彩系统支持响应式设计，在移动端会自动调整：

@media (max-width: 768px) {
  .drawnix-console {
    width: 150px;
    height: 150px;
    font-size: 10px;
  }
}

🎨 设计原则

1. 一致性：所有 TDesign 组件都使用统一的品牌色彩
2. 可访问性：确保色彩对比度符合 WCAG 标准
3. 渐进增强：支持深色模式和减少动画偏好
4. 性能优化：使用 CSS 变量实现主题切换

🔄 更新主题色

如需更新品牌色彩，只需修改以下文件中的 CSS 变量：

1. packages/drawnix/src/styles/tdesign-theme.scss - TDesign 组件主题
2. packages/drawnix/src/styles/theme.scss - 应用主题变量
3. apps/web/src/styles.scss - 全局样式变量

🐛 故障排除

问题：TDesign 组件没有应用品牌色彩

解决方案：

1. 确保 tdesign-theme.scss 在 tdesign.css 之后引入
2. 检查 CSS 变量名是否正确
3. 确保组件被 .drawnix 类包裹

问题：渐变色不显示

解决方案：

1. 检查浏览器是否支持 CSS 渐变
2. 确保 CSS 变量定义正确
3. 检查是否有其他样式覆盖

问题：深色模式不生效

解决方案：

1. 检查系统是否设置为深色模式
2. 确保媒体查询语法正确
3. 检查 CSS 变量是否被正确覆盖

---

文档更新时间：2025-01-09
版本：v1.0