跳到内容

App 页面预览

受众:开发者 摘要:App 移动端视图:首页 / 搜索 / 博客 / 论坛 / 商城 / 聊天 / 消息 / 通知 / AI / 个人中心。

本页归档 uni-app 移动端工程接入说明、信息架构规划、页面截图和页面清单。前端聚合构建、截图资源目录和通用规则见 前端工程

页面截图 / 页面清单

App 完整页面完成后,移动端截图统一放在 docs/zh-CN/assets/frontend/app/,并在本节引用。截图来自 H5 预览的移动端视口,必须覆盖完整设备视口;页面可滚动时按“真实首屏 + 无遮挡长图”生成:*-screen.png 保留底部导航展示真实观感,*-full.png 优先用 Playwright 滚动分段截图 + sharp 拼接,截图脚本可隐藏或裁掉底部 tabbar 和悬浮按钮,避免固定导航遮挡正文。不提交局部组件或裁剪后的卡片截图。需要登录态或后端数据的页面可使用联调环境或受控 mock 数据生成截图,但文档必须说明当前后端/API 缺口。

App 端截图脚本位于 views/app/scripts/capture-screenshots.mjs,可先执行 pnpm --dir views/app build:h5,再用 pnpm --dir views/app capture:screenshots -- --pages=messages,notifications,chat 生成消息闭环代表页面的真实首屏图和无遮挡长图;如本机未安装 Playwright 浏览器,脚本会优先使用系统 Chrome,也可通过 APP_SCREENSHOT_BROWSER_PATH 指定浏览器。

本页所有页面所属端均为 App。页面条目使用“页面名 + 截图 + 关键说明”的纵向写法,适合手机、平板和桌面阅读。

App 移动端中文文案默认使用面向普通用户的业务语义:用户、商户、视频、链等标识在界面上展示为“编号”,避免把内部字段感强的 ID / # 直接暴露给用户;钱包交易哈希、授权地址、封面地址等异步结果缺失时使用“暂未获取到 / 可手动填写 / 请稍后重试”这类状态和动作,可签名交易参数使用“已就绪 / 暂未获取到”描述,不把“已返回 / 未返回”接口口径直接展示给用户;CMS 用户侧统一称“内容中心 / 站点内容”,不使用后台“内容运营”口径;Token、NFT、Webhook 等行业通用词仍按业务场景保留。

内容首页

App 内容首页真实首屏截图App 内容首页无遮挡长图
  • 路由路径pages/home/index / H5 #/pages/home/index
  • 当前完成状态:已按国内 App 首页节奏重排为顶部品牌、并排搜索、CMS 轮播、金刚区快捷入口、服务中台卡片、平台公告和推荐流;平台公告位于推荐流上方,并恢复完整公告卡片 / 空态高度,方便运营内容展示;首页显式分出“博客”和“论坛”两个内容入口,不再使用宽泛社区承载未定义能力;通知与聊天分开,底部“聊天”Tab 使用独立聊天入口,底部“消息”Tab 承载通知中心;推荐流展示 Blog 推荐、Forum 置顶 / 精华标识,CMS 导航和轮播支持 url、App 内路由、extraJson.route/path/targetType/targetId 和统一 CMS 详情预览
  • 需要主分支补齐的后端/API 事项:继续复用站点信息、CMS 轮播图、导航、公告列表、Blog、Forum 和 Mall 公开列表接口;轮播详情已可通过 GET /api/v1/cms/banners/{id} 按 ID 读取,无 URL 轮播仍可先通过列表字段预览详情,后续可继续约定轮播目标内容字段和点击统计
  • 后续可优化点:后续可补服务端统一推荐流、CMS 导航运营规则和轮播点击数据

CMS 内容详情页

App CMS 内容详情页截图
  • 路由路径cms/detail / H5 #/cms/detail?type=:type&id=:id
  • 当前完成状态:已作为公告、页面、内容块、专题、轮播和导航的统一移动端详情预览页;详情接口不可用时展示列表带入的标题、摘要、图片和日期,并保留可读降级
  • 需要主分支补齐的后端/API 事项:公告、页面、内容块、专题、轮播和导航详情接口已可读取;轮播详情使用 GET /api/v1/cms/banners/{id},导航详情使用 GET /api/v1/cms/navigations/{id},当前前端仍保留列表字段降级以兼容接口异常或模块关闭场景
  • 后续可优化点:后续可补富文本渲染、分享、相关推荐和运营点击统计

统一搜索页

App 统一搜索页截图
  • 路由路径pages/search/index / H5 #/pages/search/index?keyword=:keyword
  • 当前完成状态:已从 App 本地 fan-out 升级为调用 GET /api/v1/search 聚合 CMS、Blog、Forum、Mall 结果,并接入 hot-keywords / suggestions 展示搜索热词和建议;搜索输入框与搜索按钮采用移动端统一并排布局,按钮按文本宽度自适应;统一搜索不可用时展示可重试错误,不再用本地分模块列表拼接搜索结果
  • 需要主分支补齐的后端/API 事项:本轮无新增阻塞缺口;统一搜索接口已由主分支提供,App 结果展示以统一接口返回的 typeidurl、标题、摘要、来源和时间字段为准
  • 后续可优化点:后续可补搜索历史、服务端高亮、纠错词库、拼音搜索和跨端搜索埋点

论坛入口页

App 论坛入口页真实首屏截图App 论坛入口页无遮挡长图
  • 路由路径pages/community/index / H5 #/pages/community/index
  • 当前完成状态:页面可见定位已收口为“论坛”,不再占用底部主 Tab;Forum 从首页、全部功能页、搜索和内容推荐流进入,页面内通用底部导航按首页域高亮;当前只展示 Forum 主题流、热门和精华频道,博客独立进入 blog/index,不再混入论坛频道;搜索输入框与搜索按钮采用移动端统一并排布局,按钮按文本宽度自适应;热门和精华分页读取 Forum 公开主题,按近期热度或互动计数排序,并展示置顶 / 精华标识
  • 需要主分支补齐的后端/API 事项:如后续重新建设完整“社区”能力,需要主分支先定义关注关系、动态流、跨模块推荐和服务端热榜接口;当前 App 不再把这些未定义能力伪装成社区页
  • 后续可优化点:后续可补论坛板块推荐、服务端热榜规则、互动状态和频道内筛选

商城页

App 商城页真实首屏截图App 商城页无遮挡长图
  • 路由路径pages/mall/index / H5 #/pages/mall/index
  • 当前完成状态:已作为底部商城 Tab,接入交易主视觉、服务保障条、购物车 / 订单 / 地址 / 售后入口、多级商品分类、关键词搜索、综合 / 销量 / 价格排序和商品列表;分类胶囊按层级路径展示,选择父级分类时会展示该父级及全部子级商品;商城搜索输入框与搜索按钮采用移动端统一并排布局,按钮按文本宽度自适应,搜索清空入口收进输入框右侧图标,不再占用第二行;购物车、地址、订单、支付、评价和售后从商城链路进入;交易阶段入口图标跟随 App 主题 token,避免跨主题时保留旧固定色
  • 需要主分支补齐的后端/API 事项:商品分类、列表、详情、商品收藏、购物车、地址、下单、订单列表 / 详情、支付发起、取消订单、商品评价和售后申请已由主分支补齐
  • 后续可优化点:后续可接入 SKU、运营排序、真实库存状态和商品浏览历史

聊天页

App 消息聚合页真实首屏截图App 消息聚合页无遮挡长图
  • 路由路径pages/chat/index / H5 #/pages/chat/index
  • 当前完成状态:已作为底部“聊天”Tab,入口聚焦会话、通讯录、公开聊天室和创建群聊;Tab 角标只展示会话未读数,通知未读不再挤占聊天入口。真实聊天体验继续收敛在 chat,主包 pages/chat/index 只负责 Tab 入口、旧链接兼容和聊天功能导航。进入聊天域后,H5 自定义底部导航切换为“首页 / 聊天 / 通讯录 / 消息 / 我的”,其中“通讯录”承载好友列表、好友申请、资料卡、拉黑 / 屏蔽和从好友发起私聊,“消息”回到通知中心;聊天域辅助入口、房间推荐、隐私 / 好友申请提示和失败气泡颜色跟随 App 主题 token。
  • 需要主分支补齐的后端/API 事项:继续复用 Conversation contract;后续补附件权限细化、会话置顶 / 免打扰和更多实时投递细节。
  • 后续可优化点:后续可把入口页升级为最近会话列表首屏,减少二次点击。

消息聚合页

  • 路由路径pages/messages/index / H5 #/pages/messages/index
  • 当前完成状态:消息页已作为底部“消息”Tab,定位为通知中心;页面只聚合通知、交易提醒、互动和系统二级频道,不展示聊天入口、会话未读或聊天技术状态。用户需要私聊、群聊、通讯录或公开房间时进入底部“聊天”Tab 或业务页的聊天入口;页面顶部展示 App 通知同步状态,登录后自动同步通知事件,收到通知会静默刷新收件箱,断线时展示限速恢复次数和下一次重试时间,登录态失效时切换为重新登录提示;消息快捷区保留“通知偏好”入口,可直达 #/pages/settings/index?section=notifications 管理接收渠道和业务类型;交易动作图标跟随 App 主题 token
  • 需要主分支补齐的后端/API 事项:互动提醒专用流、交易通知订阅和服务端分类筛选仍需主分支补齐;当前通知、交易提醒和系统消息复用 Notification inbox,实时事件不可用时回退接口刷新;私聊 / 群聊能力独立放在聊天页继续使用 Conversation contract
  • 后续可优化点:后续可补交易通知订阅、服务端分类筛选、推送到达状态和通知 action schema

