diff --git a/src/hooks/useAIPPT.ts b/src/hooks/useAIPPT.ts index 7518edf6..eb98510a 100644 --- a/src/hooks/useAIPPT.ts +++ b/src/hooks/useAIPPT.ts @@ -1,7 +1,6 @@ -import { ref } from 'vue' import { nanoid } from 'nanoid' -import type { ImageClipDataRange, PPTElement, PPTImageElement, PPTShapeElement, PPTTextElement, Slide, TextType } from '@/types/slides' -import type { AIPPTSlide, PexelsImage } from '@/types/AIPPT' +import type { PPTElement, PPTShapeElement, PPTTextElement, Slide, TextType } from '@/types/slides' +import type { AIPPTSlide } from '@/types/AIPPT' import { useSlidesStore } from '@/store' import useAddSlidesOrElements from './useAddSlidesOrElements' import useSlideHandler from './useSlideHandler' @@ -11,8 +10,6 @@ export default () => { const { addSlidesFromData } = useAddSlidesOrElements() const { isEmptySlide } = useSlideHandler() - const imgPool = ref([]) - const checkTextType = (el: PPTElement, type: TextType) => { return (el.type === 'text' && el.textType === type) || (el.type === 'shape' && el.text && el.text.type === type) } @@ -160,45 +157,6 @@ export default () => { return el.type === 'text' ? { ...el, content, lineHeight: size < 15 ? 1.2 : el.lineHeight } : { ...el, text: { ...el.text!, content } } } - const getNewImgElement = (el: PPTImageElement): PPTImageElement => { - let targetImg: PexelsImage | null = null - - let imgs = [] - - if (el.width === el.height) imgs = imgPool.value.filter(img => img.width === img.height) - else if (el.width > el.height) imgs = imgPool.value.filter(img => img.width > img.height) - else imgs = imgPool.value.filter(img => img.width <= img.height) - if (!imgs.length) imgs = imgPool.value - - targetImg = imgs[Math.floor(Math.random() * imgs.length)] - imgPool.value = imgPool.value.filter(item => item.id !== targetImg!.id) - - if (!targetImg) return el - - let scale = 1 - let w = el.width - let h = el.height - let range: ImageClipDataRange = [[0, 0], [0, 0]] - const radio = el.width / el.height - if (targetImg.width / targetImg.height >= radio) { - scale = targetImg.height / el.height - w = targetImg.width / scale - const diff = (w - el.width) / 2 / w * 100 - range = [[diff, 0], [100 - diff, 100]] - } - else { - scale = targetImg.width / el.width - h = targetImg.height / scale - const diff = (h - el.height) / 2 / h * 100 - range = [[0, diff], [100, 100 - diff]] - } - const clipShape = (el.clip && el.clip.shape) ? el.clip.shape : 'rect' - const clip = { range, shape: clipShape } - const src = targetImg.src - - return { ...el, src, clip } - } - const getMdContent = (content: string) => { const regex = /```markdown([^```]*)```/ const match = content.match(regex) @@ -206,9 +164,7 @@ export default () => { return content.replace('```markdown', '').replace('```', '') } - const AIPPT = (templateSlides: Slide[], _AISlides: AIPPTSlide[], imgs: PexelsImage[]) => { - imgPool.value = imgs - + const AIPPT = (templateSlides: Slide[], _AISlides: AIPPTSlide[]) => { const AISlides: AIPPTSlide[] = [] for (const template of _AISlides) { if (template.type === 'content') { @@ -299,7 +255,6 @@ export default () => { for (const item of AISlides) { if (item.type === 'cover') { const elements = coverTemplate.elements.map(el => { - if (el.type === 'image' && el.imageType && imgPool.value.length) return getNewImgElement(el) if (el.type !== 'text' && el.type !== 'shape') return el if (checkTextType(el, 'title') && item.data.title) { return getNewTextElement({ el, text: item.data.title, maxLine: 1 }) @@ -334,7 +289,6 @@ export default () => { const longestText = item.data.items.reduce((longest, current) => current.length > longest.length ? current : longest, '') const elements = contentsTemplate.elements.map(el => { - if (el.type === 'image' && el.imageType && imgPool.value.length) return getNewImgElement(el) if (el.type !== 'text' && el.type !== 'shape') return el if (checkTextType(el, 'item')) { const index = sortedItemIds.findIndex(id => id === el.id) @@ -357,7 +311,6 @@ export default () => { else if (item.type === 'transition') { transitionIndex++ const elements = transitionTemplate.elements.map(el => { - if (el.type === 'image' && el.imageType && imgPool.value.length) return getNewImgElement(el) if (el.type !== 'text' && el.type !== 'shape') return el if (checkTextType(el, 'title') && item.data.title) { return getNewTextElement({ el, text: item.data.title, maxLine: 1 }) @@ -409,7 +362,6 @@ export default () => { const longestText = itemTexts.reduce((longest, current) => current.length > longest.length ? current : longest, '') const elements = contentTemplate.elements.map(el => { - if (el.type === 'image' && el.imageType && imgPool.value.length) return getNewImgElement(el) if (el.type !== 'text' && el.type !== 'shape') return el if (item.data.items.length === 1) { const contentItem = item.data.items[0] @@ -450,14 +402,9 @@ export default () => { }) } else if (item.type === 'end') { - const elements = endTemplate.elements.map(el => { - if (el.type === 'image' && el.imageType && imgPool.value.length) return getNewImgElement(el) - return el - }) slides.push({ ...endTemplate, id: nanoid(10), - elements, }) } } diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts index da9ce976..b74c16aa 100644 --- a/src/plugins/icon.ts +++ b/src/plugins/icon.ts @@ -36,6 +36,7 @@ import { AlignHorizontally, BringToFront, SendToBack, + Send, AlignTextLeft, AlignTextRight, AlignTextCenter, @@ -166,6 +167,7 @@ export const icons: Icons = { IconAlignHorizontally: AlignHorizontally, IconBringToFront: BringToFront, IconSendToBack: SendToBack, + IconSend: Send, IconAlignTextLeft: AlignTextLeft, IconAlignTextRight: AlignTextRight, IconAlignTextCenter: AlignTextCenter, diff --git a/src/services/index.ts b/src/services/index.ts index f962ee05..354aa78a 100644 --- a/src/services/index.ts +++ b/src/services/index.ts @@ -19,8 +19,4 @@ export default { AIPPT(content: string, language: string) { return axios.post(`${SERVER_URL}/tools/aippt`, { content, language }) }, - - AISearchImage(text: string) { - return axios.post(`${SERVER_URL}/tools/ai_search_image`, { text }) - }, } \ No newline at end of file diff --git a/src/types/AIPPT.ts b/src/types/AIPPT.ts index a9abd7cb..c1f2950d 100644 --- a/src/types/AIPPT.ts +++ b/src/types/AIPPT.ts @@ -38,11 +38,4 @@ export interface AIPPTEnd { type: 'end' } -export type AIPPTSlide = AIPPTCover | AIPPTContents | AIPPTTransition | AIPPTContent | AIPPTEnd - -export interface PexelsImage { - id: string - src: string - width: number - height: number -} \ No newline at end of file +export type AIPPTSlide = AIPPTCover | AIPPTContents | AIPPTTransition | AIPPTContent | AIPPTEnd \ No newline at end of file diff --git a/src/views/Editor/AIPPTDialog.vue b/src/views/Editor/AIPPTDialog.vue index 8a8942af..673a6100 100644 --- a/src/views/Editor/AIPPTDialog.vue +++ b/src/views/Editor/AIPPTDialog.vue @@ -22,29 +22,9 @@ > -
-
- -
- -
{{ item }}
@@ -58,20 +38,18 @@ import { ref, onMounted } from 'vue' import api from '@/services' import useAIPPT from '@/hooks/useAIPPT' -import type { AIPPTSlide, PexelsImage } from '@/types/AIPPT' +import type { AIPPTSlide } from '@/types/AIPPT' import type { Slide } from '@/types/slides' import message from '@/utils/message' import { useMainStore } from '@/store' import Input from '@/components/Input.vue' import Button from '@/components/Button.vue' -import Select from '@/components/Select.vue' import FullscreenSpin from '@/components/FullscreenSpin.vue' const mainStore = useMainStore() const { getMdContent, AIPPT } = useAIPPT() const language = ref<'zh' | 'en'>('zh') -const imageMatching = ref<'none' | 'search'>('none') const keyword = ref('') const outline = ref('') const loading = ref(false) @@ -112,20 +90,9 @@ const createPPT = async () => { const obj = JSON.parse(ret.data[0].content) return obj.data }) - let imgs: PexelsImage[] = [] - if (imageMatching.value === 'search') { - imgs = await api.AISearchImage(keyword.value).then(ret => { - return ret.data.photos.map((item: any) => ({ - id: item.id, - src: item.src.large, - width: item.width, - height: item.height, - })) - }) - } const templateSlides: Slide[] = await api.getFileData('template_1').then(ret => ret.slides) - AIPPT(templateSlides, AISlides, imgs) + AIPPT(templateSlides, AISlides) loading.value = false @@ -199,6 +166,26 @@ const createPPT = async () => { .count { font-size: 12px; color: #999; - margin-right: 3px; + margin-right: 5px; +} +.submit { + height: 20px; + font-size: 12px; + background-color: $themeColor; + color: #fff; + display: flex; + align-items: center; + padding: 0 5px; + border-radius: $borderRadius; + cursor: pointer; + + &:hover { + background-color: $themeHoverColor; + } + + .icon { + font-size: 15px; + margin-right: 3px; + } } \ No newline at end of file