fix: 产品弹窗优化

Yi.Ai.Vue3/src/components/ProductPackage/NewbieGuide.vue

@@ -75,6 +75,26 @@ function goToTaobao() {
           </div>
         </div>
 
+        <!-- 或者分割线 -->
+        <div v-if="false" class="divider-section">
+          <span class="divider-line" />
+          <span class="divider-text">或者</span>
+          <span class="divider-line" />
+        </div>
+
+        <!-- 二维码区域 -->
+        <div v-if="false" class="qr-code-section">
+          <div class="qr-code-title">
+            扫码购买
+          </div>
+          <div class="qr-code-box">
+            <img :src="taobaoConfig.taobaoQr" alt="淘宝二维码" class="qr-code-image">
+            <p class="qr-code-tip">
+              打开手机淘宝扫一扫
+            </p>
+          </div>
+        </div>
+
         <!-- 温馨提示 -->
         <div class="tips-box">
           <p class="tips-title">
@@ -137,6 +157,68 @@ function goToTaobao() {
       flex-direction: column;
       gap: 14px;
 
+      // 二维码区域
+      .qr-code-section {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 20px;
+        background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+        border-radius: 12px;
+        border: 2px solid #bae6fd;
+
+        .qr-code-title {
+          font-size: 16px;
+          font-weight: 700;
+          color: #0369a1;
+          margin-bottom: 16px;
+        }
+
+        .qr-code-box {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          background: white;
+          padding: 16px;
+          border-radius: 10px;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+          .qr-code-image {
+            width: 180px;
+            height: 180px;
+            object-fit: contain;
+            border-radius: 8px;
+          }
+
+          .qr-code-tip {
+            margin: 12px 0 0 0;
+            font-size: 13px;
+            color: #0369a1;
+            font-weight: 600;
+          }
+        }
+      }
+
+      // 分割线
+      .divider-section {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin: 4px 0;
+
+        .divider-line {
+          flex: 1;
+          height: 1px;
+          background: linear-gradient(to right, transparent, #d1d5db, transparent);
+        }
+
+        .divider-text {
+          font-size: 13px;
+          color: #9ca3af;
+          font-weight: 500;
+        }
+      }
+
       .purchase-card {
         background: #f7f8fa;
         border-radius: 10px;
@@ -257,6 +339,27 @@ function goToTaobao() {
       .newbie-body {
         gap: 12px;
 
+        .qr-code-section {
+          padding: 16px;
+
+          .qr-code-title {
+            font-size: 15px;
+          }
+
+          .qr-code-box {
+            padding: 12px;
+
+            .qr-code-image {
+              width: 160px;
+              height: 160px;
+            }
+
+            .qr-code-tip {
+              font-size: 12px;
+            }
+          }
+        }
+
         .purchase-card {
           padding: 14px;
           border-radius: 8px;

Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { CircleCheck, Loading } from '@element-plus/icons-vue';
 import { computed } from 'vue';
+import { promotionConfig } from '@/config/constants.ts';
 import { useUserStore } from '@/stores';
 import { showContactUs } from '@/utils/contact-us.ts';
-import { promotionConfig } from '@/config/constants.ts';
 
 interface PackageItem {
   id: number;
@@ -171,43 +171,45 @@ const selectedPackage = computed(() => {
       </div>
     </div>
 
-    <!-- Token包累计充值优惠提示 -->
-    <div v-if="packageType === 'token'" class="recharge-tip-card">
-      <div class="tip-icon">
-        💝
-      </div>
-      <div class="tip-content">
-        <div class="tip-title">
-          累计充值优惠
-        </div>
-        <div class="tip-desc">
-          充值越多，优惠越多，长期使用更划算
-        </div>
-      </div>
-    </div>
-
-    <!-- 联系客服卡片 -->
-    <div class="contact-service-card">
-      <div style="flex: 1;">
-        <p style="color: #f97316;font-weight: 800;margin: 0 0 10px 0;">
-          {{ promotionConfig.rechargeDiscount }}
-        </p>
-        <p style="margin: 0 0 10px 0;color: #78350f;">
-          {{ promotionConfig.vipServiceTip }}
-        </p>
-        <el-button
-          type="success"
-          size="small"
-          @click="contactService"
-        >
-          <el-icon><i-ep-service /></el-icon>
-          联系客服
-        </el-button>
-      </div>
-    </div>
-
     <!-- 权益预览 -->
     <div class="benefits-preview">
+      <!-- Token包累计充值优惠提示 -->
+      <div v-if="packageType === 'token'" class="recharge-tip-card">
+        <div class="tip-icon">
+          💝
+        </div>
+        <div class="tip-content">
+          <div class="tip-title">
+            累计充值优惠
+          </div>
+          <div class="tip-desc">
+            充值越多，优惠越多，长期使用更划算
+          </div>
+        </div>
+      </div>
+      <br>
+
+      <!-- 联系客服卡片 -->
+      <div class="contact-service-card">
+        <div style="flex: 1;">
+          <p style="color: #f97316;font-weight: 800;margin: 0 0 10px 0;">
+            {{ promotionConfig.rechargeDiscount }}
+          </p>
+          <p style="margin: 0 0 10px 0;color: #78350f;">
+            {{ promotionConfig.vipServiceTip }}
+          </p>
+          <el-button
+            type="success"
+            size="small"
+            @click="contactService"
+          >
+            <el-icon><i-ep-service /></el-icon>
+            联系客服
+          </el-button>
+        </div>
+      </div>
+      <br>
+
       <div class="section-title">
         专属权益
       </div>
@@ -222,15 +224,21 @@ const selectedPackage = computed(() => {
       </ul>
 
       <!-- 会员套餐显示模型库入口 -->
-      <div v-if="packageType === 'member'" class="model-library-section">
+      <div class="model-library-section">
         <el-divider />
         <div class="model-library-card">
           <div class="card-icon">
-            <el-icon :size="32"><i-ep-box /></el-icon>
+            <el-icon :size="32">
+              <i-ep-box />
+            </el-icon>
           </div>
           <div class="card-content">
-            <h4 class="card-title">查看支持的模型</h4>
+            <h4 class="card-title">
-            <p class="card-desc">查看意心AI支持的所有模型列表及详细信息</p>
+              查看支持的模型
+            </h4>
+            <p class="card-desc">
+              查看意心AI支持的所有模型列表及详细信息
+            </p>
           </div>
           <el-button
             type="primary"
@@ -238,7 +246,9 @@ const selectedPackage = computed(() => {
             @click="goToModelLibrary"
           >
             前往模型库
-            <el-icon class="ml-1"><i-ep-arrow-right /></el-icon>
+            <el-icon class="ml-1">
+              <i-ep-arrow-right />
+            </el-icon>
           </el-button>
         </div>
       </div>
@@ -479,10 +489,16 @@ const selectedPackage = computed(() => {
             <el-divider />
             <div class="model-library-card-mobile">
               <div class="card-header-mobile">
-                <el-icon :size="24"><i-ep-box /></el-icon>
+                <el-icon :size="24">
-                <h4 class="card-title-mobile">查看支持的模型</h4>
+                  <i-ep-box />
+                </el-icon>
+                <h4 class="card-title-mobile">
+                  查看支持的模型
+                </h4>
               </div>
-              <p class="card-desc-mobile">查看意心AI支持的所有模型列表及详细信息</p>
+              <p class="card-desc-mobile">
+                查看意心AI支持的所有模型列表及详细信息
+              </p>
               <el-button
                 type="primary"
                 class="goto-btn-mobile"
@@ -490,7 +506,9 @@ const selectedPackage = computed(() => {
                 @click="goToModelLibrary"
               >
                 前往模型库
-                <el-icon class="ml-1"><i-ep-arrow-right /></el-icon>
+                <el-icon class="ml-1">
+                  <i-ep-arrow-right />
+                </el-icon>
               </el-button>
             </div>
           </div>
@@ -537,8 +555,8 @@ const selectedPackage = computed(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 15px;
+  margin-top: 0;
-  padding: 16px;
+  padding: 12px;
   background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
   border-radius: 8px;
   border: 1px solid #fbbf24;
@@ -548,19 +566,41 @@ const selectedPackage = computed(() => {
 .mobile-layout {
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 16px;
 
   .package-list {
     display: grid;
     grid-template-columns: 1fr;
     gap: 12px;
+    max-height: 400px;
+    overflow-y: auto;
+    padding-right: 4px;
+
+    /* 优化滚动条样式 */
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #f1f5f9;
+      border-radius: 2px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 2px;
+
+      &:hover {
+        background: #94a3b8;
+      }
+    }
   }
 
   .package-card {
     position: relative;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
-    padding: 16px;
+    padding: 12px;
     transition: all 0.3s;
     cursor: pointer;
 
@@ -779,29 +819,29 @@ const selectedPackage = computed(() => {
   .recharge-tip-card {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 10px;
-    padding: 12px 16px;
+    padding: 10px 12px;
     background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
     border-radius: 8px;
     border: 1px solid #fbbf24;
-    margin-top: 16px;
+    margin-top: 0;
 
     .tip-icon {
-      font-size: 24px;
+      font-size: 22px;
     }
 
     .tip-content {
       flex: 1;
 
       .tip-title {
-        font-size: 14px;
+        font-size: 13px;
         font-weight: 700;
         color: #78350f;
-        margin-bottom: 4px;
+        margin-bottom: 3px;
       }
 
       .tip-desc {
-        font-size: 12px;
+        font-size: 11px;
         color: #92400e;
         line-height: 1.4;
       }
@@ -811,7 +851,28 @@ const selectedPackage = computed(() => {
   .benefits-preview {
     background-color: #f9fafb;
     border-radius: 8px;
-    padding: 16px;
+    padding: 12px;
+    max-height: 320px;
+    overflow-y: auto;
+
+    /* 优化滚动条样式 */
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #f1f5f9;
+      border-radius: 2px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 2px;
+
+      &:hover {
+        background: #94a3b8;
+      }
+    }
 
     .section-title {
       font-weight: 600;
@@ -826,14 +887,16 @@ const selectedPackage = computed(() => {
       .benefit-item {
         display: flex;
         align-items: flex-start;
-        margin-bottom: 8px;
+        margin-bottom: 6px;
-        font-size: 14px;
+        font-size: 13px;
         color: #4b5563;
         white-space: normal;
+        line-height: 1.4;
 
         .dot {
           color: #f97316;
-          margin-right: 8px;
+          margin-right: 6px;
+          margin-top: 2px;
         }
 
         .benefit-name {
@@ -843,15 +906,16 @@ const selectedPackage = computed(() => {
     }
 
     .model-library-section {
-      margin-top: 16px;
+      margin-top: 12px;
 
       .model-library-card {
         display: flex;
-        align-items: center;
+        flex-direction: column;
-        gap: 16px;
+        align-items: stretch;
-        padding: 16px;
+        gap: 10px;
+        padding: 12px;
         background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
-        border-radius: 12px;
+        border-radius: 10px;
         border: 2px solid #bae6fd;
         transition: all 0.3s;
 
@@ -862,29 +926,22 @@ const selectedPackage = computed(() => {
         }
 
         .card-icon {
-          display: flex;
+          display: none;
-          align-items: center;
-          justify-content: center;
-          width: 56px;
-          height: 56px;
-          background: white;
-          border-radius: 12px;
-          color: #667eea;
-          flex-shrink: 0;
         }
 
         .card-content {
           flex: 1;
+          text-align: center;
 
           .card-title {
-            margin: 0 0 4px 0;
+            margin: 0 0 8px 0;
-            font-size: 16px;
+            font-size: 15px;
             font-weight: 700;
             color: #1a1a1a;
           }
 
           .card-desc {
-            margin: 0;
+            margin: 0 0 12px 0;
             font-size: 13px;
             color: #606266;
             line-height: 1.5;
@@ -894,6 +951,7 @@ const selectedPackage = computed(() => {
         .goto-btn {
           flex-shrink: 0;
           font-weight: 600;
+          width: 100%;
 
           .ml-1 {
             margin-left: 4px;
@@ -949,8 +1007,8 @@ const selectedPackage = computed(() => {
 .desktop-layout {
   .package-cards-container {
     max-height: 500px;
-    overflow-y: auto;
+    //overflow-y: auto;
-    overflow-x: hidden;
+    //overflow-x: hidden;
     padding-right: 8px;
 
     &::-webkit-scrollbar {

Yi.Ai.Vue3/src/config/constants.ts

@@ -10,7 +10,6 @@ export const contactConfig = {
     customerService: '/src/assets/images/wx.png', // 客服微信二维码
     communityGroup: '/src/assets/images/wx-group-qr.jpg', // 交流群二维码
     afterSalesGroup: '', // 售后群二维码
-    taobaoQr: '/src/assets/images/taobao-qr.png', // 淘宝店铺二维码
   },
 };
 
@@ -24,6 +23,8 @@ export const taobaoConfig = {
   // 淘口令
   code: '【淘宝】https://e.tb.cn/h.7RqUAtwFh8V5ywg?tk=m7KGUc6DoNQ HU293 「ClaudeCode/Codex/Gemini Ai聚合API服务/会员Token包/人工售后」\n'
     + '点击链接直接打开 或者 淘宝搜索直接打开',
+  taobaoQr: '/src/assets/images/taobao-qr.png', // 淘宝店铺二维码
+
 };
 
 /**