linkong/planet
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
Files
b87cb310fd7f2ac4cc5e9f00a6faaa2637da2595
planet/docs/plans/earth-mobile-drawer-ui-plan.md
linkong 439a512148 docs: add earth mobile drawer UI plan and Claude Code/Codex toolchain 
- Add earth-mobile-drawer-ui-plan documenting mobile drawer UX decisions
- Add goal-driven.md Claude Code command for autonomous task execution
- Add .codex/ config with OpenAI model definitions and goal-driven agent
- Add SKILL.md, openai.yaml, and prompt-template for Codex integration
2026-04-22 17:37:00 +08:00

9.4 KiB
Raw Blame History

Earth Mobile Drawer UI Plan

背景

当前 Earth 移动端已经补上了基础触控能力，例如：

  • 单指拖拽旋转地球
  • 双指缩放
  • 点击阈值和基础事件隔离

但移动端 UI 仍然存在一个根本问题：

它还在沿用桌面 HUD 的内容切分方式，只是把原来的 panel、modal、toolbar 改位置、改层级、改容器。这样虽然能快速复用旧代码，但手机端体验仍然是生硬的，因为：

  • 信息密度和结构是按桌面设计的
  • 面板标题、关闭、折叠、开关项是桌面心智，不是手机心智
  • 很多内容只是“被塞进抽屉”，而不是为抽屉重新设计
  • 设置里仍然带有“显示/隐藏某些 panel”的思路，但移动端本来就不应该存在那些独立 panel

因此本计划进一步收紧：

移动端不只是“底部抽屉化”，而是重新设计一套 fit 抽屉体系的 mobile-first UI。

新目标

  1. 手机端不再使用现有 toolbar 作为主入口。
  2. 手机端不再使用现有独立 panel / modal / sheet 作为直接 UI 单元。
  3. 手机端统一采用“底部抽屉 + 顶部标题 + tab 切换 + 卡片内容”的单前景模式。
  4. 抽屉内部每个 tab 页面都按移动端重新设计内容结构，而不是直接复用旧 panel 结构。
  5. 设置页移除“显示/隐藏 panel”的桌面遗留配置。
  6. 媒体页拆成两个移动端页面：新闻 与 TV，都归入抽屉体系。
  7. 桌面端保持现有 HUD 体系，不回退。

核心原则

1. 只复用数据和状态，不复用桌面 UI 结构

可复用：

  • 图层注册表
  • 搜索结果数据
  • BGP / 海缆 / 卫星详情数据
  • 媒体数据
  • 旋转、缩放、选择、高亮等运行时状态

不直接复用：

  • 桌面 panel DOM 结构
  • 桌面 panel header / close / collapse 交互
  • 桌面 settings 项里的“显示某 panel”逻辑
  • 桌面媒体面板布局

2. 抽屉是唯一主前景层

移动端同一时刻只有一个主前景层：底部抽屉。

抽屉内部切换内容页，而不是多个悬浮层互相覆盖。

3. 每个 tab 都是移动端页面，而不是 panel 容器

抽屉中的每一项都应视为一个移动端子页面：

  • 有自己的标题
  • 有自己的内容层次
  • 有自己的滚动区域
  • 有自己的主操作

而不是简单挂一个旧面板进去。

4. 移动端状态提示不占据屏幕正中

桌面端当前很多通知、状态提示、胶囊消息更适合在屏幕上方居中出现，但移动端不应继续沿用这套布局。

移动端统一改为：

  • 通知栏放在右上角安全区
  • 胶囊提示放在右上角堆叠
  • 不遮挡地球中心视野
  • 不与底部抽屉主交互区冲突

交互模型

默认态

移动端默认只显示：

  • 地球主画布
  • 底部半露出的抽屉头部

不再单独显示上箭头按钮。

展开态

用户从底边直接上拉抽屉，或点击抽屉头部展开。

展开后显示：

  • 当前页面标题
  • tab 导航
  • 当前页面内容

收起态

用户下拉抽屉头部收起，或点击背景收起。

信息架构

移动端抽屉内的一级页面重定为：

  1. 图层
  2. 搜索
  3. 态势
  4. 新闻
  5. TV
  6. 设置
  7. 详情（按需出现，不固定常驻 tab）

其中 新闻 和 TV 不再共享同一个移动端媒体面板。

页面重设计要求

图层页

目标：

  • 成为移动端最核心的控制页
  • 强调快速开关，不强调桌面 panel 感

内容建议：

  • 顶部摘要：当前已启用图层数量
  • 图层列表卡片
  • 每个图层项只保留：
    • 图标
    • 中文名
    • 英文副标题
    • 开关
  • 去掉桌面式 header / collapse / close 结构

搜索页

目标：

  • 成为抽屉中的完整搜索页
  • 避免看起来像桌面 modal 被塞进抽屉

内容建议：

  • 顶部搜索输入框
  • 搜索提示文案
  • 结果列表
  • 结果项更适合手指点击
  • 结果点击后：
    • 聚焦地球对象
    • 自动切换到详情页

态势页

目标：

  • 合并原来的 stats + legend 思路
  • 成为移动端全局态势页

内容建议：

  • 顶部核心统计卡
    • 海缆数量
    • 登陆点数量
    • 卫星数量
    • BGP 事件数量
  • 当前关注层图例
  • BGP 状态摘要
  • 不再出现独立 legend 面板和独立 stats 面板

新闻页

