feat: create-fes-app改为使用内嵌模板

packages/create-fes-app/package.json

@@ -34,7 +34,6 @@
     "fs-extra": "^9.0.1",
     "inquirer": "^7.3.3",
     "readline": "^1.3.0",
-    "tar": "^6.1.0",
     "validate-npm-package-name": "^3.0.0"
   }
 }

packages/create-fes-app/src/generator/App.js

@@ -0,0 +1,24 @@
+import { Generator } from '@umijs/utils';
+
+export default class AppGenerator extends Generator {
+    constructor({
+        cwd, args, path, targetDir
+    }) {
+        super({
+            cwd,
+            args
+        });
+        this.path = path;
+        this.targetDir = targetDir;
+    }
+
+    async writing() {
+        this.copyDirectory({
+            context: {
+                version: require('../../package').version
+            },
+            path: this.path,
+            target: this.targetDir
+        });
+    }
+}

packages/create-fes-app/src/index.js

@@ -2,10 +2,10 @@ import path from 'path';
 import { chalk } from '@umijs/utils';
 import validateProjectName from 'validate-npm-package-name';
 import fs from 'fs-extra';
-import { execSync } from 'child_process';
 import inquirer from 'inquirer';
-import tar from 'tar';
+
 import { clearConsole } from './utils';
+import AppGenerator from './generator/App';
 
 export default async ({ cwd, args }) => {
     if (args.proxy) {
@@ -81,26 +81,18 @@ export default async ({ cwd, args }) => {
     ]);
 
     if (template) {
-        const map = {
+        const generator = new AppGenerator({
-            pc: '@webank/fes-template',
+            cwd,
-            h5: '@webank/fes-template-h5'
+            args,
-        };
+            targetDir,
-        fs.mkdirSync(targetDir);
+            path: path.join(__dirname, `../templates/app/${template}`)
-        const stdout = execSync(`npm pack ${map[template]}`, { encoding: 'utf8', stdio: [null] });
-        const tempFilePath = path.resolve(cwd, stdout.replace('\n', ''));
-        fs.createReadStream(tempFilePath).pipe(
-            tar.x({
-                strip: 1,
-                C: targetDir
-            })
-        ).on('finish', () => {
-            fs.removeSync(tempFilePath);
-            console.log();
-            console.log(chalk.green(`project ${projectName} created successfully, please execute the following command to use:`));
-            console.log(`$ cd ${projectName}`);
-            console.log('$ yarn');
-            console.log('$ yarn dev');
-            console.log();
         });
+        await generator.run();
+        console.log();
+        console.log(chalk.green(`project ${projectName} created successfully, please execute the following command to use:`));
+        console.log(`$ cd ${projectName}`);
+        console.log('$ yarn');
+        console.log('$ yarn dev');
+        console.log();
     }
 };

packages/create-fes-app/templates/app/h5/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+
+root = true
+lib
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

packages/create-fes-app/templates/app/h5/.eslintrc.js

@@ -0,0 +1,19 @@
+
+module.exports = {
+    extends: [
+        '@webank/eslint-config-webank/vue.js'
+    ],
+    globals: {
+        // 这里填入你的项目需要的全局变量
+        // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
+        //
+        // Vue: false
+        __DEV__: false
+    },
+    rules: {
+        'vue/comment-directive': 'off',
+        'global-require': 'off',
+        'import/no-unresolved': 'off',
+        'no-restricted-syntax': 'off'
+    }
+};

packages/create-fes-app/templates/app/h5/.fes.js

@@ -0,0 +1,41 @@
+// fes.config.js 只负责管理 cli 相关的配置
+import pxtoviewport from 'postcss-px-to-viewport';
+
+
+export default {
+    define: {
+        // __VUE_OPTIONS_API__: true,
+        // __VUE_PROD_DEVTOOLS__: false
+    },
+    request: {
+        dataField: 'fileTemplateList'
+    },
+    html: {
+        options: {
+            title: '海贼王'
+        }
+    },
+    imageMinimizer: {
+        disable: false
+    },
+    extraPostCSSPlugins: [
+        pxtoviewport({
+            unitToConvert: 'px',
+            viewportWidth: 375,
+            unitPrecision: 5,
+            propList: ['*'],
+            viewportUnit: 'vw',
+            fontViewportUnit: 'vw',
+            selectorBlackList: [],
+            minPixelValue: 1,
+            mediaQuery: false,
+            replace: true,
+            exclude: [],
+            landscape: false,
+            landscapeUnit: 'vw'
+        })
+    ],
+    devServer: {
+        port: 8080
+    }
+};

packages/create-fes-app/templates/app/h5/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+
+# dependencies
+/node_modules
+
+
+# fes
+/src/.fes
+/src/.fes-production
+/src/.fes-test
+/.env.local

packages/create-fes-app/templates/app/h5/README.md

@@ -0,0 +1,3 @@
+# fes h5 模版
+
+内部测试用，不对外发布

packages/create-fes-app/templates/app/h5/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@webank/fes-template-h5",
+  "version": "2.0.0-alpha.1",
+  "description": "fes 移动端项目模版",
+  "scripts": {
+    "build": "fes build",
+    "dev": "fes dev"
+  },
+  "keywords": [
+    "管理端",
+    "fes",
+    "fast",
+    "easy",
+    "strong"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+    "directory": "packages/fes-template-h5"
+  },
+  "author": "harrywan qlin",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/WeBankFinTech/fes.js/issues"
+  },
+  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.0.0",
+    "@webank/eslint-config-webank": "0.2.7",
+    "postcss-px-to-viewport": "1.1.1"
+  },
+  "dependencies": {
+    "@webank/fes": "^2.0.0-alpha.0",
+    "@webank/fes-plugin-icon": "^2.0.0-alpha.0",
+    "@webank/fes-plugin-request": "^2.0.0-alpha.0",
+    "vue": "^3.0.4"
+  }
+}

