diff --git a/src/hooks/useCreateElement.ts b/src/hooks/useCreateElement.ts index 570534d5..7fc8fecd 100644 --- a/src/hooks/useCreateElement.ts +++ b/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, }) } diff --git a/src/hooks/useImport.ts b/src/hooks/useImport.ts index 022a5489..f248d9d1 100644 --- a/src/hooks/useImport.ts +++ b/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, diff --git a/src/hooks/useSlideTheme.ts b/src/hooks/useSlideTheme.ts index 98e003d5..47ed4dce 100644 --- a/src/hooks/useSlideTheme.ts +++ b/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) diff --git a/src/store/slides.ts b/src/store/slides.ts index 4180f388..4dc0db51 100644 --- a/src/store/slides.ts +++ b/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', diff --git a/src/types/slides.ts b/src/types/slides.ts index 765e2d7b..d0a0ca2a 100644 --- a/src/types/slides.ts +++ b/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 diff --git a/src/views/Editor/Canvas/ShapeCreateCanvas.vue b/src/views/Editor/Canvas/ShapeCreateCanvas.vue index d496d763..8b2b3cbd 100644 --- a/src/views/Editor/Canvas/ShapeCreateCanvas.vue +++ b/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', }, }) diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue index 79cb1f7e..a52a683e 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue +++ b/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) } diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue index b9bcd940..5a89b08c 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue +++ b/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', diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue index 693d243e..4eabd959 100644 --- a/src/views/Editor/Toolbar/SlideDesignPanel.vue +++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue @@ -162,18 +162,18 @@ -
+