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:25:59
 * @Description:
-->
<template>
  <div id="pptx-container" ref="pptxContainer" class="pptx-container"></div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue"

const props = defineProps({
  pptxJson: Object,
})

const pptxContainer = ref(null)

// 渲染幻灯片
const renderSlides = () => {
  console.log("props.pptxJson", props.pptxJson)
  if (!pptxContainer.value || !props.pptxJson) return

  pptxContainer.value.innerHTML = ""
  const { size, slides } = props.pptxJson

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

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

    // 添加幻灯片到容器
    pptxContainer.value.appendChild(slideElement)
  })
  // 为所有p标签应用样式
  const pTags = pptxContainer.value.querySelectorAll("p")
  pTags.forEach((p) => {
    p.style.margin = "0px"
    p.style.padding = "0px"
    p.style.wordBreak = "break-word"
    p.style.lineHeight = "1"
  })
  const ulTags = pptxContainer.value.querySelectorAll("ul")
  ulTags.forEach((ul) => {
    ul.style.wordBreak = "break-word"
    ul.style.lineHeight = "1"
    ul.style.padding = "auto 0px"
    ul.style.margin = "0px"
  })
  const olTags = pptxContainer.value.querySelectorAll("ol")
  olTags.forEach((ol) => {
    ol.style.margin = "0px"
    ol.style.padding = "auto 0px"
    ol.style.wordBreak = "break-word"
    ol.style.lineHeight = "1"
  })
}

// 创建幻灯片元素
const createSlideElement = (width, height) => {
  const slideElement = document.createElement("div")
  slideElement.className = "slide"
  slideElement.style.position = "relative"
  slideElement.style.width = width + "px"
  slideElement.style.height = height + "px"
  slideElement.style.border = "1px solid #ccc"
  slideElement.style.margin = "0px auto"
  slideElement.style.marginBottom = "20px"
  slideElement.style.overflow = "hidden"
  return slideElement
}

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

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

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

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

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

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

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

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

// 根据元素类型创建DOM元素
const createElementByType = (element) => {
  switch (element.type) {
    case "image":
      return createImageElement(element)
    case "video":
      return createVideoElement(element)
    case "audio":
      return createAudioElement(element)
    case "shape":
      return createShapeElement(element)
    case "table":
      return createTableElement(element)
    case "chart":
      return createChartElement(element)
    case "diagram":
      return createDiagramElement(element)
    case "math":
      return createMathElement(element)
    case "group":
      return createGroupElement(element)
    default:
      return createTextElement(element)
  }
}

// 创建组合元素
const createGroupElement = (element) => {
  // 创建组合容器
  const groupContainer = document.createElement("div")
  groupContainer.className = "group-element"
  groupContainer.style.position = "absolute"
  groupContainer.style.top = element.top + "px"
  groupContainer.style.left = element.left + "px"
  groupContainer.style.width = element.width + "px"
  groupContainer.style.height = element.height + "px"
  groupContainer.style.zIndex = element.order
  groupContainer.style.transformOrigin = "center center"

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

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

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

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

  groupContainer.appendChild(innerContainer)
  return groupContainer
}

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

  return img
}

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

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