packages/create-fes-app/templates/app/h5/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
+    <meta name="format-detection" content="telephone=no"/>
+    <meta name="format-detection" content="email=no"/>
+    <meta name="viewport" content="viewport-fit=cover,width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body ontouchstart="">
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

packages/create-fes-app/templates/app/h5/src/app.js

@@ -0,0 +1,7 @@
+export const request = {
+    errorConfig: {
+        404() {
+            console.log('to 404 page');
+        }
+    }
+};

packages/create-fes-app/templates/app/h5/src/common/utils.js

@@ -0,0 +1,66 @@
+// TODO
+// 时间格式化
+// js 数字精度计算
+// 手机号、身份证号 等的校验
+// 数字分割
+
+
+export function resetContainerHeight(dom) {
+    const originalHeight = document.body.clientHeight || document.documentElement.clientHeight;
+
+    window.onresize = function () {
+        const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
+        if (resizeHeight < originalHeight) {
+            // 恢复内容区域高度
+            const container = document.querySelector(dom);
+            container.style.height = originalHeight;
+        }
+    };
+}
+
+
+export function resetInputBlur() {
+    const isWechat = window.navigator.userAgent.match(/MicroMessenger\/([\d.]+)/i);
+    if (!isWechat) return;
+    const wechatVersion = isWechat[1];
+    const version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
+
+    // 如果设备类型为iOS 12+ 和wechat 6.7.4+，恢复成原来的视口
+    if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
+        window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
+    }
+}
+
+export function getQueryString(name) {
+    const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i');
+    const r = window.location.search.substr(1).match(reg);
+    if (r != null) {
+        return decodeURIComponent(r[2]);
+    }
+    return null;
+}
+
+export function simpleRequest(options) {
+    const xhr = new XMLHttpRequest();
+    xhr.timeout = 3000;
+    if (options.type === 'GET') {
+        xhr.open(options.type, options.url, options.async || true);
+        xhr.send(null);
+    } else if (options.type === 'POST') {
+        xhr.open(options.type, options.url, options.async || true);
+        xhr.setRequestHeader('Content-Type', 'application/json');
+        xhr.send(JSON.stringify(options.data || {}));
+    }
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                options.successed(xhr.responseText);
+            } else {
+                options.failed && options.failed(xhr);
+            }
+        }
+    };
+    xhr.ontimeout = function () {
+        options.failed && options.failed(xhr);
+    };
+}

