feat: 优化
This commit is contained in:
@@ -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
|
||||
<!-- 老旧: 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 左对齐，密集排列
|
||||
- 表单项间距过小
|
||||
- 边框重叠，视觉混乱
|
||||
- 灰暗的禁用状态
|
||||
|
||||
**✅ 现代替代方案**：
|
||||
|
||||
```vue
|
||||
<!-- 现代表单: 垂直布局、宽松间距 -->
|
||||
<form class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-medium">用户名</Label>
|
||||
<Input class="h-10" />
|
||||
<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 shadow-sm">
|
||||
<h3 class="text-lg font-semibold">标题</h3>
|
||||
<p class="text-muted-foreground mt-2">描述文字</p>
|
||||
</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>
|
||||
|
||||
<!-- ✅ 避免重叠：用 padding 分隔 -->
|
||||
<div class="border-b pb-4">
|
||||
<div class="pt-4">
|
||||
内容
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ✅ 使用负边距合并边框 -->
|
||||
<div class="border rounded-lg divide-y">
|
||||
<div class="p-4">项目1</div>
|
||||
<div class="p-4">项目2</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 颜色系统
|
||||
|
||||
### 语义化颜色变量
|
||||
@@ -119,7 +290,6 @@
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
</style>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Ant Design 颜色迁移
|
||||
@@ -179,16 +349,6 @@ Tailwind 使用 4px 基准：
|
||||
</div>
|
||||
```
|
||||
|
||||
### 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 基准：
|
||||
</template>
|
||||
```
|
||||
|
||||
### 行高
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<p class="leading-tight">紧凑行高</p>
|
||||
<p class="leading-normal">正常行高</p>
|
||||
<p class="leading-relaxed">宽松行高</p>
|
||||
</template>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 阴影系统
|
||||
@@ -238,7 +388,6 @@ Tailwind 使用 4px 基准：
|
||||
--shadow-md /* 中等阴影 */
|
||||
--shadow-lg /* 大阴影 */
|
||||
--shadow-xl /* 超大阴影 */
|
||||
--shadow-2xl /* 巨大阴影 */
|
||||
```
|
||||
|
||||
### 使用
|
||||
@@ -251,50 +400,18 @@ Tailwind 使用 4px 基准：
|
||||
</template>
|
||||
```
|
||||
|
||||
### 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
|
||||
<template>
|
||||
<!-- 使用 Tailwind 类 -->
|
||||
<Button class="rounded-md">按钮</Button>
|
||||
<Card class="rounded-lg">卡片</Card>
|
||||
<Input class="rounded-md" />
|
||||
|
||||
<!-- 自定义圆角 -->
|
||||
<div class="rounded-[var(--radius-lg)]">自定义</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 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
|
||||
<template>
|
||||
<!-- 响应式网格 -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<Card v-for="item in items">...</Card>
|
||||
</div>
|
||||
|
||||
<!-- 响应式隐藏 -->
|
||||
<div class="hidden md:block">桌面端显示</div>
|
||||
<div class="md:hidden">移动端显示</div>
|
||||
|
||||
<!-- 响应式间距 -->
|
||||
<div class="p-4 md:p-6 lg:p-8">
|
||||
...
|
||||
</div>
|
||||
|
||||
<!-- 响应式文字 -->
|
||||
<h1 class="text-2xl md:text-3xl lg:text-4xl">标题</h1>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 栅格迁移
|
||||
|
||||
```vue
|
||||
@@ -346,312 +440,6 @@ Tailwind 使用 4px 基准：
|
||||
<div>...</div>
|
||||
<div>...</div>
|
||||
</div>
|
||||
|
||||
<!-- 或使用 Flex -->
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-1">...</div>
|
||||
<div class="flex-1">...</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 状态样式
|
||||
|
||||
### 悬停
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Button class="hover:bg-primary/90">按钮</Button>
|
||||
<Card class="hover:shadow-md transition-shadow">卡片</Card>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 焦点
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Input class="focus:ring-2 focus:ring-primary" />
|
||||
<Button class="focus-visible:ring-2 focus-visible:ring-primary">
|
||||
按钮
|
||||
</Button>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 禁用
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Button class="disabled:opacity-50 disabled:cursor-not-allowed">
|
||||
按钮
|
||||
</Button>
|
||||
<Input class="disabled:bg-muted disabled:cursor-not-allowed" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### 加载中
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Button class="relative" disabled>
|
||||
<Spinner v-if="loading" class="absolute" />
|
||||
<span :class="{ 'opacity-0': loading }">提交</span>
|
||||
</Button>
|
||||
</template>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 过渡动画
|
||||
|
||||
### 基础过渡
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<!-- 颜色过渡 -->
|
||||
<Button class="transition-colors hover:bg-primary">按钮</Button>
|
||||
|
||||
<!-- 阴影过渡 -->
|
||||
<Card class="transition-shadow hover:shadow-lg">卡片</Card>
|
||||
|
||||
<!-- 全属性过渡 -->
|
||||
<div class="transition-all hover:scale-105">元素</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 动画时长
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="transition-colors duration-150">快速</div>
|
||||
<div class="transition-colors duration-200">正常</div>
|
||||
<div class="transition-colors duration-300">慢速</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 常见样式模式
|
||||
|
||||
### 卡片
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="rounded-lg border bg-card p-6 shadow-sm">
|
||||
<h3 class="text-lg font-semibold">标题</h3>
|
||||
<p class="text-muted-foreground mt-2">描述文字</p>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 表单项
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="space-y-2">
|
||||
<Label class="text-sm font-medium">标签</Label>
|
||||
<Input class="h-10" />
|
||||
<p class="text-xs text-muted-foreground">提示文字</p>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 操作栏
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="flex items-center justify-between py-4">
|
||||
<div class="text-sm text-muted-foreground">共 {{ total }} 条</div>
|
||||
<div class="flex gap-2">
|
||||
<Button variant="outline" size="sm">导出</Button>
|
||||
<Button size="sm">添加</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
### 空状态
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-center py-12 text-center">
|
||||
<Icon icon="lucide:inbox" class="h-12 w-12 text-muted-foreground/50" />
|
||||
<h3 class="mt-4 text-lg font-medium">暂无数据</h3>
|
||||
<p class="mt-2 text-sm text-muted-foreground">点击添加按钮创建</p>
|
||||
<Button class="mt-4">添加</Button>
|
||||
</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>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user