搜索结果列表页面开发

src/components/CustomList/README.md

@@ -0,0 +1,25 @@
+# CustomHeader
+
+### 说明
+- 自定义header组件
+
+``` js
+<CustomList title='' data='' />
+```
+
+### Props
+| 参数        | 说明     | 类型                                                         | 可选值    | 默认值  |
+|-----------|--------|------------------------------------------------------------|----------|------|
+| title?    | 标题     | string                                                     | -        | '' |
+| data     | 数据     | { name: string; extra: string; [propName: string]: any }[] | -        | []   |
+| showCount? | 是否显示计数 | boolean                                                    | -        | true |
+| showHeader? | 是否显示头部 | boolean                                                    | -        | true |
+
+### Slots
+
+| 名称         | 说明           |
+|------------|--------------|
+| actions    | 组件头部操作区域插槽   |
+| item       | 组件单元数据插槽     |
+| item-name  | 组件单元数据名称区域插槽 |
+| item-extra | 组件单元数据尾部区域插槽 |

src/components/CustomList/index.vue

@@ -0,0 +1,105 @@
+<template>
+  <section class="g-custom-list">
+    <div v-if="showHeader" class="g-custom-list-header">
+      <custom-header
+        :title="title"
+        :count="data.length"
+        :showCount="showCount"
+      >
+        <template #actions>
+          <slot name="actions">
+            <d-button class="g-custom-list-button">新建Star列表</d-button>
+          </slot>
+        </template>
+      </custom-header>
+    </div>
+    <div class="g-custom-list-content">
+      <div
+        v-for="(item, index) in data"
+        :key="`${item.id}_${index}`"
+        class="g-custom-list-item"
+        :class="{'is-last': index === data.length - 1}"
+      >
+        <slot name="item" :data="item" :index="index">
+          <div class="g-custom-list-item-name">
+            <slot name="item-name" :data="item" :index="index">{{ item.name }}</slot>
+          </div>
+          <div class="g-custom-list-item-extra">
+            <slot name="item-extra" :data="item" :index="index">
+              {{ item.extra }}
+            </slot>
+          </div>
+        </slot>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'custom-list'
+};
+</script>
+
+<script setup lang="ts">
+import CustomHeader from '@/components/CustomHeader/index.vue';
+withDefaults(defineProps<{
+  title?: string;
+  data: {
+    name: string;
+    extra: string;
+    [propName: string]: any;
+  }[];
+  showCount?: boolean;
+  showHeader?: boolean;
+}>(), {
+  title: '',
+  data: () => [],
+  showCount: true,
+  showHeader: true
+});
+</script>
+
+<style scoped lang="scss">
+$g-custom-list-color: #000000;
+$g-custom-list-color-second: #606060;
+$g-custom-list-color-white: #ffffff;
+$g-custom-list-bg-color: #333333;
+$g-custom-list-border-color: #D3D3D3;
+$g-custom-list-border-radius: 4px;
+.g-custom-list {
+  &-header {
+    margin-bottom: 16px;
+  }
+  &-button {
+    padding: 8px 16px;
+    line-height: 1;
+    background-color: $g-custom-list-bg-color;
+    color: $g-custom-list-color-white;
+  }
+  &-content {
+    border: 1px solid $g-custom-list-border-color;
+    border-radius: $g-custom-list-border-radius;
+  }
+  &-item {
+    border-bottom: 1px solid $g-custom-list-border-color;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    line-height: 1;
+    &.is-last {
+      border-bottom: none;
+    }
+    &-name {
+      font-size: 18px;
+      color: $g-custom-list-bg-color;
+      font-weight: 500;
+    }
+    &-extra {
+      color: $g-custom-list-color-second;
+      font-size: 16px;
+    }
+  }
+}
+</style>