From 0143e8f52a467126b2463346738da9f3e1fb6716 Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Mon, 30 Oct 2023 11:52:46 +0800
Subject: [PATCH] perf: cropped icon size

---
 .../src/components/content/ContentPane.vue    | 52 ++++++++++++--
 frontend/src/components/icons/Cluster.vue     | 72 ++-----------------
 frontend/src/components/icons/Database.vue    | 34 +--------
 frontend/src/components/icons/Detail.vue      | 65 ++++-------------
 frontend/src/components/icons/Log.vue         | 37 +++-------
 frontend/src/components/icons/Monitor.vue     | 40 +++++++++++
 frontend/src/components/icons/Pub.vue         | 46 ++++++++++++
 frontend/src/components/icons/Server.vue      | 48 +++----------
 frontend/src/components/icons/Status.vue      | 10 ++-
 frontend/src/components/icons/Terminal.vue    | 36 +++-------
 frontend/src/consts/browser_tab_type.js       |  2 +
 frontend/src/langs/en.json                    |  6 +-
 frontend/src/langs/zh-cn.json                 |  4 +-
 13 files changed, 197 insertions(+), 255 deletions(-)
 create mode 100644 frontend/src/components/icons/Monitor.vue
 create mode 100644 frontend/src/components/icons/Pub.vue

diff --git a/frontend/src/components/content/ContentPane.vue b/frontend/src/components/content/ContentPane.vue
index 5432573..5815ffb 100644
--- a/frontend/src/components/content/ContentPane.vue
+++ b/frontend/src/components/content/ContentPane.vue
@@ -11,6 +11,8 @@ import Log from '@/components/icons/Log.vue'
 import Detail from '@/components/icons/Detail.vue'
 import ContentValueWrapper from '@/components/content_value/ContentValueWrapper.vue'
 import ContentCli from '@/components/content_value/ContentCli.vue'
+import Monitor from '@/components/icons/Monitor.vue'
+import Pub from '@/components/icons/Pub.vue'
 
 const themeVars = useThemeVars()
 
