From 28c718ab105ffe9ab4e577c69fead79733f72227 Mon Sep 17 00:00:00 2001
From: tbphp <admin@tbphp.net>
Date: Sun, 13 Jul 2025 05:21:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=85=AC=E5=85=B1=E5=BA=95=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/AppFooter.vue     | 372 +++++++++++++++++++++++++++
 web/src/components/Layout.vue        |  12 +
 web/src/components/keys/KeyTable.vue |   6 +-
 web/src/services/version.ts          | 176 +++++++++++++
 web/src/views/Keys.vue               |   2 +-
 web/src/views/Login.vue              |  20 +-
 6 files changed, 568 insertions(+), 20 deletions(-)
 create mode 100644 web/src/components/AppFooter.vue
 create mode 100644 web/src/services/version.ts

diff --git a/web/src/components/AppFooter.vue b/web/src/components/AppFooter.vue
new file mode 100644
index 0000000..9569e75
--- /dev/null
+++ b/web/src/components/AppFooter.vue
@@ -0,0 +1,372 @@
+<script setup lang="ts">
+import { versionService, type VersionInfo } from "@/services/version";
+import {
+  BugOutline,
+  CheckmarkCircleOutline,
+  DocumentTextOutline,
+  LogoGithub,
+  TimeOutline,
+  WarningOutline,
+} from "@vicons/ionicons5";
+import { NIcon, NTooltip } from "naive-ui";
+import { onMounted, ref } from "vue";
+
+const versionInfo = ref<VersionInfo>({
+  currentVersion: "0.1.0",
+  latestVersion: null,
+  isLatest: false,
+  hasUpdate: false,
+  releaseUrl: null,
+  lastCheckTime: 0,
+  status: "checking",
+});
+
+const isChecking = ref(false);
+
+// 版本状态配置
+const statusConfig = {
+  checking: {
+    color: "#0066cc",
+    icon: TimeOutline,
+    text: "检查中...",
+  },
+  latest: {
+    color: "#18a058",
+    icon: CheckmarkCircleOutline,
+    text: "最新版本",
+  },
+  "update-available": {
+    color: "#f0a020",
+    icon: WarningOutline,
+    text: "有更新",
+  },
+  error: {
+    color: "#909399",
+    icon: undefined,
+    text: "",
+  },
+};
+
+const formatVersion = (version: string): string => {
+  return version.startsWith("v") ? version : `v${version}`;
+};
+
+const checkVersion = async () => {
+  if (isChecking.value) {
+    return;
+  }
+
+  isChecking.value = true;
+  try {
+    const result = await versionService.checkForUpdates();
+    versionInfo.value = result;
+  } catch (error) {
+    console.warn("Version check failed:", error);
+  } finally {
+    isChecking.value = false;
+  }
+};
+
+const handleVersionClick = () => {
+  if (versionInfo.value.status === "update-available" && versionInfo.value.releaseUrl) {
+    window.open(versionInfo.value.releaseUrl, "_blank", "noopener,noreferrer");
+  }
+};
+
+onMounted(() => {
+  checkVersion();
+});
+</script>
+
+<template>
+  <footer class="app-footer">
+    <div class="footer-container">
+      <!-- 主要信息区 -->
+      <div class="footer-main">
+        <span class="project-info">
+          <a href="https://github.com/tbphp/gpt-load" target="_blank" rel="noopener noreferrer">
+            <b>GPT-Load</b>
+          </a>
+          - 高性能 AI API 轮询代理服务
+        </span>
+
+        <span class="divider">|</span>
+
+        <!-- 版本信息 -->
+        <div
+          class="version-container"
+          :class="{
+            'version-clickable': versionInfo.status === 'update-available',
+            'version-checking': isChecking,
+          }"
+          @click="handleVersionClick"
+        >
+          <n-icon
+            v-if="statusConfig[versionInfo.status].icon"
+            :component="statusConfig[versionInfo.status].icon"
+            :color="statusConfig[versionInfo.status].color"
+            :size="14"
+            class="version-icon"
+          />
+          <span class="version-text" :style="{ color: statusConfig[versionInfo.status].color }">
+            {{ formatVersion(versionInfo.currentVersion) }}
+            <template v-if="versionInfo.status === 'latest'">
+              ({{ statusConfig[versionInfo.status].text }})
+            </template>
+            <template v-else-if="versionInfo.status === 'update-available'">
+              ({{ statusConfig[versionInfo.status].text }}:
+              {{ formatVersion(versionInfo.latestVersion || "") }})
+            </template>
+            <template v-else-if="versionInfo.status === 'checking'">
+              ({{ statusConfig[versionInfo.status].text }})
+            </template>
+          </span>
+        </div>
+
+        <span class="divider">|</span>
+
+        <!-- 链接区 -->
+        <div class="links-container">
+          <n-tooltip trigger="hover" placement="top">
+            <template #trigger>
+              <a
+                href="https://gpt-load.com"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="footer-link"
+              >
+                <n-icon :component="DocumentTextOutline" :size="14" class="link-icon" />
+                <span>文档</span>
+              </a>
+            </template>
+            官方文档
+          </n-tooltip>
+
+          <n-tooltip trigger="hover" placement="top">
+            <template #trigger>
+              <a
+                href="https://github.com/tbphp/gpt-load"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="footer-link"
+              >
+                <n-icon :component="LogoGithub" :size="14" class="link-icon" />
+                <span>GitHub</span>
+              </a>
+            </template>
+            查看源码
+          </n-tooltip>
+
+          <n-tooltip trigger="hover" placement="top">
+            <template #trigger>
+              <a
+                href="https://github.com/tbphp/gpt-load/issues"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="footer-link"
+              >
+                <n-icon :component="BugOutline" :size="14" class="link-icon" />
+                <span>反馈</span>
+              </a>
+            </template>
+            问题反馈
+          </n-tooltip>
+        </div>
+
+        <span class="divider">|</span>
+
+        <!-- 版权信息 -->
+        <div class="copyright-container">
+          <span class="copyright-text">
+            © 2025 by
+            <a
+              href="https://github.com/tbphp"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="author-link"
+            >
+              tbphp
+            </a>
+          </span>
+          <span class="license-text">MIT License</span>
+        </div>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.app-footer {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(20px);
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+  padding: 12px 24px;
+  font-size: 14px;
+  height: 52px;
+}
+
+.footer-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer-main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+  line-height: 1.4;
+}
+
+.project-info {
+  color: #666;
+  font-weight: 500;
+}
+
+.project-info a {
+  color: #667eea;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.project-info a:hover {
+  text-decoration: underline;
+}
+
+.divider {
+  color: #d0d0d0;
+  margin: 0 4px;
+}
+
+/* 版本信息区域 */
+.version-container {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+
+.version-icon {
+  display: flex;
+  align-items: center;
+}
+
+.version-text {
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.version-clickable {
+  cursor: pointer;
+}
+
+.version-clickable:hover {
+  background: rgba(240, 160, 32, 0.1);
+  transform: translateY(-1px);
+}
+
+.version-checking {
+  opacity: 0.7;
+}
+
+/* 链接区域 */
+.links-container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.footer-link {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: #666;
+  text-decoration: none;
+  padding: 4px 6px;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  font-size: 13px;
+}
+
+.footer-link:hover {
+  color: var(--primary-color, #18a058);
+  background: rgba(24, 160, 88, 0.1);
+  transform: translateY(-1px);
+}
+
+.link-icon {
+  display: flex;
+  align-items: center;
+}
+
+/* 版权信息区域 */
+.copyright-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.copyright-text {
+  color: #888;
+  font-size: 12px;
+}
+
+.license-text {
+  color: #888;
+  font-size: 12px;
+}
+
+.author-link {
+  font-weight: 600;
+  color: #667eea;
+  text-decoration: none;
+}
+
+.author-link:hover {
+  text-decoration: underline !important;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .app-footer {
+    padding: 10px 16px;
+  }
+
+  .footer-main {
+    flex-direction: column;
+    gap: 8px;
+    text-align: center;
+  }
+
+  .divider {
+    display: none;
+  }
+
+  .links-container {
+    gap: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .footer-main {
+    gap: 6px;
+  }
+
+  .links-container {
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 12px;
+  }
+
+  .project-info {
+    font-size: 12px;
+  }
+
+  .footer-link {
+    font-size: 12px;
+  }
+}
+</style>
diff --git a/web/src/components/Layout.vue b/web/src/components/Layout.vue
index ee6022c..2f8e36c 100644
--- a/web/src/components/Layout.vue
+++ b/web/src/components/Layout.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppFooter from "@/components/AppFooter.vue";
 import GlobalTaskProgressBar from "@/components/GlobalTaskProgressBar.vue";
 import Logout from "@/components/Logout.vue";
 import NavBar from "@/components/NavBar.vue";
@@ -32,6 +33,7 @@ import NavBar from "@/components/NavBar.vue";
         </router-view>
       </div>
     </n-layout-content>
+    <app-footer />
   </n-layout>
 
   <!-- 全局任务进度条 -->
@@ -41,6 +43,9 @@ import NavBar from "@/components/NavBar.vue";
 <style scoped>
 .main-layout {
   background: transparent;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 .layout-header {
@@ -104,9 +109,16 @@ import NavBar from "@/components/NavBar.vue";
   background: transparent;
   max-width: 1200px;
   margin: 0 auto;
+  width: 100%;
 }
 
 .content-wrapper {
   padding: 24px 12px;
+  min-height: calc(100vh - 111px);
+}
+
+.layout-footer {
+  background: transparent;
+  padding: 0;
 }
 </style>
diff --git a/web/src/components/keys/KeyTable.vue b/web/src/components/keys/KeyTable.vue
index e16136e..e7a3b9d 100644
--- a/web/src/components/keys/KeyTable.vue
+++ b/web/src/components/keys/KeyTable.vue
@@ -44,7 +44,7 @@ const loading = ref(false);
 const searchText = ref("");
 const statusFilter = ref<"all" | "active" | "invalid">("all");
 const currentPage = ref(1);
-const pageSize = ref(15);
+const pageSize = ref(12);
 const total = ref(0);
 const totalPages = ref(0);
 const dialog = useDialog();
@@ -565,8 +565,8 @@ function resetPage() {
         <n-select
           v-model:value="pageSize"
           :options="[
-            { label: '15条/页', value: 15 },
-            { label: '30条/页', value: 30 },
+            { label: '12条/页', value: 12 },
+            { label: '24条/页', value: 24 },
             { label: '60条/页', value: 60 },
             { label: '120条/页', value: 120 },
           ]"
diff --git a/web/src/services/version.ts b/web/src/services/version.ts
new file mode 100644
index 0000000..e712e19
--- /dev/null
+++ b/web/src/services/version.ts
@@ -0,0 +1,176 @@
+import axios from "axios";
+
+export interface GitHubRelease {
+  tag_name: string;
+  html_url: string;
+  published_at: string;
+  name: string;
+}
+
+export interface VersionInfo {
+  currentVersion: string;
+  latestVersion: string | null;
+  isLatest: boolean;
+  hasUpdate: boolean;
+  releaseUrl: string | null;
+  lastCheckTime: number;
+  status: "checking" | "latest" | "update-available" | "error";
+}
+
+const CACHE_KEY = "gpt-load-version-info";
+const CACHE_DURATION = 60 * 60 * 1000; // 1小时
+
+class VersionService {
+  private currentVersion: string;
+
+  constructor() {
+    this.currentVersion = import.meta.env.VITE_VERSION || "1.0.0";
+  }
+
+  /**
+   * 获取缓存的版本信息
+   */
+  private getCachedVersionInfo(): VersionInfo | null {
+    try {
+      const cached = localStorage.getItem(CACHE_KEY);
+      if (!cached) {
+        return null;
+      }
+
+      const versionInfo: VersionInfo = JSON.parse(cached);
+      const now = Date.now();
+
+      // 检查缓存是否过期
+      if (now - versionInfo.lastCheckTime > CACHE_DURATION) {
+        return null;
+      }
+
+      return versionInfo;
+    } catch (error) {
+      console.warn("Failed to parse cached version info:", error);
+      localStorage.removeItem(CACHE_KEY);
+      return null;
+    }
+  }
+
+  /**
+   * 缓存版本信息
+   */
+  private setCachedVersionInfo(versionInfo: VersionInfo): void {
+    try {
+      localStorage.setItem(CACHE_KEY, JSON.stringify(versionInfo));
+    } catch (error) {
+      console.warn("Failed to cache version info:", error);
+    }
+  }
+
+  /**
+   * 比较版本号 (简单的语义化版本比较)
+   */
+  private compareVersions(current: string, latest: string): number {
+    const currentParts = current.replace(/^v/, "").split(".").map(Number);
+    const latestParts = latest.replace(/^v/, "").split(".").map(Number);
+
+    for (let i = 0; i < Math.max(currentParts.length, latestParts.length); i++) {
+      const currentPart = currentParts[i] || 0;
+      const latestPart = latestParts[i] || 0;
+
+      if (currentPart < latestPart) {
+        return -1;
+      }
+      if (currentPart > latestPart) {
+        return 1;
+      }
+    }
+
+    return 0;
+  }
+
+  /**
+   * 从 GitHub API 获取最新版本
+   */
+  private async fetchLatestVersion(): Promise<GitHubRelease | null> {
+    try {
+      const response = await axios.get(
+        "https://api.github.com/repos/tbphp/gpt-load/releases/latest",
+        {
+          timeout: 10000,
+          headers: {
+            Accept: "application/vnd.github.v3+json",
+          },
+        }
+      );
+
+      if (response.status === 200 && response.data) {
+        return response.data;
+      }
+
+      return null;
+    } catch (error) {
+      console.warn("Failed to fetch latest version from GitHub:", error);
+      return null;
+    }
+  }
+
+  /**
+   * 检查版本更新
+   */
+  async checkForUpdates(): Promise<VersionInfo> {
+    // 先检查缓存
+    const cached = this.getCachedVersionInfo();
+    if (cached) {
+      return cached;
+    }
+
+    // 创建初始状态
+    const versionInfo: VersionInfo = {
+      currentVersion: this.currentVersion,
+      latestVersion: null,
+      isLatest: false,
+      hasUpdate: false,
+      releaseUrl: null,
+      lastCheckTime: Date.now(),
+      status: "checking",
+    };
+
+    try {
+      const release = await this.fetchLatestVersion();
+
+      if (release) {
+        const comparison = this.compareVersions(this.currentVersion, release.tag_name);
+
+        versionInfo.latestVersion = release.tag_name;
+        versionInfo.releaseUrl = release.html_url;
+        versionInfo.isLatest = comparison >= 0;
+        versionInfo.hasUpdate = comparison < 0;
+        versionInfo.status = comparison < 0 ? "update-available" : "latest";
+      } else {
+        versionInfo.status = "error";
+      }
+    } catch (error) {
+      console.warn("Version check failed:", error);
+      versionInfo.status = "error";
+    }
+
+    // 缓存结果
+    this.setCachedVersionInfo(versionInfo);
+
+    return versionInfo;
+  }
+
+  /**
+   * 获取当前版本号
+   */
+  getCurrentVersion(): string {
+    return this.currentVersion;
+  }
+
+  /**
+   * 清除缓存
+   */
+  clearCache(): void {
+    localStorage.removeItem(CACHE_KEY);
+  }
+}
+
+export const versionService = new VersionService();
diff --git a/web/src/views/Keys.vue b/web/src/views/Keys.vue
index 9460f90..fbc83a7 100644
--- a/web/src/views/Keys.vue
+++ b/web/src/views/Keys.vue
@@ -103,7 +103,7 @@ function handleGroupDelete(deletedGroup: Group) {
 .sidebar {
   width: 240px;
   flex-shrink: 0;
-  height: calc(100vh - 106px);
+  height: calc(100vh - 159px);
 }
 
 .main-content {
diff --git a/web/src/views/Login.vue b/web/src/views/Login.vue
index 0c42b00..4b758f4 100644
--- a/web/src/views/Login.vue
+++ b/web/src/views/Login.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import AppFooter from "@/components/AppFooter.vue";
 import { useAuthService } from "@/services/auth";
 import { LockClosedSharp } from "@vicons/ionicons5";
 import { NButton, NCard, NInput, NSpace, useMessage } from "naive-ui";
@@ -77,22 +78,20 @@ const handleLogin = async () => {
           </n-button>
         </n-space>
       </n-card>
-
-      <div class="login-footer">
-        <p class="footer-text">© 2024 GPT Load. All rights reserved.</p>
-      </div>
     </div>
   </div>
+  <app-footer />
 </template>
 
 <style scoped>
 .login-container {
-  height: 100vh;
+  min-height: calc(100vh - 52px);
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
+  padding: 24px;
 }
 
 .login-background {
@@ -207,17 +206,6 @@ const handleLogin = async () => {
   box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
 }
 
-.login-footer {
-  text-align: center;
-  margin-top: 32px;
-}
-
-.footer-text {
-  font-size: 0.875rem;
-  color: #94a3b8;
-  margin: 0;
-}
-
 :deep(.n-input) {
   --n-border-radius: 12px;
   --n-height: 48px;