移动端优先 · Android 首发 · iOS 后续平滑扩展

基于现有接口构建原生移动报销应用,保留 AI 助手、相机拍票和语音输入能力。

移动端作为 X-Financial 的新客户端,不重新发明业务系统。后端仍是唯一业务真相, App 侧专注手机场景:快速拍票、语音询问、查看进度、补材料、处理审批。 页面风格对齐 mobile/UI 设计稿,使用浅绿色企业金融风格、轻量卡片、 底部导航和固定操作条。

推荐栈:React Native + Expo + TypeScript 接口契约:OpenAPI 生成类型 数据缓存:TanStack Query 导航:React Navigation
5 底部主导航
2 平台能力:相机 / 语音
1 后端业务真相源
0 预览阶段默认创建草稿

端侧架构

App 按“页面功能、共享业务、平台能力”拆分。相机、语音、上传等能力不直接散落在页面里, 页面只消费服务接口,后续替换原生模块或增加 iOS 适配时不会影响业务页面。

分层清晰
App Shell
启动登录态恢复、版本检查、权限提示
导航底部 Tab、页面 Stack、深链
主题浅色企业绿、状态色、字号密度
错误边界接口失败、弱网、权限拒绝
Features
home首页、待办、最近进度、快捷入口
claims我的报销、新建、详情、补材料
approvals审批列表、同意、驳回、转交
assistantAI 对话、语音输入、票据建议
Shared
apiOpenAPI client、请求拦截、错误映射
domain状态机、权限、审批节点、金额格式化
designtoken、组件、图标、空状态
authtoken、用户上下文、审计请求头
Platform
camera拍照、相册、图片压缩、票据预览
voice录音、转写、麦克风权限、回填输入框
uploadmultipart、重试、进度、临时附件
permissionAndroid/iOS 权限声明与降级
mobile
├── app
│   ├── navigation
│   └── bootstrap
├── features
│   ├── home
│   ├── claims
│   ├── approvals
│   ├── assistant
│   └── profile
├── shared
│   ├── api
│   ├── auth
│   ├── domain
│   ├── design
│   └── components
└── platform
    ├── camera
    ├── voice
    ├── upload
    └── permissions

相机与语音能力

相机和语音是移动端的一等能力。相机服务票据生产流,语音服务助手输入流。 两者都先产生“用户可确认的中间结果”,不直接触发不可逆业务动作。

平台能力

相机拍票流程

拍照或相册选择后,先进入临时附件和 OCR 识别流程,用户确认后再绑定真实报销单。

采集
拍照 / 相册 / 文件选择,校验 jpg、png、pdf 与大小限制。
预处理
压缩图片、保留清晰度、生成预览图、记录本地上传任务。
识别
上传到临时附件区,触发 OCR 与票据分类,返回结构化识别结果。
确认
用户选择保存草稿、生成报销单、继续补充,才进入持久化。

语音输入流程

语音只作为输入方式,转写结果回填输入框,由用户确认后再发送给 AI 助手。

录音
点击或长按麦克风,展示录音时长、取消和完成状态。
转写
上传音频到后端统一转写,返回文本、时长、置信度。
确认
转写文本回填输入框,用户可编辑后发送,避免误提交。
助手
最终仍调用 /api/v1/orchestrator/run,保持助手逻辑一致。
关键边界:普通询问、票据预览和 AI 识别建议不自动创建草稿。只有用户明确选择保存草稿、生成报销单、 继续提交或关联已有草稿,才进入持久化链路。

页面设计与信息架构

页面结构沿用移动稿的底部导航:首页、报销、审批、AI 助手、我的。 首页聚合待办与最近进度,报销和审批分别承载个人申请与处理他人申请。

