Optimize json editor

Author: hunter-ji

src/components/contentDetail/index.vue

@@ -56,12 +56,13 @@ const genRandomAceID = async () => {
 }
 const initAceEditor = async () => {
   aceState.aceEditor = ace.edit(`ace${aceID.value}`, {
-    maxLines: 40, // 最大行数，超过会自动出现滚动条
-    minLines: 20, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
-    fontSize: 14, // 编辑器内字体大小
-    theme: aceState.themePath, // 默认设置的主题
-    mode: aceState.modePath, // 默认设置的语言模式
-    tabSize: 4 // 制表符设置为 4 个空格大小
+    maxLines: 35,
+    minLines: 35,
+    fontSize: 14,
+    theme: aceState.themePath,
+    mode: aceState.modePath,
+    tabSize: 4,
+    showPrintMargin: false
   })
   aceState.aceEditor.setReadOnly(props.isReadOnly || false)
 }

src/components/customAce/index.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import ace from 'ace-builds'
 import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入
-import 'ace-builds/src-noconflict/theme-gruvbox' // 默认设置的主题
+import 'ace-builds/src-noconflict/theme-gruvbox'
 import { onMounted, reactive } from 'vue'
 
 const state: { aceEditor: any, themePath: string } = reactive({
@@ -16,12 +16,12 @@ const state: { aceEditor: any, themePath: string } = reactive({
 })
 onMounted(() => {
   state.aceEditor = ace.edit('ace', {
-    maxLines: 20, // 最大行数，超过会自动出现滚动条
-    minLines: 20, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
-    fontSize: 14, // 编辑器内字体大小
-    theme: state.themePath, // 默认设置的主题
-    // mode: state.modePath, // 默认设置的语言模式
-    tabSize: 4 // 制表符设置为 4 个空格大小
+    maxLines: 20,
+    minLines: 20,
+    fontSize: 14,
+    theme: state.themePath,
+    tabSize: 4,
+    showPrintMargin: false
   })
 })
 </script>

src/views/consolePane/index.vue

@@ -217,12 +217,12 @@ const genRandomAceID = async () => {
 onMounted(async () => {
   await genRandomAceID()
   state.aceEditor = ace.edit(`ace${aceID.value}`, {
-    maxLines: 15, // 最大行数，超过会自动出现滚动条
-    minLines: 15, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
-    fontSize: 14, // 编辑器内字体大小
-    theme: state.themePath, // 默认设置的主题
-    // mode: state.modePath, // 默认设置的语言模式
-    tabSize: 4 // 制表符设置为 4 个空格大小
+    maxLines: 15,
+    minLines: 15,
+    fontSize: 14,
+    theme: state.themePath,
+    tabSize: 4,
+    showPrintMargin: false
   })
 })
 </script>

src/views/monitor/chart.vue

@@ -71,6 +71,11 @@ const handleOptions = async () => {
         data: props.data.y,
         type: 'line',
         smooth: true,
+        lineStyle: {
+          width: 2,
+          shadowColor: 'rgba(168,167,167,0.4)',
+          shadowBlur: 4
+        },
         showSymbol: false
       }
     ]

src/views/monitor/chartWithTwoLine.vue

@@ -72,14 +72,24 @@ const handleOption = async () => {
         type: 'line',
         smooth: true,
         showSymbol: false,
-        name: props.data.nameList.y
+        name: props.data.nameList.y,
+        lineStyle: {
+          width: 2,
+          shadowColor: 'rgba(168,167,167,0.4)',
+          shadowBlur: 4
+        }
       },
       {
         data: props.data.yList.y2,
         type: 'line',
         smooth: true,
         showSymbol: false,
-        name: props.data.nameList.y2
+        name: props.data.nameList.y2,
+        lineStyle: {
+          width: 2,
+          shadowColor: 'rgba(168,167,167,0.4)',
+          shadowBlur: 4
+        }
       }
     ]
   }

src/views/newKeyValue/index.vue

@@ -126,11 +126,3 @@ const handleFinishEvent = async () => {
   }
 }
 </script>
-
-<style>
-.el-button {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-</style>

src/views/newKeyValue/stringType.vue

@@ -28,7 +28,7 @@
     </div>
 
     <!--textarea-->
-    <el-input v-model="state.val" :rows="20" type="textarea" v-show="editorModeState.mode === 'text'"/>
+    <el-input v-model="state.val" :rows="37" type="textarea" resize="none" v-show="editorModeState.mode === 'text'" />
 
     <!--ace-->
     <div :id="`ace${aceID}`" v-show="editorModeState.mode === 'json'"/>
@@ -110,12 +110,13 @@ const genRandomAceID = async () => {
 }
 const initAceEditor = async () => {
   aceState.aceEditor = ace.edit(`ace${aceID.value}`, {
-    maxLines: 45, // 最大行数，超过会自动出现滚动条
-    minLines: 40, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
-    fontSize: 14, // 编辑器内字体大小
-    theme: aceState.themePath, // 默认设置的主题
-    mode: aceState.modePath, // 默认设置的语言模式
-    tabSize: 4 // 制表符设置为 4 个空格大小
+    maxLines: 42,
+    minLines: 42,
+    fontSize: 14,
+    theme: aceState.themePath,
+    mode: aceState.modePath,
+    tabSize: 4,
+    showPrintMargin: false
   })
 }
 

src/views/valueContent/stringType.vue

@@ -36,7 +36,7 @@
     </div>
 
     <!--textarea-->
-    <el-input v-model="state.val" :rows="30" type="textarea"
+    <el-input v-model="state.val" :rows="37" type="textarea" resize="none"
               v-show="editorModeState.mode === 'text'"
               @click.left.meta.exact="copyKey(state.val, t('valueContent.notification.copySuccessMessage'))"
               @click.left.ctrl.exact="copyKey(state.val, t('valueContent.notification.copySuccessMessage'))"
@@ -141,12 +141,13 @@ const genRandomAceID = async () => {
 }
 const initAceEditor = async () => {
   aceState.aceEditor = ace.edit(`ace${aceID.value}`, {
-    maxLines: 45, // 最大行数，超过会自动出现滚动条
-    minLines: 40, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
-    fontSize: 14, // 编辑器内字体大小
-    theme: aceState.themePath, // 默认设置的主题
-    mode: aceState.modePath, // 默认设置的语言模式
-    tabSize: 4 // 制表符设置为 4 个空格大小
+    maxLines: 42,
+    minLines: 42,
+    fontSize: 14,
+    theme: aceState.themePath,
+    mode: aceState.modePath,
+    tabSize: 4,
+    showPrintMargin: false
   })
 }
 const handleAceUpdate = (message: string) => {