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;
}
/* 错误页面样式 */