平台管理端组件
平台管理端的端内组件位于 apps/admin/src/components。它们只服务 Admin 业务,不应被 Seller、PC 或共享包直接导入。
当前导出入口
apps/admin/src/components/index.ts 当前公开:
| 导出 | 用途 |
|---|---|
AuthenticationDialog | 平台高风险操作的身份验证弹窗 |
GoodsBaseInfo | Admin 商品基础信息展示 |
GradeEditor | 分类层级编辑 |
OrderBaseInfo | Admin 订单基础信息展示 |
TemplateVariableEditor | 模板变量编辑 |
TemplateVariableOption | 模板变量选项类型 |
页面从 @/components 导入 Admin 端内组件,共享组件直接从 @shop-tnt/components 导入:
import { GoodsBaseInfo } from "@/components";
import { PageActionBar } from "@shop-tnt/components";
跨端选择器、表格、上传、反馈等仍从公共入口导入:
import {
MoneyInput,
TableLayout,
TableSearch,
useFeedback,
} from "@shop-tnt/components";
不要把 PageActionBar、TableLayout、BackendTabs 等共享组件再次加入 Admin barrel。apps/admin/src/components/index.ts 只导出真正属于 Admin 的端内组件和类型;共享能力始终从 @shop-tnt/components 的公开入口导入。
使用边界
AuthenticationDialog
该组件服务平台设置等高风险操作。它负责验证流程与结果事件,业务页面仍负责:
- 明确哪些操作需要再次认证。
- 认证成功后只执行原定动作。
- 关闭、失败和过期状态不误提交业务数据。
- 不记录密码、验证码或 token 等敏感信息。
普通确认操作使用 useFeedback().confirm(),不要滥用身份验证弹窗。
GoodsBaseInfo 与 OrderBaseInfo
这两个组件封装 Admin 多页面复用的业务摘要。新增字段前应检查所有调用页面:
- 后端字段可能为空或保持 snake_case。
- Long ID 按字符串展示,不转为不安全 Number。
- 订单、商品状态文案走统一翻译或枚举映射。
- 只读摘要不应隐式发起修改请求。
如果新展示只服务一个页面,先留在该页面;确认存在多个 Admin 调用方后再提升到端内组件。
GradeEditor
层级编辑涉及父子关系和结构化数据。调用方必须保留稳定 ID,并明确处理新增、删除、重排和取消;不能通过数组下标代替后端实体标识。
TemplateVariableEditor
模板变量配置使用导出的 TemplateVariableOption 保持父子组件类型一致。新增变量类型时同步检查编辑、预览、保存和后端校验,不要只修改下拉选项。
新增 Admin 组件
- 只服务单个页面的组件放在对应
views目录附近。 - 被多个 Admin 页面复用的组件放入
apps/admin/src/components。 - 需要作为端内公共能力时,从
components/index.ts导出。 - 两个以上应用真实复用时,再迁移到
packages/components。
组件使用 PascalCase 文件名,显式声明 props、emits 和类型。用户可见文案使用 useTranslate(),反馈使用 useFeedback();不要通过 window 或全局事件传递页面业务状态。
二级页操作栏
Admin 表单、详情、审核和长内容页统一使用:
<script setup lang="ts">
import { PageActionBar } from "@shop-tnt/components";
import { usePageBack } from "@shop-tnt/core";
const { goBack } = usePageBack();
</script>
<template>
<PageActionBar :show-save="false" @back="goBack" />
</template>
有保存动作时绑定 @save 和 save-loading。不要在业务页面另写 fixed footer,也不要通过手工 padding 给操作栏占位。
验证
只修改 Admin 端内组件时执行:
pnpm build:dev:admin
组件接口、API 类型或共享能力同时变化时执行:
pnpm typecheck
pnpm build:dev
还应覆盖普通页面、弹窗重新打开、空数据、长文本、错误反馈、明暗主题和不同角色权限。构建通过不代表高风险认证、保存或返回链路已经完成业务验收。