feat: 优化

.claude/skills/antd-to-shadcn/SKILL.md

@@ -19,11 +19,15 @@ description: Vue 3 项目从 Ant Design Vue 迁移到 shadcn-vue 的专业技能
 ### 抵制过时设计
 
 **拒绝老气 UI**：
-- ❌ 粗重边框、多重边框嵌套
+- ❌ 粗重边框、多重边框嵌套（边框重叠）
 - ❌ 灰暗沉闷的配色
 - ❌ 过度装饰的渐变和阴影
 - ❌ 拥挤无呼吸感的布局
 - ❌ 间距混乱、缺乏层级
+- ❌ **老旧 Tabs 设计**（下方粗线、方块按钮感）
+- ❌ **Element UI 风格组件**（el-tabs、el-form 等）
+- ❌ **密集表单**（label 左对齐、无间距）
+- ❌ **重阴影卡片**（shadow-lg 以上）
 
 **拥抱现代设计**：
 - ✅ 轻量边框或无边框设计
@@ -31,6 +35,20 @@ description: Vue 3 项目从 Ant Design Vue 迁移到 shadcn-vue 的专业技能
 - ✅ 克制的阴影（shadow-sm 为主）
 - ✅ 充足留白，呼吸感
 - ✅ 清晰的视觉层级（8px 间距递进）
+- ✅ **现代 Tabs**（胶囊式、underline 轻量）
+- ✅ **宽松表单**（label 上方、垂直布局）
+
+### 老旧组件识别与替换
+
+| 老旧模式 | 现代替代 |
+|---------|---------|
+| `a-tabs` / `el-tabs` 底部粗线 | shadcn `Tabs` 胶囊式 |
+| `a-segmented` | 自定义 pill 按钮 |
+| 密集 `a-form` | 宽松 `Form` 垂直布局 |
+| `a-card` 重阴影 | `Card` 无边框或轻边框 |
+| `a-descriptions` | 自定义 grid 布局 |
+| `a-breadcrumb` | shadcn `Breadcrumb` |
+| `a-pagination` | shadcn `Pagination` |
 
 ### 颜色设计原则
 

.claude/skills/antd-to-shadcn/references/STYLES.md

