feat(card-list): 添加字段列数配置支持多列布局

- 新增 fieldColumns 配置项控制卡片内字段排列列数
- 支持通过 colSpan 设置字段跨列显示
- 优化卡片内容布局样式和字段显示效果
- 调整对账模块相关页面布局

apps/finance/src/components/card-list/card-list.vue

@@ -73,6 +73,40 @@ const cardStyle = (item: any) => {
   return style;
 };
 
+// 卡片内容样式
+const cardContentStyle = computed(() => {
+  const fieldColumns = gridOptions.value?.fieldColumns || 1;
+
+  if (fieldColumns > 1) {
+    return {
+      display: 'grid',
+      gridTemplateColumns: `repeat(${fieldColumns}, 1fr)`,
+      columnGap: '10px', // 控制列间距
+      rowGap: '8px', // 控制行间距，设置更小的值
+    };
+  }
+
+  return {};
+});
+
+// 卡片字段样式
+const cardFieldStyle = (column: any) => {
+  const fieldColumns = gridOptions.value?.fieldColumns || 1;
+  const colSpan = column?.colSpan || 1;
+
+  if (fieldColumns > 1) {
+    return {
+      marginBottom: '0px',
+      paddingBottom: '0px',
+      height: 'auto',
+      lineHeight: 'normal',
+      gridColumn: `span ${colSpan}`,
+    };
+  }
+
+  return {};
+};
+
 // const errorCardStyle = (item: any) => {
 //   const errorData = gridOptions.value?.errorData || [];
 //   return errorData.some((errorItem) => errorItem.id === item.id)
@@ -234,11 +268,12 @@ onUnmounted(() => {
             <slot name="card-extra" :row="item" :index="index"></slot>
           </template>
 
-          <div class="card-content">
+          <div class="card-content" :style="cardContentStyle">
             <div
               v-for="column in gridOptions?.columns"
               :key="column?.field || ''"
               class="card-field"
+              :style="cardFieldStyle(column)"
               v-show="
                 !column?.show ||
                 (typeof column.show === 'function' ? column.show(item) : column.show)
@@ -290,27 +325,26 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .card-content {
   .card-field {
-    margin-bottom: 8px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
     .field-item {
       display: flex;
       align-items: center;
+      flex-wrap: nowrap;
 
       .field-title {
         flex-shrink: 0;
         margin-right: 8px;
         font-weight: 500;
         color: rgba(0, 0, 0, 0.85);
+        white-space: nowrap;
       }
 
       .field-value {
         flex: 1;
+        min-width: 0;
         word-break: break-all;
         color: rgba(0, 0, 0, 0.65);
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         &.field-edit {
           display: flex;
@@ -349,7 +383,6 @@ onUnmounted(() => {
   }
 
   .card-content {
-    flex: 1;
     overflow-y: auto;
     min-width: 0; // 防止内容撑开
   }