mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-19 09:33:53 +00:00
docs(vscode-ide-companion): add Tailwind CSS integration guides
添加 Tailwind CSS 渐进式集成文档，包括： - 渐进式采用策略文档 - 集成计划文档 - 渐进式集成指南
This commit is contained in:
yiliang114
191
packages/vscode-ide-companion/PROGRESSIVE_TAILWIND_ADOPTION.md
Normal file
191
packages/vscode-ide-companion/PROGRESSIVE_TAILWIND_ADOPTION.md
Normal file
@@ -0,0 +1,191 @@
|
||||
# 渐进式Tailwind CSS采用指南
|
||||
|
||||
## 1. 采用策略
|
||||
|
||||
我们采用渐进式的方法将Tailwind CSS集成到现有项目中，确保不影响现有功能和开发流程。
|
||||
|
||||
### 核心原则
|
||||
1. **不破坏现有功能** - 保留所有现有CSS和组件
|
||||
2. **并行开发** - 新组件使用Tailwind，现有组件保持不变
|
||||
3. **逐步迁移** - 随着时间推移逐步将现有组件迁移到Tailwind
|
||||
4. **团队协作** - 确保团队成员理解并遵循新的开发规范
|
||||
|
||||
## 2. 实施步骤
|
||||
|
||||
### 第一阶段：基础配置和新组件开发
|
||||
|
||||
#### 2.1 已完成的配置
|
||||
- [x] Tailwind CSS 添加到项目依赖
|
||||
- [x] `tailwind.config.js` 配置文件创建
|
||||
- [x] `postcss.config.js` 配置文件创建
|
||||
- [x] `src/styles.css` 创建并包含Tailwind指令
|
||||
|
||||
#### 2.2 创建新的Tailwind组件
|
||||
我们已经创建了以下示例组件：
|
||||
- `src/webview/components/ui/Button.tsx` - 使用Tailwind的按钮组件
|
||||
- `src/webview/components/ui/Card.tsx` - 使用Tailwind的卡片组件
|
||||
- `src/webview/components/TailwindDemo.tsx` - 展示如何使用Tailwind的演示组件
|
||||
|
||||
### 第二阶段：混合使用策略
|
||||
|
||||
#### 2.3 在现有组件中添加Tailwind类
|
||||
可以在现有组件中添加Tailwind类作为补充，而不替换现有CSS：
|
||||
|
||||
```tsx
|
||||
// 示例：在现有组件中添加Tailwind类
|
||||
import './PermissionDrawer.css'; // 保留现有样式
|
||||
|
||||
export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({ ... }) => {
|
||||
return (
|
||||
// 添加Tailwind类作为补充
|
||||
<div className="permission-drawer flex flex-col rounded-lg">
|
||||
{/* 现有内容保持不变 */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
#### 2.4 创建增强版本
|
||||
为现有组件创建Tailwind增强版本，供新功能使用：
|
||||
|
||||
```tsx
|
||||
// PermissionDrawer.tailwind.tsx
|
||||
export const PermissionDrawerTailwind: React.FC<PermissionDrawerProps> = ({ ... }) => {
|
||||
return (
|
||||
<div className="fixed inset-0 flex items-end justify-center">
|
||||
<div className="bg-white rounded-t-xl shadow-2xl w-full max-w-md">
|
||||
{/* 使用纯Tailwind样式 */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 第三阶段：逐步迁移现有组件
|
||||
|
||||
#### 3.1 选择合适的组件开始迁移
|
||||
建议从以下类型的组件开始：
|
||||
1. 独立性强、依赖较少的组件
|
||||
2. 新功能相关的组件
|
||||
3. 需要重构或改进的组件
|
||||
|
||||
#### 3.2 迁移步骤
|
||||
1. 复制现有组件代码
|
||||
2. 替换CSS类名为Tailwind类
|
||||
3. 测试功能确保一致
|
||||
4. 逐步替换原有组件
|
||||
|
||||
## 3. 最佳实践
|
||||
|
||||
### 3.1 保持向后兼容性
|
||||
- 不要删除现有的CSS文件
|
||||
- 逐步替换，而不是一次性重构
|
||||
- 在团队中建立清晰的规范
|
||||
|
||||
### 3.2 性能优化
|
||||
```js
|
||||
// tailwind.config.js - 渐进式内容扫描策略
|
||||
module.exports = {
|
||||
content: [
|
||||
// 渐进式采用策略：只扫描新创建的Tailwind组件
|
||||
"./src/webview/components/ui/**/*.{js,jsx,ts,tsx}",
|
||||
"./src/webview/components/TailwindDemo.tsx",
|
||||
// 当需要在更多组件中使用Tailwind时，可以逐步添加路径
|
||||
// "./src/webview/components/NewComponent/**/*.{js,jsx,ts,tsx}",
|
||||
// "./src/webview/pages/**/*.{js,jsx,ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
// 扩展主题以匹配现有设计
|
||||
colors: {
|
||||
'qwen': {
|
||||
'orange': '#615fff',
|
||||
'clay-orange': '#4f46e5',
|
||||
'ivory': '#f5f5ff',
|
||||
'slate': '#141420',
|
||||
'green': '#6bcf7f',
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
'small': '4px',
|
||||
'medium': '6px',
|
||||
'large': '8px',
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
### 3.3 团队协作
|
||||
1. **文档化**：维护Tailwind使用指南
|
||||
2. **代码审查**：在代码审查中检查Tailwind使用是否合理
|
||||
3. **组件库**：逐步建立基于Tailwind的组件库
|
||||
4. **培训**：为团队成员提供Tailwind培训
|
||||
|
||||
## 4. 使用示例
|
||||
|
||||
### 4.1 新组件开发
|
||||
```tsx
|
||||
// components/ui/Button.tsx
|
||||
export const Button: React.FC<ButtonProps> = ({
|
||||
variant = 'primary',
|
||||
size = 'md',
|
||||
children
|
||||
}) => {
|
||||
const baseClasses = "inline-flex items-center justify-center rounded-md font-medium transition-colors";
|
||||
|
||||
const variantClasses = {
|
||||
primary: "bg-qwen-orange text-white hover:bg-qwen-clay-orange",
|
||||
secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200",
|
||||
ghost: "hover:bg-gray-100"
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
sm: "h-8 px-3 text-xs",
|
||||
md: "h-10 px-4 py-2 text-sm",
|
||||
lg: "h-12 px-6 text-base"
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]}`}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 4.2 混合使用现有和新组件
|
||||
```tsx
|
||||
// 在页面中混合使用
|
||||
import { PermissionDrawer } from './PermissionDrawer'; // 现有组件
|
||||
import { Button } from './ui/Button'; // 新的Tailwind组件
|
||||
|
||||
export const MyPage: React.FC = () => {
|
||||
return (
|
||||
<div>
|
||||
<PermissionDrawer /> {/* 现有组件 */}
|
||||
<Button variant="primary">New Tailwind Button</Button> {/* 新组件 */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## 5. 注意事项
|
||||
|
||||
### 5.1 主题兼容性
|
||||
确保Tailwind的颜色、间距、圆角等与现有设计系统保持一致。
|
||||
|
||||
### 5.2 构建性能
|
||||
配置Tailwind的内容扫描路径以避免不必要的CSS生成。
|
||||
|
||||
### 5.3 团队培训
|
||||
为团队成员提供Tailwind CSS培训，确保大家理解并能正确使用。
|
||||
|
||||
## 6. 下一步计划
|
||||
|
||||
1. 在新功能开发中优先使用Tailwind组件
|
||||
2. 逐步重构现有组件
|
||||
3. 建立完整的基于Tailwind的组件库
|
||||
4. 完善文档和团队规范
|
||||
Reference in New Issue
Block a user