feat: 新增左树右表布局组件GiLeftRightPane封装，分割面板组件GiSplitPaneButton封装，以及代码优化（同步 GiDemo 更新）

src/components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue

@@ -0,0 +1,47 @@
+<template>
+  <div ref="boxRef" class="gi-flexible-box" :style="getStyle">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type CSSProperties, computed, ref } from 'vue'
+import { useBreakpoint } from '@/hooks'
+
+interface Props {
+  visible: boolean
+  direction?: 'left' | 'right'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  visible: false,
+  direction: 'left',
+})
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+}>()
+
+const boxRef = ref<HTMLElement | null>()
+const { breakpoint } = useBreakpoint()
+watch(() => breakpoint.value, (val) => {
+  if (['xs'].includes(val)) {
+    emit('update:visible', false)
+  } else {
+    emit('update:visible', true)
+  }
+}, { immediate: true })
+
+const getStyle = computed(() => {
+  const obj: CSSProperties = {}
+  obj[`margin-${props.direction}`]
+    = !props.visible && boxRef.value && boxRef.value.clientWidth ? `-${boxRef.value.clientWidth}px` : 0
+  return obj
+})
+</script>
+
+<style lang="scss" scoped>
+.gi-flexible-box {
+  transition: all 0.36s;
+}
+</style>

src/components/GiSplitPane/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="gi-split-pane">
+    <GiSplitPaneFlexibleBox v-model:visible="visible">
+      <div class="gi-split-pane__left">
+        <slot name="left"></slot>
+      </div>
+    </GiSplitPaneFlexibleBox>
+    <div class="gi-split-pane__line">
+      <GiSplitButton :collapsed="!visible" @click="handleClick"></GiSplitButton>
+    </div>
+    <div class="gi-split-pane__right">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+defineSlots<{
+  left: () => void
+}>()
+
+const visible = ref(true)
+
+const handleClick = () => {
+  visible.value = !visible.value
+}
+</script>
+
+<style lang='scss' scoped>
+.gi-split-pane {
+  flex: 1;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+
+  &__left,
+  &__right {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  &__left {
+    padding-right: $padding;
+  }
+
+  &__right {
+    flex: 1;
+    padding-left: $padding;
+  }
+
+  &__line {
+    width: 1px;
+    height: auto;
+    background-color: var(--color-border-2);
+    position: relative;
+  }
+}
+</style>