blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-05 11:18:54 +08:00
Code Issues Projects Releases Wiki Activity

refactor: layout组件兼容性更好,升级fes-design版本 (#100)

Browse Source
This commit is contained in:
harrywan 2022-02-22 19:02:43 +08:00 committed by GitHub
parent 1e033d488f
commit 50db7dc908
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 58 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/create-fes-app/templates/app/pc/package.json
View File

@ -52,7 +52,7 @@
"@fesjs/plugin-layout": "^4.0.0",
"@fesjs/plugin-model": "^2.0.0",
"@fesjs/plugin-enums": "^2.0.0",
"@fesjs/fes-design": "^0.2.6",
"@fesjs/fes-design": "^0.3.0",
"vue": "^3.2.6",
"core-js": "^3.8.3"
},

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

@ -31,7 +31,7 @@
},
"peerDependencies": {
"@fesjs/fes": "^2.0.0",
"@fesjs/fes-design": "^0.2.6",
"@fesjs/fes-design": "^0.3.3",
"vue": "^3.0.5"
}
}

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

@ -3,7 +3,7 @@
<template v-if="navigation === 'side'">
<f-aside
v-if="routeLayout.sidebar"
v-model:collapsed="collapsed"
v-model:collapsed="collapsedRef"
:fixed="fixedSideBar"
:width="`${sideWidth}px`"
class="layout-aside"
@ -17,26 +17,20 @@
<Menu
class="layout-menu"
:menus="menus"
:collapsed="collapsed"
:collapsed="collapsedRef"
mode="vertical"
:inverted="theme === 'dark'"
/>
</f-aside>
<f-layout
:fixed="fixedSideBar"
:style="{
left: fixedSideBar
? collapsed
? '48px'
: `${sideWidth}px`
: 'auto'
}"
:style="sideStyleRef"
>
<f-header
v-if="routeLayout.header"
ref="headerRef"
class="layout-header"
:fixed="currentFixedHeader"
:fixed="currentFixedHeaderRef"
>
<div class="layout-header-custom">
<slot name="customHeader"></slot>
@ -47,8 +41,8 @@
</f-header>
<f-layout
:embedded="!multiTabs"
:fixed="currentFixedHeader"
:style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
:fixed="currentFixedHeaderRef"
:style="headerStyleRef"
>
<f-main class="layout-main">
<MultiTabProvider :multiTabs="multiTabs" />
@ -65,7 +59,7 @@
ref="headerRef"
class="layout-header"
:inverted="theme === 'dark'"
:fixed="currentFixedHeader"
:fixed="currentFixedHeaderRef"
>
<div v-if="routeLayout.logo" class="layout-logo">
<img :src="logo" class="logo-img" />
@ -86,8 +80,8 @@
</f-header>
<f-layout
:embedded="!multiTabs"
:fixed="currentFixedHeader"
:style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
:fixed="currentFixedHeaderRef"
:style="headerStyleRef"
>
<f-main class="layout-main">
<MultiTabProvider :multiTabs="multiTabs" />
@ -102,7 +96,7 @@
v-if="routeLayout.header"
ref="headerRef"
class="layout-header"
:fixed="currentFixedHeader"
:fixed="currentFixedHeaderRef"
:inverted="theme === 'dark'"
>
<div v-if="routeLayout.logo" class="layout-logo">
@ -116,13 +110,10 @@
<slot name="locale"></slot>
</template>
</f-header>
<f-layout
:fixed="currentFixedHeader"
:style="{ top: currentFixedHeader ? `${headerHeightRef}px` : 'auto' }"
>
<f-layout :fixed="currentFixedHeaderRef" :style="headerStyleRef">
<f-aside
v-if="routeLayout.sidebar"
v-model:collapsed="collapsed"
v-model:collapsed="collapsedRef"
:fixed="fixedSideBar"
:width="`${sideWidth}px`"
collapsible
@ -131,20 +122,14 @@
<Menu
class="layout-menu"
:menus="menus"
:collapsed="collapsed"
:collapsed="collapsedRef"
mode="vertical"
/>
</f-aside>
<f-layout
:embedded="!multiTabs"
:fixed="fixedSideBar"
:style="{
left: fixedSideBar
? collapsed
? '48px'
: `${sideWidth}px`
: 'auto'
}"
:style="sideStyleRef"
>
<f-main class="layout-main">
<MultiTabProvider :multiTabs="multiTabs" />
@ -234,7 +219,7 @@ export default {
}
});
const collapsed = ref(false);
const collapsedRef = ref(false);
const route = useRoute();
const runtimeConfig = plugin.applyPlugins({
key: 'layout',
@ -271,16 +256,24 @@ export default {
}
return config;
});
const currentFixedHeader = computed(
const currentFixedHeaderRef = computed(
() => props.fixedHeader || props.navigation === 'mixin'
);
const headerStyleRef = computed(() => (currentFixedHeaderRef.value ? { top: `${headerHeightRef.value}px` } : {}));
const sideStyleRef = computed(() => (props.fixedSideBar
? {
left: collapsedRef.value ? '48px' : `${props.sideWidth}px`
}
: {}));
return {
headerRef,
headerHeightRef,
route,
routeLayout,
collapsed,
currentFixedHeader
collapsedRef,
currentFixedHeaderRef,
headerStyleRef,
sideStyleRef
};
}
};

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

