lilonglong/tansci-boot
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新

Browse Source
This commit is contained in:
tanyp 2023-05-06 16:30:37 +08:00
parent 5c891a8b6f
commit 4b99b44d08
3 changed files with 62 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
tansci-boot-ui/src/components/layout/Index.vue
View File

@ -1,5 +1,7 @@
<script setup lang="ts">
import { reactive, onMounted, onBeforeMount, onDeactivated, getCurrentInstance } from "vue"
import { computed, reactive, onMounted, onBeforeMount, onDeactivated, getCurrentInstance } from "vue"
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
import { getMenus } from "@/api/auth"
import TbMenu from "./component/TbMenu.vue"
import TbHeader from "./component/TbHeader.vue"
@ -8,9 +10,10 @@
const logo = new URL('../../assets/image/logo.png', import.meta.url).href
const state = reactive({
headerHeight: '52px',
asideWidth: '260px',
asideWidth: '220px',
defaultHeight: null,
isCollapse: false,
language: 'zh-cn',
routers: [],
})
@ -44,40 +47,47 @@
function onCollapse(val:Boolean){
if(val){
state.isCollapse = false
state.asideWidth = "260px"
state.asideWidth = "220px"
} else {
state.isCollapse = true
state.asideWidth = "110px"
state.asideWidth = "80px"
}
}
const locale = computed(() => (state.language === 'zh-cn' ? zhCn : en))
function onLanguage(val:any){
state.language = val
}
</script>
<template>
<div class="layout-container">
<el-container>
<el-aside :width="state.asideWidth">
<TbMenu :routers="state.routers"
:logo="logo"
:shadow="proxy.$global.cardShadow"
:title="proxy.$global.title"
:height="state.defaultHeight-105"
:isCollapse="state.isCollapse"
@onCollapse="onCollapse"/>
</el-aside>
<el-container>
<el-header :height="state.headerHeight">
<TbHeader :height="state.headerHeight" :isCollapse="state.isCollapse"/>
</el-header>
<el-main>
<el-card :shadow="proxy.$global.cardShadow">
<el-scrollbar :height="state.defaultHeight-126">
<router-view />
</el-scrollbar>
</el-card>
</el-main>
</el-container>
</el-container>
</div>
<div class="layout-container">
<el-config-provider :locale="locale">
<el-container>
<el-aside :width="state.asideWidth">
<TbMenu :routers="state.routers"
:logo="logo"
:shadow="proxy.$global.cardShadow"
:title="proxy.$global.title"
:height="state.defaultHeight-105"
:isCollapse="state.isCollapse"
@onCollapse="onCollapse"/>
</el-aside>
<el-container>
<el-header :height="state.headerHeight">
<TbHeader :height="state.headerHeight" :isCollapse="state.isCollapse" @onLanguage="onLanguage"/>
</el-header>
<el-main>
<el-card :shadow="proxy.$global.cardShadow">
<el-scrollbar :height="state.defaultHeight-126">
<router-view />
</el-scrollbar>
</el-card>
</el-main>
</el-container>
</el-container>
</el-config-provider>
</div>
</template>
<style lang="scss" scoped>
.layout-container{
@ -85,7 +95,7 @@
background: var(--el-bg-color);
.el-aside{
margin: 0.2rem;
padding: 0.4rem;
padding: 0.1rem;
overflow-x: auto;
overflow-y: hidden;
transition: all .5s;

18
tansci-boot-ui/src/components/layout/component/TbHeader.vue
View File

@ -8,8 +8,9 @@
import { modifyPass } from "@/api/system/user"
const { proxy } = getCurrentInstance()
const emit = defineEmits(['onLanguage'])
const props = defineProps({
height: Number,
height: Number
})
const state = reactive({
@ -78,6 +79,19 @@
<TbNavTabs />
<div>
<el-card :shadow="proxy.$global.cardShadow" :body-style="{padding: '0 1rem', 'line-height': height +'px'}">
<el-popover placement="bottom" trigger="hover">
<template #reference>
<el-button link>
<template #icon>
<el-icon :size="24"><ChromeFilled /></el-icon>
</template>
</el-button>
</template>
<div>
<el-button @click="$emit('onLanguage', 'zh-cn')" link>中文</el-button><br/>
<el-button @click="$emit('onLanguage', 'en')" link>English</el-button>
</div>
</el-popover>
<el-button link>
<template #icon>
<el-icon :size="24"><Monitor /></el-icon>
@ -94,7 +108,7 @@
<el-icon :size="24"><Sunrise v-show="isDark"/></el-icon>
</template>
</el-button>
<el-popover placement="bottom" :width="260" trigger="click">
<el-popover placement="bottom" :width="260" trigger="hover">
<template #reference>
<el-button link>{{state.user.nickname}}</el-button>
</template>

11
tansci-boot-ui/src/components/layout/component/TbMenu.vue
View File

@ -21,12 +21,12 @@
</script>
<template>
<el-card :shadow="shadow" :body-style="{padding: '1rem 0.8rem', position: 'relative'}">
<el-card :shadow="shadow" :body-style="{padding: '1rem 0.2rem', position: 'relative'}">
<div @click="toHome" class="logo">
<el-image :src="logo" fit="fit" :style="{width: isCollapse?'60%':'20%', height: '100%'}"></el-image>
<span v-show="!isCollapse" class="title">{{title}}</span>
</div>
<el-scrollbar :height="height">
<el-scrollbar :height="height" :min-size="10">
<el-menu router :default-active="$route.path" :collapse="isCollapse">
<template v-for="item in routers" :key="item">
<el-menu-item v-if="!item.children || item.children.length <= 1" :index="item.path">
@ -39,7 +39,7 @@
</template>
</el-menu>
</el-scrollbar>
<el-button @click="$emit('onCollapse', isCollapse)" :icon="isCollapse ? 'ArrowRightBold':'ArrowLeftBold'" circle size="small" class="collapse"></el-button>
<el-button @click="$emit('onCollapse', isCollapse)" :icon="isCollapse ? 'CaretRight':'CaretLeft'" circle size="small" class="collapse"></el-button>
</el-card>
</template>
<style lang="scss" scoped>
@ -74,7 +74,8 @@
}
.collapse{
position: absolute;
right: -10px;
top: 25%;
right: -7px;
bottom: -7px;
transform:rotate(50deg);
}
</style>