fix: 拆分

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

@@ -2,7 +2,7 @@
  * @Author: LiZhiWei
  * @Date: 2025-04-10 14:38:27
  * @LastEditors: LiZhiWei
- * @LastEditTime: 2025-04-29 14:36:20
+ * @LastEditTime: 2025-05-22 16:58:24
  * @Description:
 -->
 <template>
@@ -11,7 +11,15 @@
 
 <script setup>
 import { ref, watch, onMounted } from "vue"
-
+import { createImageElement } from "./elements/image"
+import { createVideoElement } from "./elements/video"
+import { createTextElement } from "./elements/text"
+import { createAudioElement } from "./elements/audio"
+import { createShapeElement } from "./elements/shape"
+import { createTableElement } from "./elements/table"
+import { createChartElement } from "./elements/chart"
+import { createDiagramElement } from "./elements/smartArt"
+import { createMathElement } from "./elements/math"
 const props = defineProps({
   pptxJson: Object,
 })
@@ -204,4857 +212,74 @@ const createGroupElement = (element) => {
   groupContainer.appendChild(innerContainer)
   return groupContainer
 }
+// 递归调整元素位置
+const adjustElementPosition = (element, parentElement) => {
+  // 创建深拷贝，但保留特殊属性的引用
+  const adjustedElement = JSON.parse(JSON.stringify(element))
 
-// 创建图像元素
-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)
+  // 调整位置为相对于父组合元素的位置
+  adjustedElement.top = element.top - parentElement.top
+  adjustedElement.left = element.left - parentElement.left
 
