feat(ux): 骨架屏加载组件与页面入场动画

新增 Skeleton 组件支持 text/card/table 三种变体，替换各页面 "加载中..." 文本为骨架屏，所有页面添加 fadeIn 入场动画。
2026-05-24 21:21:52 +08:00
parent 60c752fad9
commit f063ec564e
7 changed files with 114 additions and 8 deletions
@@ -0,0 +1,56 @@
+.shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-base) 25%,
+    var(--skeleton-shine) 50%,
+    var(--skeleton-base) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeletonShine 1.5s infinite;
+  border-radius: var(--radius);
+}
+
+@keyframes skeletonShine {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.text {
+  height: 16px;
+  margin-bottom: 10px;
+}
+
+.textShort {
+  composes: text;
+  width: 60%;
+}
+
+.textMedium {
+  composes: text;
+  width: 80%;
+}
+
+.card {
+  height: 200px;
+  width: 100%;
+}
+
+.tableRow {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.tableCell {
+  height: 14px;
+  flex: 1;
+}
+
+.tableCellNarrow {
+  height: 14px;
+  width: 80px;
+}
@@ -0,0 +1,40 @@
+import styles from './Skeleton.module.css'
+
+interface SkeletonProps {
+  variant?: 'text' | 'card' | 'table'
+  lines?: number
+}
+
+export default function Skeleton({ variant = 'text', lines = 3 }: SkeletonProps) {
+  if (variant === 'card') {
+    return <div className={`${styles.shimmer} ${styles.card}`} />
+  }
+
+  if (variant === 'table') {
+    return (
+      <div>
+        {Array.from({ length: 5 }, (_, i) => (
+          <div key={i} className={styles.tableRow}>
+            <div className={`${styles.shimmer} ${styles.tableCell}`} />
+            <div className={`${styles.shimmer} ${styles.tableCellNarrow}`} />
+            <div className={`${styles.shimmer} ${styles.tableCellNarrow}`} />
+            <div className={`${styles.shimmer} ${styles.tableCellNarrow}`} />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  const widths = ['100%', '80%', '60%']
+  return (
+    <div>
+      {Array.from({ length: lines }, (_, i) => (
+        <div
+          key={i}
+          className={`${styles.shimmer} ${i === lines - 1 && lines > 1 ? styles.textShort : styles.text}`}
+          style={{ width: widths[i % widths.length] }}
+        />
+      ))}
+    </div>
+  )
+}