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

feat: add multi-account log center

Browse Source
This commit is contained in:
zhilv
2026-03-27 17:55:01 +08:00
parent 45d4f2b008
commit 58d551eda6
8 changed files with 509 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,11 +38,20 @@ interface CourseWorkspaceProps {
}
const EmptyState = (props: { children: JSX.Element }) => (
<div class="rounded-[24px] border border-dashed border-zinc-300 bg-white px-4 py-8 text-center text-zinc-500">
<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;
@@ -98,7 +107,7 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
: "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-[24px] border border-zinc-200 bg-[linear-gradient(180deg,_rgba(248,250,252,0.9),_rgba(255,255,255,0.95))]">
<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="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>
@@ -113,16 +122,16 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
>
<For each={props.selectedCourseList}>
{(course) => {
const selected = course.id === props.selectedCourseId;
const selected = () => course.id === props.selectedCourseId;
return (
<button
type="button"
class={
selected
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"
? "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"
@@ -151,7 +160,7 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
: "grid min-h-0 gap-4 xl:grid-rows-[minmax(0,1fr)_260px]"
}
>
<div class="flex min-h-0 flex-col overflow-hidden rounded-[24px] border border-zinc-200 bg-[linear-gradient(180deg,_rgba(248,250,252,0.9),_rgba(255,255,255,0.95))]">
<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>
@@ -218,7 +227,7 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
</Show>
<Show when={!props.recordsLoading && props.recordError}>
<div class="rounded-[24px] border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-600">
<div class="rounded-3xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-600">
{props.recordError}
</div>
</Show>
@@ -284,7 +293,7 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
</div>
</div>
<div class="flex min-h-0 flex-col overflow-hidden rounded-[24px] border border-zinc-200 bg-white">
<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>
@@ -325,10 +334,10 @@ const CourseWorkspace = (props: CourseWorkspaceProps) => {
{(log, index) => (
<p>
[{index() + 1}]{" "}
{props.showLogTimestamps
? `${new Date().toLocaleTimeString()} `
{props.showLogTimestamps && extractTimestamp(log)
? `${extractTimestamp(log)} `
: ""}
{log}
{stripTimestamp(log)}
</p>
)}
</For>