BizStatusTag 状态标签

码值 → 标签的统一渲染组件（原 BizDictTag 字典标签已合并进本组件并删除）：status 码值经数据源解析出统一文案与颜色，一处配置全局统一，替代模板里散落的 v-if / 三元判断 el-tag type。

双模式三数据源，按优先级级联解析：

优先级	数据源	说明
1	`dict` 本地字典	直传字典数组（静态字典 / 演示 / 字段名自定义场景），不出网
2	`dict-type` 全局字典	经 `configureBizDict` 注入的加载器按类型拉取，`useDict` 同类型共享缓存（详见指南《数据字典 useDict》）
3	`status-map` 手传映射	`Record<string, { text, type?, effect?, color? }>`，每处手传的业务映射表

同时传 dict-type 与 status-map 时 dict-type 优先：字典命中的码值走字典渲染，字典没有的码值（含字典异步加载完成前）回落 status-map——适合「全局字典为主、私有码值补充」的页面；
三数据源都未命中时兜底原样显示码值（不报错），fallback-text 可自定义兜底文案；
字典项 / 映射项 color 字段（合法 css 颜色）渲染实色标签，type 字段映射 EP 色系——两通道并存；
dot 圆点风格（彩色圆点 + 纯文本）、field-names 字典字段名可配、click 外抛命中项、default 插槽接管内容；
el-tag 原生 props（round / hit...）与事件经 $attrs 全量透传，绑定在后的 attrs 可覆盖兜底样式。
组模式支持直传标签对象（{ text, type?, effect?, color?, closable? } 免映射直渲，可与码值混用）、closable 可关闭标签（remove 事件外抛项与下标）、+N 弹层触发 / 位置可配与空态占位——表格多标签列一套组件全覆盖。

从 BizDictTag 迁移

type → dict-type、value → status、fallback → fallback-text、fallback-type / effect / dict 原名保留；color-field / type-field 合并为 field-names: { color, type }；click 事件、default 插槽（{ item, value, label }）、getItem / getLabel expose 全部保留。

基础用法（status-map 手传映射）

待支付待发货已完成已取消99（99 未命中任何数据源 → 原样显示码值）

状态映射 + status 值直接渲染；未命中任何数据源时原样显示码值。

<script setup lang="ts">
/** 场景：status-map 手传映射基础用法——订单状态码统一渲染文案与色系，未命中原样显示码值 */
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusTagMap } from 'vue3-ep-biz-lib'

/** 业务状态映射（由业务侧维护，一处配置全局统一） */
const ORDER_STATUS: BizStatusTagMap = {
  0: { text: '待支付', type: 'warning' },
  1: { text: '待发货', type: 'primary' },
  2: { text: '已完成', type: 'success' },
  9: { text: '已取消', type: 'info' },
}
</script>

<template>
  <div class="row">
    <BizStatusTag v-for="status in [0, 1, 2, 9, 99]" :key="status" :status="status" :status-map="ORDER_STATUS" />
    <span class="tip">（99 未命中任何数据源 → 原样显示码值）</span>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tip {
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

全局字典联动（dict-type）

012首次渲染拉取一次，同类型多处使用共享缓存（300ms 模拟延迟）

configureBizDict 注入加载器后按 dict-type 拉取（模拟接口），同类型多处使用共享一次请求。

<script setup lang="ts">
/** 场景：全局字典联动——configureBizDict 注入模拟加载器，dict-type 按类型拉取、同类型共享缓存 */
import { configureBizDict } from 'vue3-ep-biz-lib'
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizDictItem } from 'vue3-ep-biz-lib'

/** 模拟业务侧字典接口（实际项目在 app 启动时注入真实请求，登录态就绪后调用一次） */
configureBizDict(async (dictType: string): Promise<BizDictItem[]> => {
  await new Promise((resolve) => setTimeout(resolve, 300))
  if (dictType === 'audit_status') {
    return [
      { value: 0, label: '待审核', type: 'info' },
      { value: 1, label: '审核通过', type: 'success' },
      { value: 2, label: '审核驳回', type: 'danger' },
    ]
  }
  return []
})
</script>

<template>
  <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap">
    <BizStatusTag dict-type="audit_status" :status="0" />
    <BizStatusTag dict-type="audit_status" :status="1" />
    <BizStatusTag dict-type="audit_status" :status="2" />
    <span style="font-size: 12px; color: var(--el-text-color-placeholder)">首次渲染拉取一次，同类型多处使用共享缓存（300ms 模拟延迟）</span>
  </div>
</template>

本地字典（dict 直传）

待支付已支付已发货已完成已取消

dict 直传字典数组（静态字典或演示场景），type 字段映射 EP 色系。

<script setup lang="ts">
/** 场景：本地字典——dict 直传字典数组（静态字典 / 演示场景），type 字段映射 EP 色系 */
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizDictItem } from 'vue3-ep-biz-lib'

/** 订单状态本地字典（不发请求，写死的前端枚举直接渲染） */
const orderStatus: BizDictItem[] = [
  { value: 10, label: '待支付', type: 'info' },
  { value: 20, label: '已支付', type: 'primary' },
  { value: 30, label: '已发货', type: 'warning' },
  { value: 40, label: '已完成', type: 'success' },
  { value: 90, label: '已取消', type: 'danger' },
]
</script>

<template>
  <div style="display: flex; gap: 8px; flex-wrap: wrap">
    <BizStatusTag v-for="d in orderStatus" :key="d.value" :dict="orderStatus" :status="d.value" />
  </div>
</template>

三数据源级联与优先级

已付款（本地覆盖）20：本地 dict 命中 → 覆盖全局

已发货（映射兜底）30：本地未命中 → 全局 dict-type 优先于 status-map

已取消（映射兜底）90：本地 / 全局都未命中 → status-map 兜底

9999：三数据源都未命中 → 原样显示码值

本地 dict 覆盖全局 dict-type，status-map 兜底补充，都未命中原样显示码值。

<script setup lang="ts">
/** 场景：三数据源级联——本地 dict 覆盖全局 dict-type，status-map 兜底补充，都未命中原样显示码值 */
import { configureBizDict } from 'vue3-ep-biz-lib'
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizDictItem, BizStatusDictItem, BizStatusTagMap } from 'vue3-ep-biz-lib'

