refactor(monitor): 重构操作日志预览组件使用 TSX 语法

使用 TSX 语法重写操作日志预览组件，简化模板代码并提高可维护性
移除 DescriptionsItem 组件，改用 items 属性配置描述项

apps/web-antd/src/views/monitor/operlog/operation-preview-drawer.vue

@@ -1,4 +1,6 @@
-<script setup lang="ts">
+<script setup lang="tsx">
+import type { DescriptionsProps } from 'antdv-next';
+
 import type { OperationLog } from '#/api/monitor/operlog/model';
 
 import { computed, shallowRef } from 'vue';
@@ -6,7 +8,7 @@ import { computed, shallowRef } from 'vue';
 import { useVbenDrawer } from '@vben/common-ui';
 import { DictEnum } from '@vben/constants';
 
-import { Descriptions, DescriptionsItem, Tag } from 'antdv-next';
+import { Descriptions, Tag } from 'antdv-next';
 
 import {
   renderDict,
@@ -37,58 +39,93 @@ const actionInfo = computed(() => {
   const data = currentLog.value;
   return `账号: ${data.operName} / ${data.deptName} / ${data.operIp} / ${data.operLocation}`;
 });
+
+const items = computed<DescriptionsProps['items']>(() => {
+  if (!currentLog.value) {
+    return [];
+  }
+  const data = currentLog.value;
+  return [
+    {
+      label: '日志编号',
+      content: data.operId,
+    },
+    {
+      label: '操作结果',
+      content: renderDict(data.status, DictEnum.SYS_COMMON_STATUS),
+    },
+    {
+      label: '操作模块',
+      content: (
+        <div class="flex items-center">
+          <Tag>{data.title}</Tag>
+          {renderDict(data.businessType, DictEnum.SYS_OPER_TYPE)}
+        </div>
+      ),
+    },
+    {
+      label: '操作信息',
+      content: actionInfo.value,
+    },
+    {
+      label: '请求信息',
+      content: (
+        <>
+          {renderHttpMethodTag(data.requestMethod)}
+          {data.operUrl}
+        </>
+      ),
+    },
+    data.errorMsg
+      ? {
+          label: '异常信息',
+          content: (
+            <span class="font-semibold text-red-600">{data.errorMsg}</span>
+          ),
+        }
+      : undefined,
+    {
+      label: '方法',
+      content: data.method,
+    },
+    {
+      label: '请求参数',
+      content: (
+        <div class="max-h-[300px] overflow-y-auto">
+          {renderJsonPreview(data.operParam)}
+        </div>
+      ),
+    },
+    data.jsonResult
+      ? {
+          label: '响应参数',
+          content: (
+            <div class="max-h-[300px] overflow-y-auto">
+              {renderJsonPreview(data.jsonResult)}
+            </div>
+          ),
+        }
+      : undefined,
+    {
+      label: '请求耗时',
+      content: `${data.costTime} ms`,
+    },
+    {
+      label: '操作时间',
+      content: `${data.operTime}`,
+    },
+  ].filter(Boolean) as DescriptionsProps['items'];
+});
 </script>
 
 <template>
   <BasicDrawer :footer="false" class="w-[600px]" title="查看日志">
-    <Descriptions v-if="currentLog" size="small" bordered :column="1">
+    <Descriptions
-      <DescriptionsItem label="日志编号" :label-style="{ minWidth: '120px' }">
+      :styles="{ label: { minWidth: '120px' } }"
-        {{ currentLog.operId }}
+      :column="1"
-      </DescriptionsItem>
+      :items="items"
-      <DescriptionsItem label="操作结果">
+      bordered
-        <component
+      size="small"
-          :is="renderDict(currentLog.status, DictEnum.SYS_COMMON_STATUS)"
+    />
-        />
-      </DescriptionsItem>
-      <DescriptionsItem label="操作模块">
-        <div class="flex items-center">
-          <Tag>{{ currentLog.title }}</Tag>
-          <component
-            :is="renderDict(currentLog.businessType, DictEnum.SYS_OPER_TYPE)"
-          />
-        </div>
-      </DescriptionsItem>
-      <DescriptionsItem label="操作信息">
-        {{ actionInfo }}
-      </DescriptionsItem>
-      <DescriptionsItem label="请求信息">
-        <component :is="renderHttpMethodTag(currentLog.requestMethod)" />
-        {{ currentLog.operUrl }}
-      </DescriptionsItem>
-      <DescriptionsItem v-if="currentLog.errorMsg" label="异常信息">
-        <span class="font-semibold text-red-600">
-          {{ currentLog.errorMsg }}
-        </span>
-      </DescriptionsItem>
-      <DescriptionsItem label="方法">
-        {{ currentLog.method }}
-      </DescriptionsItem>
-      <DescriptionsItem label="请求参数">
-        <div class="max-h-[300px] overflow-y-auto">
-          <component :is="renderJsonPreview(currentLog.operParam)" />
-        </div>
-      </DescriptionsItem>
-      <DescriptionsItem v-if="currentLog.jsonResult" label="响应参数">
-        <div class="max-h-[300px] overflow-y-auto">
-          <component :is="renderJsonPreview(currentLog.jsonResult)" />
-        </div>
-      </DescriptionsItem>
-      <DescriptionsItem label="请求耗时">
-        {{ `${currentLog.costTime} ms` }}
-      </DescriptionsItem>
-      <DescriptionsItem label="操作时间">
-        {{ `${currentLog.operTime}` }}
-      </DescriptionsItem>
-    </Descriptions>
   </BasicDrawer>
 </template>