全部功能页

App 全部功能页截图
  • 路由路径pages/apps/index / H5 #/pages/apps/index
  • 当前完成状态:已从原“应用”主 Tab 调整为全部功能页,收纳博客、论坛、商城、消息、聊天、个人中心和设置等入口;“服务支持”进入普通用户客服聊天并预填咨询草稿,App 用户界面不承担安装向导、部署控制台或 Install 执行能力
  • 需要主分支补齐的后端/API 事项:本轮无新增缺口;继续复用认证、通知摘要、CMS 公告列表和 Blog 文章列表接口
  • 后续可优化点:后续可按常用、博客、论坛、交易和账号服务分组

AI 服务台页

  • 路由路径ai/index / H5 #/ai/index
  • 当前完成状态:已接入登录态 AI 服务台,支持查看模型目录、生成 / 轮换 / 停用接入密钥、复制 OpenAI / Claude Code / Codex 接入地址、启用第三方服务方模型、保存账号或项目预算、查看调用用量;模型服务方优先展示名称或服务方编码,不直接把内部商户编号或项目标识的直译字段口径展示给移动端用户
  • 需要主分支补齐的后端/API 事项:本轮无新增缺口;继续复用 AI 模型、模型市场、预算策略、接入密钥和调用用量接口
  • 后续可优化点:后续可补模型筛选、密钥权限模板和用量趋势图

知识助手页

App 知识助手页截图
  • 路由路径pages/knowledge/index / H5 #/pages/knowledge/index
  • 当前完成状态:已接入登录态 Knowledge 问答,支持推荐问题、生成回答开关、返回上下文开关、回答模式和相关度展示;移动端长回答默认折叠为可读卡片,避免检索上下文和长摘要直接撑满整页,用户可按需展开完整回答
  • 需要主分支补齐的后端/API 事项:本轮无新增缺口;继续复用 Knowledge ask contract,业务成功以 Result.code=200 为准
  • 后续可优化点:后续可补来源详情抽屉、答案引用跳转和会话历史入口

文章列表页

App 博客页真实首屏截图App 博客页无遮挡长图
  • 路由路径blog/index / H5 #/blog/index
  • 当前完成状态:已作为独立博客 / 文章阅读页,完成 Blog 文章只读列表、关键词搜索、分类 / 标签筛选、分类 / 标签专页入口、刷新、加载更多和详情跳转;页面职责与论坛拆开,底部不再高亮论坛 Tab,首页和全部功能页均有独立博客入口;搜索输入框与搜索按钮采用移动端统一并排布局,按钮按文本宽度自适应
  • 需要主分支补齐的后端/API 事项:本轮无新增缺口;继续复用 Blog 首页聚合、文章分页、分类和标签接口
  • 后续可优化点:后续可补分享入口和更多排序方式

文章分类 / 标签页

  • 路由路径blog/taxonomy / H5 #/blog/taxonomy?type=category&code=:code#/blog/taxonomy?type=tag&code=:code
  • 当前完成状态:已接入 Blog 分类 / 标签详情和分组文章分页;页面展示分组名称、文章数、描述、文章列表、刷新、加载更多、真实空态和错误重试,从文章首页分类 / 标签筛选可进入专页
  • 需要主分支补齐的后端/API 事项:本轮无新增缺口;使用 GET /api/v1/blog/categories/{code}GET /api/v1/blog/categories/{code}/articlesGET /api/v1/blog/tags/{code}GET /api/v1/blog/tags/{code}/articles
  • 后续可优化点:后续可补分享、订阅和跨端 SEO 深链

文章详情页

App 文章详情页截图
  • 路由路径blog/detail / H5 #/blog/detail?id=:id
  • 当前完成状态:已接入 Blog 文章详情、评论列表、评论提交、当前用户评论编辑 / 删除、点赞 / 取消点赞、收藏 / 取消收藏、相关推荐和作者主页跳转;评论提交后本地追加评论并更新计数,互动成功后刷新文章统计并保留本页操作态;分类胶囊和标签会按文章返回的 code 进入分类 / 标签专页
  • 需要主分支补齐的后端/API 事项:本轮无新增阻塞缺口;使用 GET /api/v1/blog/articles/{id}GET/POST /api/v1/blog/articles/{id}/commentsPUT/DELETE /api/v1/blog/comments/{id}GET /api/v1/blog/articles/{id}/relatedPOST/DELETE /api/v1/blog/articles/{id}/likesPOST/DELETE /api/v1/blog/articles/{id}/favorites
  • 后续可优化点:后续可补富文本渲染、分享和评论分页加载更多

文章发布页

  • 路由路径blog/publish / H5 #/blog/publish?id=:id
  • 当前完成状态:已接入 Blog 用户侧创建 / 编辑文章接口,支持封面上传、保存草稿、提交发布和编辑已有文章;分类与标签会读取 GET /api/v1/blog/categoriesGET /api/v1/blog/tags 展示可选项,发布时提交 categoryCodecategoryNametagCodestagNames,接口失败或暂无选项时仍保留手动输入分类 / 自定义标签的兜底路径
  • 需要主分支补齐的后端/API 事项:本轮无新增阻塞缺口;使用 POST /api/v1/blog/articlesPUT /api/v1/blog/articles/{id}GET /api/v1/blog/me/articles/{id}GET /api/v1/blog/categoriesGET /api/v1/blog/tags
  • 后续可优化点:后续可补 Markdown / 富文本编辑器、正文图片上传、自动草稿、本地离线草稿和发布后分享

论坛主题列表页

App 论坛主题列表页截图
  • 路由路径forum/index / H5 #/forum/index
  • 当前完成状态:已完成 Forum 板块切换、主题只读列表、关键词搜索、刷新、加载更多、置顶 / 精华标识;Forum 作为首页、全部功能页、搜索和推荐流中的内容业务入口,不再占用底部主 Tab;搜索输入框与搜索按钮采用移动端统一并排布局,按钮按文本宽度自适应
  • 需要主分支补齐的后端/API 事项:本轮无新增缺口;继续复用 Forum 板块与主题分页接口
  • 后续可优化点:后续可补发帖入口、板块规则、收藏 / 点赞和举报入口

论坛主题详情页

App 论坛主题详情页截图
  • 路由路径forum/detail / H5 #/forum/detail?id=:id
  • 当前完成状态:已接入 Forum 主题详情、回复列表、回帖、主题点赞 / 取消点赞、主题收藏 / 取消收藏、主题举报、回复点赞 / 取消点赞和回复举报,回帖成功后本地插入返回回复并更新回复计数
  • 需要主分支补齐的后端/API 事项:本轮无新增阻塞缺口;使用 GET /api/v1/forum/topics/{id}GET/POST /api/v1/forum/topics/{id}/repliesPOST/DELETE /api/v1/forum/topics/{id}/likesPOST/DELETE /api/v1/forum/topics/{id}/favoritesPOST /api/v1/forum/topics/{id}/reportsPOST/DELETE /api/v1/forum/replies/{id}/likesPOST /api/v1/forum/replies/{id}/reports
  • 后续可优化点:后续可补楼中楼、富文本渲染、举报原因选择、内容审核状态和后端返回的当前用户互动初始态

论坛发主题页

App 论坛发主题页截图
  • 路由路径forum/publish / H5 #/forum/publish?boardId=:id
  • 当前完成状态:已接入 Forum 发帖接口,进入页面会读取板块列表并要求选择板块,提交成功后跳转新主题详情
  • 需要主分支补齐的后端/API 事项:本轮无新增阻塞缺口;使用 GET /api/v1/forum/boardsPOST /api/v1/forum/topics,提交 boardIdtitlesummarycontent
  • 后续可优化点:后续可补版规提示、草稿保存、图片上传、敏感词提示和发布成功后的分享

商城商品列表页

App 商城商品列表页真实首屏截图App 商城商品列表页无遮挡长图
  • 路由路径pages/mall/index / H5 #/pages/mall/index
  • 当前完成状态:见“商城页”,该路由现在是底部商城 Tab 主入口,并已接入 Mall 第一阶段商品浏览接口
  • 需要主分支补齐的后端/API 事项:商品分类、列表和详情只读接口已由主分支补齐;当前仍保留 Mall 模块未启用或接口异常时的本地预览降级
  • 后续可优化点:后续可接入 SKU、收藏状态、运营排序、真实库存状态和商品浏览历史

商城商品详情页

