planet/docs/plans/earth-mobile-drawer-ui-plan.md

# 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](/home/ray/dev/linkong/planet/frontend/public/earth/index.html)

职责：

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

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

### [frontend/public/earth/js/controls.js](/home/ray/dev/linkong/planet/frontend/public/earth/js/controls.js)

职责：

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

### [frontend/public/earth/js/search.js](/home/ray/dev/linkong/planet/frontend/public/earth/js/search.js)

职责：

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

### [frontend/public/earth/js/info-card.js](/home/ray/dev/linkong/planet/frontend/public/earth/js/info-card.js)

职责：

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

### [frontend/public/earth/js/tv.js](/home/ray/dev/linkong/planet/frontend/public/earth/js/tv.js)

职责：

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

### [frontend/public/earth/js/news.js](/home/ray/dev/linkong/planet/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 放进抽屉”，而是“以抽屉为载体，重做一套适合手机端的信息页面”。

后续开发必须以此为准：

- 复用数据
- 重做界面
- 清除桌面遗留心智