From 935e86cdebba52ec2edf20f90366823a8d979232 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Tue, 13 Jan 2026 21:24:57 +0800
Subject: [PATCH] =?UTF-8?q?refactor(monitor):=20=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=97=A5=E5=BF=97=E9=A2=84=E8=A7=88=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=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 语法重写操作日志预览组件，简化模板代码并提高可维护性
移除 DescriptionsItem 组件，改用 items 属性配置描述项
---
 .../operlog/operation-preview-drawer.vue      | 139 +++++++++++-------
 1 file changed, 88 insertions(+), 51 deletions(-)

diff --git a/apps/web-antd/src/views/monitor/operlog/operation-preview-drawer.vue b/apps/web-antd/src/views/monitor/operlog/operation-preview-drawer.vue
index dc92af5a..642b4586 100644
--- a/apps/web-antd/src/views/monitor/operlog/operation-preview-drawer.vue
+++ b/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">
-      <DescriptionsItem label="日志编号" :label-style="{ minWidth: '120px' }">
-        {{ currentLog.operId }}
-      </DescriptionsItem>
-      <DescriptionsItem label="操作结果">
-        <component
-          :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>
+    <Descriptions
+      :styles="{ label: { minWidth: '120px' } }"
+      :column="1"
+      :items="items"
+      bordered
+      size="small"
+    />
   </BasicDrawer>
 </template>