App 商城商品详情页截图
  • 路由路径mall/detail / H5 #/mall/detail?id=:id
  • 当前完成状态:已接入 Mall 商品详情、价格、库存、销量、分类、图片字段、商品收藏 / 取消收藏、加入购物车、公开评价列表、评价图片预览和评价提交表单;从可评价订单详情进入时会带上 orderIdorderItemId,可上传评价图片并随 imageUrls 提交
  • 需要主分支补齐的后端/API 事项GET /api/v1/mall/products/{id}POST/DELETE /api/v1/mall/products/{id}/favoritesPOST /api/v1/mall/cart/itemsGET /api/v1/mall/products/{id}/reviewsPOST /api/v1/mall/reviews 已由主分支补齐;当前 App 复用当前用户文件上传接口保存评价图片 URL
  • 后续可优化点:后续可补富文本详情、规格选择、图片轮播、初始收藏状态字段、追评、商家回复和登录态引导

购物车页

App 购物车页截图
  • 路由路径mall/cart / H5 #/mall/cart
  • 当前完成状态:已接入购物车读取、选中同步、全选、数量增减、删除和所选商品结算跳转,价格优先使用后端 unitPrice;商品行已展示 skuNamespecJson 解析后的规格标签和 priceLockedAt 锁价时间,底部商城 Tab 会随购物车数量显示角标
  • 需要主分支补齐的后端/API 事项:本轮无新增阻塞缺口;使用 GET/PUT/DELETE /api/v1/mall/cart/items,接口不可用时展示本地预览
  • 后续可优化点:后续可补库存不足提示、优惠计算、跨端购物车数量推送和购物车失效商品分组

确认订单页

App 确认订单页截图
  • 路由路径mall/checkout / H5 #/mall/checkout?cartItemIds=:ids
  • 当前完成状态:已按所选购物车项加载结算商品,读取地址簿并优先选择默认收货地址,支持在确认订单页内切换候选地址;商品行展示 SKU、规格、锁价时间和虚拟交付说明;订单预览会同步商品金额、运费、优惠和应付金额,优惠券区展示可用 / 不可用券及不可用原因,地址 / 优惠券选择态和下单前检查警告态跟随 App 主题 token;下单前检查区提示收货地址、购物车商品、库存、订单确认、优惠、支付和发票边界;提交当前选中 addressIdcartItemIdscouponCoderemarkidempotencyKey 后进入支付入口;结算读取或下单失败时会保留页面内“下单异常处理”面板,提供重新校验结算、返回购物车调整和订单客服入口,不在本端造单
  • 需要主分支补齐的后端/API 事项:本轮无新增阻塞缺口;使用 POST /api/v1/mall/orders/previewPOST /api/v1/mall/orders/couponsPOST /api/v1/mall/orders,最终库存、优惠和金额仍以后端预览 / 下单校验为准
  • 后续可优化点:后续可补运费模板说明、支付方式预选、地址编辑弹层和服务端统一失败码映射

收货地址页

App 收货地址页截图
  • 路由路径mall/addresses / H5 #/mall/addresses
  • 当前完成状态:已接入地址列表、新增、删除和设为默认,提交字段对齐后端 recipientName/mobile/detail/defaultAddress
  • 需要主分支补齐的后端/API 事项:本轮无新增阻塞缺口;使用 GET/POST/DELETE /api/v1/mall/addressesPUT /api/v1/mall/addresses/{id}/default,省市区拆分仍由后续交互增强
  • 后续可优化点:后续可补地区选择器、编辑地址、地址标签和手机号格式化

我的订单页

App 我的订单页截图
  • 路由路径mall/orders / H5 #/mall/orders
  • 当前完成状态:已接入订单列表、状态筛选、待支付操作入口和取消订单,订单状态筛选已覆盖后端数值 10/20/30/40/90;已支付 / 已发货 / 已完成订单卡片展示履约状态、物流摘要和发票状态,并保留物流、发票、售后快捷入口;订单卡片会按多包裹、物流更新、发票开具、售后 / 退款 / 退货进度和待评价生成交易提醒胶囊,点击可直达对应流程;已完成且存在未评价订单商品时会显示“评价”入口,直达商品详情评价表单;从售后详情等页面只拿到订单号时,会回到订单列表显示定位提示,不再把订单号误传给订单详情 ID 接口
  • 需要主分支补齐的后端/API 事项:订单列表、支付发起、取消订单、商品评价和售后申请已接入;独立物流轨迹、配送事件、发票申请 / 开票 / 下载 / 状态同步接口仍待主分支补齐;如需从售后、通知等场景通过订单号直达详情,建议主分支补齐当前用户订单号查询或详情接口
  • 后续可优化点:后续可补服务端评价状态聚合、多包裹详情列表、物流事件角标、订单卡片通知角标和交易通知订阅

订单详情页

App 订单详情页截图
  • 路由路径mall/order-detail / H5 #/mall/order-detail?id=:id
  • 当前完成状态:已接入订单详情、订单商品、收货地址字段、费用明细、待支付操作、支付同步、取消订单、确认收货、已发货 / 已完成商品评价入口、售后申请入口,并展示用户可理解的支付方式、支付状态、支付流水、回跳地址和支付时间;支付保障区可读取支付有效期、倒计时和失败原因,支付失败 / 关闭 / 超时时继续保留同步状态和去支付入口;履约与发票状态面板、GET /api/v1/mall/orders/{id}/timeline 交易进度时间线和物流 / 发票 / 交易通知服务入口已接入,时间线接口不可用时自动回退订单详情字段推导;详情页内取消、同步支付、确认收货、支付、物流、发票、评价和售后动作均要求真实订单 ID,不再用订单号兜底调用 {id} 接口
  • 需要主分支补齐的后端/API 事项:订单详情、订单交易时间线、支付发起、支付状态同步、取消订单、确认收货、评价提交和售后申请已接入;独立物流轨迹、配送事件、开票 / 下载 / 状态同步接口仍待主分支补齐;如需按订单号打开详情,建议主分支补当前用户维度订单号查询 / 详情接口
  • 后续可优化点:后续可补真实物流时间线、服务端统一失败码映射、已评价状态、客服入口、支付状态事件流和交易通知订阅

订单支付页

App 订单支付页截图
  • 路由路径mall/payment / H5 #/mall/payment?orderId=:id&amount=:amount
  • 当前完成状态:订单支付统一交给收银台处理。支付页携带订单号进入时会直接打开统一收银台,法币、余额和 Web3 代币等可用方式都在收银台中选择;收银台会展示可用支付资产、应付金额、定价金额、汇率和 quote 有效期,用户切换支付资产或报价过期后需要刷新报价,提交支付时携带 quoteNopayAssetCode。支付方式、支付资产选中态和余额 / 报价错误提示跟随 App 主题 token,避免跨主题时保留固定蓝 / 红状态色。旧入口只有内部数字订单 ID 时,页面会先引导用户进入订单详情确认订单号,再打开收银台。收银台或支付渠道回跳携带 sync=1paymentReturn=1 时,页面会自动同步订单支付状态;不适合持续连接的运行环境也可以在当前页手动同步。支付方式、收银台缺失和支付失败原因统一展示为待确认 / 待同步,不再向用户暴露接口返回式文案。页面保留订单详情、交易通知和订单客服入口,但不再展示 Mall 自己的支付方式列表,也不再直接调用 Mall {id}/pay 或发起钱包签名。
  • 需要主分支补齐的后端/API 事项:具体支付渠道配置、回调验签部署、收银台返回字段语义、支付有效期字段、失败原因码和生产支付回调仍需联调环境继续验证;如需只凭订单号同步状态,建议主分支补当前用户维度订单号查询 / 同步接口。
  • 后续可优化点:后续可补服务端统一失败码映射、轮询间隔配置、订单号定位接口、支付通知订阅和收银台内支付方式排序 / 开关配置。

支付结果回跳页

App 支付结果回跳页截图
  • 路由路径mall/payment-result / H5 #/mall/payment-result?orderId=:id&status=:status
  • 当前完成状态:新增移动端支付回跳承接页,可展示订单号、金额、支付方式、支付流水和回跳状态,并提供同步支付状态、订单详情和我的订单三个后续动作;页面会读取支付方式元数据,将回跳或同步结果中的内部支付 code 显示为用户可读支付名称;拿到真实数字订单 ID 时会在本页直接调用 POST /api/v1/mall/orders/{id}/payment/sync,回写支付流水、支付状态和订单金额;当回跳参数只提供 SO... 订单号或把订单号误放入 orderId 时,不再把业务单号传给订单详情 / 支付同步 {id} 路由,订单动作会降级到我的订单页定位
  • 需要主分支补齐的后端/API 事项:本轮不新增后端接口;最终支付状态仍依赖 POST /api/v1/mall/orders/{id}/payment/sync、真实支付回调和支付渠道回跳参数;如需通过支付回跳订单号直接同步或打开详情,建议主分支补当前用户维度订单号查询 / 同步接口
  • 后续可优化点:后续可按各支付渠道标准化回跳参数、补支付失败原因码映射、订单号定位接口和交易通知订阅

物流追踪页

