Files

Chen Gu 5bd314deb2 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

5.9 KiB

Raw Blame History

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

任务

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

路径

/Users/guchen/.openclaw/workspace/maqt-desktop/

Tailwind 主题色 (tailwind.config.ts)

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

@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

/* 边框流光 */
@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

5.9 KiB Raw Blame History Unescape Escape