From 2f95b803b9807a89ebe20b7192d99ea58209f1ad Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Sun, 3 Sep 2023 00:15:31 +0800
Subject: [PATCH] perf: adjust styles of resize divider

---
 frontend/src/AppContent.vue                   | 51 +++++++++++--------
 .../src/components/content/ContentLogPane.vue |  1 +
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/frontend/src/AppContent.vue b/frontend/src/AppContent.vue
index b119d7d..17c6b5f 100644
--- a/frontend/src/AppContent.vue
+++ b/frontend/src/AppContent.vue
@@ -87,7 +87,7 @@ watch(
             <div
                 id="app-toolbar-title"
                 :style="{
-                    width: `${data.navMenuWidth + prefStore.general.asideWidth}px`,
+                    width: `${data.navMenuWidth + prefStore.general.asideWidth - 4}px`,
                     paddingLeft: isMacOS() ? '70px' : '10px',
                 }">
                 <n-space align="center" :wrap-item="false" :wrap="false" :size="3">
@@ -100,6 +100,15 @@ watch(
                     </transition>
                 </n-space>
             </div>
+            <div
+                :class="{
+                    'resize-divider-hover': data.hoverResize,
+                    'resize-divider-drag': data.resizing,
+                }"
+                class="resize-divider resize-divider-hide"
+                @mousedown="startResize"
+                @mouseout="data.hoverResize = false"
+                @mouseover="data.hoverResize = true" />
             <!-- browser tabs -->
             <div v-show="tabStore.nav === 'browser'" class="app-toolbar-tab flex-item-expand">
                 <content-value-tab />
@@ -180,6 +189,7 @@ watch(
     .app-toolbar-tab {
         align-self: flex-end;
         margin-bottom: -1px;
+        margin-left: 3px;
     }
 
     #app-content {
@@ -190,28 +200,29 @@ watch(
         //overflow: hidden;
         height: 100%;
         background-color: v-bind('themeVars.tabColor');
-
-        .resize-divider {
-            //height: 100%;
-            width: 5px;
-            border-left-width: 5px;
-            background-color: v-bind('themeVars.tabColor');
-        }
-
-        .resize-divider-hover {
-            width: 5px;
-            background-color: v-bind('themeVars.borderColor');
-        }
-
-        .resize-divider-drag {
-            //background-color: rgb(0, 105, 218);
-            width: 5px;
-            //background-color: var(--el-color-primary);
-            background-color: v-bind('themeVars.primaryColor');
-        }
     }
 }
 
+.resize-divider {
+    width: 3px;
+    border-right: 1px solid v-bind('themeVars.borderColor');
+}
+
+.resize-divider-hide {
+    background-color: #0000;
+    border-right-color: #0000;
+}
+
+.resize-divider-hover {
+    background-color: v-bind('themeVars.borderColor');
+    border-right-color: v-bind('themeVars.borderColor');
+}
+
+.resize-divider-drag {
+    background-color: v-bind('themeVars.primaryColor');
+    border-right-color: v-bind('themeVars.primaryColor');
+}
+
 .dragging {
     cursor: col-resize !important;
 }
diff --git a/frontend/src/components/content/ContentLogPane.vue b/frontend/src/components/content/ContentLogPane.vue
index 717b782..ce9714b 100644
--- a/frontend/src/components/content/ContentLogPane.vue
+++ b/frontend/src/components/content/ContentLogPane.vue
@@ -70,6 +70,7 @@ defineExpose({
 <template>
     <n-card
         :title="$t('launch_log')"
+        :bordered="false"
         class="content-container flex-box-v"
         content-style="display: flex;flex-direction: column; overflow: hidden;">
         <n-form :disabled="data.loading" class="flex-item" inline>