Merge branch 'master' of https://github.com/WeBankFinTech/fes.js

docs/reference/plugin/plugins/layout.md

@@ -56,21 +56,21 @@ export default {
 }
 </config>
 ```
-如果只是不想展示`side`，则：
+如果只是不想展示`sidebar`，则：
 ```
 <config lang="json">
 {
     "layout": {
-        "side": false
+        "sidebar": false
     }
 }
 </config>
 ```
 `layout`的可选配置有：
 
-- **side**： 左侧区域
+- **sidebar**： 左侧区域，从v4.0.0开始，之前名称叫`side`
   
-- **top**： 头部区域
+- **header**： 头部区域,，从v4.0.0开始，之前名称叫`top`
 
 - **logo**：logo和标题区域。
 
@@ -183,6 +183,15 @@ export default {
   
   - **path**：菜单的路径，可配置第三方地址。
 
+  - **match**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+）
+
+```
+{
+    path: '/product',
+    match: ['/product/*', '/product/create']
+}
+```
+  
   - **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
 
   - **icon**: 菜单的图标，只有一级标题展示图标。

docs/zh/reference/plugin/plugins/layout.md

@@ -56,21 +56,21 @@ export default {
 }
 </config>
 ```
-如果只是不想展示`side`，则：
+如果只是不想展示`sidebar`，则：
 ```
 <config lang="json">
 {
     "layout": {
-        "side": false
+        "sidebar": false
     }
 }
 </config>
 ```
 `layout`的可选配置有：
 
-- **side**： 左侧区域
+- **sidebar**： 左侧区域，从v4.0.0开始，之前名称叫`side`
   
-- **top**： 头部区域
+- **header**： 头部区域,，从v4.0.0开始，之前名称叫`top`
 
 - **logo**：logo和标题区域。
 