packages/create-fes-app/templates/app/h5/src/icons/hello.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
+  <path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"/>
+</svg>

packages/create-fes-app/templates/app/h5/src/icons/smile.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024">
+  <path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"/>
+</svg>

packages/create-fes-app/templates/app/h5/src/pages/index.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="onepiece">
+        fes & 拉夫德鲁 <br />
+        <fes-icon @click="clickIcon" :spin="true" class="one-icon" type="smile" />
+        <div v-if="loading" class="loading">loading</div>
+        <div v-else class="data">{{data}}</div>
+    </div>
+</template>
+<config>
+{
+    "title": "首页",
+    "layout": "false"
+}
+</config>
+<script>
+import { ref, onMounted } from 'vue';
+import { useRouter, useRequest } from '@webank/fes';
+
+export default {
+    setup() {
+        const fes = ref('fes upgrade to vue3');
+        const rotate = ref(90);
+        const router = useRouter();
+        onMounted(() => {
+            console.log(router);
+            console.log('mounted1!!');
+        });
+        const clickIcon = () => {
+            console.log('click Icon');
+        };
+        const { loading, data } = useRequest('api');
+        return {
+            loading,
+            data,
+            fes,
+            rotate,
+            clickIcon
+        };
+    }
+};
+</script>
+
+<style lang="less" scoped>
+@import "~@/styles/mixins/hairline";
+@import "~@/styles/mixins/hover";
+
+div {
+    padding: 20px;
+    p {
+        margin: 20px;
+    }
+}
+.one-icon {
+    color: yellow;
+    font-size: 24px;
+    .hover();
+}
+.onepiece {
+    .hairline("top");
+    background: url('../images/male.png');
+}
+</style>

packages/create-fes-app/templates/app/h5/src/pages/onepiece.vue

@@ -0,0 +1,21 @@
+<template>
+    <div>{{fes}}</div>
+</template>
+<config>
+{
+    "title": "onepiece",
+    "layout": "true"
+}
+</config>
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const fes = ref('fes upgrade to vue3');
+        return {
+            fes
+        };
+    }
+};
+</script>

packages/create-fes-app/templates/app/h5/src/styles/common.less

