Add File
This commit is contained in:
237
frontend/src/components/layout/LayoutDsl.vue
Normal file
237
frontend/src/components/layout/LayoutDsl.vue
Normal file
@@ -0,0 +1,237 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, computed, onUnmounted } from 'vue'
|
||||||
|
import Menu from './Menu.vue'
|
||||||
|
import LOGOCustom from '@/assets/svg/LOGO-custom.svg'
|
||||||
|
import custom_small from '@/assets/svg/logo-custom_small.svg'
|
||||||
|
import Workspace from './Workspace.vue'
|
||||||
|
import Person from './Person.vue'
|
||||||
|
import LOGO from '@/assets/LOGO.svg'
|
||||||
|
import LOGO_fold from '@/assets/LOGO-fold.svg'
|
||||||
|
import icon_moments_categories_outlined from '@/assets/svg/icon_moments-categories_outlined.svg'
|
||||||
|
import icon_side_fold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
|
||||||
|
import icon_side_expand_outlined from '@/assets/svg/icon_side-expand_outlined.svg'
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { useAppearanceStoreWithOut } from '@/stores/appearance'
|
||||||
|
import logo_blue from '@/assets/blue/LOGO-blue.png'
|
||||||
|
import logo_fold_blue from '@/assets/blue/LOGO-head_blue.png'
|
||||||
|
import { useEmitt } from '@/utils/useEmitt'
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const collapse = ref(false)
|
||||||
|
const collapseCopy = ref(false)
|
||||||
|
const appearanceStore = useAppearanceStoreWithOut()
|
||||||
|
let time: any
|
||||||
|
onUnmounted(() => {
|
||||||
|
clearTimeout(time)
|
||||||
|
})
|
||||||
|
const handleCollapseChange = (val: any = true) => {
|
||||||
|
collapseCopy.value = val
|
||||||
|
clearTimeout(time)
|
||||||
|
time = setTimeout(() => {
|
||||||
|
collapse.value = val
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
useEmitt({
|
||||||
|
name: 'collapse-change',
|
||||||
|
callback: handleCollapseChange,
|
||||||
|
})
|
||||||
|
const handleFoldExpand = () => {
|
||||||
|
handleCollapseChange(!collapse.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
const toWorkspace = () => {
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
const route = useRoute()
|
||||||
|
const showSysmenu = computed(() => {
|
||||||
|
return route.path.includes('/system')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="system-layout">
|
||||||
|
<div class="left-side" :class="collapse && 'left-side-collapse'">
|
||||||
|
<template v-if="appearanceStore.isBlue">
|
||||||
|
<img
|
||||||
|
v-if="collapse"
|
||||||
|
width="30"
|
||||||
|
height="30"
|
||||||
|
:src="logo_fold_blue"
|
||||||
|
style="margin: 0 0 6px 5px"
|
||||||
|
/>
|
||||||
|
<img v-else width="130" height="31" :src="logo_blue" style="margin-bottom: 6px" />
|
||||||
|
</template>
|
||||||
|
<template v-else-if="appearanceStore.themeColor === 'custom'">
|
||||||
|
<custom_small v-if="collapse" style="margin: 0 0 6px 5px"></custom_small>
|
||||||
|
<LOGOCustom v-else style="margin-bottom: 6px"></LOGOCustom>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<LOGO_fold v-if="collapse" style="margin: 0 0 6px 5px"></LOGO_fold>
|
||||||
|
<LOGO v-else style="margin-bottom: 6px"></LOGO>
|
||||||
|
</template>
|
||||||
|
<Workspace v-if="!showSysmenu" :collapse="collapse"></Workspace>
|
||||||
|
<Menu :collapse="collapseCopy"></Menu>
|
||||||
|
<div class="bottom">
|
||||||
|
<div
|
||||||
|
v-if="showSysmenu"
|
||||||
|
class="back-to_workspace"
|
||||||
|
:class="collapse && 'collapse'"
|
||||||
|
@click="toWorkspace"
|
||||||
|
>
|
||||||
|
<el-icon size="18">
|
||||||
|
<icon_moments_categories_outlined></icon_moments_categories_outlined>
|
||||||
|
</el-icon>
|
||||||
|
{{ collapse ? '' : $t('workspace.return_to_workspace') }}
|
||||||
|
</div>
|
||||||
|
<div class="personal-info">
|
||||||
|
<Person :collapse="collapse" :in-sysmenu="showSysmenu"></Person>
|
||||||
|
<el-icon size="20" class="fold" @click="handleFoldExpand">
|
||||||
|
<icon_side_expand_outlined v-if="collapse"></icon_side_expand_outlined>
|
||||||
|
<icon_side_fold_outlined v-else></icon_side_fold_outlined>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right-main" :class="collapse && 'right-side-collapse'">
|
||||||
|
<div class="content">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.system-layout {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #f1f4f3;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
width: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-side {
|
||||||
|
width: 240px;
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
position: relative;
|
||||||
|
min-width: 240px;
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
left: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
.back-to_workspace {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
height: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:not(.collapse) {
|
||||||
|
background: #1f23290a;
|
||||||
|
border: 1px solid #d9dcdf;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background-color: #1f23291a;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: #1f232926;
|
||||||
|
}
|
||||||
|
.ed-icon {
|
||||||
|
margin-right: 4.95px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.personal-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 16px;
|
||||||
|
|
||||||
|
.fold {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: auto;
|
||||||
|
border-radius: 6px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
background: #1f23291a;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: #1f232933;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.left-side-collapse {
|
||||||
|
width: 64px;
|
||||||
|
min-width: 64px;
|
||||||
|
padding: 16px 12px;
|
||||||
|
// animation: rotate 0.1s ease-in-out;
|
||||||
|
|
||||||
|
.ed-menu--collapse {
|
||||||
|
--ed-menu-icon-width: 32px;
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
left: 12px;
|
||||||
|
width: calc(100% - 24px);
|
||||||
|
.ed-icon {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.personal-info {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.default-avatar {
|
||||||
|
margin: 0 0 26px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fold {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-main {
|
||||||
|
width: calc(100% - 240px);
|
||||||
|
padding: 8px 8px 8px 0;
|
||||||
|
max-height: 100vh;
|
||||||
|
|
||||||
|
&.right-side-collapse {
|
||||||
|
width: calc(100% - 64px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px 24px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0px 2px 4px 0px #1f23291f;
|
||||||
|
overflow-x: auto;
|
||||||
|
|
||||||
|
&:has(.no-padding) {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user