From 3ab4ac891b442b0c4e216cfa8e3d4b75ba6da2c0 Mon Sep 17 00:00:00 2001
From: "meilin.huang" <954537473@qq.com>
Date: Mon, 13 Feb 2023 21:11:16 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E8=A1=A8=E5=92=8Cschema=E8=B6=85=E5=87=BA2?=
 =?UTF-8?q?0=E6=9D=A1=E5=90=8E=E5=90=AF=E7=94=A8=E8=BF=87=E6=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/ops/db/component/InstanceTree.vue   | 66 +++++++++++++------
 1 file changed, 45 insertions(+), 21 deletions(-)

diff --git a/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue b/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
index 20e2e505..cd5ced56 100644
--- a/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
+++ b/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
@@ -23,45 +23,54 @@
                         </template>
                     </el-popover>
                 </template>
+                <el-menu-item v-if="dbs[inst.id]?.length> 20" :index="'schema-filter-' + inst.id" :key="'schema-filter-' + inst.id">
+                    <template #title>
+                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                        <el-input size="small" placeholder="过滤数据库" clearable
+                                  @change="filterSchemaName(inst.id)"
+                                  @keyup="(e: any) => filterSchemaName(inst.id, e)"
+                                  v-model="state.schemaFilterParam[inst.id]" />
+                    </template>
+                </el-menu-item>
                 <!-- 第三级：数据库 -->
-                <el-sub-menu v-for="schema in dbs[inst.id]" :index="inst.id + schema" :key="inst.id + schema"
-                    :class="state.nowSchema === (inst.id + schema) && 'checked'"
-                    @click.stop="changeSchema(inst, schema)">
+                <el-sub-menu v-show="schema.show" v-for="schema in dbs[inst.id]" :index="inst.id + schema.name" :key="inst.id + schema.name"
+                    :class="state.nowSchema === (inst.id + schema.name) && 'checked'"
+                    @click.stop="changeSchema(inst, schema.name)">
                     <template #title>
                         <span class="checked-schema ml20">
                             <el-icon>
                                 <Coin color="#67c23a" />
-                            </el-icon>{{ schema }}</span>
+                            </el-icon>{{ schema.name }}</span>
                     </template>
                     <!-- 第四级 01：表 -->
-                    <el-sub-menu :index="inst.id + schema + '-table'">
+                    <el-sub-menu :index="inst.id + schema.name + '-table'">
                         <template #title>
-                            <div class="ml30" style="width: 100%" @click="loadSchemaTables(inst, schema)">
+                            <div class="ml30" style="width: 100%" @click="loadSchemaTables(inst, schema.name)">
                                 <el-icon>
                                     <Calendar color="#409eff" />
                                 </el-icon>
                                 <span>表</span>
-                                <el-icon v-show="state.loading[inst.id + schema]" class="is-loading">
+                                <el-icon v-show="state.loading[inst.id + schema.name]" class="is-loading">
                                     <Loading />
                                 </el-icon>
                             </div>
                         </template>
-                        <el-menu-item :index="inst.id + schema + '-tableSearch'"
-                            :key="inst.id + schema + '-tableSearch'">
+                        <el-menu-item v-if="tables[inst.id + schema.name]?.length> 20"  :index="inst.id + schema.name + '-tableSearch'"
+                            :key="inst.id + schema.name + '-tableSearch'">
                             <template #title>
                                 <span class="ml35">
                                     <el-input size="small" placeholder="表名、备注过滤表" clearable
-                                        @change="filterTableName(inst.id, schema)"
-                                        @keyup="(e: any) => filterTableName(inst.id, schema, e)"
-                                        v-model="state.filterParam[inst.id + schema]" />
+                                        @change="filterTableName(inst.id, schema.name)"
+                                        @keyup="(e: any) => filterTableName(inst.id, schema.name, e)"
+                                        v-model="state.filterParam[inst.id + schema.name]" />
                                 </span>
                             </template>
                         </el-menu-item>
 
-                        <template v-for="tb in tables[inst.id + schema]">
-                            <el-menu-item :index="inst.id + schema + tb.tableName"
-                                :key="inst.id + schema + tb.tableName" v-if="tb.show"
-                                @click="clickSchemaTable(inst, schema, tb.tableName)">
+                        <template v-for="tb in tables[inst.id + schema.name]">
+                            <el-menu-item :index="inst.id + schema.name + tb.tableName"
+                                :key="inst.id + schema.name + tb.tableName" v-if="tb.show"
+                                @click="clickSchemaTable(inst, schema.name, tb.tableName)">
                                 <template #title>
                                     <div class="ml35" style="width: 100%">
                                         <el-icon>
@@ -78,7 +87,7 @@
                         </template>
                     </el-sub-menu>
                     <!-- 第四级 02：sql -->
-                    <el-sub-menu @click.stop="loadSqls(inst, schema)" :index="inst.id + schema + '-sql'">
+                    <el-sub-menu @click.stop="loadSqls(inst, schema.name)" :index="inst.id + schema.name + '-sql'">
                         <template #title>
                             <span class="ml30">
                                 <el-icon>
