搜索结果列表页面开发

src/components/DataPanel/README.md

@@ -0,0 +1,37 @@
+# DataPanel
+
+### 说明
+- 已全局声明
+- 在EmptyData上进行了二次封装，通过empty和loading字段自适应展示数据
+- loading使用d-skeleton方案，可以通过$slots.loading自定义。或者不传入loading，自己加v-loading="loading"
+- empty使用EmptyData方案，可以通过$slots.empty自定义
+
+``` ts
+<DataPanel :empty="!dataList?length" :loading="loading">
+  <d-table :data="dataList" />
+</DataPanel>
+
+const dataList = ref([]);
+const loading = ref(false);
+```
+
+### Props
+
+| 参数       | 说明                   | 类型                        | 可选值    | 默认值     |
+|-----------|------------------------|----------------------------|----------|-----------|
+| loading?   | 是否加载中。默认启动v-loading效果，如果传入$slots.loading则v-loading失效 | boolean  | -  | false |
+| empty?        | 是否数据为空，为空默认展示d-result        | boolean           | -        | false         |
+| emptyText?    | 数据为空的标题        | string               | -        | '暂无数据'         |
+| emptyDetail?    | 数据为空标题下方的描述        | string               | -        | '暂无数据'         |
+| skeleton?    | loading状态下显示骨架屏，比animation优先级更高    | boolean               | -        | false         |
+| animation?    | loading状态下显示定制的loading    | boolean               | -        | false         |
+| card?    | 是否使用g-card组件样式    | boolean               | -        | true         |
+
+### Slots
+
+| 名称                 | 说明                                        |
+|---------------------|---------------------------------------------|
+| default              | 数据自定义区域                                 |
+| empty?              | 数据为空的定义                                 |
+| loading?              | loading效果，如骨架屏。默认使用v-loading，传入loading slot则v-loading失效 |
+

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>