From 5dba7fa14bc693454dc846ad66a1aabfe3110bcf Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Sat, 13 Jul 2024 10:56:28 +0800
Subject: [PATCH] =?UTF-8?q?style(sj=5F1.1.0-beta3):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8=E6=8C=89=E9=92=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/iconify/streamline.json       |  7 +++++
 src/components/common/log-drawer.vue | 39 ++++++++++++++++++----------
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/public/iconify/streamline.json b/public/iconify/streamline.json
index 0aeb1c0..1af0001 100644
--- a/public/iconify/streamline.json
+++ b/public/iconify/streamline.json
@@ -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>"
     }
   }
 }
diff --git a/src/components/common/log-drawer.vue b/src/components/common/log-drawer.vue
index 98c9ad2..f6af1db 100644
--- a/src/components/common/log-drawer.vue
+++ b/src/components/common/log-drawer.vue
@@ -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" />