搜索结果列表页面开发

src/components/DataPanel/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="g-data-panel" :class="{'g-card': card}">
+    <slot v-if="loading" name="loading">
+      <d-skeleton v-if="skeleton" class="p-20" :rows="skeletonRow"/>
+      <Animation v-else-if="animation" class="w-full h-full flex-center" />
+    </slot>
+    <slot v-else-if="empty" name="empty">
+      <EmptyData class="h-full flex-1" :hide-icon="hideIcon" :title="emptyText" :desc="emptyDetail" />
+    </slot>
+    <slot v-else></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Animation from '@/components/Animation/index.vue';
+
+interface IProps {
+  loading?: boolean,
+  empty?: boolean,
+  emptyText?: string,
+  emptyDetail?: string,
+  skeleton?: boolean,
+  hideIcon?: boolean,
+  skeletonRow?:number,
+  card?: boolean,
+  animation?: boolean
+}
+withDefaults(defineProps<IProps>(), {
+  emptyText: '暂无数据',
+  skeletonRow: 5,
+  card: true,
+  animation: false
+});
+</script>
+
+<style lang="scss" scoped>
+@import 'devui-theme/styles-var/devui-var.scss';
+</style>