feat(editor) <en> suppport update page title <zh> 支持修改页面标题

ly525
1 parent 0df8bee6
Showing 4 changed files with 75 additions and 12 deletions
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/editor/page-manager/index.js
front-end/h5/src/components/core/models/page.js
front-end/h5/src/store/modules/page.js
@@ -163,6 +163,10 @@ export default {
                   onSelectMenuItem={(menuKey) => {
                     this.pageManager({ type: menuKey })
                   }}
+                  onEditTitle={({ pageIndexForEditingTitle, newTitle }) => {
+                    this.pageManager({ type: 'editTitle', value: { pageIndexForEditingTitle, newTitle } })
+                    this.saveWork({ isSaveCover: false })
+                  }}
                   onSelectPage={(pageIndex) => { this.setEditingPage(pageIndex) }}
                 />
               </a-tab-pane>
@@ -10,12 +10,62 @@ export default {
       default: () => {}
     }
   },
+  data: () => ({
+    hoverIndex: -1, // 显示编辑按钮
+    editingTitle: '' // 临时缓存当前编辑的 title，点击 Yes 再真正用其更新 page title
+  }),
   methods: {
+    getTitle (page, index) {
+      return page.title || this.$t('editor.pageManager.title', { index })
+    },
+    _renderEditTitle (page, index) {
+      return (
+        <a-popconfirm
+          placement="bottom"
+          onConfirm={() => {
+            this.$emit('editTitle', { newTitle: this.editingTitle, pageIndexForEditingTitle: index })
+          }}
+          onCancel={() => {}}
+          okText="Yes"
+          cancelText="No"
+        >
+          <a-input
+            slot="title"
+            value={this.editingTitle}
+            size="small"
+            onChange={e => {
+              this.editingTitle = e.target.value
+            }}
+          >
+          </a-input>
+          <a-icon type="edit" onClick={(e) => {
+            e.stopPropagation() // 将 click icon 与 click page item 隔离开。编辑标题的同时不要切换页面
+            this.editingTitle = this.getTitle(page, index)
+          }}/>
+        </a-popconfirm>
+      )
+    },
+    _renderTitleMenu (page, index) {
+      const addPageText = this.$t('editor.pageManager.action.add')
+      const copyPageText = this.$t('editor.pageManager.action.copy')
+      const deletePageText = this.$t('editor.pageManager.action.delete')
+      return (
+        <a-dropdown trigger={['hover']} placement='bottomCenter'>
+          <a class="ant-dropdown-link" href="#" class="ml-2"><a-icon type="down" /></a>
+          <a-menu slot="overlay" onClick={({ key }) => this.$emit('selectMenuItem', key)}>
+            <a-menu-item key="add"><a-icon type="plus" />{addPageText}</a-menu-item>
+            <a-menu-item key="copy"><a-icon type="copy" />{copyPageText}</a-menu-item>
+            <a-menu-item key="delete"><a-icon type="delete" />{deletePageText}</a-menu-item>
+          </a-menu>
+        </a-dropdown>
+      )
+    },
+    onLeave () {
+      this.hoverIndex = -1
+    }
   },
   render (h) {
     const addPageText = this.$t('editor.pageManager.action.add')
-    const copyPageText = this.$t('editor.pageManager.action.copy')
-    const deletePageText = this.$t('editor.pageManager.action.delete')
     return (
       <div class="page-manager-panel">
         {
@@ -27,18 +77,22 @@ export default {
                 page.uuid === this.editingPage.uuid && 'active'
               ]}
               onClick={() => { this.$emit('selectPage', index) }}
+              // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VHover/VHover.ts
+              onMouseenter={() => { this.hoverIndex = index }}
             >
               {/* #!en: Page<Index> */}
               {/* #!zh: 第<Index>页面 */}
-              <span>{this.$t('editor.pageManager.title', { index })}</span>
-              <a-dropdown trigger={['hover']} placement='bottomCenter'>
-                <a class="ant-dropdown-link" href="#"><a-icon type="down" /></a>
-                <a-menu slot="overlay" onClick={({ key }) => { this.$emit('selectMenuItem', key) }}>
-                  <a-menu-item key="add"><a-icon type="user" />{addPageText}</a-menu-item>
-                  <a-menu-item key="copy"><a-icon type="user" />{copyPageText}</a-menu-item>
-                  <a-menu-item key="delete"><a-icon type="user" />{deletePageText}</a-menu-item>
-                </a-menu>
-              </a-dropdown>
+              <span>
+                <a-badge
+                  count={index + 1}
+                  numberStyle={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
+                />
+                <span class="ml-3">{this.getTitle(page, index)}</span>
+              </span>
+              <span>
+                {this.hoverIndex === index && this._renderEditTitle(page, index)}
+                {this._renderTitleMenu(page, index)}
+              </span>
             </span>
           ))
         }
@@ -4,12 +4,13 @@ import LbpBackground from &#39;../../plugins/lbp-background&#39;
 class Page {
   constructor (page = {}) {
     this.uuid = +new Date()
+    this.title = page.title || ''
     this.elements = page.elements || [new Element(LbpBackground)]
   }
   clone () {
     const elements = this.elements.map(element => new Element(element))
-    return new Page({ elements })
+    return new Page({ title: this.title, elements })
   }
 }
@@ -17,6 +17,10 @@ export const mutations = {
   },
   pageManager (state, { type, value }) {
     switch (type) {
+      case 'editTitle':
+        const { pageIndexForEditingTitle, newTitle } = value
+        state.work.pages[pageIndexForEditingTitle].title = newTitle
+        break
       case 'add':
         const page = new Page(value)
         state.work.pages.push(page)