// 创建形状元素
const createShapeElement = (element) => {
  const el = document.createElement("div")
  el.style.position = "absolute"
  el.style.top = element.top + "px"
  el.style.left = element.left + "px"
  el.style.width = element.width + "px"
  el.style.height = element.height + "px"
  el.style.zIndex = element.order
  el.style.overflow = "visible"
  if (element.height === 0) {
    // 如果高度为0，直接在div上绘制边框
    el.style.borderTop = `${element.borderWidth || 1}px ${
      element.borderType || "solid"
    } ${element.borderColor || "#000"}`
  }
  // 使用SVG绘制形状
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
  svg.setAttribute("width", "100%")
  svg.setAttribute("height", "100%")
  svg.setAttribute("viewBox", `0 0 ${element.width} ${element.height}`)
  svg.style.overflow = "visible"

  const setBackground = (element, shape) => {
    if (element.fill && element.fill.type) {
      // 设置填充色
      if (element.fill.type === "color") {
        shape.setAttribute("fill", element.fill.value || "transparent")
      } else if (element.fill.type === "gradient") {
        // 渐变填充
        const { colors, path, rot } = element.fill.value

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

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

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

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

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

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

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

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

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

        pattern.appendChild(image)

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

        // 应用图案填充
        shape.setAttribute("fill", `url(#${patternId})`)
      } else {
        shape.setAttribute("fill", "transparent")
      }
    } else {
      shape.setAttribute("fill", "#ffffff00")
    }
  }

  // 根据形状类型创建不同的SVG元素
  switch (element.shapType) {
    case "roundRect":
      const radius = Math.min(element.width, element.height) * 0.1
      const roundRect = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "rect"
      )
      roundRect.setAttribute("x", 0)
      roundRect.setAttribute("y", 0)
      roundRect.setAttribute("width", element.width)
      roundRect.setAttribute("height", element.height)
      roundRect.setAttribute("rx", radius)
      roundRect.setAttribute("ry", radius)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      svg.appendChild(hexagon)
      break

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

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

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

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

      svg.appendChild(octagon)
      break

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

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

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

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

      svg.appendChild(trapezoid)
      break

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      // 内圆
      const innerCircle = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "circle"
      )
      const fmla = element?.formulas[0].split(" ")[1]
      console.log('fmla', fmla)
      innerCircle.setAttribute("cx", element.width / 2)
      innerCircle.setAttribute("cy", element.height / 2)
      innerCircle.setAttribute("r", Math.min(element.width, element.height)/2 * (1- Math.sqrt(fmla/100000)/2))

      // 设置填充色
      setBackground(element, outerCircle)
      innerCircle.setAttribute("fill", "white")

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

        outerCircle.setAttribute("stroke", borderColor)
        outerCircle.setAttribute("stroke-width", borderWidth)
        innerCircle.setAttribute("stroke", borderColor)
        innerCircle.setAttribute("stroke-width", borderWidth)

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

      donut.appendChild(outerCircle)
      donut.appendChild(innerCircle)
      svg.appendChild(donut)
      break
    case "noSmoking":
      const noSmoking = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "g"
      )

      // 创建路径
      const path = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "path"
      )
      path.setAttribute(
        "d",
        "M0,70 A77,70 0 1,1 0,71 Z M123.80284467265982,99.39738105155146 A57.5386,50.5386 0 0 0 45.160427644134444,27.90427466198293 Z M30.197155327340184,40.602618948448544 A57.5386,50.5386 0 0 0 108.83957235586556,112.09572533801708 Z"
      )
      path.setAttribute("fill", "rgba(255,217,102,1)")
      path.setAttribute("stroke", "rgba(23,44,81,1)")
      path.setAttribute("stroke-width", "1px")
      path.setAttribute("stroke-dasharray", "")
      path.setAttribute("stroke-linecap", "butt")
      path.setAttribute("stroke-linejoin", "round")

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      svg.appendChild(leftRightArrow)
      break
    case "upDownArrow":
      const upDownArrow = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "polygon"
      )
      upDownArrow.setAttribute(
        "points",
        `${element.width * 0.5},0 ${element.width * 0.3},${
          element.height * 0.2
        } ` +
          `${element.width * 0.4},${element.height * 0.2} ${
            element.width * 0.4
          },${element.height * 0.8} ` +
          `${element.width * 0.3},${element.height * 0.8} ${
            element.width * 0.5
          },${element.height} ` +
          `${element.width * 0.7},${element.height * 0.8} ${
            element.width * 0.6
          },${element.height * 0.8} ` +
          `${element.width * 0.6},${element.height * 0.2} ${
            element.width * 0.7
          },${element.height * 0.2}`
      )

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

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

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

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

      // 计算缩放比例
      const scale = Math.min(element.width / 167, element.height / 121)
      const offsetX = (element.width - 167 * scale) / 2
      const offsetY = (element.height - 121 * scale) / 2

      // 构建路径数据
      const pathData = `
            M${offsetX},${60.5 * scale + offsetY}
            L${27.225 * scale + offsetX},${33.275 * scale + offsetY}
            L${27.225 * scale + offsetX},${46.8875 * scale + offsetY}
            L${69.8875 * scale + offsetX},${46.8875 * scale + offsetY}
            L${69.8875 * scale + offsetX},${27.225 * scale + offsetY}
            L${56.275 * scale + offsetX},${27.225 * scale + offsetY}
            L${83.5 * scale + offsetX},${offsetY}
            L${110.725 * scale + offsetX},${27.225 * scale + offsetY}
            L${97.1125 * scale + offsetX},${27.225 * scale + offsetY}
            L${97.1125 * scale + offsetX},${46.8875 * scale + offsetY}
            L${139.775 * scale + offsetX},${46.8875 * scale + offsetY}
            L${139.775 * scale + offsetX},${33.275 * scale + offsetY}
            L${167 * scale + offsetX},${60.5 * scale + offsetY}
            L${139.775 * scale + offsetX},${87.725 * scale + offsetY}
            L${139.775 * scale + offsetX},${74.1125 * scale + offsetY}
            L${97.1125 * scale + offsetX},${74.1125 * scale + offsetY}
            L${97.1125 * scale + offsetX},${93.775 * scale + offsetY}
            L${110.725 * scale + offsetX},${93.775 * scale + offsetY}
            L${83.5 * scale + offsetX},${121 * scale + offsetY}
            L${56.275 * scale + offsetX},${93.775 * scale + offsetY}
            L${69.8875 * scale + offsetX},${93.775 * scale + offsetY}
            L${69.8875 * scale + offsetX},${74.1125 * scale + offsetY}
            L${27.225 * scale + offsetX},${74.1125 * scale + offsetY}
            L${27.225 * scale + offsetX},${87.725 * scale + offsetY}
            Z`

      quadArrow.setAttribute("d", pathData)

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

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

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

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

      // 计算缩放比例
      const scale2 = Math.min(element.width / 167, element.height / 121)
      const offsetX2 = (element.width - 167 * scale2) / 2
      const offsetY2 = (element.height - 121 * scale2) / 2

      // 构建路径数据
      const pathData2 = `
            M${offsetX2},${60.5 * scale2 + offsetY2}
            L${27.225 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
            L${27.225 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
            L${69.8875 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
            L${69.8875 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
            L${56.275 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
            L${83.5 * scale2 + offsetX2},${offsetY2}
            L${110.725 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
            L${97.1125 * scale2 + offsetX2},${27.225 * scale2 + offsetY2}
            L${97.1125 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
            L${139.775 * scale2 + offsetX2},${46.8875 * scale2 + offsetY2}
            L${139.775 * scale2 + offsetX2},${33.275 * scale2 + offsetY2}
            L${167 * scale2 + offsetX2},${60.5 * scale2 + offsetY2}
            L${139.775 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
            L${139.775 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
            L${97.1125 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
            L${69.8875 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
            L${27.225 * scale2 + offsetX2},${74.1125 * scale2 + offsetY2}
            L${27.225 * scale2 + offsetX2},${87.725 * scale2 + offsetY2}
            Z`

      leftRightUpArrow.setAttribute("d", pathData2)

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

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

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

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

      // 构建路径数据
      const pathData3 = `
            M0,${element.height * 0.88}
            L0,${element.height * 0.495}
            A${element.width * 0.385} ${element.height * 0.385} 0 0 1 ${
        element.width * 0.385
      } ${element.height * 0.11}
            L${element.width * 0.67},${element.height * 0.11}
            L${element.width * 0.67},0
            L${element.width * 0.89},${element.height * 0.22}
            L${element.width * 0.67},${element.height * 0.44}
            L${element.width * 0.67},${element.height * 0.33}
            L${element.width * 0.385},${element.height * 0.33}
            A${element.width * 0.165} ${element.height * 0.165} 0 0 0 ${
        element.width * 0.22
      } ${element.height * 0.495}
            L${element.width * 0.22},${element.height * 0.88}
            Z`

      bentArrow.setAttribute("d", pathData3)

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

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

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

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

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

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

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

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

      // 构建路径数据
      const pathDataUturn = `
            M0,${element.height * 0.745}
            L0,${element.height * 0.179375}
            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
        element.width * 0.179375
      },0
            L${element.width * 0.179375},0
            A${element.width * 0.179375} ${element.height * 0.179375} 0 0 1 ${
        element.width * 0.359375
      },${element.height * 0.179375}
            L${element.width * 0.359375},${element.height * 0.205}
            L${element.width * 0.41},${element.height * 0.205}
            L${element.width * 0.3075},${element.height * 0.3075}
            L${element.width * 0.205},${element.height * 0.205}
            L${element.width * 0.25625},${element.height * 0.205}
            L${element.width * 0.25625},${element.height * 0.179375}
            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
        element.width * 0.179375
      },${element.height * 0.1025}
            L${element.width * 0.179375},${element.height * 0.1025}
            A${element.width * 0.076875} ${element.height * 0.076875} 0 0 0 ${
        element.width * 0.1025
      },${element.height * 0.179375}
            L${element.width * 0.1025},${element.height * 0.745}
            Z`

      uturnArrow.setAttribute("d", pathDataUturn)

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

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

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

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

      // 使用提供的路径数据
      const pathDataLeftUp = `
            M0,${element.height * 0.65}
            L${element.width * 0.15},${element.height * 0.4}
            L${element.width * 0.15},${element.height * 0.55}
            L${element.width * 0.5},${element.height * 0.55}
            L${element.width * 0.5},${element.height * 0.1}
            L${element.width * 0.35},${element.height * 0.1}
            L${element.width * 0.65},0
            L${element.width * 0.85},${element.height * 0.1}
            L${element.width * 0.75},${element.height * 0.1}
            L${element.width * 0.75},${element.height * 0.85}
            L${element.width * 0.15},${element.height * 0.85}
            L${element.width * 0.15},${element.height * 1}
            Z`

      leftUpArrow.setAttribute("d", pathDataLeftUp)

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

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

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

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

      // 构建路径数据，去掉左侧箭头
      // 使用提供的路径数据
      const pathDataBentUp = `
            M0,${element.height * 0.89}
            L0,${element.height * 0.7}
            L${element.width * 0.575},${element.height * 0.7}
            L${element.width * 0.575},${element.height * 0.2}
            L${element.width * 0.46},${element.height * 0.2}
            L${element.width * 0.69},0
            L${element.width * 0.92},${element.height * 0.2}
            L${element.width * 0.805},${element.height * 0.2}
            L${element.width * 0.805},${element.height * 0.89}
            Z`

      bentUpArrow.setAttribute("d", pathDataBentUp)

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

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

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

      // 使用提供的路径数据
      const pathDataCurvedRight = `
            M${element.width},0
            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
        element.height * 0.4
      }
            L0,${element.height * 0.5}
            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
        element.height * 0.15
      }
            Z
            M0,${element.height * 0.4}
            A${element.width} ${element.height * 0.4} 0 0 0 ${
        element.width * 0.8
      } ${element.height * 0.8}
            L${element.width * 0.8},${element.height * 0.75}
            L${element.width},${element.height * 0.875}
            L${element.width * 0.8},${element.height * 1}
            L${element.width * 0.8},${element.height * 0.95}
            A${element.width} ${element.height * 0.4} 0 0 1 0 ${
        element.height * 0.5
      }
            Z`

      curvedRightArrow.setAttribute("d", pathDataCurvedRight)

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

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

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

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

      // 定义左弧形箭头的路径数据
      const pathDataCurvedLeft = `
            M0,0
            A${element.width} ${element.height * 0.4} 0 0 1 ${element.width} ${
        element.height * 0.4
      }
            L${element.width},${element.height * 0.55}
            A${element.width} ${element.height * 0.4} 0 0 0 0 ${
        element.height * 0.15
      }
            Z
            M0,${element.height * 0.85}
            L${element.width * 0.25},${element.height * 0.65}
            L${element.width * 0.25},${element.height * 0.75}
            A${element.width} ${element.height * 0.4} 0 0 0 ${element.width} ${
        element.height * 0.4
      }
            L${element.width},${element.height * 0.5}
            L${element.width},${element.height * 0.5}
            A${element.width} ${element.height * 0.4} 0 0 1 ${
        element.width * 0.25
      } ${element.height * 0.9}
            L${element.width * 0.25},${element.height}
            Z`

      curvedLeftArrow.setAttribute("d", pathDataCurvedLeft)

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

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

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

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

      // 定义上弧形箭头的路径数据
      const pathDataCurvedUp = `
            M${element.width * 0.905},0
            L${element.width * 0.81},${element.height * 0.25}
            L${element.width * 0.857},${element.height * 0.25}
            A${element.width * 0.428} ${element.height} 0 0 1 ${
        element.width * 0.428
      },${element.height}
            L${element.width * 0.522},${element.height}
            A${element.width * 0.428} ${element.height} 0 0 0 ${
        element.width * 0.952
      },${element.height * 0.25}
            L${element.width},${element.height * 0.25}
            Z
            M${element.width * 0.094},0
            L0,0
            A${element.width * 0.428} ${element.height} 0 0 0 ${
        element.width * 0.428
      },${element.height}
            L${element.width * 0.522},${element.height}
            A${element.width * 0.428} ${element.height} 0 0 1 ${
        element.width * 0.094
      },0
            Z`

      curvedUpArrow.setAttribute("d", pathDataCurvedUp)

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

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

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

      // 定义下弧形箭头的路径数据
      const pathDataCurvedDown = `
            M0,${element.height}
            L${element.width * 0.16},${element.height}
            A${element.width * 0.46} ${element.height} 0 0 1 ${
        element.width * 0.62
      },0
            L${element.width * 0.46},0
            A${element.width * 0.46} ${element.height} 0 0 0 0,${element.height}
            Z
            M${element.width},${element.height}
            L${element.width * 0.84},${element.height * 0.75}
            L${element.width * 0.92},${element.height * 0.75}
            A${element.width * 0.46} ${element.height} 0 0 0 ${
        element.width * 0.46
      },0
            L${element.width * 0.62},0
            A${element.width * 0.46} ${element.height} 0 0 1 ${
        element.width * 1.08
      },${element.height * 0.75}
            L${element.width * 1.16},${element.height * 0.75}
            Z`

      curvedDownArrow.setAttribute("d", pathDataCurvedDown)

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

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

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

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

      // 主箭头部分
      const mainArrow = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "path"
      )
      mainArrow.setAttribute(
        "d",
        `M${element.width * 0.062},${element.height * 0.25}
            L${element.width * 0.8},${element.height * 0.25}
            L${element.width * 0.8},0
            L${element.width},${element.height * 0.5}
            L${element.width * 0.8},${element.height}
            L${element.width * 0.8},${element.height * 0.75}
            L${element.width * 0.062},${element.height * 0.75}
            Z`
      )

      // 第一条尾部条纹
      const stripe1 = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "path"
      )
      stripe1.setAttribute(
        "d",
        `M0,${element.height * 0.25}
            L${element.width * 0.012},${element.height * 0.25}
            L${element.width * 0.012},${element.height * 0.75}
            L0,${element.height * 0.75}
            Z`
      )

      // 第二条尾部条纹
      const stripe2 = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "path"
      )
      stripe2.setAttribute(
        "d",
        `M${element.width * 0.025},${element.height * 0.25}
            L${element.width * 0.049},${element.height * 0.25}
            L${element.width * 0.049},${element.height * 0.75}
            L${element.width * 0.025},${element.height * 0.75}
            Z`
      )

      // 设置填充色
      setBackground(element, mainArrow)
      setBackground(element, stripe1)
      setBackground(element, stripe2)
      // 设置边框
      if (element.borderWidth > 0) {
        ;[mainArrow, stripe1, stripe2].forEach((path) => {
          path.setAttribute("stroke", element.borderColor || "#000")
          path.setAttribute("stroke-width", element.borderWidth || 1)
          path.setAttribute("stroke-linecap", "butt")
          path.setAttribute("stroke-linejoin", "round")

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

      stripedRightArrow.appendChild(mainArrow)
      stripedRightArrow.appendChild(stripe1)
      stripedRightArrow.appendChild(stripe2)
      svg.appendChild(stripedRightArrow)
      break
    case "rightArrowCallout":
      const rightArrowCallout = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "path"
      )

      rightArrowCallout.setAttribute(
        "d",
        `M0,0
            L${element.width * 0.44},0
            L${element.width * 0.44},${element.height * 0.375}
            L${element.width * 0.79},${element.height * 0.375}
            L${element.width * 0.79},${element.height * 0.25}
            L${element.width},${element.height * 0.5}
            L${element.width * 0.79},${element.height * 0.75}
            L${element.width * 0.79},${element.height * 0.625}
            L${element.width * 0.44},${element.height * 0.625}
            L${element.width * 0.44},${element.height}
            L0,${element.height}
            Z`
      )

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

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

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

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

      leftRightArrowCallout.setAttribute(
        "d",
        `M0,${element.height * 0.5}
            L${element.width * 0.139},${element.height * 0.25}
            L${element.width * 0.139},${element.height * 0.375}
            L${element.width * 0.364},${element.height * 0.375}
            L${element.width * 0.364},0
            L${element.width * 0.636},0
            L${element.width * 0.636},${element.height * 0.375}
            L${element.width * 0.861},${element.height * 0.375}
            L${element.width * 0.861},${element.height * 0.25}
            L${element.width},${element.height * 0.5}
            L${element.width * 0.861},${element.height * 0.75}
            L${element.width * 0.861},${element.height * 0.625}
            L${element.width * 0.636},${element.height * 0.625}
            L${element.width * 0.636},${element.height}
            L${element.width * 0.364},${element.height}
            L${element.width * 0.364},${element.height * 0.625}
            L${element.width * 0.139},${element.height * 0.625}
            L${element.width * 0.139},${element.height * 0.75}
            Z`
      )

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

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

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

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

      quadArrowCallout.setAttribute(
        "d",
        `M0,${element.height * 0.5}
            L${element.width * 0.096},${element.height * 0.315}
            L${element.width * 0.096},${element.height * 0.407}
            L${element.width * 0.26},${element.height * 0.407}
            L${element.width * 0.26},${element.height * 0.259}
            L${element.width * 0.453},${element.height * 0.259}
            L${element.width * 0.453},${element.height * 0.185}
            L${element.width * 0.405},${element.height * 0.185}
            L${element.width * 0.5},0
            L${element.width * 0.595},${element.height * 0.185}
            L${element.width * 0.547},${element.height * 0.185}
            L${element.width * 0.547},${element.height * 0.259}
            L${element.width * 0.74},${element.height * 0.259}
            L${element.width * 0.74},${element.height * 0.407}
            L${element.width * 0.904},${element.height * 0.407}
            L${element.width * 0.904},${element.height * 0.315}
            L${element.width},${element.height * 0.5}
            L${element.width * 0.904},${element.height * 0.685}
            L${element.width * 0.904},${element.height * 0.593}
            L${element.width * 0.74},${element.height * 0.593}
            L${element.width * 0.74},${element.height * 0.741}
            L${element.width * 0.547},${element.height * 0.741}
            L${element.width * 0.547},${element.height * 0.815}
            L${element.width * 0.595},${element.height * 0.815}
            L${element.width * 0.5},${element.height}
            L${element.width * 0.405},${element.height * 0.815}
            L${element.width * 0.453},${element.height * 0.815}
            L${element.width * 0.453},${element.height * 0.741}
            L${element.width * 0.26},${element.height * 0.741}
            L${element.width * 0.26},${element.height * 0.593}
            L${element.width * 0.096},${element.height * 0.593}
            L${element.width * 0.096},${element.height * 0.685}
            Z`
      )

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

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

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

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

      leftArrowCallout.setAttribute(
        "d",
        `M0,${element.height * 0.5}
            L${element.width * 0.183},${element.height * 0.25}
            L${element.width * 0.183},${element.height * 0.375}
            L${element.width * 0.35},${element.height * 0.375}
            L${element.width * 0.35},0
            L${element.width},0
            L${element.width},${element.height}
            L${element.width * 0.35},${element.height}
            L${element.width * 0.35},${element.height * 0.625}
            L${element.width * 0.183},${element.height * 0.625}
            L${element.width * 0.183},${element.height * 0.75}
            Z`
      )

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

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

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

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

      upArrowCallout.setAttribute(
        "d",
        `M0,${element.height * 0.35}
            L${element.width * 0.41},${element.height * 0.35}
            L${element.width * 0.41},${element.height * 0.25}
            L${element.width * 0.32},${element.height * 0.25}
            L${element.width * 0.5},0
            L${element.width * 0.68},${element.height * 0.25}
            L${element.width * 0.59},${element.height * 0.25}
            L${element.width * 0.59},${element.height * 0.35}
            L${element.width},${element.height * 0.35}
            L${element.width},${element.height}
            L0,${element.height}
            Z`
      )

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

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

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

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

      notchedRightArrow.setAttribute(
        "d",
        `M0,${element.height * 0.25}
            L${element.width * 0.83},${element.height * 0.25}
            L${element.width * 0.83},0
            L${element.width},${element.height * 0.5}
            L${element.width * 0.83},${element.height}
            L${element.width * 0.83},${element.height * 0.75}
            L0,${element.height * 0.75}
            L${element.width * 0.086},${element.height * 0.5}
            Z`
      )

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

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

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

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

      homePlate.setAttribute(
        "d",
        `M0,0
            L${element.width * 0.925},0
            L${element.width},${element.height * 0.5}
            L${element.width * 0.925},${element.height}
            L0,${element.height}
            Z`
      )

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

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

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

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

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

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

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

      svg.appendChild(rightTriangle)
      break
    case "semiCircle":
      const semiCircle = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "path"
      )
      semiCircle.setAttribute(
        "d",
        `M0,${element.height} A${element.width / 2},${element.height} 0 0,1 ${
          element.width
        },${element.height} Z`
      )

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

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

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

      svg.appendChild(semiCircle)
      break

    case "star":
      const star = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "polygon"
      )
      const cx = element.width / 2
      const cy = element.height / 2
      const outerRadius = Math.min(element.width, element.height) / 2
      const innerRadius = outerRadius * 0.4
      let starPoints = ""

      for (let i = 0; i < 10; i++) {
        const radius = i % 2 === 0 ? outerRadius : innerRadius
        const angle = (Math.PI * i) / 5
        const x = cx + radius * Math.sin(angle)
        const y = cy - radius * Math.cos(angle)
        starPoints += `${x},${y} `
      }

      star.setAttribute("points", starPoints.trim())

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

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

      svg.appendChild(star)
      break

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

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

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

      svg.appendChild(cross)
      break

    case "chevron":
      const chevron = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "polygon"
      )

      chevron.setAttribute(
        "points",
        `${element.width * 0.5},0 ${element.width},${element.height * 0.5} ` +
          `${element.width * 0.5},${element.height} ` +
          `0,${element.height} ${element.width * 0.5},${
            element.height * 0.5
          } 0,0`
      )

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

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

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

      svg.appendChild(chevron)
      break

    case "frame":
      // 创建外框和内框
      const outerRect = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "rect"
      )
      outerRect.setAttribute("x", 0)
      outerRect.setAttribute("y", 0)
      outerRect.setAttribute("width", element.width)
      outerRect.setAttribute("height", element.height)

      const innerRect = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "rect"
      )
      const frameWidth = element.width / 10
      innerRect.setAttribute("x", frameWidth)
      innerRect.setAttribute("y", frameWidth)
      innerRect.setAttribute("width", element.width - frameWidth * 2)
      innerRect.setAttribute("height", element.height - frameWidth * 2)

      // 设置填充色
      setBackground(element, outerRect)
      innerRect.setAttribute("fill", "white") // 内框为白色
      // 设置边框
      if (element.borderWidth > 0) {
        outerRect.setAttribute("stroke", element.borderColor || "#000")
        outerRect.setAttribute("stroke-width", element.borderWidth || 1)

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

      svg.appendChild(outerRect)
      svg.appendChild(innerRect)
      break

    case "cloud":
      // 使用路径绘制云形
      const cloud = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "path"
      )
      const w = element.width
      const h = element.height

      cloud.setAttribute(
        "d",
        `M${w * 0.2},${h * 0.6} ` +
          `C${w * 0.05},${h * 0.6} ${w * 0.05},${h * 0.3} ${w * 0.2},${
            h * 0.3
          } ` +
          `C${w * 0.2},${h * 0.1} ${w * 0.45},${h * 0.1} ${w * 0.5},${
            h * 0.3
          } ` +
          `C${w * 0.55},${h * 0.1} ${w * 0.8},${h * 0.1} ${w * 0.8},${
            h * 0.3
          } ` +
          `C${w * 0.95},${h * 0.3} ${w * 0.95},${h * 0.6} ${w * 0.8},${
            h * 0.6
          } ` +
          `L${w * 0.2},${h * 0.6} Z`
      )

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

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

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

      // 计算弧形参数
      const rx = element.width / 2
      const ry = element.height / 2
      const innerRatio = 0.86 // 根据示例计算的内弧半径比例
      const innerRx = rx * innerRatio
      const innerRy = ry * innerRatio

      // 构建路径
      const path2 = `
            M 0,${ry}
            A ${rx} ${ry} 0 1 1 ${element.width} ${ry}
            L ${element.width - (rx - innerRx)},${ry}
            A ${innerRx} ${innerRy} 0 1 0 ${rx - innerRx},${ry}
            Z`

      blockArc.setAttribute("d", path2.trim())

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

      // 设置边框
      if (element.borderWidth > 0) {
        blockArc.setAttribute("stroke", element.borderColor || "#000")
        blockArc.setAttribute("stroke-width", element.borderWidth || 1)
        if (
          element.borderType === "dotted" ||
          element.borderType === "dashed"
        ) {
          if (element.borderStrokeDasharray) {
            blockArc.setAttribute(
              "stroke-dasharray",
              element.borderStrokeDasharray
            )
          } else if (element.borderType === "dotted") {
            blockArc.setAttribute("stroke-dasharray", "1, 3")
          } else if (element.borderType === "dashed") {
            blockArc.setAttribute("stroke-dasharray", "5, 5")
          }
        }
      }

      svg.appendChild(blockArc)
      break

    case "rect":
    default:
      const rect = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "rect"
      )
      rect.setAttribute("x", 0)
      rect.setAttribute("y", 0)
      rect.setAttribute("width", element.width)
      rect.setAttribute("height", element.height)
      if (element.fill && element.fill.type) {
        // 设置填充色
        if (element.fill.type === "color") {
          rect.setAttribute("fill", element.fill.value || "transparent")
        } else if (element.fill.type === "gradient") {
          // 渐变填充
          const { colors, path, rot } = element.fill.value

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

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

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

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

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

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

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

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

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

          pattern.appendChild(image)

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

          // 应用图案填充
          rect.setAttribute("fill", `url(#${patternId})`)
        } else {
          rect.setAttribute("fill", "transparent")
        }
      } else {
        rect.setAttribute("fill", "#ffffff00")
      }

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

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

      svg.appendChild(rect)
      break
  }

  const transformList = []
  let rotateDeg = element.rotate || 0

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

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

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

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

  el.appendChild(svg)

  // 设置形状内容
  if (element.content) {
    const contentContainer = document.createElement("div")
    contentContainer.innerHTML = convertPtToPxInContent(element.content)
    contentContainer.style.position = "absolute"
    contentContainer.style.width = element.width + "px"
    contentContainer.style.height = element.height + "px"
    contentContainer.style.top = "0px"
    contentContainer.style.left = "0px"
    contentContainer.style.display = "flex"
    contentContainer.style.alignItems = "center"
    contentContainer.style.justifyContent = "center"
    contentContainer.style.zIndex = element.order
    contentContainer.style.pointerEvents = "none"
    const transformList = []
    let rotateDeg = element.rotate || 0

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

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

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

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

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

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

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

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

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

        const td = document.createElement("td")

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

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

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

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

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

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

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

  return el
}

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

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

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

  el.appendChild(svg)
  return el
}

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

  // 递归渲染SmartArt节点
  const renderDiagramNode = (node) => {
    const nodeEl = document.createElement("div")
    nodeEl.style.position = "absolute"
    nodeEl.style.left = node.left + "px"
    nodeEl.style.top = node.top + "px"
    nodeEl.style.width = node.width + "px"
    nodeEl.style.height = node.height + "px"

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

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

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

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

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

    return nodeEl
  }

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

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

  return el
}

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

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

  // 设置数学公式内容
  if (element.mathXml) {
    // 如果有MathML格式的内容
    try {
      // 创建MathML命名空间的元素
      const mathEl = document.createElementNS(
        "http://www.w3.org/1998/Math/MathML",
        "math"
      )
      mathEl.innerHTML = element.mathXml
      el.appendChild(mathEl)
    } catch (error) {
      console.error("创建MathML元素失败:", error)
      // 回退方案：直接显示文本
      el.textContent = element.text || "数学公式"
    }
  } else if (element.text) {
    // 如果只有文本内容
    el.textContent = element.text
  }

  // 应用样式
  if (element.style) {
    // 字体样式
    if (element.style.fontFamily) {
      el.style.fontFamily = element.style.fontFamily
    }

    // 字体大小
    if (element.style.fontSize) {
      el.style.fontSize = element.style.fontSize + "px"
    }

    // 字体颜色
    if (element.style.color) {
      el.style.color = element.style.color
    }
  }

  // 应用背景色
  if (element.fill && element.fill.type === "color") {
    el.style.backgroundColor = element.fill.value
  }

  // 应用边框
  if (element.borderColor && element.borderWidth) {
    el.style.border = `${element.borderWidth}px ${
      element.borderType || "solid"
    } ${element.borderColor}`
  }

  return el
}

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

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

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

    // 设置段落间距
    el.style.lineHeight = element.lineHeight + "px" || "1.2"
    el.style.letterSpacing = element.charSpacing
      ? `${element.charSpacing}px`
      : "normal"
  }
  return el
}

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

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

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

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

  return adjustedElement
}