/** 模拟全局字典接口：order_status 只返回部分码值（其余走 status-map 兜底） */
configureBizDict(async (dictType: string): Promise<BizDictItem[]> => {
  await new Promise((resolve) => setTimeout(resolve, 200))
  if (dictType === 'order_status') {
    return [
      { value: 10, label: '待付款（全局）', type: 'info' },
      { value: 20, label: '已付款（全局）', type: 'primary' },
      { value: 30, label: '已发货（全局）', type: 'warning' },
    ]
  }
  return []
})

/** 本地字典只覆盖 20：演示本地优先于全局（灰度文案 / 节日活动改称等） */
const localDict: BizStatusDictItem[] = [{ value: 20, label: '已付款（本地覆盖）', type: 'success' }]

/** 手传映射兜底补充全局没有的码值 */
const fallbackMap: BizStatusTagMap = {
  30: { text: '已发货（映射兜底）', type: 'warning' },
  90: { text: '已取消（映射兜底）', type: 'danger' },
}

const cases = [
  { status: 20, note: '本地 dict 命中 → 覆盖全局' },
  { status: 30, note: '本地未命中 → 全局 dict-type 优先于 status-map' },
  { status: 90, note: '本地 / 全局都未命中 → status-map 兜底' },
  { status: 99, note: '三数据源都未命中 → 原样显示码值' },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px; max-width: 560px">
    <div v-for="c in cases" :key="c.status" style="display: flex; align-items: center; gap: 10px">
      <BizStatusTag dict-type="order_status" :dict="localDict" :status-map="fallbackMap" :status="c.status" />
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">{{ c.status }}：{{ c.note }}</span>
    </div>
  </div>
</template>

field-names 字段名自定义

运行正常轻微告警严重告警id/name/tagColor/statusType → 标准字段自动重映射

后端字典返回 id / name / tagColor / statusType 等自定义字段时，经 field-names 重映射直接渲染，无需前端转换。

<script setup lang="ts">
/** 场景：field-names 字段名自定义——后端字典接口返回 id/name/tagColor/statusType，无需前端转换直接渲染 */
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusFieldNames } from 'vue3-ep-biz-lib'

/** 后端原始结构（设备告警字典）：码值字段是 id、文案字段是 name */
type AlarmItem = { id: number; name: string; statusType: string; tagColor?: string }

const deviceAlarm: AlarmItem[] = [
  { id: 1, name: '运行正常', statusType: 'success' },
  { id: 2, name: '轻微告警', statusType: 'warning' },
  { id: 3, name: '严重告警', statusType: 'danger', tagColor: '#dc2626' },
]

/** 字段名映射：label ← name、value ← id、color ← tagColor、type ← statusType */
const fieldNames: BizStatusFieldNames = {
  label: 'name',
  value: 'id',
  color: 'tagColor',
  type: 'statusType',
}
</script>

<template>
  <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap">
    <BizStatusTag v-for="d in deviceAlarm" :key="String(d.id)" :dict="deviceAlarm" :field-names="fieldNames" :status="d.id" />
    <span style="font-size: 12px; color: var(--el-text-color-placeholder)">id/name/tagColor/statusType → 标准字段自动重映射</span>
  </div>
</template>

color 实色标签

上行下行空闲

左：实色（light）/ 右：plain 幽灵描边

字典项 color 字段（css 颜色）渲染实色 / plain 幽灵样式，与 EP 色系通道并存。

<script setup lang="ts">
/** 场景：color 实色标签——字典项 color 字段（css 颜色）渲染实色，plain 幽灵样式对照 */
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizDictItem } from 'vue3-ep-biz-lib'

/** 链路方向字典：网络质量场景用实色区分上/下行（色值与 EP 色板无关） */
const dict: BizDictItem[] = [
  { value: 'up', label: '上行', color: '#16a34a' },
  { value: 'down', label: '下行', color: '#dc2626' },
  { value: 'idle', label: '空闲', color: '#64748b' },
]
</script>

<template>
  <div style="display: flex; gap: 24px; align-items: center; flex-wrap: wrap">
    <div style="display: flex; gap: 8px">
      <BizStatusTag v-for="d in dict" :key="d.value" :dict="dict" :status="d.value" />
    </div>
    <div style="display: flex; gap: 8px">
      <BizStatusTag v-for="d in dict" :key="d.value" :dict="dict" :status="d.value" effect="plain" />
    </div>
    <span style="font-size: 12px; color: var(--el-text-color-placeholder)">左：实色（light）/ 右：plain 幽灵描边</span>
  </div>
</template>

type 色系 / effect / 尺寸 / attrs 透传

已通过审批中已驳回size="large" + round（attrs 透传）/ 单项 effect / 全局 effect

EP type 色系、effect 主题（单项 effect 优先于全局 effect）、size 尺寸、$attrs 透传（round），以及表格列内的典型用法。

<script setup lang="ts">
/** 场景：EP type 色系与 effect / size / $attrs 透传——审批场景 mixed 配置，el-tag 原生能力不截断 */
import { ElTable, ElTableColumn } from 'element-plus'
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusTagMap } from 'vue3-ep-biz-lib'

/** 审批状态映射：单项 effect 可覆盖全局 effect */
const AUDIT_STATUS: BizStatusTagMap = {
  pending: { text: '审批中', type: 'warning', effect: 'plain' },
  passed: { text: '已通过', type: 'success' },
  rejected: { text: '已驳回', type: 'danger', effect: 'dark' },
}

/** 工单状态字典：全局 dark 主题演示（dict 模式同样吃 effect 属性） */
const tickets: Array<{ id: string; title: string; status: string }> = [
  { id: 'TK-1024', title: '权限变更申请', status: 'pending' },
  { id: 'TK-1025', title: '数据导出申请', status: 'passed' },
  { id: 'TK-1026', title: '账号注销申请', status: 'rejected' },
]
</script>

<template>
  <div>
    <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap">
      <BizStatusTag status="passed" :status-map="AUDIT_STATUS" size="large" round />
      <BizStatusTag status="pending" :status-map="AUDIT_STATUS" />
      <BizStatusTag status="rejected" :status-map="AUDIT_STATUS" effect="plain" />
      <span style="font-size: 12px; color: var(--el-text-color-placeholder)">size="large" + round（attrs 透传）/ 单项 effect / 全局 effect</span>
    </div>

    <ElTable :data="tickets" size="small" style="width: 100%; margin-top: 12px">
      <ElTableColumn prop="id" label="工单号" width="100" />
      <ElTableColumn prop="title" label="申请事项" />
      <ElTableColumn label="审批状态" width="120">
        <template #default="{ row }">
          <BizStatusTag :status="row.status" :status-map="AUDIT_STATUS" />
        </template>
      </ElTableColumn>
    </ElTable>
  </div>
