feature: 添加生成封面功能

app/controller/editor.ts

@@ -29,11 +29,12 @@ export default class EditorController extends Controller {
   }
 
   public async getList(ctx: Context) {
-    const { type, pageSize, pageNo, author, pageName, isPublish } = ctx.query;
+    const { type, pageSize, pageNo, author, pageName, isPublish, pageDescribe } = ctx.query;
     const { like } = ctx.model.Sequelize.Op;
     let where = omitBy({
       author: author && { like: `%${author}%`},
       pageName: pageName && { like: `%${pageName}%`},
+      pageDescribe: pageDescribe && { like: `%${pageDescribe}%`},
       isPublish,
       enable: 1
     }, v => !trim(v));
@@ -45,7 +46,7 @@ export default class EditorController extends Controller {
       where = { ...where, isTemplate: 1 };
     }
     const { count: total, rows: data } = await ctx.model.PageInfo.findAndCountAll({ where, limit: +pageSize || 10,
-      offset: (+pageNo - 1) * +pageSize || 0 });
+      offset: (+pageNo - 1) * +pageSize || 0,  order: [['updated_at', 'DESC']] });
     ctx.body = ctx.helper.ok({ total, data });
   }
 

app/model/pageInfo.ts

@@ -2,6 +2,7 @@
  * @desc 页面信息表
  */
 import { AutoIncrement, Column, DataType, Model, PrimaryKey, Table, AllowNull } from 'sequelize-typescript';
+
 @Table({
   modelName: 'page_info',
   freezeTableName: true
@@ -62,6 +63,18 @@ export class PageInfo extends Model<PageInfo> {
     field: 'is_publish'
   })
   isPublish: number;
+
+  @Column({
+    type: DataType.DATE,
+    field: 'updated_at',
+    get() {
+      const moment = require('moment');
+      const updatedAt = this.getDataValue('updatedAt');
+      console.log('updatedAt', moment(updatedAt).format('YYYY-MM-DD HH:mm:ss'));
+      return moment(updatedAt).format('YYYY-MM-DD HH:mm:ss');
+    },
+  })
+  updatedAt: string;
 }
 
 export default () => PageInfo;
\ No newline at end of file

app/web/api/editor.api.ts

 import http from '../service/http.service';
 import config from '../config';
