fix(edtor) switch between page

ly525
1 parent 115893d7
Showing 2 changed files with 19 additions and 9 deletions
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/store/modules/page.js
@@ -108,6 +108,7 @@ export default {
   }),
   computed: {
     ...mapState('editor', {
+      editingPage: state => state.editingPage,
       editingElement: state => state.editingElement,
       elements: state => state.editingPage.elements,
       pages: state => state.work.pages,
@@ -123,7 +124,8 @@ export default {
       'createWork',
       'fetchWork',
       'setWorkAsTemplate',
-      'setEditingElement'
+      'setEditingElement',
+      'setEditingPage'
     ]),
     ...mapActions('loading', {
       updateLoading: 'update'
@@ -148,7 +150,16 @@ export default {
         case sidebarMenus[1].value:
           return (
             this.pages.map((page, index) => (
-              <span style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0' }}>
+              <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>
@@ -282,7 +293,7 @@ export default {
               <div style={{ fontSize: '12px', textAlign: 'center' }}>{this.scaleRate * 100}%</div>
             </a-button-group>
           </a-layout-sider>
-          <a-layout-sider width="340" theme='light' style={{ background: '#fff', padding: '0 12px' }}>
+          <a-layout-sider width="380" theme='light' style={{ background: '#fff', padding: '0 12px' }}>
             <a-tabs
               style="height: 100%;"
               tabBarGutter={10}
@@ -294,7 +305,7 @@ export default {
                   ElementUI：label
                   Ant Design Vue：tab
               */}
-              <a-tab-pane key="属性"><span slot="tab"><a-icon type="apple" />{this.$t('editor.editPanel.tab.prop')}</span><RenderPropsEditor/></a-tab-pane>
+              <a-tab-pane key="属性"><span slot="tab">{this.$t('editor.editPanel.tab.prop')}</span><RenderPropsEditor/></a-tab-pane>
               <a-tab-pane label="动画" key='动画' tab={this.$t('editor.editPanel.tab.animation')}><RenderAnimationEditor /></a-tab-pane>
               <a-tab-pane label="动作" key='动作' tab={this.$t('editor.editPanel.tab.action')}>{ this.activeTabKey === '动作' && <RenderActoionEditor/> }</a-tab-pane>
               <a-tab-pane label="脚本" key='脚本' tab={this.$t('editor.editPanel.tab.script')}><RenderScriptEditor/></a-tab-pane>
@@ -2,8 +2,8 @@ import Page from &#39;../../components/core/models/page&#39;
 // actions
 export const actions = {
-  setEditingPage ({ commit }, payload) {
-    commit('setEditingPage', payload)
+  setEditingPage ({ commit }, pageIndex = 0) {
+    commit('setEditingPage', pageIndex)
   },
   pageManager ({ commit }, payload) {
     commit('pageManager', payload)
@@ -12,9 +12,8 @@ export const actions = {
 // mutations
 export const mutations = {
-  setEditingPage (state, payload) {
-    payload = payload || state.work.pages[0]
-    state.editingPage = payload
+  setEditingPage (state, pageIndex = 0) {
+    state.editingPage = state.work.pages[pageIndex]
   },
   pageManager (state, { type, value }) {
     switch (type) {