mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 11:18:54 +08:00
feat: 插件改为使用fes-design
This commit is contained in:
harrywan
GitHub
parent
1b8adbff83
commit
52a866415f
1
.gitignore
vendored
1
.gitignore
vendored
@ -5,6 +5,7 @@
|
||||
.history
|
||||
.cache
|
||||
.temp
|
||||
.hound
|
||||
dist
|
||||
*.log
|
||||
node_modules
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -84,7 +84,7 @@ export default {
|
||||
// 标题
|
||||
title: "Fes.js",
|
||||
// 底部文字
|
||||
footer: 'Created by MumbelFe',
|
||||
footer: 'Created by MumbleFE',
|
||||
// 主题light
|
||||
theme: 'dark'
|
||||
// 是否开启 tabs
|
||||
@ -183,13 +183,13 @@ export default {
|
||||
|
||||
- **path**：菜单的路径，可配置第三方地址。
|
||||
|
||||
- **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且在 `locales` 中配置了 `title` ，则菜单的名称会根据语言自动切换。
|
||||
- **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
|
||||
|
||||
- **icon**: 菜单的图标，只有一级标题展示图标。
|
||||
- 图标使用[antv icon](https://www.antdv.com/components/icon-cn/)，在这里使用组件type。
|
||||
- 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，在这里使用组件名称。
|
||||
```js
|
||||
{
|
||||
icon: "user"
|
||||
icon: "AppstoreOutlined"
|
||||
}
|
||||
```
|
||||
- 图标使用本地或者远程svg图片。
|
||||
|
||||
@ -106,7 +106,7 @@ pages
|
||||
```
|
||||
|
||||
**需要注意的是，满足以下任意规则的文件不会被注册为路由**：
|
||||
- 不是 `.vue` 文件
|
||||
- 不是 `.vue .jsx` 文件
|
||||
- `components` 目录中的文件
|
||||
|
||||
|
||||
|
||||
@ -84,7 +84,7 @@ export default {
|
||||
// 标题
|
||||
title: "Fes.js",
|
||||
// 底部文字
|
||||
footer: 'Created by MumbelFe',
|
||||
footer: 'Created by MumbleFE',
|
||||
// 主题light
|
||||
theme: 'dark'
|
||||
// 是否开启 tabs
|
||||
@ -183,13 +183,13 @@ export default {
|
||||
|
||||
- **path**：菜单的路径，可配置第三方地址。
|
||||
|
||||
- **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且在 `locales` 中配置了 `title` ，则菜单的名称会根据语言自动切换。
|
||||
- **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
|
||||
|
||||
- **icon**: 菜单的图标，只有一级标题展示图标。
|
||||
- 图标使用[antv icon](https://www.antdv.com/components/icon-cn/)，在这里使用组件type。
|
||||
- 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，在这里使用组件名称。
|
||||
```js
|
||||
{
|
||||
icon: "user"
|
||||
icon: "AppstoreOutlined"
|
||||
}
|
||||
```
|
||||
- 图标使用本地或者远程svg图片。
|
||||
|
||||
@ -11,7 +11,7 @@ export default {
|
||||
},
|
||||
layout: {
|
||||
title: "Fes.js",
|
||||
footer: 'Created by MumbleFe',
|
||||
footer: 'Created by MumbleFE',
|
||||
multiTabs: false,
|
||||
menus: [{
|
||||
name: 'index'
|
||||
|
||||
@ -9,4 +9,4 @@
|
||||
/src/.fes
|
||||
/src/.fes-production
|
||||
/src/.fes-test
|
||||
/.env.local
|
||||
.env.local
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
"@fesjs/plugin-layout": "^2.0.0",
|
||||
"@fesjs/plugin-model": "^2.0.0",
|
||||
"@fesjs/plugin-enums": "^2.0.0",
|
||||
"ant-design-vue": "^2.2.0",
|
||||
"@fesjs/fes-design": "^0.1.10",
|
||||
"vue": "^3.2.6"
|
||||
},
|
||||
"private": true
|
||||
|
||||
@ -13,7 +13,7 @@ export const beforeRender = {
|
||||
setRole('admin');
|
||||
// 初始化应用的全局状态，可以通过 useModel('@@initialState') 获取，具体用法看@/components/UserCenter 文件
|
||||
resolve({
|
||||
userName: 'harrywan'
|
||||
userName: '李雷'
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
<template>
|
||||
<div class="page-loading">
|
||||
<Spin size="large" />
|
||||
<f-spin size="large" stroke="#5384ff" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Spin from 'ant-design-vue/lib/spin';
|
||||
import 'ant-design-vue/lib/spin/style/css';
|
||||
import { FSpin } from '@fesjs/fes-design';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Spin
|
||||
FSpin
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,35 +1,13 @@
|
||||
<template>
|
||||
<div style="padding: 32px;">
|
||||
<h3>fes & 拉夫德鲁 </h3>
|
||||
<h4>数据字典</h4>
|
||||
<div v-for="item in enumsGet('status')" :key="item.key">{{item.value}}：{{item.key}}</div>
|
||||
|
||||
<section>
|
||||
计数器
|
||||
<button @click="increment">click me：{{count}}</button>
|
||||
</section>
|
||||
hello world
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue';
|
||||
import {
|
||||
enums
|
||||
} from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const fes = ref('fes upgrade to vue3');
|
||||
const count = ref(0);
|
||||
const increment = () => {
|
||||
count.value++;
|
||||
};
|
||||
|
||||
return {
|
||||
fes,
|
||||
increment,
|
||||
count,
|
||||
enumsGet: enums.get
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
||||
import { watch } from 'vue';
|
||||
|
||||
const cache = new WeakMap();
|
||||
const setDispaly = (el, access) => {
|
||||
const setDisplay = (el, access) => {
|
||||
if (access.value) {
|
||||
el.style.display = el._display;
|
||||
} else {
|
||||
@ -15,9 +15,9 @@ export default function createDirective(useAccess) {
|
||||
ctx.watch = (path) => {
|
||||
el._display = el._display || el.style.display;
|
||||
const access = useAccess(path);
|
||||
setDispaly(el, access);
|
||||
setDisplay(el, access);
|
||||
return watch(access, () => {
|
||||
setDispaly(el, access);
|
||||
setDisplay(el, access);
|
||||
});
|
||||
};
|
||||
cache.set(el, ctx);
|
||||
|
||||
@ -30,9 +30,8 @@
|
||||
"@fesjs/utils": "^2.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ant-design/icons-vue": "^6.0.0",
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"ant-design-vue": "^2.2.0",
|
||||
"@fesjs/fes-design": "^0.1.10",
|
||||
"vue": "^3.0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -47,7 +47,7 @@ export default (api) => {
|
||||
const icons = helper.getIconsFromMenu(userConfig.menus);
|
||||
|
||||
const iconsString = icons.map(
|
||||
iconName => `import ${iconName} from '@ant-design/icons-vue/es/icons/${iconName}'`
|
||||
iconName => `import { ${iconName} } from '@fesjs/fes-design/icon'`
|
||||
);
|
||||
api.writeTmpFile({
|
||||
path: join(namespace, 'icons.js'),
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import * as allIcons from '@ant-design/icons-vue';
|
||||
|
||||
const matchName = (config, name) => {
|
||||
let res = {};
|
||||
@ -21,7 +20,7 @@ const matchName = (config, name) => {
|
||||
export const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => {
|
||||
dep += 1;
|
||||
if (dep > 3) {
|
||||
throw new Error('[plugin-layout]: menu层级不能超出三层！');
|
||||
console.warn('[plugin-layout]: 菜单层级最好不要超出三层！');
|
||||
}
|
||||
const arr = [];
|
||||
if (Array.isArray(menuConfig) && Array.isArray(routeConfig)) {
|
||||
@ -41,17 +40,10 @@ export const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => {
|
||||
const icon = menu.icon;
|
||||
const urlReg = /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
|
||||
if (typeof icon === 'string' && !((urlReg.test(icon) || icon.includes('.svg')))) {
|
||||
if (!allIcons[icon]) {
|
||||
menu.icon = {
|
||||
type: 'icon',
|
||||
name: `${icon.replace(icon[0], icon[0].toUpperCase())}Outlined`
|
||||
};
|
||||
} else {
|
||||
menu.icon = {
|
||||
type: 'icon',
|
||||
name: icon
|
||||
};
|
||||
}
|
||||
menu.icon = {
|
||||
type: 'icon',
|
||||
name: icon
|
||||
};
|
||||
}
|
||||
}
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 50 KiB |
@ -1,4 +1,4 @@
|
||||
import { unref, computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
// eslint-disable-next-line
|
||||
import { useAccess } from '../../plugin-access/core';
|
||||
|
||||
@ -9,32 +9,26 @@ if (!useAccess) {
|
||||
}
|
||||
|
||||
export const hasAccessByMenuItem = (item) => {
|
||||
let res;
|
||||
if (item.path && (!item.children || item.children.length === 0)) {
|
||||
res = useAccess(item.path);
|
||||
} else if (item.children && item.children.length > 0) {
|
||||
res = computed(() => item.children.some((child) => {
|
||||
const hasChild = item.children && item.children.length;
|
||||
if (item.path && !hasChild) {
|
||||
return useAccess(item.path);
|
||||
}
|
||||
if (hasChild) {
|
||||
return computed(() => item.children.some((child) => {
|
||||
const rst = hasAccessByMenuItem(child);
|
||||
return rst && rst.value;
|
||||
}));
|
||||
}
|
||||
return res;
|
||||
return ref(true);
|
||||
};
|
||||
|
||||
const _addAccessTag = (arr) => {
|
||||
if (Array.isArray(arr)) {
|
||||
arr.forEach((item) => {
|
||||
item.access = hasAccessByMenuItem(item);
|
||||
if (item.children && item.children.length > 0) {
|
||||
_addAccessTag(item.children);
|
||||
}
|
||||
});
|
||||
export const transform = menus => menus.map((menu) => {
|
||||
const hasAccess = hasAccessByMenuItem(menu);
|
||||
if (!hasAccess.value) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const transform = (menus) => {
|
||||
const originData = unref(menus);
|
||||
_addAccessTag(originData);
|
||||
|
||||
return originData;
|
||||
};
|
||||
if (menu.children) {
|
||||
menu.children = transform(menu.children);
|
||||
}
|
||||
return menu;
|
||||
}).filter(Boolean);
|
||||
|
||||
@ -1,33 +1,25 @@
|
||||
import { unref, computed } from 'vue';
|
||||
import { plugin } from '@@/core/coreExports';
|
||||
|
||||
|
||||
export const transTitle = (name) => {
|
||||
if (!/^\$\S+$/.test(name)) {
|
||||
return name;
|
||||
}
|
||||
const sharedLocale = plugin.getShared('locale');
|
||||
if (sharedLocale) {
|
||||
const { t } = sharedLocale.useI18n();
|
||||
return t(name);
|
||||
return t(name.slice(1));
|
||||
}
|
||||
return name;
|
||||
};
|
||||
|
||||
|
||||
const _transform = (arr) => {
|
||||
if (Array.isArray(arr)) {
|
||||
arr.forEach((item) => {
|
||||
if (item.title) {
|
||||
item._title = item.title;
|
||||
item.title = computed(() => transTitle(item._title));
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
_transform(item.children);
|
||||
}
|
||||
});
|
||||
export const transform = menus => menus.map((menu) => {
|
||||
const copy = {
|
||||
...menu,
|
||||
label: transTitle(menu.label)
|
||||
};
|
||||
if (menu.children) {
|
||||
copy.children = transform(menu.children);
|
||||
}
|
||||
};
|
||||
|
||||
export const transform = (menus) => {
|
||||
const originData = unref(menus);
|
||||
_transform(originData);
|
||||
return originData;
|
||||
};
|
||||
return copy;
|
||||
});
|
||||
|
||||
@ -2,11 +2,10 @@ import { reactive, defineComponent } from "vue";
|
||||
import { plugin, ApplyPluginsType } from "@@/core/coreExports";
|
||||
import BaseLayout from "./views/BaseLayout.vue";
|
||||
|
||||
const userConfig = reactive({{{REPLACE_USER_CONFIG}}});
|
||||
|
||||
const Layout = defineComponent({
|
||||
name: 'Layout',
|
||||
setup(){
|
||||
const userConfig = reactive({{{REPLACE_USER_CONFIG}}});
|
||||
const runtimeConfig = plugin.applyPlugins({
|
||||
key: "layout",
|
||||
type: ApplyPluginsType.modify,
|
||||
|
||||
@ -1,9 +1,282 @@
|
||||
<template>
|
||||
<a-result status="403" title="403" sub-title="对不起，您没有权限访问此页面。">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="click">上一页</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
<div class="page">
|
||||
<svg width="251" height="294">
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<path
|
||||
d="M0 129.023v-2.084C0 58.364 55.591 2.774 124.165 2.774h2.085c68.574 0 124.165 55.59 124.165 124.165v2.084c0 68.575-55.59 124.166-124.165 124.166h-2.085C55.591 253.189 0 197.598 0 129.023"
|
||||
fill="#E4EBF7"
|
||||
></path>
|
||||
<path
|
||||
d="M41.417 132.92a8.231 8.231 0 1 1-16.38-1.65 8.231 8.231 0 0 1 16.38 1.65"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M38.652 136.36l10.425 5.91M49.989 148.505l-12.58 10.73"
|
||||
stroke="#FFF"
|
||||
stroke-width="2"
|
||||
></path>
|
||||
<path
|
||||
d="M41.536 161.28a5.636 5.636 0 1 1-11.216-1.13 5.636 5.636 0 0 1 11.216 1.13M59.154 145.261a5.677 5.677 0 1 1-11.297-1.138 5.677 5.677 0 0 1 11.297 1.138M100.36 29.516l29.66-.013a4.562 4.562 0 1 0-.004-9.126l-29.66.013a4.563 4.563 0 0 0 .005 9.126M111.705 47.754l29.659-.013a4.563 4.563 0 1 0-.004-9.126l-29.66.013a4.563 4.563 0 1 0 .005 9.126"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M114.066 29.503V29.5l15.698-.007a4.563 4.563 0 1 0 .004 9.126l-15.698.007v-.002a4.562 4.562 0 0 0-.004-9.122M185.405 137.723c-.55 5.455-5.418 9.432-10.873 8.882-5.456-.55-9.432-5.418-8.882-10.873.55-5.455 5.418-9.432 10.873-8.882 5.455.55 9.432 5.418 8.882 10.873"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M180.17 143.772l12.572 7.129M193.841 158.42L178.67 171.36"
|
||||
stroke="#FFF"
|
||||
stroke-width="2"
|
||||
></path>
|
||||
<path
|
||||
d="M185.55 171.926a6.798 6.798 0 1 1-13.528-1.363 6.798 6.798 0 0 1 13.527 1.363M204.12 155.285a6.848 6.848 0 1 1-13.627-1.375 6.848 6.848 0 0 1 13.626 1.375"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M152.988 194.074a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 0 1 4.42 0zM225.931 118.217a2.21 2.21 0 1 1-4.421 0 2.21 2.21 0 0 1 4.421 0zM217.09 153.051a2.21 2.21 0 1 1-4.421 0 2.21 2.21 0 0 1 4.42 0zM177.84 109.842a2.21 2.21 0 1 1-4.422 0 2.21 2.21 0 0 1 4.421 0zM196.114 94.454a2.21 2.21 0 1 1-4.421 0 2.21 2.21 0 0 1 4.421 0zM202.844 182.523a2.21 2.21 0 1 1-4.42 0 2.21 2.21 0 0 1 4.42 0z"
|
||||
stroke="#FFF"
|
||||
stroke-width="2"
|
||||
></path>
|
||||
<path
|
||||
stroke="#FFF"
|
||||
stroke-width="2"
|
||||
d="M215.125 155.262l-1.902 20.075-10.87 5.958M174.601 176.636l-6.322 9.761H156.98l-4.484 6.449M175.874 127.28V111.56M221.51 119.404l-12.77 7.859-15.228-7.86V96.668"
|
||||
></path>
|
||||
<path
|
||||
d="M180.68 29.32C180.68 13.128 193.806 0 210 0c16.193 0 29.32 13.127 29.32 29.32 0 16.194-13.127 29.322-29.32 29.322-16.193 0-29.32-13.128-29.32-29.321"
|
||||
fill="#A26EF4"
|
||||
></path>
|
||||
<path
|
||||
d="M221.45 41.706l-21.563-.125a1.744 1.744 0 0 1-1.734-1.754l.071-12.23a1.744 1.744 0 0 1 1.754-1.734l21.562.125c.964.006 1.74.791 1.735 1.755l-.071 12.229a1.744 1.744 0 0 1-1.754 1.734"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M215.106 29.192c-.015 2.577-2.049 4.654-4.543 4.64-2.494-.014-4.504-2.115-4.489-4.693l.04-6.925c.016-2.577 2.05-4.654 4.543-4.64 2.494.015 4.504 2.116 4.49 4.693l-.04 6.925zm-4.53-14.074a6.877 6.877 0 0 0-6.916 6.837l-.043 7.368a6.877 6.877 0 0 0 13.754.08l.042-7.368a6.878 6.878 0 0 0-6.837-6.917zM167.566 68.367h-3.93a4.73 4.73 0 0 1-4.717-4.717 4.73 4.73 0 0 1 4.717-4.717h3.93a4.73 4.73 0 0 1 4.717 4.717 4.73 4.73 0 0 1-4.717 4.717"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M168.214 248.838a6.611 6.611 0 0 1-6.61-6.611v-66.108a6.611 6.611 0 0 1 13.221 0v66.108a6.611 6.611 0 0 1-6.61 6.61"
|
||||
fill="#5BA02E"
|
||||
></path>
|
||||
<path
|
||||
d="M176.147 248.176a6.611 6.611 0 0 1-6.61-6.61v-33.054a6.611 6.611 0 1 1 13.221 0v33.053a6.611 6.611 0 0 1-6.61 6.611"
|
||||
fill="#92C110"
|
||||
></path>
|
||||
<path
|
||||
d="M185.994 293.89h-27.376a3.17 3.17 0 0 1-3.17-3.17v-45.887a3.17 3.17 0 0 1 3.17-3.17h27.376a3.17 3.17 0 0 1 3.17 3.17v45.886a3.17 3.17 0 0 1-3.17 3.17"
|
||||
fill="#F2D7AD"
|
||||
></path>
|
||||
<path
|
||||
d="M81.972 147.673s6.377-.927 17.566-1.28c11.729-.371 17.57 1.086 17.57 1.086s3.697-3.855.968-8.424c1.278-12.077 5.982-32.827.335-48.273-1.116-1.339-3.743-1.512-7.536-.62-1.337.315-7.147-.149-7.983-.1l-15.311-.347s-3.487-.17-8.035-.508c-1.512-.113-4.227-1.683-5.458-.338-.406.443-2.425 5.669-1.97 16.077l8.635 35.642s-3.141 3.61 1.219 7.085"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M75.768 73.325l-.9-6.397 11.982-6.52s7.302-.118 8.038 1.205c.737 1.324-5.616.993-5.616.993s-1.836 1.388-2.615 2.5c-1.654 2.363-.986 6.471-8.318 5.986-1.708.284-2.57 2.233-2.57 2.233"
|
||||
fill="#FFC6A0"
|
||||
></path>
|
||||
<path
|
||||
d="M52.44 77.672s14.217 9.406 24.973 14.444c1.061.497-2.094 16.183-11.892 11.811-7.436-3.318-20.162-8.44-21.482-14.496-.71-3.258 2.543-7.643 8.401-11.76M141.862 80.113s-6.693 2.999-13.844 6.876c-3.894 2.11-10.137 4.704-12.33 7.988-6.224 9.314 3.536 11.22 12.947 7.503 6.71-2.651 28.999-12.127 13.227-22.367"
|
||||
fill="#FFB594"
|
||||
></path>
|
||||
<path
|
||||
d="M76.166 66.36l3.06 3.881s-2.783 2.67-6.31 5.747c-7.103 6.195-12.803 14.296-15.995 16.44-3.966 2.662-9.754 3.314-12.177-.118-3.553-5.032.464-14.628 31.422-25.95"
|
||||
fill="#FFC6A0"
|
||||
></path>
|
||||
<path
|
||||
d="M64.674 85.116s-2.34 8.413-8.912 14.447c.652.548 18.586 10.51 22.144 10.056 5.238-.669 6.417-18.968 1.145-20.531-.702-.208-5.901-1.286-8.853-2.167-.87-.26-1.611-1.71-3.545-.936l-1.98-.869zM128.362 85.826s5.318 1.956 7.325 13.734c-.546.274-17.55 12.35-21.829 7.805-6.534-6.94-.766-17.393 4.275-18.61 4.646-1.121 5.03-1.37 10.23-2.929"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M78.18 94.656s.911 7.41-4.914 13.078"
|
||||
stroke="#E4EBF7"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M87.397 94.68s3.124 2.572 10.263 2.572c7.14 0 9.074-3.437 9.074-3.437"
|
||||
stroke="#E4EBF7"
|
||||
stroke-width=".932"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M117.184 68.639l-6.781-6.177s-5.355-4.314-9.223-.893c-3.867 3.422 4.463 2.083 5.653 4.165 1.19 2.082.848 1.143-2.083.446-5.603-1.331-2.082.893 2.975 5.355 2.091 1.845 6.992.955 6.992.955l2.467-3.851z"
|
||||
fill="#FFC6A0"
|
||||
></path>
|
||||
<path
|
||||
d="M105.282 91.315l-.297-10.937-15.918-.027-.53 10.45c-.026.403.17.788.515.999 2.049 1.251 9.387 5.093 15.799.424.287-.21.443-.554.431-.91"
|
||||
fill="#FFB594"
|
||||
></path>
|
||||
<path
|
||||
d="M107.573 74.24c.817-1.147.982-9.118 1.015-11.928a1.046 1.046 0 0 0-.965-1.055l-4.62-.365c-7.71-1.044-17.071.624-18.253 6.346-5.482 5.813-.421 13.244-.421 13.244s1.963 3.566 4.305 6.791c.756 1.041.398-3.731 3.04-5.929 5.524-4.594 15.899-7.103 15.899-7.103"
|
||||
fill="#5C2552"
|
||||
></path>
|
||||
<path
|
||||
d="M88.426 83.206s2.685 6.202 11.602 6.522c7.82.28 8.973-7.008 7.434-17.505l-.909-5.483c-6.118-2.897-15.478.54-15.478.54s-.576 2.044-.19 5.504c-2.276 2.066-1.824 5.618-1.824 5.618s-.905-1.922-1.98-2.321c-.86-.32-1.897.089-2.322 1.98-1.04 4.632 3.667 5.145 3.667 5.145"
|
||||
fill="#FFC6A0"
|
||||
></path>
|
||||
<path
|
||||
stroke="#DB836E"
|
||||
stroke-width="1.145"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M100.843 77.099l1.701-.928-1.015-4.324.674-1.406"
|
||||
></path>
|
||||
<path
|
||||
d="M105.546 74.092c-.022.713-.452 1.279-.96 1.263-.51-.016-.904-.607-.882-1.32.021-.713.452-1.278.96-1.263.51.016.904.607.882 1.32M97.592 74.349c-.022.713-.452 1.278-.961 1.263-.509-.016-.904-.607-.882-1.32.022-.713.452-1.279.961-1.263.51.016.904.606.882 1.32"
|
||||
fill="#552950"
|
||||
></path>
|
||||
<path
|
||||
d="M91.132 86.786s5.269 4.957 12.679 2.327"
|
||||
stroke="#DB836E"
|
||||
stroke-width="1.145"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M99.776 81.903s-3.592.232-1.44-2.79c1.59-1.496 4.897-.46 4.897-.46s1.156 3.906-3.457 3.25"
|
||||
fill="#DB836E"
|
||||
></path>
|
||||
<path
|
||||
d="M102.88 70.6s2.483.84 3.402.715M93.883 71.975s2.492-1.144 4.778-1.073"
|
||||
stroke="#5C2552"
|
||||
stroke-width="1.526"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M86.32 77.374s.961.879 1.458 2.106c-.377.48-1.033 1.152-.236 1.809M99.337 83.719s1.911.151 2.509-.254"
|
||||
stroke="#DB836E"
|
||||
stroke-width="1.145"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M87.782 115.821l15.73-3.012M100.165 115.821l10.04-2.008"
|
||||
stroke="#E4EBF7"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M66.508 86.763s-1.598 8.83-6.697 14.078"
|
||||
stroke="#E4EBF7"
|
||||
stroke-width="1.114"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M128.31 87.934s3.013 4.121 4.06 11.785"
|
||||
stroke="#E4EBF7"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M64.09 84.816s-6.03 9.912-13.607 9.903"
|
||||
stroke="#DB836E"
|
||||
stroke-width=".795"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M112.366 65.909l-.142 5.32s5.993 4.472 11.945 9.202c4.482 3.562 8.888 7.455 10.985 8.662 4.804 2.766 8.9 3.355 11.076 1.808 4.071-2.894 4.373-9.878-8.136-15.263-4.271-1.838-16.144-6.36-25.728-9.73"
|
||||
fill="#FFC6A0"
|
||||
></path>
|
||||
<path
|
||||
d="M130.532 85.488s4.588 5.757 11.619 6.214"
|
||||
stroke="#DB836E"
|
||||
stroke-width=".75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M121.708 105.73s-.393 8.564-1.34 13.612"
|
||||
stroke="#E4EBF7"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M115.784 161.512s-3.57-1.488-2.678-7.14"
|
||||
stroke="#648BD8"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M101.52 290.246s4.326 2.057 7.408 1.03c2.842-.948 4.564.673 7.132 1.186 2.57.514 6.925 1.108 11.772-1.269-.104-5.551-6.939-4.01-12.048-6.763-2.582-1.39-3.812-4.757-3.625-8.863h-9.471s-1.402 10.596-1.169 14.68"
|
||||
fill="#CBD1D1"
|
||||
></path>
|
||||
<path
|
||||
d="M101.496 290.073s2.447 1.281 6.809.658c3.081-.44 3.74.485 7.479 1.039 3.739.554 10.802-.07 11.91-.9.415 1.108-.347 2.077-.347 2.077s-1.523.608-4.847.831c-2.045.137-5.843.293-7.663-.507-1.8-1.385-5.286-1.917-5.77-.243-3.947.958-7.41-.288-7.41-.288l-.16-2.667z"
|
||||
fill="#2B0849"
|
||||
></path>
|
||||
<path
|
||||
d="M108.824 276.19h3.116s-.103 6.751 4.57 8.62c-4.673.624-8.62-2.32-7.686-8.62"
|
||||
fill="#A4AABA"
|
||||
></path>
|
||||
<path
|
||||
d="M57.65 272.52s-2.122 7.47-4.518 12.396c-1.811 3.724-4.255 7.548 5.505 7.548 6.698 0 9.02-.483 7.479-6.648-1.541-6.164.268-13.296.268-13.296H57.65z"
|
||||
fill="#CBD1D1"
|
||||
></path>
|
||||
<path
|
||||
d="M51.54 290.04s2.111 1.178 6.682 1.178c6.128 0 8.31-1.662 8.31-1.662s.605 1.122-.624 2.18c-1 .862-3.624 1.603-7.444 1.559-4.177-.049-5.876-.57-6.786-1.177-.831-.554-.692-1.593-.138-2.078"
|
||||
fill="#2B0849"
|
||||
></path>
|
||||
<path
|
||||
d="M58.533 274.438s.034 1.529-.315 2.95c-.352 1.431-1.087 3.127-1.139 4.17-.058 1.16 4.57 1.592 5.194.035.623-1.559 1.303-6.475 1.927-7.306.622-.831-4.94-2.135-5.667.15"
|
||||
fill="#A4AABA"
|
||||
></path>
|
||||
<path
|
||||
d="M100.885 277.015l13.306.092s1.291-54.228 1.843-64.056c.552-9.828 3.756-43.13.997-62.788l-12.48-.64-22.725.776s-.433 3.944-1.19 9.921c-.062.493-.677.838-.744 1.358-.075.582.42 1.347.318 1.956-2.35 14.003-6.343 32.926-8.697 46.425-.116.663-1.227 1.004-1.45 2.677-.04.3.21 1.516.112 1.785-6.836 18.643-10.89 47.584-14.2 61.551l14.528-.014s2.185-8.524 4.008-16.878c2.796-12.817 22.987-84.553 22.987-84.553l3-.517 1.037 46.1s-.223 1.228.334 2.008c.558.782-.556 1.117-.39 2.233l.39 1.784s-.446 7.14-.892 11.826c-.446 4.685-.092 38.954-.092 38.954"
|
||||
fill="#7BB2F9"
|
||||
></path>
|
||||
<path
|
||||
d="M77.438 220.434c1.146.094 4.016-2.008 6.916-4.91M107.55 223.931s2.758-1.103 6.069-3.862"
|
||||
stroke="#648BD8"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M108.459 220.905s2.759-1.104 6.07-3.863"
|
||||
stroke="#648BD8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M76.099 223.557s2.608-.587 6.47-3.346M87.33 150.82c-.27 3.088.297 8.478-4.315 9.073M104.829 149.075s.11 13.936-1.286 14.983c-2.207 1.655-2.975 1.934-2.975 1.934M101.014 149.63s.035 12.81-1.19 24.245M94.93 174.965s7.174-1.655 9.38-1.655M75.671 204.754c-.316 1.55-.64 3.067-.973 4.535 0 0-1.45 1.822-1.003 3.756.446 1.934-.943 2.034-4.96 15.273-1.686 5.559-4.464 18.49-6.313 27.447-.078.38-4.018 18.06-4.093 18.423M77.043 196.743a313.269 313.269 0 0 1-.877 4.729M83.908 151.414l-1.19 10.413s-1.091.148-.496 2.23c.111 1.34-2.66 15.692-5.153 30.267M57.58 272.94h13.238"
|
||||
stroke="#648BD8"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M117.377 147.423s-16.955-3.087-35.7.199c.157 2.501-.002 4.128-.002 4.128s14.607-2.802 35.476-.31c.251-2.342.226-4.017.226-4.017"
|
||||
fill="#192064"
|
||||
></path>
|
||||
<path
|
||||
d="M107.511 150.353l.004-4.885a.807.807 0 0 0-.774-.81c-2.428-.092-5.04-.108-7.795-.014a.814.814 0 0 0-.784.81l-.003 4.88c0 .456.371.82.827.808a140.76 140.76 0 0 1 7.688.017.81.81 0 0 0 .837-.806"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M106.402 149.426l.002-3.06a.64.64 0 0 0-.616-.643 94.135 94.135 0 0 0-5.834-.009.647.647 0 0 0-.626.643l-.001 3.056c0 .36.291.648.651.64 1.78-.04 3.708-.041 5.762.012.36.009.662-.279.662-.64"
|
||||
fill="#192064"
|
||||
></path>
|
||||
<path
|
||||
d="M101.485 273.933h12.272M102.652 269.075c.006 3.368.04 5.759.11 6.47M102.667 263.125c-.009 1.53-.015 2.98-.016 4.313M102.204 174.024l.893 44.402s.669 1.561-.224 2.677c-.892 1.116 2.455.67.893 2.231-1.562 1.562.893 1.116 0 3.347-.592 1.48-.988 20.987-1.09 34.956"
|
||||
stroke="#648BD8"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="page-title">对不起，您没有权限访问此页面。</div>
|
||||
<f-button type="primary" @click="click">上一页</f-button>
|
||||
</div>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
@ -12,15 +285,11 @@
|
||||
</config>
|
||||
<script>
|
||||
import { useRouter } from '@@/core/coreExports';
|
||||
import Result from 'ant-design-vue/lib/result';
|
||||
import 'ant-design-vue/lib/result/style/css';
|
||||
import Button from 'ant-design-vue/lib/button';
|
||||
import 'ant-design-vue/lib/button/style/css';
|
||||
import { FButton } from '@fesjs/fes-design';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Result.name]: Result,
|
||||
[Button.name]: Button
|
||||
FButton
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
@ -33,3 +302,15 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.page {
|
||||
height: 100%;
|
||||
padding-top: 60px;
|
||||
text-align: center;
|
||||
.page-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,292 @@
|
||||
<template>
|
||||
<a-result status="404" title="404" sub-title="对不起，您访问的页面不存在。">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="click">上一页</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
<div class="page">
|
||||
<svg width="252" height="294">
|
||||
<defs><path d="M0 .387h251.772v251.772H0z"></path></defs>
|
||||
<g fill="none" fill-rule="evenodd">
|
||||
<g transform="translate(0 .012)">
|
||||
<mask fill="#fff"></mask>
|
||||
<path
|
||||
d="M0 127.32v-2.095C0 56.279 55.892.387 124.838.387h2.096c68.946 0 124.838 55.892 124.838 124.838v2.096c0 68.946-55.892 124.838-124.838 124.838h-2.096C55.892 252.16 0 196.267 0 127.321"
|
||||
fill="#E4EBF7"
|
||||
mask="url(#b)"
|
||||
></path>
|
||||
</g>
|
||||
<path
|
||||
d="M39.755 130.84a8.276 8.276 0 1 1-16.468-1.66 8.276 8.276 0 0 1 16.468 1.66"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M36.975 134.297l10.482 5.943M48.373 146.508l-12.648 10.788"
|
||||
stroke="#FFF"
|
||||
stroke-width="2"
|
||||
></path>
|
||||
<path
|
||||
d="M39.875 159.352a5.667 5.667 0 1 1-11.277-1.136 5.667 5.667 0 0 1 11.277 1.136M57.588 143.247a5.708 5.708 0 1 1-11.358-1.145 5.708 5.708 0 0 1 11.358 1.145M99.018 26.875l29.82-.014a4.587 4.587 0 1 0-.003-9.175l-29.82.013a4.587 4.587 0 1 0 .003 9.176M110.424 45.211l29.82-.013a4.588 4.588 0 0 0-.004-9.175l-29.82.013a4.587 4.587 0 1 0 .004 9.175"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M112.798 26.861v-.002l15.784-.006a4.588 4.588 0 1 0 .003 9.175l-15.783.007v-.002a4.586 4.586 0 0 0-.004-9.172M184.523 135.668c-.553 5.485-5.447 9.483-10.931 8.93-5.485-.553-9.483-5.448-8.93-10.932.552-5.485 5.447-9.483 10.932-8.93 5.485.553 9.483 5.447 8.93 10.932"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M179.26 141.75l12.64 7.167M193.006 156.477l-15.255 13.011"
|
||||
stroke="#FFF"
|
||||
stroke-width="2"
|
||||
></path>
|
||||
<path
|
||||
d="M184.668 170.057a6.835 6.835 0 1 1-13.6-1.372 6.835 6.835 0 0 1 13.6 1.372M203.34 153.325a6.885 6.885 0 1 1-13.7-1.382 6.885 6.885 0 0 1 13.7 1.382"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M151.931 192.324a2.222 2.222 0 1 1-4.444 0 2.222 2.222 0 0 1 4.444 0zM225.27 116.056a2.222 2.222 0 1 1-4.445 0 2.222 2.222 0 0 1 4.444 0zM216.38 151.08a2.223 2.223 0 1 1-4.446-.001 2.223 2.223 0 0 1 4.446 0zM176.917 107.636a2.223 2.223 0 1 1-4.445 0 2.223 2.223 0 0 1 4.445 0zM195.291 92.165a2.223 2.223 0 1 1-4.445 0 2.223 2.223 0 0 1 4.445 0zM202.058 180.711a2.223 2.223 0 1 1-4.446 0 2.223 2.223 0 0 1 4.446 0z"
|
||||
stroke="#FFF"
|
||||
stroke-width="2"
|
||||
></path>
|
||||
<path
|
||||
stroke="#FFF"
|
||||
stroke-width="2"
|
||||
d="M214.404 153.302l-1.912 20.184-10.928 5.99M173.661 174.792l-6.356 9.814h-11.36l-4.508 6.484M174.941 125.168v-15.804M220.824 117.25l-12.84 7.901-15.31-7.902V94.39"
|
||||
></path>
|
||||
<path
|
||||
d="M166.588 65.936h-3.951a4.756 4.756 0 0 1-4.743-4.742 4.756 4.756 0 0 1 4.743-4.743h3.951a4.756 4.756 0 0 1 4.743 4.743 4.756 4.756 0 0 1-4.743 4.742"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M174.823 30.03c0-16.281 13.198-29.48 29.48-29.48 16.28 0 29.48 13.199 29.48 29.48 0 16.28-13.2 29.48-29.48 29.48-16.282 0-29.48-13.2-29.48-29.48"
|
||||
fill="#1890FF"
|
||||
></path>
|
||||
<path
|
||||
d="M205.952 38.387c.5.5.785 1.142.785 1.928s-.286 1.465-.785 1.964c-.572.5-1.214.75-2 .75-.785 0-1.429-.285-1.929-.785-.572-.5-.82-1.143-.82-1.929s.248-1.428.82-1.928c.5-.5 1.144-.75 1.93-.75.785 0 1.462.25 1.999.75m4.285-19.463c1.428 1.249 2.143 2.963 2.143 5.142 0 1.712-.427 3.13-1.219 4.25-.067.096-.137.18-.218.265-.416.429-1.41 1.346-2.956 2.699a5.07 5.07 0 0 0-1.428 1.75 5.207 5.207 0 0 0-.536 2.357v.5h-4.107v-.5c0-1.357.215-2.536.714-3.5.464-.964 1.857-2.464 4.178-4.536l.43-.5c.643-.785.964-1.643.964-2.535 0-1.18-.358-2.108-1-2.785-.678-.68-1.643-1.001-2.858-1.001-1.536 0-2.642.464-3.357 1.43-.37.5-.621 1.135-.76 1.904a1.999 1.999 0 0 1-1.971 1.63h-.004c-1.277 0-2.257-1.183-1.98-2.43.337-1.518 1.02-2.78 2.073-3.784 1.536-1.5 3.607-2.25 6.25-2.25 2.32 0 4.214.607 5.642 1.894"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M52.04 76.131s21.81 5.36 27.307 15.945c5.575 10.74-6.352 9.26-15.73 4.935-10.86-5.008-24.7-11.822-11.577-20.88"
|
||||
fill="#FFB594"
|
||||
></path>
|
||||
<path
|
||||
d="M90.483 67.504l-.449 2.893c-.753.49-4.748-2.663-4.748-2.663l-1.645.748-1.346-5.684s6.815-4.589 8.917-5.018c2.452-.501 9.884.94 10.7 2.278 0 0 1.32.486-2.227.69-3.548.203-5.043.447-6.79 3.132-1.747 2.686-2.412 3.624-2.412 3.624"
|
||||
fill="#FFC6A0"
|
||||
></path>
|
||||
<path
|
||||
d="M128.055 111.367c-2.627-7.724-6.15-13.18-8.917-15.478-3.5-2.906-9.34-2.225-11.366-4.187-1.27-1.231-3.215-1.197-3.215-1.197s-14.98-3.158-16.828-3.479c-2.37-.41-2.124-.714-6.054-1.405-1.57-1.907-2.917-1.122-2.917-1.122l-7.11-1.383c-.853-1.472-2.423-1.023-2.423-1.023l-2.468-.897c-1.645 9.976-7.74 13.796-7.74 13.796 1.795 1.122 15.703 8.3 15.703 8.3l5.107 37.11s-3.321 5.694 1.346 9.109c0 0 19.883-3.743 34.921-.329 0 0 3.047-2.546.972-8.806.523-3.01 1.394-8.263 1.736-11.622.385.772 2.019 1.918 3.14 3.477 0 0 9.407-7.365 11.052-14.012-.832-.723-1.598-1.585-2.267-2.453-.567-.736-.358-2.056-.765-2.717-.669-1.084-1.804-1.378-1.907-1.682"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M101.09 289.998s4.295 2.041 7.354 1.021c2.821-.94 4.53.668 7.08 1.178 2.55.51 6.874 1.1 11.686-1.26-.103-5.51-6.889-3.98-11.96-6.713-2.563-1.38-3.784-4.722-3.598-8.799h-9.402s-1.392 10.52-1.16 14.573"
|
||||
fill="#CBD1D1"
|
||||
></path>
|
||||
<path
|
||||
d="M101.067 289.826s2.428 1.271 6.759.653c3.058-.437 3.712.481 7.423 1.031 3.712.55 10.724-.069 11.823-.894.413 1.1-.343 2.063-.343 2.063s-1.512.603-4.812.824c-2.03.136-5.8.291-7.607-.503-1.787-1.375-5.247-1.903-5.728-.241-3.918.95-7.355-.286-7.355-.286l-.16-2.647z"
|
||||
fill="#2B0849"
|
||||
></path>
|
||||
<path
|
||||
d="M108.341 276.044h3.094s-.103 6.702 4.536 8.558c-4.64.618-8.558-2.303-7.63-8.558"
|
||||
fill="#A4AABA"
|
||||
></path>
|
||||
<path
|
||||
d="M57.542 272.401s-2.107 7.416-4.485 12.306c-1.798 3.695-4.225 7.492 5.465 7.492 6.648 0 8.953-.48 7.423-6.599-1.53-6.12.266-13.199.266-13.199h-8.669z"
|
||||
fill="#CBD1D1"
|
||||
></path>
|
||||
<path
|
||||
d="M51.476 289.793s2.097 1.169 6.633 1.169c6.083 0 8.249-1.65 8.249-1.65s.602 1.114-.619 2.165c-.993.855-3.597 1.591-7.39 1.546-4.145-.048-5.832-.566-6.736-1.168-.825-.55-.687-1.58-.137-2.062"
|
||||
fill="#2B0849"
|
||||
></path>
|
||||
<path
|
||||
d="M58.419 274.304s.033 1.519-.314 2.93c-.349 1.42-1.078 3.104-1.13 4.139-.058 1.151 4.537 1.58 5.155.034.62-1.547 1.294-6.427 1.913-7.252.619-.825-4.903-2.119-5.624.15"
|
||||
fill="#A4AABA"
|
||||
></path>
|
||||
<path
|
||||
d="M99.66 278.514l13.378.092s1.298-54.52 1.853-64.403c.554-9.882 3.776-43.364 1.002-63.128l-12.547-.644-22.849.78s-.434 3.966-1.195 9.976c-.063.496-.682.843-.749 1.365-.075.585.423 1.354.32 1.966-2.364 14.08-6.377 33.104-8.744 46.677-.116.666-1.234 1.009-1.458 2.691-.04.302.211 1.525.112 1.795-6.873 18.744-10.949 47.842-14.277 61.885l14.607-.014s2.197-8.57 4.03-16.97c2.811-12.886 23.111-85.01 23.111-85.01l3.016-.521 1.043 46.35s-.224 1.234.337 2.02c.56.785-.56 1.123-.392 2.244l.392 1.794s-.449 7.178-.898 11.89c-.448 4.71-.092 39.165-.092 39.165"
|
||||
fill="#7BB2F9"
|
||||
></path>
|
||||
<path
|
||||
d="M76.085 221.626c1.153.094 4.038-2.019 6.955-4.935M106.36 225.142s2.774-1.11 6.103-3.883"
|
||||
stroke="#648BD8"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M107.275 222.1s2.773-1.11 6.102-3.884"
|
||||
stroke="#648BD8"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M74.74 224.767s2.622-.591 6.505-3.365M86.03 151.634c-.27 3.106.3 8.525-4.336 9.123M103.625 149.88s.11 14.012-1.293 15.065c-2.219 1.664-2.99 1.944-2.99 1.944M99.79 150.438s.035 12.88-1.196 24.377M93.673 175.911s7.212-1.664 9.431-1.664M74.31 205.861a212.013 212.013 0 0 1-.979 4.56s-1.458 1.832-1.009 3.776c.449 1.944-.947 2.045-4.985 15.355-1.696 5.59-4.49 18.591-6.348 27.597l-.231 1.12M75.689 197.807a320.934 320.934 0 0 1-.882 4.754M82.591 152.233L81.395 162.7s-1.097.15-.5 2.244c.113 1.346-2.674 15.775-5.18 30.43M56.12 274.418h13.31"
|
||||
stroke="#648BD8"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M116.241 148.22s-17.047-3.104-35.893.2c.158 2.514-.003 4.15-.003 4.15s14.687-2.818 35.67-.312c.252-2.355.226-4.038.226-4.038"
|
||||
fill="#192064"
|
||||
></path>
|
||||
<path
|
||||
d="M106.322 151.165l.003-4.911a.81.81 0 0 0-.778-.815c-2.44-.091-5.066-.108-7.836-.014a.818.818 0 0 0-.789.815l-.003 4.906a.81.81 0 0 0 .831.813c2.385-.06 4.973-.064 7.73.017a.815.815 0 0 0 .842-.81"
|
||||
fill="#FFF"
|
||||
></path>
|
||||
<path
|
||||
d="M105.207 150.233l.002-3.076a.642.642 0 0 0-.619-.646 94.321 94.321 0 0 0-5.866-.01.65.65 0 0 0-.63.647v3.072a.64.64 0 0 0 .654.644 121.12 121.12 0 0 1 5.794.011c.362.01.665-.28.665-.642"
|
||||
fill="#192064"
|
||||
></path>
|
||||
<path
|
||||
d="M100.263 275.415h12.338M101.436 270.53c.006 3.387.042 5.79.111 6.506M101.451 264.548a915.75 915.75 0 0 0-.015 4.337M100.986 174.965l.898 44.642s.673 1.57-.225 2.692c-.897 1.122 2.468.673.898 2.243-1.57 1.57.897 1.122 0 3.365-.596 1.489-.994 21.1-1.096 35.146"
|
||||
stroke="#648BD8"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M46.876 83.427s-.516 6.045 7.223 5.552c11.2-.712 9.218-9.345 31.54-21.655-.786-2.708-2.447-4.744-2.447-4.744s-11.068 3.11-22.584 8.046c-6.766 2.9-13.395 6.352-13.732 12.801M104.46 91.057l.941-5.372-8.884-11.43-5.037 5.372-1.74 7.834a.321.321 0 0 0 .108.32c.965.8 6.5 5.013 14.347 3.544a.332.332 0 0 0 .264-.268"
|
||||
fill="#FFC6A0"
|
||||
></path>
|
||||
<path
|
||||
d="M93.942 79.387s-4.533-2.853-2.432-6.855c1.623-3.09 4.513 1.133 4.513 1.133s.52-3.642 3.121-3.642c.52-1.04 1.561-4.162 1.561-4.162s11.445 2.601 13.526 3.121c0 5.203-2.304 19.424-7.84 19.861-8.892.703-12.449-9.456-12.449-9.456"
|
||||
fill="#FFC6A0"
|
||||
></path>
|
||||
<path
|
||||
d="M113.874 73.446c2.601-2.081 3.47-9.722 3.47-9.722s-2.479-.49-6.64-2.05c-4.683-2.081-12.798-4.747-17.48.976-9.668 3.223-2.05 19.823-2.05 19.823l2.713-3.021s-3.935-3.287-2.08-6.243c2.17-3.462 3.92 1.073 3.92 1.073s.637-2.387 3.581-3.342c.355-.71 1.036-2.674 1.432-3.85a1.073 1.073 0 0 1 1.263-.704c2.4.558 8.677 2.019 11.356 2.662.522.125.871.615.82 1.15l-.305 3.248z"
|
||||
fill="#520038"
|
||||
></path>
|
||||
<path
|
||||
d="M104.977 76.064c-.103.61-.582 1.038-1.07.956-.489-.083-.801-.644-.698-1.254.103-.61.582-1.038 1.07-.956.488.082.8.644.698 1.254M112.132 77.694c-.103.61-.582 1.038-1.07.956-.488-.083-.8-.644-.698-1.254.103-.61.582-1.038 1.07-.956.488.082.8.643.698 1.254"
|
||||
fill="#552950"
|
||||
></path>
|
||||
<path
|
||||
stroke="#DB836E"
|
||||
stroke-width="1.118"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M110.13 74.84l-.896 1.61-.298 4.357h-2.228"
|
||||
></path>
|
||||
<path
|
||||
d="M110.846 74.481s1.79-.716 2.506.537"
|
||||
stroke="#5C2552"
|
||||
stroke-width="1.118"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M92.386 74.282s.477-1.114 1.113-.716c.637.398 1.274 1.433.558 1.99-.717.556.159 1.67.159 1.67"
|
||||
stroke="#DB836E"
|
||||
stroke-width="1.118"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M103.287 72.93s1.83 1.113 4.137.954"
|
||||
stroke="#5C2552"
|
||||
stroke-width="1.118"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M103.685 81.762s2.227 1.193 4.376 1.193M104.64 84.308s.954.398 1.511.318M94.693 81.205s2.308 7.4 10.424 7.639"
|
||||
stroke="#DB836E"
|
||||
stroke-width="1.118"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M81.45 89.384s.45 5.647-4.935 12.787M69 82.654s-.726 9.282-8.204 14.206"
|
||||
stroke="#E4EBF7"
|
||||
stroke-width="1.101"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M129.405 122.865s-5.272 7.403-9.422 10.768"
|
||||
stroke="#E4EBF7"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M119.306 107.329s.452 4.366-2.127 32.062"
|
||||
stroke="#E4EBF7"
|
||||
stroke-width="1.101"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M150.028 151.232h-49.837a1.01 1.01 0 0 1-1.01-1.01v-31.688c0-.557.452-1.01 1.01-1.01h49.837c.558 0 1.01.453 1.01 1.01v31.688a1.01 1.01 0 0 1-1.01 1.01"
|
||||
fill="#F2D7AD"
|
||||
></path>
|
||||
<path
|
||||
d="M150.29 151.232h-19.863v-33.707h20.784v32.786a.92.92 0 0 1-.92.92"
|
||||
fill="#F4D19D"
|
||||
></path>
|
||||
<path
|
||||
d="M123.554 127.896H92.917a.518.518 0 0 1-.425-.816l6.38-9.113c.193-.277.51-.442.85-.442h31.092l-7.26 10.371z"
|
||||
fill="#F2D7AD"
|
||||
></path>
|
||||
<path
|
||||
fill="#CC9B6E"
|
||||
d="M123.689 128.447H99.25v-.519h24.169l7.183-10.26.424.298z"
|
||||
></path>
|
||||
<path
|
||||
d="M158.298 127.896h-18.669a2.073 2.073 0 0 1-1.659-.83l-7.156-9.541h19.965c.49 0 .95.23 1.244.622l6.69 8.92a.519.519 0 0 1-.415.83"
|
||||
fill="#F4D19D"
|
||||
></path>
|
||||
<path
|
||||
fill="#CC9B6E"
|
||||
d="M157.847 128.479h-19.384l-7.857-10.475.415-.31 7.7 10.266h19.126zM130.554 150.685l-.032-8.177.519-.002.032 8.177z"
|
||||
></path>
|
||||
<path
|
||||
fill="#CC9B6E"
|
||||
d="M130.511 139.783l-.08-21.414.519-.002.08 21.414zM111.876 140.932l-.498-.143 1.479-5.167.498.143zM108.437 141.06l-2.679-2.935 2.665-3.434.41.318-2.397 3.089 2.384 2.612zM116.607 141.06l-.383-.35 2.383-2.612-2.397-3.089.41-.318 2.665 3.434z"
|
||||
></path>
|
||||
<path
|
||||
d="M154.316 131.892l-3.114-1.96.038 3.514-1.043.092c-1.682.115-3.634.23-4.789.23-1.902 0-2.693 2.258 2.23 2.648l-2.645-.596s-2.168 1.317.504 2.3c0 0-1.58 1.217.561 2.58-.584 3.504 5.247 4.058 7.122 3.59 1.876-.47 4.233-2.359 4.487-5.16.28-3.085-.89-5.432-3.35-7.238"
|
||||
fill="#FFC6A0"
|
||||
></path>
|
||||
<path
|
||||
d="M153.686 133.577s-6.522.47-8.36.372c-1.836-.098-1.904 2.19 2.359 2.264 3.739.15 5.451-.044 5.451-.044"
|
||||
stroke="#DB836E"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M145.16 135.877c-1.85 1.346.561 2.355.561 2.355s3.478.898 6.73.617"
|
||||
stroke="#DB836E"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M151.89 141.71s-6.28.111-6.73-2.132c-.223-1.346.45-1.402.45-1.402M146.114 140.868s-1.103 3.16 5.44 3.533M151.202 129.932v3.477M52.838 89.286c3.533-.337 8.423-1.248 13.582-7.754"
|
||||
stroke="#DB836E"
|
||||
stroke-width="1.051"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
<path
|
||||
d="M168.567 248.318a6.647 6.647 0 0 1-6.647-6.647v-66.466a6.647 6.647 0 1 1 13.294 0v66.466a6.647 6.647 0 0 1-6.647 6.647"
|
||||
fill="#5BA02E"
|
||||
></path>
|
||||
<path
|
||||
d="M176.543 247.653a6.647 6.647 0 0 1-6.646-6.647v-33.232a6.647 6.647 0 1 1 13.293 0v33.232a6.647 6.647 0 0 1-6.647 6.647"
|
||||
fill="#92C110"
|
||||
></path>
|
||||
<path
|
||||
d="M186.443 293.613H158.92a3.187 3.187 0 0 1-3.187-3.187v-46.134a3.187 3.187 0 0 1 3.187-3.187h27.524a3.187 3.187 0 0 1 3.187 3.187v46.134a3.187 3.187 0 0 1-3.187 3.187"
|
||||
fill="#F2D7AD"
|
||||
></path>
|
||||
<path
|
||||
d="M88.979 89.48s7.776 5.384 16.6 2.842"
|
||||
stroke="#E4EBF7"
|
||||
stroke-width="1.101"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="page-title">对不起，您访问的页面不存在。</div>
|
||||
<f-button type="primary" @click="click">上一页</f-button>
|
||||
</div>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
@ -12,15 +295,11 @@
|
||||
</config>
|
||||
<script>
|
||||
import { useRouter } from '@@/core/coreExports';
|
||||
import Result from 'ant-design-vue/lib/result';
|
||||
import 'ant-design-vue/lib/result/style/css';
|
||||
import Button from 'ant-design-vue/lib/button';
|
||||
import 'ant-design-vue/lib/button/style/css';
|
||||
import { FButton } from '@fesjs/fes-design';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Result.name]: Result,
|
||||
[Button.name]: Button
|
||||
FButton
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
@ -33,3 +312,15 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.page {
|
||||
height: 100%;
|
||||
padding-top: 60px;
|
||||
text-align: center;
|
||||
.page-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
margin: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,89 +1,176 @@
|
||||
<template>
|
||||
<a-layout
|
||||
v-if="routeLayout"
|
||||
:class="[
|
||||
collapsed ? 'main-layout-collapsed' : '',
|
||||
`main-layout-navigation-${navigation}`,
|
||||
`main-layout-theme-${siderTheme}`
|
||||
]"
|
||||
class="main-layout"
|
||||
>
|
||||
<template v-if="navigation !== 'top' && routeLayout.side">
|
||||
<div v-if="fixedSideBar" :style="siderFixedStuffStyle" class="layout-sider-fixed-stuff"></div>
|
||||
<a-layout-sider
|
||||
<f-layout v-if="routeLayout" class="main-layout">
|
||||
<template v-if="navigation === 'side'">
|
||||
<f-aside
|
||||
v-if="routeLayout.side"
|
||||
v-model:collapsed="collapsed"
|
||||
:width="sideWidth"
|
||||
:class="[
|
||||
'layout-sider',
|
||||
fixedSideBar ? 'layout-sider-fixed' : ''
|
||||
]"
|
||||
:theme="siderTheme"
|
||||
:fixed="fixedSideBar"
|
||||
class="layout-aside"
|
||||
collapsible
|
||||
:inverted="theme === 'dark'"
|
||||
>
|
||||
<div v-if="navigation !== 'mixin' && routeLayout.logo" class="layout-logo">
|
||||
<div v-if="routeLayout.logo" class="layout-logo">
|
||||
<img :src="logo" class="logo-img" />
|
||||
<h1 class="logo-name">{{title}}</h1>
|
||||
<div class="logo-name">{{title}}</div>
|
||||
</div>
|
||||
<Menu :menus="menus" :theme="siderTheme" />
|
||||
</a-layout-sider>
|
||||
</template>
|
||||
<a-layout class="child-layout">
|
||||
<a-layout-header v-if="currentFixedHeader && routeLayout.top" class="layout-header">
|
||||
</a-layout-header>
|
||||
<a-layout-header
|
||||
v-if="routeLayout.top"
|
||||
:style="headerFixedStyle"
|
||||
:class="[currentFixedHeader ? 'layout-header-fixed' : '']"
|
||||
class="layout-header"
|
||||
<Menu
|
||||
class="layout-menu"
|
||||
:menus="menus"
|
||||
:collapsed="collapsed"
|
||||
mode="vertical"
|
||||
:inverted="theme === 'dark'"
|
||||
/>
|
||||
</f-aside>
|
||||
<f-layout
|
||||
:fixed="fixedSideBar"
|
||||
:style="{
|
||||
left: fixedSideBar
|
||||
? collapsed
|
||||
? '48px'
|
||||
: `${sideWidth}px`
|
||||
: 'auto'
|
||||
}"
|
||||
>
|
||||
<div v-if="navigation === 'mixin' && routeLayout.logo" class="layout-logo">
|
||||
<img :src="logo" class="logo-img" />
|
||||
<h1 class="logo-name">{{title}}</h1>
|
||||
</div>
|
||||
<template v-if="navigation === 'top'">
|
||||
<div v-if="routeLayout.logo" class="layout-logo">
|
||||
<img :src="logo" class="logo-img" />
|
||||
<h1 class="logo-name">{{title}}</h1>
|
||||
<f-header
|
||||
v-if="routeLayout.top"
|
||||
class="layout-header"
|
||||
:fixed="currentFixedHeader"
|
||||
>
|
||||
<div class="layout-header-custom">
|
||||
<slot name="customHeader"></slot>
|
||||
</div>
|
||||
<Menu :menus="menus" :theme="theme" class="layout-menu" mode="horizontal" />
|
||||
</template>
|
||||
<template v-if="locale">
|
||||
<slot name="locale"></slot>
|
||||
</template>
|
||||
</f-header>
|
||||
<f-layout
|
||||
:embedded="!multiTabs"
|
||||
:fixed="currentFixedHeader"
|
||||
:style="{ top: currentFixedHeader ? '54px' : 'auto' }"
|
||||
>
|
||||
<f-main class="layout-main">
|
||||
<MultiTabProvider :multiTabs="multiTabs" />
|
||||
</f-main>
|
||||
<f-footer v-if="footer" class="layout-footer">
|
||||
{{footer}}
|
||||
</f-footer>
|
||||
</f-layout>
|
||||
</f-layout>
|
||||
</template>
|
||||
<template v-if="navigation === 'top'">
|
||||
<f-header
|
||||
v-if="routeLayout.top"
|
||||
class="layout-header"
|
||||
:inverted="theme === 'dark'"
|
||||
:fixed="currentFixedHeader"
|
||||
>
|
||||
<div v-if="routeLayout.logo" class="layout-logo">
|
||||
<img :src="logo" class="logo-img" />
|
||||
<div class="logo-name">{{title}}</div>
|
||||
</div>
|
||||
<Menu
|
||||
class="layout-menu"
|
||||
:menus="menus"
|
||||
mode="horizontal"
|
||||
:inverted="theme === 'dark'"
|
||||
/>
|
||||
<div class="layout-header-custom">
|
||||
<slot name="customHeader"></slot>
|
||||
</div>
|
||||
<template v-if="locale">
|
||||
<slot name="locale"></slot>
|
||||
</template>
|
||||
</a-layout-header>
|
||||
<a-layout-content class="layout-content">
|
||||
<MultiTabProvider v-if="multiTabs" />
|
||||
<router-view v-else></router-view>
|
||||
</a-layout-content>
|
||||
<a-layout-footer v-if="footer" class="layout-footer">
|
||||
{{footer}}
|
||||
</a-layout-footer>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
<div v-else class="content-wrapper">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</f-header>
|
||||
<f-layout
|
||||
:embedded="!multiTabs"
|
||||
:fixed="currentFixedHeader"
|
||||
:style="{ top: currentFixedHeader ? '54px' : 'auto' }"
|
||||
>
|
||||
<f-main class="layout-main">
|
||||
<MultiTabProvider :multiTabs="multiTabs" />
|
||||
</f-main>
|
||||
<f-footer v-if="footer" class="layout-footer">
|
||||
{{footer}}
|
||||
</f-footer>
|
||||
</f-layout>
|
||||
</template>
|
||||
<template v-if="navigation === 'mixin'">
|
||||
<f-header
|
||||
v-if="routeLayout.top"
|
||||
class="layout-header"
|
||||
:fixed="currentFixedHeader"
|
||||
:inverted="theme === 'dark'"
|
||||
>
|
||||
<div v-if="routeLayout.logo" class="layout-logo">
|
||||
<img :src="logo" class="logo-img" />
|
||||
<div class="logo-name">{{title}}</div>
|
||||
</div>
|
||||
<div class="layout-header-custom">
|
||||
<slot name="customHeader"></slot>
|
||||
</div>
|
||||
<template v-if="locale">
|
||||
<slot name="locale"></slot>
|
||||
</template>
|
||||
</f-header>
|
||||
<f-layout
|
||||
:fixed="currentFixedHeader"
|
||||
:style="{ top: currentFixedHeader ? '54px' : 'auto' }"
|
||||
>
|
||||
<f-aside
|
||||
v-if="routeLayout.side"
|
||||
v-model:collapsed="collapsed"
|
||||
:fixed="fixedSideBar"
|
||||
collapsible
|
||||
class="layout-aside"
|
||||
>
|
||||
<Menu
|
||||
class="layout-menu"
|
||||
:menus="menus"
|
||||
:collapsed="collapsed"
|
||||
mode="vertical"
|
||||
/>
|
||||
</f-aside>
|
||||
<f-layout
|
||||
:embedded="!multiTabs"
|
||||
:fixed="fixedSideBar"
|
||||
:style="{
|
||||
left: fixedSideBar
|
||||
? collapsed
|
||||
? '48px'
|
||||
: `${sideWidth}px`
|
||||
: 'auto'
|
||||
}"
|
||||
>
|
||||
<f-main class="layout-main">
|
||||
<MultiTabProvider :multiTabs="multiTabs" />
|
||||
</f-main>
|
||||
<f-footer v-if="footer" class="layout-footer">
|
||||
{{footer}}
|
||||
</f-footer>
|
||||
</f-layout>
|
||||
</f-layout>
|
||||
</template>
|
||||
</f-layout>
|
||||
<router-view v-else></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRoute, plugin, ApplyPluginsType } from '@@/core/coreExports';
|
||||
import Layout from 'ant-design-vue/lib/layout';
|
||||
import 'ant-design-vue/lib/layout/style/css';
|
||||
import {
|
||||
FLayout, FAside, FMain, FFooter, FHeader
|
||||
} from '@fesjs/fes-design';
|
||||
import Menu from './Menu';
|
||||
import MultiTabProvider from './MultiTabProvider';
|
||||
import defaultLogo from '../assets/logo.png';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Layout.name]: Layout,
|
||||
[Layout.Sider.name]: Layout.Sider,
|
||||
[Layout.Content.name]: Layout.Content,
|
||||
[Layout.Header.name]: Layout.Header,
|
||||
[Layout.Footer.name]: Layout.Footer,
|
||||
FLayout,
|
||||
FAside,
|
||||
FMain,
|
||||
FFooter,
|
||||
FHeader,
|
||||
Menu,
|
||||
MultiTabProvider
|
||||
},
|
||||
@ -153,7 +240,9 @@ export default {
|
||||
} else if (typeof metaLayoutConfig === 'object') {
|
||||
config = { ...runtimeConfig, ...metaLayoutConfig };
|
||||
} else {
|
||||
console.error('[plugin-layout]: meta layout must be object or boolean！');
|
||||
console.error(
|
||||
'[plugin-layout]: meta layout must be object or boolean！'
|
||||
);
|
||||
}
|
||||
// query 中 layout 默认为 false
|
||||
const routeQueryLayoutConfig = route.query.layout && JSON.parse(route.query.layout);
|
||||
@ -162,165 +251,42 @@ export default {
|
||||
} else if (typeof routeQueryLayoutConfig === 'object') {
|
||||
config = { ...config, ...routeQueryLayoutConfig };
|
||||
} else if (routeQueryLayoutConfig !== undefined) {
|
||||
console.error('[plugin-layout]: query layout must be object or boolean！');
|
||||
console.error(
|
||||
'[plugin-layout]: query layout must be object or boolean！'
|
||||
);
|
||||
}
|
||||
return config;
|
||||
});
|
||||
const siderTheme = computed(() => {
|
||||
if (props.navigation === 'mixin') {
|
||||
return 'light';
|
||||
}
|
||||
return props.theme;
|
||||
});
|
||||
const currentFixedHeader = computed(() => props.fixedHeader || props.navigation === 'mixin');
|
||||
const siderFixedStuffStyle = computed(() => {
|
||||
if (collapsed.value) {
|
||||
return {
|
||||
width: '80px'
|
||||
};
|
||||
}
|
||||
return {
|
||||
width: `${props.sideWidth}px`
|
||||
};
|
||||
});
|
||||
const headerFixedStyle = computed(() => {
|
||||
if (!currentFixedHeader.value) {
|
||||
return {};
|
||||
}
|
||||
if (props.navigation === 'side') {
|
||||
return {
|
||||
left: `${props.sideWidth}px`,
|
||||
width: `calc(100% - ${props.sideWidth}px)`
|
||||
};
|
||||
}
|
||||
return {
|
||||
left: 0,
|
||||
width: '100%'
|
||||
};
|
||||
});
|
||||
const currentFixedHeader = computed(
|
||||
() => props.fixedHeader || props.navigation === 'mixin'
|
||||
);
|
||||
return {
|
||||
siderTheme,
|
||||
currentFixedHeader,
|
||||
route,
|
||||
routeLayout,
|
||||
collapsed,
|
||||
siderFixedStuffStyle,
|
||||
headerFixedStyle
|
||||
currentFixedHeader
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.main-layout.main-layout-navigation-mixin{
|
||||
.layout-sider{
|
||||
.ant-layout-sider-trigger {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.main-layout {
|
||||
min-height: 100vh;
|
||||
&.main-layout-collapsed {
|
||||
.layout-sider {
|
||||
.layout-logo {
|
||||
justify-content: center;
|
||||
.logo-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.main-layout-navigation-top {
|
||||
.layout-header {
|
||||
padding-left: 24px;
|
||||
color: hsla(0,0%,100%,.65);
|
||||
background: #001529;
|
||||
.layout-menu {
|
||||
line-height: 48px;
|
||||
}
|
||||
.layout-logo {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-width: 165px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: all .3s;
|
||||
.logo-img {
|
||||
height: 32px;
|
||||
width: auto;
|
||||
}
|
||||
.logo-name {
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 12px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.main-layout-navigation-mixin {
|
||||
.layout-sider {
|
||||
padding: 48px 0 0;
|
||||
box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
|
||||
}
|
||||
.layout-header {
|
||||
padding-left: 24px;
|
||||
color: hsla(0,0%,100%,.65);
|
||||
background: #001529;
|
||||
.layout-menu {
|
||||
line-height: 48px;
|
||||
}
|
||||
.layout-logo {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-width: 165px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: all .3s;
|
||||
.logo-img {
|
||||
height: 32px;
|
||||
width: auto;
|
||||
}
|
||||
.logo-name {
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 12px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-sider-fixed-stuff {
|
||||
overflow: hidden;
|
||||
transition: width 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.child-layout {
|
||||
position: relative;
|
||||
}
|
||||
.layout-sider {
|
||||
&.layout-sider-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 200px;
|
||||
height: 100vh;
|
||||
.layout-header {
|
||||
display: flex;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
z-index: 1;
|
||||
.layout-menu {
|
||||
border-bottom: none;
|
||||
}
|
||||
.layout-logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
margin: 0 24px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
.logo-img {
|
||||
height: 32px;
|
||||
width: auto;
|
||||
@ -328,55 +294,55 @@ export default {
|
||||
.logo-name {
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 12px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
padding: 0;
|
||||
.layout-header-custom {
|
||||
flex: 1;
|
||||
}
|
||||
&.layout-header-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.layout-content,
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
.fes-layout-aside {
|
||||
z-index: 1;
|
||||
box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 5%);
|
||||
.layout-logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.logo-img {
|
||||
height: 36px;
|
||||
width: auto;
|
||||
}
|
||||
.logo-name {
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 12px;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.layout-menu {
|
||||
margin-top: 24px;
|
||||
}
|
||||
&.is-collapsed {
|
||||
.layout-logo {
|
||||
justify-content: center;
|
||||
.logo-img {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
}
|
||||
.logo-name {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.layout-footer {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
&.main-layout-theme-light{
|
||||
.logo-name{
|
||||
color: rgba(0, 0, 0, 0.65) !important;
|
||||
}
|
||||
&.main-layout-navigation-mixin{
|
||||
.logo-name{
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
&.main-layout-navigation-top{
|
||||
.layout-header {
|
||||
background: #fff;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,67 +1,24 @@
|
||||
<template>
|
||||
<a-menu
|
||||
:selectedKeys="selectedKeys"
|
||||
:theme="theme"
|
||||
mode="inline"
|
||||
@click="onMenuClick"
|
||||
>
|
||||
<template v-for="(item, index) in fixedMenus" :key="index">
|
||||
<template v-if="item.access">
|
||||
<a-sub-menu v-if="item.children" :key="index" :title="item.title">
|
||||
<template v-if="item.icon" #icon>
|
||||
<MenuIcon :icon="item.icon" />
|
||||
</template>
|
||||
<template
|
||||
v-for="(item1, index1) in item.children"
|
||||
>
|
||||
<template v-if="item1.access">
|
||||
<a-sub-menu
|
||||
v-if="item1.children"
|
||||
:key="`${index}-${index1}`"
|
||||
:title="item1.title"
|
||||
>
|
||||
<template
|
||||
v-for="(item2) in item1.children"
|
||||
>
|
||||
<a-menu-item
|
||||
v-if="item2.access"
|
||||
:key="item2.path"
|
||||
:title="item2.title"
|
||||
>
|
||||
{{item2.title}}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="item1.path" :title="item1.title">
|
||||
{{item1.title}}
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-sub-menu>
|
||||
<a-menu-item v-else :key="item.path" :title="item.title">
|
||||
<MenuIcon v-if="item.icon" :icon="item.icon" />
|
||||
<span>{{item.title}}</span>
|
||||
</a-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</a-menu>
|
||||
<f-menu
|
||||
:modelValue="route.path"
|
||||
:inverted="inverted"
|
||||
:mode="mode"
|
||||
:options="fixedMenus"
|
||||
@select="onMenuClick"
|
||||
></f-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toRefs, computed } from 'vue';
|
||||
import { computed, h } from 'vue';
|
||||
import { FMenu } from '@fesjs/fes-design';
|
||||
import { useRoute, useRouter } from '@@/core/coreExports';
|
||||
import Menu from 'ant-design-vue/lib/menu';
|
||||
import 'ant-design-vue/lib/menu/style/css';
|
||||
import MenuIcon from './MenuIcon';
|
||||
import { transform as transformByAccess } from '../helpers/pluginAccess';
|
||||
import { transform as transformByLocale } from '../helpers/pluginLocale';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Menu.name]: Menu,
|
||||
[Menu.SubMenu.name]: Menu.SubMenu,
|
||||
[Menu.Item.name]: Menu.Item,
|
||||
MenuIcon
|
||||
FMenu
|
||||
},
|
||||
props: {
|
||||
menus: {
|
||||
@ -70,18 +27,37 @@ export default {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
theme: {
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'dark'
|
||||
default: 'vertical'
|
||||
},
|
||||
inverted: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const { menus } = toRefs(props);
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const fixedMenus = transformByLocale(transformByAccess(menus));
|
||||
const transform = menus => menus.map((menu) => {
|
||||
const copy = {
|
||||
...menu,
|
||||
label: menu.title,
|
||||
value: menu.path
|
||||
};
|
||||
if (menu.icon) {
|
||||
copy.icon = () => h(MenuIcon, {
|
||||
icon: menu.icon
|
||||
});
|
||||
}
|
||||
if (menu.children) {
|
||||
copy.children = transform(menu.children);
|
||||
}
|
||||
return copy;
|
||||
});
|
||||
const fixedMenus = computed(() => transformByLocale(transformByAccess(transform(props.menus))));
|
||||
const onMenuClick = (e) => {
|
||||
const path = e.key;
|
||||
const path = e.value;
|
||||
if (/^https?:\/\//.test(path)) {
|
||||
window.open(path, '_blank');
|
||||
} else if (/^\//.test(path)) {
|
||||
@ -92,15 +68,11 @@ export default {
|
||||
);
|
||||
}
|
||||
};
|
||||
const selectedKeys = computed(() => [route.path]);
|
||||
return {
|
||||
selectedKeys,
|
||||
route,
|
||||
fixedMenus,
|
||||
onMenuClick
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
<script>
|
||||
|
||||
import { ref, onBeforeMount } from 'vue';
|
||||
// eslint-disable-next-line import/extensions
|
||||
import Icons from '../icons';
|
||||
@ -33,8 +32,10 @@ export default {
|
||||
}
|
||||
if (AText.value) {
|
||||
return (
|
||||
<span className={'fes-layout-icon anticon'} innerHTML={AText.value}>
|
||||
</span>
|
||||
<span
|
||||
class={'fes-layout-icon'}
|
||||
innerHTML={AText.value}
|
||||
></span>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
@ -43,7 +44,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.fes-layout-icon{
|
||||
.fes-layout-icon {
|
||||
display: inline-block;
|
||||
color: inherit;
|
||||
font-style: normal;
|
||||
@ -54,8 +55,6 @@ export default {
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
min-width: 14px;
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,61 +1,49 @@
|
||||
<template>
|
||||
<a-tabs
|
||||
:activeKey="route.path"
|
||||
class="layout-content-tabs"
|
||||
hide-add
|
||||
type="editable-card"
|
||||
@tabClick="switchPage"
|
||||
@edit="onEdit"
|
||||
>
|
||||
<a-tab-pane
|
||||
v-for="page in pageList"
|
||||
:key="page.path"
|
||||
:closable="route.path !== page.path"
|
||||
<template v-if="multiTabs">
|
||||
<FTabs
|
||||
:modelValue="route.path"
|
||||
closable
|
||||
:tabsPadding="24"
|
||||
type="card"
|
||||
class="layout-content-tabs"
|
||||
@close="handleCloseTab"
|
||||
@update:modelValue="switchPage"
|
||||
>
|
||||
<template #tab>
|
||||
{{page.title}}
|
||||
<ReloadOutlined
|
||||
v-show="route.path === page.path"
|
||||
class="layout-tabs-close-icon"
|
||||
@click="reloadPage(page.path)"
|
||||
/>
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
<template #tabBarExtraContent>
|
||||
<a-dropdown>
|
||||
<div class="layout-tabs-more-icon">
|
||||
<MoreOutlined />
|
||||
</div>
|
||||
<template #overlay>
|
||||
<a-menu @click="handlerMore">
|
||||
<a-menu-item key="closeOtherPage">
|
||||
<a href="javascript:;">关闭其他</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="reloadPage">
|
||||
<a href="javascript:;">刷新当前页</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<FTabPane
|
||||
v-for="page in pageList"
|
||||
:key="page.path"
|
||||
:value="page.path"
|
||||
:closable="route.path !== page.path"
|
||||
>
|
||||
<template #tab>
|
||||
{{page.title}}
|
||||
<ReloadOutlined
|
||||
v-show="route.path === page.path"
|
||||
class="layout-tabs-close-icon"
|
||||
@click="reloadPage(page.path)"
|
||||
/>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</a-tabs>
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive>
|
||||
<component :is="Component" :key="getPageKey(route)" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</FTabPane>
|
||||
<template #suffix>
|
||||
<FDropdown arrow :options="actions" @click="handlerMore">
|
||||
<MoreOutlined />
|
||||
</FDropdown>
|
||||
</template>
|
||||
</FTabs>
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive>
|
||||
<component :is="Component" :key="getPageKey(route)" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</template>
|
||||
<router-view v-else></router-view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
computed, onMounted, reactive, unref, ref
|
||||
computed, onMounted, unref, ref
|
||||
} from 'vue';
|
||||
import Tabs from 'ant-design-vue/lib/tabs';
|
||||
import Dropdown from 'ant-design-vue/lib/dropdown';
|
||||
import Menu from 'ant-design-vue/lib/menu';
|
||||
import 'ant-design-vue/lib/menu/style/css';
|
||||
import 'ant-design-vue/lib/dropdown/style/css';
|
||||
import 'ant-design-vue/lib/tabs/style/css';
|
||||
import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue';
|
||||
import { FTabs, FTabPane, FDropdown } from '@fesjs/fes-design';
|
||||
import { ReloadOutlined, MoreOutlined } from '@fesjs/fes-design/icon';
|
||||
import { useRouter, useRoute } from '@@/core/coreExports';
|
||||
import { transTitle } from '../helpers/pluginLocale';
|
||||
|
||||
@ -63,25 +51,36 @@ let i = 0;
|
||||
const getKey = () => ++i;
|
||||
export default {
|
||||
components: {
|
||||
[Dropdown.name]: Dropdown,
|
||||
[Menu.name]: Menu,
|
||||
[Menu.Item.name]: Menu.Item,
|
||||
[Tabs.name]: Tabs,
|
||||
[Tabs.TabPane.name]: Tabs.TabPane,
|
||||
FTabs,
|
||||
FTabPane,
|
||||
FDropdown,
|
||||
ReloadOutlined,
|
||||
MoreOutlined
|
||||
},
|
||||
props: {
|
||||
multiTabs: Boolean
|
||||
},
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const pageList = ref([]);
|
||||
const actions = [
|
||||
{
|
||||
value: 'closeOtherPage',
|
||||
label: '关闭其他'
|
||||
},
|
||||
{
|
||||
value: 'reloadPage',
|
||||
label: '刷新当前页'
|
||||
}
|
||||
];
|
||||
|
||||
const createPage = (route) => {
|
||||
const title = route.meta.title;
|
||||
const createPage = (_route) => {
|
||||
const title = _route.meta.title;
|
||||
return {
|
||||
path: route.path,
|
||||
route,
|
||||
name: route.meta.name,
|
||||
path: _route.path,
|
||||
route: _route,
|
||||
name: _route.meta.name,
|
||||
title: computed(() => transTitle(title)),
|
||||
key: getKey()
|
||||
};
|
||||
@ -110,14 +109,12 @@ export default {
|
||||
});
|
||||
}
|
||||
};
|
||||
const onEdit = (targetKey, action) => {
|
||||
if (action === 'remove') {
|
||||
const selectedPage = findPage(targetKey);
|
||||
const list = [...pageList.value];
|
||||
const index = list.indexOf(selectedPage);
|
||||
list.splice(index, 1);
|
||||
pageList.value = list;
|
||||
}
|
||||
const handleCloseTab = (targetKey) => {
|
||||
const selectedPage = findPage(targetKey);
|
||||
const list = [...pageList.value];
|
||||
const index = list.indexOf(selectedPage);
|
||||
list.splice(index, 1);
|
||||
pageList.value = list;
|
||||
};
|
||||
const reloadPage = (path) => {
|
||||
const selectedPage = findPage(path || unref(route.path));
|
||||
@ -136,7 +133,7 @@ export default {
|
||||
}
|
||||
return '';
|
||||
};
|
||||
const handlerMore = ({ key }) => {
|
||||
const handlerMore = (key) => {
|
||||
switch (key) {
|
||||
case 'closeOtherPage':
|
||||
closeOtherPage();
|
||||
@ -154,7 +151,8 @@ export default {
|
||||
reloadPage,
|
||||
switchPage,
|
||||
handlerMore,
|
||||
onEdit
|
||||
handleCloseTab,
|
||||
actions
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -163,28 +161,22 @@ export default {
|
||||
.layout-content-tabs {
|
||||
background: rgb(255, 255, 255);
|
||||
margin: 0px;
|
||||
padding-top: 6px;
|
||||
padding: 8px 0;
|
||||
width: 100%;
|
||||
.ant-tabs-nav-container {
|
||||
padding-left: 16px;
|
||||
.fes-tabs-tab-label {
|
||||
align-items: center;
|
||||
}
|
||||
.fes-tabs-tab-pane-wrapper {
|
||||
display: none;
|
||||
}
|
||||
.fes-tabs-nav-suffix {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
padding: 8px 16px;
|
||||
}
|
||||
.layout-tabs-close-icon {
|
||||
vertical-align: middle;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 12px;
|
||||
margin-left: 6px;
|
||||
margin-top: -2px;
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
.layout-tabs-more-icon {
|
||||
margin-right: 8px;
|
||||
padding: 0 4px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -31,9 +31,8 @@
|
||||
"vue-i18n": "^9.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@ant-design/icons-vue": "^6.0.0",
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"ant-design-vue": "^2.2.0",
|
||||
"@fesjs/fes-design": "^0.1.10",
|
||||
"vue": "^3.0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,41 +1,42 @@
|
||||
<template>
|
||||
<a-dropdown>
|
||||
<div class="lang-icon"><GlobalOutlined /></div>
|
||||
<template #overlay>
|
||||
<a-menu :selectedKeys="selectedKeys" @click="handleClick">
|
||||
<a-menu-item
|
||||
<FTooltip v-model="isOpened" popperClass="lang-popper" mode="popover">
|
||||
<div class="lang-icon">
|
||||
<LanguageOutlined />
|
||||
</div>
|
||||
<template #content>
|
||||
<FScrollbar height="274" class="lang-container">
|
||||
<div
|
||||
v-for="item in configs"
|
||||
:key="item.lang"
|
||||
class="lang-item"
|
||||
:class="[
|
||||
'lang-option',
|
||||
item.lang === locale && 'is-selected'
|
||||
]"
|
||||
@click="handleSelect(item)"
|
||||
>
|
||||
<span class="lang-item-icon">{{item.icon}}</span>
|
||||
<span class="lang-item-label">{{item.label}}</span>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
<span>{{item.icon}}</span>
|
||||
<span>{{item.label}}</span>
|
||||
</div>
|
||||
</FScrollbar>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</FTooltip>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dropdown from 'ant-design-vue/lib/dropdown';
|
||||
import Menu from 'ant-design-vue/lib/menu';
|
||||
import 'ant-design-vue/lib/dropdown/style/css';
|
||||
import 'ant-design-vue/lib/menu/style/css';
|
||||
import { GlobalOutlined } from '@ant-design/icons-vue';
|
||||
import { FTooltip, FScrollbar } from '@fesjs/fes-design';
|
||||
import { LanguageOutlined } from '@fesjs/fes-design/icon';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import langUConfigMap from '../langUConfigMap';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Dropdown.name]: Dropdown,
|
||||
[Menu.name]: Menu,
|
||||
[Menu.Item.name]: Menu.Item,
|
||||
GlobalOutlined
|
||||
FTooltip,
|
||||
FScrollbar,
|
||||
LanguageOutlined
|
||||
},
|
||||
setup() {
|
||||
const { messages, locale } = useI18n();
|
||||
const selectedKeys = computed(() => [locale.value]);
|
||||
const configs = computed(() => {
|
||||
const arr = [];
|
||||
Object.keys(messages.value)
|
||||
@ -45,30 +46,54 @@ export default {
|
||||
});
|
||||
return arr;
|
||||
});
|
||||
const handleClick = ({ key }) => {
|
||||
locale.value = key;
|
||||
window.localStorage.setItem('fes_locale', key);
|
||||
const isOpened = ref(false);
|
||||
const handleSelect = ({ lang }) => {
|
||||
locale.value = lang;
|
||||
isOpened.value = false;
|
||||
window.localStorage.setItem('fes_locale', lang);
|
||||
};
|
||||
return {
|
||||
handleClick,
|
||||
selectedKeys,
|
||||
configs
|
||||
handleSelect,
|
||||
locale,
|
||||
configs,
|
||||
isOpened
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.fes-tooltip.fes-tooltip-popover.lang-popper {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
|
||||
<style lang="less">
|
||||
.lang-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 8px;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.lang-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.lang-item-label {
|
||||
margin-left: 8px;
|
||||
.lang-container {
|
||||
width: 180px;
|
||||
background: #ffffff;
|
||||
.lang-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
color: #0f1222;
|
||||
line-height: 32px;
|
||||
background: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s cubic-bezier(0.9, 0, 0.3, 0.7);
|
||||
&:hover,
|
||||
&.is-selected {
|
||||
color: #5384ff;
|
||||
background: #f5f8ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,54 +1,54 @@
|
||||
{
|
||||
"name": "app1",
|
||||
"version": "2.0.0",
|
||||
"description": "fes项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"prod": "FES_ENV=prod fes build",
|
||||
"analyze": "ANALYZE=1 fes build",
|
||||
"dev": "fes dev",
|
||||
"test": "fes test"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
".fes.js",
|
||||
".fes.prod.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tsconfig.json",
|
||||
"/src",
|
||||
"/config"
|
||||
],
|
||||
"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",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "0.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.0.5",
|
||||
"ant-design-vue": "^2.2.0"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
"name": "app1",
|
||||
"version": "2.0.0",
|
||||
"description": "fes项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"prod": "FES_ENV=prod fes build",
|
||||
"analyze": "ANALYZE=1 fes build",
|
||||
"dev": "fes dev",
|
||||
"test": "fes test"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
".fes.js",
|
||||
".fes.prod.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tsconfig.json",
|
||||
"/src",
|
||||
"/config"
|
||||
],
|
||||
"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",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "0.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.0.5",
|
||||
"@fesjs/fes-design": "^0.1.10"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<div class="page-loading">
|
||||
<Spin size="large" />
|
||||
<f-spin size="large" stroke="#5384ff" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Spin from 'ant-design-vue/lib/spin';
|
||||
import 'ant-design-vue/lib/spin/style/css';
|
||||
import { FSpin } from '@fesjs/fes-design';
|
||||
|
||||
export default {
|
||||
components: { Spin },
|
||||
components: {
|
||||
FSpin
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
};
|
||||
|
||||
@ -9,15 +9,13 @@ export default {
|
||||
},
|
||||
layout: {
|
||||
title: "Fes.js",
|
||||
footer: 'Created by MumbelFe',
|
||||
footer: 'Created by MumbleFE',
|
||||
multiTabs: false,
|
||||
navigation: 'mixin',
|
||||
menus: [{
|
||||
name: 'index',
|
||||
icon: 'user'
|
||||
}, {
|
||||
title: "子应用1",
|
||||
icon: 'user',
|
||||
children: [{
|
||||
name: 'app1-index'
|
||||
},{
|
||||
|
||||
@ -1,54 +1,54 @@
|
||||
{
|
||||
"name": "main",
|
||||
"version": "2.0.0",
|
||||
"description": "fes项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"prod": "FES_ENV=prod fes build",
|
||||
"analyze": "ANALYZE=1 fes build",
|
||||
"dev": "fes dev",
|
||||
"test": "fes test"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
".fes.js",
|
||||
".fes.prod.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tsconfig.json",
|
||||
"/src",
|
||||
"/config"
|
||||
],
|
||||
"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",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "0.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.0.5",
|
||||
"ant-design-vue": "^2.2.0"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
"name": "main",
|
||||
"version": "2.0.0",
|
||||
"description": "fes项目模版",
|
||||
"scripts": {
|
||||
"build": "fes build",
|
||||
"prod": "FES_ENV=prod fes build",
|
||||
"analyze": "ANALYZE=1 fes build",
|
||||
"dev": "fes dev",
|
||||
"test": "fes test"
|
||||
},
|
||||
"keywords": [
|
||||
"管理端",
|
||||
"fes",
|
||||
"fast",
|
||||
"easy",
|
||||
"strong"
|
||||
],
|
||||
"files": [
|
||||
".eslintrc.js",
|
||||
".gitignore",
|
||||
".fes.js",
|
||||
".fes.prod.js",
|
||||
"mock.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
"tsconfig.json",
|
||||
"/src",
|
||||
"/config"
|
||||
],
|
||||
"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",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@webank/eslint-config-webank": "0.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.0.5",
|
||||
"@fesjs/fes-design": "^0.1.10"
|
||||
},
|
||||
"private": true
|
||||
}
|
||||
|
||||
@ -1,7 +1,5 @@
|
||||
import { access as accessApi } from '@fesjs/fes';
|
||||
import PageLoading from '@/components/PageLoading';
|
||||
import Antdv from 'ant-design-vue';
|
||||
import 'ant-design-vue/dist/antd.css';
|
||||
|
||||
export const beforeRender = {
|
||||
loading: <PageLoading />,
|
||||
@ -15,7 +13,3 @@ export const beforeRender = {
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export const onAppCreated = ({ app }) => {
|
||||
app.use(Antdv);
|
||||
};
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
<template>
|
||||
<div class="page-loading">
|
||||
<Spin size="large" />
|
||||
<f-spin size="large" stroke="#5384ff" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Spin from 'ant-design-vue/lib/spin';
|
||||
import 'ant-design-vue/lib/spin/style/css';
|
||||
import { FSpin } from '@fesjs/fes-design';
|
||||
|
||||
export default {
|
||||
components: { Spin },
|
||||
components: {
|
||||
FSpin
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
@ -1,11 +1,17 @@
|
||||
<template>
|
||||
<div>
|
||||
main
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="Tab 1"><MicroAppWithMemoHistory key="1" name="app1" url="/app1" /></a-tab-pane>
|
||||
<a-tab-pane key="2" tab="Tab 2"><MicroAppWithMemoHistory key="2" name="app1" url="/app1/test" /></a-tab-pane>
|
||||
<a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
|
||||
</a-tabs>
|
||||
<FTabs v-model="activeKey">
|
||||
<FTabPane name="Tab 1" value="1">
|
||||
<MicroAppWithMemoHistory key="1" name="app1" url="/app1" />
|
||||
</FTabPane>
|
||||
<FTabPane name="Tab 2" value="2">
|
||||
<MicroAppWithMemoHistory key="2" name="app1" url="/app1/test" />
|
||||
</FTabPane>
|
||||
<FTabPane name="Tab 3" value="3">
|
||||
Content of Tab Pane 3
|
||||
</FTabPane>
|
||||
</FTabs>
|
||||
</div>
|
||||
</template>
|
||||
<config>
|
||||
@ -17,9 +23,10 @@
|
||||
<script>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { MicroAppWithMemoHistory } from '@fesjs/fes';
|
||||
import { FTabPane, FTabs } from '@fesjs/fes-design';
|
||||
|
||||
export default {
|
||||
components: { MicroAppWithMemoHistory },
|
||||
components: { FTabs, FTabPane, MicroAppWithMemoHistory },
|
||||
setup() {
|
||||
const url = ref('/app1/test');
|
||||
onMounted(() => {
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.0.5"
|
||||
"vue": "^3.0.5",
|
||||
"@fesjs/fes-design": "^0.1.10"
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,7 +31,6 @@ export const MicroApp = defineComponent({
|
||||
},
|
||||
settings: Object,
|
||||
lifeCycles: Object,
|
||||
className: String,
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
const {
|
||||
@ -163,6 +162,6 @@ export const MicroApp = defineComponent({
|
||||
updateApp();
|
||||
});
|
||||
|
||||
return () => <div ref={containerRef} className={props.className}></div>;
|
||||
return () => <div ref={containerRef}></div>;
|
||||
},
|
||||
});
|
||||
|
||||
@ -16,7 +16,6 @@ export const MicroAppWithMemoHistory = defineComponent({
|
||||
},
|
||||
settings: Object,
|
||||
lifeCycles: Object,
|
||||
className: String,
|
||||
url: String
|
||||
},
|
||||
setup(props, { attrs }) {
|
||||
|
||||
@ -32,7 +32,6 @@ const DEFAULT_EXCLUDE_NODE_MODULES = [
|
||||
'vue',
|
||||
'vuex',
|
||||
'vue-router',
|
||||
'ant-design-vue',
|
||||
'core-js',
|
||||
'echarts',
|
||||
'@babel/runtime',
|
||||
|
||||
@ -1,92 +1,92 @@
|
||||
// .fes.js 只负责管理编译时配置，只能使用plain Object
|
||||
|
||||
export default {
|
||||
exportStatic: {},
|
||||
// exportStatic: {},
|
||||
define: {
|
||||
__DEV__: false,
|
||||
__DEV__: false
|
||||
},
|
||||
publicPath: "./",
|
||||
publicPath: './',
|
||||
html: {
|
||||
title: "海贼王",
|
||||
title: '海贼王'
|
||||
},
|
||||
router: {
|
||||
mode: "history",
|
||||
mode: 'history'
|
||||
},
|
||||
access: {
|
||||
roles: {
|
||||
admin: ["*"],
|
||||
menuTest: ['/', '/onepiece', '/store'],
|
||||
},
|
||||
admin: ['*'],
|
||||
menuTest: ['/','/menuTest']
|
||||
}
|
||||
},
|
||||
request: {
|
||||
dataField: "result",
|
||||
dataField: 'result'
|
||||
},
|
||||
mock: {
|
||||
prefix: "/v2",
|
||||
prefix: '/v2'
|
||||
},
|
||||
proxy: {
|
||||
"/v2": {
|
||||
target: "https://api.douban.com/",
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/v2': {
|
||||
target: 'https://api.douban.com/',
|
||||
changeOrigin: true
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
title: "Fes.js",
|
||||
footer: "Created by MumbleFe",
|
||||
multiTabs: true,
|
||||
navigation: "mixin",
|
||||
theme: 'light',
|
||||
title: 'Fes.js',
|
||||
footer: 'Created by MumbleFE',
|
||||
multiTabs: false,
|
||||
navigation: 'mixin',
|
||||
theme: 'dark',
|
||||
menus: [
|
||||
{
|
||||
name: "index",
|
||||
icon: "/wine-outline.svg",
|
||||
name: 'index',
|
||||
icon: '/wine-outline.svg'
|
||||
},
|
||||
{
|
||||
name: "onepiece",
|
||||
icon: "user",
|
||||
path: "https://www.baidu.com",
|
||||
name: 'store'
|
||||
},
|
||||
{
|
||||
title: "abcd",
|
||||
children: [
|
||||
{
|
||||
name: "store",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
// name: "setting",
|
||||
title: "setting",
|
||||
children: [
|
||||
{
|
||||
name: "test",
|
||||
},
|
||||
],
|
||||
},{
|
||||
name: 'editor',
|
||||
icon: "/wine-outline.svg"
|
||||
icon: '/wine-outline.svg'
|
||||
},
|
||||
{
|
||||
title: '$externalLink',
|
||||
icon: 'UserOutlined',
|
||||
path: 'https://www.baidu.com'
|
||||
},
|
||||
{
|
||||
title: '菜单权限测试',
|
||||
children: [
|
||||
{
|
||||
title: '子菜单',
|
||||
path: '/menuTest',
|
||||
},
|
||||
{
|
||||
title: '子菜单a',
|
||||
path: '/menuTest/a'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'cssModule'
|
||||
}
|
||||
],
|
||||
]
|
||||
},
|
||||
locale: {
|
||||
legacy: true,
|
||||
legacy: true
|
||||
},
|
||||
devServer: {
|
||||
port: 8080,
|
||||
port: 8080
|
||||
},
|
||||
enums: {
|
||||
status: [
|
||||
["0", "无效的"],
|
||||
["1", "有效的"],
|
||||
],
|
||||
['0', '无效的'],
|
||||
['1', '有效的']
|
||||
]
|
||||
},
|
||||
vuex: {
|
||||
strict: true,
|
||||
strict: true
|
||||
},
|
||||
dynamicImport: true,
|
||||
extraBabelPlugins: [
|
||||
['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }, 'ant-design-vue'],
|
||||
],
|
||||
monacoEditor: {
|
||||
languages: ['javascript', 'typescript', 'html', 'json']
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@
|
||||
"@fesjs/plugin-sass": "^2.0.0",
|
||||
"@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
|
||||
"@fesjs/plugin-windicss": "^2.0.0",
|
||||
"ant-design-vue": "^2.2.0",
|
||||
"@fesjs/fes-design": "^0.1.10",
|
||||
"vue": "^3.0.5",
|
||||
"vuex": "^4.0.0"
|
||||
},
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
|
||||
|
||||
import { access as accessApi, store, GETTER_TYPES } from '@fesjs/fes';
|
||||
import { access as accessApi } from '@fesjs/fes';
|
||||
import PageLoading from '@/components/PageLoading';
|
||||
import UserCenter from '@/components/UserCenter';
|
||||
|
||||
console.log(store.getters[GETTER_TYPES.user.address]);
|
||||
console.log(process.env.FES_APP_PUBLISH_ERROR_PAGE);
|
||||
|
||||
export const beforeRender = {
|
||||
loading: <PageLoading />,
|
||||
@ -13,9 +11,9 @@ export const beforeRender = {
|
||||
const { setRole } = accessApi;
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
setRole('menuTest');
|
||||
setRole('admin');
|
||||
resolve({
|
||||
userName: 'harrywan'
|
||||
userName: '李雷'
|
||||
});
|
||||
}, 1000);
|
||||
});
|
||||
@ -24,10 +22,4 @@ export const beforeRender = {
|
||||
|
||||
export const layout = {
|
||||
customHeader: <UserCenter />
|
||||
// unAccessHandler({ next }) {
|
||||
// next(false);
|
||||
// },
|
||||
// noFoundHandler({ next }) {
|
||||
// next(false);
|
||||
// }
|
||||
};
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<div class="page-loading">
|
||||
<Spin size="large" />
|
||||
<f-spin size="large" stroke="#5384ff" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Spin from 'ant-design-vue/lib/spin';
|
||||
import 'ant-design-vue/lib/spin/style/css';
|
||||
import { FSpin } from '@fesjs/fes-design';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Spin
|
||||
FSpin
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>{{initialState.userName}}</div>
|
||||
<div class="user-center">{{initialState.userName}}</div>
|
||||
</template>
|
||||
<script>
|
||||
import { useModel } from '@fesjs/fes';
|
||||
@ -13,3 +13,8 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.user-center {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
|
||||
export default {
|
||||
test: 'test',
|
||||
home: 'home',
|
||||
'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'
|
||||
store: 'store',
|
||||
editor: 'editor',
|
||||
externalLink: 'externalLink'
|
||||
};
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
|
||||
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`'
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
|
||||
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'
|
||||
};
|
||||
@ -1,12 +1,7 @@
|
||||
|
||||
export default {
|
||||
test: '测试',
|
||||
home: '首页',
|
||||
'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 开发，快速构建标准页面'
|
||||
store: '状态管理',
|
||||
editor: '编辑器',
|
||||
externalLink: '外部链接'
|
||||
};
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
|
||||
export default {
|
||||
'navBar.lang': '語言',
|
||||
'layout.user.link.help': '幫助',
|
||||
'layout.user.link.privacy': '隱私',
|
||||
'layout.user.link.terms': '條款',
|
||||
'app.preview.down.block': '下載此頁面到本地項目'
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<div>a/b</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
};
|
||||
</script>
|
||||
@ -1,8 +0,0 @@
|
||||
<template>
|
||||
<div>b</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
};
|
||||
</script>
|
||||
24
packages/fes-template/src/pages/cssModule.vue
Normal file
24
packages/fes-template/src/pages/cssModule.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div :class="$style.red">
|
||||
字体颜色
|
||||
</div>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
"name": "cssModule",
|
||||
"title": "css Module 测试"
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
return {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style module>
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@ -11,7 +11,7 @@
|
||||
<config>
|
||||
{
|
||||
"name": "editor",
|
||||
"title": "monaco-editor"
|
||||
"title": "$editor"
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
|
||||
@ -1,143 +1,26 @@
|
||||
<template>
|
||||
<div :class="$style.red">
|
||||
<a-input placeholder="请输入。。。" />
|
||||
<a-button type="primary">Primary</a-button>
|
||||
<div class="m-2">国际化 {{t("test")}}</div>
|
||||
fes & 拉夫德鲁 <br />
|
||||
<access :id="accessId"> accessOnepicess1 <input /> </access>
|
||||
<div v-access="accessId"> accessOnepicess2 <input /> </div>
|
||||
<input />
|
||||
<h4>数据字典</h4>
|
||||
<div v-for="item in enumsGet('status')" :key="item.key">{{item.value}}：{{item.key}}</div>
|
||||
<div v-for="item in roles" :key="item.key">{{item.name}}：{{item.disabled}}</div>
|
||||
<div>{{enumsGet('roles', '2', { dir: 'eName' })}}</div>
|
||||
<div class="page">
|
||||
home
|
||||
</div>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
"name": "index",
|
||||
"title": "home"
|
||||
"title": "$home"
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import {
|
||||
useAccess, useRouter, useI18n, locale, enums, request
|
||||
} from '@fesjs/fes';
|
||||
import { Button, Input } from 'ant-design-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Button.name]: Button,
|
||||
[Input.name]: Input
|
||||
},
|
||||
setup() {
|
||||
const fes = ref('fes upgrade to vue3');
|
||||
const accessOnepicess = useAccess('/onepiece1');
|
||||
const localI18n = useI18n();
|
||||
const router = useRouter();
|
||||
const accessId = ref('/onepiece1');
|
||||
enums.push('roles', [
|
||||
{
|
||||
id: '1',
|
||||
cName: '系统管理员',
|
||||
eName: 'System',
|
||||
perm: ['1', '2', '3']
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
cName: '业务管理员',
|
||||
eName: 'Business',
|
||||
perm: ['1', '2']
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
cName: '普通用户',
|
||||
eName: 'User',
|
||||
perm: ['1']
|
||||
}
|
||||
], { keyName: 'id' });
|
||||
const roles = enums.get('roles', {
|
||||
extend: [
|
||||
{
|
||||
key: 'name',
|
||||
dir: 'cName'
|
||||
},
|
||||
{
|
||||
key: 'disabled',
|
||||
transfer: item => item.value.perm.some(i => i >= 2)
|
||||
}
|
||||
]
|
||||
});
|
||||
console.log('enums roles=>', roles);
|
||||
console.log('enums roles[1]=>', enums.get('roles', '1'));
|
||||
console.log('enums status[0]=> ', enums.get('status', 0));
|
||||
console.log('enums status concat', enums.concat('status', [['3', '普通的']], { extend: [{ key: 'name', dir: 'value' }] }));
|
||||
console.log('enums status get extend=>', enums.get('status', {
|
||||
extend: [
|
||||
{
|
||||
key: 'name',
|
||||
dir: 'value'
|
||||
},
|
||||
{
|
||||
key: 'disabled',
|
||||
transfer: item => item.key === '0'
|
||||
}
|
||||
]
|
||||
}));
|
||||
onMounted(() => {
|
||||
console.log(router);
|
||||
setTimeout(() => {
|
||||
locale.setLocale({ locale: 'en-US' });
|
||||
locale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } });
|
||||
console.log(locale.getAllLocales());
|
||||
}, 2000);
|
||||
setTimeout(() => {
|
||||
accessId.value = '11';
|
||||
}, 4000);
|
||||
|
||||
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);
|
||||
});
|
||||
});
|
||||
return {
|
||||
accessId,
|
||||
fes,
|
||||
accessOnepicess,
|
||||
t: localI18n.t,
|
||||
enumsGet: enums.get,
|
||||
roles
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
console.log('$style:', this.$style);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style module>
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
<style>
|
||||
.page {
|
||||
}
|
||||
</style>
|
||||
|
||||
21
packages/fes-template/src/pages/menuTest/a.vue
Normal file
21
packages/fes-template/src/pages/menuTest/a.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
menuTest-a
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
21
packages/fes-template/src/pages/menuTest/index.vue
Normal file
21
packages/fes-template/src/pages/menuTest/index.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
menuTest-index
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
@ -1,21 +0,0 @@
|
||||
<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>
|
||||
@ -1,16 +1,24 @@
|
||||
<template>
|
||||
<div class="haizekuo">
|
||||
<div class="page">
|
||||
<h4>Vuex</h4>
|
||||
<div><button @click="increment">click me：{{doubleCount}}</button></div>
|
||||
<div><button :disabled="disabled" @click="login">async login</button></div>
|
||||
<div><button @click="fooBarIncrement">foo/bar：{{fooBarDoubleCount}}</button></div>
|
||||
<div>
|
||||
<button @click="increment">click me：{{doubleCount}}</button>
|
||||
</div>
|
||||
<div>
|
||||
<button :disabled="disabled" @click="login">async login</button>
|
||||
</div>
|
||||
<div>
|
||||
<button @click="fooBarIncrement">
|
||||
foo/bar：{{fooBarDoubleCount}}
|
||||
</button>
|
||||
</div>
|
||||
<div>{{address}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
"name": "store",
|
||||
"title": "vuex测试"
|
||||
"title": "$store"
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
@ -25,7 +33,9 @@ export default {
|
||||
const disabled = ref(false);
|
||||
return {
|
||||
address: computed(() => store.getters[GETTER_TYPES.user.address]),
|
||||
doubleCount: computed(() => store.getters[GETTER_TYPES.counter.doubleCount]),
|
||||
doubleCount: computed(
|
||||
() => store.getters[GETTER_TYPES.counter.doubleCount]
|
||||
),
|
||||
disabled,
|
||||
increment: () => store.commit(MUTATION_TYPES.counter.increment),
|
||||
login: () => {
|
||||
@ -37,14 +47,14 @@ export default {
|
||||
});
|
||||
},
|
||||
fooBarIncrement: () => store.commit(MUTATION_TYPES.fooBar.increment),
|
||||
fooBarDoubleCount: computed(() => store.getters[GETTER_TYPES.fooBar.doubleCount])
|
||||
fooBarDoubleCount: computed(
|
||||
() => store.getters[GETTER_TYPES.fooBar.doubleCount]
|
||||
)
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.haizekuo {
|
||||
/* background: url('../images/icon.png'); */
|
||||
.page {
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
<template>
|
||||
<div>test</div>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
"name": "test",
|
||||
"title": "侧事故"
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
import { } from '@fesjs/fes';
|
||||
|
||||
export default {
|
||||
|
||||
};
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user