maqt-desktop/WAVE2_UI_SPEC.md

# maqt-desktop 相2：UI 组件系统 & 样式

## 任务
在已搭建好的 maqt-desktop 项目中，创建完整的 UI 组件系统。

## 路径
/Users/guchen/.openclaw/workspace/maqt-desktop/

## Tailwind 主题色 (tailwind.config.ts)

```javascript
colors: {
  tactical: {
    black: '#0A0E17',      // 主背景
    dark: '#1A1F2E',       // 卡片/面板
    gray: '#2D3349',       // 边框/分隔
    green: '#3B4A3B',      // 强调色/按钮
    olive: '#5C7A3E',      // 次要强调
    army: '#3A6B35',       // 激活态
    brown: '#4A3B22',      // 装饰/辅助
    gold: '#7A6B4A',       // VIP/高级
    goldLight: '#C8A95B',  // VIP 高亮
    text: '#E8E0D0',       // 主文字
    textMuted: '#A09888',  // 次要文字
    textDim: '#5A5248',    // 禁用文字
    warn: '#3B2B1A',       // 警告/危险
  }
}
fontFamily: {
  mono: ['JetBrains Mono', 'Cascadia Code', 'Fira Code', 'monospace'],
}
```

## 需要创建的组件

### UI 基础组件 (src/components/ui/)

**Button.tsx** - 直角切角按钮
- variants: primary (军绿), secondary (铁灰), ghost (透明), danger (暗琥珀)
- sizes: sm, md, lg
- clip-path 切角效果 (4px)
- 悬停边框微光动画
- 加载状态 (spinner + disabled)
- VIP 专用样式 (暗金边框)

**Card.tsx** - 模块化卡片
- 半透明悬浮背景 (backdrop-blur)
- 军绿色细边框
- variants: default, highlighted (VIP), hoverable

**Panel.tsx** - 半透明悬浮面板
- backdrop-filter: blur(12px)
- 机械扫描线纹理 (repeating-linear-gradient)
- 可折叠/展开

**ProgressBar.tsx** - 机械进度条
- 双层结构：背景槽 + 填充条
- 填充条梯度 (军绿→橄榄绿→暗金)
- 扫描线纹理叠加
- 进度数字标注

**Modal.tsx** - 弹窗
- 背景毛玻璃遮罩
- 居中卡片
- 关闭动画 (十字准星收缩)
- 各种尺寸

**Toast.tsx** - 消息提示
- 位置: 右下角
- types: success, error, warning, info
- 自动消失 (3s)
- 军武风格图标

**Badge.tsx** - 角标
- VIP 暗金角标
- HOT/NEW 标签
- 数字角标

**Input.tsx** - 输入框
- 磨砂暗色背景
- 军绿色 focus 边框
- 切角效果
- 错误状态

**Skeleton.tsx** - 加载骨架屏
- 脉冲动画
- 暗色闪烁

**Compass.tsx** - 罗盘刻度装饰组件
- SVG 罗盘刻度环
- 用于顶部 HUD 条两端装饰

### 布局组件 (src/components/layout/)

**TopBar.tsx** - 顶部 HUD 状态栏
- 左侧: 时间 + 罗盘刻度装饰
- 中间: 硬件状态 (CPU温度/GPU温度/FPS)
- 右侧: VIP 标识 + 网络状态
- 窗口控制按钮 (最小化/最大化/关闭)
- 半透明背景，底部渐变消失
- 自定义拖拽区域 (-webkit-app-region: drag)

```
[≡ 10:45 ───◆───] [CPU 52° ● GPU 68° ● FPS 144] [⋆VIP ✓ ⋆⚡100ms] [━ ☐ ✕]
```

**BottomDock.tsx** - 底部导航 Dock
- 固定到底部
- 磨砂玻璃背景
- 图标+文字按钮
- 当前页高亮 (底部小三角)
- 按钮: 快速优化 | 画面滤镜 | 滤镜社区 | 改枪方案 | 设置
- 首页不显示 (页面状态为 home 时隐藏)

**DesktopGrid.tsx** - 桌面图标网格
- 2x3 网格布局
- 居中排列
- 响应式间距

**DesktopIcon.tsx** - 桌面图标
- 圆形/圆角图标
- 下方文字标签
- 悬停光晕效果
- 点击导航
- 尺寸: icon 64x64, 文字 12px

**PageContainer.tsx** - 页面容器
- 内容区域包装器
- 滚动容器 (隐藏滚动条)
- 顶部 padding 避开 TopBar
- 底部 padding 避开 Dock

### 样式文件

**src/styles/globals.css**
```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

@layer base {
  :root {
    --color-black: #0A0E17;
    --color-dark: #1A1F2E;
    --color-gray: #2D3349;
    --color-green: #3B4A3B;
    --color-olive: #5C7A3E;
    --color-army: #3A6B35;
    --color-brown: #4A3B22;
    --color-gold: #7A6B4A;
    --color-gold-light: #C8A95B;
    --color-text: #E8E0D0;
    --color-text-muted: #A09888;
    --color-text-dim: #5A5248;
    --color-warn: #3B2B1A;
  }

  * { scrollbar-width: none; }
  body {
    font-family: 'JetBrains Mono', monospace;
    background: var(--color-black);
    color: var(--color-text);
    overflow: hidden;
  }
}

@layer components {
  /* 切角按钮 */
  .btn-clip {
    clip-path: polygon(
      4px 0, calc(100% - 4px) 0,
      100% 4px, 100% calc(100% - 4px),
      calc(100% - 4px) 100%, 4px 100%,
      0 calc(100% - 4px), 0 4px
    );
  }
  
  /* 扫描线纹理 */
  .scanlines {
    background-image: repeating-linear-gradient(
      0deg,
      transparent 0px,
      rgba(0,0,0,0.03) 1px,
      transparent 2px
    );
  }
}
```

**src/styles/animations.css**
```css
/* 边框流光 */
@keyframes border-glow {
  0%, 100% { border-color: rgba(59, 74, 59, 0.6); }
  50% { border-color: rgba(92, 122, 62, 0.8); }
}

/* 扫描线展开 */
@keyframes scan-reveal {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* 十字准星展开 */
@keyframes crosshair-expand {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* 数字滚动跳变 */
@keyframes digit-roll {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

/* VIP 暗金流光 */
@keyframes gold-shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* 脉冲扫描 */
@keyframes radar-scan {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 抖动警告 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
```

### 注意事项
- 所有组件用 TypeScript + React 函数组件
- 使用 Tailwind className，适当用 clsx 库处理条件样式
- 组件支持 className prop 以扩展样式
- 动画使用 CSS 动画 + Framer Motion (framer-motion)
- 主题色用 Tailwind 类: bg-tactical-xxx, text-tactical-xxx