diff --git a/qodana.yaml b/qodana.yaml
deleted file mode 100644
index 215d80806c5f9..0000000000000
--- a/qodana.yaml
+++ /dev/null
@@ -1,29 +0,0 @@
-#-------------------------------------------------------------------------------#
-#               Qodana analysis is configured by qodana.yaml file               #
-#             https://www.jetbrains.com/help/qodana/qodana-yaml.html            #
-#-------------------------------------------------------------------------------#
-version: "1.0"
-
-#Specify inspection profile for code analysis
-profile:
-  name: qodana.starter
-
-#Enable inspections
-#include:
-#  - name: <SomeEnabledInspectionId>
-
-#Disable inspections
-#exclude:
-#  - name: <SomeDisabledInspectionId>
-#    paths:
-#      - <path/where/not/run/inspection>
-
-#Execute shell command before Qodana execution (Applied in CI/CD pipeline)
-#bootstrap: sh ./prepare-qodana.sh
-
-#Install IDE plugins before Qodana execution (Applied in CI/CD pipeline)
-#plugins:
-#  - id: <plugin.id> #(plugin id can be found at https://plugins.jetbrains.com)
-
-#Specify Qodana linter for analysis (Applied in CI/CD pipeline)
-linter: jetbrains/qodana-go:latest
diff --git a/src/components/core/database/DatabaseSidebar.vue b/src/components/core/database/DatabaseSidebar.vue
new file mode 100644
index 0000000000000..85ab971f93b10
--- /dev/null
+++ b/src/components/core/database/DatabaseSidebar.vue
@@ -0,0 +1,157 @@
+<script setup lang="tsx">
+import { ref, computed, watch } from 'vue';
+import { ElTree, ElInput } from 'element-plus';
+import { debounce } from 'lodash';
+import { translate } from '@/utils';
+import type { FilterNodeMethodFunction } from 'element-plus/es/components/tree/src/tree.type';
+
+const t = translate;
+
+const props = defineProps<{
+  treeItems: DatabaseNavItem[];
+  defaultExpandedKeys: string[];
+}>();
+
+const emit = defineEmits<{
+  (e: 'nodeClick', data: DatabaseNavItem): void;
+  (e: 'contextMenuClick', event: MouseEvent, data: DatabaseNavItem): void;
+  (e: 'refresh'): void;
+  (e: 'createDatabase'): void;
+  (e: 'createTable'): void;
+}>();
+
+const treeRef = ref<InstanceType<typeof ElTree>>();
+const searchKeyword = ref('');
+const showSearch = ref(false);
+
+const onSearchFilter: FilterNodeMethodFunction = (value, data) => {
+  if (!value) return true;
+  return data.label.toLowerCase().includes(value.toLowerCase());
+};
+
+const debouncedFilter = debounce(() => {
+  treeRef.value?.filter(searchKeyword.value);
+}, 300);
+
+watch(searchKeyword, debouncedFilter);
+
+const toggleSearch = () => {
+  showSearch.value = !showSearch.value;
+  if (!showSearch.value) {
+    searchKeyword.value = '';
+    treeRef.value?.filter('');
+  }
+};
+
+const onRefresh = () => {
+  emit('refresh');
+};
+
+const onCreateDatabase = () => {
+  emit('createDatabase');
+};
+
+const onCreateTable = () => {
+  emit('createTable');
+};
+
+defineExpose({ treeRef });
+
+defineOptions({ name: 'ClDatabaseSidebar' });
+</script>
+
+<template>
+  <div class="sidebar">
+    <div class="sidebar-actions">
+      <el-button @click="toggleSearch">
+        <i class="fa fa-search"></i>
+      </el-button>
+      <el-button @click="onRefresh">
+        <i class="fa fa-sync"></i>
+      </el-button>
+      <el-button @click="onCreateDatabase">
+        <i class="fa fa-database"></i>
+      </el-button>
+      <el-button @click="onCreateTable">
+        <i class="fa fa-table"></i>
+      </el-button>
+    </div>
+    <div v-if="showSearch" class="sidebar-search">
+      <el-input
+        v-model="searchKeyword"
+        :placeholder="t('views.database.databases.sidebar.search.placeholder')"
+        clearable
+        @clear="
+          () => {
+            searchKeyword = '';
+            showSearch = false;
+          }
+        "
+      />
+    </div>
+    <el-scrollbar>
+      <el-tree
+        ref="treeRef"
+        node-key="id"
+        :data="treeItems"
+        :props="{
+          class: _data => {
+            if (_data.new) return 'new';
+            return '';
+          },
+        }"
+        :filter-node-method="onSearchFilter"
+        :expand-on-click-node="false"
+        :default-expanded-keys="defaultExpandedKeys"
+        highlight-current
+        @node-click="data => emit('nodeClick', data)"
+        @node-contextmenu="
+          (event, _, node) => emit('contextMenuClick', event, node.data)
+        "
+      >
+        <template #default="{ node, data }">
+          <span class="custom-tree-node">
+            <span>
+              <i :class="data.icon"></i>
+              {{ node.label }}
+            </span>
+          </span>
+        </template>
+      </el-tree>
+    </el-scrollbar>
+  </div>
+</template>
+
+<style scoped>
+.sidebar {
+  width: 250px;
+  border-right: 1px solid var(--el-border-color);
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar-actions {
+  display: flex;
+  justify-content: space-around;
+  padding: 10px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+
+.sidebar-search {
+  padding: 10px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+.custom-tree-node i {
+  margin-right: 8px;
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index c73ce5c45b3ea..6e1d3b062215a 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,8 +1,9 @@
 import CreateEditDatabaseDialog from './core/database/CreateEditDatabaseDialog.vue';
 import CreateEditDatabaseTableDialog from './core/database/CreateEditDatabaseTableDialog.vue';
-import DatabaseDatabaseDetail from './core/database/DatabaseDatabaseDetail.vue';
 import DatabaseDataSource from './core/database/DatabaseDataSource.vue';
+import DatabaseDatabaseDetail from './core/database/DatabaseDatabaseDetail.vue';
 import DatabaseForm from './core/database/DatabaseForm.vue';
+import DatabaseSidebar from './core/database/DatabaseSidebar.vue';
 import DatabaseStatus from './core/database/DatabaseStatus.vue';
 import DatabaseTableDetail from './core/database/DatabaseTableDetail.vue';
 import DatabaseTableDetailColumns from './core/database/tables/DatabaseTableDetailColumns.vue';
@@ -84,10 +85,10 @@ import Chart from './ui/chart/Chart.vue';
 import Metric from './ui/chart/Metric.vue';
 import ContextMenu from './ui/context-menu/ContextMenu.vue';
 import ContextMenuList from './ui/context-menu/ContextMenuList.vue';
-import * as date from './ui/date/date';
 import DateRangePicker from './ui/date/DateRangePicker.vue';
 import DateTimeRangePicker from './ui/date/DateTimeRangePicker.vue';
 import RangePicker from './ui/date/RangePicker.vue';
+import * as date from './ui/date/date';
 import ConfirmDialog from './ui/dialog/ConfirmDialog.vue';
 import CreateEditDialog from './ui/dialog/CreateEditDialog.vue';
 import Dialog from './ui/dialog/Dialog.vue';
@@ -101,7 +102,6 @@ import FileActions from './ui/file/FileActions.vue';
 import FileDiff from './ui/file/FileDiff.vue';
 import FileEditor from './ui/file/FileEditor.vue';
 import FileEditorCreateWithAiDialog from './ui/file/FileEditorCreateWithAiDialog.vue';
-import * as fileEditorDropZone from './ui/file/fileEditorDropZone';
 import FileEditorNavMenu from './ui/file/FileEditorNavMenu.vue';
 import FileEditorNavMenuContextMenu from './ui/file/FileEditorNavMenuContextMenu.vue';
 import FileEditorNavTabs from './ui/file/FileEditorNavTabs.vue';
@@ -111,21 +111,23 @@ import FileEditorSettingsDialog from './ui/file/FileEditorSettingsDialog.vue';
 import FileTab from './ui/file/FileTab.vue';
 import FileUpload from './ui/file/FileUpload.vue';
 import UploadFilesDialog from './ui/file/UploadFilesDialog.vue';
-import * as filter from './ui/filter/filter';
+import * as fileEditorDropZone from './ui/file/fileEditorDropZone';
 import FilterCondition from './ui/filter/FilterCondition.vue';
 import FilterConditionList from './ui/filter/FilterConditionList.vue';
 import FilterInput from './ui/filter/FilterInput.vue';
 import FilterSelect from './ui/filter/FilterSelect.vue';
+import * as filter from './ui/filter/filter';
 import Form from './ui/form/Form.vue';
 import FormItem from './ui/form/FormItem.vue';
-import * as formTable from './ui/form/formTable';
 import FormTableField from './ui/form/FormTableField.vue';
+import * as formTable from './ui/form/formTable';
 import useForm from './ui/form/useForm';
 import AtomMaterialIcon from './ui/icon/AtomMaterialIcon.vue';
-import * as icon from './ui/icon/icon';
 import Icon from './ui/icon/Icon.vue';
 import MenuItemIcon from './ui/icon/MenuItemIcon.vue';
+import * as icon from './ui/icon/icon';
 import InputList from './ui/input/InputList.vue';
+import LexicalEditor from './ui/lexical/LexicalEditor.vue';
 import BlockOptionsDropdownList from './ui/lexical/components/BlockOptionsDropdownList.vue';
 import DropdownButton from './ui/lexical/components/DropdownButton.vue';
 import FloatLinkEditor from './ui/lexical/components/FloatLinkEditor.vue';
@@ -141,7 +143,6 @@ import useLexicalList from './ui/lexical/composables/useLexicalList';
 import useLexicalMounted from './ui/lexical/composables/useLexicalMounted';
 import useRichTextSetup from './ui/lexical/composables/useRichTextSetup';
 import useVariableSetup from './ui/lexical/composables/useVariableSetup';
-import LexicalEditor from './ui/lexical/LexicalEditor.vue';
 import * as ImageNode from './ui/lexical/nodes/ImageNode';
 import * as VariableNode from './ui/lexical/nodes/VariableNode';
 import LexicalAutoFocusPlugin from './ui/lexical/plugins/LexicalAutoFocusPlugin.vue';
@@ -179,14 +180,8 @@ import NavTabs from './ui/nav/NavTabs.vue';
 import InputSelect from './ui/select/InputSelect.vue';
 import Switch from './ui/switch/Switch.vue';
 import ActionTab from './ui/tab/ActionTab.vue';
-import * as action from './ui/table/action';
-import * as column from './ui/table/column';
-import * as data from './ui/table/data';
 import EditTable from './ui/table/EditTable.vue';
 import EditTableActionCell from './ui/table/EditTableActionCell.vue';
-import * as header from './ui/table/header';
-import * as pagination from './ui/table/pagination';
-import * as store from './ui/table/store';
 import Table from './ui/table/Table.vue';
 import TableActions from './ui/table/TableActions.vue';
 import TableCell from './ui/table/TableCell.vue';
@@ -197,6 +192,12 @@ import TableHeaderAction from './ui/table/TableHeaderAction.vue';
 import TableHeaderDialog from './ui/table/TableHeaderDialog.vue';
 import TableHeaderDialogFilter from './ui/table/TableHeaderDialogFilter.vue';
 import TableHeaderDialogSort from './ui/table/TableHeaderDialogSort.vue';
+import * as action from './ui/table/action';
+import * as column from './ui/table/column';
+import * as data from './ui/table/data';
+import * as header from './ui/table/header';
+import * as pagination from './ui/table/pagination';
+import * as store from './ui/table/store';
 import CheckTag from './ui/tag/CheckTag.vue';
 import CheckTagGroup from './ui/tag/CheckTagGroup.vue';
 import LinkTag from './ui/tag/LinkTag.vue';
@@ -210,9 +211,10 @@ import TransferPanel from './ui/transfer/TransferPanel.vue';
 export {
   CreateEditDatabaseDialog as ClCreateEditDatabaseDialog,
   CreateEditDatabaseTableDialog as ClCreateEditDatabaseTableDialog,
-  DatabaseDatabaseDetail as ClDatabaseDatabaseDetail,
   DatabaseDataSource as ClDatabaseDataSource,
+  DatabaseDatabaseDetail as ClDatabaseDatabaseDetail,
   DatabaseForm as ClDatabaseForm,
+  DatabaseSidebar as ClDatabaseSidebar,
   DatabaseStatus as ClDatabaseStatus,
   DatabaseTableDetail as ClDatabaseTableDetail,
   DatabaseTableDetailColumns as ClDatabaseTableDetailColumns,
@@ -294,10 +296,10 @@ export {
   Metric as ClMetric,
   ContextMenu as ClContextMenu,
   ContextMenuList as ClContextMenuList,
-  date as date,
   DateRangePicker as ClDateRangePicker,
   DateTimeRangePicker as ClDateTimeRangePicker,
   RangePicker as ClRangePicker,
+  date as date,
   ConfirmDialog as ClConfirmDialog,
   CreateEditDialog as ClCreateEditDialog,
   Dialog as ClDialog,
@@ -311,7 +313,6 @@ export {
   FileDiff as ClFileDiff,
   FileEditor as ClFileEditor,
   FileEditorCreateWithAiDialog as ClFileEditorCreateWithAiDialog,
-  fileEditorDropZone as fileEditorDropZone,
   FileEditorNavMenu as ClFileEditorNavMenu,
   FileEditorNavMenuContextMenu as ClFileEditorNavMenuContextMenu,
   FileEditorNavTabs as ClFileEditorNavTabs,
@@ -321,21 +322,23 @@ export {
   FileTab as ClFileTab,
   FileUpload as ClFileUpload,
   UploadFilesDialog as ClUploadFilesDialog,
-  filter as filter,
+  fileEditorDropZone as fileEditorDropZone,
   FilterCondition as ClFilterCondition,
   FilterConditionList as ClFilterConditionList,
   FilterInput as ClFilterInput,
   FilterSelect as ClFilterSelect,
+  filter as filter,
   Form as ClForm,
   FormItem as ClFormItem,
-  formTable as formTable,
   FormTableField as ClFormTableField,
+  formTable as formTable,
   useForm as useForm,
   AtomMaterialIcon as ClAtomMaterialIcon,
-  icon as icon,
   Icon as ClIcon,
   MenuItemIcon as ClMenuItemIcon,
+  icon as icon,
   InputList as ClInputList,
+  LexicalEditor as ClLexicalEditor,
   BlockOptionsDropdownList as ClBlockOptionsDropdownList,
   DropdownButton as ClDropdownButton,
   FloatLinkEditor as ClFloatLinkEditor,
@@ -351,7 +354,6 @@ export {
   useLexicalMounted as useLexicalMounted,
   useRichTextSetup as useRichTextSetup,
   useVariableSetup as useVariableSetup,
-  LexicalEditor as ClLexicalEditor,
   ImageNode as ImageNode,
   VariableNode as VariableNode,
   LexicalAutoFocusPlugin as ClLexicalAutoFocusPlugin,
@@ -389,14 +391,8 @@ export {
   InputSelect as ClInputSelect,
   Switch as ClSwitch,
   ActionTab as ClActionTab,
-  action as action,
-  column as column,
-  data as data,
   EditTable as ClEditTable,
   EditTableActionCell as ClEditTableActionCell,
-  header as header,
-  pagination as pagination,
-  store as store,
   Table as ClTable,
   TableActions as ClTableActions,
   TableCell as ClTableCell,
@@ -407,6 +403,12 @@ export {
   TableHeaderDialog as ClTableHeaderDialog,
   TableHeaderDialogFilter as ClTableHeaderDialogFilter,
   TableHeaderDialogSort as ClTableHeaderDialogSort,
+  action as action,
+  column as column,
+  data as data,
+  header as header,
+  pagination as pagination,
+  store as store,
   CheckTag as ClCheckTag,
   CheckTagGroup as ClCheckTagGroup,
   LinkTag as ClLinkTag,
diff --git a/src/i18n/lang/en/common.ts b/src/i18n/lang/en/common.ts
index f1cb080150160..23669a623d349 100644
--- a/src/i18n/lang/en/common.ts
+++ b/src/i18n/lang/en/common.ts
@@ -144,6 +144,9 @@ const common: LCommon = {
     asc: 'Ascending',
     desc: 'Descending',
   },
+  validate: {
+    cannotBeEmpty: 'Cannot be empty',
+  },
 };
 
 export default common;
diff --git a/src/i18n/lang/zh/common.ts b/src/i18n/lang/zh/common.ts
index 69d9c4c0bbf4f..cf30ae413f05a 100644
--- a/src/i18n/lang/zh/common.ts
+++ b/src/i18n/lang/zh/common.ts
@@ -144,6 +144,9 @@ const common: LCommon = {
     asc: '升序',
     desc: '降序',
   },
+  validate: {
+    cannotBeEmpty: '不能为空',
+  },
 };
 
 export default common;
diff --git a/src/interfaces/i18n/common.d.ts b/src/interfaces/i18n/common.d.ts
index 3c5feb9f228a6..12b668c8aa2b4 100644
--- a/src/interfaces/i18n/common.d.ts
+++ b/src/interfaces/i18n/common.d.ts
@@ -157,5 +157,8 @@ export declare global {
       asc: string;
       desc: string;
     };
+    validate: {
+      cannotBeEmpty: string;
+    };
   }
 }
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
index 31f4c535ff783..98e315c5d9ebc 100644
--- a/src/layouts/index.ts
+++ b/src/layouts/index.ts
@@ -1,4 +1,5 @@
 import BlankLayout from './BlankLayout.vue';
+import NormalLayout from './NormalLayout.vue';
 import Header from './components/Header.vue';
 import Sidebar from './components/Sidebar.vue';
 import SidebarItem from './components/SidebarItem.vue';
@@ -8,10 +9,10 @@ import useDetail from './content/detail/useDetail';
 import ListLayout from './content/list/ListLayout.vue';
 import useList from './content/list/useList';
 import SimpleLayout from './content/simple/SimpleLayout.vue';
-import NormalLayout from './NormalLayout.vue';
 
 export {
   BlankLayout as ClBlankLayout,
+  NormalLayout as ClNormalLayout,
   Header as ClHeader,
   Sidebar as ClSidebar,
   SidebarItem as ClSidebarItem,
@@ -21,5 +22,4 @@ export {
   ListLayout as ClListLayout,
   useList as useList,
   SimpleLayout as ClSimpleLayout,
-  NormalLayout as ClNormalLayout,
 };
diff --git a/src/views/database/detail/tabs/DatabaseDetailTabDatabases.vue b/src/views/database/detail/tabs/DatabaseDetailTabDatabases.vue
index e8f7193ce19bd..4968c8dcd54e0 100644
--- a/src/views/database/detail/tabs/DatabaseDetailTabDatabases.vue
+++ b/src/views/database/detail/tabs/DatabaseDetailTabDatabases.vue
@@ -1,7 +1,21 @@
 <script setup lang="tsx">
-import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue';
+import {
+  computed,
+  nextTick,
+  onBeforeMount,
+  onBeforeUnmount,
+  ref,
+  watch,
+} from 'vue';
 import { useStore } from 'vuex';
-import { ElTree } from 'element-plus';
+import {
+  ElInput,
+  ElTree,
+  ElForm,
+  ElFormItem,
+  FormInstance,
+  FormRules,
+} from 'element-plus';
 import type {
   FilterNodeMethodFunction,
   FilterValue,
@@ -25,6 +39,8 @@ const { database: state } = store.state as RootStoreState;
 
 const { activeId } = useDatabaseDetail();
 
+const sidebarRef = ref<InstanceType<typeof DatabaseSidebar>>();
+
 const treeItems = computed<DatabaseNavItem[]>(() => {
   const { metadata } = state;
   if (!metadata?.databases) return [] as DatabaseNavItem[];
@@ -105,7 +121,7 @@ const activeDatabaseName = ref();
 const defaultTabName = ref<string>(TAB_NAME_OVERVIEW);
 const activeNavItem = ref<DatabaseNavItem>();
 const onNodeClick = async (data: DatabaseNavItem) => {
-  return selectNode(data);
+  await selectNode(data);
 };
 const selectNode = async (data: DatabaseNavItem) => {
   const { id, type, new: isNew } = data;
@@ -137,19 +153,44 @@ const selectNode = async (data: DatabaseNavItem) => {
 
   // highlight current node
   setTimeout(() => {
-    treeRef.value?.setCurrentKey(id);
+    sidebarRef.value?.treeRef?.setCurrentKey(id);
   }, 0);
 };
+
+const formRef = ref<FormInstance>();
+const formRules = ref<FormRules>({
+  edit_name: [
+    {
+      required: true,
+      message: t('common.validate.cannotBeEmpty'),
+      trigger: 'blur',
+    },
+  ],
+});
+
+const validateAndSave = async (data: DatabaseNavItem) => {
+  if (!formRef.value) return;
+
+  try {
+    await formRef.value.validate();
+    data.label = data.edit_name;
+    data.edit = false;
+  } catch (error) {
+    console.error('Validation failed', error);
+  }
+};
+
 const onNodeCancel = async (data: DatabaseNavItem) => {
   if (!data.new) return;
-  const node = treeRef.value?.getNode(data.id);
+  const node = sidebarRef.value?.treeRef?.getNode(data.id);
   if (!node) return;
-  treeRef.value?.remove(node);
+  sidebarRef.value?.treeRef?.remove(node);
   switch (data.type) {
     case 'table':
-      const { data } = treeRef.value?.getNode(activeDatabaseName.value) || {};
-      if (data) {
-        await selectNode(data);
+      const { data: parentData } =
+        sidebarRef.value?.treeRef?.getNode(activeDatabaseName.value) || {};
+      if (parentData) {
+        await selectNode(parentData);
       }
   }
 };
@@ -163,12 +204,11 @@ const onDatabaseTableClick = (
   if (type !== 'name') {
     key = `${key}:${type}`;
   }
-  const data = treeRef.value?.getNode?.(key)?.data;
+  const data = sidebarRef.value?.treeRef?.getNode?.(key)?.data;
   if (!data) return;
   selectNode(data);
 };
 
-const treeRef = ref<typeof ElTree>();
 const activeContextMenuNavItem = ref<DatabaseNavItem>();
 const contextMenuVisibleMap = ref<Record<string, boolean>>({});
 const isContextMenuVisible = (id: string) => {
@@ -218,7 +258,7 @@ const contextMenuItems = computed<ContextMenuItem[]>(() => {
           icon: ['fa', 'table'],
           action: async () => {
             activeNavItem.value = activeContextMenuNavItem.value;
-            treeRef.value?.setCurrentKey(activeNavItem.value?.id);
+            sidebarRef.value?.treeRef?.setCurrentKey(activeNavItem.value?.id);
             await store.dispatch(`${ns}/getTablePreview`, {
               id: activeId.value,
               table: activeNavItem.value?.name,
@@ -324,39 +364,40 @@ const createContextMenuListItems: ContextMenuItem[] = [
 
       const newNode = newTableNode();
       if (databaseNode?.children?.length) {
-        const firstTableNode = treeRef.value?.getNode(
+        const firstTableNode = sidebarRef.value?.treeRef?.getNode(
           databaseNode.children[0].id
         );
-        treeRef.value?.insertBefore(newNode, firstTableNode);
+        sidebarRef.value?.treeRef?.insertBefore(newNode, firstTableNode);
       } else {
-        treeRef.value?.append(newNode, databaseNode.id);
+        sidebarRef.value?.treeRef?.append(newNode, databaseNode.id);
       }
       selectNode(newNode);
+      nextTick(() => {
+        const input = document.querySelector(
+          `#edit-input-${normalizeElementId(newNode.id)}`
+        );
+        if (input instanceof HTMLInputElement) {
+          input.focus();
+        }
+      });
     },
   },
 ];
 
-const searchKeyword = ref('');
-const showSearch = ref(false);
-const onSearchClick = () => {
-  showSearch.value = !showSearch.value;
+const normalizeElementId = (id: string) => {
+  return id.replaceAll(':', '_');
+};
+
+const onRefresh = () => {
+  getMetadata();
 };
-watch(
-  searchKeyword,
-  debounce(() => {
-    treeRef.value?.filter(searchKeyword.value);
-  }, 300)
-);
-const onSearchFilter: FilterNodeMethodFunction = (
-  value: FilterValue,
-  data: TreeNodeData
-): boolean => {
-  if (!value) return true;
-  return data.label?.toLowerCase().includes(value.toString().toLowerCase());
+
+const onCreateDatabase = () => {
+  createContextMenuListItems[0].action();
 };
 
-const onRefresh = async () => {
-  await store.dispatch(`${ns}/getMetadata`, { id: activeId.value });
+const onCreateTable = () => {
+  createContextMenuListItems[1].action();
 };
 
 defineOptions({ name: 'ClDatabaseDetailTabDatabases' });
@@ -364,126 +405,16 @@ defineOptions({ name: 'ClDatabaseDetailTabDatabases' });
 
 <template>
   <div class="database-detail-tab-databases">
-    <div class="sidebar">
-      <div class="sidebar-actions">
-        <cl-context-menu :visible="showCreateContextMenu">
-          <template #reference>
-            <cl-icon
-              :icon="['fa', 'plus']"
-              @click.stop="showCreateContextMenu = true"
-            />
-          </template>
-          <cl-context-menu-list
-            v-if="showCreateContextMenu"
-            :items="createContextMenuListItems"
-            @hide="showCreateContextMenu = false"
-          />
-        </cl-context-menu>
-        <cl-icon :icon="['fa', 'refresh']" @click="onRefresh" />
-        <cl-icon
-          :class="showSearch ? 'selected' : ''"
-          :icon="['fa', 'search']"
-          @click="onSearchClick"
-        />
-        <cl-icon :icon="['fas', 'terminal']" />
-      </div>
-      <div v-if="showSearch" class="sidebar-search">
-        <el-input
-          v-model="searchKeyword"
-          :placeholder="
-            t('views.database.databases.sidebar.search.placeholder')
-          "
-          clearable
-          @clear="
-            () => {
-              searchKeyword = '';
-              showSearch = false;
-            }
-          "
-        />
-      </div>
-      <el-scrollbar>
-        <el-tree
-          ref="treeRef"
-          node-key="id"
-          :data="treeItems"
-          :props="{
-            class: _data => {
-              if (_data.new) return 'new';
-              return '';
-            },
-          }"
-          :filter-node-method="onSearchFilter"
-          :expand-on-click-node="false"
-          :default-expanded-keys="defaultExpandedKeys"
-          highlight-current
-          @node-click="onNodeClick"
-          @node-contextmenu="onContextMenuClick"
-        >
-          <template #default="{ data }">
-            <cl-context-menu
-              :visible="isContextMenuVisible(data.id)"
-              :style="{ flex: 1, paddingRight: '5px' }"
-            >
-              <template #reference>
-                <div class="node-wrapper" :title="data.label">
-                  <span class="icon-wrapper">
-                    <cl-icon :icon="data.icon" />
-                  </span>
-                  <template v-if="!data.edit">
-                    <span class="label">
-                      {{ data.label }}
-                    </span>
-                    <span v-if="data.data_type" class="data-type">
-                      {{ data.data_type }}
-                    </span>
-                  </template>
-                  <template v-else>
-                    <div class="edit-wrapper">
-                      <el-input
-                        v-model="data.edit_name"
-                        size="small"
-                        :placeholder="
-                          t('components.database.databases.table.create.name')
-                        "
-                      />
-                      <div class="edit-actions">
-                        <cl-icon
-                          :icon="['fa', 'check']"
-                          @click.stop="
-                            () => {
-                              data.label = data.edit_name;
-                              data.edit = false;
-                            }
-                          "
-                        />
-                        <cl-icon
-                          :icon="['fa', 'times']"
-                          @click.stop="onNodeCancel(data)"
-                        />
-                      </div>
-                    </div>
-                  </template>
-                </div>
-                <div class="actions" :class="data.new ? 'new' : ''">
-                  <template v-if="!data.edit">
-                    <cl-icon
-                      :icon="['fa', 'ellipsis']"
-                      @click.stop="onActionsClick(data)"
-                    />
-                  </template>
-                </div>
-              </template>
-              <cl-context-menu-list
-                v-if="isContextMenuVisible(data.id)"
-                :items="contextMenuItems"
-                @hide="onContextMenuHide(data.id)"
-              />
-            </cl-context-menu>
-          </template>
-        </el-tree>
-      </el-scrollbar>
-    </div>
+    <cl-database-sidebar
+      ref="sidebarRef"
+      :tree-items="treeItems"
+      :default-expanded-keys="defaultExpandedKeys"
+      @node-click="onNodeClick"
+      @context-menu-click="onContextMenuClick"
+      @refresh="onRefresh"
+      @create-database="onCreateDatabase"
+      @create-table="onCreateTable"
+    />
     <div class="content">
       <template v-if="activeNavItem?.type === 'database'">
         <cl-database-database-detail
@@ -498,7 +429,7 @@ defineOptions({ name: 'ClDatabaseDetailTabDatabases' });
           :table="activeNavItem?.data"
           :default-tab-name="defaultTabName"
           :is-new="activeNavItem?.new"
-          @refresh="onRefresh"
+          @refresh="getMetadata"
         />
       </template>
     </div>
@@ -513,119 +444,6 @@ defineOptions({ name: 'ClDatabaseDetailTabDatabases' });
   height: calc(100vh - 64px - 40px - 41px - 50px);
   width: 100%;
 
-  .sidebar {
-    flex: 0 0 240px;
-    height: 100%;
-    overflow: auto;
-    border-right: 1px solid var(--el-border-color);
-    display: flex;
-    flex-direction: column;
-
-    .sidebar-actions {
-      height: 41px;
-      flex: 0 0 41px;
-      padding: 5px;
-      display: flex;
-      align-items: center;
-      gap: 5px;
-      color: var(--cl-primary-color);
-      border-bottom: 1px solid var(--el-border-color);
-
-      & > * {
-        display: flex;
-        align-items: center;
-      }
-
-      &:deep(.icon) {
-        cursor: pointer;
-        padding: 6px;
-        font-size: 14px;
-        width: 14px;
-        height: 14px;
-        border-radius: 50%;
-      }
-
-      &:deep(.icon.selected),
-      &:deep(.icon:hover) {
-        background-color: var(--cl-primary-plain-color);
-      }
-    }
-
-    .sidebar-search {
-      height: 38px;
-      flex: 0 0 38px;
-      border-bottom: 1px solid var(--el-border-color);
-
-      &:deep(.el-input .el-input__wrapper) {
-        box-shadow: none;
-        border: none;
-      }
-    }
-
-    .el-tree {
-      min-width: fit-content;
-
-      &:deep(.el-tree-node.new .el-tree-node__content) {
-        color: var(--cl-success-color);
-      }
-
-      &:deep(.el-tree-node__content:hover) {
-        .actions {
-          display: flex !important;
-        }
-      }
-
-      &:deep(.el-tree-node__content) {
-        width: 100%;
-        position: relative;
-
-        .node-wrapper {
-          display: flex;
-          align-items: center;
-          position: relative;
-          width: 100%;
-
-          .icon-wrapper {
-            width: 20px;
-            display: flex;
-          }
-
-          .label {
-            flex: 0 0 auto;
-          }
-
-          .edit-wrapper {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-            flex: 1;
-
-            .edit-actions {
-              display: flex;
-              gap: 5px;
-            }
-          }
-
-          .data-type {
-            font-size: 11px;
-            line-height: 100%;
-            color: var(--cl-info-medium-color);
-            margin-left: 5px;
-          }
-        }
-
-        .actions {
-          display: none;
-          position: absolute;
-          top: 0;
-          right: 5px;
-          height: 100%;
-          align-items: center;
-        }
-      }
-    }
-  }
-
   .content {
     flex: 1;
     width: 100%;
diff --git a/src/views/index.ts b/src/views/index.ts
index c90936c5d9446..00312cbab63cf 100644
--- a/src/views/index.ts
+++ b/src/views/index.ts
@@ -1,6 +1,6 @@
 import ResultList from './data/list/ResultList.vue';
-import DatabaseDetailActionsCommon from './database/detail/actions/DatabaseDetailActionsCommon.vue';
 import DatabaseDetail from './database/detail/DatabaseDetail.vue';
+import DatabaseDetailActionsCommon from './database/detail/actions/DatabaseDetailActionsCommon.vue';
 import DatabaseDetailTabConsole from './database/detail/tabs/DatabaseDetailTabConsole.vue';
 import DatabaseDetailTabDatabases from './database/detail/tabs/DatabaseDetailTabDatabases.vue';
 import DatabaseDetailTabOverview from './database/detail/tabs/DatabaseDetailTabOverview.vue';
@@ -20,11 +20,11 @@ import LogsView from './deps/task/LogsView.vue';
 import TaskAction from './deps/task/TaskAction.vue';
 import EnvironmentList from './environment/list/EnvironmentList.vue';
 import useEnvironmentList from './environment/list/useEnvironmentList';
+import GitDetail from './git/detail/GitDetail.vue';
 import GitDetailActionsChanges from './git/detail/actions/GitDetailActionsChanges.vue';
 import GitDetailActionsCommon from './git/detail/actions/GitDetailActionsCommon.vue';
 import GitDetailActionsFiles from './git/detail/actions/GitDetailActionsFiles.vue';
 import GitDetailActionsSpiders from './git/detail/actions/GitDetailActionsSpiders.vue';
-import GitDetail from './git/detail/GitDetail.vue';
 import GitDetailTabChanges from './git/detail/tabs/GitDetailTabChanges.vue';
 import GitDetailTabFiles from './git/detail/tabs/GitDetailTabFiles.vue';
 import GitDetailTabLogs from './git/detail/tabs/GitDetailTabLogs.vue';
@@ -37,29 +37,29 @@ import Home from './home/Home.vue';
 import Login from './login/Login.vue';
 import Disclaimer from './misc/Disclaimer.vue';
 import MySettings from './misc/MySettings.vue';
-import NodeDetailActionsCommon from './node/detail/actions/NodeDetailActionsCommon.vue';
 import NodeDetail from './node/detail/NodeDetail.vue';
+import NodeDetailActionsCommon from './node/detail/actions/NodeDetailActionsCommon.vue';
 import NodeDetailTabMonitoring from './node/detail/tabs/NodeDetailTabMonitoring.vue';
 import NodeDetailTabOverview from './node/detail/tabs/NodeDetailTabOverview.vue';
 import NodeDetailTabTasks from './node/detail/tabs/NodeDetailTabTasks.vue';
 import NodeList from './node/list/NodeList.vue';
 import useNodeList from './node/list/useNodeList';
-import NotificationAlertDetailActionsCommon from './notification/alert/detail/actions/NotificationAlertDetailActionsCommon.vue';
 import NotificationAlertDetail from './notification/alert/detail/NotificationAlertDetail.vue';
+import NotificationAlertDetailActionsCommon from './notification/alert/detail/actions/NotificationAlertDetailActionsCommon.vue';
 import NotificationAlertDetailTabOverview from './notification/alert/detail/tabs/NotificationAlertDetailTabOverview.vue';
 import useNotificationAlertDetail from './notification/alert/detail/useNotificationAlertDetail';
 import NotificationAlertList from './notification/alert/list/NotificationAlertList.vue';
 import useNotificationAlertList from './notification/alert/list/useNotificationAlertList';
-import NotificationChannelDetailActionsCommon from './notification/channel/detail/actions/NotificationChannelDetailActionsCommon.vue';
 import NotificationChannelDetail from './notification/channel/detail/NotificationChannelDetail.vue';
+import NotificationChannelDetailActionsCommon from './notification/channel/detail/actions/NotificationChannelDetailActionsCommon.vue';
 import NotificationChannelDetailTabOverview from './notification/channel/detail/tabs/NotificationChannelDetailTabOverview.vue';
 import NotificationChannelList from './notification/channel/list/NotificationChannelList.vue';
 import useNotificationChannelList from './notification/channel/list/useNotificationChannelList';
 import NotificationRequestList from './notification/request/list/NotificationRequestList.vue';
 import useNotificationRequestList from './notification/request/list/useNotificationRequestList';
+import NotificationSettingDetail from './notification/setting/detail/NotificationSettingDetail.vue';
 import NotificationSettingDetailActionsCommon from './notification/setting/detail/actions/NotificationSettingDetailActionsCommon.vue';
 import NotificationSettingDetailActionsTemplate from './notification/setting/detail/actions/NotificationSettingDetailActionsTemplate.vue';
-import NotificationSettingDetail from './notification/setting/detail/NotificationSettingDetail.vue';
 import NotificationSettingDetailTabChannels from './notification/setting/detail/tabs/NotificationSettingDetailTabChannels.vue';
 import NotificationSettingDetailTabMailConfig from './notification/setting/detail/tabs/NotificationSettingDetailTabMailConfig.vue';
 import NotificationSettingDetailTabOverview from './notification/setting/detail/tabs/NotificationSettingDetailTabOverview.vue';
@@ -78,11 +78,11 @@ import ScheduleDetailTabTasks from './schedule/detail/tabs/ScheduleDetailTabTask
 import useScheduleDetail from './schedule/detail/useScheduleDetail';
 import ScheduleList from './schedule/list/ScheduleList.vue';
 import useScheduleList from './schedule/list/useScheduleList';
+import SpiderDetail from './spider/detail/SpiderDetail.vue';
 import SpiderDetailActionsCommon from './spider/detail/actions/SpiderDetailActionsCommon.vue';
 import SpiderDetailActionsData from './spider/detail/actions/SpiderDetailActionsData.vue';
 import SpiderDetailActionsDatabase from './spider/detail/actions/SpiderDetailActionsDatabase.vue';
 import SpiderDetailActionsFiles from './spider/detail/actions/SpiderDetailActionsFiles.vue';
-import SpiderDetail from './spider/detail/SpiderDetail.vue';
 import SpiderDetailTabData from './spider/detail/tabs/SpiderDetailTabData.vue';
 import SpiderDetailTabFiles from './spider/detail/tabs/SpiderDetailTabFiles.vue';
 import SpiderDetailTabOverview from './spider/detail/tabs/SpiderDetailTabOverview.vue';
@@ -93,28 +93,28 @@ import useSpiderDetail from './spider/detail/useSpiderDetail';
 import SpiderList from './spider/list/SpiderList.vue';
 import useSpiderList from './spider/list/useSpiderList';
 import SystemDetail from './system/detail/SystemDetail.vue';
+import TaskDetail from './task/detail/TaskDetail.vue';
 import TaskDetailActionsCommon from './task/detail/actions/TaskDetailActionsCommon.vue';
 import TaskDetailActionsData from './task/detail/actions/TaskDetailActionsData.vue';
 import TaskDetailActionsLogs from './task/detail/actions/TaskDetailActionsLogs.vue';
 import TaskDetailTabData from './task/detail/tabs/TaskDetailTabData.vue';
 import TaskDetailTabLogs from './task/detail/tabs/TaskDetailTabLogs.vue';
 import TaskDetailTabOverview from './task/detail/tabs/TaskDetailTabOverview.vue';
-import TaskDetail from './task/detail/TaskDetail.vue';
 import useTaskDetail from './task/detail/useTaskDetail';
 import TaskList from './task/list/TaskList.vue';
 import useTaskList from './task/list/useTaskList';
 import TokenList from './token/list/TokenList.vue';
 import useTokenList from './token/list/useTokenList';
-import UserDetailTabOverview from './user/detail/tabs/UserDetailTabOverview.vue';
 import UserDetail from './user/detail/UserDetail.vue';
+import UserDetailTabOverview from './user/detail/tabs/UserDetailTabOverview.vue';
 import useUserDetail from './user/detail/useUserDetail';
 import UserList from './user/list/UserList.vue';
 import useUserList from './user/list/useUserList';
 
 export {
   ResultList as ClResultList,
-  DatabaseDetailActionsCommon as ClDatabaseDetailActionsCommon,
   DatabaseDetail as ClDatabaseDetail,
+  DatabaseDetailActionsCommon as ClDatabaseDetailActionsCommon,
   DatabaseDetailTabConsole as ClDatabaseDetailTabConsole,
   DatabaseDetailTabDatabases as ClDatabaseDetailTabDatabases,
   DatabaseDetailTabOverview as ClDatabaseDetailTabOverview,
@@ -134,11 +134,11 @@ export {
   TaskAction as ClTaskAction,
   EnvironmentList as ClEnvironmentList,
   useEnvironmentList as useEnvironmentList,
+  GitDetail as ClGitDetail,
   GitDetailActionsChanges as ClGitDetailActionsChanges,
   GitDetailActionsCommon as ClGitDetailActionsCommon,
   GitDetailActionsFiles as ClGitDetailActionsFiles,
   GitDetailActionsSpiders as ClGitDetailActionsSpiders,
-  GitDetail as ClGitDetail,
   GitDetailTabChanges as ClGitDetailTabChanges,
   GitDetailTabFiles as ClGitDetailTabFiles,
   GitDetailTabLogs as ClGitDetailTabLogs,
@@ -151,29 +151,29 @@ export {
   Login as ClLogin,
   Disclaimer as ClDisclaimer,
   MySettings as ClMySettings,
-  NodeDetailActionsCommon as ClNodeDetailActionsCommon,
   NodeDetail as ClNodeDetail,
+  NodeDetailActionsCommon as ClNodeDetailActionsCommon,
   NodeDetailTabMonitoring as ClNodeDetailTabMonitoring,
   NodeDetailTabOverview as ClNodeDetailTabOverview,
   NodeDetailTabTasks as ClNodeDetailTabTasks,
   NodeList as ClNodeList,
   useNodeList as useNodeList,
-  NotificationAlertDetailActionsCommon as ClNotificationAlertDetailActionsCommon,
   NotificationAlertDetail as ClNotificationAlertDetail,
+  NotificationAlertDetailActionsCommon as ClNotificationAlertDetailActionsCommon,
   NotificationAlertDetailTabOverview as ClNotificationAlertDetailTabOverview,
   useNotificationAlertDetail as useNotificationAlertDetail,
   NotificationAlertList as ClNotificationAlertList,
   useNotificationAlertList as useNotificationAlertList,
-  NotificationChannelDetailActionsCommon as ClNotificationChannelDetailActionsCommon,
   NotificationChannelDetail as ClNotificationChannelDetail,
+  NotificationChannelDetailActionsCommon as ClNotificationChannelDetailActionsCommon,
   NotificationChannelDetailTabOverview as ClNotificationChannelDetailTabOverview,
   NotificationChannelList as ClNotificationChannelList,
   useNotificationChannelList as useNotificationChannelList,
   NotificationRequestList as ClNotificationRequestList,
   useNotificationRequestList as useNotificationRequestList,
+  NotificationSettingDetail as ClNotificationSettingDetail,
   NotificationSettingDetailActionsCommon as ClNotificationSettingDetailActionsCommon,
   NotificationSettingDetailActionsTemplate as ClNotificationSettingDetailActionsTemplate,
-  NotificationSettingDetail as ClNotificationSettingDetail,
   NotificationSettingDetailTabChannels as ClNotificationSettingDetailTabChannels,
   NotificationSettingDetailTabMailConfig as ClNotificationSettingDetailTabMailConfig,
   NotificationSettingDetailTabOverview as ClNotificationSettingDetailTabOverview,
@@ -192,11 +192,11 @@ export {
   useScheduleDetail as useScheduleDetail,
   ScheduleList as ClScheduleList,
   useScheduleList as useScheduleList,
+  SpiderDetail as ClSpiderDetail,
   SpiderDetailActionsCommon as ClSpiderDetailActionsCommon,
   SpiderDetailActionsData as ClSpiderDetailActionsData,
   SpiderDetailActionsDatabase as ClSpiderDetailActionsDatabase,
   SpiderDetailActionsFiles as ClSpiderDetailActionsFiles,
-  SpiderDetail as ClSpiderDetail,
   SpiderDetailTabData as ClSpiderDetailTabData,
   SpiderDetailTabFiles as ClSpiderDetailTabFiles,
   SpiderDetailTabOverview as ClSpiderDetailTabOverview,
@@ -207,20 +207,20 @@ export {
   SpiderList as ClSpiderList,
   useSpiderList as useSpiderList,
   SystemDetail as ClSystemDetail,
+  TaskDetail as ClTaskDetail,
   TaskDetailActionsCommon as ClTaskDetailActionsCommon,
   TaskDetailActionsData as ClTaskDetailActionsData,
   TaskDetailActionsLogs as ClTaskDetailActionsLogs,
   TaskDetailTabData as ClTaskDetailTabData,
   TaskDetailTabLogs as ClTaskDetailTabLogs,
   TaskDetailTabOverview as ClTaskDetailTabOverview,
-  TaskDetail as ClTaskDetail,
   useTaskDetail as useTaskDetail,
   TaskList as ClTaskList,
   useTaskList as useTaskList,
   TokenList as ClTokenList,
   useTokenList as useTokenList,
-  UserDetailTabOverview as ClUserDetailTabOverview,
   UserDetail as ClUserDetail,
+  UserDetailTabOverview as ClUserDetailTabOverview,
   useUserDetail as useUserDetail,
   UserList as ClUserList,
   useUserList as useUserList,