refactor(views): 优化组件代码结构，使用tsx和计算属性重构描述列表

重构多个组件中的描述列表，使用tsx语法和计算属性items来简化模板代码统一调整样式类名顺序，提升代码可读性和维护性
2026-01-13 21:45:21 +08:00 · 2026-01-13 21:45:21 +08:00 · 5c30bcdefa
commit 5c30bcdefa
parent b427a77fc1
6 changed files with 141 additions and 84 deletions
--- a/apps/web-antd/src/views/_core/profile/profile-panel.vue
+++ b/apps/web-antd/src/views/_core/profile/profile-panel.vue
@ -1,17 +1,13 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { DescriptionsProps } from 'antdv-next';
+
 import type { UserProfile } from '#/api/system/profile/model';

 import { computed } from 'vue';

 import { preferences, usePreferences } from '@vben/preferences';

-import {
-  Card,
-  Descriptions,
-  DescriptionsItem,
-  Tag,
-  Tooltip,
-} from 'antdv-next';
+import { Card, Descriptions, Tag, Tooltip } from 'antdv-next';

 import { userUpdateAvatar } from '#/api/system/profile';
 import { CropperAvatar } from '#/components/cropper';
@ -32,6 +28,42 @@ const poetrySrc = computed(() => {
  const color = isDark.value ? 'white' : 'gray';
  return `https://v2.jinrishici.com/one.svg?font-size=12&color=${color}`;
 });
+
+const items = computed<DescriptionsProps['items']>(() => {
+  if (!props.profile) {
+    return [];
+  }
+  const { profile } = props;
+  return [
+    {
+      content: profile.user.userName,
+      label: '账号',
+    },
+    {
+      content: profile.user.phonenumber || '未绑定手机号',
+      label: '手机号码',
+    },
+    {
+      content: profile.user.email || '未绑定邮箱',
+      label: '邮箱',
+    },
+    {
+      content: (
+        <>
+          <Tag color="processing">{profile.user.deptName ?? '未分配部门'}</Tag>
+          {profile.postGroup && (
+            <Tag color="processing">{profile.postGroup}</Tag>
+          )}
+        </>
+      ),
+      label: '部门',
+    },
+    {
+      content: profile.user.loginDate,
+      label: '上次登录',
+    },
+  ];
+});
 </script>

 <template>