</template>

未命中兜底

正常故障99未知状态99 未命中：默认原样显示码值 / 自定义兜底文案与色系

码值未命中任何数据源时默认原样显示，fallback-text / fallback-type 自定义兜底文案与色系。

<script setup lang="ts">
/** 场景：未命中兜底——原样显示码值（默认）/ fallback-text 自定义文案 / fallback-type 兜底色系 */
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizDictItem } from 'vue3-ep-biz-lib'

/** 设备状态字典（故意不含异常码 99，演示兜底） */
const dict: BizDictItem[] = [
  { value: 1, label: '正常', type: 'success' },
  { value: 2, label: '故障', type: 'danger' },
]
</script>

<template>
  <div style="display: flex; gap: 8px; align-items: center; flex-wrap: wrap">
    <BizStatusTag :dict="dict" :status="1" />
    <BizStatusTag :dict="dict" :status="2" />
    <BizStatusTag :dict="dict" :status="99" />
    <BizStatusTag :dict="dict" :status="99" fallback-text="未知状态" fallback-type="warning" />
    <span style="font-size: 12px; color: var(--el-text-color-placeholder)">99 未命中：默认原样显示码值 / 自定义兜底文案与色系</span>
  </div>
</template>

高密度监控列表（dot 圆点风格）

圆点风格（dot）

运行中order-centerQPS 1,284

告警pay-gatewayQPS 3,902

维护中stock-syncQPS 96

已停止report-workerQPS 0

标签风格（默认）

运行中order-centerQPS 1,284

告警pay-gatewayQPS 3,902

维护中stock-syncQPS 96

已停止report-workerQPS 0

服务监控列表场景：dot 圆点风格与默认标签风格并排对照——无边框无底色，行高更紧凑；同一份映射两种风格复用。

<script setup lang="ts">
/** 场景：高密度监控列表——dot 圆点风格对照标签风格，信息密度差异直观可见 */
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusTagMap } from 'vue3-ep-biz-lib'

/** 服务运行状态映射（同一份映射两种风格复用） */
const STATUS_MAP: BizStatusTagMap = {
  running: { text: '运行中', type: 'success' },
  stopped: { text: '已停止', type: 'info' },
  alarm: { text: '告警', type: 'danger' },
  maintain: { text: '维护中', type: 'warning' },
}

interface ServiceRow {
  name: string
  status: keyof typeof STATUS_MAP
  qps: string
}

const rows: ServiceRow[] = [
  { name: 'order-center', status: 'running', qps: '1,284' },
  { name: 'pay-gateway', status: 'alarm', qps: '3,902' },
  { name: 'stock-sync', status: 'maintain', qps: '96' },
  { name: 'report-worker', status: 'stopped', qps: '0' },
]
</script>

<template>
  <div style="max-width: 560px; display: flex; gap: 20px">
    <!-- dot 圆点风格：无边框无底色，行高更紧凑 -->
    <div style="flex: 1">
      <p style="margin: 0 0 6px; font-size: 13px; color: var(--el-text-color-secondary)">圆点风格（dot）</p>
      <div
        v-for="row in rows"
        :key="row.name"
        style="display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--el-border-color-extra-light)"
      >
        <BizStatusTag :status="row.status" :status-map="STATUS_MAP" dot />
        <span style="flex: 1; font-family: monospace; font-size: 13px">{{ row.name }}</span>
        <span style="font-size: 12px; color: var(--el-text-color-secondary)">QPS {{ row.qps }}</span>
      </div>
    </div>
    <!-- 对照：默认标签风格 -->
    <div style="flex: 1">
      <p style="margin: 0 0 6px; font-size: 13px; color: var(--el-text-color-secondary)">标签风格（默认）</p>
      <div
        v-for="row in rows"
        :key="row.name"
        style="display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid var(--el-border-color-extra-light)"
      >
        <BizStatusTag :status="row.status" :status-map="STATUS_MAP" />
        <span style="flex: 1; font-family: monospace; font-size: 13px">{{ row.name }}</span>
        <span style="font-size: 12px; color: var(--el-text-color-secondary)">QPS {{ row.qps }}</span>
      </div>
    </div>
  </div>
</template>

订单/工单表格状态列（批量使用）

最常见用法：订单状态列（dict 模式）与售后工单列（status-map 模式）同表并用，整列统一渲染。

<script setup lang="ts">
/** 场景：订单/工单表格状态列批量使用——最常见用法，一列配置整表统一渲染 */
import { ElTable, ElTableColumn } from 'element-plus'
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizDictItem, BizStatusTagMap } from 'vue3-ep-biz-lib'

/** 销售订单状态（dict 模式：code → label + EP 色系） */
const orderStatus: BizDictItem[] = [
  { value: 10, label: '待支付', type: 'info' },
  { value: 20, label: '已支付', type: 'primary' },
  { value: 30, label: '已发货', type: 'warning' },
  { value: 40, label: '已完成', type: 'success' },
  { value: 90, label: '已取消', type: 'danger' },
]

/** 售后工单状态（status-map 模式：同一组件另一通道） */
const ticketMap: BizStatusTagMap = {
  created: { text: '已建单', type: 'info' },
  processing: { text: '处理中', type: 'primary' },
  refunded: { text: '已退款', type: 'success' },
  rejected: { text: '已驳回', type: 'danger' },
}

interface OrderRow {
  id: string
  amount: string
  status: number
  ticket: keyof typeof ticketMap
}

const rows: OrderRow[] = [
  { id: 'SO-2601', amount: '¥1,299', status: 10, ticket: 'created' },
  { id: 'SO-2602', amount: '¥386', status: 30, ticket: 'processing' },
  { id: 'SO-2603', amount: '¥2,580', status: 40, ticket: 'refunded' },
  { id: 'SO-2604', amount: '¥99', status: 90, ticket: 'rejected' },
]
</script>

<template>
  <ElTable :data="rows" size="small" border>
    <ElTableColumn prop="id" label="订单号" width="110" />
    <ElTableColumn prop="amount" label="金额" width="100" />
    <ElTableColumn label="订单状态" min-width="100">
      <template #default="{ row }">
        <BizStatusTag :dict="orderStatus" :status="row.status" />
      </template>
    </ElTableColumn>
    <ElTableColumn label="售后工单" min-width="100">
      <template #default="{ row }">
        <BizStatusTag :status-map="ticketMap" :status="row.ticket" />
      </template>
    </ElTableColumn>
  </ElTable>
