feat: improve app ui and project metadata

apps/web/components/codex/CodexPage.tsx

@@ -1,10 +1,16 @@
 "use client";
 
 import { useMemo, useState } from "react";
+import { Clock3, Globe2, Sparkles, UserRound } from "lucide-react";
 
 import { AppShell } from "@/components/AppShell";
 import { CharacterGenerator } from "@/components/generation/CharacterGenerator";
 import { WorldGenerator } from "@/components/generation/WorldGenerator";
+import { Badge } from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
+import { EmptyState } from "@/components/ui/EmptyState";
+import { PageHeader } from "@/components/ui/PageHeader";
 import type {
   CharacterCardView,
   ProjectResponse,
@@ -60,6 +66,10 @@ export function CodexPage({
       activeNav="codex"
     >
       <div className="flex h-[calc(100vh-var(--chrome,4rem))] flex-col p-4">
+        <PageHeader
+          title="设定库"
+          description="人物、世界观与时间线共同构成写作时的真相源。AI 生成内容也要先预览、再确认入库。"
+        />
         <div className="mb-4 flex items-center gap-2" role="tablist">
           {TABS.map((t) => (
             <button
@@ -82,20 +92,28 @@ export function CodexPage({
         <div className="min-h-0 flex-1 overflow-auto">
           {tab === "characters" ? (
             <div className="flex flex-col gap-4">
-              <section className="rounded border border-line bg-panel p-3">
-                <h3 className="mb-2 font-serif text-sm text-ink">
+              <Card as="section" className="p-4">
+                <h3 className="mb-3 font-serif text-sm text-ink">
                   已入库人物（{characters.length}）
                 </h3>
                 {characters.length > 0 ? (
-                  <ul className="flex flex-col gap-2">
+                  <ul className="grid grid-cols-1 gap-3 lg:grid-cols-2">
                     {characters.map((c, i) => (
                       <li
                         key={`${c.name}-${i}`}
-                        className="rounded bg-bg px-2 py-1.5 text-xs text-ink-soft"
+                        className="rounded border border-line bg-bg p-3 text-sm"
                       >
-                        <span className="text-ink">
-                          {c.name}（{c.role}）
-                        </span>
+                        <div className="mb-2 flex items-center gap-2">
+                          <span className="flex h-8 w-8 items-center justify-center rounded bg-[var(--color-cinnabar-wash)] text-cinnabar">
+                            <UserRound className="h-4 w-4" aria-hidden="true" />
+                          </span>
+                          <div className="min-w-0">
+                            <p className="truncate font-serif text-base text-ink">
+                              {c.name}
+                            </p>
+                            <p className="text-xs text-ink-soft">{c.role}</p>
+                          </div>
+                        </div>
                         {c.relations && c.relations.length > 0 ? (
                           <ul className="mt-1 flex flex-wrap gap-1">
                             {c.relations.map((r, j) => (
@@ -113,24 +131,43 @@ export function CodexPage({
                     ))}
                   </ul>
                 ) : (
-                  <p className="text-xs text-ink-soft">
-                    暂无入库人物，先在下方生成并入库。
-                  </p>
+                  <EmptyState
+                    icon={UserRound}
+                    title="暂无入库人物"
+                    description="先生成或手动整理主角、配角与关系，再让写作上下文稳定引用。"
+                    action={
+                      <Button
+                        onClick={() =>
+                          document
+                            .getElementById("character-generator")
+                            ?.scrollIntoView({ block: "center" })
+                        }
+                        variant="primary"
+                        size="sm"
+                      >
+                        <Sparkles className="h-4 w-4" aria-hidden="true" />
+                        生成角色
+                      </Button>
+                    }
+                    className="bg-bg/50"
+                  />
                 )}
-              </section>
-              <CharacterGenerator
-                projectId={project.id}
-                onIngested={(_, cards) =>
-                  setSessionCards((prev) => [...prev, ...cards])
-                }
-              />
+              </Card>
+              <div id="character-generator">
+                <CharacterGenerator
+                  projectId={project.id}
+                  onIngested={(_, cards) =>
+                    setSessionCards((prev) => [...prev, ...cards])
+                  }
+                />
+              </div>
             </div>
           ) : null}
 
           {tab === "world" ? (
             <div className="flex flex-col gap-4">
-              <section className="rounded border border-line bg-panel p-3">
-                <h3 className="mb-2 font-serif text-sm text-ink">
+              <Card as="section" className="p-4">
+                <h3 className="mb-3 font-serif text-sm text-ink">
                   已入库世界观（{initialWorldEntities.length}）
                 </h3>
                 {initialWorldEntities.length > 0 ? (
@@ -141,12 +178,16 @@ export function CodexPage({
                         className="rounded border border-line bg-bg p-3 text-sm"
                       >
                         <header className="mb-2 flex items-center gap-2">
+                          <Globe2
+                            className="h-4 w-4 text-cinnabar"
+                            aria-hidden="true"
+                          />
                           <span className="font-serif text-base text-ink">
                             {entity.name}
                           </span>
-                          <span className="rounded bg-panel px-2 py-0.5 text-xs text-ink-soft">
+                          <Badge>
                             {entity.type}
-                          </span>
+                          </Badge>
                         </header>
                         {worldEntityRules(entity).length > 0 ? (
                           <ul className="flex list-disc flex-col gap-1 pl-5 text-ink-soft">
@@ -161,19 +202,40 @@ export function CodexPage({
                     ))}
                   </div>
                 ) : (
-                  <p className="text-xs text-ink-soft">
-                    暂无入库世界观，可在下方生成预览参考。
-                  </p>
+                  <EmptyState
+                    icon={Globe2}
+                    title="暂无入库世界观"
+                    description="先沉淀硬规则、地理、势力与能力边界，减少后续章节设定漂移。"
+                    action={
+                      <Button
+                        onClick={() =>
+                          document
+                            .getElementById("world-generator")
+                            ?.scrollIntoView({ block: "center" })
+                        }
+                        variant="primary"
+                        size="sm"
+                      >
+                        <Sparkles className="h-4 w-4" aria-hidden="true" />
+                        生成世界观
+                      </Button>
+                    }
+                    className="bg-bg/50"
+                  />
                 )}
-              </section>
-              <WorldGenerator projectId={project.id} />
+              </Card>
+              <div id="world-generator">
+                <WorldGenerator projectId={project.id} />
+              </div>
             </div>
           ) : null}
 
           {tab === "timeline" ? (
-            <div className="rounded border border-dashed border-line bg-panel p-6 text-center text-sm text-ink-soft">
-              时间线为派生视图（P2），将由章节摘要 + 伏笔窗口自动汇总，敬请期待。
-            </div>
+            <EmptyState
+              icon={Clock3}
+              title="时间线尚未启用"
+              description="时间线会从章节摘要、伏笔窗口和验收记录派生，后续可用于全书一致性扫描。"
+            />
           ) : null}
         </div>
       </div>