406 lines
16 KiB
TypeScript
406 lines
16 KiB
TypeScript
import { For, Show, createEffect, type JSX } from "solid-js";
|
||
import type { CourseKind, RecordType } from "~/service/wk";
|
||
import type { AccountItem } from "~/store/account";
|
||
import type { CourseType } from "~/types/Course";
|
||
import type { RecordItem } from "~/service/wk";
|
||
|
||
type RecordTypeOption = {
|
||
label: string;
|
||
value: RecordType;
|
||
};
|
||
type CourseRecordTypeOption = {
|
||
label: string;
|
||
value: CourseKind;
|
||
};
|
||
|
||
interface CourseWorkspaceProps {
|
||
selectedAccount: AccountItem | null;
|
||
selectedCourseList: CourseType[];
|
||
selectedCourseId: number | null;
|
||
selectedCourse: CourseType | null;
|
||
recordType: RecordType;
|
||
courseKind: CourseKind;
|
||
currentCourseKindLabel: string;
|
||
showingCachedRecords: boolean;
|
||
recordTypeOptions: RecordTypeOption[];
|
||
courseRecordTypeOptions: CourseRecordTypeOption[];
|
||
records: RecordItem[];
|
||
studyLogs: string[];
|
||
recordsLoading: boolean;
|
||
recordError: string;
|
||
isRefreshingRecords: boolean;
|
||
isRefreshingCourseRecords: boolean;
|
||
isRunningStudy: boolean;
|
||
isRefreshingLogs: boolean;
|
||
autoScrollLogs: boolean;
|
||
showLogTimestamps: boolean;
|
||
densityMode: "comfortable" | "compact";
|
||
logFontSize: number;
|
||
onSelectCourse: (courseId: number) => void;
|
||
onRefreshRecords: () => void;
|
||
onRefreshCourseRecords: () => void;
|
||
onChangeRecordType: (value: RecordType) => void;
|
||
onChangeCourseRecordType: (value: CourseKind) => void;
|
||
onStartStudy: () => void;
|
||
onStopStudy: () => void;
|
||
onRefreshLogs: () => void;
|
||
onClearLogs: () => void;
|
||
renderRecordState: (value: string) => string;
|
||
}
|
||
|
||
const EmptyState = (props: { children: JSX.Element }) => (
|
||
<div class="rounded-3xl border border-dashed border-zinc-300 bg-white px-4 py-8 text-center text-zinc-500">
|
||
{props.children}
|
||
</div>
|
||
);
|
||
|
||
const extractTimestamp = (message: string) => {
|
||
const match = message.match(/^\[(\d{2}:\d{2}:\d{2})\]\s*/);
|
||
return match?.[1] ?? null;
|
||
};
|
||
|
||
const stripTimestamp = (message: string) => {
|
||
return message.replace(/^\[(\d{2}:\d{2}:\d{2})\]\s*/, "");
|
||
};
|
||
|
||
const CourseWorkspace = (props: CourseWorkspaceProps) => {
|
||
let logContainerRef: HTMLDivElement | undefined;
|
||
|
||
createEffect(() => {
|
||
props.studyLogs.length;
|
||
|
||
if (!props.autoScrollLogs) {
|
||
return;
|
||
}
|
||
|
||
requestAnimationFrame(() => {
|
||
const element = logContainerRef;
|
||
if (element) {
|
||
element.scrollTo({ top: element.scrollHeight, behavior: "smooth" });
|
||
}
|
||
});
|
||
});
|
||
|
||
createEffect(() => {
|
||
if (logContainerRef) {
|
||
logContainerRef.style.fontSize = `${props.logFontSize}px`;
|
||
}
|
||
});
|
||
|
||
const compact = () => props.densityMode === "compact";
|
||
|
||
return (
|
||
<section class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-[28px] border border-white/80 bg-white/85 shadow-[0_18px_50px_-28px_rgba(15,23,42,0.3)]">
|
||
<div class="flex items-center justify-between border-b border-zinc-200/80 px-5 py-4">
|
||
<div>
|
||
<p class="text-lg font-semibold text-zinc-900">课程工作台</p>
|
||
<p class="mt-1 text-sm text-zinc-500">课程、记录与日志统一查看</p>
|
||
</div>
|
||
<Show when={props.selectedAccount}>
|
||
<div class="rounded-full bg-cyan-50 px-3 py-1 text-sm text-cyan-700">
|
||
{props.selectedAccount?.user.name}
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
|
||
<Show
|
||
when={props.selectedAccount}
|
||
fallback={
|
||
<div class="flex h-full items-center justify-center px-6 text-zinc-500">
|
||
选择左侧账号后，这里会显示课程、记录和运行日志。
|
||
</div>
|
||
}
|
||
>
|
||
<div
|
||
class={
|
||
compact()
|
||
? "grid min-h-0 flex-1 gap-3 p-3 xl:grid-cols-[320px_minmax(0,1fr)]"
|
||
: "grid min-h-0 flex-1 gap-4 p-4 xl:grid-cols-[340px_minmax(0,1fr)]"
|
||
}
|
||
>
|
||
<div class="flex min-h-0 flex-col overflow-hidden rounded-3xl border border-zinc-200 bg-[linear-gradient(180deg,rgba(248,250,252,0.9),rgba(255,255,255,0.95))]">
|
||
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-zinc-200 px-4 py-3">
|
||
<div class="border-b border-zinc-200 px-4 py-3">
|
||
<p class="text-sm font-semibold text-zinc-800">课程列表</p>
|
||
<p class="mt-1 text-xs text-zinc-500">点击课程查看对应记录</p>
|
||
</div>
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<select
|
||
class="rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm transition outline-none focus:border-cyan-400"
|
||
value={props.courseKind}
|
||
onChange={(event) =>
|
||
props.onChangeCourseRecordType(
|
||
event.currentTarget.value as CourseKind,
|
||
)
|
||
}
|
||
>
|
||
<For each={props.courseRecordTypeOptions}>
|
||
{(item) => <option value={item.value}>{item.label}</option>}
|
||
</For>
|
||
</select>
|
||
<button
|
||
type="button"
|
||
class="rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 transition hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-60"
|
||
disabled={props.isRefreshingCourseRecords}
|
||
onClick={props.onRefreshCourseRecords}
|
||
>
|
||
{props.isRefreshingCourseRecords ? "刷新中..." : "刷新记录"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class={
|
||
compact()
|
||
? "flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto p-2.5"
|
||
: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3"
|
||
}
|
||
>
|
||
<Show when={props.selectedCourseList.length === 0}>
|
||
<EmptyState>
|
||
当前“{props.currentCourseKindLabel}
|
||
”下没有课程，请切换分类或刷新课程列表。
|
||
</EmptyState>
|
||
</Show>
|
||
|
||
<For each={props.selectedCourseList}>
|
||
{(course) => {
|
||
const selected = () => course.id === props.selectedCourseId;
|
||
|
||
return (
|
||
<button
|
||
type="button"
|
||
class={
|
||
selected()
|
||
? compact()
|
||
? "rounded-[20px] border border-cyan-300 bg-[linear-gradient(145deg,rgba(236,254,255,0.95),rgba(240,253,244,0.95))] px-3 py-3 text-left shadow-sm"
|
||
: "rounded-[22px] border border-cyan-300 bg-[linear-gradient(145deg,rgba(236,254,255,0.95),rgba(240,253,244,0.95))] px-4 py-4 text-left shadow-sm"
|
||
: compact()
|
||
? "rounded-[20px] border border-zinc-200 bg-white px-3 py-3 text-left shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50/30"
|
||
: "rounded-[22px] border border-zinc-200 bg-white px-4 py-4 text-left shadow-sm transition hover:border-cyan-200 hover:bg-cyan-50/30"
|
||
}
|
||
onClick={() => props.onSelectCourse(course.id)}
|
||
>
|
||
<p class="truncate text-base font-semibold text-zinc-900">
|
||
{course.name}
|
||
</p>
|
||
<div class="mt-3 grid gap-1 text-sm text-zinc-600">
|
||
<p>课程号：{course.id}</p>
|
||
<p>老师：{course.teacher}</p>
|
||
<p>进度：{course.progress}</p>
|
||
</div>
|
||
</button>
|
||
);
|
||
}}
|
||
</For>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class={
|
||
compact()
|
||
? "grid min-h-0 gap-3 xl:grid-rows-[minmax(0,1fr)_240px]"
|
||
: "grid min-h-0 gap-4 xl:grid-rows-[minmax(0,1fr)_260px]"
|
||
}
|
||
>
|
||
<div class="flex min-h-0 flex-col overflow-hidden rounded-3xl border border-zinc-200 bg-[linear-gradient(180deg,rgba(248,250,252,0.9),rgba(255,255,255,0.95))]">
|
||
<div class="flex flex-wrap items-center justify-between gap-3 border-b border-zinc-200 px-4 py-3">
|
||
<div>
|
||
<p class="text-sm font-semibold text-zinc-800">记录列表</p>
|
||
<p class="mt-1 text-xs text-zinc-500">
|
||
{props.selectedCourse
|
||
? props.selectedCourse.name
|
||
: "请选择课程"}
|
||
</p>
|
||
<Show
|
||
when={props.showingCachedRecords && !props.recordsLoading}
|
||
>
|
||
<p class="mt-1 text-xs text-amber-600">
|
||
当前显示的是本地缓存记录。
|
||
</p>
|
||
</Show>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<button
|
||
type="button"
|
||
class="rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 transition hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-60"
|
||
disabled={
|
||
!props.selectedCourse || props.isRefreshingRecords
|
||
}
|
||
onClick={props.onRefreshRecords}
|
||
>
|
||
{props.isRefreshingRecords ? "刷新中..." : "刷新记录"}
|
||
</button>
|
||
|
||
<select
|
||
class="rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm transition outline-none focus:border-cyan-400"
|
||
value={props.recordType}
|
||
onChange={(event) =>
|
||
props.onChangeRecordType(
|
||
event.currentTarget.value as RecordType,
|
||
)
|
||
}
|
||
>
|
||
<For each={props.recordTypeOptions}>
|
||
{(item) => (
|
||
<option value={item.value}>{item.label}</option>
|
||
)}
|
||
</For>
|
||
</select>
|
||
|
||
<Show when={props.recordType === ""}>
|
||
<button
|
||
type="button"
|
||
class="rounded-xl border border-cyan-200 bg-cyan-50 px-3 py-2 text-sm text-cyan-700 transition hover:bg-cyan-100"
|
||
onClick={
|
||
props.isRunningStudy
|
||
? props.onStopStudy
|
||
: props.onStartStudy
|
||
}
|
||
>
|
||
{props.isRunningStudy ? "停止刷课" : "开始刷课"}
|
||
</button>
|
||
</Show>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class={
|
||
compact()
|
||
? "min-h-0 flex-1 overflow-y-auto p-2.5"
|
||
: "min-h-0 flex-1 overflow-y-auto p-3"
|
||
}
|
||
>
|
||
<Show when={props.recordsLoading}>
|
||
<EmptyState>正在加载记录...</EmptyState>
|
||
</Show>
|
||
|
||
<Show when={!props.recordsLoading && props.recordError}>
|
||
<div class="rounded-3xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-600">
|
||
{props.recordError}
|
||
</div>
|
||
</Show>
|
||
|
||
<Show
|
||
when={
|
||
!props.recordsLoading &&
|
||
!props.recordError &&
|
||
!props.selectedCourse
|
||
}
|
||
>
|
||
<EmptyState>点击左侧课程后，在这里查看对应记录。</EmptyState>
|
||
</Show>
|
||
|
||
<Show
|
||
when={
|
||
!props.recordsLoading &&
|
||
!props.recordError &&
|
||
props.selectedCourse &&
|
||
props.records.length === 0
|
||
}
|
||
>
|
||
<EmptyState>当前分类下没有记录。</EmptyState>
|
||
</Show>
|
||
|
||
<div class="flex flex-col gap-3">
|
||
<For each={props.records}>
|
||
{(record) => (
|
||
<div
|
||
class={
|
||
compact()
|
||
? "rounded-[20px] border border-zinc-200 bg-white px-3 py-3 shadow-sm"
|
||
: "rounded-[22px] border border-zinc-200 bg-white px-4 py-4 shadow-sm"
|
||
}
|
||
>
|
||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||
<div class="min-w-0 flex-1">
|
||
<p class="truncate text-base font-semibold text-zinc-900">
|
||
{record.name}
|
||
</p>
|
||
<p class="mt-1 text-sm text-zinc-500">
|
||
记录 ID：{record.id} | 章节：{record.chapterId}
|
||
</p>
|
||
</div>
|
||
<span class="rounded-full bg-zinc-100 px-3 py-1 text-xs font-medium text-zinc-700">
|
||
{props.renderRecordState(record.state) ||
|
||
"未知状态"}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="mt-4 grid gap-2 text-sm text-zinc-600 md:grid-cols-2 xl:grid-cols-3">
|
||
<p>视频时长：{record.videoDuration}</p>
|
||
<p>学习秒数：{record.duration}</p>
|
||
<p>学习进度：{record.progress}</p>
|
||
<p>开始时间：{record.beginTime || "-"}</p>
|
||
<p>完成时间：{record.finalTime || "-"}</p>
|
||
<p>查看次数：{record.viewCount}</p>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</For>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex min-h-0 flex-col overflow-hidden rounded-3xl border border-zinc-200 bg-white">
|
||
<div class="flex items-center justify-between border-b border-zinc-200 px-4 py-3">
|
||
<div>
|
||
<p class="text-sm font-semibold text-zinc-800">运行日志</p>
|
||
<p class="mt-1 text-xs text-zinc-500">
|
||
输出会自动滚动到最新位置
|
||
</p>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-2">
|
||
<button
|
||
type="button"
|
||
class="rounded-lg border border-zinc-200 px-3 py-1 text-xs text-zinc-700 transition hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-60"
|
||
disabled={props.isRefreshingLogs}
|
||
onClick={props.onRefreshLogs}
|
||
>
|
||
{props.isRefreshingLogs ? "刷新中..." : "刷新日志"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
class="rounded-lg border border-zinc-200 px-3 py-1 text-xs text-zinc-700 transition hover:bg-zinc-100"
|
||
onClick={props.onClearLogs}
|
||
>
|
||
清空日志
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
ref={logContainerRef}
|
||
class="min-h-0 flex-1 overflow-y-auto bg-zinc-950 px-4 py-3 font-mono text-emerald-300"
|
||
>
|
||
<Show
|
||
when={props.studyLogs.length > 0}
|
||
fallback={<p>暂无日志输出。</p>}
|
||
>
|
||
<div class="space-y-2">
|
||
<For each={props.studyLogs}>
|
||
{(log, index) => (
|
||
<p>
|
||
[{index() + 1}]{" "}
|
||
{props.showLogTimestamps && extractTimestamp(log)
|
||
? `${extractTimestamp(log)} `
|
||
: ""}
|
||
{stripTimestamp(log)}
|
||
</p>
|
||
)}
|
||
</For>
|
||
</div>
|
||
</Show>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Show>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default CourseWorkspace;
|