refactor: redis值格式化方式调整

2025-11-02 15:30:25 +08:00 · 2022-11-25 18:59:23 +08:00
parent 772995705f
commit 24f543e667
10 changed files with 162 additions and 45 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.22",
+    "element-plus": "^2.2.23",
    "jsencrypt": "^3.2.1",
    "lodash": "^4.17.21",
    "mitt": "^3.0.0",
--- a/mayfly_go_web/src/components/monaco/MonacoEditor.vue
+++ b/mayfly_go_web/src/components/monaco/MonacoEditor.vue
@@ -11,7 +11,7 @@
 import { ref, watch, toRefs, reactive, onMounted, onBeforeUnmount } from 'vue';
 import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
 import * as monaco from 'monaco-editor';
-import { editor } from 'monaco-editor';
+import { editor, languages } from 'monaco-editor';
 import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 // 主题仓库 https://github.com/brijeshb42/monaco-themes
 // 主题例子 https://editor.bitwiser.in/
@@ -59,6 +59,10 @@ const languages = [
        value: 'shell',
        label: 'Shell',
    },
+    {
+        value: 'json',
+        label: 'JSON',
+    },
    {
        value: 'yaml',
        label: 'Yaml',
@@ -87,10 +91,6 @@ const languages = [
        value: 'javascript',
        label: 'Javascript',
    },
-    {
-        value: 'json',
-        label: 'JSON',
-    },
    {
        value: 'java',
        label: 'Java',
@@ -165,7 +165,7 @@ watch(() => props.language, (newValue: any) => {

 const monacoTextarea: any = ref(null);

-let monacoEditorIns: editor.IStandaloneCodeEditor = null;
+let monacoEditorIns: editor.IStandaloneCodeEditor = null as any;
 let completionItemProvider: any = null;

 self.MonacoEnvironment = {
@@ -185,11 +185,11 @@ const initMonacoEditorIns = () => {
    options.language = state.languageMode;
    // 从localStorage中获取，通过store可能存在父子组件都使用store报错
    options.theme = JSON.parse(localStorage.getItem('themeConfig') as string).editorTheme || 'vs';
-    monacoEditorIns = monaco.editor.create(monacoTextarea.value, Object.assign(options, props.options));
+    monacoEditorIns = monaco.editor.create(monacoTextarea.value, Object.assign(options, props.options as any));

    // 监听内容改变,双向绑定
    monacoEditorIns.onDidChangeModelContent(() => {
-        emit('update:modelValue', monacoEditorIns.getModel().getValue());
+        emit('update:modelValue', monacoEditorIns.getModel()?.getValue());
    })

    // 动态设置主题
@@ -200,6 +200,9 @@ const changeLanguage = (value: any) => {
    console.log('change lan');
    // 获取当前的文档模型
    let oldModel = monacoEditorIns.getModel()
+    if (!oldModel) {
+        return;
+    }
    // 创建一个新的文档模型
    let newModel = monaco.editor.createModel(oldModel.getValue(), value)
    // 设置成新的
@@ -213,7 +216,7 @@ const changeLanguage = (value: any) => {
 }

 const setEditorValue = (value: any) => {
-    monacoEditorIns.getModel().setValue(value)
+    monacoEditorIns.getModel()?.setValue(value)
 }

 /**
@@ -237,14 +240,14 @@ const registeShell = () => {
                    label: item,
                    kind: monaco.languages.CompletionItemKind.Keyword,
                    insertText: item,
-                });
+                } as any);
            })
            shellLan.builtins.forEach((item: any) => {
                suggestions.push({
                    label: item,
                    kind: monaco.languages.CompletionItemKind.Property,
                    insertText: item,
-                });
+                } as any);
            })
            return {
                suggestions: suggestions
@@ -252,6 +255,16 @@ const registeShell = () => {
        }
    })
 };
+
+const format = () => {
+    /*
+    触发自动格式化;
+   */
+    monacoEditorIns.trigger('', 'editor.action.formatDocument', '')
+}
+
+defineExpose({ format })
+
 </script>

 <style lang="scss">
--- a/mayfly_go_web/src/theme/app.scss
+++ b/mayfly_go_web/src/theme/app.scss
@@ -289,4 +289,8 @@ body,
    .el-form-item {
        margin-bottom: 3px;
    }
+}
+
+.el-table-z-index-inherit .el-table .el-table__cell {
+    z-index: inherit !important;
 }
--- a/mayfly_go_web/src/views/ops/redis/FormatInput.vue
+++ b/mayfly_go_web/src/views/ops/redis/FormatInput.vue
@@ -0,0 +1,108 @@
+<template>
+    <div style="width: 100%;">
+        <el-input @input="onInput" type="textarea" v-model="modelValue" :autosize="autosize" :rows="rows" />
+        <div style="padding: 3px; float: right" class="mr5 format-btns">
+            <div>
+                <el-button @click="showFormatDialog()" :underline="false" type="success" icon="MagicStick" size="small">
+                </el-button>
+            </div>
+        </div>
+        <el-dialog @opened="opened" width="60%" :title="title" v-model="formatDialog.visible"
+            :close-on-click-modal="false">
+            <monaco-editor ref="monacoEditorRef" :canChangeMode="true" v-model="formatDialog.value" language="json" />
+            <template #footer>
+                <div>
+                    <el-button @click="formatDialog.visible = false">取 消</el-button>
+                    <el-button @click="onConfirmValue" type="primary">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, watch, toRefs, onMounted } from 'vue';
+import MonacoEditor from '@/components/monaco/MonacoEditor.vue';
+
+const props = defineProps({
+    title: {
+        type: String,
+    },
+    modelValue: {
+        type: String,
+    },
+    rows: {
+        type: Number,
+    },
+    autosize: {
+        type: Object
+    }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const monacoEditorRef: any = ref(null)
+
+const state = reactive({
+    rows: 2,
+    autosize: {},
+    modelValue: '',
+    formatDialog: {
+        visible: false,
+        value: '',
+    }
+});
+
+const {
+    rows,
+    autosize,
+    modelValue,
+    formatDialog,
+} = toRefs(state)
+
+watch(
+    () => props.modelValue,
+    (val: any) => {
+        state.modelValue = val;
+    }
+);
+
+onMounted(() => {
+    state.modelValue = props.modelValue as any;
+    state.autosize = props.autosize as any;
+    state.rows = props.rows as any;
+})
+
+const showFormatDialog = () => {
+    state.formatDialog.visible = true;
+    state.formatDialog.value = state.modelValue;
+}
+
+const opened = () => {
+    monacoEditorRef.value.format();
+};
+
+const onConfirmValue = () => {
+    // 尝试压缩json
+    try {
+        state.modelValue = JSON.stringify(JSON.parse(state.formatDialog.value));
+    } catch (e) {
+        state.modelValue = state.formatDialog.value;
+    }
+    emit('update:modelValue', state.modelValue);
+    state.formatDialog.visible = false;
+}
+
+const onInput = (value: any) => {
+    emit('update:modelValue', value);
+}
+
+</script>
+<style lang="scss">
+.format-btns {
+    position: absolute;
+    z-index: 2;
+    right: 5px;
+    top: 4px;
+    max-width: 120px;
+}
+</style>
--- a/mayfly_go_web/src/views/ops/redis/HashValue.vue
+++ b/mayfly_go_web/src/views/ops/redis/HashValue.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
+    <el-dialog class="el-table-z-index-inherit" :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>
@@ -33,7 +33,7 @@
                    </div>
                </el-form>
            </el-row>
-            <el-table :data="hashValues" stripe style="width: 100%">
+            <el-table :data="hashValues" stripe style="width: 100%;">
                <el-table-column prop="field" label="field" width>
                    <template #default="scope">
                        <el-input v-model="scope.row.field" clearable size="small"></el-input>
@@ -41,8 +41,8 @@
                </el-table-column>
                <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>
+                        <format-input :title="`type:【${key.type}】key:【${key.key}】field:【${scope.row.field}】`" v-model="scope.row.value"
+                            :autosize="{ minRows: 2, maxRows: 10 }" size="small"></format-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120">
@@ -68,6 +68,7 @@ import { reactive, watch, toRefs } from 'vue';
 import { redisApi } from './api';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { isTrue, notEmpty } from '@/common/assert';
+import FormatInput from './FormatInput.vue';

 const props = defineProps({
    visible: {
--- a/mayfly_go_web/src/views/ops/redis/ListValue.vue
+++ b/mayfly_go_web/src/views/ops/redis/ListValue.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
+    <el-dialog class="el-table-z-index-inherit" :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>
@@ -18,8 +18,8 @@
            <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>
+                        <format-input :title="`type:【${key.type}】key:【${key.key}】`" v-model="scope.row.value"
+                            :autosize="{ minRows: 2, maxRows: 10 }" size="small"></format-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
@@ -48,6 +48,7 @@
 import { reactive, watch, toRefs } from 'vue';
 import { redisApi } from './api';
 import { ElMessage } from 'element-plus';
+import FormatInput from './FormatInput.vue';

 const props = defineProps({
    visible: {
--- a/mayfly_go_web/src/views/ops/redis/RedisEdit.vue
+++ b/mayfly_go_web/src/views/ops/redis/RedisEdit.vue
@@ -33,7 +33,8 @@
                        </template></el-input>
                </el-form-item>
                <el-form-item prop="db" label="库号:" required>
-                    <el-select @change="changeDb" v-model="dbList" multiple placeholder="请选择可操作库号" style="width: 100%">
+                    <el-select @change="changeDb" v-model="dbList" multiple allow-create filterable
+                        placeholder="请选择可操作库号" style="width: 100%">
                        <el-option v-for="db in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]" :key="db"
                            :label="db" :value="db" />
                    </el-select>
--- a/mayfly_go_web/src/views/ops/redis/SetValue.vue
+++ b/mayfly_go_web/src/views/ops/redis/SetValue.vue
@@ -1,5 +1,5 @@
 <template>
-    <el-dialog :title="title" v-model="dialogVisible" :before-close="cancel" width="800px" :destroy-on-close="true">
+    <el-dialog class="el-table-z-index-inherit" :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>
@@ -15,8 +15,8 @@
            <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>
+                        <format-input :title="`type:【${key.type}】key:【${key.key}】`" v-model="scope.row.value" clearable type="textarea"
+                            :autosize="{ minRows: 2, maxRows: 10 }" size="small"></format-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="90">
@@ -40,6 +40,7 @@ import { reactive, watch, toRefs } from 'vue';
 import { redisApi } from './api';
 import { ElMessage } from 'element-plus';
 import { isTrue, notEmpty } from '@/common/assert';
+import FormatInput from './FormatInput.vue';

 const props = defineProps({
    visible: {
@@ -77,7 +78,7 @@ const state = reactive({
    db: '0',
    key: {
        key: '',
-        type: 'string',
+        type: 'set',
        timed: -1,
    },
    value: [{ value: '' }],
--- a/mayfly_go_web/src/views/ops/redis/StringValue.vue
+++ b/mayfly_go_web/src/views/ops/redis/StringValue.vue
@@ -12,12 +12,11 @@
            </el-form-item>

            <div id="string-value-text" style="width: 100%">
-                <el-input class="json-text" v-model="string.value" type="textarea"
-                    :autosize="{ minRows: 10, maxRows: 20 }"></el-input>
-                <el-select class="text-type-select" @change="onChangeTextType" v-model="string.type">
+                <format-input :title="`type:【${key.type}】key:【${key.key}】`" v-model="string.value" :autosize="{ minRows: 10, maxRows: 20 }"></format-input>
+                <!-- <el-select class="text-type-select" @change="onChangeTextType" v-model="string.type">
                    <el-option key="text" label="text" value="text"> </el-option>
                    <el-option key="json" label="json" value="json"> </el-option>
-                </el-select>
+                </el-select> -->
            </div>
        </el-form>
        <template #footer>
@@ -33,7 +32,7 @@ import { reactive, watch, toRefs } from 'vue';
 import { redisApi } from './api';
 import { ElMessage } from 'element-plus';
 import { notEmpty } from '@/common/assert';
-import { formatJsonString } from '@/common/utils/format';
+import FormatInput from './FormatInput.vue';

 const props = defineProps({
    visible: {
@@ -144,24 +143,13 @@ const saveValue = async () => {
    notEmpty(state.key.key, 'key不能为空');

    notEmpty(state.string.value, 'value不能为空');
-    const sv = { value: formatJsonString(state.string.value, true), id: state.redisId, db: state.db };
+    const sv = { value: state.string.value, id: state.redisId, db: state.db };
    Object.assign(sv, state.key);
    await redisApi.saveStringValue.request(sv);
    ElMessage.success('数据保存成功');
    cancel();
    emit('valChange');
 };
-
-// 更改文本类型
-const onChangeTextType = (val: string) => {
-    if (val == 'json') {
-        state.string.value = formatJsonString(state.string.value, false);
-        return;
-    }
-    if (val == 'text') {
-        state.string.value = formatJsonString(state.string.value, true);
-    }
-};
 </script>
 <style lang="scss">
 #string-value-text {
--- a/mayfly_go_web/yarn.lock
+++ b/mayfly_go_web/yarn.lock
@@ -662,10 +662,10 @@ echarts@^5.3.3:
    tslib "2.3.0"
    zrender "5.3.2"

-element-plus@^2.2.22:
-  version "2.2.22"
-  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.2.22.tgz#6374a263ecdcf0a820c3d2e926bb28102542e254"
-  integrity sha512-gg2g2WOMNpWf0wGesymUvTV0VZDF/4khQKroSNeCV/vWJ/cqssPYdtqfGxTiFRt/f+JpyFkV7O1mo0yzMCzrBg==
+element-plus@^2.2.23:
+  version "2.2.23"
+  resolved "https://registry.npmmirror.com/element-plus/-/element-plus-2.2.23.tgz#63f512bcf74e46d6bec6d8882d9dab40c1fbebcb"
+  integrity sha512-/7BtebETiknsW2TpSwt5RIpXxFQ1sbYoRelJqeiB1K9LcL0MwyQJ1rZSuWHBCHduMvfpogNZ66dwp2Giv9lYbg==
  dependencies:
    "@ctrl/tinycolor" "^3.4.1"
    "@element-plus/icons-vue" "^2.0.6"