修复学习流程路由切换与计时展示稳定性

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>