diff --git a/apps/web-naive/src/components/dict-tag/dict-tag.vue b/apps/web-naive/src/components/dict-tag/dict-tag.vue
new file mode 100644
index 000000000..50c3bf5a5
--- /dev/null
+++ b/apps/web-naive/src/components/dict-tag/dict-tag.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getDictObj } from '@vben/hooks';
+
+import { NTag } from 'naive-ui';
+
+interface DictTagProps {
+  /**
+   * 字典类型
+   */
+  type: string;
+  /**
+   * 字典值
+   */
+  value: any;
+  /**
+   * 图标
+   */
+  icon?: string;
+}
+
+const props = defineProps<DictTagProps>();
+
+/** 获取字典标签 */
+const dictTag = computed(() => {
+  const defaultDict = {
+    label: '',
+    colorType: 'primary',
+  };
+  // 校验参数有效性
+  if (!props.type || props.value === undefined || props.value === null) {
+    return defaultDict;
+  }
+
+  // 获取字典对象
+  const dict = getDictObj(props.type, String(props.value));
+  if (!dict) {
+    return defaultDict;
+  }
+
+  // 处理颜色类型
+  let colorType = dict.colorType;
+  switch (colorType) {
+    case 'danger': {
+      colorType = 'danger';
+      break;
+    }
+    case 'info': {
+      colorType = 'info';
+      break;
+    }
+    case 'primary': {
+      colorType = 'primary';
+      break;
+    }
+    case 'success': {
+      colorType = 'success';
+      break;
+    }
+    case 'warning': {
+      colorType = 'warning';
+      break;
+    }
+    default: {
+      if (!colorType) {
+        colorType = 'primary';
+      }
+    }
+  }
+
+  return {
+    label: dict.label || '',
+    colorType,
+  };
+});
+</script>
+
+<template>
+  <NTag v-if="dictTag.label" :type="dictTag.colorType as any">
+    {{ dictTag.label }}
+  </NTag>
+</template>
diff --git a/apps/web-naive/src/components/dict-tag/index.ts b/apps/web-naive/src/components/dict-tag/index.ts
new file mode 100644
index 000000000..881265a39
--- /dev/null
+++ b/apps/web-naive/src/components/dict-tag/index.ts
@@ -0,0 +1 @@
+export { default as DictTag } from './dict-tag.vue';