simple-frame-unit 1.0.2

package/src/components/ed-base-vue/package/EdCodeEditor/src/AceEditor/Editor.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="ace-container" ref="editor">
+    <div ref="ace" class="ace-editor" ></div>
+  </div>
+</template>
+
+<script>
+import ace from 'ace-builds'
+
+// #region lua语法高亮
+import 'ace-builds/src-noconflict/mode-lua'
+import 'ace-builds/src-noconflict/snippets/lua'
+// #endregion
+
+//在 webpack 环境中使用必须要导入
+import "./webpack-resolver.js"
+
+import "ace-builds/src-noconflict/ext-language_tools"
+import "ace-builds/src-noconflict/ext-searchbox"
+
+
+export default {
+  name: "Editor",
+  props: {
+    // 是否自动换行
+    wrap: {type: Boolean, default: true},
+    // 代码模式
+    mode: {type: String, default: ""},
+    // 主题控制
+    theme: {type: String, default: ""},
+    // 代码内容
+    value: {type: String, default: ""},
+    // 高度
+    lines: {type: Number, default: 20},
+    // 只读
+    readOnly: {type: Boolean, default: false},
+    // 是否弹窗打开
+    isDialog: {type: Boolean, default: false},
+  },
+  data() {
+    return {
+      aceEditor: null,
+    }
+  },
+  watch: {
+    mode: {
+      deep: true,
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.handleModelPathChange(newVal)
+        }
+      }
+    },
+    value: {
+      deep: true,
+      handler(newVal, oldVal) {
+        if(newVal) {
+          this.aceEditor.setValue(newVal)
+        }
+      }
+    },
+    theme: {
+      deep: true,
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.handleThemePathChange(newVal)
+        }
+      }
+    }
+  },
+  mounted() {
+    this.initAceEdit()
+  },
+  methods: {
+    // 初始化控件
+    initAceEdit() {
+      let maxLines = this.lines
+      if(this.isDialog) {
+        let editorH = this.$refs.editor.offsetHeight || 400
+        maxLines = editorH / 17
+      }
+
+      this.aceEditor = ace.edit(this.$refs.ace, {
+        maxLines: maxLines,
+        minLines: maxLines,
+        fontSize: 14, // 字号
+        value: this.value,//初始显示内容
+        theme: this.theme, // 主题
+        mode: this.mode, // 语言模式
+        wrap: this.wrap,
+        tabSize: 4
+      })
+      // 激活自动提示
+      this.aceEditor.setOptions({
+        enableSnippets: true,
+        enableLiveAutocompletion: true,
+        enableBasicAutocompletion: true
+      })
+      this.aceEditor.setReadOnly(this.readOnly)
+      this.aceEditor.getSession().on('change', this.change)
+    },
+
+    // 实时获取当前输入内容
+    change() {
+      this.$emit("change", this.aceEditor.getSession().getValue())
+    },
+
+    // 获取当前输入内容
+    getValue() {
+      return this.aceEditor.getSession().getValue()
+    },
+
+    // 如果有语言切换需求
+    handleModelPathChange(modelPath) {
+      this.aceEditor.getSession().setMode(modelPath)
+    },
+    // 如果有主题切换需求
+    handleThemePathChange(ThemePath) {
+      this.aceEditor.setTheme(ThemePath)
+    },
+    // 是否自动换行
+    handleWrapChange(wrap) {
+      this.aceEditor.getSession().setUseWrapMode(wrap)
+    },
+  }
+}
+</script>
+
+<style scoped>
+.ace-container {
+  height: 100%;
+}
+
+.ace-editor--height {
+  height: 100% !important;
+}
+</style>

