perf: 虚线线条/边框优化

src/views/components/element/ElementOutline.vue

@@ -14,7 +14,7 @@
       :d="`M0,0 L${width},0 L${width},${height} L0,${height} Z`" 
       :stroke="outlineColor"
       :stroke-width="outlineWidth" 
-      :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
+      :stroke-dasharray="strokeDashArray" 
     ></path>
 	</svg>
 </template>
@@ -33,8 +33,8 @@ const props = defineProps<{
 
 const {
   outlineWidth,
-  outlineStyle,
   outlineColor,
+  strokeDashArray,
 } = useElementOutline(toRef(props, 'outline'))
 </script>
 

src/views/components/element/ImageElement/ImageOutline/ImageEllipseOutline.vue

@@ -17,7 +17,7 @@
       :ry="height / 2"
       :stroke="outlineColor"
       :stroke-width="outlineWidth" 
-      :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
+      :stroke-dasharray="strokeDashArray" 
     ></ellipse>
 	</svg>
 </template>
@@ -35,8 +35,8 @@ const props = defineProps<{
 
 const {
   outlineWidth,
-  outlineStyle,
   outlineColor,
+  strokeDashArray,
 } = useElementOutline(toRef(props, 'outline'))
 </script>
 

src/views/components/element/ImageElement/ImageOutline/ImagePolygonOutline.vue

@@ -14,7 +14,7 @@
       :d="createPath(width, height)"
       :stroke="outlineColor"
       :stroke-width="outlineWidth" 
-      :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
+      :stroke-dasharray="strokeDashArray" 
     ></path>
 	</svg>
 </template>
@@ -33,8 +33,8 @@ const props = defineProps<{
 
 const {
   outlineWidth,
-  outlineStyle,
   outlineColor,
+  strokeDashArray,
 } = useElementOutline(toRef(props, 'outline'))
 </script>
 

src/views/components/element/ImageElement/ImageOutline/ImageRectOutline.vue

@@ -17,7 +17,7 @@
       :height="height"
       :stroke="outlineColor"
       :stroke-width="outlineWidth" 
-      :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
+      :stroke-dasharray="strokeDashArray" 
     ></rect>
 	</svg>
 </template>
@@ -38,8 +38,8 @@ const props = withDefaults(defineProps<{
 
 const {
   outlineWidth,
-  outlineStyle,
   outlineColor,
+  strokeDashArray,
 } = useElementOutline(toRef(props, 'outline'))
 </script>
 

src/views/components/element/LineElement/BaseLineElement.vue

@@ -71,7 +71,11 @@ const svgHeight = computed(() => {
   return height < 24 ? 24 : height
 })
 
-const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10, 5' : '0, 0')
+const lineDashArray = computed(() => {
+  if (props.elementInfo.style !== 'dashed') return '0 0'
+  const size = props.elementInfo.width
+  return size <= 8 ? `${size * 5} ${size * 2.5}` : `${size * 5} ${size * 1.5}`
+})
 
 const path = computed(() => {
   return getLineElementPath(props.elementInfo)

src/views/components/element/LineElement/index.vue

@@ -93,7 +93,11 @@ const svgHeight = computed(() => {
   return height < 24 ? 24 : height
 })
 
-const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10 6' : '0 0')
+const lineDashArray = computed(() => {
+  if (props.elementInfo.style !== 'dashed') return '0 0'
+  const size = props.elementInfo.width
+  return size <= 8 ? `${size * 5} ${size * 2.5}` : `${size * 5} ${size * 1.5}`
+})
 
 const path = computed(() => {
   return getLineElementPath(props.elementInfo)

src/views/components/element/ShapeElement/BaseShapeElement.vue

@@ -47,7 +47,7 @@
               :fill="elementInfo.gradient ? `url(#base-gradient-${elementInfo.id})` : elementInfo.fill"
               :stroke="outlineColor"
               :stroke-width="outlineWidth" 
-              :stroke-dasharray="outlineStyle === 'dashed' ? '10 5' : '0 0'" 
+              :stroke-dasharray="strokeDashArray" 
             ></path>
           </g>
         </svg>
@@ -74,7 +74,7 @@ const props = defineProps<{
 }>()
 
 const outline = computed(() => props.elementInfo.outline)
-const { outlineWidth, outlineStyle, outlineColor } = useElementOutline(outline)
+const { outlineWidth, outlineColor, strokeDashArray } = useElementOutline(outline)
 
 const shadow = computed(() => props.elementInfo.shadow)
 const { shadowStyle } = useElementShadow(shadow)

src/views/components/element/ShapeElement/index.vue

@@ -53,7 +53,7 @@
               :fill="elementInfo.gradient ? `url(#editabel-gradient-${elementInfo.id})` : elementInfo.fill"
               :stroke="outlineColor"
               :stroke-width="outlineWidth" 
-              :stroke-dasharray="outlineStyle === 'dashed' ? '10 6' : '0 0'" 
+              :stroke-dasharray="strokeDashArray" 
             ></path>
           </g>
         </svg>
@@ -111,7 +111,7 @@ const handleSelectElement = (e: MouseEvent | TouchEvent, canMove = true) => {
 }
 
 const outline = computed(() => props.elementInfo.outline)
-const { outlineWidth, outlineStyle, outlineColor } = useElementOutline(outline)
+const { outlineWidth, outlineColor, strokeDashArray } = useElementOutline(outline)
 
 const shadow = computed(() => props.elementInfo.shadow)
 const { shadowStyle } = useElementShadow(shadow)

src/views/components/element/hooks/useElementOutline.ts

@@ -7,9 +7,16 @@ export default (outline: Ref<PPTElementOutline | undefined>) => {
   const outlineStyle = computed(() => outline.value?.style || 'solid')
   const outlineColor = computed(() => outline.value?.color || '#d14424')
 
+  const strokeDashArray = computed(() => {
+    if (outlineStyle.value !== 'dashed') return '0 0'
+    const size = outlineWidth.value
+    return size <= 6 ? `${size * 4.5} ${size * 2}` : `${size * 4} ${size * 1.5}`
+  })
+
   return {
     outlineWidth,
     outlineStyle,
     outlineColor,
+    strokeDashArray,
   }
 }