refactor: redis操作界面重构

README.md

@@ -40,7 +40,7 @@ web 版 **linux(终端[终端回放] 文件 脚本 进程)、数据库（mysql p
 
 ### 演示环境
 
-http://mayflygo.1yue.net
+http://go.mayfly.run
 账号/密码：test/test123.
 
 ### 系统核心功能截图

mayfly_go_web/src/common/config.ts

@@ -11,7 +11,7 @@ const config = {
     baseWsUrl: `${(window as any).globalConfig.BaseWsUrl || `${location.protocol == 'https:' ? 'wss:' : 'ws:'}//${getBaseApiUrl()}`}/api`,
 
     // 系统版本
-    version: 'v1.5.0',
+    version: 'v1.5.1',
 };
 
 export default config;

mayfly_go_web/src/views/login/component/AccountLogin.vue

@@ -38,7 +38,7 @@
                 </el-row>
             </el-form-item>
             <el-form-item v-if="ldapEnabled" prop="ldapLogin">
-              <el-checkbox v-model="loginForm.ldapLogin" label="LDAP 登录" size="small"/>
+                <el-checkbox v-model="loginForm.ldapLogin" label="LDAP 登录" size="small" />
             </el-form-item>
             <span v-if="showLoginFailTips" style="color: #f56c6c; font-size: 12px">
                 提示：登录失败超过{{ accountLoginSecurity.loginFailCount }}次后将被限制{{ accountLoginSecurity.loginFailMin }}分钟内不可再次登录
@@ -136,7 +136,7 @@ import { getSession, setSession, setUserInfo2Session, setUseWatermark2Session }
 import { formatAxis } from '@/common/utils/format';
 import openApi from '@/common/openApi';
 import { RsaEncrypt } from '@/common/rsa';
-import {getAccountLoginSecurity, getLdapEnabled, useWartermark} from '@/common/sysconfig';
+import { getAccountLoginSecurity, getLdapEnabled, useWartermark } from '@/common/sysconfig';
 import { letterAvatar } from '@/common/utils/string';
 import { useUserInfo } from '@/store/userInfo';
 import QrcodeVue from 'qrcode.vue';
@@ -242,7 +242,7 @@ onMounted(async () => {
 
         const ldap = await getLdapEnabled();
         state.ldapEnabled = ldap;
-        state.loginForm.ldapLogin = ldap
+        state.loginForm.ldapLogin = ldap;
     });
     // 移除公钥, 方便后续重新获取
     sessionStorage.removeItem('RsaPublicKey');