@@ -183,6 +183,15 @@ export default {
   
   - **path**：菜单的路径，可配置第三方地址。
 
+  - **match**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+）
+
+```
+{
+    path: '/product',
+    match: ['/product/*', '/product/create']
+}
+```
+  
   - **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
 
   - **icon**: 菜单的图标，只有一级标题展示图标。

packages/create-fes-app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/create-fes-app",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "create a app base on fes.js",
   "main": "lib/index.js",
   "files": [

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

@@ -0,0 +1 @@
+public-hoist-pattern[]=@babel/*

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

@@ -48,7 +48,8 @@
     "@fesjs/fes": "^2.0.0",
     "@fesjs/plugin-icon": "^2.0.0",
     "@fesjs/plugin-request": "^2.0.0",
-    "vue": "^3.2.6"
+    "vue": "^3.2.6",
+    "core-js": "^3.8.3"
   },
   "private": true
 }

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

@@ -12,6 +12,7 @@ export default {
     layout: {
         title: "Fes.js",
         footer: 'Created by MumbleFE',
+        navigation: 'mixin',
         multiTabs: false,
         menus: [{
             name: 'index'

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

@@ -0,0 +1 @@
+public-hoist-pattern[]=@babel/*

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

@@ -53,7 +53,8 @@
     "@fesjs/plugin-model": "^2.0.0",
     "@fesjs/plugin-enums": "^2.0.0",
     "@fesjs/fes-design": "^0.1.10",
-    "vue": "^3.2.6"
+    "vue": "^3.2.6",
+    "core-js": "^3.8.3"
   },
   "private": true
 }

packages/create-fes-app/templates/app/pc/src/global.less

@@ -0,0 +1,3 @@
+body, html {
+    margin: 0;
+}

packages/fes-plugin-layout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/plugin-layout",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "@fesjs/plugin-layout",
   "main": "lib/index.js",
   "files": [

packages/fes-plugin-layout/src/runtime/helpers/utils.js

@@ -0,0 +1,9 @@
+export const flatNodes = (nodes = []) => nodes.reduce((res, node) => {
+    res.push(node);
+    if (node.children) {
+        res = res.concat(
+            flatNodes(node.children)
+        );
+    }
+    return res;
+}, []);

packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue

@@ -2,7 +2,7 @@
     <f-layout v-if="routeLayout" class="main-layout">
         <template v-if="navigation === 'side'">
             <f-aside
-                v-if="routeLayout.side"
+                v-if="routeLayout.sidebar"
                 v-model:collapsed="collapsed"
                 :fixed="fixedSideBar"
                 class="layout-aside"
@@ -32,7 +32,7 @@
                 }"
             >
                 <f-header
-                    v-if="routeLayout.top"
+                    v-if="routeLayout.header"
                     class="layout-header"
                     :fixed="currentFixedHeader"
                 >
@@ -59,7 +59,7 @@
         </template>
         <template v-if="navigation === 'top'">
             <f-header
-                v-if="routeLayout.top"
+                v-if="routeLayout.header"
                 class="layout-header"
                 :inverted="theme === 'dark'"
                 :fixed="currentFixedHeader"
@@ -96,7 +96,7 @@
         </template>
         <template v-if="navigation === 'mixin'">
             <f-header
-                v-if="routeLayout.top"
+                v-if="routeLayout.header"
                 class="layout-header"
                 :fixed="currentFixedHeader"
                 :inverted="theme === 'dark'"
@@ -117,7 +117,7 @@
                 :style="{ top: currentFixedHeader ? '54px' : 'auto' }"
             >
                 <f-aside
-                    v-if="routeLayout.side"
+                    v-if="routeLayout.sidebar"
                     v-model:collapsed="collapsed"
                     :fixed="fixedSideBar"
                     collapsible
@@ -226,8 +226,8 @@ export default {
             key: 'layout',
             type: ApplyPluginsType.modify,
             initialValue: {
-                side: true,
+                sidebar: true,
-                top: true,
+                header: true,
                 logo: true
             }
         });

packages/fes-plugin-layout/src/runtime/views/Menu.vue

@@ -1,6 +1,6 @@
 <template>
     <f-menu
-        :modelValue="route.path"
+        :modelValue="activePath"
         :inverted="inverted"
         :mode="mode"
         :options="fixedMenus"
@@ -15,6 +15,7 @@ import { useRoute, useRouter } from '@@/core/coreExports';
 import MenuIcon from './MenuIcon';
 import { transform as transformByAccess } from '../helpers/pluginAccess';
 import { transform as transformByLocale } from '../helpers/pluginLocale';
+import { flatNodes } from '../helpers/utils';
 
 export default {
     components: {
@@ -56,6 +57,23 @@ export default {
             return copy;
         });
         const fixedMenus = computed(() => transformByLocale(transformByAccess(transform(props.menus))));
+        const menus = computed(() => flatNodes(fixedMenus.value));
+        const activePath = computed(() => {
+            const matchMenus = menus.value.filter((menu) => {
+                const match = menu.match;
+                if (!match || !Array.isArray(match)) {
+                    return false;
+                }
+                return match.some((str) => {
+                    const reg = new RegExp(str);
+                    return reg.test(route.path);
+                });
+            });
+            if (matchMenus.length === 0) {
+                return route.path;
+            }
+            return matchMenus[0].path;
+        });
         const onMenuClick = (e) => {
             const path = e.value;
             if (/^https?:\/\//.test(path)) {
@@ -69,7 +87,7 @@ export default {
             }
         };
         return {
-            route,
+            activePath,
             fixedMenus,
             onMenuClick
         };

packages/fes-preset-built-in/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fesjs/preset-built-in",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "description": "@fesjs/preset-built-in",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -73,6 +73,7 @@
     "webpackbar": "^5.0.0-3"
   },
   "peerDependencies": {
-    "@vue/compiler-sfc": "^3.0.5"
+    "@vue/compiler-sfc": "^3.0.5",
+    "core-js": "^3.8.3"
   }
 }

packages/fes-preset-built-in/src/plugins/commands/webpackConfig/index.js

@@ -82,6 +82,7 @@ export default async function getConfig({
     // --------------- cache -----------
     webpackConfig.cache({
         type: 'filesystem',
+        version: require('../../../../package.json').version,
         cacheDirectory: join(cwd, '.cache/webpack')
     });
 

packages/fes-template/.fes.js

@@ -10,12 +10,12 @@ export default {
         title: '海贼王'
     },
     router: {
-        mode: 'history'
+        mode: 'hash'
     },
     access: {
         roles: {
             admin: ['*'],
-            menuTest: ['/','/menuTest']
+            menuTest: ['/', '/menuTest']
         }
     },
     request: {
@@ -39,7 +39,8 @@ export default {
         menus: [
             {
                 name: 'index',
-                icon: '/wine-outline.svg'
+                icon: '/wine-outline.svg',
+                match: ['/route/*']
             },
             {
                 name: 'store'
@@ -53,17 +54,20 @@ export default {
                 icon: 'UserOutlined',
                 path: 'https://www.baidu.com'
             },
+            {
+                name: 'mock'
+            },
             {
                 title: '菜单权限测试',
                 children: [
                     {
                         title: '子菜单',
-                        path: '/menuTest',
+                        path: '/menuTest'
                     },
                     {
                         title: '子菜单a',
                         path: '/menuTest/a'
-                    },
+                    }
                 ]
             },
             {

packages/fes-template/src/locales/en-US.js

@@ -3,5 +3,6 @@ export default {
     home: 'home',
     store: 'store',
     editor: 'editor',
-    externalLink: 'externalLink'
+    externalLink: 'externalLink',
+    mock: 'mock'
 };

packages/fes-template/src/locales/zh-CN.js

@@ -3,5 +3,6 @@ export default {
     home: '首页',
     store: '状态管理',
     editor: '编辑器',
-    externalLink: '外部链接'
+    externalLink: '外部链接',
+    mock: '代理'
 };

packages/fes-template/src/pages/mock.vue

@@ -0,0 +1,49 @@
+<template>
+    <div>
+        mock and proxy
+    </div>
+</template>
+<config>
+{
+    "name": "mock",
+    "title": "$mock"
+}
+</config>
+<script setup>
+import { request } from '@fesjs/fes';
+
+console.log('测试 mock!!');
+
+request('/v2/file')
+    .then((data) => {
+        console.log(data);
+    })
+    .catch((err) => {
+        console.log(err);
+    });
+
+request('/v2/movie/in_theaters_mock', { a: 1 }, 'get')
+    .then((data) => {
+        console.log(data);
+    })
+    .catch((err) => {
+        console.log(err);
+    });
+
+console.log('测试 proxy!!');
+
+request(
+    '/v2/movie/in_theaters_proxy',
+    { a: 1 },
+    {
+        method: 'get',
+        headers: { Accept: '*/*' }
+    }
+)
+    .then((resp) => {
+        console.log(resp);
+    })
+    .catch((err) => {
+        console.log(err);
+    });
+</script>

packages/fes-template/src/pages/route/@id.vue

@@ -0,0 +1,23 @@
+<template>
+    <div>
+        {{params.id}}
+    </div>
+</template>
+<config>
+{
+    "name": "activeRoute",
+    "title": "动态路由"
+}
+</config>
+<script>
+import { useRoute } from '@fesjs/fes';
+
+export default {
+    setup() {
+        const { params } = useRoute();
+        return {
+            params
+        };
+    }
+};
+</script>

packages/fes/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fesjs/fes",
-    "version": "2.0.13",
+    "version": "2.0.15",
     "description": "一个好用的前端管理台快速开发框架",
     "preferGlobal": true,
     "scripts": {
@@ -39,7 +39,7 @@
     ],
     "dependencies": {
         "@fesjs/compiler": "^2.0.3",
-        "@fesjs/preset-built-in": "^2.0.12",
+        "@fesjs/preset-built-in": "^2.0.14",
         "@fesjs/runtime": "^2.0.2",
         "@fesjs/utils": "^2.0.3",
         "resolve-cwd": "^3.0.0"