From eca440aa8e30a9afd593df5adbd0333f1bf53077 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Wed, 4 Dec 2024 20:54:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=92=8C=E9=83=A8=E5=88=86=E8=8A=82=E7=82=B9=E7=B1=BB=E5=9E=8B?=
 =?UTF-8?q?=E6=A0=87=E6=B3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                               |   1 +
 README_zh.md                            |   1 +
 src/store/main.ts                       |   6 +
 src/types/slides.ts                     |  15 ++-
 src/views/Editor/EditorHeader/index.vue |   5 +
 src/views/Editor/MarkupPanel.vue        | 155 ++++++++++++++++++++++++
 src/views/Editor/index.vue              |   4 +-
 7 files changed, 185 insertions(+), 2 deletions(-)
 create mode 100644 src/views/Editor/MarkupPanel.vue

diff --git a/README.md b/README.md
index f37c45a8..2813a951 100644
--- a/README.md
+++ b/README.md
@@ -57,6 +57,7 @@ npm run dev
 - Transition animations
 - Element animations (entrance, exit, emphasis)
 - Selection panel (hide elements, layer sorting, element naming)
+- Labels for Page and Node Types (usable for template-related features)
 - Find/replace
 - Annotations
 ### Slide Element Editing
diff --git a/README_zh.md b/README_zh.md
index 6f0909a7..198bdad7 100644
--- a/README_zh.md
+++ b/README_zh.md
@@ -53,6 +53,7 @@ npm run dev
 - 翻页动画
 - 元素动画（入场、退场、强调）
 - 选择面板（隐藏元素、层级排序、元素命名）
+- 页面和节点类型标注（可用于模板相关功能）
 - 查找/替换
 - 批注
 ### 幻灯片元素编辑
diff --git a/src/store/main.ts b/src/store/main.ts
index b71739e5..575f9d8e 100644
--- a/src/store/main.ts
+++ b/src/store/main.ts
@@ -38,6 +38,7 @@ export interface MainState {
   showSelectPanel: boolean
   showSearchPanel: boolean
   showNotesPanel: boolean
+  showMarkupPanel: boolean
 }
 
 const nanoid = customAlphabet('0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz')
@@ -73,6 +74,7 @@ export const useMainStore = defineStore('main', {
     showSelectPanel: false, // 打开选择面板
     showSearchPanel: false, // 打开查找替换面板
     showNotesPanel: false, // 打开批注面板
+    showMarkupPanel: false, // 打开类型标注面板
   }),
 
   getters: {
@@ -202,5 +204,9 @@ export const useMainStore = defineStore('main', {
     setNotesPanelState(show: boolean) {
       this.showNotesPanel = show
     },
+
+    setMarkupPanelState(show: boolean) {
+      this.showMarkupPanel = show
+    },
   },
 })
\ No newline at end of file
diff --git a/src/types/slides.ts b/src/types/slides.ts
index b9364991..082b7a2f 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -137,6 +137,8 @@ interface PPTBaseElement {
 }
 
 
