添加元素组件

auto-imports.d.ts

@@ -1,6 +1,7 @@
 /* eslint-disable */
 /* prettier-ignore */
 // @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
 declare global {

components.d.ts

@@ -47,7 +47,7 @@ declare module 'vue' {
     PagePalette: typeof import('./src/components/PagePalette.vue')['default']
     PageToc: typeof import('./src/components/PageToc.vue')['default']
     RoyCircle: typeof import('./src/components/PageComponents/RoyCircle.vue')['default']
-    RoyComplexTable: typeof import('./src/components/PageComponents/RoyTable/RoyComplexTable.vue')['default']
+    RoyComplexTable: typeof import('./src/components/PageComponents/YvanTable/RoyComplexTable.vue')['default']
     RoyGroup: typeof import('./src/components/PageComponents/RoyGroup.vue')['default']
     RoyImage: typeof import('./src/components/PageComponents/YvanImage.vue')['default']
     RoyLine: typeof import('./src/components/PageComponents/YvanLine.vue')['default']
@@ -55,9 +55,9 @@ declare module 'vue' {
     RoyRect: typeof import('./src/components/PageComponents/RoyRect.vue')['default']
     RoySimpleTable: typeof import('./src/components/PageComponents/RoyTable/RoySimpleTable.vue')['default']
     RoySimpleText: typeof import('./src/components/PageComponents/YvanSimpleText.vue')['default']
-    RoySimpleTextInTable: typeof import('./src/components/PageComponents/RoyTable/RoySimpleTextInTable.vue')['default']
+    RoySimpleTextInTable: typeof import('./src/components/PageComponents/YvanTable/RoySimpleTextInTable.vue')['default']
     RoyStar: typeof import('./src/components/PageComponents/RoyStar.vue')['default']
-    RoyTextInTable: typeof import('./src/components/PageComponents/RoyTable/RoyTextInTable.vue')['default']
+    RoyTextInTable: typeof import('./src/components/PageComponents/YvanTable/RoyTextInTable.vue')['default']
     RulerWrapper: typeof import('./src/components/sketch-ruler/rulerWrapper.vue')['default']
     SidebarMenu: typeof import('./src/components/yvan-ui/yvan-sidebar-menu/SidebarMenu.vue')['default']
     SidebarMenuBadge: typeof import('./src/components/yvan-ui/yvan-sidebar-menu/SidebarMenuBadge.vue')['default']
@@ -65,7 +65,7 @@ declare module 'vue' {
     SidebarMenuItem: typeof import('./src/components/yvan-ui/yvan-sidebar-menu/SidebarMenuItem.vue')['default']
     SidebarMenuLink: typeof import('./src/components/yvan-ui/yvan-sidebar-menu/SidebarMenuLink.vue')['default']
     SketchRuler: typeof import('./src/components/sketch-ruler/sketchRuler.vue')['default']
-    TableDataSetting: typeof import('./src/components/PageComponents/RoyTable/TableDataSetting.vue')['default']
+    TableDataSetting: typeof import('./src/components/PageComponents/yvan-table/TableDataSetting.vue')['default']
     Toast: typeof import('./src/components/yvan-ui/yvan-print-toast/toast.vue')['default']
     WangEditor: typeof import('./src/components/PageComponents/WangEditorVue/WangEditor.vue')['default']
     WangToolbar: typeof import('./src/components/PageComponents/WangEditorVue/WangToolbar.vue')['default']
@@ -73,6 +73,8 @@ declare module 'vue' {
     YvanBarcodeProps: typeof import('./src/components/PageComponents/YvanBarcodeProps.vue')['default']
     YvanCircle: typeof import('./src/components/PageComponents/YvanCircle.vue')['default']
     YvanCircleProps: typeof import('./src/components/PageComponents/YvanCircleProps.vue')['default']
+    YvanComplexTable: typeof import('./src/components/PageComponents/yvan-table/YvanComplexTable.vue')['default']
+    YvanComplexTableProps: typeof import('./src/components/PageComponents/yvan-table/YvanComplexTableProps.vue')['default']
     YvanImage: typeof import('./src/components/PageComponents/YvanImage.vue')['default']
     YvanImageProps: typeof import('./src/components/PageComponents/YvanImageProps.vue')['default']
     YvanLine: typeof import('./src/components/PageComponents/YvanLine.vue')['default']
@@ -91,13 +93,19 @@ declare module 'vue' {
     YvanPrintHeader: typeof import('./src/components/yvan-ui/yvan-print-header.vue')['default']
     YvanPrintMain: typeof import('./src/components/yvan-ui/yvan-print-main.vue')['default']
     YvanPrintPageFormat: typeof import('./src/components/yvan-print-page-format.vue')['default']
+    YvanPrintTextEditor: typeof import('./src/components/yvan-ui/YvanPrintTextEditor.vue')['default']
     YvanPrintToolbar: typeof import('./src/components/yvan-ui/yvan-print-toolbar.vue')['default']
     YvanRect: typeof import('./src/components/PageComponents/YvanRect.vue')['default']
     YvanRectProps: typeof import('./src/components/PageComponents/YvanRectProps.vue')['default']
     YvanRichText: typeof import('./src/components/PageComponents/YvanRichText.vue')['default']
+    YvanRichTextEditor: typeof import('./src/components/PageComponents/YvanRichTextEditor.vue')['default']
     YvanRichTextProps: typeof import('./src/components/PageComponents/YvanRichTextProps.vue')['default']
-    YvanSimpleTable: typeof import('./src/components/PageComponents/RoyTable/YvanSimpleTable.vue')['default']
+    YvanSimpleTable: typeof import('./src/components/PageComponents/yvan-table/YvanSimpleTable.vue')['default']
+    YvanSimpleTableProps: typeof import('./src/components/PageComponents/yvan-table/YvanSimpleTableProps.vue')['default']
     YvanSimpleText: typeof import('./src/components/PageComponents/YvanSimpleText.vue')['default']
+    YvanSimpleTextInTable: typeof import('./src/components/PageComponents/yvan-table/YvanSimpleTextInTable.vue')['default']
     YvanSimpleTextProps: typeof import('./src/components/PageComponents/YvanSimpleTextProps.vue')['default']
+    YvanTextEditor: typeof import('./src/components/yvan-ui/YvanTextEditor.vue')['default']
+    YvanTextInTable: typeof import('./src/components/PageComponents/yvan-table/YvanTextInTable.vue')['default']
   }
 }

package.json

@@ -13,6 +13,7 @@
     "@ant-design/icons-vue": "^6.1.0",
     "@element-plus/icons-vue": "^2.1.0",
     "@wangeditor/editor": "^5.1.22",
+    "@wangeditor/editor-for-vue": "^5.1.12",
     "big.js": "^6.2.1",
     "element-plus": "^2.3.7",
     "mitt": "^3.0.0",

src/assets/style/main.less

@@ -21,7 +21,7 @@
     color: #fff;
   }
 
-  .roy-wang-editor {
+  .yvan-wang-editor {
     border: 1px solid var(--roy-border);
     box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
     cursor: initial;

src/components/GlobalSetting.vue

@@ -1,441 +0,0 @@
-<template>
-  <yvan-print-main class="roy-designer-global">
-    <el-form
-        ref="global-setting-form"
-        :align="formGlobalConfigIn.align"
-        :data="globalSettingConfig"
-        :items="globalSettingItem"
-        :loading="formGlobalConfigIn.loading"
-        :prevent-submit="formGlobalConfigIn.preventSubmit"
-        :rules="{}"
-        :size="formGlobalConfigIn.size"
-        :span="formGlobalConfigIn.span"
-        :title-align="formGlobalConfigIn.titleAlign"
-        :title-colon="formGlobalConfigIn.titleColon"
-        :title-overflow="formGlobalConfigIn.titleOverflow"
-        :title-width="formGlobalConfigIn.titleWidth"
-        :valid-config="formGlobalConfigIn.validConfig"
-        sync-resize
-    />
-    <el-row class="roy-designer-global__pages">
-      <el-col :span="24" class="roy-designer-global__title">纸张大小:</el-col>
-      <el-col :span="24">
-        <div class="roy-designer-global__pages__container">
-          <div
-              v-for="page in Object.values(pages)"
-              :key="page.name"
-              :class="currentPage === page.name ? 'roy-designer-global__pages__item--active' : ''"
-              class="roy-designer-global__pages__item"
-              @click="currentPage = page.name"
-          >
-            {{ page.name }}
-          </div>
-        </div>
-      </el-col>
-    </el-row>
-  </yvan-print-main>
-</template>
-
-<script>
-import {mapActions, mapState} from "pinia";
-import {globalStore, ruleStore} from "@/store";
-import commonMixin from '@/mixin/commonMixin'
-import YvanPrintMain from "@/components/yvan-ui/yvan-print-main.vue";
-
-/**
- * GlobalSetting
- */
-export default {
-  name: 'GlobalSetting',
-  mixins: [commonMixin],
-  components: {YvanPrintMain},
-  props: {},
-  data() {
-    return {
-      pages: {
-        // A1: {
-        //   name: 'A1',
-        //   w: 594,
-        //   h: 841
-        // },
-        // A2: {
-        //   name: 'A2',
-        //   w: 420,
-        //   h: 594
-        // },
-        A3: {
-          name: 'A3',
-          w: 297,
-          h: 420
-        },
-        A4: {
-          name: 'A4',
-          w: 210,
-          h: 297
-        },
-        A5: {
-          name: 'A5',
-          w: 148,
-          h: 210
-        },
-        A6: {
-          name: 'A6',
-          w: 105,
-          h: 148
-        },
-        A7: {
-          name: 'A7',
-          w: 74,
-          h: 105
-        },
-        // B1: {
-        //   name: 'B1',
-        //   w: 707,
-        //   h: 1000
-        // },
-        // B2: {
-        //   name: 'B2',
-        //   w: 500,
-        //   h: 707
-        // },
-        B3: {
-          name: 'B3',
-          w: 353,
-          h: 500
-        },
-        B4: {
-          name: 'B4',
-          w: 250,
-          h: 353
-        },
-        B5: {
-          name: 'B5',
-          w: 176,
-          h: 250
-        },
-        B6: {
-          name: 'B6',
-          w: 125,
-          h: 176
-        },
-        B7: {
-          name: 'B7',
-          w: 88,
-          h: 125
-        },
-        // C1: {
-        //   name: 'C1',
-        //   w: 648,
-        //   h: 917
-        // },
-        // C2: {
-        //   name: 'C2',
-        //   w: 458,
-        //   h: 648
-        // },
-        C3: {
-          name: 'C3',
-          w: 324,
-          h: 458
-        },
-        C4: {
-          name: 'C4',
-          w: 229,
-          h: 324
-        },
-        C5: {
-          name: 'C5',
-          w: 162,
-          h: 229
-        },
-        C6: {
-          name: 'C6',
-          w: 114,
-          h: 162
-        },
-        C7: {
-          name: 'C7',
-          w: 81,
-          h: 114
-        }
-      },
-      currentPage: 'A4',
-      globalSettingConfig: {},
-      formGlobalConfigIn: {
-        titleOverflow: true,
-        span: 8,
-        align: 'left',
-        size: 'medium',
-        titleAlign: 'right',
-        titleWidth: '200',
-        titleColon: false,
-        preventSubmit: false,
-        loading: false,
-        validConfig: {
-          autoPos: true
-        }
-      },
-      globalSettingItem: [
-        {
-          title: '模板名称',
-          field: 'title',
-          span: 24,
-          itemRender: {
-            name: '$input'
-          }
-        },
-        {
-          title: '纸张方向',
-          field: 'pageDirection',
-          span: 24,
-          itemRender: {
-            name: '$select',
-            options: [
-              {
-                label: '横向',
-                value: 'l'
-              },
-              {
-                label: '纵向',
-                value: 'p'
-              }
-            ],
-            props: {
-              disabled: true
-            }
-          }
-        },
-        {
-          title: '页面上边距',
-          field: 'pageMarginTop',
-          span: 24,
-          itemRender: {
-            name: '$input',
-            props: {
-              type: 'number',
-              min: 0,
-              max: 50
-            }
-          }
-        },
-        {
-          title: '页面下边距',
-          field: 'pageMarginBottom',
-          span: 24,
-          itemRender: {
-            name: '$input',
-            props: {
-              type: 'number',
-              min: 0,
-              max: 50
-            }
-          }
-        },
-        {
-          title: '背景颜色',
-          field: 'background',
-          span: 24,
-          itemRender: {
-            name: '$colorPicker',
-            props: {}
-          }
-        },
-        {
-          title: '默认字体',
-          field: 'fontFamily',
-          span: 24,
-          itemRender: {
-            name: '$select',
-            options: [
-              {
-                label: '宋体',
-                value: 'simsun'
-              },
-              {
-                label: '黑体',
-                value: 'simhei'
-              },
-              {
-                label: '楷体',
-                value: 'kaiti'
-              },
-              {
-                label: '仿宋',
-                value: 'fangsong'
-              },
-              {
-                label: '微软雅黑',
-                value: 'Microsoft YaHei'
-              }
-            ]
-          }
-        },
-        {
-          title: '默认行高',
-          field: 'lineHeight',
-          span: 24,
-          itemRender: {
-            name: '$select',
-            options: [
-              {
-                value: '1',
-                label: '1'
-              },
-              {
-                value: '1.5',
-                label: '1.5'
-              },
-              {
-                value: '2',
-                label: '2'
-              },
-              {
-                value: '2.5',
-                label: '2.5'
-              },
-              {
-                value: '3',
-                label: '3'
-              }
-            ]
-          }
-        }
-        // {
-        //   title: '默认字体颜色',
-        //   field: 'color',
-        //   span: 24,
-        //   itemRender: {
-        //     name: '$colorPicker',
-        //     props: {}
-        //   }
-        // },
-        // {
-        //   title: '默认字体大小（pt）',
-        //   field: 'fontSize',
-        //   span: 24,
-        //   itemRender: {
-        //     name: '$input',
-        //     props: {
-        //       type: 'number',
-        //       size: 'mini',
-        //       min: 10,
-        //       max: 120
-        //     }
-        //   }
-        // }
-      ]
-    }
-  },
-  computed: {
-    ...mapState(globalStore, {
-      pageConfig: (state) => state.pageConfig
-    })
-  },
-  methods: {
-    ...mapActions(globalStore, ['setPageSize', 'setPageConfig']),
-    ...mapActions(ruleStore, ['setReDrawRuler', 'setRect']),
-    initMounted() {
-      this.globalSettingConfig = this.deepCopy(this.pageConfig)
-    }
-  },
-  created() {
-  },
-  mounted() {
-    this.initMounted()
-  },
-  watch: {
-    currentPage(newVal) {
-      let page = this.pages[newVal]
-      this.setRect(page)
-      this.setReDrawRuler()
-      this.setPageSize({
-        pageSize: newVal,
-        w: page.w,
-        h: page.h
-      })
-    },
-    globalSettingConfig(newVal) {
-      this.setPageConfig(newVal)
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.roy-designer-global {
-  height: 100%;
-  padding: 12px 8px;
-  font-size: 12px;
-
-  .vxe-form.size--medium .vxe-form--item-inner {
-    display: grid;
-  }
-
-  .vxe-form--item-title {
-    font-size: 10px;
-    text-align: left !important;
-    margin-bottom: 5px;
-
-    .vxe-form--item-title-label:before {
-      content: '';
-      width: 1px;
-      height: 80%;
-      margin-right: 5px;
-      border-left: var(--roy-color-primary) 3px solid;
-    }
-  }
-
-  .vxe-form--item {
-    float: inherit !important;
-  }
-
-  .vxe-input--inner {
-    border-radius: unset;
-    background: transparent;
-    color: var(--roy-text-color-primary);
-    border-color: var(--roy-border-color);
-  }
-
-  .roy-designer-global__pages {
-    .roy-designer-global__pages__container {
-      margin: 8px;
-      display: grid;
-      grid-template-columns: repeat(4, auto);
-      grid-gap: 5px;
-      grid-template-rows: 50px;
-    }
-
-    .roy-designer-global__pages__item {
-      font-size: 16px;
-      line-height: 50px;
-      text-align: center;
-      border: 1px solid #ccc;
-      user-select: none;
-      cursor: pointer;
-
-      &:hover {
-        border: 1px solid #4579e1;
-        background: var(--prism-background);
-      }
-
-      &.roy-designer-global__pages__item--active {
-        border: 1px solid #4579e1;
-        color: #4579e1;
-      }
-    }
-  }
-
-  .roy-designer-global__title {
-    padding: 6px 5px;
-    margin: 4px;
-
-    &:before {
-      content: '';
-      width: 1px;
-      height: 80%;
-      margin-right: 5px;
-      border-left: var(--roy-color-primary) 3px solid;
-    }
-  }
-}
-</style>

src/components/PageComponents/RoyTable/RoyTextInTable.vue

@@ -1,113 +0,0 @@
-<template>
-  <div style="width: 100%; height: 100%" @click="activeCell" @dblclick="onDblClick">
-    <RoyModal
-      v-if="showEditor"
-      :show.sync="showEditor"
-      height="70%"
-      title="长文本编辑"
-      width="60%"
-      @close="handleTextClosed"
-    >
-      <div class="roy-wang-editor" @mousedown="handleMouseDown">
-        <WangToolbar
-          :defaultConfig="toolbarConfig"
-          :editor="wangEditor"
-          style="border-bottom: 1px solid #ccc"
-        />
-        <WangEditor
-          v-model="html"
-          :defaultConfig="editorConfig"
-          :mode="mode"
-          style="height: 300px"
-          @onCreated="onCreated"
-        />
-      </div>
-    </RoyModal>
-    <StyledText v-bind="style">
-      <div class="roy-text-inner" v-html="propValue"></div>
-    </StyledText>
-  </div>
-</template>
-
-<script>
-import { StyledText } from '@/components/PageComponents/style'
-import RoyModal from '@/components/RoyModal/RoyModal'
-import WangToolbar from '@/components/PageComponents/WangEditorVue/WangToolbar'
-import WangEditor from '@/components/PageComponents/WangEditorVue/WangEditor'
-import { toolBarConfig, editorConfig, mode } from '@/components/config/editorConfig'
-import commonMixin from '@/mixin/commonMixin'
-import { mapState } from 'vuex'
-
-export default {
-  name: 'RoyTextInTable',
-  mixins: [commonMixin],
-  props: {
-    element: {
-      type: Object,
-      default: () => {}
-    },
-    propValue: {
-      type: String,
-      default: ''
-    }
-  },
-  components: {
-    WangEditor,
-    WangToolbar,
-    StyledText,
-    RoyModal
-  },
-  computed: {
-    ...mapState({
-      curComponent: (state) => state.printTemplateModule.curComponent
-    }),
-    style() {
-      return this.element.style || {}
-    }
-  },
-  data() {
-    return {
-      wangEditor: null,
-      showEditor: false,
-      html: this.deepCopy(this.propValue),
-      toolbarConfig: toolBarConfig,
-      editorConfig: editorConfig,
-      mode: mode
-    }
-  },
-  methods: {
-    activeCell() {
-      this.$emit('activeCell', {
-        id: this.element.id
-      })
-    },
-    onCreated(editor) {
-      this.wangEditor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
-    },
-    onDblClick() {
-      this.showEditor = true
-    },
-    handleMouseDown(e) {
-      e.stopPropagation()
-    },
-    handleTextClosed() {
-      this.$store.commit('printTemplateModule/updateDataValue', {
-        data: this.element,
-        value: this.html,
-        key: 'propValue'
-      })
-      // this.$emit('update:propValue', this.html)
-      this.$emit('componentUpdated', this.html)
-    }
-  },
-  created() {},
-  watch: {},
-  beforeDestroy() {
-    const editor = this.wangEditor
-    if (editor == null) {
-      return
-    }
-    editor.destroy() // 组件销毁时，及时销毁编辑器
-  }
-}
-</script>

src/components/PageComponents/WangEditorVue/WangEditor.vue

@@ -1,133 +0,0 @@
-<script>
-import {h} from "vue";
-import {createEditor} from '@wangeditor/editor'
-
-function genErrorInfo(fnName) {
-  let info = `请使用 '@${fnName}' 事件，不要放在 props 中`
-  info += `\nPlease use '@${fnName}' event instead of props`
-  return info
-}
-
-export default {
-  //【注意】单独写 <template>...</template> 时，rollup 打包完浏览器运行时报错，所以先在这里写 template
-  render() {
-    return h('div', {ref: 'box'})
-  },
-  name: 'WangEditor',
-  data() {
-    return {
-      curValue: '',
-      editor: null
-    }
-  },
-  props: ['defaultContent', 'defaultConfig', 'mode', 'defaultHtml', 'value'], // value 用于自定义 v-model
-  mounted() {
-    this.create()
-  },
-  watch: {
-    // 监听 'value' 属性变化 - value 用于自定义 v-model
-    value(newVal) {
-      const isEqual = newVal === this.curValue
-      // 和当前内容一样，则忽略
-      if (isEqual) {
-        return
-      }
-      // 重置 HTML
-      this.setHtml(newVal)
-    }
-  },
-  methods: {
-    // 重置 HTML
-    setHtml(newHtml) {
-      const editor = this.editor
-      if (editor == null) {
-        return
-      }
-      editor.setHtml(newHtml)
-    },
-    // 创建 editor
-    create() {
-      if (this.$refs.box == null) {
-        return
-      }
-      const defaultConfig = this.defaultConfig || {}
-      const defaultContent = JSON.stringify(
-          Array.isArray(this.defaultContent) ? this.defaultContent : []
-      )
-      createEditor({
-        selector: this.$refs.box,
-        html: this.defaultHtml || this.value || '',
-        config: {
-          ...defaultConfig,
-          onCreated: (editor) => {
-            this.editor = Object.seal(editor) // 注意，一定要用 Object.seal() 否则会报错
-            this.$emit('onCreated', editor)
-            if (defaultConfig.onCreated) {
-              const info = genErrorInfo('onCreated')
-              throw new Error(info)
-            }
-          },
-          onChange: (editor) => {
-            const editorHtml = editor.getHtml()
-            this.curValue = editorHtml // 记录当前 html 内容
-            this.$emit('input', editorHtml) // 用于自定义 v-model
-            this.$emit('onChange', editor)
-            if (defaultConfig.onChange) {
-              const info = genErrorInfo('onChange')
-              throw new Error(info)
-            }
-          },
-          onDestroyed: (editor) => {
-            this.$emit('onDestroyed', editor)
-            if (defaultConfig.onDestroyed) {
-              const info = genErrorInfo('onDestroyed')
-              throw new Error(info)
-            }
-          },
-          onMaxLength: (editor) => {
-            this.$emit('onMaxLength', editor)
-            if (defaultConfig.onMaxLength) {
-              const info = genErrorInfo('onMaxLength')
-              throw new Error(info)
-            }
-          },
-          onFocus: (editor) => {
-            this.$emit('onFocus', editor)
-            if (defaultConfig.onFocus) {
-              const info = genErrorInfo('onFocus')
-              throw new Error(info)
-            }
-          },
-          onBlur: (editor) => {
-            this.$emit('onBlur', editor)
-            if (defaultConfig.onBlur) {
-              const info = genErrorInfo('onBlur')
-              throw new Error(info)
-            }
-          },
-          customAlert: (info, type) => {
-            this.$emit('customAlert', info, type)
-            if (defaultConfig.customAlert) {
-              const info = genErrorInfo('customAlert')
-              throw new Error(info)
-            }
-          },
-          customPaste: (editor, event) => {
-            if (defaultConfig.customPaste) {
-              const info = genErrorInfo('customPaste')
-              throw new Error(info)
-            }
-            let res
-            this.$emit('customPaste', editor, event, (val) => {
-              res = val
-            })
-            return res
-          }
-        },
-        content: JSON.parse(defaultContent),
-        mode: this.mode || 'default'
-      })
-    }
-  }
-}
-</script>

src/components/PageComponents/WangEditorVue/WangToolbar.vue

@@ -1,43 +0,0 @@
-<script>
-import {h} from "vue";
-import {createToolbar, DomEditor} from '@wangeditor/editor'
-
-export default {
-  name: 'WangToolbar',
-  render() {
-    return h('div', {ref: 'box'})
-  },
-  props: ['editor', 'defaultConfig', 'mode'],
-  methods: {
-    // 创建 toolbar
-    create(editor) {
-      if (this.$refs.box == null) {
-        return
-      }
-      if (editor == null) {
-        return
-      }
-      if (DomEditor.getToolbar(editor)) {
-        return
-      } // 不重复创建
-      createToolbar({
-        editor,
-        selector: this.$refs.box,
-        config: this.defaultConfig || {},
-        mode: this.mode || 'default'
-      })
-    }
-  },
-  watch: {
-    editor: {
-      handler(e) {
-        if (e == null) {
-          return
-        }
-        this.create(e)
-      },
-      immediate: true
-    }
-  }
-}
-</script>

src/components/PageComponents/YvanRichText.vue

@@ -1,29 +1,5 @@
 <template>
   <div style="width: 100%; height: 100%" @dblclick="onDblClick">
-    <RoyModal
-        v-if="showEditor"
-        :show.sync="showEditor"
-        height="70%"
-        title="长文本编辑"
-        width="60%"
-        @close="handleTextClosed"
-    >
-      <div class="roy-wang-editor" @mousedown="handleMouseDown">
-        <WangToolbar
-            :defaultConfig="toolbarConfig"
-            :editor="wangEditor"
-            style="border-bottom: 1px solid #ccc"
-        />
-        <WangEditor
-            v-model="html"
-            :defaultConfig="editorConfig"
-            :mode="mode"
-            style="height: 300px"
-            @onCreated="onCreated"
-        />
-      </div>
-    </RoyModal>
-
     <StyledText v-bind="style">
       <div class="yvan-text-inner" v-html="propValue"></div>
     </StyledText>
@@ -31,15 +7,13 @@
 </template>
 
 <script>
-import {mapState} from "pinia";
-import {globalStore} from "@/store";
+import {mapState} from 'pinia';
+import {globalStore} from '@/store';
+import commonMixin from '@/mixin/commonMixin';
 import {StyledText} from '@/components/PageComponents/style';
-import RoyModal from '@/components/yvan-ui/yvan-model/RoyModal.vue';
-import WangToolbar from '@/components/PageComponents/WangEditorVue/WangToolbar.vue';
-import WangEditor from '@/components/PageComponents/WangEditorVue/WangEditor.vue';
 import {toolBarConfig, editorConfig, mode} from '@/components/config/editorConfig';
-import commonMixin from '@/mixin/commonMixin';
 import YvanRichTextProps from "@/components/PageComponents/YvanRichTextProps.vue";
+import YvanPrintTextEditor from "@/components/yvan-ui/YvanPrintTextEditor.vue";
 
 export default {
   name: 'YvanRichText',
@@ -56,11 +30,9 @@ export default {
     }
   },
   components: {
-    WangEditor,
-    WangToolbar,
     StyledText,
-    RoyModal,
-    YvanRichTextProps
+    YvanRichTextProps,
+    YvanPrintTextEditor
   },
   computed: {
     ...mapState(globalStore, {
@@ -72,8 +44,6 @@ export default {
   },
   data() {
     return {
-      wangEditor: null,
-      showEditor: false,
       html: this.deepCopy(this.propValue),
       toolbarConfig: toolBarConfig,
       editorConfig: editorConfig,
@@ -81,9 +51,6 @@ export default {
     }
   },
   methods: {
-    onCreated(editor) {
-      this.wangEditor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
-    },
     onBlur() {
       globalStore().setPropValue({
         id: this.element.id,
@@ -91,14 +58,15 @@ export default {
       })
     },
     onDblClick() {
-      this.showEditor = true
+      System.showDialog(YvanPrintTextEditor, {valueHtml: this.html, width: 65}).then(res => {
+
+      }).finally(() => {
+
+      })
     },
     handleMouseDown(e) {
       e.stopPropagation()
     },
-    handleTextClosed() {
-      this.onBlur()
-    }
   },
   install(Vue) {
     Vue.component(this.name, this)
@@ -106,13 +74,6 @@ export default {
   },
   created() {
   },
-  watch: {},
-  beforeDestroy() {
-    const editor = this.wangEditor
-    if (editor == null) {
-      return
-    }
-    editor.destroy() // 组件销毁时，及时销毁编辑器
-  }
+  watch: {}
 }
 </script>

src/components/PageComponents/index.js

@@ -5,6 +5,8 @@ import YvanCircle from "@/components/PageComponents/YvanCircle.vue";
 import YvanBarcode from "@/components/PageComponents/YvanBarcode.vue";
 import YvanRichText from "@/components/PageComponents/YvanRichText.vue";
 import YvanSimpleText from "@/components/PageComponents/YvanSimpleText.vue";
+import YvanSimpleTable from "@/components/PageComponents/yvan-table/YvanSimpleTable.vue";
+import YvanComplexTable from "@/components/PageComponents/yvan-table/YvanComplexTable.vue";
 
 export const install = (Vue) => {
     YvanLine.install(Vue)
@@ -14,4 +16,6 @@ export const install = (Vue) => {
     YvanBarcode.install(Vue)
     YvanRichText.install(Vue)
     YvanSimpleText.install(Vue)
+    YvanSimpleTable.install(Vue)
+    YvanComplexTable.install(Vue)
 }

src/components/PageComponents/style.js

@@ -136,7 +136,7 @@ export const StyledText = styled('div', textProps)`
     }
   }};
 
-  .roy-text-inner {
+  .yvan-text-inner {
     height: 100%;
     padding: ${(props) => `${props.padding}px`};
     line-height: ${(props) => props.lineHeight};
@@ -322,11 +322,11 @@ export const StyledSimpleTable = styled('div', simpleTableProps)`
     background-color: ${(props) => `${props.background || '#FFF'}`};
   }
 
-  .roy-simple-table-cell--selected {
+  .yvan-simple-table-cell--selected {
     background: #d4e7f5;
   }
 
-  .roy-simple-table__cell__corner {
+  .yvan-simple-table__cell__corner {
     width: 8px;
     height: 8px;
     background: var(--roy-color-primary);
@@ -367,7 +367,7 @@ export const StyledComplexTable = styled('div', complexTableProps)`
     position: relative;
   }
 
-  .roy-complex-table-cell-in {
+  .yvan-complex-table-cell-in {
     height: 100%;
     width: 100%;
     position: absolute;
@@ -379,44 +379,44 @@ export const StyledComplexTable = styled('div', complexTableProps)`
     display: flex;
   }
 
-  .rendered-roy-complex-table__footer {
+  .rendered-yvan-complex-table__footer {
     margin-top: ${(props) => `-${props.borderWidth - 0.5}px`};
   }
 
-  .roy-complex-table__body table,
-  .rendered-roy-complex-table__body {
+  .yvan-complex-table__body table,
+  .rendered-yvan-complex-table__body {
     //table-layout: fixed;
     border-collapse: separate;
     border-spacing: ${(props) => `${props.borderWidth}px`};
     background-color: ${(props) => `${props.borderColor}`};
   }
 
-  .roy-complex-table__body td,
-  .roy-complex-table__body th,
-  .rendered-roy-complex-table__body td,
-  .rendered-roy-complex-table__body th {
+  .yvan-complex-table__body td,
+  .yvan-complex-table__body th,
+  .rendered-yvan-complex-table__body td,
+  .rendered-yvan-complex-table__body th {
     position: relative;
     background-color: ${(props) => `${props.background || '#FFF'}`};
   }
 
-  .roy-complex-table__prefix,
-  .roy-complex-table__suffix,
+  .yvan-complex-table__prefix,
+  .yvan-complex-table__suffix,
   .rendered-roy-text {
     overflow: hidden;
   }
 
-  .roy-complex-table__container,
-  .rendered-roy-complex-table {
+  .yvan-complex-table__container,
+  .rendered-yvan-complex-table {
     border-spacing: 0;
     border-collapse: separate;
   }
 
-  .roy-complex-table__container > tr > td {
+  .yvan-complex-table__container > tr > td {
     padding: 0;
     margin: 0;
   }
 
-  .roy-complex-table__auto_fill {
+  .yvan-complex-table__auto_fill {
     height: 100%;
     display: flex;
     justify-content: center;

src/components/PageComponents/RoyTable/TableDataSetting.vue

@@ -1,47 +1,43 @@
-<!--
-* @description 表格数据设置
-* @filename TableDataSetting.vue
-!-->
 <template>
   <RoyModal
-    v-if="visible"
-    :show="visible"
-    class="TableDataSetting"
-    height="80%"
-    title="数据表格设置"
-    width="60%"
-    @close="handleModalClose"
-    @mousedown.stop.prevent="handleMouseDown"
+      v-if="visible"
+      :show="visible"
+      class="TableDataSetting"
+      height="80%"
+      title="数据表格设置"
+      width="60%"
+      @close="handleModalClose"
+      @mousedown.stop.prevent="handleMouseDown"
   >
     <vxe-grid
-      ref="xGrid"
-      :data="tableDataIn"
-      height="100%"
-      v-bind="gridOptions"
-      @toolbar-button-click="handleToolbarButtonClick"
+        ref="xGrid"
+        :data="tableDataIn"
+        height="100%"
+        v-bind="gridOptions"
+        @toolbar-button-click="handleToolbarButtonClick"
     >
       <template v-slot:form>
         <div class="roy-table-data-form">
           <div>
             <span>绑定数据源：</span>
-            <vxe-select v-model="tableDataSource" placeholder="请选择数据源">
-              <vxe-option
-                v-for="opt in dataSourceOption"
-                :key="opt.field"
-                :label="opt.title"
-                :value="opt.field"
-              ></vxe-option>
-            </vxe-select>
+            <el-select v-model="tableDataSource" placeholder="请选择数据源">
+              <el-option
+                  v-for="opt in dataSourceOption"
+                  :key="opt.field"
+                  :label="opt.title"
+                  :value="opt.field"
+              ></el-option>
+            </el-select>
           </div>
           <div>
             <span>表格行高：</span>
-            <vxe-input
-              v-model="tableRowHeight"
-              max="100"
-              min="20"
-              placeholder="20-100"
-              type="number"
-            ></vxe-input>
+            <el-input
+                v-model="tableRowHeight"
+                max="100"
+                min="20"
+                placeholder="20-100"
+                type="number"
+            ></el-input>
           </div>
         </div>
       </template>
@@ -50,9 +46,10 @@
 </template>
 
 <script>
+import {mapState} from 'pinia'
+import {globalStore} from "@/store"
 import commonMixin from '@/mixin/commonMixin'
-import RoyModal from '@/components/RoyModal/RoyModal'
-import { mapState } from 'vuex'
+// import RoyModal from '@/components/RoyModal/RoyModal'
 import toast from '@/utils/toast'
 
 /**
@@ -62,7 +59,7 @@ export default {
   name: 'TableDataSetting',
   mixins: [commonMixin],
   components: {
-    RoyModal
+    // RoyModal
   },
   props: {
     visible: {
@@ -77,8 +74,8 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      dataSource: (state) => state.printTemplateModule.dataSource
+    ...mapState(globalStore, {
+      dataSource: (state) => state.dataSource
     }),
     dataSourceOption() {
       return this.dataSource.filter((item) => {
@@ -131,32 +128,32 @@ export default {
           custom: false
         },
         columns: [
-          { type: 'checkbox', width: 50 },
+          {type: 'checkbox', width: 50},
           {
             field: 'title',
             title: '列标题',
             sortable: true,
-            titlePrefix: { message: '用于展示于表头名称' },
+            titlePrefix: {message: '用于展示于表头名称'},
             editRender: {
               name: '$input',
-              props: { placeholder: '请输入列标题' }
+              props: {placeholder: '请输入列标题'}
             }
           },
           {
             field: 'field',
             title: '英文字段',
             sortable: true,
-            titlePrefix: { message: '用于匹配对应列数据' },
+            titlePrefix: {message: '用于匹配对应列数据'},
             editRender: {
               name: '$input',
-              props: { placeholder: '请输入英文字段' }
+              props: {placeholder: '请输入英文字段'}
             }
           },
           {
             field: 'align',
             title: '对齐方式',
             sortable: true,
-            titlePrefix: { message: '该列的对齐方式' },
+            titlePrefix: {message: '该列的对齐方式'},
             editRender: {
               name: '$select',
               options: [
@@ -182,7 +179,7 @@ export default {
             field: 'width',
             title: '列宽度',
             sortable: true,
-            titlePrefix: { message: '该列宽度' },
+            titlePrefix: {message: '该列宽度'},
             editRender: {
               name: '$input',
               props: {
@@ -197,7 +194,7 @@ export default {
             field: 'formatter',
             title: '列类型',
             sortable: true,
-            titlePrefix: { message: '该列的数据的展现方式' },
+            titlePrefix: {message: '该列的数据的展现方式'},
             editRender: {
               name: '$select',
               options: [
@@ -230,11 +227,11 @@ export default {
           range: false
         },
         editRules: {
-          title: [{ required: true, message: '请输入列标题' }],
-          field: [{ required: true, message: '请输入英文字段名' }],
-          align: [{ required: true, message: '请选择对齐方式' }],
-          width: [{ required: true, message: '请输入列宽度' }],
-          formatter: [{ required: true, message: '请选择列类型' }]
+          title: [{required: true, message: '请输入列标题'}],
+          field: [{required: true, message: '请输入英文字段名'}],
+          align: [{required: true, message: '请选择对齐方式'}],
+          width: [{required: true, message: '请输入列宽度'}],
+          formatter: [{required: true, message: '请选择列类型'}]
         },
         editConfig: {
           trigger: 'click',
@@ -246,16 +243,17 @@ export default {
   },
   methods: {
     initMounted() {
-      const { tableCols, tableRowHeight, tableDataSource } = this.tableConfig
+      const {tableCols, tableRowHeight, tableDataSource} = this.tableConfig
       this.tableDataIn = this.deepCopy(tableCols)
       this.tableRowHeight = tableRowHeight
       this.tableDataSource = tableDataSource
     },
-    handleMouseDown() {},
+    handleMouseDown() {
+    },
     handleModalClose() {
       this.$store.commit('printTemplateModule/setCurTableSettingId', null)
     },
-    handleToolbarButtonClick({ code }) {
+    handleToolbarButtonClick({code}) {
       switch (code) {
         case 'save':
           this.doSaveTableSetting()
@@ -293,7 +291,8 @@ export default {
       })
     }
   },
-  created() {},
+  created() {
+  },
   mounted() {
     this.initMounted()
   },

src/components/PageComponents/RoyTable/RoyComplexTable.vue

@@ -1,15 +1,11 @@
-<!--
-* @description 复杂表格
-* @filename RoyComplexTable.vue
-!-->
 <template>
-  <div v-if="initCompleted" class="roy-complex-table">
+  <div v-if="initCompleted" class="yvan-complex-table">
     <StyledComplexTable v-bind="style">
-      <table class="roy-complex-table__container">
+      <table class="yvan-complex-table__container">
         <tr v-if="element.showPrefix">
           <td>
-            <div class="roy-complex-table__prefix">
-              <RoyTextInTable
+            <div class="yvan-complex-table__prefix">
+              <YvanTextInTable
                 key="prefix"
                 :element="prefixTextElement"
                 :prop-value="prefixTextElement.propValue"
@@ -21,8 +17,8 @@
         </tr>
         <tr v-if="element.showHead">
           <td>
-            <div class="roy-complex-table__head">
-              <RoySimpleTable
+            <div class="yvan-complex-table__head">
+              <YvanSimpleTable
                 key="head"
                 :element="headSimpleTableElement"
                 :prop-value="headSimpleTableElement.propValue"
@@ -39,7 +35,7 @@
                 marginTop: element.showHead ? `-${style.borderWidth - 0.5}px` : '',
                 marginBottom: element.showFoot ? `-${style.borderWidth - 0.5}px` : ''
               }"
-              class="roy-complex-table__body"
+              class="yvan-complex-table__body"
             >
               <table :style="`width: ${bodyTableWidth}px`">
                 <thead>
@@ -61,7 +57,7 @@
                 <tbody>
                   <tr :style="`height: ${tableRowHeight}px`">
                     <td :colspan="tableCols.length" :style="`height: ${tableRowHeight}px`">
-                      <div class="roy-complex-table__auto_fill">自动填充</div>
+                      <div class="yvan-complex-table__auto_fill">自动填充</div>
                     </td>
                   </tr>
                 </tbody>
@@ -71,8 +67,8 @@
         </tr>
         <tr v-if="element.showFoot">
           <td>
-            <div class="roy-complex-table__foot">
-              <RoySimpleTable
+            <div class="yvan-complex-table__foot">
+              <YvanSimpleTable
                 key="foot"
                 :element="footSimpleTableElement"
                 :prop-value="footSimpleTableElement.propValue"
@@ -84,8 +80,8 @@
         </tr>
         <tr v-if="element.showSuffix">
           <td>
-            <div class="roy-complex-table__suffix">
-              <RoyTextInTable
+            <div class="yvan-complex-table__suffix">
+              <YvanTextInTable
                 key="suffix"
                 :element="suffixTextElement"
                 :prop-value="suffixTextElement.propValue"
@@ -107,19 +103,21 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
+import {globalStore} from "@/store"
 import commonMixin from '@/mixin/commonMixin'
-import RoyTextInTable from './RoyTextInTable'
-import RoySimpleTable from './YvanSimpleTable.vue'
-import ResizeObserver from '@/components/PageComponents/RoyTable/ResizeObserver'
-import TableDataSetting from '@/components/PageComponents/RoyTable/TableDataSetting'
 import { StyledComplexTable } from '@/components/PageComponents/style'
-import { mapState } from 'vuex'
+import ResizeObserver from '@/components/PageComponents/yvan-table/ResizeObserver'
+import TableDataSetting from '@/components/PageComponents/yvan-table/TableDataSetting.vue'
+import YvanTextIn from '@/components/PageComponents/yvan-table/YvanTextInTable.vue'
+import YvanSimpleTable from '@/components/PageComponents/yvan-table/YvanSimpleTable.vue';
+import YvanComplexTableProps from '@/components/PageComponents/yvan-table/YvanComplexTableProps.vue'
 
 const defaultTextProp = {
   icon: 'ri-text',
   code: 'text',
   name: '文本',
-  component: 'RoyTextIn',
+  component: 'YvanTextIn',
   propValue: '',
   style: {
     width: '100%',
@@ -135,7 +133,7 @@ const defaultSimpleTableProp = {
   icon: 'ri-table-2',
   code: 'table',
   name: '单元格',
-  component: 'RoySimpleTable',
+  component: 'YvanSimpleTable',
   propValue: {},
   style: {
     width: '100%',
@@ -182,11 +180,11 @@ const defaultDataTableProp = {
  * 复杂表格
  */
 export default {
-  name: 'RoyComplexTable',
+  name: 'YvanComplexTable',
   mixins: [commonMixin],
   components: {
-    RoyTextInTable,
-    RoySimpleTable,
+    YvanTextIn,
+    YvanSimpleTable,
     StyledComplexTable,
     TableDataSetting
   },
@@ -208,8 +206,8 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      curTableSettingId: (state) => state.printTemplateModule.curTableSettingId
+    ...mapState(globalStore, {
+      curTableSettingId: (state) => state.curTableSettingId
     }),
     showTableDataSetting() {
       return this.curTableSettingId !== null && this.curTableSettingId === this.element.id
@@ -271,7 +269,7 @@ export default {
         footSimpleTableElement: this.footSimpleTableElement,
         bodyDataTableElement: this.bodyDataTableElement
       })
-      this.$store.commit('printTemplateModule/setPropValue', {
+      globalStore().setPropValue({
         id: this.element.id,
         propValue
       })
@@ -283,14 +281,14 @@ export default {
     },
     observeElementWidth() {
       this.$nextTick(() => {
-        const element = this.$el.querySelector('.roy-complex-table__container')
+        const element = this.$el.querySelector('.yvan-complex-table__container')
         if (!element) {
           return
         }
         const resizeObserver = new ResizeObserver()
         const callback = () => {
           this.$nextTick(() => {
-            this.$store.commit('printTemplateModule/setShapeStyle', {
+            globalStore().setShapeStyle({
               width: element.clientWidth,
               height: element.clientHeight
             })
@@ -301,6 +299,10 @@ export default {
     }
   },
   created() {},
+  install(Vue){
+    Vue.component(this.name, this)
+    Vue.component(YvanComplexTableProps.name, YvanComplexTableProps)
+  },
   mounted() {
     this.initMounted()
   },
@@ -317,7 +319,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.roy-complex-table {
+.yvan-complex-table {
   padding: 0;
 }
 </style>

src/components/PageComponents/YvanLinePropsTemplate.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="yvan-line">
-    <el-form  ref="form" label-position="top">
+  <section class="yvan-complex-table-props">
+    <el-form ref="form" label-position="top">
 
       <el-form-item label="旋转角度(°)">
         <el-input-number controls-position="right"/>
@@ -9,12 +9,17 @@
   </section>
 </template>
 
-<script setup>
-
+<script lang="ts">
+export default {
+  name: 'YvanComplexTableProps',
+  data() {
+    return {}
+  }
+}
 </script>
 
 <style lang="less">
-.yvan-line {
+.yvan-complex-table-props {
 
   .el-input-number {
     width: 100%;

src/components/PageComponents/RoyTable/YvanSimpleTable.vue

@@ -1,27 +1,27 @@
 <template>
-  <div class="roy-simple-table">
+  <div class="yvan-simple-table">
     <Context ref="simple-table-contextmenu" :theme="contextTheme">
       <ContextItem
-        v-for="item in contextMenu"
-        :key="item.code"
-        :class="`yvan-context--${item.status}`"
-        @click="item.event"
+          v-for="item in contextMenu"
+          :key="item.code"
+          :class="`yvan-context--${item.status}`"
+          @click="item.event"
       >
         <i :class="item.icon"></i>
         <span>{{ item.label }}</span>
       </ContextItem>
     </Context>
     <StyledSimpleTable v-bind="style">
-      <table ref="royTable">
+      <table ref="yvanTable">
         <tbody>
-          <tr v-for="(row, index) in tableConfig.rows" :key="index">
-            <td
+        <tr v-for="(row, index) in tableConfig.rows" :key="index">
+          <td
               v-for="(col, index) in tableConfig.cols"
               v-show="isNeedShow(row - 1, col - 1)"
               :key="index"
               v-contextmenu="'simple-table-contextmenu'"
               :class="{
-                'roy-simple-table-cell--selected': getIsActiveCell(row, col)
+                'yvan-simple-table-cell--selected': getIsActiveCell(row, col)
               }"
               :colspan="getItColSpan(row, col)"
               :rowspan="getItRowSpan(row, col)"
@@ -35,11 +35,11 @@
               @mouseup="handleMouseUp"
               @mousedown.stop="(e) => handleCellMousedown(e, row, col)"
               @mouseenter.stop.prevent="handleCellMouseenter(row, col)"
-            >
-              <component
+          >
+            <component
                 :is="tableData[`${row}-${col}`] && tableData[`${row}-${col}`].component"
                 v-if="tableData[`${row}-${col}`]"
-                :id="`roy-component-${tableData[`${row}-${col}`].id}`"
+                :id="`yvan-component-${tableData[`${row}-${col}`].id}`"
                 :bind-value.sync="tableData[`${row}-${col}`].bindValue"
                 :cur-id="curClickedId"
                 :element="tableData[`${row}-${col}`]"
@@ -54,27 +54,29 @@
                     componentUpdated(row, col, value)
                   }
                 "
-              />
-              <div
+            />
+            <div
                 v-if="getIsActiveCell(row, col) && selectedCells.length === 1"
-                class="roy-simple-table__cell__corner"
+                class="yvan-simple-table__cell__corner"
                 @mousedown="handleMouseDownOnResize(row, col, $event)"
-              ></div>
-            </td>
-          </tr>
+            ></div>
+          </td>
+        </tr>
         </tbody>
       </table>
     </StyledSimpleTable>
   </div>
 </template>
 <script>
-import { mapState } from 'vuex'
-import { Context, ContextItem, directive } from '@/components/RoyContext'
-import RoySimpleTextIn from './RoySimpleTextInTable.vue'
-import RoyTextIn from '@/components/PageComponents/RoyTable/RoyTextInTable'
-import commonMixin from '@/mixin/commonMixin'
+import {mapState} from 'pinia'
+import {globalStore} from "@/store"
 import toast from '@/utils/toast'
-import { StyledSimpleTable } from '@/components/PageComponents/style'
+import commonMixin from '@/mixin/commonMixin'
+import {StyledSimpleTable} from '@/components/PageComponents/style'
+import {Context, ContextItem, directive} from '@/components/yvan-context'
+import YvanTextIn from '@/components/PageComponents/yvan-table/YvanTextInTable.vue'
+import YvanSimpleTextIn from '@/components/PageComponents/yvan-table/YvanSimpleTextInTable.vue'
+import YvanSimpleTableProps from '@/components/PageComponents/yvan-table/YvanSimpleTableProps.vue'
 
 const defaultTableCell = {
   icon: 'ri-text',
@@ -120,7 +122,7 @@ const defaultTableCell = {
 }
 
 export default {
-  name: 'RoySimpleTable',
+  name: 'YvanSimpleTable',
   mixins: [commonMixin],
   directives: {
     contextmenu: directive
@@ -128,14 +130,15 @@ export default {
   components: {
     Context,
     ContextItem,
-    RoyTextIn,
-    RoySimpleTextIn,
+    YvanTextIn,
+    YvanSimpleTextIn,
     StyledSimpleTable
   },
   props: {
     element: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     propValue: {
       type: Object,
@@ -250,27 +253,23 @@ export default {
           event: () => {
             this.menyItemCmd('clearSelection')
           }
-        },
-        {
-          code: 'setting',
-          icon: 'ri-list-settings-line',
-          label: '属性',
-          status: 'default',
-          event: () => {
-            this.$store.commit('printTemplateModule/setPaletteCount')
-          }
         }
       ]
     }
   },
-  created() {},
+  install(Vue){
+    Vue.component(this.name, this)
+    Vue.component(YvanSimpleTableProps.name, YvanSimpleTableProps)
+  },
+  created() {
+  },
   mounted() {
     this.initMounted()
   },
   computed: {
-    ...mapState({
-      editor: (state) => state.printTemplateModule.editor,
-      isNightMode: (state) => state.printTemplateModule.nightMode.isNightMode
+    ...mapState(globalStore, {
+      editor: (state) => state.editor,
+      isNightMode: (state) => false
     }),
     style() {
       return this.element.style || {}
@@ -286,8 +285,8 @@ export default {
           if (tableConfig.layoutDetail[i * tableConfig.cols + j]) {
             let colInfo = tableConfig.layoutDetail[i * tableConfig.cols + j]
             if (
-              (colInfo.colSpan && colInfo.colSpan > 1) ||
-              (colInfo.rowSpan && colInfo.rowSpan > 1)
+                (colInfo.colSpan && colInfo.colSpan > 1) ||
+                (colInfo.rowSpan && colInfo.rowSpan > 1)
             ) {
               for (let row = i; row < i + (colInfo.rowSpan || 1); row++) {
                 // col = (row === i ? j + 1 : j) 是为了避开自己
@@ -328,21 +327,21 @@ export default {
     },
     getItColSpan(row, col) {
       return (
-        this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1] &&
-        this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1]['colSpan']
+          this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1] &&
+          this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1]['colSpan']
       )
     },
     getItRowSpan(row, col) {
       return (
-        this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1] &&
-        this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1]['rowSpan']
+          this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1] &&
+          this.tableConfig.layoutDetail[(row - 1) * this.tableConfig.cols + col - 1]['rowSpan']
       )
     },
     handleCellMousedown(e, x, y) {
       this.$refs['simple-table-contextmenu'].hide()
-      this.$store.commit('printTemplateModule/setInEditorStatus', true)
-      this.$store.commit('printTemplateModule/setClickComponentStatus', true)
-      this.$store.commit('printTemplateModule/setCurTableCell', {
+      globalStore().setInEditorStatus(true)
+      globalStore().setClickComponentStatus(true)
+      globalStore().setCurTableCell({
         component: this.tableData[`${x}-${y}`]
       })
       // e.witch = 1 是鼠标左键
@@ -449,11 +448,11 @@ export default {
       const startIndex = (startX - 1) * tableConfig.cols + startY - 1
       const groupId = this.getUuid()
       if (
-        startX === -1 ||
-        startY === -1 ||
-        endX === -1 ||
-        endY === -1 ||
-        (startX === endX && startY === endY)
+          startX === -1 ||
+          startY === -1 ||
+          endX === -1 ||
+          endY === -1 ||
+          (startX === endX && startY === endY)
       ) {
         toast('请选中要合并的单元格')
         return
@@ -467,13 +466,13 @@ export default {
             let startCellData = this.tableData[`${startX}-${startY}`]
             let endCellData = this.tableData[`${endX}-${endY}`]
             let startComponent = document
-              .getElementById(`roy-component-${startCellData.id}`)
-              .getBoundingClientRect()
+                .getElementById(`yvan-component-${startCellData.id}`)
+                .getBoundingClientRect()
             let endComponent = document
-              .getElementById(`roy-component-${endCellData.id}`)
-              .getBoundingClientRect()
-            const { x: startAriaX, y: startAriaY } = startComponent
-            const { x: endAriaX, y: endAriaY, width: endWidth, height: endHeight } = endComponent
+                .getElementById(`yvan-component-${endCellData.id}`)
+                .getBoundingClientRect()
+            const {x: startAriaX, y: startAriaY} = startComponent
+            const {x: endAriaX, y: endAriaY, width: endWidth, height: endHeight} = endComponent
             curTableData.width = Math.abs(endAriaX - startAriaX) + endWidth
             curTableData.height = Math.abs(endAriaY - startAriaY) + endHeight
             this.tableConfig.layoutDetail[curIndex].rowSpan = endX - startX + 1
@@ -494,7 +493,7 @@ export default {
         return
       }
       let startIndex = (startX - 1) * tableConfig.cols + startY - 1
-      const { groupId } = this.tableConfig.layoutDetail[startIndex]
+      const {groupId} = this.tableConfig.layoutDetail[startIndex]
       if (!groupId) {
         return
       }
@@ -532,7 +531,7 @@ export default {
       })
       this.reRenderTableLayout()
     },
-    onCellActive({ id }) {
+    onCellActive({id}) {
       this.curClickedId = id
     },
     handleMouseDownOnResize(row, col, e) {
@@ -544,12 +543,12 @@ export default {
       if (!element) {
         return
       }
-      const comEle = document.getElementById(`roy-component-${element.id}`)
+      const comEle = document.getElementById(`yvan-component-${element.id}`)
       if (!comEle) {
         return
       }
       const move = (moveEvent) => {
-        const { width, height } = comEle.getBoundingClientRect()
+        const {width, height} = comEle.getBoundingClientRect()
         const deltaX = moveEvent.movementX
         const deltaY = moveEvent.movementY
 
@@ -580,12 +579,11 @@ export default {
         tableData: this.deepCopy(this.tableData),
         tableConfig: this.deepCopy(this.tableConfig)
       }
-      this.$store.commit('printTemplateModule/setPropValue', {
+      globalStore().setPropValue({
         id: this.element.id,
         propValue
       })
-      // this.$emit('update:propValue', propValue)
-      this.$store.commit('printTemplateModule/updateDataValue', {
+      globalStore().updateDataValue({
         data: this.element,
         value: propValue,
         key: 'propValue'
@@ -618,7 +616,7 @@ export default {
 </script>
 
 <style lang="less">
-.roy-simple-table {
+.yvan-simple-table {
   user-select: none;
 }
 </style>

src/components/PageComponents/yvan-table/YvanSimpleTableProps.vue

@@ -0,0 +1,52 @@
+<template>
+  <section class="yvan-simple-table-props">
+    <el-form  ref="form" label-position="top">
+      <el-form-item label="宽度">
+        <el-input-number controls-position="right"/>
+      </el-form-item>
+      <el-form-item label="高度">
+        <el-input-number controls-position="right"/>
+      </el-form-item>
+      <el-form-item label="文本类型">
+        <el-radio-group size="small">
+          <el-radio-button label="全">
+            <component is="border-outer-outlined"/>
+          </el-radio-button>
+          <el-radio-button label="上">
+            <component is="border-top-outlined"/>
+          </el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+
+
+
+      <el-form-item label="旋转角度(°)">
+        <el-input-number controls-position="right"/>
+      </el-form-item>
+    </el-form>
+  </section>
+</template>
+
+<script lang="ts">
+
+export default {
+  name: 'YvanSimpleTableProps',
+  data(){
+    return {}
+  }
+}
+
+</script>
+
+<style lang="less">
+.yvan-simple-table-props {
+
+  .el-input-number {
+    width: 100%;
+  }
+
+  .el-select {
+    width: 100%;
+  }
+}
+</style>

src/components/PageComponents/RoyTable/RoySimpleTextInTable.vue

@@ -1,28 +1,28 @@
 <template>
   <div
-    class="RoySimpleText"
-    style="width: 100%; height: 100%"
-    @click="activeCell"
-    @contextmenu="setEdit"
-    @dblclick="setEdit"
-    @dragenter="handleDragEnter"
-    @dragleave="handleDragLeave"
-    @drop="handleDrop"
+      class="RoySimpleText"
+      style="width: 100%; height: 100%"
+      @click="activeCell"
+      @contextmenu="setEdit"
+      @dblclick="setEdit"
+      @dragenter="handleDragEnter"
+      @dragleave="handleDragLeave"
+      @drop="handleDrop"
   >
     <StyledSimpleText
-      ref="editArea"
-      :class="{
+        ref="editArea"
+        :class="{
         'can-edit': canEdit,
         'is-drag-over': dragOver
       }"
-      :contenteditable="canEdit"
-      class="edit-area"
-      tabindex="0"
-      v-bind="style"
-      @blur="handleBlur"
-      @keydown="handleKeyDown"
-      @mousedown="handleMouseDown"
-      @paste="clearStyle"
+        :contenteditable="canEdit"
+        class="edit-area"
+        tabindex="0"
+        v-bind="style"
+        @blur="handleBlur"
+        @keydown="handleKeyDown"
+        @mousedown="handleMouseDown"
+        @paste="clearStyle"
     >
       <div class="yvan-simple-text-inner" v-html="propValue"></div>
     </StyledSimpleText>
@@ -30,16 +30,17 @@
 </template>
 
 <script>
-import { StyledSimpleText } from '@/components/PageComponents/style'
-import commonMixin from '@/mixin/commonMixin'
-import { mapState } from 'vuex'
+import {mapState} from 'pinia'
+import {globalStore} from "@/store"
 import toast from '@/utils/toast'
+import commonMixin from '@/mixin/commonMixin'
+import {StyledSimpleText} from '@/components/PageComponents/style'
 
 /**
  *
  */
 export default {
-  name: 'RoySimpleTextInTable',
+  name: 'YvanSimpleTextInTable',
   mixins: [commonMixin],
   components: {
     StyledSimpleText
@@ -47,7 +48,8 @@ export default {
   props: {
     element: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     propValue: {
       type: String,
@@ -63,9 +65,9 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      curComponent: (state) => state.printTemplateModule.curComponent,
-      dataSource: (state) => state.printTemplateModule.dataSource
+    ...mapState(globalStore, {
+      curComponent: (state) => state.curComponent,
+      dataSource: (state) => state.dataSource
     }),
     style() {
       return this.element.style || {}
@@ -81,7 +83,8 @@ export default {
     }
   },
   methods: {
-    initMounted() {},
+    initMounted() {
+    },
     activeCell() {
       this.$emit('activeCell', {
         id: this.element.id
@@ -146,8 +149,8 @@ export default {
             key: 'propValue'
           })
           this.$emit(
-            'componentUpdated',
-            `<span class="yvan-binding-value">[绑定:${bindingDataSource.title}]</span>`
+              'componentUpdated',
+              `<span class="yvan-binding-value">[绑定:${bindingDataSource.title}]</span>`
           )
           this.canEdit = false
         }
@@ -162,7 +165,8 @@ export default {
       this.dragOver = false
     }
   },
-  created() {},
+  created() {
+  },
   mounted() {
     this.initMounted()
   },
@@ -174,8 +178,7 @@ export default {
     },
     canEdit(newVal) {
       if (!newVal) {
-        // this.$emit('update:propValue', this.$refs.editArea.$el.innerHTML)
-        this.$store.commit('printTemplateModule/updateDataValue', {
+        globalStore().updateDataValue({
           data: this.element,
           value: this.$refs.editArea.$el.innerHTML,
           key: 'propValue'

src/components/PageComponents/yvan-table/YvanTextInTable.vue

@@ -0,0 +1,88 @@
+<template>
+  <div style="width: 100%; height: 100%" @click="activeCell" @dblclick="onDblClick">
+    <StyledText v-bind="style">
+      <div class="yvan-text-inner" v-html="propValue"></div>
+    </StyledText>
+  </div>
+</template>
+
+<script>
+import {mapState} from 'pinia';
+import {globalStore} from "@/store";
+import commonMixin from '@/mixin/commonMixin';
+import {StyledText} from '@/components/PageComponents/style';
+import {toolBarConfig, editorConfig, mode} from '@/components/config/editorConfig';
+import YvanPrintTextEditor from "@/components/yvan-ui/YvanPrintTextEditor.vue";
+
+export default {
+  name: 'YvanTextInTable',
+  mixins: [commonMixin],
+  props: {
+    element: {
+      type: Object,
+      default: () => {
+      }
+    },
+    propValue: {
+      type: String,
+      default: ''
+    }
+  },
+  components: {
+    StyledText,
+  },
+  computed: {
+    ...mapState(globalStore, {
+      curComponent: (state) => state.curComponent
+    }),
+    style() {
+      return this.element.style || {}
+    }
+  },
+  data() {
+    return {
+      wangEditor: null,
+      showEditor: false,
+      html: this.deepCopy(this.propValue),
+      toolbarConfig: toolBarConfig,
+      editorConfig: editorConfig,
+      mode: mode
+    }
+  },
+  methods: {
+    activeCell() {
+      this.$emit('activeCell', {
+        id: this.element.id
+      })
+    },
+    onDblClick() {
+      System.showDialog(YvanPrintTextEditor, {valueHtml: this.html, width: 65}).then(res => {
+
+      }).finally(() => {
+
+      })
+    },
+    handleMouseDown(e) {
+      e.stopPropagation()
+    },
+    handleTextClosed() {
+      this.$store.commit('printTemplateModule/updateDataValue', {
+        data: this.element,
+        value: this.html,
+        key: 'propValue'
+      })
+      this.$emit('componentUpdated', this.html)
+    }
+  },
+  created() {
+  },
+  watch: {},
+  beforeDestroy() {
+    const editor = this.wangEditor
+    if (editor == null) {
+      return
+    }
+    editor.destroy() // 组件销毁时，及时销毁编辑器
+  }
+}
+</script>

src/components/PagePalette.vue

@@ -1,176 +0,0 @@
-<template>
-  <div v-if="initCompleted" class="roy-page-tools">
-    <div v-if="curActiveComponent && curActiveComponent.id">
-      <roy-divider v-if="settingFormItemConfig.length" content-position="left">
-        属性设置
-      </roy-divider>
-      <vxe-form
-        ref="setting-form"
-        :align="formGlobalConfigIn.align"
-        :data="settingFormData"
-        :items="settingFormItemConfig"
-        :loading="formGlobalConfigIn.loading"
-        :prevent-submit="formGlobalConfigIn.preventSubmit"
-        :rules="{}"
-        :size="formGlobalConfigIn.size"
-        :span="formGlobalConfigIn.span"
-        :title-align="formGlobalConfigIn.titleAlign"
-        :title-colon="formGlobalConfigIn.titleColon"
-        :title-overflow="formGlobalConfigIn.titleOverflow"
-        :title-width="formGlobalConfigIn.titleWidth"
-        :valid-config="formGlobalConfigIn.validConfig"
-        sync-resize
-      />
-      <roy-divider content-position="left">样式设置</roy-divider>
-      <vxe-form
-        ref="paletteForm"
-        :align="formGlobalConfigIn.align"
-        :data="formData"
-        :items="formItemConfig"
-        :loading="formGlobalConfigIn.loading"
-        :prevent-submit="formGlobalConfigIn.preventSubmit"
-        :rules="{}"
-        :size="formGlobalConfigIn.size"
-        :span="formGlobalConfigIn.span"
-        :title-align="formGlobalConfigIn.titleAlign"
-        :title-colon="formGlobalConfigIn.titleColon"
-        :title-overflow="formGlobalConfigIn.titleOverflow"
-        :title-width="formGlobalConfigIn.titleWidth"
-        :valid-config="formGlobalConfigIn.validConfig"
-        sync-resize
-      />
-    </div>
-    <div v-else class="roy-page-tools__empty animate__animated animate__headShake">
-      <i class="ri-door-lock-box-line animate__backInUp" style="color: var(--roy-color-warning)" />
-      <div>请先选定一个组件，再进行该组件的属性设置</div>
-    </div>
-  </div>
-</template>
-
-<script>
-import commonMixin from '@/mixin/commonMixin'
-import { paletteConfigList, settingConfigList } from '@/components/config/paletteConfig'
-
-export default {
-  name: 'PagePalette',
-  mixins: [commonMixin],
-  computed: {
-    // ...mapState({
-      curComponent: (state) => state.printTemplateModule.curComponent,
-      curTableCell: (state) => state.printTemplateModule.curTableCell,
-    // }),
-    formItemConfig() {
-      let curComponentCode = this.curActiveComponent?.component || 'no'
-      return this.formItemConfigs[curComponentCode] || []
-    },
-    settingFormItemConfig() {
-      let curComponentCode = this.curActiveComponent?.component || 'no'
-      return this.settingFormItemConfigs[curComponentCode] || []
-    },
-    curActiveComponent() {
-      return this.curTableCell || this.curComponent
-    }
-  },
-  data() {
-    return {
-      initCompleted: false,
-      formGlobalConfigIn: {
-        titleOverflow: true,
-        span: 8,
-        align: 'left',
-        size: 'medium',
-        titleAlign: 'right',
-        titleWidth: '200',
-        titleColon: false,
-        preventSubmit: false,
-        loading: false,
-        validConfig: {
-          autoPos: true
-        }
-      },
-      formData: {},
-      formItemConfigs: paletteConfigList,
-      settingFormData: {},
-      settingFormItemConfigs: settingConfigList
-    }
-  },
-  methods: {},
-  async mounted() {
-    this.$nextTick(() => {
-      this.initCompleted = true
-    })
-  },
-  watch: {
-    curActiveComponent: {
-      handler() {
-        if (this.curActiveComponent) {
-          this.formData = this.curActiveComponent.style
-          this.settingFormData = this.curActiveComponent
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.roy-page-tools {
-  overflow: auto;
-  height: calc(100% - 16px);
-  padding: 8px;
-
-  .roy-page-tools__empty {
-    font-size: 10px;
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-flow: row wrap;
-
-    i {
-      font-size: 28px;
-      width: 100%;
-      align-self: end;
-      text-align: center;
-    }
-
-    div {
-      text-align: center;
-    }
-  }
-}
-</style>
-
-<style lang="less">
-.roy-page-tools {
-  .vxe-form.size--medium .vxe-form--item-inner {
-    display: grid;
-  }
-
-  .vxe-form--item-title {
-    font-size: 10px;
-    text-align: left !important;
-    margin-bottom: 5px;
-
-    .vxe-form--item-title-label:before {
-      content: '';
-      width: 1px;
-      height: 80%;
-      margin-right: 5px;
-      border-left: var(--roy-color-primary) 3px solid;
-    }
-  }
-
-  .vxe-form--item {
-    float: inherit !important;
-  }
-
-  .vxe-input--inner {
-    border-radius: unset;
-    background: transparent;
-    color: var(--roy-text-color-primary);
-    border-color: var(--roy-border-color);
-  }
-}
-</style>

src/components/config/componentList.ts

@@ -1,253 +0,0 @@
-export const commonStyle = {
-    rotate: 0,
-    opacity: 1
-}
-
-export const commonAttr = {
-    // 当一个组件成为 Group 的子组件时使用
-    groupStyle: {},
-    // 是否锁定组件
-    isLock: false
-}
-
-/**
- * 布局组件:
- */
-export const layoutComponentList = [
-    {name: "标题", code: "title"},
-    {name: "页头", code: "page_header"},
-    {name: "列头", code: "column_header"},
-    {name: "详细", code: "detail"},
-    {name: "列脚", code: "column_footer"},
-    {name: "页脚", code: "page_footer"},
-    {name: "最后一页页脚", code: "last_page_footer"},
-    {name: "统计", code: "summary"},
-]
-
-/**
- * 基础组件
- */
-export const basicComponentList = [
-    {
-        icon: 'fa fa-file-text-o',
-        code: 'text',
-        name: '文本',
-        component: 'YvanSimpleText',
-        propValue: '单击编辑文本',
-        style: {
-            color: '#000000',
-            borderRadius: 'inherit',
-            padding: '0',
-            margin: '0',
-            fontFamily: 'default',
-            lineHeight: '1',
-            letterSpacing: '0',
-            borderWidth: 0,
-            borderColor: '#212121',
-            borderType: 'none',
-            width: 200,
-            height: 50,
-            fontSize: 10,
-            background: null,
-            rotate: 0,
-            justifyContent: 'flex-start',
-            alignItems: 'flex-start',
-            fontWeight: 'normal',
-            fontStyle: 'normal',
-            isUnderLine: false,
-            isDelLine: false
-        },
-        groupStyle: {}
-    },
-    {
-        icon: 'fa fa-text-height',
-        code: 'long-text',
-        name: '长文本',
-        component: 'YvanRichText',
-        propValue:
-            '<p><span style="font-size: 16pt;">双击</span><span style="color: rgb(255, 255, 255); background-color: #009688; font-size: 16pt; font-family: 仿宋;">编辑</span><span style="font-size: 16pt;">文本</span></p>',
-        style: {
-            width: 500,
-            height: 200,
-            fontSize: 12,
-            background: null,
-            rotate: 0,
-            padding: '0'
-        },
-        groupStyle: {}
-    },
-    {
-        icon: 'ri-table-2',
-        code: 'table',
-        name: '单元格',
-        component: 'YvanSimpleTable',
-        propValue: {},
-        style: {
-            width: 'auto',
-            height: 'auto',
-            fontSize: 12,
-            background: '#FFFFFF',
-            borderWidth: 2,
-            borderColor: '#212121',
-            rotate: 0
-        },
-        groupStyle: {}
-    },
-    {
-        icon: 'fa fa-table',
-        code: 'complex-table',
-        name: '复杂表格',
-        component: 'YvanComplexTable',
-        propValue: {},
-        showPrefix: true,
-        showHead: true,
-        showFoot: true,
-        showSuffix: true,
-        style: {
-            width: 'auto',
-            height: 'auto',
-            fontSize: 12,
-            fontFamily: 'default',
-            color: '#000000',
-            background: '#FFFFFF',
-            borderWidth: 2,
-            borderColor: '#212121',
-            rotate: 0
-        },
-        groupStyle: {}
-    },
-    {
-        icon: 'fa fa-minus',
-        code: 'line',
-        name: '直线',
-        component: 'YvanLine',
-        propValue: '',
-        style: {
-            width: 200,
-            height: 1,
-            background: '#000',
-            rotate: 0
-        },
-        groupStyle: {}
-    },
-    {
-        icon: 'fa fa-square-o',
-        code: 'rectangle',
-        name: '矩形',
-        component: 'YvanRect',
-        propValue: '',
-        style: {
-            borderRadius: 'inherit',
-            borderWidth: 1,
-            borderColor: '#212121',
-            borderType: 'solid',
-            width: 200,
-            height: 200,
-            background: null,
-            rotate: 0
-        },
-        groupStyle: {}
-    },
-    {
-        icon: 'fa fa-circle-thin',
-        code: 'circle',
-        name: '圆形',
-        component: 'YvanCircle',
-        propValue: '',
-        style: {
-            borderWidth: 1,
-            borderColor: '#212121',
-            borderType: 'solid',
-            width: 200,
-            height: 200,
-            background: '#ffffff',
-            rotate: 0
-        },
-        groupStyle: {}
-    },
-    {
-        icon: 'fa fa-image',
-        code: 'image',
-        name: '图片',
-        component: 'YvanImage',
-        src: '',
-        title: '默认图片',
-        style: {
-            borderRadius: 'inherit',
-            borderWidth: 0,
-            borderColor: '#212121',
-            borderType: 'none',
-            width: 200,
-            height: 200,
-            background: null,
-            rotate: 0
-        },
-        groupStyle: {}
-    },
-    {
-        icon: 'fa fa-barcode',
-        code: 'barcode',
-        name: '条码',
-        component: 'YvanBarcode',
-        src: '',
-        title: '默认图片',
-        style: {
-            borderRadius: 'inherit',
-            borderWidth: 0,
-            borderColor: '#212121',
-            borderType: 'none',
-            width: 200,
-            height: 200,
-            background: null,
-            rotate: 0
-        },
-        groupStyle: {}
-    }
-]
-
-/**
- * 复合组件
- */
-export const compositeComponentList = []
-
-/**
- * 其他组件
- */
-export const otherComponentList = []
-
-/**
- * 组件类型: 布局组件/基础组件/复合组件/其他组件
- */
-export const componentTypeList = [
-    {
-        name: "layout_component",
-        title: "布局组件",
-        componentList: layoutComponentList
-    },
-    {
-        name: "basic_component",
-        title: "基础组件",
-        componentList: basicComponentList
-    },
-    // {
-    //     name: "composite_component",
-    //     title: "复合组件",
-    //     componentList: compositeComponentList
-    // },
-    // {
-    //     name: "other_component",
-    //     title: "其他组件",
-    //     componentList: otherComponentList
-    // }
-]
-
-
-export const getComponentMap = function () {
-    const componentMap = new Map()
-    for (const componentType of componentTypeList){
-        for (const component of componentType.componentList){
-            componentMap.set(component.code, component)
-        }
-    }
-    return componentMap
-}

src/components/config/editorConfig.js

@@ -80,7 +80,7 @@ export const toolBarConfig = {
     'enter',
     'bulletedList',
     'numberedList',
-    'royDataSource'
+    // 'yvanDataSource'
   ]
 }
 
@@ -112,10 +112,10 @@ export const editorConfig = {
   }
 }
 
-export const mode = 'default' // or 'default'
+export const mode = 'default'
 
 export const menuConfig = {
-  key: 'royDataSource', // 定义 menu key ：要保证唯一、不重复（重要）
+  key: 'yvanDataSource', // 定义 menu key ：要保证唯一、不重复（重要）
   factory() {
     return new DataSourceMenu()
   }

src/components/config/globalConfig.ts

@@ -13,3 +13,291 @@ export const borderStyleList = [
     {code: 'double', name: '双线', label: '双线'},
 ]
 
+export const commonStyle = {
+    rotate: 0,
+    opacity: 1
+}
+
+export const commonAttr = {
+    groupStyle: {}, // 当一个组件成为 Group 的子组件时使用
+    isLock: false // 是否锁定组件
+}
+
+// 元素组件
+export const elementList = [
+    {
+        icon: 'fa fa-file-text-o',
+        code: 'text',
+        name: '文本',
+        component: 'YvanSimpleText',
+        propValue: '单击编辑文本',
+        style: {
+            color: '#000000',
+            borderRadius: 'inherit',
+            padding: '0',
+            margin: '0',
+            fontFamily: 'default',
+            lineHeight: '1',
+            letterSpacing: '0',
+            borderWidth: 0,
+            borderColor: '#212121',
+            borderType: 'none',
+            width: 200,
+            height: 50,
+            fontSize: 10,
+            background: null,
+            rotate: 0,
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            fontWeight: 'normal',
+            fontStyle: 'normal',
+            isUnderLine: false,
+            isDelLine: false
+        },
+        groupStyle: {}
+    },
+    {
+        icon: 'fa fa-text-height',
+        code: 'long-text',
+        name: '长文本',
+        component: 'YvanRichText',
+        propValue:
+            '<p><span style="font-size: 16pt;">双击</span><span style="color: rgb(255, 255, 255); background-color: #009688; font-size: 16pt; font-family: 仿宋;">编辑</span><span style="font-size: 16pt;">文本</span></p>',
+        style: {
+            width: 500,
+            height: 200,
+            fontSize: 12,
+            background: null,
+            rotate: 0,
+            padding: '0'
+        },
+        groupStyle: {}
+    },
+    {
+        icon: 'fa fa-th',
+        code: 'table',
+        name: '单元格',
+        component: 'YvanSimpleTable',
+        propValue: {},
+        style: {
+            width: 'auto',
+            height: 'auto',
+            fontSize: 12,
+            background: '#FFFFFF',
+            borderWidth: 2,
+            borderColor: '#212121',
+            rotate: 0
+        },
+        groupStyle: {}
+    },
+    {
+        icon: 'fa fa-table',
+        code: 'complex-table',
+        name: '复杂表格',
+        component: 'YvanComplexTable',
+        propValue: {},
+        showPrefix: true,
+        showHead: true,
+        showFoot: true,
+        showSuffix: true,
+        style: {
+            width: 'auto',
+            height: 'auto',
+            fontSize: 12,
+            fontFamily: 'default',
+            color: '#000000',
+            background: '#FFFFFF',
+            borderWidth: 2,
+            borderColor: '#212121',
+            rotate: 0
+        },
+        groupStyle: {}
+    },
+    {
+        icon: 'fa fa-minus',
+        code: 'line',
+        name: '直线',
+        component: 'YvanLine',
+        propValue: '',
+        style: {
+            width: 200,
+            height: 1,
+            background: '#000',
+            rotate: 0
+        },
+        groupStyle: {}
+    },
+    {
+        icon: 'fa fa-square-o',
+        code: 'rectangle',
+        name: '矩形',
+        component: 'YvanRect',
+        propValue: '',
+        style: {
+            borderRadius: 'inherit',
+            borderWidth: 1,
+            borderColor: '#212121',
+            borderType: 'solid',
+            width: 200,
+            height: 200,
+            background: null,
+            rotate: 0
+        },
+        groupStyle: {}
+    },
+    {
+        icon: 'fa fa-circle-thin',
+        code: 'circle',
+        name: '圆形',
+        component: 'YvanCircle',
+        propValue: '',
+        style: {
+            borderWidth: 1,
+            borderColor: '#212121',
+            borderType: 'solid',
+            width: 200,
+            height: 200,
+            background: '#ffffff',
+            rotate: 0
+        },
+        groupStyle: {}
+    },
+    {
+        icon: 'fa fa-image',
+        code: 'image',
+        name: '图片',
+        component: 'YvanImage',
+        src: '',
+        title: '默认图片',
+        style: {
+            borderRadius: 'inherit',
+            borderWidth: 0,
+            borderColor: '#212121',
+            borderType: 'none',
+            width: 200,
+            height: 200,
+            background: null,
+            rotate: 0
+        },
+        groupStyle: {}
+    },
+    {
+        icon: 'fa fa-barcode',
+        code: 'barcode',
+        name: '条码',
+        component: 'YvanBarcode',
+        src: '',
+        title: '默认图片',
+        style: {
+            borderRadius: 'inherit',
+            borderWidth: 0,
+            borderColor: '#212121',
+            borderType: 'none',
+            width: 200,
+            height: 200,
+            background: null,
+            rotate: 0
+        },
+        groupStyle: {}
+    }
+]
+
+// 函数组件
+export const functionList = [
+    {
+        icon: 'fa fa-hashtag',
+        code: 'pageNumber',
+        name: '当前页数',
+        component: 'YvanRichText',
+        propValue: '',
+        style: {
+            width: 500,
+            height: 200,
+            fontSize: 12,
+            background: null,
+            rotate: 0,
+            padding: '0'
+        }
+    },
+    {
+        icon: 'fa fa-quora',
+        code: 'totalPages',
+        name: '总页数',
+        component: 'YvanRichText',
+        propValue: '',
+        style: {
+            width: 500,
+            height: 200,
+            fontSize: 12,
+            background: null,
+            rotate: 0,
+            padding: '0'
+        }
+    },
+    {
+        icon: 'fa fa-calendar',
+        code: 'currentDate',
+        name: '当前日期',
+        component: 'YvanRichText',
+        propValue: '',
+        style: {
+            width: 500,
+            height: 200,
+            fontSize: 12,
+            background: null,
+            rotate: 0,
+            padding: '0'
+        }
+    },
+    {
+        icon: 'fa fa-calendar-check-o',
+        code: 'time',
+        name: '当前时间',
+        component: 'YvanRichText',
+        propValue: '',
+        style: {
+            width: 500,
+            height: 200,
+            fontSize: 12,
+            background: null,
+            rotate: 0,
+            padding: '0'
+        }
+    },
+    {
+        icon: 'fa fa-percent',
+        code: 'percentage',
+        name: '百分比',
+        component: 'YvanRichText',
+        propValue: '',
+        style: {
+            width: 500,
+            height: 200,
+            fontSize: 12,
+            background: null,
+            rotate: 0,
+            padding: '0'
+        }
+    },
+    {
+        icon: 'fa fa-hashtag',
+        code: 'pageXOfY',
+        name: '当前X页,共Y页',
+        component: 'YvanRichText',
+        propValue: '',
+        style: {
+            width: 500,
+            height: 200,
+            fontSize: 12,
+            background: null,
+            rotate: 0,
+            padding: '0'
+        }
+    },
+]
+
+
+export const componentList = [
+    {code: 'element', title: '元素组件', type: 'element', elementList: elementList},
+    {code: 'function', title: '函数组件', type: 'function', elementList: functionList},
+]

src/components/yvan-editor/Editor.vue

@@ -96,7 +96,7 @@ import Big from 'big.js'
 // import RoyGroup from '@/components/PageComponents/RoyGroup'
 import Area from '@/components/yvan-editor/Area.vue'
 import commonMixin from '@/mixin/commonMixin'
-import {$, isPreventDrop} from '@/utils/html-util.js'
+import {isPreventDrop} from '@/utils/html-util.js'
 import EditorLine from '@/components/yvan-editor/EditorLine.vue'
 import EditorCoordinate from '@/components/yvan-editor/EditorCoordinate.vue'
 import eventBus from "@/utils/eventBus.js";

src/components/yvan-print-designer-left-element.vue

@@ -7,17 +7,34 @@
     <div class="yvan-print-designer-left-element__content">
       <el-collapse v-model="collapseOptions.activeName">
         <el-collapse-item
-            v-for="componentType in componentTypeList"
-            :title="componentType.title"
-            :name="componentType.name">
+            v-model="collapseOptions.activeName"
+            v-for="component in componentList"
+            :title="component.title"
+            :name="component.code">
           <div class="yvan-print-designer-left-element__collapse_item">
-            <el-space wrap @dragstart="handleDragStart">
+            <el-space wrap @dragstart="handleDragStartForElement" v-if="component.type === 'element'">
               <div
-                  v-for="component in componentType.componentList"
-                  :key="component.code"
-                  :data-code="component.code"
+                  v-for="element in component.elementList"
+                  :key="element.code"
+                  :data-code="element.code"
                   draggable="true">
-                <el-button> {{ component.name }}</el-button>
+                <div class="yvan-print-designer-left-element__button">
+                  <i :class="element.icon" v-if="element?.icon"/>
+                  <span> {{ element.name }}</span>
+                </div>
+              </div>
+            </el-space>
+
+            <el-space wrap @dragstart="handleDragStartForFunction" v-if="component.type === 'function'">
+              <div
+                  v-for="element in component.elementList"
+                  :key="element.code"
+                  :data-code="element.code"
+                  draggable="true">
+                <div class="yvan-print-designer-left-element__button">
+                  <i :class="element.icon" v-if="element?.icon"/>
+                  <span> {{ element.name }}</span>
+                </div>
               </div>
             </el-space>
           </div>
@@ -31,16 +48,17 @@
 import {mapState} from "pinia";
 import {globalStore} from "@/store";
 import commonMixin from '@/mixin/commonMixin'
-import {componentTypeList} from "@/components/config/componentList";
+import {componentList, elementList} from "@/components/config/globalConfig";
 
 export default {
   name: 'yvan-print-designer-left-element',
   mixins: [commonMixin],
   data() {
     return {
-      componentTypeList,
+      elementList,
+      componentList,
       collapseOptions: {
-        activeName: componentTypeList.map(componentType => componentType.name)
+        activeName: componentList.map(component => component.code)
       }
     }
   },
@@ -59,14 +77,13 @@ export default {
     }
   },
   methods: {
-    renderIcon(iconName){
-      console.log('iconName >>> ', iconName)
-      return System.renderIcon(iconName)
-    },
-    handleDragStart(e) {
-      console.log(' >>>> ', e, e.target.dataset.code)
+    handleDragStartForElement(e) {
       e.dataTransfer.setData('componentCode', e.target.dataset.code)
     },
+    handleDragStartForFunction(e) {
+      // e.dataTransfer.setData('componentCode', e.target.dataset.code)
+      e.dataTransfer.setData('datasource-index', e.target.dataset.index)
+    },
   },
   mounted() {
 
@@ -95,12 +112,30 @@ export default {
 
   .yvan-print-designer-left-element__content {
     padding: 0 5px;
+    //margin-bottom: 10px;
     height: calc(100% - 50px);
     overflow-y: auto;
     background: var(--yvan-bg-color-overlay);
 
     .yvan-print-designer-left-element__collapse_item {
       margin: 0 10px;
+
+      .yvan-print-designer-left-element__button {
+        width: 105px;
+        border: 1px solid;
+        padding: 5px 10px;
+        border-radius: 5px;
+        cursor: pointer;
+
+        i {
+          margin-right: 5px;
+        }
+      }
+
+      .yvan-print-designer-left-element__button:hover {
+        border-color: var(--yvan-menu-bar-background);
+        background-color: var(--yvan-color-primary-light-9);
+      }
     }
   }
 }

src/components/yvan-print-designer-main.vue

@@ -22,7 +22,7 @@ import {globalStore} from "@/store";
 import commonMixin from '@/mixin/commonMixin'
 import YvanPrintToolbar from "@/components/yvan-ui/yvan-print-toolbar.vue";
 import YvanPrintDesignerEditor from "@/components/yvan-editor/Editor.vue";
-import { getComponentMap } from '@/components/config/componentList';
+import ElementUtils from "@/utils/elementUtils";
 
 export default {
   name: 'yvan-print-designer-main',
@@ -54,7 +54,7 @@ export default {
       const componentCode = e.dataTransfer.getData('componentCode')
       const rectInfo = document.querySelector('#designer-page').getBoundingClientRect()
       if (componentCode) {
-        const component = this.deepCopy(getComponentMap()?.get(componentCode))
+        const component = this.deepCopy(ElementUtils.getElementByCode(componentCode))
         component.style = component.style ?? {}
         component.style.top = e.clientY - rectInfo.y
         component.style.left = e.clientX - rectInfo.x

src/components/yvan-ui/YvanPrintTextEditor.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="yvan-print-text-editor">
+    <WangToolbar
+        :editor="editorRef"
+        :defaultConfig="toolbarConfig"
+        :mode="mode"
+        style="border-bottom: 1px solid #ccc"
+    />
+    <WangEditor
+        :defaultConfig="editorConfig"
+        :mode="modeRef"
+        v-model="valueHtmlRef"
+        style="height: 400px; overflow-y: hidden"
+        @onCreated="handleCreated"
+    />
+  </div>
+</template>
+
+<script setup>
+import '@wangeditor/editor/dist/css/style.css';
+import {onBeforeUnmount, ref, shallowRef} from 'vue';
+import {Editor as WangEditor, Toolbar as WangToolbar} from '@wangeditor/editor-for-vue';
+
+const props = defineProps({
+  valueHtml: {
+    type: String,
+    default: ''
+  },
+  mode: {
+    type: String,
+    default: "simple"
+  }
+})
+
+// 编辑器实例，必须用 shallowRef
+const editorRef = shallowRef()
+// mode: simple or default
+const modeRef = ref(props.mode)
+// 内容 HTML
+const valueHtmlRef = ref(props.valueHtml)
+
+const toolbarConfig = {}
+const editorConfig = {placeholder: '请输入内容...'}
+
+// 组件销毁时，也及时销毁编辑器
+onBeforeUnmount(() => {
+  const editor = editorRef.value
+  if (editor == null) return
+  editor.destroy()
+})
+
+const handleCreated = (editor) => {
+  // 记录 editor 实例，重要！
+  editorRef.value = editor
+}
+</script>
+
+<style lang="less" scoped>
+.yvan-print-text-editor {
+  border: 1px solid #ccc;
+}
+</style>

src/components/yvan-ui/yvan-model/RoyModal.vue

@@ -1,26 +1,34 @@
 <template>
-  <vxe-modal
-    v-model="visibleIn"
-    :height="height"
-    :show-footer="showFooter"
-    :title="title"
-    :transfer="appendToBody"
-    :width="width"
-    remember
-    resize
-    show-zoom
-    @close="close"
-  >
+  <el-dialog v-model="visibleIn" :width="width" :title="title" @close="handleClose">
     <slot></slot>
     <template v-slot:footer>
       <slot name="footer"></slot>
     </template>
-  </vxe-modal>
+  </el-dialog>
+
+
+<!--  <vxe-modal-->
+<!--      v-model="visibleIn"-->
+<!--      :height="height"-->
+<!--      :show-footer="showFooter"-->
+<!--      :title="title"-->
+<!--      :transfer="appendToBody"-->
+<!--      :width="width"-->
+<!--      remember-->
+<!--      resize-->
+<!--      show-zoom-->
+<!--      @close="close"-->
+<!--  >-->
+<!--    <slot></slot>-->
+<!--    <template v-slot:footer>-->
+<!--      <slot name="footer"></slot>-->
+<!--    </template>-->
+<!--  </vxe-modal>-->
 </template>
 
 <script>
 export default {
-  name: 'RoyModal',
+  name: 'YvanModal',
   components: {},
   props: {
     appendToBody: {
@@ -54,17 +62,20 @@ export default {
     }
   },
   methods: {
-    initMounted() {},
-    close() {
+    initMounted() {
+    },
+    handleClose() {
       this.$emit('close')
       this.$emit('update:show', false)
     }
   },
-  created() {},
+  created() {
+  },
   mounted() {
     this.initMounted()
   },
-  destroyed() {},
+  destroyed() {
+  },
   watch: {
     show() {
       this.visibleIn = this.show

src/components/yvan-ui/yvan-print-dialog/index.ts

@@ -5,6 +5,7 @@ export default (options) => {
     return new Promise((resolve, reject) => {
         // 创建一个空的div
         const mountNode = document.createElement("div");
+        mountNode.className = 'yvan-print-dialog'
         const handleConfirm = (res: any) => {
             // 调用完毕后应该清空节点
             render(null, mountNode)

src/components/yvan-ui/yvan-sidebar-menu/SidebarMenu.vue

@@ -1,246 +0,0 @@
-<template>
-  <div
-    :class="sidebarClass"
-    :style="[{ 'max-width': sidebarWidth }]"
-    class="v-sidebar-menu"
-  >
-    <div
-      :style="isCollapsed && [rtl ? { 'margin-left': '-17px' } : { 'margin-right': '-17px' }]"
-      class="vsm--scroll-wrapper"
-    >
-      <div class="vsm--list">
-        <sidebar-menu-item
-            v-for="(item, index) in menu"
-            ref="menuItems"
-            :key="index"
-            :active-show="activeShow"
-            :disable-hover="disableHover"
-            :item="item"
-            :mobile-item="mobileItem"
-            :rtl="rtl"
-            :show-child="showChild"
-            :show-one-child="showOneChild"
-            @set-mobile-item="setMobileItem"
-            @unset-mobile-item="unsetMobileItem"
-        >
-          <slot slot="dropdown-icon" name="dropdown-icon" />
-        </sidebar-menu-item>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import SidebarMenuItem from './SidebarMenuItem.vue'
-
-export default {
-  name: 'yvan-print-sidebar-menu',
-  components: {
-    SidebarMenuItem
-  },
-  props: {
-    menu: {
-      type: Array,
-      required: true
-    },
-    collapsed: {
-      type: Boolean,
-      default: false
-    },
-    width: {
-      type: String,
-      default: '350px'
-    },
-    widthCollapsed: {
-      type: String,
-      default: '50px'
-    },
-    showChild: {
-      type: Boolean,
-      default: false
-    },
-    theme: {
-      type: String,
-      default: ''
-    },
-    showOneChild: {
-      type: Boolean,
-      default: false
-    },
-    rtl: {
-      type: Boolean,
-      default: false
-    },
-    relative: {
-      type: Boolean,
-      default: false
-    },
-    hideToggle: {
-      type: Boolean,
-      default: false
-    },
-    disableHover: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      isCollapsed: this.collapsed,
-      mobileItem: null,
-      mobileItemPos: 0,
-      mobileItemHeight: 0,
-      mobileItemTimeout: null,
-      activeShow: null,
-      parentHeight: 0,
-      parentWidth: 0,
-      parentOffsetTop: 0,
-      parentOffsetLeft: 0
-    }
-  },
-  computed: {
-    sidebarWidth() {
-      return this.isCollapsed ? this.widthCollapsed : this.width
-    },
-    sidebarClass() {
-      return [
-        !this.isCollapsed ? 'vsm_expanded' : 'vsm_collapsed',
-        this.theme ? `vsm_${this.theme}` : '',
-        this.rtl ? 'vsm_rtl' : '',
-        this.relative ? 'vsm_relative' : ''
-      ]
-    },
-    mobileItemStyle() {
-      return {
-        item: [
-          { position: 'absolute' },
-          { top: `${this.mobileItemPos}px` },
-          this.rtl ? { right: '0px' } : { left: '0px' },
-          this.rtl ? { 'padding-right': this.sidebarWidth } : { 'padding-left': this.sidebarWidth },
-          this.rtl && { direction: 'rtl' },
-          { 'z-index': 0 },
-          { width: `${this.parentWidth - this.parentOffsetLeft}px` },
-          { 'max-width': this.width }
-        ],
-        dropdown: [
-          { position: 'absolute' },
-          { top: `${this.mobileItemHeight}px` },
-          { width: '100%' },
-          {
-            'max-height': `${
-              this.parentHeight -
-              (this.mobileItemPos + this.mobileItemHeight) -
-              this.parentOffsetTop
-            }px`
-          },
-          { 'overflow-y': 'auto' }
-        ],
-        background: [
-          { position: 'absolute' },
-          { top: '0px' },
-          { left: '0px' },
-          { right: '0px' },
-          { width: '100%' },
-          { height: `${this.mobileItemHeight}px` },
-          { 'z-index': -1 }
-        ]
-      }
-    }
-  },
-  watch: {
-    collapsed(val) {
-      if (this.isCollapsed === this.collapsed) {
-        return
-      }
-      this.isCollapsed = val
-      this.mobileItem = null
-    }
-  },
-  methods: {
-    onMouseLeave() {
-      this.unsetMobileItem(false, 300)
-    },
-    onMouseEnter() {
-      if (this.isCollapsed) {
-        if (this.mobileItemTimeout) {
-          clearTimeout(this.mobileItemTimeout)
-        }
-      }
-    },
-    onActiveShow(item) {
-      this.activeShow = item
-    },
-    onItemClick(event, item, node) {
-      this.$emit('item-click', event, item, node)
-    },
-    setMobileItem({ item, itemEl }) {
-      if (this.mobileItem === item) {
-        return
-      }
-      const sidebarTop = this.$el.getBoundingClientRect().top
-      const itemLinkEl = itemEl.children[0]
-      const { top, height } = itemLinkEl.getBoundingClientRect()
-
-      let positionTop = top - sidebarTop
-      this.initParentOffsets()
-      this.mobileItem = item
-      this.mobileItemPos = positionTop
-      this.mobileItemHeight = height
-    },
-    unsetMobileItem(immediate, delay = 800) {
-      if (!this.mobileItem) {
-        return
-      }
-      if (this.mobileItemTimeout) {
-        clearTimeout(this.mobileItemTimeout)
-      }
-      if (immediate) {
-        this.mobileItem = null
-        return
-      }
-      this.mobileItemTimeout = setTimeout(() => {
-        this.mobileItem = null
-      }, delay)
-    },
-    initParentOffsets() {
-      let {
-        top: sidebarTop,
-        left: sidebarLeft,
-        right: sidebarRight
-      } = this.$el.getBoundingClientRect()
-      let parent = this.relative ? this.$el.parentElement : document.documentElement
-      this.parentHeight = parent.clientHeight
-      this.parentWidth = parent.clientWidth
-      if (this.relative) {
-        let { top: parentTop, left: parentLeft } = parent.getBoundingClientRect()
-        this.parentOffsetTop = sidebarTop - (parentTop + parent.clientTop)
-        this.parentOffsetLeft = this.rtl
-          ? this.parentWidth - sidebarRight + (parentLeft + parent.clientLeft)
-          : sidebarLeft - (parentLeft + parent.clientLeft)
-      } else {
-        this.parentOffsetTop = sidebarTop
-        this.parentOffsetLeft = this.rtl ? this.parentWidth - sidebarRight : sidebarLeft
-      }
-    },
-    onItemUpdate(newItem, item) {
-      if (item === this.mobileItem) {
-        this.mobileItem = newItem
-      }
-      if (item === this.activeShow) {
-        this.activeShow = newItem
-      }
-    }
-  },
-  provide() {
-    return {
-      emitActiveShow: this.onActiveShow,
-      emitItemClick: this.onItemClick,
-      emitItemUpdate: this.onItemUpdate
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@import './style/vue-sidebar-menu';
-</style>

src/components/yvan-ui/yvan-sidebar-menu/SidebarMenuBadge.vue

@@ -1,22 +0,0 @@
-<template>
-  <component
-    :is="badge.element ? badge.element : 'span'"
-    :class="badge.class"
-    class="vsm--badge"
-    v-bind="badge.attributes"
-  >
-    {{ badge.text }}
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'SidebarMenuBadge',
-  props: {
-    badge: {
-      type: Object,
-      default: () => {}
-    }
-  }
-}
-</script>

src/components/yvan-ui/yvan-sidebar-menu/SidebarMenuIcon.vue

@@ -1,22 +0,0 @@
-<template>
-  <component
-    :is="icon.element ? icon.element : 'i'"
-    :class="typeof icon === 'string' || icon instanceof String ? icon : icon.class"
-    class="vsm--icon"
-    v-bind="icon.attributes"
-  >
-    {{ icon.text }}
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'SidebarMenuIcon',
-  props: {
-    icon: {
-      type: [String, Object],
-      default: ''
-    }
-  }
-}
-</script>

src/components/yvan-ui/yvan-sidebar-menu/SidebarMenuItem.vue

@@ -1,340 +0,0 @@
-<template>
-  <component :is="item.component" v-if="item.component && !isItemHidden" v-bind="item.props" />
-  <div
-    v-else-if="!isItemHidden"
-    :class="[{ 'vsm--item_open': show }]"
-    class="vsm--item"
-  >
-    <sidebar-menu-link
-      :class="itemLinkClass"
-      :item="item"
-      v-bind="itemLinkAttributes"
-      @click.native="clickEvent"
-    >
-      <sidebar-menu-icon
-        v-if="item.icon && !isMobileItem"
-        :icon="active ? item.activeIcon || item.icon : item.icon"
-      />
-      <span class="vsm--title">{{ item.title }}</span>
-    </sidebar-menu-link>
-  </div>
-</template>
-
-<script>
-// import pathToRegexp from 'path-to-regexp'
-import SidebarMenuLink from './SidebarMenuLink.vue'
-import SidebarMenuIcon from './SidebarMenuIcon.vue'
-import SidebarMenuBadge from './SidebarMenuBadge.vue'
-
-export default {
-  name: 'SidebarMenuItem',
-  components: {
-    SidebarMenuLink,
-    SidebarMenuIcon,
-    SidebarMenuBadge
-  },
-  props: {
-    item: {
-      type: Object,
-      required: true
-    },
-    level: {
-      type: Number,
-      default: 1
-    },
-    isCollapsed: {
-      type: Boolean,
-      default: true
-    },
-    isMobileItem: {
-      type: Boolean,
-      default: false
-    },
-    mobileItem: {
-      type: Object,
-      default: null
-    },
-    activeShow: {
-      type: Object,
-      default: null
-    },
-    showChild: {
-      type: Boolean,
-      default: false
-    },
-    showOneChild: {
-      type: Boolean,
-      default: false
-    },
-    rtl: {
-      type: Boolean,
-      default: false
-    },
-    disableHover: {
-      type: Boolean,
-      default: false
-    },
-    mobileItemStyle: {
-      type: Object,
-      default: null
-    }
-  },
-  data() {
-    return {
-      active: false,
-      exactActive: false,
-      itemShow: false,
-      itemHover: false
-    }
-  },
-  computed: {
-    isFirstLevel() {
-      return this.level === 1
-    },
-    show: {
-      get() {
-        if (!this.itemHasChild) {
-          return false
-        }
-        if (this.showChild || this.isMobileItem) {
-          return true
-        }
-        return this.itemShow
-      },
-      set(show) {
-        if (this.showOneChild) {
-          show ? this.emitActiveShow(this.item) : this.emitActiveShow(null)
-        }
-        this.itemShow = show
-      }
-    },
-    itemLinkClass() {
-      return [
-        'vsm--link',
-        !this.isMobileItem ? `vsm--link_level-${this.level}` : '',
-        { 'vsm--link_mobile-item': this.isMobileItem },
-        { 'vsm--link_hover': this.hover },
-        { 'vsm--link_active': this.active },
-        { 'vsm--link_exact-active': this.exactActive },
-        { 'vsm--link_disabled': this.item.disabled },
-        this.item.class
-      ]
-    },
-    itemLinkAttributes() {
-      const target = this.item.external ? '_blank' : '_self'
-      const tabindex = this.item.disabled ? -1 : null
-
-      return {
-        target,
-        tabindex,
-        ...this.item.attributes
-      }
-    },
-    isItemHidden() {
-      if (this.isCollapsed) {
-        if (this.item.hidden && this.item.hiddenOnCollapse === undefined) {
-          return true
-        } else {
-          return this.item.hiddenOnCollapse === true
-        }
-      } else {
-        return this.item.hidden === true
-      }
-    },
-    hover() {
-      if (this.isCollapsed && this.isFirstLevel) {
-        return this.item === this.mobileItem
-      }
-      return this.itemHover
-    },
-    itemHasChild() {
-      return !!(this.item.child && this.item.child.length > 0)
-    }
-  },
-  watch: {
-    // $route() {
-    //   setTimeout(() => {
-    //     if (this.item.header || this.item.component) {
-    //       return
-    //     }
-    //     this.initState()
-    //   }, 1)
-    // },
-    item(newItem, item) {
-      this.emitItemUpdate(newItem, item)
-    },
-    'item.isActive'() {
-      this.initState()
-    },
-    activeShow() {
-      this.itemShow = this.item === this.activeShow
-    }
-  },
-  created() {
-    if (this.item.header || this.item.component) {
-      return
-    }
-    this.initState()
-  },
-  mounted() {
-    if (!this.$router) {
-      window.addEventListener('hashchange', this.initState)
-    }
-  },
-  destroyed() {
-    if (!this.$router) {
-      window.removeEventListener('hashchange', this.initState)
-    }
-  },
-  methods: {
-    isLinkActive(item) {
-      return (
-        item.isActive ||
-        this.matchRoute(item) ||
-        this.isChildActive(item.child) ||
-        this.isAliasActive(item)
-      )
-    },
-    isLinkExactActive(item) {
-      return this.matchExactRoute(item.href)
-    },
-    isChildActive(child) {
-      if (!child) {
-        return false
-      }
-      return child.some((item) => {
-        return this.isLinkActive(item)
-      })
-    },
-    isAliasActive(item) {
-      if (item.alias) {
-        const current = this.$router
-          ? this.$route.fullPath
-          : window.location.pathname + window.location.search + window.location.hash
-        if (Array.isArray(item.alias)) {
-          return item.alias.some((alias) => {
-            return pathToRegexp(alias).test(current)
-          })
-        } else {
-          return pathToRegexp(item.alias).test(current)
-        }
-      }
-      return false
-    },
-    matchRoute({ href, exactPath }) {
-      if (!href) {
-        return false
-      }
-      if (this.$router) {
-        const { route } = this.$router.resolve(href)
-        return exactPath ? route.path === this.$route.path : this.matchExactRoute(href)
-      } else {
-        return exactPath ? encodeURI(href) === window.location.pathname : this.matchExactRoute(href)
-      }
-    },
-    matchExactRoute(href) {
-      if (!href) {
-        return false
-      }
-      if (this.$router) {
-        const { route } = this.$router.resolve(href)
-        return route.fullPath === this.$route.fullPath
-      } else {
-        return (
-          encodeURI(href) ===
-          window.location.pathname + window.location.search + window.location.hash
-        )
-      }
-    },
-    clickEvent(event) {
-      if (this.item.disabled) {
-        return
-      }
-      if (!this.item.href) {
-        event.preventDefault()
-      }
-
-      this.emitItemClick(event, this.item, this)
-
-      this.emitMobileItem(event, event.currentTarget.offsetParent)
-
-      if (!this.itemHasChild || this.showChild || this.isMobileItem) {
-        return
-      }
-      if (!this.item.href || this.exactActive) {
-        this.show = !this.show
-      }
-    },
-    emitMobileItem(event, itemEl) {
-      if (this.hover) {
-        return
-      }
-      if (!this.isCollapsed || !this.isFirstLevel || this.isMobileItem) {
-        return
-      }
-      this.$emit('unset-mobile-item', true)
-      setTimeout(() => {
-        if (this.mobileItem !== this.item) {
-          this.$emit('set-mobile-item', { item: this.item, itemEl })
-        }
-        if (event.type === 'click' && !this.itemHasChild) {
-          this.$emit('unset-mobile-item', false)
-        }
-      }, 0)
-    },
-    initState() {
-      this.initActiveState()
-      this.initShowState()
-    },
-    initActiveState() {
-      this.active = this.isLinkActive(this.item)
-      this.exactActive = this.isLinkExactActive(this.item)
-    },
-    initShowState() {
-      if (!this.itemHasChild || this.showChild) {
-        return
-      }
-      if ((this.showOneChild && this.active && !this.show) || (this.active && !this.show)) {
-        this.show = true
-      } else if (this.showOneChild && !this.active && this.show) {
-        this.show = false
-      }
-    },
-    mouseOverEvent(event) {
-      if (this.item.disabled) {
-        return
-      }
-      event.stopPropagation()
-      this.itemHover = true
-      if (!this.disableHover) {
-        this.emitMobileItem(event, event.currentTarget)
-      }
-    },
-    mouseOutEvent(event) {
-      event.stopPropagation()
-      this.itemHover = false
-    },
-    expandEnter(el) {
-      el.style.height = el.scrollHeight + 'px'
-    },
-    expandAfterEnter(el) {
-      el.style.height = 'auto'
-    },
-    expandBeforeLeave(el) {
-      if (this.isCollapsed && this.isFirstLevel) {
-        el.style.display = 'none'
-        return
-      }
-      el.style.height = el.scrollHeight + 'px'
-    }
-  },
-  inject: ['emitActiveShow', 'emitItemClick', 'emitItemUpdate']
-}
-</script>
-
-
-<style lang="less">
-.vsm--title {
-  writing-mode: vertical-rl;
-}
-</style>

src/components/yvan-ui/yvan-sidebar-menu/SidebarMenuLink.vue

@@ -1,36 +0,0 @@
-<template>
-  <component :is="tag" v-bind="componentAttrs">
-    <slot />
-  </component>
-</template>
-
-<script>
-export default {
-  name: 'SidebarMenuLink',
-  inheritAttrs: false,
-  props: {
-    item: {
-      type: Object,
-      required: true
-    }
-  },
-  computed: {
-    isRouterLink() {
-      // return !!this.$router && this.item.href && !this.item.external
-      return false
-    },
-    componentAttrs() {
-      return Object.assign(this.isRouterLink ? { to: this.href } : { href: this.href }, this.$attrs)
-    },
-    tag() {
-      return this.isRouterLink ? (this.$nuxt ? 'nuxt-link' : 'router-link') : 'a'
-    },
-    href() {
-      if (!this.item.href) {
-        return '#'
-      }
-      return this.item.href
-    }
-  }
-}
-</script>

src/components/yvan-ui/yvan-sidebar-menu/style/_base.less

@@ -1,216 +0,0 @@
-.v-sidebar-menu {
-  * {
-    box-sizing: border-box;
-  }
-
-  position: relative;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  z-index: 999;
-  box-sizing: border-box;
-  width: 100%;
-  text-align: left;
-  transition: 0.3s max-width ease;
-
-  .vsm--scroll-wrapper {
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  .vsm--dropdown > .vsm--list {
-    padding: 5px;
-  }
-
-  .vsm--item {
-    position: relative;
-    display: block;
-    width: 100%;
-    white-space: nowrap;
-  }
-
-  .vsm--link {
-    cursor: pointer;
-    position: relative;
-    display: flex;
-    align-items: center;
-    font-size: @item-font-size;
-    font-weight: 400;
-    padding: @item-padding;
-    line-height: @item-line-height;
-    text-decoration: none;
-    user-select: none;
-    z-index: 20;
-    transition: 0.3s all ease;
-
-    &_exact-active,
-    &_active {
-      font-weight: normal;
-    }
-
-    &_disabled {
-      opacity: 0.4;
-      pointer-events: none;
-    }
-
-    &_level-1 {
-      .vsm--icon {
-        height: @icon-height;
-        line-height: @icon-height;
-        width: @icon-width;
-        flex-shrink: 0;
-        text-align: center;
-        border-radius: 3px;
-      }
-    }
-  }
-
-  .vsm--icon {
-    display: inline-block;
-    margin-right: 10px;
-  }
-
-  .vsm--title {
-    flex-grow: 1;
-  }
-
-  .vsm--arrow {
-    width: 30px;
-    text-align: center;
-    font-style: normal;
-    font-weight: 900;
-    transition: 0.3s transform ease;
-
-    &:after {
-      content: '\f105';
-      font-family: 'Font Awesome 5 Free';
-    }
-
-    &_open {
-      transform: rotate(90deg);
-    }
-
-    &_slot:after {
-      display: none;
-    }
-  }
-
-  .vsm--header {
-    font-size: 14px;
-    font-weight: 600;
-    padding: 10px;
-    white-space: nowrap;
-    text-transform: uppercase;
-  }
-
-  .vsm--badge {
-    &_default {
-      padding: 0px 6px;
-      font-size: 12px;
-      border-radius: 3px;
-      height: 20px;
-      line-height: 20px;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-  }
-
-  .vsm--toggle-btn {
-    display: block;
-    text-align: center;
-    font-style: normal;
-    font-weight: normal;
-    height: 50px;
-    cursor: pointer;
-    border: none;
-    width: 100%;
-
-    &:after {
-      content: '\EA42';
-      font-family: 'remixicon' !important;
-    }
-
-    &_slot:after {
-      display: none;
-    }
-  }
-
-  &.vsm_collapsed {
-    & .vsm--link_level-1 {
-      &.vsm--link_hover,
-      &:hover {
-        background-color: transparent !important;
-      }
-    }
-  }
-
-  &.vsm_rtl {
-    right: 0;
-    left: inherit;
-    text-align: right;
-    direction: rtl;
-
-    & .vsm--icon {
-      margin-left: 10px;
-      margin-right: 0px;
-    }
-  }
-
-  &.vsm_relative {
-    position: relative;
-    height: 100%;
-  }
-
-  .expand-enter-active,
-  .expand-leave-active {
-    transition: height 0.3s ease;
-    overflow: hidden;
-  }
-
-  .expand-enter,
-  .expand-leave-to {
-    height: 0 !important;
-  }
-
-  .slide-animation-enter-active {
-    transition: width 0.3s ease;
-  }
-
-  .slide-animation-leave-active {
-    transition: width 0.3s ease;
-  }
-
-  .slide-animation-enter,
-  .slide-animation-leave-to {
-    width: 0 !important;
-  }
-
-  .fade-animation-enter-active {
-    transition: opacity 0.3s ease, visibility 0.3s ease;
-  }
-
-  .fade-animation-leave-active {
-    transition: opacity 0.3s ease, visibility 0.3s ease;
-  }
-
-  .fade-animation-enter,
-  .fade-animation-leave-to {
-    opacity: 0 !important;
-    visibility: hidden !important;
-  }
-
-  .vsm--mobile-item > .vsm--item {
-    padding: 0 !important;
-    margin: 0 !important;
-  }
-
-  .vsm--mobile-item > .vsm--item > .vsm--link {
-    margin: 0 !important;
-    background-color: transparent !important;
-    line-height: @icon-height !important;
-  }
-}

src/components/yvan-ui/yvan-sidebar-menu/style/_variables.less

@@ -1,36 +0,0 @@
-@primary-color: var(--yvan-print-color-primary) ;
-@base-bg: #2a2a2e ;
-
-@item-color: #fff ;
-
-@item-active-color: null ;
-@item-active-bg: null ;
-
-@item-open-color: #fff ;
-@item-open-bg: @primary-color ;
-
-@item-hover-color: null ;
-@item-hover-bg: rgba(darken(@base-bg, 5%), 0.5) ;
-
-@icon-color: null ;
-@icon-bg: darken(@base-bg, 5%) ;
-
-@icon-active-color: null ;
-@icon-active-bg: var(--yvan-print-color-primary-light-9) ;
-
-@icon-open-color: null ;
-@icon-open-bg: @item-open-bg ;
-
-@mobile-item-color: #fff ;
-@mobile-item-bg: @primary-color ;
-@mobile-icon-color: @mobile-item-color ;
-@mobile-icon-bg: @mobile-item-bg ;
-
-@dropdown-bg: lighten(@base-bg, 5%) ;
-@dropdown-color: null ;
-
-@item-font-size: 16px ;
-@item-line-height: 30px ;
-@item-padding: 10px ;
-@icon-height: 30px ;
-@icon-width: 30px ;

src/components/yvan-ui/yvan-sidebar-menu/style/themes/default-theme.less

@@ -1,124 +0,0 @@
-.v-sidebar-menu {
-  background-color: @base-bg;
-
-  .vsm--link {
-    color: @item-color;
-
-    &_exact-active,
-    &_active {
-      color: @item-active-color;
-      background-color: @item-active-bg;
-    }
-
-    &_level-1 {
-      &.vsm--link_exact-active,
-      &.vsm--link_active {
-        box-shadow: none;
-
-        &::before {
-          content: '';
-          width: 4px;
-          height: 80%;
-          background: var(--roy-color-primary);
-          position: absolute;
-          top: 10%;
-          border-radius: 0 10px 10px 0;
-          left: 0;
-        }
-
-        & .vsm--icon {
-          color: @icon-active-color;
-          background-color: @icon-active-bg;
-        }
-      }
-
-      & .vsm--icon {
-        background-color: @icon-bg;
-      }
-    }
-
-    &_hover,
-    &:hover {
-      color: @item-hover-color;
-      background-color: @item-hover-bg;
-    }
-
-    &_mobile-item {
-      color: @mobile-item-color;
-
-      &.vsm--link_hover,
-      &:hover {
-        color: @mobile-item-color;
-      }
-    }
-  }
-
-  &.vsm_collapsed {
-    .vsm--link_level-1.vsm--link_hover,
-    .vsm--link_level-1:hover {
-      .vsm--icon {
-        color: @mobile-icon-color;
-        background-color: @mobile-icon-bg;
-      }
-    }
-  }
-
-  .vsm--icon {
-    color: @icon-color;
-  }
-
-  .vsm--dropdown {
-    & .vsm--list {
-      background-color: @dropdown-bg;
-    }
-
-    & .vsm--link {
-      color: @dropdown-color;
-    }
-
-    & .vsm--icon {
-      color: @dropdown-color;
-    }
-  }
-
-  .vsm--mobile-bg {
-    background-color: @mobile-item-bg;
-  }
-
-  &.vsm_expanded {
-    .vsm--item_open {
-      .vsm--link {
-        &_level-1 {
-          color: @item-open-color;
-          background-color: @item-open-bg;
-
-          & .vsm--icon {
-            color: @icon-open-color;
-            background-color: @icon-open-bg;
-          }
-        }
-      }
-    }
-  }
-
-  &.vsm_rtl {
-    .vsm--link_level-1.vsm--link_active,
-    .vsm--link_level-1.vsm--link_exact-active {
-      box-shadow: -3px 0px 0px 0px @primary-color inset;
-    }
-  }
-
-  .vsm--header {
-    color: rgba(@item-color, 0.7);
-  }
-
-  .vsm--badge_default {
-    color: @item-color;
-    background-color: darken(@base-bg, 5%);
-  }
-
-  .vsm--toggle-btn {
-    color: @item-color;
-    background-color: darken(@base-bg, 5%);
-  }
-}

src/components/yvan-ui/yvan-sidebar-menu/style/themes/white-theme.less

@@ -1,121 +0,0 @@
-@base-bg: #fff;
-@item-color: #262626;
-@icon-bg: #ffffff;
-@icon-active-color: var(--roy-color-primary);
-@icon-active-bg: var(--roy-color-primary-light-9);
-@item-hover-bg: rgba(darken(@base-bg, 5%), 0.5);
-@dropdown-bg: #e3e3e3;
-
-.v-sidebar-menu.vsm_white-theme {
-  background-color: @base-bg;
-
-  .vsm--link {
-    color: @item-color;
-
-    &_exact-active,
-    &_active {
-      color: @item-active-color;
-      background-color: @item-active-bg;
-    }
-
-    &_level-1 {
-      &.vsm--link_exact-active,
-      &.vsm--link_active {
-        box-shadow: none;
-
-        & .vsm--icon {
-          color: @icon-active-color;
-          background-color: @icon-active-bg;
-        }
-      }
-
-      & .vsm--icon {
-        background-color: @icon-bg;
-      }
-    }
-
-    &_hover,
-    &:hover {
-      color: @item-hover-color;
-      background-color: @item-hover-bg;
-    }
-
-    &_mobile-item {
-      color: @mobile-item-color;
-
-      &.vsm--link_hover,
-      &:hover {
-        color: @mobile-item-color;
-      }
-    }
-  }
-
-  &.vsm_collapsed {
-    .vsm--link_level-1.vsm--link_hover,
-    .vsm--link_level-1:hover {
-      .vsm--icon {
-        color: @mobile-icon-color;
-        background-color: @mobile-icon-bg;
-      }
-    }
-  }
-
-  .vsm--icon {
-    color: @icon-color;
-  }
-
-  .vsm--dropdown {
-    & .vsm--list {
-      background-color: @dropdown-bg;
-    }
-
-    & .vsm--link {
-      color: @dropdown-color;
-    }
-
-    & .vsm--icon {
-      color: @dropdown-color;
-    }
-  }
-
-  .vsm--mobile-bg {
-    background-color: @mobile-item-bg;
-  }
-
-  &.vsm_expanded {
-    .vsm--item_open {
-      .vsm--link {
-        &_level-1 {
-          color: @item-open-color;
-          background-color: @item-open-bg;
-
-          & .vsm--icon {
-            color: @icon-open-color;
-            background-color: @icon-open-bg;
-          }
-        }
-      }
-    }
-  }
-
-  &.vsm_rtl {
-    .vsm--link_level-1.vsm--link_active,
-    .vsm--link_level-1.vsm--link_exact-active {
-      box-shadow: -3px 0px 0px 0px @primary-color inset;
-    }
-  }
-
-  .vsm--header {
-    color: rgba(@item-color, 0.7);
-  }
-
-  .vsm--badge_default {
-    color: @item-color;
-    background-color: darken(@base-bg, 5%);
-  }
-
-  .vsm--toggle-btn {
-    color: @item-color;
-    background-color: darken(@base-bg, 5%);
-  }
-}

src/components/yvan-ui/yvan-sidebar-menu/style/vue-sidebar-menu.less

@@ -1,7 +0,0 @@
-// base styles
-@import './_variables';
-@import './_base';
-
-// themes
-@import './themes/default-theme';
-@import './themes/white-theme';

src/store/compose.ts

@@ -1,9 +1,8 @@
 import Utils from '@/utils/utils'
 import eventBus from '@/utils/eventBus'
 import decomposeComponent from '@/utils/decomposeComponent'
-import {$} from '@/utils/html-util'
 import {createGroupStyle} from '@/utils/style-util'
-import {commonAttr, commonStyle} from '@/components/config/componentList'
+import {commonAttr, commonStyle} from '@/components/config/globalConfig'
 
 export default {
     state: {
@@ -21,7 +20,7 @@ export default {
     },
     actions: {
         getEditor() {
-            this.editor = $('#designer-page')
+            this.editor = document.querySelector('#designer-page')
         },
 
         setAreaData(data) {
@@ -31,7 +30,7 @@ export default {
         compose({componentData, areaData, editor}) {
             const components = []
             areaData.components.forEach((component) => {
-                if (component.component !== 'RoyGroup') {
+                if (component.component !== 'YvanGroup') {
                     components.push(component)
                 } else {
                     // 如果要组合的组件中，已经存在组合数据，则需要提前拆分

src/store/global.ts

@@ -85,8 +85,8 @@ export const globalStore = defineStore('global', {
             this.curTableCell = null
         },
 
-        setCurTableCell(state, {component}) {
-            state.curTableCell = component
+        setCurTableCell({component}) {
+            this.curTableCell = component
         },
 
         setPageSize({pageSize, w, h}) {
@@ -109,7 +109,7 @@ export const globalStore = defineStore('global', {
             ruleStore().setReDrawRuler()
         },
 
-        updateDataValue(state, {data, key, value}) {
+        updateDataValue({data, key, value}) {
             data[key] = value
         },
 

src/utils/decomposeComponent.js

@@ -1,9 +1,8 @@
-import {$} from './html-util.js'
-import {mod360} from './translate.js'
+import {mod360} from '@/utils/translate'
 
 // 将组合中的各个子组件拆分出来，并计算它们新的 style
 export default function decomposeComponent(component, editorRect, parentStyle) {
-    const componentRect = $(`#roy-component-${component.id}`).getBoundingClientRect()
+    const componentRect = document.querySelector(`#roy-component-${component.id}`).getBoundingClientRect()
     // 获取元素的中心点坐标
     const center = {
         x: componentRect.left - editorRect.left + componentRect.width / 2,

src/utils/elementUtils.ts

@@ -0,0 +1,13 @@
+import {elementList} from "@/components/config/globalConfig";
+
+class ElementUtils {
+
+    getElementByCode(elementCode: string): any {
+        const elements = elementList.filter(element => element.code === elementCode)
+        if (elements) {
+            return elements[0]
+        }
+    }
+}
+
+export default new ElementUtils()

src/utils/html-util.js

@@ -27,11 +27,7 @@ export function deepCopy(obj, cache = []) {
     return copy
 }
 
-export function $(selector) {
-    return document.querySelector(selector)
-}
-
-const components = ['RoyText', 'RoyRect', 'RoyCircle', 'RoyTran']
+const components = ['YvanText', 'YvanRect', 'YvanCircle', 'YvanTran']
 
 export function isPreventDrop(component) {
     return !components.includes(component) && !component.startsWith('SVG')