From 15c80bc9f7a8e440f6265a45e421087f530154b4 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Sat, 15 Jul 2023 01:54:40 +0800
Subject: [PATCH] feat: adjust color of tree view

---
 frontend/src/App.vue                          |  9 +++++++-
 frontend/src/AppContent.vue                   |  8 ++++---
 frontend/src/components/content/content.scss  |  1 -
 .../content_value/ContentServerStatus.vue     | 21 ++++++++++++++++---
 frontend/src/components/sidebar/NavMenu.vue   |  3 +--
 frontend/src/style.scss                       |  4 ++--
 6 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7238b3b..22643e7 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -89,7 +89,7 @@ const theme = computed(() => {
                 <n-spin v-show="initializing" :theme-overrides="{ opacitySpinning: 0 }">
                     <div id="launch-container" />
                 </n-spin>
-                <app-content v-if="!initializing" />
+                <app-content v-if="!initializing" class="flex-item-expand" />
 
                 <!-- top modal dialogs -->
                 <connection-dialog />
@@ -110,4 +110,11 @@ const theme = computed(() => {
     width: 100vw;
     height: 100vh;
 }
+
+#app-title {
+    text-align: center;
+    width: 100vw;
+    height: 30px;
+    line-height: 30px;
+}
 </style>
diff --git a/frontend/src/AppContent.vue b/frontend/src/AppContent.vue
index 1e704aa..0becb86 100644
--- a/frontend/src/AppContent.vue
+++ b/frontend/src/AppContent.vue
@@ -58,7 +58,7 @@ const dragging = computed(() => {
 
 <template>
     <!-- app content-->
-    <div id="app-container" :class="{ dragging }" class="flex-box-h" :style="prefStore.generalFont">
+    <div id="app-content-wrapper" :class="{ dragging }" class="flex-box-h" :style="prefStore.generalFont">
         <nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
         <!-- structure page-->
         <div v-show="tabStore.nav === 'structure'" class="flex-box-h flex-item-expand">
@@ -107,7 +107,7 @@ const dragging = computed(() => {
 </template>
 
 <style scoped lang="scss">
-#app-container {
+#app-content-wrapper {
     height: 100%;
     overflow: hidden;
     border-top: v-bind('themeVars.borderColor') 1px solid;
@@ -121,16 +121,18 @@ const dragging = computed(() => {
     #app-side {
         //overflow: hidden;
         height: 100%;
+        background-color: v-bind('themeVars.tabColor');
 
         .resize-divider {
             //height: 100%;
             width: 2px;
             border-left-width: 5px;
-            background-color: v-bind('themeVars.dividerColor');
+            background-color: v-bind('themeVars.tabColor');
         }
 
         .resize-divider-hover {
             width: 5px;
+            background-color: v-bind('themeVars.borderColor');
         }
 
         .resize-divider-drag {
diff --git a/frontend/src/components/content/content.scss b/frontend/src/components/content/content.scss
index 8deb184..90ba500 100644
--- a/frontend/src/components/content/content.scss
+++ b/frontend/src/components/content/content.scss
@@ -1,7 +1,6 @@
 .content-container {
   height: 100%;
   overflow: hidden;
-  //background-color: var(--bg-color);
   padding-top: 2px;
   padding-bottom: 5px;
   box-sizing: border-box;
diff --git a/frontend/src/components/content_value/ContentServerStatus.vue b/frontend/src/components/content_value/ContentServerStatus.vue
index 1b9e769..46814fc 100644
--- a/frontend/src/components/content_value/ContentServerStatus.vue
+++ b/frontend/src/components/content_value/ContentServerStatus.vue
@@ -100,9 +100,24 @@ const onFilterInfo = (val) => {
                 <template #header>
                     {{ props.server }}
                     <n-space inline size="small">
-                        <n-tag v-if="redisVersion" type="primary" size="small">v{{ redisVersion }}</n-tag>
-                        <n-tag v-if="redisMode" type="primary" size="small">{{ redisMode }}</n-tag>
-                        <n-tag v-if="role" type="primary" size="small">{{ role }}</n-tag>
+                        <n-tooltip v-if="redisVersion">
+                            Redis Version
+                            <template #trigger>
+                                <n-tag type="primary" size="small">v{{ redisVersion }}</n-tag>
+                            </template>
+                        </n-tooltip>
+                        <n-tooltip v-if="redisMode">
+                            Mode
+                            <template #trigger>
+                                <n-tag type="primary" size="small">{{ redisMode }}</n-tag>
+                            </template>
+                        </n-tooltip>
+                        <n-tooltip v-if="redisMode">
+                            Role
+                            <template #trigger>
+                                <n-tag type="primary" size="small">{{ role }}</n-tag>
+                            </template>
+                        </n-tooltip>
                     </n-space>
                 </template>
                 <template #header-extra>
diff --git a/frontend/src/components/sidebar/NavMenu.vue b/frontend/src/components/sidebar/NavMenu.vue
index 7d1deb7..bc6c109 100644
--- a/frontend/src/components/sidebar/NavMenu.vue
+++ b/frontend/src/components/sidebar/NavMenu.vue
@@ -134,9 +134,8 @@ const openGithub = () => {
 
 <style lang="scss">
 #app-nav-menu {
-    //width: 60px;
     height: 100vh;
-    border-right: v-bind('themeVars.borderColor') solid 1px;
+    //border-right: v-bind('themeVars.borderColor') solid 1px;
 
     .nav-menu-item {
         align-items: center;
diff --git a/frontend/src/style.scss b/frontend/src/style.scss
index 384fc48..df9856d 100644
--- a/frontend/src/style.scss
+++ b/frontend/src/style.scss
@@ -1,5 +1,6 @@
 :root {
-  //--bg-color: #ffffff;
+  //--bg-color: #f8f8f8;
+  //--bg-color-accent: #fff;
   //--bg-color-page: #f2f3f5;
   //--text-color-regular: #606266;
   //--border-color: #dcdfe6;
@@ -32,7 +33,6 @@ body {
 
 #app {
   height: 100vh;
-  //text-align: center;
 }
 
 .flex-box {