完善配送端列表头像展示

This commit is contained in:
czl231
2026-08-22 22:23:35 +08:00
parent 2e2c1a35dd
commit 5d4bd61672
10 changed files with 317 additions and 21 deletions

View File

@@ -24,6 +24,7 @@ frontend/delivery_admin/
└── src/
├── api/
│ ├── resource-display.ts # 中文字段、状态和详情值展示
│ ├── avatar.ts # 头像上传与配送点鉴权读取
│ ├── resource-navigation.ts # 独立页面路由和安全返回地址
│ └── resource-record-form.ts # 表单初始化、字段白名单和校验
├── router/routes/modules/
@@ -37,7 +38,9 @@ frontend/delivery_admin/
│ ├── use-resource-avatar.ts # 头像预览、上传和清除状态
│ └── use-unsaved-record.ts # 未保存离开保护
└── views/shared/
── ResourceListPage.vue # 跳转独立页面的标准列表
── ResourceListPage.vue # 跳转独立页面的标准列表
├── ProtectedAvatarThumbnail.vue # 32px 受控头像缩略图
└── protected-list-avatar-loader.ts # 懒加载、限流、缓存和取消
```
## 4. 核心实现
@@ -50,6 +53,8 @@ frontend/delivery_admin/
配送人员和用户账户参考 5173 使用头像身份摘要卡片。新建、编辑时点击头像可选择不超过 2 MB 的 JPG/PNG 文件,保存时先上传到受控头像目录,再把返回 URI 写入资源;详情页通过配送点范围鉴权接口读取头像。未选择新头像时不会清空已有头像。
配送人员和用户账户列表同样参考 5173联系电话后显示 32px 圆形头像,最多并发 6 个鉴权请求,接近可视区域才加载;当前页缓存结果,刷新或离页时取消请求并释放 Blob URL。404、网络错误和图片解码失败均回退本地默认头像。全部标准资源列表隐藏数据库自增 ID只展示可复制的系统唯一标识。
`resource-record-form.ts` 为五类可编辑资源声明后端更新字段白名单,防止用户名、合同编号等只读字段出现在编辑页或被无效提交。
支付与退款资源统一使用后端正式名称 `payment_order``payment_refund`,菜单地址仍保持 `/finance/payments``/finance/refunds`,避免接口路径不一致导致 404。
@@ -73,8 +78,9 @@ npm.cmd run build
- 删除已停用的抽屉式 `CrudListPage.vue`
- 修复支付、退款资源与后端契约名称不一致的问题。
- 新增 17/9/5 页面能力矩阵自动检查。
- 新增配送人员、用户账户的受控头像缩略图,并移除全部标准列表的数据库自增 ID。
- 保持配送点资料专用只读页面和现有公共后端接口不变。
## 7. 已知边界
独立页面只使用配送端已存在的关系查询和 CRUD 能力,不引入平台端头像上传、合同附件上传、平台角色或跨组织账户摘要接口。普通头像和附件 URI 字段仍按原后端文本契约展示或填写。
独立页面只使用配送端数据范围内的关系查询和 CRUD 能力;头像复用公共受控上传入口,并通过配送点专属鉴权接口读取。不引入合同附件上传、平台角色或跨组织账户摘要接口附件 URI 字段仍按原后端文本契约展示或填写。