@@ -0,0 +1,45 @@
+a,
+img {
+    -webkit-touch-callout: none;
+}
+
+html {
+    touch-action: manipulation; // 处理 IOS10+，click点击 300ms 问题
+}
+body {
+    background-color: #f7f7f7;
+}
+
+input {
+    line-height: normal;
+    border: none;
+}
+
+a {
+    color: #0af;
+    text-decoration: none;
+}
+
+* {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/* 适配 iPhone X 顶部填充*/
+@supports (top: env(safe-area-inset-top)){
+    body,
+    .alien-screen-header {
+        padding-top: constant(safe-area-inset-top, 40px);
+        padding-top: env(safe-area-inset-top, 40px);
+        padding-top: var(safe-area-inset-top, 40px);
+    }
+}
+
+/* 判断iPhoneX 将 footer 的 padding-bottom 填充到最底部 */
+@supports (bottom: env(safe-area-inset-bottom)){
+    body,
+    .alien-screen-footer {
+        padding-bottom: constant(safe-area-inset-bottom, 20px);
+        padding-bottom: env(safe-area-inset-bottom, 20px);
+        padding-top: var(safe-area-inset-bottom, 20px);
+    }
+}

packages/create-fes-app/templates/app/h5/src/styles/mixins/hairline.less

@@ -0,0 +1,173 @@
+@import "../theme";
+
+.scale-hairline-common(@color, @top, @right, @bottom, @left) {
+    content: '';
+    position: absolute;
+    background-color: @color;
+    display: block;
+    z-index: 1;
+    top: @top;
+    right: @right;
+    bottom: @bottom;
+    left: @left;
+}
+
+.hairline(@direction, @color: @border-color-base) when (@direction ='top') {
+    border-top: 1PX solid @color;
+
+    html:not([data-scale]) & {
+        @media (min-resolution: 2dppx) {
+            border-top: none;
+            position: relative;
+
+            &::before {
+                .scale-hairline-common(@color, 0, auto, auto, 0);
+                width: 100%;
+                height: 1PX;
+                transform-origin: 50% 50%;
+                transform: scaleY(0.5);
+
+                @media (min-resolution: 3dppx) {
+                    transform: scaleY(0.33);
+                }
+            }
+        }
+    }
+}
+
+.hairline(@direction, @color: @border-color-base) when (@direction ='right') {
+    border-right: 1PX solid @color;
+
+    html:not([data-scale]) & {
+        @media (min-resolution: 2dppx) {
+            border-right: none;
+            position: relative;
+
+            &::after {
+                .scale-hairline-common(@color, 0, 0, auto, auto);
+                width: 1PX;
+                height: 100%;
+                background: @color;
+                transform-origin: 100% 50%;
+                transform: scaleX(0.5);
+
+                @media (min-resolution: 3dppx) {
+                    transform: scaleX(0.33);
+                }
+            }
+        }
+    }
+}
+
+.hairline(@direction, @color: @border-color-base) when (@direction ='bottom') {
+    border-bottom: 1PX solid @color;
+
+    html:not([data-scale]) & {
+        @media (min-resolution: 2dppx) {
+            border-bottom: none;
+            position: relative;
+
+            &::after {
+                .scale-hairline-common(@color, auto, auto, 0, 0);
+                width: 100%;
+                height: 1PX;
+                transform-origin: 50% 100%;
+                transform: scaleY(0.5);
+
+                @media (min-resolution: 3dppx) {
+                    transform: scaleY(0.33);
+                }
+            }
+        }
+    }
+}
+
+.hairline(@direction, @color: @border-color-base) when (@direction ='left') {
+    border-left: 1PX solid @color;
+
+    html:not([data-scale]) & {
+        @media (min-resolution: 2dppx) {
+            border-left: none;
+            position: relative;
+
+            &::before {
+                .scale-hairline-common(@color, 0, auto, auto, 0);
+                width: 1PX;
+                height: 100%;
+                transform-origin: 100% 50%;
+                transform: scaleX(0.5);
+
+                @media (min-resolution: 3dppx) {
+                    transform: scaleX(0.33);
+                }
+            }
+        }
+    }
+}
+
+.hairline(@direction, @color: @border-color-base, @radius: 0) when (@direction ='all') {
+    border: 1PX solid @color;
+    border-radius: @radius;
+
+    html:not([data-scale]) & {
+        @media (min-resolution: 2dppx) {
+            position: relative;
+            border: none;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 0;
+                width: 200%;
+                height: 200%;
+                border: 1PX solid @color;
+                border-radius: @radius * 2;
+                transform-origin: 0 0;
+                transform: scale(0.5);
+                box-sizing: border-box;
+                pointer-events: none;
+            }
+        }
+    }
+}
+
+.hairline-remove(@position) when (@position ='left') {
+    border-left: 0;
+
+    &:before {
+        display: none !important;
+    }
+}
+
+.hairline-remove(@position) when (@position ='right') {
+    border-right: 0;
+
+    &:after {
+        display: none !important;
+    }
+}
+
+.hairline-remove(@position) when (@position ='top') {
+    border-top: 0;
+
+    &:before {
+        display: none !important;
+    }
+}
+
+.hairline-remove(@position) when (@position ='bottom') {
+    border-bottom: 0;
+
+    &:after {
+        display: none !important;
+    }
+}
+
+.hairline-remove(@position) when (@position ='all') {
+    border: 0;
+
+    &:before {
+        display: none !important;
+    }
+}

packages/create-fes-app/templates/app/h5/src/styles/mixins/hover.less

@@ -0,0 +1,6 @@
+
+.hover() {
+    &:active {
+        box-shadow: inset 0 0 1000px rgba(0, 0, 0, .5);
+    }
+}

packages/create-fes-app/templates/app/h5/src/styles/mixins/scroll.less

@@ -0,0 +1,4 @@
+.scroll() {
+    -webkit-overflow-scrolling: touch;
+    overflow-y: auto;
+}

