bk-vue/src/views/ArchivesView.vue

<script setup lang="ts">
import TagCloud from '@/components/TagCloud.vue'
import { api } from '@/utils/axios.ts'
import type { Tag } from '@/models'
import { onMounted, ref } from 'vue'
import { type CateOption, optionOfCate } from '@/utils/cates.ts'
import { router } from '@/router'

const tags = ref<Tag[]>([])

const archiveLabels = ref<CateOption[]>([])

onMounted(() => {
  Promise.all([
    api.tagList().then((res) => {
      tags.value = res.data
    }),
    api.postCates().then((res) => {
      archiveLabels.value = res.data.map(optionOfCate)
    }),
  ])
});

const handleCateClick = (cate: string) => {
  router.push(`/archive?cate=${cate}`)
}

const handleTagClick = (tag: Tag) => {
  router.push(`/archive?tag=${tag.name}`)
}

</script>

<template>
  <div>
    <div class="post-item">
      <h1 class="title">话题</h1>
      <TagCloud :tags="tags" :on-click="handleTagClick" />
      <h2>档案库</h2>
      <div class="archive-items-grid">
        <div class="archive-item-wrapper" v-for="item in archiveLabels" :key="item.value">
          <div class="archive-item" @click="handleCateClick(item.value)">
            <div class="prefix-icon" v-html="item.svg.template"/>
            <div class="content">{{ item.label }}</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>

.archive-items-grid {
  width: 100%;
}

.archive-item-wrapper {
  display: inline-block;
  width: 50%;
}

.archive-item .prefix-icon {
  width: 32px;
  height: 32px;
}

.archive-item {
  display: flex;
  justify-content: center;
  gap: 24px;
  background-color: var(--secondary-background-color);
  color: var(--text-color);
  font-size: larger;
  fill: var(--text-color);
  padding: 20px 0;
  width: calc(100% - 20px);
  border-radius: 12px;
  align-items: center;
  margin: 20px 10px;
  cursor: pointer;
  transition: all .3s;
}

.archive-item:hover {
  box-shadow: var(--secondary-background-color) 0 0 12px;
  background-color: var(--text-color);
  color: var(--secondary-background-color);
  fill: var(--secondary-background-color);
  font-weight: bold;
}

</style>