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

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>"
     }
   }
 }

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));
     }
-    if (!finished.value && syncTime.value !== 0) {
     nextTick(() => {
       if (isAutoScroll.value) virtualListInst.value?.scrollTo({ position: 'bottom', debounce: true });
     });
+    if (!finished.value && syncTime.value !== 0) {
       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">
+            <ButtonIcon
-              <template #checked>自动滚动</template>
+              size="tiny"
-              <template #unchecked>自动滚动</template>
+              :tooltip-content="isAutoScroll ? '关闭自动滚动' : '开启自动滚动'"
-            </NSwitch>
+              @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" />