refactor(web): 采用 Button/Card 原语替换多处手搓样式

apps/web/components/projects/ProjectLibrary.tsx

@@ -16,7 +16,7 @@ import {
   type ProjectSort,
   type ProjectViewMode,
 } from "@/lib/projects/projects";
-import { buttonClass, cn } from "@/lib/ui/variants";
+import { buttonClass, cardClass, cn } from "@/lib/ui/variants";
 
 interface ProjectLibraryProps {
   projects: ProjectResponse[];
@@ -47,7 +47,11 @@ export function ProjectLibrary({ projects }: ProjectLibraryProps) {
 
   return (
     <div className="space-y-4">
-      <div className="grid gap-3 rounded border border-line bg-panel p-3 md:grid-cols-[1fr_auto_auto_auto] md:items-center">
+      <div
+        className={cardClass(
+          "grid gap-3 p-3 md:grid-cols-[1fr_auto_auto_auto] md:items-center",
+        )}
+      >
         <label className="relative block">
           <span className="sr-only">搜索作品</span>
           <Search
@@ -155,7 +159,10 @@ export function ProjectLibrary({ projects }: ProjectLibraryProps) {
           <li>
             <Link
               href="/projects/new"
-              className="flex items-center justify-center gap-2 rounded border border-dashed border-line bg-panel/70 px-4 py-3 text-sm text-cinnabar transition-colors hover:border-cinnabar hover:bg-panel"
+              className={buttonClass({
+                variant: "outline",
+                className: "w-full border-dashed px-4 py-3",
+              })}
             >
               <Plus className="h-4 w-4" aria-hidden="true" />
               新建作品
@@ -200,7 +207,10 @@ function NewProjectCard() {
   return (
     <Link
       href="/projects/new"
-      className="group flex h-full min-h-[176px] flex-col items-center justify-center rounded border border-dashed border-line bg-panel/70 text-center transition-colors hover:border-cinnabar hover:bg-panel"
+      className={buttonClass({
+        variant: "outline",
+        className: "group h-full min-h-[176px] flex-col border-dashed text-center",
+      })}
     >
       <span className="mb-3 flex h-10 w-10 items-center justify-center rounded bg-[var(--color-cinnabar-wash)] text-cinnabar transition-colors group-hover:bg-cinnabar group-hover:text-panel">
         <Plus className="h-5 w-5" aria-hidden="true" />