gtsoft/gtsoft-snail-job-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(sj_1.1.0-beta3): 优化自动滚动按钮样式

Browse Source
This commit is contained in:
xlsea 2024-07-13 10:56:28 +08:00
parent 46f0754f6e
commit 5dba7fa14b
2 changed files with 33 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/iconify/streamline.json
View File

@ -12,6 +12,13 @@
"interface-user-multiple-close-geometric-human-multiple-person-up-user": {
"body": "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"5\" cy=\"3.75\" r=\"2.25\"/><path d=\"M9.5 13.5h-9v-1a4.5 4.5 0 0 1 9 0ZM9 1.5A2.25 2.25 0 0 1 9 6m1.6 2.19a4.5 4.5 0 0 1 2.9 4.2v1.11H12\"/></g>",
"hidden": true
},
"interface-arrows-vertical-scroll-point-move-scroll-vertical": {
"body": "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M10.13 3.48L7.26.61a.36.36 0 0 0-.52 0L3.87 3.48m6.26 7.04l-2.87 2.87a.36.36 0 0 1-.52 0l-2.87-2.87\"/><circle cx=\"7\" cy=\"7\" r=\"1.25\"/></g>",
"hidden": true
},
"synchronize-disable": {
"body": "<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m5 11l.5 2l-2 .5\"/><path d=\"M5.5 13A6.76 6.76 0 0 1 1 7a6 6 0 0 1 .66-2.736M4.95 1.36a6 6 0 0 0-2.19 1.394M9 3l-.5-2l2-.5\"/><path d=\"M8.5 1c2.3.84 4.5 3.42 4.5 6a6 6 0 0 1-1.731 4.2M9 12.64c.22-.078.434-.168.642-.27M.5.5l13 13\"/></g>"
}
}
}

39
src/components/common/log-drawer.vue
View File

@ -110,10 +110,10 @@ async function getLogList() {
.sort((a, b) => Number.parseInt(a.time_stamp, 10) - Number.parseInt(b.time_stamp, 10))
.forEach((item, index) => (item.index = index));
}
nextTick(() => {
if (isAutoScroll.value) virtualListInst.value?.scrollTo({ position: 'bottom', debounce: true });
});
if (!finished.value && syncTime.value !== 0) {
nextTick(() => {
if (isAutoScroll.value) virtualListInst.value?.scrollTo({ position: 'bottom', debounce: true });
});
clearTimeout(interval.value);
interval.value = setTimeout(getLogList, syncTime.value * 1000);
}
@ -352,10 +352,14 @@ const SnailLogComponent = defineComponent({
</NDropdown>
</div>
<div class="flex-center">
<NSwitch v-model:value="isAutoScroll" :round="false" size="large">
<template #checked>自动滚动</template>
<template #unchecked>自动滚动</template>
</NSwitch>
<ButtonIcon
size="tiny"
:tooltip-content="isAutoScroll ? '关闭自动滚动' : '开启自动滚动'"
@click="() => (isAutoScroll = !isAutoScroll)"
>
<icon-streamline:synchronize-disable v-if="isAutoScroll" />
<icon-streamline:interface-arrows-vertical-scroll-point-move-scroll-vertical v-else />
</ButtonIcon>
<ButtonIcon
size="tiny"
icon="hugeicons:share-01"
@ -363,7 +367,11 @@ const SnailLogComponent = defineComponent({
class="ml-6px"
@click="openNewTab"
/>
<ButtonIcon size="tiny" @click="() => (isFullscreen = !isFullscreen)">
<ButtonIcon
size="tiny"
:tooltip-content="isFullscreen ? '半屏' : '全屏'"
@click="() => (isFullscreen = !isFullscreen)"
>
<icon-material-symbols:close-fullscreen-rounded v-if="isFullscreen" />
<icon-material-symbols:open-in-full-rounded v-else />
</ButtonIcon>
@ -380,14 +388,10 @@ const SnailLogComponent = defineComponent({
<NCard v-else :bordered="false" :title="title" size="small" class="h-full sm:flex-1-hidden card-wrapper">
<template #header-extra>
<div class="flex items-center">
<NSwitch v-model:value="isAutoScroll" :round="false" size="large">
<template #checked>自动滚动</template>
<template #unchecked>自动滚动</template>
</NSwitch>
<NDropdown trigger="hover" :options="syncOptions" width="trigger" @select="handleSyncSelect">
<NTooltip placement="right">
<template #trigger>
<NButton dashed class="mx-16px w-136px" @click="handleSyncSelect(-1)">
<NButton dashed class="mx-12px w-136px" @click="handleSyncSelect(-1)">
<template #icon>
<div class="flex-center gap-8px">
<icon-solar:refresh-outline class="text-18px" />
@ -400,6 +404,15 @@ const SnailLogComponent = defineComponent({
自动刷新频率
</NTooltip>
</NDropdown>
<ButtonIcon
size="tiny"
class="mr-12px"
:tooltip-content="isAutoScroll ? '关闭自动滚动' : '开启自动滚动'"
@click="() => (isAutoScroll = !isAutoScroll)"
>
<icon-streamline:synchronize-disable v-if="isAutoScroll" />
<icon-streamline:interface-arrows-vertical-scroll-point-move-scroll-vertical v-else />
</ButtonIcon>
<NTooltip v-if="finished">
<template #trigger>
<icon-material-symbols:check-circle class="text-20px color-success" />