feat: Study 页面任务列表分页功能

- 新增 currentPage/totalTasks/pageSize 响应式状态
- fetchTasks 支持 page 参数，请求指定页码
- 新增 handlePageChange 切换页码时重置选中状态
- 模板侧边栏底部添加 el-pagination 分页组件
- 分页组件仅当总数超过单页容量时显示

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;