feat(ux): 骨架屏加载组件与页面入场动画
新增 Skeleton 组件支持 text/card/table 三种变体,替换各页面 "加载中..." 文本为骨架屏,所有页面添加 fadeIn 入场动画。
This commit is contained in:
@@ -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>
|
||||
|
||||
{/* 生成表单 */}
|
||||
|
||||
@@ -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={{
|
||||
|
||||
@@ -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 }}>
|
||||
|
||||
@@ -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={{
|
||||
|
||||
@@ -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>
|
||||
|
||||
{/* 任务信息 */}
|
||||
|
||||
Reference in New Issue
Block a user