1ee4ca37d1
- 在提供商管理界面添加刷新状态徽章，显示“刷新中”状态 - 为更新功能添加版本选择下拉框，支持选择特定版本进行更新 - 在提供商状态中新增 needsRefresh 字段用于跟踪刷新状态 - 修复冷启动时刷新状态重置逻辑，避免持久化状态影响新会话 - 为刷新操作添加超时保护机制，防止适配器调用无限挂起 - 完善国际化翻译，添加相关状态和版本标签
173 lines
No EOL
8.7 KiB
HTML
173 lines
No EOL
8.7 KiB
HTML
<link rel="stylesheet" href="components/section-dashboard.css">
|
||
<!-- Dashboard Section -->
|
||
<section id="dashboard" class="section active" aria-labelledby="dashboard-title">
|
||
<h2 id="dashboard-title" data-i18n="dashboard.title">系统概览</h2>
|
||
<div class="dashboard-top-row">
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-icon">
|
||
<i class="fas fa-clock"></i>
|
||
</div>
|
||
<div class="stat-info">
|
||
<h3 id="uptime">--</h3>
|
||
<p data-i18n="dashboard.uptime">运行时间</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Contact and Sponsor Section -->
|
||
<div class="contact-section dashboard-contact">
|
||
<div class="contact-grid">
|
||
<div class="contact-card">
|
||
<h3><i id="wechat-icon" class="fab fa-weixin"></i> <span id="wechat-title" data-i18n="dashboard.contact.wechat">扫码进群，注明来意</span></h3>
|
||
<div class="qr-container">
|
||
<img src="static/wechat.png" id="wechat-img" alt="微信二维码" class="qr-code clickable-qr">
|
||
</div>
|
||
<p class="qr-description" id="wechat-desc" data-i18n="dashboard.contact.wechatDesc">添加微信获取更多技术支持和交流</p>
|
||
</div>
|
||
<div class="contact-card" id="sponsor-card">
|
||
<h3><i class="fas fa-heart"></i> <span id="sponsor-title" data-i18n="dashboard.contact.sponsor">扫码赞助</span></h3>
|
||
<div class="qr-container">
|
||
<img src="static/sponsor.png" id="sponsor-img" alt="赞助二维码" class="qr-code clickable-qr">
|
||
</div>
|
||
<p class="qr-description" id="sponsor-desc" data-i18n="dashboard.contact.sponsorDesc">您的赞助是项目持续发展的动力</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- System Information Panel -->
|
||
<div class="system-info-panel">
|
||
<div class="system-info-header">
|
||
<h3 data-i18n="dashboard.systemInfo">系统信息</h3>
|
||
<div class="update-controls">
|
||
<div id="versionSelectWrapper" style="display: none; margin-right: 8px;">
|
||
<select id="versionSelect" class="form-control select-sm" style="height: 32px; padding: 0 8px; font-size: 13px; min-width: 120px;">
|
||
<!-- Versions will be loaded here -->
|
||
</select>
|
||
</div>
|
||
<button id="checkUpdateBtn" class="btn btn-outline btn-sm" data-i18n-title="dashboard.update.checkTitle" title="检查更新">
|
||
<i class="fas fa-sync-alt"></i> <span data-i18n="dashboard.update.check">检查更新</span>
|
||
</button>
|
||
<button id="performUpdateBtn" class="btn btn-primary btn-sm" style="display: none;" data-i18n-title="dashboard.update.performTitle" title="执行更新">
|
||
<i class="fas fa-download"></i> <span data-i18n="dashboard.update.perform">立即更新</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="info-grid">
|
||
<div class="info-item">
|
||
<span class="info-label">
|
||
<i class="fas fa-tag"></i> <span data-i18n="dashboard.version">版本号</span>
|
||
</span>
|
||
<div class="version-display-wrapper">
|
||
<span class="info-value" id="appVersion">--</span>
|
||
<span class="update-badge" id="updateBadge" style="display: none;">
|
||
<i class="fas fa-arrow-up"></i> <span id="latestVersionText">--</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">
|
||
<i class="fas fa-code"></i> <span data-i18n="dashboard.nodeVersion">Node.js版本</span>
|
||
</span>
|
||
<div class="version-display-wrapper">
|
||
<span class="info-value" id="nodeVersion">--</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">
|
||
<i class="fas fa-clock"></i> <span data-i18n="dashboard.serverTime">服务器时间</span>
|
||
</span>
|
||
<div class="version-display-wrapper">
|
||
<span class="info-value" id="serverTime">--</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">
|
||
<i class="fas fa-desktop"></i> <span data-i18n="dashboard.platform">操作系统</span>
|
||
</span>
|
||
<div class="version-display-wrapper">
|
||
<span class="info-value" id="platformInfo">--</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">
|
||
<i class="fas fa-memory"></i> <span data-i18n="dashboard.memoryUsage">内存使用</span>
|
||
</span>
|
||
<div class="version-display-wrapper">
|
||
<span class="info-value" id="memoryUsage">--</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">
|
||
<i class="fas fa-microchip"></i> <span data-i18n="dashboard.cpuUsage">CPU 使用</span>
|
||
</span>
|
||
<div class="version-display-wrapper">
|
||
<span class="info-value" id="cpuUsage">--</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">
|
||
<i class="fas fa-cogs"></i> <span data-i18n="dashboard.serviceMode">运行模式</span>
|
||
</span>
|
||
<div class="version-display-wrapper">
|
||
<span class="info-value" id="serviceMode">--</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">
|
||
<i class="fas fa-microchip"></i> <span data-i18n="dashboard.processPid">进程 PID</span>
|
||
</span>
|
||
<div class="version-display-wrapper">
|
||
<span class="info-value" id="processPid">--</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Path Routing Examples Panel -->
|
||
<div class="routing-examples-panel">
|
||
<h3><i class="fas fa-route"></i> <span data-i18n="dashboard.routing.title">路径路由调用示例</span></h3>
|
||
<p class="routing-description" data-i18n="dashboard.routing.description">通过不同路径路由访问不同的AI模型提供商，支持灵活的模型切换</p>
|
||
|
||
<div class="routing-examples-grid">
|
||
<!-- 路径路由示例将由 routing-examples.js 动态渲染 -->
|
||
<div class="routing-examples-loading">
|
||
<i class="fas fa-spinner fa-spin"></i>
|
||
<span data-i18n="common.loading">加载中...</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="routing-tips">
|
||
<h4><i class="fas fa-lightbulb"></i> <span data-i18n="dashboard.routing.tips">使用提示</span></h4>
|
||
<ul>
|
||
<li data-i18n="dashboard.routing.tip1"><strong>即时切换:</strong> 通过修改URL路径即可切换不同的AI模型提供商</li>
|
||
<li data-i18n="dashboard.routing.tip2"><strong>客户端配置:</strong> 在Cherry-Studio、NextChat、Cline等客户端中设置API端点为对应路径</li>
|
||
<li data-i18n="dashboard.routing.tip3"><strong>跨协议调用:</strong> 支持OpenAI协议调用Claude模型，或Claude协议调用OpenAI模型</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- 可用模型列表 -->
|
||
<div class="models-section">
|
||
<h4 class="models-section-title"><i class="fas fa-cube"></i> <span data-i18n="models.title">可用模型列表</span></h4>
|
||
<div class="models-description">
|
||
<div class="highlight-note">
|
||
<i class="fas fa-info-circle"></i>
|
||
<span data-i18n="models.note">点击模型名称可直接复制到剪贴板</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Models Container -->
|
||
<div class="models-container">
|
||
<div id="modelsList" class="models-list">
|
||
<!-- Models will be loaded here -->
|
||
<div class="models-loading">
|
||
<i class="fas fa-spinner fa-spin"></i>
|
||
<span data-i18n="common.loading">加载中...</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</section> |