mirror of
https://github.com/QwenLM/qwen-code.git
synced 2025-12-19 09:33:53 +00:00
chore(vscode-ide-companion): tailwind base
This commit is contained in:
yiliang114
@@ -1,191 +0,0 @@
|
||||
# 渐进式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. 完善文档和团队规范
|
||||
@@ -1,105 +0,0 @@
|
||||
# Tailwind CSS 渐进式集成计划
|
||||
|
||||
## 1. 当前状态分析
|
||||
|
||||
### 已完成的配置
|
||||
- [x] Tailwind CSS 已添加到项目依赖
|
||||
- [x] `tailwind.config.js` 配置文件已创建
|
||||
- [x] `postcss.config.js` 配置文件已创建
|
||||
- [x] `src/styles.css` 已创建并包含Tailwind指令
|
||||
|
||||
### 现有样式系统
|
||||
- SCSS/Sass 预处理器
|
||||
- CSS Modules 组件样式
|
||||
- 传统CSS文件
|
||||
- 从Claude Code提取的样式
|
||||
|
||||
## 2. 渐进式集成策略
|
||||
|
||||
### 阶段1：基础配置和工具类实现
|
||||
- 创建可复用的Tailwind工具类集合
|
||||
- 建立设计系统变量映射
|
||||
- 配置Tailwind主题以匹配现有设计
|
||||
|
||||
### 阶段2：组件样式重构
|
||||
- 选择性地重构部分组件以使用Tailwind
|
||||
- 保持向后兼容性
|
||||
- 逐步替换现有CSS类
|
||||
|
||||
### 阶段3：全面集成
|
||||
- 将Tailwind应用到所有组件
|
||||
- 移除冗余的CSS代码
|
||||
- 优化构建配置
|
||||
|
||||
## 3. 设计系统映射
|
||||
|
||||
### 颜色映射
|
||||
| 现有变量 | Tailwind 类 | 说明 |
|
||||
|---------|------------|------|
|
||||
| `--app-qwen-orange` | `text-indigo-500`, `bg-indigo-500` | 主要品牌色 |
|
||||
| `--app-primary-foreground` | `text-gray-900`, `text-white` | 主要前景色 |
|
||||
| `--app-secondary-foreground` | `text-gray-500`, `text-gray-400` | 次要前景色 |
|
||||
| `--app-primary-background` | `bg-gray-50`, `bg-gray-900` | 主要背景色 |
|
||||
| `--app-input-background` | `bg-white`, `bg-gray-800` | 输入框背景色 |
|
||||
|
||||
### 间距映射
|
||||
| 现有变量 | Tailwind 类 | 说明 |
|
||||
|---------|------------|------|
|
||||
| `--app-spacing-small` (4px) | `p-1`, `m-1` | 小间距 |
|
||||
| `--app-spacing-medium` (8px) | `p-2`, `m-2` | 中等间距 |
|
||||
| `--app-spacing-large` (12px) | `p-3`, `m-3` | 大间距 |
|
||||
| `--app-spacing-xlarge` (16px) | `p-4`, `m-4` | 超大间距 |
|
||||
|
||||
### 圆角映射
|
||||
| 现有变量 | Tailwind 类 | 说明 |
|
||||
|---------|------------|------|
|
||||
| `--corner-radius-small` (4px) | `rounded` | 小圆角 |
|
||||
| `--corner-radius-medium` (6px) | `rounded-md` | 中等圆角 |
|
||||
| `--corner-radius-large` (8px) | `rounded-lg` | 大圆角 |
|
||||
|
||||
## 4. 实施步骤
|
||||
|
||||
### 第一步：更新Tailwind配置
|
||||
```js
|
||||
// tailwind.config.js
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{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',
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
### 第二步：创建可复用组件类
|
||||
创建 `src/lib/tailwindUtils.js` 文件，导出常用的Tailwind类组合。
|
||||
|
||||
### 第三步：逐步重构组件
|
||||
选择几个关键组件开始重构，例如：
|
||||
1. `PermissionDrawer` 组件
|
||||
2. `SaveSessionDialog` 组件
|
||||
3. 输入框组件
|
||||
|
||||
## 5. 注意事项
|
||||
|
||||
1. **向后兼容性**：确保现有样式在重构过程中不受影响
|
||||
2. **性能优化**：配置Tailwind的内容扫描路径以避免不必要的CSS生成
|
||||
3. **团队协作**：建立Tailwind使用规范和最佳实践
|
||||
4. **测试验证**：在不同主题（深色/浅色）下验证样式效果
|
||||
@@ -1,177 +0,0 @@
|
||||
# 渐进式Tailwind CSS集成指南
|
||||
|
||||
## 1. 集成策略
|
||||
|
||||
我们采用渐进式的方式将Tailwind CSS集成到现有项目中，确保不影响现有功能：
|
||||
|
||||
1. **保持现有样式**：不修改现有的CSS文件和类名
|
||||
2. **并行使用**：在新组件或组件重构时使用Tailwind
|
||||
3. **逐步替换**：随着时间推移，逐步将现有CSS替换为Tailwind类
|
||||
|
||||
## 2. 实施步骤
|
||||
|
||||
### 步骤1：创建混合样式组件
|
||||
|
||||
我们可以创建同时使用传统CSS和Tailwind的组件：
|
||||
|
||||
```tsx
|
||||
// 示例：在现有组件中添加Tailwind类
|
||||
import './PermissionDrawer.css'; // 保留现有样式
|
||||
|
||||
export const PermissionDrawer: React.FC<PermissionDrawerProps> = ({ ... }) => {
|
||||
return (
|
||||
<div className="permission-drawer rounded-lg shadow-lg"> {/* 混合使用 */}
|
||||
{/* 现有内容 */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 步骤2：创建Tailwind增强版本
|
||||
|
||||
为现有组件创建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：创建可复用的Tailwind组件
|
||||
|
||||
创建新的小组件，专门使用Tailwind样式：
|
||||
|
||||
```tsx
|
||||
// components/ui/Button.tsx
|
||||
interface ButtonProps {
|
||||
variant?: 'primary' | 'secondary' | 'ghost';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## 3. 最佳实践
|
||||
|
||||
### 保持向后兼容性
|
||||
- 不要删除现有的CSS文件
|
||||
- 逐步替换，而不是一次性重构
|
||||
- 在团队中建立清晰的规范
|
||||
|
||||
### 性能优化
|
||||
```js
|
||||
// tailwind.config.js - 优化内容扫描
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{js,jsx,ts,tsx}", // 只扫描实际使用的文件
|
||||
],
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
### 设计系统一致性
|
||||
```js
|
||||
// tailwind.config.js - 扩展主题以匹配现有设计
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'qwen': {
|
||||
'orange': '#615fff',
|
||||
// ... 其他品牌色
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
'small': '4px',
|
||||
'medium': '6px',
|
||||
'large': '8px',
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## 4. 示例：逐步重构PermissionDrawer
|
||||
|
||||
### 当前状态（保留现有样式）
|
||||
```tsx
|
||||
// PermissionDrawer.tsx
|
||||
import './PermissionDrawer.css'; // 保留现有样式
|
||||
|
||||
export const PermissionDrawer = ({ ... }) => {
|
||||
return (
|
||||
<div className="permission-drawer">
|
||||
{/* 使用现有CSS类 */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 增强版本（添加Tailwind辅助类）
|
||||
```tsx
|
||||
// PermissionDrawer.tsx
|
||||
import './PermissionDrawer.css'; // 保留现有样式
|
||||
|
||||
export const PermissionDrawer = ({ ... }) => {
|
||||
return (
|
||||
<div className="permission-drawer flex flex-col"> {/* 添加Tailwind类作为补充 */}
|
||||
{/* 使用现有CSS类 */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### 完全Tailwind版本（可选的未来状态）
|
||||
```tsx
|
||||
// PermissionDrawer.tailwind.tsx
|
||||
export const PermissionDrawerTailwind = ({ ... }) => {
|
||||
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 flex flex-col">
|
||||
{/* 完全使用Tailwind类 */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## 5. 团队协作建议
|
||||
|
||||
1. **文档化**：维护一个Tailwind使用指南
|
||||
2. **代码审查**：在代码审查中检查Tailwind使用是否合理
|
||||
3. **组件库**：逐步建立基于Tailwind的组件库
|
||||
4. **培训**：为团队成员提供Tailwind培训
|
||||
@@ -40,11 +40,22 @@ const cssInjectPlugin = {
|
||||
// Handle CSS files
|
||||
build.onLoad({ filter: /\.css$/ }, async (args) => {
|
||||
const fs = await import('fs');
|
||||
const postcss = (await import('postcss')).default;
|
||||
const tailwindcss = (await import('tailwindcss')).default;
|
||||
const autoprefixer = (await import('autoprefixer')).default;
|
||||
|
||||
const css = await fs.promises.readFile(args.path, 'utf8');
|
||||
|
||||
// Process with PostCSS (Tailwind + Autoprefixer)
|
||||
const result = await postcss([tailwindcss, autoprefixer]).process(css, {
|
||||
from: args.path,
|
||||
to: args.path,
|
||||
});
|
||||
|
||||
return {
|
||||
contents: `
|
||||
const style = document.createElement('style');
|
||||
style.textContent = ${JSON.stringify(css)};
|
||||
style.textContent = ${JSON.stringify(result.css)};
|
||||
document.head.appendChild(style);
|
||||
`,
|
||||
loader: 'js',
|
||||
|
||||
@@ -11,6 +11,21 @@ export default [
|
||||
{
|
||||
files: ['**/*.ts', '**/*.tsx'],
|
||||
},
|
||||
{
|
||||
files: ['**/*.js', '**/*.cjs', '**/*.mjs'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2022,
|
||||
sourceType: 'commonjs',
|
||||
globals: {
|
||||
module: 'readonly',
|
||||
require: 'readonly',
|
||||
__dirname: 'readonly',
|
||||
__filename: 'readonly',
|
||||
process: 'readonly',
|
||||
console: 'readonly',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
plugins: {
|
||||
'@typescript-eslint': typescriptEslint,
|
||||
|
||||
@@ -154,7 +154,7 @@
|
||||
"build:dev": "npm run check-types && npm run lint && node esbuild.js",
|
||||
"build:prod": "node esbuild.js --production",
|
||||
"generate:notices": "node ./scripts/generate-notices.js",
|
||||
"prepare": "npm run generate:notices",
|
||||
"prepare1": "npm run generate:notices",
|
||||
"check-types": "tsc --noEmit",
|
||||
"lint": "eslint src",
|
||||
"watch": "npm-run-all2 -p watch:*",
|
||||
@@ -166,11 +166,13 @@
|
||||
"validate:notices": "node ./scripts/validate-notices.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@cfworker/json-schema": "^4.1.1",
|
||||
"@types/cors": "^2.8.19",
|
||||
"@types/express": "^5.0.3",
|
||||
"@types/node": "20.x",
|
||||
"@types/react": "^18.2.0",
|
||||
"@types/react-dom": "^18.2.0",
|
||||
"@types/semver": "^7.7.1",
|
||||
"@types/vscode": "^1.99.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.31.1",
|
||||
"@typescript-eslint/parser": "^8.31.1",
|
||||
@@ -187,6 +189,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@modelcontextprotocol/sdk": "^1.15.1",
|
||||
"@qwen-code/qwen-code-core": "file:../core",
|
||||
"cors": "^2.8.5",
|
||||
"express": "^5.1.0",
|
||||
"react": "^18.2.0",
|
||||
|
||||
42
packages/vscode-ide-companion/src/lib/tailwindUtils.d.ts
vendored
Normal file
42
packages/vscode-ide-companion/src/lib/tailwindUtils.d.ts
vendored
Normal file
@@ -0,0 +1,42 @@
|
||||
// Type declarations for tailwindUtils.js
|
||||
|
||||
export function buttonClasses(
|
||||
variant?: 'primary' | 'secondary' | 'ghost' | 'icon',
|
||||
disabled?: boolean,
|
||||
): string;
|
||||
|
||||
export function inputClasses(): string;
|
||||
|
||||
export function cardClasses(): string;
|
||||
|
||||
export function dialogClasses(): string;
|
||||
|
||||
export function qwenColorClasses(
|
||||
color: 'orange' | 'clay-orange' | 'ivory' | 'slate' | 'green',
|
||||
): string;
|
||||
|
||||
export function spacingClasses(
|
||||
size?: 'small' | 'medium' | 'large' | 'xlarge',
|
||||
direction?: 'all' | 'x' | 'y' | 't' | 'r' | 'b' | 'l',
|
||||
): string;
|
||||
|
||||
export function borderRadiusClasses(
|
||||
size?: 'small' | 'medium' | 'large',
|
||||
): string;
|
||||
|
||||
export const commonClasses: {
|
||||
flexCenter: string;
|
||||
flexBetween: string;
|
||||
flexCol: string;
|
||||
textMuted: string;
|
||||
textSmall: string;
|
||||
textLarge: string;
|
||||
fontWeightMedium: string;
|
||||
fontWeightSemibold: string;
|
||||
marginAuto: string;
|
||||
fullWidth: string;
|
||||
fullHeight: string;
|
||||
truncate: string;
|
||||
srOnly: string;
|
||||
transition: string;
|
||||
};
|
||||
@@ -414,7 +414,7 @@ describe('OpenFilesManager', () => {
|
||||
await vi.advanceTimersByTimeAsync(100);
|
||||
|
||||
file1 = manager.state.workspaceState!.openFiles!.find(
|
||||
(f) => f.path === '/test/file1.txt',
|
||||
(f: { path: string }) => f.path === '/test/file1.txt',
|
||||
)!;
|
||||
const file2 = manager.state.workspaceState!.openFiles![0];
|
||||
|
||||
|
||||
@@ -1,111 +0,0 @@
|
||||
/**
|
||||
* @license
|
||||
* Copyright 2025 Qwen Team
|
||||
* SPDX-License-Identifier: Apache-2.0
|
||||
*
|
||||
* Demo page showing how to use Tailwind components alongside existing CSS
|
||||
* This demonstrates the progressive adoption approach
|
||||
*/
|
||||
|
||||
import type React from 'react';
|
||||
import { Button } from './ui/Button';
|
||||
import { Card } from './ui/Card';
|
||||
|
||||
/**
|
||||
* Demo component showing how to use Tailwind components
|
||||
* alongside existing CSS-based components
|
||||
*/
|
||||
export const TailwindDemo: React.FC = () => {
|
||||
return (
|
||||
<div className="p-4 max-w-2xl mx-auto">
|
||||
<h1 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
|
||||
Tailwind CSS Progressive Adoption Demo
|
||||
</h1>
|
||||
|
||||
<p className="mb-6 text-gray-700 dark:text-gray-300">
|
||||
This page demonstrates how to gradually adopt Tailwind CSS in an existing project
|
||||
while maintaining compatibility with existing CSS styles.
|
||||
</p>
|
||||
|
||||
{/* Example 1: Using new Tailwind components */}
|
||||
<Card className="mb-6">
|
||||
<Card.Header>
|
||||
<h2 className="text-xl font-semibold">New Components with Tailwind</h2>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p className="mb-4 text-gray-600 dark:text-gray-400">
|
||||
These are new components built with Tailwind CSS:
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button variant="primary">Primary Button</Button>
|
||||
<Button variant="secondary">Secondary Button</Button>
|
||||
<Button variant="ghost">Ghost Button</Button>
|
||||
</div>
|
||||
</Card.Content>
|
||||
</Card>
|
||||
|
||||
{/* Example 2: Hybrid approach - mixing Tailwind with existing styles */}
|
||||
<div className="permission-request-card mb-6 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-xl font-semibold mb-4">Hybrid Approach</h2>
|
||||
<p className="mb-4 text-gray-600 dark:text-gray-400">
|
||||
This card uses existing CSS classes but enhances them with Tailwind utilities:
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button className="permission-confirm-button bg-qwen-orange hover:bg-qwen-clay-orange text-qwen-ivory px-4 py-2 rounded">
|
||||
Enhanced Button
|
||||
</button>
|
||||
<button className="permission-option bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700 px-4 py-2 rounded">
|
||||
Hybrid Option
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Example 3: Utility-first approach */}
|
||||
<div className="mb-6 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">Utility-First Approach</h2>
|
||||
<p className="mb-4 text-gray-600 dark:text-gray-400">
|
||||
This section uses Tailwind's utility-first approach:
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<h3 className="font-medium text-blue-800 dark:text-blue-200">Feature 1</h3>
|
||||
<p className="mt-2 text-sm text-blue-600 dark:text-blue-300">
|
||||
Description of feature 1
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
|
||||
<h3 className="font-medium text-green-800 dark:text-green-200">Feature 2</h3>
|
||||
<p className="mt-2 text-sm text-green-600 dark:text-green-300">
|
||||
Description of feature 2
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
|
||||
<h3 className="font-medium text-purple-800 dark:text-purple-200">Feature 3</h3>
|
||||
<p className="mt-2 text-sm text-purple-600 dark:text-purple-300">
|
||||
Description of feature 3
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Example 4: Responsive design */}
|
||||
<div className="p-6 bg-gradient-to-r from-qwen-orange to-qwen-clay-orange rounded-lg text-white">
|
||||
<h2 className="text-xl font-semibold mb-2">Responsive Design</h2>
|
||||
<p className="mb-4 opacity-90">
|
||||
Tailwind makes responsive design easy with breakpoint prefixes:
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="flex-1 p-4 bg-black/10 rounded">
|
||||
<p className="text-center">Column 1</p>
|
||||
</div>
|
||||
<div className="flex-1 p-4 bg-black/10 rounded">
|
||||
<p className="text-center">Column 2</p>
|
||||
</div>
|
||||
<div className="flex-1 p-4 bg-black/10 rounded">
|
||||
<p className="text-center">Column 3</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -6,6 +6,7 @@
|
||||
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { App } from './App.js';
|
||||
import './tailwind.css';
|
||||
import './App.scss';
|
||||
import './ClaudeCodeStyles.css';
|
||||
|
||||
|
||||
3
packages/vscode-ide-companion/src/webview/tailwind.css
Normal file
3
packages/vscode-ide-companion/src/webview/tailwind.css
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -1,9 +1,9 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
// eslint-disable-next-line no-undef
|
||||
module.exports = {
|
||||
content: [
|
||||
// 渐进式采用策略：只扫描新创建的Tailwind组件
|
||||
"./src/webview/components/ui/**/*.{js,jsx,ts,tsx}",
|
||||
"./src/webview/components/TailwindDemo.tsx",
|
||||
'./src/webview/components/ui/**/*.{js,jsx,ts,tsx}',
|
||||
// 当需要在更多组件中使用Tailwind时，可以逐步添加路径
|
||||
// "./src/webview/components/NewComponent/**/*.{js,jsx,ts,tsx}",
|
||||
// "./src/webview/pages/**/*.{js,jsx,ts,tsx}",
|
||||
@@ -11,26 +11,26 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'qwen': {
|
||||
'orange': '#615fff',
|
||||
qwen: {
|
||||
orange: '#615fff',
|
||||
'clay-orange': '#4f46e5',
|
||||
'ivory': '#f5f5ff',
|
||||
'slate': '#141420',
|
||||
'green': '#6bcf7f',
|
||||
}
|
||||
ivory: '#f5f5ff',
|
||||
slate: '#141420',
|
||||
green: '#6bcf7f',
|
||||
},
|
||||
},
|
||||
borderRadius: {
|
||||
'small': '4px',
|
||||
'medium': '6px',
|
||||
'large': '8px',
|
||||
small: '4px',
|
||||
medium: '6px',
|
||||
large: '8px',
|
||||
},
|
||||
spacing: {
|
||||
'small': '4px',
|
||||
'medium': '8px',
|
||||
'large': '12px',
|
||||
'xlarge': '16px',
|
||||
}
|
||||
small: '4px',
|
||||
medium: '8px',
|
||||
large: '12px',
|
||||
xlarge: '16px',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user