@@ -482,3 +482,189 @@ Tailwind 使用 4px 基准：
   </div>
 </template>
 ```
+
+---
+
+## 老旧组件识别与现代化
+
+### 老旧 Tabs 设计
+
+**❌ 拒绝的老旧模式**：
+- 底部粗线指示器（2-3px 实线）
+- 方块按钮感，无圆角
+- 灰色背景分割条
+- 拥挤的标签间距
+
+**✅ 现代替代方案**：
+
+```vue
+<!-- 老旧: a-tabs / el-tabs -->
+<a-tabs v-model:activeKey="activeKey">
+  <a-tab-pane key="1" tab="标签一" />
+  <a-tab-pane key="2" tab="标签二" />
+</a-tabs>
+
+<!-- 现代: shadcn Tabs -->
+<Tabs v-model="activeKey" class="w-full">
+  <TabsList class="bg-muted/50 p-1 rounded-lg">
+    <TabsTrigger value="1" class="rounded-md data-[state=active]:bg-background">
+      标签一
+    </TabsTrigger>
+    <TabsTrigger value="2" class="rounded-md data-[state=active]:bg-background">
+      标签二
+    </TabsTrigger>
+  </TabsList>
+  <TabsContent value="1">内容一</TabsContent>
+  <TabsContent value="2">内容二</TabsContent>
+</Tabs>
+```
+
+### 老旧表单设计
+
+**❌ 拒绝的老旧模式**：
+- Label 左对齐，密集排列
+- 表单项间距过小（<16px）
+- 边框重叠，视觉混乱
+- 灰暗的禁用状态
+
+**✅ 现代替代方案**：
+
+```vue
+<!-- 现代表单: 垂直布局，宽松间距 -->
+<form class="space-y-6">
+  <div class="space-y-2">
+    <Label class="text-sm font-medium">用户名</Label>
+    <Input class="h-10" placeholder="请输入" />
+    <p class="text-xs text-muted-foreground">提示信息</p>
+  </div>
+
+  <div class="space-y-2">
+    <Label>密码</Label>
+    <Input type="password" class="h-10" />
+  </div>
+
+  <div class="flex gap-3 pt-4">
+    <Button variant="outline">取消</Button>
+    <Button>提交</Button>
+  </div>
+</form>
+```
+
+### 老旧卡片设计
+
+**❌ 拒绝的老旧模式**：
+- 重阴影（shadow-lg 以上）
+- 多重边框嵌套
+- 灰暗的头部背景
+- 拥挤的内边距
+
+**✅ 现代替代方案**：
+
+```vue
+<!-- 现代卡片: 轻量、呼吸感 -->
+<div class="rounded-xl border bg-card p-6">
+  <div class="flex items-center justify-between pb-4 border-b">
+    <h3 class="text-lg font-semibold">标题</h3>
+    <Button variant="ghost" size="sm">操作</Button>
+  </div>
+  <div class="pt-4 space-y-4">
+    <!-- 内容 -->
+  </div>
+</div>
+
+<!-- 或使用无边框设计 -->
+<div class="bg-muted/30 rounded-xl p-6">
+  <!-- 内容 -->
+</div>
+```
+
+### 老旧按钮设计
+
+**❌ 拒绝的老旧模式**：
+- 方角按钮
+- 过重的渐变背景
+- 灰暗的 hover 状态
+
+**✅ 现代替代方案**：
+
+```vue
+<!-- 现代按钮: 圆角、轻盈 -->
+<div class="flex gap-2">
+  <Button variant="default" class="rounded-lg">主要</Button>
+  <Button variant="secondary" class="rounded-lg">次要</Button>
+  <Button variant="outline" class="rounded-lg">描边</Button>
+  <Button variant="ghost" class="rounded-lg">幽灵</Button>
+  <Button variant="destructive" class="rounded-lg">危险</Button>
+</div>
+```
+
+### 老旧表格设计
+
+**❌ 拒绝的老旧模式**：
+- 斑马纹背景（过时）
+- 粗重的边框线
+- 拥挤的单元格
+- 灰色的表头背景
+
+**✅ 现代替代方案**：
+
+```vue
+<!-- 现代表格: 简洁、留白 -->
+<Table>
+  <TableHeader>
+    <TableRow class="hover:bg-transparent border-b">
+      <TableHead class="h-12 font-medium">列名</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow class="hover:bg-muted/50">
+      <TableCell class="py-4">内容</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### 边框重叠问题
+
+**识别边框重叠**：
+- 多个卡片紧挨，边框叠加成2px
+- 表格单元格边框重叠
+- 嵌套容器边框累积
+
+**解决方案**：
+```vue
+<!-- ❌ 边框重叠 -->
+<div class="border p-4">
+  <div class="border p-4">  <!-- 边框叠加 -->
+    内容
+  </div>
+</div>
+
+<!-- ✅ 避免重叠 -->
+<div class="border-b pb-4">
+  <div class="pt-4">  <!-- 用 padding 分隔 -->
+    内容
+  </div>
+</div>
+
+<!-- 或使用负边距 -->
+<div class="border rounded-lg -space-y-px">
+  <div class="p-4 border-b last:border-b-0">项目1</div>
+  <div class="p-4 border-b last:border-b-0">项目2</div>
+</div>
+```
+
+---
+
+## 设计审查清单
+
+迁移时检查以下问题：
+
+- [ ] Tabs 是否使用现代胶囊式设计？
+- [ ] 表单是否有足够间距（space-y-6）？
+- [ ] 卡片阴影是否克制（shadow-sm）？
+- [ ] 边框是否避免重叠？
+- [ ] 颜色是否有活力（非灰暗）？
+- [ ] 按钮是否有圆角（rounded-lg）？
+- [ ] 表格是否简洁无斑马纹？
+- [ ] 整体是否有呼吸感？