feat: 添加图片类型标记

src/hooks/useAIPPT.ts

@@ -299,7 +299,7 @@ export default () => {
     for (const item of AISlides) {
       if (item.type === 'cover') {
         const elements = coverTemplate.elements.map(el => {
-          if (el.type === 'image' && !el.lock && imgPool.value.length) return getNewImgElement(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 +334,7 @@ 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.lock && imgPool.value.length) return getNewImgElement(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 +357,7 @@ export default () => {
       else if (item.type === 'transition') {
         transitionIndex++
         const elements = transitionTemplate.elements.map(el => {
-          if (el.type === 'image' && !el.lock && imgPool.value.length) return getNewImgElement(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 +409,7 @@ 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.lock && imgPool.value.length) return getNewImgElement(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]
@@ -451,7 +451,7 @@ export default () => {
       }
       else if (item.type === 'end') {
         const elements = endTemplate.elements.map(el => {
-          if (el.type === 'image' && !el.lock && imgPool.value.length) return getNewImgElement(el)
+          if (el.type === 'image' && el.imageType && imgPool.value.length) return getNewImgElement(el)
           return el
         })
         slides.push({

src/types/slides.ts

@@ -245,6 +245,8 @@ export interface ImageElementClip {
   shape: string
 }
 
+export type ImageType = 'pageFigure' | 'itemFigure' | 'background'
+
 /**
  * 图片元素
  * 
@@ -269,6 +271,8 @@ export interface ImageElementClip {
  * radius?: 圆角半径
  * 
  * colorMask?: 颜色蒙版
+ * 
+ * imageType?: 图片类型
  */
 export interface PPTImageElement extends PPTBaseElement {
   type: 'image'
@@ -282,6 +286,7 @@ export interface PPTImageElement extends PPTBaseElement {
   shadow?: PPTElementShadow
   radius?: number
   colorMask?: string
+  imageType?: ImageType
 }
 
 export type ShapeTextAlign = 'top' | 'middle' | 'bottom' 

src/views/Editor/MarkupPanel.vue

@@ -27,7 +27,16 @@
           :options="textTypeOptions"
         />
       </div>
-      <div class="placeholder" v-else>选中文本框或带文本的形状，标记文本类型</div>
+      <div class="row" v-if="handleElement && handleElement.type === 'image'">
+        <div style="width: 40%;">当前图片类型：</div>
+        <Select
+          style="width: 60%;"
+          :value="imageType"
+          @update:value="value => updateElement(value as ImageType | '')"
+          :options="imageTypeOptions"
+        />
+      </div>
+      <div class="placeholder" v-else>选中图片、文字、带文字的形状，标记类型</div>
     </div>
   </MoveablePanel>
 </template>
@@ -36,7 +45,7 @@
 import { computed, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useMainStore, useSlidesStore } from '@/store'
-import type { SlideType, TextType } from '@/types/slides'
+import type { ImageType, SlideType, TextType } from '@/types/slides'
 
 import MoveablePanel from '@/components/MoveablePanel.vue'
 import Select from '@/components/Select.vue'
@@ -69,6 +78,13 @@ const textTypeOptions = ref<{ label: string; value: TextType | '' }[]>([
   { label: '项目编号', value: 'itemNumber' },
 ])
 
+const imageTypeOptions = ref<{ label: string; value: ImageType | '' }[]>([
+  { label: '未标记类型', value: '' },
+  { label: '页面插图', value: 'pageFigure' },
+  { label: '项目插图', value: 'itemFigure' },
+  { label: '背景图', value: 'background' },
+])
+
 const slideType = computed(() => currentSlide.value?.type || '')
 const textType = computed(() => {
   if (!handleElement.value) return ''
@@ -76,6 +92,11 @@ const textType = computed(() => {
   if (handleElement.value.type === 'shape' && handleElement.value.text) return handleElement.value.text.type || ''
   return ''
 })
+const imageType = computed(() => {
+  if (!handleElement.value) return ''
+  if (handleElement.value.type === 'image') return handleElement.value.imageType || ''
+  return ''
+})
 
 const updateSlide = (type: SlideType | '') => {
   if (type) slidesStore.updateSlide({ type })
@@ -87,11 +108,22 @@ const updateSlide = (type: SlideType | '') => {
   }
 }
 
-const updateElement = (type: TextType | '') => {
+const updateElement = (type: TextType | ImageType | '') => {
   if (!handleElement.value) return
+  if (handleElement.value.type === 'image') {
+    if (type) {
+      slidesStore.updateElement({ id: handleElementId.value, props: { imageType: type as ImageType } })
+    }
+    else {
+      slidesStore.removeElementProps({
+        id: handleElementId.value,
+        propName: 'imageType',
+      })
+    }
+  }
   if (handleElement.value.type === 'text') {
     if (type) {
-      slidesStore.updateElement({ id: handleElementId.value, props: { textType: type } })
+      slidesStore.updateElement({ id: handleElementId.value, props: { textType: type as TextType } })
     }
     else {
       slidesStore.removeElementProps({
@@ -107,7 +139,7 @@ const updateElement = (type: TextType | '') => {
     if (type) {
       slidesStore.updateElement({
         id: handleElementId.value,
-        props: { text: { ...text, type } },
+        props: { text: { ...text, type: type as TextType } },
       })
     }
     else {