App 物流追踪页截图
  • 路由路径mall/logistics / H5 #/mall/logistics?orderId=:id&orderNo=:orderNo
  • 当前完成状态:已从订单详情交易服务入口进入,优先读取 GET /api/v1/mall/orders/{id}/timeline 中的支付成功、发货、签收和退货物流节点,并结合 GET /api/v1/mall/orders/{id} 返回的履约状态、物流公司、运单号、发货时间和签收时间展示物流进度;页面可读取 packages / shipments / deliveryPackages / logisticsPackages 等多包裹字段,展示包裹名称、物流公司、运单号、最新节点和状态,并支持点击包裹复制对应运单号;状态映射与订单列表 / 详情共用同一套 Mall 字段归一化,缺少承运商轨迹或运单号时展示“物流信息 / 运单号待同步”的真实空态,不用本地预览数据伪装物流能力
  • 需要主分支补齐的后端/API 事项:订单时间线与订单详情字段已接入;独立承运商物流轨迹、配送事件、物流订阅和运单详情接口仍需主分支补齐;当前 App 不跨边界伪造后端能力
  • 后续可优化点:后续可补物流公司图标、地图轨迹、配送员联系、签收凭证、多包裹拆单详情和异常件提醒

订单发票页

App 订单发票页截图
  • 路由路径mall/invoice / H5 #/mall/invoice?orderId=:id&orderNo=:orderNo&amount=:amount
  • 当前完成状态:已从订单详情交易服务入口进入,优先展示订单详情返回的发票状态、发票类型、抬头、税号、邮箱、发票号、申请时间、开票时间和发票链接;状态映射与订单列表 / 详情共用同一套 Mall 字段归一化,发票申请表单已接入 POST /api/v1/mall/orders/{id}/invoice,支持个人抬头 / 企业抬头切换,企业抬头会要求税号,个人抬头不会提交税号字段;接收邮箱为可选字段,填写时会在 App 端先校验邮箱格式;已开票场景支持直接打开或复制发票链接,提交失败时展示真实错误,不在本端暂存发票申请
  • 需要主分支补齐的后端/API 事项:发票申请接口已由主分支补齐;开票、服务端下载 / 预览、作废 / 重开、状态同步、订单发票列表和发票通知仍需主分支 / 联调环境继续完善或验证
  • 后续可优化点:后续可补企业抬头历史、服务端下载预览状态、发票抬头默认偏好和开票通知

售后服务页

App 售后服务页截图
  • 路由路径mall/after-sales / H5 #/mall/after-sales?orderId=:id&orderItemId=:itemId
  • 当前完成状态:已接入 GET /api/v1/mall/me/after-salesGET /api/v1/mall/orders/{id}/after-sale-itemsPOST /api/v1/mall/orders/{id}/after-sales;列表支持“全部 / 待处理 / 已通过 / 已拒绝 / 已关闭”状态筛选,并在筛选时向后端传递 status=10/20/30/90;售后页顶部展示服务说明,明确从订单商品发起、处理中商品不可重复申请、虚拟商品保留交付查看状态、退货物流从详情提交;售后卡片展示售后类型、退款状态、退货状态、申请金额和订单号,并提供订单详情、售后通知和订单客服快捷入口;售后记录只有订单号但缺少真实订单 ID 时,订单入口会回到我的订单页定位原订单;从订单详情进入或只携带订单 ID 进入时,申请表单会展示可售后商品、SKU、数量、金额和“可申请 / 处理中”状态,选择商品后自动带入申请金额;普通用户侧不再手写 proofFileIds,凭证图片上传成功后由本端内部回填附件 ID 或凭证链接
  • 需要主分支补齐的后端/API 事项:售后申请、我的售后、订单售后商品、售后详情、退款 / 退货状态、退款流水、退货物流和凭证字段已由主分支补齐;当前 App 复用当前用户文件上传接口,不新增 Mall 专属上传接口
  • 后续可优化点:后续可补售后类型规则、凭证预览、申请金额校验提示、撤销售后、客服回复和售后进度推送

售后详情页

App 售后详情页截图
  • 路由路径mall/after-sales-detail / H5 #/mall/after-sales-detail?id=:id
  • 当前完成状态:已接入 GET /api/v1/mall/after-sales/{id},展示售后单号、类型、状态、申请金额、商品、退款状态、退货状态、退款流水、退货物流、处理备注、凭证和处理时间线;凭证链接支持数组、逗号和换行分隔展示,附件 ID 支持数组或分隔字符串;移动端补齐退款 / 退货服务操作区,支持复制退款流水、复制退货运单、回到订单详情和查看售后通知;退货物流表单已接入 POST /api/v1/mall/after-sales/{id}/return-logistics,提交失败时展示真实错误,不在本端暂存退货物流
  • 需要主分支补齐的后端/API 事项:售后详情接口、用户提交退货物流接口、退款 / 退货状态、退款流水、退货物流和凭证字段已由主分支补齐;当前 App 展示侧已适配 returnLogisticsCompanyreturnTrackingNoreturnLogisticsRemark
  • 后续可优化点:后续可补真实客服回复、退货物流轨迹、凭证预览、撤销申请、服务端退货物流状态同步和处理进度推送

登录页

App 登录页真实首屏截图App 登录页无遮挡长图
  • 路由路径pages/login/index / H5 #/pages/login/index
  • 当前完成状态:已完成账号密码、短信、邮箱、钱包和外部身份入口;登录页会读取 GET /api/v1/auth/capabilitiesloginMethods,按 enabledorder 和当前 uni-app 环境过滤展示登录方式,默认钱包和 Passkey 只在 H5 展示;外部身份入口读取 GET /api/v1/auth/identity/providers descriptor,支持 OAuth / 企业 OIDC 授权码、Telegram 登录组件、钱包签名、LDAP / AD 目录密码和企业 SSO 登录提示;外部身份缺少前端可用配置时展示“暂不可用 / 稍后重试”,不把“需配置 / 未配置”直接展示给普通用户;后端关闭注册总开关或全部注册方式时隐藏顶部注册快捷入口,并在账号服务区展示“注册暂未开放”
  • 需要主分支补齐的后端/API 事项:本轮无新增缺口;继续复用 Auth 登录、验证码、身份提供方、Auth capabilities 和站点信息接口
  • 后续可优化点:后续可按真实 provider 配置补充第三方品牌图标和风控验证码入口

登录授权回调页

App 登录授权回调页截图
  • 路由路径pages/login/oauth-callback / H5 #/pages/login/oauth-callback?provider=:provider
  • 当前完成状态:已完成授权回调参数校验、state 缓存读取、OAuth 登录态保存、成功态短暂停留、成功跳转和错误态提示;成功 / 失败状态色跟随 App 主题语义 token,避免跨主题时保留固定绿 / 红状态色
  • 需要主分支补齐的后端/API 事项:本轮无新增缺口;继续复用 Auth OAuth authorize / login 接口和本地 state 缓存
  • 后续可优化点:后续可补充 provider 品牌展示和错误码文案映射

注册页

App 注册页截图
  • 路由路径pages/login/register / H5 #/pages/login/register
  • 当前完成状态:已完成账号注册、手机号验证码注册和邮箱验证码注册三种模式;账号注册只需账号、密码和确认密码,验证码模式继续发送 scene=register 验证码;页面读取 GET /api/v1/auth/capabilitiesregister.password.enabledregisterMethodspasswordPolicy,按 enabledorder 和当前 uni-app 环境过滤展示注册方式,关闭时禁用表单,能力接口不可用时保留本地入口并以后端提交结果为准;密码策略错误态跟随 App 主题危险色 token,避免跨主题时保留固定红色;提交 POST /api/v1/auth/register 时同步带上 confirmPassword,成功后回到登录页并携带账号回填
  • 需要主分支补齐的后端/API 事项:本轮无新增缺口;已使用主分支注册接口和 Auth capabilities 接口
  • 后续可优化点:后续可补充协议勾选、更细密码强度条和注册后自动登录策略

找回密码页

App 找回密码页截图
  • 路由路径pages/login/password-reset / H5 #/pages/login/password-reset
  • 当前完成状态:已完成手机号 / 邮箱验证码找回密码表单,提交 POST /api/v1/auth/password/reset
  • 需要主分支补齐的后端/API 事项:本轮无新增缺口;已使用主分支密码重置接口
  • 后续可优化点:后续可补充密码强度、风险校验和重置成功后的安全提醒

聊天页

