feat: 优化差旅报销预审流程与个人工作台 UI 体系
- 完善 user_agent_application 申请差旅报销预审槽位与消息组装 - 增强预算助理报告与风险建议卡片交互 - 重构登录页视觉样式与移动端响应式适配 - 优化个人工作台、文档中心、政策中心、员工管理等页面布局 - 拆分 travelRequestDetailPreReviewModel 为 advice/submit 模型 - 补充报销草稿、风险复核、Item Sync 与模板执行器测试覆盖
This commit is contained in:
caoxiaozhu
137
document/development/移动端适配/CONCEPT.md
Normal file
137
document/development/移动端适配/CONCEPT.md
Normal file
@@ -0,0 +1,137 @@
|
||||
# 移动端适配概念文档
|
||||
|
||||
## 功能一句话
|
||||
|
||||
让手机浏览器打开 X-Financial Web 时具备可导航、可对话、控件完整可点的移动端体验。
|
||||
|
||||
## 背景与问题
|
||||
|
||||
本轮目标是 Web 在手机浏览器中的适配，不是 `mobile/app` 原生应用。
|
||||
|
||||
当前 Web 已经有部分移动端样式，例如侧边栏抽屉、移动遮罩和报销助手工作台的弹层基础样式，但仍有两个直接影响手机使用的问题：
|
||||
|
||||
- 应用壳层已有 `mobileSidebarOpen` 状态和 `.mobile-hamburger-btn` 样式，却缺少真正可见的手机导航按钮。
|
||||
- 报销智能体使用 Element Plus `el-dialog` 打开全屏工作台，但手机宽度下仍保留弹窗式留边和双栏工作台逻辑，底部输入区把附件、日期、计算器、输入框和发送按钮挤在一行，容易展示不全。
|
||||
|
||||
## 目标与非目标
|
||||
|
||||
### 目标
|
||||
|
||||
- 手机浏览器下提供明确的 Web 导航入口。
|
||||
- 智能体对话在手机视口下以全屏工作台呈现，不保留弹窗留边。
|
||||
- 对话主区、洞察侧栏、底部输入区在手机上不互相挤压。
|
||||
- 附件、日期、差旅计算器和发送控件在窄屏下完整展示。
|
||||
- 侧栏洞察在手机上转为覆盖式面板，不占用主对话宽度。
|
||||
- 保持 X-Financial 企业 SaaS 风格：白底、细边框、低饱和、直角控件。
|
||||
|
||||
### 非目标
|
||||
|
||||
- 本轮不改 `mobile/app` 原生应用。
|
||||
- 本轮不重写所有 Web 业务页面为移动端卡片流。
|
||||
- 本轮不调整后端接口、数据库和智能体业务协议。
|
||||
- 本轮不改变报销助手的会话、附件、日期和差旅计算器业务逻辑。
|
||||
|
||||
## 用户与场景
|
||||
|
||||
- 员工、财务或审批人员在手机浏览器中临时打开 Web 工作台。
|
||||
- 用户通过侧边栏进入单据、预算、票据夹或智能体助手。
|
||||
- 用户在报销智能体中上传附件、选择业务日期、打开差旅计算器并发送问题。
|
||||
|
||||
## 功能能力
|
||||
|
||||
### 手机导航入口
|
||||
|
||||
输入：
|
||||
|
||||
- 手机浏览器打开 Web。
|
||||
- 视口宽度小于等于 `760px`。
|
||||
|
||||
输出：
|
||||
|
||||
- 页面右上角显示移动端导航按钮。
|
||||
- 点击按钮打开侧边栏抽屉。
|
||||
- 点击遮罩或导航项关闭侧边栏。
|
||||
|
||||
### 智能体全屏工作台
|
||||
|
||||
输入：
|
||||
|
||||
- 用户从工作台、单据、票据夹或预算中心打开报销智能体。
|
||||
- 当前视口为手机宽度。
|
||||
|
||||
输出：
|
||||
|
||||
- `el-dialog` 使用 100dvh 全屏，占满手机浏览器可视区域。
|
||||
- 工作台不再保留外边距和圆角弹窗感。
|
||||
- 对话主面板独占宽度。
|
||||
- 右侧洞察面板在打开时覆盖主对话，不挤压主对话宽度。
|
||||
|
||||
### 底部输入控件
|
||||
|
||||
输入：
|
||||
|
||||
- 用户添加附件、选择日期、打开差旅计算器或输入文本。
|
||||
|
||||
输出：
|
||||
|
||||
- 工具按钮在手机上独占一行，固定三列展示。
|
||||
- 输入框和发送按钮在下一行展示。
|
||||
- 日期与差旅计算器浮层改为固定底部浮层，宽度适配手机视口。
|
||||
- 附件区域可滚动，避免把输入区挤出屏幕。
|
||||
|
||||
## 方案设计
|
||||
|
||||
### Web 壳层
|
||||
|
||||
- 在 `AppShellRouteView.vue` 增加 `.mobile-hamburger-btn` 模板节点。
|
||||
- 复用现有 `mobileSidebarOpen` 状态和遮罩关闭逻辑。
|
||||
- 在 `app.css` 中补齐按钮默认隐藏，手机媒体查询内显示。
|
||||
|
||||
### 报销智能体
|
||||
|
||||
- 保持 `TravelReimbursementCreateView.vue` 的业务结构不变。
|
||||
- 在 `travel-reimbursement-create-view-part4.css` 的手机断点中覆盖 Element Plus 弹层、工作台、布局和输入区样式。
|
||||
- 手机断点下：
|
||||
- overlay padding 设为 `0`。
|
||||
- 工作台 `height/min-height` 使用 `100dvh`。
|
||||
- `assistant-layout` 改为单列。
|
||||
- `insight-panel-shell` 改为绝对定位覆盖面板。
|
||||
- `composer-row` 改为两行网格布局。
|
||||
|
||||
## 算法与公式
|
||||
|
||||
当前功能不涉及显式数学公式。
|
||||
|
||||
核心断点规则：
|
||||
|
||||
```css
|
||||
@media (max-width: 760px) {
|
||||
/* phone browser layout */
|
||||
}
|
||||
```
|
||||
|
||||
## 测试方案
|
||||
|
||||
- 静态回归测试：`node --test web/tests/app-shell-mobile-browser.test.mjs`。
|
||||
- Web 构建：`npm.cmd --prefix web run build`。
|
||||
- 手机视口浏览器验证：
|
||||
- 以 390x844 或相近视口打开 Web。
|
||||
- 验证导航按钮可见且侧栏可打开。
|
||||
- 打开报销智能体，验证工作台占满手机视口。
|
||||
- 验证底部附件、日期、差旅计算器、输入框和发送按钮完整展示。
|
||||
- 打开洞察面板，验证其覆盖展示而不是挤压主对话。
|
||||
|
||||
## 指标与验收
|
||||
|
||||
- `mobile/app` 无本轮改动。
|
||||
- 手机浏览器下 Web 存在可点击导航入口。
|
||||
- 报销智能体不再呈现带留边的弹窗效果。
|
||||
- 底部输入工具控件不被挤出屏幕。
|
||||
- 定向静态测试通过。
|
||||
- Web 构建通过。
|
||||
|
||||
## 风险与开放问题
|
||||
|
||||
- 其他业务页面仍可能存在表格密度过高的问题，需要按页面继续做字段折叠或卡片化。
|
||||
- 一些二级确认弹窗、票据预览和日期控件需要后续逐页检查。
|
||||
- 手机浏览器地址栏收起/展开会改变视口高度，后续应继续用真实设备补充验证。
|
||||
27
document/development/移动端适配/TODO.md
Normal file
27
document/development/移动端适配/TODO.md
Normal file
@@ -0,0 +1,27 @@
|
||||
# 移动端适配 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: 风险与开放问题]
|
||||
Reference in New Issue
Block a user