vue2-client 1.8.112 → 1.8.114

package/CHANGELOG.md

@@ -1,6 +1,9 @@
 # Change Log
 > 所有关于本项目的变化都在该文档里。
 
+**1.8.114 -2024-3-14 @张振宇**
+- 增加ql展示组件
+
 **1.8.103-1.8.106 -2024-3-14 @张振宇**
 - 增加对话库功能
 - 修复xbadge不更新展示问题

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.8.112",
+  "version": "1.8.114",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
@@ -43,6 +43,7 @@
     "videojs-contrib-hls": "^5.15.0",
     "viser-vue": "^2.4.8",
     "vue": "^2.7.14",
+    "vue-codemirror": "4.0.6",
     "vue-i18n": "^8.28.2",
     "vue-json-viewer": "^2.2.22",
     "vue-router": "^3.6.5",

package/src/base-client/plugins/AppData.js

@@ -48,6 +48,7 @@ const GetAppDataService = {
       }
     })
   },
+  // 旧版获取配置中心字典
   getDictionaryList (key) {
     const str = localStorage.getItem(process.env.VUE_APP_DICTIONARY_KEY)
     const object = JSON.parse(str)
@@ -78,6 +79,12 @@ const GetAppDataService = {
       return processResult(result)
     }
   },
+  // 新版获取配置中心字典推荐使用 服务名默认为当前服务
+  getDictByKey (dictKey, serviceName = process.env.VUE_APP_SYSTEM_NAME,  callback) {
+    getConfigByName(dictKey, undefined, result => {
+      callback(result.value)
+    })
+  },
   getParam (key, value, callback) {
     const str = localStorage.getItem(process.env.VUE_APP_BADGE_KEY)
     const object = JSON.parse(str)

package/src/components/CodeMirror/inedx.vue

@@ -0,0 +1,113 @@
+<template>
+  <codemirror
+    v-model="item"
+    :options="cmOption"
+    class="code-mirror"
+    :style="{fontSize}"
+    @ready="onCmReady"
+    @focus="onCmFocus"
+    @input="onCmCodeChange"
+    ref="myCmGenerate"></codemirror>
+</template>
+
+<script>
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/mode/javascript/javascript.js'
+import './setting.js'
+// https://github.com/surmon-china/vue-codemirror/tree/v4.0.6
+export default {
+  components: {
+    codemirror
+  },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    mode: {
+      type: String,
+      default: 'sql' // 目前只有 sql/go 如果需要配置其他语言，需要在 setting.js 中配置 更多看官方文档
+    },
+    fontSize: {
+      type: String,
+      default: '16px'
+    },
+    theme: {
+      type: String,
+      default: 'dracula'
+    },
+  },
+  watch: {},
+  data () {
+    return {
+      item: this.value,
+      cmOption: {
+        autoCloseBrackets: true,
+        extraKeys: { Ctrl: 'autocomplete' },
+        foldGutter: true,
+        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
+        hintOptions: { completeSingle: false },
+        keyMap: 'sublime',
+        line: true,
+        lineNumbers: true,
+        matchBrackets: true,
+        mode: { name: this.mode, json: true },
+        readOnly: this.readonly ? 'nocursor' : undefined,
+        showCursorWhenSelecting: true,
+        styleActiveLine: true,
+        styleSelectedText: true,
+        tabSize: 2,
+        theme: this.theme,
+      }
+    }
+  },
+  methods: {
+    onCmReady () {
+      this.$refs.myCmGenerate.codemirror.setSize('400px', '400px')
+    },
+    onCmFocus (instance, event) {
+      // console.log(instance)
+      // console.log(event)
+    },
+    onCmCodeChange (instance, _obj) {
+      this.$emit('input', instance)
+      // console.log(instance)
+      // console.log(_obj)
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.CodeMirror-scroll {
+  overflow: scroll !important;
+  margin-bottom: 0;
+  margin-right: 0;
+  padding-bottom: 0;
+  height: 100%;
+  outline: none;
+  position: relative;
+  border: 1px solid #dddddd;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  src: url('@vue2-client/assets/ttf/JetBrainsMono-Light.woff2') format('woff2'), /* 字体文件路径和格式 */
+  url('@vue2-client/assets/ttf/JetBrainsMono-Light.woff2') format('woff');
+}
+
+.code-mirror {
+  line-height: 150%;
+  text-align: left;
+  font-family: "JetBrains Mono",serif !important;
+}
+
+:deep(.CodeMirror-line),:deep(.CodeMirror-line-like) {
+  font-family: "JetBrains Mono",serif !important;
+}
+
+</style>

package/src/components/CodeMirror/setting.js

@@ -0,0 +1,38 @@
+import 'codemirror/lib/codemirror.css'
+// require active-line.js
+import 'codemirror/addon/selection/active-line.js'
+// styleSelectedText
+import 'codemirror/addon/selection/mark-selection.js'
+// hint
+import 'codemirror/addon/hint/show-hint.js'
+import 'codemirror/addon/hint/sql-hint.js'
+import 'codemirror/addon/hint/show-hint.css'
+import 'codemirror/addon/hint/javascript-hint.js'
+// highlightSelectionMatches
+import 'codemirror/addon/scroll/annotatescrollbar.js'
+import 'codemirror/addon/search/matchesonscrollbar.js'
+import 'codemirror/addon/search/match-highlighter.js'
+// keyMap
+import 'codemirror/mode/go/go.js'
+import 'codemirror/mode/sql/sql.js'
+import 'codemirror/addon/edit/matchbrackets.js'
+import 'codemirror/addon/comment/comment.js'
+import 'codemirror/addon/dialog/dialog.js'
+import 'codemirror/addon/dialog/dialog.css'
+import 'codemirror/addon/search/searchcursor.js'
+import 'codemirror/addon/search/search.js'
+import 'codemirror/keymap/sublime.js'
+// foldGutter
+import 'codemirror/addon/fold/foldgutter.css'
+import 'codemirror/addon/fold/brace-fold.js'
+import 'codemirror/addon/fold/comment-fold.js'
+import 'codemirror/addon/fold/foldcode.js'
+import 'codemirror/addon/fold/foldgutter.js'
+import 'codemirror/addon/fold/indent-fold.js'
+import 'codemirror/addon/fold/markdown-fold.js'
+import 'codemirror/addon/fold/xml-fold.js'
+// 编辑的主题文件
+import 'codemirror/theme/dracula.css'
+import 'codemirror/theme/base16-light.css'
+// 括号自动不全
+import 'codemirror/addon/edit/closebrackets.js'