App 聊天页真实首屏截图App 聊天页无遮挡长图
  • 路由路径chat/index / H5 #/chat/index
  • 当前完成状态:聊天已作为底部“聊天”Tab,默认进入移动端常见“最近会话”页面,展示未读数、会话搜索、全部 / 私聊 / 群聊 / 房间筛选和通讯录入口。聊天首页、创建聊天、公开聊天室、通讯录、新的朋友、屏蔽管理、联系人资料和会话设置已统一迁入 uni-app subPackageschat 根目录,便于后续独立拆分聊天项目。会话搜索和类型筛选已调用 Conversation keyword / conversationType 查询,直聊标题优先使用后端 displayTitle。普通用户界面不再把连接、房间名、心跳、ACK、WebSocket 地址、内部用户 ID、会话 ID 或消息 ID 作为主视觉。公开聊天室采用“房间列表 -> 点击进入 -> 聊天窗口”,不让用户手填房间名;会话窗口重做为聊天软件习惯的顶部会话栏、成员摘要、左右气泡、头像、昵称、时间、发送中 / 失败 / 已送达 / 已读和底部输入栏,并消费后端消息 sender 快照展示真实昵称和头像,发送状态也会读取送达 / 已读计数生成用户可读摘要,文本消息携带的附件列表会展示文件名、类型和大小。右上角进入独立会话设置页,不再把置顶、免打扰和退出会话堆在消息流底部。好友 / 通讯录、好友申请、搜索添加、拉黑 / 屏蔽、从好友发起私聊和创建群聊 / 房间已拆为通讯录、新的朋友、创建聊天和屏蔽管理独立页面;创建群聊入口已改为从好友列表勾选成员并填写可选群名,创建公开房间只填写房间名称和简介,不再让普通用户手输内部用户 ID;已有 conversationId / targetUserId / memberUserIds 路由参数仅保留给业务页或后端返回的深链使用。会话详情继续支持服务端历史、发送消息、标记已读、消息撤回、当前用户删除消息、成员列表、置顶、免打扰和退出会话。
  • 需要主分支补齐的后端/API 事项:好友备注、在线状态、群聊设置、屏蔽消息、附件上传 / 访问权限细化、客服会话入口 schema、多实例实时投递细节和生产风控策略仍需主分支继续补齐;App 当前只做用户可读降级,不跨边界修改后端
  • 后续可优化点:后续可补联系人首字母索引、资料卡头像墙、好友申请通知联动、最近联系人 / 群成员搜索、附件上传、客服分配和更细的消息通知策略

创建聊天页

App 创建聊天页真实首屏截图App 创建聊天页无遮挡长图
  • 路由路径chat/create / H5 #/chat/create?mode=group|room
  • 当前完成状态:新增独立创建聊天页,将“创建群聊”和“创建公开房间”收敛到一个移动端入口;群聊从好友列表勾选成员并填写可选群名,创建后进入群聊窗口;公开房间只填写房间名称和简介,也可点选常用房间模板预填,不要求用户理解或输入内部 ID
  • 需要主分支补齐的后端/API 事项:群头像、最近联系人、群成员上限、房间封面、房间分类、房间公告和创建权限策略仍需主分支继续增强;当前 App 复用 Conversation 的群聊创建、公开房间创建和好友列表接口
  • 后续可优化点:后续可补最近联系人、多选搜索、群头像自动拼图、房间分类、房间封面和创建成功后的邀请分享

公开聊天室页

App 公开聊天室页真实首屏截图App 公开聊天室页无遮挡长图
  • 路由路径chat/rooms / H5 #/chat/rooms
  • 当前完成状态:新增公开聊天室列表页,从聊天首页“公共大厅”入口进入;登录后调用 GET /api/v1/conversations/rooms 展示公开房间,支持关键词搜索、刷新、加载更多、加入房间和创建公开房间;点击房间会先按需要调用 POST /api/v1/conversations/{id}/join,再进入 chat/index?conversationId=:id 复用会话历史、发送消息、未读和实时刷新能力;未登录时只展示登录引导,不伪造公开房间数据
  • 需要主分支补齐的后端/API 事项:公开聊天室分页、创建和加入接口已由 Conversation 提供;房间在线人数、房间分类、公告、封面运营位、成员预览和服务端推荐排序仍可由主分支继续增强
  • 后续可优化点:后续可补房间分类、热门 / 最近活跃排序、房间资料页、成员预览和二维码 / 邀请码入口

通讯录页

App 通讯录页真实首屏截图App 通讯录页无遮挡长图
  • 路由路径chat/contacts / H5 #/chat/contacts
  • 当前完成状态:新增通讯录独立页面,从聊天首页“通讯录 / 发起私聊 / 创建群聊”入口进入;页面按移动端通讯录习惯收拢公开用户搜索、新的朋友、公开大厅、创建群聊和屏蔽管理入口,登录态不足时给登录引导;已接入主分支 GET /api/v1/iam/contactsGET /api/v1/iam/contacts/searchPOST /api/v1/iam/contacts/{id}/conversation 展示好友列表、公开用户资料、关系摘要和从联系人发起私聊,搜索提交后结果列表紧邻搜索区域下方展示,避免用户误以为搜索无响应。登录后可从好友或搜索结果进入资料卡、申请好友、通过收到的申请、拉黑 / 解除拉黑或发起私聊。mode=group 时通讯录切换为创建群聊选人态,可从好友列表勾选成员、填写可选群名并调用 Conversation 群聊接口,不暴露内部用户 ID 或调试字段
  • 需要主分支补齐的后端/API 事项:好友备注、在线状态、免打扰联系人、陌生人消息策略、联系人首字母索引、群成员搜索和群设置仍需主分支补齐
  • 后续可优化点:后续可补首字母索引、资料卡头像墙、最近联系人、二维码添加和通讯录权限提示

创建群聊选人页

App 创建群聊选人页真实首屏截图App 创建群聊选人页无遮挡长图
  • 路由路径chat/contacts?mode=group / H5 #/chat/contacts?mode=group
  • 当前完成状态:新增通讯录群聊选人状态,从聊天首页“创建群聊”入口进入;登录后展示群聊名称输入、已选好友、好友列表筛选和创建按钮,点击好友可选中 / 取消,创建成功后直接进入群聊会话窗口;未登录或好友列表不可用时展示清晰引导,不要求普通用户输入内部用户 ID
  • 需要主分支补齐的后端/API 事项:群成员搜索、最近联系人、群头像、群资料、群公告、群成员管理权限和群设置仍需主分支继续增强
  • 后续可优化点:后续可补首字母索引、多选搜索、最近联系人、群头像自动拼图和群成员上限提示

联系人资料卡页

App 联系人资料卡页真实首屏截图App 联系人资料卡页无遮挡长图
  • 路由路径chat/profile?userId=:id / H5 #/chat/profile?userId=:id
  • 当前完成状态:新增联系人资料卡页面,从通讯录好友、公开搜索结果、好友申请和屏蔽列表进入;页面展示公开头像、昵称、用户名、简介、语言、时区和当前关系,降低头像昵称仿冒带来的识别风险;登录后可直接发起私聊、申请好友 / 通过申请、关注 / 取消关注、拉黑 / 解除拉黑,并提供回到新的朋友和屏蔽管理的入口
  • 需要主分支补齐的后端/API 事项:更完整的资料卡展示字段、备注、在线状态、共同群聊、二维码名片、资料卡访问风控和隐私展示策略仍需主分支补齐
  • 后续可优化点:后续可补头像墙、共同关注 / 共同群聊、资料编辑隐私开关、举报入口和业务身份标签

会话设置页

App 会话设置页真实首屏截图App 会话设置页无遮挡长图
  • 路由路径chat/settings?conversationId=:id / H5 #/chat/settings?conversationId=:id
  • 当前完成状态:新增独立会话设置页面,从聊天窗口右上角“设置”进入;页面展示会话标题、类型、成员摘要、置顶、免打扰、成员列表、联系人 / 公开房间回流和退出会话。设置保存调用 Conversation settings 接口,退出会话和群主移除成员使用已有受控接口,登录态不足或接口不可用时展示可读降级
  • 需要主分支补齐的后端/API 事项:群头像、群公告、群资料编辑、群成员搜索、群成员管理权限细化、群转让、禁言和设置审计仍需主分支补齐
  • 后续可优化点:后续可补群资料编辑、成员搜索、群二维码、聊天文件入口和消息查找

新的朋友页

App 新的朋友页真实首屏截图App 新的朋友页无遮挡长图
  • 路由路径chat/requests / H5 #/chat/requests
  • 当前完成状态:新增好友申请独立页面,提供收到的 / 发出的 / 已处理分组、登录引导、空态、通讯录和公开大厅回流入口;已接入主分支 GET /api/v1/iam/users/me/friend-requests/receivedGET /api/v1/iam/users/me/friend-requests/sent 和好友申请通过 / 拒绝 API,收到的申请可直接处理,发出的申请可查看
  • 需要主分支补齐的后端/API 事项:好友申请已处理记录、申请结果通知和未读角标联动仍需主分支补齐
  • 后续可优化点:后续可补申请留言、来源标签、共同群聊、黑名单拦截和申请频率限制提示

屏蔽管理页

App 屏蔽管理页真实首屏截图App 屏蔽管理页无遮挡长图
  • 路由路径chat/privacy / H5 #/chat/privacy
  • 当前完成状态:新增屏蔽管理独立页面,从聊天首页“屏蔽管理”和通讯录入口进入;页面按已拉黑、免打扰、陌生人消息分组展示隐私入口,已接入主分支 GET /api/v1/iam/users/me/blocked-users 和解除拉黑 API,避免把隐私能力散落在调试式聊天页面里
  • 需要主分支补齐的后端/API 事项:屏蔽消息、免打扰联系人、陌生人消息策略、隐私变更审计和通知联动仍需主分支补齐
  • 后续可优化点:后续可补资料卡内一键拉黑、会话内免打扰开关、隐私策略说明和风险操作二次确认