// 绘制类别标签
const drawCategoryLabels = (svg, categories, padding, groupWidth, barDir) => {
  if (!categories || !categories.length) return

  // 创建标签组
  const labelGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")
  labelGroup.setAttribute("class", "category-labels")

  // 计算标签位置
  const isVertical = barDir === "vertical"
  const labelSpacing = groupWidth

  // 绘制每个类别标签
  categories.forEach((category, index) => {
    const label = document.createElementNS("http://www.w3.org/2000/svg", "text")

    // 设置标签文本
    label.textContent = category

    // 设置标签样式
    label.setAttribute("font-size", "12")
    label.setAttribute("text-anchor", isVertical ? "middle" : "start")

    // 设置标签位置
    if (isVertical) {
      // 垂直条形图，标签在底部
      label.setAttribute("x", padding + index * labelSpacing + labelSpacing / 2)
      label.setAttribute("y", svg.getAttribute("height") - padding / 3)
      label.setAttribute("dominant-baseline", "hanging")
    } else {
      // 水平条形图，标签在左侧
      label.setAttribute("x", padding / 2)
      label.setAttribute("y", padding + index * labelSpacing + labelSpacing / 2)
      label.setAttribute("dominant-baseline", "middle")
      label.setAttribute("text-anchor", "end")
    }

    // 添加标签到组
    labelGroup.appendChild(label)
  })

  // 将标签组添加到SVG
  svg.appendChild(labelGroup)

  return labelGroup
}

