queen.bee
/
tansci-boot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

master
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"> <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 { getMenus } from "@/api/auth"
import TbMenu from "./component/TbMenu.vue" import TbMenu from "./component/TbMenu.vue"
import TbHeader from "./component/TbHeader.vue" import TbHeader from "./component/TbHeader.vue"
@ -8,9 +10,10 @@
const logo = new URL('../../assets/image/logo.png', import.meta.url).href const logo = new URL('../../assets/image/logo.png', import.meta.url).href
const state = reactive({ const state = reactive({
headerHeight: '52px', headerHeight: '52px',
asideWidth: '260px', asideWidth: '220px',
defaultHeight: null, defaultHeight: null,
isCollapse: false, isCollapse: false,
language: 'zh-cn',
routers: [], routers: [],
}) })
@ -44,40 +47,47 @@
function onCollapse(val:Boolean){ function onCollapse(val:Boolean){
if(val){ if(val){
state.isCollapse = false state.isCollapse = false
state.asideWidth = "260px" state.asideWidth = "220px"
} else { } else {
state.isCollapse = true 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> </script>
<template> <template>
<div class="layout-container"> <div class="layout-container">
<el-container> <el-config-provider :locale="locale">
<el-aside :width="state.asideWidth"> <el-container>
<TbMenu :routers="state.routers" <el-aside :width="state.asideWidth">
:logo="logo" <TbMenu :routers="state.routers"
:shadow="proxy.$global.cardShadow" :logo="logo"
:title="proxy.$global.title" :shadow="proxy.$global.cardShadow"
:height="state.defaultHeight-105" :title="proxy.$global.title"
:isCollapse="state.isCollapse" :height="state.defaultHeight-105"
@onCollapse="onCollapse"/> :isCollapse="state.isCollapse"
</el-aside> @onCollapse="onCollapse"/>
<el-container> </el-aside>
<el-header :height="state.headerHeight"> <el-container>
<TbHeader :height="state.headerHeight" :isCollapse="state.isCollapse"/> <el-header :height="state.headerHeight">
</el-header> <TbHeader :height="state.headerHeight" :isCollapse="state.isCollapse" @onLanguage="onLanguage"/>
<el-main> </el-header>
<el-card :shadow="proxy.$global.cardShadow"> <el-main>
<el-scrollbar :height="state.defaultHeight-126"> <el-card :shadow="proxy.$global.cardShadow">
<router-view /> <el-scrollbar :height="state.defaultHeight-126">
</el-scrollbar> <router-view />
</el-card> </el-scrollbar>
</el-main> </el-card>
</el-container> </el-main>
</el-container> </el-container>
</div> </el-container>
</el-config-provider>
</div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.layout-container{ .layout-container{
@ -85,7 +95,7 @@
background: var(--el-bg-color); background: var(--el-bg-color);
.el-aside{ .el-aside{
margin: 0.2rem; margin: 0.2rem;
padding: 0.4rem; padding: 0.1rem;
overflow-x: auto; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
transition: all .5s; 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" import { modifyPass } from "@/api/system/user"
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const emit = defineEmits(['onLanguage'])
const props = defineProps({ const props = defineProps({
height: Number, height: Number
}) })
const state = reactive({ const state = reactive({
@ -78,6 +79,19 @@
<TbNavTabs /> <TbNavTabs />
<div> <div>
<el-card :shadow="proxy.$global.cardShadow" :body-style="{padding: '0 1rem', 'line-height': height +'px'}"> <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> <el-button link>
<template #icon> <template #icon>
<el-icon :size="24"><Monitor /></el-icon> <el-icon :size="24"><Monitor /></el-icon>
@ -94,7 +108,7 @@
<el-icon :size="24"><Sunrise v-show="isDark"/></el-icon> <el-icon :size="24"><Sunrise v-show="isDark"/></el-icon>
</template> </template>
</el-button> </el-button>
<el-popover placement="bottom" :width="260" trigger="click"> <el-popover placement="bottom" :width="260" trigger="hover">
<template #reference> <template #reference>
<el-button link>{{state.user.nickname}}</el-button> <el-button link>{{state.user.nickname}}</el-button>
</template> </template>

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

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