</template>

事件与插槽

在线离线未点击

click 外抛命中的字典项（status-map 命中时为映射项合成对象），插槽接管标签内容（附加图标等）。

<script setup lang="ts">
/** 场景：click 事件与插槽——click 外抛命中项（含码值/文案），插槽接管标签内容附加图标 */
import { ref } from 'vue'
import { ElIcon, ElMessage } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizDictItem } from 'vue3-ep-biz-lib'

/** 客服在线状态字典 */
const dict: BizDictItem[] = [
  { value: 'online', label: '在线', type: 'success' },
  { value: 'offline', label: '离线', type: 'info' },
]

const last = ref('未点击')
</script>

<template>
  <div style="display: flex; gap: 12px; align-items: center; flex-wrap: wrap">
    <BizStatusTag
      v-for="d in dict"
      :key="d.value"
      :dict="dict"
      :status="d.value"
      style="cursor: pointer"
      @click="(item) => { last = item ? `点击：${String(item.label)}（${String(item.value)}）` : '未命中'; ElMessage.info(last) }"
    >
      <template #default="{ label }">
        <ElIcon :size="12" style="margin-right: 2px; vertical-align: -2px"><Search /></ElIcon>{{ label }}
      </template>
    </BizStatusTag>
    <span style="font-size: 12px; color: var(--el-text-color-placeholder)">{{ last }}</span>
  </div>
</template>

订单状态流转

已创建→已支付→已发货→已签收→已完成当前：已发货（第 3/5 环）

状态机场景：全流程节点并行展示——已到达 info、当前态 primary 高亮、未到达 plain 半透明降权。

<script setup lang="ts">
/** 场景：订单状态流转——全流程节点并行展示，当前态高亮、未到达置灰（effect 属性动态降权） */
import { BizStatusTag } from 'vue3-ep-biz-lib'

const flow = [
  { key: 'created', text: '已创建', reached: true, current: false },
  { key: 'paid', text: '已支付', reached: true, current: false },
  { key: 'shipped', text: '已发货', reached: true, current: true },
  { key: 'delivered', text: '已签收', reached: false, current: false },
  { key: 'done', text: '已完成', reached: false, current: false },
]
</script>

<template>
  <div style="display: flex; align-items: center; gap: 6px; max-width: 640px; flex-wrap: wrap">
    <template v-for="(node, index) in flow" :key="node.key">
      <BizStatusTag
        :status="node.current ? 'current' : node.reached ? 'reached' : 'unreached'"
        :status-map="{
          reached: { text: node.text, type: 'info' },
          current: { text: node.text, type: 'primary' },
          unreached: { text: node.text, type: 'info' },
        }"
        :effect="node.reached ? 'light' : 'plain'"
        :style="node.reached ? '' : 'opacity: 0.45'"
      />
      <span v-if="index < flow.length - 1" style="color: var(--el-text-color-placeholder)">→</span>
    </template>
    <span style="margin-left: 8px; font-size: 13px; color: var(--el-text-color-secondary)">当前：已发货（第 3/5 环）</span>
  </div>
</template>

服务依赖树

●web-gateway运行中

└user-service运行中

└user-mysql运行中

└user-redis降级

└order-service运行中

└order-mysql停止

●report-worker降级

拓扑场景：层级缩进 + 连线符号 + dot 圆点逐行状态——网关 → 服务 → 中间件三层健康度一屏看全。

<script setup lang="ts">
/** 场景：服务依赖树——层级缩进 + 连线符号 + dot 圆点逐行健康度 */
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusTagMap } from 'vue3-ep-biz-lib'

/** 中间件健康状态映射 */
const MAP: BizStatusTagMap = {
  running: { text: '运行中', type: 'success' },
  degraded: { text: '降级', type: 'warning' },
  stopped: { text: '停止', type: 'danger' },
}

interface TreeNode {
  depth: number
  name: string
  status: keyof typeof MAP
}

const nodes: TreeNode[] = [
  { depth: 0, name: 'web-gateway', status: 'running' },
  { depth: 1, name: 'user-service', status: 'running' },
  { depth: 2, name: 'user-mysql', status: 'running' },
  { depth: 2, name: 'user-redis', status: 'degraded' },
  { depth: 1, name: 'order-service', status: 'running' },
  { depth: 2, name: 'order-mysql', status: 'stopped' },
  { depth: 0, name: 'report-worker', status: 'degraded' },
]
</script>

<template>
  <div style="max-width: 420px; display: flex; flex-direction: column; gap: 2px">
    <div
      v-for="node in nodes"
      :key="node.name"
      :style="{ display: 'flex', alignItems: 'center', gap: 8, padding: '5px 8px', marginLeft: `${node.depth * 28}px`, fontSize: 13, borderBottom: '1px solid var(--el-border-color-extra-light)' }"
    >
      <span style="color: var(--el-text-color-placeholder)">{{ node.depth === 0 ? '●' : '└' }}</span>
      <span style="flex: 1; font-family: monospace">{{ node.name }}</span>
      <BizStatusTag :status="node.status" :status-map="MAP" dot />
    </div>
  </div>
</template>

表格双状态列

信贷场景：借据状态（标签）与风险等级（dot 圆点）双列并行——同一行两种状态不同密度呈现。

<script setup lang="ts">
/** 场景：表格双状态列——主状态标签 + 风险等级圆点并行（信贷借据列表） */
import { ElTable, ElTableColumn } from 'element-plus'
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusTagMap } from 'vue3-ep-biz-lib'

/** 借据状态与风险等级两套映射（标签 + dot 双密度呈现） */
const STATUS_MAP: BizStatusTagMap = {
  servicing: { text: '还款中', type: 'primary' },
  settled: { text: '已结清', type: 'success' },
  overdue: { text: '已逾期', type: 'danger' },
}

const RISK_MAP: BizStatusTagMap = {
  low: { text: '低风险', type: 'success' },
  mid: { text: '中风险', type: 'warning' },
  high: { text: '高风险', type: 'danger' },
}

interface LoanRow {
  name: string
  status: keyof typeof STATUS_MAP
  risk: keyof typeof RISK_MAP
  amount: string
}

