cqcst/wk-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: UI optimizations - button feedback, layout fixes, cache clearing, work/exam records

Browse Source 
- Add active: state feedback to all buttons across the app
- Fix cache clearing to update Zustand store (not just localStorage)
- Remove checkboxes from settings cache section, compact layout
- Settings page: single outer scroll instead of dual-column scroll
- CourseWorkspace: elastic log panel height, work/exam record counts
- Integrate WorkList/ExamList types and display in UI
- Delete unused CourseList.tsx component
- Fix wk.ts: strict equality, remove unused import

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
zhilv
2026-04-26 17:36:02 +08:00
parent 13f0be162b
commit a1911573d1
13 changed files with 603 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.tsx
View File

@@ -400,7 +400,7 @@ const App: ParentComponent = (props) => {
class={
active
? "min-w-fit whitespace-nowrap rounded-2xl border border-cyan-200 bg-[linear-gradient(135deg,_rgba(34,211,238,0.18),_rgba(34,197,94,0.18))] px-4 py-3 text-sm font-medium text-zinc-900 shadow-sm"
: "min-w-fit whitespace-nowrap rounded-2xl border border-transparent px-4 py-3 text-sm font-medium text-zinc-600 transition hover:border-zinc-200 hover:bg-zinc-50/80 hover:text-zinc-900"
: "min-w-fit whitespace-nowrap rounded-2xl border border-transparent px-4 py-3 text-sm font-medium text-zinc-600 transition active:scale-[0.98] hover:border-zinc-200 hover:bg-zinc-50/80 hover:text-zinc-900"
}
>
<div class="flex items-center justify-between">
@@ -449,7 +449,7 @@ const App: ParentComponent = (props) => {
<div class="mt-3 flex flex-wrap items-center gap-2">
<button
type="button"
class="rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-xs text-zinc-700 transition hover:bg-zinc-100"
class="rounded-lg border border-zinc-200 bg-white px-3 py-1.5 text-xs text-zinc-700 transition active:bg-zinc-200 hover:bg-zinc-100"
onClick={() => void handleCopyVersion()}
>
{copyState() === "done"
@@ -460,7 +460,7 @@ const App: ParentComponent = (props) => {
</button>
<button
type="button"
class="rounded-lg border border-cyan-200 bg-cyan-50 px-3 py-1.5 text-xs text-cyan-700 transition hover:bg-cyan-100 disabled:cursor-not-allowed disabled:opacity-60"
class="rounded-lg border border-cyan-200 bg-cyan-50 px-3 py-1.5 text-xs text-cyan-700 transition active:bg-cyan-200 hover:bg-cyan-100 disabled:cursor-not-allowed disabled:opacity-60"
disabled={updateCheckState() === "checking"}
onClick={() => void performUpdateCheck(true)}
>
@@ -495,7 +495,7 @@ const App: ParentComponent = (props) => {
<>
<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"
class="rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 transition active:bg-zinc-200 hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-60"
disabled={downloadState() === "downloading"}
onClick={() => setUpdateDialogOpen(false)}
>
@@ -503,14 +503,14 @@ const App: ParentComponent = (props) => {
</button>
<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"
class="rounded-xl border border-cyan-200 bg-cyan-50 px-3 py-2 text-sm text-cyan-700 transition active:bg-cyan-200 hover:bg-cyan-100"
onClick={openReleasePage}
>
打开 Release
</button>
<button
type="button"
class="rounded-xl bg-[linear-gradient(135deg,#06b6d4,#14b8a6)] px-3 py-2 text-sm text-white transition hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-60"
class="rounded-xl bg-[linear-gradient(135deg,#06b6d4,#14b8a6)] px-3 py-2 text-sm text-white transition active:scale-[0.97] hover:opacity-95 disabled:cursor-not-allowed disabled:opacity-60"
disabled={downloadState() === "downloading"}
onClick={() => void handleDownloadUpdate()}
>

10
src/components/account/AccountSidebar.tsx
View File

@@ -89,7 +89,7 @@ const AccountSidebar = (props: AccountSidebarProps) => {
<div class="flex items-start justify-between gap-3">
<button
type="button"
class="min-w-0 flex-1 text-left"
class="min-w-0 flex-1 text-left transition active:scale-[0.98]"
onClick={() => props.onSelectAccount(account.id)}
>
<div class="flex items-start justify-between gap-3">
@@ -119,7 +119,7 @@ const AccountSidebar = (props: AccountSidebarProps) => {
</button>
<button
type="button"
class="shrink-0 text-sm text-zinc-400 transition hover:text-zinc-600"
class="shrink-0 text-sm text-zinc-400 transition hover:text-zinc-600 active:text-zinc-800"
onClick={() => props.onToggleExpand(account.id)}
>
{expanded() ? "收起" : "展开"}
@@ -139,7 +139,7 @@ const AccountSidebar = (props: AccountSidebarProps) => {
<div class="mt-1.5 flex flex-wrap gap-1.5 sm:col-span-2">
<button
type="button"
class="rounded-xl border border-emerald-200 bg-white px-2.5 py-1 text-xs text-emerald-700 transition hover:bg-emerald-50 disabled:cursor-not-allowed disabled:opacity-60"
class="rounded-xl border border-emerald-200 bg-white px-2.5 py-1 text-xs text-emerald-700 transition hover:bg-emerald-50 active:bg-emerald-100 disabled:cursor-not-allowed disabled:opacity-60"
disabled={isRefreshing()}
onClick={(event) => {
event.stopPropagation();
@@ -150,14 +150,14 @@ const AccountSidebar = (props: AccountSidebarProps) => {
</button>
<button
type="button"
class="rounded-xl border border-cyan-200 bg-white px-2.5 py-1 text-xs text-cyan-700 transition hover:bg-cyan-50"
class="rounded-xl border border-cyan-200 bg-white px-2.5 py-1 text-xs text-cyan-700 transition hover:bg-cyan-50 active:bg-cyan-100"
onClick={() => props.onToggleExpand(account.id)}
>
收起信息
</button>
<button
type="button"
class="rounded-xl border border-rose-200 bg-white px-2.5 py-1 text-xs text-rose-500 transition hover:bg-rose-50 disabled:cursor-not-allowed disabled:opacity-60"
class="rounded-xl border border-rose-200 bg-white px-2.5 py-1 text-xs text-rose-500 transition hover:bg-rose-50 active:bg-rose-100 disabled:cursor-not-allowed disabled:opacity-60"
disabled={props.loggingOutId === account.id}
onClick={(event) => {
event.stopPropagation();

4
src/components/account/AddAccountDialog.tsx
View File

@@ -43,14 +43,14 @@ const AddAccountDialog = (props: AddAccountDialogProps) => {
<>
<button
type="button"
class="rounded-xl border border-zinc-200 px-4 py-2 text-zinc-700 transition hover:bg-zinc-100"
class="rounded-xl border border-zinc-200 px-4 py-2 text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200"
onClick={props.onClose}
>
取消
</button>
<button
type="button"
class="rounded-xl bg-cyan-500 px-4 py-2 text-white transition hover:bg-cyan-600 disabled:cursor-not-allowed disabled:bg-cyan-300"
class="rounded-xl bg-cyan-500 px-4 py-2 text-white transition hover:bg-cyan-600 active:bg-cyan-700 disabled:cursor-not-allowed disabled:bg-cyan-300"
disabled={props.isSubmitting}
onClick={props.onSubmit}
>

175
src/components/account/CourseWorkspace.tsx
View File

@@ -6,11 +6,13 @@ import {
createSignal,
type JSX,
} from "solid-js";
import type { CourseKind, RecordType } from "~/service/wk";
import type { CourseKind, RecordType, WorkListItem, ExamListItem } from "~/service/wk";
import type { AccountItem } from "~/store/account";
import type { CourseType } from "~/types/Course";
import type { RecordItem } from "~/service/wk";
const stripHtml = (value: string) => value.replace(/<[^>]+>/g, "").trim();
type RecordTypeOption = {
label: string;
value: RecordType;
@@ -33,6 +35,8 @@ interface CourseWorkspaceProps {
recordTypeOptions: RecordTypeOption[];
courseRecordTypeOptions: CourseRecordTypeOption[];
records: RecordItem[];
workList: WorkListItem[];
examList: ExamListItem[];
studyLogs: string[];
recordsLoading: boolean;
recordError: string;
@@ -179,7 +183,7 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
</select>
<button
type="button"
class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 transition hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-60"
class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-60"
disabled={props.isRefreshingCourseRecords}
onClick={props.onRefreshCourseRecords}
>
@@ -232,8 +236,8 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
<div
class={
compact()
? "grid min-h-0 gap-1.5 grid-rows-[minmax(0,1fr)_176px] xl:grid-rows-[minmax(0,1fr)_188px]"
: "grid min-h-0 gap-2 grid-rows-[minmax(0,1fr)_188px] xl:grid-rows-[minmax(0,1fr)_208px]"
? "grid min-h-0 gap-1.5 grid-rows-[minmax(0,1fr)_minmax(140px,30vh)]"
: "grid min-h-0 gap-2 grid-rows-[minmax(0,1fr)_minmax(140px,30vh)]"
}
>
<div class="flex min-h-0 flex-col overflow-hidden rounded-[18px] border border-zinc-200 bg-[linear-gradient(180deg,rgba(248,250,252,0.9),rgba(255,255,255,0.95))]">
@@ -259,7 +263,7 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
<div class="flex flex-wrap items-center gap-1.5">
<button
type="button"
class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 transition hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-60"
class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-60"
disabled={
!props.selectedCourse || props.isRefreshingRecords
}
@@ -287,7 +291,7 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
<Show when={props.recordType === ""}>
<button
type="button"
class="rounded-lg border border-cyan-200 bg-cyan-50 px-2 py-1 text-xs text-cyan-700 transition hover:bg-cyan-100"
class="rounded-lg border border-cyan-200 bg-cyan-50 px-2 py-1 text-xs text-cyan-700 transition hover:bg-cyan-100 active:bg-cyan-200"
onClick={
props.isRunningStudy
? props.onStopStudy
@@ -299,25 +303,26 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
</Show>
</div>
</div>
<Show when={props.recordType === ""}>
<div class="flex flex-wrap items-center justify-between gap-1.5 border-b border-zinc-200/70 px-2.5 py-1.5">
<div class="flex flex-wrap items-center gap-1.5 text-xs">
<button
type="button"
class={recordFilter() === "all" ? "rounded-full border border-zinc-200 bg-zinc-100 px-2.5 py-0.5 font-medium text-zinc-700" : "rounded-full border border-zinc-200 bg-white px-2.5 py-0.5 text-zinc-600 transition hover:bg-zinc-100"}
class={recordFilter() === "all" ? "rounded-full border border-zinc-200 bg-zinc-100 px-2.5 py-0.5 font-medium text-zinc-700 active:bg-zinc-200" : "rounded-full border border-zinc-200 bg-white px-2.5 py-0.5 text-zinc-600 transition hover:bg-zinc-100 active:bg-zinc-200"}
onClick={() => setRecordFilter("all")}
>
全部 {recordStats().total}
</button>
<button
type="button"
class={recordFilter() === "unlearned" ? "rounded-full border border-amber-200 bg-amber-100 px-2.5 py-0.5 font-medium text-amber-700" : "rounded-full border border-amber-200 bg-white px-2.5 py-0.5 text-amber-700 transition hover:bg-amber-50"}
class={recordFilter() === "unlearned" ? "rounded-full border border-amber-200 bg-amber-100 px-2.5 py-0.5 font-medium text-amber-700 active:bg-amber-200" : "rounded-full border border-amber-200 bg-white px-2.5 py-0.5 text-amber-700 transition hover:bg-amber-50 active:bg-amber-100"}
onClick={() => setRecordFilter("unlearned")}
>
未学 {recordStats().unlearned}
</button>
<button
type="button"
class={recordFilter() === "learned" ? "rounded-full border border-emerald-200 bg-emerald-100 px-2.5 py-0.5 font-medium text-emerald-700" : "rounded-full border border-emerald-200 bg-white px-2.5 py-0.5 text-emerald-700 transition hover:bg-emerald-50"}
class={recordFilter() === "learned" ? "rounded-full border border-emerald-200 bg-emerald-100 px-2.5 py-0.5 font-medium text-emerald-700 active:bg-emerald-200" : "rounded-full border border-emerald-200 bg-white px-2.5 py-0.5 text-emerald-700 transition hover:bg-emerald-50 active:bg-emerald-100"}
onClick={() => setRecordFilter("learned")}
>
已学 {recordStats().learned}
@@ -327,6 +332,17 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
当前筛选：{recordFilter() === "all" ? "全部" : recordFilter() === "unlearned" ? "未学" : "已学"}
</p>
</div>
</Show>
<Show when={props.recordType === "/work" && props.workList.length > 0}>
<div class="flex items-center gap-1.5 border-b border-zinc-200/70 px-2.5 py-1.5 text-xs text-zinc-500">
共 {props.workList.length} 条作业记录
</div>
</Show>
<Show when={props.recordType === "/exam" && props.examList.length > 0}>
<div class="flex items-center gap-1.5 border-b border-zinc-200/70 px-2.5 py-1.5 text-xs text-zinc-500">
共 {props.examList.length} 条考试记录
</div>
</Show>
<div
class={
@@ -360,6 +376,7 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
!props.recordsLoading &&
!props.recordError &&
props.selectedCourse &&
props.recordType === "" &&
filteredRecords().length === 0
}
>
@@ -370,6 +387,31 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
</EmptyState>
</Show>
<Show
when={
!props.recordsLoading &&
!props.recordError &&
props.selectedCourse &&
props.recordType === "/work" &&
props.workList.length === 0
}
>
<EmptyState>当前课程下没有作业记录。</EmptyState>
</Show>
<Show
when={
!props.recordsLoading &&
!props.recordError &&
props.selectedCourse &&
props.recordType === "/exam" &&
props.examList.length === 0
}
>
<EmptyState>当前课程下没有考试记录。</EmptyState>
</Show>
<Show when={props.recordType === ""}>
<div class={compact() ? "flex flex-col gap-1.5" : "flex flex-col gap-2"}>
<For each={filteredRecords()}>
{(record) => {
@@ -423,6 +465,117 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
}}
</For>
</div>
</Show>
<Show when={props.recordType === "/work"}>
<div class={compact() ? "flex flex-col gap-1.5" : "flex flex-col gap-2"}>
<For each={props.workList}>
{(work) => {
const stateRaw = stripHtml(work.state);
const stateText = stateRaw || "未做";
const done = stateRaw.includes("已阅") || stateRaw.includes("已提交") || stateRaw.includes("已完成");
return (
<div
class={
done
? compact()
? "rounded-[16px] border border-emerald-200 bg-emerald-50/35 px-2 py-1.5 shadow-sm"
: "rounded-[18px] border border-emerald-200 bg-emerald-50/35 px-2.5 py-2.5 shadow-sm"
: compact()
? "rounded-[16px] border border-amber-200 bg-amber-50/35 px-2 py-1.5 shadow-sm"
: "rounded-[18px] border border-amber-200 bg-amber-50/35 px-2.5 py-2.5 shadow-sm"
}
>
<div class="flex flex-wrap items-start justify-between gap-2">
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-semibold text-zinc-900">
{work.title || work.name}
</p>
<p class="mt-1 text-xs text-zinc-500">
作业 ID：{work.id} | 章节：{work.chapterId}
</p>
</div>
<span
class={
done
? "rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700"
: "rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-700"
}
>
{stateText}
</span>
</div>
<div class="mt-2 grid gap-1 text-xs text-zinc-600 md:grid-cols-2 xl:grid-cols-3">
<p>类型：{work.typeName || work.type || "-"}</p>
<p>总分：{work.score || "-"}</p>
<p>得分：{stripHtml(work.finalScore) || "-"}</p>
<p>题目数：{work.topicNumber || "-"}</p>
<p>添加时间：{work.addTime || "-"}</p>
<p>完成时间：{work.finishTime !== "-" ? work.finishTime : "-"}</p>
</div>
</div>
);
}}
</For>
</div>
</Show>
<Show when={props.recordType === "/exam"}>
<div class={compact() ? "flex flex-col gap-1.5" : "flex flex-col gap-2"}>
<For each={props.examList}>
{(exam) => {
const stateRaw = stripHtml(exam.state);
const stateText = stateRaw || "未做";
const done = stateRaw.includes("已阅") || stateRaw.includes("已提交") || stateRaw.includes("已完成");
return (
<div
class={
done
? compact()
? "rounded-[16px] border border-emerald-200 bg-emerald-50/35 px-2 py-1.5 shadow-sm"
: "rounded-[18px] border border-emerald-200 bg-emerald-50/35 px-2.5 py-2.5 shadow-sm"
: compact()
? "rounded-[16px] border border-amber-200 bg-amber-50/35 px-2 py-1.5 shadow-sm"
: "rounded-[18px] border border-amber-200 bg-amber-50/35 px-2.5 py-2.5 shadow-sm"
}
>
<div class="flex flex-wrap items-start justify-between gap-2">
<div class="min-w-0 flex-1">
<p class="truncate text-sm font-semibold text-zinc-900">
{exam.title || exam.name}
</p>
<p class="mt-1 text-xs text-zinc-500">
考试 ID：{exam.id} | 章节：{exam.chapterId}
</p>
</div>
<span
class={
done
? "rounded-full bg-emerald-100 px-3 py-1 text-xs font-medium text-emerald-700"
: "rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-700"
}
>
{stateText}
</span>
</div>
<div class="mt-2 grid gap-1 text-xs text-zinc-600 md:grid-cols-2 xl:grid-cols-3">
<p>限时：{exam.limitedTime ? `${exam.limitedTime}分钟` : "-"}</p>
<p>总分：{exam.score || "-"}</p>
<p>得分：{stripHtml(exam.finalScore) || "-"}</p>
<p>题目数：{exam.topicNumber || "-"}</p>
<p>添加时间：{exam.addTime || "-"}</p>
<p>完成时间：{exam.finishTime !== "-" ? exam.finishTime : "-"}</p>
</div>
</div>
);
}}
</For>
</div>
</Show>
</div>
</div>
@@ -440,7 +593,7 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
<div class="flex items-center gap-2">
<button
type="button"
class="rounded-lg border border-zinc-200 px-2 py-0.5 text-xs text-zinc-700 transition hover:bg-zinc-100 disabled:cursor-not-allowed disabled:opacity-60"
class="rounded-lg border border-zinc-200 px-2 py-0.5 text-xs text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-60"
disabled={props.isRefreshingLogs}
onClick={props.onRefreshLogs}
>
@@ -448,7 +601,7 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
</button>
<button
type="button"
class="rounded-lg border border-zinc-200 px-2 py-0.5 text-xs text-zinc-700 transition hover:bg-zinc-100"
class="rounded-lg border border-zinc-200 px-2 py-0.5 text-xs text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200"
onClick={props.onClearLogs}
>
清空日志

39
src/components/courseList/CourseList.tsx
View File

@@ -1,39 +0,0 @@
import type { CourseType } from "~/types/Course";
import type { Accessor } from "solid-js";
const courseLabel: [string, keyof CourseType][] = [
["课程", "name"],
["课程号", "id"],
["老师", "teacher"],
["进度", "progress"],
["开始时间", "start_time"],
["结束时间", "stop_time"],
["学分", "credit"],
["类型", "type"],
];
interface CourseListProps {
courseList: Accessor<CourseType[]>;
}
const CourseList = (props: CourseListProps) => {
return (
<div class="m4-2 flex min-h-0 flex-1 flex-col gap-y-4 overflow-y-auto p-5">
{props.courseList().map((course) => {
return (
<div class="grid grid-cols-3 rounded-xl border bg-zinc-200 p-4 py-2 shadow-sm">
{courseLabel.map(([labelText, field]) => {
return (
<p class="text-base leading-7">
{labelText}: <span>{course[field]}</span>
</p>
);
})}
</div>
);
})}
</div>
);
};
export default CourseList;

2
src/components/dialog/Dialog.tsx
View File

@@ -60,7 +60,7 @@ const Dialog: ParentComponent<DialogProps> = (props) => {
</h2>
<button
type="button"
class="rounded-lg px-3 py-1 text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-900"
class="rounded-lg px-3 py-1 text-zinc-500 transition hover:bg-zinc-100 hover:text-zinc-900 active:bg-zinc-200"
onClick={props.onClose}
>
关闭

101
src/pages/accounts/Account.tsx
View File

@@ -20,6 +20,8 @@ import {
type CourseKind,
type RecordItem,
type RecordType,
type WorkListItem,
type ExamListItem,
} from "~/service/wk";
import { setUnauthorizedHandler } from "~/service/http";
import { accountStore, type AccountItem } from "~/store/account";
@@ -196,7 +198,10 @@ const Account = () => {
const courseKind = createMemo(() => storeState().courseKind);
const recordType = createMemo(() => storeState().recordType);
const records = createMemo(() => storeState().records);
const workList = createMemo(() => storeState().workList);
const examList = createMemo(() => storeState().examList);
const recordCacheMap = createMemo(() => storeState().recordCacheMap);
const workExamCacheMap = createMemo(() => storeState().workExamCacheMap);
const studyLogsMap = createMemo(() => storeState().studyLogsMap);
const runningStudyMap = createMemo(() => storeState().runningStudyMap);
const mergedHostOptions = createMemo(() =>
@@ -567,7 +572,57 @@ const Account = () => {
setRecordError("");
try {
const res = await getAccountClient(accountId).recordApi({
const cacheKey = createRecordCacheKey(accountId, courseId, nextRecordType);
const client = getAccountClient(accountId);
if (nextRecordType === "/work") {
const res = await client.workListApi({
course_id: String(courseId),
page: 0,
record_type: "/work",
});
if (requestToken !== recordRequestToken) return;
const rawList = (res as { data?: { list?: unknown } })?.data?.list;
const list = (Array.isArray(rawList) ? rawList : []) as WorkListItem[];
const snapshot = accountStore.getState();
if (
snapshot.selectedAccountId !== accountId ||
snapshot.selectedCourseId !== courseId ||
snapshot.recordType !== nextRecordType
) {
return;
}
accountStore.getState().setWorkList(list);
accountStore.getState().setRecords([]);
accountStore.getState().setExamList([]);
accountStore.getState().setWorkExamCache(cacheKey, list);
} else if (nextRecordType === "/exam") {
const res = await client.examListApi({
course_id: String(courseId),
page: 0,
record_type: "/exam",
});
if (requestToken !== recordRequestToken) return;
const rawList = (res as { data?: { list?: unknown } })?.data?.list;
const list = (Array.isArray(rawList) ? rawList : []) as ExamListItem[];
const snapshot = accountStore.getState();
if (
snapshot.selectedAccountId !== accountId ||
snapshot.selectedCourseId !== courseId ||
snapshot.recordType !== nextRecordType
) {
return;
}
accountStore.getState().setExamList(list);
accountStore.getState().setRecords([]);
accountStore.getState().setWorkList([]);
accountStore.getState().setWorkExamCache(cacheKey, list);
} else {
const res = await client.recordApi({
course_id: String(courseId),
page: 0,
record_type: nextRecordType,
@@ -588,12 +643,12 @@ const Account = () => {
}
accountStore.getState().setRecords(list);
accountStore.getState().setWorkList([]);
accountStore.getState().setExamList([]);
accountStore
.getState()
.setRecordCache(
createRecordCacheKey(accountId, courseId, nextRecordType),
list,
);
.setRecordCache(cacheKey, list);
}
} catch (error) {
if (requestToken !== recordRequestToken) {
return;
@@ -602,6 +657,8 @@ const Account = () => {
error instanceof Error ? error.message : "获取记录失败，请稍后重试。";
setRecordError(message);
accountStore.getState().setRecords([]);
accountStore.getState().setWorkList([]);
accountStore.getState().setExamList([]);
} finally {
if (requestToken === recordRequestToken) {
setRecordsLoading(false);
@@ -729,10 +786,23 @@ const Account = () => {
return;
}
const cachedRecords =
recordCacheMap()[createRecordCacheKey(accountId, courseId, type)] ??
[];
const cacheKey = createRecordCacheKey(accountId, courseId, type);
if (type === "/work" || type === "/exam") {
const cachedData = workExamCacheMap()[cacheKey] ?? [];
if (type === "/work") {
accountStore.getState().setWorkList(cachedData as WorkListItem[]);
accountStore.getState().setExamList([]);
} else {
accountStore.getState().setExamList(cachedData as ExamListItem[]);
accountStore.getState().setWorkList([]);
}
accountStore.getState().setRecords([]);
} else {
const cachedRecords = recordCacheMap()[cacheKey] ?? [];
accountStore.getState().setRecords(cachedRecords);
accountStore.getState().setWorkList([]);
accountStore.getState().setExamList([]);
}
},
),
);
@@ -744,12 +814,19 @@ const Account = () => {
const cacheKey = account
? createRecordCacheKey(account.id, courseId ?? 0, type)
: "";
const hasCachedRecords = cacheKey ? cacheKey in recordCacheMap() : false;
const hasCachedRecords = cacheKey
? cacheKey in recordCacheMap() || cacheKey in workExamCacheMap()
: false;
if (!hasRestoredRecords()) {
setHasRestoredRecords(true);
if (courseId && account && (records().length > 0 || hasCachedRecords)) {
const hasAnyData =
records().length > 0 ||
workList().length > 0 ||
examList().length > 0 ||
hasCachedRecords;
if (courseId && account && hasAnyData) {
return;
}
}
@@ -818,6 +895,8 @@ const Account = () => {
recordTypeOptions={recordTypeOptions}
courseRecordTypeOptions={statusOptions}
records={records()}
workList={workList()}
examList={examList()}
studyLogs={studyLogs()}
recordsLoading={recordsLoading()}
recordError={recordError()}
@@ -840,6 +919,8 @@ const Account = () => {
accountStore.getState().setCourseKind(value);
accountStore.getState().setSelectedCourseId(null);
accountStore.getState().setRecords([]);
accountStore.getState().setWorkList([]);
accountStore.getState().setExamList([]);
}}
onStartStudy={() => void handleStartStudy()}
onStopStudy={handleStopStudy}

14
src/pages/debug-logs/DebugLogs.tsx
View File

@@ -469,7 +469,7 @@ const DebugLogs = () => {
<div class="flex flex-wrap items-center gap-2 xl:justify-end">
<button
type="button"
class="rounded-full border border-cyan-300/25 bg-cyan-400/10 px-3 py-1.5 text-xs font-medium text-cyan-100 transition hover:bg-cyan-400/20"
class="rounded-full border border-cyan-300/25 bg-cyan-400/10 px-3 py-1.5 text-xs font-medium text-cyan-100 transition hover:bg-cyan-400/20 active:bg-cyan-400/30"
onClick={connectDebugSocket}
disabled={
debugSocketState() === "open" ||
@@ -480,21 +480,21 @@ const DebugLogs = () => {
</button>
<button
type="button"
class="rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-slate-200 transition hover:bg-white/10"
class="rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-slate-200 transition hover:bg-white/10 active:bg-white/20"
onClick={() => void loadDebugSnapshot()}
>
刷新快照
</button>
<button
type="button"
class="rounded-full border border-cyan-300/25 bg-cyan-400/10 px-3 py-1.5 text-xs font-medium text-cyan-100 transition hover:bg-cyan-400/20"
class="rounded-full border border-cyan-300/25 bg-cyan-400/10 px-3 py-1.5 text-xs font-medium text-cyan-100 transition hover:bg-cyan-400/20 active:bg-cyan-400/30"
onClick={downloadDebugLogs}
>
下载日志
</button>
<button
type="button"
class="rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-slate-200 transition hover:bg-white/10"
class="rounded-full border border-white/10 bg-white/5 px-3 py-1.5 text-xs font-medium text-slate-200 transition hover:bg-white/10 active:bg-white/20"
onClick={disconnectDebugSocket}
disabled={debugSocketState() !== "open"}
>
@@ -502,7 +502,7 @@ const DebugLogs = () => {
</button>
<button
type="button"
class="rounded-full border border-rose-300/20 bg-rose-400/10 px-3 py-1.5 text-xs font-medium text-rose-100 transition hover:bg-rose-400/20"
class="rounded-full border border-rose-300/20 bg-rose-400/10 px-3 py-1.5 text-xs font-medium text-rose-100 transition hover:bg-rose-400/20 active:bg-rose-400/30"
onClick={clearDebugLogs}
>
清空视图
@@ -543,7 +543,7 @@ const DebugLogs = () => {
class={`grid w-full grid-cols-[108px_88px_92px_minmax(240px,1fr)_minmax(220px,1fr)] items-start gap-3 rounded-[16px] border px-3 py-2 text-left transition ${
selectedDebugEntryId() === entry.id
? "border-cyan-300/35 bg-cyan-400/10"
: "border-transparent bg-white/3 hover:border-white/10 hover:bg-white/6"
: "border-transparent bg-white/3 hover:border-white/10 hover:bg-white/6 active:bg-white/10"
}`}
onClick={() => setSelectedDebugEntryId(entry.id)}
>
@@ -590,7 +590,7 @@ const DebugLogs = () => {
class={`rounded-full border px-3 py-1.5 text-xs transition ${
selectedDetailTab() === tab.id
? "border-cyan-300/35 bg-cyan-400/12 text-cyan-100"
: "border-white/10 bg-white/5 text-slate-300 hover:bg-white/10"
: "border-white/10 bg-white/5 text-slate-300 hover:bg-white/10 active:bg-white/20"
}`}
onClick={() => setSelectedDetailTab(tab.id)}
>

2
src/pages/logs/Logs.tsx
View File

@@ -198,7 +198,7 @@ const Logs = () => {
</Show>
<button
type="button"
class="rounded-full border border-rose-200 bg-[linear-gradient(135deg,rgba(255,241,242,0.95),rgba(255,255,255,0.9))] px-3.5 py-1.5 text-sm font-medium text-rose-600 transition hover:-translate-y-px hover:bg-rose-50"
class="rounded-full border border-rose-200 bg-[linear-gradient(135deg,rgba(255,241,242,0.95),rgba(255,255,255,0.9))] px-3.5 py-1.5 text-sm font-medium text-rose-600 transition hover:-translate-y-px hover:bg-rose-50 active:bg-rose-100 active:scale-[0.97]"
onClick={clearAllLogs}
>
清空全部日志

109
src/pages/settings/Setting.tsx
View File

@@ -138,123 +138,78 @@ const Setting = () => {
</div>
</div>
<div class="mt-4 grid min-h-0 flex-1 gap-4 xl:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
<section class="flex min-h-0 flex-col gap-4 overflow-y-auto pr-1">
<div class="rounded-[28px] border border-white/80 bg-white/85 p-5 shadow-[0_18px_50px_-28px_rgba(15,23,42,0.25)]">
<div class="flex items-center justify-between gap-4 border-b border-zinc-200 pb-4">
<div class="mt-4 min-h-0 flex-1 overflow-y-auto pr-1">
<div class="grid gap-4 xl:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
<div class="flex flex-col gap-4">
<div class="rounded-[28px] border border-white/80 bg-white/85 p-4 shadow-[0_18px_50px_-28px_rgba(15,23,42,0.25)]">
<div class="flex items-center justify-between gap-4">
<div>
<p class="text-lg font-semibold text-zinc-900">本地数据</p>
<p class="mt-1 text-sm text-zinc-500">
控制哪些数据会保存在本地，以及如何清理缓存
<p class="text-base font-semibold text-zinc-900">本地数据</p>
<p class="mt-0.5 text-xs text-zinc-500">
管理本地缓存数据
</p>
</div>
<button
type="button"
class="rounded-xl border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-600 transition hover:bg-rose-100"
class="rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-1.5 text-xs text-rose-600 transition hover:bg-rose-100 active:bg-rose-200"
onClick={() => settingsStore.getState().clearAllPersistedData()}
>
清空全部缓存
清空全部
</button>
</div>
<div class="mt-4 grid gap-4">
<div class="rounded-2xl border border-zinc-200 bg-zinc-50/80 p-4">
<div class="flex items-center justify-between gap-3">
<div class="mt-3 grid gap-2">
<div class="flex items-center justify-between gap-2 rounded-xl border border-zinc-200 bg-zinc-50/80 px-3 py-2">
<div>
<p class="font-medium text-zinc-900">账号缓存</p>
<p class="mt-1 text-sm text-zinc-500">
保留账号、课程和登录相关信息
</p>
</div>
<input
type="checkbox"
checked={state().persistAccounts}
onChange={(event) =>
settingsStore
.getState()
.setPersistSection(
"accounts",
event.currentTarget.checked,
)
}
/>
<p class="text-sm font-medium text-zinc-900">账号缓存</p>
<p class="text-xs text-zinc-500">账号、课程和登录信息</p>
</div>
<button
type="button"
class="mt-3 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 transition hover:bg-zinc-100"
class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200"
onClick={() =>
settingsStore.getState().clearPersistedSection("accounts")
}
>
清空账号缓存
清空
</button>
</div>
<div class="rounded-2xl border border-zinc-200 bg-zinc-50/80 p-4">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center justify-between gap-2 rounded-xl border border-zinc-200 bg-zinc-50/80 px-3 py-2">
<div>
<p class="font-medium text-zinc-900">记录缓存</p>
<p class="mt-1 text-sm text-zinc-500">
保留当前课程记录和筛选类型
</p>
</div>
<input
type="checkbox"
checked={state().persistRecords}
onChange={(event) =>
settingsStore
.getState()
.setPersistSection(
"records",
event.currentTarget.checked,
)
}
/>
<p class="text-sm font-medium text-zinc-900">记录缓存</p>
<p class="text-xs text-zinc-500">课程记录和筛选类型</p>
</div>
<button
type="button"
class="mt-3 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 transition hover:bg-zinc-100"
class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200"
onClick={() =>
settingsStore.getState().clearPersistedSection("records")
}
>
清空记录缓存
清空
</button>
</div>
<div class="rounded-2xl border border-zinc-200 bg-zinc-50/80 p-4">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center justify-between gap-2 rounded-xl border border-zinc-200 bg-zinc-50/80 px-3 py-2">
<div>
<p class="font-medium text-zinc-900">日志缓存</p>
<p class="mt-1 text-sm text-zinc-500">
保留任务日志历史，刷新后继续查看
</p>
</div>
<input
type="checkbox"
checked={state().persistLogs}
onChange={(event) =>
settingsStore
.getState()
.setPersistSection("logs", event.currentTarget.checked)
}
/>
<p class="text-sm font-medium text-zinc-900">日志缓存</p>
<p class="text-xs text-zinc-500">任务日志历史</p>
</div>
<button
type="button"
class="mt-3 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 transition hover:bg-zinc-100"
class="rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200"
onClick={() =>
settingsStore.getState().clearPersistedSection("logs")
}
>
清空日志缓存
清空
</button>
</div>
</div>
</div>
<div class="rounded-[28px] border border-white/80 bg-white/85 p-5 shadow-[0_18px_50px_-28px_rgba(15,23,42,0.25)]">
<div class="border-b border-zinc-200 pb-4">
<p class="text-lg font-semibold text-zinc-900">界面偏好</p>
<p class="mt-1 text-sm text-zinc-500">
根据你的使用习惯调整侧栏、日志和展示密度
@@ -419,9 +374,9 @@ const Setting = () => {
</div>
</div>
</div>
</section>
</div>
<section class="flex min-h-0 flex-col gap-4 overflow-y-auto pr-1">
<div class="flex flex-col gap-4">
<div class="rounded-[28px] border border-white/80 bg-white/85 p-5 shadow-[0_18px_50px_-28px_rgba(15,23,42,0.25)]">
<div class="border-b border-zinc-200 pb-4">
<p class="text-lg font-semibold text-zinc-900">Host 配置策略</p>
@@ -436,7 +391,7 @@ const Setting = () => {
<p class="font-medium text-zinc-900">添加本地 Host</p>
<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"
class="rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-700 transition hover:bg-zinc-100 active:bg-zinc-200 disabled:cursor-not-allowed disabled:opacity-60"
disabled={isLoadingRemoteHosts()}
onClick={() => void loadRemoteHosts()}
>
@@ -459,7 +414,7 @@ const Setting = () => {
</div>
<button
type="button"
class="mt-3 rounded-xl bg-cyan-500 px-4 py-2 text-sm text-white transition hover:bg-cyan-600"
class="mt-3 rounded-xl bg-cyan-500 px-4 py-2 text-sm text-white transition hover:bg-cyan-600 active:bg-cyan-700"
onClick={addLocalHost}
>
添加本地 Host
@@ -490,7 +445,7 @@ const Setting = () => {
</div>
<button
type="button"
class="rounded-lg border border-rose-200 px-3 py-1 text-xs text-rose-600 transition hover:bg-rose-50"
class="rounded-lg border border-rose-200 px-3 py-1 text-xs text-rose-600 transition hover:bg-rose-50 active:bg-rose-100"
onClick={() =>
settingsStore
.getState()
@@ -524,7 +479,7 @@ const Setting = () => {
</div>
</div>
</div>
</section>
</div>
</div>
</div>
);

112
src/service/wk.ts
View File

@@ -1,6 +1,5 @@
import type { Accessor } from "solid-js";
import http, {
DEFAULT_HTTP_TIMEOUT_MS,
createHttpClient,
type HttpClient,
} from "~/service/http";
@@ -13,6 +12,80 @@ export type RecordType = "" | "/work" | "/exam" | "/discuss";
export type StudyStatus = 1 | 2 | 3;
export type WorkListItem = {
id: string;
userId: string | number | null;
title: string;
topicNumber: string;
score: string;
type: string;
remarks: string;
addTime: string;
sequence: string;
nodeId: string;
courseId: string;
startTime: string;
endTime: string;
paperId: string;
createUserId: string;
isPrivate: string;
classList: string;
teacherType: string;
allow: string;
frequency: string;
scoringRules: string;
hasCollect: string;
lock: string | number | null;
schoolId: string;
parsing: string;
addDate: string;
name: string;
chapterId: string;
state: string;
submitTime: string;
finalScore: string;
typeName: string;
finishTime: string;
url: string;
};
export type ExamListItem = {
id: string;
userId: string | number | null;
title: string;
topicNumber: string;
score: string;
addTime: string;
nodeId: string;
courseId: string;
limitedTime: string;
sequence: string;
remarks: string;
paperId: string;
startTime: string;
endTime: string;
createUserId: string;
classList: string;
isPrivate: string;
teacherType: string;
allow: string;
frequency: string;
hasCollect: string;
schoolId: string;
parsing: string;
addDate: string;
random: string;
randData: unknown;
randNumber: string;
name: string;
chapterId: string;
state: string;
submitTime: string;
finalScore: string;
finishTime: string;
url: string;
};
type ApiResponse<T> = {
code: number;
message: string;
@@ -165,16 +238,33 @@ export type StudyRunnerPayload = {
onLog?: (message: string, accoundID: string) => void;
};
export type WorkListData = {
list: WorkListItem[];
page_info: PageInfo;
};
export type WorkListRes = ApiResponse<WorkListData>;
export type ExamListData = {
list: ExamListItem[];
page_info: PageInfo;
};
export type ExamListRes = ApiResponse<ExamListData>;
export type WkClient = {
userInfoApi: () => Promise<UserInfoRes>;
courseApi: (payload: CourseReq) => Promise<CourseRes>;
recordApi: (payload: RecordReq) => Promise<RecordRes>;
workListApi: (payload: RecordReq) => Promise<WorkListRes>;
examListApi: (payload: RecordReq) => Promise<ExamListRes>;
studyApi: (payload: StudyReq) => Promise<StudyRes>;
logoutApi: () => Promise<LogoutRes>;
};
const RECORD_API_TIMEOUT_MS = 60000;
const COURSE_API_TIMEOUT_MS = Math.max(DEFAULT_HTTP_TIMEOUT_MS, 30000);
// Course list can be slow on large accounts, use a longer timeout than default
const COURSE_API_TIMEOUT_MS = 30000;
export const loginApi = async (payload: LoginReq) => {
const res = await http.post<LoginRes>("/api/login", payload);
@@ -195,6 +285,22 @@ const createWkClientFromHttp = (client: HttpClient): WkClient => ({
timeout: RECORD_API_TIMEOUT_MS,
});
},
workListApi(payload) {
return client.post<WorkListRes>("/api/v2/record", {
...payload,
record_type: "/work",
}, {
timeout: RECORD_API_TIMEOUT_MS,
});
},
examListApi(payload) {
return client.post<ExamListRes>("/api/v2/record", {
...payload,
record_type: "/exam",
}, {
timeout: RECORD_API_TIMEOUT_MS,
});
},
studyApi(payload) {
return client.post<StudyRes>("/api/v2/study", payload);
},
@@ -313,7 +419,7 @@ export const runStudyQueue = async (_payload: StudyRunnerPayload) => {
continue;
}
if (resp.data.state != 0) {
if (resp.data.state !== 0) {
_payload.onLog?.(`⛔ 自动停止: ${resp.data.msg}`, _payload.accountId);
_payload.setIsRunningStudy();
return;

58
src/store/account.ts
View File

@@ -1,6 +1,6 @@
import { createStore } from "zustand/vanilla";
import { persist, createJSONStorage } from "zustand/middleware";
import type { CourseKind, RecordItem, RecordType } from "~/service/wk";
import type { CourseKind, RecordItem, RecordType, WorkListItem, ExamListItem } from "~/service/wk";
import type { CourseType } from "~/types/Course";
import type { userInfoType } from "~/types/Userinfo";
@@ -39,6 +39,8 @@ export type AccountItem = {
export type RecordCacheMap = Record<string, RecordItem[]>;
export type WorkExamCacheMap = Record<string, WorkListItem[] | ExamListItem[]>;
type PersistPreferences = {
persistAccounts: boolean;
persistRecords: boolean;
@@ -87,6 +89,9 @@ type AccountState = {
recordType: RecordType;
records: RecordItem[];
recordCacheMap: RecordCacheMap;
workList: WorkListItem[];
examList: ExamListItem[];
workExamCacheMap: WorkExamCacheMap;
studyLogsMap: Record<string, string[]>;
runningStudyMap: Record<string, boolean>;
studyHeartbeatMap: Record<string, number>;
@@ -97,6 +102,9 @@ type AccountState = {
setRecordType: (recordType: RecordType) => void;
setRecords: (records: RecordItem[]) => void;
setRecordCache: (cacheKey: string, records: RecordItem[]) => void;
setWorkList: (list: WorkListItem[]) => void;
setExamList: (list: ExamListItem[]) => void;
setWorkExamCache: (cacheKey: string, data: WorkListItem[] | ExamListItem[]) => void;
setAccountRunningStudy: (accountId: string, value: boolean) => void;
touchStudyHeartbeat: (accountId: string, timestamp?: number) => void;
clearStudyHeartbeat: (accountId: string) => void;
@@ -107,6 +115,9 @@ type AccountState = {
upsertAccount: (account: AccountItem) => void;
setAccountCourses: (accountId: string, courses: CourseType[]) => void;
removeAccount: (accountId: string) => void;
clearAllData: () => void;
clearRecordsData: () => void;
clearAccountsData: () => void;
};
export const accountStore = createStore<AccountState>()(
@@ -120,6 +131,9 @@ export const accountStore = createStore<AccountState>()(
recordType: "",
records: [],
recordCacheMap: {},
workList: [],
examList: [],
workExamCacheMap: {},
studyLogsMap: {},
runningStudyMap: {},
studyHeartbeatMap: {},
@@ -138,6 +152,15 @@ export const accountStore = createStore<AccountState>()(
[cacheKey]: records,
},
})),
setWorkList: (list) => set({ workList: list }),
setExamList: (list) => set({ examList: list }),
setWorkExamCache: (cacheKey, data) =>
set((state) => ({
workExamCacheMap: {
...state.workExamCacheMap,
[cacheKey]: data,
},
})),
setAccountRunningStudy: (accountId, value) =>
set((state) => ({
runningStudyMap: {
@@ -189,6 +212,39 @@ export const accountStore = createStore<AccountState>()(
set({
studyLogsMap: {},
}),
clearAllData: () =>
set({
accounts: [],
selectedAccountId: "",
expandedAccountId: "",
selectedCourseId: null,
courseKind: "run" as CourseKind,
recordType: "" as RecordType,
records: [],
recordCacheMap: {},
workList: [],
examList: [],
workExamCacheMap: {},
studyLogsMap: {},
runningStudyMap: {},
studyHeartbeatMap: {},
}),
clearRecordsData: () =>
set({
records: [],
recordCacheMap: {},
workList: [],
examList: [],
workExamCacheMap: {},
selectedCourseId: null,
}),
clearAccountsData: () =>
set({
accounts: [],
selectedAccountId: "",
expandedAccountId: "",
selectedCourseId: null,
}),
upsertAccount: (account) =>
set((state) => ({
accounts: [

43
src/store/settings.ts
View File

@@ -1,5 +1,6 @@
import { createStore } from "zustand/vanilla";
import { createJSONStorage, persist } from "zustand/middleware";
import { accountStore } from "~/store/account";
export type HostOption = {
label: string;
@@ -37,6 +38,7 @@ type SettingsState = {
};
const accountStorageKey = "account-storage";
const settingsStorageKey = "settings-storage";
type PersistedStorage = {
state?: Record<string, unknown>;
version?: number;
@@ -115,53 +117,40 @@ export const settingsStore = createStore<SettingsState>()(
}
},
clearPersistedSection: (section) => {
const store = accountStore.getState();
if (section === "accounts") {
patchAccountStorage((state) => {
const {
accounts,
selectedAccountId,
expandedAccountId,
selectedCourseId,
records,
recordCacheMap,
studyLogsMap,
runningStudyMap,
...rest
} = state;
void accounts;
void selectedAccountId;
void expandedAccountId;
void selectedCourseId;
void records;
void recordCacheMap;
void studyLogsMap;
void runningStudyMap;
return rest;
});
store.clearAccountsData();
localStorage.removeItem(accountStorageKey);
}
if (section === "records") {
store.clearRecordsData();
patchAccountStorage((state) => {
const { records, recordCacheMap, selectedCourseId, ...rest } =
state;
const { records, recordCacheMap, workList, examList, workExamCacheMap, ...rest } = state;
void records;
void recordCacheMap;
void selectedCourseId;
void workList;
void examList;
void workExamCacheMap;
return rest;
});
}
if (section === "logs") {
store.clearAllStudyLogs();
patchAccountStorage((state) => {
const { studyLogsMap, runningStudyMap, ...rest } = state;
const { studyLogsMap, ...rest } = state;
void studyLogsMap;
void runningStudyMap;
return rest;
});
}
},
clearAllPersistedData: () => {
accountStore.getState().clearAllData();
localStorage.removeItem(accountStorageKey);
localStorage.removeItem(settingsStorageKey);
window.location.reload();
},
setDebugEnabled: (value) => set({ debugEnabled: value }),
setAutoScrollLogs: (value) => set({ autoScrollLogs: value }),