feat: 标签路径展示优化，新增提示

mayfly_go_web/src/views/ops/component/TagInfo.vue

@@ -0,0 +1,64 @@
+<template>
+    <div style="display: inline-flex;  justify-content: center;  align-items: center; cursor: pointer;">
+        <el-popover @show="showTagInfo" placement="right-end" title="标签信息" :width="300" trigger="hover">
+            <template #reference>
+                <el-icon>
+                    <InfoFilled />
+                </el-icon>
+            </template>
+            <span v-for="(v, i) in tags" :key="i">
+                <el-tooltip effect="customized" :content="v.remark" placement="top">
+                    <span class="color-success">{{ v.name }}</span>
+                </el-tooltip>
+                <span v-if="i != state.tags.length - 1" class="color-primary"> / </span>
+            </span>
+        </el-popover>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, toRefs, onMounted } from 'vue';
+import { tagApi } from '../tag/api';
+const props = defineProps({
+    tagPath: {
+        type: [String],
+        required: true,
+    },
+})
+
+const state = reactive({
+    tagPath: '',
+    tags: [] as any,
+})
+
+const {
+    tags,
+} = toRefs(state)
+
+onMounted(async () => {
+    state.tagPath = props.tagPath;
+})
+
+const showTagInfo = async () => {
+    if (state.tags && state.tags.length > 0) {
+        return;
+    }
+    const tagStrs = state.tagPath.split('/');
+    const tagPaths = [];
+    let nowTag = '';
+    for (let tagStr of tagStrs) {
+        if (nowTag) {
+            nowTag = `${nowTag}/${tagStr}`
+        } else {
+            nowTag = tagStr
+        }
+        tagPaths.push(nowTag)
+    }
+    state.tags = await tagApi.listByQuery.request({ tagPaths: tagPaths.join(',') })
+}
+
+</script>
+
+<style lang="scss">
+
+</style>

mayfly_go_web/src/views/ops/component/TagMenu.vue

@@ -9,6 +9,8 @@
                     <el-sub-menu v-for="tag of tags" :index="tag.tagPath" :key="tag.tagPath"
                         @click.stop="clickTag(tag.tagPath)">
                         <template #title>
+                            <tag-info :tag-path="tag.tagPath" />
+
                             <el-icon>
                                 <FolderOpened v-if="opend[tag.tagPath]" color="#e6a23c" />
                                 <Folder v-else />
@@ -25,6 +27,7 @@
 
 <script lang="ts" setup>
 import { reactive, ref, Ref, toRefs } from 'vue';
