Refactor server and database save structure, support multiple server detail tab

frontend/src/components/sidebar/DatabasePane.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { NIcon } from 'naive-ui'
+import AddGroup from '../icons/AddGroup.vue'
+import AddLink from '../icons/AddLink.vue'
+import DatabaseTree from './DatabaseTree.vue'
+import IconButton from '../common/IconButton.vue'
+import Filter from '../icons/Filter.vue'
+import useTabStore from '../../stores/tab.js'
+import { computed } from 'vue'
+import { get } from 'lodash'
+
+const tabStore = useTabStore()
+const currentName = computed(() => get(tabStore.currentTab, 'name', ''))
+</script>
+
+<template>
+    <div class="nav-pane-container flex-box-v">
+        <database-tree :server="currentName" />
+
+        <!-- bottom function bar -->
+        <div class="nav-pane-bottom flex-box-h">
+            <icon-button :icon="AddLink" color="#555" size="20" stroke-width="4" t-tooltip="new_conn" />
+            <icon-button :icon="AddGroup" color="#555" size="20" stroke-width="4" t-tooltip="new_group" />
+            <n-input placeholder="">
+                <template #prefix>
+                    <n-icon :component="Filter" color="#aaa" size="20" />
+                </template>
+            </n-input>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.nav-pane-container {
+    overflow: hidden;
+    background-color: var(--bg-color);
+
+    .nav-pane-bottom {
+        align-items: center;
+        gap: 5px;
+        padding: 3px 3px 5px 5px;
+    }
+}
+</style>