Compare commits

...

11 Commits

Author SHA1 Message Date
hkfires
a208a484ff feat(config-ui): add YAML config editor with save/reload support 2025-10-19 22:40:08 +08:00
Supra4E8C
369cf52346 0.1.7 2025-10-18 17:04:29 +08:00
hkfires
dcfffc716b feat(ui): add in-app log viewer and file logging controls
- Add Logs section with refresh, download, and clear actions
- Implement auto-refresh toggle and incremental loading via timestamp
- Add “logging to file” setting; integrate with config and /logging-to-file API
- Auto-load logs when opening Logs; hide nav when logging disabled
- Escape HTML when rendering logs for safety
- Update i18n with strings for logs and settings
- Ignore CLAUDE.md and AGENTS.md in .gitignore

Why: Enable users to monitor and manage logs within the app, reduce overhead with incremental updates, and avoid committing local agent docs.
2025-10-16 12:03:15 +08:00
hkfires
7de5280824 feat(build): auto-inject release version into HTML output 2025-10-15 16:49:53 +08:00
hkfires
86d60aad77 增加使用统计开关 2025-10-13 15:56:26 +08:00
Supra4E8C
020fccc032 1 2025-10-11 15:51:51 +08:00
Supra4E8C
c162ab3a54 删除gemini web tokens 2025-10-11 15:02:57 +08:00
Supra4E8C
85d12e15d8 Merge pull request #4 from tombii/main
Add missing English translations.
2025-10-11 14:51:40 +08:00
tombii
ebffb49f52 Add missing English translations. 2025-10-08 22:08:36 +02:00
Supra4E8C
316c1ffc0d Update README_CN.md 2025-10-06 16:02:15 +08:00
Supra4E8C
b3e54e7f14 Update README.md 2025-10-06 16:01:56 +08:00
9 changed files with 2258 additions and 1053 deletions

View File

@@ -27,6 +27,8 @@ jobs:
- name: Build all-in-one HTML
run: npm run build
env:
VERSION: ${{ github.ref_name }}
- name: Prepare release assets
run: |

4
.gitignore vendored
View File

@@ -20,3 +20,7 @@ package-lock.json
# OS files
.DS_Store
Thumbs.db
CLAUDE.md
AGENTS.md
.serena

View File

@@ -10,7 +10,7 @@ Example URL:
https://remote.router-for.me/
Minimum required version: ≥ 6.0.0
Recommended version: ≥ 6.0.19
Recommended version: ≥ 6.1.3
Since version 6.0.19, the WebUI has been rolled into the main program. You can access it by going to `/management.html` on the external port after firing up the main project.
@@ -43,7 +43,6 @@ Since version 6.0.19, the WebUI has been rolled into the main program. You can a
- Download existing authentication files
- Delete single or all authentication files
- Display file details
- **Gemini Web Token**: Direct authentication using browser cookies
### Usage Statistics
- **Real-time Analytics**: Track API usage with interactive charts

View File

@@ -8,7 +8,9 @@ https://github.com/router-for-me/CLIProxyAPI
https://remote.router-for.me/
最低可用版本 ≥ 6.0.0
推荐版本 ≥ 6.0.19
推荐版本 ≥ 6.1.3
自6.0.19起WebUI已经集成在主程序中 可以通过主项目开启的外部端口的`/management.html`访问
## 功能特点
@@ -40,7 +42,6 @@ https://remote.router-for.me/
- 下载现有认证文件
- 删除单个或所有认证文件
- 显示文件详细信息
- **Gemini Web Token**: 使用浏览器 Cookie 直接认证
### 使用统计
- **实时分析**: 通过交互式图表跟踪 API 使用情况

937
app.js

File diff suppressed because it is too large Load Diff

View File

