mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-10-14 10:52:28 +08:00
feat: 使用fes-design替换layout插件 80%
This commit is contained in:
wanchun
parent
6782f5eedc
commit
8d381ad1ac
@ -33,7 +33,7 @@
|
||||
"@ant-design/icons-vue": "^6.0.0",
|
||||
"ant-design-vue": "^2.2.0",
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/fes-design": "^0.1.2",
|
||||
"@fesjs/fes-design": "^0.1.7",
|
||||
"vue": "^3.0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -21,7 +21,16 @@
|
||||
:inverted="theme === 'dark'"
|
||||
/>
|
||||
</f-aside>
|
||||
<f-layout>
|
||||
<f-layout
|
||||
:fixed="fixedSideBar"
|
||||
:style="{
|
||||
left: fixedSideBar
|
||||
? collapsed
|
||||
? '48px'
|
||||
: `${sideWidth}px`
|
||||
: 'auto'
|
||||
}"
|
||||
>
|
||||
<f-header
|
||||
v-if="routeLayout.top"
|
||||
class="layout-header"
|
||||
@ -34,14 +43,19 @@
|
||||
<slot name="locale"></slot>
|
||||
</template>
|
||||
</f-header>
|
||||
<f-layout
|
||||
:embedded="!multiTabs"
|
||||
:fixed="currentFixedHeader"
|
||||
:style="{ top: currentFixedHeader ? '54px' : 'auto' }"
|
||||
>
|
||||
<f-main class="layout-main">
|
||||
<MultiTabProvider v-if="multiTabs" />
|
||||
<router-view v-else></router-view>
|
||||
<MultiTabProvider :multiTabs="multiTabs" />
|
||||
</f-main>
|
||||
<f-footer v-if="footer" class="layout-footer">
|
||||
{{footer}}
|
||||
</f-footer>
|
||||
</f-layout>
|
||||
</f-layout>
|
||||
</template>
|
||||
<template v-if="navigation === 'top'">
|
||||
<f-header
|
||||
@ -67,19 +81,25 @@
|
||||
<slot name="locale"></slot>
|
||||
</template>
|
||||
</f-header>
|
||||
<f-layout
|
||||
:embedded="!multiTabs"
|
||||
:fixed="currentFixedHeader"
|
||||
:style="{ top: currentFixedHeader ? '54px' : 'auto' }"
|
||||
>
|
||||
<f-main class="layout-main">
|
||||
<MultiTabProvider v-if="multiTabs" />
|
||||
<router-view v-else></router-view>
|
||||
<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" />
|
||||
@ -92,13 +112,15 @@
|
||||
<slot name="locale"></slot>
|
||||
</template>
|
||||
</f-header>
|
||||
<f-layout>
|
||||
<f-layout
|
||||
:fixed="currentFixedHeader"
|
||||
:style="{ top: currentFixedHeader ? '54px' : 'auto' }"
|
||||
>
|
||||
<f-aside
|
||||
v-if="routeLayout.side"
|
||||
v-model:collapsed="collapsed"
|
||||
:fixed="fixedSideBar"
|
||||
collapsible
|
||||
:inverted="theme === 'dark'"
|
||||
class="layout-aside"
|
||||
>
|
||||
<Menu
|
||||
@ -106,13 +128,21 @@
|
||||
:menus="menus"
|
||||
:collapsed="collapsed"
|
||||
mode="vertical"
|
||||
:inverted="theme === 'dark'"
|
||||
/>
|
||||
</f-aside>
|
||||
<f-layout>
|
||||
<f-layout
|
||||
:embedded="!multiTabs"
|
||||
:fixed="fixedSideBar"
|
||||
:style="{
|
||||
left: fixedSideBar
|
||||
? collapsed
|
||||
? '48px'
|
||||
: `${sideWidth}px`
|
||||
: 'auto'
|
||||
}"
|
||||
>
|
||||
<f-main class="layout-main">
|
||||
<MultiTabProvider v-if="multiTabs" />
|
||||
<router-view v-else></router-view>
|
||||
<MultiTabProvider :multiTabs="multiTabs" />
|
||||
</f-main>
|
||||
<f-footer v-if="footer" class="layout-footer">
|
||||
{{footer}}
|
||||
@ -121,9 +151,7 @@
|
||||
</f-layout>
|
||||
</template>
|
||||
</f-layout>
|
||||
<div v-else class="content-wrapper">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<router-view v-else></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -232,65 +260,30 @@ export default {
|
||||
const currentFixedHeader = computed(
|
||||
() => props.fixedHeader || props.navigation === 'mixin'
|
||||
);
|
||||
const asideFixedStyle = computed(() => {
|
||||
if (
|
||||
routeLayout.value.top
|
||||
&& props.navigation === 'mixin'
|
||||
&& props.fixedSideBar
|
||||
) {
|
||||
return {
|
||||
top: '54px'
|
||||
};
|
||||
}
|
||||
return {};
|
||||
});
|
||||
|
||||
// const sideTheme = computed(() => {
|
||||
// if (props.navigation === 'mixin') {
|
||||
// return 'light';
|
||||
// }
|
||||
// return props.theme;
|
||||
// });
|
||||
|
||||
// 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 {
|
||||
route,
|
||||
routeLayout,
|
||||
collapsed,
|
||||
currentFixedHeader,
|
||||
asideFixedStyle
|
||||
// sideTheme,
|
||||
// currentFixedHeader,
|
||||
// siderFixedStuffStyle,
|
||||
// headerFixedStyle
|
||||
currentFixedHeader
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.main-layout {
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
.layout-header {
|
||||
display: flex;
|
||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||
z-index: 1;
|
||||
.layout-menu {
|
||||
border-bottom: none;
|
||||
}
|
||||
.layout-logo {
|
||||
display: flex;
|
||||
margin: 0 24px;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
min-width: 165px;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
@ -311,6 +304,8 @@ export default {
|
||||
}
|
||||
}
|
||||
.fes-layout-aside {
|
||||
z-index: 1;
|
||||
box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 5%);
|
||||
.layout-logo {
|
||||
height: 32px;
|
||||
margin: 16px;
|
||||
@ -318,7 +313,7 @@ export default {
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.logo-img {
|
||||
height: 32px;
|
||||
height: 36px;
|
||||
width: auto;
|
||||
}
|
||||
.logo-name {
|
||||
@ -335,6 +330,10 @@ export default {
|
||||
&.is-collapsed {
|
||||
.layout-logo {
|
||||
justify-content: center;
|
||||
.logo-img {
|
||||
width: 40px;
|
||||
height: auto;
|
||||
}
|
||||
.logo-name {
|
||||
display: none;
|
||||
}
|
||||
@ -342,11 +341,8 @@ export default {
|
||||
}
|
||||
}
|
||||
.layout-footer {
|
||||
padding: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<template>
|
||||
<template v-if="multiTabs">
|
||||
<a-tabs
|
||||
:activeKey="route.path"
|
||||
class="layout-content-tabs"
|
||||
@ -44,10 +45,12 @@
|
||||
<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';
|
||||
@ -71,17 +74,20 @@ export default {
|
||||
ReloadOutlined,
|
||||
MoreOutlined
|
||||
},
|
||||
props: {
|
||||
multiTabs: Boolean
|
||||
},
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const pageList = ref([]);
|
||||
|
||||
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()
|
||||
};
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
"peerDependencies": {
|
||||
"@ant-design/icons-vue": "^6.0.0",
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"@fesjs/fes-design": "^0.1.2",
|
||||
"@fesjs/fes-design": "^0.1.7",
|
||||
"vue": "^3.0.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<FTooltip v-model="isOpened">
|
||||
<FTooltip v-model="isOpened" popperClass="lang-popper" mode="popover">
|
||||
<div class="lang-icon">
|
||||
<GlobalOutlined />
|
||||
</div>
|
||||
@ -61,8 +61,13 @@ export default {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fes-tooltip.fes-tooltip-popover.lang-popper {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
|
||||
.lang-icon {
|
||||
margin: 0 8px;
|
||||
padding: 0 4px;
|
||||
@ -70,6 +75,7 @@ export default {
|
||||
}
|
||||
.lang-container {
|
||||
width: 180px;
|
||||
background: #ffffff;
|
||||
.lang-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -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 {
|
||||
};
|
||||
|
||||
@ -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 {
|
||||
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -39,6 +39,7 @@
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fesjs/fes": "^2.0.0",
|
||||
"vue": "^3.0.5"
|
||||
"vue": "^3.0.5",
|
||||
"@fesjs/fes-design": "^0.1.7"
|
||||
}
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@ export default {
|
||||
title: "Fes.js",
|
||||
footer: "Created by MumbleFe",
|
||||
multiTabs: true,
|
||||
navigation: "side",
|
||||
navigation: "top",
|
||||
theme: 'dark',
|
||||
menus: [
|
||||
{
|
||||
|
||||
@ -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",
|
||||
"@fesjs/fes-design": "^0.1.2",
|
||||
"@fesjs/fes-design": "^0.1.7",
|
||||
"ant-design-vue": "^2.2.0",
|
||||
"vue": "^3.0.5",
|
||||
"vuex": "^4.0.0"
|
||||
|
||||
@ -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>
|
||||
<div class="page">
|
||||
home
|
||||
</div>
|
||||
</template>
|
||||
@ -20,5 +20,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<style module>
|
||||
<style>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1400,10 +1400,10 @@
|
||||
minimatch "^3.0.4"
|
||||
strip-json-comments "^3.1.1"
|
||||
|
||||
"@fesjs/fes-design@^0.1.2":
|
||||
version "0.1.2"
|
||||
resolved "https://registry.npmmirror.com/@fesjs/fes-design/download/@fesjs/fes-design-0.1.2.tgz#be1751561f10585bbb95de72e8863072112f640a"
|
||||
integrity sha512-JIUd2uIC0O2E2JCUCm1pxT4ZSQg0z1+rFmtN0zS7OO0usZDKN0T/LSnivDc3K7QSAGMTeOYTgQCb6bLqf8jAfQ==
|
||||
"@fesjs/fes-design@^0.1.7":
|
||||
version "0.1.7"
|
||||
resolved "https://registry.npmmirror.com/@fesjs/fes-design/download/@fesjs/fes-design-0.1.7.tgz#0443e36f10c41a4bca62909137d0f590f0a39a75"
|
||||
integrity sha512-VWjkCWzvZ8rN99xZtkeNr06GsvhHteLlaoujaO3NQ8cf03QkehIeNhlrAMiFuIRkB+13SUeHmJMo1qoL9lJV4g==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.16.3"
|
||||
"@juggle/resize-observer" "^3.3.1"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user