From e73f90bb05e7dda4d23777bde0a6416cf04a623c Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Tue, 13 Jan 2026 21:56:15 +0800
Subject: [PATCH] =?UTF-8?q?refactor(dict):=20=E9=87=8D=E6=9E=84=E5=AD=97?=
 =?UTF-8?q?=E5=85=B8=E6=A0=87=E7=AD=BE=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20TSX=20=E8=AF=AD=E6=B3=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将字典标签的展示逻辑从模板语法重构为 TSX 语法，使用 Descriptions 组件的 items 属性统一管理
修复 class 属性顺序不一致的问题，提升代码可维护性
---
 .../src/views/演示使用自行删除/dict/index.vue | 90 +++++++++++--------
 1 file changed, 52 insertions(+), 38 deletions(-)

diff --git a/apps/web-antd/src/views/演示使用自行删除/dict/index.vue b/apps/web-antd/src/views/演示使用自行删除/dict/index.vue
index fd266424..73596591 100644
--- a/apps/web-antd/src/views/演示使用自行删除/dict/index.vue
+++ b/apps/web-antd/src/views/演示使用自行删除/dict/index.vue
@@ -1,4 +1,6 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { DescriptionsProps } from 'antdv-next';
+
 import { computed, h, ref } from 'vue';
 
 import { CodeMirror, Page } from '@vben/common-ui';
@@ -8,7 +10,6 @@ import {
   Alert,
   Card,
   Descriptions,
-  DescriptionsItem,
   RadioGroup,
   Select,
   Space,
@@ -53,6 +54,53 @@ const filterCode = `
   label: '状态',
 },
 `;
+
+const items: DescriptionsProps['items'] = [
+  {
+    content: <DictTag dicts={options} value="error" />,
+    label: '默认为unknown',
+  },
+  {
+    content: (
+      <DictTag dicts={options} fallback="自定义的fallback" value="error" />
+    ),
+    label: '直接返回string',
+  },
+  {
+    content: (
+      <DictTag
+        dicts={options}
+        fallback={(v: any) => repeat(String(v), 5)}
+        value="error"
+      />
+    ),
+    label: '函数返回string',
+  },
+  {
+    content: (
+      <DictTag
+        dicts={options}
+        fallback={(v: any) =>
+          h('span', { class: 'text-red-500' }, `${v} 没有匹配到值`)
+        }
+        value="error"
+      />
+    ),
+    label: '函数返回VNode',
+  },
+  {
+    content: (
+      <DictTag dicts={options} value="error">
+        {{
+          fallback: (v: any) => (
+            <span class="text-red-500"> {v} 跟上面相同的写法 </span>
+          ),
+        }}
+      </DictTag>
+    ),
+    label: '使用fallback插槽',
+  },
+];
 </script>
 
 <template>
@@ -98,41 +146,7 @@ const filterCode = `
     </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>
+      <Descriptions :column="1" :items="items" />
     </Card>
 
     <Card size="small" title="给 Form 组件赋值前 需要处理字典后展示的情况">
@@ -141,7 +155,7 @@ const filterCode = `
 
         这里使用computed过滤了部分选项
         <a
-          class="text-primary font-semibold"
+          class="font-semibold text-primary"
           target="_blank"
           href="https://dapdap.top/function/dict.html#%E7%BB%99-form-%E7%BB%84%E4%BB%B6%E8%B5%8B%E5%80%BC%E5%89%8D-%E9%9C%80%E8%A6%81%E5%81%9A%E5%A4%84%E7%90%86%E5%AD%97%E5%85%B8%E5%90%8E%E5%B1%95%E7%A4%BA%E7%9A%84%E6%83%85%E5%86%B5"
         >