/**
 * 绘制甜甜圈图表
 * @param {SVGElement} svg - SVG容器元素
 * @param {Object} element - 图表配置对象
 * @param {number} chartWidth - 图表宽度
 * @param {number} chartHeight - 图表高度
 */
const drawDonutChart = (svg, element, chartWidth, chartHeight) => {
  // 数据验证
  if (!element?.data?.[0]?.values) return

  const series = element.data[0]
  const values = series.values.map((v) => Number(v.y) || 0)
  const total = values.reduce((sum, v) => sum + v, 0)
  if (total === 0) return

  // 基础配置
  const cx = chartWidth / 2
  const cy = chartHeight / 2
  // 保持较大的外半径
  const outerR = (Math.min(chartWidth, chartHeight) / 2) * 0.98

  // 处理空心大小
  const holeSize = element.holeSize ? parseInt(element.holeSize) : 50
  const innerR = outerR * (holeSize / 100)

  // 默认颜色和自定义颜色处理
  const defaultColors = [
    "#4e79a7",
    "#f28e2b",
    "#e15759",
    "#76b7b2",
    "#59a14f",
    "#edc949",
    "#af7aa1",
    "#ff9da7",
  ]
  const colors =
    element.colors?.map(
      (color, i) => color || defaultColors[i % defaultColors.length]
    ) || defaultColors

  // 标签数据
  const labels = series.xlabels || {}

  // 创建图表组
  const chartGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")
  chartGroup.setAttribute("transform", `translate(${cx},${cy})`)

  // 绘制扇形
  let startAngle = -Math.PI / 2 // 从顶部开始绘制
  values.forEach((value, index) => {
    if (value <= 0) return

    const percentage = value / total
    const angle = percentage * Math.PI * 2
    const endAngle = startAngle + angle

    // 计算路径点 (相对于组中心 0,0)
    const x1 = outerR * Math.cos(startAngle)
    const y1 = outerR * Math.sin(startAngle)
    const x2 = outerR * Math.cos(endAngle)
    const y2 = outerR * Math.sin(endAngle)
    const x3 = innerR * Math.cos(endAngle)
    const y3 = innerR * Math.sin(endAngle)
    const x4 = innerR * Math.cos(startAngle)
    const y4 = innerR * Math.sin(startAngle)

    // 构建路径
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
    const largeArc = angle > Math.PI ? 1 : 0
    const d = [
      `M ${x1} ${y1}`,
      `A ${outerR} ${outerR} 0 ${largeArc} 1 ${x2} ${y2}`,
      `L ${x3} ${y3}`,
      `A ${innerR} ${innerR} 0 ${largeArc} 0 ${x4} ${y4}`,
      "Z",
    ].join(" ")

    path.setAttribute("d", d)
    path.setAttribute("fill", colors[index % colors.length]) // 确保颜色循环使用

    // 添加交互效果
    path.style.transition = "transform 0.2s"
    path.addEventListener("mouseover", () => {
      path.style.transform = "scale(1.03)"
    })
    path.addEventListener("mouseout", () => {
      path.style.transform = "scale(1)"
    })

    chartGroup.appendChild(path)

    // 添加标签
    const midAngle = startAngle + angle / 2
    const labelR = outerR * 1.1
    const labelX = labelR * Math.cos(midAngle)
    const labelY = labelR * Math.sin(midAngle)

    const text = document.createElementNS("http://www.w3.org/2000/svg", "text")
    text.setAttribute("x", labelX)
    text.setAttribute("y", labelY)
    text.setAttribute("text-anchor", labelX < 0 ? "end" : "start")
    text.setAttribute("dominant-baseline", "middle")
    text.setAttribute("fill", "#555")
    text.setAttribute("font-size", "9")
    text.setAttribute("font-weight", "normal")
    const tspanLabel = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "tspan"
    )
    tspanLabel.setAttribute("x", labelX)
    tspanLabel.textContent = labels[index] || `类别 ${index + 1}`
    text.appendChild(tspanLabel)
    const tspanPercent = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "tspan"
    )
    tspanPercent.setAttribute("x", labelX)
    tspanPercent.setAttribute("dy", "1.2em")
    tspanPercent.textContent = `${(percentage * 100).toFixed(1)}%`
    text.appendChild(tspanPercent)

    chartGroup.appendChild(text)

    startAngle = endAngle
  })

  svg.appendChild(chartGroup)
  const padding = 50
  svg.setAttribute(
    "viewBox",
    `${-cx / 2} ${-cy / 2} ${chartWidth + padding * 2} ${
      chartHeight + padding * 2
    }`
  )
  svg.style.overflow = "visible"
}

