From f3cb664e772e8bd53da1345ce31ce8c62310f6d3 Mon Sep 17 00:00:00 2001
From: MoChou <1373639299@qq.com>
Date: Sat, 28 Dec 2024 13:05:44 +0800
Subject: [PATCH 1/8] =?UTF-8?q?chore:=20=E6=96=B0=E5=A2=9E=E9=9D=A2?=
 =?UTF-8?q?=E6=9D=BF=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CaSplitPanel/index.vue | 246 ++++++++++++++++++++++++++
 src/types/components.d.ts             |   2 +
 2 files changed, 248 insertions(+)
 create mode 100644 src/components/CaSplitPanel/index.vue

diff --git a/src/components/CaSplitPanel/index.vue b/src/components/CaSplitPanel/index.vue
new file mode 100644
index 0000000..d4e3f6f
--- /dev/null
+++ b/src/components/CaSplitPanel/index.vue
@@ -0,0 +1,246 @@
+<template>
+  <div
+    ref="rootRef"
+    class="ca-split-panel"
+    :class="{
+      'is-vertical': vertical,
+      'is-reverse': reverse,
+      'is-resizing': resizing,
+      'is-collapse': isCollapse,
+      'is-responsive': isResponsive,
+    }"
+    :style="customStyle"
+  >
+    <div ref="sideRef" class="ca-split-panel__side" :style="sideStyle">
+      <div class="ca-split-panel__content">
+        <slot></slot>
+      </div>
+      <div class="ca-split-panel__footer">
+        <slot name="footer"></slot>
+      </div>
+    </div>
+
+    <div
+      v-if="resizable && !isCollapse"
+      class="ca-split-panel__resize-trigger"
+      @mousedown="handleResize"
+    ></div>
+
+    <div
+      v-if="allowCollapse"
+      class="ca-split-panel__collapse-trigger"
+      :class="{ 'is-collapse': isCollapse }"
+      @click="toggleCollapse"
+    >
+      <a-button type="text">
+        <template #icon>
+          <IconLeft v-if="!isCollapse" />
+          <IconRight v-else />
+        </template>
+      </a-button>
+    </div>
+
+    <div class="ca-split-panel__main" :style="mainStyle">
+      <slot name="main">
+        <div class="ca-split-panel__main-content">
+          <slot name="main-content"></slot>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { IconLeft, IconRight } from '@arco-design/web-vue/es/icon'
+
+const props = withDefaults(defineProps<{
+  size?: string
+  minSize?: number
+  maxSize?: number
+  customStyle?: any
+  bodyStyle?: any
+  allowCollapse?: boolean
+  collapse?: boolean
+  vertical?: boolean
+  reverse?: boolean
+  resizable?: boolean
+  responsive?: boolean
+}>(), {
+  size: '20%',
+  minSize: 200,
+  maxSize: 800,
+  allowCollapse: true,
+  collapse: false,
+  vertical: false,
+  reverse: false,
+  resizable: true,
+  responsive: true,
+})
+
+const emit = defineEmits(['update:collapse'])
+
+const rootRef = ref<HTMLElement | null>(null)
+const sideRef = ref<HTMLElement | null>(null)
+const isCollapse = ref(props.collapse)
+const resizing = ref(false)
+const resizedSize = ref<string | null>(null)
+
+const sideStyle = computed(() => ({
+  [props.vertical ? 'height' : 'width']: isCollapse.value ? '0' : (resizedSize.value || props.size),
+  transition: 'width 0.3s ease',
+}))
+
+const mainStyle = computed(() => ({
+  transition: 'padding-left 0.3s ease',
+  flex: 1,
+}))
+
+const isResponsive = computed(() => {
+  if (props.responsive === false) return false
+  return window.innerWidth < 768
+})
+
+const toggleCollapse = () => {
+  isCollapse.value = !isCollapse.value
+  emit('update:collapse', isCollapse.value)
+}
+
+const handleResize = (event: MouseEvent) => {
+  event.preventDefault()
+  resizing.value = true
+
+  const startPosition = props.vertical ? event.clientY : event.clientX
+  const startSize = sideRef.value?.[props.vertical ? 'offsetHeight' : 'offsetWidth'] ?? 0
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!resizing.value) return
+
+    const delta = (props.vertical ? e.clientY : e.clientX) - startPosition
+    let newSize = startSize + (props.reverse ? -delta : delta)
+
+    newSize = Math.max(props.minSize, Math.min(props.maxSize, newSize))
+    resizedSize.value = `${newSize}px`
+  }
+
+  const handleMouseUp = () => {
+    resizing.value = false
+    document.removeEventListener('mousemove', handleMouseMove)
+    document.removeEventListener('mouseup', handleMouseUp)
+  }
+
+  document.addEventListener('mousemove', handleMouseMove)
+  document.addEventListener('mouseup', handleMouseUp)
+}
+</script>
+
+<style lang="less" scoped>
+.ca-split-panel {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background: var(--color-bg-2);
+
+  &.is-vertical {
+    flex-direction: column;
+  }
+
+  &.is-reverse {
+    flex-direction: row-reverse;
+
+    &.is-vertical {
+      flex-direction: column-reverse;
+    }
+  }
+
+  &__side {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    background: var(--color-bg-2);
+    border-right: 1px solid var(--color-border);
+    overflow: hidden;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+    padding: 16px;
+  }
+
+  &__footer {
+    padding: 16px;
+/*    border-top: 1px solid var(--color-border);*/
+  }
+
+  &__main {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background: var(--color-bg-1);
+  }
+
+  &__main-header {
+    padding: 16px;
+  }
+
+  &__main-content {
+    flex: 1;
+    overflow: auto;
+    padding: 16px;
+  }
+
+  &__resize-trigger {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 30%;
+    width: 4px;
+    background: transparent;
+    cursor: col-resize;
+    transition: background-color 0.1s;
+    z-index: 1;
+
+    &:hover {
+      background: var(--color-primary-light-4);
+    }
+  }
+
+  &__collapse-trigger {
+    position: absolute;
+    left: calc(20% - 20px);
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    transition: left 0.3s ease;
+    background: var(--color-bg-2);
+    border-radius: 50%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    cursor: pointer;
+
+    &.is-collapse {
+      left: -20px;
+    }
+
+    .arco-btn {
+      min-width: unset;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      border-radius: 50%;
+    }
+  }
+
+  &.is-collapse {
+    .ca-split-panel__side {
+      width: 0;
+    }
+
+    .ca-split-panel__main {
+      padding-left: 0;
+    }
+  }
+}
+</style>
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 89911eb..3e21b33 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -9,6 +9,8 @@ declare module 'vue' {
   export interface GlobalComponents {
     Avatar: typeof import('./../components/Avatar/index.vue')['default']
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
+    CaCard: typeof import('./../components/CaCard/index.vue')['default']
+    CaSplitPanel: typeof import('./../components/CaSplitPanel/index.vue')['default']
     CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
     Chart: typeof import('./../components/Chart/index.vue')['default']
     CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
-- 
Gitee


From e4cc996459051589dd3e37d7ac40ef644106e39c Mon Sep 17 00:00:00 2001
From: MoChou <1373639299@qq.com>
Date: Sat, 28 Dec 2024 13:07:36 +0800
Subject: [PATCH 2/8] =?UTF-8?q?style:=20=E5=9F=BA=E7=A1=80=E7=9A=84?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=E6=8A=98=E5=8F=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CaSplitPanel/index.vue | 68 +++++++++++++++++++++++++--
 1 file changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/components/CaSplitPanel/index.vue b/src/components/CaSplitPanel/index.vue
index d4e3f6f..c49c44d 100644
--- a/src/components/CaSplitPanel/index.vue
+++ b/src/components/CaSplitPanel/index.vue
@@ -8,6 +8,7 @@
       'is-resizing': resizing,
       'is-collapse': isCollapse,
       'is-responsive': isResponsive,
+      'is-mobile': isMobile,
     }"
     :style="customStyle"
   >
@@ -29,7 +30,10 @@
     <div
       v-if="allowCollapse"
       class="ca-split-panel__collapse-trigger"
-      :class="{ 'is-collapse': isCollapse }"
+      :class="{
+        'is-collapse': isCollapse,
+        'is-mobile': isMobile,
+      }"
       @click="toggleCollapse"
     >
       <a-button type="text">
