oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: 【框架】更新 operate-log 的实现

Browse Source
This commit is contained in:
YunaiV
2026-01-02 19:44:09 +08:00
parent cd43149429
commit 19c7f0d5dd
2 changed files with 56 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
apps/web-antd/src/components/operate-log/operate-log.vue
View File

@@ -1,5 +1,4 @@
<script setup lang="ts"> <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 type { OperateLogProps } from './typing';
import { DICT_TYPE } from '@vben/constants'; import { DICT_TYPE } from '@vben/constants';
@@ -14,37 +13,46 @@ withDefaults(defineProps<OperateLogProps>(), {
logList: () => [], logList: () => [],
}); });
/** 获得 userType 颜色 */
function getUserTypeColor(userType: number) { function getUserTypeColor(userType: number) {
const dict = getDictObj(DICT_TYPE.USER_TYPE, userType); const dict = getDictObj(DICT_TYPE.USER_TYPE, userType);
if (dict && dict.colorType) { switch (dict?.colorType) {
return `hsl(var(--${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> </script>
<template> <template>
<div> <div class="pt-5">
<Timeline> <Timeline>
<Timeline.Item <Timeline.Item v-for="log in logList" :key="log.id">
v-for="log in logList"
:key="log.id"
:color="getUserTypeColor(log.userType)"
>
<template #dot> <template #dot>
<p <span
:style="{ backgroundColor: getUserTypeColor(log.userType) }" :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] }} {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
</p> </span>
</template> </template>
<p class="ml-2">{{ formatDateTime(log.createTime) }}</p> <div class="ml-2 flex flex-wrap items-center gap-2 leading-[22px]">
<p class="ml-2 mt-2"> <span class="w-[140px] shrink-0 text-[13px] text-gray-400">
<Tag :color="getUserTypeColor(log.userType)"> {{ formatDateTime(log.createTime) }}
{{ log.userName }} </span>
</Tag> <Tag color="success" class="!mr-0">{{ log.userName }}</Tag>
{{ log.action }} <span>{{ log.action }}</span>
</p> </div>
</Timeline.Item> </Timeline.Item>
</Timeline> </Timeline>
</div> </div>

47
apps/web-ele/src/components/operate-log/operate-log.vue
View File

@@ -13,37 +13,46 @@ withDefaults(defineProps<OperateLogProps>(), {
logList: () => [], logList: () => [],
}); });
/** 获得 userType 颜色 */
function getUserTypeColor(userType: number) { function getUserTypeColor(userType: number) {
const dict = getDictObj(DICT_TYPE.USER_TYPE, userType); const dict = getDictObj(DICT_TYPE.USER_TYPE, userType);
if (dict && dict.colorType) { switch (dict?.colorType) {
return `hsl(var(--${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> </script>
<template> <template>
<div> <div class="pt-5">
<ElTimeline> <ElTimeline>
<ElTimelineItem <ElTimelineItem v-for="log in logList" :key="log.id" class="!pb-3">
v-for="log in logList"
:key="log.id"
:color="getUserTypeColor(log.userType)"
>
<template #dot> <template #dot>
<p <span
:style="{ backgroundColor: getUserTypeColor(log.userType) }" :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] }} {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
</p> </span>
</template> </template>
<p class="ml-2">{{ formatDateTime(log.createTime) }}</p> <div class="ml-2 flex flex-wrap items-center gap-2 leading-[22px]">
<p class="ml-2 mt-2"> <span class="w-[130px] shrink-0 text-[13px] text-gray-400">
<ElTag :color="getUserTypeColor(log.userType)"> {{ formatDateTime(log.createTime) }}
{{ log.userName }} </span>
</ElTag> <ElTag type="success" class="!mr-0">{{ log.userName }}</ElTag>
{{ log.action }} <span>{{ log.action }}</span>
</p> </div>
</ElTimelineItem> </ElTimelineItem>
</ElTimeline> </ElTimeline>
</div> </div>