重构(学习页): 前端仅展示并修复运行稳定性问题

src/components/StartTask.vue

@@ -1,12 +1,11 @@
 <!-- src/views/StudyTimer.vue -->
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
+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 {routes} from "vue-router/auto-routes";
 import router from "@/router";
 
 const {
@@ -49,27 +48,6 @@ const {
   requestAudioPermission
 } = useTimer();
 
-const globalTimer = ref(Date.now());
-
-const currentCycle = computed(() =>
-    Math.floor(taskInfo.value.effectiveTime / 60 / 25) + 1
-);
-
-const elapsedTime = computed(() => {
-  if (!taskInfo.value.startTime || !timerRunning.value) return { hours: 0, minutes: 0, seconds: 0 };
-  const start = new Date(taskInfo.value.startTime).getTime();
-  const now = globalTimer.value;
-  const diff = Math.max(Math.floor((now - start) / 1000), 0);
-  return {
-    hours: Math.floor(diff / 3600),
-    minutes: Math.floor((diff % 3600) / 60),
-    seconds: diff % 60,
-  };
-});
-
-const formatTime = (t: { hours: number; minutes: number; seconds: number }) =>
-    `${t.hours}时${t.minutes}分${t.seconds}秒`;
-
 const progress = computed(() =>
     ((timerMinutes.value * 60 + timerSeconds.value) / (25 * 60)) * 100
 );
@@ -152,24 +130,33 @@ const initPage = async () => {
     }
   }
   await loadTaskSession();
-
-  setInterval(() => {
-    globalTimer.value = Date.now();
-  }, 1000);
 };
 
 onMounted(() => {
   initPage();
 });
+
+onUnmounted(() => {
+  clear();
+});
 </script>
 
 <template>
   <div class="task-container">
+    <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>当前循环：{{ currentCycle }}</p>
-      <p>有效时间：{{ taskInfo.effectiveTime / 60 }}分钟</p>
-      <p>本次运行时间：{{ formatTime(elapsedTime) }}</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">
@@ -225,6 +212,10 @@ onMounted(() => {
   justify-content: center;
   margin: 20px;
 }
+.session-alert {
+  margin-bottom: 16px;
+  max-width: 500px;
+}
 .task-info {
   font-size: 18px;
   margin-bottom: 30px;