fix: update

auto-imports.d.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const ElLoading: typeof import('element-plus/es')['ElLoading']
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
+}

components.d.ts

@@ -0,0 +1,30 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    CodeViewer: typeof import('./src/components/view_file/vendors/text/CodeViewer.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
+    ImageViewer: typeof import('./src/components/view_file/vendors/image/ImageViewer.vue')['default']
+    Other: typeof import('./src/components/view_file/vendors/other/index.vue')['default']
+    PdfView: typeof import('./src/components/view_file/vendors/pdf/PdfView.vue')['default']
+    PPT: typeof import('./src/components/view_file/vendors/pptx/PPT.vue')['default']
+    PPT2: typeof import('./src/components/view_file/vendors/pptx/PPT2.vue')['default']
+    PPT3: typeof import('./src/components/view_file/vendors/pptx/PPT3.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Table: typeof import('./src/components/view_file/vendors/xlsx/Table.vue')['default']
+    View_file: typeof import('./src/components/view_file/index.vue')['default']
+  }
+}

package.json

@@ -1,22 +1,33 @@
 {
-  "name": "wisdomcity-office",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "vue": "^3.5.13",
-    "vue-router": "4"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.2",
-    "@vue/tsconfig": "^0.7.0",
-    "typescript": "~5.7.2",
-    "vite": "^6.3.1",
-    "vue-tsc": "^2.2.8"
-  }
-}
+    "name": "wisdomcity-office",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vue-tsc -b && vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "docx-preview": "0.3.5",
+        "element-plus": "^2.9.8",
+        "exceljs": "4.4.0",
+        "html2canvas": "1.4.1",
+        "lodash-es": "^4.17.21",
+        "pdfjs-dist": "^5.1.91",
+        "tinycolor2": "1.6.0",
+        "vue": "^3.5.13",
+        "vue-router": "4",
+        "x-data-spreadsheet": "^1.1.9"
+    },
+    "devDependencies": {
+        "@vitejs/plugin-vue": "^5.2.2",
+        "@vue/tsconfig": "^0.7.0",
+        "less": "^4.3.0",
+        "typescript": "~5.7.2",
+        "unplugin-auto-import": "^19.1.2",
+        "unplugin-vue-components": "^28.5.0",
+        "vite": "^6.3.1",
+        "vue-tsc": "^2.2.8"
+    }
+}

src/comm_js/index.js

@@ -0,0 +1,120 @@
+/*
+ * @Author: ChenYaJin
+ * @Date: 2021-06-08 16:11:26
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-24 15:46:55
+ * @Description: 文件柜-公用方法
+ */
+
+const inventoryCodeName = new Map([
+    ['qualityInspection', '巡查'],
+    ['securityPatrol', '巡逻'],
+    ['deviceInspection', '巡检'],
+    ['deviceCuring', '保养'],
+    ['deviceMaintain', '维修'],
+    ['cleaningWork', '保洁'],
+    ['greeningWork', '绿化']
+  ])
+  
+  export { inventoryCodeName }
+  
+  export default {
+    // 根据子节点id,找出父节点列表
+    getParentList (data, id) {
+      let childList = []
+      data.forEach((item, index) => {
+        if (item.id === id) {
+          childList = [item.label]
+          return false
+        } else {
+          if (item.children) {
+            let newCidList = [item.label]
+            let list = this.nodeFun(item.children, id, newCidList)
+            if (list) {
+              childList = list
+            }
+          }
+        }
+      })
+      return childList
+    },
+    nodeFun (newVal, newId, newCidList) {
+      let flag = false
+      newVal.forEach(j => {
+        if (j.id === newId) {
+          newCidList.push(j.label)
+          flag = true
+        } else {
+          if (j.children) {
+            let childList = JSON.parse(JSON.stringify(newCidList))
+            childList.push(j.label)
+            let list = this.nodeFun(j.children, newId, childList)
+            if (list) {
+              newCidList = list
+              flag = true
+            }
+          }
+        }
+      })
+      if (flag) {
+        return newCidList
+      }
+    },
+    /**
+     * 渲染文字水印背景
+     * @{Element} targetElement 目标元素
+     * @{params} text 水印字符串
+     */
+    addWaterMarker (targetElement, text = '') {
+      var cpyName = text
+      if (text && text.length > 16) {
+        cpyName = text.substring(0, 16)
+      }
+      var can = document.createElement('canvas')
+      can.width = 180
+      can.height = 110
+      can.style.display = 'none'
+      can.style.zIndex = '999999'
+  
+      var cans = can.getContext('2d')
+      cans.rotate(-25 * Math.PI / 180)
+      cans.font = '800 16px Microsoft JhengHei'
+      cans.fillStyle = '#dcdee2'
+      cans.textAlign = 'center'
+      cans.textBaseline = 'Middle'
+      if (cans.measureText(cpyName).width > 180) {
+        var size = 180 / cpyName.length
+        cans.font = '600 ' + size + 'px ' + ' Microsoft JhengHei'
+      }
+      cans.fillText(cpyName, 60, 60)
+      targetElement.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
+    },
+    /**
+     * 时间格式转换
+     * @param {string | Date} dateString 时间
+     * @returns {string} yyyy年mm月ddr日
+     */
+    dateFormat (dateString) {
+      const year = new Date(dateString).getFullYear()
+      const month = new Date(dateString).getMonth() + 1
+      const day = new Date(dateString).getDate()
+      return `${year}年${month}月${day}日`
+    },
+    /**
+     * 文件大小【KB】转换
+     * @param {number} size KB大小
+     * @param {string} defaultUnit size=0时，默认的单位
+     * @returns {string}
+     */
+    fileSizeFormat (size, defaultUnit = ' KB') {
+      const kbToGb = 1048576
+      const kbToMb = 1024
+      const isNegative = Number(size) < 0
+      const positiveSize = Math.abs(size)
+      const positiveFormat = Number(positiveSize) >= kbToGb ? Math.floor((Number(positiveSize) / kbToGb * 100)) / 100 + ' GB'
+        : Number(positiveSize) >= kbToMb ? Math.floor((Number(positiveSize) / kbToMb * 100)) / 100 + ' MB'
+          : positiveSize + ' KB'
+      const format = isNegative ? '-' + positiveFormat : positiveFormat
+      return positiveSize ? format : 0 + defaultUnit
+    }
+  }

src/components/view_file/assets/excel_icon.svg

@@ -0,0 +1,35 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="56px" height="56px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="8px" width="35px" height="35px"  >
+                <feOffset in="SourceAlpha" dx="0.5" dy="0.866" />
+                <feGaussianBlur result="blurOut" stdDeviation="2" />
+                <feFlood flood-color="rgb(15, 140, 18)" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="blurOut" />
+                <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+                <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+            </filter>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(52, 201, 55)"
+ d="M52.000,56.000 L12.000,56.000 C9.791,56.000 8.000,54.209 8.000,52.000 L8.000,4.000 C8.000,1.791 9.791,-0.000 12.000,-0.000 L41.000,-0.000 L56.000,14.000 L56.000,52.000 C56.000,54.209 54.209,56.000 52.000,56.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(40, 182, 42)"
+ d="M8.000,14.000 L56.000,14.000 L56.000,28.000 L8.000,28.000 L8.000,14.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(22, 159, 25)"
+ d="M8.000,28.000 L56.000,28.000 L56.000,42.000 L8.000,42.000 L8.000,28.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(15, 132, 16)"
+ d="M8.000,42.000 L56.000,42.000 L56.000,52.000 C56.000,54.209 54.209,56.000 52.000,56.000 L12.000,56.000 C9.791,56.000 8.000,54.209 8.000,52.000 L8.000,42.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(102, 241, 104)"
+ d="M41.000,-0.000 L41.000,10.000 C41.000,12.209 42.791,14.000 45.000,14.000 L56.000,14.000 L41.000,-0.000 Z"/>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(15, 132, 16)"
+ d="M6.000,10.000 L26.000,10.000 C28.209,10.000 30.000,11.791 30.000,14.000 L30.000,34.000 C30.000,36.209 28.209,38.000 26.000,38.000 L6.000,38.000 C3.791,38.000 2.000,36.209 2.000,34.000 L2.000,14.000 C2.000,11.791 3.791,10.000 6.000,10.000 Z"/>
+</g>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M8.571,31.900 L10.528,31.900 L12.474,31.900 L15.583,26.463 L18.681,31.900 L20.657,31.900 L22.622,31.900 L17.466,23.661 L22.278,16.109 L20.374,16.109 L18.470,16.109 L15.594,21.202 L12.819,16.109 L10.861,16.109 L8.915,16.109 L13.685,23.908 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 L8.571,31.900 Z"/>
+</svg>

src/components/view_file/assets/exe_icon.svg

@@ -0,0 +1,34 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="56px" height="56px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="30px" width="47px" height="23px"  >
+                <feOffset in="SourceAlpha" dx="0.5" dy="0.866" />
+                <feGaussianBlur result="blurOut" stdDeviation="2" />
+                <feFlood flood-color="rgb(17, 148, 160)" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="blurOut" />
+                <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+                <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+            </filter>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(0, 210, 230)"
+ d="M52.000,56.000 L12.000,56.000 C9.791,56.000 8.000,54.209 8.000,52.000 L8.000,4.000 C8.000,1.791 9.791,-0.000 12.000,-0.000 L41.000,-0.000 L56.000,14.000 L56.000,3.999 C56.000,3.999 56.000,4.000 56.000,4.000 L56.000,52.000 C56.000,54.209 54.209,56.000 52.000,56.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(141, 245, 255)"
+ d="M41.000,-0.000 L41.000,10.000 C41.000,12.209 42.791,14.000 45.000,14.000 L56.000,14.000 L41.000,-0.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(140, 245, 255)"
+ d="M31.928,15.193 C31.857,15.568 31.476,15.944 31.088,16.027 L30.813,16.087 C30.122,16.282 29.501,16.721 29.113,17.361 C28.725,17.997 28.637,18.721 28.803,19.384 L28.887,19.652 C29.004,20.018 28.852,20.517 28.545,20.761 C28.545,20.761 28.274,20.983 27.498,21.408 C26.722,21.830 26.383,21.947 26.383,21.947 C26.006,22.078 25.473,21.954 25.202,21.676 L25.008,21.479 C24.486,21.006 23.777,20.714 22.997,20.714 C22.218,20.714 21.512,21.003 20.987,21.475 L20.793,21.673 C20.518,21.951 19.989,22.075 19.611,21.944 C19.611,21.944 19.276,21.830 18.500,21.405 C17.724,20.979 17.449,20.758 17.449,20.758 C17.142,20.510 16.991,20.011 17.107,19.649 L17.188,19.391 C17.357,18.724 17.266,17.997 16.878,17.357 C16.490,16.714 15.869,16.278 15.178,16.084 L14.903,16.024 C14.511,15.940 14.134,15.565 14.064,15.190 C14.064,15.190 14.000,14.854 14.000,14.004 C14.000,13.152 14.064,12.817 14.064,12.817 C14.134,12.442 14.515,12.067 14.903,11.983 L15.185,11.923 C15.876,11.729 16.493,11.293 16.881,10.653 C17.269,10.013 17.358,9.289 17.192,8.623 L17.107,8.358 C16.991,7.993 17.143,7.497 17.449,7.252 C17.449,7.252 17.721,7.031 18.497,6.602 C19.273,6.180 19.611,6.063 19.611,6.063 C19.989,5.932 20.521,6.056 20.793,6.334 L20.990,6.535 C21.512,7.007 22.221,7.296 22.997,7.296 C23.773,7.296 24.475,7.011 24.997,6.542 L25.202,6.334 C25.477,6.056 26.006,5.932 26.383,6.063 C26.383,6.063 26.718,6.180 27.494,6.602 C28.270,7.028 28.545,7.249 28.545,7.249 C28.852,7.497 29.003,7.996 28.887,8.358 L28.795,8.619 C28.626,9.286 28.718,10.013 29.106,10.653 C29.494,11.290 30.104,11.722 30.792,11.919 L31.084,11.983 C31.476,12.067 31.853,12.445 31.924,12.817 C31.924,12.817 31.987,13.152 31.991,14.007 C31.991,14.858 31.928,15.193 31.928,15.193 ZM22.891,10.375 C20.949,10.375 19.375,11.942 19.375,13.875 C19.375,15.808 20.949,17.375 22.891,17.375 C24.832,17.375 26.406,15.808 26.406,13.875 C26.406,11.942 24.832,10.375 22.891,10.375 Z"/>
+<path fill-rule="evenodd"  fill="rgb(140, 245, 255)"
+ d="M49.915,32.642 C49.821,33.158 49.313,33.674 48.796,33.789 L48.429,33.872 C47.507,34.139 46.679,34.743 46.162,35.622 C45.644,36.498 45.527,37.492 45.748,38.404 L45.861,38.773 C46.016,39.275 45.814,39.961 45.404,40.297 C45.404,40.297 45.042,40.602 44.008,41.186 C42.973,41.767 42.521,41.928 42.521,41.928 C42.018,42.108 41.308,41.937 40.946,41.555 L40.687,41.283 C39.991,40.633 39.046,40.233 38.006,40.233 C36.967,40.233 36.026,40.629 35.325,41.278 L35.067,41.550 C34.700,41.932 33.994,42.103 33.491,41.923 C33.491,41.923 33.044,41.767 32.009,41.182 C30.975,40.597 30.608,40.293 30.608,40.293 C30.199,39.952 29.996,39.266 30.152,38.768 L30.260,38.413 C30.485,37.497 30.363,36.498 29.846,35.618 C29.329,34.733 28.501,34.135 27.579,33.868 L27.212,33.785 C26.690,33.670 26.187,33.154 26.093,32.638 C26.093,32.638 26.008,32.177 26.008,31.007 C26.008,29.837 26.093,29.377 26.093,29.377 C26.187,28.861 26.695,28.345 27.212,28.230 L27.588,28.147 C28.510,27.880 29.333,27.281 29.851,26.401 C30.368,25.522 30.486,24.527 30.264,23.610 L30.152,23.246 C29.997,22.744 30.199,22.063 30.608,21.727 C30.608,21.727 30.970,21.423 32.005,20.833 C33.040,20.253 33.491,20.091 33.491,20.091 C33.994,19.912 34.704,20.082 35.067,20.465 L35.330,20.741 C36.026,21.390 36.971,21.786 38.006,21.786 C39.041,21.786 39.977,21.395 40.673,20.750 L40.946,20.465 C41.313,20.082 42.018,19.912 42.521,20.091 C42.521,20.091 42.968,20.253 44.003,20.833 C45.038,21.418 45.404,21.722 45.404,21.722 C45.813,22.063 46.016,22.749 45.861,23.246 L45.738,23.606 C45.512,24.522 45.635,25.522 46.152,26.401 C46.669,27.277 47.483,27.871 48.400,28.142 L48.791,28.230 C49.313,28.345 49.816,28.866 49.910,29.377 C49.910,29.377 49.995,29.837 50.000,31.012 C50.000,32.182 49.915,32.642 49.915,32.642 ZM37.719,26.562 C34.940,26.562 32.688,28.752 32.688,31.453 C32.688,34.154 34.940,36.344 37.719,36.344 C40.497,36.344 42.750,34.154 42.750,31.453 C42.750,28.752 40.497,26.562 37.719,26.562 Z"/>
+<path fill-rule="evenodd"  fill="rgb(0, 165, 189)"
+ d="M8.000,38.000 L56.000,38.000 L56.000,52.000 C56.000,54.209 54.209,56.000 52.000,56.000 L12.000,56.000 C9.791,56.000 8.000,54.209 8.000,52.000 L8.000,38.000 Z"/>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(0, 175, 201)"
+ d="M5.000,32.000 L39.000,32.000 C40.657,32.000 42.000,33.343 42.000,35.000 L42.000,45.000 C42.000,46.657 40.657,48.000 39.000,48.000 L5.000,48.000 C3.343,48.000 2.000,46.657 2.000,45.000 L2.000,35.000 C2.000,33.343 3.343,32.000 5.000,32.000 Z"/>
+</g>
+<text kerning="auto" font-family="Adobe Heiti Std" fill="rgb(0, 0, 0)" font-size="12px" x="9px" y="45.0619999999999px"><tspan font-size="12px" font-family="Hiragino Sans GB" fill="#FFFFFF">EXE</tspan></text>
+</svg>

src/components/view_file/assets/folder_icon.svg

@@ -0,0 +1,54 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="52px" height="54px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="7px" y="3px" width="45px" height="45px"  >
+                <feOffset in="SourceAlpha" dx="1" dy="1.732" />
+                <feGaussianBlur result="blurOut" stdDeviation="1.732" />
+                <feFlood flood-color="rgb(255, 189, 32)" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="blurOut" />
+                <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+                <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+            </filter>
+<filter filterUnits="userSpaceOnUse" id="Filter_1" x="5px" y="12px" width="45px" height="37px"  >
+                <feOffset in="SourceAlpha" dx="1" dy="1.732" />
+                <feGaussianBlur result="blurOut" stdDeviation="1.732" />
+                <feFlood flood-color="rgb(255, 189, 32)" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="blurOut" />
+                <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+                <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+            </filter>
+<linearGradient id="PSgrad_0" x1="0%" x2="0%" y1="100%" y2="0%">
+  <stop offset="38%" stop-color="rgb(39,145,255)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(82,167,255)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_1" x1="0%" x2="0%" y1="100%" y2="0%">
+  <stop offset="0%" stop-color="rgb(255,189,32)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(254,230,149)" stop-opacity="1" />
+</linearGradient>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(255, 189, 32)"
+ d="M5.000,-0.000 L41.000,-0.000 C46.523,-0.000 51.000,4.477 51.000,10.000 L51.000,50.000 C51.000,52.209 49.209,54.000 47.000,54.000 L17.000,54.000 C8.163,54.000 1.000,46.836 1.000,38.000 L1.000,4.000 C1.000,1.791 2.791,-0.000 5.000,-0.000 Z"/>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(36, 240, 255)"
+ d="M18.427,3.922 L39.677,9.616 C45.012,11.045 48.178,16.529 46.748,21.863 L42.089,39.250 C41.518,41.384 39.324,42.650 37.190,42.078 L15.940,36.384 C10.605,34.955 7.440,29.471 8.869,24.137 L13.528,6.750 C14.099,4.616 16.293,3.350 18.427,3.922 Z"/>
+</g>
+<g filter="url(#Filter_1)">
+<path fill-rule="evenodd"  fill="url(#PSgrad_0)"
+ d="M10.000,12.000 L36.000,12.000 C41.523,12.000 46.000,16.477 46.000,22.000 L46.000,40.000 C46.000,42.209 44.209,44.000 42.000,44.000 L16.000,44.000 C10.477,44.000 6.000,39.523 6.000,34.000 L6.000,16.000 C6.000,13.791 7.791,12.000 10.000,12.000 Z"/>
+</g>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M38.500,29.000 L18.500,29.000 C17.672,29.000 17.000,28.328 17.000,27.500 C17.000,26.671 17.672,26.000 18.500,26.000 L38.500,26.000 C39.328,26.000 40.000,26.671 40.000,27.500 C40.000,28.328 39.328,29.000 38.500,29.000 ZM28.500,23.000 L18.500,23.000 C17.672,23.000 17.000,22.328 17.000,21.500 C17.000,20.671 17.672,20.000 18.500,20.000 L28.500,20.000 C29.328,20.000 30.000,20.671 30.000,21.500 C30.000,22.328 29.328,23.000 28.500,23.000 ZM12.500,29.000 C11.672,29.000 11.000,28.328 11.000,27.500 C11.000,26.671 11.672,26.000 12.500,26.000 C13.328,26.000 14.000,26.671 14.000,27.500 C14.000,28.328 13.328,29.000 12.500,29.000 ZM12.500,23.000 C11.672,23.000 11.000,22.328 11.000,21.500 C11.000,20.671 11.672,20.000 12.500,20.000 C13.328,20.000 14.000,20.671 14.000,21.500 C14.000,22.328 13.328,23.000 12.500,23.000 Z"/>
+<path fill-rule="evenodd"  opacity="0.522" fill="rgb(66, 124, 190)"
+ d="M4.174,43.000 C3.423,41.146 3.000,39.123 3.000,37.000 L3.000,33.000 L39.000,33.000 C44.523,33.000 49.000,37.477 49.000,43.000 L49.000,43.000 L4.174,43.000 Z"/>
+<path fill-rule="evenodd"  fill="url(#PSgrad_1)"
+ d="M1.000,34.000 L41.000,34.000 C46.523,34.000 51.000,38.477 51.000,44.000 L51.000,50.000 C51.000,52.209 49.209,54.000 47.000,54.000 L17.000,54.000 C8.163,54.000 1.000,46.836 1.000,38.000 L1.000,34.000 Z"/>
+</svg>

src/components/view_file/assets/image_icon.svg

@@ -0,0 +1,13 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="48px" height="50px">
+<path fill-rule="evenodd"  fill="rgb(0, 132, 228)"
+ d="M7.990,-0.010 L39.990,-0.010 C44.408,-0.010 47.990,3.572 47.990,7.990 L47.990,39.990 C47.990,45.513 43.513,49.990 37.990,49.990 L9.990,49.990 C4.467,49.990 -0.010,45.513 -0.010,39.990 L-0.010,7.990 C-0.010,3.572 3.572,-0.010 7.990,-0.010 Z"/>
+<path fill-rule="evenodd"  fill="rgb(253, 204, 15)"
+ d="M30.994,8.990 C34.857,8.990 37.988,12.124 37.988,15.990 C37.988,19.856 34.857,22.990 30.994,22.990 C27.131,22.990 24.000,19.856 24.000,15.990 C24.000,12.124 27.131,8.990 30.994,8.990 Z"/>
+<path fill-rule="evenodd"  fill="rgb(235, 120, 38)"
+ d="M47.990,27.493 L47.990,41.990 C47.990,46.408 44.408,49.990 39.990,49.990 L9.635,49.990 C16.426,44.704 21.485,39.558 21.485,39.558 C36.963,26.952 42.758,27.029 42.758,27.029 C44.861,27.029 46.584,27.222 47.990,27.493 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 160, 76)"
+ d="M39.990,49.990 L7.990,49.990 C3.572,49.990 -0.010,46.408 -0.010,41.990 L-0.010,23.374 C4.394,22.284 8.236,23.719 11.000,25.029 C15.711,27.263 22.434,34.813 28.000,37.020 C37.289,40.701 47.882,38.048 47.990,38.021 L47.990,41.990 C47.990,46.408 44.408,49.990 39.990,49.990 Z"/>
+</svg>

src/components/view_file/assets/other_icon.svg

@@ -0,0 +1,29 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="46px" height="56px">
+<defs>
+<linearGradient id="PSgrad_0" x1="57.358%" x2="0%" y1="0%" y2="81.915%">
+  <stop offset="0%" stop-color="rgb(255,255,255)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(237,145,0)" stop-opacity="1" />
+</linearGradient>
+<filter id="Filter_0">
+                <feFlood flood-color="rgb(255, 255, 255)" flood-opacity="1" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="SourceGraphic" result="compOut" />
+                <feBlend mode="normal" in="compOut" in2="SourceGraphic" />
+            </filter>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(255, 225, 179)"
+ d="M10.000,0.000 L42.000,0.000 C44.209,0.000 46.000,1.791 46.000,4.000 L46.000,46.000 C46.000,48.209 44.209,50.000 42.000,50.000 L10.000,50.000 C7.791,50.000 6.000,48.209 6.000,46.000 L6.000,4.000 C6.000,1.791 7.791,0.000 10.000,0.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 180, 50)"
+ d="M38.000,56.000 L4.000,56.000 C1.791,56.000 -0.000,54.209 -0.000,52.000 L-0.000,9.000 C-0.000,6.791 1.791,5.000 4.000,5.000 L25.000,5.000 L42.000,19.000 L42.000,8.999 C42.000,8.999 42.000,9.000 42.000,9.000 L42.000,52.000 C42.000,54.209 40.209,56.000 38.000,56.000 Z"/>
+<path fill-rule="evenodd"  opacity="0.831" fill="rgb(237, 153, 33)"
+ d="M27.000,9.000 L27.000,19.000 C27.000,21.209 28.791,23.000 31.000,23.000 L42.000,23.000 L42.000,19.000 L27.000,9.000 Z"/>
+<path fill-rule="evenodd"  fill="url(#PSgrad_0)"
+ d="M25.000,5.000 L25.000,15.000 C25.000,17.209 26.791,19.000 29.000,19.000 L42.000,19.000 L25.000,5.000 Z"/>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(215, 154, 47)"
+ d="M24.000,32.513 C23.275,33.154 23.000,34.561 23.000,36.000 C23.000,36.762 23.000,36.477 23.000,37.000 L19.000,37.000 C19.031,36.706 19.000,35.000 19.000,35.000 C19.000,33.587 19.284,32.546 19.979,31.630 C20.499,30.950 20.698,30.766 22.310,29.641 C23.897,28.542 24.492,27.705 24.492,26.528 C24.492,24.958 22.959,24.000 21.000,24.000 C18.005,24.000 17.477,26.519 17.306,27.105 C17.056,27.971 16.566,28.850 15.653,28.850 C14.740,28.850 14.000,28.069 14.000,27.105 C14.000,24.216 16.289,21.000 21.439,21.000 C25.509,21.000 28.013,23.720 28.013,26.501 C28.013,29.587 25.449,31.251 24.000,32.513 ZM23.000,43.000 L19.000,43.000 L19.000,39.000 L23.000,39.000 L23.000,43.000 Z"/>
+</g>
+</svg>

src/components/view_file/assets/pdf_icon.svg

@@ -0,0 +1,46 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="56px" height="56px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="19px" y="4px" width="31px" height="31px"  >
+                <feOffset in="SourceAlpha" dx="0.5" dy="0.866" />
+                <feGaussianBlur result="blurOut" stdDeviation="1.414" />
+                <feFlood flood-color="rgb(195, 0, 0)" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="blurOut" />
+                <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+                <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+            </filter>
+<filter filterUnits="userSpaceOnUse" id="Filter_1" x="0px" y="33px" width="47px" height="23px"  >
+                <feOffset in="SourceAlpha" dx="0.5" dy="0.866" />
+                <feGaussianBlur result="blurOut" stdDeviation="2" />
+                <feFlood flood-color="rgb(160, 17, 17)" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="blurOut" />
+                <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+                <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+            </filter>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(244, 64, 64)"
+ d="M52.000,56.000 L12.000,56.000 C9.791,56.000 8.000,54.209 8.000,52.000 L8.000,4.000 C8.000,1.791 9.791,-0.000 12.000,-0.000 L41.000,-0.000 L56.000,14.000 L56.000,52.000 C56.000,54.209 54.209,56.000 52.000,56.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 125, 125)"
+ d="M41.000,-0.000 L41.000,10.000 C41.000,12.209 42.791,14.000 45.000,14.000 L56.000,14.000 L41.000,-0.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(160, 7, 7)"
+ d="M8.000,42.000 L56.000,42.000 L56.000,52.000 C56.000,54.209 54.209,56.000 52.000,56.000 L12.000,56.000 C9.791,56.000 8.000,54.209 8.000,52.000 L8.000,42.000 Z"/>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M46.513,22.024 C45.672,21.119 43.991,20.607 41.588,20.607 C40.297,20.607 38.825,20.728 37.203,21.029 C36.303,20.125 35.372,19.070 34.501,17.834 C33.870,16.960 33.329,16.056 32.849,15.152 C33.810,12.168 34.260,9.757 34.260,8.008 C34.260,6.049 33.570,4.000 31.527,4.000 C30.897,4.000 30.296,4.392 29.966,4.934 C29.065,6.592 29.455,10.209 31.047,13.765 C30.446,15.544 29.846,17.261 29.065,19.160 C28.404,20.758 27.623,22.446 26.812,23.953 C22.248,25.821 19.304,27.991 19.034,29.679 C18.914,30.312 19.124,30.915 19.575,31.367 C19.725,31.488 20.325,32.000 21.317,32.000 C24.350,32.000 27.533,26.997 29.155,23.953 C30.386,23.531 31.648,23.139 32.879,22.777 C34.230,22.385 35.612,22.084 36.843,21.873 C40.026,24.796 42.849,25.279 44.261,25.279 C46.003,25.279 46.633,24.555 46.844,23.953 C47.174,23.199 46.934,22.355 46.543,21.903 L46.513,22.024 ZM44.892,23.259 C44.772,23.892 44.141,24.314 43.270,24.314 C43.030,24.314 42.819,24.284 42.579,24.224 C40.988,23.832 39.516,23.018 38.014,21.752 C39.486,21.511 40.717,21.451 41.498,21.451 C42.369,21.451 43.120,21.481 43.600,21.632 C44.171,21.752 45.072,22.144 44.892,23.259 L44.892,23.259 ZM36.092,21.270 C35.011,21.481 33.870,21.752 32.669,22.084 C31.708,22.355 30.717,22.626 29.725,22.988 C30.266,21.933 30.717,20.908 31.137,19.944 C31.648,18.738 32.038,17.533 32.458,16.387 C32.879,17.111 33.329,17.834 33.780,18.467 C34.531,19.462 35.311,20.426 36.092,21.270 L36.092,21.270 ZM30.656,5.447 C30.837,5.115 31.167,4.934 31.437,4.934 C32.308,4.934 32.458,5.959 32.458,6.773 C32.458,8.129 32.038,10.209 31.347,12.590 C30.146,9.274 30.056,6.532 30.656,5.447 L30.656,5.447 ZM26.122,25.249 C24.019,28.805 21.977,31.035 20.746,31.035 C20.506,31.035 20.296,30.945 20.115,30.824 C19.875,30.583 19.755,30.282 19.815,29.920 C20.055,28.654 22.428,26.876 26.122,25.249 L26.122,25.249 Z"/>
+</g>
+<g filter="url(#Filter_1)">
+<path fill-rule="evenodd"  fill="rgb(194, 27, 27)"
+ d="M5.000,35.000 L39.000,35.000 C40.657,35.000 42.000,36.343 42.000,38.000 L42.000,48.000 C42.000,49.657 40.657,51.000 39.000,51.000 L5.000,51.000 C3.343,51.000 2.000,49.657 2.000,48.000 L2.000,38.000 C2.000,36.343 3.343,35.000 5.000,35.000 Z"/>
+</g>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M30.873,39.636 L30.873,41.919 L35.276,41.919 L35.276,42.780 L35.276,43.648 L30.873,43.648 L30.873,47.900 L29.827,47.900 L28.775,47.900 L28.775,37.852 L35.925,37.852 L35.925,38.740 L35.925,39.636 L30.873,39.636 ZM22.793,47.900 L19.710,47.900 L18.664,47.900 L18.664,37.852 L19.710,37.852 L22.964,37.852 C24.345,37.852 25.394,38.257 26.112,39.068 C26.830,39.880 27.189,41.067 27.189,42.630 C27.189,44.352 26.816,45.662 26.071,46.557 C25.326,47.453 24.233,47.900 22.793,47.900 ZM24.495,40.364 C24.099,39.842 23.502,39.581 22.704,39.581 L20.763,39.581 L20.763,46.171 L22.533,46.171 C23.385,46.171 24.025,45.883 24.451,45.306 C24.877,44.730 25.090,43.865 25.090,42.712 C25.090,41.668 24.892,40.886 24.495,40.364 ZM13.530,44.311 C12.719,44.307 12.017,44.311 11.425,44.325 L11.425,47.900 L10.379,47.900 L9.326,47.900 L9.326,37.852 L10.372,37.852 L13.530,37.852 C14.674,37.852 15.545,38.119 16.142,38.655 C16.739,39.190 17.037,39.971 17.037,40.996 C17.037,42.081 16.739,42.904 16.142,43.467 C15.545,44.030 14.674,44.311 13.530,44.311 ZM14.498,39.940 C14.204,39.701 13.763,39.581 13.175,39.581 L11.425,39.581 L11.425,42.582 L13.175,42.582 C13.763,42.582 14.204,42.452 14.498,42.192 C14.792,41.933 14.939,41.541 14.939,41.017 C14.939,40.538 14.792,40.179 14.498,39.940 Z"/>
+</svg>

src/components/view_file/assets/ppt_icon.svg

@@ -0,0 +1,35 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="56px" height="56px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="22px" width="49px" height="29px"  >
+                <feOffset in="SourceAlpha" dx="0.5" dy="0.866" />
+                <feGaussianBlur result="blurOut" stdDeviation="2" />
+                <feFlood flood-color="rgb(160, 68, 17)" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="blurOut" />
+                <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+                <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+            </filter>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(245, 118, 64)"
+ d="M52.000,56.000 L12.000,56.000 C9.791,56.000 8.000,54.209 8.000,52.000 L8.000,4.000 C8.000,1.791 9.791,-0.000 12.000,-0.000 L41.000,-0.000 L56.000,14.000 L56.000,52.000 C56.000,54.209 54.209,56.000 52.000,56.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 164, 125)"
+ d="M41.000,-0.000 L41.000,10.000 C41.000,12.209 42.791,14.000 45.000,14.000 L56.000,14.000 L41.000,-0.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(222, 101, 49)"
+ d="M8.000,14.000 L56.000,14.000 L56.000,28.000 L8.000,28.000 L8.000,14.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(194, 77, 27)"
+ d="M8.000,28.000 L56.000,28.000 L56.000,42.000 L8.000,42.000 L8.000,28.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(161, 61, 18)"
+ d="M8.000,42.000 L56.000,42.000 L56.000,52.000 C56.000,54.209 54.209,56.000 52.000,56.000 L12.000,56.000 C9.791,56.000 8.000,54.209 8.000,52.000 L8.000,42.000 Z"/>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(161, 61, 18)"
+ d="M6.000,24.000 L40.000,24.000 C42.209,24.000 44.000,25.791 44.000,28.000 L44.000,42.000 C44.000,44.209 42.209,46.000 40.000,46.000 L6.000,46.000 C3.791,46.000 2.000,44.209 2.000,42.000 L2.000,28.000 C2.000,25.791 3.791,24.000 6.000,24.000 Z"/>
+</g>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M34.697,31.455 L34.697,40.900 L33.502,40.900 L32.299,40.900 L32.299,31.455 L28.830,31.455 L28.830,30.439 L28.830,29.416 L38.166,29.416 L38.166,30.432 L38.166,31.455 L34.697,31.455 ZM23.955,36.799 C23.028,36.794 22.226,36.799 21.549,36.814 L21.549,40.900 L20.354,40.900 L19.151,40.900 L19.151,29.416 L20.346,29.416 L23.955,29.416 C25.262,29.416 26.257,29.722 26.940,30.334 C27.622,30.946 27.963,31.838 27.963,33.010 C27.963,34.249 27.622,35.191 26.940,35.834 C26.257,36.477 25.262,36.799 23.955,36.799 ZM25.061,31.803 C24.725,31.529 24.221,31.393 23.549,31.393 L21.549,31.393 L21.549,34.822 L23.549,34.822 C24.221,34.822 24.725,34.674 25.061,34.377 C25.397,34.080 25.565,33.632 25.565,33.033 C25.565,32.486 25.397,32.076 25.061,31.803 ZM13.283,36.799 C12.356,36.794 11.554,36.799 10.877,36.814 L10.877,40.900 L9.682,40.900 L8.479,40.900 L8.479,29.416 L9.674,29.416 L13.283,29.416 C14.591,29.416 15.585,29.722 16.268,30.334 C16.950,30.946 17.291,31.838 17.291,33.010 C17.291,34.249 16.950,35.191 16.268,35.834 C15.585,36.477 14.591,36.799 13.283,36.799 ZM14.389,31.803 C14.053,31.529 13.549,31.393 12.877,31.393 L10.877,31.393 L10.877,34.822 L12.877,34.822 C13.549,34.822 14.053,34.674 14.389,34.377 C14.725,34.080 14.893,33.632 14.893,33.033 C14.893,32.486 14.725,32.076 14.389,31.803 Z"/>
+</svg>

src/components/view_file/assets/video_icon.svg

@@ -0,0 +1,11 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="50px" height="40px">
+<path fill-rule="evenodd"  fill="rgb(45, 140, 240)"
+ d="M8.000,-0.000 L32.000,-0.000 C36.418,-0.000 40.000,3.582 40.000,8.000 L40.000,32.000 C40.000,36.418 36.418,40.000 32.000,40.000 L8.000,40.000 C3.582,40.000 -0.000,36.418 -0.000,32.000 L-0.000,8.000 C-0.000,3.582 3.582,-0.000 8.000,-0.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(241, 208, 80)"
+ d="M16.193,9.993 C15.052,9.993 14.000,10.919 14.000,12.225 L14.000,27.774 C14.000,29.080 15.053,30.006 16.193,30.006 C16.486,30.006 16.785,29.945 17.073,29.814 L28.866,22.387 C29.620,21.782 29.997,20.891 29.997,20.000 C29.997,19.108 29.620,18.217 28.866,17.612 L17.073,10.186 C16.785,10.054 16.486,9.993 16.193,9.993 "/>
+<path fill-rule="evenodd"  fill="rgb(126, 189, 255)"
+ d="M44.920,33.767 L40.000,31.127 L40.000,9.872 L44.920,7.232 C47.218,5.999 50.000,7.663 50.000,10.269 L50.000,30.730 C50.000,33.337 47.218,35.000 44.920,33.767 Z"/>
+</svg>

src/components/view_file/assets/view_off.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1623827680993" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6860" width="128" height="128" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style type="text/css"></style></defs><path d="M971.232 41.216l0.768 0.768a32 32 0 0 1 0 44.96L88.512 982.496a31.808 31.808 0 0 1-41.952 2.944l-3.808-3.424a32 32 0 0 1 0-44.96l169.12-171.36c-58.08-49.28-112.256-114.4-162.592-195.36l-7.84-12.8a65.664 65.664 0 0 1 0-67.84c130.176-215.392 286.656-323.104 469.44-323.104 81.312 0 157.6 21.312 228.8 64l186.56-189.088a31.808 31.808 0 0 1 44.992-0.32zM828.576 297.28c51.584 47.04 100.16 106.72 145.728 179.104l8.096 13.024c12.8 20.96 12.8 47.488 0 68.448-131.68 215.2-288.864 322.784-471.52 322.784-73.152 0-142.08-17.248-206.784-51.712l47.84-48.48a369.888 369.888 0 0 0 158.944 35.296c158.144 0 296.192-94.528 417.088-292.096l-7.68-12.352c-43.424-69.056-89.088-124.96-137.024-168.128l45.312-45.888z m-317.696-65.792c-158.112 0-295.392 94.496-414.848 292.16l7.424 12.064c48.32 77.76 99.552 138.88 153.856 183.904l91.008-92.256a195.776 195.776 0 0 1-29.504-103.744c0-107.552 86.016-194.752 192.128-194.752 37.6 0 72.704 10.976 102.336 29.92l79.424-80.544a373.76 373.76 0 0 0-181.824-46.72z m174.656 210.784c11.264 24.768 17.504 52.32 17.504 81.344 0 107.552-85.984 194.752-192.096 194.752a189.248 189.248 0 0 1-80.256-17.76l50.08-50.784c9.696 2.368 19.776 3.616 30.176 3.616 70.72 0 128.064-58.112 128.064-129.824a131.84 131.84 0 0 0-3.552-30.56l50.08-50.784z m-174.592-48.48c-70.72 0-128.096 58.112-128.096 129.824 0 20.064 4.48 39.04 12.48 56l170.88-173.152a126.144 126.144 0 0 0-55.264-12.672z" fill="#bfbfbf" p-id="6861"></path></svg>

src/components/view_file/assets/word_icon.svg

@@ -0,0 +1,35 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="56px" height="56px">
+<defs>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="0px" y="8px" width="35px" height="35px"  >
+                <feOffset in="SourceAlpha" dx="0.5" dy="0.866" />
+                <feGaussianBlur result="blurOut" stdDeviation="2" />
+                <feFlood flood-color="rgb(15, 66, 140)" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="blurOut" />
+                <feComponentTransfer><feFuncA type="linear" slope="0.75"/></feComponentTransfer>
+                <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+            </filter>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(63, 167, 240)"
+ d="M52.000,56.000 L12.000,56.000 C9.791,56.000 8.000,54.209 8.000,52.000 L8.000,4.000 C8.000,1.791 9.791,-0.000 12.000,-0.000 L41.000,-0.000 L56.000,14.000 L56.000,52.000 C56.000,54.209 54.209,56.000 52.000,56.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(125, 201, 255)"
+ d="M41.000,-0.000 L41.000,10.000 C41.000,12.209 42.791,14.000 45.000,14.000 L56.000,14.000 L41.000,-0.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(45, 121, 207)"
+ d="M8.000,14.000 L56.000,14.000 L56.000,28.000 L8.000,28.000 L8.000,14.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(26, 90, 187)"
+ d="M8.000,28.000 L56.000,28.000 L56.000,42.000 L8.000,42.000 L8.000,28.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(15, 66, 140)"
+ d="M8.000,42.000 L56.000,42.000 L56.000,52.000 C56.000,54.209 54.209,56.000 52.000,56.000 L12.000,56.000 C9.791,56.000 8.000,54.209 8.000,52.000 L8.000,42.000 Z"/>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(22, 76, 178)"
+ d="M6.000,10.000 L26.000,10.000 C28.209,10.000 30.000,11.791 30.000,14.000 L30.000,34.000 C30.000,36.209 28.209,38.000 26.000,38.000 L6.000,38.000 C3.791,38.000 2.000,36.209 2.000,34.000 L2.000,14.000 C2.000,11.791 3.791,10.000 6.000,10.000 Z"/>
+</g>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M12.920,30.900 L14.631,30.900 L16.641,21.408 L16.633,21.408 L18.592,30.900 L20.315,30.900 L22.026,30.900 L25.717,18.150 L24.015,18.150 L22.325,18.150 L20.255,27.537 L20.255,27.537 L18.369,18.150 L16.682,18.150 L15.006,18.150 L13.108,27.514 L13.094,27.514 L11.058,18.150 L9.276,18.150 L7.494,18.150 L11.197,30.900 L11.197,30.900 L11.197,30.900 L11.197,30.900 L11.197,30.900 L11.197,30.900 L11.197,30.900 L11.197,30.900 L12.920,30.900 Z"/>
+</svg>

src/components/view_file/assets/zip_icon.svg

@@ -0,0 +1,24 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="52px" height="48px">
+<defs>
+<linearGradient id="PSgrad_0" x1="0%" x2="0%" y1="100%" y2="0%">
+  <stop offset="0%" stop-color="rgb(0,72,185)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(3,92,232)" stop-opacity="1" />
+</linearGradient>
+
+</defs>
+<path fill-rule="evenodd"  fill="url(#PSgrad_0)"
+ d="M44.000,48.000 L8.000,48.000 C3.582,48.000 -0.000,44.418 -0.000,40.000 L-0.000,8.000 C-0.000,3.582 3.582,0.000 8.000,0.000 L21.254,-0.000 C26.007,-0.000 27.360,4.000 27.360,4.000 L44.000,4.000 C48.418,4.000 52.000,7.582 52.000,12.000 L52.000,40.000 C52.000,44.418 48.418,48.000 44.000,48.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(246, 98, 71)"
+ d="M10.990,8.990 L40.990,8.990 C42.095,8.990 42.990,9.885 42.990,10.990 L42.990,40.990 L8.990,40.990 L8.990,10.990 C8.990,9.885 9.885,8.990 10.990,8.990 Z"/>
+<path fill-rule="evenodd"  fill="rgb(244, 209, 74)"
+ d="M7.990,14.990 L43.990,14.990 C45.095,14.990 45.990,15.885 45.990,16.990 L45.990,37.990 L5.990,37.990 L5.990,16.990 C5.990,15.885 6.885,14.990 7.990,14.990 Z"/>
+<path fill-rule="evenodd"  fill="rgb(82, 221, 234)"
+ d="M5.000,21.000 L47.000,21.000 C48.105,21.000 49.000,21.895 49.000,23.000 L49.000,44.000 L3.000,44.000 L3.000,23.000 C3.000,21.895 3.895,21.000 5.000,21.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M33.000,45.000 L27.000,45.000 L27.000,39.000 L33.000,39.000 L33.000,45.000 ZM21.000,39.000 L21.000,33.000 L27.000,33.000 L27.000,39.000 L21.000,39.000 ZM21.000,21.000 L27.000,21.000 L27.000,27.000 L21.000,27.000 L21.000,21.000 ZM21.000,9.000 L27.000,9.000 L27.000,15.000 L21.000,15.000 L21.000,9.000 ZM33.000,15.000 L33.000,21.000 L27.000,21.000 L27.000,15.000 L33.000,15.000 ZM33.000,27.000 L33.000,33.000 L27.000,33.000 L27.000,27.000 L33.000,27.000 Z"/>
+<path fill-rule="evenodd"  fill="rgb(22, 136, 255)"
+ d="M51.878,26.000 L44.582,26.000 C41.168,26.000 38.103,28.090 36.857,31.268 L36.174,33.006 C35.466,34.812 33.724,36.000 31.784,36.000 L20.216,36.000 C18.276,36.000 16.534,34.812 15.825,33.006 L15.143,31.268 C13.897,28.090 10.831,26.000 7.418,26.000 L-0.000,26.000 L-0.000,40.000 C-0.000,44.400 3.600,48.000 8.000,48.000 L44.000,48.000 C48.400,48.000 52.000,44.400 52.000,40.000 L52.000,26.122 C52.000,26.055 51.945,26.000 51.878,26.000 Z"/>
+</svg>

src/components/view_file/index.less

@@ -0,0 +1,34 @@
+.preview-wrapper {
+  padding: 20px 40px;
+  height: ~"calc(100vh - 320px)";
+  width: 100%;
+  overflow: scroll;
+  .loading-process {
+    width: 50%;
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    left: 50%;
+    .load-text {
+      line-height: 28px;
+    }
+  }
+  .preview-inner {
+    width: 100%;
+    height: fit-content;
+    position: relative;
+    .preview-mark {
+      position: fixed;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 999;
+      opacity: 0.7;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
+  .error-wrapper {
+    height: 100%;
+  }
+}

src/components/view_file/index.vue

@@ -0,0 +1,230 @@
+<template>
+  <div class="container">
+    <div class="modal-height">
+      <div class="file-box">
+        <p class="file-name" v-show="!renderLoading">{{ file.filename }}</p>
+        <div class="view-wrapper">
+          <div class="preview-wrapper" ref="wrapper" v-if="isAbleView">
+            <div class="preview-inner" ref="preview-inner">
+              <div class="preview-mark" ref="bg-mark" id="bg-mark"></div>
+              <div class="loading-container" v-show="renderLoading">
+                <div class="loading-spinner">
+                  <svg viewBox="0 0 50 50" class="circular">
+                    <circle cx="25" cy="25" r="20" fill="none" class="path"></circle>
+                  </svg>
+                </div>
+              </div>
+              <div class="output" v-show="!renderLoading" ref="output"></div>
+            </div>
+          </div>
+          <view-other-component
+            v-else-if="file.type && !isAbleView"
+            :file="file"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick } from "vue"
+import commJs from "@/comm_js"
+import { render } from "@/components/view_file/util"
+import ViewOtherComponent from "@/components/view_file/vendors/other/index.vue"
+
+
+const props = defineProps({
+  file: {
+    type: Object,
+    default: () => {
+      return {}
+    },
+  },
+})
+
+const renderLoading = ref(false)
+const output = ref(null)
+
+// 可在在线预览文件类型
+const isAbleView = computed(() => {
+  const lowType = (props.file.type || "").toLowerCase()
+  const typeObject = {
+    doc: ["docx"],
+    xlsx: ["xlsx"],
+    pdf: ["pdf"],
+    ppt: ["pptx"],
+    image: ["gif", "jpg", "jpeg", "bmp", "tiff", "tif", "png", "svg"],
+    text: [
+      "txt",
+      "json",
+      "js",
+      "css",
+      "java",
+      "py",
+      "html",
+      "jsx",
+      "ts",
+      "tsx",
+      "xml",
+      "md",
+      "log",
+    ],
+  }
+  const ablePreviewTypes = Object.values(typeObject).flat()
+  return ablePreviewTypes.includes(lowType)
+})
+
+/**
+ * @{params} buffer 文件字节流
+ * @{params} extend 文件扩展名
+ */
+const renderResult = (buffer, extend) => {
+  if (!output.value) {
+    return Promise.reject(new Error("Output element not found"))
+  }
+  output.value.innerHTML = ""
+  const node = document.createElement("div")
+  const child = output.value.appendChild(node)
+  return new Promise((resolve, reject) =>
+    render(buffer, extend, child).then(resolve).catch(reject)
+  )
+}
+
+watch(
+  () => props.file,
+  (newFile) => {
+    if (newFile && newFile.type) {
+      try {
+        renderLoading.value = true
+        nextTick(() => {
+          renderResult(newFile.fileBuffer, newFile.type).finally(() => {
+            renderLoading.value = false
+          })
+        })
+      } catch (error) {
+        console.warn(error)
+      }
+    }
+  },
+  { immediate: true, deep: true }
+)
+</script>
+
+<style lang="less">
+.container {
+  width: 100%;
+  height: 100%;
+  .docx-wrapper {
+    background: unset !important;
+    padding: 0 !important;
+
+    & > section.docx {
+      background: unset !important;
+    }
+  }
+}
+</style>
+<style lang="less" scoped>
+@import url("./index.less");
+:deep(.header-rewrite) {
+  margin-bottom: 0 !important;
+}
+
+.modal-height {
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  .file-box {
+    flex: 1;
+    padding: 15px 40px;
+    overflow: scroll;
+    text-align: center;
+
+    .file-name {
+      line-height: 36px;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .view-wrapper {
+      position: relative;
+      width: 100%;
+      height: calc(100% - 36px);
+      overflow: hidden;
+      .preview-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        
+        .loading-container {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          z-index: 999;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          
+          .loading-spinner {
+            width: 50px;
+            height: 50px;
+            
+            .circular {
+              animation: rotate 2s linear infinite;
+              height: 100%;
+              transform-origin: center center;
+              width: 100%;
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              margin: auto;
+            }
+            
+            .path {
+              stroke-dasharray: 90, 150;
+              stroke-dashoffset: 0;
+              stroke-width: 4;
+              stroke-miterlimit: 10;
+              stroke: #409eff;
+              stroke-linecap: round;
+              animation: dash 1.5s ease-in-out infinite;
+            }
+          }
+          
+          .loading-text {
+            margin-top: 15px;
+            color: #606266;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+</style>

src/components/view_file/renders.js

@@ -0,0 +1,102 @@
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-04-09 08:10:23
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-15 14:47:12
+ * @Description:
+ */
+import { defaultOptions, renderAsync } from "docx-preview"
+import renderPdf from "./vendors/pdf"
+import renderImage from "./vendors/image"
+import renderText from "./vendors/text"
+import renderPptx from "./vendors/pptx"
+import renderSheet from "./vendors/xlsx"
+// 假装构造一个vue的包装，让上层统一处理销毁和替换节点
+const VueWrapper = (el) => ({
+  $el: el,
+  $destroy() {
+    // 什么也不需要 nothing to do
+  },
+})
+
+const handlers = [
+  // 使用docxjs支持，目前效果最好的渲染器
+  {
+    accepts: ["docx"],
+    handler: async (buffer, target) => {
+      const docxOptions = {
+        ...defaultOptions,
+        ...{
+          debug: true,
+          experimental: true,
+        },
+      }
+      await renderAsync(buffer, target, null, docxOptions)
+      return VueWrapper(target)
+    },
+  },
+  // 使用pptx2html，已通过默认值更替
+  {
+    accepts: ["pptx"],
+    handler: async (buffer, target) => {
+      return renderPptx(buffer, target)
+    },
+  },
+  // 使用sheetjs + handsontable，无样式
+  {
+    accepts: ["xlsx"],
+    handler: async (buffer, target) => {
+      return renderSheet(buffer, target)
+    },
+  },
+  // 使用pdfjs，渲染pdf，效果最好
+  {
+    accepts: ["pdf"],
+    handler: async (buffer, target) => {
+      return renderPdf(buffer, target)
+    },
+  },
+  // 图片过滤器
+  {
+    accepts: ["gif", "jpg", "jpeg", "bmp", "tiff", "tif", "png", "svg"],
+    handler: async (buffer, target) => {
+      return renderImage(buffer, target)
+    },
+  },
+  // 纯文本预览
+  {
+    accepts: [
+      "txt",
+      "json",
+      "js",
+      "css",
+      "java",
+      "py",
+      "html",
+      "jsx",
+      "ts",
+      "tsx",
+      "xml",
+      "md",
+      "log",
+    ],
+    handler: async (buffer, target) => {
+      return renderText(buffer, target)
+    },
+  },
+  // 错误处理
+  {
+    accepts: ["error"],
+    handler: async (buffer, target, type) => {
+      target.innerHTML = `<div style="text-align: center margin-top: 80px">不支持.${type}格式的在线预览，请下载后预览或转换为支持的格式</div>
+<div style="text-align: center">支持docx, xlsx, pptx, pdf, 以及纯文本格式和各种图片格式的在线预览</div>`
+      return VueWrapper(target)
+    },
+  },
+]
+
+// 匹配
+export default handlers.reduce((result, { accepts, handler }) => {
+  accepts.forEach((type) => (result[type] = handler))
+  return result
+}, {})

src/components/view_file/util.js

@@ -0,0 +1,41 @@
+import renders from "./renders"
+
+export async function readBuffer(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (loadEvent) => resolve(loadEvent.target.result)
+    reader.onerror = (e) => reject(e)
+    reader.readAsArrayBuffer(file)
+  })
+}
+
+export async function readDataURL(buffer) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (loadEvent) => resolve(loadEvent.target.result)
+    reader.onerror = (e) => reject(e)
+    reader.readAsDataURL(new Blob([buffer]))
+  })
+}
+
+export async function readText(buffer) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = (loadEvent) => resolve(loadEvent.target.result)
+    reader.onerror = (e) => reject(e)
+    reader.readAsText(new Blob([buffer]), "utf-8")
+  })
+}
+
+export function getExtend(name) {
+  const dot = name.lastIndexOf(".")
+  return name.substr(dot + 1)
+}
+
+export async function render(buffer, type, target) {
+  const handler = renders[type]
+  if (handler) {
+    return handler(buffer, target)
+  }
+  return renders.error(buffer, target, type)
+}

src/components/view_file/vendors/colz/index.js

@@ -0,0 +1,470 @@
+/**
+ * Colorz (or Colz) is a Javascript "library" to help
+ * in color conversion between the usual color-spaces
+ * Hex - Rgb - Hsl / Hsv - Hsb
+ *
+ * It provides some helpers to output Canvas / CSS
+ * color strings.
+ *
+ * by Carlos Cabo 2013
+ * http://carloscabo.com
+ *
+ * Some formulas borrowed from Wikipedia or other authors.
+ */
+
+const round = Math.round
+
+/*
+ ==================================
+ Color constructors
+ ==================================
+*/
+
+export class Rgb {
+  constructor (col) {
+    this.r = col[0]
+    this.g = col[1]
+    this.b = col[2]
+  }
+
+  toString () {
+    return `rgb(${this.r},${this.g},${this.b})`
+  }
+}
+
+export class Rgba extends Rgb {
+  constructor (col) {
+    super(col)
+    this.a = col[3]
+  }
+
+  toString () {
+    return `rgba(${this.r},${this.g},${this.b},${this.a})`
+  }
+}
+
+export class Hsl {
+  constructor (col) {
+    this.h = col[0]
+    this.s = col[1]
+    this.l = col[2]
+  }
+
+  toString () {
+    return `hsl(${this.h},${this.s}%,${this.l}%)`
+  }
+}
+
+export class Hsla extends Hsl {
+  constructor (col) {
+    super(col)
+    this.a = col[3]
+  }
+
+  toString () {
+    return `hsla(${this.h},${this.s}%,${this.l}%,${this.a})`
+  }
+}
+
+/*
+ ==================================
+ Main Colz color object
+ ==================================
+*/
+export class Color {
+  constructor (r, g, b, a = 1.0) {
+    // If args are not given in (r, g, b, [a]) format, convert
+    if (typeof r === 'string') {
+      let str = r
+      // Add initial '#' if missing
+      if (str.charAt(0) !== '#') { str = '#' + str }
+      // If Hex in #fff format convert to #ffffff
+      if (str.length < 7) {
+        str = '#' + str[1] + str[1] + str[2] + str[2] + str[3] + str[3]
+      }
+      ([r, g, b] = hexToRgb(str))
+    } else if (r instanceof Array) {
+      a = r[3] || a
+      b = r[2]
+      g = r[1]
+      r = r[0]
+    }
+
+    this.r = r
+    this.g = g
+    this.b = b
+    this.a = a
+
+    this.rgb = new Rgb([this.r, this.g, this.b])
+    this.rgba = new Rgba([this.r, this.g, this.b, this.a])
+    this.hex = rgbToHex(this.r, this.g, this.b)
+
+    this.hsl = new Hsl(rgbToHsl(this.r, this.g, this.b))
+    this.h = this.hsl.h
+    this.s = this.hsl.s
+    this.l = this.hsl.l
+    this.hsla = new Hsla([this.h, this.s, this.l, this.a])
+  }
+
+  setHue (newHue) {
+    this.h = newHue
+    this.hsl.h = newHue
+    this.hsla.h = newHue
+    this.updateFromHsl()
+  }
+
+  setSat (newSat) {
+    this.s = newSat
+    this.hsl.s = newSat
+    this.hsla.s = newSat
+    this.updateFromHsl()
+  }
+
+  setLum (newLum) {
+    this.l = newLum
+    this.hsl.l = newLum
+    this.hsla.l = newLum
+    this.updateFromHsl()
+  }
+
+  setAlpha (newAlpha) {
+    this.a = newAlpha
+    this.hsla.a = newAlpha
+    this.rgba.a = newAlpha
+  }
+
+  updateFromHsl () {
+    // Updates Rgb
+    this.rgb = null
+    this.rgb = new Rgb(hslToRgb(this.h, this.s, this.l))
+
+    this.r = this.rgb.r
+    this.g = this.rgb.g
+    this.b = this.rgb.b
+    this.rgba.r = this.rgb.r
+    this.rgba.g = this.rgb.g
+    this.rgba.b = this.rgb.b
+
+    // Updates Hex
+    this.hex = null
+    this.hex = rgbToHex([this.r, this.g, this.b])
+  }
+}
+
+/*
+ ==================================
+ Public Methods
+ ==================================
+*/
+
+export const randomColor = function () {
+  const r = '#' + Math.random().toString(16).slice(2, 8)
+  return new Color(r)
+}
+
+export const hexToRgb = function (hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+  return result ? [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16)
+  ] : null
+}
+
+export const componentToHex = function (c) {
+  const hex = c.toString(16)
+  return hex.length === 1 ? '0' + hex : hex
+}
+
+// You can pass 3 numeric values or 1 Array
+export const rgbToHex = function (r, g, b) {
+  if (r instanceof Array) {
+    b = r[2]
+    g = r[1]
+    r = r[0]
+  }
+  return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b)
+}
+
+/**
+ * Converts an RGB color value to HSL. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ *
+ * @param {Number} r The red color value
+ * @param {Number} g The green color value
+ * @param {Number} b The blue color value
+ * @return {Array} The HSL representation
+ */
+export const rgbToHsl = function (r, g, b) {
+  if (r instanceof Array) {
+    b = r[2]
+    g = r[1]
+    r = r[0]
+  }
+
+  let h, s, l, d, max, min
+
+  r /= 255
+  g /= 255
+  b /= 255
+
+  max = Math.max(r, g, b)
+  min = Math.min(r, g, b)
+  l = (max + min) / 2
+
+  if (max === min) {
+    h = s = 0 // achromatic
+  } else {
+    d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0)
+        break
+      case g:
+        h = (b - r) / d + 2
+        break
+      case b:
+        h = (r - g) / d + 4
+        break
+    }
+
+    h /= 6
+  }
+
+  // CARLOS
+  h = round(h * 360)
+  s = round(s * 100)
+  l = round(l * 100)
+
+  return [h, s, l]
+}
+
+export const hue2rgb = function (p, q, t) {
+  if (t < 0) { t += 1 }
+  if (t > 1) { t -= 1 }
+  if (t < 1 / 6) { return p + (q - p) * 6 * t }
+  if (t < 1 / 2) { return q }
+  if (t < 2 / 3) { return p + (q - p) * (2 / 3 - t) * 6 }
+  return p
+}
+
+/**
+ * Converts an HSL color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
+ *
+ * @param {Number} h The hue
+ * @param {Number} s The saturation
+ * @param {Number} l The lightness
+ * @return {Array} The RGB representation
+ */
+
+export const hslToRgb = function (h, s, l) {
+  if (h instanceof Array) {
+    l = h[2]
+    s = h[1]
+    h = h[0]
+  }
+  h = h / 360
+  s = s / 100
+  l = l / 100
+
+  let r, g, b, q, p
+
+  if (s === 0) {
+    r = g = b = l // achromatic
+  } else {
+    q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    p = 2 * l - q
+    r = hue2rgb(p, q, h + 1 / 3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1 / 3)
+  }
+  return [round(r * 255), round(g * 255), round(b * 255)]
+}
+
+/**
+ * Converts an RGB color value to HSB / HSV. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
+ *
+ * @param {Number} r The red color value
+ * @param {Number} g The green color value
+ * @param {Number} b The blue color value
+ * @return {Array} The HSB representation
+ */
+export const rgbToHsb = function (r, g, b) {
+  let max, min, h, s, v, d
+
+  r = r / 255
+  g = g / 255
+  b = b / 255
+
+  max = Math.max(r, g, b)
+  min = Math.min(r, g, b)
+  v = max
+
+  d = max - min
+  s = max === 0 ? 0 : d / max
+
+  if (max === min) {
+    h = 0 // achromatic
+  } else {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0)
+        break
+      case g:
+        h = (b - r) / d + 2
+        break
+      case b:
+        h = (r - g) / d + 4
+        break
+    }
+    h /= 6
+  }
+
+  // map top 360,100,100
+  h = round(h * 360)
+  s = round(s * 100)
+  v = round(v * 100)
+
+  return [h, s, v]
+}
+
+/**
+ * Converts an HSB / HSV color value to RGB. Conversion formula
+ * adapted from http://en.wikipedia.org/wiki/HSV_color_space.
+ *
+ * @param {Number} h The hue
+ * @param {Number} s The saturation
+ * @param {Number} v The value
+ * @return {Array} The RGB representation
+ */
+export const hsbToRgb = function (h, s, v) {
+  let r, g, b, i, f, p, q, t
+
+  // h = h / 360;
+  if (v === 0) { return [0, 0, 0] }
+
+  s = s / 100
+  v = v / 100
+  h = h / 60
+
+  i = Math.floor(h)
+  f = h - i
+  p = v * (1 - s)
+  q = v * (1 - (s * f))
+  t = v * (1 - (s * (1 - f)))
+
+  if (i === 0) {
+    r = v
+    g = t
+    b = p
+  } else if (i === 1) {
+    r = q
+    g = v
+    b = p
+  } else if (i === 2) {
+    r = p
+    g = v
+    b = t
+  } else if (i === 3) {
+    r = p
+    g = q
+    b = v
+  } else if (i === 4) {
+    r = t
+    g = p
+    b = v
+  } else if (i === 5) {
+    r = v
+    g = p
+    b = q
+  }
+
+  r = Math.floor(r * 255)
+  g = Math.floor(g * 255)
+  b = Math.floor(b * 255)
+
+  return [r, g, b]
+}
+
+export const hsvToRgb = hsbToRgb // alias
+
+/* Convert from Hsv */
+export const hsbToHsl = function (h, s, b) {
+  return rgbToHsl(hsbToRgb(h, s, b))
+}
+
+export const hsvToHsl = hsbToHsl // alias
+
+/*
+ ==================================
+ Color Scheme Builder
+ ==================================
+*/
+export class ColorScheme {
+  constructor (colorVal, angleArray) {
+    this.palette = []
+
+    if (angleArray === undefined && colorVal instanceof Array) {
+      // Asume you passing a color array ['#f00','#0f0'...]
+      this.createFromColors(colorVal)
+    } else {
+      // Create scheme from color + hue angles
+      this.createFromAngles(colorVal, angleArray)
+    }
+  }
+
+  createFromColors (colorVal) {
+    for (let i in colorVal) {
+      if (colorVal.hasOwn(i)) {
+        this.palette.push(new Color(colorVal[i]))
+      }
+    }
+    return this.palette
+  }
+
+  createFromAngles (colorVal, angleArray) {
+    this.palette.push(new Color(colorVal))
+
+    for (let i in angleArray) {
+      if (angleArray.hasOwn(i)) {
+        const tempHue = (this.palette[0].h + angleArray[i]) % 360
+        this.palette.push(new Color(hslToRgb(tempHue, this.palette[0].s, this.palette[0].l)))
+      }
+    }
+    return this.palette
+  }
+
+  /* Complementary colors constructors */
+  static Compl (colorVal) {
+    return new this(colorVal, [180])
+  }
+
+  /* Triad */
+  static Triad (colorVal) {
+    return new this(colorVal, [120, 240])
+  }
+
+  /* Tetrad */
+  static Tetrad (colorVal) {
+    return new this(colorVal, [60, 180, 240])
+  }
+
+  /* Analogous */
+  static Analog (colorVal) {
+    return new this(colorVal, [-45, 45])
+  }
+
+  /* Split complementary */
+  static Split (colorVal) {
+    return new this(colorVal, [150, 210])
+  }
+
+  /* Accented Analogous */
+  static Accent (colorVal) {
+    return new this(colorVal, [-45, 45, 180])
+  }
+}

src/components/view_file/vendors/image/ImageViewer.vue

@@ -0,0 +1,39 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2025-04-24 15:29:17
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-24 16:24:34
+ * @Description: 
+-->
+<template>
+  <div>
+    <!-- <img v-for="item in images" alt="图片" :src="item.src" :key="item.index" class="image" /> -->
+    <el-image
+      :src="images[0]"
+      :preview-src-list="images"
+      width="100%"
+      height="100%"
+      :preview="true"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue"
+const props = defineProps({
+  image: String,
+})
+
+const images = computed(() => {
+  return props.image ? [props.image] : []
+})
+</script>
+
+<style scoped>
+.image {
+  display: block;
+  width: auto;
+  height: 100%;
+  margin: 0 auto;
+}
+</style>

src/components/view_file/vendors/image/index.js

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import ImageViewer from './ImageViewer.vue'
+import { readDataURL } from '../../util'
+
+/**
+ * 图片渲染
+ */
+export default async function renderImage (buffer, target) {
+  const url = await readDataURL(buffer)
+  const app = createApp(ImageViewer, { image: url })
+  app.mount(target)
+  return {
+    $el: target,
+    $destroy() {
+      app.unmount()
+    }
+  }
+}

src/components/view_file/vendors/other/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="view-other">
+    <el-image :src="viewOffImage" class="view-off-icon">
+      <div slot="error" class="image-slot">
+        <i class="el-icon-picture-outline"></i>
+      </div>
+    </el-image>
+    <p>
+      {{ file.name }}.{{ file.type
+      }}<span class="size-item">{{ getFileSize }}</span>
+    </p>
+    <p>
+      <big><strong>该类型文件不支持在线预览，请下载后查看。</strong></big>
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import commJs from "@/comm_js/index"
+import viewOffImage from "../../assets/view_off.svg"
+
+const props = defineProps({
+  file: {
+    type: Object,
+    default: () => {
+      return {}
+    },
+  },
+})
+
+const getFileSize = computed(() => {
+  return commJs.fileSizeFormat(props.file.size, "KB")
+})
+</script>
+
+<style lang="less" scoped>
+.view-other {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  .size-item {
+    margin-left: 10px;
+  }
+}
+</style>

src/components/view_file/vendors/pdf/PdfView.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="home_wrap">
+    <div class="pdf_down">
+      <div class="pdf_set_left" @click="scaleD">➕</div>
+      <div class="pdf_set_middle" @click="scaleX">➖</div>
+      <!-- <div class="pdf-pre" @click="prePage">上一页</div> -->
+      <!-- <div class="pdf-next" @click="nextPage">下一页</div> -->
+    </div>
+    <div :style="{ width: pdf_div_width, margin: '0 auto' }">
+      <!-- <canvas id="the_canvas"></canvas> -->
+      <canvas
+        v-for="page in pdf_pages"
+        :id="'the_canvas' + page"
+        :key="page"
+      ></canvas>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue"
+import * as PDF from "pdfjs-dist"
+
+PDF.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.mjs',
+  import.meta.url
+).toString()
+
+const props = defineProps({
+  data: Array,
+})
+
+const pdf_scale = ref(1.0)
+const pdf_pages = ref([])
+const pdf_div_width = ref("")
+const currentPage = ref(1)
+let pdfDoc = null
+
+const scaleD = () => {
+  let max = 0
+  if (window.screen.width > 1440) {
+    max = 1.4
+  } else {
+    max = 1.2
+  }
+  if (pdf_scale.value >= max) {
+    return
+  }
+  pdf_scale.value = pdf_scale.value + 0.1
+  loadFile()
+}
+
+const scaleX = () => {
+  let min = 1.0
+  if (pdf_scale.value <= min) {
+    return
+  }
+  pdf_scale.value = pdf_scale.value - 0.1
+  loadFile()
+}
+
+const loadFile = async () => {
+  pdfDoc = await PDF.getDocument(props.data).promise
+  pdf_pages.value = pdfDoc.numPages
+  renderPage()
+}
+
+const renderPage = async (num = 1) => {
+  currentPage.value = num
+  const page = await pdfDoc.getPage(num)
+  const canvas = document.getElementById("the_canvas" + num)
+  const ctx = canvas.getContext("2d")
+  const dpr = window.devicePixelRatio || 1
+  const bsr =
+    ctx.webkitBackingStorePixelRatio ||
+    ctx.mozBackingStorePixelRatio ||
+    ctx.msBackingStorePixelRatio ||
+    ctx.oBackingStorePixelRatio ||
+    ctx.backingStorePixelRatio ||
+    1
+  const ratio = dpr / bsr
+  const viewport = page.getViewport({ scale: pdf_scale.value })
+  canvas.width = viewport.width * ratio
+  canvas.height = viewport.height * ratio
+  canvas.style.width = viewport.width + "px"
+  pdf_div_width.value = viewport.width + "px"
+  canvas.style.height = viewport.height + "px"
+  ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
+  const renderContext = {
+    canvasContext: ctx,
+    viewport: viewport,
+  }
+  page.render(renderContext)
+  if (pdf_pages.value > num) {
+    setTimeout(() => {
+      return renderPage(num + 1)
+    })
+  }
+}
+
+const nextPage = () => {
+  if (pdf_pages.value > currentPage.value) {
+    renderPage(currentPage.value + 1)
+  }
+}
+
+const prePage = () => {
+  if (currentPage.value > 1) {
+    renderPage(currentPage.value - 1)
+  }
+}
+
+
+onMounted(() => {
+  loadFile()
+})
+</script>
+
+<style scoped>
+.home_wrap {
+  width: 100%;
+  height: 100%;
+}
+.home_wrap .pdf_down {
+  position: fixed;
+  display: flex;
+  z-index: 20;
+  right: 26px;
+  bottom: 7%;
+  cursor: pointer;
+}
+.home_wrap .pdf-pre {
+  position: fixed;
+  display: flex;
+  z-index: 20;
+  right: 160px;
+  bottom: 9%;
+  cursor: pointer;
+}
+.home_wrap .pdf-next {
+  position: fixed;
+  display: flex;
+  z-index: 20;
+  right: 100px;
+  bottom: 9%;
+}
+.home_wrap .pdf_down .pdf_set_left {
+  width: 30px;
+  height: 40px;
+  color: #408fff;
+  font-size: 15px;
+  padding-top: 25px;
+  text-align: center;
+  margin-right: 5px;
+  cursor: pointer;
+}
+.home_wrap .pdf_down .pdf_set_middle {
+  width: 30px;
+  height: 40px;
+  color: #408fff;
+  font-size: 15px;
+  padding-top: 25px;
+  text-align: center;
+  margin-right: 5px;
+  cursor: pointer;
+}
+</style>

src/components/view_file/vendors/pdf/index.js

@@ -0,0 +1,20 @@
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-04-24 15:29:17
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-24 15:48:14
+ * @Description: 
+ */
+import { createApp } from 'vue'
+import PdfView from './PdfView.vue'
+export default async function renderPdf(buffer, target) {
+  const app = createApp(PdfView, { data: buffer })
+  app.mount(target)
+  
+  return {
+    $el: target,
+    $destroy() {
+      app.unmount()
+    }
+  }
+}

src/components/view_file/vendors/pptx/PPT.vue

@@ -0,0 +1,4728 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2025-04-10 14:38:27
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-25 09:32:40
+ * @Description:
+-->
+<template>
+  <div id="pptx-container" ref="pptxContainer" class="pptx-container"></div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from "vue"
+
+const props = defineProps({
+  pptxJson: Object,
+})
+
+const pptxContainer = ref(null)
+
+// 渲染幻灯片
+const renderSlides = () => {
+  if (!pptxContainer.value || !props.pptxJson) return
+
+  pptxContainer.value.innerHTML = ""
+  const { size, slides } = props.pptxJson
+
+  slides.forEach((slide, index) => {
+    const slideElement = createSlideElement(size.width, size.height)
+    applySlideBackground(slideElement, slide.fill)
+    if (slide.layoutElements && Array.isArray(slide.layoutElements)) {
+      processElements(slide.layoutElements, index + 1)
+      slide.layoutElements.forEach((element) => {
+        const el = createElementByType(element)
+        if (!el) return
+        slideElement.appendChild(el)
+      })
+    }
+
+    // 渲染幻灯片元素
+    if (slide.elements && Array.isArray(slide.elements)) {
+      processElements(slide.elements, index + 1)
+      slide.elements.forEach((element) => {
+        const el = createElementByType(element)
+        if (!el) return
+        slideElement.appendChild(el)
+      })
+    }
+
+    // 添加幻灯片到容器
+    pptxContainer.value.appendChild(slideElement)
+  })
+  // 为所有p标签应用样式
+  const pTags = pptxContainer.value.querySelectorAll("p")
+  pTags.forEach((p) => {
+    p.style.margin = "0px"
+    p.style.padding = "0px"
+    p.style.wordBreak = "break-word"
+    p.style.lineHeight = "1"
+  })
+  const ulTags = pptxContainer.value.querySelectorAll("ul")
+  ulTags.forEach((ul) => {
+    ul.style.wordBreak = "break-word"
+    ul.style.lineHeight = "1"
+    ul.style.padding = "auto 0px"
+    ul.style.margin = "0px"
+  })
+  const olTags = pptxContainer.value.querySelectorAll("ol")
+  olTags.forEach((ol) => {
+    ol.style.margin = "0px"
+    ol.style.padding = "auto 0px"
+    ol.style.wordBreak = "break-word"
+    ol.style.lineHeight = "1"
+  })
+}
+
+// 创建幻灯片元素
+const createSlideElement = (width, height) => {
+  const slideElement = document.createElement("div")
+  slideElement.className = "slide"
+  slideElement.style.position = "relative"
+  slideElement.style.width = width + "px"
+  slideElement.style.height = height + "px"
+  slideElement.style.border = "1px solid #ccc"
+  slideElement.style.margin = "0px auto"
+  slideElement.style.marginBottom = "20px"
+  slideElement.style.overflow = "hidden"
+  return slideElement
+}
+
+// 应用幻灯片背景
+const applySlideBackground = (slideElement, fill) => {
+  if (!fill) return
+
+  if (fill.type === "gradient") {
+    const { colors, path, rot } = fill.value
+
+    if (colors && colors.length >= 2) {
+      const gradientType = path === "rect" ? "linear" : "radial"
+      const gradientAngle =
+        gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
+
+      let gradientString = `${gradientType}-gradient(`
+      if (gradientType === "linear") {
+        gradientString += `${gradientAngle}deg, `
+      }
+
+      colors.forEach((color, i) => {
+        gradientString += `${color.color} ${color.pos}${
+          i < colors.length - 1 ? ", " : ""
+        }`
+      })
+
+      gradientString += ")"
+      slideElement.style.background = gradientString
+    }
+  } else if (fill.type === "color") {
+    slideElement.style.backgroundColor = fill.value || "#FFFFFF"
+  } else if (fill.type === "image" && fill.value.picBase64) {
+    // 设置背景图片
+    slideElement.style.backgroundImage = `url(${fill.value.picBase64})`
+    slideElement.style.backgroundSize = "cover"
+    slideElement.style.backgroundPosition = "center"
+    slideElement.style.backgroundRepeat = "no-repeat"
+
+    // 如果有背景图片的混合模式
+    if (fill.value.blendMode) {
+      slideElement.style.backgroundBlendMode = fill.value.blendMode
+    }
+
+    // 如果有透明度设置
+    if (fill.value.opacity !== undefined) {
+      slideElement.style.opacity = fill.value.opacity
+    }
+  }
+}
+
+// 根据元素类型创建DOM元素
+const createElementByType = (element) => {
+  switch (element.type) {
+    case "image":
+      return createImageElement(element)
+    case "video":
+      return createVideoElement(element)
+    case "audio":
+      return createAudioElement(element)
+    case "shape":
+      return createShapeElement(element)
+    case "table":
+      return createTableElement(element)
+    case "chart":
+      return createChartElement(element)
+    case "diagram":
+      return createDiagramElement(element)
+    case "math":
+      return createMathElement(element)
+    case "group":
+      return createGroupElement(element)
+    default:
+      return createTextElement(element)
+  }
+}
+
+// 创建组合元素
+const createGroupElement = (element) => {
+  // 创建组合容器
+  const groupContainer = document.createElement("div")
+  groupContainer.className = "group-element"
+  groupContainer.style.position = "absolute"
+  groupContainer.style.top = element.top + "px"
+  groupContainer.style.left = element.left + "px"
+  groupContainer.style.width = element.width + "px"
+  groupContainer.style.height = element.height + "px"
+  groupContainer.style.zIndex = element.order
+  groupContainer.style.transformOrigin = "center center"
+
+  // 创建内部容器来处理子元素
+  const innerContainer = document.createElement("div")
+  innerContainer.style.position = "relative"
+  innerContainer.style.width = "100%"
+  innerContainer.style.height = "100%"
+
+  // 应用旋转变换
+  if (element.rotate) {
+    groupContainer.style.transform = `rotate(${element.rotate}deg)`
+  }
+
+  // 应用其他样式属性
+  if (element.opacity !== undefined) {
+    groupContainer.style.opacity = element.opacity
+  }
+
+  // 递归渲染组内的所有子元素
+  if (element.elements && Array.isArray(element.elements)) {
+    element.elements.forEach((childElement) => {
+      const childCopy = JSON.parse(JSON.stringify(childElement))
+      const childEl = createElementByType(childCopy)
+      if (childEl) {
+        innerContainer.appendChild(childEl)
+      }
+    })
+  }
+
+  groupContainer.appendChild(innerContainer)
+  return groupContainer
+}
+
+// 创建图像元素
+const createImageElement = (element) => {
+  const img = document.createElement("img")
+  img.src = element.src
+  img.style.width = element.width + "px"
+  img.style.height = element.height + "px"
+  img.style.objectFit = "cover" // 保持图像的宽高比并填充容器
+  img.style.position = "absolute"
+  img.style.top = `${element.top}px`
+  img.style.left = `${element.left}px`
+  img.style.zIndex = element.order
+
+  return img
+}
+
+// 创建视频元素
+const createVideoElement = (element) => {
+  const el = document.createElement("video")
+  el.src = element.blob
+  el.controls = true
+  el.style.width = element.width + "px"
+  el.style.height = element.height + "px"
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.zIndex = element.order
+  return el
+}
+
+// 创建音频元素
+const createAudioElement = (element) => {
+  const el = document.createElement("audio")
+  el.src = element.blob
+  el.controls = true
+  el.style.height = element.height + "px"
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.zIndex = element.order
+  return el
+}
+
+// 创建形状元素
+const createShapeElement = (element) => {
+  const el = document.createElement("div")
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.width = element.width + "px"
+  el.style.height = element.height + "px"
+  el.style.zIndex = element.order
+  el.style.overflow = "visible"
+  if (element.height === 0) {
+    // 如果高度为0，直接在div上绘制边框
+    el.style.borderTop = `${element.borderWidth || 1}px ${
+      element.borderType || "solid"
+    } ${element.borderColor || "#000"}`
+  }
+  // 使用SVG绘制形状
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  svg.setAttribute("width", "100%")
+  svg.setAttribute("height", "100%")
+  svg.setAttribute("viewBox", `0 0 ${element.width} ${element.height}`)
+  svg.style.overflow = "visible"
+
+  const setBackground = (element, shape) => {
+    if (element.fill && element.fill.type) {
+      // 设置填充色
+      if (element.fill.type === "color") {
+        shape.setAttribute("fill", element.fill.value || "transparent")
+      } else if (element.fill.type === "gradient") {
+        // 渐变填充
+        const { colors, path, rot } = element.fill.value
+
+        if (colors && colors.length >= 2) {
+          const gradientType = path === "rect" ? "linear" : "radial"
+          const gradientAngle =
+            gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
+
+          let gradientString = `${gradientType}-gradient(`
+          if (gradientType === "linear") {
+            gradientString += `${gradientAngle}deg, `
+          }
+
+          colors.forEach((color, i) => {
+            gradientString += `${color.color} ${color.pos}${
+              i < colors.length - 1 ? ", " : ""
+            }`
+          })
+          gradientString += ")"
+
+          // 创建渐变定义
+          const gradientDef = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "defs"
+          )
+          const gradientEl = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            gradientType === "linear" ? "linearGradient" : "radialGradient"
+          )
+          const gradientId = `gradient-${Date.now()}-${Math.random()
+            .toString(36)
+            .substr(2, 9)}`
+          gradientEl.setAttribute("id", gradientId)
+
+          // 设置渐变属性
+          if (gradientType === "linear") {
+            gradientEl.setAttribute(
+              "gradientTransform",
+              `rotate(${gradientAngle})`
+            )
+          }
+
+          // 添加渐变色标
+          colors.forEach((color) => {
+            const stop = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "stop"
+            )
+            stop.setAttribute("offset", color.pos)
+            stop.setAttribute("stop-color", color.color)
+            gradientEl.appendChild(stop)
+          })
+
+          gradientDef.appendChild(gradientEl)
+          svg.appendChild(gradientDef)
+
+          // 应用渐变
+          shape.setAttribute("fill", `url(#${gradientId})`)
+        }
+      } else if (element.fill.type === "image") {
+        // 创建图案填充
+        const pattern = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "pattern"
+        )
+        const patternId = `pattern-${Date.now()}-${Math.random()
+          .toString(36)
+          .substr(2, 9)}`
+        pattern.setAttribute("id", patternId)
+        pattern.setAttribute("patternUnits", "userSpaceOnUse")
+        pattern.setAttribute("width", "100%")
+        pattern.setAttribute("height", "100%")
+
+        // 创建图片元素
+        const image = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "image"
+        )
+        image.setAttribute("width", "100%")
+        image.setAttribute("height", "100%")
+        image.setAttribute("preserveAspectRatio", "xMidYMid slice")
+        image.setAttributeNS(
+          "http://www.w3.org/1999/xlink",
+          "href",
+          element.fill.value.picBase64
+        )
+
+        pattern.appendChild(image)
+
+        // 添加pattern到defs
+        const defs = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "defs"
+        )
+        defs.appendChild(pattern)
+        svg.appendChild(defs)
+
+        // 应用图案填充
+        shape.setAttribute("fill", `url(#${patternId})`)
+      } else {
+        shape.setAttribute("fill", "transparent")
+      }
+    } else {
+      shape.setAttribute("fill", "#ffffff00")
+    }
+  }
+
+  // 根据形状类型创建不同的SVG元素
+  switch (element.shapType) {
+    case "roundRect":
+      const radius = Math.min(element.width, element.height) * 0.1
+      const roundRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      )
+      roundRect.setAttribute("x", 0)
+      roundRect.setAttribute("y", 0)
+      roundRect.setAttribute("width", element.width)
+      roundRect.setAttribute("height", element.height)
+      roundRect.setAttribute("rx", radius)
+      roundRect.setAttribute("ry", radius)
+
+      // 设置填充色
+      setBackground(element, roundRect)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        roundRect.setAttribute("stroke", element.borderColor || "#000")
+        roundRect.setAttribute("stroke-width", element.borderWidth || 1)
+        roundRect.setAttribute("stroke-linejoin", "round") // 设置连接处为圆角
+        roundRect.setAttribute("vector-effect", "non-scaling-stroke") // 防止边框宽度变形
+        roundRect.setAttribute("shape-rendering", "geometricPrecision") // 提高渲染精度
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            roundRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            roundRect.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            roundRect.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(roundRect)
+      break
+    case "snip1Rect":
+      // 使用path元素绘制剪去单角的矩形
+      const snip1Rect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算剪角的大小，通常为矩形较短边的20%
+      const snipSize = Math.min(element.width, element.height) * 0.35
+
+      // 绘制路径：从左上角开始，顺时针方向，右上角被剪去
+      snip1Rect.setAttribute(
+        "d",
+        `M0,0 ` +
+          `L${element.width - snipSize},0 ` +
+          `L${element.width},${snipSize} ` +
+          `L${element.width},${element.height} ` +
+          `L0,${element.height} ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, snip1Rect)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        snip1Rect.setAttribute("stroke", element.borderColor || "#000")
+        snip1Rect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            snip1Rect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            snip1Rect.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            snip1Rect.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+      svg.appendChild(snip1Rect)
+      break
+    case "snip2SameRect":
+      // 使用path元素绘制剪去四个角的矩形
+      const snip2SameRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算剪角的大小，通常为矩形较短边的20%
+      const snip2Size = Math.min(element.width, element.height) * 0.35
+
+      // 绘制路径：从左上角开始，顺时针方向，剪去四个角
+      snip2SameRect.setAttribute(
+        "d",
+        `M${snip2Size},0 ` +
+          `L${element.width - snip2Size},0 ` +
+          `L${element.width},${snip2Size} ` +
+          `L${element.width},${element.height - snip2Size} ` +
+          `L${element.width - snip2Size},${element.height} ` +
+          `L${snip2Size},${element.height} ` +
+          `L0,${element.height - snip2Size} ` +
+          `L0,${snip2Size} ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, snip2SameRect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        snip2SameRect.setAttribute("stroke", element.borderColor || "#000")
+        snip2SameRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            snip2SameRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            snip2SameRect.setAttribute("stroke-dasharray", "2, 2")
+            snip2SameRect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            snip2SameRect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        // 添加这些属性以确保边框正确渲染
+        snip2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
+        snip2SameRect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(snip2SameRect)
+      break
+    case "line":
+      // 创建直线连接符
+      const line = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "line"
+      )
+      // 设置SVG的最小高度为1px
+      const svgHeight = element.height > 0 ? element.height : 1
+      svg.setAttribute("height", svgHeight + "px")
+
+      // 设置线条的起点和终点
+      line.setAttribute("x1", 0)
+      line.setAttribute("y1", 0)
+      line.setAttribute("x2", element.width)
+      line.setAttribute("y2", svgHeight)
+
+      // 确保边框颜色和宽度被正确设置
+      line.setAttribute("stroke", element.borderColor || "#000")
+      line.setAttribute("stroke-width", element.borderWidth || 1)
+
+      // 处理虚线样式
+      if (element.borderType === "dotted" || element.borderType === "dashed") {
+        if (element.borderStrokeDasharray) {
+          line.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+        } else if (element.borderType === "dotted") {
+          line.setAttribute("stroke-dasharray", "2, 2")
+          line.setAttribute("stroke-linecap", "round") // 添加圆角端点使点线更明显
+        } else if (element.borderType === "dashed") {
+          line.setAttribute("stroke-dasharray", "6, 3")
+        }
+      }
+
+      // 确保线条正确渲染
+      line.setAttribute("vector-effect", "non-scaling-stroke") // 防止缩放影响线条宽度
+      svg.appendChild(line)
+      break
+    case "snip2DiagRect":
+      // 使用path元素绘制剪去右上角和左下角的矩形
+      const snip2DiagRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算剪角的大小，通常为矩形较短边的35%
+      const snipDiagSize = Math.min(element.width, element.height) * 0.35
+
+      // 绘制路径：从左上角开始，顺时针方向，右上角和左下角被剪去
+      snip2DiagRect.setAttribute(
+        "d",
+        `M0,0 ` +
+          `L${element.width - snipDiagSize},0 ` +
+          `L${element.width},${snipDiagSize} ` +
+          `L${element.width},${element.height} ` +
+          `L${snipDiagSize},${element.height} ` +
+          `L0,${element.height - snipDiagSize} ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, snip2DiagRect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        snip2DiagRect.setAttribute("stroke", element.borderColor || "#000")
+        snip2DiagRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            snip2DiagRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            snip2DiagRect.setAttribute("stroke-dasharray", "2, 2")
+            snip2DiagRect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            snip2DiagRect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        // 添加这些属性以确保边框正确渲染
+        snip2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
+        snip2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(snip2DiagRect)
+      break
+    case "snipRoundRect":
+      const snipRoundRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      // 计算剪切大小和圆角大小
+      const snipSize2 = Math.min(element.width, element.height) * 0.4
+      const roundSize = Math.min(element.width, element.height) * 0.5
+
+      // 绘制路径：从左上角开始，顺时针方向，左上为圆角，右上为剪切角
+      snipRoundRect.setAttribute(
+        "d",
+        `M${roundSize},0 ` +
+          `L${element.width - snipSize2},0 ` +
+          `L${element.width},${snipSize2} ` +
+          `L${element.width},${element.height} ` +
+          `L0,${element.height} ` +
+          `L0,${roundSize} ` +
+          `A${roundSize},${roundSize} 0 0,1 ${roundSize},0 ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, snipRoundRect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        snipRoundRect.setAttribute("stroke", element.borderColor || "#000")
+        snipRoundRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            snipRoundRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            snipRoundRect.setAttribute("stroke-dasharray", "2, 2")
+            snipRoundRect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            snipRoundRect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        snipRoundRect.setAttribute("vector-effect", "non-scaling-stroke")
+        snipRoundRect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(snipRoundRect)
+      break
+    case "round1Rect":
+      const round1Rect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      // 计算圆角大小
+      const round1Size = Math.min(element.width, element.height) * 0.5
+
+      // 绘制路径：从左上角开始，顺时针方向，右上角为圆角
+      round1Rect.setAttribute(
+        "d",
+        `M0,0 ` +
+          `L${element.width - round1Size},0 ` +
+          `Q${element.width},0 ${element.width},${round1Size} ` +
+          `L${element.width},${element.height} ` +
+          `L0,${element.height} ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, round1Rect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        round1Rect.setAttribute("stroke", element.borderColor || "#000")
+        round1Rect.setAttribute("stroke-width", element.borderWidth || 1)
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            round1Rect.setAttribute("stroke-dasharray", "40,15,5,15")
+          } else if (element.borderType === "dotted") {
+            round1Rect.setAttribute("stroke-dasharray", "2, 2")
+            round1Rect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            round1Rect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        round1Rect.setAttribute("vector-effect", "non-scaling-stroke")
+        round1Rect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(round1Rect)
+      break
+    case "ellipse":
+    case "circle":
+      const ellipse = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "ellipse"
+      )
+      ellipse.setAttribute("cx", element.width / 2)
+      ellipse.setAttribute("cy", element.height / 2)
+      ellipse.setAttribute("rx", element.width / 2)
+      ellipse.setAttribute("ry", element.height / 2)
+
+      // 设置填充色
+      setBackground(element, ellipse)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        ellipse.setAttribute("stroke", element.borderColor || "#000")
+        ellipse.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            ellipse.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            ellipse.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            ellipse.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(ellipse)
+      break
+    case "round2SameRect":
+      const round2SameRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      // 计算圆角大小
+      const round2Size = Math.min(element.width, element.height) * 0.5
+
+      // 绘制路径：从左上角开始，顺时针方向，左上和右上为圆角
+      round2SameRect.setAttribute(
+        "d",
+        `M${round2Size},0 ` +
+          `L${element.width - round2Size},0 ` +
+          `Q${element.width},0 ${element.width},${round2Size} ` +
+          `L${element.width},${element.height} ` +
+          `L0,${element.height} ` +
+          `L0,${round2Size} ` +
+          `Q0,0 ${round2Size},0 ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, round2SameRect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        round2SameRect.setAttribute("stroke", element.borderColor || "#000")
+        round2SameRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            round2SameRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            round2SameRect.setAttribute("stroke-dasharray", "2, 2")
+            round2SameRect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            round2SameRect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        round2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
+        round2SameRect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(round2SameRect)
+      break
+    case "round2DiagRect":
+      const round2DiagRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      // 计算圆角大小
+      const round2DiagSize = Math.min(element.width, element.height) * 0.5
+
+      // 绘制路径：从左上角开始，顺时针方向，左上和右下为圆角
+      round2DiagRect.setAttribute(
+        "d",
+        `M${round2DiagSize},0 ` +
+          `L${element.width},0 ` +
+          `L${element.width},${element.height - round2DiagSize} ` +
+          `Q${element.width},${element.height} ${
+            element.width - round2DiagSize
+          },${element.height} ` +
+          `L0,${element.height} ` +
+          `L0,${round2DiagSize} ` +
+          `Q0,0 ${round2DiagSize},0 ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, round2DiagRect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        round2DiagRect.setAttribute("stroke", element.borderColor || "#000")
+        round2DiagRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            round2DiagRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            round2DiagRect.setAttribute("stroke-dasharray", "2, 2")
+            round2DiagRect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            round2DiagRect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        round2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
+        round2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(round2DiagRect)
+      break
+    case "triangle":
+      const triangle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      triangle.setAttribute(
+        "points",
+        `${element.width / 2},0 ${element.width},${element.height} 0,${
+          element.height
+        }`
+      )
+
+      // 设置填充色
+      setBackground(element, triangle)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        triangle.setAttribute("stroke", element.borderColor || "#000")
+        triangle.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            triangle.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            triangle.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            triangle.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(triangle)
+      break
+    case "arc":
+      const arc = document.createElementNS("http://www.w3.org/2000/svg", "path")
+
+      // 计算弧形的参数
+      const arcRadius = Math.min(element.width, element.height) / 2
+
+      // 绘制弧形路径
+      arc.setAttribute(
+        "d",
+        `M${arcRadius},0 ` +
+          `A${arcRadius},${arcRadius} 0 1 1 ${arcRadius * 0.15},${
+            arcRadius * 0.5
+          }`
+      )
+
+      // 设置填充色
+      arc.setAttribute("fill", "transparent")
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        arc.setAttribute("stroke", element.borderColor || "#000")
+        arc.setAttribute("stroke-width", element.borderWidth || 0.5)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            arc.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+          } else if (element.borderType === "dotted") {
+            arc.setAttribute("stroke-dasharray", "2, 2")
+            arc.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            arc.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        arc.setAttribute("vector-effect", "non-scaling-stroke")
+        arc.setAttribute("shape-rendering", "geometricPrecision")
+      } else {
+        arc.setAttribute("stroke", element.borderColor || "#000")
+        arc.setAttribute("stroke-width", 0.5)
+      }
+
+      svg.appendChild(arc)
+      break
+    case "custom":
+      const customPath = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 直接使用传入的 path 数据
+      customPath.setAttribute("d", element.path || "")
+
+      // 设置填充色
+      setBackground(element, customPath)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        customPath.setAttribute("stroke", element.borderColor || "#000")
+        customPath.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            customPath.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            customPath.setAttribute("stroke-dasharray", "2, 2")
+            customPath.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            customPath.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        customPath.setAttribute("vector-effect", "non-scaling-stroke")
+        customPath.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(customPath)
+      break
+    case "teardrop":
+      const teardrop = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算泪珠形状的参数
+      const tdCenterX = element.width / 2
+      const tdCenterY = element.height / 2
+      const tdRadiusX = element.width / 2
+      const tdRadiusY = element.height / 2
+
+      // 使用相对比例计算控制点
+      teardrop.setAttribute(
+        "d",
+        `M${tdCenterX * 2} ${tdCenterY} ` +
+          `A ${tdRadiusX} ${tdRadiusY} 0 1 1 ${tdCenterX} 0 ` +
+          `Q${tdCenterX * 1.7},0 ${tdCenterX * 2.1},${-tdCenterY * 0.1} ` +
+          `Q${tdCenterX * 2},${tdCenterY * 0.29} ${tdCenterX * 2},${tdCenterY}`
+      )
+
+      // 设置填充色
+      setBackground(element, teardrop)
+
+      // 设置边框样式
+      if (element.borderWidth > 0) {
+        teardrop.setAttribute("stroke", element.borderColor || "#000")
+        teardrop.setAttribute("stroke-width", element.borderWidth || 1)
+        teardrop.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          // ... 原有的虚线边框处理代码 ...
+        }
+      }
+
+      svg.appendChild(teardrop)
+      break
+    case "decagon":
+      const decagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+
+      // 计算十边形的顶点
+      let decagonPoints = ""
+      for (let i = 0; i < 10; i++) {
+        const angle = (i * 2 * Math.PI) / 10 - Math.PI / 2 // 从顶部开始
+        const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
+        const y = element.height / 2 + (element.height / 2) * Math.sin(angle)
+        decagonPoints += `${x},${y} `
+      }
+      decagon.setAttribute("points", decagonPoints.trim())
+
+      // 设置填充色
+      setBackground(element, decagon)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        decagon.setAttribute("stroke", element.borderColor || "#000")
+        decagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            decagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            decagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            decagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(decagon)
+      break
+    case "pentagon":
+      const pentagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      pentagon.setAttribute(
+        "points",
+        `${element.width / 2},0 ${element.width},${element.height * 0.38} ` +
+          `${element.width * 0.82},${element.height} ${element.width * 0.18},${
+            element.height
+          } ` +
+          `0,${element.height * 0.38}`
+      )
+
+      // 设置填充色
+      setBackground(element, pentagon)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        pentagon.setAttribute("stroke", element.borderColor || "#000")
+        pentagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            pentagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            pentagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            pentagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(pentagon)
+      break
+    case "pie":
+      const pie = document.createElementNS("http://www.w3.org/2000/svg", "path")
+
+      // 使用提供的路径数据，但保留元素的宽高比例
+      const centerX = element.width / 2
+      const centerY = element.height / 2
+      const radius2 = Math.min(element.width, element.height) / 2
+
+      // 绘制饼图，使用类似提供的路径数据
+      pie.setAttribute(
+        "d",
+        `M${centerX},${centerY} ` +
+          `L${centerX * 1.85},${centerY * 1.52} ` +
+          `A${radius2},${radius2} 0 1,1 ${centerX * 1.56},${centerY * 0.17} ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, pie)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        pie.setAttribute("stroke", element.borderColor || "#000")
+        pie.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            pie.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+          } else if (element.borderType === "dotted") {
+            pie.setAttribute("stroke-dasharray", "2, 2")
+            pie.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            pie.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        pie.setAttribute("vector-effect", "non-scaling-stroke")
+        pie.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(pie)
+      break
+    case "chord":
+      const chord = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算弦形的参数
+      const chordRadiusX = element.width * 0.4
+      const chordRadiusY = element.height * 0.4
+      // 绘制弦形 - 使用更大的圆弧和不同的起始/结束点
+      chord.setAttribute(
+        "d",
+        `M${element.width * 0.4},${element.height * 0.9} ` +
+          `A ${chordRadiusX} ${chordRadiusY} 0 1 1 ${element.width * 0.8},${
+            element.height * 0.5
+          } ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, chord)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        chord.setAttribute("stroke", element.borderColor || "#000")
+        chord.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            chord.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            chord.setAttribute("stroke-dasharray", "2, 2")
+            chord.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            chord.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        chord.setAttribute("vector-effect", "non-scaling-stroke")
+        chord.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(chord)
+      break
+    case "heptagon":
+      const heptagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+
+      // 计算七边形的顶点
+      let heptagonPoints = ""
+      for (let i = 0; i < 7; i++) {
+        const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2 // 从顶部开始
+        const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
+        const y = element.height / 2 + (element.height / 2) * Math.sin(angle)
+        heptagonPoints += `${x},${y} `
+      }
+      heptagon.setAttribute("points", heptagonPoints.trim())
+
+      // 设置填充色
+      setBackground(element, heptagon)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        heptagon.setAttribute("stroke", element.borderColor || "#000")
+        heptagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            heptagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            heptagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            heptagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(heptagon)
+      break
+    case "hexagon":
+      const hexagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      hexagon.setAttribute(
+        "points",
+        `${element.width * 0.25},0 ${element.width * 0.75},0 ${element.width},${
+          element.height * 0.5
+        } ` +
+          `${element.width * 0.75},${element.height} ${element.width * 0.25},${
+            element.height
+          } 0,${element.height * 0.5}`
+      )
+
+      // 设置填充色
+      setBackground(element, hexagon)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        hexagon.setAttribute("stroke", element.borderColor || "#000")
+        hexagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            hexagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            hexagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            hexagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(hexagon)
+      break
+
+    case "octagon":
+      const octagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      octagon.setAttribute(
+        "points",
+        `${element.width * 0.3},0 ${element.width * 0.7},0 ${element.width},${
+          element.height * 0.3
+        } ` +
+          `${element.width},${element.height * 0.7} ${element.width * 0.7},${
+            element.height
+          } ` +
+          `${element.width * 0.3},${element.height} 0,${
+            element.height * 0.7
+          } 0,${element.height * 0.3}`
+      )
+
+      // 设置填充色
+      setBackground(element, octagon)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        octagon.setAttribute("stroke", element.borderColor || "#000")
+        octagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            octagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            octagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            octagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(octagon)
+      break
+
+    case "trapezoid":
+      const trapezoid = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      trapezoid.setAttribute(
+        "points",
+        `${element.width * 0.2},0 ${element.width * 0.8},0 ${element.width},${
+          element.height
+        } 0,${element.height}`
+      )
+
+      // 设置填充色
+      setBackground(element, trapezoid)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        trapezoid.setAttribute("stroke", element.borderColor || "#000")
+        trapezoid.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            trapezoid.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            trapezoid.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            trapezoid.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(trapezoid)
+      break
+
+    case "diamond":
+      const diamond = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      diamond.setAttribute(
+        "points",
+        `${element.width / 2},0 ${element.width},${element.height / 2} ${
+          element.width / 2
+        },${element.height} 0,${element.height / 2}`
+      )
+
+      // 设置填充色
+      setBackground(element, diamond)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        diamond.setAttribute("stroke", element.borderColor || "#000")
+        diamond.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            diamond.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            diamond.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            diamond.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(diamond)
+      break
+    case "dodecagon":
+      const dodecagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+
+      // 计算十二边形的顶点
+      let dodecagonPoints = ""
+      for (let i = 0; i < 12; i++) {
+        const angle = (i * 2 * Math.PI) / 12 - Math.PI / 2 // 从顶部开始
+        const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
+        const y = element.height / 2 + (element.height / 2) * Math.sin(angle)
+        dodecagonPoints += `${x},${y} `
+      }
+      dodecagon.setAttribute("points", dodecagonPoints.trim())
+
+      // 设置填充色
+      setBackground(element, dodecagon)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        dodecagon.setAttribute("stroke", element.borderColor || "#000")
+        dodecagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            dodecagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            dodecagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            dodecagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(dodecagon)
+      break
+    case "halfFrame":
+      // 创建外框和内框
+      const outerRect2 = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      const innerRect2 = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算内框的边距
+      const frameWidth2 = element.width / 9
+
+      // 绘制外框的左边和上边
+      outerRect2.setAttribute(
+        "d",
+        `M0,${element.height} L0,0 L${element.width},0`
+      )
+
+      // 绘制内框的左边和上边，注意起点位置调整
+      innerRect2.setAttribute(
+        "d",
+        `M${frameWidth2},${element.height - frameWidth2} ` +
+          `L${frameWidth2},${frameWidth2} ` +
+          `L${element.width - frameWidth2},${frameWidth2}`
+      )
+
+      // 设置填充色
+      if (element.fill && element.fill.type === "color") {
+        // 创建一个填充用的路径
+        const fillPath = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "path"
+        )
+        fillPath.setAttribute(
+          "d",
+          `M${frameWidth2},${frameWidth2} ` +
+            `L${element.width - frameWidth2},${frameWidth2} ` +
+            `L${element.width},0 ` +
+            `L0,0 ` +
+            `L0,${element.height} ` +
+            `L${frameWidth2},${element.height - frameWidth2} Z`
+        )
+        fillPath.setAttribute("fill", element.fill.value || "transparent")
+        svg.appendChild(fillPath)
+
+        outerRect2.setAttribute("fill", "none")
+        innerRect2.setAttribute("fill", "none")
+      } else {
+        outerRect2.setAttribute("fill", "none")
+        innerRect2.setAttribute("fill", "none")
+      }
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        const borderColor = element.borderColor || "#000"
+        const borderWidth = element.borderWidth || 1
+
+        outerRect2.setAttribute("stroke", borderColor)
+        outerRect2.setAttribute("stroke-width", borderWidth)
+        innerRect2.setAttribute("stroke", borderColor)
+        innerRect2.setAttribute("stroke-width", borderWidth)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            const dashArray = element.borderStrokeDasharray
+            outerRect2.setAttribute("stroke-dasharray", dashArray)
+            innerRect2.setAttribute("stroke-dasharray", dashArray)
+          } else if (element.borderType === "dotted") {
+            outerRect2.setAttribute("stroke-dasharray", "1, 3")
+            innerRect2.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            outerRect2.setAttribute("stroke-dasharray", "5, 5")
+            innerRect2.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(outerRect2)
+      svg.appendChild(innerRect2)
+      break
+    case "corner":
+      const corner = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      corner.setAttribute(
+        "d",
+        `M0,0 ` +
+          `L0,${element.height} ` +
+          `L${element.width},${element.height} ` +
+          `L${element.width},${element.height * 0.6} ` +
+          `L${element.width * 0.4},${element.height * 0.6} ` +
+          `L${element.width * 0.4},0 Z`
+      )
+
+      // 设置填充色
+      setBackground(element, corner)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        corner.setAttribute("stroke", element.borderColor || "#000")
+        corner.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            corner.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            corner.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            corner.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(corner)
+      break
+    case "diagStripe":
+      const diagStripe = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 绘制斜纹路径
+      diagStripe.setAttribute(
+        "d",
+        `M${element.width * 0.4},0 ` +
+          `L${element.width},0 ` +
+          `L0,${element.height} ` +
+          `L0,${element.height * 0.4} Z`
+      )
+
+      // 设置填充色
+      setBackground(element, diagStripe)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        diagStripe.setAttribute("stroke", element.borderColor || "#000")
+        diagStripe.setAttribute("stroke-width", element.borderWidth || 1)
+        diagStripe.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            diagStripe.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            diagStripe.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            diagStripe.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(diagStripe)
+      break
+    case "plus":
+      const plus = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      plus.setAttribute(
+        "points",
+        `${element.width * 0.4},0 ` +
+          `${element.width * 0.6},0 ` +
+          `${element.width * 0.6},${element.height * 0.4} ` +
+          `${element.width},${element.height * 0.4} ` +
+          `${element.width},${element.height * 0.6} ` +
+          `${element.width * 0.6},${element.height * 0.6} ` +
+          `${element.width * 0.6},${element.height} ` +
+          `${element.width * 0.4},${element.height} ` +
+          `${element.width * 0.4},${element.height * 0.6} ` +
+          `0,${element.height * 0.6} ` +
+          `0,${element.height * 0.4} ` +
+          `${element.width * 0.4},${element.height * 0.4}`
+      )
+
+      // 设置填充色
+      setBackground(element, plus)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        plus.setAttribute("stroke", element.borderColor || "#000")
+        plus.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            plus.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+          } else if (element.borderType === "dotted") {
+            plus.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            plus.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(plus)
+      break
+    case "can":
+      const can = document.createElementNS("http://www.w3.org/2000/svg", "g")
+
+      // 创建圆柱体的主体部分
+      const cylinderBody = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      cylinderBody.setAttribute(
+        "d",
+        `M0,${element.height * 0.15} ` +
+          `A${element.width / 2},${element.height * 0.15} 0 0 1 ${
+            element.width
+          },${element.height * 0.15} ` +
+          `V${element.height * 0.85} ` +
+          `A${element.width / 2},${element.height * 0.15} 0 0 1 0,${
+            element.height * 0.85
+          } Z`
+      )
+
+      // 创建顶部椭圆
+      const topEllipse = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "ellipse"
+      )
+      topEllipse.setAttribute("cx", element.width / 2)
+      topEllipse.setAttribute("cy", element.height * 0.15)
+      topEllipse.setAttribute("rx", element.width / 2)
+      topEllipse.setAttribute("ry", element.height * 0.15)
+
+      // 设置填充色
+      setBackground(element, cylinderBody)
+      setBackground(element, topEllipse)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        const borderColor = element.borderColor || "#000"
+        const borderWidth = element.borderWidth || 1
+
+        cylinderBody.setAttribute("stroke", borderColor)
+        cylinderBody.setAttribute("stroke-width", borderWidth)
+        topEllipse.setAttribute("stroke", borderColor)
+        topEllipse.setAttribute("stroke-width", borderWidth)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            const dashArray = element.borderStrokeDasharray
+            cylinderBody.setAttribute("stroke-dasharray", dashArray)
+            topEllipse.setAttribute("stroke-dasharray", dashArray)
+          } else if (element.borderType === "dotted") {
+            cylinderBody.setAttribute("stroke-dasharray", "1, 3")
+            topEllipse.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            cylinderBody.setAttribute("stroke-dasharray", "5, 5")
+            topEllipse.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      can.appendChild(cylinderBody)
+      can.appendChild(topEllipse)
+      svg.appendChild(can)
+      break
+    case "cube":
+      const cube = document.createElementNS("http://www.w3.org/2000/svg", "g")
+
+      // 计算关键点坐标
+      const offset = element.width * 0.2
+      const frontX = offset
+      const frontY = offset
+      const frontW = element.width - offset
+      const frontH = element.height
+
+      // 设置立方体的三个面的路径
+      const frontFace = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      frontFace.setAttribute(
+        "d",
+        `M${frontX},${frontY} ` +
+          `L${frontW},${frontY} ` +
+          `L${frontW},${frontH} ` +
+          `L${frontX},${frontH} Z`
+      )
+
+      const rightFace = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      rightFace.setAttribute(
+        "d",
+        `M${frontW},${frontY} ` +
+          `L${element.width},0 ` +
+          `L${element.width},${element.height - offset} ` +
+          `L${frontW},${frontH} Z`
+      )
+
+      const topFace = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      topFace.setAttribute(
+        "d",
+        `M${frontX},${frontY} ` +
+          `L${frontW - offset - frontX},0 ` + // 修改这里：改为从(0,0)开始
+          `L${element.width - offset},0 ` + // 修改这里：使用 offset 来计算右上角的位置
+          `L${element.width},0 ` +
+          `L${frontW},${frontY} Z`
+      )
+
+      // 设置填充色
+      if (element.fill && element.fill.type === "color") {
+        const fillColor = element.fill.value || "transparent"
+        frontFace.setAttribute("fill", fillColor)
+        rightFace.setAttribute("fill", adjustBrightness(fillColor, 0.8))
+        topFace.setAttribute("fill", adjustBrightness(fillColor, 1.2))
+      } else {
+        frontFace.setAttribute("fill", "transparent")
+        rightFace.setAttribute("fill", "transparent")
+        topFace.setAttribute("fill", "transparent")
+      }
+      // 设置边框
+      if (element.borderWidth > 0) {
+        const borderColor = element.borderColor || "#000"
+        const borderWidth = element.borderWidth || 1
+
+        frontFace.setAttribute("stroke", borderColor)
+        frontFace.setAttribute("stroke-width", borderWidth)
+        rightFace.setAttribute("stroke", borderColor)
+        rightFace.setAttribute("stroke-width", borderWidth)
+        topFace.setAttribute("stroke", borderColor)
+        topFace.setAttribute("stroke-width", borderWidth)
+
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          const dashArray =
+            element.borderStrokeDasharray ||
+            (element.borderType === "dotted" ? "1, 3" : "5, 5")
+          frontFace.setAttribute("stroke-dasharray", dashArray)
+          rightFace.setAttribute("stroke-dasharray", dashArray)
+          topFace.setAttribute("stroke-dasharray", dashArray)
+        }
+      }
+
+      // 按正确的顺序添加面（从后到前）
+      cube.appendChild(rightFace)
+      cube.appendChild(topFace)
+      cube.appendChild(frontFace)
+      svg.appendChild(cube)
+      break
+    case "bevel":
+      const bevel = document.createElementNS("http://www.w3.org/2000/svg", "g")
+
+      // 计算关键点坐标
+      const bevelOffset = element.width * 0.2
+      const smallRectX = bevelOffset
+      const smallRectY = bevelOffset
+      const smallRectW = element.width - 2 * bevelOffset
+      const smallRectH = element.height - 2 * bevelOffset
+
+      // 绘制顶部小矩形
+      const topRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      )
+      topRect.setAttribute("x", smallRectX)
+      topRect.setAttribute("y", smallRectY)
+      topRect.setAttribute("width", smallRectW)
+      topRect.setAttribute("height", smallRectH)
+
+      // 绘制四个梯形
+      const topTrapezoid = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      topTrapezoid.setAttribute(
+        "d",
+        `M0,0 L${element.width},0 L${
+          element.width - bevelOffset
+        },${bevelOffset} L${bevelOffset},${bevelOffset} Z`
+      )
+
+      const bottomTrapezoid = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      bottomTrapezoid.setAttribute(
+        "d",
+        `M${bevelOffset},${element.height - bevelOffset} L${
+          element.width - bevelOffset
+        },${element.height - bevelOffset} L${element.width},${
+          element.height
+        } L0,${element.height} Z`
+      )
+
+      const leftTrapezoid = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      leftTrapezoid.setAttribute(
+        "d",
+        `M0,0 L${bevelOffset},${bevelOffset} L${bevelOffset},${
+          element.height - bevelOffset
+        } L0,${element.height} Z`
+      )
+
+      const rightTrapezoid = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      rightTrapezoid.setAttribute(
+        "d",
+        `M${element.width},0 L${element.width},${element.height} L${
+          element.width - bevelOffset
+        },${element.height - bevelOffset} L${
+          element.width - bevelOffset
+        },${bevelOffset} Z`
+      )
+
+      // 设置填充色
+      if (element.fill && element.fill.type === "color") {
+        const fillColor = element.fill.value || "transparent"
+        topRect.setAttribute("fill", fillColor)
+        topTrapezoid.setAttribute("fill", adjustBrightness(fillColor, 1.2))
+        bottomTrapezoid.setAttribute(
+          "fill",
+          adjustBrightness(fillColor, 0.8)
+        )
+        leftTrapezoid.setAttribute(
+          "fill",
+          adjustBrightness(fillColor, 0.9)
+        )
+        rightTrapezoid.setAttribute(
+          "fill",
+          adjustBrightness(fillColor, 0.7)
+        )
+      } else {
+        topRect.setAttribute("fill", "transparent")
+        topTrapezoid.setAttribute("fill", "transparent")
+        bottomTrapezoid.setAttribute("fill", "transparent")
+        leftTrapezoid.setAttribute("fill", "transparent")
+        rightTrapezoid.setAttribute("fill", "transparent")
+      }
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        const borderColor = element.borderColor || "#000"
+        const borderWidth = element.borderWidth || 1
+        const parts = [
+          topRect,
+          topTrapezoid,
+          bottomTrapezoid,
+          leftTrapezoid,
+          rightTrapezoid,
+        ]
+
+        parts.forEach((part) => {
+          part.setAttribute("stroke", borderColor)
+          part.setAttribute("stroke-width", borderWidth)
+
+          if (
+            element.borderType === "dotted" ||
+            element.borderType === "dashed"
+          ) {
+            const dashArray =
+              element.borderStrokeDasharray ||
+              (element.borderType === "dotted" ? "1, 3" : "5, 5")
+            part.setAttribute("stroke-dasharray", dashArray)
+          }
+        })
+      }
+
+      // 按正确的顺序添加面（从后到前）
+      bevel.appendChild(bottomTrapezoid)
+      bevel.appendChild(leftTrapezoid)
+      bevel.appendChild(rightTrapezoid)
+      bevel.appendChild(topTrapezoid)
+      bevel.appendChild(topRect)
+      svg.appendChild(bevel)
+      break
+    case "donut":
+      const donut = document.createElementNS("http://www.w3.org/2000/svg", "g")
+
+      // 外圆
+      const outerCircle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "circle"
+      )
+      outerCircle.setAttribute("cx", element.width / 2)
+      outerCircle.setAttribute("cy", element.height / 2)
+      outerCircle.setAttribute("r", Math.min(element.width, element.height) / 2)
+
+      // 内圆
+      const innerCircle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "circle"
+      )
+      innerCircle.setAttribute("cx", element.width / 2)
+      innerCircle.setAttribute("cy", element.height / 2)
+      innerCircle.setAttribute("r", Math.min(element.width, element.height) / 4)
+
+      // 设置填充色
+      setBackground(element, outerCircle)
+      innerCircle.setAttribute("fill", "white")
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        const borderColor = element.borderColor || "#000"
+        const borderWidth = element.borderWidth || 1
+
+        outerCircle.setAttribute("stroke", borderColor)
+        outerCircle.setAttribute("stroke-width", borderWidth)
+        innerCircle.setAttribute("stroke", borderColor)
+        innerCircle.setAttribute("stroke-width", borderWidth)
+
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          const dashArray =
+            element.borderStrokeDasharray ||
+            (element.borderType === "dotted" ? "1, 3" : "5, 5")
+          outerCircle.setAttribute("stroke-dasharray", dashArray)
+          innerCircle.setAttribute("stroke-dasharray", dashArray)
+        }
+      }
+
+      donut.appendChild(outerCircle)
+      donut.appendChild(innerCircle)
+      svg.appendChild(donut)
+      break
+    case "noSmoking":
+      const noSmoking = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "g"
+      )
+
+      // 创建路径
+      const path = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      path.setAttribute(
+        "d",
+        "M0,70 A77,70 0 1,1 0,71 Z M123.80284467265982,99.39738105155146 A57.5386,50.5386 0 0 0 45.160427644134444,27.90427466198293 Z M30.197155327340184,40.602618948448544 A57.5386,50.5386 0 0 0 108.83957235586556,112.09572533801708 Z"
+      )
+      path.setAttribute("fill", "rgba(255,217,102,1)")
+      path.setAttribute("stroke", "rgba(23,44,81,1)")
+      path.setAttribute("stroke-width", "1px")
+      path.setAttribute("stroke-dasharray", "")
+      path.setAttribute("stroke-linecap", "butt")
+      path.setAttribute("stroke-linejoin", "round")
+
+      noSmoking.appendChild(path)
+      svg.appendChild(noSmoking)
+      break
+    case "rightArrow":
+      const rightArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      rightArrow.setAttribute(
+        "points",
+        `0,${element.height * 0.3} ${element.width * 0.7},${
+          element.height * 0.3
+        } ` +
+          `${element.width * 0.7},0 ${element.width},${element.height * 0.5} ` +
+          `${element.width * 0.7},${element.height} ${element.width * 0.7},${
+            element.height * 0.7
+          } ` +
+          `0,${element.height * 0.7}`
+      )
+
+      // 设置填充色
+      setBackground(element, rightArrow)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        rightArrow.setAttribute("stroke", element.borderColor || "#000")
+        rightArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            rightArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            rightArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            rightArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(rightArrow)
+      break
+    case "leftArrow":
+      const leftArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      leftArrow.setAttribute(
+        "points",
+        `${element.width},${element.height * 0.3} ${element.width * 0.3},${
+          element.height * 0.3
+        } ` +
+          `${element.width * 0.3},0 0,${element.height * 0.5} ` +
+          `${element.width * 0.3},${element.height} ${element.width * 0.3},${
+            element.height * 0.7
+          } ` +
+          `${element.width},${element.height * 0.7}`
+      )
+
+      // 设置填充色
+      setBackground(element, leftArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftArrow.setAttribute("stroke", element.borderColor || "#000")
+        leftArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftArrow)
+      break
+    case "upArrow":
+      const upArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      upArrow.setAttribute(
+        "points",
+        `${element.width * 0.3},${element.height} ${element.width * 0.3},${
+          element.height * 0.3
+        } ` +
+          `0,${element.height * 0.3} ${element.width * 0.5},0 ` +
+          `${element.width},${element.height * 0.3} ${element.width * 0.7},${
+            element.height * 0.3
+          } ` +
+          `${element.width * 0.7},${element.height}`
+      )
+
+      // 设置填充色
+      setBackground(element, upArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        upArrow.setAttribute("stroke", element.borderColor || "#000")
+        upArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            upArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            upArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            upArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(upArrow)
+      break
+    case "downArrow":
+      const downArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      downArrow.setAttribute(
+        "points",
+        `${element.width * 0.3},0 ${element.width * 0.3},${
+          element.height * 0.7
+        } ` +
+          `0,${element.height * 0.7} ${element.width * 0.5},${
+            element.height
+          } ` +
+          `${element.width},${element.height * 0.7} ${element.width * 0.7},${
+            element.height * 0.7
+          } ` +
+          `${element.width * 0.7},0`
+      )
+
+      // 设置填充色
+      setBackground(element, downArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        downArrow.setAttribute("stroke", element.borderColor || "#000")
+        downArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            downArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            downArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            downArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(downArrow)
+      break
+    case "leftRightArrow":
+      const leftRightArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      leftRightArrow.setAttribute(
+        "points",
+        `0,${element.height * 0.5} ${element.width * 0.2},${
+          element.height * 0.2
+        } ` +
+          `${element.width * 0.2},${element.height * 0.4} ${
+            element.width * 0.8
+          },${element.height * 0.4} ` +
+          `${element.width * 0.8},${element.height * 0.2} ${element.width},${
+            element.height * 0.5
+          } ` +
+          `${element.width * 0.8},${element.height * 0.8} ${
+            element.width * 0.8
+          },${element.height * 0.6} ` +
+          `${element.width * 0.2},${element.height * 0.6} ${
+            element.width * 0.2
+          },${element.height * 0.8}`
+      )
+
+      // 设置填充色
+      setBackground(element, leftRightArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftRightArrow.setAttribute("stroke", element.borderColor || "#000")
+        leftRightArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftRightArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftRightArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftRightArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftRightArrow)
+      break
+    case "upDownArrow":
+      const upDownArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      upDownArrow.setAttribute(
+        "points",
+        `${element.width * 0.5},0 ${element.width * 0.3},${
+          element.height * 0.2
+        } ` +
+          `${element.width * 0.4},${element.height * 0.2} ${
+            element.width * 0.4
+          },${element.height * 0.8} ` +
+          `${element.width * 0.3},${element.height * 0.8} ${
+            element.width * 0.5
+          },${element.height} ` +
+          `${element.width * 0.7},${element.height * 0.8} ${
+            element.width * 0.6
+          },${element.height * 0.8} ` +
+          `${element.width * 0.6},${element.height * 0.2} ${
+            element.width * 0.7
+          },${element.height * 0.2}`
+      )
+
+      // 设置填充色
+      setBackground(element, upDownArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        upDownArrow.setAttribute("stroke", element.borderColor || "#000")
+        upDownArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            upDownArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            upDownArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            upDownArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(upDownArrow)
+      break
+    case "quadArrow":
+      const quadArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算缩放比例
+      const scale = Math.min(element.width / 167, element.height / 121)
+      const offsetX = (element.width - 167 * scale) / 2
+      const offsetY = (element.height - 121 * scale) / 2
+
+      // 构建路径数据
+      const pathData = `
+            M${offsetX},${60.5 * scale + offsetY}
+            L${27.225 * scale + offsetX},${33.275 * scale + offsetY}
+            L${27.225 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${27.225 * scale + offsetY}
+            L${56.275 * scale + offsetX},${27.225 * scale + offsetY}
+            L${83.5 * scale + offsetX},${offsetY}
+            L${110.725 * scale + offsetX},${27.225 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${27.225 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${139.775 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${139.775 * scale + offsetX},${33.275 * scale + offsetY}
+            L${167 * scale + offsetX},${60.5 * scale + offsetY}
+            L${139.775 * scale + offsetX},${87.725 * scale + offsetY}
+            L${139.775 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${93.775 * scale + offsetY}
+            L${110.725 * scale + offsetX},${93.775 * scale + offsetY}
+            L${83.5 * scale + offsetX},${121 * scale + offsetY}
+            L${56.275 * scale + offsetX},${93.775 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${93.775 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${27.225 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${27.225 * scale + offsetX},${87.725 * scale + offsetY}
+            Z`
+
+      quadArrow.setAttribute("d", pathData)
+
+      // 设置填充色
+      setBackground(element, quadArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        quadArrow.setAttribute("stroke", element.borderColor || "#000")
+        quadArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        quadArrow.setAttribute("stroke-linecap", "butt")
+        quadArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            quadArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            quadArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            quadArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(quadArrow)
+      break
+    case "leftRightUpArrow":
+      const leftRightUpArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算缩放比例
+      const scale2 = Math.min(element.width / 167, element.height / 121)
+      const offsetX2 = (element.width - 167 * scale2) / 2
+      const offsetY2 = (element.height - 121 * scale2) / 2
+
+      // 构建路径数据
+      const pathData2 = `
+            M${offsetX2},${60.5 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${69.8875 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${69.8875 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${56.275 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${83.5 * scale2 + offsetX2},${offsetY2}
+            L${110.725 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${97.1125 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${97.1125 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
+            L${167 * scale2 + offsetX2},${60.5 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${97.1125 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${69.8875 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
+            Z`
+
+      leftRightUpArrow.setAttribute("d", pathData2)
+
+      // 设置填充色
+      setBackground(element, leftRightUpArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftRightUpArrow.setAttribute("stroke", element.borderColor || "#000")
+        leftRightUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        leftRightUpArrow.setAttribute("stroke-linecap", "butt")
+        leftRightUpArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftRightUpArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftRightUpArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftRightUpArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftRightUpArrow)
+      break
+    case "bentArrow":
+      const bentArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 构建路径数据
+      const pathData3 = `
+            M0,${element.height * 0.88}
+            L0,${element.height * 0.495}
+            A${element.width * 0.385} ${element.height * 0.385} 0 0 1 ${
+        element.width * 0.385
+      } ${element.height * 0.11}
+            L${element.width * 0.67},${element.height * 0.11}
+            L${element.width * 0.67},0
+            L${element.width * 0.89},${element.height * 0.22}
+            L${element.width * 0.67},${element.height * 0.44}
+            L${element.width * 0.67},${element.height * 0.33}
+            L${element.width * 0.385},${element.height * 0.33}
+            A${element.width * 0.165} ${element.height * 0.165} 0 0 0 ${
+        element.width * 0.22
+      } ${element.height * 0.495}
+            L${element.width * 0.22},${element.height * 0.88}
+            Z`
+
+      bentArrow.setAttribute("d", pathData3)
+
+      // 设置填充色
+      setBackground(element, bentArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        bentArrow.setAttribute("stroke", element.borderColor || "#000")
+        bentArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        bentArrow.setAttribute("stroke-linecap", "butt")
+        bentArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            bentArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            bentArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            bentArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(bentArrow)
+      break
+    case "parallelogram":
+      const parallelogram = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      parallelogram.setAttribute(
+        "points",
+        `${element.width * 0.25},0 ${element.width},0 ${element.width * 0.75},${
+          element.height
+        } 0,${element.height}`
+      )
+
+      // 设置填充色
+      setBackground(element, parallelogram)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        parallelogram.setAttribute("stroke", element.borderColor || "#000")
+        parallelogram.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            parallelogram.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            parallelogram.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            parallelogram.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(parallelogram)
+      break
+    case "uturnArrow":
+      const uturnArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 构建路径数据
+      const pathDataUturn = `
+            M0,${element.height * 0.745}
+            L0,${element.height * 0.179375}
+            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
+        element.width * 0.179375
+      },0
+            L${element.width * 0.179375},0
+            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
+        element.width * 0.359375
+      },${element.height * 0.179375}
+            L${element.width * 0.359375},${element.height * 0.205}
+            L${element.width * 0.41},${element.height * 0.205}
+            L${element.width * 0.3075},${element.height * 0.3075}
+            L${element.width * 0.205},${element.height * 0.205}
+            L${element.width * 0.25625},${element.height * 0.205}
+            L${element.width * 0.25625},${element.height * 0.179375}
+            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
+        element.width * 0.179375
+      },${element.height * 0.1025}
+            L${element.width * 0.179375},${element.height * 0.1025}
+            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
+        element.width * 0.1025
+      },${element.height * 0.179375}
+            L${element.width * 0.1025},${element.height * 0.745}
+            Z`
+
+      uturnArrow.setAttribute("d", pathDataUturn)
+
+      // 设置填充色
+      setBackground(element, uturnArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        uturnArrow.setAttribute("stroke", element.borderColor || "#000")
+        uturnArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        uturnArrow.setAttribute("stroke-linecap", "butt")
+        uturnArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            uturnArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            uturnArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            uturnArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(uturnArrow)
+      break
+    case "leftUpArrow":
+      const leftUpArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 使用提供的路径数据
+      const pathDataLeftUp = `
+            M0,${element.height * 0.65}
+            L${element.width * 0.15},${element.height * 0.4}
+            L${element.width * 0.15},${element.height * 0.55}
+            L${element.width * 0.5},${element.height * 0.55}
+            L${element.width * 0.5},${element.height * 0.1}
+            L${element.width * 0.35},${element.height * 0.1}
+            L${element.width * 0.65},0
+            L${element.width * 0.85},${element.height * 0.1}
+            L${element.width * 0.75},${element.height * 0.1}
+            L${element.width * 0.75},${element.height * 0.85}
+            L${element.width * 0.15},${element.height * 0.85}
+            L${element.width * 0.15},${element.height * 1}
+            Z`
+
+      leftUpArrow.setAttribute("d", pathDataLeftUp)
+
+      // 设置填充色
+      setBackground(element, leftUpArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftUpArrow.setAttribute("stroke", element.borderColor || "#000")
+        leftUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        leftUpArrow.setAttribute("stroke-linecap", "butt")
+        leftUpArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftUpArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftUpArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftUpArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftUpArrow)
+      break
+    case "bentUpArrow":
+      const bentUpArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 构建路径数据，去掉左侧箭头
+      // 使用提供的路径数据
+      const pathDataBentUp = `
+            M0,${element.height * 0.89}
+            L0,${element.height * 0.7}
+            L${element.width * 0.575},${element.height * 0.7}
+            L${element.width * 0.575},${element.height * 0.2}
+            L${element.width * 0.46},${element.height * 0.2}
+            L${element.width * 0.69},0
+            L${element.width * 0.92},${element.height * 0.2}
+            L${element.width * 0.805},${element.height * 0.2}
+            L${element.width * 0.805},${element.height * 0.89}
+            Z`
+
+      bentUpArrow.setAttribute("d", pathDataBentUp)
+
+      // 设置填充色
+      setBackground(element, bentUpArrow)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        bentUpArrow.setAttribute("stroke", element.borderColor || "#000")
+        bentUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        bentUpArrow.setAttribute("stroke-linecap", "butt")
+        bentUpArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            bentUpArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            bentUpArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            bentUpArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(bentUpArrow)
+      break
+    case "curvedRightArrow":
+      const curvedRightArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 使用提供的路径数据
+      const pathDataCurvedRight = `
+            M${element.width},0
+            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
+        element.height * 0.4
+      }
+            L0,${element.height * 0.5}
+            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
+        element.height * 0.15
+      }
+            Z
+            M0,${element.height * 0.4}
+            A${element.width} ${element.height * 0.4} 0 0 0 ${
+        element.width * 0.8
+      } ${element.height * 0.8}
+            L${element.width * 0.8},${element.height * 0.75}
+            L${element.width},${element.height * 0.875}
+            L${element.width * 0.8},${element.height * 1}
+            L${element.width * 0.8},${element.height * 0.95}
+            A${element.width} ${element.height * 0.4} 0 0 1 0 ${
+        element.height * 0.5
+      }
+            Z`
+
+      curvedRightArrow.setAttribute("d", pathDataCurvedRight)
+
+      // 设置填充色
+      setBackground(element, curvedRightArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        curvedRightArrow.setAttribute("stroke", element.borderColor || "#000")
+        curvedRightArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        curvedRightArrow.setAttribute("stroke-linecap", "butt")
+        curvedRightArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            curvedRightArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            curvedRightArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            curvedRightArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(curvedRightArrow)
+      break
+    case "curvedLeftArrow":
+      const curvedLeftArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 定义左弧形箭头的路径数据
+      const pathDataCurvedLeft = `
+            M0,0
+            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
+        element.height * 0.4
+      }
+            L${element.width},${element.height * 0.55}
+            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
+        element.height * 0.15
+      }
+            Z
+            M0,${element.height * 0.85}
+            L${element.width * 0.25},${element.height * 0.65}
+            L${element.width * 0.25},${element.height * 0.75}
+            A${element.width} ${element.height * 0.4} 0 0 0 ${element.width} ${
+        element.height * 0.4
+      }
+            L${element.width},${element.height * 0.5}
+            L${element.width},${element.height * 0.5}
+            A${element.width} ${element.height * 0.4} 0 0 1 ${
+        element.width * 0.25
+      } ${element.height * 0.9}
+            L${element.width * 0.25},${element.height}
+            Z`
+
+      curvedLeftArrow.setAttribute("d", pathDataCurvedLeft)
+
+      // 设置填充色
+      setBackground(element, curvedLeftArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        curvedLeftArrow.setAttribute("stroke", element.borderColor || "#000")
+        curvedLeftArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        curvedLeftArrow.setAttribute("stroke-linecap", "butt")
+        curvedLeftArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            curvedLeftArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            curvedLeftArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            curvedLeftArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(curvedLeftArrow)
+      break
+    case "curvedUpArrow":
+      const curvedUpArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 定义上弧形箭头的路径数据
+      const pathDataCurvedUp = `
+            M${element.width * 0.905},0
+            L${element.width * 0.81},${element.height * 0.25}
+            L${element.width * 0.857},${element.height * 0.25}
+            A${element.width * 0.428} ${element.height} 0 0 1 ${
+        element.width * 0.428
+      },${element.height}
+            L${element.width * 0.522},${element.height}
+            A${element.width * 0.428} ${element.height} 0 0 0 ${
+        element.width * 0.952
+      },${element.height * 0.25}
+            L${element.width},${element.height * 0.25}
+            Z
+            M${element.width * 0.094},0
+            L0,0
+            A${element.width * 0.428} ${element.height} 0 0 0 ${
+        element.width * 0.428
+      },${element.height}
+            L${element.width * 0.522},${element.height}
+            A${element.width * 0.428} ${element.height} 0 0 1 ${
+        element.width * 0.094
+      },0
+            Z`
+
+      curvedUpArrow.setAttribute("d", pathDataCurvedUp)
+
+      // 设置填充色
+      setBackground(element, curvedUpArrow)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        curvedUpArrow.setAttribute("stroke", element.borderColor || "#000")
+        curvedUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        curvedUpArrow.setAttribute("stroke-linecap", "butt")
+        curvedUpArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            curvedUpArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            curvedUpArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            curvedUpArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(curvedUpArrow)
+      break
+    case "curvedDownArrow":
+      const curvedDownArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 定义下弧形箭头的路径数据
+      const pathDataCurvedDown = `
+            M0,${element.height}
+            L${element.width * 0.16},${element.height}
+            A${element.width * 0.46} ${element.height} 0 0 1 ${
+        element.width * 0.62
+      },0
+            L${element.width * 0.46},0
+            A${element.width * 0.46} ${element.height} 0 0 0 0,${element.height}
+            Z
+            M${element.width},${element.height}
+            L${element.width * 0.84},${element.height * 0.75}
+            L${element.width * 0.92},${element.height * 0.75}
+            A${element.width * 0.46} ${element.height} 0 0 0 ${
+        element.width * 0.46
+      },0
+            L${element.width * 0.62},0
+            A${element.width * 0.46} ${element.height} 0 0 1 ${
+        element.width * 1.08
+      },${element.height * 0.75}
+            L${element.width * 1.16},${element.height * 0.75}
+            Z`
+
+      curvedDownArrow.setAttribute("d", pathDataCurvedDown)
+
+      // 设置填充色
+      setBackground(element, curvedDownArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        curvedDownArrow.setAttribute("stroke", element.borderColor || "#000")
+        curvedDownArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        curvedDownArrow.setAttribute("stroke-linecap", "butt")
+        curvedDownArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            curvedDownArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            curvedDownArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            curvedDownArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(curvedDownArrow)
+      break
+    case "stripedRightArrow":
+      const stripedRightArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "g"
+      )
+
+      // 主箭头部分
+      const mainArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      mainArrow.setAttribute(
+        "d",
+        `M${element.width * 0.062},${element.height * 0.25}
+            L${element.width * 0.8},${element.height * 0.25}
+            L${element.width * 0.8},0
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.8},${element.height}
+            L${element.width * 0.8},${element.height * 0.75}
+            L${element.width * 0.062},${element.height * 0.75}
+            Z`
+      )
+
+      // 第一条尾部条纹
+      const stripe1 = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      stripe1.setAttribute(
+        "d",
+        `M0,${element.height * 0.25}
+            L${element.width * 0.012},${element.height * 0.25}
+            L${element.width * 0.012},${element.height * 0.75}
+            L0,${element.height * 0.75}
+            Z`
+      )
+
+      // 第二条尾部条纹
+      const stripe2 = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      stripe2.setAttribute(
+        "d",
+        `M${element.width * 0.025},${element.height * 0.25}
+            L${element.width * 0.049},${element.height * 0.25}
+            L${element.width * 0.049},${element.height * 0.75}
+            L${element.width * 0.025},${element.height * 0.75}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, mainArrow)
+      setBackground(element, stripe1)
+      setBackground(element, stripe2)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        ;[mainArrow, stripe1, stripe2].forEach((path) => {
+          path.setAttribute("stroke", element.borderColor || "#000")
+          path.setAttribute("stroke-width", element.borderWidth || 1)
+          path.setAttribute("stroke-linecap", "butt")
+          path.setAttribute("stroke-linejoin", "round")
+
+          // 处理虚线边框
+          if (
+            element.borderType === "dotted" ||
+            element.borderType === "dashed"
+          ) {
+            if (element.borderStrokeDasharray) {
+              path.setAttribute(
+                "stroke-dasharray",
+                element.borderStrokeDasharray
+              )
+            } else if (element.borderType === "dotted") {
+              path.setAttribute("stroke-dasharray", "1, 3")
+            } else if (element.borderType === "dashed") {
+              path.setAttribute("stroke-dasharray", "5, 5")
+            }
+          }
+        })
+      }
+
+      stripedRightArrow.appendChild(mainArrow)
+      stripedRightArrow.appendChild(stripe1)
+      stripedRightArrow.appendChild(stripe2)
+      svg.appendChild(stripedRightArrow)
+      break
+    case "rightArrowCallout":
+      const rightArrowCallout = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      rightArrowCallout.setAttribute(
+        "d",
+        `M0,0
+            L${element.width * 0.44},0
+            L${element.width * 0.44},${element.height * 0.375}
+            L${element.width * 0.79},${element.height * 0.375}
+            L${element.width * 0.79},${element.height * 0.25}
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.79},${element.height * 0.75}
+            L${element.width * 0.79},${element.height * 0.625}
+            L${element.width * 0.44},${element.height * 0.625}
+            L${element.width * 0.44},${element.height}
+            L0,${element.height}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, rightArrowCallout)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        rightArrowCallout.setAttribute("stroke", element.borderColor || "#000")
+        rightArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
+        rightArrowCallout.setAttribute("stroke-linecap", "butt")
+        rightArrowCallout.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            rightArrowCallout.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            rightArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            rightArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(rightArrowCallout)
+      break
+    case "leftRightArrowCallout":
+      const leftRightArrowCallout = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      leftRightArrowCallout.setAttribute(
+        "d",
+        `M0,${element.height * 0.5}
+            L${element.width * 0.139},${element.height * 0.25}
+            L${element.width * 0.139},${element.height * 0.375}
+            L${element.width * 0.364},${element.height * 0.375}
+            L${element.width * 0.364},0
+            L${element.width * 0.636},0
+            L${element.width * 0.636},${element.height * 0.375}
+            L${element.width * 0.861},${element.height * 0.375}
+            L${element.width * 0.861},${element.height * 0.25}
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.861},${element.height * 0.75}
+            L${element.width * 0.861},${element.height * 0.625}
+            L${element.width * 0.636},${element.height * 0.625}
+            L${element.width * 0.636},${element.height}
+            L${element.width * 0.364},${element.height}
+            L${element.width * 0.364},${element.height * 0.625}
+            L${element.width * 0.139},${element.height * 0.625}
+            L${element.width * 0.139},${element.height * 0.75}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, leftRightArrowCallout)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftRightArrowCallout.setAttribute(
+          "stroke",
+          element.borderColor || "#000"
+        )
+        leftRightArrowCallout.setAttribute(
+          "stroke-width",
+          element.borderWidth || 1
+        )
+        leftRightArrowCallout.setAttribute("stroke-linecap", "butt")
+        leftRightArrowCallout.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftRightArrowCallout.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftRightArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftRightArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftRightArrowCallout)
+      break
+    case "quadArrowCallout":
+      const quadArrowCallout = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      quadArrowCallout.setAttribute(
+        "d",
+        `M0,${element.height * 0.5}
+            L${element.width * 0.096},${element.height * 0.315}
+            L${element.width * 0.096},${element.height * 0.407}
+            L${element.width * 0.26},${element.height * 0.407}
+            L${element.width * 0.26},${element.height * 0.259}
+            L${element.width * 0.453},${element.height * 0.259}
+            L${element.width * 0.453},${element.height * 0.185}
+            L${element.width * 0.405},${element.height * 0.185}
+            L${element.width * 0.5},0
+            L${element.width * 0.595},${element.height * 0.185}
+            L${element.width * 0.547},${element.height * 0.185}
+            L${element.width * 0.547},${element.height * 0.259}
+            L${element.width * 0.74},${element.height * 0.259}
+            L${element.width * 0.74},${element.height * 0.407}
+            L${element.width * 0.904},${element.height * 0.407}
+            L${element.width * 0.904},${element.height * 0.315}
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.904},${element.height * 0.685}
+            L${element.width * 0.904},${element.height * 0.593}
+            L${element.width * 0.74},${element.height * 0.593}
+            L${element.width * 0.74},${element.height * 0.741}
+            L${element.width * 0.547},${element.height * 0.741}
+            L${element.width * 0.547},${element.height * 0.815}
+            L${element.width * 0.595},${element.height * 0.815}
+            L${element.width * 0.5},${element.height}
+            L${element.width * 0.405},${element.height * 0.815}
+            L${element.width * 0.453},${element.height * 0.815}
+            L${element.width * 0.453},${element.height * 0.741}
+            L${element.width * 0.26},${element.height * 0.741}
+            L${element.width * 0.26},${element.height * 0.593}
+            L${element.width * 0.096},${element.height * 0.593}
+            L${element.width * 0.096},${element.height * 0.685}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, quadArrowCallout)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        quadArrowCallout.setAttribute("stroke", element.borderColor || "#000")
+        quadArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
+        quadArrowCallout.setAttribute("stroke-linecap", "butt")
+        quadArrowCallout.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            quadArrowCallout.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            quadArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            quadArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(quadArrowCallout)
+      break
+    case "leftArrowCallout":
+      const leftArrowCallout = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      leftArrowCallout.setAttribute(
+        "d",
+        `M0,${element.height * 0.5}
+            L${element.width * 0.183},${element.height * 0.25}
+            L${element.width * 0.183},${element.height * 0.375}
+            L${element.width * 0.35},${element.height * 0.375}
+            L${element.width * 0.35},0
+            L${element.width},0
+            L${element.width},${element.height}
+            L${element.width * 0.35},${element.height}
+            L${element.width * 0.35},${element.height * 0.625}
+            L${element.width * 0.183},${element.height * 0.625}
+            L${element.width * 0.183},${element.height * 0.75}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, leftArrowCallout)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftArrowCallout.setAttribute("stroke", element.borderColor || "#000")
+        leftArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
+        leftArrowCallout.setAttribute("stroke-linecap", "butt")
+        leftArrowCallout.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftArrowCallout.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftArrowCallout)
+      break
+    case "upArrowCallout":
+      const upArrowCallout = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      upArrowCallout.setAttribute(
+        "d",
+        `M0,${element.height * 0.35}
+            L${element.width * 0.41},${element.height * 0.35}
+            L${element.width * 0.41},${element.height * 0.25}
+            L${element.width * 0.32},${element.height * 0.25}
+            L${element.width * 0.5},0
+            L${element.width * 0.68},${element.height * 0.25}
+            L${element.width * 0.59},${element.height * 0.25}
+            L${element.width * 0.59},${element.height * 0.35}
+            L${element.width},${element.height * 0.35}
+            L${element.width},${element.height}
+            L0,${element.height}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, upArrowCallout)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        upArrowCallout.setAttribute("stroke", element.borderColor || "#000")
+        upArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
+        upArrowCallout.setAttribute("stroke-linecap", "butt")
+        upArrowCallout.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            upArrowCallout.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            upArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            upArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(upArrowCallout)
+      break
+    case "notchedRightArrow":
+      const notchedRightArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      notchedRightArrow.setAttribute(
+        "d",
+        `M0,${element.height * 0.25}
+            L${element.width * 0.83},${element.height * 0.25}
+            L${element.width * 0.83},0
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.83},${element.height}
+            L${element.width * 0.83},${element.height * 0.75}
+            L0,${element.height * 0.75}
+            L${element.width * 0.086},${element.height * 0.5}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, notchedRightArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        notchedRightArrow.setAttribute("stroke", element.borderColor || "#000")
+        notchedRightArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        notchedRightArrow.setAttribute("stroke-linecap", "butt")
+        notchedRightArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            notchedRightArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            notchedRightArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            notchedRightArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(notchedRightArrow)
+      break
+    case "homePlate":
+      const homePlate = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      homePlate.setAttribute(
+        "d",
+        `M0,0
+            L${element.width * 0.925},0
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.925},${element.height}
+            L0,${element.height}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, homePlate)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        homePlate.setAttribute("stroke", element.borderColor || "#000")
+        homePlate.setAttribute("stroke-width", element.borderWidth || 1)
+        homePlate.setAttribute("stroke-linecap", "butt")
+        homePlate.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            homePlate.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            homePlate.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            homePlate.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(homePlate)
+      break
+    case "rightTriangle":
+      const rightTriangle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      rightTriangle.setAttribute(
+        "points",
+        `0,0 ${element.width},${element.height} 0,${element.height}`
+      )
+
+      // 设置填充色
+      setBackground(element, rightTriangle)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        rightTriangle.setAttribute("stroke", element.borderColor || "#000")
+        rightTriangle.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            rightTriangle.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            rightTriangle.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            rightTriangle.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(rightTriangle)
+      break
+    case "semiCircle":
+      const semiCircle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      semiCircle.setAttribute(
+        "d",
+        `M0,${element.height} A${element.width / 2},${element.height} 0 0,1 ${
+          element.width
+        },${element.height} Z`
+      )
+
+      // 设置填充色
+      setBackground(element, semiCircle)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        semiCircle.setAttribute("stroke", element.borderColor || "#000")
+        semiCircle.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            semiCircle.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            semiCircle.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            semiCircle.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(semiCircle)
+      break
+
+    case "star":
+      const star = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      const cx = element.width / 2
+      const cy = element.height / 2
+      const outerRadius = Math.min(element.width, element.height) / 2
+      const innerRadius = outerRadius * 0.4
+      let starPoints = ""
+
+      for (let i = 0; i < 10; i++) {
+        const radius = i % 2 === 0 ? outerRadius : innerRadius
+        const angle = (Math.PI * i) / 5
+        const x = cx + radius * Math.sin(angle)
+        const y = cy - radius * Math.cos(angle)
+        starPoints += `${x},${y} `
+      }
+
+      star.setAttribute("points", starPoints.trim())
+
+      // 设置填充色
+      setBackground(element, star)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        star.setAttribute("stroke", element.borderColor || "#000")
+        star.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            star.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+          } else if (element.borderType === "dotted") {
+            star.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            star.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(star)
+      break
+
+    case "cross":
+      const cross = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      cross.setAttribute(
+        "points",
+        `${element.width * 0.35},0 ${element.width * 0.65},0 ${
+          element.width * 0.65
+        },${element.height * 0.35} ` +
+          `${element.width},${element.height * 0.35} ${element.width},${
+            element.height * 0.65
+          } ` +
+          `${element.width * 0.65},${element.height * 0.65} ${
+            element.width * 0.65
+          },${element.height} ` +
+          `${element.width * 0.35},${element.height} ${element.width * 0.35},${
+            element.height * 0.65
+          } ` +
+          `0,${element.height * 0.65} 0,${element.height * 0.35} ${
+            element.width * 0.35
+          },${element.height * 0.35}`
+      )
+
+      // 设置填充色
+      setBackground(element, cross)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        cross.setAttribute("stroke", element.borderColor || "#000")
+        cross.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            cross.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            cross.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            cross.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(cross)
+      break
+
+    case "chevron":
+      const chevron = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+
+      chevron.setAttribute(
+        "points",
+        `${element.width * 0.5},0 ${element.width},${element.height * 0.5} ` +
+          `${element.width * 0.5},${element.height} ` +
+          `0,${element.height} ${element.width * 0.5},${
+            element.height * 0.5
+          } 0,0`
+      )
+
+      // 设置填充色
+      setBackground(element, chevron)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        chevron.setAttribute("stroke", element.borderColor || "#000")
+        chevron.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            chevron.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            chevron.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            chevron.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(chevron)
+      break
+
+    case "frame":
+      // 创建外框和内框
+      const outerRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      )
+      outerRect.setAttribute("x", 0)
+      outerRect.setAttribute("y", 0)
+      outerRect.setAttribute("width", element.width)
+      outerRect.setAttribute("height", element.height)
+
+      const innerRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      )
+      const frameWidth = element.width / 10
+      innerRect.setAttribute("x", frameWidth)
+      innerRect.setAttribute("y", frameWidth)
+      innerRect.setAttribute("width", element.width - frameWidth * 2)
+      innerRect.setAttribute("height", element.height - frameWidth * 2)
+
+      // 设置填充色
+      setBackground(element, outerRect)
+      innerRect.setAttribute("fill", "white") // 内框为白色
+      // 设置边框
+      if (element.borderWidth > 0) {
+        outerRect.setAttribute("stroke", element.borderColor || "#000")
+        outerRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            outerRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            outerRect.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            outerRect.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(outerRect)
+      svg.appendChild(innerRect)
+      break
+
+    case "cloud":
+      // 使用路径绘制云形
+      const cloud = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      const w = element.width
+      const h = element.height
+
+      cloud.setAttribute(
+        "d",
+        `M${w * 0.2},${h * 0.6} ` +
+          `C${w * 0.05},${h * 0.6} ${w * 0.05},${h * 0.3} ${w * 0.2},${
+            h * 0.3
+          } ` +
+          `C${w * 0.2},${h * 0.1} ${w * 0.45},${h * 0.1} ${w * 0.5},${
+            h * 0.3
+          } ` +
+          `C${w * 0.55},${h * 0.1} ${w * 0.8},${h * 0.1} ${w * 0.8},${
+            h * 0.3
+          } ` +
+          `C${w * 0.95},${h * 0.3} ${w * 0.95},${h * 0.6} ${w * 0.8},${
+            h * 0.6
+          } ` +
+          `L${w * 0.2},${h * 0.6} Z`
+      )
+
+      // 设置填充色
+      setBackground(element, cloud)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        cloud.setAttribute("stroke", element.borderColor || "#000")
+        cloud.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            cloud.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            cloud.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            cloud.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(cloud)
+      break
+    case "blockArc":
+      const blockArc = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算弧形参数
+      const rx = element.width / 2
+      const ry = element.height / 2
+      const innerRatio = 0.86 // 根据示例计算的内弧半径比例
+      const innerRx = rx * innerRatio
+      const innerRy = ry * innerRatio
+
+      // 构建路径
+      const path2 = `
+            M 0,${ry} 
+            A ${rx} ${ry} 0 1 1 ${element.width} ${ry}
+            L ${element.width - (rx - innerRx)},${ry}
+            A ${innerRx} ${innerRy} 0 1 0 ${rx - innerRx},${ry}
+            Z`
+
+      blockArc.setAttribute("d", path2.trim())
+
+      // 设置填充色
+      setBackground(element, blockArc)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        blockArc.setAttribute("stroke", element.borderColor || "#000")
+        blockArc.setAttribute("stroke-width", element.borderWidth || 1)
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            blockArc.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            blockArc.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            blockArc.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(blockArc)
+      break
+
+    case "rect":
+    default:
+      const rect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      )
+      rect.setAttribute("x", 0)
+      rect.setAttribute("y", 0)
+      rect.setAttribute("width", element.width)
+      rect.setAttribute("height", element.height)
+      if (element.fill && element.fill.type) {
+        // 设置填充色
+        if (element.fill.type === "color") {
+          rect.setAttribute("fill", element.fill.value || "transparent")
+        } else if (element.fill.type === "gradient") {
+          // 渐变填充
+          const { colors, path, rot } = element.fill.value
+
+          if (colors && colors.length >= 2) {
+            const gradientType = path === "rect" ? "linear" : "radial"
+            const gradientAngle =
+              gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
+
+            let gradientString = `${gradientType}-gradient(`
+            if (gradientType === "linear") {
+              gradientString += `${gradientAngle}deg, `
+            }
+
+            colors.forEach((color, i) => {
+              gradientString += `${color.color} ${color.pos}${
+                i < colors.length - 1 ? ", " : ""
+              }`
+            })
+            gradientString += ")"
+
+            // 创建渐变定义
+            const gradientDef = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "defs"
+            )
+            const gradientEl = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              gradientType === "linear" ? "linearGradient" : "radialGradient"
+            )
+            const gradientId = `gradient-${Date.now()}-${Math.random()
+              .toString(36)
+              .substr(2, 9)}`
+            gradientEl.setAttribute("id", gradientId)
+
+            // 设置渐变属性
+            if (gradientType === "linear") {
+              gradientEl.setAttribute(
+                "gradientTransform",
+                `rotate(${gradientAngle})`
+              )
+            }
+
+            // 添加渐变色标
+            colors.forEach((color) => {
+              const stop = document.createElementNS(
+                "http://www.w3.org/2000/svg",
+                "stop"
+              )
+              stop.setAttribute("offset", color.pos)
+              stop.setAttribute("stop-color", color.color)
+              gradientEl.appendChild(stop)
+            })
+
+            gradientDef.appendChild(gradientEl)
+            svg.appendChild(gradientDef)
+
+            // 应用渐变
+            rect.setAttribute("fill", `url(#${gradientId})`)
+          }
+        } else if (element.fill.type === "image") {
+          // 创建图案填充
+          const pattern = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "pattern"
+          )
+          const patternId = `pattern-${Date.now()}-${Math.random()
+            .toString(36)
+            .substr(2, 9)}`
+          pattern.setAttribute("id", patternId)
+          pattern.setAttribute("patternUnits", "userSpaceOnUse")
+          pattern.setAttribute("width", "100%")
+          pattern.setAttribute("height", "100%")
+
+          // 创建图片元素
+          const image = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "image"
+          )
+          image.setAttribute("width", "100%")
+          image.setAttribute("height", "100%")
+          image.setAttribute("preserveAspectRatio", "xMidYMid slice")
+          image.setAttributeNS(
+            "http://www.w3.org/1999/xlink",
+            "href",
+            element.fill.value.picBase64
+          )
+
+          pattern.appendChild(image)
+
+          // 添加pattern到defs
+          const defs = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "defs"
+          )
+          defs.appendChild(pattern)
+          svg.appendChild(defs)
+
+          // 应用图案填充
+          rect.setAttribute("fill", `url(#${patternId})`)
+        } else {
+          rect.setAttribute("fill", "transparent")
+        }
+      } else {
+        rect.setAttribute("fill", "#ffffff00")
+      }
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        rect.setAttribute("stroke", element.borderColor || "#000")
+        rect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            rect.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+          } else if (element.borderType === "dotted") {
+            rect.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            rect.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(rect)
+      break
+  }
+
+  const transformList = []
+  let rotateDeg = element.rotate || 0
+
+  if (element.isFlipV) {
+    transformList.push(`scaleY(-1)`)
+    rotateDeg = -rotateDeg // 垂直翻转时反转旋转方向
+  }
+
+  if (element.isFlipH) {
+    transformList.push(`scaleX(-1)`)
+    rotateDeg = -rotateDeg // 水平翻转时反转旋转方向
+  }
+
+  if (element.rotate) {
+    transformList.push(`rotate(${rotateDeg}deg)`)
+  }
+
+  if (transformList.length > 0) {
+    el.style.transform = transformList.join(" ")
+    el.style.transformOrigin = "center center"
+  }
+
+  el.appendChild(svg)
+
+  // 设置形状内容
+  if (element.content) {
+    const contentContainer = document.createElement("div")
+    contentContainer.innerHTML = convertPtToPxInContent(element.content)
+    contentContainer.style.position = "absolute"
+    contentContainer.style.width = element.width + "px"
+    contentContainer.style.height = element.height + "px"
+    contentContainer.style.top = "0px"
+    contentContainer.style.left = "0px"
+    contentContainer.style.display = "flex"
+    contentContainer.style.alignItems = "center"
+    contentContainer.style.justifyContent = "center"
+    contentContainer.style.zIndex = element.order
+    contentContainer.style.pointerEvents = "none"
+    const transformList = []
+    let rotateDeg = element.rotate || 0
+
+    if (element.isFlipV) {
+      transformList.push(`scaleY(-1)`)
+      rotateDeg = -rotateDeg // 垂直翻转时反转旋转方向
+    }
+
+    if (element.isFlipH) {
+      transformList.push(`scaleX(-1)`)
+      rotateDeg = -rotateDeg // 水平翻转时反转旋转方向
+    }
+
+    if (element.rotate) {
+      transformList.push(`rotate(${rotateDeg}deg)`)
+    }
+
+    if (transformList.length > 0) {
+      contentContainer.style.transform = transformList.join(" ")
+      contentContainer.style.transformOrigin = "center center"
+    }
+    el.appendChild(contentContainer)
+  }
+  return el
+}
+
+// 创建表格元素
+const createTableElement = (element) => {
+  const el = document.createElement("div")
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.width = element.width + "px"
+  el.style.height = element.height + "px"
+  el.style.zIndex = element.order
+
+  // 创建表格元素
+  const table = document.createElement("table")
+  table.style.width = element.width + "px"
+  table.style.height = element.height + "px"
+  table.style.borderCollapse = "collapse"
+  table.style.tableLayout = "fixed"
+  // 设置表格边框
+  if (element.borders) {
+    if (element.borders.all) {
+      const border = element.borders.all
+      table.style.border = `${border.borderWidth || 1}px ${
+        border.borderType || "solid"
+      } ${border.borderColor || "#000"}`
+    } else {
+      // 分别设置四边边框
+      if (element.borders.top) {
+        table.style.borderTop = `${element.borders.top.borderWidth || 1}px ${
+          element.borders.top.borderType || "solid"
+        } ${element.borders.top.borderColor || "#000"}`
+      }
+      if (element.borders.bottom) {
+        table.style.borderBottom = `${
+          element.borders.bottom.borderWidth || 1
+        }px ${element.borders.bottom.borderType || "solid"} ${
+          element.borders.bottom.borderColor || "#000"
+        }`
+      }
+      if (element.borders.left) {
+        table.style.borderLeft = `${element.borders.left.borderWidth || 1}px ${
+          element.borders.left.borderType || "solid"
+        } ${element.borders.left.borderColor || "#000"}`
+      }
+      if (element.borders.right) {
+        table.style.borderRight = `${
+          element.borders.right.borderWidth || 1
+        }px ${element.borders.right.borderType || "solid"} ${
+          element.borders.right.borderColor || "#000"
+        }`
+      }
+    }
+  }
+
+  // 创建表格内容
+  const tbody = document.createElement("tbody")
+
+  // 处理表格数据
+  if (element.data && element.data.length > 0) {
+    element.data.forEach((rowData, rowIndex) => {
+      const tr = document.createElement("tr")
+
+      rowData.forEach((cell, colIndex) => {
+        // 跳过被合并的单元格
+        if (cell.hMerge) return
+
+        const td = document.createElement("td")
+
+        // 设置单元格内容
+        if (cell.text) {
+          td.innerHTML = convertPtToPxInContent(cell.text)
+        }
+
+        // 设置单元格样式
+        td.style.padding = "0px"
+        td.style.verticalAlign = "middle"
+
+        // 设置文本样式
+        if (cell.fontColor) td.style.color = cell.fontColor
+        if (cell.fontSize) td.style.fontSize = cell.fontSize
+        if (cell.fontFamily) td.style.fontFamily = cell.fontFamily
+        if (cell.bold) td.style.fontWeight = "bold"
+        if (cell.italic) td.style.fontStyle = "italic"
+        if (cell.underline) td.style.textDecoration = "underline"
+        if (cell.align) td.style.textAlign = cell.align
+
+        // 设置背景色
+        if (cell.fillColor) td.style.backgroundColor = cell.fillColor
+
+        // 设置单元格边框
+        if (cell.borders) {
+          if (cell.borders.all) {
+            const border = cell.borders.all
+            td.style.border = `${border.borderWidth || 1}px ${
+              border.borderType || "solid"
+            } ${border.borderColor || "#000"}`
+          } else {
+            // 分别设置四边边框
+            if (cell.borders.top) {
+              td.style.borderTop = `${cell.borders.top.borderWidth || 1}px ${
+                cell.borders.top.borderType || "solid"
+              } ${cell.borders.top.borderColor || "#000"}`
+            }
+            if (cell.borders.bottom) {
+              td.style.borderBottom = `${
+                cell.borders.bottom.borderWidth || 1
+              }px ${cell.borders.bottom.borderType || "solid"} ${
+                cell.borders.bottom.borderColor || "#000"
+              }`
+            }
+            if (cell.borders.left) {
+              td.style.borderLeft = `${cell.borders.left.borderWidth || 1}px ${
+                cell.borders.left.borderType || "solid"
+              } ${cell.borders.left.borderColor || "#000"}`
+            }
+            if (cell.borders.right) {
+              td.style.borderRight = `${
+                cell.borders.right.borderWidth || 1
+              }px ${cell.borders.right.borderType || "solid"} ${
+                cell.borders.right.borderColor || "#000"
+              }`
+            }
+          }
+        }
+        td.style.width = element.colWidths[colIndex] + "px"
+        // 设置单元格合并
+        if (cell.colSpan && cell.colSpan > 1) {
+          td.colSpan = cell.colSpan
+          td.style.width = element.colWidths[colIndex] * cell.colSpan + "px"
+        }
+        if (cell.rowSpan && cell.rowSpan > 1) {
+          td.rowSpan = cell.rowSpan
+        }
+
+        tr.appendChild(td)
+      })
+      tr.style.height = element.rowHeights[rowIndex] + "px"
+      tbody.appendChild(tr)
+    })
+  }
+
+  table.appendChild(tbody)
+  el.appendChild(table)
+
+  return el
+}
+
+const createChartElement = (element) => {
+  // 实现图表元素创建逻辑
+  return document.createElement("div") // 临时返回空div
+}
+
+// 创建图表元素
+const createDiagramElement = (element) => {
+  const el = document.createElement("div")
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.width = element.width + "px"
+  el.style.height = element.height + "px"
+  el.style.zIndex = element.order
+
+  // 递归渲染SmartArt节点
+  const renderDiagramNode = (node) => {
+    const nodeEl = document.createElement("div")
+    nodeEl.style.position = "absolute"
+    nodeEl.style.left = node.left + "px"
+    nodeEl.style.top = node.top + "px"
+    nodeEl.style.width = node.width + "px"
+    nodeEl.style.height = node.height + "px"
+
+    // 设置边框
+    if (node.borderWidth > 0) {
+      nodeEl.style.border = `${node.borderWidth}px ${node.borderType} ${node.borderColor}`
+      if (node.borderStrokeDasharray && node.borderStrokeDasharray !== "0") {
+        nodeEl.style.borderStyle = "dashed"
+      }
+    }
+
+    // 设置背景填充
+    if (node.fill && node.fill.type === "color") {
+      nodeEl.style.backgroundColor = node.fill.value
+    }
+
+    // 设置内容
+    if (node.content) {
+      nodeEl.innerHTML = convertPtToPxInContent(node.content)
+    }
+
+    // 设置垂直对齐
+    if (node.vAlign === "mid") {
+      nodeEl.style.display = "flex"
+      nodeEl.style.alignItems = "center"
+      nodeEl.style.justifyContent = "center"
+    }
+
+    // 设置翻转
+    const transforms = []
+    if (node.isFlipV) {
+      transforms.push("scaleY(-1)")
+    }
+    if (node.isFlipH) {
+      transforms.push("scaleX(-1)")
+    }
+    if (transforms.length > 0) {
+      nodeEl.style.transform = transforms.join(" ")
+    }
+
+    return nodeEl
+  }
+
+  // 按照 order 排序元素
+  const sortedElements = [...element.elements].sort((a, b) => a.order - b.order)
+
+  // 渲染所有节点
+  sortedElements.forEach((node) => {
+    const nodeEl = renderDiagramNode(node)
+    el.appendChild(nodeEl)
+  })
+
+  return el
+}
+
+// 创建数学公式元素
+const createMathElement = (element) => {
+  const el = document.createElement("div")
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.width = element.width + "px"
+  el.style.height = element.height + "px"
+  el.style.zIndex = element.order
+
+  // 应用旋转变换
+  if (element.rotate) {
+    el.style.transform = `rotate(${element.rotate}deg)`
+    el.style.transformOrigin = "center center"
+  }
+
+  // 设置数学公式内容
+  if (element.mathXml) {
+    // 如果有MathML格式的内容
+    try {
+      // 创建MathML命名空间的元素
+      const mathEl = document.createElementNS(
+        "http://www.w3.org/1998/Math/MathML",
+        "math"
+      )
+      mathEl.innerHTML = element.mathXml
+      el.appendChild(mathEl)
+    } catch (error) {
+      console.error("创建MathML元素失败:", error)
+      // 回退方案：直接显示文本
+      el.textContent = element.text || "数学公式"
+    }
+  } else if (element.text) {
+    // 如果只有文本内容
+    el.textContent = element.text
+  }
+
+  // 应用样式
+  if (element.style) {
+    // 字体样式
+    if (element.style.fontFamily) {
+      el.style.fontFamily = element.style.fontFamily
+    }
+
+    // 字体大小
+    if (element.style.fontSize) {
+      el.style.fontSize = element.style.fontSize + "px"
+    }
+
+    // 字体颜色
+    if (element.style.color) {
+      el.style.color = element.style.color
+    }
+  }
+
+  // 应用背景色
+  if (element.fill && element.fill.type === "color") {
+    el.style.backgroundColor = element.fill.value
+  }
+
+  // 应用边框
+  if (element.borderColor && element.borderWidth) {
+    el.style.border = `${element.borderWidth}px ${
+      element.borderType || "solid"
+    } ${element.borderColor}`
+  }
+
+  return el
+}
+
+// 创建文本元素
+const createTextElement = (element) => {
+  const el = document.createElement("div")
+  if (element.content) {
+    // 转换内容中的pt单位为px单位
+    const convertedContent = convertPtToPxInContent(element.content)
+    el.innerHTML = convertedContent
+
+    // 设置文本样式
+    el.style.width = element.width + "px"
+    el.style.height = element.height + "px"
+    el.style.color = element.fontColor || "#000"
+    el.style.fontSize = element.fontSize
+    el.style.fontFamily = element.fontFamily || "Arial"
+    el.style.textAlign = element.align || "left"
+    el.style.fontWeight = element.bold ? "bold" : "normal"
+    el.style.fontStyle = element.italic ? "italic" : "normal"
+    el.style.textDecoration = element.underline ? "underline" : "none"
+    el.style.position = "absolute"
+    el.style.top = element.top + "px" || "0"
+    el.style.left = element.left + "px" || "0"
+    el.style.zIndex = element.order
+    el.style.whiteSpace = "pre-wrap"
+
+    // 添加垂直对齐支持
+    el.style.display = "flex"
+    el.style.flexDirection = "column"
+    switch (element.vAlign) {
+      case "up":
+        el.style.justifyContent = "flex-start"
+        break
+      case "mid":
+        el.style.justifyContent = "center"
+        break
+      case "down":
+        el.style.justifyContent = "flex-end"
+        break
+      default:
+        el.style.justifyContent = "flex-start"
+    }
+
+    // 设置段落间距
+    el.style.lineHeight = element.lineHeight + "px" || "1.2"
+    el.style.letterSpacing = element.charSpacing
+      ? `${element.charSpacing}px`
+      : "normal"
+  }
+  return el
+}
+
+// 递归调整元素位置
+const adjustElementPosition = (element, parentElement) => {
+  // 创建深拷贝，但保留特殊属性的引用
+  const adjustedElement = JSON.parse(JSON.stringify(element))
+
+  // 调整位置为相对于父组合元素的位置
+  adjustedElement.top = element.top - parentElement.top
+  adjustedElement.left = element.left - parentElement.left
+
+  // 恢复特殊属性的引用
+  const specialProps = [
+    "src",
+    "blob",
+    "fill",
+    "text",
+    "path",
+    "elements",
+    "borderColor",
+    "borderWidth",
+    "borderType",
+  ]
+  specialProps.forEach((prop) => {
+    if (element[prop] !== undefined) {
+      adjustedElement[prop] = element[prop]
+    }
+  })
+
+  // 如果是组合元素，递归处理其子元素
+  if (element.type === "group" && element.elements) {
+    adjustedElement.elements = element.elements.map((childElement) =>
+      adjustElementPosition(childElement, {
+        top: element.top,
+        left: element.left,
+      })
+    )
+  }
+
+  return adjustedElement
+}
+
+// 绘制类别标签
+const drawCategoryLabels = (svg, categories, padding, groupWidth, barDir) => {
+  if (!categories || !categories.length) return
+
+  // 创建标签组
+  const labelGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")
+  labelGroup.setAttribute("class", "category-labels")
+
+  // 计算标签位置
+  const isVertical = barDir === "vertical"
+  const labelSpacing = groupWidth
+
+  // 绘制每个类别标签
+  categories.forEach((category, index) => {
+    const label = document.createElementNS("http://www.w3.org/2000/svg", "text")
+
+    // 设置标签文本
+    label.textContent = category
+
+    // 设置标签样式
+    label.setAttribute("font-size", "12")
+    label.setAttribute("text-anchor", isVertical ? "middle" : "start")
+
+    // 设置标签位置
+    if (isVertical) {
+      // 垂直条形图，标签在底部
+      label.setAttribute("x", padding + index * labelSpacing + labelSpacing / 2)
+      label.setAttribute("y", svg.getAttribute("height") - padding / 3)
+      label.setAttribute("dominant-baseline", "hanging")
+    } else {
+      // 水平条形图，标签在左侧
+      label.setAttribute("x", padding / 2)
+      label.setAttribute("y", padding + index * labelSpacing + labelSpacing / 2)
+      label.setAttribute("dominant-baseline", "middle")
+      label.setAttribute("text-anchor", "end")
+    }
+
+    // 添加标签到组
+    labelGroup.appendChild(label)
+  })
+
+  // 将标签组添加到SVG
+  svg.appendChild(labelGroup)
+
+  return labelGroup
+}
+
+// 绘制网格线
+const drawGrid = (svg, padding, width, height, maxValue) => {
+  // 创建网格组
+  const gridGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")
+  gridGroup.setAttribute("class", "chart-grid")
+
+  // 设置网格线样式
+  const gridColor = "#e0e0e0"
+  const gridWidth = 1
+
+  // 计算网格间距
+  const gridCount = 5 // 网格线数量
+  const gridStep = (height - padding * 2) / gridCount
+
+  // 绘制水平网格线
+  for (let i = 0; i <= gridCount; i++) {
+    const y = padding + i * gridStep
+    const line = document.createElementNS("http://www.w3.org/2000/svg", "line")
+
+    line.setAttribute("x1", padding)
+    line.setAttribute("y1", y)
+    line.setAttribute("x2", width - padding)
+    line.setAttribute("y2", y)
+    line.setAttribute("stroke", gridColor)
+    line.setAttribute("stroke-width", gridWidth)
+
+    // 如果是底线，加粗显示
+    if (i === gridCount) {
+      line.setAttribute("stroke-width", gridWidth * 2)
+      line.setAttribute("stroke", "#aaa")
+    }
+
+    gridGroup.appendChild(line)
+
+    // 添加刻度值（除了底线）
+    if (i < gridCount) {
+      const valueText = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "text"
+      )
+      const value = Math.round((gridCount - i) * (maxValue / gridCount))
+
+      valueText.textContent = value
+      valueText.setAttribute("x", padding - 5)
+      valueText.setAttribute("y", y)
+      valueText.setAttribute("text-anchor", "end")
+      valueText.setAttribute("dominant-baseline", "middle")
+      valueText.setAttribute("font-size", "10")
+      valueText.setAttribute("fill", "#666")
+
+      gridGroup.appendChild(valueText)
+    }
+  }
+
+  // 添加网格组到SVG
+  svg.appendChild(gridGroup)
+
+  return gridGroup
+}
+
+// 绘制图表图例
+const drawLegend = (svg, series, colors, padding) => {
+  // 创建图例容器
+  const legendGroup = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "g"
+  )
+  legendGroup.setAttribute("class", "chart-legend")
+
+  // 设置图例位置
+  const legendX = padding
+  const legendY = padding
+  let currentY = legendY
+
+  // 为每个系列创建图例项
+  series.forEach((item, index) => {
+    const itemGroup = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "g"
+    )
+    itemGroup.setAttribute("transform", `translate(${legendX}, ${currentY})`)
+
+    // 创建图例颜色标记
+    const colorMark = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    )
+    colorMark.setAttribute("width", "12")
+    colorMark.setAttribute("height", "12")
+    colorMark.setAttribute("fill", colors[index % colors.length])
+
+    // 创建图例文本
+    const text = document.createElementNS("http://www.w3.org/2000/svg", "text")
+    text.setAttribute("x", "20")
+    text.setAttribute("y", "10")
+    text.setAttribute("font-size", "12")
+    text.setAttribute("alignment-baseline", "middle")
+    text.textContent = item.name || `系列 ${index + 1}`
+
+    // 将元素添加到组中
+    itemGroup.appendChild(colorMark)
+    itemGroup.appendChild(text)
+    legendGroup.appendChild(itemGroup)
+
+    // 更新下一个图例项的Y坐标
+    currentY += 20
+  })
+
+  // 将图例组添加到SVG中
+  svg.appendChild(legendGroup)
+
+  return legendGroup
+}
+
+// 调整颜色亮度
+const adjustBrightness = (color, factor) => {
+  // 如果颜色为空或不是字符串，返回原值
+  if (!color || typeof color !== "string") return color
+
+  // 处理十六进制颜色
+  if (color.startsWith("#")) {
+    let hex = color.substring(1)
+
+    // 处理简写形式 (#RGB)
+    if (hex.length === 3) {
+      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+    }
+
+    // 解析RGB值
+    const r = parseInt(hex.substring(0, 2), 16)
+    const g = parseInt(hex.substring(2, 4), 16)
+    const b = parseInt(hex.substring(4, 6), 16)
+
+    // 调整亮度
+    const adjustedR = Math.min(255, Math.max(0, Math.round(r * factor)))
+    const adjustedG = Math.min(255, Math.max(0, Math.round(g * factor)))
+    const adjustedB = Math.min(255, Math.max(0, Math.round(b * factor)))
+
+    // 转换回十六进制
+    return `#${adjustedR.toString(16).padStart(2, "0")}${adjustedG
+      .toString(16)
+      .padStart(2, "0")}${adjustedB.toString(16).padStart(2, "0")}`
+  }
+
+  // 处理rgb/rgba颜色
+  if (color.startsWith("rgb")) {
+    const rgbMatch = color.match(
+      /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
+    )
+    if (rgbMatch) {
+      const r = parseInt(rgbMatch[1])
+      const g = parseInt(rgbMatch[2])
+      const b = parseInt(rgbMatch[3])
+      const a = rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : 1
+
+      // 调整亮度
+      const adjustedR = Math.min(255, Math.max(0, Math.round(r * factor)))
+      const adjustedG = Math.min(255, Math.max(0, Math.round(g * factor)))
+      const adjustedB = Math.min(255, Math.max(0, Math.round(b * factor)))
+
+      // 返回调整后的颜色
+      return a < 1
+        ? `rgba(${adjustedR}, ${adjustedG}, ${adjustedB}, ${a})`
+        : `rgb(${adjustedR}, ${adjustedG}, ${adjustedB})`
+    }
+  }
+
+  // 如果不是支持的颜色格式，返回原值
+  return color
+}
+
+const convertPtToPxInContent = (content) => {
+  if (!content) return ""
+
+  // 使用正则表达式查找所有包含pt单位的样式
+  const ptRegex = /(\d+(\.\d+)?)pt/g
+
+  return content.replace(/(\d+\.?\d*)(pt|PT)/g, (match, size) => {
+    // 将 pt 转换为 px（1pt ≈ 1.33333px）
+    const pxSize = size
+    return `${pxSize}px`
+  })
+}
+
+const processElements = (elements, slideIndex) => {
+  if (!elements || !Array.isArray(elements)) return
+
+  // 使用 Map 存储原始顺序，避免多次排序
+  const orderMap = new Map(elements.map((el, index) => [el, el.order || index]))
+
+  // 一次性排序
+  elements.sort((a, b) => orderMap.get(a) - orderMap.get(b))
+
+  const processElement = (element, baseOrder) => {
+    // 设置当前元素的 order
+    element.order = baseOrder
+
+    // 如果有子元素，递归处理
+    if (element.elements?.length > 0) {
+      element.elements
+        .sort((a, b) => (a.order || 0) - (b.order || 0))
+        .forEach((child, idx) => {
+          processElement(child, baseOrder * 10 + idx + 1)
+        })
+    }
+  }
+
+  // 处理每个顶层元素
+  elements.forEach((element, index) => {
+    processElement(element, (slideIndex + 1) * 10 + index + 1)
+  })
+}
+
+// 监听 pptxJson 变化
+watch(
+  () => props.pptxJson,
+  (newVal) => {
+    if (newVal) {
+      renderSlides()
+    }
+  },
+  { deep: true }
+)
+
+// 组件挂载时渲染幻灯片
+onMounted(() => {
+  renderSlides()
+})
+</script>
+
+<style scoped>
+.pptx-container {
+  width: 100%;
+  overflow-x: auto;
+  padding: 20px 0;
+}
+</style>

src/components/view_file/vendors/pptx/PPT2.vue

@@ -0,0 +1,4794 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2025-04-10 14:38:27
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-25 08:43:54
+ * @Description:
+-->
+<template>
+  <div id="pptx-container" ref="pptxContainer" class="pptx-container"></div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from "vue"
+
+const props = defineProps({
+  pptxJson: Object,
+})
+
+const pptxContainer = ref(null)
+
+// 渲染幻灯片
+const renderSlides = () => {
+  if (!pptxContainer.value || !props.pptxJson) return
+
+  pptxContainer.value.innerHTML = ""
+  const { size, slides } = props.pptxJson
+
+  slides.forEach((slide, index) => {
+    const slideElement = createSlideElement(size.width, size.height)
+    applySlideBackground(slideElement, slide.fill)
+    if (slide.layoutElements && Array.isArray(slide.layoutElements)) {
+      processElements(slide.layoutElements, index + 1)
+      slide.layoutElements.forEach((element) => {
+        const el = createElementByType(element)
+        if (!el) return
+        slideElement.appendChild(el)
+      })
+    }
+
+    // 渲染幻灯片元素
+    if (slide.elements && Array.isArray(slide.elements)) {
+      processElements(slide.elements, index + 1)
+      slide.elements.forEach((element) => {
+        const el = createElementByType(element)
+        if (!el) return
+        slideElement.appendChild(el)
+      })
+    }
+
+    // 添加幻灯片到容器
+    pptxContainer.value.appendChild(slideElement)
+  })
+  // 为所有p标签应用样式
+  const pTags = pptxContainer.value.querySelectorAll("p")
+  pTags.forEach((p) => {
+    p.style.margin = "0px"
+    p.style.padding = "0px"
+    p.style.wordBreak = "break-word"
+    p.style.lineHeight = "1"
+  })
+  const ulTags = pptxContainer.value.querySelectorAll("ul")
+  ulTags.forEach((ul) => {
+    ul.style.wordBreak = "break-word"
+    ul.style.lineHeight = "1"
+    ul.style.padding = "auto 0px"
+    ul.style.margin = "0px"
+  })
+  const olTags = pptxContainer.value.querySelectorAll("ol")
+  olTags.forEach((ol) => {
+    ol.style.margin = "0px"
+    ol.style.padding = "auto 0px"
+    ol.style.wordBreak = "break-word"
+    ol.style.lineHeight = "1"
+  })
+}
+
+// 创建幻灯片元素
+const createSlideElement = (width, height) => {
+  const slideElement = document.createElement("div")
+  slideElement.className = "slide"
+  slideElement.style.position = "relative"
+  slideElement.style.width = width + "px"
+  slideElement.style.height = height + "px"
+  slideElement.style.border = "1px solid #ccc"
+  slideElement.style.margin = "0px auto"
+  slideElement.style.marginBottom = "20px"
+  slideElement.style.overflow = "hidden"
+  return slideElement
+}
+
+// 应用幻灯片背景
+const applySlideBackground = (slideElement, fill) => {
+  if (!fill) return
+
+  if (fill.type === "gradient") {
+    const { colors, path, rot } = fill.value
+
+    if (colors && colors.length >= 2) {
+      const gradientType = path === "rect" ? "linear" : "radial"
+      const gradientAngle =
+        gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
+
+      let gradientString = `${gradientType}-gradient(`
+      if (gradientType === "linear") {
+        gradientString += `${gradientAngle}deg, `
+      }
+
+      colors.forEach((color, i) => {
+        gradientString += `${color.color} ${color.pos}${
+          i < colors.length - 1 ? ", " : ""
+        }`
+      })
+
+      gradientString += ")"
+      slideElement.style.background = gradientString
+    }
+  } else if (fill.type === "color") {
+    slideElement.style.backgroundColor = fill.value || "#FFFFFF"
+  } else if (fill.type === "image" && fill.value.picBase64) {
+    // 设置背景图片
+    slideElement.style.backgroundImage = `url(${fill.value.picBase64})`
+    slideElement.style.backgroundSize = "cover"
+    slideElement.style.backgroundPosition = "center"
+    slideElement.style.backgroundRepeat = "no-repeat"
+
+    // 如果有背景图片的混合模式
+    if (fill.value.blendMode) {
+      slideElement.style.backgroundBlendMode = fill.value.blendMode
+    }
+
+    // 如果有透明度设置
+    if (fill.value.opacity !== undefined) {
+      slideElement.style.opacity = fill.value.opacity
+    }
+  }
+}
+
+// 根据元素类型创建DOM元素
+const createElementByType = (element) => {
+  switch (element.type) {
+    case "image":
+      return createImageElement(element)
+    case "video":
+      return createVideoElement(element)
+    case "audio":
+      return createAudioElement(element)
+    case "shape":
+      return createShapeElement(element)
+    case "table":
+      return createTableElement(element)
+    case "chart":
+      return createChartElement(element)
+    case "diagram":
+      return createDiagramElement(element)
+    case "math":
+      return createMathElement(element)
+    case "group":
+      return createGroupElement(element)
+    default:
+      return createTextElement(element)
+  }
+}
+
+// 创建组合元素
+const createGroupElement = (element) => {
+  // 创建组合容器
+  const groupContainer = document.createElement("div")
+  groupContainer.className = "group-element"
+  groupContainer.style.position = "absolute"
+  groupContainer.style.top = element.top + "px"
+  groupContainer.style.left = element.left + "px"
+  groupContainer.style.width = element.width + "px"
+  groupContainer.style.height = element.height + "px"
+  groupContainer.style.zIndex = element.order
+  groupContainer.style.transformOrigin = "center center"
+
+  // 创建内部容器来处理子元素
+  const innerContainer = document.createElement("div")
+  innerContainer.style.position = "relative"
+  innerContainer.style.width = "100%"
+  innerContainer.style.height = "100%"
+
+  // 应用旋转变换
+  if (element.rotate) {
+    groupContainer.style.transform = `rotate(${element.rotate}deg)`
+  }
+
+  // 应用其他样式属性
+  if (element.opacity !== undefined) {
+    groupContainer.style.opacity = element.opacity
+  }
+
+  // 递归渲染组内的所有子元素
+  if (element.elements && Array.isArray(element.elements)) {
+    element.elements.forEach((childElement) => {
+      const childCopy = JSON.parse(JSON.stringify(childElement))
+      const childEl = createElementByType(childCopy)
+      if (childEl) {
+        innerContainer.appendChild(childEl)
+      }
+    })
+  }
+
+  groupContainer.appendChild(innerContainer)
+  return groupContainer
+}
+
+// 创建图像元素
+const createImageElement = (element) => {
+  const img = document.createElement("img")
+  img.src = element.src
+  img.style.width = element.width + "px"
+  img.style.height = element.height + "px"
+  img.style.objectFit = "cover" // 保持图像的宽高比并填充容器
+  img.style.position = "absolute"
+  img.style.top = `${element.top}px`
+  img.style.left = `${element.left}px`
+  img.style.zIndex = element.order
+
+  return img
+}
+
+// 创建视频元素
+const createVideoElement = (element) => {
+  const el = document.createElement("video")
+  el.src = element.blob
+  el.controls = true
+  el.style.width = element.width + "px"
+  el.style.height = element.height + "px"
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.zIndex = element.order
+  return el
+}
+
+// 创建音频元素
+const createAudioElement = (element) => {
+  const el = document.createElement("audio")
+  el.src = element.blob
+  el.controls = true
+  el.style.height = element.height + "px"
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.zIndex = element.order
+  return el
+}
+
+// 创建形状元素
+const createShapeElement = (element) => {
+  const el = document.createElement("div")
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.width = element.width + "px"
+  el.style.height = element.height + "px"
+  el.style.zIndex = element.order
+  el.style.overflow = "visible"
+  if (element.height === 0) {
+    // 如果高度为0，直接在div上绘制边框
+    el.style.borderTop = `${element.borderWidth || 1}px ${
+      element.borderType || "solid"
+    } ${element.borderColor || "#000"}`
+  }
+  // 使用SVG绘制形状
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+  svg.setAttribute("width", "100%")
+  svg.setAttribute("height", "100%")
+  svg.setAttribute("viewBox", `0 0 ${element.width} ${element.height}`)
+  svg.style.overflow = "visible"
+
+  const setBackground = (element, shape) => {
+    if (element.fill && element.fill.type) {
+      // 设置填充色
+      if (element.fill.type === "color") {
+        shape.setAttribute("fill", element.fill.value || "transparent")
+      } else if (element.fill.type === "gradient") {
+        // 渐变填充
+        const { colors, path, rot } = element.fill.value
+
+        if (colors && colors.length >= 2) {
+          const gradientType = path === "rect" ? "linear" : "radial"
+          const gradientAngle =
+            gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
+
+          let gradientString = `${gradientType}-gradient(`
+          if (gradientType === "linear") {
+            gradientString += `${gradientAngle}deg, `
+          }
+
+          colors.forEach((color, i) => {
+            gradientString += `${color.color} ${color.pos}${
+              i < colors.length - 1 ? ", " : ""
+            }`
+          })
+          gradientString += ")"
+
+          // 创建渐变定义
+          const gradientDef = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "defs"
+          )
+          const gradientEl = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            gradientType === "linear" ? "linearGradient" : "radialGradient"
+          )
+          const gradientId = `gradient-${Date.now()}-${Math.random()
+            .toString(36)
+            .substr(2, 9)}`
+          gradientEl.setAttribute("id", gradientId)
+
+          // 设置渐变属性
+          if (gradientType === "linear") {
+            gradientEl.setAttribute(
+              "gradientTransform",
+              `rotate(${gradientAngle})`
+            )
+          }
+
+          // 添加渐变色标
+          colors.forEach((color) => {
+            const stop = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "stop"
+            )
+            stop.setAttribute("offset", color.pos)
+            stop.setAttribute("stop-color", color.color)
+            gradientEl.appendChild(stop)
+          })
+
+          gradientDef.appendChild(gradientEl)
+          svg.appendChild(gradientDef)
+
+          // 应用渐变
+          shape.setAttribute("fill", `url(#${gradientId})`)
+        }
+      } else if (element.fill.type === "image") {
+        // 创建图案填充
+        const pattern = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "pattern"
+        )
+        const patternId = `pattern-${Date.now()}-${Math.random()
+          .toString(36)
+          .substr(2, 9)}`
+        pattern.setAttribute("id", patternId)
+        pattern.setAttribute("patternUnits", "userSpaceOnUse")
+        pattern.setAttribute("width", "100%")
+        pattern.setAttribute("height", "100%")
+
+        // 创建图片元素
+        const image = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "image"
+        )
+        image.setAttribute("width", "100%")
+        image.setAttribute("height", "100%")
+        image.setAttribute("preserveAspectRatio", "xMidYMid slice")
+        image.setAttributeNS(
+          "http://www.w3.org/1999/xlink",
+          "href",
+          element.fill.value.picBase64
+        )
+
+        pattern.appendChild(image)
+
+        // 添加pattern到defs
+        const defs = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "defs"
+        )
+        defs.appendChild(pattern)
+        svg.appendChild(defs)
+
+        // 应用图案填充
+        shape.setAttribute("fill", `url(#${patternId})`)
+      } else {
+        shape.setAttribute("fill", "transparent")
+      }
+    } else {
+      shape.setAttribute("fill", "#ffffff00")
+    }
+  }
+
+  // 根据形状类型创建不同的SVG元素
+  switch (element.shapType) {
+    case "roundRect":
+      const radius = Math.min(element.width, element.height) * 0.1
+      const roundRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      )
+      roundRect.setAttribute("x", 0)
+      roundRect.setAttribute("y", 0)
+      roundRect.setAttribute("width", element.width)
+      roundRect.setAttribute("height", element.height)
+      roundRect.setAttribute("rx", radius)
+      roundRect.setAttribute("ry", radius)
+
+      // 设置填充色
+      setBackground(element, roundRect)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        roundRect.setAttribute("stroke", element.borderColor || "#000")
+        roundRect.setAttribute("stroke-width", element.borderWidth || 1)
+        roundRect.setAttribute("stroke-linejoin", "round") // 设置连接处为圆角
+        roundRect.setAttribute("vector-effect", "non-scaling-stroke") // 防止边框宽度变形
+        roundRect.setAttribute("shape-rendering", "geometricPrecision") // 提高渲染精度
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            roundRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            roundRect.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            roundRect.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(roundRect)
+      break
+    case "snip1Rect":
+      // 使用path元素绘制剪去单角的矩形
+      const snip1Rect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算剪角的大小，通常为矩形较短边的20%
+      const snipSize = Math.min(element.width, element.height) * 0.35
+
+      // 绘制路径：从左上角开始，顺时针方向，右上角被剪去
+      snip1Rect.setAttribute(
+        "d",
+        `M0,0 ` +
+          `L${element.width - snipSize},0 ` +
+          `L${element.width},${snipSize} ` +
+          `L${element.width},${element.height} ` +
+          `L0,${element.height} ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, snip1Rect)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        snip1Rect.setAttribute("stroke", element.borderColor || "#000")
+        snip1Rect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            snip1Rect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            snip1Rect.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            snip1Rect.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+      svg.appendChild(snip1Rect)
+      break
+    case "snip2SameRect":
+      // 使用path元素绘制剪去四个角的矩形
+      const snip2SameRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算剪角的大小，通常为矩形较短边的20%
+      const snip2Size = Math.min(element.width, element.height) * 0.35
+
+      // 绘制路径：从左上角开始，顺时针方向，剪去四个角
+      snip2SameRect.setAttribute(
+        "d",
+        `M${snip2Size},0 ` +
+          `L${element.width - snip2Size},0 ` +
+          `L${element.width},${snip2Size} ` +
+          `L${element.width},${element.height - snip2Size} ` +
+          `L${element.width - snip2Size},${element.height} ` +
+          `L${snip2Size},${element.height} ` +
+          `L0,${element.height - snip2Size} ` +
+          `L0,${snip2Size} ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, snip2SameRect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        snip2SameRect.setAttribute("stroke", element.borderColor || "#000")
+        snip2SameRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            snip2SameRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            snip2SameRect.setAttribute("stroke-dasharray", "2, 2")
+            snip2SameRect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            snip2SameRect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        // 添加这些属性以确保边框正确渲染
+        snip2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
+        snip2SameRect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(snip2SameRect)
+      break
+    case "line":
+      // 创建直线连接符
+      const line = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "line"
+      )
+      // 设置SVG的最小高度为1px
+      const svgHeight = element.height > 0 ? element.height : 1
+      svg.setAttribute("height", svgHeight + "px")
+
+      // 设置线条的起点和终点
+      line.setAttribute("x1", 0)
+      line.setAttribute("y1", 0)
+      line.setAttribute("x2", element.width)
+      line.setAttribute("y2", svgHeight)
+
+      // 确保边框颜色和宽度被正确设置
+      line.setAttribute("stroke", element.borderColor || "#000")
+      line.setAttribute("stroke-width", element.borderWidth || 1)
+
+      // 处理虚线样式
+      if (element.borderType === "dotted" || element.borderType === "dashed") {
+        if (element.borderStrokeDasharray) {
+          line.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+        } else if (element.borderType === "dotted") {
+          line.setAttribute("stroke-dasharray", "2, 2")
+          line.setAttribute("stroke-linecap", "round") // 添加圆角端点使点线更明显
+        } else if (element.borderType === "dashed") {
+          line.setAttribute("stroke-dasharray", "6, 3")
+        }
+      }
+
+      // 确保线条正确渲染
+      line.setAttribute("vector-effect", "non-scaling-stroke") // 防止缩放影响线条宽度
+      svg.appendChild(line)
+      break
+    case "snip2DiagRect":
+      // 使用path元素绘制剪去右上角和左下角的矩形
+      const snip2DiagRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算剪角的大小，通常为矩形较短边的35%
+      const snipDiagSize = Math.min(element.width, element.height) * 0.35
+
+      // 绘制路径：从左上角开始，顺时针方向，右上角和左下角被剪去
+      snip2DiagRect.setAttribute(
+        "d",
+        `M0,0 ` +
+          `L${element.width - snipDiagSize},0 ` +
+          `L${element.width},${snipDiagSize} ` +
+          `L${element.width},${element.height} ` +
+          `L${snipDiagSize},${element.height} ` +
+          `L0,${element.height - snipDiagSize} ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, snip2DiagRect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        snip2DiagRect.setAttribute("stroke", element.borderColor || "#000")
+        snip2DiagRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            snip2DiagRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            snip2DiagRect.setAttribute("stroke-dasharray", "2, 2")
+            snip2DiagRect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            snip2DiagRect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        // 添加这些属性以确保边框正确渲染
+        snip2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
+        snip2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(snip2DiagRect)
+      break
+    case "snipRoundRect":
+      const snipRoundRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      // 计算剪切大小和圆角大小
+      const snipSize2 = Math.min(element.width, element.height) * 0.4
+      const roundSize = Math.min(element.width, element.height) * 0.5
+
+      // 绘制路径：从左上角开始，顺时针方向，左上为圆角，右上为剪切角
+      snipRoundRect.setAttribute(
+        "d",
+        `M${roundSize},0 ` +
+          `L${element.width - snipSize2},0 ` +
+          `L${element.width},${snipSize2} ` +
+          `L${element.width},${element.height} ` +
+          `L0,${element.height} ` +
+          `L0,${roundSize} ` +
+          `A${roundSize},${roundSize} 0 0,1 ${roundSize},0 ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, snipRoundRect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        snipRoundRect.setAttribute("stroke", element.borderColor || "#000")
+        snipRoundRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            snipRoundRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            snipRoundRect.setAttribute("stroke-dasharray", "2, 2")
+            snipRoundRect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            snipRoundRect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        snipRoundRect.setAttribute("vector-effect", "non-scaling-stroke")
+        snipRoundRect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(snipRoundRect)
+      break
+    case "round1Rect":
+      const round1Rect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      // 计算圆角大小
+      const round1Size = Math.min(element.width, element.height) * 0.5
+
+      // 绘制路径：从左上角开始，顺时针方向，右上角为圆角
+      round1Rect.setAttribute(
+        "d",
+        `M0,0 ` +
+          `L${element.width - round1Size},0 ` +
+          `Q${element.width},0 ${element.width},${round1Size} ` +
+          `L${element.width},${element.height} ` +
+          `L0,${element.height} ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, round1Rect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        round1Rect.setAttribute("stroke", element.borderColor || "#000")
+        round1Rect.setAttribute("stroke-width", element.borderWidth || 1)
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            round1Rect.setAttribute("stroke-dasharray", "40,15,5,15")
+          } else if (element.borderType === "dotted") {
+            round1Rect.setAttribute("stroke-dasharray", "2, 2")
+            round1Rect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            round1Rect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        round1Rect.setAttribute("vector-effect", "non-scaling-stroke")
+        round1Rect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(round1Rect)
+      break
+    case "ellipse":
+    case "circle":
+      const ellipse = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "ellipse"
+      )
+      ellipse.setAttribute("cx", element.width / 2)
+      ellipse.setAttribute("cy", element.height / 2)
+      ellipse.setAttribute("rx", element.width / 2)
+      ellipse.setAttribute("ry", element.height / 2)
+
+      // 设置填充色
+      setBackground(element, ellipse)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        ellipse.setAttribute("stroke", element.borderColor || "#000")
+        ellipse.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            ellipse.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            ellipse.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            ellipse.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(ellipse)
+      break
+    case "round2SameRect":
+      const round2SameRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      // 计算圆角大小
+      const round2Size = Math.min(element.width, element.height) * 0.5
+
+      // 绘制路径：从左上角开始，顺时针方向，左上和右上为圆角
+      round2SameRect.setAttribute(
+        "d",
+        `M${round2Size},0 ` +
+          `L${element.width - round2Size},0 ` +
+          `Q${element.width},0 ${element.width},${round2Size} ` +
+          `L${element.width},${element.height} ` +
+          `L0,${element.height} ` +
+          `L0,${round2Size} ` +
+          `Q0,0 ${round2Size},0 ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, round2SameRect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        round2SameRect.setAttribute("stroke", element.borderColor || "#000")
+        round2SameRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            round2SameRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            round2SameRect.setAttribute("stroke-dasharray", "2, 2")
+            round2SameRect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            round2SameRect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        round2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
+        round2SameRect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(round2SameRect)
+      break
+    case "round2DiagRect":
+      const round2DiagRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      // 计算圆角大小
+      const round2DiagSize = Math.min(element.width, element.height) * 0.5
+
+      // 绘制路径：从左上角开始，顺时针方向，左上和右下为圆角
+      round2DiagRect.setAttribute(
+        "d",
+        `M${round2DiagSize},0 ` +
+          `L${element.width},0 ` +
+          `L${element.width},${element.height - round2DiagSize} ` +
+          `Q${element.width},${element.height} ${
+            element.width - round2DiagSize
+          },${element.height} ` +
+          `L0,${element.height} ` +
+          `L0,${round2DiagSize} ` +
+          `Q0,0 ${round2DiagSize},0 ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, round2DiagRect)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        round2DiagRect.setAttribute("stroke", element.borderColor || "#000")
+        round2DiagRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            round2DiagRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            round2DiagRect.setAttribute("stroke-dasharray", "2, 2")
+            round2DiagRect.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            round2DiagRect.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        round2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
+        round2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(round2DiagRect)
+      break
+    case "triangle":
+      const triangle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      triangle.setAttribute(
+        "points",
+        `${element.width / 2},0 ${element.width},${element.height} 0,${
+          element.height
+        }`
+      )
+
+      // 设置填充色
+      setBackground(element, triangle)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        triangle.setAttribute("stroke", element.borderColor || "#000")
+        triangle.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            triangle.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            triangle.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            triangle.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(triangle)
+      break
+    case "arc":
+      const arc = document.createElementNS("http://www.w3.org/2000/svg", "path")
+
+      // 计算弧形的参数
+      const arcRadius = Math.min(element.width, element.height) / 2
+
+      // 绘制弧形路径
+      arc.setAttribute(
+        "d",
+        `M${arcRadius},0 ` +
+          `A${arcRadius},${arcRadius} 0 1 1 ${arcRadius * 0.15},${
+            arcRadius * 0.5
+          }`
+      )
+
+      // 设置填充色
+      arc.setAttribute("fill", "transparent")
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        arc.setAttribute("stroke", element.borderColor || "#000")
+        arc.setAttribute("stroke-width", element.borderWidth || 0.5)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            arc.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+          } else if (element.borderType === "dotted") {
+            arc.setAttribute("stroke-dasharray", "2, 2")
+            arc.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            arc.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        arc.setAttribute("vector-effect", "non-scaling-stroke")
+        arc.setAttribute("shape-rendering", "geometricPrecision")
+      } else {
+        arc.setAttribute("stroke", element.borderColor || "#000")
+        arc.setAttribute("stroke-width", 0.5)
+      }
+
+      svg.appendChild(arc)
+      break
+    case "custom":
+      const customPath = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 直接使用传入的 path 数据
+      customPath.setAttribute("d", element.path || "")
+
+      // 设置填充色
+      setBackground(element, customPath)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        customPath.setAttribute("stroke", element.borderColor || "#000")
+        customPath.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            customPath.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            customPath.setAttribute("stroke-dasharray", "2, 2")
+            customPath.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            customPath.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        customPath.setAttribute("vector-effect", "non-scaling-stroke")
+        customPath.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(customPath)
+      break
+    case "teardrop":
+      const teardrop = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算泪珠形状的参数
+      const tdCenterX = element.width / 2
+      const tdCenterY = element.height / 2
+      const tdRadiusX = element.width / 2
+      const tdRadiusY = element.height / 2
+
+      // 使用相对比例计算控制点
+      teardrop.setAttribute(
+        "d",
+        `M${tdCenterX * 2} ${tdCenterY} ` +
+          `A ${tdRadiusX} ${tdRadiusY} 0 1 1 ${tdCenterX} 0 ` +
+          `Q${tdCenterX * 1.7},0 ${tdCenterX * 2.1},${-tdCenterY * 0.1} ` +
+          `Q${tdCenterX * 2},${tdCenterY * 0.29} ${tdCenterX * 2},${tdCenterY}`
+      )
+
+      // 设置填充色
+      setBackground(element, teardrop)
+
+      // 设置边框样式
+      if (element.borderWidth > 0) {
+        teardrop.setAttribute("stroke", element.borderColor || "#000")
+        teardrop.setAttribute("stroke-width", element.borderWidth || 1)
+        teardrop.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          // ... 原有的虚线边框处理代码 ...
+        }
+      }
+
+      svg.appendChild(teardrop)
+      break
+    case "decagon":
+      const decagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+
+      // 计算十边形的顶点
+      let decagonPoints = ""
+      for (let i = 0; i < 10; i++) {
+        const angle = (i * 2 * Math.PI) / 10 - Math.PI / 2 // 从顶部开始
+        const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
+        const y = element.height / 2 + (element.height / 2) * Math.sin(angle)
+        decagonPoints += `${x},${y} `
+      }
+      decagon.setAttribute("points", decagonPoints.trim())
+
+      // 设置填充色
+      setBackground(element, decagon)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        decagon.setAttribute("stroke", element.borderColor || "#000")
+        decagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            decagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            decagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            decagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(decagon)
+      break
+    case "pentagon":
+      const pentagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      pentagon.setAttribute(
+        "points",
+        `${element.width / 2},0 ${element.width},${element.height * 0.38} ` +
+          `${element.width * 0.82},${element.height} ${element.width * 0.18},${
+            element.height
+          } ` +
+          `0,${element.height * 0.38}`
+      )
+
+      // 设置填充色
+      setBackground(element, pentagon)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        pentagon.setAttribute("stroke", element.borderColor || "#000")
+        pentagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            pentagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            pentagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            pentagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(pentagon)
+      break
+    case "pie":
+      const pie = document.createElementNS("http://www.w3.org/2000/svg", "path")
+
+      // 使用提供的路径数据，但保留元素的宽高比例
+      const centerX = element.width / 2
+      const centerY = element.height / 2
+      const radius2 = Math.min(element.width, element.height) / 2
+
+      // 绘制饼图，使用类似提供的路径数据
+      pie.setAttribute(
+        "d",
+        `M${centerX},${centerY} ` +
+          `L${centerX * 1.85},${centerY * 1.52} ` +
+          `A${radius2},${radius2} 0 1,1 ${centerX * 1.56},${centerY * 0.17} ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, pie)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        pie.setAttribute("stroke", element.borderColor || "#000")
+        pie.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            pie.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+          } else if (element.borderType === "dotted") {
+            pie.setAttribute("stroke-dasharray", "2, 2")
+            pie.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            pie.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        pie.setAttribute("vector-effect", "non-scaling-stroke")
+        pie.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(pie)
+      break
+    case "chord":
+      const chord = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算弦形的参数
+      const chordRadiusX = element.width * 0.4
+      const chordRadiusY = element.height * 0.4
+      // 绘制弦形 - 使用更大的圆弧和不同的起始/结束点
+      chord.setAttribute(
+        "d",
+        `M${element.width * 0.4},${element.height * 0.9} ` +
+          `A ${chordRadiusX} ${chordRadiusY} 0 1 1 ${element.width * 0.8},${
+            element.height * 0.5
+          } ` +
+          `Z`
+      )
+
+      // 设置填充色
+      setBackground(element, chord)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        chord.setAttribute("stroke", element.borderColor || "#000")
+        chord.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            chord.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            chord.setAttribute("stroke-dasharray", "2, 2")
+            chord.setAttribute("stroke-linecap", "round")
+          } else if (element.borderType === "dashed") {
+            chord.setAttribute("stroke-dasharray", "6, 3")
+          }
+        }
+
+        chord.setAttribute("vector-effect", "non-scaling-stroke")
+        chord.setAttribute("shape-rendering", "geometricPrecision")
+      }
+
+      svg.appendChild(chord)
+      break
+    case "heptagon":
+      const heptagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+
+      // 计算七边形的顶点
+      let heptagonPoints = ""
+      for (let i = 0; i < 7; i++) {
+        const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2 // 从顶部开始
+        const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
+        const y = element.height / 2 + (element.height / 2) * Math.sin(angle)
+        heptagonPoints += `${x},${y} `
+      }
+      heptagon.setAttribute("points", heptagonPoints.trim())
+
+      // 设置填充色
+      setBackground(element, heptagon)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        heptagon.setAttribute("stroke", element.borderColor || "#000")
+        heptagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            heptagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            heptagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            heptagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(heptagon)
+      break
+    case "hexagon":
+      const hexagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      hexagon.setAttribute(
+        "points",
+        `${element.width * 0.25},0 ${element.width * 0.75},0 ${element.width},${
+          element.height * 0.5
+        } ` +
+          `${element.width * 0.75},${element.height} ${element.width * 0.25},${
+            element.height
+          } 0,${element.height * 0.5}`
+      )
+
+      // 设置填充色
+      setBackground(element, hexagon)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        hexagon.setAttribute("stroke", element.borderColor || "#000")
+        hexagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            hexagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            hexagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            hexagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(hexagon)
+      break
+
+    case "octagon":
+      const octagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      octagon.setAttribute(
+        "points",
+        `${element.width * 0.3},0 ${element.width * 0.7},0 ${element.width},${
+          element.height * 0.3
+        } ` +
+          `${element.width},${element.height * 0.7} ${element.width * 0.7},${
+            element.height
+          } ` +
+          `${element.width * 0.3},${element.height} 0,${
+            element.height * 0.7
+          } 0,${element.height * 0.3}`
+      )
+
+      // 设置填充色
+      setBackground(element, octagon)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        octagon.setAttribute("stroke", element.borderColor || "#000")
+        octagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            octagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            octagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            octagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(octagon)
+      break
+
+    case "trapezoid":
+      const trapezoid = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      trapezoid.setAttribute(
+        "points",
+        `${element.width * 0.2},0 ${element.width * 0.8},0 ${element.width},${
+          element.height
+        } 0,${element.height}`
+      )
+
+      // 设置填充色
+      setBackground(element, trapezoid)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        trapezoid.setAttribute("stroke", element.borderColor || "#000")
+        trapezoid.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            trapezoid.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            trapezoid.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            trapezoid.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(trapezoid)
+      break
+
+    case "diamond":
+      const diamond = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      diamond.setAttribute(
+        "points",
+        `${element.width / 2},0 ${element.width},${element.height / 2} ${
+          element.width / 2
+        },${element.height} 0,${element.height / 2}`
+      )
+
+      // 设置填充色
+      setBackground(element, diamond)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        diamond.setAttribute("stroke", element.borderColor || "#000")
+        diamond.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            diamond.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            diamond.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            diamond.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(diamond)
+      break
+    case "dodecagon":
+      const dodecagon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+
+      // 计算十二边形的顶点
+      let dodecagonPoints = ""
+      for (let i = 0; i < 12; i++) {
+        const angle = (i * 2 * Math.PI) / 12 - Math.PI / 2 // 从顶部开始
+        const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
+        const y = element.height / 2 + (element.height / 2) * Math.sin(angle)
+        dodecagonPoints += `${x},${y} `
+      }
+      dodecagon.setAttribute("points", dodecagonPoints.trim())
+
+      // 设置填充色
+      setBackground(element, dodecagon)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        dodecagon.setAttribute("stroke", element.borderColor || "#000")
+        dodecagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            dodecagon.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            dodecagon.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            dodecagon.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(dodecagon)
+      break
+    case "halfFrame":
+      // 创建外框和内框
+      const outerRect2 = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      const innerRect2 = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算内框的边距
+      const frameWidth2 = element.width / 9
+
+      // 绘制外框的左边和上边
+      outerRect2.setAttribute(
+        "d",
+        `M0,${element.height} L0,0 L${element.width},0`
+      )
+
+      // 绘制内框的左边和上边，注意起点位置调整
+      innerRect2.setAttribute(
+        "d",
+        `M${frameWidth2},${element.height - frameWidth2} ` +
+          `L${frameWidth2},${frameWidth2} ` +
+          `L${element.width - frameWidth2},${frameWidth2}`
+      )
+
+      // 设置填充色
+      if (element.fill && element.fill.type === "color") {
+        // 创建一个填充用的路径
+        const fillPath = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "path"
+        )
+        fillPath.setAttribute(
+          "d",
+          `M${frameWidth2},${frameWidth2} ` +
+            `L${element.width - frameWidth2},${frameWidth2} ` +
+            `L${element.width},0 ` +
+            `L0,0 ` +
+            `L0,${element.height} ` +
+            `L${frameWidth2},${element.height - frameWidth2} Z`
+        )
+        fillPath.setAttribute("fill", element.fill.value || "transparent")
+        svg.appendChild(fillPath)
+
+        outerRect2.setAttribute("fill", "none")
+        innerRect2.setAttribute("fill", "none")
+      } else {
+        outerRect2.setAttribute("fill", "none")
+        innerRect2.setAttribute("fill", "none")
+      }
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        const borderColor = element.borderColor || "#000"
+        const borderWidth = element.borderWidth || 1
+
+        outerRect2.setAttribute("stroke", borderColor)
+        outerRect2.setAttribute("stroke-width", borderWidth)
+        innerRect2.setAttribute("stroke", borderColor)
+        innerRect2.setAttribute("stroke-width", borderWidth)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            const dashArray = element.borderStrokeDasharray
+            outerRect2.setAttribute("stroke-dasharray", dashArray)
+            innerRect2.setAttribute("stroke-dasharray", dashArray)
+          } else if (element.borderType === "dotted") {
+            outerRect2.setAttribute("stroke-dasharray", "1, 3")
+            innerRect2.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            outerRect2.setAttribute("stroke-dasharray", "5, 5")
+            innerRect2.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(outerRect2)
+      svg.appendChild(innerRect2)
+      break
+    case "corner":
+      const corner = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      corner.setAttribute(
+        "d",
+        `M0,0 ` +
+          `L0,${element.height} ` +
+          `L${element.width},${element.height} ` +
+          `L${element.width},${element.height * 0.6} ` +
+          `L${element.width * 0.4},${element.height * 0.6} ` +
+          `L${element.width * 0.4},0 Z`
+      )
+
+      // 设置填充色
+      setBackground(element, corner)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        corner.setAttribute("stroke", element.borderColor || "#000")
+        corner.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            corner.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            corner.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            corner.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(corner)
+      break
+    case "diagStripe":
+      const diagStripe = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 绘制斜纹路径
+      diagStripe.setAttribute(
+        "d",
+        `M${element.width * 0.4},0 ` +
+          `L${element.width},0 ` +
+          `L0,${element.height} ` +
+          `L0,${element.height * 0.4} Z`
+      )
+
+      // 设置填充色
+      setBackground(element, diagStripe)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        diagStripe.setAttribute("stroke", element.borderColor || "#000")
+        diagStripe.setAttribute("stroke-width", element.borderWidth || 1)
+        diagStripe.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            diagStripe.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            diagStripe.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            diagStripe.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(diagStripe)
+      break
+    case "plus":
+      const plus = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      plus.setAttribute(
+        "points",
+        `${element.width * 0.4},0 ` +
+          `${element.width * 0.6},0 ` +
+          `${element.width * 0.6},${element.height * 0.4} ` +
+          `${element.width},${element.height * 0.4} ` +
+          `${element.width},${element.height * 0.6} ` +
+          `${element.width * 0.6},${element.height * 0.6} ` +
+          `${element.width * 0.6},${element.height} ` +
+          `${element.width * 0.4},${element.height} ` +
+          `${element.width * 0.4},${element.height * 0.6} ` +
+          `0,${element.height * 0.6} ` +
+          `0,${element.height * 0.4} ` +
+          `${element.width * 0.4},${element.height * 0.4}`
+      )
+
+      // 设置填充色
+      setBackground(element, plus)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        plus.setAttribute("stroke", element.borderColor || "#000")
+        plus.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            plus.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+          } else if (element.borderType === "dotted") {
+            plus.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            plus.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(plus)
+      break
+    case "can":
+      const can = document.createElementNS("http://www.w3.org/2000/svg", "g")
+
+      // 创建圆柱体的主体部分
+      const cylinderBody = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      cylinderBody.setAttribute(
+        "d",
+        `M0,${element.height * 0.15} ` +
+          `A${element.width / 2},${element.height * 0.15} 0 0 1 ${
+            element.width
+          },${element.height * 0.15} ` +
+          `V${element.height * 0.85} ` +
+          `A${element.width / 2},${element.height * 0.15} 0 0 1 0,${
+            element.height * 0.85
+          } Z`
+      )
+
+      // 创建顶部椭圆
+      const topEllipse = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "ellipse"
+      )
+      topEllipse.setAttribute("cx", element.width / 2)
+      topEllipse.setAttribute("cy", element.height * 0.15)
+      topEllipse.setAttribute("rx", element.width / 2)
+      topEllipse.setAttribute("ry", element.height * 0.15)
+
+      // 设置填充色
+      setBackground(element, cylinderBody)
+      setBackground(element, topEllipse)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        const borderColor = element.borderColor || "#000"
+        const borderWidth = element.borderWidth || 1
+
+        cylinderBody.setAttribute("stroke", borderColor)
+        cylinderBody.setAttribute("stroke-width", borderWidth)
+        topEllipse.setAttribute("stroke", borderColor)
+        topEllipse.setAttribute("stroke-width", borderWidth)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            const dashArray = element.borderStrokeDasharray
+            cylinderBody.setAttribute("stroke-dasharray", dashArray)
+            topEllipse.setAttribute("stroke-dasharray", dashArray)
+          } else if (element.borderType === "dotted") {
+            cylinderBody.setAttribute("stroke-dasharray", "1, 3")
+            topEllipse.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            cylinderBody.setAttribute("stroke-dasharray", "5, 5")
+            topEllipse.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      can.appendChild(cylinderBody)
+      can.appendChild(topEllipse)
+      svg.appendChild(can)
+      break
+    case "cube":
+      const cube = document.createElementNS("http://www.w3.org/2000/svg", "g")
+
+      // 计算关键点坐标
+      const offset = element.width * 0.2
+      const frontX = offset
+      const frontY = offset
+      const frontW = element.width - offset
+      const frontH = element.height
+
+      // 设置立方体的三个面的路径
+      const frontFace = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      frontFace.setAttribute(
+        "d",
+        `M${frontX},${frontY} ` +
+          `L${frontW},${frontY} ` +
+          `L${frontW},${frontH} ` +
+          `L${frontX},${frontH} Z`
+      )
+
+      const rightFace = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      rightFace.setAttribute(
+        "d",
+        `M${frontW},${frontY} ` +
+          `L${element.width},0 ` +
+          `L${element.width},${element.height - offset} ` +
+          `L${frontW},${frontH} Z`
+      )
+
+      const topFace = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      topFace.setAttribute(
+        "d",
+        `M${frontX},${frontY} ` +
+          `L${frontW - offset - frontX},0 ` + // 修改这里：改为从(0,0)开始
+          `L${element.width - offset},0 ` + // 修改这里：使用 offset 来计算右上角的位置
+          `L${element.width},0 ` +
+          `L${frontW},${frontY} Z`
+      )
+
+      // 设置填充色
+      if (element.fill && element.fill.type === "color") {
+        const fillColor = element.fill.value || "transparent"
+        frontFace.setAttribute("fill", fillColor)
+        rightFace.setAttribute("fill", this.adjustBrightness(fillColor, 0.8))
+        topFace.setAttribute("fill", this.adjustBrightness(fillColor, 1.2))
+      } else {
+        frontFace.setAttribute("fill", "transparent")
+        rightFace.setAttribute("fill", "transparent")
+        topFace.setAttribute("fill", "transparent")
+      }
+      // 设置边框
+      if (element.borderWidth > 0) {
+        const borderColor = element.borderColor || "#000"
+        const borderWidth = element.borderWidth || 1
+
+        frontFace.setAttribute("stroke", borderColor)
+        frontFace.setAttribute("stroke-width", borderWidth)
+        rightFace.setAttribute("stroke", borderColor)
+        rightFace.setAttribute("stroke-width", borderWidth)
+        topFace.setAttribute("stroke", borderColor)
+        topFace.setAttribute("stroke-width", borderWidth)
+
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          const dashArray =
+            element.borderStrokeDasharray ||
+            (element.borderType === "dotted" ? "1, 3" : "5, 5")
+          frontFace.setAttribute("stroke-dasharray", dashArray)
+          rightFace.setAttribute("stroke-dasharray", dashArray)
+          topFace.setAttribute("stroke-dasharray", dashArray)
+        }
+      }
+
+      // 按正确的顺序添加面（从后到前）
+      cube.appendChild(rightFace)
+      cube.appendChild(topFace)
+      cube.appendChild(frontFace)
+      svg.appendChild(cube)
+      break
+    case "bevel":
+      const bevel = document.createElementNS("http://www.w3.org/2000/svg", "g")
+
+      // 计算关键点坐标
+      const bevelOffset = element.width * 0.2
+      const smallRectX = bevelOffset
+      const smallRectY = bevelOffset
+      const smallRectW = element.width - 2 * bevelOffset
+      const smallRectH = element.height - 2 * bevelOffset
+
+      // 绘制顶部小矩形
+      const topRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      )
+      topRect.setAttribute("x", smallRectX)
+      topRect.setAttribute("y", smallRectY)
+      topRect.setAttribute("width", smallRectW)
+      topRect.setAttribute("height", smallRectH)
+
+      // 绘制四个梯形
+      const topTrapezoid = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      topTrapezoid.setAttribute(
+        "d",
+        `M0,0 L${element.width},0 L${
+          element.width - bevelOffset
+        },${bevelOffset} L${bevelOffset},${bevelOffset} Z`
+      )
+
+      const bottomTrapezoid = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      bottomTrapezoid.setAttribute(
+        "d",
+        `M${bevelOffset},${element.height - bevelOffset} L${
+          element.width - bevelOffset
+        },${element.height - bevelOffset} L${element.width},${
+          element.height
+        } L0,${element.height} Z`
+      )
+
+      const leftTrapezoid = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      leftTrapezoid.setAttribute(
+        "d",
+        `M0,0 L${bevelOffset},${bevelOffset} L${bevelOffset},${
+          element.height - bevelOffset
+        } L0,${element.height} Z`
+      )
+
+      const rightTrapezoid = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      rightTrapezoid.setAttribute(
+        "d",
+        `M${element.width},0 L${element.width},${element.height} L${
+          element.width - bevelOffset
+        },${element.height - bevelOffset} L${
+          element.width - bevelOffset
+        },${bevelOffset} Z`
+      )
+
+      // 设置填充色
+      if (element.fill && element.fill.type === "color") {
+        const fillColor = element.fill.value || "transparent"
+        topRect.setAttribute("fill", fillColor)
+        topTrapezoid.setAttribute("fill", this.adjustBrightness(fillColor, 1.2))
+        bottomTrapezoid.setAttribute(
+          "fill",
+          this.adjustBrightness(fillColor, 0.8)
+        )
+        leftTrapezoid.setAttribute(
+          "fill",
+          this.adjustBrightness(fillColor, 0.9)
+        )
+        rightTrapezoid.setAttribute(
+          "fill",
+          this.adjustBrightness(fillColor, 0.7)
+        )
+      } else {
+        topRect.setAttribute("fill", "transparent")
+        topTrapezoid.setAttribute("fill", "transparent")
+        bottomTrapezoid.setAttribute("fill", "transparent")
+        leftTrapezoid.setAttribute("fill", "transparent")
+        rightTrapezoid.setAttribute("fill", "transparent")
+      }
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        const borderColor = element.borderColor || "#000"
+        const borderWidth = element.borderWidth || 1
+        const parts = [
+          topRect,
+          topTrapezoid,
+          bottomTrapezoid,
+          leftTrapezoid,
+          rightTrapezoid,
+        ]
+
+        parts.forEach((part) => {
+          part.setAttribute("stroke", borderColor)
+          part.setAttribute("stroke-width", borderWidth)
+
+          if (
+            element.borderType === "dotted" ||
+            element.borderType === "dashed"
+          ) {
+            const dashArray =
+              element.borderStrokeDasharray ||
+              (element.borderType === "dotted" ? "1, 3" : "5, 5")
+            part.setAttribute("stroke-dasharray", dashArray)
+          }
+        })
+      }
+
+      // 按正确的顺序添加面（从后到前）
+      bevel.appendChild(bottomTrapezoid)
+      bevel.appendChild(leftTrapezoid)
+      bevel.appendChild(rightTrapezoid)
+      bevel.appendChild(topTrapezoid)
+      bevel.appendChild(topRect)
+      svg.appendChild(bevel)
+      break
+    case "donut":
+      const donut = document.createElementNS("http://www.w3.org/2000/svg", "g")
+
+      // 外圆
+      const outerCircle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "circle"
+      )
+      outerCircle.setAttribute("cx", element.width / 2)
+      outerCircle.setAttribute("cy", element.height / 2)
+      outerCircle.setAttribute("r", Math.min(element.width, element.height) / 2)
+
+      // 内圆
+      const innerCircle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "circle"
+      )
+      innerCircle.setAttribute("cx", element.width / 2)
+      innerCircle.setAttribute("cy", element.height / 2)
+      innerCircle.setAttribute("r", Math.min(element.width, element.height) / 4)
+
+      // 设置填充色
+      setBackground(element, outerCircle)
+      innerCircle.setAttribute("fill", "white")
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        const borderColor = element.borderColor || "#000"
+        const borderWidth = element.borderWidth || 1
+
+        outerCircle.setAttribute("stroke", borderColor)
+        outerCircle.setAttribute("stroke-width", borderWidth)
+        innerCircle.setAttribute("stroke", borderColor)
+        innerCircle.setAttribute("stroke-width", borderWidth)
+
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          const dashArray =
+            element.borderStrokeDasharray ||
+            (element.borderType === "dotted" ? "1, 3" : "5, 5")
+          outerCircle.setAttribute("stroke-dasharray", dashArray)
+          innerCircle.setAttribute("stroke-dasharray", dashArray)
+        }
+      }
+
+      donut.appendChild(outerCircle)
+      donut.appendChild(innerCircle)
+      svg.appendChild(donut)
+      break
+    case "noSmoking":
+      const noSmoking = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "g"
+      )
+
+      // 创建路径
+      const path = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      path.setAttribute(
+        "d",
+        "M0,70 A77,70 0 1,1 0,71 Z M123.80284467265982,99.39738105155146 A57.5386,50.5386 0 0 0 45.160427644134444,27.90427466198293 Z M30.197155327340184,40.602618948448544 A57.5386,50.5386 0 0 0 108.83957235586556,112.09572533801708 Z"
+      )
+      path.setAttribute("fill", "rgba(255,217,102,1)")
+      path.setAttribute("stroke", "rgba(23,44,81,1)")
+      path.setAttribute("stroke-width", "1px")
+      path.setAttribute("stroke-dasharray", "")
+      path.setAttribute("stroke-linecap", "butt")
+      path.setAttribute("stroke-linejoin", "round")
+
+      noSmoking.appendChild(path)
+      svg.appendChild(noSmoking)
+      break
+    case "rightArrow":
+      const rightArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      rightArrow.setAttribute(
+        "points",
+        `0,${element.height * 0.3} ${element.width * 0.7},${
+          element.height * 0.3
+        } ` +
+          `${element.width * 0.7},0 ${element.width},${element.height * 0.5} ` +
+          `${element.width * 0.7},${element.height} ${element.width * 0.7},${
+            element.height * 0.7
+          } ` +
+          `0,${element.height * 0.7}`
+      )
+
+      // 设置填充色
+      setBackground(element, rightArrow)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        rightArrow.setAttribute("stroke", element.borderColor || "#000")
+        rightArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            rightArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            rightArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            rightArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(rightArrow)
+      break
+    case "leftArrow":
+      const leftArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      leftArrow.setAttribute(
+        "points",
+        `${element.width},${element.height * 0.3} ${element.width * 0.3},${
+          element.height * 0.3
+        } ` +
+          `${element.width * 0.3},0 0,${element.height * 0.5} ` +
+          `${element.width * 0.3},${element.height} ${element.width * 0.3},${
+            element.height * 0.7
+          } ` +
+          `${element.width},${element.height * 0.7}`
+      )
+
+      // 设置填充色
+      setBackground(element, leftArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftArrow.setAttribute("stroke", element.borderColor || "#000")
+        leftArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftArrow)
+      break
+    case "upArrow":
+      const upArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      upArrow.setAttribute(
+        "points",
+        `${element.width * 0.3},${element.height} ${element.width * 0.3},${
+          element.height * 0.3
+        } ` +
+          `0,${element.height * 0.3} ${element.width * 0.5},0 ` +
+          `${element.width},${element.height * 0.3} ${element.width * 0.7},${
+            element.height * 0.3
+          } ` +
+          `${element.width * 0.7},${element.height}`
+      )
+
+      // 设置填充色
+      setBackground(element, upArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        upArrow.setAttribute("stroke", element.borderColor || "#000")
+        upArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            upArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            upArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            upArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(upArrow)
+      break
+    case "downArrow":
+      const downArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      downArrow.setAttribute(
+        "points",
+        `${element.width * 0.3},0 ${element.width * 0.3},${
+          element.height * 0.7
+        } ` +
+          `0,${element.height * 0.7} ${element.width * 0.5},${
+            element.height
+          } ` +
+          `${element.width},${element.height * 0.7} ${element.width * 0.7},${
+            element.height * 0.7
+          } ` +
+          `${element.width * 0.7},0`
+      )
+
+      // 设置填充色
+      setBackground(element, downArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        downArrow.setAttribute("stroke", element.borderColor || "#000")
+        downArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            downArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            downArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            downArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(downArrow)
+      break
+    case "leftRightArrow":
+      const leftRightArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      leftRightArrow.setAttribute(
+        "points",
+        `0,${element.height * 0.5} ${element.width * 0.2},${
+          element.height * 0.2
+        } ` +
+          `${element.width * 0.2},${element.height * 0.4} ${
+            element.width * 0.8
+          },${element.height * 0.4} ` +
+          `${element.width * 0.8},${element.height * 0.2} ${element.width},${
+            element.height * 0.5
+          } ` +
+          `${element.width * 0.8},${element.height * 0.8} ${
+            element.width * 0.8
+          },${element.height * 0.6} ` +
+          `${element.width * 0.2},${element.height * 0.6} ${
+            element.width * 0.2
+          },${element.height * 0.8}`
+      )
+
+      // 设置填充色
+      setBackground(element, leftRightArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftRightArrow.setAttribute("stroke", element.borderColor || "#000")
+        leftRightArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftRightArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftRightArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftRightArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftRightArrow)
+      break
+    case "upDownArrow":
+      const upDownArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      upDownArrow.setAttribute(
+        "points",
+        `${element.width * 0.5},0 ${element.width * 0.3},${
+          element.height * 0.2
+        } ` +
+          `${element.width * 0.4},${element.height * 0.2} ${
+            element.width * 0.4
+          },${element.height * 0.8} ` +
+          `${element.width * 0.3},${element.height * 0.8} ${
+            element.width * 0.5
+          },${element.height} ` +
+          `${element.width * 0.7},${element.height * 0.8} ${
+            element.width * 0.6
+          },${element.height * 0.8} ` +
+          `${element.width * 0.6},${element.height * 0.2} ${
+            element.width * 0.7
+          },${element.height * 0.2}`
+      )
+
+      // 设置填充色
+      setBackground(element, upDownArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        upDownArrow.setAttribute("stroke", element.borderColor || "#000")
+        upDownArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            upDownArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            upDownArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            upDownArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(upDownArrow)
+      break
+    case "quadArrow":
+      const quadArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算缩放比例
+      const scale = Math.min(element.width / 167, element.height / 121)
+      const offsetX = (element.width - 167 * scale) / 2
+      const offsetY = (element.height - 121 * scale) / 2
+
+      // 构建路径数据
+      const pathData = `
+            M${offsetX},${60.5 * scale + offsetY}
+            L${27.225 * scale + offsetX},${33.275 * scale + offsetY}
+            L${27.225 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${27.225 * scale + offsetY}
+            L${56.275 * scale + offsetX},${27.225 * scale + offsetY}
+            L${83.5 * scale + offsetX},${offsetY}
+            L${110.725 * scale + offsetX},${27.225 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${27.225 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${139.775 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${139.775 * scale + offsetX},${33.275 * scale + offsetY}
+            L${167 * scale + offsetX},${60.5 * scale + offsetY}
+            L${139.775 * scale + offsetX},${87.725 * scale + offsetY}
+            L${139.775 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${93.775 * scale + offsetY}
+            L${110.725 * scale + offsetX},${93.775 * scale + offsetY}
+            L${83.5 * scale + offsetX},${121 * scale + offsetY}
+            L${56.275 * scale + offsetX},${93.775 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${93.775 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${27.225 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${27.225 * scale + offsetX},${87.725 * scale + offsetY}
+            Z`
+
+      quadArrow.setAttribute("d", pathData)
+
+      // 设置填充色
+      setBackground(element, quadArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        quadArrow.setAttribute("stroke", element.borderColor || "#000")
+        quadArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        quadArrow.setAttribute("stroke-linecap", "butt")
+        quadArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            quadArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            quadArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            quadArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(quadArrow)
+      break
+    case "leftRightUpArrow":
+      const leftRightUpArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算缩放比例
+      const scale2 = Math.min(element.width / 167, element.height / 121)
+      const offsetX2 = (element.width - 167 * scale2) / 2
+      const offsetY2 = (element.height - 121 * scale2) / 2
+
+      // 构建路径数据
+      const pathData2 = `
+            M${offsetX2},${60.5 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${69.8875 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${69.8875 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${56.275 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${83.5 * scale2 + offsetX2},${offsetY2}
+            L${110.725 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${97.1125 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${97.1125 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
+            L${167 * scale2 + offsetX2},${60.5 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${97.1125 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${69.8875 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
+            Z`
+
+      leftRightUpArrow.setAttribute("d", pathData2)
+
+      // 设置填充色
+      setBackground(element, leftRightUpArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftRightUpArrow.setAttribute("stroke", element.borderColor || "#000")
+        leftRightUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        leftRightUpArrow.setAttribute("stroke-linecap", "butt")
+        leftRightUpArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftRightUpArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftRightUpArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftRightUpArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftRightUpArrow)
+      break
+    case "bentArrow":
+      const bentArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 构建路径数据
+      const pathData3 = `
+            M0,${element.height * 0.88}
+            L0,${element.height * 0.495}
+            A${element.width * 0.385} ${element.height * 0.385} 0 0 1 ${
+        element.width * 0.385
+      } ${element.height * 0.11}
+            L${element.width * 0.67},${element.height * 0.11}
+            L${element.width * 0.67},0
+            L${element.width * 0.89},${element.height * 0.22}
+            L${element.width * 0.67},${element.height * 0.44}
+            L${element.width * 0.67},${element.height * 0.33}
+            L${element.width * 0.385},${element.height * 0.33}
+            A${element.width * 0.165} ${element.height * 0.165} 0 0 0 ${
+        element.width * 0.22
+      } ${element.height * 0.495}
+            L${element.width * 0.22},${element.height * 0.88}
+            Z`
+
+      bentArrow.setAttribute("d", pathData3)
+
+      // 设置填充色
+      setBackground(element, bentArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        bentArrow.setAttribute("stroke", element.borderColor || "#000")
+        bentArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        bentArrow.setAttribute("stroke-linecap", "butt")
+        bentArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            bentArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            bentArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            bentArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(bentArrow)
+      break
+    case "parallelogram":
+      const parallelogram = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      parallelogram.setAttribute(
+        "points",
+        `${element.width * 0.25},0 ${element.width},0 ${element.width * 0.75},${
+          element.height
+        } 0,${element.height}`
+      )
+
+      // 设置填充色
+      setBackground(element, parallelogram)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        parallelogram.setAttribute("stroke", element.borderColor || "#000")
+        parallelogram.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            parallelogram.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            parallelogram.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            parallelogram.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(parallelogram)
+      break
+    case "uturnArrow":
+      const uturnArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 构建路径数据
+      const pathDataUturn = `
+            M0,${element.height * 0.745}
+            L0,${element.height * 0.179375}
+            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
+        element.width * 0.179375
+      },0
+            L${element.width * 0.179375},0
+            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
+        element.width * 0.359375
+      },${element.height * 0.179375}
+            L${element.width * 0.359375},${element.height * 0.205}
+            L${element.width * 0.41},${element.height * 0.205}
+            L${element.width * 0.3075},${element.height * 0.3075}
+            L${element.width * 0.205},${element.height * 0.205}
+            L${element.width * 0.25625},${element.height * 0.205}
+            L${element.width * 0.25625},${element.height * 0.179375}
+            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
+        element.width * 0.179375
+      },${element.height * 0.1025}
+            L${element.width * 0.179375},${element.height * 0.1025}
+            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
+        element.width * 0.1025
+      },${element.height * 0.179375}
+            L${element.width * 0.1025},${element.height * 0.745}
+            Z`
+
+      uturnArrow.setAttribute("d", pathDataUturn)
+
+      // 设置填充色
+      setBackground(element, uturnArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        uturnArrow.setAttribute("stroke", element.borderColor || "#000")
+        uturnArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        uturnArrow.setAttribute("stroke-linecap", "butt")
+        uturnArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            uturnArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            uturnArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            uturnArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(uturnArrow)
+      break
+    case "leftUpArrow":
+      const leftUpArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 使用提供的路径数据
+      const pathDataLeftUp = `
+            M0,${element.height * 0.65}
+            L${element.width * 0.15},${element.height * 0.4}
+            L${element.width * 0.15},${element.height * 0.55}
+            L${element.width * 0.5},${element.height * 0.55}
+            L${element.width * 0.5},${element.height * 0.1}
+            L${element.width * 0.35},${element.height * 0.1}
+            L${element.width * 0.65},0
+            L${element.width * 0.85},${element.height * 0.1}
+            L${element.width * 0.75},${element.height * 0.1}
+            L${element.width * 0.75},${element.height * 0.85}
+            L${element.width * 0.15},${element.height * 0.85}
+            L${element.width * 0.15},${element.height * 1}
+            Z`
+
+      leftUpArrow.setAttribute("d", pathDataLeftUp)
+
+      // 设置填充色
+      setBackground(element, leftUpArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftUpArrow.setAttribute("stroke", element.borderColor || "#000")
+        leftUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        leftUpArrow.setAttribute("stroke-linecap", "butt")
+        leftUpArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftUpArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftUpArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftUpArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftUpArrow)
+      break
+    case "bentUpArrow":
+      const bentUpArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 构建路径数据，去掉左侧箭头
+      // 使用提供的路径数据
+      const pathDataBentUp = `
+            M0,${element.height * 0.89}
+            L0,${element.height * 0.7}
+            L${element.width * 0.575},${element.height * 0.7}
+            L${element.width * 0.575},${element.height * 0.2}
+            L${element.width * 0.46},${element.height * 0.2}
+            L${element.width * 0.69},0
+            L${element.width * 0.92},${element.height * 0.2}
+            L${element.width * 0.805},${element.height * 0.2}
+            L${element.width * 0.805},${element.height * 0.89}
+            Z`
+
+      bentUpArrow.setAttribute("d", pathDataBentUp)
+
+      // 设置填充色
+      setBackground(element, bentUpArrow)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        bentUpArrow.setAttribute("stroke", element.borderColor || "#000")
+        bentUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        bentUpArrow.setAttribute("stroke-linecap", "butt")
+        bentUpArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            bentUpArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            bentUpArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            bentUpArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(bentUpArrow)
+      break
+    case "curvedRightArrow":
+      const curvedRightArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 使用提供的路径数据
+      const pathDataCurvedRight = `
+            M${element.width},0
+            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
+        element.height * 0.4
+      }
+            L0,${element.height * 0.5}
+            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
+        element.height * 0.15
+      }
+            Z
+            M0,${element.height * 0.4}
+            A${element.width} ${element.height * 0.4} 0 0 0 ${
+        element.width * 0.8
+      } ${element.height * 0.8}
+            L${element.width * 0.8},${element.height * 0.75}
+            L${element.width},${element.height * 0.875}
+            L${element.width * 0.8},${element.height * 1}
+            L${element.width * 0.8},${element.height * 0.95}
+            A${element.width} ${element.height * 0.4} 0 0 1 0 ${
+        element.height * 0.5
+      }
+            Z`
+
+      curvedRightArrow.setAttribute("d", pathDataCurvedRight)
+
+      // 设置填充色
+      setBackground(element, curvedRightArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        curvedRightArrow.setAttribute("stroke", element.borderColor || "#000")
+        curvedRightArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        curvedRightArrow.setAttribute("stroke-linecap", "butt")
+        curvedRightArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            curvedRightArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            curvedRightArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            curvedRightArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(curvedRightArrow)
+      break
+    case "curvedLeftArrow":
+      const curvedLeftArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 定义左弧形箭头的路径数据
+      const pathDataCurvedLeft = `
+            M0,0
+            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
+        element.height * 0.4
+      }
+            L${element.width},${element.height * 0.55}
+            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
+        element.height * 0.15
+      }
+            Z
+            M0,${element.height * 0.85}
+            L${element.width * 0.25},${element.height * 0.65}
+            L${element.width * 0.25},${element.height * 0.75}
+            A${element.width} ${element.height * 0.4} 0 0 0 ${element.width} ${
+        element.height * 0.4
+      }
+            L${element.width},${element.height * 0.5}
+            L${element.width},${element.height * 0.5}
+            A${element.width} ${element.height * 0.4} 0 0 1 ${
+        element.width * 0.25
+      } ${element.height * 0.9}
+            L${element.width * 0.25},${element.height}
+            Z`
+
+      curvedLeftArrow.setAttribute("d", pathDataCurvedLeft)
+
+      // 设置填充色
+      setBackground(element, curvedLeftArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        curvedLeftArrow.setAttribute("stroke", element.borderColor || "#000")
+        curvedLeftArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        curvedLeftArrow.setAttribute("stroke-linecap", "butt")
+        curvedLeftArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            curvedLeftArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            curvedLeftArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            curvedLeftArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(curvedLeftArrow)
+      break
+    case "curvedUpArrow":
+      const curvedUpArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 定义上弧形箭头的路径数据
+      const pathDataCurvedUp = `
+            M${element.width * 0.905},0
+            L${element.width * 0.81},${element.height * 0.25}
+            L${element.width * 0.857},${element.height * 0.25}
+            A${element.width * 0.428} ${element.height} 0 0 1 ${
+        element.width * 0.428
+      },${element.height}
+            L${element.width * 0.522},${element.height}
+            A${element.width * 0.428} ${element.height} 0 0 0 ${
+        element.width * 0.952
+      },${element.height * 0.25}
+            L${element.width},${element.height * 0.25}
+            Z
+            M${element.width * 0.094},0
+            L0,0
+            A${element.width * 0.428} ${element.height} 0 0 0 ${
+        element.width * 0.428
+      },${element.height}
+            L${element.width * 0.522},${element.height}
+            A${element.width * 0.428} ${element.height} 0 0 1 ${
+        element.width * 0.094
+      },0
+            Z`
+
+      curvedUpArrow.setAttribute("d", pathDataCurvedUp)
+
+      // 设置填充色
+      setBackground(element, curvedUpArrow)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        curvedUpArrow.setAttribute("stroke", element.borderColor || "#000")
+        curvedUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        curvedUpArrow.setAttribute("stroke-linecap", "butt")
+        curvedUpArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            curvedUpArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            curvedUpArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            curvedUpArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(curvedUpArrow)
+      break
+    case "curvedDownArrow":
+      const curvedDownArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 定义下弧形箭头的路径数据
+      const pathDataCurvedDown = `
+            M0,${element.height}
+            L${element.width * 0.16},${element.height}
+            A${element.width * 0.46} ${element.height} 0 0 1 ${
+        element.width * 0.62
+      },0
+            L${element.width * 0.46},0
+            A${element.width * 0.46} ${element.height} 0 0 0 0,${element.height}
+            Z
+            M${element.width},${element.height}
+            L${element.width * 0.84},${element.height * 0.75}
+            L${element.width * 0.92},${element.height * 0.75}
+            A${element.width * 0.46} ${element.height} 0 0 0 ${
+        element.width * 0.46
+      },0
+            L${element.width * 0.62},0
+            A${element.width * 0.46} ${element.height} 0 0 1 ${
+        element.width * 1.08
+      },${element.height * 0.75}
+            L${element.width * 1.16},${element.height * 0.75}
+            Z`
+
+      curvedDownArrow.setAttribute("d", pathDataCurvedDown)
+
+      // 设置填充色
+      setBackground(element, curvedDownArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        curvedDownArrow.setAttribute("stroke", element.borderColor || "#000")
+        curvedDownArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        curvedDownArrow.setAttribute("stroke-linecap", "butt")
+        curvedDownArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            curvedDownArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            curvedDownArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            curvedDownArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(curvedDownArrow)
+      break
+    case "stripedRightArrow":
+      const stripedRightArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "g"
+      )
+
+      // 主箭头部分
+      const mainArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      mainArrow.setAttribute(
+        "d",
+        `M${element.width * 0.062},${element.height * 0.25}
+            L${element.width * 0.8},${element.height * 0.25}
+            L${element.width * 0.8},0
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.8},${element.height}
+            L${element.width * 0.8},${element.height * 0.75}
+            L${element.width * 0.062},${element.height * 0.75}
+            Z`
+      )
+
+      // 第一条尾部条纹
+      const stripe1 = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      stripe1.setAttribute(
+        "d",
+        `M0,${element.height * 0.25}
+            L${element.width * 0.012},${element.height * 0.25}
+            L${element.width * 0.012},${element.height * 0.75}
+            L0,${element.height * 0.75}
+            Z`
+      )
+
+      // 第二条尾部条纹
+      const stripe2 = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      stripe2.setAttribute(
+        "d",
+        `M${element.width * 0.025},${element.height * 0.25}
+            L${element.width * 0.049},${element.height * 0.25}
+            L${element.width * 0.049},${element.height * 0.75}
+            L${element.width * 0.025},${element.height * 0.75}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, mainArrow)
+      setBackground(element, stripe1)
+      setBackground(element, stripe2)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        ;[mainArrow, stripe1, stripe2].forEach((path) => {
+          path.setAttribute("stroke", element.borderColor || "#000")
+          path.setAttribute("stroke-width", element.borderWidth || 1)
+          path.setAttribute("stroke-linecap", "butt")
+          path.setAttribute("stroke-linejoin", "round")
+
+          // 处理虚线边框
+          if (
+            element.borderType === "dotted" ||
+            element.borderType === "dashed"
+          ) {
+            if (element.borderStrokeDasharray) {
+              path.setAttribute(
+                "stroke-dasharray",
+                element.borderStrokeDasharray
+              )
+            } else if (element.borderType === "dotted") {
+              path.setAttribute("stroke-dasharray", "1, 3")
+            } else if (element.borderType === "dashed") {
+              path.setAttribute("stroke-dasharray", "5, 5")
+            }
+          }
+        })
+      }
+
+      stripedRightArrow.appendChild(mainArrow)
+      stripedRightArrow.appendChild(stripe1)
+      stripedRightArrow.appendChild(stripe2)
+      svg.appendChild(stripedRightArrow)
+      break
+    case "rightArrowCallout":
+      const rightArrowCallout = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      rightArrowCallout.setAttribute(
+        "d",
+        `M0,0
+            L${element.width * 0.44},0
+            L${element.width * 0.44},${element.height * 0.375}
+            L${element.width * 0.79},${element.height * 0.375}
+            L${element.width * 0.79},${element.height * 0.25}
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.79},${element.height * 0.75}
+            L${element.width * 0.79},${element.height * 0.625}
+            L${element.width * 0.44},${element.height * 0.625}
+            L${element.width * 0.44},${element.height}
+            L0,${element.height}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, rightArrowCallout)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        rightArrowCallout.setAttribute("stroke", element.borderColor || "#000")
+        rightArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
+        rightArrowCallout.setAttribute("stroke-linecap", "butt")
+        rightArrowCallout.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            rightArrowCallout.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            rightArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            rightArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(rightArrowCallout)
+      break
+    case "leftRightArrowCallout":
+      const leftRightArrowCallout = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      leftRightArrowCallout.setAttribute(
+        "d",
+        `M0,${element.height * 0.5}
+            L${element.width * 0.139},${element.height * 0.25}
+            L${element.width * 0.139},${element.height * 0.375}
+            L${element.width * 0.364},${element.height * 0.375}
+            L${element.width * 0.364},0
+            L${element.width * 0.636},0
+            L${element.width * 0.636},${element.height * 0.375}
+            L${element.width * 0.861},${element.height * 0.375}
+            L${element.width * 0.861},${element.height * 0.25}
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.861},${element.height * 0.75}
+            L${element.width * 0.861},${element.height * 0.625}
+            L${element.width * 0.636},${element.height * 0.625}
+            L${element.width * 0.636},${element.height}
+            L${element.width * 0.364},${element.height}
+            L${element.width * 0.364},${element.height * 0.625}
+            L${element.width * 0.139},${element.height * 0.625}
+            L${element.width * 0.139},${element.height * 0.75}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, leftRightArrowCallout)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftRightArrowCallout.setAttribute(
+          "stroke",
+          element.borderColor || "#000"
+        )
+        leftRightArrowCallout.setAttribute(
+          "stroke-width",
+          element.borderWidth || 1
+        )
+        leftRightArrowCallout.setAttribute("stroke-linecap", "butt")
+        leftRightArrowCallout.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftRightArrowCallout.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftRightArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftRightArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftRightArrowCallout)
+      break
+    case "quadArrowCallout":
+      const quadArrowCallout = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      quadArrowCallout.setAttribute(
+        "d",
+        `M0,${element.height * 0.5}
+            L${element.width * 0.096},${element.height * 0.315}
+            L${element.width * 0.096},${element.height * 0.407}
+            L${element.width * 0.26},${element.height * 0.407}
+            L${element.width * 0.26},${element.height * 0.259}
+            L${element.width * 0.453},${element.height * 0.259}
+            L${element.width * 0.453},${element.height * 0.185}
+            L${element.width * 0.405},${element.height * 0.185}
+            L${element.width * 0.5},0
+            L${element.width * 0.595},${element.height * 0.185}
+            L${element.width * 0.547},${element.height * 0.185}
+            L${element.width * 0.547},${element.height * 0.259}
+            L${element.width * 0.74},${element.height * 0.259}
+            L${element.width * 0.74},${element.height * 0.407}
+            L${element.width * 0.904},${element.height * 0.407}
+            L${element.width * 0.904},${element.height * 0.315}
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.904},${element.height * 0.685}
+            L${element.width * 0.904},${element.height * 0.593}
+            L${element.width * 0.74},${element.height * 0.593}
+            L${element.width * 0.74},${element.height * 0.741}
+            L${element.width * 0.547},${element.height * 0.741}
+            L${element.width * 0.547},${element.height * 0.815}
+            L${element.width * 0.595},${element.height * 0.815}
+            L${element.width * 0.5},${element.height}
+            L${element.width * 0.405},${element.height * 0.815}
+            L${element.width * 0.453},${element.height * 0.815}
+            L${element.width * 0.453},${element.height * 0.741}
+            L${element.width * 0.26},${element.height * 0.741}
+            L${element.width * 0.26},${element.height * 0.593}
+            L${element.width * 0.096},${element.height * 0.593}
+            L${element.width * 0.096},${element.height * 0.685}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, quadArrowCallout)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        quadArrowCallout.setAttribute("stroke", element.borderColor || "#000")
+        quadArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
+        quadArrowCallout.setAttribute("stroke-linecap", "butt")
+        quadArrowCallout.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            quadArrowCallout.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            quadArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            quadArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(quadArrowCallout)
+      break
+    case "leftArrowCallout":
+      const leftArrowCallout = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      leftArrowCallout.setAttribute(
+        "d",
+        `M0,${element.height * 0.5}
+            L${element.width * 0.183},${element.height * 0.25}
+            L${element.width * 0.183},${element.height * 0.375}
+            L${element.width * 0.35},${element.height * 0.375}
+            L${element.width * 0.35},0
+            L${element.width},0
+            L${element.width},${element.height}
+            L${element.width * 0.35},${element.height}
+            L${element.width * 0.35},${element.height * 0.625}
+            L${element.width * 0.183},${element.height * 0.625}
+            L${element.width * 0.183},${element.height * 0.75}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, leftArrowCallout)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        leftArrowCallout.setAttribute("stroke", element.borderColor || "#000")
+        leftArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
+        leftArrowCallout.setAttribute("stroke-linecap", "butt")
+        leftArrowCallout.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            leftArrowCallout.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            leftArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            leftArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(leftArrowCallout)
+      break
+    case "upArrowCallout":
+      const upArrowCallout = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      upArrowCallout.setAttribute(
+        "d",
+        `M0,${element.height * 0.35}
+            L${element.width * 0.41},${element.height * 0.35}
+            L${element.width * 0.41},${element.height * 0.25}
+            L${element.width * 0.32},${element.height * 0.25}
+            L${element.width * 0.5},0
+            L${element.width * 0.68},${element.height * 0.25}
+            L${element.width * 0.59},${element.height * 0.25}
+            L${element.width * 0.59},${element.height * 0.35}
+            L${element.width},${element.height * 0.35}
+            L${element.width},${element.height}
+            L0,${element.height}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, upArrowCallout)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        upArrowCallout.setAttribute("stroke", element.borderColor || "#000")
+        upArrowCallout.setAttribute("stroke-width", element.borderWidth || 1)
+        upArrowCallout.setAttribute("stroke-linecap", "butt")
+        upArrowCallout.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            upArrowCallout.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            upArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            upArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(upArrowCallout)
+      break
+    case "notchedRightArrow":
+      const notchedRightArrow = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      notchedRightArrow.setAttribute(
+        "d",
+        `M0,${element.height * 0.25}
+            L${element.width * 0.83},${element.height * 0.25}
+            L${element.width * 0.83},0
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.83},${element.height}
+            L${element.width * 0.83},${element.height * 0.75}
+            L0,${element.height * 0.75}
+            L${element.width * 0.086},${element.height * 0.5}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, notchedRightArrow)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        notchedRightArrow.setAttribute("stroke", element.borderColor || "#000")
+        notchedRightArrow.setAttribute("stroke-width", element.borderWidth || 1)
+        notchedRightArrow.setAttribute("stroke-linecap", "butt")
+        notchedRightArrow.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            notchedRightArrow.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            notchedRightArrow.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            notchedRightArrow.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(notchedRightArrow)
+      break
+    case "homePlate":
+      const homePlate = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      homePlate.setAttribute(
+        "d",
+        `M0,0
+            L${element.width * 0.925},0
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.925},${element.height}
+            L0,${element.height}
+            Z`
+      )
+
+      // 设置填充色
+      setBackground(element, homePlate)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        homePlate.setAttribute("stroke", element.borderColor || "#000")
+        homePlate.setAttribute("stroke-width", element.borderWidth || 1)
+        homePlate.setAttribute("stroke-linecap", "butt")
+        homePlate.setAttribute("stroke-linejoin", "round")
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            homePlate.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            homePlate.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            homePlate.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(homePlate)
+      break
+    case "rightTriangle":
+      const rightTriangle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      rightTriangle.setAttribute(
+        "points",
+        `0,0 ${element.width},${element.height} 0,${element.height}`
+      )
+
+      // 设置填充色
+      setBackground(element, rightTriangle)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        rightTriangle.setAttribute("stroke", element.borderColor || "#000")
+        rightTriangle.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            rightTriangle.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            rightTriangle.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            rightTriangle.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(rightTriangle)
+      break
+    case "semiCircle":
+      const semiCircle = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      semiCircle.setAttribute(
+        "d",
+        `M0,${element.height} A${element.width / 2},${element.height} 0 0,1 ${
+          element.width
+        },${element.height} Z`
+      )
+
+      // 设置填充色
+      setBackground(element, semiCircle)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        semiCircle.setAttribute("stroke", element.borderColor || "#000")
+        semiCircle.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            semiCircle.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            semiCircle.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            semiCircle.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(semiCircle)
+      break
+
+    case "star":
+      const star = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      const cx = element.width / 2
+      const cy = element.height / 2
+      const outerRadius = Math.min(element.width, element.height) / 2
+      const innerRadius = outerRadius * 0.4
+      let starPoints = ""
+
+      for (let i = 0; i < 10; i++) {
+        const radius = i % 2 === 0 ? outerRadius : innerRadius
+        const angle = (Math.PI * i) / 5
+        const x = cx + radius * Math.sin(angle)
+        const y = cy - radius * Math.cos(angle)
+        starPoints += `${x},${y} `
+      }
+
+      star.setAttribute("points", starPoints.trim())
+
+      // 设置填充色
+      setBackground(element, star)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        star.setAttribute("stroke", element.borderColor || "#000")
+        star.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            star.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+          } else if (element.borderType === "dotted") {
+            star.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            star.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(star)
+      break
+
+    case "cross":
+      const cross = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+      cross.setAttribute(
+        "points",
+        `${element.width * 0.35},0 ${element.width * 0.65},0 ${
+          element.width * 0.65
+        },${element.height * 0.35} ` +
+          `${element.width},${element.height * 0.35} ${element.width},${
+            element.height * 0.65
+          } ` +
+          `${element.width * 0.65},${element.height * 0.65} ${
+            element.width * 0.65
+          },${element.height} ` +
+          `${element.width * 0.35},${element.height} ${element.width * 0.35},${
+            element.height * 0.65
+          } ` +
+          `0,${element.height * 0.65} 0,${element.height * 0.35} ${
+            element.width * 0.35
+          },${element.height * 0.35}`
+      )
+
+      // 设置填充色
+      setBackground(element, cross)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        cross.setAttribute("stroke", element.borderColor || "#000")
+        cross.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            cross.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            cross.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            cross.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(cross)
+      break
+
+    case "chevron":
+      const chevron = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "polygon"
+      )
+
+      chevron.setAttribute(
+        "points",
+        `${element.width * 0.5},0 ${element.width},${element.height * 0.5} ` +
+          `${element.width * 0.5},${element.height} ` +
+          `0,${element.height} ${element.width * 0.5},${
+            element.height * 0.5
+          } 0,0`
+      )
+
+      // 设置填充色
+      setBackground(element, chevron)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        chevron.setAttribute("stroke", element.borderColor || "#000")
+        chevron.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            chevron.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            chevron.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            chevron.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(chevron)
+      break
+
+    case "frame":
+      // 创建外框和内框
+      const outerRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      )
+      outerRect.setAttribute("x", 0)
+      outerRect.setAttribute("y", 0)
+      outerRect.setAttribute("width", element.width)
+      outerRect.setAttribute("height", element.height)
+
+      const innerRect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      )
+      const frameWidth = element.width / 10
+      innerRect.setAttribute("x", frameWidth)
+      innerRect.setAttribute("y", frameWidth)
+      innerRect.setAttribute("width", element.width - frameWidth * 2)
+      innerRect.setAttribute("height", element.height - frameWidth * 2)
+
+      // 设置填充色
+      setBackground(element, outerRect)
+      innerRect.setAttribute("fill", "white") // 内框为白色
+      // 设置边框
+      if (element.borderWidth > 0) {
+        outerRect.setAttribute("stroke", element.borderColor || "#000")
+        outerRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            outerRect.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            outerRect.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            outerRect.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(outerRect)
+      svg.appendChild(innerRect)
+      break
+
+    case "cloud":
+      // 使用路径绘制云形
+      const cloud = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      const w = element.width
+      const h = element.height
+
+      cloud.setAttribute(
+        "d",
+        `M${w * 0.2},${h * 0.6} ` +
+          `C${w * 0.05},${h * 0.6} ${w * 0.05},${h * 0.3} ${w * 0.2},${
+            h * 0.3
+          } ` +
+          `C${w * 0.2},${h * 0.1} ${w * 0.45},${h * 0.1} ${w * 0.5},${
+            h * 0.3
+          } ` +
+          `C${w * 0.55},${h * 0.1} ${w * 0.8},${h * 0.1} ${w * 0.8},${
+            h * 0.3
+          } ` +
+          `C${w * 0.95},${h * 0.3} ${w * 0.95},${h * 0.6} ${w * 0.8},${
+            h * 0.6
+          } ` +
+          `L${w * 0.2},${h * 0.6} Z`
+      )
+
+      // 设置填充色
+      setBackground(element, cloud)
+      // 设置边框
+      if (element.borderWidth > 0) {
+        cloud.setAttribute("stroke", element.borderColor || "#000")
+        cloud.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            cloud.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            cloud.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            cloud.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(cloud)
+      break
+    case "blockArc":
+      const blockArc = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+
+      // 计算弧形参数
+      const rx = element.width / 2
+      const ry = element.height / 2
+      const innerRatio = 0.86 // 根据示例计算的内弧半径比例
+      const innerRx = rx * innerRatio
+      const innerRy = ry * innerRatio
+
+      // 构建路径
+      const path2 = `
+            M 0,${ry} 
+            A ${rx} ${ry} 0 1 1 ${element.width} ${ry}
+            L ${element.width - (rx - innerRx)},${ry}
+            A ${innerRx} ${innerRy} 0 1 0 ${rx - innerRx},${ry}
+            Z`
+
+      blockArc.setAttribute("d", path2.trim())
+
+      // 设置填充色
+      setBackground(element, blockArc)
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        blockArc.setAttribute("stroke", element.borderColor || "#000")
+        blockArc.setAttribute("stroke-width", element.borderWidth || 1)
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            blockArc.setAttribute(
+              "stroke-dasharray",
+              element.borderStrokeDasharray
+            )
+          } else if (element.borderType === "dotted") {
+            blockArc.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            blockArc.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(blockArc)
+      break
+
+    case "rect":
+    default:
+      const rect = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "rect"
+      )
+      rect.setAttribute("x", 0)
+      rect.setAttribute("y", 0)
+      rect.setAttribute("width", element.width)
+      rect.setAttribute("height", element.height)
+      if (element.fill && element.fill.type) {
+        // 设置填充色
+        if (element.fill.type === "color") {
+          rect.setAttribute("fill", element.fill.value || "transparent")
+        } else if (element.fill.type === "gradient") {
+          // 渐变填充
+          const { colors, path, rot } = element.fill.value
+
+          if (colors && colors.length >= 2) {
+            const gradientType = path === "rect" ? "linear" : "radial"
+            const gradientAngle =
+              gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
+
+            let gradientString = `${gradientType}-gradient(`
+            if (gradientType === "linear") {
+              gradientString += `${gradientAngle}deg, `
+            }
+
+            colors.forEach((color, i) => {
+              gradientString += `${color.color} ${color.pos}${
+                i < colors.length - 1 ? ", " : ""
+              }`
+            })
+            gradientString += ")"
+
+            // 创建渐变定义
+            const gradientDef = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "defs"
+            )
+            const gradientEl = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              gradientType === "linear" ? "linearGradient" : "radialGradient"
+            )
+            const gradientId = `gradient-${Date.now()}-${Math.random()
+              .toString(36)
+              .substr(2, 9)}`
+            gradientEl.setAttribute("id", gradientId)
+
+            // 设置渐变属性
+            if (gradientType === "linear") {
+              gradientEl.setAttribute(
+                "gradientTransform",
+                `rotate(${gradientAngle})`
+              )
+            }
+
+            // 添加渐变色标
+            colors.forEach((color) => {
+              const stop = document.createElementNS(
+                "http://www.w3.org/2000/svg",
+                "stop"
+              )
+              stop.setAttribute("offset", color.pos)
+              stop.setAttribute("stop-color", color.color)
+              gradientEl.appendChild(stop)
+            })
+
+            gradientDef.appendChild(gradientEl)
+            svg.appendChild(gradientDef)
+
+            // 应用渐变
+            rect.setAttribute("fill", `url(#${gradientId})`)
+          }
+        } else if (element.fill.type === "image") {
+          // 创建图案填充
+          const pattern = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "pattern"
+          )
+          const patternId = `pattern-${Date.now()}-${Math.random()
+            .toString(36)
+            .substr(2, 9)}`
+          pattern.setAttribute("id", patternId)
+          pattern.setAttribute("patternUnits", "userSpaceOnUse")
+          pattern.setAttribute("width", "100%")
+          pattern.setAttribute("height", "100%")
+
+          // 创建图片元素
+          const image = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "image"
+          )
+          image.setAttribute("width", "100%")
+          image.setAttribute("height", "100%")
+          image.setAttribute("preserveAspectRatio", "xMidYMid slice")
+          image.setAttributeNS(
+            "http://www.w3.org/1999/xlink",
+            "href",
+            element.fill.value.picBase64
+          )
+
+          pattern.appendChild(image)
+
+          // 添加pattern到defs
+          const defs = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "defs"
+          )
+          defs.appendChild(pattern)
+          svg.appendChild(defs)
+
+          // 应用图案填充
+          rect.setAttribute("fill", `url(#${patternId})`)
+        } else {
+          rect.setAttribute("fill", "transparent")
+        }
+      } else {
+        rect.setAttribute("fill", "#ffffff00")
+      }
+
+      // 设置边框
+      if (element.borderWidth > 0) {
+        rect.setAttribute("stroke", element.borderColor || "#000")
+        rect.setAttribute("stroke-width", element.borderWidth || 1)
+
+        // 处理虚线边框
+        if (
+          element.borderType === "dotted" ||
+          element.borderType === "dashed"
+        ) {
+          if (element.borderStrokeDasharray) {
+            rect.setAttribute("stroke-dasharray", element.borderStrokeDasharray)
+          } else if (element.borderType === "dotted") {
+            rect.setAttribute("stroke-dasharray", "1, 3")
+          } else if (element.borderType === "dashed") {
+            rect.setAttribute("stroke-dasharray", "5, 5")
+          }
+        }
+      }
+
+      svg.appendChild(rect)
+      break
+  }
+
+  const transformList = []
+  let rotateDeg = element.rotate || 0
+
+  if (element.isFlipV) {
+    transformList.push(`scaleY(-1)`)
+    rotateDeg = -rotateDeg // 垂直翻转时反转旋转方向
+  }
+
+  if (element.isFlipH) {
+    transformList.push(`scaleX(-1)`)
+    rotateDeg = -rotateDeg // 水平翻转时反转旋转方向
+  }
+
+  if (element.rotate) {
+    transformList.push(`rotate(${rotateDeg}deg)`)
+  }
+
+  if (transformList.length > 0) {
+    el.style.transform = transformList.join(" ")
+    el.style.transformOrigin = "center center"
+  }
+
+  el.appendChild(svg)
+
+  // 设置形状内容
+  if (element.content) {
+    const contentContainer = document.createElement("div")
+    contentContainer.innerHTML = this.convertPtToPxInContent(element.content)
+    contentContainer.style.position = "absolute"
+    contentContainer.style.width = element.width + "px"
+    contentContainer.style.height = element.height + "px"
+    contentContainer.style.top = "0px"
+    contentContainer.style.left = "0px"
+    contentContainer.style.display = "flex"
+    contentContainer.style.alignItems = "center"
+    contentContainer.style.justifyContent = "center"
+    contentContainer.style.zIndex = element.order
+    contentContainer.style.pointerEvents = "none"
+    const transformList = []
+    let rotateDeg = element.rotate || 0
+
+    if (element.isFlipV) {
+      transformList.push(`scaleY(-1)`)
+      rotateDeg = -rotateDeg // 垂直翻转时反转旋转方向
+    }
+
+    if (element.isFlipH) {
+      transformList.push(`scaleX(-1)`)
+      rotateDeg = -rotateDeg // 水平翻转时反转旋转方向
+    }
+
+    if (element.rotate) {
+      transformList.push(`rotate(${rotateDeg}deg)`)
+    }
+
+    if (transformList.length > 0) {
+      contentContainer.style.transform = transformList.join(" ")
+      contentContainer.style.transformOrigin = "center center"
+    }
+    el.appendChild(contentContainer)
+  }
+  return el
+}
+
+// 创建表格元素
+const createTableElement = (element) => {
+  const el = document.createElement("div")
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.width = element.width + "px"
+  el.style.height = element.height + "px"
+  el.style.zIndex = element.order
+
+  // 创建表格元素
+  const table = document.createElement("table")
+  table.style.width = element.width + "px"
+  table.style.height = element.height + "px"
+  table.style.borderCollapse = "collapse"
+  table.style.tableLayout = "fixed"
+  // 设置表格边框
+  if (element.borders) {
+    if (element.borders.all) {
+      const border = element.borders.all
+      table.style.border = `${border.borderWidth || 1}px ${
+        border.borderType || "solid"
+      } ${border.borderColor || "#000"}`
+    } else {
+      // 分别设置四边边框
+      if (element.borders.top) {
+        table.style.borderTop = `${element.borders.top.borderWidth || 1}px ${
+          element.borders.top.borderType || "solid"
+        } ${element.borders.top.borderColor || "#000"}`
+      }
+      if (element.borders.bottom) {
+        table.style.borderBottom = `${
+          element.borders.bottom.borderWidth || 1
+        }px ${element.borders.bottom.borderType || "solid"} ${
+          element.borders.bottom.borderColor || "#000"
+        }`
+      }
+      if (element.borders.left) {
+        table.style.borderLeft = `${element.borders.left.borderWidth || 1}px ${
+          element.borders.left.borderType || "solid"
+        } ${element.borders.left.borderColor || "#000"}`
+      }
+      if (element.borders.right) {
+        table.style.borderRight = `${
+          element.borders.right.borderWidth || 1
+        }px ${element.borders.right.borderType || "solid"} ${
+          element.borders.right.borderColor || "#000"
+        }`
+      }
+    }
+  }
+
+  // 创建表格内容
+  const tbody = document.createElement("tbody")
+
+  // 处理表格数据
+  if (element.data && element.data.length > 0) {
+    element.data.forEach((rowData, rowIndex) => {
+      const tr = document.createElement("tr")
+
+      rowData.forEach((cell, colIndex) => {
+        // 跳过被合并的单元格
+        if (cell.hMerge) return
+
+        const td = document.createElement("td")
+
+        // 设置单元格内容
+        if (cell.text) {
+          td.innerHTML = this.convertPtToPxInContent(cell.text)
+        }
+
+        // 设置单元格样式
+        td.style.padding = "0px"
+        td.style.verticalAlign = "middle"
+
+        // 设置文本样式
+        if (cell.fontColor) td.style.color = cell.fontColor
+        if (cell.fontSize) td.style.fontSize = cell.fontSize
+        if (cell.fontFamily) td.style.fontFamily = cell.fontFamily
+        if (cell.bold) td.style.fontWeight = "bold"
+        if (cell.italic) td.style.fontStyle = "italic"
+        if (cell.underline) td.style.textDecoration = "underline"
+        if (cell.align) td.style.textAlign = cell.align
+
+        // 设置背景色
+        if (cell.fillColor) td.style.backgroundColor = cell.fillColor
+
+        // 设置单元格边框
+        if (cell.borders) {
+          if (cell.borders.all) {
+            const border = cell.borders.all
+            td.style.border = `${border.borderWidth || 1}px ${
+              border.borderType || "solid"
+            } ${border.borderColor || "#000"}`
+          } else {
+            // 分别设置四边边框
+            if (cell.borders.top) {
+              td.style.borderTop = `${cell.borders.top.borderWidth || 1}px ${
+                cell.borders.top.borderType || "solid"
+              } ${cell.borders.top.borderColor || "#000"}`
+            }
+            if (cell.borders.bottom) {
+              td.style.borderBottom = `${
+                cell.borders.bottom.borderWidth || 1
+              }px ${cell.borders.bottom.borderType || "solid"} ${
+                cell.borders.bottom.borderColor || "#000"
+              }`
+            }
+            if (cell.borders.left) {
+              td.style.borderLeft = `${cell.borders.left.borderWidth || 1}px ${
+                cell.borders.left.borderType || "solid"
+              } ${cell.borders.left.borderColor || "#000"}`
+            }
+            if (cell.borders.right) {
+              td.style.borderRight = `${
+                cell.borders.right.borderWidth || 1
+              }px ${cell.borders.right.borderType || "solid"} ${
+                cell.borders.right.borderColor || "#000"
+              }`
+            }
+          }
+        }
+        td.style.width = element.colWidths[colIndex] + "px"
+        // 设置单元格合并
+        if (cell.colSpan && cell.colSpan > 1) {
+          td.colSpan = cell.colSpan
+          td.style.width = element.colWidths[colIndex] * cell.colSpan + "px"
+        }
+        if (cell.rowSpan && cell.rowSpan > 1) {
+          td.rowSpan = cell.rowSpan
+        }
+
+        tr.appendChild(td)
+      })
+      tr.style.height = element.rowHeights[rowIndex] + "px"
+      tbody.appendChild(tr)
+    })
+  }
+
+  table.appendChild(tbody)
+  el.appendChild(table)
+
+  return el
+}
+
+const createChartElement = (element) => {
+  // 实现图表元素创建逻辑
+  return document.createElement("div") // 临时返回空div
+}
+
+// 创建图表元素
+const createDiagramElement = (element) => {
+  const el = document.createElement("div")
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.width = element.width + "px"
+  el.style.height = element.height + "px"
+  el.style.zIndex = element.order
+
+  // 递归渲染SmartArt节点
+  const renderDiagramNode = (node) => {
+    const nodeEl = document.createElement("div")
+    nodeEl.style.position = "absolute"
+    nodeEl.style.left = node.left + "px"
+    nodeEl.style.top = node.top + "px"
+    nodeEl.style.width = node.width + "px"
+    nodeEl.style.height = node.height + "px"
+
+    // 设置边框
+    if (node.borderWidth > 0) {
+      nodeEl.style.border = `${node.borderWidth}px ${node.borderType} ${node.borderColor}`
+      if (node.borderStrokeDasharray && node.borderStrokeDasharray !== "0") {
+        nodeEl.style.borderStyle = "dashed"
+      }
+    }
+
+    // 设置背景填充
+    if (node.fill && node.fill.type === "color") {
+      nodeEl.style.backgroundColor = node.fill.value
+    }
+
+    // 设置内容
+    if (node.content) {
+      nodeEl.innerHTML = convertPtToPxInContent(node.content)
+    }
+
+    // 设置垂直对齐
+    if (node.vAlign === "mid") {
+      nodeEl.style.display = "flex"
+      nodeEl.style.alignItems = "center"
+      nodeEl.style.justifyContent = "center"
+    }
+
+    // 设置翻转
+    const transforms = []
+    if (node.isFlipV) {
+      transforms.push("scaleY(-1)")
+    }
+    if (node.isFlipH) {
+      transforms.push("scaleX(-1)")
+    }
+    if (transforms.length > 0) {
+      nodeEl.style.transform = transforms.join(" ")
+    }
+
+    return nodeEl
+  }
+
+  // 按照 order 排序元素
+  const sortedElements = [...element.elements].sort((a, b) => a.order - b.order)
+
+  // 渲染所有节点
+  sortedElements.forEach((node) => {
+    const nodeEl = renderDiagramNode(node)
+    el.appendChild(nodeEl)
+  })
+
+  return el
+}
+
+// 创建数学公式元素
+const createMathElement = (element) => {
+  const el = document.createElement("div")
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.width = element.width + "px"
+  el.style.height = element.height + "px"
+  el.style.zIndex = element.order
+
+  // 应用旋转变换
+  if (element.rotate) {
+    el.style.transform = `rotate(${element.rotate}deg)`
+    el.style.transformOrigin = "center center"
+  }
+
+  // 设置数学公式内容
+  if (element.mathXml) {
+    // 如果有MathML格式的内容
+    try {
+      // 创建MathML命名空间的元素
+      const mathEl = document.createElementNS(
+        "http://www.w3.org/1998/Math/MathML",
+        "math"
+      )
+      mathEl.innerHTML = element.mathXml
+      el.appendChild(mathEl)
+    } catch (error) {
+      console.error("创建MathML元素失败:", error)
+      // 回退方案：直接显示文本
+      el.textContent = element.text || "数学公式"
+    }
+  } else if (element.text) {
+    // 如果只有文本内容
+    el.textContent = element.text
+  }
+
+  // 应用样式
+  if (element.style) {
+    // 字体样式
+    if (element.style.fontFamily) {
+      el.style.fontFamily = element.style.fontFamily
+    }
+
+    // 字体大小
+    if (element.style.fontSize) {
+      el.style.fontSize = element.style.fontSize + "px"
+    }
+
+    // 字体颜色
+    if (element.style.color) {
+      el.style.color = element.style.color
+    }
+  }
+
+  // 应用背景色
+  if (element.fill && element.fill.type === "color") {
+    el.style.backgroundColor = element.fill.value
+  }
+
+  // 应用边框
+  if (element.borderColor && element.borderWidth) {
+    el.style.border = `${element.borderWidth}px ${
+      element.borderType || "solid"
+    } ${element.borderColor}`
+  }
+
+  return el
+}
+
+// 创建文本元素
+const createTextElement = (element) => {
+  const el = document.createElement("div")
+  el.style.position = "absolute"
+  el.style.top = element.top + "px"
+  el.style.left = element.left + "px"
+  el.style.width = element.width + "px"
+  el.style.height = element.height + "px"
+  el.style.zIndex = element.order
+  el.style.overflow = "hidden"
+
+  // 应用旋转变换
+  if (element.rotate) {
+    el.style.transform = `rotate(${element.rotate}deg)`
+    el.style.transformOrigin = "center center"
+  }
+
+  // 应用文本内容
+  if (element.text) {
+    el.innerHTML = element.text
+  }
+
+  // 应用文本样式
+  if (element.style) {
+    // 字体样式
+    if (element.style.fontFamily) {
+      el.style.fontFamily = element.style.fontFamily
+    }
+
+    // 字体大小
+    if (element.style.fontSize) {
+      el.style.fontSize = element.style.fontSize + "px"
+    }
+
+    // 字体颜色
+    if (element.style.color) {
+      el.style.color = element.style.color
+    }
+
+    // 字体粗细
+    if (element.style.fontWeight) {
+      el.style.fontWeight = element.style.fontWeight
+    }
+
+    // 字体样式（斜体等）
+    if (element.style.fontStyle) {
+      el.style.fontStyle = element.style.fontStyle
+    }
+
+    // 文本装饰（下划线等）
+    if (element.style.textDecoration) {
+      el.style.textDecoration = element.style.textDecoration
+    }
+
+    // 文本对齐
+    if (element.style.textAlign) {
+      el.style.textAlign = element.style.textAlign
+    }
+
+    // 行高
+    if (element.style.lineHeight) {
+      el.style.lineHeight = element.style.lineHeight
+    }
+
+    // 字间距
+    if (element.style.letterSpacing) {
+      el.style.letterSpacing = element.style.letterSpacing + "px"
+    }
+
+    // 文本缩进
+    if (element.style.textIndent) {
+      el.style.textIndent = element.style.textIndent + "px"
+    }
+
+    // 垂直对齐
+    if (element.style.verticalAlign) {
+      el.style.verticalAlign = element.style.verticalAlign
+    }
+  }
+
+  // 应用背景色
+  if (element.fill && element.fill.type === "color") {
+    el.style.backgroundColor = element.fill.value
+  }
+
+  // 应用边框
+  if (element.borderColor && element.borderWidth) {
+    el.style.border = `${element.borderWidth}px ${
+      element.borderType || "solid"
+    } ${element.borderColor}`
+  }
+
+  // 应用内边距
+  if (element.padding) {
+    el.style.padding = element.padding + "px"
+  }
+
+  return el
+}
+
+// 递归调整元素位置
+const adjustElementPosition = (element, parentElement) => {
+  // 创建深拷贝，但保留特殊属性的引用
+  const adjustedElement = JSON.parse(JSON.stringify(element))
+
+  // 调整位置为相对于父组合元素的位置
+  adjustedElement.top = element.top - parentElement.top
+  adjustedElement.left = element.left - parentElement.left
+
+  // 恢复特殊属性的引用
+  const specialProps = [
+    "src",
+    "blob",
+    "fill",
+    "text",
+    "path",
+    "elements",
+    "borderColor",
+    "borderWidth",
+    "borderType",
+  ]
+  specialProps.forEach((prop) => {
+    if (element[prop] !== undefined) {
+      adjustedElement[prop] = element[prop]
+    }
+  })
+
+  // 如果是组合元素，递归处理其子元素
+  if (element.type === "group" && element.elements) {
+    adjustedElement.elements = element.elements.map((childElement) =>
+      adjustElementPosition(childElement, {
+        top: element.top,
+        left: element.left,
+      })
+    )
+  }
+
+  return adjustedElement
+}
+
+// 绘制类别标签
+const drawCategoryLabels = (svg, categories, padding, groupWidth, barDir) => {
+  if (!categories || !categories.length) return
+
+  // 创建标签组
+  const labelGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")
+  labelGroup.setAttribute("class", "category-labels")
+
+  // 计算标签位置
+  const isVertical = barDir === "vertical"
+  const labelSpacing = groupWidth
+
+  // 绘制每个类别标签
+  categories.forEach((category, index) => {
+    const label = document.createElementNS("http://www.w3.org/2000/svg", "text")
+
+    // 设置标签文本
+    label.textContent = category
+
+    // 设置标签样式
+    label.setAttribute("font-size", "12")
+    label.setAttribute("text-anchor", isVertical ? "middle" : "start")
+
+    // 设置标签位置
+    if (isVertical) {
+      // 垂直条形图，标签在底部
+      label.setAttribute("x", padding + index * labelSpacing + labelSpacing / 2)
+      label.setAttribute("y", svg.getAttribute("height") - padding / 3)
+      label.setAttribute("dominant-baseline", "hanging")
+    } else {
+      // 水平条形图，标签在左侧
+      label.setAttribute("x", padding / 2)
+      label.setAttribute("y", padding + index * labelSpacing + labelSpacing / 2)
+      label.setAttribute("dominant-baseline", "middle")
+      label.setAttribute("text-anchor", "end")
+    }
+
+    // 添加标签到组
+    labelGroup.appendChild(label)
+  })
+
+  // 将标签组添加到SVG
+  svg.appendChild(labelGroup)
+
+  return labelGroup
+}
+
+// 绘制网格线
+const drawGrid = (svg, padding, width, height, maxValue) => {
+  // 创建网格组
+  const gridGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")
+  gridGroup.setAttribute("class", "chart-grid")
+
+  // 设置网格线样式
+  const gridColor = "#e0e0e0"
+  const gridWidth = 1
+
+  // 计算网格间距
+  const gridCount = 5 // 网格线数量
+  const gridStep = (height - padding * 2) / gridCount
+
+  // 绘制水平网格线
+  for (let i = 0; i <= gridCount; i++) {
+    const y = padding + i * gridStep
+    const line = document.createElementNS("http://www.w3.org/2000/svg", "line")
+
+    line.setAttribute("x1", padding)
+    line.setAttribute("y1", y)
+    line.setAttribute("x2", width - padding)
+    line.setAttribute("y2", y)
+    line.setAttribute("stroke", gridColor)
+    line.setAttribute("stroke-width", gridWidth)
+
+    // 如果是底线，加粗显示
+    if (i === gridCount) {
+      line.setAttribute("stroke-width", gridWidth * 2)
+      line.setAttribute("stroke", "#aaa")
+    }
+
+    gridGroup.appendChild(line)
+
+    // 添加刻度值（除了底线）
+    if (i < gridCount) {
+      const valueText = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "text"
+      )
+      const value = Math.round((gridCount - i) * (maxValue / gridCount))
+
+      valueText.textContent = value
+      valueText.setAttribute("x", padding - 5)
+      valueText.setAttribute("y", y)
+      valueText.setAttribute("text-anchor", "end")
+      valueText.setAttribute("dominant-baseline", "middle")
+      valueText.setAttribute("font-size", "10")
+      valueText.setAttribute("fill", "#666")
+
+      gridGroup.appendChild(valueText)
+    }
+  }
+
+  // 添加网格组到SVG
+  svg.appendChild(gridGroup)
+
+  return gridGroup
+}
+
+// 绘制图表图例
+const drawLegend = (svg, series, colors, padding) => {
+  // 创建图例容器
+  const legendGroup = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "g"
+  )
+  legendGroup.setAttribute("class", "chart-legend")
+
+  // 设置图例位置
+  const legendX = padding
+  const legendY = padding
+  let currentY = legendY
+
+  // 为每个系列创建图例项
+  series.forEach((item, index) => {
+    const itemGroup = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "g"
+    )
+    itemGroup.setAttribute("transform", `translate(${legendX}, ${currentY})`)
+
+    // 创建图例颜色标记
+    const colorMark = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "rect"
+    )
+    colorMark.setAttribute("width", "12")
+    colorMark.setAttribute("height", "12")
+    colorMark.setAttribute("fill", colors[index % colors.length])
+
+    // 创建图例文本
+    const text = document.createElementNS("http://www.w3.org/2000/svg", "text")
+    text.setAttribute("x", "20")
+    text.setAttribute("y", "10")
+    text.setAttribute("font-size", "12")
+    text.setAttribute("alignment-baseline", "middle")
+    text.textContent = item.name || `系列 ${index + 1}`
+
+    // 将元素添加到组中
+    itemGroup.appendChild(colorMark)
+    itemGroup.appendChild(text)
+    legendGroup.appendChild(itemGroup)
+
+    // 更新下一个图例项的Y坐标
+    currentY += 20
+  })
+
+  // 将图例组添加到SVG中
+  svg.appendChild(legendGroup)
+
+  return legendGroup
+}
+
+// 调整颜色亮度
+const adjustBrightness = (color, factor) => {
+  // 如果颜色为空或不是字符串，返回原值
+  if (!color || typeof color !== "string") return color
+
+  // 处理十六进制颜色
+  if (color.startsWith("#")) {
+    let hex = color.substring(1)
+
+    // 处理简写形式 (#RGB)
+    if (hex.length === 3) {
+      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
+    }
+
+    // 解析RGB值
+    const r = parseInt(hex.substring(0, 2), 16)
+    const g = parseInt(hex.substring(2, 4), 16)
+    const b = parseInt(hex.substring(4, 6), 16)
+
+    // 调整亮度
+    const adjustedR = Math.min(255, Math.max(0, Math.round(r * factor)))
+    const adjustedG = Math.min(255, Math.max(0, Math.round(g * factor)))
+    const adjustedB = Math.min(255, Math.max(0, Math.round(b * factor)))
+
+    // 转换回十六进制
+    return `#${adjustedR.toString(16).padStart(2, "0")}${adjustedG
+      .toString(16)
+      .padStart(2, "0")}${adjustedB.toString(16).padStart(2, "0")}`
+  }
+
+  // 处理rgb/rgba颜色
+  if (color.startsWith("rgb")) {
+    const rgbMatch = color.match(
+      /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
+    )
+    if (rgbMatch) {
+      const r = parseInt(rgbMatch[1])
+      const g = parseInt(rgbMatch[2])
+      const b = parseInt(rgbMatch[3])
+      const a = rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : 1
+
+      // 调整亮度
+      const adjustedR = Math.min(255, Math.max(0, Math.round(r * factor)))
+      const adjustedG = Math.min(255, Math.max(0, Math.round(g * factor)))
+      const adjustedB = Math.min(255, Math.max(0, Math.round(b * factor)))
+
+      // 返回调整后的颜色
+      return a < 1
+        ? `rgba(${adjustedR}, ${adjustedG}, ${adjustedB}, ${a})`
+        : `rgb(${adjustedR}, ${adjustedG}, ${adjustedB})`
+    }
+  }
+
+  // 如果不是支持的颜色格式，返回原值
+  return color
+}
+
+const convertPtToPxInContent = (content) => {
+  if (!content) return ""
+
+  // 使用正则表达式查找所有包含pt单位的样式
+  const ptRegex = /(\d+(\.\d+)?)pt/g
+
+  // 将pt转换为px (1pt ≈ 1.33px)
+  return content.replace(ptRegex, (match, value) => {
+    const pxValue = Math.round(parseFloat(value) * 1.33 * 100) / 100
+    return `${pxValue}px`
+  })
+}
+
+const processElements = (elements, slideIndex) => {
+  if (!elements || !Array.isArray(elements)) return
+
+  // 对元素进行排序处理
+  elements.sort((a, b) => a.order - b.order)
+
+  // 处理每个元素
+  elements.forEach((element) => {
+    // 设置元素的幻灯片索引
+    element.slideIndex = slideIndex
+
+    // 处理元素中的子元素
+    if (element.elements && Array.isArray(element.elements)) {
+      processElements(element.elements, slideIndex)
+    }
+
+    // 处理特殊类型元素
+    if (element.type === "group" && element.elements) {
+      // 处理组元素
+      element.elements.forEach((childElement) => {
+        // 调整子元素位置为相对于组的位置
+        childElement.top = (childElement.top || 0) + (element.top || 0)
+        childElement.left = (childElement.left || 0) + (element.left || 0)
+      })
+    }
+
+    // 处理图表元素
+    if (element.type === "chart" && element.data) {
+      // 确保图表数据格式正确
+      if (!element.data.series) {
+        element.data.series = []
+      }
+
+      // 处理图表系列数据
+      element.data.series.forEach((series) => {
+        if (!series.values) {
+          series.values = []
+        }
+      })
+    }
+  })
+
+  return elements
+}
+
+// 监听 pptxJson 变化
+watch(
+  () => props.pptxJson,
+  (newVal) => {
+    if (newVal) {
+      renderSlides()
+    }
+  },
+  { deep: true }
+)
+
+// 组件挂载时渲染幻灯片
+onMounted(() => {
+  renderSlides()
+})
+</script>
+
+<style scoped>
+.pptx-container {
+  width: 100%;
+  overflow-x: auto;
+  padding: 20px 0;
+}
+</style>

src/components/view_file/vendors/pptx/PPT3.vue

@@ -0,0 +1,5051 @@
+<!--
+ * @Author: LiZhiWei
+ * @Date: 2025-04-10 14:38:27
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-23 17:48:31
+ * @Description:
+-->
+<template>
+  <div id="pptx-container" ref="pptxContainer" class="pptx-container"></div>
+</template>
+<script>
+export default {
+  name: "PPT",
+  props: {
+    pptxJson: Object,
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    this.renderSlides()
+  },
+  computed: {},
+  watch: {
+    pptxJson: {
+      handler() {
+        this.renderSlides()
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    renderSlides() {
+      if (!this.$refs.pptxContainer || !this.pptxJson) return
+
+      this.$refs.pptxContainer.innerHTML = ""
+      const { size, slides } = this.pptxJson
+
+      slides.forEach((slide, index) => {
+        const slideElement = this.createSlideElement(size.width, size.height)
+        this.applySlideBackground(slideElement, slide.fill)
+        if (slide.layoutElements && Array.isArray(slide.layoutElements)) {
+          this.processElements(slide.layoutElements, index + 1)
+          slide.layoutElements.forEach((element) => {
+            const el = this.createElementByType(element)
+            if (!el) return
+            slideElement.appendChild(el)
+          })
+        }
+
+        // 渲染幻灯片元素
+        if (slide.elements && Array.isArray(slide.elements)) {
+          this.processElements(slide.elements, index + 1)
+          slide.elements.forEach((element) => {
+            const el = this.createElementByType(element)
+            if (!el) return
+            slideElement.appendChild(el)
+          })
+        }
+
+        // 添加幻灯片到容器
+        this.$refs.pptxContainer.appendChild(slideElement)
+      })
+      // 为所有p标签应用样式
+      const pTags = this.$refs.pptxContainer.querySelectorAll("p")
+      pTags.forEach((p) => {
+        p.style.margin = "0px"
+        p.style.padding = "0px"
+        p.style.wordBreak = "break-word"
+        p.style.lineHeight = "1"
+      })
+      const ulTags = this.$refs.pptxContainer.querySelectorAll("ul")
+      ulTags.forEach((ul) => {
+        ul.style.wordBreak = "break-word"
+        ul.style.lineHeight = "1"
+        ul.style.padding = "auto 0px"
+        ul.style.margin = "0px"
+      })
+      const olTags = this.$refs.pptxContainer.querySelectorAll("ol")
+      olTags.forEach((ol) => {
+        ol.style.margin = "0px"
+        ol.style.padding = "auto 0px"
+        ol.style.wordBreak = "break-word"
+        ol.style.lineHeight = "1"
+      })
+    },
+    // 创建幻灯片元素
+    createSlideElement(width, height) {
+      const slideElement = document.createElement("div")
+      slideElement.className = "slide"
+      slideElement.style.position = "relative"
+      slideElement.style.width = width + "px"
+      slideElement.style.height = height + "px"
+      slideElement.style.border = "1px solid #ccc"
+      slideElement.style.margin = "0px auto"
+      slideElement.style.marginBottom = "20px"
+      slideElement.style.overflow = "hidden"
+      return slideElement
+    },
+
+    // 应用幻灯片背景
+    applySlideBackground(slideElement, fill) {
+      if (!fill) return
+
+      if (fill.type === "gradient") {
+        const { colors, path, rot } = fill.value
+
+        if (colors && colors.length >= 2) {
+          const gradientType = path === "rect" ? "linear" : "radial"
+          const gradientAngle =
+            gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
+
+          let gradientString = `${gradientType}-gradient(`
+          if (gradientType === "linear") {
+            gradientString += `${gradientAngle}deg, `
+          }
+
+          colors.forEach((color, i) => {
+            gradientString += `${color.color} ${color.pos}${
+              i < colors.length - 1 ? ", " : ""
+            }`
+          })
+
+          gradientString += ")"
+          slideElement.style.background = gradientString
+        }
+      } else if (fill.type === "color") {
+        slideElement.style.backgroundColor = fill.value || "#FFFFFF"
+      } else if (fill.type === "image" && fill.value.picBase64) {
+        // 设置背景图片
+        slideElement.style.backgroundImage = `url(${fill.value.picBase64})`
+        slideElement.style.backgroundSize = "cover"
+        slideElement.style.backgroundPosition = "center"
+        slideElement.style.backgroundRepeat = "no-repeat"
+
+        // 如果有背景图片的混合模式
+        if (fill.value.blendMode) {
+          slideElement.style.backgroundBlendMode = fill.value.blendMode
+        }
+
+        // 如果有透明度设置
+        if (fill.value.opacity !== undefined) {
+          slideElement.style.opacity = fill.value.opacity
+        }
+      }
+    },
+
+    // 根据元素类型创建DOM元素
+    createElementByType(element) {
+      switch (element.type) {
+        case "image":
+          return this.createImageElement(element)
+        case "video":
+          return this.createVideoElement(element)
+        case "audio":
+          return this.createAudioElement(element)
+        case "shape":
+          return this.createShapeElement(element)
+        case "table":
+          return this.createTableElement(element)
+        case "chart":
+          return this.createChartElement(element)
+        case "diagram":
+          return this.createDiagramElement(element)
+        case "math":
+          return this.createMathElement(element)
+        case "group":
+          return this.createGroupElement(element)
+        default:
+          return this.createTextElement(element)
+      }
+    },
+    createGroupElement(element) {
+      // 创建组合容器
+      const groupContainer = document.createElement("div")
+      groupContainer.className = "group-element"
+      groupContainer.style.position = "absolute"
+      groupContainer.style.top = element.top + "px"
+      groupContainer.style.left = element.left + "px"
+      groupContainer.style.width = element.width + "px"
+      groupContainer.style.height = element.height + "px"
+      groupContainer.style.zIndex = element.order
+      groupContainer.style.transformOrigin = "center center"
+
+      // 创建内部容器来处理子元素
+      const innerContainer = document.createElement("div")
+      innerContainer.style.position = "relative"
+      innerContainer.style.width = "100%"
+      innerContainer.style.height = "100%"
+
+      // 应用旋转变换
+      if (element.rotate) {
+        groupContainer.style.transform = `rotate(${element.rotate}deg)`
+      }
+
+      // 应用其他样式属性
+      if (element.opacity !== undefined) {
+        groupContainer.style.opacity = element.opacity
+      }
+
+      // 递归渲染组内的所有子元素
+      if (element.elements && Array.isArray(element.elements)) {
+        element.elements.forEach((childElement) => {
+          const childCopy = JSON.parse(JSON.stringify(childElement))
+          const childEl = this.createElementByType(childCopy)
+          if (childEl) {
+            innerContainer.appendChild(childEl)
+          }
+        })
+      }
+
+      groupContainer.appendChild(innerContainer)
+      return groupContainer
+    },
+    // 递归调整元素位置
+    adjustElementPosition(element, parentElement) {
+      // 创建深拷贝，但保留特殊属性的引用
+      const adjustedElement = JSON.parse(JSON.stringify(element))
+
+      // 调整位置为相对于父组合元素的位置
+      adjustedElement.top = element.top - parentElement.top
+      adjustedElement.left = element.left - parentElement.left
+
+      // 恢复特殊属性的引用
+      const specialProps = [
+        "src",
+        "blob",
+        "fill",
+        "text",
+        "path",
+        "elements",
+        "borderColor",
+        "borderWidth",
+        "borderType",
+      ]
+      specialProps.forEach((prop) => {
+        if (element[prop] !== undefined) {
+          adjustedElement[prop] = element[prop]
+        }
+      })
+
+      // 如果是组合元素，递归处理其子元素
+      if (element.type === "group" && element.elements) {
+        adjustedElement.elements = element.elements.map((childElement) =>
+          this.adjustElementPosition(childElement, {
+            top: element.top,
+            left: element.left,
+          })
+        )
+      }
+
+      return adjustedElement
+    },
+    // 创建图像元素
+    createImageElement(element) {
+      const img = document.createElement("img")
+      img.src = element.src
+      img.style.width = element.width + "px"
+      img.style.height = element.height + "px"
+      img.style.objectFit = "cover" // 保持图像的宽高比并填充容器
+      img.style.position = "absolute"
+      img.style.top = `${element.top}px`
+      img.style.left = `${element.left}px`
+      img.style.zIndex = element.order
+
+      return img
+    },
+
+    // 创建视频元素
+    createVideoElement(element) {
+      const el = document.createElement("video")
+      el.src = element.blob
+      el.controls = true
+      el.style.width = element.width + "px"
+      el.style.height = element.height + "px"
+      el.style.position = "absolute"
+      el.style.top = element.top + "px"
+      el.style.left = element.left + "px"
+      el.style.zIndex = element.order
+      return el
+    },
+
+    // 创建音频元素
+    createAudioElement(element) {
+      const el = document.createElement("audio")
+      el.src = element.blob
+      el.controls = true
+      el.style.height = element.height + "px"
+      el.style.position = "absolute"
+      el.style.top = element.top + "px"
+      el.style.left = element.left + "px"
+      el.style.zIndex = element.order
+      return el
+    },
+
+    // 创建形状元素
+    createShapeElement(element) {
+      const el = document.createElement("div")
+      el.style.position = "absolute"
+      el.style.top = element.top + "px"
+      el.style.left = element.left + "px"
+      el.style.width = element.width + "px"
+      el.style.height = element.height + "px"
+      el.style.zIndex = element.order
+      el.style.overflow = "visible"
+      if (element.height === 0) {
+        // 如果高度为0，直接在div上绘制边框
+        el.style.borderTop = `${element.borderWidth || 1}px ${
+          element.borderType || "solid"
+        } ${element.borderColor || "#000"}`
+      }
+      // 使用SVG绘制形状
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+      svg.setAttribute("width", "100%")
+      svg.setAttribute("height", "100%")
+      svg.setAttribute("viewBox", `0 0 ${element.width} ${element.height}`)
+      svg.style.overflow = "visible"
+      const setBackground = (element, shape) => {
+        if (element.fill && element.fill.type) {
+          // 设置填充色
+          if (element.fill.type === "color") {
+            shape.setAttribute("fill", element.fill.value || "transparent")
+          } else if (element.fill.type === "gradient") {
+            // 渐变填充
+            const { colors, path, rot } = element.fill.value
+
+            if (colors && colors.length >= 2) {
+              const gradientType = path === "rect" ? "linear" : "radial"
+              const gradientAngle =
+                gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
+
+              let gradientString = `${gradientType}-gradient(`
+              if (gradientType === "linear") {
+                gradientString += `${gradientAngle}deg, `
+              }
+
+              colors.forEach((color, i) => {
+                gradientString += `${color.color} ${color.pos}${
+                  i < colors.length - 1 ? ", " : ""
+                }`
+              })
+              gradientString += ")"
+
+              // 创建渐变定义
+              const gradientDef = document.createElementNS(
+                "http://www.w3.org/2000/svg",
+                "defs"
+              )
+              const gradientEl = document.createElementNS(
+                "http://www.w3.org/2000/svg",
+                gradientType === "linear" ? "linearGradient" : "radialGradient"
+              )
+              const gradientId = `gradient-${Date.now()}-${Math.random()
+                .toString(36)
+                .substr(2, 9)}`
+              gradientEl.setAttribute("id", gradientId)
+
+              // 设置渐变属性
+              if (gradientType === "linear") {
+                gradientEl.setAttribute(
+                  "gradientTransform",
+                  `rotate(${gradientAngle})`
+                )
+              }
+
+              // 添加渐变色标
+              colors.forEach((color) => {
+                const stop = document.createElementNS(
+                  "http://www.w3.org/2000/svg",
+                  "stop"
+                )
+                stop.setAttribute("offset", color.pos)
+                stop.setAttribute("stop-color", color.color)
+                gradientEl.appendChild(stop)
+              })
+
+              gradientDef.appendChild(gradientEl)
+              svg.appendChild(gradientDef)
+
+              // 应用渐变
+              shape.setAttribute("fill", `url(#${gradientId})`)
+            }
+          } else if (element.fill.type === "image") {
+            // 创建图案填充
+            const pattern = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "pattern"
+            )
+            const patternId = `pattern-${Date.now()}-${Math.random()
+              .toString(36)
+              .substr(2, 9)}`
+            pattern.setAttribute("id", patternId)
+            pattern.setAttribute("patternUnits", "userSpaceOnUse")
+            pattern.setAttribute("width", "100%")
+            pattern.setAttribute("height", "100%")
+
+            // 创建图片元素
+            const image = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "image"
+            )
+            image.setAttribute("width", "100%")
+            image.setAttribute("height", "100%")
+            image.setAttribute("preserveAspectRatio", "xMidYMid slice")
+            image.setAttributeNS(
+              "http://www.w3.org/1999/xlink",
+              "href",
+              element.fill.value.picBase64
+            )
+
+            pattern.appendChild(image)
+
+            // 添加pattern到defs
+            const defs = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "defs"
+            )
+            defs.appendChild(pattern)
+            svg.appendChild(defs)
+
+            // 应用图案填充
+            shape.setAttribute("fill", `url(#${patternId})`)
+          } else {
+            shape.setAttribute("fill", "transparent")
+          }
+        } else {
+          shape.setAttribute("fill", "#ffffff00")
+        }
+      }
+      // 根据形状类型创建不同的SVG元素
+      switch (element.shapType) {
+        case "roundRect":
+          const radius = Math.min(element.width, element.height) * 0.1
+          const roundRect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "rect"
+          )
+          roundRect.setAttribute("x", 0)
+          roundRect.setAttribute("y", 0)
+          roundRect.setAttribute("width", element.width)
+          roundRect.setAttribute("height", element.height)
+          roundRect.setAttribute("rx", radius)
+          roundRect.setAttribute("ry", radius)
+
+          // 设置填充色
+          setBackground(element, roundRect)
+          // 设置边框
+          if (element.borderWidth > 0) {
+            roundRect.setAttribute("stroke", element.borderColor || "#000")
+            roundRect.setAttribute("stroke-width", element.borderWidth || 1)
+            roundRect.setAttribute("stroke-linejoin", "round") // 设置连接处为圆角
+            roundRect.setAttribute("vector-effect", "non-scaling-stroke") // 防止边框宽度变形
+            roundRect.setAttribute("shape-rendering", "geometricPrecision") // 提高渲染精度
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                roundRect.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                roundRect.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                roundRect.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(roundRect)
+          break
+        case "snip1Rect":
+          // 使用path元素绘制剪去单角的矩形
+          const snip1Rect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 计算剪角的大小，通常为矩形较短边的20%
+          const snipSize = Math.min(element.width, element.height) * 0.35
+
+          // 绘制路径：从左上角开始，顺时针方向，右上角被剪去
+          snip1Rect.setAttribute(
+            "d",
+            `M0,0 ` +
+              `L${element.width - snipSize},0 ` +
+              `L${element.width},${snipSize} ` +
+              `L${element.width},${element.height} ` +
+              `L0,${element.height} ` +
+              `Z`
+          )
+
+          // 设置填充色
+          setBackground(element, snip1Rect)
+          // 设置边框
+          if (element.borderWidth > 0) {
+            snip1Rect.setAttribute("stroke", element.borderColor || "#000")
+            snip1Rect.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                snip1Rect.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                snip1Rect.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                snip1Rect.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+          svg.appendChild(snip1Rect)
+          break
+        case "snip2SameRect":
+          // 使用path元素绘制剪去四个角的矩形
+          const snip2SameRect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 计算剪角的大小，通常为矩形较短边的20%
+          const snip2Size = Math.min(element.width, element.height) * 0.35
+
+          // 绘制路径：从左上角开始，顺时针方向，剪去四个角
+          snip2SameRect.setAttribute(
+            "d",
+            `M${snip2Size},0 ` +
+              `L${element.width - snip2Size},0 ` +
+              `L${element.width},${snip2Size} ` +
+              `L${element.width},${element.height - snip2Size} ` +
+              `L${element.width - snip2Size},${element.height} ` +
+              `L${snip2Size},${element.height} ` +
+              `L0,${element.height - snip2Size} ` +
+              `L0,${snip2Size} ` +
+              `Z`
+          )
+
+          // 设置填充色
+          setBackground(element, snip2SameRect)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            snip2SameRect.setAttribute("stroke", element.borderColor || "#000")
+            snip2SameRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                snip2SameRect.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                snip2SameRect.setAttribute("stroke-dasharray", "2, 2")
+                snip2SameRect.setAttribute("stroke-linecap", "round")
+              } else if (element.borderType === "dashed") {
+                snip2SameRect.setAttribute("stroke-dasharray", "6, 3")
+              }
+            }
+
+            // 添加这些属性以确保边框正确渲染
+            snip2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
+            snip2SameRect.setAttribute("shape-rendering", "geometricPrecision")
+          }
+
+          svg.appendChild(snip2SameRect)
+          break
+        case "line":
+          // 创建直线连接符
+          const line = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "line"
+          )
+          // 设置SVG的最小高度为1px
+          const svgHeight = element.height > 0 ? element.height : 1
+          svg.setAttribute("height", svgHeight + "px")
+
+          // 设置线条的起点和终点
+          line.setAttribute("x1", 0)
+          line.setAttribute("y1", 0)
+          line.setAttribute("x2", element.width)
+          line.setAttribute("y2", svgHeight)
+
+          // 确保边框颜色和宽度被正确设置
+          line.setAttribute("stroke", element.borderColor || "#000")
+          line.setAttribute("stroke-width", element.borderWidth || 1)
+
+          // 处理虚线样式
+          if (
+            element.borderType === "dotted" ||
+            element.borderType === "dashed"
+          ) {
+            if (element.borderStrokeDasharray) {
+              line.setAttribute(
+                "stroke-dasharray",
+                element.borderStrokeDasharray
+              )
+            } else if (element.borderType === "dotted") {
+              line.setAttribute("stroke-dasharray", "2, 2")
+              line.setAttribute("stroke-linecap", "round") // 添加圆角端点使点线更明显
+            } else if (element.borderType === "dashed") {
+              line.setAttribute("stroke-dasharray", "6, 3")
+            }
+          }
+
+          // 确保线条正确渲染
+          line.setAttribute("vector-effect", "non-scaling-stroke") // 防止缩放影响线条宽度
+          svg.appendChild(line)
+          break
+        case "snip2DiagRect":
+          // 使用path元素绘制剪去右上角和左下角的矩形
+          const snip2DiagRect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 计算剪角的大小，通常为矩形较短边的35%
+          const snipDiagSize = Math.min(element.width, element.height) * 0.35
+
+          // 绘制路径：从左上角开始，顺时针方向，右上角和左下角被剪去
+          snip2DiagRect.setAttribute(
+            "d",
+            `M0,0 ` +
+              `L${element.width - snipDiagSize},0 ` +
+              `L${element.width},${snipDiagSize} ` +
+              `L${element.width},${element.height} ` +
+              `L${snipDiagSize},${element.height} ` +
+              `L0,${element.height - snipDiagSize} ` +
+              `Z`
+          )
+
+          // 设置填充色
+          setBackground(element, snip2DiagRect)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            snip2DiagRect.setAttribute("stroke", element.borderColor || "#000")
+            snip2DiagRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                snip2DiagRect.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                snip2DiagRect.setAttribute("stroke-dasharray", "2, 2")
+                snip2DiagRect.setAttribute("stroke-linecap", "round")
+              } else if (element.borderType === "dashed") {
+                snip2DiagRect.setAttribute("stroke-dasharray", "6, 3")
+              }
+            }
+
+            // 添加这些属性以确保边框正确渲染
+            snip2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
+            snip2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
+          }
+
+          svg.appendChild(snip2DiagRect)
+          break
+        case "snipRoundRect":
+          const snipRoundRect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          // 计算剪切大小和圆角大小
+          const snipSize2 = Math.min(element.width, element.height) * 0.4
+          const roundSize = Math.min(element.width, element.height) * 0.5
+
+          // 绘制路径：从左上角开始，顺时针方向，左上为圆角，右上为剪切角
+          snipRoundRect.setAttribute(
+            "d",
+            `M${roundSize},0 ` +
+              `L${element.width - snipSize2},0 ` +
+              `L${element.width},${snipSize2} ` +
+              `L${element.width},${element.height} ` +
+              `L0,${element.height} ` +
+              `L0,${roundSize} ` +
+              `A${roundSize},${roundSize} 0 0,1 ${roundSize},0 ` +
+              `Z`
+          )
+
+          // 设置填充色
+          setBackground(element, snipRoundRect)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            snipRoundRect.setAttribute("stroke", element.borderColor || "#000")
+            snipRoundRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                snipRoundRect.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                snipRoundRect.setAttribute("stroke-dasharray", "2, 2")
+                snipRoundRect.setAttribute("stroke-linecap", "round")
+              } else if (element.borderType === "dashed") {
+                snipRoundRect.setAttribute("stroke-dasharray", "6, 3")
+              }
+            }
+
+            snipRoundRect.setAttribute("vector-effect", "non-scaling-stroke")
+            snipRoundRect.setAttribute("shape-rendering", "geometricPrecision")
+          }
+
+          svg.appendChild(snipRoundRect)
+          break
+        case "round1Rect":
+          const round1Rect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          // 计算圆角大小
+          const round1Size = Math.min(element.width, element.height) * 0.5
+
+          // 绘制路径：从左上角开始，顺时针方向，右上角为圆角
+          round1Rect.setAttribute(
+            "d",
+            `M0,0 ` +
+              `L${element.width - round1Size},0 ` +
+              `Q${element.width},0 ${element.width},${round1Size} ` +
+              `L${element.width},${element.height} ` +
+              `L0,${element.height} ` +
+              `Z`
+          )
+
+          // 设置填充色
+          setBackground(element, round1Rect)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            round1Rect.setAttribute("stroke", element.borderColor || "#000")
+            round1Rect.setAttribute("stroke-width", element.borderWidth || 1)
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                round1Rect.setAttribute("stroke-dasharray", "40,15,5,15")
+              } else if (element.borderType === "dotted") {
+                round1Rect.setAttribute("stroke-dasharray", "2, 2")
+                round1Rect.setAttribute("stroke-linecap", "round")
+              } else if (element.borderType === "dashed") {
+                round1Rect.setAttribute("stroke-dasharray", "6, 3")
+              }
+            }
+
+            round1Rect.setAttribute("vector-effect", "non-scaling-stroke")
+            round1Rect.setAttribute("shape-rendering", "geometricPrecision")
+          }
+
+          svg.appendChild(round1Rect)
+          break
+        case "ellipse":
+        case "circle":
+          const ellipse = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "ellipse"
+          )
+          ellipse.setAttribute("cx", element.width / 2)
+          ellipse.setAttribute("cy", element.height / 2)
+          ellipse.setAttribute("rx", element.width / 2)
+          ellipse.setAttribute("ry", element.height / 2)
+
+          // 设置填充色
+          setBackground(element, ellipse)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            ellipse.setAttribute("stroke", element.borderColor || "#000")
+            ellipse.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                ellipse.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                ellipse.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                ellipse.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(ellipse)
+          break
+        case "round2SameRect":
+          const round2SameRect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          // 计算圆角大小
+          const round2Size = Math.min(element.width, element.height) * 0.5
+
+          // 绘制路径：从左上角开始，顺时针方向，左上和右上为圆角
+          round2SameRect.setAttribute(
+            "d",
+            `M${round2Size},0 ` +
+              `L${element.width - round2Size},0 ` +
+              `Q${element.width},0 ${element.width},${round2Size} ` +
+              `L${element.width},${element.height} ` +
+              `L0,${element.height} ` +
+              `L0,${round2Size} ` +
+              `Q0,0 ${round2Size},0 ` +
+              `Z`
+          )
+
+          // 设置填充色
+          setBackground(element, round2SameRect)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            round2SameRect.setAttribute("stroke", element.borderColor || "#000")
+            round2SameRect.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                round2SameRect.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                round2SameRect.setAttribute("stroke-dasharray", "2, 2")
+                round2SameRect.setAttribute("stroke-linecap", "round")
+              } else if (element.borderType === "dashed") {
+                round2SameRect.setAttribute("stroke-dasharray", "6, 3")
+              }
+            }
+
+            round2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
+            round2SameRect.setAttribute("shape-rendering", "geometricPrecision")
+          }
+
+          svg.appendChild(round2SameRect)
+          break
+        case "round2DiagRect":
+          const round2DiagRect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          // 计算圆角大小
+          const round2DiagSize = Math.min(element.width, element.height) * 0.5
+
+          // 绘制路径：从左上角开始，顺时针方向，左上和右下为圆角
+          round2DiagRect.setAttribute(
+            "d",
+            `M${round2DiagSize},0 ` +
+              `L${element.width},0 ` +
+              `L${element.width},${element.height - round2DiagSize} ` +
+              `Q${element.width},${element.height} ${
+                element.width - round2DiagSize
+              },${element.height} ` +
+              `L0,${element.height} ` +
+              `L0,${round2DiagSize} ` +
+              `Q0,0 ${round2DiagSize},0 ` +
+              `Z`
+          )
+
+          // 设置填充色
+          setBackground(element, round2DiagRect)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            round2DiagRect.setAttribute("stroke", element.borderColor || "#000")
+            round2DiagRect.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                round2DiagRect.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                round2DiagRect.setAttribute("stroke-dasharray", "2, 2")
+                round2DiagRect.setAttribute("stroke-linecap", "round")
+              } else if (element.borderType === "dashed") {
+                round2DiagRect.setAttribute("stroke-dasharray", "6, 3")
+              }
+            }
+
+            round2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
+            round2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
+          }
+
+          svg.appendChild(round2DiagRect)
+          break
+        case "triangle":
+          const triangle = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          triangle.setAttribute(
+            "points",
+            `${element.width / 2},0 ${element.width},${element.height} 0,${
+              element.height
+            }`
+          )
+
+          // 设置填充色
+          setBackground(element, triangle)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            triangle.setAttribute("stroke", element.borderColor || "#000")
+            triangle.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                triangle.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                triangle.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                triangle.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(triangle)
+          break
+        case "arc":
+          const arc = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 计算弧形的参数
+          const arcRadius = Math.min(element.width, element.height) / 2
+
+          // 绘制弧形路径
+          arc.setAttribute(
+            "d",
+            `M${arcRadius},0 ` +
+              `A${arcRadius},${arcRadius} 0 1 1 ${arcRadius * 0.15},${
+                arcRadius * 0.5
+              }`
+          )
+
+          // 设置填充色
+          arc.setAttribute("fill", "transparent")
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            arc.setAttribute("stroke", element.borderColor || "#000")
+            arc.setAttribute("stroke-width", element.borderWidth || 0.5)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                arc.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                arc.setAttribute("stroke-dasharray", "2, 2")
+                arc.setAttribute("stroke-linecap", "round")
+              } else if (element.borderType === "dashed") {
+                arc.setAttribute("stroke-dasharray", "6, 3")
+              }
+            }
+
+            arc.setAttribute("vector-effect", "non-scaling-stroke")
+            arc.setAttribute("shape-rendering", "geometricPrecision")
+          } else {
+            arc.setAttribute("stroke", element.borderColor || "#000")
+            arc.setAttribute("stroke-width", 0.5)
+          }
+
+          svg.appendChild(arc)
+          break
+        case "custom":
+          const customPath = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 直接使用传入的 path 数据
+          customPath.setAttribute("d", element.path || "")
+
+          // 设置填充色
+          setBackground(element, customPath)
+          // 设置边框
+          if (element.borderWidth > 0) {
+            customPath.setAttribute("stroke", element.borderColor || "#000")
+            customPath.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                customPath.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                customPath.setAttribute("stroke-dasharray", "2, 2")
+                customPath.setAttribute("stroke-linecap", "round")
+              } else if (element.borderType === "dashed") {
+                customPath.setAttribute("stroke-dasharray", "6, 3")
+              }
+            }
+
+            customPath.setAttribute("vector-effect", "non-scaling-stroke")
+            customPath.setAttribute("shape-rendering", "geometricPrecision")
+          }
+
+          svg.appendChild(customPath)
+          break
+        case "teardrop":
+          const teardrop = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 计算泪珠形状的参数
+          const tdCenterX = element.width / 2
+          const tdCenterY = element.height / 2
+          const tdRadiusX = element.width / 2
+          const tdRadiusY = element.height / 2
+
+          // 使用相对比例计算控制点
+          teardrop.setAttribute(
+            "d",
+            `M${tdCenterX * 2} ${tdCenterY} ` +
+              `A ${tdRadiusX} ${tdRadiusY} 0 1 1 ${tdCenterX} 0 ` +
+              `Q${tdCenterX * 1.7},0 ${tdCenterX * 2.1},${-tdCenterY * 0.1} ` +
+              `Q${tdCenterX * 2},${tdCenterY * 0.29} ${
+                tdCenterX * 2
+              },${tdCenterY}`
+          )
+
+          // 设置填充色
+          setBackground(element, teardrop)
+
+          // 设置边框样式
+          if (element.borderWidth > 0) {
+            teardrop.setAttribute("stroke", element.borderColor || "#000")
+            teardrop.setAttribute("stroke-width", element.borderWidth || 1)
+            teardrop.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              // ... 原有的虚线边框处理代码 ...
+            }
+          }
+
+          svg.appendChild(teardrop)
+          break
+        case "decagon":
+          const decagon = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+
+          // 计算十边形的顶点
+          let decagonPoints = ""
+          for (let i = 0; i < 10; i++) {
+            const angle = (i * 2 * Math.PI) / 10 - Math.PI / 2 // 从顶部开始
+            const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
+            const y =
+              element.height / 2 + (element.height / 2) * Math.sin(angle)
+            decagonPoints += `${x},${y} `
+          }
+          decagon.setAttribute("points", decagonPoints.trim())
+
+          // 设置填充色
+          setBackground(element, decagon)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            decagon.setAttribute("stroke", element.borderColor || "#000")
+            decagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                decagon.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                decagon.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                decagon.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(decagon)
+          break
+        case "pentagon":
+          const pentagon = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          pentagon.setAttribute(
+            "points",
+            `${element.width / 2},0 ${element.width},${
+              element.height * 0.38
+            } ` +
+              `${element.width * 0.82},${element.height} ${
+                element.width * 0.18
+              },${element.height} ` +
+              `0,${element.height * 0.38}`
+          )
+
+          // 设置填充色
+          setBackground(element, pentagon)
+          // 设置边框
+          if (element.borderWidth > 0) {
+            pentagon.setAttribute("stroke", element.borderColor || "#000")
+            pentagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                pentagon.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                pentagon.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                pentagon.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(pentagon)
+          break
+        case "pie":
+          const pie = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 使用提供的路径数据，但保留元素的宽高比例
+          const centerX = element.width / 2
+          const centerY = element.height / 2
+          const radius2 = Math.min(element.width, element.height) / 2
+
+          // 绘制饼图，使用类似提供的路径数据
+          pie.setAttribute(
+            "d",
+            `M${centerX},${centerY} ` +
+              `L${centerX * 1.85},${centerY * 1.52} ` +
+              `A${radius2},${radius2} 0 1,1 ${centerX * 1.56},${
+                centerY * 0.17
+              } ` +
+              `Z`
+          )
+
+          // 设置填充色
+          setBackground(element, pie)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            pie.setAttribute("stroke", element.borderColor || "#000")
+            pie.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                pie.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                pie.setAttribute("stroke-dasharray", "2, 2")
+                pie.setAttribute("stroke-linecap", "round")
+              } else if (element.borderType === "dashed") {
+                pie.setAttribute("stroke-dasharray", "6, 3")
+              }
+            }
+
+            pie.setAttribute("vector-effect", "non-scaling-stroke")
+            pie.setAttribute("shape-rendering", "geometricPrecision")
+          }
+
+          svg.appendChild(pie)
+          break
+        case "chord":
+          const chord = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 计算弦形的参数
+          const chordRadiusX = element.width * 0.4
+          const chordRadiusY = element.height * 0.4
+          // 绘制弦形 - 使用更大的圆弧和不同的起始/结束点
+          chord.setAttribute(
+            "d",
+            `M${element.width * 0.4},${element.height * 0.9} ` +
+              `A ${chordRadiusX} ${chordRadiusY} 0 1 1 ${element.width * 0.8},${
+                element.height * 0.5
+              } ` +
+              `Z`
+          )
+
+          // 设置填充色
+          setBackground(element, chord)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            chord.setAttribute("stroke", element.borderColor || "#000")
+            chord.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                chord.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                chord.setAttribute("stroke-dasharray", "2, 2")
+                chord.setAttribute("stroke-linecap", "round")
+              } else if (element.borderType === "dashed") {
+                chord.setAttribute("stroke-dasharray", "6, 3")
+              }
+            }
+
+            chord.setAttribute("vector-effect", "non-scaling-stroke")
+            chord.setAttribute("shape-rendering", "geometricPrecision")
+          }
+
+          svg.appendChild(chord)
+          break
+        case "heptagon":
+          const heptagon = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+
+          // 计算七边形的顶点
+          let heptagonPoints = ""
+          for (let i = 0; i < 7; i++) {
+            const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2 // 从顶部开始
+            const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
+            const y =
+              element.height / 2 + (element.height / 2) * Math.sin(angle)
+            heptagonPoints += `${x},${y} `
+          }
+          heptagon.setAttribute("points", heptagonPoints.trim())
+
+          // 设置填充色
+          setBackground(element, heptagon)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            heptagon.setAttribute("stroke", element.borderColor || "#000")
+            heptagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                heptagon.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                heptagon.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                heptagon.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(heptagon)
+          break
+        case "hexagon":
+          const hexagon = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          hexagon.setAttribute(
+            "points",
+            `${element.width * 0.25},0 ${element.width * 0.75},0 ${
+              element.width
+            },${element.height * 0.5} ` +
+              `${element.width * 0.75},${element.height} ${
+                element.width * 0.25
+              },${element.height} 0,${element.height * 0.5}`
+          )
+
+          // 设置填充色
+          setBackground(element, hexagon)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            hexagon.setAttribute("stroke", element.borderColor || "#000")
+            hexagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                hexagon.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                hexagon.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                hexagon.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(hexagon)
+          break
+
+        case "octagon":
+          const octagon = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          octagon.setAttribute(
+            "points",
+            `${element.width * 0.3},0 ${element.width * 0.7},0 ${
+              element.width
+            },${element.height * 0.3} ` +
+              `${element.width},${element.height * 0.7} ${
+                element.width * 0.7
+              },${element.height} ` +
+              `${element.width * 0.3},${element.height} 0,${
+                element.height * 0.7
+              } 0,${element.height * 0.3}`
+          )
+
+          // 设置填充色
+          setBackground(element, octagon)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            octagon.setAttribute("stroke", element.borderColor || "#000")
+            octagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                octagon.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                octagon.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                octagon.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(octagon)
+          break
+
+        case "trapezoid":
+          const trapezoid = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          trapezoid.setAttribute(
+            "points",
+            `${element.width * 0.2},0 ${element.width * 0.8},0 ${
+              element.width
+            },${element.height} 0,${element.height}`
+          )
+
+          // 设置填充色
+          setBackground(element, trapezoid)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            trapezoid.setAttribute("stroke", element.borderColor || "#000")
+            trapezoid.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                trapezoid.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                trapezoid.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                trapezoid.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(trapezoid)
+          break
+
+        case "diamond":
+          const diamond = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          diamond.setAttribute(
+            "points",
+            `${element.width / 2},0 ${element.width},${element.height / 2} ${
+              element.width / 2
+            },${element.height} 0,${element.height / 2}`
+          )
+
+          // 设置填充色
+          setBackground(element, diamond)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            diamond.setAttribute("stroke", element.borderColor || "#000")
+            diamond.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                diamond.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                diamond.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                diamond.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(diamond)
+          break
+        case "dodecagon":
+          const dodecagon = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+
+          // 计算十二边形的顶点
+          let dodecagonPoints = ""
+          for (let i = 0; i < 12; i++) {
+            const angle = (i * 2 * Math.PI) / 12 - Math.PI / 2 // 从顶部开始
+            const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
+            const y =
+              element.height / 2 + (element.height / 2) * Math.sin(angle)
+            dodecagonPoints += `${x},${y} `
+          }
+          dodecagon.setAttribute("points", dodecagonPoints.trim())
+
+          // 设置填充色
+          setBackground(element, dodecagon)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            dodecagon.setAttribute("stroke", element.borderColor || "#000")
+            dodecagon.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                dodecagon.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                dodecagon.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                dodecagon.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(dodecagon)
+          break
+        case "halfFrame":
+          // 创建外框和内框
+          const outerRect2 = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          const innerRect2 = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 计算内框的边距
+          const frameWidth2 = element.width / 9
+
+          // 绘制外框的左边和上边
+          outerRect2.setAttribute(
+            "d",
+            `M0,${element.height} L0,0 L${element.width},0`
+          )
+
+          // 绘制内框的左边和上边，注意起点位置调整
+          innerRect2.setAttribute(
+            "d",
+            `M${frameWidth2},${element.height - frameWidth2} ` +
+              `L${frameWidth2},${frameWidth2} ` +
+              `L${element.width - frameWidth2},${frameWidth2}`
+          )
+
+          // 设置填充色
+          if (element.fill && element.fill.type === "color") {
+            // 创建一个填充用的路径
+            const fillPath = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "path"
+            )
+            fillPath.setAttribute(
+              "d",
+              `M${frameWidth2},${frameWidth2} ` +
+                `L${element.width - frameWidth2},${frameWidth2} ` +
+                `L${element.width},0 ` +
+                `L0,0 ` +
+                `L0,${element.height} ` +
+                `L${frameWidth2},${element.height - frameWidth2} Z`
+            )
+            fillPath.setAttribute("fill", element.fill.value || "transparent")
+            svg.appendChild(fillPath)
+
+            outerRect2.setAttribute("fill", "none")
+            innerRect2.setAttribute("fill", "none")
+          } else {
+            outerRect2.setAttribute("fill", "none")
+            innerRect2.setAttribute("fill", "none")
+          }
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            const borderColor = element.borderColor || "#000"
+            const borderWidth = element.borderWidth || 1
+
+            outerRect2.setAttribute("stroke", borderColor)
+            outerRect2.setAttribute("stroke-width", borderWidth)
+            innerRect2.setAttribute("stroke", borderColor)
+            innerRect2.setAttribute("stroke-width", borderWidth)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                const dashArray = element.borderStrokeDasharray
+                outerRect2.setAttribute("stroke-dasharray", dashArray)
+                innerRect2.setAttribute("stroke-dasharray", dashArray)
+              } else if (element.borderType === "dotted") {
+                outerRect2.setAttribute("stroke-dasharray", "1, 3")
+                innerRect2.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                outerRect2.setAttribute("stroke-dasharray", "5, 5")
+                innerRect2.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(outerRect2)
+          svg.appendChild(innerRect2)
+          break
+        case "corner":
+          const corner = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          corner.setAttribute(
+            "d",
+            `M0,0 ` +
+              `L0,${element.height} ` +
+              `L${element.width},${element.height} ` +
+              `L${element.width},${element.height * 0.6} ` +
+              `L${element.width * 0.4},${element.height * 0.6} ` +
+              `L${element.width * 0.4},0 Z`
+          )
+
+          // 设置填充色
+          setBackground(element, corner)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            corner.setAttribute("stroke", element.borderColor || "#000")
+            corner.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                corner.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                corner.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                corner.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(corner)
+          break
+        case "diagStripe":
+          const diagStripe = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 绘制斜纹路径
+          diagStripe.setAttribute(
+            "d",
+            `M${element.width * 0.4},0 ` +
+              `L${element.width},0 ` +
+              `L0,${element.height} ` +
+              `L0,${element.height * 0.4} Z`
+          )
+
+          // 设置填充色
+          setBackground(element, diagStripe)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            diagStripe.setAttribute("stroke", element.borderColor || "#000")
+            diagStripe.setAttribute("stroke-width", element.borderWidth || 1)
+            diagStripe.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                diagStripe.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                diagStripe.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                diagStripe.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(diagStripe)
+          break
+        case "plus":
+          const plus = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          plus.setAttribute(
+            "points",
+            `${element.width * 0.4},0 ` +
+              `${element.width * 0.6},0 ` +
+              `${element.width * 0.6},${element.height * 0.4} ` +
+              `${element.width},${element.height * 0.4} ` +
+              `${element.width},${element.height * 0.6} ` +
+              `${element.width * 0.6},${element.height * 0.6} ` +
+              `${element.width * 0.6},${element.height} ` +
+              `${element.width * 0.4},${element.height} ` +
+              `${element.width * 0.4},${element.height * 0.6} ` +
+              `0,${element.height * 0.6} ` +
+              `0,${element.height * 0.4} ` +
+              `${element.width * 0.4},${element.height * 0.4}`
+          )
+
+          // 设置填充色
+          setBackground(element, plus)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            plus.setAttribute("stroke", element.borderColor || "#000")
+            plus.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                plus.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                plus.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                plus.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(plus)
+          break
+        case "can":
+          const can = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "g"
+          )
+
+          // 创建圆柱体的主体部分
+          const cylinderBody = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          cylinderBody.setAttribute(
+            "d",
+            `M0,${element.height * 0.15} ` +
+              `A${element.width / 2},${element.height * 0.15} 0 0 1 ${
+                element.width
+              },${element.height * 0.15} ` +
+              `V${element.height * 0.85} ` +
+              `A${element.width / 2},${element.height * 0.15} 0 0 1 0,${
+                element.height * 0.85
+              } Z`
+          )
+
+          // 创建顶部椭圆
+          const topEllipse = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "ellipse"
+          )
+          topEllipse.setAttribute("cx", element.width / 2)
+          topEllipse.setAttribute("cy", element.height * 0.15)
+          topEllipse.setAttribute("rx", element.width / 2)
+          topEllipse.setAttribute("ry", element.height * 0.15)
+
+          // 设置填充色
+          setBackground(element, cylinderBody)
+          setBackground(element, topEllipse)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            const borderColor = element.borderColor || "#000"
+            const borderWidth = element.borderWidth || 1
+
+            cylinderBody.setAttribute("stroke", borderColor)
+            cylinderBody.setAttribute("stroke-width", borderWidth)
+            topEllipse.setAttribute("stroke", borderColor)
+            topEllipse.setAttribute("stroke-width", borderWidth)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                const dashArray = element.borderStrokeDasharray
+                cylinderBody.setAttribute("stroke-dasharray", dashArray)
+                topEllipse.setAttribute("stroke-dasharray", dashArray)
+              } else if (element.borderType === "dotted") {
+                cylinderBody.setAttribute("stroke-dasharray", "1, 3")
+                topEllipse.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                cylinderBody.setAttribute("stroke-dasharray", "5, 5")
+                topEllipse.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          can.appendChild(cylinderBody)
+          can.appendChild(topEllipse)
+          svg.appendChild(can)
+          break
+        case "cube":
+          const cube = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "g"
+          )
+
+          // 计算关键点坐标
+          const offset = element.width * 0.2
+          const frontX = offset
+          const frontY = offset
+          const frontW = element.width - offset
+          const frontH = element.height
+
+          // 设置立方体的三个面的路径
+          const frontFace = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          frontFace.setAttribute(
+            "d",
+            `M${frontX},${frontY} ` +
+              `L${frontW},${frontY} ` +
+              `L${frontW},${frontH} ` +
+              `L${frontX},${frontH} Z`
+          )
+
+          const rightFace = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          rightFace.setAttribute(
+            "d",
+            `M${frontW},${frontY} ` +
+              `L${element.width},0 ` +
+              `L${element.width},${element.height - offset} ` +
+              `L${frontW},${frontH} Z`
+          )
+
+          const topFace = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          topFace.setAttribute(
+            "d",
+            `M${frontX},${frontY} ` +
+              `L${frontW - offset - frontX},0 ` + // 修改这里：改为从(0,0)开始
+              `L${element.width - offset},0 ` + // 修改这里：使用 offset 来计算右上角的位置
+              `L${element.width},0 ` +
+              `L${frontW},${frontY} Z`
+          )
+
+          // 设置填充色
+          if (element.fill && element.fill.type === "color") {
+            const fillColor = element.fill.value || "transparent"
+            frontFace.setAttribute("fill", fillColor)
+            rightFace.setAttribute(
+              "fill",
+              this.adjustBrightness(fillColor, 0.8)
+            )
+            topFace.setAttribute("fill", this.adjustBrightness(fillColor, 1.2))
+          } else {
+            frontFace.setAttribute("fill", "transparent")
+            rightFace.setAttribute("fill", "transparent")
+            topFace.setAttribute("fill", "transparent")
+          }
+          // 设置边框
+          if (element.borderWidth > 0) {
+            const borderColor = element.borderColor || "#000"
+            const borderWidth = element.borderWidth || 1
+
+            frontFace.setAttribute("stroke", borderColor)
+            frontFace.setAttribute("stroke-width", borderWidth)
+            rightFace.setAttribute("stroke", borderColor)
+            rightFace.setAttribute("stroke-width", borderWidth)
+            topFace.setAttribute("stroke", borderColor)
+            topFace.setAttribute("stroke-width", borderWidth)
+
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              const dashArray =
+                element.borderStrokeDasharray ||
+                (element.borderType === "dotted" ? "1, 3" : "5, 5")
+              frontFace.setAttribute("stroke-dasharray", dashArray)
+              rightFace.setAttribute("stroke-dasharray", dashArray)
+              topFace.setAttribute("stroke-dasharray", dashArray)
+            }
+          }
+
+          // 按正确的顺序添加面（从后到前）
+          cube.appendChild(rightFace)
+          cube.appendChild(topFace)
+          cube.appendChild(frontFace)
+          svg.appendChild(cube)
+          break
+        case "bevel":
+          const bevel = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "g"
+          )
+
+          // 计算关键点坐标
+          const bevelOffset = element.width * 0.2
+          const smallRectX = bevelOffset
+          const smallRectY = bevelOffset
+          const smallRectW = element.width - 2 * bevelOffset
+          const smallRectH = element.height - 2 * bevelOffset
+
+          // 绘制顶部小矩形
+          const topRect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "rect"
+          )
+          topRect.setAttribute("x", smallRectX)
+          topRect.setAttribute("y", smallRectY)
+          topRect.setAttribute("width", smallRectW)
+          topRect.setAttribute("height", smallRectH)
+
+          // 绘制四个梯形
+          const topTrapezoid = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          topTrapezoid.setAttribute(
+            "d",
+            `M0,0 L${element.width},0 L${
+              element.width - bevelOffset
+            },${bevelOffset} L${bevelOffset},${bevelOffset} Z`
+          )
+
+          const bottomTrapezoid = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          bottomTrapezoid.setAttribute(
+            "d",
+            `M${bevelOffset},${element.height - bevelOffset} L${
+              element.width - bevelOffset
+            },${element.height - bevelOffset} L${element.width},${
+              element.height
+            } L0,${element.height} Z`
+          )
+
+          const leftTrapezoid = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          leftTrapezoid.setAttribute(
+            "d",
+            `M0,0 L${bevelOffset},${bevelOffset} L${bevelOffset},${
+              element.height - bevelOffset
+            } L0,${element.height} Z`
+          )
+
+          const rightTrapezoid = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          rightTrapezoid.setAttribute(
+            "d",
+            `M${element.width},0 L${element.width},${element.height} L${
+              element.width - bevelOffset
+            },${element.height - bevelOffset} L${
+              element.width - bevelOffset
+            },${bevelOffset} Z`
+          )
+
+          // 设置填充色
+          if (element.fill && element.fill.type === "color") {
+            const fillColor = element.fill.value || "transparent"
+            topRect.setAttribute("fill", fillColor)
+            topTrapezoid.setAttribute(
+              "fill",
+              this.adjustBrightness(fillColor, 1.2)
+            )
+            bottomTrapezoid.setAttribute(
+              "fill",
+              this.adjustBrightness(fillColor, 0.8)
+            )
+            leftTrapezoid.setAttribute(
+              "fill",
+              this.adjustBrightness(fillColor, 0.9)
+            )
+            rightTrapezoid.setAttribute(
+              "fill",
+              this.adjustBrightness(fillColor, 0.7)
+            )
+          } else {
+            topRect.setAttribute("fill", "transparent")
+            topTrapezoid.setAttribute("fill", "transparent")
+            bottomTrapezoid.setAttribute("fill", "transparent")
+            leftTrapezoid.setAttribute("fill", "transparent")
+            rightTrapezoid.setAttribute("fill", "transparent")
+          }
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            const borderColor = element.borderColor || "#000"
+            const borderWidth = element.borderWidth || 1
+            const parts = [
+              topRect,
+              topTrapezoid,
+              bottomTrapezoid,
+              leftTrapezoid,
+              rightTrapezoid,
+            ]
+
+            parts.forEach((part) => {
+              part.setAttribute("stroke", borderColor)
+              part.setAttribute("stroke-width", borderWidth)
+
+              if (
+                element.borderType === "dotted" ||
+                element.borderType === "dashed"
+              ) {
+                const dashArray =
+                  element.borderStrokeDasharray ||
+                  (element.borderType === "dotted" ? "1, 3" : "5, 5")
+                part.setAttribute("stroke-dasharray", dashArray)
+              }
+            })
+          }
+
+          // 按正确的顺序添加面（从后到前）
+          bevel.appendChild(bottomTrapezoid)
+          bevel.appendChild(leftTrapezoid)
+          bevel.appendChild(rightTrapezoid)
+          bevel.appendChild(topTrapezoid)
+          bevel.appendChild(topRect)
+          svg.appendChild(bevel)
+          break
+        case "donut":
+          const donut = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "g"
+          )
+
+          // 外圆
+          const outerCircle = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "circle"
+          )
+          outerCircle.setAttribute("cx", element.width / 2)
+          outerCircle.setAttribute("cy", element.height / 2)
+          outerCircle.setAttribute(
+            "r",
+            Math.min(element.width, element.height) / 2
+          )
+
+          // 内圆
+          const innerCircle = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "circle"
+          )
+          innerCircle.setAttribute("cx", element.width / 2)
+          innerCircle.setAttribute("cy", element.height / 2)
+          innerCircle.setAttribute(
+            "r",
+            Math.min(element.width, element.height) / 4
+          )
+
+          // 设置填充色
+          setBackground(element, outerCircle)
+          innerCircle.setAttribute("fill", "white")
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            const borderColor = element.borderColor || "#000"
+            const borderWidth = element.borderWidth || 1
+
+            outerCircle.setAttribute("stroke", borderColor)
+            outerCircle.setAttribute("stroke-width", borderWidth)
+            innerCircle.setAttribute("stroke", borderColor)
+            innerCircle.setAttribute("stroke-width", borderWidth)
+
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              const dashArray =
+                element.borderStrokeDasharray ||
+                (element.borderType === "dotted" ? "1, 3" : "5, 5")
+              outerCircle.setAttribute("stroke-dasharray", dashArray)
+              innerCircle.setAttribute("stroke-dasharray", dashArray)
+            }
+          }
+
+          donut.appendChild(outerCircle)
+          donut.appendChild(innerCircle)
+          svg.appendChild(donut)
+          break
+        case "noSmoking":
+          const noSmoking = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "g"
+          )
+
+          // 创建路径
+          const path = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          path.setAttribute(
+            "d",
+            "M0,70 A77,70 0 1,1 0,71 Z M123.80284467265982,99.39738105155146 A57.5386,50.5386 0 0 0 45.160427644134444,27.90427466198293 Z M30.197155327340184,40.602618948448544 A57.5386,50.5386 0 0 0 108.83957235586556,112.09572533801708 Z"
+          )
+          path.setAttribute("fill", "rgba(255,217,102,1)")
+          path.setAttribute("stroke", "rgba(23,44,81,1)")
+          path.setAttribute("stroke-width", "1px")
+          path.setAttribute("stroke-dasharray", "")
+          path.setAttribute("stroke-linecap", "butt")
+          path.setAttribute("stroke-linejoin", "round")
+
+          noSmoking.appendChild(path)
+          svg.appendChild(noSmoking)
+          break
+        case "rightArrow":
+          const rightArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          rightArrow.setAttribute(
+            "points",
+            `0,${element.height * 0.3} ${element.width * 0.7},${
+              element.height * 0.3
+            } ` +
+              `${element.width * 0.7},0 ${element.width},${
+                element.height * 0.5
+              } ` +
+              `${element.width * 0.7},${element.height} ${
+                element.width * 0.7
+              },${element.height * 0.7} ` +
+              `0,${element.height * 0.7}`
+          )
+
+          // 设置填充色
+          setBackground(element, rightArrow)
+          // 设置边框
+          if (element.borderWidth > 0) {
+            rightArrow.setAttribute("stroke", element.borderColor || "#000")
+            rightArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                rightArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                rightArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                rightArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(rightArrow)
+          break
+        case "leftArrow":
+          const leftArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          leftArrow.setAttribute(
+            "points",
+            `${element.width},${element.height * 0.3} ${element.width * 0.3},${
+              element.height * 0.3
+            } ` +
+              `${element.width * 0.3},0 0,${element.height * 0.5} ` +
+              `${element.width * 0.3},${element.height} ${
+                element.width * 0.3
+              },${element.height * 0.7} ` +
+              `${element.width},${element.height * 0.7}`
+          )
+
+          // 设置填充色
+          setBackground(element, leftArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            leftArrow.setAttribute("stroke", element.borderColor || "#000")
+            leftArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                leftArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                leftArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                leftArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(leftArrow)
+          break
+        case "upArrow":
+          const upArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          upArrow.setAttribute(
+            "points",
+            `${element.width * 0.3},${element.height} ${element.width * 0.3},${
+              element.height * 0.3
+            } ` +
+              `0,${element.height * 0.3} ${element.width * 0.5},0 ` +
+              `${element.width},${element.height * 0.3} ${
+                element.width * 0.7
+              },${element.height * 0.3} ` +
+              `${element.width * 0.7},${element.height}`
+          )
+
+          // 设置填充色
+          setBackground(element, upArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            upArrow.setAttribute("stroke", element.borderColor || "#000")
+            upArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                upArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                upArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                upArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(upArrow)
+          break
+        case "downArrow":
+          const downArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          downArrow.setAttribute(
+            "points",
+            `${element.width * 0.3},0 ${element.width * 0.3},${
+              element.height * 0.7
+            } ` +
+              `0,${element.height * 0.7} ${element.width * 0.5},${
+                element.height
+              } ` +
+              `${element.width},${element.height * 0.7} ${
+                element.width * 0.7
+              },${element.height * 0.7} ` +
+              `${element.width * 0.7},0`
+          )
+
+          // 设置填充色
+          setBackground(element, downArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            downArrow.setAttribute("stroke", element.borderColor || "#000")
+            downArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                downArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                downArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                downArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(downArrow)
+          break
+        case "leftRightArrow":
+          const leftRightArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          leftRightArrow.setAttribute(
+            "points",
+            `0,${element.height * 0.5} ${element.width * 0.2},${
+              element.height * 0.2
+            } ` +
+              `${element.width * 0.2},${element.height * 0.4} ${
+                element.width * 0.8
+              },${element.height * 0.4} ` +
+              `${element.width * 0.8},${element.height * 0.2} ${
+                element.width
+              },${element.height * 0.5} ` +
+              `${element.width * 0.8},${element.height * 0.8} ${
+                element.width * 0.8
+              },${element.height * 0.6} ` +
+              `${element.width * 0.2},${element.height * 0.6} ${
+                element.width * 0.2
+              },${element.height * 0.8}`
+          )
+
+          // 设置填充色
+          setBackground(element, leftRightArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            leftRightArrow.setAttribute("stroke", element.borderColor || "#000")
+            leftRightArrow.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                leftRightArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                leftRightArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                leftRightArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(leftRightArrow)
+          break
+        case "upDownArrow":
+          const upDownArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          upDownArrow.setAttribute(
+            "points",
+            `${element.width * 0.5},0 ${element.width * 0.3},${
+              element.height * 0.2
+            } ` +
+              `${element.width * 0.4},${element.height * 0.2} ${
+                element.width * 0.4
+              },${element.height * 0.8} ` +
+              `${element.width * 0.3},${element.height * 0.8} ${
+                element.width * 0.5
+              },${element.height} ` +
+              `${element.width * 0.7},${element.height * 0.8} ${
+                element.width * 0.6
+              },${element.height * 0.8} ` +
+              `${element.width * 0.6},${element.height * 0.2} ${
+                element.width * 0.7
+              },${element.height * 0.2}`
+          )
+
+          // 设置填充色
+          setBackground(element, upDownArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            upDownArrow.setAttribute("stroke", element.borderColor || "#000")
+            upDownArrow.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                upDownArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                upDownArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                upDownArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(upDownArrow)
+          break
+        case "quadArrow":
+          const quadArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 计算缩放比例
+          const scale = Math.min(element.width / 167, element.height / 121)
+          const offsetX = (element.width - 167 * scale) / 2
+          const offsetY = (element.height - 121 * scale) / 2
+
+          // 构建路径数据
+          const pathData = `
+            M${offsetX},${60.5 * scale + offsetY}
+            L${27.225 * scale + offsetX},${33.275 * scale + offsetY}
+            L${27.225 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${27.225 * scale + offsetY}
+            L${56.275 * scale + offsetX},${27.225 * scale + offsetY}
+            L${83.5 * scale + offsetX},${offsetY}
+            L${110.725 * scale + offsetX},${27.225 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${27.225 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${139.775 * scale + offsetX},${46.8875 * scale + offsetY}
+            L${139.775 * scale + offsetX},${33.275 * scale + offsetY}
+            L${167 * scale + offsetX},${60.5 * scale + offsetY}
+            L${139.775 * scale + offsetX},${87.725 * scale + offsetY}
+            L${139.775 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${97.1125 * scale + offsetX},${93.775 * scale + offsetY}
+            L${110.725 * scale + offsetX},${93.775 * scale + offsetY}
+            L${83.5 * scale + offsetX},${121 * scale + offsetY}
+            L${56.275 * scale + offsetX},${93.775 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${93.775 * scale + offsetY}
+            L${69.8875 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${27.225 * scale + offsetX},${74.1125 * scale + offsetY}
+            L${27.225 * scale + offsetX},${87.725 * scale + offsetY}
+            Z`
+
+          quadArrow.setAttribute("d", pathData)
+
+          // 设置填充色
+          setBackground(element, quadArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            quadArrow.setAttribute("stroke", element.borderColor || "#000")
+            quadArrow.setAttribute("stroke-width", element.borderWidth || 1)
+            quadArrow.setAttribute("stroke-linecap", "butt")
+            quadArrow.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                quadArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                quadArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                quadArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(quadArrow)
+          break
+        case "leftRightUpArrow":
+          const leftRightUpArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 计算缩放比例
+          const scale2 = Math.min(element.width / 167, element.height / 121)
+          const offsetX2 = (element.width - 167 * scale2) / 2
+          const offsetY2 = (element.height - 121 * scale2) / 2
+
+          // 构建路径数据
+          const pathData2 = `
+            M${offsetX2},${60.5 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${69.8875 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${69.8875 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${56.275 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${83.5 * scale2 + offsetX2},${offsetY2}
+            L${110.725 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${97.1125 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
+            L${97.1125 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
+            L${167 * scale2 + offsetX2},${60.5 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
+            L${139.775 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${97.1125 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${69.8875 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
+            L${27.225 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
+            Z`
+
+          leftRightUpArrow.setAttribute("d", pathData2)
+
+          // 设置填充色
+          setBackground(element, leftRightUpArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            leftRightUpArrow.setAttribute(
+              "stroke",
+              element.borderColor || "#000"
+            )
+            leftRightUpArrow.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+            leftRightUpArrow.setAttribute("stroke-linecap", "butt")
+            leftRightUpArrow.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                leftRightUpArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                leftRightUpArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                leftRightUpArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(leftRightUpArrow)
+          break
+        case "bentArrow":
+          const bentArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 构建路径数据
+          const pathData3 = `
+            M0,${element.height * 0.88}
+            L0,${element.height * 0.495}
+            A${element.width * 0.385} ${element.height * 0.385} 0 0 1 ${
+            element.width * 0.385
+          } ${element.height * 0.11}
+            L${element.width * 0.67},${element.height * 0.11}
+            L${element.width * 0.67},0
+            L${element.width * 0.89},${element.height * 0.22}
+            L${element.width * 0.67},${element.height * 0.44}
+            L${element.width * 0.67},${element.height * 0.33}
+            L${element.width * 0.385},${element.height * 0.33}
+            A${element.width * 0.165} ${element.height * 0.165} 0 0 0 ${
+            element.width * 0.22
+          } ${element.height * 0.495}
+            L${element.width * 0.22},${element.height * 0.88}
+            Z`
+
+          bentArrow.setAttribute("d", pathData3)
+
+          // 设置填充色
+          setBackground(element, bentArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            bentArrow.setAttribute("stroke", element.borderColor || "#000")
+            bentArrow.setAttribute("stroke-width", element.borderWidth || 1)
+            bentArrow.setAttribute("stroke-linecap", "butt")
+            bentArrow.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                bentArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                bentArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                bentArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(bentArrow)
+          break
+        case "parallelogram":
+          const parallelogram = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          parallelogram.setAttribute(
+            "points",
+            `${element.width * 0.25},0 ${element.width},0 ${
+              element.width * 0.75
+            },${element.height} 0,${element.height}`
+          )
+
+          // 设置填充色
+          setBackground(element, parallelogram)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            parallelogram.setAttribute("stroke", element.borderColor || "#000")
+            parallelogram.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                parallelogram.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                parallelogram.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                parallelogram.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(parallelogram)
+          break
+        case "uturnArrow":
+          const uturnArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 构建路径数据
+          const pathDataUturn = `
+            M0,${element.height * 0.745}
+            L0,${element.height * 0.179375}
+            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
+            element.width * 0.179375
+          },0
+            L${element.width * 0.179375},0
+            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
+            element.width * 0.359375
+          },${element.height * 0.179375}
+            L${element.width * 0.359375},${element.height * 0.205}
+            L${element.width * 0.41},${element.height * 0.205}
+            L${element.width * 0.3075},${element.height * 0.3075}
+            L${element.width * 0.205},${element.height * 0.205}
+            L${element.width * 0.25625},${element.height * 0.205}
+            L${element.width * 0.25625},${element.height * 0.179375}
+            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
+            element.width * 0.179375
+          },${element.height * 0.1025}
+            L${element.width * 0.179375},${element.height * 0.1025}
+            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
+            element.width * 0.1025
+          },${element.height * 0.179375}
+            L${element.width * 0.1025},${element.height * 0.745}
+            Z`
+
+          uturnArrow.setAttribute("d", pathDataUturn)
+
+          // 设置填充色
+          setBackground(element, uturnArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            uturnArrow.setAttribute("stroke", element.borderColor || "#000")
+            uturnArrow.setAttribute("stroke-width", element.borderWidth || 1)
+            uturnArrow.setAttribute("stroke-linecap", "butt")
+            uturnArrow.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                uturnArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                uturnArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                uturnArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(uturnArrow)
+          break
+        case "leftUpArrow":
+          const leftUpArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 使用提供的路径数据
+          const pathDataLeftUp = `
+            M0,${element.height * 0.65}
+            L${element.width * 0.15},${element.height * 0.4}
+            L${element.width * 0.15},${element.height * 0.55}
+            L${element.width * 0.5},${element.height * 0.55}
+            L${element.width * 0.5},${element.height * 0.1}
+            L${element.width * 0.35},${element.height * 0.1}
+            L${element.width * 0.65},0
+            L${element.width * 0.85},${element.height * 0.1}
+            L${element.width * 0.75},${element.height * 0.1}
+            L${element.width * 0.75},${element.height * 0.85}
+            L${element.width * 0.15},${element.height * 0.85}
+            L${element.width * 0.15},${element.height * 1}
+            Z`
+
+          leftUpArrow.setAttribute("d", pathDataLeftUp)
+
+          // 设置填充色
+          setBackground(element, leftUpArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            leftUpArrow.setAttribute("stroke", element.borderColor || "#000")
+            leftUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
+            leftUpArrow.setAttribute("stroke-linecap", "butt")
+            leftUpArrow.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                leftUpArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                leftUpArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                leftUpArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(leftUpArrow)
+          break
+        case "bentUpArrow":
+          const bentUpArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 构建路径数据，去掉左侧箭头
+          // 使用提供的路径数据
+          const pathDataBentUp = `
+            M0,${element.height * 0.89}
+            L0,${element.height * 0.7}
+            L${element.width * 0.575},${element.height * 0.7}
+            L${element.width * 0.575},${element.height * 0.2}
+            L${element.width * 0.46},${element.height * 0.2}
+            L${element.width * 0.69},0
+            L${element.width * 0.92},${element.height * 0.2}
+            L${element.width * 0.805},${element.height * 0.2}
+            L${element.width * 0.805},${element.height * 0.89}
+            Z`
+
+          bentUpArrow.setAttribute("d", pathDataBentUp)
+
+          // 设置填充色
+          setBackground(element, bentUpArrow)
+          // 设置边框
+          if (element.borderWidth > 0) {
+            bentUpArrow.setAttribute("stroke", element.borderColor || "#000")
+            bentUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
+            bentUpArrow.setAttribute("stroke-linecap", "butt")
+            bentUpArrow.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                bentUpArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                bentUpArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                bentUpArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(bentUpArrow)
+          break
+        case "curvedRightArrow":
+          const curvedRightArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 使用提供的路径数据
+          const pathDataCurvedRight = `
+            M${element.width},0
+            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
+            element.height * 0.4
+          }
+            L0,${element.height * 0.5}
+            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
+            element.height * 0.15
+          }
+            Z
+            M0,${element.height * 0.4}
+            A${element.width} ${element.height * 0.4} 0 0 0 ${
+            element.width * 0.8
+          } ${element.height * 0.8}
+            L${element.width * 0.8},${element.height * 0.75}
+            L${element.width},${element.height * 0.875}
+            L${element.width * 0.8},${element.height * 1}
+            L${element.width * 0.8},${element.height * 0.95}
+            A${element.width} ${element.height * 0.4} 0 0 1 0 ${
+            element.height * 0.5
+          }
+            Z`
+
+          curvedRightArrow.setAttribute("d", pathDataCurvedRight)
+
+          // 设置填充色
+          setBackground(element, curvedRightArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            curvedRightArrow.setAttribute(
+              "stroke",
+              element.borderColor || "#000"
+            )
+            curvedRightArrow.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+            curvedRightArrow.setAttribute("stroke-linecap", "butt")
+            curvedRightArrow.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                curvedRightArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                curvedRightArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                curvedRightArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(curvedRightArrow)
+          break
+        case "curvedLeftArrow":
+          const curvedLeftArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 定义左弧形箭头的路径数据
+          const pathDataCurvedLeft = `
+            M0,0
+            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
+            element.height * 0.4
+          }
+            L${element.width},${element.height * 0.55}
+            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
+            element.height * 0.15
+          }
+            Z
+            M0,${element.height * 0.85}
+            L${element.width * 0.25},${element.height * 0.65}
+            L${element.width * 0.25},${element.height * 0.75}
+            A${element.width} ${element.height * 0.4} 0 0 0 ${element.width} ${
+            element.height * 0.4
+          }
+            L${element.width},${element.height * 0.5}
+            L${element.width},${element.height * 0.5}
+            A${element.width} ${element.height * 0.4} 0 0 1 ${
+            element.width * 0.25
+          } ${element.height * 0.9}
+            L${element.width * 0.25},${element.height}
+            Z`
+
+          curvedLeftArrow.setAttribute("d", pathDataCurvedLeft)
+
+          // 设置填充色
+          setBackground(element, curvedLeftArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            curvedLeftArrow.setAttribute(
+              "stroke",
+              element.borderColor || "#000"
+            )
+            curvedLeftArrow.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+            curvedLeftArrow.setAttribute("stroke-linecap", "butt")
+            curvedLeftArrow.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                curvedLeftArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                curvedLeftArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                curvedLeftArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(curvedLeftArrow)
+          break
+        case "curvedUpArrow":
+          const curvedUpArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 定义上弧形箭头的路径数据
+          const pathDataCurvedUp = `
+            M${element.width * 0.905},0
+            L${element.width * 0.81},${element.height * 0.25}
+            L${element.width * 0.857},${element.height * 0.25}
+            A${element.width * 0.428} ${element.height} 0 0 1 ${
+            element.width * 0.428
+          },${element.height}
+            L${element.width * 0.522},${element.height}
+            A${element.width * 0.428} ${element.height} 0 0 0 ${
+            element.width * 0.952
+          },${element.height * 0.25}
+            L${element.width},${element.height * 0.25}
+            Z
+            M${element.width * 0.094},0
+            L0,0
+            A${element.width * 0.428} ${element.height} 0 0 0 ${
+            element.width * 0.428
+          },${element.height}
+            L${element.width * 0.522},${element.height}
+            A${element.width * 0.428} ${element.height} 0 0 1 ${
+            element.width * 0.094
+          },0
+            Z`
+
+          curvedUpArrow.setAttribute("d", pathDataCurvedUp)
+
+          // 设置填充色
+          setBackground(element, curvedUpArrow)
+          // 设置边框
+          if (element.borderWidth > 0) {
+            curvedUpArrow.setAttribute("stroke", element.borderColor || "#000")
+            curvedUpArrow.setAttribute("stroke-width", element.borderWidth || 1)
+            curvedUpArrow.setAttribute("stroke-linecap", "butt")
+            curvedUpArrow.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                curvedUpArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                curvedUpArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                curvedUpArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(curvedUpArrow)
+          break
+        case "curvedDownArrow":
+          const curvedDownArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 定义下弧形箭头的路径数据
+          const pathDataCurvedDown = `
+            M0,${element.height}
+            L${element.width * 0.16},${element.height}
+            A${element.width * 0.46} ${element.height} 0 0 1 ${
+            element.width * 0.62
+          },0
+            L${element.width * 0.46},0
+            A${element.width * 0.46} ${element.height} 0 0 0 0,${element.height}
+            Z
+            M${element.width},${element.height}
+            L${element.width * 0.84},${element.height * 0.75}
+            L${element.width * 0.92},${element.height * 0.75}
+            A${element.width * 0.46} ${element.height} 0 0 0 ${
+            element.width * 0.46
+          },0
+            L${element.width * 0.62},0
+            A${element.width * 0.46} ${element.height} 0 0 1 ${
+            element.width * 1.08
+          },${element.height * 0.75}
+            L${element.width * 1.16},${element.height * 0.75}
+            Z`
+
+          curvedDownArrow.setAttribute("d", pathDataCurvedDown)
+
+          // 设置填充色
+          setBackground(element, curvedDownArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            curvedDownArrow.setAttribute(
+              "stroke",
+              element.borderColor || "#000"
+            )
+            curvedDownArrow.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+            curvedDownArrow.setAttribute("stroke-linecap", "butt")
+            curvedDownArrow.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                curvedDownArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                curvedDownArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                curvedDownArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(curvedDownArrow)
+          break
+        case "stripedRightArrow":
+          const stripedRightArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "g"
+          )
+
+          // 主箭头部分
+          const mainArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          mainArrow.setAttribute(
+            "d",
+            `M${element.width * 0.062},${element.height * 0.25}
+            L${element.width * 0.8},${element.height * 0.25}
+            L${element.width * 0.8},0
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.8},${element.height}
+            L${element.width * 0.8},${element.height * 0.75}
+            L${element.width * 0.062},${element.height * 0.75}
+            Z`
+          )
+
+          // 第一条尾部条纹
+          const stripe1 = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          stripe1.setAttribute(
+            "d",
+            `M0,${element.height * 0.25}
+            L${element.width * 0.012},${element.height * 0.25}
+            L${element.width * 0.012},${element.height * 0.75}
+            L0,${element.height * 0.75}
+            Z`
+          )
+
+          // 第二条尾部条纹
+          const stripe2 = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          stripe2.setAttribute(
+            "d",
+            `M${element.width * 0.025},${element.height * 0.25}
+            L${element.width * 0.049},${element.height * 0.25}
+            L${element.width * 0.049},${element.height * 0.75}
+            L${element.width * 0.025},${element.height * 0.75}
+            Z`
+          )
+
+          // 设置填充色
+          setBackground(element, mainArrow)
+          setBackground(element, stripe1)
+          setBackground(element, stripe2)
+          // 设置边框
+          if (element.borderWidth > 0) {
+            ;[mainArrow, stripe1, stripe2].forEach((path) => {
+              path.setAttribute("stroke", element.borderColor || "#000")
+              path.setAttribute("stroke-width", element.borderWidth || 1)
+              path.setAttribute("stroke-linecap", "butt")
+              path.setAttribute("stroke-linejoin", "round")
+
+              // 处理虚线边框
+              if (
+                element.borderType === "dotted" ||
+                element.borderType === "dashed"
+              ) {
+                if (element.borderStrokeDasharray) {
+                  path.setAttribute(
+                    "stroke-dasharray",
+                    element.borderStrokeDasharray
+                  )
+                } else if (element.borderType === "dotted") {
+                  path.setAttribute("stroke-dasharray", "1, 3")
+                } else if (element.borderType === "dashed") {
+                  path.setAttribute("stroke-dasharray", "5, 5")
+                }
+              }
+            })
+          }
+
+          stripedRightArrow.appendChild(mainArrow)
+          stripedRightArrow.appendChild(stripe1)
+          stripedRightArrow.appendChild(stripe2)
+          svg.appendChild(stripedRightArrow)
+          break
+        case "rightArrowCallout":
+          const rightArrowCallout = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          rightArrowCallout.setAttribute(
+            "d",
+            `M0,0
+            L${element.width * 0.44},0
+            L${element.width * 0.44},${element.height * 0.375}
+            L${element.width * 0.79},${element.height * 0.375}
+            L${element.width * 0.79},${element.height * 0.25}
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.79},${element.height * 0.75}
+            L${element.width * 0.79},${element.height * 0.625}
+            L${element.width * 0.44},${element.height * 0.625}
+            L${element.width * 0.44},${element.height}
+            L0,${element.height}
+            Z`
+          )
+
+          // 设置填充色
+          setBackground(element, rightArrowCallout)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            rightArrowCallout.setAttribute(
+              "stroke",
+              element.borderColor || "#000"
+            )
+            rightArrowCallout.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+            rightArrowCallout.setAttribute("stroke-linecap", "butt")
+            rightArrowCallout.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                rightArrowCallout.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                rightArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                rightArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(rightArrowCallout)
+          break
+        case "leftRightArrowCallout":
+          const leftRightArrowCallout = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          leftRightArrowCallout.setAttribute(
+            "d",
+            `M0,${element.height * 0.5}
+            L${element.width * 0.139},${element.height * 0.25}
+            L${element.width * 0.139},${element.height * 0.375}
+            L${element.width * 0.364},${element.height * 0.375}
+            L${element.width * 0.364},0
+            L${element.width * 0.636},0
+            L${element.width * 0.636},${element.height * 0.375}
+            L${element.width * 0.861},${element.height * 0.375}
+            L${element.width * 0.861},${element.height * 0.25}
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.861},${element.height * 0.75}
+            L${element.width * 0.861},${element.height * 0.625}
+            L${element.width * 0.636},${element.height * 0.625}
+            L${element.width * 0.636},${element.height}
+            L${element.width * 0.364},${element.height}
+            L${element.width * 0.364},${element.height * 0.625}
+            L${element.width * 0.139},${element.height * 0.625}
+            L${element.width * 0.139},${element.height * 0.75}
+            Z`
+          )
+
+          // 设置填充色
+          setBackground(element, leftRightArrowCallout)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            leftRightArrowCallout.setAttribute(
+              "stroke",
+              element.borderColor || "#000"
+            )
+            leftRightArrowCallout.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+            leftRightArrowCallout.setAttribute("stroke-linecap", "butt")
+            leftRightArrowCallout.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                leftRightArrowCallout.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                leftRightArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                leftRightArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(leftRightArrowCallout)
+          break
+        case "quadArrowCallout":
+          const quadArrowCallout = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          quadArrowCallout.setAttribute(
+            "d",
+            `M0,${element.height * 0.5}
+            L${element.width * 0.096},${element.height * 0.315}
+            L${element.width * 0.096},${element.height * 0.407}
+            L${element.width * 0.26},${element.height * 0.407}
+            L${element.width * 0.26},${element.height * 0.259}
+            L${element.width * 0.453},${element.height * 0.259}
+            L${element.width * 0.453},${element.height * 0.185}
+            L${element.width * 0.405},${element.height * 0.185}
+            L${element.width * 0.5},0
+            L${element.width * 0.595},${element.height * 0.185}
+            L${element.width * 0.547},${element.height * 0.185}
+            L${element.width * 0.547},${element.height * 0.259}
+            L${element.width * 0.74},${element.height * 0.259}
+            L${element.width * 0.74},${element.height * 0.407}
+            L${element.width * 0.904},${element.height * 0.407}
+            L${element.width * 0.904},${element.height * 0.315}
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.904},${element.height * 0.685}
+            L${element.width * 0.904},${element.height * 0.593}
+            L${element.width * 0.74},${element.height * 0.593}
+            L${element.width * 0.74},${element.height * 0.741}
+            L${element.width * 0.547},${element.height * 0.741}
+            L${element.width * 0.547},${element.height * 0.815}
+            L${element.width * 0.595},${element.height * 0.815}
+            L${element.width * 0.5},${element.height}
+            L${element.width * 0.405},${element.height * 0.815}
+            L${element.width * 0.453},${element.height * 0.815}
+            L${element.width * 0.453},${element.height * 0.741}
+            L${element.width * 0.26},${element.height * 0.741}
+            L${element.width * 0.26},${element.height * 0.593}
+            L${element.width * 0.096},${element.height * 0.593}
+            L${element.width * 0.096},${element.height * 0.685}
+            Z`
+          )
+
+          // 设置填充色
+          setBackground(element, quadArrowCallout)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            quadArrowCallout.setAttribute(
+              "stroke",
+              element.borderColor || "#000"
+            )
+            quadArrowCallout.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+            quadArrowCallout.setAttribute("stroke-linecap", "butt")
+            quadArrowCallout.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                quadArrowCallout.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                quadArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                quadArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(quadArrowCallout)
+          break
+        case "leftArrowCallout":
+          const leftArrowCallout = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          leftArrowCallout.setAttribute(
+            "d",
+            `M0,${element.height * 0.5}
+            L${element.width * 0.183},${element.height * 0.25}
+            L${element.width * 0.183},${element.height * 0.375}
+            L${element.width * 0.35},${element.height * 0.375}
+            L${element.width * 0.35},0
+            L${element.width},0
+            L${element.width},${element.height}
+            L${element.width * 0.35},${element.height}
+            L${element.width * 0.35},${element.height * 0.625}
+            L${element.width * 0.183},${element.height * 0.625}
+            L${element.width * 0.183},${element.height * 0.75}
+            Z`
+          )
+
+          // 设置填充色
+          setBackground(element, leftArrowCallout)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            leftArrowCallout.setAttribute(
+              "stroke",
+              element.borderColor || "#000"
+            )
+            leftArrowCallout.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+            leftArrowCallout.setAttribute("stroke-linecap", "butt")
+            leftArrowCallout.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                leftArrowCallout.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                leftArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                leftArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(leftArrowCallout)
+          break
+        case "upArrowCallout":
+          const upArrowCallout = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          upArrowCallout.setAttribute(
+            "d",
+            `M0,${element.height * 0.35}
+            L${element.width * 0.41},${element.height * 0.35}
+            L${element.width * 0.41},${element.height * 0.25}
+            L${element.width * 0.32},${element.height * 0.25}
+            L${element.width * 0.5},0
+            L${element.width * 0.68},${element.height * 0.25}
+            L${element.width * 0.59},${element.height * 0.25}
+            L${element.width * 0.59},${element.height * 0.35}
+            L${element.width},${element.height * 0.35}
+            L${element.width},${element.height}
+            L0,${element.height}
+            Z`
+          )
+
+          // 设置填充色
+          setBackground(element, upArrowCallout)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            upArrowCallout.setAttribute("stroke", element.borderColor || "#000")
+            upArrowCallout.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+            upArrowCallout.setAttribute("stroke-linecap", "butt")
+            upArrowCallout.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                upArrowCallout.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                upArrowCallout.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                upArrowCallout.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(upArrowCallout)
+          break
+        case "notchedRightArrow":
+          const notchedRightArrow = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          notchedRightArrow.setAttribute(
+            "d",
+            `M0,${element.height * 0.25}
+            L${element.width * 0.83},${element.height * 0.25}
+            L${element.width * 0.83},0
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.83},${element.height}
+            L${element.width * 0.83},${element.height * 0.75}
+            L0,${element.height * 0.75}
+            L${element.width * 0.086},${element.height * 0.5}
+            Z`
+          )
+
+          // 设置填充色
+          setBackground(element, notchedRightArrow)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            notchedRightArrow.setAttribute(
+              "stroke",
+              element.borderColor || "#000"
+            )
+            notchedRightArrow.setAttribute(
+              "stroke-width",
+              element.borderWidth || 1
+            )
+            notchedRightArrow.setAttribute("stroke-linecap", "butt")
+            notchedRightArrow.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                notchedRightArrow.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                notchedRightArrow.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                notchedRightArrow.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(notchedRightArrow)
+          break
+        case "homePlate":
+          const homePlate = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          homePlate.setAttribute(
+            "d",
+            `M0,0
+            L${element.width * 0.925},0
+            L${element.width},${element.height * 0.5}
+            L${element.width * 0.925},${element.height}
+            L0,${element.height}
+            Z`
+          )
+
+          // 设置填充色
+          setBackground(element, homePlate)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            homePlate.setAttribute("stroke", element.borderColor || "#000")
+            homePlate.setAttribute("stroke-width", element.borderWidth || 1)
+            homePlate.setAttribute("stroke-linecap", "butt")
+            homePlate.setAttribute("stroke-linejoin", "round")
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                homePlate.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                homePlate.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                homePlate.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(homePlate)
+          break
+        case "rightTriangle":
+          const rightTriangle = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          rightTriangle.setAttribute(
+            "points",
+            `0,0 ${element.width},${element.height} 0,${element.height}`
+          )
+
+          // 设置填充色
+          setBackground(element, rightTriangle)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            rightTriangle.setAttribute("stroke", element.borderColor || "#000")
+            rightTriangle.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                rightTriangle.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                rightTriangle.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                rightTriangle.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(rightTriangle)
+          break
+        case "semiCircle":
+          const semiCircle = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          semiCircle.setAttribute(
+            "d",
+            `M0,${element.height} A${element.width / 2},${
+              element.height
+            } 0 0,1 ${element.width},${element.height} Z`
+          )
+
+          // 设置填充色
+          setBackground(element, semiCircle)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            semiCircle.setAttribute("stroke", element.borderColor || "#000")
+            semiCircle.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                semiCircle.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                semiCircle.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                semiCircle.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(semiCircle)
+          break
+
+        case "star":
+          const star = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          const cx = element.width / 2
+          const cy = element.height / 2
+          const outerRadius = Math.min(element.width, element.height) / 2
+          const innerRadius = outerRadius * 0.4
+          let starPoints = ""
+
+          for (let i = 0; i < 10; i++) {
+            const radius = i % 2 === 0 ? outerRadius : innerRadius
+            const angle = (Math.PI * i) / 5
+            const x = cx + radius * Math.sin(angle)
+            const y = cy - radius * Math.cos(angle)
+            starPoints += `${x},${y} `
+          }
+
+          star.setAttribute("points", starPoints.trim())
+
+          // 设置填充色
+          setBackground(element, star)
+          // 设置边框
+          if (element.borderWidth > 0) {
+            star.setAttribute("stroke", element.borderColor || "#000")
+            star.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                star.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                star.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                star.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(star)
+          break
+
+        case "cross":
+          const cross = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+          cross.setAttribute(
+            "points",
+            `${element.width * 0.35},0 ${element.width * 0.65},0 ${
+              element.width * 0.65
+            },${element.height * 0.35} ` +
+              `${element.width},${element.height * 0.35} ${element.width},${
+                element.height * 0.65
+              } ` +
+              `${element.width * 0.65},${element.height * 0.65} ${
+                element.width * 0.65
+              },${element.height} ` +
+              `${element.width * 0.35},${element.height} ${
+                element.width * 0.35
+              },${element.height * 0.65} ` +
+              `0,${element.height * 0.65} 0,${element.height * 0.35} ${
+                element.width * 0.35
+              },${element.height * 0.35}`
+          )
+
+          // 设置填充色
+          setBackground(element, cross)
+          // 设置边框
+          if (element.borderWidth > 0) {
+            cross.setAttribute("stroke", element.borderColor || "#000")
+            cross.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                cross.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                cross.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                cross.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(cross)
+          break
+
+        case "chevron":
+          const chevron = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "polygon"
+          )
+
+          chevron.setAttribute(
+            "points",
+            `${element.width * 0.5},0 ${element.width},${
+              element.height * 0.5
+            } ` +
+              `${element.width * 0.5},${element.height} ` +
+              `0,${element.height} ${element.width * 0.5},${
+                element.height * 0.5
+              } 0,0`
+          )
+
+          // 设置填充色
+          setBackground(element, chevron)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            chevron.setAttribute("stroke", element.borderColor || "#000")
+            chevron.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                chevron.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                chevron.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                chevron.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(chevron)
+          break
+
+        case "frame":
+          // 创建外框和内框
+          const outerRect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "rect"
+          )
+          outerRect.setAttribute("x", 0)
+          outerRect.setAttribute("y", 0)
+          outerRect.setAttribute("width", element.width)
+          outerRect.setAttribute("height", element.height)
+
+          const innerRect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "rect"
+          )
+          const frameWidth = element.width / 10
+          innerRect.setAttribute("x", frameWidth)
+          innerRect.setAttribute("y", frameWidth)
+          innerRect.setAttribute("width", element.width - frameWidth * 2)
+          innerRect.setAttribute("height", element.height - frameWidth * 2)
+
+          // 设置填充色
+          setBackground(element, outerRect)
+          innerRect.setAttribute("fill", "white") // 内框为白色
+          // 设置边框
+          if (element.borderWidth > 0) {
+            outerRect.setAttribute("stroke", element.borderColor || "#000")
+            outerRect.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                outerRect.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                outerRect.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                outerRect.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(outerRect)
+          svg.appendChild(innerRect)
+          break
+
+        case "cloud":
+          // 使用路径绘制云形
+          const cloud = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+          const w = element.width
+          const h = element.height
+
+          cloud.setAttribute(
+            "d",
+            `M${w * 0.2},${h * 0.6} ` +
+              `C${w * 0.05},${h * 0.6} ${w * 0.05},${h * 0.3} ${w * 0.2},${
+                h * 0.3
+              } ` +
+              `C${w * 0.2},${h * 0.1} ${w * 0.45},${h * 0.1} ${w * 0.5},${
+                h * 0.3
+              } ` +
+              `C${w * 0.55},${h * 0.1} ${w * 0.8},${h * 0.1} ${w * 0.8},${
+                h * 0.3
+              } ` +
+              `C${w * 0.95},${h * 0.3} ${w * 0.95},${h * 0.6} ${w * 0.8},${
+                h * 0.6
+              } ` +
+              `L${w * 0.2},${h * 0.6} Z`
+          )
+
+          // 设置填充色
+          setBackground(element, cloud)
+          // 设置边框
+          if (element.borderWidth > 0) {
+            cloud.setAttribute("stroke", element.borderColor || "#000")
+            cloud.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                cloud.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                cloud.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                cloud.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(cloud)
+          break
+        case "blockArc":
+          const blockArc = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "path"
+          )
+
+          // 计算弧形参数
+          const rx = element.width / 2
+          const ry = element.height / 2
+          const innerRatio = 0.86 // 根据示例计算的内弧半径比例
+          const innerRx = rx * innerRatio
+          const innerRy = ry * innerRatio
+
+          // 构建路径
+          const path2 = `
+            M 0,${ry} 
+            A ${rx} ${ry} 0 1 1 ${element.width} ${ry}
+            L ${element.width - (rx - innerRx)},${ry}
+            A ${innerRx} ${innerRy} 0 1 0 ${rx - innerRx},${ry}
+            Z`
+
+          blockArc.setAttribute("d", path2.trim())
+
+          // 设置填充色
+          setBackground(element, blockArc)
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            blockArc.setAttribute("stroke", element.borderColor || "#000")
+            blockArc.setAttribute("stroke-width", element.borderWidth || 1)
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                blockArc.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                blockArc.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                blockArc.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(blockArc)
+          break
+
+        case "rect":
+        default:
+          const rect = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "rect"
+          )
+          rect.setAttribute("x", 0)
+          rect.setAttribute("y", 0)
+          rect.setAttribute("width", element.width)
+          rect.setAttribute("height", element.height)
+          if (element.fill && element.fill.type) {
+            // 设置填充色
+            if (element.fill.type === "color") {
+              rect.setAttribute("fill", element.fill.value || "transparent")
+            } else if (element.fill.type === "gradient") {
+              // 渐变填充
+              const { colors, path, rot } = element.fill.value
+
+              if (colors && colors.length >= 2) {
+                const gradientType = path === "rect" ? "linear" : "radial"
+                const gradientAngle =
+                  gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0
+
+                let gradientString = `${gradientType}-gradient(`
+                if (gradientType === "linear") {
+                  gradientString += `${gradientAngle}deg, `
+                }
+
+                colors.forEach((color, i) => {
+                  gradientString += `${color.color} ${color.pos}${
+                    i < colors.length - 1 ? ", " : ""
+                  }`
+                })
+                gradientString += ")"
+
+                // 创建渐变定义
+                const gradientDef = document.createElementNS(
+                  "http://www.w3.org/2000/svg",
+                  "defs"
+                )
+                const gradientEl = document.createElementNS(
+                  "http://www.w3.org/2000/svg",
+                  gradientType === "linear"
+                    ? "linearGradient"
+                    : "radialGradient"
+                )
+                const gradientId = `gradient-${Date.now()}-${Math.random()
+                  .toString(36)
+                  .substr(2, 9)}`
+                gradientEl.setAttribute("id", gradientId)
+
+                // 设置渐变属性
+                if (gradientType === "linear") {
+                  gradientEl.setAttribute(
+                    "gradientTransform",
+                    `rotate(${gradientAngle})`
+                  )
+                }
+
+                // 添加渐变色标
+                colors.forEach((color) => {
+                  const stop = document.createElementNS(
+                    "http://www.w3.org/2000/svg",
+                    "stop"
+                  )
+                  stop.setAttribute("offset", color.pos)
+                  stop.setAttribute("stop-color", color.color)
+                  gradientEl.appendChild(stop)
+                })
+
+                gradientDef.appendChild(gradientEl)
+                svg.appendChild(gradientDef)
+
+                // 应用渐变
+                rect.setAttribute("fill", `url(#${gradientId})`)
+              }
+            } else if (element.fill.type === "image") {
+              // 创建图案填充
+              const pattern = document.createElementNS(
+                "http://www.w3.org/2000/svg",
+                "pattern"
+              )
+              const patternId = `pattern-${Date.now()}-${Math.random()
+                .toString(36)
+                .substr(2, 9)}`
+              pattern.setAttribute("id", patternId)
+              pattern.setAttribute("patternUnits", "userSpaceOnUse")
+              pattern.setAttribute("width", "100%")
+              pattern.setAttribute("height", "100%")
+
+              // 创建图片元素
+              const image = document.createElementNS(
+                "http://www.w3.org/2000/svg",
+                "image"
+              )
+              image.setAttribute("width", "100%")
+              image.setAttribute("height", "100%")
+              image.setAttribute("preserveAspectRatio", "xMidYMid slice")
+              image.setAttributeNS(
+                "http://www.w3.org/1999/xlink",
+                "href",
+                element.fill.value.picBase64
+              )
+
+              pattern.appendChild(image)
+
+              // 添加pattern到defs
+              const defs = document.createElementNS(
+                "http://www.w3.org/2000/svg",
+                "defs"
+              )
+              defs.appendChild(pattern)
+              svg.appendChild(defs)
+
+              // 应用图案填充
+              rect.setAttribute("fill", `url(#${patternId})`)
+            } else {
+              rect.setAttribute("fill", "transparent")
+            }
+          } else {
+            rect.setAttribute("fill", "#ffffff00")
+          }
+
+          // 设置边框
+          if (element.borderWidth > 0) {
+            rect.setAttribute("stroke", element.borderColor || "#000")
+            rect.setAttribute("stroke-width", element.borderWidth || 1)
+
+            // 处理虚线边框
+            if (
+              element.borderType === "dotted" ||
+              element.borderType === "dashed"
+            ) {
+              if (element.borderStrokeDasharray) {
+                rect.setAttribute(
+                  "stroke-dasharray",
+                  element.borderStrokeDasharray
+                )
+              } else if (element.borderType === "dotted") {
+                rect.setAttribute("stroke-dasharray", "1, 3")
+              } else if (element.borderType === "dashed") {
+                rect.setAttribute("stroke-dasharray", "5, 5")
+              }
+            }
+          }
+
+          svg.appendChild(rect)
+          break
+      }
+
+      const transformList = []
+      let rotateDeg = element.rotate || 0
+
+      if (element.isFlipV) {
+        transformList.push(`scaleY(-1)`)
+        rotateDeg = -rotateDeg // 垂直翻转时反转旋转方向
+      }
+
+      if (element.isFlipH) {
+        transformList.push(`scaleX(-1)`)
+        rotateDeg = -rotateDeg // 水平翻转时反转旋转方向
+      }
+
+      if (element.rotate) {
+        transformList.push(`rotate(${rotateDeg}deg)`)
+      }
+
+      if (transformList.length > 0) {
+        el.style.transform = transformList.join(" ")
+        el.style.transformOrigin = "center center"
+      }
+
+      el.appendChild(svg)
+
+      // 设置形状内容
+      if (element.content) {
+        const contentContainer = document.createElement("div")
+        contentContainer.innerHTML = this.convertPtToPxInContent(
+          element.content
+        )
+        contentContainer.style.position = "absolute"
+        contentContainer.style.width = element.width + "px"
+        contentContainer.style.height = element.height + "px"
+        contentContainer.style.top = "0px"
+        contentContainer.style.left = "0px"
+        contentContainer.style.display = "flex"
+        contentContainer.style.alignItems = "center"
+        contentContainer.style.justifyContent = "center"
+        contentContainer.style.zIndex = element.order
+        contentContainer.style.pointerEvents = "none"
+        const transformList = []
+        let rotateDeg = element.rotate || 0
+
+        if (element.isFlipV) {
+          transformList.push(`scaleY(-1)`)
+          rotateDeg = -rotateDeg // 垂直翻转时反转旋转方向
+        }
+
+        if (element.isFlipH) {
+          transformList.push(`scaleX(-1)`)
+          rotateDeg = -rotateDeg // 水平翻转时反转旋转方向
+        }
+
+        if (element.rotate) {
+          transformList.push(`rotate(${rotateDeg}deg)`)
+        }
+
+        if (transformList.length > 0) {
+          contentContainer.style.transform = transformList.join(" ")
+          contentContainer.style.transformOrigin = "center center"
+        }
+        el.appendChild(contentContainer)
+      }
+      return el
+    },
+
+    // 创建表格元素
+    createTableElement(element) {
+      const el = document.createElement("div")
+      el.style.position = "absolute"
+      el.style.top = element.top + "px"
+      el.style.left = element.left + "px"
+      el.style.width = element.width + "px"
+      el.style.height = element.height + "px"
+      el.style.zIndex = element.order
+
+      // 创建表格元素
+      const table = document.createElement("table")
+      table.style.width = element.width + "px"
+      table.style.height = element.height + "px"
+      table.style.borderCollapse = "collapse"
+      table.style.tableLayout = "fixed"
+      // 设置表格边框
+      if (element.borders) {
+        if (element.borders.all) {
+          const border = element.borders.all
+          table.style.border = `${border.borderWidth || 1}px ${
+            border.borderType || "solid"
+          } ${border.borderColor || "#000"}`
+        } else {
+          // 分别设置四边边框
+          if (element.borders.top) {
+            table.style.borderTop = `${
+              element.borders.top.borderWidth || 1
+            }px ${element.borders.top.borderType || "solid"} ${
+              element.borders.top.borderColor || "#000"
+            }`
+          }
+          if (element.borders.bottom) {
+            table.style.borderBottom = `${
+              element.borders.bottom.borderWidth || 1
+            }px ${element.borders.bottom.borderType || "solid"} ${
+              element.borders.bottom.borderColor || "#000"
+            }`
+          }
+          if (element.borders.left) {
+            table.style.borderLeft = `${
+              element.borders.left.borderWidth || 1
+            }px ${element.borders.left.borderType || "solid"} ${
+              element.borders.left.borderColor || "#000"
+            }`
+          }
+          if (element.borders.right) {
+            table.style.borderRight = `${
+              element.borders.right.borderWidth || 1
+            }px ${element.borders.right.borderType || "solid"} ${
+              element.borders.right.borderColor || "#000"
+            }`
+          }
+        }
+      }
+
+      // 创建表格内容
+      const tbody = document.createElement("tbody")
+
+      // 处理表格数据
+      if (element.data && element.data.length > 0) {
+        element.data.forEach((rowData, rowIndex) => {
+          const tr = document.createElement("tr")
+
+          rowData.forEach((cell, colIndex) => {
+            // 跳过被合并的单元格
+            if (cell.hMerge) return
+
+            const td = document.createElement("td")
+
+            // 设置单元格内容
+            if (cell.text) {
+              td.innerHTML = this.convertPtToPxInContent(cell.text)
+            }
+
+            // 设置单元格样式
+            td.style.padding = "0px"
+            td.style.verticalAlign = "middle"
+
+            // 设置文本样式
+            if (cell.fontColor) td.style.color = cell.fontColor
+            if (cell.fontSize) td.style.fontSize = cell.fontSize
+            if (cell.fontFamily) td.style.fontFamily = cell.fontFamily
+            if (cell.bold) td.style.fontWeight = "bold"
+            if (cell.italic) td.style.fontStyle = "italic"
+            if (cell.underline) td.style.textDecoration = "underline"
+            if (cell.align) td.style.textAlign = cell.align
+
+            // 设置背景色
+            if (cell.fillColor) td.style.backgroundColor = cell.fillColor
+
+            // 设置单元格边框
+            if (cell.borders) {
+              if (cell.borders.all) {
+                const border = cell.borders.all
+                td.style.border = `${border.borderWidth || 1}px ${
+                  border.borderType || "solid"
+                } ${border.borderColor || "#000"}`
+              } else {
+                // 分别设置四边边框
+                if (cell.borders.top) {
+                  td.style.borderTop = `${
+                    cell.borders.top.borderWidth || 1
+                  }px ${cell.borders.top.borderType || "solid"} ${
+                    cell.borders.top.borderColor || "#000"
+                  }`
+                }
+                if (cell.borders.bottom) {
+                  td.style.borderBottom = `${
+                    cell.borders.bottom.borderWidth || 1
+                  }px ${cell.borders.bottom.borderType || "solid"} ${
+                    cell.borders.bottom.borderColor || "#000"
+                  }`
+                }
+                if (cell.borders.left) {
+                  td.style.borderLeft = `${
+                    cell.borders.left.borderWidth || 1
+                  }px ${cell.borders.left.borderType || "solid"} ${
+                    cell.borders.left.borderColor || "#000"
+                  }`
+                }
+                if (cell.borders.right) {
+                  td.style.borderRight = `${
+                    cell.borders.right.borderWidth || 1
+                  }px ${cell.borders.right.borderType || "solid"} ${
+                    cell.borders.right.borderColor || "#000"
+                  }`
+                }
+              }
+            }
+            td.style.width = element.colWidths[colIndex] + "px"
+            // 设置单元格合并
+            if (cell.colSpan && cell.colSpan > 1) {
+              td.colSpan = cell.colSpan
+              td.style.width = element.colWidths[colIndex] * cell.colSpan + "px"
+            }
+            if (cell.rowSpan && cell.rowSpan > 1) {
+              td.rowSpan = cell.rowSpan
+            }
+
+            tr.appendChild(td)
+          })
+          tr.style.height = element.rowHeights[rowIndex] + "px"
+          tbody.appendChild(tr)
+        })
+      }
+
+      table.appendChild(tbody)
+      el.appendChild(table)
+
+      return el
+    },
+    // 创建图表元素
+    createChartElement(element) {
+      // 1. 创建基础容器
+      const el = document.createElement("div")
+      el.style.position = "absolute"
+      el.style.top = element.top + "px"
+      el.style.left = element.left + "px"
+      el.style.width = element.width + "px"
+      el.style.height = element.height + "px"
+      el.style.zIndex = element.order
+      // 2. 创建SVG画布
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+      svg.setAttribute("width", element.width)
+      svg.setAttribute("height", element.height)
+      svg.setAttribute("viewBox", `0 0 ${element.width} ${element.height}`)
+
+      // 3. 设置图表内边距
+      const padding = {
+        top: 60, // 为图例留出空间
+        right: 40, // 右侧边距
+        bottom: 60, // X轴标签空间
+        left: 60, // Y轴标签空间
+      }
+
+      // 4. 计算实际绘图区域
+      const chartWidth = element.width - padding.left - padding.right
+      const chartHeight = element.height - padding.top - padding.bottom
+      // 处理不同图表类型
+      switch (element.chartType) {
+        case "barChart":
+          // 绘制柱状图
+          this.drawBarChart(svg, element, {
+            padding,
+            chartWidth,
+            chartHeight,
+            barDir: element.barDir || "col",
+            grouping: element.grouping || "clustered",
+          })
+          break
+        case "pieChart":
+        case "doughnutChart":
+          this.drawDonutChart(svg, element, chartWidth, chartHeight)
+          break
+        default:
+            // 占位符
+          svg.innerHTML = `<text x="${element.width / 2}" y="${
+            element.height / 2
+          }" text-anchor="middle" fill="#999" font-size="12px">
+            暂不支持该类型图表
+          </text>`
+          console.warn("Unsupported chart type:", element.chartType)
+      }
+
+      el.appendChild(svg)
+      return el
+    },
+    drawDonutChart(svg, element, chartWidth, chartHeight) {
+      // 计算饼图中心点和半径
+      const cx = element.width / 2
+      const cy = element.height / 2
+      const radius = Math.min(chartWidth, chartHeight) / 2
+
+      // 计算所有数据总和
+      const total = element.data[0].values.reduce(
+        (sum, item) => sum + item.y,
+        0
+      )
+
+      // 创建颜色数组
+      const colors = element.colors || [
+        "#5B9BD5",
+        "#ED7D31",
+        "#A5A5A5",
+        "#FFC000",
+      ]
+
+      let startAngle = 0
+      element.data[0].values.forEach((item, index) => {
+        // 计算扇形角度
+        const angle = (item.y / total) * Math.PI * 2
+
+        // 计算扇形路径
+        const endAngle = startAngle + angle
+        const x1 = cx + radius * Math.cos(startAngle)
+        const y1 = cy + radius * Math.sin(startAngle)
+        const x2 = cx + radius * Math.cos(endAngle)
+        const y2 = cy + radius * Math.sin(endAngle)
+
+        // 创建扇形路径
+        const path = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "path"
+        )
+        const largeArcFlag = angle > Math.PI ? 1 : 0
+
+        // 根据是否为环形图决定内圆半径
+        const innerRadius =
+          element.chartType === "doughnutChart" ? radius * 0.6 : 0
+        if (element.chartType === "doughnutChart") {
+          // 环形图路径
+          const ix1 = cx + innerRadius * Math.cos(startAngle)
+          const iy1 = cy + innerRadius * Math.sin(startAngle)
+          const ix2 = cx + innerRadius * Math.cos(endAngle)
+          const iy2 = cy + innerRadius * Math.sin(endAngle)
+
+          path.setAttribute(
+            "d",
+            `
+            M ${x1} ${y1}
+            A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}
+            L ${ix2} ${iy2}
+            A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${ix1} ${iy1}
+            Z
+          `
+          )
+        } else {
+          // 饼图路径
+          path.setAttribute(
+            "d",
+            `
+            M ${cx} ${cy}
+            L ${x1} ${y1}
+            A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2}
+            Z
+          `
+          )
+        }
+
+        // 设置填充色
+        path.setAttribute("fill", colors[index % colors.length])
+        path.setAttribute("stroke", "#fff")
+        path.setAttribute("stroke-width", "1")
+        svg.appendChild(path)
+
+        // 添加数值标签
+        const labelAngle = startAngle + angle / 2
+        const labelRadius = radius * 1.1
+        const labelX = cx + labelRadius * Math.cos(labelAngle)
+        const labelY = cy + labelRadius * Math.sin(labelAngle)
+
+        const label = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "text"
+        )
+        label.setAttribute("x", labelX)
+        label.setAttribute("y", labelY)
+        label.setAttribute("text-anchor", "middle")
+        label.setAttribute("alignment-baseline", "middle")
+        label.setAttribute("font-size", "12px")
+        label.textContent = `${((item.y / total) * 100).toFixed(1)}%`
+        svg.appendChild(label)
+
+        startAngle = endAngle
+      })
+    },
+    // 绘制柱状图
+    drawBarChart(svg, element, options) {
+      const { padding, chartWidth, chartHeight, barDir, grouping } = options
+      const series = element.data
+      const categories = series[0].xlabels
+      const categoryCount = Object.keys(categories).length
+
+      // 1. 计算最大值
+      let maxValue = 0
+      series.forEach((serie) => {
+        const seriesMax = Math.max(...serie.values.map((v) => v.y))
+        maxValue = Math.max(maxValue, seriesMax)
+      })
+      maxValue = maxValue * 1.2 // 增加20%空间
+
+      // 2. 计算柱子布局
+      const groupWidth = chartWidth / categoryCount
+      const barWidth =
+        grouping === "clustered"
+          ? (groupWidth * 0.6) / series.length // 分组模式
+          : groupWidth * 0.6 // 堆叠模式
+      const barSpacing =
+        (groupWidth * 0.4) / (grouping === "clustered" ? series.length + 1 : 2)
+
+      // 3. 绘制坐标轴
+      // X轴
+      const xAxisPath = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      xAxisPath.setAttribute(
+        "d",
+        `M${padding.left},${element.height - padding.bottom} L${
+          element.width - padding.right
+        },${element.height - padding.bottom}`
+      )
+      xAxisPath.setAttribute("stroke", "#000")
+      xAxisPath.setAttribute("stroke-width", "1")
+      svg.appendChild(xAxisPath)
+
+      // Y轴
+      const yAxisPath = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path"
+      )
+      yAxisPath.setAttribute(
+        "d",
+        `M${padding.left},${padding.top} L${padding.left},${
+          element.height - padding.bottom
+        }`
+      )
+      yAxisPath.setAttribute("stroke", "#000")
+      yAxisPath.setAttribute("stroke-width", "1")
+      svg.appendChild(yAxisPath)
+
+      // 4. 绘制Y轴刻度和网格线
+      const yTickCount = 5
+      for (let i = 0; i <= yTickCount; i++) {
+        const y = padding.top + (chartHeight * i) / yTickCount
+        const value = maxValue - (maxValue * i) / yTickCount
+
+        // 水平网格线
+        const gridLine = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "line"
+        )
+        gridLine.setAttribute("x1", padding.left)
+        gridLine.setAttribute("y1", y)
+        gridLine.setAttribute("x2", padding.left + chartWidth)
+        gridLine.setAttribute("y2", y)
+        gridLine.setAttribute("stroke", "#eee")
+        gridLine.setAttribute("stroke-width", "1")
+        svg.appendChild(gridLine)
+
+        // 刻度线
+        const tick = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "line"
+        )
+        tick.setAttribute("x1", padding.left - 6)
+        tick.setAttribute("y1", y)
+        tick.setAttribute("x2", padding.left)
+        tick.setAttribute("y2", y)
+        tick.setAttribute("stroke", "#000")
+        tick.setAttribute("stroke-width", "1")
+        svg.appendChild(tick)
+
+        // 刻度值
+        const label = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "text"
+        )
+        label.setAttribute("x", padding.left - 10)
+        label.setAttribute("y", y + 4)
+        label.setAttribute("text-anchor", "end")
+        label.setAttribute("font-size", "12px")
+        label.textContent = value.toFixed(1)
+        svg.appendChild(label)
+      }
+
+      // 5. 绘制数据条
+      series.forEach((serie, serieIndex) => {
+        serie.values.forEach((value, index) => {
+          const barHeight = (value.y / maxValue) * chartHeight
+          const x =
+            padding.left +
+            groupWidth * index +
+            (grouping === "clustered"
+              ? barSpacing * (serieIndex + 1) + barWidth * serieIndex
+              : barSpacing)
+          const y = element.height - padding.bottom - barHeight
+
+          // 绘制柱子
+          const bar = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "rect"
+          )
+          bar.setAttribute("x", x)
+          bar.setAttribute("y", y)
+          bar.setAttribute("width", barWidth)
+          bar.setAttribute("height", barHeight)
+          bar.setAttribute(
+            "fill",
+            element.colors[serieIndex] || `hsl(${serieIndex * 60}, 70%, 50%)`
+          )
+          svg.appendChild(bar)
+
+          // 数值标签
+          if (element.marker) {
+            const label = document.createElementNS(
+              "http://www.w3.org/2000/svg",
+              "text"
+            )
+            label.setAttribute("x", x + barWidth / 2)
+            label.setAttribute("y", y - 5)
+            label.setAttribute("text-anchor", "middle")
+            label.setAttribute("font-size", "12px")
+            label.textContent = value.y.toFixed(1)
+            svg.appendChild(label)
+          }
+        })
+      })
+
+      // 6. 绘制X轴类别标签
+      Object.values(categories).forEach((label, index) => {
+        const x = padding.left + groupWidth * (index + 0.5)
+        const text = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "text"
+        )
+        text.setAttribute("x", x)
+        text.setAttribute("y", element.height - padding.bottom + 20)
+        text.setAttribute("text-anchor", "middle")
+        text.setAttribute("font-size", "12px")
+        text.textContent = label
+        svg.appendChild(text)
+      })
+
+      // 7. 绘制图例
+      series.forEach((serie, index) => {
+        const legendX = padding.left + index * 120
+        const legendY = 20
+
+        const rect = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "rect"
+        )
+        rect.setAttribute("x", legendX)
+        rect.setAttribute("y", legendY)
+        rect.setAttribute("width", 15)
+        rect.setAttribute("height", 15)
+        rect.setAttribute(
+          "fill",
+          element.colors[index] || `hsl(${index * 60}, 70%, 50%)`
+        )
+        svg.appendChild(rect)
+
+        const text = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "text"
+        )
+        text.setAttribute("x", legendX + 25)
+        text.setAttribute("y", legendY + 12)
+        text.setAttribute("font-size", "12px")
+        text.textContent = serie.key
+        svg.appendChild(text)
+      })
+    },
+    // 绘制网格和刻度
+    drawGrid(svg, padding, width, height, maxValue) {
+      const yTickCount = 5
+      for (let i = 0; i <= yTickCount; i++) {
+        const y = padding.top + (height * i) / yTickCount
+        const value = maxValue - (maxValue * i) / yTickCount
+
+        // 刻度线
+        const tick = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "line"
+        )
+        tick.setAttribute("x1", padding.left - 5)
+        tick.setAttribute("x2", padding.left)
+        tick.setAttribute("y1", y)
+        tick.setAttribute("y2", y)
+        tick.setAttribute("stroke", "#000")
+        svg.appendChild(tick)
+
+        // 刻度值
+        const label = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "text"
+        )
+        label.setAttribute("x", padding.left - 8)
+        label.setAttribute("y", y + 4)
+        label.setAttribute("text-anchor", "end")
+        label.setAttribute("font-size", "12px")
+        label.textContent = value.toFixed(1)
+        svg.appendChild(label)
+      }
+    },
+    // 绘制类别标签
+    drawCategoryLabels(svg, categories, padding, groupWidth, barDir) {
+      Object.values(categories).forEach((label, index) => {
+        const text = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "text"
+        )
+        if (barDir === "col") {
+          text.setAttribute("x", padding.left + groupWidth * (index + 0.5))
+          text.setAttribute("y", svg.height.baseVal.value - padding.bottom + 20)
+          text.setAttribute("text-anchor", "middle")
+        } else {
+          text.setAttribute("x", padding.left - 10)
+          text.setAttribute("y", padding.top + groupWidth * (index + 0.5))
+          text.setAttribute("text-anchor", "end")
+          text.setAttribute("dominant-baseline", "middle")
+        }
+        text.setAttribute("font-size", "12px")
+        text.textContent = label
+        svg.appendChild(text)
+      })
+    },
+    // 绘制图例
+    drawLegend(svg, series, colors, padding) {
+      series.forEach((serie, index) => {
+        const legendX = padding.left + index * 100
+        const legendY = 20
+
+        const rect = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "rect"
+        )
+        rect.setAttribute("x", legendX)
+        rect.setAttribute("y", legendY)
+        rect.setAttribute("width", 15)
+        rect.setAttribute("height", 15)
+        rect.setAttribute(
+          "fill",
+          colors[index] || `hsl(${index * 60}, 70%, 50%)`
+        )
+        svg.appendChild(rect)
+
+        const text = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "text"
+        )
+        text.setAttribute("x", legendX + 20)
+        text.setAttribute("y", legendY + 12)
+        text.setAttribute("font-size", "12px")
+        text.textContent = serie.key
+        svg.appendChild(text)
+      })
+    },
+    // 创建SmartArt图表元素
+    createDiagramElement(element) {
+      const el = document.createElement("div")
+      el.style.position = "absolute"
+      el.style.top = element.top + "px"
+      el.style.left = element.left + "px"
+      el.style.width = element.width + "px"
+      el.style.height = element.height + "px"
+      el.style.zIndex = element.order
+      // 递归渲染SmartArt节点
+      const renderDiagramNode = (node) => {
+        const nodeEl = document.createElement("div")
+        nodeEl.style.position = "absolute"
+        nodeEl.style.left = node.left + "px"
+        nodeEl.style.top = node.top + "px"
+        nodeEl.style.width = node.width + "px"
+        nodeEl.style.height = node.height + "px"
+
+        // 设置边框
+        if (node.borderWidth > 0) {
+          nodeEl.style.border = `${node.borderWidth}px ${node.borderType} ${node.borderColor}`
+          if (
+            node.borderStrokeDasharray &&
+            node.borderStrokeDasharray !== "0"
+          ) {
+            nodeEl.style.borderStyle = "dashed"
+          }
+        }
+
+        // 设置背景填充
+        if (node.fill && node.fill.type === "color") {
+          nodeEl.style.backgroundColor = node.fill.value
+        }
+
+        // 设置内容
+        if (node.content) {
+          nodeEl.innerHTML = this.convertPtToPxInContent(node.content)
+        }
+
+        // 设置垂直对齐
+        if (node.vAlign === "mid") {
+          nodeEl.style.display = "flex"
+          nodeEl.style.alignItems = "center"
+          nodeEl.style.justifyContent = "center"
+        }
+
+        // 设置翻转
+        const transforms = []
+        if (node.isFlipV) {
+          transforms.push("scaleY(-1)")
+        }
+        if (node.isFlipH) {
+          transforms.push("scaleX(-1)")
+        }
+        if (transforms.length > 0) {
+          nodeEl.style.transform = transforms.join(" ")
+        }
+
+        return nodeEl
+      }
+
+      // 按照 order 排序元素
+      const sortedElements = [...element.elements].sort(
+        (a, b) => a.order - b.order
+      )
+
+      // 渲染所有节点
+      sortedElements.forEach((node) => {
+        const nodeEl = renderDiagramNode(node)
+        el.appendChild(nodeEl)
+      })
+
+      return el
+    },
+    // 创建数学公式元素
+    createMathElement(element) {
+      const el = document.createElement("div")
+      el.style.position = "absolute"
+      el.style.top = element.top + "px"
+      el.style.left = element.left + "px"
+      el.style.width = element.width + "px"
+      el.style.height = element.height + "px"
+
+      // 如果有公式图片，优先使用图片显示
+      if (element.picBase64) {
+        const img = document.createElement("img")
+        img.src = element.picBase64
+        img.style.width = "100%"
+        img.style.height = "100%"
+        img.style.objectFit = "contain"
+        el.appendChild(img)
+        return el
+      }
+
+      // 如果有 LaTeX 表达式，使用 MathJax 渲染
+      if (element.latex) {
+        // 创建公式容器
+        const mathContainer = document.createElement("div")
+        mathContainer.style.width = "100%"
+        mathContainer.style.height = "100%"
+        mathContainer.style.display = "flex"
+        mathContainer.style.alignItems = "center"
+        mathContainer.style.justifyContent = "center"
+
+        // 添加 LaTeX 公式
+        mathContainer.innerHTML = `\\[${element.latex}\\]`
+
+        // 如果 MathJax 不可用，显示原始 LaTeX
+        mathContainer.style.fontFamily = "monospace"
+        mathContainer.style.whiteSpace = "pre-wrap"
+        mathContainer.style.padding = "10px"
+        mathContainer.textContent = element.latex
+
+        el.appendChild(mathContainer)
+      }
+
+      return el
+    },
+    // 创建文本元素
+    createTextElement(element) {
+      const el = document.createElement("div")
+      if (element.content) {
+        // 转换内容中的pt单位为px单位
+        const convertedContent = this.convertPtToPxInContent(element.content)
+        el.innerHTML = convertedContent
+
+        // 设置文本样式
+        el.style.width = element.width + "px"
+        el.style.height = element.height + "px"
+        el.style.color = element.fontColor || "#000"
+        el.style.fontSize = element.fontSize
+        el.style.fontFamily = element.fontFamily || "Arial"
+        el.style.textAlign = element.align || "left"
+        el.style.fontWeight = element.bold ? "bold" : "normal"
+        el.style.fontStyle = element.italic ? "italic" : "normal"
+        el.style.textDecoration = element.underline ? "underline" : "none"
+        el.style.position = "absolute"
+        el.style.top = element.top + "px" || "0"
+        el.style.left = element.left + "px" || "0"
+        el.style.zIndex = element.order
+        el.style.whiteSpace = "pre-wrap"
+
+        // 添加垂直对齐支持
+        el.style.display = "flex"
+        el.style.flexDirection = "column"
+        switch (element.vAlign) {
+          case "up":
+            el.style.justifyContent = "flex-start"
+            break
+          case "mid":
+            el.style.justifyContent = "center"
+            break
+          case "down":
+            el.style.justifyContent = "flex-end"
+            break
+          default:
+            el.style.justifyContent = "flex-start"
+        }
+
+        // 设置段落间距
+        el.style.lineHeight = element.lineHeight + "px" || "1.2"
+        el.style.letterSpacing = element.charSpacing
+          ? `${element.charSpacing}px`
+          : "normal"
+      }
+      return el
+    },
+    // 调整颜色明暗度
+    adjustBrightness(color, factor) {
+      if (color === "transparent") return color
+      const hex = color.replace("#", "")
+      const r = Math.min(
+        255,
+        Math.round(parseInt(hex.substr(0, 2), 16) * factor)
+      )
+      const g = Math.min(
+        255,
+        Math.round(parseInt(hex.substr(2, 2), 16) * factor)
+      )
+      const b = Math.min(
+        255,
+        Math.round(parseInt(hex.substr(4, 2), 16) * factor)
+      )
+      return `#${r.toString(16).padStart(2, "0")}${g
+        .toString(16)
+        .padStart(2, "0")}${b.toString(16).padStart(2, "0")}`
+    },
+    convertPtToPxInContent(content) {
+      if (!content) return content
+      // 使用正则表达式查找并替换
+      return content.replace(/(\d+\.?\d*)(pt|PT)/g, (match, size) => {
+        // 将 pt 转换为 px（1pt ≈ 1.33333px）
+        const pxSize = size
+        return `${pxSize}px`
+      })
+    },
+    processElements(elements, slideIndex) {
+      if (!elements || !Array.isArray(elements)) return
+
+      // 使用 Map 存储原始顺序，避免多次排序
+      const orderMap = new Map(
+        elements.map((el, index) => [el, el.order || index])
+      )
+
+      // 一次性排序
+      elements.sort((a, b) => orderMap.get(a) - orderMap.get(b))
+
+      const processElement = (element, baseOrder) => {
+        // 设置当前元素的 order
+        element.order = baseOrder
+
+        // 如果有子元素，递归处理
+        if (element.elements?.length > 0) {
+          element.elements
+            .sort((a, b) => (a.order || 0) - (b.order || 0))
+            .forEach((child, idx) => {
+              processElement(child, baseOrder * 10 + idx + 1)
+            })
+        }
+      }
+
+      // 处理每个顶层元素
+      elements.forEach((element, index) => {
+        processElement(element, (slideIndex + 1) * 10 + index + 1)
+      })
+    },
+  },
+}
+</script>
+<style scoped lang="less">
+.pptx-container {
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+}
+</style>

src/components/view_file/vendors/pptx/index.js

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import PPT from "./PPT.vue"
+import { parse } from "./libs/pptxToJson"
+
+/**
+ * 渲染ppt
+ */
+export default async function render(buffer, target) {
+  const pptxJson = await parse(buffer)
+  const app = createApp(PPT, { pptxJson })
+  app.mount(target)
+  return {
+    $el: target,
+    $destroy() {
+      app.unmount()
+    }
+  }
+}

src/components/view_file/vendors/pptx/libs/pptxToJson/index.d.ts

@@ -0,0 +1,279 @@
+export interface Shadow {
+  h: number
+  v: number
+  blur: number
+  color: string
+}
+
+export interface ColorFill {
+  type: 'color'
+  value: string
+}
+
+export interface ImageFill {
+  type: 'image'
+  value: {
+    picBase64: string
+    opacity: number
+  }
+}
+
+export interface GradientFill {
+  type: 'gradient'
+  value: {
+    path: 'line' | 'circle' | 'rect' | 'shape'
+    rot: number
+    colors: {
+      pos: string
+      color: string
+    }[]
+  }
+}
+
+export type Fill = ColorFill | ImageFill | GradientFill
+
+export interface Border {
+  borderColor: string
+  borderWidth: number
+  borderType:'solid' | 'dashed' | 'dotted'
+}
+
+export interface Shape {
+  type: 'shape'
+  left: number
+  top: number
+  width: number
+  height: number
+  borderColor: string
+  borderWidth: number
+  borderType: 'solid' | 'dashed' | 'dotted'
+  borderStrokeDasharray: string
+  shadow?: Shadow
+  fill: Fill
+  content: string
+  isFlipV: boolean
+  isFlipH: boolean
+  rotate: number
+  shapType: string
+  vAlign: string
+  path?: string
+  name: string
+  order: number
+}
+
+export interface Text {
+  type: 'text'
+  left: number
+  top: number
+  width: number
+  height: number
+  borderColor: string
+  borderWidth: number
+  borderType: 'solid' | 'dashed' | 'dotted'
+  borderStrokeDasharray: string
+  shadow?: Shadow
+  fill: Fill
+  isFlipV: boolean
+  isFlipH: boolean
+  isVertical: boolean
+  rotate: number
+  content: string
+  vAlign: string
+  name: string
+  order: number
+}
+
+export interface Image {
+  type: 'image'
+  left: number
+  top: number
+  width: number
+  height: number
+  src: string
+  rotate: number
+  isFlipH: boolean
+  isFlipV: boolean
+  order: number
+  rect?: {
+    t?: number
+    b?: number
+    l?: number
+    r?: number
+  }
+  geom: string
+  borderColor: string
+  borderWidth: number
+  borderType: 'solid' | 'dashed' | 'dotted'
+  borderStrokeDasharray: string
+}
+
+export interface TableCell {
+  text: string
+  rowSpan?: number
+  colSpan?: number
+  vMerge?: number
+  hMerge?: number
+  fillColor?: string
+  fontColor?: string
+  fontBold?: boolean
+  borders: {
+    top?: Border
+    bottom?: Border
+    left?: Border
+    right?: Border
+  }
+}
+export interface Table {
+  type: 'table'
+  left: number
+  top: number
+  width: number
+  height: number
+  data: TableCell[][]
+  borders: {
+    top?: Border
+    bottom?: Border
+    left?: Border
+    right?: Border
+  }
+  order: number
+  rowHeights: number[]
+  colWidths: number[]
+}
+
+export type ChartType = 'lineChart' |
+  'line3DChart' |
+  'barChart' |
+  'bar3DChart' |
+  'pieChart' |
+  'pie3DChart' |
+  'doughnutChart' |
+  'areaChart' |
+  'area3DChart' |
+  'scatterChart' |
+  'bubbleChart' |
+  'radarChart' |
+  'surfaceChart' |
+  'surface3DChart' |
+  'stockChart'
+
+export interface ChartValue {
+  x: string
+  y: number
+}
+export interface ChartXLabel {
+  [key: string]: string
+}
+export interface ChartItem {
+  key: string
+  values: ChartValue[]
+  xlabels: ChartXLabel
+}
+export type ScatterChartData = [number[], number[]]
+export interface CommonChart {
+  type: 'chart'
+  left: number
+  top: number
+  width: number
+  height: number
+  data: ChartItem[]
+  colors: string[]
+  chartType: Exclude<ChartType, 'scatterChart' | 'bubbleChart'>
+  barDir?: 'bar' | 'col'
+  marker?: boolean
+  holeSize?: string
+  grouping?: string
+  style?: string
+  order: number
+}
+export interface ScatterChart {
+  type: 'chart'
+  left: number
+  top: number
+  width: number
+  height: number
+  data: ScatterChartData
+  colors: string[]
+  chartType: 'scatterChart' | 'bubbleChart'
+  order: number
+}
+export type Chart = CommonChart | ScatterChart
+
+export interface Video {
+  type: 'video'
+  left: number
+  top: number
+  width: number
+  height: number
+  blob?: string
+  src?: string
+  order: number
+}
+
+export interface Audio {
+  type: 'audio'
+  left: number
+  top: number
+  width: number
+  height: number
+  blob: string
+  order: number
+}
+
+export interface Diagram {
+  type: 'diagram'
+  left: number
+  top: number
+  width: number
+  height: number
+  elements: (Shape | Text)[]
+  order: number
+}
+
+export interface Math {
+  type: 'math'
+  left: number
+  top: number
+  width: number
+  height: number
+  latex: string
+  picBase64: string
+  order: number
+}
+
+export type BaseElement = Shape | Text | Image | Table | Chart | Video | Audio | Diagram | Math
+
+export interface Group {
+  type: 'group'
+  left: number
+  top: number
+  width: number
+  height: number
+  rotate: number
+  elements: BaseElement[]
+  order: number
+  isFlipH: boolean
+  isFlipV: boolean
+}
+export type Element = BaseElement | Group
+
+export interface Slide {
+  fill: Fill
+  elements: Element[]
+  layoutElements: Element[]
+  note: string
+}
+
+export interface Options {
+  slideFactor?: number
+  fontsizeFactor?: number
+}
+
+export const parse: (file: ArrayBuffer, options?: Options) => Promise<{
+  slides: Slide[]
+  themeColors: string[]
+  size: {
+    width: number
+    height: number
+  }
+}>

src/components/view_file/vendors/text/CodeViewer.vue

@@ -0,0 +1,28 @@
+<template>
+  <pre class="code-area">
+    {{ value }}
+  </pre>
+</template>
+
+<script setup>
+defineProps({
+  value: {
+    type: String,
+    description: '值'
+  }
+})
+</script>
+
+<style scoped>
+.code-area {
+  display: block;
+  margin: 0 auto;
+  font-size: 12px;
+  width: 1000px;
+  min-height: 500px;
+  background: #1f1f1f;
+  word-break: break-word;
+  white-space: break-spaces;
+  color: #5af117
+}
+</style>

src/components/view_file/vendors/text/index.js

@@ -0,0 +1,20 @@
+import { readText } from '../../util'
+import { createApp } from 'vue'
+import CodeViewer from './CodeViewer.vue'
+
+/**
+ * 渲染文本
+ * @param buffer 文本二进制内容
+ * @param target 目标
+ */
+export default async function renderText (buffer, target) {
+  const text = await readText(buffer)
+  const app = createApp(CodeViewer, { value: text })
+  app.mount(target)
+  return {
+    $el: target,
+    $destroy() {
+      app.unmount()
+    }
+  }
+}

src/components/view_file/vendors/xlsx/Table.vue

@@ -0,0 +1,760 @@
+<template>
+  <div>
+    <div
+      ref="spreadsheetRef"
+      class="spreadsheet-container"
+      id="spreadsheet"
+    ></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, computed } from "vue"
+import Spreadsheet from "x-data-spreadsheet"
+import { indexedColors } from "./color"
+// import zhCN from "x-data-spreadsheet/dist/locale/zh-cn"
+import _ from "lodash-es"
+import tinycolor from "tinycolor2"
+// Spreadsheet.locale("zh-cn", zhCN)
+
+// Props 定义
+const props = defineProps({
+  workbook: Object,
+})
+
+// 响应式状态
+const spreadsheet = ref(null)
+const themeColors = ref([])
+const spreadsheetRef = ref(null)
+
+// 计算属性
+const sheets = computed(() => {
+  if (props.workbook.worksheets) {
+    return props.workbook.worksheets.filter((sheet) => sheet._rows.length)
+  }
+  return []
+})
+
+// 方法
+const initSpreadsheet = () => {
+  // 优化性能配置
+  spreadsheet.value = new Spreadsheet(spreadsheetRef.value, {
+    view: {
+      height: () => document.documentElement.clientHeight - 120,
+      width: () => document.documentElement.clientWidth - 40,
+    },
+    mode: "read", // 只读模式
+    showToolbar: false,
+    showGrid: true,
+    showContextmenu: false, // 禁用右键菜单提高性能
+    multipleSheets: true,
+    rpx: 1, // 减少渲染计算
+    row: {
+      len: 100, // 限制初始行数
+      height: 25, // 固定行高
+      autoHeight: true,
+    },
+    col: {
+      len: 26, // 限制初始列数
+      width: 50, // 固定列宽
+      indexWidth: 60, // 行索引宽度
+      minWidth: 30, // 最小列宽
+      autoWidth: true, // 自动调整列宽
+    },
+    style: {
+      // 确保默认样式正确
+      bgcolor: "#ffffff",
+      color: "#333333",
+      align: "left",
+      valign: "middle",
+      textwrap: false,
+      strike: false,
+      underline: false,
+      italic: false,
+      bold: false,
+      fontSize: 12,
+    },
+  }).loadData({})
+
+  // 延迟加载数据，避免初始化时卡死
+  updateTable()
+}
+
+const updateSpreadsheet = () => {
+  if (!spreadsheet.value) return
+  // 显示加载状态
+  spreadsheetRef.value.classList.add("loading")
+  try {
+    const data = convertWorksheetToData()
+    if (spreadsheet.value) {
+      spreadsheetRef.value.innerHTML = ""
+    }
+    // 重新创建实例
+    spreadsheet.value = new Spreadsheet(spreadsheetRef.value, {
+      view: {
+        height: () => document.documentElement.clientHeight - 120,
+        width: () => document.documentElement.clientWidth - 40,
+      },
+      mode: "read",
+      showToolbar: false,
+      showGrid: true,
+      showContextmenu: false,
+      multipleSheets: true,
+      rpx: 1,
+      row: {
+        len: 100,
+        height: 25,
+        autoHeight: true,
+      },
+      col: {
+        len: 26,
+        width: 50,
+        indexWidth: 60,
+        minWidth: 30,
+        autoWidth: true,
+      },
+    }).loadData(data)
+  } finally {
+    spreadsheetRef.value.classList.remove("loading")
+  }
+}
+
+const convertWorksheetToData = () => {
+  let data = []
+  sheets.value.forEach((sheet) => {
+    const sheetIndex = sheet.id
+    const sheetData = {
+      name: sheet._name,
+      freeze: "A1",
+      styles: [
+        {
+          bgcolor: "#ffffff",
+          color: "#000000",
+          align: "left",
+          valign: "middle",
+          fontSize: 12,
+        },
+      ],
+      merges: [],
+      rows: {},
+      cols: {},
+    }
+    try {
+      // 预处理合并单元格
+      processMerges(sheet, sheetData)
+      // 预处理样式缓存，避免重复创建相同样式
+      const styleCache = new Map()
+      // 处理单元格数据
+      processRows(sheet, sheetData, styleCache)
+      // 处理列宽
+      processColumns(sheet, sheetData)
+      data.push(sheetData)
+    } catch (error) {
+      data[sheetIndex] = {
+        name: sheet._name || "Sheet1",
+        rows: {},
+        cols: {},
+      }
+    }
+  })
+  return data
+}
+
+// 处理合并单元格
+const processMerges = (sheet, sheetData) => {
+  if (!sheet._merges) return
+
+  Object.values(sheet._merges).forEach((merge) => {
+    const { top, left, bottom, right } = merge
+    sheetData.merges.push(
+      `${columnIndexToLetter(left - 1)}${top}:${columnIndexToLetter(
+        right - 1
+      )}${bottom}`
+    )
+  })
+}
+
+// 处理行和单元格数据
+const processRows = (sheet, sheetData, styleCache) => {
+  // 增加最大行数限制，确保所有行都能显示
+  const maxRows = Math.min(sheet.rowCount || 50, 100)
+
+  // 预处理所有行，确保即使空行也能被处理
+  for (let rowIndex = 0; rowIndex < maxRows; rowIndex++) {
+    const row = sheet.getRow(rowIndex + 1)
+
+    // 初始化行数据和行高
+    let maxHeight = 25 // 最小行高
+    sheetData.rows[rowIndex] = {
+      cells: {},
+      height: maxHeight,
+    }
+
+    // 如果行不存在，创建一个空行
+    if (!row || !row.cellCount) {
+      continue
+    }
+
+    // 处理行中的单元格
+    // 使用列数而不是cellCount，确保处理所有可能的单元格
+    const maxCols = Math.min(sheet.columnCount || 26, 100)
+    for (let colIndex = 0; colIndex < maxCols; colIndex++) {
+      try {
+        const cell = row.getCell(colIndex + 1)
+        if (!cell || (cell.type === "null" && !cell.style)) {
+          // 对于空单元格，添加一个默认样式的空单元格
+          sheetData.rows[rowIndex].cells[colIndex] = {
+            text: "",
+            style: 0,
+          }
+          continue
+        }
+
+        // 获取单元格文本和样式
+        const { text: cellText, height: cellHeight } =
+          getCellTextAndHeight(cell)
+        const styleIndex = getCellStyle(cell, styleCache, sheetData.styles)
+        // 更新行高
+        maxHeight = Math.max(maxHeight, cellHeight)
+
+        // 检查是否是合并单元格的起始单元格
+        const mergeInfo = Object.values(sheet._merges || {}).find(
+          (m) => m.top === row.number && m.left === colIndex + 1
+        )
+
+        // 设置单元格数据
+        if (mergeInfo) {
+          sheetData.rows[rowIndex].cells[colIndex] = {
+            text: cellText,
+            style: styleIndex,
+            merge: [
+              mergeInfo.bottom - mergeInfo.top,
+              mergeInfo.right - mergeInfo.left,
+            ],
+          }
+        } else {
+          sheetData.rows[rowIndex].cells[colIndex] = {
+            text: cellText,
+            style: styleIndex,
+          }
+        }
+      } catch (error) {
+        sheetData.rows[rowIndex].cells[colIndex] = {
+          text: "",
+          style: 0,
+        }
+      }
+    }
+
+    // 更新行高
+    sheetData.rows[rowIndex].height = maxHeight
+  }
+}
+
+// 获取单元格文本和计算高度
+const getCellTextAndHeight = (cell) => {
+  let cellText = ""
+  try {
+    // 处理不同类型的单元格内容
+    if (!cell || cell.value === null || cell.value === undefined) {
+      cellText = ""
+    } else if (
+      cell.type === "date" ||
+      (cell.numFmt &&
+        (cell.numFmt.includes("yy") ||
+          cell.numFmt.includes("mm") ||
+          cell.numFmt.includes("dd") ||
+          cell.numFmt.includes("h") ||
+          cell.numFmt.includes("m:s")))
+    ) {
+      // 处理日期类型或带有日期格式的数字
+      try {
+        // 检查是否为日期值
+        let date
+        if (cell.value instanceof Date) {
+          date = cell.value
+        } else if (typeof cell.value === "number") {
+          // Excel日期是从1900年1月1日开始的天数
+          // 需要转换为JavaScript日期
+          const excelEpoch = new Date(1899, 11, 30) // Excel的起始日期
+          date = new Date(
+            excelEpoch.getTime() + cell.value * 24 * 60 * 60 * 1000
+          )
+        } else {
+          date = new Date(cell.value)
+        }
+
+        if (!isNaN(date.getTime())) {
+          // 格式化日期
+          const year = date.getFullYear()
+          const month = (date.getMonth() + 1).toString().padStart(2, "0")
+          const day = date.getDate().toString().padStart(2, "0")
+
+          // 检查是否需要显示时间
+          if (
+            cell.numFmt &&
+            (cell.numFmt.includes("h") || cell.numFmt.includes("s"))
+          ) {
+            const hour = date.getHours().toString().padStart(2, "0")
+            const minute = date.getMinutes().toString().padStart(2, "0")
+            const second = date.getSeconds().toString().padStart(2, "0")
+            cellText = `${year}/${month}/${day} ${hour}:${minute}:${second}`
+          } else {
+            cellText = `${year}/${month}/${day}`
+          }
+        } else {
+          // 如果不是有效日期，使用原始文本
+          cellText = String(cell.text || cell.value || "")
+        }
+      } catch (e) {
+        cellText = String(cell.text || cell.value || "")
+      }
+    } else if (typeof cell.value === "object" && cell.value !== null) {
+      if (cell.value.hyperlink) {
+        cellText = "[链接]"
+      } else if (cell.value.image) {
+        cellText = "[图片]"
+      } else if (cell.value.richText) {
+        cellText = cell.value.richText
+          .map((t) => String(t?.text || ""))
+          .join("")
+      } else {
+        cellText = String(cell.text || "")
+      }
+    } else if (cell.formula) {
+      // 检查公式结果是否可能是日期
+      if (
+        cell.numFmt &&
+        (cell.numFmt.includes("yy") ||
+          cell.numFmt.includes("mm") ||
+          cell.numFmt.includes("dd"))
+      ) {
+        try {
+          // 尝试将结果转换为日期
+          const excelEpoch = new Date(1899, 11, 30)
+          const date = new Date(
+            excelEpoch.getTime() + cell.result * 24 * 60 * 60 * 1000
+          )
+
+          if (!isNaN(date.getTime())) {
+            const year = date.getFullYear()
+            const month = (date.getMonth() + 1).toString().padStart(2, "0")
+            const day = date.getDate().toString().padStart(2, "0")
+            cellText = `${year}-${month}-${day}`
+          } else {
+            cellText = String(cell.result || cell.value || "")
+          }
+        } catch (e) {
+          cellText = String(cell.result || cell.value || "")
+        }
+      } else {
+        cellText =
+          cell.result !== undefined && cell.result !== null
+            ? String(cell.result)
+            : String(cell.value || "")
+      }
+    } else {
+      cellText =
+        cell.text !== undefined && cell.text !== null
+          ? String(cell.text)
+          : cell.value !== undefined && cell.value !== null
+          ? String(cell.value)
+          : ""
+    }
+  } catch (e) {
+    cellText = "[格式错误]"
+  }
+
+  // 计算行高
+  const lineBreaks = ((cellText || "").match(/\n/g) || []).length + 1
+  const chars = [...(cellText || "")]
+  const lines = Math.ceil(chars.length / 40)
+  const neededHeight = Math.max(lineBreaks, lines) * 20
+
+  return { text: cellText, height: neededHeight }
+}
+
+// 获取单元格样式
+const getCellStyle = (cell, styleCache, styles) => {
+  // 创建样式对象
+  const cellStyle = {
+    bgcolor: "#ffffff",
+    color: "#000000",
+    align: cell.alignment?.horizontal || "left",
+    valign: cell.alignment?.vertical || "middle",
+    fontSize: cell.font?.size || 12,
+    textwrap: true,
+    bold: cell.font?.bold,
+    italic: cell.font?.italic,
+    underline: false,
+    strike: false,
+  }
+
+  // 处理背景色
+  if (cell.fill && cell.fill.type === "pattern") {
+    const fgColor = cell.fill.fgColor || {}
+    if (typeof fgColor.indexed === "number") {
+      const indexedColor = indexedColors[fgColor.indexed]
+      if (indexedColor) {
+        cellStyle.bgcolor = `#${indexedColor}`
+      }
+    }
+    // 处理主题颜色
+    else if (typeof fgColor.theme === "number") {
+      // Excel主题颜色索引映射
+      const themeColorMap = {
+        0: 1, // 浅色1
+        1: 0, // 深色1
+        2: 3, // 浅色2
+        3: 2, // 深色2
+        4: 4, // 强调色1
+        5: 5, // 强调色2
+        6: 6, // 强调色3
+        7: 7, // 强调色4
+        8: 8, // 强调色5
+        9: 9, // 强调色6
+      }
+
+      const mappedIndex =
+        themeColorMap[fgColor.theme] !== undefined
+          ? themeColorMap[fgColor.theme]
+          : fgColor.theme
+      if (themeColors.value[mappedIndex]) {
+        let color = `#${themeColors.value[mappedIndex]}`
+        // 应用色调调整
+        if (typeof fgColor.tint === "number" && fgColor.tint !== 0) {
+          color = applyTint(color, fgColor.tint)
+        }
+
+        cellStyle.bgcolor = color
+      }
+    }
+    // 处理RGB颜色
+    else if (fgColor.rgb) {
+      cellStyle.bgcolor = `#${fgColor.rgb.substring(fgColor.rgb.length - 6)}`
+    }
+    // 处理ARGB颜色
+    else if (fgColor.argb) {
+      const color = convertArgbToHex(fgColor.argb)
+      if (color) cellStyle.bgcolor = color
+    }
+  }
+
+  // 处理字体颜色
+  if (cell.font && cell.font.color) {
+    const fontColor = cell.font.color
+
+    // 处理索引颜色
+    if (typeof fontColor.indexed === "number") {
+      const indexedColor = indexedColors[fontColor.indexed]
+      if (indexedColor) {
+        cellStyle.color = `#${indexedColor}`
+      }
+    }
+    // 处理主题颜色
+    else if (typeof fontColor.theme === "number") {
+      // Excel主题颜色索引映射
+      const themeColorMap = {
+        0: 1, // 浅色1
+        1: 0, // 深色1
+        2: 3, // 浅色2
+        3: 2, // 深色2
+        4: 4, // 强调色1
+        5: 5, // 强调色2
+        6: 6, // 强调色3
+        7: 7, // 强调色4
+        8: 8, // 强调色5
+        9: 9, // 强调色6
+      }
+
+      const mappedIndex =
+        themeColorMap[fontColor.theme] !== undefined
+          ? themeColorMap[fontColor.theme]
+          : fontColor.theme
+
+      if (themeColors.value[mappedIndex]) {
+        let color = `#${themeColors.value[mappedIndex]}`
+
+        // 应用色调调整
+        if (typeof fontColor.tint === "number" && fontColor.tint !== 0) {
+          color = applyTint(color, fontColor.tint)
+        }
+
+        cellStyle.color = color
+      }
+    }
+    // 处理RGB颜色
+    else if (fontColor.rgb) {
+      cellStyle.color = `#${fontColor.rgb.substring(fontColor.rgb.length - 6)}`
+    }
+    // 处理ARGB颜色
+    else if (fontColor.argb) {
+      const color = convertArgbToHex(fontColor.argb)
+      if (color) cellStyle.color = color
+    }
+  }
+
+  // 使用样式缓存避免重复
+  const styleKey = JSON.stringify(cellStyle)
+  if (styleCache.has(styleKey)) {
+    return styleCache.get(styleKey)
+  }
+
+  // 添加新样式
+  styles.push(cellStyle)
+  const styleIndex = styles.length - 1
+  styleCache.set(styleKey, styleIndex)
+
+  return styleIndex
+}
+
+const applyTint = (hexColor, tint) => {
+  try {
+    // 将十六进制颜色转换为RGB
+    const color = tinycolor(hexColor)
+    const rgb = color.toRgb()
+
+    // 根据Excel的色调算法调整颜色
+    const adjustColor = (value, tint) => {
+      let result
+      if (tint < 0) {
+        // 负色调值，使颜色变暗
+        result = value * (1 + tint)
+      } else {
+        // 正色调值，使颜色变亮
+        result = value + (255 - value) * tint
+      }
+      return Math.max(0, Math.min(255, Math.round(result)))
+    }
+
+    // 应用色调到每个RGB通道
+    const r = adjustColor(rgb.r, tint)
+    const g = adjustColor(rgb.g, tint)
+    const b = adjustColor(rgb.b, tint)
+
+    // 返回调整后的颜色
+    return tinycolor({ r, g, b }).toHexString()
+  } catch (e) {
+    return hexColor
+  }
+}
+
+// 处理列宽
+const processColumns = (sheet, sheetData) => {
+  const maxCols = Math.min(sheet.columnCount || 26, 50)
+  const colWidthCache = new Map()
+  const mergedCols = new Set()
+  // 收集合并单元格信息
+  if (sheet._merges) {
+    Object.values(sheet._merges).forEach((merge) => {
+      // 记录被合并的列
+      for (let col = merge.left; col <= merge.right; col++) {
+        mergedCols.add(col - 1)
+      }
+    })
+  }
+  // 先收集所有单元格的文本宽度
+  sheet.eachRow((row) => {
+    for (let colIndex = 0; colIndex < maxCols; colIndex++) {
+      try {
+        const cell = row.getCell(colIndex + 1)
+        if (!cell) continue
+        // 安全获取单元格文本
+        let cellText = ""
+        try {
+          if (cell.text !== undefined && cell.text !== null) {
+            cellText = String(cell.text)
+          } else if (cell.value !== undefined && cell.value !== null) {
+            if (typeof cell.value === "object") {
+              cellText = cell.value?.richText
+                ? cell.value.richText.map((t) => String(t?.text || "")).join("")
+                : cell.value?.hyperlink
+                ? "[链接]"
+                : cell.value?.image
+                ? "[图片]"
+                : ""
+            } else {
+              cellText = String(cell.value)
+            }
+          }
+        } catch (e) {
+          cellText = ""
+        }
+        // 计算文本宽度
+        if (cellText) {
+          // 检查是否是合并单元格的一部分
+          const isMerged = Object.values(sheet._merges || {}).some(
+            (merge) =>
+              row.number >= merge.top &&
+              row.number <= merge.bottom &&
+              colIndex + 1 >= merge.left &&
+              colIndex + 1 <= merge.right
+          )
+          // 如果是合并单元格，根据合并的列数调整宽度计算
+          if (isMerged) {
+            const merge = Object.values(sheet._merges || {}).find(
+              (m) =>
+                row.number >= m.top &&
+                row.number <= m.bottom &&
+                colIndex + 1 >= m.left &&
+                colIndex + 1 <= m.right
+            )
+            if (merge && colIndex + 1 === merge.left) {
+              // 只为合并单元格的第一列计算宽度
+              const mergeWidth = merge.right - merge.left + 1
+              const textWidth = [...cellText].reduce((width, char) => {
+                return width + (/[\u4e00-\u9fa5]/.test(char) ? 2 : 1)
+              }, 0)
+              // 平均分配到每一列
+              const avgWidth = Math.ceil(textWidth / mergeWidth)
+              colWidthCache.set(
+                colIndex,
+                Math.max(colWidthCache.get(colIndex) || 0, avgWidth)
+              )
+            }
+          } else {
+            // 普通单元格
+            const textWidth = [...cellText].reduce((width, char) => {
+              return width + (/[\u4e00-\u9fa5]/.test(char) ? 2 : 1)
+            }, 0)
+            colWidthCache.set(
+              colIndex,
+              Math.max(colWidthCache.get(colIndex) || 0, textWidth)
+            )
+          }
+        }
+      } catch (e) {
+        // 忽略错误
+      }
+    }
+  })
+
+  // 设置列宽
+  for (let colIndex = 0; colIndex < maxCols; colIndex++) {
+    const width = colWidthCache.get(colIndex)
+    if (width) {
+      // 根据文本宽度计算列宽，加上一些边距
+      const colWidth = Math.min(Math.max(width * 8 + 10, 50), 300)
+      sheetData.cols[colIndex] = { width: colWidth }
+    }
+  }
+}
+
+// 将列索引转换为Excel列字母
+const columnIndexToLetter = (index) => {
+  let temp,
+    letter = ""
+  while (index >= 0) {
+    temp = index % 26
+    letter = String.fromCharCode(temp + 65) + letter
+    index = (index - temp) / 26 - 1
+  }
+  return letter
+}
+
+// 解析主题颜色
+const parseTheme = () => {
+  const theme = props.workbook._themes?.theme1
+  if (!theme) {
+    // Office默认主题颜色
+    themeColors.value = [
+      "FFFFFF", // 白色 - 浅色1
+      "000000", // 黑色 - 深色1
+      "EEECE1", // 浅灰 - 浅色2
+      "1F497D", // 深灰 - 深色2
+      "4F81BD", // 蓝色 - 强调色1
+      "C0504D", // 红色 - 强调色2
+      "9BBB59", // 绿色 - 强调色3
+      "8064A2", // 紫色 - 强调色4
+      "4BACC6", // 青色 - 强调色5
+      "F79646", // 橙色 - 强调色6
+    ]
+    return
+  }
+  try {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(theme, "text/xml")
+    // 获取颜色方案元素
+    const clrScheme = doc.getElementsByTagName("a:clrScheme")[0]
+    if (!clrScheme) {
+      throw new Error("找不到颜色方案元素")
+    }
+    // 初始化主题颜色数组
+    themeColors.value = []
+    const colorElements = Array.from(clrScheme.children)
+    // 处理每个颜色元素
+    for (const element of colorElements) {
+      let colorValue = null
+      // 查找颜色定义元素
+      const srgbClr = element.getElementsByTagName("a:srgbClr")[0]
+      const sysClr = element.getElementsByTagName("a:sysClr")[0]
+      if (srgbClr) {
+        colorValue = srgbClr.getAttribute("val")
+      } else if (sysClr) {
+        colorValue =
+          sysClr.getAttribute("lastClr") || sysClr.getAttribute("val")
+      }
+      themeColors.value.push(colorValue || "FFFFFF")
+    }
+  } catch (error) {
+    console.error("解析主题颜色出错:", error)
+    themeColors.value = [
+      "FFFFFF", // 白色 - 浅色1
+      "000000", // 黑色 - 深色1
+      "EEECE1", // 浅灰 - 浅色2
+      "1F497D", // 深灰 - 深色2
+      "4F81BD", // 蓝色 - 强调色1
+      "C0504D", // 红色 - 强调色2
+      "9BBB59", // 绿色 - 强调色3
+      "8064A2", // 紫色 - 强调色4
+      "4BACC6", // 青色 - 强调色5
+      "F79646", // 橙色 - 强调色6
+    ]
+  }
+}
+// 转换ARGB颜色到十六进制
+const convertArgbToHex = (argb) => {
+  if (!argb || argb.length < 8) return null
+  // 去掉透明度通道，只保留RGB部分
+  return `#${argb.substring(2)}`
+}
+
+// 更新表格
+const updateTable = () => {
+  parseTheme()
+  updateSpreadsheet()
+}
+
+// 生命周期钩子
+onMounted(() => {
+  initSpreadsheet()
+})
+
+// 监听属性变化
+watch(
+  () => props.workbook,
+  () => {
+    updateTable()
+  }
+)
+</script>
+
+<style>
+.spreadsheet-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.spreadsheet-container.loading::before {
+  content: "加载中...";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(255, 255, 255, 0.8);
+  padding: 10px 20px;
+  border-radius: 4px;
+  z-index: 100;
+}
+</style>

src/components/view_file/vendors/xlsx/color.js

@@ -0,0 +1,69 @@
+
+export const indexedColors = [
+  '000000',
+  'FFFFFF',
+  'FF0000',
+  '00FF00',
+  '0000FF',
+  'FFFF00',
+  'FF00FF',
+  '00FFFF',
+  '000000',
+  'FFFFFF',
+  'FF0000',
+  '00FF00',
+  '0000FF',
+  'FFFF00',
+  'FF00FF',
+  '00FFFF',
+  '800000',
+  '008000',
+  '000080',
+  '808000',
+  '800080',
+  '008080',
+  'C0C0C0',
+  '808080',
+  '9999FF',
+  '993366',
+  'FFFFCC',
+  'CCFFFF',
+  '660066',
+  'FF8080',
+  '0066CC',
+  'CCCCFF',
+  '000080',
+  'FF00FF',
+  'FFFF00',
+  '00FFFF',
+  '800080',
+  '800000',
+  '008080',
+  '0000FF',
+  '00CCFF',
+  'CCFFFF',
+  'CCFFCC',
+  'FFFF99',
+  '99CCFF',
+  'FF99CC',
+  'CC99FF',
+  'FFCC99',
+  '3366FF',
+  '33CCCC',
+  '99CC00',
+  'FFCC00',
+  'FF9900',
+  'FF6600',
+  '666699',
+  '969696',
+  '003366',
+  '339966',
+  '003300',
+  '333300',
+  '993300',
+  '993366',
+  '333399',
+  '333333',
+  'b7e0ff',
+  '00CCFF'
+]

src/components/view_file/vendors/xlsx/index.js

@@ -0,0 +1,26 @@
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-04-09 10:49:05
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-23 17:45:30
+ * @Description:
+ */
+import ExcelJS from 'exceljs'
+import { createApp } from 'vue'
+import Table from './Table.vue'
+import 'x-data-spreadsheet/dist/xspreadsheet.css'
+
+/**
+ * 渲染excel
+ */
+export default async function render (buffer, target) {
+  const workbook = await new ExcelJS.Workbook().xlsx.load(buffer)
+  const app = createApp(Table, { workbook })
+  app.mount(target)
+  return {
+    $el: target,
+    $destroy() {
+      app.unmount()
+    }
+  }
+}

src/components/view_file/vendors/xlsx/util.js

@@ -0,0 +1,49 @@
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-04-09 10:49:05
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-14 17:30:04
+ * @Description:
+ */
+// 深度扁平化routes
+export function flatten (routes) {
+  return routes.flatMap((route) =>
+    route.children ? [route, ...flatten(route.children)] : [route]
+  )
+}
+
+// 转化style对象为style字符串
+export function toStyleString (style) {
+  return [...style].map((key) => `${key}: ${style[key]}`).join(';')
+}
+
+// 修复矩阵的宽度
+export function fixMatrix (data, colLen) {
+  for (const row of data) {
+    for (let j = 0; j < colLen; j++) {
+      if (!row[j]) {
+        row[j] = ''
+      }
+    }
+  }
+  return data
+}
+
+// 首字母大写
+export function captain (str) {
+  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`
+}
+
+// 连字符转驼峰
+export function camelCase (str) {
+  return str
+    .split('-')
+    .map((part, index) => {
+      if (index !== 0) {
+        return captain(part)
+      } else {
+        return part
+      }
+    })
+    .join('')
+}

src/main.ts

@@ -2,13 +2,16 @@
  * @Author: LiZhiWei
  * @Date: 2025-04-24 15:20:36
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-24 15:24:44
+ * @LastEditTime: 2025-04-24 15:33:21
  * @Description: 
  */
 import { createApp } from 'vue'
 import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import router from './router'
 
 const app = createApp(App)
 app.use(router)
+app.use(ElementPlus)
 app.mount('#app')

src/views/index.vue

@@ -2,16 +2,279 @@
  * @Author: LiZhiWei
  * @Date: 2025-04-24 15:23:24
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-24 15:26:25
+ * @LastEditTime: 2025-04-25 09:29:37
  * @Description: 
 -->
 <template>
-  <div></div>
+  <div class="container">
+    <div class="file-input-container">
+      <div class="input-group">
+        <el-select
+          v-model="fileUrl"
+          filterable
+          allow-create
+          default-first-option
+          placeholder="请选择或输入文件预览地址"
+          class="input-field"
+        >
+          <el-option
+            v-for="item in urlOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-button type="primary" @click="loadFileFromUrl" :loading="loading"
+          >预览</el-button
+        >
+      </div>
+
+      <div class="upload-group">
+        <el-upload
+          action=""
+          :auto-upload="false"
+          :show-file-list="false"
+          :on-change="handleFileChange"
+        >
+          <el-button type="primary">选择本地文件</el-button>
+        </el-upload>
+      </div>
+    </div>
+
+    <div class="preview-container" v-if="fileData.fileBuffer">
+      <view-file :file="fileData" />
+    </div>
+    <div class="empty-tip" v-else>
+      <el-icon class="empty-icon"><document /></el-icon>
+      <p>请输入文件预览地址或上传本地文件</p>
+    </div>
+  </div>
 </template>
 
-<script setup lang='ts'>
-import { ref, reactive } from 'vue'
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue"
+import ViewFile from "@/components/view_file/index.vue"
+
+type file = {
+  filename: string
+  type: string
+  fileBuffer: ArrayBuffer | null
+}
+// 文件数据对象
+const fileData = ref<file>({
+  filename: "",
+  type: "", // 文件类型，可以是 pdf, docx, xlsx, pptx, image, text 等
+  fileBuffer: null, // 文件缓冲区，实际使用时需要从后端获取或本地读取
+})
+
+const fileUrl = ref("")
+const loading = ref(false)
+const selectedFile = ref(null)
+const urlOptions = [
+  {
+    value:
+      "https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pptx",
+    label: "PPT示例文件",
+  },
+  {
+    value:
+      "https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx",
+    label: "Word示例文件",
+  },
+  {
+    value:
+      "https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf",
+    label: "PDF示例文件",
+  },
+  {
+    value:
+      "https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx",
+    label: "Excel示例文件",
+  },
+  {
+    value:
+      "https://fastly.picsum.photos/id/641/800/600.jpg?hmac=DJCZbdxrCoJPFV0jAsSIG1Ny0oc48zL3iqeMFqtKlD4",
+    label: "图片示例文件",
+  },
+]
+
+// 从URL加载文件
+const loadFileFromUrl = async () => {
+  if (!fileUrl.value) {
+    ElMessage.warning("请输入文件预览地址")
+    return
+  }
+
+  loading.value = true
+  try {
+    const response = await fetch(fileUrl.value)
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`)
+    }
+
+    const buffer = await response.arrayBuffer()
+    const contentType = response.headers.get("content-type") || ""
+    const contentDisposition = response.headers.get("content-disposition") || ""
+
+    // 尝试从响应头获取文件名
+    let filename = ""
+    const filenameMatch = contentDisposition.match(
+      /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/
+    )
+    if (filenameMatch && filenameMatch[1]) {
+      filename = filenameMatch[1].replace(/['"]/g, "")
+    } else {
+      // 如果响应头中没有文件名，从URL中提取
+      const urlParts = fileUrl.value.split("/")
+      filename = urlParts[urlParts.length - 1].split("?")[0]
+    }
+
+    // 从文件名或内容类型确定文件类型
+    let fileType = ""
+    if (filename.includes(".")) {
+      fileType = filename.split(".").pop().toLowerCase()
+    } else if (contentType.includes("pdf")) {
+      fileType = "pdf"
+    } else if (contentType.includes("image")) {
+      fileType = contentType.split("/")[1]
+    } else if (contentType.includes("text")) {
+      fileType = "text"
+    }
+
+    fileData.value = {
+      filename: filename || "未知文件",
+      type: fileType,
+      fileBuffer: buffer,
+    }
+  } catch (error) {
+    console.error("加载文件失败:", error)
+    ElMessage.error("加载文件失败: " + error.message)
+  } finally {
+    loading.value = false
+  }
+}
+
+// 处理本地文件上传
+const handleFileChange = (file) => {
+  if (!file) return
+
+  selectedFile.value = file
+
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    const buffer = e.target.result
+    const filename = file.name
+    const fileType = filename.split(".").pop().toLowerCase()
 
+    fileData.value = {
+      filename: filename,
+      type: fileType,
+      fileBuffer: buffer,
+    }
+  }
+  reader.onerror = (e) => {
+    console.error("读取文件失败:", e)
+    ElMessage.error("读取文件失败")
+  }
+
+  reader.readAsArrayBuffer(file.raw)
+}
 </script>
-<style scoped lang='scss'>
-</style>
+
+<style scoped lang="less">
+.container {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f7fa;
+}
+
+.file-input-container {
+  margin-bottom: 20px;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  display: flex;
+  gap: 15px;
+  .input-group {
+    display: flex;
+    align-items: center;
+    .input-field {
+      margin-right: 10px;
+      width: 300px;
+    }
+  }
+
+  .upload-group {
+    display: flex;
+    align-items: center;
+
+    .file-name {
+      margin-left: 10px;
+      color: #606266;
+      font-size: 14px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 300px;
+    }
+  }
+}
+
+.preview-container {
+  flex: 1;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+
+  .file-info {
+    padding: 12px 20px;
+    border-bottom: 1px solid #ebeef5;
+    display: flex;
+    align-items: center;
+
+    .file-title {
+      font-size: 16px;
+      font-weight: 500;
+      color: #303133;
+      margin-right: 10px;
+    }
+
+    .file-type {
+      font-size: 12px;
+      color: #909399;
+      background-color: #f0f2f5;
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+  }
+}
+
+.empty-tip {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #909399;
+  font-size: 16px;
+  border: 1px dashed #d9d9d9;
+  border-radius: 8px;
+  background-color: #fff;
+
+  .empty-icon {
+    font-size: 48px;
+    margin-bottom: 16px;
+    color: #c0c4cc;
+  }
+
+  p {
+    margin: 0;
+  }
+}
+</style>

tsconfig.json

@@ -7,5 +7,10 @@
         {
             "path": "./tsconfig.node.json"
         }
-    ]
+    ],
+    "compilerOptions": {
+        "types": [
+            "element-plus/global"
+        ]
+    }
 }

vite.config.ts

@@ -1,7 +1,28 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-
-// https://vite.dev/config/
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-04-24 15:29:01
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-04-24 17:14:31
+ * @Description:
+ */
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import AutoImport from "unplugin-auto-import/vite"
+import Components from "unplugin-vue-components/vite"
+import { ElementPlusResolver } from "unplugin-vue-components/resolvers"
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
+  resolve: {
+    alias: {
+      "@": "/src",
+    },
+  },
 })