style: update app and friends-photo styles for improved layout and loading indicators

src/app.css

@@ -26,7 +26,7 @@ html, body {
 
 .app-content {
   flex: 1;
-  overflow: hidden;
+  overflow-y: auto;
   padding-bottom: 60px; /* 为底部导航留出空间 */
 }
 

src/pages/friends-photo/index.css

@@ -52,28 +52,14 @@
 }
 
 .submit-button.disabled {
-  background-color: #ccc;
   cursor: not-allowed;
   border: none;
   outline: none;
 }
 
-/* 加载动画 */
+.loading-container {
-.loading-spinner {
+  display: flex;
-  width: 16px;
+  align-items: center;
-  height: 16px;
+  justify-content: center;
-  border: 2px solid rgb(255 255 255 / 30%);
+  gap: 8px;
-  border-top: 2px solid white;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
 }

src/pages/friends-photo/index.tsx

@@ -8,7 +8,6 @@ import { i18nManager } from '../../i18n/manager';
 // 导入组件
 import UploadCard from './components/UploadCard';
 
-
 import './index.css';
 
 export default function FriendsPhoto() {
@@ -56,19 +55,17 @@ export default function FriendsPhoto() {
     try {
       // 将两个图片URL用逗号分隔
       const { hostname, protocol, port } = window.location;
-      let baseUrl = `${protocol}//${hostname}`
+      let baseUrl = `${protocol}//${hostname}`;
       if (hostname === 'localhost') {
-        baseUrl = `${protocol}//${hostname}:${port}`
+        baseUrl = `${protocol}//${hostname}:${port}`;
       }
-      const cbUrl = `${baseUrl}/result`
+      const cbUrl = `${baseUrl}/result`;
       const checkout = await serverSdk.createCheckoutSession({
         templateCode: templateCode,
         metadata: {
           cb_url: cbUrl,
-          imageUrls: [
+          imageUrls: [image1, image2],
-            image1, image2
+        },
-          ]
-        }
       });
       if (checkout && checkout.url) {
         window.location.href = checkout.url;
@@ -100,8 +97,7 @@ export default function FriendsPhoto() {
         >
           {loading ? (
             <>
-              <div className="loading-spinner" />
+              <div className="loading-spinner" style={{ margin: 'auto' }} />
-              <div className="submit-text">{t('friendsPhoto.generating')}</div>
             </>
           ) : (
             <div className="submit-text">

src/pages/history/index.css

@@ -27,7 +27,6 @@
 }
 
 .history-list {
-  height: 100vh;
   padding: 0;
   position: relative;
   z-index: 2;
@@ -96,8 +95,8 @@
 }
 
 .item-thumbnail {
-  width: 160px;
+  width: 80px;
-  height: 160px;
+  height: 80px;
   border-radius: 12px;
   margin-right: 20px;
   flex-shrink: 0;
@@ -110,6 +109,7 @@
   height: 100%;
   border-radius: 12px;
   background: #f5f5f5;
+  object-fit: cover;
 }
 
 .thumbnail-placeholder {
@@ -253,7 +253,6 @@
 
 .item-time {
   font-size: 14px;
-  color: #b9b9b9;
   font-weight: 400;
   opacity: 0.7;
 }

src/pages/home/index.css

@@ -25,7 +25,6 @@
 .home-scroll {
   flex: 1;
   height: 100%;
-  overflow-y: auto;
 }
 
 .home-header {