feat: add connection mark color

frontend/src/components/dialogs/ConnectionDialog.vue

@@ -59,7 +59,7 @@ const showTestConnFailResult = computed(() => {
     return !isEmpty(testResult.value) && showTestResult.value === true
 })
 const formLabelWidth = computed(() => {
-    // Compatible with long english word
+    // compatible with long english word
     if (tab.value === 'advanced' && i18n.locale.value === 'en') {
         return '140px'
     }
@@ -70,21 +70,21 @@ const generalFormRef = ref(null)
 const advanceFormRef = ref(null)
 
 const onSaveConnection = async () => {
-    // Validate general form
+    // validate general form
     await generalFormRef.value?.validate((err) => {
         if (err) {
             nextTick(() => (tab.value = 'general'))
         }
     })
 
-    // Validate advance form
+    // validate advance form
     await advanceFormRef.value?.validate((err) => {
         if (err) {
             nextTick(() => (tab.value = 'advanced'))
         }
     })
 
-    // Store new connection
+    // store new connection
     const { success, msg } = await connectionStore.saveConnection(editName.value, generalForm.value)
     if (!success) {
         message.error(msg)

frontend/src/components/dialogs/KeyFilterDialog.vue

@@ -90,7 +90,7 @@ const onClose = () => {
             </n-form-item>
             <n-form-item :label="$t('filter_pattern')" required>
                 <n-input-group>
-                    <n-tooltip>
+                    <n-tooltip trigger="focus">
                         <template #trigger>
                             <n-input v-model:value="filterForm.pattern" placeholder="Filter Pattern" clearable />
                         </template>

frontend/src/components/sidebar/BrowserTree.vue

@@ -46,6 +46,18 @@ const data = computed(() => {
     ]
 })
 
+const backgroundColor = computed(() => {
+    const { markColor: hex = '' } = connectionStore.serverProfile[props.server] || {}
+    if (isEmpty(hex)) {
+        return ''
+    }
+    const bigint = parseInt(hex.slice(1), 16)
+    const r = (bigint >> 16) & 255
+    const g = (bigint >> 8) & 255
+    const b = bigint & 255
+    return `rgba(${r}, ${g}, ${b}, 0.2)`
+})
+
 const contextMenuParam = reactive({
     show: false,
     x: 0,
@@ -171,7 +183,6 @@ onMounted(async () => {
     try {
         // TODO: Show loading list status
         loadingConnections.value = true
-        // nextTick(connectionStore.initConnection)
     } finally {
         loadingConnections.value = false
     }
@@ -449,37 +460,44 @@ const handleOutsideContextMenu = () => {
 </script>
 
 <template>
-    <n-tree
-        :block-line="true"
-        :block-node="true"
-        :animated="false"
-        :cancelable="false"
-        :data="data"
-        :expand-on-click="false"
-        :expanded-keys="expandedKeys"
-        :selected-keys="selectedKeys"
-        @update:selected-keys="onUpdateSelectedKeys"
-        :node-props="nodeProps"
-        @load="onLoadTree"
-        @update:expanded-keys="onUpdateExpanded"
-        :render-label="renderLabel"
-        :render-prefix="renderPrefix"
-        :render-suffix="renderSuffix"
-        class="fill-height"
-        virtual-scroll
-    />
-    <n-dropdown
-        :animated="false"
-        :options="contextMenuParam.options"
-        :render-label="renderContextLabel"
-        :show="contextMenuParam.show"
-        :x="contextMenuParam.x"
-        :y="contextMenuParam.y"
-        placement="bottom-start"
-        trigger="manual"
-        @clickoutside="handleOutsideContextMenu"
-        @select="handleSelectContextMenu"
-    />
+    <div class="browser-tree-wrapper" :style="{ backgroundColor }">
+        <n-tree
+            :block-line="true"
+            :block-node="true"
+            :animated="false"
+            :cancelable="false"
+            :data="data"
+            :expand-on-click="false"
+            :expanded-keys="expandedKeys"
+            :selected-keys="selectedKeys"
+            @update:selected-keys="onUpdateSelectedKeys"
+            :node-props="nodeProps"
+            @load="onLoadTree"
+            @update:expanded-keys="onUpdateExpanded"
+            :render-label="renderLabel"
+            :render-prefix="renderPrefix"
+            :render-suffix="renderSuffix"
+            class="fill-height"
+            virtual-scroll
+        />
+        <n-dropdown
+            :animated="false"
+            :options="contextMenuParam.options"
+            :render-label="renderContextLabel"
+            :show="contextMenuParam.show"
+            :x="contextMenuParam.x"
+            :y="contextMenuParam.y"
+            placement="bottom-start"
+            trigger="manual"
+            @clickoutside="handleOutsideContextMenu"
+            @select="handleSelectContextMenu"
+        />
+    </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.browser-tree-wrapper {
+    height: 100%;
+    overflow: hidden;
+}
+</style>

frontend/src/components/sidebar/ConnectionTree.vue

@@ -118,10 +118,20 @@ const menuOptions = {
 }
 
 const renderLabel = ({ option }) => {
-    // switch (option.type) {
-    //     case ConnectionType.Server:
-    //         return h(ConnectionTreeItem, { title: option.label })
-    // }
+    if (option.type === ConnectionType.Server) {
+        const { markColor = '' } = connectionStore.serverProfile[option.name] || {}
+        return h(
+            'div',
+            {
+                style: {
+                    // color: markColor,
+                    borderRadius: '3px',
+                    backgroundColor: markColor,
+                },
+            },
+            { default: () => option.label }
+        )
+    }
     return option.label
 }