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

<template>
  <ul class="list">
    <li class="header" v-if="title">
      <h3>{{ title }}</h3>
      <div class="action" v-if="$slots.action">
        <slot name="action"></slot>
      </div>
    </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.stop="$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.1600);
    }

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

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