refactor: redis值格式化方式调整

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",

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">

mayfly_go_web/src/theme/app.scss

@@ -290,3 +290,7 @@ body,
         margin-bottom: 3px;
     }
 }
+
+.el-table-z-index-inherit .el-table .el-table__cell {
+    z-index: inherit !important;
+}

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>

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"
+                        <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"></el-input>
+                            :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: {

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"
+                        <format-input :title="`type:【${key.type}】key:【${key.key}】`" v-model="scope.row.value"
-                            :autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
+                            :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: {

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>

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"
+                        <format-input :title="`type:【${key.type}】key:【${key.key}】`" v-model="scope.row.value" clearable type="textarea"
-                            :autosize="{ minRows: 2, maxRows: 10 }" size="small"></el-input>
+                            :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: '' }],

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"
+                <format-input :title="`type:【${key.type}】key:【${key.key}】`" v-model="string.value" :autosize="{ minRows: 10, maxRows: 20 }"></format-input>
-                    :autosize="{ minRows: 10, maxRows: 20 }"></el-input>
+                <!-- <el-select class="text-type-select" @change="onChangeTextType" v-model="string.type">
-                <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 {

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