feat: 优化显示效果

apps/web-antd/src/components/operate-log/operate-log.vue

@@ -15,26 +15,14 @@ withDefaults(defineProps<OperateLogProps>(), {
 
 function getUserTypeColor(userType: number) {
   const dict = getDictObj(DICT_TYPE.USER_TYPE, userType);
-  switch (dict?.colorType) {
+  if (dict && dict.colorType) {
-    case 'danger': {
+    return `hsl(var(--${dict.colorType}))`;
-      return '#F56C6C';
   }
-    case 'info': {
+  return 'hsl(var(--primary))';
-      return '#909399';
-    }
-    case 'success': {
-      return '#67C23A';
-    }
-    case 'warning': {
-      return '#E6A23C';
-    }
-  }
-  return '#409EFF';
 }
 </script>
 <template>
   <div>
-    <!-- TODO @xingyu：有没可能美化下？ -->
     <Timeline>
       <Timeline.Item
         v-for="log in logList"
@@ -44,13 +32,13 @@ function getUserTypeColor(userType: number) {
         <template #dot>
           <p
             :style="{ backgroundColor: getUserTypeColor(log.userType) }"
-            class="absolute left--1 flex h-5 w-5 items-center justify-center rounded-full text-xs text-white"
+            class="absolute left-1 top-0 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 class="ml-2">{{ formatDateTime(log.createTime) }}</p>
-        <p>
+        <p class="ml-2 mt-2">
           <Tag :color="getUserTypeColor(log.userType)">
             {{ log.userName }}
           </Tag>