vue2-client 1.10.21 → 1.10.26

package/src/components/CodeMirror/inedx.vue

@@ -1,118 +1,118 @@
-<template>
-  <codemirror
-    v-model="item"
-    :options="cmOption"
-    class="code-mirror"
-    :style="styleObj"
-    @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/js 如果需要配置其他语言，需要在 setting.js 中配置 更多看官方文档
-    },
-    styleObj: {
-      type: Object,
-      default: () => {
-        return { fontSize: '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 () {
-    },
-    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');
-}
-
-:deep(.CodeMirror) {
-  height: 100%;
-}
-
-.code-mirror {
-  height: 100%;
-  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>
+<template>
+  <codemirror
+    v-model="item"
+    :options="cmOption"
+    class="code-mirror"
+    :style="styleObj"
+    @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/js 如果需要配置其他语言，需要在 setting.js 中配置 更多看官方文档
+    },
+    styleObj: {
+      type: Object,
+      default: () => {
+        return { fontSize: '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 () {
+    },
+    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');
+}
+
+:deep(.CodeMirror) {
+  height: 100%;
+}
+
+.code-mirror {
+  height: 100%;
+  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

@@ -1,40 +1,40 @@
-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/mode/javascript/javascript.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/theme/monokai.css'
-// 括号自动不全
-import 'codemirror/addon/edit/closebrackets.js'
+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/mode/javascript/javascript.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/theme/monokai.css'
+// 括号自动不全
+import 'codemirror/addon/edit/closebrackets.js'

package/src/components/FilePreview/FilePreview.vue

@@ -1,166 +1,166 @@
-<template>
-  <div v-if="!pathError">
-    <!-- 文件 -->
-    <div v-if="showImagePreview == 1" class="preview-doc-container">
-      <a-spin size="large" :spinning="previewDocLoading" />
-      <iframe
-        v-show="!previewDocLoading"
-        :src="previewDocUrl"
-        width="100%"
-        height="100%"
-        frameborder="0"
-        @load="previewDocLoading = false" />
-    </div>
-    <!-- 图片 -->
-    <div v-if="showImagePreview == 2" style="text-align: center">
-      <img :src="previewImageSrc" alt="image" class="preview-image">
-    </div>
-    <!-- 视频 -->
-    <div v-if="showImagePreview == 3" style="text-align: center">
-      <video-player
-        class="video-player vjs-custom-skin"
-        ref="videoPlayer"
-        :playsinline="true"
-        :options="playerOptions">
-      </video-player>
-    </div>
-  </div>
-  <a-empty v-else description="文件路径为空" />
-</template>
-
-<script>
-import { Base64 } from 'js-base64'
-import 'video.js/dist/video-js.css'
-import 'videojs-contrib-hls'
-import { videoPlayer } from 'vue-video-player'
-
-export default {
-  name: 'FilePreview',
-  components: {
-    videoPlayer
-  },
-  props: {
-    path: {
-      type: String,
-      required: true
-    },
-    // 文件服务器
-    fileServer: {
-      type: String,
-      default: 'http://aote-office.8866.org:8406'
-    },
-    // 文档预览服务 API
-    previewDocService: {
-      type: String,
-      default: 'http://aote-office.8866.org:32510/onlinePreview?url='
-    }
-  },
-  data () {
-    return {
-      // 文档预览
-      previewDocLoading: true,
-      previewDocUrl: '',
-      // 图片预览
-      showImagePreview: 1,
-      previewImageSrc: '',
-      // 视频
-      previewVideoSrc: '',
-      // 路径是否为空
-      pathError: false,
-      playerOptions: {
-        playbackRates: [0.5, 1.0, 1.5, 2.0],
-        autoplay: false,
-        muted: false,
-        loop: false,
-        preload: 'auto',
-        language: 'zh-CN',
-        aspectRatio: '16:9',
-        fluid: true,
-        sources: [{
-          type: '',
-          src: ''
-        }],
-        poster: '',
-        notSupportedMessage: '此视频暂无法播放，请稍后再试',
-        controlBar: {
-          timeDivider: true,
-          durationDisplay: true,
-          remainingTimeDisplay: false,
-          fullscreenToggle: true
-        }
-      }
-    }
-  },
-  watch: {
-    // 路径改变时刷新预览
-    path: function () {
-      this.preview()
-    }
-  },
-  mounted () {
-    this.preview()
-  },
-  methods: {
-    preview () {
-      if (!this.path) {
-        this.pathError = true
-        return
-      }
-      this.pathError = false
-      if (this.isImage()) {
-        this.previewImageSrc = this.path
-        this.showImagePreview = 2
-      } else if (this.isVideo()) {
-        this.playerOptions.sources[0].type = 'video/' + this.path.substring(this.path.lastIndexOf('.') + 1)
-        this.playerOptions.sources[0].src = this.path
-        this.showImagePreview = 3
-      } else {
-        const previewDocUrl = this.previewDocService + encodeURIComponent(Base64.encode(this.fileServer + this.path))
-        if (this.previewDocUrl !== previewDocUrl) {
-          this.previewDocLoading = true
-          this.previewDocUrl = previewDocUrl
-        }
-        this.showImagePreview = 1
-      }
-    },
-    // 判断是否为图片
-    isImage () {
-      const index = this.path.lastIndexOf('.')
-      if (index === -1) {
-        return false
-      }
-      const suffix = this.path.substr(index + 1)
-      if (!suffix || !IMAGE_SUFFIX_ARRAY.includes(suffix)) {
-        return false
-      }
-      return true
-    },
-    // 判断是否为视频
-    isVideo () {
-      const index = this.path.lastIndexOf('.')
-      if (index === -1) {
-        return false
-      }
-      const suffix = this.path.substr(index + 1)
-      if (!suffix || !VIDEO_SUFFIX_ARRAY.includes(suffix)) {
-        return false
-      }
-      return true
-    }
-  }
-}
-// 图片后缀
-const IMAGE_SUFFIX_ARRAY = ['xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif', 'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif']
-const VIDEO_SUFFIX_ARRAY = ['avi', 'wmv', 'mpeg', 'mp4', 'm4v', 'mov', 'asf', 'flv', 'f4v', 'rmvb', 'rm', '3gp', 'vob']
-</script>
-
-<style>
-.preview-doc-container {
-  height: calc(100vh - 60px);
-  padding-top: 20px;
-}
-.preview-image {
-  max-width: 100%;
-  max-height: 100vh;
-}
-</style>
+<template>
+  <div v-if="!pathError">
+    <!-- 文件 -->
+    <div v-if="showImagePreview == 1" class="preview-doc-container">
+      <a-spin size="large" :spinning="previewDocLoading" />
+      <iframe
+        v-show="!previewDocLoading"
+        :src="previewDocUrl"
+        width="100%"
+        height="100%"
+        frameborder="0"
+        @load="previewDocLoading = false" />
+    </div>
+    <!-- 图片 -->
+    <div v-if="showImagePreview == 2" style="text-align: center">
+      <img :src="previewImageSrc" alt="image" class="preview-image">
+    </div>
+    <!-- 视频 -->
+    <div v-if="showImagePreview == 3" style="text-align: center">
+      <video-player
+        class="video-player vjs-custom-skin"
+        ref="videoPlayer"
+        :playsinline="true"
+        :options="playerOptions">
+      </video-player>
+    </div>
+  </div>
+  <a-empty v-else description="文件路径为空" />
+</template>
+
+<script>
+import { Base64 } from 'js-base64'
+import 'video.js/dist/video-js.css'
+import 'videojs-contrib-hls'
+import { videoPlayer } from 'vue-video-player'
+
+export default {
+  name: 'FilePreview',
+  components: {
+    videoPlayer
+  },
+  props: {
+    path: {
+      type: String,
+      required: true
+    },
+    // 文件服务器
+    fileServer: {
+      type: String,
+      default: 'http://aote-office.8866.org:8406'
+    },
+    // 文档预览服务 API
+    previewDocService: {
+      type: String,
+      default: 'http://aote-office.8866.org:32510/onlinePreview?url='
+    }
+  },
+  data () {
+    return {
+      // 文档预览
+      previewDocLoading: true,
+      previewDocUrl: '',
+      // 图片预览
+      showImagePreview: 1,
+      previewImageSrc: '',
+      // 视频
+      previewVideoSrc: '',
+      // 路径是否为空
+      pathError: false,
+      playerOptions: {
+        playbackRates: [0.5, 1.0, 1.5, 2.0],
+        autoplay: false,
+        muted: false,
+        loop: false,
+        preload: 'auto',
+        language: 'zh-CN',
+        aspectRatio: '16:9',
+        fluid: true,
+        sources: [{
+          type: '',
+          src: ''
+        }],
+        poster: '',
+        notSupportedMessage: '此视频暂无法播放，请稍后再试',
+        controlBar: {
+          timeDivider: true,
+          durationDisplay: true,
+          remainingTimeDisplay: false,
+          fullscreenToggle: true
+        }
+      }
+    }
+  },
+  watch: {
+    // 路径改变时刷新预览
+    path: function () {
+      this.preview()
+    }
+  },
+  mounted () {
+    this.preview()
+  },
+  methods: {
+    preview () {
+      if (!this.path) {
+        this.pathError = true
+        return
+      }
+      this.pathError = false
+      if (this.isImage()) {
+        this.previewImageSrc = this.path
+        this.showImagePreview = 2
+      } else if (this.isVideo()) {
+        this.playerOptions.sources[0].type = 'video/' + this.path.substring(this.path.lastIndexOf('.') + 1)
+        this.playerOptions.sources[0].src = this.path
+        this.showImagePreview = 3
+      } else {
+        const previewDocUrl = this.previewDocService + encodeURIComponent(Base64.encode(this.fileServer + this.path))
+        if (this.previewDocUrl !== previewDocUrl) {
+          this.previewDocLoading = true
+          this.previewDocUrl = previewDocUrl
+        }
+        this.showImagePreview = 1
+      }
+    },
+    // 判断是否为图片
+    isImage () {
+      const index = this.path.lastIndexOf('.')
+      if (index === -1) {
+        return false
+      }
+      const suffix = this.path.substr(index + 1)
+      if (!suffix || !IMAGE_SUFFIX_ARRAY.includes(suffix)) {
+        return false
+      }
+      return true
+    },
+    // 判断是否为视频
+    isVideo () {
+      const index = this.path.lastIndexOf('.')
+      if (index === -1) {
+        return false
+      }
+      const suffix = this.path.substr(index + 1)
+      if (!suffix || !VIDEO_SUFFIX_ARRAY.includes(suffix)) {
+        return false
+      }
+      return true
+    }
+  }
+}
+// 图片后缀
+const IMAGE_SUFFIX_ARRAY = ['xbm', 'tif', 'pjp', 'svgz', 'jpg', 'jpeg', 'ico', 'tiff', 'gif', 'svg', 'jfif', 'webp', 'png', 'bmp', 'pjpeg', 'avif']
+const VIDEO_SUFFIX_ARRAY = ['avi', 'wmv', 'mpeg', 'mp4', 'm4v', 'mov', 'asf', 'flv', 'f4v', 'rmvb', 'rm', '3gp', 'vob']
+</script>
+
+<style>
+.preview-doc-container {
+  height: calc(100vh - 60px);
+  padding-top: 20px;
+}
+.preview-image {
+  max-width: 100%;
+  max-height: 100vh;
+}
+</style>