first commit

target/classes/static/components/plugins/sysCard/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <!-- 完全自定义卡片容器，复刻el-card样式 -->
+  <div
+    class="el-card custom-card"
+    :style="{ width: width || '100%' }"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <!-- 卡片头部 - 独立节点 -->
+    <div v-if="$slots.header" class="el-card__header card-header">
+      <slot name="header"></slot>
+    </div>
+
+    <!-- 可滚动内容区域 - 独立节点 -->
+    <div class="el-card__body card-body">
+      <slot></slot>
+    </div>
+
+    <!-- 卡片底部 - 独立节点 -->
+    <div v-if="$slots.footer" class="el-card__footer card-footer">
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  name: 'CustomCard',
+  inheritAttrs: false,
+  props: {
+    // 保留el-card的核心属性，保证使用体验一致
+    width: {
+      type: String,
+      default: ''
+    },
+    shadow: {
+      type: String,
+      default: 'hover', // 同el-card默认值
+      validator: (val) => ['always', 'hover', 'never'].includes(val)
+    }
+  },
+  computed: {
+    // 根据shadow属性动态设置阴影样式
+    shadowClass() {
+      return {
+        'el-card--shadow-always': this.shadow === 'always',
+        'el-card--shadow-hover': this.shadow === 'hover',
+        'el-card--shadow-never': this.shadow === 'never'
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+/* 卡片核心样式 - 完全复刻el-card */
+.custom-card {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 84px); /* 关键：卡片高度撑满父容器 */
+  background: #fff;
+  border-radius: 4px;
+  box-sizing: border-box;
+  margin: 0;
+  border: 0;
+  /* 继承el-card的字体样式 */
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+  transition: box-shadow 0.3s ease-in-out;
+  overflow: hidden;
+}
+
+/* 阴影样式 - 完全对齐el-card */
+:deep(.el-card--shadow-always) {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+:deep(.el-card--shadow-hover):hover {
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+:deep(.el-card--shadow-never) {
+  box-shadow: none;
+}
+
+/* 头部样式 - 固定高度，不滚动 */
+.card-header {
+  flex-shrink: 0; /* 关键：不被压缩 */
+  padding: 18px 20px;
+  border-bottom: 1px solid #ebeef5;
+  box-sizing: border-box;
+}
+
+/* 内容区域 - 自动填充剩余空间，可滚动 */
+.card-body {
+  flex: 1; /* 关键：占满剩余高度 */
+  padding: 20px;
+  overflow-y: auto; /* 垂直滚动 */
+  overflow-x: hidden; /* 隐藏水平滚动 */
+  box-sizing: border-box;
+}
+
+/* 底部样式 - 固定高度，不滚动 */
+.card-footer {
+  flex-shrink: 0; /* 关键：不被压缩 */
+  padding: 18px 20px;
+  border-top: 1px solid #ebeef5;
+  box-sizing: border-box;
+  text-align: right;
+}
+
+/* 兼容el-card的默认样式覆盖 */
+:deep(.el-card__header) {
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+:deep(.el-card__body) {
+  padding: 0;
+  margin: 0;
+}
+</style>