feat(ui): content-first shelf redesign — responsive cover grid, hover overlays, format badges, skeletons, sticky blurred top bar, brand login, SVG icon set, animated toasts

2026-09-08 13:05:40 +08:00
parent 02ac3e5f7f
commit 32b9d3a136
11 changed files with 468 additions and 128 deletions
@@ -0,0 +1,122 @@
+import type { SVGProps } from "react";
+
+// 统一 1.7px 描边的线性图标(Phosphor 风格),尺寸由外部 className 控制
+function Svg({ children, ...p }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.7}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      {...p}
+    >
+      {children}
+    </svg>
+  );
+}
+
+type P = SVGProps<SVGSVGElement>;
+
+export const IconBooks = (p: P) => (
+  <Svg {...p}>
+    <path d="M4 5.5A1.5 1.5 0 0 1 5.5 4H10a1.5 1.5 0 0 1 1.5 1.5V18a2 2 0 0 0-2-2H5.5A1.5 1.5 0 0 1 4 14.5v-9Z" />
+    <path d="M13 8h4.5A1.5 1.5 0 0 1 19 9.5v8A1.5 1.5 0 0 1 17.5 19H13" />
+    <path d="M7 4v12M16 12.5v4" />
+  </Svg>
+);
+
+export const IconSearch = (p: P) => (
+  <Svg {...p}>
+    <circle cx="11" cy="11" r="6.5" />
+    <path d="m16 16 4 4" />
+  </Svg>
+);
+
+export const IconRefresh = (p: P) => (
+  <Svg {...p}>
+    <path d="M20 12a8 8 0 1 1-2.34-5.66" />
+    <path d="M20 4v4.5h-4.5" />
+  </Svg>
+);
+
+export const IconScan = (p: P) => (
+  <Svg {...p}>
+    <path d="M4 8V5.5A1.5 1.5 0 0 1 5.5 4H8M16 4h2.5A1.5 1.5 0 0 1 20 5.5V8M20 16v2.5a1.5 1.5 0 0 1-1.5 1.5H16M8 20H5.5A1.5 1.5 0 0 1 4 18.5V16" />
+    <path d="M7 12h10" />
+  </Svg>
+);
+
+export const IconX = (p: P) => (
+  <Svg {...p}>
+    <path d="m6 6 12 12M18 6 6 18" />
+  </Svg>
+);
+
+export const IconTrash = (p: P) => (
+  <Svg {...p}>
+    <path d="M4.5 6.5h15M9.5 6.5V4.75A.75.75 0 0 1 10.25 4h3.5a.75.75 0 0 1 .75.75v1.75M6.5 6.5l.8 12a1.5 1.5 0 0 0 1.5 1.4h6.4a1.5 1.5 0 0 0 1.5-1.4l.8-12" />
+  </Svg>
+);
+
+export const IconLogout = (p: P) => (
+  <Svg {...p}>
+    <path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14" />
+    <path d="M10 8 6 12l4 4M6 12h10" />
+  </Svg>
+);
+
+export const IconArrowLeft = (p: P) => (
+  <Svg {...p}>
+    <path d="M20 12H4m0 0 6-6m-6 6 6 6" />
+  </Svg>
+);
+
+export const IconBookOpen = (p: P) => (
+  <Svg {...p}>
+    <path d="M12 6.5C10.5 5 8.5 4.5 4 4.5v13c4.5 0 6.5.5 8 2 1.5-1.5 3.5-2 8-2v-13c-4.5 0-6.5.5-8 2Z" />
+    <path d="M12 6.5v13" />
+  </Svg>
+);
+
+export const IconUser = (p: P) => (
+  <Svg {...p}>
+    <circle cx="12" cy="8" r="3.5" />
+    <path d="M5 19.5c1.2-3 3.7-4.5 7-4.5s5.8 1.5 7 4.5" />
+  </Svg>
+);
+
+export const IconLock = (p: P) => (
+  <Svg {...p}>
+    <rect x="5.5" y="10.5" width="13" height="9" rx="1.5" />
+    <path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5M12 14v2.5" />
+  </Svg>
+);
+
+export const IconCheck = (p: P) => (
+  <Svg {...p}>
+    <path d="m5 12.5 4.5 4.5L19 7" />
+  </Svg>
+);
+
+export const IconAlert = (p: P) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="8.5" />
+    <path d="M12 7.5V13m0 3.5v.01" />
+  </Svg>
+);
+
+export const IconClock = (p: P) => (
+  <Svg {...p}>
+    <circle cx="12" cy="12" r="8.5" />
+    <path d="M12 7.5V12l3 2" />
+  </Svg>
+);
+
+export const IconFolder = (p: P) => (
+  <Svg {...p}>
+    <path d="M4 6.5A1.5 1.5 0 0 1 5.5 5h3.2a1.5 1.5 0 0 1 1.2.6l.9 1.2a1.5 1.5 0 0 0 1.2.6h6.5A1.5 1.5 0 0 1 20 9.5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5v-11Z" />
+  </Svg>
+);