feat: 完成api页面搭建

2026-02-06 00:41:13 +08:00
parent 0b30dbb8de
commit 19b27d8e9a
6 changed files with 385 additions and 4 deletions
--- a/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/AiAccountService.cs
+++ b/Yi.Abp.Net8/module/ai-hub/Yi.Framework.AiHub.Application/Services/AiAccountService.cs
@@ -13,6 +13,7 @@ using Yi.Framework.Rbac.Application.Contracts.IServices;
 using Yi.Framework.Rbac.Domain.Shared.Dtos;
 using Yi.Framework.SqlSugarCore.Abstractions;
 using Yi.Framework.AiHub.Domain.Extensions;
+using Yi.Framework.AiHub.Domain.Shared.Enums;

 namespace Yi.Framework.AiHub.Application.Services;

@@ -58,7 +59,7 @@ public class AiAccountService : ApplicationService
        if (output.IsVip)
        {
            var recharges = await _rechargeRepository._DbQueryable
-                .Where(x => x.UserId == userId)
+                .Where(x => x.UserId == userId && x.RechargeType == RechargeTypeEnum.Vip)
                .ToListAsync();

            if (recharges.Any())
--- a/Yi.Ai.Vue3/src/components/userPersonalCenter/components/UserManagement.vue
+++ b/Yi.Ai.Vue3/src/components/userPersonalCenter/components/UserManagement.vue
@@ -36,6 +36,40 @@ const userVipStatus = computed(() => {
  return isUserVip();
 });

+// VIP到期时间
+const vipExpireTime = computed(() => {
+  return userStore.userInfo?.vipExpireTime || null;
+});
+
+// 计算距离VIP到期还有多少天
+const vipRemainingDays = computed(() => {
+  if (!vipExpireTime.value) return null;
+  const expireDate = new Date(vipExpireTime.value);
+  const now = new Date();
+  const diffTime = expireDate.getTime() - now.getTime();
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  return diffDays;
+});
+
+// VIP到期状态文本
+const vipExpireStatusText = computed(() => {
+  if (!userVipStatus.value) return '';
+  if (!vipExpireTime.value) return '永久VIP';
+  if (vipRemainingDays.value === null) return '';
+  if (vipRemainingDays.value < 0) return '已过期';
+  if (vipRemainingDays.value === 0) return '今日到期';
+  return `${vipRemainingDays.value}天后到期`;
+});
+
+// VIP到期状态标签类型
+const vipExpireTagType = computed(() => {
+  if (!vipExpireTime.value) return 'success';
+  if (vipRemainingDays.value === null) return 'info';
+  if (vipRemainingDays.value < 0) return 'danger';
+  if (vipRemainingDays.value <= 7) return 'warning';
+  return 'success';
+});
+
 // 格式化日期
 function formatDate(dateString: string | null) {
  if (!dateString)
@@ -161,6 +195,28 @@ function bindWechat() {
                注册时间
              </div>
            </div>
+            <!-- VIP到期时间 -->
+            <div v-if="userVipStatus" class="stat-item">
+              <div class="stat-value">
+                <template v-if="vipExpireTime">
+                  {{ formatDate(vipExpireTime)?.split(' ')[0] || '-' }}
+                </template>
+                <template v-else>
+                  永久
+                </template>
+              </div>
+              <div class="stat-label">
+                VIP到期时间
+                <el-tag
+                  v-if="vipExpireStatusText"
+                  :type="vipExpireTagType"
+                  size="small"
+                  style="margin-left: 4px;"
+                >
+                  {{ vipExpireStatusText }}
+                </el-tag>
+              </div>
+            </div>
          </div>
        </div>
      </div>
--- a/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
+++ b/Yi.Ai.Vue3/src/layouts/components/Header/index.vue
@@ -127,6 +127,9 @@ function toggleMobileMenu() {
          <el-menu-item index="/chat/agent">
            AI智能体
          </el-menu-item>
+          <el-menu-item index="/chat/api">
+            AI接口
+          </el-menu-item>
        </el-sub-menu>

        <!-- 公告按钮 -->
@@ -137,8 +140,11 @@ function toggleMobileMenu() {
        <!-- 模型库下拉菜单 -->
        <el-sub-menu index="model-library" class="model-library-submenu" popper-class="custom-popover">
          <template #title>
-            <span class="menu-title" @click="handleModelLibraryClick">模型库</span>
+            <span class="menu-title" @click="handleModelLibraryClick">模型</span>
          </template>
+          <el-menu-item index="/model-library">
+            模型库
+          </el-menu-item>
          <el-menu-item index="/ranking">
            模型排行榜
          </el-menu-item>
@@ -272,14 +278,20 @@ function toggleMobileMenu() {
          <el-menu-item index="/chat/agent">
            AI智能体
          </el-menu-item>
+          <el-menu-item index="/chat/api">
+            AI接口
+          </el-menu-item>
        </el-sub-menu>

        <!-- 模型库下拉菜单 -->
        <el-sub-menu index="model-library">
          <template #title>
            <el-icon><Box /></el-icon>
-            <span>模型库</span>
+            <span>模型</span>
          </template>
+          <el-menu-item index="/model-library">
+            模型库
+          </el-menu-item>
          <el-menu-item index="/ranking">
            模型排行榜
          </el-menu-item>
--- a/Yi.Ai.Vue3/src/pages/chat/api/index.vue
+++ b/Yi.Ai.Vue3/src/pages/chat/api/index.vue
@@ -0,0 +1,305 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { CopyDocument } from '@element-plus/icons-vue';
+
+// API配置
+const apiList = [
+  { url: '/v1/chat/completions', name: 'OpenAi Completions' },
+  { url: '/v1/messages', name: 'Claude Messages' },
+  { url: '/v1/responses', name: 'OpenAi Responses' },
+  { url: '/v1beta/models/{model}/streamGenerateContent', name: 'Gemini GenerateContent' },
+];
+
+const baseUrl = 'https://yxai.chat';
+const currentIndex = ref(0);
+let autoPlayTimer: ReturnType<typeof setInterval> | null = null;
+
+// 当前选中的API
+const currentApi = computed(() => apiList[currentIndex.value]);
+
+// 完整URL
+const fullUrl = computed(() => `${baseUrl}${currentApi.value.url}`);
+
+// 切换API
+function selectApi(index: number) {
+  currentIndex.value = index;
+  resetAutoPlay();
+}
+
+// 复制URL
+async function copyUrl() {
+  try {
+    await navigator.clipboard.writeText(fullUrl.value);
+    ElMessage.success('复制成功');
+  } catch {
+    ElMessage.error('复制失败');
+  }
+}
+
+// 自动轮播
+function startAutoPlay() {
+  autoPlayTimer = setInterval(() => {
+    currentIndex.value = (currentIndex.value + 1) % apiList.length;
+  }, 3000);
+}
+
+function resetAutoPlay() {
+  if (autoPlayTimer) {
+    clearInterval(autoPlayTimer);
+  }
+  startAutoPlay();
+}
+
+onMounted(() => {
+  startAutoPlay();
+});
+
+onUnmounted(() => {
+  if (autoPlayTimer) {
+    clearInterval(autoPlayTimer);
+  }
+});
+</script>
+
+<template>
+  <div class="api-page">
+    <div class="api-container">
+      <!-- 标题 -->
+      <h1 class="page-title">AI 接口地址</h1>
+      <p class="page-subtitle">支持多种主流AI接口协议，一键切换</p>
+
+      <!-- 主内容区 -->
+      <div class="content-wrapper">
+        <!-- 左侧URL展示 -->
+        <div class="url-section">
+          <div class="url-card">
+            <div class="url-label">接口地址</div>
+            <div class="url-display">
+              <span class="base-url">{{ baseUrl }}</span>
+              <span class="api-path">{{ currentApi.url }}</span>
+            </div>
+            <button class="copy-btn" @click="copyUrl">
+              <el-icon><CopyDocument /></el-icon>
+              复制
+            </button>
+          </div>
+        </div>
+
+        <!-- 右侧按钮列表 -->
+        <div class="api-buttons">
+          <button
+            v-for="(api, index) in apiList"
+            :key="index"
+            class="api-btn"
+            :class="{ active: currentIndex === index }"
+            @click="selectApi(index)"
+          >
+            {{ api.name }}
+          </button>
+        </div>
+      </div>
+
+      <!-- 进度指示器 -->
+      <div class="progress-dots">
+        <span
+          v-for="(_, index) in apiList"
+          :key="index"
+          class="dot"
+          :class="{ active: currentIndex === index }"
+          @click="selectApi(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.api-page {
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.api-container {
+  width: 100%;
+  max-width: 900px;
+  padding: 50px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(20px);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.page-title {
+  text-align: center;
+  font-size: 36px;
+  font-weight: 700;
+  color: #fff;
+  margin: 0 0 10px 0;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.page-subtitle {
+  text-align: center;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0 0 40px 0;
+}
+
+.content-wrapper {
+  display: flex;
+  gap: 30px;
+  align-items: stretch;
+}
+
+.url-section {
+  flex: 1;
+}
+
+.url-card {
+  position: relative;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16px;
+  padding: 30px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+}
+
+.url-label {
+  font-size: 14px;
+  color: #666;
+  margin-bottom: 15px;
+  font-weight: 500;
+}
+
+.url-display {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-family: 'Monaco', 'Menlo', monospace;
+  word-break: break-all;
+}
+
+.base-url {
+  font-size: 18px;
+  color: #409eff;
+  font-weight: 600;
+}
+
+.api-path {
+  font-size: 16px;
+  color: #333;
+  padding: 12px;
+  background: #f5f7fa;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 15px;
+  right: 15px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  background: #409eff;
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: #66b1ff;
+    transform: translateY(-2px);
+  }
+}
+
+.api-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 220px;
+}
+
+.api-btn {
+  padding: 16px 24px;
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-radius: 12px;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: left;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.3);
+    transform: translateX(5px);
+  }
+
+  &.active {
+    background: #fff;
+    color: #667eea;
+    border-color: #fff;
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.progress-dots {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 30px;
+}
+
+.dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.4);
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.7);
+  }
+
+  &.active {
+    background: #fff;
+    transform: scale(1.3);
+  }
+}
+
+@media (max-width: 768px) {
+  .api-container {
+    padding: 30px 20px;
+  }
+
+  .page-title {
+    font-size: 28px;
+  }
+
+  .content-wrapper {
+    flex-direction: column;
+  }
+
+  .api-buttons {
+    min-width: auto;
+  }
+
+  .api-btn {
+    text-align: center;
+  }
+}
+</style>
--- a/Yi.Ai.Vue3/src/routers/modules/staticRouter.ts
+++ b/Yi.Ai.Vue3/src/routers/modules/staticRouter.ts
@@ -77,6 +77,14 @@ export const layoutRouter: RouteRecordRaw[] = [
              title: '意心Ai-AI智能体',
            },
          },
+          {
+            path: 'api',
+            name: 'chatApi',
+            component: () => import('@/pages/chat/api/index.vue'),
+            meta: {
+              title: '意心Ai-AI接口',
+            },
+          },
        ],
      },

--- a/Yi.Ai.Vue3/types/import_meta.d.ts
+++ b/Yi.Ai.Vue3/types/import_meta.d.ts
@@ -7,7 +7,6 @@ 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;
 }