const drawBarChart = (svg, element, options) => {
  const { padding, chartWidth, chartHeight, barDir, grouping } = options
  const series = element.data
  const categories = series[0].xlabels
  const categoryCount = Object.keys(categories).length

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    const text = document.createElementNS("http://www.w3.org/2000/svg", "text")
    text.setAttribute("x", legendX + 25)
    text.setAttribute("y", legendY + 12)
    text.setAttribute("font-size", "12px")
    text.textContent = serie.key
    svg.appendChild(text)
  })
}

// 绘制网格线
const drawGrid = (svg, padding, width, height, maxValue) => {
  // 创建网格组
  const gridGroup = document.createElementNS("http://www.w3.org/2000/svg", "g")
  gridGroup.setAttribute("class", "chart-grid")

  // 设置网格线样式
  const gridColor = "#e0e0e0"
  const gridWidth = 1

  // 计算网格间距
  const gridCount = 5 // 网格线数量
  const gridStep = (height - padding * 2) / gridCount

  // 绘制水平网格线
  for (let i = 0; i <= gridCount; i++) {
    const y = padding + i * gridStep
    const line = document.createElementNS("http://www.w3.org/2000/svg", "line")

    line.setAttribute("x1", padding)
    line.setAttribute("y1", y)
    line.setAttribute("x2", width - padding)
    line.setAttribute("y2", y)
    line.setAttribute("stroke", gridColor)
    line.setAttribute("stroke-width", gridWidth)

    // 如果是底线，加粗显示
    if (i === gridCount) {
      line.setAttribute("stroke-width", gridWidth * 2)
      line.setAttribute("stroke", "#aaa")
    }

    gridGroup.appendChild(line)

    // 添加刻度值（除了底线）
    if (i < gridCount) {
      const valueText = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "text"
      )
      const value = Math.round((gridCount - i) * (maxValue / gridCount))

      valueText.textContent = value
      valueText.setAttribute("x", padding - 5)
      valueText.setAttribute("y", y)
      valueText.setAttribute("text-anchor", "end")
      valueText.setAttribute("dominant-baseline", "middle")
      valueText.setAttribute("font-size", "10")
      valueText.setAttribute("fill", "#666")

      gridGroup.appendChild(valueText)
    }
  }

  // 添加网格组到SVG
  svg.appendChild(gridGroup)

  return gridGroup
}

