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,6 +460,7 @@ const handleOutsideContextMenu = () => {
 </script>
 
 <template>
+    <div class="browser-tree-wrapper" :style="{ backgroundColor }">
         <n-tree
             :block-line="true"
             :block-node="true"
@@ -480,6 +492,12 @@ const handleOutsideContextMenu = () => {
             @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
 }