feat：增加 DictTag 字典标签组件

apps/web-antd/src/adapter/vxe-table.ts

@@ -5,9 +5,8 @@ import { $te } from '@vben/locales';
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
 import { isFunction, isString } from '@vben/utils';
 
-import { Button, Image, Popconfirm, Switch, Tag } from 'ant-design-vue';
-
-import { getDictObj } from '#/utils/dict';
+import { Button, Image, Popconfirm, Switch } from 'ant-design-vue';
+import { DictTag } from '#/components/dict-tag';
 
 import { useVbenForm } from './form';
 import type { Recordable } from '@vben/types';
@@ -81,7 +80,6 @@ setupVbenVxeTable({
     });
 
     // 表格配置项可以用 cellRender: { name: 'CellDict', props:{dictType: ''} },
-    // TODO @芋艿：后续研究下，看看有没优解
     vxeUI.renderer.add('CellDict', {
       renderTableDefault(renderOpts, params) {
         const { props } = renderOpts;
@@ -89,20 +87,11 @@ setupVbenVxeTable({
         if (!props) {
           return '';
         }
-        const dict = getDictObj(props.type, row[column.field]);
-        // 转义
-        if (dict) {
-          if (`${dict.colorType}` === 'primary') dict.colorType = 'processing';
-          else if (`${dict.colorType}` === 'danger') dict.colorType = 'error';
-          else if (`${dict.colorType}` === 'info') dict.colorType = 'default';
-          else if (!dict.colorType) dict.colorType = 'default';
-          return h(
-            Tag,
-            { color: dict.colorType },
-            { default: () => dict.label },
-          );
-        }
-        return '';
+        // 使用 DictTag 组件替代原来的实现
+        return h(DictTag, {
+          type: props.type,
+          value: row[column.field]?.toString(),
+        });
       },
     });
 

apps/web-antd/src/components/dict-tag/index.ts

@@ -0,0 +1,3 @@
+import DictTag from './src/DictTag.vue'
+
+export { DictTag }

apps/web-antd/src/components/dict-tag/src/DictTag.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, defineProps } from 'vue'
+import { Tag } from 'ant-design-vue'
+// import { isHexColor } from '@/utils/color' // TODO @芋艿：【可优化】增加 cssClass 的处理 https://gitee.com/yudaocode/yudao-ui-admin-vben/blob/v2.4.1/src/components/DictTag/src/DictTag.vue#L60
+import { getDictObj } from '#/utils/dict'
+
+interface DictTagProps {
+  /**
+   * 字典类型
+   */
+  type: string
+  /**
+   * 字典值
+   */
+  value: any
+  /**
+   * 图标
+   */
+  icon?: string
+}
+
+const props = defineProps<DictTagProps>()
+
+/** 获取字典标签 */
+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
+  }
+
+  // 处理颜色类型
+  let colorType = dict.colorType
+  if (colorType === 'primary') {
+    colorType = 'processing'
+  } else if (colorType === 'danger') {
+    colorType = 'error'
+  } else if (colorType === 'info') {
+    colorType = 'default'
+  } else if (!colorType) {
+    colorType = 'default'
+  }
+  
+  return {
+    label: dict.label || '',
+    colorType
+  }
+})
+</script>
+
+<template>
+  <Tag v-if="dictTag" :color="dictTag.colorType">
+    {{ dictTag.label }}
+  </Tag>
+</template>

apps/web-antd/src/views/system/mail/log/modules/detail.vue

@@ -2,11 +2,12 @@
 import type { SystemMailLogApi } from '#/api/system/mail/log';
 
 import { useVbenModal } from '@vben/common-ui';
-import { Descriptions, Tag } from 'ant-design-vue';
+import { Descriptions } from 'ant-design-vue';
+import { DictTag } from '#/components/dict-tag';
 
 import { ref } from 'vue';
 import { formatDateTime } from '@vben/utils';
-import { DICT_TYPE, getDictLabel } from '#/utils/dict';
+import { DICT_TYPE } from '#/utils/dict';
 
 const formData = ref<SystemMailLogApi.SystemMailLog>();
 
