对接数据

pages/AIHub/Frameworks.vue

@@ -1,22 +1,92 @@
 <template>
-    <div>
-        <!-- 组件内容 -->
-    </div>
+	<div class="tools-container" v-loading.fullscreen.lock="fullscreenLoading">
+		<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="framework" />
+		</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 {
-    data() {
-        return {
-            // 数据项
-        }
-    },
-    methods: {
-        // 方法
-    }
+	components: {
+		ListCardItem,
+	},
+	data() {
+		return {
+			currentPage: 1,
+			totalPages: 1,
+			pageSize: 10,
+			articleList: [],
+			total: 0,
+			searchText: '',
+			fullscreenLoading: false
+		}
+	},
+	watch: {
+		total() {
+			this.calculateTotalPages();
+		},
+		pageSize() {
+			this.calculateTotalPages();
+		}
+	},
+	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) {
+			const params = {page, limit, articleType: 'framework', title: searchText};
+			if (!searchText) {
+				delete params.title;
+			}
+			this.fullscreenLoading = true;
+			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 lang="scss" scoped>
-
-</style>
+.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>