From 6639a751bcfea760b4e8969f6404d61c5ba78d2c Mon Sep 17 00:00:00 2001 From: sion123 <450702724@qq.com> Date: Mon, 16 Mar 2026 00:35:45 +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 --- .claude/skills/antd-to-shadcn/SKILL.md | 211 ++++++ .../references/COMPONENT_MAP.md | 162 +++++ .../references/MIGRATION_PATTERNS.md | 662 ++++++++++++++++++ .../antd-to-shadcn/references/STYLES.md | 484 +++++++++++++ .../app/web-gold/docs/DESIGN_SYSTEM_PROMPT.md | 548 --------------- .../web-gold/src/components/SidebarNav.vue | 18 +- frontend/app/web-gold/src/theme.css | 226 +++++- 7 files changed, 1752 insertions(+), 559 deletions(-) create mode 100644 .claude/skills/antd-to-shadcn/SKILL.md create mode 100644 .claude/skills/antd-to-shadcn/references/COMPONENT_MAP.md create mode 100644 .claude/skills/antd-to-shadcn/references/MIGRATION_PATTERNS.md create mode 100644 .claude/skills/antd-to-shadcn/references/STYLES.md delete mode 100644 frontend/app/web-gold/docs/DESIGN_SYSTEM_PROMPT.md diff --git a/.claude/skills/antd-to-shadcn/SKILL.md b/.claude/skills/antd-to-shadcn/SKILL.md new file mode 100644 index 0000000000..e508ee8c6b --- /dev/null +++ b/.claude/skills/antd-to-shadcn/SKILL.md @@ -0,0 +1,211 @@ +--- +name: antd-to-shadcn +description: | + Vue 3 项目从 Ant Design Vue 迁移到 shadcn-vue 的专业技能。 + + 当用户请求以下操作时使用此技能： + - 将 Ant Design 组件替换为 shadcn 组件 + - 迁移表单、表格、弹窗等复杂组件 + - 保持业务功能不变的前提下现代化 UI + - 颜色解耦和主题配置 + - 组件间距和布局优化 + + 触发词：迁移、shadcn、antd 替换、组件升级、UI 现代化 +--- + +# Ant Design Vue → shadcn-vue 迁移技能 + +将 Vue 3 + Ant Design Vue 项目迁移到 shadcn-vue + TailwindCSS。 + +## 核心原则 + +1. **业务功能不变** - 只改 UI 层，不改业务逻辑 +2. **现代化 UI** - 采用 shadcn 设计语言，简洁现代 +3. **颜色解耦** - 使用 CSS 变量，支持主题切换 +4. **渐进式迁移** - 逐个组件替换，保持可运行 + +## 设计品质要求 + +### 抵制过时设计 + +**拒绝老气 UI**： +- ❌ 粗重边框、多重边框嵌套 +- ❌ 灰暗沉闷的配色 +- ❌ 过度装饰的渐变和阴影 +- ❌ 拥挤无呼吸感的布局 +- ❌ 间距混乱、缺乏层级 + +**拥抱现代设计**： +- ✅ 轻量边框或无边框设计 +- ✅ 明亮有活力的色彩 +- ✅ 克制的阴影（shadow-sm 为主） +- ✅ 充足留白，呼吸感 +- ✅ 清晰的视觉层级（8px 间距递进） + +### 颜色设计原则 + +**年轻活力感**： +- 主色饱和度适中（oklch chroma 0.14-0.18） +- 避免过于灰暗的中间色 +- 使用微妙渐变增加质感 +- 深色模式保持足够对比度 + +**发现优秀配色时**： +1. 提取关键颜色值 +2. 添加到 `style.css` 设计令牌 +3. 使用语义化命名（如 `--color-accent-blue`） +4. 在组件中通过变量引用 + +### 间距层级规范 + +``` +紧密：gap-1 (4px) - 图标与文字 +标准：gap-2 (8px) - 同组元素 +舒适：gap-3 (12px) - 表单项之间 +宽松：gap-4 (16px) - 卡片内容 +分区：gap-6 (24px) - 不同区块 +``` + +## 项目上下文 + +``` +前端目录: frontend/app/web-gold/ +组件目录: src/components/ui/ # shadcn 组件 +主题文件: src/theme.css # shadcn 主题变量 +样式文件: src/style.css # 设计令牌 +``` + +## 迁移工作流 + +### Step 1: 识别 Ant Design 组件 + +扫描文件中的 Ant Design 导入： +```vue +// 需要替换的模式 +import { Button, Input, Form, Table, Modal, ... } from 'ant-design-vue' +import { IconName } from '@ant-design/icons-vue' +import { message, notification } from 'ant-design-vue' +``` + +### Step 2: 组件映射 + +参见 [COMPONENT_MAP.md](references/COMPONENT_MAP.md) 获取完整映射表。 + +快速参考： +| Ant Design | shadcn-vue | +|------------|------------| +| a-button | Button | +| a-input | Input | +| a-form | Form | +| a-table | Table | +| a-modal | Dialog | +| a-select | Select | +| a-message | Sonner (toast) | +| a-icon | Iconify lucide | + +### Step 3: 迁移模式 + +参见 [MIGRATION_PATTERNS.md](references/MIGRATION_PATTERNS.md) 获取详细代码示例。 + +### Step 4: 样式迁移 + +参见 [STYLES.md](references/STYLES.md) 获取样式迁移指南。 + +## 执行迁移 + +### 1. 表单组件迁移 + +```vue + + + + + + + + +
+ + + 标签 + + + + + + +
+``` + +### 2. 表格组件迁移 + +```vue + + + + + + + + {{ col.title }} + + + + + {{ row[col.dataIndex] }} + + +
+``` + +### 3. 消息提示迁移 + +```javascript +// Before +import { message } from 'ant-design-vue' +message.success('操作成功') + +// After +import { toast } from 'vue-sonner' +toast.success('操作成功') +``` + +### 4. 图标迁移 + +```vue + +import { UserOutlined } from '@ant-design/icons-vue' + + + +import { Icon } from '@iconify/vue' + +``` + +## 间距规范 + +使用 Tailwind 间距类替代固定值： +- `p-4` = 16px +- `gap-3` = 12px +- `space-y-4` = 子元素间 16px 间距 + +## 颜色使用 + +使用语义化 CSS 变量： +```css +color: var(--foreground) /* 主文字 */ +color: var(--muted-foreground) /* 次要文字 */ +background: var(--background) /* 背景 */ +background: var(--primary) /* 主色 */ +border-color: var(--border) /* 边框 */ +``` + +## 检查清单 + +迁移完成后验证： +- [ ] 所有 a- 前缀组件已替换 +- [ ] ant-design-vue 导入已移除 +- [ ] 图标已迁移到 Iconify +- [ ] message/notification 已迁移到 Sonner +- [ ] 样式使用 Tailwind 类或 CSS 变量 +- [ ] 业务功能测试通过 diff --git a/.claude/skills/antd-to-shadcn/references/COMPONENT_MAP.md b/.claude/skills/antd-to-shadcn/references/COMPONENT_MAP.md new file mode 100644 index 0000000000..322284f8ec --- /dev/null +++ b/.claude/skills/antd-to-shadcn/references/COMPONENT_MAP.md @@ -0,0 +1,162 @@ +# 组件映射表 + +完整的 Ant Design Vue → shadcn-vue 组件映射。 + +## 基础组件 + +| Ant Design | shadcn-vue | 说明 | +|------------|------------|------| +| `a-button` | `Button` | 按钮 | +| `a-input` | `Input` | 输入框 | +| `a-input-number` | `NumberField` | 数字输入 | +| `a-input-password` | `Input type="password"` | 密码输入 | +| `a-textarea` | `Textarea` | 多行文本 | +| `a-select` | `Select` | 下拉选择 | +| `a-radio` | `RadioGroup` + `RadioGroupItem` | 单选 | +| `a-checkbox` | `Checkbox` | 复选框 | +| `a-switch` | `Switch` | 开关 | +| `a-slider` | `Slider` | 滑动条 | +| `a-rate` | 自定义 | 评分（需自定义） | +| `a-upload` | 自定义 | 上传（需自定义） | + +## 表单组件 + +| Ant Design | shadcn-vue | 说明 | +|------------|------------|------| +| `a-form` | `Form` | 表单容器 | +| `a-form-item` | `FormItem` | 表单项 | +| `a-form-provider` | 自定义 | 表单上下文 | +| `a-range-picker` | `RangeCalendar` + `Popover` | 日期范围 | +| `a-date-picker` | `Calendar` + `Popover` | 日期选择 | +| `a-time-picker` | 自定义 | 时间选择 | + +## 数据展示 + +| Ant Design | shadcn-vue | 说明 | +|------------|------------|------| +| `a-table` | `Table` | 表格 | +| `a-list` | 自定义 | 列表 | +| `a-card` | `Card` | 卡片 | +| `a-descriptions` | 自定义 | 描述列表 | +| `a-statistic` | 自定义 | 统计数值 | +| `a-tree` | 自定义 | 树形控件 | +| `a-avatar` | `Avatar` | 头像 | +| `a-badge` | `Badge` | 徽标 | +| `a-tag` | `Badge` variant | 标签 | +| `a-timeline` | 自定义 | 时间轴 | +| `a-image` | `Img` 或自定义 | 图片 | +| `a-empty` | `Empty` | 空状态 | + +## 导航组件 + +| Ant Design | shadcn-vue | 说明 | +|------------|------------|------| +| `a-menu` | `NavigationMenu` / `SidebarMenu` | 菜单 | +| `a-dropdown` | `DropdownMenu` | 下拉菜单 | +| `a-pagination` | `Pagination` | 分页 | +| `a-steps` | `Stepper` | 步骤条 | +| `a-breadcrumb` | `Breadcrumb` | 面包屑 | +| `a-tabs` | `Tabs` | 标签页 | + +## 反馈组件 + +| Ant Design | shadcn-vue | 说明 | +|------------|------------|------| +| `a-modal` | `Dialog` | 对话框 | +| `a-drawer` | `Drawer` | 抽屉 | +| `a-message` | `toast` (vue-sonner) | 全局提示 | +| `a-notification` | `toast` (vue-sonner) | 通知 | +| `a-popconfirm` | `AlertDialog` | 确认对话框 | +| `a-popover` | `Popover` | 气泡卡片 | +| `a-tooltip` | `Tooltip` | 文字提示 | +| `a-progress` | `Progress` | 进度条 | +| `a-spin` | `Spinner` | 加载中 | +| `a-skeleton` | `Skeleton` | 骨架屏 | +| `a-alert` | `Alert` | 警告提示 | + +## 布局组件 + +| Ant Design | shadcn-vue | 说明 | +|------------|------------|------| +| `a-layout` | 自定义 | 布局 | +| `a-layout-sider` | `Sidebar` | 侧边栏 | +| `a-layout-header` | 自定义 | 头部 | +| `a-layout-content` | 自定义 | 内容 | +| `a-layout-footer` | 自定义 | 底部 | +| `a-row` / `a-col` | Tailwind `grid` / `flex` | 栅格 | +| `a-space` | `div` + Tailwind `gap-*` | 间距 | +| `a-divider` | `Separator` | 分割线 | + +## 图标映射 + +| Ant Design Icons | Iconify (lucide) | +|------------------|------------------| +| `UserOutlined` | `lucide:user` | +| `SettingOutlined` | `lucide:settings` | +| `SearchOutlined` | `lucide:search` | +| `PlusOutlined` | `lucide:plus` | +| `DeleteOutlined` | `lucide:trash-2` | +| `EditOutlined` | `lucide:pencil` | +| `CloseOutlined` | `lucide:x` | +| `CheckOutlined` | `lucide:check` | +| `EyeOutlined` | `lucide:eye` | +| `EyeInvisibleOutlined` | `lucide:eye-off` | +| `LoadingOutlined` | `lucide:loader-2` | +| `ExclamationCircleOutlined` | `lucide:alert-circle` | +| `InfoCircleOutlined` | `lucide:info` | +| `QuestionCircleOutlined` | `lucide:help-circle` | +| `PhoneOutlined` | `lucide:phone` | +| `MailOutlined` | `lucide:mail` | +| `SafetyOutlined` | `lucide:shield` | +| `UploadOutlined` | `lucide:upload` | +| `DownloadOutlined` | `lucide:download` | +| `CopyOutlined` | `lucide:copy` | +| `ReloadOutlined` | `lucide:refresh-cw` | +| `FilterOutlined` | `lucide:filter` | +| `MoreOutlined` | `lucide:more-horizontal` | +| `MenuOutlined` | `lucide:menu` | +| `HomeOutlined` | `lucide:home` | +| `LeftOutlined` | `lucide:chevron-left` | +| `RightOutlined` | `lucide:chevron-right` | +| `UpOutlined` | `lucide:chevron-up` | +| `DownOutlined` | `lucide:chevron-down` | + +## 图标使用方式 + +```vue + + + +``` + +## 表单验证迁移 + +| Ant Design | shadcn-vue (VeeForm) | +|------------|----------------------| +| `rules` prop | `zod` schema + `toTypedSchema` | +| `validateFields()` | `form.validate()` | +| `validateTrigger` | schema 配置 | +| `hasFeedback` | `FormMessage` 组件 | + +## 事件映射 + +| Ant Design | shadcn-vue | +|------------|------------| +| `@change` | `@update:modelValue` | +| `@pressEnter` | `@keydown.enter` | +| `@search` | 自定义 + `@keydown.enter` | +| `@select` | `@update:modelValue` (Select) | diff --git a/.claude/skills/antd-to-shadcn/references/MIGRATION_PATTERNS.md b/.claude/skills/antd-to-shadcn/references/MIGRATION_PATTERNS.md new file mode 100644 index 0000000000..392c1173ef --- /dev/null +++ b/.claude/skills/antd-to-shadcn/references/MIGRATION_PATTERNS.md @@ -0,0 +1,662 @@ +# 迁移模式 + +详细的代码迁移示例，从 Ant Design Vue 到 shadcn-vue。 + +## 目录 + +1. [表单迁移](#表单迁移) +2. [表格迁移](#表格迁移) +3. [弹窗迁移](#弹窗迁移) +4. [消息提示迁移](#消息提示迁移) +5. [下拉选择迁移](#下拉选择迁移) +6. [分页迁移](#分页迁移) +7. [标签页迁移](#标签页迁移) +8. [抽屉迁移](#抽屉迁移) + +--- + +## 表单迁移 + +### 简单表单 + +```vue + + + + + + + + + +``` + +### 表单 + 验证码（带按钮状态） + +```vue + + + + +``` + +--- + +## 表格迁移 + +```vue + + + + + + + + + +``` + +--- + +## 弹窗迁移 + +```vue + + + ... + + + + + + +``` + +--- + +## 消息提示迁移 + +```javascript +// ========== Before: Ant Design ========== +import { message, notification } from 'ant-design-vue' + +message.success('操作成功') +message.error('操作失败') +message.warning('警告信息') +message.loading('加载中...') + +notification.success({ + message: '成功', + description: '操作已完成' +}) + +// ========== After: shadcn-vue (vue-sonner) ========== +import { toast } from 'vue-sonner' + +toast.success('操作成功') +toast.error('操作失败') +toast.warning('警告信息') +toast.loading('加载中...') + +// 带描述的通知 +toast.success('操作已完成', { + description: '数据已保存' +}) + +// 自定义时长 +toast.success('操作成功', { duration: 3000 }) + +// Promise 状态 +toast.promise(saveData(), { + loading: '保存中...', + success: '保存成功', + error: '保存失败' +}) +``` + +--- + +## 下拉选择迁移 + +```vue + + + + + + + +``` + +--- + +## 分页迁移 + +```vue + + + + + + + +``` + +--- + +## 标签页迁移 + +```vue + + + 内容一 + 内容二 + + + + + + +``` + +--- + +## 抽屉迁移 + +```vue + + + 内容 + + + + + + +``` + +--- + +## 常见问题 + +### Q: 如何处理 a-form 的 layout 属性？ + +```vue + +
+ + + + + + + +
+ + +
+``` + +### Q: 如何处理自定义验证？ + +```javascript +// Ant Design +const rules = { + field: [{ + validator: async (rule, value) => { + if (!value) throw new Error('必填') + if (value.length < 3) throw new Error('太短') + } + }] +} + +// shadcn-vue (zod) +const formSchema = toTypedSchema(z.object({ + field: z.string() + .min(1, '必填') + .refine(val => val.length >= 3, '太短') + .refine(async (val) => { + // 异步验证 + const exists = await checkExists(val) + return !exists + }, '已存在') +})) +``` + +### Q: 如何处理表单初始值？ + +```javascript +// Ant Design +const form = reactive({ name: '初始值' }) + +// shadcn-vue +const { resetForm } = useForm({ + validationSchema: formSchema, + initialValues: { name: '初始值' } +}) + +// 重置到初始值 +resetForm() +``` diff --git a/.claude/skills/antd-to-shadcn/references/STYLES.md b/.claude/skills/antd-to-shadcn/references/STYLES.md new file mode 100644 index 0000000000..fdbea1227e --- /dev/null +++ b/.claude/skills/antd-to-shadcn/references/STYLES.md @@ -0,0 +1,484 @@ +# 样式迁移指南 + +从 Ant Design 样式系统迁移到 TailwindCSS + CSS 变量。 + +## 目录 + +1. [现代设计原则](#现代设计原则) +2. [颜色系统](#颜色系统) +3. [间距系统](#间距系统) +4. [字体系统](#字体系统) +5. [阴影系统](#阴影系统) +6. [圆角系统](#圆角系统) +7. [响应式布局](#响应式布局) +8. [状态样式](#状态样式) + +--- + +## 现代设计原则 + +### 抵制过时设计模式 + +**❌ 拒绝老气 UI**： +- 粗重边框、多重边框嵌套（边框重叠） +- 灰暗沉闷的配色（缺乏活力） +- 过度装饰的渐变和重阴影 +- 拥挤无呼吸感的布局 +- 间距混乱、缺乏层级感 +- 老式的表单样式（密集排列） + +**✅ 拥抱现代设计**： +- 轻量边框或无边框设计 +- 明亮有活力的色彩 +- 克制精致的阴影（shadow-sm 为主） +- 充足留白，呼吸感 +- 清晰的视觉层级（4px 间距递进） +- 现代表单（宽松布局，清晰标签） + +### 颜色活力设计 + +**年轻感配色特征**： +```css +/* 主色：中等饱和度，避免过深或过浅 */ +--primary: oklch(0.55 0.18 254.604); /* 活力蓝，非深蓝 */ + +/* 强调色：高饱和度，用于吸引注意 */ +--accent-bright: oklch(0.65 0.22 254.604); + +/* 渐变：柔和过渡，非跳跃式 */ +--gradient-primary: linear-gradient(135deg, + oklch(0.68 0.16 254.604), + oklch(0.45 0.16 254.604) +); +``` + +**发现优秀配色时**： +1. 提取关键颜色值（oklch 格式） +2. 添加到 `style.css` 设计令牌 +3. 使用语义化命名 +4. 在 `theme.css` 中同步 shadcn 变量 + +### 间距层级感 + +``` +紧凑：gap-2 (8px) - 同组元素 +舒适：gap-3 (12px) - 表单项之间 +宽松：gap-4 (16px) - 卡片内容 +分区：gap-6 (24px) - 不同区块 +隔离：gap-8 (32px) - 模块分隔 +``` + +--- + +## 颜色系统 + +### 语义化颜色变量 + +项目使用 `oklch` 色彩空间，定义在 `theme.css` 中： + +```css +/* theme.css 中的变量 */ +--background /* 页面背景 */ +--foreground /* 主文字 */ +--card /* 卡片背景 */ +--card-foreground /* 卡片文字 */ +--popover /* 弹出层背景 */ +--popover-foreground +--primary /* 主色（品牌蓝） */ +--primary-foreground +--secondary /* 次要色 */ +--secondary-foreground +--muted /* 静音背景 */ +--muted-foreground /* 静音文字 */ +--accent /* 强调背景 */ +--accent-foreground +--destructive /* 危险色 */ +--destructive-foreground +--border /* 边框 */ +--input /* 输入框边框 */ +--ring /* 焦点环 */ +``` + +### 使用方式 + +```vue + + + + +``` + +### Ant Design 颜色迁移 + +| Ant Design | shadcn/Tailwind | +|------------|-----------------| +| `@primary-color` | `var(--primary)` 或 `text-primary bg-primary` | +| `@success-color` | `text-green-500` 或自定义 | +| `@warning-color` | `text-yellow-500` 或自定义 | +| `@error-color` | `var(--destructive)` 或 `text-destructive` | +| `@text-color` | `var(--foreground)` 或 `text-foreground` | +| `@text-color-secondary` | `var(--muted-foreground)` | +| `@border-color-base` | `var(--border)` 或 `border-border` | +| `@disabled-color` | `text-muted-foreground` | + +--- + +## 间距系统 + +Tailwind 使用 4px 基准： + +| Tailwind | 像素值 | +|----------|--------| +| `p-1` / `m-1` | 4px | +| `p-2` / `m-2` | 8px | +| `p-3` / `m-3` | 12px | +| `p-4` / `m-4` | 16px | +| `p-5` / `m-5` | 20px | +| `p-6` / `m-6` | 24px | +| `p-8` / `m-8` | 32px | +| `p-10` / `m-10` | 40px | +| `p-12` / `m-12` | 48px | + +### 常见场景 + +```vue + + + ... +
+ + +
+ + +
+ + + + ... + ... + + + +
+ ... +
+``` + +### 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` | + +--- + +## 字体系统 + +### 字体大小 + +| Tailwind | 像素值 | 用途 | +|----------|--------|------| +| `text-xs` | 12px | 辅助文字 | +| `text-sm` | 14px | 正文、标签 | +| `text-base` | 16px | 正文 | +| `text-lg` | 18px | 小标题 | +| `text-xl` | 20px | 标题 | +| `text-2xl` | 24px | 大标题 | +| `text-3xl` | 30px | 页面标题 | + +### 字重 + +```vue + +``` + +### 行高 + +```vue + +``` + +--- + +## 阴影系统 + +定义在 `theme.css`： + +```css +--shadow-sm /* 微阴影 */ +--shadow /* 基础阴影 */ +--shadow-md /* 中等阴影 */ +--shadow-lg /* 大阴影 */ +--shadow-xl /* 超大阴影 */ +--shadow-2xl /* 巨大阴影 */ +``` + +### 使用 + +```vue + +``` + +### 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` | + +--- + +## 响应式布局 + +### 断点 + +| 断点 | 最小宽度 | +|------|----------| +| `sm:` | 640px | +| `md:` | 768px | +| `lg:` | 1024px | +| `xl:` | 1280px | +| `2xl:` | 1536px | + +### 响应式示例 + +```vue + +``` + +### 栅格迁移 + +```vue + + + ... + ... + + + +
+
...
+
...
+
+ + +
+
...
+
...
+
+``` + +--- + +## 状态样式 + +### 悬停 + +```vue + +``` + +### 焦点 + +```vue + +``` + +### 禁用 + +```vue + +``` + +### 加载中 + +```vue + +``` + +--- + +## 过渡动画 + +### 基础过渡 + +```vue + +``` + +### 动画时长 + +```vue + +``` + +--- + +## 常见样式模式 + +### 卡片 + +```vue + +``` + +### 表单项 + +```vue + +``` + +### 操作栏 + +```vue + +``` + +### 空状态 + +```vue + +``` diff --git a/frontend/app/web-gold/docs/DESIGN_SYSTEM_PROMPT.md b/frontend/app/web-gold/docs/DESIGN_SYSTEM_PROMPT.md deleted file mode 100644 index 8f38707727..0000000000 --- a/frontend/app/web-gold/docs/DESIGN_SYSTEM_PROMPT.md +++ /dev/null @@ -1,548 +0,0 @@ -# Yudao Cloud B端设计规范提示词 - -> **定位**: B端生产力工具 | 简约高效 | 专业可信 | 创新体验 -> **技术栈**: Vue 3 + TypeScript + Ant Design Vue + TailwindCSS -> **业务**: AI/媒体功能增强的Spring Boot快速开发平台 - ---- - -## 设计哲学 - -``` -简约而不简单，高效且具辨识 -- 每个像素都有目的 -- 每个交互都有反馈 -- 每个元素都有秩序 -``` - -**核心原则**: -1. **认知减负** - 减少用户思考成本 -2. **操作高效** - 最短路径完成任务 -3. **视觉一致** - 建立可预测的心智模型 -4. **创新克制** - 在熟悉中创造惊喜 - ---- - -## 一、色彩系统 (Color System) - -### 1.1 品牌主色 - 科技蓝 - -```css -/* 主色阶 - 用于品牌识别、主要操作 */ ---color-primary-50: #EFF6FF; /* 悬浮背景 */ ---color-primary-100: #DBEAFE; /* 选中背景 */ ---color-primary-200: #BFDBFE; /* 边框高亮 */ ---color-primary-300: #93C5FD; /* 禁用状态 */ ---color-primary-400: #60A5FA; /* 悬浮状态 */ ---color-primary-500: #3B82F6; /* 标准主色 */ ---color-primary-600: #2563EB; /* 按下状态 */ ---color-primary-700: #1D4ED8; /* 强调状态 */ -``` - -**使用规则**: -- 主按钮、关键操作使用 `primary-500` -- 悬浮状态提升至 `primary-400` -- 按下状态加深至 `primary-600` -- 大面积背景仅用 `primary-50/100` - -### 1.2 中性色 - 专业灰 - -```css -/* 灰度系统 - 用于文字、边框、背景 */ ---color-gray-50: #F9FAFB; /* 页面背景 */ ---color-gray-100: #F3F4F6; /* 卡片背景 */ ---color-gray-200: #E5E7EB; /* 分割线 */ ---color-gray-300: #D1D5DB; /* 边框 */ ---color-gray-400: #9CA3AF; /* 占位符 */ ---color-gray-500: #6B7280; /* 辅助文字 */ ---color-gray-600: #4B5563; /* 正文 */ ---color-gray-700: #374151; /* 标题 */ ---color-gray-800: #1F2937; /* 强调标题 */ ---color-gray-900: #111827; /* 最高对比 */ -``` - -### 1.3 功能色 - -```css -/* 成功 - 绿色系 */ ---color-success-light: #DCFCE7; ---color-success: #22C55E; ---color-success-dark: #16A34A; - -/* 警告 - 琥珀系 */ ---color-warning-light: #FEF3C7; ---color-warning: #F59E0B; ---color-warning-dark: #D97706; - -/* 错误 - 红色系 */ ---color-error-light: #FEE2E2; ---color-error: #EF4444; ---color-error-dark: #DC2626; - -/* 信息 - 蓝色系 */ ---color-info-light: #DBEAFE; ---color-info: #3B82F6; ---color-info-dark: #2563EB; -``` - -### 1.4 语义映射 - -| 场景 | 颜色 | 示例 | -|------|------|------| -| 主要操作 | primary-500 | 提交、保存、确认 | -| 次要操作 | gray-600 + border | 取消、返回 | -| 危险操作 | error-500 | 删除、清空 | -| 成功反馈 | success-500 | 完成提示 | -| 数据展示 | gray-700 | 表格正文 | -| 辅助说明 | gray-500 | 表头、注释 | - ---- - -## 二、字体排版 (Typography) - -### 2.1 字体家族 - -```css -/* 主字体 - 中文优先思源黑体，西文 Inter */ ---font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", - "Microsoft YaHei", "Noto Sans SC", sans-serif; - -/* 等宽字体 - 代码、数字 */ ---font-family-mono: "JetBrains Mono", "Fira Code", Consolas, monospace; -``` - -### 2.2 字号阶梯 - -```css -/* 字号系统 - 基于 14px 基准 */ ---font-size-xs: 12px; /* 辅助标签、时间戳 */ ---font-size-sm: 13px; /* 表头、次要文字 */ ---font-size-base: 14px; /* 正文、输入框 */ ---font-size-md: 16px; /* 小标题、强调 */ ---font-size-lg: 18px; /* 卡片标题 */ ---font-size-xl: 20px; /* 区块标题 */ ---font-size-2xl: 24px; /* 页面标题 */ ---font-size-3xl: 30px; /* 大标题 */ -``` - -### 2.3 行高规范 - -```css ---line-height-tight: 1.25; /* 标题 */ ---line-height-base: 1.5; /* 正文 */ ---line-height-relaxed: 1.75; /* 长文本 */ -``` - -### 2.4 字重规范 - -```css ---font-weight-normal: 400; /* 正文 */ ---font-weight-medium: 500; /* 强调 */ ---font-weight-semibold: 600; /* 小标题 */ ---font-weight-bold: 700; /* 大标题 */ -``` - -### 2.5 使用规则 - -| 元素 | 字号 | 字重 | 行高 | -|------|------|------|------| -| 页面标题 | 24px | 600 | 1.25 | -| 卡片标题 | 16px | 500 | 1.5 | -| 正文内容 | 14px | 400 | 1.5 | -| 辅助说明 | 12px | 400 | 1.5 | -| 表格数据 | 14px | 400 | 1.5 | -| 按钮文字 | 14px | 500 | 1 | - ---- - -## 三、间距系统 (Spacing) - -### 3.1 基础单位 - -```css -/* 基于 4px 网格系统 */ ---space-0: 0; ---space-1: 4px; /* 紧凑间距 */ ---space-2: 8px; /* 元素内间距 */ ---space-3: 12px; /* 小组件间距 */ ---space-4: 16px; /* 标准间距 */ ---space-5: 20px; /* 卡片内边距 */ ---space-6: 24px; /* 区块间距 */ ---space-8: 32px; /* 大区块间距 */ ---space-10: 40px; /* 章节间距 */ ---space-12: 48px; /* 页面边距 */ ---space-16: 64px; /* 主要分隔 */ -``` - -### 3.2 语义映射 - -| 场景 | 间距值 | 示例 | -|------|--------|------| -| 图标与文字 | 4-8px | `gap: 8px` | -| 按钮内边距 | 8-16px | `padding: 8px 16px` | -| 表单字段间距 | 16-24px | `margin-bottom: 16px` | -| 卡片内边距 | 16-24px | `padding: 20px` | -| 卡片之间 | 16-24px | `gap: 16px` | -| 区块之间 | 24-32px | `margin-top: 24px` | -| 页面边距 | 24px | `padding: 24px` | - ---- - -## 四、圆角规范 (Border Radius) - -### 4.1 圆角系统 - -```css ---radius-none: 0; ---radius-sm: 4px; /* 小按钮、标签 */ ---radius-base: 6px; /* 输入框、小卡片 */ ---radius-md: 8px; /* 按钮、下拉框 */ ---radius-lg: 12px; /* 卡片、弹窗 */ ---radius-xl: 16px; /* 大卡片 */ ---radius-2xl: 24px; /* 特殊容器 */ ---radius-full: 9999px; /* 圆形、药丸 */ -``` - -### 4.2 使用规则 - -| 元素 | 圆角 | 说明 | -|------|------|------| -| 按钮 | 6px | 标准圆角 | -| 输入框 | 6px | 与按钮一致 | -| 小标签 | 4px | 轻量感 | -| 卡片 | 12px | 柔和边界 | -| 弹窗 | 12px | 与卡片一致 | -| 头像 | 9999px | 圆形 | -| 抽屉 | 0 | 左侧直角 | - ---- - -## 五、阴影系统 (Shadows) - -### 5.1 阴影层级 - -```css -/* 层级递进 - 从平面到立体 */ ---shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); ---shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); ---shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); ---shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); ---shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); -``` - -### 5.2 使用场景 - -| 层级 | 阴影 | 示例 | -|------|------|------| -| 层级0 | none | 页面背景 | -| 层级1 | sm | 输入框聚焦 | -| 层级2 | base | 卡片默认 | -| 层级3 | md | 卡片悬浮 | -| 层级4 | lg | 下拉菜单 | -| 层级5 | xl | 弹窗、抽屉 | - ---- - -## 六、图标系统 (Icons) - -### 6.1 图标规范 - -```css -/* 图标尺寸 */ ---icon-xs: 12px; /* 内联图标 */ ---icon-sm: 16px; /* 列表图标 */ ---icon-md: 20px; /* 标准图标 */ ---icon-lg: 24px; /* 导航图标 */ ---icon-xl: 32px; /* 功能图标 */ - -/* 图标描边 */ ---icon-stroke: 1.5px; -``` - -### 6.2 使用规则 - -- **图标库**: 统一使用 Lucide Icons 或 Ant Design Icons -- **风格**: 线性图标，圆角端点 -- **颜色**: 继承文字颜色或使用 gray-500 -- **对齐**: 与文字垂直居中，间距 4-8px - ---- - -## 七、组件规范 (Components) - -### 7.1 按钮 - -```css -/* 尺寸规范 */ ---btn-height-sm: 28px; ---btn-height-base: 32px; ---btn-height-lg: 40px; - -/* 内边距 */ ---btn-padding-sm: 0 12px; ---btn-padding-base: 0 16px; ---btn-padding-lg: 0 24px; -``` - -**按钮类型**: -| 类型 | 样式 | 使用场景 | -|------|------|----------| -| 主要 | primary-500 填充 | 提交、确认、下一步 | -| 次要 | gray-600 边框 | 取消、返回、重置 | -| 文字 | 无边框透明 | 次要操作、链接跳转 | -| 危险 | error-500 填充 | 删除、清空、禁用 | - -### 7.2 输入框 - -```css ---input-height: 32px; ---input-padding: 0 12px; ---input-border: 1px solid var(--color-gray-300); ---input-radius: 6px; ---input-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.1); -``` - -### 7.3 卡片 - -```css ---card-bg: var(--color-gray-50); ---card-border: 1px solid var(--color-gray-200); ---card-radius: 12px; ---card-padding: 20px; ---card-shadow: var(--shadow-base); ---card-hover-shadow: var(--shadow-md); -``` - -### 7.4 表格 - -```css ---table-header-bg: var(--color-gray-50); ---table-row-hover: var(--color-gray-50); ---table-border: 1px solid var(--color-gray-200); ---table-cell-padding: 12px 16px; -``` - ---- - -## 八、布局系统 (Layout) - -### 8.1 栅格系统 - -```css -/* 12列栅格 */ ---grid-columns: 12; ---grid-gutter: 24px; -``` - -### 8.2 页面布局 - -```css -/* 侧边栏 */ ---sidebar-width: 240px; ---sidebar-collapsed: 64px; - -/* 顶部导航 */ ---header-height: 56px; - -/* 内容区域 */ ---content-max-width: 1200px; ---content-padding: 24px; -``` - -### 8.3 Z-Index 层级 - -```css ---z-dropdown: 1000; ---z-sticky: 1020; ---z-fixed: 1030; ---z-modal-backdrop: 1040; ---z-modal: 1050; ---z-popover: 1060; ---z-tooltip: 1070; -``` - ---- - -## 九、交互反馈 (Interaction) - -### 9.1 状态颜色 - -| 状态 | 背景 | 边框 | 文字 | -|------|------|------|------| -| 默认 | white | gray-300 | gray-700 | -| 悬浮 | gray-50 | gray-300 | gray-700 | -| 聚焦 | white | primary-500 | gray-700 | -| 激活 | primary-50 | primary-500 | primary-600 | -| 禁用 | gray-100 | gray-200 | gray-400 | -| 错误 | error-50 | error-500 | error-600 | -| 成功 | success-50 | success-500 | success-600 | - -### 9.2 反馈方式 - -| 场景 | 反馈 | -|------|------| -| 按钮点击 | 缩放 0.98 + 背景加深 | -| 输入聚焦 | 边框变色 + 外发光 | -| 加载中 | 旋转图标 + 禁用交互 | -| 操作成功 | Toast 提示 + 图标动画 | -| 操作失败 | Toast 错误 + 抖动动画 | - ---- - -## 十、动效规范 (Motion) - -### 10.1 时长 - -```css ---duration-instant: 100ms; /* 微交互 */ ---duration-fast: 150ms; /* 悬浮 */ ---duration-base: 200ms; /* 状态切换 */ ---duration-slow: 300ms; /* 展开/收起 */ ---duration-slower: 500ms; /* 页面过渡 */ -``` - -### 10.2 缓动函数 - -```css ---ease-in: cubic-bezier(0.4, 0, 1, 1); ---ease-out: cubic-bezier(0, 0, 0.2, 1); ---ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); ---ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); -``` - -### 10.3 动效原则 - -1. **目的性** - 每个动效都要服务于用户理解 -2. **克制** - B端产品动效要低调、高效 -3. **一致性** - 相同交互使用相同动效 -4. **可关闭** - 尊重 prefers-reduced-motion - -```css -@media (prefers-reduced-motion: reduce) { - *, *::before, *::after { - animation-duration: 0.01ms !important; - transition-duration: 0.01ms !important; - } -} -``` - ---- - -## 十一、响应式设计 (Responsive) - -### 11.1 断点系统 - -```css -/* 移动优先 */ ---breakpoint-sm: 640px; /* 小屏手机 */ ---breakpoint-md: 768px; /* 平板竖屏 */ ---breakpoint-lg: 1024px; /* 平板横屏/小桌面 */ ---breakpoint-xl: 1280px; /* 标准桌面 */ ---breakpoint-2xl: 1536px; /* 大屏桌面 */ -``` - -### 11.2 响应策略 - -| 断点 | 布局 | 导航 | 侧边栏 | -|------|------|------|--------| -| < 768px | 单列 | 底部 | 抽屉 | -| 768-1024 | 双列 | 顶部 | 可折叠 | -| > 1024 | 多列 | 顶部 | 固定展开 | - ---- - -## 十二、深色模式 (Dark Mode) - -### 12.1 深色色板 - -```css -[data-theme="dark"] { - /* 背景层级 */ - --color-bg-base: #0F172A; /* 页面背景 */ - --color-bg-elevated: #1E293B; /* 卡片背景 */ - --color-bg-overlay: #334155; /* 弹窗背景 */ - - /* 文字 */ - --color-text-primary: #F1F5F9; - --color-text-secondary: #94A3B8; - --color-text-muted: #64748B; - - /* 边框 */ - --color-border: #334155; - --color-border-light: #1E293B; - - /* 主色调整 - 深色下提亮 */ - --color-primary-500: #60A5FA; -} -``` - -### 12.2 切换策略 - -- 跟随系统: `prefers-color-scheme` -- 手动切换: localStorage 持久化 -- 无闪烁: CSS 变量 + preload 设置 - ---- - -## 实施指南 - -### 优先级排序 - -1. **P0 - 立即统一** - - 品牌主色 (三套主色 → 统一蓝色系) - - 字体大小 (移除硬编码) - - 间距系统 (使用 CSS 变量) - -2. **P1 - 短期完善** - - TailwindCSS 配置整合 - - Ant Design 主题配置 - - 组件样式清理 - -3. **P2 - 中期优化** - - 动效系统 - - 深色模式 - - 响应式适配 - -### 代码迁移示例 - -**Before (问题代码)**: -```css -/* HistoryPanel.vue */ -@primary: #6366f1; -.button { - background: @primary; - padding: 16px; - font-size: 14px; -} -``` - -**After (规范代码)**: -```css -/* 使用全局变量 */ -.button { - background: var(--color-primary-500); - padding: var(--space-4); - font-size: var(--font-size-base); -} -``` - ---- - -## 设计检查清单 - -- [ ] 颜色使用 CSS 变量，无硬编码 -- [ ] 字体大小在定义的阶梯内 -- [ ] 间距使用 4px 倍数 -- [ ] 圆角使用预定义值 -- [ ] 阴影层级正确 -- [ ] 图标风格统一 -- [ ] 交互状态完整 -- [ ] 动效时长合理 -- [ ] 响应式断点正确 -- [ ] 深色模式适配 - ---- - -> **版本**: v1.0 -> **更新日期**: 2026-02-25 -> **适用项目**: Yudao Cloud Frontend diff --git a/frontend/app/web-gold/src/components/SidebarNav.vue b/frontend/app/web-gold/src/components/SidebarNav.vue index 494c549005..69629612f2 100644 --- a/frontend/app/web-gold/src/components/SidebarNav.vue +++ b/frontend/app/web-gold/src/components/SidebarNav.vue @@ -109,24 +109,26 @@ function isActive(item) { - diff --git a/frontend/app/web-gold/src/theme.css b/frontend/app/web-gold/src/theme.css index d9e69ff673..3023b91212 100644 --- a/frontend/app/web-gold/src/theme.css +++ b/frontend/app/web-gold/src/theme.css @@ -1,14 +1,142 @@ @import "tailwindcss"; @import "tw-animate-css"; + @custom-variant dark (&:is(.dark *)); -/* shadcn-vue 主题映射 */ -@theme inline { +:root { + /* ======================================== + 基础颜色 - 与 style.css 保持一致 + ======================================== */ + --background: oklch(0.985 0.001 264.695); + --foreground: oklch(0.195 0.038 264.695); + --card: oklch(1 0 0); + --card-foreground: oklch(0.195 0.038 264.695); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.195 0.038 264.695); + + /* ======================================== + 主色 - 科技蓝品牌色 + ======================================== */ + --primary: oklch(0.45 0.16 254.604); + --primary-foreground: oklch(0.985 0 0); + + /* ======================================== + 次要色 - 偏蓝冷灰 + ======================================== */ + --secondary: oklch(0.97 0.001 264.695); + --secondary-foreground: oklch(0.205 0.015 264.695); + + /* ======================================== + 静音色 - 柔和灰 + ======================================== */ + --muted: oklch(0.97 0.001 264.695); + --muted-foreground: oklch(0.45 0.02 264.695); + + /* ======================================== + 强调色 + ======================================== */ + --accent: oklch(0.97 0.001 264.695); + --accent-foreground: oklch(0.205 0.015 264.695); + + /* ======================================== + 功能色 + ======================================== */ + --destructive: oklch(0.577 0.245 27.325); + --destructive-foreground: oklch(0.985 0 0); + + /* ======================================== + 边框与输入 + ======================================== */ + --border: oklch(0.922 0.004 264.695); + --input: oklch(0.922 0.004 264.695); + --ring: oklch(0.55 0.18 254.604); + + /* ======================================== + 图表色 - 蓝色系渐变 + ======================================== */ + --chart-1: oklch(0.68 0.16 254.604); + --chart-2: oklch(0.55 0.18 254.604); + --chart-3: oklch(0.45 0.16 254.604); + --chart-4: oklch(0.37 0.13 254.604); + --chart-5: oklch(0.30 0.10 254.604); + + /* ======================================== + 侧边栏主题 - 品牌蓝高亮 + ======================================== */ + --sidebar: oklch(0.985 0.001 264.695); + --sidebar-foreground: oklch(0.195 0.038 264.695); + --sidebar-primary: oklch(0.45 0.16 254.604); + --sidebar-primary-foreground: oklch(0.985 0 0); + --sidebar-accent: oklch(0.97 0.001 264.695); + --sidebar-accent-foreground: oklch(0.205 0.015 264.695); + --sidebar-border: oklch(0.922 0.004 264.695); + --sidebar-ring: oklch(0.55 0.18 254.604); + + /* ======================================== + 字体系统 + ======================================== */ + --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; + --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; + --font-mono: ui-monospace, monospace; + + /* ======================================== + 圆角系统 + ======================================== */ + --radius: 0.625rem; --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); + /* ======================================== + 阴影系统 + ======================================== */ + --shadow-2xs: 0 1px 2px 0 oklch(0 0 0 / 0.05); + --shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05); + --shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.10), 0 1px 2px -1px oklch(0 0 0 / 0.10); + --shadow: 0 1px 3px 0 oklch(0 0 0 / 0.10), 0 1px 2px -1px oklch(0 0 0 / 0.10); + --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.10), 0 2px 4px -2px oklch(0 0 0 / 0.10); + --shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.10), 0 4px 6px -4px oklch(0 0 0 / 0.10); + --shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.10), 0 8px 10px -6px oklch(0 0 0 / 0.10); + --shadow-2xl: 0 25px 50px -12px oklch(0 0 0 / 0.25); +} + +.dark { + --background: oklch(0.145 0.004 264.695); + --foreground: oklch(0.94 0.003 264.695); + --card: oklch(0.18 0.006 264.695); + --card-foreground: oklch(0.94 0.003 264.695); + --popover: oklch(0.18 0.006 264.695); + --popover-foreground: oklch(0.94 0.003 264.695); + --primary: oklch(0.68 0.16 254.604); + --primary-foreground: oklch(0.145 0.004 264.695); + --secondary: oklch(0.25 0.01 264.695); + --secondary-foreground: oklch(0.94 0.003 264.695); + --muted: oklch(0.25 0.01 264.695); + --muted-foreground: oklch(0.65 0.015 264.695); + --accent: oklch(0.30 0.015 264.695); + --accent-foreground: oklch(0.94 0.003 264.695); + --destructive: oklch(0.65 0.2 25); + --destructive-foreground: oklch(0.94 0.003 264.695); + --border: oklch(0.28 0.01 264.695); + --input: oklch(0.28 0.01 264.695); + --ring: oklch(0.55 0.15 254.604); + --chart-1: oklch(0.78 0.11 254.604); + --chart-2: oklch(0.68 0.16 254.604); + --chart-3: oklch(0.55 0.18 254.604); + --chart-4: oklch(0.45 0.16 254.604); + --chart-5: oklch(0.37 0.13 254.604); + --sidebar: oklch(0.18 0.006 264.695); + --sidebar-foreground: oklch(0.94 0.003 264.695); + --sidebar-primary: oklch(0.68 0.16 254.604); + --sidebar-primary-foreground: oklch(0.145 0.004 264.695); + --sidebar-accent: oklch(0.25 0.01 264.695); + --sidebar-accent-foreground: oklch(0.94 0.003 264.695); + --sidebar-border: oklch(0.28 0.01 264.695); + --sidebar-ring: oklch(0.55 0.15 254.604); +} + +@theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); @@ -28,11 +156,103 @@ --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); + --font-sans: var(--font-sans); + --font-mono: var(--font-mono); + --font-serif: var(--font-serif); + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --shadow-2xs: var(--shadow-2xs); + --shadow-xs: var(--shadow-xs); + --shadow-sm: var(--shadow-sm); + --shadow: var(--shadow); + --shadow-md: var(--shadow-md); + --shadow-lg: var(--shadow-lg); + --shadow-xl: var(--shadow-xl); + --shadow-2xl: var(--shadow-2xl); } -/* shadcn 基础层 */ @layer base { * { @apply border-border outline-ring/50; } + body { + @apply bg-background text-foreground antialiased; + } +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); + + --font-sans: var(--font-sans); + --font-mono: var(--font-mono); + --font-serif: var(--font-serif); + + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + + --shadow-2xs: var(--shadow-2xs); + --shadow-xs: var(--shadow-xs); + --shadow-sm: var(--shadow-sm); + --shadow: var(--shadow); + --shadow-md: var(--shadow-md); + --shadow-lg: var(--shadow-lg); + --shadow-xl: var(--shadow-xl); + --shadow-2xl: var(--shadow-2xl); +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } }