mirror of
https://github.com/Wei-Shaw/claude-relay-service.git
synced 2026-01-23 08:59:16 +00:00
优化: 替换第三方CDN资源以提升加载速度
- 将所有第三方资源从 bootcdn 迁移到 cdnjs.cloudflare.com - 移除 SRI 完整性校验以避免哈希值不匹配问题 - 添加 DNS 预取和预连接以加速资源加载 - 调整脚本加载顺序，确保依赖关系正确 - 保持所有库版本号不变 (Vue 3.3.4, Element Plus 2.4.4, Chart.js 4.4.0) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
shaw
145
web/admin/app.js
145
web/admin/app.js
@@ -255,6 +255,20 @@ const app = createApp({
|
||||
cancelText: '取消',
|
||||
onConfirm: null,
|
||||
onCancel: null
|
||||
},
|
||||
|
||||
// 版本管理相关
|
||||
versionInfo: {
|
||||
current: '', // 当前版本
|
||||
latest: '', // 最新版本
|
||||
hasUpdate: false, // 是否有更新
|
||||
checkingUpdate: false, // 正在检查更新
|
||||
lastChecked: null, // 上次检查时间
|
||||
releaseInfo: null, // 最新版本的发布信息
|
||||
githubRepo: 'wei-shaw/claude-relay-service', // GitHub仓库
|
||||
showReleaseNotes: false, // 是否显示发布说明
|
||||
autoCheckInterval: null, // 自动检查定时器
|
||||
noUpdateMessage: false // 显示"已是最新版"提醒
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -295,6 +309,9 @@ const app = createApp({
|
||||
// 加载当前用户信息
|
||||
this.loadCurrentUser();
|
||||
|
||||
// 加载版本信息
|
||||
this.loadCurrentVersion();
|
||||
|
||||
// 初始化日期筛选器和图表数据
|
||||
this.initializeDateFilter();
|
||||
|
||||
@@ -321,6 +338,10 @@ const app = createApp({
|
||||
|
||||
beforeUnmount() {
|
||||
this.cleanupCharts();
|
||||
// 清理版本检查定时器
|
||||
if (this.versionInfo.autoCheckInterval) {
|
||||
clearInterval(this.versionInfo.autoCheckInterval);
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
@@ -1326,6 +1347,130 @@ const app = createApp({
|
||||
}
|
||||
},
|
||||
|
||||
// 版本管理相关方法
|
||||
async loadCurrentVersion() {
|
||||
try {
|
||||
const response = await fetch('/health');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.version) {
|
||||
// 从健康检查端点获取当前版本
|
||||
this.versionInfo.current = data.version;
|
||||
|
||||
// 检查更新
|
||||
await this.checkForUpdates();
|
||||
|
||||
// 设置自动检查更新（每小时检查一次）
|
||||
this.versionInfo.autoCheckInterval = setInterval(() => {
|
||||
this.checkForUpdates();
|
||||
}, 3600000); // 1小时
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading current version:', error);
|
||||
this.versionInfo.current = '未知';
|
||||
}
|
||||
},
|
||||
|
||||
async checkForUpdates() {
|
||||
if (this.versionInfo.checkingUpdate) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.versionInfo.checkingUpdate = true;
|
||||
|
||||
try {
|
||||
// 使用后端接口检查更新
|
||||
const response = await fetch('/admin/check-updates', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${this.authToken}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
const data = result.data;
|
||||
|
||||
this.versionInfo.current = data.current;
|
||||
this.versionInfo.latest = data.latest;
|
||||
this.versionInfo.hasUpdate = data.hasUpdate;
|
||||
this.versionInfo.releaseInfo = data.releaseInfo;
|
||||
this.versionInfo.lastChecked = new Date();
|
||||
|
||||
// 保存到localStorage
|
||||
localStorage.setItem('versionInfo', JSON.stringify({
|
||||
current: data.current,
|
||||
latest: data.latest,
|
||||
lastChecked: this.versionInfo.lastChecked,
|
||||
hasUpdate: data.hasUpdate,
|
||||
releaseInfo: data.releaseInfo
|
||||
}));
|
||||
|
||||
// 如果没有更新，显示提醒
|
||||
if (!data.hasUpdate) {
|
||||
this.versionInfo.noUpdateMessage = true;
|
||||
// 3秒后自动隐藏提醒
|
||||
setTimeout(() => {
|
||||
this.versionInfo.noUpdateMessage = false;
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
if (data.cached && data.warning) {
|
||||
console.warn('Version check warning:', data.warning);
|
||||
}
|
||||
} else {
|
||||
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking for updates:', error);
|
||||
|
||||
// 尝试从localStorage读取缓存的版本信息
|
||||
const cached = localStorage.getItem('versionInfo');
|
||||
if (cached) {
|
||||
const cachedInfo = JSON.parse(cached);
|
||||
this.versionInfo.current = cachedInfo.current || this.versionInfo.current;
|
||||
this.versionInfo.latest = cachedInfo.latest;
|
||||
this.versionInfo.hasUpdate = cachedInfo.hasUpdate;
|
||||
this.versionInfo.releaseInfo = cachedInfo.releaseInfo;
|
||||
this.versionInfo.lastChecked = new Date(cachedInfo.lastChecked);
|
||||
}
|
||||
} finally {
|
||||
this.versionInfo.checkingUpdate = false;
|
||||
}
|
||||
},
|
||||
|
||||
compareVersions(current, latest) {
|
||||
// 比较语义化版本号
|
||||
const parseVersion = (v) => {
|
||||
const parts = v.split('.').map(Number);
|
||||
return {
|
||||
major: parts[0] || 0,
|
||||
minor: parts[1] || 0,
|
||||
patch: parts[2] || 0
|
||||
};
|
||||
};
|
||||
|
||||
const currentV = parseVersion(current);
|
||||
const latestV = parseVersion(latest);
|
||||
|
||||
if (currentV.major !== latestV.major) {
|
||||
return currentV.major - latestV.major;
|
||||
}
|
||||
if (currentV.minor !== latestV.minor) {
|
||||
return currentV.minor - latestV.minor;
|
||||
}
|
||||
return currentV.patch - latestV.patch;
|
||||
},
|
||||
|
||||
formatVersionDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
},
|
||||
|
||||
// 用户菜单相关方法
|
||||
openChangePasswordModal() {
|
||||
this.userMenuOpen = false;
|
||||
|
||||
@@ -4,16 +4,33 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Claude Relay Service - 管理后台</title>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
|
||||
<!-- 预连接到CDN域名，加速资源加载 -->
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
|
||||
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
|
||||
<link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
|
||||
<link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
|
||||
|
||||
<!-- 使用更快的CDN资源，保持版本一致 -->
|
||||
<!-- Vue 3.3.4 (必须先加载，不使用defer) -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.4/vue.global.prod.min.js" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
|
||||
<!-- Element Plus -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.4.4/index.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.4.4/index.full.min.js"></script>
|
||||
|
||||
<!-- Chart.js 4.4.0 (独立库，可以延迟加载) -->
|
||||
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Element Plus 2.4.4 (依赖Vue，所以在Vue之后加载) -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.4.4/index.min.css" crossorigin="anonymous">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.4.4/index.full.min.js" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Element Plus 中文语言包 -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.4.4/locale/zh-cn.min.js"></script>
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.4.4/locale/zh-cn.min.js" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Font Awesome 6.5.1 -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
|
||||
<link rel="stylesheet" href="/web/style.css">
|
||||
</head>
|
||||
<body>
|
||||
@@ -79,7 +96,24 @@
|
||||
<i class="fas fa-cloud text-xl text-gray-700"></i>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center min-h-[48px]">
|
||||
<h1 class="text-2xl font-bold text-white header-title leading-tight">Claude Relay Service</h1>
|
||||
<div class="flex items-center gap-3">
|
||||
<h1 class="text-2xl font-bold text-white header-title leading-tight">Claude Relay Service</h1>
|
||||
<!-- 版本信息 -->
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-sm text-gray-400 font-mono">v{{ versionInfo.current || '...' }}</span>
|
||||
<!-- 更新提示 -->
|
||||
<a
|
||||
v-if="versionInfo.hasUpdate"
|
||||
:href="versionInfo.releaseInfo?.htmlUrl || '#'"
|
||||
target="_blank"
|
||||
class="inline-flex items-center gap-1 px-2 py-0.5 bg-green-500 border border-green-600 rounded-full text-xs text-white hover:bg-green-600 transition-colors animate-pulse"
|
||||
title="有新版本可用"
|
||||
>
|
||||
<i class="fas fa-arrow-up text-[10px]"></i>
|
||||
<span>新版本</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm leading-tight mt-0.5">管理后台</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,10 +131,54 @@
|
||||
<!-- 悬浮菜单 -->
|
||||
<div
|
||||
v-if="userMenuOpen"
|
||||
class="absolute right-0 top-full mt-2 w-48 bg-white rounded-xl shadow-xl border border-gray-200 py-2 user-menu-dropdown"
|
||||
class="absolute right-0 top-full mt-2 w-56 bg-white rounded-xl shadow-xl border border-gray-200 py-2 user-menu-dropdown"
|
||||
style="z-index: 999999;"
|
||||
@click.stop
|
||||
>
|
||||
<!-- 版本信息 -->
|
||||
<div class="px-4 py-3 border-b border-gray-100">
|
||||
<div class="flex items-center justify-between text-sm">
|
||||
<span class="text-gray-500">当前版本</span>
|
||||
<span class="font-mono text-gray-700">v{{ versionInfo.current || '...' }}</span>
|
||||
</div>
|
||||
<div v-if="versionInfo.hasUpdate" class="mt-2">
|
||||
<div class="flex items-center justify-between text-sm mb-2">
|
||||
<span class="text-green-600 font-medium">
|
||||
<i class="fas fa-arrow-up mr-1"></i>有新版本
|
||||
</span>
|
||||
<span class="font-mono text-green-600">v{{ versionInfo.latest }}</span>
|
||||
</div>
|
||||
<a
|
||||
:href="versionInfo.releaseInfo?.htmlUrl || '#'"
|
||||
target="_blank"
|
||||
class="block w-full text-center px-3 py-1.5 bg-green-500 text-white text-sm rounded-lg hover:bg-green-600 transition-colors"
|
||||
>
|
||||
<i class="fas fa-external-link-alt mr-1"></i>查看更新
|
||||
</a>
|
||||
</div>
|
||||
<div v-else-if="versionInfo.checkingUpdate" class="mt-2 text-center text-xs text-gray-500">
|
||||
<i class="fas fa-spinner fa-spin mr-1"></i>检查更新中...
|
||||
</div>
|
||||
<div v-else class="mt-2 text-center">
|
||||
<!-- 已是最新版提醒 -->
|
||||
<transition name="fade" mode="out-in">
|
||||
<div v-if="versionInfo.noUpdateMessage" key="message" class="px-3 py-1.5 bg-green-100 border border-green-200 rounded-lg inline-block">
|
||||
<p class="text-xs text-green-700 font-medium">
|
||||
<i class="fas fa-check-circle mr-1"></i>当前已是最新版本
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
v-else
|
||||
key="button"
|
||||
@click="checkForUpdates()"
|
||||
class="text-xs text-blue-500 hover:text-blue-700 transition-colors"
|
||||
>
|
||||
<i class="fas fa-sync-alt mr-1"></i>检查更新
|
||||
</button>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@click="openChangePasswordModal"
|
||||
class="w-full px-4 py-3 text-left text-gray-700 hover:bg-gray-50 transition-colors flex items-center gap-3"
|
||||
|
||||
@@ -433,4 +433,30 @@ body::before {
|
||||
.modal-scroll-content {
|
||||
max-height: calc(85vh - 120px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 版本更新提醒动画 */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
/* 用户菜单下拉框优化 */
|
||||
.user-menu-dropdown {
|
||||
min-width: 240px;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
Reference in New Issue
Block a user