@xfu0401/form-generator 1.0.1 → 1.0.2

package/src/components/Layout/LeftMenu.vue

@@ -1,46 +0,0 @@
-<template>
-  <el-menu :default-active="isSelectid" :default-openeds="defaultOpends">
-    <div v-for="item in routers" :key="item.path">
-      <el-submenu :index="item.path" v-if="item.children && item.children.length">
-        <template slot="title">{{ item.meta.title }}</template>
-        <el-menu-item
-          :index="children.path"
-          v-for="children in item.children"
-          :key="children.path"
-          @click="goPath(children)"
-        >
-          <i>{{children.meta.title}}</i>
-        </el-menu-item>
-      </el-submenu>
-      <el-menu-item v-else :index="item.path" @click="goPath(item)">{{ item.meta.title }}</el-menu-item>
-    </div>
-  </el-menu>
-</template>
-
-<script>
-import { constantRouterMap } from "@/router";
-
-export default {
-  data() {
-    return {
-      isSelectid: this.$route.path // 当前页面选中
-    };
-  },
-  computed: {
-    routers() {
-      return constantRouterMap.filter(item => item.meta?.title);
-    },
-    defaultOpends() {
-      return this.routers.map(item => item.path);
-    }
-  },
-
-  methods: {
-    goPath(val) {
-      this.$router.push({ path: val.path });
-    }
-  }
-};
-</script>
-
-<style lang="scss"></style>

package/src/components/SvgIcon/index.vue