// 绘制图表图例
const drawLegend = (svg, series, colors, padding) => {
  // 创建图例容器
  const legendGroup = document.createElementNS(
    "http://www.w3.org/2000/svg",
    "g"
  )
  legendGroup.setAttribute("class", "chart-legend")

  // 设置图例位置
  const legendX = padding
  const legendY = padding
  let currentY = legendY

  // 为每个系列创建图例项
  series.forEach((item, index) => {
    const itemGroup = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "g"
    )
    itemGroup.setAttribute("transform", `translate(${legendX}, ${currentY})`)

    // 创建图例颜色标记
    const colorMark = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "rect"
    )
    colorMark.setAttribute("width", "12")
    colorMark.setAttribute("height", "12")
    colorMark.setAttribute("fill", colors[index % colors.length])

    // 创建图例文本
    const text = document.createElementNS("http://www.w3.org/2000/svg", "text")
    text.setAttribute("x", "20")
    text.setAttribute("y", "10")
    text.setAttribute("font-size", "12")
    text.setAttribute("alignment-baseline", "middle")
    text.textContent = item.name || `系列 ${index + 1}`

    // 将元素添加到组中
    itemGroup.appendChild(colorMark)
    itemGroup.appendChild(text)
    legendGroup.appendChild(itemGroup)

    // 更新下一个图例项的Y坐标
    currentY += 20
  })

  // 将图例组添加到SVG中
  svg.appendChild(legendGroup)

  return legendGroup
}

