From bc499643db326f529ce7b91dac824e4794eee92a Mon Sep 17 00:00:00 2001
From: tiny-craft <137850705+tiny-craft@users.noreply.github.com>
Date: Sat, 2 Sep 2023 21:47:02 +0800
Subject: [PATCH] perf: add mark color in tab

---
 .../components/content/ContentValueTab.vue    | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/content/ContentValueTab.vue b/frontend/src/components/content/ContentValueTab.vue
index bd0e20c..f391d7c 100644
--- a/frontend/src/components/content/ContentValueTab.vue
+++ b/frontend/src/components/content/ContentValueTab.vue
@@ -12,10 +12,6 @@ const i18n = useI18n()
 const tabStore = useTabStore()
 const connectionStore = useConnectionStore()
 
-const props = defineProps({
-    backgroundColor: String,
-})
-
 const onCloseTab = (tabIndex) => {
     $dialog.warning(i18n.t('close_confirm'), () => {
         const tab = get(tabStore.tabs, tabIndex)
@@ -25,14 +21,18 @@ const onCloseTab = (tabIndex) => {
     })
 }
 
-const activeTabStyle = computed(() => ({
-    backgroundColor: themeVars.value.baseColor,
-    borderTopWidth: '1px',
-    borderTopColor: themeVars.value.borderColor,
-    borderBottomColor: themeVars.value.baseColor,
-    borderTopLeftRadius: themeVars.value.borderRadius,
-    borderTopRightRadius: themeVars.value.borderRadius,
-}))
+const activeTabStyle = computed(() => {
+    const { name } = tabStore.currentTab
+    const { markColor = '' } = connectionStore.serverProfile[name] || {}
+    return {
+        backgroundColor: themeVars.value.baseColor,
+        borderTopWidth: markColor ? '3px' : '1px',
+        borderTopColor: markColor || themeVars.value.borderColor,
+        borderBottomColor: themeVars.value.baseColor,
+        borderTopLeftRadius: themeVars.value.borderRadius,
+        borderTopRightRadius: themeVars.value.borderRadius,
+    }
+})
 const inactiveTabStyle = computed(() => ({
     borderWidth: '0 0 1px',
     borderBottomColor: themeVars.value.borderColor,