Enhance monitoring page functionality and user experience
Changes: - Add provider type filtering for request logs to quickly locate specific provider usage - Optimize request log display by showing provider type in a dedicated column and removing auth index column for better readability - Add friendly prompts for providers that don't support auto-disable (e.g., Claude, Gemini) with manual operation guides - Point WebUI repository to this repository (forked from official for modifications) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -33,3 +33,4 @@ settings.local.json
|
|||||||
自定义 Web UI
|
自定义 Web UI
|
||||||
tmpclaude*
|
tmpclaude*
|
||||||
.claude
|
.claude
|
||||||
|
CLIProxyAPI-服务端
|
||||||
@@ -6,6 +6,7 @@ import { usageApi } from '@/services/api';
|
|||||||
import { useDisableModel } from '@/hooks';
|
import { useDisableModel } from '@/hooks';
|
||||||
import { TimeRangeSelector, formatTimeRangeCaption, type TimeRange } from './TimeRangeSelector';
|
import { TimeRangeSelector, formatTimeRangeCaption, type TimeRange } from './TimeRangeSelector';
|
||||||
import { DisableModelModal } from './DisableModelModal';
|
import { DisableModelModal } from './DisableModelModal';
|
||||||
|
import { UnsupportedDisableModal } from './UnsupportedDisableModal';
|
||||||
import {
|
import {
|
||||||
maskSecret,
|
maskSecret,
|
||||||
formatProviderDisplay,
|
formatProviderDisplay,
|
||||||
@@ -21,6 +22,7 @@ interface RequestLogsProps {
|
|||||||
data: UsageData | null;
|
data: UsageData | null;
|
||||||
loading: boolean;
|
loading: boolean;
|
||||||
providerMap: Record<string, string>;
|
providerMap: Record<string, string>;
|
||||||
|
providerTypeMap: Record<string, string>;
|
||||||
apiFilter: string;
|
apiFilter: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -33,8 +35,8 @@ interface LogEntry {
|
|||||||
source: string;
|
source: string;
|
||||||
displayName: string;
|
displayName: string;
|
||||||
providerName: string | null;
|
providerName: string | null;
|
||||||
|
providerType: string;
|
||||||
maskedKey: string;
|
maskedKey: string;
|
||||||
authIndex: string;
|
|
||||||
failed: boolean;
|
failed: boolean;
|
||||||
inputTokens: number;
|
inputTokens: number;
|
||||||
outputTokens: number;
|
outputTokens: number;
|
||||||
@@ -56,12 +58,13 @@ interface PrecomputedStats {
|
|||||||
// 虚拟滚动行高
|
// 虚拟滚动行高
|
||||||
const ROW_HEIGHT = 40;
|
const ROW_HEIGHT = 40;
|
||||||
|
|
||||||
export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilter }: RequestLogsProps) {
|
export function RequestLogs({ data, loading: parentLoading, providerMap, providerTypeMap, apiFilter }: RequestLogsProps) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [filterApi, setFilterApi] = useState('');
|
const [filterApi, setFilterApi] = useState('');
|
||||||
const [filterModel, setFilterModel] = useState('');
|
const [filterModel, setFilterModel] = useState('');
|
||||||
const [filterSource, setFilterSource] = useState('');
|
const [filterSource, setFilterSource] = useState('');
|
||||||
const [filterStatus, setFilterStatus] = useState<'' | 'success' | 'failed'>('');
|
const [filterStatus, setFilterStatus] = useState<'' | 'success' | 'failed'>('');
|
||||||
|
const [filterProviderType, setFilterProviderType] = useState('');
|
||||||
const [autoRefresh, setAutoRefresh] = useState(10);
|
const [autoRefresh, setAutoRefresh] = useState(10);
|
||||||
const [countdown, setCountdown] = useState(0);
|
const [countdown, setCountdown] = useState(0);
|
||||||
const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
const countdownRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||||
@@ -92,12 +95,14 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
|
|||||||
// 使用禁用模型 Hook
|
// 使用禁用模型 Hook
|
||||||
const {
|
const {
|
||||||
disableState,
|
disableState,
|
||||||
|
unsupportedState,
|
||||||
disabling,
|
disabling,
|
||||||
isModelDisabled,
|
isModelDisabled,
|
||||||
handleDisableClick,
|
handleDisableClick,
|
||||||
handleConfirmDisable,
|
handleConfirmDisable,
|
||||||
handleCancelDisable,
|
handleCancelDisable,
|
||||||
} = useDisableModel({ providerMap });
|
handleCloseUnsupported,
|
||||||
|
} = useDisableModel({ providerMap, providerTypeMap });
|
||||||
|
|
||||||
// 处理时间范围变化
|
// 处理时间范围变化
|
||||||
const handleTimeRangeChange = useCallback((range: TimeRange, custom?: DateRange) => {
|
const handleTimeRangeChange = useCallback((range: TimeRange, custom?: DateRange) => {
|
||||||
@@ -261,6 +266,8 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
|
|||||||
const { provider, masked } = getProviderDisplayParts(source, providerMap);
|
const { provider, masked } = getProviderDisplayParts(source, providerMap);
|
||||||
const displayName = provider ? `${provider} (${masked})` : masked;
|
const displayName = provider ? `${provider} (${masked})` : masked;
|
||||||
const timestampMs = detail.timestamp ? new Date(detail.timestamp).getTime() : 0;
|
const timestampMs = detail.timestamp ? new Date(detail.timestamp).getTime() : 0;
|
||||||
|
// 获取提供商类型
|
||||||
|
const providerType = providerTypeMap[source] || '--';
|
||||||
entries.push({
|
entries.push({
|
||||||
id: `${idCounter++}`,
|
id: `${idCounter++}`,
|
||||||
timestamp: detail.timestamp,
|
timestamp: detail.timestamp,
|
||||||
@@ -270,8 +277,8 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
|
|||||||
source,
|
source,
|
||||||
displayName,
|
displayName,
|
||||||
providerName: provider,
|
providerName: provider,
|
||||||
|
providerType,
|
||||||
maskedKey: masked,
|
maskedKey: masked,
|
||||||
authIndex: detail.auth_index || '--',
|
|
||||||
failed: detail.failed,
|
failed: detail.failed,
|
||||||
inputTokens: detail.tokens.input_tokens || 0,
|
inputTokens: detail.tokens.input_tokens || 0,
|
||||||
outputTokens: detail.tokens.output_tokens || 0,
|
outputTokens: detail.tokens.output_tokens || 0,
|
||||||
@@ -283,7 +290,7 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
|
|||||||
|
|
||||||
// 按时间倒序排序
|
// 按时间倒序排序
|
||||||
return entries.sort((a, b) => b.timestampMs - a.timestampMs);
|
return entries.sort((a, b) => b.timestampMs - a.timestampMs);
|
||||||
}, [effectiveData, providerMap]);
|
}, [effectiveData, providerMap, providerTypeMap]);
|
||||||
|
|
||||||
// 预计算所有条目的统计数据(一次性计算,避免渲染时重复计算)
|
// 预计算所有条目的统计数据(一次性计算,避免渲染时重复计算)
|
||||||
const precomputedStats = useMemo(() => {
|
const precomputedStats = useMemo(() => {
|
||||||
@@ -339,21 +346,26 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
|
|||||||
}, [logEntries]);
|
}, [logEntries]);
|
||||||
|
|
||||||
// 获取筛选选项
|
// 获取筛选选项
|
||||||
const { apis, models, sources } = useMemo(() => {
|
const { apis, models, sources, providerTypes } = useMemo(() => {
|
||||||
const apiSet = new Set<string>();
|
const apiSet = new Set<string>();
|
||||||
const modelSet = new Set<string>();
|
const modelSet = new Set<string>();
|
||||||
const sourceSet = new Set<string>();
|
const sourceSet = new Set<string>();
|
||||||
|
const providerTypeSet = new Set<string>();
|
||||||
|
|
||||||
logEntries.forEach((entry) => {
|
logEntries.forEach((entry) => {
|
||||||
apiSet.add(entry.apiKey);
|
apiSet.add(entry.apiKey);
|
||||||
modelSet.add(entry.model);
|
modelSet.add(entry.model);
|
||||||
sourceSet.add(entry.source);
|
sourceSet.add(entry.source);
|
||||||
|
if (entry.providerType && entry.providerType !== '--') {
|
||||||
|
providerTypeSet.add(entry.providerType);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
apis: Array.from(apiSet).sort(),
|
apis: Array.from(apiSet).sort(),
|
||||||
models: Array.from(modelSet).sort(),
|
models: Array.from(modelSet).sort(),
|
||||||
sources: Array.from(sourceSet).sort(),
|
sources: Array.from(sourceSet).sort(),
|
||||||
|
providerTypes: Array.from(providerTypeSet).sort(),
|
||||||
};
|
};
|
||||||
}, [logEntries]);
|
}, [logEntries]);
|
||||||
|
|
||||||
@@ -365,9 +377,10 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
|
|||||||
if (filterSource && entry.source !== filterSource) return false;
|
if (filterSource && entry.source !== filterSource) return false;
|
||||||
if (filterStatus === 'success' && entry.failed) return false;
|
if (filterStatus === 'success' && entry.failed) return false;
|
||||||
if (filterStatus === 'failed' && !entry.failed) return false;
|
if (filterStatus === 'failed' && !entry.failed) return false;
|
||||||
|
if (filterProviderType && entry.providerType !== filterProviderType) return false;
|
||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
}, [logEntries, filterApi, filterModel, filterSource, filterStatus]);
|
}, [logEntries, filterApi, filterModel, filterSource, filterStatus, filterProviderType]);
|
||||||
|
|
||||||
// 虚拟滚动配置
|
// 虚拟滚动配置
|
||||||
const rowVirtualizer = useVirtualizer({
|
const rowVirtualizer = useVirtualizer({
|
||||||
@@ -399,10 +412,10 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<td>{entry.authIndex}</td>
|
|
||||||
<td title={entry.apiKey}>
|
<td title={entry.apiKey}>
|
||||||
{maskSecret(entry.apiKey)}
|
{maskSecret(entry.apiKey)}
|
||||||
</td>
|
</td>
|
||||||
|
<td>{entry.providerType}</td>
|
||||||
<td title={entry.model}>
|
<td title={entry.model}>
|
||||||
{entry.model}
|
{entry.model}
|
||||||
</td>
|
</td>
|
||||||
@@ -494,6 +507,16 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
|
|||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
</select>
|
</select>
|
||||||
|
<select
|
||||||
|
className={styles.logSelect}
|
||||||
|
value={filterProviderType}
|
||||||
|
onChange={(e) => setFilterProviderType(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="">{t('monitor.logs.all_provider_types')}</option>
|
||||||
|
{providerTypes.map((type) => (
|
||||||
|
<option key={type} value={type}>{type}</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
<select
|
<select
|
||||||
className={styles.logSelect}
|
className={styles.logSelect}
|
||||||
value={filterModel}
|
value={filterModel}
|
||||||
@@ -557,8 +580,8 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
|
|||||||
<table className={`${styles.table} ${styles.virtualTable}`}>
|
<table className={`${styles.table} ${styles.virtualTable}`}>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>{t('monitor.logs.header_auth')}</th>
|
|
||||||
<th>{t('monitor.logs.header_api')}</th>
|
<th>{t('monitor.logs.header_api')}</th>
|
||||||
|
<th>{t('monitor.logs.header_request_type')}</th>
|
||||||
<th>{t('monitor.logs.header_model')}</th>
|
<th>{t('monitor.logs.header_model')}</th>
|
||||||
<th>{t('monitor.logs.header_source')}</th>
|
<th>{t('monitor.logs.header_source')}</th>
|
||||||
<th>{t('monitor.logs.header_status')}</th>
|
<th>{t('monitor.logs.header_status')}</th>
|
||||||
@@ -638,6 +661,12 @@ export function RequestLogs({ data, loading: parentLoading, providerMap, apiFilt
|
|||||||
onConfirm={handleConfirmDisable}
|
onConfirm={handleConfirmDisable}
|
||||||
onCancel={handleCancelDisable}
|
onCancel={handleCancelDisable}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
{/* 不支持自动禁用提示弹窗 */}
|
||||||
|
<UnsupportedDisableModal
|
||||||
|
state={unsupportedState}
|
||||||
|
onClose={handleCloseUnsupported}
|
||||||
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
82
src/components/monitor/UnsupportedDisableModal.tsx
Normal file
82
src/components/monitor/UnsupportedDisableModal.tsx
Normal file
@@ -0,0 +1,82 @@
|
|||||||
|
/**
|
||||||
|
* 不支持自动禁用提示弹窗组件
|
||||||
|
* 显示手动操作指南
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import type { UnsupportedDisableState } from '@/hooks/useDisableModel';
|
||||||
|
|
||||||
|
interface UnsupportedDisableModalProps {
|
||||||
|
/** 不支持禁用的状态 */
|
||||||
|
state: UnsupportedDisableState | null;
|
||||||
|
/** 关闭回调 */
|
||||||
|
onClose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UnsupportedDisableModal({
|
||||||
|
state,
|
||||||
|
onClose,
|
||||||
|
}: UnsupportedDisableModalProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
if (!state) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={!!state}
|
||||||
|
onClose={onClose}
|
||||||
|
title={t('monitor.logs.disable_unsupported_title')}
|
||||||
|
width={450}
|
||||||
|
>
|
||||||
|
<div style={{ padding: '16px 0' }}>
|
||||||
|
{/* 提示信息 */}
|
||||||
|
<p style={{
|
||||||
|
marginBottom: 16,
|
||||||
|
lineHeight: 1.6,
|
||||||
|
color: 'var(--warning-color, #f59e0b)',
|
||||||
|
fontWeight: 500,
|
||||||
|
}}>
|
||||||
|
⚠️ {t('monitor.logs.disable_unsupported_desc', { providerType: state.providerType })}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* 手动操作指南 */}
|
||||||
|
<div style={{
|
||||||
|
padding: '12px 16px',
|
||||||
|
background: 'var(--bg-tertiary)',
|
||||||
|
borderRadius: '8px',
|
||||||
|
marginBottom: 16,
|
||||||
|
}}>
|
||||||
|
<p style={{
|
||||||
|
fontWeight: 600,
|
||||||
|
marginBottom: 8,
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
}}>
|
||||||
|
{t('monitor.logs.disable_unsupported_guide_title')}
|
||||||
|
</p>
|
||||||
|
<ul style={{
|
||||||
|
margin: 0,
|
||||||
|
padding: 0,
|
||||||
|
listStyle: 'none',
|
||||||
|
fontSize: 13,
|
||||||
|
lineHeight: 1.8,
|
||||||
|
color: 'var(--text-secondary)',
|
||||||
|
}}>
|
||||||
|
<li>{t('monitor.logs.disable_unsupported_guide_step1')}</li>
|
||||||
|
<li>{t('monitor.logs.disable_unsupported_guide_step2', { providerType: state.providerType })}</li>
|
||||||
|
<li>{t('monitor.logs.disable_unsupported_guide_step3', { model: state.model })}</li>
|
||||||
|
<li>{t('monitor.logs.disable_unsupported_guide_step4')}</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 关闭按钮 */}
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||||
|
<Button variant="primary" onClick={onClose}>
|
||||||
|
{t('monitor.logs.disable_unsupported_close')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -14,17 +14,29 @@ import {
|
|||||||
} from '@/utils/monitor';
|
} from '@/utils/monitor';
|
||||||
import type { OpenAIProviderConfig } from '@/types';
|
import type { OpenAIProviderConfig } from '@/types';
|
||||||
|
|
||||||
// 不支持禁用的渠道类型
|
// 不支持禁用的渠道类型(小写)
|
||||||
const UNSUPPORTED_PROVIDERS = ['claude', 'gemini', 'codex'];
|
const UNSUPPORTED_PROVIDER_TYPES = ['claude', 'gemini', 'codex', 'vertex'];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 不支持禁用的提示状态
|
||||||
|
*/
|
||||||
|
export interface UnsupportedDisableState {
|
||||||
|
providerType: string;
|
||||||
|
model: string;
|
||||||
|
displayName: string;
|
||||||
|
}
|
||||||
|
|
||||||
export interface UseDisableModelOptions {
|
export interface UseDisableModelOptions {
|
||||||
providerMap: Record<string, string>;
|
providerMap: Record<string, string>;
|
||||||
|
providerTypeMap?: Record<string, string>;
|
||||||
providerModels?: Record<string, Set<string>>;
|
providerModels?: Record<string, Set<string>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface UseDisableModelReturn {
|
export interface UseDisableModelReturn {
|
||||||
/** 当前禁用状态 */
|
/** 当前禁用状态 */
|
||||||
disableState: DisableState | null;
|
disableState: DisableState | null;
|
||||||
|
/** 不支持禁用的提示状态 */
|
||||||
|
unsupportedState: UnsupportedDisableState | null;
|
||||||
/** 是否正在禁用中 */
|
/** 是否正在禁用中 */
|
||||||
disabling: boolean;
|
disabling: boolean;
|
||||||
/** 开始禁用流程 */
|
/** 开始禁用流程 */
|
||||||
@@ -33,6 +45,8 @@ export interface UseDisableModelReturn {
|
|||||||
handleConfirmDisable: () => Promise<void>;
|
handleConfirmDisable: () => Promise<void>;
|
||||||
/** 取消禁用 */
|
/** 取消禁用 */
|
||||||
handleCancelDisable: () => void;
|
handleCancelDisable: () => void;
|
||||||
|
/** 关闭不支持提示 */
|
||||||
|
handleCloseUnsupported: () => void;
|
||||||
/** 检查模型是否已禁用 */
|
/** 检查模型是否已禁用 */
|
||||||
isModelDisabled: (source: string, model: string) => boolean;
|
isModelDisabled: (source: string, model: string) => boolean;
|
||||||
}
|
}
|
||||||
@@ -43,19 +57,39 @@ export interface UseDisableModelReturn {
|
|||||||
* @returns 禁用模型相关的状态和方法
|
* @returns 禁用模型相关的状态和方法
|
||||||
*/
|
*/
|
||||||
export function useDisableModel(options: UseDisableModelOptions): UseDisableModelReturn {
|
export function useDisableModel(options: UseDisableModelOptions): UseDisableModelReturn {
|
||||||
const { providerMap, providerModels } = options;
|
const { providerMap, providerTypeMap, providerModels } = options;
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
// 使用全局 store 管理禁用状态
|
// 使用全局 store 管理禁用状态
|
||||||
const { addDisabledModel, isDisabled } = useDisabledModelsStore();
|
const { addDisabledModel, isDisabled } = useDisabledModelsStore();
|
||||||
|
|
||||||
const [disableState, setDisableState] = useState<DisableState | null>(null);
|
const [disableState, setDisableState] = useState<DisableState | null>(null);
|
||||||
|
const [unsupportedState, setUnsupportedState] = useState<UnsupportedDisableState | null>(null);
|
||||||
const [disabling, setDisabling] = useState(false);
|
const [disabling, setDisabling] = useState(false);
|
||||||
|
|
||||||
// 开始禁用流程
|
// 开始禁用流程
|
||||||
const handleDisableClick = useCallback((source: string, model: string) => {
|
const handleDisableClick = useCallback((source: string, model: string) => {
|
||||||
|
// 首先检查提供商类型是否支持禁用
|
||||||
|
const providerType = providerTypeMap?.[source] || '';
|
||||||
|
const lowerType = providerType.toLowerCase();
|
||||||
|
|
||||||
|
// 如果是不支持的类型,立即显示提示
|
||||||
|
if (lowerType && UNSUPPORTED_PROVIDER_TYPES.includes(lowerType)) {
|
||||||
|
const providerName = resolveProvider(source, providerMap);
|
||||||
|
const displayName = providerName
|
||||||
|
? `${providerName} / ${model}`
|
||||||
|
: `${source.slice(0, 8)}*** / ${model}`;
|
||||||
|
setUnsupportedState({
|
||||||
|
providerType,
|
||||||
|
model,
|
||||||
|
displayName,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 支持的类型,进入正常禁用流程
|
||||||
setDisableState(createDisableState(source, model, providerMap));
|
setDisableState(createDisableState(source, model, providerMap));
|
||||||
}, [providerMap]);
|
}, [providerMap, providerTypeMap]);
|
||||||
|
|
||||||
// 确认禁用(需要点击3次)
|
// 确认禁用(需要点击3次)
|
||||||
const handleConfirmDisable = useCallback(async () => {
|
const handleConfirmDisable = useCallback(async () => {
|
||||||
@@ -78,12 +112,6 @@ export function useDisableModel(options: UseDisableModelOptions): UseDisableMode
|
|||||||
throw new Error(t('monitor.logs.disable_error_no_provider'));
|
throw new Error(t('monitor.logs.disable_error_no_provider'));
|
||||||
}
|
}
|
||||||
|
|
||||||
// 检查是否为不支持的渠道类型
|
|
||||||
const lowerName = providerName.toLowerCase();
|
|
||||||
if (UNSUPPORTED_PROVIDERS.includes(lowerName)) {
|
|
||||||
throw new Error(t('monitor.logs.disable_not_supported', { provider: providerName }));
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取当前配置
|
// 获取当前配置
|
||||||
const providers = await providersApi.getOpenAIProviders();
|
const providers = await providersApi.getOpenAIProviders();
|
||||||
const targetProvider = providers.find(
|
const targetProvider = providers.find(
|
||||||
@@ -125,6 +153,11 @@ export function useDisableModel(options: UseDisableModelOptions): UseDisableMode
|
|||||||
setDisableState(null);
|
setDisableState(null);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// 关闭不支持提示
|
||||||
|
const handleCloseUnsupported = useCallback(() => {
|
||||||
|
setUnsupportedState(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
// 检查模型是否已禁用
|
// 检查模型是否已禁用
|
||||||
const isModelDisabled = useCallback((source: string, model: string): boolean => {
|
const isModelDisabled = useCallback((source: string, model: string): boolean => {
|
||||||
// 首先检查全局状态中是否已禁用
|
// 首先检查全局状态中是否已禁用
|
||||||
@@ -155,10 +188,12 @@ export function useDisableModel(options: UseDisableModelOptions): UseDisableMode
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
disableState,
|
disableState,
|
||||||
|
unsupportedState,
|
||||||
disabling,
|
disabling,
|
||||||
handleDisableClick,
|
handleDisableClick,
|
||||||
handleConfirmDisable,
|
handleConfirmDisable,
|
||||||
handleCancelDisable,
|
handleCancelDisable,
|
||||||
|
handleCloseUnsupported,
|
||||||
isModelDisabled,
|
isModelDisabled,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1024,6 +1024,7 @@
|
|||||||
"all_models": "All Models",
|
"all_models": "All Models",
|
||||||
"all_sources": "All Sources",
|
"all_sources": "All Sources",
|
||||||
"all_status": "All Status",
|
"all_status": "All Status",
|
||||||
|
"all_provider_types": "All Providers",
|
||||||
"success": "Success",
|
"success": "Success",
|
||||||
"failed": "Failed",
|
"failed": "Failed",
|
||||||
"last_update": "Last Update",
|
"last_update": "Last Update",
|
||||||
@@ -1037,6 +1038,7 @@
|
|||||||
"refreshing": "Refreshing...",
|
"refreshing": "Refreshing...",
|
||||||
"header_auth": "Auth Index",
|
"header_auth": "Auth Index",
|
||||||
"header_api": "API",
|
"header_api": "API",
|
||||||
|
"header_request_type": "Type",
|
||||||
"header_model": "Model",
|
"header_model": "Model",
|
||||||
"header_source": "Source",
|
"header_source": "Source",
|
||||||
"header_status": "Status",
|
"header_status": "Status",
|
||||||
@@ -1063,7 +1065,15 @@
|
|||||||
"disable_error": "Disable failed",
|
"disable_error": "Disable failed",
|
||||||
"disable_error_no_provider": "Cannot identify provider",
|
"disable_error_no_provider": "Cannot identify provider",
|
||||||
"disable_error_provider_not_found": "Provider config not found: {{provider}}",
|
"disable_error_provider_not_found": "Provider config not found: {{provider}}",
|
||||||
"disable_not_supported": "{{provider}} provider does not support disable operation"
|
"disable_not_supported": "{{provider}} provider does not support disable operation",
|
||||||
|
"disable_unsupported_title": "Auto-disable Not Supported",
|
||||||
|
"disable_unsupported_desc": "{{providerType}} type providers do not support auto-disable feature.",
|
||||||
|
"disable_unsupported_guide_title": "Manual Operation Guide",
|
||||||
|
"disable_unsupported_guide_step1": "1. Go to the \"AI Providers\" page",
|
||||||
|
"disable_unsupported_guide_step2": "2. Find the corresponding {{providerType}} configuration",
|
||||||
|
"disable_unsupported_guide_step3": "3. Edit the config and remove model \"{{model}}\"",
|
||||||
|
"disable_unsupported_guide_step4": "4. Save the configuration to apply changes",
|
||||||
|
"disable_unsupported_close": "Got it"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1020,10 +1020,11 @@
|
|||||||
"sort_hint": "自动按时间倒序",
|
"sort_hint": "自动按时间倒序",
|
||||||
"scroll_hint": "滚动浏览全部数据",
|
"scroll_hint": "滚动浏览全部数据",
|
||||||
"virtual_scroll_info": "当前显示 {{visible}} 行,共 {{total}} 条记录",
|
"virtual_scroll_info": "当前显示 {{visible}} 行,共 {{total}} 条记录",
|
||||||
"all_apis": "全部 API",
|
"all_apis": "全部请求 API",
|
||||||
"all_models": "全部模型",
|
"all_models": "全部请求模型",
|
||||||
"all_sources": "全部来源渠道",
|
"all_sources": "全部请求渠道",
|
||||||
"all_status": "全部状态",
|
"all_status": "全部请求状态",
|
||||||
|
"all_provider_types": "全部请求类型",
|
||||||
"success": "成功",
|
"success": "成功",
|
||||||
"failed": "失败",
|
"failed": "失败",
|
||||||
"last_update": "最后更新",
|
"last_update": "最后更新",
|
||||||
@@ -1036,10 +1037,11 @@
|
|||||||
"refresh_in_seconds": "{{seconds}}秒后刷新",
|
"refresh_in_seconds": "{{seconds}}秒后刷新",
|
||||||
"refreshing": "刷新中...",
|
"refreshing": "刷新中...",
|
||||||
"header_auth": "认证索引",
|
"header_auth": "认证索引",
|
||||||
"header_api": "API",
|
"header_api": "请求 API",
|
||||||
"header_model": "模型",
|
"header_request_type": "请求类型",
|
||||||
|
"header_model": "请求模型",
|
||||||
"header_source": "请求渠道",
|
"header_source": "请求渠道",
|
||||||
"header_status": "状态",
|
"header_status": "请求状态",
|
||||||
"header_recent": "最近请求状态",
|
"header_recent": "最近请求状态",
|
||||||
"header_rate": "成功率",
|
"header_rate": "成功率",
|
||||||
"header_count": "请求数",
|
"header_count": "请求数",
|
||||||
@@ -1063,7 +1065,15 @@
|
|||||||
"disable_error": "禁用失败",
|
"disable_error": "禁用失败",
|
||||||
"disable_error_no_provider": "无法识别渠道",
|
"disable_error_no_provider": "无法识别渠道",
|
||||||
"disable_error_provider_not_found": "未找到渠道配置:{{provider}}",
|
"disable_error_provider_not_found": "未找到渠道配置:{{provider}}",
|
||||||
"disable_not_supported": "{{provider}} 渠道不支持禁用操作"
|
"disable_not_supported": "{{provider}} 渠道不支持禁用操作",
|
||||||
|
"disable_unsupported_title": "不支持自动禁用",
|
||||||
|
"disable_unsupported_desc": "{{providerType}} 类型的渠道暂不支持自动禁用功能。",
|
||||||
|
"disable_unsupported_guide_title": "手动操作指南",
|
||||||
|
"disable_unsupported_guide_step1": "1. 前往「AI 提供商」页面",
|
||||||
|
"disable_unsupported_guide_step2": "2. 找到对应的 {{providerType}} 配置",
|
||||||
|
"disable_unsupported_guide_step3": "3. 编辑配置,移除模型「{{model}}」",
|
||||||
|
"disable_unsupported_guide_step4": "4. 保存配置即可生效",
|
||||||
|
"disable_unsupported_close": "我知道了"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -586,7 +586,7 @@
|
|||||||
// 虚拟滚动表格固定列宽
|
// 虚拟滚动表格固定列宽
|
||||||
.virtualTable {
|
.virtualTable {
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
min-width: 1200px;
|
min-width: 1180px;
|
||||||
|
|
||||||
th, td {
|
th, td {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -594,12 +594,12 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 认证索引
|
|
||||||
th:nth-child(1), td:nth-child(1) { width: 100px; }
|
|
||||||
// API
|
// API
|
||||||
th:nth-child(2), td:nth-child(2) { width: 110px; }
|
th:nth-child(1), td:nth-child(1) { width: 110px; }
|
||||||
|
// 请求类型
|
||||||
|
th:nth-child(2), td:nth-child(2) { width: 65px; }
|
||||||
// 模型
|
// 模型
|
||||||
th:nth-child(3), td:nth-child(3) { width: 120px; }
|
th:nth-child(3), td:nth-child(3) { width: 160px; }
|
||||||
// 请求渠道
|
// 请求渠道
|
||||||
th:nth-child(4), td:nth-child(4) { width: 140px; }
|
th:nth-child(4), td:nth-child(4) { width: 140px; }
|
||||||
// 状态
|
// 状态
|
||||||
|
|||||||
@@ -84,39 +84,116 @@ export function MonitorPage() {
|
|||||||
const [apiFilter, setApiFilter] = useState('');
|
const [apiFilter, setApiFilter] = useState('');
|
||||||
const [providerMap, setProviderMap] = useState<Record<string, string>>({});
|
const [providerMap, setProviderMap] = useState<Record<string, string>>({});
|
||||||
const [providerModels, setProviderModels] = useState<Record<string, Set<string>>>({});
|
const [providerModels, setProviderModels] = useState<Record<string, Set<string>>>({});
|
||||||
|
const [providerTypeMap, setProviderTypeMap] = useState<Record<string, string>>({});
|
||||||
|
|
||||||
// 加载渠道名称映射(参照原始 Web UI 的映射方式)
|
// 加载渠道名称映射(支持所有提供商类型)
|
||||||
const loadProviderMap = useCallback(async () => {
|
const loadProviderMap = useCallback(async () => {
|
||||||
try {
|
try {
|
||||||
const providers = await providersApi.getOpenAIProviders();
|
|
||||||
const map: Record<string, string> = {};
|
const map: Record<string, string> = {};
|
||||||
const modelsMap: Record<string, Set<string>> = {};
|
const modelsMap: Record<string, Set<string>> = {};
|
||||||
providers.forEach((provider) => {
|
const typeMap: Record<string, string> = {};
|
||||||
// 使用 X-Provider header 或 name 作为渠道名称
|
|
||||||
|
// 并行加载所有提供商配置
|
||||||
|
const [openaiProviders, geminiKeys, claudeConfigs, codexConfigs, vertexConfigs] = await Promise.all([
|
||||||
|
providersApi.getOpenAIProviders().catch(() => []),
|
||||||
|
providersApi.getGeminiKeys().catch(() => []),
|
||||||
|
providersApi.getClaudeConfigs().catch(() => []),
|
||||||
|
providersApi.getCodexConfigs().catch(() => []),
|
||||||
|
providersApi.getVertexConfigs().catch(() => []),
|
||||||
|
]);
|
||||||
|
|
||||||
|
// 处理 OpenAI 兼容提供商
|
||||||
|
openaiProviders.forEach((provider) => {
|
||||||
const providerName = provider.headers?.['X-Provider'] || provider.name || 'unknown';
|
const providerName = provider.headers?.['X-Provider'] || provider.name || 'unknown';
|
||||||
// 存储每个渠道的可用模型(使用 alias 和 name 作为标识)
|
|
||||||
const modelSet = new Set<string>();
|
const modelSet = new Set<string>();
|
||||||
(provider.models || []).forEach((m) => {
|
(provider.models || []).forEach((m) => {
|
||||||
if (m.alias) modelSet.add(m.alias);
|
if (m.alias) modelSet.add(m.alias);
|
||||||
if (m.name) modelSet.add(m.name);
|
if (m.name) modelSet.add(m.name);
|
||||||
});
|
});
|
||||||
// 遍历 api-key-entries,将每个 api-key 映射到 provider 名称和模型集合
|
|
||||||
const apiKeyEntries = provider.apiKeyEntries || [];
|
const apiKeyEntries = provider.apiKeyEntries || [];
|
||||||
apiKeyEntries.forEach((entry) => {
|
apiKeyEntries.forEach((entry) => {
|
||||||
const apiKey = entry.apiKey;
|
const apiKey = entry.apiKey;
|
||||||
if (apiKey) {
|
if (apiKey) {
|
||||||
map[apiKey] = providerName;
|
map[apiKey] = providerName;
|
||||||
modelsMap[apiKey] = modelSet;
|
modelsMap[apiKey] = modelSet;
|
||||||
|
typeMap[apiKey] = 'OpenAI';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 也用 name 作为 key(备用)
|
|
||||||
if (provider.name) {
|
if (provider.name) {
|
||||||
map[provider.name] = providerName;
|
map[provider.name] = providerName;
|
||||||
modelsMap[provider.name] = modelSet;
|
modelsMap[provider.name] = modelSet;
|
||||||
|
typeMap[provider.name] = 'OpenAI';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 处理 Gemini 提供商
|
||||||
|
geminiKeys.forEach((config) => {
|
||||||
|
const apiKey = config.apiKey;
|
||||||
|
if (apiKey) {
|
||||||
|
const providerName = config.prefix?.trim() || 'Gemini';
|
||||||
|
map[apiKey] = providerName;
|
||||||
|
typeMap[apiKey] = 'Gemini';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理 Claude 提供商
|
||||||
|
claudeConfigs.forEach((config) => {
|
||||||
|
const apiKey = config.apiKey;
|
||||||
|
if (apiKey) {
|
||||||
|
const providerName = config.prefix?.trim() || 'Claude';
|
||||||
|
map[apiKey] = providerName;
|
||||||
|
typeMap[apiKey] = 'Claude';
|
||||||
|
// 存储模型集合
|
||||||
|
if (config.models && config.models.length > 0) {
|
||||||
|
const modelSet = new Set<string>();
|
||||||
|
config.models.forEach((m) => {
|
||||||
|
if (m.alias) modelSet.add(m.alias);
|
||||||
|
if (m.name) modelSet.add(m.name);
|
||||||
|
});
|
||||||
|
modelsMap[apiKey] = modelSet;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理 Codex 提供商
|
||||||
|
codexConfigs.forEach((config) => {
|
||||||
|
const apiKey = config.apiKey;
|
||||||
|
if (apiKey) {
|
||||||
|
const providerName = config.prefix?.trim() || 'Codex';
|
||||||
|
map[apiKey] = providerName;
|
||||||
|
typeMap[apiKey] = 'Codex';
|
||||||
|
if (config.models && config.models.length > 0) {
|
||||||
|
const modelSet = new Set<string>();
|
||||||
|
config.models.forEach((m) => {
|
||||||
|
if (m.alias) modelSet.add(m.alias);
|
||||||
|
if (m.name) modelSet.add(m.name);
|
||||||
|
});
|
||||||
|
modelsMap[apiKey] = modelSet;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 处理 Vertex 提供商
|
||||||
|
vertexConfigs.forEach((config) => {
|
||||||
|
const apiKey = config.apiKey;
|
||||||
|
if (apiKey) {
|
||||||
|
const providerName = config.prefix?.trim() || 'Vertex';
|
||||||
|
map[apiKey] = providerName;
|
||||||
|
typeMap[apiKey] = 'Vertex';
|
||||||
|
if (config.models && config.models.length > 0) {
|
||||||
|
const modelSet = new Set<string>();
|
||||||
|
config.models.forEach((m) => {
|
||||||
|
if (m.alias) modelSet.add(m.alias);
|
||||||
|
if (m.name) modelSet.add(m.name);
|
||||||
|
});
|
||||||
|
modelsMap[apiKey] = modelSet;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
setProviderMap(map);
|
setProviderMap(map);
|
||||||
setProviderModels(modelsMap);
|
setProviderModels(modelsMap);
|
||||||
|
setProviderTypeMap(typeMap);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.warn('Monitor: Failed to load provider map:', err);
|
console.warn('Monitor: Failed to load provider map:', err);
|
||||||
}
|
}
|
||||||
@@ -294,6 +371,7 @@ export function MonitorPage() {
|
|||||||
data={filteredData}
|
data={filteredData}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
providerMap={providerMap}
|
providerMap={providerMap}
|
||||||
|
providerTypeMap={providerTypeMap}
|
||||||
apiFilter={apiFilter}
|
apiFilter={apiFilter}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -181,7 +181,7 @@ export function SystemPage() {
|
|||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a
|
<a
|
||||||
href="https://github.com/router-for-me/Cli-Proxy-API-Management-Center"
|
href="https://github.com/kongkongyo/Cli-Proxy-API-Management-Center"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className={styles.linkCard}
|
className={styles.linkCard}
|
||||||
|
|||||||
Reference in New Issue
Block a user