@ -48,7 +80,7 @@ const poetrySrc = computed(() => {
          />
        </Tooltip>
        <div class="flex flex-col items-center gap-[8px]">
-          <span class="text-foreground text-xl font-bold">
+          <span class="text-xl font-bold text-foreground">
            {{ profile.user.nickName ?? '未知' }}
          </span>
          <!-- https://www.jinrishici.com/doc/#image -->
@ -56,28 +88,7 @@ const poetrySrc = computed(() => {
        </div>
      </div>
      <div class="px-[24px]">
-        <Descriptions :column="1">
-          <DescriptionsItem label="账号">
-            {{ profile.user.userName }}
-          </DescriptionsItem>
-          <DescriptionsItem label="手机号码">
-            {{ profile.user.phonenumber || '未绑定手机号' }}
-          </DescriptionsItem>
-          <DescriptionsItem label="邮箱">
-            {{ profile.user.email || '未绑定邮箱' }}
-          </DescriptionsItem>
-          <DescriptionsItem label="部门">
-            <Tag color="processing">
-              {{ profile.user.deptName ?? '未分配部门' }}
-            </Tag>
-            <Tag v-if="profile.postGroup" color="processing">
-              {{ profile.postGroup }}
-            </Tag>
-          </DescriptionsItem>
-          <DescriptionsItem label="上次登录">
-            {{ profile.user.loginDate }}
-          </DescriptionsItem>
-        </Descriptions>
+        <Descriptions :column="1" :items="items" />
      </div>
    </div>
  </Card>
--- a/apps/web-antd/src/views/_core/profile/setting-panel.vue
+++ b/apps/web-antd/src/views/_core/profile/setting-panel.vue
@ -31,7 +31,7 @@ const settingList = [
 </script>

 <template>
-  <Tabs class="bg-background rounded-[var(--radius)] px-[16px] lg:flex-1">
+  <Tabs class="rounded-[var(--radius)] bg-background px-[16px] lg:flex-1">
    <TabPane v-for="item in settingList" :key="item.key" :tab="item.name">
      <component :is="item.component" v-bind="$attrs" />
    </TabPane>
--- a/apps/web-antd/src/views/workflow/components/approval-timeline-item.vue
+++ b/apps/web-antd/src/views/workflow/components/approval-timeline-item.vue
@ -12,7 +12,7 @@ import {
  UsergroupAddOutlined,
  UserOutlined,
 } from '@ant-design/icons-vue';
-import { Avatar, TimelineItem } from 'antdv-next';
+import { Avatar } from 'antdv-next';

 import { ossInfo } from '#/api/system/oss';
 import { renderDict } from '#/utils/render';
@ -51,8 +51,8 @@ const isMultiplePerson = computed(
 </script>

 <template>
-  <TimelineItem>
-    <template #dot>
+  <div>
+    <template>
      <div class="relative rounded-full border">
        <Avatar
          class="bg-primary-400"
@ -63,7 +63,7 @@ const isMultiplePerson = computed(
        <VbenAvatar
          v-else
          :alt="item?.approveName ?? 'unknown'"
-          class="bg-primary size-[36px] rounded-full text-white"
+          class="size-[36px] rounded-full bg-primary text-white"
          src=""
        />
        <div
@ -86,12 +86,12 @@ const isMultiplePerson = computed(
      <div :class="cn('mt-2 flex flex-wrap gap-2')" v-if="isMultiplePerson">
        <!-- 如果昵称中带, 这里的处理是不准确的 -->
        <div
-          :class="cn('bg-foreground/5 flex items-center rounded-full', 'p-1')"
+          :class="cn('flex items-center rounded-full bg-foreground/5', 'p-1')"
          v-for="(name, index) in item.approveName.split(',')"
          :key="index"
        >
          <Avatar
-            class="bg-primary-400 flex items-center justify-center"
+            class="flex items-center justify-center bg-primary-400"
            :size="24"
            :icon="h(UserOutlined)"
          />
@ -107,7 +107,7 @@ const isMultiplePerson = computed(
        :class="cn('flex gap-2')"
      >
        <MessageOutlined />
-        <div class="text-foreground/75 break-all">{{ item.message }}</div>
+        <div class="break-all text-foreground/75">{{ item.message }}</div>
      </div>
      <div v-if="attachmentInfo.length > 0" class="flex flex-wrap gap-2">
        <!-- 这里下载的文件名不是原始文件名 -->
@ -125,5 +125,5 @@ const isMultiplePerson = computed(
        </a>
      </div>
    </div>
-  </TimelineItem>
+  </div>
 </template>
--- a/apps/web-antd/src/views/workflow/components/approval-timeline.vue
+++ b/apps/web-antd/src/views/workflow/components/approval-timeline.vue
@ -1,6 +1,10 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { TimelineProps } from 'antdv-next';
+
 import type { Flow } from '#/api/workflow/instance/model';

+import { computed, h } from 'vue';
+
 import { Empty, Timeline } from 'antdv-next';

 import ApprovalTimelineItem from './approval-timeline-item.vue';
@ -9,12 +13,18 @@ interface Props {
  list: Flow[];
 }

-defineProps<Props>();
+const props = defineProps<Props>();
+
+const items = computed<TimelineProps['items']>(() => {
+  const { list } = props;
+  return list.map((item) => ({
+    key: item.id,
+    content: h(ApprovalTimelineItem, { item }),
+  }));
+});
 </script>

 <template>
-  <Timeline v-if="list.length > 0">
-    <ApprovalTimelineItem v-for="item in list" :key="item.id" :item="item" />
-  </Timeline>
+  <Timeline v-if="list.length > 0" :items="items" />
  <Empty v-else />
 </template>
--- a/apps/web-antd/src/views/workflow/components/flow-interfere-modal.vue
+++ b/apps/web-antd/src/views/workflow/components/flow-interfere-modal.vue
@ -1,4 +1,6 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { DescriptionsProps } from 'antdv-next';
+
 import type { User } from '#/api/system/user/model';
 import type { TaskInfo } from '#/api/workflow/task/model';

@ -6,7 +8,7 @@ import { computed, ref } from 'vue';

 import { useVbenModal } from '@vben/common-ui';

-import { Descriptions, DescriptionsItem, Modal } from 'antdv-next';
+import { Descriptions, Modal } from 'antdv-next';

 import {
  getTaskByTaskId,
@ -127,30 +129,50 @@ function handleReductionSignature(userList: User[]) {
    },
  });
 }
+
+const items = computed<DescriptionsProps['items']>(() => {
+  if (!taskInfo.value) {
+    return [];
+  }
+  const data = taskInfo.value;
+  return [
+    {
+      content: data.nodeName,
+      label: '任务名称',
+    },
+    {
+      content: data.nodeCode,
+      label: '节点编码',
+    },
+    {
+      content: data.createTime,
+      label: '开始时间',
+    },
+    {
+      content: data.instanceId,
+      label: '流程实例ID',
+    },
+    {
+      content: data.version,
+      label: '版本号',
+    },
+    {
+      content: data.businessId,
+      label: '业务ID',
+    },
+  ];
+});
 </script>

 <template>
  <BasicModal>
-    <Descriptions v-if="taskInfo" :column="2" bordered size="small">
-      <DescriptionsItem label="任务名称">
-        {{ taskInfo.nodeName }}
-      </DescriptionsItem>
-      <DescriptionsItem label="节点编码">
-        {{ taskInfo.nodeCode }}
-      </DescriptionsItem>
-      <DescriptionsItem label="开始时间">
-        {{ taskInfo.createTime }}
-      </DescriptionsItem>
-      <DescriptionsItem label="流程实例ID">
-        {{ taskInfo.instanceId }}
-      </DescriptionsItem>
-      <DescriptionsItem label="版本号">
-        {{ taskInfo.version }}
-      </DescriptionsItem>
-      <DescriptionsItem label="业务ID">
-        {{ taskInfo.businessId }}
-      </DescriptionsItem>
-    </Descriptions>
+    <Descriptions
+      v-if="taskInfo"
+      :column="2"
+      :items="items"
+      bordered
+      size="small"
+    />
    <TransferModal mode="single" @finish="handleTransfer" />
    <AddSignatureModal mode="multiple" @finish="handleAddSignature" />
    <ReductionSignatureModal
--- a/apps/web-antd/src/views/workflow/leave/leave-description.vue
+++ b/apps/web-antd/src/views/workflow/leave/leave-description.vue
@ -1,9 +1,11 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { DescriptionsProps } from 'antdv-next';
+
 import type { LeaveVO } from '../leave/api/model';

 import { computed, onMounted, shallowRef } from 'vue';

-import { Descriptions, DescriptionsItem, Skeleton } from 'antdv-next';
+import { Descriptions, Skeleton } from 'antdv-next';
 import dayjs from 'dayjs';

 import { leaveInfo } from './api';
@ -32,25 +34,37 @@ const leaveType = computed(() => {
 function formatDate(date: string) {
  return dayjs(date).format('YYYY-MM-DD');
 }
+
+const items = computed<DescriptionsProps['items']>(() => {
+  if (!data.value) {
+    return [];
+  }
+  const info = data.value;
+  return [
+    {
+      content: leaveType.value,
+      label: '请假类型',
+    },
+    {
+      content: `${formatDate(info.startDate)} - ${formatDate(info.endDate)}`,
+      label: '请假时间',
+    },
+    {
+      content: `${info.leaveDays}天`,
+      label: '请假时长',
+    },
+    {
+      content: info.remark || '无',
+      label: '请假原因',
+    },
+  ];
+});
 </script>

 <template>
  <div class="rounded-[6px] border p-2">
-    <Descriptions v-if="data" :column="1" size="middle">
-      <DescriptionsItem label="请假类型">
-        {{ leaveType }}
-      </DescriptionsItem>
-      <DescriptionsItem label="请假时间">
-        {{ formatDate(data.startDate) }} - {{ formatDate(data.endDate) }}
-      </DescriptionsItem>
-      <DescriptionsItem label="请假时长">
-        {{ data.leaveDays }}天
-      </DescriptionsItem>
-      <DescriptionsItem label="请假原因">
-        {{ data.remark || '无' }}
-      </DescriptionsItem>
-    </Descriptions>
+    <Descriptions v-if="data" :column="1" :items="items" size="middle" />

-    <Skeleton active v-else />
+    <Skeleton v-else active />
  </div>
 </template>