feature: 修改bug

app/web/asset/css/reset.css

@@ -145,3 +145,34 @@ li {
 *:after {
   box-sizing: border-box;
 }
+
+/* 自定义 */
+
+html {
+  font-size: 10vw !important;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+.cr-popup .cr-notify {
+  font-size: 14px;
+}
+
+.cr-toast .cr-toast--inner {
+  box-sizing: content-box;
+}
+
+@media screen and (min-width: 768Px) {
+  html {
+    font-size: 37.5Px !important;
+  }
+  body {
+    max-width: 375Px;
+    max-height: 667Px;
+    margin: 0 auto !important;
+  }
+}

app/web/component/layout/activity/index.vue

@@ -17,19 +17,4 @@
   </html>
   <div v-else-if="!isNode" id="app"><slot></slot></div>
 </template>
-<style>
-  html {
-    font-size: 10vw !important;
-  }
-  @media screen and (min-width: 768Px) {
-    html {
-      font-size: 37.5Px !important;
-    }
-    body {
-      max-width: 375Px;
-      max-height: 667Px;
-      margin: 0 auto !important;
-    }
-  }
-</style>
 <script lang="ts" src="./index.ts"></script>
\ No newline at end of file

app/web/page/activity/view/activity/index.ts

@@ -11,6 +11,7 @@ export default class Activity extends Mixins(TransformStyleMixin) {
   @Getter('pageData') pageData;
   @State(state => state.activity.pageInfo.pageName) pageName;
   @State(state => state.activity.gridLayout.rowHeight) rowHeight;
+  @Mutation('SET_PAGE_ELEMENTS') setPageElement;
 
   @Provide('editor');
 
@@ -36,6 +37,8 @@ export default class Activity extends Mixins(TransformStyleMixin) {
           document.body.removeChild(hackIframe);
         }, 300);
       }
+      // 适配
+      this.modifyPoints();
     }
   }
 
