chore: 优化左树右表

src/components/GiTable/index.vue

@@ -33,10 +33,10 @@
             </a-doption>
           </template>
         </a-dropdown>
-        <a-popover
+        <a-popover 
           v-if="showSettingColumnBtn" trigger="click" position="br"
           :content-style="{ minWidth: '120px', padding: '6px 8px 10px' }"
-        >
+          >
           <a-tooltip content="列设置">
             <a-button>
               <template #icon>
@@ -77,15 +77,15 @@
     </a-row>
     <div class="gi-table__body" :class="`gi-table__body-pagination-${attrs['page-position']}`">
       <div class="gi-table__container">
-        <a-table
+        <a-table 
-          ref="tableRef"
+        ref="tableRef" 
-          :stripe="stripe"
+        :stripe="stripe" 
-          :size="size"
+        :size="size" 
-          column-resizable
+        column-resizable 
-          :bordered="{ cell: isBordered }"
+        :bordered="{ cell: isBordered }"
-          v-bind="{ ...attrs, columns: _columns }"
+        v-bind="{ ...attrs, columns: _columns }" 
-          :scrollbar="true"
+        :scrollbar="true" 
-          :data="data"
+        :data="data"
         >
           <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
             <slot :key="key" :name="key" v-bind="scoped"></slot>
@@ -235,7 +235,7 @@ defineExpose({ tableRef })
   height: 100%;
   background: var(--color-bg-1);
   position: relative;
-  box-sizing:border-box;
+  box-sizing: border-box;
   &--fullscreen {
     padding: $padding;
     position: fixed;
@@ -256,6 +256,10 @@ defineExpose({ tableRef })
       height: 100%;
     }
 
+    :deep(.arco-table-container) {
+      flex: 1;
+    }
+
     :deep(.arco-table-body) {
       height: 100%;
     }

src/components/SplitPanel/index.vue

@@ -1,47 +1,35 @@
 <template>
   <div
-    ref="rootRef"
+   ref="rootRef" 
-    class="ca-split-panel"
+   class="ca-split-panel"
-    :class="{
+   :class="{
-      'is-vertical': vertical,
+    'is-vertical': vertical,
-      'is-reverse': reverse,
+    'is-resizing': resizing,
-      'is-resizing': resizing,
+    'is-collapse': isCollapse,
-      'is-collapse': isCollapse,
+    'is-responsive': isResponsive,
-      'is-responsive': isResponsive,
+    'is-mobile': isMobile,
-      'is-mobile': isMobile,
+  }" 
-    }"
+  :style="customStyle"
-    :style="customStyle"
   >
-    <div ref="sideRef" class="ca-split-panel__side" :style="sideStyle">
+    <div class="container" style="display: flex;height: 100%;" :style="sideStyle">
-      <div class="ca-split-panel__content">
+      <div ref="sideRef" class="ca-split-panel__side" :class="{ clead_padding: isCollapse }">
-        <slot name="left"></slot>
+        <div class="ca-split-panel__content">
-      </div>
+          <slot name="left"></slot>
-    </div>
+        </div>
 
-    <!-- 竖线和按钮 -->
+      </div>
-    <div class="divider">
+      <!-- 竖线和按钮 -->
-      <div
+      <div class="divider-container">
-        v-if="allowCollapse"
+        <div class="divider" v-show="!isCollapse"></div>
-        class="ca-split-panel__collapse-trigger"
+        <div v-if="allowCollapse" class="ca-split-panel__collapse-trigger" :class="{
-        :class="{
           'is-collapse': isCollapse,
           'is-mobile': isMobile,
-        }"
+        }" :style="!isMobile ? collapseTriggerStyle : undefined" @click="toggleCollapse">
-        :style="!isMobile ? collapseTriggerStyle : undefined"
+          <div class="ca-split-panel__collapse-trigger-icon" style="">
-        @click="toggleCollapse"
+            <icon-right size="18" v-if="isCollapse" />
-      >
+            <icon-left v-else size="18" />
-        <a-button size="mini">
+          </div>
-          <template #icon>
+        </div>
-            <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>
     </div>
 
