mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-03 03:10:50 +08:00
Compare commits
31 Commits
v1.2.15
...
8b3c4189f1
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8b3c4189f1 | ||
|
|
db5fb0d125 | ||
|
|
9515d88e3c | ||
|
|
2bf721974b | ||
|
|
0c53dcfa80 | ||
|
|
034c086e31 | ||
|
|
76e9eb4aa0 | ||
|
|
f22d392b21 | ||
|
|
2539710075 | ||
|
|
6bdc87aed6 | ||
|
|
268b92c59b | ||
|
|
c89bbd5098 | ||
|
|
2715f44a5e | ||
|
|
305ddef900 | ||
|
|
7e56d33bf0 | ||
|
|
80daf03fa6 | ||
|
|
883059b031 | ||
|
|
d077b5dd26 | ||
|
|
d79ccc480d | ||
|
|
7b0d6dc7e9 | ||
|
|
b8d7b8997c | ||
|
|
0bb34ca74b | ||
|
|
99c4fbc30d | ||
|
|
a44257edda | ||
|
|
ebb80df24a | ||
|
|
5165715d37 | ||
|
|
73ee6eb2f3 | ||
|
|
161d5d1e7f | ||
|
|
3cbd04b296 | ||
|
|
859f7f120c | ||
|
|
fea29f7318 |
29
package-lock.json
generated
29
package-lock.json
generated
@@ -71,6 +71,7 @@
|
|||||||
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/code-frame": "^7.27.1",
|
"@babel/code-frame": "^7.27.1",
|
||||||
"@babel/generator": "^7.28.5",
|
"@babel/generator": "^7.28.5",
|
||||||
@@ -465,6 +466,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.8.tgz",
|
"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.8.tgz",
|
||||||
"integrity": "sha512-XcE9fcnkHCbWkjeKyi0lllwXmBLtyYb5dt89dJyx23I9+LSh5vZDIuk7OLG4VM1lgrXZQcY6cxyZyk5WVPRv/A==",
|
"integrity": "sha512-XcE9fcnkHCbWkjeKyi0lllwXmBLtyYb5dt89dJyx23I9+LSh5vZDIuk7OLG4VM1lgrXZQcY6cxyZyk5WVPRv/A==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@codemirror/state": "^6.5.0",
|
"@codemirror/state": "^6.5.0",
|
||||||
"crelt": "^1.0.6",
|
"crelt": "^1.0.6",
|
||||||
@@ -1930,6 +1932,7 @@
|
|||||||
"integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
|
"integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
|
||||||
"devOptional": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"csstype": "^3.2.2"
|
"csstype": "^3.2.2"
|
||||||
}
|
}
|
||||||
@@ -2017,6 +2020,7 @@
|
|||||||
"integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==",
|
"integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@typescript-eslint/scope-manager": "8.48.1",
|
"@typescript-eslint/scope-manager": "8.48.1",
|
||||||
"@typescript-eslint/types": "8.48.1",
|
"@typescript-eslint/types": "8.48.1",
|
||||||
@@ -2334,6 +2338,7 @@
|
|||||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"acorn": "bin/acorn"
|
"acorn": "bin/acorn"
|
||||||
},
|
},
|
||||||
@@ -2545,6 +2550,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
|
||||||
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
|
"integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@kurkle/color": "^0.3.0"
|
"@kurkle/color": "^0.3.0"
|
||||||
},
|
},
|
||||||
@@ -2809,6 +2815,7 @@
|
|||||||
"integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
|
"integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint-community/eslint-utils": "^4.8.0",
|
"@eslint-community/eslint-utils": "^4.8.0",
|
||||||
"@eslint-community/regexpp": "^4.12.1",
|
"@eslint-community/regexpp": "^4.12.1",
|
||||||
@@ -3285,6 +3292,7 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.28.4"
|
"@babel/runtime": "^7.28.4"
|
||||||
},
|
},
|
||||||
@@ -3614,6 +3622,7 @@
|
|||||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
},
|
},
|
||||||
@@ -3720,6 +3729,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
|
||||||
"integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
|
"integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
@@ -3737,6 +3747,7 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
|
||||||
"integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
|
"integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"scheduler": "^0.27.0"
|
"scheduler": "^0.27.0"
|
||||||
},
|
},
|
||||||
@@ -3780,9 +3791,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 +3813,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"
|
||||||
@@ -3845,6 +3856,7 @@
|
|||||||
"integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
|
"integrity": "sha512-w8GmOxZfBmKknvdXU1sdM9NHcoQejwF/4mNgj2JuEEdRaHwwF12K7e9eXn1nLZ07ad+du76mkVsyeb2rKGllsA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/estree": "1.0.8"
|
"@types/estree": "1.0.8"
|
||||||
},
|
},
|
||||||
@@ -4027,6 +4039,7 @@
|
|||||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||||
"devOptional": true,
|
"devOptional": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
|
"peer": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"tsc": "bin/tsc",
|
"tsc": "bin/tsc",
|
||||||
"tsserver": "bin/tsserver"
|
"tsserver": "bin/tsserver"
|
||||||
@@ -4103,6 +4116,7 @@
|
|||||||
"integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==",
|
"integrity": "sha512-tI2l/nFHC5rLh7+5+o7QjKjSR04ivXDF4jcgV0f/bTQ+OJiITy5S6gaynVsEM+7RqzufMnVbIon6Sr5x1SDYaQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"esbuild": "^0.25.0",
|
"esbuild": "^0.25.0",
|
||||||
"fdir": "^6.5.0",
|
"fdir": "^6.5.0",
|
||||||
@@ -4244,6 +4258,7 @@
|
|||||||
"integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
|
"integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
|
"peer": true,
|
||||||
"funding": {
|
"funding": {
|
||||||
"url": "https://github.com/sponsors/colinhacks"
|
"url": "https://github.com/sponsors/colinhacks"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
|
|||||||
import { HashRouter, Route, Routes } from 'react-router-dom';
|
import { HashRouter, Route, Routes } from 'react-router-dom';
|
||||||
import { LoginPage } from '@/pages/LoginPage';
|
import { LoginPage } from '@/pages/LoginPage';
|
||||||
import { NotificationContainer } from '@/components/common/NotificationContainer';
|
import { NotificationContainer } from '@/components/common/NotificationContainer';
|
||||||
|
import { ConfirmationModal } from '@/components/common/ConfirmationModal';
|
||||||
import { SplashScreen } from '@/components/common/SplashScreen';
|
import { SplashScreen } from '@/components/common/SplashScreen';
|
||||||
import { MainLayout } from '@/components/layout/MainLayout';
|
import { MainLayout } from '@/components/layout/MainLayout';
|
||||||
import { ProtectedRoute } from '@/router/ProtectedRoute';
|
import { ProtectedRoute } from '@/router/ProtectedRoute';
|
||||||
@@ -61,6 +62,7 @@ function App() {
|
|||||||
return (
|
return (
|
||||||
<HashRouter>
|
<HashRouter>
|
||||||
<NotificationContainer />
|
<NotificationContainer />
|
||||||
|
<ConfirmationModal />
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/login" element={<LoginPage />} />
|
<Route path="/login" element={<LoginPage />} />
|
||||||
<Route
|
<Route
|
||||||
|
|||||||
61
src/components/common/ConfirmationModal.tsx
Normal file
61
src/components/common/ConfirmationModal.tsx
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Modal } from '@/components/ui/Modal';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
import { useNotificationStore } from '@/stores';
|
||||||
|
|
||||||
|
export function ConfirmationModal() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const confirmation = useNotificationStore((state) => state.confirmation);
|
||||||
|
const hideConfirmation = useNotificationStore((state) => state.hideConfirmation);
|
||||||
|
const setConfirmationLoading = useNotificationStore((state) => state.setConfirmationLoading);
|
||||||
|
|
||||||
|
const { isOpen, isLoading, options } = confirmation;
|
||||||
|
|
||||||
|
if (!isOpen || !options) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, message, onConfirm, onCancel, confirmText, cancelText, variant = 'primary' } = options;
|
||||||
|
|
||||||
|
const handleConfirm = async () => {
|
||||||
|
try {
|
||||||
|
setConfirmationLoading(true);
|
||||||
|
await onConfirm();
|
||||||
|
hideConfirmation();
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Confirmation action failed:', error);
|
||||||
|
// Optional: show error notification here if needed,
|
||||||
|
// but usually the calling component handles specific errors.
|
||||||
|
} finally {
|
||||||
|
setConfirmationLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancel = () => {
|
||||||
|
if (isLoading) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (onCancel) {
|
||||||
|
onCancel();
|
||||||
|
}
|
||||||
|
hideConfirmation();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal open={isOpen} onClose={handleCancel} title={title} closeDisabled={isLoading}>
|
||||||
|
<p style={{ margin: '1rem 0' }}>{message}</p>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '1rem', marginTop: '2rem' }}>
|
||||||
|
<Button variant="ghost" onClick={handleCancel} disabled={isLoading}>
|
||||||
|
{cancelText || t('common.cancel')}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant={variant}
|
||||||
|
onClick={handleConfirm}
|
||||||
|
loading={isLoading}
|
||||||
|
>
|
||||||
|
{confirmText || t('common.confirm')}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -14,6 +14,8 @@
|
|||||||
gap: $spacing-lg;
|
gap: $spacing-lg;
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
backface-visibility: hidden;
|
||||||
|
transform: translateZ(0);
|
||||||
|
|
||||||
// During animation, exit layer uses absolute positioning
|
// During animation, exit layer uses absolute positioning
|
||||||
&--exit {
|
&--exit {
|
||||||
@@ -22,17 +24,15 @@
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
will-change: transform, opacity;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&--animating &__layer {
|
&--animating &__layer {
|
||||||
will-change: transform, opacity;
|
will-change: transform, opacity;
|
||||||
backface-visibility: hidden;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// When both layers exist, current layer also needs positioning
|
&--animating &__layer:not(.page-transition__layer--exit) {
|
||||||
&--animating &__layer:not(&__layer--exit) {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,9 +9,8 @@ interface PageTransitionProps {
|
|||||||
scrollContainerRef?: React.RefObject<HTMLElement | null>;
|
scrollContainerRef?: React.RefObject<HTMLElement | null>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const TRANSITION_DURATION = 0.5;
|
const TRANSITION_DURATION = 0.35;
|
||||||
const EXIT_DURATION = 0.45;
|
const TRAVEL_DISTANCE = 60;
|
||||||
const ENTER_DELAY = 0.08;
|
|
||||||
|
|
||||||
type LayerStatus = 'current' | 'exiting';
|
type LayerStatus = 'current' | 'exiting';
|
||||||
|
|
||||||
@@ -23,18 +22,14 @@ type Layer = {
|
|||||||
|
|
||||||
type TransitionDirection = 'forward' | 'backward';
|
type TransitionDirection = 'forward' | 'backward';
|
||||||
|
|
||||||
export function PageTransition({
|
export function PageTransition({ render, getRouteOrder, scrollContainerRef }: PageTransitionProps) {
|
||||||
render,
|
|
||||||
getRouteOrder,
|
|
||||||
scrollContainerRef,
|
|
||||||
}: PageTransitionProps) {
|
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const currentLayerRef = useRef<HTMLDivElement>(null);
|
const currentLayerRef = useRef<HTMLDivElement>(null);
|
||||||
const exitingLayerRef = useRef<HTMLDivElement>(null);
|
const exitingLayerRef = useRef<HTMLDivElement>(null);
|
||||||
|
const transitionDirectionRef = useRef<TransitionDirection>('forward');
|
||||||
const exitScrollOffsetRef = useRef(0);
|
const exitScrollOffsetRef = useRef(0);
|
||||||
|
|
||||||
const [isAnimating, setIsAnimating] = useState(false);
|
const [isAnimating, setIsAnimating] = useState(false);
|
||||||
const [transitionDirection, setTransitionDirection] = useState<TransitionDirection>('forward');
|
|
||||||
const [layers, setLayers] = useState<Layer[]>(() => [
|
const [layers, setLayers] = useState<Layer[]>(() => [
|
||||||
{
|
{
|
||||||
key: location.key,
|
key: location.key,
|
||||||
@@ -71,11 +66,11 @@ export function PageTransition({
|
|||||||
? 'forward'
|
? 'forward'
|
||||||
: 'backward';
|
: 'backward';
|
||||||
|
|
||||||
let cancelled = false;
|
transitionDirectionRef.current = nextDirection;
|
||||||
|
|
||||||
|
let cancelled = false;
|
||||||
queueMicrotask(() => {
|
queueMicrotask(() => {
|
||||||
if (cancelled) return;
|
if (cancelled) return;
|
||||||
setTransitionDirection(nextDirection);
|
|
||||||
setLayers((prev) => {
|
setLayers((prev) => {
|
||||||
const prevCurrent = prev[prev.length - 1];
|
const prevCurrent = prev[prev.length - 1];
|
||||||
return [
|
return [
|
||||||
@@ -106,17 +101,18 @@ export function PageTransition({
|
|||||||
|
|
||||||
if (!currentLayerRef.current) return;
|
if (!currentLayerRef.current) return;
|
||||||
|
|
||||||
|
const currentLayerEl = currentLayerRef.current;
|
||||||
|
const exitingLayerEl = exitingLayerRef.current;
|
||||||
|
|
||||||
const scrollContainer = resolveScrollContainer();
|
const scrollContainer = resolveScrollContainer();
|
||||||
const scrollOffset = exitScrollOffsetRef.current;
|
const scrollOffset = exitScrollOffsetRef.current;
|
||||||
if (scrollContainer && scrollOffset > 0) {
|
if (scrollContainer && scrollOffset > 0) {
|
||||||
scrollContainer.scrollTo({ top: 0, left: 0, behavior: 'auto' });
|
scrollContainer.scrollTo({ top: 0, left: 0, behavior: 'auto' });
|
||||||
}
|
}
|
||||||
|
|
||||||
const containerHeight = scrollContainer?.clientHeight ?? 0;
|
const transitionDirection = transitionDirectionRef.current;
|
||||||
const viewportHeight = typeof window === 'undefined' ? 0 : window.innerHeight;
|
const enterFromY = transitionDirection === 'forward' ? TRAVEL_DISTANCE : -TRAVEL_DISTANCE;
|
||||||
const travelDistance = Math.max(containerHeight, viewportHeight, 1);
|
const exitToY = transitionDirection === 'forward' ? -TRAVEL_DISTANCE : TRAVEL_DISTANCE;
|
||||||
const enterFromY = transitionDirection === 'forward' ? travelDistance : -travelDistance;
|
|
||||||
const exitToY = transitionDirection === 'forward' ? -travelDistance : travelDistance;
|
|
||||||
const exitBaseY = scrollOffset ? -scrollOffset : 0;
|
const exitBaseY = scrollOffset ? -scrollOffset : 0;
|
||||||
|
|
||||||
const tl = gsap.timeline({
|
const tl = gsap.timeline({
|
||||||
@@ -126,43 +122,46 @@ export function PageTransition({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// Exit animation: fly out to top (slow-to-fast)
|
// Exit animation: fade out with slight movement (runs simultaneously)
|
||||||
if (exitingLayerRef.current) {
|
if (exitingLayerEl) {
|
||||||
gsap.set(exitingLayerRef.current, { y: exitBaseY });
|
gsap.set(exitingLayerEl, { y: exitBaseY });
|
||||||
tl.fromTo(
|
tl.to(
|
||||||
exitingLayerRef.current,
|
exitingLayerEl,
|
||||||
{ y: exitBaseY, opacity: 1 },
|
|
||||||
{
|
{
|
||||||
y: exitBaseY + exitToY,
|
y: exitBaseY + exitToY,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
duration: EXIT_DURATION,
|
duration: TRANSITION_DURATION,
|
||||||
ease: 'power2.in', // fast finish to clear screen
|
ease: 'circ.out',
|
||||||
force3D: true,
|
force3D: true,
|
||||||
},
|
},
|
||||||
0
|
0
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Enter animation: slide in from bottom (slow-to-fast)
|
// Enter animation: fade in with slight movement (runs simultaneously)
|
||||||
tl.fromTo(
|
tl.fromTo(
|
||||||
currentLayerRef.current,
|
currentLayerEl,
|
||||||
{ y: enterFromY, opacity: 0 },
|
{ y: enterFromY, opacity: 0 },
|
||||||
{
|
{
|
||||||
y: 0,
|
y: 0,
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
duration: TRANSITION_DURATION,
|
duration: TRANSITION_DURATION,
|
||||||
ease: 'power2.out', // smooth settle
|
ease: 'circ.out',
|
||||||
clearProps: 'transform,opacity',
|
|
||||||
force3D: true,
|
force3D: true,
|
||||||
|
onComplete: () => {
|
||||||
|
if (currentLayerEl) {
|
||||||
|
gsap.set(currentLayerEl, { clearProps: 'transform,opacity' });
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
ENTER_DELAY
|
0
|
||||||
);
|
);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
tl.kill();
|
tl.kill();
|
||||||
gsap.killTweensOf([currentLayerRef.current, exitingLayerRef.current]);
|
gsap.killTweensOf([currentLayerEl, exitingLayerEl]);
|
||||||
};
|
};
|
||||||
}, [isAnimating, transitionDirection, resolveScrollContainer]);
|
}, [isAnimating, resolveScrollContainer]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`page-transition${isAnimating ? ' page-transition--animating' : ''}`}>
|
<div className={`page-transition${isAnimating ? ' page-transition--animating' : ''}`}>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ interface AmpcodeModalProps {
|
|||||||
|
|
||||||
export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }: AmpcodeModalProps) {
|
export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }: AmpcodeModalProps) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { showNotification } = useNotificationStore();
|
const { showNotification, showConfirmation } = useNotificationStore();
|
||||||
const config = useConfigStore((state) => state.config);
|
const config = useConfigStore((state) => state.config);
|
||||||
const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
|
const updateConfigValue = useConfigStore((state) => state.updateConfigValue);
|
||||||
const clearCache = useConfigStore((state) => state.clearCache);
|
const clearCache = useConfigStore((state) => state.clearCache);
|
||||||
@@ -81,32 +81,34 @@ export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }:
|
|||||||
}, [clearCache, config?.ampcode, isOpen, onBusyChange, t, updateConfigValue]);
|
}, [clearCache, config?.ampcode, isOpen, onBusyChange, t, updateConfigValue]);
|
||||||
|
|
||||||
const clearAmpcodeUpstreamApiKey = async () => {
|
const clearAmpcodeUpstreamApiKey = async () => {
|
||||||
if (!window.confirm(t('ai_providers.ampcode_clear_upstream_api_key_confirm'))) return;
|
showConfirmation({
|
||||||
setSaving(true);
|
title: t('ai_providers.ampcode_clear_upstream_api_key_title', { defaultValue: 'Clear Upstream API Key' }),
|
||||||
setError('');
|
message: t('ai_providers.ampcode_clear_upstream_api_key_confirm'),
|
||||||
try {
|
variant: 'danger',
|
||||||
await ampcodeApi.clearUpstreamApiKey();
|
confirmText: t('common.confirm'),
|
||||||
const previous = config?.ampcode ?? {};
|
onConfirm: async () => {
|
||||||
const next: AmpcodeConfig = { ...previous };
|
setSaving(true);
|
||||||
delete next.upstreamApiKey;
|
setError('');
|
||||||
updateConfigValue('ampcode', next);
|
try {
|
||||||
clearCache('ampcode');
|
await ampcodeApi.clearUpstreamApiKey();
|
||||||
showNotification(t('notification.ampcode_upstream_api_key_cleared'), 'success');
|
const previous = config?.ampcode ?? {};
|
||||||
} catch (err: unknown) {
|
const next: AmpcodeConfig = { ...previous };
|
||||||
const message = getErrorMessage(err);
|
delete next.upstreamApiKey;
|
||||||
setError(message);
|
updateConfigValue('ampcode', next);
|
||||||
showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
|
clearCache('ampcode');
|
||||||
} finally {
|
showNotification(t('notification.ampcode_upstream_api_key_cleared'), 'success');
|
||||||
setSaving(false);
|
} catch (err: unknown) {
|
||||||
}
|
const message = getErrorMessage(err);
|
||||||
|
setError(message);
|
||||||
|
showNotification(`${t('notification.update_failed')}: ${message}`, 'error');
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const saveAmpcode = async () => {
|
const performSaveAmpcode = async () => {
|
||||||
if (!loaded && mappingsDirty) {
|
|
||||||
const confirmed = window.confirm(t('ai_providers.ampcode_mappings_overwrite_confirm'));
|
|
||||||
if (!confirmed) return;
|
|
||||||
}
|
|
||||||
|
|
||||||
setSaving(true);
|
setSaving(true);
|
||||||
setError('');
|
setError('');
|
||||||
try {
|
try {
|
||||||
@@ -173,6 +175,21 @@ export function AmpcodeModal({ isOpen, disableControls, onClose, onBusyChange }:
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const saveAmpcode = async () => {
|
||||||
|
if (!loaded && mappingsDirty) {
|
||||||
|
showConfirmation({
|
||||||
|
title: t('ai_providers.ampcode_mappings_overwrite_title', { defaultValue: 'Overwrite Mappings' }),
|
||||||
|
message: t('ai_providers.ampcode_mappings_overwrite_confirm'),
|
||||||
|
variant: 'secondary', // Not dangerous, just a warning
|
||||||
|
confirmText: t('common.confirm'),
|
||||||
|
onConfirm: performSaveAmpcode,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await performSaveAmpcode();
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
open={isOpen}
|
open={isOpen}
|
||||||
|
|||||||
@@ -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')}
|
||||||
|
|||||||
@@ -6,7 +6,12 @@ import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
|
|||||||
import iconClaude from '@/assets/icons/claude.svg';
|
import iconClaude from '@/assets/icons/claude.svg';
|
||||||
import type { ProviderKeyConfig } from '@/types';
|
import type { ProviderKeyConfig } from '@/types';
|
||||||
import { maskApiKey } from '@/utils/format';
|
import { maskApiKey } from '@/utils/format';
|
||||||
import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
|
import {
|
||||||
|
buildCandidateUsageSourceIds,
|
||||||
|
calculateStatusBarData,
|
||||||
|
type KeyStats,
|
||||||
|
type UsageDetail,
|
||||||
|
} from '@/utils/usage';
|
||||||
import styles from '@/pages/AiProvidersPage.module.scss';
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
import { ProviderList } from '../ProviderList';
|
import { ProviderList } from '../ProviderList';
|
||||||
import { ProviderStatusBar } from '../ProviderStatusBar';
|
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||||
@@ -55,11 +60,19 @@ export function ClaudeSection({
|
|||||||
|
|
||||||
const statusBarCache = useMemo(() => {
|
const statusBarCache = useMemo(() => {
|
||||||
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
||||||
const allApiKeys = new Set<string>();
|
|
||||||
configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
|
configs.forEach((config) => {
|
||||||
allApiKeys.forEach((apiKey) => {
|
if (!config.apiKey) return;
|
||||||
cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
|
const candidates = buildCandidateUsageSourceIds({
|
||||||
|
apiKey: config.apiKey,
|
||||||
|
prefix: config.prefix,
|
||||||
|
});
|
||||||
|
if (!candidates.length) return;
|
||||||
|
const candidateSet = new Set(candidates);
|
||||||
|
const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
|
||||||
|
cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
|
||||||
});
|
});
|
||||||
|
|
||||||
return cache;
|
return cache;
|
||||||
}, [configs, usageDetails]);
|
}, [configs, usageDetails]);
|
||||||
|
|
||||||
@@ -99,12 +112,11 @@ export function ClaudeSection({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
renderContent={(item) => {
|
renderContent={(item) => {
|
||||||
const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
|
const stats = getStatsBySource(item.apiKey, keyStats, item.prefix);
|
||||||
const headerEntries = Object.entries(item.headers || {});
|
const headerEntries = Object.entries(item.headers || {});
|
||||||
const configDisabled = hasDisableAllModelsRule(item.excludedModels);
|
const configDisabled = hasDisableAllModelsRule(item.excludedModels);
|
||||||
const excludedModels = item.excludedModels ?? [];
|
const excludedModels = item.excludedModels ?? [];
|
||||||
const statusData =
|
const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
|
||||||
statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
|
|||||||
@@ -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')}
|
||||||
|
|||||||
@@ -7,7 +7,12 @@ import iconOpenaiLight from '@/assets/icons/openai-light.svg';
|
|||||||
import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
|
import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
|
||||||
import type { ProviderKeyConfig } from '@/types';
|
import type { ProviderKeyConfig } from '@/types';
|
||||||
import { maskApiKey } from '@/utils/format';
|
import { maskApiKey } from '@/utils/format';
|
||||||
import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
|
import {
|
||||||
|
buildCandidateUsageSourceIds,
|
||||||
|
calculateStatusBarData,
|
||||||
|
type KeyStats,
|
||||||
|
type UsageDetail,
|
||||||
|
} from '@/utils/usage';
|
||||||
import styles from '@/pages/AiProvidersPage.module.scss';
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
import { ProviderList } from '../ProviderList';
|
import { ProviderList } from '../ProviderList';
|
||||||
import { ProviderStatusBar } from '../ProviderStatusBar';
|
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||||
@@ -58,11 +63,19 @@ export function CodexSection({
|
|||||||
|
|
||||||
const statusBarCache = useMemo(() => {
|
const statusBarCache = useMemo(() => {
|
||||||
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
||||||
const allApiKeys = new Set<string>();
|
|
||||||
configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
|
configs.forEach((config) => {
|
||||||
allApiKeys.forEach((apiKey) => {
|
if (!config.apiKey) return;
|
||||||
cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
|
const candidates = buildCandidateUsageSourceIds({
|
||||||
|
apiKey: config.apiKey,
|
||||||
|
prefix: config.prefix,
|
||||||
|
});
|
||||||
|
if (!candidates.length) return;
|
||||||
|
const candidateSet = new Set(candidates);
|
||||||
|
const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
|
||||||
|
cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
|
||||||
});
|
});
|
||||||
|
|
||||||
return cache;
|
return cache;
|
||||||
}, [configs, usageDetails]);
|
}, [configs, usageDetails]);
|
||||||
|
|
||||||
@@ -106,12 +119,11 @@ export function CodexSection({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
renderContent={(item) => {
|
renderContent={(item) => {
|
||||||
const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
|
const stats = getStatsBySource(item.apiKey, keyStats, item.prefix);
|
||||||
const headerEntries = Object.entries(item.headers || {});
|
const headerEntries = Object.entries(item.headers || {});
|
||||||
const configDisabled = hasDisableAllModelsRule(item.excludedModels);
|
const configDisabled = hasDisableAllModelsRule(item.excludedModels);
|
||||||
const excludedModels = item.excludedModels ?? [];
|
const excludedModels = item.excludedModels ?? [];
|
||||||
const statusData =
|
const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
|
||||||
statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
|
|||||||
@@ -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')}
|
||||||
|
|||||||
@@ -6,7 +6,12 @@ import { ToggleSwitch } from '@/components/ui/ToggleSwitch';
|
|||||||
import iconGemini from '@/assets/icons/gemini.svg';
|
import iconGemini from '@/assets/icons/gemini.svg';
|
||||||
import type { GeminiKeyConfig } from '@/types';
|
import type { GeminiKeyConfig } from '@/types';
|
||||||
import { maskApiKey } from '@/utils/format';
|
import { maskApiKey } from '@/utils/format';
|
||||||
import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
|
import {
|
||||||
|
buildCandidateUsageSourceIds,
|
||||||
|
calculateStatusBarData,
|
||||||
|
type KeyStats,
|
||||||
|
type UsageDetail,
|
||||||
|
} from '@/utils/usage';
|
||||||
import styles from '@/pages/AiProvidersPage.module.scss';
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
import type { GeminiFormState } from '../types';
|
import type { GeminiFormState } from '../types';
|
||||||
import { ProviderList } from '../ProviderList';
|
import { ProviderList } from '../ProviderList';
|
||||||
@@ -55,11 +60,19 @@ export function GeminiSection({
|
|||||||
|
|
||||||
const statusBarCache = useMemo(() => {
|
const statusBarCache = useMemo(() => {
|
||||||
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
||||||
const allApiKeys = new Set<string>();
|
|
||||||
configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
|
configs.forEach((config) => {
|
||||||
allApiKeys.forEach((apiKey) => {
|
if (!config.apiKey) return;
|
||||||
cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
|
const candidates = buildCandidateUsageSourceIds({
|
||||||
|
apiKey: config.apiKey,
|
||||||
|
prefix: config.prefix,
|
||||||
|
});
|
||||||
|
if (!candidates.length) return;
|
||||||
|
const candidateSet = new Set(candidates);
|
||||||
|
const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
|
||||||
|
cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
|
||||||
});
|
});
|
||||||
|
|
||||||
return cache;
|
return cache;
|
||||||
}, [configs, usageDetails]);
|
}, [configs, usageDetails]);
|
||||||
|
|
||||||
@@ -99,12 +112,11 @@ export function GeminiSection({
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
renderContent={(item, index) => {
|
renderContent={(item, index) => {
|
||||||
const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
|
const stats = getStatsBySource(item.apiKey, keyStats, item.prefix);
|
||||||
const headerEntries = Object.entries(item.headers || {});
|
const headerEntries = Object.entries(item.headers || {});
|
||||||
const configDisabled = hasDisableAllModelsRule(item.excludedModels);
|
const configDisabled = hasDisableAllModelsRule(item.excludedModels);
|
||||||
const excludedModels = item.excludedModels ?? [];
|
const excludedModels = item.excludedModels ?? [];
|
||||||
const statusData =
|
const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
|
||||||
statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
|
|||||||
@@ -7,7 +7,12 @@ import iconOpenaiLight from '@/assets/icons/openai-light.svg';
|
|||||||
import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
|
import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
|
||||||
import type { OpenAIProviderConfig } from '@/types';
|
import type { OpenAIProviderConfig } from '@/types';
|
||||||
import { maskApiKey } from '@/utils/format';
|
import { maskApiKey } from '@/utils/format';
|
||||||
import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
|
import {
|
||||||
|
buildCandidateUsageSourceIds,
|
||||||
|
calculateStatusBarData,
|
||||||
|
type KeyStats,
|
||||||
|
type UsageDetail,
|
||||||
|
} from '@/utils/usage';
|
||||||
import styles from '@/pages/AiProvidersPage.module.scss';
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
import { ProviderList } from '../ProviderList';
|
import { ProviderList } from '../ProviderList';
|
||||||
import { ProviderStatusBar } from '../ProviderStatusBar';
|
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||||
@@ -57,8 +62,15 @@ export function OpenAISection({
|
|||||||
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
||||||
|
|
||||||
configs.forEach((provider) => {
|
configs.forEach((provider) => {
|
||||||
const allKeys = (provider.apiKeyEntries || []).map((entry) => entry.apiKey).filter(Boolean);
|
const sourceIds = new Set<string>();
|
||||||
const filteredDetails = usageDetails.filter((detail) => allKeys.includes(detail.source));
|
buildCandidateUsageSourceIds({ prefix: provider.prefix }).forEach((id) => sourceIds.add(id));
|
||||||
|
(provider.apiKeyEntries || []).forEach((entry) => {
|
||||||
|
buildCandidateUsageSourceIds({ apiKey: entry.apiKey }).forEach((id) => sourceIds.add(id));
|
||||||
|
});
|
||||||
|
|
||||||
|
const filteredDetails = sourceIds.size
|
||||||
|
? usageDetails.filter((detail) => sourceIds.has(detail.source))
|
||||||
|
: [];
|
||||||
cache.set(provider.name, calculateStatusBarData(filteredDetails));
|
cache.set(provider.name, calculateStatusBarData(filteredDetails));
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -96,7 +108,7 @@ export function OpenAISection({
|
|||||||
onDelete={onDelete}
|
onDelete={onDelete}
|
||||||
actionsDisabled={actionsDisabled}
|
actionsDisabled={actionsDisabled}
|
||||||
renderContent={(item) => {
|
renderContent={(item) => {
|
||||||
const stats = getOpenAIProviderStats(item.apiKeyEntries, keyStats, maskApiKey);
|
const stats = getOpenAIProviderStats(item.apiKeyEntries, keyStats, item.prefix);
|
||||||
const headerEntries = Object.entries(item.headers || {});
|
const headerEntries = Object.entries(item.headers || {});
|
||||||
const apiKeyEntries = item.apiKeyEntries || [];
|
const apiKeyEntries = item.apiKeyEntries || [];
|
||||||
const statusData = statusBarCache.get(item.name) || calculateStatusBarData([]);
|
const statusData = statusBarCache.get(item.name) || calculateStatusBarData([]);
|
||||||
@@ -130,7 +142,7 @@ export function OpenAISection({
|
|||||||
</div>
|
</div>
|
||||||
<div className={styles.apiKeyEntryList}>
|
<div className={styles.apiKeyEntryList}>
|
||||||
{apiKeyEntries.map((entry, entryIndex) => {
|
{apiKeyEntries.map((entry, entryIndex) => {
|
||||||
const entryStats = getStatsBySource(entry.apiKey, keyStats, maskApiKey);
|
const entryStats = getStatsBySource(entry.apiKey, keyStats);
|
||||||
return (
|
return (
|
||||||
<div key={entryIndex} className={styles.apiKeyEntryCard}>
|
<div key={entryIndex} className={styles.apiKeyEntryCard}>
|
||||||
<span className={styles.apiKeyEntryIndex}>{entryIndex + 1}</span>
|
<span className={styles.apiKeyEntryIndex}>{entryIndex + 1}</span>
|
||||||
|
|||||||
@@ -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 type { ProviderModalProps, VertexFormState } from '../types';
|
import type { ProviderModalProps, VertexFormState } from '../types';
|
||||||
|
|
||||||
interface VertexModalProps extends ProviderModalProps<ProviderKeyConfig, VertexFormState> {
|
interface VertexModalProps extends ProviderModalProps<ProviderKeyConfig, VertexFormState> {
|
||||||
@@ -18,7 +18,7 @@ const buildEmptyForm = (): VertexFormState => ({
|
|||||||
prefix: '',
|
prefix: '',
|
||||||
baseUrl: '',
|
baseUrl: '',
|
||||||
proxyUrl: '',
|
proxyUrl: '',
|
||||||
headers: {},
|
headers: [],
|
||||||
models: [],
|
models: [],
|
||||||
modelEntries: [{ name: '', alias: '' }],
|
modelEntries: [{ name: '', alias: '' }],
|
||||||
});
|
});
|
||||||
@@ -40,7 +40,7 @@ export function VertexModal({
|
|||||||
// 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),
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@@ -94,8 +94,8 @@ export function VertexModal({
|
|||||||
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,12 @@ import { Card } from '@/components/ui/Card';
|
|||||||
import iconVertex from '@/assets/icons/vertex.svg';
|
import iconVertex from '@/assets/icons/vertex.svg';
|
||||||
import type { ProviderKeyConfig } from '@/types';
|
import type { ProviderKeyConfig } from '@/types';
|
||||||
import { maskApiKey } from '@/utils/format';
|
import { maskApiKey } from '@/utils/format';
|
||||||
import { calculateStatusBarData, type KeyStats, type UsageDetail } from '@/utils/usage';
|
import {
|
||||||
|
buildCandidateUsageSourceIds,
|
||||||
|
calculateStatusBarData,
|
||||||
|
type KeyStats,
|
||||||
|
type UsageDetail,
|
||||||
|
} from '@/utils/usage';
|
||||||
import styles from '@/pages/AiProvidersPage.module.scss';
|
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||||
import { ProviderList } from '../ProviderList';
|
import { ProviderList } from '../ProviderList';
|
||||||
import { ProviderStatusBar } from '../ProviderStatusBar';
|
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||||
@@ -51,11 +56,19 @@ export function VertexSection({
|
|||||||
|
|
||||||
const statusBarCache = useMemo(() => {
|
const statusBarCache = useMemo(() => {
|
||||||
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
const cache = new Map<string, ReturnType<typeof calculateStatusBarData>>();
|
||||||
const allApiKeys = new Set<string>();
|
|
||||||
configs.forEach((config) => config.apiKey && allApiKeys.add(config.apiKey));
|
configs.forEach((config) => {
|
||||||
allApiKeys.forEach((apiKey) => {
|
if (!config.apiKey) return;
|
||||||
cache.set(apiKey, calculateStatusBarData(usageDetails, apiKey));
|
const candidates = buildCandidateUsageSourceIds({
|
||||||
|
apiKey: config.apiKey,
|
||||||
|
prefix: config.prefix,
|
||||||
|
});
|
||||||
|
if (!candidates.length) return;
|
||||||
|
const candidateSet = new Set(candidates);
|
||||||
|
const filteredDetails = usageDetails.filter((detail) => candidateSet.has(detail.source));
|
||||||
|
cache.set(config.apiKey, calculateStatusBarData(filteredDetails));
|
||||||
});
|
});
|
||||||
|
|
||||||
return cache;
|
return cache;
|
||||||
}, [configs, usageDetails]);
|
}, [configs, usageDetails]);
|
||||||
|
|
||||||
@@ -86,10 +99,9 @@ export function VertexSection({
|
|||||||
onDelete={onDelete}
|
onDelete={onDelete}
|
||||||
actionsDisabled={actionsDisabled}
|
actionsDisabled={actionsDisabled}
|
||||||
renderContent={(item, index) => {
|
renderContent={(item, index) => {
|
||||||
const stats = getStatsBySource(item.apiKey, keyStats, maskApiKey);
|
const stats = getStatsBySource(item.apiKey, keyStats, item.prefix);
|
||||||
const headerEntries = Object.entries(item.headers || {});
|
const headerEntries = Object.entries(item.headers || {});
|
||||||
const statusData =
|
const statusData = statusBarCache.get(item.apiKey) || calculateStatusBarData([]);
|
||||||
statusBarCache.get(item.apiKey) || calculateStatusBarData([], item.apiKey);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
|
|||||||
@@ -32,14 +32,19 @@ 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, 'excludedModels'> & {
|
export type VertexFormState = Omit<ProviderKeyConfig, 'headers' | 'excludedModels'> & {
|
||||||
|
headers: HeaderEntry[];
|
||||||
modelEntries: ModelEntry[];
|
modelEntries: ModelEntry[];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import type { AmpcodeConfig, AmpcodeModelMapping, ApiKeyEntry } from '@/types';
|
import type { AmpcodeConfig, AmpcodeModelMapping, ApiKeyEntry } from '@/types';
|
||||||
import type { KeyStatBucket, KeyStats } from '@/utils/usage';
|
import { buildCandidateUsageSourceIds, type KeyStatBucket, type KeyStats } from '@/utils/usage';
|
||||||
import type { AmpcodeFormState, ModelEntry } from './types';
|
import type { AmpcodeFormState, ModelEntry } from './types';
|
||||||
|
|
||||||
export const DISABLE_ALL_MODELS_RULE = '*';
|
export const DISABLE_ALL_MODELS_RULE = '*';
|
||||||
@@ -46,7 +46,7 @@ export const normalizeOpenAIBaseUrl = (baseUrl: string): string => {
|
|||||||
export const buildOpenAIModelsEndpoint = (baseUrl: string): string => {
|
export const buildOpenAIModelsEndpoint = (baseUrl: string): string => {
|
||||||
const trimmed = normalizeOpenAIBaseUrl(baseUrl);
|
const trimmed = normalizeOpenAIBaseUrl(baseUrl);
|
||||||
if (!trimmed) return '';
|
if (!trimmed) return '';
|
||||||
return trimmed.endsWith('/v1') ? `${trimmed}/models` : `${trimmed}/v1/models`;
|
return `${trimmed}/models`;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
|
export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
|
||||||
@@ -55,40 +55,60 @@ export const buildOpenAIChatCompletionsEndpoint = (baseUrl: string): string => {
|
|||||||
if (trimmed.endsWith('/chat/completions')) {
|
if (trimmed.endsWith('/chat/completions')) {
|
||||||
return trimmed;
|
return trimmed;
|
||||||
}
|
}
|
||||||
return trimmed.endsWith('/v1') ? `${trimmed}/chat/completions` : `${trimmed}/v1/chat/completions`;
|
if (trimmed.endsWith('/v1')) {
|
||||||
|
return `${trimmed.slice(0, -3)}/chat/completions`;
|
||||||
|
}
|
||||||
|
return `${trimmed}/chat/completions`;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致
|
// 根据 source (apiKey) 获取统计数据 - 与旧版逻辑一致
|
||||||
export const getStatsBySource = (
|
export const getStatsBySource = (
|
||||||
apiKey: string,
|
apiKey: string,
|
||||||
keyStats: KeyStats,
|
keyStats: KeyStats,
|
||||||
maskFn: (key: string) => string
|
prefix?: string
|
||||||
): KeyStatBucket => {
|
): KeyStatBucket => {
|
||||||
const bySource = keyStats.bySource ?? {};
|
const bySource = keyStats.bySource ?? {};
|
||||||
const masked = maskFn(apiKey);
|
const candidates = buildCandidateUsageSourceIds({ apiKey, prefix });
|
||||||
return bySource[apiKey] || bySource[masked] || { success: 0, failure: 0 };
|
if (!candidates.length) {
|
||||||
|
return { success: 0, failure: 0 };
|
||||||
|
}
|
||||||
|
|
||||||
|
let success = 0;
|
||||||
|
let failure = 0;
|
||||||
|
candidates.forEach((candidate) => {
|
||||||
|
const stats = bySource[candidate];
|
||||||
|
if (!stats) return;
|
||||||
|
success += stats.success;
|
||||||
|
failure += stats.failure;
|
||||||
|
});
|
||||||
|
|
||||||
|
return { success, failure };
|
||||||
};
|
};
|
||||||
|
|
||||||
// 对于 OpenAI 提供商,汇总所有 apiKeyEntries 的统计 - 与旧版逻辑一致
|
// 对于 OpenAI 提供商,汇总所有 apiKeyEntries 的统计 - 与旧版逻辑一致
|
||||||
export const getOpenAIProviderStats = (
|
export const getOpenAIProviderStats = (
|
||||||
apiKeyEntries: ApiKeyEntry[] | undefined,
|
apiKeyEntries: ApiKeyEntry[] | undefined,
|
||||||
keyStats: KeyStats,
|
keyStats: KeyStats,
|
||||||
maskFn: (key: string) => string
|
providerPrefix?: string
|
||||||
): KeyStatBucket => {
|
): KeyStatBucket => {
|
||||||
const bySource = keyStats.bySource ?? {};
|
const bySource = keyStats.bySource ?? {};
|
||||||
let totalSuccess = 0;
|
|
||||||
let totalFailure = 0;
|
|
||||||
|
|
||||||
|
const sourceIds = new Set<string>();
|
||||||
|
buildCandidateUsageSourceIds({ prefix: providerPrefix }).forEach((id) => sourceIds.add(id));
|
||||||
(apiKeyEntries || []).forEach((entry) => {
|
(apiKeyEntries || []).forEach((entry) => {
|
||||||
const key = entry?.apiKey || '';
|
buildCandidateUsageSourceIds({ apiKey: entry?.apiKey }).forEach((id) => sourceIds.add(id));
|
||||||
if (!key) return;
|
|
||||||
const masked = maskFn(key);
|
|
||||||
const stats = bySource[key] || bySource[masked] || { success: 0, failure: 0 };
|
|
||||||
totalSuccess += stats.success;
|
|
||||||
totalFailure += stats.failure;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return { success: totalSuccess, failure: totalFailure };
|
let success = 0;
|
||||||
|
let failure = 0;
|
||||||
|
sourceIds.forEach((id) => {
|
||||||
|
const stats = bySource[id];
|
||||||
|
if (!stats) return;
|
||||||
|
success += stats.success;
|
||||||
|
failure += stats.failure;
|
||||||
|
});
|
||||||
|
|
||||||
|
return { success, failure };
|
||||||
};
|
};
|
||||||
|
|
||||||
export const buildApiKeyEntry = (input?: Partial<ApiKeyEntry>): ApiKeyEntry => ({
|
export const buildApiKeyEntry = (input?: Partial<ApiKeyEntry>): ApiKeyEntry => ({
|
||||||
|
|||||||
@@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
175
src/components/ui/AutocompleteInput.tsx
Normal file
175
src/components/ui/AutocompleteInput.tsx
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent, type ReactNode } from 'react';
|
||||||
|
import { IconChevronDown } from './icons';
|
||||||
|
|
||||||
|
interface AutocompleteInputProps {
|
||||||
|
label?: string;
|
||||||
|
value: string;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
options: string[] | { value: string; label?: string }[];
|
||||||
|
placeholder?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
hint?: string;
|
||||||
|
error?: string;
|
||||||
|
className?: string;
|
||||||
|
wrapperClassName?: string;
|
||||||
|
wrapperStyle?: React.CSSProperties;
|
||||||
|
id?: string;
|
||||||
|
rightElement?: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AutocompleteInput({
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
options,
|
||||||
|
placeholder,
|
||||||
|
disabled,
|
||||||
|
hint,
|
||||||
|
error,
|
||||||
|
className = '',
|
||||||
|
wrapperClassName = '',
|
||||||
|
wrapperStyle,
|
||||||
|
id,
|
||||||
|
rightElement
|
||||||
|
}: AutocompleteInputProps) {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [highlightedIndex, setHighlightedIndex] = useState(-1);
|
||||||
|
const containerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const normalizedOptions = options.map(opt =>
|
||||||
|
typeof opt === 'string' ? { value: opt, label: opt } : { value: opt.value, label: opt.label || opt.value }
|
||||||
|
);
|
||||||
|
|
||||||
|
const filteredOptions = normalizedOptions.filter(opt => {
|
||||||
|
const v = value.toLowerCase();
|
||||||
|
return opt.value.toLowerCase().includes(v) || (opt.label && opt.label.toLowerCase().includes(v));
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
|
||||||
|
onChange(e.target.value);
|
||||||
|
setIsOpen(true);
|
||||||
|
setHighlightedIndex(-1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSelect = (selectedValue: string) => {
|
||||||
|
onChange(selectedValue);
|
||||||
|
setIsOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (disabled) return;
|
||||||
|
|
||||||
|
if (e.key === 'ArrowDown') {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!isOpen) {
|
||||||
|
setIsOpen(true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setHighlightedIndex(prev =>
|
||||||
|
prev < filteredOptions.length - 1 ? prev + 1 : prev
|
||||||
|
);
|
||||||
|
} else if (e.key === 'ArrowUp') {
|
||||||
|
e.preventDefault();
|
||||||
|
setHighlightedIndex(prev => prev > 0 ? prev - 1 : 0);
|
||||||
|
} else if (e.key === 'Enter') {
|
||||||
|
if (isOpen && highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleSelect(filteredOptions[highlightedIndex].value);
|
||||||
|
} else if (isOpen) {
|
||||||
|
e.preventDefault();
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
} else if (e.key === 'Escape') {
|
||||||
|
setIsOpen(false);
|
||||||
|
} else if (e.key === 'Tab') {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`form-group ${wrapperClassName}`} ref={containerRef} style={wrapperStyle}>
|
||||||
|
{label && <label htmlFor={id}>{label}</label>}
|
||||||
|
<div style={{ position: 'relative' }}>
|
||||||
|
<input
|
||||||
|
id={id}
|
||||||
|
className={`input ${className}`.trim()}
|
||||||
|
value={value}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onFocus={() => setIsOpen(true)}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
placeholder={placeholder}
|
||||||
|
disabled={disabled}
|
||||||
|
autoComplete="off"
|
||||||
|
style={{ paddingRight: 32 }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: 'absolute',
|
||||||
|
right: 8,
|
||||||
|
top: '50%',
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
pointerEvents: disabled ? 'none' : 'auto',
|
||||||
|
cursor: 'pointer',
|
||||||
|
height: '100%'
|
||||||
|
}}
|
||||||
|
onClick={() => !disabled && setIsOpen(!isOpen)}
|
||||||
|
>
|
||||||
|
{rightElement}
|
||||||
|
<IconChevronDown size={16} style={{ opacity: 0.5, marginLeft: 4 }} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isOpen && filteredOptions.length > 0 && !disabled && (
|
||||||
|
<div className="autocomplete-dropdown" style={{
|
||||||
|
position: 'absolute',
|
||||||
|
top: 'calc(100% + 4px)',
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
zIndex: 1000,
|
||||||
|
backgroundColor: 'var(--bg-secondary)',
|
||||||
|
border: '1px solid var(--border-color)',
|
||||||
|
borderRadius: 'var(--radius-md)',
|
||||||
|
maxHeight: 200,
|
||||||
|
overflowY: 'auto',
|
||||||
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
|
||||||
|
}}>
|
||||||
|
{filteredOptions.map((opt, index) => (
|
||||||
|
<div
|
||||||
|
key={`${opt.value}-${index}`}
|
||||||
|
onClick={() => handleSelect(opt.value)}
|
||||||
|
style={{
|
||||||
|
padding: '8px 12px',
|
||||||
|
cursor: 'pointer',
|
||||||
|
backgroundColor: index === highlightedIndex ? 'var(--bg-tertiary)' : 'transparent',
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
fontSize: '0.9rem'
|
||||||
|
}}
|
||||||
|
onMouseEnter={() => setHighlightedIndex(index)}
|
||||||
|
>
|
||||||
|
<span style={{ fontWeight: 500 }}>{opt.value}</span>
|
||||||
|
{opt.label && opt.label !== opt.value && (
|
||||||
|
<span style={{ fontSize: '0.85em', color: 'var(--text-secondary)' }}>{opt.label}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{hint && <div className="hint">{hint}</div>}
|
||||||
|
{error && <div className="error-box">{error}</div>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -8,6 +8,7 @@ interface ModalProps {
|
|||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
footer?: ReactNode;
|
footer?: ReactNode;
|
||||||
width?: number | string;
|
width?: number | string;
|
||||||
|
closeDisabled?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const CLOSE_ANIMATION_DURATION = 350;
|
const CLOSE_ANIMATION_DURATION = 350;
|
||||||
@@ -32,7 +33,15 @@ const unlockScroll = () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export function Modal({ open, title, onClose, footer, width = 520, children }: PropsWithChildren<ModalProps>) {
|
export function Modal({
|
||||||
|
open,
|
||||||
|
title,
|
||||||
|
onClose,
|
||||||
|
footer,
|
||||||
|
width = 520,
|
||||||
|
closeDisabled = false,
|
||||||
|
children
|
||||||
|
}: PropsWithChildren<ModalProps>) {
|
||||||
const [isVisible, setIsVisible] = useState(false);
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
const [isClosing, setIsClosing] = useState(false);
|
const [isClosing, setIsClosing] = useState(false);
|
||||||
const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
@@ -106,7 +115,13 @@ export function Modal({ open, title, onClose, footer, width = 520, children }: P
|
|||||||
const modalContent = (
|
const modalContent = (
|
||||||
<div className={overlayClass}>
|
<div className={overlayClass}>
|
||||||
<div className={modalClass} style={{ width }} role="dialog" aria-modal="true">
|
<div className={modalClass} style={{ width }} role="dialog" aria-modal="true">
|
||||||
<button className="modal-close-floating" onClick={handleClose} aria-label="Close">
|
<button
|
||||||
|
type="button"
|
||||||
|
className="modal-close-floating"
|
||||||
|
onClick={closeDisabled ? undefined : handleClose}
|
||||||
|
aria-label="Close"
|
||||||
|
disabled={closeDisabled}
|
||||||
|
>
|
||||||
<IconX size={20} />
|
<IconX size={20} />
|
||||||
</button>
|
</button>
|
||||||
<div className="modal-header">
|
<div className="modal-header">
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ interface ToggleSwitchProps {
|
|||||||
checked: boolean;
|
checked: boolean;
|
||||||
onChange: (value: boolean) => void;
|
onChange: (value: boolean) => void;
|
||||||
label?: ReactNode;
|
label?: ReactNode;
|
||||||
|
ariaLabel?: string;
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
labelPosition?: 'left' | 'right';
|
labelPosition?: 'left' | 'right';
|
||||||
}
|
}
|
||||||
@@ -12,6 +13,7 @@ export function ToggleSwitch({
|
|||||||
checked,
|
checked,
|
||||||
onChange,
|
onChange,
|
||||||
label,
|
label,
|
||||||
|
ariaLabel,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
labelPosition = 'right'
|
labelPosition = 'right'
|
||||||
}: ToggleSwitchProps) {
|
}: ToggleSwitchProps) {
|
||||||
@@ -25,7 +27,13 @@ export function ToggleSwitch({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<label className={className}>
|
<label className={className}>
|
||||||
<input type="checkbox" checked={checked} onChange={handleChange} disabled={disabled} />
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={checked}
|
||||||
|
onChange={handleChange}
|
||||||
|
disabled={disabled}
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
/>
|
||||||
<span className="track">
|
<span className="track">
|
||||||
<span className="thumb" />
|
<span className="thumb" />
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -6,6 +6,8 @@ import styles from '@/pages/UsagePage.module.scss';
|
|||||||
export interface ModelStat {
|
export interface ModelStat {
|
||||||
model: string;
|
model: string;
|
||||||
requests: number;
|
requests: number;
|
||||||
|
successCount: number;
|
||||||
|
failureCount: number;
|
||||||
tokens: number;
|
tokens: number;
|
||||||
cost: number;
|
cost: number;
|
||||||
}
|
}
|
||||||
@@ -38,7 +40,15 @@ export function ModelStatsCard({ modelStats, loading, hasPrices }: ModelStatsCar
|
|||||||
{modelStats.map((stat) => (
|
{modelStats.map((stat) => (
|
||||||
<tr key={stat.model}>
|
<tr key={stat.model}>
|
||||||
<td className={styles.modelCell}>{stat.model}</td>
|
<td className={styles.modelCell}>{stat.model}</td>
|
||||||
<td>{stat.requests.toLocaleString()}</td>
|
<td>
|
||||||
|
<span className={styles.requestCountCell}>
|
||||||
|
<span>{stat.requests.toLocaleString()}</span>
|
||||||
|
<span className={styles.requestBreakdown}>
|
||||||
|
(<span className={styles.statSuccess}>{stat.successCount.toLocaleString()}</span>{' '}
|
||||||
|
<span className={styles.statFailure}>{stat.failureCount.toLocaleString()}</span>)
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
<td>{formatTokensInMillions(stat.tokens)}</td>
|
<td>{formatTokensInMillions(stat.tokens)}</td>
|
||||||
{hasPrices && <td>{stat.cost > 0 ? formatUsd(stat.cost) : '--'}</td>}
|
{hasPrices && <td>{stat.cost > 0 ? formatUsd(stat.cost) : '--'}</td>}
|
||||||
</tr>
|
</tr>
|
||||||
|
|||||||
@@ -249,10 +249,10 @@
|
|||||||
"vertex_edit_modal_url_label": "Base URL (Required):",
|
"vertex_edit_modal_url_label": "Base URL (Required):",
|
||||||
"vertex_edit_modal_proxy_label": "Proxy URL (Optional):",
|
"vertex_edit_modal_proxy_label": "Proxy URL (Optional):",
|
||||||
"vertex_delete_confirm": "Are you sure you want to delete this Vertex configuration?",
|
"vertex_delete_confirm": "Are you sure you want to delete this Vertex configuration?",
|
||||||
"vertex_models_label": "Model mappings (alias required):",
|
"vertex_models_label": "Model aliases (alias required):",
|
||||||
"vertex_models_add_btn": "Add Mapping",
|
"vertex_models_add_btn": "Add Mapping",
|
||||||
"vertex_models_hint": "Each mapping needs both the original model and its alias.",
|
"vertex_models_hint": "Each alias needs both the original model and the alias.",
|
||||||
"vertex_models_count": "Mapping count",
|
"vertex_models_count": "Alias 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",
|
||||||
@@ -293,12 +293,12 @@
|
|||||||
"openai_model_name_placeholder": "Model name, e.g. moonshotai/kimi-k2:free",
|
"openai_model_name_placeholder": "Model name, e.g. moonshotai/kimi-k2:free",
|
||||||
"openai_model_alias_placeholder": "Model alias (optional)",
|
"openai_model_alias_placeholder": "Model alias (optional)",
|
||||||
"openai_models_add_btn": "Add Model",
|
"openai_models_add_btn": "Add Model",
|
||||||
"openai_models_fetch_button": "Fetch via /v1/models",
|
"openai_models_fetch_button": "Fetch via /models",
|
||||||
"openai_models_fetch_title": "Pick Models from /v1/models",
|
"openai_models_fetch_title": "Pick Models from /models",
|
||||||
"openai_models_fetch_hint": "Call the /v1/models endpoint using the Base URL above, sending the first API key as Bearer plus custom headers.",
|
"openai_models_fetch_hint": "Call the /models endpoint using the Base URL above, sending the first API key as Bearer plus custom headers.",
|
||||||
"openai_models_fetch_url_label": "Request URL",
|
"openai_models_fetch_url_label": "Request URL",
|
||||||
"openai_models_fetch_refresh": "Refresh",
|
"openai_models_fetch_refresh": "Refresh",
|
||||||
"openai_models_fetch_loading": "Fetching models from /v1/models...",
|
"openai_models_fetch_loading": "Fetching models from /models...",
|
||||||
"openai_models_fetch_empty": "No models returned. Please check the endpoint or auth.",
|
"openai_models_fetch_empty": "No models returned. Please check the endpoint or auth.",
|
||||||
"openai_models_fetch_error": "Failed to fetch models",
|
"openai_models_fetch_error": "Failed to fetch models",
|
||||||
"openai_models_fetch_back": "Back to edit",
|
"openai_models_fetch_back": "Back to edit",
|
||||||
@@ -316,7 +316,7 @@
|
|||||||
"openai_keys_count": "Keys Count",
|
"openai_keys_count": "Keys Count",
|
||||||
"openai_models_count": "Models Count",
|
"openai_models_count": "Models Count",
|
||||||
"openai_test_title": "Connection Test",
|
"openai_test_title": "Connection Test",
|
||||||
"openai_test_hint": "Send a /v1/chat/completions request with the current settings to verify availability.",
|
"openai_test_hint": "Send a /chat/completions request with the current settings to verify availability.",
|
||||||
"openai_test_model_placeholder": "Model to test",
|
"openai_test_model_placeholder": "Model to test",
|
||||||
"openai_test_action": "Run Test",
|
"openai_test_action": "Run Test",
|
||||||
"openai_test_running": "Sending test request...",
|
"openai_test_running": "Sending test request...",
|
||||||
@@ -395,7 +395,19 @@
|
|||||||
"models_unsupported": "This feature is not supported in the current version",
|
"models_unsupported": "This feature is not supported in the current version",
|
||||||
"models_unsupported_desc": "Please update CLI Proxy API to the latest version and try again",
|
"models_unsupported_desc": "Please update CLI Proxy API to the latest version and try again",
|
||||||
"models_excluded_badge": "Excluded",
|
"models_excluded_badge": "Excluded",
|
||||||
"models_excluded_hint": "This model is excluded by OAuth"
|
"models_excluded_hint": "This model is excluded by OAuth",
|
||||||
|
"status_toggle_label": "Enabled",
|
||||||
|
"status_enabled_success": "\"{{name}}\" enabled",
|
||||||
|
"status_disabled_success": "\"{{name}}\" disabled",
|
||||||
|
"prefix_proxy_button": "Edit prefix/proxy_url",
|
||||||
|
"prefix_proxy_loading": "Loading credential...",
|
||||||
|
"prefix_proxy_source_label": "Credential JSON",
|
||||||
|
"prefix_label": "prefix",
|
||||||
|
"proxy_url_label": "proxy_url",
|
||||||
|
"prefix_placeholder": "",
|
||||||
|
"proxy_url_placeholder": "socks5://username:password@proxy_ip:port/",
|
||||||
|
"prefix_proxy_invalid_json": "This credential is not a JSON object and cannot be edited.",
|
||||||
|
"prefix_proxy_saved_success": "Updated \"{{name}}\" successfully"
|
||||||
},
|
},
|
||||||
"antigravity_quota": {
|
"antigravity_quota": {
|
||||||
"title": "Antigravity Quota",
|
"title": "Antigravity Quota",
|
||||||
@@ -476,8 +488,10 @@
|
|||||||
"provider_placeholder": "e.g. gemini-cli",
|
"provider_placeholder": "e.g. gemini-cli",
|
||||||
"provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
|
"provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
|
||||||
"models_label": "Models to exclude",
|
"models_label": "Models to exclude",
|
||||||
"models_placeholder": "gpt-4.1-mini\n*-preview",
|
"models_loading": "Loading models...",
|
||||||
"models_hint": "Separate by commas or new lines; saving an empty list removes that provider. * wildcards are supported.",
|
"models_unsupported": "Current CPA version does not support fetching model lists.",
|
||||||
|
"models_loaded": "{{count}} models loaded. Check the models to exclude.",
|
||||||
|
"no_models_available": "No models available for this provider.",
|
||||||
"save": "Save/Update",
|
"save": "Save/Update",
|
||||||
"saving": "Saving...",
|
"saving": "Saving...",
|
||||||
"save_success": "Excluded models updated",
|
"save_success": "Excluded models updated",
|
||||||
@@ -500,33 +514,35 @@
|
|||||||
"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": {
|
"oauth_model_alias": {
|
||||||
"title": "OAuth Model Mappings",
|
"title": "OAuth Model Aliases",
|
||||||
"add": "Add Mapping",
|
"add": "Add Alias",
|
||||||
"add_title": "Add provider model mappings",
|
"add_title": "Add provider model aliases",
|
||||||
"provider_label": "Provider",
|
"provider_label": "Provider",
|
||||||
"provider_placeholder": "e.g. gemini-cli / vertex",
|
"provider_placeholder": "e.g. gemini-cli / vertex",
|
||||||
"provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
|
"provider_hint": "Defaults to the current filter; pick an existing provider or type a new name.",
|
||||||
"mappings_label": "Model mappings",
|
"model_source_loading": "Loading models...",
|
||||||
"mapping_name_placeholder": "Source model name",
|
"model_source_unsupported": "The current CPA version does not support fetching model lists (manual input still works).",
|
||||||
"mapping_alias_placeholder": "Alias (required)",
|
"model_source_loaded": "{{count}} models loaded. Use the dropdown in 'Source model name', or type custom values. Saving an empty list removes that provider. Enable 'Keep original' to keep the original name while adding the alias.",
|
||||||
"mapping_fork_label": "Keep original",
|
"alias_label": "Model aliases",
|
||||||
"mappings_hint": "Saving an empty list removes that provider. Enable “Keep original” to keep the original name while adding the alias.",
|
"alias_name_placeholder": "Source model name",
|
||||||
"add_mapping": "Add mapping",
|
"alias_placeholder": "Alias (required)",
|
||||||
|
"alias_fork_label": "Keep original",
|
||||||
|
"add_alias": "Add alias",
|
||||||
"save": "Save/Update",
|
"save": "Save/Update",
|
||||||
"save_success": "Model mappings updated",
|
"save_success": "Model aliases updated",
|
||||||
"save_failed": "Failed to update model mappings",
|
"save_failed": "Failed to update model aliases",
|
||||||
"delete": "Delete Provider",
|
"delete": "Delete Provider",
|
||||||
"delete_confirm": "Delete model mappings for {{provider}}?",
|
"delete_confirm": "Delete model aliases for {{provider}}?",
|
||||||
"delete_success": "Model mappings removed",
|
"delete_success": "Model aliases removed",
|
||||||
"delete_failed": "Failed to delete model mappings",
|
"delete_failed": "Failed to delete model aliases",
|
||||||
"no_models": "No model mappings",
|
"no_models": "No model aliases",
|
||||||
"model_count": "{{count}} mappings",
|
"model_count": "{{count}} aliases",
|
||||||
"list_empty_all": "No model mappings yet—use “Add Mapping” to create one.",
|
"list_empty_all": "No model aliases yet—use “Add Alias” to create one.",
|
||||||
"provider_required": "Please enter a provider first",
|
"provider_required": "Please enter a provider first",
|
||||||
"upgrade_required": "This feature requires a newer CLI Proxy API (CPA) version. Please upgrade.",
|
"upgrade_required": "This feature requires a newer CLI Proxy API (CPA) version. Please upgrade.",
|
||||||
"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 model mappings API. Please upgrade to the latest CLI Proxy API (CPA) version."
|
"upgrade_required_desc": "The current server does not support the OAuth model aliases 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",
|
||||||
@@ -787,9 +803,9 @@
|
|||||||
"not_loaded": "Not Loaded",
|
"not_loaded": "Not Loaded",
|
||||||
"seconds_ago": "seconds ago",
|
"seconds_ago": "seconds ago",
|
||||||
"models_title": "Available Models",
|
"models_title": "Available Models",
|
||||||
"models_desc": "Shows the /v1/models response and uses saved API keys for auth automatically.",
|
"models_desc": "Shows the /models response and uses saved API keys for auth automatically.",
|
||||||
"models_loading": "Loading available models...",
|
"models_loading": "Loading available models...",
|
||||||
"models_empty": "No models returned by /v1/models",
|
"models_empty": "No models returned by /models",
|
||||||
"models_error": "Failed to load model list",
|
"models_error": "Failed to load model list",
|
||||||
"models_count": "{{count}} available models",
|
"models_count": "{{count}} available models",
|
||||||
"version_check_title": "Update Check",
|
"version_check_title": "Update Check",
|
||||||
|
|||||||
@@ -249,10 +249,10 @@
|
|||||||
"vertex_edit_modal_url_label": "Base URL (必填):",
|
"vertex_edit_modal_url_label": "Base URL (必填):",
|
||||||
"vertex_edit_modal_proxy_label": "代理 URL (可选):",
|
"vertex_edit_modal_proxy_label": "代理 URL (可选):",
|
||||||
"vertex_delete_confirm": "确定要删除这个Vertex配置吗?",
|
"vertex_delete_confirm": "确定要删除这个Vertex配置吗?",
|
||||||
"vertex_models_label": "模型映射 (别名必填):",
|
"vertex_models_label": "模型别名 (别名必填):",
|
||||||
"vertex_models_add_btn": "添加映射",
|
"vertex_models_add_btn": "添加映射",
|
||||||
"vertex_models_hint": "每条映射需要填写原模型与别名。",
|
"vertex_models_hint": "每条别名需要填写原模型与别名。",
|
||||||
"vertex_models_count": "映射数量",
|
"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",
|
||||||
@@ -293,12 +293,12 @@
|
|||||||
"openai_model_name_placeholder": "模型名称,如 moonshotai/kimi-k2:free",
|
"openai_model_name_placeholder": "模型名称,如 moonshotai/kimi-k2:free",
|
||||||
"openai_model_alias_placeholder": "模型别名 (可选)",
|
"openai_model_alias_placeholder": "模型别名 (可选)",
|
||||||
"openai_models_add_btn": "添加模型",
|
"openai_models_add_btn": "添加模型",
|
||||||
"openai_models_fetch_button": "从 /v1/models 获取",
|
"openai_models_fetch_button": "从 /models 获取",
|
||||||
"openai_models_fetch_title": "从 /v1/models 选择模型",
|
"openai_models_fetch_title": "从 /models 选择模型",
|
||||||
"openai_models_fetch_hint": "使用上方 Base URL 调用 /v1/models 端点,附带首个 API Key(Bearer)与自定义请求头。",
|
"openai_models_fetch_hint": "使用上方 Base URL 调用 /models 端点,附带首个 API Key(Bearer)与自定义请求头。",
|
||||||
"openai_models_fetch_url_label": "请求地址",
|
"openai_models_fetch_url_label": "请求地址",
|
||||||
"openai_models_fetch_refresh": "重新获取",
|
"openai_models_fetch_refresh": "重新获取",
|
||||||
"openai_models_fetch_loading": "正在从 /v1/models 获取模型列表...",
|
"openai_models_fetch_loading": "正在从 /models 获取模型列表...",
|
||||||
"openai_models_fetch_empty": "未获取到模型,请检查端点或鉴权信息。",
|
"openai_models_fetch_empty": "未获取到模型,请检查端点或鉴权信息。",
|
||||||
"openai_models_fetch_error": "获取模型失败",
|
"openai_models_fetch_error": "获取模型失败",
|
||||||
"openai_models_fetch_back": "返回编辑",
|
"openai_models_fetch_back": "返回编辑",
|
||||||
@@ -316,7 +316,7 @@
|
|||||||
"openai_keys_count": "密钥数量",
|
"openai_keys_count": "密钥数量",
|
||||||
"openai_models_count": "模型数量",
|
"openai_models_count": "模型数量",
|
||||||
"openai_test_title": "连通性测试",
|
"openai_test_title": "连通性测试",
|
||||||
"openai_test_hint": "使用当前配置向 /v1/chat/completions 请求,验证是否可用。",
|
"openai_test_hint": "使用当前配置向 /chat/completions 请求,验证是否可用。",
|
||||||
"openai_test_model_placeholder": "选择或输入要测试的模型",
|
"openai_test_model_placeholder": "选择或输入要测试的模型",
|
||||||
"openai_test_action": "发送测试",
|
"openai_test_action": "发送测试",
|
||||||
"openai_test_running": "正在发送测试请求...",
|
"openai_test_running": "正在发送测试请求...",
|
||||||
@@ -395,7 +395,19 @@
|
|||||||
"models_unsupported": "当前版本不支持此功能",
|
"models_unsupported": "当前版本不支持此功能",
|
||||||
"models_unsupported_desc": "请更新 CLI Proxy API 到最新版本后重试",
|
"models_unsupported_desc": "请更新 CLI Proxy API 到最新版本后重试",
|
||||||
"models_excluded_badge": "已排除",
|
"models_excluded_badge": "已排除",
|
||||||
"models_excluded_hint": "此模型已被 OAuth 排除"
|
"models_excluded_hint": "此模型已被 OAuth 排除",
|
||||||
|
"status_toggle_label": "启用",
|
||||||
|
"status_enabled_success": "已启用 \"{{name}}\"",
|
||||||
|
"status_disabled_success": "已停用 \"{{name}}\"",
|
||||||
|
"prefix_proxy_button": "配置 prefix/proxy_url",
|
||||||
|
"prefix_proxy_loading": "正在加载凭证文件...",
|
||||||
|
"prefix_proxy_source_label": "凭证 JSON",
|
||||||
|
"prefix_label": "prefix",
|
||||||
|
"proxy_url_label": "proxy_url",
|
||||||
|
"prefix_placeholder": "",
|
||||||
|
"proxy_url_placeholder": "socks5://username:password@proxy_ip:port/",
|
||||||
|
"prefix_proxy_invalid_json": "该凭证文件不是 JSON 对象,无法编辑。",
|
||||||
|
"prefix_proxy_saved_success": "已更新 \"{{name}}\""
|
||||||
},
|
},
|
||||||
"antigravity_quota": {
|
"antigravity_quota": {
|
||||||
"title": "Antigravity 额度",
|
"title": "Antigravity 额度",
|
||||||
@@ -476,8 +488,10 @@
|
|||||||
"provider_placeholder": "例如 gemini-cli / openai",
|
"provider_placeholder": "例如 gemini-cli / openai",
|
||||||
"provider_hint": "默认选中当前筛选的提供商,也可直接输入或选择其他名称。",
|
"provider_hint": "默认选中当前筛选的提供商,也可直接输入或选择其他名称。",
|
||||||
"models_label": "排除的模型",
|
"models_label": "排除的模型",
|
||||||
"models_placeholder": "gpt-4.1-mini\n*-preview",
|
"models_loading": "正在加载模型列表...",
|
||||||
"models_hint": "逗号或换行分隔;留空保存将删除该提供商记录;支持 * 通配符。",
|
"models_unsupported": "当前 CPA 版本不支持获取模型列表。",
|
||||||
|
"models_loaded": "已加载 {{count}} 个模型,勾选要排除的模型。",
|
||||||
|
"no_models_available": "该提供商暂无可用模型列表。",
|
||||||
"save": "保存/更新",
|
"save": "保存/更新",
|
||||||
"saving": "正在保存...",
|
"saving": "正在保存...",
|
||||||
"save_success": "排除列表已更新",
|
"save_success": "排除列表已更新",
|
||||||
@@ -500,33 +514,35 @@
|
|||||||
"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": {
|
"oauth_model_alias": {
|
||||||
"title": "OAuth 模型映射",
|
"title": "OAuth 模型别名",
|
||||||
"add": "新增映射",
|
"add": "新增别名",
|
||||||
"add_title": "新增提供商模型映射",
|
"add_title": "新增提供商模型别名",
|
||||||
"provider_label": "提供商",
|
"provider_label": "提供商",
|
||||||
"provider_placeholder": "例如 gemini-cli / vertex",
|
"provider_placeholder": "例如 gemini-cli / vertex",
|
||||||
"provider_hint": "默认选中当前筛选的提供商,也可直接输入或选择其他名称。",
|
"provider_hint": "默认选中当前筛选的提供商,也可直接输入或选择其他名称。",
|
||||||
"mappings_label": "模型映射",
|
"model_source_loading": "正在加载模型列表...",
|
||||||
"mapping_name_placeholder": "原模型名称",
|
"model_source_unsupported": "当前 CPA 版本不支持获取模型列表(仍可手动输入)。",
|
||||||
"mapping_alias_placeholder": "别名 (必填)",
|
"model_source_loaded": "已加载 {{count}} 个模型,可在“原模型名称”中下拉选择;也可手动输入。留空保存将删除该提供商记录;开启“保留原名”会在保留原模型名的同时新增别名。",
|
||||||
"mapping_fork_label": "保留原名",
|
"alias_label": "模型别名",
|
||||||
"mappings_hint": "留空保存将删除该提供商记录;开启“保留原名”会在保留原模型名的同时新增别名。",
|
"alias_name_placeholder": "原模型名称",
|
||||||
"add_mapping": "添加映射",
|
"alias_placeholder": "别名 (必填)",
|
||||||
|
"alias_fork_label": "保留原名",
|
||||||
|
"add_alias": "添加别名",
|
||||||
"save": "保存/更新",
|
"save": "保存/更新",
|
||||||
"save_success": "模型映射已更新",
|
"save_success": "模型别名已更新",
|
||||||
"save_failed": "更新模型映射失败",
|
"save_failed": "更新模型别名失败",
|
||||||
"delete": "删除提供商",
|
"delete": "删除提供商",
|
||||||
"delete_confirm": "确定要删除 {{provider}} 的模型映射吗?",
|
"delete_confirm": "确定要删除 {{provider}} 的模型别名吗?",
|
||||||
"delete_success": "已删除该提供商的模型映射",
|
"delete_success": "已删除该提供商的模型别名",
|
||||||
"delete_failed": "删除模型映射失败",
|
"delete_failed": "删除模型别名失败",
|
||||||
"no_models": "未配置模型映射",
|
"no_models": "未配置模型别名",
|
||||||
"model_count": "映射 {{count}} 条模型",
|
"model_count": "{{count}} 条别名",
|
||||||
"list_empty_all": "暂无任何提供商的模型映射,点击“新增映射”创建。",
|
"list_empty_all": "暂无任何提供商的模型别名,点击“新增别名”创建。",
|
||||||
"provider_required": "请先填写提供商名称",
|
"provider_required": "请先填写提供商名称",
|
||||||
"upgrade_required": "当前 CPA 版本不支持模型映射功能,请升级 CPA 版本",
|
"upgrade_required": "当前 CPA 版本不支持模型别名功能,请升级 CPA 版本",
|
||||||
"upgrade_required_title": "需要升级 CPA 版本",
|
"upgrade_required_title": "需要升级 CPA 版本",
|
||||||
"upgrade_required_desc": "当前服务器版本不支持 OAuth 模型映射功能,请升级到最新版本的 CPA(CLI Proxy API)后重试。"
|
"upgrade_required_desc": "当前服务器版本不支持 OAuth 模型别名功能,请升级到最新版本的 CPA(CLI Proxy API)后重试。"
|
||||||
},
|
},
|
||||||
"auth_login": {
|
"auth_login": {
|
||||||
"codex_oauth_title": "Codex OAuth",
|
"codex_oauth_title": "Codex OAuth",
|
||||||
@@ -787,9 +803,9 @@
|
|||||||
"not_loaded": "未加载",
|
"not_loaded": "未加载",
|
||||||
"seconds_ago": "秒前",
|
"seconds_ago": "秒前",
|
||||||
"models_title": "可用模型列表",
|
"models_title": "可用模型列表",
|
||||||
"models_desc": "展示 /v1/models 返回的模型,并自动使用服务器保存的 API Key 进行鉴权。",
|
"models_desc": "展示 /models 返回的模型,并自动使用服务器保存的 API Key 进行鉴权。",
|
||||||
"models_loading": "正在加载可用模型...",
|
"models_loading": "正在加载可用模型...",
|
||||||
"models_empty": "未从 /v1/models 获取到模型数据",
|
"models_empty": "未从 /models 获取到模型数据",
|
||||||
"models_error": "获取模型列表失败",
|
"models_error": "获取模型列表失败",
|
||||||
"models_count": "可用模型 {{count}} 个",
|
"models_count": "可用模型 {{count}} 个",
|
||||||
"version_check_title": "版本检查",
|
"version_check_title": "版本检查",
|
||||||
|
|||||||
@@ -23,12 +23,12 @@ 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() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { showNotification } = useNotificationStore();
|
const { showNotification, showConfirmation } = useNotificationStore();
|
||||||
const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
|
const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
|
||||||
const connectionStatus = useAuthStore((state) => state.connectionStatus);
|
const connectionStatus = useAuthStore((state) => state.connectionStatus);
|
||||||
|
|
||||||
@@ -151,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 =
|
||||||
@@ -180,18 +180,25 @@ export function AiProvidersPage() {
|
|||||||
const deleteGemini = async (index: number) => {
|
const deleteGemini = async (index: number) => {
|
||||||
const entry = geminiKeys[index];
|
const entry = geminiKeys[index];
|
||||||
if (!entry) return;
|
if (!entry) return;
|
||||||
if (!window.confirm(t('ai_providers.gemini_delete_confirm'))) return;
|
showConfirmation({
|
||||||
try {
|
title: t('ai_providers.gemini_delete_title', { defaultValue: 'Delete Gemini Key' }),
|
||||||
await providersApi.deleteGeminiKey(entry.apiKey);
|
message: t('ai_providers.gemini_delete_confirm'),
|
||||||
const next = geminiKeys.filter((_, idx) => idx !== index);
|
variant: 'danger',
|
||||||
setGeminiKeys(next);
|
confirmText: t('common.confirm'),
|
||||||
updateConfigValue('gemini-api-key', next);
|
onConfirm: async () => {
|
||||||
clearCache('gemini-api-key');
|
try {
|
||||||
showNotification(t('notification.gemini_key_deleted'), 'success');
|
await providersApi.deleteGeminiKey(entry.apiKey);
|
||||||
} catch (err: unknown) {
|
const next = geminiKeys.filter((_, idx) => idx !== index);
|
||||||
const message = getErrorMessage(err);
|
setGeminiKeys(next);
|
||||||
showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
|
updateConfigValue('gemini-api-key', next);
|
||||||
}
|
clearCache('gemini-api-key');
|
||||||
|
showNotification(t('notification.gemini_key_deleted'), 'success');
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const message = getErrorMessage(err);
|
||||||
|
showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const setConfigEnabled = async (
|
const setConfigEnabled = async (
|
||||||
@@ -307,7 +314,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),
|
||||||
};
|
};
|
||||||
@@ -352,27 +359,34 @@ export function AiProvidersPage() {
|
|||||||
const source = type === 'codex' ? codexConfigs : claudeConfigs;
|
const source = type === 'codex' ? codexConfigs : claudeConfigs;
|
||||||
const entry = source[index];
|
const entry = source[index];
|
||||||
if (!entry) return;
|
if (!entry) return;
|
||||||
if (!window.confirm(t(`ai_providers.${type}_delete_confirm`))) return;
|
showConfirmation({
|
||||||
try {
|
title: t(`ai_providers.${type}_delete_title`, { defaultValue: `Delete ${type === 'codex' ? 'Codex' : 'Claude'} Config` }),
|
||||||
if (type === 'codex') {
|
message: t(`ai_providers.${type}_delete_confirm`),
|
||||||
await providersApi.deleteCodexConfig(entry.apiKey);
|
variant: 'danger',
|
||||||
const next = codexConfigs.filter((_, idx) => idx !== index);
|
confirmText: t('common.confirm'),
|
||||||
setCodexConfigs(next);
|
onConfirm: async () => {
|
||||||
updateConfigValue('codex-api-key', next);
|
try {
|
||||||
clearCache('codex-api-key');
|
if (type === 'codex') {
|
||||||
showNotification(t('notification.codex_config_deleted'), 'success');
|
await providersApi.deleteCodexConfig(entry.apiKey);
|
||||||
} else {
|
const next = codexConfigs.filter((_, idx) => idx !== index);
|
||||||
await providersApi.deleteClaudeConfig(entry.apiKey);
|
setCodexConfigs(next);
|
||||||
const next = claudeConfigs.filter((_, idx) => idx !== index);
|
updateConfigValue('codex-api-key', next);
|
||||||
setClaudeConfigs(next);
|
clearCache('codex-api-key');
|
||||||
updateConfigValue('claude-api-key', next);
|
showNotification(t('notification.codex_config_deleted'), 'success');
|
||||||
clearCache('claude-api-key');
|
} else {
|
||||||
showNotification(t('notification.claude_config_deleted'), 'success');
|
await providersApi.deleteClaudeConfig(entry.apiKey);
|
||||||
}
|
const next = claudeConfigs.filter((_, idx) => idx !== index);
|
||||||
} catch (err: unknown) {
|
setClaudeConfigs(next);
|
||||||
const message = getErrorMessage(err);
|
updateConfigValue('claude-api-key', next);
|
||||||
showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
|
clearCache('claude-api-key');
|
||||||
}
|
showNotification(t('notification.claude_config_deleted'), 'success');
|
||||||
|
}
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const message = getErrorMessage(err);
|
||||||
|
showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const saveVertex = async (form: VertexFormState, editIndex: number | null) => {
|
const saveVertex = async (form: VertexFormState, editIndex: number | null) => {
|
||||||
@@ -390,7 +404,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: form.modelEntries
|
models: form.modelEntries
|
||||||
.map((entry) => {
|
.map((entry) => {
|
||||||
const name = entry.name.trim();
|
const name = entry.name.trim();
|
||||||
@@ -427,18 +441,25 @@ export function AiProvidersPage() {
|
|||||||
const deleteVertex = async (index: number) => {
|
const deleteVertex = async (index: number) => {
|
||||||
const entry = vertexConfigs[index];
|
const entry = vertexConfigs[index];
|
||||||
if (!entry) return;
|
if (!entry) return;
|
||||||
if (!window.confirm(t('ai_providers.vertex_delete_confirm'))) return;
|
showConfirmation({
|
||||||
try {
|
title: t('ai_providers.vertex_delete_title', { defaultValue: 'Delete Vertex Config' }),
|
||||||
await providersApi.deleteVertexConfig(entry.apiKey);
|
message: t('ai_providers.vertex_delete_confirm'),
|
||||||
const next = vertexConfigs.filter((_, idx) => idx !== index);
|
variant: 'danger',
|
||||||
setVertexConfigs(next);
|
confirmText: t('common.confirm'),
|
||||||
updateConfigValue('vertex-api-key', next);
|
onConfirm: async () => {
|
||||||
clearCache('vertex-api-key');
|
try {
|
||||||
showNotification(t('notification.vertex_config_deleted'), 'success');
|
await providersApi.deleteVertexConfig(entry.apiKey);
|
||||||
} catch (err: unknown) {
|
const next = vertexConfigs.filter((_, idx) => idx !== index);
|
||||||
const message = getErrorMessage(err);
|
setVertexConfigs(next);
|
||||||
showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
|
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) => {
|
||||||
@@ -485,18 +506,25 @@ export function AiProvidersPage() {
|
|||||||
const deleteOpenai = async (index: number) => {
|
const deleteOpenai = async (index: number) => {
|
||||||
const entry = openaiProviders[index];
|
const entry = openaiProviders[index];
|
||||||
if (!entry) return;
|
if (!entry) return;
|
||||||
if (!window.confirm(t('ai_providers.openai_delete_confirm'))) return;
|
showConfirmation({
|
||||||
try {
|
title: t('ai_providers.openai_delete_title', { defaultValue: 'Delete OpenAI Provider' }),
|
||||||
await providersApi.deleteOpenAIProvider(entry.name);
|
message: t('ai_providers.openai_delete_confirm'),
|
||||||
const next = openaiProviders.filter((_, idx) => idx !== index);
|
variant: 'danger',
|
||||||
setOpenaiProviders(next);
|
confirmText: t('common.confirm'),
|
||||||
updateConfigValue('openai-compatibility', next);
|
onConfirm: async () => {
|
||||||
clearCache('openai-compatibility');
|
try {
|
||||||
showNotification(t('notification.openai_provider_deleted'), 'success');
|
await providersApi.deleteOpenAIProvider(entry.name);
|
||||||
} catch (err: unknown) {
|
const next = openaiProviders.filter((_, idx) => idx !== index);
|
||||||
const message = getErrorMessage(err);
|
setOpenaiProviders(next);
|
||||||
showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
|
updateConfigValue('openai-compatibility', next);
|
||||||
}
|
clearCache('openai-compatibility');
|
||||||
|
showNotification(t('notification.openai_provider_deleted'), 'success');
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const message = getErrorMessage(err);
|
||||||
|
showNotification(`${t('notification.delete_failed')}: ${message}`, 'error');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const geminiModalIndex = modal?.type === 'gemini' ? modal.index : null;
|
const geminiModalIndex = modal?.type === 'gemini' ? modal.index : null;
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ import styles from './ApiKeysPage.module.scss';
|
|||||||
|
|
||||||
export function ApiKeysPage() {
|
export function ApiKeysPage() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { showNotification } = useNotificationStore();
|
const { showNotification, showConfirmation } = useNotificationStore();
|
||||||
const connectionStatus = useAuthStore((state) => state.connectionStatus);
|
const connectionStatus = useAuthStore((state) => state.connectionStatus);
|
||||||
|
|
||||||
const config = useConfigStore((state) => state.config);
|
const config = useConfigStore((state) => state.config);
|
||||||
@@ -29,7 +29,6 @@ export function ApiKeysPage() {
|
|||||||
const [editingIndex, setEditingIndex] = useState<number | null>(null);
|
const [editingIndex, setEditingIndex] = useState<number | null>(null);
|
||||||
const [inputValue, setInputValue] = useState('');
|
const [inputValue, setInputValue] = useState('');
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
const [deletingIndex, setDeletingIndex] = useState<number | null>(null);
|
|
||||||
|
|
||||||
const disableControls = useMemo(() => connectionStatus !== 'connected', [connectionStatus]);
|
const disableControls = useMemo(() => connectionStatus !== 'connected', [connectionStatus]);
|
||||||
|
|
||||||
@@ -115,21 +114,42 @@ export function ApiKeysPage() {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDelete = async (index: number) => {
|
const handleDelete = (index: number) => {
|
||||||
if (!window.confirm(t('api_keys.delete_confirm'))) return;
|
const apiKeyToDelete = apiKeys[index];
|
||||||
setDeletingIndex(index);
|
if (!apiKeyToDelete) {
|
||||||
try {
|
showNotification(t('notification.delete_failed'), 'error');
|
||||||
await apiKeysApi.delete(index);
|
return;
|
||||||
const nextKeys = apiKeys.filter((_, idx) => idx !== index);
|
|
||||||
setApiKeys(nextKeys);
|
|
||||||
updateConfigValue('api-keys', nextKeys);
|
|
||||||
clearCache('api-keys');
|
|
||||||
showNotification(t('notification.api_key_deleted'), 'success');
|
|
||||||
} catch (err: any) {
|
|
||||||
showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
|
|
||||||
} finally {
|
|
||||||
setDeletingIndex(null);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
showConfirmation({
|
||||||
|
title: t('common.delete'),
|
||||||
|
message: t('api_keys.delete_confirm'),
|
||||||
|
variant: 'danger',
|
||||||
|
onConfirm: async () => {
|
||||||
|
const latestKeys = useConfigStore.getState().config?.apiKeys;
|
||||||
|
const currentKeys = Array.isArray(latestKeys) ? latestKeys : [];
|
||||||
|
const deleteIndex =
|
||||||
|
currentKeys[index] === apiKeyToDelete
|
||||||
|
? index
|
||||||
|
: currentKeys.findIndex((key) => key === apiKeyToDelete);
|
||||||
|
|
||||||
|
if (deleteIndex < 0) {
|
||||||
|
showNotification(t('notification.delete_failed'), 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await apiKeysApi.delete(deleteIndex);
|
||||||
|
const nextKeys = currentKeys.filter((_, idx) => idx !== deleteIndex);
|
||||||
|
setApiKeys(nextKeys);
|
||||||
|
updateConfigValue('api-keys', nextKeys);
|
||||||
|
clearCache('api-keys');
|
||||||
|
showNotification(t('notification.api_key_deleted'), 'success');
|
||||||
|
} catch (err: any) {
|
||||||
|
showNotification(`${t('notification.delete_failed')}: ${err?.message || ''}`, 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const actionButtons = (
|
const actionButtons = (
|
||||||
@@ -181,8 +201,7 @@ export function ApiKeysPage() {
|
|||||||
variant="danger"
|
variant="danger"
|
||||||
size="sm"
|
size="sm"
|
||||||
onClick={() => handleDelete(index)}
|
onClick={() => handleDelete(index)}
|
||||||
disabled={disableControls || deletingIndex === index}
|
disabled={disableControls}
|
||||||
loading={deletingIndex === index}
|
|
||||||
>
|
>
|
||||||
{t('common.delete')}
|
{t('common.delete')}
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -277,27 +277,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.antigravityCard {
|
.antigravityCard {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(180deg, rgba(224, 247, 250, 0.12), rgba(224, 247, 250, 0));
|
||||||
180deg,
|
|
||||||
rgba(224, 247, 250, 0.12),
|
|
||||||
rgba(224, 247, 250, 0)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.codexCard {
|
.codexCard {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(180deg, rgba(255, 243, 224, 0.18), rgba(255, 243, 224, 0));
|
||||||
180deg,
|
|
||||||
rgba(255, 243, 224, 0.18),
|
|
||||||
rgba(255, 243, 224, 0)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.geminiCliCard {
|
.geminiCliCard {
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(180deg, rgba(231, 239, 255, 0.2), rgba(231, 239, 255, 0));
|
||||||
180deg,
|
|
||||||
rgba(231, 239, 255, 0.2),
|
|
||||||
rgba(231, 239, 255, 0)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.quotaSection {
|
.quotaSection {
|
||||||
@@ -446,7 +434,10 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: $spacing-sm;
|
gap: $spacing-sm;
|
||||||
transition: transform $transition-fast, box-shadow $transition-fast, border-color $transition-fast;
|
transition:
|
||||||
|
transform $transition-fast,
|
||||||
|
box-shadow $transition-fast,
|
||||||
|
border-color $transition-fast;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-2px);
|
transform: translateY(-2px);
|
||||||
@@ -455,6 +446,16 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fileCardDisabled {
|
||||||
|
opacity: 0.6;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: none;
|
||||||
|
box-shadow: none;
|
||||||
|
border-color: var(--border-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.cardHeader {
|
.cardHeader {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -546,7 +547,9 @@
|
|||||||
height: 8px;
|
height: 8px;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
min-width: 6px;
|
min-width: 6px;
|
||||||
transition: transform 0.15s ease, opacity 0.15s ease;
|
transition:
|
||||||
|
transform 0.15s ease,
|
||||||
|
opacity 0.15s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scaleY(1.5);
|
transform: scaleY(1.5);
|
||||||
@@ -597,14 +600,90 @@
|
|||||||
background: var(--failure-badge-bg, #fee2e2);
|
background: var(--failure-badge-bg, #fee2e2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.prefixProxyEditor {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: $spacing-md;
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefixProxyLoading {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: $spacing-sm;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
padding: $spacing-sm 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefixProxyError {
|
||||||
|
padding: $spacing-sm $spacing-md;
|
||||||
|
border-radius: $radius-md;
|
||||||
|
border: 1px solid var(--danger-color);
|
||||||
|
background-color: rgba(239, 68, 68, 0.1);
|
||||||
|
color: var(--danger-color);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefixProxyJsonWrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefixProxyLabel {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefixProxyTextarea {
|
||||||
|
width: 100%;
|
||||||
|
padding: $spacing-sm $spacing-md;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: $radius-md;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: monospace;
|
||||||
|
resize: vertical;
|
||||||
|
min-height: 120px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.prefixProxyFields {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: $spacing-sm;
|
||||||
|
|
||||||
|
:global(.form-group) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.cardActions {
|
.cardActions {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: $spacing-xs;
|
gap: $spacing-xs;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
padding-top: $spacing-sm;
|
padding-top: $spacing-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.statusToggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: $spacing-sm;
|
||||||
|
}
|
||||||
|
|
||||||
.iconButton:global(.btn.btn-sm) {
|
.iconButton:global(.btn.btn-sm) {
|
||||||
width: 34px;
|
width: 34px;
|
||||||
height: 34px;
|
height: 34px;
|
||||||
@@ -916,3 +995,53 @@
|
|||||||
border: 1px solid var(--danger-color);
|
border: 1px solid var(--danger-color);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 排除模型勾选列表
|
||||||
|
.excludedCheckList {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: $spacing-xs;
|
||||||
|
max-height: 280px;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid var(--border-color);
|
||||||
|
border-radius: $radius-md;
|
||||||
|
padding: $spacing-sm;
|
||||||
|
background-color: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.excludedCheckItem {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: $spacing-sm;
|
||||||
|
padding: $spacing-xs $spacing-sm;
|
||||||
|
border-radius: $radius-sm;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color $transition-fast;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--bg-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"] {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
accent-color: var(--primary-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.excludedCheckLabel {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: $spacing-sm;
|
||||||
|
font-size: 13px;
|
||||||
|
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||||
|
color: var(--text-primary);
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.excludedCheckDisplayName {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-tertiary);
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -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"
|
||||||
|
|||||||
@@ -371,7 +371,7 @@ type TabType = 'logs' | 'errors';
|
|||||||
|
|
||||||
export function LogsPage() {
|
export function LogsPage() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const { showNotification } = useNotificationStore();
|
const { showNotification, showConfirmation } = useNotificationStore();
|
||||||
const connectionStatus = useAuthStore((state) => state.connectionStatus);
|
const connectionStatus = useAuthStore((state) => state.connectionStatus);
|
||||||
const requestLogEnabled = useConfigStore((state) => state.config?.requestLog ?? false);
|
const requestLogEnabled = useConfigStore((state) => state.config?.requestLog ?? false);
|
||||||
|
|
||||||
@@ -478,19 +478,26 @@ export function LogsPage() {
|
|||||||
useHeaderRefresh(() => loadLogs(false));
|
useHeaderRefresh(() => loadLogs(false));
|
||||||
|
|
||||||
const clearLogs = async () => {
|
const clearLogs = async () => {
|
||||||
if (!window.confirm(t('logs.clear_confirm'))) return;
|
showConfirmation({
|
||||||
try {
|
title: t('logs.clear_confirm_title', { defaultValue: 'Clear Logs' }),
|
||||||
await logsApi.clearLogs();
|
message: t('logs.clear_confirm'),
|
||||||
setLogState({ buffer: [], visibleFrom: 0 });
|
variant: 'danger',
|
||||||
latestTimestampRef.current = 0;
|
confirmText: t('common.confirm'),
|
||||||
showNotification(t('logs.clear_success'), 'success');
|
onConfirm: async () => {
|
||||||
} catch (err: unknown) {
|
try {
|
||||||
const message = getErrorMessage(err);
|
await logsApi.clearLogs();
|
||||||
showNotification(
|
setLogState({ buffer: [], visibleFrom: 0 });
|
||||||
`${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
|
latestTimestampRef.current = 0;
|
||||||
'error'
|
showNotification(t('logs.clear_success'), 'success');
|
||||||
);
|
} catch (err: unknown) {
|
||||||
}
|
const message = getErrorMessage(err);
|
||||||
|
showNotification(
|
||||||
|
`${t('notification.delete_failed')}${message ? `: ${message}` : ''}`,
|
||||||
|
'error'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const downloadLogs = () => {
|
const downloadLogs = () => {
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import styles from './SystemPage.module.scss';
|
|||||||
|
|
||||||
export function SystemPage() {
|
export function SystemPage() {
|
||||||
const { t, i18n } = useTranslation();
|
const { t, i18n } = useTranslation();
|
||||||
const { showNotification } = useNotificationStore();
|
const { showNotification, showConfirmation } = useNotificationStore();
|
||||||
const auth = useAuthStore();
|
const auth = useAuthStore();
|
||||||
const config = useConfigStore((state) => state.config);
|
const config = useConfigStore((state) => state.config);
|
||||||
const fetchConfig = useConfigStore((state) => state.fetchConfig);
|
const fetchConfig = useConfigStore((state) => state.fetchConfig);
|
||||||
@@ -106,12 +106,19 @@ export function SystemPage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const handleClearLoginStorage = () => {
|
const handleClearLoginStorage = () => {
|
||||||
if (!window.confirm(t('system_info.clear_login_confirm'))) return;
|
showConfirmation({
|
||||||
auth.logout();
|
title: t('system_info.clear_login_title', { defaultValue: 'Clear Login Storage' }),
|
||||||
if (typeof localStorage === 'undefined') return;
|
message: t('system_info.clear_login_confirm'),
|
||||||
const keysToRemove = [STORAGE_KEY_AUTH, 'isLoggedIn', 'apiBase', 'apiUrl', 'managementKey'];
|
variant: 'danger',
|
||||||
keysToRemove.forEach((key) => localStorage.removeItem(key));
|
confirmText: t('common.confirm'),
|
||||||
showNotification(t('notification.login_storage_cleared'), 'success');
|
onConfirm: () => {
|
||||||
|
auth.logout();
|
||||||
|
if (typeof localStorage === 'undefined') return;
|
||||||
|
const keysToRemove = [STORAGE_KEY_AUTH, 'isLoggedIn', 'apiBase', 'apiUrl', 'managementKey'];
|
||||||
|
keysToRemove.forEach((key) => localStorage.removeItem(key));
|
||||||
|
showNotification(t('notification.login_storage_cleared'), 'success');
|
||||||
|
},
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -456,6 +456,18 @@
|
|||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.requestCountCell {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 6px;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
.requestBreakdown {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
// Pricing Section (80%比例)
|
// Pricing Section (80%比例)
|
||||||
.pricingSection {
|
.pricingSection {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@@ -4,12 +4,22 @@
|
|||||||
|
|
||||||
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';
|
import type { OAuthModelAliasEntry } from '@/types';
|
||||||
|
|
||||||
|
type StatusError = { status?: number };
|
||||||
|
type AuthFileStatusResponse = { status: string; disabled: boolean };
|
||||||
|
|
||||||
|
const getStatusCode = (err: unknown): number | undefined => {
|
||||||
|
if (!err || typeof err !== 'object') return undefined;
|
||||||
|
if ('status' in err) return (err as StatusError).status;
|
||||||
|
return undefined;
|
||||||
|
};
|
||||||
|
|
||||||
const normalizeOauthExcludedModels = (payload: unknown): Record<string, string[]> => {
|
const normalizeOauthExcludedModels = (payload: unknown): Record<string, string[]> => {
|
||||||
if (!payload || typeof payload !== 'object') return {};
|
if (!payload || typeof payload !== 'object') return {};
|
||||||
|
|
||||||
const source = (payload as any)['oauth-excluded-models'] ?? (payload as any).items ?? payload;
|
const record = payload as Record<string, unknown>;
|
||||||
|
const source = record['oauth-excluded-models'] ?? record.items ?? payload;
|
||||||
if (!source || typeof source !== 'object') return {};
|
if (!source || typeof source !== 'object') return {};
|
||||||
|
|
||||||
const result: Record<string, string[]> = {};
|
const result: Record<string, string[]> = {};
|
||||||
@@ -43,9 +53,61 @@ const normalizeOauthExcludedModels = (payload: unknown): Record<string, string[]
|
|||||||
return result;
|
return result;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const normalizeOauthModelAlias = (payload: unknown): Record<string, OAuthModelAliasEntry[]> => {
|
||||||
|
if (!payload || typeof payload !== 'object') return {};
|
||||||
|
|
||||||
|
const record = payload as Record<string, unknown>;
|
||||||
|
const source =
|
||||||
|
record['oauth-model-alias'] ??
|
||||||
|
record.items ??
|
||||||
|
payload;
|
||||||
|
if (!source || typeof source !== 'object') return {};
|
||||||
|
|
||||||
|
const result: Record<string, OAuthModelAliasEntry[]> = {};
|
||||||
|
|
||||||
|
Object.entries(source as Record<string, unknown>).forEach(([channel, mappings]) => {
|
||||||
|
const key = String(channel ?? '')
|
||||||
|
.trim()
|
||||||
|
.toLowerCase();
|
||||||
|
if (!key) return;
|
||||||
|
if (!Array.isArray(mappings)) return;
|
||||||
|
|
||||||
|
const seen = new Set<string>();
|
||||||
|
const normalized = mappings
|
||||||
|
.map((item) => {
|
||||||
|
if (!item || typeof item !== 'object') return null;
|
||||||
|
const entry = item as Record<string, unknown>;
|
||||||
|
const name = String(entry.name ?? entry.id ?? entry.model ?? '').trim();
|
||||||
|
const alias = String(entry.alias ?? '').trim();
|
||||||
|
if (!name || !alias) return null;
|
||||||
|
const fork = entry.fork === true;
|
||||||
|
return fork ? { name, alias, fork } : { name, alias };
|
||||||
|
})
|
||||||
|
.filter(Boolean)
|
||||||
|
.filter((entry) => {
|
||||||
|
const aliasEntry = entry as OAuthModelAliasEntry;
|
||||||
|
const dedupeKey = `${aliasEntry.name.toLowerCase()}::${aliasEntry.alias.toLowerCase()}::${aliasEntry.fork ? '1' : '0'}`;
|
||||||
|
if (seen.has(dedupeKey)) return false;
|
||||||
|
seen.add(dedupeKey);
|
||||||
|
return true;
|
||||||
|
}) as OAuthModelAliasEntry[];
|
||||||
|
|
||||||
|
if (normalized.length) {
|
||||||
|
result[key] = normalized;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
|
||||||
|
const OAUTH_MODEL_ALIAS_ENDPOINT = '/oauth-model-alias';
|
||||||
|
|
||||||
export const authFilesApi = {
|
export const authFilesApi = {
|
||||||
list: () => apiClient.get<AuthFilesResponse>('/auth-files'),
|
list: () => apiClient.get<AuthFilesResponse>('/auth-files'),
|
||||||
|
|
||||||
|
setStatus: (name: string, disabled: boolean) =>
|
||||||
|
apiClient.patch<AuthFileStatusResponse>('/auth-files/status', { name, disabled }),
|
||||||
|
|
||||||
upload: (file: File) => {
|
upload: (file: File) => {
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('file', file, file.name);
|
formData.append('file', file, file.name);
|
||||||
@@ -56,6 +118,14 @@ 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');
|
||||||
@@ -71,40 +141,45 @@ export const authFilesApi = {
|
|||||||
replaceOauthExcludedModels: (map: Record<string, string[]>) =>
|
replaceOauthExcludedModels: (map: Record<string, string[]>) =>
|
||||||
apiClient.put('/oauth-excluded-models', normalizeOauthExcludedModels(map)),
|
apiClient.put('/oauth-excluded-models', normalizeOauthExcludedModels(map)),
|
||||||
|
|
||||||
// OAuth 模型映射
|
// OAuth 模型别名
|
||||||
async getOauthModelMappings(): Promise<Record<string, OAuthModelMappingEntry[]>> {
|
async getOauthModelAlias(): Promise<Record<string, OAuthModelAliasEntry[]>> {
|
||||||
const data = await apiClient.get('/oauth-model-mappings');
|
const data = await apiClient.get(OAUTH_MODEL_ALIAS_ENDPOINT);
|
||||||
const payload = (data && (data['oauth-model-mappings'] ?? data.items ?? data)) as any;
|
return normalizeOauthModelAlias(data);
|
||||||
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[]) =>
|
saveOauthModelAlias: async (channel: string, aliases: OAuthModelAliasEntry[]) => {
|
||||||
apiClient.patch('/oauth-model-mappings', { channel, mappings }),
|
const normalizedChannel = String(channel ?? '')
|
||||||
|
.trim()
|
||||||
|
.toLowerCase();
|
||||||
|
const normalizedAliases = normalizeOauthModelAlias({ [normalizedChannel]: aliases })[normalizedChannel] ?? [];
|
||||||
|
await apiClient.patch(OAUTH_MODEL_ALIAS_ENDPOINT, { channel: normalizedChannel, aliases: normalizedAliases });
|
||||||
|
},
|
||||||
|
|
||||||
deleteOauthModelMappings: (channel: string) =>
|
deleteOauthModelAlias: async (channel: string) => {
|
||||||
apiClient.delete(`/oauth-model-mappings?channel=${encodeURIComponent(channel)}`),
|
const normalizedChannel = String(channel ?? '')
|
||||||
|
.trim()
|
||||||
|
.toLowerCase();
|
||||||
|
|
||||||
|
try {
|
||||||
|
await apiClient.patch(OAUTH_MODEL_ALIAS_ENDPOINT, { channel: normalizedChannel, aliases: [] });
|
||||||
|
} catch (err: unknown) {
|
||||||
|
const status = getStatusCode(err);
|
||||||
|
if (status !== 405) throw err;
|
||||||
|
await apiClient.delete(`${OAUTH_MODEL_ALIAS_ENDPOINT}?channel=${encodeURIComponent(normalizedChannel)}`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
// 获取认证凭证支持的模型
|
// 获取认证凭证支持的模型
|
||||||
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)}`);
|
||||||
return (data && Array.isArray(data['models'])) ? data['models'] : [];
|
return (data && Array.isArray(data['models'])) ? data['models'] : [];
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取指定 channel 的模型定义
|
||||||
|
async getModelDefinitions(channel: string): Promise<{ id: string; display_name?: string; type?: string; owned_by?: string }[]> {
|
||||||
|
const normalizedChannel = String(channel ?? '').trim().toLowerCase();
|
||||||
|
if (!normalizedChannel) return [];
|
||||||
|
const data = await apiClient.get(`/model-definitions/${encodeURIComponent(normalizedChannel)}`);
|
||||||
|
return (data && Array.isArray(data['models'])) ? data['models'] : [];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -20,12 +20,21 @@ const normalizeBaseUrl = (baseUrl: string): string => {
|
|||||||
const buildModelsEndpoint = (baseUrl: string): string => {
|
const buildModelsEndpoint = (baseUrl: string): string => {
|
||||||
const normalized = normalizeBaseUrl(baseUrl);
|
const normalized = normalizeBaseUrl(baseUrl);
|
||||||
if (!normalized) return '';
|
if (!normalized) return '';
|
||||||
return normalized.endsWith('/v1') ? `${normalized}/models` : `${normalized}/v1/models`;
|
return `${normalized}/models`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const buildV1ModelsEndpoint = (baseUrl: string): string => {
|
||||||
|
const normalized = normalizeBaseUrl(baseUrl);
|
||||||
|
if (!normalized) return '';
|
||||||
|
return `${normalized}/v1/models`;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const modelsApi = {
|
export const modelsApi = {
|
||||||
|
/**
|
||||||
|
* Fetch available models from /v1/models endpoint (for system info page)
|
||||||
|
*/
|
||||||
async fetchModels(baseUrl: string, apiKey?: string, headers: Record<string, string> = {}) {
|
async fetchModels(baseUrl: string, apiKey?: string, headers: Record<string, string> = {}) {
|
||||||
const endpoint = buildModelsEndpoint(baseUrl);
|
const endpoint = buildV1ModelsEndpoint(baseUrl);
|
||||||
if (!endpoint) {
|
if (!endpoint) {
|
||||||
throw new Error('Invalid base url');
|
throw new Error('Invalid base url');
|
||||||
}
|
}
|
||||||
@@ -42,6 +51,9 @@ export const modelsApi = {
|
|||||||
return normalizeModelList(payload, { dedupe: true });
|
return normalizeModelList(payload, { dedupe: true });
|
||||||
},
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fetch models from /models endpoint via api-call (for OpenAI provider discovery)
|
||||||
|
*/
|
||||||
async fetchModelsViaApiCall(
|
async fetchModelsViaApiCall(
|
||||||
baseUrl: string,
|
baseUrl: string,
|
||||||
apiKey?: string,
|
apiKey?: string,
|
||||||
|
|||||||
@@ -8,15 +8,38 @@ import type { Notification, NotificationType } from '@/types';
|
|||||||
import { generateId } from '@/utils/helpers';
|
import { generateId } from '@/utils/helpers';
|
||||||
import { NOTIFICATION_DURATION_MS } from '@/utils/constants';
|
import { NOTIFICATION_DURATION_MS } from '@/utils/constants';
|
||||||
|
|
||||||
|
interface ConfirmationOptions {
|
||||||
|
title?: string;
|
||||||
|
message: string;
|
||||||
|
confirmText?: string;
|
||||||
|
cancelText?: string;
|
||||||
|
variant?: 'danger' | 'primary' | 'secondary';
|
||||||
|
onConfirm: () => void | Promise<void>;
|
||||||
|
onCancel?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
interface NotificationState {
|
interface NotificationState {
|
||||||
notifications: Notification[];
|
notifications: Notification[];
|
||||||
|
confirmation: {
|
||||||
|
isOpen: boolean;
|
||||||
|
isLoading: boolean;
|
||||||
|
options: ConfirmationOptions | null;
|
||||||
|
};
|
||||||
showNotification: (message: string, type?: NotificationType, duration?: number) => void;
|
showNotification: (message: string, type?: NotificationType, duration?: number) => void;
|
||||||
removeNotification: (id: string) => void;
|
removeNotification: (id: string) => void;
|
||||||
clearAll: () => void;
|
clearAll: () => void;
|
||||||
|
showConfirmation: (options: ConfirmationOptions) => void;
|
||||||
|
hideConfirmation: () => void;
|
||||||
|
setConfirmationLoading: (loading: boolean) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const useNotificationStore = create<NotificationState>((set) => ({
|
export const useNotificationStore = create<NotificationState>((set) => ({
|
||||||
notifications: [],
|
notifications: [],
|
||||||
|
confirmation: {
|
||||||
|
isOpen: false,
|
||||||
|
isLoading: false,
|
||||||
|
options: null
|
||||||
|
},
|
||||||
|
|
||||||
showNotification: (message, type = 'info', duration = NOTIFICATION_DURATION_MS) => {
|
showNotification: (message, type = 'info', duration = NOTIFICATION_DURATION_MS) => {
|
||||||
const id = generateId();
|
const id = generateId();
|
||||||
@@ -49,5 +72,34 @@ export const useNotificationStore = create<NotificationState>((set) => ({
|
|||||||
|
|
||||||
clearAll: () => {
|
clearAll: () => {
|
||||||
set({ notifications: [] });
|
set({ notifications: [] });
|
||||||
|
},
|
||||||
|
|
||||||
|
showConfirmation: (options) => {
|
||||||
|
set({
|
||||||
|
confirmation: {
|
||||||
|
isOpen: true,
|
||||||
|
isLoading: false,
|
||||||
|
options
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
hideConfirmation: () => {
|
||||||
|
set((state) => ({
|
||||||
|
confirmation: {
|
||||||
|
...state.confirmation,
|
||||||
|
isOpen: false,
|
||||||
|
options: null // Cleanup
|
||||||
|
}
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
setConfirmationLoading: (loading) => {
|
||||||
|
set((state) => ({
|
||||||
|
confirmation: {
|
||||||
|
...state.confirmation,
|
||||||
|
isLoading: loading
|
||||||
|
}
|
||||||
|
}));
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
|
|||||||
@@ -453,6 +453,18 @@ textarea {
|
|||||||
&:active {
|
&:active {
|
||||||
transform: scale(0.95);
|
transform: scale(0.95);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:disabled {
|
||||||
|
cursor: not-allowed;
|
||||||
|
opacity: 0.6;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:disabled:hover {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal-header {
|
.modal-header {
|
||||||
|
|||||||
@@ -34,11 +34,11 @@ export interface OAuthExcludedModels {
|
|||||||
models: string[];
|
models: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
// OAuth 模型映射
|
// OAuth 模型别名
|
||||||
export interface OAuthModelMappingEntry {
|
export interface OAuthModelAliasEntry {
|
||||||
name: string;
|
name: string;
|
||||||
alias: string;
|
alias: string;
|
||||||
fork?: boolean;
|
fork?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type OAuthModelMappings = Record<string, OAuthModelMappingEntry[]>;
|
export type OAuthModelAlias = Record<string, OAuthModelAliasEntry[]>;
|
||||||
|
|||||||
@@ -55,6 +55,7 @@ export interface AntigravityQuotaGroupDefinition {
|
|||||||
export interface GeminiCliQuotaGroupDefinition {
|
export interface GeminiCliQuotaGroupDefinition {
|
||||||
id: string;
|
id: string;
|
||||||
label: string;
|
label: string;
|
||||||
|
preferredModelId?: string;
|
||||||
modelIds: string[];
|
modelIds: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -7,14 +7,16 @@
|
|||||||
* 隐藏 API Key 中间部分,仅保留前后两位
|
* 隐藏 API Key 中间部分,仅保留前后两位
|
||||||
*/
|
*/
|
||||||
export function maskApiKey(key: string): string {
|
export function maskApiKey(key: string): string {
|
||||||
if (!key) {
|
const trimmed = String(key || '').trim();
|
||||||
|
if (!trimmed) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
const visibleChars = 2;
|
const MASKED_LENGTH = 10;
|
||||||
const start = key.slice(0, visibleChars);
|
const visibleChars = trimmed.length < 4 ? 1 : 2;
|
||||||
const end = key.slice(-visibleChars);
|
const start = trimmed.slice(0, visibleChars);
|
||||||
const maskedLength = Math.max(key.length - visibleChars * 2, 1);
|
const end = trimmed.slice(-visibleChars);
|
||||||
|
const maskedLength = Math.max(MASKED_LENGTH - visibleChars * 2, 1);
|
||||||
const masked = '*'.repeat(maskedLength);
|
const masked = '*'.repeat(maskedLength);
|
||||||
|
|
||||||
return `${start}${masked}${end}`;
|
return `${start}${masked}${end}`;
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import type {
|
|||||||
AntigravityQuotaInfo,
|
AntigravityQuotaInfo,
|
||||||
AntigravityModelsPayload,
|
AntigravityModelsPayload,
|
||||||
GeminiCliParsedBucket,
|
GeminiCliParsedBucket,
|
||||||
GeminiCliQuotaBucketState
|
GeminiCliQuotaBucketState,
|
||||||
} from '@/types';
|
} from '@/types';
|
||||||
import { ANTIGRAVITY_QUOTA_GROUPS, GEMINI_CLI_GROUP_LOOKUP } from './constants';
|
import { ANTIGRAVITY_QUOTA_GROUPS, GEMINI_CLI_GROUP_LOOKUP } from './constants';
|
||||||
import { normalizeQuotaFraction } from './parsers';
|
import { normalizeQuotaFraction } from './parsers';
|
||||||
@@ -35,7 +35,19 @@ export function buildGeminiCliQuotaBuckets(
|
|||||||
): GeminiCliQuotaBucketState[] {
|
): GeminiCliQuotaBucketState[] {
|
||||||
if (buckets.length === 0) return [];
|
if (buckets.length === 0) return [];
|
||||||
|
|
||||||
const grouped = new Map<string, GeminiCliQuotaBucketState & { modelIds: string[] }>();
|
type GeminiCliQuotaBucketGroup = {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
tokenType: string | null;
|
||||||
|
modelIds: string[];
|
||||||
|
preferredModelId?: string;
|
||||||
|
preferredBucket?: GeminiCliParsedBucket;
|
||||||
|
fallbackRemainingFraction: number | null;
|
||||||
|
fallbackRemainingAmount: number | null;
|
||||||
|
fallbackResetTime: string | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
|
const grouped = new Map<string, GeminiCliQuotaBucketGroup>();
|
||||||
|
|
||||||
buckets.forEach((bucket) => {
|
buckets.forEach((bucket) => {
|
||||||
if (isIgnoredGeminiCliModel(bucket.modelId)) return;
|
if (isIgnoredGeminiCliModel(bucket.modelId)) return;
|
||||||
@@ -47,37 +59,55 @@ export function buildGeminiCliQuotaBuckets(
|
|||||||
const existing = grouped.get(mapKey);
|
const existing = grouped.get(mapKey);
|
||||||
|
|
||||||
if (!existing) {
|
if (!existing) {
|
||||||
|
const preferredModelId = group?.preferredModelId;
|
||||||
|
const preferredBucket =
|
||||||
|
preferredModelId && bucket.modelId === preferredModelId ? bucket : undefined;
|
||||||
grouped.set(mapKey, {
|
grouped.set(mapKey, {
|
||||||
id: `${groupId}${tokenKey ? `-${tokenKey}` : ''}`,
|
id: `${groupId}${tokenKey ? `-${tokenKey}` : ''}`,
|
||||||
label,
|
label,
|
||||||
remainingFraction: bucket.remainingFraction,
|
|
||||||
remainingAmount: bucket.remainingAmount,
|
|
||||||
resetTime: bucket.resetTime,
|
|
||||||
tokenType: bucket.tokenType,
|
tokenType: bucket.tokenType,
|
||||||
modelIds: [bucket.modelId]
|
modelIds: [bucket.modelId],
|
||||||
|
preferredModelId,
|
||||||
|
preferredBucket,
|
||||||
|
fallbackRemainingFraction: bucket.remainingFraction,
|
||||||
|
fallbackRemainingAmount: bucket.remainingAmount,
|
||||||
|
fallbackResetTime: bucket.resetTime,
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
existing.remainingFraction = minNullableNumber(
|
existing.fallbackRemainingFraction = minNullableNumber(
|
||||||
existing.remainingFraction,
|
existing.fallbackRemainingFraction,
|
||||||
bucket.remainingFraction
|
bucket.remainingFraction
|
||||||
);
|
);
|
||||||
existing.remainingAmount = minNullableNumber(existing.remainingAmount, bucket.remainingAmount);
|
existing.fallbackRemainingAmount = minNullableNumber(
|
||||||
existing.resetTime = pickEarlierResetTime(existing.resetTime, bucket.resetTime);
|
existing.fallbackRemainingAmount,
|
||||||
|
bucket.remainingAmount
|
||||||
|
);
|
||||||
|
existing.fallbackResetTime = pickEarlierResetTime(existing.fallbackResetTime, bucket.resetTime);
|
||||||
existing.modelIds.push(bucket.modelId);
|
existing.modelIds.push(bucket.modelId);
|
||||||
|
|
||||||
|
if (existing.preferredModelId && bucket.modelId === existing.preferredModelId) {
|
||||||
|
existing.preferredBucket = bucket;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
return Array.from(grouped.values()).map((bucket) => {
|
return Array.from(grouped.values()).map((bucket) => {
|
||||||
const uniqueModelIds = Array.from(new Set(bucket.modelIds));
|
const uniqueModelIds = Array.from(new Set(bucket.modelIds));
|
||||||
|
const preferred = bucket.preferredBucket;
|
||||||
|
const remainingFraction = preferred
|
||||||
|
? preferred.remainingFraction
|
||||||
|
: bucket.fallbackRemainingFraction;
|
||||||
|
const remainingAmount = preferred ? preferred.remainingAmount : bucket.fallbackRemainingAmount;
|
||||||
|
const resetTime = preferred ? preferred.resetTime : bucket.fallbackResetTime;
|
||||||
return {
|
return {
|
||||||
id: bucket.id,
|
id: bucket.id,
|
||||||
label: bucket.label,
|
label: bucket.label,
|
||||||
remainingFraction: bucket.remainingFraction,
|
remainingFraction,
|
||||||
remainingAmount: bucket.remainingAmount,
|
remainingAmount,
|
||||||
resetTime: bucket.resetTime,
|
resetTime,
|
||||||
tokenType: bucket.tokenType,
|
tokenType: bucket.tokenType,
|
||||||
modelIds: uniqueModelIds
|
modelIds: uniqueModelIds,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -101,7 +131,7 @@ export function getAntigravityQuotaInfo(entry?: AntigravityQuotaInfo): {
|
|||||||
return {
|
return {
|
||||||
remainingFraction,
|
remainingFraction,
|
||||||
resetTime,
|
resetTime,
|
||||||
displayName
|
displayName,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -150,7 +180,7 @@ export function buildAntigravityQuotaGroups(
|
|||||||
id,
|
id,
|
||||||
remainingFraction,
|
remainingFraction,
|
||||||
resetTime: info.resetTime,
|
resetTime: info.resetTime,
|
||||||
displayName: info.displayName
|
displayName: info.displayName,
|
||||||
};
|
};
|
||||||
})
|
})
|
||||||
.filter((entry): entry is NonNullable<typeof entry> => entry !== null);
|
.filter((entry): entry is NonNullable<typeof entry> => entry !== null);
|
||||||
@@ -168,7 +198,7 @@ export function buildAntigravityQuotaGroups(
|
|||||||
label,
|
label,
|
||||||
models: quotaEntries.map((entry) => entry.id),
|
models: quotaEntries.map((entry) => entry.id),
|
||||||
remainingFraction,
|
remainingFraction,
|
||||||
resetTime
|
resetTime,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -5,64 +5,64 @@
|
|||||||
import type {
|
import type {
|
||||||
AntigravityQuotaGroupDefinition,
|
AntigravityQuotaGroupDefinition,
|
||||||
GeminiCliQuotaGroupDefinition,
|
GeminiCliQuotaGroupDefinition,
|
||||||
TypeColorSet
|
TypeColorSet,
|
||||||
} from '@/types';
|
} from '@/types';
|
||||||
|
|
||||||
// Theme colors for type badges
|
// Theme colors for type badges
|
||||||
export const TYPE_COLORS: Record<string, TypeColorSet> = {
|
export const TYPE_COLORS: Record<string, TypeColorSet> = {
|
||||||
qwen: {
|
qwen: {
|
||||||
light: { bg: '#e8f5e9', text: '#2e7d32' },
|
light: { bg: '#e8f5e9', text: '#2e7d32' },
|
||||||
dark: { bg: '#1b5e20', text: '#81c784' }
|
dark: { bg: '#1b5e20', text: '#81c784' },
|
||||||
},
|
},
|
||||||
gemini: {
|
gemini: {
|
||||||
light: { bg: '#e3f2fd', text: '#1565c0' },
|
light: { bg: '#e3f2fd', text: '#1565c0' },
|
||||||
dark: { bg: '#0d47a1', text: '#64b5f6' }
|
dark: { bg: '#0d47a1', text: '#64b5f6' },
|
||||||
},
|
},
|
||||||
'gemini-cli': {
|
'gemini-cli': {
|
||||||
light: { bg: '#e7efff', text: '#1e4fa3' },
|
light: { bg: '#e7efff', text: '#1e4fa3' },
|
||||||
dark: { bg: '#1c3f73', text: '#a8c7ff' }
|
dark: { bg: '#1c3f73', text: '#a8c7ff' },
|
||||||
},
|
},
|
||||||
aistudio: {
|
aistudio: {
|
||||||
light: { bg: '#f0f2f5', text: '#2f343c' },
|
light: { bg: '#f0f2f5', text: '#2f343c' },
|
||||||
dark: { bg: '#373c42', text: '#cfd3db' }
|
dark: { bg: '#373c42', text: '#cfd3db' },
|
||||||
},
|
},
|
||||||
claude: {
|
claude: {
|
||||||
light: { bg: '#fce4ec', text: '#c2185b' },
|
light: { bg: '#fce4ec', text: '#c2185b' },
|
||||||
dark: { bg: '#880e4f', text: '#f48fb1' }
|
dark: { bg: '#880e4f', text: '#f48fb1' },
|
||||||
},
|
},
|
||||||
codex: {
|
codex: {
|
||||||
light: { bg: '#fff3e0', text: '#ef6c00' },
|
light: { bg: '#fff3e0', text: '#ef6c00' },
|
||||||
dark: { bg: '#e65100', text: '#ffb74d' }
|
dark: { bg: '#e65100', text: '#ffb74d' },
|
||||||
},
|
},
|
||||||
antigravity: {
|
antigravity: {
|
||||||
light: { bg: '#e0f7fa', text: '#006064' },
|
light: { bg: '#e0f7fa', text: '#006064' },
|
||||||
dark: { bg: '#004d40', text: '#80deea' }
|
dark: { bg: '#004d40', text: '#80deea' },
|
||||||
},
|
},
|
||||||
iflow: {
|
iflow: {
|
||||||
light: { bg: '#f3e5f5', text: '#7b1fa2' },
|
light: { bg: '#f3e5f5', text: '#7b1fa2' },
|
||||||
dark: { bg: '#4a148c', text: '#ce93d8' }
|
dark: { bg: '#4a148c', text: '#ce93d8' },
|
||||||
},
|
},
|
||||||
empty: {
|
empty: {
|
||||||
light: { bg: '#f5f5f5', text: '#616161' },
|
light: { bg: '#f5f5f5', text: '#616161' },
|
||||||
dark: { bg: '#424242', text: '#bdbdbd' }
|
dark: { bg: '#424242', text: '#bdbdbd' },
|
||||||
},
|
},
|
||||||
unknown: {
|
unknown: {
|
||||||
light: { bg: '#f0f0f0', text: '#666666', border: '1px dashed #999999' },
|
light: { bg: '#f0f0f0', text: '#666666', border: '1px dashed #999999' },
|
||||||
dark: { bg: '#3a3a3a', text: '#aaaaaa', border: '1px dashed #666666' }
|
dark: { bg: '#3a3a3a', text: '#aaaaaa', border: '1px dashed #666666' },
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// Antigravity API configuration
|
// Antigravity API configuration
|
||||||
export const ANTIGRAVITY_QUOTA_URLS = [
|
export const ANTIGRAVITY_QUOTA_URLS = [
|
||||||
'https://daily-cloudcode-pa.googleapis.com/v1internal:fetchAvailableModels',
|
'https://daily-cloudcode-pa.googleapis.com/v1internal:fetchAvailableModels',
|
||||||
'https://daily-cloudcode-pa.sandbox.googleapis.com/v1internal:fetchAvailableModels',
|
'https://daily-cloudcode-pa.sandbox.googleapis.com/v1internal:fetchAvailableModels',
|
||||||
'https://cloudcode-pa.googleapis.com/v1internal:fetchAvailableModels'
|
'https://cloudcode-pa.googleapis.com/v1internal:fetchAvailableModels',
|
||||||
];
|
];
|
||||||
|
|
||||||
export const ANTIGRAVITY_REQUEST_HEADERS = {
|
export const ANTIGRAVITY_REQUEST_HEADERS = {
|
||||||
Authorization: 'Bearer $TOKEN$',
|
Authorization: 'Bearer $TOKEN$',
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
'User-Agent': 'antigravity/1.11.5 windows/amd64'
|
'User-Agent': 'antigravity/1.11.5 windows/amd64',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ANTIGRAVITY_QUOTA_GROUPS: AntigravityQuotaGroupDefinition[] = [
|
export const ANTIGRAVITY_QUOTA_GROUPS: AntigravityQuotaGroupDefinition[] = [
|
||||||
@@ -73,40 +73,40 @@ export const ANTIGRAVITY_QUOTA_GROUPS: AntigravityQuotaGroupDefinition[] = [
|
|||||||
'claude-sonnet-4-5-thinking',
|
'claude-sonnet-4-5-thinking',
|
||||||
'claude-opus-4-5-thinking',
|
'claude-opus-4-5-thinking',
|
||||||
'claude-sonnet-4-5',
|
'claude-sonnet-4-5',
|
||||||
'gpt-oss-120b-medium'
|
'gpt-oss-120b-medium',
|
||||||
]
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'gemini-3-pro',
|
id: 'gemini-3-pro',
|
||||||
label: 'Gemini 3 Pro',
|
label: 'Gemini 3 Pro',
|
||||||
identifiers: ['gemini-3-pro-high', 'gemini-3-pro-low']
|
identifiers: ['gemini-3-pro-high', 'gemini-3-pro-low'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'gemini-2-5-flash',
|
id: 'gemini-2-5-flash',
|
||||||
label: 'Gemini 2.5 Flash',
|
label: 'Gemini 2.5 Flash',
|
||||||
identifiers: ['gemini-2.5-flash', 'gemini-2.5-flash-thinking']
|
identifiers: ['gemini-2.5-flash', 'gemini-2.5-flash-thinking'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'gemini-2-5-flash-lite',
|
id: 'gemini-2-5-flash-lite',
|
||||||
label: 'Gemini 2.5 Flash Lite',
|
label: 'Gemini 2.5 Flash Lite',
|
||||||
identifiers: ['gemini-2.5-flash-lite']
|
identifiers: ['gemini-2.5-flash-lite'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'gemini-2-5-cu',
|
id: 'gemini-2-5-cu',
|
||||||
label: 'Gemini 2.5 CU',
|
label: 'Gemini 2.5 CU',
|
||||||
identifiers: ['rev19-uic3-1p']
|
identifiers: ['rev19-uic3-1p'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'gemini-3-flash',
|
id: 'gemini-3-flash',
|
||||||
label: 'Gemini 3 Flash',
|
label: 'Gemini 3 Flash',
|
||||||
identifiers: ['gemini-3-flash']
|
identifiers: ['gemini-3-flash'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'gemini-image',
|
id: 'gemini-image',
|
||||||
label: 'gemini-3-pro-image',
|
label: 'gemini-3-pro-image',
|
||||||
identifiers: ['gemini-3-pro-image'],
|
identifiers: ['gemini-3-pro-image'],
|
||||||
labelFromModel: true
|
labelFromModel: true,
|
||||||
}
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// Gemini CLI API configuration
|
// Gemini CLI API configuration
|
||||||
@@ -115,30 +115,22 @@ export const GEMINI_CLI_QUOTA_URL =
|
|||||||
|
|
||||||
export const GEMINI_CLI_REQUEST_HEADERS = {
|
export const GEMINI_CLI_REQUEST_HEADERS = {
|
||||||
Authorization: 'Bearer $TOKEN$',
|
Authorization: 'Bearer $TOKEN$',
|
||||||
'Content-Type': 'application/json'
|
'Content-Type': 'application/json',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const GEMINI_CLI_QUOTA_GROUPS: GeminiCliQuotaGroupDefinition[] = [
|
export const GEMINI_CLI_QUOTA_GROUPS: GeminiCliQuotaGroupDefinition[] = [
|
||||||
{
|
{
|
||||||
id: 'gemini-2-5-flash-series',
|
id: 'gemini-flash-series',
|
||||||
label: 'Gemini 2.5 Flash Series',
|
label: 'Gemini Flash Series',
|
||||||
modelIds: ['gemini-2.5-flash', 'gemini-2.5-flash-lite']
|
preferredModelId: 'gemini-3-flash-preview',
|
||||||
|
modelIds: ['gemini-3-flash-preview', 'gemini-2.5-flash', 'gemini-2.5-flash-lite'],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'gemini-2-5-pro',
|
id: 'gemini-pro-series',
|
||||||
label: 'Gemini 2.5 Pro',
|
label: 'Gemini Pro Series',
|
||||||
modelIds: ['gemini-2.5-pro']
|
preferredModelId: 'gemini-3-pro-preview',
|
||||||
|
modelIds: ['gemini-3-pro-preview', 'gemini-2.5-pro'],
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'gemini-3-pro-preview',
|
|
||||||
label: 'Gemini 3 Pro Preview',
|
|
||||||
modelIds: ['gemini-3-pro-preview']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'gemini-3-flash-preview',
|
|
||||||
label: 'Gemini 3 Flash Preview',
|
|
||||||
modelIds: ['gemini-3-flash-preview']
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
export const GEMINI_CLI_GROUP_LOOKUP = new Map(
|
export const GEMINI_CLI_GROUP_LOOKUP = new Map(
|
||||||
@@ -155,5 +147,5 @@ export const CODEX_USAGE_URL = 'https://chatgpt.com/backend-api/wham/usage';
|
|||||||
export const CODEX_REQUEST_HEADERS = {
|
export const CODEX_REQUEST_HEADERS = {
|
||||||
Authorization: 'Bearer $TOKEN$',
|
Authorization: 'Bearer $TOKEN$',
|
||||||
'Content-Type': 'application/json',
|
'Content-Type': 'application/json',
|
||||||
'User-Agent': 'codex_cli_rs/0.76.0 (Debian 13.0.0; x86_64) WindowsTerminal'
|
'User-Agent': 'codex_cli_rs/0.76.0 (Debian 13.0.0; x86_64) WindowsTerminal',
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -73,6 +73,124 @@ const normalizeAuthIndex = (value: any) => {
|
|||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const USAGE_SOURCE_PREFIX_KEY = 'k:';
|
||||||
|
const USAGE_SOURCE_PREFIX_MASKED = 'm:';
|
||||||
|
const USAGE_SOURCE_PREFIX_TEXT = 't:';
|
||||||
|
|
||||||
|
const KEY_LIKE_TOKEN_REGEX =
|
||||||
|
/(sk-[A-Za-z0-9-_]{6,}|sk-ant-[A-Za-z0-9-_]{6,}|AIza[0-9A-Za-z-_]{8,}|AI[a-zA-Z0-9_-]{6,}|hf_[A-Za-z0-9]{6,}|pk_[A-Za-z0-9]{6,}|rk_[A-Za-z0-9]{6,})/;
|
||||||
|
const MASKED_TOKEN_HINT_REGEX = /^[^\s]{1,24}(\*{2,}|\.{3}|…)[^\s]{1,24}$/;
|
||||||
|
|
||||||
|
const keyFingerprintCache = new Map<string, string>();
|
||||||
|
|
||||||
|
const fnv1a64Hex = (value: string): string => {
|
||||||
|
const cached = keyFingerprintCache.get(value);
|
||||||
|
if (cached) return cached;
|
||||||
|
|
||||||
|
const FNV_OFFSET_BASIS = 0xcbf29ce484222325n;
|
||||||
|
const FNV_PRIME = 0x100000001b3n;
|
||||||
|
|
||||||
|
let hash = FNV_OFFSET_BASIS;
|
||||||
|
for (let i = 0; i < value.length; i++) {
|
||||||
|
hash ^= BigInt(value.charCodeAt(i));
|
||||||
|
hash = (hash * FNV_PRIME) & 0xffffffffffffffffn;
|
||||||
|
}
|
||||||
|
|
||||||
|
const hex = hash.toString(16).padStart(16, '0');
|
||||||
|
keyFingerprintCache.set(value, hex);
|
||||||
|
return hex;
|
||||||
|
};
|
||||||
|
|
||||||
|
const looksLikeRawSecret = (text: string): boolean => {
|
||||||
|
if (!text || /\s/.test(text)) return false;
|
||||||
|
|
||||||
|
const lower = text.toLowerCase();
|
||||||
|
if (lower.endsWith('.json')) return false;
|
||||||
|
if (lower.startsWith('http://') || lower.startsWith('https://')) return false;
|
||||||
|
if (/[\\/]/.test(text)) return false;
|
||||||
|
|
||||||
|
if (KEY_LIKE_TOKEN_REGEX.test(text)) return true;
|
||||||
|
|
||||||
|
if (text.length >= 32 && text.length <= 512) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (text.length >= 16 && text.length < 32 && /^[A-Za-z0-9._=-]+$/.test(text)) {
|
||||||
|
return /[A-Za-z]/.test(text) && /\d/.test(text);
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const extractRawSecretFromText = (text: string): string | null => {
|
||||||
|
if (!text) return null;
|
||||||
|
if (looksLikeRawSecret(text)) return text;
|
||||||
|
|
||||||
|
const keyLikeMatch = text.match(KEY_LIKE_TOKEN_REGEX);
|
||||||
|
if (keyLikeMatch?.[0]) return keyLikeMatch[0];
|
||||||
|
|
||||||
|
const queryMatch = text.match(
|
||||||
|
/(?:[?&])(api[-_]?key|key|token|access_token|authorization)=([^&#\s]+)/i
|
||||||
|
);
|
||||||
|
const queryValue = queryMatch?.[2];
|
||||||
|
if (queryValue && looksLikeRawSecret(queryValue)) {
|
||||||
|
return queryValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const headerMatch = text.match(
|
||||||
|
/(api[-_]?key|key|token|access[-_]?token|authorization)\s*[:=]\s*([A-Za-z0-9._=-]+)/i
|
||||||
|
);
|
||||||
|
const headerValue = headerMatch?.[2];
|
||||||
|
if (headerValue && looksLikeRawSecret(headerValue)) {
|
||||||
|
return headerValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
const bearerMatch = text.match(/\bBearer\s+([A-Za-z0-9._=-]{6,})/i);
|
||||||
|
const bearerValue = bearerMatch?.[1];
|
||||||
|
if (bearerValue && looksLikeRawSecret(bearerValue)) {
|
||||||
|
return bearerValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function normalizeUsageSourceId(
|
||||||
|
value: unknown,
|
||||||
|
masker: (val: string) => string = maskApiKey
|
||||||
|
): string {
|
||||||
|
const raw = typeof value === 'string' ? value : value === null || value === undefined ? '' : String(value);
|
||||||
|
const trimmed = raw.trim();
|
||||||
|
if (!trimmed) return '';
|
||||||
|
|
||||||
|
const extracted = extractRawSecretFromText(trimmed);
|
||||||
|
if (extracted) {
|
||||||
|
return `${USAGE_SOURCE_PREFIX_KEY}${fnv1a64Hex(extracted)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (MASKED_TOKEN_HINT_REGEX.test(trimmed)) {
|
||||||
|
return `${USAGE_SOURCE_PREFIX_MASKED}${masker(trimmed)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${USAGE_SOURCE_PREFIX_TEXT}${trimmed}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function buildCandidateUsageSourceIds(input: { apiKey?: string; prefix?: string }): string[] {
|
||||||
|
const result: string[] = [];
|
||||||
|
|
||||||
|
const prefix = input.prefix?.trim();
|
||||||
|
if (prefix) {
|
||||||
|
result.push(`${USAGE_SOURCE_PREFIX_TEXT}${prefix}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const apiKey = input.apiKey?.trim();
|
||||||
|
if (apiKey) {
|
||||||
|
result.push(`${USAGE_SOURCE_PREFIX_KEY}${fnv1a64Hex(apiKey)}`);
|
||||||
|
result.push(`${USAGE_SOURCE_PREFIX_MASKED}${maskApiKey(apiKey)}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return Array.from(new Set(result));
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 对使用数据中的敏感字段进行遮罩
|
* 对使用数据中的敏感字段进行遮罩
|
||||||
*/
|
*/
|
||||||
@@ -200,6 +318,7 @@ export function collectUsageDetails(usageData: any): UsageDetail[] {
|
|||||||
if (detail && detail.timestamp) {
|
if (detail && detail.timestamp) {
|
||||||
details.push({
|
details.push({
|
||||||
...detail,
|
...detail,
|
||||||
|
source: normalizeUsageSourceId(detail.source),
|
||||||
__modelName: modelName
|
__modelName: modelName
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -460,6 +579,8 @@ export function getApiStats(usageData: any, modelPrices: Record<string, ModelPri
|
|||||||
export function getModelStats(usageData: any, modelPrices: Record<string, ModelPrice>): Array<{
|
export function getModelStats(usageData: any, modelPrices: Record<string, ModelPrice>): Array<{
|
||||||
model: string;
|
model: string;
|
||||||
requests: number;
|
requests: number;
|
||||||
|
successCount: number;
|
||||||
|
failureCount: number;
|
||||||
tokens: number;
|
tokens: number;
|
||||||
cost: number;
|
cost: number;
|
||||||
}> {
|
}> {
|
||||||
@@ -467,20 +588,39 @@ export function getModelStats(usageData: any, modelPrices: Record<string, ModelP
|
|||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
const modelMap = new Map<string, { requests: number; tokens: number; cost: number }>();
|
const modelMap = new Map<string, { requests: number; successCount: number; failureCount: number; tokens: number; cost: number }>();
|
||||||
|
|
||||||
Object.values(usageData.apis as Record<string, any>).forEach(apiData => {
|
Object.values(usageData.apis as Record<string, any>).forEach(apiData => {
|
||||||
const models = apiData?.models || {};
|
const models = apiData?.models || {};
|
||||||
Object.entries(models as Record<string, any>).forEach(([modelName, modelData]) => {
|
Object.entries(models as Record<string, any>).forEach(([modelName, modelData]) => {
|
||||||
const existing = modelMap.get(modelName) || { requests: 0, tokens: 0, cost: 0 };
|
const existing = modelMap.get(modelName) || { requests: 0, successCount: 0, failureCount: 0, tokens: 0, cost: 0 };
|
||||||
existing.requests += modelData.total_requests || 0;
|
existing.requests += modelData.total_requests || 0;
|
||||||
existing.tokens += modelData.total_tokens || 0;
|
existing.tokens += modelData.total_tokens || 0;
|
||||||
|
|
||||||
|
const details = Array.isArray(modelData.details) ? modelData.details : [];
|
||||||
|
|
||||||
const price = modelPrices[modelName];
|
const price = modelPrices[modelName];
|
||||||
if (price) {
|
|
||||||
const details = Array.isArray(modelData.details) ? modelData.details : [];
|
const hasExplicitCounts =
|
||||||
|
typeof modelData.success_count === 'number' || typeof modelData.failure_count === 'number';
|
||||||
|
if (hasExplicitCounts) {
|
||||||
|
existing.successCount += Number(modelData.success_count) || 0;
|
||||||
|
existing.failureCount += Number(modelData.failure_count) || 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (details.length > 0 && (!hasExplicitCounts || price)) {
|
||||||
details.forEach((detail: any) => {
|
details.forEach((detail: any) => {
|
||||||
existing.cost += calculateCost({ ...detail, __modelName: modelName }, modelPrices);
|
if (!hasExplicitCounts) {
|
||||||
|
if (detail?.failed === true) {
|
||||||
|
existing.failureCount += 1;
|
||||||
|
} else {
|
||||||
|
existing.successCount += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (price) {
|
||||||
|
existing.cost += calculateCost({ ...detail, __modelName: modelName }, modelPrices);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
modelMap.set(modelName, existing);
|
modelMap.set(modelName, existing);
|
||||||
@@ -784,11 +924,11 @@ export function calculateStatusBarData(
|
|||||||
authIndexFilter?: number
|
authIndexFilter?: number
|
||||||
): StatusBarData {
|
): StatusBarData {
|
||||||
const BLOCK_COUNT = 20;
|
const BLOCK_COUNT = 20;
|
||||||
const BLOCK_DURATION_MS = 5 * 60 * 1000; // 5 minutes
|
const BLOCK_DURATION_MS = 10 * 60 * 1000; // 10 minutes
|
||||||
const HOUR_MS = 60 * 60 * 1000;
|
const WINDOW_MS = 200 * 60 * 1000; // 200 minutes
|
||||||
|
|
||||||
const now = Date.now();
|
const now = Date.now();
|
||||||
const hourAgo = now - HOUR_MS;
|
const windowStart = now - WINDOW_MS;
|
||||||
|
|
||||||
// Initialize blocks
|
// Initialize blocks
|
||||||
const blockStats: Array<{ success: number; failure: number }> = Array.from(
|
const blockStats: Array<{ success: number; failure: number }> = Array.from(
|
||||||
@@ -802,7 +942,7 @@ export function calculateStatusBarData(
|
|||||||
// Filter and bucket the usage details
|
// Filter and bucket the usage details
|
||||||
usageDetails.forEach((detail) => {
|
usageDetails.forEach((detail) => {
|
||||||
const timestamp = Date.parse(detail.timestamp);
|
const timestamp = Date.parse(detail.timestamp);
|
||||||
if (Number.isNaN(timestamp) || timestamp < hourAgo || timestamp > now) {
|
if (Number.isNaN(timestamp) || timestamp < windowStart || timestamp > now) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -878,7 +1018,7 @@ export function computeKeyStats(usageData: any, masker: (val: string) => string
|
|||||||
const details = modelEntry?.details || [];
|
const details = modelEntry?.details || [];
|
||||||
|
|
||||||
details.forEach((detail: any) => {
|
details.forEach((detail: any) => {
|
||||||
const source = maskUsageSensitiveValue(detail?.source, masker);
|
const source = normalizeUsageSourceId(detail?.source, masker);
|
||||||
const authIndexKey = normalizeAuthIndex(detail?.auth_index);
|
const authIndexKey = normalizeAuthIndex(detail?.auth_index);
|
||||||
const isFailed = detail?.failed === true;
|
const isFailed = detail?.failed === true;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user