feat: dict demo

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

@@ -6,7 +6,7 @@ import type { DictFallback } from './type';
 
 import type { DictData } from '#/api/system/dict/dict-data-model';
 
-import { computed, defineComponent, h } from 'vue';
+import { computed, defineComponent, h, isVNode } from 'vue';
 
 import { Spin, Tag } from 'ant-design-vue';
 import { isFunction, isString } from 'lodash-es';
@@ -83,7 +83,7 @@ export default defineComponent({
     };
   },
   render() {
-    const { color, cssClass, label, loading, fallback, value } = this;
+    const { color, cssClass, label, loading, fallback, value, $slots } = this;
 
     /**
      * 字典list为0 加载中
@@ -101,9 +101,17 @@ export default defineComponent({
      * 可为string/Vnode
      */
     if (label === null) {
-      // VNode
+      // 优先返回slot
+      if ($slots.fallback) {
+        return $slots.fallback(value);
+      }
+      // VNode / String
       if (isFunction(fallback)) {
-        return h(fallback(value));
+        const rValue = fallback(value);
+        if (isVNode(rValue)) {
+          return h(rValue);
+        }
+        return <div>{rValue}</div>;
       }
       // 默认显示 unknown 文案
       if (isString(fallback)) {

apps/web-antd/src/components/dict/src/type.d.ts

@@ -2,4 +2,6 @@
  * fallback的渲染
  * 可返回 字符串/Vnode
  */
-export type DictFallback = ((current: number | string) => VNode) | string;
+export type DictFallback =
+  | ((current: number | string) => string | VNode)
+  | string;

apps/web-antd/src/views/演示使用自行删除/dict/index.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { h, ref } from 'vue';
+
+import { CodeMirror, Page } from '@vben/common-ui';
+import { DictEnum } from '@vben/constants';
+
+import {
+  Alert,
+  Card,
+  Descriptions,
+  DescriptionsItem,
+  RadioGroup,
+  Select,
+  Space,
+} from 'ant-design-vue';
+import { repeat } from 'lodash-es';
+
+import { DictTag } from '#/components/dict';
+import { getDictOptions } from '#/utils/dict';
+
+const options = getDictOptions(DictEnum.SYS_COMMON_STATUS);
+
+const value = ref('1');
+
+const getOptionsCode = `
+const options = getDictOptions(DictEnum.SYS_COMMON_STATUS);
+`;
+const mountCode = `
+const options = reactive([]);
+onMounted(async () => {
+  const resp = await dictDataInfo(DictEnum.SYS_COMMON_STATUS);
+  options.push(...resp);
+})
+`;
+</script>
+
+<template>
+  <Page content-class="flex flex-col gap-4">
+    <Card size="small" title="核心逻辑">
+      <p class="mb-2">
+        你可以简单理解为getDictOptions是以下代码的快捷方式(还包括对并发和缓存的处理)
+      </p>
+      <div class="grid grid-cols-2 gap-4">
+        <CodeMirror readonly :model-value="getOptionsCode" language="js" />
+        <CodeMirror readonly :model-value="mountCode" language="js" />
+      </div>
+    </Card>
+
+    <Card size="small">
+      <template #title>
+        选择器组件使用
+        <a
+          href="https://dapdap.top/function/dict.html"
+          class="text-primary"
+          target="_blank"
+        >
+          文档参考
+        </a>
+      </template>
+      <Space>
+        <Select v-model:value="value" :options="options" />
+        <RadioGroup v-model:value="value" :options="options" />
+        渲染: <DictTag :value="value" :dicts="options" />
+      </Space>
+      <Alert
+        class="mt-2"
+        show-icon
+        type="success"
+        message="getDictOptions返回值为reactive 可直接绑定使用!"
+      />
+      <Alert
+        class="mt-2"
+        show-icon
+        type="error"
+        message="getDictOptions内部为异步实现 不要使用它参与业务运算!"
+      />
+    </Card>
+
+    <Card size="small" title="字典标签 - 未匹配到值的fallback">
+      <Descriptions :column="1">
+        <DescriptionsItem label="默认为unknown">
+          <DictTag :dicts="options" value="error" />
+        </DescriptionsItem>
+
+        <DescriptionsItem label="直接返回string">
+          <DictTag :dicts="options" value="error" fallback="自定义的fallback" />
+        </DescriptionsItem>
+
+        <DescriptionsItem label="函数返回string">
+          <DictTag
+            :dicts="options"
+            value="error"
+            :fallback="(v) => repeat(String(v), 5)"
+          />
+        </DescriptionsItem>
+
+        <DescriptionsItem label="函数返回VNode">
+          <DictTag
+            :dicts="options"
+            value="error"
+            :fallback="
+              (v) => h('span', { class: 'text-red-500' }, `${v} 没有匹配到值`)
+            "
+          />
+        </DescriptionsItem>
+
+        <DescriptionsItem label="使用fallback插槽">
+          <DictTag :dicts="options" value="error">
+            <template #fallback="v">
+              <span class="text-red-500"> {{ v }} 跟上面相同的写法 </span>
+            </template>
+          </DictTag>
+        </DescriptionsItem>
+      </Descriptions>
+    </Card>
+  </Page>
+</template>