const rows: LoanRow[] = [
  { name: '苏氏精密铸造', status: 'servicing', risk: 'low', amount: '¥ 320,000' },
  { name: '恒达物流', status: 'overdue', risk: 'high', amount: '¥ 1,020,000' },
  { name: '蓝湾餐饮', status: 'servicing', risk: 'mid', amount: '¥ 86,000' },
  { name: '启明电子', status: 'settled', risk: 'low', amount: '¥ 540,000' },
]
</script>

<template>
  <ElTable :data="rows" size="small" border style="max-width: 620px">
    <ElTableColumn prop="name" label="客户" width="130" />
    <ElTableColumn label="借据状态" width="100">
      <template #default="{ row }"><BizStatusTag :status="row.status" :status-map="STATUS_MAP" /></template>
    </ElTableColumn>
    <ElTableColumn label="风险等级" width="110">
      <template #default="{ row }"><BizStatusTag :status="row.risk" :status-map="RISK_MAP" dot /></template>
    </ElTableColumn>
    <ElTableColumn prop="amount" label="余额" align="right" />
  </ElTable>
</template>

组模式：多标签并排

status 传数组进入组模式：多码值并排渲染（逐项走三数据源级联解析），适合表格故障状态列、用户多标签。

<script setup lang="ts">
/** 场景：组模式基础——status 传数组，多故障状态并排渲染（表格列） */
import { BizStatusTag } from 'vue3-ep-biz-lib'

const faultMap = {
  offline: { text: '离线', type: 'danger' as const },
  lowbat: { text: '低电量', type: 'warning' as const },
  overheat: { text: '过温', type: 'danger' as const },
  ota: { text: '升级中', type: 'primary' as const },
  dirty: { text: '数据异常', type: 'info' as const },
}

const rows = [
  { device: 'GW-0101 边缘网关', faults: ['offline'] },
  { device: 'TH-0203 温湿度传感器', faults: ['lowbat', 'dirty'] },
  { device: 'GW-0107 边缘网关', faults: ['overheat', 'offline', 'lowbat', 'ota', 'dirty'] },
]
</script>

<template>
  <el-table :data="rows" border size="small">
    <el-table-column prop="device" label="设备" min-width="180" />
    <el-table-column label="故障状态" min-width="260">
      <template #default="{ row }">
        <BizStatusTag :status="row.faults" :status-map="faultMap" />
      </template>
    </el-table-column>
  </el-table>
</template>

组模式折叠（max + N）

max：

（缺省 max 时全部展示，不折叠）

物联网边缘计算视频监控+4

超出 max 的标签收进 +N，鼠标悬浮展开剩余项（气泡内仍按字典解析着色）。

max 直接展示上限，超出收进 +N 悬浮气泡展开剩余项；缺省 max 全部展示不折叠。

<script setup lang="ts">
/** 场景：组模式折叠——max 直接展示上限，超出 +N 悬浮气泡展开全部 */
import { ref } from 'vue'
import { BizStatusTag } from 'vue3-ep-biz-lib'

const max = ref(3)

const tagsMap = {
  iot: { text: '物联网', type: 'primary' as const },
  edge: { text: '边缘计算', type: 'success' as const },
  video: { text: '视频监控', type: 'warning' as const },
  alarm: { text: '告警联动', type: 'danger' as const },
  report: { text: '报表中心', type: 'info' as const },
  sso: { text: '单点登录', type: 'info' as const },
  openapi: { text: '开放接口', type: 'primary' as const },
}

const allTags = ['iot', 'edge', 'video', 'alarm', 'report', 'sso', 'openapi']
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-space>
      <span>max：</span>
      <el-input-number v-model="max" :min="1" :max="allTags.length" />
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">（缺省 max 时全部展示，不折叠）</span>
    </el-space>
    <el-card shadow="never" style="width: 480px">
      <template #header>项目能力标签</template>
      <BizStatusTag :status="allTags" :status-map="tagsMap" :max="max" />
    </el-card>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      超出 max 的标签收进 <code>+N</code>，鼠标悬浮展开剩余项（气泡内仍按字典解析着色）。
    </p>
  </el-space>
</template>

组模式注意事项

组模式固定渲染标签风格（dot 圆点风格为主语言单值设计，组内不生效）；$attrs 中的 el-tag 原生属性（round / hit 等）仅单值模式透传生效，组模式 class/style 仍落根元素。

组模式交互与插槽

管理员 ★运维开发+2

组模式沿用单值契约：三数据源级联解析（此处本地 dict）、click 逐项外抛命中项、default 插槽按项接管（作用域 value / label / item）。

组模式沿用单值契约：click 逐项外抛命中项，default 插槽按项接管（作用域 value / label / item）。

<script setup lang="ts">
/** 场景：组模式交互——click 逐项外抛命中项 + 插槽接管渲染 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusDictItem } from 'vue3-ep-biz-lib'

const roleDict: BizStatusDictItem[] = [
  { value: 'admin', label: '管理员', type: 'danger' },
  { value: 'ops', label: '运维', type: 'warning' },
  { value: 'dev', label: '开发', type: 'primary' },
  { value: 'auditor', label: '审计', type: 'info' },
  { value: 'viewer', label: '访客', type: 'info' },
]

const clicked = ref('')

const onClick = (item: BizStatusDictItem | undefined): void => {
  if (item === undefined) return
  clicked.value = String(item.label)
  ElMessage.info(`点击了：${String(item.label)}（${String(item.value)}）`)
}
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-card shadow="never" style="width: 460px">
      <template #header>张三 · 角色标签（点击任一标签）</template>
      <BizStatusTag :status="['admin', 'ops', 'dev', 'auditor', 'viewer']" :dict="roleDict" :max="3" @click="onClick">
        <template #default="{ label, item }">
          {{ label }}{{ item !== undefined && item.value === 'admin' ? ' ★' : '' }}
        </template>
      </BizStatusTag>
    </el-card>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      组模式沿用单值契约：三数据源级联解析（此处本地 dict）、click 逐项外抛命中项、default 插槽按项接管（作用域 value / label / item）。
    </p>
  </el-space>
</template>

组模式直传字符串数组（免映射）

徒步摄影咖啡自驾滑雪垂钓桌游

徒步摄影咖啡+4

数组项为纯字符串时跳过字典 / status-map 解析直接渲染（统一 info 色系）；需要逐项配色时改传标签对象（见下例）。

数组项为纯字符串时跳过字典 / status-map 解析直接渲染，后端直接返回文案列表的场景零配置。

<script setup lang="ts">
/** 场景：组模式直传字符串数组——后端直接返回文案列表时免映射原样展示 */
import { BizStatusTag } from 'vue3-ep-biz-lib'

