From 6f5ea748f5112575b79989196b5ec58208dfd508 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Mon, 23 Oct 2023 18:22:43 +0800
Subject: [PATCH] refactor: update icons' property

---
 .../components/content/ContentValueTab.vue    |  8 ++-
 .../icons/{ToggleCluster.vue => Cluster.vue}  | 72 ++++---------------
 .../icons/{ToggleDb.vue => Database.vue}      | 18 ++---
 .../icons/{ToggleFolder.vue => Folder.vue}    |  8 +--
 frontend/src/components/icons/Log.vue         | 25 ++++++-
 .../icons/{ToggleServer.vue => Server.vue}    | 16 ++---
 frontend/src/components/icons/Status.vue      | 16 ++++-
 .../src/components/sidebar/BrowserTree.vue    |  6 +-
 .../src/components/sidebar/ConnectionTree.vue | 16 ++---
 frontend/src/components/sidebar/NavMenu.vue   |  8 +--
 10 files changed, 88 insertions(+), 105 deletions(-)
 rename frontend/src/components/icons/{ToggleCluster.vue => Cluster.vue} (63%)
 rename frontend/src/components/icons/{ToggleDb.vue => Database.vue} (86%)
 rename frontend/src/components/icons/{ToggleFolder.vue => Folder.vue} (88%)
 rename frontend/src/components/icons/{ToggleServer.vue => Server.vue} (88%)

diff --git a/frontend/src/components/content/ContentValueTab.vue b/frontend/src/components/content/ContentValueTab.vue
index 315185d..dd17284 100644
--- a/frontend/src/components/content/ContentValueTab.vue
+++ b/frontend/src/components/content/ContentValueTab.vue
@@ -1,5 +1,5 @@
 <script setup>
