feat(web): 立项向导确认步/故事结构分段控件/书名必填提示 + 作品卡键盘焦点可见 + 作品库分段切换

apps/web/components/projects/ProjectLibrary.tsx

@@ -2,11 +2,12 @@
 
 import Link from "next/link";
 import { Clock3, LayoutGrid, List, Plus, Search } from "lucide-react";
-import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { ProjectCard } from "@/components/ProjectCard";
 import { Button } from "@/components/ui/Button";
 import { EmptyState } from "@/components/ui/EmptyState";
+import { SegmentedControl } from "@/components/ui/SegmentedControl";
 import { Select } from "@/components/ui/Select";
 import { TextInput } from "@/components/ui/TextInput";
 import type { ProjectResponse } from "@/lib/api/types";
@@ -16,7 +17,7 @@ import {
   type ProjectSort,
   type ProjectViewMode,
 } from "@/lib/projects/projects";
-import { buttonClass, cardClass, cn } from "@/lib/ui/variants";
+import { buttonClass, cardClass } from "@/lib/ui/variants";
 
 interface ProjectLibraryProps {
   projects: ProjectResponse[];
@@ -84,29 +85,39 @@ export function ProjectLibrary({ projects }: ProjectLibraryProps) {
           <option value="title">按标题</option>
           <option value="genre">按题材</option>
         </Select>
-        <div
-          className="inline-flex justify-self-start rounded border border-line bg-bg p-1 md:justify-self-end"
-          role="group"
-          aria-label="视图密度"
-        >
-          <ViewButton
-            label="卡片"
-            active={viewMode === "cards"}
-            onClick={() => setView("cards")}
-          >
-            <LayoutGrid className="h-4 w-4" aria-hidden="true" />
-          </ViewButton>
-          <ViewButton
-            label="紧凑"
-            active={viewMode === "compact"}
-            onClick={() => setView("compact")}
-          >
-            <List className="h-4 w-4" aria-hidden="true" />
-          </ViewButton>
-        </div>
+        <SegmentedControl
+          ariaLabel="视图密度"
+          className="justify-self-start md:justify-self-end"
+          value={viewMode}
+          onChange={setView}
+          options={[
+            {
+              value: "cards",
+              label: (
+                <>
+                  <LayoutGrid className="h-4 w-4" aria-hidden="true" />
+                  <span className="sr-only">卡片</span>
+                </>
+              ),
+            },
+            {
+              value: "compact",
+              label: (
+                <>
+                  <List className="h-4 w-4" aria-hidden="true" />
+                  <span className="sr-only">紧凑</span>
+                </>
+              ),
+            },
+          ]}
+        />
       </div>
 
-      <p className="text-xs text-ink-soft">
+      <p
+        className="text-xs text-ink-soft"
+        role="status"
+        aria-live="polite"
+      >
         <Clock3 className="mr-1 inline h-3.5 w-3.5" aria-hidden="true" />
         显示 {visibleProjects.length} / {projects.length} 个作品
       </p>
@@ -174,35 +185,6 @@ export function ProjectLibrary({ projects }: ProjectLibraryProps) {
   );
 }
 
-function ViewButton({
-  active,
-  label,
-  children,
-  onClick,
-}: {
-  active: boolean;
-  label: string;
-  children: ReactNode;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      aria-label={label}
-      aria-pressed={active}
-      onClick={onClick}
-      className={cn(
-        "rounded px-2 py-1.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cinnabar/35",
-        active
-          ? "bg-panel text-cinnabar shadow-paper"
-          : "text-ink-soft hover:text-cinnabar",
-      )}
-    >
-      {children}
-    </button>
-  );
-}
-
 function NewProjectCard() {
   return (
     <Link