目标：

  • 从原媒体面板中拆出单独的移动端新闻页

内容建议：

  • 当前区域焦点
  • 新闻源数量
  • 新闻卡片列表
  • 卡片内显示标题、来源、时间、区域
  • 外链操作更清晰

TV 页

目标：

  • 从原媒体面板中拆出单独的移动端 TV 页

内容建议：

  • 顶部频道选择
  • 直播状态
  • 当前频道说明
  • 视频播放器区域
  • 刷新和外链按钮

不再保留桌面式“新闻/TV tab 共处一个 panel”的结构。

设置页

目标：

  • 只保留对移动端仍有意义的系统配置

必须移除：

  • 图层控制 panel 显示/隐藏
  • 图例 panel 显示/隐藏
  • 全球态势 panel 显示/隐藏
  • 媒体 panel 显示/隐藏

保留项建议：

  • 旋转模式
  • 日夜模式
  • 地球默认大小
  • 地形透明度
  • 系统入口

原因：

移动端已经没有这些独立 panel 了，所以继续保留这些开关会制造错误心智。

详情页

目标：

  • 成为海缆 / BGP / 卫星对象的统一移动端详情页

内容建议：

  • 标题区
  • 类型标签
  • 关键属性列表
  • 相关对象摘要
  • 相关图层或态势提示

行为建议：

  • 点击对象后自动切入详情页
  • 搜索结果点击后也切入详情页

阶段重定义

阶段 2：抽屉壳层

目标：

  1. 实现底部抽屉基本壳层。
  2. 支持上拉展开、下拉收起、背景点击关闭。
  3. mobile 模式下隐藏旧 toolbar。
  4. mobile 模式下不再直接显示旧 panel。

完成标准：

  1. 手机端只有地球主视图和抽屉。
  2. 抽屉开合稳定。

阶段 3：基础页面重做

目标：

  1. 重新设计并实现图层页。
  2. 重新设计并实现搜索页。
  3. 重新设计并实现设置页。

完成标准：

  1. 这三个页面不再是旧 panel 原样移植。
  2. 设置页已移除 panel 可见性开关。

阶段 4：态势与详情重做

目标：

  1. 将 stats 和 legend 合并为新的态势页。
  2. 实现统一详情页。
  3. 对象点击与搜索结果点击都可切入详情页。

完成标准：

  1. 不再存在移动端独立 legend / stats 面板。
  2. 详情页成为统一对象信息入口。

阶段 5：媒体拆分重做

目标：

  1. 将原媒体面板拆成两个移动端页面：新闻页、TV 页。
  2. 分别重做这两个页面的布局。
  3. 保留各自必要操作，但不继续共享桌面 panel 结构。

完成标准：

  1. 新闻与 TV 各自成为独立移动端页面。
  2. 不再使用桌面媒体 panel 的 tab 结构作为移动端主体。

阶段 6：手感与真机修正

目标：

  1. 调整抽屉高度、节奏、手势阈值。
  2. 调整 tab 密度与文字层级。
  3. 优化 iPhone / Android 安全区。
  4. 优化抽屉滚动与地球拖拽边界。

完成标准：

  1. 抽屉和地球不会抢手势。
  2. 手机端各页面信息层次清晰。
  3. 真机下无遮挡、无死层、无错误交互心智。

技术落点调整

frontend/public/earth/index.html

职责：

  • 只保留移动端抽屉壳层
  • 为各页面提供新的页面容器

不再把旧 panel 作为最终结构直接塞进抽屉。

frontend/public/earth/js/controls.js

职责：

  • 管理抽屉开合
  • 管理 tab 切换
  • 管理详情页切入
  • 管理 mobile / desktop 分流

frontend/public/earth/js/search.js

职责：

  • 保留搜索能力和结果逻辑
  • 输出给新的移动端搜索页

frontend/public/earth/js/info-card.js

职责：

  • 从桌面 info-card 逻辑中提取可复用的数据层
  • 服务新的移动端详情页

frontend/public/earth/js/tv.js

职责：

  • 为新的 TV 页面提供数据和状态
  • 不再直接主导移动端媒体 panel 壳层

frontend/public/earth/js/news.js

职责：

  • 为新的新闻页面提供列表和区域焦点数据

CSS

需要新增真正的移动端页面样式，而不是继续在旧 panel class 上堆条件分支：

  • 图层页样式
  • 搜索页样式
  • 态势页样式
  • 新闻页样式
  • TV 页样式
  • 设置页样式
  • 详情页样式
  • 移动端右上角通知 / 胶囊提示样式

验收标准

  1. mobile 模式下不再显示旧 toolbar。
  2. mobile 模式下不再把旧 panel 直接作为最终 UI。
  3. 图层、搜索、态势、新闻、TV、设置都是重新设计的移动端页面。
  4. 设置页不再包含移动端无意义的 panel 显示/隐藏项。
  5. 新闻与 TV 已拆分为两个移动端页面。
  6. legend / stats 已整合为态势页。
  7. 详情页成为统一对象详情入口。
  8. 移动端通知栏和胶囊提示已统一放到右上角安全区，而不是屏幕正中。

结论

本计划进一步明确：

移动端目标不是“把桌面 HUD 放进抽屉”，而是“以抽屉为载体，重做一套适合手机端的信息页面”。

后续开发必须以此为准：

  • 复用数据
  • 重做界面
  • 清除桌面遗留心智
Reference in New Issue View Git Blame Copy Permalink