refactor: redis操作界面重构

2025-11-02 15:30:25 +08:00 · 2023-08-28 17:25:59 +08:00
parent 245406673c
commit 1e5b1868ab
18 changed files with 673 additions and 332 deletions
--- a/README.md
+++ b/README.md
@@ -40,7 +40,7 @@ web 版 **linux(终端[终端回放] 文件 脚本 进程)、数据库（mysql p

 ### 演示环境

-http://mayflygo.1yue.net
+http://go.mayfly.run
 账号/密码：test/test123.

 ### 系统核心功能截图
--- a/mayfly_go_web/src/common/config.ts
+++ b/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;
--- a/mayfly_go_web/src/views/login/component/AccountLogin.vue
+++ b/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;
--- a/mayfly_go_web/src/views/ops/component/TagTree.vue
+++ b/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);
 });
--- a/mayfly_go_web/src/views/ops/redis/DataOperation.vue
+++ b/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)">
-                <div class="mt10 ml5">
-                    <el-col>
-                        <el-form class="search-form" label-position="right" :inline="true" label-width="auto">
-                            <el-form-item label="key" label-width="auto">
-                                <el-input placeholder="match 支持*模糊key" style="width: 250px" v-model="scanParam.match" @clear="clear()" clearable></el-input>
-                            </el-form-item>
-                            <el-form-item label="count" label-width="auto">
-                                <el-input placeholder="count" style="width: 70px" v-model.number="scanParam.count"> </el-input>
-                            </el-form-item>
-                            <el-form-item>
-                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="searchKey()" type="success" icon="search" plain></el-button>
-                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="scan()" icon="bottom" plain>scan</el-button>
-                                <el-button
-                                    :disabled="!scanParam.id || !scanParam.db"
-                                    @click="showNewKeyDialog"
-                                    type="primary"
-                                    icon="plus"
-                                    plain
-                                    v-auth="'redis:data:save'"
-                                ></el-button>
-                                <el-button :disabled="!scanParam.id || !scanParam.db" @click="flushDb" type="danger" plain v-auth="'redis:data:save'"
-                                    >flush</el-button
-                                >
-                            </el-form-item>
-                            <div style="float: right">
-                                <span>keys: {{ state.dbsize }}</span>
-                            </div>
-                        </el-form>
-                    </el-col>
-                    <el-table v-loading="state.loading" :data="state.keys" :height="tableHeight" stripe :highlight-current-row="true" style="cursor: pointer">
-                        <el-table-column show-overflow-tooltip prop="key" label="key"></el-table-column>
-                        <el-table-column prop="type" label="type" width="80">
-                            <template #default="scope">
-                                <el-tag :color="getTypeColor(scope.row.type)" size="small">{{ scope.row.type }}</el-tag>
-                            </template>
-                        </el-table-column>
-                        <el-table-column prop="ttl" label="ttl(过期时间)" width="140">
-                            <template #default="scope">
-                                {{ ttlConveter(scope.row.ttl) }}
-                            </template>
-                        </el-table-column>
-                        <el-table-column label="操作">
-                            <template #default="scope">
-                                <el-button @click="showKeyDetail(scope.row)" type="success" icon="search" plain size="small">查看 </el-button>
-                                <el-button v-auth="'redis:data:del'" @click="del(scope.row.key)" type="danger" icon="delete" plain size="small"
-                                    >删除
-                                </el-button>
-                            </template>
-                        </el-table-column>
-                    </el-table>
+            <el-col v-loading="state.loadingKeyTree" :span="7" class="el-scrollbar flex-auto" style="overflow: auto">
+                <div>
+                    <el-row>
+                        <el-col :span="2">
+                            <el-input v-model="state.keySeparator" placeholder="分割符" size="small" class="ml5" />
+                        </el-col>
+                        <el-col :span="18">
+                            <el-input @clear="clear" v-model="scanParam.match" placeholder="match 支持*模糊key" clearable size="small" class="ml10" />
+                        </el-col>
+                        <el-col :span="4">
+                            <el-button
+                                class="ml15"
+                                :disabled="!scanParam.id || !scanParam.db"
+                                @click="searchKey()"
+                                type="success"
+                                icon="search"
+                                size="small"
+                                plain
+                            ></el-button>
+                        </el-col>
+                    </el-row>
+
+                    <el-row class="mb5 mt5">
+                        <el-col :span="20">
+                            <el-button class="ml5" :disabled="!scanParam.id || !scanParam.db" @click="scan(true)" type="success" icon="more" size="small" plain
+                                >加载更多</el-button
+                            >
+
+                            <el-button
+                                v-auth="'redis:data:save'"
+                                :disabled="!scanParam.id || !scanParam.db"
+                                @click="showNewKeyDialog"
+                                type="primary"
+                                icon="plus"
+                                size="small"
+                                plain
+                                >新增key</el-button
+                            >
+
+                            <el-button
+                                :disabled="!scanParam.id || !scanParam.db"
+                                @click="flushDb"
+                                type="danger"
+                                plain
+                                v-auth="'redis:data:del'"
+                                size="small"
+                                icon="delete"
+                                >flush</el-button
+                            >
+                        </el-col>
+                        <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: {
-        tagPath: null,
-    },
+    keyTreeHeight: window.innerHeight - 147 - 30 + 'px',
+    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 = {};
-};
-
-const showKeyDetail = async (row: any) => {
-    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;
+    state.keyTreeExpanded.clear();
+    state.dataTabs = {};
+    state.activeName = '';
 };

 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 = () => {
-    state.keyDetailDialog.keyInfo.key = '';
-    state.keyDetailDialog.keyInfo.type = 'string';
-    state.keyDetailDialog.keyInfo.timed = -1;
+const resetNewKeyInfo = () => {
+    state.newKeyDialog.keyInfo.key = '';
+    state.newKeyDialog.keyInfo.type = 'string';
+    state.newKeyDialog.keyInfo.timed = -1;
 };

-const del = (key: string) => {
+const delKey = (key: string) => {
    ElMessageBox.confirm(`确定删除[ ${key} ] 该key?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
-        .then(() => {
-            redisApi.delKey
-                .request({
-                    key,
-                    id: state.scanParam.id,
-                    db: state.scanParam.db,
-                })
-                .then(() => {
-                    ElMessage.success('删除成功！');
-                    searchKey();
-                });
+        .then(async () => {
+            await redisApi.delKey.request({
+                key,
+                id: state.scanParam.id,
+                db: state.scanParam.db,
+            });
+            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>
--- a/mayfly_go_web/src/views/ops/redis/FormatViewer.vue
+++ b/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>
--- a/mayfly_go_web/src/views/ops/redis/KeyDetail.vue
+++ b/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(
-//     () => props.keyInfo,
-//     (val) => {
-//         state.keyInfo = val;
-//     }
-// );
+watch(
+    () => props.keyInfo,
+    (val) => {
+        setKeyInfo(val);
+    },
+    {
+        deep: true,
+    }
+);
+
+onMounted(() => {
+    setKeyInfo(props.keyInfo);
+});
+
+const {} = toRefs(state);
 </script>
 <style lang="scss">
 .key-tab-container {
--- a/mayfly_go_web/src/views/ops/redis/KeyHeader.vue
+++ b/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,
-        seconds: state.keyInfo.timed,
+        key: state.ki.key,
+        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(
-//     () => props.keyInfo,
-//     (val) => {
-//         state.keyInfo = val;
-//         state.keyName = state.keyInfo.key;
-//     }
-// );
+const setKeyInfo = (val: any) => {
+    state.ki.timed = val.timed;
+    state.ki.key = val.key;
+    state.oldKey = val.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;
-    margin-right: 15px;
+    width: 200px;
+    margin-right: 10px;
    margin-bottom: 10px;
 }

--- a/mayfly_go_web/src/views/ops/redis/KeyValueString.vue
+++ b/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;
-    state.db = props.db;
-    state.key = props.keyInfo?.key;
-    initData();
+    setProps(props);
 });

+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 {
-    min-height: calc(100vh - 453px);
-}
+// .key-content-string .format-viewer-container {
+//     min-height: calc(100vh - 253px);
+// }

-/*text viewer box*/
-.key-content-string .el-textarea textarea {
-    font-size: 14px;
-    height: calc(100vh - 436px);
-}
+// /*text viewer box*/
+// .key-content-string .el-textarea textarea {
+//     font-size: 14px;
+//     height: calc(100vh - 436px);
+// }

-/*json in monaco editor*/
-.key-content-string .monaco-editor-content {
-    height: calc(100vh - 450px) !important;
-}
+// /*json in monaco editor*/
+// .key-content-string .monaco-editor-content {
+//     height: calc(100vh - 450px) !important;
+// }
 </style>
--- a/mayfly_go_web/src/views/ops/redis/ViewerJson.vue
+++ b/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(
-//     () => props.content,
-//     (val: any) => {
-//         setContent(val);
-//     }
-// );
+watch(
+    () => props.content,
+    (val: any) => {
+        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 = () => {
--- a/mayfly_go_web/src/views/ops/redis/api.ts
+++ b/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'),
--- a/mayfly_go_web/src/views/ops/redis/utils.ts
+++ b/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;
+    });
+}
--- a/mayfly_go_web/src/views/system/config/ConfigEdit.vue
+++ b/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">
--- a/server/internal/redis/api/key.go
+++ b/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
-		// 汇总所有的查询出来的键值
-		var keys []string
-		// 有通配符或空时使用scan，非模糊匹配直接匹配key
-		if form.Match == "" || strings.ContainsAny(form.Match, "*") {
-			cursorRes[redisAddr] = form.Cursor[redisAddr]
+		cursorRes[redisAddr] = form.Cursor[redisAddr]
+		for {
+			ks, cursor := ri.Scan(cursorRes[redisAddr], form.Match, form.Count)
+			cursorRes[redisAddr] = cursor
+			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 {
-			// 精确匹配
-			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)
-		}
+			return nil
+		})
 	}

-	size, _ := cmd.DBSize(context.TODO()).Result()
-	rc.ResData = &vo.Keys{Cursor: cursorRes, Keys: kis, DbSize: size}
+	rc.ResData = &vo.Keys{Cursor: cursorRes, Keys: keys, 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) {
--- a/server/internal/redis/api/vo/redis.go
+++ b/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"`
 }
--- a/server/internal/redis/router/redis.go
+++ b/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),

--- a/server/mayfly-go.sql
+++ b/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;

 -- ----------------------------
--- a/server/pkg/config/app.go
+++ b/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 {