修复学习流程路由切换与计时展示稳定性
This commit is contained in:
+311
-96
@@ -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(() => {
|
||||
const closeSummaryDialog = () => {
|
||||
summaryDialogVisible.value = false;
|
||||
ElMessage.info('已取消结束操作')
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
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="actions">
|
||||
<el-button @click="startTimer" :disabled="timerRunning">开始</el-button>
|
||||
<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>
|
||||
|
||||
<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 @click="restTimer" v-if="timerIsOver">休息</el-button>
|
||||
<el-button @click="openSummaryDialog">结束</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>
|
||||
<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"
|
||||
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"
|
||||
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>
|
||||
|
||||
+242
-113
@@ -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) => ({
|
||||
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 || '',
|
||||
description: record.taskDescription || "",
|
||||
materialURL: record.materialURL || record.materialUrl || "",
|
||||
lastLearningStatus: record.lastLearningStatus || '未开始',
|
||||
lastLearningStatus: record.lastLearningStatus || "未开始",
|
||||
priority: Number.isFinite(record.taskPriority) ? Math.round(record.taskPriority) : "-",
|
||||
taskNum: record.taskNum,
|
||||
taskId: record.id,
|
||||
})));
|
||||
selectedTask.value = tasks[0] || null;
|
||||
});
|
||||
}));
|
||||
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 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;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const selectTask = (task: any) => {
|
||||
selectedTask.value = task;
|
||||
};
|
||||
|
||||
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"
|
||||
<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"
|
||||
>
|
||||
{{ task.title }}
|
||||
</el-menu-item>
|
||||
</el-menu>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<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-link v-if="selectedTask.materialURL" :href="selectedTask.materialURL" type="primary" target="_blank">
|
||||
<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>
|
||||
<span v-else>未填写材料地址</span>
|
||||
|
||||
<h3 class="section-title">任务优先级</h3>
|
||||
<el-tag type="info">综合优先级：{{ selectedTask.priority }}</el-tag>
|
||||
|
||||
<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>
|
||||
<p v-else class="empty-text">暂未填写材料地址</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<p>请选择任务或等待任务加载完成。</p>
|
||||
</template>
|
||||
<el-empty v-else description="暂无任务，请先创建任务" />
|
||||
</article>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
+14
-1
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user