From 551122de10946b9fda2b88f392f6610a2f34ab3f Mon Sep 17 00:00:00 2001
From: Gsh <15170702455@163.com>
Date: Fri, 9 Jan 2026 17:06:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BA=A7=E5=93=81=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProductPackage/ActivationGuide.vue        |  105 ++
 .../components/ProductPackage/NewbieGuide.vue |  357 +++++
 .../components/ProductPackage/PackageTab.vue  | 1387 +++++++++++++++++
 .../src/components/ProductPackage/index.vue   |  586 +------
 Yi.Ai.Vue3/types/components.d.ts              |    3 +
 Yi.Ai.Vue3/types/import_meta.d.ts             |    1 +
 6 files changed, 1875 insertions(+), 564 deletions(-)
 create mode 100644 Yi.Ai.Vue3/src/components/ProductPackage/ActivationGuide.vue
 create mode 100644 Yi.Ai.Vue3/src/components/ProductPackage/NewbieGuide.vue
 create mode 100644 Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue

diff --git a/Yi.Ai.Vue3/src/components/ProductPackage/ActivationGuide.vue b/Yi.Ai.Vue3/src/components/ProductPackage/ActivationGuide.vue
new file mode 100644
index 00000000..5745437a
--- /dev/null
+++ b/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>
diff --git a/Yi.Ai.Vue3/src/components/ProductPackage/NewbieGuide.vue b/Yi.Ai.Vue3/src/components/ProductPackage/NewbieGuide.vue
new file mode 100644
index 00000000..9fbf16e9
--- /dev/null
+++ b/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>
diff --git a/Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue b/Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue
new file mode 100644
index 00000000..a64fb3c5
--- /dev/null
+++ b/Yi.Ai.Vue3/src/components/ProductPackage/PackageTab.vue
@@ -0,0 +1,1387 @@
+<script setup lang="ts">
+import { CircleCheck, Loading } from '@element-plus/icons-vue';
+import { computed } from 'vue';
+import { useUserStore } from '@/stores';
+import { showContactUs } from '@/utils/contact-us.ts';
+import { promotionConfig } from '@/config/constants.ts';
+
+interface PackageItem {
+  id: number;
+  name: string;
+  desc: string;
+  price: number;
+  originalPrice?: number;
+  perMonth?: number;
+  tag: string;
+  discount: string;
+  goodsName: string;
+  discountAmount?: number;
+  goodsType?: any;
+}
+
+interface BenefitItem {
+  name: string;
+  value: string;
+}
+
+const props = defineProps<{
+  packageType: 'member' | 'token';
+  packages: PackageItem[];
+  selectedId: number | null;
+  selectedPrice: number;
+  isLoading: boolean;
+  isLoadingGoods: boolean;
+  benefits: BenefitItem[];
+  benefitsExtra?: BenefitItem[];
+  isMobile: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'select-package', pkg: PackageItem): void;
+  (e: 'pay'): void;
+  (e: 'view-details'): void;
+  (e: 'login'): void;
+}>();
+
+const userStore = useUserStore();
+
+function selectPackage(pkg: PackageItem) {
+  emit('select-package', pkg);
+}
+
+function handlePay() {
+  emit('pay');
+}
+
+function handleLogin() {
+  emit('login');
+}
+
+function toggleDetails() {
+  emit('view-details');
+}
+
+function contactService() {
+  showContactUs({ scenario: 'regular' });
+}
+
+function goToModelLibrary() {
+  window.location.href = '/model-library';
+}
+
+const selectedPackage = computed(() => {
+  return props.packages.find(pkg => pkg.id === props.selectedId);
+});
+</script>
+
+<template>
+  <!-- 移动端布局 -->
+  <div v-if="isMobile" class="mobile-layout">
+    <!-- 商品加载状态 -->
+    <div v-if="isLoadingGoods" class="loading-container">
+      <el-icon class="is-loading" :size="40">
+        <Loading />
+      </el-icon>
+      <p>加载商品中...</p>
+    </div>
+
+    <!-- 套餐卡片列表 -->
+    <div v-else-if="packages.length > 0" class="package-list">
+      <div
+        v-for="pkg in packages" :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>
+
+        <!-- 价格区域 -->
+        <div class="package-price">
+          <!-- Token套餐价格展示 -->
+          <template v-if="packageType === '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="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>
+
+    <!-- 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">
+      <div class="section-title">
+        专属权益
+      </div>
+      <ul class="benefits-list">
+        <li v-for="(b, index) in benefits" :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 v-if="packageType === 'member'" 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 class="payment-area">
+      <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="handlePay"
+        >
+          立即支付
+        </el-button>
+        <el-button
+          v-else
+          type="primary" class="pay-button"
+          @click="handleLogin"
+        >
+          立即登录/注册
+        </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>
+
+    <!-- 左栏：套餐卡片 + 支付 -->
+    <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 packages" :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="packageType === '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>
+
+              <!-- 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>
+            </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>
+
+      <!-- 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">
+            {{ selectedPackage?.discount }}
+          </div>
+        </div>
+      </div>
+
+      <!-- 联系客服卡片 -->
+      <div class="contact-service-card">
+        <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 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="handlePay"
+            >
+              立即支付
+            </el-button>
+            <el-button
+              v-else
+              type="primary" size="large"
+              class="pay-button" @click="handleLogin"
+            >
+              立即登录/注册
+            </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="packageType === 'member'">
+          <div class="section-title">
+            会员权益
+          </div>
+          <ul class="benefits-list">
+            <li v-for="(b, index) in benefits" :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="packageType === 'token'">
+          <div class="section-title">
+            尊享Token包权益
+          </div>
+          <ul class="benefits-list">
+            <li v-for="(b, index) in benefits" :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 v-if="benefitsExtra" class="section-title">
+            尊享Token包用途
+          </div>
+          <ul v-if="benefitsExtra" class="benefits-list">
+            <li v-for="(b, index) in benefitsExtra" :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="packageType === '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>
+</template>
+
+<style scoped lang="scss">
+/* 加载状态样式 */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 20px;
+  color: #909399;
+
+  p {
+    margin-top: 16px;
+    font-size: 14px;
+  }
+}
+
+.loading-container-desktop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 400px;
+  color: #909399;
+
+  p {
+    margin-top: 20px;
+    font-size: 16px;
+  }
+}
+
+/* 联系客服卡片 */
+.contact-service-card {
+  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;
+}
+
+/* 移动端样式 */
+.mobile-layout {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  .package-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .package-card {
+    position: relative;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 16px;
+    transition: all 0.3s;
+    cursor: pointer;
+
+    &.selected {
+      border: 3px solid #fde19d;
+      background-image: url('@/assets/images/product_background.svg');
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: bottom;
+      box-shadow: 0 4px 6px -1px #fff4e3;
+    }
+
+    .discount-tag {
+      position: absolute;
+      top: -6px;
+      left: 8px;
+      background-color: #ef4444;
+      color: white;
+      font-size: 12px;
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+
+    .tag {
+      position: absolute;
+      top: -6px;
+      right: 8px;
+      background-color: #f97316;
+      color: white;
+      font-size: 12px;
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+
+    .package-info {
+      margin-bottom: 12px;
+
+      .package-name {
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      .package-desc {
+        font-size: 12px;
+        color: #6b7280;
+      }
+    }
+
+    .package-price {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      // 当前价格
+      .current-price-section {
+        .price-label {
+          font-size: 12px;
+          color: #6b7280;
+          display: block;
+          margin-bottom: 4px;
+        }
+
+        .price-row {
+          display: flex;
+          align-items: baseline;
+          gap: 6px;
+        }
+
+        .price {
+          font-size: 24px;
+          font-weight: 700;
+          color: #f97316;
+        }
+
+        .per-month {
+          font-size: 12px;
+          color: #6b7280;
+        }
+      }
+
+      // 优惠说明
+      .discount-info {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 10px;
+        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+        border-radius: 6px;
+        font-size: 11px;
+        color: #1e40af;
+        line-height: 1.4;
+
+        .discount-icon {
+          color: #3b82f6;
+          flex-shrink: 0;
+          font-size: 14px;
+        }
+
+        .discount-text {
+          flex: 1;
+        }
+      }
+
+      // Token套餐价格展示 - 移动端
+      .official-price-section {
+        padding: 6px 10px;
+        background: linear-gradient(135deg, #fef1f2 0%, #ffe4e6 100%);
+        border-radius: 6px;
+        border: 1px solid #fecdd3;
+
+        .price-label-row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 3px;
+
+          .label-text {
+            font-size: 11px;
+            color: #9f1239;
+            font-weight: 600;
+          }
+        }
+
+        .official-price {
+          font-size: 16px;
+          font-weight: 700;
+          color: #be123c;
+          text-decoration: line-through;
+          text-decoration-thickness: 2px;
+        }
+      }
+
+      .platform-price-section {
+        padding: 8px 10px;
+        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        border-radius: 6px;
+        border: 1px solid #fbbf24;
+
+        .price-label-row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 3px;
+
+          .label-text {
+            font-size: 11px;
+            color: #78350f;
+            font-weight: 600;
+          }
+        }
+
+        .platform-price {
+          font-size: 18px;
+          font-weight: 700;
+          color: #b45309;
+        }
+      }
+
+      .coupon-card {
+        padding: 8px 10px;
+        background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
+        border-radius: 6px;
+        border: 1px dashed #fb923c;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .coupon-header {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+
+          .coupon-icon {
+            font-size: 14px;
+          }
+
+          .coupon-title {
+            font-size: 10px;
+            color: #78350f;
+            font-weight: 600;
+          }
+        }
+
+        .coupon-amount {
+          font-size: 16px;
+          font-weight: 700;
+          color: #ea580c;
+        }
+      }
+
+      .total-discount-bar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        padding: 8px 10px;
+        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+        border-radius: 8px;
+        border: 1px solid #34d399;
+        box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
+
+        .bar-icon {
+          font-size: 14px;
+        }
+
+        .bar-text {
+          font-size: 11px;
+          font-weight: 700;
+          color: #065f46;
+        }
+      }
+    }
+  }
+
+  // 累计充值优惠提示卡片样式
+  .recharge-tip-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
+    border-radius: 8px;
+    border: 1px solid #fbbf24;
+    margin-top: 16px;
+
+    .tip-icon {
+      font-size: 24px;
+    }
+
+    .tip-content {
+      flex: 1;
+
+      .tip-title {
+        font-size: 14px;
+        font-weight: 700;
+        color: #78350f;
+        margin-bottom: 4px;
+      }
+
+      .tip-desc {
+        font-size: 12px;
+        color: #92400e;
+        line-height: 1.4;
+      }
+    }
+  }
+
+  .benefits-preview {
+    background-color: #f9fafb;
+    border-radius: 8px;
+    padding: 16px;
+
+    .section-title {
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+
+    .benefits-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      .benefit-item {
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: 8px;
+        font-size: 14px;
+        color: #4b5563;
+        white-space: normal;
+
+        .dot {
+          color: #f97316;
+          margin-right: 8px;
+        }
+
+        .benefit-name {
+          font-weight: 500;
+        }
+      }
+    }
+
+    .model-library-section {
+      margin-top: 16px;
+
+      .model-library-card {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        padding: 16px;
+        background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
+        border-radius: 12px;
+        border: 2px solid #bae6fd;
+        transition: all 0.3s;
+
+        &:hover {
+          border-color: #667eea;
+          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+          transform: translateY(-2px);
+        }
+
+        .card-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 56px;
+          height: 56px;
+          background: white;
+          border-radius: 12px;
+          color: #667eea;
+          flex-shrink: 0;
+        }
+
+        .card-content {
+          flex: 1;
+
+          .card-title {
+            margin: 0 0 4px 0;
+            font-size: 16px;
+            font-weight: 700;
+            color: #1a1a1a;
+          }
+
+          .card-desc {
+            margin: 0;
+            font-size: 13px;
+            color: #606266;
+            line-height: 1.5;
+          }
+        }
+
+        .goto-btn {
+          flex-shrink: 0;
+          font-weight: 600;
+
+          .ml-1 {
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+
+    .view-details-btn {
+      width: 100%;
+      margin-top: 16px;
+      justify-content: flex-end;
+    }
+  }
+
+  .payment-area {
+    border-top: 1px solid #e5e7eb;
+    padding-top: 16px;
+
+    .agreement-text {
+      font-size: 12px;
+      color: #6b7280;
+      margin-bottom: 12px;
+    }
+
+    .payment-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+
+      .actual-payment {
+        .price {
+          font-size: 18px;
+          font-weight: 700;
+          color: #f97316;
+        }
+      }
+
+      .pay-button {
+        width: 120px;
+      }
+    }
+
+    .note-text {
+      font-size: 12px;
+      color: #9ca3af;
+    }
+  }
+}
+
+/* 桌面端样式 */
+.desktop-layout {
+  .package-cards-container {
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-right: 8px;
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: #f5f5f5;
+      border-radius: 3px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #d0d7de;
+      border-radius: 3px;
+
+      &:hover {
+        background: #a8b3c1;
+      }
+    }
+  }
+
+  .package-card {
+    cursor: pointer;
+    position: relative;
+    width: calc(50% - 0.5rem);
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 16px;
+    transition: all 0.3s;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    background: linear-gradient(90deg, #f1f2ebb5, white);
+
+    &.selected {
+      border: 3px solid #fde19d;
+      background-image: url('@/assets/images/product_background.svg');
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: bottom;
+      box-shadow: 0 4px 6px -1px #fff4e3;
+    }
+
+    .discount-tag {
+      position: absolute;
+      top: -6px;
+      left: 8px;
+      background-color: #ef4444;
+      color: white;
+      font-size: 12px;
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+
+    .tag {
+      position: absolute;
+      top: -6px;
+      right: 8px;
+      background-color: #f97316;
+      color: white;
+      font-size: 12px;
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+
+    .package-info {
+      margin-bottom: 12px;
+
+      .package-name {
+        font-size: 16px;
+        font-weight: 600;
+      }
+
+      .package-desc {
+        font-size: 12px;
+        color: #6b7280;
+      }
+    }
+
+    .package-price {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      margin-top: 12px;
+
+      .current-price-section {
+        .price-label {
+          font-size: 13px;
+          color: #6b7280;
+          display: block;
+          margin-bottom: 6px;
+          font-weight: 500;
+        }
+
+        .price-row {
+          display: flex;
+          align-items: baseline;
+          gap: 8px;
+        }
+
+        .price {
+          font-size: 28px;
+          font-weight: 700;
+          color: #f97316;
+        }
+
+        .per-month {
+          font-size: 13px;
+          color: #6b7280;
+        }
+      }
+
+      .discount-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+        border-radius: 8px;
+        font-size: 12px;
+        color: #1e40af;
+        line-height: 1.5;
+
+        .discount-icon {
+          color: #3b82f6;
+          flex-shrink: 0;
+          font-size: 16px;
+        }
+
+        .discount-text {
+          flex: 1;
+        }
+      }
+
+      // Token套餐价格展示 - 桌面端
+      .official-price-section {
+        padding: 4px 6px;
+        background: linear-gradient(15deg, rgb(155, 155, 155) 0%, #999a9d 100%);
+        border-radius: 8px;
+        border: 1px solid rgba(156, 163, 175, 0.67);
+
+        .price-label-row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 4px;
+
+          .label-text {
+            font-size: 12px;
+            color: #ffffff;
+            font-weight: 700;
+          }
+
+          .label-text-number {
+            font-size: 14px;
+            color: #ffffff;
+            font-weight: 700;
+            text-decoration: line-through;
+          }
+        }
+
+        .official-price {
+          font-size: 20px;
+          font-weight: 700;
+          color: #be123c;
+          text-decoration: line-through;
+          text-decoration-thickness: 2px;
+        }
+      }
+
+      .platform-price-section {
+        padding: 10px 12px;
+        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+        border-radius: 8px;
+        border: 1px solid #fbbf24;
+
+        .price-label-row {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 4px;
+
+          .label-text {
+            font-size: 12px;
+            color: #78350f;
+            font-weight: 700;
+          }
+
+          .save-tag {
+            background: #dc2626;
+            color: white;
+            font-size: 10px;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-weight: 600;
+          }
+        }
+
+        .platform-price {
+          font-size: 22px;
+          font-weight: 700;
+          color: #b45309;
+        }
+      }
+
+      .coupon-card {
+        padding: 10px 12px;
+        background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
+        border-radius: 8px;
+        border: 1px dashed #fb923c;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .coupon-header {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+
+          .coupon-icon {
+            font-size: 16px;
+          }
+
+          .coupon-title {
+            font-size: 11px;
+            color: #78350f;
+            font-weight: 700;
+          }
+        }
+
+        .coupon-amount {
+          font-size: 20px;
+          font-weight: 700;
+          color: #ea580c;
+        }
+      }
+
+      .total-discount-bar {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        padding: 10px 12px;
+        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
+        border-radius: 10px;
+        border: 1px solid #34d399;
+        box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
+
+        .bar-icon {
+          font-size: 16px;
+        }
+
+        .bar-text {
+          font-size: 13px;
+          font-weight: 700;
+          color: #065f46;
+        }
+      }
+    }
+  }
+
+  .recharge-tip-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    background: linear-gradient(135deg, #fef3c7 0%, #ffedd5 100%);
+    border-radius: 8px;
+    border: 1px solid #fbbf24;
+    margin-top: 16px;
+
+    .tip-icon {
+      font-size: 28px;
+    }
+
+    .tip-content {
+      flex: 1;
+
+      .tip-title {
+        font-size: 15px;
+        font-weight: 700;
+        color: #78350f;
+        margin-bottom: 4px;
+      }
+
+      .tip-desc {
+        font-size: 13px;
+        color: #92400e;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  .payment-section {
+    border-top: 1px solid #e5e7eb;
+    padding-top: 16px;
+    margin-top: 16px;
+
+    .agreement-text {
+      font-size: 12px;
+      color: #6b7280;
+      margin-bottom: 12px;
+    }
+
+    .payment-action {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+
+      .actual-payment {
+        .price {
+          font-size: 18px;
+          font-weight: 700;
+          color: #f97316;
+        }
+      }
+    }
+
+    .note-text {
+      font-size: 12px;
+      color: #9ca3af;
+    }
+  }
+
+  .right-panel {
+    .section-title {
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+
+    .benefits-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      .benefit-item {
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: 8px;
+        font-size: 14px;
+        color: #4b5563;
+        white-space: normal;
+
+        .dot {
+          color: #f97316;
+          margin-right: 8px;
+        }
+
+        .benefit-name {
+          font-weight: 500;
+        }
+      }
+    }
+
+    .extra-description {
+      margin-top: 24px;
+
+      .description-card {
+        background-color: #f9fafb;
+        border-radius: 8px;
+        padding: 12px;
+        margin-bottom: 12px;
+
+        .title {
+          font-weight: 600;
+          margin-bottom: 4px;
+        }
+
+        .subtext {
+          font-size: 12px;
+          color: #6b7280;
+          line-height: 1.4;
+        }
+      }
+    }
+
+    .view-details {
+      border-top: 1px solid #e5e7eb;
+      padding-top: 16px;
+      margin-top: 16px;
+    }
+  }
+
+  /* 模型库卡片样式 - 移动端 */
+  .model-library-section-mobile {
+    margin-top: 16px;
+
+    .model-library-card-mobile {
+      padding: 16px;
+      background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
+      border-radius: 12px;
+      border: 2px solid #bae6fd;
+      transition: all 0.3s;
+
+      .card-header-mobile {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 12px;
+
+        .el-icon {
+          color: #667eea;
+          background: white;
+          padding: 8px;
+          border-radius: 8px;
+        }
+
+        .card-title-mobile {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 700;
+          color: #1a1a1a;
+        }
+      }
+
+      .card-desc-mobile {
+        margin: 0 0 12px 0;
+        font-size: 13px;
+        color: #606266;
+        line-height: 1.5;
+      }
+
+      .goto-btn-mobile {
+        font-weight: 600;
+
+        .ml-1 {
+          margin-left: 4px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/components/ProductPackage/index.vue b/Yi.Ai.Vue3/src/components/ProductPackage/index.vue
index 859507ed..20ef964f 100644
--- a/Yi.Ai.Vue3/src/components/ProductPackage/index.vue
+++ b/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 { contactConfig, promotionConfig, taobaoConfig } from '@/config/constants.ts';
+import NewbieGuide from './NewbieGuide.vue';
+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">
-        <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>
+      <NewbieGuide v-if="activeTab === 'newbie'" />
 
       <!-- 激活码引导页 -->
-      <div v-if="activeTab === 'activation'" 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>
+      <ActivationGuide v-else-if="activeTab === 'activation'" @close="close" />
 
-          <div class="guide-tips">
-            <p>💡 兑换成功后权益将立即生效</p>
-          </div>
-        </div>
-      </div>
-
-      <!-- 移动端布局 -->
-      <div v-else-if="isMobile" class="mobile-layout">
-        <!-- 商品加载状态（无修改） -->
-        <div v-if="isLoadingGoods" class="loading-container">
-          <el-icon class="is-loading" :size="40">
-            <Loading />
-          </el-icon>
-          <p>加载商品中...</p>
-        </div>
-
-        <!-- 套餐卡片列表（核心修改：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>
+      <!-- 会员套餐和Token包 -->
+      <PackageTab
+        v-else
+        :package-type="activeTab as 'member' | 'token'"
+        :packages="currentPackages"
+        :selected-id="selectedId"
+        :selected-price="selectedPrice"
+        :is-loading="isLoading"
+        :is-loading-goods="isLoadingGoods"
+        :benefits="activeTab === 'token' ? benefitsData2.qy : currentBenefits"
+        :benefits-extra="activeTab === 'token' ? benefitsData2.yt : undefined"
+        :is-mobile="isMobile"
+        @select-package="selectPackage"
+        @pay="pay"
+        @view-details="toggleDetails"
+        @login="handleClickLogin"
+      />
     </div>
   </el-dialog>
 </template>
diff --git a/Yi.Ai.Vue3/types/components.d.ts b/Yi.Ai.Vue3/types/components.d.ts
index 4a006a80..4e6934c4 100644
--- a/Yi.Ai.Vue3/types/components.d.ts
+++ b/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']
diff --git a/Yi.Ai.Vue3/types/import_meta.d.ts b/Yi.Ai.Vue3/types/import_meta.d.ts
index 8f2a798b..c98d612e 100644
--- a/Yi.Ai.Vue3/types/import_meta.d.ts
+++ b/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;
 }