From e1e791a39549e460fcc661c6d1717de723b018be Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Wed, 13 Sep 2023 21:57:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E6=BC=94=E7=A4=BA=E6=96=87=E7=A8=BF=E6=A0=87=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useExport.ts                  | 10 ++--
 src/store/slides.ts                     |  7 +++
 src/views/Editor/EditorHeader/index.vue | 65 ++++++++++++++++++++++++-
 3 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/src/hooks/useExport.ts b/src/hooks/useExport.ts
index c3709ac2..545e04cb 100644
--- a/src/hooks/useExport.ts
+++ b/src/hooks/useExport.ts
@@ -25,7 +25,7 @@ interface ExportImageConfig {
 
 export default () => {
   const slidesStore = useSlidesStore()
-  const { slides, theme, viewportRatio } = storeToRefs(slidesStore)
+  const { slides, theme, viewportRatio, title } = storeToRefs(slidesStore)
 
   const exporting = ref(false)
 
@@ -47,7 +47,7 @@ export default () => {
 
       toImage(domRef, config).then(dataUrl => {
         exporting.value = false
-        saveAs(dataUrl, `pptist_slides.${format}`)
+        saveAs(dataUrl, `${title.value}.${format}`)
       }).catch(() => {
         exporting.value = false
         message.error('导出图片失败')
@@ -58,13 +58,13 @@ export default () => {
   // 导出pptist文件（特有 .pptist 后缀文件）
   const exportSpecificFile = (_slides: Slide[]) => {
     const blob = new Blob([encrypt(JSON.stringify(_slides))], { type: '' })
-    saveAs(blob, 'pptist_slides.pptist')
+    saveAs(blob, `${title.value}.pptist`)
   }
   
   // 导出JSON文件
   const exportJSON = () => {
     const blob = new Blob([JSON.stringify(slides.value)], { type: '' })
-    saveAs(blob, 'pptist_slides.json')
+    saveAs(blob, `${title.value}.json`)
   }
 
   // 格式化颜色值为 透明度 + HexString，供pptxgenjs使用
@@ -769,7 +769,7 @@ export default () => {
     }
 
     setTimeout(() => {
-      pptx.writeFile({ fileName: `pptist.pptx` }).then(() => exporting.value = false).catch(() => {
+      pptx.writeFile({ fileName: `${title.value}.pptx` }).then(() => exporting.value = false).catch(() => {
         exporting.value = false
         message.error('导出失败')
       })
diff --git a/src/store/slides.ts b/src/store/slides.ts
index 45caf023..fd0a8787 100644
--- a/src/store/slides.ts
+++ b/src/store/slides.ts
@@ -23,6 +23,7 @@ interface FormatedAnimation {
 }
 
 export interface SlidesState {
+  title: string
   theme: SlideTheme
   slides: Slide[]
   slideIndex: number
@@ -31,6 +32,7 @@ export interface SlidesState {
 
 export const useSlidesStore = defineStore('slides', {
   state: (): SlidesState => ({
+    title: '未命名演示文稿', // 幻灯片标题
     theme: theme, // 主题样式
     slides: slides, // 幻灯片页面数据
     slideIndex: 0, // 当前页面索引
@@ -105,6 +107,11 @@ export const useSlidesStore = defineStore('slides', {
   },
 
   actions: {
+    setTitle(title: string) {
+      if (!title) this.title = '未命名演示文稿'
+      else this.title = title
+    },
+
     setTheme(themeProps: Partial<SlideTheme>) {
       this.theme = { ...this.theme, ...themeProps }
     },
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index 23377605..14651aa7 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -19,6 +19,22 @@
         </template>
         <div class="menu-item"><IconHamburgerButton class="icon" /></div>
       </Popover>
+
+      <div class="title">
+        <Input 
+          class="title-input" 
+          ref="titleInputRef"
+          v-model:value="titleValue" 
+          @blur="handleUpdateTitle()" 
+          v-if="editingTitle" 
+        ></Input>
+        <div 
+          class="title-text"
+          @click="startEditTitle()"
+          :title="title"
+          v-else
+        >{{ title }}</div>
+      </div>
     </div>
 
     <div class="right">
@@ -63,8 +79,9 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { useMainStore } from '@/store'
+import { nextTick, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useMainStore, useSlidesStore } from '@/store'
 import useScreening from '@/hooks/useScreening'
 import useImport from '@/hooks/useImport'
 import useSlideHandler from '@/hooks/useSlideHandler'
@@ -77,15 +94,32 @@ import {
   Tooltip,
   Drawer,
   Popover,
+  Input,
 } from 'ant-design-vue'
 
 const mainStore = useMainStore()
+const slidesStore = useSlidesStore()
+const { title } = storeToRefs(slidesStore)
 const { enterScreening, enterScreeningFromStart } = useScreening()
 const { importSpecificFile, importPPTXFile, exporting } = useImport()
 const { resetSlides } = useSlideHandler()
 
 const mainMenuVisible = ref(false)
 const hotkeyDrawerVisible = ref(false)
+const editingTitle = ref(false)
+const titleInputRef = ref<HTMLInputElement>()
+const titleValue = ref('')
+
+const startEditTitle = () => {
+  titleValue.value = title.value
+  editingTitle.value = true
+  nextTick(() => titleInputRef.value?.focus())
+}
+
+const handleUpdateTitle = () => {
+  slidesStore.setTitle(titleValue.value)
+  editingTitle.value = false
+}
 
 const goLink = (url: string) => {
   window.open(url)
@@ -151,6 +185,33 @@ const setDialogForExport = (type: DialogForExportTypes) => {
     cursor: pointer;
   }
 }
+.title {
+  height: 30px;
+  margin-left: 2px;
+  font-size: 13px;
+
+  .title-input {
+    width: 200px;
+    height: 100%;
+    padding-left: 5px;
+    padding-right: 5px;
+    font-family: 'Microsoft YaHei';
+  }
+  .title-text {
+    min-width: 20px;
+    max-width: 400px;
+    line-height: 30px;
+    padding: 0 6px;
+    border-radius: $borderRadius;
+    cursor: pointer;
+
+    @include ellipsis-oneline();
+
+    &:hover {
+      background-color: #f1f1f1;
+    }
+  }
+}
 .github-link {
   display: inline-block;
   height: 30px;