@@ -53,14 +56,19 @@ export default class Activity extends Mixins(TransformStyleMixin) {
   fetchApi(options) {
     const { store, route } = options;
     const { pageId } = route.params;
-    // console.log('fetchApi', route);
     return store.dispatch('getPageDate', { pageId });
   }
 
-  createStyle({h}) {
-    return EASY_ENV_IS_NODE ? {
-      height: `${h * this.rowHeight}px`,
-    } : {};
+  modifyPoints() {
+    const elements = this.pageData?.elements?.map(v => {
+      const point = {
+        ...v.point,
+        h: v.point.h * this.rowHeight * document.documentElement.clientWidth / 375,
+        w: document.documentElement.clientWidth
+      };
+      return { ...v, point };
+    });
+    this.setPageElement(elements);
   }
 
   modfiTabsStyle() {
@@ -74,7 +82,7 @@ export default class Activity extends Mixins(TransformStyleMixin) {
         gridItemEle.style.transform = 'none';
         gridItemEle.style.top = `${transformY}px`;
         // 处理backgroundColor
-        const backgroundColor = getStyle(tabsEle, 'backgroundColor');
+        const backgroundColor = getStyle(gridItemEle, 'backgroundColor');
         const crTabs = tabsEle.childNodes[0];
         crTabs.style.backgroundColor = backgroundColor;
         const stickyEle = crTabs?.childNodes[0];

app/web/page/activity/view/activity/index.vue

@@ -13,14 +13,14 @@
   	  :vertical-compact="true"
   	  :use-css-transforms="true"
   	>
-  	  <grid-item :style="createStyle(item.point)" v-for="(item, index) in pageData.elements"
+  	  <grid-item :style="transformStyle(item.commonStyle)" v-for="(item, index) in pageData.elements"
   	             :x="item.point.x"
   	             :y="item.point.y"
   	             :w="item.point.w"
   	             :h="item.point.h"
   	             :i="item.point.i"
   	             :key="item.point.i">
-  	      <component :style="transformStyle(item.commonStyle)" :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" v-bind="item.props"></component>
+  	      <component :data-index="index" :containerIndex="index" :childItem="item" :is="item.name" :key="item.id" v-bind="item.props"></component>
   	  </grid-item>
   	</grid-layout>
     <cr-back-top v-if="showBackTop && pageData.props.showBackTop" />
@@ -28,22 +28,14 @@
 </template>
 <script lang="ts" src="./index.ts"></script>
 <style lang="less" scoped>
-	html,
-	body,
-	#app {
-	  height: 100%;
-    /deep/ .cr-popup {
-      .cr-notify {
-        font-size: 14px;
-      }
-    }
-	}
 	.activity {
 	  width: 100%;
 	  height: 100%;
 	  min-height: 100%;
     background-color: rgb(244, 244, 244);
     box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.2);
+    overflow-x: hidden;
+    overflow-y: scroll;
     /deep/ .vue-grid-layout {
       min-height: 667px;
       // transform: translateY(-10px);

app/web/page/mixins/transformStyle.mixin.ts

@@ -5,7 +5,10 @@ import { transformStyle } from '@/service/utils.service';
 export default class TransformStyleMixin extends Vue {
   transformStyle(styleObj, element) {
     // console.log('transformStyle', styleObj, element);
-    const style = {};
+    const style = {
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: 'cover'
+    };
     if (!styleObj) { return style; }
     for (const key of Object.keys(styleObj)) {
       if ( typeof styleObj[key] === 'number') {
@@ -14,10 +17,9 @@ 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.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;
+        style.backgroundImage = `url(${style.backgroundImage})`;
       }
     }
     return style;
   }
-}
+}
\ No newline at end of file

app/web/page/store/modules/activity/index.ts

 import api from '@/api/editor.api';
 import { Module, GetterTree, ActionTree, MutationTree } from 'vuex';
 import Vue from 'vue';
-import { UPDATE_PAGE_INFO, SET_PAGE_INFO } from './type';
+import { UPDATE_PAGE_INFO, SET_PAGE_INFO, SET_PAGE_DATA, SET_PAGE_ELEMENTS} from './type';
 
 import RootState from '../../state';
 import EditorState, { PageInfo, defaultState, Page, PageElement } from './state';
@@ -37,7 +37,13 @@ export default class EditorModule implements Module<EditorState, RootState> {
       } else {
         page.splice(containerIndex, 1, data);
       }
-    }
+    },
+    [SET_PAGE_DATA](state, data) {
+      state.pageInfo.page = data;
+    },
+    [SET_PAGE_ELEMENTS](state, data) {
+      if (data) { (state.pageInfo.page as Page).elements = data; }
+    },
   };
 
   constructor(initState: EditorState = JSON.parse(JSON.stringify(defaultState))) {

app/web/page/store/modules/activity/type.ts

@@ -12,3 +12,4 @@ export const SET_PAGE_DATA = 'SET_PAGE_DATA';
 export const UPDATE_COMMON_STYLE = 'UPDATE_COMMON_STYLE';
 export const UPDATE_PAGE_STYLE = 'UPDATE_PAGE_STYLE';
 export const UPDATE_PAGE_PROPS = 'UPDATE_PAGE_PROPS';
+export const SET_PAGE_ELEMENTS = 'SET_PAGE_ELEMENTS';
\ No newline at end of file

app/web/view/layout.html

@@ -5,15 +5,10 @@
     <meta name="keywords">
     <meta name="description">
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
-    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,viewport-fit=cover">
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
     <link rel="stylesheet" href="/public/asset/css/reset.css">
     <link rel="stylesheet" type="text/css" href="https://activitystatic.lkbang.net/swiper/4.5.1/css/swiper.min.css">
-    <style>
-      html, body {
-        line-height: 1.15 !important;
-      }
-    </style>
   </head>
   <body>
     <div id="app"><!--vue-ssr-outlet--></div>

config/config.default.ts

@@ -27,7 +27,8 @@ export default (appInfo: EggAppConfig) => {
 
   config.static = {
     prefix: '/public/',
-    dir: path.join(appInfo.baseDir, 'public')
+    dir: path.join(appInfo.baseDir, 'public'),
+    gzip: true
   };
 
   config.keys = '123456';

package-lock.json

@@ -1600,26 +1600,38 @@
       }
     },
     "@qg/citrus-ui": {
-      "version": "0.0.29",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.29.tgz",
-      "integrity": "sha512-8Ca1e3/K+ts/kjG5+1EvNF3Cvkg/N6P1CtVTRN7SVRbM+5EYrIDaoC2qbt6K3ipSZ9EAb+t4qtKYdrT93NMASQ==",
+      "version": "0.0.34",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fcitrus-ui/-/citrus-ui-0.0.34.tgz",
+      "integrity": "sha512-yj9jkif1cbWgs4fFZCUNrpqoRfQ2xiRQhW3C95MUKcVmOAxclTVYSalSuSjA9mCwubP3o6vTU6Y8av9X9mNSvg==",
       "requires": {
         "@better-scroll/core": "^2.1.1",
-        "@qg/cherry-ui": "^2.18.72",
+        "@qg/cherry-ui": "^2.20.3",
         "@qg/js-bridge": "^1.1.9",
         "axios": "^0.21.1",
         "js-cookie": "^2.2.1",
         "sa-sdk-javascript": "^1.16.1",
         "swiper": "^4.5.1",
         "vuex": "^3.6.0"
+      },
+      "dependencies": {
+        "@qg/cherry-ui": {
+          "version": "2.20.4",
+          "resolved": "http://npmprivate.quantgroups.com/@qg%2fcherry-ui/-/cherry-ui-2.20.4.tgz",
+          "integrity": "sha512-3xfenI5Umaae3R3r26J9c9TzayNrU+JJvBNBROKc2Lk+gEepFVbZCTD02JKhwsfOjDi/5KqkKX8vJrJWu4OHpw==",
+          "requires": {
+            "@popperjs/core": "^2.5.4",
+            "vue-lazyload": "^1.3.3",
+            "vue-video-player": "^5.0.2"
+          }
+        }
       }
     },
     "@qg/js-bridge": {
-      "version": "1.1.10",
-      "resolved": "http://npmprivate.quantgroups.com/@qg%2fjs-bridge/-/js-bridge-1.1.10.tgz",
-      "integrity": "sha512-g0Dd7pGuSvSLjsAoAZBnxmNsO6+pbh3pASC4F05CfN1qCJ13n1OpbOx2LPDRXuZkWAIe3ZaLwHOHiODEdv9exA==",
+      "version": "1.1.11",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fjs-bridge/-/js-bridge-1.1.11.tgz",
+      "integrity": "sha512-WVvkSUg2zcc2nblzYGxM/bVo+VDcANy/dw7vcbxLoW1Jega9Jm2d5FGSb7uS6m4746waghUUqcAWNJZ0Q5yeqA==",
       "requires": {
-        "rollup": "^2.40.0"
+        "rollup": "^2.41.3"
       }
     },
     "@types/accepts": {
@@ -20364,9 +20376,9 @@
       "integrity": "sha1-8z/pz7Urv9UgqhgyO8ZdsRCht2w="
     },
     "rollup": {
-      "version": "2.41.2",
-      "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.41.2.tgz",
-      "integrity": "sha512-6u8fJJXJx6fmvKrAC9DHYZgONvSkz8S9b/VFBjoQ6dkKdHyPpPbpqiNl2Bao9XBzDHpq672X6sGZ9G1ZBqAHMg==",
+      "version": "2.41.5",
+      "resolved": "http://npmprivate.quantgroups.com/rollup/-/rollup-2.41.5.tgz",
+      "integrity": "sha512-uG+WNNxhOYyeuO7oRt98GA2CNVRgQ67zca75UQVMPzMrLG9FUKzTCgvYVWhtB18TNbV7Uqxo97h+wErAnpFNJw==",
       "requires": {
         "fsevents": "~2.3.1"
       }

package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@better-scroll/core": "^2.0.5",
     "@qg/cherry-ui": "^2.20.1",
-    "@qg/citrus-ui": "0.0.29",
+    "@qg/citrus-ui": "0.0.34",
     "babel-plugin-transform-vue-jsx": "^4.0.1",
     "egg": "^2.3.0",
     "egg-bin": "^4.9.0",

webpack.config.js

@@ -83,7 +83,7 @@ module.exports = {
       {
         default: false,
         vue: {
-          name: 'chunk-vue', // 分离组件库
+          name: 'vue', // 分离组件库
           priority: 23,
           test: /[\\/]node_modules[\\/]vue[\\/]/,
           enforce: true
@@ -124,29 +124,19 @@ module.exports = {
           enforce: true
         },
         cherryUI: {
-          name: 'chunk-cherry-uI', // 分离组件库
+          name: 'cherry-uI', // 分离组件库
           priority: 18,
           chunks: 'all',
           test: /[\\/]node_modules[\\/]@qg[\\/]cherry-ui[\\/]/,
           enforce: true
         },
         citrusUi: {
-          name: 'chunk-citrus-ui', // 分离组件库
+          name: 'citrus-ui', // 分离组件库
           priority: 17,
           chunks: 'all',
           test: /[\\/]node_modules[\\/]@qg[\\/]citrus-ui[\\/]/,
           enforce: true
         },
-        common: {
-          name:'chunk-common',
-          minChunks: 3,
-          priority: 3,
-          reuseExistingChunk: true,
-          chunks (chunk) {
-            return ['login','editor','activity'].includes(chunk.name);
-          },
-          enforce: true
-        },
         vendors:
         {
           name: 'common',