From f063ec564eb606d4f67c344b4a1429b34fc52202 Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Sun, 24 May 2026 21:21:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(ux):=20=E9=AA=A8=E6=9E=B6=E5=B1=8F?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=BB=84=E4=BB=B6=E4=B8=8E=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=85=A5=E5=9C=BA=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增 Skeleton 组件支持 text/card/table 三种变体，替换各页面
"加载中..." 文本为骨架屏，所有页面添加 fadeIn 入场动画。
---
 frontend/src/components/Skeleton.module.css | 56 +++++++++++++++++++++
 frontend/src/components/Skeleton.tsx        | 40 +++++++++++++++
 frontend/src/pages/GeneratePage.tsx         |  2 +-
 frontend/src/pages/LoginPage.tsx            |  2 +-
 frontend/src/pages/ProjectPage.tsx          |  5 +-
 frontend/src/pages/RegisterPage.tsx         |  2 +-
 frontend/src/pages/ResultPage.tsx           | 15 ++++--
 7 files changed, 114 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/Skeleton.module.css
 create mode 100644 frontend/src/components/Skeleton.tsx

diff --git a/frontend/src/components/Skeleton.module.css b/frontend/src/components/Skeleton.module.css
new file mode 100644
index 0000000..c05035f
--- /dev/null
+++ b/frontend/src/components/Skeleton.module.css
@@ -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;
+}
diff --git a/frontend/src/components/Skeleton.tsx b/frontend/src/components/Skeleton.tsx
new file mode 100644
index 0000000..b31486a
--- /dev/null
+++ b/frontend/src/components/Skeleton.tsx
@@ -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>
+  )
+}
diff --git a/frontend/src/pages/GeneratePage.tsx b/frontend/src/pages/GeneratePage.tsx
index cc0c415..9eee0aa 100644
--- a/frontend/src/pages/GeneratePage.tsx
+++ b/frontend/src/pages/GeneratePage.tsx
@@ -45,7 +45,7 @@ export default function GeneratePage() {
   }
 
   return (
-    <div className="container" style={{ paddingTop: 24, paddingBottom: 40 }}>
+    <div className="container page-enter" style={{ paddingTop: 24, paddingBottom: 40 }}>
       <h1 style={{ fontSize: 24, marginBottom: 32 }}>新建生成</h1>
 
       {/* 生成表单 */}
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 52de3a4..810f21a 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -27,7 +27,7 @@ export default function LoginPage() {
         justifyContent: 'center',
       }}
     >
-      <div className="card" style={{ width: 380, padding: 40 }}>
+      <div className="card page-enter" style={{ width: 380, padding: 40 }}>
         <h1 style={{ textAlign: 'center', marginBottom: 8, fontSize: 28 }}>gen2d</h1>
         <p
           style={{
diff --git a/frontend/src/pages/ProjectPage.tsx b/frontend/src/pages/ProjectPage.tsx
index 137ecb7..0755997 100644
--- a/frontend/src/pages/ProjectPage.tsx
+++ b/frontend/src/pages/ProjectPage.tsx
@@ -4,6 +4,7 @@ import { useProjectStore } from '../stores/project'
 import { getTasks } from '../api/project'
 import type { Task } from '../api/types'
 import StyleSelector from '../components/StyleSelector'
+import Skeleton from '../components/Skeleton'
 
 const STATUS_LABELS: Record<string, { label: string; color: string }> = {
   pending: { label: '等待中', color: 'var(--text-muted)' },
@@ -42,8 +43,8 @@ export default function ProjectPage() {
   }
 
   return (
-    <div className="container" style={{ paddingTop: 24, paddingBottom: 40 }}>
-      <h1 style={{ fontSize: 24, marginBottom: 32 }}>{loading ? '加载中...' : name}</h1>
+    <div className="container page-enter" style={{ paddingTop: 24, paddingBottom: 40 }}>
+      <h1 style={{ fontSize: 24, marginBottom: 32 }}>{loading ? <Skeleton variant="text" lines={1} /> : name}</h1>
 
       {/* 工程风格 */}
       <section className="card" style={{ marginBottom: 24 }}>
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index a6a009c..956459a 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -28,7 +28,7 @@ export default function RegisterPage() {
         justifyContent: 'center',
       }}
     >
-      <div className="card" style={{ width: 380, padding: 40 }}>
+      <div className="card page-enter" style={{ width: 380, padding: 40 }}>
         <h1 style={{ textAlign: 'center', marginBottom: 8, fontSize: 28 }}>gen2d</h1>
         <p
           style={{
diff --git a/frontend/src/pages/ResultPage.tsx b/frontend/src/pages/ResultPage.tsx
index 83738b1..9031397 100644
--- a/frontend/src/pages/ResultPage.tsx
+++ b/frontend/src/pages/ResultPage.tsx
@@ -3,6 +3,7 @@ import { Link, useParams } from 'react-router-dom'
 import { getTask, getAssets } from '../api/generate'
 import type { Asset, Task } from '../api/types'
 import AssetPreview from '../components/AssetPreview'
+import Skeleton from '../components/Skeleton'
 
 export default function ResultPage() {
   const { projectId = 'proj-default', taskId } = useParams()
@@ -23,8 +24,16 @@ export default function ResultPage() {
 
   if (loading) {
     return (
-      <div className="container" style={{ paddingTop: 40, textAlign: 'center' }}>
-        <p style={{ color: 'var(--text-secondary)' }}>加载中...</p>
+      <div className="container page-enter" style={{ paddingTop: 40 }}>
+        <div className="card" style={{ marginBottom: 24 }}>
+          <Skeleton variant="text" lines={1} />
+          <div style={{ marginTop: 16 }}>
+            <Skeleton variant="text" lines={4} />
+          </div>
+        </div>
+        <div className="card">
+          <Skeleton variant="card" />
+        </div>
       </div>
     )
   }
@@ -41,7 +50,7 @@ export default function ResultPage() {
   }
 
   return (
-    <div className="container" style={{ paddingTop: 24, paddingBottom: 40 }}>
+    <div className="container page-enter" style={{ paddingTop: 24, paddingBottom: 40 }}>
       <h1 style={{ fontSize: 24, marginBottom: 32 }}>生成结果</h1>
 
       {/* 任务信息 */}