CardPro 组件增加 full-height 自适应100%高度属性

Web/src/components/CardPro/README.md

@@ -4,6 +4,16 @@
 
 ---
 
+## 属性
+
+| 属性名 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | ---  |
+| title | 卡片的标题 | `string` | — |
+| prefix-icon | 标题前方的图标 | `string` | — |
+| suffix | header 右侧的内容，可以传入文本内容，也可以通过 `#footer` 传入 `solt`  | `string` | — |
+| size | 尺寸, 可取值有 `large` 、`default` 、 `small` | `enum` | — |
+| full-height | 是否 100% 高度，设置为 `true` 后，卡片将使用 flex 布局，父元素需有高度。卡片内容区将根据父元素高度自适应，无需再设置卡片 `style="height:100%" ` 和 `body-style="height:100%"` 。 | `boolean` | false |
+
 ## 如何使用
 
 ### 基本用法
@@ -69,6 +79,21 @@ import CardPro from '/@/components/CardPro/index.vue';
 </script>
 ```
 
+### 自适应100%高度
+
+设置 `full-height` 属性为 `true` 即可
+
+```html
+<template>
+    <card-pro title="标题" :full-height="true">
+        <!-- 你的内容 -->
+    </card-pro>
+</template>
+<script lang="ts" setup>
+import CardPro from '/@/components/CardPro/index.vue';
+</script>
+```
+
 ---
 
-最新更新于 2025.10.10
+最新更新于 2025.10.15

Web/src/components/CardPro/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-card v-bind="$attrs" :class="sizeClass">
+    <el-card v-bind="$attrs" :class="[sizeClass, fullHeight ? 'full-height' : '']">
         <template #header v-if="title || $slots.prefix || prefixIcon || $slots.suffix || suffix">
             <div class="cardpro-header">
                 <div v-if="$slots.prefix || prefixIcon" class="cardpro-header-prefix">
@@ -37,7 +37,8 @@ const props = defineProps({
     title: { type: String },
     prefixIcon: { type: String },
     suffix: { type: String },
-    size: useSizeProp
+    size: useSizeProp,
+    fullHeight: { type: Boolean, default: false }
 });
 
 // 获取全局组件大小
@@ -63,7 +64,13 @@ const sizeClass = computed(() => {
         align-items: center;
         margin-top: 1px;
     }
-    &-title { flex: 1; padding: var(--cardpro-padding) 0; }
+    &-title { 
+        flex: 1; 
+        padding: var(--cardpro-padding) 0; 
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
     &-suffix {
         height: 100%;
         margin-left: 5px;
@@ -86,4 +93,14 @@ const sizeClass = computed(() => {
 :deep(.el-card__body) {
     padding: var(--cardpro-padding);
 }
+
+.full-height {
+    display: flex;
+    flex-direction:column;
+    height: 100%;
+    
+    :deep(.el-card__body) {
+        flex: 1;
+    }
+}
 </style>