-        // 应用图案填充
-        shape.setAttribute("fill", `url(#${patternId})`)
-      } else {
-        shape.setAttribute("fill", "transparent")
-      }
-    } else {
-      shape.setAttribute("fill", "#ffffff00")
+  // 恢复特殊属性的引用
+  const specialProps = [
+    "src",
+    "blob",
+    "fill",
+    "text",
+    "path",
+    "elements",
+    "borderColor",
+    "borderWidth",
+    "borderType",
+  ]
+  specialProps.forEach((prop) => {
+    if (element[prop] !== undefined) {
+      adjustedElement[prop] = element[prop]
     }
-  }
-
-  // 根据形状类型创建不同的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 halfFrameFmlaTop = element.formulas[0].split(" ")[1]
-      const halfFrameFmlaLeft = element.formulas[1].split(" ")[1] 
-      const frameWidthTop = element.height * (halfFrameFmlaTop/100000)
-      const frameWidthLeft = element.width * (halfFrameFmlaLeft/100000)
-      // 绘制外框的左边和上边
-      outerRect2.setAttribute(
-        "d",
-        `M0,${element.height} L0,0 L${element.width},0`
-      )
-
-      // 绘制内框的左边和上边，注意起点位置调整
-      innerRect2.setAttribute(
-        "d",
-        `M${frameWidthLeft},${element.height - frameWidthLeft} ` +
-          `L${frameWidthLeft},${frameWidthTop} ` +
-          `L${element.width - frameWidthTop},${frameWidthTop}`
-      )
-
-      // 设置填充色
-      if (element.fill && element.fill.type === "color") {
-        // 创建一个填充用的路径
-        const fillPath = document.createElementNS(
-          "http://www.w3.org/2000/svg",
-          "path"
-        )
-        fillPath.setAttribute(
-          "d",
-          `M${frameWidthLeft},${frameWidthTop} ` +
-            `L${element.width - frameWidthTop},${frameWidthTop} ` +
-            `L${element.width},0 ` +
-            `L0,0 ` +
-            `L0,${element.height} ` +
-            `L${frameWidthLeft},${element.height - frameWidthLeft} 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`
-      )
+  // 如果是组合元素，递归处理其子元素
+  if (element.type === "group" && element.elements) {
+    adjustedElement.elements = element.elements.map((childElement) =>
+      adjustElementPosition(childElement, {
+        top: element.top,
+        left: element.left,
+      })
+    )
+  }
 
-      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`
-      )
+  return adjustedElement
+}
 
-      // 设置填充色
-      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
+const processElements = (elements, slideIndex) => {
+  if (!elements || !Array.isArray(elements)) return
 
-        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)
+  // 使用 Map 存储原始顺序，避免多次排序
+  const orderMap = new Map(elements.map((el, index) => [el, el.order || index]))
 
-        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)
-        }
-      }
+  // 一次性排序
+  elements.sort((a, b) => orderMap.get(a) - orderMap.get(b))
 
-      // 按正确的顺序添加面（从后到前）
-      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"
-      )
-      const fmla = element?.formulas[0].split(" ")[1]
-      innerCircle.setAttribute("cx", element.width / 2)
-      innerCircle.setAttribute("cy", element.height / 2)
-      innerCircle.setAttribute(
-        "r",
-        (Math.min(element.width, element.height) / 2) *
-          (1 - Math.sqrt(fmla / 100000) / 2)
-      )
-
-      // 设置填充色
-      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) => {
-  // 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":
-      // 绘制柱状图
-      drawBarChart(svg, element, {
-        padding,
-        chartWidth,
-        chartHeight,
-        barDir: element.barDir || "col",
-        grouping: element.grouping || "clustered",
-      })
-      break
-    case "pieChart":
-    case "doughnutChart":
-      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
-}
-
-// 创建图表元素
-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
-}
-
-/**
- * 绘制甜甜圈图表
- * @param {SVGElement} svg - SVG容器元素
- * @param {Object} element - 图表配置对象
- * @param {number} chartWidth - 图表宽度
- * @param {number} chartHeight - 图表高度
- */
-const drawDonutChart = (svg, element, chartWidth, chartHeight) => {
-  // 数据验证
-  if (!element?.data?.[0]?.values) return
-
-  const series = element.data[0]
-  const values = series.values.map((v) => Number(v.y) || 0)
-  const total = values.reduce((sum, v) => sum + v, 0)
-  if (total === 0) return
-
-  // 基础配置
-  const cx = chartWidth / 2
-  const cy = chartHeight / 2
-  // 保持较大的外半径
-  const outerR = (Math.min(chartWidth, chartHeight) / 2) * 0.98
-
-  // 处理空心大小
-  const holeSize = element.holeSize ? parseInt(element.holeSize) : 50
-  const innerR = outerR * (holeSize / 100)
-
-  // 默认颜色和自定义颜色处理
-  const defaultColors = [
-    "#4e79a7",
-    "#f28e2b",
-    "#e15759",
-    "#76b7b2",
-    "#59a14f",
-    "#edc949",
-    "#af7aa1",
-    "#ff9da7",
-  ]
-  const colors =
-    element.colors?.map(
-      (color, i) => color || defaultColors[i % defaultColors.length]
-    ) || defaultColors
-
-  // 标签数据
-  const labels = series.xlabels || {}
-
-  // 创建图表组
-  const chartGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")
-  chartGroup.setAttribute("transform", `translate(${cx},${cy})`)
-
-  // 绘制扇形
-  let startAngle = -Math.PI / 2 // 从顶部开始绘制
-  values.forEach((value, index) => {
-    if (value <= 0) return
-
-    const percentage = value / total
-    const angle = percentage * Math.PI * 2
-    const endAngle = startAngle + angle
-
-    // 计算路径点 (相对于组中心 0,0)
-    const x1 = outerR * Math.cos(startAngle)
-    const y1 = outerR * Math.sin(startAngle)
-    const x2 = outerR * Math.cos(endAngle)
-    const y2 = outerR * Math.sin(endAngle)
-    const x3 = innerR * Math.cos(endAngle)
-    const y3 = innerR * Math.sin(endAngle)
-    const x4 = innerR * Math.cos(startAngle)
-    const y4 = innerR * Math.sin(startAngle)
-
-    // 构建路径
-    const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
-    const largeArc = angle > Math.PI ? 1 : 0
-    const d = [
-      `M ${x1} ${y1}`,
-      `A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2}`,
-      `L ${x3} ${y3}`,
-      `A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4}`,
-      "Z",
-    ].join(" ")
-
-    path.setAttribute("d", d)
-    path.setAttribute("fill", colors[index % colors.length]) // 确保颜色循环使用
-
-    // 添加交互效果
-    path.style.transition = "transform 0.2s"
-    path.addEventListener("mouseover", () => {
-      path.style.transform = "scale(1.03)"
-    })
-    path.addEventListener("mouseout", () => {
-      path.style.transform = "scale(1)"
-    })
-
-    chartGroup.appendChild(path)
-
-    // 添加标签
-    const midAngle = startAngle + angle / 2
-    const labelR = outerR * 1.1
-    const labelX = labelR * Math.cos(midAngle)
-    const labelY = labelR * Math.sin(midAngle)
-
-    const text = document.createElementNS("http://www.w3.org/2000/svg", "text")
-    text.setAttribute("x", labelX)
-    text.setAttribute("y", labelY)
-    text.setAttribute("text-anchor", labelX < 0 ? "end" : "start")
-    text.setAttribute("dominant-baseline", "middle")
-    text.setAttribute("fill", "#555")
-    text.setAttribute("font-size", "9")
-    text.setAttribute("font-weight", "normal")
-    const tspanLabel = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "tspan"
-    )
-    tspanLabel.setAttribute("x", labelX)
-    tspanLabel.textContent = labels[index] || `类别 ${index + 1}`
-    text.appendChild(tspanLabel)
-    const tspanPercent = document.createElementNS(
-      "http://www.w3.org/2000/svg",
-      "tspan"
-    )
-    tspanPercent.setAttribute("x", labelX)
-    tspanPercent.setAttribute("dy", "1.2em")
-    tspanPercent.textContent = `${(percentage * 100).toFixed(1)}%`
-    text.appendChild(tspanPercent)
-
-    chartGroup.appendChild(text)
-
-    startAngle = endAngle
-  })
-
-  svg.appendChild(chartGroup)
-  const padding = 50
-  svg.setAttribute(
-    "viewBox",
-    `${-cx / 2} ${-cy / 2} ${chartWidth + padding * 2} ${
-      chartHeight + padding * 2
-    }`
-  )
-  svg.style.overflow = "visible"
-}
-
-const 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)
-  })
-}
-
-// 绘制网格线
-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
+  const processElement = (element, baseOrder) => {
+    // 设置当前元素的 order
+    element.order = baseOrder
 
     // 如果有子元素，递归处理
-    if (element.elements?.length > 0) {
+    if (element.elements && element.elements.length > 0) {
       element.elements
-        .sort((a, b) => (a.order || 0) - (b.order || 0))
+        .sort((a, b) => {
+          return (a.order || 0) - (b.order || 0)
+        })
         .forEach((child, idx) => {
-          processElement(child, baseOrder * 10 + idx + 1)
+          processElement(child, baseOrder + idx + 2)
         })
     }
   }
 
   // 处理每个顶层元素
   elements.forEach((element, index) => {
-    processElement(element, (slideIndex + 1) * 10 + index + 1)
+    processElement(element, slideIndex + index + 2)
   })
 }
 

src/components/view_file/vendors/pptx/elements/audio.js

@@ -0,0 +1,18 @@
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-05-14 15:22:27
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-05-14 15:22:38
+ * @Description:
+ */
+export function 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
+}

src/components/view_file/vendors/pptx/elements/chart.js

@@ -0,0 +1,294 @@
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-05-14 15:46:50
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-05-14 15:50:02
+ * @Description:
+ */
+// 创建图表元素
+export function 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':
+      // 绘制柱状图
+      drawBarChart(svg, element, {
+        padding,
+        chartWidth,
+        chartHeight,
+        barDir: element.barDir || 'col',
+        grouping: element.grouping || 'clustered'
+      })
+      break
+    case 'pieChart':
+    case 'doughnutChart':
+      drawDonutChart(svg, element, chartWidth, chartHeight)
+      break
+    default:
+      console.warn('Unsupported chart type:', element.chartType)
+  }
+
+  el.appendChild(svg)
+  return el
+}
+
+export function 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
+  })
+}
+// 绘制柱状图
+export function 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)
+  })
+}

src/components/view_file/vendors/pptx/elements/image.js

@@ -0,0 +1,13 @@
+export function 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
+}

src/components/view_file/vendors/pptx/elements/math.js

@@ -0,0 +1,51 @@
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-05-14 15:52:16
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-05-14 15:52:19
+ * @Description:
+ */
+// 创建数学公式元素
+export function 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
+}

src/components/view_file/vendors/pptx/elements/shape.js

@@ -0,0 +1,3810 @@
+import { adjustBrightness, convertPtToPxInContent } from "../utils/style"
+export function 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 halfFrameFmlaTop = element.formulas ? element?.formulas[0].split(" ")[1] : 0
+      const halfFrameFmlaLeft = element.formulas ? element?.formulas[1].split(" ")[1] : 0
+      const frameWidthTop = element.height * (halfFrameFmlaTop / 100000)
+      const frameWidthLeft = element.width * (halfFrameFmlaLeft / 100000)
+      // 绘制外框的左边和上边
+      outerRect2.setAttribute(
+        "d",
+        `M0,${element.height} L0,0 L${element.width},0`
+      )
+
+      // 绘制内框的左边和上边，注意起点位置调整
+      innerRect2.setAttribute(
+        "d",
+        `M${frameWidthLeft},${element.height - frameWidthLeft} ` +
+          `L${frameWidthLeft},${frameWidthTop} ` +
+          `L${element.width - frameWidthTop},${frameWidthTop}`
+      )
+
+      // 设置填充色
+      if (element.fill && element.fill.type === "color") {
+        // 创建一个填充用的路径
+        const fillPath = document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "path"
+        )
+        fillPath.setAttribute(
+          "d",
+          `M${frameWidthLeft},${frameWidthTop} ` +
+            `L${element.width - frameWidthTop},${frameWidthTop} ` +
+            `L${element.width},0 ` +
+            `L0,0 ` +
+            `L0,${element.height} ` +
+            `L${frameWidthLeft},${element.height - frameWidthLeft} 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":
+    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"
+      )
+      const fmla = element?.formulas[0].split(" ")[1]
+      innerCircle.setAttribute("cx", element.width / 2)
+      innerCircle.setAttribute("cy", element.height / 2)
+      innerCircle.setAttribute(
+        "r",
+        (Math.min(element.width, element.height) / 2) *
+          (1 - Math.sqrt(fmla / 100000) / 2)
+      )
+
+      // 设置填充色
+      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 blockArcFmlaInnerR = element.formulas
+        ? Math.sqrt(element.formulas[2].split(" ")[1] / 100000) / 2
+        : 0.5
+      const innerRx = rx * (1 - blockArcFmlaInnerR)
+      const innerRy = ry * (1 - blockArcFmlaInnerR)
+      //   const angle = element.formulas ? element.formulas[1].split(" ")[1]/(100000*360) : 0.5
+      // 构建路径
+      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
+}

src/components/view_file/vendors/pptx/elements/smartArt.js

@@ -0,0 +1,76 @@
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-05-14 15:51:28
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-05-14 15:59:07
+ * @Description:
+ */
+import { convertPtToPxInContent } from '../utils/style'
+export function 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
+}

src/components/view_file/vendors/pptx/elements/table.js

@@ -0,0 +1,136 @@
+import { convertPtToPxInContent } from '../utils/style'
+export function 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
+}

src/components/view_file/vendors/pptx/elements/text.js

@@ -0,0 +1,55 @@
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-05-14 15:14:03
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-05-14 15:59:19
+ * @Description:
+ */
+import { convertPtToPxInContent } from '../utils/style'
+// 创建文本元素
+export function 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
+}

src/components/view_file/vendors/pptx/elements/video.js

@@ -0,0 +1,12 @@
+export function 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
+}

src/components/view_file/vendors/pptx/utils/style.js

@@ -0,0 +1,27 @@
+/*
+ * @Author: LiZhiWei
+ * @Date: 2025-05-14 15:53:57
+ * @LastEditors: LiZhiWei
+ * @LastEditTime: 2025-05-14 15:53:59
+ * @Description:
+ */
+export function 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')}`
+}
+
+export function 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`
+  })
+}