添加元素组件

src/components/PageComponents/WangEditorVue/WangEditor.vue

@@ -1,5 +1,6 @@
 <script>
-import { createEditor } from '@wangeditor/editor'
+import {h} from "vue";
+import {createEditor} from '@wangeditor/editor'
 
 function genErrorInfo(fnName) {
   let info = `请使用 '@${fnName}' 事件，不要放在 props 中`
@@ -9,8 +10,8 @@ function genErrorInfo(fnName) {
 
 export default {
   //【注意】单独写 <template>...</template> 时，rollup 打包完浏览器运行时报错，所以先在这里写 template
-  render(h) {
-    return h('div', { ref: 'box' })
+  render() {
+    return h('div', {ref: 'box'})
   },
   name: 'WangEditor',
   data() {
@@ -27,9 +28,10 @@ export default {
     // 监听 'value' 属性变化 - value 用于自定义 v-model
     value(newVal) {
       const isEqual = newVal === this.curValue
+      // 和当前内容一样，则忽略
       if (isEqual) {
         return
-      } // 和当前内容一样，则忽略
+      }
       // 重置 HTML
       this.setHtml(newVal)
     }
@@ -50,7 +52,7 @@ export default {
       }
       const defaultConfig = this.defaultConfig || {}
       const defaultContent = JSON.stringify(
-        Array.isArray(this.defaultContent) ? this.defaultContent : []
+          Array.isArray(this.defaultContent) ? this.defaultContent : []
       )
       createEditor({
         selector: this.$refs.box,

src/components/PageComponents/WangEditorVue/WangToolbar.vue

@@ -1,10 +1,11 @@
 <script>
-import { createToolbar, DomEditor } from '@wangeditor/editor'
+import {h} from "vue";
+import {createToolbar, DomEditor} from '@wangeditor/editor'
 
 export default {
   name: 'WangToolbar',
-  render(h) {
-    return h('div', { ref: 'box' })
+  render() {
+    return h('div', {ref: 'box'})
   },
   props: ['editor', 'defaultConfig', 'mode'],
   methods: {

src/components/PageComponents/YvanRichText.vue

@@ -1,28 +1,28 @@
 <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>-->
+    <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>

src/components/PageToc.vue

@@ -1,99 +0,0 @@
-<template>
-  <yvan-print-main class="roy-page-toc">
-    <div v-if="componentData.length">
-      <div
-          v-for="(item, index) in componentData"
-          :key="index"
-          :class="{ activated: transformIndex(index) === curComponentIndex }"
-          class="roy-page-toc__list"
-          @click="onClick(transformIndex(index))"
-      >
-        <i :class="getComponent(index).icon" style="padding-right: 5px"></i>
-        <span class="roy-page-toc__label">{{ getComponent(index).label }}</span>
-        <div class="roy-page-toc__buttons">
-          <span class="ri-arrow-up-line" @click="upComponent(transformIndex(index))"></span>
-          <span class="ri-arrow-down-line" @click="downComponent(transformIndex(index))"></span>
-          <span class="ri-delete-bin-4-line" @click="deleteComponent(transformIndex(index))"></span>
-        </div>
-      </div>
-    </div>
-    <div v-else class="roy-page-toc__empty animate__animated animate__headShake">
-      <i class="ri-door-lock-box-line animate__backInUp" style="color: var(--roy-color-warning)"/>
-      <div>当前没有组件，您可以通过拖拽添加组件</div>
-    </div>
-  </yvan-print-main>
-</template>
-
-<script lang="js">
-import {mapState} from 'pinia'
-import {globalStore} from "@/store";
-import commonMixin from '@/mixin/commonMixin'
-import YvanPrintMain from "@/components/yvan-ui/yvan-print-main.vue";
-
-/**
- * 页面大纲
- */
-export default {
-  name: 'PageToc',
-  mixins: [commonMixin],
-  components: {YvanPrintMain},
-  props: {},
-  data() {
-    return {}
-  },
-  computed: {
-    ...mapState(globalStore, ['componentData', 'curComponentIndex', "curComponent"])
-  },
-  methods: {
-    initMounted() {
-    },
-    getComponent(index) {
-      return this.componentData[this.componentData.length - 1 - index]
-    },
-
-    transformIndex(index) {
-      return this.componentData.length - 1 - index
-    },
-    onClick(index) {
-      this.setCurComponent(index)
-    },
-    deleteComponent() {
-      setTimeout(() => {
-        this.$store.commit('printTemplateModule/deleteComponent')
-        this.$store.commit('printTemplateModule/recordSnapshot')
-      })
-    },
-
-    upComponent() {
-      setTimeout(() => {
-        this.$store.commit('printTemplateModule/upComponent')
-        this.$store.commit('printTemplateModule/recordSnapshot')
-      })
-    },
-
-    downComponent() {
-      setTimeout(() => {
-        this.$store.commit('printTemplateModule/downComponent')
-        this.$store.commit('printTemplateModule/recordSnapshot')
-      })
-    },
-
-    setCurComponent(index) {
-      this.$store.commit('printTemplateModule/setCurComponent', {
-        component: this.componentData[index],
-        index
-      })
-    }
-  },
-  created() {
-  },
-  mounted() {
-    this.initMounted()
-  },
-  watch: {}
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>

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

@@ -158,9 +158,9 @@ export default {
 
       .yvan-page-toc__list {
         height: 30px;
-        cursor: grab;
+        cursor: pointer;
         text-align: center;
-        color: var(--roy-text-color-primary);
+        color: var(--yvan-text-color-primary);
         display: flex;
         align-items: center;
         font-size: 12px;
@@ -186,7 +186,7 @@ export default {
         }
 
         &:active {
-          cursor: grabbing;
+          cursor: pointer;
         }
 
         &:hover {