@@ -49,6 +49,35 @@ function escapeForStyle(content) {
return content.replace(/<\/(style)/gi, '<\\/$1');
}
function getVersion() {
// 1. 优先从环境变量获取GitHub Actions 会设置)
if (process.env.VERSION) {
return process.env.VERSION;
}
// 2. 尝试从 git tag 获取
try {
const { execSync } = require('child_process');
const gitTag = execSync('git describe --tags --exact-match 2>/dev/null || git describe --tags 2>/dev/null || echo ""', { encoding: 'utf8' }).trim();
if (gitTag) {
return gitTag;
}
} catch (err) {
console.warn('无法从 git 获取版本号');
}
// 3. 回退到 package.json
try {
const packageJson = JSON.parse(fs.readFileSync(path.join(projectRoot, 'package.json'), 'utf8'));
return 'v' + packageJson.version;
} catch (err) {
console.warn('无法从 package.json 读取版本号');
}
// 4. 最后使用默认值
return 'v0.0.0-dev';
}
function ensureDistDir() {
if (fs.existsSync(distDir)) {
fs.rmSync(distDir, { recursive: true, force: true });
@@ -82,6 +111,11 @@ function build() {
const css = escapeForStyle(readFile(sourceFiles.css));
const i18n = escapeForScript(readFile(sourceFiles.i18n));
const app = escapeForScript(readFile(sourceFiles.app));
// 获取版本号并替换
const version = getVersion();
console.log(`使用版本号: ${version}`);
html = html.replace(/__VERSION__/g, version);
html = html.replace(
'<link rel="stylesheet" href="styles.css">',

1736
i18n.js

File diff suppressed because it is too large Load Diff

View File

@@ -7,7 +7,13 @@
<title data-i18n="title.login">CLI Proxy API Management Center</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/yaml/yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/closebrackets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/comment/comment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-yaml@4.1.0/dist/js-yaml.min.js"></script>
<script src="i18n.js"></script>
</head>
@@ -171,6 +177,12 @@
<li data-tooltip="使用统计"><a href="#usage-stats" class="nav-item" data-section="usage-stats">
<i class="fas fa-chart-line"></i> <span data-i18n="nav.usage_stats">使用统计</span>
</a></li>
<li data-tooltip="配置管理"><a href="#config-management" class="nav-item" data-section="config-management">
<i class="fas fa-cog"></i> <span data-i18n="nav.config_management">配置管理</span>
</a></li>
<li id="logs-nav-item" data-tooltip="日志查看" style="display: none;"><a href="#logs" class="nav-item" data-section="logs">
<i class="fas fa-scroll"></i> <span data-i18n="nav.logs">日志查看</span>
</a></li>
<li data-tooltip="系统信息"><a href="#system-info" class="nav-item" data-section="system-info">
<i class="fas fa-info-circle"></i> <span data-i18n="nav.system_info">系统信息</span>
</a></li>
@@ -275,6 +287,42 @@
</div>
</div>
<!-- 使用统计设置 -->
<div class="card">
<div class="card-header">
<h3><i class="fas fa-chart-bar"></i> <span
data-i18n="basic_settings.usage_statistics_title">使用统计</span></h3>
</div>
<div class="card-content">
<div class="toggle-group">
<label class="toggle-switch">
<input type="checkbox" id="usage-statistics-enabled-toggle">
<span class="slider"></span>
</label>
<span class="toggle-label"
data-i18n="basic_settings.usage_statistics_enable">启用使用统计</span>
</div>
</div>
</div>
<!-- 日志记录设置 -->
<div class="card">
<div class="card-header">
<h3><i class="fas fa-file-alt"></i> <span
data-i18n="basic_settings.logging_title">日志记录</span></h3>
</div>
<div class="card-content">
<div class="toggle-group">
<label class="toggle-switch">
<input type="checkbox" id="logging-to-file-toggle">
<span class="slider"></span>
</label>
<span class="toggle-label"
data-i18n="basic_settings.logging_to_file_enable">启用日志记录到文件</span>
</div>
</div>
</div>
</section>
<!-- API 密钥管理 -->
@@ -372,45 +420,6 @@
</div>
</div>
<!-- Gemini Web Token -->
<div class="card">
<div class="card-header">
<h3><i class="fab fa-google"></i> <span
data-i18n="auth_login.gemini_web_title">Gemini Web Token</span></h3>
<button id="gemini-web-token-btn" class="btn btn-primary">
<i class="fas fa-save"></i> <span data-i18n="auth_login.gemini_web_button">保存
Gemini Web Token</span>
</button>
</div>
<div class="card-content">
<p class="form-hint" style="margin-bottom: 20px;"
data-i18n="auth_login.gemini_web_hint">
从浏览器开发者工具中获取 Gemini 网页版的 Cookie 值,用于直接认证访问 Gemini。
</p>
<div class="form-group">
<label for="secure-1psid-input"
data-i18n="auth_login.secure_1psid_label">__Secure-1PSID Cookie:</label>
<input type="text" id="secure-1psid-input"
data-i18n="auth_login.secure_1psid_placeholder"
placeholder="输入 __Secure-1PSID cookie 值">
</div>
<div class="form-group">
<label for="secure-1psidts-input"
data-i18n="auth_login.secure_1psidts_label">__Secure-1PSIDTS Cookie:</label>
<input type="text" id="secure-1psidts-input"
data-i18n="auth_login.secure_1psidts_placeholder"
placeholder="输入 __Secure-1PSIDTS cookie 值">
</div>
<div class="form-group">
<label for="gemini-web-label-input"
data-i18n="auth_login.gemini_web_label_label">Label (Optional):</label>
<input type="text" id="gemini-web-label-input"
data-i18n="auth_login.gemini_web_label_placeholder"
placeholder="输入标签名称 (可选)">
</div>
</div>
</div>
<!-- 认证文件 -->
<div class="card">
<div class="card-header">
@@ -622,6 +631,40 @@
</div>
</section>
<!-- 日志查看 -->
<section id="logs" class="content-section">
<h2 data-i18n="logs.title">日志查看</h2>
<div class="card">
<div class="card-header">
<h3><i class="fas fa-scroll"></i> <span data-i18n="logs.log_content">日志内容</span></h3>
<div class="header-actions">
<div class="toggle-group" style="margin-right: 15px;">
<label class="toggle-switch" style="margin-right: 5px;">
<input type="checkbox" id="logs-auto-refresh-toggle">
<span class="slider"></span>
</label>
<span class="toggle-label" data-i18n="logs.auto_refresh" style="font-size: 0.9em;">自动刷新</span>
</div>
<button id="refresh-logs" class="btn btn-primary">
<i class="fas fa-sync-alt"></i> <span data-i18n="logs.refresh_button">刷新日志</span>
</button>
<button id="download-logs" class="btn btn-secondary">
<i class="fas fa-download"></i> <span data-i18n="logs.download_button">下载日志</span>
</button>
<button id="clear-logs" class="btn btn-danger">
<i class="fas fa-trash"></i> <span data-i18n="logs.clear_button">清空日志</span>
</button>
</div>
</div>
<div class="card-content">
<div id="logs-content" class="logs-container">
<div class="loading-placeholder" data-i18n="logs.loading">正在加载日志...</div>
</div>
</div>
</div>
</section>
<!-- 使用统计 -->
<section id="usage-stats" class="content-section">
<h2 data-i18n="usage_stats.title">使用统计</h2>
@@ -732,6 +775,32 @@
</div>
</section>
<!-- 配置管理 -->
<section id="config-management" class="content-section">
<h2 data-i18n="config_management.title">配置管理</h2>
<div class="card">
<div class="card-header">
<h3><i class="fas fa-file-code"></i> <span data-i18n="config_management.editor_title">配置文件</span></h3>
<div class="editor-actions">
<button id="config-reload-btn" class="btn btn-secondary">
<i class="fas fa-sync-alt"></i> <span data-i18n="config_management.reload">重新加载</span>
</button>
<button id="config-save-btn" class="btn btn-primary">
<i class="fas fa-save"></i> <span data-i18n="config_management.save">保存</span>
</button>
</div>
</div>
<div class="card-content">
<p class="form-hint" data-i18n="config_management.description">查看并编辑服务器上的 config.yaml 配置文件。保存前请确认语法正确。</p>
<div class="yaml-editor-container">
<textarea id="config-editor" class="yaml-editor" spellcheck="false" placeholder="key: value"></textarea>
<div id="config-editor-status" class="editor-status" data-i18n="config_management.status_idle">等待操作</div>
</div>
</div>
</div>
</section>
<!-- 系统信息 -->
<section id="system-info" class="content-section">
<h2 data-i18n="system_info.title">系统信息</h2>
@@ -751,13 +820,6 @@
</div>
<div class="info-value" id="display-api-url">-</div>
</div>
<div class="info-item">
<div class="info-label">
<i class="fas fa-key"></i>
<span data-i18n="connection.management_key">管理密钥:</span>
</div>
<div class="info-value" id="display-management-key">-</div>
</div>
<div class="info-item">
<div class="info-label">
<i class="fas fa-circle"></i>
@@ -806,9 +868,9 @@
<!-- 版本信息 -->
<footer class="version-footer">
<div class="version-info">
<span data-i18n="footer.version">版本</span>: v0.1.0
<span data-i18n="footer.version">版本</span>: __VERSION__
<span class="separator"></span>
<span data-i18n="footer.author">作者</span>: Supra4E8C
<span data-i18n="footer.author">作者</span>: CLI Proxy API Team
</div>
</footer>
</div>
@@ -834,4 +896,4 @@
<script src="app.js"></script>
</body>
</html>
</html>

View File

@@ -1278,6 +1278,133 @@ textarea::placeholder {
height: 0;
}
/* 配置管理编辑器 */
.editor-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.editor-actions .btn {
white-space: nowrap;
}
.yaml-editor-container {
display: flex;
flex-direction: column;
gap: 12px;
}
#config-management .card {
display: flex;
flex-direction: column;
min-height: calc(100vh - 360px);
margin-bottom: 12px;
}
#config-management .card-content {
flex: 1;
display: flex;
flex-direction: column;
}
#config-management .yaml-editor-container {
flex: 1;
display: flex;
flex-direction: column;
}
.yaml-editor {
width: 100%;
flex: 1;
min-height: 360px;
border: 1px solid var(--border-primary);
border-radius: 6px;
padding: 12px 14px;
background: var(--bg-secondary);
color: var(--text-primary);
overflow-y: auto;
font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
line-height: 1.5;
resize: vertical;
}
#config-management .CodeMirror {
flex: 1;
height: 100%;
font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
font-size: 14px;
line-height: 1.5;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 6px;
overflow: hidden;
}
#config-management .CodeMirror-scroll {
min-height: 0;
max-height: calc(100vh - 440px);
overflow-y: auto;
}
#config-management .CodeMirror.cm-s-default {
background: var(--bg-secondary);
color: var(--text-primary);
}
#config-management .CodeMirror-gutters {
background: var(--bg-secondary);
border-right: 1px solid var(--border-primary);
}
#config-management .CodeMirror-linenumber {
color: var(--text-tertiary);
}
#config-management .CodeMirror .CodeMirror-lines {
padding: 12px;
}
#config-management .CodeMirror .cm-comment {
color: #6b7280;
}
[data-theme="dark"] #config-management .CodeMirror.cm-s-default {
background: var(--bg-secondary);
color: var(--text-primary);
}
[data-theme="dark"] #config-management .CodeMirror-gutters {
background: var(--bg-secondary);
border-right: 1px solid var(--border-secondary);
}
[data-theme="dark"] #config-management .CodeMirror .cm-comment {
color: #9ca3af;
}
#config-management .CodeMirror.cm-readonly {
opacity: 0.6;
}
.editor-status {
font-size: 13px;
color: var(--text-quaternary);
display: flex;
align-items: center;
gap: 6px;
min-height: 18px;
}
.editor-status.success {
color: #059669;
}
.editor-status.error {
color: #dc2626;
}
.slider {
position: absolute;
cursor: pointer;
@@ -1923,44 +2050,6 @@ input:checked+.slider:before {
}
/* Gemini Web Token 模态框样式 */
.gemini-web-form .form-group {
margin-bottom: 20px;
}
.gemini-web-form .form-group label {
display: block;
margin-bottom: 8px;
color: var(--text-secondary);
font-weight: 600;
font-size: 14px;
}
.gemini-web-form .form-group input {
width: 100%;
padding: 12px 16px;
border: 2px solid var(--border-primary);
border-radius: 8px;
font-size: 14px;
transition: all 0.3s ease;
background: var(--bg-tertiary);
color: var(--text-primary);
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}
.gemini-web-form .form-group input:focus {
outline: none;
border-color: var(--border-focus);
box-shadow: 0 0 0 3px var(--border-primary);
}
.gemini-web-form .form-hint {
margin-top: 6px;
color: var(--text-tertiary);
font-size: 12px;
line-height: 1.4;
}
/* 使用统计样式 */
.stats-overview {
display: grid;
@@ -2702,4 +2791,267 @@ input:checked+.slider:before {
#iflow-oauth-url {
font-size: 12px;
}
}
}
/* 日志查看样式 */
.logs-container {
background: var(--bg-tertiary);
border-radius: 8px;
padding: 16px;
min-height: 500px;
max-height: calc(100vh - 400px);
overflow-y: auto;
font-family: 'Monaco', 'Menlo', 'Consolas', 'Ubuntu Mono', monospace;
}
.logs-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-primary);
font-size: 13px;
color: var(--text-tertiary);
}
.logs-info span {
display: flex;
align-items: center;
gap: 6px;
}
.logs-text {
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
border-radius: 6px;
padding: 16px;
font-size: 12px;
line-height: 1.6;
color: var(--text-secondary);
white-space: pre-wrap;
word-wrap: break-word;
max-height: calc(100vh - 480px);
min-height: 450px;
overflow-y: auto;
margin: 0;
}
.logs-text::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.logs-text::-webkit-scrollbar-track {
background: var(--bg-tertiary);
border-radius: 4px;
}
.logs-text::-webkit-scrollbar-thumb {
background: var(--border-secondary);
border-radius: 4px;
}
.logs-text::-webkit-scrollbar-thumb:hover {
background: var(--text-quaternary);
}
/* 空状态和错误状态 */
.logs-container .empty-state,
.logs-container .error-state,
.logs-container .upgrade-notice {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
text-align: center;
color: var(--text-tertiary);
}
.logs-container .empty-state i,
.logs-container .error-state i,
.logs-container .upgrade-notice i {
font-size: 48px;
margin-bottom: 16px;
color: var(--border-secondary);
}
.logs-container .error-state i {
color: var(--error-text);
}
.logs-container .upgrade-notice i {
color: var(--primary-color);
}
.logs-container .empty-state p,
.logs-container .error-state p,
.logs-container .upgrade-notice p {
margin: 4px 0;
font-size: 14px;
}
.logs-container .empty-state p:first-of-type,
.logs-container .error-state p:first-of-type {
font-weight: 600;
color: var(--text-secondary);
font-size: 16px;
}
.logs-container .upgrade-notice h3 {
font-weight: 600;
color: var(--text-secondary);
font-size: 18px;
margin-bottom: 8px;
}
.logs-container .upgrade-notice p {
color: var(--text-tertiary);
max-width: 500px;
line-height: 1.6;
}
/* 日志页面头部操作区域 */
#logs .card-header .header-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
#logs .card-header .header-actions .toggle-group {
margin-bottom: 0;
}
/* 响应式设计 - 日志查看 */
@media (max-width: 768px) {
.logs-container {
min-height: 300px;
max-height: calc(100vh - 350px);
padding: 12px;
}
.logs-text {
font-size: 11px;
padding: 12px;
max-height: calc(100vh - 430px);
min-height: 250px;
}
.logs-info {
font-size: 12px;
}
#logs .card-header .header-actions {
width: 100%;
justify-content: flex-start;
}
#logs .card-header .header-actions .btn {
flex: 1;
min-width: 0;
}
#logs .card-header .header-actions .btn span {
display: none;
}
#logs .card-header .header-actions .toggle-group {
width: 100%;
justify-content: space-between;
}
}
/* 暗色主题适配 */
[data-theme="dark"] .logs-text {
background: rgba(15, 23, 42, 0.5);
border-color: var(--border-primary);
color: var(--text-tertiary);
}
[data-theme="dark"] .logs-container {
background: rgba(15, 23, 42, 0.3);
}
/* ===== AI提供商统计徽章样式 ===== */
/* 统计信息容器 */
.item-stats {
display: flex;
gap: 8px;
margin-top: 10px;
flex-wrap: wrap;
}
/* 统计徽章基础样式 */
.stat-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
transition: all 0.2s ease;
}
/* 成功统计徽章 */
.stat-badge.stat-success {
background-color: var(--success-bg);
color: var(--success-text);
border: 1px solid var(--success-border);
}
.stat-badge.stat-success i {
font-size: 13px;
}
/* 失败统计徽章 */
.stat-badge.stat-failure {
background-color: var(--error-bg);
color: var(--error-text);
border: 1px solid var(--error-border);
}
.stat-badge.stat-failure i {
font-size: 13px;
}
/* 悬停效果 */
.stat-badge:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
/* 暗色主题适配 */
[data-theme="dark"] .stat-badge.stat-success {
background-color: rgba(6, 78, 59, 0.3);
color: #6ee7b7;
border-color: rgba(5, 150, 105, 0.5);
}
[data-theme="dark"] .stat-badge.stat-failure {
background-color: rgba(153, 27, 27, 0.3);
color: #fca5a5;
border-color: rgba(220, 38, 38, 0.5);
}
/* 响应式设计 */
@media (max-width: 768px) {
.item-stats {
gap: 6px;
margin-top: 8px;
}
.stat-badge {
padding: 3px 8px;
font-size: 11px;
}
.stat-badge i {
font-size: 11px !important;
}
}
#config-management .CodeMirror .CodeMirror-lines {
padding: 12px;
}