feat: 霓虹都市→白日梦境 + 渐变网格→云石纹理 — 两个白色浅色主题登录页重写

2026-05-27 21:53:27 +08:00
1 parent b5739ba955
commit 5a61babd33
@@ -0,0 +1,65 @@
+export function SkeletonCard({ count = 4 }: { count?: number }) {
+  return (
+    <div className="grid grid-cols-4 gap-4">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="dg-card p-4 animate-pulse">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-lg bg-[var(--dg-bg-tertiary)]" />
+            <div className="flex-1 space-y-2">
+              <div className="h-6 w-12 bg-[var(--dg-bg-tertiary)] rounded" />
+              <div className="h-3 w-16 bg-[var(--dg-bg-tertiary)] rounded" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function SkeletonTable({ rows = 5, cols = 6 }: { rows?: number; cols?: number }) {
+  return (
+    <div className="dg-card animate-pulse">
+      <div className="p-0">
+        <div className="flex gap-4 px-5 py-3 border-b border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)]">
+          {Array.from({ length: cols }).map((_, i) => (
+            <div key={i} className="h-4 flex-1 bg-[var(--dg-bg-primary)] rounded max-w-[120px]" />
+          ))}
+        </div>
+        {Array.from({ length: rows }).map((_, r) => (
+          <div key={r} className="flex gap-4 px-5 py-3.5 border-b border-[var(--dg-border-light)]">
+            {Array.from({ length: cols }).map((_, c) => (
+              <div key={c} className="h-4 flex-1 bg-[var(--dg-bg-tertiary)] rounded max-w-[120px]" />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function SkeletonDetail() {
+  return (
+    <div className="space-y-5 animate-pulse max-w-5xl">
+      <div className="flex items-center gap-4">
+        <div className="w-9 h-9 rounded-lg bg-[var(--dg-bg-tertiary)]" />
+        <div className="space-y-2">
+          <div className="h-7 w-48 bg-[var(--dg-bg-tertiary)] rounded" />
+          <div className="h-4 w-32 bg-[var(--dg-bg-tertiary)] rounded" />
+        </div>
+      </div>
+      <div className="grid grid-cols-2 gap-5">
+        <div className="dg-card p-5 space-y-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <div key={i} className="flex justify-between py-2">
+              <div className="h-4 w-24 bg-[var(--dg-bg-tertiary)] rounded" />
+              <div className="h-4 w-32 bg-[var(--dg-bg-tertiary)] rounded" />
+            </div>
+          ))}
+        </div>
+        <div className="dg-card p-5">
+          <div className="h-48 bg-[var(--dg-bg-tertiary)] rounded" />
+        </div>
+      </div>
+    </div>
+  );
+}