const interests = ['徒步', '摄影', '咖啡', '自驾', '滑雪', '垂钓', '桌游']
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-card shadow="never" style="width: 480px">
      <template #header>用户兴趣标签（全量）</template>
      <BizStatusTag :status="interests" />
    </el-card>
    <el-card shadow="never" style="width: 480px">
      <template #header>折叠展示（max=3）</template>
      <BizStatusTag :status="interests" :max="3" />
    </el-card>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      数组项为纯字符串时跳过字典 / status-map 解析直接渲染（统一 info 色系）；需要逐项配色时改传标签对象（见下例）。
    </p>
  </el-space>
</template>

组模式直传标签对象

Vue3TypeScriptNode.jsGoK8s低代码

Vue3TypeScriptNode.js+3

status 数组项直接传 { text, type?, effect?, color? } 标签对象，逐项指定 EP 色系 / 主题 / 实色，无需码值映射； round 等 el-tag 原生属性仅单值模式透传生效（组模式见下方 tip）。

数组项传 { text, type?, effect?, color? } 对象，逐项指定 EP 色系 / 主题 / 实色，无需维护映射表。

<script setup lang="ts">
/** 场景：组模式直传标签对象数组——type / effect / color 逐项指定，免维护映射表 */
import { ref } from 'vue'
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusTagRawItem } from 'vue3-ep-biz-lib'

const skills = ref<BizStatusTagRawItem[]>([
  { text: 'Vue3', type: 'primary' },
  { text: 'TypeScript', type: 'success' },
  { text: 'Node.js', type: 'warning', effect: 'plain' },
  { text: 'Go', color: '#8b5cf6' },
  { text: 'K8s', type: 'info', effect: 'plain' },
  { text: '低代码', color: '#f43f5e' },
])
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-card shadow="never" style="width: 520px">
      <template #header>成员技能标签（对象直传 + 实色混搭）</template>
      <BizStatusTag :status="skills" />
    </el-card>
    <el-card shadow="never" style="width: 520px">
      <template #header>折叠展示（max=3）</template>
      <BizStatusTag :status="skills" :max="3" />
    </el-card>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      <code>status</code> 数组项直接传 <code>{ text, type?, effect?, color? }</code> 标签对象，逐项指定 EP 色系 / 主题 / 实色，无需码值映射；
      <code>round</code> 等 el-tag 原生属性仅单值模式透传生效（组模式见下方 tip）。
    </p>
  </el-space>
</template>

组模式码值与对象混用

管理员研发乙方实施临时访客+1

同一数组内码值（admin / dev / ops 走映射配色）与对象（乙方实施 / 临时访客直传）混用—— 映射命不中的动态标签不必再往字典里补码值。

存量码值走映射解析、动态下发标签对象直传，同一数组混用——动态标签不必再补字典码值。

<script setup lang="ts">
/** 场景：组模式码值与对象混用——存量码值走映射解析，动态标签对象直传 */
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusTagRawItem } from 'vue3-ep-biz-lib'

/** 存量码值：走 status-map 映射 */
const roleMap = {
  admin: { text: '管理员', type: 'danger' as const },
  dev: { text: '研发', type: 'primary' as const },
  ops: { text: '运维', type: 'warning' as const },
}

/** 外部协作方动态下发：对象直传免映射 */
const partners: BizStatusTagRawItem[] = [
  { text: '乙方实施', type: 'success' },
  { text: '临时访客', type: 'info', effect: 'plain' },
]

const all = ['admin', 'dev', ...partners, 'ops']
</script>

<template>
  <el-card shadow="never" style="width: 520px">
    <template #header>项目成员角色（混合数组）</template>
    <BizStatusTag :status="all" :status-map="roleMap" :max="4" />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      同一数组内码值（admin / dev / ops 走映射配色）与对象（乙方实施 / 临时访客直传）混用——
      映射命不中的动态标签不必再往字典里补码值。
    </p>
  </el-card>
</template>

组模式可关闭标签（closable + remove）

新零售华东大区重点客户Q4 冲刺复购提醒

closable 全局开启后逐项渲染关闭按钮；「新零售」单项 closable: false 豁免移除。组件不改动数组，remove 事件回传 { item, value, index } 由父级删。

closable 开启逐项关闭按钮（单项 closable: false 豁免）；组件不改数组，remove 事件回传 { item, value, index } 由父级删。

<script setup lang="ts">
/** 场景：组模式可关闭标签——closable 逐个移除，remove 事件回传项与下标 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusTagRawItem } from 'vue3-ep-biz-lib'

const tags = ref<BizStatusTagRawItem[]>([
  { text: '新零售', type: 'primary' },
  { text: '华东大区', type: 'success' },
  { text: '重点客户', type: 'warning' },
  { text: 'Q4 冲刺', type: 'danger' },
  { text: '复购提醒', type: 'info' },
])

/** 单项 closable: false 可豁免移除（如必选项） */
tags.value[0] = { ...tags.value[0]!, closable: false }

const onRemove = (payload: { item: Record<string, unknown> | undefined; value: string | number; index: number }): void => {
  tags.value.splice(payload.index, 1)
  ElMessage.success(`已移除「${String(payload.value)}」（下标 ${payload.index}）`)
}
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-card shadow="never" style="width: 520px">
      <template #header>客户分组（点击 × 移除）</template>
      <BizStatusTag :status="tags" closable @remove="onRemove" />
    </el-card>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      closable 全局开启后逐项渲染关闭按钮；「新零售」单项 <code>closable: false</code> 豁免移除。
      组件不改动数组，remove 事件回传 <code>{ item, value, index }</code> 由父级删。
    </p>
  </el-space>
</template>

组模式弹层触发与位置

触发：

hoverclick

位置：

topbottom

数据看板权限中心消息推送+5

popper-trigger 默认 hover 悬浮展开；触屏 / 平板场景改 click 点按展开， popper-placement 控制弹出方位（默认 top，贴近表格底行时改 bottom）。

popper-trigger 支持 hover / click（触屏场景），popper-placement 控制弹出方位，默认 hover + top。

<script setup lang="ts">
/** 场景：组模式 +N 弹层触发方式与弹出位置可配（click 触发适配移动端 / 无悬停环境） */
import { ref } from 'vue'
import { BizStatusTag } from 'vue3-ep-biz-lib'