@@ -63,10 +64,7 @@ const [Modal, modalApi] = useVbenModal({
           <div v-html="formData?.templateContent"></div>
         </Descriptions.Item>
         <Descriptions.Item label="发送状态">
-          <!-- TODO @芋艿: 数据字典-->
-          <Tag color="processing">
-            {{ getDictLabel(DICT_TYPE.SYSTEM_MAIL_SEND_STATUS, formData?.sendStatus ) }}
-          </Tag>
+          <DictTag :type="DICT_TYPE.SYSTEM_MAIL_SEND_STATUS" :value="formData?.sendStatus" />
         </Descriptions.Item>
         <Descriptions.Item label="发送时间">
           {{ formatDateTime(formData?.sendTime || '') }}

apps/web-antd/src/views/system/notify/message/modules/detail.vue

@@ -2,13 +2,14 @@
 import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 
 import { useVbenModal } from '@vben/common-ui';
-import { Descriptions, Tag } from 'ant-design-vue';
+import { Descriptions } from 'ant-design-vue';
+import { DictTag } from '#/components/dict-tag';
 
 import { ref } from 'vue';
 import { formatDateTime } from '@vben/utils';
-import { DICT_TYPE, getDictLabel } from '#/utils/dict';
+import { DICT_TYPE } from '#/utils/dict';
 
-const messageData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();
+const formData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();
 
 const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
@@ -22,7 +23,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     try {
-      messageData.value = data;
+      formData.value = data;
     } finally {
       modalApi.lock(false);
     }
@@ -33,48 +34,39 @@ const [Modal, modalApi] = useVbenModal({
 <template>
   <Modal title="站内信详情" class="w-1/2">
     <Descriptions bordered :column="1" size="middle" class="mx-4">
-      <Descriptions.Item label="编号">{{ messageData?.id }}</Descriptions.Item>
+      <Descriptions.Item label="编号">{{ formData?.id }}</Descriptions.Item>
       <Descriptions.Item label="用户类型">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.USER_TYPE, messageData?.userType) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.USER_TYPE" :value="formData?.userType" />
       </Descriptions.Item>
       <Descriptions.Item label="用户编号">
-        {{ messageData?.userId }}
+        {{ formData?.userId }}
       </Descriptions.Item>
       <Descriptions.Item label="模版编号">
-        {{ messageData?.templateId }}
+        {{ formData?.templateId }}
       </Descriptions.Item>
       <Descriptions.Item label="模板编码">
-        {{ messageData?.templateCode }}
+        {{ formData?.templateCode }}
       </Descriptions.Item>
       <Descriptions.Item label="发送人名称">
-        {{ messageData?.templateNickname }}
+        {{ formData?.templateNickname }}
       </Descriptions.Item>
       <Descriptions.Item label="模版内容">
-        {{ messageData?.templateContent }}
+        {{ formData?.templateContent }}
       </Descriptions.Item>
       <Descriptions.Item label="模版参数">
-        {{ messageData?.templateParams }}
+        {{ formData?.templateParams }}
       </Descriptions.Item>
       <Descriptions.Item label="模版类型">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE, messageData?.templateType) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="formData?.templateType" />
       </Descriptions.Item>
       <Descriptions.Item label="是否已读">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.INFRA_BOOLEAN_STRING, messageData?.readStatus) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="formData?.readStatus" />
       </Descriptions.Item>
       <Descriptions.Item label="阅读时间">
-        {{ formatDateTime(messageData?.readTime || '') }}
+        {{ formatDateTime(formData?.readTime || '') }}
       </Descriptions.Item>
       <Descriptions.Item label="创建时间">
-        {{ formatDateTime(messageData?.createTime || '') }}
+        {{ formatDateTime(formData?.createTime || '') }}
       </Descriptions.Item>
     </Descriptions>
   </Modal>

apps/web-antd/src/views/system/notify/my/modules/detail.vue

@@ -2,13 +2,14 @@
 import type { SystemNotifyMessageApi } from '#/api/system/notify/message';
 
 import { useVbenModal } from '@vben/common-ui';
-import { Descriptions, Tag } from 'ant-design-vue';
+import { Descriptions } from 'ant-design-vue';
+import { DictTag } from '#/components/dict-tag';
 
 import { ref } from 'vue';
 import { formatDateTime } from '@vben/utils';
-import { DICT_TYPE, getDictLabel } from '#/utils/dict';
+import { DICT_TYPE } from '#/utils/dict';
 
-const messageData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();
+const formData = ref<SystemNotifyMessageApi.SystemNotifyMessage>();
 
 const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
@@ -22,7 +23,7 @@ const [Modal, modalApi] = useVbenModal({
     }
     modalApi.lock();
     try {
-      messageData.value = data;
+      formData.value = data;
     } finally {
       modalApi.lock(false);
     }
@@ -33,58 +34,39 @@ const [Modal, modalApi] = useVbenModal({
 <template>
   <Modal title="我的站内信">
     <Descriptions bordered :column="1" size="middle" class="mx-4">
-      <Descriptions.Item label="编号">{{ messageData?.id }}</Descriptions.Item>
+      <Descriptions.Item label="编号">{{ formData?.id }}</Descriptions.Item>
       <Descriptions.Item label="用户类型">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.USER_TYPE, messageData?.userType) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.USER_TYPE" :value="formData?.userType" />
       </Descriptions.Item>
       <Descriptions.Item label="用户编号">
-        {{ messageData?.userId }}
+        {{ formData?.userId }}
       </Descriptions.Item>
       <Descriptions.Item label="模版编号">
-        {{ messageData?.templateId }}
+        {{ formData?.templateId }}
       </Descriptions.Item>
       <Descriptions.Item label="模板编码">
-        {{ messageData?.templateCode }}
+        {{ formData?.templateCode }}
       </Descriptions.Item>
       <Descriptions.Item label="发送人名称">
-        {{ messageData?.templateNickname }}
+        {{ formData?.templateNickname }}
       </Descriptions.Item>
       <Descriptions.Item label="模版内容">
-        {{ messageData?.templateContent }}
+        {{ formData?.templateContent }}
       </Descriptions.Item>
       <Descriptions.Item label="模版参数">
-        {{ messageData?.templateParams }}
+        {{ formData?.templateParams }}
       </Descriptions.Item>
       <Descriptions.Item label="模版类型">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{
-            getDictLabel(
-              DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
-              messageData?.templateType,
-            )
-          }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE" :value="formData?.templateType" />
       </Descriptions.Item>
       <Descriptions.Item label="是否已读">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{
-            getDictLabel(
-              DICT_TYPE.INFRA_BOOLEAN_STRING,
-              messageData?.readStatus,
-            )
-          }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="formData?.readStatus" />
       </Descriptions.Item>
       <Descriptions.Item label="阅读时间">
-        {{ formatDateTime(messageData?.readTime || '') }}
+        {{ formatDateTime(formData?.readTime || '') }}
       </Descriptions.Item>
       <Descriptions.Item label="创建时间">
-        {{ formatDateTime(messageData?.createTime || '') }}
+        {{ formatDateTime(formData?.createTime || '') }}
       </Descriptions.Item>
     </Descriptions>
   </Modal>

apps/web-antd/src/views/system/sms/log/modules/detail.vue

@@ -6,7 +6,8 @@ import { Descriptions, Tag } from 'ant-design-vue';
 
 import { ref } from 'vue';
 import { formatDateTime } from '@vben/utils';
-import { DICT_TYPE, getDictLabel } from '#/utils/dict';
+import { DICT_TYPE } from '#/utils/dict';
+import { DictTag } from '#/components/dict-tag';
 
 const formData = ref<SystemSmsLogApi.SystemSmsLog>();
 
@@ -46,19 +47,13 @@ const [Modal, modalApi] = useVbenModal({
         {{ formData?.templateId }}
       </Descriptions.Item>
       <Descriptions.Item label="模板类型">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, formData?.templateType) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="formData?.templateType" />
       </Descriptions.Item>
       <Descriptions.Item label="短信内容">
         {{ formData?.templateContent }}
       </Descriptions.Item>
       <Descriptions.Item label="发送状态">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.SYSTEM_SMS_SEND_STATUS, formData?.sendStatus) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="formData?.sendStatus" />
       </Descriptions.Item>
       <Descriptions.Item label="发送时间">
         {{ formatDateTime(formData?.sendTime || '') }}
@@ -70,10 +65,7 @@ const [Modal, modalApi] = useVbenModal({
         {{ formData?.apiSendMsg }}
       </Descriptions.Item>
       <Descriptions.Item label="接收状态">
-        <!-- TODO @芋艿: 数据字典-->
-        <Tag color="processing">
-          {{ getDictLabel(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS, formData?.receiveStatus) }}
-        </Tag>
+        <DictTag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="formData?.receiveStatus" />
       </Descriptions.Item>
       <Descriptions.Item label="接收时间">
         {{ formatDateTime(formData?.receiveTime || '') }}