+export type TextType = 'title' | 'subtitle' | 'content' | 'item' | 'notes' | 'header' | 'footer'
+
 /**
  * 文本元素
  * 
@@ -163,6 +165,8 @@ interface PPTBaseElement {
  * paragraphSpace?: 段间距，默认 5px
  * 
  * vertical?: 竖向文本
+ * 
+ * textType?: 文本类型
  */
 export interface PPTTextElement extends PPTBaseElement {
   type: 'text'
@@ -177,6 +181,7 @@ export interface PPTTextElement extends PPTBaseElement {
   shadow?: PPTElementShadow
   paragraphSpace?: number
   vertical?: boolean
+  textType?: TextType
 }
 
 
@@ -289,12 +294,15 @@ export type ShapeTextAlign = 'top' | 'middle' | 'bottom'
  * defaultColor: 默认颜色（会被文本内容中的HTML内联样式覆盖）
  * 
  * align: 文本对齐方向（垂直方向）
+ * 
+ * type: 文本类型
  */
 export interface ShapeText {
   content: string
   defaultFontName: string
   defaultColor: string
   align: ShapeTextAlign
+  type?: TextType
 }
 
 /**
@@ -693,6 +701,8 @@ export interface SectionTag {
   title?: string
 }
 
+export type SlideType = 'cover' | 'contents' | 'transition' | 'content' | 'end'
+
 /**
  * 幻灯片页面
  * 
@@ -700,7 +710,7 @@ export interface SectionTag {
  * 
  * elements: 元素集合
  * 
- * notes: 批注
+ * notes?: 批注
  * 
  * remark?: 备注
  * 
@@ -709,6 +719,8 @@ export interface SectionTag {
  * animations?: 元素动画集合
  * 
  * turningMode?: 翻页方式
+ * 
+ * slideType?: 页面类型
  */
 export interface Slide {
   id: string
@@ -719,6 +731,7 @@ export interface Slide {
   animations?: PPTAnimation[]
   turningMode?: TurningMode
   sectionTag?: SectionTag
+  type?: SlideType
 }
 
 /**
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index b35912af..69a77a62 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -17,6 +17,7 @@
           </FileInput>
           <PopoverMenuItem @click="setDialogForExport('pptx')">导出文件</PopoverMenuItem>
           <PopoverMenuItem @click="resetSlides(); mainMenuVisible = false">重置幻灯片</PopoverMenuItem>
+          <PopoverMenuItem @click="openMarkupPanel(); mainMenuVisible = false">幻灯片类型标注</PopoverMenuItem>
           <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/issues')">意见反馈</PopoverMenuItem>
           <PopoverMenuItem @click="goLink('https://github.com/pipipi-pikachu/PPTist/blob/master/doc/Q&A.md')">常见问题</PopoverMenuItem>
           <PopoverMenuItem @click="mainMenuVisible = false; hotkeyDrawerVisible = true">快捷操作</PopoverMenuItem>
@@ -125,6 +126,10 @@ const setDialogForExport = (type: DialogForExportTypes) => {
   mainStore.setDialogForExport(type)
   mainMenuVisible.value = false
 }
+
+const openMarkupPanel = () => {
+  mainStore.setMarkupPanelState(true)
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/Editor/MarkupPanel.vue b/src/views/Editor/MarkupPanel.vue
new file mode 100644
index 00000000..66aa6545
--- /dev/null
+++ b/src/views/Editor/MarkupPanel.vue
@@ -0,0 +1,155 @@
+<template>
+  <MoveablePanel 
+    class="notes-panel" 
+    :width="300" 
+    :height="130" 
+    title="幻灯片类型标注" 
+    :left="-270" 
+    :top="90"
+    @close="close()"
+  >
+    <div class="container">
+      <div class="row">
+        <div style="width: 40%;">当前页面类型：</div>
+        <Select
+          style="width: 60%;"
+          :value="slideType"
+          @update:value="value => updateSlide(value as SlideType | '')"
+          :options="slideTypeOptions"
+        />
+      </div>
+      <div class="row" v-if="handleElement && (handleElement.type === 'text' || (handleElement.type === 'shape' && handleElement.text))">
+        <div style="width: 40%;">当前文本类型：</div>
+        <Select
+          style="width: 60%;"
+          :value="textType"
+          @update:value="value => updateElement(value as TextType | '')"
+          :options="textTypeOptions"
+        />
+      </div>
+      <div class="placeholder" v-else>选中文本框或带文本的形状，标记文本类型</div>
+    </div>
+  </MoveablePanel>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
+import type { SlideType, TextType } from '@/types/slides'
+
+import MoveablePanel from '@/components/MoveablePanel.vue'
+import Select from '@/components/Select.vue'
+
+const slidesStore = useSlidesStore()
+const mainStore = useMainStore()
+const { currentSlide } = storeToRefs(slidesStore)
+const { handleElement, handleElementId } = storeToRefs(mainStore)
+
+const slideTypeOptions = ref<{ label: string; value: SlideType | '' }[]>([
+  { label: '未标记类型', value: '' },
+  { label: '封面页', value: 'cover' },
+  { label: '目录页', value: 'contents' },
+  { label: '过渡页', value: 'transition' },
+  { label: '内容页', value: 'content' },
+  { label: '结束页', value: 'end' },
+])
+
+const textTypeOptions = ref<{ label: string; value: TextType | '' }[]>([
+  { label: '未标记类型', value: '' },
+  { label: '标题', value: 'title' },
+  { label: '副标题', value: 'subtitle' },
+  { label: '正文', value: 'content' },
+  { label: '列表项目', value: 'item' },
+  { label: '注释', value: 'notes' },
+  { label: '页眉', value: 'header' },
+  { label: '页脚', value: 'footer' },
+])
+
+const slideType = computed(() => currentSlide.value?.type || '')
+const textType = computed(() => {
+  if (!handleElement.value) return ''
+  if (handleElement.value.type === 'text') return handleElement.value.textType || ''
+  if (handleElement.value.type === 'shape' && handleElement.value.text) return handleElement.value.text.type || ''
+  return ''
+})
+
+const updateSlide = (type: SlideType | '') => {
+  if (type) slidesStore.updateSlide({ type })
+  else {
+    slidesStore.removeSlideProps({
+      id: currentSlide.value.id,
+      propName: 'type',
+    })
+  }
+}
+
+const updateElement = (type: TextType | '') => {
+  if (!handleElement.value) return
+  if (handleElement.value.type === 'text') {
+    if (type) {
+      slidesStore.updateElement({ id: handleElementId.value, props: { textType: type } })
+    }
+    else {
+      slidesStore.removeElementProps({
+        id: handleElementId.value,
+        propName: 'textType',
+      })
+    }
+  }
+  if (handleElement.value.type === 'shape') {
+    const text = handleElement.value.text
+    if (!text) return
+
+    if (type) {
+      slidesStore.updateElement({
+        id: handleElementId.value,
+        props: { text: { ...text, type } },
+      })
+    }
+    else {
+      delete text.type
+      slidesStore.updateElement({
+        id: handleElementId.value,
+        props: { text },
+      })
+    }
+  }
+}
+
+const close = () => {
+  mainStore.setMarkupPanelState(false)
+}
+</script>
+
+<style lang="scss" scoped>
+.notes-panel {
+  height: 100%;
+  font-size: 12px;
+  user-select: none;
+}
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.row {
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  & + .row {
+    margin-top: 5px;
+  }
+}
+.placeholder {
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  color: #999;
+  font-style: italic;
+  border: 1px dashed #ccc;
+  border-radius: $borderRadius;
+  margin-top: 5px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/Editor/index.vue b/src/views/Editor/index.vue
index 07849b9a..f9b0c19b 100644
--- a/src/views/Editor/index.vue
+++ b/src/views/Editor/index.vue
@@ -19,6 +19,7 @@
   <SelectPanel v-if="showSelectPanel" />
   <SearchPanel v-if="showSearchPanel" />
   <NotesPanel v-if="showNotesPanel" />
+  <MarkupPanel v-if="showMarkupPanel" />
 
   <Modal
     :visible="!!dialogForExport" 
@@ -46,10 +47,11 @@ import ExportDialog from './ExportDialog/index.vue'
 import SelectPanel from './SelectPanel.vue'
 import SearchPanel from './SearchPanel.vue'
 import NotesPanel from './NotesPanel.vue'
+import MarkupPanel from './MarkupPanel.vue'
 import Modal from '@/components/Modal.vue'
 
 const mainStore = useMainStore()
-const { dialogForExport, showSelectPanel, showSearchPanel, showNotesPanel } = storeToRefs(mainStore)
+const { dialogForExport, showSelectPanel, showSearchPanel, showNotesPanel, showMarkupPanel } = storeToRefs(mainStore)
 const closeExportDialog = () => mainStore.setDialogForExport('')
 
 const remarkHeight = ref(40)