chore: 优化部分代码（同步 GiDemo 更新）

src/components/GiForm/src/GiForm.vue

@@ -3,7 +3,7 @@
     <a-grid class="w-full" :col-gap="8" v-bind="options.grid" :collapsed="collapsed">
       <template v-for="(item, index) in columns" :key="item.field">
         <a-grid-item
-          v-if="item.show !== undefined ? isShow(item) : !isHide(item.hide)"
+          v-if="item.show !== undefined ? isShow(item) : !isHide(item)"
           v-show="colVShow(index)"
           v-bind="item.gridItemProps || props.options.gridItem"
           :span="item.span || options.gridItem?.span"

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>

src/components/SplitPanel/index.vue

@@ -1,11 +1,13 @@
 <template>
-  <div ref="rootRef" class="ca-split-panel" :class="{
+  <div
-    'is-vertical': vertical,
+    ref="rootRef" class="ca-split-panel" :class="{
-    'is-resizing': resizing,
+      'is-vertical': vertical,
-    'is-collapse': isCollapse,
+      'is-resizing': resizing,
-    'is-responsive': isResponsive,
+      'is-collapse': isCollapse,
-    'is-mobile': isMobile,
+      'is-responsive': isResponsive,
-  }" :style="customStyle">
+      'is-mobile': isMobile,
+    }" :style="customStyle"
+  >
     <div class="container" :style="sideStyle">
       <div ref="sideRef" class="ca-split-panel__side">
         <div class="ca-split-panel__content">
@@ -15,10 +17,12 @@
       <!-- 竖线和按钮 -->
       <div class="divider-container">
         <div v-show="!isCollapse" class="divider"></div>
-        <div v-if="allowCollapse" class="ca-split-panel__collapse-trigger" :class="{
+        <div
-          'is-collapse': isCollapse,
+          v-if="allowCollapse" class="ca-split-panel__collapse-trigger" :class="{
-          'is-mobile': isMobile,
+            'is-collapse': isCollapse,
-        }"  @click="toggleCollapse">
+            'is-mobile': isMobile,
+          }" @click="toggleCollapse"
+        >
           <div class="ca-split-panel__collapse-trigger-icon">
             <IconRight v-if="isCollapse" size="20" />
             <IconLeft v-else size="20" />
@@ -234,14 +238,14 @@ onUnmounted(() => {
     z-index: 2;
     width: 100%;
     height: 100%;
-    box-shadow: 0px 0px 0px 1px var(--color-border-1);
+    box-shadow: 0 0 0 1px var(--color-border-1);
     background-color: var(--color-bg-1);
     display: flex;
     justify-content: center;
     align-items: center;
 
     &:hover {
-      box-shadow: 0px 0px 0px 1px var(--color-border-2);
+      box-shadow: 0 0 0 1px var(--color-border-2);
       background-color: var(--color-border-2);
     }
   }

src/hooks/modules/useBreakpoint.ts

@@ -17,7 +17,7 @@ export function useBreakpoint() {
 
   const arr = breakpoints.current() as ComputedRef<Breakpoint[]>
   const breakpoint = computed(() => {
-    return arr.value[arr.value.length - 1] || 'xs'
+    return arr.value.length ? arr.value[arr.value.length - 1] : 'xs'
   })
 
   return { breakpoint }

src/styles/global.scss

@@ -17,6 +17,12 @@
   flex: 1;
 }
 
+// 一般结合<a-row class="flex-column"></a-row>使用
+.flex-column {
+  flex-direction: column;
+  overflow: hidden;
+}
+
 // 通用外边距
 .gi_margin {
   margin: $margin;
@@ -51,13 +57,6 @@
   transform: rotate(-180deg);
 }
 
-// 通用盒子
-.gi_box {
-  background: var(--color-bg-1);
-  border-radius: $radius-box;
-  overflow: hidden;
-}
-
 .gi_select_input {
   width: 120px !important;
 }
@@ -73,18 +72,22 @@
 }
 
 .gi_line_2 {
+  line-clamp: 2;
   -webkit-line-clamp: 2;
 }
 
 .gi_line_3 {
+  line-clamp: 2;
   -webkit-line-clamp: 3;
 }
 
 .gi_line_4 {
+  line-clamp: 2;
   -webkit-line-clamp: 4;
 }
 
 .gi_line_5 {
+  line-clamp: 2;
   -webkit-line-clamp: 5;
 }
 
@@ -159,6 +162,7 @@
   border-radius: 100px;
 }
 
+// hover按钮
 .gi_hover_btn {
   border: 0 !important;
   background-color: transparent;
@@ -184,6 +188,14 @@
   }
 }
 
+// 通用盒子
+.gi_box {
+  background: var(--color-bg-1);
+  border-radius: $radius-box;
+  overflow: hidden;
+}
+
+// 卡片组件，使body的高度自动撑满
 .gi_card {
   box-sizing: border-box;
   overflow: hidden;
@@ -199,6 +211,21 @@
   }
 }
 
+// 卡片标题，标题左侧的伪类样式
+.gi_card_title {
+  .arco-card-header-title::before {
+    content: '';
+    width: 4px;
+    height: 50%;
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: rgb(var(--warning-5));
+    border-radius: 0 4px 4px 0;
+  }
+}
+
 // 普通页面（使用场景，页面内容超出高度会自动滚动）
 .gi_page {
   flex: 1;
@@ -228,22 +255,62 @@
       line-height: 1.5;
     }
   }
-  &:after {
+
-    content: '';
-    height: 20px;
-    font-size: 12px;
-    color: var(--color-text-3);
-    box-sizing: border-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
 }
 
 // 表格类名 高度自适应
 .gi_table {
   flex: 1;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  >.arco-spin {
+    max-height: 100%;
+    height: auto;
+    overflow: hidden;
+  }
+}
+
+// 表格类名，高度自适应，分页始终固定在最底部
+.gi_full_table {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .arco-table-container {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .arco-table-scroll-y {
+    border-right: 1px solid var(--color-border-table);
+  }
+
+  .arco-table-tr .arco-table-td:last-child,
+  .arco-table-tr .arco-table-th:last-child {
+    border-right: none;
+  }
+
+  .arco-table-content {
+    .arco-scrollbar:last-child {
+      .arco-table-element {
+        border-bottom: 1px solid var(--color-border-table);
+      }
+    }
+  }
+}
+
+// 编辑表格，表头的必填红色星号
+.gi_column_require {
+  .arco-table-th-title {
+    &::before {
+      content: '*';
+      color: red;
+      padding-right: 2px;
+    }
+  }
 }
 
 .detail{
@@ -265,19 +332,6 @@
     background: var(--color-bg-1);
   }
 }
-.gi_card_title {
-  .arco-card-header-title::before {
-    content: '';
-    width: 4px;
-    height: 50%;
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: rgb(var(--primary-5));
-    border-radius: 0 4px 4px 0;
-  }
-}
 
 // echarts 提示
 .echarts-tooltip-diy {