feat: 优化了若干接口页面，可用性存疑

2026-08-12 08:57:15 +08:00
parent 6db736a6f4
commit f622743661
67 changed files with 8729 additions and 1133 deletions
--- a/design-system/xk-admin/MASTER.md
+++ b/design-system/xk-admin/MASTER.md
@@ -0,0 +1,206 @@
+# Design System Master File
+
+> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.
+> If that file exists, its rules **override** this Master file.
+> If not, strictly follow the rules below.
+
+---
+
+**Project:** XK Admin
+**Generated:** 2026-08-11 14:59:17
+**Category:** Financial Dashboard
+
+---
+
+## Global Rules
+
+### Color Palette
+
+| Role | Hex | CSS Variable |
+|------|-----|--------------|
+| Primary | `#0F172A` | `--color-primary` |
+| Secondary | `#1E293B` | `--color-secondary` |
+| CTA/Accent | `#22C55E` | `--color-cta` |
+| Background | `#020617` | `--color-background` |
+| Text | `#F8FAFC` | `--color-text` |
+
+**Color Notes:** Dark bg + green positive indicators
+
+### Typography
+
+- **Heading Font:** Fira Code
+- **Body Font:** Fira Sans
+- **Mood:** dashboard, data, analytics, code, technical, precise
+- **Google Fonts:** [Fira Code + Fira Sans](https://fonts.google.com/share?selection.family=Fira+Code:wght@400;500;600;700|Fira+Sans:wght@300;400;500;600;700)
+
+**CSS Import:**
+```css
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap');
+```
+
+### Spacing Variables
+
+| Token | Value | Usage |
+|-------|-------|-------|
+| `--space-xs` | `4px` / `0.25rem` | Tight gaps |
+| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |
+| `--space-md` | `16px` / `1rem` | Standard padding |
+| `--space-lg` | `24px` / `1.5rem` | Section padding |
+| `--space-xl` | `32px` / `2rem` | Large gaps |
+| `--space-2xl` | `48px` / `3rem` | Section margins |
+| `--space-3xl` | `64px` / `4rem` | Hero padding |
+
+### Shadow Depths
+
+| Level | Value | Usage |
+|-------|-------|-------|
+| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |
+| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |
+| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |
+| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |
+
+---
+
+## Component Specs
+
+### Buttons
+
+```css
+/* Primary Button */
+.btn-primary {
+  background: #22C55E;
+  color: white;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: all 200ms ease;
+  cursor: pointer;
+}
+
+.btn-primary:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+/* Secondary Button */
+.btn-secondary {
+  background: transparent;
+  color: #0F172A;
+  border: 2px solid #0F172A;
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 600;
+  transition: all 200ms ease;
+  cursor: pointer;
+}
+```
+
+### Cards
+
+```css
+.card {
+  background: #020617;
+  border-radius: 12px;
+  padding: 24px;
+  box-shadow: var(--shadow-md);
+  transition: all 200ms ease;
+  cursor: pointer;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-lg);
+  transform: translateY(-2px);
+}
+```
+
+### Inputs
+
+```css
+.input {
+  padding: 12px 16px;
+  border: 1px solid #E2E8F0;
+  border-radius: 8px;
+  font-size: 16px;
+  transition: border-color 200ms ease;
+}
+
+.input:focus {
+  border-color: #0F172A;
+  outline: none;
+  box-shadow: 0 0 0 3px #0F172A20;
+}
+```
+
+### Modals
+
+```css
+.modal-overlay {
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.modal {
+  background: white;
+  border-radius: 16px;
+  padding: 32px;
+  box-shadow: var(--shadow-xl);
+  max-width: 500px;
+  width: 90%;
+}
+```
+
+---
+
+## Style Guidelines
+
+**Style:** Dark Mode (OLED)
+
+**Keywords:** Dark theme, low light, high contrast, deep black, midnight blue, eye-friendly, OLED, night mode, power efficient
+
+**Best For:** Night-mode apps, coding platforms, entertainment, eye-strain prevention, OLED devices, low-light
+
+**Key Effects:** Minimal glow (text-shadow: 0 0 10px), dark-to-light transitions, low white emission, high readability, visible focus
+
+### Page Pattern
+
+**Pattern Name:** Horizontal Scroll Journey
+
+- **Conversion Strategy:** Immersive product discovery. High engagement. Keep navigation visible.
+28,Bento Grid Showcase,bento,  grid,  features,  modular,  apple-style,  showcase", 1. Hero, 2. Bento Grid (Key Features), 3. Detail Cards, 4. Tech Specs, 5. CTA, Floating Action Button or Bottom of Grid, Card backgrounds: #F5F5F7 or Glass. Icons: Vibrant brand colors. Text: Dark., Hover card scale (1.02), video inside cards, tilt effect, staggered reveal, Scannable value props. High information density without clutter. Mobile stack.
+29,Interactive 3D Configurator,3d,  configurator,  customizer,  interactive,  product", 1. Hero (Configurator), 2. Feature Highlight (synced), 3. Price/Specs, 4. Purchase, Inside Configurator UI + Sticky Bottom Bar, Neutral studio background. Product: Realistic materials. UI: Minimal overlay., Real-time rendering, material swap animation, camera rotate/zoom, light reflection, Increases ownership feeling. 360 view reduces return rates. Direct add-to-cart.
+30,AI-Driven Dynamic Landing,ai,  dynamic,  personalized,  adaptive,  generative", 1. Prompt/Input Hero, 2. Generated Result Preview, 3. How it Works, 4. Value Prop, Input Field (Hero) + 'Try it' Buttons, Adaptive to user input. Dark mode for compute feel. Neon accents., Typing text effects, shimmering generation loaders, morphing layouts, Immediate value demonstration. 'Show, don't tell'. Low friction start.
+- **CTA Placement:** Floating Sticky CTA or End of Horizontal Track
+- **Section Order:** 1. Intro (Vertical), 2. The Journey (Horizontal Track), 3. Detail Reveal, 4. Vertical Footer
+
+---
+
+## Anti-Patterns (Do NOT Use)
+
+- ❌ Light mode default
+- ❌ Slow rendering
+
+### Additional Forbidden Patterns
+
+- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)
+- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer
+- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout
+- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio
+- ❌ **Instant state changes** — Always use transitions (150-300ms)
+- ❌ **Invisible focus states** — Focus states must be visible for a11y
+
+---
+
+## Pre-Delivery Checklist
+
+Before delivering any UI code, verify:
+
+- [ ] No emojis used as icons (use SVG instead)
+- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] `cursor-pointer` on all clickable elements
+- [ ] Hover states with smooth transitions (150-300ms)
+- [ ] Light mode: text contrast 4.5:1 minimum
+- [ ] Focus states visible for keyboard navigation
+- [ ] `prefers-reduced-motion` respected
+- [ ] Responsive: 375px, 768px, 1024px, 1440px
+- [ ] No content hidden behind fixed navbars
+- [ ] No horizontal scroll on mobile
--- a/design-system/xk-admin/pages/workspace.md
+++ b/design-system/xk-admin/pages/workspace.md
@@ -0,0 +1,73 @@
+# Workspace Page Overrides
+
+> **PROJECT:** XK Admin
+> **Generated:** 2026-08-11 14:59:17（人工校准：对齐 Vben 主题变量）
+> **Page Type:** Dashboard / Workbench（角色差异化工作台）
+
+> ⚠️ **IMPORTANT:** Rules in this file **override** the Master file (`design-system/MASTER.md`).
+> 本页规则以 **Vben 主题 CSS 变量** 为唯一色源，Master 中写死的 hex 色板对本页 **不适用**。
+
+---
+
+## Page-Specific Rules
+
+### Color Overrides（强制，亮/暗双主题）
+
+一律使用 Vben 语义变量，禁止写死 hex：
+
+| 用途 | 变量 |
+|------|------|
+| 页面/卡片背景 | `hsl(var(--background))` / `hsl(var(--card))` |
+| 次级底色 | `hsl(var(--muted) / 0.25)` |
+| 主文字 | `hsl(var(--foreground))` |
+| 次要文字 | `hsl(var(--muted-foreground))` |
+| 边框/分割线 | `hsl(var(--border))` |
+| 强调/选中/hover | `hsl(var(--primary))`、`hsl(var(--primary) / 0.1)` |
+| 警示 | `hsl(var(--warning))`、`hsl(var(--destructive))` |
+
+角色配置的 accent color 仅用于图标点缀，暗色下加透明度（如 `color-mix` 或 opacity 0.85）。
+
+### Typography Overrides
+
+- 不引入 Fira Code / Google Fonts，沿用项目现有字体栈
+- KPI 数字：`text-2xl font-semibold`；标签：`text-xs text-muted-foreground`
+
+### Layout Overrides（Dense Workbench）
+
+- 不使用 Master 的 Horizontal Scroll Journey；采用纵向密集布局：
+  1. 紧凑问候条（头像 40px，单行）
+  2. 快捷入口卡（搜索框 + 密集网格：桌面 6~8 列 / 移动 4 列）
+  3. 角色 KPI 摘要条（stat chips，横向 wrap）
+  4. 公告紧凑列表
+- 区块间距 `gap-4`（16px），卡片内 padding `p-4`
+- 快捷入口单元：图标 20px + 单行标题 12px，`py-3`，禁止旧版 `w-1/3 py-8` 大卡
+
+### Component Overrides（Premium Elegant 视觉语言）
+
+参考 ui-ux-pro-max「Liquid Glass / Premium」方向做克制版（管理台不牺牲可读性）：
+
+- **卡片壳**：圆角 12px；边框 `hsl(var(--border)/0.7)`；柔和双层阴影 `0 1px 2px + 0 8px 24px（primary 低透明）`；hover 轻抬升 `translateY(-1px)`
+- **问候头**：primary 色相柔和渐变底 + 右上装饰性模糊光斑（`blur(64px)`、低透明度，暗色自动柔化）；头像带 2px primary/20 光环
+- **快捷入口单元**：图标坐 40px 圆角容器（`hsl(var(--primary)/0.1)` 底色），hover 抬升 + 图标容器变实色；200ms `cubic-bezier(0.4,0,0.2,1)`
+- **KPI 卡**：左上小图标（tinted 容器）+ 大数字 + 小标签；hover 抬升 + 边框透出 primary
+- **公告行**：圆点/图标前缀，hover 整行 `hsl(var(--muted)/0.4)` 底色
+- 搜索框 antd `Input` allowClear 圆角 8px，聚焦态跟 `--primary`
+- 空态文案 `text-muted-foreground`
+- 动效统一 200ms；`prefers-reduced-motion: reduce` 时关闭 transform 动效
+- 禁止：彩虹渐变/iridescent、重 backdrop-filter 大面积使用（性能与对比度）、Google Fonts 引入
+
+---
+
+## Interaction Rules
+
+- 搜索输入即过滤（本地），Enter 跳转第一条结果
+- 所有可点击元素 `cursor-pointer`，键盘 focus 可见
+- 遵守 `prefers-reduced-motion`
+
+---
+
+## Pre-Delivery Checklist（本页）
+
+- [ ] 亮色 + 暗色主题各自检查一遍对比度
+- [ ] 无写死 `#fff` / `#000` / `#0f172a` 等色值
+- [ ] 375px / 768px / 1024px / 1440px 响应式