refactor(GiPageLayout): 优化部分代码

src/components/GiPageLayout/index.vue

@@ -1,16 +1,15 @@
 <template>
   <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">
         <slot name="left"></slot>
       </div>
     </a-col>
-    <div
-      class="gi-page-layout__divider" :class="{
-        none: isCollapsed || !isDesktop,
-      }"
-    >
-      <GiSplitButton :collapsed="isCollapsed" @click="toggleCollapsed"></GiSplitButton>
+    <div v-if="slots.left" class="gi-page-layout__divider" :class="{ none: isCollapsed || !isDesktop }">
+      <div class="gi-split-button" :class="{ none: isCollapsed || !isDesktop }" @click="toggleCollapsed">
+        <icon-right v-if="isCollapsed" />
+        <icon-left v-else />
+      </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">
       <div v-if="slots.header" class="gi-page-layout__header" :style="props.headerStyle">
@@ -26,7 +25,7 @@
 <script setup lang='ts'>
 import type { ColProps } from '@arco-design/web-vue'
 import type { CSSProperties } from 'vue'
-import { useDevice } from '@/hooks'
+import { useBreakpoint, useDevice } from '@/hooks'
 
 defineOptions({ name: 'GiPageLayout' })
 
@@ -49,7 +48,6 @@ defineSlots<{
 }>()
 
 const { isDesktop } = useDevice()
-
 const getClass = computed(() => {
   return {
     'gi-page-layout--margin': props.margin,
@@ -82,6 +80,11 @@ const isCollapsed = ref(false)
 const toggleCollapsed = () => {
   isCollapsed.value = !isCollapsed.value
 }
+
+const { breakpoint } = useBreakpoint()
+watch(() => breakpoint.value, (val) => {
+  isCollapsed.value = ['xs'].includes(val)
+}, { immediate: true })
 </script>
 
 <style lang='scss' scoped>
@@ -155,4 +158,29 @@ const toggleCollapsed = () => {
 .gi-page-layout__divider.none {
   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>