From cd1382533cf46ec8f77797d6743581d0e93a90a1 Mon Sep 17 00:00:00 2001
From: sion123 <450702724@qq.com>
Date: Mon, 16 Mar 2026 00:49:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../antd-to-shadcn/references/STYLES.md | 570 ++++++------------
1 file changed, 179 insertions(+), 391 deletions(-)
diff --git a/.claude/skills/antd-to-shadcn/references/STYLES.md b/.claude/skills/antd-to-shadcn/references/STYLES.md
index 9bf424b627..94b041900c 100644
--- a/.claude/skills/antd-to-shadcn/references/STYLES.md
+++ b/.claude/skills/antd-to-shadcn/references/STYLES.md
@@ -5,13 +5,14 @@
## 目录
1. [现代设计原则](#现代设计原则)
-2. [颜色系统](#颜色系统)
-3. [间距系统](#间距系统)
-4. [字体系统](#字体系统)
-5. [阴影系统](#阴影系统)
-6. [圆角系统](#圆角系统)
-7. [响应式布局](#响应式布局)
-8. [状态样式](#状态样式)
+2. [老旧组件识别与现代化](#老旧组件识别与现代化)
+3. [颜色系统](#颜色系统)
+4. [间距系统](#间距系统)
+5. [字体系统](#字体系统)
+6. [阴影系统](#阴影系统)
+7. [圆角系统](#圆角系统)
+8. [响应式布局](#响应式布局)
+9. [状态样式](#状态样式)
---
@@ -26,6 +27,8 @@
- 拥挤无呼吸感的布局
- 间距混乱、缺乏层级感
- 老式的表单样式（密集排列）
+- **老旧 Tabs 设计**（底部粗线、方块按钮感）
+- **Element UI 风格组件**（el-tabs、el-form 等）
**✅ 拥抱现代设计**：
- 轻量边框或无边框设计
@@ -34,6 +37,7 @@
- 充足留白，呼吸感
- 清晰的视觉层级（4px 间距递进）
- 现代表单（宽松布局，清晰标签）
+- **现代 Tabs**（胶囊式、underline 轻量）
### 颜色活力设计
@@ -61,7 +65,8 @@
### 间距层级感
```
-紧凑：gap-2 (8px) - 同组元素
+紧密：gap-1 (4px) - 图标与文字
+标准：gap-2 (8px) - 同组元素
舒适：gap-3 (12px) - 表单项之间
宽松：gap-4 (16px) - 卡片内容
分区：gap-6 (24px) - 不同区块
@@ -70,6 +75,172 @@
---
+## 老旧组件识别与现代化
+
+### 老旧 Tabs 设计
+
+**❌ 拒绝的老旧模式**：
+- 底部粗线指示器（2-3px 实线）
+- 方块按钮感，无圆角
+- 灰色背景分割条
+- 拥挤的标签间距
+
+**✅ 现代替代方案**：
+
+```vue
+
+
+
+
+
+
+
+
+
+
+ 标签一
+
+
+ 标签二
+
+
+ 内容一
+ 内容二
+
+```
+
+### 老旧表单设计
+
+**❌ 拒绝的老旧模式**：
+- Label 左对齐，密集排列
+- 表单项间距过小
+- 边框重叠，视觉混乱
+- 灰暗的禁用状态
+
+**✅ 现代替代方案**：
+
+```vue
+
+
+```
+
+### 老旧卡片设计
+
+**❌ 拒绝的老旧模式**：
+- 重阴影（shadow-lg 以上）
+- 多重边框嵌套
+- 灰暗的头部背景
+
+**✅ 现代替代方案**：
+
+```vue
+
+
+
+
+
+
+
+```
+
+### 老旧按钮设计
+
+**❌ 拒绝的老旧模式**：
+- 方角按钮
+- 过重的渐变背景
+- 灰暗的 hover 状态
+
+**✅ 现代替代方案**：
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+### 老旧表格设计
+
+**❌ 拒绝的老旧模式**：
+- 斑马纹背景（过时）
+- 粗重的边框线
+- 拥挤的单元格
+- 灰色的表头背景
+
+**✅ 现代替代方案**：
+
+```vue
+
+
+
+
+ 列名
+
+
+
+
+ 内容
+
+
+
+```
+
+### 边框重叠问题
+
+**识别边框重叠**：
+- 多个卡片紧挨，边框叠加成 2px
+- 表格单元格边框重叠
+- 嵌套容器边框累积
+
+**解决方案**：
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+---
+
## 颜色系统
### 语义化颜色变量
@@ -119,7 +290,6 @@
border: 1px solid var(--border);
}
-
```
### Ant Design 颜色迁移
@@ -179,16 +349,6 @@ Tailwind 使用 4px 基准：
```
-### Ant Design 间距迁移
-
-| Ant Design | Tailwind |
-|------------|----------|
-| `margin: 16px` | `m-4` |
-| `padding: 24px` | `p-6` |
-| `gap: 8px` | `gap-2` |
-| `space-between` | `justify-between` |
-| `align-center` | `items-center` |
-
---
## 字体系统
@@ -216,16 +376,6 @@ Tailwind 使用 4px 基准：
```
-### 行高
-
-```vue
-
- 紧凑行高
- 正常行高
- 宽松行高
-
-```
-
---
## 阴影系统
@@ -238,7 +388,6 @@ Tailwind 使用 4px 基准：
--shadow-md /* 中等阴影 */
--shadow-lg /* 大阴影 */
--shadow-xl /* 超大阴影 */
---shadow-2xl /* 巨大阴影 */
```
### 使用
@@ -251,50 +400,18 @@ Tailwind 使用 4px 基准：
```
-### Ant Design 阴影迁移
-
-| Ant Design | Tailwind |
-|------------|----------|
-| `box-shadow: 0 2px 8px rgba(0,0,0,0.15)` | `shadow-md` |
-| Modal 阴影 | `shadow-xl` |
-| Popover 阴影 | `shadow-lg` |
-
---
## 圆角系统
-定义在 `theme.css`：
-
-```css
---radius-sm /* 小圆角 */
---radius-md /* 中圆角 */
---radius-lg /* 大圆角 */
---radius-xl /* 超大圆角 */
-```
-
-### 使用
-
```vue
-
卡片
-
-
- 自定义
```
-### Ant Design 圆角迁移
-
-| Ant Design | Tailwind |
-|------------|----------|
-| `border-radius: 2px` | `rounded-sm` |
-| `border-radius: 4px` | `rounded` |
-| `border-radius: 8px` | `rounded-lg` |
-| `border-radius: 12px` | `rounded-xl` |
-
---
## 响应式布局
@@ -309,29 +426,6 @@ Tailwind 使用 4px 基准：
| `xl:` | 1280px |
| `2xl:` | 1536px |
-### 响应式示例
-
-```vue
-
-
-
- ...
-
-
-
- 桌面端显示
- 移动端显示
-
-
-
- ...
-
-
-
- 标题
-
-```
-
### 栅格迁移
```vue
@@ -346,312 +440,6 @@ Tailwind 使用 4px 基准：
...
...
-
-
-
-```
-
----
-
-## 状态样式
-
-### 悬停
-
-```vue
-
-
- 卡片
-
-```
-
-### 焦点
-
-```vue
-
-
-
-
-```
-
-### 禁用
-
-```vue
-
-
-
-
-```
-
-### 加载中
-
-```vue
-
-
-
-```
-
----
-
-## 过渡动画
-
-### 基础过渡
-
-```vue
-
-
-
-
-
- 卡片
-
-
- 元素
-
-```
-
-### 动画时长
-
-```vue
-
- 快速
- 正常
- 慢速
-
-```
-
----
-
-## 常见样式模式
-
-### 卡片
-
-```vue
-
-
-
-```
-
-### 表单项
-
-```vue
-
-
-
-```
-
-### 操作栏
-
-```vue
-
-
-
共 {{ total }} 条
-
-
-
-
-
-
-
暂无数据
-
点击添加按钮创建
-
-
-
-
-```
-
-### 老旧按钮设计
-
-**❌ 拒绝的老旧模式**：
-- 方角按钮
-- 过重的渐变背景
-- 灰暗的 hover 状态
-
-**✅ 现代替代方案**：
-
-```vue
-
-
-
-
-
-
-
-
-```
-
-### 老旧表格设计
-
-**❌ 拒绝的老旧模式**：
-- 斑马纹背景（过时）
-- 粗重的边框线
-- 拥挤的单元格
-- 灰色的表头背景
-
-**✅ 现代替代方案**：
-
-```vue
-
-
-
-
- 列名
-
-
-
-
- 内容
-
-
-
-```
-
-### 边框重叠问题
-
-**识别边框重叠**：
-- 多个卡片紧挨，边框叠加成2px
-- 表格单元格边框重叠
-- 嵌套容器边框累积
-
-**解决方案**：
-```vue
-
-
-
-
-
-
-
-
```
---