diff --git a/frontend/src/api/commonAjax.js b/frontend/src/api/commonAjax.js
deleted file mode 100644
index ea149fb020..0000000000
--- a/frontend/src/api/commonAjax.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import request from '@/utils/request'
-
-export function post(url, data) {
-  return request({
-    url: url,
-    method: 'post',
-    loading: true,
-    data
-  })
-}
-
-export function get(url) {
-  return request({
-    url: url,
-    method: 'get',
-    loading: true
-  })
-}
-
-export function fileUpload(url, file, files, param) {
-  const formData = new FormData()
-  if (file) {
-    formData.append('file', file)
-  }
-  if (files) {
-    files.forEach(f => {
-      formData.append('files', f)
-    })
-  }
-  formData.append('request', new Blob([JSON.stringify(param)], { type: 'application/json' }))
-  return request({
-    method: 'POST',
-    loading: true,
-    url: url,
-    data: formData
-  })
-}
-export default { fileUpload }
diff --git a/frontend/src/components/IconSelect/index.vue b/frontend/src/components/IconSelect/index.vue
deleted file mode 100644
index 29055d477f..0000000000
--- a/frontend/src/components/IconSelect/index.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<!-- @author zhengjie -->
-<template>
-  <div class="icon-body">
-    <el-input
-      v-model="name"
-      style="position: relative;"
-      clearable
-      placeholder="请输入图标名称"
-      @clear="filterIcons"
-      @input.native="filterIcons"
-    >
-      <i
-        slot="suffix"
-        class="el-icon-search el-input__icon"
-      />
-    </el-input>
-    <div class="icon-list">
-      <div
-        v-for="(item, index) in iconList"
-        :key="index"
-        @click="selectedIcon(item)"
-      >
-        <svg-icon
-          :icon-class="item"
-          style="height: 30px;width: 16px;"
-        />
-        <span>{{ item }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import icons from './requireIcons'
-export default {
-  name: 'IconSelect',
-  data() {
-    return {
-      name: '',
-      iconList: icons
-    }
-  },
-  methods: {
-    filterIcons() {
-      this.iconList = icons
-      if (this.name) {
-        this.iconList = this.iconList.filter(item => item.includes(this.name))
-      }
-    },
-    selectedIcon(name) {
-      this.$emit('selected', name)
-      document.body.click()
-    },
-    reset() {
-      this.name = ''
-      this.iconList = icons
-    }
-  }
-}
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-  .icon-body {
-    width: 100%;
-    padding: 10px;
-    .icon-list {
-      height: 200px;
-      overflow-y: scroll;
-      div {
-        height: 30px;
-        line-height: 30px;
-        margin-bottom: -5px;
-        cursor: pointer;
-        width: 33%;
-        float: left;
-      }
-      span {
-        display: inline-block;
-        vertical-align: -0.15em;
-        fill: currentColor;
-        overflow: hidden;
-      }
-    }
-  }
-</style>
diff --git a/frontend/src/components/IconSelect/requireIcons.js b/frontend/src/components/IconSelect/requireIcons.js
deleted file mode 100644
index 8c073d39e1..0000000000
--- a/frontend/src/components/IconSelect/requireIcons.js
+++ /dev/null
@@ -1,11 +0,0 @@
-
-const req = require.context('@/icons/svg', false, /\.svg$/)
-const requireAll = requireContext => requireContext.keys()
-
-const re = /\.\/(.*)\.svg/
-
-const icons = requireAll(req).map(i => {
-  return i.match(re)[1]
-})
-
-export default icons
diff --git a/frontend/src/components/asyncSoltComponent/index.vue b/frontend/src/components/asyncSoltComponent/index.vue
deleted file mode 100644
index 4db8a5468c..0000000000
--- a/frontend/src/components/asyncSoltComponent/index.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <component
-    :is="mode"
-    :ref="refId"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <template #default>
-      <slot name="default" />
-    </template>
-  </component>
-</template>
-
-<script>
-import { uuid } from 'vue-uuid'
-import { get } from '@/api/system/dynamic'
-
-export default {
-  name: 'AsyncComponent',
-  inheritAttrs: true,
-  props: {
-    // 父组件提供请求地址
-    url: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      resData: '',
-      mode: '',
-      refId: null
-    }
-  },
-  watch: {
-    url: {
-      immediate: true,
-      async handler(val, oldVal) {
-        if (!this.url) return
-        // Cache 缓存 根据 url 参数
-        if (!window.SyncComponentCache) {
-          window.SyncComponentCache = {}
-        }
-        let res
-        if (!window.SyncComponentCache[this.url]) {
-          window.SyncComponentCache[this.url] = get(this.url)
-
-          // window.SyncComponentCache[this.url] = Axios.get(this.url)
-          res = await window.SyncComponentCache[this.url]
-        } else {
-          res = await window.SyncComponentCache[this.url]
-        }
-
-        const Fn = Function
-        this.mode = new Fn(`return ${res.data || res}`)()
-        /* if (res && res.data) {
-          const Fn = Function
-          this.mode = new Fn(`return ${res.data || res}`)()
-        } */
-      }
-    }
-  },
-  created() {
-    this.refId = uuid.v1
-  },
-  methods: {
-    /* chartResize() {
-      this.$refs[this.refId] && this.$refs[this.refId].chartResize && this.$refs[this.refId].chartResize()
-    }, */
-    callPluginInner(param) {
-      const { methodName, methodParam } = param
-      this.$refs[this.refId] && this.$refs[this.refId][methodName] && this.$refs[this.refId][methodName](methodParam)
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/breadcrumb/index.vue b/frontend/src/components/breadcrumb/index.vue
deleted file mode 100644
index c920645c89..0000000000
--- a/frontend/src/components/breadcrumb/index.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <el-breadcrumb
-    class="app-breadcrumb"
-    separator="/"
-  >
-    <transition-group name="breadcrumb">
-      <el-breadcrumb-item
-        v-for="(item,index) in levelList"
-        :key="item.path"
-      >
-        <span v-if="index === 0">当前位置：</span>
-        <span
-          v-if="item.redirect==='noRedirect'||index==levelList.length-1"
-          class="no-redirect"
-        >{{ item.meta.title }}</span>
-        <a
-          v-else
-          @click.prevent="handleLink(item)"
-        >{{ item.meta.title }}</a>
-      </el-breadcrumb-item>
-    </transition-group>
-  </el-breadcrumb>
-</template>
-
-<script>
-import pathToRegexp from 'path-to-regexp'
-
-export default {
-  data() {
-    return {
-      levelList: null
-    }
-  },
-  watch: {
-    $route() {
-      this.getBreadcrumb()
-    }
-  },
-  created() {
-    this.getBreadcrumb()
-  },
-  methods: {
-    getBreadcrumb() {
-      // only show routes with meta.title
-      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
-      const first = matched[0]
-
-      if (!this.isDashboard(first)) {
-        matched = [{ path: '/panel', meta: { title: '仪表板' }}].concat(matched)
-      }
-
-      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
-    },
-    isDashboard(route) {
-      const name = route && route.name
-      if (!name) {
-        return false
-      }
-      //   return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
-      return name.trim().toLocaleLowerCase() === 'panel'.toLocaleLowerCase()
-    },
-    pathCompile(path) {
-      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
-      const { params } = this.$route
-      var toPath = pathToRegexp.compile(path)
-      return toPath(params)
-    },
-    handleLink(item) {
-      const { redirect, path } = item
-      if (redirect) {
-        this.$router.push(redirect)
-        return
-      }
-      this.$router.push(this.pathCompile(path))
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.app-breadcrumb.el-breadcrumb {
-  display: inline-block;
-  font-size: 14px;
-  line-height: 50px;
-  margin-left: 8px;
-
-  .no-redirect {
-    color: #97a8be;
-    cursor: text;
-  }
-}
-</style>
diff --git a/frontend/src/components/business/ElSelectAll/index.vue b/frontend/src/components/business/ElSelectAll/index.vue
deleted file mode 100644
index 9254ee3b59..0000000000
--- a/frontend/src/components/business/ElSelectAll/index.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <el-select
-    v-model="selected"
-    multiple
-    v-bind="$attrsAll"
-    v-on="$listenserAll"
-    @change="onChange"
-  >
-    <el-option
-      v-for="item in mdoptionsList"
-      :key="item.key"
-      :label="item.label"
-      :value="item.value"
-    />
-    <slot name="default" />
-  </el-select>
-</template>
-
-<script>
-export default {
-  name: 'ElSelectAll',
-  props: {
-    value: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    options: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    }
-  },
-  data() {
-    const selected = this.value || []
-    return {
-      selected,
-      mdoptionsValue: [],
-      oldMdoptionsValue: [],
-      mdoptionsList: []
-    }
-  },
-  computed: {
-    $attrsAll() {
-      // const val = this.$vnode.data.model && this.$vnode.data.model.value;
-      const result = {
-        // value: val,
-        ...this.$attrs
-      }
-      return result
-    },
-    $listenserAll() {
-      const _this = this
-      return Object.assign({}, this.$listeners, {
-        change: () => {
-          this.$emit('change', (_this.selected || []).filter(v => {
-            return v !== 'all'
-          }))
-        },
-        input: () => {
-          this.$emit('input', (_this.selected || []).filter(v => {
-            return v !== 'all'
-          }))
-        }
-      })
-    }
-  },
-  watch: {
-    selected: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        this.$emit('input', (val || []).filter(v => {
-          return v !== 'all'
-        }))
-      }
-    },
-    options: {
-      immediate: true,
-      deep: true,
-      handler(val) {
-        if ((!val || val.length === 0) && !this.$slots) {
-          this.mdoptionsList = []
-        } else {
-          this.mdoptionsList = [{
-            key: 'all',
-            value: 'all',
-            label: '全部'
-          }, ...val]
-        }
-      }
-    }
-  },
-  mounted() {
-  },
-  methods: {
-    onChange(val) {
-      // eslint-disable-next-line no-debugger
-      const allValues = []
-      // 保留所有值
-      for (const item of this.mdoptionsList) {
-        allValues.push(item.value)
-      }
-      // 用来储存上一次的值，可以进行对比
-      const oldVal = this.oldMdoptionsValue.length === 1 ? [] : this.oldMdoptionsValue[1] || []
-      // 若是全部选择
-      if (val.includes('all')) this.selected = allValues
-      // 取消全部选中  上次有 当前没有 表示取消全选
-      if (oldVal.includes('all') && !val.includes('all')) this.selected = []
-      // 点击非全部选中  需要排除全部选中 以及 当前点击的选项
-      // 新老数据都有全部选中
-      if (oldVal.includes('all') && val.includes('all')) {
-        const index = val.indexOf('all')
-        val.splice(index, 1) // 排除全选选项
-        this.selected = val
-      }
-      // 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
-      if (!oldVal.includes('all') && !val.includes('all')) {
-        if (val.length === allValues.length - 1) this.selected = ['all'].concat(val)
-      }
-      // 储存当前最后的结果 作为下次的老数据
-      this.oldMdoptionsValue[1] = this.selected
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/business/complexTable/index.vue b/frontend/src/components/business/complexTable/index.vue
deleted file mode 100644
index 57a50c528d..0000000000
--- a/frontend/src/components/business/complexTable/index.vue
+++ /dev/null
@@ -1,131 +0,0 @@
-
-<template>
-  <div class="complex-table">
-    <div
-      v-if="$slots.header || header"
-      class="complex-table__header"
-    >
-      <slot name="header">{{ header }}</slot>
-    </div>
-
-    <div
-      v-if="$slots.toolbar || searchConfig"
-      class="complex-table__toolbar"
-    >
-      <div>
-        <slot name="toolbar" />
-      </div>
-      <fu-search-bar
-        ref="search"
-        v-bind="searchConfig"
-        @exec="search"
-      >
-        <template #complex>
-          <slot name="complex" />
-        </template>
-        <slot name="buttons" />
-        <fu-table-column-select
-          v-if="!hideColumns"
-          :columns="columns"
-        />
-      </fu-search-bar>
-    </div>
-
-    <div class="complex-table__body">
-      <fu-table
-        v-bind="$attrs"
-        :columns="columns"
-        :local-key="localKey"
-        v-on="$listeners"
-      >
-        <slot />
-      </fu-table>
-    </div>
-
-    <div
-      v-if="$slots.pagination || paginationConfig"
-      class="complex-table__pagination"
-    >
-      <slot name="pagination">
-        <fu-table-pagination
-          :current-page.sync="paginationConfig.currentPage"
-          :page-size.sync="paginationConfig.pageSize"
-          v-bind="paginationConfig"
-          @change="search"
-        />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'ComplexTable',
-  props: {
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    hideColumns: {
-      type: Boolean,
-      default: false
-    },
-    // eslint-disable-next-line vue/require-default-prop
-    localKey: String, // 如果需要记住选择的列，则这里添加一个唯一的Key
-    // eslint-disable-next-line vue/require-default-prop
-    header: String,
-    // eslint-disable-next-line vue/require-default-prop
-    searchConfig: Object,
-    // eslint-disable-next-line vue/require-default-prop
-    paginationConfig: Object,
-    transCondition: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      condition: {}
-    }
-  },
-  mounted() {
-    if (this.transCondition !== null) {
-      this.$refs.search.setConditions(this.transCondition)
-    }
-  },
-  methods: {
-    search(condition, e) {
-      if (condition) {
-        this.condition = condition
-      }
-      this.$emit('search', this.condition, e)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "~@/styles/mixin.scss";
-.complex-table {
-  .complex-table__header {
-    @include flex-row(flex-start, center);
-    line-height: 60px;
-    font-size: 18px;
-  }
-
-  .complex-table__toolbar {
-    @include flex-row(space-between, center);
-
-    .fu-search-bar {
-      width: auto;
-    }
-  }
-
-  .complex-table__pagination {
-    margin-top: 20px;
-    @include flex-row(flex-end);
-  }
-}
-
-</style>
diff --git a/frontend/src/components/business/conditionTable/index.vue b/frontend/src/components/business/conditionTable/index.vue
deleted file mode 100644
index 2d1d535cf7..0000000000
--- a/frontend/src/components/business/conditionTable/index.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <div>
-    <!-- <el-switch v-model="value" active-text="当前用户" /> -->
-
-    <treeselect
-      v-model="value"
-      :options="options"
-      :load-options="loadData"
-      style="width: 200px"
-      :no-children-text="$t('commons.treeselect.no_children_text')"
-      :no-options-text="$t('commons.treeselect.no_options_text')"
-      :no-results-text="$t('commons.treeselect.no_results_text')"
-    />
-  </div>
-</template>
-
-<script>
-import { ComplexCondition } from 'fit2cloud-ui/src/components/search-bar/model'
-import { getDeptTree } from '@/api/system/dept'
-import { LOAD_CHILDREN_OPTIONS, LOAD_ROOT_OPTIONS } from '@riophae/vue-treeselect'
-import Treeselect from '@riophae/vue-treeselect'
-import '@riophae/vue-treeselect/dist/vue-treeselect.css'
-export default {
-  components: { Treeselect },
-  props: {
-    // eslint-disable-next-line vue/require-default-prop
-    field: String,
-    // eslint-disable-next-line vue/require-default-prop
-    label: String,
-    // eslint-disable-next-line vue/require-default-prop
-    defaultOperator: String
-    // eslint-disable-next-line vue/require-default-prop
-    // options: Array
-    // eslint-disable-next-line vue/require-default-prop
-    // loadData: Function
-  },
-  data() {
-    return {
-      value: undefined,
-      operator: 'dept',
-      operatorLabel: '组织',
-      options: null
-    }
-  },
-  computed: {
-    valueLabel() {
-      return this.value
-    }
-  },
-  // 自定义搜索控件的2个方法
-  methods: {
-    init() { // 初始化方法，在打开复合搜索界面时会被调用
-      // 例如清空之前填写的内容
-      this.value = undefined
-    },
-    getCondition() { // 点击确认时调用
-      const { field, label, operator, operatorLabel, value, valueLabel } = this
-      // 必须返回ComplexCondition类型的对象
-      return new ComplexCondition({ field, label, operator, operatorLabel, value, valueLabel })
-    },
-
-    // 获取弹窗内部门数据
-    loadData({ action, parentNode, callback }) {
-      if (action === LOAD_ROOT_OPTIONS) {
-        const _self = this
-        !this.options && getDeptTree('0').then(res => {
-          _self.options = res.data.map(node => _self.normalizer(node))
-          callback()
-        })
-      }
-
-      if (action === LOAD_CHILDREN_OPTIONS) {
-        const _self = this
-        getDeptTree(parentNode.id).then(res => {
-          parentNode.children = res.data.map(function(obj) {
-            return _self.normalizer(obj)
-          })
-          callback()
-        })
-      }
-    },
-    normalizer(node) {
-      if (node.hasChildren) {
-        node.children = null
-      }
-      return {
-        id: node.deptId,
-        label: node.name,
-        children: node.children
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/components/business/treeTable/index.vue b/frontend/src/components/business/treeTable/index.vue
deleted file mode 100644
index 2a07e24da6..0000000000
--- a/frontend/src/components/business/treeTable/index.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-  <div class="complex-table">
-    <div
-      v-if="$slots.header || header"
-      class="complex-table__header"
-    >
-      <slot name="header">{{ header }}</slot>
-    </div>
-
-    <div
-      v-if="$slots.toolbar || searchConfig"
-      class="complex-table__toolbar"
-    >
-      <!-- <slot name="toolbar">
-        <fu-search-bar v-bind="searchConfig" @exec="search">
-          <slot name="buttons" />
-          <fu-table-column-select :columns="columns" />
-        </fu-search-bar>
-      </slot> -->
-      <div>
-        <slot name="toolbar" />
-      </div>
-      <fu-search-bar
-        v-bind="searchConfig"
-        @exec="search"
-      >
-        <template #complex>
-          <slot name="complex" />
-        </template>
-        <slot name="buttons" />
-        <fu-table-column-select :columns="columns" />
-      </fu-search-bar>
-    </div>
-
-    <div class="complex-table__body">
-      <slot />
-      <!-- <fu-table ref="table" v-bind="$attrs" :columns="columns" :local-key="localKey" v-on="$listeners">
-        <slot />
-      </fu-table> -->
-    </div>
-
-    <div
-      v-if="$slots.pagination || paginationConfig"
-      class="complex-table__pagination"
-    >
-      <slot name="pagination">
-        <fu-table-pagination
-          :current-page.sync="paginationConfig.currentPage"
-          :page-size.sync="paginationConfig.pageSize"
-          v-bind="paginationConfig"
-          @change="search"
-        />
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'TreeTable',
-  props: {
-    columns: {
-      type: Array,
-      default: () => []
-    },
-    // eslint-disable-next-line vue/require-default-prop
-    localKey: String, // 如果需要记住选择的列，则这里添加一个唯一的Key
-    // eslint-disable-next-line vue/require-default-prop
-    header: String,
-    // eslint-disable-next-line vue/require-default-prop
-    searchConfig: Object,
-    // eslint-disable-next-line vue/require-default-prop
-    paginationConfig: Object
-  },
-  data() {
-    return {
-      condition: {}
-    }
-  },
-  methods: {
-    search(condition, e) {
-      if (condition) {
-        this.condition = condition
-      }
-      this.$emit('search', this.condition, e)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-@import "~@/styles/mixin.scss";
-.complex-table {
-  .complex-table__header {
-    @include flex-row(flex-start, center);
-    line-height: 60px;
-    font-size: 18px;
-  }
-
-  .complex-table__toolbar {
-    @include flex-row(space-between, center);
-
-    .fu-search-bar {
-      width: auto;
-    }
-  }
-
-  .complex-table__pagination {
-    margin-top: 20px;
-    @include flex-row(flex-end);
-  }
-}
-
-</style>
diff --git a/frontend/src/components/canvas/assets/iconfont/demo.css b/frontend/src/components/canvas/assets/iconfont/demo.css
deleted file mode 100644
index b7af3aa35d..0000000000
--- a/frontend/src/components/canvas/assets/iconfont/demo.css
+++ /dev/null
@@ -1,539 +0,0 @@
-/* Logo 字体 */
-@font-face {
-  font-family: "iconfont logo";
-  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
-  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
-  url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
-  url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
-  url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
-}
-
-.logo {
-  font-family: "iconfont logo";
-  font-size: 160px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* tabs */
-.nav-tabs {
-  position: relative;
-}
-
-.nav-tabs .nav-more {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  height: 42px;
-  line-height: 42px;
-  color: #666;
-}
-
-#tabs {
-  border-bottom: 1px solid #eee;
-}
-
-#tabs li {
-  cursor: pointer;
-  width: 100px;
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  font-size: 16px;
-  border-bottom: 2px solid transparent;
-  position: relative;
-  z-index: 1;
-  margin-bottom: -1px;
-  color: #666;
-}
-
-
-#tabs .active {
-  border-bottom-color: #f00;
-  color: #222;
-}
-
-.tab-container .content {
-  display: none;
-}
-
-/* 页面布局 */
-.main {
-  padding: 30px 100px;
-  width: 960px;
-  margin: 0 auto;
-}
-
-.main .logo {
-  color: #333;
-  text-align: left;
-  margin-bottom: 30px;
-  line-height: 1;
-  height: 110px;
-  margin-top: -50px;
-  overflow: hidden;
-  *zoom: 1;
-}
-
-.main .logo a {
-  font-size: 160px;
-  color: #333;
-}
-
-.helps {
-  margin-top: 40px;
-}
-
-.helps pre {
-  padding: 20px;
-  margin: 10px 0;
-  border: solid 1px #e7e1cd;
-  background-color: #fffdef;
-  overflow: auto;
-}
-
-.icon_lists {
-  width: 100% !important;
-  overflow: hidden;
-  *zoom: 1;
-}
-
-.icon_lists li {
-  width: 100px;
-  margin-bottom: 10px;
-  margin-right: 20px;
-  text-align: center;
-  list-style: none !important;
-  cursor: default;
-}
-
-.icon_lists li .code-name {
-  line-height: 1.2;
-}
-
-.icon_lists .icon {
-  display: block;
-  height: 100px;
-  line-height: 100px;
-  font-size: 42px;
-  margin: 10px auto;
-  color: #333;
-  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
-  -moz-transition: font-size 0.25s linear, width 0.25s linear;
-  transition: font-size 0.25s linear, width 0.25s linear;
-}
-
-.icon_lists .icon:hover {
-  font-size: 100px;
-}
-
-.icon_lists .svg-icon {
-  /* 通过设置 font-size 来改变图标大小 */
-  width: 1em;
-  /* 图标和文字相邻时，垂直对齐 */
-  vertical-align: -0.15em;
-  /* 通过设置 color 来改变 SVG 的颜色/fill */
-  fill: currentColor;
-  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
-      normalize.css 中也包含这行 */
-  overflow: hidden;
-}
-
-.icon_lists li .name,
-.icon_lists li .code-name {
-  color: #666;
-}
-
-/* markdown 样式 */
-.markdown {
-  color: #666;
-  font-size: 14px;
-  line-height: 1.8;
-}
-
-.highlight {
-  line-height: 1.5;
-}
-
-.markdown img {
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-.markdown h1 {
-  color: #404040;
-  font-weight: 500;
-  line-height: 40px;
-  margin-bottom: 24px;
-}
-
-.markdown h2,
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6 {
-  color: #404040;
-  margin: 1.6em 0 0.6em 0;
-  font-weight: 500;
-  clear: both;
-}
-
-.markdown h1 {
-  font-size: 28px;
-}
-
-.markdown h2 {
-  font-size: 22px;
-}
-
-.markdown h3 {
-  font-size: 16px;
-}
-
-.markdown h4 {
-  font-size: 14px;
-}
-
-.markdown h5 {
-  font-size: 12px;
-}
-
-.markdown h6 {
-  font-size: 12px;
-}
-
-.markdown hr {
-  height: 1px;
-  border: 0;
-  background: #e9e9e9;
-  margin: 16px 0;
-  clear: both;
-}
-
-.markdown p {
-  margin: 1em 0;
-}
-
-.markdown > p,
-.markdown > blockquote,
-.markdown > .highlight,
-.markdown > ol,
-.markdown > ul {
-  width: 80%;
-}
-
-.markdown ul > li {
-  list-style: circle;
-}
-
-.markdown > ul li,
-.markdown blockquote ul > li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown > ul li p,
-.markdown > ol li p {
-  margin: 0.6em 0;
-}
-
-.markdown ol > li {
-  list-style: decimal;
-}
-
-.markdown > ol li,
-.markdown blockquote ol > li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown code {
-  margin: 0 3px;
-  padding: 0 5px;
-  background: #eee;
-  border-radius: 3px;
-}
-
-.markdown strong,
-.markdown b {
-  font-weight: 600;
-}
-
-.markdown > table {
-  border-collapse: collapse;
-  border-spacing: 0px;
-  empty-cells: show;
-  border: 1px solid #e9e9e9;
-  width: 95%;
-  margin-bottom: 24px;
-}
-
-.markdown > table th {
-  white-space: nowrap;
-  color: #333;
-  font-weight: 600;
-}
-
-.markdown > table th,
-.markdown > table td {
-  border: 1px solid #e9e9e9;
-  padding: 8px 16px;
-  text-align: left;
-}
-
-.markdown > table th {
-  background: #F7F7F7;
-}
-
-.markdown blockquote {
-  font-size: 90%;
-  color: #999;
-  border-left: 4px solid #e9e9e9;
-  padding-left: 0.8em;
-  margin: 1em 0;
-}
-
-.markdown blockquote p {
-  margin: 0;
-}
-
-.markdown .anchor {
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  margin-left: 8px;
-}
-
-.markdown .waiting {
-  color: #ccc;
-}
-
-.markdown h1:hover .anchor,
-.markdown h2:hover .anchor,
-.markdown h3:hover .anchor,
-.markdown h4:hover .anchor,
-.markdown h5:hover .anchor,
-.markdown h6:hover .anchor {
-  opacity: 1;
-  display: inline-block;
-}
-
-.markdown > br,
-.markdown > p > br {
-  clear: both;
-}
-
-
-.hljs {
-  display: block;
-  background: white;
-  padding: 0.5em;
-  color: #333333;
-  overflow-x: auto;
-}
-
-.hljs-comment,
-.hljs-meta {
-  color: #969896;
-}
-
-.hljs-string,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-strong,
-.hljs-emphasis,
-.hljs-quote {
-  color: #df5000;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-type {
-  color: #a71d5d;
-}
-
-.hljs-literal,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-attribute {
-  color: #0086b3;
-}
-
-.hljs-section,
-.hljs-name {
-  color: #63a35c;
-}
-
-.hljs-tag {
-  color: #333333;
-}
-
-.hljs-title,
-.hljs-attr,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: #795da3;
-}
-
-.hljs-addition {
-  color: #55a532;
-  background-color: #eaffea;
-}
-
-.hljs-deletion {
-  color: #bd2c00;
-  background-color: #ffecec;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}
-
-/* 代码高亮 */
-/* PrismJS 1.15.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-code[class*="language-"],
-pre[class*="language-"] {
-  color: black;
-  background: none;
-  text-shadow: 0 1px white;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre[class*="language-"]::-moz-selection,
-pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection,
-pre[class*="language-"] ::selection,
-code[class*="language-"]::selection,
-code[class*="language-"] ::selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-@media print {
-
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none;
-  }
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: .5em 0;
-  overflow: auto;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-  background: #f5f2f0;
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #9a6e3a;
-  background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function,
-.token.class-name {
-  color: #DD4A68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
diff --git a/frontend/src/components/canvas/assets/iconfont/demo_index.html b/frontend/src/components/canvas/assets/iconfont/demo_index.html
deleted file mode 100644
index 70918ca7c4..0000000000
--- a/frontend/src/components/canvas/assets/iconfont/demo_index.html
+++ /dev/null
@@ -1,307 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8"/>
-  <title>IconFont Demo</title>
-  <link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
-  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
-  <link rel="stylesheet" href="demo.css">
-  <link rel="stylesheet" href="iconfont.css">
-  <script src="iconfont.js"></script>
-  <!-- jQuery -->
-  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
-  <!-- 代码高亮 -->
-  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
-</head>
-<body>
-  <div class="main">
-    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">&#xe86b;</a></h1>
-    <div class="nav-tabs">
-      <ul id="tabs" class="dib-box">
-        <li class="dib active"><span>Unicode</span></li>
-        <li class="dib"><span>Font class</span></li>
-        <li class="dib"><span>Symbol</span></li>
-      </ul>
-
-      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2373406" target="_blank" class="nav-more">查看项目</a>
-
-    </div>
-    <div class="tab-container">
-      <div class="content unicode" style="display: block;">
-          <ul class="icon_lists dib-box">
-
-            <li class="dib">
-              <span class="icon iconfont">&#xe66a;</span>
-                <div class="name">向右旋转</div>
-                <div class="code-name">&amp;#xe66a;</div>
-              </li>
-
-            <li class="dib">
-              <span class="icon iconfont">&#xe616;</span>
-                <div class="name">图片</div>
-                <div class="code-name">&amp;#xe616;</div>
-              </li>
-
-            <li class="dib">
-              <span class="icon iconfont">&#xe672;</span>
-                <div class="name">锁</div>
-                <div class="code-name">&amp;#xe672;</div>
-              </li>
-
-            <li class="dib">
-              <span class="icon iconfont">&#xe790;</span>
-                <div class="name">矩形</div>
-                <div class="code-name">&amp;#xe790;</div>
-              </li>
-
-            <li class="dib">
-              <span class="icon iconfont">&#xe652;</span>
-                <div class="name">文本</div>
-                <div class="code-name">&amp;#xe652;</div>
-              </li>
-
-            <li class="dib">
-              <span class="icon iconfont">&#xe648;</span>
-                <div class="name">按钮</div>
-                <div class="code-name">&amp;#xe648;</div>
-              </li>
-
-          </ul>
-          <div class="article markdown">
-          <h2 id="unicode-">Unicode 引用</h2>
-          <hr>
-
-          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
-          <ul>
-            <li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
-            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
-            <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
-          </ul>
-          <blockquote>
-            <p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
-          </blockquote>
-          <p>Unicode 使用步骤如下：</p>
-          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
-<pre><code class="language-css"
->@font-face {
-  font-family: 'iconfont';
-  src: url('iconfont.eot');
-  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
-      url('iconfont.woff2') format('woff2'),
-      url('iconfont.woff') format('woff'),
-      url('iconfont.ttf') format('truetype');
-}
-</code></pre>
-          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
-<pre><code class="language-css"
->.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-</code></pre>
-          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
-<pre>
-<code class="language-html"
->&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
-</code></pre>
-          <blockquote>
-            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
-          </blockquote>
-          </div>
-      </div>
-      <div class="content font-class">
-        <ul class="icon_lists dib-box">
-
-          <li class="dib">
-            <span class="icon iconfont icon-xiangyouxuanzhuan"></span>
-            <div class="name">
-              向右旋转
-            </div>
-            <div class="code-name">.icon-xiangyouxuanzhuan
-            </div>
-          </li>
-
-          <li class="dib">
-            <span class="icon iconfont icon-tupian"></span>
-            <div class="name">
-              图片
-            </div>
-            <div class="code-name">.icon-tupian
-            </div>
-          </li>
-
-          <li class="dib">
-            <span class="icon iconfont icon-suo"></span>
-            <div class="name">
-              锁
-            </div>
-            <div class="code-name">.icon-suo
-            </div>
-          </li>
-
-          <li class="dib">
-            <span class="icon iconfont icon-juxing"></span>
-            <div class="name">
-              矩形
-            </div>
-            <div class="code-name">.icon-juxing
-            </div>
-          </li>
-
-          <li class="dib">
-            <span class="icon iconfont icon-wenben"></span>
-            <div class="name">
-              文本
-            </div>
-            <div class="code-name">.icon-wenben
-            </div>
-          </li>
-
-          <li class="dib">
-            <span class="icon iconfont icon-button"></span>
-            <div class="name">
-              按钮
-            </div>
-            <div class="code-name">.icon-button
-            </div>
-          </li>
-
-        </ul>
-        <div class="article markdown">
-        <h2 id="font-class-">font-class 引用</h2>
-        <hr>
-
-        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
-        <p>与 Unicode 使用方式相比，具有如下特点：</p>
-        <ul>
-          <li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
-          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
-          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
-          <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
-        </ul>
-        <p>使用步骤如下：</p>
-        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
-<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
-</code></pre>
-        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
-<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
-</code></pre>
-        <blockquote>
-          <p>"
-            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
-        </blockquote>
-      </div>
-      </div>
-      <div class="content symbol">
-          <ul class="icon_lists dib-box">
-
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xiangyouxuanzhuan"></use>
-                </svg>
-                <div class="name">向右旋转</div>
-                <div class="code-name">#icon-xiangyouxuanzhuan</div>
-            </li>
-
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-tupian"></use>
-                </svg>
-                <div class="name">图片</div>
-                <div class="code-name">#icon-tupian</div>
-            </li>
-
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-suo"></use>
-                </svg>
-                <div class="name">锁</div>
-                <div class="code-name">#icon-suo</div>
-            </li>
-
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-juxing"></use>
-                </svg>
-                <div class="name">矩形</div>
-                <div class="code-name">#icon-juxing</div>
-            </li>
-
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-wenben"></use>
-                </svg>
-                <div class="name">文本</div>
-                <div class="code-name">#icon-wenben</div>
-            </li>
-
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-button"></use>
-                </svg>
-                <div class="name">按钮</div>
-                <div class="code-name">#icon-button</div>
-            </li>
-
-          </ul>
-          <div class="article markdown">
-          <h2 id="symbol-">Symbol 引用</h2>
-          <hr>
-
-          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
-            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
-          <ul>
-            <li>支持多色图标了，不再受单色限制。</li>
-            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
-            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
-            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
-          </ul>
-          <p>使用步骤如下：</p>
-          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
-<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
-</code></pre>
-          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
-<pre><code class="language-html">&lt;style&gt;
-.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-&lt;/style&gt;
-</code></pre>
-          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
-<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
-  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
-&lt;/svg&gt;
-</code></pre>
-          </div>
-      </div>
-
-    </div>
-  </div>
-  <script>
-  $(document).ready(function () {
-      $('.tab-container .content:first').show()
-
-      $('#tabs li').click(function (e) {
-        var tabContent = $('.tab-container .content')
-        var index = $(this).index()
-
-        if ($(this).hasClass('active')) {
-          return
-        } else {
-          $('#tabs li').removeClass('active')
-          $(this).addClass('active')
-
-          tabContent.hide().eq(index).fadeIn()
-        }
-      })
-    })
-  </script>
-</body>
-</html>
diff --git a/frontend/src/components/canvas/components/AnimationList.vue b/frontend/src/components/canvas/components/AnimationList.vue
deleted file mode 100644
index a8fe652a1a..0000000000
--- a/frontend/src/components/canvas/components/AnimationList.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<template>
-  <div class="animation-list">
-    <div class="div-animation">
-      <el-button @click="isShowAnimation = true">添加动画</el-button>
-      <el-button @click="previewAnimate">预览动画</el-button>
-      <div>
-        <el-tag
-          v-for="(tag, index) in curComponent.animations"
-          :key="index"
-          closable
-          @close="removeAnimation(index)"
-        >
-          {{ tag.label }}
-        </el-tag>
-      </div>
-    </div>
-
-    <!-- 选择动画 -->
-    <Modal v-model="isShowAnimation">
-      <el-tabs v-model="animationActiveName">
-        <el-tab-pane
-          v-for="item in animationClassData"
-          :key="item.label"
-          :label="item.label"
-          :name="item.label"
-        >
-          <el-scrollbar class="animate-container">
-            <div
-              v-for="(animate, index) in item.children"
-              :key="index"
-              class="animate"
-              @mouseover="hoverPreviewAnimate = animate.value"
-              @click="addAnimation(animate)"
-            >
-              <div :class="[hoverPreviewAnimate === animate.value && animate.value + ' animated']">
-                {{ animate.label }}
-              </div>
-            </div>
-          </el-scrollbar>
-        </el-tab-pane>
-      </el-tabs>
-    </Modal>
-  </div>
-</template>
-
-<script>
-import Modal from '@/components/canvas/components/Modal'
-import eventBus from '@/components/canvas/utils/eventBus'
-import animationClassData from '@/components/canvas/utils/animationClassData'
-import { mapState } from 'vuex'
-
-export default {
-  components: { Modal },
-  data() {
-    return {
-      isShowAnimation: false,
-      hoverPreviewAnimate: '',
-      animationActiveName: '进入',
-      animationClassData,
-      showAnimatePanel: false
-    }
-  },
-  computed: mapState([
-    'curComponent'
-  ]),
-  methods: {
-    addAnimation(animate) {
-      this.$store.commit('addAnimation', animate)
-      this.isShowAnimation = false
-    },
-
-    previewAnimate() {
-      eventBus.$emit('runAnimation')
-    },
-
-    removeAnimation(index) {
-      this.$store.commit('removeAnimation', index)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.animation-list {
-    .div-animation {
-        text-align: center;
-
-        & > div {
-            margin-top: 20px;
-        }
-
-        .el-tag {
-            display: block;
-            width: 50%;
-            margin: auto;
-            margin-bottom: 10px;
-        }
-    }
-
-    .el-scrollbar__view {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        padding-left: 10px;
-
-        .animate > div {
-            width: 100px;
-            height: 60px;
-            background: #f5f8fb;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 12px;
-            margin-bottom: 10px;
-            font-size: 12px;
-            color: #333;
-            border-radius: 3px;
-            user-select: none;
-            cursor: pointer;
-        }
-    }
-}
-</style>
diff --git a/frontend/src/components/canvas/components/AttrList.vue b/frontend/src/components/canvas/components/AttrList.vue
deleted file mode 100644
index fd5486f318..0000000000
--- a/frontend/src/components/canvas/components/AttrList.vue
+++ /dev/null
@@ -1,153 +0,0 @@
-<!-- TODO: 这个页面后续将用 JSX 重构 -->
-<template>
-  <div class="attr-list">
-    <el-form>
-      <el-form-item
-        v-for="(key, index) in styleKeys.filter(item => item != 'rotate')"
-        :key="index"
-        :label="map[key]"
-      >
-        <el-color-picker
-          v-if="key == 'borderColor'"
-          v-model="curComponent.style[key]"
-        />
-        <el-color-picker
-          v-else-if="key == 'color'"
-          v-model="curComponent.style[key]"
-        />
-        <el-color-picker
-          v-else-if="key == 'backgroundColor'"
-          v-model="curComponent.style[key]"
-        />
-        <el-select
-          v-else-if="selectKey.includes(key)"
-          v-model="curComponent.style[key]"
-        >
-          <template v-if="key == 'textAlign'">
-            <el-option
-              v-for="item in textAlignOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </template>
-          <template v-else-if="key == 'borderStyle'">
-            <el-option
-              v-for="item in borderStyleOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </template>
-          <template v-else>
-            <el-option
-              v-for="item in verticalAlignOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </template>
-        </el-select>
-        <el-input
-          v-else
-          v-model="curComponent.style[key]"
-          type="number"
-        />
-      </el-form-item>
-      <el-form-item
-        v-if="curComponent && !excludes.includes(curComponent.component)"
-        :label="$t('panel.content')"
-      >
-        <el-input
-          v-model="curComponent.propValue"
-          type="textarea"
-        />
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      excludes: ['Picture', 'Group', 'user-view'], // 这些组件不显示内容
-      textAlignOptions: [
-        {
-          label: this.$t('panel.text_align_left'),
-          value: 'left'
-        },
-        {
-          label: this.$t('panel.text_align_center'),
-          value: 'center'
-        },
-        {
-          label: this.$t('panel.text_align_right'),
-          value: 'right'
-        }
-      ],
-      borderStyleOptions: [
-        {
-          label: this.$t('panel.border_style_solid'),
-          value: 'solid'
-        },
-        {
-          label: this.$t('panel.border_style_dashed'),
-          value: 'dashed'
-        }
-      ],
-      verticalAlignOptions: [
-        {
-          label: this.$t('panel.vertical_align_top'),
-          value: 'top'
-        },
-        {
-          label: this.$t('panel.vertical_align_middle'),
-          value: 'middle'
-        },
-        {
-          label: this.$t('panel.vertical_align_bottom'),
-          value: 'bottom'
-        }
-      ],
-      selectKey: ['textAlign', 'borderStyle', 'verticalAlign'],
-      map: {
-        left: this.$t('panel.left'),
-        top: this.$t('panel.top'),
-        height: this.$t('panel.height'),
-        width: this.$t('panel.width'),
-        color: this.$t('panel.color'),
-        backgroundColor: this.$t('panel.backgroundColor'),
-        borderStyle: this.$t('panel.borderStyle'),
-        borderWidth: this.$t('panel.borderWidth'),
-        borderColor: this.$t('panel.borderColor'),
-        borderRadius: this.$t('panel.borderRadius'),
-        fontSize: this.$t('panel.fontSize'),
-        fontWeight: this.$t('panel.fontWeight'),
-        lineHeight: this.$t('panel.lineHeight'),
-        letterSpacing: this.$t('panel.letterSpacing'),
-        textAlign: this.$t('panel.textAlign'),
-        opacity: this.$t('panel.opacity'),
-        verticalAlign: this.$t('panel.verticalAlign')
-      }
-    }
-  },
-  computed: {
-    styleKeys() {
-      return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : []
-    },
-    curComponent() {
-      return this.$store.state.curComponent
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .attr-list {
-    overflow: auto;
-    padding: 20px;
-    padding-top: 0;
-    height: 100%;
-  }
-</style>
diff --git a/frontend/src/components/canvas/components/AttrListExtend.vue b/frontend/src/components/canvas/components/AttrListExtend.vue
deleted file mode 100644
index deedb76788..0000000000
--- a/frontend/src/components/canvas/components/AttrListExtend.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<!-- TODO: 这个页面后续将用 JSX 重构 -->
-<template>
-  <div class="attr-list">
-    <el-form
-      label-width="80px"
-      size="mini"
-    >
-      <el-form-item
-        v-for="(key, index) in styleKeys.filter(item => styleFilter.includes(item))"
-        :key="index"
-        :label="map[key]+':'"
-      >
-        <el-color-picker
-          v-if="key == 'borderColor'"
-          v-model="curComponent.style[key]"
-        />
-        <el-color-picker
-          v-else-if="key == 'color'"
-          v-model="curComponent.style[key]"
-        />
-        <el-color-picker
-          v-else-if="key == 'backgroundColor'"
-          v-model="curComponent.style[key]"
-        />
-        <el-select
-          v-else-if="selectKey.includes(key)"
-          v-model="curComponent.style[key]"
-        >
-          <template v-if="key == 'textAlign'">
-            <el-option
-              v-for="item in textAlignOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </template>
-          <template v-else-if="key == 'borderStyle'">
-            <el-option
-              v-for="item in borderStyleOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </template>
-          <template v-else>
-            <el-option
-              v-for="item in verticalAlignOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            />
-          </template>
-        </el-select>
-        <el-input
-          v-else
-          v-model="curComponent.style[key]"
-          type="number"
-        />
-      </el-form-item>
-      <el-form-item :label="$t('panel.content_style')+':'">
-        <div
-          v-if="curComponent.type==='v-text'"
-          style="width: 100%;max-height: 400px;overflow: auto"
-        >
-          <VText
-            style="border: 1px solid #dcdfe6;border-radius:4px;background-color: #f7f8fa;"
-            :prop-value="curComponent.propValue"
-            :element="curComponent"
-            :edit-mode="'edit'"
-            :style="getComponentStyleDefault(curComponent.style)"
-          />
-        </div>
-        <rect-shape
-          v-if="curComponent.type==='rect-shape'"
-          style="width: 200px!important;height: 100px!important;"
-          :prop-value="curComponent.propValue"
-          :element="curComponent"
-          :style="getComponentStyleDefault(curComponent.style)"
-        />
-      </el-form-item>
-
-    </el-form>
-  </div>
-
-</template>
-
-<script>
-import VText from '@/components/canvas/customComponent/VText'
-import RectShape from '@/components/canvas/customComponent/RectShape'
-import { getStyle } from '@/components/canvas/utils/style'
-
-export default {
-  components: { VText, RectShape },
-  data() {
-    return {
-      excludes: ['Picture', 'Group', 'view'], // 这些组件不显示内容
-      textAlignOptions: [
-        {
-          label: this.$t('panel.text_align_left'),
-          value: 'left'
-        },
-        {
-          label: this.$t('panel.text_align_center'),
-          value: 'center'
-        },
-        {
-          label: this.$t('panel.text_align_right'),
-          value: 'right'
-        }
-      ],
-      borderStyleOptions: [
-        {
-          label: this.$t('panel.border_style_solid'),
-          value: 'solid'
-        },
-        {
-          label: this.$t('panel.border_style_dashed'),
-          value: 'dashed'
-        }
-      ],
-      verticalAlignOptions: [
-        {
-          label: this.$t('panel.vertical_align_top'),
-          value: 'top'
-        },
-        {
-          label: this.$t('panel.vertical_align_middle'),
-          value: 'middle'
-        },
-        {
-          label: this.$t('panel.vertical_align_bottom'),
-          value: 'bottom'
-        }
-      ],
-      selectKey: ['textAlign', 'borderStyle', 'verticalAlign'],
-      map: {
-        left: this.$t('panel.left'),
-        top: this.$t('panel.top'),
-        height: this.$t('panel.height'),
-        width: this.$t('panel.width'),
-        color: this.$t('panel.color'),
-        backgroundColor: this.$t('panel.backgroundColor'),
-        borderStyle: this.$t('panel.borderStyle'),
-        borderWidth: this.$t('panel.borderWidth'),
-        borderColor: this.$t('panel.borderColor'),
-        borderRadius: this.$t('panel.borderRadius'),
-        fontSize: this.$t('panel.fontSize'),
-        fontWeight: this.$t('panel.fontWeight'),
-        lineHeight: this.$t('panel.lineHeight'),
-        letterSpacing: this.$t('panel.letterSpacing'),
-        textAlign: this.$t('panel.textAlign'),
-        opacity: this.$t('panel.opacity'),
-        verticalAlign: this.$t('panel.verticalAlign')
-      }
-    }
-  },
-  computed: {
-    styleKeys() {
-      return this.$store.state.curComponent ? Object.keys(this.$store.state.curComponent.style) : []
-    },
-    curComponent() {
-      return this.$store.state.curComponent
-    },
-    styleFilter() {
-      const filter = [
-        'fontSize',
-        'fontWeight',
-        'lineHeight',
-        'letterSpacing',
-        'textAlign',
-        'color',
-        'borderColor',
-        'borderWidth',
-        'backgroundColor',
-        'borderStyle',
-        'verticalAlign'
-      ]
-      if (this.$store.state.curComponent.type === 'v-text') {
-        filter.push('width', 'height')
-      }
-      return filter
-    }
-  },
-  methods: {
-    getComponentStyleDefault(style) {
-      if (this.$store.state.curComponent.type === 'v-text') {
-        return getStyle(style, ['top', 'left', 'rotate'])
-      } else {
-        return getStyle(style, ['top', 'left', 'rotate', 'height', 'width'])
-      }
-      // return style
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.attr-list {
-  overflow: auto;
-  padding: 5px;
-  padding-top: 0;
-  height: 100%;
-}
-</style>
diff --git a/frontend/src/components/canvas/components/ComponentList.vue b/frontend/src/components/canvas/components/ComponentList.vue
deleted file mode 100644
index ec757d1fa2..0000000000
--- a/frontend/src/components/canvas/components/ComponentList.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div
-    class="component-list"
-    @dragstart="handleDragStart"
-  >
-    <div
-      v-for="(item, index) in componentList"
-      :key="index"
-      class="list"
-      draggable
-      :data-index="index"
-    >
-      <span
-        class="iconfont"
-        :class="'icon-' + item.icon"
-      />
-      <span>{{ item.label }}</span>
-    </div>
-  </div>
-</template>
-
-<script>
-import componentList from '@/components/canvas/customComponent/component-list'
-
-export default {
-  data() {
-    return {
-      componentList
-    }
-  },
-  methods: {
-    handleDragStart(e) {
-      e.dataTransfer.setData('index', e.target.dataset.index)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.component-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    padding: 10px;
-
-    .list {
-        width: 45%;
-        border: 1px solid #ddd;
-        cursor: grab;
-        margin-bottom: 10px;
-        text-align: center;
-        color: #333;
-        padding: 2px 5px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &:active {
-            cursor: grabbing;
-        }
-
-        .iconfont {
-            margin-right: 4px;
-            font-size: 20px;
-        }
-
-        .icon-wenben,
-        .icon-tupian {
-            font-size: 18px;
-        }
-    }
-}
-</style>
diff --git a/frontend/src/components/canvas/components/EventList.vue b/frontend/src/components/canvas/components/EventList.vue
deleted file mode 100644
index 32d9c200f6..0000000000
--- a/frontend/src/components/canvas/components/EventList.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <div class="event-list">
-    <div class="div-events">
-      <el-button @click="isShowEvent = true">添加事件</el-button>
-      <div>
-        <el-tag
-          v-for="event in Object.keys(curComponent.events)"
-          :key="event"
-          closable
-          @close="removeEvent(event)"
-        >
-          {{ event }}
-        </el-tag>
-      </div>
-    </div>
-
-    <!-- 选择事件 -->
-    <Modal v-model="isShowEvent">
-      <el-tabs v-model="eventActiveName">
-        <el-tab-pane
-          v-for="item in eventList"
-          :key="item.key"
-          :label="item.label"
-          :name="item.key"
-          style="padding: 0 20px"
-        >
-          <el-input
-            v-if="item.key == 'redirect'"
-            v-model="item.param"
-            type="textarea"
-            placeholder="请输入完整的 URL"
-          />
-          <el-input
-            v-if="item.key == 'alert'"
-            v-model="item.param"
-            type="textarea"
-            placeholder="请输入要 alert 的内容"
-          />
-          <el-button
-            style="margin-top: 20px;"
-            @click="addEvent(item.key, item.param)"
-          >确定</el-button>
-        </el-tab-pane>
-      </el-tabs>
-    </Modal>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import Modal from '@/components/canvas/components/Modal'
-import { eventList } from '@/components/canvas/utils/events'
-
-export default {
-  components: { Modal },
-  data() {
-    return {
-      isShowEvent: false,
-      eventURL: '',
-      eventActiveName: 'redirect',
-      eventList
-    }
-  },
-  computed: mapState([
-    'curComponent'
-  ]),
-  methods: {
-    addEvent(event, param) {
-      this.isShowEvent = false
-      this.$store.commit('addEvent', { event, param })
-    },
-
-    removeEvent(event) {
-      this.$store.commit('removeEvent', event)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.event-list {
-    .div-events {
-        text-align: center;
-        padding: 0 20px;
-
-        .el-button {
-            display: inline-block;
-            margin-bottom: 10px;
-        }
-
-        .el-tag {
-            display: block;
-            width: 50%;
-            margin: auto;
-            margin-bottom: 10px;
-        }
-    }
-}
-</style>
diff --git a/frontend/src/components/canvas/components/Modal.vue b/frontend/src/components/canvas/components/Modal.vue
deleted file mode 100644
index 894a51e9cb..0000000000
--- a/frontend/src/components/canvas/components/Modal.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <div
-    v-if="show"
-    class="modal-bg"
-    @click="hide"
-  >
-    <div
-      class="fadeInLeft animated modal"
-      @click="stopPropagation"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  model: {
-    prop: 'show',
-    event: 'change'
-  },
-  props: {
-    show: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    hide() {
-      this.$emit('change')
-    },
-
-    stopPropagation(e) {
-      e.stopPropagation()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.modal-bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0,0,0,.5);
-    z-index: 1001;
-
-    .modal {
-        width: 400px;
-        background: #fff;
-        height: 100%;
-    }
-}
-</style>
diff --git a/frontend/src/components/canvas/components/editor/Hyperlinks.vue b/frontend/src/components/canvas/components/editor/Hyperlinks.vue
deleted file mode 100644
index 9751e10900..0000000000
--- a/frontend/src/components/canvas/components/editor/Hyperlinks.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<template>
-
-  <el-popover
-    ref="popover"
-    width="340"
-    trigger="click"
-  >
-    <el-row>
-      <el-form
-        ref="form"
-        size="mini"
-        label-width="70px"
-      >
-        <el-form-item :label="$t('panel.enable_jump')">
-          <el-switch
-            v-model="linkInfo.enable"
-            size="mini"
-          />
-          <span
-            v-show="linkInfo.enable"
-            style="color: #909399; font-size: 8px;margin-left: 3px"
-          >
-            Tips:{{ $t('panel.link_open_tips') }}
-          </span>
-        </el-form-item>
-        <el-form-item :label="$t('panel.open_mode')">
-          <el-radio-group
-            v-model="linkInfo.openMode"
-            :disabled="!linkInfo.enable"
-          >
-            <el-radio label="_blank">{{ $t('panel.new_window') }}</el-radio>
-            <el-radio label="_self">{{ $t('panel.now_window') }}</el-radio>
-          </el-radio-group>
-        </el-form-item>
-        <el-form-item :label="$t('panel.hyperLinks')">
-          <el-input
-            v-model="linkInfo.content"
-            :disabled="!linkInfo.enable"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-button
-            type="primary"
-            @click="onSubmit"
-          >{{ $t('panel.confirm') }}</el-button>
-          <el-button @click="onClose">{{ $t('panel.cancel') }}</el-button>
-        </el-form-item>
-      </el-form>
-    </el-row>
-    <i
-      slot="reference"
-      class="icon iconfont icon-font icon-chaolianjie1"
-    />
-  </el-popover>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import { deepCopy } from '@/components/canvas/utils/utils'
-import { checkAddHttp } from '@/utils/urlUtils'
-
-export default {
-  props: {
-    linkInfo: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {
-      componentType: null,
-      linkageActiveStatus: false,
-      editFilter: [
-        'view',
-        'custom'
-      ]
-    }
-  },
-  computed: {
-    ...mapState([
-      'curComponent'
-    ])
-  },
-  methods: {
-    onSubmit() {
-      this.linkInfo.content = checkAddHttp(this.linkInfo.content)
-      this.curComponent.hyperlinks = deepCopy(this.linkInfo)
-      this.$store.commit('canvasChange')
-      this.popoverClose()
-    },
-    onClose() {
-      this.$emit('close')
-      this.popoverClose()
-    },
-    popoverClose() {
-      this.$refs.popover.showPopper = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .slot-class{
-    color: white;
-  }
-
-  .bottom {
-    margin-top: 20px;
-    text-align: center;
-
-  }
-  .ellip{
-    /*width: 100%;*/
-    margin-left: 10px;
-    margin-right: 10px;
-    overflow: hidden;/*超出部分隐藏*/
-    white-space: nowrap;/*不换行*/
-    text-overflow:ellipsis;/*超出部分文字以...显示*/
-    background-color: #f7f8fa;
-    color: #3d4d66;
-    font-size: 12px;
-    line-height: 24px;
-    height: 24px;
-    border-radius: 3px;
-  }
-
-  .select-filed{
-    /*width: 100%;*/
-    margin-left: 10px;
-    margin-right: 10px;
-    overflow: hidden;/*超出部分隐藏*/
-    white-space: nowrap;/*不换行*/
-    text-overflow:ellipsis;/*超出部分文字以...显示*/
-    color: #3d4d66;
-    font-size: 12px;
-    line-height: 35px;
-    height: 35px;
-    border-radius: 3px;
-  }
-  ::v-deep .el-popover{
-    height: 200px;
-    overflow: auto;
-  }
-  .icon-font{
-    color: white;
-  }
-
-</style>
diff --git a/frontend/src/components/canvas/components/editor/PreviewMobile.vue b/frontend/src/components/canvas/components/editor/PreviewMobile.vue
deleted file mode 100644
index bebde5aabb..0000000000
--- a/frontend/src/components/canvas/components/editor/PreviewMobile.vue
+++ /dev/null
@@ -1,295 +0,0 @@
-<template>
-  <div
-    class="bg"
-    :style="customStyle"
-  >
-    <canvas-opt-bar />
-    <div
-      id="canvasInfoMain"
-      ref="canvasInfoMain"
-      style="width: 100%;height: 100%"
-    >
-      <div
-        id="canvasInfoTemp"
-        ref="canvasInfoTemp"
-        :style="[{height:mainHeight},screenShotStyle]"
-        class="main-class"
-        @mouseup="deselectCurComponent"
-        @mousedown="handleMouseDown"
-      >
-        <el-row
-          v-if="componentDataShow.length===0"
-          style="height: 100%;"
-          class="custom-position"
-        >
-          {{ $t('panel.panelNull') }}
-        </el-row>
-        <ComponentWrapper
-          v-for="(item, index) in componentDataInfo"
-          :key="index"
-          :canvas-id="canvasId"
-          :config="item"
-          :search-count="searchCount"
-          :canvas-style-data="canvasStyleData"
-          :in-screen="inScreen"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { getStyle } from '@/components/canvas/utils/style'
-import { mapState } from 'vuex'
-import ComponentWrapper from './ComponentWrapper'
-import { changeStyleWithScale } from '@/components/canvas/utils/translate'
-import { uuid } from 'vue-uuid'
-import { deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
-import eventBus from '@/components/canvas/utils/eventBus'
-import elementResizeDetectorMaker from 'element-resize-detector'
-import CanvasOptBar from '@/components/canvas/components/editor/CanvasOptBar'
-
-export default {
-  components: { ComponentWrapper, CanvasOptBar },
-  model: {
-    prop: 'show',
-    event: 'change'
-  },
-  props: {
-    canvasId: {
-      type: String,
-      required: true
-    },
-    screenShot: {
-      type: Boolean,
-      default: false
-    },
-    show: {
-      type: Boolean,
-      default: false
-    },
-    showType: {
-      type: String,
-      required: false,
-      default: 'full'
-    },
-    inScreen: {
-      type: Boolean,
-      required: false,
-      default: true
-    }
-  },
-  data() {
-    return {
-      isShowPreview: false,
-      panelId: '',
-      needToChangeHeight: [
-        'top',
-        'height'
-      ],
-      needToChangeWidth: [
-        'left',
-        'width',
-        'fontSize',
-        'borderWidth',
-        'letterSpacing'
-      ],
-      scaleWidth: '100',
-      scaleHeight: '100',
-      timer: null,
-      componentDataShow: [],
-      mainWidth: '100%',
-      mainHeight: '100%',
-      searchCount: 0
-    }
-  },
-  computed: {
-    customStyle() {
-      let style = {
-        width: '100%'
-      }
-      if (this.canvasStyleData.openCommonStyle) {
-        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
-          style = {
-            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
-            ...style
-          }
-        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
-          style = {
-            background: this.canvasStyleData.panel.color,
-            ...style
-          }
-        }
-      }
-      return style
-    },
-    screenShotStyle() {
-      return this.screenShot ? this.customStyle : {}
-    },
-    // 此处单独计算componentData的值 不放入全局mapState中
-    componentDataInfo() {
-      return this.componentDataShow
-    },
-    ...mapState([
-      'isClickComponent',
-      'curComponent',
-      'componentData',
-      'canvasStyleData',
-      'componentGap'
-    ])
-  },
-  watch: {
-    componentData: {
-      handler(newVal, oldVla) {
-        this.restore()
-      },
-      deep: true
-    },
-    canvasStyleData: {
-      handler(newVal, oldVla) {
-        this.canvasStyleDataInit()
-      },
-      deep: true
-    }
-  },
-  mounted() {
-    const _this = this
-    const erd = elementResizeDetectorMaker()
-    // 监听div变动事件
-    const mainDom = document.getElementById('canvasInfoMain')
-    erd.listenTo(mainDom, element => {
-      _this.$nextTick(() => {
-        _this.restore()
-      })
-    })
-    // 监听div变动事件
-    const tempCanvas = document.getElementById('canvasInfoTemp')
-    erd.listenTo(tempCanvas, element => {
-      _this.$nextTick(() => {
-        // 将mainHeight 修改为px 临时解决html2canvas 截图不全的问题
-        _this.mainHeight = tempCanvas.scrollHeight + 'px!important'
-      })
-    })
-    eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
-    _this.$store.commit('clearLinkageSettingInfo', false)
-    _this.canvasStyleDataInit()
-  },
-  beforeDestroy() {
-    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
-    clearInterval(this.timer)
-  },
-  methods: {
-    canvasStyleDataInit() {
-      // 数据刷新计时器
-      this.searchCount = 0
-      this.timer && clearInterval(this.timer)
-      let refreshTime = 300000
-      if (this.canvasStyleData.refreshTime && this.canvasStyleData.refreshTime > 0) {
-        if (this.canvasStyleData.refreshUnit === 'second') {
-          refreshTime = this.canvasStyleData.refreshTime * 1000
-        } else {
-          refreshTime = this.canvasStyleData.refreshTime * 60000
-        }
-      }
-      this.timer = setInterval(() => {
-        this.searchCount++
-      }, refreshTime)
-    },
-    changeStyleWithScale,
-    getStyle,
-    restore() {
-      const canvasHeight = document.getElementById('canvasInfoMain').offsetHeight
-      const canvasWidth = document.getElementById('canvasInfoMain').offsetWidth
-      this.scaleWidth = canvasWidth * 100 / parseInt(this.canvasStyleData.width)// 获取宽度比
-      this.scaleHeight = canvasHeight * 100 / parseInt(this.canvasStyleData.height)// 获取高度比
-      this.handleScaleChange()
-    },
-    resetID(data) {
-      if (data) {
-        data.forEach(item => {
-          item.type !== 'custom' && (item.id = uuid.v1())
-        })
-      }
-      return data
-    },
-    format(value, scale) {
-      return value * parseInt(scale) / 100
-    },
-    handleScaleChange() {
-      if (this.componentData) {
-        const componentData = deepCopy(this.componentData)
-        componentData.forEach(component => {
-          Object.keys(component.style).forEach(key => {
-            if (this.needToChangeHeight.includes(key)) {
-              component.style[key] = this.format(component.style[key], this.scaleHeight)
-            }
-            if (this.needToChangeWidth.includes(key)) {
-              component.style[key] = this.format(component.style[key], this.scaleWidth)
-            }
-          })
-        })
-        this.componentDataShow = componentData
-        this.$nextTick(() => (eventBus.$emit('resizing', '')))
-      }
-    },
-    deselectCurComponent(e) {
-      if (!this.isClickComponent) {
-        this.$store.commit('setCurComponent', { component: null, index: null })
-      }
-    },
-    handleMouseDown() {
-      this.$store.commit('setClickComponentStatus', false)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.bg {
-  padding: 5px;
-  min-width: 600px;
-  min-height: 300px;
-  width: 100%;
-  height: 100%;
-  overflow-x: hidden;
-  background-size: 100% 100% !important;
-}
-
-.main-class {
-  width: 100%;
-  height: 100%;
-  background-size: 100% 100% !important;
-}
-
-.custom-position {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 14px;
-  flex-flow: row nowrap;
-  color: #9ea6b2;
-}
-
-.gap_class {
-  padding: 5px;
-}
-
-.dialog-css ::v-deep .el-dialog__title {
-  font-size: 14px;
-}
-
-.dialog-css ::v-deep .el-dialog__header {
-  padding: 40px 20px 0;
-}
-
-.dialog-css ::v-deep .el-dialog__body {
-  padding: 10px 20px 20px;
-}
-
-::-webkit-scrollbar {
-  width: 0px !important;
-  height: 0px !important;
-}
-
-</style>
diff --git a/frontend/src/components/canvas/components/editor/SettingMenuTest.vue b/frontend/src/components/canvas/components/editor/SettingMenuTest.vue
deleted file mode 100644
index 7b488f6e62..0000000000
--- a/frontend/src/components/canvas/components/editor/SettingMenuTest.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<template>
-  <div>
-    <div style="width: 100%;">
-      <el-dropdown
-        trigger="click"
-        @mouseup="handleMouseUp"
-      >
-        <el-button
-          ref="trackButton"
-          class="icon iconfont icon-shezhi"
-        >TEST</el-button>
-        <el-dropdown-menu>
-          <el-dropdown-item
-            icon="el-icon-document-copy"
-            @click.native="copy"
-          >{{ $t('panel.copy') }}</el-dropdown-item>
-          <el-dropdown-item
-            icon="el-icon-delete"
-            @click.native="deleteComponent"
-          >{{ $t('panel.delete') }}</el-dropdown-item>
-          <el-dropdown-item
-            icon="el-icon-upload2"
-            @click.native="topComponent"
-          >{{ $t('panel.topComponent') }}</el-dropdown-item>
-          <el-dropdown-item
-            icon="el-icon-download"
-            @click.native="bottomComponent"
-          >{{ $t('panel.bottomComponent') }}</el-dropdown-item>
-          <el-dropdown-item
-            icon="el-icon-arrow-up"
-            @click.native="upComponent"
-          >{{ $t('panel.upComponent') }}</el-dropdown-item>
-          <el-dropdown-item
-            icon="el-icon-arrow-down"
-            @click.native="downComponent"
-          >{{ $t('panel.downComponent') }}</el-dropdown-item>
-          <el-dropdown-item
-            icon="el-icon-link"
-            @click.native="linkageSetting"
-          >联动设置</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import bus from '@/utils/bus'
-import { getViewLinkageGather } from '@/api/panel/linkage'
-
-export default {
-  data() {
-    return {
-      copyData: null,
-      editFilter: [
-        'view',
-        'custom'
-      ]
-    }
-  },
-  computed: mapState([
-    'menuTop',
-    'menuLeft',
-    'menuShow',
-    'curComponent',
-    'componentData',
-    'canvasStyleData'
-  ]),
-  methods: {
-    trackButtonClick() {
-      this.$refs.trackButton.click()
-      this.$refs.trackButton.$el.click()
-    },
-    edit() {
-      if (this.curComponent.type === 'view') {
-        this.$store.dispatch('chart/setViewId', null)
-        this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
-        bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
-      }
-      if (this.curComponent.type === 'custom') {
-        bus.$emit('component-dialog-edit')
-      }
-
-      // 编辑样式组件
-
-      if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
-        bus.$emit('component-dialog-style')
-      }
-    },
-    lock() {
-      this.$store.commit('lock')
-    },
-
-    unlock() {
-      this.$store.commit('unlock')
-    },
-
-    // 点击菜单时不取消当前组件的选中状态
-    handleMouseUp() {
-      this.$store.commit('setClickComponentStatus', true)
-    },
-
-    cut() {
-      this.deleteCurCondition()
-      this.$store.commit('cut')
-    },
-
-    copy() {
-      this.$store.commit('copy')
-      this.paste()
-    },
-
-    paste() {
-      this.$store.commit('paste', true)
-      this.$store.commit('recordSnapshot')
-    },
-
-    deleteComponent() {
-      this.deleteCurCondition()
-      this.$store.commit('deleteComponent')
-      this.$store.commit('recordSnapshot')
-      this.$store.commit('setCurComponent', { component: null, index: null })
-    },
-
-    deleteCurCondition() {
-      if (this.curComponent.type === 'custom') {
-        this.$store.commit('removeViewFilter', this.curComponent.id)
-        bus.$emit('delete-condition', { componentId: this.curComponent.id })
-      }
-    },
-
-    upComponent() {
-      this.$store.commit('upComponent')
-      this.$store.commit('recordSnapshot')
-    },
-
-    downComponent() {
-      this.$store.commit('downComponent')
-      this.$store.commit('recordSnapshot')
-    },
-
-    topComponent() {
-      this.$store.commit('topComponent')
-      this.$store.commit('recordSnapshot')
-    },
-
-    bottomComponent() {
-      this.$store.commit('bottomComponent')
-      this.$store.commit('recordSnapshot')
-    },
-    linkageSetting() {
-      // sourceViewId 也加入查询
-      const targetViewIds = this.componentData.filter(item => item.type === 'view' && item.propValue && item.propValue.viewId)
-        .map(item => item.propValue.viewId)
-
-      // 获取当前仪表板当前视图联动信息
-      const requestInfo = {
-        'panelId': this.$store.state.panel.panelInfo.id,
-        'sourceViewId': this.curComponent.propValue.viewId,
-        'targetViewIds': targetViewIds
-      }
-      getViewLinkageGather(requestInfo).then(rsp => {
-        this.$store.commit('setLinkageInfo', rsp.data)
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .contextmenu {
-    position: absolute;
-    z-index: 1000;
-
-    ul {
-      border: 1px solid #e4e7ed;
-      border-radius: 4px;
-      background-color: #fff;
-      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
-      box-sizing: border-box;
-      margin: 5px 0;
-      padding: 6px 0;
-
-      li {
-        font-size: 14px;
-        padding: 0 20px;
-        position: relative;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        color: #606266;
-        height: 34px;
-        line-height: 34px;
-        box-sizing: border-box;
-        cursor: pointer;
-
-        &:hover {
-         background-color: var(--background-color-base, #f5f7fa);
-        }
-      }
-    }
-  }
-</style>
diff --git a/frontend/src/components/canvas/components/editor/index.vue b/frontend/src/components/canvas/components/editor/index.vue
deleted file mode 100644
index 913e10f2e1..0000000000
--- a/frontend/src/components/canvas/components/editor/index.vue
+++ /dev/null
@@ -1,1896 +0,0 @@
-<template>
-  <div
-    v-if="editShow"
-    id="editor"
-    class="editor"
-    :class="[
-      {
-        ['edit']: isEdit ,
-        ['parent_transform']:!dialogVisible
-      }
-    ]"
-    :style="editStyle"
-    @mousedown="handleMouseDown"
-    @scroll="canvasScroll"
-  >
-    <!-- 网格线 -->
-    <Grid
-      v-if="showGrid"
-      :matrix-style="matrixStyle"
-    />
-    <PGrid
-      v-if="psDebug"
-      :position-box="positionBoxInfoArray"
-      :matrix-style="matrixStyle"
-    />
-    <!--页面组件列表展示-->
-    <de-drag
-      v-for="(item, index) in componentData"
-      ref="deDragRef"
-      :key="item.id"
-      :class="{item:true,moveAnimation:moveAnimate,movingItem:item.isPlayer}"
-      :index="index"
-      :x="getShapeStyleIntDeDrag(item.style,'left')"
-      :y="getShapeStyleIntDeDrag(item.style,'top')"
-      :w="getShapeStyleIntDeDrag(item.style,'width')"
-      :h="getShapeStyleIntDeDrag(item.style,'height')"
-      :r="item.style.rotate"
-      :parent="true"
-      :rotatable="rotatable"
-      :default-style="getShapeStyleInt(item.style)"
-      :active="item === curComponent"
-      :element="item"
-      class-name-active="de-drag-active"
-      :snap="true"
-      :snap-tolerance="2"
-      :change-style="customStyle"
-      :draggable="deDraggable"
-      :resizable="deResizable"
-      :linkage-active="linkageActiveCheck(item)"
-      :batch-opt-active="batchOptActiveCheck(item)"
-      @refLineParams="getRefLineParams"
-      @showViewDetails="showViewDetails($event,index)"
-      @resizeView="resizeView(index,item)"
-      @onResizeStart="startResize"
-      @onDragStart="onStartMove"
-      @onHandleUp="onMouseUp"
-      @onDragging="onDragging"
-      @onResizing="onResizing"
-      @elementMouseDown="containerMouseDown"
-      @amRemoveItem="removeItem(item._dragId)"
-      @amAddItem="addItemBox(item)"
-      @linkJumpSet="linkJumpSet(item)"
-      @boardSet="boardSet(item)"
-      @canvasDragging="canvasDragging"
-      @editComponent="editComponent(index,item)"
-    >
-      <de-out-widget
-        v-if="renderOk && item.type==='custom'"
-        :id="'component' + item.id"
-        ref="wrapperChild"
-        class="component"
-        :style="getComponentStyleDefault(item.style)"
-        :prop-value="item.propValue"
-        :element="item"
-        :is-relation="searchButtonInfo && searchButtonInfo.buttonExist && searchButtonInfo.relationFilterIds.includes(item.id)"
-        :out-style="getShapeStyleInt(item.style)"
-        :active="item === curComponent"
-        :h="getShapeStyleIntDeDrag(item.style,'height')"
-      />
-      <component
-        :is="item.component"
-        v-else-if="renderOk && item.type==='other'"
-        :id="'component' + item.id"
-        ref="wrapperChild"
-        class="component"
-        :style="getComponentStyle(item.style)"
-        :prop-value="item.propValue"
-        :element="item"
-        :out-style="getShapeStyleInt(item.style)"
-        :active="item === curComponent"
-      />
-      <component
-        :is="item.component"
-        v-else-if="renderOk"
-        :id="'component' + item.id"
-        ref="wrapperChild"
-        class="component"
-        :filters="filterMap[item.propValue && item.propValue.viewId]"
-        :style="getComponentStyleDefault(item.style)"
-        :prop-value="item.propValue"
-        :element="item"
-        :out-style="getShapeStyleInt(item.style)"
-        :active="item === curComponent"
-        :edit-mode="'edit'"
-        :h="getShapeStyleIntDeDrag(item.style,'height')"
-        :canvas-style-data="canvasStyleData"
-        @input="handleInput"
-        @trigger-plugin-edit="pluginEditHandler"
-      />
-    </de-drag>
-    <!--拖拽阴影部分-->
-    <!--    <drag-shadow v-if="(curComponent&&this.curComponent.optStatus.dragging)||dragComponentInfo" />-->
-    <drag-shadow
-      v-if="(curComponent&&curComponent.auxiliaryMatrix&&(curComponent.optStatus.dragging||curComponent.optStatus.resizing))||(dragComponentInfo)"
-    />
-    <!-- 右击菜单 -->
-    <ContextMenu />
-    <!-- 标线 (临时去掉标线 吸附等功能)-->
-    <!--    <MarkLine />-->
-    <!-- 选中区域 -->
-    <!--    <Area v-show="isShowArea" :start="start" :width="width" :height="height" />-->
-
-    <span
-      v-for="(item, index) in vLine"
-      v-show="item.display"
-      :key="'v_'+index"
-      class="ref-line v-line"
-      :style="{
-        left: item.position,
-        top: item.origin,
-        height: item.lineLength,
-      }"
-    />
-    <span
-      v-for="(item, index) in hLine"
-      :key="'h_'+index"
-      class="ref-line h-line"
-      :style="{ top: item.position, left: item.origin, width: item.lineLength }"
-    />
-
-    <!--视图详情-->
-    <el-dialog
-      :visible.sync="chartDetailsVisible"
-      width="80%"
-      class="dialog-css"
-      :destroy-on-close="true"
-      :show-close="true"
-      top="5vh"
-    >
-      <span
-        v-if="chartDetailsVisible"
-        style="position: absolute;right: 70px;top:15px"
-      >
-        <el-button
-          v-if="showChartInfoType==='enlarge' && showChartInfo && showChartInfo.type !== 'symbol-map'"
-          class="el-icon-picture-outline"
-          size="mini"
-          @click="exportViewImg"
-        >
-          {{ $t('chart.export_img') }}
-        </el-button>
-        <el-button
-          v-if="showChartInfoType==='details'"
-          size="mini"
-          @click="exportExcel"
-        >
-          <svg-icon
-            icon-class="ds-excel"
-            class="ds-icon-excel"
-          />{{ $t('chart.export') }}Excel
-        </el-button>
-      </span>
-      <UserViewDialog
-        v-if="chartDetailsVisible"
-        ref="userViewDialog"
-        :chart="showChartInfo"
-        :chart-table="showChartTableInfo"
-        :canvas-style-data="canvasStyleData"
-        :open-type="showChartInfoType"
-      />
-    </el-dialog>
-
-    <el-dialog
-      :visible.sync="linkJumpSetVisible"
-      width="900px"
-      class="dialog-css"
-      :show-close="true"
-      :destroy-on-close="true"
-      :append-to-body="true"
-    >
-      <LinkJumpSet
-        v-if="linkJumpSetVisible"
-        :view-id="linkJumpSetViewId"
-        @closeJumpSetDialog="closeJumpSetDialog"
-      />
-    </el-dialog>
-
-    <el-dialog
-      :visible.sync="boardSetVisible"
-      width="750px"
-      class="dialog-css"
-      :close-on-click-modal="false"
-      :show-close="false"
-      :destroy-on-close="true"
-      :append-to-body="true"
-    >
-      <background
-        v-if="boardSetVisible"
-        @backgroundSetClose="backgroundSetClose"
-      />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import Shape from './Shape'
-import DeDrag from '@/components/deDrag'
-
-// eslint-disable-next-line no-unused-vars
-import { getComponentRotatedStyle, getStyle } from '@/components/canvas/utils/style'
-import { _$, deepCopy, imgUrlTrans } from '@/components/canvas/utils/utils'
-import ContextMenu from './ContextMenu'
-import MarkLine from './MarkLine'
-import Area from './Area'
-import eventBus from '@/components/canvas/utils/eventBus'
-import Grid from './Grid'
-import PGrid from './PGrid'
-import { changeStyleWithScale } from '@/components/canvas/utils/translate'
-import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
-import DeOutWidget from '@/components/dataease/DeOutWidget'
-import DragShadow from '@/components/deDrag/shadow'
-import bus from '@/utils/bus'
-import LinkJumpSet from '@/views/panel/linkJumpSet'
-import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
-// 挤占式画布
-import _ from 'lodash'
-import $ from 'jquery'
-import Background from '@/views/background/index'
-
-let positionBox = []
-let coordinates = [] // 坐标点集合
-
-let lastTask
-let isOverlay = false // 是否正在交换位置
-let moveTime = 80 // 移动动画时间
-
-let itemMaxY = 0
-let itemMaxX = 0
-
-function debounce(func, time) {
-  if (!isOverlay) {
-    (function(t) {
-      isOverlay = true
-      setTimeout(function() {
-        t()
-        setTimeout(function() {
-          isOverlay = false
-          if (lastTask !== undefined) {
-            debounce(lastTask, time)
-          }
-        }, moveTime)
-      }, time)
-    })(func)
-    lastTask = undefined
-  } else {
-    lastTask = func
-  }
-}
-
-function scrollScreen(e) {
-  if (e.clientY + 50 >= window.innerHeight) {
-    const body = $(document.body)
-    body.scrollTop(body.scrollTop() + 20)
-  } else if (e.clientY <= 150) {
-    const body = $(document.body)
-    body.scrollTop(body.scrollTop() - 20)
-  }
-}
-
-/**
- * 重置位置盒子
- *
- */
-function resetPositionBox() {
-  // 根据当前容器的宽度来决定多少列
-  itemMaxX = this.maxCell
-  const rows = this.matrixCount.y // 初始100行，后面根据需求会自动增加
-  for (let i = 0; i < rows; i++) {
-    const row = []
-    for (let j = 0; j < this.maxCell; j++) {
-      row.push({
-        el: false
-      })
-    }
-    positionBox.push(row)
-  }
-}
-
-/**
- * 填充位置盒子
- *
- * @param {any} item
- */
-function addItemToPositionBox(item) {
-  try {
-    const pb = positionBox
-    if (item.x <= 0 || item.y <= 0) return
-
-    for (let i = item.x - 1; i < item.x - 1 + item.sizex; i++) {
-      for (let j = item.y - 1; j < item.y - 1 + item.sizey; j++) {
-        if (pb[j][i]) {
-          pb[j][i].el = item
-        }
-      }
-    }
-  } catch (e) {
-    // igonre
-  }
-}
-
-function fillPositionBox(maxY) {
-  const pb = positionBox
-  maxY += 1
-  for (let j = 0; j < maxY; j++) {
-    if (pb[j] === undefined) {
-      const row = []
-      for (let i = 0; i < itemMaxX; i++) {
-        row.push({
-          el: false
-        })
-      }
-      pb.push(row)
-    }
-  }
-  itemMaxY = maxY
-}
-
-function removeItemFromPositionBox(item) {
-  const pb = positionBox
-  if (!item || item.x <= 0 || item.y <= 0) return
-  for (let i = item.x - 1; i < item.x - 1 + item.sizex; i++) {
-    for (let j = item.y - 1; j < item.y - 1 + item.sizey; j++) {
-      if (pb[j][i]) {
-        pb[j][i].el = false
-      }
-    }
-  }
-}
-
-/**
- * 重新计算宽度，使最小单元格能占满整个容器
- *
- */
-function recalcCellWidth() {
-  this.maxCell = this.matrixCount.x
-}
-
-function init() {
-  this.cellWidth = this.baseWidth + this.baseMarginLeft
-  this.cellHeight = this.baseHeight + this.baseMarginTop
-  this.yourList = this.getList()
-
-  positionBox = []
-  coordinates = [] // 坐标点集合
-
-  lastTask = undefined
-  isOverlay = false // 是否正在交换位置
-  moveTime = 80 // 移动动画时间
-
-  itemMaxY = 0
-  itemMaxX = 0
-
-  const vm = this
-  recalcCellWidth.call(this)
-  resetPositionBox.call(this)
-  initPosition(this)
-  let i = 0
-  const timeid = setInterval(function() {
-    if (i >= vm.yourList.length) {
-      clearInterval(timeid)
-      vm.$nextTick(function() {
-        vm.moveAnimate = true
-      })
-    } else {
-      const item = vm.yourList[i]
-      addItem.call(vm, item, i)
-      i++
-    }
-  }, 1)
-  vm.renderOk = true
-}
-
-function resizePlayer(item, newSize) {
-  const vm = this
-  removeItemFromPositionBox(item)
-
-  const belowItems = findBelowItems.call(this, item)
-  _.forEach(belowItems, function(upItem) {
-    const canGoUpRows = canItemGoUp(upItem)
-    if (canGoUpRows > 0) {
-      moveItemUp.call(vm, upItem, canGoUpRows)
-    }
-  })
-
-  item.sizex = newSize.sizex
-  item.sizey = newSize.sizey
-
-  // 还原到像素
-  item.style.width = item.sizex * this.matrixStyle.originWidth
-  item.style.height = item.sizey * this.matrixStyle.originHeight
-
-  if (item.sizex + item.x - 1 > itemMaxX) {
-    item.sizex = itemMaxX - item.x + 1
-  }
-
-  if (item.sizey + item.y > itemMaxY) {
-    fillPositionBox.call(this, item.y + item.sizey)
-  }
-
-  emptyTargetCell.call(this, item)
-  addItemToPositionBox.call(this, item)
-  changeItemCoord.call(this, item)
-  const canGoUpRows = canItemGoUp(item)
-  if (canGoUpRows > 0) {
-    moveItemUp.call(this, item, canGoUpRows)
-  }
-}
-
-/**
- * 检查移动的位置，如果不合法，会自动修改
- *
- * @param {any} item
- * @param {any} position
- */
-function checkItemPosition(item, position) {
-  position = position || {}
-  position.x = position.x || item.x
-  position.y = position.y || item.y
-
-  // 检查位置
-  if (item.x < 1) {
-    item.x = 1
-  }
-
-  // 检查大小
-  if (item.sizex > itemMaxX) {
-    item.sizex = itemMaxX
-  }
-
-  if (item.sizex < 1) {
-    item.sizex = 1
-  }
-
-  if (item.x + item.sizex - 1 > itemMaxX) {
-    item.x = itemMaxX - item.sizex + 1
-    if (item.x < 1) {
-      item.x = 1
-    }
-  }
-
-  if (item.y < 1) {
-    item.y = 1
-  }
-
-  if (item.sizey < 1) {
-    item.sizey = 1
-  }
-
-  if (item.y + item.sizey > itemMaxY - 1) {
-    fillPositionBox.call(this, item.y + item.sizey - 1)
-  }
-}
-
-/**
- * 移动正在拖动的元素
- *
- * @param {any} item
- * @param {any} position
- */
-function movePlayer(item, position) {
-  const vm = this
-  removeItemFromPositionBox(item)
-
-  const belowItems = findBelowItems.call(this, item)
-  _.forEach(belowItems, function(upItem) {
-    const canGoUpRows = canItemGoUp(upItem)
-    if (canGoUpRows > 0) {
-      moveItemUp.call(vm, upItem, canGoUpRows)
-    }
-  })
-
-  item.x = position.x
-  item.y = position.y
-  checkItemPosition.call(this, item, position)
-  emptyTargetCell.call(this, item)
-  addItemToPositionBox.call(this, item)
-  changeItemCoord.call(this, item)
-  const canGoUpRows = canItemGoUp(item)
-  if (canGoUpRows > 0) {
-    moveItemUp.call(this, item, canGoUpRows)
-  }
-}
-
-function removeItem(index) {
-  try {
-    const vm = this
-    const item = this.yourList[index]
-    removeItemFromPositionBox(item)
-
-    const belowItems = findBelowItems.call(this, item)
-    _.forEach(belowItems, function(upItem) {
-      const canGoUpRows = canItemGoUp(upItem)
-      if (canGoUpRows > 0) {
-        moveItemUp.call(vm, upItem, canGoUpRows)
-      }
-    })
-    this.yourList.splice(index, 1, {})
-    // eslint-disable-next-line
-  } catch (e) {
-  }
-}
-
-// 矩阵设计初始化的时候 预占位，防止编辑仪表板页面，初始化和视图编辑返回时出现组件位置变化问题
-function initPosition(_this) {
-  _this.yourList.forEach(item => {
-    fillPositionBox.call(_this, item.y + item.sizey)
-    addItemToPositionBox.call(_this, item)
-  })
-}
-
-function addItem(item, index) {
-  if (index < 0) {
-    index = this.yourList.length
-  }
-  item._dragId = index
-  checkItemPosition.call(this, item, {
-    x: item.x,
-    y: item.y
-  })
-
-  emptyTargetCell.call(this, item)
-  addItemToPositionBox.call(this, item)
-  const canGoUpRows = canItemGoUp(item)
-  if (canGoUpRows > 0) {
-    moveItemUp.call(this, item, canGoUpRows)
-  }
-  // 生成坐标点
-  // makeCoordinate.call(this, item);
-}
-
-// eslint-disable-next-line no-unused-vars
-function changeToCoord(left, top, width, height) {
-  return {
-    x1: left,
-    x2: left + width,
-    y1: top,
-    y2: top + height,
-    c1: left + width / 2,
-    c2: top + height / 2
-  }
-}
-
-/**
- * 检测有无碰撞，并作出处理
- *
- * @param {any} tCoord 比对对象的坐标
- */
-// eslint-disable-next-line no-unused-vars
-function findClosetCoords(item, tCoord) {
-  if (isOverlay) return
-  let i = coordinates.length
-  let collisionsItem = []
-  while (i--) {
-    const nowCoord = coordinates[i]
-    if (item._dragId === nowCoord.el._dragId) {
-      continue
-    }
-
-    if (tCoord.x2 < nowCoord.x1 || tCoord.x1 > nowCoord.x2 || tCoord.y2 < nowCoord.y1 || tCoord.y1 > nowCoord.y2) {
-      continue
-    } else {
-      collisionsItem.push({
-        centerDistance: Math.sqrt(Math.pow(tCoord.c1 - nowCoord.c1, 2) + Math.pow(tCoord.c2 - nowCoord.c2, 2)),
-        coord: nowCoord
-      })
-    }
-  }
-
-  if (collisionsItem.length <= 0) {
-    return
-  }
-
-  isOverlay = true
-
-  collisionsItem = _.sortBy(collisionsItem, 'area')
-
-  movePlayer.call(this, item, {
-    x: collisionsItem[0].coord.el.x,
-    y: collisionsItem[0].coord.el.y
-  })
-
-  setTimeout(function() {
-    isOverlay = false
-  }, 200)
-}
-
-/**
- * 生成坐标点
- *
- * @param {any} item
- */
-// eslint-disable-next-line no-unused-vars
-function makeCoordinate(item) {
-  const width = this.cellWidth * (item.sizex) - this.baseMarginLeft
-  const height = this.cellHeight * (item.sizey) - this.baseMarginTop
-  const left = this.cellWidth * (item.x - 1) + this.baseMarginLeft
-  const top = this.cellHeight * (item.y - 1) + this.baseMarginTop
-
-  const coord = {
-    x1: left,
-    x2: left + width,
-    y1: top,
-    y2: top + height,
-    c1: left + width / 2,
-    c2: top + height / 2,
-    el: item
-  }
-
-  coordinates.push(coord)
-}
-
-function changeItemCoord(item) {
-  const width = this.cellWidth * (item.sizex) - this.baseMarginLeft
-  const height = this.cellHeight * (item.sizey) - this.baseMarginTop
-  const left = this.cellWidth * (item.x - 1) + this.baseMarginLeft
-  const top = this.cellHeight * (item.y - 1) + this.baseMarginTop
-
-  const coord = {
-    x1: left,
-    x2: left + width,
-    y1: top,
-    y2: top + height,
-    c1: left + width / 2,
-    c2: top + height / 2,
-    el: item
-  }
-
-  const index = _.findIndex(coordinates, function(o) {
-    return o.el._dragId === item._dragId
-  })
-  if (index !== -1) {
-    coordinates.splice(index, 1, coord)
-  }
-}
-
-/**
- * 清空目标位置的元素
- *
- * @param {any} item
- */
-function emptyTargetCell(item) {
-  const vm = this
-  const belowItems = findBelowItems(item)
-
-  _.forEach(belowItems, function(downItem, index) {
-    if (downItem._dragId === item._dragId) return
-    const moveSize = item.y + item.sizey - downItem.y
-    if (moveSize > 0) {
-      moveItemDown.call(vm, downItem, moveSize)
-    }
-  })
-}
-
-/**
- * 当前位置的item能否上浮
- *
- * @param {any} item
- * @returns
- */
-function canItemGoUp(item) {
-  let upperRows = 0
-  for (let row = item.y - 2; row >= 0; row--) {
-    for (let cell = item.x - 1; cell < item.x - 1 + item.sizex; cell++) {
-      if (positionBox[row][cell] && positionBox[row][cell].el) {
-        return upperRows
-      }
-    }
-    upperRows++
-  }
-
-  return upperRows
-}
-
-/**
- * 在移动之前，找到当前下移的元素的下面的元素（递归）
- *
- * @param {any} items
- * @param {any} size
- */
-function moveItemDown(item, size) {
-  const vm = this
-  removeItemFromPositionBox(item)
-  const belowItems = findBelowItems(item)
-  _.forEach(belowItems, function(downItem, index) {
-    if (downItem._dragId === item._dragId) return
-    const moveSize = calcDiff(item, downItem, size)
-    if (moveSize > 0) {
-      moveItemDown.call(vm, downItem, moveSize)
-    }
-  })
-  const targetPosition = {
-    y: item.y + size
-  }
-  setPlayerPosition.call(this, item, targetPosition)
-  checkItemPosition.call(this, item, targetPosition)
-  addItemToPositionBox.call(this, item)
-  changeItemCoord.call(this, item)
-}
-
-function setPlayerPosition(item, position) {
-  position = position || {}
-  const targetX = position.x || item.x
-  const targetY = position.y || item.y
-
-  item.x = targetX
-  item.y = targetY
-
-  // 还原到像素
-  item.style.left = ((item.x - 1) * this.matrixStyle.width) / this.scalePointWidth
-  item.style.top = ((item.y - 1) * this.matrixStyle.height) / this.scalePointHeight
-  if (item.y + item.sizey > itemMaxY) {
-    itemMaxY = item.y + item.sizey
-  }
-}
-
-/**
- * 寻找子元素到父元素的最大距离
- *
- * @param {any} parent
- * @param {any} son
- * @param {any} size
- */
-function calcDiff(parent, son, size) {
-  const diffs = []
-
-  for (let i = son.x - 1; i < son.x - 1 + son.sizex; i++) {
-    let temp_y = 0
-
-    for (let j = parent.y - 1 + parent.sizey; j < son.y - 1; j++) {
-      if (positionBox[j][i] && positionBox[j][i].el === false) {
-        temp_y++
-      }
-    }
-    diffs.push(temp_y)
-  }
-
-  const max_diff = Math.max.apply(Math, diffs)
-  size = size - max_diff
-
-  return size > 0 ? size : 0
-}
-
-function moveItemUp(item, size) {
-  const vm = this
-
-  removeItemFromPositionBox(item)
-
-  const belowItems = findBelowItems.call(this, item)
-  setPlayerPosition.call(this, item, {
-    y: item.y - size
-  })
-
-  addItemToPositionBox.call(this, item)
-
-  changeItemCoord.call(this, item)
-
-  _.forEach(belowItems, function(upItem, index) {
-    const moveSize = canItemGoUp(upItem)
-    if (moveSize > 0) {
-      moveItemUp.call(vm, upItem, moveSize)
-    }
-  })
-}
-
-function findBelowItems(item) {
-  const belowItems = {}
-  for (let cell = item.x - 1; cell < item.x - 1 + item.sizex; cell++) {
-    for (let row = item.y - 1; row < positionBox.length; row++) {
-      try {
-        const target = positionBox[row][cell]
-        if (target && target.el) {
-          belowItems[target.el._dragId] = target.el
-          break
-        }
-      } catch (e) {
-        console.error('positionBox igonre', e)
-      }
-    }
-  }
-
-  return _.sortBy(_.values(belowItems), 'y')
-}
-
-// eslint-disable-next-line no-unused-vars
-function getoPsitionBox() {
-  return positionBox
-}
-
-export default {
-  components: {
-    Background,
-    Shape,
-    ContextMenu,
-    MarkLine,
-    // eslint-disable-next-line
-    Area,
-    Grid,
-    PGrid,
-    DeDrag,
-    UserViewDialog,
-    DeOutWidget,
-    DragShadow,
-    LinkJumpSet
-  },
-  props: {
-    isEdit: {
-      type: Boolean,
-      require: false,
-      default: true
-    },
-    outStyle: {
-      type: Object,
-      require: false,
-      default: null
-    },
-    // 挤占式画布设计
-    dragStart: {
-      required: false,
-      type: Function,
-      default: function() {
-      }
-    },
-    dragging: {
-      required: false,
-      type: Function,
-      default: function() {
-      }
-    },
-    dragEnd: {
-      required: false,
-      type: Function,
-      default: function() {
-      }
-    },
-    resizable: {
-      required: false,
-      type: Boolean,
-      default: true
-    },
-    resizeStart: {
-      required: false,
-      type: Function,
-      default: function() {
-      }
-    },
-    resizing: {
-      required: false,
-      type: Function,
-      default: function() {
-      }
-    },
-    resizeEnd: {
-      required: false,
-      type: Function,
-      default: function() {
-      }
-    },
-    matrixCount: {
-      required: true,
-      type: Object
-    },
-    scrollTop: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      boardSetVisible: false,
-      psDebug: false, // 定位调试模式
-      editorX: 0,
-      editorY: 0,
-      start: { // 选中区域的起点
-        x: 0,
-        y: 0
-      },
-      width: 0,
-      height: 0,
-      isShowArea: false,
-      conditions: [],
-
-      // 初始化 设置放大比例为3倍 防止在边框限制时 出现较小的父级支持造成组件位移
-      scaleWidth: 100,
-      scaleHeight: 100,
-      // 放大比例 小数
-      scalePointWidth: 1,
-      scalePointHeight: 1,
-
-      timer: null,
-      needToChangeHeight: [
-        'top',
-        'height',
-        'fontSize',
-        'borderWidth'
-      ],
-      needToChangeWidth: [
-        'left',
-        'width'
-      ],
-      // private 是否可旋转
-      rotatable: false,
-      // 矩阵大小
-      matrixStyle: {
-        width: 80, // 当前尺寸
-        height: 20,
-        originWidth: 80, // 原始尺寸
-        originHeight: 20
-      },
-      customStyleHistory: null,
-      showDrag: true,
-      vLine: [],
-      hLine: [],
-      changeIndex: 0,
-      timeMachine: null,
-      outStyleOld: null,
-      chartDetailsVisible: false,
-      showChartInfo: {},
-      showChartTableInfo: {},
-      showChartInfoType: 'details',
-      // 挤占式画布设计
-      baseWidth: 100,
-      baseHeight: 100,
-      baseMarginLeft: 0,
-      baseMarginTop: 0,
-      draggable: true,
-      renderOk: false,
-      moveAnimate: false,
-      list: [],
-      cellWidth: 100,
-      cellHeight: 100,
-      maxCell: 0,
-      lastComponentDataLength: 0,
-      positionBoxInfoArray: [],
-      yourList: [],
-      linkJumpSetVisible: false,
-      linkJumpSetViewId: null,
-      editShow: false,
-      buttonFilterMap: null,
-      autoTrigger: true
-    }
-  },
-  computed: {
-    deDraggable() {
-      return !this.linkageSettingStatus && !this.batchOptStatus
-    },
-    deResizable() {
-      return !this.linkageSettingStatus && !this.batchOptStatus
-    },
-    showExportImgButton() {
-      // if the chart type belong to table,'export image' button should be hidden
-      return this.showChartInfo.type && !this.showChartInfo.type.includes('table')
-    },
-    showGrid() {
-      if (this.canvasStyleData && this.canvasStyleData.aidedDesign) {
-        return this.canvasStyleData.aidedDesign.showGrid
-      } else {
-        return false
-      }
-    },
-    editStyle() {
-      return {
-        height: this.outStyle.height + this.scrollTop + 'px !important'
-      }
-    },
-    dialogVisible() {
-      return this.chartDetailsVisible || this.linkJumpSetVisible
-    },
-    // 挤占式画布设计
-    coordinates() {
-      return coordinates
-    },
-    customStyle() {
-      let style = {
-        width: '100%',
-        height: '100%'
-      }
-
-      if (this.canvasStyleData.openCommonStyle) {
-        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
-          style = {
-            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
-            ...style
-          }
-        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
-          style = {
-            background: this.canvasStyleData.panel.color,
-            ...style
-          }
-        }
-      }
-      return style
-    },
-    panelInfo() {
-      return this.$store.state.panel.panelInfo
-    },
-    dragComponentInfo() {
-      return this.$store.state.dragComponentInfo
-    },
-
-    ...mapState([
-      'componentData',
-      'curComponent',
-      'canvasStyleData',
-      'editor',
-      'linkageSettingStatus',
-      'curLinkageView',
-      'doSnapshotIndex',
-      'componentGap',
-      'mobileLayoutStatus',
-      'curCanvasScale',
-      'batchOptStatus'
-    ]),
-
-    searchButtonInfo() {
-      const result = this.buildButtonFilterMap(this.componentData)
-      return result
-    },
-    filterMap() {
-      const result = buildFilterMap(this.componentData)
-      if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
-        for (const key in result) {
-          if (Object.hasOwnProperty.call(result, key)) {
-            let filters = result[key]
-            filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
-            result[key] = filters
-          }
-        }
-      }
-      return result
-    }
-
-  },
-  watch: {
-    customStyle: {
-      handler(newVal) {
-        // 获取当前宽高（宽高改变后重新渲染画布）
-      },
-      deep: true
-    },
-    outStyle: {
-      handler(newVal, oldVla) {
-        this.resizeParentBoundsRef()
-        this.changeScale()
-        this.outStyleOld = deepCopy(newVal)
-      },
-      deep: true
-    },
-    componentData: {
-      handler(newVal, oldVla) {
-        // 初始化时componentData 加载可能出现慢的情况 此时重新初始化一下matrix
-        if (newVal.length !== this.lastComponentDataLength) {
-          this.lastComponentDataLength = newVal.length
-          this.initMatrix()
-        }
-      },
-      deep: true
-    },
-    positionBox: {
-      handler(newVal, oldVla) {
-      },
-      deep: true
-    },
-    // 镜像索引有变化 刷新一下矩阵（撤销重做等）
-    doSnapshotIndex: {
-      handler(newVal, oldVla) {
-        this.initMatrix()
-      },
-      deep: true
-    },
-    autoTrigger: {
-      handler(val, old) {
-        if (val === old) return
-        const result = buildFilterMap(this.componentData)
-        for (const key in result) {
-          if (Object.hasOwnProperty.call(result, key)) {
-            let filters = result[key]
-            if (this.searchButtonInfo && this.searchButtonInfo.buttonExist && !this.searchButtonInfo.autoTrigger && this.searchButtonInfo.relationFilterIds) {
-              filters = filters.filter(item => !this.searchButtonInfo.relationFilterIds.includes(item.componentId))
-            }
-
-            this.filterMap[key] = filters
-
-            this.componentData.forEach(item => {
-              if (item.type === 'view' && item.propValue.viewId === key) {
-                item.filters = filters
-              }
-            })
-          }
-        }
-      },
-      deep: true
-    }
-  },
-
-  mounted() {
-    this.canvasInit()
-    // 获取编辑器元素
-    this.$store.commit('getEditor')
-    const _this = this
-    eventBus.$on('hideArea', this.hideArea)
-    eventBus.$on('startMoveIn', this.startMoveIn)
-    eventBus.$on('openChartDetailsDialog', this.openChartDetailsDialog)
-    bus.$on('onRemoveLastItem', this.removeLastItem)
-    bus.$on('trigger-search-button', this.triggerSearchButton)
-    bus.$on('trigger-reset-button', this.triggerResetButton)
-    bus.$on('refresh-button-info', this.refreshButtonInfo)
-
-    // 矩阵定位调试模式
-    if (this.psDebug) {
-      setInterval(() => {
-        _this.positionBoxInfoArray = positionBox
-      }, 500)
-    }
-  },
-  beforeDestroy() {
-    eventBus.$off('hideArea', this.hideArea)
-    eventBus.$off('startMoveIn', this.startMoveIn)
-    eventBus.$off('openChartDetailsDialog', this.openChartDetailsDialog)
-    bus.$off('onRemoveLastItem', this.removeLastItem)
-    bus.$off('trigger-search-button', this.triggerSearchButton)
-    bus.$off('refresh-button-info', this.refreshButtonInfo)
-    bus.$off('trigger-reset-button', this.triggerResetButton)
-  },
-  created() {
-  },
-  methods: {
-    triggerResetButton() {
-      this.triggerSearchButton(true)
-    },
-    refreshButtonInfo(isClear = false) {
-      const result = this.buildButtonFilterMap(this.componentData, isClear)
-      this.searchButtonInfo.buttonExist = result.buttonExist
-      this.searchButtonInfo.relationFilterIds = result.relationFilterIds
-      this.searchButtonInfo.filterMap = result.filterMap
-      this.searchButtonInfo.autoTrigger = result.autoTrigger
-      this.buttonFilterMap = this.searchButtonInfo.filterMap
-    },
-    triggerSearchButton(isClear = false) {
-      this.refreshButtonInfo(isClear)
-      this.buttonFilterMap = this.searchButtonInfo.filterMap
-
-      this.componentData.forEach(component => {
-        if (component.type === 'view' && this.buttonFilterMap[component.propValue.viewId]) {
-          component.filters = this.buttonFilterMap[component.propValue.viewId]
-        }
-        if (component.type === 'de-tabs') {
-          for (let idx = 0; idx < component.options.tabList.length; idx++) {
-            const ele = component.options.tabList[idx].content
-            if (!ele.type || ele.type !== 'view') continue
-            ele.filters = this.buttonFilterMap[ele.propValue.viewId]
-          }
-        }
-      })
-    },
-    buildButtonFilterMap(panelItems, isClear = false) {
-      const result = {
-        buttonExist: false,
-        relationFilterIds: [],
-        autoTrigger: true,
-        filterMap: {}
-      }
-      if (!panelItems || !panelItems.length) return result
-      let sureButtonItem = null
-      result.buttonExist = panelItems.some(item => {
-        if (item.type === 'custom-button' && item.serviceName === 'buttonSureWidget') {
-          sureButtonItem = item
-          return true
-        }
-      })
-
-      if (!result.buttonExist) return result
-
-      const customRange = sureButtonItem.options.attrs.customRange
-      result.autoTrigger = sureButtonItem.options.attrs.autoTrigger
-      this.autoTrigger = result.autoTrigger
-
-      const allFilters = panelItems.filter(item => item.type === 'custom')
-
-      const matchFilters = customRange && allFilters.filter(item => sureButtonItem.options.attrs.filterIds.includes(item.id)) || allFilters
-
-      result.relationFilterIds = matchFilters.map(item => item.id)
-
-      let viewKeyMap = buildViewKeyMap(panelItems)
-      viewKeyMap = this.buildViewKeyFilters(matchFilters, viewKeyMap, isClear)
-      result.filterMap = viewKeyMap
-      return result
-    },
-    buildViewKeyFilters(panelItems, result, isClear = false) {
-      const refs = this.$refs
-      if (!this.$refs['wrapperChild'] || !this.$refs['wrapperChild'].length) return result
-      const len = this.$refs['wrapperChild'].length
-      panelItems.forEach((element) => {
-        if (element.type !== 'custom') {
-          return true
-        }
-
-        let param = null
-        const index = this.getComponentIndex(element.id)
-        if (index < 0 || index >= len) {
-          return true
-        }
-        const wrapperChild = refs['wrapperChild'][index]
-        if (!wrapperChild || !wrapperChild.getCondition) return true
-        if (isClear) {
-          wrapperChild.clearHandler && wrapperChild.clearHandler()
-        }
-        param = wrapperChild.getCondition && wrapperChild.getCondition()
-        const condition = formatCondition(param)
-        const vValid = valueValid(condition)
-        const filterComponentId = condition.componentId
-        Object.keys(result).forEach(viewId => {
-          const vidMatch = viewIdMatch(condition.viewIds, viewId)
-          const viewFilters = result[viewId]
-          let j = viewFilters.length
-          while (j--) {
-            const filter = viewFilters[j]
-            if (filter.componentId === filterComponentId) {
-              viewFilters.splice(j, 1)
-            }
-          }
-          vidMatch && vValid && viewFilters.push(condition)
-        })
-      })
-      return result
-    },
-    getComponentIndex(id) {
-      for (let index = 0; index < this.componentData.length; index++) {
-        const item = this.componentData[index]
-        if (item.id === id) return index
-      }
-      return -1
-    },
-    pluginEditHandler({ e, id }) {
-      let index = -1
-      for (let i = 0; i < this.componentData.length; i++) {
-        const item = this.componentData[i]
-        const itemId = item.id
-        if (id === itemId) {
-          index = i
-          break
-        }
-      }
-      if (index >= 0) {
-        const _this = this
-        _this.$refs.deDragRef && _this.$refs.deDragRef[index] && _this.$refs.deDragRef[index].triggerPluginEdit && _this.$refs.deDragRef[index].triggerPluginEdit(e)
-      }
-    },
-    linkageActiveCheck(item) {
-      return this.linkageSettingStatus && item === this.curLinkageView
-    },
-    batchOptActiveCheck(item) {
-      return this.batchOptStatus && item.type === 'view'
-    },
-    canvasInit() {
-      this.editShow = false
-      setTimeout(() => {
-        this.changeScale()
-        this.editShow = true
-      }, 500)
-    },
-    backgroundSetClose() {
-      this.boardSetVisible = false
-    },
-    boardSet(item) {
-      this.$emit('boardSet', item)
-      this.boardSetVisible = true
-    },
-    changeStyleWithScale,
-    handleMouseDown(e) {
-      // 如果没有选中组件 在画布上点击时需要调用 e.preventDefault() 防止触发 drop 事件
-      if (!this.curComponent || (this.curComponent.component !== 'v-text' && this.curComponent.component !== 'rect-shape')) {
-        e.preventDefault()
-      }
-      this.hideArea()
-      // 挤占式画布设计
-      this.containerMouseDown(e)
-    },
-
-    hideArea() {
-      this.isShowArea = 0
-      this.width = 0
-      this.height = 0
-    },
-
-    createGroup() {
-      // 获取选中区域的组件数据
-      const areaData = this.getSelectArea()
-      if (areaData.length <= 1) {
-        this.hideArea()
-        return
-      }
-
-      // 根据选中区域和区域中每个组件的位移信息来创建 Group 组件
-      // 要遍历选择区域的每个组件，获取它们的 left top right bottom 信息来进行比较
-      let top = Infinity
-      let left = Infinity
-      let right = -Infinity
-      let bottom = -Infinity
-      areaData.forEach(component => {
-        let style = {}
-        if (component.component === 'Group') {
-          component.propValue.forEach(item => {
-            const rectInfo = _$(`#component${item.id}`).getBoundingClientRect()
-            style.left = rectInfo.left - this.editorX
-            style.top = rectInfo.top - this.editorY
-            style.right = rectInfo.right - this.editorX
-            style.bottom = rectInfo.bottom - this.editorY
-
-            if (style.left < left) left = style.left
-            if (style.top < top) top = style.top
-            if (style.right > right) right = style.right
-            if (style.bottom > bottom) bottom = style.bottom
-          })
-        } else {
-          style = getComponentRotatedStyle(component.style)
-        }
-
-        if (style.left < left) left = style.left
-        if (style.top < top) top = style.top
-        if (style.right > right) right = style.right
-        if (style.bottom > bottom) bottom = style.bottom
-      })
-
-      this.start.x = left
-      this.start.y = top
-      this.width = right - left
-      this.height = bottom - top
-
-      // 设置选中区域位移大小信息和区域内的组件数据
-      this.$store.commit('setAreaData', {
-        style: {
-          left,
-          top,
-          width: this.width,
-          height: this.height
-        },
-        components: areaData
-      })
-    },
-
-    getSelectArea() {
-      const result = []
-      // 区域起点坐标
-      const { x, y } = this.start
-      // 计算所有的组件数据，判断是否在选中区域内
-      this.componentData.forEach(component => {
-        if (component.isLock) return
-
-        const { left, top, width, height } = component.style
-        if (x <= left && y <= top && (left + width <= x + this.width) && (top + height <= y + this.height)) {
-          result.push(component)
-        }
-      })
-
-      // 返回在选中区域内的所有组件
-      return result
-    },
-
-    getShapeStyle(style) {
-      const result = {};
-      ['width', 'left'].forEach(attr => {
-        result[attr] = this.format(style[attr], this.scaleWidth) + 'px'
-      });
-      ['height', 'top'].forEach(attr => {
-        result[attr] = this.format(style[attr], this.scaleHeight) + 'px'
-      })
-      result.transform = 'rotate(' + style['rotate'] + 'deg)'
-
-      return result
-    },
-
-    getShapeStyleInt(style) {
-      const result = {};
-      ['width', 'left'].forEach(attr => {
-        result[attr] = this.format(style[attr], this.scaleWidth)
-      });
-      ['height', 'top'].forEach(attr => {
-        result[attr] = this.format(style[attr], this.scaleHeight)
-      })
-      result['rotate'] = style['rotate']
-      result['borderWidth'] = style['borderWidth']
-      result['opacity'] = style['opacity']
-
-      return result
-    },
-
-    getComponentStyleDefault(style) {
-      return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
-      // return style
-    },
-
-    getComponentStyle(style) {
-      //   return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
-      return style
-    },
-
-    handleInput(element, value) {
-      // 根据文本组件高度调整 shape 高度
-      // remain -自适应画布会导致一些问题 暂时不修改
-      // this.$store.commit('setShapeStyle', { height: this.getTextareaHeight(element, value) })
-    },
-
-    getTextareaHeight(element, text) {
-      // eslint-disable-next-line prefer-const
-      let { lineHeight, fontSize, height } = element.style
-      if (lineHeight === '') {
-        lineHeight = 1.5
-      }
-
-      const newHeight = (text.split('<br>').length - 1) * lineHeight * fontSize
-      return height > newHeight ? height : newHeight
-    },
-
-    format(value, scale) {
-      // 自适应画布区域 返回原值
-      return value * scale / 100
-    },
-    // 修改矩阵点
-    changeComponentSizePoint(pointScale) {
-      if (pointScale) {
-        this.componentData.forEach((item, index) => {
-          item.x = (item.x - 1) * pointScale + 1
-          item.y = (item.y - 1) * pointScale + 1
-          item.sizex = item.sizex * pointScale
-          item.sizey = item.sizey * pointScale
-        })
-        this.changeScale()
-      }
-    },
-
-    changeScale() {
-      // 1.3 版本重新设计仪表板定位方式，基准画布宽高为 1600*900 宽度自适应当前画布获取缩放比例scaleWidth
-      // 高度缩放比例scaleHeight = scaleWidth 基础矩阵为128*72 矩阵原始宽度12.5*12.5 矩阵高度可以调整
-
-      if (this.outStyle.width && this.outStyle.height) {
-        // 矩阵计算
-        this.matrixStyle.originWidth = this.canvasStyleData.width / this.matrixCount.x
-        this.matrixStyle.originHeight = this.canvasStyleData.height / this.matrixCount.y
-        if (!this.canvasStyleData.selfAdaption) {
-          this.matrixStyle.width = this.canvasStyleData.width / this.matrixCount.x
-          this.matrixStyle.height = this.canvasStyleData.height / this.matrixCount.y
-        } else {
-          this.matrixStyle.width = this.outStyle.width / this.matrixCount.x
-          this.matrixStyle.height = this.outStyle.height / this.matrixCount.y
-        }
-        this.baseWidth = this.matrixStyle.width
-        this.baseHeight = this.matrixStyle.height
-        this.cellWidth = this.matrixStyle.width
-        this.cellHeight = this.matrixStyle.height
-        this.initMatrix()
-
-        this.scaleWidth = this.outStyle.width * 100 / this.canvasStyleData.width
-        this.scaleHeight = this.outStyle.height * 100 / this.canvasStyleData.height
-        this.scalePointWidth = this.scaleWidth / 100
-        this.scalePointHeight = this.scaleHeight / 100
-        this.$store.commit('setCurCanvasScale',
-          {
-            scaleWidth: this.scaleWidth,
-            scaleHeight: this.scaleHeight,
-            scalePointWidth: this.scalePointWidth,
-            scalePointHeight: this.scalePointHeight,
-            matrixStyleWidth: this.matrixStyle.width,
-            matrixStyleHeight: this.matrixStyle.height,
-            matrixStyleOriginWidth: this.matrixStyle.originWidth,
-            matrixStyleOriginHeight: this.matrixStyle.originHeight
-          })
-        this.$store.commit('setPreviewCanvasScale', {
-          scaleWidth: this.scalePointWidth,
-          scaleHeight: this.scalePointHeight
-        })
-      }
-    },
-    getShapeStyleIntDeDrag(style, prop) {
-      if (prop === 'rotate') {
-        return style['rotate']
-      }
-      if (prop === 'width') {
-        return this.format(style['width'], this.scaleWidth)
-      }
-      if (prop === 'left') {
-        return this.format(style['left'], this.scaleWidth)
-      }
-      if (prop === 'height') {
-        return this.format(style['height'], this.scaleHeight)
-      }
-      if (prop === 'top') {
-        const top = this.format(style['top'], this.scaleHeight)
-        return top
-      }
-    },
-    getRefLineParams(params) {
-      const { vLine, hLine } = params
-      this.vLine = vLine
-      this.hLine = hLine
-    },
-    resizeParentBounds() {
-      this.destroyTimeMachine()
-      this.changeIndex++
-      this.parentBoundsChange(this.changeIndex)
-    },
-    parentBoundsChange(index) {
-      this.timeMachine = setTimeout(() => {
-        if (index === this.changeIndex) {
-          this.changeScale()
-        }
-        this.destroyTimeMachine()
-      }, 1500)
-    },
-    destroyTimeMachine() {
-      this.timeMachine && clearTimeout(this.timeMachine)
-      this.timeMachine = null
-    },
-    openChartDetailsDialog(chartInfo) {
-      this.showChartInfo = chartInfo.chart
-      this.showChartTableInfo = chartInfo.tableChart
-      this.showChartInfoType = chartInfo.openType
-      this.chartDetailsVisible = true
-    },
-    exportExcel() {
-      this.$refs['userViewDialog'].exportExcel()
-    },
-    exportViewImg() {
-      this.$refs['userViewDialog'].exportViewImg()
-    },
-    showViewDetails(params, index) {
-      this.$refs.wrapperChild[index].openChartDetailsDialog(params)
-    },
-
-    resizeView(index, item) {
-      if (item.type === 'view' || item.type === 'de-show-date') {
-        try {
-          this.$refs.wrapperChild[index].chartResize()
-        } catch (e) {
-          // ignore error
-        }
-      }
-    },
-    editComponent(index, item) {
-      if (item.type === 'view') {
-        this.$refs.wrapperChild[index].editChart()
-      }
-    },
-    handleDragOver(e) {
-      this.dragComponentInfo.shadowStyle.x = e.pageX - 220
-      this.dragComponentInfo.shadowStyle.y = e.pageY - 90 + this.scrollTop
-      this.dragComponentInfo.style.left = this.dragComponentInfo.shadowStyle.x / this.scalePointWidth
-      this.dragComponentInfo.style.top = this.dragComponentInfo.shadowStyle.y / this.scalePointHeight
-      if (this.dragComponentInfo.auxiliaryMatrix) {
-        this.onDragging(e, this.dragComponentInfo)
-      }
-    },
-    getPositionX(x) {
-      if (this.canvasStyleData.selfAdaption) {
-        return x * 100 / this.curCanvasScale.scaleWidth
-      } else {
-        return x
-      }
-    },
-    getPositionY(y) {
-      if (this.canvasStyleData.selfAdaption) {
-        return y * 100 / this.curCanvasScale.scaleHeight
-      } else {
-        return y
-      }
-    },
-    canvasScroll(event) {
-      this.$emit('canvasScroll', event)
-    },
-
-    // 挤占式画布设计
-    startResize(e, item, index) {
-      if (!this.resizable) return
-      this.resizeStart.call(null, e, item, index)
-
-      // e.preventDefault();
-      // eslint-disable-next-line no-unused-vars
-      const target = $(e.target)
-
-      if (!this.infoBox) {
-        this.infoBox = {}
-      }
-      this.infoBox.resizeItem = item
-      this.infoBox.resizeItemIndex = index
-      // this.onStartMove(e, item, index)
-
-      return true
-    },
-    containerMouseDown(e) {
-      // e.preventDefault();
-      if (!this.infoBox) {
-        this.infoBox = {}
-      }
-      this.infoBox.startX = e.pageX
-      this.infoBox.startY = e.pageY
-    },
-    onStartMove(e, item, index) {
-      if (!this.infoBox) {
-        this.infoBox = {}
-      }
-      const infoBox = this.infoBox
-      this.dragStart.call(null, e, item, index)
-      infoBox.moveItem = item
-      infoBox.moveItemIndex = index
-
-      infoBox.orignX = 0 // 克隆对象原始X位置
-      infoBox.orignY = 0
-      infoBox.startX = 0
-      infoBox.startY = 0
-
-      infoBox.oldX = item.x // 实际对象原始X位置
-      infoBox.oldY = item.y
-      infoBox.oldSizeX = item.sizex
-      infoBox.oldSizeY = item.sizey
-    },
-    onMouseUp(e) {
-      const vm = this
-      if (_.isEmpty(vm.infoBox)) return
-      if (vm.infoBox.cloneItem) {
-        vm.infoBox.cloneItem.remove()
-      }
-      if (vm.infoBox.resizeItem) {
-        vm.$delete(vm.infoBox.resizeItem, 'isPlayer')
-        vm.resizeEnd.call(null, e, vm.infoBox.resizeItem, vm.infoBox.resizeItem._dragId)
-      }
-      if (vm.infoBox.moveItem) {
-        vm.dragEnd.call(null, e, vm.infoBox.moveItem, vm.infoBox.moveItem._dragId)
-        vm.$set(vm.infoBox.moveItem, 'show', true)
-        vm.$delete(vm.infoBox.moveItem, 'isPlayer')
-      }
-      vm.infoBox = {}
-    },
-    onResizing(e, item) {
-      // this.onDragging(e, item)
-      const infoBox = this.infoBox
-      const resizeItem = _.get(infoBox, 'resizeItem')
-      const vm = this
-      vm.$set(resizeItem, 'isPlayer', true)
-      const startX = infoBox.startX
-      const startY = infoBox.startY
-      const moveXSize = e.pageX - startX // X方向移动的距离
-      const moveYSize = e.pageY - startY // Y方向移动的距离
-
-      const addSizex = (moveXSize) % vm.cellWidth > (vm.cellWidth / 4 * 1) ? parseInt(((moveXSize) / vm.cellWidth + 1)) : parseInt(((moveXSize) / vm.cellWidth))
-      const addSizey = (moveYSize) % vm.cellHeight > (vm.cellHeight / 4 * 1) ? parseInt(((moveYSize) / vm.cellHeight + 1)) : parseInt(((moveYSize) / vm.cellHeight))
-      let nowX = Math.round((item.style.width * this.scalePointWidth) / this.matrixStyle.width)
-      let nowY = Math.round((item.style.height * this.scalePointHeight) / this.matrixStyle.height)
-      nowX = nowX > 0 ? nowX : 1
-      nowY = nowY > 0 ? nowY : 1
-
-      const oldX = infoBox.oldX
-      const oldY = infoBox.oldY
-      let newX = Math.round((item.style.left * this.scalePointWidth) / this.matrixStyle.width) + 1
-      let newY = Math.round((item.style.top * this.scalePointHeight) / this.matrixStyle.height) + 1
-      newX = newX > 0 ? newX : 1
-      newY = newY > 0 ? newY : 1
-      debounce((function(newX, oldX, newY, oldY, addSizex, addSizey) {
-        return function() {
-          if (newX !== oldX || oldY !== newY) {
-            movePlayer.call(vm, resizeItem, {
-              x: newX,
-              y: newY
-            })
-
-            infoBox.oldX = newX
-            infoBox.oldY = newY
-          }
-          resizePlayer.call(vm, resizeItem, {
-            sizex: nowX,
-            sizey: nowY
-          })
-        }
-      })(newX, oldX, newY, oldY, addSizex, addSizey), 10)
-    },
-    onDragging(e, item) {
-      const infoBox = this.infoBox
-      const moveItem = _.get(infoBox, 'moveItem')
-      const vm = this
-      scrollScreen(e)
-      if (!vm.draggable) return
-      vm.dragging.call(null, e, moveItem, moveItem._dragId)
-
-      vm.$set(moveItem, 'isPlayer', true)
-      const oldX = infoBox.oldX
-      const oldY = infoBox.oldY
-      let newX = Math.round((item.style.left * this.scalePointWidth) / this.matrixStyle.width) + 1
-      let newY = Math.round((item.style.top * this.scalePointHeight) / this.matrixStyle.height) + 1
-      newX = newX > 0 ? newX : 1
-      newY = newY > 0 ? newY : 1
-      debounce((function(newX, oldX, newY, oldY) {
-        return function() {
-          if (newX !== oldX || oldY !== newY) {
-            movePlayer.call(vm, moveItem, {
-              x: newX,
-              y: newY
-            })
-
-            infoBox.oldX = newX
-            infoBox.oldY = newY
-          }
-        }
-      })(newX, oldX, newY, oldY), 10)
-    },
-    endMove(e) {
-
-    },
-    moving(e) {
-
-    },
-    /**
-     * 计算当前item的位置和大小
-     *
-     * @param {any} item
-     * @returns
-     */
-    nowItemStyle(item, index) {
-      return {
-        width: (this.cellWidth * (item.sizex) - this.baseMarginLeft) + 'px',
-        height: (this.cellHeight * (item.sizey) - this.baseMarginTop) + 'px',
-        left: (this.cellWidth * (item.x - 1) + this.baseMarginLeft) + 'px',
-        top: (this.cellHeight * (item.y - 1) + this.baseMarginTop) + 'px'
-      }
-    },
-    getList() {
-      // 不使用copy 保持原有对象
-      const finalList = []
-      _.forEach(this.componentData, function(item, index) {
-        if (_.isEmpty(item)) return
-        delete item['_dragId']
-        delete item['show']
-        if (item['auxiliaryMatrix']) {
-          finalList.push(item)
-        }
-      })
-      return finalList
-    },
-    /**
-     * 获取x最大值
-     *
-     * @returns
-     */
-    getMaxCell() {
-      return this.maxCell
-    },
-    /**
-     * 获取渲染状态
-     *
-     * @returns
-     */
-    getRenderState() {
-      return this.moveAnimate
-    },
-    addItem: addItem,
-    removeItem: removeItem,
-    initMatrix: init,
-    afterInitOk(func) {
-      const timeid = setInterval(() => {
-        if (this.moveAnimate) {
-          clearInterval(timeid)
-          func()
-        }
-      }, 100)
-    },
-    addItemBox(item) {
-      this.yourList.push(item)
-
-      this.$nextTick(function() {
-        addItem.call(this, item, this.yourList.length - 1)
-      })
-    },
-    removeLastItem() {
-      if (this.canvasStyleData.auxiliaryMatrix) {
-        this.removeItem(this.yourList.length - 1)
-      }
-    },
-    startMoveIn() {
-      if (this.$store.state.dragComponentInfo.auxiliaryMatrix) {
-        const moveInItemInfo = this.$store.state.dragComponentInfo
-        this.addItemBox(moveInItemInfo)
-        // e.preventDefault();
-        if (!this.infoBox) {
-          this.infoBox = {}
-        }
-        const infoBox = this.infoBox
-
-        infoBox.moveItem = moveInItemInfo
-        infoBox.moveItemIndex = this.yourList.length - 1
-
-        infoBox.oldX = 1 // 实际对象原始X位置
-        infoBox.oldY = 1
-        infoBox.oldSizeX = moveInItemInfo.sizex
-        infoBox.oldSizeY = moveInItemInfo.sizey
-      }
-    },
-    linkJumpSet(item) {
-      this.linkJumpSetViewId = item.propValue.viewId
-      this.linkJumpSetVisible = true
-    },
-    closeJumpSetDialog() {
-      this.linkJumpSetVisible = false
-    },
-    // 调整父级组件边界
-    resizeParentBoundsRef() {
-      const _this = this
-      _this.componentData.forEach(function(data, index) {
-        _this.$refs.deDragRef && _this.$refs.deDragRef[index] && _this.$refs.deDragRef[index].checkParentSize()
-      })
-    },
-    canvasDragging(mY, offsetY) {
-      this.$emit('canvasDragging', mY, offsetY)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.editor {
-  width: 100%;
-  position: relative;
-  /*background: #fff;*/
-  margin: auto;
-  /*会影响设置组件不能出现在最高层*/
-  /*overflow-x: hidden;*/
-  background-size: 100% 100% !important;
-  /*transform-style:preserve-3d;*/
-  .lock {
-    opacity: .5;
-  }
-}
-
-.parent_transform {
-  //transform transform 会使z-index 失效；为了使编辑仪表板时 按钮一直在上面 采用transform-style 的方式
-  // transform-style 会导致 dialog 遮罩有问题 此处暂时用这个样式做控制
-  transform-style: preserve-3d;
-}
-
-.edit {
-  .component {
-    outline: none;
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-}
-
-.gap_class {
-  padding: 3px;
-}
-
-.ref-line {
-  position: absolute;
-  background-color: #70c0ff;;
-  z-index: 9999;
-}
-
-.v-line {
-  width: 1px;
-}
-
-.h-line {
-  height: 1px;
-}
-
-.dialog-css ::v-deep .el-dialog__title {
-  font-size: 14px;
-}
-
-.dialog-css ::v-deep .el-dialog__header {
-  padding: 40px 20px 0;
-}
-
-.dialog-css ::v-deep .el-dialog__body {
-  padding: 10px 20px 20px;
-}
-
-</style>
diff --git a/frontend/src/components/canvas/customComponent/LinkJumpSetDialog.vue b/frontend/src/components/canvas/customComponent/LinkJumpSetDialog.vue
deleted file mode 100644
index 06d1892347..0000000000
--- a/frontend/src/components/canvas/customComponent/LinkJumpSetDialog.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <de-container style="height: 500px">
-    <de-aside-container>
-      this is test
-    </de-aside-container>
-    <de-main-container>
-      this is test2
-    </de-main-container>
-  </de-container>
-</template>
-
-<script>
-
-import DeMainContainer from '@/components/dataease/DeMainContainer'
-import DeContainer from '@/components/dataease/DeContainer'
-import DeAsideContainer from '@/components/dataease/DeAsideContainer'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'UserView',
-  components: { DeMainContainer, DeContainer, DeAsideContainer },
-  props: {
-    chart: {
-      type: Object,
-      default: null
-    },
-    chartTable: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      refId: null
-    }
-  },
-  computed: {
-    ...mapState([
-      'isClickComponent',
-      'curComponent',
-      'componentData',
-      'canvasStyleData'
-    ])
-  },
-  methods: {
-
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-  .ms-aside-container {
-    height: 50vh;
-    min-width: 400px;
-    max-width: 400px;
-    padding: 0 0;
-  }
-  .ms-main-container {
-    height: 50vh;
-    border: 1px solid #E6E6E6;
-    border-left: 0 solid;
-  }
-  .chart-class{
-    height: 100%;
-  }
-  .table-class{
-    height: 100%;
-  }
-</style>
diff --git a/frontend/src/components/canvas/index.vue b/frontend/src/components/canvas/index.vue
deleted file mode 100644
index e2e06ddf5e..0000000000
--- a/frontend/src/components/canvas/index.vue
+++ /dev/null
@@ -1,158 +0,0 @@
-<template>
-  <div class="home">
-    <Toolbar />
-    <main>
-      <section class="center">
-        <div
-          class="content"
-          @drop="handleDrop"
-          @dragover="handleDragOver"
-          @mousedown="handleMouseDown"
-          @mouseup="deselectCurComponent"
-        >
-          <Editor />
-        </div>
-      </section>
-
-    </main>
-  </div>
-</template>
-
-<script>
-import Editor from '@/components/editor/index'
-import componentList from '@/components/canvas/customComponent/component-list' // 左侧列表数据
-import Toolbar from '@/components/Toolbar'
-import { deepCopy } from '@/utils/utils'
-import { mapState } from 'vuex'
-import generateID from '@/utils/generateID'
-import { uuid } from 'vue-uuid'
-
-export default {
-  components: { Editor, Toolbar },
-  data() {
-    return {
-      activeName: 'attr',
-      reSelectAnimateIndex: undefined
-    }
-  },
-  computed: mapState([
-    'componentData',
-    'curComponent',
-    'isClickComponent',
-    'canvasStyleData'
-  ]),
-  created() {
-    this.restore()
-  },
-  methods: {
-    restore() {
-      // 用保存的数据恢复画布
-      if (localStorage.getItem('canvasData')) {
-        this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
-      }
-
-      if (localStorage.getItem('canvasStyle')) {
-        this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
-      }
-    },
-
-    resetID(data) {
-      if (data) {
-        data.forEach(item => {
-          item.type !== 'custom' && (item.id = uuid.v1())
-        })
-      }
-
-      return data
-    },
-
-    handleDrop(e) {
-      e.preventDefault()
-      e.stopPropagation()
-
-      let component
-      const id = e.dataTransfer.getData('componentId')
-      componentList.forEach(componentTemp => {
-        if (id === componentTemp.id) {
-          component = deepCopy(componentTemp)
-        }
-      })
-      // const component = deepCopy(componentList[e.dataTransfer.getData('index')])
-      component.style.top = e.offsetY
-      component.style.left = e.offsetX
-      component.id = generateID()
-      this.$store.commit('addComponent', { component })
-      this.$store.commit('recordSnapshot', 'handleDrop')
-    },
-
-    handleDragOver(e) {
-      e.preventDefault()
-      e.dataTransfer.dropEffect = 'copy'
-    },
-
-    handleMouseDown() {
-      this.$store.commit('setClickComponentStatus', false)
-    },
-
-    deselectCurComponent(e) {
-      if (!this.isClickComponent) {
-        this.$store.commit('setCurComponent', { component: null, index: null })
-      }
-
-      // 0 左击 1 滚轮 2 右击
-      if (e.button !== 2) {
-        this.$store.commit('hideContextMenu')
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.home {
-  height: 100vh;
-  background: #fff;
-
-  main {
-    height: calc(100% - 64px);
-    position: relative;
-
-    .left {
-      position: absolute;
-      height: 100%;
-      width: 200px;
-      left: 0;
-      top: 0;
-      padding-top: 10px;
-    }
-
-    .right {
-      position: absolute;
-      height: 100%;
-      width: 262px;
-      right: 0;
-      top: 0;
-    }
-
-    .center {
-      margin-left: 200px;
-      margin-right: 262px;
-      background: #f5f5f5;
-      height: 100%;
-      overflow: auto;
-      padding: 20px;
-
-      .content {
-        width: 100%;
-        height: 100%;
-        overflow: auto;
-      }
-    }
-  }
-
-  .placeholder {
-    text-align: center;
-    color: #333;
-  }
-}
-</style>
diff --git a/frontend/src/components/canvas/styles/reset.css b/frontend/src/components/canvas/styles/reset.css
deleted file mode 100644
index 3c0d4df5fc..0000000000
--- a/frontend/src/components/canvas/styles/reset.css
+++ /dev/null
@@ -1,52 +0,0 @@
-body,
-button,
-input,
-p,
-li,
-ol,
-ul,
-div,
-section,
-article,
-td,
-th,
-span,
-textarea,
-form,
-footer,
-header,
-nav,
-main,
-address,
-aside,
-pre,
-canvas {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  overflow: hidden;
-}
-
-li {
-  list-style: none;
-}
-
-#app {
-  /*overflow: hidden;*/
-}
-
-.el-tabs {
-  height: 100%;
-}
-
-.el-tabs__content {
-  height: calc(100% - 55px);
-  overflow: auto;
-}
-
-.el-tabs__nav-scroll {
-  padding-left: 20px;
-}
diff --git a/frontend/src/components/canvas/utils/animationClassData.js b/frontend/src/components/canvas/utils/animationClassData.js
deleted file mode 100644
index 5ab527b6df..0000000000
--- a/frontend/src/components/canvas/utils/animationClassData.js
+++ /dev/null
@@ -1,94 +0,0 @@
-export default [
-  {
-    label: '进入',
-    children: [
-      { label: '渐显', value: 'fadeIn' },
-      { label: '向右进入', value: 'fadeInLeft' },
-      { label: '向左进入', value: 'fadeInRight' },
-      { label: '向上进入', value: 'fadeInUp' },
-      { label: '向下进入', value: 'fadeInDown' },
-      { label: '向右长距进入', value: 'fadeInLeftBig' },
-      { label: '向左长距进入', value: 'fadeInRightBig' },
-      { label: '向上长距进入', value: 'fadeInUpBig' },
-      { label: '向下长距进入', value: 'fadeInDownBig' },
-      { label: '旋转进入', value: 'rotateIn' },
-      { label: '左顺时针旋转', value: 'rotateInDownLeft' },
-      { label: '右逆时针旋转', value: 'rotateInDownRight' },
-      { label: '左逆时针旋转', value: 'rotateInUpLeft' },
-      { label: '右逆时针旋转', value: 'rotateInUpRight' },
-      { label: '弹入', value: 'bounceIn' },
-      { label: '向右弹入', value: 'bounceInLeft' },
-      { label: '向左弹入', value: 'bounceInRight' },
-      { label: '向上弹入', value: 'bounceInUp' },
-      { label: '向下弹入', value: 'bounceInDown' },
-      { label: '光速从右进入', value: 'lightSpeedInRight' },
-      { label: '光速从左进入', value: 'lightSpeedInLeft' },
-      { label: '光速从右退出', value: 'lightSpeedOutRight' },
-      { label: '光速从左退出', value: 'lightSpeedOutLeft' },
-      { label: 'Y轴旋转', value: 'flip' },
-      { label: '中心X轴旋转', value: 'flipInX' },
-      { label: '中心Y轴旋转', value: 'flipInY' },
-      { label: '左长半径旋转', value: 'rollIn' },
-      { label: '由小变大进入', value: 'zoomIn' },
-      { label: '左变大进入', value: 'zoomInLeft' },
-      { label: '右变大进入', value: 'zoomInRight' },
-      { label: '向上变大进入', value: 'zoomInUp' },
-      { label: '向下变大进入', value: 'zoomInDown' },
-      { label: '向右滑动展开', value: 'slideInLeft' },
-      { label: '向左滑动展开', value: 'slideInRight' },
-      { label: '向上滑动展开', value: 'slideInUp' },
-      { label: '向下滑动展开', value: 'slideInDown' }
-    ]
-  },
-  {
-    label: '强调',
-    children: [
-      { label: '弹跳', value: 'bounce' },
-      { label: '闪烁', value: 'flash' },
-      { label: '放大缩小', value: 'pulse' },
-      { label: '放大缩小弹簧', value: 'rubberBand' },
-      { label: '左右晃动', value: 'headShake' },
-      { label: '左右扇形摇摆', value: 'swing' },
-      { label: '放大晃动缩小', value: 'tada' },
-      { label: '扇形摇摆', value: 'wobble' },
-      { label: '左右上下晃动', value: 'jello' },
-      { label: 'Y轴旋转', value: 'flip' }
-    ]
-  },
-  {
-    label: '退出',
-    children: [
-      { label: '渐隐', value: 'fadeOut' },
-      { label: '向左退出', value: 'fadeOutLeft' },
-      { label: '向右退出', value: 'fadeOutRight' },
-      { label: '向上退出', value: 'fadeOutUp' },
-      { label: '向下退出', value: 'fadeOutDown' },
-      { label: '向左长距退出', value: 'fadeOutLeftBig' },
-      { label: '向右长距退出', value: 'fadeOutRightBig' },
-      { label: '向上长距退出', value: 'fadeOutUpBig' },
-      { label: '向下长距退出', value: 'fadeOutDownBig' },
-      { label: '旋转退出', value: 'rotateOut' },
-      { label: '左顺时针旋转', value: 'rotateOutDownLeft' },
-      { label: '右逆时针旋转', value: 'rotateOutDownRight' },
-      { label: '左逆时针旋转', value: 'rotateOutUpLeft' },
-      { label: '右逆时针旋转', value: 'rotateOutUpRight' },
-      { label: '弹出', value: 'bounceOut' },
-      { label: '向左弹出', value: 'bounceOutLeft' },
-      { label: '向右弹出', value: 'bounceOutRight' },
-      { label: '向上弹出', value: 'bounceOutUp' },
-      { label: '向下弹出', value: 'bounceOutDown' },
-      { label: '中心X轴旋转', value: 'flipOutX' },
-      { label: '中心Y轴旋转', value: 'flipOutY' },
-      { label: '左长半径旋转', value: 'rollOut' },
-      { label: '由小变大退出', value: 'zoomOut' },
-      { label: '左变大退出', value: 'zoomOutLeft' },
-      { label: '右变大退出', value: 'zoomOutRight' },
-      { label: '向上变大退出', value: 'zoomOutUp' },
-      { label: '向下变大退出', value: 'zoomOutDown' },
-      { label: '向左滑动收起', value: 'slideOutLeft' },
-      { label: '向右滑动收起', value: 'slideOutRight' },
-      { label: '向上滑动收起', value: 'slideOutUp' },
-      { label: '向下滑动收起', value: 'slideOutDown' }
-    ]
-  }
-]
diff --git a/frontend/src/components/dataease/dragbar/DeBottom2TopDragBar.vue b/frontend/src/components/dataease/dragbar/DeBottom2TopDragBar.vue
deleted file mode 100644
index 229efd2a32..0000000000
--- a/frontend/src/components/dataease/dragbar/DeBottom2TopDragBar.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-  <div
-    v-bottom-to-top-drag
-    class="drag-bar"
-  />
-</template>
-
-<script>
-export default {
-  name: 'DeBottom2TopDragBar'
-}
-</script>
-
-<style scoped>
-
-  .drag-bar {
-    height: 1px;
-    width: 100%;
-    z-index: 1000;
-    cursor: row-resize;
-    position: fixed;
-    background-color: #E6E6E6;
-    border: 0px;
-  }
-
-  .drag-bar:hover {
-    height: 3px;
-  }
-
-</style>
diff --git a/frontend/src/components/dataease/dragbar/DeRight2LeftDragBar.vue b/frontend/src/components/dataease/dragbar/DeRight2LeftDragBar.vue
deleted file mode 100644
index 73250bd947..0000000000
--- a/frontend/src/components/dataease/dragbar/DeRight2LeftDragBar.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <div
-    v-right-to-left-drag
-    class="drag-bar"
-  />
-</template>
-
-<script>
-export default {
-  name: 'DeRight2LeftDragBar'
-}
-</script>
-
-<style scoped>
-
-  .drag-bar {
-    height: 100%;
-    width: 1px;
-    position: absolute;
-    left: 0px;
-    top: 0;
-    cursor: col-resize;
-    background-color: #E6E6E6;
-    border: 0px;
-  }
-
-  .drag-bar:hover {
-    width: 3px;
-  }
-
-</style>
diff --git a/frontend/src/components/deViewSelect/dom.js b/frontend/src/components/deViewSelect/dom.js
deleted file mode 100644
index 0077c09474..0000000000
--- a/frontend/src/components/deViewSelect/dom.js
+++ /dev/null
@@ -1,32 +0,0 @@
-
-export const on = (function() {
-  if (document.addEventListener) {
-    return function(element, event, handler) {
-      if (element && event && handler) {
-        element.addEventListener(event, handler, false)
-      }
-    }
-  } else {
-    return function(element, event, handler) {
-      if (element && event && handler) {
-        element.attachEvent('on' + event, handler)
-      }
-    }
-  }
-})()
-export const off = (function() {
-  if (document.removeEventListener) {
-    return function(element, event, handler) {
-      if (element && event) {
-        element.removeEventListener(event, handler, false)
-      }
-    }
-  } else {
-    return function(element, event, handler) {
-      if (element && event) {
-        element.detachEvent('on' + event, handler)
-      }
-    }
-  }
-})()
-
diff --git a/frontend/src/components/doc/index.vue b/frontend/src/components/doc/index.vue
deleted file mode 100644
index f39e68135f..0000000000
--- a/frontend/src/components/doc/index.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<template>
-  <div>
-    <svg-icon
-      icon-class="doc"
-      @click="click"
-    />
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Doc',
-  methods: {
-    click() {
-      window.open(process.env.VUE_APP_BASE_API + 'doc.html', '_blank')
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/gridButton/index.vue b/frontend/src/components/gridButton/index.vue
deleted file mode 100644
index 729d9e47a4..0000000000
--- a/frontend/src/components/gridButton/index.vue
+++ /dev/null
@@ -1,44 +0,0 @@
-<template>
-  <el-tooltip :content="tooltip">
-    <el-button
-      circle
-      class="fu-search-bar-button"
-      :type="type"
-      :size="size"
-      @click="click"
-    >
-      <slot>
-        <i :class="icon" />
-      </slot>
-    </el-button>
-  </el-tooltip>
-</template>
-
-<script>
-export default {
-  name: 'GridButton',
-  props: {
-    size: {
-      type: String,
-      default: 'mini'
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    type: {
-      type: String,
-      default: null
-    },
-    tooltip: {
-      type: String,
-      default: null
-    }
-  },
-  methods: {
-    click(e) {
-      this.$emit('click', e)
-    }
-  }
-}
-</script>
diff --git a/frontend/src/components/hamburger/index.vue b/frontend/src/components/hamburger/index.vue
deleted file mode 100644
index 2fe8862c13..0000000000
--- a/frontend/src/components/hamburger/index.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div
-    style="padding: 0 15px;"
-    @click="toggleClick"
-  >
-    <svg
-      :class="{'is-active':isActive}"
-      class="hamburger"
-      viewBox="0 0 1024 1024"
-      xmlns="http://www.w3.org/2000/svg"
-      width="64"
-      height="64"
-    >
-      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
-    </svg>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'Hamburger',
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    }
-  },
-  methods: {
-    toggleClick() {
-      this.$emit('toggleClick')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.hamburger {
-  display: inline-block;
-  vertical-align: middle;
-  width: 20px;
-  height: 20px;
-}
-
-.hamburger.is-active {
-  transform: rotate(180deg);
-}
-</style>
diff --git a/frontend/src/components/pagination/index.vue b/frontend/src/components/pagination/index.vue
deleted file mode 100644
index 4e2749b3c2..0000000000
--- a/frontend/src/components/pagination/index.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <div
-    :class="{'hidden':hidden}"
-    class="pagination-container"
-  >
-    <el-pagination
-      :background="background"
-      :current-page.sync="currentPage"
-      :page-size.sync="pageSize"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :total="total"
-      v-bind="$attrs"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </div>
-</template>
-
-<script>
-import { scrollTo } from '@/utils/scroll-to'
-
-export default {
-  name: 'Pagination',
-  props: {
-    total: {
-      required: true,
-      type: Number
-    },
-    page: {
-      type: Number,
-      default: 0
-    },
-    limit: {
-      type: Number,
-      default: 10
-    },
-    pageSizes: {
-      type: Array,
-      default() {
-        return [10, 20, 30, 50]
-      }
-    },
-    layout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
-    },
-    background: {
-      type: Boolean,
-      default: true
-    },
-    autoScroll: {
-      type: Boolean,
-      default: true
-    },
-    hidden: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    currentPage: {
-      get() {
-        return this.page
-      },
-      set(val) {
-        this.$emit('update:page', val)
-      }
-    },
-    pageSize: {
-      get() {
-        return this.limit
-      },
-      set(val) {
-        this.$emit('update:limit', val)
-      }
-    }
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.$emit('pagination', { page: this.currentPage, limit: val })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    },
-    handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
-      if (this.autoScroll) {
-        scrollTo(0, 800)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.pagination-container {
-  background: #fff;
-  padding: 32px 16px;
-}
-.pagination-container.hidden {
-  display: none;
-}
-</style>
diff --git a/frontend/src/components/screenfull/index.vue b/frontend/src/components/screenfull/index.vue
deleted file mode 100644
index fc970653ca..0000000000
--- a/frontend/src/components/screenfull/index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <div>
-    <svg-icon
-      :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'"
-      @click="click"
-    />
-  </div>
-</template>
-
-<script>
-import screenfull from 'screenfull'
-
-export default {
-  name: 'Screenfull',
-  data() {
-    return {
-      isFullscreen: false
-    }
-  },
-  mounted() {
-    this.init()
-  },
-  beforeDestroy() {
-    this.destroy()
-  },
-  methods: {
-    click() {
-      if (!screenfull.enabled) {
-        this.$message({
-          message: 'you browser can not work',
-          type: 'warning'
-        })
-        return false
-      }
-      screenfull.toggle()
-    },
-    change() {
-      this.isFullscreen = screenfull.isFullscreen
-    },
-    init() {
-      if (screenfull.enabled) {
-        screenfull.on('change', this.change)
-      }
-    },
-    destroy() {
-      if (screenfull.enabled) {
-        screenfull.off('change', this.change)
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.screenfull-svg {
-  display: inline-block;
-  cursor: pointer;
-  fill: #5a5e66;;
-  width: 20px;
-  height: 20px;
-  vertical-align: 10px;
-}
-</style>
diff --git a/frontend/src/components/sizeSelect/index.vue b/frontend/src/components/sizeSelect/index.vue
deleted file mode 100644
index dae9876809..0000000000
--- a/frontend/src/components/sizeSelect/index.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-  <el-dropdown
-    trigger="click"
-    @command="handleSetSize"
-  >
-    <div>
-      <svg-icon
-        class-name="size-icon"
-        icon-class="size"
-      />
-    </div>
-    <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item
-        v-for="item of sizeOptions"
-        :key="item.value"
-        :disabled="size===item.value"
-        :command="item.value"
-      >
-        {{
-          item.label }}
-      </el-dropdown-item>
-    </el-dropdown-menu>
-  </el-dropdown>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      sizeOptions: [
-        { label: 'Default', value: 'default' },
-        { label: 'Medium', value: 'medium' },
-        { label: 'Small', value: 'small' },
-        { label: 'Mini', value: 'mini' }
-      ]
-    }
-  },
-  computed: {
-    size() {
-      return this.$store.getters.size
-    }
-  },
-  methods: {
-    handleSetSize(size) {
-      this.$ELEMENT.size = size
-      this.$store.dispatch('app/setSize', size)
-      this.refreshView()
-      this.$message({
-        message: '布局设置成功',
-        type: 'success'
-      })
-    },
-    refreshView() {
-      // In order to make the cached page re-rendered
-      // this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
-      const { fullPath } = this.$route
-
-      this.$nextTick(() => {
-        this.$router.replace({
-          path: '/redirect' + fullPath
-        })
-      })
-    }
-  }
-
-}
-</script>
diff --git a/frontend/src/components/themePicker/index.vue b/frontend/src/components/themePicker/index.vue
deleted file mode 100644
index 1bd21b4364..0000000000
--- a/frontend/src/components/themePicker/index.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-  <el-color-picker
-    v-model="theme"
-    :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d']"
-    class="theme-picker"
-    popper-class="theme-picker-dropdown"
-  />
-</template>
-
-<script>
-import { getThemeCluster } from '@/utils/style'
-const version = require('element-ui/package.json').version // element-ui version from node_modules
-const ORIGINAL_THEME = '#409EFF' // default color
-export default {
-  data() {
-    return {
-      chalk: '', // content of theme-chalk css
-      theme: ''
-    }
-  },
-  computed: {
-    defaultTheme() {
-      return this.$store.state.settings.theme
-    }
-  },
-  watch: {
-    defaultTheme: {
-      handler: function(val, oldVal) {
-        this.theme = val
-      },
-      immediate: true
-    },
-    async theme(val) {
-      this.switch(val)
-    }
-  },
-
-  methods: {
-    async switch(val) {
-      const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
-      if (typeof val !== 'string') return
-      const themeCluster = getThemeCluster(val.replace('#', ''))
-      const originalCluster = getThemeCluster(oldVal.replace('#', ''))
-
-      const getHandler = (variable, id) => {
-        return () => {
-          const originalCluster = getThemeCluster(ORIGINAL_THEME.replace('#', ''))
-          const newStyle = this.updateStyle(this[variable], originalCluster, themeCluster)
-
-          let styleTag = document.getElementById(id)
-          if (!styleTag) {
-            styleTag = document.createElement('style')
-            styleTag.setAttribute('id', id)
-            document.head.appendChild(styleTag)
-          }
-          styleTag.innerText = newStyle
-        }
-      }
-
-      if (!this.chalk) {
-        const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
-        await this.getCSSString(url, 'chalk')
-      }
-
-      const chalkHandler = getHandler('chalk', 'chalk-style')
-
-      chalkHandler()
-
-      const styles = [].slice.call(document.querySelectorAll('style'))
-        .filter(style => {
-          const text = style.innerText
-          return new RegExp(oldVal, 'i').test(text) && !/Chalk Variables/.test(text)
-        })
-      styles.forEach(style => {
-        const { innerText } = style
-        if (typeof innerText !== 'string') return
-        style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
-      })
-
-      this.$emit('change', val)
-    },
-    updateStyle(style, oldCluster, newCluster) {
-      let newStyle = style
-      oldCluster.forEach((color, index) => {
-        newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
-      })
-      return newStyle
-    },
-
-    getCSSString(url, variable) {
-      return new Promise(resolve => {
-        const xhr = new XMLHttpRequest()
-        xhr.onreadystatechange = () => {
-          if (xhr.readyState === 4 && xhr.status === 200) {
-            this[variable] = xhr.responseText.replace(/@font-face{[^}]+}/, '')
-            resolve()
-          }
-        }
-        xhr.open('GET', url)
-        xhr.send()
-      })
-    }
-    /*
-    getThemeCluster(theme) {
-      const tintColor = (color, tint) => {
-        let red = parseInt(color.slice(0, 2), 16)
-        let green = parseInt(color.slice(2, 4), 16)
-        let blue = parseInt(color.slice(4, 6), 16)
-
-        if (tint === 0) { // when primary color is in its rgb space
-          return [red, green, blue].join(',')
-        } else {
-          red += Math.round(tint * (255 - red))
-          green += Math.round(tint * (255 - green))
-          blue += Math.round(tint * (255 - blue))
-
-          red = red.toString(16)
-          green = green.toString(16)
-          blue = blue.toString(16)
-
-          return `#${red}${green}${blue}`
-        }
-      }
-
-      const shadeColor = (color, shade) => {
-        let red = parseInt(color.slice(0, 2), 16)
-        let green = parseInt(color.slice(2, 4), 16)
-        let blue = parseInt(color.slice(4, 6), 16)
-
-        red = Math.round((1 - shade) * red)
-        green = Math.round((1 - shade) * green)
-        blue = Math.round((1 - shade) * blue)
-
-        red = red.toString(16)
-        green = green.toString(16)
-        blue = blue.toString(16)
-
-        return `#${red}${green}${blue}`
-      }
-
-      const clusters = [theme]
-      for (let i = 0; i <= 9; i++) {
-        clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
-      }
-      clusters.push(shadeColor(theme, 0.1))
-      return clusters
-    }
-     */
-
-  }
-}
-</script>
-
-<style>
-.theme-message,
-.theme-picker-dropdown {
-  z-index: 99999 !important;
-}
-
-.theme-picker .el-color-picker__trigger {
-  height: 26px !important;
-  width: 26px !important;
-  padding: 2px;
-}
-
-.theme-picker-dropdown .el-color-dropdown__link-btn {
-  display: none;
-}
-</style>
diff --git a/frontend/src/directive/DataPermission/index.js b/frontend/src/directive/DataPermission/index.js
deleted file mode 100644
index 681a63f34c..0000000000
--- a/frontend/src/directive/DataPermission/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-function checkDataPermission(el, binding, vnode) {
-  // eslint-disable-next-line no-unused-vars
-  const dataPermission = vnode.privileges
-  // eslint-disable-next-line no-unused-vars
-  const { value } = binding
-  el.parentNode && el.parentNode.removeChild(el)
-}
-
-export default {
-  inserted(el, binding, vnode) {
-    checkDataPermission(el, binding, vnode)
-  },
-  update(el, binding, vnode) {
-    checkDataPermission(el, binding, vnode)
-  }
-}
diff --git a/frontend/src/lang/es.js b/frontend/src/lang/es.js
deleted file mode 100755
index 477af736cb..0000000000
--- a/frontend/src/lang/es.js
+++ /dev/null
@@ -1,175 +0,0 @@
-export default {
-  route: {
-    dashboard: 'Panel de control',
-    documentation: 'Documentación',
-    guide: 'Guía',
-    permission: 'Permisos',
-    rolePermission: 'Permisos de rol',
-    pagePermission: 'Permisos de la página',
-    directivePermission: 'Permisos de la directiva',
-    icons: 'Iconos',
-    components: 'Components',
-    tinymce: 'Tinymce',
-    markdown: 'Markdown',
-    jsonEditor: 'Editor JSON',
-    dndList: 'Lista Dnd',
-    splitPane: 'Panel dividido',
-    avatarUpload: 'Subir avatar',
-    dropzone: 'Subir ficheros',
-    sticky: 'Sticky',
-    countTo: 'CountTo',
-    componentMixin: 'Mixin',
-    backToTop: 'Ir arriba',
-    dragDialog: 'Drag Dialog',
-    dragSelect: 'Drag Select',
-    dragKanban: 'Drag Kanban',
-    charts: 'Gráficos',
-    keyboardChart: 'Keyboard Chart',
-    lineChart: 'Gráfico de líneas',
-    mixChart: 'Mix Chart',
-    example: 'Ejemplo',
-    nested: 'Rutas anidadass',
-    menu1: 'Menu 1',
-    'menu1-1': 'Menu 1-1',
-    'menu1-2': 'Menu 1-2',
-    'menu1-2-1': 'Menu 1-2-1',
-    'menu1-2-2': 'Menu 1-2-2',
-    'menu1-3': 'Menu 1-3',
-    menu2: 'Menu 2',
-    Table: 'Tabla',
-    dynamicTable: 'Tabla dinámica',
-    dragTable: 'Arrastrar tabla',
-    inlineEditTable: 'Editor',
-    complexTable: 'Complex Table',
-    tab: 'Pestaña',
-    form: 'Formulario',
-    createArticle: 'Crear artículo',
-    editArticle: 'Editar artículo',
-    articleList: 'Listado de artículos',
-    errorPages: 'Páginas de error',
-    page401: '401',
-    page404: '404',
-    errorLog: 'Registro de errores',
-    excel: 'Excel',
-    exportExcel: 'Exportar a Excel',
-    selectExcel: 'Export seleccionado',
-    mergeHeader: 'Merge Header',
-    uploadExcel: 'Subir Excel',
-    zip: 'Zip',
-    pdf: 'PDF',
-    exportZip: 'Exportar a Zip',
-    theme: 'Tema',
-    clipboardDemo: 'Clipboard',
-    i18n: 'I18n',
-    externalLink: 'Enlace externo',
-    profile: 'Profile'
-  },
-  navbar: {
-    logOut: 'Salir',
-    dashboard: 'Panel de control',
-    github: 'Github',
-    theme: 'Tema',
-    size: 'Tamaño global',
-    profile: 'Profile'
-  },
-  login: {
-    title: 'Formulario de acceso',
-    logIn: 'Acceso',
-    username: 'Usuario',
-    password: 'Contraseña',
-    any: 'nada',
-    thirdparty: 'Conectar con',
-    thirdpartyTips: 'No se puede simular en local, así que combine su propia simulación de negocios. ! !'
-  },
-  documentation: {
-    documentation: 'Documentación',
-    github: 'Repositorio Github'
-  },
-  permission: {
-    addRole: 'Nuevo rol',
-    editPermission: 'Permiso de edición',
-    roles: 'Tus permisos',
-    switchRoles: 'Cambiar permisos',
-    tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
-    delete: 'Borrar',
-    confirm: 'Confirmar',
-    cancel: 'Cancelar'
-  },
-  guide: {
-    description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
-    button: 'Ver guía'
-  },
-  components: {
-    documentation: 'Documentación',
-    tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.',
-    dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.',
-    stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
-    backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
-    backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
-    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
-  },
-  table: {
-    dynamicTips1: 'Fixed header, sorted by header order',
-    dynamicTips2: 'Not fixed header, sorted by click order',
-    dragTips1: 'Orden por defecto',
-    dragTips2: 'The after dragging order',
-    title: 'Título',
-    importance: 'Importancia',
-    type: 'Tipo',
-    remark: 'Remark',
-    search: 'Buscar',
-    add: 'Añadir',
-    export: 'Exportar',
-    reviewer: 'reviewer',
-    id: 'ID',
-    date: 'Fecha',
-    author: 'Author',
-    readings: 'Lector',
-    status: 'Estado',
-    actions: 'Acciones',
-    edit: 'Editar',
-    publish: 'Publicar',
-    draft: 'Draft',
-    delete: 'Eliminar',
-    cancel: 'Cancelar',
-    confirm: 'Confirmar'
-  },
-  example: {
-    warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
-  },
-  errorLog: {
-    tips: 'Please click the bug icon in the upper right corner',
-    description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.',
-    documentation: 'Documento de introducción'
-  },
-  excel: {
-    export: 'Exportar',
-    selectedExport: 'Exportar seleccionados',
-    placeholder: 'Por favor escribe un nombre de fichero'
-  },
-  zip: {
-    export: 'Exportar',
-    placeholder: 'Por favor escribe un nombre de fichero'
-  },
-  pdf: {
-    tips: 'Here we use window.print() to implement the feature of downloading pdf.'
-  },
-  theme: {
-    change: 'Cambiar tema',
-    documentation: 'Documentación del tema',
-    tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.'
-  },
-  tagsView: {
-    refresh: 'Actualizar',
-    close: 'Cerrar',
-    closeOthers: 'Cerrar otros',
-    closeAll: 'Cerrar todos'
-  },
-  settings: {
-    title: 'Page style setting',
-    theme: 'Theme Color',
-    tagsView: 'Open Tags-View',
-    fixedHeader: 'Fixed Header',
-    sidebarLogo: 'Sidebar Logo'
-  }
-}
diff --git a/frontend/src/lang/ja.js b/frontend/src/lang/ja.js
deleted file mode 100644
index 7dccd1246b..0000000000
--- a/frontend/src/lang/ja.js
+++ /dev/null
@@ -1,175 +0,0 @@
-export default {
-  route: {
-    dashboard: 'トップ',
-    documentation: 'ドキュメント',
-    guide: 'ガイド',
-    permission: '権限',
-    rolePermission: '権限ロール',
-    pagePermission: 'ページ権限',
-    directivePermission: 'ディレクティブ権限',
-    icons: 'アイコン',
-    components: 'コンポーネント',
-    tinymce: 'TinyMCE',
-    markdown: 'Markdown',
-    jsonEditor: 'JSON Editor',
-    dndList: 'Drag-And-Drop',
-    splitPane: 'パネル',
-    avatarUpload: 'アバターアップロード',
-    dropzone: 'Dropzone',
-    sticky: 'Sticky',
-    countTo: 'Count To',
-    componentMixin: 'コンポーネントMixin',
-    backToTop: 'BackToTop',
-    dragDialog: 'Drag Dialog',
-    dragSelect: 'Drag Select',
-    dragKanban: 'Drag 看板',
-    charts: 'チャート',
-    keyboardChart: 'Keyboardチャート',
-    lineChart: 'Lineチャート',
-    mixChart: 'Mixチャート',
-    example: 'Example',
-    nested: 'Nested Routes',
-    menu1: 'メニュー１',
-    'menu1-1': 'メニュー 1-1',
-    'menu1-2': 'メニュー 1-2',
-    'menu1-2-1': 'メニュー 1-2-1',
-    'menu1-2-2': 'メニュー 1-2-2',
-    'menu1-3': 'メニュー 1-3',
-    menu2: 'メニュー 2',
-    Table: 'Table',
-    dynamicTable: '可変 Table',
-    dragTable: 'Drag Table',
-    inlineEditTable: 'Inline Edit Table',
-    complexTable: 'Complex Table',
-    tab: 'Tab',
-    form: 'フォーム',
-    createArticle: '投稿作成',
-    editArticle: '投稿編集',
-    articleList: '投稿リスト',
-    errorPages: 'エラーページ',
-    page401: '401',
-    page404: '404',
-    errorLog: 'エラーログ',
-    excel: 'Excel',
-    exportExcel: '一括エクスポート',
-    selectExcel: '複数選択エクスポート',
-    mergeHeader: 'ヘッダーマージ',
-    uploadExcel: 'アップロード',
-    zip: 'Zip',
-    pdf: 'PDF',
-    exportZip: 'Export Zip',
-    theme: 'テーマ変更',
-    clipboardDemo: 'Clipboard',
-    i18n: '多言語',
-    externalLink: '外部リンク',
-    profile: 'プロフィール'
-  },
-  navbar: {
-    dashboard: 'トップ',
-    github: 'GitHub',
-    logOut: 'ログアウト',
-    profile: 'プロフィール',
-    theme: 'テーマ変更',
-    size: '画面サイズ'
-  },
-  login: {
-    title: 'ユーザログイン',
-    logIn: 'ログイン',
-    username: 'ユーザ名',
-    password: 'パスワード',
-    any: 'password',
-    thirdparty: '外部IDでログイン',
-    thirdpartyTips: 'ローカル環境ではログインできません。実装が必要です。'
-  },
-  documentation: {
-    documentation: 'ドキュメント',
-    github: 'Github Link'
-  },
-  permission: {
-    addRole: 'ロール追加',
-    editPermission: 'ロール変更',
-    roles: 'ロール',
-    switchRoles: 'ロール切替',
-    tips: 'v-permissionは使えない時があります。例えば: Element-UI の el-tab、 el-table-column 及び他の dom。v-ifを使う必要があります。',
-    delete: '削除',
-    confirm: '確認',
-    cancel: 'キャンセル'
-  },
-  guide: {
-    description: 'ガイドは各機能の説明です。',
-    button: 'ガイドを見る'
-  },
-  components: {
-    documentation: 'ドキュメント',
-    tinymceTips: 'tinymceは管理画面に重要な機能ですが、その同時に落とし穴がありあす。tinymceを使う道のりが大変でした。Tinymceを使う時に各自のプロジェクト状況で判断が必要です。ドキュメントはこちら',
-    dropzoneTips: 'Third partyのパッケージを使わず、独自の実装しています。詳細は @/components/Dropzone',
-    stickyTips: 'ページの指定位置へスクロールした場合、表示されます。',
-    backToTopTips1: 'トップへスクロールが表示されます。',
-    backToTopTips2: 'ボタンのスタイルはカスタマイズできます。例えば、show/hide、height、position。 またはElementのel-tooltipを使って、ツールチップを実装できます。',
-    imageUploadTips: 'mockjsは使えないため、カスタマイズしています。公式の最新バージョンを使ってください。'
-  },
-  table: {
-    dynamicTips1: '先頭は固定、最後に追加',
-    dynamicTips2: '戦後に追加せず、指定列に追加',
-    dragTips1: 'デフォルト順番',
-    dragTips2: 'Drag後の順番',
-    title: 'タイトル',
-    importance: '重要',
-    type: 'タイプ',
-    remark: '評価',
-    search: '検索',
-    add: '追加',
-    export: 'エクスポート',
-    reviewer: 'レビュアー',
-    id: '番号',
-    date: '日時',
-    author: '作成者',
-    readings: '閲覧数',
-    status: 'ステータス',
-    actions: '操作',
-    edit: '編集',
-    publish: '公開',
-    draft: '下書き',
-    delete: 'キャンセル',
-    cancel: 'キャンセル',
-    confirm: '確認'
-  },
-  example: {
-    warning: '新規作成と編集画面は keep-alive を使えないです。keep-alive の include はrouteのキャッシュは使えないです。そのため、component name を使ってキャッシュさせるようにします。このようなキャッシュ機能を作りたい場合，localStorageを使う手があります。もしくは keep-alive の includeを使って、全ページキャッシュする方法はあります。'
-  },
-  errorLog: {
-    tips: '右上のbugアイコンをクリックしてください。',
-    description: '管理画面はspaを使う場合が多い、ユーザ体現向上はできますが、想定外エラーが発生する場合があります。Vueはそのエラーハンドリング機能を提供し、エラーレポートができます。',
-    documentation: 'ドキュメント'
-  },
-  excel: {
-    export: 'エクスポート',
-    selectedExport: 'エクスポート対象を選択してください。',
-    placeholder: 'ファイル名を入力してください。'
-  },
-  zip: {
-    export: 'エクスポート',
-    placeholder: 'ファイル名を入力してください。'
-  },
-  pdf: {
-    tips: 'window.print() を使ってPDFダウンロードしています。'
-  },
-  theme: {
-    change: 'テーマ切替',
-    documentation: 'ドキュメント',
-    tips: 'Tips: テーマの切り替え方法はnavbarのtheme-pickと異なります、使い方はドキュメントを確認してください。'
-  },
-  tagsView: {
-    refresh: '更新',
-    close: '閉じる',
-    closeOthers: 'その他閉じる',
-    closeAll: 'すべて閉じる'
-  },
-  settings: {
-    title: 'システムテーマ',
-    theme: 'テーマ色',
-    tagsView: 'Tags-View 開く',
-    fixedHeader: 'Fixed Header',
-    sidebarLogo: 'Sidebar Logo'
-  }
-}
diff --git a/frontend/src/plugins/Blob.js b/frontend/src/plugins/Blob.js
deleted file mode 100644
index 5ffc1337fd..0000000000
--- a/frontend/src/plugins/Blob.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/* eslint-disable */
-/* Blob.js*/
-
-/*global self, unescape */
-/*jslint bitwise: true, regexp: true, confusion: true, es5: true, vars: true, white: true,
-  plusplus: true */
-
-/*! @source http://purl.eligrey.com/github/Blob.js/blob/master/Blob.js */
-
-(function (view) {
-    "use strict";
-  
-    view.URL = view.URL || view.webkitURL;
-  
-    if (view.Blob && view.URL) {
-      try {
-        new Blob;
-        return;
-      } catch (e) {
-      }
-    }
-  
-    // Internally we use a BlobBuilder implementation to base Blob off of
-    // in order to support older browsers that only have BlobBuilder
-    var BlobBuilder = view.BlobBuilder || view.WebKitBlobBuilder || view.MozBlobBuilder || (function (view) {
-      var
-        get_class = function (object) {
-          return Object.prototype.toString.call(object).match(/^\[object\s(.*)\]$/)[1];
-        }
-        , FakeBlobBuilder = function BlobBuilder() {
-          this.data = [];
-        }
-        , FakeBlob = function Blob(data, type, encoding) {
-          this.data = data;
-          this.size = data.length;
-          this.type = type;
-          this.encoding = encoding;
-        }
-        , FBB_proto = FakeBlobBuilder.prototype
-        , FB_proto = FakeBlob.prototype
-        , FileReaderSync = view.FileReaderSync
-        , FileException = function (type) {
-          this.code = this[this.name = type];
-        }
-        , file_ex_codes = (
-          "NOT_FOUND_ERR SECURITY_ERR ABORT_ERR NOT_READABLE_ERR ENCODING_ERR "
-          + "NO_MODIFICATION_ALLOWED_ERR INVALID_STATE_ERR SYNTAX_ERR"
-        ).split(" ")
-        , file_ex_code = file_ex_codes.length
-        , real_URL = view.URL || view.webkitURL || view
-        , real_create_object_URL = real_URL.createObjectURL
-        , real_revoke_object_URL = real_URL.revokeObjectURL
-        , URL = real_URL
-        , btoa = view.btoa
-        , atob = view.atob
-  
-        , ArrayBuffer = view.ArrayBuffer
-        , Uint8Array = view.Uint8Array
-  
-        , origin = /^[\w-]+:\/*\[?[\w\.:-]+\]?(?::[0-9]+)?/
-      ;
-      FakeBlob.fake = FB_proto.fake = true;
-      while (file_ex_code--) {
-        FileException.prototype[file_ex_codes[file_ex_code]] = file_ex_code + 1;
-      }
-      // Polyfill URL
-      if (!real_URL.createObjectURL) {
-        URL = view.URL = function (uri) {
-          var
-            uri_info = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
-            , uri_origin
-          ;
-          uri_info.href = uri;
-          if (!("origin" in uri_info)) {
-            if (uri_info.protocol.toLowerCase() === "data:") {
-              uri_info.origin = null;
-            } else {
-              uri_origin = uri.match(origin);
-              uri_info.origin = uri_origin && uri_origin[1];
-            }
-          }
-          return uri_info;
-        };
-      }
-      URL.createObjectURL = function (blob) {
-        var
-          type = blob.type
-          , data_URI_header
-        ;
-        if (type === null) {
-          type = "application/octet-stream";
-        }
-        if (blob instanceof FakeBlob) {
-          data_URI_header = "data:" + type;
-          if (blob.encoding === "base64") {
-            return data_URI_header + ";base64," + blob.data;
-          } else if (blob.encoding === "URI") {
-            return data_URI_header + "," + decodeURIComponent(blob.data);
-          }
-          if (btoa) {
-            return data_URI_header + ";base64," + btoa(blob.data);
-          } else {
-            return data_URI_header + "," + encodeURIComponent(blob.data);
-          }
-        } else if (real_create_object_URL) {
-          return real_create_object_URL.call(real_URL, blob);
-        }
-      };
-      URL.revokeObjectURL = function (object_URL) {
-        if (object_URL.substring(0, 5) !== "data:" && real_revoke_object_URL) {
-          real_revoke_object_URL.call(real_URL, object_URL);
-        }
-      };
-      FBB_proto.append = function (data/*, endings*/) {
-        var bb = this.data;
-        // decode data to a binary string
-        if (Uint8Array && (data instanceof ArrayBuffer || data instanceof Uint8Array)) {
-          var
-            str = ""
-            , buf = new Uint8Array(data)
-            , i = 0
-            , buf_len = buf.length
-          ;
-          for (; i < buf_len; i++) {
-            str += String.fromCharCode(buf[i]);
-          }
-          bb.push(str);
-        } else if (get_class(data) === "Blob" || get_class(data) === "File") {
-          if (FileReaderSync) {
-            var fr = new FileReaderSync;
-            bb.push(fr.readAsBinaryString(data));
-          } else {
-            // async FileReader won't work as BlobBuilder is sync
-            throw new FileException("NOT_READABLE_ERR");
-          }
-        } else if (data instanceof FakeBlob) {
-          if (data.encoding === "base64" && atob) {
-            bb.push(atob(data.data));
-          } else if (data.encoding === "URI") {
-            bb.push(decodeURIComponent(data.data));
-          } else if (data.encoding === "raw") {
-            bb.push(data.data);
-          }
-        } else {
-          if (typeof data !== "string") {
-            data += ""; // convert unsupported types to strings
-          }
-          // decode UTF-16 to binary string
-          bb.push(unescape(encodeURIComponent(data)));
-        }
-      };
-      FBB_proto.getBlob = function (type) {
-        if (!arguments.length) {
-          type = null;
-        }
-        return new FakeBlob(this.data.join(""), type, "raw");
-      };
-      FBB_proto.toString = function () {
-        return "[object BlobBuilder]";
-      };
-      FB_proto.slice = function (start, end, type) {
-        var args = arguments.length;
-        if (args < 3) {
-          type = null;
-        }
-        return new FakeBlob(
-          this.data.slice(start, args > 1 ? end : this.data.length)
-          , type
-          , this.encoding
-        );
-      };
-      FB_proto.toString = function () {
-        return "[object Blob]";
-      };
-      FB_proto.close = function () {
-        this.size = 0;
-        delete this.data;
-      };
-      return FakeBlobBuilder;
-    }(view));
-  
-    view.Blob = function (blobParts, options) {
-      var type = options ? (options.type || "") : "";
-      var builder = new BlobBuilder();
-      if (blobParts) {
-        for (var i = 0, len = blobParts.length; i < len; i++) {
-          if (Uint8Array && blobParts[i] instanceof Uint8Array) {
-            builder.append(blobParts[i].buffer);
-          }
-          else {
-            builder.append(blobParts[i]);
-          }
-        }
-      }
-      var blob = builder.getBlob(type);
-      if (!blob.slice && blob.webkitSlice) {
-        blob.slice = blob.webkitSlice;
-      }
-      return blob;
-    };
-  
-    var getPrototypeOf = Object.getPrototypeOf || function (object) {
-      return object.__proto__;
-    };
-    view.Blob.prototype = getPrototypeOf(new view.Blob());
-  }(
-    typeof self !== "undefined" && self
-    || typeof window !== "undefined" && window
-    || this
-  ));
\ No newline at end of file
diff --git a/frontend/src/plugins/Export2Excel.js b/frontend/src/plugins/Export2Excel.js
deleted file mode 100644
index f0e998b019..0000000000
--- a/frontend/src/plugins/Export2Excel.js
+++ /dev/null
@@ -1,137 +0,0 @@
-require('script-loader!file-saver')
-/* 这里的路径换成自己的 */
-require('@/plugins/Blob.js')
-require('script-loader!xlsx/dist/xlsx.core.min')
-
-function generateArray(table) {
-  var out = []
-  var rows = table.querySelectorAll('tr')
-  var ranges = []
-  for (var R = 0; R < rows.length; ++R) {
-    var outRow = []
-    var row = rows[R]
-    var columns = row.querySelectorAll('td')
-    for (var C = 0; C < columns.length; ++C) {
-      var cell = columns[C]
-      var colspan = cell.getAttribute('colspan')
-      var rowspan = cell.getAttribute('rowspan')
-      var cellValue = cell.innerText
-      if (cellValue !== '' && cellValue === +cellValue) cellValue = +cellValue
-
-      // Skip ranges
-      ranges.forEach(function(range) {
-        if (R >= range.s.r && R <= range.e.r && outRow.length >= range.s.c && outRow.length <= range.e.c) {
-          for (var i = 0; i <= range.e.c - range.s.c; ++i) outRow.push(null)
-        }
-      })
-
-      // Handle Row Span
-      if (rowspan || colspan) {
-        rowspan = rowspan || 1
-        colspan = colspan || 1
-        ranges.push({ s: { r: R, c: outRow.length }, e: { r: R + rowspan - 1, c: outRow.length + colspan - 1 }})
-      }
-
-      // Handle Value
-      outRow.push(cellValue !== '' ? cellValue : null)
-
-      // Handle Colspan
-      if (colspan) for (var k = 0; k < colspan - 1; ++k) outRow.push(null)
-    }
-    out.push(outRow)
-  }
-  return [out, ranges]
-}
-
-function datenum(v, date1904) {
-  if (date1904) v += 1462
-  var epoch = Date.parse(v)
-  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000)
-}
-
-function sheet_from_array_of_arrays(data, opts) {
-  var ws = {}
-  var range = { s: { c: 10000000, r: 10000000 }, e: { c: 0, r: 0 }}
-  for (var R = 0; R !== data.length; ++R) {
-    for (var C = 0; C !== data[R].length; ++C) {
-      if (range.s.r > R) range.s.r = R
-      if (range.s.c > C) range.s.c = C
-      if (range.e.r < R) range.e.r = R
-      if (range.e.c < C) range.e.c = C
-      var cell = { v: data[R][C] }
-      if (cell.v === null) continue
-      // eslint-disable-next-line
-      var cell_ref = XLSX.utils.encode_cell({ c: C, r: R })
-
-      if (typeof cell.v === 'number') cell.t = 'n'
-      else if (typeof cell.v === 'boolean') cell.t = 'b'
-      else if (cell.v instanceof Date) {
-        cell.t = 'n'
-        // eslint-disable-next-line
-        cell.z = XLSX.SSF._table[14]
-        cell.v = datenum(cell.v)
-      } else cell.t = 's'
-
-      ws[cell_ref] = cell
-    }
-  }
-  // eslint-disable-next-line
-  if (range.s.c < 10000000) ws['!ref'] = XLSX.utils.encode_range(range)
-  return ws
-}
-
-function Workbook() {
-  if (!(this instanceof Workbook)) return new Workbook()
-  this.SheetNames = []
-  this.Sheets = {}
-}
-
-function s2ab(s) {
-  var buf = new ArrayBuffer(s.length)
-  var view = new Uint8Array(buf)
-  for (var i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF
-  return buf
-}
-
-export function export_table_to_excel(id) {
-  var theTable = document.getElementById(id)
-  var oo = generateArray(theTable)
-  var ranges = oo[1]
-
-  /* original data */
-  var data = oo[0]
-  var ws_name = 'SheetJS'
-
-  var wb = new Workbook(); var ws = sheet_from_array_of_arrays(data)
-
-  /* add ranges to worksheet */
-  // ws['!cols'] = ['apple', 'banan'];
-  ws['!merges'] = ranges
-
-  /* add worksheet to workbook */
-  wb.SheetNames.push(ws_name)
-  wb.Sheets[ws_name] = ws
-  // eslint-disable-next-line
-  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })
-  // eslint-disable-next-line
-  saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'test.xlsx')
-}
-
-export function export_json_to_excel(th, jsonData, defaultTitle) {
-  /* original data */
-
-  var data = jsonData
-  data.unshift(th)
-  var ws_name = 'SheetJS'
-
-  var wb = new Workbook(); var ws = sheet_from_array_of_arrays(data)
-
-  /* add worksheet to workbook */
-  wb.SheetNames.push(ws_name)
-  wb.Sheets[ws_name] = ws
-  // eslint-disable-next-line
-  var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'binary' })
-  var title = defaultTitle || '列表'
-  // eslint-disable-next-line
-  saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), title + '.xlsx')
-}
diff --git a/frontend/src/styles/deicon/demo.css b/frontend/src/styles/deicon/demo.css
deleted file mode 100644
index a67054a0a0..0000000000
--- a/frontend/src/styles/deicon/demo.css
+++ /dev/null
@@ -1,539 +0,0 @@
-/* Logo 字体 */
-@font-face {
-  font-family: "iconfont logo";
-  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
-  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
-}
-
-.logo {
-  font-family: "iconfont logo";
-  font-size: 160px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* tabs */
-.nav-tabs {
-  position: relative;
-}
-
-.nav-tabs .nav-more {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  height: 42px;
-  line-height: 42px;
-  color: #666;
-}
-
-#tabs {
-  border-bottom: 1px solid #eee;
-}
-
-#tabs li {
-  cursor: pointer;
-  width: 100px;
-  height: 40px;
-  line-height: 40px;
-  text-align: center;
-  font-size: 16px;
-  border-bottom: 2px solid transparent;
-  position: relative;
-  z-index: 1;
-  margin-bottom: -1px;
-  color: #666;
-}
-
-
-#tabs .active {
-  border-bottom-color: #f00;
-  color: #222;
-}
-
-.tab-container .content {
-  display: none;
-}
-
-/* 页面布局 */
-.main {
-  padding: 30px 100px;
-  width: 960px;
-  margin: 0 auto;
-}
-
-.main .logo {
-  color: #333;
-  text-align: left;
-  margin-bottom: 30px;
-  line-height: 1;
-  height: 110px;
-  margin-top: -50px;
-  overflow: hidden;
-  *zoom: 1;
-}
-
-.main .logo a {
-  font-size: 160px;
-  color: #333;
-}
-
-.helps {
-  margin-top: 40px;
-}
-
-.helps pre {
-  padding: 20px;
-  margin: 10px 0;
-  border: solid 1px #e7e1cd;
-  background-color: #fffdef;
-  overflow: auto;
-}
-
-.icon_lists {
-  width: 100% !important;
-  overflow: hidden;
-  *zoom: 1;
-}
-
-.icon_lists li {
-  width: 100px;
-  margin-bottom: 10px;
-  margin-right: 20px;
-  text-align: center;
-  list-style: none !important;
-  cursor: default;
-}
-
-.icon_lists li .code-name {
-  line-height: 1.2;
-}
-
-.icon_lists .icon {
-  display: block;
-  height: 100px;
-  line-height: 100px;
-  font-size: 42px;
-  margin: 10px auto;
-  color: #333;
-  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
-  -moz-transition: font-size 0.25s linear, width 0.25s linear;
-  transition: font-size 0.25s linear, width 0.25s linear;
-}
-
-.icon_lists .icon:hover {
-  font-size: 100px;
-}
-
-.icon_lists .svg-icon {
-  /* 通过设置 font-size 来改变图标大小 */
-  width: 1em;
-  /* 图标和文字相邻时，垂直对齐 */
-  vertical-align: -0.15em;
-  /* 通过设置 color 来改变 SVG 的颜色/fill */
-  fill: currentColor;
-  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
-      normalize.css 中也包含这行 */
-  overflow: hidden;
-}
-
-.icon_lists li .name,
-.icon_lists li .code-name {
-  color: #666;
-}
-
-/* markdown 样式 */
-.markdown {
-  color: #666;
-  font-size: 14px;
-  line-height: 1.8;
-}
-
-.highlight {
-  line-height: 1.5;
-}
-
-.markdown img {
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-.markdown h1 {
-  color: #404040;
-  font-weight: 500;
-  line-height: 40px;
-  margin-bottom: 24px;
-}
-
-.markdown h2,
-.markdown h3,
-.markdown h4,
-.markdown h5,
-.markdown h6 {
-  color: #404040;
-  margin: 1.6em 0 0.6em 0;
-  font-weight: 500;
-  clear: both;
-}
-
-.markdown h1 {
-  font-size: 28px;
-}
-
-.markdown h2 {
-  font-size: 22px;
-}
-
-.markdown h3 {
-  font-size: 16px;
-}
-
-.markdown h4 {
-  font-size: 14px;
-}
-
-.markdown h5 {
-  font-size: 12px;
-}
-
-.markdown h6 {
-  font-size: 12px;
-}
-
-.markdown hr {
-  height: 1px;
-  border: 0;
-  background: #e9e9e9;
-  margin: 16px 0;
-  clear: both;
-}
-
-.markdown p {
-  margin: 1em 0;
-}
-
-.markdown>p,
-.markdown>blockquote,
-.markdown>.highlight,
-.markdown>ol,
-.markdown>ul {
-  width: 80%;
-}
-
-.markdown ul>li {
-  list-style: circle;
-}
-
-.markdown>ul li,
-.markdown blockquote ul>li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown>ul li p,
-.markdown>ol li p {
-  margin: 0.6em 0;
-}
-
-.markdown ol>li {
-  list-style: decimal;
-}
-
-.markdown>ol li,
-.markdown blockquote ol>li {
-  margin-left: 20px;
-  padding-left: 4px;
-}
-
-.markdown code {
-  margin: 0 3px;
-  padding: 0 5px;
-  background: #eee;
-  border-radius: 3px;
-}
-
-.markdown strong,
-.markdown b {
-  font-weight: 600;
-}
-
-.markdown>table {
-  border-collapse: collapse;
-  border-spacing: 0px;
-  empty-cells: show;
-  border: 1px solid #e9e9e9;
-  width: 95%;
-  margin-bottom: 24px;
-}
-
-.markdown>table th {
-  white-space: nowrap;
-  color: #333;
-  font-weight: 600;
-}
-
-.markdown>table th,
-.markdown>table td {
-  border: 1px solid #e9e9e9;
-  padding: 8px 16px;
-  text-align: left;
-}
-
-.markdown>table th {
-  background: #F7F7F7;
-}
-
-.markdown blockquote {
-  font-size: 90%;
-  color: #999;
-  border-left: 4px solid #e9e9e9;
-  padding-left: 0.8em;
-  margin: 1em 0;
-}
-
-.markdown blockquote p {
-  margin: 0;
-}
-
-.markdown .anchor {
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  margin-left: 8px;
-}
-
-.markdown .waiting {
-  color: #ccc;
-}
-
-.markdown h1:hover .anchor,
-.markdown h2:hover .anchor,
-.markdown h3:hover .anchor,
-.markdown h4:hover .anchor,
-.markdown h5:hover .anchor,
-.markdown h6:hover .anchor {
-  opacity: 1;
-  display: inline-block;
-}
-
-.markdown>br,
-.markdown>p>br {
-  clear: both;
-}
-
-
-.hljs {
-  display: block;
-  background: white;
-  padding: 0.5em;
-  color: #333333;
-  overflow-x: auto;
-}
-
-.hljs-comment,
-.hljs-meta {
-  color: #969896;
-}
-
-.hljs-string,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-strong,
-.hljs-emphasis,
-.hljs-quote {
-  color: #df5000;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-type {
-  color: #a71d5d;
-}
-
-.hljs-literal,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-attribute {
-  color: #0086b3;
-}
-
-.hljs-section,
-.hljs-name {
-  color: #63a35c;
-}
-
-.hljs-tag {
-  color: #333333;
-}
-
-.hljs-title,
-.hljs-attr,
-.hljs-selector-id,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo {
-  color: #795da3;
-}
-
-.hljs-addition {
-  color: #55a532;
-  background-color: #eaffea;
-}
-
-.hljs-deletion {
-  color: #bd2c00;
-  background-color: #ffecec;
-}
-
-.hljs-link {
-  text-decoration: underline;
-}
-
-/* 代码高亮 */
-/* PrismJS 1.15.0
-https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
-/**
- * prism.js default theme for JavaScript, CSS and HTML
- * Based on dabblet (http://dabblet.com)
- * @author Lea Verou
- */
-code[class*="language-"],
-pre[class*="language-"] {
-  color: black;
-  background: none;
-  text-shadow: 0 1px white;
-  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  word-wrap: normal;
-  line-height: 1.5;
-
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-pre[class*="language-"]::-moz-selection,
-pre[class*="language-"] ::-moz-selection,
-code[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre[class*="language-"]::selection,
-pre[class*="language-"] ::selection,
-code[class*="language-"]::selection,
-code[class*="language-"] ::selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-@media print {
-
-  code[class*="language-"],
-  pre[class*="language-"] {
-    text-shadow: none;
-  }
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-  padding: 1em;
-  margin: .5em 0;
-  overflow: auto;
-}
-
-:not(pre)>code[class*="language-"],
-pre[class*="language-"] {
-  background: #f5f2f0;
-}
-
-/* Inline code */
-:not(pre)>code[class*="language-"] {
-  padding: .1em;
-  border-radius: .3em;
-  white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: slategray;
-}
-
-.token.punctuation {
-  color: #999;
-}
-
-.namespace {
-  opacity: .7;
-}
-
-.token.property,
-.token.tag,
-.token.boolean,
-.token.number,
-.token.constant,
-.token.symbol,
-.token.deleted {
-  color: #905;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-  color: #690;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string {
-  color: #9a6e3a;
-  background: hsla(0, 0%, 100%, .5);
-}
-
-.token.atrule,
-.token.attr-value,
-.token.keyword {
-  color: #07a;
-}
-
-.token.function,
-.token.class-name {
-  color: #DD4A68;
-}
-
-.token.regex,
-.token.important,
-.token.variable {
-  color: #e90;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html
deleted file mode 100644
index 767b048576..0000000000
--- a/frontend/src/styles/deicon/demo_index.html
+++ /dev/null
@@ -1,2925 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8"/>
-  <title>iconfont Demo</title>
-  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
-  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
-  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
-  <link rel="stylesheet" href="demo.css">
-  <link rel="stylesheet" href="iconfont.css">
-  <script src="iconfont.js"></script>
-  <!-- jQuery -->
-  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
-  <!-- 代码高亮 -->
-  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
-  <style>
-    .main .logo {
-      margin-top: 0;
-      height: auto;
-    }
-
-    .main .logo a {
-      display: flex;
-      align-items: center;
-    }
-
-    .main .logo .sub-title {
-      margin-left: 0.5em;
-      font-size: 22px;
-      color: #fff;
-      background: linear-gradient(-45deg, #3967FF, #B500FE);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-  </style>
-</head>
-<body>
-  <div class="main">
-    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
-      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
-      
-    </a></h1>
-    <div class="nav-tabs">
-      <ul id="tabs" class="dib-box">
-        <li class="dib active"><span>Unicode</span></li>
-        <li class="dib"><span>Font class</span></li>
-        <li class="dib"><span>Symbol</span></li>
-      </ul>
-      
-      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2459092" target="_blank" class="nav-more">查看项目</a>
-      
-    </div>
-    <div class="tab-container">
-      <div class="content unicode" style="display: block;">
-          <ul class="icon_lists dib-box">
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe89e;</span>
-                <div class="name">application</div>
-                <div class="code-name">&amp;#xe89e;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6ef;</span>
-                <div class="name">data-source-24</div>
-                <div class="code-name">&amp;#xe6ef;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe63c;</span>
-                <div class="name">重置</div>
-                <div class="code-name">&amp;#xe63c;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe638;</span>
-                <div class="name">None_Select</div>
-                <div class="code-name">&amp;#xe638;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe635;</span>
-                <div class="name">button_right</div>
-                <div class="code-name">&amp;#xe635;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe631;</span>
-                <div class="name">icon-maybe</div>
-                <div class="code-name">&amp;#xe631;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe632;</span>
-                <div class="name">icon_up-left_outlined</div>
-                <div class="code-name">&amp;#xe632;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe633;</span>
-                <div class="name">close</div>
-                <div class="code-name">&amp;#xe633;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe634;</span>
-                <div class="name">Frame 3425</div>
-                <div class="code-name">&amp;#xe634;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe636;</span>
-                <div class="name">icon-filter</div>
-                <div class="code-name">&amp;#xe636;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe630;</span>
-                <div class="name">icon_Batch_outlined</div>
-                <div class="code-name">&amp;#xe630;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe61d;</span>
-                <div class="name">icon_clear_outlined</div>
-                <div class="code-name">&amp;#xe61d;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe61e;</span>
-                <div class="name">icon_dialpad_outlined</div>
-                <div class="code-name">&amp;#xe61e;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe620;</span>
-                <div class="name">icon_effects_outlined</div>
-                <div class="code-name">&amp;#xe620;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe621;</span>
-                <div class="name">icon_magnify_outlined</div>
-                <div class="code-name">&amp;#xe621;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe623;</span>
-                <div class="name">icon_moments-categories_outlined</div>
-                <div class="code-name">&amp;#xe623;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe626;</span>
-                <div class="name">icon_pc_outlined</div>
-                <div class="code-name">&amp;#xe626;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe627;</span>
-                <div class="name">icon_phone_outlined</div>
-                <div class="code-name">&amp;#xe627;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe629;</span>
-                <div class="name">icon_redo_outlined</div>
-                <div class="code-name">&amp;#xe629;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe62b;</span>
-                <div class="name">icon_undo_outlined</div>
-                <div class="code-name">&amp;#xe62b;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe62e;</span>
-                <div class="name">icon-more</div>
-                <div class="code-name">&amp;#xe62e;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe62f;</span>
-                <div class="name">icon-quicksetting</div>
-                <div class="code-name">&amp;#xe62f;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe73e;</span>
-                <div class="name">square-selected</div>
-                <div class="code-name">&amp;#xe73e;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe777;</span>
-                <div class="name">italic</div>
-                <div class="code-name">&amp;#xe777;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe622;</span>
-                <div class="name">箭头</div>
-                <div class="code-name">&amp;#xe622;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe63a;</span>
-                <div class="name">magic-line</div>
-                <div class="code-name">&amp;#xe63a;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe60c;</span>
-                <div class="name">更多</div>
-                <div class="code-name">&amp;#xe60c;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe61c;</span>
-                <div class="name">清空</div>
-                <div class="code-name">&amp;#xe61c;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe610;</span>
-                <div class="name">查看</div>
-                <div class="code-name">&amp;#xe610;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe68c;</span>
-                <div class="name">outline-redo</div>
-                <div class="code-name">&amp;#xe68c;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe68d;</span>
-                <div class="name">outline-undo</div>
-                <div class="code-name">&amp;#xe68d;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe60a;</span>
-                <div class="name">定位</div>
-                <div class="code-name">&amp;#xe60a;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe670;</span>
-                <div class="name">富文本框</div>
-                <div class="code-name">&amp;#xe670;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6e5;</span>
-                <div class="name">下架</div>
-                <div class="code-name">&amp;#xe6e5;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6e6;</span>
-                <div class="name">上架</div>
-                <div class="code-name">&amp;#xe6e6;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe71f;</span>
-                <div class="name">发布</div>
-                <div class="code-name">&amp;#xe71f;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe61b;</span>
-                <div class="name">批量操作</div>
-                <div class="code-name">&amp;#xe61b;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe666;</span>
-                <div class="name">图片</div>
-                <div class="code-name">&amp;#xe666;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6e4;</span>
-                <div class="name">超链接</div>
-                <div class="code-name">&amp;#xe6e4;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe618;</span>
-                <div class="name">跳转</div>
-                <div class="code-name">&amp;#xe618;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe616;</span>
-                <div class="name">跳转</div>
-                <div class="code-name">&amp;#xe616;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe60b;</span>
-                <div class="name">网格\表格</div>
-                <div class="code-name">&amp;#xe60b;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe609;</span>
-                <div class="name">关闭网格</div>
-                <div class="code-name">&amp;#xe609;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe607;</span>
-                <div class="name">流媒体，媒体列表</div>
-                <div class="code-name">&amp;#xe607;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6de;</span>
-                <div class="name">iframe</div>
-                <div class="code-name">&amp;#xe6de;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6d7;</span>
-                <div class="name">参数</div>
-                <div class="code-name">&amp;#xe6d7;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe606;</span>
-                <div class="name">更换</div>
-                <div class="code-name">&amp;#xe606;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe605;</span>
-                <div class="name">发送邮件</div>
-                <div class="code-name">&amp;#xe605;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6f8;</span>
-                <div class="name">github</div>
-                <div class="code-name">&amp;#xe6f8;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe681;</span>
-                <div class="name">电话</div>
-                <div class="code-name">&amp;#xe681;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe60d;</span>
-                <div class="name">关闭</div>
-                <div class="code-name">&amp;#xe60d;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe67e;</span>
-                <div class="name">矩形</div>
-                <div class="code-name">&amp;#xe67e;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe653;</span>
-                <div class="name">移动端</div>
-                <div class="code-name">&amp;#xe653;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe625;</span>
-                <div class="name">video</div>
-                <div class="code-name">&amp;#xe625;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6e8;</span>
-                <div class="name">悬浮按钮发动态</div>
-                <div class="code-name">&amp;#xe6e8;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe697;</span>
-                <div class="name">吸附选择</div>
-                <div class="code-name">&amp;#xe697;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe902;</span>
-                <div class="name">margin</div>
-                <div class="code-name">&amp;#xe902;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe91b;</span>
-                <div class="name">padding</div>
-                <div class="code-name">&amp;#xe91b;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe665;</span>
-                <div class="name">时间</div>
-                <div class="code-name">&amp;#xe665;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6fb;</span>
-                <div class="name">时间格式转换</div>
-                <div class="code-name">&amp;#xe6fb;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe9b2;</span>
-                <div class="name">超链接</div>
-                <div class="code-name">&amp;#xe9b2;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe60f;</span>
-                <div class="name">科学技术</div>
-                <div class="code-name">&amp;#xe60f;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe69c;</span>
-                <div class="name">符号-数据矩阵</div>
-                <div class="code-name">&amp;#xe69c;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xeb85;</span>
-                <div class="name">视图矩阵_o</div>
-                <div class="code-name">&amp;#xeb85;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe62c;</span>
-                <div class="name">悬浮</div>
-                <div class="code-name">&amp;#xe62c;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6db;</span>
-                <div class="name">右悬浮-选中</div>
-                <div class="code-name">&amp;#xe6db;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6f6;</span>
-                <div class="name">悬浮</div>
-                <div class="code-name">&amp;#xe6f6;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe8e6;</span>
-                <div class="name">悬浮按钮</div>
-                <div class="code-name">&amp;#xe8e6;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xeb86;</span>
-                <div class="name">右悬浮-选中</div>
-                <div class="code-name">&amp;#xeb86;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe62a;</span>
-                <div class="name">44.tabs</div>
-                <div class="code-name">&amp;#xe62a;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe619;</span>
-                <div class="name">洗浴</div>
-                <div class="code-name">&amp;#xe619;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe973;</span>
-                <div class="name">线性图标-取消下钻</div>
-                <div class="code-name">&amp;#xe973;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6ed;</span>
-                <div class="name">线性图标-取消下钻</div>
-                <div class="code-name">&amp;#xe6ed;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6f7;</span>
-                <div class="name">联动</div>
-                <div class="code-name">&amp;#xe6f7;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe613;</span>
-                <div class="name">下钻</div>
-                <div class="code-name">&amp;#xe613;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe61f;</span>
-                <div class="name">上钻</div>
-                <div class="code-name">&amp;#xe61f;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe637;</span>
-                <div class="name">取消联动</div>
-                <div class="code-name">&amp;#xe637;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe604;</span>
-                <div class="name">edit-2</div>
-                <div class="code-name">&amp;#xe604;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe612;</span>
-                <div class="name">edit-2</div>
-                <div class="code-name">&amp;#xe612;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe706;</span>
-                <div class="name">详情</div>
-                <div class="code-name">&amp;#xe706;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe603;</span>
-                <div class="name">弧形框</div>
-                <div class="code-name">&amp;#xe603;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe602;</span>
-                <div class="name">弧形框</div>
-                <div class="code-name">&amp;#xe602;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe642;</span>
-                <div class="name">透明</div>
-                <div class="code-name">&amp;#xe642;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe61a;</span>
-                <div class="name">弧度</div>
-                <div class="code-name">&amp;#xe61a;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe62d;</span>
-                <div class="name">放大</div>
-                <div class="code-name">&amp;#xe62d;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe696;</span>
-                <div class="name">设 置</div>
-                <div class="code-name">&amp;#xe696;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe655;</span>
-                <div class="name">屏幕_全屏</div>
-                <div class="code-name">&amp;#xe655;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe659;</span>
-                <div class="name">font-weight-bold</div>
-                <div class="code-name">&amp;#xe659;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe601;</span>
-                <div class="name">letter_spacing</div>
-                <div class="code-name">&amp;#xe601;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe679;</span>
-                <div class="name">letter-spacing</div>
-                <div class="code-name">&amp;#xe679;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe60e;</span>
-                <div class="name">字体颜色</div>
-                <div class="code-name">&amp;#xe60e;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6c3;</span>
-                <div class="name">format_letter_spacing_2</div>
-                <div class="code-name">&amp;#xe6c3;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe710;</span>
-                <div class="name">font_size</div>
-                <div class="code-name">&amp;#xe710;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe972;</span>
-                <div class="name">居中</div>
-                <div class="code-name">&amp;#xe972;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe608;</span>
-                <div class="name">居右</div>
-                <div class="code-name">&amp;#xe608;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe688;</span>
-                <div class="name">居左</div>
-                <div class="code-name">&amp;#xe688;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe64a;</span>
-                <div class="name">实线</div>
-                <div class="code-name">&amp;#xe64a;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe640;</span>
-                <div class="name">画笔</div>
-                <div class="code-name">&amp;#xe640;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe614;</span>
-                <div class="name">点线</div>
-                <div class="code-name">&amp;#xe614;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe617;</span>
-                <div class="name">虚线</div>
-                <div class="code-name">&amp;#xe617;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe600;</span>
-                <div class="name">背景色‘</div>
-                <div class="code-name">&amp;#xe600;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe648;</span>
-                <div class="name">矩形</div>
-                <div class="code-name">&amp;#xe648;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe959;</span>
-                <div class="name">text</div>
-                <div class="code-name">&amp;#xe959;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe643;</span>
-                <div class="name">picture</div>
-                <div class="code-name">&amp;#xe643;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6ab;</span>
-                <div class="name">输入</div>
-                <div class="code-name">&amp;#xe6ab;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe628;</span>
-                <div class="name">树</div>
-                <div class="code-name">&amp;#xe628;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe615;</span>
-                <div class="name">查询搜索</div>
-                <div class="code-name">&amp;#xe615;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe624;</span>
-                <div class="name">季度</div>
-                <div class="code-name">&amp;#xe624;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe7de;</span>
-                <div class="name">数字顺序</div>
-                <div class="code-name">&amp;#xe7de;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6a6;</span>
-                <div class="name">树列表</div>
-                <div class="code-name">&amp;#xe6a6;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe639;</span>
-                <div class="name">日期</div>
-                <div class="code-name">&amp;#xe639;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe6dd;</span>
-                <div class="name">左侧-区间</div>
-                <div class="code-name">&amp;#xe6dd;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe66f;</span>
-                <div class="name">列表</div>
-                <div class="code-name">&amp;#xe66f;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe8ca;</span>
-                <div class="name">下拉框</div>
-                <div class="code-name">&amp;#xe8ca;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe8d0;</span>
-                <div class="name">下拉树</div>
-                <div class="code-name">&amp;#xe8d0;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe611;</span>
-                <div class="name">重置</div>
-                <div class="code-name">&amp;#xe611;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe691;</span>
-                <div class="name">日</div>
-                <div class="code-name">&amp;#xe691;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe692;</span>
-                <div class="name">年</div>
-                <div class="code-name">&amp;#xe692;</div>
-              </li>
-          
-            <li class="dib">
-              <span class="icon iconfont">&#xe695;</span>
-                <div class="name">月</div>
-                <div class="code-name">&amp;#xe695;</div>
-              </li>
-          
-          </ul>
-          <div class="article markdown">
-          <h2 id="unicode-">Unicode 引用</h2>
-          <hr>
-
-          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
-          <ul>
-            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
-            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
-          </ul>
-          <blockquote>
-            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
-          </blockquote>
-          <p>Unicode 使用步骤如下：</p>
-          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
-<pre><code class="language-css"
->@font-face {
-  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1662616551987') format('woff2'),
-       url('iconfont.woff?t=1662616551987') format('woff'),
-       url('iconfont.ttf?t=1662616551987') format('truetype');
-}
-</code></pre>
-          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
-<pre><code class="language-css"
->.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-</code></pre>
-          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
-<pre>
-<code class="language-html"
->&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
-</code></pre>
-          <blockquote>
-            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
-          </blockquote>
-          </div>
-      </div>
-      <div class="content font-class">
-        <ul class="icon_lists dib-box">
-          
-          <li class="dib">
-            <span class="icon iconfont icon-application"></span>
-            <div class="name">
-              application
-            </div>
-            <div class="code-name">.icon-application
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-datasource-select"></span>
-            <div class="name">
-              data-source-24
-            </div>
-            <div class="code-name">.icon-datasource-select
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-zhongzhi2"></span>
-            <div class="name">
-              重置
-            </div>
-            <div class="code-name">.icon-zhongzhi2
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-None_Select"></span>
-            <div class="name">
-              None_Select
-            </div>
-            <div class="code-name">.icon-None_Select
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-button_right"></span>
-            <div class="name">
-              button_right
-            </div>
-            <div class="code-name">.icon-button_right
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon-maybe"></span>
-            <div class="name">
-              icon-maybe
-            </div>
-            <div class="code-name">.icon-icon-maybe
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon_up-left_outlined"></span>
-            <div class="name">
-              icon_up-left_outlined
-            </div>
-            <div class="code-name">.icon-icon_up-left_outlined
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-close"></span>
-            <div class="name">
-              close
-            </div>
-            <div class="code-name">.icon-close
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-a-Frame3425"></span>
-            <div class="name">
-              Frame 3425
-            </div>
-            <div class="code-name">.icon-a-Frame3425
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon-filter"></span>
-            <div class="name">
-              icon-filter
-            </div>
-            <div class="code-name">.icon-icon-filter
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon_Batch_outlined"></span>
-            <div class="name">
-              icon_Batch_outlined
-            </div>
-            <div class="code-name">.icon-icon_Batch_outlined
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon_clear_outlined"></span>
-            <div class="name">
-              icon_clear_outlined
-            </div>
-            <div class="code-name">.icon-icon_clear_outlined
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon_dialpad_outlined"></span>
-            <div class="name">
-              icon_dialpad_outlined
-            </div>
-            <div class="code-name">.icon-icon_dialpad_outlined
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon_effects_outlined"></span>
-            <div class="name">
-              icon_effects_outlined
-            </div>
-            <div class="code-name">.icon-icon_effects_outlined
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon_magnify_outlined"></span>
-            <div class="name">
-              icon_magnify_outlined
-            </div>
-            <div class="code-name">.icon-icon_magnify_outlined
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon_moments-categories_outlined"></span>
-            <div class="name">
-              icon_moments-categories_outlined
-            </div>
-            <div class="code-name">.icon-icon_moments-categories_outlined
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon_pc_outlined"></span>
-            <div class="name">
-              icon_pc_outlined
-            </div>
-            <div class="code-name">.icon-icon_pc_outlined
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon_phone_outlined"></span>
-            <div class="name">
-              icon_phone_outlined
-            </div>
-            <div class="code-name">.icon-icon_phone_outlined
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon_redo_outlined"></span>
-            <div class="name">
-              icon_redo_outlined
-            </div>
-            <div class="code-name">.icon-icon_redo_outlined
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon_undo_outlined"></span>
-            <div class="name">
-              icon_undo_outlined
-            </div>
-            <div class="code-name">.icon-icon_undo_outlined
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon-more"></span>
-            <div class="name">
-              icon-more
-            </div>
-            <div class="code-name">.icon-icon-more
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-icon-quicksetting"></span>
-            <div class="name">
-              icon-quicksetting
-            </div>
-            <div class="code-name">.icon-icon-quicksetting
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-square-selected"></span>
-            <div class="name">
-              square-selected
-            </div>
-            <div class="code-name">.icon-square-selected
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-italic"></span>
-            <div class="name">
-              italic
-            </div>
-            <div class="code-name">.icon-italic
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-jiantou"></span>
-            <div class="name">
-              箭头
-            </div>
-            <div class="code-name">.icon-jiantou
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-magic-line"></span>
-            <div class="name">
-              magic-line
-            </div>
-            <div class="code-name">.icon-magic-line
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-gengduo"></span>
-            <div class="name">
-              更多
-            </div>
-            <div class="code-name">.icon-gengduo
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-qingkong"></span>
-            <div class="name">
-              清空
-            </div>
-            <div class="code-name">.icon-qingkong
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-chakan"></span>
-            <div class="name">
-              查看
-            </div>
-            <div class="code-name">.icon-chakan
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-outline-redo"></span>
-            <div class="name">
-              outline-redo
-            </div>
-            <div class="code-name">.icon-outline-redo
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-outline-undo"></span>
-            <div class="name">
-              outline-undo
-            </div>
-            <div class="code-name">.icon-outline-undo
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-dingwei"></span>
-            <div class="name">
-              定位
-            </div>
-            <div class="code-name">.icon-dingwei
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-fuwenbenkuang"></span>
-            <div class="name">
-              富文本框
-            </div>
-            <div class="code-name">.icon-fuwenbenkuang
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-unpublish"></span>
-            <div class="name">
-              下架
-            </div>
-            <div class="code-name">.icon-unpublish
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-publish"></span>
-            <div class="name">
-              上架
-            </div>
-            <div class="code-name">.icon-publish
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-fabu"></span>
-            <div class="name">
-              发布
-            </div>
-            <div class="code-name">.icon-fabu
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-piliang-copy"></span>
-            <div class="name">
-              批量操作
-            </div>
-            <div class="code-name">.icon-piliang-copy
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-tupian"></span>
-            <div class="name">
-              图片
-            </div>
-            <div class="code-name">.icon-tupian
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-chaolianjie1"></span>
-            <div class="name">
-              超链接
-            </div>
-            <div class="code-name">.icon-chaolianjie1
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-com-jump"></span>
-            <div class="name">
-              跳转
-            </div>
-            <div class="code-name">.icon-com-jump
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-component-tiaozhuan"></span>
-            <div class="name">
-              跳转
-            </div>
-            <div class="code-name">.icon-component-tiaozhuan
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-wangge-open"></span>
-            <div class="name">
-              网格\表格
-            </div>
-            <div class="code-name">.icon-wangge-open
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-wangge-close"></span>
-            <div class="name">
-              关闭网格
-            </div>
-            <div class="code-name">.icon-wangge-close
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-a-liumeitimeitiliebiao"></span>
-            <div class="name">
-              流媒体，媒体列表
-            </div>
-            <div class="code-name">.icon-a-liumeitimeitiliebiao
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-iframe"></span>
-            <div class="name">
-              iframe
-            </div>
-            <div class="code-name">.icon-iframe
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-canshu"></span>
-            <div class="name">
-              参数
-            </div>
-            <div class="code-name">.icon-canshu
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-genghuan"></span>
-            <div class="name">
-              更换
-            </div>
-            <div class="code-name">.icon-genghuan
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-fasongyoujian"></span>
-            <div class="name">
-              发送邮件
-            </div>
-            <div class="code-name">.icon-fasongyoujian
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-github"></span>
-            <div class="name">
-              github
-            </div>
-            <div class="code-name">.icon-github
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-dianhua"></span>
-            <div class="name">
-              电话
-            </div>
-            <div class="code-name">.icon-dianhua
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-guanbi"></span>
-            <div class="name">
-              关闭
-            </div>
-            <div class="code-name">.icon-guanbi
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-juxing1"></span>
-            <div class="name">
-              矩形
-            </div>
-            <div class="code-name">.icon-juxing1
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-yidongduan"></span>
-            <div class="name">
-              移动端
-            </div>
-            <div class="code-name">.icon-yidongduan
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-video"></span>
-            <div class="name">
-              video
-            </div>
-            <div class="code-name">.icon-video
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xuanfuanniufadongtai"></span>
-            <div class="name">
-              悬浮按钮发动态
-            </div>
-            <div class="code-name">.icon-xuanfuanniufadongtai
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xifuxuanze"></span>
-            <div class="name">
-              吸附选择
-            </div>
-            <div class="code-name">.icon-xifuxuanze
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-margin"></span>
-            <div class="name">
-              margin
-            </div>
-            <div class="code-name">.icon-margin
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-padding"></span>
-            <div class="name">
-              padding
-            </div>
-            <div class="code-name">.icon-padding
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-shijian"></span>
-            <div class="name">
-              时间
-            </div>
-            <div class="code-name">.icon-shijian
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-shijiangeshizhuanhuan"></span>
-            <div class="name">
-              时间格式转换
-            </div>
-            <div class="code-name">.icon-shijiangeshizhuanhuan
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-chaolianjie"></span>
-            <div class="name">
-              超链接
-            </div>
-            <div class="code-name">.icon-chaolianjie
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-kexuejishu"></span>
-            <div class="name">
-              科学技术
-            </div>
-            <div class="code-name">.icon-kexuejishu
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-shujujuzhen"></span>
-            <div class="name">
-              符号-数据矩阵
-            </div>
-            <div class="code-name">.icon-shujujuzhen
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-shitujuzhen_o"></span>
-            <div class="name">
-              视图矩阵_o
-            </div>
-            <div class="code-name">.icon-shitujuzhen_o
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xuanfu1"></span>
-            <div class="name">
-              悬浮
-            </div>
-            <div class="code-name">.icon-xuanfu1
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-youxuanfu-copy"></span>
-            <div class="name">
-              右悬浮-选中
-            </div>
-            <div class="code-name">.icon-youxuanfu-copy
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xuanfu"></span>
-            <div class="name">
-              悬浮
-            </div>
-            <div class="code-name">.icon-xuanfu
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xuanfuanniu"></span>
-            <div class="name">
-              悬浮按钮
-            </div>
-            <div class="code-name">.icon-xuanfuanniu
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-youxuanfu-copy-copy"></span>
-            <div class="name">
-              右悬浮-选中
-            </div>
-            <div class="code-name">.icon-youxuanfu-copy-copy
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-tabs"></span>
-            <div class="name">
-              44.tabs
-            </div>
-            <div class="code-name">.icon-tabs
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xiyu"></span>
-            <div class="name">
-              洗浴
-            </div>
-            <div class="code-name">.icon-xiyu
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-quxiaoshangzuan"></span>
-            <div class="name">
-              线性图标-取消下钻
-            </div>
-            <div class="code-name">.icon-quxiaoshangzuan
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-quxiaoxiazuan"></span>
-            <div class="name">
-              线性图标-取消下钻
-            </div>
-            <div class="code-name">.icon-quxiaoxiazuan
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-linkage"></span>
-            <div class="name">
-              联动
-            </div>
-            <div class="code-name">.icon-linkage
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xiazuan"></span>
-            <div class="name">
-              下钻
-            </div>
-            <div class="code-name">.icon-xiazuan
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-shangzuan"></span>
-            <div class="name">
-              上钻
-            </div>
-            <div class="code-name">.icon-shangzuan
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-quxiaoliandong"></span>
-            <div class="name">
-              取消联动
-            </div>
-            <div class="code-name">.icon-quxiaoliandong
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-edit-outline"></span>
-            <div class="name">
-              edit-2
-            </div>
-            <div class="code-name">.icon-edit-outline
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-edit"></span>
-            <div class="name">
-              edit-2
-            </div>
-            <div class="code-name">.icon-edit
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xiangqing1"></span>
-            <div class="name">
-              详情
-            </div>
-            <div class="code-name">.icon-xiangqing1
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-weibiaoti-1"></span>
-            <div class="name">
-              弧形框
-            </div>
-            <div class="code-name">.icon-weibiaoti-1
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-weibiaoti-"></span>
-            <div class="name">
-              弧形框
-            </div>
-            <div class="code-name">.icon-weibiaoti-
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-touming"></span>
-            <div class="name">
-              透明
-            </div>
-            <div class="code-name">.icon-touming
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-fangxing-"></span>
-            <div class="name">
-              弧度
-            </div>
-            <div class="code-name">.icon-fangxing-
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-fangda"></span>
-            <div class="name">
-              放大
-            </div>
-            <div class="code-name">.icon-fangda
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-shezhi"></span>
-            <div class="name">
-              设 置
-            </div>
-            <div class="code-name">.icon-shezhi
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-quanping1"></span>
-            <div class="name">
-              屏幕_全屏
-            </div>
-            <div class="code-name">.icon-quanping1
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-font-weight-bold"></span>
-            <div class="name">
-              font-weight-bold
-            </div>
-            <div class="code-name">.icon-font-weight-bold
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-letter_spacing"></span>
-            <div class="name">
-              letter_spacing
-            </div>
-            <div class="code-name">.icon-letter_spacing
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-letter-spacing"></span>
-            <div class="name">
-              letter-spacing
-            </div>
-            <div class="code-name">.icon-letter-spacing
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-zimua"></span>
-            <div class="name">
-              字体颜色
-            </div>
-            <div class="code-name">.icon-zimua
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-format_letter_spacing_"></span>
-            <div class="name">
-              format_letter_spacing_2
-            </div>
-            <div class="code-name">.icon-format_letter_spacing_
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-font_size"></span>
-            <div class="name">
-              font_size
-            </div>
-            <div class="code-name">.icon-font_size
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-align-center"></span>
-            <div class="name">
-              居中
-            </div>
-            <div class="code-name">.icon-align-center
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-juyou"></span>
-            <div class="name">
-              居右
-            </div>
-            <div class="code-name">.icon-juyou
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-juzuo"></span>
-            <div class="name">
-              居左
-            </div>
-            <div class="code-name">.icon-juzuo
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-solid_line"></span>
-            <div class="name">
-              实线
-            </div>
-            <div class="code-name">.icon-solid_line
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-huabi"></span>
-            <div class="name">
-              画笔
-            </div>
-            <div class="code-name">.icon-huabi
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-dianxian"></span>
-            <div class="name">
-              点线
-            </div>
-            <div class="code-name">.icon-dianxian
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xuxian"></span>
-            <div class="name">
-              虚线
-            </div>
-            <div class="code-name">.icon-xuxian
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-beijingse1"></span>
-            <div class="name">
-              背景色‘
-            </div>
-            <div class="code-name">.icon-beijingse1
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-juxing"></span>
-            <div class="name">
-              矩形
-            </div>
-            <div class="code-name">.icon-juxing
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-text"></span>
-            <div class="name">
-              text
-            </div>
-            <div class="code-name">.icon-text
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-picture"></span>
-            <div class="name">
-              picture
-            </div>
-            <div class="code-name">.icon-picture
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-shuru"></span>
-            <div class="name">
-              输入
-            </div>
-            <div class="code-name">.icon-shuru
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-tree"></span>
-            <div class="name">
-              树
-            </div>
-            <div class="code-name">.icon-tree
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-chaxunsousuo"></span>
-            <div class="name">
-              查询搜索
-            </div>
-            <div class="code-name">.icon-chaxunsousuo
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-jidu"></span>
-            <div class="name">
-              季度
-            </div>
-            <div class="code-name">.icon-jidu
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-shuzishunxu"></span>
-            <div class="name">
-              数字顺序
-            </div>
-            <div class="code-name">.icon-shuzishunxu
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-Group-"></span>
-            <div class="name">
-              树列表
-            </div>
-            <div class="code-name">.icon-Group-
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-riqi"></span>
-            <div class="name">
-              日期
-            </div>
-            <div class="code-name">.icon-riqi
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-zuoce-qujian"></span>
-            <div class="name">
-              左侧-区间
-            </div>
-            <div class="code-name">.icon-zuoce-qujian
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-liebiao"></span>
-            <div class="name">
-              列表
-            </div>
-            <div class="code-name">.icon-liebiao
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xialakuang"></span>
-            <div class="name">
-              下拉框
-            </div>
-            <div class="code-name">.icon-xialakuang
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-xialashu"></span>
-            <div class="name">
-              下拉树
-            </div>
-            <div class="code-name">.icon-xialashu
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-zhongzhi"></span>
-            <div class="name">
-              重置
-            </div>
-            <div class="code-name">.icon-zhongzhi
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-ri"></span>
-            <div class="name">
-              日
-            </div>
-            <div class="code-name">.icon-ri
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-nian"></span>
-            <div class="name">
-              年
-            </div>
-            <div class="code-name">.icon-nian
-            </div>
-          </li>
-          
-          <li class="dib">
-            <span class="icon iconfont icon-yue"></span>
-            <div class="name">
-              月
-            </div>
-            <div class="code-name">.icon-yue
-            </div>
-          </li>
-          
-        </ul>
-        <div class="article markdown">
-        <h2 id="font-class-">font-class 引用</h2>
-        <hr>
-
-        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
-        <p>与 Unicode 使用方式相比，具有如下特点：</p>
-        <ul>
-          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
-          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
-        </ul>
-        <p>使用步骤如下：</p>
-        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
-<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
-</code></pre>
-        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
-<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
-</code></pre>
-        <blockquote>
-          <p>"
-            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
-        </blockquote>
-      </div>
-      </div>
-      <div class="content symbol">
-          <ul class="icon_lists dib-box">
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-application"></use>
-                </svg>
-                <div class="name">application</div>
-                <div class="code-name">#icon-application</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-datasource-select"></use>
-                </svg>
-                <div class="name">data-source-24</div>
-                <div class="code-name">#icon-datasource-select</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-zhongzhi2"></use>
-                </svg>
-                <div class="name">重置</div>
-                <div class="code-name">#icon-zhongzhi2</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-None_Select"></use>
-                </svg>
-                <div class="name">None_Select</div>
-                <div class="code-name">#icon-None_Select</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-button_right"></use>
-                </svg>
-                <div class="name">button_right</div>
-                <div class="code-name">#icon-button_right</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon-maybe"></use>
-                </svg>
-                <div class="name">icon-maybe</div>
-                <div class="code-name">#icon-icon-maybe</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_up-left_outlined"></use>
-                </svg>
-                <div class="name">icon_up-left_outlined</div>
-                <div class="code-name">#icon-icon_up-left_outlined</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-close"></use>
-                </svg>
-                <div class="name">close</div>
-                <div class="code-name">#icon-close</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-a-Frame3425"></use>
-                </svg>
-                <div class="name">Frame 3425</div>
-                <div class="code-name">#icon-a-Frame3425</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon-filter"></use>
-                </svg>
-                <div class="name">icon-filter</div>
-                <div class="code-name">#icon-icon-filter</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_Batch_outlined"></use>
-                </svg>
-                <div class="name">icon_Batch_outlined</div>
-                <div class="code-name">#icon-icon_Batch_outlined</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_clear_outlined"></use>
-                </svg>
-                <div class="name">icon_clear_outlined</div>
-                <div class="code-name">#icon-icon_clear_outlined</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_dialpad_outlined"></use>
-                </svg>
-                <div class="name">icon_dialpad_outlined</div>
-                <div class="code-name">#icon-icon_dialpad_outlined</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_effects_outlined"></use>
-                </svg>
-                <div class="name">icon_effects_outlined</div>
-                <div class="code-name">#icon-icon_effects_outlined</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_magnify_outlined"></use>
-                </svg>
-                <div class="name">icon_magnify_outlined</div>
-                <div class="code-name">#icon-icon_magnify_outlined</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_moments-categories_outlined"></use>
-                </svg>
-                <div class="name">icon_moments-categories_outlined</div>
-                <div class="code-name">#icon-icon_moments-categories_outlined</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_pc_outlined"></use>
-                </svg>
-                <div class="name">icon_pc_outlined</div>
-                <div class="code-name">#icon-icon_pc_outlined</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_phone_outlined"></use>
-                </svg>
-                <div class="name">icon_phone_outlined</div>
-                <div class="code-name">#icon-icon_phone_outlined</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_redo_outlined"></use>
-                </svg>
-                <div class="name">icon_redo_outlined</div>
-                <div class="code-name">#icon-icon_redo_outlined</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon_undo_outlined"></use>
-                </svg>
-                <div class="name">icon_undo_outlined</div>
-                <div class="code-name">#icon-icon_undo_outlined</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon-more"></use>
-                </svg>
-                <div class="name">icon-more</div>
-                <div class="code-name">#icon-icon-more</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-icon-quicksetting"></use>
-                </svg>
-                <div class="name">icon-quicksetting</div>
-                <div class="code-name">#icon-icon-quicksetting</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-square-selected"></use>
-                </svg>
-                <div class="name">square-selected</div>
-                <div class="code-name">#icon-square-selected</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-italic"></use>
-                </svg>
-                <div class="name">italic</div>
-                <div class="code-name">#icon-italic</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-jiantou"></use>
-                </svg>
-                <div class="name">箭头</div>
-                <div class="code-name">#icon-jiantou</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-magic-line"></use>
-                </svg>
-                <div class="name">magic-line</div>
-                <div class="code-name">#icon-magic-line</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-gengduo"></use>
-                </svg>
-                <div class="name">更多</div>
-                <div class="code-name">#icon-gengduo</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-qingkong"></use>
-                </svg>
-                <div class="name">清空</div>
-                <div class="code-name">#icon-qingkong</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-chakan"></use>
-                </svg>
-                <div class="name">查看</div>
-                <div class="code-name">#icon-chakan</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-outline-redo"></use>
-                </svg>
-                <div class="name">outline-redo</div>
-                <div class="code-name">#icon-outline-redo</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-outline-undo"></use>
-                </svg>
-                <div class="name">outline-undo</div>
-                <div class="code-name">#icon-outline-undo</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-dingwei"></use>
-                </svg>
-                <div class="name">定位</div>
-                <div class="code-name">#icon-dingwei</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-fuwenbenkuang"></use>
-                </svg>
-                <div class="name">富文本框</div>
-                <div class="code-name">#icon-fuwenbenkuang</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-unpublish"></use>
-                </svg>
-                <div class="name">下架</div>
-                <div class="code-name">#icon-unpublish</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-publish"></use>
-                </svg>
-                <div class="name">上架</div>
-                <div class="code-name">#icon-publish</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-fabu"></use>
-                </svg>
-                <div class="name">发布</div>
-                <div class="code-name">#icon-fabu</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-piliang-copy"></use>
-                </svg>
-                <div class="name">批量操作</div>
-                <div class="code-name">#icon-piliang-copy</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-tupian"></use>
-                </svg>
-                <div class="name">图片</div>
-                <div class="code-name">#icon-tupian</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-chaolianjie1"></use>
-                </svg>
-                <div class="name">超链接</div>
-                <div class="code-name">#icon-chaolianjie1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-com-jump"></use>
-                </svg>
-                <div class="name">跳转</div>
-                <div class="code-name">#icon-com-jump</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-component-tiaozhuan"></use>
-                </svg>
-                <div class="name">跳转</div>
-                <div class="code-name">#icon-component-tiaozhuan</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-wangge-open"></use>
-                </svg>
-                <div class="name">网格\表格</div>
-                <div class="code-name">#icon-wangge-open</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-wangge-close"></use>
-                </svg>
-                <div class="name">关闭网格</div>
-                <div class="code-name">#icon-wangge-close</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-a-liumeitimeitiliebiao"></use>
-                </svg>
-                <div class="name">流媒体，媒体列表</div>
-                <div class="code-name">#icon-a-liumeitimeitiliebiao</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-iframe"></use>
-                </svg>
-                <div class="name">iframe</div>
-                <div class="code-name">#icon-iframe</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-canshu"></use>
-                </svg>
-                <div class="name">参数</div>
-                <div class="code-name">#icon-canshu</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-genghuan"></use>
-                </svg>
-                <div class="name">更换</div>
-                <div class="code-name">#icon-genghuan</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-fasongyoujian"></use>
-                </svg>
-                <div class="name">发送邮件</div>
-                <div class="code-name">#icon-fasongyoujian</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-github"></use>
-                </svg>
-                <div class="name">github</div>
-                <div class="code-name">#icon-github</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-dianhua"></use>
-                </svg>
-                <div class="name">电话</div>
-                <div class="code-name">#icon-dianhua</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-guanbi"></use>
-                </svg>
-                <div class="name">关闭</div>
-                <div class="code-name">#icon-guanbi</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-juxing1"></use>
-                </svg>
-                <div class="name">矩形</div>
-                <div class="code-name">#icon-juxing1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-yidongduan"></use>
-                </svg>
-                <div class="name">移动端</div>
-                <div class="code-name">#icon-yidongduan</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-video"></use>
-                </svg>
-                <div class="name">video</div>
-                <div class="code-name">#icon-video</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xuanfuanniufadongtai"></use>
-                </svg>
-                <div class="name">悬浮按钮发动态</div>
-                <div class="code-name">#icon-xuanfuanniufadongtai</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xifuxuanze"></use>
-                </svg>
-                <div class="name">吸附选择</div>
-                <div class="code-name">#icon-xifuxuanze</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-margin"></use>
-                </svg>
-                <div class="name">margin</div>
-                <div class="code-name">#icon-margin</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-padding"></use>
-                </svg>
-                <div class="name">padding</div>
-                <div class="code-name">#icon-padding</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-shijian"></use>
-                </svg>
-                <div class="name">时间</div>
-                <div class="code-name">#icon-shijian</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-shijiangeshizhuanhuan"></use>
-                </svg>
-                <div class="name">时间格式转换</div>
-                <div class="code-name">#icon-shijiangeshizhuanhuan</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-chaolianjie"></use>
-                </svg>
-                <div class="name">超链接</div>
-                <div class="code-name">#icon-chaolianjie</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-kexuejishu"></use>
-                </svg>
-                <div class="name">科学技术</div>
-                <div class="code-name">#icon-kexuejishu</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-shujujuzhen"></use>
-                </svg>
-                <div class="name">符号-数据矩阵</div>
-                <div class="code-name">#icon-shujujuzhen</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-shitujuzhen_o"></use>
-                </svg>
-                <div class="name">视图矩阵_o</div>
-                <div class="code-name">#icon-shitujuzhen_o</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xuanfu1"></use>
-                </svg>
-                <div class="name">悬浮</div>
-                <div class="code-name">#icon-xuanfu1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-youxuanfu-copy"></use>
-                </svg>
-                <div class="name">右悬浮-选中</div>
-                <div class="code-name">#icon-youxuanfu-copy</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xuanfu"></use>
-                </svg>
-                <div class="name">悬浮</div>
-                <div class="code-name">#icon-xuanfu</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xuanfuanniu"></use>
-                </svg>
-                <div class="name">悬浮按钮</div>
-                <div class="code-name">#icon-xuanfuanniu</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-youxuanfu-copy-copy"></use>
-                </svg>
-                <div class="name">右悬浮-选中</div>
-                <div class="code-name">#icon-youxuanfu-copy-copy</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-tabs"></use>
-                </svg>
-                <div class="name">44.tabs</div>
-                <div class="code-name">#icon-tabs</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xiyu"></use>
-                </svg>
-                <div class="name">洗浴</div>
-                <div class="code-name">#icon-xiyu</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-quxiaoshangzuan"></use>
-                </svg>
-                <div class="name">线性图标-取消下钻</div>
-                <div class="code-name">#icon-quxiaoshangzuan</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-quxiaoxiazuan"></use>
-                </svg>
-                <div class="name">线性图标-取消下钻</div>
-                <div class="code-name">#icon-quxiaoxiazuan</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-linkage"></use>
-                </svg>
-                <div class="name">联动</div>
-                <div class="code-name">#icon-linkage</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xiazuan"></use>
-                </svg>
-                <div class="name">下钻</div>
-                <div class="code-name">#icon-xiazuan</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-shangzuan"></use>
-                </svg>
-                <div class="name">上钻</div>
-                <div class="code-name">#icon-shangzuan</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-quxiaoliandong"></use>
-                </svg>
-                <div class="name">取消联动</div>
-                <div class="code-name">#icon-quxiaoliandong</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-edit-outline"></use>
-                </svg>
-                <div class="name">edit-2</div>
-                <div class="code-name">#icon-edit-outline</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-edit"></use>
-                </svg>
-                <div class="name">edit-2</div>
-                <div class="code-name">#icon-edit</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xiangqing1"></use>
-                </svg>
-                <div class="name">详情</div>
-                <div class="code-name">#icon-xiangqing1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-weibiaoti-1"></use>
-                </svg>
-                <div class="name">弧形框</div>
-                <div class="code-name">#icon-weibiaoti-1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-weibiaoti-"></use>
-                </svg>
-                <div class="name">弧形框</div>
-                <div class="code-name">#icon-weibiaoti-</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-touming"></use>
-                </svg>
-                <div class="name">透明</div>
-                <div class="code-name">#icon-touming</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-fangxing-"></use>
-                </svg>
-                <div class="name">弧度</div>
-                <div class="code-name">#icon-fangxing-</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-fangda"></use>
-                </svg>
-                <div class="name">放大</div>
-                <div class="code-name">#icon-fangda</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-shezhi"></use>
-                </svg>
-                <div class="name">设 置</div>
-                <div class="code-name">#icon-shezhi</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-quanping1"></use>
-                </svg>
-                <div class="name">屏幕_全屏</div>
-                <div class="code-name">#icon-quanping1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-font-weight-bold"></use>
-                </svg>
-                <div class="name">font-weight-bold</div>
-                <div class="code-name">#icon-font-weight-bold</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-letter_spacing"></use>
-                </svg>
-                <div class="name">letter_spacing</div>
-                <div class="code-name">#icon-letter_spacing</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-letter-spacing"></use>
-                </svg>
-                <div class="name">letter-spacing</div>
-                <div class="code-name">#icon-letter-spacing</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-zimua"></use>
-                </svg>
-                <div class="name">字体颜色</div>
-                <div class="code-name">#icon-zimua</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-format_letter_spacing_"></use>
-                </svg>
-                <div class="name">format_letter_spacing_2</div>
-                <div class="code-name">#icon-format_letter_spacing_</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-font_size"></use>
-                </svg>
-                <div class="name">font_size</div>
-                <div class="code-name">#icon-font_size</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-align-center"></use>
-                </svg>
-                <div class="name">居中</div>
-                <div class="code-name">#icon-align-center</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-juyou"></use>
-                </svg>
-                <div class="name">居右</div>
-                <div class="code-name">#icon-juyou</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-juzuo"></use>
-                </svg>
-                <div class="name">居左</div>
-                <div class="code-name">#icon-juzuo</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-solid_line"></use>
-                </svg>
-                <div class="name">实线</div>
-                <div class="code-name">#icon-solid_line</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-huabi"></use>
-                </svg>
-                <div class="name">画笔</div>
-                <div class="code-name">#icon-huabi</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-dianxian"></use>
-                </svg>
-                <div class="name">点线</div>
-                <div class="code-name">#icon-dianxian</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xuxian"></use>
-                </svg>
-                <div class="name">虚线</div>
-                <div class="code-name">#icon-xuxian</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-beijingse1"></use>
-                </svg>
-                <div class="name">背景色‘</div>
-                <div class="code-name">#icon-beijingse1</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-juxing"></use>
-                </svg>
-                <div class="name">矩形</div>
-                <div class="code-name">#icon-juxing</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-text"></use>
-                </svg>
-                <div class="name">text</div>
-                <div class="code-name">#icon-text</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-picture"></use>
-                </svg>
-                <div class="name">picture</div>
-                <div class="code-name">#icon-picture</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-shuru"></use>
-                </svg>
-                <div class="name">输入</div>
-                <div class="code-name">#icon-shuru</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-tree"></use>
-                </svg>
-                <div class="name">树</div>
-                <div class="code-name">#icon-tree</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-chaxunsousuo"></use>
-                </svg>
-                <div class="name">查询搜索</div>
-                <div class="code-name">#icon-chaxunsousuo</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-jidu"></use>
-                </svg>
-                <div class="name">季度</div>
-                <div class="code-name">#icon-jidu</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-shuzishunxu"></use>
-                </svg>
-                <div class="name">数字顺序</div>
-                <div class="code-name">#icon-shuzishunxu</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-Group-"></use>
-                </svg>
-                <div class="name">树列表</div>
-                <div class="code-name">#icon-Group-</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-riqi"></use>
-                </svg>
-                <div class="name">日期</div>
-                <div class="code-name">#icon-riqi</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-zuoce-qujian"></use>
-                </svg>
-                <div class="name">左侧-区间</div>
-                <div class="code-name">#icon-zuoce-qujian</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-liebiao"></use>
-                </svg>
-                <div class="name">列表</div>
-                <div class="code-name">#icon-liebiao</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xialakuang"></use>
-                </svg>
-                <div class="name">下拉框</div>
-                <div class="code-name">#icon-xialakuang</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-xialashu"></use>
-                </svg>
-                <div class="name">下拉树</div>
-                <div class="code-name">#icon-xialashu</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-zhongzhi"></use>
-                </svg>
-                <div class="name">重置</div>
-                <div class="code-name">#icon-zhongzhi</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-ri"></use>
-                </svg>
-                <div class="name">日</div>
-                <div class="code-name">#icon-ri</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-nian"></use>
-                </svg>
-                <div class="name">年</div>
-                <div class="code-name">#icon-nian</div>
-            </li>
-          
-            <li class="dib">
-                <svg class="icon svg-icon" aria-hidden="true">
-                  <use xlink:href="#icon-yue"></use>
-                </svg>
-                <div class="name">月</div>
-                <div class="code-name">#icon-yue</div>
-            </li>
-          
-          </ul>
-          <div class="article markdown">
-          <h2 id="symbol-">Symbol 引用</h2>
-          <hr>
-
-          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
-            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
-          <ul>
-            <li>支持多色图标了，不再受单色限制。</li>
-            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
-            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
-            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
-          </ul>
-          <p>使用步骤如下：</p>
-          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
-<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
-</code></pre>
-          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
-<pre><code class="language-html">&lt;style&gt;
-.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-&lt;/style&gt;
-</code></pre>
-          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
-<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
-  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
-&lt;/svg&gt;
-</code></pre>
-          </div>
-      </div>
-
-    </div>
-  </div>
-  <script>
-  $(document).ready(function () {
-      $('.tab-container .content:first').show()
-
-      $('#tabs li').click(function (e) {
-        var tabContent = $('.tab-container .content')
-        var index = $(this).index()
-
-        if ($(this).hasClass('active')) {
-          return
-        } else {
-          $('#tabs li').removeClass('active')
-          $(this).addClass('active')
-
-          tabContent.hide().eq(index).fadeIn()
-        }
-      })
-    })
-  </script>
-</body>
-</html>
diff --git a/frontend/src/styles/vdrr/common.scss b/frontend/src/styles/vdrr/common.scss
deleted file mode 100644
index b003d6c898..0000000000
--- a/frontend/src/styles/vdrr/common.scss
+++ /dev/null
@@ -1,123 +0,0 @@
-* {
-  padding: 0;
-  margin: 0;
-}
-
-// 滚动条
-::-webkit-scrollbar {
-  width: 4px;
-  height: 4px;
-}
-
-::-webkit-scrollbar-thumb {
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
-  border-radius: 10px;
-  background: #ffffff;
-}
-
-::-webkit-scrollbar-track {
-  border-radius: 10px;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
-  background: #141414;
-}
-
-// 文字对齐
-.text-left {
-  text-align: left;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
-// 首页
-#app {
-  display: flex;
-  flex-direction: row;
-
-}
-
-#menu {
-  width: 275px;
-  min-width: 200px;
-  max-width: 500px;
-  height: 100vh;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  .el-menu {
-    border: none;
-
-    .el-submenu__title {
-      height: 40px;
-      line-height: 40px;
-    }
-
-    .el-menu-item {
-      height: 28px;
-      line-height: 28px;
-    }
-  }
-}
-
-#view {
-  flex: 1;
-  min-width: 500px;
-  padding: 10px 35px 0 35px;
-  height: 100vh;
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  box-sizing: border-box;
-  position: relative;
-}
-
-
-.drag-bar {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 5px;
-  z-index: 99;
-  border-left: 1px solid #ccc;
-  cursor: ew-resize
-}
-
-.view-box {
-  width: 100%;
-}
-
-#toolbar {
-  left: 0;
-  top: 0;
-  height: 24px;
-  padding: 5px;
-  border: 1px solid #999;
-  border-bottom: none;
-  background-color: #CCC;
-  z-index: 999;
-}
-
-.container {
-  width: 100%;
-  height: 600px;
-  border: 1px solid #000;
-
-  position: relative;
-  box-sizing: border-box
-}
-
-.vdr {
-  border: 1px dashed;
-}
-
-.vdrr {
-  border: 1px dashed;
-}
diff --git a/frontend/src/styles/vdrr/customize.scss b/frontend/src/styles/vdrr/customize.scss
deleted file mode 100644
index f7265b502f..0000000000
--- a/frontend/src/styles/vdrr/customize.scss
+++ /dev/null
@@ -1,147 +0,0 @@
-.pattern-contaienr {
-  border: 1px solid #ccc;
-  width: 576px;
-  height: 324px;
-}
-
-.iconPistion {
-  border-width: 2px;
-  border-style: solid;
-  border-color: #409eff;
-  background-color: rgba(128, 128, 128, 0.5);
-  box-sizing: border-box;
-
-  .icon-slot {
-    font-size: 12px;
-  }
-}
-
-.patternContent {
-  display: flex;
-
-  .patternLeft {
-    margin: 10px;
-  }
-
-  .patternRight {
-    width: 400px;
-    margin: 10px;
-  }
-}
-
-
-.icon-slot {
-  width: 100%;
-  height: 100%;
-
-  .status {
-    text-align: left;
-    color: #000;
-  }
-
-  .order {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-.activePattern {
-  border-style: solid;
-  border-color: #08de05;
-}
-
-
-.drag-handle,
-.drag-cancel {
-  padding: 6px;
-  margin: 6px;
-  background-color: #CCC;
-  border: 2px solid;
-}
-
-.drag-handle:hover {
-  cursor: move;
-}
-
-.drag-cancel:hover {
-  cursor: not-allowed;
-}
-
-.my-handle-class {
-  position: absolute;
-  border: 1px solid black;
-  border-radius: 50%;
-  height: 14px;
-  width: 14px;
-  font-size: 1em;
-  line-height: 1em;
-  box-sizing: border-box;
-  -webkit-transition: all 300ms linear;
-  -ms-transition: all 300ms linear;
-  transition: all 300ms linear;
-}
-
-.my-handle-class-tl {
-  top: -14px;
-  left: -14px;
-  cursor: nw-resize;
-}
-
-.my-handle-class-tm {
-  top: -14px;
-  left: 50%;
-  margin-left: -7px;
-  cursor: n-resize;
-}
-
-.my-handle-class-tr {
-  top: -14px;
-  right: -14px;
-  cursor: ne-resize;
-}
-
-.my-handle-class-ml {
-  top: 50%;
-  margin-top: -7px;
-  left: -14px;
-  cursor: w-resize;
-}
-
-.my-handle-class-mr {
-  top: 50%;
-  margin-top: -7px;
-  right: -14px;
-  cursor: e-resize;
-}
-
-.my-handle-class-bl {
-  bottom: -14px;
-  left: -14px;
-  cursor: sw-resize;
-}
-
-.my-handle-class-bm {
-  bottom: -14px;
-  left: 50%;
-  margin-left: -7px;
-  cursor: s-resize;
-}
-
-.my-handle-class-br {
-  bottom: -14px;
-  right: -14px;
-  cursor: se-resize;
-}
-
-.my-handle-class-tl:hover,
-.my-handle-class-tm:hover,
-.my-handle-class-tr:hover,
-.my-handle-class-ml:hover,
-.my-handle-class-mr:hover,
-.my-handle-class-bl:hover,
-.my-handle-class-bm:hover,
-.my-handle-class-br:hover {
-  transform: scale(1.4);
-}
diff --git a/frontend/src/styles/vdrr/highlight.scss b/frontend/src/styles/vdrr/highlight.scss
deleted file mode 100644
index 766e70839a..0000000000
--- a/frontend/src/styles/vdrr/highlight.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-// 添加行号样式
-pre.hljs {
-  padding: 8px 2px;
-  border-radius: 5px;
-  position: relative;
-
-  ol {
-    list-style: decimal;
-    margin: 0;
-    margin-left: 40px;
-    padding: 0;
-
-    li {
-      list-style: decimal-leading-zero;
-      position: relative;
-      padding-left: 10px;
-
-      .line-num {
-        position: absolute;
-        left: -40px;
-        top: 0;
-        width: 40px;
-        height: 100%;
-        border-right: 1px solid rgba(0, 0, 0, .66);
-      }
-    }
-  }
-
-  b.name {
-    position: absolute;
-    top: 2px;
-    right: 12px;
-    z-index: 10;
-    color: #999;
-    pointer-events: none;
-  }
-}
-
-
-
-span.hljs-tag,
-span.hljs-name {
-  color: #eb333c;
-}
-
-
-span.hljs-string {
-  color: #b4aa34;
-
-}
\ No newline at end of file
diff --git a/frontend/src/styles/vdrr/markdown.scss b/frontend/src/styles/vdrr/markdown.scss
deleted file mode 100644
index a278a71075..0000000000
--- a/frontend/src/styles/vdrr/markdown.scss
+++ /dev/null
@@ -1,247 +0,0 @@
-.markdown-render {
-  html {
-    font-size: 16px;
-  }
-
-  body {
-    font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    color: rgb(51, 51, 51);
-    line-height: 1.6;
-  }
-
-  a {
-    color: #4183C4;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    position: relative;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    font-weight: bold;
-    line-height: 1.4;
-    cursor: text;
-  }
-
-  h1:hover a.anchor,
-  h2:hover a.anchor,
-  h3:hover a.anchor,
-  h4:hover a.anchor,
-  h5:hover a.anchor,
-  h6:hover a.anchor {
-    text-decoration: none;
-  }
-
-  h1 tt,
-  h1 code {
-    font-size: inherit;
-  }
-
-  h2 tt,
-  h2 code {
-    font-size: inherit;
-  }
-
-  h3 tt,
-  h3 code {
-    font-size: inherit;
-  }
-
-  h4 tt,
-  h4 code {
-    font-size: inherit;
-  }
-
-  h5 tt,
-  h5 code {
-    font-size: inherit;
-  }
-
-  h6 tt,
-  h6 code {
-    font-size: inherit;
-  }
-
-  h1 {
-    padding-bottom: .3em;
-    font-size: 2.0m;
-    line-height: 1.2;
-    border-bottom: 1px solid #eee;
-  }
-
-  h2 {
-    padding-bottom: .3em;
-    font-size: 1.66em;
-    line-height: 1.225;
-    border-bottom: 1px solid #eee;
-  }
-
-  h3 {
-    font-size: 1.33em;
-    line-height: 1.43;
-  }
-
-  h4 {
-    font-size: 1.11em;
-  }
-
-  h5 {
-    font-size: 1em;
-  }
-
-  h6 {
-    font-size: .8m;
-    color: #777;
-  }
-
-  p,
-  blockquote,
-  ul,
-  ol,
-  dl,
-  table {
-    margin: 0.8em 0;
-  }
-
-  li>ol,
-  li>ul {
-    margin: 0 0;
-  }
-
-  hr {
-    height: 2px;
-    padding: 0;
-    margin: 16px 0;
-    background-color: #e7e7e7;
-    border: 0 none;
-    overflow: hidden;
-    box-sizing: content-box;
-  }
-
-  li p.first {
-    display: inline-block;
-  }
-
-  ul,
-  ol {
-    padding-left: 30px;
-  }
-
-  ul:first-child,
-  ol:first-child {
-    margin-top: 0;
-  }
-
-  ul:last-child,
-  ol:last-child {
-    margin-bottom: 0;
-  }
-
-  blockquote {
-    border-left: 4px solid #dfe2e5;
-    padding: 0 15px;
-    color: #777777;
-  }
-
-  blockquote blockquote {
-    padding-right: 0;
-  }
-
-  table {
-    padding: 0;
-    word-break: initial;
-  }
-
-  table tr {
-    border-top: 1px solid #dfe2e5;
-    margin: 0;
-    padding: 0;
-  }
-
-  table tr:nth-child(2n),
-  thead {
-    background-color: #f8f8f8;
-  }
-
-  table tr th {
-    font-weight: bold;
-    border: 1px solid #dfe2e5;
-    border-bottom: 0;
-    margin: 0;
-    padding: 6px 13px;
-  }
-
-  table tr td {
-    border: 1px solid #dfe2e5;
-    margin: 0;
-    padding: 6px 13px;
-  }
-
-  table tr th:first-child,
-  table tr td:first-child {
-    margin-top: 0;
-  }
-
-  table tr th:last-child,
-  table tr td:last-child {
-    margin-bottom: 0;
-  }
-
-  tt {
-    border: 1px solid #e7eaed;
-    background-color: #f8f8f8;
-    border-radius: 3px;
-    padding: 0;
-    padding: 2px 4px 0px 4px;
-    font-size: .9em;
-  }
-
-  code {
-    background-color: #f3f4f4;
-    padding: 0 2px 0 2px;
-    font-size: 16px;
-  }
-
-
-  @media print {
-    html {
-      font-size: 13px;
-    }
-
-    table,
-    pre {
-      page-break-inside: avoid;
-    }
-
-    pre {
-      word-wrap: break-word;
-    }
-  }
-
-
-
-  pre {
-    padding: 1rem;
-    font-size: 100%;
-    line-height: 1.45;
-    background-color:#f7f7f7;
-    border: 0;
-    border-radius: 3px;
-    color: #777777;
-    margin-top: 0 !important;
-  }
-
-  blockquote {
-    border-left-color: rgba(85, 85, 85, 0.12);
-  }
-
-  header,
-  footer {
-    font-family: "Segoe UI", "Arial", sans-serif;
-  }
-
-}
\ No newline at end of file