feat: 主题色支持多色

src/hooks/useCreateElement.ts

@@ -96,7 +96,7 @@ export default () => {
       width: 400,
       height: 400,
       rotate: 0,
-      themeColors: [theme.value.themeColor],
+      themeColors: theme.value.themeColors,
       textColor: theme.value.fontColor,
       data: CHART_DEFAULT_DATA[type],
     })
@@ -145,7 +145,7 @@ export default () => {
         color: '#eeece1',
       },
       theme: {
-        color: theme.value.themeColor,
+        color: theme.value.themeColors[0],
         rowHeader: true,
         rowFooter: false,
         colHeader: false,
@@ -202,7 +202,7 @@ export default () => {
       height,
       viewBox: data.viewBox,
       path: data.path,
-      fill: theme.value.themeColor,
+      fill: theme.value.themeColors[0],
       fixedRatio: false,
       rotate: 0,
       ...supplement,
@@ -239,7 +239,7 @@ export default () => {
       start,
       end,
       points: data.points,
-      color: theme.value.themeColor,
+      color: theme.value.themeColors[0],
       style: data.style,
       width: 2,
     }
@@ -306,7 +306,7 @@ export default () => {
       loop: false,
       autoplay: false,
       fixedRatio: true,
-      color: theme.value.themeColor,
+      color: theme.value.themeColors[0],
       src,
     })
   }

src/hooks/useImport.ts

@@ -267,7 +267,7 @@ export default () => {
                 top: el.top,
                 rotate: 0,
                 fixedRatio: false,
-                color: theme.value.themeColor,
+                color: theme.value.themeColors[0],
                 loop: false,
                 autoplay: false,
               })
