28 lines
2.3 KiB
Markdown
28 lines
2.3 KiB
Markdown
|
# 移动端适配 TODO
|
|||
|
|
|
|||
|
|
## 调研与边界
|
|||
|
|
|
|||
|
|
- [x] 确认本轮范围是手机浏览器打开 Web，不是 `mobile/app` 原生应用。证据：`CONCEPT.md` 已明确目标与非目标。[CONCEPT: 目标与非目标]
|
|||
|
|
- [x] 梳理 Web 应用壳层移动端状态。证据：`AppShellRouteView.vue` 已有 `mobileSidebarOpen` 和遮罩，但缺少按钮节点。[CONCEPT: 手机导航入口]
|
|||
|
|
- [x] 梳理报销智能体弹层结构。证据：`TravelReimbursementCreateView.vue` 使用 `el-dialog`、`assistant-layout`、`composer-row` 和洞察侧栏。[CONCEPT: 背景与问题]
|
|||
|
|
|
|||
|
|
## Web 实现
|
|||
|
|
|
|||
|
|
- [x] 在 Web 壳层补充手机导航按钮。证据：`AppShellRouteView.vue` 新增 `.mobile-hamburger-btn`，点击打开 `mobileSidebarOpen`。[CONCEPT: Web 壳层]
|
|||
|
|
- [x] 补齐手机导航按钮默认隐藏与手机断点显示。证据：`app.css` 新增默认隐藏，`760px` 断点内显示按钮。[CONCEPT: Web 壳层]
|
|||
|
|
- [x] 将报销智能体手机视口改为真正全屏。证据：`travel-reimbursement-create-view-part4.css` 覆盖 overlay padding、dialog 圆角和工作台 `100dvh`。[CONCEPT: 智能体全屏工作台]
|
|||
|
|
- [x] 将手机端洞察侧栏改为覆盖式面板。证据：`insight-panel-shell` 在手机断点下使用绝对定位和 `translateX` 切换。[CONCEPT: 智能体全屏工作台]
|
|||
|
|
- [x] 重排手机端底部输入区。证据：`composer-row` 改为两行网格，工具按钮独占一行，输入框和发送按钮在下一行。[CONCEPT: 底部输入控件]
|
|||
|
|
- [x] 调整日期和差旅计算器浮层。证据：手机断点下浮层使用固定底部定位并限制最大高度。[CONCEPT: 底部输入控件]
|
|||
|
|
|
|||
|
|
## 测试与验证
|
|||
|
|
|
|||
|
|
- [x] 运行 `node --test web/tests/app-shell-mobile-browser.test.mjs`。证据：2 个测试通过。[CONCEPT: 测试方案]
|
|||
|
|
- [x] 运行 `npm.cmd --prefix web run build`。证据：构建通过，保留既有 VueUse 注释和 chunk 体积 warning。[CONCEPT: 测试方案]
|
|||
|
|
- [ ] 使用手机视口打开 Web，验证导航、智能体全屏、底部控件完整展示和洞察覆盖面板。[CONCEPT: 测试方案]
|
|||
|
|
|
|||
|
|
## 后续增强
|
|||
|
|
|
|||
|
|
- [ ] 继续盘点高频表格页面的手机浏览器阅读体验。[CONCEPT: 风险与开放问题]
|
|||
|
|
- [ ] 逐页检查二级确认弹窗、票据预览、日期选择和复杂筛选在手机浏览器里的表现。[CONCEPT: 风险与开放问题]
|