From 19c7f0d5dd49c91c4d11b3ed87be4749d25f3026 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 2 Jan 2026 19:44:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E3=80=90=E6=A1=86=E6=9E=B6=E3=80=91?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=20operate-log=20=E7=9A=84=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/operate-log/operate-log.vue    | 48 +++++++++++--------
 .../components/operate-log/operate-log.vue    | 47 ++++++++++--------
 2 files changed, 56 insertions(+), 39 deletions(-)

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 d1ae60112..8b49466ce 100644
--- a/apps/web-antd/src/components/operate-log/operate-log.vue
+++ b/apps/web-antd/src/components/operate-log/operate-log.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-// TODO @xingyu：要不要改成 yudao-ui-admin-vue3/src/components/OperateLogV2/src/OperateLogV2.vue 这种；一行：时间、userType、userName、action
 import type { OperateLogProps } from './typing';
 
 import { DICT_TYPE } from '@vben/constants';
@@ -14,37 +13,46 @@ withDefaults(defineProps<OperateLogProps>(), {
   logList: () => [],
 });
 
+/** 获得 userType 颜色 */
 function getUserTypeColor(userType: number) {
   const dict = getDictObj(DICT_TYPE.USER_TYPE, userType);
-  if (dict && dict.colorType) {
-    return `hsl(var(--${dict.colorType}))`;
+  switch (dict?.colorType) {
+    case 'danger': {
+      return '#F56C6C';
+    }
+    case 'info': {
+      return '#909399';
+    }
+    case 'success': {
+      return '#67C23A';
+    }
+    case 'warning': {
+      return '#E6A23C';
+    }
   }
-  return 'hsl(var(--primary))';
+  return '#409EFF';
 }
 </script>
+
 <template>
-  <div>
+  <div class="pt-5">
     <Timeline>
-      <Timeline.Item
-        v-for="log in logList"
-        :key="log.id"
-        :color="getUserTypeColor(log.userType)"
-      >
+      <Timeline.Item v-for="log in logList" :key="log.id">
         <template #dot>
-          <p
+          <span
             :style="{ backgroundColor: getUserTypeColor(log.userType) }"
-            class="absolute left-1 top-0 flex h-5 w-5 items-center justify-center rounded-full text-xs text-white"
+            class="flex h-5 w-5 items-center justify-center rounded-full text-[10px] text-white"
           >
             {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
-          </p>
+          </span>
         </template>
-        <p class="ml-2">{{ formatDateTime(log.createTime) }}</p>
-        <p class="ml-2 mt-2">
-          <Tag :color="getUserTypeColor(log.userType)">
-            {{ log.userName }}
-          </Tag>
-          {{ log.action }}
-        </p>
+        <div class="ml-2 flex flex-wrap items-center gap-2 leading-[22px]">
+          <span class="w-[140px] shrink-0 text-[13px] text-gray-400">
+            {{ formatDateTime(log.createTime) }}
+          </span>
+          <Tag color="success" class="!mr-0">{{ log.userName }}</Tag>
+          <span>{{ log.action }}</span>
+        </div>
       </Timeline.Item>
     </Timeline>
   </div>
diff --git a/apps/web-ele/src/components/operate-log/operate-log.vue b/apps/web-ele/src/components/operate-log/operate-log.vue
index 989452483..dbb9a2ab8 100644
--- a/apps/web-ele/src/components/operate-log/operate-log.vue
+++ b/apps/web-ele/src/components/operate-log/operate-log.vue
@@ -13,37 +13,46 @@ withDefaults(defineProps<OperateLogProps>(), {
   logList: () => [],
 });
 
+/** 获得 userType 颜色 */
 function getUserTypeColor(userType: number) {
   const dict = getDictObj(DICT_TYPE.USER_TYPE, userType);
-  if (dict && dict.colorType) {
-    return `hsl(var(--${dict.colorType}))`;
+  switch (dict?.colorType) {
+    case 'danger': {
+      return '#F56C6C';
+    }
+    case 'info': {
+      return '#909399';
+    }
+    case 'success': {
+      return '#67C23A';
+    }
+    case 'warning': {
+      return '#E6A23C';
+    }
   }
-  return 'hsl(var(--primary))';
+  return '#409EFF';
 }
 </script>
+
 <template>
-  <div>
+  <div class="pt-5">
     <ElTimeline>
-      <ElTimelineItem
-        v-for="log in logList"
-        :key="log.id"
-        :color="getUserTypeColor(log.userType)"
-      >
+      <ElTimelineItem v-for="log in logList" :key="log.id" class="!pb-3">
         <template #dot>
-          <p
+          <span
             :style="{ backgroundColor: getUserTypeColor(log.userType) }"
-            class="absolute left-1 top-0 flex h-5 w-5 items-center justify-center rounded-full text-xs text-white"
+            class="-ml-[2px] -mt-[1px] flex h-5 w-5 items-center justify-center rounded-full text-[10px] text-white"
           >
             {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
-          </p>
+          </span>
         </template>
-        <p class="ml-2">{{ formatDateTime(log.createTime) }}</p>
-        <p class="ml-2 mt-2">
-          <ElTag :color="getUserTypeColor(log.userType)">
-            {{ log.userName }}
-          </ElTag>
-          {{ log.action }}
-        </p>
+        <div class="ml-2 flex flex-wrap items-center gap-2 leading-[22px]">
+          <span class="w-[130px] shrink-0 text-[13px] text-gray-400">
+            {{ formatDateTime(log.createTime) }}
+          </span>
+          <ElTag type="success" class="!mr-0">{{ log.userName }}</ElTag>
+          <span>{{ log.action }}</span>
+        </div>
       </ElTimelineItem>
     </ElTimeline>
   </div>