feat: redis支持list查看&其他小优化

2025-11-04 00:10:25 +08:00 · 2022-09-22 11:56:21 +08:00
parent be00b90c1d
commit 22c401f9d8
82 changed files with 604 additions and 242 deletions
--- a/mayfly_go_web/package.json
+++ b/mayfly_go_web/package.json
@@ -13,7 +13,7 @@
    "countup.js": "^2.0.7",
    "cropperjs": "^1.5.11",
    "echarts": "^5.3.3",
-    "element-plus": "^2.2.16",
+    "element-plus": "^2.2.17",
    "jsencrypt": "^3.2.1",
    "jsoneditor": "^9.9.0",
    "lodash": "^4.17.21",
@@ -26,8 +26,8 @@
    "vue-clipboard3": "^1.0.1",
    "vue-router": "^4.1.2",
    "vuex": "^4.0.2",
-    "xterm": "^4.19.0",
-    "xterm-addon-fit": "^0.5.0"
+    "xterm": "^5.0.0",
+    "xterm-addon-fit": "^0.6.0"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.178",
--- a/mayfly_go_web/src/theme/app.scss
+++ b/mayfly_go_web/src/theme/app.scss
@@ -14,7 +14,7 @@ body,
 	padding: 0;
 	width: 100%;
 	height: 100%;
-	font-family: Microsoft YaHei, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, SimSun, sans-serif;
+	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
 	font-weight: 450;
 	-webkit-font-smoothing: antialiased;
 	-webkit-tap-highlight-color: transparent;
--- a/mayfly_go_web/src/views/login/component/AccountLogin.vue
+++ b/mayfly_go_web/src/views/login/component/AccountLogin.vue
@@ -73,7 +73,7 @@
 </template>

 <script lang="ts">
