From 0089e63832c748f49608060c0cea5ddd7bb45b92 Mon Sep 17 00:00:00 2001
From: Gsh <15170702455@163.com>
Date: Sun, 29 Jun 2025 14:42:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=A7=E5=93=81=E8=AE=A2=E9=98=85?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SupportModelProducts/indexl.vue           |  80 +++
 Yi.Ai.Vue3/src/components/modeList/index.vue  |  91 +++
 Yi.Ai.Vue3/src/data/products.ts               | 174 ++---
 .../src/layouts/LayoutBlankPage/index.vue     |  14 +-
 Yi.Ai.Vue3/src/pages/products/index.vue       | 645 ++++++------------
 Yi.Ai.Vue3/types/components.d.ts              |   9 +
 6 files changed, 449 insertions(+), 564 deletions(-)
 create mode 100644 Yi.Ai.Vue3/src/components/SupportModelProducts/indexl.vue
 create mode 100644 Yi.Ai.Vue3/src/components/modeList/index.vue

diff --git a/Yi.Ai.Vue3/src/components/SupportModelProducts/indexl.vue b/Yi.Ai.Vue3/src/components/SupportModelProducts/indexl.vue
new file mode 100644
index 00000000..663a1993
--- /dev/null
+++ b/Yi.Ai.Vue3/src/components/SupportModelProducts/indexl.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+const models = [
+  { name: 'o3', price: '40', desc: 'OpenAI 新一代模型，功能强大，适合多场景应用' },
+  { name: 'o4-mini', price: '4.4', desc: '轻量级 GPT-4 体验，兼顾性能与成本' },
+  { name: 'GPT-4.1', price: '8', desc: 'OpenAI 最新标准版模型，推理能力强' },
+  { name: 'GPT-4.1-mini', price: '1.6', desc: '适合日常使用的 GPT-4.1 精简版' },
+  { name: 'GPT-4.1-nano', price: '0.4', desc: '极致性价比，快速响应，适合轻量任务' },
+  { name: 'GPT-4.5', price: '150', desc: 'OpenAI 高级旗舰模型，性能顶级' },
+  { name: 'o3-mini', price: '4.4', desc: 'o3 系列的小型版本，轻便且高效' },
+  { name: 'GPT-4o', price: '10', desc: '多模态旗舰模型，支持语音、图像、文本交互' },
+  { name: 'GPT-4o-mini', price: '5', desc: 'GPT-4o 的轻量版本，功能丰富性价比高' },
+  { name: 'grok-3', price: '15', desc: '由xAI推出，强调实时性和长上下文处理能力' },
+  { name: 'grok-3-mini', price: '0.5', desc: 'grok-3 的轻量版，适用于基础任务' },
+  { name: 'DeepSeek-chat', price: '1', desc: '国产大模型代表，主打中文语义理解' },
+  { name: 'DeepSeek-R1', price: '2', desc: 'DeepSeek 系列中的推理加强模型' },
+  { name: 'Phi-4', price: '0.5', desc: '微软推出的小而强大模型，适合部署边缘任务' },
+  { name: 'Phi-4-reasoning', price: '0.3', desc: 'Phi-4 的逻辑推理优化版本' },
+  { name: 'Phi-4-mini-instruct', price: '0.3', desc: '专为指令执行设计的微型模型' },
+  { name: 'GPT-4-8K', price: '60', desc: 'GPT-4 模型支持 8K 上下文，适合大段输入任务' },
+  { name: 'GPT-4-32K', price: '120', desc: 'GPT-4 支持最大 32K 上下文，适合复杂应用' },
+  { name: '更多模型请订阅查看....', price: '....', desc: '.....' },
+];
+</script>
+
+<template>
+  <div class="p-6 max-w-5xl mx-auto">
+    <h1 class="text-3xl font-bold mb-4 text-center">
+      全网AI模型 一键解锁 · 超高性价比
+    </h1>
+    <p class="text-center text-gray-600 mb-6">
+      意心AI 为您集成市面上热门模型，订阅即享多模型使用权限，无需额外购买，真正做到一步到位。
+    </p>
+
+    <div class="bg-white shadow rounded-2xl overflow-hidden">
+      <table class="w-full table-auto border-collapse">
+        <thead class="bg-gray-100">
+          <tr>
+            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
+              模型
+            </th>
+            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
+              市价（元/月）
+            </th>
+            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
+              简介
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="model in models" :key="model.name" class="border-t hover:bg-gray-50">
+            <td class="px-4 py-2 text-sm font-medium text-gray-800">
+              {{ model.name }}
+            </td>
+            <td class="px-4 py-2 text-sm">
+              {{ model.price }}
+            </td>
+            <td class="px-4 py-2 text-sm text-gray-500">
+              {{ model.desc || '-' }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="mt-8 text-center">
+      <h2 class="text-2xl font-semibold mb-2">
+        一口价订阅，仅需 <span class="text-red-500 text-3xl font-bold">49.9元/月</span>
+      </h2>
+      <p class="text-gray-600 mb-4">
+        即解锁以上全部模型，随时切换，无需单独付费。
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+th, td {
+  border-bottom: 1px solid #e5e7eb;
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/components/modeList/index.vue b/Yi.Ai.Vue3/src/components/modeList/index.vue
new file mode 100644
index 00000000..d5f7dc77
--- /dev/null
+++ b/Yi.Ai.Vue3/src/components/modeList/index.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ElMessageBox } from 'element-plus';
+
+const models = [
+  { name: 'o3', price: '40', desc: 'OpenAI 新一代模型，功能强大，适合多场景应用' },
+  { name: 'o4-mini', price: '4.4', desc: '轻量级 GPT-4 体验，兼顾性能与成本' },
+  { name: 'GPT-4.1', price: '8', desc: 'OpenAI 最新标准版模型，推理能力强' },
+  { name: 'GPT-4.1-mini', price: '1.6', desc: '适合日常使用的 GPT-4.1 精简版' },
+  { name: 'GPT-4.1-nano', price: '0.4', desc: '极致性价比，快速响应，适合轻量任务' },
+  { name: 'GPT-4.5', price: '150', desc: 'OpenAI 高级旗舰模型，性能顶级' },
+  { name: 'o3-mini', price: '4.4', desc: 'o3 系列的小型版本，轻便且高效' },
+  { name: 'GPT-4o', price: '10', desc: '多模态旗舰模型，支持语音、图像、文本交互' },
+  { name: 'GPT-4o-mini', price: '5', desc: 'GPT-4o 的轻量版本，功能丰富性价比高' },
+  { name: 'grok-3', price: '15', desc: '由xAI推出，强调实时性和长上下文处理能力' },
+  { name: 'grok-3-mini', price: '0.5', desc: 'grok-3 的轻量版，适用于基础任务' },
+  { name: 'DeepSeek-chat', price: '1', desc: '国产大模型代表，主打中文语义理解' },
+  { name: 'DeepSeek-R1', price: '2', desc: 'DeepSeek 系列中的推理加强模型' },
+  { name: 'Phi-4', price: '0.5', desc: '微软推出的小而强大模型，适合部署边缘任务' },
+  { name: 'Phi-4-reasoning', price: '0.3', desc: 'Phi-4 的逻辑推理优化版本' },
+  { name: 'Phi-4-mini-instruct', price: '0.3', desc: '专为指令执行设计的微型模型' },
+  { name: 'GPT-4-8K', price: '60', desc: 'GPT-4 模型支持 8K 上下文，适合大段输入任务' },
+  { name: 'GPT-4-32K', price: '120', desc: 'GPT-4 支持最大 32K 上下文，适合复杂应用' },
+];
+
+function openContact() {
+  ElMessageBox.alert('请添加站长微信获取充值方式，备注“AI”以便通过。', '联系站长', {
+    confirmButtonText: '我知道了',
+    type: 'info',
+  });
+}
+</script>
+
+<template>
+  <div class="p-6 max-w-5xl mx-auto">
+    <h1 class="text-3xl font-bold mb-4 text-center">
+      全网AI模型 一键解锁 · 超高性价比
+    </h1>
+    <p class="text-center text-gray-600 mb-6">
+      意心AI 为您集成市面上热门模型，订阅即享多模型使用权限，无需额外购买，真正做到一步到位。
+    </p>
+
+    <div class="bg-white shadow rounded-2xl overflow-hidden">
+      <table class="w-full table-auto border-collapse">
+        <thead class="bg-gray-100">
+          <tr>
+            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
+              模型
+            </th>
+            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
+              市价（元/月）
+            </th>
+            <th class="px-4 py-2 text-left text-sm font-semibold text-gray-700">
+              简介
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="model in models" :key="model.name" class="border-t hover:bg-gray-50">
+            <td class="px-4 py-2 text-sm font-medium text-gray-800">
+              {{ model.name }}
+            </td>
+            <td class="px-4 py-2 text-sm">
+              {{ model.price }}
+            </td>
+            <td class="px-4 py-2 text-sm text-gray-500">
+              {{ model.desc || '-' }}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div class="mt-8 text-center">
+      <h2 class="text-2xl font-semibold mb-2">
+        一口价订阅，仅需 <span class="text-red-500 text-3xl font-bold">9.9元/月</span>
+      </h2>
+      <p class="text-gray-600 mb-4">
+        即解锁以上全部模型，随时切换，无需单独付费。
+      </p>
+      <button class="bg-blue-600 hover:bg-blue-700 text-white text-lg px-6 py-2 rounded-xl transition" @click="openContact">
+        立即订阅
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+th, td {
+  border-bottom: 1px solid #e5e7eb;
+}
+</style>
diff --git a/Yi.Ai.Vue3/src/data/products.ts b/Yi.Ai.Vue3/src/data/products.ts
index e6f92531..74fd170d 100644
--- a/Yi.Ai.Vue3/src/data/products.ts
+++ b/Yi.Ai.Vue3/src/data/products.ts
@@ -1,143 +1,83 @@
-// 创建产品数据
-import type { Product } from '@/api/products/products';
+// src/data/products.ts
+import { CircleCheck } from '@element-plus/icons-vue';
 
-export const products: Product[] = [
+export const products = [
   {
-    id: 'basic',
-    name: '基础版',
-    title: 'AI基础解决方案',
-    description: '适合个人用户和小型团队的入门级AI工具',
-    highlight: '性价比之选',
+    id: 'yixinai',
+    name: '意心AI',
+    title: '全站AI模型直连支持',
+    description: '基础模型 + 高级模型 + 超级加速，一次订阅全部享受。',
+    highlight: '市面罕见直连站点 · 不限速 · 无套路',
     features: [
       {
-        icon: 'MagicStick',
-        title: '基础模型',
-        description: '使用我们的基础AI模型完成日常任务',
+        icon: CircleCheck,
+        title: '基础与高级模型支持',
+        description: '支持GPT-4、Claude、Gemini、通义千问、讯飞星火等国内外AI模型',
       },
       {
-        icon: 'Clock',
-        title: '快速响应',
-        description: '平均响应时间在2秒以内',
+        icon: CircleCheck,
+        title: '不限次数使用',
+        description: '在合理日常范围内畅享无限调用',
       },
       {
-        icon: 'Lock',
-        title: '基础安全',
-        description: '标准数据加密和保护措施',
+        icon: CircleCheck,
+        title: 'AI超级加速',
+        description: '全平台加速支持，响应时间快人一步',
       },
     ],
     pricing: [
       {
-        name: '月付',
-        price: 99,
-        period: '月',
-        features: ['1000次请求/月', '基础模型访问', '标准支持'],
+        name: 'VIP',
+        price: 49.9,
+        period: '终身',
+        isPopular: false,
+        features: [
+          '基础+高级模型访问',
+          'AI超级加速',
+          '无限制使用',
+          '售后微信群支持',
+          '可用29.9元优惠券',
+        ],
       },
       {
-        name: '年付',
-        price: 899,
-        period: '年',
-        features: ['12000次请求/年', '基础模型访问', '标准支持', '节省15%'],
-      },
-    ],
-    faqs: [
-      {
-        question: '基础版适合哪些用户？',
-        answer: '适合个人开发者、小型团队或想尝试AI技术的用户。',
-      },
-      {
-        question: '超出请求次数会怎样？',
-        answer: '超出后可以按需购买额外请求包或升级到更高版本。',
-      },
-    ],
-  },
-  {
-    id: 'pro',
-    name: '专业版',
-    title: 'AI专业解决方案',
-    description: '为企业和专业开发者设计的高级AI工具集',
-    highlight: '最受欢迎',
-    features: [
-      {
-        icon: 'Cpu',
-        title: '高级模型',
-        description: '使用我们最先进的AI模型获得更好结果',
-      },
-      {
-        icon: 'DataLine',
-        title: '数据分析',
-        description: '内置数据分析工具和可视化',
-      },
-      {
-        icon: 'User',
-        title: '优先支持',
-        description: '专属客户经理和技术支持',
-      },
-    ],
-    pricing: [
-      {
-        name: '月付',
-        price: 299,
-        period: '月',
-        features: ['5000次请求/月', '高级模型访问', '优先支持', '数据分析工具'],
-      },
-      {
-        name: '年付',
-        price: 2599,
-        period: '年',
-        features: ['60000次请求/年', '高级模型访问', '专属客户经理', '节省25%', '数据分析工具'],
+        name: 'VIP + 邀请1人',
+        price: 29.9,
+        period: '每人',
         isPopular: true,
+        features: [
+          '基础+高级模型访问',
+          'AI超级加速',
+          '无限制使用',
+          '售后微信群支持',
+          '不支持优惠券',
+        ],
+      },
+      {
+        name: 'VIP + 支持站长',
+        price: 69.9,
+        period: '终身',
+        isPopular: false,
+        features: [
+          '基础+高级模型访问',
+          'AI超级加速',
+          '无限制使用',
+          '售后微信群优先处理',
+          '可用49.9元优惠券',
+        ],
       },
     ],
     faqs: [
       {
-        question: '专业版有什么额外功能？',
-        answer: '包含高级模型访问、数据分析工具和优先支持服务。',
+        question: '意心AI是否真的“无限制”？',
+        answer: '在日常合理使用范围内，我们不做次数限制。但如检测到滥用行为，将封号处理。',
       },
       {
-        question: '可以定制请求次数吗？',
-        answer: '可以联系我们定制适合您业务需求的套餐。',
-      },
-    ],
-  },
-  {
-    id: 'enterprise',
-    name: '企业版',
-    title: 'AI企业解决方案',
-    description: '为大型组织设计的全方位AI平台',
-    highlight: '全面定制',
-    features: [
-      {
-        icon: 'Setting',
-        title: '完全定制',
-        description: '根据您的需求定制AI模型和工作流',
+        question: '是否支持退款？',
+        answer: '我们支持良心售后，1天内可申请退款，请联系售后微信群或站长。',
       },
       {
-        icon: 'OfficeBuilding',
-        title: '专属部署',
-        description: '支持私有化部署和专属云服务',
-      },
-      {
-        icon: 'Service',
-        title: '专属团队',
-        description: '我们的工程师团队为您提供专属支持',
-      },
-    ],
-    pricing: [
-      {
-        name: '定制方案',
-        price: 0,
-        period: '',
-        features: ['无限请求', '完全定制模型', '私有化部署', '专属支持团队', 'SLA保障'],
-      },
-    ],
-    faqs: [
-      {
-        question: '企业版如何定价？',
-        answer: '根据您的具体需求定制价格，请联系我们的销售团队获取报价。',
-      },
-      {
-        question: '支持私有化部署吗？',
-        answer: '是的，我们支持完全的私有化部署以满足企业安全需求。',
+        question: '平台是直连的吗？',
+        answer: '是的，我们不是通过其他平台转发，而是与各大AI服务官方API直接对接。',
       },
     ],
   },
diff --git a/Yi.Ai.Vue3/src/layouts/LayoutBlankPage/index.vue b/Yi.Ai.Vue3/src/layouts/LayoutBlankPage/index.vue
index be2aa541..66f7045f 100644
--- a/Yi.Ai.Vue3/src/layouts/LayoutBlankPage/index.vue
+++ b/Yi.Ai.Vue3/src/layouts/LayoutBlankPage/index.vue
@@ -1,9 +1,19 @@
 <!-- LayoutBlankPage/index.vue -->
+<script setup lang="ts">
+</script>
+
 <template>
-  <!-- 完全空白，不包裹任何容器 -->
-  <router-view />
+  <div class="layout-blank">
+    <!-- 完全空白，不包裹任何容器 -->
+    <router-view />
+  </div>
 </template>
 
 <style scoped>
+.layout-blank{
+  height: 100vh;
+  overflow: auto;
+  margin: 20px ;
+}
 /* 无样式 */
 </style>
diff --git a/Yi.Ai.Vue3/src/pages/products/index.vue b/Yi.Ai.Vue3/src/pages/products/index.vue
index 3896d65d..f9538c14 100644
--- a/Yi.Ai.Vue3/src/pages/products/index.vue
+++ b/Yi.Ai.Vue3/src/pages/products/index.vue
@@ -1,462 +1,217 @@
-<script setup lang="ts">
-import type { Product } from '@/api/products/products';
-import { ArrowDown, CircleCheck } from '@element-plus/icons-vue';
-import { computed, ref } from 'vue';
-import { products } from '@/data/products';
-import { useDesignStore } from '@/stores';
+<script lang="ts" setup>
+import { CircleCheck } from '@element-plus/icons-vue';
+import { ElMessageBox } from 'element-plus';
+import SupportModelProducts from '@/components/SupportModelProducts/indexl.vue';
 
-const designStore = useDesignStore();
+const pricing = [
+  {
+    name: 'VIP',
+    price: 49.9,
+    period: '终身',
+    isPopular: false,
+    features: [
+      '基础+高级模型访问',
+      'AI超级加速',
+      '无限制使用',
+      '售后微信群支持',
+      '可用29.9元优惠券',
+    ],
+  },
+  {
+    name: 'VIP + 邀请1人',
+    price: 29.9,
+    period: '每人',
+    isPopular: true,
+    features: [
+      '基础+高级模型访问',
+      'AI超级加速',
+      '无限制使用',
+      '售后微信群支持',
+      '不支持优惠券',
+    ],
+  },
+  {
+    name: 'VIP + 支持站长',
+    price: 69.9,
+    period: '终身',
+    isPopular: false,
+    features: [
+      '基础+高级模型访问',
+      'AI超级加速',
+      '无限制使用',
+      '售后微信群优先处理',
+      '可用49.9元优惠券',
+    ],
+  },
+];
 
-onMounted(() => {
-  designStore._setLayout('blankPage');
-});
-const productsSection = ref<HTMLElement | null>(null);
+const faqs = [
+  {
+    question: '意心AI是否真的“无限制”？',
+    answer: '在日常合理使用范围内，我们不做次数限制。但如检测到滥用行为，将封号处理。',
+  },
+  {
+    question: '是否支持退款？',
+    answer: '我们支持良心售后，1天内可申请退款，请联系售后微信群或站长。',
+  },
+  {
+    question: '平台是直连的吗？',
+    answer: '是的，我们不是通过其他平台转发，而是与各大AI服务官方API直接对接。',
+  },
+];
+function openContact() {
+  ElMessageBox.alert(
+    `
+    <div class="text-center relative">
+      <h3 class="text-lg font-bold mb-3">请扫码或搜索微信号添加站长微信<br>
+      获取专属客服支持，完成充值</h3>
+      <div class="mb-4 flex items-center justify-center space-x-2">
+        <span class="font-semibold">微信账号：</span>
+        <span class="text-blue-600 font-mono select-text" id="wechat-id">chengzilaoge520</span>
+         <span class="cursor-pointer"  onclick="navigator.clipboard.writeText('chengzilaoge520').then(() => {  window.parent.ElMessage({
+              message: '微信号已复制到剪贴板',
+              type: 'success',
+              duration: 2000,
+            });})"
+          title="点击复制">
+          <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 opacity-70 hover:opacity-100" viewBox="0 0 24 24" fill="currentColor">
+            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v16h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 18H8V7h11v16z"/>
+          </svg>
+        </span>
 
-function scrollToProducts() {
-  productsSection.value?.scrollIntoView({ behavior: 'smooth' });
+
+      </div>
+
+      <div class="flex justify-center mb-4">
+        <img
+          src="/wx_chengzilaoge520.png"
+          class="w-50 h-70 border border-gray-200 rounded-lg shadow-md cursor-pointer hover:shadow-lg transition-transform hover:scale-105"
+          onclick="document.getElementById('wechat-qrcode-fullscreen').style.display = 'flex'"
+          alt="微信二维码"
+        >
+      </div>
+
+      <div class="text-sm text-gray-600">
+        <p class="mb-1">请备注 <span class="inline-block bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded text-xs">AI</span> 快速通过验证</p>
+      </div>
+
+      <!-- 全屏放大二维码 -->
+      <div
+        id="wechat-qrcode-fullscreen"
+        style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:9999; justify-content:center; align-items:center;"
+        onclick="this.style.display='none'"
+      >
+        <img
+          src="/wx_chengzilaoge520.png"
+          style="max-width:90%; max-height:90%; border:8px solid white; border-radius:16px; box-shadow:0 0 40px rgba(255,255,255,0.2);"
+        />
+      </div>
+
+
+    </div>
+    `,
+    '联系站长',
+    {
+      confirmButtonText: '我知道了',
+      dangerouslyUseHTMLString: true,
+      customClass: 'wechat-message-box',
+      callback: () => {
+        console.log('用户已查看微信信息');
+      },
+    },
+  );
 }
-
-function hasPopularPlan(product: Product) {
-  return product.pricing.some(plan => plan.isPopular);
-}
-
-const comparisonData = computed(() => {
-  return [
-    { feature: '基础模型访问', basic: '✓', pro: '✓', enterprise: '✓' },
-    { feature: '高级模型访问', basic: '✗', pro: '✓', enterprise: '✓' },
-    { feature: '请求次数', basic: '有限', pro: '较多', enterprise: '无限' },
-    { feature: '支持响应', basic: '标准', pro: '优先', enterprise: '专属' },
-    { feature: '数据分析工具', basic: '✗', pro: '✓', enterprise: '✓' },
-    { feature: '定制模型', basic: '✗', pro: '有限', enterprise: '完全' },
-    { feature: '部署方式', basic: '公有云', pro: '公有云', enterprise: '私有/公有' },
-  ];
-});
 </script>
 
 <template>
-  <div class="products-page">
-    <!-- Hero Section -->
-    <section class="hero-section">
-      <div class="container">
-        <h1 class="hero-title">
-          AI 订阅服务
-        </h1>
-        <p class="hero-subtitle">
-          选择适合您需求的AI解决方案，释放人工智能的全部潜力
-        </p>
-        <el-button type="primary" size="large" round @click="scrollToProducts">
-          查看产品
-          <el-icon class="ml-2">
-            <ArrowDown />
-          </el-icon>
-        </el-button>
-      </div>
-    </section>
+  <div class="px-6 py-10 max-w-7xl mx-auto">
+    <h1 class="text-4xl font-bold text-center mb-6">
+      意心AI 订阅套餐
+    </h1>
+    <p class="text-center text-lg text-gray-600 mb-10">
+      市面罕见直连站点 · 不限速 · 无套路
+    </p>
 
-    <!-- Products Comparison -->
-    <section class="comparison-section">
-      <div class="container">
-        <h2 class="section-title">
-          产品对比
-        </h2>
-        <div class="comparison-table">
-          <el-table :data="comparisonData" style="width: 100%" border>
-            <el-table-column prop="feature" label="功能" width="180" />
-            <el-table-column prop="basic" label="基础版" />
-            <el-table-column prop="pro" label="专业版" />
-            <el-table-column prop="enterprise" label="企业版" />
-          </el-table>
-        </div>
-      </div>
-    </section>
-
-    <!-- Products Cards -->
-    <section ref="productsSection" class="products-section">
-      <div class="container">
-        <h2 class="section-title">
-          我们的产品
-        </h2>
-        <div class="products-grid">
-          <el-card
-            v-for="product in products"
-            :key="product.id"
-            class="product-card"
-            :class="{ 'popular-card': hasPopularPlan(product) }"
-            shadow="hover"
+    <div class="grid md:grid-cols-3 gap-6">
+      <el-card
+        v-for="(plan, index) in pricing"
+        :key="index"
+        class="rounded-2xl shadow hover:shadow-lg transition-all" :class="[plan.isPopular ? 'border-2 border-blue-500' : '']"
+      >
+        <div class="flex flex-col items-center text-center">
+          <h2 class="text-2xl font-semibold mb-2">
+            {{ plan.name }}
+          </h2>
+          <p class="text-3xl font-bold text-blue-600 mb-2">
+            ￥{{ plan.price }}
+          </p>
+          <p class="text-sm text-gray-500 mb-4">
+            {{ plan.period }}
+          </p>
+          <el-divider />
+          <ul class="text-left space-y-2 w-full">
+            <li v-for="(feature, i) in plan.features" :key="i" class="flex items-start gap-2">
+              <el-icon><CircleCheck /></el-icon>
+              <span>{{ feature }}</span>
+            </li>
+          </ul>
+          <el-button
+            class="mt-6 w-full"
+            type="primary"
+            size="large"
+            @click="openContact"
           >
-            <div class="product-header">
-              <div v-if="hasPopularPlan(product)" class="product-badge">
-                最受欢迎
-              </div>
-              <h3 class="product-name">
-                {{ product.name }}
-              </h3>
-              <p class="product-title">
-                {{ product.title }}
-              </p>
-              <p class="product-description">
-                {{ product.description }}
-              </p>
-            </div>
-
-            <div class="product-highlight">
-              <el-tag type="info" effect="dark" round>
-                {{ product.highlight }}
-              </el-tag>
-            </div>
-
-            <div class="product-features">
-              <div v-for="feature in product.features" :key="feature.title" class="feature-item">
-                <el-icon class="feature-icon">
-                  <component :is="feature.icon" />
-                </el-icon>
-                <div class="feature-text">
-                  <h4>{{ feature.title }}</h4>
-                  <p>{{ feature.description }}</p>
-                </div>
-              </div>
-            </div>
-
-            <div class="pricing-plans">
-              <div
-                v-for="plan in product.pricing"
-                :key="plan.name"
-                class="pricing-plan"
-                :class="{ 'popular-plan': plan.isPopular }"
-              >
-                <div class="plan-header">
-                  <h4>{{ plan.name }}</h4>
-                  <div v-if="plan.price > 0" class="plan-price">
-                    <span class="price-amount">¥{{ plan.price }}</span>
-                    <span class="price-period">/{{ plan.period }}</span>
-                  </div>
-                  <div v-else class="plan-price">
-                    <span class="price-amount">定制价格</span>
-                  </div>
-                </div>
-                <ul class="plan-features">
-                  <li v-for="(feature, idx) in plan.features" :key="idx">
-                    <el-icon class="feature-check">
-                      <CircleCheck />
-                    </el-icon>
-                    {{ feature }}
-                  </li>
-                </ul>
-                <el-button
-                  type="primary"
-                  class="subscribe-btn"
-                  :class="{ 'popular-btn': plan.isPopular }"
-                  round
-                >
-                  立即订阅
-                </el-button>
-              </div>
-            </div>
-          </el-card>
+            立即订阅
+          </el-button>
         </div>
-      </div>
-    </section>
+      </el-card>
+    </div>
 
-    <!-- FAQ Section -->
-    <section class="faq-section">
-      <div class="container">
-        <h2 class="section-title">
-          常见问题
-        </h2>
-        <div class="faq-grid">
-          <el-collapse v-for="product in products" :key="`${product.id}-faq`" accordion>
-            <el-collapse-item :title="`${product.name}常见问题`" :name="product.id">
-              <div v-for="(faq, idx) in product.faqs" :key="idx" class="faq-item">
-                <h4>{{ faq.question }}</h4>
-                <p>{{ faq.answer }}</p>
-              </div>
-            </el-collapse-item>
-          </el-collapse>
-        </div>
-      </div>
-    </section>
+    <el-divider class="my-16">
+      充值流程说明
+    </el-divider>
+    <el-card class="max-w-2xl mx-auto shadow-md rounded-2xl">
+      <h3 class="text-xl font-semibold mb-4">
+        如何充值 VIP
+      </h3>
+      <ol class="list-decimal list-inside space-y-2 text-gray-700">
+        <li>注册意社区账号（手机验证码，如收不到可联系站长）</li>
+        <li>添加站长微信，备注“AI”</li>
+        <li>完成充值后，重新登录，即可解锁全部功能</li>
+      </ol>
+      <el-alert
+        class="mt-6"
+        type="warning"
+        title="请勿滥用，勿共享账号，系统将自动检测"
+        show-icon
+        :closable="false"
+      />
+    </el-card>
+
+    <SupportModelProducts />
+
+    <el-divider class="my-16">
+      常见问题
+    </el-divider>
+    <el-collapse class="max-w-3xl mx-auto" accordion>
+      <el-collapse-item
+        v-for="(faq, index) in faqs"
+        :key="index"
+        :title="faq.question"
+      >
+        <p class="text-gray-700">
+          {{ faq.answer }}
+        </p>
+      </el-collapse-item>
+    </el-collapse>
   </div>
 </template>
 
-<style scoped lang="scss">
-.products-page {
-  height: 100vh;
-  overflow: auto;
-  color: #333;
-  line-height: 1.6;
+<style scoped>
+.el-card {
+  transition: transform 0.2s ease;
 }
-
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 20px;
-}
-
-.section-title {
-  text-align: center;
-  font-size: 2rem;
-  margin-bottom: 2.5rem;
-  color: #2c3e50;
-  position: relative;
-
-  &::after {
-    content: '';
-    display: block;
-    width: 80px;
-    height: 4px;
-    background: linear-gradient(90deg, #3f87a6, #ebf8e1);
-    margin: 0.5rem auto 0;
-    border-radius: 2px;
-  }
-}
-
-/* Hero Section */
-.hero-section {
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-  padding: 6rem 0;
-  text-align: center;
-  color: #2c3e50;
-
-  .hero-title {
-    font-size: 3rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-  }
-
-  .hero-subtitle {
-    font-size: 1.25rem;
-    max-width: 700px;
-    margin: 0 auto 2rem;
-    color: #5a6a85;
-  }
-}
-
-/* Comparison Section */
-.comparison-section {
-  padding: 4rem 0;
-  background-color: #fff;
-
-  .comparison-table {
-    margin-top: 2rem;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-    border-radius: 8px;
-    overflow: hidden;
-  }
-}
-
-/* Products Section */
-.products-section {
-  padding: 4rem 0;
-  background-color: #f8fafc;
-
-  .products-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 2rem;
-    margin-top: 2rem;
-  }
-
-  .product-card {
-    border-radius: 12px;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    position: relative;
-    overflow: hidden;
-    border: none;
-
-    &:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
-    }
-
-    &.popular-card {
-      border-top: 4px solid #3f87a6;
-    }
-  }
-
-  .product-header {
-    padding: 1.5rem 1.5rem 0;
-    text-align: center;
-
-    .product-badge {
-      position: absolute;
-      top: 0;
-      right: 0;
-      background-color: #3f87a6;
-      color: white;
-      padding: 0.25rem 1rem;
-      border-bottom-left-radius: 8px;
-      font-size: 0.75rem;
-      font-weight: bold;
-    }
-
-    .product-name {
-      font-size: 1.5rem;
-      font-weight: 700;
-      margin-bottom: 0.5rem;
-      color: #2c3e50;
-    }
-
-    .product-title {
-      font-size: 1.1rem;
-      color: #3f87a6;
-      margin-bottom: 0.5rem;
-    }
-
-    .product-description {
-      color: #666;
-      margin-bottom: 1rem;
-    }
-  }
-
-  .product-highlight {
-    text-align: center;
-    margin: 1rem 0;
-  }
-
-  .product-features {
-    padding: 0 1.5rem;
-
-    .feature-item {
-      display: flex;
-      align-items: flex-start;
-      margin-bottom: 1.25rem;
-
-      .feature-icon {
-        font-size: 1.5rem;
-        color: #3f87a6;
-        margin-right: 1rem;
-        flex-shrink: 0;
-      }
-
-      .feature-text {
-        h4 {
-          margin: 0 0 0.25rem;
-          font-size: 1rem;
-          color: #2c3e50;
-        }
-
-        p {
-          margin: 0;
-          color: #666;
-          font-size: 0.9rem;
-        }
-      }
-    }
-  }
-
-  .pricing-plans {
-    margin-top: 2rem;
-    border-top: 1px solid #eee;
-    padding: 1.5rem;
-
-    .pricing-plan {
-      background: #fff;
-      border-radius: 8px;
-      padding: 1.5rem;
-      margin-bottom: 1.5rem;
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-
-      &.popular-plan {
-        border: 2px solid #3f87a6;
-      }
-
-      .plan-header {
-        text-align: center;
-        margin-bottom: 1rem;
-
-        h4 {
-          margin: 0 0 0.5rem;
-          font-size: 1.1rem;
-          color: #2c3e50;
-        }
-
-        .plan-price {
-          .price-amount {
-            font-size: 1.75rem;
-            font-weight: 700;
-            color: #3f87a6;
-          }
-
-          .price-period {
-            font-size: 1rem;
-            color: #666;
-          }
-        }
-      }
-
-      .plan-features {
-        list-style: none;
-        padding: 0;
-        margin: 0 0 1.5rem;
-
-        li {
-          padding: 0.5rem 0;
-          font-size: 0.9rem;
-          color: #555;
-
-          .feature-check {
-            color: #3f87a6;
-            margin-right: 0.5rem;
-          }
-        }
-      }
-
-      .subscribe-btn {
-        width: 100%;
-
-        &.popular-btn {
-          background: linear-gradient(90deg, #3f87a6, #5ab1d8);
-          border: none;
-        }
-      }
-    }
-  }
-}
-
-/* FAQ Section */
-.faq-section {
-  padding: 4rem 0;
-  background-color: #fff;
-
-  .faq-grid {
-    max-width: 800px;
-    margin: 0 auto;
-
-    .faq-item {
-      padding: 1rem 0;
-
-      h4 {
-        margin: 0 0 0.5rem;
-        color: #2c3e50;
-      }
-
-      p {
-        margin: 0;
-        color: #666;
-      }
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .hero-section {
-    padding: 4rem 0;
-
-    .hero-title {
-      font-size: 2.2rem;
-    }
-
-    .hero-subtitle {
-      font-size: 1.1rem;
-    }
-  }
-
-  .products-grid {
-    grid-template-columns: 1fr !important;
-  }
-
-  .section-title {
-    font-size: 1.75rem;
-  }
+.el-card:hover {
+  transform: scale(1.02);
 }
 </style>
diff --git a/Yi.Ai.Vue3/types/components.d.ts b/Yi.Ai.Vue3/types/components.d.ts
index 15e68aac..d34cc76e 100644
--- a/Yi.Ai.Vue3/types/components.d.ts
+++ b/Yi.Ai.Vue3/types/components.d.ts
@@ -10,12 +10,16 @@ declare module 'vue' {
   export interface GlobalComponents {
     AccountPassword: typeof import('./../src/components/LoginDialog/components/FormLogin/AccountPassword.vue')['default']
     DeepThinking: typeof import('./../src/components/DeepThinking/index.vue')['default']
+    ElAlert: typeof import('element-plus/es')['ElAlert']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
@@ -25,13 +29,18 @@ declare module 'vue' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     FilesSelect: typeof import('./../src/components/FilesSelect/index.vue')['default']
     IconSelect: typeof import('./../src/components/IconSelect/index.vue')['default']
+    Indexl: typeof import('./../src/components/SupportModelProducts/indexl.vue')['default']
     LoginDialog: typeof import('./../src/components/LoginDialog/index.vue')['default']
+    ModeList: typeof import('./../src/components/modeList/index.vue')['default']
     ModelSelect: typeof import('./../src/components/ModelSelect/index.vue')['default']
     Popover: typeof import('./../src/components/Popover/index.vue')['default']
     QrCodeLogin: typeof import('./../src/components/LoginDialog/components/QrCodeLogin/index.vue')['default']