feat: add vxe-table component (#4563)

* chore: wip vxe-table

* feat: add table demo

* chore: follow ci recommendations to adjust details

* chore: add custom-cell demo

* feat: add custom-cell table demo

* feat: add table from demo

packages/effects/common-ui/src/components/page/__tests__/page.test.ts

@@ -54,7 +54,7 @@ describe('page.vue', () => {
       },
     });
 
-    const contentDiv = wrapper.find('.m-4');
+    const contentDiv = wrapper.find('.p-4');
     expect(contentDiv.classes()).toContain('custom-class');
   });
 

packages/effects/common-ui/src/components/page/page.vue

@@ -1,37 +1,79 @@
 <script setup lang="ts">
+import { computed, nextTick, onMounted, ref, useTemplateRef } from 'vue';
+
 interface Props {
   title?: string;
   description?: string;
   contentClass?: string;
-  showFooter?: boolean;
+  /**
+   * 根据content可见高度自适应
+   */
+  autoContentHeight?: boolean;
 }
 
 defineOptions({
   name: 'Page',
 });
 
-const props = withDefaults(defineProps<Props>(), {
-  contentClass: '',
-  description: '',
-  showFooter: false,
-  title: '',
+const {
+  contentClass = '',
+  description = '',
+  autoContentHeight = false,
+  title = '',
+} = defineProps<Props>();
+
+const headerHeight = ref(0);
+const footerHeight = ref(0);
+const shouldAutoHeight = ref(false);
+
+const headerRef = useTemplateRef<HTMLDivElement>('headerRef');
+const footerRef = useTemplateRef<HTMLDivElement>('footerRef');
+
+const contentStyle = computed(() => {
+  if (autoContentHeight) {
+    return {
+      height: shouldAutoHeight.value
+        ? `calc(var(--vben-content-height) - ${headerHeight.value}px - ${footerHeight.value}px)`
+        : '0',
+      // 'overflow-y': shouldAutoHeight.value?'auto':'unset',
+    };
+  }
+  return {};
+});
+
+async function calcContentHeight() {
+  if (!autoContentHeight) {
+    return;
+  }
+  await nextTick();
+  headerHeight.value = headerRef.value?.offsetHeight || 0;
+  footerHeight.value = footerRef.value?.offsetHeight || 0;
+  setTimeout(() => {
+    shouldAutoHeight.value = true;
+  }, 30);
+}
+
+onMounted(() => {
+  calcContentHeight();
 });
 </script>
 
 <template>
-  <div class="relative h-full">
+  <div class="relative">
     <div
-      v-if="description || $slots.description || title"
-      class="bg-card px-6 py-4"
+      v-if="
+        description ||
+        $slots.description ||
+        title ||
+        $slots.title ||
+        $slots.extra
+      "
+      ref="headerRef"
+      class="bg-card relative px-6 py-4"
     >
       <slot name="title">
-        <div
-          v-if="title"
-          class="mb-2 flex justify-between text-lg font-semibold"
-        >
+        <div v-if="title" class="mb-2 flex text-lg font-semibold">
           {{ title }}
-
-          <slot name="extra"></slot>
         </div>
       </slot>
 
@@ -40,14 +82,19 @@ const props = withDefaults(defineProps<Props>(), {
           {{ description }}
         </p>
       </slot>
+
+      <div v-if="$slots.extra" class="absolute bottom-4 right-4">
+        <slot name="extra"></slot>
+      </div>
     </div>
 
-    <div :class="contentClass" class="m-4">
+    <div :class="contentClass" :style="contentStyle" class="h-full p-4">
       <slot></slot>
     </div>
 
     <div
-      v-if="props.showFooter"
+      v-if="$slots.footer"
+      ref="footerRef"
       class="bg-card align-center absolute bottom-0 left-0 right-0 flex px-6 py-4"
     >
       <slot name="footer"></slot>