const trigger = ref<'hover' | 'click'>('click')
const placement = ref<'top' | 'bottom'>('bottom')

const tags = ['数据看板', '权限中心', '消息推送', '审批流', '日志审计', '开放接口', '数据同步', '灰度发布']
const tagMap = Object.fromEntries(
  tags.map((t, i) => [t, { text: t, type: (['primary', 'success', 'warning'] as const)[i % 3] }]),
)
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-space>
      <span style="font-size: 13px">触发：</span>
      <el-radio-group v-model="trigger">
        <el-radio-button value="hover">hover</el-radio-button>
        <el-radio-button value="click">click</el-radio-button>
      </el-radio-group>
      <span style="font-size: 13px; margin-left: 12px">位置：</span>
      <el-radio-group v-model="placement">
        <el-radio-button value="top">top</el-radio-button>
        <el-radio-button value="bottom">bottom</el-radio-button>
      </el-radio-group>
    </el-space>
    <el-card shadow="never" style="width: 520px">
      <template #header>已开通能力（max=3）</template>
      <BizStatusTag
        :status="tags"
        :status-map="tagMap"
        :max="3"
        :popper-trigger="trigger"
        :popper-placement="placement"
      />
    </el-card>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      <code>popper-trigger</code> 默认 hover 悬浮展开；触屏 / 平板场景改 click 点按展开，
      <code>popper-placement</code> 控制弹出方位（默认 top，贴近表格底行时改 bottom）。
    </p>
  </el-space>
</template>

组模式空态占位

iOSAndroid小程序

空数组缺省不渲染（表格内保持空白）；传 empty-text 显示弱化占位文案。

<script setup lang="ts">
/** 场景：组模式空态占位——空数组时显示弱化文案，替代空白单元格 */
import { ref } from 'vue'
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusTagRawItem } from 'vue3-ep-biz-lib'

const tags = ref<BizStatusTagRawItem[]>([
  { text: 'iOS', type: 'primary' },
  { text: 'Android', type: 'success' },
  { text: '小程序', type: 'warning' },
])
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-card shadow="never" style="width: 420px">
      <template #header>覆盖平台</template>
      <BizStatusTag :status="tags" empty-text="暂未覆盖任何平台" />
    </el-card>
    <el-space>
      <el-button size="small" type="danger" plain :disabled="tags.length === 0" @click="tags = []">
        清空
      </el-button>
      <el-button
        size="small"
        @click="tags = [{ text: 'iOS', type: 'primary' }, { text: 'Android', type: 'success' }, { text: '小程序', type: 'warning' }]"
      >
        恢复
      </el-button>
    </el-space>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      空数组缺省不渲染（表格内保持空白）；传 <code>empty-text</code> 显示弱化占位文案。
    </p>
  </el-space>
</template>

组模式尺寸档位

small

等保三级ISO27001+2

default

等保三级ISO27001+2

large

等保三级ISO27001+2

尺寸跟随 el-tag 三档（含 +N 折叠按钮），表格标签列用 small 密度最高。

size 三档（small 表格 / default 卡片 / large 大屏），含 +N 折叠按钮同步缩放。

<script setup lang="ts">
/** 场景：组模式尺寸档位——表格内 small、卡片 default、大屏 large */
import { BizStatusTag } from 'vue3-ep-biz-lib'

const tags = ['等保三级', 'ISO27001', 'SOC2', 'PCI-DSS']
const tagMap = {
  等保三级: { text: '等保三级', type: 'success' as const },
  ISO27001: { text: 'ISO27001', type: 'primary' as const },
  SOC2: { text: 'SOC2', type: 'warning' as const },
  'PCI-DSS': { text: 'PCI-DSS', type: 'info' as const },
}
</script>

<template>
  <el-space direction="vertical" size="large" alignment="flex-start">
    <el-space>
      <span style="font-size: 13px; width: 64px">small</span>
      <BizStatusTag :status="tags" :status-map="tagMap" size="small" :max="2" />
    </el-space>
    <el-space>
      <span style="font-size: 13px; width: 64px">default</span>
      <BizStatusTag :status="tags" :status-map="tagMap" size="default" :max="2" />
    </el-space>
    <el-space>
      <span style="font-size: 13px; width: 64px">large</span>
      <BizStatusTag :status="tags" :status-map="tagMap" size="large" :max="2" />
    </el-space>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      尺寸跟随 el-tag 三档（含 +N 折叠按钮），表格标签列用 small 密度最高。
    </p>
  </el-space>
</template>

表格标签列集成（折叠 + 移除实战）

用户列表：技能列对象直传 + max 折叠 + 空态，权限列 closable 就地回收——多标签表格列的完整范式。

