跳到主要内容

平台管理端组件

平台管理端的端内组件位于 apps/admin/src/components。它们只服务 Admin 业务,不应被 Seller、PC 或共享包直接导入。

当前导出入口

apps/admin/src/components/index.ts 当前公开:

导出用途
AuthenticationDialog平台高风险操作的身份验证弹窗
GoodsBaseInfoAdmin 商品基础信息展示
GradeEditor分类层级编辑
OrderBaseInfoAdmin 订单基础信息展示
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";

不要把 PageActionBarTableLayoutBackendTabs 等共享组件再次加入 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 组件

  1. 只服务单个页面的组件放在对应 views 目录附近。
  2. 被多个 Admin 页面复用的组件放入 apps/admin/src/components
  3. 需要作为端内公共能力时,从 components/index.ts 导出。
  4. 两个以上应用真实复用时,再迁移到 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>

有保存动作时绑定 @savesave-loading。不要在业务页面另写 fixed footer,也不要通过手工 padding 给操作栏占位。

验证

只修改 Admin 端内组件时执行:

pnpm build:dev:admin

组件接口、API 类型或共享能力同时变化时执行:

pnpm typecheck
pnpm build:dev

还应覆盖普通页面、弹窗重新打开、空数据、长文本、错误反馈、明暗主题和不同角色权限。构建通过不代表高风险认证、保存或返回链路已经完成业务验收。