@@ -88,9 +97,9 @@
                             </span>
                         </template>
 
-                        <template v-for="sql in sqls[inst.id + schema]">
-                            <el-menu-item v-if="sql.show" :index="inst.id + schema + sql.name"
-                                :key="inst.id + schema + sql.name" @click="clickSqlName(inst, schema, sql.name)">
+                        <template v-for="sql in sqls[inst.id + schema.name]">
+                            <el-menu-item v-if="sql.show" :index="inst.id + schema.name + sql.name"
+                                :key="inst.id + schema.name + sql.name" @click="clickSqlName(inst, schema.name, sql.name)">
                                 <template #title>
                                     <div class="ml35" style="width: 100%">
                                         <el-icon>
@@ -129,6 +138,7 @@ const state = reactive({
     sqls: {},
     nowSchema: '',
     filterParam: {},
+    schemaFilterParam: {},
     loading: {},
     instanceMenuMaxHeight: '850px',
 })
@@ -158,7 +168,10 @@ const loadInstances = async () => {
         state.tree[db.tagId] = arr;
 
         // dbs
-        state.dbs[db.id] = db.database.split(' ')
+        let databases = db.database.split(' ')
+        let dbs = [] as any [];
+        databases.forEach((a: string) =>dbs.push({name: a, show: true}))
+        state.dbs[db.id] = dbs
     }
 }
 
@@ -221,6 +234,17 @@ const filterTableName = (instId: number, schema: string, event?: any) => {
     })
 }
 
