104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<template>
|
|
<div class="container" v-loading.fullscreen.lock="fullscreenLoading">
|
|
<div class="top-text">
|
|
<div class="title">AI Observer</div>
|
|
<div class="description">
|
|
An organized hub of leading AI research projects and frameworks. Dive into the methodologies of major academic papers, understand the underlying technical principles, and gain insights that support both learning and hands-on AI development.
|
|
</div>
|
|
</div>
|
|
<div class="input">
|
|
<SearchInput v-model="searchText" placeholder="Please enter the key words" @search="handleTextSearch" />
|
|
</div>
|
|
<div class="list">
|
|
<ListCardItem v-for="it in articleList" :key="it.id" :item="it" type="observer" />
|
|
</div>
|
|
<div class="pagination-wrapper">
|
|
<Pagination :current-page="currentPage" :total-pages="totalPages" @page-change="handlePageChange" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ListCardItem from "@/pages/AIHub/components/ListCardItem.vue";
|
|
|
|
export default {
|
|
components: {
|
|
ListCardItem,
|
|
},
|
|
data() {
|
|
return {
|
|
currentPage: 1,
|
|
totalPages: 1,
|
|
pageSize: 10,
|
|
articleList: [],
|
|
searchText: '',
|
|
total: 0,
|
|
fullscreenLoading: false,
|
|
}
|
|
},
|
|
methods: {
|
|
// 模糊搜索
|
|
async handleTextSearch() {
|
|
await this.getArticleListData(this.currentPage, this.pageSize, this.searchText);
|
|
},
|
|
calculateTotalPages() {
|
|
// 否则向上取整计算总页数
|
|
this.totalPages = this.total === 0 ? 1 : Math.ceil(this.total / this.pageSize);
|
|
},
|
|
handlePageChange(pageNumber) {
|
|
this.currentPage = pageNumber;
|
|
this.getArticleListData(pageNumber, 10);
|
|
},
|
|
// 获取文章列表
|
|
async getArticleListData(page = 1, limit = 10, searchText) {
|
|
this.fullscreenLoading = true;
|
|
const params = {page, limit, articleType: 'observer', title: searchText};
|
|
if (!searchText) {
|
|
delete params.title;
|
|
}
|
|
const {data: res} = await this.$api.article.getArticleList(params);
|
|
const {code, data} = res;
|
|
if (code === 0 && data.list) {
|
|
this.articleList = data.list;
|
|
this.total = data.total;
|
|
this.calculateTotalPages();
|
|
}
|
|
this.fullscreenLoading = false;
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getArticleListData(this.currentPage, this.pageSize);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: $huge-font-size1;
|
|
}
|
|
|
|
.description {
|
|
font-size: $big-font-size;
|
|
color: $grey-color;
|
|
}
|
|
|
|
.input {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
.input-container {
|
|
margin-top: 100px;
|
|
margin-bottom: 60px;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
margin-bottom: 60px;
|
|
}
|
|
}
|
|
</style>
|