From 73d0572dfc3bf342a8a24272ca459dc135b5ba5c Mon Sep 17 00:00:00 2001
From: developer <dev@lpt.com>
Date: Sun, 12 Jul 2026 13:48:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Study=20=E9=A1=B5=E9=9D=A2=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E5=88=97=E8=A1=A8=E5=88=86=E9=A1=B5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 currentPage/totalTasks/pageSize 响应式状态
- fetchTasks 支持 page 参数，请求指定页码
- 新增 handlePageChange 切换页码时重置选中状态
- 模板侧边栏底部添加 el-pagination 分页组件
- 分页组件仅当总数超过单页容量时显示
---
 src/components/Study.vue | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/Study.vue b/src/components/Study.vue
index a3bdfb3..572d973 100644
--- a/src/components/Study.vue
+++ b/src/components/Study.vue
@@ -37,6 +37,9 @@ interface TaskItem {
 const tasks = ref<TaskItem[]>([]);
 const selectedTaskId = ref<number | null>(null);
 const loading = ref(false);
+const currentPage = ref(1);
+const totalTasks = ref(0);
+const pageSize = 20;
 const taskApplications = ref<TaskApplication[]>([]);
 const applicationsLoading = ref(false);
 const appUrlTitles = ref<Record<number, string>>({});
@@ -147,11 +150,13 @@ const changeApplicationStatus = async (item: TaskApplication) => {
   }
 };
 
-const fetchTasks = async () => {
+const fetchTasks = async (page = currentPage.value) => {
   loading.value = true;
   try {
     const previousSelectedTaskId = selectedTaskId.value;
-    const res = await request.get("/tasks", { pageSize: 100, pageNum: 1 });
+    currentPage.value = page;
+    const res = await request.get("/tasks", { pageSize, pageNum: page });
+    totalTasks.value = res?.data?.total || 0;
     tasks.value = (res?.data?.records || []).map((record: any) => ({
       title: record.taskName,
       description: record.taskDescription || "",
@@ -197,6 +202,12 @@ watch(selectedTaskId, (newId) => {
   }
 });
 
+const handlePageChange = (page: number) => {
+  selectedTaskId.value = null;
+  taskApplications.value = [];
+  fetchTasks(page);
+};
+
 const startTask = async () => {
   if (!selectedTask.value) {
     ElMessage.warning("请先选择一个任务");
@@ -339,6 +350,16 @@ onMounted(() => {
             </p>
           </div>
         </el-scrollbar>
+        <el-pagination
+          v-if="totalTasks > pageSize"
+          small
+          layout="prev, pager, next"
+          :total="totalTasks"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          @current-change="handlePageChange"
+          class="task-pagination"
+        />
       </aside>
 
       <main class="content-zone">
@@ -584,6 +605,10 @@ onMounted(() => {
   justify-content: center;
 }
 
+.task-pagination {
+  margin-top: 10px;
+  justify-content: center;
+}
 
 .content-zone {
   display: grid;