feature: 添加业务库tabs; 修改基础样式覆盖等bug

51cd9cc8 · 郝聪敏 · 3627f1e3 · 51cd9cc8 · 51cd9cc8 · 51cd9cc8
Commit 51cd9cc8 authored Mar 15, 2021 by 郝聪敏
29 changed files
--- a/app/web/index.d.ts
+++ b/app/web/index.d.ts
--- a/app/web/lib/GoodsTabs/index.vue
+++ b/app/web/lib/GoodsTabs/index.vue
@@ -52,7 +52,6 @@
          })
          return rs;
        });
-        // console.log('tabs', this.childItem.child, list);
        return list;
      }
    },

--- a/app/web/page/editor/component/BasicPageForm/index.ts
+++ b/app/web/page/editor/component/BasicPageForm/index.ts
 import {Component, Vue, Prop, Watch} from 'vue-property-decorator';
 import { Getter, State } from 'vuex-class';
 import { reduce, ceil, subtract, divide } from 'lodash';
-import Upload from '@editor/component/DynamicForm/component/Upload/index.vue';
 import html2canvas from 'html2canvas';
-import editorApi from '@api/editor.api';
 import uuidv4 from 'uuid/v4';
-import config from '@/config';
+import Upload from '@editor/component/DynamicForm/component/Upload/index.vue';
+import editorApi from '@api/editor.api';
+import config from '@config/index';
+import { getStyle } from '@service/utils.service';
 @Component({ components: { Upload }, name: 'BasicPageForm' })
 export default class DynamicForm extends Vue {
@@ -13,7 +14,9 @@ export default class DynamicForm extends Vue {
  @Prop(Boolean) value;
  showPopup: boolean = false;
-  formCustom: object = {};
+  loadingSave: boolean = false;
+  loadingPreview: boolean = false;
+  formCustom: PageInfo = {};
  ruleCustom: object = {
    pageName: [
      { required: true, message: '请输入页面名称', trigger: 'blur' }
@@ -30,11 +33,18 @@ export default class DynamicForm extends Vue {
  onValueChange(val) {
    console.log('onValueChange', val);
    this.showPopup = val;
+    this.loadingSave = false;
+    this.loadingPreview = false;
  }
  handleSubmit(type) {
    this.$refs.formCustom.validate(async (valid) => {
      if (valid) {
+        if (type === 'save') {
+          this.loadingSave = true;
+        } else if (type === 'preview') {
+          this.loadingPreview = true;
+        }
        await this.createCoverImage();
        this.$emit('submit', type, { ...this.formCustom, isPublish: this.formCustom.isPublish ? 1 : 0, isTemplate: this.formCustom.isTemplate ? 1 : 0 });
      }
@@ -50,11 +60,32 @@ export default class DynamicForm extends Vue {
    this.handleSubmit('preview');
  }
+  changeStyle(type) {
+    const gridEle = document.querySelector('.vue-grid-layout');
+    gridEle.childNodes.forEach(v => {
+      if (v.classList.contains('vue-grid-item') && !v.classList.contains('vue-grid-placeholder')) {
+        if (type === 'forward') {
+          const transform = getStyle(v, 'transform');
+          const transformY = transform.split('(')[1].split(')')[0].split(',')[5];
+          v.style.transform = 'none';
+          v.style.top = `${transformY}px`;
+        } else if (type === 'backward') {
+          const top = getStyle(v, 'top');
+          v.style.transform = `translate3d(0px, ${top}px, 0px)`;
+          v.style.top = 'auto';
+        }
+      }
+    });
+  }
  async createCoverImage() {
    try {
      const imgName = btoa(`coverImage-${uuidv4().substr(0, 8)}`);
      const gridEle = document.querySelector('.Dcm-container-panel');
-      const canvas = await html2canvas(gridEle as HTMLElement, { useCORS: true });
+      this.changeStyle('forward');
+      const canvas = await html2canvas(gridEle as HTMLElement, { useCORS: true, allowTaint: true });
+      this.changeStyle('backward');
      const base64 = canvas.toDataURL();
      const { data: { uptoken } } = await editorApi.getUpToken();
      const { data: { key } } = await editorApi.uploadBase64(base64.split(',')[1], imgName, `UpToken ${uptoken}`);

--- a/app/web/page/editor/component/BasicPageForm/index.vue
+++ b/app/web/page/editor/component/BasicPageForm/index.vue
@@ -18,8 +18,8 @@
      </FormItem>
    </Form>
    <div slot="footer">
-      <Button type="success" @click="handleSubmit('save')">保存</Button>
+      <Button type="success" :loading="loadingSave" @click="handleSubmit('save')">保存</Button>
-      <Button type="info" @click="handleSubmit('preview')">保存并预览</Button>
+      <Button type="info" :loading="loadingPreview" @click="handleSubmit('preview')">保存并预览</Button>
    </div>
  </Modal>
 </template>

--- a/app/web/page/editor/component/DynamicComponent/index.ts
+++ b/app/web/page/editor/component/DynamicComponent/index.ts
@@ -8,31 +8,34 @@ import { v4 as uuid } from 'uuid';
 export default class DynamicComponent extends Vue {
  @State(state => state.editor.gridLayout.colNum) colNum;
  @Prop({ default: () => ([]), type: Array }) data;
+  @Prop(String) type;
-  eleConfig: array = [];
+  eleConfig: object[] = [];
+  eleConfigMap: object = {};
+  activeName: string = '';
  @Watch('data', { immediate: true })
  onDataChange(newVal) {
+    if (this.type === 'business') {
+      this.eleConfigMap = newVal.reduce((pre, cur, index) => {
+        if (index === 0) { this.activeName = cur.name; }
+        const children = chunk(cur.children, 2);
+        pre[cur.name] = { ...cur, children};
+        return pre;
+      }, {});
+    } else {
      this.eleConfig = chunk(newVal, 2);
    }
+  }
  dragstart(event, eleName) {
    this.$emit('dragstart');
-    const eleConfig = flatten(this.eleConfig).find(config => config.eleName === eleName);
    const id = uuid().slice(19);
-    const compontObj = {
+    const pointY = eleName === 'freedom-container' ? 360 : 126;
-      id,
+    const { compontObj, page } = this.genrateCom(eleName);
-      name: eleName,
-      title: eleConfig.title,
-      point: {x: 0, y: 0, w: this.colNum, h: 300, i: id},
-      schame: eleConfig.config,
-      props: {...eleConfig.value},
-      commonStyle: eleConfig.commonStyle
-    };
-    // const props = this.getProps(eleName);
    if (eleName.includes('template')) {
      event.dataTransfer.setData('text', JSON.stringify({
-        template: eleConfig.page
+        template: page
      }));
    // 自由容器和商品导航组件有child属性
    } else if (eleName === 'freedom-container' || eleName === 'goods-tabs') {
@@ -45,7 +48,36 @@ export default class DynamicComponent extends Vue {
  dragend() {
    this.$emit('dragend');
-    console.log('dragend');
+  }
+  genrateCom(eleName) {
+    const bussinessEleConfig = Object.values(this.eleConfigMap).reduce((pre, cur) => pre.concat(cur.children), []);
+    const rawEleConfig = this.type === 'business' ? bussinessEleConfig : this.eleConfig;
+    const eleConfig = flatten(rawEleConfig).find(cfg => cfg.eleName === eleName);
+    const { title, config, value, commonStyle, page } = eleConfig;
+    const id = uuid().slice(19);
+    return {
+      compontObj: {
+        id,
+        name: eleName,
+        title,
+        point: {x: 0, y: 0, w: this.colNum, h: 105, i: id},
+        schame: config,
+        props: {...value},
+        commonStyle
+      },
+      page
+    };
+  }
+  addEle(eleName) {
+    console.log('addEle', eleName);
+    const { compontObj, page } = this.genrateCom(eleName);
+    if (eleName.includes('template')) {
+      this.$emit('addEle', { template: page });
+    } else {
+      this.$emit('addEle', compontObj);
+    }
  }
  // getProps(eleName) {

--- a/app/web/page/editor/component/DynamicComponent/index.vue
+++ b/app/web/page/editor/component/DynamicComponent/index.vue
 <template>
  <div class="dynamic">
+  	<template v-if="type === 'business'">
+  		<Tabs size="small">
+        <TabPane :label="item.title" v-for="(item, key) in eleConfigMap" :key="key">
+          <Row v-for="(arr, index) in item.children" :key="index" class="dynamic-row" type="flex" justify="space-between">
+				  	<Col span="11" v-for="config in arr" :key="config.eleName+index">
+				  		<Card @dblclick.native="addEle(config.eleName)" draggable="true" @dragend.native="dragend" @dragstart.native="dragstart($event, config.eleName)">
+				            <p slot="title">{{ config.title }}</p>
+				            <div class="dynamic-row-card">
+					            <img
+											  :src="config.coverImage || 'http://activitystatic.q-gp.com/low_code.jpg'"
+											/>
+				            </div>
+				        		<span class="dynamic-row-popup">拖拽或双击</span>
+				        </Card>
+				  	</Col>
+				  </Row>
+        </TabPane>
+      </Tabs>
+  	</template>
+  	<template v-else>
 	  	<Row v-for="(arr, index) in eleConfig" :key="index" class="dynamic-row" type="flex" justify="space-between">
 		  	<Col span="11" v-for="config in arr" :key="config.eleName+index">
-	  		<Card draggable="true" @dragend.native="dragend" @dragstart.native="dragstart($event, config.eleName)">
+		  		<Card @dblclick.native="addEle(config.eleName)" draggable="true" @dragend.native="dragend" @dragstart.native="dragstart($event, config.eleName)">
 		            <p slot="title">{{ config.title }}</p>
 		            <div class="dynamic-row-card">
 			            <img
 									  :src="config.coverImage || 'http://activitystatic.q-gp.com/low_code.jpg'"
 									/>
 		            </div>
+		            <span class="dynamic-row-popup">拖拽或双击</span>
 		        </Card>
 		  	</Col>
 		  </Row>
+  	</template>
  </div>
 </template>
 <script lang="ts" src="./index.ts"></script>
-<style lang="less">
+<style lang="less" scoped>
 	.dynamic {
 		&-row {
 			margin-bottom: 8px;
@@ -34,6 +56,9 @@
 			}
 			.ivu-card {
+				position: relative;
+				overflow: hidden;
 				&-head {
 					padding: 5px;
 				}
@@ -42,11 +67,33 @@
 					padding: 10px;
 				}
+				.dynamic-row-popup {
+					position: absolute;
+			    bottom: 0;
+			    left: 0;
+			    height: 16px;
+			    width: 100%;
+			    line-height: 16px;
+			    font-size: 12px;
+			    background: #2E8CF0;
+			    text-align: center;
+			    color: #fff;
+					transform: translateY(100%);
+				  transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+				}
 				&:hover {
-					box-shadow: 0 0.026667rem 0.16rem rgba(240, 242, 245, 20%);
+					box-shadow: 0 0 14px 0 rgba(46,140,240,0.20);
-					border-color: #2d8cf0 !important;
+					border: 1px solid #2E8CF0 !important;
+					.dynamic-row-popup {
+				    transform: translateY(0);
+					}
 				}
 			}
 		}
+		/deep/ .ivu-tabs-tab {
+			font-size: 14px;
+		}
 	}
 </style>
--- a/app/web/page/editor/component/DynamicForm/component/FormList/index.vue
+++ b/app/web/page/editor/component/DynamicForm/component/FormList/index.vue
@@ -92,6 +92,11 @@
          text-align: left;
        }
      }
+      &:hover {
+        box-shadow: 0 0 14px 0 rgba(46,140,240,0.20);
+        border: 1px solid #2E8CF0 !important;
+      }
    }
    h3 {

--- a/app/web/page/editor/component/DynamicForm/index.ts
+++ b/app/web/page/editor/component/DynamicForm/index.ts
@@ -251,8 +251,8 @@ export default class DynamicForm extends Mixins(ContextMenuMixin, DynamicFormMix
  resizedEvent(h, w, responsive) {
    const elements = this.pageData.elements[this.curEleIndex];
    if (responsive) {
-      if (this.form.backgroundImage) {
+      if (elements.name === 'freedom-container') {
-        resizeDiv(this.form.backgroundImage, 667, 375, (imgHeight) => {
+        resizeDiv(elements.commonStyle.backgroundImage, 667, 375, (imgHeight) => {
          this.updatePageInfo({ containerIndex: this.curEleIndex, data: { ...elements, point: { ...elements.point, w: w ?? elements.point.w, h: imgHeight ?? elements.point.h, responsive: true } } });
        });
      } else if (elements.id) {

--- a/app/web/page/editor/component/DynamicForm/index.vue
+++ b/app/web/page/editor/component/DynamicForm/index.vue
 <template>
  <div class="dynamic-form" v-if="isSelected">
-    <h2>{{curElement.title}}</h2>
+    <div class="dynamic-form-header">
+      <h2>{{ curElement.title }}</h2>
+      <div>{{ `ID: ${curElement.id}` }}</div>
+    </div>
    <Form class="dynamic-form-component" @submit.native.prevent :label-width="80" :model="form" v-if="curElement.schame && curElement.schame.length">
      <h3 v-if="!hasGroup">组件属性</h3>
      <template v-for="(item, index) in curElement.schame">
@@ -63,11 +66,22 @@
 	.dynamic-form {
 	    padding: 0 0 16px;
      background: #fff;
-      h2 {
+      &-header {
-        padding: 17px 0;
+        padding: 10px 0 5px;
        border-bottom: 8px solid #F5F6FA;
        text-align: center;
+        div {
+          color: #A1A6B3;
+          padding: 5px;
+          font-size: 12px;
+        }
      }
+      // h2 {
+      //   padding: 17px 0;
+      //   border-bottom: 8px solid #F5F6FA;
+      //   text-align: center;
+      // }
 	    h3 {
 	      padding: 10px 0;
 	      margin-bottom: 10px;

--- a/app/web/page/editor/component/FreedomContainer/index.vue
+++ b/app/web/page/editor/component/FreedomContainer/index.vue
@@ -19,11 +19,12 @@
  	&:before {
 	    position: absolute;
 	    content: '';
-	    border: 1px dashed #0c0c0c !important;
+	    border: 3px solid #2d8cf0 !important;
 	    width: 100%;
 	    height: 100%;
 	    top: 0;
 	    left: 0;
+	    z-index: 1
 	  }
  }
 	.freedom {

--- a/app/web/page/editor/index.ts
+++ b/app/web/page/editor/index.ts
@@ -2,7 +2,7 @@
 import Vue from 'vue';
 import { sync } from 'vuex-router-sync';
 import App from '@framework/app';
-import createStore from '../store/index';
+import createStore from '@store/index';
 import createRouter from './router/index';
 import entry from '@editor/view/home/index.vue';
 import './public-path';

--- a/app/web/page/editor/mixins/contextMenu.mixin.ts
+++ b/app/web/page/editor/mixins/contextMenu.mixin.ts
@@ -24,7 +24,6 @@ export default class ContextMenuMixin extends Vue {
          onClick: () => {
            console.log('删除', event, containerIndex, childIndex);
            this.updatePageData({type: 'delete', containerIndex, childIndex});
-            // console.log('删除');
          }
        },
      ],
@@ -38,7 +37,7 @@ export default class ContextMenuMixin extends Vue {
    const elements = this.pageData.elements[this.curEleIndex];
    const component = document.getElementById(elements.id);
    const height = component ? getStyle(component, 'height') : 0;
-    console.log('adjustHeight', height);
+    // console.log('adjustHeight', height);
    this.updatePageInfo({ containerIndex: this.curEleIndex, data: { ...elements, point: { ...elements.point, h: +height || elements.point.h } } });
  }
 }
\ No newline at end of file
--- a/app/web/page/editor/view/dashboard/index.ts
+++ b/app/web/page/editor/view/dashboard/index.ts
 import { kebabCase, maxBy } from 'lodash';
 import { Getter, Action, State, Mutation } from 'vuex-class';
 import { Mixins, Component, Watch, Provide } from 'vue-property-decorator';
-import DynamicComponent from '@editor/component/DynamicComponent/index.vue';
 import VueGridLayout from 'vue-grid-layout';
-import FreedomContainer from '../../component/FreedomContainer/index.vue';
+import { basicComponents, businessComponents } from '@lib/config';
-import DynamicForm from '../../component/DynamicForm/index.vue';
+import config from '@config/index';
-import DynamicPageForm from '../../component/DynamicPageForm/index.vue';
+import TransformStyleMixin from '@page/mixins/transformStyle.mixin';
-import { basicComponents, businessComponents } from '@/lib/config';
+import DynamicComponent from '@editor/component/DynamicComponent/index.vue';
+import FreedomContainer from '@editor/component/FreedomContainer/index.vue';
+import DynamicForm from '@editor/component/DynamicForm/index.vue';
+import DynamicPageForm from '@editor/component/DynamicPageForm/index.vue';
 import ContextMenuMixin from '@editor/mixins/contextMenu.mixin';
 import GoodsTabsMixin from '@editor/mixins/goodsTabs.mixin';
-import TransformStyleMixin from '@/page/mixins/transformStyle.mixin';
 import BasicPageForm from '@editor/component/BasicPageForm/index.vue';
-import config from '@/config/index';
+import localStorage from '@service/localStorage.service';
-import localStorage from '@/service/localStorage.service';
+import EventBus from '@service/eventBus.service';
-import EventBus from '@/service/eventBus.service';
+import { getStyle } from '@service/utils.service';
-// import CsLoginForm from '@/lib/Form/index.vue';
+import type { PageInfo, Page, GridLayout  } from '../../../store/modules/editor/state';
-// import CsDownloadGuide from '@/lib/DownloadGuide/index.vue';
-// import CsGoodsTabs from '@/lib/GoodsTabs/index.vue';
-// import CsGoods from '@/lib/Goods/index.vue';
-// import CsAdvertisement from '@/lib/Advertisement/index.vue';
-// import CsCoupon from '@/lib/Coupon/index.vue';
-// import CsPlaceholder from '@/lib/Placeholder/index.vue';
-// import CsGuideCube from '@/lib/GuideCube/index.vue';
-// import CsMarquee from '@/lib/Marquee/index.vue';
-// CsLoginForm, CsDownloadGuide, CsGuideCube, CsGoodsTabs, CsCoupon, CsMarquee, CsAdvertisement, CsGoods, CsPlaceholder
 @Component({components: { DynamicComponent, FreedomContainer, DynamicForm, GridLayout: VueGridLayout.GridLayout,
  GridItem: VueGridLayout.GridItem, BasicPageForm, DynamicPageForm }, name: 'DashBoard'})
 export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin, TransformStyleMixin) {
@@ -39,14 +32,12 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
  @Action('getPageDate') getPageDate;
  @Action('getTemplateList') getTemplateList;
  @Action('setTemplateInfo') setTemplateInfo;
-  @Getter('uuid') uuid;
+  @Getter('uuid') uuid!: string;
  @Getter('pageData') pageData;
-  @State(state => state.editor.gridLayout.draggable) draggable;
+  @State(state => state.editor.gridLayout) gridLayout?: GridLayout;
-  @State(state => state.editor.gridLayout.rowHeight) rowHeight;
+  @State(state => state.editor.curEleIndex) curEleIndex!: number | null;
-  @State(state => state.editor.gridLayout.colNum) colNum;
+  @State(state => state.editor.curChildIndex) curChildIndex!: number | null;
-  @State(state => state.editor.curEleIndex) curEleIndex;
+  @State(state => state.editor.templateList) templateList!: any[];
-  @State(state => state.editor.curChildIndex) curChildIndex;
-  @State(state => state.editor.templateList) templateList;
  @Provide() editor = this;
@@ -59,15 +50,12 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
  async created() {
    const { pageId, templateId } = this.$route.params;
-    console.log(pageId, templateId);
-    console.log('env', process.env);
    this.resetPageData();
    if (pageId) {
      await this.getPageDate({ pageId });
    } else if (templateId) {
      await this.setTemplateInfo({ pageId: templateId });
    }
-    this.parseGoodsTabs();
    this.getTemplateList();
  }
@@ -80,7 +68,7 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
    this.activeName = val;
  }
-  async save(type, pageConfig) {
+  async save(type: 'preview' | 'save', pageConfig) {
    const user = localStorage.get('user');
    if (!type) {
      this.showSubmitPopup = true;
@@ -88,7 +76,7 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
      this.pageData.elements.sort((a, b) => a.point.y - b.point.y);
      const pageData = this.handleGoodsTabs();
      const { pageName, pageDescribe, pageKeywords, coverImage, isPublish, isTemplate } = pageConfig;
-      const pageInfo = { page: JSON.stringify(pageData), author: user?.account, isPublish,  pageName, pageDescribe, pageKeywords, coverImage, isTemplate };
+      const pageInfo = { page: JSON.stringify(pageData), author: user?.account, isPublish,  pageName, pageDescribe, pageKeywords, coverImage, isTemplate } as pageInfo;
      if (this.uuid) { pageInfo.uuid = this.uuid; }
      await this.savePageData({ pageInfo, pageData: this.pageData });
      this.showSubmitPopup = false;
@@ -99,15 +87,15 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
  }
  async preview() {
-    this.$refs.basicPageForm.preview();
+    (this.$refs.basicPageForm as any).preview();
  }
  exit() {
    this.$router.back();
  }
-  handleElementClick(curEleIndex = null, curChildIndex = null) {
+  handleElementClick(curEleIndex?: number | null, curChildIndex?: number | null) {
-    console.log('handleElementClick - DashBoard', curEleIndex, curChildIndex);
+    // console.log('handleElementClick - DashBoard', curEleIndex, curChildIndex);
    this.toggle(false);
    this.setCurEleIndex(curEleIndex);
    this.setCurChildIndex(curChildIndex);
@@ -126,12 +114,12 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
  }
  dragenter() {
-    console.log('dragenter');
+    // console.log('dragenter');
    this.isDragIn = true;
  }
  dragleave() {
-    console.log('dragleave');
+    // console.log('dragleave');
    this.isDragIn = false;
  }
@@ -180,7 +168,7 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
      const { y: curY } = this.pageData.elements[target?.dataset?.index].point;
      const scrollTop = this.layout.reduce((pre, cur) => {
        if (cur.y < curY) {
-          return pre + cur.h * this.rowHeight;
+          return pre + cur.h * this.gridLayout.rowHeight;
        }
        return pre;
      }, 0);
@@ -188,8 +176,21 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
      this.handleElementClick(+target?.dataset?.index, this.pageData.elements[target?.dataset?.index].child.length - 1);
    // component
    } else {
-      const y = Math.floor(top / this.rowHeight);
+      const y = Math.floor(top / this.gridLayout.rowHeight);
-      this.addElements({ data: {...data, point: { ...data.point, y } });
+      this.addElements({ data: {...data, point: { ...data.point, y } }});
+      this.handleElementClick(this.pageData.elements.length - 1, null);
+    }
+    // 调整组件高度
+    this.$nextTick(() => this.adjustHeight());
+  }
+  addEle(data) {
+    if (data.template) {
+      this.setPageData(JSON.parse(data.template));
+      this.handleElementClick(null, null);
+    } else {
+      const y = getStyle(document.querySelector('.vue-grid-layout'), 'height');
+      this.addElements({ data: {...data, point: { ...data.point, y } }});
      this.handleElementClick(this.pageData.elements.length - 1, null);
    }
    // 调整组件高度
@@ -203,7 +204,7 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
  movedEvent(i, newX, newY) {
    EventBus.$emit('component-moved');
-    console.log('MOVED i=' + i + ', X=' + newX + ', Y=' + newY);
+    // console.log('MOVED i=' + i + ', X=' + newX + ', Y=' + newY);
  }
  /**
@@ -211,7 +212,7 @@ export default class DashBoard extends Mixins(ContextMenuMixin, GoodsTabsMixin,
   * @param {[type]} type 尺寸类型
   */
  resizedChildEvent(type) {
-    const containerEle = this.$refs.container[this.curEleIndex];
+    const containerEle = this.$refs.container[(this.curEleIndex as number)];
    containerEle.setChildSize(type);
    containerEle.setPointStyle();
  }

--- a/app/web/page/editor/view/dashboard/index.vue
+++ b/app/web/page/editor/view/dashboard/index.vue
@@ -27,37 +27,27 @@
      	</Menu>
    		<div class="Dc-left-content">
    			<div v-show="activeName === '1'">
-            <dynamic-component :data="resources.basicComponents" @dragstart="dragstart" @dragend="dragend"></dynamic-component>
+            <dynamic-component type="basic" :data="resources.basicComponents" @addEle="addEle" @dragstart="dragstart" @dragend="dragend"></dynamic-component>
    			</div>
    			<div v-show="activeName === '2'">
-            <dynamic-component :data="resources.businessComponents" @dragstart="dragstart" @dragend="dragend"></dynamic-component>
+            <dynamic-component type="business" :data="resources.businessComponents" @addEle="addEle" @dragstart="dragstart" @dragend="dragend"></dynamic-component>
  	  		</div>
    			<div v-show="activeName === '3'">
-            <dynamic-component :data="templateList" @dragstart="dragstart" @dragend="dragend"></dynamic-component>
+            <dynamic-component type="template" :data="templateList" @addEle="addEle" @dragstart="dragstart" @dragend="dragend"></dynamic-component>
    			</div>
    		</div>
  	  </Col>
  	  <Col class="dashboard-container-middle" span="18">
  	  	<Row class="Dc-middle-row">
  	  		<Col :span="isCollapsed ? 24 : 16" class="Dc-middle-container" @click.native="toggle(true)">
-  	  			<!-- <Row type="flex" justify="center" class="Dcm-container-header">
-              <Col span="4" @click.native="save()">
-                <Icon type="ionic"></Icon>
-                <span>保存</span>
-              </Col>
-              <Col span="4" @click.native="exit">
-                <Icon type="monitor"></Icon>
-                <span>返回</span>
-              </Col>
-            </Row> -->
            <div :class="[{'Dcm-container-panel_in': isDragIn, 'Dcm-container-panel_draging': isDraging}, 'Dcm-container-panel']" @dragover.prevent @dragenter="dragenter" @dragover="dragover"
                 @dragleave="dragleave" @drop="drops">
  	  				<grid-layout
                :layout.sync="layout"
-                :col-num="colNum"
+                :col-num="gridLayout.colNum"
-                :row-height="rowHeight"
+                :row-height="gridLayout.rowHeight"
                :margin="[0, 0]"
-                :is-draggable="draggable"
+                :is-draggable="gridLayout.draggable"
                :is-resizable="true"
                :is-mirrored="false"
                :vertical-compact="true"
@@ -76,7 +66,7 @@
                 @resized="resizedEvent"
                 @moved="movedEvent"
                 :class="{'Dcmcp-item_selected': curEleIndex === index && curChildIndex === null}">
-                    <component ref="container" :style="transformStyle(item.commonStyle)" :id="item.id" class="Dcmcp-item-com" @handleElementClick="handleElementClick" :containerIndex="index" :childItem="item" :is="item.name" :key="index" v-bind="item.props"></component>
+                    <component ref="container" :style="transformStyle(item.commonStyle, item.name)" :id="item.id" class="Dcmcp-item-com" @handleElementClick="handleElementClick" :containerIndex="index" :childItem="item" :is="item.name" :key="index" v-bind="item.props"></component>
                </grid-item>
              </grid-layout>
  	  			</div>
@@ -110,11 +100,12 @@
    &:before {
      position: absolute;
      content: '';
-      border: 1px dashed #0c0c0c !important;
+      border: 3px solid #2d8cf0 !important;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
+      z-index: 1
    }
  }
@@ -159,6 +150,11 @@
            span {
              font-size: 14px;
              line-height: 22px;
+              -moz-user-select: none;
+              -webkit-user-select: none;
+              -ms-user-select: none;
+              -khtml-user-select: none;
+              user-select: none;
            }
          }
  		  }

--- a/app/web/page/editor/view/pageList/index.vue
+++ b/app/web/page/editor/view/pageList/index.vue
@@ -77,7 +77,7 @@ export default {
            title: '链接',
            hideSearch: true,
            render: (h, params) => {
-              return h('span', `${config.apiHost}activity/${params.row.id}`)
+              return h('span', `${config.apiHost}activity/${params.row.uuid}`)
            }
          },
          {

--- a/app/web/page/editor/view/template/index.vue
+++ b/app/web/page/editor/view/template/index.vue
@@ -77,7 +77,7 @@ export default {
            title: '链接',
            hideSearch: true,
            render: (h, params) => {
-              return h('span', `${config.apiHost}activity/${params.row.id}`)
+              return h('span', `${config.apiHost}activity/${params.row.uuid}`)
            }
          },
          {

--- a/app/web/page/mixins/transformStyle.mixin.ts
+++ b/app/web/page/mixins/transformStyle.mixin.ts
 import { Component, Vue } from 'vue-property-decorator';
-import { pick, omit } from 'lodash';
+import { pick, omit, omitBy } from 'lodash';
 import { transformStyle } from '@/service/utils.service';
 @Component({ name: 'TransformStyleMixin' })
 export default class TransformStyleMixin extends Vue {
  transformStyle(styleObj, element) {
    // console.log('transformStyle', styleObj, element);
-    let style = {};
+    let style = {
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover'
+    };
    if (!styleObj) { return style; }
    for (const key of Object.keys(styleObj)) {
      if ( typeof styleObj[key] === 'number') {
@@ -15,13 +18,14 @@ export default class TransformStyleMixin extends Vue {
        style[key] = styleObj[key]?.includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(2)}rem` : styleObj[key];
      }
      if (key === 'backgroundImage' && style.backgroundImage) {
-        // style.backgroundImage = `url(${style.backgroundImage})`;
+        style.backgroundImage = `url(${style.backgroundImage})`;
-        style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;
+        // style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;
      }
    }
    if (element !== 'container') {
      style = omit(style, ['position', 'top', 'left']);
    }
+    style = omitBy(style, v => !v);
    return style;
  }
 }
\ No newline at end of file
--- a/app/web/page/store/index.ts
+++ b/app/web/page/store/index.ts
@@ -8,7 +8,7 @@ Vue.use(Vuex);
 export default function createStore(initState: any = {}) {
  const { title, url, origin, locale, csrf, editor } = initState;
-  console.log('store', title, url, origin, locale, csrf, editor);
+  // console.log('store', title, url, origin, locale, csrf, editor);
  const state = { title, url, origin, locale, csrf };
  return new Vuex.Store<RootState>({
    state,

--- a/app/web/page/store/modules/editor/index.ts
+++ b/app/web/page/store/modules/editor/index.ts
@@ -25,23 +25,23 @@ export default class EditorModule implements Module<EditorState, RootState> {
  state: EditorState;
  getters: GetterTree<EditorState, RootState> = {
-    pageData(state) {
+    pageData(state: EditorState): Page {
-      return state.pageInfo.page;
+      return state.pageInfo.page as Page;
    },
-    pageId(state) {
+    pageId(state: EditorState): number | undefined {
      return state.pageInfo.id;
    },
-    uuid(state) {
+    uuid(state: EditorState): string | undefined {
      return state.pageInfo.uuid;
    },
-    pageInfo(state) {
+    pageInfo(state: EditorState): PageInfo {
      return state.pageInfo;
    }
  };
  actions: ActionTree<EditorState, RootState> = {
    // pageInfo: 处理过的页面数据 - activity， pageData: 未处理的数据 - editor
-    async savePageData({ commit }, { pageInfo, pageData}) {
+    async savePageData({ commit }, { pageInfo, pageData}: { pageInfo: PageInfo, pageData: Page }) {
      if (pageInfo.uuid) {
        await api.updatePage(pageInfo);
        commit(SET_PAGE_INFO, { ...pageInfo, page: pageData });
@@ -51,10 +51,30 @@ export default class EditorModule implements Module<EditorState, RootState> {
        commit(SET_PAGE_INFO, { ...rest, page: pageData });
      }
    },
-    async getPageDate({ commit }, condition) {
+    async getPageDate({ commit }, condition: number) {
      const res = await api.getPageById(condition);
      const { page, ...rest } = res as PageInfo;
-      commit(SET_PAGE_INFO, { ...rest, page: JSON.parse(page as string) });
+      const pageObj = JSON.parse(page as string);
+      commit(SET_PAGE_INFO, { ...rest, page: pageObj });
+      const goodsTabs = {};
+      (pageObj as Page).elements.forEach((element, idx) => {
+        if (element.name === 'cs-goods-tabs' && element?.child?.length) {
+          goodsTabs[idx] = cloneDeep(element.child);
+          // 逆向循环
+          for (let i = element.child.length - 1; i >= 0; i--) {
+            commit(COPY_OR_DELETE_PAGE_INFO, { type: 'delete', containerIndex: idx, childIndex: i });
+            // this.updatePageData({ type: 'delete', containerIndex: idx, childIndex: i });
+          }
+        }
+      });
+      Object.keys(goodsTabs).forEach(key => {
+        goodsTabs[key].forEach((child, index) => {
+          commit(UPDATE_PAGE_INFO, { containerIndex: +key + 1 + index, data: child });
+          // console.log('parseGoodsTabs', { containerIndex: +key + 1 + index, data: child });
+          // this.updatePageInfo({ containerIndex: +key + 1 + index, data: child });
+        });
+      });
    },
    async getTemplateList({ commit }) {
      const res = await api.getTemplateList({ type: 'template' });

--- a/app/web/page/store/modules/editor/state.ts
+++ b/app/web/page/store/modules/editor/state.ts
@@ -14,13 +14,16 @@ interface Point {
 }
 interface CommonStyle {
-  left: number;
+  left?: number;
-  top: number;
+  top?: number;
+  backgroundColor?: string;
+  backgroundImage?: string;
 }
-interface GridLayout {
+export interface GridLayout {
  draggable: boolean;
  rowHeight: number;
+  colNum: number;
 }
 export interface PageElement {
@@ -45,7 +48,7 @@ export interface PageInfo {
  enable?: number;
  author?: string;
  coverImage?: string;
-  isTemplate?: number;
+  isTemplate?: number | boolean;
  isPublish?: number | boolean;
  pageName?: string;
  pageDescribe?: string;
@@ -53,6 +56,14 @@ export interface PageInfo {
  uuid?: string;
 }
+export default interface EditorState {
+  pageInfo: PageInfo;
+  curEleIndex: number | null;
+  curChildIndex: number | null;
+  templateList: any[];
+  gridLayout: GridLayout;
+}
 export const defaultState = {
  curEleIndex: null,
  curChildIndex: null,
@@ -83,13 +94,3 @@ export const defaultState = {
    colNum: 375
  },
 };
-export default interface EditorState {
-  pageInfo: PageInfo;
-  draggable: boolean;
-  curEleIndex: number | null;
-  curChildIndex: number | null;
-  templateList: any[];
-  rowHeight: number;
-  gridLayout: GridLayout;
-}
\ No newline at end of file
--- a/app/web/service/http.service.ts
+++ b/app/web/service/http.service.ts
@@ -48,6 +48,35 @@ function clearRequest() {
  }
 }
+let isRefreshing = true;
+let subscriber: Array<() => void> = [];
+const addSubscriber = callback => subscriber.push(callback);
+const onAccessTokenFetched = () => {
+  subscriber.forEach(callback => callback());
+  subscriber = [];
+};
+const refreshtoken = async () => {
+  return instance.get(`${basicConfig.opapiHost}/backStms/oauth/refreshtoken?refreshtoken=${localStorage.get('refreshToken')}`);
+};
+/*
+ * 刷新token逻辑
+ */
+const refreshRequest = async options => {
+  const promise = new Promise(resolve => addSubscriber(() => resolve(instance.request(options))));
+  if (isRefreshing) {
+    isRefreshing = false;
+    await wait(500);
+    const data = await refreshtoken();
+    localStorage.set('token', data.accessToken);
+    localStorage.set('refreshToken', data.refreshToken);
+    onAccessTokenFetched();
+    isRefreshing = true;
+  }
+  return promise;
+};
 const instance = axios.create();
 // 请求拦截器
@@ -63,7 +92,7 @@ instance.interceptors.request.use(
    config.cancelToken = new CancelToken(c => (pending[(config.url + JSON.stringify(config.data)) as string] = c));
    // 添加token
    const token = localStorage.get('token');
-    if (token && !config.hideToken) {
+    if (token) {
      config.headers['X-Auth-Token'] = token;
      if (config.accessToken) { config.headers['Access-Token'] = token; }
    }
@@ -85,6 +114,10 @@ instance.interceptors.response.use(
    const codeArr = ['0000', 2000];
    if (codeArr.includes(response.data.code)) { return response.data.data; }
+    if (response.data.code === '0001' && response.config.url.includes('oauth/refreshtoken')) {
+      window.location.href = `${window.location.origin}/${window.__POWERED_BY_QIANKUN__ ? 'access' : 'editor'}/login`;
+    }
      // 后端返回异常信息时提出警告
    if (response.data.code && response.data.msg) { notifyType = 'warning'; }
@@ -123,7 +156,11 @@ instance.interceptors.response.use(
    if (err.response) {
      switch (err.response.status) {
      case 401:
+        if (!err.response.config.url.includes('oauth/refreshtoken')) {
+          return refreshRequest(err.response.config);
+        } else {
          window.location.href = `${window.location.origin}/${window.__POWERED_BY_QIANKUN__ ? 'access' : 'editor'}/login`;
+        }
        return;
      }
    }

--- a/app/web/service/qg.service.ts
+++ b/app/web/service/qg.service.ts
@@ -37,34 +37,37 @@ import Tabs from '@qg/cherry-ui/src/tabs';
 import BackTop from '@qg/cherry-ui/src/back-top';
 import Notify from '@qg/cherry-ui/src/notify';
 import Toast from '@qg/cherry-ui/src/toast';
+import Text from '@qg/cherry-ui/src/text';
+import Cell from '@qg/cherry-ui/src/cell';
+import Checkbox from '@qg/cherry-ui/src/checkbox';
+import CountDown from '@qg/cherry-ui/src/count-down';
+import Divider from '@qg/cherry-ui/src/divider';
+import Icon from '@qg/cherry-ui/src/icon';
+import NavBar from '@qg/cherry-ui/src/nav-bar';
+import NoticeBar from '@qg/cherry-ui/src/notice-bar';
+import Progress from '@qg/cherry-ui/src/progress';
+import Tag from '@qg/cherry-ui/src/tag';
 import citrusUi from '@qg/citrus-ui';
 Vue.use(Button);
 Vue.use(Image);
-// Vue.use(Cell);
+Vue.use(Cell);
-// Vue.use(CellGroup);
+Vue.use(Divider);
-// Vue.use(Row);
-// Vue.use(Col);
-// Vue.use(Popup);
-// Vue.use(Divider);
-// Vue.use(Picker);
 Vue.use(Field);
-// Vue.use(Dialog);
+Vue.use(Checkbox);
-// Vue.use(Checkbox);
+Vue.use(Icon);
-// Vue.use(Icon);
-// Vue.use(Sticky);
-// Vue.use(Overlay);
 Vue.use(Form);
-// Vue.use(CardList);
-// Vue.use(Loading);
-// Vue.use(List);
 Vue.use(Tab);
 Vue.use(Tabs);
-// Vue.use(Toast);
-// Vue.use(Swipe);
-// Vue.use(SwipeItem);
-// Vue.use(Swipe);
 Vue.use(BackTop);
+Vue.use(Text);
+Vue.use(CountDown);
+Vue.use(NavBar);
+Vue.use(NoticeBar);
+Vue.use(Progress);
+Vue.use(Tag);
 Vue.use(citrusUi);

--- a/app/web/service/utils.service.ts
+++ b/app/web/service/utils.service.ts
@@ -46,9 +46,9 @@ export function resizeDiv(imgUrl, clientHeight = 0, clientWidth = 0, callback) {
  img.onload = function() {
    const imgRealHeight = clientWidth * img.height / img.width;
    console.log(img.width, img.height, imgRealHeight, clientHeight);
-    if (imgRealHeight > clientWidth) {
+    // if (imgRealHeight > clientWidth) {
    callback(imgRealHeight);
-    }
+    // }
  };
  img.src = imgUrl;
 }

--- a/app/web/tsconfig.json
+++ b/app/web/tsconfig.json
@@ -12,12 +12,17 @@
    ],
    "baseUrl": ".",
    "paths": {
-      "@asset/*": ["asset/*"],
      "@component/*": ["component/*"],
      "@framework/*": ["framework/*"],
      "@store/*": ["page/store/*"],
      "@router/*": ["page/admin/home/router/*"],
-      "@view/*": ["page/admin/home/view/*"]
+      "@view/*": ["page/admin/home/view/*"],
+      "@editor/*": ["page/editor/*"],
+      "@config/*": ["config/*"],
+      "@page/*": ["page/*"],
+      "@lib/*": ["lib/*"],
+      "@service/*": ["service/*"],
+      "@api/*": ["api/*"],
    }
  },
  "include": [

--- a/app/web/typings/global.d.ts
+++ b/app/web/typings/global.d.ts
@@ -9,6 +9,11 @@ interface Window {
 declare module 'axios' {
  export interface AxiosRequestConfig {
-    accessToken?: boolean;
+    accessToken?: string;
+  }
+  export interface AxiosResponse {
+    accessToken?: string;
+    refreshToken?: string;
  }
 }
\ No newline at end of file
--- a/app/web/view/layout.html
+++ b/app/web/view/layout.html
@@ -21,7 +21,7 @@
  </head>
  <body>
    <div id="app"><!--vue-ssr-outlet--></div>
-    <script src="https://cdn.staticfile.org/plupload/2.1.2/plupload.full.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/plupload/2.1.2/plupload.full.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.6.12/vue.js"></script>
    <script src="https://cdn.bootcss.com/iview/2.9.0/iview.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

--- a/package-lock.json
+++ b/package-lock.json
@@ -1469,9 +1469,9 @@
      "integrity": "sha512-DvJbbn3dUgMxDnJLH+RZQPnXak1h4ZVYQ7CWiFWjQwBFkVajT4rfw2PdpHLTSTwxrYfnoEXkuBiwkDm6tPMQeA=="
    },
    "@qg/cherry-ui": {
-      "version": "2.19.2",
+      "version": "2.20.1",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.19.2.tgz",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.20.1.tgz",
-      "integrity": "sha512-II08ZVAofNCPL3FM5os5P2TlmgsiNKLxO0f+dLFUb8YpbFmrj/fIKh4z7NO4MFQ+pK5TzwXi4M+ptS3onjOrIg==",
+      "integrity": "sha512-Jk8Mke8sEyxC89ZYmC3kwlc7Qta8HkB/et3OTQahNWd4KDSRgWMjUu99I1OalgVDzL1R9iPqPk6LK8Ak5Kz5gQ==",
      "requires": {
        "@popperjs/core": "^2.5.4",
        "vue-lazyload": "^1.3.3",
@@ -1479,9 +1479,9 @@
      }
    },
    "@qg/citrus-ui": {
-      "version": "0.0.23",
+      "version": "0.0.29",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.23.tgz",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.29.tgz",
-      "integrity": "sha512-Hmgm7KGFyqEoZzRE0r0ybMULQSA+fJ2V2T0po9xKv+eNehIuyTJ903UganwmaYz7sK21BuQg+hrMi2OznFWO/Q==",
+      "integrity": "sha512-8Ca1e3/K+ts/kjG5+1EvNF3Cvkg/N6P1CtVTRN7SVRbM+5EYrIDaoC2qbt6K3ipSZ9EAb+t4qtKYdrT93NMASQ==",
      "requires": {
        "@better-scroll/core": "^2.1.1",
        "@qg/cherry-ui": "^2.18.72",
@@ -19826,9 +19826,9 @@
      "integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
    },
    "rollup": {
-      "version": "2.41.0",
+      "version": "2.41.2",
-      "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.41.0.tgz",
+      "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.41.2.tgz",
-      "integrity": "sha512-Gk76XHTggulWPH95q8V62bw6uqDH6UGvbD6LOa3QUyhuMF3eOuaeDHR7SLm1T9faitkpNrqzUAVYx47klcMnlA==",
+      "integrity": "sha512-6u8fJJXJx6fmvKrAC9DHYZgONvSkz8S9b/VFBjoQ6dkKdHyPpPbpqiNl2Bao9XBzDHpq672X6sGZ9G1ZBqAHMg==",
      "requires": {
        "fsevents": "~2.3.1"
      }

--- a/package.json
+++ b/package.json
@@ -23,8 +23,8 @@
    "@easy-team/easywebpack-cli": "^4.0.0",
    "@easy-team/easywebpack-vue": "^4.0.0",
    "@hubcarl/json-typescript-mapper": "^2.0.0",
-    "@qg/cherry-ui": "^2.19.2",
+    "@qg/cherry-ui": "^2.20.1",
-    "@qg/citrus-ui": "0.0.23",
+    "@qg/citrus-ui": "0.0.29",
    "@riophae/vue-treeselect": "^0.4.0",
    "@types/lodash": "^4.14.117",
    "@types/node": "^10.12.0",

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -24,9 +24,11 @@ module.exports = {
      '@framework': resolve('app/web/framework'),
      '@component': resolve('app/web/component'),
      '@store': resolve('app/web/page/store'),
-      // '@router': resolve('app/web/page/admin/home/router'),        
+      '@editor': resolve('app/web/page/editor'),
-      // '@view': resolve('app/web/page/admin/home/view'),
+      '@config': resolve('app/web/config'),
-      '@editor': resolve('app/web/page/editor')
+      '@page': resolve('app/web/page'),
+      '@lib': resolve('app/web/lib'),
+      '@service': resolve('app/web/service'),
    }
  },
  nodeExternals: {
@@ -47,10 +49,7 @@ module.exports = {
          exclude: []
        }
      },
-      { ts: {
+      { ts: true },
-          exclude: []
-        } 
-      },
      {  less: true },
      { tslint: { options: { fix: true } } },
    ]