blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-10-14 10:52:28 +08:00
Code Issues Projects Releases Wiki Activity

feat: 使用fes-design替换layout插件 80%

Browse Source
This commit is contained in:
wanchun 2021-12-28 20:08:26 +08:00
parent 6782f5eedc
commit 8d381ad1ac
13 changed files with 159 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/fes-plugin-layout/package.json
View File

@ -33,7 +33,7 @@
"@ant-design/icons-vue": "^6.0.0", "@ant-design/icons-vue": "^6.0.0",
"ant-design-vue": "^2.2.0", "ant-design-vue": "^2.2.0",
"@fesjs/fes": "^2.0.0", "@fesjs/fes": "^2.0.0",
"@fesjs/fes-design": "^0.1.2", "@fesjs/fes-design": "^0.1.7",
"vue": "^3.0.5" "vue": "^3.0.5"
} }
} }

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

@ -21,7 +21,16 @@
:inverted="theme === 'dark'" :inverted="theme === 'dark'"
/> />
</f-aside> </f-aside>
<f-layout> <f-layout
:fixed="fixedSideBar"
:style="{
left: fixedSideBar
? collapsed
? '48px'
: `${sideWidth}px`
: 'auto'
}"
>
<f-header <f-header
v-if="routeLayout.top" v-if="routeLayout.top"
class="layout-header" class="layout-header"
@ -34,13 +43,18 @@
<slot name="locale"></slot> <slot name="locale"></slot>
</template> </template>
</f-header> </f-header>
<f-main class="layout-main"> <f-layout
<MultiTabProvider v-if="multiTabs" /> :embedded="!multiTabs"
<router-view v-else></router-view> :fixed="currentFixedHeader"
</f-main> :style="{ top: currentFixedHeader ? '54px' : 'auto' }"
<f-footer v-if="footer" class="layout-footer"> >
{{footer}} <f-main class="layout-main">
</f-footer> <MultiTabProvider :multiTabs="multiTabs" />
</f-main>
<f-footer v-if="footer" class="layout-footer">
{{footer}}
</f-footer>
</f-layout>
</f-layout> </f-layout>
</template> </template>
<template v-if="navigation === 'top'"> <template v-if="navigation === 'top'">
@ -67,19 +81,25 @@
<slot name="locale"></slot> <slot name="locale"></slot>
</template> </template>
</f-header> </f-header>
<f-main class="layout-main"> <f-layout
<MultiTabProvider v-if="multiTabs" /> :embedded="!multiTabs"
<router-view v-else></router-view> :fixed="currentFixedHeader"
</f-main> :style="{ top: currentFixedHeader ? '54px' : 'auto' }"
<f-footer v-if="footer" class="layout-footer"> >
{{footer}} <f-main class="layout-main">
</f-footer> <MultiTabProvider :multiTabs="multiTabs" />
</f-main>
<f-footer v-if="footer" class="layout-footer">
{{footer}}
</f-footer>
</f-layout>
</template> </template>
<template v-if="navigation === 'mixin'"> <template v-if="navigation === 'mixin'">
<f-header <f-header
v-if="routeLayout.top" v-if="routeLayout.top"
class="layout-header" class="layout-header"
:fixed="currentFixedHeader" :fixed="currentFixedHeader"
:inverted="theme === 'dark'"
> >
<div v-if="routeLayout.logo" class="layout-logo"> <div v-if="routeLayout.logo" class="layout-logo">
<img :src="logo" class="logo-img" /> <img :src="logo" class="logo-img" />
@ -92,13 +112,15 @@
<slot name="locale"></slot> <slot name="locale"></slot>
</template> </template>
</f-header> </f-header>
<f-layout> <f-layout
:fixed="currentFixedHeader"
:style="{ top: currentFixedHeader ? '54px' : 'auto' }"
>
<f-aside <f-aside
v-if="routeLayout.side" v-if="routeLayout.side"
v-model:collapsed="collapsed" v-model:collapsed="collapsed"
:fixed="fixedSideBar" :fixed="fixedSideBar"
collapsible collapsible
:inverted="theme === 'dark'"
class="layout-aside" class="layout-aside"
> >
<Menu <Menu
@ -106,13 +128,21 @@
:menus="menus" :menus="menus"
:collapsed="collapsed" :collapsed="collapsed"
mode="vertical" mode="vertical"
:inverted="theme === 'dark'"
/> />
</f-aside> </f-aside>
<f-layout> <f-layout
:embedded="!multiTabs"
:fixed="fixedSideBar"
:style="{
left: fixedSideBar
? collapsed
? '48px'
: `${sideWidth}px`
: 'auto'
}"
>
<f-main class="layout-main"> <f-main class="layout-main">
<MultiTabProvider v-if="multiTabs" /> <MultiTabProvider :multiTabs="multiTabs" />
<router-view v-else></router-view>
</f-main> </f-main>
<f-footer v-if="footer" class="layout-footer"> <f-footer v-if="footer" class="layout-footer">
{{footer}} {{footer}}
@ -121,9 +151,7 @@
</f-layout> </f-layout>
</template> </template>
</f-layout> </f-layout>
<div v-else class="content-wrapper"> <router-view v-else></router-view>
<router-view></router-view>
</div>
</template> </template>
<script> <script>
@ -232,65 +260,30 @@ export default {
const currentFixedHeader = computed( const currentFixedHeader = computed(
() => props.fixedHeader || props.navigation === 'mixin' () => 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 { return {
route, route,
routeLayout, routeLayout,
collapsed, collapsed,
currentFixedHeader, currentFixedHeader
asideFixedStyle
// sideTheme,
// currentFixedHeader,
// siderFixedStuffStyle,
// headerFixedStyle
}; };
} }
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.main-layout { .main-layout {
min-height: 100vh; height: 100vh;
.layout-header { .layout-header {
display: flex; display: flex;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
z-index: 1;
.layout-menu {
border-bottom: none;
}
.layout-logo { .layout-logo {
display: flex; display: flex;
margin: 0 24px;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
min-width: 165px;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
transition: all 0.3s; transition: all 0.3s;
@ -311,6 +304,8 @@ export default {
} }
} }
.fes-layout-aside { .fes-layout-aside {
z-index: 1;
box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 5%);
.layout-logo { .layout-logo {
height: 32px; height: 32px;
margin: 16px; margin: 16px;
@ -318,7 +313,7 @@ export default {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
.logo-img { .logo-img {
height: 32px; height: 36px;
width: auto; width: auto;
} }
.logo-name { .logo-name {
@ -335,6 +330,10 @@ export default {
&.is-collapsed { &.is-collapsed {
.layout-logo { .layout-logo {
justify-content: center; justify-content: center;
.logo-img {
width: 40px;
height: auto;
}
.logo-name { .logo-name {
display: none; display: none;
} }
@ -342,11 +341,8 @@ export default {
} }
} }
.layout-footer { .layout-footer {
padding: 16px;
text-align: center; text-align: center;
} }
} }
.content-wrapper {
position: relative;
}
</style> </style>

104
packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
View File

@ -1,53 +1,56 @@
<template> <template>
<a-tabs <template v-if="multiTabs">
:activeKey="route.path" <a-tabs
class="layout-content-tabs" :activeKey="route.path"
hide-add class="layout-content-tabs"
type="editable-card" hide-add
@tabClick="switchPage" type="editable-card"
@edit="onEdit" @tabClick="switchPage"
> @edit="onEdit"
<a-tab-pane
v-for="page in pageList"
:key="page.path"
:closable="route.path !== page.path"
> >
<template #tab> <a-tab-pane
{{page.title}} v-for="page in pageList"
<ReloadOutlined :key="page.path"
v-show="route.path === page.path" :closable="route.path !== page.path"
class="layout-tabs-close-icon" >
@click="reloadPage(page.path)" <template #tab>
/> {{page.title}}
</template> <ReloadOutlined
</a-tab-pane> v-show="route.path === page.path"
<template #tabBarExtraContent> class="layout-tabs-close-icon"
<a-dropdown> @click="reloadPage(page.path)"
<div class="layout-tabs-more-icon"> />
<MoreOutlined />
</div>
<template #overlay>
<a-menu @click="handlerMore">
<a-menu-item key="closeOtherPage">
<a href="javascript:;">关闭其他</a>
</a-menu-item>
<a-menu-item key="reloadPage">
<a href="javascript:;">刷新当前页</a>
</a-menu-item>
</a-menu>
</template> </template>
</a-dropdown> </a-tab-pane>
</template> <template #tabBarExtraContent>
</a-tabs> <a-dropdown>
<router-view v-slot="{ Component, route }"> <div class="layout-tabs-more-icon">
<keep-alive> <MoreOutlined />
<component :is="Component" :key="getPageKey(route)" /> </div>
</keep-alive> <template #overlay>
</router-view> <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>
</template>
</a-dropdown>
</template>
</a-tabs>
<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> </template>
<script> <script>
import { import {
computed, onMounted, reactive, unref, ref computed, onMounted, unref, ref
} from 'vue'; } from 'vue';
import Tabs from 'ant-design-vue/lib/tabs'; import Tabs from 'ant-design-vue/lib/tabs';
import Dropdown from 'ant-design-vue/lib/dropdown'; import Dropdown from 'ant-design-vue/lib/dropdown';
@ -71,17 +74,20 @@ export default {
ReloadOutlined, ReloadOutlined,
MoreOutlined MoreOutlined
}, },
props: {
multiTabs: Boolean
},
setup() { setup() {
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const pageList = ref([]); const pageList = ref([]);
const createPage = (route) => { const createPage = (_route) => {
const title = route.meta.title; const title = _route.meta.title;
return { return {
path: route.path, path: _route.path,
route, route: _route,
name: route.meta.name, name: _route.meta.name,
title: computed(() => transTitle(title)), title: computed(() => transTitle(title)),
key: getKey() key: getKey()
}; };

2
packages/fes-plugin-locale/package.json
View File

@ -33,7 +33,7 @@
"peerDependencies": { "peerDependencies": {
"@ant-design/icons-vue": "^6.0.0", "@ant-design/icons-vue": "^6.0.0",
"@fesjs/fes": "^2.0.0", "@fesjs/fes": "^2.0.0",
"@fesjs/fes-design": "^0.1.2", "@fesjs/fes-design": "^0.1.7",
"vue": "^3.0.5" "vue": "^3.0.5"
} }
} }

10
packages/fes-plugin-locale/src/runtime/views/SelectLang.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<FTooltip v-model="isOpened"> <FTooltip v-model="isOpened" popperClass="lang-popper" mode="popover">
<div class="lang-icon"> <div class="lang-icon">
<GlobalOutlined /> <GlobalOutlined />
</div> </div>
@ -61,8 +61,13 @@ export default {
} }
}; };
</script> </script>
<style>
.fes-tooltip.fes-tooltip-popover.lang-popper {
padding: 0;
}
</style>
<style lang="less" scoped> <style lang="less" scoped>
.lang-icon { .lang-icon {
margin: 0 8px; margin: 0 8px;
padding: 0 4px; padding: 0 4px;
@ -70,6 +75,7 @@ export default {
} }
.lang-container { .lang-container {
width: 180px; width: 180px;
background: #ffffff;
.lang-option { .lang-option {
display: flex; display: flex;
align-items: center; align-items: center;

9
packages/fes-plugin-qiankun/examples/app1/src/components/PageLoading.vue
View File

@ -1,14 +1,15 @@
<template> <template>
<div class="page-loading"> <div class="page-loading">
<Spin size="large" /> <f-spin size="large" stroke="#5384ff" />
</div> </div>
</template> </template>
<script> <script>
import Spin from 'ant-design-vue/lib/spin'; import { FSpin } from '@fesjs/fes-design';
import 'ant-design-vue/lib/spin/style/css';
export default { export default {
components: { Spin }, components: {
FSpin
},
setup() { setup() {
return { return {
}; };

10
packages/fes-plugin-qiankun/examples/main/src/components/PageLoading.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div class="page-loading"> <div class="page-loading">
<Spin size="large" /> <f-spin size="large" stroke="#5384ff" />
</div> </div>
</template> </template>
<script> <script>
import Spin from 'ant-design-vue/lib/spin'; import { FSpin } from '@fesjs/fes-design';
import 'ant-design-vue/lib/spin/style/css';
export default { export default {
components: { Spin }, components: {
FSpin
},
setup() { setup() {
return { return {
}; };
} }
}; };

3
packages/fes-plugin-qiankun/package.json
View File

@ -39,6 +39,7 @@
}, },
"peerDependencies": { "peerDependencies": {
"@fesjs/fes": "^2.0.0", "@fesjs/fes": "^2.0.0",
"vue": "^3.0.5" "vue": "^3.0.5",
"@fesjs/fes-design": "^0.1.7"
} }
} }

2
packages/fes-template/.fes.js
View File

@ -34,7 +34,7 @@ export default {
title: "Fes.js", title: "Fes.js",
footer: "Created by MumbleFe", footer: "Created by MumbleFe",
multiTabs: true, multiTabs: true,
navigation: "side", navigation: "top",
theme: 'dark', theme: 'dark',
menus: [ menus: [
{ {

2
packages/fes-template/package.json
View File

@ -59,7 +59,7 @@
"@fesjs/plugin-sass": "^2.0.0", "@fesjs/plugin-sass": "^2.0.0",
"@fesjs/plugin-monaco-editor": "^2.0.0-beta.0", "@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
"@fesjs/plugin-windicss": "^2.0.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", "ant-design-vue": "^2.2.0",
"vue": "^3.0.5", "vue": "^3.0.5",
"vuex": "^4.0.0" "vuex": "^4.0.0"

7
packages/fes-template/src/components/PageLoading.vue
View File

@ -1,15 +1,14 @@
<template> <template>
<div class="page-loading"> <div class="page-loading">
<Spin size="large" /> <f-spin size="large" stroke="#5384ff" />
</div> </div>
</template> </template>
<script> <script>
import Spin from 'ant-design-vue/lib/spin'; import { FSpin } from '@fesjs/fes-design';
import 'ant-design-vue/lib/spin/style/css';
export default { export default {
components: { components: {
Spin FSpin
}, },
setup() { setup() {
return { return {

7
packages/fes-template/src/pages/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="page">
home home
</div> </div>
</template> </template>
@ -20,5 +20,8 @@ export default {
}; };
</script> </script>
<style module> <style>
.page {
min-height: 100vh;
}
</style> </style>

8
yarn.lock
View File

@ -1400,10 +1400,10 @@
minimatch "^3.0.4" minimatch "^3.0.4"
strip-json-comments "^3.1.1" strip-json-comments "^3.1.1"
"@fesjs/fes-design@^0.1.2": "@fesjs/fes-design@^0.1.7":
version "0.1.2" version "0.1.7"
resolved "https://registry.npmmirror.com/@fesjs/fes-design/download/@fesjs/fes-design-0.1.2.tgz#be1751561f10585bbb95de72e8863072112f640a" resolved "https://registry.npmmirror.com/@fesjs/fes-design/download/@fesjs/fes-design-0.1.7.tgz#0443e36f10c41a4bca62909137d0f590f0a39a75"
integrity sha512-JIUd2uIC0O2E2JCUCm1pxT4ZSQg0z1+rFmtN0zS7OO0usZDKN0T/LSnivDc3K7QSAGMTeOYTgQCb6bLqf8jAfQ== integrity sha512-VWjkCWzvZ8rN99xZtkeNr06GsvhHteLlaoujaO3NQ8cf03QkehIeNhlrAMiFuIRkB+13SUeHmJMo1qoL9lJV4g==
dependencies: dependencies:
"@babel/runtime" "^7.16.3" "@babel/runtime" "^7.16.3"
"@juggle/resize-observer" "^3.3.1" "@juggle/resize-observer" "^3.3.1"