github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 主题色支持多色

Browse Source
This commit is contained in:
zxc 2025-03-14 16:30:10 +08:00
parent bccb23c559
commit 373426bfad
10 changed files with 27 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/hooks/useCreateElement.ts
View File

@ -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,
})
}

4
src/hooks/useImport.ts
View File

@ -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,

16
src/hooks/useSlideTheme.ts
View File

@ -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)

2
src/store/slides.ts
View File

@ -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',

2
src/types/slides.ts
View File

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

2
src/views/Editor/Canvas/ShapeCreateCanvas.vue
View File

@ -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',
},
})

2
src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
View File

@ -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)
}

2
src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
View File

@ -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',

10
src/views/Editor/Toolbar/SlideDesignPanel.vue
View File

@ -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"
@update:modelValue="value => updateTheme({ themeColor: value })"
:modelValue="theme.themeColors[0]"
@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">

4
src/views/Editor/Toolbar/ThemeStylesExtract.vue
View File

@ -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],
})