@ -34,7 +34,7 @@ export default {
title: 'Fes.js',
footer: 'Created by MumbleFE',
multiTabs: false,
navigation: 'mixin',
navigation: 'side',
theme: 'dark',
menus: [
{
@ -64,10 +64,6 @@ export default {
title: '子菜单',
path: '/menuTest'
},
{
title: '子菜单a',
path: '/menuTest/a'
}
]
},
{

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

@ -60,7 +60,7 @@
"@fesjs/plugin-monaco-editor": "^2.0.0-beta.0",
"@fesjs/plugin-windicss": "^2.0.0",
"@fesjs/plugin-pinia": "^2.0.0",
"@fesjs/fes-design": "^0.2.10",
"@fesjs/fes-design": "^0.3.3",
"vue": "^3.0.5",
"vuex": "^4.0.0",
"pinia": "^2.0.11"

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

@ -21,6 +21,7 @@ export default {
<style>
.page {
height: 1000px;
}
</style>

11
packages/fes-template/src/pages/menuTest/a.vue → packages/fes-template/src/pages/menuTest/@id.vue
View File

@ -1,14 +1,23 @@
<template>
<div class="page">
menuTest-a
menuTest: {{route.params}}
</div>
</template>
<config>
{
"title": "menuTest-详情"
}
</config>
<script>
import { useRoute } from '@fesjs/fes';
export default {
components: {
},
setup() {
const route = useRoute();
return {
route
};
}
};

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

@ -3,6 +3,11 @@
menuTest-index
</div>
</template>
<config>
{
"title": "menuTest"
}
</config>
<script>
export default {
components: {

8
packages/fes-template/src/pages/menuTest/layout.vue Normal file
View File

@ -0,0 +1,8 @@
<template>
<div style="display: flex;flex-direction: column;">
<router-link to="/menuTest/1">Go to 1</router-link>
<router-link to="/menuTest/2">Go to 2</router-link>
<router-link to="/menuTest/3">Go to 3</router-link>
</div>
<router-view />
</template>

8
yarn.lock
View File

@ -1453,10 +1453,10 @@
minimatch "^3.0.4"
strip-json-comments "^3.1.1"
"@fesjs/fes-design@^0.2.10":
version "0.2.11"
resolved "https://registry.npmmirror.com/@fesjs/fes-design/-/fes-design-0.2.11.tgz#b0b7857e8122e787206ba0166f6c7b894a323b28"
integrity sha512-kunu3gOHsDied7XT57btH7WkhyAe4WNvKHoSsFzYlMmvT3wIW9RlYlmebD8e7SRCq12Ule1F+7YdYHDf/w6v/A==
"@fesjs/fes-design@^0.3.3":
version "0.3.3"
resolved "https://registry.npmmirror.com/@fesjs/fes-design/-/fes-design-0.3.3.tgz#c78a1ec37869de7e12ae94468fbb0fb04e0d6a81"
integrity sha512-wSbgMzsBILHhHhUV8EqYBLJYn3r0chO7jCx0dpIEDHxGmve8yUL3G23saJLFKF28P/GUEHr5u4iUf8b05+sgNg==
dependencies:
"@babel/runtime" "^7.16.3"
"@juggle/resize-observer" "^3.3.1"