通知列表页

App 通知列表页真实首屏截图App 通知列表页无遮挡长图
  • 路由路径pages/notifications/index / H5 #/pages/notifications/index
  • 当前完成状态:已完成站内信分页、未读数、批量已读 / 未读、全部已读、删除 / 批量删除、语言切换,并作为底部“消息”Tab 内的通知子页面高亮消息 Tab;登录状态下监听 App 消息同步事件,收到新通知后静默刷新当前列表和未读角标;支持 type=mall 等路由参数进入交易、互动、系统分类筛选,订单详情的“交易通知”可直接落到交易通知视图;交易类通知会解析 attributes / variables 中的订单、支付、物流、发票和售后字段,并展示“查看物流 / 查看售后 / 继续支付”等交易动作;动作跳转仅把纯数字实体 ID 用于详情、支付、物流和发票路由,SO... 订单号会降级到订单列表定位,AS... 售后号会降级到售后列表,避免业务单号被当成后端 Long ID;交易和开放平台动作图标跟随 App 主题 token
  • 需要主分支补齐的后端/API 事项:通知交易动作建议由主分支补稳定 action schema,明确 actionTyperoutebusinessModulebusinessTypebusinessIdorderIdorderNoafterSaleIdafterSaleNo、WebSocket 事件类型和展示文案;当前继续复用 Notification inbox 相关接口并做前端 ID 保护
  • 后续可优化点:后续可补服务端通知分类查询、搜索、推送状态展示、交易通知订阅、订单号 / 售后号服务端定位和稳定业务跳转字段约定

通知详情页

App 通知详情页截图
  • 路由路径pages/notifications/detail / H5 #/pages/notifications/detail?id=:id
  • 当前完成状态:已完成站内信详情、附件列表、自动标记已读、已读 / 未读状态切换和当前用户删除入口;Mall 交易通知详情会解析内部路由、订单 ID、售后 ID 和业务字段,优先跳转物流、发票、支付、订单详情或售后详情;当通知只提供 SO... 订单号或 AS... 售后号时,不再直接进入 Long ID 详情路由,而是进入订单定位列表或售后列表降级;详情动作图标跟随 App 主题 token
  • 需要主分支补齐的后端/API 事项:通知详情建议补稳定 action schema 和订单号 / 售后号定位接口;当前继续复用 Notification inbox 详情、附件和读状态接口
  • 后续可优化点:后续可补充附件预览、富文本内容、服务端统一消息 action schema 和更细的交易通知订阅配置

个人中心

App 个人中心真实首屏截图App 个人中心无遮挡长图
  • 路由路径pages/profile/index / H5 #/pages/profile/index
  • 当前完成状态:已完成 V0.7 个人资料、工作空间、用户摘要卡,并按国内 App 个人中心习惯调整为资产条、宫格服务入口和偏好设置列表;账号服务宫格集中订单、地址、售后、我的内容、收藏、评价、通知、会员和 Web3 钱包;偏好区提供语言选择器、主题色换肤入口和完整设置入口,语言切换改为读取站点信息接口 supportedLocales 的多语言选择弹窗,不再单击中英文来回切换;摘要优先显示当前用户头像,资料摘要使用当前用户自助 profile 接口;编辑入口状态色跟随 App 主题 token
  • 需要主分支补齐的后端/API 事项:会员中心、Web3 钱包资产、交易记录和绑定状态接口待主分支补齐;当前 Web3 钱包入口已进入独立钱包中心页,资料读取使用 GET /api/v1/iam/users/me/profile,头像上传使用 POST /api/v1/iam/users/me/avatar
  • 后续可优化点:后续可接入绑定变更、会员权益、钱包资产和偏好保存等更完整的账户能力

Web3 钱包页

App Web3 钱包页截图
  • 路由路径wallet/index / H5 #/wallet/index
  • 当前完成状态:已新增个人中心 Web3 钱包页,展示钱包环境、连接地址、链 ID、登录状态、签名消息登录流程和资产 / 交易 / 绑定入口;钱包环境会优先识别 TokenPocket、OKX、imToken 等真实钱包,再用 MetaMask 兼容标识兜底;未知链会展示为自定义 EVM 链,钱包可读取到 web3_clientVersion 且包含 Besu 时展示为 Besu 私有链;签名前会检查当前钱包地址与签名消息地址一致;钱包登录成功后会保存本端绑定快照,刷新后仍可在钱包中心恢复绑定状态
  • 需要主分支补齐的后端/API 事项:已复用 POST /api/v1/auth/wallet/challengePOST /api/v1/auth/wallet/login;钱包资产、交易记录、账号钱包绑定状态、绑定 / 解绑、主钱包设置和绑定审计接口仍需主分支补齐,当前 App 使用本地持久化降级
  • 后续可优化点:后续可补 WalletConnect / App 原生钱包、资产实时读取、交易明细、服务端绑定 / 解绑和风险提示

钱包资产页

App 钱包资产页截图
  • 路由路径wallet/assets / H5 #/wallet/assets
  • 当前完成状态:已展示总资产主卡、Token 资产、NFT 预览、资产服务入口和复制地址;若当前浏览器未连接钱包,会优先读取本端已保存的主钱包绑定快照,保持刷新后的资产页可识别绑定状态
  • 需要主分支补齐的后端/API 事项:真实余额、Token / NFT 资产、估值、绑定钱包列表、跨链资产聚合和风险标记接口仍需主分支补齐;当前 App 使用本地绑定快照和预览资产降级
  • 后续可优化点:后续可补资产刷新、链切换、资产隐藏、区块浏览器链接和服务端估值

钱包交易记录页

App 钱包交易记录页截图
  • 路由路径wallet/transactions / H5 #/wallet/transactions
  • 当前完成状态:已展示月度收入 / 支出 / 待确认摘要、全部 / 支出 / 收入 / 确认中筛选、交易哈希复制和会员权益凭证预览
  • 需要主分支补齐的后端/API 事项:真实链上交易、Web3 支付流水、转账、状态同步、区块浏览器链接和失败重试接口仍需主分支补齐;当前 App 使用本地交易预览降级
  • 后续可优化点:后续可补链上确认数、交易详情、失败原因、支付订单关联和交易通知订阅

钱包绑定页

App 钱包绑定页截图
  • 路由路径wallet/binding / H5 #/wallet/binding
  • 当前完成状态:已展示登录账号、连接钱包、签名绑定三步流程;登录后可读取本端绑定快照、绑定当前钱包、复制地址和移除本端绑定,刷新后仍保留主钱包状态
  • 需要主分支补齐的后端/API 事项:真实账号钱包绑定状态、绑定 / 解绑、主钱包设置、签名绑定挑战、绑定审计和风险校验接口仍需主分支补齐;当前 App 仅做本端持久化降级,不跨边界修改后端
  • 后续可优化点:后续可补多钱包列表、主钱包切换、解绑二次确认、风险提示和绑定操作审计

个人资料编辑页

App 个人资料编辑页截图
  • 路由路径pages/profile/edit / H5 #/pages/profile/edit
  • 当前完成状态:已新增当前用户资料编辑表单,可上传头像并保存真实姓名、性别、生日、语言、时区和简介,未登录时引导登录;资料说明卡片跟随 App 主题 token,不再保留旧固定绿色提示
  • 需要主分支补齐的后端/API 事项:本轮无新增阻塞缺口;使用 GET/PUT /api/v1/iam/users/me/profile 保存昵称和扩展资料,使用 PUT /api/v1/iam/users/me/username 修改用户名并受后端限额策略约束,使用 POST /api/v1/iam/users/me/avatar 上传头像;账号绑定变更仍通过后续账户能力补齐
  • 后续可优化点:后续可补生日日期选择器、资料完成度、头像裁剪和更多隐私字段

我的评价页

App 我的评价页截图
  • 路由路径pages/profile/reviews / H5 #/pages/profile/reviews
  • 当前完成状态:已接入 GET /api/v1/mall/me/reviews 展示当前用户商品评价、评分、评价图片、审核状态和时间,真实评价可跳转商品详情
  • 需要主分支补齐的后端/API 事项:商品评价列表和评价图片 URL 字段已由主分支补齐;追评、商家回复和更细审核状态仍待后续扩展
  • 后续可优化点:后续可补按状态筛选、追评、商家回复、订单来源展示和评价图片管理

设置页

App 设置页截图
  • 路由路径pages/settings/index / H5 #/pages/settings/index
  • 当前完成状态:已完成语言切换、当前用户密码修改、通知偏好读取 / 保存、当前 token、Token 续期、登录会话、按设备退出和退出登录;语言列表优先来自站点信息接口 supportedLocales,默认支持简体中文、繁体中文和 English;支持 section=notifications 深链滚动并高亮通知偏好区域,方便从消息页直接进入偏好管理;主题选项和通知开关未选中态使用 App 表面 / 边框 token,避免跨主题时保留固定灰边框
  • 需要主分支补齐的后端/API 事项:当前用户用户名修改接口已补齐为 PUT /api/v1/iam/users/me/username,默认 365 天内最多 3 次,并随 GET /api/v1/auth/capabilities 返回 usernameChangePolicy;资料编辑页已接入该能力。其余继续复用 PUT /api/v1/iam/users/me/password、Auth token / sessions 与 Notification preferences 相关接口
  • 后续可优化点:后续可接入账号绑定变更和设备详情