packages/create-fes-app/templates/app/h5/src/styles/reset.less

@@ -0,0 +1,142 @@
+@charset "UTF-8";
+
+// 所有元素为border-box
+* {
+    box-sizing: border-box;
+}
+
+html {
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+li,
+dl,
+dd,
+p,
+form,
+th,
+td,
+fieldset,
+legend,
+blockquote,
+button,
+input,
+select,
+textarea {
+    margin: 0;
+    padding: 0;
+}
+
+body,
+button,
+input,
+select,
+textarea {
+    font: 14*@PX/1.5 tahoma, arial, "Hiragino Sans GB", "Microsoft YaHei";
+}
+
+
+body {
+    color: @txt-color;
+    background-color: @bg-color;
+    font-size: 14px;
+    word-wrap: break-word;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-size: 100%;
+    font-weight: normal;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+img {
+    border: 0;
+    vertical-align: middle;
+}
+
+address,
+cite,
+dfn,
+em,
+i,
+var {
+    font-style: normal;
+}
+
+a {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+a:focus {
+    outline: none;
+}
+
+table {
+    border-spacing: 0;
+    word-wrap: break-word;
+    border-collapse: separate;
+}
+
+input,
+select,
+button {
+    outline: none;
+    vertical-align: middle;
+}
+
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+    display: none;
+}
+
+input::-ms-clear {
+    display: none;
+}
+
+select::-ms-expand {
+    display: none;
+}
+
+button,
+input,
+select,
+textarea {
+    margin: 0;
+    font-size: 100%;
+    font-family: inherit;
+    outline-offset: 0;
+    outline-style: none;
+    outline-width: 0;
+    background-image: none;
+}
+
+input[readonly],
+textarea[readonly] {
+    background-color: #F1F1F1;
+}

packages/create-fes-app/templates/app/h5/src/styles/theme.less

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+
+@PX:                        1px;
+@rem:                       0.01rem;
+@a-hover:                    #eeeeee;
+
+//大背景色
+//-----------------------------------------------------
+@bg-color: #ffffff;
+
+// 边框色
+@border-color-base: #ddd;
+
+
+//文字颜色
+//-----------------------------------------------------
+@txt-color: #666666;
+
+// icon 颜色
+@icon-color: inherit;

packages/create-fes-app/templates/app/pc/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+
+root = true
+lib
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

packages/create-fes-app/templates/app/pc/.eslintrc.js

@@ -0,0 +1,19 @@
+
+module.exports = {
+    extends: [
+        '@webank/eslint-config-webank/vue.js'
+    ],
+    globals: {
+        // 这里填入你的项目需要的全局变量
+        // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
+        //
+        // Vue: false
+        __DEV__: false
+    },
+    rules: {
+        'vue/comment-directive': 'off',
+        'global-require': 'off',
+        'import/no-unresolved': 'off',
+        'no-restricted-syntax': 'off'
+    }
+};

packages/create-fes-app/templates/app/pc/.fes.js

@@ -0,0 +1,31 @@
+// .fes.js 只负责管理编译时配置，只能使用plain Object
+
+
+export default {
+    base: '/foo/',
+    define: {
+        __DEV__: false
+    },
+    publicPath: '/',
+    access: {
+        roles: {
+            admin: ["/", "/onepiece"]
+        }
+    },
+    layout: {
+        title: "Fes.js",
+        logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
+        multiTabs: false,
+        menus: [{
+            name: 'index'
+        }, {
+            name: 'onepiece'
+        }]
+    },
+    locale: {
+        legacy: true
+    },
+    devServer: {
+        port: 8080
+    }
+};

packages/create-fes-app/templates/app/pc/.fes.prod.js

@@ -0,0 +1,6 @@
+// .fes.js 只负责管理编译时配置，只能使用plain Object
+
+
+export default {
+    publicPath: 'https://gw.alipayobjects.com/'
+};

packages/create-fes-app/templates/app/pc/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+
+# dependencies
+/node_modules
+
+
+# fes
+/src/.fes
+/src/.fes-production
+/src/.fes-test
+/.env.local

packages/create-fes-app/templates/app/pc/README.md

@@ -0,0 +1,3 @@
+# fes 模版
+
+内部测试用，不对外发布

packages/create-fes-app/templates/app/pc/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@webank/fes-template",
+  "version": "2.0.0-alpha.1",
+  "description": "fes项目模版",
+  "scripts": {
+    "build": "fes build",
+    "prod": "FES_ENV=prod fes build",
+    "analyze": "ANALYZE=1 fes build",
+    "dev": "fes dev"
+  },
+  "keywords": [
+    "管理端",
+    "fes",
+    "fast",
+    "easy",
+    "strong"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+    "directory": "packages/fes-template"
+  },
+  "author": "harrywan",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/WeBankFinTech/fes.js/issues"
+  },
+  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.0.0",
+    "@webank/eslint-config-webank": "0.2.7"
+  },
+  "dependencies": {
+    "@webank/fes": "^2.0.0-alpha.0",
+    "@webank/fes-plugin-access": "^2.0.0-alpha.0",
+    "@webank/fes-plugin-layout": "^2.0.0-alpha.0",
+    "@webank/fes-plugin-locale": "^2.0.0-alpha.0",
+    "@webank/fes-plugin-model": "^2.0.0-alpha.0",
+    "ant-design-vue": "2.0.0-rc.3",
+    "vue": "3.0.4"
+  }
+}
+ 