@@ -504,7 +504,7 @@ export default () => {
                 left: el.left,
                 top: el.top,
                 rotate: 0,
-                themeColors: el.colors.length ? el.colors : [theme.value.themeColor],
+                themeColors: el.colors.length ? el.colors : theme.value.themeColors,
                 textColor: theme.value.fontColor,
                 data: {
                   labels,

src/hooks/useSlideTheme.ts

@@ -311,7 +311,7 @@ export default () => {
     }
     slidesStore.setTheme({
       backgroundColor: theme.background,
-      themeColor: theme.colors[0],
+      themeColors: theme.colors,
       fontColor: theme.fontColor,
       fontName: theme.fontname,
     })
@@ -322,7 +322,7 @@ export default () => {
   // 将当前主题配置应用到全部页面
   const applyThemeToAllSlides = (applyAll = false) => {
     const newSlides: Slide[] = JSON.parse(JSON.stringify(slides.value))
-    const { themeColor, backgroundColor, fontColor, fontName, outline, shadow } = theme.value
+    const { themeColors, backgroundColor, fontColor, fontName, outline, shadow } = theme.value
   
     for (const slide of newSlides) {
       if (!slide.background || slide.background.type !== 'image') {
@@ -339,17 +339,17 @@ export default () => {
         }
 
         if (el.type === 'shape') {
-          el.fill = themeColor
+          el.fill = themeColors[0]
           if (el.gradient) delete el.gradient
         }
-        else if (el.type === 'line') el.color = themeColor
+        else if (el.type === 'line') el.color = themeColors[0]
         else if (el.type === 'text') {
           el.defaultColor = fontColor
           el.defaultFontName = fontName
-          if (el.fill) el.fill = themeColor
+          if (el.fill) el.fill = themeColors[0]
         }
         else if (el.type === 'table') {
-          if (el.theme) el.theme.color = themeColor
+          if (el.theme) el.theme.color = themeColors[0]
           for (const rowCells of el.data) {
             for (const cell of rowCells) {
               if (cell.style) {
@@ -360,11 +360,11 @@ export default () => {
           }
         }
         else if (el.type === 'chart') {
-          el.themeColors = [themeColor]
+          el.themeColors = themeColors
           el.textColor = fontColor
         }
         else if (el.type === 'latex') el.color = fontColor
-        else if (el.type === 'audio') el.color = themeColor
+        else if (el.type === 'audio') el.color = themeColors[0]
       }
     }
     slidesStore.setSlides(newSlides)

src/store/slides.ts

@@ -32,7 +32,7 @@ export const useSlidesStore = defineStore('slides', {
   state: (): SlidesState => ({
     title: '未命名演示文稿', // 幻灯片标题
     theme: {
-      themeColor: '#5b9bd5',
+      themeColors: ['#5b9bd5', '#ed7d31', '#a5a5a5', '#ffc000', '#4472c4', '#70ad47'],
       fontColor: '#333',
       fontName: '',
       backgroundColor: '#fff',

src/types/slides.ts

@@ -754,7 +754,7 @@ export interface Slide {
  */
 export interface SlideTheme {
   backgroundColor: string
-  themeColor: string
+  themeColors: string[]
   fontColor: string
   fontName: string
   outline: PPTElementOutline

src/views/Editor/Canvas/ShapeCreateCanvas.vue

@@ -152,7 +152,7 @@ const create = () => {
     fill: 'rgba(0, 0, 0, 0)',
     outline: {
       width: 2,
-      color: theme.value.themeColor,
+      color: theme.value.themeColors[0],
       style: 'solid',
     },
   })

src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue

@@ -213,7 +213,7 @@ const updateTheme = (color: string, index: number) => {
 // 添加主题色
 const addThemeColor = () => {
   const props = {
-    themeColors: [...themeColors.value, theme.value.themeColor],
+    themeColors: [...themeColors.value, theme.value.themeColors[0]],
   }
   updateElement(props)
 }

src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue

@@ -196,7 +196,7 @@ import Popover from '@/components/Popover.vue'
 
 const slidesStore = useSlidesStore()
 const { handleElement, handleElementId, selectedTableCells: selectedCells } = storeToRefs(useMainStore())
-const themeColor = computed(() => slidesStore.theme.themeColor)
+const themeColor = computed(() => slidesStore.theme.themeColors[0])
 
 const fontSizeOptions = [
   '12px', '14px', '16px', '18px', '20px', '22px', '24px', '28px', '32px',

src/views/Editor/Toolbar/SlideDesignPanel.vue

@@ -162,18 +162,18 @@
         <ColorButton :color="theme.backgroundColor" />
       </Popover>
     </div>
-    <div class="row">
+    <!-- <div class="row">
       <div style="width: 40%;">主题色：</div>
       <Popover trigger="click" style="width: 60%;">
         <template #content>
           <ColorPicker
-            :modelValue="theme.themeColor"
+            :modelValue="theme.themeColors[0]"
-            @update:modelValue="value => updateTheme({ themeColor: value })"
+            @update:modelValue="value => updateTheme({ themeColors: value })"
           />
         </template>
-        <ColorButton :color="theme.themeColor" />
+        <ColorButton :color="theme.themeColors[0]" />
       </Popover>
-    </div>
+    </div> -->
     
     <template v-if="moreThemeConfigsVisible">
       <div class="row">

src/views/Editor/Toolbar/ThemeStylesExtract.vue

@@ -54,7 +54,7 @@
             <div class="handler">
               <div class="state" :class="{ 'active': selectedIndex.themeColor === index }">√</div>
               <div class="config-btn" @click="selectedIndex.themeColor = index">选择</div>
-              <div class="config-btn" @click="updateTheme({ themeColor: item }); selectedIndex.themeColor = index">配置到主题</div>
+              <!-- <div class="config-btn" @click="updateTheme({ themeColor: item }); selectedIndex.themeColor = index">配置到主题</div> -->
             </div>
           </div>
         </div>
@@ -133,7 +133,7 @@ const updateTheme = (themeProps: Partial<SlideTheme>) => {
 const updateAllThemes = () => {
   slidesStore.setTheme({
     backgroundColor: themeStyles.value.backgroundColors[selectedIndex.value.backgroundColor],
-    themeColor: themeStyles.value.themeColors[selectedIndex.value.themeColor],
+    themeColors: themeStyles.value.themeColors,
     fontColor: themeStyles.value.fontColors[selectedIndex.value.fontColor],
     fontName: themeStyles.value.fontNames[selectedIndex.value.fontName],
   })