@@ -106,7 +108,10 @@ watch(
                 <template #tab>
                     <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
                         <n-icon size="16">
-                            <status :inverse="selectedSubTab === BrowserTabType.Status.toString()" stroke-width="4" />
+                            <status
+                                :inverse="selectedSubTab === BrowserTabType.Status.toString()"
+                                :stroke-color="themeVars.tabColor"
+                                stroke-width="4" />
                         </n-icon>
                         <span>{{ $t('interface.sub_tab.status') }}</span>
                     </n-space>
@@ -121,7 +126,8 @@ watch(
                         <n-icon size="16">
                             <detail
                                 :inverse="selectedSubTab === BrowserTabType.KeyDetail.toString()"
-                                fill-color="none" />
+                                :stroke-color="themeVars.tabColor"
+                                stroke-width="4" />
                         </n-icon>
                         <span>{{ $t('interface.sub_tab.key_detail') }}</span>
                     </n-space>
@@ -146,7 +152,10 @@ watch(
                 <template #tab>
                     <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
                         <n-icon size="16">
-                            <terminal :inverse="selectedSubTab === BrowserTabType.Cli.toString()" />
+                            <terminal
+                                :inverse="selectedSubTab === BrowserTabType.Cli.toString()"
+                                :stroke-color="themeVars.tabColor"
+                                stroke-width="4" />
                         </n-icon>
                         <span>{{ $t('interface.sub_tab.cli') }}</span>
                     </n-space>
@@ -155,16 +164,49 @@ watch(
             </n-tab-pane>
 
             <!-- slow log pane -->
-            <n-tab-pane :name="BrowserTabType.SlowLog.toString()">
+            <n-tab-pane :disabled="true" :name="BrowserTabType.SlowLog.toString()">
                 <template #tab>
                     <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
                         <n-icon size="16">
-                            <log :inverse="selectedSubTab === BrowserTabType.SlowLog.toString()" />
+                            <log
+                                :inverse="selectedSubTab === BrowserTabType.SlowLog.toString()"
+                                :stroke-color="themeVars.tabColor"
+                                stroke-width="4" />
                         </n-icon>
                         <span>{{ $t('interface.sub_tab.slow_log') }}</span>
                     </n-space>
                 </template>
             </n-tab-pane>
+
+            <!-- command monitor pane -->
+            <n-tab-pane :disabled="true" :name="BrowserTabType.CmdMonitor.toString()">
+                <template #tab>
+                    <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
+                        <n-icon size="16">
+                            <monitor
+                                :inverse="selectedSubTab === BrowserTabType.CmdMonitor.toString()"
+                                :stroke-color="themeVars.tabColor"
+                                stroke-width="4" />
+                        </n-icon>
+                        <span>{{ $t('interface.sub_tab.cmd_monitor') }}</span>
+                    </n-space>
+                </template>
+            </n-tab-pane>
+
+            <!-- pub/sub message pane -->
+            <n-tab-pane :disabled="true" :name="BrowserTabType.PubMessage.toString()">
+                <template #tab>
+                    <n-space :size="5" :wrap-item="false" align="center" inline justify="center">
+                        <n-icon size="16">
+                            <pub
+                                :inverse="selectedSubTab === BrowserTabType.PubMessage.toString()"
+                                :stroke-color="themeVars.tabColor"
+                                stroke-width="4" />
+                        </n-icon>
+                        <span>{{ $t('interface.sub_tab.pub_message') }}</span>
+                    </n-space>
+                </template>
+            </n-tab-pane>
         </n-tabs>
     </div>
 </template>
diff --git a/frontend/src/components/icons/Cluster.vue b/frontend/src/components/icons/Cluster.vue
index 2048775..812d7e3 100644
--- a/frontend/src/components/icons/Cluster.vue
+++ b/frontend/src/components/icons/Cluster.vue
@@ -14,10 +14,10 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
+            :fill="props.inverse ? 'currentColor' : 'none'"
             :stroke-width="props.strokeWidth"
-            fill="currentColor"
             height="8"
             stroke="currentColor"
             stroke-linecap="round"
@@ -26,8 +26,8 @@ const props = defineProps({
             x="4"
             y="34" />
         <rect
+            :fill="props.inverse ? 'currentColor' : 'none'"
             :stroke-width="props.strokeWidth"
-            fill="currentColor"
             height="12"
             stroke="currentColor"
             stroke-linecap="round"
@@ -48,8 +48,8 @@ const props = defineProps({
             stroke-linecap="round"
             stroke-linejoin="round" />
         <rect
+            :fill="props.inverse ? 'currentColor' : 'none'"
             :stroke-width="props.strokeWidth"
-            fill="currentColor"
             height="8"
             stroke="currentColor"
             stroke-linecap="round"
@@ -58,8 +58,8 @@ const props = defineProps({
             x="36"
             y="34" />
         <rect
+            :fill="props.inverse ? 'currentColor' : 'none'"
             :stroke-width="props.strokeWidth"
-            fill="currentColor"
             height="8"
             stroke="currentColor"
             stroke-linecap="round"
@@ -68,69 +68,9 @@ const props = defineProps({
             x="20"
             y="34" />
         <path
+            :stroke="props.inverse ? '#FFF' : 'currentColor'"
             :stroke-width="props.strokeWidth"
             d="M14 12H16"
-            stroke="#FFF"
-            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"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            width="8"
-            x="4"
-            y="34" />
-        <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="12"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            width="32"
-            x="8"
-            y="6" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M24 34V18"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M8 34V26H40V34"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            width="8"
-            x="36"
-            y="34" />
-        <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            width="8"
-            x="20"
-            y="34" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M14 12H16"
-            stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
diff --git a/frontend/src/components/icons/Database.vue b/frontend/src/components/icons/Database.vue
index a38374f..469217b 100644
--- a/frontend/src/components/icons/Database.vue
+++ b/frontend/src/components/icons/Database.vue
@@ -14,7 +14,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
             :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"
@@ -34,40 +34,10 @@ const props = defineProps({
             stroke-linecap="round"
             stroke-linejoin="round" />
         <ellipse
+            :fill="props.inverse ? 'currentColor' : 'none'"
             :stroke-width="props.strokeWidth"
             cx="24"
             cy="10"
-            fill="currentColor"
-            rx="20"
-            ry="6"
-            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">
-        <path
-            :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="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M44 29C44 32.3137 35.0457 35 24 35C12.9543 35 4 32.3137 4 29"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M44 20C44 23.3137 35.0457 26 24 26C12.9543 26 4 23.3137 4 20"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <ellipse
-            :stroke-width="props.strokeWidth"
-            cx="24"
-            cy="10"
-            fill="none"
             rx="20"
             ry="6"
             stroke="currentColor"
diff --git a/frontend/src/components/icons/Detail.vue b/frontend/src/components/icons/Detail.vue
index 5fedc99..27c3094 100644
--- a/frontend/src/components/icons/Detail.vue
+++ b/frontend/src/components/icons/Detail.vue
@@ -10,14 +10,18 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
+    strokeColor: {
+        type: String,
+        default: '#FFF',
+    },
 })
 </script>
 
 <template>
-    <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
+            :fill="props.inverse ? 'currentColor' : 'none'"
             :stroke-width="props.strokeWidth"
-            fill="currentColor"
             height="36"
             rx="3"
             stroke="currentColor"
@@ -26,81 +30,36 @@ const props = defineProps({
             x="6"
             y="6" />
         <rect
+            :fill="props.inverse ? props.strokeColor : 'none'"
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
             :stroke-width="props.strokeWidth"
-            fill="#FFF"
             height="8"
-            stroke="#FFF"
             stroke-linejoin="round"
             width="8"
             x="13"
             y="13" />
         <path
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
             :stroke-width="props.strokeWidth"
             d="M27 13L35 13"
-            stroke="#FFF"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
             :stroke-width="props.strokeWidth"
             d="M27 20L35 20"
-            stroke="#FFF"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
             :stroke-width="props.strokeWidth"
             d="M13 28L35 28"
-            stroke="#FFF"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
             :stroke-width="props.strokeWidth"
             d="M13 35H35"
-            stroke="#FFF"
-            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"
-            fill="none"
-            height="36"
-            rx="3"
-            stroke="currentColor"
-            stroke-linejoin="round"
-            width="36"
-            x="6"
-            y="6" />
-        <rect
-            :stroke-width="props.strokeWidth"
-            fill="none"
-            height="8"
-            stroke="currentColor"
-            stroke-linejoin="round"
-            width="8"
-            x="13"
-            y="13" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M27 13L35 13"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M27 20L35 20"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M13 28L35 28"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M13 35H35"
-            stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
diff --git a/frontend/src/components/icons/Log.vue b/frontend/src/components/icons/Log.vue
index c756ab5..d8e755b 100644
--- a/frontend/src/components/icons/Log.vue
+++ b/frontend/src/components/icons/Log.vue
@@ -8,17 +8,21 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
+    strokeColor: {
+        type: String,
+        default: '#FFF',
+    },
 })
 </script>
 
 <template>
-    <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
-            fill="currentColor"
+            :fill="props.inverse ? 'currentColor' : 'none'"
+            :stroke-width="props.strokeWidth"
             height="34"
             stroke="currentColor"
             stroke-linejoin="round"
-            stroke-width="3"
             width="28"
             x="13"
             y="10" />
@@ -28,35 +32,16 @@ const props = defineProps({
             stroke-linecap="round"
             stroke-linejoin="round"
             stroke-width="3" />
-        <path d="M21 22H33" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
-        <path d="M21 30H33" stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" />
-    </svg>
-    <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-        <rect
-            :stroke-width="strokeWidth"
-            fill="none"
-            height="34"
-            stroke="currentColor"
-            stroke-linejoin="round"
-            width="28"
-            x="13"
-            y="10" />
         <path
-            :stroke-width="strokeWidth"
-            d="M35 10V4H8C7.44772 4 7 4.44772 7 5V38H13"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="strokeWidth"
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
+            :stroke-width="props.strokeWidth"
             d="M21 22H33"
-            stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
-            :stroke-width="strokeWidth"
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
+            :stroke-width="props.strokeWidth"
             d="M21 30H33"
-            stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
diff --git a/frontend/src/components/icons/Monitor.vue b/frontend/src/components/icons/Monitor.vue
new file mode 100644
index 0000000..acc0c54
--- /dev/null
+++ b/frontend/src/components/icons/Monitor.vue
@@ -0,0 +1,40 @@
+<script setup>
+const props = defineProps({
+    inverse: {
+        type: Boolean,
+        default: false,
+    },
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+    strokeColor: {
+        type: String,
+        default: '#FFF',
+    },
+})
+</script>
+
+<template>
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <rect
+            :fill="props.inverse ? 'currentColor' : 'none'"
+            :stroke-width="props.strokeWidth"
+            height="36"
+            rx="3"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            width="36"
+            x="6"
+            y="6" />
+        <path
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
+            :stroke-width="props.strokeWidth"
+            d="M12 25H15L19 14L22 36L27 23L31 29L34 25H37"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/src/components/icons/Pub.vue b/frontend/src/components/icons/Pub.vue
new file mode 100644
index 0000000..1abc0c5
--- /dev/null
+++ b/frontend/src/components/icons/Pub.vue
@@ -0,0 +1,46 @@
+<script setup>
+const props = defineProps({
+    inverse: {
+        type: Boolean,
+        default: false,
+    },
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+    strokeColor: {
+        type: String,
+        default: '#FFF',
+    },
+})
+</script>
+
+<template>
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M33 38H22V30H36V22H44V38H39L36 41L33 38Z"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :fill="props.inverse ? 'currentColor' : 'none'"
+            :stroke-width="props.strokeWidth"
+            d="M4 6H36V30H17L13 34L9 30H4V6Z"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
+            :stroke-width="props.strokeWidth"
+            d="M12 22H18"
+            stroke-linecap="round" />
+        <path
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
+            :stroke-width="props.strokeWidth"
+            d="M12 14H24"
+            stroke-linecap="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/frontend/src/components/icons/Server.vue b/frontend/src/components/icons/Server.vue
index 917abe9..b47c0f8 100644
--- a/frontend/src/components/icons/Server.vue
+++ b/frontend/src/components/icons/Server.vue
@@ -14,59 +14,29 @@ const props = defineProps({
 </script>
 
 <template>
-    <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <path
+            :fill="props.inverse ? 'currentColor' : 'none'"
             :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"
-            fill="currentColor"
             stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round" />
-        <path :stroke-width="props.strokeWidth" d="M4 32H44" stroke="#FFF" stroke-linecap="round" />
         <path
+            :stroke="props.inverse ? '#FFF' : 'currentColor'"
+            :stroke-width="props.strokeWidth"
+            d="M4 32H44"
+            stroke-linecap="round" />
+        <path
+            :stroke="props.inverse ? '#FFF' : 'currentColor'"
             :stroke-width="props.strokeWidth"
             d="M10 38H11"
-            stroke="#FFF"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke="props.inverse ? '#FFF' : 'currentColor'"
             :stroke-width="props.strokeWidth"
             d="M26 38H38"
-            stroke="#FFF"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M44 37V27"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M4 37V27"
-            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">
-        <path
-            :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"
-            fill="none"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path :stroke-width="props.strokeWidth" d="M4 32H44" stroke="currentColor" stroke-linecap="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M10 38H11"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M26 38H38"
-            stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
diff --git a/frontend/src/components/icons/Status.vue b/frontend/src/components/icons/Status.vue
index 6386902..1bbda55 100644
--- a/frontend/src/components/icons/Status.vue
+++ b/frontend/src/components/icons/Status.vue
@@ -8,6 +8,10 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
+    strokeColor: {
+        type: String,
+        default: '#FFF',
+    },
 })
 </script>
 
@@ -18,9 +22,9 @@ const props = defineProps({
             fill="currentColor"
             stroke="currentColor"
             stroke-width="3" />
-        <path :stroke-width="props.strokeWidth" d="M24 17V31" stroke="#FFF" stroke-linecap="round" />
-        <path :stroke-width="props.strokeWidth" d="M32 24V31" stroke="#FFF" stroke-linecap="round" />
-        <path :stroke-width="props.strokeWidth" d="M16 22V31" stroke="#FFF" stroke-linecap="round" />
+        <path :stroke="props.strokeColor" :stroke-width="props.strokeWidth" d="M24 17V31" stroke-linecap="round" />
+        <path :stroke="props.strokeColor" :stroke-width="props.strokeWidth" d="M32 24V31" stroke-linecap="round" />
+        <path :stroke="props.strokeColor" :stroke-width="props.strokeWidth" d="M16 22V31" stroke-linecap="round" />
     </svg>
     <svg v-else fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
diff --git a/frontend/src/components/icons/Terminal.vue b/frontend/src/components/icons/Terminal.vue
index e93eeab..d67d15b 100644
--- a/frontend/src/components/icons/Terminal.vue
+++ b/frontend/src/components/icons/Terminal.vue
@@ -10,14 +10,18 @@ const props = defineProps({
         type: [Number, String],
         default: 3,
     },
+    strokeColor: {
+        type: String,
+        default: '#FFF',
+    },
 })
 </script>
 
 <template>
-    <svg v-if="props.inverse" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
         <rect
+            :fill="props.inverse ? 'currentColor' : 'none'"
             :stroke-width="props.strokeWidth"
-            fill="currentColor"
             height="32"
             rx="2"
             stroke="currentColor"
@@ -26,39 +30,15 @@ const props = defineProps({
             x="4"
             y="8" />
         <path
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
             :stroke-width="props.strokeWidth"
             d="M12 18L19 24L12 30"
-            stroke="#FFF"
             stroke-linecap="round"
             stroke-linejoin="round" />
         <path
+            :stroke="props.inverse ? props.strokeColor : 'currentColor'"
             :stroke-width="props.strokeWidth"
             d="M23 32H36"
-            stroke="#FFF"
-            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"
-            fill="none"
-            height="32"
-            rx="2"
-            stroke="currentColor"
-            stroke-linejoin="round"
-            width="40"
-            x="4"
-            y="8" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M12 18L19 24L12 30"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round" />
-        <path
-            :stroke-width="props.strokeWidth"
-            d="M23 32H36"
-            stroke="currentColor"
             stroke-linecap="round"
             stroke-linejoin="round" />
     </svg>
diff --git a/frontend/src/consts/browser_tab_type.js b/frontend/src/consts/browser_tab_type.js
index 491a681..c4394a6 100644
--- a/frontend/src/consts/browser_tab_type.js
+++ b/frontend/src/consts/browser_tab_type.js
@@ -7,4 +7,6 @@ export const BrowserTabType = {
     KeyDetail: 'key_detail',
     Cli: 'cli',
     SlowLog: 'slow_log',
+    CmdMonitor: 'cmd_monitor',
+    PubMessage: 'pub_message',
 }
diff --git a/frontend/src/langs/en.json b/frontend/src/langs/en.json
index 1c4bcbc..338f29e 100644
--- a/frontend/src/langs/en.json
+++ b/frontend/src/langs/en.json
@@ -101,8 +101,10 @@
     "sub_tab": {
       "status": "Status",
       "key_detail": "Key Detail",
-      "cli": "Command Line",
-      "slow_log": "Slow Log"
+      "cli": "Console",
+      "slow_log": "Slow Log",
+      "cmd_monitor": "Monitor Commands",
+      "pub_message": "Pub/Sub"
     }
   },
   "ribbon": {
diff --git a/frontend/src/langs/zh-cn.json b/frontend/src/langs/zh-cn.json
index e118f98..a29b729 100644
--- a/frontend/src/langs/zh-cn.json
+++ b/frontend/src/langs/zh-cn.json
@@ -102,7 +102,9 @@
       "status": "状态",
       "key_detail": "键详情",
       "cli": "命令行",
-      "slow_log": "慢日志"
+      "slow_log": "慢日志",
+      "cmd_monitor": "监控命令",
+      "pub_message": "推送/订阅"
     }
   },
   "ribbon": {