5 个主入口
1
首页 问候、AI 报销助手入口、待办、最近报销进度、通知提醒。
2
报销 我的报销列表、筛选、搜索、新建报销、草稿继续填写。
3
审批 待我审批、审批详情、同意、驳回、转交、审批意见。
4
AI 助手 文本/语音问答、上传票据、生成报销建议、查看制度。
5
我的 个人信息、角色、部门、设置、退出登录、权限说明。

现有移动端设计稿参照

移动端首页设计稿
首页
我的报销列表设计稿
我的报销
新建报销设计稿
新建报销
报销详情设计稿
报销详情
审批详情设计稿
审批详情
AI 助手设计稿
AI 助手

视觉与组件规范

mobile/UI 抽象设计 token,保证 mobile 和 web 能共享品牌语言。 组件要偏企业应用密度,避免营销页式大装饰。

Token 驱动
Brand Green #059669
Soft Green #effcf6
Text Primary #071124
Text Muted #728098
Warning #f59e0b
Danger #ef4444

基础组件

  • Button:主按钮、次按钮、危险按钮、底部固定 CTA。
  • Card:报销卡、待办卡、AI 结果卡、附件卡。
  • StatusPill:草稿、审批中、待补充、已付款、已驳回。

业务组件

  • ReceiptPreview:票据缩略图、识别状态、删除。
  • ClaimSummary:金额、单号、申请人、审批节点。
  • RiskBrief:AI 风控提示、关注、需补充、正常。

交互规范

  • 所有触控区域 Android 不小于 48dp。
  • 底部操作条必须预留安全区。
  • 长表单使用分组和折叠,避免一屏过载。

接口与同步策略

后端仍是唯一业务真相。移动端只做客户端适配,所有报销、审批、助手动作都走真实接口。 建议新增很薄的 mobile facade,用于首页聚合、临时附件和语音转写。

契约优先

复用现有接口

POST /api/v1/auth/login 登录
GET /api/v1/reimbursements/claims 我的报销
GET /api/v1/reimbursements/claims/approvals 审批中心
POST /api/v1/reimbursements/claims/{claim_id}/submit 提交
POST /api/v1/orchestrator/run AI 助手

建议新增移动端适配接口

GET /api/v1/mobile/bootstrap 配置与用户上下文
GET /api/v1/mobile/home 首页聚合
POST /api/v1/mobile/attachments/intake 临时附件
POST /api/v1/mobile/voice/transcribe 语音转写

接口类型同步

document/development/backend_api/openapi.json 生成 TypeScript 类型与 API client。

状态同步

statusapproval_stage、可编辑性、可上传性统一在 shared/domain 映射。

设计同步

设计 token 同时输出给 Web CSS variables 和 Mobile theme,减少双端视觉漂移。

交付计划

先做 Android MVP,确保核心报销闭环可用;再补齐语音、通知、离线草稿等体验增强; 最后进入 iOS 权限、打包和商店侧适配。

分阶段
P0 / Android MVP
打通核心链路 登录、首页、我的报销、新建报销、拍照上传、AI 助手文本输入、审批详情、同意/驳回。
P1 / 智能能力
强化移动生产力 语音输入、临时附件识别、助手生成报销单、风险前置、上传重试、会话恢复。
P2 / iOS 适配
平台一致性 iOS 相机/相册/麦克风权限、安全区、返回手势、TestFlight、App Store 配置。

验收标准

验收要围绕真实业务结果,不只看 UI 是否像设计稿。报销状态、审批节点、助手结果和附件绑定必须与后端一致。

真实验证
Android 真机可拍照、选相册、上传票据并看到识别结果。
语音输入可录音、转写、回填、编辑后发送给 AI 助手。
AI 预览、普通问答不自动保存草稿或创建报销单。
保存草稿、生成报销单、提交审批必须有明确用户动作。
报销列表、详情、审批列表与后端真实状态一致。
退回单据能回到可编辑/可补充状态,并展示正确操作。
弱网、上传失败、权限拒绝都有明确恢复路径。
触控区域、安全区、字体缩放和深链返回符合移动端体验。