fix: page manager

ly525
1 parent 63a6b7b2
Showing 7 changed files with 105 additions and 62 deletions
front-end/h5/src/components/core/editor/left-panel/page-manager/index.js
front-end/h5/src/components/core/editor/left-panel/page-manager/title-editor.js
front-end/h5/src/components/core/editor/left-panel/page-manager/title-menu.js
front-end/h5/src/components/core/editor/left-panel/page-manager/title-text.js
front-end/h5/src/components/core/store/modules/page.js
front-end/h5/src/locales/lang/en-US.js
front-end/h5/src/locales/lang/zh-CN.js
 import { mapState, mapActions } from 'vuex'
+import PageTitleEditor from './title-editor'
+import PageTitleMenu from './title-menu'
+import PageTitleText from './title-text'
  
 export default {
   data: () => ({
-    hoverIndex: -1, // 显示编辑按钮
-    editingTitle: '' // 临时缓存当前编辑的 title，点击 Yes 再真正用其更新 page title
+    hoverIndex: -1 // 显示编辑按钮
   }),
   computed: {
     ...mapState('editor', {
@@ -21,51 +23,14 @@ export default {
       'saveWork',
       'setEditingPage'
     ]),
-    getTitle (page, index) {
-      return page.title || this.$t('editor.pageManager.title', { index })
+    onSelectMenuItem (menuKey) {
+      this.pageManager({ type: menuKey })
     },
-    _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>
-      )
+    onEditTitle ({ pageIndex, newTitle }) {
+      this.pageManager({ type: 'editTitle', value: { pageIndex, newTitle } })
+      this.saveWork({ isSaveCover: false })
     },
+    onSelectPage (pageIndex) { this.setEditingPage(pageIndex) },
     onLeave () {
       this.hoverIndex = -1
     }
@@ -82,22 +47,21 @@ export default {
                 'page-manager-panel__item',
                 page.uuid === this.editingPage.uuid && 'active'
               ]}
-              onClick={() => { this.$emit('selectPage', index) }}
+              onClick={() => this.onSelectPage(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>
-                <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>
+              <PageTitleText page={page} pageIndex={index} />
               <span>
-                {this.hoverIndex === index && this._renderEditTitle(page, index)}
-                {this._renderTitleMenu(page, index)}
+                {
+                  this.hoverIndex === index &&
+                  <PageTitleEditor
+                    page={page}
+                    pageIndex={index}
+                    onEditTitle={this.onEditTitle}
+                  />
+                }
+                <PageTitleMenu onSelectMenuItem={this.onSelectMenuItem} />
               </span>
             </span>
           ))
@@ -106,7 +70,7 @@ export default {
           icon="plus"
           type="dashed"
           class="footer-actions"
-          onClick={() => { this.$emit('selectMenuItem', 'add') }}
+          onClick={() => this.onSelectMenuItem('add') }
         >{addPageText}</a-button>
       </div>
     )
+export default {
+  props: ['page', 'pageIndex'],
+  data: () => ({
+    editingTitle: '' // 临时缓存当前编辑的 title，点击 Yes 再真正用其更新 page title
+  }),
+  methods: {
+    getTitle () {
+      return this.page.title || this.$t('editor.pageManager.title', { index: this.pageIndex })
+    }
+  },
+  render () {
+    return (
+      <a-popconfirm
+        placement="bottom"
+        onConfirm={() => {
+          this.$emit('editTitle', { newTitle: this.editingTitle, pageIndex: this.pageIndex })
+        }}
+        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()
+        }}/>
+      </a-popconfirm>
+
+    )
+  }
+}
+export default {
+  render () {
+    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>
+    )
+  }
+}
+export default {
+  props: ['page', 'pageIndex'],
+  methods: {
+    getTitle () {
+      return this.page.title || this.$t('editor.pageManager.title', { index: this.pageIndex })
+    }
+  },
+  render (h) {
+    // #!en: Page<Index>
+    // #!zh: 第<Index>页面
+    return (
+      <span>
+        <a-badge
+          count={this.pageIndex + 1}
+          numberStyle={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }}
+        />
+        <span class="ml-3">{this.getTitle()}</span>
+      </span>
+    )
+  }
+}
@@ -30,8 +30,8 @@ export const mutations = {
   pageManager (state, { type, value }) {
     switch (type) {
       case 'editTitle':
-        const { pageIndexForEditingTitle, newTitle } = value
-        state.work.pages[pageIndexForEditingTitle].title = newTitle
+        const { pageIndex, newTitle } = value
+        state.work.pages[pageIndex].title = newTitle
         break
       case 'add':
         const page = new Page(value)
@@ -70,6 +70,7 @@ export default {
       redo: 'Redo{hotkey}',
       preview: 'Preview',
       copyCurrentPage: 'CopyCurrentPage',
+      copyCurrentElement: 'copyCurrentElement',
       importPSD: 'Import PSD',
       zoomIn: 'Zoom In{hotkey}',
       zoomOut: 'Zoom Out{hotkey}',
@@ -2,8 +2,8 @@
  * @Author: ly525
  * @Date: 2019-11-24 18:51:58
  * @LastEditors: ly525
- * @LastEditTime: 2020-04-18 00:30:40
- * @FilePath: /luban-h5/front-end/h5/src/locales/lang/zh-CN.js
+ * @LastEditTime: 2020-10-13 00:51:57
+ * @FilePath: /h5/src/locales/lang/zh-CN.js
  * @Github: https://github.com/ly525/luban-h5
  * @Description: Do not edit
  * @Copyright 2018 - 2020 luban-h5. All Rights Reserved
@@ -79,6 +79,7 @@ export default {
       redo: '重做{hotkey}',
       preview: '预览',
       copyCurrentPage: '复制当前页面',
+      copyCurrentElement: '复制当前元素',
       importPSD: '导入PSD',
       zoomIn: '缩小{hotkey}',
       zoomOut: '放大{hotkey}',