feat: 字典功能

apps/web-antd/src/components/Dict/index.ts

@@ -0,0 +1,5 @@
+import { withInstall } from '#/utils';
+
+import dictTag from './src/index.vue';
+
+export const DictTag = withInstall(dictTag);

apps/web-antd/src/components/Dict/src/data.tsx

@@ -0,0 +1,44 @@
+import { type VNode } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+interface TagType {
+  [key: string]: { color: string; label: string };
+}
+
+export const tagTypes: TagType = {
+  cyan: { color: 'cyan', label: 'cyan' },
+  danger: { color: 'error', label: '危险(danger)' },
+  /** 由于和elementUI不同 用于替换颜色 */
+  default: { color: 'default', label: '默认(default)' },
+  green: { color: 'green', label: 'green' },
+  info: { color: 'default', label: '信息(info)' },
+  orange: { color: 'orange', label: 'orange' },
+  /** 自定义预设 color可以为16进制颜色 */
+  pink: { color: 'pink', label: 'pink' },
+  primary: { color: 'processing', label: '主要(primary)' },
+  purple: { color: 'purple', label: 'purple' },
+  red: { color: 'red', label: 'red' },
+  success: { color: 'success', label: '成功(success)' },
+  warning: { color: 'warning', label: '警告(warning)' },
+};
+
+// 字典选择使用 { label: string; value: string }[]
+interface Options {
+  label: string | VNode;
+  value: string;
+}
+
+export function tagSelectOptions() {
+  const selectArray: Options[] = [];
+  Object.keys(tagTypes).forEach((key) => {
+    if (!tagTypes[key]) return;
+    const label = tagTypes[key].label;
+    const color = tagTypes[key].color;
+    selectArray.push({
+      label: <Tag color={color}>{label}</Tag>,
+      value: key,
+    });
+  });
+  return selectArray;
+}

apps/web-antd/src/components/Dict/src/index.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { DictData } from '#/api/system/dict/dict-data-model';
+
+import { computed, watch } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+import { tagTypes } from './data';
+
+defineOptions({ name: 'DictTag' });
+
+const props = withDefaults(
+  defineProps<{
+    dicts: DictData[]; // dict数组
+    value: number | string; // value
+  }>(),
+  {
+    dicts: undefined,
+  },
+);
+
+watch(
+  () => props.dicts,
+  (value) => {
+    console.log('dicts change', value);
+  },
+);
+
+const color = computed<string>(() => {
+  // eslint-disable-next-line eqeqeq
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  const listClass = current?.listClass ?? '';
+  // 是否为默认的颜色
+  const isDefault = Reflect.has(tagTypes, listClass);
+  // 判断是默认还是自定义颜色
+  if (isDefault) {
+    // 这里做了antd - element-plus的兼容
+    return tagTypes[listClass]!.color;
+  }
+  return listClass;
+});
+
+const cssClass = computed<string>(() => {
+  // eslint-disable-next-line eqeqeq
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  return current?.cssClass ?? '';
+});
+
+const label = computed<number | string>(() => {
+  // eslint-disable-next-line eqeqeq
+  const current = props.dicts.find((item) => item.dictValue == props.value);
+  return current?.dictLabel ?? 'unknown';
+});
+</script>
+
+<template>
+  <div>
+    <Tag v-if="color" :class="cssClass" :color="color">{{ label }}</Tag>
+    <div v-if="!color" :class="cssClass">{{ label }}</div>
+  </div>
+</template>