init project

auto-imports.d.ts

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

components.d.ts

@@ -74,6 +74,9 @@ declare module 'vue' {
     YvanPrintDesigner: typeof import('./src/components/yvan-print-designer.vue')['default']
     YvanPrintDesignerAside: typeof import('./src/components/yvan-print-designer-left.vue')['default']
     YvanPrintDesignerLeft: typeof import('./src/components/yvan-print-designer-left.vue')['default']
+    YvanPrintDesignerLeftComponent: typeof import('./src/components/yvan-print-designer-left-component.vue')['default']
+    YvanPrintDesignerLeftStart: typeof import('./src/components/yvan-print-designer-left-start.vue')['default']
+    YvanPrintDesignerLeftStructure: typeof import('./src/components/yvan-print-designer-left-structure.vue')['default']
     YvanPrintDesignerMain: typeof import('./src/components/yvan-print-designer-main.vue')['default']
     YvanPrintDesignerRight: typeof import('./src/components/yvan-print-designer-right.vue')['default']
     YvanPrintHeader: typeof import('./src/components/yvan-ui/yvan-print-header.vue')['default']

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.1.0",
     "@wangeditor/editor": "^5.1.22",
     "big.js": "^6.2.1",
     "element-plus": "^2.3.7",
@@ -23,6 +24,7 @@
   },
   "devDependencies": {
     "@types/node": "^20.3.1",
+    "@vicons/fa": "^0.12.0",
     "@vitejs/plugin-vue": "^4.1.0",
     "less": "^4.1.3",
     "less-loader": "^11.1.3",

src/assets/vue.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/PageComponent.vue

@@ -1,81 +0,0 @@
-<template>
-  <div class="roy-page-component" @dragstart="handleDragStart">
-    <div
-      v-for="(item, index) in componentItems"
-      :key="item.code"
-      :data-index="index"
-      class="roy-page-component__item"
-      draggable="true"
-    >
-      <i :class="item.icon"></i>
-      <span>{{ item.name }}</span>
-    </div>
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'PageComponent',
-  data() {
-    return {
-      componentItems: []
-    }
-  },
-  methods: {
-    handleDragStart(e) {
-      e.dataTransfer.setData('index', e.target.dataset.index)
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.roy-page-component {
-  align-items: center;
-  grid-auto-rows: 105px;
-  grid-template-columns: auto auto auto;
-  overflow: auto;
-  height: calc(100% - 16px);
-  padding: 8px;
-  display: grid;
-  justify-content: center;
-}
-
-.roy-page-component__item {
-  background: var(--roy-bg-color);
-  border-radius: 6px;
-  box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
-  display: grid;
-  text-align: center;
-  align-content: center;
-  border: 1px solid var(--roy-border-color-dark);
-  user-select: none;
-  width: 68px;
-  min-width: 67px;
-  max-width: 69px;
-  height: 95px;
-  margin: 0 4px;
-  color: var(--roy-text-color-regular);
-
-  &:hover {
-    box-shadow: rgba(0, 0, 0, 0.19) 0 10px 20px, rgba(0, 0, 0, 0.23) 0 6px 6px;
-    cursor: grab;
-    animation-name: pulse;
-    animation-duration: 1s;
-    animation-delay: 1.5s;
-    animation-iteration-count: infinite;
-    border: 2px solid var(--roy-color-primary);
-  }
-
-  i {
-    font-size: 32px;
-    margin: 0;
-  }
-
-  span {
-    font-size: 10px;
-    padding-top: 10px;
-  }
-}
-</style>

src/components/config/componentList.ts

@@ -29,7 +29,7 @@ export const layoutComponentList = [
  */
 export const basicComponentList = [
     {
-        icon: 'ri-text',
+        icon: 'fa file-text-o',
         code: 'text',
         name: '文本',
         component: 'RoySimpleText',
@@ -225,16 +225,16 @@ export const componentTypeList = [
         title: "基础组件",
         componentList: basicComponentList
     },
-    {
-        name: "composite_component",
-        title: "复合组件",
-        componentList: compositeComponentList
-    },
-    {
-        name: "other_component",
-        title: "其他组件",
-        componentList: otherComponentList
-    }
+    // {
+    //     name: "composite_component",
+    //     title: "复合组件",
+    //     componentList: compositeComponentList
+    // },
+    // {
+    //     name: "other_component",
+    //     title: "其他组件",
+    //     componentList: otherComponentList
+    // }
 ]
 
 

src/components/config/menuConfig.ts

@@ -1,5 +1,5 @@
 import {markRaw} from "vue";
-import PageComponent from '@/components/PageComponent.vue';
+// import PageComponent from '@/components/PageComponent.vue';
 import PageToc from '@/components/PageToc.vue';
 import PagePalette from '@/components/PagePalette.vue';
 import DataSource from '@/components/DataSource.vue';
@@ -13,7 +13,7 @@ export default {
             icon: 'fa fa-cube',
             activeIcon: 'fa fa-cube',
             isActive: true,
-            relativeComponent: markRaw(PageComponent)
+            // relativeComponent: markRaw(PageComponent)
         },
         {
             title: '结构',

src/components/config/toolbarConfig.ts

@@ -18,7 +18,7 @@ export default [
     // },
     {
         name: '显示/隐藏标尺',
-        icon: 'fa fa-map',
+        icon: 'fa fa-industry',
         event: () => {
             ruleStore().toggleRuler()
         }

src/components/yvan-editor/Area.vue

@@ -6,13 +6,12 @@
       width: width + 'px',
       height: height + 'px'
     }"
-    class="roy-designer-area"
-  ></div>
+    class="yvan-print-designer-selected-area"/>
 </template>
 
 <script>
 export default {
-  name: 'RoyArea',
+  name: 'yvan-print-designer-selected-area',
   props: {
     start: {
       type: Object,
@@ -31,7 +30,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.roy-designer-area {
+.yvan-print-designer-selected-area {
   border: 1px solid var(--roy-color-primary-light-5);
   background: rgba(var(--roy-color-primary-rgb), 0.1);
   position: absolute;

src/components/yvan-editor/ComponentAdjuster.vue

@@ -8,7 +8,7 @@
   >
     <span
         v-show="isActive && showRotate"
-        class="ri-checkbox-blank-circle-line roy-component-adjuster__rotate"
+        class="fa fa-rotate-left roy-component-adjuster__rotate"
         @mousedown="handleRotate"
     ></span>
     <span v-show="element.isLock" class="ri-lock-fill roy-component-adjuster__lock"></span>
@@ -37,12 +37,12 @@
 
 <script>
 import {mapState} from "pinia";
+import {globalStore} from "@/store";
 import commonMixin from '@/mixin/commonMixin'
 import {mod360} from '@/utils/translate'
 import calculateComponentPositionAndSize from '@/utils/calculateComponentPositonAndSize'
 import {isPreventDrop} from '@/utils/html-util'
 import eventBus from '@/utils/eventBus'
-import {globalStore} from "@/store";
 
 /**
  * 组件小圆角
@@ -129,7 +129,7 @@ export default {
     },
     adjusterStyle() {
       return {
-        border: this.isActive ? '0.5px dashed var(--roy-text-color-secondary)' : undefined
+        border: this.isActive ? '0.5px dashed var(--yvan-text-color-secondary)' : undefined
       }
     }
   },
@@ -229,11 +229,11 @@ export default {
         // 获取旋转的角度值
         pos.rotate = startRotate + rotateDegreeAfter - rotateDegreeBefore
         // 修改当前组件样式
-        this.$store.commit('printTemplateModule/setShapeStyle', pos)
+        globalStore().setShapeStyle(pos)
       }
 
       const up = () => {
-        hasMove && this.$store.commit('printTemplateModule/recordSnapshot')
+        hasMove && globalStore().recordSnapshot()
         document.removeEventListener('mousemove', move)
         document.removeEventListener('mouseup', up)
         this.cursors = this.getCursor() // 根据旋转角度获取光标位置
@@ -442,16 +442,16 @@ export default {
   user-select: none;
 
   &:hover {
-    border: 0.5px dotted var(--roy-text-color-secondary);
+    border: 0.5px dotted var(--yvan-text-color-secondary);
   }
 
   .roy-component-adjuster__rotate {
     position: absolute;
     top: -28px;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translateX(-60%);
     cursor: grab;
-    color: var(--roy-text-color-regular);
+    color: var(--yvan-text-color-regular);
     font-size: 10px;
     font-weight: 400;
 
@@ -462,7 +462,7 @@ export default {
     &:after {
       content: '';
       height: 20px;
-      border-right: var(--roy-text-color-regular) dashed 1px;
+      border-right: var(--yvan-text-color-regular) dashed 1px;
       position: absolute;
       left: 5.5px;
       top: 12px;
@@ -486,7 +486,7 @@ export default {
     border-radius: 2px;
     font-weight: 100;
     cursor: move;
-    background: var(--roy-color-primary-light-7);
+    background: var(--yvan-color-primary-light-7);
     color: #aaaaaa;
 
     &:hover {
@@ -495,7 +495,7 @@ export default {
 
     &:active {
       color: #212121;
-      background: var(--roy-color-primary-light-3);
+      background: var(--yvan-color-primary-light-3);
     }
   }
 
@@ -514,7 +514,7 @@ export default {
 
   [class^='roy-component-adjuster__shape-point--'] {
     position: absolute;
-    border: 1px solid var(--roy-color-primary);
+    border: 1px solid var(--yvan-color-primary);
     box-shadow: 0 0 2px #bbb;
     background: #fff;
     width: 6px;

src/components/yvan-editor/Editor.vue

@@ -56,12 +56,10 @@
           <!-- 上下边距线 -->
           <div
               :style="`top: ${pageConfig?.pageMarginTop * realScale}px`"
-              class="yvan-print-margin-top-line"
-          ></div>
+              class="yvan-print-margin-top-line"/>
           <div
               :style="`bottom: ${pageConfig?.pageMarginBottom * realScale}px`"
-              class="yvan-print-margin-bottom-line"
-          ></div>
+              class="yvan-print-margin-bottom-line"/>
         </div>
       </div>
     </div>
@@ -143,7 +141,7 @@ export default {
     return {
       rulerWidth: 0,
       rulerHeight: 0,
-      startX: -19,
+      startX: -20,
       startY: -25,
       lines: {
         h: [],
@@ -167,7 +165,7 @@ export default {
       editorY: 0,
       start: {
         // 选中区域的起点
-        x: 0,
+        x: -20,
         y: 0
       },
       width: 0,
@@ -346,7 +344,7 @@ export default {
       return modeStore().isNightMode
     },
     panelWidth() {
-      return this.showRight ? 'width: calc(100% - 330px - 310px);' : 'width: calc(100% - 95px - 95px);'
+      return this.showRight ? 'width: calc(100% - 315px - 315px);' : 'width: calc(100% - 95px - 95px);'
     }
   },
   methods: {
@@ -549,10 +547,8 @@ export default {
     console.log("mounted >>> editor")
     this.rulerWidth = this.$el.offsetWidth
     this.rulerHeight = this.$el.offsetHeight
-    this.$refs.screensRef.scrollLeft =
-        this.$refs.containerRef.getBoundingClientRect().width / 2 - this.rectWidth
+    this.$refs.screensRef.scrollLeft = this.$refs.containerRef.getBoundingClientRect().width / 2 - this.rectWidth
     // 获取编辑器元素
-    // this.$store.commit('printTemplateModule/getEditor')
     globalStore().getEditor()
   },
   watch: {

src/components/yvan-editor/EditorLine.vue

@@ -166,14 +166,13 @@ export default {
               return
             }
             // 修改当前组件位移
-            this.$store.commit('printTemplateModule/setShapeSingleStyle', {
+            globalStore().setShapeSingleStyle({
               key,
               value:
                   rotate !== 0
                       ? this.translatecurComponentShift(key, condition, curComponentStyle)
                       : condition.dragShift
             })
-
             condition.lineNode.style[key] = `${condition.lineShift}px`
             needToShow.push(condition.line)
           })

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

@@ -0,0 +1,107 @@
+<template>
+  <section :style="asideStyle" class="yvan-print-designer-left-component__main">
+    <div class="yvan-print-designer-left-component__title">
+      <i class="fa fa-cubes vsm--icon"></i>
+      <span>组件列表</span>
+    </div>
+    <div class="yvan-print-designer-left-component__content">
+      <el-collapse v-model="collapseOptions.activeName">
+        <el-collapse-item
+            v-for="componentType in componentTypeList"
+            :title="componentType.title"
+            :name="componentType.name">
+          <div class="yvan-print-designer-left-component__collapse_item">
+            <el-space wrap @dragstart="handleDragStart">
+              <div
+                  v-for="component in componentType.componentList"
+                  :key="component.code"
+                  :data-code="component.code"
+                  draggable="true">
+                <el-button :icon="renderIcon(component.icon)"> {{ component.name }}</el-button>
+              </div>
+            </el-space>
+          </div>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+  </section>
+</template>
+
+<script>
+import {mapState} from "pinia";
+import {globalStore} from "@/store";
+import commonMixin from '@/mixin/commonMixin'
+import {componentTypeList} from "@/components/config/componentList";
+
+export default {
+  name: 'yvan-print-designer-left-component',
+  mixins: [commonMixin],
+  data() {
+    return {
+      componentTypeList,
+      collapseOptions: {
+        activeName: componentTypeList.map(componentType => componentType.name)
+      }
+    }
+  },
+  props: {
+    showRight: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    ...mapState(globalStore, {
+      // isNightMode: (state) => state.nightMode.isNightMode
+    }),
+    asideStyle() {
+      return this.showRight ? 'width: 300px' : 'width: 65px'
+    }
+  },
+  methods: {
+    renderIcon(iconName){
+      console.log('iconName >>> ', iconName)
+      return System.renderIcon(iconName)
+    },
+    handleDragStart(e) {
+      console.log(' >>>> ', e, e.target.dataset.code)
+      e.dataTransfer.setData('componentCode', e.target.dataset.code)
+    },
+  },
+  mounted() {
+
+  },
+  watch: {}
+}
+</script>
+
+<style lang="less" scoped>
+.yvan-print-designer-left-component__main {
+  height: 100%;
+
+  .yvan-print-designer-left-component__title {
+    width: 100%;
+    height: 45px;
+    text-align: left;
+    line-height: 45px;
+    background: var(--yvan-menu-bar-background);
+    color: #fff;
+    align-items: center;
+
+    i {
+      margin: 0 5px 0 10px;
+    }
+  }
+
+  .yvan-print-designer-left-component__content {
+    padding: 0 5px;
+    height: calc(100% - 50px);
+    overflow: auto;
+    background: var(--yvan-bg-color-overlay);
+
+    .yvan-print-designer-left-component__collapse_item {
+      margin: 0 10px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,74 @@
+<template>
+  <section :style="asideStyle" class="yvan-print-designer-left-structure__main">
+    <div class="yvan-print-designer-left-structure__title">
+      <i class="fa fa-sitemap vsm--icon"></i>
+      <span>页面结构</span>
+    </div>
+    <div class="yvan-print-designer-left-structure__content">
+
+    </div>
+  </section>
+</template>
+
+<script>
+import commonMixin from '@/mixin/commonMixin'
+
+export default {
+  name: 'yvan-print-designer-left-structure',
+  components: {},
+  mixins: [commonMixin],
+  data() {
+    return {
+      isNightMode: false,
+
+    }
+  },
+  props: {
+    showRight: {
+      type: Boolean,
+      default: true
+    }
+  },
+  computed: {
+    // ...mapState({
+    //   paletteCount: (state) => state.printTemplateModule.paletteCount,
+    //   globalCount: (state) => state.printTemplateModule.globalCount,
+    //   isNightMode: (state) => state.printTemplateModule.nightMode.isNightMode
+    // }),
+    asideStyle() {
+      return this.showRight ? 'width: 300px' : 'width: 65px'
+    }
+  },
+  methods: {},
+  mounted() {
+  },
+  watch: {}
+}
+</script>
+
+<style lang="less" scoped>
+.yvan-print-designer-left-structure__main {
+  height: 100%;
+
+  .yvan-print-designer-left-structure__title {
+    width: 100%;
+    height: 45px;
+    text-align: left;
+    line-height: 45px;
+    background: var(--yvan-menu-bar-background);
+    color: #fff;
+    align-items: center;
+
+    i {
+      margin: 0 5px 0 10px;
+    }
+  }
+
+  .yvan-print-designer-left-structure__content {
+    padding: 0 5px;
+    height: calc(100% - 45px);
+    overflow: auto;
+    background: var(--yvan-bg-color-overlay);
+  }
+}
+</style>

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

@@ -1,52 +1,25 @@
 <template>
-  <section :style="asideStyle" class="yvan-print-designer-left__main">
-    <div class="yvan-print-designer-left__title">
-      <i class="fa fa-cube vsm--icon"></i>
-      <span>组件列表</span>
-    </div>
-    <div class="yvan-print-designer-left__content">
-      <el-collapse v-model="collapseOptions.activeName">
-        <el-collapse-item
-            v-for="componentType in componentTypeList"
-            :title="componentType.title"
-            :name="componentType.name">
-          <div class="yvan-print-designer-left__collapse_item">
-            <el-space wrap @dragstart="handleDragStart">
-              <div
-                  v-for="component in componentType.componentList"
-                  :key="component.code"
-                  :data-code="component.code"
-                  draggable="true">
-                <el-button> {{ component.name }}</el-button>
-              </div>
-            </el-space>
-          </div>
-        </el-collapse-item>
-      </el-collapse>
-    </div>
-  </section>
+  <div class="yvan-print-designer-left-component">
+    <yvan-print-designer-left-component/>
+  </div>
+  <div class="yvan-print-designer-left-structure">
+    <yvan-print-designer-left-structure/>
+  </div>
 </template>
 
 <script>
-import commonMixin from '@/mixin/commonMixin'
-import menuConfig from "@/components/config/menuConfig";
-import {componentTypeList} from "@/components/config/componentList";
-import YvanPrintSidebarMenu from "@/components/yvan-ui/yvan-sidebar-menu/SidebarMenu.vue";
+import YvanPrintDesignerLeftComponent from "@/components/yvan-print-designer-left-component.vue";
+import YvanPrintDesignerLeftStructure from "@/components/yvan-print-designer-left-structure.vue";
 
 export default {
   name: 'yvan-print-designer-left',
-  components: {YvanPrintSidebarMenu},
-  mixins: [commonMixin],
+  components: {
+    YvanPrintDesignerLeftComponent,
+    YvanPrintDesignerLeftStructure
+  },
   data() {
     return {
       isNightMode: false,
-      componentTypeList,
-      menuList: menuConfig.menuList,
-      curActiveComponent: null,
-      curActiveComponentCode: '',
-      collapseOptions: {
-        activeName: componentTypeList.map(componentType => componentType.name)
-      }
     }
   },
   props: {
@@ -55,98 +28,24 @@ export default {
       default: true
     }
   },
-  computed: {
-    // ...mapState({
-    //   paletteCount: (state) => state.printTemplateModule.paletteCount,
-    //   globalCount: (state) => state.printTemplateModule.globalCount,
-    //   isNightMode: (state) => state.printTemplateModule.nightMode.isNightMode
-    // }),
-    asideStyle() {
-      return this.showRight ? 'width: 300px' : 'width: 65px'
-    }
-  },
-  methods: {
-    handleDragStart(e) {
-      console.log(' >>>> ', e, e.target.dataset.code)
-      e.dataTransfer.setData('componentCode', e.target.dataset.code)
-    },
-
-    onMenuSelect(e, item) {
-      this.curActiveComponent = item.relativeComponent
-      this.curActiveComponentCode = item.code
-      this.menuList.forEach((mItem) => {
-        if (item.code === mItem.code) {
-          mItem.isActive = true
-          return
-        }
-        mItem.isActive = false
-      })
-    },
-    clickPaletteMenu() {
-      this.$refs.sideMenu.$refs.menuItems.forEach((item) => {
-        if (item.item.code === 'palette' && this.curActiveComponentCode !== 'palette') {
-          this.onMenuSelect(null, item.item)
-        }
-      })
-    },
-    clickGlobalMenu() {
-      this.$refs.sideMenu.$refs.menuItems.forEach((item) => {
-        if (item.item.code === 'setting' && this.curActiveComponentCode !== 'setting') {
-          this.onMenuSelect(null, item.item)
-        }
-      })
-    }
-  },
+  computed: {},
+  methods: {},
   mounted() {
-    const currentMenu = this.menuList[0]
-    this.curActiveComponent = currentMenu?.relativeComponent
-    this.curActiveComponentCode = currentMenu?.code
   },
-  watch: {
-    paletteCount() {
-      this.clickPaletteMenu()
-    },
-    globalCount() {
-      this.clickGlobalMenu()
-    }
-  }
+  watch: {}
 }
 </script>
 
 <style lang="less" scoped>
-.yvan-print-designer-left__main {
-  height: 100%;
+.yvan-print-designer-left-component {
+  height: calc(50% - 10px);
   width: 100%;
+}
 
-  .yvan-print-designer-left__title {
-    width: 100%;
-    height: 45px;
-    text-align: left;
-    line-height: 45px;
-    background: var(--yvan-menu-bar-background);
-    color: #fff;
-    align-items: center;
-
-    i {
-      margin: 0 5px 0 10px;
-    }
-  }
-
-  .yvan-print-designer-left__content {
-    padding: 0 5px;
-    background: var(--yvan-bg-color-overlay);
-
-    .yvan-print-designer-left__collapse_item {
-      margin: 0 10px;
-    }
-  }
-
-  .yvan-print-designer-left__right_panel {
-    width: calc(100% - 64px);
-    background: var(--yvan-bg-color-overlay);
-    position: absolute;
-    right: 0;
-    top: 0;
-  }
+.yvan-print-designer-left-structure {
+  height: calc(50% - 10px);
+  width: 100%;
+  margin-top: 10px;
 }
+
 </style>

src/components/yvan-print-designer.vue

@@ -33,7 +33,7 @@
       </div>
     </yvan-print-header>
     <yvan-print-container style="height: calc(100% - 40px)">
-      <yvan-print-aside class="yvan-print-designer-aside" width="auto">
+      <yvan-print-aside class="yvan-print-designer-left" width="auto">
         <yvan-print-designer-left :show-right.sync="defaultExpendAside"/>
       </yvan-print-aside>
       <yvan-print-main class="yvan-print-designer-main">
@@ -43,7 +43,7 @@
           </template>
         </yvan-print-designer-main>
       </yvan-print-main>
-      <yvan-print-aside class="yvan-print-designer-aside" width="auto">
+      <yvan-print-aside class="yvan-print-designer-right" width="auto">
         <yvan-print-designer-right :show-right.sync="defaultExpendAside"/>
       </yvan-print-aside>
     </yvan-print-container>
@@ -241,9 +241,9 @@ export default {
     }
   }
 
-  .yvan-print-designer-aside {
-    margin: 10px 5px 10px 10px;
-    height: calc(100% - 20px);
+  .yvan-print-designer-left {
+    margin: 5px;
+    height: calc(100% - 10px);
   }
 
   .yvan-print-designer-main {
@@ -252,5 +252,10 @@ export default {
     overflow: auto;
     padding: 0;
   }
+
+  .yvan-print-designer-right {
+    margin: 5px;
+    height: calc(100% - 10px);
+  }
 }
 </style>

src/store/global.ts

@@ -54,8 +54,6 @@ export const globalStore = defineStore('global', {
             // 如果没点中组件，并且在画布空白处弹起鼠标，则取消当前组件的选中状态
             isClickComponent: false,
             isInEdiotr: false,
-            globalCount: 0,
-            paletteCount: 0,
             curTableSettingId: null
         }
     },
@@ -213,14 +211,6 @@ export const globalStore = defineStore('global', {
                 state.componentData.splice(index, 1)
             }
         },
-
-        setGlobalCount(state) {
-            state.globalCount++
-        },
-
-        setPaletteCount(state) {
-            state.paletteCount++
-        }
     },
     getters: {}
 })

src/utils/system.ts

@@ -1,4 +1,7 @@
+import {h} from "vue";
 import {nanoid} from "nanoid";
+import {ElIcon} from "element-plus";
+import * as FaIcon from '@vicons/fa';
 import Toast from "@/components/yvan-ui/yvan-print-toast"
 import Dialog from "@/components/yvan-ui/yvan-print-dialog"
 
@@ -19,6 +22,14 @@ export default class System {
     public static showDialog(componentName: any, props: DialogProps): Promise<any> {
         return Dialog({componentName, ...props})
     }
+
+    public static renderIcon(iconName: string): any {
+        if(!iconName){
+            return
+        }
+        iconName = iconName.substring("fa ".length);
+        return () => h(ElIcon, null, {default: () => h(FaIcon[iconName])});
+    }
 }
 
 interface DialogProps {