chore: initial commit - maqt-desktop v0.2

- Phase 1-5: UI framework, auth, weapon schemes, color filters, system optimization - Industrial/tech design style with Chinese localization - Points to gch3n.online/delta backend API - Hardware monitor, filter editor, and all module pages
2026-05-09 00:31:09 +08:00
commit 5bd314deb2
80 changed files with 12217 additions and 0 deletions
--- a/WAVE2_UI_SPEC.md
+++ b/WAVE2_UI_SPEC.md
@@ -0,0 +1,244 @@
+# 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