工程与接入说明

用户端多端应用源码放在:

text
views/app

当前第一阶段采用 uni-app + Vue3,已提供 H5 构建和以下 App 页面:

页面说明
pages/home/index内容首页、站点品牌、CMS 轮播图、首页导航、平台公告和图标 + 文字底部 TabBar
pages/apps/index应用页,承接原首页工作台,包含通知摘要、CMS 公告预览、Blog 文章预览和快捷入口
pages/login/index账号密码、短信、邮箱、Web3 钱包和外部身份登录入口
pages/login/oauth-callback第三方登录授权回调、state 恢复、登录态保存和错误态提示
pages/login/register账号密码简单注册、手机号 / 邮箱验证码注册和密码策略提示
pages/login/password-reset手机号 / 邮箱验证码找回密码
blog/indexBlog 文章只读列表、关键词搜索、分类 / 标签筛选和加载更多
blog/taxonomyBlog 分类 / 标签详情、分组文章分页、真实空态和错误提示
blog/detailBlog 文章详情展示、分类标签专页跳转、作者、相关推荐、互动计数、评论列表、评论提交 / 编辑 / 删除、点赞和收藏
cms/index内容中心,聚合轮播图、公告、导航、专题、内容块和广告位
cms/detailCMS 内容详情,承接公告、页面、内容块、专题、轮播和导航详情预览
forum/indexForum 板块与主题只读列表、关键词搜索和加载更多
forum/detailForum 主题详情、互动计数和回复只读列表
pages/mall/indexMall 商品分类、商品列表、关键词搜索、排序筛选和接口不可用降级
mall/detailMall 商品详情、库存 / 销量展示、商品收藏、评价图片、已发货 / 已完成订单商品评价提交和加购操作
mall/payment-result支付回跳结果展示、支付状态同步入口、订单详情和订单列表后续动作
mall/logistics订单物流追踪、订单时间线物流节点、订单详情物流字段读取、运单号复制和物流接口缺口降级
mall/invoice订单发票信息展示、发票申请、发票链接打开 / 复制和失败错误提示
mall/after-sales-detail售后详情、退款 / 退货服务、退货物流真实提交和失败错误提示
pages/messages/index通知中心、通知 / 交易 / 互动 / 系统频道、通知未读角标和消息同步状态
pages/notifications/index站内信分页、未读数、批量已读 / 未读、批量删除、交易通知动作、通知 Tab 角标和通知静默刷新
pages/notifications/detail通知详情、附件元数据、自动标记已读、读状态切换、当前用户删除和 Mall 交易跳转动作
chat/indexConversation 会话首页、会话搜索、全部 / 私聊 / 群聊 / 房间筛选、会话历史、发送消息、标记已读、消息撤回、成员列表、置顶 / 免打扰 / 退出会话、私聊 / 群聊 / 公开聊天室创建或加入和当前会话消息同步刷新
chat/create创建聊天入口,支持从好友勾选创建群聊和创建公开房间
chat/roomsConversation 公开聊天室分页、搜索、创建、加入和会话跳转
chat/contacts聊天通讯录、好友搜索入口、新的朋友、公开大厅、从好友发起私聊、创建群聊选人和屏蔽管理入口,能力不可用时展示可读降级
chat/contacts?mode=group创建群聊选人状态,从好友列表勾选成员、填写可选群名并进入群聊会话
chat/requests新的朋友、收到的 / 发出的 / 已处理申请分组、登录引导和好友申请流程降级
chat/privacy屏蔽管理、已拉黑、免打扰、陌生人消息分组和隐私策略降级
chat/profile联系人资料卡、公开资料、关系状态、私聊、好友申请、关注和拉黑 / 解除拉黑入口
chat/settings会话设置、成员列表、置顶、免打扰、退出会话和群主移除成员入口
pages/profile/index个人中心、当前用户 profile、当前工作空间、用户摘要卡和偏好入口
pages/profile/edit当前用户个人资料编辑,上传头像并提交真实姓名、性别、生日、语言、时区和简介
pages/profile/content我的内容聚合,展示当前用户文章、主题和回复;每组保留独立读取失败、刷新入口和真实空态
pages/profile/favorites我的收藏聚合,展示 Blog、Forum 和 Mall 收藏;每组保留独立读取失败、刷新入口和真实空态
pages/profile/reviews我的评价,展示 Mall 商品评价、审核状态、图片预览和真实读取失败 / 空态
wallet/indexWeb3 钱包中心、签名登录、钱包环境和本端绑定状态入口
wallet/assets钱包资产预览、本端绑定钱包恢复、Token / NFT 资产和资产服务入口
wallet/transactions钱包交易记录预览、交易类型筛选和哈希复制
wallet/binding账号钱包绑定流程、本端绑定持久化、复制地址和移除本端绑定
pages/settings/index设置、语言切换、当前用户密码修改、通知偏好、当前 token、Token 续期和当前登录会话

本地预览:

bash
cd views/app
pnpm install
pnpm dev:h5

app 开发环境默认监听 8850 端口,VITE_API_BASE_URL=/api,并通过 VITE_API_PROXY_TARGET=http://127.0.0.1:8000 代理后端 API。生产构建默认使用相对 H5 静态资源基础路径,Maven 仍复制到 public/app,部署时可以挂载到 /app/ 或其他子目录;需要固定路径时可通过 VITE_PUBLIC_PATH 覆盖。接口未返回站点 Logo 时,App 自带兜底 Logo 会由构建器解析为随包资源,避免依赖站点根路径 /static

登录页样例账号填充按钮由 VITE_ENABLE_SAMPLE_ACCOUNT 控制,只用于本地快速填表。项目没有固定默认测试账号;使用该按钮前应先通过注册、安装后的后台创建用户或外部身份登录准备对应账号。生产环境默认关闭,避免交付页面出现样例账号入口。

构建 H5:

bash
cd views/app
pnpm build:h5
pnpm check:relative-deploy
pnpm smoke:relative-deploy

也可以通过 Maven 构建模块执行:

bash
./mvnw -pl spring-open-views/spring-open-view-app package

pnpm check:relative-deploy 会检查 dist/build/h5,若已经通过 Maven 复制过,也会检查 public/app,确认入口资源引用是相对路径且没有写死 /app//assets//static/logo.pngpnpm smoke:relative-deploy 会启动临时本地 HTTP 服务,把 public/app 分别挂到 //app//nested/mobile/,请求入口及其 JS / CSS 资源,用于模拟 Nginx 任意目录部署。spring-open-view-app 会使用项目统一的 Node.js 24.16.0 基线,并通过 Maven 插件默认下载 pnpm 11.0.0;本机直接执行前端命令时 pnpm 只要求 >=11。构建会执行 pnpm install --frozen-lockfilepnpm build:h5,清理 public/app 后再把 H5 产物复制进去。public/app 是构建产物,不进入 Git。

Nginx 部署时把 public/app 内容作为站点目录即可。根路径部署可以使用 root /srv/www/spring-open-app;try_files $uri $uri/ /index.html;;挂到任意子目录时推荐把 public/app 内容复制到站点根目录下的目标子目录,例如 /srv/www/mobile/,并使用 root /srv/www; location /mobile/ { try_files $uri $uri/ /mobile/index.html; }。App H5 使用 hash 路由和相对静态资源路径,同一份产物可以放到不同站点目录。完整根目录 / 子目录静态站点示例见 views/app/deploy/nginx-relative.conf;独立镜像和 Compose 样例见 views/app/Dockerfileviews/app/deploy/nginx-container.conf.templateviews/app/deploy/docker-compose.app.yml,容器内支持 /api 代理、/api/ws WebSocket 升级和 /healthz 健康检查。/api 默认按同源网关转发;前后端分离时在构建前通过 VITE_API_BASE_URL 指向实际 API 前缀。

