wisdomcity-office/src/components/view_file/vendors/pptx/PPT.vue

<!--
 * @Author: LiZhiWei
 * @Date: 2025-04-10 14:38:27
 * @LastEditors: LiZhiWei
 * @LastEditTime: 2025-04-29 10:32:14
 * @Description:
-->
<template>
  <div id="pptx-container" ref="pptxContainer" class="pptx-container"></div>
</template>
<script>
export default {
  name: "PPT",
  props: {
    pptxJson: Object,
  },
  data() {
    return {}
  },
  mounted() {
    this.renderSlides()
  },
  computed: {},
  watch: {
    pptxJson: {
      handler() {
        this.renderSlides()
      },
      deep: true,
    },
  },
  methods: {
    renderSlides() {
      if (!this.$refs.pptxContainer || !this.pptxJson) return

      this.$refs.pptxContainer.innerHTML = ""
      const { size, slides } = this.pptxJson

      slides.forEach((slide, index) => {
        const slideElement = this.createSlideElement(size.width, size.height)
        this.applySlideBackground(slideElement, slide.fill)
        if (slide.layoutElements && Array.isArray(slide.layoutElements)) {
          this.processElements(slide.layoutElements, index + 1)
          slide.layoutElements.forEach((element) => {
            const el = this.createElementByType(element)
            if (!el) return
            slideElement.appendChild(el)
          })
        }

        // 渲染幻灯片元素
        if (slide.elements && Array.isArray(slide.elements)) {
          this.processElements(slide.elements, index + 1)
          slide.elements.forEach((element) => {
            const el = this.createElementByType(element)
            if (!el) return
            slideElement.appendChild(el)
          })
        }

        // 添加幻灯片到容器
        this.$refs.pptxContainer.appendChild(slideElement)
      })
      // 为所有p标签应用样式
      const pTags = this.$refs.pptxContainer.querySelectorAll("p")
      pTags.forEach((p) => {
        p.style.margin = "0px"
        p.style.padding = "0px"
        p.style.wordBreak = "break-word"
        p.style.lineHeight = "1"
      })
      const ulTags = this.$refs.pptxContainer.querySelectorAll("ul")
      ulTags.forEach((ul) => {
        ul.style.wordBreak = "break-word"
        ul.style.lineHeight = "1"
        ul.style.padding = "auto 0px"
        ul.style.margin = "0px"
      })
      const olTags = this.$refs.pptxContainer.querySelectorAll("ol")
      olTags.forEach((ol) => {
        ol.style.margin = "0px"
        ol.style.padding = "auto 0px"
        ol.style.wordBreak = "break-word"
        ol.style.lineHeight = "1"
      })
    },
    // 创建幻灯片元素
    createSlideElement(width, height) {
      const slideElement = document.createElement("div")
      slideElement.className = "slide"
      slideElement.style.position = "relative"
      slideElement.style.width = width + "px"
      slideElement.style.height = height + "px"
      slideElement.style.border = "1px solid #ccc"
      slideElement.style.margin = "0px auto"
      slideElement.style.marginBottom = "20px"
      slideElement.style.overflow = "hidden"
      return slideElement
    },

    // 应用幻灯片背景
    applySlideBackground(slideElement, fill) {
      if (!fill) return

      if (fill.type === "gradient") {
        const { colors, path, rot } = fill.value

        if (colors && colors.length >= 2) {
          const gradientType = path === "rect" ? "linear" : "radial"
          const gradientAngle =
            gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0

          let gradientString = `${gradientType}-gradient(`
          if (gradientType === "linear") {
            gradientString += `${gradientAngle}deg, `
          }

          colors.forEach((color, i) => {
            gradientString += `${color.color} ${color.pos}${
              i < colors.length - 1 ? ", " : ""
            }`
          })

          gradientString += ")"
          slideElement.style.background = gradientString
        }
      } else if (fill.type === "color") {
        slideElement.style.backgroundColor = fill.value || "#FFFFFF"
      } else if (fill.type === "image" && fill.value.picBase64) {
        // 设置背景图片
        slideElement.style.backgroundImage = `url(${fill.value.picBase64})`
        slideElement.style.backgroundSize = "cover"
        slideElement.style.backgroundPosition = "center"
        slideElement.style.backgroundRepeat = "no-repeat"

        // 如果有背景图片的混合模式
        if (fill.value.blendMode) {
          slideElement.style.backgroundBlendMode = fill.value.blendMode
        }

        // 如果有透明度设置
        if (fill.value.opacity !== undefined) {
          slideElement.style.opacity = fill.value.opacity
        }
      }
    },

    // 根据元素类型创建DOM元素
    createElementByType(element) {
      switch (element.type) {
        case "image":
          return this.createImageElement(element)
        case "video":
          return this.createVideoElement(element)
        case "audio":
          return this.createAudioElement(element)
        case "shape":
          return this.createShapeElement(element)
        case "table":
          return this.createTableElement(element)
        case "chart":
          return this.createChartElement(element)
        case "diagram":
          return this.createDiagramElement(element)
        case "math":
          return this.createMathElement(element)
        case "group":
          return this.createGroupElement(element)
        default:
          return this.createTextElement(element)
      }
    },
    createGroupElement(element) {
      // 创建组合容器
      const groupContainer = document.createElement("div")
      groupContainer.className = "group-element"
      groupContainer.style.position = "absolute"
      groupContainer.style.top = element.top + "px"
      groupContainer.style.left = element.left + "px"
      groupContainer.style.width = element.width + "px"
      groupContainer.style.height = element.height + "px"
      groupContainer.style.zIndex = element.order
      groupContainer.style.transformOrigin = "center center"

      // 创建内部容器来处理子元素
      const innerContainer = document.createElement("div")
      innerContainer.style.position = "relative"
      innerContainer.style.width = "100%"
      innerContainer.style.height = "100%"

      // 应用旋转变换
      if (element.rotate) {
        groupContainer.style.transform = `rotate(${element.rotate}deg)`
      }

      // 应用其他样式属性
      if (element.opacity !== undefined) {
        groupContainer.style.opacity = element.opacity
      }

      // 递归渲染组内的所有子元素
      if (element.elements && Array.isArray(element.elements)) {
        element.elements.forEach((childElement) => {
          const childCopy = JSON.parse(JSON.stringify(childElement))
          const childEl = this.createElementByType(childCopy)
          if (childEl) {
            innerContainer.appendChild(childEl)
          }
        })
      }

      groupContainer.appendChild(innerContainer)
      return groupContainer
    },
    // 递归调整元素位置
    adjustElementPosition(element, parentElement) {
      // 创建深拷贝，但保留特殊属性的引用
      const adjustedElement = JSON.parse(JSON.stringify(element))

      // 调整位置为相对于父组合元素的位置
      adjustedElement.top = element.top - parentElement.top
      adjustedElement.left = element.left - parentElement.left

      // 恢复特殊属性的引用
      const specialProps = [
        "src",
        "blob",
        "fill",
        "text",
        "path",
        "elements",
        "borderColor",
        "borderWidth",
        "borderType",
      ]
      specialProps.forEach((prop) => {
        if (element[prop] !== undefined) {
          adjustedElement[prop] = element[prop]
        }
      })

      // 如果是组合元素，递归处理其子元素
      if (element.type === "group" && element.elements) {
        adjustedElement.elements = element.elements.map((childElement) =>
          this.adjustElementPosition(childElement, {
            top: element.top,
            left: element.left,
          })
        )
      }

      return adjustedElement
    },
    // 创建图像元素
    createImageElement(element) {
      const img = document.createElement("img")
      img.src = element.src
      img.style.width = element.width + "px"
      img.style.height = element.height + "px"
      img.style.objectFit = "cover" // 保持图像的宽高比并填充容器
      img.style.position = "absolute"
      img.style.top = `${element.top}px`
      img.style.left = `${element.left}px`
      img.style.zIndex = element.order

      return img
    },

    // 创建视频元素
    createVideoElement(element) {
      const el = document.createElement("video")
      el.src = element.blob
      el.controls = true
      el.style.width = element.width + "px"
      el.style.height = element.height + "px"
      el.style.position = "absolute"
      el.style.top = element.top + "px"
      el.style.left = element.left + "px"
      el.style.zIndex = element.order
      return el
    },

    // 创建音频元素
    createAudioElement(element) {
      const el = document.createElement("audio")
      el.src = element.blob
      el.controls = true
      el.style.height = element.height + "px"
      el.style.position = "absolute"
      el.style.top = element.top + "px"
      el.style.left = element.left + "px"
      el.style.zIndex = element.order
      return el
    },

    // 创建形状元素
    createShapeElement(element) {
      const el = document.createElement("div")
      el.style.position = "absolute"
      el.style.top = element.top + "px"
      el.style.left = element.left + "px"
      el.style.width = element.width + "px"
      el.style.height = element.height + "px"
      el.style.zIndex = element.order
      el.style.overflow = "visible"
      if (element.height === 0) {
        // 如果高度为0，直接在div上绘制边框
        el.style.borderTop = `${element.borderWidth || 1}px ${
          element.borderType || "solid"
        } ${element.borderColor || "#000"}`
      }
      // 使用SVG绘制形状
      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
      svg.setAttribute("width", "100%")
      svg.setAttribute("height", "100%")
      svg.setAttribute("viewBox", `0 0 ${element.width} ${element.height}`)
      svg.style.overflow = "visible"
      const setBackground = (element, shape) => {
        if (element.fill && element.fill.type) {
          // 设置填充色
          if (element.fill.type === "color") {
            shape.setAttribute("fill", element.fill.value || "transparent")
          } else if (element.fill.type === "gradient") {
            // 渐变填充
            const { colors, path, rot } = element.fill.value

            if (colors && colors.length >= 2) {
              const gradientType = path === "rect" ? "linear" : "radial"
              const gradientAngle =
                gradientType === "linear" ? (90 - (rot || 0)) % 360 : rot || 0

              let gradientString = `${gradientType}-gradient(`
              if (gradientType === "linear") {
                gradientString += `${gradientAngle}deg, `
              }

              colors.forEach((color, i) => {
                gradientString += `${color.color} ${color.pos}${
                  i < colors.length - 1 ? ", " : ""
                }`
              })
              gradientString += ")"

              // 创建渐变定义
              const gradientDef = document.createElementNS(
                "http://www.w3.org/2000/svg",
                "defs"
              )
              const gradientEl = document.createElementNS(
                "http://www.w3.org/2000/svg",
                gradientType === "linear" ? "linearGradient" : "radialGradient"
              )
              const gradientId = `gradient-${Date.now()}-${Math.random()
                .toString(36)
                .substr(2, 9)}`
              gradientEl.setAttribute("id", gradientId)

              // 设置渐变属性
              if (gradientType === "linear") {
                gradientEl.setAttribute(
                  "gradientTransform",
                  `rotate(${gradientAngle})`
                )
              }

              // 添加渐变色标
              colors.forEach((color) => {
                const stop = document.createElementNS(
                  "http://www.w3.org/2000/svg",
                  "stop"
                )
                stop.setAttribute("offset", color.pos)
                stop.setAttribute("stop-color", color.color)
                gradientEl.appendChild(stop)
              })

              gradientDef.appendChild(gradientEl)
              svg.appendChild(gradientDef)

              // 应用渐变
              shape.setAttribute("fill", `url(#${gradientId})`)
            }
          } else if (element.fill.type === "image") {
            // 创建图案填充
            const pattern = document.createElementNS(
              "http://www.w3.org/2000/svg",
              "pattern"
            )
            const patternId = `pattern-${Date.now()}-${Math.random()
              .toString(36)
              .substr(2, 9)}`
            pattern.setAttribute("id", patternId)
            pattern.setAttribute("patternUnits", "userSpaceOnUse")
            pattern.setAttribute("width", "100%")
            pattern.setAttribute("height", "100%")

            // 创建图片元素
            const image = document.createElementNS(
              "http://www.w3.org/2000/svg",
              "image"
            )
            image.setAttribute("width", "100%")
            image.setAttribute("height", "100%")
            image.setAttribute("preserveAspectRatio", "xMidYMid slice")
            image.setAttributeNS(
              "http://www.w3.org/1999/xlink",
              "href",
              element.fill.value.picBase64
            )

            pattern.appendChild(image)

            // 添加pattern到defs
            const defs = document.createElementNS(
              "http://www.w3.org/2000/svg",
              "defs"
            )
            defs.appendChild(pattern)
            svg.appendChild(defs)

            // 应用图案填充
            shape.setAttribute("fill", `url(#${patternId})`)
          } else {
            shape.setAttribute("fill", "transparent")
          }
        } else {
          shape.setAttribute("fill", "#ffffff00")
        }
      }
      // 根据形状类型创建不同的SVG元素
      switch (element.shapType) {
        case "roundRect":
          const radius = Math.min(element.width, element.height) * 0.1
          const roundRect = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "rect"
          )
          roundRect.setAttribute("x", 0)
          roundRect.setAttribute("y", 0)
          roundRect.setAttribute("width", element.width)
          roundRect.setAttribute("height", element.height)
          roundRect.setAttribute("rx", radius)
          roundRect.setAttribute("ry", radius)

          // 设置填充色
          setBackground(element, roundRect)
          // 设置边框
          if (element.borderWidth > 0) {
            roundRect.setAttribute("stroke", element.borderColor || "#000")
            roundRect.setAttribute("stroke-width", element.borderWidth || 1)
            roundRect.setAttribute("stroke-linejoin", "round") // 设置连接处为圆角
            roundRect.setAttribute("vector-effect", "non-scaling-stroke") // 防止边框宽度变形
            roundRect.setAttribute("shape-rendering", "geometricPrecision") // 提高渲染精度
            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                roundRect.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                roundRect.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                roundRect.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(roundRect)
          break
        case "snip1Rect":
          // 使用path元素绘制剪去单角的矩形
          const snip1Rect = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )

          // 计算剪角的大小，通常为矩形较短边的20%
          const snipSize = Math.min(element.width, element.height) * 0.35

          // 绘制路径：从左上角开始，顺时针方向，右上角被剪去
          snip1Rect.setAttribute(
            "d",
            `M0,0 ` +
              `L${element.width - snipSize},0 ` +
              `L${element.width},${snipSize} ` +
              `L${element.width},${element.height} ` +
              `L0,${element.height} ` +
              `Z`
          )

          // 设置填充色
          setBackground(element, snip1Rect)
          // 设置边框
          if (element.borderWidth > 0) {
            snip1Rect.setAttribute("stroke", element.borderColor || "#000")
            snip1Rect.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                snip1Rect.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                snip1Rect.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                snip1Rect.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }
          svg.appendChild(snip1Rect)
          break
        case "snip2SameRect":
          // 使用path元素绘制剪去四个角的矩形
          const snip2SameRect = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )

          // 计算剪角的大小，通常为矩形较短边的20%
          const snip2Size = Math.min(element.width, element.height) * 0.35

          // 绘制路径：从左上角开始，顺时针方向，剪去四个角
          snip2SameRect.setAttribute(
            "d",
            `M${snip2Size},0 ` +
              `L${element.width - snip2Size},0 ` +
              `L${element.width},${snip2Size} ` +
              `L${element.width},${element.height - snip2Size} ` +
              `L${element.width - snip2Size},${element.height} ` +
              `L${snip2Size},${element.height} ` +
              `L0,${element.height - snip2Size} ` +
              `L0,${snip2Size} ` +
              `Z`
          )

          // 设置填充色
          setBackground(element, snip2SameRect)

          // 设置边框
          if (element.borderWidth > 0) {
            snip2SameRect.setAttribute("stroke", element.borderColor || "#000")
            snip2SameRect.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                snip2SameRect.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                snip2SameRect.setAttribute("stroke-dasharray", "2, 2")
                snip2SameRect.setAttribute("stroke-linecap", "round")
              } else if (element.borderType === "dashed") {
                snip2SameRect.setAttribute("stroke-dasharray", "6, 3")
              }
            }

            // 添加这些属性以确保边框正确渲染
            snip2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
            snip2SameRect.setAttribute("shape-rendering", "geometricPrecision")
          }

          svg.appendChild(snip2SameRect)
          break
        case "line":
          // 创建直线连接符
          const line = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "line"
          )
          // 设置SVG的最小高度为1px
          const svgHeight = element.height > 0 ? element.height : 1
          svg.setAttribute("height", svgHeight + "px")

          // 设置线条的起点和终点
          line.setAttribute("x1", 0)
          line.setAttribute("y1", 0)
          line.setAttribute("x2", element.width)
          line.setAttribute("y2", svgHeight)

          // 确保边框颜色和宽度被正确设置
          line.setAttribute("stroke", element.borderColor || "#000")
          line.setAttribute("stroke-width", element.borderWidth || 1)

          // 处理虚线样式
          if (
            element.borderType === "dotted" ||
            element.borderType === "dashed"
          ) {
            if (element.borderStrokeDasharray) {
              line.setAttribute(
                "stroke-dasharray",
                element.borderStrokeDasharray
              )
            } else if (element.borderType === "dotted") {
              line.setAttribute("stroke-dasharray", "2, 2")
              line.setAttribute("stroke-linecap", "round") // 添加圆角端点使点线更明显
            } else if (element.borderType === "dashed") {
              line.setAttribute("stroke-dasharray", "6, 3")
            }
          }

          // 确保线条正确渲染
          line.setAttribute("vector-effect", "non-scaling-stroke") // 防止缩放影响线条宽度
          svg.appendChild(line)
          break
        case "snip2DiagRect":
          // 使用path元素绘制剪去右上角和左下角的矩形
          const snip2DiagRect = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )

          // 计算剪角的大小，通常为矩形较短边的35%
          const snipDiagSize = Math.min(element.width, element.height) * 0.35

          // 绘制路径：从左上角开始，顺时针方向，右上角和左下角被剪去
          snip2DiagRect.setAttribute(
            "d",
            `M0,0 ` +
              `L${element.width - snipDiagSize},0 ` +
              `L${element.width},${snipDiagSize} ` +
              `L${element.width},${element.height} ` +
              `L${snipDiagSize},${element.height} ` +
              `L0,${element.height - snipDiagSize} ` +
              `Z`
          )

          // 设置填充色
          setBackground(element, snip2DiagRect)

          // 设置边框
          if (element.borderWidth > 0) {
            snip2DiagRect.setAttribute("stroke", element.borderColor || "#000")
            snip2DiagRect.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                snip2DiagRect.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                snip2DiagRect.setAttribute("stroke-dasharray", "2, 2")
                snip2DiagRect.setAttribute("stroke-linecap", "round")
              } else if (element.borderType === "dashed") {
                snip2DiagRect.setAttribute("stroke-dasharray", "6, 3")
              }
            }

            // 添加这些属性以确保边框正确渲染
            snip2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
            snip2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
          }

          svg.appendChild(snip2DiagRect)
          break
        case "snipRoundRect":
          const snipRoundRect = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          // 计算剪切大小和圆角大小
          const snipSize2 = Math.min(element.width, element.height) * 0.4
          const roundSize = Math.min(element.width, element.height) * 0.5

          // 绘制路径：从左上角开始，顺时针方向，左上为圆角，右上为剪切角
          snipRoundRect.setAttribute(
            "d",
            `M${roundSize},0 ` +
              `L${element.width - snipSize2},0 ` +
              `L${element.width},${snipSize2} ` +
              `L${element.width},${element.height} ` +
              `L0,${element.height} ` +
              `L0,${roundSize} ` +
              `A${roundSize},${roundSize} 0 0,1 ${roundSize},0 ` +
              `Z`
          )

          // 设置填充色
          setBackground(element, snipRoundRect)

          // 设置边框
          if (element.borderWidth > 0) {
            snipRoundRect.setAttribute("stroke", element.borderColor || "#000")
            snipRoundRect.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                snipRoundRect.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                snipRoundRect.setAttribute("stroke-dasharray", "2, 2")
                snipRoundRect.setAttribute("stroke-linecap", "round")
              } else if (element.borderType === "dashed") {
                snipRoundRect.setAttribute("stroke-dasharray", "6, 3")
              }
            }

            snipRoundRect.setAttribute("vector-effect", "non-scaling-stroke")
            snipRoundRect.setAttribute("shape-rendering", "geometricPrecision")
          }

          svg.appendChild(snipRoundRect)
          break
        case "round1Rect":
          const round1Rect = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          // 计算圆角大小
          const round1Size = Math.min(element.width, element.height) * 0.5

          // 绘制路径：从左上角开始，顺时针方向，右上角为圆角
          round1Rect.setAttribute(
            "d",
            `M0,0 ` +
              `L${element.width - round1Size},0 ` +
              `Q${element.width},0 ${element.width},${round1Size} ` +
              `L${element.width},${element.height} ` +
              `L0,${element.height} ` +
              `Z`
          )

          // 设置填充色
          setBackground(element, round1Rect)

          // 设置边框
          if (element.borderWidth > 0) {
            round1Rect.setAttribute("stroke", element.borderColor || "#000")
            round1Rect.setAttribute("stroke-width", element.borderWidth || 1)
            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                round1Rect.setAttribute("stroke-dasharray", "40,15,5,15")
              } else if (element.borderType === "dotted") {
                round1Rect.setAttribute("stroke-dasharray", "2, 2")
                round1Rect.setAttribute("stroke-linecap", "round")
              } else if (element.borderType === "dashed") {
                round1Rect.setAttribute("stroke-dasharray", "6, 3")
              }
            }

            round1Rect.setAttribute("vector-effect", "non-scaling-stroke")
            round1Rect.setAttribute("shape-rendering", "geometricPrecision")
          }

          svg.appendChild(round1Rect)
          break
        case "ellipse":
        case "circle":
          const ellipse = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "ellipse"
          )
          ellipse.setAttribute("cx", element.width / 2)
          ellipse.setAttribute("cy", element.height / 2)
          ellipse.setAttribute("rx", element.width / 2)
          ellipse.setAttribute("ry", element.height / 2)

          // 设置填充色
          setBackground(element, ellipse)

          // 设置边框
          if (element.borderWidth > 0) {
            ellipse.setAttribute("stroke", element.borderColor || "#000")
            ellipse.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                ellipse.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                ellipse.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                ellipse.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(ellipse)
          break
        case "round2SameRect":
          const round2SameRect = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          // 计算圆角大小
          const round2Size = Math.min(element.width, element.height) * 0.5

          // 绘制路径：从左上角开始，顺时针方向，左上和右上为圆角
          round2SameRect.setAttribute(
            "d",
            `M${round2Size},0 ` +
              `L${element.width - round2Size},0 ` +
              `Q${element.width},0 ${element.width},${round2Size} ` +
              `L${element.width},${element.height} ` +
              `L0,${element.height} ` +
              `L0,${round2Size} ` +
              `Q0,0 ${round2Size},0 ` +
              `Z`
          )

          // 设置填充色
          setBackground(element, round2SameRect)

          // 设置边框
          if (element.borderWidth > 0) {
            round2SameRect.setAttribute("stroke", element.borderColor || "#000")
            round2SameRect.setAttribute(
              "stroke-width",
              element.borderWidth || 1
            )

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                round2SameRect.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                round2SameRect.setAttribute("stroke-dasharray", "2, 2")
                round2SameRect.setAttribute("stroke-linecap", "round")
              } else if (element.borderType === "dashed") {
                round2SameRect.setAttribute("stroke-dasharray", "6, 3")
              }
            }

            round2SameRect.setAttribute("vector-effect", "non-scaling-stroke")
            round2SameRect.setAttribute("shape-rendering", "geometricPrecision")
          }

          svg.appendChild(round2SameRect)
          break
        case "round2DiagRect":
          const round2DiagRect = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          // 计算圆角大小
          const round2DiagSize = Math.min(element.width, element.height) * 0.5

          // 绘制路径：从左上角开始，顺时针方向，左上和右下为圆角
          round2DiagRect.setAttribute(
            "d",
            `M${round2DiagSize},0 ` +
              `L${element.width},0 ` +
              `L${element.width},${element.height - round2DiagSize} ` +
              `Q${element.width},${element.height} ${
                element.width - round2DiagSize
              },${element.height} ` +
              `L0,${element.height} ` +
              `L0,${round2DiagSize} ` +
              `Q0,0 ${round2DiagSize},0 ` +
              `Z`
          )

          // 设置填充色
          setBackground(element, round2DiagRect)

          // 设置边框
          if (element.borderWidth > 0) {
            round2DiagRect.setAttribute("stroke", element.borderColor || "#000")
            round2DiagRect.setAttribute(
              "stroke-width",
              element.borderWidth || 1
            )

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                round2DiagRect.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                round2DiagRect.setAttribute("stroke-dasharray", "2, 2")
                round2DiagRect.setAttribute("stroke-linecap", "round")
              } else if (element.borderType === "dashed") {
                round2DiagRect.setAttribute("stroke-dasharray", "6, 3")
              }
            }

            round2DiagRect.setAttribute("vector-effect", "non-scaling-stroke")
            round2DiagRect.setAttribute("shape-rendering", "geometricPrecision")
          }

          svg.appendChild(round2DiagRect)
          break
        case "triangle":
          const triangle = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "polygon"
          )
          triangle.setAttribute(
            "points",
            `${element.width / 2},0 ${element.width},${element.height} 0,${
              element.height
            }`
          )

          // 设置填充色
          setBackground(element, triangle)

          // 设置边框
          if (element.borderWidth > 0) {
            triangle.setAttribute("stroke", element.borderColor || "#000")
            triangle.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                triangle.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                triangle.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                triangle.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(triangle)
          break
        case "arc":
          const arc = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )

          // 计算弧形的参数
          const arcRadius = Math.min(element.width, element.height) / 2

          // 绘制弧形路径
          arc.setAttribute(
            "d",
            `M${arcRadius},0 ` +
              `A${arcRadius},${arcRadius} 0 1 1 ${arcRadius * 0.15},${
                arcRadius * 0.5
              }`
          )

          // 设置填充色
          arc.setAttribute("fill", "transparent")

          // 设置边框
          if (element.borderWidth > 0) {
            arc.setAttribute("stroke", element.borderColor || "#000")
            arc.setAttribute("stroke-width", element.borderWidth || 0.5)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                arc.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                arc.setAttribute("stroke-dasharray", "2, 2")
                arc.setAttribute("stroke-linecap", "round")
              } else if (element.borderType === "dashed") {
                arc.setAttribute("stroke-dasharray", "6, 3")
              }
            }

            arc.setAttribute("vector-effect", "non-scaling-stroke")
            arc.setAttribute("shape-rendering", "geometricPrecision")
          } else {
            arc.setAttribute("stroke", element.borderColor || "#000")
            arc.setAttribute("stroke-width", 0.5)
          }

          svg.appendChild(arc)
          break
        case "custom":
          const customPath = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )

          // 直接使用传入的 path 数据
          customPath.setAttribute("d", element.path || "")

          // 设置填充色
          setBackground(element, customPath)
          // 设置边框
          if (element.borderWidth > 0) {
            customPath.setAttribute("stroke", element.borderColor || "#000")
            customPath.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                customPath.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                customPath.setAttribute("stroke-dasharray", "2, 2")
                customPath.setAttribute("stroke-linecap", "round")
              } else if (element.borderType === "dashed") {
                customPath.setAttribute("stroke-dasharray", "6, 3")
              }
            }

            customPath.setAttribute("vector-effect", "non-scaling-stroke")
            customPath.setAttribute("shape-rendering", "geometricPrecision")
          }

          svg.appendChild(customPath)
          break
        case "teardrop":
          const teardrop = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )

          // 计算泪珠形状的参数
          const tdCenterX = element.width / 2
          const tdCenterY = element.height / 2
          const tdRadiusX = element.width / 2
          const tdRadiusY = element.height / 2

          // 使用相对比例计算控制点
          teardrop.setAttribute(
            "d",
            `M${tdCenterX * 2} ${tdCenterY} ` +
              `A ${tdRadiusX} ${tdRadiusY} 0 1 1 ${tdCenterX} 0 ` +
              `Q${tdCenterX * 1.7},0 ${tdCenterX * 2.1},${-tdCenterY * 0.1} ` +
              `Q${tdCenterX * 2},${tdCenterY * 0.29} ${
                tdCenterX * 2
              },${tdCenterY}`
          )

          // 设置填充色
          setBackground(element, teardrop)

          // 设置边框样式
          if (element.borderWidth > 0) {
            teardrop.setAttribute("stroke", element.borderColor || "#000")
            teardrop.setAttribute("stroke-width", element.borderWidth || 1)
            teardrop.setAttribute("stroke-linejoin", "round")

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              // ... 原有的虚线边框处理代码 ...
            }
          }

          svg.appendChild(teardrop)
          break
        case "decagon":
          const decagon = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "polygon"
          )

          // 计算十边形的顶点
          let decagonPoints = ""
          for (let i = 0; i < 10; i++) {
            const angle = (i * 2 * Math.PI) / 10 - Math.PI / 2 // 从顶部开始
            const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
            const y =
              element.height / 2 + (element.height / 2) * Math.sin(angle)
            decagonPoints += `${x},${y} `
          }
          decagon.setAttribute("points", decagonPoints.trim())

          // 设置填充色
          setBackground(element, decagon)

          // 设置边框
          if (element.borderWidth > 0) {
            decagon.setAttribute("stroke", element.borderColor || "#000")
            decagon.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                decagon.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                decagon.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                decagon.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(decagon)
          break
        case "pentagon":
          const pentagon = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "polygon"
          )
          pentagon.setAttribute(
            "points",
            `${element.width / 2},0 ${element.width},${
              element.height * 0.38
            } ` +
              `${element.width * 0.82},${element.height} ${
                element.width * 0.18
              },${element.height} ` +
              `0,${element.height * 0.38}`
          )

          // 设置填充色
          setBackground(element, pentagon)
          // 设置边框
          if (element.borderWidth > 0) {
            pentagon.setAttribute("stroke", element.borderColor || "#000")
            pentagon.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                pentagon.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                pentagon.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                pentagon.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(pentagon)
          break
        case "pie":
          const pie = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )

          // 使用提供的路径数据，但保留元素的宽高比例
          const centerX = element.width / 2
          const centerY = element.height / 2
          const radius2 = Math.min(element.width, element.height) / 2

          // 绘制饼图，使用类似提供的路径数据
          pie.setAttribute(
            "d",
            `M${centerX},${centerY} ` +
              `L${centerX * 1.85},${centerY * 1.52} ` +
              `A${radius2},${radius2} 0 1,1 ${centerX * 1.56},${
                centerY * 0.17
              } ` +
              `Z`
          )

          // 设置填充色
          setBackground(element, pie)

          // 设置边框
          if (element.borderWidth > 0) {
            pie.setAttribute("stroke", element.borderColor || "#000")
            pie.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                pie.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                pie.setAttribute("stroke-dasharray", "2, 2")
                pie.setAttribute("stroke-linecap", "round")
              } else if (element.borderType === "dashed") {
                pie.setAttribute("stroke-dasharray", "6, 3")
              }
            }

            pie.setAttribute("vector-effect", "non-scaling-stroke")
            pie.setAttribute("shape-rendering", "geometricPrecision")
          }

          svg.appendChild(pie)
          break
        case "chord":
          const chord = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )

          // 计算弦形的参数
          const chordRadiusX = element.width * 0.4
          const chordRadiusY = element.height * 0.4
          // 绘制弦形 - 使用更大的圆弧和不同的起始/结束点
          chord.setAttribute(
            "d",
            `M${element.width * 0.4},${element.height * 0.9} ` +
              `A ${chordRadiusX} ${chordRadiusY} 0 1 1 ${element.width * 0.8},${
                element.height * 0.5
              } ` +
              `Z`
          )

          // 设置填充色
          setBackground(element, chord)

          // 设置边框
          if (element.borderWidth > 0) {
            chord.setAttribute("stroke", element.borderColor || "#000")
            chord.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                chord.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                chord.setAttribute("stroke-dasharray", "2, 2")
                chord.setAttribute("stroke-linecap", "round")
              } else if (element.borderType === "dashed") {
                chord.setAttribute("stroke-dasharray", "6, 3")
              }
            }

            chord.setAttribute("vector-effect", "non-scaling-stroke")
            chord.setAttribute("shape-rendering", "geometricPrecision")
          }

          svg.appendChild(chord)
          break
        case "heptagon":
          const heptagon = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "polygon"
          )

          // 计算七边形的顶点
          let heptagonPoints = ""
          for (let i = 0; i < 7; i++) {
            const angle = (i * 2 * Math.PI) / 7 - Math.PI / 2 // 从顶部开始
            const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
            const y =
              element.height / 2 + (element.height / 2) * Math.sin(angle)
            heptagonPoints += `${x},${y} `
          }
          heptagon.setAttribute("points", heptagonPoints.trim())

          // 设置填充色
          setBackground(element, heptagon)

          // 设置边框
          if (element.borderWidth > 0) {
            heptagon.setAttribute("stroke", element.borderColor || "#000")
            heptagon.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                heptagon.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                heptagon.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                heptagon.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(heptagon)
          break
        case "hexagon":
          const hexagon = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "polygon"
          )
          hexagon.setAttribute(
            "points",
            `${element.width * 0.25},0 ${element.width * 0.75},0 ${
              element.width
            },${element.height * 0.5} ` +
              `${element.width * 0.75},${element.height} ${
                element.width * 0.25
              },${element.height} 0,${element.height * 0.5}`
          )

          // 设置填充色
          setBackground(element, hexagon)

          // 设置边框
          if (element.borderWidth > 0) {
            hexagon.setAttribute("stroke", element.borderColor || "#000")
            hexagon.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                hexagon.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                hexagon.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                hexagon.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(hexagon)
          break

        case "octagon":
          const octagon = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "polygon"
          )
          octagon.setAttribute(
            "points",
            `${element.width * 0.3},0 ${element.width * 0.7},0 ${
              element.width
            },${element.height * 0.3} ` +
              `${element.width},${element.height * 0.7} ${
                element.width * 0.7
              },${element.height} ` +
              `${element.width * 0.3},${element.height} 0,${
                element.height * 0.7
              } 0,${element.height * 0.3}`
          )

          // 设置填充色
          setBackground(element, octagon)

          // 设置边框
          if (element.borderWidth > 0) {
            octagon.setAttribute("stroke", element.borderColor || "#000")
            octagon.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                octagon.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                octagon.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                octagon.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(octagon)
          break

        case "trapezoid":
          const trapezoid = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "polygon"
          )
          trapezoid.setAttribute(
            "points",
            `${element.width * 0.2},0 ${element.width * 0.8},0 ${
              element.width
            },${element.height} 0,${element.height}`
          )

          // 设置填充色
          setBackground(element, trapezoid)

          // 设置边框
          if (element.borderWidth > 0) {
            trapezoid.setAttribute("stroke", element.borderColor || "#000")
            trapezoid.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                trapezoid.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                trapezoid.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                trapezoid.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(trapezoid)
          break

        case "diamond":
          const diamond = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "polygon"
          )
          diamond.setAttribute(
            "points",
            `${element.width / 2},0 ${element.width},${element.height / 2} ${
              element.width / 2
            },${element.height} 0,${element.height / 2}`
          )

          // 设置填充色
          setBackground(element, diamond)

          // 设置边框
          if (element.borderWidth > 0) {
            diamond.setAttribute("stroke", element.borderColor || "#000")
            diamond.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                diamond.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                diamond.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                diamond.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(diamond)
          break
        case "dodecagon":
          const dodecagon = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "polygon"
          )

          // 计算十二边形的顶点
          let dodecagonPoints = ""
          for (let i = 0; i < 12; i++) {
            const angle = (i * 2 * Math.PI) / 12 - Math.PI / 2 // 从顶部开始
            const x = element.width / 2 + (element.width / 2) * Math.cos(angle)
            const y =
              element.height / 2 + (element.height / 2) * Math.sin(angle)
            dodecagonPoints += `${x},${y} `
          }
          dodecagon.setAttribute("points", dodecagonPoints.trim())

          // 设置填充色
          setBackground(element, dodecagon)

          // 设置边框
          if (element.borderWidth > 0) {
            dodecagon.setAttribute("stroke", element.borderColor || "#000")
            dodecagon.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                dodecagon.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                dodecagon.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                dodecagon.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(dodecagon)
          break
        case "halfFrame":
          // 创建外框和内框
          const outerRect2 = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          const innerRect2 = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )

          // 计算内框的边距
          const frameWidth2 = element.width / 9

          // 绘制外框的左边和上边
          outerRect2.setAttribute(
            "d",
            `M0,${element.height} L0,0 L${element.width},0`
          )

          // 绘制内框的左边和上边，注意起点位置调整
          innerRect2.setAttribute(
            "d",
            `M${frameWidth2},${element.height - frameWidth2} ` +
              `L${frameWidth2},${frameWidth2} ` +
              `L${element.width - frameWidth2},${frameWidth2}`
          )

          // 设置填充色
          if (element.fill && element.fill.type === "color") {
            // 创建一个填充用的路径
            const fillPath = document.createElementNS(
              "http://www.w3.org/2000/svg",
              "path"
            )
            fillPath.setAttribute(
              "d",
              `M${frameWidth2},${frameWidth2} ` +
                `L${element.width - frameWidth2},${frameWidth2} ` +
                `L${element.width},0 ` +
                `L0,0 ` +
                `L0,${element.height} ` +
                `L${frameWidth2},${element.height - frameWidth2} Z`
            )
            fillPath.setAttribute("fill", element.fill.value || "transparent")
            svg.appendChild(fillPath)

            outerRect2.setAttribute("fill", "none")
            innerRect2.setAttribute("fill", "none")
          } else {
            outerRect2.setAttribute("fill", "none")
            innerRect2.setAttribute("fill", "none")
          }

          // 设置边框
          if (element.borderWidth > 0) {
            const borderColor = element.borderColor || "#000"
            const borderWidth = element.borderWidth || 1

            outerRect2.setAttribute("stroke", borderColor)
            outerRect2.setAttribute("stroke-width", borderWidth)
            innerRect2.setAttribute("stroke", borderColor)
            innerRect2.setAttribute("stroke-width", borderWidth)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                const dashArray = element.borderStrokeDasharray
                outerRect2.setAttribute("stroke-dasharray", dashArray)
                innerRect2.setAttribute("stroke-dasharray", dashArray)
              } else if (element.borderType === "dotted") {
                outerRect2.setAttribute("stroke-dasharray", "1, 3")
                innerRect2.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                outerRect2.setAttribute("stroke-dasharray", "5, 5")
                innerRect2.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(outerRect2)
          svg.appendChild(innerRect2)
          break
        case "corner":
          const corner = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )

          corner.setAttribute(
            "d",
            `M0,0 ` +
              `L0,${element.height} ` +
              `L${element.width},${element.height} ` +
              `L${element.width},${element.height * 0.6} ` +
              `L${element.width * 0.4},${element.height * 0.6} ` +
              `L${element.width * 0.4},0 Z`
          )

          // 设置填充色
          setBackground(element, corner)

          // 设置边框
          if (element.borderWidth > 0) {
            corner.setAttribute("stroke", element.borderColor || "#000")
            corner.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                corner.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                corner.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                corner.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(corner)
          break
        case "diagStripe":
          const diagStripe = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )

          // 绘制斜纹路径
          diagStripe.setAttribute(
            "d",
            `M${element.width * 0.4},0 ` +
              `L${element.width},0 ` +
              `L0,${element.height} ` +
              `L0,${element.height * 0.4} Z`
          )

          // 设置填充色
          setBackground(element, diagStripe)

          // 设置边框
          if (element.borderWidth > 0) {
            diagStripe.setAttribute("stroke", element.borderColor || "#000")
            diagStripe.setAttribute("stroke-width", element.borderWidth || 1)
            diagStripe.setAttribute("stroke-linejoin", "round")

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                diagStripe.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                diagStripe.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                diagStripe.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(diagStripe)
          break
        case "plus":
          const plus = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "polygon"
          )
          plus.setAttribute(
            "points",
            `${element.width * 0.4},0 ` +
              `${element.width * 0.6},0 ` +
              `${element.width * 0.6},${element.height * 0.4} ` +
              `${element.width},${element.height * 0.4} ` +
              `${element.width},${element.height * 0.6} ` +
              `${element.width * 0.6},${element.height * 0.6} ` +
              `${element.width * 0.6},${element.height} ` +
              `${element.width * 0.4},${element.height} ` +
              `${element.width * 0.4},${element.height * 0.6} ` +
              `0,${element.height * 0.6} ` +
              `0,${element.height * 0.4} ` +
              `${element.width * 0.4},${element.height * 0.4}`
          )

          // 设置填充色
          setBackground(element, plus)

          // 设置边框
          if (element.borderWidth > 0) {
            plus.setAttribute("stroke", element.borderColor || "#000")
            plus.setAttribute("stroke-width", element.borderWidth || 1)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                plus.setAttribute(
                  "stroke-dasharray",
                  element.borderStrokeDasharray
                )
              } else if (element.borderType === "dotted") {
                plus.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                plus.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          svg.appendChild(plus)
          break
        case "can":
          const can = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "g"
          )

          // 创建圆柱体的主体部分
          const cylinderBody = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          cylinderBody.setAttribute(
            "d",
            `M0,${element.height * 0.15} ` +
              `A${element.width / 2},${element.height * 0.15} 0 0 1 ${
                element.width
              },${element.height * 0.15} ` +
              `V${element.height * 0.85} ` +
              `A${element.width / 2},${element.height * 0.15} 0 0 1 0,${
                element.height * 0.85
              } Z`
          )

          // 创建顶部椭圆
          const topEllipse = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "ellipse"
          )
          topEllipse.setAttribute("cx", element.width / 2)
          topEllipse.setAttribute("cy", element.height * 0.15)
          topEllipse.setAttribute("rx", element.width / 2)
          topEllipse.setAttribute("ry", element.height * 0.15)

          // 设置填充色
          setBackground(element, cylinderBody)
          setBackground(element, topEllipse)

          // 设置边框
          if (element.borderWidth > 0) {
            const borderColor = element.borderColor || "#000"
            const borderWidth = element.borderWidth || 1

            cylinderBody.setAttribute("stroke", borderColor)
            cylinderBody.setAttribute("stroke-width", borderWidth)
            topEllipse.setAttribute("stroke", borderColor)
            topEllipse.setAttribute("stroke-width", borderWidth)

            // 处理虚线边框
            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              if (element.borderStrokeDasharray) {
                const dashArray = element.borderStrokeDasharray
                cylinderBody.setAttribute("stroke-dasharray", dashArray)
                topEllipse.setAttribute("stroke-dasharray", dashArray)
              } else if (element.borderType === "dotted") {
                cylinderBody.setAttribute("stroke-dasharray", "1, 3")
                topEllipse.setAttribute("stroke-dasharray", "1, 3")
              } else if (element.borderType === "dashed") {
                cylinderBody.setAttribute("stroke-dasharray", "5, 5")
                topEllipse.setAttribute("stroke-dasharray", "5, 5")
              }
            }
          }

          can.appendChild(cylinderBody)
          can.appendChild(topEllipse)
          svg.appendChild(can)
          break
        case "cube":
          const cube = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "g"
          )

          // 计算关键点坐标
          const offset = element.width * 0.2
          const frontX = offset
          const frontY = offset
          const frontW = element.width - offset
          const frontH = element.height

          // 设置立方体的三个面的路径
          const frontFace = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          frontFace.setAttribute(
            "d",
            `M${frontX},${frontY} ` +
              `L${frontW},${frontY} ` +
              `L${frontW},${frontH} ` +
              `L${frontX},${frontH} Z`
          )

          const rightFace = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          rightFace.setAttribute(
            "d",
            `M${frontW},${frontY} ` +
              `L${element.width},0 ` +
              `L${element.width},${element.height - offset} ` +
              `L${frontW},${frontH} Z`
          )

          const topFace = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          topFace.setAttribute(
            "d",
            `M${frontX},${frontY} ` +
              `L${frontW - offset - frontX},0 ` + // 修改这里：改为从(0,0)开始
              `L${element.width - offset},0 ` + // 修改这里：使用 offset 来计算右上角的位置
              `L${element.width},0 ` +
              `L${frontW},${frontY} Z`
          )

          // 设置填充色
          if (element.fill && element.fill.type === "color") {
            const fillColor = element.fill.value || "transparent"
            frontFace.setAttribute("fill", fillColor)
            rightFace.setAttribute(
              "fill",
              this.adjustBrightness(fillColor, 0.8)
            )
            topFace.setAttribute("fill", this.adjustBrightness(fillColor, 1.2))
          } else {
            frontFace.setAttribute("fill", "transparent")
            rightFace.setAttribute("fill", "transparent")
            topFace.setAttribute("fill", "transparent")
          }
          // 设置边框
          if (element.borderWidth > 0) {
            const borderColor = element.borderColor || "#000"
            const borderWidth = element.borderWidth || 1

            frontFace.setAttribute("stroke", borderColor)
            frontFace.setAttribute("stroke-width", borderWidth)
            rightFace.setAttribute("stroke", borderColor)
            rightFace.setAttribute("stroke-width", borderWidth)
            topFace.setAttribute("stroke", borderColor)
            topFace.setAttribute("stroke-width", borderWidth)

            if (
              element.borderType === "dotted" ||
              element.borderType === "dashed"
            ) {
              const dashArray =
                element.borderStrokeDasharray ||
                (element.borderType === "dotted" ? "1, 3" : "5, 5")
              frontFace.setAttribute("stroke-dasharray", dashArray)
              rightFace.setAttribute("stroke-dasharray", dashArray)
              topFace.setAttribute("stroke-dasharray", dashArray)
            }
          }

          // 按正确的顺序添加面（从后到前）
          cube.appendChild(rightFace)
          cube.appendChild(topFace)
          cube.appendChild(frontFace)
          svg.appendChild(cube)
          break
        case "bevel":
          const bevel = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "g"
          )

          // 计算关键点坐标
          const bevelOffset = element.width * 0.2
          const smallRectX = bevelOffset
          const smallRectY = bevelOffset
          const smallRectW = element.width - 2 * bevelOffset
          const smallRectH = element.height - 2 * bevelOffset

          // 绘制顶部小矩形
          const topRect = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "rect"
          )
          topRect.setAttribute("x", smallRectX)
          topRect.setAttribute("y", smallRectY)
          topRect.setAttribute("width", smallRectW)
          topRect.setAttribute("height", smallRectH)

          // 绘制四个梯形
          const topTrapezoid = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          topTrapezoid.setAttribute(
            "d",
            `M0,0 L${element.width},0 L${
              element.width - bevelOffset
            },${bevelOffset} L${bevelOffset},${bevelOffset} Z`
          )

          const bottomTrapezoid = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          bottomTrapezoid.setAttribute(
            "d",
            `M${bevelOffset},${element.height - bevelOffset} L${
              element.width - bevelOffset
            },${element.height - bevelOffset} L${element.width},${
              element.height
            } L0,${element.height} Z`
          )

          const leftTrapezoid = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          leftTrapezoid.setAttribute(
            "d",
            `M0,0 L${bevelOffset},${bevelOffset} L${bevelOffset},${
              element.height - bevelOffset
            } L0,${element.height} Z`
          )

          const rightTrapezoid = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
          )
          rightTrapezoid.setAttribute(
            "d",
            `M${element.width},0 L${element.width},${element.height} L${
              element.width - bevelOffset
            },${element.height - bevelOffset} L${
              element.width - bevelOffset
            },${bevelOffset} Z`
          )

          // 设置填充色
          if (element.fill && element.fill.type === "color") {
            const fillColor = element.fill.value || "transparent"
            topRect.setAttribute("fill", fillColor)
            topTrapezoid.setAttribute(
              "fill",
              this.adjustBrightness(fillColor, 1.2)
            )
            bottomTrapezoid.setAttribute(
              "fill",
              this.adjustBrightness(fillColor, 0.8)
            )
            leftTrapezoid.setAttribute(
              "fill",
              this.adjustBrightness(fillColor, 0.9)
            )
            rightTrapezoid.setAttribute(
              "fill",
              this.adjustBrightness(fillColor, 0.7)
            )
          } else {
            topRect.setAttribute("fill", "transparent")
            topTrapezoid.setAttribute("fill", "transparent")
            bottomTrapezoid.setAttribute("fill", "transparent")
            leftTrapezoid.setAttribute("fill", "transparent")
            rightTrapezoid.setAttribute("fill", "transparent")
          }

          // 设置边框
          if (element.borderWidth > 0) {
            const borderColor = element.borderColor || "#000"
            const borderWidth = element.borderWidth || 1
            const parts = [
              topRect,
              topTrapezoid,
              bottomTrapezoid,
              leftTrapezoid,
              rightTrapezoid,
            ]

            parts.forEach((part) => {
              part.setAttribute("stroke", borderColor)
              part.setAttribute("stroke-width", borderWidth)

              if (
                element.borderType === "dotted" ||
                element.borderType === "dashed"
              ) {
                const dashArray =
                  element.borderStrokeDasharray ||
                  (element.borderType === "dotted" ? "1, 3" : "5, 5")
                part.setAttribute("stroke-dasharray", dashArray)
              }
            })
          }

          // 按正确的顺序添加面（从后到前）
          bevel.appendChild(bottomTrapezoid)
          bevel.appendChild(leftTrapezoid)
          bevel.appendChild(rightTrapezoid)
          bevel.appendChild(topTrapezoid)
          bevel.appendChild(topRect)
          svg.appendChild(bevel)
          break
        case "donut":
          const donut = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "g"
          )

          // 外圆
          const outerCircle = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "circle"
          )
          outerCircle.setAttribute("cx", element.width / 2)
          outerCircle.setAttribute("cy", element.height / 2)
          outerCircle.setAttribute(
            "r",
            Math.min(element.width, element.height) / 2
          )

          // 内圆
          const innerCircle = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "circle"
          )
          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 = this.convertPtToPxInContent(
          element.content
        )
        contentContainer.style.position = "absolute"
        contentContainer.style.width = element.width + "px"
        contentContainer.style.height = element.height + "px"
        contentContainer.style.top = "0px"
        contentContainer.style.left = "0px"
        contentContainer.style.display = "flex"
        contentContainer.style.alignItems = "center"
        contentContainer.style.justifyContent = "center"
        contentContainer.style.zIndex = element.order
        contentContainer.style.pointerEvents = "none"
        const transformList = []
        let rotateDeg = element.rotate || 0

        if (element.isFlipV) {
          transformList.push(`scaleY(-1)`)
          rotateDeg = -rotateDeg // 垂直翻转时反转旋转方向
        }

        if (element.isFlipH) {
          transformList.push(`scaleX(-1)`)
          rotateDeg = -rotateDeg // 水平翻转时反转旋转方向
        }

        if (element.rotate) {
          transformList.push(`rotate(${rotateDeg}deg)`)
        }

        if (transformList.length > 0) {
          contentContainer.style.transform = transformList.join(" ")
          contentContainer.style.transformOrigin = "center center"
        }
        el.appendChild(contentContainer)
      }
      return el
    },

    // 创建表格元素
    createTableElement(element) {
      const el = document.createElement("div")
      el.style.position = "absolute"
      el.style.top = element.top + "px"
      el.style.left = element.left + "px"
      el.style.width = element.width + "px"
      el.style.height = element.height + "px"
      el.style.zIndex = element.order

      // 创建表格元素
      const table = document.createElement("table")
      table.style.width = element.width + "px"
      table.style.height = element.height + "px"
      table.style.borderCollapse = "collapse"
      table.style.tableLayout = "fixed"
      // 设置表格边框
      if (element.borders) {
        if (element.borders.all) {
          const border = element.borders.all
          table.style.border = `${border.borderWidth || 1}px ${
            border.borderType || "solid"
          } ${border.borderColor || "#000"}`
        } else {
          // 分别设置四边边框
          if (element.borders.top) {
            table.style.borderTop = `${
              element.borders.top.borderWidth || 1
            }px ${element.borders.top.borderType || "solid"} ${
              element.borders.top.borderColor || "#000"
            }`
          }
          if (element.borders.bottom) {
            table.style.borderBottom = `${
              element.borders.bottom.borderWidth || 1
            }px ${element.borders.bottom.borderType || "solid"} ${
              element.borders.bottom.borderColor || "#000"
            }`
          }
          if (element.borders.left) {
            table.style.borderLeft = `${
              element.borders.left.borderWidth || 1
            }px ${element.borders.left.borderType || "solid"} ${
              element.borders.left.borderColor || "#000"
            }`
          }
          if (element.borders.right) {
            table.style.borderRight = `${
              element.borders.right.borderWidth || 1
            }px ${element.borders.right.borderType || "solid"} ${
              element.borders.right.borderColor || "#000"
            }`
          }
        }
      }

      // 创建表格内容
      const tbody = document.createElement("tbody")

      // 处理表格数据
      if (element.data && element.data.length > 0) {
        element.data.forEach((rowData, rowIndex) => {
          const tr = document.createElement("tr")

          rowData.forEach((cell, colIndex) => {
            // 跳过被合并的单元格
            if (cell.hMerge) return

            const td = document.createElement("td")

            // 设置单元格内容
            if (cell.text) {
              td.innerHTML = this.convertPtToPxInContent(cell.text)
            }

            // 设置单元格样式
            td.style.padding = "0px"
            td.style.verticalAlign = "middle"

            // 设置文本样式
            if (cell.fontColor) td.style.color = cell.fontColor
            if (cell.fontSize) td.style.fontSize = cell.fontSize
            if (cell.fontFamily) td.style.fontFamily = cell.fontFamily
            if (cell.bold) td.style.fontWeight = "bold"
            if (cell.italic) td.style.fontStyle = "italic"
            if (cell.underline) td.style.textDecoration = "underline"
            if (cell.align) td.style.textAlign = cell.align

            // 设置背景色
            if (cell.fillColor) td.style.backgroundColor = cell.fillColor

            // 设置单元格边框
            if (cell.borders) {
              if (cell.borders.all) {
                const border = cell.borders.all
                td.style.border = `${border.borderWidth || 1}px ${
                  border.borderType || "solid"
                } ${border.borderColor || "#000"}`
              } else {
                // 分别设置四边边框
                if (cell.borders.top) {
                  td.style.borderTop = `${
                    cell.borders.top.borderWidth || 1
                  }px ${cell.borders.top.borderType || "solid"} ${
                    cell.borders.top.borderColor || "#000"
                  }`
                }
                if (cell.borders.bottom) {
                  td.style.borderBottom = `${
                    cell.borders.bottom.borderWidth || 1
                  }px ${cell.borders.bottom.borderType || "solid"} ${
                    cell.borders.bottom.borderColor || "#000"
                  }`
                }
                if (cell.borders.left) {
                  td.style.borderLeft = `${
                    cell.borders.left.borderWidth || 1
                  }px ${cell.borders.left.borderType || "solid"} ${
                    cell.borders.left.borderColor || "#000"
                  }`
                }
                if (cell.borders.right) {
                  td.style.borderRight = `${
                    cell.borders.right.borderWidth || 1
                  }px ${cell.borders.right.borderType || "solid"} ${
                    cell.borders.right.borderColor || "#000"
                  }`
                }
              }
            }
            td.style.width = element.colWidths[colIndex] + "px"
            // 设置单元格合并
            if (cell.colSpan && cell.colSpan > 1) {
              td.colSpan = cell.colSpan
              td.style.width = element.colWidths[colIndex] * cell.colSpan + "px"
            }
            if (cell.rowSpan && cell.rowSpan > 1) {
              td.rowSpan = cell.rowSpan
            }

            tr.appendChild(td)
          })
          tr.style.height = element.rowHeights[rowIndex] + "px"
          tbody.appendChild(tr)
        })
      }

      table.appendChild(tbody)
      el.appendChild(table)

      return el
    },
    // 创建图表元素
    createChartElement(element) {
      // 1. 创建基础容器
      const el = document.createElement("div")
      el.style.position = "absolute"
      el.style.top = element.top + "px"
      el.style.left = element.left + "px"
      el.style.width = element.width + "px"
      el.style.height = element.height + "px"
      el.style.zIndex = element.order
      // 2. 创建SVG画布
      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
      svg.setAttribute("width", element.width)
      svg.setAttribute("height", element.height)
      svg.setAttribute("viewBox", `0 0 ${element.width} ${element.height}`)

      // 3. 设置图表内边距
      const padding = {
        top: 60, // 为图例留出空间
        right: 40, // 右侧边距
        bottom: 60, // X轴标签空间
        left: 60, // Y轴标签空间
      }

      // 4. 计算实际绘图区域
      const chartWidth = element.width - padding.left - padding.right
      const chartHeight = element.height - padding.top - padding.bottom
      // 处理不同图表类型
      switch (element.chartType) {
        case "barChart":
          // 绘制柱状图
          this.drawBarChart(svg, element, {
            padding,
            chartWidth,
            chartHeight,
            barDir: element.barDir || "col",
            grouping: element.grouping || "clustered",
          })
          break
        case "pieChart":
        case "doughnutChart":
          this.drawDonutChart(svg, element, chartWidth, chartHeight)
          break
        default:
          // 占位符
          svg.innerHTML = `<text x="${element.width / 2}" y="${
            element.height / 2
          }" text-anchor="middle" fill="#999" font-size="12px">
            暂不支持该类型图表
          </text>`
          console.warn("Unsupported chart type:", element.chartType)
      }

      el.appendChild(svg)
      return el
    },
    drawDonutChart(svg, element, chartWidth, chartHeight) {
      // 数据验证
      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"
    },
    // 绘制柱状图
    drawBarChart(svg, element, options) {
      const { padding, chartWidth, chartHeight, barDir, grouping } = options
      const series = element.data
      const categories = series[0].xlabels
      const categoryCount = Object.keys(categories).length

      // 1. 计算最大值
      let maxValue = 0
      series.forEach((serie) => {
        const seriesMax = Math.max(...serie.values.map((v) => v.y))
        maxValue = Math.max(maxValue, seriesMax)
      })
      maxValue = maxValue * 1.2 // 增加20%空间

      // 2. 计算柱子布局
      const groupWidth = chartWidth / categoryCount
      const barWidth =
        grouping === "clustered"
          ? (groupWidth * 0.6) / series.length // 分组模式
          : groupWidth * 0.6 // 堆叠模式
      const barSpacing =
        (groupWidth * 0.4) / (grouping === "clustered" ? series.length + 1 : 2)

      // 3. 绘制坐标轴
      // X轴
      const xAxisPath = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "path"
      )
      xAxisPath.setAttribute(
        "d",
        `M${padding.left},${element.height - padding.bottom} L${
          element.width - padding.right
        },${element.height - padding.bottom}`
      )
      xAxisPath.setAttribute("stroke", "#000")
      xAxisPath.setAttribute("stroke-width", "1")
      svg.appendChild(xAxisPath)

      // Y轴
      const yAxisPath = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "path"
      )
      yAxisPath.setAttribute(
        "d",
        `M${padding.left},${padding.top} L${padding.left},${
          element.height - padding.bottom
        }`
      )
      yAxisPath.setAttribute("stroke", "#000")
      yAxisPath.setAttribute("stroke-width", "1")
      svg.appendChild(yAxisPath)

      // 4. 绘制Y轴刻度和网格线
      const yTickCount = 5
      for (let i = 0; i <= yTickCount; i++) {
        const y = padding.top + (chartHeight * i) / yTickCount
        const value = maxValue - (maxValue * i) / yTickCount

        // 水平网格线
        const gridLine = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "line"
        )
        gridLine.setAttribute("x1", padding.left)
        gridLine.setAttribute("y1", y)
        gridLine.setAttribute("x2", padding.left + chartWidth)
        gridLine.setAttribute("y2", y)
        gridLine.setAttribute("stroke", "#eee")
        gridLine.setAttribute("stroke-width", "1")
        svg.appendChild(gridLine)

        // 刻度线
        const tick = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "line"
        )
        tick.setAttribute("x1", padding.left - 6)
        tick.setAttribute("y1", y)
        tick.setAttribute("x2", padding.left)
        tick.setAttribute("y2", y)
        tick.setAttribute("stroke", "#000")
        tick.setAttribute("stroke-width", "1")
        svg.appendChild(tick)

        // 刻度值
        const label = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "text"
        )
        label.setAttribute("x", padding.left - 10)
        label.setAttribute("y", y + 4)
        label.setAttribute("text-anchor", "end")
        label.setAttribute("font-size", "12px")
        label.textContent = value.toFixed(1)
        svg.appendChild(label)
      }

      // 5. 绘制数据条
      series.forEach((serie, serieIndex) => {
        serie.values.forEach((value, index) => {
          const barHeight = (value.y / maxValue) * chartHeight
          const x =
            padding.left +
            groupWidth * index +
            (grouping === "clustered"
              ? barSpacing * (serieIndex + 1) + barWidth * serieIndex
              : barSpacing)
          const y = element.height - padding.bottom - barHeight

          // 绘制柱子
          const bar = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "rect"
          )
          bar.setAttribute("x", x)
          bar.setAttribute("y", y)
          bar.setAttribute("width", barWidth)
          bar.setAttribute("height", barHeight)
          bar.setAttribute(
            "fill",
            element.colors[serieIndex] || `hsl(${serieIndex * 60}, 70%, 50%)`
          )
          svg.appendChild(bar)

          // 数值标签
          if (element.marker) {
            const label = document.createElementNS(
              "http://www.w3.org/2000/svg",
              "text"
            )
            label.setAttribute("x", x + barWidth / 2)
            label.setAttribute("y", y - 5)
            label.setAttribute("text-anchor", "middle")
            label.setAttribute("font-size", "12px")
            label.textContent = value.y.toFixed(1)
            svg.appendChild(label)
          }
        })
      })

      // 6. 绘制X轴类别标签
      Object.values(categories).forEach((label, index) => {
        const x = padding.left + groupWidth * (index + 0.5)
        const text = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "text"
        )
        text.setAttribute("x", x)
        text.setAttribute("y", element.height - padding.bottom + 20)
        text.setAttribute("text-anchor", "middle")
        text.setAttribute("font-size", "12px")
        text.textContent = label
        svg.appendChild(text)
      })

      // 7. 绘制图例
      series.forEach((serie, index) => {
        const legendX = padding.left + index * 120
        const legendY = 20

        const rect = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "rect"
        )
        rect.setAttribute("x", legendX)
        rect.setAttribute("y", legendY)
        rect.setAttribute("width", 15)
        rect.setAttribute("height", 15)
        rect.setAttribute(
          "fill",
          element.colors[index] || `hsl(${index * 60}, 70%, 50%)`
        )
        svg.appendChild(rect)

        const text = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "text"
        )
        text.setAttribute("x", legendX + 25)
        text.setAttribute("y", legendY + 12)
        text.setAttribute("font-size", "12px")
        text.textContent = serie.key
        svg.appendChild(text)
      })
    },
    // 绘制网格和刻度
    drawGrid(svg, padding, width, height, maxValue) {
      const yTickCount = 5
      for (let i = 0; i <= yTickCount; i++) {
        const y = padding.top + (height * i) / yTickCount
        const value = maxValue - (maxValue * i) / yTickCount

        // 刻度线
        const tick = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "line"
        )
        tick.setAttribute("x1", padding.left - 5)
        tick.setAttribute("x2", padding.left)
        tick.setAttribute("y1", y)
        tick.setAttribute("y2", y)
        tick.setAttribute("stroke", "#000")
        svg.appendChild(tick)

        // 刻度值
        const label = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "text"
        )
        label.setAttribute("x", padding.left - 8)
        label.setAttribute("y", y + 4)
        label.setAttribute("text-anchor", "end")
        label.setAttribute("font-size", "12px")
        label.textContent = value.toFixed(1)
        svg.appendChild(label)
      }
    },
    // 绘制类别标签
    drawCategoryLabels(svg, categories, padding, groupWidth, barDir) {
      Object.values(categories).forEach((label, index) => {
        const text = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "text"
        )
        if (barDir === "col") {
          text.setAttribute("x", padding.left + groupWidth * (index + 0.5))
          text.setAttribute("y", svg.height.baseVal.value - padding.bottom + 20)
          text.setAttribute("text-anchor", "middle")
        } else {
          text.setAttribute("x", padding.left - 10)
          text.setAttribute("y", padding.top + groupWidth * (index + 0.5))
          text.setAttribute("text-anchor", "end")
          text.setAttribute("dominant-baseline", "middle")
        }
        text.setAttribute("font-size", "12px")
        text.textContent = label
        svg.appendChild(text)
      })
    },
    // 绘制图例
    drawLegend(svg, series, colors, padding) {
      series.forEach((serie, index) => {
        const legendX = padding.left + index * 100
        const legendY = 20

        const rect = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "rect"
        )
        rect.setAttribute("x", legendX)
        rect.setAttribute("y", legendY)
        rect.setAttribute("width", 15)
        rect.setAttribute("height", 15)
        rect.setAttribute(
          "fill",
          colors[index] || `hsl(${index * 60}, 70%, 50%)`
        )
        svg.appendChild(rect)

        const text = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "text"
        )
        text.setAttribute("x", legendX + 20)
        text.setAttribute("y", legendY + 12)
        text.setAttribute("font-size", "12px")
        text.textContent = serie.key
        svg.appendChild(text)
      })
    },
    // 创建SmartArt图表元素
    createDiagramElement(element) {
      const el = document.createElement("div")
      el.style.position = "absolute"
      el.style.top = element.top + "px"
      el.style.left = element.left + "px"
      el.style.width = element.width + "px"
      el.style.height = element.height + "px"
      el.style.zIndex = element.order
      // 递归渲染SmartArt节点
      const renderDiagramNode = (node) => {
        const nodeEl = document.createElement("div")
        nodeEl.style.position = "absolute"
        nodeEl.style.left = node.left + "px"
        nodeEl.style.top = node.top + "px"
        nodeEl.style.width = node.width + "px"
        nodeEl.style.height = node.height + "px"

        // 设置边框
        if (node.borderWidth > 0) {
          nodeEl.style.border = `${node.borderWidth}px ${node.borderType} ${node.borderColor}`
          if (
            node.borderStrokeDasharray &&
            node.borderStrokeDasharray !== "0"
          ) {
            nodeEl.style.borderStyle = "dashed"
          }
        }

        // 设置背景填充
        if (node.fill && node.fill.type === "color") {
          nodeEl.style.backgroundColor = node.fill.value
        }

        // 设置内容
        if (node.content) {
          nodeEl.innerHTML = this.convertPtToPxInContent(node.content)
        }

        // 设置垂直对齐
        if (node.vAlign === "mid") {
          nodeEl.style.display = "flex"
          nodeEl.style.alignItems = "center"
          nodeEl.style.justifyContent = "center"
        }

        // 设置翻转
        const transforms = []
        if (node.isFlipV) {
          transforms.push("scaleY(-1)")
        }
        if (node.isFlipH) {
          transforms.push("scaleX(-1)")
        }
        if (transforms.length > 0) {
          nodeEl.style.transform = transforms.join(" ")
        }

        return nodeEl
      }

      // 按照 order 排序元素
      const sortedElements = [...element.elements].sort(
        (a, b) => a.order - b.order
      )

      // 渲染所有节点
      sortedElements.forEach((node) => {
        const nodeEl = renderDiagramNode(node)
        el.appendChild(nodeEl)
      })

      return el
    },
    // 创建数学公式元素
    createMathElement(element) {
      const el = document.createElement("div")
      el.style.position = "absolute"
      el.style.top = element.top + "px"
      el.style.left = element.left + "px"
      el.style.width = element.width + "px"
      el.style.height = element.height + "px"

      // 如果有公式图片，优先使用图片显示
      if (element.picBase64) {
        const img = document.createElement("img")
        img.src = element.picBase64
        img.style.width = "100%"
        img.style.height = "100%"
        img.style.objectFit = "contain"
        el.appendChild(img)
        return el
      }

      // 如果有 LaTeX 表达式，使用 MathJax 渲染
      if (element.latex) {
        // 创建公式容器
        const mathContainer = document.createElement("div")
        mathContainer.style.width = "100%"
        mathContainer.style.height = "100%"
        mathContainer.style.display = "flex"
        mathContainer.style.alignItems = "center"
        mathContainer.style.justifyContent = "center"

        // 添加 LaTeX 公式
        mathContainer.innerHTML = `\\[${element.latex}\\]`

        // 如果 MathJax 不可用，显示原始 LaTeX
        mathContainer.style.fontFamily = "monospace"
        mathContainer.style.whiteSpace = "pre-wrap"
        mathContainer.style.padding = "10px"
        mathContainer.textContent = element.latex

        el.appendChild(mathContainer)
      }

      return el
    },
    // 创建文本元素
    createTextElement(element) {
      const el = document.createElement("div")
      if (element.content) {
        // 转换内容中的pt单位为px单位
        const convertedContent = this.convertPtToPxInContent(element.content)
        el.innerHTML = convertedContent

        // 设置文本样式
        el.style.width = element.width + "px"
        el.style.height = element.height + "px"
        el.style.color = element.fontColor || "#000"
        el.style.fontSize = element.fontSize
        el.style.fontFamily = element.fontFamily || "Arial"
        el.style.textAlign = element.align || "left"
        el.style.fontWeight = element.bold ? "bold" : "normal"
        el.style.fontStyle = element.italic ? "italic" : "normal"
        el.style.textDecoration = element.underline ? "underline" : "none"
        el.style.position = "absolute"
        el.style.top = element.top + "px" || "0"
        el.style.left = element.left + "px" || "0"
        el.style.zIndex = element.order
        el.style.whiteSpace = "pre-wrap"

        // 添加垂直对齐支持
        el.style.display = "flex"
        el.style.flexDirection = "column"
        switch (element.vAlign) {
          case "up":
            el.style.justifyContent = "flex-start"
            break
          case "mid":
            el.style.justifyContent = "center"
            break
          case "down":
            el.style.justifyContent = "flex-end"
            break
          default:
            el.style.justifyContent = "flex-start"
        }

        // 设置段落间距
        el.style.lineHeight = element.lineHeight + "px" || "1.2"
        el.style.letterSpacing = element.charSpacing
          ? `${element.charSpacing}px`
          : "normal"
      }
      return el
    },
    // 调整颜色明暗度
    adjustBrightness(color, factor) {
      if (color === "transparent") return color
      const hex = color.replace("#", "")
      const r = Math.min(
        255,
        Math.round(parseInt(hex.substr(0, 2), 16) * factor)
      )
      const g = Math.min(
        255,
        Math.round(parseInt(hex.substr(2, 2), 16) * factor)
      )
      const b = Math.min(
        255,
        Math.round(parseInt(hex.substr(4, 2), 16) * factor)
      )
      return `#${r.toString(16).padStart(2, "0")}${g
        .toString(16)
        .padStart(2, "0")}${b.toString(16).padStart(2, "0")}`
    },
    convertPtToPxInContent(content) {
      if (!content) return content
      // 使用正则表达式查找并替换
      return content.replace(/(\d+\.?\d*)(pt|PT)/g, (match, size) => {
        // 将 pt 转换为 px（1pt ≈ 1.33333px）
        const pxSize = size
        return `${pxSize}px`
      })
    },
    processElements(elements, slideIndex) {
      if (!elements || !Array.isArray(elements)) return

      // 使用 Map 存储原始顺序，避免多次排序
      const orderMap = new Map(
        elements.map((el, index) => [el, el.order || index])
      )

      // 一次性排序
      elements.sort((a, b) => orderMap.get(a) - orderMap.get(b))

      const processElement = (element, baseOrder) => {
        // 设置当前元素的 order
        element.order = baseOrder

        // 如果有子元素，递归处理
        if (element.elements?.length > 0) {
          element.elements
            .sort((a, b) => (a.order || 0) - (b.order || 0))
            .forEach((child, idx) => {
              processElement(child, baseOrder * 10 + idx + 1)
            })
        }
      }

      // 处理每个顶层元素
      elements.forEach((element, index) => {
        processElement(element, (slideIndex + 1) * 10 + index + 1)
      })
    },
  },
}
</script>
<style scoped lang="less">
.pptx-container {
  width: 100%;
  height: 100%;
  z-index: 99;
}
</style>