Initial TrueGrowth source import

2026-07-07 09:36:36 +08:00
commit 3b6781d695
2283 changed files with 691996 additions and 0 deletions
--- a/docs/TDESIGN_THEME_INTEGRATION.md
+++ b/docs/TDESIGN_THEME_INTEGRATION.md
@@ -0,0 +1,261 @@
+# TDesign 主题集成 - Opentu 品牌色彩
+
+本文档说明了如何在项目中集成 TDesign 组件库并应用 Opentu 品牌色彩系统。
+
+## 🎨 品牌色彩系统
+
+### 主品牌色 - 橙金色系
+```css
+--brand-primary: #F39C12          /* 主品牌色 */
+--brand-primary-dark: #E67E22      /* 深色变体 */
+--brand-primary-darker: #D35400    /* 更深色变体 */
+--brand-primary-light: #FEF5E7     /* 浅色变体 */
+--brand-primary-light-darker: #FDE68A /* 中等浅色变体 */
+```
+
+### 辅助品牌色 - 蓝紫色系
+```css
+--brand-secondary: #5A4FCF         /* 辅助色 */
+--brand-secondary-light: #7B68EE   /* 浅色变体 */
+--brand-secondary-lighter: #9966CC /* 更浅色变体 */
+```
+
+### 创作激活色 - 玫红色系
+```css
+--accent-create: #E91E63           /* 创作激活色 */
+--accent-create-light: #F06292     /* 浅色变体 */
+```
+
+### 渐变色
+```css
+--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 变量：
+
+```scss
+: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 组件的样式定制：
+
+```scss
+.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` 中定义了全局品牌样式：
+
+```scss
+:root {
+  --aitu-brand-primary: #F39C12;
+  --aitu-gradient-primary: linear-gradient(135deg, #F39C12 0%, #E67E22 30%, #5A4FCF 70%, #E91E63 100%);
+}
+```
+
+## 🎯 使用方法
+
+### 1. 在 React 组件中使用 TDesign
+
+```tsx
+import { Button, Dialog } from 'tdesign-react';
+
+function MyComponent() {
+  return (
+    <div>
+      {/* 主要按钮会自动应用品牌色 */}
+      <Button theme="primary">创建项目</Button>
+      
+      {/* 次要按钮 */}
+      <Button variant="outline">取消</Button>
+    </div>
+  );
+}
+```
+
+### 2. 使用品牌色彩 CSS 变量
+
+```scss
+.my-custom-component {
+  background: var(--brand-primary);
+  color: white;
+  
+  &:hover {
+    background: var(--brand-primary-dark);
+  }
+}
+```
+
+### 3. 使用渐变色
+
+```scss
+.gradient-background {
+  background: var(--brand-gradient);
+}
+
+.gradient-text {
+  background: var(--brand-gradient);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+```
+
+### 4. 使用预定义的品牌样式类
+
+```tsx
+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（回到顶部）
+
+## 🌙 深色模式支持
+
+项目已经配置了基础的深色模式支持：
+
+```scss
+@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;
+  }
+}
+```
+
+## 📱 响应式设计
+
+品牌色彩系统支持响应式设计，在移动端会自动调整：
+
+```scss
+@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*