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

重构多个组件中的描述列表，使用tsx语法和计算属性items来简化模板代码
统一调整样式类名顺序，提升代码可读性和维护性

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>

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>