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,19 +40,12 @@ 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
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
menu.children = fillMenuByRoute(menu.children, routeConfig, dep);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
});
|
||||
if (menu.children) {
|
||||
menu.children = transform(menu.children);
|
||||
}
|
||||
};
|
||||
|
||||
export const transform = (menus) => {
|
||||
const originData = unref(menus);
|
||||
_addAccessTag(originData);
|
||||
|
||||
return originData;
|
||||
};
|
||||
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));
|
||||
export const transform = menus => menus.map((menu) => {
|
||||
const copy = {
|
||||
...menu,
|
||||
label: transTitle(menu.label)
|
||||
};
|
||||
if (menu.children) {
|
||||
copy.children = transform(menu.children);
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
_transform(item.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">
|
||||
<img :src="logo" class="logo-img" />
|
||||
<h1 class="logo-name">{{title}}</h1>
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
<div class="logo-name">{{title}}</div>
|
||||
</div>
|
||||
<Menu :menus="menus" :theme="theme" class="layout-menu" mode="horizontal" />
|
||||
</template>
|
||||
<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'
|
||||
}"
|
||||
>
|
||||
<f-header
|
||||
v-if="routeLayout.top"
|
||||
class="layout-header"
|
||||
:fixed="currentFixedHeader"
|
||||
>
|
||||
<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">
|
||||
</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}}
|
||||
</a-layout-footer>
|
||||
</a-layout>
|
||||
</a-layout>
|
||||
<div v-else class="content-wrapper">
|
||||
<router-view></router-view>
|
||||
</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>
|
||||
</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,93 +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) {
|
||||
const currentFixedHeader = computed(
|
||||
() => props.fixedHeader || props.navigation === 'mixin'
|
||||
);
|
||||
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%'
|
||||
};
|
||||
});
|
||||
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 {
|
||||
height: 100vh;
|
||||
.layout-header {
|
||||
padding-left: 24px;
|
||||
color: hsla(0,0%,100%,.65);
|
||||
background: #001529;
|
||||
display: flex;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
z-index: 1;
|
||||
.layout-menu {
|
||||
line-height: 48px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.layout-logo {
|
||||
display: flex;
|
||||
margin: 0 24px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-width: 165px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
.logo-img {
|
||||
height: 32px;
|
||||
width: auto;
|
||||
@ -256,65 +294,18 @@ export default {
|
||||
.logo-name {
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 12px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.layout-header-custom {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
.fes-layout-aside {
|
||||
z-index: 1;
|
||||
box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 5%);
|
||||
.layout-logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
@ -322,61 +313,36 @@ export default {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.logo-img {
|
||||
height: 32px;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
}
|
||||
.logo-name {
|
||||
overflow: hidden;
|
||||
margin: 0 0 0 12px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
.layout-menu {
|
||||
margin-top: 24px;
|
||||
}
|
||||
.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;
|
||||
&.is-collapsed {
|
||||
.layout-logo {
|
||||
justify-content: center;
|
||||
.logo-img {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
}
|
||||
.logo-name {
|
||||
display: none;
|
||||
}
|
||||
&.layout-header-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
.layout-content,
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
.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,15 +1,18 @@
|
||||
<template>
|
||||
<a-tabs
|
||||
:activeKey="route.path"
|
||||
<template v-if="multiTabs">
|
||||
<FTabs
|
||||
:modelValue="route.path"
|
||||
closable
|
||||
:tabsPadding="24"
|
||||
type="card"
|
||||
class="layout-content-tabs"
|
||||
hide-add
|
||||
type="editable-card"
|
||||
@tabClick="switchPage"
|
||||
@edit="onEdit"
|
||||
@close="handleCloseTab"
|
||||
@update:modelValue="switchPage"
|
||||
>
|
||||
<a-tab-pane
|
||||
<FTabPane
|
||||
v-for="page in pageList"
|
||||
:key="page.path"
|
||||
:value="page.path"
|
||||
:closable="route.path !== page.path"
|
||||
>
|
||||
<template #tab>
|
||||
@ -20,42 +23,27 @@
|
||||
@click="reloadPage(page.path)"
|
||||
/>
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
<template #tabBarExtraContent>
|
||||
<a-dropdown>
|
||||
<div class="layout-tabs-more-icon">
|
||||
</FTabPane>
|
||||
<template #suffix>
|
||||
<FDropdown arrow :options="actions" @click="handlerMore">
|
||||
<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>
|
||||
</FDropdown>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
</template>
|
||||
</a-tabs>
|
||||
</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 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 {
|
||||
.lang-container {
|
||||
width: 180px;
|
||||
background: #ffffff;
|
||||
.lang-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.lang-item-label {
|
||||
margin-left: 8px;
|
||||
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>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.0.5",
|
||||
"ant-design-vue": "^2.2.0"
|
||||
"@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'
|
||||
},{
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
"dependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.0.5",
|
||||
"ant-design-vue": "^2.2.0"
|
||||
"@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