🖥️ 主界面布局
你需要提供的图:QUAKE-H1 主界面全景截图。展示完整的桌面软件窗口布局:顶部 TitleBar、左侧快捷键库、中间 8×2 宫格(当前选中的格子在底部弹出设置面板)、右侧预置应用库。
界面总览

① TitleBar(标题栏)
你需要提供的图:TitleBar 标题栏特写。从左到右依次展示:LOGO → 设备选择下拉 → Profile 名称 → 用户头像 → AI 圆图标 → ⚙️ 设置 → 窗口按钮(最小化/最大化/关闭)。
| 区域 | 功能 | 说明 |
|---|---|---|
| LOGO | DECOKEE 品牌标志 | 纯展示 |
| 设备选择 ▾ | 切换已连接的 QUAKE-H1 设备 | 显示设备名 + 连接方式 |
| Profile 名称 ▾ | 下拉切换预设/自定义配置方案 | 切换时宫格 + Knob 路由同步切换 |
| 用户头像 👤 | 登录/注册/登出 | 未登录显示通用头像 |
| AI 圆图标 | 打开管理中心窗口 | 含 Claw 控制台、会议、表情、AI 插件 4 个 Tab |
| ⚙️ 设置 | 打开独立设置窗口 | 通用/设备/AI 配置 |
| 窗口按钮 | 最小化 / 最大化 / 关闭 | 全平台 |
② 左侧 — 快捷键库(ShortCutLib)
你需要提供的图:左侧快捷键库面板。顶部搜索框 + 8 个折叠分类菜单(至少展开 2-3 个),每个分类下列出可拖拽的快捷键项(带图标和文字)。
可拖拽的快捷按键库,类似 Elgato Stream Deck 的左侧面板。顶部有搜索框支持按名称过滤。
| 一级菜单 | 包含内容 |
|---|---|
| DECOKEE AI | 定时器、蜂鸣器、亮度(Knob)等硬件控制 |
| Shortcut | 打开网站、启动应用、热键、输入文本、多动作、命令 |
| DeviceControl | 亮度、静音、音量、截图、显示器、CMD、锁定 |
| MultiMedia | 切歌、暂停、播放、音量调节 |
| System | 静音、截图、CMD、新桌面、任务中心、剪贴板、控制面板 |
| Navigation | 浏览器导航类(仅 macOS) |
| macOS 专用 | 启动台、调度中心、强制退出、Spotlight |
每个项目有图标 + 名称,拖拽到中间宫格即完成配置。
③ 中间 — 快捷宫格 + 底部设置面板

8×2 快捷宫格(Shortcut Grid)
你需要提供的图:中间 8×2 宫格面板。16 个格子中部分已有快捷键图标(Mute、Vol、Brightness、Chat、Wallpaper 等),部分为空。顶部显示当前 Profile 名称 + 右侧 Knob 设置入口。
- 单击 → 选中该格,底部弹出设置面板
- 双击 → 快速进入编辑模式
- 拖拽 → 同 Profile 内排序,或从左右侧拖入新项目
底部设置面板(OperationConfiguration)
你需要提供的图:底部设置面板。选中某个宫格后显示:左侧图标预览(带放大效果),右侧配置表单(标题输入、尺寸选择、动作参数配置)。
| 设置项 | 说明 |
|---|---|
| 图标 | 显示当前图标 + 更换按钮(选内置图标 / 自定义图片 / 重置) |
| 标题 | 修改显示文字,最多 20 字符,带字数计数器 |
| 尺寸 | 1×1 / 2×1(横跨两列)/ 1×2(竖跨两行)/ 2×2(四格合并) |
| 动作配置 | 根据快捷键类型动态渲染不同配置表单(见下表) |
| 时间 | 按压时长 / 按键间隔(毫秒滑块) |
| 删除 | 移除该快捷键 |
动作配置类型一览
| 类型 | 组件 | 配置项 |
|---|---|---|
hotkey 热键 | HotkeyConfig | 按键录制、修饰键、单击/长按 |
website 网站 | WebsiteConfig | URL、打开方式 |
app 应用 | AppConfig | 路径、启动参数 |
text 文本 | TextConfig | 文本内容、键入速度 |
multiActions 多项操作 | MultiActionsEditor | 动作编排(含延时、排序) |
pluginAction 插件 | PluginActionConfig | 插件动态表单 |
homeAssistant 智能家居 | HAConfigContent | 选实体 + 动作 |
clawbot AI 智能体 | ClawbotConfig | 选 Agent |
knob 旋钮 | KnobVoiceChatConfig | 旋钮 + 语音路由 |
aiChat AI 对话 | AIChatConfig | 角色选择 |
colorfulScreenSettings 彩屏 | ColorfulScreenSettings | 彩屏主题 |
④ 右侧 — 预置应用库(LibraryPanel)
你需要提供的图:右侧预置应用库面板。顶部 [+] 添加按钮。下方分组展示:Discord(已展开)、Premiere Pro、AI 插件库、表情包等折叠菜单。
三类来源:
| 来源 | 说明 |
|---|---|
| 预置 App | Discord、Premiere Pro、OBS 等预设快捷键集 |
| AI 生成 | 用户一句话描述,AI 自动生成快捷键配置 |
| 表情包 | 用户导入的自定义图标库 |
操作:从任意分组拖拽项目到中间宫格,自动完成配置。
⑤ 子窗口体系
DK-Suite 的每个独立功能都有专属窗口:
| 窗口 | 打开方式 | 用途 |
|---|---|---|
| 主窗口 | 启动应用 | 主面板和宫格配置 |
| AI 助手 | TitleBar AI → AI Chat | AI 对话聊天 |
| 设置 | TitleBar ⚙️ | 通用/设备/AI 配置 |
| 管理中心 | TitleBar AI 图标 | OpenClaw/会议/表情/插件管理 |
| 新手向导 | 首次启动自动弹出 | 引导完成初始设置 |
| 图标库 | 编辑宫格图标时 | 选择内置图标 |