40cc3fc9e3
- PageContainer wide 档 max-w-6xl→max-w-7xl；作品库改用 wide 档 - 作品库卡片网格 lg 三列基础上加 xl:grid-cols-4，宽屏铺满少留白 - 写作台正文测量 720→768px（约 42 中文字/行，仍舒适），收窄两侧空档
86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
import Link from "next/link";
|
||
import { BookOpen, PenLine, Plus } from "lucide-react";
|
||
|
||
import { AppShell } from "@/components/AppShell";
|
||
import { BackendDownNotice } from "@/components/BackendDownNotice";
|
||
import { ProjectLibrary } from "@/components/projects/ProjectLibrary";
|
||
import { PageContainer } from "@/components/ui/PageContainer";
|
||
import { PageHeader } from "@/components/ui/PageHeader";
|
||
import { fetchProjects } from "@/lib/api/server";
|
||
import type { ProjectResponse } from "@/lib/api/types";
|
||
import { buttonClass } from "@/lib/ui/variants";
|
||
|
||
// 作品库（Dashboard 入口，UX §6.1）。Server Component 读取。
|
||
export default async function DashboardPage() {
|
||
let projects: ProjectResponse[] = [];
|
||
let loadError = false;
|
||
try {
|
||
const data = await fetchProjects();
|
||
projects = data.projects ?? [];
|
||
} catch {
|
||
loadError = true;
|
||
}
|
||
|
||
return (
|
||
<AppShell>
|
||
<PageContainer width="wide">
|
||
<PageHeader
|
||
title="我的作品"
|
||
description="从一个灵感进入正文、设定、审稿与验收闭环。"
|
||
actions={
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<Link
|
||
href="/write"
|
||
className={buttonClass({ variant: "primary" })}
|
||
>
|
||
<PenLine className="h-4 w-4" aria-hidden="true" />
|
||
直接开始写
|
||
</Link>
|
||
<Link
|
||
href="/projects/new"
|
||
className={buttonClass({ variant: "secondary" })}
|
||
>
|
||
<Plus className="h-4 w-4" aria-hidden="true" />
|
||
先立项
|
||
</Link>
|
||
</div>
|
||
}
|
||
/>
|
||
|
||
{loadError ? (
|
||
<BackendDownNotice />
|
||
) : projects.length === 0 ? (
|
||
// 首次进入的暖深色编辑部英雄（对标 DESIGN.md cta-band-dark；仅零作品时出现，不干扰工作库）。
|
||
<div className="rounded-xl border border-line/50 bg-callout px-8 py-14 text-center shadow-paper sm:px-12 sm:py-20">
|
||
<BookOpen className="mx-auto h-9 w-9 text-cinnabar" aria-hidden="true" />
|
||
<h2 className="mt-5 font-serif text-display-sm text-on-callout">
|
||
从一句灵感，写成一本书
|
||
</h2>
|
||
<p className="mx-auto mt-3 max-w-md text-body leading-7 text-on-callout-soft">
|
||
直接开始写，落笔即成书；或先立项，从一句灵感搭好设定、大纲再动笔。
|
||
</p>
|
||
<div className="mt-7 flex flex-wrap items-center justify-center gap-2">
|
||
<Link
|
||
href="/write"
|
||
className={buttonClass({ variant: "primary", size: "lg" })}
|
||
>
|
||
<PenLine className="h-4 w-4" aria-hidden="true" />
|
||
直接开始写
|
||
</Link>
|
||
<Link
|
||
href="/projects/new"
|
||
className={buttonClass({ variant: "secondary", size: "lg" })}
|
||
>
|
||
<Plus className="h-4 w-4" aria-hidden="true" />
|
||
先立项
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<ProjectLibrary projects={projects} />
|
||
)}
|
||
</PageContainer>
|
||
</AppShell>
|
||
);
|
||
}
|