fuse-code/src/components/list/index.vue

<template>
  <ul class="list">
    <li class="header" v-if="title">
      <template v-if="!$slots.header">
        <h3>{{ title }}</h3>
        <div class="action" v-if="$slots.action">
          <slot name="action"></slot>
        </div>
      </template>
      <slot name="header" v-else />
    </li>
    <ul class="content" v-if="showContent">
      <li
        v-for="(item, i) in data"
        :key="rawKey ? item.raw[rawKey] : i"
        :class="{ select: item.select }"
        @click="$emit('changeSelect', item)"
      >
        <div class="atom-content">
          <slot name="atom" :item="item"></slot>
        </div>
      </li>
    </ul>
  </ul>
</template>

<script lang="ts" setup>
type Item = Record<string, any> & { select?: boolean };
type ListProps = {
  title?: string;
  rawKey?: string;
  data: Array<Item>;
  showContent?: boolean;
};

withDefaults(defineProps<ListProps>(), { showContent: true });

defineEmits<{ (e: "changeSelect", item: Item): void }>();
</script>

<style lang="scss" scoped>
.header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  justify-content: space-between;
  padding: 20px;

  h3 {
    font-size: 16px;
    font-weight: bold;
    color: #999999;
  }
}

.content {
  li {
    padding: 0 20px;
    cursor: pointer;

    &.select {
      background: rgba(0, 200, 175, 0.16);
    }

    .atom-content {
      padding: 20px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    }
  }
}

.list li {
  list-style: none;
}
</style>