From cd786f34654c99259adb8d21e0f683fda54de5d3 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Tue, 27 Sep 2022 21:14:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E8=AE=BE=E7=BD=AE/?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=85=83=E7=B4=A0=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/MoveablePanel.vue |  2 +-
 src/types/slides.ts              |  3 ++
 src/views/Editor/SelectPanel.vue | 60 +++++++++++++++++++++++++++++---
 3 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/src/components/MoveablePanel.vue b/src/components/MoveablePanel.vue
index 9255872e..caa5e086 100644
--- a/src/components/MoveablePanel.vue
+++ b/src/components/MoveablePanel.vue
@@ -107,7 +107,7 @@ const startMove = (e: MouseEvent) => {
   border-radius: $borderRadius;
   display: flex;
   flex-direction: column;
-  z-index: 99999;
+  z-index: 999;
 }
 .header {
   height: 40px;
diff --git a/src/types/slides.ts b/src/types/slides.ts
index 6efe1546..c9e5c631 100644
--- a/src/types/slides.ts
+++ b/src/types/slides.ts
@@ -99,6 +99,8 @@ export interface PPTElementLink {
  * rotate: 旋转角度
  * 
  * link?: 超链接
+ * 
+ * name?: 元素名
  */
 interface PPTBaseElement {
   id: string
@@ -110,6 +112,7 @@ interface PPTBaseElement {
   height: number
   rotate: number
   link?: PPTElementLink
+  name?: string
 }
 
 
diff --git a/src/views/Editor/SelectPanel.vue b/src/views/Editor/SelectPanel.vue
index a42cb013..1fb0135e 100644
--- a/src/views/Editor/SelectPanel.vue
+++ b/src/views/Editor/SelectPanel.vue
@@ -25,8 +25,18 @@
             v-for="groupItem in item.elements" 
             :key="groupItem.id" 
             @click="selectGroupEl(item, groupItem.id)"
+            @dblclick="enterEdit(groupItem.id)"
           >
-            <div class="name">{{ELEMENT_TYPE_ZH[groupItem.type]}}</div>
+            <input 
+              :id="`input-${groupItem.id}`" 
+              :value="groupItem.name || ELEMENT_TYPE_ZH[groupItem.type]" 
+              class="input" 
+              type="text" 
+              v-if="editingElId === groupItem.id" 
+              @blur="$event => saveElementName($event, groupItem.id)"
+              @keydown.enter="$event => saveElementName($event, groupItem.id)"
+            >
+            <div v-else class="name">{{groupItem.name || ELEMENT_TYPE_ZH[groupItem.type]}}</div>
             <div class="icons">
               <IconPreviewClose style="font-size: 17px;" @click.stop="hideElement(groupItem.id)" v-if="hiddenElementIdList.includes(groupItem.id)" />
               <IconPreviewOpen style="font-size: 17px;" @click.stop="hideElement(groupItem.id)" v-else />
@@ -38,8 +48,18 @@
           :class="{ 'active': activeElementIdList.includes(item.id) }"
           v-else 
           @click="selectEl(item.id)"
+          @dblclick="enterEdit(item.id)"
         >
-          <div class="name">{{ELEMENT_TYPE_ZH[item.type]}}</div>
+          <input 
+            :id="`input-${item.id}`" 
+            :value="item.name || ELEMENT_TYPE_ZH[item.type]" 
+            class="input" 
+            type="text" 
+            v-if="editingElId === item.id" 
+            @blur="$event => saveElementName($event, item.id)"
+            @keydown.enter="$event => saveElementName($event, item.id)"
+          >
+          <div v-else class="name">{{item.name || ELEMENT_TYPE_ZH[item.type]}}</div>
           <div class="icons">
             <IconPreviewClose style="font-size: 17px;" @click.stop="hideElement(item.id)" v-if="hiddenElementIdList.includes(item.id)" />
             <IconPreviewOpen style="font-size: 17px;" @click.stop="hideElement(item.id)" v-else />
@@ -51,7 +71,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useSlidesStore, useMainStore } from '@/store'
 import { PPTElement } from '@/types/slides'
@@ -121,6 +141,22 @@ const hideAll = () => {
   if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
 }
 
+const editingElId = ref('')
+
+const saveElementName = (e: FocusEvent | KeyboardEvent, id: string) => {
+  const name = (e.target as HTMLInputElement).value
+  slidesStore.updateElement({ id, props: { name } })
+  editingElId.value = ''
+}
+
+const enterEdit = (id: string) => {
+  editingElId.value = id
+  nextTick(() => {
+    const inputRef = document.querySelector(`#input-${id}`) as HTMLInputElement
+    inputRef.focus()
+  })
+}
+
 const close = () => {
   mainStore.setSelectPanelState(false)
 }
@@ -146,7 +182,6 @@ const close = () => {
   font-size: 12px;
   border-radius: $borderRadius;
   display: flex;
-  justify-content: space-between;
   align-items: center;
   cursor: pointer;
 
@@ -160,11 +195,18 @@ const close = () => {
     background-color: rgba($color: $themeColor, $alpha: .25);
   }
 
+  .name {
+    height: 18px;
+    line-height: 18px;
+    flex: 1;
+    @include ellipsis-oneline();
+  }
   .icons {
     width: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-left: 5px;
   }
 }
 .group-els {
@@ -178,4 +220,14 @@ const close = () => {
     margin-left: 15px;
   }
 }
+.input {
+  width: 100%;
+  height: 18px;
+  line-height: 18px;
+  border: 0;
+  outline: 0;
+  padding-left: 0;
+  padding-right: 0;
+  flex: 1;
+}
 </style>
\ No newline at end of file