mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-03 11:20:50 +08:00
Compare commits
34 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
99c4fbc30d | ||
|
|
a44257edda | ||
|
|
ebb80df24a | ||
|
|
5165715d37 | ||
|
|
73ee6eb2f3 | ||
|
|
161d5d1e7f | ||
|
|
3cbd04b296 | ||
|
|
859f7f120c | ||
|
|
fea29f7318 | ||
|
|
f663b83ac8 | ||
|
|
ee99836285 | ||
|
|
2086c348a9 | ||
|
|
a8abf71bfe | ||
|
|
8dca670358 | ||
|
|
71556a51c5 | ||
|
|
2a92ea8862 | ||
|
|
681fc3cee5 | ||
|
|
916dd3ec26 | ||
|
|
692f7f3cde | ||
|
|
bf20f3d86e | ||
|
|
b7e720133d | ||
|
|
e914337e57 | ||
|
|
6364bac1f2 | ||
|
|
38a3e20427 | ||
|
|
334d75f2dd | ||
|
|
42eb783395 | ||
|
|
84b219957e | ||
|
|
f5c1ef36ce | ||
|
|
fae4fb0fed | ||
|
|
1d8729ec53 | ||
|
|
c6ef8a259f | ||
|
|
0efef5a789 | ||
|
|
db376c7504 | ||
|
|
8232812ac2 |
14
package-lock.json
generated
14
package-lock.json
generated
@@ -3780,9 +3780,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-router": {
|
"node_modules/react-router": {
|
||||||
"version": "7.10.1",
|
"version": "7.12.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.10.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz",
|
||||||
"integrity": "sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw==",
|
"integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"cookie": "^1.0.1",
|
"cookie": "^1.0.1",
|
||||||
@@ -3802,12 +3802,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-router-dom": {
|
"node_modules/react-router-dom": {
|
||||||
"version": "7.10.1",
|
"version": "7.12.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.10.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz",
|
||||||
"integrity": "sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw==",
|
"integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react-router": "7.10.1"
|
"react-router": "7.12.0"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=20.0.0"
|
"node": ">=20.0.0"
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc && vite build",
|
"build": "tsc && vite build",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives",
|
||||||
"format": "prettier --write \"src/**/*.{ts,tsx,css,scss}\"",
|
"format": "prettier --write \"src/**/*.{ts,tsx,css,scss}\"",
|
||||||
"type-check": "tsc --noEmit"
|
"type-check": "tsc --noEmit"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -54,6 +54,7 @@ export function PageTransition({
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (isAnimating) return;
|
if (isAnimating) return;
|
||||||
if (location.key === currentLayerKey) return;
|
if (location.key === currentLayerKey) return;
|
||||||
|
if (currentLayerPathname === location.pathname) return;
|
||||||
const scrollContainer = resolveScrollContainer();
|
const scrollContainer = resolveScrollContainer();
|
||||||
exitScrollOffsetRef.current = scrollContainer?.scrollTop ?? 0;
|
exitScrollOffsetRef.current = scrollContainer?.scrollTop ?? 0;
|
||||||
const resolveOrderIndex = (pathname?: string) => {
|
const resolveOrderIndex = (pathname?: string) => {
|
||||||
@@ -69,17 +70,27 @@ export function PageTransition({
|
|||||||
: toIndex > fromIndex
|
: toIndex > fromIndex
|
||||||
? 'forward'
|
? 'forward'
|
||||||
: 'backward';
|
: 'backward';
|
||||||
setTransitionDirection(nextDirection);
|
|
||||||
setLayers((prev) => {
|
let cancelled = false;
|
||||||
const prevCurrent = prev[prev.length - 1];
|
|
||||||
return [
|
queueMicrotask(() => {
|
||||||
prevCurrent
|
if (cancelled) return;
|
||||||
? { ...prevCurrent, status: 'exiting' }
|
setTransitionDirection(nextDirection);
|
||||||
: { key: location.key, location, status: 'exiting' },
|
setLayers((prev) => {
|
||||||
{ key: location.key, location, status: 'current' },
|
const prevCurrent = prev[prev.length - 1];
|
||||||
];
|
return [
|
||||||
|
prevCurrent
|
||||||
|
? { ...prevCurrent, status: 'exiting' }
|
||||||
|
: { key: location.key, location, status: 'exiting' },
|
||||||
|
{ key: location.key, location, status: 'current' },
|
||||||
|
];
|
||||||
|
});
|
||||||
|
setIsAnimating(true);
|
||||||
});
|
});
|
||||||
setIsAnimating(true);
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
}, [
|
}, [
|
||||||
isAnimating,
|
isAnimating,
|
||||||
location,
|
location,
|
||||||
|
|||||||
@@ -36,6 +36,7 @@ import {
|
|||||||
useThemeStore,
|
useThemeStore,
|
||||||
} from '@/stores';
|
} from '@/stores';
|
||||||
import { configApi, versionApi } from '@/services/api';
|
import { configApi, versionApi } from '@/services/api';
|
||||||
|
import { triggerHeaderRefresh } from '@/hooks/useHeaderRefresh';
|
||||||
|
|
||||||
const sidebarIcons: Record<string, ReactNode> = {
|
const sidebarIcons: Record<string, ReactNode> = {
|
||||||
dashboard: <IconLayoutDashboard size={18} />,
|
dashboard: <IconLayoutDashboard size={18} />,
|
||||||
@@ -384,12 +385,22 @@ export function MainLayout() {
|
|||||||
|
|
||||||
const handleRefreshAll = async () => {
|
const handleRefreshAll = async () => {
|
||||||
clearCache();
|
clearCache();
|
||||||
try {
|
const results = await Promise.allSettled([
|
||||||
await fetchConfig(undefined, true);
|
fetchConfig(undefined, true),
|
||||||
showNotification(t('notification.data_refreshed'), 'success');
|
triggerHeaderRefresh()
|
||||||
} catch (error: any) {
|
]);
|
||||||
showNotification(`${t('notification.refresh_failed')}: ${error?.message || ''}`, 'error');
|
const rejected = results.find((result) => result.status === 'rejected');
|
||||||
|
if (rejected && rejected.status === 'rejected') {
|
||||||
|
const reason = rejected.reason;
|
||||||
|
const message =
|
||||||
|
typeof reason === 'string' ? reason : reason instanceof Error ? reason.message : '';
|
||||||
|
showNotification(
|
||||||
|
`${t('notification.refresh_failed')}${message ? `: ${message}` : ''}`,
|
||||||
|
'error'
|
||||||
|
);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
showNotification(t('notification.data_refreshed'), 'success');
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleVersionCheck = async () => {
|
const handleVersionCheck = async () => {
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import { Input } from '@/components/ui/Input';
|
|||||||
import { Modal } from '@/components/ui/Modal';
|
import { Modal } from '@/components/ui/Modal';
|
||||||
import { ModelInputList, modelsToEntries } from '@/components/ui/ModelInputList';
|
import { ModelInputList, modelsToEntries } from '@/components/ui/ModelInputList';
|
||||||
import type { ProviderKeyConfig } from '@/types';
|
import type { ProviderKeyConfig } from '@/types';
|
||||||
import { buildHeaderObject, headersToEntries } from '@/utils/headers';
|
import { headersToEntries } from '@/utils/headers';
|
||||||
import { excludedModelsToText } from '../utils';
|
import { excludedModelsToText } from '../utils';
|
||||||
import type { ProviderFormState, ProviderModalProps } from '../types';
|
import type { ProviderFormState, ProviderModalProps } from '../types';
|
||||||
|
|
||||||
@@ -19,7 +19,7 @@ const buildEmptyForm = (): ProviderFormState => ({
|
|||||||
prefix: '',
|
prefix: '',
|
||||||
baseUrl: '',
|
baseUrl: '',
|
||||||
proxyUrl: '',
|
proxyUrl: '',
|
||||||
headers: {},
|
headers: [],
|
||||||
models: [],
|
models: [],
|
||||||
excludedModels: [],
|
excludedModels: [],
|
||||||
modelEntries: [{ name: '', alias: '' }],
|
modelEntries: [{ name: '', alias: '' }],
|
||||||
@@ -43,7 +43,7 @@ export function ClaudeModal({
|
|||||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||||
setForm({
|
setForm({
|
||||||
...initialData,
|
...initialData,
|
||||||
headers: initialData.headers ?? {},
|
headers: headersToEntries(initialData.headers),
|
||||||
modelEntries: modelsToEntries(initialData.models),
|
modelEntries: modelsToEntries(initialData.models),
|
||||||
excludedText: excludedModelsToText(initialData.excludedModels),
|
excludedText: excludedModelsToText(initialData.excludedModels),
|
||||||
});
|
});
|
||||||
@@ -95,8 +95,8 @@ export function ClaudeModal({
|
|||||||
onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
|
onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
<HeaderInputList
|
<HeaderInputList
|
||||||
entries={headersToEntries(form.headers)}
|
entries={form.headers}
|
||||||
onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
|
onChange={(entries) => setForm((prev) => ({ ...prev, headers: entries }))}
|
||||||
addLabel={t('common.custom_headers_add')}
|
addLabel={t('common.custom_headers_add')}
|
||||||
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
||||||
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { HeaderInputList } from '@/components/ui/HeaderInputList';
|
|||||||
import { Input } from '@/components/ui/Input';
|
import { Input } from '@/components/ui/Input';
|
||||||
import { Modal } from '@/components/ui/Modal';
|
import { Modal } from '@/components/ui/Modal';
|
||||||
import type { ProviderKeyConfig } from '@/types';
|
import type { ProviderKeyConfig } from '@/types';
|
||||||
import { buildHeaderObject, headersToEntries } from '@/utils/headers';
|
import { headersToEntries } from '@/utils/headers';
|
||||||
import { modelsToEntries } from '@/components/ui/ModelInputList';
|
import { modelsToEntries } from '@/components/ui/ModelInputList';
|
||||||
import { excludedModelsToText } from '../utils';
|
import { excludedModelsToText } from '../utils';
|
||||||
import type { ProviderFormState, ProviderModalProps } from '../types';
|
import type { ProviderFormState, ProviderModalProps } from '../types';
|
||||||
@@ -19,7 +19,7 @@ const buildEmptyForm = (): ProviderFormState => ({
|
|||||||
prefix: '',
|
prefix: '',
|
||||||
baseUrl: '',
|
baseUrl: '',
|
||||||
proxyUrl: '',
|
proxyUrl: '',
|
||||||
headers: {},
|
headers: [],
|
||||||
models: [],
|
models: [],
|
||||||
excludedModels: [],
|
excludedModels: [],
|
||||||
modelEntries: [{ name: '', alias: '' }],
|
modelEntries: [{ name: '', alias: '' }],
|
||||||
@@ -43,7 +43,7 @@ export function CodexModal({
|
|||||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||||
setForm({
|
setForm({
|
||||||
...initialData,
|
...initialData,
|
||||||
headers: initialData.headers ?? {},
|
headers: headersToEntries(initialData.headers),
|
||||||
modelEntries: modelsToEntries(initialData.models),
|
modelEntries: modelsToEntries(initialData.models),
|
||||||
excludedText: excludedModelsToText(initialData.excludedModels),
|
excludedText: excludedModelsToText(initialData.excludedModels),
|
||||||
});
|
});
|
||||||
@@ -95,8 +95,8 @@ export function CodexModal({
|
|||||||
onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
|
onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
<HeaderInputList
|
<HeaderInputList
|
||||||
entries={headersToEntries(form.headers)}
|
entries={form.headers}
|
||||||
onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
|
onChange={(entries) => setForm((prev) => ({ ...prev, headers: entries }))}
|
||||||
addLabel={t('common.custom_headers_add')}
|
addLabel={t('common.custom_headers_add')}
|
||||||
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
||||||
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { HeaderInputList } from '@/components/ui/HeaderInputList';
|
|||||||
import { Input } from '@/components/ui/Input';
|
import { Input } from '@/components/ui/Input';
|
||||||
import { Modal } from '@/components/ui/Modal';
|
import { Modal } from '@/components/ui/Modal';
|
||||||
import type { GeminiKeyConfig } from '@/types';
|
import type { GeminiKeyConfig } from '@/types';
|
||||||
import { buildHeaderObject, headersToEntries } from '@/utils/headers';
|
import { headersToEntries } from '@/utils/headers';
|
||||||
import { excludedModelsToText } from '../utils';
|
import { excludedModelsToText } from '../utils';
|
||||||
import type { GeminiFormState, ProviderModalProps } from '../types';
|
import type { GeminiFormState, ProviderModalProps } from '../types';
|
||||||
|
|
||||||
@@ -17,7 +17,7 @@ const buildEmptyForm = (): GeminiFormState => ({
|
|||||||
apiKey: '',
|
apiKey: '',
|
||||||
prefix: '',
|
prefix: '',
|
||||||
baseUrl: '',
|
baseUrl: '',
|
||||||
headers: {},
|
headers: [],
|
||||||
excludedModels: [],
|
excludedModels: [],
|
||||||
excludedText: '',
|
excludedText: '',
|
||||||
});
|
});
|
||||||
@@ -39,7 +39,7 @@ export function GeminiModal({
|
|||||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||||
setForm({
|
setForm({
|
||||||
...initialData,
|
...initialData,
|
||||||
headers: initialData.headers ?? {},
|
headers: headersToEntries(initialData.headers),
|
||||||
excludedText: excludedModelsToText(initialData.excludedModels),
|
excludedText: excludedModelsToText(initialData.excludedModels),
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -91,8 +91,8 @@ export function GeminiModal({
|
|||||||
onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
|
onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
|
||||||
/>
|
/>
|
||||||
<HeaderInputList
|
<HeaderInputList
|
||||||
entries={headersToEntries(form.headers)}
|
entries={form.headers}
|
||||||
onChange={(entries) => setForm((prev) => ({ ...prev, headers: buildHeaderObject(entries) }))}
|
onChange={(entries) => setForm((prev) => ({ ...prev, headers: entries }))}
|
||||||
addLabel={t('common.custom_headers_add')}
|
addLabel={t('common.custom_headers_add')}
|
||||||
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
||||||
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
||||||
|
|||||||
117
src/components/providers/VertexSection/VertexModal.tsx
Normal file
117
src/components/providers/VertexSection/VertexModal.tsx
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { HeaderInputList } from '@/components/ui/HeaderInputList';
|
||||||
|
import { Input } from '@/components/ui/Input';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import { ModelInputList, modelsToEntries } from '@/components/ui/ModelInputList';
|
||||||
|
import type { ProviderKeyConfig } from '@/types';
|
||||||
|
import { headersToEntries } from '@/utils/headers';
|
||||||
|
import type { ProviderModalProps, VertexFormState } from '../types';
|
||||||
|
|
||||||
|
interface VertexModalProps extends ProviderModalProps<ProviderKeyConfig, VertexFormState> {
|
||||||
|
isSaving: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const buildEmptyForm = (): VertexFormState => ({
|
||||||
|
apiKey: '',
|
||||||
|
prefix: '',
|
||||||
|
baseUrl: '',
|
||||||
|
proxyUrl: '',
|
||||||
|
headers: [],
|
||||||
|
models: [],
|
||||||
|
modelEntries: [{ name: '', alias: '' }],
|
||||||
|
});
|
||||||
|
|
||||||
|
export function VertexModal({
|
||||||
|
isOpen,
|
||||||
|
editIndex,
|
||||||
|
initialData,
|
||||||
|
onClose,
|
||||||
|
onSave,
|
||||||
|
isSaving,
|
||||||
|
}: VertexModalProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [form, setForm] = useState<VertexFormState>(buildEmptyForm);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return;
|
||||||
|
if (initialData) {
|
||||||
|
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||||
|
setForm({
|
||||||
|
...initialData,
|
||||||
|
headers: headersToEntries(initialData.headers),
|
||||||
|
modelEntries: modelsToEntries(initialData.models),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setForm(buildEmptyForm());
|
||||||
|
}, [initialData, isOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
open={isOpen}
|
||||||
|
onClose={onClose}
|
||||||
|
title={
|
||||||
|
editIndex !== null
|
||||||
|
? t('ai_providers.vertex_edit_modal_title')
|
||||||
|
: t('ai_providers.vertex_add_modal_title')
|
||||||
|
}
|
||||||
|
footer={
|
||||||
|
<>
|
||||||
|
<Button variant="secondary" onClick={onClose} disabled={isSaving}>
|
||||||
|
{t('common.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button onClick={() => void onSave(form, editIndex)} loading={isSaving}>
|
||||||
|
{t('common.save')}
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.vertex_add_modal_key_label')}
|
||||||
|
placeholder={t('ai_providers.vertex_add_modal_key_placeholder')}
|
||||||
|
value={form.apiKey}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, apiKey: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.prefix_label')}
|
||||||
|
placeholder={t('ai_providers.prefix_placeholder')}
|
||||||
|
value={form.prefix ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, prefix: e.target.value }))}
|
||||||
|
hint={t('ai_providers.prefix_hint')}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.vertex_add_modal_url_label')}
|
||||||
|
placeholder={t('ai_providers.vertex_add_modal_url_placeholder')}
|
||||||
|
value={form.baseUrl ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, baseUrl: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label={t('ai_providers.vertex_add_modal_proxy_label')}
|
||||||
|
placeholder={t('ai_providers.vertex_add_modal_proxy_placeholder')}
|
||||||
|
value={form.proxyUrl ?? ''}
|
||||||
|
onChange={(e) => setForm((prev) => ({ ...prev, proxyUrl: e.target.value }))}
|
||||||
|
/>
|
||||||
|
<HeaderInputList
|
||||||
|
entries={form.headers}
|
||||||
|
onChange={(entries) => setForm((prev) => ({ ...prev, headers: entries }))}
|
||||||
|
addLabel={t('common.custom_headers_add')}
|
||||||
|
keyPlaceholder={t('common.custom_headers_key_placeholder')}
|
||||||
|
valuePlaceholder={t('common.custom_headers_value_placeholder')}
|
||||||
|
/>
|
||||||
|
<div className="form-group">
|
||||||
|
<label>{t('ai_providers.vertex_models_label')}</label>
|
||||||
|
<ModelInputList
|
||||||
|
entries={form.modelEntries}
|
||||||
|
onChange={(entries) => setForm((prev) => ({ ...prev, modelEntries: entries }))}
|
||||||
|
addLabel={t('ai_providers.vertex_models_add_btn')}
|
||||||
|
namePlaceholder={t('common.model_name_placeholder')}
|
||||||
|
aliasPlaceholder={t('common.model_alias_placeholder')}
|
||||||
|
disabled={isSaving}
|
||||||
|
/>
|
||||||
|
<div className="hint">{t('ai_providers.vertex_models_hint')}</div>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
170
src/components/providers/VertexSection/VertexSection.tsx
Normal file
170
src/components/providers/VertexSection/VertexSection.tsx
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
import { Fragment, useMemo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { Card } from '@/components/ui/Card';
|
||||||
|
import iconVertex from '@/assets/icons/vertex.svg';
|
||||||
|
import type { ProviderKeyConfig } from '@/types';
|
||||||
|
import { maskApiKey } from '@/utils/format';
|
||||||
|
import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
|
||||||
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
|
import { ProviderList } from '../ProviderList';
|
||||||
|
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||||
|
import { getStatsBySource } from '../utils';
|
||||||
|
import type { VertexFormState } from '../types';
|
||||||
|
import { VertexModal } from './VertexModal';
|
||||||
|
|
||||||
|
interface VertexSectionProps {
|
||||||
|
configs: ProviderKeyConfig[];
|
||||||
|
keyStats: KeyStats;
|
||||||
|
usageDetails: UsageDetail[];
|
||||||
|
loading: boolean;
|
||||||
|
disableControls: boolean;
|
||||||
|
isSaving: boolean;
|
||||||
|
isSwitching: boolean;
|
||||||
|
isModalOpen: boolean;
|
||||||
|
modalIndex: number | null;
|
||||||
|
onAdd: () => void;
|
||||||
|
onEdit: (index: number) => void;
|
||||||
|
onDelete: (index: number) => void;
|
||||||
|
onCloseModal: () => void;
|
||||||
|
onSave: (data: VertexFormState, index: number | null) => Promise<void>;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function VertexSection({
|
||||||
|
configs,
|
||||||
|
keyStats,
|
||||||
|
usageDetails,
|
||||||
|
loading,
|
||||||
|
disableControls,
|
||||||
|
isSaving,
|
||||||
|
isSwitching,
|
||||||
|
isModalOpen,
|
||||||
|
modalIndex,
|
||||||
|
onAdd,
|
||||||
|
onEdit,
|
||||||
|
onDelete,
|
||||||
|
onCloseModal,
|
||||||
|
onSave,
|
||||||
|
}: VertexSectionProps) {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const actionsDisabled = disableControls || isSaving || isSwitching;
|
||||||
|
|
||||||
|
const statusBarCache = useMemo(() => {
|
||||||
|
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
||||||
|
const allApiKeys = new Set<string>();
|
||||||
|
configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
|
||||||
|
allApiKeys.forEach((apiKey) => {
|
||||||
|
cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
|
||||||
|
});
|
||||||
|
return cache;
|
||||||
|
}, [configs, usageDetails]);
|
||||||
|
|
||||||
|
const initialData = modalIndex !== null ? configs[modalIndex] : undefined;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card
|
||||||
|
title={
|
||||||
|
<span className={styles.cardTitle}>
|
||||||
|
<img src={iconVertex} alt="" className={styles.cardTitleIcon} />
|
||||||
|
{t('ai_providers.vertex_title')}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
extra={
|
||||||
|
<Button size="sm" onClick={onAdd} disabled={actionsDisabled}>
|
||||||
|
{t('ai_providers.vertex_add_button')}
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ProviderList<ProviderKeyConfig>
|
||||||
|
items={configs}
|
||||||
|
loading={loading}
|
||||||
|
keyField={(item) => item.apiKey}
|
||||||
|
emptyTitle={t('ai_providers.vertex_empty_title')}
|
||||||
|
emptyDescription={t('ai_providers.vertex_empty_desc')}
|
||||||
|
onEdit={onEdit}
|
||||||
|
onDelete={onDelete}
|
||||||
|
actionsDisabled={actionsDisabled}
|
||||||
|
renderContent={(item, index) => {
|
||||||
|
const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
|
||||||
|
const headerEntries = Object.entries(item.headers || {});
|
||||||
|
const statusData =
|
||||||
|
statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Fragment>
|
||||||
|
<div className="item-title">
|
||||||
|
{t('ai_providers.vertex_item_title')} #{index + 1}
|
||||||
|
</div>
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.api_key')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{maskApiKey(item.apiKey)}</span>
|
||||||
|
</div>
|
||||||
|
{item.prefix && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.prefix')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.prefix}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.baseUrl && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.base_url')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.baseUrl}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.proxyUrl && (
|
||||||
|
<div className={styles.fieldRow}>
|
||||||
|
<span className={styles.fieldLabel}>{t('common.proxy_url')}:</span>
|
||||||
|
<span className={styles.fieldValue}>{item.proxyUrl}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{headerEntries.length > 0 && (
|
||||||
|
<div className={styles.headerBadgeList}>
|
||||||
|
{headerEntries.map(([key, value]) => (
|
||||||
|
<span key={key} className={styles.headerBadge}>
|
||||||
|
<strong>{key}:</strong> {value}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{item.models?.length ? (
|
||||||
|
<div className={styles.modelTagList}>
|
||||||
|
<span className={styles.modelCountLabel}>
|
||||||
|
{t('ai_providers.vertex_models_count')}: {item.models.length}
|
||||||
|
</span>
|
||||||
|
{item.models.map((model) => (
|
||||||
|
<span key={`${model.name}-${model.alias || 'default'}`} className={styles.modelTag}>
|
||||||
|
<span className={styles.modelName}>{model.name}</span>
|
||||||
|
{model.alias && (
|
||||||
|
<span className={styles.modelAlias}>{model.alias}</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className={styles.cardStats}>
|
||||||
|
<span className={`${styles.statPill} ${styles.statSuccess}`}>
|
||||||
|
{t('stats.success')}: {stats.success}
|
||||||
|
</span>
|
||||||
|
<span className={`${styles.statPill} ${styles.statFailure}`}>
|
||||||
|
{t('stats.failure')}: {stats.failure}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ProviderStatusBar statusData={statusData} />
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<VertexModal
|
||||||
|
isOpen={isModalOpen}
|
||||||
|
editIndex={modalIndex}
|
||||||
|
initialData={initialData}
|
||||||
|
onClose={onCloseModal}
|
||||||
|
onSave={onSave}
|
||||||
|
isSaving={isSaving}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/components/providers/VertexSection/index.ts
Normal file
1
src/components/providers/VertexSection/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export { VertexSection } from './VertexSection';
|
||||||
@@ -3,6 +3,7 @@ export { ClaudeSection } from './ClaudeSection';
|
|||||||
export { CodexSection } from './CodexSection';
|
export { CodexSection } from './CodexSection';
|
||||||
export { GeminiSection } from './GeminiSection';
|
export { GeminiSection } from './GeminiSection';
|
||||||
export { OpenAISection } from './OpenAISection';
|
export { OpenAISection } from './OpenAISection';
|
||||||
|
export { VertexSection } from './VertexSection';
|
||||||
export { ProviderList } from './ProviderList';
|
export { ProviderList } from './ProviderList';
|
||||||
export { ProviderStatusBar } from './ProviderStatusBar';
|
export { ProviderStatusBar } from './ProviderStatusBar';
|
||||||
export * from './hooks/useProviderStats';
|
export * from './hooks/useProviderStats';
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ export type ProviderModal =
|
|||||||
| { type: 'gemini'; index: number | null }
|
| { type: 'gemini'; index: number | null }
|
||||||
| { type: 'codex'; index: number | null }
|
| { type: 'codex'; index: number | null }
|
||||||
| { type: 'claude'; index: number | null }
|
| { type: 'claude'; index: number | null }
|
||||||
|
| { type: 'vertex'; index: number | null }
|
||||||
| { type: 'ampcode'; index: null }
|
| { type: 'ampcode'; index: null }
|
||||||
| { type: 'openai'; index: number | null };
|
| { type: 'openai'; index: number | null };
|
||||||
|
|
||||||
@@ -31,13 +32,22 @@ export interface AmpcodeFormState {
|
|||||||
mappingEntries: ModelEntry[];
|
mappingEntries: ModelEntry[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export type GeminiFormState = GeminiKeyConfig & { excludedText: string };
|
export type GeminiFormState = Omit<GeminiKeyConfig, 'headers'> & {
|
||||||
|
headers: HeaderEntry[];
|
||||||
|
excludedText: string;
|
||||||
|
};
|
||||||
|
|
||||||
export type ProviderFormState = ProviderKeyConfig & {
|
export type ProviderFormState = Omit<ProviderKeyConfig, 'headers'> & {
|
||||||
|
headers: HeaderEntry[];
|
||||||
modelEntries: ModelEntry[];
|
modelEntries: ModelEntry[];
|
||||||
excludedText: string;
|
excludedText: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type VertexFormState = Omit<ProviderKeyConfig, 'headers' | 'excludedModels'> & {
|
||||||
|
headers: HeaderEntry[];
|
||||||
|
modelEntries: ModelEntry[];
|
||||||
|
};
|
||||||
|
|
||||||
export interface ProviderSectionProps<TConfig> {
|
export interface ProviderSectionProps<TConfig> {
|
||||||
configs: TConfig[];
|
configs: TConfig[];
|
||||||
keyStats: KeyStats;
|
keyStats: KeyStats;
|
||||||
|
|||||||
@@ -2,28 +2,30 @@
|
|||||||
* Generic quota section component.
|
* Generic quota section component.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Card } from '@/components/ui/Card';
|
import { Card } from '@/components/ui/Card';
|
||||||
import { Button } from '@/components/ui/Button';
|
import { Button } from '@/components/ui/Button';
|
||||||
import { EmptyState } from '@/components/ui/EmptyState';
|
import { EmptyState } from '@/components/ui/EmptyState';
|
||||||
|
import { triggerHeaderRefresh } from '@/hooks/useHeaderRefresh';
|
||||||
import { useQuotaStore, useThemeStore } from '@/stores';
|
import { useQuotaStore, useThemeStore } from '@/stores';
|
||||||
import type { AuthFileItem, ResolvedTheme } from '@/types';
|
import type { AuthFileItem, ResolvedTheme } from '@/types';
|
||||||
import { QuotaCard } from './QuotaCard';
|
import { QuotaCard } from './QuotaCard';
|
||||||
import type { QuotaStatusState } from './QuotaCard';
|
import type { QuotaStatusState } from './QuotaCard';
|
||||||
import { useQuotaLoader } from './useQuotaLoader';
|
import { useQuotaLoader } from './useQuotaLoader';
|
||||||
import type { QuotaConfig } from './quotaConfigs';
|
import type { QuotaConfig } from './quotaConfigs';
|
||||||
|
import { useGridColumns } from './useGridColumns';
|
||||||
|
import { IconRefreshCw } from '@/components/ui/icons';
|
||||||
import styles from '@/pages/QuotaPage.module.scss';
|
import styles from '@/pages/QuotaPage.module.scss';
|
||||||
|
|
||||||
type QuotaUpdater<T> = T | ((prev: T) => T);
|
type QuotaUpdater<T> = T | ((prev: T) => T);
|
||||||
|
|
||||||
type QuotaSetter<T> = (updater: QuotaUpdater<T>) => void;
|
type QuotaSetter<T> = (updater: QuotaUpdater<T>) => void;
|
||||||
|
|
||||||
const MIN_CARD_PAGE_SIZE = 3;
|
type ViewMode = 'paged' | 'all';
|
||||||
const MAX_CARD_PAGE_SIZE = 30;
|
|
||||||
|
|
||||||
const clampCardPageSize = (value: number) =>
|
const MAX_ITEMS_PER_PAGE = 14;
|
||||||
Math.min(MAX_CARD_PAGE_SIZE, Math.max(MIN_CARD_PAGE_SIZE, Math.round(value)));
|
const MAX_SHOW_ALL_THRESHOLD = 30;
|
||||||
|
|
||||||
interface QuotaPaginationState<T> {
|
interface QuotaPaginationState<T> {
|
||||||
pageSize: number;
|
pageSize: number;
|
||||||
@@ -40,7 +42,7 @@ interface QuotaPaginationState<T> {
|
|||||||
|
|
||||||
const useQuotaPagination = <T,>(items: T[], defaultPageSize = 6): QuotaPaginationState<T> => {
|
const useQuotaPagination = <T,>(items: T[], defaultPageSize = 6): QuotaPaginationState<T> => {
|
||||||
const [page, setPage] = useState(1);
|
const [page, setPage] = useState(1);
|
||||||
const [pageSize, setPageSizeState] = useState(() => clampCardPageSize(defaultPageSize));
|
const [pageSize, setPageSizeState] = useState(defaultPageSize);
|
||||||
const [loading, setLoadingState] = useState(false);
|
const [loading, setLoadingState] = useState(false);
|
||||||
const [loadingScope, setLoadingScope] = useState<'page' | 'all' | null>(null);
|
const [loadingScope, setLoadingScope] = useState<'page' | 'all' | null>(null);
|
||||||
|
|
||||||
@@ -57,7 +59,7 @@ const useQuotaPagination = <T,>(items: T[], defaultPageSize = 6): QuotaPaginatio
|
|||||||
}, [items, currentPage, pageSize]);
|
}, [items, currentPage, pageSize]);
|
||||||
|
|
||||||
const setPageSize = useCallback((size: number) => {
|
const setPageSize = useCallback((size: number) => {
|
||||||
setPageSizeState(clampCardPageSize(size));
|
setPageSizeState(size);
|
||||||
setPage(1);
|
setPage(1);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
@@ -107,10 +109,17 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
|
|||||||
Record<string, TState>
|
Record<string, TState>
|
||||||
>;
|
>;
|
||||||
|
|
||||||
|
/* Removed useRef */
|
||||||
|
const [columns, gridRef] = useGridColumns(380); // Min card width 380px matches SCSS
|
||||||
|
const [viewMode, setViewMode] = useState<ViewMode>('paged');
|
||||||
|
const [showTooManyWarning, setShowTooManyWarning] = useState(false);
|
||||||
|
|
||||||
const filteredFiles = useMemo(() => files.filter((file) => config.filterFn(file)), [
|
const filteredFiles = useMemo(() => files.filter((file) => config.filterFn(file)), [
|
||||||
files,
|
files,
|
||||||
config.filterFn
|
config
|
||||||
]);
|
]);
|
||||||
|
const showAllAllowed = filteredFiles.length <= MAX_SHOW_ALL_THRESHOLD;
|
||||||
|
const effectiveViewMode: ViewMode = viewMode === 'all' && !showAllAllowed ? 'paged' : viewMode;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
pageSize,
|
pageSize,
|
||||||
@@ -121,19 +130,59 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
|
|||||||
goToPrev,
|
goToPrev,
|
||||||
goToNext,
|
goToNext,
|
||||||
loading: sectionLoading,
|
loading: sectionLoading,
|
||||||
loadingScope,
|
|
||||||
setLoading
|
setLoading
|
||||||
} = useQuotaPagination(filteredFiles);
|
} = useQuotaPagination(filteredFiles);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (showAllAllowed) return;
|
||||||
|
if (viewMode !== 'all') return;
|
||||||
|
|
||||||
|
let cancelled = false;
|
||||||
|
queueMicrotask(() => {
|
||||||
|
if (cancelled) return;
|
||||||
|
setViewMode('paged');
|
||||||
|
setShowTooManyWarning(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [showAllAllowed, viewMode]);
|
||||||
|
|
||||||
|
// Update page size based on view mode and columns
|
||||||
|
useEffect(() => {
|
||||||
|
if (effectiveViewMode === 'all') {
|
||||||
|
setPageSize(Math.max(1, filteredFiles.length));
|
||||||
|
} else {
|
||||||
|
// Paged mode: 3 rows * columns, capped to avoid oversized pages.
|
||||||
|
setPageSize(Math.min(columns * 3, MAX_ITEMS_PER_PAGE));
|
||||||
|
}
|
||||||
|
}, [effectiveViewMode, columns, filteredFiles.length, setPageSize]);
|
||||||
|
|
||||||
const { quota, loadQuota } = useQuotaLoader(config);
|
const { quota, loadQuota } = useQuotaLoader(config);
|
||||||
|
|
||||||
const handleRefreshPage = useCallback(() => {
|
const pendingQuotaRefreshRef = useRef(false);
|
||||||
loadQuota(pageItems, 'page', setLoading);
|
const prevFilesLoadingRef = useRef(loading);
|
||||||
}, [loadQuota, pageItems, setLoading]);
|
|
||||||
|
|
||||||
const handleRefreshAll = useCallback(() => {
|
const handleRefresh = useCallback(() => {
|
||||||
loadQuota(filteredFiles, 'all', setLoading);
|
pendingQuotaRefreshRef.current = true;
|
||||||
}, [loadQuota, filteredFiles, setLoading]);
|
void triggerHeaderRefresh();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const wasLoading = prevFilesLoadingRef.current;
|
||||||
|
prevFilesLoadingRef.current = loading;
|
||||||
|
|
||||||
|
if (!pendingQuotaRefreshRef.current) return;
|
||||||
|
if (loading) return;
|
||||||
|
if (!wasLoading) return;
|
||||||
|
|
||||||
|
pendingQuotaRefreshRef.current = false;
|
||||||
|
const scope = effectiveViewMode === 'all' ? 'all' : 'page';
|
||||||
|
const targets = effectiveViewMode === 'all' ? filteredFiles : pageItems;
|
||||||
|
if (targets.length === 0) return;
|
||||||
|
loadQuota(targets, scope, setLoading);
|
||||||
|
}, [loading, effectiveViewMode, filteredFiles, pageItems, loadQuota, setLoading]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (loading) return;
|
if (loading) return;
|
||||||
@@ -153,28 +202,56 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
|
|||||||
});
|
});
|
||||||
}, [filteredFiles, loading, setQuota]);
|
}, [filteredFiles, loading, setQuota]);
|
||||||
|
|
||||||
|
const titleNode = (
|
||||||
|
<div className={styles.titleWrapper}>
|
||||||
|
<span>{t(`${config.i18nPrefix}.title`)}</span>
|
||||||
|
{filteredFiles.length > 0 && (
|
||||||
|
<span className={styles.countBadge}>
|
||||||
|
{filteredFiles.length}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const isRefreshing = sectionLoading || loading;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
title={t(`${config.i18nPrefix}.title`)}
|
title={titleNode}
|
||||||
extra={
|
extra={
|
||||||
<div className={styles.headerActions}>
|
<div className={styles.headerActions}>
|
||||||
|
<div className={styles.viewModeToggle}>
|
||||||
|
<Button
|
||||||
|
variant={effectiveViewMode === 'paged' ? 'primary' : 'secondary'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setViewMode('paged')}
|
||||||
|
>
|
||||||
|
{t('auth_files.view_mode_paged')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={effectiveViewMode === 'all' ? 'primary' : 'secondary'}
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
if (filteredFiles.length > MAX_SHOW_ALL_THRESHOLD) {
|
||||||
|
setShowTooManyWarning(true);
|
||||||
|
} else {
|
||||||
|
setViewMode('all');
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('auth_files.view_mode_all')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
<Button
|
<Button
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={handleRefreshPage}
|
onClick={handleRefresh}
|
||||||
disabled={disabled || sectionLoading || pageItems.length === 0}
|
disabled={disabled || isRefreshing}
|
||||||
loading={sectionLoading && loadingScope === 'page'}
|
loading={isRefreshing}
|
||||||
|
title={t('quota_management.refresh_files_and_quota')}
|
||||||
|
aria-label={t('quota_management.refresh_files_and_quota')}
|
||||||
>
|
>
|
||||||
{t(`${config.i18nPrefix}.refresh_button`)}
|
{!isRefreshing && <IconRefreshCw size={16} />}
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleRefreshAll}
|
|
||||||
disabled={disabled || sectionLoading || filteredFiles.length === 0}
|
|
||||||
loading={sectionLoading && loadingScope === 'all'}
|
|
||||||
>
|
|
||||||
{t(`${config.i18nPrefix}.fetch_all`)}
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
@@ -186,31 +263,7 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
|
|||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div className={config.controlsClassName}>
|
<div ref={gridRef} className={config.gridClassName}>
|
||||||
<div className={config.controlClassName}>
|
|
||||||
<label>{t('auth_files.page_size_label')}</label>
|
|
||||||
<input
|
|
||||||
className={styles.pageSizeSelect}
|
|
||||||
type="number"
|
|
||||||
min={MIN_CARD_PAGE_SIZE}
|
|
||||||
max={MAX_CARD_PAGE_SIZE}
|
|
||||||
step={1}
|
|
||||||
value={pageSize}
|
|
||||||
onChange={(e) => {
|
|
||||||
const value = e.currentTarget.valueAsNumber;
|
|
||||||
if (!Number.isFinite(value)) return;
|
|
||||||
setPageSize(value);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className={config.controlClassName}>
|
|
||||||
<label>{t('common.info')}</label>
|
|
||||||
<div className={styles.statsInfo}>
|
|
||||||
{filteredFiles.length} {t('auth_files.files_count')}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={config.gridClassName}>
|
|
||||||
{pageItems.map((item) => (
|
{pageItems.map((item) => (
|
||||||
<QuotaCard
|
<QuotaCard
|
||||||
key={item.name}
|
key={item.name}
|
||||||
@@ -224,7 +277,7 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{filteredFiles.length > pageSize && (
|
{filteredFiles.length > pageSize && effectiveViewMode === 'paged' && (
|
||||||
<div className={styles.pagination}>
|
<div className={styles.pagination}>
|
||||||
<Button
|
<Button
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
@@ -253,6 +306,16 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
|
|||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
{showTooManyWarning && (
|
||||||
|
<div className={styles.warningOverlay} onClick={() => setShowTooManyWarning(false)}>
|
||||||
|
<div className={styles.warningModal} onClick={(e) => e.stopPropagation()}>
|
||||||
|
<p>{t('auth_files.too_many_files_warning')}</p>
|
||||||
|
<Button variant="primary" size="sm" onClick={() => setShowTooManyWarning(false)}>
|
||||||
|
{t('common.confirm')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ import type {
|
|||||||
GeminiCliQuotaBucketState,
|
GeminiCliQuotaBucketState,
|
||||||
GeminiCliQuotaState
|
GeminiCliQuotaState
|
||||||
} from '@/types';
|
} from '@/types';
|
||||||
import { apiCallApi, getApiCallErrorMessage } from '@/services/api';
|
import { apiCallApi, authFilesApi, getApiCallErrorMessage } from '@/services/api';
|
||||||
import {
|
import {
|
||||||
ANTIGRAVITY_QUOTA_URLS,
|
ANTIGRAVITY_QUOTA_URLS,
|
||||||
ANTIGRAVITY_REQUEST_HEADERS,
|
ANTIGRAVITY_REQUEST_HEADERS,
|
||||||
@@ -55,6 +55,8 @@ type QuotaUpdater<T> = T | ((prev: T) => T);
|
|||||||
|
|
||||||
type QuotaType = 'antigravity' | 'codex' | 'gemini-cli';
|
type QuotaType = 'antigravity' | 'codex' | 'gemini-cli';
|
||||||
|
|
||||||
|
const DEFAULT_ANTIGRAVITY_PROJECT_ID = 'bamboo-precept-lgxtn';
|
||||||
|
|
||||||
export interface QuotaStore {
|
export interface QuotaStore {
|
||||||
antigravityQuota: Record<string, AntigravityQuotaState>;
|
antigravityQuota: Record<string, AntigravityQuotaState>;
|
||||||
codexQuota: Record<string, CodexQuotaState>;
|
codexQuota: Record<string, CodexQuotaState>;
|
||||||
@@ -82,6 +84,43 @@ export interface QuotaConfig<TState, TData> {
|
|||||||
renderQuotaItems: (quota: TState, t: TFunction, helpers: QuotaRenderHelpers) => ReactNode;
|
renderQuotaItems: (quota: TState, t: TFunction, helpers: QuotaRenderHelpers) => ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const resolveAntigravityProjectId = async (file: AuthFileItem): Promise<string> => {
|
||||||
|
try {
|
||||||
|
const text = await authFilesApi.downloadText(file.name);
|
||||||
|
const trimmed = text.trim();
|
||||||
|
if (!trimmed) return DEFAULT_ANTIGRAVITY_PROJECT_ID;
|
||||||
|
|
||||||
|
const parsed = JSON.parse(trimmed) as Record<string, unknown>;
|
||||||
|
const topLevel = normalizeStringValue(parsed.project_id ?? parsed.projectId);
|
||||||
|
if (topLevel) return topLevel;
|
||||||
|
|
||||||
|
const installed =
|
||||||
|
parsed.installed && typeof parsed.installed === 'object' && parsed.installed !== null
|
||||||
|
? (parsed.installed as Record<string, unknown>)
|
||||||
|
: null;
|
||||||
|
const installedProjectId = installed
|
||||||
|
? normalizeStringValue(installed.project_id ?? installed.projectId)
|
||||||
|
: null;
|
||||||
|
if (installedProjectId) return installedProjectId;
|
||||||
|
|
||||||
|
const web =
|
||||||
|
parsed.web && typeof parsed.web === 'object' && parsed.web !== null
|
||||||
|
? (parsed.web as Record<string, unknown>)
|
||||||
|
: null;
|
||||||
|
const webProjectId = web ? normalizeStringValue(web.project_id ?? web.projectId) : null;
|
||||||
|
if (webProjectId) return webProjectId;
|
||||||
|
} catch {
|
||||||
|
return DEFAULT_ANTIGRAVITY_PROJECT_ID;
|
||||||
|
}
|
||||||
|
|
||||||
|
return DEFAULT_ANTIGRAVITY_PROJECT_ID;
|
||||||
|
};
|
||||||
|
|
||||||
|
const isAntigravityUnknownFieldError = (message: string): boolean => {
|
||||||
|
const normalized = message.toLowerCase();
|
||||||
|
return normalized.includes('unknown name') && normalized.includes('cannot find field');
|
||||||
|
};
|
||||||
|
|
||||||
const fetchAntigravityQuota = async (
|
const fetchAntigravityQuota = async (
|
||||||
file: AuthFileItem,
|
file: AuthFileItem,
|
||||||
t: TFunction
|
t: TFunction
|
||||||
@@ -92,52 +131,64 @@ const fetchAntigravityQuota = async (
|
|||||||
throw new Error(t('antigravity_quota.missing_auth_index'));
|
throw new Error(t('antigravity_quota.missing_auth_index'));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const projectId = await resolveAntigravityProjectId(file);
|
||||||
|
const requestBodies = [JSON.stringify({ projectId }), JSON.stringify({ project: projectId })];
|
||||||
|
|
||||||
let lastError = '';
|
let lastError = '';
|
||||||
let lastStatus: number | undefined;
|
let lastStatus: number | undefined;
|
||||||
let priorityStatus: number | undefined;
|
let priorityStatus: number | undefined;
|
||||||
let hadSuccess = false;
|
let hadSuccess = false;
|
||||||
|
|
||||||
for (const url of ANTIGRAVITY_QUOTA_URLS) {
|
for (const url of ANTIGRAVITY_QUOTA_URLS) {
|
||||||
try {
|
for (let attempt = 0; attempt < requestBodies.length; attempt++) {
|
||||||
const result = await apiCallApi.request({
|
try {
|
||||||
authIndex,
|
const result = await apiCallApi.request({
|
||||||
method: 'POST',
|
authIndex,
|
||||||
url,
|
method: 'POST',
|
||||||
header: { ...ANTIGRAVITY_REQUEST_HEADERS },
|
url,
|
||||||
data: '{}'
|
header: { ...ANTIGRAVITY_REQUEST_HEADERS },
|
||||||
});
|
data: requestBodies[attempt]
|
||||||
|
});
|
||||||
|
|
||||||
if (result.statusCode < 200 || result.statusCode >= 300) {
|
if (result.statusCode < 200 || result.statusCode >= 300) {
|
||||||
lastError = getApiCallErrorMessage(result);
|
lastError = getApiCallErrorMessage(result);
|
||||||
lastStatus = result.statusCode;
|
lastStatus = result.statusCode;
|
||||||
if (result.statusCode === 403 || result.statusCode === 404) {
|
if (result.statusCode === 403 || result.statusCode === 404) {
|
||||||
priorityStatus ??= result.statusCode;
|
priorityStatus ??= result.statusCode;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
result.statusCode === 400 &&
|
||||||
|
isAntigravityUnknownFieldError(lastError) &&
|
||||||
|
attempt < requestBodies.length - 1
|
||||||
|
) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
hadSuccess = true;
|
hadSuccess = true;
|
||||||
const payload = parseAntigravityPayload(result.body ?? result.bodyText);
|
const payload = parseAntigravityPayload(result.body ?? result.bodyText);
|
||||||
const models = payload?.models;
|
const models = payload?.models;
|
||||||
if (!models || typeof models !== 'object' || Array.isArray(models)) {
|
if (!models || typeof models !== 'object' || Array.isArray(models)) {
|
||||||
lastError = t('antigravity_quota.empty_models');
|
lastError = t('antigravity_quota.empty_models');
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
const groups = buildAntigravityQuotaGroups(models as AntigravityModelsPayload);
|
const groups = buildAntigravityQuotaGroups(models as AntigravityModelsPayload);
|
||||||
if (groups.length === 0) {
|
if (groups.length === 0) {
|
||||||
lastError = t('antigravity_quota.empty_models');
|
lastError = t('antigravity_quota.empty_models');
|
||||||
continue;
|
continue;
|
||||||
}
|
}
|
||||||
|
|
||||||
return groups;
|
return groups;
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
lastError = err instanceof Error ? err.message : t('common.unknown_error');
|
lastError = err instanceof Error ? err.message : t('common.unknown_error');
|
||||||
const status = getStatusFromError(err);
|
const status = getStatusFromError(err);
|
||||||
if (status) {
|
if (status) {
|
||||||
lastStatus = status;
|
lastStatus = status;
|
||||||
if (status === 403 || status === 404) {
|
if (status === 403 || status === 404) {
|
||||||
priorityStatus ??= status;
|
priorityStatus ??= status;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
40
src/components/quota/useGridColumns.ts
Normal file
40
src/components/quota/useGridColumns.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hook to calculate the number of grid columns based on container width and item min-width.
|
||||||
|
* Returns [columns, refCallback].
|
||||||
|
*/
|
||||||
|
export function useGridColumns(
|
||||||
|
itemMinWidth: number,
|
||||||
|
gap: number = 16
|
||||||
|
): [number, (node: HTMLDivElement | null) => void] {
|
||||||
|
const [columns, setColumns] = useState(1);
|
||||||
|
const [element, setElement] = useState<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
const refCallback = useCallback((node: HTMLDivElement | null) => {
|
||||||
|
setElement(node);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!element) return;
|
||||||
|
|
||||||
|
const updateColumns = () => {
|
||||||
|
const containerWidth = element.clientWidth;
|
||||||
|
const effectiveItemWidth = itemMinWidth + gap;
|
||||||
|
const count = Math.floor((containerWidth + gap) / effectiveItemWidth);
|
||||||
|
setColumns(Math.max(1, count));
|
||||||
|
};
|
||||||
|
|
||||||
|
updateColumns();
|
||||||
|
|
||||||
|
const observer = new ResizeObserver(() => {
|
||||||
|
updateColumns();
|
||||||
|
});
|
||||||
|
|
||||||
|
observer.observe(element);
|
||||||
|
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, [element, itemMinWidth, gap]);
|
||||||
|
|
||||||
|
return [columns, refCallback];
|
||||||
|
}
|
||||||
@@ -20,6 +20,7 @@ export function Button({
|
|||||||
disabled,
|
disabled,
|
||||||
...rest
|
...rest
|
||||||
}: PropsWithChildren<ButtonProps>) {
|
}: PropsWithChildren<ButtonProps>) {
|
||||||
|
const hasChildren = children !== null && children !== undefined && children !== false;
|
||||||
const classes = [
|
const classes = [
|
||||||
'btn',
|
'btn',
|
||||||
`btn-${variant}`,
|
`btn-${variant}`,
|
||||||
@@ -33,7 +34,7 @@ export function Button({
|
|||||||
return (
|
return (
|
||||||
<button className={classes} disabled={disabled || loading} {...rest}>
|
<button className={classes} disabled={disabled || loading} {...rest}>
|
||||||
{loading && <span className="loading-spinner" aria-hidden="true" />}
|
{loading && <span className="loading-spinner" aria-hidden="true" />}
|
||||||
<span>{children}</span>
|
{hasChildren && <span>{children}</span>}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -54,19 +54,28 @@ export function Modal({ open, title, onClose, footer, width = 520, children }: P
|
|||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
|
||||||
if (open) {
|
if (open) {
|
||||||
if (closeTimerRef.current !== null) {
|
if (closeTimerRef.current !== null) {
|
||||||
window.clearTimeout(closeTimerRef.current);
|
window.clearTimeout(closeTimerRef.current);
|
||||||
closeTimerRef.current = null;
|
closeTimerRef.current = null;
|
||||||
}
|
}
|
||||||
setIsVisible(true);
|
queueMicrotask(() => {
|
||||||
setIsClosing(false);
|
if (cancelled) return;
|
||||||
return;
|
setIsVisible(true);
|
||||||
|
setIsClosing(false);
|
||||||
|
});
|
||||||
|
} else if (isVisible) {
|
||||||
|
queueMicrotask(() => {
|
||||||
|
if (cancelled) return;
|
||||||
|
startClose(false);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isVisible) {
|
return () => {
|
||||||
startClose(false);
|
cancelled = true;
|
||||||
}
|
};
|
||||||
}, [open, isVisible, startClose]);
|
}, [open, isVisible, startClose]);
|
||||||
|
|
||||||
const handleClose = useCallback(() => {
|
const handleClose = useCallback(() => {
|
||||||
|
|||||||
@@ -8,3 +8,4 @@ export { useLocalStorage } from './useLocalStorage';
|
|||||||
export { useInterval } from './useInterval';
|
export { useInterval } from './useInterval';
|
||||||
export { useMediaQuery } from './useMediaQuery';
|
export { useMediaQuery } from './useMediaQuery';
|
||||||
export { usePagination } from './usePagination';
|
export { usePagination } from './usePagination';
|
||||||
|
export { useHeaderRefresh } from './useHeaderRefresh';
|
||||||
|
|||||||
24
src/hooks/useHeaderRefresh.ts
Normal file
24
src/hooks/useHeaderRefresh.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
export type HeaderRefreshHandler = () => void | Promise<void>;
|
||||||
|
|
||||||
|
let activeHeaderRefreshHandler: HeaderRefreshHandler | null = null;
|
||||||
|
|
||||||
|
export const triggerHeaderRefresh = async () => {
|
||||||
|
if (!activeHeaderRefreshHandler) return;
|
||||||
|
await activeHeaderRefreshHandler();
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useHeaderRefresh = (handler?: HeaderRefreshHandler | null) => {
|
||||||
|
useEffect(() => {
|
||||||
|
if (!handler) return;
|
||||||
|
|
||||||
|
activeHeaderRefreshHandler = handler;
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (activeHeaderRefreshHandler === handler) {
|
||||||
|
activeHeaderRefreshHandler = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [handler]);
|
||||||
|
};
|
||||||
@@ -137,11 +137,22 @@
|
|||||||
"usage_statistics_enable": "Enable usage statistics",
|
"usage_statistics_enable": "Enable usage statistics",
|
||||||
"logging_title": "Logging",
|
"logging_title": "Logging",
|
||||||
"logging_to_file_enable": "Enable logging to file",
|
"logging_to_file_enable": "Enable logging to file",
|
||||||
|
"logs_max_total_size_title": "Log Size Limit",
|
||||||
|
"logs_max_total_size_label": "Total log size cap (MB):",
|
||||||
|
"logs_max_total_size_hint": "Set to 0 to disable the limit.",
|
||||||
|
"logs_max_total_size_update": "Update",
|
||||||
"request_log_title": "Request Logging",
|
"request_log_title": "Request Logging",
|
||||||
"request_log_enable": "Enable request logging",
|
"request_log_enable": "Enable request logging",
|
||||||
"request_log_warning": "Keep this off unless you need detailed troubleshooting.",
|
"request_log_warning": "Keep this off unless you need detailed troubleshooting.",
|
||||||
|
"force_model_prefix_enable": "Force model prefix",
|
||||||
"ws_auth_title": "WebSocket Authentication",
|
"ws_auth_title": "WebSocket Authentication",
|
||||||
"ws_auth_enable": "Require auth for /ws/*"
|
"ws_auth_enable": "Require auth for /ws/*",
|
||||||
|
"routing_title": "Routing Strategy",
|
||||||
|
"routing_strategy_label": "Routing strategy:",
|
||||||
|
"routing_strategy_hint": "round-robin cycles through keys; fill-first prioritizes the first available key.",
|
||||||
|
"routing_strategy_update": "Update",
|
||||||
|
"routing_strategy_round_robin": "round-robin (cycle)",
|
||||||
|
"routing_strategy_fill_first": "fill-first (prioritize)"
|
||||||
},
|
},
|
||||||
"api_keys": {
|
"api_keys": {
|
||||||
"title": "API Keys Management",
|
"title": "API Keys Management",
|
||||||
@@ -221,6 +232,27 @@
|
|||||||
"claude_models_hint": "Leave empty to allow all models, or add name[, alias] entries to limit/alias them.",
|
"claude_models_hint": "Leave empty to allow all models, or add name[, alias] entries to limit/alias them.",
|
||||||
"claude_models_add_btn": "Add Model",
|
"claude_models_add_btn": "Add Model",
|
||||||
"claude_models_count": "Models Count",
|
"claude_models_count": "Models Count",
|
||||||
|
"vertex_title": "Vertex API Configuration",
|
||||||
|
"vertex_add_button": "Add Configuration",
|
||||||
|
"vertex_empty_title": "No Vertex Configuration",
|
||||||
|
"vertex_empty_desc": "Click the button above to add the first configuration",
|
||||||
|
"vertex_item_title": "Vertex Configuration",
|
||||||
|
"vertex_add_modal_title": "Add Vertex API Configuration",
|
||||||
|
"vertex_add_modal_key_label": "API Key:",
|
||||||
|
"vertex_add_modal_key_placeholder": "Please enter Vertex API key",
|
||||||
|
"vertex_add_modal_url_label": "Base URL (Required):",
|
||||||
|
"vertex_add_modal_url_placeholder": "e.g.: https://example.com/api",
|
||||||
|
"vertex_add_modal_proxy_label": "Proxy URL (Optional):",
|
||||||
|
"vertex_add_modal_proxy_placeholder": "e.g.: socks5://proxy.example.com:1080",
|
||||||
|
"vertex_edit_modal_title": "Edit Vertex API Configuration",
|
||||||
|
"vertex_edit_modal_key_label": "API Key:",
|
||||||
|
"vertex_edit_modal_url_label": "Base URL (Required):",
|
||||||
|
"vertex_edit_modal_proxy_label": "Proxy URL (Optional):",
|
||||||
|
"vertex_delete_confirm": "Are you sure you want to delete this Vertex configuration?",
|
||||||
|
"vertex_models_label": "Model mappings (alias required):",
|
||||||
|
"vertex_models_add_btn": "Add Mapping",
|
||||||
|
"vertex_models_hint": "Each mapping needs both the original model and its alias.",
|
||||||
|
"vertex_models_count": "Mapping count",
|
||||||
"ampcode_title": "Amp CLI Integration (ampcode)",
|
"ampcode_title": "Amp CLI Integration (ampcode)",
|
||||||
"ampcode_modal_title": "Configure Ampcode",
|
"ampcode_modal_title": "Configure Ampcode",
|
||||||
"ampcode_upstream_url_label": "Upstream URL",
|
"ampcode_upstream_url_label": "Upstream URL",
|
||||||
@@ -312,6 +344,7 @@
|
|||||||
"delete_all_confirm": "Are you sure you want to delete all auth files? This operation cannot be undone!",
|
"delete_all_confirm": "Are you sure you want to delete all auth files? This operation cannot be undone!",
|
||||||
"delete_filtered_confirm": "Are you sure you want to delete all {{type}} auth files? This operation cannot be undone!",
|
"delete_filtered_confirm": "Are you sure you want to delete all {{type}} auth files? This operation cannot be undone!",
|
||||||
"upload_error_json": "Only JSON files are allowed",
|
"upload_error_json": "Only JSON files are allowed",
|
||||||
|
"upload_error_size": "File size cannot exceed {{maxSize}}",
|
||||||
"upload_success": "File uploaded successfully",
|
"upload_success": "File uploaded successfully",
|
||||||
"download_success": "File downloaded successfully",
|
"download_success": "File downloaded successfully",
|
||||||
"delete_success": "File deleted successfully",
|
"delete_success": "File deleted successfully",
|
||||||
@@ -327,6 +360,9 @@
|
|||||||
"search_placeholder": "Filter by name, type, or provider",
|
"search_placeholder": "Filter by name, type, or provider",
|
||||||
"page_size_label": "Per page",
|
"page_size_label": "Per page",
|
||||||
"page_size_unit": "items",
|
"page_size_unit": "items",
|
||||||
|
"view_mode_paged": "Paged",
|
||||||
|
"view_mode_all": "Show all",
|
||||||
|
"too_many_files_warning": "Too many credentials. Showing all may cause performance issues, please use paged view.",
|
||||||
"filter_all": "All",
|
"filter_all": "All",
|
||||||
"filter_qwen": "Qwen",
|
"filter_qwen": "Qwen",
|
||||||
"filter_gemini": "Gemini",
|
"filter_gemini": "Gemini",
|
||||||
@@ -464,6 +500,34 @@
|
|||||||
"upgrade_required_title": "Please upgrade CLI Proxy API",
|
"upgrade_required_title": "Please upgrade CLI Proxy API",
|
||||||
"upgrade_required_desc": "The current server does not support the OAuth excluded models API. Please upgrade to the latest CLI Proxy API (CPA) version."
|
"upgrade_required_desc": "The current server does not support the OAuth excluded models API. Please upgrade to the latest CLI Proxy API (CPA) version."
|
||||||
},
|
},
|
||||||
|
"oauth_model_mappings": {
|
||||||
|
"title": "OAuth Model Mappings",
|
||||||
|
"add": "Add Mapping",
|
||||||
|
"add_title": "Add provider model mappings",
|
||||||
|
"provider_label": "Provider",
|
||||||
|
"provider_placeholder": "e.g. gemini-cli / vertex",
|
||||||
|
"provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
|
||||||
|
"mappings_label": "Model mappings",
|
||||||
|
"mapping_name_placeholder": "Source model name",
|
||||||
|
"mapping_alias_placeholder": "Alias (required)",
|
||||||
|
"mapping_fork_label": "Keep original",
|
||||||
|
"mappings_hint": "Saving an empty list removes that provider. Enable “Keep original” to keep the original name while adding the alias.",
|
||||||
|
"add_mapping": "Add mapping",
|
||||||
|
"save": "Save/Update",
|
||||||
|
"save_success": "Model mappings updated",
|
||||||
|
"save_failed": "Failed to update model mappings",
|
||||||
|
"delete": "Delete Provider",
|
||||||
|
"delete_confirm": "Delete model mappings for {{provider}}?",
|
||||||
|
"delete_success": "Model mappings removed",
|
||||||
|
"delete_failed": "Failed to delete model mappings",
|
||||||
|
"no_models": "No model mappings",
|
||||||
|
"model_count": "{{count}} mappings",
|
||||||
|
"list_empty_all": "No model mappings yet—use “Add Mapping” to create one.",
|
||||||
|
"provider_required": "Please enter a provider first",
|
||||||
|
"upgrade_required": "This feature requires a newer CLI Proxy API (CPA) version. Please upgrade.",
|
||||||
|
"upgrade_required_title": "Please upgrade CLI Proxy API",
|
||||||
|
"upgrade_required_desc": "The current server does not support the OAuth model mappings API. Please upgrade to the latest CLI Proxy API (CPA) version."
|
||||||
|
},
|
||||||
"auth_login": {
|
"auth_login": {
|
||||||
"codex_oauth_title": "Codex OAuth",
|
"codex_oauth_title": "Codex OAuth",
|
||||||
"codex_oauth_button": "Start Codex Login",
|
"codex_oauth_button": "Start Codex Login",
|
||||||
@@ -548,7 +612,7 @@
|
|||||||
"iflow_oauth_polling_error": "Failed to check authentication status:",
|
"iflow_oauth_polling_error": "Failed to check authentication status:",
|
||||||
"iflow_cookie_title": "iFlow Cookie Login",
|
"iflow_cookie_title": "iFlow Cookie Login",
|
||||||
"iflow_cookie_label": "Cookie Value:",
|
"iflow_cookie_label": "Cookie Value:",
|
||||||
"iflow_cookie_placeholder": "Paste browser cookie, e.g. sessionid=...;",
|
"iflow_cookie_placeholder": "Enter the BXAuth value, starting with BXAuth=",
|
||||||
"iflow_cookie_hint": "Submit an existing cookie to finish login without opening the authorization link; the credential file will be saved automatically.",
|
"iflow_cookie_hint": "Submit an existing cookie to finish login without opening the authorization link; the credential file will be saved automatically.",
|
||||||
"iflow_cookie_key_hint": "Note: Create a key on the platform first.",
|
"iflow_cookie_key_hint": "Note: Create a key on the platform first.",
|
||||||
"iflow_cookie_button": "Submit Cookie Login",
|
"iflow_cookie_button": "Submit Cookie Login",
|
||||||
@@ -709,7 +773,8 @@
|
|||||||
"quota_management": {
|
"quota_management": {
|
||||||
"title": "Quota Management",
|
"title": "Quota Management",
|
||||||
"description": "Monitor OAuth quota status for Antigravity, Codex, and Gemini CLI credentials.",
|
"description": "Monitor OAuth quota status for Antigravity, Codex, and Gemini CLI credentials.",
|
||||||
"refresh_files": "Refresh auth files"
|
"refresh_files": "Refresh auth files",
|
||||||
|
"refresh_files_and_quota": "Refresh files & quota"
|
||||||
},
|
},
|
||||||
"system_info": {
|
"system_info": {
|
||||||
"title": "Management Center Info",
|
"title": "Management Center Info",
|
||||||
@@ -761,12 +826,16 @@
|
|||||||
"quota_switch_preview_updated": "Preview model switch settings updated",
|
"quota_switch_preview_updated": "Preview model switch settings updated",
|
||||||
"usage_statistics_updated": "Usage statistics settings updated",
|
"usage_statistics_updated": "Usage statistics settings updated",
|
||||||
"logging_to_file_updated": "Logging settings updated",
|
"logging_to_file_updated": "Logging settings updated",
|
||||||
|
"logs_max_total_size_updated": "Log size limit updated",
|
||||||
"request_log_updated": "Request logging setting updated",
|
"request_log_updated": "Request logging setting updated",
|
||||||
|
"force_model_prefix_updated": "Model prefix setting updated",
|
||||||
"ws_auth_updated": "WebSocket authentication setting updated",
|
"ws_auth_updated": "WebSocket authentication setting updated",
|
||||||
|
"routing_strategy_updated": "Routing strategy updated",
|
||||||
"login_storage_cleared": "Local login data cleared",
|
"login_storage_cleared": "Local login data cleared",
|
||||||
"api_key_added": "API key added successfully",
|
"api_key_added": "API key added successfully",
|
||||||
"api_key_updated": "API key updated successfully",
|
"api_key_updated": "API key updated successfully",
|
||||||
"api_key_deleted": "API key deleted successfully",
|
"api_key_deleted": "API key deleted successfully",
|
||||||
|
"api_key_invalid_chars": "API key can only contain letters, numbers, and symbols",
|
||||||
"gemini_key_added": "Gemini key added successfully",
|
"gemini_key_added": "Gemini key added successfully",
|
||||||
"gemini_key_updated": "Gemini key updated successfully",
|
"gemini_key_updated": "Gemini key updated successfully",
|
||||||
"gemini_key_deleted": "Gemini key deleted successfully",
|
"gemini_key_deleted": "Gemini key deleted successfully",
|
||||||
@@ -780,6 +849,10 @@
|
|||||||
"claude_config_added": "Claude configuration added successfully",
|
"claude_config_added": "Claude configuration added successfully",
|
||||||
"claude_config_updated": "Claude configuration updated successfully",
|
"claude_config_updated": "Claude configuration updated successfully",
|
||||||
"claude_config_deleted": "Claude configuration deleted successfully",
|
"claude_config_deleted": "Claude configuration deleted successfully",
|
||||||
|
"vertex_config_added": "Vertex configuration added successfully",
|
||||||
|
"vertex_config_updated": "Vertex configuration updated successfully",
|
||||||
|
"vertex_config_deleted": "Vertex configuration deleted successfully",
|
||||||
|
"vertex_base_url_required": "Please enter the Vertex Base URL",
|
||||||
"config_enabled": "Configuration enabled",
|
"config_enabled": "Configuration enabled",
|
||||||
"config_disabled": "Configuration disabled",
|
"config_disabled": "Configuration disabled",
|
||||||
"field_required": "Required fields cannot be empty",
|
"field_required": "Required fields cannot be empty",
|
||||||
|
|||||||
@@ -137,11 +137,22 @@
|
|||||||
"usage_statistics_enable": "启用使用统计",
|
"usage_statistics_enable": "启用使用统计",
|
||||||
"logging_title": "日志记录",
|
"logging_title": "日志记录",
|
||||||
"logging_to_file_enable": "启用日志记录到文件",
|
"logging_to_file_enable": "启用日志记录到文件",
|
||||||
|
"logs_max_total_size_title": "日志容量限制",
|
||||||
|
"logs_max_total_size_label": "日志总大小上限 (MB):",
|
||||||
|
"logs_max_total_size_hint": "设置为 0 表示不限制。",
|
||||||
|
"logs_max_total_size_update": "更新",
|
||||||
"request_log_title": "请求日志",
|
"request_log_title": "请求日志",
|
||||||
"request_log_enable": "启用请求日志",
|
"request_log_enable": "启用请求日志",
|
||||||
"request_log_warning": "仅在需要排查问题时开启,日常请保持关闭。",
|
"request_log_warning": "仅在需要排查问题时开启,日常请保持关闭。",
|
||||||
|
"force_model_prefix_enable": "强制模型前缀",
|
||||||
"ws_auth_title": "WebSocket 鉴权",
|
"ws_auth_title": "WebSocket 鉴权",
|
||||||
"ws_auth_enable": "启用 /ws/* 鉴权"
|
"ws_auth_enable": "启用 /ws/* 鉴权",
|
||||||
|
"routing_title": "路由策略",
|
||||||
|
"routing_strategy_label": "路由策略:",
|
||||||
|
"routing_strategy_hint": "round-robin 为轮询,fill-first 为优先填充。",
|
||||||
|
"routing_strategy_update": "更新",
|
||||||
|
"routing_strategy_round_robin": "round-robin (轮询)",
|
||||||
|
"routing_strategy_fill_first": "fill-first (优先填充)"
|
||||||
},
|
},
|
||||||
"api_keys": {
|
"api_keys": {
|
||||||
"title": "API 密钥管理",
|
"title": "API 密钥管理",
|
||||||
@@ -221,6 +232,27 @@
|
|||||||
"claude_models_hint": "为空表示使用全部模型;可填写 name[, alias] 以限制或重命名模型。",
|
"claude_models_hint": "为空表示使用全部模型;可填写 name[, alias] 以限制或重命名模型。",
|
||||||
"claude_models_add_btn": "添加模型",
|
"claude_models_add_btn": "添加模型",
|
||||||
"claude_models_count": "模型数量",
|
"claude_models_count": "模型数量",
|
||||||
|
"vertex_title": "Vertex API 配置",
|
||||||
|
"vertex_add_button": "添加配置",
|
||||||
|
"vertex_empty_title": "暂无Vertex配置",
|
||||||
|
"vertex_empty_desc": "点击上方按钮添加第一个配置",
|
||||||
|
"vertex_item_title": "Vertex配置",
|
||||||
|
"vertex_add_modal_title": "添加Vertex API配置",
|
||||||
|
"vertex_add_modal_key_label": "API密钥:",
|
||||||
|
"vertex_add_modal_key_placeholder": "请输入Vertex API密钥",
|
||||||
|
"vertex_add_modal_url_label": "Base URL (必填):",
|
||||||
|
"vertex_add_modal_url_placeholder": "例如: https://example.com/api",
|
||||||
|
"vertex_add_modal_proxy_label": "代理 URL (可选):",
|
||||||
|
"vertex_add_modal_proxy_placeholder": "例如: socks5://proxy.example.com:1080",
|
||||||
|
"vertex_edit_modal_title": "编辑Vertex API配置",
|
||||||
|
"vertex_edit_modal_key_label": "API密钥:",
|
||||||
|
"vertex_edit_modal_url_label": "Base URL (必填):",
|
||||||
|
"vertex_edit_modal_proxy_label": "代理 URL (可选):",
|
||||||
|
"vertex_delete_confirm": "确定要删除这个Vertex配置吗?",
|
||||||
|
"vertex_models_label": "模型映射 (别名必填):",
|
||||||
|
"vertex_models_add_btn": "添加映射",
|
||||||
|
"vertex_models_hint": "每条映射需要填写原模型与别名。",
|
||||||
|
"vertex_models_count": "映射数量",
|
||||||
"ampcode_title": "Amp CLI 集成 (ampcode)",
|
"ampcode_title": "Amp CLI 集成 (ampcode)",
|
||||||
"ampcode_modal_title": "配置 Ampcode",
|
"ampcode_modal_title": "配置 Ampcode",
|
||||||
"ampcode_upstream_url_label": "Upstream URL",
|
"ampcode_upstream_url_label": "Upstream URL",
|
||||||
@@ -312,6 +344,7 @@
|
|||||||
"delete_all_confirm": "确定要删除所有认证文件吗?此操作不可恢复!",
|
"delete_all_confirm": "确定要删除所有认证文件吗?此操作不可恢复!",
|
||||||
"delete_filtered_confirm": "确定要删除筛选出的 {{type}} 认证文件吗?此操作不可恢复!",
|
"delete_filtered_confirm": "确定要删除筛选出的 {{type}} 认证文件吗?此操作不可恢复!",
|
||||||
"upload_error_json": "只能上传JSON文件",
|
"upload_error_json": "只能上传JSON文件",
|
||||||
|
"upload_error_size": "文件大小不能超过 {{maxSize}}",
|
||||||
"upload_success": "文件上传成功",
|
"upload_success": "文件上传成功",
|
||||||
"download_success": "文件下载成功",
|
"download_success": "文件下载成功",
|
||||||
"delete_success": "文件删除成功",
|
"delete_success": "文件删除成功",
|
||||||
@@ -327,6 +360,9 @@
|
|||||||
"search_placeholder": "输入名称、类型或提供方关键字",
|
"search_placeholder": "输入名称、类型或提供方关键字",
|
||||||
"page_size_label": "单页数量",
|
"page_size_label": "单页数量",
|
||||||
"page_size_unit": "个/页",
|
"page_size_unit": "个/页",
|
||||||
|
"view_mode_paged": "按页显示",
|
||||||
|
"view_mode_all": "显示全部",
|
||||||
|
"too_many_files_warning": "您的凭证总数过多,全部加载会导致页面卡顿,请保持单页浏览。",
|
||||||
"filter_all": "全部",
|
"filter_all": "全部",
|
||||||
"filter_qwen": "Qwen",
|
"filter_qwen": "Qwen",
|
||||||
"filter_gemini": "Gemini",
|
"filter_gemini": "Gemini",
|
||||||
@@ -464,6 +500,34 @@
|
|||||||
"upgrade_required_title": "需要升级 CPA 版本",
|
"upgrade_required_title": "需要升级 CPA 版本",
|
||||||
"upgrade_required_desc": "当前服务器版本不支持获取模型排除列表功能,请升级到最新版本的 CPA(CLI Proxy API)后重试。"
|
"upgrade_required_desc": "当前服务器版本不支持获取模型排除列表功能,请升级到最新版本的 CPA(CLI Proxy API)后重试。"
|
||||||
},
|
},
|
||||||
|
"oauth_model_mappings": {
|
||||||
|
"title": "OAuth 模型映射",
|
||||||
|
"add": "新增映射",
|
||||||
|
"add_title": "新增提供商模型映射",
|
||||||
|
"provider_label": "提供商",
|
||||||
|
"provider_placeholder": "例如 gemini-cli / vertex",
|
||||||
|
"provider_hint": "默认选中当前筛选的提供商,也可直接输入或选择其他名称。",
|
||||||
|
"mappings_label": "模型映射",
|
||||||
|
"mapping_name_placeholder": "原模型名称",
|
||||||
|
"mapping_alias_placeholder": "别名 (必填)",
|
||||||
|
"mapping_fork_label": "保留原名",
|
||||||
|
"mappings_hint": "留空保存将删除该提供商记录;开启“保留原名”会在保留原模型名的同时新增别名。",
|
||||||
|
"add_mapping": "添加映射",
|
||||||
|
"save": "保存/更新",
|
||||||
|
"save_success": "模型映射已更新",
|
||||||
|
"save_failed": "更新模型映射失败",
|
||||||
|
"delete": "删除提供商",
|
||||||
|
"delete_confirm": "确定要删除 {{provider}} 的模型映射吗?",
|
||||||
|
"delete_success": "已删除该提供商的模型映射",
|
||||||
|
"delete_failed": "删除模型映射失败",
|
||||||
|
"no_models": "未配置模型映射",
|
||||||
|
"model_count": "映射 {{count}} 条模型",
|
||||||
|
"list_empty_all": "暂无任何提供商的模型映射,点击“新增映射”创建。",
|
||||||
|
"provider_required": "请先填写提供商名称",
|
||||||
|
"upgrade_required": "当前 CPA 版本不支持模型映射功能,请升级 CPA 版本",
|
||||||
|
"upgrade_required_title": "需要升级 CPA 版本",
|
||||||
|
"upgrade_required_desc": "当前服务器版本不支持 OAuth 模型映射功能,请升级到最新版本的 CPA(CLI Proxy API)后重试。"
|
||||||
|
},
|
||||||
"auth_login": {
|
"auth_login": {
|
||||||
"codex_oauth_title": "Codex OAuth",
|
"codex_oauth_title": "Codex OAuth",
|
||||||
"codex_oauth_button": "开始 Codex 登录",
|
"codex_oauth_button": "开始 Codex 登录",
|
||||||
@@ -548,7 +612,7 @@
|
|||||||
"iflow_oauth_polling_error": "检查认证状态失败:",
|
"iflow_oauth_polling_error": "检查认证状态失败:",
|
||||||
"iflow_cookie_title": "iFlow Cookie 登录",
|
"iflow_cookie_title": "iFlow Cookie 登录",
|
||||||
"iflow_cookie_label": "Cookie 内容:",
|
"iflow_cookie_label": "Cookie 内容:",
|
||||||
"iflow_cookie_placeholder": "粘贴浏览器中的 Cookie,例如 sessionid=...;",
|
"iflow_cookie_placeholder": "填入BXAuth值 以BXAuth=开头",
|
||||||
"iflow_cookie_hint": "直接提交 Cookie 以完成登录(无需打开授权链接),服务端将自动保存凭据。",
|
"iflow_cookie_hint": "直接提交 Cookie 以完成登录(无需打开授权链接),服务端将自动保存凭据。",
|
||||||
"iflow_cookie_key_hint": "提示:需在平台上先创建 Key。",
|
"iflow_cookie_key_hint": "提示:需在平台上先创建 Key。",
|
||||||
"iflow_cookie_button": "提交 Cookie 登录",
|
"iflow_cookie_button": "提交 Cookie 登录",
|
||||||
@@ -709,7 +773,8 @@
|
|||||||
"quota_management": {
|
"quota_management": {
|
||||||
"title": "配额管理",
|
"title": "配额管理",
|
||||||
"description": "集中查看 OAuth 额度与剩余情况",
|
"description": "集中查看 OAuth 额度与剩余情况",
|
||||||
"refresh_files": "刷新认证文件"
|
"refresh_files": "刷新认证文件",
|
||||||
|
"refresh_files_and_quota": "刷新认证文件&额度"
|
||||||
},
|
},
|
||||||
"system_info": {
|
"system_info": {
|
||||||
"title": "管理中心信息",
|
"title": "管理中心信息",
|
||||||
@@ -761,12 +826,16 @@
|
|||||||
"quota_switch_preview_updated": "预览模型切换设置已更新",
|
"quota_switch_preview_updated": "预览模型切换设置已更新",
|
||||||
"usage_statistics_updated": "使用统计设置已更新",
|
"usage_statistics_updated": "使用统计设置已更新",
|
||||||
"logging_to_file_updated": "日志记录设置已更新",
|
"logging_to_file_updated": "日志记录设置已更新",
|
||||||
|
"logs_max_total_size_updated": "日志容量设置已更新",
|
||||||
"request_log_updated": "请求日志设置已更新",
|
"request_log_updated": "请求日志设置已更新",
|
||||||
|
"force_model_prefix_updated": "模型前缀设置已更新",
|
||||||
"ws_auth_updated": "WebSocket 鉴权设置已更新",
|
"ws_auth_updated": "WebSocket 鉴权设置已更新",
|
||||||
|
"routing_strategy_updated": "路由策略已更新",
|
||||||
"login_storage_cleared": "本地登录信息已清理",
|
"login_storage_cleared": "本地登录信息已清理",
|
||||||
"api_key_added": "API密钥添加成功",
|
"api_key_added": "API密钥添加成功",
|
||||||
"api_key_updated": "API密钥更新成功",
|
"api_key_updated": "API密钥更新成功",
|
||||||
"api_key_deleted": "API密钥删除成功",
|
"api_key_deleted": "API密钥删除成功",
|
||||||
|
"api_key_invalid_chars": "API密钥仅支持英文字母、数字和符号",
|
||||||
"gemini_key_added": "Gemini密钥添加成功",
|
"gemini_key_added": "Gemini密钥添加成功",
|
||||||
"gemini_key_updated": "Gemini密钥更新成功",
|
"gemini_key_updated": "Gemini密钥更新成功",
|
||||||
"gemini_key_deleted": "Gemini密钥删除成功",
|
"gemini_key_deleted": "Gemini密钥删除成功",
|
||||||
@@ -780,6 +849,10 @@
|
|||||||
"claude_config_added": "Claude配置添加成功",
|
"claude_config_added": "Claude配置添加成功",
|
||||||
"claude_config_updated": "Claude配置更新成功",
|
"claude_config_updated": "Claude配置更新成功",
|
||||||
"claude_config_deleted": "Claude配置删除成功",
|
"claude_config_deleted": "Claude配置删除成功",
|
||||||
|
"vertex_config_added": "Vertex配置添加成功",
|
||||||
|
"vertex_config_updated": "Vertex配置更新成功",
|
||||||
|
"vertex_config_deleted": "Vertex配置删除成功",
|
||||||
|
"vertex_base_url_required": "请填写Vertex Base URL",
|
||||||
"config_enabled": "配置已启用",
|
"config_enabled": "配置已启用",
|
||||||
"config_disabled": "配置已停用",
|
"config_disabled": "配置已停用",
|
||||||
"field_required": "必填字段不能为空",
|
"field_required": "必填字段不能为空",
|
||||||
|
|||||||
@@ -7,11 +7,13 @@ import {
|
|||||||
CodexSection,
|
CodexSection,
|
||||||
GeminiSection,
|
GeminiSection,
|
||||||
OpenAISection,
|
OpenAISection,
|
||||||
|
VertexSection,
|
||||||
useProviderStats,
|
useProviderStats,
|
||||||
type GeminiFormState,
|
type GeminiFormState,
|
||||||
type OpenAIFormState,
|
type OpenAIFormState,
|
||||||
type ProviderFormState,
|
type ProviderFormState,
|
||||||
type ProviderModal,
|
type ProviderModal,
|
||||||
|
type VertexFormState,
|
||||||
} from '@/components/providers';
|
} from '@/components/providers';
|
||||||
import {
|
import {
|
||||||
parseExcludedModels,
|
parseExcludedModels,
|
||||||
@@ -21,7 +23,7 @@ import {
|
|||||||
import { ampcodeApi, providersApi } from '@/services/api';
|
import { ampcodeApi, providersApi } from '@/services/api';
|
||||||
import { useAuthStore, useConfigStore, useNotificationStore, useThemeStore } from '@/stores';
|
import { useAuthStore, useConfigStore, useNotificationStore, useThemeStore } from '@/stores';
|
||||||
import type { GeminiKeyConfig, OpenAIProviderConfig, ProviderKeyConfig } from '@/types';
|
import type { GeminiKeyConfig, OpenAIProviderConfig, ProviderKeyConfig } from '@/types';
|
||||||
import { buildHeaderObject, headersToEntries } from '@/utils/headers';
|
import { buildHeaderObject } from '@/utils/headers';
|
||||||
import styles from './AiProvidersPage.module.scss';
|
import styles from './AiProvidersPage.module.scss';
|
||||||
|
|
||||||
export function AiProvidersPage() {
|
export function AiProvidersPage() {
|
||||||
@@ -41,6 +43,7 @@ export function AiProvidersPage() {
|
|||||||
const [geminiKeys, setGeminiKeys] = useState<GeminiKeyConfig[]>([]);
|
const [geminiKeys, setGeminiKeys] = useState<GeminiKeyConfig[]>([]);
|
||||||
const [codexConfigs, setCodexConfigs] = useState<ProviderKeyConfig[]>([]);
|
const [codexConfigs, setCodexConfigs] = useState<ProviderKeyConfig[]>([]);
|
||||||
const [claudeConfigs, setClaudeConfigs] = useState<ProviderKeyConfig[]>([]);
|
const [claudeConfigs, setClaudeConfigs] = useState<ProviderKeyConfig[]>([]);
|
||||||
|
const [vertexConfigs, setVertexConfigs] = useState<ProviderKeyConfig[]>([]);
|
||||||
const [openaiProviders, setOpenaiProviders] = useState<OpenAIProviderConfig[]>([]);
|
const [openaiProviders, setOpenaiProviders] = useState<OpenAIProviderConfig[]>([]);
|
||||||
|
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
@@ -63,17 +66,32 @@ export function AiProvidersPage() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError('');
|
setError('');
|
||||||
try {
|
try {
|
||||||
const data = await fetchConfig();
|
const [configResult, vertexResult, ampcodeResult] = await Promise.allSettled([
|
||||||
|
fetchConfig(),
|
||||||
|
providersApi.getVertexConfigs(),
|
||||||
|
ampcodeApi.getAmpcode(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (configResult.status !== 'fulfilled') {
|
||||||
|
throw configResult.reason;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = configResult.value;
|
||||||
setGeminiKeys(data?.geminiApiKeys || []);
|
setGeminiKeys(data?.geminiApiKeys || []);
|
||||||
setCodexConfigs(data?.codexApiKeys || []);
|
setCodexConfigs(data?.codexApiKeys || []);
|
||||||
setClaudeConfigs(data?.claudeApiKeys || []);
|
setClaudeConfigs(data?.claudeApiKeys || []);
|
||||||
|
setVertexConfigs(data?.vertexApiKeys || []);
|
||||||
setOpenaiProviders(data?.openaiCompatibility || []);
|
setOpenaiProviders(data?.openaiCompatibility || []);
|
||||||
try {
|
|
||||||
const ampcode = await ampcodeApi.getAmpcode();
|
if (vertexResult.status === 'fulfilled') {
|
||||||
updateConfigValue('ampcode', ampcode);
|
setVertexConfigs(vertexResult.value || []);
|
||||||
|
updateConfigValue('vertex-api-key', vertexResult.value || []);
|
||||||
|
clearCache('vertex-api-key');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ampcodeResult.status === 'fulfilled') {
|
||||||
|
updateConfigValue('ampcode', ampcodeResult.value);
|
||||||
clearCache('ampcode');
|
clearCache('ampcode');
|
||||||
} catch {
|
|
||||||
// ignore
|
|
||||||
}
|
}
|
||||||
} catch (err: unknown) {
|
} catch (err: unknown) {
|
||||||
const message = getErrorMessage(err) || t('notification.refresh_failed');
|
const message = getErrorMessage(err) || t('notification.refresh_failed');
|
||||||
@@ -92,11 +110,13 @@ export function AiProvidersPage() {
|
|||||||
if (config?.geminiApiKeys) setGeminiKeys(config.geminiApiKeys);
|
if (config?.geminiApiKeys) setGeminiKeys(config.geminiApiKeys);
|
||||||
if (config?.codexApiKeys) setCodexConfigs(config.codexApiKeys);
|
if (config?.codexApiKeys) setCodexConfigs(config.codexApiKeys);
|
||||||
if (config?.claudeApiKeys) setClaudeConfigs(config.claudeApiKeys);
|
if (config?.claudeApiKeys) setClaudeConfigs(config.claudeApiKeys);
|
||||||
|
if (config?.vertexApiKeys) setVertexConfigs(config.vertexApiKeys);
|
||||||
if (config?.openaiCompatibility) setOpenaiProviders(config.openaiCompatibility);
|
if (config?.openaiCompatibility) setOpenaiProviders(config.openaiCompatibility);
|
||||||
}, [
|
}, [
|
||||||
config?.geminiApiKeys,
|
config?.geminiApiKeys,
|
||||||
config?.codexApiKeys,
|
config?.codexApiKeys,
|
||||||
config?.claudeApiKeys,
|
config?.claudeApiKeys,
|
||||||
|
config?.vertexApiKeys,
|
||||||
config?.openaiCompatibility,
|
config?.openaiCompatibility,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@@ -112,6 +132,10 @@ export function AiProvidersPage() {
|
|||||||
setModal({ type, index });
|
setModal({ type, index });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const openVertexModal = (index: number | null) => {
|
||||||
|
setModal({ type: 'vertex', index });
|
||||||
|
};
|
||||||
|
|
||||||
const openAmpcodeModal = () => {
|
const openAmpcodeModal = () => {
|
||||||
setModal({ type: 'ampcode', index: null });
|
setModal({ type: 'ampcode', index: null });
|
||||||
};
|
};
|
||||||
@@ -127,7 +151,7 @@ export function AiProvidersPage() {
|
|||||||
apiKey: form.apiKey.trim(),
|
apiKey: form.apiKey.trim(),
|
||||||
prefix: form.prefix?.trim() || undefined,
|
prefix: form.prefix?.trim() || undefined,
|
||||||
baseUrl: form.baseUrl?.trim() || undefined,
|
baseUrl: form.baseUrl?.trim() || undefined,
|
||||||
headers: buildHeaderObject(headersToEntries(form.headers)),
|
headers: buildHeaderObject(form.headers),
|
||||||
excludedModels: parseExcludedModels(form.excludedText),
|
excludedModels: parseExcludedModels(form.excludedText),
|
||||||
};
|
};
|
||||||
const nextList =
|
const nextList =
|
||||||
@@ -283,7 +307,7 @@ export function AiProvidersPage() {
|
|||||||
prefix: form.prefix?.trim() || undefined,
|
prefix: form.prefix?.trim() || undefined,
|
||||||
baseUrl,
|
baseUrl,
|
||||||
proxyUrl: form.proxyUrl?.trim() || undefined,
|
proxyUrl: form.proxyUrl?.trim() || undefined,
|
||||||
headers: buildHeaderObject(headersToEntries(form.headers)),
|
headers: buildHeaderObject(form.headers),
|
||||||
models: entriesToModels(form.modelEntries),
|
models: entriesToModels(form.modelEntries),
|
||||||
excludedModels: parseExcludedModels(form.excludedText),
|
excludedModels: parseExcludedModels(form.excludedText),
|
||||||
};
|
};
|
||||||
@@ -351,6 +375,72 @@ export function AiProvidersPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const saveVertex = async (form: VertexFormState, editIndex: number | null) => {
|
||||||
|
const trimmedBaseUrl = (form.baseUrl ?? '').trim();
|
||||||
|
const baseUrl = trimmedBaseUrl || undefined;
|
||||||
|
if (!baseUrl) {
|
||||||
|
showNotification(t('notification.vertex_base_url_required'), 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setSaving(true);
|
||||||
|
try {
|
||||||
|
const payload: ProviderKeyConfig = {
|
||||||
|
apiKey: form.apiKey.trim(),
|
||||||
|
prefix: form.prefix?.trim() || undefined,
|
||||||
|
baseUrl,
|
||||||
|
proxyUrl: form.proxyUrl?.trim() || undefined,
|
||||||
|
headers: buildHeaderObject(form.headers),
|
||||||
|
models: form.modelEntries
|
||||||
|
.map((entry) => {
|
||||||
|
const name = entry.name.trim();
|
||||||
|
const alias = entry.alias.trim();
|
||||||
|
if (!name || !alias) return null;
|
||||||
|
return { name, alias };
|
||||||
|
})
|
||||||
|
.filter(Boolean) as ProviderKeyConfig['models'],
|
||||||
|
};
|
||||||
|
|
||||||
|
const nextList =
|
||||||
|
editIndex !== null
|
||||||
|
? vertexConfigs.map((item, idx) => (idx === editIndex ? payload : item))
|
||||||
|
: [...vertexConfigs, payload];
|
||||||
|
|
||||||
|
await providersApi.saveVertexConfigs(nextList);
|
||||||
|
setVertexConfigs(nextList);
|
||||||
|
updateConfigValue('vertex-api-key', nextList);
|
||||||
|
clearCache('vertex-api-key');
|
||||||
|
const message =
|
||||||
|
editIndex !== null
|
||||||
|
? t('notification.vertex_config_updated')
|
||||||
|
: t('notification.vertex_config_added');
|
||||||
|
showNotification(message, 'success');
|
||||||
|
closeModal();
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const message = getErrorMessage(err);
|
||||||
|
showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteVertex = async (index: number) => {
|
||||||
|
const entry = vertexConfigs[index];
|
||||||
|
if (!entry) return;
|
||||||
|
if (!window.confirm(t('ai_providers.vertex_delete_confirm'))) return;
|
||||||
|
try {
|
||||||
|
await providersApi.deleteVertexConfig(entry.apiKey);
|
||||||
|
const next = vertexConfigs.filter((_, idx) => idx !== index);
|
||||||
|
setVertexConfigs(next);
|
||||||
|
updateConfigValue('vertex-api-key', next);
|
||||||
|
clearCache('vertex-api-key');
|
||||||
|
showNotification(t('notification.vertex_config_deleted'), 'success');
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const message = getErrorMessage(err);
|
||||||
|
showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const saveOpenai = async (form: OpenAIFormState, editIndex: number | null) => {
|
const saveOpenai = async (form: OpenAIFormState, editIndex: number | null) => {
|
||||||
setSaving(true);
|
setSaving(true);
|
||||||
try {
|
try {
|
||||||
@@ -412,6 +502,7 @@ export function AiProvidersPage() {
|
|||||||
const geminiModalIndex = modal?.type === 'gemini' ? modal.index : null;
|
const geminiModalIndex = modal?.type === 'gemini' ? modal.index : null;
|
||||||
const codexModalIndex = modal?.type === 'codex' ? modal.index : null;
|
const codexModalIndex = modal?.type === 'codex' ? modal.index : null;
|
||||||
const claudeModalIndex = modal?.type === 'claude' ? modal.index : null;
|
const claudeModalIndex = modal?.type === 'claude' ? modal.index : null;
|
||||||
|
const vertexModalIndex = modal?.type === 'vertex' ? modal.index : null;
|
||||||
const openaiModalIndex = modal?.type === 'openai' ? modal.index : null;
|
const openaiModalIndex = modal?.type === 'openai' ? modal.index : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -475,6 +566,23 @@ export function AiProvidersPage() {
|
|||||||
onSave={(form, editIndex) => saveProvider('claude', form, editIndex)}
|
onSave={(form, editIndex) => saveProvider('claude', form, editIndex)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<VertexSection
|
||||||
|
configs={vertexConfigs}
|
||||||
|
keyStats={keyStats}
|
||||||
|
usageDetails={usageDetails}
|
||||||
|
loading={loading}
|
||||||
|
disableControls={disableControls}
|
||||||
|
isSaving={saving}
|
||||||
|
isSwitching={isSwitching}
|
||||||
|
isModalOpen={modal?.type === 'vertex'}
|
||||||
|
modalIndex={vertexModalIndex}
|
||||||
|
onAdd={() => openVertexModal(null)}
|
||||||
|
onEdit={(index) => openVertexModal(index)}
|
||||||
|
onDelete={deleteVertex}
|
||||||
|
onCloseModal={closeModal}
|
||||||
|
onSave={saveVertex}
|
||||||
|
/>
|
||||||
|
|
||||||
<AmpcodeSection
|
<AmpcodeSection
|
||||||
config={config?.ampcode}
|
config={config?.ampcode}
|
||||||
loading={loading}
|
loading={loading}
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
|
|||||||
import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
|
import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
|
||||||
import { apiKeysApi } from '@/services/api';
|
import { apiKeysApi } from '@/services/api';
|
||||||
import { maskApiKey } from '@/utils/format';
|
import { maskApiKey } from '@/utils/format';
|
||||||
|
import { isValidApiKeyCharset } from '@/utils/validation';
|
||||||
import styles from './ApiKeysPage.module.scss';
|
import styles from './ApiKeysPage.module.scss';
|
||||||
|
|
||||||
export function ApiKeysPage() {
|
export function ApiKeysPage() {
|
||||||
@@ -83,6 +84,10 @@ export function ApiKeysPage() {
|
|||||||
showNotification(`${t('notification.please_enter')} ${t('notification.api_key')}`, 'error');
|
showNotification(`${t('notification.please_enter')} ${t('notification.api_key')}`, 'error');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!isValidApiKeyCharset(trimmed)) {
|
||||||
|
showNotification(t('notification.api_key_invalid_chars'), 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const isEdit = editingIndex !== null;
|
const isEdit = editingIndex !== null;
|
||||||
const nextKeys = isEdit
|
const nextKeys = isEdit
|
||||||
|
|||||||
@@ -32,6 +32,28 @@
|
|||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.titleWrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: $spacing-sm;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countBadge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 24px;
|
||||||
|
min-width: 24px;
|
||||||
|
padding: 0 8px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--count-badge-text);
|
||||||
|
background-color: var(--count-badge-bg);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
.errorBox {
|
.errorBox {
|
||||||
padding: $spacing-md;
|
padding: $spacing-md;
|
||||||
background-color: rgba(239, 68, 68, 0.1);
|
background-color: rgba(239, 68, 68, 0.1);
|
||||||
@@ -134,19 +156,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.statsInfo {
|
|
||||||
padding: 8px 12px;
|
|
||||||
background-color: var(--bg-secondary);
|
|
||||||
border-radius: $radius-md;
|
|
||||||
font-size: 13px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
white-space: nowrap;
|
|
||||||
height: 38px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 卡片网格
|
// 卡片网格
|
||||||
.fileGrid {
|
.fileGrid {
|
||||||
display: grid;
|
display: grid;
|
||||||
@@ -742,6 +751,32 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// OAuth 模型映射表单
|
||||||
|
.mappingRow {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto 1fr auto auto;
|
||||||
|
align-items: center;
|
||||||
|
gap: $spacing-sm;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mappingSeparator {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mappingFork {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
// 详情弹窗
|
// 详情弹窗
|
||||||
.detailContent {
|
.detailContent {
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -133,14 +133,18 @@
|
|||||||
|
|
||||||
.editorWrapper {
|
.editorWrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex: 1;
|
flex: 0 0 auto;
|
||||||
min-height: 800px;
|
height: clamp(360px, 60vh, 920px);
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: $radius-lg;
|
border-radius: $radius-lg;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
--floating-controls-height: 0px;
|
--floating-controls-height: 0px;
|
||||||
|
|
||||||
|
@supports (height: 100dvh) {
|
||||||
|
height: clamp(360px, 60dvh, 920px);
|
||||||
|
}
|
||||||
|
|
||||||
// Floating search toolbar on top of the editor (but not covering content).
|
// Floating search toolbar on top of the editor (but not covering content).
|
||||||
.floatingControls {
|
.floatingControls {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -219,8 +223,8 @@
|
|||||||
.configCard {
|
.configCard {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 1120px;
|
flex: 1;
|
||||||
flex-shrink: 0;
|
min-height: 0;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -253,11 +257,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.configCard {
|
.configCard {
|
||||||
height: 880px;
|
|
||||||
padding: $spacing-md;
|
padding: $spacing-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editorWrapper {
|
|
||||||
min-height: 600px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useEffect, useMemo, useState } from 'react';
|
import React, { useEffect, useMemo, useState, useCallback } from 'react';
|
||||||
import { Navigate, useNavigate, useLocation } from 'react-router-dom';
|
import { Navigate, useNavigate, useLocation } from 'react-router-dom';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Button } from '@/components/ui/Button';
|
import { Button } from '@/components/ui/Button';
|
||||||
@@ -50,11 +50,6 @@ export function LoginPage() {
|
|||||||
init();
|
init();
|
||||||
}, [detectedBase, restoreSession, storedBase, storedKey, storedRememberPassword]);
|
}, [detectedBase, restoreSession, storedBase, storedKey, storedRememberPassword]);
|
||||||
|
|
||||||
if (isAuthenticated) {
|
|
||||||
const redirect = (location.state as any)?.from?.pathname || '/';
|
|
||||||
return <Navigate to={redirect} replace />;
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
if (!managementKey.trim()) {
|
if (!managementKey.trim()) {
|
||||||
setError(t('login.error_required'));
|
setError(t('login.error_required'));
|
||||||
@@ -81,6 +76,21 @@ export function LoginPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSubmitKeyDown = useCallback(
|
||||||
|
(event: React.KeyboardEvent) => {
|
||||||
|
if (event.key === 'Enter' && !loading) {
|
||||||
|
event.preventDefault();
|
||||||
|
handleSubmit();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[loading, handleSubmit]
|
||||||
|
);
|
||||||
|
|
||||||
|
if (isAuthenticated) {
|
||||||
|
const redirect = (location.state as any)?.from?.pathname || '/';
|
||||||
|
return <Navigate to={redirect} replace />;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="login-page">
|
<div className="login-page">
|
||||||
<div className="login-card">
|
<div className="login-card">
|
||||||
@@ -129,11 +139,13 @@ export function LoginPage() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
|
autoFocus
|
||||||
label={t('login.management_key_label')}
|
label={t('login.management_key_label')}
|
||||||
placeholder={t('login.management_key_placeholder')}
|
placeholder={t('login.management_key_placeholder')}
|
||||||
type={showKey ? 'text' : 'password'}
|
type={showKey ? 'text' : 'password'}
|
||||||
value={managementKey}
|
value={managementKey}
|
||||||
onChange={(e) => setManagementKey(e.target.value)}
|
onChange={(e) => setManagementKey(e.target.value)}
|
||||||
|
onKeyDown={handleSubmitKeyDown}
|
||||||
rightElement={
|
rightElement={
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ import {
|
|||||||
IconTrash2,
|
IconTrash2,
|
||||||
IconX,
|
IconX,
|
||||||
} from '@/components/ui/icons';
|
} from '@/components/ui/icons';
|
||||||
|
import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
|
||||||
import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
|
import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
|
||||||
import { logsApi } from '@/services/api/logs';
|
import { logsApi } from '@/services/api/logs';
|
||||||
import { MANAGEMENT_API_PREFIX } from '@/utils/constants';
|
import { MANAGEMENT_API_PREFIX } from '@/utils/constants';
|
||||||
@@ -474,6 +475,8 @@ export function LogsPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useHeaderRefresh(() => loadLogs(false));
|
||||||
|
|
||||||
const clearLogs = async () => {
|
const clearLogs = async () => {
|
||||||
if (!window.confirm(t('logs.clear_confirm'))) return;
|
if (!window.confirm(t('logs.clear_confirm'))) return;
|
||||||
try {
|
try {
|
||||||
|
|||||||
@@ -115,6 +115,13 @@
|
|||||||
margin-top: $spacing-sm;
|
margin-top: $spacing-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.geminiProjectField {
|
||||||
|
:global(.form-group) {
|
||||||
|
margin-top: $spacing-sm;
|
||||||
|
gap: $spacing-sm;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.filePicker {
|
.filePicker {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -327,19 +327,21 @@ export function OAuthPage() {
|
|||||||
>
|
>
|
||||||
<div className="hint">{t(provider.hintKey)}</div>
|
<div className="hint">{t(provider.hintKey)}</div>
|
||||||
{provider.id === 'gemini-cli' && (
|
{provider.id === 'gemini-cli' && (
|
||||||
<Input
|
<div className={styles.geminiProjectField}>
|
||||||
label={t('auth_login.gemini_cli_project_id_label')}
|
<Input
|
||||||
hint={t('auth_login.gemini_cli_project_id_hint')}
|
label={t('auth_login.gemini_cli_project_id_label')}
|
||||||
value={state.projectId || ''}
|
hint={t('auth_login.gemini_cli_project_id_hint')}
|
||||||
error={state.projectIdError}
|
value={state.projectId || ''}
|
||||||
onChange={(e) =>
|
error={state.projectIdError}
|
||||||
updateProviderState(provider.id, {
|
onChange={(e) =>
|
||||||
projectId: e.target.value,
|
updateProviderState(provider.id, {
|
||||||
projectIdError: undefined
|
projectId: e.target.value,
|
||||||
})
|
projectIdError: undefined
|
||||||
}
|
})
|
||||||
placeholder={t('auth_login.gemini_cli_project_id_placeholder')}
|
}
|
||||||
/>
|
placeholder={t('auth_login.gemini_cli_project_id_placeholder')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
{state.url && (
|
{state.url && (
|
||||||
<div className={`connection-box ${styles.authUrlBox}`}>
|
<div className={`connection-box ${styles.authUrlBox}`}>
|
||||||
|
|||||||
@@ -30,6 +30,37 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
gap: $spacing-sm;
|
gap: $spacing-sm;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
:global(.btn-sm) {
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(svg) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.titleWrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: $spacing-sm;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countBadge {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 24px;
|
||||||
|
min-width: 24px;
|
||||||
|
padding: 0 8px;
|
||||||
|
border-radius: 999px;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--count-badge-text);
|
||||||
|
background-color: var(--count-badge-bg);
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.errorBox {
|
.errorBox {
|
||||||
@@ -76,11 +107,7 @@
|
|||||||
.geminiCliGrid {
|
.geminiCliGrid {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: $spacing-md;
|
gap: $spacing-md;
|
||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
|
||||||
|
|
||||||
@include tablet {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
|
|
||||||
@include mobile {
|
@include mobile {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
@@ -112,28 +139,28 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.viewModeToggle {
|
||||||
|
display: flex;
|
||||||
|
gap: $spacing-xs;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
.antigravityCard {
|
.antigravityCard {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(180deg,
|
||||||
180deg,
|
rgba(224, 247, 250, 0.12),
|
||||||
rgba(224, 247, 250, 0.12),
|
rgba(224, 247, 250, 0));
|
||||||
rgba(224, 247, 250, 0)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.codexCard {
|
.codexCard {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(180deg,
|
||||||
180deg,
|
rgba(255, 243, 224, 0.18),
|
||||||
rgba(255, 243, 224, 0.18),
|
rgba(255, 243, 224, 0));
|
||||||
rgba(255, 243, 224, 0)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.geminiCliCard {
|
.geminiCliCard {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(180deg,
|
||||||
180deg,
|
rgba(231, 239, 255, 0.2),
|
||||||
rgba(231, 239, 255, 0.2),
|
rgba(231, 239, 255, 0));
|
||||||
rgba(231, 239, 255, 0)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.quotaSection {
|
.quotaSection {
|
||||||
@@ -331,3 +358,32 @@
|
|||||||
background-color: var(--bg-secondary);
|
background-color: var(--bg-secondary);
|
||||||
border-radius: $radius-md;
|
border-radius: $radius-md;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.warningOverlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.warningModal {
|
||||||
|
background-color: var(--bg-primary);
|
||||||
|
border-radius: $radius-lg;
|
||||||
|
padding: $spacing-lg;
|
||||||
|
max-width: 400px;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: $shadow-lg;
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0 0 $spacing-md 0;
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -4,9 +4,9 @@
|
|||||||
|
|
||||||
import { useCallback, useEffect, useState } from 'react';
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Button } from '@/components/ui/Button';
|
import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
|
||||||
import { useAuthStore } from '@/stores';
|
import { useAuthStore } from '@/stores';
|
||||||
import { authFilesApi } from '@/services/api';
|
import { authFilesApi, configFileApi } from '@/services/api';
|
||||||
import {
|
import {
|
||||||
QuotaSection,
|
QuotaSection,
|
||||||
ANTIGRAVITY_CONFIG,
|
ANTIGRAVITY_CONFIG,
|
||||||
@@ -26,6 +26,15 @@ export function QuotaPage() {
|
|||||||
|
|
||||||
const disableControls = connectionStatus !== 'connected';
|
const disableControls = connectionStatus !== 'connected';
|
||||||
|
|
||||||
|
const loadConfig = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
await configFileApi.fetchConfigYaml();
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const errorMessage = err instanceof Error ? err.message : t('notification.refresh_failed');
|
||||||
|
setError((prev) => prev || errorMessage);
|
||||||
|
}
|
||||||
|
}, [t]);
|
||||||
|
|
||||||
const loadFiles = useCallback(async () => {
|
const loadFiles = useCallback(async () => {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError('');
|
setError('');
|
||||||
@@ -40,20 +49,22 @@ export function QuotaPage() {
|
|||||||
}
|
}
|
||||||
}, [t]);
|
}, [t]);
|
||||||
|
|
||||||
|
const handleHeaderRefresh = useCallback(async () => {
|
||||||
|
await Promise.all([loadConfig(), loadFiles()]);
|
||||||
|
}, [loadConfig, loadFiles]);
|
||||||
|
|
||||||
|
useHeaderRefresh(handleHeaderRefresh);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
loadFiles();
|
loadFiles();
|
||||||
}, [loadFiles]);
|
loadConfig();
|
||||||
|
}, [loadFiles, loadConfig]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<div className={styles.pageHeader}>
|
<div className={styles.pageHeader}>
|
||||||
<h1 className={styles.pageTitle}>{t('quota_management.title')}</h1>
|
<h1 className={styles.pageTitle}>{t('quota_management.title')}</h1>
|
||||||
<p className={styles.description}>{t('quota_management.description')}</p>
|
<p className={styles.description}>{t('quota_management.description')}</p>
|
||||||
<div className={styles.headerActions}>
|
|
||||||
<Button variant="secondary" size="sm" onClick={loadFiles} disabled={loading}>
|
|
||||||
{t('quota_management.refresh_files')}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{error && <div className={styles.errorBox}>{error}</div>}
|
{error && <div className={styles.errorBox}>{error}</div>}
|
||||||
|
|||||||
@@ -122,6 +122,33 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.retryRowAligned {
|
||||||
|
align-items: flex-start;
|
||||||
|
|
||||||
|
.retryButton {
|
||||||
|
margin-top: calc(1.5em + #{$spacing-xs});
|
||||||
|
}
|
||||||
|
|
||||||
|
@include mobile {
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
.retryButton {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.retryRowInputGrow {
|
||||||
|
:global(.form-group) {
|
||||||
|
flex: 1 1 0;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.retryInput {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.retryInput {
|
.retryInput {
|
||||||
width: 140px;
|
width: 140px;
|
||||||
|
|
||||||
|
|||||||
@@ -13,6 +13,9 @@ type PendingKey =
|
|||||||
| 'debug'
|
| 'debug'
|
||||||
| 'proxy'
|
| 'proxy'
|
||||||
| 'retry'
|
| 'retry'
|
||||||
|
| 'logsMaxSize'
|
||||||
|
| 'forceModelPrefix'
|
||||||
|
| 'routingStrategy'
|
||||||
| 'switchProject'
|
| 'switchProject'
|
||||||
| 'switchPreview'
|
| 'switchPreview'
|
||||||
| 'usage'
|
| 'usage'
|
||||||
@@ -31,6 +34,8 @@ export function SettingsPage() {
|
|||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [proxyValue, setProxyValue] = useState('');
|
const [proxyValue, setProxyValue] = useState('');
|
||||||
const [retryValue, setRetryValue] = useState(0);
|
const [retryValue, setRetryValue] = useState(0);
|
||||||
|
const [logsMaxTotalSizeMb, setLogsMaxTotalSizeMb] = useState(0);
|
||||||
|
const [routingStrategy, setRoutingStrategy] = useState('round-robin');
|
||||||
const [pending, setPending] = useState<Record<PendingKey, boolean>>({} as Record<PendingKey, boolean>);
|
const [pending, setPending] = useState<Record<PendingKey, boolean>>({} as Record<PendingKey, boolean>);
|
||||||
const [error, setError] = useState('');
|
const [error, setError] = useState('');
|
||||||
|
|
||||||
@@ -41,9 +46,34 @@ export function SettingsPage() {
|
|||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError('');
|
setError('');
|
||||||
try {
|
try {
|
||||||
const data = (await fetchConfig()) as Config;
|
const [configResult, logsResult, prefixResult, routingResult] = await Promise.allSettled([
|
||||||
|
fetchConfig(),
|
||||||
|
configApi.getLogsMaxTotalSizeMb(),
|
||||||
|
configApi.getForceModelPrefix(),
|
||||||
|
configApi.getRoutingStrategy(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
if (configResult.status !== 'fulfilled') {
|
||||||
|
throw configResult.reason;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = configResult.value as Config;
|
||||||
setProxyValue(data?.proxyUrl ?? '');
|
setProxyValue(data?.proxyUrl ?? '');
|
||||||
setRetryValue(typeof data?.requestRetry === 'number' ? data.requestRetry : 0);
|
setRetryValue(typeof data?.requestRetry === 'number' ? data.requestRetry : 0);
|
||||||
|
|
||||||
|
if (logsResult.status === 'fulfilled' && Number.isFinite(logsResult.value)) {
|
||||||
|
setLogsMaxTotalSizeMb(Math.max(0, Number(logsResult.value)));
|
||||||
|
updateConfigValue('logs-max-total-size-mb', Math.max(0, Number(logsResult.value)));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (prefixResult.status === 'fulfilled') {
|
||||||
|
updateConfigValue('force-model-prefix', Boolean(prefixResult.value));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (routingResult.status === 'fulfilled' && routingResult.value) {
|
||||||
|
setRoutingStrategy(String(routingResult.value));
|
||||||
|
updateConfigValue('routing/strategy', String(routingResult.value));
|
||||||
|
}
|
||||||
} catch (err: any) {
|
} catch (err: any) {
|
||||||
setError(err?.message || t('notification.refresh_failed'));
|
setError(err?.message || t('notification.refresh_failed'));
|
||||||
} finally {
|
} finally {
|
||||||
@@ -52,7 +82,7 @@ export function SettingsPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
load();
|
load();
|
||||||
}, [fetchConfig, t]);
|
}, [fetchConfig, t, updateConfigValue]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (config) {
|
if (config) {
|
||||||
@@ -60,8 +90,14 @@ export function SettingsPage() {
|
|||||||
if (typeof config.requestRetry === 'number') {
|
if (typeof config.requestRetry === 'number') {
|
||||||
setRetryValue(config.requestRetry);
|
setRetryValue(config.requestRetry);
|
||||||
}
|
}
|
||||||
|
if (typeof config.logsMaxTotalSizeMb === 'number') {
|
||||||
|
setLogsMaxTotalSizeMb(config.logsMaxTotalSizeMb);
|
||||||
|
}
|
||||||
|
if (config.routingStrategy) {
|
||||||
|
setRoutingStrategy(config.routingStrategy);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, [config?.proxyUrl, config?.requestRetry]);
|
}, [config?.proxyUrl, config?.requestRetry, config?.logsMaxTotalSizeMb, config?.routingStrategy]);
|
||||||
|
|
||||||
const setPendingFlag = (key: PendingKey, value: boolean) => {
|
const setPendingFlag = (key: PendingKey, value: boolean) => {
|
||||||
setPending((prev) => ({ ...prev, [key]: value }));
|
setPending((prev) => ({ ...prev, [key]: value }));
|
||||||
@@ -69,7 +105,7 @@ export function SettingsPage() {
|
|||||||
|
|
||||||
const toggleSetting = async (
|
const toggleSetting = async (
|
||||||
section: PendingKey,
|
section: PendingKey,
|
||||||
rawKey: 'debug' | 'usage-statistics-enabled' | 'logging-to-file' | 'ws-auth',
|
rawKey: 'debug' | 'usage-statistics-enabled' | 'logging-to-file' | 'ws-auth' | 'force-model-prefix',
|
||||||
value: boolean,
|
value: boolean,
|
||||||
updater: (val: boolean) => Promise<any>,
|
updater: (val: boolean) => Promise<any>,
|
||||||
successMessage: string
|
successMessage: string
|
||||||
@@ -84,6 +120,8 @@ export function SettingsPage() {
|
|||||||
return config?.loggingToFile ?? false;
|
return config?.loggingToFile ?? false;
|
||||||
case 'ws-auth':
|
case 'ws-auth':
|
||||||
return config?.wsAuth ?? false;
|
return config?.wsAuth ?? false;
|
||||||
|
case 'force-model-prefix':
|
||||||
|
return config?.forceModelPrefix ?? false;
|
||||||
default:
|
default:
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
@@ -162,6 +200,52 @@ export function SettingsPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleLogsMaxTotalSizeUpdate = async () => {
|
||||||
|
const previous = config?.logsMaxTotalSizeMb ?? 0;
|
||||||
|
const parsed = Number(logsMaxTotalSizeMb);
|
||||||
|
if (!Number.isFinite(parsed) || parsed < 0) {
|
||||||
|
showNotification(t('login.error_invalid'), 'error');
|
||||||
|
setLogsMaxTotalSizeMb(previous);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const normalized = Math.max(0, parsed);
|
||||||
|
setPendingFlag('logsMaxSize', true);
|
||||||
|
updateConfigValue('logs-max-total-size-mb', normalized);
|
||||||
|
try {
|
||||||
|
await configApi.updateLogsMaxTotalSizeMb(normalized);
|
||||||
|
clearCache('logs-max-total-size-mb');
|
||||||
|
showNotification(t('notification.logs_max_total_size_updated'), 'success');
|
||||||
|
} catch (err: any) {
|
||||||
|
setLogsMaxTotalSizeMb(previous);
|
||||||
|
updateConfigValue('logs-max-total-size-mb', previous);
|
||||||
|
showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
|
||||||
|
} finally {
|
||||||
|
setPendingFlag('logsMaxSize', false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRoutingStrategyUpdate = async () => {
|
||||||
|
const strategy = routingStrategy.trim();
|
||||||
|
if (!strategy) {
|
||||||
|
showNotification(t('login.error_invalid'), 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const previous = config?.routingStrategy ?? 'round-robin';
|
||||||
|
setPendingFlag('routingStrategy', true);
|
||||||
|
updateConfigValue('routing/strategy', strategy);
|
||||||
|
try {
|
||||||
|
await configApi.updateRoutingStrategy(strategy);
|
||||||
|
clearCache('routing/strategy');
|
||||||
|
showNotification(t('notification.routing_strategy_updated'), 'success');
|
||||||
|
} catch (err: any) {
|
||||||
|
setRoutingStrategy(previous);
|
||||||
|
updateConfigValue('routing/strategy', previous);
|
||||||
|
showNotification(`${t('notification.update_failed')}: ${err?.message || ''}`, 'error');
|
||||||
|
} finally {
|
||||||
|
setPendingFlag('routingStrategy', false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const quotaSwitchProject = config?.quotaExceeded?.switchProject ?? false;
|
const quotaSwitchProject = config?.quotaExceeded?.switchProject ?? false;
|
||||||
const quotaSwitchPreview = config?.quotaExceeded?.switchPreviewModel ?? false;
|
const quotaSwitchPreview = config?.quotaExceeded?.switchPreviewModel ?? false;
|
||||||
|
|
||||||
@@ -171,63 +255,78 @@ export function SettingsPage() {
|
|||||||
|
|
||||||
<div className={styles.grid}>
|
<div className={styles.grid}>
|
||||||
<Card>
|
<Card>
|
||||||
{error && <div className="error-box">{error}</div>}
|
{error && <div className="error-box">{error}</div>}
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
<ToggleSwitch
|
<ToggleSwitch
|
||||||
label={t('basic_settings.debug_enable')}
|
label={t('basic_settings.debug_enable')}
|
||||||
checked={config?.debug ?? false}
|
checked={config?.debug ?? false}
|
||||||
disabled={disableControls || pending.debug || loading}
|
disabled={disableControls || pending.debug || loading}
|
||||||
onChange={(value) =>
|
onChange={(value) =>
|
||||||
toggleSetting('debug', 'debug', value, configApi.updateDebug, t('notification.debug_updated'))
|
toggleSetting('debug', 'debug', value, configApi.updateDebug, t('notification.debug_updated'))
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ToggleSwitch
|
<ToggleSwitch
|
||||||
label={t('basic_settings.usage_statistics_enable')}
|
label={t('basic_settings.usage_statistics_enable')}
|
||||||
checked={config?.usageStatisticsEnabled ?? false}
|
checked={config?.usageStatisticsEnabled ?? false}
|
||||||
disabled={disableControls || pending.usage || loading}
|
disabled={disableControls || pending.usage || loading}
|
||||||
onChange={(value) =>
|
onChange={(value) =>
|
||||||
toggleSetting(
|
toggleSetting(
|
||||||
'usage',
|
'usage',
|
||||||
'usage-statistics-enabled',
|
'usage-statistics-enabled',
|
||||||
value,
|
value,
|
||||||
configApi.updateUsageStatistics,
|
configApi.updateUsageStatistics,
|
||||||
t('notification.usage_statistics_updated')
|
t('notification.usage_statistics_updated')
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ToggleSwitch
|
<ToggleSwitch
|
||||||
label={t('basic_settings.logging_to_file_enable')}
|
label={t('basic_settings.logging_to_file_enable')}
|
||||||
checked={config?.loggingToFile ?? false}
|
checked={config?.loggingToFile ?? false}
|
||||||
disabled={disableControls || pending.loggingToFile || loading}
|
disabled={disableControls || pending.loggingToFile || loading}
|
||||||
onChange={(value) =>
|
onChange={(value) =>
|
||||||
toggleSetting(
|
toggleSetting(
|
||||||
'loggingToFile',
|
'loggingToFile',
|
||||||
'logging-to-file',
|
'logging-to-file',
|
||||||
value,
|
value,
|
||||||
configApi.updateLoggingToFile,
|
configApi.updateLoggingToFile,
|
||||||
t('notification.logging_to_file_updated')
|
t('notification.logging_to_file_updated')
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ToggleSwitch
|
<ToggleSwitch
|
||||||
label={t('basic_settings.ws_auth_enable')}
|
label={t('basic_settings.ws_auth_enable')}
|
||||||
checked={config?.wsAuth ?? false}
|
checked={config?.wsAuth ?? false}
|
||||||
disabled={disableControls || pending.wsAuth || loading}
|
disabled={disableControls || pending.wsAuth || loading}
|
||||||
onChange={(value) =>
|
onChange={(value) =>
|
||||||
toggleSetting(
|
toggleSetting(
|
||||||
'wsAuth',
|
'wsAuth',
|
||||||
'ws-auth',
|
'ws-auth',
|
||||||
value,
|
value,
|
||||||
configApi.updateWsAuth,
|
configApi.updateWsAuth,
|
||||||
t('notification.ws_auth_updated')
|
t('notification.ws_auth_updated')
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
</Card>
|
<ToggleSwitch
|
||||||
|
label={t('basic_settings.force_model_prefix_enable')}
|
||||||
|
checked={config?.forceModelPrefix ?? false}
|
||||||
|
disabled={disableControls || pending.forceModelPrefix || loading}
|
||||||
|
onChange={(value) =>
|
||||||
|
toggleSetting(
|
||||||
|
'forceModelPrefix',
|
||||||
|
'force-model-prefix',
|
||||||
|
value,
|
||||||
|
configApi.updateForceModelPrefix,
|
||||||
|
t('notification.force_model_prefix_updated')
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card title={t('basic_settings.proxy_title')}>
|
<Card title={t('basic_settings.proxy_title')}>
|
||||||
<Input
|
<Input
|
||||||
@@ -271,6 +370,57 @@ export function SettingsPage() {
|
|||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
|
<Card title={t('basic_settings.logs_max_total_size_title')}>
|
||||||
|
<div className={`${styles.retryRow} ${styles.retryRowAligned} ${styles.retryRowInputGrow}`}>
|
||||||
|
<Input
|
||||||
|
label={t('basic_settings.logs_max_total_size_label')}
|
||||||
|
hint={t('basic_settings.logs_max_total_size_hint')}
|
||||||
|
type="number"
|
||||||
|
inputMode="numeric"
|
||||||
|
min={0}
|
||||||
|
step={1}
|
||||||
|
value={logsMaxTotalSizeMb}
|
||||||
|
onChange={(e) => setLogsMaxTotalSizeMb(Number(e.target.value))}
|
||||||
|
disabled={disableControls || loading}
|
||||||
|
className={styles.retryInput}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
className={styles.retryButton}
|
||||||
|
onClick={handleLogsMaxTotalSizeUpdate}
|
||||||
|
loading={pending.logsMaxSize}
|
||||||
|
disabled={disableControls || loading}
|
||||||
|
>
|
||||||
|
{t('basic_settings.logs_max_total_size_update')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card title={t('basic_settings.routing_title')}>
|
||||||
|
<div className={`${styles.retryRow} ${styles.retryRowAligned} ${styles.retryRowInputGrow}`}>
|
||||||
|
<div className="form-group">
|
||||||
|
<label>{t('basic_settings.routing_strategy_label')}</label>
|
||||||
|
<select
|
||||||
|
className="input"
|
||||||
|
value={routingStrategy}
|
||||||
|
onChange={(e) => setRoutingStrategy(e.target.value)}
|
||||||
|
disabled={disableControls || loading}
|
||||||
|
>
|
||||||
|
<option value="round-robin">{t('basic_settings.routing_strategy_round_robin')}</option>
|
||||||
|
<option value="fill-first">{t('basic_settings.routing_strategy_fill_first')}</option>
|
||||||
|
</select>
|
||||||
|
<div className="hint">{t('basic_settings.routing_strategy_hint')}</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
className={styles.retryButton}
|
||||||
|
onClick={handleRoutingStrategyUpdate}
|
||||||
|
loading={pending.routingStrategy}
|
||||||
|
disabled={disableControls || loading}
|
||||||
|
>
|
||||||
|
{t('basic_settings.routing_strategy_update')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
<Card title={t('basic_settings.quota_title')}>
|
<Card title={t('basic_settings.quota_title')}>
|
||||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||||
<ToggleSwitch
|
<ToggleSwitch
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ import {
|
|||||||
import { Button } from '@/components/ui/Button';
|
import { Button } from '@/components/ui/Button';
|
||||||
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
|
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
|
||||||
import { useMediaQuery } from '@/hooks/useMediaQuery';
|
import { useMediaQuery } from '@/hooks/useMediaQuery';
|
||||||
|
import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
|
||||||
import { useThemeStore } from '@/stores';
|
import { useThemeStore } from '@/stores';
|
||||||
import {
|
import {
|
||||||
StatCards,
|
StatCards,
|
||||||
@@ -63,6 +64,8 @@ export function UsagePage() {
|
|||||||
importing
|
importing
|
||||||
} = useUsageData();
|
} = useUsageData();
|
||||||
|
|
||||||
|
useHeaderRefresh(loadUsage);
|
||||||
|
|
||||||
// Chart lines state
|
// Chart lines state
|
||||||
const [chartLines, setChartLines] = useState<string[]>(['all']);
|
const [chartLines, setChartLines] = useState<string[]>(['all']);
|
||||||
const MAX_CHART_LINES = 9;
|
const MAX_CHART_LINES = 9;
|
||||||
|
|||||||
@@ -4,6 +4,44 @@
|
|||||||
|
|
||||||
import { apiClient } from './client';
|
import { apiClient } from './client';
|
||||||
import type { AuthFilesResponse } from '@/types/authFile';
|
import type { AuthFilesResponse } from '@/types/authFile';
|
||||||
|
import type { OAuthModelMappingEntry } from '@/types';
|
||||||
|
|
||||||
|
const normalizeOauthExcludedModels = (payload: unknown): Record<string, string[]> => {
|
||||||
|
if (!payload || typeof payload !== 'object') return {};
|
||||||
|
|
||||||
|
const source = (payload as any)['oauth-excluded-models'] ?? (payload as any).items ?? payload;
|
||||||
|
if (!source || typeof source !== 'object') return {};
|
||||||
|
|
||||||
|
const result: Record<string, string[]> = {};
|
||||||
|
|
||||||
|
Object.entries(source as Record<string, unknown>).forEach(([provider, models]) => {
|
||||||
|
const key = String(provider ?? '')
|
||||||
|
.trim()
|
||||||
|
.toLowerCase();
|
||||||
|
if (!key) return;
|
||||||
|
|
||||||
|
const rawList = Array.isArray(models)
|
||||||
|
? models
|
||||||
|
: typeof models === 'string'
|
||||||
|
? models.split(/[\n,]+/)
|
||||||
|
: [];
|
||||||
|
|
||||||
|
const seen = new Set<string>();
|
||||||
|
const normalized: string[] = [];
|
||||||
|
rawList.forEach((item) => {
|
||||||
|
const trimmed = String(item ?? '').trim();
|
||||||
|
if (!trimmed) return;
|
||||||
|
const modelKey = trimmed.toLowerCase();
|
||||||
|
if (seen.has(modelKey)) return;
|
||||||
|
seen.add(modelKey);
|
||||||
|
normalized.push(trimmed);
|
||||||
|
});
|
||||||
|
|
||||||
|
result[key] = normalized;
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
export const authFilesApi = {
|
export const authFilesApi = {
|
||||||
list: () => apiClient.get<AuthFilesResponse>('/auth-files'),
|
list: () => apiClient.get<AuthFilesResponse>('/auth-files'),
|
||||||
@@ -18,11 +56,18 @@ export const authFilesApi = {
|
|||||||
|
|
||||||
deleteAll: () => apiClient.delete('/auth-files', { params: { all: true } }),
|
deleteAll: () => apiClient.delete('/auth-files', { params: { all: true } }),
|
||||||
|
|
||||||
|
downloadText: async (name: string): Promise<string> => {
|
||||||
|
const response = await apiClient.getRaw(`/auth-files/download?name=${encodeURIComponent(name)}`, {
|
||||||
|
responseType: 'blob'
|
||||||
|
});
|
||||||
|
const blob = response.data as Blob;
|
||||||
|
return blob.text();
|
||||||
|
},
|
||||||
|
|
||||||
// OAuth 排除模型
|
// OAuth 排除模型
|
||||||
async getOauthExcludedModels(): Promise<Record<string, string[]>> {
|
async getOauthExcludedModels(): Promise<Record<string, string[]>> {
|
||||||
const data = await apiClient.get('/oauth-excluded-models');
|
const data = await apiClient.get('/oauth-excluded-models');
|
||||||
const payload = (data && (data['oauth-excluded-models'] ?? data.items ?? data)) as any;
|
return normalizeOauthExcludedModels(data);
|
||||||
return payload && typeof payload === 'object' ? payload : {};
|
|
||||||
},
|
},
|
||||||
|
|
||||||
saveOauthExcludedModels: (provider: string, models: string[]) =>
|
saveOauthExcludedModels: (provider: string, models: string[]) =>
|
||||||
@@ -31,6 +76,40 @@ export const authFilesApi = {
|
|||||||
deleteOauthExcludedEntry: (provider: string) =>
|
deleteOauthExcludedEntry: (provider: string) =>
|
||||||
apiClient.delete(`/oauth-excluded-models?provider=${encodeURIComponent(provider)}`),
|
apiClient.delete(`/oauth-excluded-models?provider=${encodeURIComponent(provider)}`),
|
||||||
|
|
||||||
|
replaceOauthExcludedModels: (map: Record<string, string[]>) =>
|
||||||
|
apiClient.put('/oauth-excluded-models', normalizeOauthExcludedModels(map)),
|
||||||
|
|
||||||
|
// OAuth 模型映射
|
||||||
|
async getOauthModelMappings(): Promise<Record<string, OAuthModelMappingEntry[]>> {
|
||||||
|
const data = await apiClient.get('/oauth-model-alias');
|
||||||
|
const payload = (data && (data['oauth-model-alias'] ?? data.items ?? data)) as any;
|
||||||
|
if (!payload || typeof payload !== 'object') return {};
|
||||||
|
const result: Record<string, OAuthModelMappingEntry[]> = {};
|
||||||
|
Object.entries(payload).forEach(([channel, mappings]) => {
|
||||||
|
if (!Array.isArray(mappings)) return;
|
||||||
|
const normalized = mappings
|
||||||
|
.map((item) => {
|
||||||
|
if (!item || typeof item !== 'object') return null;
|
||||||
|
const name = String(item.name ?? item.id ?? item.model ?? '').trim();
|
||||||
|
const alias = String(item.alias ?? '').trim();
|
||||||
|
if (!name || !alias) return null;
|
||||||
|
const fork = item.fork === true;
|
||||||
|
return fork ? { name, alias, fork } : { name, alias };
|
||||||
|
})
|
||||||
|
.filter(Boolean) as OAuthModelMappingEntry[];
|
||||||
|
if (normalized.length) {
|
||||||
|
result[channel] = normalized;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
saveOauthModelMappings: (channel: string, mappings: OAuthModelMappingEntry[]) =>
|
||||||
|
apiClient.patch('/oauth-model-alias', { channel, mappings }),
|
||||||
|
|
||||||
|
deleteOauthModelMappings: (channel: string) =>
|
||||||
|
apiClient.delete(`/oauth-model-alias?channel=${encodeURIComponent(channel)}`),
|
||||||
|
|
||||||
// 获取认证凭证支持的模型
|
// 获取认证凭证支持的模型
|
||||||
async getModelsForAuthFile(name: string): Promise<{ id: string; display_name?: string; type?: string; owned_by?: string }[]> {
|
async getModelsForAuthFile(name: string): Promise<{ id: string; display_name?: string; type?: string; owned_by?: string }[]> {
|
||||||
const data = await apiClient.get(`/auth-files/models?name=${encodeURIComponent(name)}`);
|
const data = await apiClient.get(`/auth-files/models?name=${encodeURIComponent(name)}`);
|
||||||
|
|||||||
@@ -68,8 +68,48 @@ export const configApi = {
|
|||||||
*/
|
*/
|
||||||
updateLoggingToFile: (enabled: boolean) => apiClient.put('/logging-to-file', { value: enabled }),
|
updateLoggingToFile: (enabled: boolean) => apiClient.put('/logging-to-file', { value: enabled }),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取日志总大小上限(MB)
|
||||||
|
*/
|
||||||
|
async getLogsMaxTotalSizeMb(): Promise<number> {
|
||||||
|
const data = await apiClient.get('/logs-max-total-size-mb');
|
||||||
|
return data?.['logs-max-total-size-mb'] ?? data?.logsMaxTotalSizeMb ?? 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新日志总大小上限(MB)
|
||||||
|
*/
|
||||||
|
updateLogsMaxTotalSizeMb: (value: number) =>
|
||||||
|
apiClient.put('/logs-max-total-size-mb', { value }),
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* WebSocket 鉴权开关
|
* WebSocket 鉴权开关
|
||||||
*/
|
*/
|
||||||
updateWsAuth: (enabled: boolean) => apiClient.put('/ws-auth', { value: enabled }),
|
updateWsAuth: (enabled: boolean) => apiClient.put('/ws-auth', { value: enabled }),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取强制模型前缀开关
|
||||||
|
*/
|
||||||
|
async getForceModelPrefix(): Promise<boolean> {
|
||||||
|
const data = await apiClient.get('/force-model-prefix');
|
||||||
|
return data?.['force-model-prefix'] ?? data?.forceModelPrefix ?? false;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新强制模型前缀开关
|
||||||
|
*/
|
||||||
|
updateForceModelPrefix: (enabled: boolean) => apiClient.put('/force-model-prefix', { value: enabled }),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取路由策略
|
||||||
|
*/
|
||||||
|
async getRoutingStrategy(): Promise<string> {
|
||||||
|
const data = await apiClient.get('/routing/strategy');
|
||||||
|
return data?.strategy ?? data?.['routing-strategy'] ?? data?.routingStrategy ?? 'round-robin';
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更新路由策略
|
||||||
|
*/
|
||||||
|
updateRoutingStrategy: (strategy: string) => apiClient.put('/routing/strategy', { value: strategy }),
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -61,6 +61,30 @@ const serializeProviderKey = (config: ProviderKeyConfig) => {
|
|||||||
return payload;
|
return payload;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const serializeVertexModelAliases = (models?: ModelAlias[]) =>
|
||||||
|
Array.isArray(models)
|
||||||
|
? models
|
||||||
|
.map((model) => {
|
||||||
|
const name = typeof model?.name === 'string' ? model.name.trim() : '';
|
||||||
|
const alias = typeof model?.alias === 'string' ? model.alias.trim() : '';
|
||||||
|
if (!name || !alias) return null;
|
||||||
|
return { name, alias };
|
||||||
|
})
|
||||||
|
.filter(Boolean)
|
||||||
|
: undefined;
|
||||||
|
|
||||||
|
const serializeVertexKey = (config: ProviderKeyConfig) => {
|
||||||
|
const payload: Record<string, any> = { 'api-key': config.apiKey };
|
||||||
|
if (config.prefix?.trim()) payload.prefix = config.prefix.trim();
|
||||||
|
if (config.baseUrl) payload['base-url'] = config.baseUrl;
|
||||||
|
if (config.proxyUrl) payload['proxy-url'] = config.proxyUrl;
|
||||||
|
const headers = serializeHeaders(config.headers);
|
||||||
|
if (headers) payload.headers = headers;
|
||||||
|
const models = serializeVertexModelAliases(config.models);
|
||||||
|
if (models && models.length) payload.models = models;
|
||||||
|
return payload;
|
||||||
|
};
|
||||||
|
|
||||||
const serializeGeminiKey = (config: GeminiKeyConfig) => {
|
const serializeGeminiKey = (config: GeminiKeyConfig) => {
|
||||||
const payload: Record<string, any> = { 'api-key': config.apiKey };
|
const payload: Record<string, any> = { 'api-key': config.apiKey };
|
||||||
if (config.prefix?.trim()) payload.prefix = config.prefix.trim();
|
if (config.prefix?.trim()) payload.prefix = config.prefix.trim();
|
||||||
@@ -140,6 +164,22 @@ export const providersApi = {
|
|||||||
deleteClaudeConfig: (apiKey: string) =>
|
deleteClaudeConfig: (apiKey: string) =>
|
||||||
apiClient.delete(`/claude-api-key?api-key=${encodeURIComponent(apiKey)}`),
|
apiClient.delete(`/claude-api-key?api-key=${encodeURIComponent(apiKey)}`),
|
||||||
|
|
||||||
|
async getVertexConfigs(): Promise<ProviderKeyConfig[]> {
|
||||||
|
const data = await apiClient.get('/vertex-api-key');
|
||||||
|
const list = (data && (data['vertex-api-key'] ?? data.items ?? data)) as any;
|
||||||
|
if (!Array.isArray(list)) return [];
|
||||||
|
return list.map((item) => normalizeProviderKeyConfig(item)).filter(Boolean) as ProviderKeyConfig[];
|
||||||
|
},
|
||||||
|
|
||||||
|
saveVertexConfigs: (configs: ProviderKeyConfig[]) =>
|
||||||
|
apiClient.put('/vertex-api-key', configs.map((item) => serializeVertexKey(item))),
|
||||||
|
|
||||||
|
updateVertexConfig: (index: number, value: ProviderKeyConfig) =>
|
||||||
|
apiClient.patch('/vertex-api-key', { index, value: serializeVertexKey(value) }),
|
||||||
|
|
||||||
|
deleteVertexConfig: (apiKey: string) =>
|
||||||
|
apiClient.delete(`/vertex-api-key?api-key=${encodeURIComponent(apiKey)}`),
|
||||||
|
|
||||||
async getOpenAIProviders(): Promise<OpenAIProviderConfig[]> {
|
async getOpenAIProviders(): Promise<OpenAIProviderConfig[]> {
|
||||||
const data = await apiClient.get('/openai-compatibility');
|
const data = await apiClient.get('/openai-compatibility');
|
||||||
const list = (data && (data['openai-compatibility'] ?? data.items ?? data)) as any;
|
const list = (data && (data['openai-compatibility'] ?? data.items ?? data)) as any;
|
||||||
|
|||||||
@@ -258,7 +258,15 @@ export const normalizeConfigResponse = (raw: any): Config => {
|
|||||||
config.usageStatisticsEnabled = raw['usage-statistics-enabled'] ?? raw.usageStatisticsEnabled;
|
config.usageStatisticsEnabled = raw['usage-statistics-enabled'] ?? raw.usageStatisticsEnabled;
|
||||||
config.requestLog = raw['request-log'] ?? raw.requestLog;
|
config.requestLog = raw['request-log'] ?? raw.requestLog;
|
||||||
config.loggingToFile = raw['logging-to-file'] ?? raw.loggingToFile;
|
config.loggingToFile = raw['logging-to-file'] ?? raw.loggingToFile;
|
||||||
|
config.logsMaxTotalSizeMb = raw['logs-max-total-size-mb'] ?? raw.logsMaxTotalSizeMb;
|
||||||
config.wsAuth = raw['ws-auth'] ?? raw.wsAuth;
|
config.wsAuth = raw['ws-auth'] ?? raw.wsAuth;
|
||||||
|
config.forceModelPrefix = raw['force-model-prefix'] ?? raw.forceModelPrefix;
|
||||||
|
const routing = raw.routing;
|
||||||
|
if (routing && typeof routing === 'object') {
|
||||||
|
config.routingStrategy = routing.strategy ?? routing['strategy'];
|
||||||
|
} else {
|
||||||
|
config.routingStrategy = raw['routing-strategy'] ?? raw.routingStrategy;
|
||||||
|
}
|
||||||
config.apiKeys = Array.isArray(raw['api-keys']) ? raw['api-keys'].slice() : raw.apiKeys;
|
config.apiKeys = Array.isArray(raw['api-keys']) ? raw['api-keys'].slice() : raw.apiKeys;
|
||||||
|
|
||||||
const geminiList = raw['gemini-api-key'] ?? raw.geminiApiKey ?? raw.geminiApiKeys;
|
const geminiList = raw['gemini-api-key'] ?? raw.geminiApiKey ?? raw.geminiApiKeys;
|
||||||
@@ -282,6 +290,13 @@ export const normalizeConfigResponse = (raw: any): Config => {
|
|||||||
.filter(Boolean) as ProviderKeyConfig[];
|
.filter(Boolean) as ProviderKeyConfig[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const vertexList = raw['vertex-api-key'] ?? raw.vertexApiKey ?? raw.vertexApiKeys;
|
||||||
|
if (Array.isArray(vertexList)) {
|
||||||
|
config.vertexApiKeys = vertexList
|
||||||
|
.map((item: any) => normalizeProviderKeyConfig(item))
|
||||||
|
.filter(Boolean) as ProviderKeyConfig[];
|
||||||
|
}
|
||||||
|
|
||||||
const openaiList = raw['openai-compatibility'] ?? raw.openaiCompatibility ?? raw.openAICompatibility;
|
const openaiList = raw['openai-compatibility'] ?? raw.openaiCompatibility ?? raw.openAICompatibility;
|
||||||
if (Array.isArray(openaiList)) {
|
if (Array.isArray(openaiList)) {
|
||||||
config.openaiCompatibility = openaiList
|
config.openaiCompatibility = openaiList
|
||||||
|
|||||||
@@ -38,12 +38,16 @@ const SECTION_KEYS: RawConfigSection[] = [
|
|||||||
'usage-statistics-enabled',
|
'usage-statistics-enabled',
|
||||||
'request-log',
|
'request-log',
|
||||||
'logging-to-file',
|
'logging-to-file',
|
||||||
|
'logs-max-total-size-mb',
|
||||||
'ws-auth',
|
'ws-auth',
|
||||||
|
'force-model-prefix',
|
||||||
|
'routing/strategy',
|
||||||
'api-keys',
|
'api-keys',
|
||||||
'ampcode',
|
'ampcode',
|
||||||
'gemini-api-key',
|
'gemini-api-key',
|
||||||
'codex-api-key',
|
'codex-api-key',
|
||||||
'claude-api-key',
|
'claude-api-key',
|
||||||
|
'vertex-api-key',
|
||||||
'openai-compatibility',
|
'openai-compatibility',
|
||||||
'oauth-excluded-models'
|
'oauth-excluded-models'
|
||||||
];
|
];
|
||||||
@@ -65,8 +69,14 @@ const extractSectionValue = (config: Config | null, section?: RawConfigSection)
|
|||||||
return config.requestLog;
|
return config.requestLog;
|
||||||
case 'logging-to-file':
|
case 'logging-to-file':
|
||||||
return config.loggingToFile;
|
return config.loggingToFile;
|
||||||
|
case 'logs-max-total-size-mb':
|
||||||
|
return config.logsMaxTotalSizeMb;
|
||||||
case 'ws-auth':
|
case 'ws-auth':
|
||||||
return config.wsAuth;
|
return config.wsAuth;
|
||||||
|
case 'force-model-prefix':
|
||||||
|
return config.forceModelPrefix;
|
||||||
|
case 'routing/strategy':
|
||||||
|
return config.routingStrategy;
|
||||||
case 'api-keys':
|
case 'api-keys':
|
||||||
return config.apiKeys;
|
return config.apiKeys;
|
||||||
case 'ampcode':
|
case 'ampcode':
|
||||||
@@ -77,6 +87,8 @@ const extractSectionValue = (config: Config | null, section?: RawConfigSection)
|
|||||||
return config.codexApiKeys;
|
return config.codexApiKeys;
|
||||||
case 'claude-api-key':
|
case 'claude-api-key':
|
||||||
return config.claudeApiKeys;
|
return config.claudeApiKeys;
|
||||||
|
case 'vertex-api-key':
|
||||||
|
return config.vertexApiKeys;
|
||||||
case 'openai-compatibility':
|
case 'openai-compatibility':
|
||||||
return config.openaiCompatibility;
|
return config.openaiCompatibility;
|
||||||
case 'oauth-excluded-models':
|
case 'oauth-excluded-models':
|
||||||
@@ -194,9 +206,18 @@ export const useConfigStore = create<ConfigState>((set, get) => ({
|
|||||||
case 'logging-to-file':
|
case 'logging-to-file':
|
||||||
nextConfig.loggingToFile = value;
|
nextConfig.loggingToFile = value;
|
||||||
break;
|
break;
|
||||||
|
case 'logs-max-total-size-mb':
|
||||||
|
nextConfig.logsMaxTotalSizeMb = value;
|
||||||
|
break;
|
||||||
case 'ws-auth':
|
case 'ws-auth':
|
||||||
nextConfig.wsAuth = value;
|
nextConfig.wsAuth = value;
|
||||||
break;
|
break;
|
||||||
|
case 'force-model-prefix':
|
||||||
|
nextConfig.forceModelPrefix = value;
|
||||||
|
break;
|
||||||
|
case 'routing/strategy':
|
||||||
|
nextConfig.routingStrategy = value;
|
||||||
|
break;
|
||||||
case 'api-keys':
|
case 'api-keys':
|
||||||
nextConfig.apiKeys = value;
|
nextConfig.apiKeys = value;
|
||||||
break;
|
break;
|
||||||
@@ -212,6 +233,9 @@ export const useConfigStore = create<ConfigState>((set, get) => ({
|
|||||||
case 'claude-api-key':
|
case 'claude-api-key':
|
||||||
nextConfig.claudeApiKeys = value;
|
nextConfig.claudeApiKeys = value;
|
||||||
break;
|
break;
|
||||||
|
case 'vertex-api-key':
|
||||||
|
nextConfig.vertexApiKeys = value;
|
||||||
|
break;
|
||||||
case 'openai-compatibility':
|
case 'openai-compatibility':
|
||||||
nextConfig.openaiCompatibility = value;
|
nextConfig.openaiCompatibility = value;
|
||||||
break;
|
break;
|
||||||
|
|||||||
@@ -32,6 +32,9 @@
|
|||||||
--failure-badge-text: #991b1b;
|
--failure-badge-text: #991b1b;
|
||||||
--failure-badge-border: #fca5a5;
|
--failure-badge-border: #fca5a5;
|
||||||
|
|
||||||
|
--count-badge-bg: rgba(59, 130, 246, 0.14);
|
||||||
|
--count-badge-text: var(--primary-active);
|
||||||
|
|
||||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
||||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||||
}
|
}
|
||||||
@@ -66,6 +69,9 @@
|
|||||||
--failure-badge-text: #fca5a5;
|
--failure-badge-text: #fca5a5;
|
||||||
--failure-badge-border: #dc2626;
|
--failure-badge-border: #dc2626;
|
||||||
|
|
||||||
|
--count-badge-bg: rgba(59, 130, 246, 0.25);
|
||||||
|
--count-badge-text: var(--primary-active);
|
||||||
|
|
||||||
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
|
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
|
||||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -19,12 +19,16 @@ export interface Config {
|
|||||||
usageStatisticsEnabled?: boolean;
|
usageStatisticsEnabled?: boolean;
|
||||||
requestLog?: boolean;
|
requestLog?: boolean;
|
||||||
loggingToFile?: boolean;
|
loggingToFile?: boolean;
|
||||||
|
logsMaxTotalSizeMb?: number;
|
||||||
wsAuth?: boolean;
|
wsAuth?: boolean;
|
||||||
|
forceModelPrefix?: boolean;
|
||||||
|
routingStrategy?: string;
|
||||||
apiKeys?: string[];
|
apiKeys?: string[];
|
||||||
ampcode?: AmpcodeConfig;
|
ampcode?: AmpcodeConfig;
|
||||||
geminiApiKeys?: GeminiKeyConfig[];
|
geminiApiKeys?: GeminiKeyConfig[];
|
||||||
codexApiKeys?: ProviderKeyConfig[];
|
codexApiKeys?: ProviderKeyConfig[];
|
||||||
claudeApiKeys?: ProviderKeyConfig[];
|
claudeApiKeys?: ProviderKeyConfig[];
|
||||||
|
vertexApiKeys?: ProviderKeyConfig[];
|
||||||
openaiCompatibility?: OpenAIProviderConfig[];
|
openaiCompatibility?: OpenAIProviderConfig[];
|
||||||
oauthExcludedModels?: Record<string, string[]>;
|
oauthExcludedModels?: Record<string, string[]>;
|
||||||
raw?: Record<string, any>;
|
raw?: Record<string, any>;
|
||||||
@@ -38,12 +42,16 @@ export type RawConfigSection =
|
|||||||
| 'usage-statistics-enabled'
|
| 'usage-statistics-enabled'
|
||||||
| 'request-log'
|
| 'request-log'
|
||||||
| 'logging-to-file'
|
| 'logging-to-file'
|
||||||
|
| 'logs-max-total-size-mb'
|
||||||
| 'ws-auth'
|
| 'ws-auth'
|
||||||
|
| 'force-model-prefix'
|
||||||
|
| 'routing/strategy'
|
||||||
| 'api-keys'
|
| 'api-keys'
|
||||||
| 'ampcode'
|
| 'ampcode'
|
||||||
| 'gemini-api-key'
|
| 'gemini-api-key'
|
||||||
| 'codex-api-key'
|
| 'codex-api-key'
|
||||||
| 'claude-api-key'
|
| 'claude-api-key'
|
||||||
|
| 'vertex-api-key'
|
||||||
| 'openai-compatibility'
|
| 'openai-compatibility'
|
||||||
| 'oauth-excluded-models';
|
| 'oauth-excluded-models';
|
||||||
|
|
||||||
|
|||||||
@@ -33,3 +33,12 @@ export interface OAuthConfig {
|
|||||||
export interface OAuthExcludedModels {
|
export interface OAuthExcludedModels {
|
||||||
models: string[];
|
models: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// OAuth 模型映射
|
||||||
|
export interface OAuthModelMappingEntry {
|
||||||
|
name: string;
|
||||||
|
alias: string;
|
||||||
|
fork?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type OAuthModelMappings = Record<string, OAuthModelMappingEntry[]>;
|
||||||
|
|||||||
@@ -4,16 +4,17 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 隐藏 API Key 中间部分
|
* 隐藏 API Key 中间部分,仅保留前后两位
|
||||||
*/
|
*/
|
||||||
export function maskApiKey(key: string, visibleChars: number = 4): string {
|
export function maskApiKey(key: string): string {
|
||||||
if (!key || key.length <= visibleChars * 2) {
|
if (!key) {
|
||||||
return key;
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const visibleChars = 2;
|
||||||
const start = key.slice(0, visibleChars);
|
const start = key.slice(0, visibleChars);
|
||||||
const end = key.slice(-visibleChars);
|
const end = key.slice(-visibleChars);
|
||||||
const maskedLength = Math.min(key.length - visibleChars * 2, 20);
|
const maskedLength = Math.max(key.length - visibleChars * 2, 1);
|
||||||
const masked = '*'.repeat(maskedLength);
|
const masked = '*'.repeat(maskedLength);
|
||||||
|
|
||||||
return `${start}${masked}${end}`;
|
return `${start}${masked}${end}`;
|
||||||
|
|||||||
@@ -638,6 +638,8 @@ export interface ChartDataset {
|
|||||||
data: number[];
|
data: number[];
|
||||||
borderColor: string;
|
borderColor: string;
|
||||||
backgroundColor: string | CanvasGradient | ((context: ScriptableContext<'line'>) => string | CanvasGradient);
|
backgroundColor: string | CanvasGradient | ((context: ScriptableContext<'line'>) => string | CanvasGradient);
|
||||||
|
pointBackgroundColor?: string;
|
||||||
|
pointBorderColor?: string;
|
||||||
fill: boolean;
|
fill: boolean;
|
||||||
tension: number;
|
tension: number;
|
||||||
}
|
}
|
||||||
@@ -743,6 +745,8 @@ export function buildChartData(
|
|||||||
backgroundColor: shouldFill
|
backgroundColor: shouldFill
|
||||||
? (ctx) => buildAreaGradient(ctx, style.borderColor, style.backgroundColor)
|
? (ctx) => buildAreaGradient(ctx, style.borderColor, style.backgroundColor)
|
||||||
: style.backgroundColor,
|
: style.backgroundColor,
|
||||||
|
pointBackgroundColor: style.borderColor,
|
||||||
|
pointBorderColor: style.borderColor,
|
||||||
fill: shouldFill,
|
fill: shouldFill,
|
||||||
tension: 0.35
|
tension: 0.35
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -35,6 +35,14 @@ export function isValidApiKey(key: string): boolean {
|
|||||||
return !/\s/.test(key);
|
return !/\s/.test(key);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 验证 API Key 字符集(仅允许 ASCII 可见字符)
|
||||||
|
*/
|
||||||
|
export function isValidApiKeyCharset(key: string): boolean {
|
||||||
|
if (!key) return false;
|
||||||
|
return /^[\x21-\x7E]+$/.test(key);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 验证 JSON 格式
|
* 验证 JSON 格式
|
||||||
*/
|
*/
|
||||||
|
|||||||
Reference in New Issue
Block a user