@@ -51,7 +55,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { IconLeft, IconRight } from '@arco-design/web-vue/es/icon'
 
 const props = withDefaults(defineProps<{
@@ -85,10 +89,13 @@ const sideRef = ref<HTMLElement | null>(null)
 const isCollapse = ref(props.collapse)
 const resizing = ref(false)
 const resizedSize = ref<string | null>(null)
+const isMobile = ref(false)
 
 const sideStyle = computed(() => ({
-  [props.vertical ? 'height' : 'width']: isCollapse.value ? '0' : (resizedSize.value || props.size),
-  transition: 'width 0.3s ease',
+  [props.vertical ? 'height' : 'width']: isCollapse.value ? '0' : (isMobile.value ? '100%' : (resizedSize.value || props.size)),
+  transition: 'all 0.3s ease',
+  position: isMobile.value ? 'absolute' : 'relative',
+  zIndex: isMobile.value ? 10 : 1,
 }))
 
 const mainStyle = computed(() => ({
@@ -132,6 +139,19 @@ const handleResize = (event: MouseEvent) => {
   document.addEventListener('mousemove', handleMouseMove)
   document.addEventListener('mouseup', handleMouseUp)
 }
+
+const checkMobile = () => {
+  isMobile.value = window.innerWidth <= 768
+}
+
+onMounted(() => {
+  checkMobile()
+  window.addEventListener('resize', checkMobile)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkMobile)
+})
 </script>
 
 <style lang="less" scoped>
@@ -242,5 +262,45 @@ const handleResize = (event: MouseEvent) => {
       padding-left: 0;
     }
   }
+
+  &.is-mobile {
+    .ca-split-panel__side {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      background: var(--color-bg-2);
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+    }
+
+    .ca-split-panel__collapse-trigger {
+      position: fixed;
+      left: calc(100% - 20px);
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 11;
+
+      &.is-collapse {
+        left: 0;
+      }
+    }
+
+    &.is-collapse {
+      .ca-split-panel__side {
+        transform: translateX(-100%);
+      }
+    }
+  }
+
+  &__collapse-trigger {
+    &.is-mobile {
+      background: var(--color-bg-2);
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+
+      .arco-btn {
+        border-radius: 0 50% 50% 0;
+      }
+    }
+  }
 }
 </style>
-- 
Gitee


From d5a1e06d5127c144a5727e2df59a1b8811ad5ddc Mon Sep 17 00:00:00 2001
From: MoChou <1373639299@qq.com>
Date: Sat, 28 Dec 2024 13:24:03 +0800
Subject: [PATCH 3/8] =?UTF-8?q?style:=E9=9D=A2=E6=9D=BF=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CaSplitPanel/index.vue | 164 ++++++++++++++++++++++----
 1 file changed, 139 insertions(+), 25 deletions(-)

diff --git a/src/components/CaSplitPanel/index.vue b/src/components/CaSplitPanel/index.vue
index c49c44d..c6738c4 100644
--- a/src/components/CaSplitPanel/index.vue
+++ b/src/components/CaSplitPanel/index.vue
@@ -14,10 +14,7 @@
   >
     <div ref="sideRef" class="ca-split-panel__side" :style="sideStyle">
       <div class="ca-split-panel__content">
-        <slot></slot>
-      </div>
-      <div class="ca-split-panel__footer">
-        <slot name="footer"></slot>
+        <slot name="left"></slot>
       </div>
     </div>
 
@@ -34,6 +31,7 @@
         'is-collapse': isCollapse,
         'is-mobile': isMobile,
       }"
+      :style="!isMobile ? collapseTriggerStyle : undefined"
       @click="toggleCollapse"
     >
       <a-button type="text">
@@ -45,19 +43,30 @@
     </div>
 
     <div class="ca-split-panel__main" :style="mainStyle">
-      <slot name="main">
-        <div class="ca-split-panel__main-content">
-          <slot name="main-content"></slot>
-        </div>
-      </slot>
+      <div class="ca-split-panel__main-content">
+        <slot name="main"></slot>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { IconLeft, IconRight } from '@arco-design/web-vue/es/icon'
 
+/**
+ * 组件属性定义
+ * @property {string} size - 侧边栏尺寸，支持百分比或像素值，默认 '20%'
+ * @property {number} minSize - 侧边栏最小尺寸（像素），默认 200
+ * @property {number} maxSize - 侧边栏最大尺寸（像素），默认 800
+ * @property {object} customStyle - 自定义根元素样式
+ * @property {object} bodyStyle - 自定义内容区域样式
+ * @property {boolean} allowCollapse - 是否允许折叠，默认 true
+ * @property {boolean} collapse - 是否折叠状态，默认 false
+ * @property {boolean} vertical - 是否垂直分割，默认 false
+ * @property {boolean} reverse - 是否反转布局，默认 false
+ * @property {boolean} resizable - 是否可调整大小，默认 true
+ * @property {boolean} responsive - 是否启用响应式，默认 true
+ */
 const props = withDefaults(defineProps<{
   size?: string
   minSize?: number
@@ -82,73 +91,142 @@ const props = withDefaults(defineProps<{
   responsive: true,
 })
 
+// 定义事件
 const emit = defineEmits(['update:collapse'])
 
+// DOM 引用
 const rootRef = ref<HTMLElement | null>(null)
 const sideRef = ref<HTMLElement | null>(null)
-const isCollapse = ref(props.collapse)
-const resizing = ref(false)
-const resizedSize = ref<string | null>(null)
-const isMobile = ref(false)
 
+// 状态管理
+const isCollapse = ref(props.collapse) // 折叠状态
+const resizing = ref(false) // 是否正在调整大小
+const resizedSize = ref<string | null>(null) // 调整后的尺寸
+const isMobile = ref(false) // 是否移动端
+
+/**
+ * 将 size 属性转换为带单位的尺寸值
+ * 处理百分比和像素值的转换
+ */
+const normalizedSize = computed(() => {
+  if (typeof props.size === 'string') {
+    // 如果已经带有单位（%或px），直接返回
+    if (props.size.includes('%') || props.size.includes('px')) {
+      return props.size
+    }
+    // 数字字符串，添加px
+    return `${props.size}px`
+  }
+  // 数字类型，添加px
+  return `${props.size}px`
+})
+
+/**
+ * 计算侧边栏样式
+ */
 const sideStyle = computed(() => ({
-  [props.vertical ? 'height' : 'width']: isCollapse.value ? '0' : (isMobile.value ? '100%' : (resizedSize.value || props.size)),
+  [props.vertical ? 'height' : 'width']: isCollapse.value
+    ? '0'
+    : (isMobile.value ? '100%' : (resizedSize.value || normalizedSize.value)),
   transition: 'all 0.3s ease',
   position: isMobile.value ? 'absolute' : 'relative',
   zIndex: isMobile.value ? 10 : 1,
 }))
 
+/**
+ * 计算主内容区域样式
+ */
 const mainStyle = computed(() => ({
   transition: 'padding-left 0.3s ease',
   flex: 1,
 }))
 
+/**
+ * 判断是否启用响应式布局
+ * 当屏幕宽度小于 768px 时启用移动端模式
+ */
 const isResponsive = computed(() => {
   if (props.responsive === false) return false
   return window.innerWidth < 768
 })
 
+/**
+ * 计算折叠触发器的样式
+ */
+const collapseTriggerStyle = computed(() => {
+  if (isMobile.value) {
+    return {}
+  }
+
+  const baseSize = resizedSize.value || normalizedSize.value
+
+  return {
+    left: isCollapse.value
+      ? '-20px'
+      : `calc(${baseSize} - 20px)`,
+  }
+})
+
+/**
+ * 切换折叠状态
+ * 触发 update:collapse 事件通知父组件
+ */
 const toggleCollapse = () => {
   isCollapse.value = !isCollapse.value
   emit('update:collapse', isCollapse.value)
 }
 
+/**
+ * 处理大小调整
+ * @param event 鼠标事件
+ */
 const handleResize = (event: MouseEvent) => {
   event.preventDefault()
   resizing.value = true
 
+  // 记录开始位置和初始尺寸
   const startPosition = props.vertical ? event.clientY : event.clientX
   const startSize = sideRef.value?.[props.vertical ? 'offsetHeight' : 'offsetWidth'] ?? 0
 
+  // 处理鼠标移动
   const handleMouseMove = (e: MouseEvent) => {
     if (!resizing.value) return
 
     const delta = (props.vertical ? e.clientY : e.clientX) - startPosition
     let newSize = startSize + (props.reverse ? -delta : delta)
 
+    // 限制在最小和最大尺寸范围内
     newSize = Math.max(props.minSize, Math.min(props.maxSize, newSize))
     resizedSize.value = `${newSize}px`
   }
 
+  // 处理鼠标释放
   const handleMouseUp = () => {
     resizing.value = false
     document.removeEventListener('mousemove', handleMouseMove)
     document.removeEventListener('mouseup', handleMouseUp)
   }
 
+  // 添加事件监听
   document.addEventListener('mousemove', handleMouseMove)
   document.addEventListener('mouseup', handleMouseUp)
 }
 
+/**
+ * 检查是否为移动端设备
+ * 根据窗口宽度判断
+ */
 const checkMobile = () => {
   isMobile.value = window.innerWidth <= 768
 }
 
+// 组件挂载时初始化
 onMounted(() => {
   checkMobile()
   window.addEventListener('resize', checkMobile)
 })
 
+// 组件卸载时清理
 onUnmounted(() => {
   window.removeEventListener('resize', checkMobile)
 })
@@ -156,16 +234,19 @@ onUnmounted(() => {
 
 <style lang="less" scoped>
 .ca-split-panel {
+  /* 基础布局样式 */
   display: flex;
   width: 100%;
   height: 100%;
   position: relative;
   background: var(--color-bg-2);
 
+  /* 垂直布局模式 */
   &.is-vertical {
     flex-direction: column;
   }
 
+  /* 反转布局模式 */
   &.is-reverse {
     flex-direction: row-reverse;
 
@@ -174,6 +255,7 @@ onUnmounted(() => {
     }
   }
 
+  /* 侧边栏样式 */
   &__side {
     display: flex;
     flex-direction: column;
@@ -189,11 +271,6 @@ onUnmounted(() => {
     padding: 16px;
   }
 
-  &__footer {
-    padding: 16px;
-/*    border-top: 1px solid var(--color-border);*/
-  }
-
   &__main {
     flex: 1;
     display: flex;
@@ -230,7 +307,6 @@ onUnmounted(() => {
 
   &__collapse-trigger {
     position: absolute;
-    left: calc(20% - 20px);
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
@@ -250,6 +326,19 @@ onUnmounted(() => {
       height: 32px;
       padding: 0;
       border-radius: 50%;
+      outline: none !important;
+      border: none !important;
+
+      &:focus,
+      &:focus-visible {
+        outline: none !important;
+        border: none !important;
+        box-shadow: none !important;
+      }
+
+      &:hover {
+        background: var(--color-bg-2);
+      }
     }
   }
 
@@ -275,13 +364,38 @@ onUnmounted(() => {
 
     .ca-split-panel__collapse-trigger {
       position: fixed;
-      left: calc(100% - 20px);
+      left: calc(100% - 32px);
       top: 50%;
       transform: translateY(-50%);
       z-index: 11;
+      padding: 0;
+      margin: 0;
 
       &.is-collapse {
-        left: 0;
+        left: -2px;
+      }
+
+      .arco-btn {
+        min-width: 32px;
+        width: 32px;
+        height: 32px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        outline: none !important;
+        border: none !important;
+
+        &:focus,
+        &:focus-visible {
+          outline: none !important;
+          border: none !important;
+          box-shadow: none !important;
+        }
+
+        &:hover {
+          background: var(--color-bg-2);
+        }
       }
     }
 
@@ -295,10 +409,10 @@ onUnmounted(() => {
   &__collapse-trigger {
     &.is-mobile {
       background: var(--color-bg-2);
-      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+      box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
 
       .arco-btn {
-        border-radius: 0 50% 50% 0;
+        border-radius: 0 4px 4px 0;
       }
     }
   }
-- 
Gitee


From 594106c20b9fd17c15e36fad5af2cfa05a7e1d71 Mon Sep 17 00:00:00 2001
From: MoChou <1373639299@qq.com>
Date: Sat, 28 Dec 2024 15:20:13 +0800
Subject: [PATCH 4/8] =?UTF-8?q?style:=E8=B0=83=E6=95=B4=E5=AD=97=E5=85=B8?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=92=8C=E7=94=A8=E6=88=B7=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E7=9A=84=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GiCell/GiCellStatus.vue        |   2 +-
 .../{CaSplitPanel => SplitPanel}/index.vue    |  36 +---
 src/types/components.d.ts                     |   2 +-
 src/views/system/dict/index.vue               | 104 ++++++------
 src/views/system/user/index.vue               | 160 +++++++++---------
 5 files changed, 147 insertions(+), 157 deletions(-)
 rename src/components/{CaSplitPanel => SplitPanel}/index.vue (93%)

diff --git a/src/components/GiCell/GiCellStatus.vue b/src/components/GiCell/GiCellStatus.vue
index 2376a4c..234c35c 100644
--- a/src/components/GiCell/GiCellStatus.vue
+++ b/src/components/GiCell/GiCellStatus.vue
@@ -17,7 +17,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 interface Props {
-  status: 0 | 1
+  status: 1 | 2
 }
 </script>
 
diff --git a/src/components/CaSplitPanel/index.vue b/src/components/SplitPanel/index.vue
similarity index 93%
rename from src/components/CaSplitPanel/index.vue
rename to src/components/SplitPanel/index.vue
index c6738c4..be4cb24 100644
--- a/src/components/CaSplitPanel/index.vue
+++ b/src/components/SplitPanel/index.vue
@@ -34,7 +34,7 @@
       :style="!isMobile ? collapseTriggerStyle : undefined"
       @click="toggleCollapse"
     >
-      <a-button type="text">
+      <a-button>
         <template #icon>
           <IconLeft v-if="!isCollapse" />
           <IconRight v-else />
@@ -52,6 +52,7 @@
 
 <script lang="ts" setup>
 import { IconLeft, IconRight } from '@arco-design/web-vue/es/icon'
+import type { CSSProperties } from 'vue'
 
 /**
  * 组件属性定义
@@ -109,22 +110,17 @@ const isMobile = ref(false) // 是否移动端
  * 处理百分比和像素值的转换
  */
 const normalizedSize = computed(() => {
-  if (typeof props.size === 'string') {
-    // 如果已经带有单位（%或px），直接返回
-    if (props.size.includes('%') || props.size.includes('px')) {
-      return props.size
-    }
-    // 数字字符串，添加px
-    return `${props.size}px`
+  // 如果已经带有单位（%或px），直接返回
+  if (props.size.includes('%') || props.size.includes('px')) {
+    return props.size
   }
-  // 数字类型，添加px
   return `${props.size}px`
 })
 
 /**
  * 计算侧边栏样式
  */
-const sideStyle = computed(() => ({
+const sideStyle = computed((): CSSProperties => ({
   [props.vertical ? 'height' : 'width']: isCollapse.value
     ? '0'
     : (isMobile.value ? '100%' : (resizedSize.value || normalizedSize.value)),
@@ -146,7 +142,7 @@ const mainStyle = computed(() => ({
  * 当屏幕宽度小于 768px 时启用移动端模式
  */
 const isResponsive = computed(() => {
-  if (props.responsive === false) return false
+  if (!props.responsive) return false
   return window.innerWidth < 768
 })
 
@@ -261,8 +257,8 @@ onUnmounted(() => {
     flex-direction: column;
     flex-shrink: 0;
     background: var(--color-bg-2);
-    border-right: 1px solid var(--color-border);
     overflow: hidden;
+    border-right: 1px solid var(--color-border);
   }
 
   &__content {
@@ -279,10 +275,6 @@ onUnmounted(() => {
     background: var(--color-bg-1);
   }
 
-  &__main-header {
-    padding: 16px;
-  }
-
   &__main-content {
     flex: 1;
     overflow: auto;
@@ -328,17 +320,6 @@ onUnmounted(() => {
       border-radius: 50%;
       outline: none !important;
       border: none !important;
-
-      &:focus,
-      &:focus-visible {
-        outline: none !important;
-        border: none !important;
-        box-shadow: none !important;
-      }
-
-      &:hover {
-        background: var(--color-bg-2);
-      }
     }
   }
 
@@ -359,6 +340,7 @@ onUnmounted(() => {
       top: 0;
       height: 100%;
       background: var(--color-bg-2);
+      border-right: none;
       box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
     }
 
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 3e21b33..b958c0b 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -9,7 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     Avatar: typeof import('./../components/Avatar/index.vue')['default']
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
-    CaCard: typeof import('./../components/CaCard/index.vue')['default']
     CaSplitPanel: typeof import('./../components/CaSplitPanel/index.vue')['default']
     CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
     Chart: typeof import('./../components/Chart/index.vue')['default']
@@ -53,6 +52,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
+    SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
     TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
     UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
     Verify: typeof import('./../components/Verify/index.vue')['default']
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 5d6b7a4..190b1e6 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -5,57 +5,61 @@
         <div class="title">字典管理</div>
       </a-space>
     </a-row>
-    <a-row align="stretch" :gutter="14" class="h-full page_content">
-      <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" class="h-full ov-hidden">
+    <SplitPanel>
+      <template #left>
         <DictTree @node-click="handleSelectDict" />
-      </a-col>
-      <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden">
-        <GiTable
-          row-key="id"
-          :data="dataList"
-          :columns="columns"
-          :loading="loading"
-          :scroll="{ x: '100%', y: '100%', minWidth: 600 }"
-          :pagination="pagination"
-          :disabled-tools="['size']"
-          :disabled-column-keys="['label']"
-          @refresh="search"
-        >
-          <template #toolbar-left>
-            <a-input-search v-model="queryForm.description" placeholder="搜索标签/描述" allow-clear @search="search" />
-            <a-button @click="reset">
-              <template #icon><icon-refresh /></template>
-              <template #default>重置</template>
-            </a-button>
-          </template>
-          <template #toolbar-right>
-            <a-button v-permission="['system:dict:item:add']" type="primary" @click="onAdd">
-              <template #icon><icon-plus /></template>
-              <template #default>新增</template>
-            </a-button>
-          </template>
-          <template #label="{ record }">
-            <a-tag :color="record.color">{{ record.label }}</a-tag>
-          </template>
-          <template #status="{ record }">
-            <GiCellStatus :status="record.status" />
-          </template>
-          <template #action="{ record }">
-            <a-space>
-              <a-link v-permission="['system:dict:item:update']" title="修改" @click="onUpdate(record)">修改</a-link>
-              <a-link
-                v-permission="['system:dict:item:delete']"
-                status="danger"
-                title="删除"
-                @click="onDelete(record)"
-              >
-                删除
-              </a-link>
-            </a-space>
-          </template>
-        </GiTable>
-      </a-col>
-    </a-row>
+      </template>
+      <template #main>
+        <a-row align="stretch" :gutter="14" class="h-full page_content">
+          <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden">
+            <GiTable
+              row-key="id"
+              :data="dataList"
+              :columns="columns"
+              :loading="loading"
+              :scroll="{ x: '100%', y: '100%', minWidth: 600 }"
+              :pagination="pagination"
+              :disabled-tools="['size']"
+              :disabled-column-keys="['label']"
+              @refresh="search"
+            >
+              <template #toolbar-left>
+                <a-input-search v-model="queryForm.description" placeholder="搜索标签/描述" allow-clear @search="search" />
+                <a-button @click="reset">
+                  <template #icon><icon-refresh /></template>
+                  <template #default>重置</template>
+                </a-button>
+              </template>
+              <template #toolbar-right>
+                <a-button v-permission="['system:dict:item:add']" type="primary" @click="onAdd">
+                  <template #icon><icon-plus /></template>
+                  <template #default>新增</template>
+                </a-button>
+              </template>
+              <template #label="{ record }">
+                <a-tag :color="record.color">{{ record.label }}</a-tag>
+              </template>
+              <template #status="{ record }">
+                <GiCellStatus :status="record.status" />
+              </template>
+              <template #action="{ record }">
+                <a-space>
+                  <a-link v-permission="['system:dict:item:update']" title="修改" @click="onUpdate(record)">修改</a-link>
+                  <a-link
+                    v-permission="['system:dict:item:delete']"
+                    status="danger"
+                    title="删除"
+                    @click="onDelete(record)"
+                  >
+                    删除
+                  </a-link>
+                </a-space>
+              </template>
+            </GiTable>
+          </a-col>
+        </a-row>
+      </template>
+    </SplitPanel>
 
     <DictItemAddModal ref="DictItemAddModalRef" @save-success="search" />
   </div>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 4c4b33e..1be9c7c 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -5,86 +5,90 @@
         <div class="title">用户管理</div>
       </a-space>
     </a-row>
-    <a-row align="stretch" :gutter="14" class="h-full page_content">
-      <a-col :xs="0" :sm="0" :md="6" :lg="5" :xl="5" :xxl="4" class="h-full ov-hidden">
+    <SplitPanel class="w-full" size="20%">
+      <template #left>
         <DeptTree @node-click="handleSelectDept" />
-      </a-col>
-      <a-col :xs="24" :sm="24" :md="18" :lg="19" :xl="19" :xxl="20" class="h-full ov-hidden">
-        <GiTable
-          row-key="id"
-          :data="dataList"
-          :columns="columns"
-          :loading="loading"
-          :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
-          :pagination="pagination"
-          :disabled-tools="['size']"
-          :disabled-column-keys="['nickname']"
-          @refresh="search"
-        >
-          <template #top>
-            <GiForm v-model="queryForm" :options="options" :columns="queryFormColumns" @search="search" @reset="reset"></GiForm>
-          </template>
-          <template #toolbar-left>
-            <a-button v-permission="['system:user:add']" type="primary" @click="onAdd">
-              <template #icon><icon-plus /></template>
-              <template #default>新增</template>
-            </a-button>
-            <a-button v-permission="['system:user:import']" @click="onImport">
-              <template #icon><icon-upload /></template>
-              <template #default>导入</template>
-            </a-button>
-          </template>
-          <template #toolbar-right>
-            <a-button v-permission="['system:user:export']" @click="onExport">
-              <template #icon><icon-download /></template>
-              <template #default>导出</template>
-            </a-button>
-          </template>
-          <template #nickname="{ record }">
-            <GiCellAvatar :avatar="record.avatar" :name="record.nickname" />
-          </template>
-          <template #gender="{ record }">
-            <GiCellGender :gender="record.gender" />
-          </template>
-          <template #roleNames="{ record }">
-            <GiCellTags :data="record.roleNames" />
-          </template>
-          <template #status="{ record }">
-            <GiCellStatus :status="record.status" />
-          </template>
-          <template #isSystem="{ record }">
-            <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
-            <a-tag v-else color="arcoblue" size="small">否</a-tag>
-          </template>
-          <template #action="{ record }">
-            <a-space>
-              <a-link v-permission="['system:user:detail']" title="详情" @click="onDetail(record)">详情</a-link>
-              <a-link v-permission="['system:user:update']" title="修改" @click="onUpdate(record)">修改</a-link>
-              <a-link
-                v-permission="['system:user:delete']"
-                status="danger"
-                :disabled="record.isSystem"
-                :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
-                @click="onDelete(record)"
-              >
-                删除
-              </a-link>
-              <a-dropdown>
-                <a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini" title="更多">
-                  <template #icon>
-                    <icon-more :size="16" />
-                  </template>
+      </template>
+      <template #main>
+        <a-row align="stretch" :gutter="14" class="h-full page_content">
+          <a-col :xs="24" :sm="24" :md="18" :lg="19" :xl="19" :xxl="24" class="h-full ov-hidden">
+            <GiTable
+              row-key="id"
+              :data="dataList"
+              :columns="columns"
+              :loading="loading"
+              :scroll="{ x: '100%', y: '100%', minWidth: 1500 }"
+              :pagination="pagination"
+              :disabled-tools="['size']"
+              :disabled-column-keys="['nickname']"
+              @refresh="search"
+            >
+              <template #top>
+                <GiForm v-model="queryForm" :options="options" :columns="queryFormColumns" @search="search" @reset="reset"></GiForm>
+              </template>
+              <template #toolbar-left>
+                <a-button v-permission="['system:user:add']" type="primary" @click="onAdd">
+                  <template #icon><icon-plus /></template>
+                  <template #default>新增</template>
                 </a-button>
-                <template #content>
-                  <a-doption v-permission="['system:user:resetPwd']" title="重置密码" @click="onResetPwd(record)">重置密码</a-doption>
-                  <a-doption v-permission="['system:user:updateRole']" title="分配角色" @click="onUpdateRole(record)">分配角色</a-doption>
-                </template>
-              </a-dropdown>
-            </a-space>
-          </template>
-        </GiTable>
-      </a-col>
-    </a-row>
+                <a-button v-permission="['system:user:import']" @click="onImport">
+                  <template #icon><icon-upload /></template>
+                  <template #default>导入</template>
+                </a-button>
+              </template>
+              <template #toolbar-right>
+                <a-button v-permission="['system:user:export']" @click="onExport">
+                  <template #icon><icon-download /></template>
+                  <template #default>导出</template>
+                </a-button>
+              </template>
+              <template #nickname="{ record }">
+                <GiCellAvatar :avatar="record.avatar" :name="record.nickname" />
+              </template>
+              <template #gender="{ record }">
+                <GiCellGender :gender="record.gender" />
+              </template>
+              <template #roleNames="{ record }">
+                <GiCellTags :data="record.roleNames" />
+              </template>
+              <template #status="{ record }">
+                <GiCellStatus :status="record.status" />
+              </template>
+              <template #isSystem="{ record }">
+                <a-tag v-if="record.isSystem" color="red" size="small">是</a-tag>
+                <a-tag v-else color="arcoblue" size="small">否</a-tag>
+              </template>
+              <template #action="{ record }">
+                <a-space>
+                  <a-link v-permission="['system:user:detail']" title="详情" @click="onDetail(record)">详情</a-link>
+                  <a-link v-permission="['system:user:update']" title="修改" @click="onUpdate(record)">修改</a-link>
+                  <a-link
+                    v-permission="['system:user:delete']"
+                    status="danger"
+                    :disabled="record.isSystem"
+                    :title="record.isSystem ? '系统内置数据不能删除' : '删除'"
+                    @click="onDelete(record)"
+                  >
+                    删除
+                  </a-link>
+                  <a-dropdown>
+                    <a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini" title="更多">
+                      <template #icon>
+                        <icon-more :size="16" />
+                      </template>
+                    </a-button>
+                    <template #content>
+                      <a-doption v-permission="['system:user:resetPwd']" title="重置密码" @click="onResetPwd(record)">重置密码</a-doption>
+                      <a-doption v-permission="['system:user:updateRole']" title="分配角色" @click="onUpdateRole(record)">分配角色</a-doption>
+                    </template>
+                  </a-dropdown>
+                </a-space>
+              </template>
+            </GiTable>
+          </a-col>
+        </a-row>
+      </template>
+    </SplitPanel>
 
     <UserAddDrawer ref="UserAddDrawerRef" @save-success="search" />
     <UserImportDrawer ref="UserImportDrawerRef" @save-success="search" />
-- 
Gitee


From 9958fa51fd64adc286c2600adc65903052f18a53 Mon Sep 17 00:00:00 2001
From: MoChou <1373639299@qq.com>
Date: Sat, 28 Dec 2024 18:08:35 +0800
Subject: [PATCH 5/8] =?UTF-8?q?style:=E9=A1=B5=E9=9D=A2=E7=9A=84=E4=B8=80?=
 =?UTF-8?q?=E4=BA=9B=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SplitPanel/index.vue | 203 +++++++++++++++++-----------
 src/types/components.d.ts           |   1 -
 src/views/system/dict/index.vue     |   2 +-
 src/views/system/file/index.vue     |  22 +--
 src/views/system/user/index.vue     |   4 +-
 5 files changed, 140 insertions(+), 92 deletions(-)

diff --git a/src/components/SplitPanel/index.vue b/src/components/SplitPanel/index.vue
index be4cb24..4e5904c 100644
--- a/src/components/SplitPanel/index.vue
+++ b/src/components/SplitPanel/index.vue
@@ -23,10 +23,13 @@
       class="ca-split-panel__resize-trigger"
       @mousedown="handleResize"
     ></div>
+    <!-- 竖线 -->
+    <div class="divider"></div>
 
     <div
       v-if="allowCollapse"
       class="ca-split-panel__collapse-trigger"
+      border
       :class="{
         'is-collapse': isCollapse,
         'is-mobile': isMobile,
@@ -34,7 +37,7 @@
       :style="!isMobile ? collapseTriggerStyle : undefined"
       @click="toggleCollapse"
     >
-      <a-button>
+      <a-button size="mini">
         <template #icon>
           <IconLeft v-if="!isCollapse" />
           <IconRight v-else />
@@ -69,7 +72,7 @@ import type { CSSProperties } from 'vue'
  * @property {boolean} responsive - 是否启用响应式，默认 true
  */
 const props = withDefaults(defineProps<{
-  size?: string
+  size?: string | number
   minSize?: number
   maxSize?: number
   customStyle?: any
@@ -111,8 +114,10 @@ const isMobile = ref(false) // 是否移动端
  */
 const normalizedSize = computed(() => {
   // 如果已经带有单位（%或px），直接返回
-  if (props.size.includes('%') || props.size.includes('px')) {
-    return props.size
+  if (typeof props.size === 'string') {
+    if (props.size.includes('%') || props.size.includes('px')) {
+      return props.size
+    }
   }
   return `${props.size}px`
 })
@@ -155,11 +160,20 @@ const collapseTriggerStyle = computed(() => {
   }
 
   const baseSize = resizedSize.value || normalizedSize.value
+  const buttonOffset = '12px' // 按钮偏移量
+
+  if (props.reverse) {
+    return {
+      right: isCollapse.value
+        ? `-${buttonOffset}`
+        : `calc(${baseSize} - ${buttonOffset})`,
+    }
+  }
 
   return {
     left: isCollapse.value
-      ? '-20px'
-      : `calc(${baseSize} - 20px)`,
+      ? `-${buttonOffset}`
+      : `calc(${baseSize} - ${buttonOffset})`,
   }
 })
 
@@ -228,43 +242,88 @@ onUnmounted(() => {
 })
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .ca-split-panel {
-  /* 基础布局样式 */
   display: flex;
   width: 100%;
   height: 100%;
   position: relative;
   background: var(--color-bg-2);
 
-  /* 垂直布局模式 */
+  .divider {
+    width: 2px;
+    background-color: var(--color-border);
+    margin: 0 10px;
+    position: relative;
+  }
+  // 布局变体
   &.is-vertical {
     flex-direction: column;
   }
 
-  /* 反转布局模式 */
   &.is-reverse {
     flex-direction: row-reverse;
 
-    &.is-vertical {
-      flex-direction: column-reverse;
+    .ca-split-panel__side {
+      border-right: none;
+      border-left: 1px solid var(--color-border);
+    }
+
+    .ca-split-panel__resize-trigger {
+      left: auto;
+      right: 30%;
+    }
+
+    &__main-content {
+      margin-left: 10px;
+
+      :deep(.arco-table-border .arco-table-container) {
+        border-right: none;
+        border-left: 1px solid var(--color-border);
+      }
+    }
+
+    &.is-mobile {
+      .ca-split-panel__side {
+        left: auto;
+        right: 0;
+      }
+
+      .ca-split-panel__collapse-trigger {
+        left: 10px;
+        right: auto;
+
+        &.is-collapse {
+          left: auto;
+          right: 10px;
+        }
+      }
+
+      &.is-collapse .ca-split-panel__side {
+        transform: translateX(100%);
+      }
     }
   }
 
-  /* 侧边栏样式 */
+  // 基础组件
   &__side {
     display: flex;
     flex-direction: column;
     flex-shrink: 0;
     background: var(--color-bg-2);
     overflow: hidden;
-    border-right: 1px solid var(--color-border);
+    margin-right: 10px;
+    transition: transform 0.3s ease, width 0.3s ease;
   }
 
-  &__content {
+  &__content,
+  &__main-content {
     flex: 1;
-    overflow: auto;
-    padding: 16px;
+    overflow: hidden;
+
+    :deep(.arco-table-border .arco-table-container) {
+      border-left: none;
+    }
   }
 
   &__main {
@@ -275,12 +334,7 @@ onUnmounted(() => {
     background: var(--color-bg-1);
   }
 
-  &__main-content {
-    flex: 1;
-    overflow: auto;
-    padding: 16px;
-  }
-
+  // 调整柄
   &__resize-trigger {
     position: absolute;
     top: 0;
@@ -294,35 +348,39 @@ onUnmounted(() => {
 
     &:hover {
       background: var(--color-primary-light-4);
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 2px;
+        height: 20px;
+        background: var(--color-border);
+      }
     }
   }
 
+  // 折叠触发器
   &__collapse-trigger {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
-    transition: left 0.3s ease;
-    background: var(--color-bg-2);
-    border-radius: 50%;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    background: transparent;
     cursor: pointer;
+    left: 50%;
+    margin-left: -16px;
 
-    &.is-collapse {
-      left: -20px;
-    }
-
-    .arco-btn {
-      min-width: unset;
-      width: 32px;
-      height: 32px;
+    :deep(.arco-btn) {
+      border-radius: 16px;
       padding: 0;
-      border-radius: 50%;
-      outline: none !important;
-      border: none !important;
     }
   }
 
+  // 折叠状态
   &.is-collapse {
     .ca-split-panel__side {
       width: 0;
@@ -333,69 +391,54 @@ onUnmounted(() => {
     }
   }
 
+  // 移动端样式
   &.is-mobile {
     .ca-split-panel__side {
-      position: absolute;
+      position: fixed;
       left: 0;
       top: 0;
       height: 100%;
       background: var(--color-bg-2);
-      border-right: none;
-      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
+      z-index: 1000;
     }
 
     .ca-split-panel__collapse-trigger {
       position: fixed;
-      left: calc(100% - 32px);
+      right: 10px;
       top: 50%;
       transform: translateY(-50%);
-      z-index: 11;
-      padding: 0;
-      margin: 0;
+      z-index: 1001;
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-bg-2);
+      border-radius: 50%;
 
       &.is-collapse {
-        left: -2px;
-      }
-
-      .arco-btn {
-        min-width: 32px;
-        width: 32px;
-        height: 32px;
-        padding: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        outline: none !important;
-        border: none !important;
-
-        &:focus,
-        &:focus-visible {
-          outline: none !important;
-          border: none !important;
-          box-shadow: none !important;
-        }
-
-        &:hover {
-          background: var(--color-bg-2);
-        }
+        left: 10px;
+        right: auto;
       }
     }
 
-    &.is-collapse {
-      .ca-split-panel__side {
-        transform: translateX(-100%);
-      }
+    &.is-collapse .ca-split-panel__side {
+      transform: translateX(-100%);
     }
   }
 
-  &__collapse-trigger {
-    &.is-mobile {
-      background: var(--color-bg-2);
-      box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
+  // 表格固定列适配
+  :deep(.arco-table-col-fixed-left),
+  :deep(.arco-table-col-fixed-right) {
+    position: sticky; // 默认状态
+    z-index: 10;
+  }
 
-      .arco-btn {
-        border-radius: 0 4px 4px 0;
-      }
+  // 移动端表格固定列适配
+  &.is-mobile {
+    :deep(.arco-table-col-fixed-left),
+    :deep(.arco-table-col-fixed-right) {
+      position: static; // 移动端状态
     }
   }
 }
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index b958c0b..604dfd6 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -9,7 +9,6 @@ declare module 'vue' {
   export interface GlobalComponents {
     Avatar: typeof import('./../components/Avatar/index.vue')['default']
     Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
-    CaSplitPanel: typeof import('./../components/CaSplitPanel/index.vue')['default']
     CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
     Chart: typeof import('./../components/Chart/index.vue')['default']
     CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
diff --git a/src/views/system/dict/index.vue b/src/views/system/dict/index.vue
index 190b1e6..f78bcd7 100644
--- a/src/views/system/dict/index.vue
+++ b/src/views/system/dict/index.vue
@@ -11,7 +11,7 @@
       </template>
       <template #main>
         <a-row align="stretch" :gutter="14" class="h-full page_content">
-          <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden">
+          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24" flex="1" class="h-full ov-hidden">
             <GiTable
               row-key="id"
               :data="dataList"
diff --git a/src/views/system/file/index.vue b/src/views/system/file/index.vue
index 4d61d5c..e499bdf 100644
--- a/src/views/system/file/index.vue
+++ b/src/views/system/file/index.vue
@@ -1,12 +1,18 @@
 <template>
-  <a-row align="stretch" :gutter="14" class="file-manage">
-    <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="220px" class="h-full ov-hidden">
-      <FileAside></FileAside>
-    </a-col>
-    <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden">
-      <FileMain></FileMain>
-    </a-col>
-  </a-row>
+  <div class="table-page">
+    <SplitPanel size="250">
+      <template #left>
+        <FileAside></FileAside>
+      </template>
+      <template #main>
+        <a-row align="stretch" :gutter="14" class="file-manage">
+          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24" flex="1" class="h-full ov-hidden">
+            <FileMain></FileMain>
+          </a-col>
+        </a-row>
+      </template>
+    </SplitPanel>
+  </div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 1be9c7c..1a1b06a 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -5,13 +5,13 @@
         <div class="title">用户管理</div>
       </a-space>
     </a-row>
-    <SplitPanel class="w-full" size="20%">
+    <SplitPanel size="20%" :reverse="false">
       <template #left>
         <DeptTree @node-click="handleSelectDept" />
       </template>
       <template #main>
         <a-row align="stretch" :gutter="14" class="h-full page_content">
-          <a-col :xs="24" :sm="24" :md="18" :lg="19" :xl="19" :xxl="24" class="h-full ov-hidden">
+          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24" class="h-full ov-hidden">
             <GiTable
               row-key="id"
               :data="dataList"
-- 
Gitee


From 4b7c3aedfe5ca183574bde089d8cb695fda4960f Mon Sep 17 00:00:00 2001
From: MoChou <1373639299@qq.com>
Date: Sat, 28 Dec 2024 18:20:59 +0800
Subject: [PATCH 6/8] =?UTF-8?q?style:=E5=88=86=E5=89=B2=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SplitPanel/index.vue | 162 ++++++++--------------------
 1 file changed, 44 insertions(+), 118 deletions(-)

diff --git a/src/components/SplitPanel/index.vue b/src/components/SplitPanel/index.vue
index 4e5904c..70f8798 100644
--- a/src/components/SplitPanel/index.vue
+++ b/src/components/SplitPanel/index.vue
@@ -18,31 +18,25 @@
       </div>
     </div>
 
-    <div
-      v-if="resizable && !isCollapse"
-      class="ca-split-panel__resize-trigger"
-      @mousedown="handleResize"
-    ></div>
-    <!-- 竖线 -->
-    <div class="divider"></div>
-
-    <div
-      v-if="allowCollapse"
-      class="ca-split-panel__collapse-trigger"
-      border
-      :class="{
-        'is-collapse': isCollapse,
-        'is-mobile': isMobile,
-      }"
-      :style="!isMobile ? collapseTriggerStyle : undefined"
-      @click="toggleCollapse"
-    >
-      <a-button size="mini">
-        <template #icon>
-          <IconLeft v-if="!isCollapse" />
-          <IconRight v-else />
-        </template>
-      </a-button>
+    <!-- 竖线和按钮 -->
+    <div class="divider">
+      <div
+        v-if="allowCollapse"
+        class="ca-split-panel__collapse-trigger"
+        :class="{
+          'is-collapse': isCollapse,
+          'is-mobile': isMobile,
+        }"
+        :style="!isMobile ? collapseTriggerStyle : undefined"
+        @click="toggleCollapse"
+      >
+        <a-button size="mini">
+          <template #icon>
+            <IconLeft v-if="!isCollapse" />
+            <IconRight v-else />
+          </template>
+        </a-button>
+      </div>
     </div>
 
     <div class="ca-split-panel__main" :style="mainStyle">
@@ -68,7 +62,6 @@ import type { CSSProperties } from 'vue'
  * @property {boolean} collapse - 是否折叠状态，默认 false
  * @property {boolean} vertical - 是否垂直分割，默认 false
  * @property {boolean} reverse - 是否反转布局，默认 false
- * @property {boolean} resizable - 是否可调整大小，默认 true
  * @property {boolean} responsive - 是否启用响应式，默认 true
  */
 const props = withDefaults(defineProps<{
@@ -81,7 +74,6 @@ const props = withDefaults(defineProps<{
   collapse?: boolean
   vertical?: boolean
   reverse?: boolean
-  resizable?: boolean
   responsive?: boolean
 }>(), {
   size: '20%',
@@ -91,7 +83,6 @@ const props = withDefaults(defineProps<{
   collapse: false,
   vertical: false,
   reverse: false,
-  resizable: true,
   responsive: true,
 })
 
@@ -186,42 +177,6 @@ const toggleCollapse = () => {
   emit('update:collapse', isCollapse.value)
 }
 
-/**
- * 处理大小调整
- * @param event 鼠标事件
- */
-const handleResize = (event: MouseEvent) => {
-  event.preventDefault()
-  resizing.value = true
-
-  // 记录开始位置和初始尺寸
-  const startPosition = props.vertical ? event.clientY : event.clientX
-  const startSize = sideRef.value?.[props.vertical ? 'offsetHeight' : 'offsetWidth'] ?? 0
-
-  // 处理鼠标移动
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!resizing.value) return
-
-    const delta = (props.vertical ? e.clientY : e.clientX) - startPosition
-    let newSize = startSize + (props.reverse ? -delta : delta)
-
-    // 限制在最小和最大尺寸范围内
-    newSize = Math.max(props.minSize, Math.min(props.maxSize, newSize))
-    resizedSize.value = `${newSize}px`
-  }
-
-  // 处理鼠标释放
-  const handleMouseUp = () => {
-    resizing.value = false
-    document.removeEventListener('mousemove', handleMouseMove)
-    document.removeEventListener('mouseup', handleMouseUp)
-  }
-
-  // 添加事件监听
-  document.addEventListener('mousemove', handleMouseMove)
-  document.addEventListener('mouseup', handleMouseUp)
-}
-
 /**
  * 检查是否为移动端设备
  * 根据窗口宽度判断
@@ -255,6 +210,9 @@ onUnmounted(() => {
     background-color: var(--color-border);
     margin: 0 10px;
     position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   // 布局变体
   &.is-vertical {
@@ -269,11 +227,6 @@ onUnmounted(() => {
       border-left: 1px solid var(--color-border);
     }
 
-    .ca-split-panel__resize-trigger {
-      left: auto;
-      right: 30%;
-    }
-
     &__main-content {
       margin-left: 10px;
 
@@ -334,45 +287,12 @@ onUnmounted(() => {
     background: var(--color-bg-1);
   }
 
-  // 调整柄
-  &__resize-trigger {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 30%;
-    width: 4px;
-    background: transparent;
-    cursor: col-resize;
-    transition: background-color 0.1s;
-    z-index: 1;
-
-    &:hover {
-      background: var(--color-primary-light-4);
-
-      &::after {
-        content: '';
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-        width: 2px;
-        height: 20px;
-        background: var(--color-border);
-      }
-    }
-  }
-
   // 折叠触发器
   &__collapse-trigger {
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
     z-index: 2;
-    transition: all 0.3s ease;
     background: transparent;
     cursor: pointer;
-    left: 50%;
-    margin-left: -16px;
 
     :deep(.arco-btn) {
       border-radius: 16px;
@@ -402,23 +322,29 @@ onUnmounted(() => {
       z-index: 1000;
     }
 
-    .ca-split-panel__collapse-trigger {
-      position: fixed;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
-      z-index: 1001;
-      width: 32px;
-      height: 32px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--color-bg-2);
-      border-radius: 50%;
+    .divider {
+      width: 0;
+      margin: 0;
+      background: none;
 
-      &.is-collapse {
-        left: 10px;
-        right: auto;
+      .ca-split-panel__collapse-trigger {
+        position: fixed;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1001;
+        width: 32px;
+        height: 32px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--color-bg-2);
+        border-radius: 50%;
+
+        &.is-collapse {
+          left: 10px;
+          right: auto;
+        }
       }
     }
 
-- 
Gitee


From 0603fdc0fa128d661c3cca8642d5e3a9dd586b4c Mon Sep 17 00:00:00 2001
From: MoChou <1373639299@qq.com>
Date: Sat, 28 Dec 2024 22:20:07 +0800
Subject: [PATCH 7/8] =?UTF-8?q?style:=E5=88=86=E5=89=B2=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SplitPanel/index.vue | 84 ++++++++++++++++++++---------
 src/views/system/user/index.vue     |  2 +-
 2 files changed, 60 insertions(+), 26 deletions(-)

diff --git a/src/components/SplitPanel/index.vue b/src/components/SplitPanel/index.vue
index 70f8798..7617f63 100644
--- a/src/components/SplitPanel/index.vue
+++ b/src/components/SplitPanel/index.vue
@@ -32,8 +32,14 @@
       >
         <a-button size="mini">
           <template #icon>
-            <IconLeft v-if="!isCollapse" />
-            <IconRight v-else />
+            <div v-if="reverse">
+              <IconRight v-if="!isCollapse" />
+              <IconLeft v-else />
+            </div>
+            <div v-else>
+              <IconLeft v-if="!isCollapse" />
+              <IconRight v-else />
+            </div>
           </template>
         </a-button>
       </div>
@@ -151,7 +157,7 @@ const collapseTriggerStyle = computed(() => {
   }
 
   const baseSize = resizedSize.value || normalizedSize.value
-  const buttonOffset = '12px' // 按钮偏移量
+  const buttonOffset = '16px' // 按钮偏移量
 
   if (props.reverse) {
     return {
@@ -214,6 +220,7 @@ onUnmounted(() => {
     align-items: center;
     justify-content: center;
   }
+
   // 布局变体
   &.is-vertical {
     flex-direction: column;
@@ -265,7 +272,7 @@ onUnmounted(() => {
     flex-shrink: 0;
     background: var(--color-bg-2);
     overflow: hidden;
-    margin-right: 10px;
+
     transition: transform 0.3s ease, width 0.3s ease;
   }
 
@@ -289,14 +296,42 @@ onUnmounted(() => {
 
   // 折叠触发器
   &__collapse-trigger {
-    position: absolute;
-    z-index: 2;
-    background: transparent;
+    align-items: center;
     cursor: pointer;
+    width: 32px;
+    height: 60px;
+    background-color: var(--color-bg-2);
+    border: 1px solid var(--color-border);
+    justify-content: center;
+
+    // 遮罩效果，让分隔线看起来被按钮"切断"
+    &::before {
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: -2px;
+      bottom: -2px;
+      transform: translateX(-50%);
+      width: 4px;
+      background-color: var(--color-bg-2);
+      z-index: -1;
+    }
 
     :deep(.arco-btn) {
-      border-radius: 16px;
       padding: 0;
+      border: none;
+      background: transparent;
+      box-shadow: none;
+      width: 100%;
+      height: 100%;
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: transparent;
+        border: none;
+        box-shadow: none;
+      }
     }
   }
 
@@ -326,25 +361,24 @@ onUnmounted(() => {
       width: 0;
       margin: 0;
       background: none;
+    }
 
-      .ca-split-panel__collapse-trigger {
-        position: fixed;
-        right: 10px;
-        top: 50%;
-        transform: translateY(-50%);
-        z-index: 1001;
-        width: 32px;
-        height: 32px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background: var(--color-bg-2);
-        border-radius: 50%;
+    .ca-split-panel__collapse-trigger {
+      position: fixed;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 12;
+      width: 32px;
+      height: 40px;
+
+      &::before {
+        display: none;
+      }
 
-        &.is-collapse {
-          left: 10px;
-          right: auto;
-        }
+      &.is-collapse {
+        left: 10px;
+        right: auto;
       }
     }
 
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
index 1a1b06a..a66e369 100644
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -5,7 +5,7 @@
         <div class="title">用户管理</div>
       </a-space>
     </a-row>
-    <SplitPanel size="20%" :reverse="false">
+    <SplitPanel size="20%">
       <template #left>
         <DeptTree @node-click="handleSelectDept" />
       </template>
-- 
Gitee


From 456902bb660337e8a4044b47e9fa6aaa16070d3e Mon Sep 17 00:00:00 2001
From: MoChou <1373639299@qq.com>
Date: Sat, 28 Dec 2024 22:50:59 +0800
Subject: [PATCH 8/8] =?UTF-8?q?style:=E5=88=86=E5=89=B2=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SplitPanel/index.vue  | 16 ++++++++++------
 src/views/system/dict/tree/index.vue |  2 +-
 src/views/system/file/index.vue      | 22 ++++++++--------------
 src/views/system/user/dept/index.vue |  2 +-
 4 files changed, 20 insertions(+), 22 deletions(-)

diff --git a/src/components/SplitPanel/index.vue b/src/components/SplitPanel/index.vue
index 7617f63..d46da10 100644
--- a/src/components/SplitPanel/index.vue
+++ b/src/components/SplitPanel/index.vue
@@ -214,7 +214,8 @@ onUnmounted(() => {
   .divider {
     width: 2px;
     background-color: var(--color-border);
-    margin: 0 10px;
+    margin-right: 10px;
+    margin-left: 10px;
     position: relative;
     display: flex;
     align-items: center;
@@ -235,7 +236,7 @@ onUnmounted(() => {
     }
 
     &__main-content {
-      margin-left: 10px;
+/*      margin-left: 10px;*/
 
       :deep(.arco-table-border .arco-table-container) {
         border-right: none;
@@ -282,10 +283,13 @@ onUnmounted(() => {
     overflow: hidden;
 
     :deep(.arco-table-border .arco-table-container) {
-      border-left: none;
+    /*  border-left: none;*/
+      border: none;
     }
   }
-
+  .ca-split-panel__main {
+    padding-left: 10px;
+  }
   &__main {
     flex: 1;
     display: flex;
@@ -341,9 +345,9 @@ onUnmounted(() => {
       width: 0;
     }
 
-    .ca-split-panel__main {
+/*    .ca-split-panel__main {
       padding-left: 0;
-    }
+    }*/
   }
 
   // 移动端样式
diff --git a/src/views/system/dict/tree/index.vue b/src/views/system/dict/tree/index.vue
index cfae43c..59bc57b 100644
--- a/src/views/system/dict/tree/index.vue
+++ b/src/views/system/dict/tree/index.vue
@@ -218,7 +218,7 @@ onMounted(() => {
     background-color: var(--color-bg-1);
     position: relative;
     height: 100%;
-    margin-bottom:10px;
+/*    margin-bottom:10px;*/
     .tree {
       position: absolute;
       top: 0;
diff --git a/src/views/system/file/index.vue b/src/views/system/file/index.vue
index e499bdf..4d61d5c 100644
--- a/src/views/system/file/index.vue
+++ b/src/views/system/file/index.vue
@@ -1,18 +1,12 @@
 <template>
-  <div class="table-page">
-    <SplitPanel size="250">
-      <template #left>
-        <FileAside></FileAside>
-      </template>
-      <template #main>
-        <a-row align="stretch" :gutter="14" class="file-manage">
-          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24" flex="1" class="h-full ov-hidden">
-            <FileMain></FileMain>
-          </a-col>
-        </a-row>
-      </template>
-    </SplitPanel>
-  </div>
+  <a-row align="stretch" :gutter="14" class="file-manage">
+    <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="220px" class="h-full ov-hidden">
+      <FileAside></FileAside>
+    </a-col>
+    <a-col :xs="24" :sm="16" :md="17" :lg="18" :xl="19" :xxl="20" flex="1" class="h-full ov-hidden">
+      <FileMain></FileMain>
+    </a-col>
+  </a-row>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/system/user/dept/index.vue b/src/views/system/user/dept/index.vue
index 89ddf20..4c169b7 100644
--- a/src/views/system/user/dept/index.vue
+++ b/src/views/system/user/dept/index.vue
@@ -150,7 +150,7 @@ onMounted(() => {
     background-color: var(--color-bg-1);
     position: relative;
     height: 100%;
-    margin-bottom:10px;
+/*    margin-bottom:10px;*/
     .tree {
       position: absolute;
       top: 0;
-- 
Gitee