当前 app 已接入账号密码登录、短信验证码登录、邮箱验证码登录、账号密码简单注册、手机号 / 邮箱验证码注册、Auth capabilities 注册开关和密码策略、找回密码、动态外部身份入口、第三方登录授权回调、短信验证码 / 邮箱验证码发送与校验、验证码发送冷却倒计时、登录表单提交可用态、Web3 钱包登录 H5 入口、Web3 钱包中心页、钱包连接地址 / 链 ID 展示、签名前账户一致性校验、当前用户恢复、站内信收件箱分页、通知详情、附件元数据、未读数、聊天 Tab 会话未读角标、消息 Tab 通知未读角标、通知偏好读取 / 保存、通知静默刷新、标记已读、全部已读、当前用户 profile 读取 / 保存、昵称修改、用户名限额修改、当前用户头像上传、当前用户密保问题读取 / 替换保存、当前工作空间、当前 token、Token 续期、登录会话、我的内容 / 收藏 / 评价分组读取失败和真实空态、CMS 轮播图与公告只读预览、CMS 导航 / 轮播 extraJson 目标跳转、Blog 文章只读预览、文章列表与文章详情、分类 / 标签专页、Forum 板块 / 主题 / 回复浏览、发帖、回帖、主题点赞 / 收藏 / 举报、回复点赞 / 举报、我的主题 / 回复 / 收藏、Mall 商品分类、列表、搜索筛选、详情只读浏览、商品收藏、加入购物车、购物车选中 / 数量 / 删除、收货地址、下单、订单列表 / 详情、取消订单、支付发起、支付结果回跳本页同步、确认收货、物流、发票、售后申请 / 详情、退货物流降级提交、首页内容门户、统一搜索页、论坛入口页、聊天入口页、商城页、消息中心页、全部功能页、Conversation 会话列表 / 未读 / 历史 / 发送 / 撤回 / 设置 / 成员管理、Conversation 私聊 / 群聊 / 公开聊天室创建或加入、Conversation 当前会话消息同步刷新、聊天昵称 / 房间状态恢复、最近消息本地恢复、手动恢复、异常断开自动恢复、站点公开信息品牌展示、类似 iView 的蓝白灰移动端组件皮肤、图标化快捷入口、首页 / 聊天 / 商城 / 消息 / 我的五栏底部导航、图标 + 文字 TabBar、非 Tab 页面自定义底部导航、通用 navigateToUrl 跳转 helper、个人中心摘要卡、Telegram Login Widget 重复渲染保护和基础多语言切换。请求封装默认使用 VITE_API_BASE_URL=/api,并为后端传递 Authorization: Bearer <token>Accept-LanguageX-Device: app;接口返回 401 时会清理本地会话并同步刷新前端登录态。

短信验证码登录使用 POST /api/v1/auth/login/sms,邮箱验证码登录使用 POST /api/v1/auth/login/email,后端会先校验并消费验证码,再通过统一账号体系中的 mobileemail identity 返回 LoginVO;登录页和注册页读取 GET /api/v1/auth/capabilities,根据 loginMethods / registerMethods 控制入口排序、开关和环境可见性,根据 register.password.enabled 控制注册总开关,并按 passwordPolicy 做前端轻量校验;普通用户账号密码注册使用 POST /api/v1/auth/register,提交 usernamepasswordconfirmPassword,手机号 / 邮箱验证码注册会额外提交 mobile/emailcodescene=register;找回密码使用 POST /api/v1/auth/password/reset,按 scene=password-reset 先校验短信 / 邮箱验证码。OAuth / 企业 OIDC 登录会先调用 descriptor 返回的 authorizePath 获取第三方授权地址,回调页再调用 loginPath 保存登录态;LDAP / AD 会把目录用户名和密码提交到 descriptor 的 loginPath,SAML 断言登录由企业 SSO 页面回传 SAMLResponse 到同一通用外部登录入口;Web3 钱包登录在 H5 中使用浏览器注入钱包的 personal_sign,无钱包环境会给出降级提示。登录页会读取 GET /api/v1/auth/identity/providers 动态展示已启用外部身份入口;Telegram provider 会返回 Login Widget 所需公开配置,app 可按 botUsername 渲染登录入口,并把回调 signed payload 提交到 descriptor 的 loginPath 完成后端 hash 校验。WebSocket 聊天页默认连接 VITE_WS_BASE_URL + VITE_WS_ENDPOINT,未配置 base 时 H5 使用当前域名和 /api/ws

登录成功后优先回到显式 redirect / redirectUrl / returnUrl 指向的 App 内页;没有显式回跳参数时,登录页会回看页面栈,返回最近的非登录 App 页面。回跳目标允许 pages/** 主包路由和 mall/**chat/** 等根挂载业务分包路由,但会过滤登录、注册、找回密码和登录授权回调页,避免登录成功后再次进入登录流程造成循环。

App 信息架构规划

views/app 面向国内常见综合类 App 使用习惯,底部导航固定收敛为五个主入口:

Tab定位承载功能
首页推荐、运营和快捷入口CMS 轮播、公告、搜索、快捷入口、推荐文章、热门主题、论坛、商品和活动
聊天会话与关系最近会话、私聊、群聊、公开房间、通讯录、未读和实时状态
商城商城闭环商品、分类、搜索、筛选、购物车、收货地址、下单、订单、支付、评价和售后
消息通知与提醒站内信、系统通知、交易提醒、互动提醒、业务提醒和通知偏好
我的账号和资产资料、会员、Web3 钱包、订单、我的内容、收藏、评价、设置和安全

不要把博客、论坛、Web3、会员和更多业务全部平铺到底部导航。当前阶段不再使用宽泛“社区”承载混合信息流:博客作为独立文章入口从首页、全部功能页和搜索进入;论坛作为内容业务入口从首页、全部功能页、搜索和推荐流进入,不再占用底部主 Tab;聊天作为底部 Tab 承载私聊、群聊、公开房间和会话未读;消息作为底部 Tab 承载通知、交易、互动和系统提醒;会员、Web3 钱包、订单和设置集中在“我的”。

首页建议采用“搜索 + 运营 banner + 快捷入口宫格 + 服务入口 + 平台公告 + 推荐流”的布局。快捷入口可以展示博客、论坛、商城、会员、Web3 钱包、通知、聊天和全部功能等高频入口;信息流可以混排 CMS 内容、文章、主题帖、商品和公告。未登录用户允许浏览公开内容,涉及收藏、发布、购物车、下单、消息和个人资产的动作再触发登录保护。

博客页保持独立文章阅读和轻量发布入口,承载文章列表、详情、评论、点赞和收藏。论坛页只承载 Forum 板块和主题,不再混入博客、关注动态或跨模块热榜;如果后续要建设真正社区,需要先由主分支补齐关注关系、动态流、跨模块推荐和服务端热榜 contract。

商城页建议使用顶部搜索、分类入口和购物车角标,二级频道可包含推荐、分类、新品、热销和收藏。商品详情、购物车、结算、地址、订单、订单详情、评价和售后属于商城链路;支付入口通过 Payment contract 接入,Web3 支付只作为支付方式之一,不单独占用商城主导航。

消息页建议保持通知中心定位,顶部二级频道包含通知、交易、互动和系统。通知列表承载系统通知、订单通知、会员通知和 Web3 资产通知;互动列表承载评论、点赞、收藏和回复提醒;消息页不得放聊天入口、会话未读、WebSocket 连接状态或任何聊天技术词。聊天详情继续使用 chat/index 独立聊天页;进入聊天域后使用“首页 / 聊天 / 通讯录 / 消息 / 我的”五栏导航,通讯录负责好友列表、好友申请、资料卡和从好友发起私聊,消息入口回到通知中心。底部“聊天”Tab 只显示会话未读角标,底部“消息”Tab 显示通知未读角标。

我的页建议采用“用户头部 + 会员卡 + Web3 钱包卡 + 我的订单 + 我的内容 + 设置”的布局。会员入口展示等级、权益、开通和续费;Web3 钱包入口展示绑定状态、资产概览和交易记录;订单入口展示待付款、待发货、待收货和售后;内容入口展示文章、帖子、评论和收藏。

页面结构建议优先整理为:

功能组建议页面
首页pages/home/indexpages/search/indexpages/apps/index
博客blog/indexblog/taxonomyblog/detailblog/publish
论坛pages/community/indexforum/indexforum/detailforum/publish
商城pages/mall/indexmall/detailmall/cartmall/checkoutmall/ordersmall/order-detailmall/paymentmall/payment-resultmall/logisticsmall/invoicemall/addressesmall/after-salesmall/after-sales-detail
聊天pages/chat/indexchat/indexchat/createchat/roomschat/contactschat/requestschat/privacychat/profilechat/settings
消息通知pages/messages/indexpages/notifications/indexpages/notifications/detail
我的pages/profile/indexpages/profile/editpages/profile/contentpages/profile/favoritesmember/indexwallet/indexwallet/assetswallet/transactionswallet/bindingpages/settings/index

实现顺序建议:

  1. 先重整 pages.json、原生 tabBar 和底部导航文案,固定为“首页 / 聊天 / 商城 / 消息 / 我的”。
  2. 再整理首页快捷入口和 pages/apps/index 全部功能页,让首页只做高频入口,不堆满所有模块。
  3. 接着把 Blog 和 Forum 分开:Blog 保持独立文章阅读入口,Forum 保持首页、全部功能页和搜索内的论坛业务入口。
  4. 然后打通商城页,先完成商品、购物车、地址、订单和支付入口的页面骨架与降级状态。
  5. 再收口聊天和通知:聊天作为底部主入口承载公开聊天室、群聊、私聊和会话未读;消息作为底部主入口和业务场景内的通知中心,承载通知、互动、交易和平台提醒。
  6. 最后完善我的页,把会员、Web3 钱包、订单、内容、收藏、通知偏好和设置集中到账号中心。

每完成一个完整页面或功能组后,视图分支应补充页面截图到正式文档可引用的截图目录,并在当前视图文档中记录页面入口、效果和验证命令。发现后端接口、字段、权限或数据能力缺失时,仍按视图分支规则记录缺口,不跨边界修改后端。

Released under the Apache License 2.0.