跳到主要内容

商家端组件

商家端的端内组件位于 apps/seller/src/components。当前端内公开入口很小，避免把单页业务或跨端公共组件重复收进 Seller barrel。

当前导出入口​

apps/seller/src/components/index.ts 当前公开：

导出用途
SellerShopCatPicker商家店铺分组级联选择器

页面从 @/components 导入 Seller 端内组件，共享组件直接从 @shop-tnt/components 导入：

import { SellerShopCatPicker } from "@/components";
import { PageActionBar } from "@shop-tnt/components";

跨端表格、选择器、金额输入和反馈能力仍从公共入口导入：

import {
  MoneyInput,
  TableLayout,
  TableSearch,
  useFeedback,
} from "@shop-tnt/components";

SellerShopCatPicker​

该组件读取当前商家的店铺分组树，使用 v-model 维护后端使用的完整 shop_cat_path，而不是只返回末级 ID。

<script setup lang="ts">
import { ref } from "vue";
import { SellerShopCatPicker } from "@/components";

const shopCatPath = ref("");

function handleShopCatChanged(node) {
  // node 同时包含末级 ID、完整 ID 路径和名称路径。
}
</script>

<template>
  <SellerShopCatPicker
    v-model="shopCatPath"
    :max-level="4"
    @changed="handleShopCatChanged"
  />
</template>

主要输入：

prop默认值说明
modelValue''完整店铺分类 path，例如 0\|1\|2\|
clearabletrue是否允许清空
filterabletrue是否允许搜索
disabledfalse是否禁用
placeholder请选择店铺分组占位文案
width220数字按 px，或传 CSS 宽度字符串
maxLevel4最多展示的分类层级

事件：

  • update:modelValue：返回完整 shop_cat_path。
  • changed：返回当前节点、shop_cat_id、shop_cat_path_ids 和 shop_cat_name_path。

组件内部会过滤不可用分类并处理加载失败。调用方不应再次把 path 截断成末级 ID，也不能用数组下标代替分类标识。

与 TableSearch 配合​

TableSearch 已将 SellerShopCatPicker 识别为即时筛选字段。放入筛选插槽后，选择变化会按 TableSearch 的自动搜索约定触发；页面不要再重复绑定第二套防抖搜索。

如果业务必须手动提交筛选，按照 TableSearch 的字段触发配置关闭即时行为，而不是在选择器内部增加页面专用逻辑。

二级页操作栏​

Seller 的表单、审核、详情和需要返回的二级页优先使用：

<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>

纯列表或查询结果页是否使用底部操作栏要根据页面结构判断，避免悬浮底栏遮挡分页和批量操作。

新增 Seller 组件​

  1. 单页内部组件优先放在对应 views 业务目录。
  2. 多个 Seller 页面复用时放入 apps/seller/src/components。
  3. 需要成为端内公共入口时从 components/index.ts 导出。
  4. Admin 或 PC 出现真实复用需求后，再评估迁移到 packages/components。

已经由 @shop-tnt/components 提供的共享组件不要再从 Seller barrel 转发，避免形成两个公开入口和不一致的导入约定。

组件不得导入 Admin/PC 内部文件。用户文案使用 useTranslate()，网络请求走 @/api 或公共 API 入口，错误通过公共反馈服务呈现。

验证​

只修改 Seller 端内组件时执行：

pnpm build:dev:seller

修改共享类型、API 或公共组件时执行：

pnpm typecheck
pnpm build:dev

SellerShopCatPicker 至少验证加载、默认回显、层级选择、清空、禁用、接口失败和 TableSearch 联动。返回 path 必须与 Seller API 真实提交格式一致。