From b80c93422a4ef838ccbb67714d91eab1f753e737 Mon Sep 17 00:00:00 2001
From: rick <LinuxSuRen@users.noreply.github.com>
Date: Tue, 28 Oct 2025 14:04:18 +0800
Subject: [PATCH] feat: support filter the database table names

---
 ui/.env.development               |  1 +
 ui/index.html                     |  1 +
 ui/src/components/DataManager.vue | 18 ++++++++++-
 ui/vite.config.ts                 | 52 +++++++++++++++----------------
 4 files changed, 44 insertions(+), 28 deletions(-)
 create mode 100644 ui/.env.development

diff --git a/ui/.env.development b/ui/.env.development
new file mode 100644
index 0000000..b1ca195
--- /dev/null
+++ b/ui/.env.development
@@ -0,0 +1 @@
+VITE_API_URL=http://127.0.0.1:8080
diff --git a/ui/index.html b/ui/index.html
index 180d6a7..7881373 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -16,6 +16,7 @@
     <script type="text/javascript">
       document.getElementById('enable-plugin')?.addEventListener('click', () => {
         sessionStorage.setItem('mode', 'dev');
+        window.location.reload();
       });
     </script>
     <script type="module" src="/src/main.ts"></script>
diff --git a/ui/src/components/DataManager.vue b/ui/src/components/DataManager.vue
index 4b9ceb1..3e9d677 100644
--- a/ui/src/components/DataManager.vue
+++ b/ui/src/components/DataManager.vue
@@ -7,7 +7,7 @@ import type { Store } from './store'
 import { Driver, GetDriverName, ExtensionKind } from './store'
 import type { Pair } from './types'
 import { GetDataManagerPreference, SetDataManagerPreference } from './cache'
-import { ElMessage } from 'element-plus'
+import {ElMessage, type ElTree} from 'element-plus'
 import { Codemirror } from 'vue-codemirror'
 import { sql, StandardSQL, MySQL, PostgreSQL, Cassandra } from "@codemirror/lang-sql"
 import type { SQLConfig } from "@codemirror/lang-sql"
@@ -44,6 +44,7 @@ const largeContentDialogVisible = ref(false)
 interface TreeItem {
   label: string
 }
+const tablesTreeRef = ref<InstanceType<typeof ElTree>>()
 const tablesTree = ref([] as TreeItem[])
 const storeChangedEvent = (s: string) => {
   kind.value = ''
@@ -336,6 +337,19 @@ const executeQueryWithoutShowingNativeSQL = () => {
     executeWithQuery(sqlQuery.value)
 }
 
+const tableNameFilter = ref('')
+watch(tableNameFilter, (val: string) => {
+  tablesTreeRef.value!.filter(val)
+})
+const tableNameFilterFunc = (value: string, row: any) => {
+  let filter = ''
+  if (value && value.toLowerCase) {
+    filter = value.toLowerCase().trim()
+    return row.label.toLowerCase().indexOf(filter) != -1
+  }
+  return true
+}
+
 Magic.LoadMagicKeys('DataManager', new Map([
   ["executeQuery", executeQuery],
   ["executeWithSelectedQuery", executeWithSelectedQuery],
@@ -359,7 +373,9 @@ Magic.LoadMagicKeys('DataManager', new Map([
             <el-option v-for="item in queryDataMeta.databases" :key="item" :label="item"
                        :value="item"></el-option>
           </el-select>
+          <el-input v-model="tableNameFilter" :placeholder="t('tip.filter')" style="padding: 5px;" clearable />
           <el-tree :data="tablesTree" node-key="label" highlight-current
+                   :filter-node-method="tableNameFilterFunc" ref="tablesTreeRef"
                    draggable>
             <template #default="{node, data}">
               <div class="space-between">
diff --git a/ui/vite.config.ts b/ui/vite.config.ts
index e15d10c..7bed0fd 100644
--- a/ui/vite.config.ts
+++ b/ui/vite.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite'
+import {defineConfig, loadEnv} from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 declare global {
@@ -12,21 +12,23 @@ interface VuePlugin {
   unmount(): void;
 }
 
-export default defineConfig({
-  plugins: [vue()],
-  define: {
-    'process.env.NODE_ENV': JSON.stringify('production'),
-    'process.env': JSON.stringify({}),
-    'global': 'window'
-  },
-  resolve: {
-    alias: {
-      'process': 'process/browser'
-    }
-  },
-  build: {
-    lib: {
-      entry: ('src/main.ts'),
+export default defineConfig(({mode}) => {
+  const env = loadEnv(mode, './');
+  return {
+    plugins: [vue()],
+    define: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+      'process.env': JSON.stringify({}),
+      'global': 'window'
+    },
+    resolve: {
+      alias: {
+        'process': 'process/browser'
+      }
+    },
+    build: {
+      lib: {
+        entry: ('src/main.ts'),
       name: 'ATestPlugin',
       fileName: (format) => `atest-ext-store-database.${format}.js`
     },
@@ -42,33 +44,29 @@ export default defineConfig({
   server: {
     proxy: {
       '/server.Runner': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
       '/server.Mock': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
       '/mock/server': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
       '/browser': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
       '/v3': {
-        target: 'http://127.0.0.1:8080',
-        changeOrigin: true,
-      },
-      '/oauth': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
       '/api': {
-        target: 'http://127.0.0.1:8080',
+        target: env.VITE_API_URL,
         changeOrigin: true,
       },
     },
   },
-});
\ No newline at end of file
+}});
\ No newline at end of file