@@ -1,43 +0,0 @@
-<template>
-  <svg :class="svgClass" aria-hidden="true">
-    <use :xlink:href="iconName"/>
-  </svg>
-</template>
-
-<script>
-export default {
-  name: 'SvgIcon',
-  props: {
-    iconClass: {
-      type: String,
-      required: true
-    },
-    className: {
-      type: String,
-      default: ''
-    }
-  },
-  computed: {
-    iconName () {
-      return `#icon-${this.iconClass}`
-    },
-    svgClass () {
-      if (this.className) {
-        return 'svg-icon ' + this.className
-      } else {
-        return 'svg-icon'
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .svg-icon {
-    width: 1em;
-    height: 1em;
-    vertical-align: -0.15em;
-    fill: currentColor;
-    overflow: hidden;
-  }
-</style>

package/src/components/code/Code.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="fg-code">
-    <pre :id="id" v-highlight v-if="!loading"><code>{{code}}</code></pre>
-    <el-button type="text" @click="handleCopy">{{isCopy?'已复制':'复制'}}</el-button>
-  </div>
-</template>
-
-<script>
-import "highlight.js/styles/atom-one-dark.css"; // 黑色主题
-// import "highlight.js/styles/atom-one-light.css";
-import hljs from "highlight.js/lib/core";
-// 仅包含你需要的语言
-import javascript from "highlight.js/lib/languages/javascript";
-import xml from "highlight.js/lib/languages/xml";
-// 注册语言
-hljs.registerLanguage("javascript", javascript);
-hljs.registerLanguage("xml", xml);
-
-export default {
-  props: {
-    code: {
-      default: ""
-    }
-  },
-  data() {
-    return {
-      loading: false,
-      isCopy: false,
-      id: new Date().getTime().toString()
-    };
-  },
-  watch: {
-    code() {
-      this.loading = true;
-      this.$nextTick(() => {
-        this.loading = false;
-      });
-    }
-  },
-  methods: {
-    handleCopy() {
-      if (this.isCopy) return;
-      const codeSnippet = document.getElementById(this.id);
-      const selection = window.getSelection();
-      const range = document.createRange();
-      // 选中需要复制的代码
-      range.selectNodeContents(codeSnippet);
-      selection.removeAllRanges();
-      selection.addRange(range);
-
-      // 复制到剪贴板
-      const successful = document.execCommand("copy");
-      if (successful) {
-        // this.$message.success("代码复制成功");
-        this.isCopy = true;
-        setTimeout(() => {
-          this.isCopy = false;
-          clearTimeout();
-        }, 3000);
-      } else {
-        this.$message.error("代码复制失败");
-      }
-
-      // 清除选区
-      window.getSelection().removeAllRanges();
-    }
-  },
-  directives: {
-    highlight: el => {
-      let blocks = el.querySelectorAll("pre code");
-      blocks.forEach(block => {
-        hljs.highlightBlock(block);
-      });
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.fg-code {
-  position: relative;
-  pre {
-    margin: 0;
-    width: 100%;
-    overflow-x: auto;
-    border-radius: 8px;
-  }
-  code {
-    font-size: 16px;
-    font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-  }
-  .el-button {
-    position: absolute;
-    top: 0;
-    right: 12px;
-  }
-}
-</style>

package/src/components/common/FGDialog.vue

@@ -1,100 +0,0 @@
-<template>
-  <!-- 版本列表 -->
-  <el-dialog
-    v-bind="$attrs"
-    :visible.sync="visible"
-    v-if="visible"
-    :close-on-click-modal="false"
-    class="Fg-Dialog"
-    append-to-body
-    :style="{'--height':height,'--footer':footer?'62px':'0px'}"
-  >
-    <slot></slot>
-    <template slot="footer" v-if="footer">
-      <slot name="footer">
-        <el-button size="small" @click="handleCancel">{{ cancelText }}</el-button>
-        <el-button
-          size="small"
-          :loading="loading"
-          type="primary"
-          @click="handleConfirm"
-        >{{ confirmText}}</el-button>
-      </slot>
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-export default {
-  name: "FGDialog",
-  props: {
-    cancelText: {
-      type: String,
-      default: "取消",
-    },
-    confirmText: {
-      type: String,
-      default: "确认",
-    },
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    footer: {
-      type: Boolean,
-      default: true,
-    },
-    height: {
-      type: String,
-      default: "60vh",
-    },
-  },
-  data() {
-    return {
-      visible: false,
-    };
-  },
-  methods: {
-    open() {
-      this.visible = true;
-    },
-    close() {
-      this.visible = false;
-    },
-    handleCancel() {
-      this.close();
-      this.$emit("cancel");
-    },
-    handleConfirm() {
-      // this.visible = false;
-      this.$emit("confirm");
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.Fg-Dialog {
-  // overflow: hidden !important;
-  .el-dialog {
-    overflow: hidden;
-    // margin-top: calc(
-    //   (100vh - var(--height) - var(--footer) - 54px) / 2
-    // ) !important;
-    .el-dialog__body {
-      overflow: auto;
-      height: var(--height);
-      // height: calc(var(--height) - var(--footer) - 54px);
-    }
-  }
-  .is-fullscreen {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    .el-dialog__body {
-      height: auto;
-      flex: 1;
-    }
-  }
-}
-</style>

package/src/components/editor/CodeDialog.vue

@@ -1,68 +0,0 @@
-<template>
-  <FGDialog ref="FGDialog" title="编辑数据" width="900px" top="8vh" @confirm="confirm">
-    <CodeEditor
-      v-model="code"
-      :mode="mode"
-      :name="name"
-      :params="params"
-      :placeholder="placeholder"
-    />
-  </FGDialog>
-</template>
-
-<script>
-import CodeEditor from "./CodeEditor";
-export default {
-  name: "CodeDialog",
-  components: {
-    CodeEditor,
-  },
-  props: {
-    // 表示当前编辑器类型
-    mode: {
-      type: String,
-      // text/javascript js编辑器
-      // application/json json编辑器
-      // text/html html编辑器
-      // text/css css编辑器
-      default: "application/json",
-    },
-    // 方法名
-    name: {
-      type: String,
-      default: "",
-    },
-    // 参数
-    params: {
-      type: String,
-      default: "",
-    },
-    placeholder: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      code: "",
-    };
-  },
-  methods: {
-    open(data) {
-      if (data) this.code = data;
-      this.$refs.FGDialog.open();
-    },
-    confirm() {
-      this.$emit("input", this.code);
-      this.$emit("confirm", this.code);
-      this.$refs.FGDialog.close();
-    },
-    handleCodeChange(code) {
-      console.log(code);
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-</style>

package/src/components/editor/CodeEditor.vue

@@ -1,191 +0,0 @@
-<template>
-  <div class="Fg-Code-Editor">
-    <div v-if="name" class="Fg-Code-Editor-label" v-html="topContent"></div>
-    <div class="Fg-Code-Editor-content">
-      <codemirror v-model="code" @ready="onCmReady" :style="codemirrorStyle" :options="cmOptions"></codemirror>
-    </div>
-    <div v-if="name" class="Fg-Code-Editor-label">}</div>
-  </div>
-</template>
-
-<script>
-import { codemirror } from "vue-codemirror"; // 引入组件
-import "codemirror/lib/codemirror.css";
-import "codemirror/theme/base16-dark.css"; // 引入base16-dark主题样式
-import "codemirror/addon/fold/foldgutter.css"; // 代码折叠图标样式
-import "codemirror/addon/fold/foldcode"; // 代码折叠
-import "codemirror/addon/fold/foldgutter"; // 代码折叠图标
-import "codemirror/addon/fold/brace-fold"; // 代码折叠括号
-// 支持代码自动补全
-import "codemirror/addon/hint/show-hint.css";
-import "codemirror/addon/hint/show-hint.js";
-import "codemirror/addon/hint/anyword-hint.js";
-import "codemirror/addon/hint/javascript-hint";
-import "codemirror/addon/hint/css-hint";
-// 高亮显示搜索匹配的结果
-// 搜索功能的依赖
-import "codemirror/addon/dialog/dialog.js";
-import "codemirror/addon/dialog/dialog.css";
-// 支持搜索功能
-import "codemirror/addon/search/search";
-import "codemirror/addon/search/searchcursor.js";
-// 高亮显示匹配的括号
-import "codemirror/addon/edit/matchbrackets";
-// 行注释
-import "codemirror/addon/comment/comment.js";
-// 语言支持
-import "codemirror/mode/css/css.js";
-import "codemirror/mode/javascript/javascript.js";
-import "codemirror/mode/vue/vue.js";
-// 语法检查
-import "codemirror/addon/lint/lint";
-import "codemirror/addon/lint/lint.css";
-import "codemirror/addon/lint/json-lint"; // json语法检查
-import "codemirror/addon/lint/javascript-lint"; // javascript语法检查
-// import "codemirror/addon/lint/html-lint"; // html语法检查
-import "codemirror/addon/lint/css-lint"; // css语法检查
-// window.CSSLint = CSSLint;
-import jsonlint from "jsonlint";
-window.jsonlint = jsonlint;
-import { JSHINT } from "jshint";
-window.JSHINT = JSHINT;
-
-export default {
-  name: "CodeEditor",
-  components: {
-    codemirror,
-  },
-  props: {
-    value: {},
-    // 表示当前编辑器类型
-    mode: {
-      type: String,
-      // text/javascript js编辑器
-      // application/json json编辑器
-      // text/html html编辑器
-      // text/css css编辑器
-      default: "text/html",
-    },
-    placeholder: {
-      type: String,
-      default: "// 你的初始代码",
-    },
-    // 方法名
-    name: {
-      type: String,
-      default: "",
-    },
-    // 参数
-    params: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      code: this.value || this.placeholder,
-      cmOptions: {
-        mode: this.mode,
-        gutters: [
-          "CodeMirror-lint-markers",
-          "CodeMirror-linenumbers",
-          "CodeMirror-foldgutter",
-        ],
-        lineNumbers: true,
-        line: true,
-        lint: true,
-        lineWrapping: true,
-        autofocus: true,
-        autoCloseBrackets: true,
-        foldGutter: true, // 块槽
-        hintOptions: { completeSingle: true },
-        matchTags: { bothTags: true },
-        matchBrackets: true,
-        showCursorWhenSelecting: true,
-        styleSelectedText: true,
-        styleActiveLine: true,
-        autoRefresh: true,
-        highlightSelectionMatches: {
-          minChars: 2,
-          trim: true,
-          style: "matchhighlight",
-          showToken: false,
-        },
-      },
-      codemirrorStyle: {
-        fontSize: "18px",
-        lineHeight: "150%",
-        height: "450px",
-        border: "1px solid #EBEEF5",
-      },
-    };
-  },
-  computed: {
-    // text/javascript js编辑器
-    // application/json json编辑器
-    // text/html html编辑器
-    // text/css css编辑器
-    topContent() {
-      return {
-        "text/javascript": `<div><span style="color: #708">function</span> <span style="color: #00f">${this.name}</span>(<span style="color: #00f">${this.params}</span>) {</div>`,
-        "text/css": `<span style="color: #164;">.${this.name}</span> {`,
-      }[this.mode];
-    },
-  },
-  watch: {
-    code() {
-      this.$emit("input", this.code);
-      this.$emit("change", this.code);
-    },
-  },
-  methods: {
-    onCmReady(cm) {
-      // cm.on("inputRead", (cm, obj) => {
-      //   if (obj.text && obj.text.length > 0) {
-      //     let c = obj.text[0].charAt(obj.text[0].length - 1);
-      //     if ((c >= "a" && c <= "z") || (c >= "A" && c <= "Z")) {
-      //       cm.showHint({ completeSingle: false }); // 自动填充关闭了它
-      //     }
-      //   }
-      // });
-    },
-  },
-};
-</script>
-
-<style lang="scss" >
-.Fg-Code-Editor {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background-color: #f5f5f5;
-  .Fg-Code-Editor-label {
-    background-color: #f7f7f7;
-    font-family: monospace;
-    font-size: 18px;
-    line-height: 150%;
-    margin-left: 57px;
-    border-left: 1px solid #ddd;
-    padding-left: 5px;
-    padding: 5px;
-  }
-  .Fg-Code-Editor-content {
-    height: calc(100% - 76px);
-    overflow: auto;
-  }
-  .vue-codemirror {
-    border: none !important;
-    height: 100% !important;
-    .CodeMirror {
-      height: 100% !important;
-    }
-    .CodeMirror-line {
-      padding-left: 27px !important;
-    }
-  }
-  .CodeMirror-hints {
-    z-index: 300 !important;
-  }
-}
-</style>

package/src/components/editor/CodeJson.vue

@@ -1,130 +0,0 @@
-<template>
-  <div class="Fg-code-json">
-    <textarea ref="codemirror" />
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-// 引入CodeMirror和基础样式
-import CodeMirror from "codemirror";
-import "codemirror/lib/codemirror.css";
-// JSON代码高亮需要由JavaScript插件支持
-import "codemirror/mode/javascript/javascript.js";
-// 选择IDEA主题样式，还有其他很多主题可选
-import "codemirror/theme/idea.css";
-// 支持使用Sublime快捷键
-import "codemirror/keymap/sublime.js";
-// 搜索功能的依赖
-import "codemirror/addon/dialog/dialog.js";
-import "codemirror/addon/dialog/dialog.css";
-// 支持搜索功能
-import "codemirror/addon/search/search";
-import "codemirror/addon/search/searchcursor.js";
-// 支持各种代码折叠
-import "codemirror/addon/fold/foldgutter.css";
-import "codemirror/addon/fold/foldcode.js";
-import "codemirror/addon/fold/foldgutter.js";
-import "codemirror/addon/fold/brace-fold.js";
-import "codemirror/addon/fold/comment-fold.js";
-// 支持代码区域全屏功能
-import "codemirror/addon/display/fullscreen.css";
-import "codemirror/addon/display/fullscreen.js";
-// 支持括号自动匹配
-import "codemirror/addon/edit/matchbrackets.js";
-import "codemirror/addon/edit/closebrackets.js";
-// 支持代码自动补全
-import "codemirror/addon/hint/show-hint.css";
-import "codemirror/addon/hint/show-hint.js";
-import "codemirror/addon/hint/anyword-hint.js";
-// 行注释
-import "codemirror/addon/comment/comment.js";
-// JSON错误检查
-import "codemirror/addon/lint/lint.css";
-import "codemirror/addon/lint/lint.js";
-// 需要依赖全局的jsonlint，不是很优雅
-import "codemirror/addon/lint/json-lint.js";
-//及时自动更新，配置里面也需要设置autoRefresh为true
-import "codemirror/addon/display/autorefresh";
-// 引入jsonlint
-import jsonlint from "jsonlint";
-window.jsonlint = jsonlint;
-
-export default {
-  name: "CodeEditor",
-  /* eslint-disable vue/require-prop-types */
-  props: {
-    value: [String, Number, Object, Array],
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      jsonEditor: false,
-    };
-  },
-  // 监听是否数据改变，随时更新json数据
-  watch: {
-    value(value) {
-      // console.log(value);
-      const editorValue = this.jsonEditor.getValue();
-      if (value !== editorValue) {
-        this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
-      }
-      this.jsonEditor.refresh();
-    },
-  },
-  mounted() {
-    // CodeMirror的配置项，搜官网看这里的配置项配置
-    this.jsonEditor = CodeMirror.fromTextArea(this.$refs.codemirror, {
-      mode: "application/json", // 接受的类型，json xml....
-      smartIndent: true, // 是否智能缩进
-      styleActiveLine: true, // 当前行高亮
-      lineNumbers: true, // 是否显示行数
-      indentUnit: 2, // 缩进单位，默认2
-      gutters: [
-        "CodeMirror-linenumbers",
-        "CodeMirror-foldgutter",
-        "CodeMirror-lint-markers", // CodeMirror-lint-markers是实现语法报错功能
-      ],
-      lint: true,
-      //lineWrapping: true, // 自动换行
-      matchBrackets: true, // 括号匹配显示
-      autoCloseBrackets: true, // 输入和退格时成对
-      readonly: this.readonly, // 只读
-      foldGutter: true,
-      autoRefresh: true,
-    });
-
-    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
-    this.jsonEditor.on("change", (cm) => {
-      this.$emit("changed", cm.getValue());
-      this.$emit("input", cm.getValue());
-      // 编辑json框里面的内容可以时刻监听到值，通过cm.getValue()获取到
-    });
-  },
-  methods: {
-    getValue() {
-      return this.jsonEditor.getValue();
-    },
-  },
-};
-</script>
-
-<style scoped>
-.Fg-code-json {
-  height: 100%;
-  position: relative;
-  overflow: auto;
-}
-.Fg-code-json >>> .CodeMirror {
-  height: 100%;
-  min-height: 300px;
-}
-.Fg-code-json >>> .CodeMirror-scroll {
-  height: 100%;
-  min-height: 300px;
-}
-</style>