@@ -204,6 +192,10 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
+.clead_padding {
+  padding: 0 !important;
+}
+
 .ca-split-panel {
   display: flex;
   width: 100%;
@@ -211,15 +203,17 @@ onUnmounted(() => {
   position: relative;
   background: var(--color-bg-2);
 
-  .divider {
+  .divider-container {
-    width: 2px;
-    background-color: var(--color-border);
-    margin-right: 10px;
-    margin-left: 10px;
     position: relative;
-    display: flex;
+    .divider {
-    align-items: center;
+      width: 2px;
-    justify-content: center;
+      height: 100%;
+      background-color: var(--color-border);
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 
   // 布局变体
@@ -227,54 +221,16 @@ onUnmounted(() => {
     flex-direction: column;
   }
 
-  &.is-reverse {
-    flex-direction: row-reverse;
-
-    .ca-split-panel__side {
-      border-right: none;
-      border-left: 1px solid var(--color-border);
-    }
-
-    &__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-direction: row;
     flex-shrink: 0;
-    background: var(--color-bg-2);
+    flex: 1;
+    background: var(--color-bg-1);
     overflow: hidden;
-
     transition: transform 0.3s ease, width 0.3s ease;
+    padding: $padding 10px;
   }
 
   &__content,
@@ -283,7 +239,7 @@ onUnmounted(() => {
     overflow: hidden;
 
     :deep(.arco-table-border .arco-table-container) {
-    /*  border-left: none;*/
+      /*  border-left: none;*/
       border: none;
     }
   }
@@ -296,47 +252,43 @@ onUnmounted(() => {
     flex-direction: column;
     overflow: hidden;
     background: var(--color-bg-1);
+    padding: $padding;
+  }
+
+  .ca-split-panel__collapse-trigger-icon {
+    // padding: 2px;
+    border-radius: 50%;
+    // position: relative;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0px 0px 0px 1px var(--color-border);
+    // left: 0;
+    // transform: translate(-50%, -50%);
+    background-color: var(--color-border);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+      box-shadow: 0px 0px 0px 1px var(--color-border-2);
+      background-color: var(--color-border-2);
+    }
   }
 
   // 折叠触发器
   &__collapse-trigger {
     align-items: center;
     cursor: pointer;
-    width: 32px;
+    width: 28px;
-    height: 60px;
+    height: 28px;
-    background-color: var(--color-bg-2);
+    border-radius: 15px;
-    border: 1px solid var(--color-border);
     justify-content: center;
-
+    position: absolute;
-    // 遮罩效果，让分隔线看起来被按钮"切断"
+    top: 50%;
-    &::before {
+    left: 50% !important;
-      content: '';
+    transform: translateX(-50%);
-      position: absolute;
+    z-index: 1;
-      left: 50%;
-      top: -2px;
-      bottom: -2px;
-      transform: translateX(-50%);
-      width: 4px;
-      background-color: var(--color-bg-2);
-      z-index: -1;
-    }
-
-    :deep(.arco-btn) {
-      padding: 0;
-      border: none;
-      background: transparent;
-      box-shadow: none;
-      width: 100%;
-      height: 100%;
-
-      &:hover,
-      &:focus,
-      &:active {
-        background: transparent;
-        border: none;
-        box-shadow: none;
-      }
-    }
   }
 
   // 折叠状态
@@ -345,20 +297,19 @@ onUnmounted(() => {
       width: 0;
     }
 
-/*    .ca-split-panel__main {
+    .ca-split-panel__collapse-trigger {
-      padding-left: 0;
+      transform: translateX(0%);
-    }*/
+    }
   }
 
   // 移动端样式
   &.is-mobile {
     .ca-split-panel__side {
-      position: fixed;
-      left: 0;
-      top: 0;
       height: 100%;
+      width: 100%;
       background: var(--color-bg-2);
-      z-index: 1000;
+      z-index: 2;
+      padding: 0;
     }
 
     .divider {
@@ -368,13 +319,8 @@ onUnmounted(() => {
     }
 
     .ca-split-panel__collapse-trigger {
-      position: fixed;
-      right: 10px;
-      top: 50%;
-      transform: translateY(-50%);
       z-index: 12;
-      width: 32px;
+      transform: translateX(-100%);
-      height: 40px;
 
       &::before {
         display: none;
@@ -386,8 +332,8 @@ onUnmounted(() => {
       }
     }
 
-    &.is-collapse .ca-split-panel__side {
+    &.is-collapse .ca-split-panel__collapse-trigger {
-      transform: translateX(-100%);
+      transform: translateX(0%);
     }
   }
 

src/views/code/generator/index.vue

@@ -2,7 +2,7 @@
   <div class="table-page">
     <GiTable
       v-model:selectedKeys="selectedKeys"
-      title="代码生成"
+      title=""
       row-key="tableName"
       :data="dataList"
       :columns="columns"

src/views/monitor/log/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="table-page">
-    <a-row justify="space-between" align="center" class="header">
+    <!-- <a-row justify="space-between" align="center" class="header">
       <a-space wrap>
         <div class="title">系统日志</div>
       </a-space>
-    </a-row>
+    </a-row> -->
     <a-tabs v-model:active-key="activeKey" type="card-gutter" size="large" @change="change">
       <a-tab-pane key="1">
         <template #title><icon-lock /> 登录日志</template>

src/views/monitor/online/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="table-page">
     <GiTable
-      title="在线用户"
+      title=""
       row-key="id"
       :data="dataList"
       :columns="columns"

src/views/open/app/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="table-page">
     <GiTable
-      title="应用管理"
+      title=""
       row-key="id"
       :data="dataList"
       :columns="columns"

src/views/schedule/job/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="table-page">
     <GiTable
-      title="任务管理"
+      title=""
       row-key="id"
       :data="dataList"
       :columns="columns"

src/views/schedule/log/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="table-page">
     <GiTable
-      title="任务日志"
+      title=""
       row-key="id"
       :data="dataList"
       :columns="columns"

src/views/system/client/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="table-page">
     <GiTable
-      title="客户端管理"
+      title=""
       row-key="id"
       :data="dataList"
       :columns="columns"

src/views/system/config/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="table-page">
-    <a-row justify="space-between" align="center" class="header page_header">
+    <!-- <a-row justify="space-between" align="center" class="header page_header">
       <a-space wrap>
         <div class="title">系统配置</div>
       </a-space>
-    </a-row>
+    </a-row> -->
     <a-tabs v-model:active-key="activeKey" type="card-gutter" size="large" @change="change">
       <a-tab-pane key="1">
         <template #title><icon-settings /> 基础配置</template>

src/views/system/dept/index.vue

@@ -9,7 +9,7 @@
     <GiTable
       v-show="viewType === 'table'"
       ref="tableRef"
-      title="部门管理"
+      title=""
       row-key="id"
       :data="dataList"
       :columns="columns"

src/views/system/dict/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="table-page">
+  <div class="gi_page">
-    <a-row justify="space-between" align="center" class="header page_header">
+    <!-- <a-row justify="space-between" align="center" class="header page_header">
       <a-space wrap>
         <div class="title">字典管理</div>
       </a-space>
-    </a-row>
+    </a-row> -->
     <SplitPanel>
       <template #left>
         <DictTree @node-click="handleSelectDict" />

src/views/system/file/main/FileAside.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <a-card title="文件管理" :bordered="false" :body-style="{ padding: 0 }">
+    <a-card title="" :bordered="false" :body-style="{ padding: 0 }">
       <a-menu :default-open-keys="['0']" :selected-keys="[selectedKey]">
         <a-sub-menu key="0">
           <template #icon>

src/views/system/menu/index.vue

@@ -2,7 +2,7 @@
   <div class="table-page">
     <GiTable
       ref="tableRef"
-      title="菜单管理"
+      title=""
       row-key="id"
       :data="dataList"
       :columns="columns"

src/views/system/notice/index.vue

@@ -2,7 +2,7 @@
   <div class="table-page">
     <GiTable
       row-key="id"
-      title="通知公告"
+      title=""
       :data="dataList"
       :columns="columns"
       :loading="loading"

src/views/system/role/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="table-page">
     <GiTable
-      title="角色管理"
+      title=""
       row-key="id"
       :data="dataList"
       :columns="columns"
       :loading="loading"
+      :bordered="false"
       :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
       :pagination="pagination"
       :disabled-tools="['size']"

src/views/system/storage/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="table-page">
     <GiTable
-      title="存储管理"
+      title=""
       row-key="id"
       :data="dataList"
       :columns="columns"

src/views/system/user/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="table-page">
+  <div class="gi_page">
-    <a-row justify="space-between" align="center" class="header page_header">
+    <!-- <a-row justify="space-between" align="center" class="header page_header">
       <a-space wrap>
         <div class="title">用户管理</div>
       </a-space>
-    </a-row>
+    </a-row> -->
     <SplitPanel size="20%">
       <template #left>
         <DeptTree @node-click="handleSelectDept" />