<script setup lang="ts">
/** 场景：表格标签列集成——多标签溢出折叠 +N，closable 就 Privileges 列就地移除 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizStatusTag } from 'vue3-ep-biz-lib'
import type { BizStatusTagRawItem } from 'vue3-ep-biz-lib'

interface MemberRow {
  name: string
  dept: string
  skills: string[]
  privileges: BizStatusTagRawItem[]
}

const rows = ref<MemberRow[]>([
  {
    name: '张伟',
    dept: '前端组',
    skills: ['Vue', 'TS', 'Vite', 'Node', '性能优化', '微前端'],
    privileges: [
      { text: '发布', type: 'danger' as const },
      { text: '回滚', type: 'warning' as const },
      { text: '看板', type: 'success' as const },
    ],
  },
  {
    name: '李静',
    dept: '测试组',
    skills: ['自动化', '压测', '安全扫描'],
    privileges: [{ text: '看板', type: 'success' as const }],
  },
  {
    name: '王强',
    dept: '运维组',
    skills: [],
    privileges: [{ text: '发布', type: 'danger' as const, closable: false }, { text: '回滚', type: 'warning' as const }],
  },
])

const onRemove = (rowIndex: number, payload: { value: string | number; index: number }): void => {
  rows.value[rowIndex]!.privileges.splice(payload.index, 1)
  ElMessage.success(`${rows.value[rowIndex]!.name} 的「${String(payload.value)}」权限已回收`)
}
</script>

<template>
  <el-table :data="rows" border style="width: 720px">
    <el-table-column prop="name" label="成员" width="90" />
    <el-table-column prop="dept" label="部门" width="90" />
    <el-table-column label="技能（max=2 折叠）" min-width="200">
      <template #default="{ row }">
        <BizStatusTag :status="row.skills" :max="2" empty-text="—" />
      </template>
    </el-table-column>
    <el-table-column label="权限（可回收）" min-width="180">
      <template #default="{ row, $index }">
        <BizStatusTag
          :status="row.privileges"
          closable
          empty-text="无权限"
          @remove="(p) => onRemove($index, p)"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

Props

属性名	类型	默认值	说明
status	`string \| number \| Array<string \| number \| BizStatusTagRawItem>`	`''`	当前码值；传数组进入组模式：项可为码值（三数据源解析）或直传标签对象 `{ text, type?, effect?, color?, closable? }`（免映射直渲，可混用），超出 max 折叠 +N
max	`number`	—	组模式直接展示上限，超出收进 +N 悬浮气泡（仅 status 为数组时生效，缺省全部展示）
closable	`boolean`	`false`	组模式标签可关闭（关闭外抛 remove 事件；直传对象单项 closable 优先）
popper-trigger	`'hover' \| 'click' \| 'focus'`	`'hover'`	组模式 +N 折叠弹层触发方式（触屏场景用 click）
popper-placement	`BizStatusTagPlacement`	`'top'`	组模式 +N 折叠弹层弹出位置（top / bottom 起始的六方位）
empty-text	`string`	`''`	组模式空数组占位文案（缺省不渲染任何内容）
status-map	`Record<string, BizStatusMapItem>`	`{}`	手传状态映射（业务侧维护；与 dict-type 同传时字典优先）
dict-type	`string`	`''`	字典类型编码（经 `configureBizDict` 注入的加载器拉取，同类型共享缓存）
dict	`BizStatusDictItem[]`	—	本地字典数组（优先于全局加载，用于静态字典 / 演示）
field-names	`BizStatusFieldNames`	—	字典数组字段名配置：`{ label?, value?, color?, type? }`，缺省 `label / value / color / type` 同名字段
fallback-text	`string`	—	未命中任何数据源时的兜底文案（默认原样显示码值，码值为空时显示「未知」）
fallback-type	`BizStatusTagType`	`'info'`	未命中任何数据源时的兜底色系
effect	`'light' \| 'dark' \| 'plain'`	`'light'`	标签主题（status-map 单项 effect 优先于全局）
size	`'large' \| 'default' \| 'small'`	`'small'`	标签尺寸（表格内常用）
dot	`boolean`	`false`	圆点风格：彩色圆点 + 纯文本（无边框无底色），高密度列表更轻量

BizStatusTagRawItem： { text: string; type?; effect?; color?; closable? }——组模式直传标签对象（数组项为对象时免字典 / 映射直接渲染，closable 单项优先于组件全局开关）。

BizStatusMapItem： { text: string; type?: 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'; effect?: 'light' \| 'dark' \| 'plain'; color?: string }（text 文案、type EP 色系、effect 单项主题、color 实色；旧导出名 BizStatusTagItem 为其别名）

BizStatusFieldNames： { label?: string; value?: string; color?: string; type?: string }——字典数组字段名重映射，配合 dict 使用。

其余属性（round / hit...）经 v-bind="$attrs" 全量透传 el-tag，绑定在后的 attrs 可覆盖解析出的兜底样式。

Events

事件名	参数	说明
click	`(item: BizStatusDictItem \| undefined)`	标签点击外抛命中项（字典项原样；status-map 命中时为 `{ value, label, ...映射项 }` 合成对象；兜底为 undefined）；el-tag 其余原生事件经 $attrs 透传
remove	`(payload: BizStatusTagRemovePayload)`	组模式可关闭标签点击 × 时外抛 `{ item, value, index }`（对象直传时 item 为 `{ value, label, ...原对象 }`）；组件不改动数组，由父级维护增删

Slots

插槽名	作用域	说明
default	`{ item, value, label }`	标签内容接管（item 命中项 / value 码值 / label 解析文案），dot 圆点风格同样生效

Expose

属性/方法	类型	说明
getItem	`() => BizStatusDictItem \| undefined`	命中的数据项（status-map 命中时为合成对象；组模式为首项）
getLabel	`() => string`	解析出的标签文案（组模式为首项）
getResolved	`() => BizStatusResolved`	当前完整解析结果：`{ text, type, effect, color?, item?, closable?, source }`，source 为 `local / global / map / raw / fallback`（组模式为首项）
getResolvedList	`() => Array<BizStatusResolved & { value, index }>`	组模式逐项解析结果（value 为对象项的 text，index 为数组下标；单值模式为空数组）

TIP

全局字典经 configureBizDict(loader) 在应用启动时注入一次；clearBizDictCache 可在字典热更新后清缓存。详见指南《数据字典 useDict》。

BizStatusTag 状态标签 ​

基础用法（status-map 手传映射） ​

全局字典联动（dict-type） ​

本地字典（dict 直传） ​

三数据源级联与优先级 ​

field-names 字段名自定义 ​

color 实色标签 ​

type 色系 / effect / 尺寸 / attrs 透传 ​

未命中兜底 ​

高密度监控列表（dot 圆点风格） ​

订单/工单表格状态列（批量使用） ​

事件与插槽 ​

订单状态流转 ​

服务依赖树 ​

表格双状态列 ​

组模式：多标签并排 ​

组模式折叠（max + N） ​

组模式交互与插槽 ​

组模式直传字符串数组（免映射） ​

组模式直传标签对象 ​

组模式码值与对象混用 ​

组模式可关闭标签（closable + remove） ​

组模式弹层触发与位置 ​

组模式空态占位 ​

组模式尺寸档位 ​

表格标签列集成（折叠 + 移除实战） ​

Props ​

Events ​

Slots ​

Expose ​

BizStatusTag 状态标签

基础用法（status-map 手传映射）

全局字典联动（dict-type）

本地字典（dict 直传）

三数据源级联与优先级

field-names 字段名自定义

color 实色标签

type 色系 / effect / 尺寸 / attrs 透传

未命中兜底

高密度监控列表（dot 圆点风格）

订单/工单表格状态列（批量使用）

事件与插槽

订单状态流转

服务依赖树

表格双状态列

组模式：多标签并排

组模式折叠（max + N）

组模式交互与插槽

组模式直传字符串数组（免映射）

组模式直传标签对象

组模式码值与对象混用

组模式可关闭标签（closable + remove）

组模式弹层触发与位置

组模式空态占位

组模式尺寸档位

表格标签列集成（折叠 + 移除实战）

Props

Events

Slots

Expose