@@ -298,9 +298,9 @@ const onSignIn = async () => {
         const loginReq = { ...state.loginForm };
         loginReq.password = await RsaEncrypt(originPwd);
         if (state.loginForm.ldapLogin) {
-          loginRes = await openApi.ldapLogin(loginReq);
+            loginRes = await openApi.ldapLogin(loginReq);
         } else {
-          loginRes = await openApi.login(loginReq);
+            loginRes = await openApi.login(loginReq);
         }
     } catch (e: any) {
         state.loading.signIn = false;

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

@@ -84,12 +84,17 @@ const { filterText } = toRefs(state);
 
 onMounted(async () => {
     if (!props.height) {
-        state.height = window.innerHeight - 147 + 'px';
+        setHeight();
+        window.onresize = () => setHeight();
     } else {
         state.height = props.height;
     }
 });
 
+const setHeight = () => {
+    state.height = window.innerHeight - 147 + 'px';
+};
+
 watch(filterText, (val) => {
     treeRef.value?.filter(val);
 });

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

@@ -29,74 +29,134 @@
                 </el-row>
             </el-col>
 
-            <el-col :span="20" style="border-left: 1px solid var(--el-card-border-color)">
+            <el-col v-loading="state.loadingKeyTree" :span="7" class="el-scrollbar flex-auto" style="overflow: auto">
-                <div class="mt10 ml5">
+                <div>
-                    <el-col>
+                    <el-row>
-                        <el-form class="search-form" label-position="right" :inline="true" label-width="auto">
+                        <el-col :span="2">
-                            <el-form-item label="key" label-width="auto">
+                            <el-input v-model="state.keySeparator" placeholder="分割符" size="small" class="ml5" />
-                                <el-input placeholder="match 支持*模糊key" style="width: 250px" v-model="scanParam.match" @clear="clear()" clearable></el-input>
+                        </el-col>
-                            </el-form-item>
+                        <el-col :span="18">
-                            <el-form-item label="count" label-width="auto">
+                            <el-input @clear="clear" v-model="scanParam.match" placeholder="match 支持*模糊key" clearable size="small" class="ml10" />
-                                <el-input placeholder="count" style="width: 70px" v-model.number="scanParam.count"> </el-input>
+                        </el-col>
-                            </el-form-item>
+                        <el-col :span="4">
-                            <el-form-item>
+                            <el-button
-                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="searchKey()" type="success" icon="search" plain></el-button>
+                                class="ml15"
-                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="scan()" icon="bottom" plain>scan</el-button>
+                                :disabled="!scanParam.id || !scanParam.db"
-                                <el-button
+                                @click="searchKey()"
-                                    :disabled="!scanParam.id || !scanParam.db"
+                                type="success"
-                                    @click="showNewKeyDialog"
+                                icon="search"
-                                    type="primary"
+                                size="small"
-                                    icon="plus"
+                                plain
-                                    plain
+                            ></el-button>
-                                    v-auth="'redis:data:save'"
+                        </el-col>
-                                ></el-button>
+                    </el-row>
-                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="flushDb" type="danger" plain v-auth="'redis:data:save'"
+
-                                    >flush</el-button
+                    <el-row class="mb5 mt5">
-                                >
+                        <el-col :span="20">
-                            </el-form-item>
+                            <el-button class="ml5" :disabled="!scanParam.id || !scanParam.db" @click="scan(true)" type="success" icon="more" size="small" plain
-                            <div style="float: right">
+                                >加载更多</el-button
-                                <span>keys: {{ state.dbsize }}</span>
+                            >
-                            </div>
+
-                        </el-form>
+                            <el-button
-                    </el-col>
+                                v-auth="'redis:data:save'"
-                    <el-table v-loading="state.loading" :data="state.keys" :height="tableHeight" stripe :highlight-current-row="true" style="cursor: pointer">
+                                :disabled="!scanParam.id || !scanParam.db"
-                        <el-table-column show-overflow-tooltip prop="key" label="key"></el-table-column>
+                                @click="showNewKeyDialog"
-                        <el-table-column prop="type" label="type" width="80">
+                                type="primary"
-                            <template #default="scope">
+                                icon="plus"
-                                <el-tag :color="getTypeColor(scope.row.type)" size="small">{{ scope.row.type }}</el-tag>
+                                size="small"
-                            </template>
+                                plain
-                        </el-table-column>
+                                >新增key</el-button
-                        <el-table-column prop="ttl" label="ttl(过期时间)" width="140">
+                            >
-                            <template #default="scope">
+
-                                {{ ttlConveter(scope.row.ttl) }}
+                            <el-button
-                            </template>
+                                :disabled="!scanParam.id || !scanParam.db"
-                        </el-table-column>
+                                @click="flushDb"
-                        <el-table-column label="操作">
+                                type="danger"
-                            <template #default="scope">
+                                plain
-                                <el-button @click="showKeyDetail(scope.row)" type="success" icon="search" plain size="small">查看 </el-button>
+                                v-auth="'redis:data:del'"
-                                <el-button v-auth="'redis:data:del'" @click="del(scope.row.key)" type="danger" icon="delete" plain size="small"
+                                size="small"
-                                    >删除
+                                icon="delete"
-                                </el-button>
+                                >flush</el-button
-                            </template>
+                            >
-                        </el-table-column>
+                        </el-col>
-                    </el-table>
+                        <el-col :span="4">
+                            <span style="display: inline-block" class="mt5">keys: {{ state.dbsize }}</span>
+                        </el-col>
+                    </el-row>
+
+                    <el-tree
+                        :style="{ maxHeight: state.keyTreeHeight, height: state.keyTreeHeight, overflow: 'auto', border: '1px solid #e1f3d8' }"
+                        ref="keyTreeRef"
+                        :highlight-current="true"
+                        :data="keyTreeData"
+                        :props="treeProps"
+                        :indent="8"
+                        node-key="key"
+                        :auto-expand-parent="false"
+                        :default-expanded-keys="Array.from(state.keyTreeExpanded)"
+                        @node-click="handleKeyTreeNodeClick"
+                        @node-expand="keyTreeNodeExpand"
+                        @node-collapse="keyTreeNodeCollapse"
+                    >
+                        <template #default="{ node, data }">
+                            <span class="custom-tree-node key-list-custom-node">
+                                <el-dropdown size="small" trigger="contextmenu">
+                                    <span class="el-dropdown-link">
+                                        <span v-if="data.type == 1 && !node.expanded">
+                                            <SvgIcon :size="15" name="folder" />
+                                        </span>
+                                        <span v-if="data.type == 1 && node.expanded">
+                                            <SvgIcon :size="15" name="folder-opened" />
+                                        </span>
+                                        <span v-if="data.type == 1" class="ml5" style="font-weight: bold">
+                                            {{ node.label }}
+                                        </span>
+                                        <span v-if="data.type == 2" class="ml5" style="color: #67c23a">
+                                            {{ node.label }}
+                                        </span>
+
+                                        <span v-if="!node.isLeaf" class="ml5" style="font-weight: bold"> ({{ data.keyCount }}) </span>
+                                    </span>
+
+                                    <template #dropdown v-if="data.type == 2">
+                                        <el-dropdown-menu>
+                                            <el-dropdown-item @click="showKeyDetail(data.key, true)">
+                                                <el-link type="primary" icon="plus" :underline="false" style="margin-left: 2px">新tab打开</el-link>
+                                            </el-dropdown-item>
+                                            <span v-auth="'redis:data:del'">
+                                                <el-dropdown-item @click="delKey(data.key)">
+                                                    <el-link type="danger" icon="delete" :underline="false" style="margin-left: 2px">删除</el-link>
+                                                </el-dropdown-item>
+                                            </span>
+                                        </el-dropdown-menu>
+                                    </template>
+                                </el-dropdown>
+                            </span>
+                        </template>
+                    </el-tree>
+                </div>
+            </el-col>
+
+            <el-col :span="13" style="border-left: 1px solid var(--el-card-border-color)">
+                <div class="ml5">
+                    <el-tabs @tab-remove="removeDataTab" style="width: 100%" v-model="state.activeName">
+                        <el-tab-pane closable v-for="dt in state.dataTabs" :key="dt.key" :label="dt.label" :name="dt.key">
+                            <key-detail :redisId="scanParam.id" :db="scanParam.db" :key-info="dt.keyInfo" @change-key="searchKey()" @del-key="delKey" />
+                        </el-tab-pane>
+                    </el-tabs>
                 </div>
             </el-col>
         </el-row>
 
         <div style="text-align: center; margin-top: 10px"></div>
 
-        <el-dialog title="Key详情" v-model="keyDetailDialog.visible" width="800px" :destroy-on-close="true" :close-on-click-modal="false">
-            <key-detail :redisId="scanParam.id" :db="scanParam.db" :key-info="keyDetailDialog.keyInfo" @change-key="searchKey()" />
-        </el-dialog>
-
         <el-dialog title="新增Key" v-model="newKeyDialog.visible" width="500px" :destroy-on-close="true" :close-on-click-modal="false">
             <el-form ref="keyForm" label-width="auto">
                 <el-form-item prop="key" label="键名">
-                    <el-input v-model.trim="keyDetailDialog.keyInfo.key" placeholder="请输入键名"></el-input>
+                    <el-input v-model.trim="newKeyDialog.keyInfo.key" placeholder="请输入键名"></el-input>
                 </el-form-item>
                 <el-form-item prop="type" label="类型">
-                    <el-select v-model="keyDetailDialog.keyInfo.type" default-first-option style="width: 100%" placeholder="请选择类型">
+                    <el-select v-model="newKeyDialog.keyInfo.type" default-first-option style="width: 100%" placeholder="请选择类型">
                         <el-option key="string" label="string" value="string"></el-option>
                         <el-option key="hash" label="hash" value="hash"></el-option>
                         <el-option key="set" label="set" value="set"></el-option>
@@ -109,7 +169,7 @@
             <template #footer>
                 <div class="dialog-footer">
                     <el-button @click="cancelNewKey()">取 消</el-button>
-                    <el-button v-auth="'machine:script:save'" type="primary" @click="newKey">确 定</el-button>
+                    <el-button v-auth="'redis:data:save'" type="primary" @click="newKey">确 定</el-button>
                 </div>
             </template>
         </el-dialog>
@@ -118,11 +178,12 @@
 
 <script lang="ts" setup>
 import { redisApi } from './api';
-import { defineAsyncComponent, toRefs, reactive, onMounted } from 'vue';
+import { ref, defineAsyncComponent, toRefs, reactive, onMounted, nextTick } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { isTrue, notBlank, notNull } from '@/common/assert';
 import { TagTreeNode } from '../component/tag';
 import TagTree from '../component/TagTree.vue';
+import { keysToTree, sortByTreeNodes, keysToList } from './utils';
 
 const KeyDetail = defineAsyncComponent(() => import('./KeyDetail.vue'));
 
@@ -134,24 +195,37 @@ class NodeType {
     static Db = 2;
 }
 
+const treeProps = {
+    label: 'name',
+    children: 'children',
+    isLeaf: 'leaf',
+};
+
+const defaultCount = 250;
+
+const keyTreeRef: any = ref(null);
+
 const state = reactive({
-    loading: false,
-    tableHeight: 600,
     tags: [],
     redisList: [] as any,
     dbList: [],
-    query: {
+    keyTreeHeight: window.innerHeight - 147 - 30 + 'px',
-        tagPath: null,
+    loadingKeyTree: false,
-    },
+    keys: [] as any,
+    keySeparator: ':',
+    keyTreeData: [] as any,
+    keyTreeExpanded: new Set(),
+    activeName: '',
+    dataTabs: {} as any,
     scanParam: {
         id: null as any,
         mode: '',
         db: null as any,
         match: null,
-        count: 10,
+        count: defaultCount,
         cursor: {},
     },
-    keyDetailDialog: {
+    newKeyDialog: {
         visible: false,
         keyInfo: {
             type: 'string',
@@ -159,21 +233,19 @@ const state = reactive({
             key: '',
         },
     },
-    newKeyDialog: {
-        visible: false,
-    },
-    keys: [],
     dbsize: 0,
 });
 
-const { tableHeight, scanParam, keyDetailDialog, newKeyDialog } = toRefs(state);
+const { scanParam, keyTreeData, newKeyDialog } = toRefs(state);
 
 onMounted(async () => {
     setHeight();
+    // 监听浏览器窗口大小变化,更新对应组件高度
+    window.onresize = () => setHeight();
 });
 
 const setHeight = () => {
-    state.tableHeight = window.innerHeight - 159;
+    state.keyTreeHeight = window.innerHeight - 177 + 'px';
 };
 
 /**
@@ -269,20 +341,20 @@ const getDbs = async (redisInfo: any) => {
     return dbs;
 };
 
-const scan = async () => {
+const scan = async (appendKey = false) => {
     isTrue(state.scanParam.id != null, '请先选择redis');
-    notBlank(state.scanParam.count, 'count不能为空');
+    notBlank(state.scanParam.db, '请先选择库');
 
     const match: string = state.scanParam.match || '';
     if (!match) {
-        isTrue(state.scanParam.count <= 100, 'key搜索条件为空时, count不能大于100');
+        state.scanParam.count = defaultCount;
     } else if (match.indexOf('*') != -1) {
         const dbsize = state.dbsize;
         // 如果为模糊搜索，并且搜索的key模式大于指定字符数，则将count设大点scan
         if (match.length > 10) {
             state.scanParam.count = dbsize > 100000 ? Math.floor(dbsize / 10) : 1000;
         } else {
-            state.scanParam.count = 100;
+            state.scanParam.count = defaultCount;
         }
     }
 
@@ -292,20 +364,123 @@ const scan = async () => {
         scanParam.count = Math.floor(state.scanParam.count / 3);
     }
 
-    state.loading = true;
     try {
+        state.loadingKeyTree = true;
         const res = await redisApi.scan.request(scanParam);
-        state.keys = res.keys;
+        // 追加key，则将新key合并至原keys（加载更多）
+        if (appendKey) {
+            state.keys = [...state.keys, ...res.keys];
+        } else {
+            state.keys = res.keys;
+        }
+        setKeyList(state.keys);
         state.dbsize = res.dbSize;
         state.scanParam.cursor = res.cursor;
     } finally {
-        state.loading = false;
+        state.loadingKeyTree = false;
     }
 };
 
+const setKeyList = (keys: any) => {
+    state.keyTreeData = state.keySeparator ? keysToTree(keys, state.keySeparator, state.keyTreeExpanded) : keysToList(keys);
+    nextTick(() => {
+        // key长度小于指定数量，则展开所有节点
+        if (keys.length <= 20) {
+            expandAllKeyNode(state.keyTreeData);
+        }
+
+        sortByTreeNodes(keyTreeRef.value.root.childNodes);
+    });
+};
+
+// 展开所有节点
+const expandAllKeyNode = (nodes: any) => {
+    for (let node of nodes) {
+        if (!node.children) {
+            continue;
+        }
+        state.keyTreeExpanded.add(node.key);
+        for (let i = 0; i < node.children.length; i++) {
+            expandAllKeyNode(node.children);
+        }
+    }
+};
+
+const handleKeyTreeNodeClick = async (data: any) => {
+    // 目录则不做处理
+    if (data.type == 1) {
+        return;
+    }
+
+    showKeyDetail(data.key);
+};
+
+const showKeyDetail = async (key: any, newTab = false) => {
+    let keyInfo;
+    if (typeof key == 'object') {
+        keyInfo = key;
+    } else {
+        if (state.dataTabs[key]) {
+            state.activeName = key;
+            return;
+        }
+        const res = await redisApi.keyInfo.request({ id: state.scanParam.id, db: state.scanParam.db, key: key });
+        keyInfo = {
+            key: key,
+            type: res.type,
+            timed: res.ttl,
+        };
+    }
+
+    let label = keyInfo.key;
+    if (label.length > 40) {
+        label = label.slice(0, 40) + '...';
+    }
+    const dataTab = {
+        key: keyInfo.key,
+        label,
+        keyInfo,
+    };
+
+    if (!newTab) {
+        delete state.dataTabs[state.activeName];
+    }
+
+    state.dataTabs[keyInfo.key] = dataTab;
+    state.activeName = keyInfo.key;
+};
+
+const removeDataTab = (targetName: string) => {
+    const tabNames = Object.keys(state.dataTabs);
+    let activeName = state.activeName;
+    tabNames.forEach((name, index) => {
+        if (name === targetName) {
+            const nextTab = tabNames[index + 1] || tabNames[index - 1];
+            if (nextTab) {
+                activeName = nextTab;
+            }
+        }
+    });
+    state.activeName = activeName;
+    delete state.dataTabs[targetName];
+};
+
+const keyTreeNodeExpand = (data: any, node: any, component: any) => {
+    state.keyTreeExpanded.add(data.key);
+    // async sort nodes
+    if (!node.customSorted) {
+        node.customSorted = true;
+        sortByTreeNodes(node.childNodes);
+    }
+};
+
+const keyTreeNodeCollapse = (data: any, node: any, component: any) => {
+    state.keyTreeExpanded.delete(data.key);
+};
+
 const searchKey = async () => {
     state.scanParam.cursor = {};
-    await scan();
+    await scan(false);
 };
 
 const clear = () => {
@@ -316,24 +491,17 @@ const clear = () => {
 };
 
 const resetScanParam = () => {
-    state.scanParam.count = 10;
     state.scanParam.match = null;
     state.scanParam.cursor = {};
-};
+    state.keyTreeExpanded.clear();
-
+    state.dataTabs = {};
-const showKeyDetail = async (row: any) => {
+    state.activeName = '';
-    const type = row.type;
-
-    state.keyDetailDialog.keyInfo.type = type;
-    state.keyDetailDialog.keyInfo.timed = row.ttl;
-    state.keyDetailDialog.keyInfo.key = row.key;
-    state.keyDetailDialog.visible = true;
 };
 
 const showNewKeyDialog = () => {
     notNull(state.scanParam.id, '请先选择redis');
     notNull(state.scanParam.db, '请选择要操作的库');
-    resetKeyDetailInfo();
+    resetNewKeyInfo();
     state.newKeyDialog.visible = true;
 };
 
@@ -358,12 +526,12 @@ const flushDb = () => {
 };
 
 const cancelNewKey = () => {
-    resetKeyDetailInfo();
+    resetNewKeyInfo();
     state.newKeyDialog.visible = false;
 };
 
 const newKey = async () => {
-    const keyInfo = state.keyDetailDialog.keyInfo;
+    const keyInfo = state.newKeyDialog.keyInfo;
     const keyType = keyInfo.type;
     const key = keyInfo.key;
     notBlank(key, '键名不能为空');
@@ -376,85 +544,45 @@ const newKey = async () => {
             value: '',
         });
     }
+
+    showKeyDetail(
+        {
+            ...keyInfo,
+        },
+        true
+    );
     state.newKeyDialog.visible = false;
-    state.keyDetailDialog.visible = true;
+
-    searchKey();
+    // 添加新增的key至key tree
+    state.keys.push(key);
+    setKeyList(state.keys);
 };
 
-const resetKeyDetailInfo = () => {
+const resetNewKeyInfo = () => {
-    state.keyDetailDialog.keyInfo.key = '';
+    state.newKeyDialog.keyInfo.key = '';
-    state.keyDetailDialog.keyInfo.type = 'string';
+    state.newKeyDialog.keyInfo.type = 'string';
-    state.keyDetailDialog.keyInfo.timed = -1;
+    state.newKeyDialog.keyInfo.timed = -1;
 };
 
-const del = (key: string) => {
+const delKey = (key: string) => {
     ElMessageBox.confirm(`确定删除[ ${key} ] 该key?`, '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
     })
-        .then(() => {
+        .then(async () => {
-            redisApi.delKey
+            await redisApi.delKey.request({
-                .request({
+                key,
-                    key,
+                id: state.scanParam.id,
-                    id: state.scanParam.id,
+                db: state.scanParam.db,
-                    db: state.scanParam.db,
+            });
-                })
+            ElMessage.success('删除成功！');
-                .then(() => {
+            searchKey();
-                    ElMessage.success('删除成功！');
+
-                    searchKey();
+            removeDataTab(key);
-                });
         })
         .catch(() => {});
 };
-
-const ttlConveter = (ttl: any) => {
-    if (ttl == -1 || ttl == 0) {
-        return '永久';
-    }
-    if (!ttl) {
-        ttl = 0;
-    }
-    let second = parseInt(ttl); // 秒
-    let min = 0; // 分
-    let hour = 0; // 小时
-    let day = 0;
-    if (second > 60) {
-        min = parseInt(second / 60 + '');
-        second = second % 60;
-        if (min > 60) {
-            hour = parseInt(min / 60 + '');
-            min = min % 60;
-            if (hour > 24) {
-                day = parseInt(hour / 24 + '');
-                hour = hour % 24;
-            }
-        }
-    }
-    let result = '' + second + 's';
-    if (min > 0) {
-        result = '' + min + 'm:' + result;
-    }
-    if (hour > 0) {
-        result = '' + hour + 'h:' + result;
-    }
-    if (day > 0) {
-        result = '' + day + 'd:' + result;
-    }
-    return result;
-};
-
-const getTypeColor = (type: string) => {
-    if (type == 'string') {
-        return '#E4F5EB';
-    }
-    if (type == 'hash') {
-        return '#F9E2AE';
-    }
-    if (type == 'set') {
-        return '#A8DEE0';
-    }
-};
 </script>
 
 <style lang="scss">
@@ -463,4 +591,17 @@ const getTypeColor = (type: string) => {
         margin-bottom: unset;
     }
 }
+
+.key-list-vtree {
+    height: calc(100vh - 250px);
+}
+
+.key-list-vtree .key-list-custom-node {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    /*note the following 2 items should be same value, may not consist with itemSize*/
+    height: 22px;
+    line-height: 22px;
+}
 </style>

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

@@ -21,6 +21,10 @@ const props = defineProps({
     content: {
         type: String,
     },
+    height: {
+        type: String,
+        default: '0px',
+    },
 });
 
 const components = shallowReactive({
@@ -53,14 +57,24 @@ const viewerComponent = computed(() => {
 watch(
     () => props.content,
     (val: any) => {
-        state.content = val;
+        setContent(val);
     }
 );
 
 onMounted(() => {
-    state.content = props.content as any;
+    setContent(props.content as any);
 });
 
+const setContent = (content: string) => {
+    state.content = content;
+    try {
+        JSON.parse(content);
+        state.selectedView = 'Json';
+    } catch (e) {
+        state.selectedView = 'Text';
+    }
+};
+
 const getContent = () => {
     return viewerRef.value.getContent();
 };
@@ -90,12 +104,13 @@ defineExpose({ getContent });
 }
 
 // 默认文本框样式
+
 .format-viewer-container .el-textarea textarea {
     font-size: 14px;
-    height: calc(100vh - 536px);
+    height: calc(100vh - 536px + v-bind(height));
 }
 
 .format-viewer-container .monaco-editor-content {
-    height: calc(100vh - 550px) !important;
+    height: calc(100vh - 550px + v-bind(height)) !important;
 }
 </style>

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

@@ -6,8 +6,9 @@
                 ref="keyHeader"
                 :redis-id="redisId"
                 :db="db"
-                :key-info="keyInfo"
+                :key-info="state.keyInfo"
                 @refresh-content="refreshContent"
+                @del-key="delKey"
                 @change-key="changeKey"
                 class="key-header-info"
             >
@@ -19,7 +20,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, shallowReactive, reactive, computed, toRefs } from 'vue';
+import { defineAsyncComponent, watch, ref, shallowReactive, reactive, computed, toRefs, onMounted } from 'vue';
 import { ElMessage } from 'element-plus';
 import KeyHeader from './KeyHeader.vue';
 
@@ -51,10 +52,11 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['update:visible', 'changeKey', 'valChange']);
+const emit = defineEmits(['update:visible', 'changeKey', 'delKey']);
 
 const state = reactive({
     redisId: 0,
+    keyInfo: {} as any,
 });
 
 const componentMap = {
@@ -78,18 +80,35 @@ const refreshContent = () => {
     keyValueRef.value?.initData();
 };
 
+const delKey = () => {
+    emit('delKey', state.keyInfo.key);
+};
+
 const changeKey = () => {
     emit('changeKey');
 };
 
-const {} = toRefs(state);
+const setKeyInfo = (val: any) => {
+    state.keyInfo.timed = val.timed;
+    state.keyInfo.key = val.key;
+    state.keyInfo.type = val.type;
+};
 
-// watch(
+watch(
-//     () => props.keyInfo,
+    () => props.keyInfo,
-//     (val) => {
+    (val) => {
-//         state.keyInfo = val;
+        setKeyInfo(val);
-//     }
+    },
-// );
+    {
+        deep: true,
+    }
+);
+
+onMounted(() => {
+    setKeyInfo(props.keyInfo);
+});
+
+const {} = toRefs(state);
 </script>
 <style lang="scss">
 .key-tab-container {

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

@@ -2,9 +2,9 @@
     <div>
         <!-- key name -->
         <div class="key-header-item key-name-input">
-            <el-input ref="keyNameInput" v-model="keyInfo.key" title="点击重命名" placeholder="KeyName">
+            <el-input ref="keyNameInput" v-model="ki.key" title="点击重命名" placeholder="KeyName">
                 <template #prepend>
-                    <span class="key-detail-type">{{ keyInfo.type }}</span>
+                    <span class="key-detail-type">{{ ki.type }}</span>
                 </template>
 
                 <template #suffix>
@@ -15,12 +15,20 @@
 
         <!-- key ttl -->
         <div class="key-header-item key-ttl-input">
-            <el-input type="number" v-model.number="keyInfo.timed" placeholder="单位(秒),负数永久" title="点击修改过期时间">
+            <el-input type="number" v-model.number="ki.timed" placeholder="单位(秒),负数永久" title="点击修改过期时间">
                 <template #prepend>
                     <span slot="prepend">TTL</span>
                 </template>
 
                 <template #suffix>
+                    <!-- 时间转换 -->
+                    <el-tooltip effect="dark" placement="top">
+                        <template #content>{{ ttlConveter(ki.timed) }}</template>
+                        <span class="ml10">
+                            <el-icon class="mr5"><InfoFilled /></el-icon>
+                        </span>
+                    </el-tooltip>
+
                     <!-- save ttl -->
                     <SvgIcon v-auth="'redis:data:save'" @click="ttlKey" title="点击修改过期时间" name="check" />
                 </template>
@@ -29,7 +37,8 @@
 
         <!-- del & refresh btn -->
         <div class="key-header-item key-header-btn-con">
-            <el-button slot="reference" ref="refreshBtn" type="success" @click="refreshKey" icon="refresh" title="刷新"></el-button>
+            <el-button slot="reference" type="success" @click="refreshKey" icon="refresh" title="刷新"></el-button>
+            <el-button v-auth="'redis:data:del'" slot="reference" type="danger" @click="delKey" icon="delete" title="删除"></el-button>
         </div>
     </div>
 </template>
@@ -50,7 +59,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(['refreshContent', 'changeKey', 'valChange']);
+const emit = defineEmits(['refreshContent', 'delKey', 'changeKey']);
 
 const state = reactive({
     redisId: 0,
@@ -59,6 +68,11 @@ const state = reactive({
         type: '',
         timed: -1,
     } as any,
+    ki: {
+        key: '',
+        type: '',
+        timed: -1,
+    } as any,
     oldKey: '',
 });
 
@@ -77,14 +91,18 @@ const refreshKey = async () => {
     emit('refreshContent');
 };
 
+const delKey = async () => {
+    emit('delKey', state.ki.key);
+};
+
 const renameKey = async () => {
-    if (!state.oldKey || state.keyInfo.key == state.oldKey) {
+    if (!state.oldKey || state.ki.key == state.oldKey) {
         return;
     }
     await redisApi.renameKey.request({
         id: props.redisId,
         db: props.db,
-        newKey: state.keyInfo.key,
+        newKey: state.ki.key,
         key: state.oldKey,
     });
     ElMessage.success('设置成功');
@@ -96,7 +114,7 @@ const ttlKey = async () => {
         return;
     }
     // ttl <= 0，则持久化该key
-    if (state.keyInfo.timed <= 0) {
+    if (state.ki.timed <= 0) {
         try {
             await ElMessageBox.confirm('确定持久化该key?', 'Warning', {
                 confirmButtonText: '确认',
@@ -107,15 +125,15 @@ const ttlKey = async () => {
             return;
         }
         await persistKey();
-        state.keyInfo.timed = -1;
+        state.ki.timed = -1;
         return;
     }
 
     await redisApi.expireKey.request({
         id: props.redisId,
         db: props.db,
-        key: state.keyInfo.key,
+        key: state.ki.key,
-        seconds: state.keyInfo.timed,
+        seconds: state.ki.timed,
     });
     ElMessage.success('设置成功');
     emit('changeKey');
@@ -131,15 +149,58 @@ const persistKey = async () => {
     emit('changeKey');
 };
 
-const { keyInfo, oldKey } = toRefs(state);
+const { ki } = toRefs(state);
 
-// watch(
+const setKeyInfo = (val: any) => {
-//     () => props.keyInfo,
+    state.ki.timed = val.timed;
-//     (val) => {
+    state.ki.key = val.key;
-//         state.keyInfo = val;
+    state.oldKey = val.key;
-//         state.keyName = state.keyInfo.key;
+    state.ki.type = val.type;
-//     }
+};
-// );
+
+watch(
+    () => props.keyInfo,
+    (val: any) => {
+        setKeyInfo(val);
+    },
+    { deep: true }
+);
+
+const ttlConveter = (ttl: any) => {
+    if (ttl == -1 || ttl == 0) {
+        return '永久';
+    }
+    if (!ttl) {
+        ttl = 0;
+    }
+    let second = parseInt(ttl); // 秒
+    let min = 0; // 分
+    let hour = 0; // 小时
+    let day = 0;
+    if (second > 60) {
+        min = parseInt(second / 60 + '');
+        second = second % 60;
+        if (min > 60) {
+            hour = parseInt(min / 60 + '');
+            min = min % 60;
+            if (hour > 24) {
+                day = parseInt(hour / 24 + '');
+                hour = hour % 24;
+            }
+        }
+    }
+    let result = '' + second + 's';
+    if (min > 0) {
+        result = '' + min + 'm:' + result;
+    }
+    if (hour > 0) {
+        result = '' + hour + 'h:' + result;
+    }
+    if (day > 0) {
+        result = '' + day + 'd:' + result;
+    }
+    return result;
+};
 </script>
 <style lang="scss">
 .key-detail-type {
@@ -163,13 +224,13 @@ const { keyInfo, oldKey } = toRefs(state);
     width: calc(100% - 332px);
     min-width: 220px;
     max-width: 800px;
-    margin-right: 15px;
+    margin-right: 10px;
     margin-bottom: 10px;
 }
 
 .key-header-item.key-ttl-input {
-    width: 220px;
+    width: 200px;
-    margin-right: 15px;
+    margin-right: 10px;
     margin-bottom: 10px;
 }
 

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

@@ -2,7 +2,7 @@
     <div>
         <el-form class="key-content-string" label-width="auto">
             <div>
-                <format-viewer ref="formatViewerRef" :content="string.value"></format-viewer>
+                <format-viewer ref="formatViewerRef" height="250px" :content="string.value"></format-viewer>
             </div>
         </el-form>
         <div class="mt10 fr">
@@ -11,7 +11,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, toRefs, onMounted } from 'vue';
+import { ref, watch, reactive, toRefs, onMounted } from 'vue';
 import { redisApi } from './api';
 import { ElMessage } from 'element-plus';
 import { notEmpty } from '@/common/assert';
@@ -53,12 +53,20 @@ const state = reactive({
 const { string } = toRefs(state);
 
 onMounted(() => {
-    state.redisId = props.redisId;
+    setProps(props);
-    state.db = props.db;
-    state.key = props.keyInfo?.key;
-    initData();
 });
 
+watch(props, (newVal) => {
+    setProps(newVal);
+});
+
+const setProps = (val: any) => {
+    state.redisId = val.redisId;
+    state.db = val.db;
+    state.key = val.keyInfo?.key;
+    initData();
+};
+
 const initData = () => {
     getStringValue();
 };
@@ -91,18 +99,18 @@ const getBaseReqParam = () => {
 defineExpose({ initData });
 </script>
 <style lang="scss">
-.key-content-string .format-viewer-container {
+// .key-content-string .format-viewer-container {
-    min-height: calc(100vh - 453px);
+//     min-height: calc(100vh - 253px);
-}
+// }
 
-/*text viewer box*/
+// /*text viewer box*/
-.key-content-string .el-textarea textarea {
+// .key-content-string .el-textarea textarea {
-    font-size: 14px;
+//     font-size: 14px;
-    height: calc(100vh - 436px);
+//     height: calc(100vh - 436px);
-}
+// }
 
-/*json in monaco editor*/
+// /*json in monaco editor*/
-.key-content-string .monaco-editor-content {
+// .key-content-string .monaco-editor-content {
-    height: calc(100vh - 450px) !important;
+//     height: calc(100vh - 450px) !important;
-}
+// }
 </style>

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

@@ -4,7 +4,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, reactive, onMounted } from 'vue';
+import { ref, watch, reactive, onMounted } from 'vue';
 import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
 
 const props = defineProps({
@@ -22,12 +22,12 @@ const state = reactive({
 });
 
 // 因为默认从Text viewer开始，暂时不watch（保存时会触发重新格式化）。
-// watch(
+watch(
-//     () => props.content,
+    () => props.content,
-//     (val: any) => {
+    (val: any) => {
-//         setContent(val);
+        setContent(val);
-//     }
+    }
-// );
+);
 
 onMounted(() => {
     setContent(props.content);
@@ -37,7 +37,7 @@ const setContent = (val: any) => {
     state.modelValue = val;
     setTimeout(() => {
         monacoEditorRef.value.format();
-    }, 200);
+    }, 100);
 };
 
 const getContent = () => {

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

@@ -9,6 +9,7 @@ export const redisApi = {
     saveRedis: Api.newPost('/redis'),
     delRedis: Api.newDelete('/redis/{id}'),
 
+    keyInfo: Api.newGet('/redis/{id}/{db}/key-info'),
     keyTtl: Api.newGet('/redis/{id}/{db}/key-ttl'),
     renameKey: Api.newPost('/redis/{id}/{db}/rename-key'),
     expireKey: Api.newPost('/redis/{id}/{db}/expire-key'),

mayfly_go_web/src/views/ops/redis/utils.ts

@@ -0,0 +1,116 @@
+export function keysToTree(keys: any, separator: string = ':', openStatus: any = null, forceCut = 20000) {
+    const tree = {};
+    keys.forEach((key: any) => {
+        let currentNode = tree;
+        const keyStr = key;
+        const keySplited = keyStr.split(separator);
+        const lastIndex = keySplited.length - 1;
+
+        keySplited.forEach((value: string, index: number) => {
+            // key node
+            if (index === lastIndex) {
+                currentNode[`${keyStr}\`k\``] = {
+                    keyNode: true,
+                    nameBuffer: key,
+                };
+            }
+            // folder node
+            else {
+                currentNode[value] === undefined && (currentNode[value] = {});
+            }
+
+            currentNode = currentNode[value];
+        });
+    });
+
+    // to tree format
+    return formatTreeData(tree, '', separator, openStatus, forceCut);
+}
+
+export function keysToList(keys: any, separator: string = ':', openStatus: any = null, forceCut = 20000) {
+    return keys.map((x: string) => {
+        return {
+            key: x,
+            name: x,
+        };
+    });
+}
+
+function formatTreeData(tree: any, previousKey: string = '', separator: string = ':', openStatus: any = null, forceCut: number = 20000) {
+    return Object.keys(tree).map((key) => {
+        const node = { name: key || '[Empty]' } as any;
+
+        // folder node
+        if (!tree[key].keyNode && Object.keys(tree[key]).length > 0) {
+            // fullName
+            const tillNowKeyName = previousKey + key + separator;
+
+            node.type = 1;
+            // folder's fullName may same with key name, such as 'aa-'
+            node.key = tillNowKeyName;
+            if (openStatus) {
+                node.open = openStatus?.has(node.key);
+            }
+            node.children = formatTreeData(tree[key], tillNowKeyName, separator, openStatus, forceCut);
+            node.keyCount = node.children.reduce((a: any, b: any) => a + (b.keyCount || 1), 0);
+            // too many children, force cut, do not incluence keyCount display
+            // node.open && node.children.length > forceCut && node.children.splice(forceCut);
+            // keep folder node in front of the tree and sorted(not include the outest list)
+            // async sort, only for opened folders
+            node.open && sortKeysAndFolder(node.children);
+            node.fullName = tillNowKeyName;
+            return node;
+        }
+
+        node.type = 2;
+        // key node
+        node.name = key.replace(/`k`$/, '');
+        // node.nameBuffer = tree[key].nameBuffer.toJSON();
+        node.key = node.name;
+
+        return node;
+    });
+}
+
+export function sortKeysAndFolder(nodes: any) {
+    nodes.sort((a: any, b: any) => {
+        // a & b are all keys
+        if (!a.children && !b.children) {
+            return a.name > b.name ? 1 : -1;
+        }
+        // a & b are all folder
+        if (a.children && b.children) {
+            return a.name > b.name ? 1 : -1;
+        }
+
+        // a is folder, b is key
+        if (a.children) {
+            return -1;
+        }
+        // a is key, b is folder
+
+        return 1;
+    });
+}
+
+// sortByTreeNode
+export function sortByTreeNodes(nodes: any) {
+    nodes.sort((a: any, b: any) => {
+        // a & b are all keys
+        if (a.isLeaf && b.isLeaf) {
+            return a.label > b.label ? 1 : -1;
+        }
+        // a & b are all folder
+        if (!a.isLeaf && !b.isLeaf) {
+            return a.label > b.label ? 1 : -1;
+        }
+
+        // a is folder, b is key
+        if (!a.isLeaf) {
+            return -1;
+        }
+        // a is key, b is folder
+
+        return 1;
+    });
+}

mayfly_go_web/src/views/system/config/ConfigEdit.vue

@@ -20,7 +20,6 @@
                     >
                         <el-option v-for="item in state.accounts" :key="item.id" :label="`${item.username} [${item.name}]`" :value="item.username"> </el-option>
                     </el-select>
-                    <!-- <el-input v-model="form.permission" placeholder="可,分割可操作用户名"></el-input> -->
                 </el-form-item>
 
                 <el-row style="margin-left: 30px; margin-bottom: 5px">

server/internal/redis/api/key.go

@@ -9,7 +9,6 @@ import (
 	"mayfly-go/pkg/biz"
 	"mayfly-go/pkg/ginx"
 	"mayfly-go/pkg/req"
-	"strconv"
 	"strings"
 	"sync"
 	"time"
@@ -18,7 +17,7 @@ import (
 )
 
 // scan获取redis的key列表信息
-func (r *Redis) Scan(rc *req.Ctx) {
+func (r *Redis) ScanKeys(rc *req.Ctx) {
 	ri := r.getRedisIns(rc)
 
 	form := &form.RedisScanForm{}
@@ -27,24 +26,60 @@ func (r *Redis) Scan(rc *req.Ctx) {
 	cmd := ri.GetCmdable()
 	ctx := context.Background()
 
-	kis := make([]*vo.KeyInfo, 0)
+	keys := make([]string, 0)
 	var cursorRes map[string]uint64 = make(map[string]uint64)
 
+	size, _ := cmd.DBSize(ctx).Result()
+
+	if form.Match != "" && !strings.ContainsAny(form.Match, "*") {
+		// 精确匹配, 判断是否存在
+		res, err := cmd.Exists(ctx, form.Match).Result()
+		if err == nil && res != 0 {
+			keys = append(keys, form.Match)
+		}
+
+		rc.ResData = &vo.Keys{Cursor: cursorRes, Keys: keys, DbSize: size}
+		return
+	}
+
+	// 通配符或全匹配
 	mode := ri.Info.Mode
 	if mode == "" || mode == entity.RedisModeStandalone || mode == entity.RedisModeSentinel {
 		redisAddr := ri.Cli.Options().Addr
-		// 汇总所有的查询出来的键值
+		cursorRes[redisAddr] = form.Cursor[redisAddr]
-		var keys []string
+		for {
-		// 有通配符或空时使用scan，非模糊匹配直接匹配key
+			ks, cursor := ri.Scan(cursorRes[redisAddr], form.Match, form.Count)
-		if form.Match == "" || strings.ContainsAny(form.Match, "*") {
+			cursorRes[redisAddr] = cursor
-			cursorRes[redisAddr] = form.Cursor[redisAddr]
+			if len(ks) > 0 {
+				// 返回了数据则追加总集合中
+				keys = append(keys, ks...)
+			}
+			// 匹配的数量满足用户需求退出
+			if int32(len(keys)) >= int32(form.Count) {
+				break
+			}
+			// 匹配到最后退出
+			if cursor == 0 {
+				break
+			}
+		}
+	} else if mode == entity.RedisModeCluster {
+		mu := &sync.Mutex{}
+		// 遍历所有master节点，并执行scan命令，合并keys
+		ri.ClusterCli.ForEachMaster(ctx, func(ctx context.Context, client *redis.Client) error {
+			redisAddr := client.Options().Addr
+			nowCursor := form.Cursor[redisAddr]
 			for {
-				ks, cursor := ri.Scan(cursorRes[redisAddr], form.Match, form.Count)
+				ks, cursor, _ := client.Scan(ctx, nowCursor, form.Match, form.Count).Result()
+				// 遍历节点的内部回调函数使用异步调用，如不加锁会导致集合并发错误
+				mu.Lock()
 				cursorRes[redisAddr] = cursor
+				nowCursor = cursor
 				if len(ks) > 0 {
 					// 返回了数据则追加总集合中
 					keys = append(keys, ks...)
 				}
+				mu.Unlock()
 				// 匹配的数量满足用户需求退出
 				if int32(len(keys)) >= int32(form.Count) {
 					break
@@ -54,95 +89,33 @@ func (r *Redis) Scan(rc *req.Ctx) {
 					break
 				}
 			}
-		} else {
+			return nil
-			// 精确匹配
+		})
-			keys = append(keys, form.Match)
-		}
-
-		var keyInfoSplit []string
-		if len(keys) > 0 {
-			keyInfosLua := `local result = {}
-							-- KEYS[1]为第1个参数,lua数组下标从1开始
-							for i = 1, #KEYS do
-								local ttl = redis.call('ttl', KEYS[i]);
-								local keyType = redis.call('type', KEYS[i]);
-								table.insert(result, string.format("%d,%s", ttl, keyType['ok']));
-							end;
-							return table.concat(result, ".");`
-			// 通过lua获取 ttl,type.ttl2,type2格式，以便下面切割获取ttl和type。避免多次调用ttl和type函数
-			keyInfos, err := cmd.Eval(ctx, keyInfosLua, keys).Result()
-			biz.ErrIsNilAppendErr(err, "执行lua脚本获取key信息失败: %s")
-			keyInfoSplit = strings.Split(keyInfos.(string), ".")
-		}
-
-		for i, k := range keys {
-			ttlType := strings.Split(keyInfoSplit[i], ",")
-			ttl, _ := strconv.Atoi(ttlType[0])
-			// 没有存在该key,则跳过
-			if ttl == -2 {
-				continue
-			}
-			ki := &vo.KeyInfo{Key: k, Type: ttlType[1], Ttl: int64(ttl)}
-			kis = append(kis, ki)
-		}
-	} else if mode == entity.RedisModeCluster {
-		var keys []string
-		// 有通配符或空时使用scan，非模糊匹配直接匹配key
-		if form.Match == "" || strings.ContainsAny(form.Match, "*") {
-			mu := &sync.Mutex{}
-			// 遍历所有master节点，并执行scan命令，合并keys
-			ri.ClusterCli.ForEachMaster(ctx, func(ctx context.Context, client *redis.Client) error {
-				redisAddr := client.Options().Addr
-				nowCursor := form.Cursor[redisAddr]
-				for {
-					ks, cursor, _ := client.Scan(ctx, nowCursor, form.Match, form.Count).Result()
-					// 遍历节点的内部回调函数使用异步调用，如不加锁会导致集合并发错误
-					mu.Lock()
-					cursorRes[redisAddr] = cursor
-					nowCursor = cursor
-					if len(ks) > 0 {
-						// 返回了数据则追加总集合中
-						keys = append(keys, ks...)
-					}
-					mu.Unlock()
-					// 匹配的数量满足用户需求退出
-					if int32(len(keys)) >= int32(form.Count) {
-						break
-					}
-					// 匹配到最后退出
-					if cursor == 0 {
-						break
-					}
-				}
-				return nil
-			})
-
-		} else {
-			// 精确匹配
-			keys = append(keys, form.Match)
-		}
-
-		// 因为redis集群模式执行lua脚本key必须位于同一slot中，故单机获取的方式不适合
-		// 使用lua获取key的ttl以及类型，减少网络调用
-		keyInfoLua := `local ttl = redis.call('ttl', KEYS[1]);
-					   local keyType = redis.call('type', KEYS[1]);
-					   return string.format("%d,%s", ttl, keyType['ok'])`
-		for _, k := range keys {
-			keyInfo, err := cmd.Eval(ctx, keyInfoLua, []string{k}).Result()
-			biz.ErrIsNilAppendErr(err, "执行lua脚本获取key信息失败: %s")
-			ttlType := strings.Split(keyInfo.(string), ",")
-			ttl, _ := strconv.Atoi(ttlType[0])
-			// 没有存在该key,则跳过
-			if ttl == -2 {
-				continue
-			}
-			ki := &vo.KeyInfo{Key: k, Type: ttlType[1], Ttl: int64(ttl)}
-			kis = append(kis, ki)
-		}
 	}
 
-	size, _ := cmd.DBSize(context.TODO()).Result()
+	rc.ResData = &vo.Keys{Cursor: cursorRes, Keys: keys, DbSize: size}
-	rc.ResData = &vo.Keys{Cursor: cursorRes, Keys: kis, DbSize: size}
+}
+
+func (r *Redis) KeyInfo(rc *req.Ctx) {
+	ri, key := r.checkKeyAndGetRedisIns(rc)
+	cmd := ri.GetCmdable()
+	ctx := context.Background()
+	ttl, err := cmd.TTL(ctx, key).Result()
+	biz.ErrIsNilAppendErr(err, "ttl失败: %s")
+
+	ttlInt := -1
+	if ttl != -1 {
+		ttlInt = int(ttl.Seconds())
+	}
+
+	typeRes, err := cmd.Type(ctx, key).Result()
+	biz.ErrIsNilAppendErr(err, "获取key type失败: %s")
+
+	rc.ResData = &vo.KeyInfo{
+		Key:  key,
+		Ttl:  ttlInt,
+		Type: typeRes,
+	}
 }
 
 func (r *Redis) TtlKey(rc *req.Ctx) {

server/internal/redis/api/vo/redis.go

@@ -22,12 +22,12 @@ type Redis struct {
 
 type Keys struct {
 	Cursor map[string]uint64 `json:"cursor"`
-	Keys   []*KeyInfo        `json:"keys"`
+	Keys   []string          `json:"keys"`
 	DbSize int64             `json:"dbSize"`
 }
 
 type KeyInfo struct {
 	Key  string `json:"key"`
-	Ttl  int64  `json:"ttl"`
+	Ttl  int    `json:"ttl"`
 	Type string `json:"type"`
 }

server/internal/redis/router/redis.go

@@ -39,7 +39,9 @@ func InitRedisRouter(router *gin.RouterGroup) {
 		req.NewGet(":id/cluster-info", rs.ClusterInfo),
 
 		// 获取指定redis keys
-		req.NewPost(":id/:db/scan", rs.Scan),
+		req.NewPost(":id/:db/scan", rs.ScanKeys),
+
+		req.NewGet(":id/:db/key-info", rs.KeyInfo),
 
 		req.NewGet(":id/:db/key-ttl", rs.TtlKey),
 

server/mayfly-go.sql

@@ -508,7 +508,7 @@ CREATE TABLE `t_sys_resource` (
   `name` varchar(255) NOT NULL COMMENT '名称',
   `code` varchar(255) DEFAULT NULL COMMENT '菜单路由为path，其他为唯一标识',
   `weight` int DEFAULT NULL COMMENT '权重顺序',
-  `meta` varchar(255) DEFAULT NULL COMMENT '元数据',
+  `meta` varchar(455) DEFAULT NULL COMMENT '元数据',
   `creator_id` bigint NOT NULL,
   `creator` varchar(255) NOT NULL,
   `modifier_id` bigint NOT NULL,
@@ -607,7 +607,8 @@ INSERT INTO t_sys_resource (id, pid, ui_path, `type`, status, name, code, weight
 INSERT INTO t_sys_resource (id, pid, ui_path, `type`, status, name, code, weight, meta, creator_id, creator, modifier_id, modifier, create_time, update_time, is_deleted, delete_time) VALUES(132, 130, '12sSjal1/W9XKiabq/zxXM23i0/', 2, 1, '删除计划任务', 'machine:cronjob:del', 1689860102, 'null', 1, 'admin', 1, 'admin', '2023-07-20 21:35:02', '2023-07-20 21:35:02', 0, NULL);
 INSERT INTO t_sys_resource (id, pid, ui_path, `type`, status, name, code, weight, meta, creator_id, creator, modifier_id, modifier, create_time, update_time, is_deleted, delete_time) VALUES(131, 130, '12sSjal1/W9XKiabq/gEOqr2pD/', 2, 1, '保存计划任务', 'machine:cronjob:save', 1689860087, 'null', 1, 'admin', 1, 'admin', '2023-07-20 21:34:47', '2023-07-20 21:34:47', 0, NULL);
 INSERT INTO t_sys_resource (id, pid, ui_path, `type`, status, name, code, weight, meta, creator_id, creator, modifier_id, modifier, create_time, update_time, is_deleted, delete_time) VALUES(130, 2, '12sSjal1/W9XKiabq/', 1, 1, '计划任务', '/machine/cron-job', 1689646396, '{"component":"ops/machine/cronjob/CronJobList","icon":"AlarmClock","isKeepAlive":true,"routeName":"CronJobList"}', 1, 'admin', 1, 'admin', '2023-07-18 10:13:16', '2023-07-18 10:14:06', 0, NULL);
-
+INSERT INTO t_sys_resource (id, pid, ui_path, type, status, name, code, weight, meta, creator_id, creator, modifier_id, modifier, create_time, update_time, is_deleted, delete_time) VALUES(134, 80, 'Mongo452/eggago31/3sblw1Wb/', 2, 1, '删除数据', 'mongo:data:del', 1692674964, 'null', 1, 'admin', 1, 'admin', '2023-08-22 11:29:24', '2023-08-22 11:29:24', 0, NULL);
+INSERT INTO t_sys_resource (id, pid, ui_path, type, status, name, code, weight, meta, creator_id, creator, modifier_id, modifier, create_time, update_time, is_deleted, delete_time) VALUES(133, 80, 'Mongo452/eggago31/xvpKk36u/', 2, 1, '保存数据', 'mongo:data:save', 1692674943, 'null', 1, 'admin', 1, 'admin', '2023-08-22 11:29:04', '2023-08-22 11:29:11', 0, NULL);
 COMMIT;
 
 -- ----------------------------

server/pkg/config/app.go

@@ -4,7 +4,7 @@ import "fmt"
 
 const (
 	AppName = "mayfly-go"
-	Version = "v1.5.0"
+	Version = "v1.5.1"
 )
 
 func GetAppInfo() string {