From c14e0d04d0f3c4389f47bc787b7e26d89ed0ff48 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 12 Dec 2025 19:16:02 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E5=A2=9E=E5=8A=A0=20components=20?=
 =?UTF-8?q?=E5=AD=97=E5=85=B8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dict-tag/dict-tag.vue | 62 ++++++++++++++++++++++++++++
 src/components/dict-tag/index.ts     |  1 +
 2 files changed, 63 insertions(+)
 create mode 100644 src/components/dict-tag/dict-tag.vue
 create mode 100644 src/components/dict-tag/index.ts

diff --git a/src/components/dict-tag/dict-tag.vue b/src/components/dict-tag/dict-tag.vue
new file mode 100644
index 0000000..7eac135
--- /dev/null
+++ b/src/components/dict-tag/dict-tag.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { TagType } from 'wot-design-uni/components/wd-tag/types'
+import { computed } from 'vue'
+
+import { getDictObj } from '@/hooks/useDict'
+
+interface DictTagProps {
+  type: string // 字典类型
+  value: any // 字典值
+  plain?: boolean // 是否镂空，默认为 true
+}
+
+const props = withDefaults(defineProps<DictTagProps>(), {
+  plain: true,
+})
+
+/**
+ * 后端颜色类型 => wd-tag 的 type 映射
+ *
+ * 后端可配置：default、primary、success、info、warning、danger
+ * wd-tag 支持：default、primary、success、warning、danger
+ * 匹配不上时默认用 default
+ */
+const COLOR_TYPE_MAP: Record<string, TagType> = {
+  default: 'default',
+  primary: 'primary',
+  success: 'success',
+  info: 'default', // wd-tag 无 info，映射为 default
+  warning: 'warning',
+  danger: 'danger',
+}
+
+/** 获取字典标签 */
+const dictTag = computed(() => {
+  // 校验参数有效性
+  if (!props.type || props.value === undefined || props.value === null) {
+    return null
+  }
+  // 获取字典对象
+  const dict = getDictObj(props.type, String(props.value))
+  if (!dict) {
+    return null
+  }
+
+  return {
+    label: dict.label || '',
+    tagType: COLOR_TYPE_MAP[dict.colorType || ''] || 'default',
+    cssClass: dict.cssClass,
+  }
+})
+</script>
+
+<template>
+  <wd-tag
+    v-if="dictTag"
+    :type="dictTag.tagType"
+    :plain="plain"
+    :custom-class="dictTag.cssClass"
+  >
+    {{ dictTag.label }}
+  </wd-tag>
+</template>
diff --git a/src/components/dict-tag/index.ts b/src/components/dict-tag/index.ts
new file mode 100644
index 0000000..e97e51c
--- /dev/null
+++ b/src/components/dict-tag/index.ts
@@ -0,0 +1 @@
+export { default as DictTag } from './dict-tag.vue'