From c84d30e287673c9eb395d76a1e3be10ee0698f50 Mon Sep 17 00:00:00 2001
From: cat_shark <1716967236@qq.com>
Date: Sun, 12 Apr 2026 13:05:23 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AD=A6=E4=B9=A0=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E8=B7=AF=E7=94=B1=E5=88=87=E6=8D=A2=E4=B8=8E=E8=AE=A1?=
 =?UTF-8?q?=E6=97=B6=E5=B1=95=E7=A4=BA=E7=A8=B3=E5=AE=9A=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/StartTask.vue           | 425 +++++++++++++++++++------
 src/components/Study.vue               | 375 +++++++++++++++-------
 src/components/composables/useTimer.ts |   9 +
 src/router/index.ts                    |  15 +-
 4 files changed, 595 insertions(+), 229 deletions(-)

diff --git a/src/components/StartTask.vue b/src/components/StartTask.vue
index c7fd56e..7d15d43 100644
--- a/src/components/StartTask.vue
+++ b/src/components/StartTask.vue
@@ -1,11 +1,15 @@
-<!-- src/views/StudyTimer.vue -->
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { useRoute } from 'vue-router';
-import {ElMessage, ElMessageBox} from 'element-plus';
-import { useTimer } from '@/components/composables/useTimer';
-import { continueSession, pauseSession, endSession, startOrContinueStudySession } from '@/api/studySessions';
-import { useStudyFragment } from '@/components/composables/fragment';
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useTimer } from "@/components/composables/useTimer";
+import {
+  continueSession,
+  endSession,
+  pauseSession,
+  startOrContinueStudySession,
+} from "@/api/studySessions";
+import { useStudyFragment } from "@/components/composables/fragment";
 import router from "@/router";
 
 const {
@@ -13,49 +17,138 @@ const {
   fragmentContent,
   openFragmentDialog,
   closeFragmentDialog,
-  confirmGenerateFragment
+  confirmGenerateFragment,
 } = useStudyFragment();
 
 const summaryDialogVisible = ref(false);
-const summaryContent = ref('');
+const summaryContent = ref("");
 
 const route = useRoute();
 const taskNum = route.params.taskNum as string;
 
 const taskInfo = ref({
-  sessionNum: '',
-  sessionState: '--',
-  taskName: '',
+  sessionNum: "",
+  sessionState: "--",
+  taskName: "",
   taskNum,
-  startTime: '',
-  endTime: '',
-  lastStartTime: '',
+  startTime: "",
+  endTime: "",
+  lastStartTime: "",
   actualTime: 0,
   effectiveTime: 0,
-  effectivenessRatio: '--',
+  effectivenessRatio: "--",
   pointerPosition: 0,
-  systemMessage: '',
+  systemMessage: "",
 });
 
 const {
   timerMinutes,
   timerSeconds,
   runCountdown,
+  syncDisplay,
   clear,
   timerRunning,
   timerIsOver,
   checkAudioPermission,
-  requestAudioPermission
+  requestAudioPermission,
 } = useTimer();
 
-const progress = computed(() =>
-    ((timerMinutes.value * 60 + timerSeconds.value) / (25 * 60)) * 100
-);
+const progress = computed(() => ((timerMinutes.value * 60 + timerSeconds.value) / (25 * 60)) * 100);
+const nowTimestamp = ref(Date.now());
+
+let displayInterval: number | undefined;
+
+const formatDuration = (value: number | string) => {
+  const totalSeconds = Math.max(0, Math.floor(Number(value) || 0));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  if (hours > 0) {
+    return `${hours}小时 ${minutes}分 ${seconds.toString().padStart(2, "0")}秒`;
+  }
+  if (minutes > 0) {
+    return `${minutes}分 ${seconds.toString().padStart(2, "0")}秒`;
+  }
+  return `${seconds}秒`;
+};
+
+const toDate = (value: unknown): Date | null => {
+  if (value == null || value === "") return null;
+
+  if (value instanceof Date) {
+    return Number.isNaN(value.getTime()) ? null : value;
+  }
+
+  if (typeof value === "number") {
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  if (Array.isArray(value)) {
+    const [year, month, day, hour = 0, minute = 0, second = 0] = value.map(Number);
+    if (!year || !month || !day) return null;
+    const date = new Date(year, month - 1, day, hour, minute, second);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  if (typeof value === "string") {
+    const normalized = value.includes("T") ? value : value.replace(" ", "T");
+    const date = new Date(normalized);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+
+  return null;
+};
+
+const toSeconds = (start: Date, endTimestamp: number) => {
+  return Math.max(0, Math.floor((endTimestamp - start.getTime()) / 1000));
+};
+
+const actualTimeSeconds = computed(() => {
+  const fallback = Math.max(0, Math.floor(Number(taskInfo.value.actualTime) || 0));
+  const startDate = toDate(taskInfo.value.startTime);
+  if (!startDate) return fallback;
+
+  // 实际用时：开始后持续计时，暂停时也继续累计，结束后冻结。
+  if (taskInfo.value.sessionState === "ENDED") {
+    const endDate = toDate(taskInfo.value.endTime);
+    if (!endDate) return fallback;
+    return toSeconds(startDate, endDate.getTime());
+  }
+
+  return toSeconds(startDate, nowTimestamp.value);
+});
+
+const effectiveTimeSeconds = computed(() => {
+  const base = Math.max(0, Math.floor(Number(taskInfo.value.effectiveTime) || 0));
+  if (taskInfo.value.sessionState !== "ONGOING") return base;
+
+  const lastStartDate = toDate(taskInfo.value.lastStartTime);
+  if (!lastStartDate) return base;
+  return base + toSeconds(lastStartDate, nowTimestamp.value);
+});
+
+const actualTimeText = computed(() => formatDuration(actualTimeSeconds.value));
+const effectiveTimeText = computed(() => formatDuration(effectiveTimeSeconds.value));
+
+const statusText = computed(() => {
+  switch (taskInfo.value.sessionState) {
+    case "ONGOING":
+      return "进行中";
+    case "PAUSED":
+      return "已暂停";
+    case "ENDED":
+      return "已结束";
+    default:
+      return "未开始";
+  }
+});
 
 const startTimer = async () => {
   if (taskInfo.value.sessionState === "PAUSED") {
     const res = await continueSession(taskInfo.value.sessionNum);
-    if (res.code === 200) ElMessage.success('任务继续');
+    if (res.code === 200) ElMessage.success("任务继续");
     await loadTaskSession();
   }
   const duration = taskInfo.value.pointerPosition || 25 * 60 * 1000;
@@ -64,41 +157,41 @@ const startTimer = async () => {
 
 const stopTimer = async () => {
   const res = await pauseSession(taskInfo.value.sessionNum);
-  if (res.code === 200) ElMessage.success('任务暂停');
+  if (res.code === 200) ElMessage.success("任务暂停");
   clear();
 };
 
 const endTimer = async (content: string) => {
   if (!content) {
-    ElMessage.warning('请输入学习总结内容');
+    ElMessage.warning("请输入学习总结内容");
     return;
   }
-  ElMessageBox.confirm('确定要结束吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'info',
-  }).then(async () => {
+  try {
+    await ElMessageBox.confirm("确定要结束本次学习会话吗？", "结束确认", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+
     const res = await endSession(taskInfo.value.sessionNum, content);
-    if (res.code === 200) ElMessage.success('任务结束');
-    router.back();
+    if (res.code === 200) {
+      ElMessage.success("任务结束");
+    }
+
     clear();
-  })
+    window.location.assign("/study");
+  } catch {
+    // 用户取消结束会话，或接口异常时由请求层统一提示
+  }
 };
 
-const openSummaryDialog = async () => {
+const openSummaryDialog = () => {
   summaryDialogVisible.value = true;
-}
+};
 
-const closeSummaryDialog = async () => {
-  ElMessageBox.alert('确定取消吗？', '提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning',
-  }).then(() => {
-    summaryDialogVisible.value = false;
-    ElMessage.info('已取消结束操作')
-  })
-}
+const closeSummaryDialog = () => {
+  summaryDialogVisible.value = false;
+};
 
 const restTimer = async () => {
   await stopTimer();
@@ -109,14 +202,13 @@ const loadTaskSession = async () => {
   try {
     const res = await startOrContinueStudySession(taskNum);
     Object.assign(taskInfo.value, res.data);
-    if (taskInfo.value.sessionState === 'ONGOING') {
+    if (taskInfo.value.sessionState === "ONGOING") {
       startTimer();
-    }
-    if (taskInfo.value.systemMessage) {
-      ElMessage.warning(taskInfo.value.systemMessage);
+    } else {
+      syncDisplay(taskInfo.value.pointerPosition || 25 * 60 * 1000);
     }
   } catch (err: any) {
-    ElMessage.error(err.message || '加载任务失败');
+    ElMessage.error(err.message || "加载任务失败");
   }
 };
 
@@ -124,107 +216,230 @@ const initPage = async () => {
   const hasPermission = await checkAudioPermission();
   if (!hasPermission) {
     const activated = await requestAudioPermission();
-    if (!activated) {
-      console.warn('用户拒绝或未能激活权限');
-      return;
-    }
+    if (!activated) return;
   }
   await loadTaskSession();
 };
 
 onMounted(() => {
+  displayInterval = window.setInterval(() => {
+    nowTimestamp.value = Date.now();
+  }, 1000);
   initPage();
 });
 
 onUnmounted(() => {
+  if (displayInterval) {
+    clearInterval(displayInterval);
+  }
   clear();
 });
 </script>
 
 <template>
-  <div class="task-container">
+  <section class="start-page">
+    <header class="surface-card top-head">
+      <div>
+        <h1 class="page-title">{{ taskInfo.taskName || "学习会话" }}</h1>
+        <p class="page-subtitle">状态：{{ statusText }}</p>
+      </div>
+      <el-tag type="success" effect="plain">任务编号：{{ taskInfo.taskNum }}</el-tag>
+    </header>
+
     <el-alert
       v-if="taskInfo.systemMessage"
       :title="taskInfo.systemMessage"
       type="warning"
       show-icon
       :closable="false"
-      class="session-alert"
     />
-    <div class="task-info">
-      <p>当前任务【{{ taskInfo.taskName }}】</p>
-      <p>会话状态：{{ taskInfo.sessionState }}</p>
-      <p>实际用时：{{ taskInfo.actualTime }}</p>
-      <p>有效学习时长：{{ taskInfo.effectiveTime }}</p>
-      <p>有效时间比：{{ taskInfo.effectivenessRatio }}</p>
-    </div>
-    <div class="timer-section">
-      <el-progress type="circle" :percentage="progress" :width="200">
-        <div>
-          {{ timerMinutes.toString().padStart(2, '0') }} :
-          {{ timerSeconds.toString().padStart(2, '0') }}
+
+    <div class="session-grid">
+      <article class="surface-card timer-card">
+        <p class="timer-title">当前计时</p>
+        <el-progress type="dashboard" :percentage="progress" :stroke-width="14" :width="250" color="#2f8f68">
+          <div class="timer-number">
+            {{ timerMinutes.toString().padStart(2, "0") }}:{{ timerSeconds.toString().padStart(2, "0") }}
+          </div>
+        </el-progress>
+        <p class="timer-tip">番茄钟默认 25 分钟，休息计时 5 分钟</p>
+      </article>
+
+      <article class="surface-card info-card">
+        <h3>会话数据</h3>
+        <div class="info-grid">
+          <div class="metric">
+            <span>实际用时</span>
+            <strong>{{ actualTimeText }}</strong>
+          </div>
+          <div class="metric">
+            <span>有效学习时长</span>
+            <strong>{{ effectiveTimeText }}</strong>
+          </div>
+          <div class="metric">
+            <span>有效时间比</span>
+            <strong>{{ taskInfo.effectivenessRatio }}</strong>
+          </div>
+          <div class="metric">
+            <span>会话状态</span>
+            <strong>{{ statusText }}</strong>
+          </div>
         </div>
-      </el-progress>
+
+        <div class="action-row">
+          <el-button type="success" @click="startTimer" :disabled="timerRunning">开始</el-button>
+          <el-button @click="stopTimer" :disabled="!timerRunning" v-if="!timerIsOver">暂停</el-button>
+          <el-button @click="openFragmentDialog" :disabled="!timerRunning">生成残片</el-button>
+          <el-button v-if="timerIsOver" plain type="success" @click="restTimer">休息</el-button>
+          <el-button type="danger" plain @click="openSummaryDialog">结束会话</el-button>
+        </div>
+      </article>
     </div>
-    <div class="actions">
-      <el-button @click="startTimer" :disabled="timerRunning">开始</el-button>
-      <el-button @click="stopTimer" :disabled="!timerRunning" v-if="!timerIsOver">暂停</el-button>
-      <el-button @click="openFragmentDialog" :disabled="!timerRunning">生成学习残片</el-button>
-      <el-button @click="restTimer" v-if="timerIsOver">休息</el-button>
-      <el-button @click="openSummaryDialog">结束</el-button>
-    </div>
-  </div>
-  <el-dialog v-model="fragmentsDialogVisible" title="生成学习残片" width="500px">
+  </section>
+
+  <el-dialog v-model="fragmentsDialogVisible" title="生成学习残片" width="520px">
     <el-input
-        type="textarea"
-        v-model="fragmentContent"
-        placeholder="请输入本次学习的内容"
-        rows="5"
+      type="textarea"
+      v-model="fragmentContent"
+      placeholder="请输入本次学习内容"
+      :rows="5"
     />
     <template #footer>
-    <span>
-      <el-button @click="closeFragmentDialog">取消生成</el-button>
-      <el-button type="primary" @click="confirmGenerateFragment(taskInfo.sessionNum)">确定生成</el-button>
-    </span>
+      <el-button @click="closeFragmentDialog">取消</el-button>
+      <el-button type="success" @click="confirmGenerateFragment(taskInfo.sessionNum)">确定生成</el-button>
     </template>
   </el-dialog>
-  <el-dialog v-model="summaryDialogVisible" title="本次学习内容总结" width="500px">
+
+  <el-dialog v-model="summaryDialogVisible" title="结束会话总结" width="520px">
     <el-input
-        type="textarea"
-        v-model="summaryContent"
-        placeholder="请输入本次学习的内容总结"
-        rows="5"
+      type="textarea"
+      v-model="summaryContent"
+      placeholder="请输入本次学习内容总结"
+      :rows="5"
     />
     <template #footer>
-    <span>
       <el-button @click="closeSummaryDialog">取消</el-button>
-      <el-button type="primary" @click="endTimer(summaryContent)">确定</el-button>
-    </span>
+      <el-button type="success" @click="endTimer(summaryContent)">确认结束</el-button>
     </template>
   </el-dialog>
 </template>
 
 <style scoped>
-.task-container {
+.start-page {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.top-head {
+  padding: 18px 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.session-grid {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 14px;
+}
+
+.timer-card {
+  padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin: 20px;
 }
-.session-alert {
-  margin-bottom: 16px;
-  max-width: 500px;
+
+.timer-title {
+  margin: 0;
+  color: var(--green-900);
+  font-weight: 700;
 }
-.task-info {
-  font-size: 18px;
-  margin-bottom: 30px;
+
+.timer-number {
+  font-size: 28px;
+  letter-spacing: 1px;
+  color: var(--green-900);
+  font-weight: 700;
 }
-.timer-section {
-  margin: 20px;
+
+.timer-tip {
+  margin: 14px 0 0;
+  color: var(--text-secondary);
+  font-size: 12px;
 }
-.actions {
-  display: flex;
+
+.info-card {
+  padding: 20px;
+}
+
+.info-card h3 {
+  margin: 0;
+  color: var(--green-900);
+}
+
+.info-grid {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
 }
+
+.metric {
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  padding: 10px 12px;
+  background: #fbfefc;
+}
+
+.metric span {
+  display: block;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.metric strong {
+  margin-top: 6px;
+  display: block;
+  font-size: 18px;
+  color: var(--green-900);
+}
+
+.action-row {
+  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.action-row .el-button {
+  margin: 0;
+}
+
+@media (max-width: 1100px) {
+  .session-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .top-head {
+    flex-direction: column;
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .action-row {
+    flex-direction: column;
+  }
+
+  .action-row .el-button {
+    width: 100%;
+  }
+}
 </style>
diff --git a/src/components/Study.vue b/src/components/Study.vue
index 001c4e4..ba17c3a 100644
--- a/src/components/Study.vue
+++ b/src/components/Study.vue
@@ -1,28 +1,48 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
-import request from '@/utils/request';
+import { computed, onMounted, ref } from "vue";
+import request from "@/utils/request";
 import router from "@/router";
-import {ElMessage} from "element-plus";
+import { ElMessage } from "element-plus";
 
-const tasks = reactive([] as any[]);
+interface TaskItem {
+  title: string;
+  description: string;
+  materialURL: string;
+  lastLearningStatus: string;
+  priority: number | string;
+  taskNum: string;
+  taskId: number;
+}
 
-const selectedTask = ref<any>(null);
+const tasks = ref<TaskItem[]>([]);
+const selectedTaskId = ref<number | null>(null);
+const loading = ref(false);
 
-const fetchTasks = () => {
-  request.get('/tasks', { pageSize: 100, pageNum: 1 })
-      .then((res) => {
-        /* 此处暂时不开发分页模式，数据量应该不会很大，但仍然保留了分页形式的接口 */
-        tasks.splice(0, tasks.length, ...res.data.records.map((record: any) => ({
-          title: record.taskName,
-          description: record.taskDescription || '',
-          materialURL: record.materialURL || record.materialUrl || "",
-          lastLearningStatus: record.lastLearningStatus || '未开始',
-          priority: Number.isFinite(record.taskPriority) ? Math.round(record.taskPriority) : "-",
-          taskNum: record.taskNum,
-          taskId: record.id,
-        })));
-        selectedTask.value = tasks[0] || null;
-      });
+const selectedTask = computed(() =>
+  tasks.value.find((item) => item.taskId === selectedTaskId.value) || null
+);
+
+const fetchTasks = async () => {
+  loading.value = true;
+  try {
+    const res = await request.get("/tasks", { pageSize: 100, pageNum: 1 });
+    tasks.value = (res?.data?.records || []).map((record: any) => ({
+      title: record.taskName,
+      description: record.taskDescription || "",
+      materialURL: record.materialURL || record.materialUrl || "",
+      lastLearningStatus: record.lastLearningStatus || "未开始",
+      priority: Number.isFinite(record.taskPriority) ? Math.round(record.taskPriority) : "-",
+      taskNum: record.taskNum,
+      taskId: record.id,
+    }));
+    selectedTaskId.value = tasks.value[0]?.taskId ?? null;
+  } catch (error: any) {
+    tasks.value = [];
+    selectedTaskId.value = null;
+    ElMessage.error(error?.message || "任务列表加载失败，请重试");
+  } finally {
+    loading.value = false;
+  }
 };
 
 const startTask = () => {
@@ -30,40 +50,33 @@ const startTask = () => {
     ElMessage.warning("请先选择一个任务");
     return;
   }
-  router.push({name:'start-task',params:{taskNum:selectedTask.value.taskNum}});
+  window.location.assign(`/start-task/${encodeURIComponent(selectedTask.value.taskNum)}`);
 };
 
 const addTask = () => {
-  router.push({name:"add-task"});
+  router.push({ name: "add-task" });
 };
 
-const changeTask = () =>{
+const changeTask = () => {
   if (!selectedTask.value) {
     ElMessage.warning("请先选择一个任务");
     return;
   }
-  router.push({name:"update-task",params:{"taskId":selectedTask.value.taskId}})
+  router.push({ name: "update-task", params: { taskId: selectedTask.value.taskId } });
 };
 
-const removeTask = () => {
+const removeTask = async () => {
   if (!selectedTask.value) {
     ElMessage.warning("请先选择一个任务");
     return;
   }
-  request.del(`/tasks/${selectedTask.value.taskId}`,{}).then(res=>{
-    if (res.code === 200){
-      ElMessage.success(`任务${selectedTask.value.title}删除成功`)
-      const index = tasks.indexOf(selectedTask.value);
-      if (index > -1) {
-        tasks.splice(index, 1);
-        selectedTask.value = tasks[0] || null;
-      }
-    }
-  });
-};
-
-const selectTask = (task: any) => {
-  selectedTask.value = task;
+  const target = selectedTask.value;
+  const res = await request.del(`/tasks/${target.taskId}`, {});
+  if (res.code === 200) {
+    ElMessage.success(`任务 ${target.title} 删除成功`);
+    tasks.value = tasks.value.filter((item) => item.taskId !== target.taskId);
+    selectedTaskId.value = tasks.value[0]?.taskId ?? null;
+  }
 };
 
 onMounted(() => {
@@ -72,99 +85,215 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-row :gutter="5" class="task-layout">
-    <el-col :span="6">
-      <el-card class="task-card" :body-style="{ padding: '0' }">
-        <div class="task-header">任务列表</div>
-        <el-scrollbar height="300px">
-          <el-menu class="task-menu" @select="(key:any) => selectTask(tasks[key])">
-            <el-menu-item
-                v-for="(task, index) in tasks"
-                :key="index"
-                :index="index.toString()"
-                class="task-item"
-            >
-              {{ task.title }}
-            </el-menu-item>
-          </el-menu>
+  <section class="study-page">
+    <header class="surface-card page-head">
+      <div>
+        <h1 class="page-title">学习任务</h1>
+        <p class="page-subtitle">先选任务，再确认材料与优先级，然后开始一次学习会话</p>
+      </div>
+      <el-button type="success" plain @click="fetchTasks" :loading="loading">刷新列表</el-button>
+    </header>
+
+    <div class="layout-grid">
+      <aside class="surface-card task-list">
+        <div class="block-title">任务清单</div>
+        <el-scrollbar height="420px">
+          <div
+            v-for="item in tasks"
+            :key="item.taskId"
+            class="task-list-item"
+            :class="{ active: selectedTaskId === item.taskId }"
+            @click="selectedTaskId = item.taskId"
+          >
+            <p class="task-name">{{ item.title }}</p>
+            <p class="task-meta">状态：{{ item.lastLearningStatus }}</p>
+          </div>
         </el-scrollbar>
-      </el-card>
-    </el-col>
+      </aside>
 
-    <el-col :span="13">
-      <el-card class="task-card">
-        <div v-if="selectedTask">
-          <h3>任务描述</h3>
-          <el-input type="textarea" :model-value="selectedTask.description" :rows="4" readonly />
+      <main class="content-zone">
+        <article class="surface-card detail-card" v-loading="loading">
+          <template v-if="selectedTask">
+            <div class="detail-head">
+              <h3>{{ selectedTask.title }}</h3>
+              <el-tag type="success" effect="plain">优先级 {{ selectedTask.priority }}</el-tag>
+            </div>
 
-          <h3 class="section-title">学习材料</h3>
-          <el-link v-if="selectedTask.materialURL" :href="selectedTask.materialURL" type="primary" target="_blank">
-            {{ selectedTask.materialURL }}
-          </el-link>
-          <span v-else>未填写材料地址</span>
+            <div class="detail-block">
+              <p class="label">任务描述</p>
+              <el-input type="textarea" :model-value="selectedTask.description" :rows="4" readonly />
+            </div>
 
-          <h3 class="section-title">任务优先级</h3>
-          <el-tag type="info">综合优先级：{{ selectedTask.priority }}</el-tag>
+            <div class="detail-block">
+              <p class="label">学习材料</p>
+              <el-link
+                v-if="selectedTask.materialURL"
+                :href="selectedTask.materialURL"
+                target="_blank"
+                type="primary"
+              >
+                {{ selectedTask.materialURL }}
+              </el-link>
+              <p v-else class="empty-text">暂未填写材料地址</p>
+            </div>
+          </template>
+          <el-empty v-else description="暂无任务，请先创建任务" />
+        </article>
 
-          <h3 class="section-title">上次该任务学习情况</h3>
-          <el-descriptions border column="1">
-            <el-descriptions-item label="有效时间比">0.5</el-descriptions-item>
-            <el-descriptions-item label="实际用时">2小时</el-descriptions-item>
-            <el-descriptions-item label="有效学习时间">1小时</el-descriptions-item>
-            <el-descriptions-item label="备注">学习了“动态面板”的基本使用方式</el-descriptions-item>
-          </el-descriptions>
-        </div>
-        <div v-else>
-          <p>请选择任务或等待任务加载完成。</p>
-        </div>
-      </el-card>
-    </el-col>
-    <el-col :span="5">
-      <el-space class="action-buttons">
-        <el-button type="primary" @click="startTask">开始任务</el-button>
-        <el-button @click="addTask">添加任务</el-button>
-        <el-button @click="changeTask">更新任务</el-button>
-        <el-button type="danger" @click="removeTask">删除任务</el-button>
-        <el-button type="info" @click="fetchTasks"> 刷新 </el-button>
-      </el-space>
-    </el-col>
-  </el-row>
+        <aside class="surface-card action-card">
+          <div class="block-title">常用操作</div>
+          <el-button type="success" size="large" @click="startTask">开始任务</el-button>
+          <el-button size="large" @click="addTask">添加任务</el-button>
+          <el-button size="large" @click="changeTask">更新任务</el-button>
+          <el-button type="danger" size="large" @click="removeTask">删除任务</el-button>
+        </aside>
+      </main>
+    </div>
+  </section>
 </template>
 
 <style scoped>
-.task-layout {
-  width: 100%;
-  overflow-x: hidden;
-}
-.task-card {
-  padding: 0;
-}
-.task-header {
-  padding: 10px;
-  font-size: 16px;
-  font-weight: bold;
-  background-color: #f5f7fa;
-  border-bottom: 1px solid #ebeef5;
-}
-.task-menu {
-  width: 100%;
-  padding: 0;
-}
-.task-item {
-  padding: 10px 12px;
-  white-space: normal;
-  word-break: break-word;
-}
-.section-title {
-  margin-top: 20px;
-}
-.action-buttons {
+.study-page {
+  display: flex;
   flex-direction: column;
-  margin-top: 20px;
+  gap: 14px;
 }
-.action-buttons .el-button {
-  width: 8vw;
-  min-width: 70px;
-  margin-top: 5px;
+
+.page-head {
+  padding: 18px 20px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.layout-grid {
+  display: grid;
+  grid-template-columns: 280px 1fr;
+  gap: 14px;
+}
+
+.task-list {
+  padding: 16px;
+}
+
+.block-title {
+  margin: 0 0 12px;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--green-900);
+}
+
+.task-list-item {
+  border: 1px solid var(--border-soft);
+  border-radius: 12px;
+  padding: 12px;
+  cursor: pointer;
+  background: #fbfefc;
+  transition: all 0.2s ease;
+}
+
+.task-list-item + .task-list-item {
+  margin-top: 10px;
+}
+
+.task-list-item:hover {
+  border-color: #b9d9c8;
+}
+
+.task-list-item.active {
+  border-color: var(--green-600);
+  background: var(--green-100);
+  box-shadow: inset 0 0 0 1px rgba(47, 143, 104, 0.2);
+}
+
+.task-name {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.task-meta {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.content-zone {
+  display: grid;
+  grid-template-columns: 1fr 220px;
+  gap: 14px;
+}
+
+.detail-card {
+  padding: 18px 20px;
+}
+
+.detail-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.detail-head h3 {
+  margin: 0;
+  font-size: 22px;
+}
+
+.detail-block {
+  margin-top: 16px;
+}
+
+.label {
+  margin: 0 0 8px;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.empty-text {
+  margin: 0;
+  color: var(--text-secondary);
+}
+
+.action-card {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.action-card .el-button {
+  margin: 0;
+}
+
+@media (max-width: 1100px) {
+  .layout-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .content-zone {
+    grid-template-columns: 1fr;
+  }
+
+  .action-card {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: start;
+  }
+
+  .action-card .block-title {
+    grid-column: 1 / -1;
+  }
+}
+
+@media (max-width: 768px) {
+  .page-head {
+    flex-direction: column;
+  }
+
+  .action-card {
+    grid-template-columns: 1fr;
+  }
 }
 </style>
diff --git a/src/components/composables/useTimer.ts b/src/components/composables/useTimer.ts
index 242acbb..cd13a1c 100644
--- a/src/components/composables/useTimer.ts
+++ b/src/components/composables/useTimer.ts
@@ -18,6 +18,14 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
         timerRunning.value = false;
     };
 
+    const syncDisplay = (durationMs: number) => {
+        const safeDuration = Math.max(durationMs, 0);
+        remainingTime.value = safeDuration;
+        timerMinutes.value = Math.floor(safeDuration / 1000 / 60);
+        timerSeconds.value = Math.floor((safeDuration / 1000) % 60);
+        timerIsOver.value = safeDuration === 0;
+    };
+
     const handleCountdownComplete = () => {
         audio.loop = true;
         audio.play();
@@ -91,6 +99,7 @@ export function useTimer(audioUrl: string = '/resource/notification.mp3') {
         timerRunning,
         timerIsOver,
         runCountdown,
+        syncDisplay,
         clear,
         checkAudioPermission,
         requestAudioPermission,
diff --git a/src/router/index.ts b/src/router/index.ts
index 96415cb..5d86067 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
+import StartTask from "@/components/StartTask.vue";
 
 const routes: RouteRecordRaw[] = [
   {
@@ -17,6 +18,7 @@ const routes: RouteRecordRaw[] = [
   },
   {
     path: "/study",
+    name: "study",
     component: () => import("@/components/Study.vue"),
     meta: { requiresAuth: true },
   },
@@ -28,7 +30,7 @@ const routes: RouteRecordRaw[] = [
   {
     path: "/start-task/:taskNum",
     name: "start-task",
-    component: () => import("@/components/StartTask.vue"),
+    component: StartTask,
     meta: { requiresAuth: true },
   },
   {
@@ -58,6 +60,17 @@ const router = createRouter({
   routes,
 });
 
+router.onError((error, to) => {
+  const message = String((error as Error)?.message || "");
+  const isChunkLoadError =
+    message.includes("Failed to fetch dynamically imported module") ||
+    message.includes("Importing a module script failed") ||
+    message.includes("Loading chunk");
+  if (isChunkLoadError && typeof window !== "undefined") {
+    window.location.assign(to.fullPath);
+  }
+});
+
 router.beforeEach((to) => {
   if (to.meta.requiresAuth === false) return true;
   const isLoggedIn = localStorage.getItem("isLoggedIn") === "true";