mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-03 03:10:50 +08:00
Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
18c1ba6c3c | ||
|
|
c2627cac3e | ||
|
|
df472119e7 | ||
|
|
10f2262753 | ||
|
|
39d86d133a | ||
|
|
ddbd7d00bd | ||
|
|
e44beb541f | ||
|
|
aecd5875d6 | ||
|
|
ec4b5ab46a | ||
|
|
cd6c142324 |
35
.github/workflows/release.yml
vendored
35
.github/workflows/release.yml
vendored
@@ -15,6 +15,9 @@ jobs:
|
||||
steps:
|
||||
- name: Checkout code
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
fetch-tags: true
|
||||
|
||||
- name: Setup Node.js
|
||||
uses: actions/setup-node@v4
|
||||
@@ -36,27 +39,25 @@ jobs:
|
||||
mv index.html management.html
|
||||
ls -lh management.html
|
||||
|
||||
- name: Generate release notes
|
||||
run: |
|
||||
set -euo pipefail
|
||||
current_tag="${GITHUB_REF_NAME}"
|
||||
previous_tag="$(git tag --list 'v*' --sort=-v:refname | grep -v "^${current_tag}$" | head -n 1 || true)"
|
||||
if [ -n "${previous_tag}" ]; then
|
||||
range="${previous_tag}..${current_tag}"
|
||||
else
|
||||
range="${current_tag}"
|
||||
fi
|
||||
|
||||
: > release-notes.md
|
||||
git log --pretty=format:"- %h %s" "${range}" >> release-notes.md
|
||||
|
||||
- name: Create Release
|
||||
uses: softprops/action-gh-release@v1
|
||||
with:
|
||||
files: dist/management.html
|
||||
body: |
|
||||
## CLI Proxy API Management Center - ${{ github.ref_name }}
|
||||
|
||||
### Download and Usage
|
||||
1. Download the `management.html` file
|
||||
2. Open it directly in your browser
|
||||
3. All assets (CSS, JavaScript, images) are bundled into this single file
|
||||
|
||||
### Features
|
||||
- Single file, no external dependencies required
|
||||
- Complete management interface for CLI Proxy API
|
||||
- Support for local and remote connections
|
||||
- Multi-language support (Chinese/English)
|
||||
- Dark/Light theme support
|
||||
|
||||
---
|
||||
🤖 Generated with GitHub Actions
|
||||
body_path: release-notes.md
|
||||
draft: false
|
||||
prerelease: false
|
||||
env:
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -8,6 +8,8 @@ pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
api.md
|
||||
usage.json
|
||||
CLAUDE.md
|
||||
AGENTS.md
|
||||
|
||||
node_modules
|
||||
dist
|
||||
|
||||
@@ -1,7 +1,13 @@
|
||||
export function LoadingSpinner({ size = 20 }: { size?: number }) {
|
||||
export function LoadingSpinner({
|
||||
size = 20,
|
||||
className = ''
|
||||
}: {
|
||||
size?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="loading-spinner"
|
||||
className={`loading-spinner${className ? ` ${className}` : ''}`}
|
||||
style={{ width: size, height: size, borderWidth: size / 7 }}
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
|
||||
@@ -266,3 +266,40 @@ export function IconDollarSign({ size = 20, ...props }: IconProps) {
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconGithub({ size = 20, ...props }: IconProps) {
|
||||
return (
|
||||
<svg {...baseSvgProps} width={size} height={size} {...props}>
|
||||
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
|
||||
<path d="M9 18c-4.51 2-5-2-7-2" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconExternalLink({ size = 20, ...props }: IconProps) {
|
||||
return (
|
||||
<svg {...baseSvgProps} width={size} height={size} {...props}>
|
||||
<path d="M15 3h6v6" />
|
||||
<path d="M10 14 21 3" />
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconBookOpen({ size = 20, ...props }: IconProps) {
|
||||
return (
|
||||
<svg {...baseSvgProps} width={size} height={size} {...props}>
|
||||
<path d="M12 7v14" />
|
||||
<path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function IconCode({ size = 20, ...props }: IconProps) {
|
||||
return (
|
||||
<svg {...baseSvgProps} width={size} height={size} {...props}>
|
||||
<polyline points="16 18 22 12 16 6" />
|
||||
<polyline points="8 6 2 12 8 18" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -200,8 +200,6 @@
|
||||
"ampcode_upstream_api_key_current": "Current Amp official key: {{key}}",
|
||||
"ampcode_clear_upstream_api_key": "Clear official key",
|
||||
"ampcode_clear_upstream_api_key_confirm": "Are you sure you want to clear the Ampcode upstream API key (Amp official)?",
|
||||
"ampcode_restrict_management_label": "Restrict Amp management routes to localhost",
|
||||
"ampcode_restrict_management_hint": "When enabled, Amp management routes (/api/auth, /api/user, /api/threads, etc.) only accept 127.0.0.1/::1 (recommended).",
|
||||
"ampcode_force_model_mappings_label": "Force model mappings",
|
||||
"ampcode_force_model_mappings_hint": "When enabled, mappings override local API-key availability checks.",
|
||||
"ampcode_model_mappings_label": "Model mappings (from → to)",
|
||||
@@ -424,9 +422,10 @@
|
||||
"gemini_cli_oauth_title": "Gemini CLI OAuth",
|
||||
"gemini_cli_oauth_button": "Start Gemini CLI Login",
|
||||
"gemini_cli_oauth_hint": "Login to Google Gemini CLI service through OAuth flow, automatically obtain and save authentication files.",
|
||||
"gemini_cli_project_id_label": "Google Cloud Project ID (Optional):",
|
||||
"gemini_cli_project_id_placeholder": "Enter Google Cloud Project ID (optional)",
|
||||
"gemini_cli_project_id_hint": "If a project ID is specified, authentication information for that project will be used.",
|
||||
"gemini_cli_project_id_label": "Google Cloud Project ID:",
|
||||
"gemini_cli_project_id_placeholder": "Enter Google Cloud Project ID",
|
||||
"gemini_cli_project_id_hint": "Project ID is required for Gemini CLI OAuth.",
|
||||
"gemini_cli_project_id_required": "Please enter a Google Cloud project ID.",
|
||||
"gemini_cli_oauth_url_label": "Authorization URL:",
|
||||
"gemini_cli_open_link": "Open Link",
|
||||
"gemini_cli_copy_link": "Copy Link",
|
||||
@@ -446,6 +445,16 @@
|
||||
"qwen_oauth_status_error": "Authentication failed:",
|
||||
"qwen_oauth_start_error": "Failed to start Qwen OAuth:",
|
||||
"qwen_oauth_polling_error": "Failed to check authentication status:",
|
||||
"oauth_callback_label": "Callback URL",
|
||||
"oauth_callback_placeholder": "http://localhost:1455/auth/callback?code=...&state=...",
|
||||
"oauth_callback_hint": "Remote browser mode: after the provider redirects to http://localhost:..., copy the full URL and submit it here.",
|
||||
"oauth_callback_button": "Submit Callback URL",
|
||||
"oauth_callback_required": "Please paste the full redirect URL first.",
|
||||
"oauth_callback_success": "Callback URL submitted. Continue waiting for authentication.",
|
||||
"oauth_callback_error": "Failed to submit callback URL:",
|
||||
"oauth_callback_upgrade_hint": "Please update CLI Proxy API or check the connection.",
|
||||
"oauth_callback_status_success": "Callback URL submitted, waiting for authentication...",
|
||||
"oauth_callback_status_error": "Callback URL submission failed:",
|
||||
"missing_state": "Unable to retrieve authentication state parameter",
|
||||
"iflow_oauth_title": "iFlow OAuth",
|
||||
"iflow_oauth_button": "Start iFlow Login",
|
||||
@@ -571,11 +580,15 @@
|
||||
"auto_refresh_disabled": "Auto refresh disabled",
|
||||
"load_more_hint": "Scroll up to load more",
|
||||
"hidden_lines": "Hidden: {{count}} lines",
|
||||
"hide_management_logs": "Hide {{prefix}} logs",
|
||||
"search_placeholder": "Search logs by content or keyword",
|
||||
"search_empty_title": "No matching logs found",
|
||||
"search_empty_desc": "Try a different keyword or clear the search filter.",
|
||||
"search_empty_desc": "Try a different keyword or clear the filters.",
|
||||
"double_click_copy_hint": "Double-click to copy raw log line",
|
||||
"copy_success": "Log copied to clipboard",
|
||||
"copy_failed": "Copy failed",
|
||||
"lines": "lines",
|
||||
"removed": "Removed",
|
||||
"removed": "Filtered",
|
||||
"upgrade_required_title": "Please Upgrade CLI Proxy API",
|
||||
"upgrade_required_desc": "The current server version does not support the logs viewing feature. Please upgrade to the latest version of CLI Proxy API to use this feature."
|
||||
},
|
||||
@@ -630,7 +643,15 @@
|
||||
"version_is_latest": "You are on the latest version",
|
||||
"version_check_error": "Update check failed",
|
||||
"version_current_missing": "Server version is unavailable; cannot compare",
|
||||
"version_unknown": "Unknown"
|
||||
"version_unknown": "Unknown",
|
||||
"quick_links_title": "Quick Links",
|
||||
"quick_links_desc": "Access project repositories and documentation for help and updates.",
|
||||
"link_main_repo": "Main Repository",
|
||||
"link_main_repo_desc": "CLI Proxy API core program source code",
|
||||
"link_webui_repo": "WebUI Repository",
|
||||
"link_webui_repo_desc": "Management Center frontend source code",
|
||||
"link_docs": "Documentation",
|
||||
"link_docs_desc": "Usage tutorials and configuration guides"
|
||||
},
|
||||
"notification": {
|
||||
"debug_updated": "Debug settings updated",
|
||||
|
||||
@@ -200,8 +200,6 @@
|
||||
"ampcode_upstream_api_key_current": "当前Amp官方密钥: {{key}}",
|
||||
"ampcode_clear_upstream_api_key": "清除官方密钥",
|
||||
"ampcode_clear_upstream_api_key_confirm": "确定要清除 Ampcode 的 upstream API key(Amp官方)吗?",
|
||||
"ampcode_restrict_management_label": "仅允许本机访问 Amp 管理路由",
|
||||
"ampcode_restrict_management_hint": "开启后,/api/auth、/api/user、/api/threads 等 Amp 管理路由仅允许 127.0.0.1/::1 访问(推荐)。",
|
||||
"ampcode_force_model_mappings_label": "强制应用模型映射",
|
||||
"ampcode_force_model_mappings_hint": "开启后,模型映射将覆盖本地 API Key 可用性判断。",
|
||||
"ampcode_model_mappings_label": "模型映射 (from → to)",
|
||||
@@ -424,9 +422,10 @@
|
||||
"gemini_cli_oauth_title": "Gemini CLI OAuth",
|
||||
"gemini_cli_oauth_button": "开始 Gemini CLI 登录",
|
||||
"gemini_cli_oauth_hint": "通过 OAuth 流程登录 Google Gemini CLI 服务,自动获取并保存认证文件。",
|
||||
"gemini_cli_project_id_label": "Google Cloud 项目 ID (可选):",
|
||||
"gemini_cli_project_id_placeholder": "输入 Google Cloud 项目 ID (可选)",
|
||||
"gemini_cli_project_id_hint": "如果指定了项目 ID,将使用该项目的认证信息。",
|
||||
"gemini_cli_project_id_label": "Google Cloud 项目 ID:",
|
||||
"gemini_cli_project_id_placeholder": "输入 Google Cloud 项目 ID",
|
||||
"gemini_cli_project_id_hint": "请填写项目 ID,用于 Gemini CLI OAuth 登录。",
|
||||
"gemini_cli_project_id_required": "请填写 Google Cloud 项目 ID。",
|
||||
"gemini_cli_oauth_url_label": "授权链接:",
|
||||
"gemini_cli_open_link": "打开链接",
|
||||
"gemini_cli_copy_link": "复制链接",
|
||||
@@ -446,6 +445,16 @@
|
||||
"qwen_oauth_status_error": "认证失败:",
|
||||
"qwen_oauth_start_error": "启动 Qwen OAuth 失败:",
|
||||
"qwen_oauth_polling_error": "检查认证状态失败:",
|
||||
"oauth_callback_label": "回调 URL",
|
||||
"oauth_callback_placeholder": "http://localhost:1455/auth/callback?code=...&state=...",
|
||||
"oauth_callback_hint": "远程浏览器模式:当授权跳转到 http://localhost:... 后,复制完整 URL 并提交到这里。",
|
||||
"oauth_callback_button": "提交回调 URL",
|
||||
"oauth_callback_required": "请先粘贴完整的回调 URL。",
|
||||
"oauth_callback_success": "回调 URL 已提交,请继续等待认证。",
|
||||
"oauth_callback_error": "提交回调 URL 失败:",
|
||||
"oauth_callback_upgrade_hint": "请更新CLI Proxy API或检查连接",
|
||||
"oauth_callback_status_success": "回调 URL 已提交,等待认证中...",
|
||||
"oauth_callback_status_error": "回调 URL 提交失败:",
|
||||
"missing_state": "无法获取认证状态参数",
|
||||
"iflow_oauth_title": "iFlow OAuth",
|
||||
"iflow_oauth_button": "开始 iFlow 登录",
|
||||
@@ -571,11 +580,15 @@
|
||||
"auto_refresh_disabled": "自动刷新已关闭",
|
||||
"load_more_hint": "向上滚动加载更多",
|
||||
"hidden_lines": "已隐藏 {{count}} 行",
|
||||
"hide_management_logs": "屏蔽 {{prefix}} 日志",
|
||||
"search_placeholder": "搜索日志内容或关键字",
|
||||
"search_empty_title": "未找到匹配的日志",
|
||||
"search_empty_desc": "尝试更换关键字或清空搜索条件。",
|
||||
"search_empty_desc": "尝试更换关键字或清空筛选条件。",
|
||||
"double_click_copy_hint": "双击复制日志原文",
|
||||
"copy_success": "已复制日志原文",
|
||||
"copy_failed": "复制失败",
|
||||
"lines": "行",
|
||||
"removed": "已删除",
|
||||
"removed": "已过滤",
|
||||
"upgrade_required_title": "需要升级 CLI Proxy API",
|
||||
"upgrade_required_desc": "当前服务器版本不支持日志查看功能,请升级到最新版本的 CLI Proxy API 以使用此功能。"
|
||||
},
|
||||
@@ -630,7 +643,15 @@
|
||||
"version_is_latest": "当前已是最新版本",
|
||||
"version_check_error": "检查更新失败",
|
||||
"version_current_missing": "未获取到服务器版本号,暂无法比对",
|
||||
"version_unknown": "未知"
|
||||
"version_unknown": "未知",
|
||||
"quick_links_title": "快捷链接",
|
||||
"quick_links_desc": "访问项目仓库和文档,获取帮助和更新。",
|
||||
"link_main_repo": "主程序仓库",
|
||||
"link_main_repo_desc": "CLI Proxy API 核心程序源代码",
|
||||
"link_webui_repo": "WebUI 仓库",
|
||||
"link_webui_repo_desc": "管理中心前端界面源代码",
|
||||
"link_docs": "使用教程",
|
||||
"link_docs_desc": "配置指南和使用说明"
|
||||
},
|
||||
"notification": {
|
||||
"debug_updated": "调试设置已更新",
|
||||
|
||||
@@ -404,8 +404,17 @@
|
||||
}
|
||||
|
||||
.excludedModelTag {
|
||||
background: rgba(251, 191, 36, 0.2);
|
||||
border-color: rgba(251, 191, 36, 0.4);
|
||||
background: rgba(251, 191, 36, 0.22);
|
||||
border-color: rgba(251, 191, 36, 0.55);
|
||||
color: #fde68a;
|
||||
|
||||
.modelName {
|
||||
color: #fde68a;
|
||||
}
|
||||
}
|
||||
|
||||
.excludedModelsLabel {
|
||||
color: #fde68a;
|
||||
}
|
||||
|
||||
.apiKeyEntryCard {
|
||||
|
||||
@@ -49,7 +49,6 @@ interface OpenAIFormState {
|
||||
interface AmpcodeFormState {
|
||||
upstreamUrl: string;
|
||||
upstreamApiKey: string;
|
||||
restrictManagementToLocalhost: boolean;
|
||||
forceModelMappings: boolean;
|
||||
mappingEntries: ModelEntry[];
|
||||
}
|
||||
@@ -174,7 +173,6 @@ const entriesToAmpcodeMappings = (entries: ModelEntry[]): AmpcodeModelMapping[]
|
||||
const buildAmpcodeFormState = (ampcode?: AmpcodeConfig | null): AmpcodeFormState => ({
|
||||
upstreamUrl: ampcode?.upstreamUrl ?? '',
|
||||
upstreamApiKey: '',
|
||||
restrictManagementToLocalhost: ampcode?.restrictManagementToLocalhost ?? true,
|
||||
forceModelMappings: ampcode?.forceModelMappings ?? false,
|
||||
mappingEntries: ampcodeMappingsToEntries(ampcode?.modelMappings),
|
||||
});
|
||||
@@ -701,9 +699,6 @@ export function AiProvidersPage() {
|
||||
await ampcodeApi.clearUpstreamUrl();
|
||||
}
|
||||
|
||||
await ampcodeApi.updateRestrictManagementToLocalhost(
|
||||
ampcodeForm.restrictManagementToLocalhost
|
||||
);
|
||||
await ampcodeApi.updateForceModelMappings(ampcodeForm.forceModelMappings);
|
||||
|
||||
if (ampcodeLoaded || ampcodeMappingsDirty) {
|
||||
@@ -720,12 +715,18 @@ export function AiProvidersPage() {
|
||||
|
||||
const previous = config?.ampcode ?? {};
|
||||
const next: AmpcodeConfig = {
|
||||
...previous,
|
||||
upstreamUrl: upstreamUrl || undefined,
|
||||
restrictManagementToLocalhost: ampcodeForm.restrictManagementToLocalhost,
|
||||
forceModelMappings: ampcodeForm.forceModelMappings,
|
||||
};
|
||||
|
||||
if (previous.upstreamApiKey) {
|
||||
next.upstreamApiKey = previous.upstreamApiKey;
|
||||
}
|
||||
|
||||
if (Array.isArray(previous.modelMappings)) {
|
||||
next.modelMappings = previous.modelMappings;
|
||||
}
|
||||
|
||||
if (overrideKey) {
|
||||
next.upstreamApiKey = overrideKey;
|
||||
}
|
||||
@@ -1505,16 +1506,6 @@ export function AiProvidersPage() {
|
||||
: t('common.not_set')}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.fieldRow}>
|
||||
<span className={styles.fieldLabel}>
|
||||
{t('ai_providers.ampcode_restrict_management_label')}:
|
||||
</span>
|
||||
<span className={styles.fieldValue}>
|
||||
{(config?.ampcode?.restrictManagementToLocalhost ?? true)
|
||||
? t('common.yes')
|
||||
: t('common.no')}
|
||||
</span>
|
||||
</div>
|
||||
<div className={styles.fieldRow}>
|
||||
<span className={styles.fieldLabel}>
|
||||
{t('ai_providers.ampcode_force_model_mappings_label')}:
|
||||
@@ -1739,18 +1730,6 @@ export function AiProvidersPage() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<ToggleSwitch
|
||||
label={t('ai_providers.ampcode_restrict_management_label')}
|
||||
checked={ampcodeForm.restrictManagementToLocalhost}
|
||||
onChange={(value) =>
|
||||
setAmpcodeForm((prev) => ({ ...prev, restrictManagementToLocalhost: value }))
|
||||
}
|
||||
disabled={ampcodeModalLoading || ampcodeSaving}
|
||||
/>
|
||||
<div className="hint">{t('ai_providers.ampcode_restrict_management_hint')}</div>
|
||||
</div>
|
||||
|
||||
<div className="form-group">
|
||||
<ToggleSwitch
|
||||
label={t('ai_providers.ampcode_force_model_mappings_label')}
|
||||
@@ -1897,19 +1876,21 @@ export function AiProvidersPage() {
|
||||
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
||||
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
||||
/>
|
||||
<div className="form-group">
|
||||
<label>{t('ai_providers.claude_models_label')}</label>
|
||||
<ModelInputList
|
||||
entries={providerForm.modelEntries}
|
||||
onChange={(entries) =>
|
||||
setProviderForm((prev) => ({ ...prev, modelEntries: entries }))
|
||||
}
|
||||
addLabel={t('ai_providers.claude_models_add_btn')}
|
||||
namePlaceholder={t('common.model_name_placeholder')}
|
||||
aliasPlaceholder={t('common.model_alias_placeholder')}
|
||||
disabled={saving}
|
||||
/>
|
||||
</div>
|
||||
{modal?.type === 'claude' && (
|
||||
<div className="form-group">
|
||||
<label>{t('ai_providers.claude_models_label')}</label>
|
||||
<ModelInputList
|
||||
entries={providerForm.modelEntries}
|
||||
onChange={(entries) =>
|
||||
setProviderForm((prev) => ({ ...prev, modelEntries: entries }))
|
||||
}
|
||||
addLabel={t('ai_providers.claude_models_add_btn')}
|
||||
namePlaceholder={t('common.model_name_placeholder')}
|
||||
aliasPlaceholder={t('common.model_alias_placeholder')}
|
||||
disabled={saving}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="form-group">
|
||||
<label>{t('ai_providers.excluded_models_label')}</label>
|
||||
<textarea
|
||||
|
||||
@@ -417,8 +417,6 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-sm;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modelItem {
|
||||
|
||||
@@ -28,6 +28,62 @@
|
||||
}
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: $spacing-md;
|
||||
|
||||
:global(.form-group) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.searchWrapper {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
padding-right: 44px !important;
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
color: var(--text-tertiary);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.searchClear {
|
||||
@include button-reset;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: $radius-full;
|
||||
color: var(--text-secondary);
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.filterStats {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.removedCount {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.actionButton {
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -93,7 +149,9 @@
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
border-left: 3px solid transparent;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
cursor: copy;
|
||||
font-family:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
font-size: 12.5px;
|
||||
line-height: 1.45;
|
||||
|
||||
@@ -1,12 +1,23 @@
|
||||
import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
|
||||
import { IconDownload, IconRefreshCw, IconTimer, IconTrash2 } from '@/components/ui/icons';
|
||||
import {
|
||||
IconDownload,
|
||||
IconEyeOff,
|
||||
IconRefreshCw,
|
||||
IconSearch,
|
||||
IconTimer,
|
||||
IconTrash2,
|
||||
IconX,
|
||||
} from '@/components/ui/icons';
|
||||
import { useNotificationStore, useAuthStore } from '@/stores';
|
||||
import { logsApi } from '@/services/api/logs';
|
||||
import { MANAGEMENT_API_PREFIX } from '@/utils/constants';
|
||||
import { formatUnixTimestamp } from '@/utils/format';
|
||||
import styles from './LogsPage.module.scss';
|
||||
|
||||
interface ErrorLogItem {
|
||||
@@ -39,13 +50,15 @@ const LOG_LATENCY_REGEX = /\b(\d+(?:\.\d+)?)(?:\s*)(µs|us|ms|s)\b/i;
|
||||
const LOG_IPV4_REGEX = /\b(?:\d{1,3}\.){3}\d{1,3}\b/;
|
||||
const LOG_IPV6_REGEX = /\b(?:[a-f0-9]{0,4}:){2,7}[a-f0-9]{0,4}\b/i;
|
||||
const LOG_TIME_OF_DAY_REGEX = /^\d{1,2}:\d{2}:\d{2}(?:\.\d{1,3})?$/;
|
||||
const GIN_TIMESTAMP_SEGMENT_REGEX =
|
||||
/^\[GIN\]\s+(\d{4})\/(\d{2})\/(\d{2})\s*-\s*(\d{2}:\d{2}:\d{2}(?:\.\d{1,3})?)\s*$/;
|
||||
|
||||
const HTTP_STATUS_PATTERNS: RegExp[] = [
|
||||
/\|\s*([1-5]\d{2})\s*\|/,
|
||||
/\b([1-5]\d{2})\s*-/,
|
||||
new RegExp(`\\b(?:${HTTP_METHODS.join('|')})\\s+\\S+\\s+([1-5]\\d{2})\\b`),
|
||||
/\b(?:status|code|http)[:\s]+([1-5]\d{2})\b/i,
|
||||
/\b([1-5]\d{2})\s+(?:OK|Created|Accepted|No Content|Moved|Found|Bad Request|Unauthorized|Forbidden|Not Found|Method Not Allowed|Internal Server Error|Bad Gateway|Service Unavailable|Gateway Timeout)\b/i
|
||||
/\b([1-5]\d{2})\s+(?:OK|Created|Accepted|No Content|Moved|Found|Bad Request|Unauthorized|Forbidden|Not Found|Method Not Allowed|Internal Server Error|Bad Gateway|Service Unavailable|Gateway Timeout)\b/i,
|
||||
];
|
||||
|
||||
const detectHttpStatusCode = (text: string): number | undefined => {
|
||||
@@ -77,6 +90,13 @@ const extractIp = (text: string): string | undefined => {
|
||||
return candidate;
|
||||
};
|
||||
|
||||
const normalizeTimestampToSeconds = (value: string): string => {
|
||||
const trimmed = value.trim();
|
||||
const match = trimmed.match(/^(\d{4}-\d{2}-\d{2})[ T](\d{2}:\d{2}:\d{2})/);
|
||||
if (!match) return trimmed;
|
||||
return `${match[1]} ${match[2]}`;
|
||||
};
|
||||
|
||||
type ParsedLogLine = {
|
||||
raw: string;
|
||||
timestamp?: string;
|
||||
@@ -162,6 +182,23 @@ const parseLogLine = (raw: string): ParsedLogLine => {
|
||||
.filter(Boolean);
|
||||
const consumed = new Set<number>();
|
||||
|
||||
const ginIndex = segments.findIndex((segment) => GIN_TIMESTAMP_SEGMENT_REGEX.test(segment));
|
||||
if (ginIndex >= 0) {
|
||||
const match = segments[ginIndex].match(GIN_TIMESTAMP_SEGMENT_REGEX);
|
||||
if (match) {
|
||||
const ginTimestamp = `${match[1]}-${match[2]}-${match[3]} ${match[4]}`;
|
||||
const normalizedGin = normalizeTimestampToSeconds(ginTimestamp);
|
||||
const normalizedParsed = timestamp ? normalizeTimestampToSeconds(timestamp) : undefined;
|
||||
|
||||
if (!timestamp) {
|
||||
timestamp = ginTimestamp;
|
||||
consumed.add(ginIndex);
|
||||
} else if (normalizedParsed === normalizedGin) {
|
||||
consumed.add(ginIndex);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// status code
|
||||
const statusIndex = segments.findIndex((segment) => /^\d{3}\b/.test(segment));
|
||||
if (statusIndex >= 0) {
|
||||
@@ -186,9 +223,7 @@ const parseLogLine = (raw: string): ParsedLogLine => {
|
||||
}
|
||||
|
||||
// ip
|
||||
const ipIndex = segments.findIndex(
|
||||
(segment) => Boolean(extractIp(segment))
|
||||
);
|
||||
const ipIndex = segments.findIndex((segment) => Boolean(extractIp(segment)));
|
||||
if (ipIndex >= 0) {
|
||||
const extracted = extractIp(segments[ipIndex]);
|
||||
if (extracted) {
|
||||
@@ -225,6 +260,17 @@ const parseLogLine = (raw: string): ParsedLogLine => {
|
||||
|
||||
if (!level) level = inferLogLevel(raw);
|
||||
|
||||
if (message) {
|
||||
const match = message.match(GIN_TIMESTAMP_SEGMENT_REGEX);
|
||||
if (match) {
|
||||
const ginTimestamp = `${match[1]}-${match[2]}-${match[3]} ${match[4]}`;
|
||||
if (!timestamp) timestamp = ginTimestamp;
|
||||
if (normalizeTimestampToSeconds(timestamp) === normalizeTimestampToSeconds(ginTimestamp)) {
|
||||
message = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
raw,
|
||||
timestamp,
|
||||
@@ -235,10 +281,44 @@ const parseLogLine = (raw: string): ParsedLogLine => {
|
||||
ip,
|
||||
method,
|
||||
path,
|
||||
message
|
||||
message,
|
||||
};
|
||||
};
|
||||
|
||||
const getErrorMessage = (err: unknown): string => {
|
||||
if (err instanceof Error) return err.message;
|
||||
if (typeof err === 'string') return err;
|
||||
if (typeof err !== 'object' || err === null) return '';
|
||||
if (!('message' in err)) return '';
|
||||
|
||||
const message = (err as { message?: unknown }).message;
|
||||
return typeof message === 'string' ? message : '';
|
||||
};
|
||||
|
||||
const copyToClipboard = async (text: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return true;
|
||||
} catch {
|
||||
try {
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = text;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
textarea.style.left = '-9999px';
|
||||
textarea.style.top = '0';
|
||||
document.body.appendChild(textarea);
|
||||
textarea.focus();
|
||||
textarea.select();
|
||||
const ok = document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
return ok;
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export function LogsPage() {
|
||||
const { t } = useTranslation();
|
||||
const { showNotification } = useNotificationStore();
|
||||
@@ -248,6 +328,9 @@ export function LogsPage() {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState('');
|
||||
const [autoRefresh, setAutoRefresh] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const deferredSearchQuery = useDeferredValue(searchQuery);
|
||||
const [hideManagementLogs, setHideManagementLogs] = useState(false);
|
||||
const [errorLogs, setErrorLogs] = useState<ErrorLogItem[]>([]);
|
||||
const [loadingErrors, setLoadingErrors] = useState(false);
|
||||
|
||||
@@ -286,9 +369,8 @@ export function LogsPage() {
|
||||
try {
|
||||
pendingScrollToBottomRef.current = !incremental || isNearBottom(logViewerRef.current);
|
||||
|
||||
const params = incremental && latestTimestampRef.current > 0
|
||||
? { after: latestTimestampRef.current }
|
||||
: {};
|
||||
const params =
|
||||
incremental && latestTimestampRef.current > 0 ? { after: latestTimestampRef.current } : {};
|
||||
const data = await logsApi.fetchLogs(params);
|
||||
|
||||
// 更新时间戳
|
||||
@@ -320,10 +402,10 @@ export function LogsPage() {
|
||||
const visibleFrom = Math.max(buffer.length - INITIAL_DISPLAY_LINES, 0);
|
||||
setLogState({ buffer, visibleFrom });
|
||||
}
|
||||
} catch (err: any) {
|
||||
} catch (err: unknown) {
|
||||
console.error('Failed to load logs:', err);
|
||||
if (!incremental) {
|
||||
setError(err?.message || t('logs.load_error'));
|
||||
setError(getErrorMessage(err) || t('logs.load_error'));
|
||||
}
|
||||
} finally {
|
||||
if (!incremental) {
|
||||
@@ -339,8 +421,12 @@ export function LogsPage() {
|
||||
setLogState({ buffer: [], visibleFrom: 0 });
|
||||
latestTimestampRef.current = 0;
|
||||
showNotification(t('logs.clear_success'), 'success');
|
||||
} catch (err: any) {
|
||||
showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
|
||||
} catch (err: unknown) {
|
||||
const message = getErrorMessage(err);
|
||||
showNotification(
|
||||
`${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
|
||||
'error'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -366,16 +452,8 @@ export function LogsPage() {
|
||||
try {
|
||||
const res = await logsApi.fetchErrorLogs();
|
||||
// API 返回 { files: [...] }
|
||||
const files = (res as any)?.files;
|
||||
const list: ErrorLogItem[] = Array.isArray(files)
|
||||
? files.map((f: any) => ({
|
||||
name: f.name,
|
||||
size: f.size,
|
||||
modified: f.modified
|
||||
}))
|
||||
: [];
|
||||
setErrorLogs(list);
|
||||
} catch (err: any) {
|
||||
setErrorLogs(Array.isArray(res.files) ? res.files : []);
|
||||
} catch (err: unknown) {
|
||||
console.error('Failed to load error logs:', err);
|
||||
// 静默失败,不影响主日志显示
|
||||
setErrorLogs([]);
|
||||
@@ -395,8 +473,12 @@ export function LogsPage() {
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
showNotification(t('logs.error_log_download_success'), 'success');
|
||||
} catch (err: any) {
|
||||
showNotification(`${t('notification.download_failed')}: ${err?.message || ''}`, 'error');
|
||||
} catch (err: unknown) {
|
||||
const message = getErrorMessage(err);
|
||||
showNotification(
|
||||
`${t('notification.download_failed')}${message ? `: ${message}` : ''}`,
|
||||
'error'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -433,23 +515,65 @@ export function LogsPage() {
|
||||
() => logState.buffer.slice(logState.visibleFrom),
|
||||
[logState.buffer, logState.visibleFrom]
|
||||
);
|
||||
|
||||
const trimmedSearchQuery = deferredSearchQuery.trim();
|
||||
const isSearching = trimmedSearchQuery.length > 0;
|
||||
const baseLines = isSearching ? logState.buffer : visibleLines;
|
||||
|
||||
const { filteredLines, removedCount } = useMemo(() => {
|
||||
let working = baseLines;
|
||||
let removed = 0;
|
||||
|
||||
if (hideManagementLogs) {
|
||||
const next: string[] = [];
|
||||
for (const line of working) {
|
||||
if (line.includes(MANAGEMENT_API_PREFIX)) {
|
||||
removed += 1;
|
||||
} else {
|
||||
next.push(line);
|
||||
}
|
||||
}
|
||||
working = next;
|
||||
}
|
||||
|
||||
if (trimmedSearchQuery) {
|
||||
const queryLowered = trimmedSearchQuery.toLowerCase();
|
||||
const next: string[] = [];
|
||||
for (const line of working) {
|
||||
if (line.toLowerCase().includes(queryLowered)) {
|
||||
next.push(line);
|
||||
} else {
|
||||
removed += 1;
|
||||
}
|
||||
}
|
||||
working = next;
|
||||
}
|
||||
|
||||
return { filteredLines: working, removedCount: removed };
|
||||
}, [baseLines, hideManagementLogs, trimmedSearchQuery]);
|
||||
|
||||
const parsedVisibleLines = useMemo(
|
||||
() => visibleLines.map((line) => parseLogLine(line)),
|
||||
[visibleLines]
|
||||
() => filteredLines.map((line) => parseLogLine(line)),
|
||||
[filteredLines]
|
||||
);
|
||||
const canLoadMore = logState.visibleFrom > 0;
|
||||
|
||||
const canLoadMore = !isSearching && logState.visibleFrom > 0;
|
||||
|
||||
const handleLogScroll = () => {
|
||||
const node = logViewerRef.current;
|
||||
if (!node) return;
|
||||
if (isSearching) return;
|
||||
if (!canLoadMore) return;
|
||||
if (pendingPrependScrollRef.current) return;
|
||||
if (node.scrollTop > LOAD_MORE_THRESHOLD_PX) return;
|
||||
|
||||
pendingPrependScrollRef.current = { scrollHeight: node.scrollHeight, scrollTop: node.scrollTop };
|
||||
pendingPrependScrollRef.current = {
|
||||
scrollHeight: node.scrollHeight,
|
||||
scrollTop: node.scrollTop,
|
||||
};
|
||||
setLogState((prev) => ({
|
||||
...prev,
|
||||
visibleFrom: Math.max(prev.visibleFrom - LOAD_MORE_LINES, 0)
|
||||
visibleFrom: Math.max(prev.visibleFrom - LOAD_MORE_LINES, 0),
|
||||
}));
|
||||
};
|
||||
|
||||
@@ -463,185 +587,264 @@ export function LogsPage() {
|
||||
pendingPrependScrollRef.current = null;
|
||||
}, [logState.visibleFrom]);
|
||||
|
||||
const copyLogLine = async (raw: string) => {
|
||||
const ok = await copyToClipboard(raw);
|
||||
if (ok) {
|
||||
showNotification(t('logs.copy_success', { defaultValue: 'Copied to clipboard' }), 'success');
|
||||
} else {
|
||||
showNotification(t('logs.copy_failed', { defaultValue: 'Copy failed' }), 'error');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<h1 className={styles.pageTitle}>{t('logs.title')}</h1>
|
||||
<div className={styles.content}>
|
||||
<Card
|
||||
title={t('logs.log_content')}
|
||||
extra={
|
||||
<div className={styles.toolbar}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => loadLogs(false)}
|
||||
disabled={disableControls || loading}
|
||||
className={styles.actionButton}
|
||||
>
|
||||
<span className={styles.buttonContent}>
|
||||
<IconRefreshCw size={16} />
|
||||
{t('logs.refresh_button')}
|
||||
</span>
|
||||
</Button>
|
||||
<Card
|
||||
title={t('logs.log_content')}
|
||||
extra={
|
||||
<div className={styles.toolbar}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => loadLogs(false)}
|
||||
disabled={disableControls || loading}
|
||||
className={styles.actionButton}
|
||||
>
|
||||
<span className={styles.buttonContent}>
|
||||
<IconRefreshCw size={16} />
|
||||
{t('logs.refresh_button')}
|
||||
</span>
|
||||
</Button>
|
||||
<ToggleSwitch
|
||||
checked={autoRefresh}
|
||||
onChange={(value) => setAutoRefresh(value)}
|
||||
disabled={disableControls}
|
||||
label={
|
||||
<span className={styles.switchLabel}>
|
||||
<IconTimer size={16} />
|
||||
{t('logs.auto_refresh')}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={downloadLogs}
|
||||
disabled={logState.buffer.length === 0}
|
||||
className={styles.actionButton}
|
||||
>
|
||||
<span className={styles.buttonContent}>
|
||||
<IconDownload size={16} />
|
||||
{t('logs.download_button')}
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={clearLogs}
|
||||
disabled={disableControls}
|
||||
className={styles.actionButton}
|
||||
>
|
||||
<span className={styles.buttonContent}>
|
||||
<IconTrash2 size={16} />
|
||||
{t('logs.clear_button')}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{error && <div className="error-box">{error}</div>}
|
||||
|
||||
<div className={styles.filters}>
|
||||
<div className={styles.searchWrapper}>
|
||||
<Input
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder={t('logs.search_placeholder')}
|
||||
className={styles.searchInput}
|
||||
rightElement={
|
||||
searchQuery ? (
|
||||
<button
|
||||
type="button"
|
||||
className={styles.searchClear}
|
||||
onClick={() => setSearchQuery('')}
|
||||
title="Clear"
|
||||
aria-label="Clear"
|
||||
>
|
||||
<IconX size={16} />
|
||||
</button>
|
||||
) : (
|
||||
<IconSearch size={16} className={styles.searchIcon} />
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ToggleSwitch
|
||||
checked={autoRefresh}
|
||||
onChange={(value) => setAutoRefresh(value)}
|
||||
disabled={disableControls}
|
||||
checked={hideManagementLogs}
|
||||
onChange={setHideManagementLogs}
|
||||
label={
|
||||
<span className={styles.switchLabel}>
|
||||
<IconTimer size={16} />
|
||||
{t('logs.auto_refresh')}
|
||||
<IconEyeOff size={16} />
|
||||
{t('logs.hide_management_logs', { prefix: MANAGEMENT_API_PREFIX })}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={downloadLogs}
|
||||
disabled={logState.buffer.length === 0}
|
||||
className={styles.actionButton}
|
||||
>
|
||||
<span className={styles.buttonContent}>
|
||||
<IconDownload size={16} />
|
||||
{t('logs.download_button')}
|
||||
|
||||
<div className={styles.filterStats}>
|
||||
<span>
|
||||
{parsedVisibleLines.length} {t('logs.lines')}
|
||||
</span>
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={clearLogs}
|
||||
disabled={disableControls}
|
||||
className={styles.actionButton}
|
||||
>
|
||||
<span className={styles.buttonContent}>
|
||||
<IconTrash2 size={16} />
|
||||
{t('logs.clear_button')}
|
||||
</span>
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{error && <div className="error-box">{error}</div>}
|
||||
{loading ? (
|
||||
<div className="hint">{t('logs.loading')}</div>
|
||||
) : logState.buffer.length > 0 ? (
|
||||
<div ref={logViewerRef} className={styles.logPanel} onScroll={handleLogScroll}>
|
||||
{canLoadMore && (
|
||||
<div className={styles.loadMoreBanner}>
|
||||
<span>{t('logs.load_more_hint')}</span>
|
||||
<span className={styles.loadMoreCount}>
|
||||
{t('logs.hidden_lines', { count: logState.visibleFrom })}
|
||||
{removedCount > 0 && (
|
||||
<span className={styles.removedCount}>
|
||||
{t('logs.removed')} {removedCount}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.logList}>
|
||||
{parsedVisibleLines.map((line, index) => {
|
||||
const rowClassNames = [styles.logRow];
|
||||
if (line.level === 'warn') rowClassNames.push(styles.rowWarn);
|
||||
if (line.level === 'error' || line.level === 'fatal') rowClassNames.push(styles.rowError);
|
||||
return (
|
||||
<div key={`${logState.visibleFrom + index}-${line.raw}`} className={rowClassNames.join(' ')}>
|
||||
<div className={styles.timestamp}>{line.timestamp || ''}</div>
|
||||
<div className={styles.rowMain}>
|
||||
<div className={styles.rowMeta}>
|
||||
{line.level && (
|
||||
<span
|
||||
className={[
|
||||
styles.badge,
|
||||
line.level === 'info' ? styles.levelInfo : '',
|
||||
line.level === 'warn' ? styles.levelWarn : '',
|
||||
line.level === 'error' || line.level === 'fatal' ? styles.levelError : '',
|
||||
line.level === 'debug' ? styles.levelDebug : '',
|
||||
line.level === 'trace' ? styles.levelTrace : ''
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
>
|
||||
{line.level.toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{line.source && (
|
||||
<span className={styles.source} title={line.source}>
|
||||
{line.source}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{typeof line.statusCode === 'number' && (
|
||||
<span
|
||||
className={[
|
||||
styles.badge,
|
||||
styles.statusBadge,
|
||||
line.statusCode >= 200 && line.statusCode < 300
|
||||
? styles.statusSuccess
|
||||
: line.statusCode >= 300 && line.statusCode < 400
|
||||
? styles.statusInfo
|
||||
: line.statusCode >= 400 && line.statusCode < 500
|
||||
? styles.statusWarn
|
||||
: styles.statusError
|
||||
].join(' ')}
|
||||
>
|
||||
{line.statusCode}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{line.latency && <span className={styles.pill}>{line.latency}</span>}
|
||||
{line.ip && <span className={styles.pill}>{line.ip}</span>}
|
||||
|
||||
{line.method && (
|
||||
<span className={[styles.badge, styles.methodBadge].join(' ')}>
|
||||
{line.method}
|
||||
</span>
|
||||
)}
|
||||
{line.path && (
|
||||
<span className={styles.path} title={line.path}>
|
||||
{line.path}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{line.message && <div className={styles.message}>{line.message}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState title={t('logs.empty_title')} description={t('logs.empty_desc')} />
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
title={t('logs.error_logs_modal_title')}
|
||||
extra={
|
||||
<Button variant="secondary" size="sm" onClick={loadErrorLogs} loading={loadingErrors}>
|
||||
{t('common.refresh')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{errorLogs.length === 0 ? (
|
||||
<div className="hint">{t('logs.error_logs_empty')}</div>
|
||||
) : (
|
||||
<div className="item-list">
|
||||
{errorLogs.map((item) => (
|
||||
<div key={item.name} className="item-row">
|
||||
<div className="item-meta">
|
||||
<div className="item-title">{item.name}</div>
|
||||
<div className="item-subtitle">
|
||||
{item.size ? `${(item.size / 1024).toFixed(1)} KB` : ''}{' '}
|
||||
{item.modified ? new Date(item.modified).toLocaleString() : ''}
|
||||
{loading ? (
|
||||
<div className="hint">{t('logs.loading')}</div>
|
||||
) : logState.buffer.length > 0 && parsedVisibleLines.length > 0 ? (
|
||||
<div ref={logViewerRef} className={styles.logPanel} onScroll={handleLogScroll}>
|
||||
{canLoadMore && (
|
||||
<div className={styles.loadMoreBanner}>
|
||||
<span>{t('logs.load_more_hint')}</span>
|
||||
<span className={styles.loadMoreCount}>
|
||||
{t('logs.hidden_lines', { count: logState.visibleFrom })}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.logList}>
|
||||
{parsedVisibleLines.map((line, index) => {
|
||||
const rowClassNames = [styles.logRow];
|
||||
if (line.level === 'warn') rowClassNames.push(styles.rowWarn);
|
||||
if (line.level === 'error' || line.level === 'fatal')
|
||||
rowClassNames.push(styles.rowError);
|
||||
return (
|
||||
<div
|
||||
key={`${logState.visibleFrom + index}-${line.raw}`}
|
||||
className={rowClassNames.join(' ')}
|
||||
onDoubleClick={() => {
|
||||
void copyLogLine(line.raw);
|
||||
}}
|
||||
title={t('logs.double_click_copy_hint', {
|
||||
defaultValue: 'Double-click to copy',
|
||||
})}
|
||||
>
|
||||
<div className={styles.timestamp}>{line.timestamp || ''}</div>
|
||||
<div className={styles.rowMain}>
|
||||
<div className={styles.rowMeta}>
|
||||
{line.level && (
|
||||
<span
|
||||
className={[
|
||||
styles.badge,
|
||||
line.level === 'info' ? styles.levelInfo : '',
|
||||
line.level === 'warn' ? styles.levelWarn : '',
|
||||
line.level === 'error' || line.level === 'fatal'
|
||||
? styles.levelError
|
||||
: '',
|
||||
line.level === 'debug' ? styles.levelDebug : '',
|
||||
line.level === 'trace' ? styles.levelTrace : '',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
>
|
||||
{line.level.toUpperCase()}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{line.source && (
|
||||
<span className={styles.source} title={line.source}>
|
||||
{line.source}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{typeof line.statusCode === 'number' && (
|
||||
<span
|
||||
className={[
|
||||
styles.badge,
|
||||
styles.statusBadge,
|
||||
line.statusCode >= 200 && line.statusCode < 300
|
||||
? styles.statusSuccess
|
||||
: line.statusCode >= 300 && line.statusCode < 400
|
||||
? styles.statusInfo
|
||||
: line.statusCode >= 400 && line.statusCode < 500
|
||||
? styles.statusWarn
|
||||
: styles.statusError,
|
||||
].join(' ')}
|
||||
>
|
||||
{line.statusCode}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{line.latency && <span className={styles.pill}>{line.latency}</span>}
|
||||
{line.ip && <span className={styles.pill}>{line.ip}</span>}
|
||||
|
||||
{line.method && (
|
||||
<span className={[styles.badge, styles.methodBadge].join(' ')}>
|
||||
{line.method}
|
||||
</span>
|
||||
)}
|
||||
{line.path && (
|
||||
<span className={styles.path} title={line.path}>
|
||||
{line.path}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{line.message && <div className={styles.message}>{line.message}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : logState.buffer.length > 0 ? (
|
||||
<EmptyState
|
||||
title={t('logs.search_empty_title')}
|
||||
description={t('logs.search_empty_desc')}
|
||||
/>
|
||||
) : (
|
||||
<EmptyState title={t('logs.empty_title')} description={t('logs.empty_desc')} />
|
||||
)}
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
title={t('logs.error_logs_modal_title')}
|
||||
extra={
|
||||
<Button variant="secondary" size="sm" onClick={loadErrorLogs} loading={loadingErrors}>
|
||||
{t('common.refresh')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{errorLogs.length === 0 ? (
|
||||
<div className="hint">{t('logs.error_logs_empty')}</div>
|
||||
) : (
|
||||
<div className="item-list">
|
||||
{errorLogs.map((item) => (
|
||||
<div key={item.name} className="item-row">
|
||||
<div className="item-meta">
|
||||
<div className="item-title">{item.name}</div>
|
||||
<div className="item-subtitle">
|
||||
{item.size ? `${(item.size / 1024).toFixed(1)} KB` : ''}{' '}
|
||||
{item.modified ? formatUnixTimestamp(item.modified) : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-actions">
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => downloadErrorLog(item.name)}
|
||||
>
|
||||
{t('logs.error_logs_download')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="item-actions">
|
||||
<Button variant="secondary" size="sm" onClick={() => downloadErrorLog(item.name)}>
|
||||
{t('logs.error_logs_download')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -59,3 +59,47 @@
|
||||
color: #3b82f6;
|
||||
}
|
||||
}
|
||||
|
||||
.callbackSection {
|
||||
margin-top: $spacing-md;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-xs;
|
||||
}
|
||||
|
||||
.callbackActions {
|
||||
display: flex;
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
.authUrlBox {
|
||||
background: var(--bg-secondary);
|
||||
border: 1px dashed var(--border-color);
|
||||
border-radius: $radius-md;
|
||||
padding: $spacing-md;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $spacing-xs;
|
||||
}
|
||||
|
||||
.authUrlLabel {
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.authUrlValue {
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
word-break: break-all;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.5;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.authUrlActions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
margin-top: $spacing-sm;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
import { useEffect, useRef, useState, useMemo } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { useNotificationStore } from '@/stores';
|
||||
import { oauthApi, type OAuthProvider, type IFlowCookieAuthResponse } from '@/services/api/oauth';
|
||||
import { isLocalhost } from '@/utils/connection';
|
||||
import styles from './OAuthPage.module.scss';
|
||||
|
||||
interface ProviderState {
|
||||
@@ -14,6 +13,12 @@ interface ProviderState {
|
||||
status?: 'idle' | 'waiting' | 'success' | 'error';
|
||||
error?: string;
|
||||
polling?: boolean;
|
||||
projectId?: string;
|
||||
projectIdError?: string;
|
||||
callbackUrl?: string;
|
||||
callbackSubmitting?: boolean;
|
||||
callbackStatus?: 'success' | 'error';
|
||||
callbackError?: string;
|
||||
}
|
||||
|
||||
interface IFlowCookieState {
|
||||
@@ -33,6 +38,8 @@ const PROVIDERS: { id: OAuthProvider; titleKey: string; hintKey: string; urlLabe
|
||||
{ id: 'iflow', titleKey: 'auth_login.iflow_oauth_title', hintKey: 'auth_login.iflow_oauth_hint', urlLabelKey: 'auth_login.iflow_oauth_url_label' }
|
||||
];
|
||||
|
||||
const CALLBACK_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];
|
||||
|
||||
export function OAuthPage() {
|
||||
const { t } = useTranslation();
|
||||
const { showNotification } = useNotificationStore();
|
||||
@@ -40,15 +47,19 @@ export function OAuthPage() {
|
||||
const [iflowCookie, setIflowCookie] = useState<IFlowCookieState>({ cookie: '', loading: false });
|
||||
const timers = useRef<Record<string, number>>({});
|
||||
|
||||
// 检测是否为本地访问
|
||||
const isLocal = useMemo(() => isLocalhost(window.location.hostname), []);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
Object.values(timers.current).forEach((timer) => window.clearInterval(timer));
|
||||
};
|
||||
}, []);
|
||||
|
||||
const updateProviderState = (provider: OAuthProvider, next: Partial<ProviderState>) => {
|
||||
setStates((prev) => ({
|
||||
...prev,
|
||||
[provider]: { ...(prev[provider] ?? {}), ...next }
|
||||
}));
|
||||
};
|
||||
|
||||
const startPolling = (provider: OAuthProvider, state: string) => {
|
||||
if (timers.current[provider]) {
|
||||
clearInterval(timers.current[provider]);
|
||||
@@ -57,27 +68,18 @@ export function OAuthPage() {
|
||||
try {
|
||||
const res = await oauthApi.getAuthStatus(state);
|
||||
if (res.status === 'ok') {
|
||||
setStates((prev) => ({
|
||||
...prev,
|
||||
[provider]: { ...prev[provider], status: 'success', polling: false }
|
||||
}));
|
||||
updateProviderState(provider, { status: 'success', polling: false });
|
||||
showNotification(t('auth_login.codex_oauth_status_success'), 'success');
|
||||
window.clearInterval(timer);
|
||||
delete timers.current[provider];
|
||||
} else if (res.status === 'error') {
|
||||
setStates((prev) => ({
|
||||
...prev,
|
||||
[provider]: { ...prev[provider], status: 'error', error: res.error, polling: false }
|
||||
}));
|
||||
updateProviderState(provider, { status: 'error', error: res.error, polling: false });
|
||||
showNotification(`${t('auth_login.codex_oauth_status_error')} ${res.error || ''}`, 'error');
|
||||
window.clearInterval(timer);
|
||||
delete timers.current[provider];
|
||||
}
|
||||
} catch (err: any) {
|
||||
setStates((prev) => ({
|
||||
...prev,
|
||||
[provider]: { ...prev[provider], status: 'error', error: err?.message, polling: false }
|
||||
}));
|
||||
updateProviderState(provider, { status: 'error', error: err?.message, polling: false });
|
||||
window.clearInterval(timer);
|
||||
delete timers.current[provider];
|
||||
}
|
||||
@@ -86,24 +88,35 @@ export function OAuthPage() {
|
||||
};
|
||||
|
||||
const startAuth = async (provider: OAuthProvider) => {
|
||||
setStates((prev) => ({
|
||||
...prev,
|
||||
[provider]: { ...prev[provider], status: 'waiting', polling: true, error: undefined }
|
||||
}));
|
||||
const projectId = provider === 'gemini-cli' ? (states[provider]?.projectId || '').trim() : undefined;
|
||||
if (provider === 'gemini-cli' && !projectId) {
|
||||
const message = t('auth_login.gemini_cli_project_id_required');
|
||||
updateProviderState(provider, { projectIdError: message });
|
||||
showNotification(message, 'warning');
|
||||
return;
|
||||
}
|
||||
if (provider === 'gemini-cli') {
|
||||
updateProviderState(provider, { projectIdError: undefined });
|
||||
}
|
||||
updateProviderState(provider, {
|
||||
status: 'waiting',
|
||||
polling: true,
|
||||
error: undefined,
|
||||
callbackStatus: undefined,
|
||||
callbackError: undefined,
|
||||
callbackUrl: ''
|
||||
});
|
||||
try {
|
||||
const res = await oauthApi.startAuth(provider);
|
||||
setStates((prev) => ({
|
||||
...prev,
|
||||
[provider]: { ...prev[provider], url: res.url, state: res.state, status: 'waiting', polling: true }
|
||||
}));
|
||||
const res = await oauthApi.startAuth(
|
||||
provider,
|
||||
provider === 'gemini-cli' ? { projectId: projectId! } : undefined
|
||||
);
|
||||
updateProviderState(provider, { url: res.url, state: res.state, status: 'waiting', polling: true });
|
||||
if (res.state) {
|
||||
startPolling(provider, res.state);
|
||||
}
|
||||
} catch (err: any) {
|
||||
setStates((prev) => ({
|
||||
...prev,
|
||||
[provider]: { ...prev[provider], status: 'error', error: err?.message, polling: false }
|
||||
}));
|
||||
updateProviderState(provider, { status: 'error', error: err?.message, polling: false });
|
||||
showNotification(`${t('auth_login.codex_oauth_start_error')} ${err?.message || ''}`, 'error');
|
||||
}
|
||||
};
|
||||
@@ -118,6 +131,40 @@ export function OAuthPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const submitCallback = async (provider: OAuthProvider) => {
|
||||
const redirectUrl = (states[provider]?.callbackUrl || '').trim();
|
||||
if (!redirectUrl) {
|
||||
showNotification(t('auth_login.oauth_callback_required'), 'warning');
|
||||
return;
|
||||
}
|
||||
updateProviderState(provider, {
|
||||
callbackSubmitting: true,
|
||||
callbackStatus: undefined,
|
||||
callbackError: undefined
|
||||
});
|
||||
try {
|
||||
await oauthApi.submitCallback(provider, redirectUrl);
|
||||
updateProviderState(provider, { callbackSubmitting: false, callbackStatus: 'success' });
|
||||
showNotification(t('auth_login.oauth_callback_success'), 'success');
|
||||
} catch (err: any) {
|
||||
const errorMessage =
|
||||
err?.status === 404
|
||||
? t('auth_login.oauth_callback_upgrade_hint', {
|
||||
defaultValue: 'Please update CLI Proxy API or check the connection.'
|
||||
})
|
||||
: err?.message;
|
||||
updateProviderState(provider, {
|
||||
callbackSubmitting: false,
|
||||
callbackStatus: 'error',
|
||||
callbackError: errorMessage
|
||||
});
|
||||
const notificationMessage = errorMessage
|
||||
? `${t('auth_login.oauth_callback_error')} ${errorMessage}`
|
||||
: t('auth_login.oauth_callback_error');
|
||||
showNotification(notificationMessage, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const submitIflowCookie = async () => {
|
||||
const cookie = iflowCookie.cookie.trim();
|
||||
if (!cookie) {
|
||||
@@ -164,36 +211,38 @@ export function OAuthPage() {
|
||||
<div className={styles.content}>
|
||||
{PROVIDERS.map((provider) => {
|
||||
const state = states[provider.id] || {};
|
||||
// 非本地访问时禁用所有 OAuth 登录方式
|
||||
const isDisabled = !isLocal;
|
||||
const canSubmitCallback = CALLBACK_SUPPORTED.includes(provider.id) && Boolean(state.url);
|
||||
return (
|
||||
<div
|
||||
key={provider.id}
|
||||
style={isDisabled ? { opacity: 0.6, pointerEvents: 'none' } : undefined}
|
||||
>
|
||||
<div key={provider.id}>
|
||||
<Card
|
||||
title={t(provider.titleKey)}
|
||||
extra={
|
||||
<Button
|
||||
onClick={() => startAuth(provider.id)}
|
||||
loading={state.polling}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
<Button onClick={() => startAuth(provider.id)} loading={state.polling}>
|
||||
{t('common.login')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="hint">{t(provider.hintKey)}</div>
|
||||
{isDisabled && (
|
||||
<div className="status-badge warning" style={{ marginTop: 8 }}>
|
||||
{t('auth_login.remote_access_disabled')}
|
||||
</div>
|
||||
{provider.id === 'gemini-cli' && (
|
||||
<Input
|
||||
label={t('auth_login.gemini_cli_project_id_label')}
|
||||
hint={t('auth_login.gemini_cli_project_id_hint')}
|
||||
value={state.projectId || ''}
|
||||
error={state.projectIdError}
|
||||
onChange={(e) =>
|
||||
updateProviderState(provider.id, {
|
||||
projectId: e.target.value,
|
||||
projectIdError: undefined
|
||||
})
|
||||
}
|
||||
placeholder={t('auth_login.gemini_cli_project_id_placeholder')}
|
||||
/>
|
||||
)}
|
||||
{!isDisabled && state.url && (
|
||||
<div className="connection-box">
|
||||
<div className="label">{t(provider.urlLabelKey)}</div>
|
||||
<div className="value">{state.url}</div>
|
||||
<div className="item-actions" style={{ marginTop: 8 }}>
|
||||
{state.url && (
|
||||
<div className={`connection-box ${styles.authUrlBox}`}>
|
||||
<div className={styles.authUrlLabel}>{t(provider.urlLabelKey)}</div>
|
||||
<div className={styles.authUrlValue}>{state.url}</div>
|
||||
<div className={styles.authUrlActions}>
|
||||
<Button variant="secondary" size="sm" onClick={() => copyLink(state.url!)}>
|
||||
{t('auth_login.codex_copy_link')}
|
||||
</Button>
|
||||
@@ -207,7 +256,44 @@ export function OAuthPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{!isDisabled && state.status && state.status !== 'idle' && (
|
||||
{canSubmitCallback && (
|
||||
<div className={styles.callbackSection}>
|
||||
<Input
|
||||
label={t('auth_login.oauth_callback_label')}
|
||||
hint={t('auth_login.oauth_callback_hint')}
|
||||
value={state.callbackUrl || ''}
|
||||
onChange={(e) =>
|
||||
updateProviderState(provider.id, {
|
||||
callbackUrl: e.target.value,
|
||||
callbackStatus: undefined,
|
||||
callbackError: undefined
|
||||
})
|
||||
}
|
||||
placeholder={t('auth_login.oauth_callback_placeholder')}
|
||||
/>
|
||||
<div className={styles.callbackActions}>
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={() => submitCallback(provider.id)}
|
||||
loading={state.callbackSubmitting}
|
||||
>
|
||||
{t('auth_login.oauth_callback_button')}
|
||||
</Button>
|
||||
</div>
|
||||
{state.callbackStatus === 'success' && (
|
||||
<div className="status-badge success" style={{ marginTop: 8 }}>
|
||||
{t('auth_login.oauth_callback_status_success')}
|
||||
</div>
|
||||
)}
|
||||
{state.callbackStatus === 'error' && (
|
||||
<div className="status-badge error" style={{ marginTop: 8 }}>
|
||||
{t('auth_login.oauth_callback_status_error')} {state.callbackError || ''}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{state.status && state.status !== 'idle' && (
|
||||
<div className="status-badge" style={{ marginTop: 8 }}>
|
||||
{state.status === 'success'
|
||||
? t('auth_login.codex_oauth_status_success')
|
||||
|
||||
@@ -135,3 +135,81 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.quickLinks {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: $spacing-md;
|
||||
}
|
||||
|
||||
.linkCard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-md;
|
||||
padding: $spacing-md $spacing-lg;
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: $radius-lg;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--bg-hover);
|
||||
border-color: var(--primary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.linkIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: $radius-md;
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.github {
|
||||
background-color: #24292f;
|
||||
}
|
||||
|
||||
&.docs {
|
||||
background-color: #10b981;
|
||||
}
|
||||
}
|
||||
|
||||
.linkContent {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.linkTitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-xs;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 2px;
|
||||
|
||||
svg {
|
||||
opacity: 0.5;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.linkDesc {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { IconGithub, IconBookOpen, IconExternalLink, IconCode } from '@/components/ui/icons';
|
||||
import { useAuthStore, useConfigStore, useNotificationStore, useModelsStore } from '@/stores';
|
||||
import { apiKeysApi } from '@/services/api/apiKeys';
|
||||
import { classifyModels } from '@/utils/models';
|
||||
@@ -148,6 +149,65 @@ export function SystemPage() {
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card title={t('system_info.quick_links_title')}>
|
||||
<p className={styles.sectionDescription}>{t('system_info.quick_links_desc')}</p>
|
||||
<div className={styles.quickLinks}>
|
||||
<a
|
||||
href="https://github.com/router-for-me/CLIProxyAPI"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={styles.linkCard}
|
||||
>
|
||||
<div className={`${styles.linkIcon} ${styles.github}`}>
|
||||
<IconGithub size={22} />
|
||||
</div>
|
||||
<div className={styles.linkContent}>
|
||||
<div className={styles.linkTitle}>
|
||||
{t('system_info.link_main_repo')}
|
||||
<IconExternalLink size={14} />
|
||||
</div>
|
||||
<div className={styles.linkDesc}>{t('system_info.link_main_repo_desc')}</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/router-for-me/Cli-Proxy-API-Management-Center"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={styles.linkCard}
|
||||
>
|
||||
<div className={`${styles.linkIcon} ${styles.github}`}>
|
||||
<IconCode size={22} />
|
||||
</div>
|
||||
<div className={styles.linkContent}>
|
||||
<div className={styles.linkTitle}>
|
||||
{t('system_info.link_webui_repo')}
|
||||
<IconExternalLink size={14} />
|
||||
</div>
|
||||
<div className={styles.linkDesc}>{t('system_info.link_webui_repo_desc')}</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://help.router-for.me/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={styles.linkCard}
|
||||
>
|
||||
<div className={`${styles.linkIcon} ${styles.docs}`}>
|
||||
<IconBookOpen size={22} />
|
||||
</div>
|
||||
<div className={styles.linkContent}>
|
||||
<div className={styles.linkTitle}>
|
||||
{t('system_info.link_docs')}
|
||||
<IconExternalLink size={14} />
|
||||
</div>
|
||||
<div className={styles.linkDesc}>{t('system_info.link_docs_desc')}</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
title={t('system_info.models_title')}
|
||||
extra={
|
||||
|
||||
@@ -3,9 +3,11 @@
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header {
|
||||
@@ -39,6 +41,45 @@
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.loadingOverlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 20;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(243, 244, 246, 0.75);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
:global([data-theme='dark']) .loadingOverlay {
|
||||
background: rgba(25, 25, 25, 0.72);
|
||||
}
|
||||
|
||||
.loadingOverlayContent {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
border-radius: $radius-lg;
|
||||
border: 1px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.loadingOverlaySpinner {
|
||||
border-color: rgba(59, 130, 246, 0.25);
|
||||
border-top-color: var(--primary-color);
|
||||
box-shadow: 0 0 10px rgba(59, 130, 246, 0.25);
|
||||
}
|
||||
|
||||
.loadingOverlayText {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
// Stats Grid
|
||||
.statsGrid {
|
||||
display: grid;
|
||||
|
||||
@@ -16,6 +16,7 @@ import { Line } from 'react-chartjs-2';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
|
||||
import { IconDiamond, IconDollarSign, IconSatellite, IconTimer, IconTrendingUp } from '@/components/ui/icons';
|
||||
import { useMediaQuery } from '@/hooks/useMediaQuery';
|
||||
import { useThemeStore } from '@/stores';
|
||||
@@ -516,6 +517,14 @@ export function UsagePage() {
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
{loading && !usage && (
|
||||
<div className={styles.loadingOverlay} aria-busy="true">
|
||||
<div className={styles.loadingOverlayContent}>
|
||||
<LoadingSpinner size={28} className={styles.loadingOverlaySpinner} />
|
||||
<span className={styles.loadingOverlayText}>{t('common.loading')}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.header}>
|
||||
<h1 className={styles.pageTitle}>{t('usage_stats.title')}</h1>
|
||||
<Button
|
||||
|
||||
@@ -18,9 +18,6 @@ export const ampcodeApi = {
|
||||
updateUpstreamApiKey: (apiKey: string) => apiClient.put('/ampcode/upstream-api-key', { value: apiKey }),
|
||||
clearUpstreamApiKey: () => apiClient.delete('/ampcode/upstream-api-key'),
|
||||
|
||||
updateRestrictManagementToLocalhost: (enabled: boolean) =>
|
||||
apiClient.put('/ampcode/restrict-management-to-localhost', { value: enabled }),
|
||||
|
||||
async getModelMappings(): Promise<AmpcodeModelMapping[]> {
|
||||
const data = await apiClient.get('/ampcode/model-mappings');
|
||||
const list = data?.['model-mappings'] ?? data?.modelMappings ?? data?.items ?? data;
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
*/
|
||||
|
||||
import { apiClient } from './client';
|
||||
import { LOGS_TIMEOUT_MS } from '@/utils/constants';
|
||||
|
||||
export interface LogsQuery {
|
||||
after?: number;
|
||||
@@ -14,16 +15,28 @@ export interface LogsResponse {
|
||||
'latest-timestamp': number;
|
||||
}
|
||||
|
||||
export interface ErrorLogFile {
|
||||
name: string;
|
||||
size?: number;
|
||||
modified?: number;
|
||||
}
|
||||
|
||||
export interface ErrorLogsResponse {
|
||||
files?: ErrorLogFile[];
|
||||
}
|
||||
|
||||
export const logsApi = {
|
||||
fetchLogs: (params: LogsQuery = {}): Promise<LogsResponse> =>
|
||||
apiClient.get('/logs', { params }),
|
||||
apiClient.get('/logs', { params, timeout: LOGS_TIMEOUT_MS }),
|
||||
|
||||
clearLogs: () => apiClient.delete('/logs'),
|
||||
|
||||
fetchErrorLogs: () => apiClient.get('/request-error-logs'),
|
||||
fetchErrorLogs: (): Promise<ErrorLogsResponse> =>
|
||||
apiClient.get('/request-error-logs', { timeout: LOGS_TIMEOUT_MS }),
|
||||
|
||||
downloadErrorLog: (filename: string) =>
|
||||
apiClient.getRaw(`/request-error-logs/${encodeURIComponent(filename)}`, {
|
||||
responseType: 'blob'
|
||||
})
|
||||
responseType: 'blob',
|
||||
timeout: LOGS_TIMEOUT_MS
|
||||
}),
|
||||
};
|
||||
|
||||
@@ -17,6 +17,10 @@ export interface OAuthStartResponse {
|
||||
state?: string;
|
||||
}
|
||||
|
||||
export interface OAuthCallbackResponse {
|
||||
status: 'ok';
|
||||
}
|
||||
|
||||
export interface IFlowCookieAuthResponse {
|
||||
status: 'ok' | 'error';
|
||||
error?: string;
|
||||
@@ -27,18 +31,37 @@ export interface IFlowCookieAuthResponse {
|
||||
}
|
||||
|
||||
const WEBUI_SUPPORTED: OAuthProvider[] = ['codex', 'anthropic', 'antigravity', 'gemini-cli', 'iflow'];
|
||||
const CALLBACK_PROVIDER_MAP: Partial<Record<OAuthProvider, string>> = {
|
||||
'gemini-cli': 'gemini'
|
||||
};
|
||||
|
||||
export const oauthApi = {
|
||||
startAuth: (provider: OAuthProvider) =>
|
||||
apiClient.get<OAuthStartResponse>(`/${provider}-auth-url`, {
|
||||
params: WEBUI_SUPPORTED.includes(provider) ? { is_webui: true } : undefined
|
||||
}),
|
||||
startAuth: (provider: OAuthProvider, options?: { projectId?: string }) => {
|
||||
const params: Record<string, string | boolean> = {};
|
||||
if (WEBUI_SUPPORTED.includes(provider)) {
|
||||
params.is_webui = true;
|
||||
}
|
||||
if (provider === 'gemini-cli' && options?.projectId) {
|
||||
params.project_id = options.projectId;
|
||||
}
|
||||
return apiClient.get<OAuthStartResponse>(`/${provider}-auth-url`, {
|
||||
params: Object.keys(params).length ? params : undefined
|
||||
});
|
||||
},
|
||||
|
||||
getAuthStatus: (state: string) =>
|
||||
apiClient.get<{ status: 'ok' | 'wait' | 'error'; error?: string }>(`/get-auth-status`, {
|
||||
params: { state }
|
||||
}),
|
||||
|
||||
submitCallback: (provider: OAuthProvider, redirectUrl: string) => {
|
||||
const callbackProvider = CALLBACK_PROVIDER_MAP[provider] ?? provider;
|
||||
return apiClient.post<OAuthCallbackResponse>('/oauth-callback', {
|
||||
provider: callbackProvider,
|
||||
redirect_url: redirectUrl
|
||||
});
|
||||
},
|
||||
|
||||
/** iFlow cookie 认证 */
|
||||
iflowCookieAuth: (cookie: string) =>
|
||||
apiClient.post<IFlowCookieAuthResponse>('/iflow-auth-url', { cookie })
|
||||
|
||||
@@ -205,15 +205,6 @@ const normalizeAmpcodeConfig = (payload: any): AmpcodeConfig | undefined => {
|
||||
const upstreamApiKey = source['upstream-api-key'] ?? source.upstreamApiKey ?? source['upstream_api_key'];
|
||||
if (upstreamApiKey) config.upstreamApiKey = String(upstreamApiKey);
|
||||
|
||||
const restrictManagementToLocalhost = normalizeBoolean(
|
||||
source['restrict-management-to-localhost'] ??
|
||||
source.restrictManagementToLocalhost ??
|
||||
source['restrict_management_to_localhost']
|
||||
);
|
||||
if (restrictManagementToLocalhost !== undefined) {
|
||||
config.restrictManagementToLocalhost = restrictManagementToLocalhost;
|
||||
}
|
||||
|
||||
const forceModelMappings = normalizeBoolean(
|
||||
source['force-model-mappings'] ?? source.forceModelMappings ?? source['force_model_mappings']
|
||||
);
|
||||
|
||||
@@ -5,11 +5,13 @@
|
||||
import { apiClient } from './client';
|
||||
import { computeKeyStats, KeyStats } from '@/utils/usage';
|
||||
|
||||
const USAGE_TIMEOUT_MS = 60 * 1000;
|
||||
|
||||
export const usageApi = {
|
||||
/**
|
||||
* 获取使用统计原始数据
|
||||
*/
|
||||
getUsage: () => apiClient.get('/usage'),
|
||||
getUsage: () => apiClient.get('/usage', { timeout: USAGE_TIMEOUT_MS }),
|
||||
|
||||
/**
|
||||
* 计算密钥成功/失败统计,必要时会先获取 usage 数据
|
||||
@@ -17,7 +19,7 @@ export const usageApi = {
|
||||
async getKeyStats(usageData?: any): Promise<KeyStats> {
|
||||
let payload = usageData;
|
||||
if (!payload) {
|
||||
const response = await apiClient.get('/usage');
|
||||
const response = await apiClient.get('/usage', { timeout: USAGE_TIMEOUT_MS });
|
||||
payload = response?.usage ?? response;
|
||||
}
|
||||
return computeKeyStats(payload);
|
||||
|
||||
@@ -10,7 +10,6 @@ export interface AmpcodeModelMapping {
|
||||
export interface AmpcodeConfig {
|
||||
upstreamUrl?: string;
|
||||
upstreamApiKey?: string;
|
||||
restrictManagementToLocalhost?: boolean;
|
||||
modelMappings?: AmpcodeModelMapping[];
|
||||
forceModelMappings?: boolean;
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@ export const LOG_REFRESH_DELAY_MS = 500;
|
||||
// 日志相关
|
||||
export const MAX_LOG_LINES = 2000;
|
||||
export const LOG_FETCH_LIMIT = 2500;
|
||||
export const LOGS_TIMEOUT_MS = 60 * 1000;
|
||||
|
||||
// 认证文件分页
|
||||
export const DEFAULT_AUTH_FILES_PAGE_SIZE = 20;
|
||||
|
||||
@@ -52,6 +52,37 @@ export function formatDateTime(date: string | Date): string {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 将 Unix 时间戳(秒/毫秒/微秒/纳秒)格式化为本地时间字符串
|
||||
*/
|
||||
export function formatUnixTimestamp(value: unknown, locale?: string): string {
|
||||
if (value === null || value === undefined || value === '') return '';
|
||||
|
||||
const asNumber = typeof value === 'number' ? value : Number(value);
|
||||
const date = (() => {
|
||||
if (!Number.isFinite(asNumber) || Number.isNaN(asNumber)) {
|
||||
return new Date(String(value));
|
||||
}
|
||||
|
||||
const abs = Math.abs(asNumber);
|
||||
|
||||
// 秒:常见 10 位(~1e9)
|
||||
if (abs < 1e11) return new Date(asNumber * 1000);
|
||||
|
||||
// 毫秒:常见 13 位(~1e12)
|
||||
if (abs < 1e14) return new Date(asNumber);
|
||||
|
||||
// 微秒:常见 16 位(~1e15)
|
||||
if (abs < 1e17) return new Date(Math.round(asNumber / 1000));
|
||||
|
||||
// 纳秒:常见 19 位(~1e18)
|
||||
return new Date(Math.round(asNumber / 1e6));
|
||||
})();
|
||||
|
||||
if (Number.isNaN(date.getTime())) return '';
|
||||
return locale ? date.toLocaleString(locale) : date.toLocaleString();
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化数字(添加千位分隔符)
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user