// 调整颜色亮度
const adjustBrightness = (color, factor) => {
  // 如果颜色为空或不是字符串，返回原值
  if (!color || typeof color !== "string") return color

  // 处理十六进制颜色
  if (color.startsWith("#")) {
    let hex = color.substring(1)

    // 处理简写形式 (#RGB)
    if (hex.length === 3) {
      hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]
    }

    // 解析RGB值
    const r = parseInt(hex.substring(0, 2), 16)
    const g = parseInt(hex.substring(2, 4), 16)
    const b = parseInt(hex.substring(4, 6), 16)

    // 调整亮度
    const adjustedR = Math.min(255, Math.max(0, Math.round(r * factor)))
    const adjustedG = Math.min(255, Math.max(0, Math.round(g * factor)))
    const adjustedB = Math.min(255, Math.max(0, Math.round(b * factor)))

    // 转换回十六进制
    return `#${adjustedR.toString(16).padStart(2, "0")}${adjustedG
      .toString(16)
      .padStart(2, "0")}${adjustedB.toString(16).padStart(2, "0")}`
  }

  // 处理rgb/rgba颜色
  if (color.startsWith("rgb")) {
    const rgbMatch = color.match(
      /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
    )
    if (rgbMatch) {
      const r = parseInt(rgbMatch[1])
      const g = parseInt(rgbMatch[2])
      const b = parseInt(rgbMatch[3])
      const a = rgbMatch[4] !== undefined ? parseFloat(rgbMatch[4]) : 1

      // 调整亮度
      const adjustedR = Math.min(255, Math.max(0, Math.round(r * factor)))
      const adjustedG = Math.min(255, Math.max(0, Math.round(g * factor)))
      const adjustedB = Math.min(255, Math.max(0, Math.round(b * factor)))

      // 返回调整后的颜色
      return a < 1
        ? `rgba(${adjustedR}, ${adjustedG}, ${adjustedB}, ${a})`
        : `rgb(${adjustedR}, ${adjustedG}, ${adjustedB})`
    }
  }

  // 如果不是支持的颜色格式，返回原值
  return color
}

const convertPtToPxInContent = (content) => {
  if (!content) return ""

  // 使用正则表达式查找所有包含pt单位的样式
  const ptRegex = /(\d+(\.\d+)?)pt/g

  return content.replace(/(\d+\.?\d*)(pt|PT)/g, (match, size) => {
    // 将 pt 转换为 px（1pt ≈ 1.33333px）
    const pxSize = size
    return `${pxSize}px`
  })
}

const processElements = (elements, slideIndex) => {
  if (!elements || !Array.isArray(elements)) return

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

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

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

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

  // 处理每个顶层元素
  elements.forEach((element, index) => {
    processElement(element, (slideIndex + 1) * 10 + index + 1)
  })
}

// 监听 pptxJson 变化
watch(
  () => props.pptxJson,
  (newVal) => {
    if (newVal) {
      renderSlides()
    }
  },
  { deep: true }
)

// 组件挂载时渲染幻灯片
onMounted(() => {
  renderSlides()
})
</script>

<style scoped>
.pptx-container {
  width: 100%;
  overflow-x: auto;
  padding: 20px 0;
}
</style>