package/src/components/ed-base-vue/package/EdCodeEditor/src/AceEditor/Toolbar.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="ed-code--toolbar">
+    <ed-form v-model="model" :form-desc="formDesc" inline size="mini"></ed-form>
+  </div>
+</template>
+
+<script>
+import {getThemes, ModeViews} from "./AceConfig";
+
+export default {
+  name: "Toolbar",
+  props: {
+    model: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  model: {
+    prop: "model",
+    event: "input"
+  },
+  data() {
+    return {
+      formDesc: [
+        {
+          label: '语言',
+          prop: "mode",
+          children: {
+            tags: "el-select",
+            attrs: {
+              filterable: true,
+              placeholder: '请选择语言'
+            },
+            options: ModeViews
+          },
+        },
+        {
+          label: '主题',
+          prop: "theme",
+          children: {
+            tags: "el-select",
+            attrs: {
+              placeholder: '请选择主题'
+            },
+            options: getThemes()
+          },
+        },
+        // {
+        //   label: '是否自动换行',
+        //   prop: "wrap",
+        //   children: {
+        //     tags: "el-switch",
+        //     attrs: {
+        //       placeholder: '请选择主题'
+        //     },
+        //     options: getThemes()
+        //   },
+        // },
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/ed-base-vue/package/EdCodeEditor/src/AceEditor/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="ed-ace">
+    <el-button v-if="isDialog" :size="size" icon="el-icon-edit" v-bind="btnProps" @click="handlerOpen">编写代码
+    </el-button>
+
+    <component :is="compName" :title="title" :visible.sync="visible" @ok="handlerOk">
+      <div class="tree-warning" v-if="Object.keys($slots).includes('tooltip')">
+        <slot name="tooltip"></slot>
+      </div>
+
+      <toolbar v-if="isToolbar" v-model="form"></toolbar>
+      <editor ref="aceEditor" :isDialog="isDialog" :lines="lines" :mode="form.mode" :readOnly="readOnly"
+              :theme="form.theme" :value="value" @change="handlerChange"></editor>
+    </component>
+  </div>
+</template>
+
+<script>
+import {getOption} from "./AceConfig"
+import Editor      from "./Editor";
+// 自定义组件
+import Toolbar     from "./Toolbar";
+
+export default {
+  name: "EdCodeEditor",
+  components: {Toolbar, Editor},
+  props: {
+    // 代码内容
+    value: {type: String, default: ""},
+
+    // 是否显示toolbar
+    isToolbar: {type: Boolean, default: false},
+
+    // 是否弹窗打开
+    isDialog: {type: Boolean, default: false},
+
+    // 只读
+    readOnly: {type: Boolean, default: false},
+
+    // 大小控制
+    size: {type: String, default: "small"},
+
+    // 弹窗名称
+    title: {type: String, default: "编写代码"},
+
+    // 编辑器高度
+    lines: {type: Number},
+
+    // 编辑器主题
+    theme: {type: String, default: "monokai"},
+    // 编辑器语言
+    language: {type: String, default: "Javascript"},
+    // 弹窗模式下按钮属性
+    btnProps: {
+      type: Object, default: () => {
+        return {
+          round: true,
+          type: "primary",
+          plain: true
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      aceEditor: null,
+      visible: false,
+      form: {
+        mode: getOption(this.language, "mode"),
+        theme: getOption(this.theme, "theme"),
+        wrap: true
+      },
+    }
+  },
+  computed: {
+    compName() {
+      return this.isDialog ? "ed-dialog" : "div"
+    }
+  },
+  methods: {
+    // 打开弹窗
+    handlerOpen() {
+      this.visible = true
+    },
+
+    // 弹窗确认按钮
+    handlerOk() {
+      if (this.isDialog) {
+        this.$emit("input", this.$refs.aceEditor.getValue())
+        this.$emit("change", this.$refs.aceEditor.getValue())
+      }
+      this.$nextTick(() => {
+        this.visible = false
+      })
+    },
+
+    // 编辑器内容变更
+    handlerChange(value) {
+      if (!this.isDialog) {
+        this.$emit("input", value)
+        this.$emit("change", value)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tree-warning {
+  padding: 8px 16px;
+  background-color: #ecf8ff;
+  border-radius: 4px;
+  border-left: 5px solid #50bfff;
+  margin: 20px 0;
+  font-size: 14px;
+  color: #5e6d82;
+  line-height: 25px;
+}
+</style>

package/src/components/ed-base-vue/package/EdCodeEditor/src/AceEditor/webpack-resolver.js

@@ -0,0 +1,51 @@
+import ace from 'ace-builds'
+
+//输入类型
+ace.config.setModuleUrl('ace/keyboard/emacs', require('file-loader?esModule=false!ace-builds/src-noconflict/keybinding-emacs.js'));
+ace.config.setModuleUrl('ace/keyboard/sublime', require('file-loader?esModule=false!ace-builds/src-noconflict/keybinding-sublime.js'));
+ace.config.setModuleUrl('ace/keyboard/vim', require('file-loader?esModule=false!ace-builds/src-noconflict/keybinding-vim.js'));
+ace.config.setModuleUrl('ace/keyboard/vscode', require('file-loader?esModule=false!ace-builds/src-noconflict/keybinding-vscode.js'));
+
+// 导入默认语法模式
+ace.config.setModuleUrl('ace/mode/css', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-css.js'));
+ace.config.setModuleUrl('ace/mode/html', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-html.js'));
+ace.config.setModuleUrl('ace/mode/java', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-java.js'));
+ace.config.setModuleUrl('ace/mode/javascript', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-javascript.js'));
+ace.config.setModuleUrl('ace/mode/json', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-json.js'));
+ace.config.setModuleUrl('ace/mode/markdown', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-markdown.js'));
+ace.config.setModuleUrl('ace/mode/scss', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-scss.js'));
+ace.config.setModuleUrl('ace/mode/sql', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-sql.js'));
+ace.config.setModuleUrl('ace/mode/text', require('file-loader?esModule=false!ace-builds/src-noconflict/mode-text.js'));
+
+// 导入默认主题
+ace.config.setModuleUrl('ace/theme/chrome', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-chrome.js'));
+ace.config.setModuleUrl('ace/theme/clouds_midnight', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-clouds_midnight.js'));
+ace.config.setModuleUrl('ace/theme/crimson_editor', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-crimson_editor.js'));
+ace.config.setModuleUrl('ace/theme/dracula', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-dracula.js'));
+ace.config.setModuleUrl('ace/theme/eclipse', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-eclipse.js'));
+ace.config.setModuleUrl('ace/theme/github', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-github.js'));
+ace.config.setModuleUrl('ace/theme/merbivore', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-merbivore.js'));
+ace.config.setModuleUrl('ace/theme/monokai', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-monokai.js'));
+ace.config.setModuleUrl('ace/theme/one_dark', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-one_dark.js'));
+ace.config.setModuleUrl('ace/theme/terminal', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-terminal.js'));
+ace.config.setModuleUrl('ace/theme/textmate', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-textmate.js'));
+
+// 导入语言的自动提示
+// import css from
+ace.config.setModuleUrl('ace/snippets/css', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/css.js'));
+ace.config.setModuleUrl('ace/snippets/html', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/html.js'));
+ace.config.setModuleUrl('ace/snippets/java', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/java.js'));
+ace.config.setModuleUrl('ace/snippets/javascript', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/javascript.js'));
+ace.config.setModuleUrl('ace/snippets/json', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/json.js'));
+ace.config.setModuleUrl('ace/snippets/markdown', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/markdown.js'));
+ace.config.setModuleUrl('ace/snippets/scss', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/scss.js'));
+ace.config.setModuleUrl('ace/snippets/sql', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/sql.js'));
+ace.config.setModuleUrl('ace/snippets/text', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/text.js'));
+
+
+// 语法校验
+ace.config.setModuleUrl('ace/mode/css_worker', require('file-loader?esModule=false!ace-builds/src-noconflict/worker-css.js'));
+ace.config.setModuleUrl('ace/mode/html_worker', require('file-loader?esModule=false!ace-builds/src-noconflict/worker-html.js'));
+ace.config.setModuleUrl('ace/mode/javascript_worker', require('file-loader?esModule=false!ace-builds/src-noconflict/worker-javascript.js'));
+ace.config.setModuleUrl('ace/mode/json_worker', require('file-loader?esModule=false!ace-builds/src-noconflict/worker-json.js'));
+ace.config.setModuleUrl('ace/mode/lua_worker', require('file-loader?esModule=false!ace-builds/src-noconflict/worker-lua.js'));

package/src/components/ed-base-vue/package/EdCodeEditor/src/Codemirror/Toolbar.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="ed-code--toolbar">
+    <ed-form v-model="model" :form-desc="formDesc" inline size="mini"></ed-form>
+  </div>
+</template>
+
+<script>
+import {modeInfo, themes} from "./config";
+
+export default {
+  name: "Toolbar",
+  props: {
+    model: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  model: {
+    prop: "model",
+    event: "input"
+  },
+  data() {
+    return {
+      formDesc: [
+        {
+          label: '语言',
+          prop: "mode",
+          children: {
+            tags: "el-select",
+            attrs: {
+              filterable: true,
+              placeholder: '请选择语言'
+            },
+            options: modeInfo
+          },
+        },
+        {
+          label: '主题',
+          prop: "theme",
+          children: {
+            tags: "el-select",
+            attrs: {
+              placeholder: '请选择主题'
+            },
+            options: themes
+          },
+        },
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/ed-base-vue/package/EdCodeEditor/src/Codemirror/config.js

@@ -0,0 +1,64 @@
+/**
+ * 语言列表
+ * @type {[{mode: string, ext: string[], label: string, value: string}]}
+ */
+export const modeInfo = [
+    {label: "C", value: "text/x-csrc", mode: "clike", ext: ["c", "h", "ino"]},
+    {label: "C++", value: "text/x-c++src",},
+    {label: "C#", value: "text/x-csharp"},
+    {label: "CSS", value: "text/css", mode: "css", ext: ["css"]},
+    {label: "HTML", value: "text/html", mode: "htmlmixed", ext: ["html", "htm", "handlebars", "hbs"], alias: ["xhtml"]},
+    {label: "HTTP", value: "message/http", mode: "http"},
+    {label: "Java", value: "text/x-java", mode: "clike", ext: ["java"]},
+    {label: "Java Server Pages", value: "application/x-jsp", mode: "htmlembedded", ext: ["jsp"], alias: ["jsp"]},
+    {label: "JavaScript", value: "text/javascript", mode: "javascript"},
+    {label: "JSON", value: "application/json"},
+    {label: "JSX", value: "text/jsx", mode: "jsx", ext: ["jsx"]},
+    {label: "LESS", value: "text/x-less", mode: "css", ext: ["less"]},
+    {label: "Markdown", value: "text/x-markdown", mode: "markdown", ext: ["markdown", "md", "mkd"]},
+    {label: "Nginx", value: "text/x-nginx-conf", mode: "nginx", file: /nginx.*\.conf$/i},
+    {label: "PHP", value: "text/x-php"},
+    {label: "Python", value: "text/x-python",},
+    {label: "Sass", value: "text/x-sass", mode: "sass", ext: ["sass"]},
+    {label: "SCSS", value: "text/x-scss", mode: "css", ext: ["scss"]},
+    {label: "Shell", value: "text/x-sh"},
+    {label: "SQL", value: "text/x-sql", mode: "sql", ext: ["sql"]},
+    {label: "Text", value: "text/plain", mode: "null", ext: ["txt", "text", "conf", "def", "list", "log"]},
+    {label: "TypeScript", value: "application/typescript", mode: "javascript", ext: ["ts"], alias: ["ts"]},
+    {label: "TypeScript-JSX", value: "text/typescript-jsx", mode: "jsx", ext: ["tsx"], alias: ["tsx"]},
+    {label: "Vue.js Component", value: "script/x-vue"},
+    {label: "XML", value: "application/xml"},
+];
+
+/**
+ * 主题
+ * @type {[{label: string, value: string}]}
+ */
+export const themes = [
+    {label: "default", value: "default"},
+    {label: "abcdef", value: "abcdef"},
+    {label: "base16-dark", value: "base16-dark"},
+    {label: "blackboard", value: "blackboard"},
+    {label: "cobalt", value: "cobalt"},
+    {label: "colorforth", value: "colorforth"},
+    {label: "darcula", value: "darcula"},
+    {label: "dracula", value: "dracula"},
+    {label: "duotone-dark", value: "duotone-dark"},
+    {label: "eclipse", value: "eclipse"},
+    {label: "hopscotch", value: "hopscotch"},
+    {label: "icecoder", value: "icecoder"},
+    {label: "idea", value: "idea"},
+    {label: "isotope", value: "isotope"},
+    {label: "liquibyte", value: "liquibyte"},
+    {label: "lucario", value: "lucario"},
+    {label: "material", value: "material"},
+    {label: "mbo", value: "mbo"},
+    {label: "mdn-like", value: "mdn-like"},
+    {label: "night", value: "night"},
+    {label: "panda-syntax", value: "panda-syntax"},
+    {label: "pastel-on-dark", value: "pastel-on-dark"},
+    {label: "rubyblue", value: "rubyblue"},
+    {label: "seti", value: "seti"},
+    {label: "shadowfox", value: "shadowfox"},
+    {label: "yonce", value: "yonce"},
+]