From e9d82e11ccaed8245145f1748a03cd5489460336 Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Thu, 12 Jun 2025 22:32:01 +0800
Subject: [PATCH] =?UTF-8?q?update=C2=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docker-compose.yml             |   2 +-
 src/App.vue                    |  39 ++---
 src/views/SubscriptionView.vue | 285 +++++++++++++++++----------------
 3 files changed, 160 insertions(+), 166 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index d60dd58..494575f 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -3,7 +3,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: tradus-web:1.4.2
+    image: tradus-web:1.4.3
     container_name: tradus-web
     ports:
       - '6000:80'
diff --git a/src/App.vue b/src/App.vue
index af275d4..dc89660 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -628,9 +628,6 @@ onUnmounted(() => {
         <!-- 桌面端用户信息 -->
         <div class="desktop-user-info" v-if="isAuthenticated">
           <div class="user-info-box" @click.stop="openUserInfoModal">
-            <div class="user-avatar">
-              <span>{{ userInfo?.mail?.charAt(0)?.toUpperCase() || 'U' }}</span>
-            </div>
             <div class="user-info-details">
               <span class="user-email-display" :title="userInfo?.mail">{{
                 userInfo?.mail || '未设置邮箱'
@@ -647,8 +644,8 @@ onUnmounted(() => {
             <svg
               class="info-icon"
               viewBox="0 0 24 24"
-              width="16"
-              height="16"
+              width="20"
+              height="20"
               stroke="currentColor"
               stroke-width="2"
               fill="none"
@@ -668,9 +665,6 @@ onUnmounted(() => {
         <!-- 移动端用户信息 -->
         <div class="mobile-user-info" v-if="isAuthenticated">
           <div class="user-info-box" @click.stop="openUserInfoModal">
-            <div class="user-avatar">
-              <span>{{ userInfo?.mail?.charAt(0)?.toUpperCase() || 'U' }}</span>
-            </div>
             <div class="user-info-details">
               <span class="user-email-display" :title="userInfo?.mail">{{
                 userInfo?.mail || '未设置邮箱'
@@ -687,8 +681,8 @@ onUnmounted(() => {
             <svg
               class="info-icon"
               viewBox="0 0 24 24"
-              width="16"
-              height="16"
+              width="20"
+              height="20"
               stroke="currentColor"
               stroke-width="2"
               fill="none"
@@ -1537,7 +1531,7 @@ body {
 .mobile-user-info .user-info-box {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  justify-content: space-between;
   cursor: pointer;
   padding: 0.75rem;
   border-radius: var(--border-radius);
@@ -1552,26 +1546,10 @@ body {
   border-color: rgba(51, 85, 255, 0.1);
 }
 
-.mobile-user-info .user-avatar {
-  width: 2.75rem;
-  height: 2.75rem;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--color-accent) 0%, rgba(51, 85, 255, 0.8) 100%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.1rem;
-  color: white;
-  font-weight: bold;
-  box-shadow: 0 3px 10px rgba(51, 85, 255, 0.25);
-  border: 2px solid rgba(255, 255, 255, 0.2);
-}
-
 .mobile-user-info .user-info-details {
   display: flex;
   flex-direction: column;
   flex: 1;
-  padding: 0.15rem 0;
 }
 
 .mobile-user-info .user-nickname {
@@ -1774,7 +1752,7 @@ body {
 }
 
 .desktop-user-info .user-info-box:hover .user-avatar {
-  transform: scale(1.05) rotate(5deg);
+  transform: scale(1.05);
   box-shadow: 0 5px 15px rgba(51, 85, 255, 0.35);
 }
 
@@ -2467,11 +2445,14 @@ html {
 .info-icon {
   color: var(--color-text-secondary);
   transition: all 0.2s ease;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
 }
 
 .user-info-box:hover .info-icon {
   color: var(--color-accent);
-  transform: rotate(90deg);
+  transform: rotate(15deg);
 }
 
 /* 用户邮箱显示样式 */
diff --git a/src/views/SubscriptionView.vue b/src/views/SubscriptionView.vue
index 098a6e4..1e02fef 100644
--- a/src/views/SubscriptionView.vue
+++ b/src/views/SubscriptionView.vue
@@ -1,25 +1,8 @@
 <template>
   <div class="subscription-view">
-    <!-- 页面头部 -->
-    <section class="hero-section">
-      <div class="hero-content">
-        <h1 class="hero-title">选择您的<span class="accent">会员计划</span></h1>
-        <p class="hero-subtitle">解锁全部功能，享受无限制的AI分析服务</p>
-      </div>
-    </section>
-
     <!-- 订阅计划 -->
     <section class="subscription-plans">
       <div class="container">
-        <!-- VIP订阅提示 -->
-        <div class="subscription-tips">
-          <div class="tips-icon">⚠️</div>
-          <div class="tips-content">
-            <span class="tips-text"
-              >如果你已经是VIP，现在购买将覆盖你之前的订阅，时间不做叠加。</span
-            >
-          </div>
-        </div>
         <div class="plans-grid">
           <!-- 普通会员计划 -->
           <div class="plan-card basic-plan">
@@ -385,104 +368,56 @@ const confirmSubscription = async () => {
 
 <style scoped>
 .subscription-view {
-  min-height: 100vh;
+  height: 100vh;
   background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
-/* 页面头部 */
-.hero-section {
-  padding: 4rem 2rem 2rem;
-  text-align: center;
-}
-
-.hero-content {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.hero-title {
-  font-size: 3rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.accent {
-  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.hero-subtitle {
-  font-size: 1.25rem;
-  color: var(--text-secondary);
-  margin-bottom: 2rem;
+@media (max-width: 768px) {
+  .subscription-view {
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: auto;
+    min-height: 100vh;
+    position: static;
+    -webkit-overflow-scrolling: touch; /* 启用iOS平滑滚动 */
+  }
 }
 
 /* 订阅计划 */
 .subscription-plans {
-  padding: 2rem;
-}
-
-/* VIP订阅提示样式 */
-.subscription-tips {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1rem 1.25rem;
-  background: linear-gradient(135deg, #fef3c7, #fde68a);
-  border: 1px solid #f59e0b;
-  border-radius: 12px;
-  margin-bottom: 2rem;
-  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.1);
-  max-width: 800px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.subscription-tips .tips-icon {
-  font-size: 1.25rem;
-  flex-shrink: 0;
-}
-
-.subscription-tips .tips-content {
   flex: 1;
-}
-
-.subscription-tips .tips-text {
-  font-size: 0.95rem;
-  color: #92400e;
-  line-height: 1.5;
-  font-weight: 500;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
 }
 
 .container {
   max-width: 1200px;
   margin: 0 auto;
+  width: 100%;
 }
 
 .plans-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 2rem;
-  margin-bottom: 4rem;
   justify-items: center;
   max-width: 900px;
-  margin-left: auto;
-  margin-right: auto;
+  margin: 0 auto;
+  width: 100%;
 }
 
 .plan-card {
   background: #ffffff;
-  border-radius: 1.5rem;
-  padding: 2rem;
+  border-radius: 1rem;
+  padding: 1.5rem;
   border: 2px solid #f1f5f9;
   transition: all 0.3s ease;
   position: relative;
@@ -490,7 +425,7 @@ const confirmSubscription = async () => {
   width: 100%;
   max-width: 400px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-  min-height: 580px;
+  height: 520px;
   display: flex;
   flex-direction: column;
 }
@@ -540,17 +475,18 @@ const confirmSubscription = async () => {
 
 .plan-header {
   text-align: center;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
+  flex-shrink: 0;
 }
 
 .premium-plan .plan-header,
 .basic-plan .plan-header {
-  min-height: 120px;
+  min-height: 100px;
 }
 
 .plan-badge {
@@ -632,15 +568,16 @@ const confirmSubscription = async () => {
 /* 价格显示 */
 .plan-pricing {
   text-align: center;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
+  flex-shrink: 0;
 }
 
 .price-display {
-  margin-bottom: 1.5rem;
+  margin-bottom: 1rem;
 }
 
 .price {
-  font-size: 3rem;
+  font-size: 2.5rem;
   font-weight: 700;
   color: var(--primary-color);
 }
@@ -704,7 +641,15 @@ const confirmSubscription = async () => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
+  overflow: hidden;
+}
+
+/* 移动端允许功能列表滚动 */
+@media (max-width: 768px) {
+  .plan-features {
+    overflow: visible;
+  }
 }
 
 .features-list {
@@ -717,9 +662,9 @@ const confirmSubscription = async () => {
 .feature-item {
   display: flex;
   align-items: center;
-  padding: 0.75rem 0;
+  padding: 0.6rem 0;
   color: var(--text-primary);
-  font-size: 1rem;
+  font-size: 0.95rem;
 }
 
 .feature-item.highlight {
@@ -738,14 +683,15 @@ const confirmSubscription = async () => {
 /* 订阅按钮 */
 .plan-button {
   width: 100%;
-  padding: 1rem 2rem;
+  padding: 0.875rem 1.5rem;
   border: none;
   border-radius: 0.75rem;
-  font-size: 1.1rem;
+  font-size: 1rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   margin-top: auto;
+  flex-shrink: 0;
 }
 
 .premium-button {
@@ -931,44 +877,64 @@ const confirmSubscription = async () => {
 
 /* 响应式设计 */
 @media (max-width: 768px) {
-  .hero-title {
-    font-size: 2rem;
+  .subscription-plans {
+    padding: 2rem 1.5rem 3rem;
+    justify-content: flex-start;
+    align-items: stretch;
+    overflow: visible;
+    height: auto;
+    min-height: auto;
   }
 
-  .hero-subtitle {
-    font-size: 1rem;
+  .container {
+    overflow: visible;
+    height: auto;
   }
 
   .plans-grid {
     grid-template-columns: 1fr;
-    gap: 1.5rem;
+    gap: 2rem;
+    max-width: 420px;
+    height: auto;
   }
 
   .plan-card {
     padding: 1.5rem;
+    height: auto;
+    min-height: 500px;
+    max-width: 420px;
+    margin: 0 auto 2rem auto;
+    overflow: visible;
+  }
+
+  .plan-card:last-child {
+    margin-bottom: 0;
+  }
+
+  .plan-features {
+    overflow: visible;
+    height: auto;
+  }
+
+  .features-list {
+    overflow: visible;
+  }
+
+  .plan-title {
+    font-size: 1.5rem;
   }
 
   .price {
-    font-size: 2.5rem;
+    font-size: 2.2rem;
   }
 
-  /* 移动端订阅提示样式 */
-  .subscription-tips {
-    padding: 0.875rem 1rem;
-    margin-bottom: 1.5rem;
-    gap: 0.5rem;
-  }
-
-  .subscription-tips .tips-icon {
-    font-size: 1.1rem;
-  }
-
-  .subscription-tips .tips-text {
+  .feature-item {
+    padding: 0.6rem 0;
     font-size: 0.9rem;
   }
 
   .confirm-dialog {
-    padding: 1.5rem;
+    padding: 1rem;
     margin: 1rem;
   }
 
@@ -978,35 +944,82 @@ const confirmSubscription = async () => {
 }
 
 @media (max-width: 480px) {
-  .hero-section {
-    padding: 2rem 1rem 1rem;
+  .subscription-plans {
+    padding: 1.5rem 1rem 3rem;
+    overflow: visible;
   }
 
-  .subscription-plans {
-    padding: 1rem;
+  .plans-grid {
+    max-width: 340px;
+    gap: 1.5rem;
   }
 
   .plan-card {
-    padding: 1rem;
+    padding: 1.25rem;
+    height: auto;
+    min-height: 450px;
+    max-width: 340px;
+    overflow: visible;
+  }
+
+  .plan-features {
+    overflow: visible;
+    margin-bottom: 1.5rem;
+  }
+
+  .plan-title {
+    font-size: 1.3rem;
   }
 
   .price {
     font-size: 2rem;
   }
 
-  /* 小屏幕订阅提示样式 */
-  .subscription-tips {
-    padding: 0.75rem 0.875rem;
-    margin-bottom: 1.25rem;
-    gap: 0.5rem;
-  }
-
-  .subscription-tips .tips-icon {
-    font-size: 1rem;
-  }
-
-  .subscription-tips .tips-text {
+  .feature-item {
+    padding: 0.5rem 0;
     font-size: 0.85rem;
   }
+
+  .premium-plan .plan-header,
+  .basic-plan .plan-header {
+    min-height: 80px;
+  }
+}
+
+@media (max-width: 360px) {
+  .subscription-plans {
+    padding: 1rem 0.75rem 2.5rem;
+    overflow: visible;
+  }
+
+  .plans-grid {
+    max-width: 300px;
+    gap: 1.5rem;
+  }
+
+  .plan-card {
+    padding: 1rem;
+    min-height: 420px;
+    max-width: 300px;
+    overflow: visible;
+  }
+
+  .plan-features {
+    overflow: visible;
+    margin-bottom: 1rem;
+  }
+
+  .plan-title {
+    font-size: 1.2rem;
+  }
+
+  .price {
+    font-size: 1.8rem;
+  }
+
+  .feature-item {
+    padding: 0.4rem 0;
+    font-size: 0.8rem;
+  }
 }
 </style>