diff --git a/src/hooks/useExport.ts b/src/hooks/useExport.ts index 44a1c139..665de43e 100644 --- a/src/hooks/useExport.ts +++ b/src/hooks/useExport.ts @@ -389,8 +389,8 @@ export default () => { if (slide.background) { const background = slide.background if (background.type === 'image' && background.image) { - if (isBase64Image(background.image)) pptxSlide.background = { data: background.image } - else pptxSlide.background = { path: background.image } + if (isBase64Image(background.image.src)) pptxSlide.background = { data: background.image.src } + else pptxSlide.background = { path: background.image.src } } else if (background.type === 'solid' && background.color) { const c = formatColor(background.color) diff --git a/src/hooks/useImport.ts b/src/hooks/useImport.ts index c21a8a51..de8ade58 100644 --- a/src/hooks/useImport.ts +++ b/src/hooks/useImport.ts @@ -113,8 +113,10 @@ export default () => { if (type === 'image') { background = { type: 'image', - image: value.picBase64, - imageSize: 'cover', + image: { + src: value.picBase64, + size: 'cover', + }, } } else if (type === 'gradient') { diff --git a/src/hooks/useSlideBackgroundStyle.ts b/src/hooks/useSlideBackgroundStyle.ts index a00b8d90..ba12e6a3 100644 --- a/src/hooks/useSlideBackgroundStyle.ts +++ b/src/hooks/useSlideBackgroundStyle.ts @@ -10,7 +10,6 @@ export default (background: Ref) => { type, color, image, - imageSize, gradient, } = background.value @@ -19,19 +18,20 @@ export default (background: Ref) => { // 背景图模式 // 包括:背景图、背景大小,是否重复 - else if (type === 'image') { - if (!image) return { backgroundColor: '#fff' } - if (imageSize === 'repeat') { + else if (type === 'image' && image) { + const { src, size } = image + if (!src) return { backgroundColor: '#fff' } + if (size === 'repeat') { return { - backgroundImage: `url(${image}`, + backgroundImage: `url(${src}`, backgroundRepeat: 'repeat', backgroundSize: 'contain', } } return { - backgroundImage: `url(${image}`, + backgroundImage: `url(${src}`, backgroundRepeat: 'no-repeat', - backgroundSize: imageSize || 'cover', + backgroundSize: size || 'cover', } } diff --git a/src/types/slides.ts b/src/types/slides.ts index 346c49bf..71140d70 100644 --- a/src/types/slides.ts +++ b/src/types/slides.ts @@ -87,6 +87,8 @@ export interface PPTElementOutline { color?: string } +export type ElementLinkType = 'web' | 'slide' + /** * 元素超链接 * @@ -95,7 +97,7 @@ export interface PPTElementOutline { * target: 目标地址(网页链接、幻灯片页面ID) */ export interface PPTElementLink { - type: 'web' | 'slide' + type: ElementLinkType target: string } @@ -429,6 +431,7 @@ export interface PPTChartElement extends PPTBaseElement { } +export type TextAlign = 'left' | 'center' | 'right' | 'justify' /** * 表格单元格样式 * @@ -459,7 +462,7 @@ export interface TableCellStyle { backcolor?: string fontsize?: string fontname?: string - align?: 'left' | 'center' | 'right' | 'justify' + align?: TextAlign } @@ -635,6 +638,13 @@ export interface PPTAnimation { trigger: AnimationTrigger } +export type SlideBackgroundType = 'solid' | 'image' | 'gradient' +export type SlideBackgroundImageSize = 'cover' | 'contain' | 'repeat' +export interface SlideBackgroundImage { + src: string + size: SlideBackgroundImageSize, +} + /** * 幻灯片背景 * @@ -642,21 +652,14 @@ export interface PPTAnimation { * * color?: 背景颜色(纯色) * - * image?: 图片地址(图片) + * image?: 图片背景 * - * imageSize?: 图片填充方式 - * - * gradientType?: 渐变类型(线性、径向) - * - * gradientColor?: 渐变颜色 - * - * gradientRotate?: 渐变角度(线性) + * gradientType?: 渐变背景 */ export interface SlideBackground { - type: 'solid' | 'image' | 'gradient' + type: SlideBackgroundType color?: string - image?: string - imageSize?: 'cover' | 'contain' | 'repeat' + image?: SlideBackgroundImage gradient?: Gradient } diff --git a/src/views/Editor/Canvas/LinkDialog.vue b/src/views/Editor/Canvas/LinkDialog.vue index 26c3aac0..aa1a8eac 100644 --- a/src/views/Editor/Canvas/LinkDialog.vue +++ b/src/views/Editor/Canvas/LinkDialog.vue @@ -36,7 +36,7 @@ import { computed, onMounted, ref } from 'vue' import { storeToRefs } from 'pinia' import { useMainStore, useSlidesStore } from '@/store' -import type { PPTElementLink } from '@/types/slides' +import type { ElementLinkType, PPTElementLink } from '@/types/slides' import useLink from '@/hooks/useLink' import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue' @@ -45,9 +45,8 @@ import Input from '@/components/Input.vue' import Button from '@/components/Button.vue' import Select from '@/components/Select.vue' -type TypeKey = 'web' | 'slide' interface TabItem { - key: TypeKey + key: ElementLinkType label: string } @@ -58,7 +57,7 @@ const emit = defineEmits<{ const { handleElement } = storeToRefs(useMainStore()) const { slides, currentSlide } = storeToRefs(useSlidesStore()) -const type = ref('web') +const type = ref('web') const address = ref('') const slideId = ref('') diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue index fcfe29a9..71154449 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/ImageStylePanel.vue @@ -255,8 +255,10 @@ const setBackgroundImage = () => { const background: SlideBackground = { ...currentSlide.value.background, type: 'image', - image: _handleElement.src, - imageSize: 'cover', + image: { + src: _handleElement.src, + size: 'cover' + }, } slidesStore.updateSlide({ background }) addHistorySnapshot() diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue index 8925fa19..5d5e8ea4 100644 --- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue +++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue @@ -84,7 +84,7 @@ class="row" button-style="solid" :value="textAttrs.align" - @update:value="value => updateTextAttrs({ align: value as 'left' | 'center' | 'right' | 'justify' })" + @update:value="value => updateTextAttrs({ align: value as TextAlign })" > @@ -173,7 +173,7 @@ import { computed, onMounted, ref, watch } from 'vue' import { storeToRefs } from 'pinia' import { nanoid } from 'nanoid' import { useMainStore, useSlidesStore } from '@/store' -import type { PPTTableElement, TableCell, TableCellStyle, TableTheme } from '@/types/slides' +import type { PPTTableElement, TableCell, TableCellStyle, TableTheme, TextAlign } from '@/types/slides' import { WEB_FONTS } from '@/configs/font' import useHistorySnapshot from '@/hooks/useHistorySnapshot' diff --git a/src/views/Editor/Toolbar/SlideDesignPanel.vue b/src/views/Editor/Toolbar/SlideDesignPanel.vue index 13be269f..6fe33468 100644 --- a/src/views/Editor/Toolbar/SlideDesignPanel.vue +++ b/src/views/Editor/Toolbar/SlideDesignPanel.vue @@ -26,8 +26,8 @@