perf: 代码优化，公用逻辑提取

src/hooks/useExport.ts

@@ -3,7 +3,7 @@ import { trim } from 'lodash'
 import { saveAs } from 'file-saver'
 import pptxgen from 'pptxgenjs'
 import tinycolor from 'tinycolor2'
-import { getElementRange } from '@/utils/element'
+import { getElementRange, getLineElementPath } from '@/utils/element'
 import { AST, toAST } from '@/utils/htmlParser'
 import { SvgPoints, toPoints } from '@/utils/svgPathParser'
 import { svg2Base64 } from '@/utils/svg2Base64'
@@ -292,19 +292,7 @@ export default () => {
           }
         }
         else if (el.type === 'line') {
-          let path = ''
+          const path = getLineElementPath(el)
-          const start = el.start.join(',')
-          const end = el.end.join(',')
-          if (el.broken) {
-            const mid = el.broken.join(',')
-            path = `M${start} L${mid} L${end}`
-          }
-          else if (el.curve) {
-            const mid = el.curve.join(',')
-            path = `M${start} Q${mid} ${end}`
-          }
-          else path = `M${start} L${end}`
-
           const points = formatPoints(toPoints(path))
           const { minX, maxX, minY, maxY } = getElementRange(el)
 

src/utils/element.ts

@@ -1,4 +1,5 @@
-import { PPTElement } from '@/types/slides'
+import tinycolor from 'tinycolor2'
+import { PPTElement, PPTLineElement } from '@/types/slides'
 import { createRandomCode } from '@/utils/common'
 
 interface RotatedElementData {
@@ -173,3 +174,37 @@ export const createElementIdMap = (elements: PPTElement[]) => {
     elIdMap,
   }
 }
+
+/**
+ * 根据表格的主题色，获取对应用于配色的子颜色
+ * @param themeColor 主题色
+ * @returns 
+ */
+export const getTableSubThemeColor = (themeColor: string) => {
+  const rgba = tinycolor(themeColor).toRgb()
+  const subRgba1 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.3 }
+  const subRgba2 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.1 }
+  return [
+    `rgba(${[subRgba1.r, subRgba1.g, subRgba1.b, subRgba1.a].join(',')})`,
+    `rgba(${[subRgba2.r, subRgba2.g, subRgba2.b, subRgba2.a].join(',')})`,
+  ]
+}
+
+/**
+ * 获取线条元素路径字符串
+ * @param element 线条元素
+ * @returns 
+ */
+export const getLineElementPath = (element: PPTLineElement) => {
+  const start = element.start.join(',')
+  const end = element.end.join(',')
+  if (element.broken) {
+    const mid = element.broken.join(',')
+    return `M${start} L${mid} L${end}`
+  }
+  if (element.curve) {
+    const mid = element.curve.join(',')
+    return `M${start} Q${mid} ${end}`
+  }
+  return `M${start} L${end}`
+}

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

@@ -53,6 +53,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
 import { PPTLineElement } from '@/types/slides'
+import { getLineElementPath } from '@/utils/element'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
 import LinePointMarker from './LinePointMarker.vue'
@@ -84,17 +85,7 @@ export default defineComponent({
     const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10, 5' : '0, 0')
 
     const path = computed(() => {
-      const start = props.elementInfo.start.join(',')
+      return getLineElementPath(props.elementInfo)
-      const end = props.elementInfo.end.join(',')
-      if (props.elementInfo.broken) {
-        const mid = props.elementInfo.broken.join(',')
-        return `M${start} L${mid} L${end}`
-      }
-      if (props.elementInfo.curve) {
-        const mid = props.elementInfo.curve.join(',')
-        return `M${start} Q${mid} ${end}`
-      }
-      return `M${start} L${end}`
     })
 
     return {

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

@@ -63,6 +63,7 @@
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue'
 import { PPTLineElement } from '@/types/slides'
+import { getLineElementPath } from '@/utils/element'
 import { ContextmenuItem } from '@/components/Contextmenu/types'
 import useElementShadow from '@/views/components/element/hooks/useElementShadow'
 
@@ -109,17 +110,7 @@ export default defineComponent({
     const lineDashArray = computed(() => props.elementInfo.style === 'dashed' ? '10 6' : '0 0')
 
     const path = computed(() => {
-      const start = props.elementInfo.start.join(',')
+      return getLineElementPath(props.elementInfo)
-      const end = props.elementInfo.end.join(',')
-      if (props.elementInfo.broken) {
-        const mid = props.elementInfo.broken.join(',')
-        return `M${start} L${mid} L${end}`
-      }
-      if (props.elementInfo.curve) {
-        const mid = props.elementInfo.curve.join(',')
-        return `M${start} Q${mid} ${end}`
-      }
-      return `M${start} L${end}`
     })
 
     return {

src/views/components/element/TableElement/useSubThemeColor.ts

@@ -1,6 +1,6 @@
 import { ref, Ref, watch } from 'vue'
-import tinycolor from 'tinycolor2'
 import { TableTheme } from '@/types/slides'
+import { getTableSubThemeColor } from '@/utils/element'
 
 // 通过表格的主题色计算辅助颜色
 
@@ -8,13 +8,7 @@ export default (theme: Ref<TableTheme | undefined>) => {
   const subThemeColor = ref(['', ''])
   watch(() => theme.value, () => {
     if (theme.value) {
-      const rgba = tinycolor(theme.value.color).toRgb()
+      subThemeColor.value = getTableSubThemeColor(theme.value.color)
-      const subRgba1 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.3 }
-      const subRgba2 = { r: rgba.r, g: rgba.g, b: rgba.b, a: rgba.a * 0.1 }
-      subThemeColor.value = [
-        `rgba(${[subRgba1.r, subRgba1.g, subRgba1.b, subRgba1.a].join(',')})`,
-        `rgba(${[subRgba2.r, subRgba2.g, subRgba2.b, subRgba2.a].join(',')})`,
-      ]
     }
   }, { immediate: true })