+const filterSchemaName = (instId: number, event?: any) => {
+  if (event) {
+    state.schemaFilterParam[instId] = event.target.value
+  }
+  let param = state.schemaFilterParam[instId] as string
+  param = param?.replace('/', '\/')
+  state.dbs[instId].forEach((a: any) => {
+    a.show = param ? eval('/' + param.split('').join('[_\w]*') + '[_\w]*/ig').test(a.name) : true
+  })
+}
+
 /**
  * 加载用户保存的sql脚本
  * 

From 641c2abb24907cfeaa32a5f6ec2a18e3a8b3940b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=AE=97=E6=B4=8B?= <liuzongyang@cqliving.com>
Date: Tue, 14 Feb 2023 10:33:57 +0800
Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E8=A1=A8=E5=90=8D+schema=E6=A8=A1?=
 =?UTF-8?q?=E7=B3=8A=E9=AB=98=E4=BA=AE=E8=BF=87=E6=BB=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/ops/db/component/InstanceTree.vue   | 66 +++++++++++++++----
 1 file changed, 52 insertions(+), 14 deletions(-)

diff --git a/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue b/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
index cd5ced56..37d655c9 100644
--- a/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
+++ b/mayfly_go_web/src/views/ops/db/component/InstanceTree.vue
@@ -40,7 +40,9 @@
                         <span class="checked-schema ml20">
                             <el-icon>
                                 <Coin color="#67c23a" />
-                            </el-icon>{{ schema.name }}</span>
+                            </el-icon>
+                            <span v-html="schema.showName || schema.name"></span>
+                        </span>
                     </template>
                     <!-- 第四级 01：表 -->
                     <el-sub-menu :index="inst.id + schema.name + '-table'">
@@ -77,10 +79,10 @@
                                             <Calendar color="#409eff" />
                                         </el-icon>
                                         <el-tooltip v-if="tb.tableComment" effect="customized"
-                                            :content="tb.tableComment" placement="right">
-                                            {{ tb.tableName }}
+                                            :content="tb.tableComment" placement="right" >
+                                          <span v-html="tb.showName || tb.tableName"></span>
                                         </el-tooltip>
-                                        <span v-else>{{ tb.tableName }}</span>
+                                        <span v-else v-html="tb.showName || tb.tableName"></span>
                                     </div>
                                 </template>
                             </el-menu-item>
@@ -228,21 +230,57 @@ const filterTableName = (instId: number, schema: string, event?: any) => {
         state.filterParam[key] = event.target.value
     }
     let param = state.filterParam[key] as string
-    param = param?.replace('/', '\/')
     state.tables[key].forEach((a: any) => {
-        a.show = param ? eval('/' + param.split('').join('[_\w]*') + '[_\w]*/ig').test(a.tableName) || eval('/' + param.split('').join('[_\w]*') + '[_\w]*/ig').test(a.tableComment) : true
+        let {match, showName} = matchAndHighLight(param, a.tableName+a.tableComment, a.tableName)
+        a.show = match;
+        a.showName = showName
     })
 }
 
 const filterSchemaName = (instId: number, event?: any) => {
-  if (event) {
-    state.schemaFilterParam[instId] = event.target.value
-  }
-  let param = state.schemaFilterParam[instId] as string
-  param = param?.replace('/', '\/')
-  state.dbs[instId].forEach((a: any) => {
-    a.show = param ? eval('/' + param.split('').join('[_\w]*') + '[_\w]*/ig').test(a.name) : true
-  })
+    if (event) {
+        state.schemaFilterParam[instId] = event.target.value
+    }
+    let param = state.schemaFilterParam[instId] as string
+    param = param?.replace('/', '\/')
+    state.dbs[instId].forEach((a: any) => {
+        let {match, showName} = matchAndHighLight(param, a.name, a.name)
+        a.show = match
+        a.showName = showName
+    })
+}
+
+const matchAndHighLight = (searchParam: string, param: string, title: string): {match: boolean, showName: string} => {
+    if(!searchParam){
+        return  {match: true, showName: ''}
+    }
+    let str = '';
+    for(let c of searchParam?.replace('/', '\/')){
+        str += `(${c}).*`
+    }
+    let regex = eval(`/${str}/i`)
+    let res = param.match(regex);
+    if(res?.length){
+        if(res?.length){
+            let tmp = '', showName = '';
+            for(let i =1; i<=res.length-1; i++){
+                let head = (tmp || title).replace(res[i], `###${res[i]}!!!`);
+                let idx = head.lastIndexOf('!!!')+3;
+                tmp = head.substring(idx);
+                showName += head.substring(0, idx)
+                if(!tmp){
+                    break
+                }
+            }
+            showName += tmp;
+            showName = showName.replaceAll('###','<span style="color: red">')
+            showName = showName.replaceAll('!!!','</span>')
+            return {match: true, showName}
+        }
+    }
+  
+    return {match: false, showName: ''}
+
 }
 
 /**

From 7e4152ad6de1dc386f67cd330895bfa750ba2f06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=AE=97=E6=B4=8B?= <liuzongyang@cqliving.com>
Date: Tue, 14 Feb 2023 12:23:38 +0800
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20sql=E6=8F=90=E7=A4=BAbug=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mayfly_go_web/package.json                 |  2 ++
 mayfly_go_web/src/views/ops/db/SqlExec.vue | 11 ++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/mayfly_go_web/package.json b/mayfly_go_web/package.json
index 594a135b..98522e7b 100644
--- a/mayfly_go_web/package.json
+++ b/mayfly_go_web/package.json
@@ -4,6 +4,8 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "preview": "vite preview",
+    "build-preview": "npm run build && npm run preview",
     "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
   },
   "dependencies": {
diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 79398fea..085a741d 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -266,7 +266,8 @@ const registerSqlCompletionItemProvider = () => {
                 // 如果是.触发代码提示，则进行【 库.表名联想 】 或 【 表别名.表字段联想 】
                 let str = lastToken.substring(0, lastToken.lastIndexOf('.'))
                 // 库.表名联想
-                if (dbs.indexOf(str) > -1) {
+              
+                if (dbs.filter((a:any)=>a.name.indexOf(str)> -1)?.length > 0) {
                     let tables = await dbInst.loadTables(str)
                     let suggestions: languages.CompletionItem[] = []
                     for (let item of tables) {
@@ -302,7 +303,7 @@ const registerSqlCompletionItemProvider = () => {
                     let dbHits = await dbInst.loadDbHints(db)
                     let columns = dbHits[table]
                     let suggestions: languages.CompletionItem[] = []
-                    columns.forEach((a: string, index: any) => {
+                    columns?.forEach((a: string, index: any) => {
                         // 字段数据格式  字段名 字段注释，  如： create_time  [datetime][创建时间]
                         const nameAndComment = a.split("  ")
                         const fieldName = nameAndComment[0]
@@ -376,14 +377,14 @@ const registerSqlCompletionItemProvider = () => {
             })
 
             // 库名提示
-            dbs.forEach((a: string) => {
+            dbs.forEach((a: any) => {
                 suggestions.push({
                     label: {
-                        label: a,
+                        label: a.name,
                         description: 'schema'
                     },
                     kind: monaco.languages.CompletionItemKind.Folder,
-                    insertText: a,
+                    insertText: a.name,
                     range
                 });
             })

From 46e331783faa987d860bb3b993c1b221cf345c52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=AE=97=E6=B4=8B?= <liuzongyang@cqliving.com>
Date: Tue, 14 Feb 2023 14:03:18 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20sql=E6=8F=90=E7=A4=BAbug=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mayfly_go_web/src/views/ops/db/SqlExec.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/mayfly_go_web/src/views/ops/db/SqlExec.vue b/mayfly_go_web/src/views/ops/db/SqlExec.vue
index 7f2d2d20..58820ef4 100644
--- a/mayfly_go_web/src/views/ops/db/SqlExec.vue
+++ b/mayfly_go_web/src/views/ops/db/SqlExec.vue
@@ -267,7 +267,7 @@ const registerSqlCompletionItemProvider = () => {
                 let str = lastToken.substring(0, lastToken.lastIndexOf('.'))
                 // 库.表名联想
               
-                if (dbs.filter((a:any)=>a.name.indexOf(str)> -1)?.length > 0) {
+                if (dbs.filter((a:any)=>a.name === str)?.length > 0) {
                     let tables = await dbInst.loadTables(str)
                     let suggestions: languages.CompletionItem[] = []
                     for (let item of tables) {