style: css

src/pages/history/index.config.ts

@@ -1,5 +1,5 @@
 export default definePageConfig({
-  navigationBarTitleText: '历史记录',
+  navigationBarTitleText: '我的作品',
   navigationBarBackgroundColor: '#ffffff',
   navigationBarTextStyle: 'black',
   backgroundColorTop: '#ffffff',

src/pages/history/index.css

@@ -19,45 +19,42 @@
 }
 
 .loading-state {
-  text-align: center;
-  padding: 120px 40px;
   background: #fff;
-  border-radius: 32px;
+  display: flex;
-  margin: 40px 32px;
+  align-items: center;
-  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
+  justify-content: center;
-  border: 1px solid #f0f0f0;
+  height: 100vh;
 }
 
 .loading-text {
   font-size: 32px;
   color: #666;
   font-weight: 500;
+  margin: 0 auto;
 }
 
 .empty-state {
   text-align: center;
-  padding: 120px 40px;
+  height: 100vh;
-  background: #fff;
+  display: flex;
-  border-radius: 32px;
+  flex-direction: column;
-  margin: 40px 32px;
+  align-items: center;
-  box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
+  justify-content: center;
-  border: 1px solid #f0f0f0;
+  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;
+  font-size: 24px;
-  color: #333;
+  color: #B9B9B9;
   display: block;
   margin-bottom: 16px;
-  font-weight: 600;
 }
 
 .empty-desc {

src/pages/history/index.tsx

@@ -134,9 +134,8 @@ export default function History() {
             </View>
           ) : records.length === 0 ? (
             <View className="empty-state">
-              <Text className="empty-icon">✨</Text>
+              <Text className="empty-icon">☁️</Text>
-              <Text className="empty-text">暂无历史记录</Text>
+              <Text className="empty-text">暂无创作历史，去发布</Text>
-              <Text className="empty-desc">开始创作你的第一个作品吧！{'\n'}所有的处理记录都会保存在这里</Text>
             </View>
           ) : (
             records.map(record => {

src/pages/result/components/GeneratingComponent.tsx

@@ -69,15 +69,18 @@ const GeneratingComponent: React.FC<GeneratingComponentProps> = ({ task }) => {
                   <View className="placeholder-icon">🎨</View>
                 </View>
               )}
+              {/* 图片遮罩层 */}
+              <View className="progress-overlay" />
               {/* 光扫描动画 */}
               <View className="scan-light" />
+              <View className="scan-progress" >{Math.round(progress)}%</View>
             </View>
           </View>
         </View>
 
         {/* 状态文本 */}
         <View className="status-section">
-          <View className="status-title">生成中... {Math.round(progress)}%</View>
+          <View className="status-title">生成中...</View>
           <View className="status-subtitle">内容生成中，请耐心等待</View>
         </View>
 

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;
+  font-size: 24px;
-  color: #666;
+  color: #919191;
 }
 
 /* 生成中操作按钮 */
@@ -257,13 +289,13 @@
 .later-btn {
   width: 320px;
   height: 80px;
-  background: #333;
+  background: #1D1F22;
-  border-radius: 40px;
+  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;
+  font-size: 16px;
-  color: #999;
+  font-weight: 500;
+  color: #B9B9B9;
   letter-spacing: 2px;
   margin-bottom: 12px;
 }
 
 .tips-text {
-  font-size: 28px;
+  font-size: 16px;
-  color: #666;
+  color: #919191;
 }
 
 /* 错误页面样式 */