ContiNew/continew-admin-ui
1
1
Fork 0
mirror of https://github.com/continew-org/continew-admin-ui.git synced 2025-09-09 20:57:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(GiPageLayout): 优化部分代码

Browse Source
This commit is contained in:
Charles7c
2025-04-05 17:43:33 +08:00
parent 32c6c16362
commit 101afec470
1 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/GiPageLayout/index.vue
View File

@@ -1,16 +1,15 @@
<template> <template>
<a-row align="stretch" :gutter="rowGutter" class="gi-page-layout" :class="getClass"> <a-row align="stretch" :gutter="rowGutter" class="gi-page-layout" :class="getClass">
<a-col v-if="slots.left" v-show="!isCollapsed || (!isDesktop && !isCollapsed)" v-bind="props.leftColProps" :xs="isCollapsed ? 1 : 23" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4"> <a-col v-if="slots.left" v-show="!isCollapsed" v-bind="props.leftColProps" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4">
<div class="gi-page-layout__left" :style="props.leftStyle"> <div class="gi-page-layout__left" :style="props.leftStyle">
<slot name="left"></slot> <slot name="left"></slot>
</div> </div>
</a-col> </a-col>
<div <div v-if="slots.left" class="gi-page-layout__divider" :class="{ none: isCollapsed || !isDesktop }">
class="gi-page-layout__divider" :class="{ <div class="gi-split-button" :class="{ none: isCollapsed || !isDesktop }" @click="toggleCollapsed">
none: isCollapsed || !isDesktop, <icon-right v-if="isCollapsed" />
}" <icon-left v-else />
> </div>
<GiSplitButton :collapsed="isCollapsed" @click="toggleCollapsed"></GiSplitButton>
</div> </div>
<a-col v-show="isDesktop || (!isDesktop && isCollapsed)" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" v-bind="props.rightColProps"> <a-col v-show="isDesktop || (!isDesktop && isCollapsed)" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" v-bind="props.rightColProps">
<div v-if="slots.header" class="gi-page-layout__header" :style="props.headerStyle"> <div v-if="slots.header" class="gi-page-layout__header" :style="props.headerStyle">
@@ -26,7 +25,7 @@
<script setup lang='ts'> <script setup lang='ts'>
import type { ColProps } from '@arco-design/web-vue' import type { ColProps } from '@arco-design/web-vue'
import type { CSSProperties } from 'vue' import type { CSSProperties } from 'vue'
import { useDevice } from '@/hooks' import { useBreakpoint, useDevice } from '@/hooks'
defineOptions({ name: 'GiPageLayout' }) defineOptions({ name: 'GiPageLayout' })
@@ -49,7 +48,6 @@ defineSlots<{
}>() }>()
const { isDesktop } = useDevice() const { isDesktop } = useDevice()
const getClass = computed(() => { const getClass = computed(() => {
return { return {
'gi-page-layout--margin': props.margin, 'gi-page-layout--margin': props.margin,
@@ -82,6 +80,11 @@ const isCollapsed = ref(false)
const toggleCollapsed = () => { const toggleCollapsed = () => {
isCollapsed.value = !isCollapsed.value isCollapsed.value = !isCollapsed.value
} }
const { breakpoint } = useBreakpoint()
watch(() => breakpoint.value, (val) => {
isCollapsed.value = ['xs'].includes(val)
}, { immediate: true })
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
@@ -155,4 +158,29 @@ const toggleCollapsed = () => {
.gi-page-layout__divider.none { .gi-page-layout__divider.none {
width: 0; width: 0;
} }
.gi-split-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
border: 1px solid var(--color-border-2);
box-sizing: border-box;
background-color: var(--color-bg-1);
cursor: pointer;
transition: all .3s cubic-bezier(.4,0,.2,1);
width: 24px;
height: 24px;
border-radius: 50%;
left: -12px;
overflow: hidden;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.gi-split-button.none {
left: 0;
}
</style> </style>