diff --git a/src/pages/history/index.config.ts b/src/pages/history/index.config.ts index 91eb8b1..ce6c61f 100644 --- a/src/pages/history/index.config.ts +++ b/src/pages/history/index.config.ts @@ -1,5 +1,5 @@ export default definePageConfig({ - navigationBarTitleText: '历史记录', + navigationBarTitleText: '我的作品', navigationBarBackgroundColor: '#ffffff', navigationBarTextStyle: 'black', backgroundColorTop: '#ffffff', diff --git a/src/pages/history/index.css b/src/pages/history/index.css index 0844529..3b101f9 100644 --- a/src/pages/history/index.css +++ b/src/pages/history/index.css @@ -19,45 +19,42 @@ } .loading-state { - text-align: center; - padding: 120px 40px; background: #fff; - border-radius: 32px; - margin: 40px 32px; - box-shadow: 0 4px 16px rgb(0 0 0 / 8%); - border: 1px solid #f0f0f0; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; } .loading-text { font-size: 32px; color: #666; font-weight: 500; + margin: 0 auto; } .empty-state { text-align: center; - padding: 120px 40px; - background: #fff; - border-radius: 32px; - margin: 40px 32px; - box-shadow: 0 4px 16px rgb(0 0 0 / 8%); - border: 1px solid #f0f0f0; + height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0 auto; } .empty-icon { - font-size: 160px; + font-size: 56px; display: block; margin-bottom: 32px; opacity: 0.8; - filter: drop-shadow(0 4px 8px rgb(0 0 0 / 10%)); } .empty-text { - font-size: 40px; - color: #333; + font-size: 24px; + color: #B9B9B9; display: block; margin-bottom: 16px; - font-weight: 600; } .empty-desc { diff --git a/src/pages/history/index.tsx b/src/pages/history/index.tsx index b6b3608..aa204a0 100644 --- a/src/pages/history/index.tsx +++ b/src/pages/history/index.tsx @@ -134,9 +134,8 @@ export default function History() { ) : records.length === 0 ? ( - - 暂无历史记录 - 开始创作你的第一个作品吧!{'\n'}所有的处理记录都会保存在这里 + ☁️ + 暂无创作历史,去发布 ) : ( records.map(record => { diff --git a/src/pages/result/components/GeneratingComponent.tsx b/src/pages/result/components/GeneratingComponent.tsx index 6df4a0b..5599c87 100644 --- a/src/pages/result/components/GeneratingComponent.tsx +++ b/src/pages/result/components/GeneratingComponent.tsx @@ -69,15 +69,18 @@ const GeneratingComponent: React.FC = ({ task }) => { 🎨 )} + {/* 图片遮罩层 */} + {/* 光扫描动画 */} + {Math.round(progress)}% {/* 状态文本 */} - 生成中... {Math.round(progress)}% + 生成中... 内容生成中,请耐心等待 diff --git a/src/pages/result/index.css b/src/pages/result/index.css index a9eb5a2..3f724d2 100644 --- a/src/pages/result/index.css +++ b/src/pages/result/index.css @@ -108,7 +108,7 @@ justify-content: center; font-size: 28px; font-weight: 400; - color: #1d1f22; + color: #919191; } /* 生成中内容区域 */ @@ -132,7 +132,7 @@ .progress-circle { width: 280px; height: 280px; - border-radius: 20px; + border-radius: 30px; position: relative; display: flex; align-items: center; @@ -153,7 +153,7 @@ .progress-inner { width: 100%; height: 100%; - border-radius: 20px; + border-radius: 30px; background: white; display: flex; align-items: center; @@ -175,7 +175,7 @@ inset: 0; width: 100%; height: 100%; - border-radius: 20px; + border-radius: 30px; z-index: 3; } @@ -185,7 +185,7 @@ inset: 0; width: 100%; height: 100%; - border-radius: 20px; + border-radius: 30px; background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%); display: flex; align-items: center; @@ -193,11 +193,26 @@ z-index: 3; } +/* 进度遮罩层 */ +.progress-overlay { + position: absolute; + inset: 0; + border-radius: 30px; + background: linear-gradient( + 135deg, + rgb(0 0 0 / 20%) 0%, + rgb(0 0 0 / 10%) 50%, + rgb(0 0 0 / 30%) 100% + ); + z-index: 4; + pointer-events: none; +} + /* 光扫描动画 */ .scan-light { position: absolute; inset: 0; - border-radius: 20px; + border-radius: 30px; background: linear-gradient( 90deg, transparent 0%, @@ -206,10 +221,27 @@ rgb(255 255 255 / 8%) 60%, transparent 100% ); - z-index: 4; + z-index: 5; animation: scan 2s ease-in-out infinite; pointer-events: none; } +/* 进度文字 */ +.scan-progress { + font-size: 56px; + color: #FFFFFF; + font-weight: 700; + z-index: 6; + /* 文字阴影增强可读性 */ + text-shadow: + 0 2px 4px rgb(0 0 0 / 50%), + 0 0 8px rgb(0 0 0 / 30%), + 0 0 16px rgb(0 0 0 / 20%); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + pointer-events: none; +} @keyframes scan { 0% { @@ -238,15 +270,15 @@ } .status-title { - font-size: 36px; + font-size: 40px; font-weight: 500; - color: #333; + color: #1D1F22; margin-bottom: 12px; } .status-subtitle { - font-size: 28px; - color: #666; + font-size: 24px; + color: #919191; } /* 生成中操作按钮 */ @@ -257,13 +289,13 @@ .later-btn { width: 320px; height: 80px; - background: #333; - border-radius: 40px; + background: #1D1F22; + border-radius: 28px; display: flex; align-items: center; justify-content: center; color: white; - font-size: 32px; + font-size: 28px; font-weight: 500; } @@ -273,15 +305,16 @@ } .tips-label { - font-size: 24px; - color: #999; + font-size: 16px; + font-weight: 500; + color: #B9B9B9; letter-spacing: 2px; margin-bottom: 12px; } .tips-text { - font-size: 28px; - color: #666; + font-size: 16px; + color: #919191; } /* 错误页面样式 */