feat(editor) add shortcut for add page and update page-manager layout

ly525
1 parent 4e2e89e3
Showing 4 changed files with 105 additions and 29 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/styles/index.scss
front-end/h5/src/components/core/support/image-gallery/tabs/personal.js
@@ -13,6 +13,7 @@ import RenderAnimationEditor from &#39;./edit-panel/animation&#39;
 import RenderActoionEditor from './edit-panel/action'
 import RenderBackgroundEditor from './edit-panel/background'
 import RenderShortcutsPanel from './shortcuts-panel/index'
+import RenderPageManager from './page-manager/index'
 import PreviewDialog from './modals/preview.vue'
  
 import LogoOfHeader from '@/components/common/header/logo.js'
@@ -147,33 +148,36 @@ export default {
     _renderMenuContent () {
       switch (this.activeMenuKey) {
         case sidebarMenus[0].value:
-          return <RenderShortcutsPanel pluginsList={this.pluginsList} handleClickShortcut={this.clone} />
+          return (
+            <a-tabs
+              style="height: 100%;"
+              tabBarGutter={10}
+            >
+              <a-tab-pane key="plugin-list" tab={this.$t('editor.sidebar.components')}>
+                <RenderShortcutsPanel pluginsList={this.pluginsList} handleClickShortcut={this.clone} />
+              </a-tab-pane>
+              <a-tab-pane key='page-manager' tab={this.$t('editor.sidebar.pages')}>
+                <RenderPageManager
+                  pages={this.pages}
+                  editingPage={this.editingPage}
+                  onSelectMenuItem={(menuKey) => {
+                    this.pageManager({ type: menuKey })
+                  }}
+                  onSelectPage={(pageIndex) => { this.setEditingPage(pageIndex) }}
+                />
+              </a-tab-pane>
+            </a-tabs>
+          )
         case sidebarMenus[1].value:
           return (
-            this.pages.map((page, index) => (
-              <span
-                style={{
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  padding: '12px 0',
-                  color: page.uuid === this.editingPage.uuid ? '#1593ff' : ''
-                }}
-                class="cursor-pointer"
-                onClick={() => { this.setEditingPage(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.pageManager({ type: key }) }}>
-                    <a-menu-item key="add"><a-icon type="user" />{this.$t('editor.pageManager.action.add')}</a-menu-item>
-                    <a-menu-item key="copy"><a-icon type="user" />{this.$t('editor.pageManager.action.copy')}</a-menu-item>
-                    <a-menu-item key="delete"><a-icon type="user" />{this.$t('editor.pageManager.action.delete')}</a-menu-item>
-                  </a-menu>
-                </a-dropdown>
-              </span>
-            ))
+            <RenderPageManager
+              pages={this.pages}
+              editingPage={this.editingPage}
+              onSelectMenuItem={(menuKey) => {
+                this.pageManager({ type: menuKey })
+              }}
+              onSelectPage={(pageIndex) => { this.setEditingPage(pageIndex) }}
+            />
           )
         default:
           return null
@@ -225,7 +229,7 @@ export default {
           <ExternalLinksOfHeader />
         </a-layout-header>
         <a-layout>
-          <a-layout-sider width="160" style="background: #fff" collapsed>
+          {/* <a-layout-sider collapsedWidth={40} style="background: #fff" collapsed>
             <a-menu
               mode="inline"
               defaultSelectedKeys={['pluginList']}
@@ -236,13 +240,12 @@ export default {
                 sidebarMenus.map(menu => (
                   <a-menu-item key={menu.value}>
                     <a-icon type={menu.antIcon} />
-                    {/* <span>{menu.label}</span> */}
                     <span>{this.$t(menu.i18nLabel)}</span>
                   </a-menu-item>
                 ))
               }
             </a-menu>
-          </a-layout-sider>
+          </a-layout-sider> */}
           <a-layout-sider width="240" theme='light' style={{ background: '#fff', padding: '12px' }}>
             { this._renderMenuContent() }
           </a-layout-sider>
+export default {
+  props: {
+    pages: {
+      required: false,
+      type: Array,
+      default: () => []
+    },
+    editingPage: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  methods: {
+  },
+  render (h) {
+    const addPageText = this.$t('editor.pageManager.action.add')
+    const copyPageText = this.$t('editor.pageManager.action.add')
+    const deletePageText = this.$t('editor.pageManager.action.add')
+    return (
+      <div class="page-manager-panel">
+        {
+          this.pages.map((page, index) => (
+            <span
+              class={[
+                'cursor-pointer',
+                'page-manager-panel__item',
+                page.uuid === this.editingPage.uuid && 'active'
+              ]}
+              onClick={() => { this.$emit('selectPage', 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-button
+          icon="plus"
+          type="dashed"
+          class="footer-actions"
+          onClick={() => { this.$emit('selectMenuItem', 'add') }}
+        >{addPageText}</a-button>
+      </div>
+    )
+  }
+}
@@ -133,6 +133,26 @@
   @include shortcut-button;
 }
  
+.page-manager-panel {
+  position: relative;
+
+  &__item {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 0;
+    height: 60px;
+    border-bottom: 1px solid #f0f4f5;
+
+    &.active {
+      color: #1593ff;
+    }
+  }
+
+  .footer-actions {
+    margin-top: 40px;
+  }
+}
+
 // 动画编辑面板定制
 #animation-edit-panel {
   .ant-collapse-header {
@@ -36,7 +36,6 @@ export default {
               dataSource={this.items}
               renderItem={(item, index) => (
                 <a-list-item onClick={() => {
-                  debugger
                   this.$emit('changeItem', item)
                 }}>
                   <ImageItem item={item} />