为 Clarity 主题增加 ResourceList 资源列表组件

<script setup lang="ts">
defineProps<{
  items: Array<{
    id?: string | number
    title: string
    subtitle?: string
    tags?: string[]
    link?: string
    summary?: string
    extractPassword?: string
    downloadPassword?: string
  }>
}>()
</script>

<template>
  <ol class="resource-list">
    <li v-for="item in items" :key="item.id ?? item.title" class="resource-item card gradient-card">
      <div class="resource-left">
        <div class="resource-main">
          <div class="resource-title text-creative">{{ item.title }}</div>
          <p v-if="item.subtitle" class="resource-subtitle">{{ item.subtitle }}</p>
          <div v-if="item.summary" class="resource-summary">{{ item.summary }}</div>
        </div>
        <div class="resource-meta">
          <div class="resource-passwords">
            <span v-if="item.extractPassword" class="pw">解压密码: {{ item.extractPassword }}</span>
            <span v-if="item.downloadPassword" class="pw">下载密码: {{ item.downloadPassword }}</span>
          </div>
          <div class="resource-tags">
            <Badge v-for="tag in item.tags ?? []" :key="tag" :text="tag" />
          </div>
        </div>
      </div>
      <ZRawLink
        v-if="item.link"
        :to="item.link"
        class="download-fab"
        :aria-label="'下载资源'"
        :title="'下载资源'"
        target="_blank"
        rel="noopener"
      >
        <Icon name="ph:download-simple" />
      </ZRawLink>
      <button
        v-else
        class="download-fab"
        disabled
        :aria-label="'下载资源'"
        :title="'下载资源'"
      >
        <Icon name="ph:download-simple" />
      </button>
    </li>
  </ol>
</template>

<style lang="scss" scoped>
.resource-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.resource-item {
  position: relative;
  padding: 0.9rem 1rem 1.6rem;
  border-radius: 0.5rem;
  background: var(--ld-bg-card);
  box-shadow: 0 2px 8px var(--ld-shadow);
  min-height: 4.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: box-shadow 0.2s, transform 0.2s;
  font-family: var(--font-basic);

  &:hover {
    box-shadow: 0 0.5em 1.2em var(--ld-shadow);
    transform: translateY(-2px);
  }
}

.resource-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.resource-title {
  font-weight: 700;
  font-size: 1.01rem;
  color: var(--c-text);
  margin-bottom: 0.08rem;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.resource-subtitle {
  color: var(--c-text-2);
  font-size: 0.93rem;
  margin-bottom: 0.08rem;
  line-height: 1.2;
}

.resource-summary {
  color: var(--c-text-1);
  font-size: 0.91rem;
  margin-bottom: 0.08rem;
  line-height: 1.3;
}

.resource-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 0.4rem;
  margin-top: 0.08rem;
  padding-right: 3.6rem;
}

.resource-passwords {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;

  .pw {
    font-size: 0.8rem;
    color: var(--c-text-2);
    background: var(--c-bg-2);
    padding: 0.13rem 0.35rem;
    border-radius: 0.28rem;
    letter-spacing: 0.01em;
  }
}

.resource-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.18rem;
  justify-content: flex-end;
  max-width: 60vw;
}

.download-fab {
  position: absolute;
  right: 1.3rem;
  bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  background: #2f9bff;
  color: white;
  border: none;
  box-shadow: 0 6px 18px var(--ld-shadow);
  cursor: pointer;
  text-decoration: none;
  font-size: 1.05rem;
  transition: background 0.18s, box-shadow 0.18s;
  z-index: 2;

  &:hover:not(:disabled) {
    background: #1e7fe0;
    box-shadow: 0 8px 22px var(--ld-shadow);
  }

  &:active {
    background: #1570d0;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

@media (max-width: 600px) {
  .resource-item {
    padding: 0.7rem 1rem 0.8rem 0.7rem;
    border-radius: 0.35rem;
    font-size: 0.88em;
    min-height: 3.2rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .resource-main {
    flex: 1 1 auto;
    min-width: 0;
  }

  .resource-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding-right: 0;
    margin-top: 0.3rem;
  }

  .resource-title {
    font-size: 0.98rem;
  }

  .resource-subtitle,
  .resource-summary {
    font-size: 0.85rem;
  }

  .resource-passwords .pw {
    font-size: 0.72rem;
    padding: 0.09rem 0.22rem;
    border-radius: 0.18rem;
  }

  .resource-tags {
    max-width: 80vw;
    gap: 0.12rem;
    margin-top: 0.18rem;
  }

  .download-fab {
    position: static;
    margin-left: 0.6rem;
    margin-right: 0.4rem;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.1rem;
    border-radius: 0.36rem;
    align-self: center;
    flex-shrink: 0;
  }
}
</style>