feat: 产品订阅页面优化

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>