+import TagInfo from './TagInfo.vue';
 
 const props = defineProps({
     instanceMenuMaxHeight: {
@@ -60,7 +63,6 @@ const open = (index: string, isTag: boolean = false) => {
     if (!index) {
         return;
     }
-    console.log(index)
     menuRef.value.open(index)
     if (isTag) {
         clickTag(index)

mayfly_go_web/src/views/ops/db/DbList.vue

@@ -20,7 +20,14 @@
                         </el-radio>
                     </template>
                 </el-table-column>
-                <el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip>
+                    <template #default="scope">
+                        <tag-info :tag-path="scope.row.tagPath" />
+                        <span class="ml5">
+                            {{ scope.row.tagPath }}
+                        </span>
+                    </template>
+                </el-table-column>
                 <el-table-column prop="name" label="名称" min-width="160" show-overflow-tooltip></el-table-column>
                 <el-table-column min-width="170" label="host:port" show-overflow-tooltip>
                     <template #default="scope">
@@ -180,7 +187,7 @@
                             size="small">DELETE</el-tag>
                         <el-tag v-if="scope.row.type == enums.DbSqlExecTypeEnum['INSERT'].value" color="#A8DEE0"
                             size="small">INSERT</el-tag>
-                            <el-tag v-if="scope.row.type == enums.DbSqlExecTypeEnum['QUERY'].value" color="#A8DEE0"
+                        <el-tag v-if="scope.row.type == enums.DbSqlExecTypeEnum['QUERY'].value" color="#A8DEE0"
                             size="small">QUERY</el-tag>
                     </template>
                 </el-table-column>
@@ -293,6 +300,7 @@ import { isTrue } from '@/common/assert';
 import { Search as SearchIcon } from '@element-plus/icons-vue'
 import { tagApi } from '../tag/api.ts';
 import { dateFormat } from '@/common/utils/date';
+import TagInfo from '../component/TagInfo.vue';
 
 const permissions = {
     saveDb: 'db:save',

mayfly_go_web/src/views/ops/db/component/InstanceTree.vue

@@ -23,18 +23,18 @@
                         </template>
                     </el-popover>
                 </template>
-                <el-menu-item v-if="dbs[inst.id]?.length> 20" :index="'schema-filter-' + inst.id" :key="'schema-filter-' + inst.id">
+                <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
+                        <el-input size="small" placeholder="过滤数据库" clearable @change="filterSchemaName(inst.id)"
-                                  @change="filterSchemaName(inst.id)"
+                            @keyup="(e: any) => filterSchemaName(inst.id, e)"
-                                  @keyup="(e: any) => filterSchemaName(inst.id, e)"
+                            v-model="state.schemaFilterParam[inst.id]" />
-                                  v-model="state.schemaFilterParam[inst.id]" />
                     </template>
                 </el-menu-item>
                 <!-- 第三级：数据库 -->
-                <el-sub-menu v-show="schema.show" v-for="schema in dbs[inst.id]" :index="inst.id + schema.name" :key="inst.id + schema.name"
+                <el-sub-menu v-show="schema.show" v-for="schema in dbs[inst.id]" :index="inst.id + schema.name"
-                    :class="state.nowSchema === (inst.id + schema.name) && 'checked'"
+                    :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">
@@ -57,7 +57,8 @@
                                 </el-icon>
                             </div>
                         </template>
-                        <el-menu-item v-if="tables[inst.id + schema.name]?.length> 20"  :index="inst.id + schema.name + '-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">
@@ -79,8 +80,8 @@
                                             <Calendar color="#409eff" />
                                         </el-icon>
                                         <el-tooltip v-if="tb.tableComment" effect="customized"
-                                            :content="tb.tableComment" placement="right" >
+                                            :content="tb.tableComment" placement="right">
-                                          <span v-html="tb.showName || tb.tableName"></span>
+                                            <span v-html="tb.showName || tb.tableName"></span>
                                         </el-tooltip>
                                         <span v-else v-html="tb.showName || tb.tableName"></span>
                                     </div>
@@ -101,7 +102,8 @@
 
                         <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)">
+                                :key="inst.id + schema.name + sql.name"
+                                @click="clickSqlName(inst, schema.name, sql.name)">
                                 <template #title>
                                     <div class="ml35" style="width: 100%">
                                         <el-icon>
@@ -171,8 +173,8 @@ const loadInstances = async () => {
 
         // dbs
         let databases = db.database.split(' ')
-        let dbs = [] as any [];
+        let dbs = [] as any[];
-        databases.forEach((a: string) =>dbs.push({name: a, show: true}))
+        databases.forEach((a: string) => dbs.push({ name: a, show: true }))
         state.dbs[db.id] = dbs
     }
 }
@@ -231,7 +233,7 @@ const filterTableName = (instId: number, schema: string, event?: any) => {
     }
     let param = state.filterParam[key] as string
     state.tables[key].forEach((a: any) => {
-        let {match, showName} = matchAndHighLight(param, a.tableName+a.tableComment, a.tableName)
+        let { match, showName } = matchAndHighLight(param, a.tableName + a.tableComment, a.tableName)
         a.show = match;
         a.showName = showName
     })
@@ -244,42 +246,42 @@ const filterSchemaName = (instId: number, event?: any) => {
     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)
+        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} => {
+const matchAndHighLight = (searchParam: string, param: string, title: string): { match: boolean, showName: string } => {
-    if(!searchParam){
+    if (!searchParam) {
-        return  {match: true, showName: ''}
+        return { match: true, showName: '' }
     }
     let str = '';
-    for(let c of searchParam?.replace('/', '\/')){
+    for (let c of searchParam?.replace('/', '\/')) {
         str += `(${c}).*`
     }
     let regex = eval(`/${str}/i`)
     let res = param.match(regex);
-    if(res?.length){
+    if (res?.length) {
-        if(res?.length){
+        if (res?.length) {
             let tmp = '', showName = '';
-            for(let i =1; i<=res.length-1; i++){
+            for (let i = 1; i <= res.length - 1; i++) {
                 let head = (tmp || title).replace(res[i], `###${res[i]}!!!`);
-                let idx = head.lastIndexOf('!!!')+3;
+                let idx = head.lastIndexOf('!!!') + 3;
                 tmp = head.substring(idx);
                 showName += head.substring(0, idx)
-                if(!tmp){
+                if (!tmp) {
                     break
                 }
             }
             showName += tmp;
-            showName = showName.replaceAll('###','<span style="color: red">')
+            showName = showName.replaceAll('###', '<span style="color: red">')
-            showName = showName.replaceAll('!!!','</span>')
+            showName = showName.replaceAll('!!!', '</span>')
-            return {match: true, showName}
+            return { match: true, showName }
         }
     }
-  
+
-    return {match: false, showName: ''}
+    return { match: false, showName: '' }
 
 }
 

mayfly_go_web/src/views/ops/db/component/tab/TableData.vue

@@ -66,7 +66,7 @@
 
         <db-table ref="dbTableRef" :db-id="state.ti.dbId" :db-type="state.ti.dbType" :db="state.ti.db" :data="datas"
             :table="state.table" :column-names="columnNames" :loading="loading" :height="tableHeight"
-            :show-column-tip="true" :sortable="true" @sort-change="(sort: any) => onTableSortChange(sort)"
+            :show-column-tip="true" :sortable="'custom'" @sort-change="(sort: any) => onTableSortChange(sort)"
             @selection-change="onDataSelectionChange" @change-updated-field="changeUpdatedField"></db-table>
 
         <el-row type="flex" class="mt5" justify="center">
@@ -311,6 +311,7 @@ const onDeleteData = async () => {
 };
 
 const onGenerateInsertSql = async () => {
+    isTrue(state.selectionDatas && state.selectionDatas.length > 0, '请先选择数据');
     emits('genInsertSql', state.ti.getNowDbInst().genInsertSql(state.ti.db, state.table, state.selectionDatas));
 };
 

mayfly_go_web/src/views/ops/machine/MachineList.vue

@@ -29,14 +29,21 @@
                         </el-radio>
                     </template>
                 </el-table-column>
-                <el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip>
+                    <template #default="scope">
+                        <tag-info :tag-path="scope.row.tagPath" />
+                        <span class="ml5">
+                            {{ scope.row.tagPath }}
+                        </span>
+                    </template>
+                </el-table-column>
                 <el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip></el-table-column>
                 <el-table-column prop="ip" label="ip:port" min-width="150">
                     <template #default="scope">
                         <el-link :disabled="scope.row.status == -1" @click="showMachineStats(scope.row)" type="primary"
-                            :underline="false">{{
+                            :underline="false">
-                                    `${scope.row.ip}:${scope.row.port}`
+                            {{ `${scope.row.ip}:${scope.row.port}`}}
-                            }}</el-link>
+                        </el-link>
                     </template>
                 </el-table-column>
                 <el-table-column prop="status" label="状态" min-width="80">
@@ -121,7 +128,8 @@
                 <el-descriptions-item :span="1" label="端口">{{ infoDialog.data.port }}</el-descriptions-item>
 
                 <el-descriptions-item :span="2" label="用户名">{{ infoDialog.data.username }}</el-descriptions-item>
-                <el-descriptions-item :span="1" label="认证方式">{{ infoDialog.data.authMethod == 1 ? 'Password' :
+                <el-descriptions-item :span="1" label="认证方式">{{
+                    infoDialog.data.authMethod == 1 ? 'Password' :
                         'PublicKey'
                 }}</el-descriptions-item>
 
@@ -176,6 +184,7 @@ import ProcessList from './ProcessList.vue';
 import MachineStats from './MachineStats.vue';
 import MachineRec from './MachineRec.vue';
 import { dateFormat } from '@/common/utils/date';
+import TagInfo from '../component/TagInfo.vue';
 
 const router = useRouter();
 const state = reactive({

mayfly_go_web/src/views/ops/mongo/MongoList.vue

@@ -20,7 +20,14 @@
                         </el-radio>
                     </template>
                 </el-table-column>
-                <el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip>
+                    <template #default="scope">
+                        <tag-info :tag-path="scope.row.tagPath" />
+                        <span class="ml5">
+                            {{ scope.row.tagPath }}
+                        </span>
+                    </template>
+                </el-table-column>
                 <el-table-column prop="name" label="名称" width></el-table-column>
                 <el-table-column prop="uri" label="连接uri" min-width="150" show-overflow-tooltip>
                     <template #default="scope">
@@ -193,6 +200,7 @@ import { tagApi } from '../tag/api.ts';
 import MongoEdit from './MongoEdit.vue';
 import { formatByteSize } from '@/common/utils/format';
 import { dateFormat } from '@/common/utils/date';
+import TagInfo from '../component/TagInfo.vue';
 
 const state = reactive({
     tags: [],

mayfly_go_web/src/views/ops/redis/RedisList.vue

@@ -20,7 +20,14 @@
                         </el-radio>
                     </template>
                 </el-table-column>
-                <el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip></el-table-column>
+                <el-table-column prop="tagPath" label="标签路径" min-width="150" show-overflow-tooltip>
+                    <template #default="scope">
+                        <tag-info :tag-path="scope.row.tagPath" />
+                        <span class="ml5">
+                            {{ scope.row.tagPath }}
+                        </span>
+                    </template>
+                </el-table-column>
                 <el-table-column prop="name" label="名称" min-width="100"></el-table-column>
                 <el-table-column prop="host" label="host:port" min-width="150" show-overflow-tooltip> </el-table-column>
                 <el-table-column prop="mode" label="mode" min-width="100"></el-table-column>
@@ -156,6 +163,7 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import { tagApi } from '../tag/api.ts';
 import RedisEdit from './RedisEdit.vue';
 import { dateFormat } from '@/common/utils/date';
+import TagInfo from '../component/TagInfo.vue';
 
 const state = reactive({
     tags: [],

mayfly_go_web/src/views/ops/tag/api.ts

@@ -2,6 +2,7 @@ import Api from '@/common/Api';
 
 export const tagApi = {
     getAccountTags: Api.create("/tag-trees/account-has", 'get'),
+    listByQuery: Api.create("/tag-trees/query", 'get'),
     getTagTrees: Api.create("/tag-trees", 'get'),
     saveTagTree: Api.create("/tag-trees", 'post'),
     delTagTree: Api.create("/tag-trees/{id}", 'delete'),
@@ -11,8 +12,8 @@ export const tagApi = {
     delTeam: Api.create("/teams/{id}", 'delete'),
 
     getTeamMem: Api.create("/teams/{teamId}/members", 'get'),
-    saveTeamMem:  Api.create("/teams/{teamId}/members", 'post'),
+    saveTeamMem: Api.create("/teams/{teamId}/members", 'post'),
-    delTeamMem:  Api.create("/teams/{teamId}/members/{accountId}", 'delete'),
+    delTeamMem: Api.create("/teams/{teamId}/members/{accountId}", 'delete'),
 
     getTeamTagIds: Api.create("/teams/{teamId}/tags", 'get'),
     saveTeamTags: Api.create("/teams/{teamId}/tags", 'post'),

server/internal/tag/api/tag_tree.go

@@ -7,6 +7,7 @@ import (
 	"mayfly-go/internal/tag/domain/entity"
 	"mayfly-go/pkg/ginx"
 	"mayfly-go/pkg/req"
+	"strings"
 )
 
 type TagTree struct {
@@ -31,6 +32,15 @@ func (p *TagTree) GetTagTree(rc *req.Ctx) {
 	rc.ResData = tagTrees.ToTrees(0)
 }
 
+func (p *TagTree) ListByQuery(rc *req.Ctx) {
+	cond := new(entity.TagTreeQuery)
+	tagPaths := rc.GinCtx.Query("tagPaths")
+	cond.CodePaths = strings.Split(tagPaths, ",")
+	var tagTrees vo.TagTreeVOS
+	p.TagTreeApp.ListByQuery(cond, &tagTrees)
+	rc.ResData = tagTrees
+}
+
 func (p *TagTree) SaveTagTree(rc *req.Ctx) {
 	projectTree := &entity.TagTree{}
 	ginx.BindJsonAndValid(rc.GinCtx, projectTree)

server/internal/tag/domain/entity/query.go

@@ -5,11 +5,11 @@ import "mayfly-go/pkg/model"
 type TagTreeQuery struct {
 	model.Model
 
-	Pid      uint64
+	Pid           uint64
-	Code     string `json:"code"`     // 标识
+	Code          string `json:"code"`     // 标识
-	CodePath string `json:"codePath"` // 标识路径
+	CodePath      string `json:"codePath"` // 标识路径
-	Name     string `json:"name"`     // 名称
+	CodePaths     []string
-
+	Name          string `json:"name"` // 名称
 	CodePathLike  string // 标识符路径模糊查询
 	CodePathLikes []string
 }

server/internal/tag/infrastructure/persistence/tag_tree.go

@@ -6,6 +6,7 @@ import (
 	"mayfly-go/internal/tag/domain/repository"
 	"mayfly-go/pkg/biz"
 	"mayfly-go/pkg/model"
+	"strings"
 )
 
 type tagTreeRepoImpl struct{}
@@ -22,6 +23,14 @@ func (p *tagTreeRepoImpl) SelectByCondition(condition *entity.TagTreeQuery, toEn
 	if condition.CodePath != "" {
 		sql = fmt.Sprintf("%s AND p.code_path = '%s'", sql, condition.CodePath)
 	}
+	if len(condition.CodePaths) > 0 {
+		strCodePaths := make([]string, 0)
+		// 将字符串用''包裹
+		for _, v := range condition.CodePaths {
+			strCodePaths = append(strCodePaths, fmt.Sprintf("'%s'", v))
+		}
+		sql = fmt.Sprintf("%s AND p.code_path IN (%s)", sql, strings.Join(strCodePaths, ","))
+	}
 	if condition.CodePathLike != "" {
 		sql = fmt.Sprintf("%s AND p.code_path LIKE '%s'", sql, condition.CodePathLike+"%")
 	}

server/internal/tag/router/tag_tree.go

@@ -20,6 +20,11 @@ func InitTagTreeRouter(router *gin.RouterGroup) {
 			req.NewCtxWithGin(c).Handle(m.GetTagTree)
 		})
 
+		// 根据条件获取标签
+		project.GET("query", func(c *gin.Context) {
+			req.NewCtxWithGin(c).Handle(m.ListByQuery)
+		})
+
 		// 获取登录账号拥有的标签信息
 		project.GET("account-has", func(c *gin.Context) {
 			req.NewCtxWithGin(c).Handle(m.GetAccountTags)