packages/create-fes-app/templates/app/pc/public/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>fes Vue3</title>
+</head>
+<body>
+    <div id="app"></div>
+</body>
+</html>

packages/create-fes-app/templates/app/pc/src/app.js

@@ -0,0 +1,24 @@
+
+
+import { access } from '@webank/fes';
+import PageLoading from '@/components/PageLoading';
+import UserCenter from '@/components/UserCenter';
+
+export const beforeRender = {
+    loading: <PageLoading />,
+    action() {
+        const { setRole } = access;
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                setRole('admin');
+                resolve({
+                    userName: 'harrywan'
+                });
+            }, 1000);
+        });
+    }
+};
+
+export const layout = {
+    customHeader: <UserCenter />
+};

packages/create-fes-app/templates/app/pc/src/common/service.js

@@ -0,0 +1,19 @@
+import { requestWrap } from '@webank/fes';
+
+// TODO
+// 响应体控制
+// formData 控制
+// 错误控制
+// 跳错误页面 || 或者重新登录
+// 段时间内不能重复发送的请求
+
+// or
+export default requestWrap({
+    login: {
+        url: '',
+        throttle: 300,
+        options: {
+            method: 'get'
+        }
+    }
+});

packages/create-fes-app/templates/app/pc/src/components/PageLoading.vue

