From 231de628d3f7ceae8e257fee88a6eca83e6b0e34 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Fri, 6 Jun 2025 12:33:02 +0800
Subject: [PATCH] perf: operateLog

---
 .../src/components/operate-log/index.ts       |  6 ++++++
 .../components/operate-log/operate-log.vue    | 21 ++++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/web-antd/src/components/operate-log/index.ts b/apps/web-antd/src/components/operate-log/index.ts
index cf38b5e70..a134eaaab 100644
--- a/apps/web-antd/src/components/operate-log/index.ts
+++ b/apps/web-antd/src/components/operate-log/index.ts
@@ -1,3 +1,9 @@
+import { defineAsyncComponent } from 'vue';
+
+export const AsyncOperateLog = defineAsyncComponent(
+  () => import('./operate-log.vue'),
+);
+
 export { default as OperateLog } from './operate-log.vue';
 
 export type { OperateLogProps } from './typing';
diff --git a/apps/web-antd/src/components/operate-log/operate-log.vue b/apps/web-antd/src/components/operate-log/operate-log.vue
index e1e9eb448..2493bc5d5 100644
--- a/apps/web-antd/src/components/operate-log/operate-log.vue
+++ b/apps/web-antd/src/components/operate-log/operate-log.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import type { OperateLogProps } from './typing';
 
-import { Timeline } from 'ant-design-vue';
+import { formatDateTime } from '@vben/utils';
+
+import { Tag, Timeline } from 'ant-design-vue';
 
 import { DICT_TYPE, getDictLabel, getDictObj } from '#/utils';
 
@@ -38,8 +40,21 @@ function getUserTypeColor(userType: number) {
         :key="log.id"
         :color="getUserTypeColor(log.userType)"
       >
-        <p>{{ log.createTime }}</p>
-        <p>{{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}</p>
+        <template #dot>
+          <p
+            :style="{ backgroundColor: getUserTypeColor(log.userType) }"
+            class="absolute left-[-5px] flex h-5 w-5 items-center justify-center rounded-full text-xs text-white"
+          >
+            {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
+          </p>
+        </template>
+        <p>{{ formatDateTime(log.createTime) }}</p>
+        <p>
+          <Tag :color="getUserTypeColor(log.userType)">
+            {{ log.userName }}
+          </Tag>
+          {{ log.action }}
+        </p>
       </Timeline.Item>
     </Timeline>
   </div>