-import { onMounted, ref, toRefs, reactive, defineComponent, computed } from 'vue';
+import { nextTick, onMounted, ref, toRefs, reactive, defineComponent, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { initBackEndControlRoutesFun } from '@/router/index.ts';
@@ -95,7 +95,7 @@ export default defineComponent({
        const changePwdFormRef: any = ref(null);

        const state = reactive({
-            useLoginCaptcha: true,
+            useLoginCaptcha: false,
            captchaImage: '',
            loginForm: {
                username: '',
@@ -133,10 +133,12 @@ export default defineComponent({
        });

        onMounted(async () => {
+            nextTick(async () => {
+                state.useLoginCaptcha = await useLoginCaptcha();
+                getCaptcha();
+            });
            // 移除公钥, 方便后续重新获取
            sessionStorage.removeItem('RsaPublicKey');
-            state.useLoginCaptcha = await useLoginCaptcha();
-            getCaptcha();
        });

        const getCaptcha = async () => {
--- a/mayfly_go_web/src/views/ops/db/DbList.vue
+++ b/mayfly_go_web/src/views/ops/db/DbList.vue
@@ -29,18 +29,23 @@
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="类型" min-width="90"></el-table-column>
-                <el-table-column prop="database" label="数据库" min-width="160">
+                <el-table-column prop="database" label="数据库" min-width="80">
                    <template #default="scope">
-                        <el-tag
-                            @click="showTableInfo(scope.row, db)"
-                            effect="plain"
-                            type="success"
-                            size="small"
-                            v-for="db in scope.row.dbs"
-                            :key="db"
-                            style="cursor: pointer; margin-left: 3px"
-                            >{{ db }}</el-tag
-                        >
+                        <el-popover :width="250" placement="right" trigger="click">
+                            <template #reference>
+                                <el-link type="primary" :underline="false" plain>查看</el-link>
+                            </template>
+                            <el-tag
+                                @click="showTableInfo(scope.row, db)"
+                                effect="plain"
+                                type="success"
+                                size="small"
+                                v-for="db in scope.row.dbs"
+                                :key="db"
+                                style="cursor: pointer; margin-left: 3px; margin-bottom: 3px;"
+                                >{{ db }}</el-tag
+                            >
+                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="username" label="用户名" min-width="100"></el-table-column>
@@ -161,8 +166,10 @@
            v-model="sqlExecLogDialog.visible"
        >
            <div class="toolbar">
-                <el-input v-model="sqlExecLogDialog.query.db" placeholder="请输入数据库名" clearable style="width: 150px" />
-                <el-input v-model="sqlExecLogDialog.query.table" placeholder="请输入表名" clearable class="ml5" style="width: 150px" />
+                <el-select v-model="sqlExecLogDialog.query.db" placeholder="请选择数据库" filterable clearable>
+                    <el-option v-for="item in sqlExecLogDialog.dbs" :key="item" :label="`${item}`" :value="item"> </el-option>
+                </el-select>
+                <el-input v-model="sqlExecLogDialog.query.table" placeholder="请输入表名" clearable class="ml5" style="width: 180px" />
                <el-select v-model="sqlExecLogDialog.query.type" placeholder="请选择操作类型" clearable class="ml5">
                    <el-option v-for="item in enums.DbSqlExecTypeEnum" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
@@ -307,6 +314,7 @@ export default defineComponent({
                visible: false,
                data: [],
                total: 0,
+                dbs: [],
                query: {
                    dbId: 0,
                    db: '',
@@ -438,6 +446,7 @@ export default defineComponent({
        const onShowSqlExec = async (row: any) => {
            state.sqlExecLogDialog.title = `${row.name}[${row.host}:${row.port}]`;
            state.sqlExecLogDialog.query.dbId = row.id;
+            state.sqlExecLogDialog.dbs = row.database.split(' ');
            searchSqlExecLog();
            state.sqlExecLogDialog.visible = true;
        };
@@ -445,6 +454,7 @@ export default defineComponent({
        const onBeforeCloseSqlExecDialog = () => {
            state.sqlExecLogDialog.visible = false;
            state.sqlExecLogDialog.data = [];
+            state.sqlExecLogDialog.dbs = [];
            state.sqlExecLogDialog.total = 0;
            state.sqlExecLogDialog.query.dbId = 0;
            state.sqlExecLogDialog.query.pageNum = 1;
--- a/mayfly_go_web/src/views/ops/redis/DataOperation.vue
+++ b/mayfly_go_web/src/views/ops/redis/DataOperation.vue
@@ -43,6 +43,7 @@
                                    <el-tag @click="onAddData('string')" :color="getTypeColor('string')" style="cursor: pointer">string</el-tag>
                                    <el-tag @click="onAddData('hash')" :color="getTypeColor('hash')" class="ml5" style="cursor: pointer">hash</el-tag>
                                    <el-tag @click="onAddData('set')" :color="getTypeColor('set')" class="ml5" style="cursor: pointer">set</el-tag>
+                                    <!-- <el-tag @click="onAddData('list')" :color="getTypeColor('list')" class="ml5" style="cursor: pointer">list</el-tag> -->
                                </el-popover>
                            </el-form-item>
                            <div style="float: right">
@@ -105,6 +106,16 @@
            @valChange="searchKey"
            @cancel="onCancelDataEdit"
        />
+
+        <list-value
+            v-model:visible="listValueDialog.visible"
+            :title="dataEdit.title"
+            :keyInfo="dataEdit.keyInfo"
+            :redisId="scanParam.id"
+            :operationType="dataEdit.operationType"
+            @valChange="searchKey"
+            @cancel="onCancelDataEdit"
+        />
    </div>
 </template>

@@ -116,6 +127,7 @@ import ProjectEnvSelect from '../component/ProjectEnvSelect.vue';
 import HashValue from './HashValue.vue';
 import StringValue from './StringValue.vue';
 import SetValue from './SetValue.vue';
+import ListValue from './ListValue.vue';
 import { isTrue, notBlank, notNull } from '@/common/assert';

 export default defineComponent({
@@ -124,6 +136,7 @@ export default defineComponent({
        StringValue,
        HashValue,
        SetValue,
+        ListValue,
        ProjectEnvSelect,
    },
    setup() {
@@ -158,6 +171,9 @@ export default defineComponent({
            setValueDialog: {
                visible: false,
            },
+            listValueDialog: {
+                visible: false,
+            },
            keys: [],
            dbsize: 0,
        });
@@ -253,6 +269,8 @@ export default defineComponent({
                state.stringValueDialog.visible = true;
            } else if (type == 'set') {
                state.setValueDialog.visible = true;
+            } else if (type == 'list') {
+                state.listValueDialog.visible = true;
            } else {
                ElMessage.warning('暂不支持该类型');
            }
@@ -270,6 +288,8 @@ export default defineComponent({
                state.stringValueDialog.visible = true;
            } else if (type == 'set') {
                state.setValueDialog.visible = true;
+            } else if (type == 'list') {
+                state.listValueDialog.visible = true;
            } else {
                ElMessage.warning('暂不支持该类型');
            }
--- a/mayfly_go_web/src/views/ops/redis/ListValue.vue
+++ b/mayfly_go_web/src/views/ops/redis/ListValue.vue
@@ -0,0 +1,205 @@
+<template>
+    <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
+        <el-form label-width="85px">
+            <el-form-item prop="key" label="key:">
+                <el-input :disabled="operationType == 2" v-model="key.key"></el-input>
+            </el-form-item>
+            <el-form-item prop="timed" label="过期时间:">
+                <el-input v-model.number="key.timed" type="number"></el-input>
+            </el-form-item>
+            <el-form-item prop="dataType" label="数据类型:">
+                <el-input v-model="key.type" disabled></el-input>
+            </el-form-item>
+
+            <!-- <el-button @click="onAddListValue" icon="plus" size="small" plain class="mt10">添加</el-button> -->
+            <div v-if="operationType == 2" class="mt10" style="float: left">
+                <span>len: {{ len }}</span>
+            </div>
+            <el-table :data="value" stripe style="width: 100%">
+                <el-table-column prop="value" label="value" min-width="200">
+                    <template #default="scope">
+                        <el-input v-model="scope.row.value" clearable type="textarea" :autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
+                    </template>
+                </el-table-column>
+                <el-table-column label="操作" width="140">
+                    <template #default="scope">
+                        <el-button
+                            v-if="operationType == 2"
+                            type="success"
+                            @click="lset(scope.row, scope.$index)"
+                            icon="check"
+                            size="small"
+                            plain
+                        ></el-button>
+                        <!-- <el-button type="danger" @click="set.value.splice(scope.$index, 1)" icon="delete" size="small" plain></el-button> -->
+                    </template>
+                </el-table-column>
+            </el-table>
+            <el-row style="margin-top: 20px" type="flex" justify="end">
+                <el-pagination
+                    style="text-align: right"
+                    :total="len"
+                    layout="prev, pager, next, total"
+                    @current-change="handlePageChange"
+                    v-model:current-page="pageNum"
+                    :page-size="pageSize"
+                ></el-pagination>
+            </el-row>
+        </el-form>
+        <!-- <template #footer>
+            <div class="dialog-footer">
+                <el-button @click="cancel()">取 消</el-button>
+                <el-button @click="saveValue" type="primary" v-auth="'redis:data:save'">确 定</el-button>
+            </div>
+        </template> -->
+    </el-dialog>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, watch, toRefs } from 'vue';
+import { redisApi } from './api';
+import { ElMessage } from 'element-plus';
+import { isTrue, notEmpty } from '@/common/assert';
+
+export default defineComponent({
+    name: 'ListValue',
+    components: {},
+    props: {
+        visible: {
+            type: Boolean,
+        },
+        title: {
+            type: String,
+        },
+        redisId: {
+            type: [Number],
+            require: true,
+        },
+        keyInfo: {
+            type: [Object],
+        },
+        // 操作类型，1：新增，2：修改
+        operationType: {
+            type: [Number],
+        },
+        listValue: {
+            type: [Array, Object],
+        },
+    },
+    emits: ['valChange', 'cancel', 'update:visible'],
+    setup(props: any, { emit }) {
+        const state = reactive({
+            dialogVisible: false,
+            operationType: 1,
+            redisId: '',
+            key: {
+                key: '',
+                type: 'string',
+                timed: -1,
+            },
+            value: [{ value: '' }],
+            len: 0,
+            start: 0,
+            stop: 0,
+            pageNum: 1,
+            pageSize: 10,
+        });
+
+        const cancel = () => {
+            emit('update:visible', false);
+            emit('cancel');
+            setTimeout(() => {
+                state.key = {
+                    key: '',
+                    type: 'string',
+                    timed: -1,
+                };
+                state.value = [];
+            }, 500);
+        };
+
+        watch(props, async (newValue) => {
+            state.dialogVisible = newValue.visible;
+            state.key = newValue.key;
+            state.redisId = newValue.redisId;
+            state.key = newValue.keyInfo;
+            state.operationType = newValue.operationType;
+            // 如果是查看编辑操作，则获取值
+            if (state.dialogVisible && state.operationType == 2) {
+                getListValue();
+            }
+        });
+
+        const getListValue = async () => {
+            const pageNum = state.pageNum;
+            const pageSize = state.pageSize;
+            const res = await redisApi.getListValue.request({
+                id: state.redisId,
+                key: state.key.key,
+                start: (pageNum - 1) * pageSize,
+                stop: pageNum * pageSize - 1,
+            });
+            state.len = res.len;
+            state.value = res.list.map((x: any) => {
+                return {
+                    value: x,
+                };
+            });
+        };
+
+        const lset = async (row: any, rowIndex: number) => {
+            await redisApi.setListValue.request({
+                id: state.redisId,
+                key: state.key.key,
+                index: (state.pageNum - 1) * state.pageSize + rowIndex,
+                value: row.value,
+            });
+            ElMessage.success('数据保存成功');
+        };
+
+        const saveValue = async () => {
+            notEmpty(state.key.key, 'key不能为空');
+            isTrue(state.value.length > 0, 'list内容不能为空');
+            // const sv = { value: state.value.map((x) => x.value), id: state.redisId };
+            // Object.assign(sv, state.key);
+            // await redisApi.saveSetValue.request(sv);
+
+            ElMessage.success('数据保存成功');
+            cancel();
+            emit('valChange');
+        };
+
+        const onAddListValue = () => {
+            state.value.unshift({ value: '' });
+        };
+
+        const handlePageChange = (curPage: number) => {
+            state.pageNum = curPage;
+            getListValue();
+        };
+
+        return {
+            ...toRefs(state),
+            saveValue,
+            handlePageChange,
+            cancel,
+            lset,
+            onAddListValue,
+        };
+    },
+});
+</script>
+<style lang="scss">
+#string-value-text {
+    flex-grow: 1;
+    display: flex;
+    position: relative;
+
+    .text-type-select {
+        position: absolute;
+        z-index: 2;
+        right: 10px;
+        top: 10px;
+        max-width: 70px;
+    }
+}
+</style>
--- a/mayfly_go_web/src/views/ops/redis/api.ts
+++ b/mayfly_go_web/src/views/ops/redis/api.ts
@@ -20,4 +20,7 @@ export const redisApi = {
    saveSetValue: Api.create("/redis/{id}/set-value", 'post'),
    del: Api.create("/redis/{id}/scan/{cursor}/{count}", 'delete'),
    delKey: Api.create("/redis/{id}/key", 'delete'),
+    getListValue: Api.create("/redis/{id}/list-value", 'get'),
+    saveListValue: Api.create("/redis/{id}/list-value", 'post'),
+    setListValue: Api.create("/redis/{id}/list-value/lset", 'post'),
 }
--- a/mayfly_go_web/yarn.lock
+++ b/mayfly_go_web/yarn.lock
@@ -658,10 +658,10 @@ echarts@^5.3.3:
    tslib "2.3.0"
    zrender "5.3.2"

-element-plus@^2.2.16:
-  version "2.2.16"
-  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.2.16.tgz#84c00fc4a2d84031ec18d0f28820593c6e451513"
-  integrity sha512-rvaTMFIujec9YDC5lyaiQv2XVUCHuhVDq2k+9vQxP78N8Wd07iEOGa9pvEVOO2uYc75l4rSl2RE/IWPH/6Mdzw==
+element-plus@^2.2.17:
+  version "2.2.17"
+  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.2.17.tgz#abbb12c19dc029c95b0271822ea9a0e635704bc2"
+  integrity sha512-MGwMIE/q+FFD3kgS23x8HIe5043tmD1cTRwjhIX9o6fim1avFnUkrsfYRvybbz4CkyqSb185EheZS5AUPpXh2g==
  dependencies:
    "@ctrl/tinycolor" "^3.4.1"
    "@element-plus/icons-vue" "^2.0.6"
@@ -1810,15 +1810,15 @@ wrappy@1:
  resolved "https://registry.nlark.com/wrappy/download/wrappy-1.0.2.tgz?cache=0&sync_timestamp=1619133505879&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fwrappy%2Fdownload%2Fwrappy-1.0.2.tgz"
  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=

-xterm-addon-fit@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.npmmirror.com/xterm-addon-fit/download/xterm-addon-fit-0.5.0.tgz"
-  integrity sha1-LVG5g7eGqX3NbN6AXnAMf5E7xZY=
+xterm-addon-fit@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.npmmirror.com/xterm-addon-fit/-/xterm-addon-fit-0.6.0.tgz#142e1ce181da48763668332593fc440349c88c34"
+  integrity sha512-9/7A+1KEjkFam0yxTaHfuk9LEvvTSBi0PZmEkzJqgafXPEXL9pCMAVV7rB09sX6ATRDXAdBpQhZkhKj7CGvYeg==

-xterm@^4.19.0:
-  version "4.19.0"
-  resolved "https://registry.npmmirror.com/xterm/-/xterm-4.19.0.tgz"
-  integrity sha512-c3Cp4eOVsYY5Q839dR5IejghRPpxciGmLWWaP9g+ppfMeBChMeLa1DCA+pmX/jyDZ+zxFOmlJL/82qVdayVoGQ==
+xterm@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/xterm/-/xterm-5.0.0.tgz#0af50509b33d0dc62fde7a4ec17750b8e453cc5c"
+  integrity sha512-tmVsKzZovAYNDIaUinfz+VDclraQpPUnAME+JawosgWRMphInDded/PuY0xmU5dOhyeYZsI0nz5yd8dPYsdLTA==

 yallist@^4.0.0:
  version "4.0.0"