@@ -0,0 +1,29 @@
+<template>
+    <div class="page-loading">
+        <Spin size="large" />
+    </div>
+</template>
+<script>
+import Spin from 'ant-design-vue/lib/spin';
+import 'ant-design-vue/lib/spin/style';
+
+export default {
+    setup() {
+        return {
+            Spin
+        };
+    }
+};
+</script>
+<style>
+.page-loading{
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

packages/create-fes-app/templates/app/pc/src/components/UserCenter.vue

@@ -0,0 +1,15 @@
+<template>
+    <div>{{initialState.userName}}</div>
+</template>
+<script>
+import { useModel } from '@webank/fes';
+
+export default {
+    setup() {
+        const initialState = useModel('@@initialState');
+        return {
+            initialState
+        };
+    }
+};
+</script>

packages/create-fes-app/templates/app/pc/src/locales/en-US.js

@@ -0,0 +1,11 @@
+
+export default {
+    test: 'test',
+    'navBar.lang': 'Languages',
+    'layout.user.link.help': 'Help',
+    'layout.user.link.privacy': 'Privacy',
+    'layout.user.link.terms': 'Terms',
+    'app.preview.down.block': 'Download this page to your local project',
+    'app.welcome.link.fetch-blocks': 'Get all block',
+    'app.welcome.link.block-list': 'Quickly build standard, pages based on `block` development'
+};

packages/create-fes-app/templates/app/pc/src/locales/id-ID.js

@@ -0,0 +1,11 @@
+
+export default {
+    'navbar.lang': 'Bahasa',
+    'layout.user.link.help': 'Bantuan',
+    'layout.user.link.privacy': 'Privasi',
+    'layout.user.link.terms': 'Ketentuan',
+    'app.preview.down.block': 'Unduh halaman ini dalam projek lokal anda',
+    'app.welcome.link.fetch-blocks': 'Dapatkan semua blok',
+    'app.welcome.link.block-list':
+    'Buat standar dengan cepat, halaman-halaman berdasarkan pengembangan `block`'
+};

packages/create-fes-app/templates/app/pc/src/locales/pt-BR.js

@@ -0,0 +1,8 @@
+
+export default {
+    'navBar.lang': 'Idiomas',
+    'layout.user.link.help': 'ajuda',
+    'layout.user.link.privacy': 'política de privacidade',
+    'layout.user.link.terms': 'termos de serviços',
+    'app.preview.down.block': 'Download this page to your local project'
+};

packages/create-fes-app/templates/app/pc/src/locales/zh-CN.js

@@ -0,0 +1,11 @@
+
+export default {
+    test: '测试',
+    'navBar.lang': '语言',
+    'layout.user.link.help': '帮助',
+    'layout.user.link.privacy': '隐私',
+    'layout.user.link.terms': '条款',
+    'app.preview.down.block': '下载此页面到本地项目',
+    'app.welcome.link.fetch-blocks': '获取全部区块',
+    'app.welcome.link.block-list': '基于 block 开发，快速构建标准页面'
+};

packages/create-fes-app/templates/app/pc/src/locales/zh-TW.js

@@ -0,0 +1,8 @@
+
+export default {
+    'navBar.lang': '語言',
+    'layout.user.link.help': '幫助',
+    'layout.user.link.privacy': '隱私',
+    'layout.user.link.terms': '條款',
+    'app.preview.down.block': '下載此頁面到本地項目'
+};

packages/create-fes-app/templates/app/pc/src/pages/index.vue

@@ -0,0 +1,56 @@
+<template>
+    <div class="haizekuo">
+        <div>国际化： {{t("test")}}</div>
+        fes & 拉夫德鲁 <br />
+        <access :id="accessId"> accessOnepicess1 <input /> </access>
+        <div v-access="accessId"> accessOnepicess2 <input /> </div>
+        <input />
+    </div>
+</template>
+<config>
+{
+    "name": "index",
+    "title": "首页"
+}
+</config>
+<script>
+import { ref, onMounted } from 'vue';
+import {
+    access, useAccess, useRouter, useI18n, locale
+} from '@webank/fes';
+
+export default {
+    setup() {
+        const fes = ref('fes upgrade to vue3');
+        const accessOnepicess = useAccess('/onepiece1');
+        const localI18n = useI18n();
+        const router = useRouter();
+        const accessId = ref('/onepiece1');
+        onMounted(() => {
+            console.log(router);
+            setTimeout(() => {
+                locale.setLocale({ lang: 'en-US' });
+                locale.addLocale({ lang: 'ja-JP', messages: { test: 'テスト' } });
+                console.log(locale.getAllLocales());
+                access.addAccess('/onepiece1');
+            }, 2000);
+            setTimeout(() => {
+                accessId.value = '11';
+            }, 4000);
+            // router.push('/onepiece');
+        });
+        return {
+            accessId,
+            fes,
+            accessOnepicess,
+            t: localI18n.t
+        };
+    }
+};
+</script>
+
+<style scoped>
+.haizekuo {
+    /* background: url('../images/icon.png'); */
+}
+</style>

packages/create-fes-app/templates/app/pc/src/pages/onepiece.vue

@@ -0,0 +1,21 @@
+<template>
+    <div>{{fes}}</div>
+</template>
+<config>
+{
+    "name": "onepiece",
+    "title": "onepiece"
+}
+</config>
+<script>
+import { ref } from 'vue';
+
+export default {
+    setup() {
+        const fes = ref('fes upgrade to vue3');
+        return {
+            fes
+        };
+    }
+};
+</script>