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