feat: complete review workflow UI
This commit is contained in:
@@ -20,7 +20,7 @@ test.describe('Auth guard', () => {
|
||||
});
|
||||
|
||||
test('allows access to /welcome when authenticated', async ({ page }) => {
|
||||
await page.route('**/api/review/feed', (route) =>
|
||||
await page.route('**/api/review/feed**', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
|
||||
+6
-8
@@ -2,31 +2,29 @@ import { test, expect } from '@playwright/test';
|
||||
|
||||
const mockTasksData = {
|
||||
code: 200,
|
||||
data: {
|
||||
records: [
|
||||
data: [
|
||||
{
|
||||
taskNum: 'T001',
|
||||
taskName: '学习 Vue3',
|
||||
reportCount: 3,
|
||||
fragmentCount: 5,
|
||||
effectiveTime: '2h 30m',
|
||||
effectiveTime: 9000,
|
||||
},
|
||||
{
|
||||
taskNum: 'T002',
|
||||
taskName: '学习 TypeScript',
|
||||
reportCount: 1,
|
||||
fragmentCount: 2,
|
||||
effectiveTime: '1h 15m',
|
||||
effectiveTime: 4500,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
const mockTasksEmpty = { code: 200, data: { records: [] } };
|
||||
const mockTasksEmpty = { code: 200, data: [] };
|
||||
const mockFeed = { code: 200, data: [] };
|
||||
|
||||
test.describe('Review page', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.route('**/api/tasks**', (route) =>
|
||||
await page.route('**/api/review/tasks**', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
@@ -52,7 +50,7 @@ test.describe('Review page', () => {
|
||||
});
|
||||
|
||||
test('shows empty state when no tasks', async ({ page }) => {
|
||||
await page.route('**/api/tasks**', (route) =>
|
||||
await page.route('**/api/review/tasks**', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('Welcome page', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.route('**/api/review/feed', (route) =>
|
||||
await page.route('**/api/review/feed**', (route) =>
|
||||
route.fulfill({
|
||||
status: 200,
|
||||
contentType: 'application/json',
|
||||
|
||||
@@ -5,12 +5,25 @@ vi.mock('@/utils/request', () => ({
|
||||
get: vi.fn(),
|
||||
post: vi.fn(),
|
||||
put: vi.fn(),
|
||||
delete: vi.fn(),
|
||||
del: vi.fn(),
|
||||
},
|
||||
}))
|
||||
|
||||
import request from '@/utils/request'
|
||||
import { getReviewFeed, getReportDetail, getFragmentDetail, getTaskReview } from '@/api/review'
|
||||
import {
|
||||
createReviewApplication,
|
||||
deleteReviewApplication,
|
||||
getFragmentDetail,
|
||||
getReportDetail,
|
||||
getReviewApplications,
|
||||
getReviewFeed,
|
||||
getReviewMindMap,
|
||||
getReviewTaskStats,
|
||||
getReviewTaskStatsByTask,
|
||||
getTaskReview,
|
||||
updateReviewApplication,
|
||||
upsertReviewMindMap,
|
||||
} from '@/api/review'
|
||||
|
||||
const mockedRequest = vi.mocked(request)
|
||||
|
||||
@@ -22,14 +35,32 @@ describe('review API', () => {
|
||||
it('getReviewFeed calls GET /review/feed with limit', async () => {
|
||||
mockedRequest.get.mockResolvedValue({ code: 200, data: [] })
|
||||
const result = await getReviewFeed(10)
|
||||
expect(mockedRequest.get).toHaveBeenCalledWith('/review/feed', { limit: 10 })
|
||||
expect(mockedRequest.get).toHaveBeenCalledWith('/review/feed', { limit: 10, mode: 'recent' })
|
||||
expect(result).toEqual({ code: 200, data: [] })
|
||||
})
|
||||
|
||||
it('getReviewFeed uses default limit of 30', async () => {
|
||||
it('getReviewFeed uses default limit of 30 and recent mode', async () => {
|
||||
mockedRequest.get.mockResolvedValue({ code: 200, data: [] })
|
||||
await getReviewFeed()
|
||||
expect(mockedRequest.get).toHaveBeenCalledWith('/review/feed', { limit: 30 })
|
||||
expect(mockedRequest.get).toHaveBeenCalledWith('/review/feed', { limit: 30, mode: 'recent' })
|
||||
})
|
||||
|
||||
it('getReviewFeed accepts random mode', async () => {
|
||||
mockedRequest.get.mockResolvedValue({ code: 200, data: [] })
|
||||
await getReviewFeed(50, 'random')
|
||||
expect(mockedRequest.get).toHaveBeenCalledWith('/review/feed', { limit: 50, mode: 'random' })
|
||||
})
|
||||
|
||||
it('getReviewTaskStats calls GET /review/tasks', async () => {
|
||||
mockedRequest.get.mockResolvedValue({ code: 200, data: [] })
|
||||
await getReviewTaskStats()
|
||||
expect(mockedRequest.get).toHaveBeenCalledWith('/review/tasks')
|
||||
})
|
||||
|
||||
it('getReviewTaskStatsByTask calls GET /review/tasks/:taskNum', async () => {
|
||||
mockedRequest.get.mockResolvedValue({ code: 200, data: {} })
|
||||
await getReviewTaskStatsByTask('T001')
|
||||
expect(mockedRequest.get).toHaveBeenCalledWith('/review/tasks/T001')
|
||||
})
|
||||
|
||||
it('getReportDetail calls GET /review/report/:id', async () => {
|
||||
@@ -50,4 +81,49 @@ describe('review API', () => {
|
||||
await getTaskReview('T001')
|
||||
expect(mockedRequest.get).toHaveBeenCalledWith('/review/task/T001')
|
||||
})
|
||||
|
||||
it('review applications API calls expected endpoints', async () => {
|
||||
mockedRequest.get.mockResolvedValue({ code: 200, data: [] })
|
||||
mockedRequest.post.mockResolvedValue({ code: 200, data: { id: 1 } })
|
||||
mockedRequest.put.mockResolvedValue({ code: 200, data: { id: 1 } })
|
||||
mockedRequest.del.mockResolvedValue({ code: 200 })
|
||||
|
||||
await getReviewApplications('T001')
|
||||
expect(mockedRequest.get).toHaveBeenCalledWith('/review/applications/T001')
|
||||
|
||||
await createReviewApplication({ taskNum: 'T001', title: 'Demo', status: 'TODO' })
|
||||
expect(mockedRequest.post).toHaveBeenCalledWith('/review/applications', {
|
||||
taskNum: 'T001',
|
||||
title: 'Demo',
|
||||
status: 'TODO',
|
||||
})
|
||||
|
||||
await updateReviewApplication(1, { title: 'Demo 2', status: 'DOING' })
|
||||
expect(mockedRequest.put).toHaveBeenCalledWith('/review/applications/1', {
|
||||
title: 'Demo 2',
|
||||
status: 'DOING',
|
||||
})
|
||||
|
||||
await deleteReviewApplication(1)
|
||||
expect(mockedRequest.del).toHaveBeenCalledWith('/review/applications/1')
|
||||
})
|
||||
|
||||
it('review mind map API calls expected endpoints', async () => {
|
||||
mockedRequest.get.mockResolvedValue({ code: 200, data: null })
|
||||
mockedRequest.put.mockResolvedValue({ code: 200, data: { id: 1 } })
|
||||
|
||||
await getReviewMindMap('T001')
|
||||
expect(mockedRequest.get).toHaveBeenCalledWith('/review/mind-map/T001')
|
||||
|
||||
await upsertReviewMindMap('T001', {
|
||||
title: 'Map',
|
||||
content: 'content',
|
||||
contentFormat: 'TEXT',
|
||||
})
|
||||
expect(mockedRequest.put).toHaveBeenCalledWith('/review/mind-map/T001', {
|
||||
title: 'Map',
|
||||
content: 'content',
|
||||
contentFormat: 'TEXT',
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
+89
-2
@@ -10,8 +10,50 @@ export interface ReviewFeedItem {
|
||||
createdTime: string;
|
||||
}
|
||||
|
||||
export const getReviewFeed = (limit: number = 30) => {
|
||||
return request.get("/review/feed", { limit });
|
||||
export interface ReviewTaskStats {
|
||||
taskNum: string;
|
||||
taskName: string;
|
||||
reportCount: number;
|
||||
fragmentCount: number;
|
||||
effectiveTime: number;
|
||||
sessionCount: number;
|
||||
todayEffectiveTime: number;
|
||||
weekEffectiveTime: number;
|
||||
avgEffectiveTime: number;
|
||||
avgEffectivenessRatio: number;
|
||||
}
|
||||
|
||||
export interface ReviewApplication {
|
||||
id: number;
|
||||
taskNum: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
resourceUrl?: string;
|
||||
status: "TODO" | "DOING" | "DONE";
|
||||
createdTime?: string;
|
||||
lastModifiedTime?: string;
|
||||
}
|
||||
|
||||
export interface ReviewMindMap {
|
||||
id: number;
|
||||
taskNum: string;
|
||||
title: string;
|
||||
content: string;
|
||||
contentFormat: "TEXT" | "MERMAID" | "JSON";
|
||||
createdTime?: string;
|
||||
lastModifiedTime?: string;
|
||||
}
|
||||
|
||||
export const getReviewFeed = (limit: number = 30, mode: "recent" | "random" = "recent") => {
|
||||
return request.get("/review/feed", { limit, mode });
|
||||
};
|
||||
|
||||
export const getReviewTaskStats = () => {
|
||||
return request.get("/review/tasks");
|
||||
};
|
||||
|
||||
export const getReviewTaskStatsByTask = (taskNum: string) => {
|
||||
return request.get(`/review/tasks/${taskNum}`);
|
||||
};
|
||||
|
||||
export const getReportDetail = (id: number) => {
|
||||
@@ -25,3 +67,48 @@ export const getFragmentDetail = (id: number) => {
|
||||
export const getTaskReview = (taskNum: string) => {
|
||||
return request.get(`/review/task/${taskNum}`);
|
||||
};
|
||||
|
||||
export const getReviewApplications = (taskNum: string) => {
|
||||
return request.get(`/review/applications/${taskNum}`);
|
||||
};
|
||||
|
||||
export const createReviewApplication = (payload: {
|
||||
taskNum: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
resourceUrl?: string;
|
||||
status?: ReviewApplication["status"];
|
||||
}) => {
|
||||
return request.post("/review/applications", payload);
|
||||
};
|
||||
|
||||
export const updateReviewApplication = (
|
||||
id: number,
|
||||
payload: {
|
||||
title: string;
|
||||
description?: string;
|
||||
resourceUrl?: string;
|
||||
status?: ReviewApplication["status"];
|
||||
},
|
||||
) => {
|
||||
return request.put(`/review/applications/${id}`, payload);
|
||||
};
|
||||
|
||||
export const deleteReviewApplication = (id: number) => {
|
||||
return request.del(`/review/applications/${id}`);
|
||||
};
|
||||
|
||||
export const getReviewMindMap = (taskNum: string) => {
|
||||
return request.get(`/review/mind-map/${taskNum}`);
|
||||
};
|
||||
|
||||
export const upsertReviewMindMap = (
|
||||
taskNum: string,
|
||||
payload: {
|
||||
title: string;
|
||||
content: string;
|
||||
contentFormat?: ReviewMindMap["contentFormat"];
|
||||
},
|
||||
) => {
|
||||
return request.put(`/review/mind-map/${taskNum}`, payload);
|
||||
};
|
||||
|
||||
+47
-18
@@ -1,17 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import request from "@/utils/request";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
getReviewTaskStats,
|
||||
getTaskReview,
|
||||
type ReviewFeedItem,
|
||||
type ReviewTaskStats,
|
||||
} from "@/api/review";
|
||||
|
||||
interface ReviewTask {
|
||||
taskNum: string;
|
||||
taskName: string;
|
||||
reportCount: number | string;
|
||||
fragmentCount: number | string;
|
||||
effectiveTime: number | string;
|
||||
}
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false);
|
||||
const tasks = ref<ReviewTask[]>([]);
|
||||
const openingTaskNum = ref("");
|
||||
const tasks = ref<ReviewTaskStats[]>([]);
|
||||
|
||||
const summary = computed(() => ({
|
||||
totalTasks: tasks.value.length,
|
||||
@@ -31,19 +33,30 @@ const formatEffectiveTime = (seconds: number | string): string => {
|
||||
const loadTasks = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await request.get("/review/tasks");
|
||||
tasks.value = (res?.data || []).map((item: any) => ({
|
||||
taskNum: item.taskNum,
|
||||
taskName: item.taskName,
|
||||
reportCount: item.reportCount ?? 0,
|
||||
fragmentCount: item.fragmentCount ?? 0,
|
||||
effectiveTime: item.effectiveTime ?? 0,
|
||||
}));
|
||||
const res = await getReviewTaskStats();
|
||||
tasks.value = res?.data || [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const openTaskReview = async (row: ReviewTaskStats) => {
|
||||
if (!row.taskNum) return;
|
||||
openingTaskNum.value = row.taskNum;
|
||||
try {
|
||||
const res = await getTaskReview(row.taskNum);
|
||||
const items: ReviewFeedItem[] = res?.data || [];
|
||||
const first = items[0];
|
||||
if (!first) {
|
||||
ElMessage.info("该任务暂无可复习内容");
|
||||
return;
|
||||
}
|
||||
router.push(`/review/detail/${first.sourceType.toLowerCase()}/${first.id}`);
|
||||
} finally {
|
||||
openingTaskNum.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadTasks();
|
||||
});
|
||||
@@ -72,7 +85,7 @@ onMounted(() => {
|
||||
</div>
|
||||
|
||||
<article class="surface-card table-card">
|
||||
<el-table v-loading="loading" :data="tasks" stripe>
|
||||
<el-table v-loading="loading" :data="tasks" stripe @row-click="openTaskReview">
|
||||
<el-table-column prop="taskName" label="任务名" min-width="180" />
|
||||
<el-table-column prop="effectiveTime" label="累计有效学习时长" min-width="150">
|
||||
<template #default="{ row }">
|
||||
@@ -81,6 +94,18 @@ onMounted(() => {
|
||||
</el-table-column>
|
||||
<el-table-column prop="reportCount" label="学习报告数" min-width="120" />
|
||||
<el-table-column prop="fragmentCount" label="学习残片数" min-width="120" />
|
||||
<el-table-column label="操作" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
text
|
||||
type="success"
|
||||
:loading="openingTaskNum === row.taskNum"
|
||||
@click.stop="openTaskReview(row)"
|
||||
>
|
||||
查看记录
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</article>
|
||||
</section>
|
||||
@@ -125,6 +150,10 @@ onMounted(() => {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.table-card :deep(.el-table__row) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.summary-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
+386
-43
@@ -1,7 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { getReportDetail, getFragmentDetail, getTaskReview, type ReviewFeedItem } from "@/api/review";
|
||||
import {
|
||||
createReviewApplication,
|
||||
deleteReviewApplication,
|
||||
getFragmentDetail,
|
||||
getReportDetail,
|
||||
getReviewApplications,
|
||||
getReviewMindMap,
|
||||
getTaskReview,
|
||||
updateReviewApplication,
|
||||
upsertReviewMindMap,
|
||||
type ReviewApplication,
|
||||
type ReviewFeedItem,
|
||||
type ReviewMindMap,
|
||||
} from "@/api/review";
|
||||
import { getSessionDetail } from "@/api/studySessions";
|
||||
import { updateFragments } from "@/api/reportFragments";
|
||||
import { ElMessage } from "element-plus";
|
||||
@@ -17,12 +30,37 @@ const content = ref("");
|
||||
const sourceTypeLabel = ref("");
|
||||
const taskNum = ref("");
|
||||
|
||||
// 编辑状态
|
||||
const isEditing = ref(false);
|
||||
const editContent = ref("");
|
||||
const saving = ref(false);
|
||||
|
||||
// 当前会话信息
|
||||
const applications = ref<ReviewApplication[]>([]);
|
||||
const applicationSaving = ref(false);
|
||||
const editingApplicationId = ref<number | null>(null);
|
||||
const applicationForm = ref<{
|
||||
title: string;
|
||||
description: string;
|
||||
resourceUrl: string;
|
||||
status: ReviewApplication["status"];
|
||||
}>({
|
||||
title: "",
|
||||
description: "",
|
||||
resourceUrl: "",
|
||||
status: "TODO",
|
||||
});
|
||||
|
||||
const mindMap = ref<ReviewMindMap | null>(null);
|
||||
const mindMapSaving = ref(false);
|
||||
const mindMapForm = ref<{
|
||||
title: string;
|
||||
content: string;
|
||||
contentFormat: ReviewMindMap["contentFormat"];
|
||||
}>({
|
||||
title: "任务思维导图",
|
||||
content: "",
|
||||
contentFormat: "TEXT",
|
||||
});
|
||||
|
||||
const sessionInfo = ref<{
|
||||
taskName: string;
|
||||
sessionNum: string;
|
||||
@@ -32,7 +70,6 @@ const sessionInfo = ref<{
|
||||
startTime?: string;
|
||||
} | null>(null);
|
||||
|
||||
// 该任务下的所有学习记录（按 session 分组）
|
||||
const taskSessions = ref<{
|
||||
sessionNum: string;
|
||||
startTime: string;
|
||||
@@ -40,7 +77,13 @@ const taskSessions = ref<{
|
||||
fragments: ReviewFeedItem[];
|
||||
}[]>([]);
|
||||
|
||||
const formatDuration = (seconds: number): string => {
|
||||
const statusText: Record<ReviewApplication["status"], string> = {
|
||||
TODO: "待应用",
|
||||
DOING: "进行中",
|
||||
DONE: "已完成",
|
||||
};
|
||||
|
||||
const formatDuration = (seconds?: number): string => {
|
||||
if (seconds == null) return "-";
|
||||
const h = Math.floor(seconds / 3600);
|
||||
const m = Math.floor((seconds % 3600) / 60);
|
||||
@@ -50,47 +93,26 @@ const formatDuration = (seconds: number): string => {
|
||||
return `${s}秒`;
|
||||
};
|
||||
|
||||
const loadDetail = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
let res;
|
||||
if (contentType.value === "report") {
|
||||
res = await getReportDetail(contentId.value);
|
||||
sourceTypeLabel.value = "学习报告";
|
||||
} else {
|
||||
res = await getFragmentDetail(contentId.value);
|
||||
sourceTypeLabel.value = "学习残片";
|
||||
}
|
||||
const data = res?.data;
|
||||
content.value = data?.content || "";
|
||||
|
||||
const sessionNum = data?.sessionNum;
|
||||
if (sessionNum) {
|
||||
try {
|
||||
const sessionRes = await getSessionDetail(sessionNum);
|
||||
const info = sessionRes?.data;
|
||||
sessionInfo.value = info || null;
|
||||
taskNum.value = info?.taskNum || "";
|
||||
|
||||
// 加载该任务下的所有报告和残片
|
||||
if (info?.taskNum) {
|
||||
await loadTaskHistory(info.taskNum, sessionNum);
|
||||
}
|
||||
} catch {
|
||||
// 非关键数据
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
const formatRatio = (ratio?: number): string => {
|
||||
if (ratio == null) return "-";
|
||||
return `${(ratio * 100).toFixed(1)}%`;
|
||||
};
|
||||
|
||||
const loadTaskHistory = async (tn: string, currentSessionNum: string) => {
|
||||
const resetApplicationForm = () => {
|
||||
editingApplicationId.value = null;
|
||||
applicationForm.value = {
|
||||
title: "",
|
||||
description: "",
|
||||
resourceUrl: "",
|
||||
status: "TODO",
|
||||
};
|
||||
};
|
||||
|
||||
const loadTaskHistory = async (tn: string) => {
|
||||
try {
|
||||
const res = await getTaskReview(tn);
|
||||
const items: ReviewFeedItem[] = res?.data || [];
|
||||
|
||||
// 按 sessionNum 分组
|
||||
const map = new Map<string, { report: ReviewFeedItem | null; fragments: ReviewFeedItem[]; startTime: string }>();
|
||||
for (const item of items) {
|
||||
const entry = map.get(item.sessionNum) || { report: null, fragments: [], startTime: item.createdTime };
|
||||
@@ -117,6 +139,70 @@ const loadTaskHistory = async (tn: string, currentSessionNum: string) => {
|
||||
}
|
||||
};
|
||||
|
||||
const loadReviewExtensions = async (tn: string) => {
|
||||
const applicationsRes = await getReviewApplications(tn).catch(() => null);
|
||||
applications.value = applicationsRes?.data || [];
|
||||
|
||||
const mindMapRes = await getReviewMindMap(tn).catch(() => null);
|
||||
const loadedMindMap: ReviewMindMap | null = mindMapRes?.data || null;
|
||||
mindMap.value = loadedMindMap;
|
||||
mindMapForm.value = loadedMindMap
|
||||
? {
|
||||
title: loadedMindMap.title || "任务思维导图",
|
||||
content: loadedMindMap.content || "",
|
||||
contentFormat: loadedMindMap.contentFormat || "TEXT",
|
||||
}
|
||||
: {
|
||||
title: `${sessionInfo.value?.taskName || "任务"}思维导图`,
|
||||
content: "",
|
||||
contentFormat: "TEXT",
|
||||
};
|
||||
};
|
||||
|
||||
const loadDetail = async () => {
|
||||
loading.value = true;
|
||||
isEditing.value = false;
|
||||
editContent.value = "";
|
||||
content.value = "";
|
||||
sourceTypeLabel.value = "";
|
||||
taskNum.value = "";
|
||||
sessionInfo.value = null;
|
||||
taskSessions.value = [];
|
||||
applications.value = [];
|
||||
mindMap.value = null;
|
||||
try {
|
||||
let res;
|
||||
if (contentType.value === "report") {
|
||||
res = await getReportDetail(contentId.value);
|
||||
sourceTypeLabel.value = "学习报告";
|
||||
} else {
|
||||
res = await getFragmentDetail(contentId.value);
|
||||
sourceTypeLabel.value = "学习残片";
|
||||
}
|
||||
const data = res?.data;
|
||||
content.value = data?.content || "";
|
||||
|
||||
const sessionNum = data?.sessionNum;
|
||||
if (sessionNum) {
|
||||
try {
|
||||
const sessionRes = await getSessionDetail(sessionNum);
|
||||
const info = sessionRes?.data;
|
||||
sessionInfo.value = info || null;
|
||||
taskNum.value = info?.taskNum || "";
|
||||
|
||||
if (info?.taskNum) {
|
||||
await loadTaskHistory(info.taskNum);
|
||||
await loadReviewExtensions(info.taskNum);
|
||||
}
|
||||
} catch {
|
||||
// 非关键数据
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const goToDetail = (type: string, id: number) => {
|
||||
router.push(`/review/detail/${type}/${id}`);
|
||||
};
|
||||
@@ -146,6 +232,9 @@ const saveEdit = async () => {
|
||||
if (res?.code === 200) {
|
||||
content.value = editContent.value;
|
||||
isEditing.value = false;
|
||||
if (taskNum.value) {
|
||||
await loadTaskHistory(taskNum.value);
|
||||
}
|
||||
ElMessage.success("保存成功");
|
||||
} else {
|
||||
ElMessage.error(res?.message || "保存失败");
|
||||
@@ -157,9 +246,84 @@ const saveEdit = async () => {
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
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 updateReviewApplication(editingApplicationId.value, payload);
|
||||
ElMessage.success("应用场景已更新");
|
||||
} else {
|
||||
await createReviewApplication({ taskNum: taskNum.value, ...payload });
|
||||
ElMessage.success("应用场景已添加");
|
||||
}
|
||||
resetApplicationForm();
|
||||
await loadReviewExtensions(taskNum.value);
|
||||
} finally {
|
||||
applicationSaving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const editApplication = (item: ReviewApplication) => {
|
||||
editingApplicationId.value = item.id;
|
||||
applicationForm.value = {
|
||||
title: item.title || "",
|
||||
description: item.description || "",
|
||||
resourceUrl: item.resourceUrl || "",
|
||||
status: item.status || "TODO",
|
||||
};
|
||||
};
|
||||
|
||||
const removeApplication = async (item: ReviewApplication) => {
|
||||
await deleteReviewApplication(item.id);
|
||||
ElMessage.success("应用场景已删除");
|
||||
if (editingApplicationId.value === item.id) {
|
||||
resetApplicationForm();
|
||||
}
|
||||
if (taskNum.value) {
|
||||
await loadReviewExtensions(taskNum.value);
|
||||
}
|
||||
};
|
||||
|
||||
const saveMindMap = async () => {
|
||||
if (!taskNum.value) {
|
||||
ElMessage.warning("未找到关联任务");
|
||||
return;
|
||||
}
|
||||
if (!mindMapForm.value.title.trim() || !mindMapForm.value.content.trim()) {
|
||||
ElMessage.warning("思维导图标题和内容不能为空");
|
||||
return;
|
||||
}
|
||||
mindMapSaving.value = true;
|
||||
try {
|
||||
const res = await upsertReviewMindMap(taskNum.value, mindMapForm.value);
|
||||
mindMap.value = res?.data || null;
|
||||
ElMessage.success("思维导图已保存");
|
||||
} finally {
|
||||
mindMapSaving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
watch(
|
||||
() => [contentType.value, contentId.value],
|
||||
() => {
|
||||
loadDetail();
|
||||
});
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -189,6 +353,11 @@ onMounted(() => {
|
||||
编辑
|
||||
</el-button>
|
||||
</div>
|
||||
<div v-if="sessionInfo" class="session-stats">
|
||||
<span>实际：{{ formatDuration(sessionInfo.actualTime) }}</span>
|
||||
<span>有效：{{ formatDuration(sessionInfo.effectiveTime) }}</span>
|
||||
<span>效率：{{ formatRatio(sessionInfo.effectivenessRatio) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 编辑模式 -->
|
||||
<div v-if="isEditing" class="edit-area">
|
||||
@@ -214,6 +383,82 @@ onMounted(() => {
|
||||
</template>
|
||||
</article>
|
||||
|
||||
<section class="review-extension-grid" v-if="taskNum">
|
||||
<article class="surface-card extension-card">
|
||||
<div class="extension-head">
|
||||
<h3>应用场景</h3>
|
||||
<el-tag size="small" type="success" effect="plain">{{ applications.length }}</el-tag>
|
||||
</div>
|
||||
|
||||
<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">{{ statusText[item.status] || 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="item-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>
|
||||
<el-empty v-else description="暂无应用场景" :image-size="64" />
|
||||
|
||||
<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="form-row">
|
||||
<el-select v-model="applicationForm.status" placeholder="状态">
|
||||
<el-option label="待应用" value="TODO" />
|
||||
<el-option label="进行中" value="DOING" />
|
||||
<el-option label="已完成" value="DONE" />
|
||||
</el-select>
|
||||
<el-button type="success" :loading="applicationSaving" @click="saveApplication">
|
||||
{{ editingApplicationId ? "更新" : "添加" }}
|
||||
</el-button>
|
||||
<el-button v-if="editingApplicationId" @click="resetApplicationForm">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="surface-card extension-card">
|
||||
<div class="extension-head">
|
||||
<h3>思维导图</h3>
|
||||
<el-tag size="small" type="warning" effect="plain">{{ mindMap?.contentFormat || mindMapForm.contentFormat }}</el-tag>
|
||||
</div>
|
||||
|
||||
<div class="mind-map-form">
|
||||
<div class="form-row">
|
||||
<el-input v-model="mindMapForm.title" placeholder="标题" />
|
||||
<el-select v-model="mindMapForm.contentFormat" placeholder="格式">
|
||||
<el-option label="文本" value="TEXT" />
|
||||
<el-option label="Mermaid" value="MERMAID" />
|
||||
<el-option label="JSON" value="JSON" />
|
||||
</el-select>
|
||||
</div>
|
||||
<el-input
|
||||
v-model="mindMapForm.content"
|
||||
type="textarea"
|
||||
:rows="12"
|
||||
placeholder="思维导图内容"
|
||||
/>
|
||||
<div class="edit-actions">
|
||||
<el-button type="success" :loading="mindMapSaving" @click="saveMindMap">保存</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- 该任务下的所有学习记录 -->
|
||||
<article class="surface-card history-card" v-if="taskSessions.length > 0">
|
||||
<h3>该任务下的所有学习记录</h3>
|
||||
@@ -280,6 +525,15 @@ onMounted(() => {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.session-stats {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 14px;
|
||||
margin: -6px 0 16px;
|
||||
color: var(--text-secondary);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.meta-task-name {
|
||||
font-weight: 600;
|
||||
color: var(--green-800);
|
||||
@@ -310,6 +564,84 @@ onMounted(() => {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.review-extension-grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.extension-card {
|
||||
padding: 20px 22px;
|
||||
}
|
||||
|
||||
.extension-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.extension-head h3 {
|
||||
margin: 0;
|
||||
color: var(--green-900);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.item-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.application-form,
|
||||
.mind-map-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 历史记录卡片 */
|
||||
.history-card {
|
||||
padding: 20px 22px;
|
||||
@@ -420,4 +752,15 @@ onMounted(() => {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.review-extension-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -3,6 +3,7 @@ import { computed, onMounted, ref, watch } from "vue";
|
||||
import request from "@/utils/request";
|
||||
import router from "@/router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { getReviewTaskStatsByTask } from "@/api/review";
|
||||
|
||||
interface TaskItem {
|
||||
title: string;
|
||||
@@ -44,7 +45,7 @@ async function loadTaskStats(taskNum: string) {
|
||||
if (!task || task.statsLoaded) return;
|
||||
|
||||
try {
|
||||
const res = await request.get(`/review/tasks/${taskNum}`);
|
||||
const res = await getReviewTaskStatsByTask(taskNum);
|
||||
if (res?.data) {
|
||||
task.reportCount = res.data.reportCount ?? 0;
|
||||
task.fragmentCount = res.data.fragmentCount ?? 0;
|
||||
|
||||
@@ -63,7 +63,7 @@ const duplicatedGroups = computed(() => [...sessionGroups.value, ...sessionGroup
|
||||
|
||||
const loadReviewFeed = async () => {
|
||||
try {
|
||||
const res = await getReviewFeed(100);
|
||||
const res = await getReviewFeed(100, "random");
|
||||
reviewItems.value = res?.data || [];
|
||||
} catch {
|
||||
// feed 加载失败不影响页面主体功能
|
||||
|
||||
Reference in New Issue
Block a user