fzu-product/components/PostList.vue

<script setup>
import { ref, computed } from 'vue';
import Pagination from './Pagination.vue';
import PostItem from './PostItem.vue';
const props= {data:(await (await fetch("https://raw.githubusercontent.com/NX-Official/friends-link-plus/main/output/friends.json")).json()).posts}
const pageSize = 10
// const Date = ref('')
const pageTotal = ref(Math.ceil(props.data.length / pageSize))
const pageNum = ref(1)
// const searchText = ref('')
// const onsearchText = ref('')
const pluginLists = computed(() => {
  let data_ = props.data//.filter(item => item.Date == Date.value)
  // if (!!onsearchText.value) {
  //   data_ = data_.filter(item => item.name.indexOf(onsearchText.value) > -1)
  // }
  pageTotal.value = Math.ceil(data_.length / pageSize)
  data_ = data_.slice((pageNum.value - 1) * pageSize, pageNum.value * pageSize)
  return data_
})
// const setDate = (Date_) => {
//   Date.value = Date_
//   searchText.value = ""
//   onSearch()
// }
// const onSearch = () => {
//   onsearchText.value = searchText.value
//   pageNum.value = 1
// }
</script>

<template>
  <div>
    <!-- <div class="tab">
      <div opacity="80" text="sm">
        类型{{ props.data }}
      </div>
      <div class="select-list">
        <button class="select-button" @click="setDate('plugin')" :class="{ 'active': type == 'plugin' }">
          插件
        </button>
        <button class="select-button" @click="setType('adapter')" :class="{ 'active': type == 'adapter' }">
          适配器
        </button>
        <button class="select-button" @click="setType('example')" :class="{ 'active': type == 'example' }">
          样例
        </button>
      </div>
    </div> -->
    <!-- <div class="search-bar">
      <div class="divider" style="margin-top: 1rem;" />
      <div class="search" @change="onSearch">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32" class="icon">
          <path fill="currentColor"
            d="m29 27.586l-7.552-7.552a11.018 11.018 0 1 0-1.414 1.414L27.586 29ZM4 13a9 9 0 1 1 9 9a9.01 9.01 0 0 1-9-9Z" />
        </svg>
        <input data-v-48d9a5fe="" class="search-input" type="text" role="search" placeholder="Search..."
          v-model="searchText">
      </div>
      <div class="divider" style="margin-bottom: 1rem;" />
    </div> -->
    <Pagination :pageTotal="pageTotal" v-model="pageNum" style="width: 100%;" key="0" />
    <div class="card-list">
      <PostItem v-for="(item, index) in pluginLists" :key="index" :Title="item.Title" :Content="item.Content"
        :Date="item.Date" :Author="item.Author" :tag="item?.tag" :cover="item?.cover" :PostURL="item.PostURL" :AuthorURL="item.AuthorURL"/>
    </div>
    <Pagination :pageTotal="pageTotal" v-model="pageNum" style="width: 100%;" key="1" />
  </div>
</template>


<style scoped>
.tab {
  grid-row-gap: .5rem;
  row-gap: .5rem;
  margin-top: 2.5rem;
  grid-template-columns: 80px auto;
  display: grid;
}

.sm {
  font-size: .875rem;
  line-height: 1.25rem;
}

.select-list {
  grid-gap: .5rem;
  gap: .5rem;
  flex-wrap: wrap;
  display: flex;
  margin-bottom: .5rem;
}

.select-button {
  border-radius: .25rem;
  background-color: #9ca3af0d;
  padding: .125rem .5rem;
  font-size: .875rem;
  line-height: 1.25rem;
}

.select-button:hover {
  cursor: pointer;
  background-color: #9ca3af1a;
}

.select-button.active {
  background-color: #0099ff0d;
  --un-text-opacity: 1;
  color: var(--vp-c-brand-lighter);
}

.divider {
  background-color: rgba(60, 60, 67, .12);
  height: 1px;
}

.search {
  padding: .5rem;
  display: flex;
}

.icon {
  margin-right: .5rem;
}

.search-input {
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
}

.card-list {
  display: grid;
  /* gap: 1.5rem; */
  /* grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); */
}

.card {
  display: block;
  border: 1px solid rgba(82, 82, 89, .32);
  border-radius: .5rem;
  padding: 1.5rem;
  width: 100%;
  height: 100%;
  transition: border-color .25s;
  cursor: pointer;
}

.card:hover {
  border: 1px solid #09f;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  display: flex;
  font-size: large;
  font-weight: bold;
  align-items: center;
}

.card-github {
  cursor: pointer;
}

.card-github:hover {
  fill: #09f;
}

.card-des {
  color: #3C3C43;
  opacity: .7;
  font-size: .875rem;
  line-height: 1.25rem;
  margin-top: .3rem;
}

.card-tags {
  display: flex;
  margin-top: .5rem;
  margin-bottom: .5rem;
  font-size: .875rem;
  line-height: 1.25rem;
}

.card-tag {
  margin: 0 .5rem;
  padding: 0 .5rem;
  background-color: #9ca3af2b;
}

.card-tags .card-tag:first-child {
  margin-left: 0;
  /* background-color: #6e6e6e; */
}

.card-details {
  margin: .8rem 0 .5rem 0;
}

.card-text {
  margin-left: .5rem;
  font-size: .95rem;
  line-height: 1.5rem;
}

.card-detail {
  display: flex;
  align-items: center;
}

.card-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: .4rem 1rem;
  background-color: #f6f6f7;
  border-radius: .5rem;
  cursor: pointer;
}

.card-button:hover {
  color: #09f;
}

.card-button:hover {
  fill: #09f;
}

@media (prefers-color-scheme: dark) {

  .card-button {
    background-color: #9ca3af0d;
  }

  .card-des {
    color: #9ca3af;
  }

}
</style>