# StatusTag 组件

状态标签组件，用于显示状态值对应的标签文本，支持自定义样式和颜色。

## 功能特性

- ✅ 支持标签样式和纯文本样式两种显示模式
- ✅ 支持自定义类型映射（typeMap）和颜色映射（colorMap）
- ✅ 内置默认样式（'1' → warning/dark，'0' → primary/light）
- ✅ 外部传入优先，支持覆盖默认样式

## Props

| 参数 | 说明 | 类型 | 默认值 | 必填 |
|------|------|------|--------|------|
| value | 当前状态值 | `string \| number` | `''` | 是 |
| options | 选项列表，格式：`[{label: '是', value: '1'}, {label: '否', value: '0'}]` | `Option[]` | `[]` | 是 |
| showTag | 是否显示标签样式（有边框和背景），`false` 为纯文本样式 | `boolean` | `true` | 否 |
| typeMap | 自定义类型映射，用于标签模式，如：`{'1': {type: 'warning', effect: 'dark'}}` | `Record<string \| number, { type: string; effect?: string }>` | `{}` | 否 |
| colorMap | 自定义颜色映射，用于纯文本模式，如：`{'1': '#E6A23C'}` | `Record<string \| number, string>` | `{}` | 否 |

### Option 接口

```typescript
interface Option {
  label: string      // 显示文本
  value: string | number  // 选项值
}
```

## 默认样式

组件内置了默认的样式映射，无需传入 `typeMap` 或 `colorMap` 即可使用：

- **值 '1' 或 1**：
  - 标签模式：`warning` 类型 + `dark` 效果（橙色深色）
  - 纯文本模式：`var(--el-color-warning)`（橙色）
  
- **值 '0' 或 0**：
  - 标签模式：`primary` 类型 + `light` 效果（蓝色浅色）
  - 纯文本模式：`var(--el-color-primary)`（蓝色）

- **其他值**：
  - 标签模式：`info` 类型 + `light` 效果（灰色）
  - 纯文本模式：默认文本颜色

## 使用示例

### 基础用法

```vue
<template>
  <StatusTag 
    :value="scope.row.tied"
    :options="YES_OR_NO"
  />
</template>

<script setup>
import StatusTag from '/@/components/StatusTag/index.vue'

const YES_OR_NO = [
  { label: '是', value: '1' },
  { label: '否', value: '0' }
]
</script>
```

### 纯文本模式（无边框和背景）

```vue
<StatusTag 
  :value="scope.row.tied"
  :options="YES_OR_NO"
  :show-tag="false"
/>
```

### 自定义类型映射

```vue
<StatusTag 
  :value="scope.row.status"
  :options="statusOptions"
  :type-map="{
    '1': { type: 'success', effect: 'dark' },
    '0': { type: 'danger', effect: 'light' }
  }"
/>
```

### 自定义颜色映射（纯文本模式）

```vue
<StatusTag 
  :value="scope.row.status"
  :options="statusOptions"
  :show-tag="false"
  :color-map="{
    '1': '#67C23A',
    '0': '#F56C6C'
  }"
/>
```

### 完整示例

```vue
<template>
  <el-table :data="tableData">
    <el-table-column label="是否退休" width="100" align="center">
      <template #default="scope">
        <StatusTag 
          :value="scope.row.tied"
          :options="YES_OR_NO"
        />
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
import global from '/@/components/tools/commondict.vue'

const StatusTag = defineAsyncComponent(() => import('/@/components/StatusTag/index.vue'))
const YES_OR_NO = global.YES_OR_NO
</script>
```

## 注意事项

1. **必须传入 `options`**：组件不提供默认选项，必须通过 `options` prop 传入选项列表
2. **值匹配**：组件会自动匹配字符串和数字类型的值（如 `'1'` 和 `1` 会被视为相同）
3. **样式优先级**：外部传入的 `typeMap` 和 `colorMap` 会覆盖默认样式
4. **未匹配值**：如果 `value` 在 `options` 中找不到对应项，会显示 `'-'`

## 样式说明

### 标签模式（showTag: true）

使用 Element Plus 的 `el-tag` 组件，支持所有 `el-tag` 的类型和效果：
- `type`: `success` | `info` | `warning` | `danger` | `primary`
- `effect`: `dark` | `light` | `plain`

### 纯文本模式（showTag: false）

使用纯文本显示，通过 CSS 颜色控制样式，支持任何颜色值（CSS 变量、十六进制、RGB 等）。