+import axios from 'axios';
 
 export default {
   getPageList(params) {
@@ -20,4 +21,15 @@ export default {
   getTemplateList() {
     return http.get('editor/get/template');
   },
+  getUpToken() {
+    return axios.get(`${config.opapiHost}/upload/getToken`);
+  },
+  uploadBase64(base64Str, name, token) {
+    return axios.post(`http://up-z0.qiniup.com/putb64/-1/key/${name}`, base64Str, {
+      headers: {
+        'content-type': 'application/octet-stream',
+        'Authorization': token,
+      }
+    });
+  }
 };
\ No newline at end of file

app/web/config/dev.config.ts

-const protocol = window.location.protocol;
+const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'http';
 
 export default {
   apiHost: `http://localhost:7001/`,

app/web/config/prod.config.ts

-const protocol = window.location.protocol;
+const protocol = EASY_ENV_IS_BROWSER ? window.location.protocol : 'https';
 
 export default {
   apiHost: `https://quantum-fe.liangkebang.net/`,

app/web/lib/config.ts

@@ -11,7 +11,7 @@ export const basicComponents = [
       },
     ],
     value: {
-      backgroundImage: 'https://static.q-gp.com/new-xyqb-user-ui/public/static/img/landing-bg.6aa8a19.png';
+      backgroundImage: 'http://activitystatic.q-gp.com/landing-bg.png';
     },
     commonStyle: {}
   },
@@ -81,8 +81,8 @@ export const basicComponents = [
       },
     ],
     value: {
-      width: '190px',
-      height: '140px',
+      width: '5.067rem',
+      height: '3.733rem',
       src: 'https://appsync.lkbang.net/Fs0qmUsMry39AjHDf_W-qgn8XEy6',
       fit: 'contain',
     },
@@ -125,7 +125,7 @@ export const businessComponents = [
     value: {
       btnTxt: '',
       btnColor: '#ee0a24',
-      btnImage: 'https://static.q-gp.com/new-xyqb-user-ui/public/static/img/landing-submit.d875947.png',
+      btnImage: 'http://activitystatic.q-gp.com/landing-submit.png',
       registerFrom: '',
       vcBgColor: '#97d5ff'
     },

app/web/page/activity/component/FreedomContainer/index.ts

@@ -18,9 +18,9 @@ export default class FreedomContainer extends Vue {
     const style = {};
     for (const key of Object.keys(styleObj)) {
       if ( typeof styleObj[key] === 'number') {
-        style[key] = `${(styleObj[key] / 37.5).toFixed(2)}rem`;
+        style[key] = `${(styleObj[key] / 37.5).toFixed(3)}rem`;
       } else {
-        style[key] = styleObj[key].includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(2)}rem` : styleObj[key];
+        style[key] = styleObj[key].includes('px') ? `${(+(styleObj[key].slice(0, -2)) / 37.5).toFixed(3)}rem` : styleObj[key];
       }
       if (key === 'backgroundImage') {
         style.backgroundImage = `url(${style.backgroundImage})`;

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

@@ -53,6 +53,9 @@
           justify-content: center;
           align-items: center;
           background: #fff;
+          &>*:first-child {
+            height: 100%;
+          }
         }
       }
 	}

app/web/page/editor/component/BasicPageForm/index.ts

@@ -2,10 +2,15 @@ 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';
 
 @Component({ components: { Upload }, name: 'BasicPageForm' })
 export default class DynamicForm extends Vue {
   @Getter('pageInfo') pageData;
+  @Getter('pageId') pageId;
   @Prop(Boolean) value;
 
   showPopup: boolean = false;
@@ -29,13 +34,25 @@ export default class DynamicForm extends Vue {
   }
 
   handleSubmit(type) {
-    this.$refs.formCustom.validate((valid) => {
+    this.$refs.formCustom.validate(async (valid) => {
       if (valid) {
+        await this.createCoverImage();
         this.$emit('submit', type, { ...this.formCustom, isPublish: this.formCustom.isPublish ? 1 : 0, isTemplate: this.formCustom.isTemplate ? 1 : 0 });
       }
     });
-  },
+  }
+
   change(val) {
     this.$emit('input', val);
   }
+
+  async createCoverImage() {
+    const imgName = btoa(`coverImage-${uuidv4().substr(0, 8)}`);
+    const gridEle = document.querySelector('.Dcm-container-panel');
+    const canvas = await html2canvas(gridEle as HTMLElement, { useCORS: true });
+    const base64 = canvas.toDataURL();
+    const { data: { uptoken } } = await editorApi.getUpToken();
+    const { data: { key } } = await editorApi.uploadBase64(base64.split(',')[1], imgName, `UpToken ${uptoken}`);
+    this.formCustom.coverImage = config.qiniuHost + key;
+  }
 }
\ No newline at end of file

app/web/page/editor/component/BasicPageForm/index.vue

@@ -7,9 +7,6 @@
       <FormItem label="页面描述" prop="pageDescribe">
         <Input v-model="formCustom.pageDescribe" type="textarea" placeholder="请输入页面描述" :rows="3"></Input>
       </FormItem>
-      <FormItem label="页面封面" prop="coverImage">
-        <Upload v-model="formCustom.coverImage" />
-      </FormItem>
       <FormItem label="是否发布" prop="isPublish">
         <Checkbox v-model="formCustom.isPublish"></Checkbox>
       </FormItem>
@@ -24,3 +21,18 @@
   </Modal>
 </template>
 <script lang="ts" src="./index.ts"></script>
+<style lang="less">
+  .basic-form {
+    &-cover {
+      display: flex;
+      align-items: flex-start;
+      img {
+        margin-left: 15px;
+        width: 75px;
+        height: 133.4px;
+        border: 1px dashed;
+        object-fit: contain;
+      }
+    }
+  }
+</style>
\ No newline at end of file

app/web/page/editor/component/DynamicForm/index.vue

@@ -13,13 +13,13 @@
       <Form ref="formCustom" :label-width="70">
         <FormItem label="尺寸" v-if="eleName === 'freedom-container'">
             <Tooltip placement="top" content="全屏">
-              <Button type="ghost" icon="arrow-resize" @click="resizedEvent(667, 667)"></Button>
+              <Button type="ghost" icon="arrow-resize" @click="resizedEvent(667, 12)"></Button>
             </Tooltip>
             <Tooltip placement="top" content="根据背景图片自动调整宽高">
-              <Button type="ghost" icon="image" @click="resizedEvent(667, 375, true)" ></Button>
+              <Button type="ghost" icon="image" @click="resizedEvent(667, 12, true)" ></Button>
             </Tooltip>
             <Tooltip placement="top" content="宽100%">
-              <Button type="ghost" icon="arrow-swap" @click="resizedEvent(null, 375)"></Button>
+              <Button type="ghost" icon="arrow-swap" @click="resizedEvent(null, 12)"></Button>
             </Tooltip>
             <Tooltip placement="top" content="高100%">
               <Button type="ghost" icon="arrow-swap" @click="resizedEvent(667, null)" ></Button>

app/web/page/editor/view/dashboard/index.ts

@@ -62,7 +62,7 @@ export default class DashBoard extends Mixins(ContextMenu) {
   get curElement() {
     let element = {};
     if (this.curEleIndex !== null) {
-      if (this.curChildIndex !== null) {
+      if (this.curChildIndex !== null && this.pageData.elements[this.curEleIndex]) {
         element = this.pageData.elements[this.curEleIndex].child[this.curChildIndex];
       } else {
         element = this.pageData.elements[this.curEleIndex];

app/web/page/editor/view/dashboard/index.vue

@@ -160,6 +160,9 @@
                   &:hover {
                     border: 1px dashed #0c0c0c !important;
                   }
+                  &>*:first-child {
+                    height: 100%;
+                  }
                 }
                 .Dcmcp-item_selected {
                   border: 1px dashed #0c0c0c !important;

app/web/page/editor/view/myPage/index.vue

@@ -59,14 +59,20 @@ export default {
                       src: params.row.coverImage,
                     },
                     style: {
-                      width: '60px',
-                      height: '60px'
+                      width: '37.5px',
+                      height: '66.7px',
+                      objectFit: 'contain'
                     }
                   }
                 )]
               );
             },
           },
+          {
+            key: 'updatedAt',
+            title: '更新时间',
+            hideSearch: true
+          },
           {
             key: 'action',
             title: '操作',

app/web/page/editor/view/pageList/index.vue

@@ -63,8 +63,9 @@ export default {
                       src: params.row.coverImage,
                     },
                     style: {
-                      width: '60px',
-                      height: '60px'
+                      width: '37.5px',
+                      height: '66.7px',
+                      objectFit: 'contain'
                     }
                   }
                 )]
@@ -90,6 +91,11 @@ export default {
               1: '是',
             }
           },
+          {
+            key: 'updatedAt',
+            title: '更新时间',
+            hideSearch: true
+          },
           {
             key: 'action',
             title: '操作',

app/web/page/editor/view/template/index.vue

@@ -12,6 +12,7 @@
 import editorApi from '@api/editor.api';
 import QGTable from '@editor/component/QgTable/index.vue';
 import config from '@/config/index';
+
 export default {
     components: {
         QGTable,
@@ -62,8 +63,9 @@ export default {
                       src: params.row.coverImage,
                     },
                     style: {
-                      width: '60px',
-                      height: '60px'
+                      width: '37.5px',
+                      height: '66.7px',
+                      objectFit: 'contain'
                     }
                   }
                 )]
@@ -78,6 +80,11 @@ export default {
               return h('span', `${config.apiHost}activity/${params.row.id}`)
             }
           },
+          {
+            key: 'updatedAt',
+            title: '更新时间',
+            hideSearch: true
+          },
           {
             key: 'action',
             title: '操作',
@@ -112,7 +119,7 @@ export default {
     },
     methods: {
       async query(data) {
-        return editorApi.getPageList({ type: 'template' });
+        return editorApi.getPageList({ type: 'template', ...data });
       },
       addPage() {
         this.$router.push('/detail');

package.json

@@ -20,7 +20,7 @@
   "dependencies": {
     "@better-scroll/core": "^2.0.5",
     "@hubcarl/json-typescript-mapper": "^2.0.0",
-    "@qg/cherry-ui": "^2.5.27",
+    "@qg/cherry-ui": "^2.17.66",
     "axios": "^0.18.1",
     "egg": "^2.3.0",
     "egg-cors": "^2.1.1",
@@ -32,6 +32,7 @@
     "element-ui": "^2.0.8",
     "extend": "~3.0.0",
     "font-awesome": "^4.7.0",
+    "html2canvas": "^1.0.0-rc.7",
     "iview": "^2.9.0",
     "js-cookie": "^2.2.1",
     "lodash": "^4.17.4",