feat: 增加支付宝在线支付、套餐订购弹窗、会员权益、支持模型展示等

Yi.Ai.Vue3/src/layouts/components/Header/components/Avatar.vue

@@ -5,6 +5,7 @@ import Popover from '@/components/Popover/index.vue';
 import SvgIcon from '@/components/SvgIcon/index.vue';
 import { useUserStore } from '@/stores';
 import { useSessionStore } from '@/stores/modules/session';
+import { showProductPackage } from '@/utils/product-package';
 import { getUserProfilePicture, isUserVip } from '@/utils/user';
 
 const router = useRouter();
@@ -63,6 +64,7 @@ const navItems = [
   { name: 'apiKey', label: 'API密钥', icon: 'Key' },
   { name: 'rechargeLog', label: '充值记录', icon: 'Document' },
   { name: 'usageStatistics', label: '用量统计', icon: 'Histogram' },
+  // { name: 'usageStatistics2', label: '用量统计2', icon: 'Histogram' },
 ];
 function openDialog() {
   dialogVisible.value = true;
@@ -163,12 +165,30 @@ function openVipGuide() {
 }
 
 /* 弹出面板 结束 */
+function onProductPackage() {
+  showProductPackage();
+}
+// 直接调用
 </script>
 
 <template>
   <div class="flex items-center gap-2">
+    <el-button
+      class="buy-btn flex items-center gap-2 px-5 py-2 font-semibold shadow-lg"
+      @click="onProductPackage"
+    >
+      <!--      <svg -->
+      <!--        xmlns="http://www.w3.org/2000/svg" -->
+      <!--        class="icon-rocket w-5 h-5 animate-bounce" -->
+      <!--        viewBox="0 0 24 24" -->
+      <!--        fill="currentColor" -->
+      <!--      > -->
+      <!--        <path d="M12 2C10 5 8 8 8 11l-5 5c0 3 3 3 5 5s5-3 8-5l5-5c-3-2-6-4-8-9z" /> -->
+      <!--      </svg> -->
+      <span>立即购买</span>
+    </el-button>
     <!-- 用户信息区域 -->
-    <div class=" cursor-pointer flex flex-col text-right mr-2 leading-tight" @click="openVipGuide">
+    <div class=" cursor-pointer flex flex-col text-right mr-2 leading-tight" @click="onProductPackage">
       <div class="text-sm font-semibold text-gray-800">
         {{ userStore.userInfo?.user.nick ?? '未登录用户' }}
       </div>
@@ -264,6 +284,10 @@ function openVipGuide() {
       <template #usageStatistics>
         <usage-statistics />
       </template>
+      <!-- 用量统计 -->
+      <!--      <template #usageStatistics2> -->
+      <!--        <usage-statistics2 /> -->
+      <!--      </template> -->
 
       <!-- 角色管理内容 -->
       <template #role>
@@ -297,4 +321,31 @@ function openVipGuide() {
   border-radius: 8px;
   box-shadow: 0 4px 16px rgb(0 0 0 / 8%);
 }
+
+.buy-btn {
+  background: linear-gradient(90deg, #FFD700, #FFC107);
+  color: #fff;
+  border: none;
+  border-radius: 9999px;
+  transition: transform 0.2s, box-shadow 0.2s;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
+    background: linear-gradient(90deg, #FFC107, #FFD700);
+  }
+
+  .icon-rocket {
+    color: #fff;
+  }
+
+  .animate-bounce {
+    animation: bounce 1.2s infinite;
+  }
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+}
 </style>