eafonyang
13 KiB
13 KiB
Luxsin X9 UI 功能排表与布局指南
全局组件
1. 顶部状态栏（所有页面）
| 位置 | 组件 | 功能 | 尺寸 |
|---|---|---|---|
| 最顶部 | StatusBar | 显示时间、信号、WiFi、电量 | 44px 高度 |
| 左侧 | 时间显示 | 实时更新系统时间（HH:MM） | 13px 字体 |
| 右侧 | 状态图标 | 信号强度、WiFi、蓝牙、电量指示 | 3.5-4px 图标 |
2. 底部导航栏（手机端 < 1024px）
| 位置 | Tab 名称 | 路由 | 图标 |
|---|---|---|---|
| 左1 | 社区 | /community | 消息气泡 |
| 左2 | HP-EQ | /eq | 波形图 |
| 中央 | 主页 | / | 房子 |
| 右1 | Effect | /effects | 效果器 |
| 右2 | 我的AI | /ai | AI 图标 |
首页（Home / Dashboard）
区块 1：顶部导航栏
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 设备名称 + 下拉箭头 | 显示 "Luxsin X9" | 可切换设备（预留功能） |
| 右侧 | 设置按钮 | 跳转到 /system | 齿轮图标，圆形玻璃按钮 |
区块 2：设备示意图
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 中央 | 设备 SVG 图 | 展示 Luxsin X9 外观 | 可替换为真实产品照片 |
| 下方 | 音频格式显示 | 显示当前采样率（如 PCM 44.1kHz） | 文本信息 |
区块 3：音量控制
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 中央 | 音量数值 | 显示当前音量（如 -22dB） | 青色文字，大字体 |
| 下方 | 音量滑块 | 拖拽调整音量 | 青色填充 + 霓虹发光 |
| 左右 | 减/加按钮 | 快速调整音量 ±1dB | 喇叭图标 |
区块 4：快捷控制矩阵（2×2 网格）
| 位置 | 按钮 | 功能 | 说明 |
|---|---|---|---|
| 左上 | 电源 | 开关设备 | 电源图标，圆形玻璃按钮 |
| 右上 | EQ | 跳转 /eq（HP-EQ 页面） | 波形图标 |
| 左下 | HP-EQ | 跳转 /eq | 耳机图标 |
| 右下 | Bypass | 切换 DSP 处理 | 绕过图标 |
区块 5：快速菜单列表
| 位置 | 菜单项 | 路由 | 说明 |
|---|---|---|---|
| 1 | 输入源 | /io | 选择输入端口（USB/光纤/蓝牙等） |
| 2 | 输出端口 | /io | 选择输出端口（XLR/RCA/耳机等） |
| 3 | Effect | /effects | 效果器开关 + 当前效果器名称 |
| 4 | 音频设置 | /audio | 音频参数调整 |
| 5 | VU 表 | /vu | VU 表库选择 |
HP-EQ 页面（/eq）
区块 1：页面头部
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 返回按钮 | 返回首页 | 左箭头图标 |
| 中央 | 标题 | 显示 "HP-EQ" | 17px 字体，加粗 |
| 右侧 | 开关 | 启用/禁用 HP-EQ | iOS 风格 Toggle，缩小 10% |
区块 2：操作卡片（2 列）
| 位置 | 卡片 | 功能 | 尺寸 |
|---|---|---|---|
| 左 | 批量编辑 | 打开批量编辑界面 | 玻璃卡片，py-3（高度缩小 10px） |
| 右 | 添加耳机型号 | 添加新的耳机型号 | 玻璃卡片，py-3 |
区块 3：耳机型号选择
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 耳机名称 + 下拉箭头 | 显示当前选择的耳机型号 | 可点击跳转到 SelectPage |
| 右侧 | −/+ 按钮 | 快速切换耳机型号 | 两个圆形按钮 |
区块 4：频率响应图
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 顶部 | 图例 | 显示 Equalizer / Raw / Equalized | 三种曲线类型 |
| 中央 | A/B 对比按钮 | 切换 A/B 曲线对比 | 青色高亮激活状态 |
| 中央 | 复制到 B 按钮 | 将 A 曲线复制到 B | 灰色按钮 |
| 中央 | DIFF 按钮 | 显示差异曲线 | 黄色边框按钮 |
| 下方 | SVG 曲线图 | 绘制频率响应曲线 | 带网格线，频率标签（20Hz-20kHz） |
区块 5：波段按钮网格（2 行 × 5 列）
| 位置 | 按钮 | 频率 | 说明 |
|---|---|---|---|
| 1 | 9.5K | LSHELF | 低频架 |
| 2 | 9.2K | PEAK | 峰值 |
| 3 | 220 | PEAK | 中低频 |
| 4 | 500 | PEAK | 中频（当前选中，青色） |
| 5 | 1.2K | PEAK | 中高频 |
| 6 | 13.8K | NOTCH | 凹陷 |
| 7 | 11.0K | PEAK | 峰值 |
| 8 | 7.4K | PEAK | 高频 |
| 9 | 8.2K | PEAK | 高频 |
| 10 | 10K | HSHELF | 高频架 |
区块 6：滤波器参数卡
| 位置 | 参数 | 范围 | 说明 |
|---|---|---|---|
| 顶部 | 滤波器类型 | PEAK / LSHELF / HSHELF / NOTCH 等 | 点击跳转 SelectPage 选择 |
| 中部 | FREQ（频率） | 20Hz - 20kHz | 青色滑块，显示当前值 |
| 中部 | GAIN（增益） | -15dB - +15dB | 青色滑块，显示当前值 |
| 下部 | Q 值 | 0.1 - 10 | 青色滑块，显示当前值 |
区块 7：总增益卡
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 总增益标签 | 显示 "总增益" | 文本标签 |
| 中央 | 总增益数值 | 显示当前总增益（如 -3.0 dB） | 青色文字 |
| 右侧 | AUTO 开关 | 自动调整总增益 | iOS Toggle，缩小 10% |
| 下方 | 总增益滑块 | 手动调整总增益 | 青色滑块 |
音频设置页面（/audio）
区块 1：页面头部
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 返回按钮 | 返回上一页 | 左箭头 |
| 中央 | 标题 | 显示 "音频设置" | 17px 字体 |
区块 2：iOS 列表行（可滚动）
| 序号 | 菜单项 | 右侧显示 | 功能 |
|---|---|---|---|
| 1 | 左右平衡 | 数值 + 滑块 | 调整 L/R 平衡 |
| 2 | VU 表灵敏度 | 数值 + 滑块 | 调整 VU 表灵敏度 |
| 3 | 输出特性 | 下拉选择 | 跳转 SelectPage 选择 |
| 4 | 滤波特性 | 下拉选择 | 跳转 SelectPage 选择 |
| 5 | 耳机增益 | 下拉选择 | 跳转 SelectPage 选择 |
| 6 | 音量幅度 | 下拉选择 | 跳转 SelectPage 选择 |
| 7 | 开机音量 | 下拉选择 | 跳转 SelectPage 选择 |
| 8 | XLR 端口极性 | 下拉选择 | 跳转 SelectPage 选择 |
| 9 | IIS 静音电平 | 下拉选择 | 跳转 SelectPage 选择 |
| 10 | IIS 模式 | 下拉选择 | 跳转 SelectPage 选择 |
效果器页面（/effects）
区块 1：页面头部
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 返回按钮 | 返回首页 | 左箭头 |
| 中央 | 标题 | 显示 "Effect" | 17px 字体 |
| 右侧 | 开关 | 启用/禁用效果器 | iOS Toggle，缩小 10% |
区块 2：效果器卡片（可滚动列表）
| 序号 | 效果器名称 | 右侧显示 | 功能 |
|---|---|---|---|
| 1 | Style（风格） | 下拉 + Toggle | 选择风格 / 启用开关 |
| 2 | 声场宽度 | 数值 + 滑块 + Toggle | 调整宽度 / 启用开关 |
| 3 | Crossfeed（交叉反馈） | 下拉 + Toggle | 选择预设 / 启用开关 |
| 4 | 音调 | Toggle | 启用/禁用 |
| 5 | 响度补偿 | Toggle | 启用/禁用 |
| 6 | 低音炮 | Toggle | 启用/禁用 |
输入/输出页面（/io）
区块 1：页面头部
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 返回按钮 | 返回上一页 | 左箭头 |
| 中央 | 标题 | 显示 "输入输出" | 17px 字体 |
区块 2：Input 圆形图标选择器
| 图标 | 标签 | 功能 | 说明 |
|---|---|---|---|
| USB-B | USB-B | 选择 USB-B 输入 | 圆形按钮，激活时青色 |
| USB-C | USB-C | 选择 USB-C 输入 | 圆形按钮，激活时青色 |
| 同轴 | 同轴 | 选择同轴输入 | 圆形按钮 |
| 光纤 | 光纤 | 选择光纤输入 | 圆形按钮 |
| 蓝牙 | 蓝牙 | 选择蓝牙输入 | 圆形按钮 |
| IIS | IIS | 选择 IIS 输入 | 圆形按钮 |
区块 3：Output 圆形图标选择器
| 图标 | 标签 | 功能 | 说明 |
|---|---|---|---|
| XLR | XLR | 选择 XLR 输出 | 圆形按钮 |
| RCA | RCA | 选择 RCA 输出 | 圆形按钮 |
| XLR/RCA | XLR/RCA | 选择 XLR/RCA 输出 | 圆形按钮 |
| 耳机 | 耳机 | 选择耳机输出 | 圆形按钮，激活时青色 |
蓝牙页面（/bluetooth）
区块 1：页面头部
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 返回按钮 | 返回上一页 | 左箭头 |
| 中央 | 标题 | 显示 "蓝牙" | 17px 字体 |
区块 2：蓝牙状态卡
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 顶部 | 蓝牙状态 | 显示已连接/未连接 | 文本信息 |
| 中部 | 设备名称 | 显示配对的蓝牙设备名 | 文本信息 |
| 下部 | 信号强度 | 显示蓝牙信号强度 | 信号强度条 |
区块 3：蓝牙播放控制
| 位置 | 按钮 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 上一曲 | 播放上一首 | 跳过后退图标 |
| 中央 | 播放/暂停 | 控制播放 | 播放/暂停图标 |
| 右侧 | 下一曲 | 播放下一首 | 跳过前进图标 |
系统设置页面（/system）
区块 1：页面头部
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 返回按钮 | 返回首页 | 左箭头 |
| 中央 | 标题 | 显示 "系统设置" | 17px 字体 |
区块 2：iOS 列表行
| 序号 | 菜单项 | 右侧显示 | 功能 |
|---|---|---|---|
| 1 | 连接状态 | 已连接/断开 | 显示当前连接状态 |
| 2 | 设备 IP | IP 地址 | 显示设备 IP 地址 |
| 3 | 语言 | 下拉选择 | 跳转 SelectPage 选择语言 |
| 4 | 定时器 | 下拉选择 | 跳转 SelectPage 选择定时器 |
| 5 | 设备信息 | 箭头 | 查看设备详细信息 |
| 6 | 断开连接 | 按钮 | 断开当前连接 |
| 7 | Demo 模式 | Toggle | 启用/禁用演示模式 |
VU 表页面（/vu）
区块 1：页面头部
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 返回按钮 | 返回上一页 | 左箭头 |
| 中央 | 标题 | 显示 "VU 表" | 17px 字体 |
区块 2：VU 表库选择（网格或列表）
| 库名 | 类型 | 功能 | 说明 |
|---|---|---|---|
| VU 表 1 | 指针表 | 选择指针式 VU 表 | 圆形或列表项 |
| VU 表 2 | 条形表 | 选择条形 VU 表 | 圆形或列表项 |
| VU 表 3 | 数字表 | 选择数字 VU 表 | 圆形或列表项 |
通用选择页面（/select）
区块 1：页面头部
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 左侧 | 返回按钮 | 返回上一页 | 左箭头 |
| 中央 | 标题 | 动态显示选择项标题 | 从 URL 参数读取 |
区块 2：选择项列表
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 列表 | 选择项 | 点击选择 | 激活时青色高亮 |
| 右侧 | 复选标记 | 显示当前选中项 | 青色勾选图标 |
连接页面（/connect）
区块 1：页面背景
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 全屏 | 背景图 | 展示品牌背景 | 深色渐变 + 光效 |
区块 2：中央卡片
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 顶部 | 品牌 Logo | 显示 Luxsin 标志 | 圆形图标 |
| 中部 | 标题 | 显示 "Luxsin X9" | 大字体 |
| 中部 | 副标题 | 显示 "Pre-Amplifier Controller" | 灰色小字 |
区块 3：连接输入框
| 位置 | 组件 | 功能 | 说明 |
|---|---|---|---|
| 输入框 | IP 地址输入 | 输入设备 IP 地址 | 玻璃卡片风格 |
| 下方 | 提示文本 | 显示输入提示 | 灰色小字 |
区块 4：连接按钮
| 位置 | 按钮 | 功能 | 说明 |
|---|---|---|---|
| 主按钮 | 连接设备 | 连接到输入的 IP | 青色按钮，全宽 |
| 副按钮 | 使用演示模式 | 进入 Demo 模式 | 青色文字链接 |
样式参考
颜色系统
| 用途 | 颜色值 | 说明 |
|---|---|---|
| 主色调 | #00FFF6 | 青色，用于按钮、Toggle、滑块、高亮 |
| 背景 | #000000 | 纯黑 |
| 卡片背景 | rgba(28,28,30,0.92) | 深灰玻璃 |
| 文字主色 | #FFFFFF | 白色 |
| 文字辅色 | rgba(255,255,255,0.6) | 半透明白色 |
| 边框 | rgba(255,255,255,0.1) | 浅色边框 |
圆角规范
| 元素 | 圆角值 | 说明 |
|---|---|---|
| 按钮 | 10-12px | 中等圆角 |
| 卡片 | 12-16px | 较大圆角 |
| 输入框 | 10px | 中等圆角 |
| Toggle | 完全圆形 | 药丸形 |
尺寸规范
| 元素 | 尺寸 | 说明 |
|---|---|---|
| Toggle 开关 | 46×28px | 缩小 10% 后的尺寸 |
| 圆形按钮 | 40×40px | 快捷控制、输入输出选择 |
| 列表行高 | 56px | iOS 标准列表行高 |
| 状态栏高度 | 44px | iOS 标准状态栏高度 |
使用说明
当你需要修改某个组件时，可以这样指出：
- "首页区块 4 的电源按钮改成..." — 指首页快捷控制矩阵的左上按钮
- "HP-EQ 区块 5 的波段按钮改成..." — 指 HP-EQ 页面的频率波段网格
- "音频设置第 3 行改成..." — 指音频设置页面的第 3 个菜单项
- "所有 Toggle 开关改成..." — 指全局所有 iOS Toggle 组件
这样我就能准确定位你要改的位置了！