-import ToggleServer from '@/components/icons/ToggleServer.vue'
+import Server from '@/components/icons/Server.vue'
 import useTabStore from 'stores/tab.js'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -52,7 +52,7 @@ const tab = computed(() =>
     <n-tabs
         v-model:value="tabStore.activatedIndex"
         :closable="true"
-        :tabs-padding="2"
+        :tabs-padding="0"
         :tab-style="{
             borderStyle: 'solid',
             borderWidth: '1px',
@@ -82,7 +82,9 @@ const tab = computed(() =>
             :class="tabClass(i)"
             @dblclick.stop="() => {}">
             <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
-                <n-icon :component="ToggleServer" size="18" />
+                <n-icon size="18">
+                    <server stroke-width="4" :inverse="tabStore.activatedIndex === i" />
+                </n-icon>
                 <n-ellipsis style="max-width: 150px">{{ t.label }}</n-ellipsis>
             </n-space>
         </n-tab>
diff --git a/frontend/src/components/icons/ToggleCluster.vue b/frontend/src/components/icons/Cluster.vue
similarity index 63%
rename from frontend/src/components/icons/ToggleCluster.vue
rename to frontend/src/components/icons/Cluster.vue
index 5bea3d8..ecedc6b 100644
--- a/frontend/src/components/icons/ToggleCluster.vue
+++ b/frontend/src/components/icons/Cluster.vue
@@ -2,7 +2,7 @@
 const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
-    modelValue: {
+    inverse: {
         type: Boolean,
         default: false,
     },
@@ -10,18 +10,14 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
-    fillColor: {
-        type: String,
-        default: '#dc423c',
-    },
 })
 </script>
 
 <template>
-    <svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
-            :fill="props.fillColor"
-            :stroke="props.fillColor"
+            fill="currentColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             height="8"
             stroke-linecap="round"
@@ -30,8 +26,8 @@ const props = defineProps({
             x="4"
             y="34" />
         <rect
-            :fill="props.fillColor"
-            :stroke="props.fillColor"
+            fill="currentColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             height="12"
             stroke-linecap="round"
@@ -40,20 +36,20 @@ const props = defineProps({
             x="8"
             y="6" />
         <path
-            :stroke="props.fillColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             d="M24 34V18"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke="props.fillColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             d="M8 34V26H40V34"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <rect
-            :fill="props.fillColor"
-            :stroke="props.fillColor"
+            fill="currentColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             height="8"
             stroke-linecap="round"
@@ -62,8 +58,8 @@ const props = defineProps({
             x="36"
             y="34" />
         <rect
-            :fill="props.fillColor"
-            :stroke="props.fillColor"
+            fill="currentColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             height="8"
             stroke-linecap="round"
@@ -78,50 +74,6 @@ const props = defineProps({
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
-    <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M5 24L43 24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M28 4H20C18.8954 4 18 4.89543 18 6V14C18 15.1046 18.8954 16 20 16H28C29.1046 16 30 15.1046 30 14V6C30 4.89543 29.1046 4 28 4Z"
-            fill="none"
-            stroke="currentColor"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M16 32H8C6.89543 32 6 32.8954 6 34V42C6 43.1046 6.89543 44 8 44H16C17.1046 44 18 43.1046 18 42V34C18 32.8954 17.1046 32 16 32Z"
-            fill="none"
-            stroke="currentColor"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M40 32H32C30.8954 32 30 32.8954 30 34V42C30 43.1046 30.8954 44 32 44H40C41.1046 44 42 43.1046 42 42V34C42 32.8954 41.1046 32 40 32Z"
-            fill="none"
-            stroke="currentColor"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M24 24V16"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M36 32V24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M12 32V24"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-    </svg>
     <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
             :stroke-width="props.strokeWidth"
diff --git a/frontend/src/components/icons/ToggleDb.vue b/frontend/src/components/icons/Database.vue
similarity index 86%
rename from frontend/src/components/icons/ToggleDb.vue
rename to frontend/src/components/icons/Database.vue
index a4b0186..37ec83a 100644
--- a/frontend/src/components/icons/ToggleDb.vue
+++ b/frontend/src/components/icons/Database.vue
@@ -2,7 +2,7 @@
 const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
-    modelValue: {
+    inverse: {
         type: Boolean,
         default: false,
     },
@@ -10,39 +10,35 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
-    fillColor: {
-        type: String,
-        default: '#dc423c',
-    },
 })
 </script>
 
 <template>
-    <svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
-            :stroke="props.fillColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             d="M44.0001 11C44.0001 11 44 36.0623 44 38C44 41.3137 35.0457 44 24 44C12.9543 44 4.00003 41.3137 4.00003 38C4.00003 36.1423 4 11 4 11"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke="props.fillColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             d="M44 29C44 32.3137 35.0457 35 24 35C12.9543 35 4 32.3137 4 29"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke="props.fillColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             d="M44 20C44 23.3137 35.0457 26 24 26C12.9543 26 4 23.3137 4 20"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <ellipse
-            :stroke="props.fillColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             cx="24"
             cy="10"
-            fill="#dc423c"
+            fill="currentColor"
             rx="20"
             ry="6"
             stroke-linecap="round"
diff --git a/frontend/src/components/icons/ToggleFolder.vue b/frontend/src/components/icons/Folder.vue
similarity index 88%
rename from frontend/src/components/icons/ToggleFolder.vue
rename to frontend/src/components/icons/Folder.vue
index 013a42f..089fb65 100644
--- a/frontend/src/components/icons/ToggleFolder.vue
+++ b/frontend/src/components/icons/Folder.vue
@@ -2,7 +2,7 @@
 const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
-    modelValue: {
+    open: {
         type: Boolean,
         default: false,
     },
@@ -18,7 +18,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="props.open" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
             :stroke-width="props.strokeWidth"
             d="M4 9V41L9 21H39.5V15C39.5 13.8954 38.6046 13 37.5 13H24L19 7H6C4.89543 7 4 7.89543 4 9Z"
@@ -26,7 +26,7 @@ const props = defineProps({
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :fill="props.fillColor"
+            :fill="props.fillColor || 'currentColor'"
             :stroke-width="props.strokeWidth"
             d="M40 41L44 21H8.8125L4 41H40Z"
             stroke="currentColor"
@@ -35,7 +35,7 @@ const props = defineProps({
     </svg>
     <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
-            :fill="props.fillColor"
+            :fill="props.fillColor || 'currentColor'"
             :stroke-width="props.strokeWidth"
             d="M5 8C5 6.89543 5.89543 6 7 6H19L24 12H41C42.1046 12 43 12.8954 43 14V40C43 41.1046 42.1046 42 41 42H7C5.89543 42 5 41.1046 5 40V8Z"
             stroke="currentColor"
diff --git a/frontend/src/components/icons/Log.vue b/frontend/src/components/icons/Log.vue
index 4ea18b7..8fed2ba 100644
--- a/frontend/src/components/icons/Log.vue
+++ b/frontend/src/components/icons/Log.vue
@@ -1,5 +1,9 @@
 <script setup>
 const props = defineProps({
+    inverse: {
+        type: Boolean,
+        default: false,
+    },
     strokeWidth: {
         type: [Number, String],
         default: 3,
@@ -8,7 +12,26 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="props.inverse" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect
+            x="13"
+            y="10"
+            width="28"
+            height="34"
+            fill="currentColor"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linejoin="round" />
+        <path
+            d="M35 10V4H8C7.44772 4 7 4.44772 7 5V38H13"
+            stroke="currentColor"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path d="M21 22H33" stroke="#FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+        <path d="M21 30H33" stroke="#FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+    <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
             :stroke-width="strokeWidth"
             fill="none"
diff --git a/frontend/src/components/icons/ToggleServer.vue b/frontend/src/components/icons/Server.vue
similarity index 88%
rename from frontend/src/components/icons/ToggleServer.vue
rename to frontend/src/components/icons/Server.vue
index d2ae5a3..dac4a10 100644
--- a/frontend/src/components/icons/ToggleServer.vue
+++ b/frontend/src/components/icons/Server.vue
@@ -2,7 +2,7 @@
 const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
-    modelValue: {
+    inverse: {
         type: Boolean,
         default: false,
     },
@@ -10,18 +10,14 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
-    fillColor: {
-        type: String,
-        default: '#dc423c',
-    },
 })
 </script>
 
 <template>
-    <svg v-if="props.modelValue" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
-            :fill="props.fillColor"
-            :stroke="props.fillColor"
+            fill="currentColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             d="M41 4H7C5.34315 4 4 5.34315 4 7V41C4 42.6569 5.34315 44 7 44H41C42.6569 44 44 42.6569 44 41V7C44 5.34315 42.6569 4 41 4Z"
             stroke-linecap="round"
@@ -40,13 +36,13 @@ const props = defineProps({
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke="props.fillColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             d="M44 37V27"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke="props.fillColor"
+            stroke="currentColor"
             :stroke-width="props.strokeWidth"
             d="M4 37V27"
             stroke-linecap="round"
diff --git a/frontend/src/components/icons/Status.vue b/frontend/src/components/icons/Status.vue
index b250c85..6c3bd51 100644
--- a/frontend/src/components/icons/Status.vue
+++ b/frontend/src/components/icons/Status.vue
@@ -1,5 +1,9 @@
 <script setup>
 const props = defineProps({
+    inverse: {
+        type: Boolean,
+        default: false,
+    },
     strokeWidth: {
         type: [Number, String],
         default: 3,
@@ -8,7 +12,17 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg v-if="props.inverse" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M42 8H6C4.89543 8 4 8.89543 4 10V38C4 39.1046 4.89543 40 6 40H42C43.1046 40 44 39.1046 44 38V10C44 8.89543 43.1046 8 42 8Z"
+            fill="currentColor"
+            stroke="currentColor"
+            stroke-width="3" />
+        <path d="M24 17V31" stroke="#FFF" :stroke-width="props.strokeWidth" stroke-linecap="round" />
+        <path d="M32 24V31" stroke="#FFF" :stroke-width="props.strokeWidth" stroke-linecap="round" />
+        <path d="M16 22V31" stroke="#FFF" :stroke-width="props.strokeWidth" stroke-linecap="round" />
+    </svg>
+    <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
             :stroke-width="props.strokeWidth"
             fill="none"
diff --git a/frontend/src/components/sidebar/BrowserTree.vue b/frontend/src/components/sidebar/BrowserTree.vue
index 515298b..f47ed38 100644
--- a/frontend/src/components/sidebar/BrowserTree.vue
+++ b/frontend/src/components/sidebar/BrowserTree.vue
@@ -4,7 +4,7 @@ import { ConnectionType } from '@/consts/connection_type.js'
 import { NIcon, NSpace, NTag } from 'naive-ui'
 import Key from '@/components/icons/Key.vue'
 import Binary from '@/components/icons/Binary.vue'
-import ToggleDb from '@/components/icons/ToggleDb.vue'
+import Database from '@/components/icons/Database.vue'
 import { find, get, includes, indexOf, isEmpty, remove, size, startsWith } from 'lodash'
 import { useI18n } from 'vue-i18n'
 import Refresh from '@/components/icons/Refresh.vue'
@@ -399,9 +399,9 @@ const renderPrefix = ({ option }) => {
         case ConnectionType.RedisDB:
             return h(
                 NIcon,
-                { size: 20 },
+                { size: 20, color: option.opened === true ? '#dc423c' : undefined },
                 {
-                    default: () => h(ToggleDb, { modelValue: option.opened === true }),
+                    default: () => h(Database, { inverse: option.opened === true }),
                 },
             )
         case ConnectionType.RedisKey:
diff --git a/frontend/src/components/sidebar/ConnectionTree.vue b/frontend/src/components/sidebar/ConnectionTree.vue
index 971381f..760c5a0 100644
--- a/frontend/src/components/sidebar/ConnectionTree.vue
+++ b/frontend/src/components/sidebar/ConnectionTree.vue
@@ -4,9 +4,9 @@ import { h, nextTick, reactive, ref } from 'vue'
 import useConnectionStore from 'stores/connections.js'
 import { NIcon, NSpace, NText, useThemeVars } from 'naive-ui'
 import { ConnectionType } from '@/consts/connection_type.js'
-import ToggleFolder from '@/components/icons/ToggleFolder.vue'
-import ToggleServer from '@/components/icons/ToggleServer.vue'
-import ToggleCluster from '@/components/icons/ToggleCluster.vue'
+import Folder from '@/components/icons/Folder.vue'
+import Server from '@/components/icons/Server.vue'
+import Cluster from '@/components/icons/Cluster.vue'
 import { debounce, get, includes, indexOf, isEmpty, split } from 'lodash'
 import Config from '@/components/icons/Config.vue'
 import Delete from '@/components/icons/Delete.vue'
@@ -185,8 +185,8 @@ const renderPrefix = ({ option }) => {
                 { size: 20 },
                 {
                     default: () =>
-                        h(ToggleFolder, {
-                            modelValue: opened,
+                        h(Folder, {
+                            open: opened,
                             fillColor: `rgba(255,206,120,${iconTransparency})`,
                         }),
                 },
@@ -194,14 +194,14 @@ const renderPrefix = ({ option }) => {
         case ConnectionType.Server:
             const connected = connectionStore.isConnected(option.name)
             const color = getServerMarkColor(option.name)
-            const icon = option.cluster === true ? ToggleCluster : ToggleServer
+            const icon = option.cluster === true ? Cluster : Server
             return h(
                 NIcon,
-                { size: 20, color: !!!connected ? color : undefined },
+                { size: 20, color: !!!connected ? color : '#dc423c' },
                 {
                     default: () =>
                         h(icon, {
-                            modelValue: !!connected,
+                            inverse: !!connected,
                             fillColor: `rgba(220,66,60,${iconTransparency})`,
                         }),
                 },
diff --git a/frontend/src/components/sidebar/NavMenu.vue b/frontend/src/components/sidebar/NavMenu.vue
index 777c67b..52b884b 100644
--- a/frontend/src/components/sidebar/NavMenu.vue
+++ b/frontend/src/components/sidebar/NavMenu.vue
@@ -1,9 +1,9 @@
 <script setup>
 import { computed, h } from 'vue'
 import { NIcon, useThemeVars } from 'naive-ui'
-import ToggleDb from '@/components/icons/ToggleDb.vue'
+import Database from '@/components/icons/Database.vue'
 import { useI18n } from 'vue-i18n'
-import ToggleServer from '@/components/icons/ToggleServer.vue'
+import Server from '@/components/icons/Server.vue'
 import IconButton from '@/components/common/IconButton.vue'
 import Config from '@/components/icons/Config.vue'
 import useDialogStore from 'stores/dialog.js'
@@ -40,13 +40,13 @@ const menuOptions = computed(() => {
         {
             label: i18n.t('ribbon.browser'),
             key: 'browser',
-            icon: renderIcon(ToggleDb),
+            icon: renderIcon(Database),
             show: connectionStore.anyConnectionOpened,
         },
         {
             label: i18n.t('ribbon.server'),
             key: 'server',
-            icon: renderIcon(ToggleServer),
+            icon: renderIcon(Server),
         },
         {
             label: i18n.t('ribbon.log'),