fix: 产品弹窗优化

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

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+const emit = defineEmits(['close']);
+
+function goToActivation() {
+  emit('close');
+  window.location.href = '/console/activation';
+}
+</script>
+
+<template>
+  <div class="activation-guide-container">
+    <div class="activation-content">
+      <div class="guide-icon">
+        🎁
+      </div>
+      <h3 class="guide-title">
+        激活码兑换
+      </h3>
+      <p class="guide-desc">
+        如果您持有意心AI的会员激活码或Token兑换码，<br>请点击下方按钮前往控制台进行兑换。
+      </p>
+      <el-button
+        type="primary"
+        size="large"
+        class="redeem-jump-btn"
+        round
+        @click="goToActivation"
+      >
+        前往兑换中心
+      </el-button>
+
+      <div class="guide-tips">
+        <p>💡 兑换成功后权益将立即生效</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.activation-guide-container {
+  padding: 40px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  background: linear-gradient(to bottom, #fff, #fdfdfd);
+  border-radius: 8px;
+
+  .activation-content {
+    text-align: center;
+    max-width: 400px;
+
+    .guide-icon {
+      font-size: 64px;
+      margin-bottom: 24px;
+      animation: float-icon 3s ease-in-out infinite;
+    }
+
+    .guide-title {
+      font-size: 24px;
+      font-weight: 800;
+      color: #2c3e50;
+      margin-bottom: 16px;
+    }
+
+    .guide-desc {
+      color: #606266;
+      line-height: 1.6;
+      margin-bottom: 32px;
+      font-size: 15px;
+    }
+
+    .redeem-jump-btn {
+      width: 200px;
+      height: 48px;
+      font-size: 16px;
+      font-weight: bold;
+      letter-spacing: 1px;
+      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+      border: none;
+      box-shadow: 0 4px 12px rgba(255, 117, 140, 0.3);
+      transition: all 0.3s;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 16px rgba(255, 117, 140, 0.4);
+      }
+    }
+
+    .guide-tips {
+      margin-top: 24px;
+      font-size: 13px;
+      color: #909399;
+      display: flex;
+      justify-content: center;
+      gap: 8px;
+    }
+  }
+}
+
+@keyframes float-icon {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+</style>

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

@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus';
+import { contactConfig, taobaoConfig } from '@/config/constants.ts';
+
+// 复制淘口令
+function copyTaobaoCode() {
+  navigator.clipboard.writeText(taobaoConfig.code).then(() => {
+    ElMessage.success('淘口令已复制,打开手机淘宝即可购买');
+  }).catch(() => {
+    ElMessage.error('复制失败，请手动复制');
+  });
+}
+
+// 跳转淘宝
+function goToTaobao() {
+  window.open(taobaoConfig.link, '_blank');
+}
+</script>
+
+<template>
+  <div class="newbie-guide-container">
+    <div class="newbie-content">
+      <div class="newbie-header">
+        <div class="header-icon">
+          🎉
+        </div>
+        <h3 class="header-title">
+          新人特惠组合包
+        </h3>
+        <p class="header-subtitle">
+          超值优惠，仅限首次购买用户
+        </p>
+      </div>
+
+      <div class="newbie-body">
+        <!-- 购买方式卡片 -->
+        <div class="purchase-card">
+          <div class="card-row">
+            <div class="card-col">
+              <div class="method-label">
+                方法一
+              </div>
+              <el-button
+                type="primary"
+                size="small"
+                @click="goToTaobao"
+              >
+                <el-icon><i-ep-link /></el-icon>
+                淘宝链接
+              </el-button>
+            </div>
+            <div class="card-col">
+              <div class="method-label">
+                方法二
+              </div>
+              <el-button
+                type="success"
+                size="small"
+                @click="copyTaobaoCode"
+              >
+                <el-icon><i-ep-document-copy /></el-icon>
+                复制淘口令
+              </el-button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 淘口令展示 -->
+        <div class="taobao-code-box">
+          <div class="code-label">
+            淘口令
+          </div>
+          <div class="code-text">
+            {{ taobaoConfig.code }}
+          </div>
+        </div>
+
+        <!-- 温馨提示 -->
+        <div class="tips-box">
+          <p class="tips-title">
+            <el-icon><i-ep-info-filled /></el-icon> 温馨提示
+          </p>
+          <p class="tips-text">
+            新人特惠仅限首次购买 · 购买后联系客服激活
+          </p>
+          <p class="tips-text">
+            客服微信：{{ contactConfig.wechatId }}
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.newbie-guide-container {
+  padding: 20px 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  background: linear-gradient(to bottom, #fff, #fdfdfd);
+  border-radius: 8px;
+
+  .newbie-content {
+    text-align: center;
+    //max-width: 450px;
+    width: 100%;
+
+    .newbie-header {
+      margin-bottom: 20px;
+      padding: 16px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      border-radius: 10px;
+      color: white;
+
+      .header-icon {
+        font-size: 32px;
+        margin-bottom: 6px;
+      }
+
+      .header-title {
+        font-size: 20px;
+        font-weight: 700;
+        margin: 0 0 6px 0;
+      }
+
+      .header-subtitle {
+        font-size: 13px;
+        margin: 0;
+        opacity: 0.95;
+      }
+    }
+
+    .newbie-body {
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+
+      .purchase-card {
+        background: #f7f8fa;
+        border-radius: 10px;
+        padding: 16px;
+        border: 2px solid #e8ecf0;
+
+        .card-row {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 16px;
+
+          .card-col {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+
+            .method-label {
+              font-size: 13px;
+              font-weight: 600;
+              color: #606266;
+            }
+
+            .el-button {
+              width: 100%;
+            }
+          }
+        }
+      }
+
+      .taobao-code-box {
+        background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
+        border-radius: 8px;
+        padding: 14px;
+        border: 2px dashed #bae6fd;
+
+        .code-label {
+          font-size: 12px;
+          color: #0369a1;
+          font-weight: 600;
+          margin-bottom: 8px;
+        }
+
+        .code-text {
+          font-size: 11px;
+          color: #667eea;
+          font-family: 'Courier New', monospace;
+          line-height: 1.5;
+          word-break: break-all;
+          background: white;
+          padding: 8px;
+          border-radius: 6px;
+          text-align: left;
+        }
+      }
+
+      .tips-box {
+        background: #f0f9ff;
+        border: 1px solid #bae6fd;
+        border-radius: 8px;
+        padding: 14px;
+        text-align: left;
+
+        .tips-title {
+          margin: 0 0 10px 0;
+          font-size: 13px;
+          font-weight: 600;
+          color: #0369a1;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+
+          .el-icon {
+            font-size: 16px;
+          }
+        }
+
+        .tips-text {
+          margin: 4px 0;
+          font-size: 12px;
+          color: #0c4a6e;
+          line-height: 1.5;
+        }
+      }
+    }
+  }
+}
+
+/* 移动端优化 */
+@media (max-width: 768px) {
+  .newbie-guide-container {
+    padding: 16px 12px;
+    min-height: auto;
+
+    .newbie-content {
+      max-width: 100%;
+
+      .newbie-header {
+        padding: 16px;
+        margin-bottom: 16px;
+        border-radius: 8px;
+
+        .header-icon {
+          font-size: 28px;
+          margin-bottom: 6px;
+        }
+
+        .header-title {
+          font-size: 18px;
+          margin-bottom: 6px;
+        }
+
+        .header-subtitle {
+          font-size: 13px;
+        }
+      }
+
+      .newbie-body {
+        gap: 12px;
+
+        .purchase-card {
+          padding: 14px;
+          border-radius: 8px;
+
+          .card-row {
+            grid-template-columns: 1fr;
+            gap: 10px;
+
+            .card-col {
+              .method-label {
+                font-size: 12px;
+              }
+
+              .el-button {
+                font-size: 13px;
+              }
+            }
+          }
+        }
+
+        .taobao-code-box {
+          padding: 12px;
+
+          .code-label {
+            font-size: 11px;
+          }
+
+          .code-text {
+            font-size: 10px;
+            padding: 6px;
+            line-height: 1.4;
+          }
+        }
+
+        .tips-box {
+          padding: 12px;
+
+          .tips-title {
+            font-size: 12px;
+            margin-bottom: 8px;
+
+            .el-icon {
+              font-size: 14px;
+            }
+          }
+
+          .tips-text {
+            font-size: 11px;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* 小屏手机进一步优化 */
+@media (max-width: 480px) {
+  .newbie-guide-container {
+    padding: 12px 8px;
+
+    .newbie-content {
+      .newbie-header {
+        padding: 12px;
+
+        .header-icon {
+          font-size: 24px;
+        }
+
+        .header-title {
+          font-size: 16px;
+        }
+
+        .header-subtitle {
+          font-size: 12px;
+        }
+      }
+
+      .newbie-body {
+        .purchase-card {
+          padding: 12px;
+        }
+
+        .taobao-code-box {
+          padding: 10px;
+
+          .code-text {
+            font-size: 9px;
+          }
+        }
+
+        .tips-box {
+          padding: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

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

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { GoodsItem } from '@/api/pay';
-import { CircleCheck, Loading } from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { createOrder, getOrderStatus } from '@/api';
 import { getGoodsList, GoodsCategoryType } from '@/api/pay';
 import ProductPage from '@/pages/products/index.vue';
 import { useUserStore } from '@/stores';
-import { showContactUs } from '@/utils/contact-us.ts';
+import NewbieGuide from './NewbieGuide.vue';
-import { contactConfig, promotionConfig, taobaoConfig } from '@/config/constants.ts';
+import ActivationGuide from './ActivationGuide.vue';
+import PackageTab from './PackageTab.vue';
 
 const emit = defineEmits(['close']);
 
@@ -38,31 +38,6 @@ const packagesData = ref<{
 
 const userStore = useUserStore();
 
-// 复制淘口令
-function copyTaobaoCode() {
-  navigator.clipboard.writeText(taobaoConfig.code).then(() => {
-    ElMessage.success('淘口令已复制，打开手机淘宝即可购买');
-  }).catch(() => {
-    ElMessage.error('复制失败，请手动复制');
-  });
-}
-
-// 跳转淘宝
-function goToTaobao() {
-  window.open(taobaoConfig.link, '_blank');
-}
-
-// 跳转模型库
-function goToModelLibrary() {
-  close();
-  window.location.href = '/model-library';
-}
-
-// 联系客服
-function contactService() {
-  showContactUs({ scenario: 'regular' });
-}
-
 const visible = ref(true);
 const activeTab = ref('member');
 const selectedId = ref<number | null>(null);
@@ -421,545 +396,28 @@ function goToActivation() {
       </div>
 
       <!-- 新人特惠页面 -->
-      <div v-if="activeTab === 'newbie'" class="newbie-guide-container">
+      <NewbieGuide v-if="activeTab === 'newbie'" />
-        <div class="newbie-content">
-          <div class="newbie-header">
-            <div class="header-icon">🎉</div>
-            <h3 class="header-title">新人特惠组合包</h3>
-            <p class="header-subtitle">超值优惠，仅限首次购买用户</p>
-          </div>
-
-          <div class="newbie-body">
-            <!-- 购买方式卡片 -->
-            <div class="purchase-card">
-              <div class="card-row">
-                <div class="card-col">
-                  <div class="method-label">方法一</div>
-                  <el-button
-                    type="primary"
-                    size="small"
-                    @click="goToTaobao"
-                  >
-                    <el-icon><i-ep-link /></el-icon>
-                    淘宝链接
-                  </el-button>
-                </div>
-                <div class="card-col">
-                  <div class="method-label">方法二</div>
-                  <el-button
-                    type="success"
-                    size="small"
-                    @click="copyTaobaoCode"
-                  >
-                    <el-icon><i-ep-document-copy /></el-icon>
-                    复制淘口令
-                  </el-button>
-                </div>
-              </div>
-            </div>
-
-            <!-- 淘口令展示 -->
-            <div class="taobao-code-box">
-              <div class="code-label">淘口令</div>
-              <div class="code-text">{{ taobaoConfig.code }}</div>
-            </div>
-
-            <!-- 温馨提示 -->
-            <div class="tips-box">
-              <p class="tips-title"><el-icon><i-ep-info-filled /></el-icon> 温馨提示</p>
-              <p class="tips-text">新人特惠仅限首次购买 · 购买后联系客服激活</p>
-              <p class="tips-text">客服微信：{{ contactConfig.wechatId }}</p>
-            </div>
-          </div>
-        </div>
-      </div>
 
       <!-- 激活码引导页 -->
-      <div v-if="activeTab === 'activation'" class="activation-guide-container">
+      <ActivationGuide v-else-if="activeTab === 'activation'" @close="close" />
-        <div class="activation-content">
-          <div class="guide-icon">
-            🎁
-          </div>
-          <h3 class="guide-title">
-            激活码兑换
-          </h3>
-          <p class="guide-desc">
-            如果您持有意心AI的会员激活码或Token兑换码，<br>请点击下方按钮前往控制台进行兑换。
-          </p>
-          <el-button
-            type="primary"
-            size="large"
-            class="redeem-jump-btn"
-            round
-            @click="goToActivation"
-          >
-            前往兑换中心
-          </el-button>
 
-          <div class="guide-tips">
+      <!-- 会员套餐和Token包 -->
-            <p>💡 兑换成功后权益将立即生效</p>
+      <PackageTab
-          </div>
+        v-else
-        </div>
+        :package-type="activeTab as 'member' | 'token'"
-      </div>
+        :packages="currentPackages"
-
+        :selected-id="selectedId"
-      <!-- 移动端布局 -->
+        :selected-price="selectedPrice"
-      <div v-else-if="isMobile" class="mobile-layout">
+        :is-loading="isLoading"
-        <!-- 商品加载状态（无修改） -->
+        :is-loading-goods="isLoadingGoods"
-        <div v-if="isLoadingGoods" class="loading-container">
+        :benefits="activeTab === 'token' ? benefitsData2.qy : currentBenefits"
-          <el-icon class="is-loading" :size="40">
+        :benefits-extra="activeTab === 'token' ? benefitsData2.yt : undefined"
-            <Loading />
+        :is-mobile="isMobile"
-          </el-icon>
+        @select-package="selectPackage"
-          <p>加载商品中...</p>
+        @pay="pay"
-        </div>
+        @view-details="toggleDetails"
-
+        @login="handleClickLogin"
-        <!-- 套餐卡片列表（核心修改：Token套餐价格展示） -->
+      />
-        <div v-else-if="currentPackages.length > 0" class="package-list">
-          <div
-            v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
-            :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
-          >
-            <!-- 标签（无修改） -->
-            <div v-if="pkg.discount" class="discount-tag">
-              {{ pkg.discount }}
-            </div>
-            <div v-if="pkg.tag" class="tag">
-              {{ pkg.tag }}
-            </div>
-
-            <!-- 套餐信息（无修改） -->
-            <div class="package-info">
-              <div class="package-name">
-                {{ pkg.name }}
-              </div>
-              <div class="package-desc">
-                {{ pkg.desc }}
-              </div>
-            </div>
-
-            <!-- 价格区域（核心调整：Token套餐突出平台优惠价） -->
-            <div class="package-price">
-              <!-- Token套餐：尊享包价格展示优化 -->
-              <template v-if="activeTab === 'token'">
-                <!-- 1. 官方参考价（弱化展示） -->
-                <div v-if="pkg.perMonth && pkg.perMonth > (pkg.originalPrice || pkg.price)" class="official-price-section">
-                  <div class="price-label-row">
-                    <span class="label-text">❌ 官方参考价</span>
-                  </div>
-                  <div class="official-price">
-                    ¥{{ pkg.perMonth.toFixed(2) }}
-                  </div>
-                </div>
-
-                <!-- 2. 平台优惠价（主价格：放大字号+加重颜色） -->
-                <div v-if="pkg.originalPrice" class="platform-price-section">
-                  <div class="price-label-row">
-                    <span class="label-text main-label">⭐ 意心平台优惠价</span>
-                  </div>
-                  <div class="platform-price main-price">
-                    ¥{{ pkg.originalPrice.toFixed(2) }}
-                  </div>
-                </div>
-
-                <!-- 3. 个人优惠券（辅助信息） -->
-                <div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
-                  <div class="coupon-header">
-                    <span class="coupon-icon">🎁</span>
-                    <span class="coupon-title">您的个人尊享优惠券</span>
-                  </div>
-                  <div class="coupon-amount">
-                    -¥{{ pkg.discountAmount.toFixed(2) }}
-                  </div>
-                </div>
-
-                <!-- 4. 最终专属价格（弱化：缩小字号+浅色调，非核心视觉） -->
-                <div v-if="false" class="final-price-section">
-                  <div class="price-label-row">
-                    <span class="label-text light-label">👑 您的最终专属价（支付价）</span>
-                  </div>
-                  <div class="final-price-value light-price">
-                    <span class="price-symbol">¥</span>
-                    <span class="price-number">{{ pkg.price.toFixed(2) }}</span>
-                  </div>
-                </div>
-
-                <!-- 5. 总优惠提示（无修改） -->
-                <div v-if="pkg.perMonth && pkg.perMonth > pkg.price" class="total-discount-bar">
-                  <span class="bar-icon">🎉</span>
-                  <span class="bar-text">相比官方价已为您节省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}</span>
-                </div>
-              </template>
-
-              <!-- 会员套餐：保持原有逻辑（无修改） -->
-              <template v-else>
-                <div class="current-price-section">
-                  <span class="price-label">会员价</span>
-                  <div class="price-row">
-                    <span class="price">¥{{ pkg.price }}</span>
-                    <span v-if="pkg.perMonth" class="per-month">仅¥{{ pkg.perMonth }}/月</span>
-                  </div>
-                </div>
-                <div v-if="pkg.discount" class="discount-info">
-                  <el-icon class="discount-icon">
-                    <CircleCheck />
-                  </el-icon>
-                  <span class="discount-text">{{ pkg.discount }}</span>
-                </div>
-              </template>
-            </div>
-          </div>
-        </div>
-
-        <!-- 其他辅助信息（无修改） -->
-        <div v-if="activeTab === '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 style="display: flex;justify-content: space-between;align-items: center;margin-top: 15px;padding: 16px;background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);border-radius: 8px;border: 1px solid #fbbf24;">
-          <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 max-h-200px overflow-y-auto">
-          <div class="section-title">
-            专属权益
-          </div>
-          <ul class="benefits-list">
-            <li v-for="(b, index) in currentBenefits" :key="index" class="benefit-item">
-              <span class="dot"><el-icon><CircleCheck /></el-icon></span>
-              <span>
-                <span class="benefit-name">{{ b.name }}</span>
-                <span v-if="b.value">：{{ b.value }}</span>
-              </span>
-            </li>
-          </ul>
-          <!-- 查看模型库按钮 -->
-          <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>
-              </div>
-              <div class="card-content">
-                <h4 class="card-title">查看支持的模型</h4>
-                <p class="card-desc">查看意心AI支持的所有模型列表及详细信息</p>
-              </div>
-              <el-button
-                type="primary"
-                class="goto-btn"
-                @click="goToModelLibrary"
-              >
-                前往模型库
-                <el-icon class="ml-1"><i-ep-arrow-right /></el-icon>
-              </el-button>
-            </div>
-          </div>
-        </div>
-
-        <!-- 支付区域（无修改） -->
-        <div v-if="activeTab !== 'newbie' && activeTab !== 'activation'" class="payment-area">
-          <div v-if="false" class="agreement-text">
-            登录和注册都代表同意YiXinAI的会员协议
-          </div>
-          <div class="payment-info">
-            <div class="actual-payment">
-              <span>实际支付：</span>
-              <span class="price">¥{{ selectedPrice || 0 }}</span>
-            </div>
-            <el-button text type="primary" class="view-details-btn" @click="toggleDetails">
-              了解更多
-            </el-button>
-            <el-button
-              v-if="userStore.userInfo"
-              type="primary" :disabled="!selectedId || isLoading" :loading="isLoading" class="pay-button"
-              @click="pay"
-            >
-              立即支付
-            </el-button>
-            <el-button
-              v-else
-              type="primary" class="pay-button"
-              @click="handleClickLogin"
-            >
-              立即登录/注册
-            </el-button>
-          </div>
-          <div class="note-text">
-            可叠加购买次数，过期时间以最后订单为准。<br>
-            最终解释权归YiXinAI所有。
-          </div>
-        </div>
-      </div>
-
-      <!-- 桌面端布局（与移动端逻辑一致，仅适配样式） -->
-      <div v-else class="flex gap-6 desktop-layout">
-        <!-- 商品加载状态（无修改） -->
-        <div v-if="isLoadingGoods" class="loading-container-desktop">
-          <el-icon class="is-loading" :size="50">
-            <Loading />
-          </el-icon>
-          <p>加载商品中...</p>
-        </div>
-
-        <!-- 左栏 套餐卡片 + 支付（核心修改：Token套餐价格展示） -->
-        <div v-else class="w-[60%] flex flex-col justify-between">
-          <div class="flex flex-wrap gap-4 package-cards-container">
-            <div
-              v-for="pkg in currentPackages" :key="pkg.id" class="package-card"
-              :class="{ selected: pkg.id === selectedId }" @click="selectPackage(pkg)"
-            >
-              <!-- 标签（无修改） -->
-              <div v-if="pkg.tag" class="tag">
-                {{ pkg.tag }}
-              </div>
-
-              <!-- 套餐信息（无修改） -->
-              <div class="package-info">
-                <div class="package-name">
-                  {{ pkg.name }}
-                </div>
-                <div class="package-desc">
-                  {{ pkg.desc }}
-                </div>
-              </div>
-
-              <!-- 价格区域（桌面端同移动端逻辑：突出平台优惠价） -->
-              <div class="package-price">
-                <template v-if="activeTab === 'token'">
-                  <!-- 1. 官方参考价（弱化） -->
-                  <div v-if="pkg.perMonth && pkg.perMonth > (pkg.originalPrice || pkg.price)" class="official-price-section">
-                    <div class="price-label-row">
-                      <span class="label-text">❌ 官方参考价：</span>
-                      <span class="label-text-number">¥{{ pkg.perMonth.toFixed(2) }} </span>
-                    </div>
-                    <!--                    <div class="official-price"> -->
-                    <!--                      ¥{{ pkg.perMonth.toFixed(2) }} -->
-                    <!--                    </div> -->
-                  </div>
-
-                  <!-- 2. 平台优惠价（主价格：放大+加重） -->
-                  <div v-if="pkg.originalPrice" class="platform-price-section">
-                    <div class="price-label-row">
-                      <span class="label-text main-label">⭐ 意心平台优惠价</span>
-                    </div>
-                    <div class="platform-price main-price">
-                      ¥{{ pkg.originalPrice.toFixed(2) }}
-                    </div>
-                  </div>
-
-                  <!-- 3. 个人优惠券（辅助） -->
-                  <div v-if="pkg.discountAmount && pkg.discountAmount > 0" class="coupon-card">
-                    <div class="coupon-header">
-                      <span class="coupon-icon">🎁</span>
-                      <span class="coupon-title">您的个人尊享优惠券</span>
-                    </div>
-                    <div class="coupon-amount">
-                      -¥{{ pkg.discountAmount.toFixed(2) }}
-                    </div>
-                  </div>
-
-                  <!-- 4. 最终专属价（弱化） -->
-                  <div v-if="false" class="final-price-section">
-                    <div class="price-label-row">
-                      <span class="label-text light-label">👑 您的最终专属价（支付价）</span>
-                    </div>
-                    <div class="final-price-value light-price">
-                      <span class="price-symbol">¥</span>
-                      <span class="price-number">{{ pkg.price.toFixed(2) }}</span>
-                    </div>
-                  </div>
-
-                  <!-- 5. 总优惠提示 -->
-                  <!--                  <div  v-if="pkg.perMonth && pkg.perMonth > pkg.price" class="total-discount-bar"> -->
-                  <!--                    <span class="bar-icon">🎉</span> -->
-                  <!--                    <span class="bar-text">相比官方价已为您节省 ¥{{ (pkg.perMonth - pkg.price).toFixed(2) }}</span> -->
-                  <!--                  </div> -->
-                </template>
-
-                <!-- 会员套餐（无修改） -->
-                <template v-else>
-                  <div class="current-price-section">
-                    <span class="price-label">会员价</span>
-                    <div class="price-row">
-                      <span class="price">¥{{ pkg.price }}</span>
-                      <span v-if="pkg.perMonth" class="per-month">仅¥{{ pkg.perMonth }}/月</span>
-                    </div>
-                  </div>
-                  <div v-if="pkg.discount" class="discount-info">
-                    <el-icon class="discount-icon">
-                      <CircleCheck />
-                    </el-icon>
-                    <span class="discount-text">{{ pkg.discount }}</span>
-                  </div>
-                </template>
-              </div>
-            </div>
-          </div>
-
-          <!-- 其他辅助信息（无修改） -->
-          <div v-if="activeTab === 'token'" class="recharge-tip-card">
-            <div class="tip-icon">
-              💝
-            </div>
-            <div class="tip-content">
-              <div class="tip-title">
-                累计充值优惠
-              </div>
-              <div class="tip-desc">
-                {{ selectPackageObject?.discount }}
-              </div>
-            </div>
-          </div>
-
-          <div style="margin-top: 15px;padding: 16px;background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);border-radius: 8px;border: 1px solid #fbbf24;">
-            <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"
-              block
-              @click="contactService"
-            >
-              <el-icon><i-ep-service /></el-icon>
-              联系客服
-            </el-button>
-          </div>
-
-          <!-- 支付按钮（无修改） -->
-          <div class="payment-section">
-            <div v-if="false" class="agreement-text">
-              登录和注册都代表同意YiXinAI的会员协议
-            </div>
-            <div class="payment-action">
-              <div class="actual-payment">
-                <span>实际支付：</span>
-                <span class="price">¥{{ selectedPrice || 0 }}</span>
-              </div>
-              <div>
-                <el-button class="pay-button" text type="primary" @click="toggleDetails">
-                  了解更多
-                </el-button>
-                <el-button
-                  v-if="userStore.userInfo"
-                  type="primary" size="large" :disabled="!selectedId || isLoading" :loading="isLoading"
-                  class="pay-button" @click="pay"
-                >
-                  立即支付
-                </el-button>
-                <el-button
-                  v-else
-                  type="primary" size="large"
-                  class="pay-button" @click="handleClickLogin"
-                >
-                  立即登录/注册
-                </el-button>
-              </div>
-            </div>
-            <div class="note-text">
-              可叠加购买次数，过期时间以最后订单为准。<br>
-              最终解释权归YiXinAI所有。
-            </div>
-          </div>
-        </div>
-
-        <!-- 右栏 套餐权益（无修改） -->
-        <div class="w-[40%] flex flex-col justify-between right-panel max-h-400px overflow-y-auto">
-          <div>
-            <div v-if="activeTab === 'member'">
-              <div class="section-title">
-                会员权益
-              </div>
-              <ul class="benefits-list ">
-                <li v-for="(b, index) in currentBenefits" :key="index" class="benefit-item ">
-                  <span class="dot"><el-icon><CircleCheck /></el-icon></span>
-                  <span>
-                    <span class="benefit-name">{{ b.name }}</span>
-                    <span v-if="b.value">：{{ b.value }}</span>
-                  </span>
-                </li>
-              </ul>
-            </div>
-            <div v-if="activeTab === 'token'">
-              <div class="section-title">
-                尊享Token包权益
-              </div>
-              <ul class="benefits-list ">
-                <li v-for="(b, index) in benefitsData2.qy" :key="index" class="benefit-item ">
-                  <span class="dot"><el-icon><CircleCheck /></el-icon></span>
-                  <span>
-                    <span class="benefit-name">{{ b.name }}</span>
-                    <span v-if="b.value">：{{ b.value }}</span>
-                  </span>
-                </li>
-              </ul>
-              <br>
-              <div class="section-title">
-                尊享Token包用途
-              </div>
-              <ul class="benefits-list ">
-                <li v-for="(b, index) in benefitsData2.yt" :key="index" class="benefit-item ">
-                  <span class="dot"><el-icon><CircleCheck /></el-icon></span>
-                  <span>
-                    <span class="benefit-name">{{ b.name }}</span>
-                    <span v-if="b.value">：{{ b.value }}</span>
-                  </span>
-                </li>
-              </ul>
-            </div>
-            <div v-if="activeTab === 'member'" class="extra-description">
-              <!-- 查看模型库按钮 -->
-              <div class="model-library-section-mobile">
-                <el-divider />
-                <div class="model-library-card-mobile">
-                  <div class="card-header-mobile">
-                    <el-icon :size="24"><i-ep-box /></el-icon>
-                    <h4 class="card-title-mobile">查看支持的模型</h4>
-                  </div>
-                  <p class="card-desc-mobile">查看意心AI支持的所有模型列表及详细信息</p>
-                  <el-button
-                    type="primary"
-                    class="goto-btn-mobile"
-                    block
-                    @click="goToModelLibrary"
-                  >
-                    前往模型库
-                    <el-icon class="ml-1"><i-ep-arrow-right /></el-icon>
-                  </el-button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="view-details" />
-        </div>
-      </div>
     </div>
   </el-dialog>
 </template>

Yi.Ai.Vue3/types/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     AccountPassword: typeof import('./../src/components/LoginDialog/components/FormLogin/AccountPassword.vue')['default']
     ActivationCode: typeof import('./../src/components/userPersonalCenter/components/ActivationCode.vue')['default']
+    ActivationGuide: typeof import('./../src/components/ProductPackage/ActivationGuide.vue')['default']
     APIKeyManagement: typeof import('./../src/components/userPersonalCenter/components/APIKeyManagement.vue')['default']
     CardFlipActivity: typeof import('./../src/components/userPersonalCenter/components/CardFlipActivity.vue')['default']
     ContactUs: typeof import('./../src/components/ContactUs/index.vue')['default']
@@ -66,6 +67,8 @@ declare module 'vue' {
     ModeList: typeof import('./../src/components/modeList/index.vue')['default']
     ModelSelect: typeof import('./../src/components/ModelSelect/index.vue')['default']
     NavDialog: typeof import('./../src/components/userPersonalCenter/NavDialog.vue')['default']
+    NewbieGuide: typeof import('./../src/components/ProductPackage/NewbieGuide.vue')['default']
+    PackageTab: typeof import('./../src/components/ProductPackage/PackageTab.vue')['default']
     Popover: typeof import('./../src/components/Popover/index.vue')['default']
     PremiumPackageInfo: typeof import('./../src/components/userPersonalCenter/components/PremiumPackageInfo.vue')['default']
     PremiumService: typeof import('./../src/components/userPersonalCenter/components/PremiumService.vue')['default']

Yi.Ai.Vue3/types/import_meta.d.ts

@@ -7,6 +7,7 @@ interface ImportMetaEnv {
   readonly VITE_WEB_BASE_API: string;
   readonly VITE_API_URL: string;
   readonly VITE_FILE_UPLOAD_API: string;
+  readonly VITE_BUILD_COMPRESS: string;
   readonly VITE_SSO_SEVER_URL: string;
   readonly VITE_APP_VERSION: string;
 }