feat(复习)：回忆复习页面与入口
- 新增 ReviewRecall.vue 回忆复习页面（双栏布局） - 左栏：回忆大纲输入区、对比结果展示（✅❌着色树） - 右栏：标准导图（默认折叠）、编辑、重新生成 - 遗漏项列表，可点击回看原文 - 回忆历史记录查询 - api/standardMindMap.ts：标准导图与回忆对比 API - router：新增 /review/recall/:taskNum 路由 - Review.vue 行操作中增加回忆复习按钮 - ReviewDetail.vue 思维导图区增加回忆复习入口
This commit is contained in:
@@ -3,13 +3,22 @@ import { computed, onMounted, onUnmounted, ref } from "vue";
|
||||
import request from "@/utils/request";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import {
|
||||
createTaskApplication,
|
||||
deleteTaskApplication,
|
||||
getTaskApplications,
|
||||
updateTaskApplication,
|
||||
type TaskApplication,
|
||||
} from "@/api/tasks";
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
const taskId = route.params.taskId ? Number(route.params.taskId) : null;
|
||||
const buttonName = route.meta.buttonText as string;
|
||||
const isUpdateMode = computed(() => route.meta.action === "update");
|
||||
|
||||
const taskNum = ref("");
|
||||
const taskName = ref("");
|
||||
const taskDescription = ref("");
|
||||
const materialURL = ref("");
|
||||
@@ -22,6 +31,102 @@ const priority = ref({
|
||||
});
|
||||
|
||||
const priorityOptions = [0, 1, 2, 3, 4, 5];
|
||||
const applicationStatusOptions: { label: string; value: TaskApplication["status"] }[] = [
|
||||
{ label: "待应用", value: "TODO" },
|
||||
{ label: "进行中", value: "DOING" },
|
||||
{ label: "已完成", value: "DONE" },
|
||||
];
|
||||
|
||||
const applications = ref<TaskApplication[]>([]);
|
||||
const applicationLoading = ref(false);
|
||||
const applicationSaving = ref(false);
|
||||
const editingApplicationId = ref<number | null>(null);
|
||||
const applicationForm = ref<{
|
||||
title: string;
|
||||
description: string;
|
||||
resourceUrl: string;
|
||||
status: TaskApplication["status"];
|
||||
}>({
|
||||
title: "",
|
||||
description: "",
|
||||
resourceUrl: "",
|
||||
status: "TODO",
|
||||
});
|
||||
|
||||
const resetApplicationForm = () => {
|
||||
editingApplicationId.value = null;
|
||||
applicationForm.value = {
|
||||
title: "",
|
||||
description: "",
|
||||
resourceUrl: "",
|
||||
status: "TODO",
|
||||
};
|
||||
};
|
||||
|
||||
const loadApplications = async (targetTaskNum: string) => {
|
||||
applicationLoading.value = true;
|
||||
try {
|
||||
const res = await getTaskApplications(targetTaskNum);
|
||||
applications.value = res?.data || [];
|
||||
} catch (error: any) {
|
||||
applications.value = [];
|
||||
ElMessage.error(error?.message || "应用场景加载失败");
|
||||
} finally {
|
||||
applicationLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const saveApplication = async () => {
|
||||
if (!taskNum.value) {
|
||||
ElMessage.warning("任务编号未加载，暂不能维护应用场景");
|
||||
return;
|
||||
}
|
||||
if (!applicationForm.value.title.trim()) {
|
||||
ElMessage.warning("应用项目标题不能为空");
|
||||
return;
|
||||
}
|
||||
applicationSaving.value = true;
|
||||
try {
|
||||
const payload = {
|
||||
title: applicationForm.value.title,
|
||||
description: applicationForm.value.description,
|
||||
resourceUrl: applicationForm.value.resourceUrl,
|
||||
status: applicationForm.value.status,
|
||||
};
|
||||
if (editingApplicationId.value) {
|
||||
await updateTaskApplication(editingApplicationId.value, payload);
|
||||
ElMessage.success("应用场景已更新");
|
||||
} else {
|
||||
await createTaskApplication(taskNum.value, payload);
|
||||
ElMessage.success("应用场景已添加");
|
||||
}
|
||||
resetApplicationForm();
|
||||
await loadApplications(taskNum.value);
|
||||
} finally {
|
||||
applicationSaving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const editApplication = (item: TaskApplication) => {
|
||||
editingApplicationId.value = item.id;
|
||||
applicationForm.value = {
|
||||
title: item.title || "",
|
||||
description: item.description || "",
|
||||
resourceUrl: item.resourceUrl || "",
|
||||
status: item.status || "TODO",
|
||||
};
|
||||
};
|
||||
|
||||
const removeApplication = async (item: TaskApplication) => {
|
||||
await deleteTaskApplication(item.id);
|
||||
ElMessage.success("应用场景已删除");
|
||||
if (editingApplicationId.value === item.id) {
|
||||
resetApplicationForm();
|
||||
}
|
||||
if (taskNum.value) {
|
||||
await loadApplications(taskNum.value);
|
||||
}
|
||||
};
|
||||
|
||||
const createTask = () => {
|
||||
request
|
||||
@@ -46,6 +151,7 @@ const loadTask = () => {
|
||||
request.get(`/tasks/${taskId}`, {}).then((result) => {
|
||||
if (result.code === 200) {
|
||||
const data = result.data;
|
||||
taskNum.value = data.taskNum || "";
|
||||
taskName.value = data.taskName;
|
||||
taskDescription.value = data.taskDescription;
|
||||
materialURL.value = data.materialURL || data.materialUrl || "";
|
||||
@@ -56,6 +162,9 @@ const loadTask = () => {
|
||||
futureValue: data.futureValue,
|
||||
subjectivePriority: data.subjectivePriority,
|
||||
};
|
||||
if (taskNum.value) {
|
||||
loadApplications(taskNum.value);
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(`任务加载失败：${result.message}`);
|
||||
}
|
||||
@@ -169,6 +278,54 @@ const isMobile = computed(() => screenWidth.value <= 900);
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="group" v-if="isUpdateMode" v-loading="applicationLoading">
|
||||
<h3>应用场景</h3>
|
||||
<div class="application-list" v-if="applications.length > 0">
|
||||
<div class="application-item" v-for="item in applications" :key="item.id">
|
||||
<div class="application-main">
|
||||
<strong>{{ item.title }}</strong>
|
||||
<el-tag size="small" effect="plain">
|
||||
{{ applicationStatusOptions.find(option => option.value === item.status)?.label || item.status }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<p v-if="item.description">{{ item.description }}</p>
|
||||
<el-link v-if="item.resourceUrl" :href="item.resourceUrl" target="_blank" type="primary">
|
||||
{{ item.resourceUrl }}
|
||||
</el-link>
|
||||
<div class="application-actions">
|
||||
<el-button text type="primary" size="small" @click="editApplication(item)">编辑</el-button>
|
||||
<el-button text type="danger" size="small" @click="removeApplication(item)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="empty-text">暂未设置应用场景</p>
|
||||
|
||||
<div class="application-form">
|
||||
<el-input v-model="applicationForm.title" placeholder="应用项目" />
|
||||
<el-input
|
||||
v-model="applicationForm.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="应用描述"
|
||||
/>
|
||||
<el-input v-model="applicationForm.resourceUrl" placeholder="相关链接" />
|
||||
<div class="application-form-row">
|
||||
<el-select v-model="applicationForm.status" placeholder="状态">
|
||||
<el-option
|
||||
v-for="option in applicationStatusOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-button type="success" :loading="applicationSaving" @click="saveApplication">
|
||||
{{ editingApplicationId ? "更新" : "添加" }}
|
||||
</el-button>
|
||||
<el-button v-if="editingApplicationId" @click="resetApplicationForm">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<el-button type="success" size="large" @click="submitTask">{{ buttonName }}</el-button>
|
||||
<el-button size="large" @click="cancelTask">取消</el-button>
|
||||
@@ -207,6 +364,67 @@ const isMobile = computed(() => screenWidth.value <= 900);
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.application-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.application-item {
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: 8px;
|
||||
background: #fbfefc;
|
||||
}
|
||||
|
||||
.application-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.application-main strong {
|
||||
min-width: 0;
|
||||
color: var(--text-primary);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.application-item p {
|
||||
margin: 8px 0 0;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.application-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.application-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.application-form-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(160px, 220px) auto auto;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
margin: 0 0 12px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
@@ -226,5 +444,19 @@ const isMobile = computed(() => screenWidth.value <= 900);
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.application-main {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.application-form-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.application-form-row .el-button {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user