mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-06-16 21:03:58 +08:00
Compare commits
21 Commits
-
Supra4E8C ·
2026-04-03 02:42:41 +08:00 -
2026-04-03 01:52:33 +08:00 -
2026-04-03 01:46:23 +08:00 -
2026-04-03 01:45:20 +08:00 -
2026-04-03 01:39:16 +08:00 -
2026-04-03 01:33:11 +08:00 -
2026-04-03 01:33:05 +08:00 -
2026-04-03 01:32:49 +08:00 -
2026-04-03 01:32:35 +08:00 -
2026-04-03 00:54:09 +08:00 -
2026-04-03 00:52:14 +08:00 -
2026-04-03 00:49:33 +08:00 -
2026-04-03 00:04:26 +08:00 -
2026-04-03 00:00:46 +08:00 -
2026-04-02 23:58:48 +08:00 -
2026-04-02 23:52:12 +08:00 -
2026-04-01 23:51:08 +08:00 -
2026-03-30 13:19:57 +08:00 -
Supra4E8C ·
2026-03-30 13:02:53 +08:00 -
paulbettner ·
2026-03-29 18:44:07 -05:00 -
2026-03-29 18:05:49 -05:00
+2
-1
@@ -1,7 +1,8 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="zh-CN" translate="no" class="notranslate">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="google" content="notranslate" />
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20class%3D%22iconify%20iconify--logos%22%20width%3D%2231.88%22%20height%3D%2232%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%20256%20257%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22IconifyId1813088fe1fbc01fb466%22%20x1%3D%22-.828%25%22%20x2%3D%2257.636%25%22%20y1%3D%227.652%25%22%20y2%3D%2278.411%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2341D1FF%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23BD34FE%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22IconifyId1813088fe1fbc01fb467%22%20x1%3D%2243.376%25%22%20x2%3D%2250.316%25%22%20y1%3D%222.242%25%22%20y2%3D%2289.03%25%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%23FFEA83%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%228.333%25%22%20stop-color%3D%22%23FFDD35%22%3E%3C%2Fstop%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23FFA800%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23IconifyId1813088fe1fbc01fb466)%22%20d%3D%22M255.153%2037.938L134.897%20252.976c-2.483%204.44-8.862%204.466-11.382.048L.875%2037.958c-2.746-4.814%201.371-10.646%206.827-9.67l120.385%2021.517a6.537%206.537%200%200%200%202.322-.004l117.867-21.483c5.438-.991%209.574%204.796%206.877%209.62Z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22url(%23IconifyId1813088fe1fbc01fb467)%22%20d%3D%22M185.432.063L96.44%2017.501a3.268%203.268%200%200%200-2.634%203.014l-5.474%2092.456a3.268%203.268%200%200%200%203.997%203.378l24.777-5.718c2.318-.535%204.413%201.507%203.936%203.838l-7.361%2036.047c-.495%202.426%201.782%204.5%204.151%203.78l15.304-4.649c2.372-.72%204.652%201.36%204.15%203.788l-11.698%2056.621c-.732%203.542%203.979%205.473%205.943%202.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505%204.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CLI Proxy API Management Center</title>
|
||||
|
||||
@@ -2,7 +2,11 @@ import { ReactNode, useCallback, useLayoutEffect, useRef, useState } from 'react
|
||||
import { useLocation, type Location } from 'react-router-dom';
|
||||
import { animate } from 'motion/mini';
|
||||
import type { AnimationPlaybackControlsWithThen } from 'motion-dom';
|
||||
import { PageTransitionLayerContext, type LayerStatus } from './PageTransitionLayer';
|
||||
import {
|
||||
PAGE_TRANSITION_LAYER_CONTEXT_VALUES,
|
||||
PageTransitionLayerContext,
|
||||
type LayerStatus,
|
||||
} from './PageTransitionLayer';
|
||||
import './PageTransition.scss';
|
||||
|
||||
interface PageTransitionProps {
|
||||
@@ -386,7 +390,9 @@ export function PageTransition({
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<PageTransitionLayerContext.Provider value={{ status: layer.status }}>
|
||||
<PageTransitionLayerContext.Provider
|
||||
value={PAGE_TRANSITION_LAYER_CONTEXT_VALUES[layer.status]}
|
||||
>
|
||||
{render(layer.location)}
|
||||
</PageTransitionLayerContext.Provider>
|
||||
</div>
|
||||
|
||||
@@ -2,14 +2,20 @@ import { createContext, useContext } from 'react';
|
||||
|
||||
export type LayerStatus = 'current' | 'exiting' | 'stacked';
|
||||
|
||||
type PageTransitionLayerContextValue = {
|
||||
export type PageTransitionLayerContextValue = {
|
||||
status: LayerStatus;
|
||||
isCurrentLayer: boolean;
|
||||
};
|
||||
|
||||
export const PageTransitionLayerContext =
|
||||
createContext<PageTransitionLayerContextValue | null>(null);
|
||||
|
||||
export const PAGE_TRANSITION_LAYER_CONTEXT_VALUES: Record<LayerStatus, PageTransitionLayerContextValue> = {
|
||||
current: { status: 'current', isCurrentLayer: true },
|
||||
stacked: { status: 'stacked', isCurrentLayer: false },
|
||||
exiting: { status: 'exiting', isCurrentLayer: false },
|
||||
};
|
||||
|
||||
export function usePageTransitionLayer() {
|
||||
return useContext(PageTransitionLayerContext);
|
||||
}
|
||||
|
||||
|
||||
@@ -106,17 +106,16 @@
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
|
||||
--glass-blur: 12px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--glass-backdrop-filter);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
:global([data-theme='dark']) {
|
||||
.floatingActionSurface {
|
||||
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
|
||||
border-color: color-mix(in srgb, var(--border-color) 55%, transparent);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@ export const SecondaryScreenShell = forwardRef<HTMLDivElement, SecondaryScreenSh
|
||||
const titleTooltip = typeof title === 'string' ? title : undefined;
|
||||
const resolvedBackAriaLabel = backAriaLabel ?? backLabel;
|
||||
const pageTransitionLayer = usePageTransitionLayer();
|
||||
const isCurrentLayer = pageTransitionLayer ? pageTransitionLayer.status === 'current' : true;
|
||||
const isCurrentLayer = pageTransitionLayer ? pageTransitionLayer.isCurrentLayer : true;
|
||||
const shouldRenderFloatingAction = Boolean(floatingAction) && isCurrentLayer;
|
||||
const floatingActionRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
import { useMemo, type Ref } from 'react';
|
||||
import CodeMirror, { type ReactCodeMirrorRef } from '@uiw/react-codemirror';
|
||||
import { yaml } from '@codemirror/lang-yaml';
|
||||
import { search, searchKeymap, highlightSelectionMatches } from '@codemirror/search';
|
||||
import { keymap } from '@codemirror/view';
|
||||
|
||||
type ConfigSourceEditorProps = {
|
||||
value: string;
|
||||
onChange: (value: string) => void;
|
||||
editorRef?: Ref<ReactCodeMirrorRef>;
|
||||
theme: 'light' | 'dark';
|
||||
editable: boolean;
|
||||
placeholder: string;
|
||||
};
|
||||
|
||||
export default function ConfigSourceEditor({
|
||||
value,
|
||||
onChange,
|
||||
editorRef,
|
||||
theme,
|
||||
editable,
|
||||
placeholder,
|
||||
}: ConfigSourceEditorProps) {
|
||||
const extensions = useMemo(
|
||||
() => [yaml(), search(), highlightSelectionMatches(), keymap.of(searchKeymap)],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<CodeMirror
|
||||
ref={editorRef}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
extensions={extensions}
|
||||
theme={theme}
|
||||
editable={editable}
|
||||
placeholder={placeholder}
|
||||
height="100%"
|
||||
style={{ height: '100%' }}
|
||||
basicSetup={{
|
||||
lineNumbers: true,
|
||||
highlightActiveLineGutter: true,
|
||||
highlightActiveLine: true,
|
||||
foldGutter: true,
|
||||
dropCursor: true,
|
||||
allowMultipleSelections: true,
|
||||
indentOnInput: true,
|
||||
bracketMatching: true,
|
||||
closeBrackets: true,
|
||||
autocompletion: false,
|
||||
rectangularSelection: true,
|
||||
crosshairCursor: false,
|
||||
highlightSelectionMatches: true,
|
||||
closeBracketsKeymap: true,
|
||||
searchKeymap: true,
|
||||
foldKeymap: true,
|
||||
completionKeymap: false,
|
||||
lintKeymap: true,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -395,8 +395,9 @@
|
||||
border-radius: 26px;
|
||||
border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
|
||||
background: color-mix(in srgb, var(--bg-primary) 76%, transparent);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
--glass-blur: 14px;
|
||||
backdrop-filter: var(--glass-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--glass-backdrop-filter);
|
||||
box-shadow: 0 24px 56px -34px rgba(0, 0, 0, 0.42);
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
@@ -179,7 +179,7 @@ export function VisualConfigEditor({
|
||||
}: VisualConfigEditorProps) {
|
||||
const { t } = useTranslation();
|
||||
const pageTransitionLayer = usePageTransitionLayer();
|
||||
const isCurrentLayer = pageTransitionLayer ? pageTransitionLayer.status === 'current' : true;
|
||||
const isCurrentLayer = pageTransitionLayer ? pageTransitionLayer.isCurrentLayer : true;
|
||||
const isMobile = useMediaQuery('(max-width: 768px)');
|
||||
const isFloatingSidebar = useMediaQuery('(min-width: 1025px)');
|
||||
const shouldRenderFloatingSidebar = !isMobile && isFloatingSidebar && isCurrentLayer;
|
||||
@@ -334,6 +334,7 @@ export function VisualConfigEditor({
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isCurrentLayer) return undefined;
|
||||
if (typeof IntersectionObserver === 'undefined') return undefined;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
@@ -357,10 +358,10 @@ export function VisualConfigEditor({
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [sections]);
|
||||
}, [isCurrentLayer, sections]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMobile) return;
|
||||
if (!isCurrentLayer || !isMobile) return;
|
||||
const scroller = mobileNavScrollerRef.current;
|
||||
const button = mobileNavButtonRefs.current[activeSectionId];
|
||||
if (!scroller || !button) return;
|
||||
@@ -378,7 +379,7 @@ export function VisualConfigEditor({
|
||||
left: targetLeft,
|
||||
behavior: 'smooth',
|
||||
});
|
||||
}, [activeSectionId, isMobile]);
|
||||
}, [activeSectionId, isCurrentLayer, isMobile]);
|
||||
|
||||
const handleSectionJump = useCallback((sectionId: VisualSectionId) => {
|
||||
setActiveSectionId(sectionId);
|
||||
|
||||
@@ -10,8 +10,11 @@ import {
|
||||
buildCandidateUsageSourceIds,
|
||||
calculateStatusBarData,
|
||||
type KeyStats,
|
||||
type UsageDetail,
|
||||
} from '@/utils/usage';
|
||||
import {
|
||||
collectUsageDetailsForCandidates,
|
||||
type UsageDetailsBySource,
|
||||
} from '@/utils/usageIndex';
|
||||
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||
import { ProviderList } from '../ProviderList';
|
||||
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||
@@ -20,7 +23,7 @@ import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
|
||||
interface ClaudeSectionProps {
|
||||
configs: ProviderKeyConfig[];
|
||||
keyStats: KeyStats;
|
||||
usageDetails: UsageDetail[];
|
||||
usageDetailsBySource: UsageDetailsBySource;
|
||||
loading: boolean;
|
||||
disableControls: boolean;
|
||||
isSwitching: boolean;
|
||||
@@ -33,7 +36,7 @@ interface ClaudeSectionProps {
|
||||
export function ClaudeSection({
|
||||
configs,
|
||||
keyStats,
|
||||
usageDetails,
|
||||
usageDetailsBySource,
|
||||
loading,
|
||||
disableControls,
|
||||
isSwitching,
|
||||
@@ -56,13 +59,14 @@ export function ClaudeSection({
|
||||
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));
|
||||
cache.set(
|
||||
config.apiKey,
|
||||
calculateStatusBarData(collectUsageDetailsForCandidates(usageDetailsBySource, candidates))
|
||||
);
|
||||
});
|
||||
|
||||
return cache;
|
||||
}, [configs, usageDetails]);
|
||||
}, [configs, usageDetailsBySource]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -10,8 +10,11 @@ import {
|
||||
buildCandidateUsageSourceIds,
|
||||
calculateStatusBarData,
|
||||
type KeyStats,
|
||||
type UsageDetail,
|
||||
} from '@/utils/usage';
|
||||
import {
|
||||
collectUsageDetailsForCandidates,
|
||||
type UsageDetailsBySource,
|
||||
} from '@/utils/usageIndex';
|
||||
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||
import { ProviderList } from '../ProviderList';
|
||||
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||
@@ -20,7 +23,7 @@ import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
|
||||
interface CodexSectionProps {
|
||||
configs: ProviderKeyConfig[];
|
||||
keyStats: KeyStats;
|
||||
usageDetails: UsageDetail[];
|
||||
usageDetailsBySource: UsageDetailsBySource;
|
||||
loading: boolean;
|
||||
disableControls: boolean;
|
||||
isSwitching: boolean;
|
||||
@@ -33,7 +36,7 @@ interface CodexSectionProps {
|
||||
export function CodexSection({
|
||||
configs,
|
||||
keyStats,
|
||||
usageDetails,
|
||||
usageDetailsBySource,
|
||||
loading,
|
||||
disableControls,
|
||||
isSwitching,
|
||||
@@ -56,13 +59,14 @@ export function CodexSection({
|
||||
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));
|
||||
cache.set(
|
||||
config.apiKey,
|
||||
calculateStatusBarData(collectUsageDetailsForCandidates(usageDetailsBySource, candidates))
|
||||
);
|
||||
});
|
||||
|
||||
return cache;
|
||||
}, [configs, usageDetails]);
|
||||
}, [configs, usageDetailsBySource]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -10,8 +10,11 @@ import {
|
||||
buildCandidateUsageSourceIds,
|
||||
calculateStatusBarData,
|
||||
type KeyStats,
|
||||
type UsageDetail,
|
||||
} from '@/utils/usage';
|
||||
import {
|
||||
collectUsageDetailsForCandidates,
|
||||
type UsageDetailsBySource,
|
||||
} from '@/utils/usageIndex';
|
||||
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||
import { ProviderList } from '../ProviderList';
|
||||
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||
@@ -20,7 +23,7 @@ import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
|
||||
interface GeminiSectionProps {
|
||||
configs: GeminiKeyConfig[];
|
||||
keyStats: KeyStats;
|
||||
usageDetails: UsageDetail[];
|
||||
usageDetailsBySource: UsageDetailsBySource;
|
||||
loading: boolean;
|
||||
disableControls: boolean;
|
||||
isSwitching: boolean;
|
||||
@@ -33,7 +36,7 @@ interface GeminiSectionProps {
|
||||
export function GeminiSection({
|
||||
configs,
|
||||
keyStats,
|
||||
usageDetails,
|
||||
usageDetailsBySource,
|
||||
loading,
|
||||
disableControls,
|
||||
isSwitching,
|
||||
@@ -56,13 +59,14 @@ export function GeminiSection({
|
||||
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));
|
||||
cache.set(
|
||||
config.apiKey,
|
||||
calculateStatusBarData(collectUsageDetailsForCandidates(usageDetailsBySource, candidates))
|
||||
);
|
||||
});
|
||||
|
||||
return cache;
|
||||
}, [configs, usageDetails]);
|
||||
}, [configs, usageDetailsBySource]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -11,8 +11,8 @@ import {
|
||||
buildCandidateUsageSourceIds,
|
||||
calculateStatusBarData,
|
||||
type KeyStats,
|
||||
type UsageDetail,
|
||||
} from '@/utils/usage';
|
||||
import { collectUsageDetailsForCandidates, type UsageDetailsBySource } from '@/utils/usageIndex';
|
||||
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||
import { ProviderList } from '../ProviderList';
|
||||
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||
@@ -21,7 +21,7 @@ import { getOpenAIProviderStats, getStatsBySource } from '../utils';
|
||||
interface OpenAISectionProps {
|
||||
configs: OpenAIProviderConfig[];
|
||||
keyStats: KeyStats;
|
||||
usageDetails: UsageDetail[];
|
||||
usageDetailsBySource: UsageDetailsBySource;
|
||||
loading: boolean;
|
||||
disableControls: boolean;
|
||||
isSwitching: boolean;
|
||||
@@ -34,7 +34,7 @@ interface OpenAISectionProps {
|
||||
export function OpenAISection({
|
||||
configs,
|
||||
keyStats,
|
||||
usageDetails,
|
||||
usageDetailsBySource,
|
||||
loading,
|
||||
disableControls,
|
||||
isSwitching,
|
||||
@@ -57,13 +57,13 @@ export function OpenAISection({
|
||||
});
|
||||
|
||||
const filteredDetails = sourceIds.size
|
||||
? usageDetails.filter((detail) => sourceIds.has(detail.source))
|
||||
? collectUsageDetailsForCandidates(usageDetailsBySource, sourceIds)
|
||||
: [];
|
||||
cache.set(provider.name, calculateStatusBarData(filteredDetails));
|
||||
});
|
||||
|
||||
return cache;
|
||||
}, [configs, usageDetails]);
|
||||
}, [configs, usageDetailsBySource]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -17,10 +17,11 @@
|
||||
flex-direction: row;
|
||||
gap: 6px;
|
||||
padding: 10px 12px;
|
||||
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
|
||||
--glass-blur: 12px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--glass-backdrop-filter);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
|
||||
overflow-x: auto;
|
||||
@@ -104,8 +105,6 @@
|
||||
// 暗色主题适配
|
||||
:global([data-theme='dark']) {
|
||||
.navList {
|
||||
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
|
||||
border-color: color-mix(in srgb, var(--border-color) 55%, transparent);
|
||||
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
|
||||
@@ -10,8 +10,11 @@ import {
|
||||
buildCandidateUsageSourceIds,
|
||||
calculateStatusBarData,
|
||||
type KeyStats,
|
||||
type UsageDetail,
|
||||
} from '@/utils/usage';
|
||||
import {
|
||||
collectUsageDetailsForCandidates,
|
||||
type UsageDetailsBySource,
|
||||
} from '@/utils/usageIndex';
|
||||
import styles from '@/pages/AiProvidersPage.module.scss';
|
||||
import { ProviderList } from '../ProviderList';
|
||||
import { ProviderStatusBar } from '../ProviderStatusBar';
|
||||
@@ -20,7 +23,7 @@ import { getStatsBySource, hasDisableAllModelsRule } from '../utils';
|
||||
interface VertexSectionProps {
|
||||
configs: ProviderKeyConfig[];
|
||||
keyStats: KeyStats;
|
||||
usageDetails: UsageDetail[];
|
||||
usageDetailsBySource: UsageDetailsBySource;
|
||||
loading: boolean;
|
||||
disableControls: boolean;
|
||||
isSwitching: boolean;
|
||||
@@ -33,7 +36,7 @@ interface VertexSectionProps {
|
||||
export function VertexSection({
|
||||
configs,
|
||||
keyStats,
|
||||
usageDetails,
|
||||
usageDetailsBySource,
|
||||
loading,
|
||||
disableControls,
|
||||
isSwitching,
|
||||
@@ -56,13 +59,14 @@ export function VertexSection({
|
||||
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));
|
||||
cache.set(
|
||||
config.apiKey,
|
||||
calculateStatusBarData(collectUsageDetailsForCandidates(usageDetailsBySource, candidates))
|
||||
);
|
||||
});
|
||||
|
||||
return cache;
|
||||
}, [configs, usageDetails]);
|
||||
}, [configs, usageDetailsBySource]);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
@@ -1,11 +1,22 @@
|
||||
import { useCallback } from 'react';
|
||||
import { useInterval } from '@/hooks/useInterval';
|
||||
import { USAGE_STATS_STALE_TIME_MS, useUsageStatsStore } from '@/stores';
|
||||
import type { KeyStats, UsageDetail } from '@/utils/usage';
|
||||
|
||||
export const useProviderStats = () => {
|
||||
const keyStats = useUsageStatsStore((state) => state.keyStats);
|
||||
const usageDetails = useUsageStatsStore((state) => state.usageDetails);
|
||||
const isLoading = useUsageStatsStore((state) => state.loading);
|
||||
const EMPTY_KEY_STATS: KeyStats = { bySource: {}, byAuthIndex: {} };
|
||||
const EMPTY_USAGE_DETAILS: UsageDetail[] = [];
|
||||
|
||||
export type UseProviderStatsOptions = {
|
||||
enabled?: boolean;
|
||||
};
|
||||
|
||||
export const useProviderStats = (options: UseProviderStatsOptions = {}) => {
|
||||
const enabled = options.enabled ?? true;
|
||||
const keyStats = useUsageStatsStore((state) => (enabled ? state.keyStats : EMPTY_KEY_STATS));
|
||||
const usageDetails = useUsageStatsStore((state) =>
|
||||
enabled ? state.usageDetails : EMPTY_USAGE_DETAILS
|
||||
);
|
||||
const isLoading = useUsageStatsStore((state) => (enabled ? state.loading : false));
|
||||
const loadUsageStats = useUsageStatsStore((state) => state.loadUsageStats);
|
||||
|
||||
// 首次进入页面优先复用缓存，避免跨页面重复拉取 /usage。
|
||||
@@ -20,7 +31,7 @@ export const useProviderStats = () => {
|
||||
|
||||
useInterval(() => {
|
||||
void refreshKeyStats().catch(() => {});
|
||||
}, 240_000);
|
||||
}, enabled ? 240_000 : null);
|
||||
|
||||
return { keyStats, usageDetails, loadKeyStats, refreshKeyStats, isLoading };
|
||||
};
|
||||
|
||||
@@ -83,7 +83,11 @@ export function ServiceHealthCard({ usage, loading }: ServiceHealthCardProps) {
|
||||
}, [activeTooltip]);
|
||||
|
||||
const buildTooltipState = useCallback(
|
||||
(idx: number, anchorEl: HTMLDivElement): ActiveTooltipState => {
|
||||
(idx: number, anchorEl: HTMLDivElement | null): ActiveTooltipState | null => {
|
||||
if (!anchorEl || !anchorEl.isConnected) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const rect = anchorEl.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
|
||||
@@ -161,9 +165,8 @@ export function ServiceHealthCard({ usage, loading }: ServiceHealthCardProps) {
|
||||
(e: React.PointerEvent<HTMLDivElement>, idx: number) => {
|
||||
if (e.pointerType === 'touch') {
|
||||
e.preventDefault();
|
||||
setActiveTooltip((prev) =>
|
||||
prev?.idx === idx ? null : buildTooltipState(idx, e.currentTarget)
|
||||
);
|
||||
const anchorEl = e.currentTarget;
|
||||
setActiveTooltip((prev) => (prev?.idx === idx ? null : buildTooltipState(idx, anchorEl)));
|
||||
}
|
||||
},
|
||||
[buildTooltipState]
|
||||
|
||||
@@ -8,17 +8,32 @@ export function useAuthFilesStatusBarCache(files: AuthFileItem[], usageDetails:
|
||||
return useMemo(() => {
|
||||
const cache = new Map<string, AuthFileStatusBarData>();
|
||||
|
||||
const usageDetailsByAuthIndex = new Map<string, UsageDetail[]>();
|
||||
usageDetails.forEach((detail) => {
|
||||
const authIndexKey = normalizeAuthIndex(detail.auth_index);
|
||||
if (!authIndexKey) return;
|
||||
|
||||
const list = usageDetailsByAuthIndex.get(authIndexKey);
|
||||
if (list) {
|
||||
list.push(detail);
|
||||
} else {
|
||||
usageDetailsByAuthIndex.set(authIndexKey, [detail]);
|
||||
}
|
||||
});
|
||||
|
||||
const uniqueAuthIndexKeys = new Set<string>();
|
||||
files.forEach((file) => {
|
||||
const rawAuthIndex = file['auth_index'] ?? file.authIndex;
|
||||
const authIndexKey = normalizeAuthIndex(rawAuthIndex);
|
||||
if (!authIndexKey) return;
|
||||
uniqueAuthIndexKeys.add(authIndexKey);
|
||||
});
|
||||
|
||||
if (authIndexKey) {
|
||||
const filteredDetails = usageDetails.filter((detail) => {
|
||||
const detailAuthIndex = normalizeAuthIndex(detail.auth_index);
|
||||
return detailAuthIndex !== null && detailAuthIndex === authIndexKey;
|
||||
});
|
||||
cache.set(authIndexKey, calculateStatusBarData(filteredDetails));
|
||||
}
|
||||
uniqueAuthIndexKeys.forEach((authIndexKey) => {
|
||||
cache.set(
|
||||
authIndexKey,
|
||||
calculateStatusBarData(usageDetailsByAuthIndex.get(authIndexKey) ?? [])
|
||||
);
|
||||
});
|
||||
|
||||
return cache;
|
||||
|
||||
@@ -21,13 +21,23 @@ const AUTH_FILES_SORT_MODE_SET = new Set<AuthFilesSortMode>(AUTH_FILES_SORT_MODE
|
||||
export const isAuthFilesSortMode = (value: unknown): value is AuthFilesSortMode =>
|
||||
typeof value === 'string' && AUTH_FILES_SORT_MODE_SET.has(value as AuthFilesSortMode);
|
||||
|
||||
const readAuthFilesUiStateFromStorage = (
|
||||
storage: Pick<Storage, 'getItem'> | null | undefined
|
||||
): AuthFilesUiState | null => {
|
||||
if (!storage) return null;
|
||||
const raw = storage.getItem(AUTH_FILES_UI_STATE_KEY);
|
||||
if (!raw) return null;
|
||||
const parsed = JSON.parse(raw) as AuthFilesUiState;
|
||||
return parsed && typeof parsed === 'object' ? parsed : null;
|
||||
};
|
||||
|
||||
export const readAuthFilesUiState = (): AuthFilesUiState | null => {
|
||||
if (typeof window === 'undefined') return null;
|
||||
try {
|
||||
const raw = window.sessionStorage.getItem(AUTH_FILES_UI_STATE_KEY);
|
||||
if (!raw) return null;
|
||||
const parsed = JSON.parse(raw) as AuthFilesUiState;
|
||||
return parsed && typeof parsed === 'object' ? parsed : null;
|
||||
return (
|
||||
readAuthFilesUiStateFromStorage(window.localStorage) ??
|
||||
readAuthFilesUiStateFromStorage(window.sessionStorage)
|
||||
);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
@@ -36,7 +46,12 @@ export const readAuthFilesUiState = (): AuthFilesUiState | null => {
|
||||
export const writeAuthFilesUiState = (state: AuthFilesUiState) => {
|
||||
if (typeof window === 'undefined') return;
|
||||
try {
|
||||
window.sessionStorage.setItem(AUTH_FILES_UI_STATE_KEY, JSON.stringify(state));
|
||||
window.localStorage.setItem(AUTH_FILES_UI_STATE_KEY, JSON.stringify(state));
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
try {
|
||||
window.sessionStorage.removeItem(AUTH_FILES_UI_STATE_KEY);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
export type HeaderRefreshHandler = () => void | Promise<void>;
|
||||
|
||||
@@ -9,9 +9,19 @@ export const triggerHeaderRefresh = async () => {
|
||||
await activeHeaderRefreshHandler();
|
||||
};
|
||||
|
||||
export const useHeaderRefresh = (handler?: HeaderRefreshHandler | null) => {
|
||||
export const useHeaderRefresh = (handler?: HeaderRefreshHandler | null, enabled = true) => {
|
||||
const lastHandlerRef = useRef<HeaderRefreshHandler | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!handler) return;
|
||||
const previousHandler = lastHandlerRef.current;
|
||||
lastHandlerRef.current = handler ?? null;
|
||||
|
||||
if (!enabled || !handler) {
|
||||
if (previousHandler && activeHeaderRefreshHandler === previousHandler) {
|
||||
activeHeaderRefreshHandler = null;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
activeHeaderRefreshHandler = handler;
|
||||
|
||||
@@ -20,5 +30,5 @@ export const useHeaderRefresh = (handler?: HeaderRefreshHandler | null) => {
|
||||
activeHeaderRefreshHandler = null;
|
||||
}
|
||||
};
|
||||
}, [handler]);
|
||||
}, [enabled, handler]);
|
||||
};
|
||||
|
||||
+346
-43
@@ -1,4 +1,4 @@
|
||||
import { useCallback, useMemo, useState } from 'react';
|
||||
import { useCallback, useMemo, useReducer } from 'react';
|
||||
import { isMap, parse as parseYaml, parseDocument } from 'yaml';
|
||||
import type {
|
||||
PayloadFilterRule,
|
||||
@@ -189,7 +189,9 @@ export function getPayloadParamValidationError(
|
||||
}
|
||||
|
||||
function hasPayloadParamValidationErrors(rules: PayloadRule[]): boolean {
|
||||
return rules.some((rule) => rule.params.some((param) => Boolean(getPayloadParamValidationError(param))));
|
||||
return rules.some((rule) =>
|
||||
rule.params.some((param) => Boolean(getPayloadParamValidationError(param)))
|
||||
);
|
||||
}
|
||||
|
||||
function deepClone<T>(value: T): T {
|
||||
@@ -197,6 +199,72 @@ function deepClone<T>(value: T): T {
|
||||
return JSON.parse(JSON.stringify(value)) as T;
|
||||
}
|
||||
|
||||
function arePayloadModelEntriesEqual(
|
||||
left: PayloadRule['models'],
|
||||
right: PayloadRule['models']
|
||||
): boolean {
|
||||
if (left === right) return true;
|
||||
if (left.length !== right.length) return false;
|
||||
for (let i = 0; i < left.length; i += 1) {
|
||||
const a = left[i];
|
||||
const b = right[i];
|
||||
if (!a || !b) return false;
|
||||
if (a.id !== b.id || a.name !== b.name || a.protocol !== b.protocol) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function arePayloadParamEntriesEqual(
|
||||
left: PayloadRule['params'],
|
||||
right: PayloadRule['params']
|
||||
): boolean {
|
||||
if (left === right) return true;
|
||||
if (left.length !== right.length) return false;
|
||||
for (let i = 0; i < left.length; i += 1) {
|
||||
const a = left[i];
|
||||
const b = right[i];
|
||||
if (!a || !b) return false;
|
||||
if (a.id !== b.id || a.path !== b.path || a.valueType !== b.valueType || a.value !== b.value) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function arePayloadRulesEqual(left: PayloadRule[], right: PayloadRule[]): boolean {
|
||||
if (left === right) return true;
|
||||
if (left.length !== right.length) return false;
|
||||
for (let i = 0; i < left.length; i += 1) {
|
||||
const a = left[i];
|
||||
const b = right[i];
|
||||
if (!a || !b) return false;
|
||||
if (a.id !== b.id) return false;
|
||||
if (!arePayloadModelEntriesEqual(a.models, b.models)) return false;
|
||||
if (!arePayloadParamEntriesEqual(a.params, b.params)) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function arePayloadFilterRulesEqual(
|
||||
left: PayloadFilterRule[],
|
||||
right: PayloadFilterRule[]
|
||||
): boolean {
|
||||
if (left === right) return true;
|
||||
if (left.length !== right.length) return false;
|
||||
for (let i = 0; i < left.length; i += 1) {
|
||||
const a = left[i];
|
||||
const b = right[i];
|
||||
if (!a || !b) return false;
|
||||
if (a.id !== b.id) return false;
|
||||
if (!arePayloadModelEntriesEqual(a.models, b.models)) return false;
|
||||
if (a.params.length !== b.params.length) return false;
|
||||
for (let j = 0; j < a.params.length; j += 1) {
|
||||
if (a.params[j] !== b.params[j]) return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function parsePayloadParamValue(raw: unknown): { valueType: PayloadParamValueType; value: string } {
|
||||
if (typeof raw === 'number') {
|
||||
return { valueType: 'number', value: String(raw) };
|
||||
@@ -426,15 +494,266 @@ function serializeRawPayloadRulesForYaml(rules: PayloadRule[]): Array<Record<str
|
||||
.filter((rule) => rule.models.length > 0);
|
||||
}
|
||||
|
||||
export function useVisualConfig() {
|
||||
const [visualValues, setVisualValuesState] = useState<VisualConfigValues>({
|
||||
...DEFAULT_VISUAL_VALUES,
|
||||
});
|
||||
type VisualConfigState = {
|
||||
visualValues: VisualConfigValues;
|
||||
baselineValues: VisualConfigValues;
|
||||
dirtyFields: Set<string>;
|
||||
visualParseError: string | null;
|
||||
};
|
||||
|
||||
const [baselineValues, setBaselineValues] = useState<VisualConfigValues>({
|
||||
...DEFAULT_VISUAL_VALUES,
|
||||
});
|
||||
const [visualParseError, setVisualParseError] = useState<string | null>(null);
|
||||
type VisualConfigAction =
|
||||
| {
|
||||
type: 'load_success';
|
||||
values: VisualConfigValues;
|
||||
}
|
||||
| {
|
||||
type: 'load_error';
|
||||
error: string;
|
||||
}
|
||||
| {
|
||||
type: 'set_values';
|
||||
values: Partial<VisualConfigValues>;
|
||||
};
|
||||
|
||||
function createInitialVisualConfigState(): VisualConfigState {
|
||||
const initialValues = deepClone(DEFAULT_VISUAL_VALUES);
|
||||
return {
|
||||
visualValues: initialValues,
|
||||
baselineValues: deepClone(initialValues),
|
||||
dirtyFields: new Set(),
|
||||
visualParseError: null,
|
||||
};
|
||||
}
|
||||
|
||||
function mergeVisualConfigValues(
|
||||
currentValues: VisualConfigValues,
|
||||
patch: Partial<VisualConfigValues>
|
||||
): VisualConfigValues {
|
||||
const nextValues: VisualConfigValues = { ...currentValues, ...patch } as VisualConfigValues;
|
||||
if (patch.streaming) {
|
||||
nextValues.streaming = { ...currentValues.streaming, ...patch.streaming };
|
||||
}
|
||||
return nextValues;
|
||||
}
|
||||
|
||||
function getNextDirtyFields(
|
||||
currentDirtyFields: Set<string>,
|
||||
patch: Partial<VisualConfigValues>,
|
||||
nextValues: VisualConfigValues,
|
||||
baselineValues: VisualConfigValues
|
||||
): Set<string> {
|
||||
const nextDirtyFields = new Set(currentDirtyFields);
|
||||
const updateDirty = (key: string, isEqual: boolean) => {
|
||||
if (isEqual) {
|
||||
nextDirtyFields.delete(key);
|
||||
} else {
|
||||
nextDirtyFields.add(key);
|
||||
}
|
||||
};
|
||||
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'host')) {
|
||||
updateDirty('host', nextValues.host === baselineValues.host);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'port')) {
|
||||
updateDirty('port', nextValues.port === baselineValues.port);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'tlsEnable')) {
|
||||
updateDirty('tlsEnable', nextValues.tlsEnable === baselineValues.tlsEnable);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'tlsCert')) {
|
||||
updateDirty('tlsCert', nextValues.tlsCert === baselineValues.tlsCert);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'tlsKey')) {
|
||||
updateDirty('tlsKey', nextValues.tlsKey === baselineValues.tlsKey);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'rmAllowRemote')) {
|
||||
updateDirty('rmAllowRemote', nextValues.rmAllowRemote === baselineValues.rmAllowRemote);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'rmSecretKey')) {
|
||||
updateDirty('rmSecretKey', nextValues.rmSecretKey === baselineValues.rmSecretKey);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'rmDisableControlPanel')) {
|
||||
updateDirty(
|
||||
'rmDisableControlPanel',
|
||||
nextValues.rmDisableControlPanel === baselineValues.rmDisableControlPanel
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'rmPanelRepo')) {
|
||||
updateDirty('rmPanelRepo', nextValues.rmPanelRepo === baselineValues.rmPanelRepo);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'authDir')) {
|
||||
updateDirty('authDir', nextValues.authDir === baselineValues.authDir);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'apiKeysText')) {
|
||||
updateDirty('apiKeysText', nextValues.apiKeysText === baselineValues.apiKeysText);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'debug')) {
|
||||
updateDirty('debug', nextValues.debug === baselineValues.debug);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'commercialMode')) {
|
||||
updateDirty('commercialMode', nextValues.commercialMode === baselineValues.commercialMode);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'loggingToFile')) {
|
||||
updateDirty('loggingToFile', nextValues.loggingToFile === baselineValues.loggingToFile);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'logsMaxTotalSizeMb')) {
|
||||
updateDirty(
|
||||
'logsMaxTotalSizeMb',
|
||||
nextValues.logsMaxTotalSizeMb === baselineValues.logsMaxTotalSizeMb
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'usageStatisticsEnabled')) {
|
||||
updateDirty(
|
||||
'usageStatisticsEnabled',
|
||||
nextValues.usageStatisticsEnabled === baselineValues.usageStatisticsEnabled
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'proxyUrl')) {
|
||||
updateDirty('proxyUrl', nextValues.proxyUrl === baselineValues.proxyUrl);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'forceModelPrefix')) {
|
||||
updateDirty(
|
||||
'forceModelPrefix',
|
||||
nextValues.forceModelPrefix === baselineValues.forceModelPrefix
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'requestRetry')) {
|
||||
updateDirty('requestRetry', nextValues.requestRetry === baselineValues.requestRetry);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'maxRetryCredentials')) {
|
||||
updateDirty(
|
||||
'maxRetryCredentials',
|
||||
nextValues.maxRetryCredentials === baselineValues.maxRetryCredentials
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'maxRetryInterval')) {
|
||||
updateDirty(
|
||||
'maxRetryInterval',
|
||||
nextValues.maxRetryInterval === baselineValues.maxRetryInterval
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'wsAuth')) {
|
||||
updateDirty('wsAuth', nextValues.wsAuth === baselineValues.wsAuth);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'quotaSwitchProject')) {
|
||||
updateDirty(
|
||||
'quotaSwitchProject',
|
||||
nextValues.quotaSwitchProject === baselineValues.quotaSwitchProject
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'quotaSwitchPreviewModel')) {
|
||||
updateDirty(
|
||||
'quotaSwitchPreviewModel',
|
||||
nextValues.quotaSwitchPreviewModel === baselineValues.quotaSwitchPreviewModel
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'routingStrategy')) {
|
||||
updateDirty('routingStrategy', nextValues.routingStrategy === baselineValues.routingStrategy);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'payloadDefaultRules')) {
|
||||
updateDirty(
|
||||
'payloadDefaultRules',
|
||||
arePayloadRulesEqual(nextValues.payloadDefaultRules, baselineValues.payloadDefaultRules)
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'payloadDefaultRawRules')) {
|
||||
updateDirty(
|
||||
'payloadDefaultRawRules',
|
||||
arePayloadRulesEqual(nextValues.payloadDefaultRawRules, baselineValues.payloadDefaultRawRules)
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'payloadOverrideRules')) {
|
||||
updateDirty(
|
||||
'payloadOverrideRules',
|
||||
arePayloadRulesEqual(nextValues.payloadOverrideRules, baselineValues.payloadOverrideRules)
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'payloadOverrideRawRules')) {
|
||||
updateDirty(
|
||||
'payloadOverrideRawRules',
|
||||
arePayloadRulesEqual(
|
||||
nextValues.payloadOverrideRawRules,
|
||||
baselineValues.payloadOverrideRawRules
|
||||
)
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(patch, 'payloadFilterRules')) {
|
||||
updateDirty(
|
||||
'payloadFilterRules',
|
||||
arePayloadFilterRulesEqual(nextValues.payloadFilterRules, baselineValues.payloadFilterRules)
|
||||
);
|
||||
}
|
||||
if (patch.streaming) {
|
||||
const streamingPatch = patch.streaming;
|
||||
if (Object.prototype.hasOwnProperty.call(streamingPatch, 'keepaliveSeconds')) {
|
||||
updateDirty(
|
||||
'streaming.keepaliveSeconds',
|
||||
nextValues.streaming.keepaliveSeconds === baselineValues.streaming.keepaliveSeconds
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(streamingPatch, 'bootstrapRetries')) {
|
||||
updateDirty(
|
||||
'streaming.bootstrapRetries',
|
||||
nextValues.streaming.bootstrapRetries === baselineValues.streaming.bootstrapRetries
|
||||
);
|
||||
}
|
||||
if (Object.prototype.hasOwnProperty.call(streamingPatch, 'nonstreamKeepaliveInterval')) {
|
||||
updateDirty(
|
||||
'streaming.nonstreamKeepaliveInterval',
|
||||
nextValues.streaming.nonstreamKeepaliveInterval ===
|
||||
baselineValues.streaming.nonstreamKeepaliveInterval
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return nextDirtyFields;
|
||||
}
|
||||
|
||||
function visualConfigReducer(
|
||||
state: VisualConfigState,
|
||||
action: VisualConfigAction
|
||||
): VisualConfigState {
|
||||
switch (action.type) {
|
||||
case 'load_success':
|
||||
return {
|
||||
visualValues: action.values,
|
||||
baselineValues: deepClone(action.values),
|
||||
dirtyFields: new Set(),
|
||||
visualParseError: null,
|
||||
};
|
||||
case 'load_error':
|
||||
return {
|
||||
...state,
|
||||
visualParseError: action.error,
|
||||
};
|
||||
case 'set_values': {
|
||||
const nextValues = mergeVisualConfigValues(state.visualValues, action.values);
|
||||
const nextDirtyFields = getNextDirtyFields(
|
||||
state.dirtyFields,
|
||||
action.values,
|
||||
nextValues,
|
||||
state.baselineValues
|
||||
);
|
||||
|
||||
return {
|
||||
...state,
|
||||
visualValues: nextValues,
|
||||
dirtyFields: nextDirtyFields,
|
||||
};
|
||||
}
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
}
|
||||
|
||||
export function useVisualConfig() {
|
||||
const [state, dispatch] = useReducer(
|
||||
visualConfigReducer,
|
||||
undefined,
|
||||
createInitialVisualConfigState
|
||||
);
|
||||
const { visualValues, visualParseError } = state;
|
||||
const visualDirty = state.dirtyFields.size > 0;
|
||||
const visualValidationErrors = useMemo(
|
||||
() => getVisualConfigValidationErrors(visualValues),
|
||||
[visualValues]
|
||||
@@ -453,10 +772,6 @@ export function useVisualConfig() {
|
||||
]
|
||||
);
|
||||
|
||||
const visualDirty = useMemo(() => {
|
||||
return JSON.stringify(visualValues) !== JSON.stringify(baselineValues);
|
||||
}, [baselineValues, visualValues]);
|
||||
|
||||
const loadVisualValuesFromYaml = useCallback((yamlContent: string) => {
|
||||
try {
|
||||
const document = parseDocument(yamlContent);
|
||||
@@ -483,14 +798,16 @@ export function useVisualConfig() {
|
||||
|
||||
rmAllowRemote: Boolean(remoteManagement?.['allow-remote']),
|
||||
rmSecretKey:
|
||||
typeof remoteManagement?.['secret-key'] === 'string' ? remoteManagement['secret-key'] : '',
|
||||
typeof remoteManagement?.['secret-key'] === 'string'
|
||||
? remoteManagement['secret-key']
|
||||
: '',
|
||||
rmDisableControlPanel: Boolean(remoteManagement?.['disable-control-panel']),
|
||||
rmPanelRepo:
|
||||
typeof remoteManagement?.['panel-github-repository'] === 'string'
|
||||
? remoteManagement['panel-github-repository']
|
||||
: typeof remoteManagement?.['panel-repo'] === 'string'
|
||||
? remoteManagement['panel-repo']
|
||||
: '',
|
||||
: '',
|
||||
|
||||
authDir: typeof parsed['auth-dir'] === 'string' ? parsed['auth-dir'] : '',
|
||||
apiKeysText: resolveApiKeysText(parsed),
|
||||
@@ -509,12 +826,9 @@ export function useVisualConfig() {
|
||||
wsAuth: Boolean(parsed['ws-auth']),
|
||||
|
||||
quotaSwitchProject: Boolean(quotaExceeded?.['switch-project'] ?? true),
|
||||
quotaSwitchPreviewModel: Boolean(
|
||||
quotaExceeded?.['switch-preview-model'] ?? true
|
||||
),
|
||||
quotaSwitchPreviewModel: Boolean(quotaExceeded?.['switch-preview-model'] ?? true),
|
||||
|
||||
routingStrategy:
|
||||
routing?.strategy === 'fill-first' ? 'fill-first' : 'round-robin',
|
||||
routingStrategy: routing?.strategy === 'fill-first' ? 'fill-first' : 'round-robin',
|
||||
|
||||
payloadDefaultRules: parsePayloadRules(payload?.default),
|
||||
payloadDefaultRawRules: parseRawPayloadRules(payload?.['default-raw']),
|
||||
@@ -529,13 +843,11 @@ export function useVisualConfig() {
|
||||
},
|
||||
};
|
||||
|
||||
setVisualValuesState(newValues);
|
||||
setBaselineValues(deepClone(newValues));
|
||||
setVisualParseError(null);
|
||||
dispatch({ type: 'load_success', values: newValues });
|
||||
return { ok: true as const };
|
||||
} catch (error: unknown) {
|
||||
const message = error instanceof Error ? error.message : 'Invalid YAML';
|
||||
setVisualParseError(message);
|
||||
dispatch({ type: 'load_error', error: message });
|
||||
return { ok: false as const, error: message };
|
||||
}
|
||||
}, []);
|
||||
@@ -621,10 +933,7 @@ export function useVisualConfig() {
|
||||
) {
|
||||
ensureMapInDoc(doc, ['quota-exceeded']);
|
||||
doc.setIn(['quota-exceeded', 'switch-project'], values.quotaSwitchProject);
|
||||
doc.setIn(
|
||||
['quota-exceeded', 'switch-preview-model'],
|
||||
values.quotaSwitchPreviewModel
|
||||
);
|
||||
doc.setIn(['quota-exceeded', 'switch-preview-model'], values.quotaSwitchPreviewModel);
|
||||
deleteIfMapEmpty(doc, ['quota-exceeded']);
|
||||
}
|
||||
|
||||
@@ -635,9 +944,13 @@ export function useVisualConfig() {
|
||||
}
|
||||
|
||||
const keepaliveSeconds =
|
||||
typeof values.streaming?.keepaliveSeconds === 'string' ? values.streaming.keepaliveSeconds : '';
|
||||
typeof values.streaming?.keepaliveSeconds === 'string'
|
||||
? values.streaming.keepaliveSeconds
|
||||
: '';
|
||||
const bootstrapRetries =
|
||||
typeof values.streaming?.bootstrapRetries === 'string' ? values.streaming.bootstrapRetries : '';
|
||||
typeof values.streaming?.bootstrapRetries === 'string'
|
||||
? values.streaming.bootstrapRetries
|
||||
: '';
|
||||
const nonstreamKeepaliveInterval =
|
||||
typeof values.streaming?.nonstreamKeepaliveInterval === 'string'
|
||||
? values.streaming.nonstreamKeepaliveInterval
|
||||
@@ -652,11 +965,7 @@ export function useVisualConfig() {
|
||||
deleteIfMapEmpty(doc, ['streaming']);
|
||||
}
|
||||
|
||||
setIntFromStringInDoc(
|
||||
doc,
|
||||
['nonstream-keepalive-interval'],
|
||||
nonstreamKeepaliveInterval
|
||||
);
|
||||
setIntFromStringInDoc(doc, ['nonstream-keepalive-interval'], nonstreamKeepaliveInterval);
|
||||
|
||||
if (
|
||||
docHas(doc, ['payload']) ||
|
||||
@@ -719,13 +1028,7 @@ export function useVisualConfig() {
|
||||
);
|
||||
|
||||
const setVisualValues = useCallback((newValues: Partial<VisualConfigValues>) => {
|
||||
setVisualValuesState((prev) => {
|
||||
const next: VisualConfigValues = { ...prev, ...newValues } as VisualConfigValues;
|
||||
if (newValues.streaming) {
|
||||
next.streaming = { ...prev.streaming, ...newValues.streaming };
|
||||
}
|
||||
return next;
|
||||
});
|
||||
dispatch({ type: 'set_values', values: newValues });
|
||||
}, []);
|
||||
|
||||
return {
|
||||
|
||||
@@ -5,6 +5,8 @@ import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
|
||||
import App from './App.tsx';
|
||||
|
||||
document.title = 'CLI Proxy API Management Center';
|
||||
document.documentElement.setAttribute('translate', 'no');
|
||||
document.documentElement.classList.add('notranslate');
|
||||
|
||||
const faviconEl = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
|
||||
if (faviconEl) {
|
||||
|
||||
@@ -13,6 +13,7 @@ import { ampcodeApi } from '@/services/api';
|
||||
import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
|
||||
import type { AmpcodeConfig } from '@/types';
|
||||
import { maskApiKey } from '@/utils/format';
|
||||
import { areStringArraysEqual } from '@/utils/compare';
|
||||
import {
|
||||
buildAmpcodeFormState,
|
||||
entriesToAmpcodeMappings,
|
||||
@@ -38,20 +39,52 @@ const normalizeMappingEntries = (entries: Array<{ name: string; alias: string }>
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
const normalizeUpstreamApiKeyEntries = (form: AmpcodeFormState) =>
|
||||
entriesToAmpcodeUpstreamApiKeys(form.upstreamApiKeyEntries).map((entry) => ({
|
||||
upstreamApiKey: entry.upstreamApiKey,
|
||||
apiKeys: entry.apiKeys,
|
||||
}));
|
||||
type AmpcodeFormBaseline = {
|
||||
upstreamUrl: string;
|
||||
upstreamApiKey: string;
|
||||
forceModelMappings: boolean;
|
||||
upstreamApiKeys: ReturnType<typeof entriesToAmpcodeUpstreamApiKeys>;
|
||||
modelMappings: ReturnType<typeof normalizeMappingEntries>;
|
||||
};
|
||||
|
||||
const buildAmpcodeSignature = (form: AmpcodeFormState) =>
|
||||
JSON.stringify({
|
||||
upstreamUrl: String(form.upstreamUrl ?? '').trim(),
|
||||
upstreamApiKey: String(form.upstreamApiKey ?? '').trim(),
|
||||
forceModelMappings: Boolean(form.forceModelMappings),
|
||||
upstreamApiKeys: normalizeUpstreamApiKeyEntries(form),
|
||||
modelMappings: normalizeMappingEntries(form.mappingEntries),
|
||||
});
|
||||
const buildAmpcodeBaseline = (form: AmpcodeFormState): AmpcodeFormBaseline => ({
|
||||
upstreamUrl: String(form.upstreamUrl ?? '').trim(),
|
||||
upstreamApiKey: String(form.upstreamApiKey ?? '').trim(),
|
||||
forceModelMappings: Boolean(form.forceModelMappings),
|
||||
upstreamApiKeys: entriesToAmpcodeUpstreamApiKeys(form.upstreamApiKeyEntries),
|
||||
modelMappings: normalizeMappingEntries(form.mappingEntries),
|
||||
});
|
||||
|
||||
const areUpstreamApiKeysEqual = (
|
||||
a: readonly { upstreamApiKey: string; apiKeys: readonly string[] }[],
|
||||
b: readonly { upstreamApiKey: string; apiKeys: readonly string[] }[]
|
||||
) => {
|
||||
if (a === b) return true;
|
||||
if (a.length !== b.length) return false;
|
||||
for (let i = 0; i < a.length; i += 1) {
|
||||
const left = a[i];
|
||||
const right = b[i];
|
||||
if (!left || !right) return false;
|
||||
if (left.upstreamApiKey !== right.upstreamApiKey) return false;
|
||||
if (!areStringArraysEqual(left.apiKeys, right.apiKeys)) return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const areModelMappingsEqual = (
|
||||
a: readonly { from: string; to: string }[],
|
||||
b: readonly { from: string; to: string }[]
|
||||
) => {
|
||||
if (a === b) return true;
|
||||
if (a.length !== b.length) return false;
|
||||
for (let i = 0; i < a.length; i += 1) {
|
||||
const left = a[i];
|
||||
const right = b[i];
|
||||
if (!left || !right) return false;
|
||||
if (left.from !== right.from || left.to !== right.to) return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
export function AiProvidersAmpcodeEditPage() {
|
||||
const { t } = useTranslation();
|
||||
@@ -72,9 +105,7 @@ export function AiProvidersAmpcodeEditPage() {
|
||||
const [upstreamApiKeysDirty, setUpstreamApiKeysDirty] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [baselineSignature, setBaselineSignature] = useState(() =>
|
||||
buildAmpcodeSignature(buildAmpcodeFormState(null))
|
||||
);
|
||||
const [baseline, setBaseline] = useState(() => buildAmpcodeBaseline(buildAmpcodeFormState(null)));
|
||||
const initializedRef = useRef(false);
|
||||
const mountedRef = useRef(false);
|
||||
|
||||
@@ -119,7 +150,7 @@ export function AiProvidersAmpcodeEditPage() {
|
||||
setError('');
|
||||
const initialForm = buildAmpcodeFormState(useConfigStore.getState().config?.ampcode ?? null);
|
||||
setForm(initialForm);
|
||||
setBaselineSignature(buildAmpcodeSignature(initialForm));
|
||||
setBaseline(buildAmpcodeBaseline(initialForm));
|
||||
|
||||
void (async () => {
|
||||
try {
|
||||
@@ -131,7 +162,7 @@ export function AiProvidersAmpcodeEditPage() {
|
||||
clearCache('ampcode');
|
||||
const nextForm = buildAmpcodeFormState(ampcode);
|
||||
setForm(nextForm);
|
||||
setBaselineSignature(buildAmpcodeSignature(nextForm));
|
||||
setBaseline(buildAmpcodeBaseline(nextForm));
|
||||
} catch (err: unknown) {
|
||||
if (!mountedRef.current) return;
|
||||
setError(getErrorMessage(err) || t('notification.refresh_failed'));
|
||||
@@ -143,8 +174,28 @@ export function AiProvidersAmpcodeEditPage() {
|
||||
})();
|
||||
}, [clearCache, t, updateConfigValue]);
|
||||
|
||||
const currentSignature = useMemo(() => buildAmpcodeSignature(form), [form]);
|
||||
const isDirty = baselineSignature !== currentSignature;
|
||||
const normalizedUpstreamApiKeys = useMemo(
|
||||
() => entriesToAmpcodeUpstreamApiKeys(form.upstreamApiKeyEntries),
|
||||
[form.upstreamApiKeyEntries]
|
||||
);
|
||||
const normalizedModelMappings = useMemo(
|
||||
() => normalizeMappingEntries(form.mappingEntries),
|
||||
[form.mappingEntries]
|
||||
);
|
||||
const isUpstreamApiKeysDirty = useMemo(
|
||||
() => !areUpstreamApiKeysEqual(baseline.upstreamApiKeys, normalizedUpstreamApiKeys),
|
||||
[baseline.upstreamApiKeys, normalizedUpstreamApiKeys]
|
||||
);
|
||||
const isModelMappingsDirtyNormalized = useMemo(
|
||||
() => !areModelMappingsEqual(baseline.modelMappings, normalizedModelMappings),
|
||||
[baseline.modelMappings, normalizedModelMappings]
|
||||
);
|
||||
const isDirty =
|
||||
baseline.upstreamUrl !== form.upstreamUrl.trim() ||
|
||||
baseline.upstreamApiKey !== form.upstreamApiKey.trim() ||
|
||||
baseline.forceModelMappings !== Boolean(form.forceModelMappings) ||
|
||||
isUpstreamApiKeysDirty ||
|
||||
isModelMappingsDirtyNormalized;
|
||||
const canGuard = !loading && !saving;
|
||||
|
||||
const { allowNextNavigation } = useUnsavedChangesGuard({
|
||||
@@ -263,7 +314,7 @@ export function AiProvidersAmpcodeEditPage() {
|
||||
clearCache('ampcode');
|
||||
showNotification(t('notification.ampcode_updated'), 'success');
|
||||
allowNextNavigation();
|
||||
setBaselineSignature(buildAmpcodeSignature(form));
|
||||
setBaseline(buildAmpcodeBaseline(form));
|
||||
handleBack();
|
||||
} catch (err: unknown) {
|
||||
const message = getErrorMessage(err);
|
||||
|
||||
@@ -9,8 +9,10 @@ import type { ProviderKeyConfig } from '@/types';
|
||||
import type { ModelInfo } from '@/utils/models';
|
||||
import type { ModelEntry, ProviderFormState } from '@/components/providers/types';
|
||||
import { buildHeaderObject, headersToEntries, normalizeHeaderEntries } from '@/utils/headers';
|
||||
import { areKeyValueEntriesEqual, areModelEntriesEqual, areStringArraysEqual } from '@/utils/compare';
|
||||
import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils';
|
||||
import { modelsToEntries } from '@/components/ui/modelInputListUtils';
|
||||
import type { ClaudeEditBaseline } from '@/stores/useClaudeEditDraftStore';
|
||||
|
||||
type LocationState = { fromAiProviders?: boolean } | null;
|
||||
|
||||
@@ -89,19 +91,28 @@ const normalizeCloakConfig = (cloak: ProviderFormState['cloak']) => {
|
||||
};
|
||||
};
|
||||
|
||||
const buildClaudeSignature = (form: ProviderFormState) =>
|
||||
JSON.stringify({
|
||||
apiKey: String(form.apiKey ?? '').trim(),
|
||||
priority:
|
||||
form.priority !== undefined && Number.isFinite(form.priority) ? Math.trunc(form.priority) : null,
|
||||
prefix: String(form.prefix ?? '').trim(),
|
||||
baseUrl: String(form.baseUrl ?? '').trim(),
|
||||
proxyUrl: String(form.proxyUrl ?? '').trim(),
|
||||
headers: normalizeHeaderEntries(form.headers),
|
||||
models: normalizeClaudeModelEntries(form.modelEntries),
|
||||
excludedModels: parseExcludedModels(form.excludedText ?? ''),
|
||||
cloak: normalizeCloakConfig(form.cloak),
|
||||
});
|
||||
const buildClaudeBaseline = (form: ProviderFormState): ClaudeEditBaseline => ({
|
||||
apiKey: String(form.apiKey ?? '').trim(),
|
||||
priority:
|
||||
form.priority !== undefined && Number.isFinite(form.priority) ? Math.trunc(form.priority) : null,
|
||||
prefix: String(form.prefix ?? '').trim(),
|
||||
baseUrl: String(form.baseUrl ?? '').trim(),
|
||||
proxyUrl: String(form.proxyUrl ?? '').trim(),
|
||||
headers: normalizeHeaderEntries(form.headers),
|
||||
models: normalizeClaudeModelEntries(form.modelEntries),
|
||||
excludedModels: parseExcludedModels(form.excludedText ?? ''),
|
||||
cloak: normalizeCloakConfig(form.cloak),
|
||||
});
|
||||
|
||||
const areCloakConfigsEqual = (left: ClaudeEditBaseline['cloak'], right: ClaudeEditBaseline['cloak']) => {
|
||||
if (left === right) return true;
|
||||
if (!left || !right) return false;
|
||||
if (left.mode !== right.mode || left.strictMode !== right.strictMode) return false;
|
||||
if (left.sensitiveWords === null || right.sensitiveWords === null) {
|
||||
return left.sensitiveWords === right.sensitiveWords;
|
||||
}
|
||||
return areStringArraysEqual(left.sensitiveWords, right.sensitiveWords);
|
||||
};
|
||||
|
||||
export function AiProvidersClaudeEditLayout() {
|
||||
const { t } = useTranslation();
|
||||
@@ -137,7 +148,7 @@ export function AiProvidersClaudeEditLayout() {
|
||||
const acquireDraft = useClaudeEditDraftStore((state) => state.acquireDraft);
|
||||
const releaseDraft = useClaudeEditDraftStore((state) => state.releaseDraft);
|
||||
const initDraft = useClaudeEditDraftStore((state) => state.initDraft);
|
||||
const setDraftBaselineSignature = useClaudeEditDraftStore((state) => state.setDraftBaselineSignature);
|
||||
const setDraftBaseline = useClaudeEditDraftStore((state) => state.setDraftBaseline);
|
||||
const setDraftForm = useClaudeEditDraftStore((state) => state.setDraftForm);
|
||||
const setDraftTestModel = useClaudeEditDraftStore((state) => state.setDraftTestModel);
|
||||
const setDraftTestStatus = useClaudeEditDraftStore((state) => state.setDraftTestStatus);
|
||||
@@ -241,9 +252,9 @@ export function AiProvidersClaudeEditLayout() {
|
||||
excludedText: excludedModelsToText(initialData.excludedModels),
|
||||
};
|
||||
const available = seededForm.modelEntries.map((entry) => entry.name.trim()).filter(Boolean);
|
||||
const baselineSignature = buildClaudeSignature(seededForm);
|
||||
const baseline = buildClaudeBaseline(seededForm);
|
||||
initDraft(draftKey, {
|
||||
baselineSignature,
|
||||
baseline,
|
||||
form: seededForm,
|
||||
testModel: available[0] || '',
|
||||
testStatus: 'idle',
|
||||
@@ -254,7 +265,7 @@ export function AiProvidersClaudeEditLayout() {
|
||||
|
||||
const emptyForm = buildEmptyForm();
|
||||
initDraft(draftKey, {
|
||||
baselineSignature: buildClaudeSignature(emptyForm),
|
||||
baseline: buildClaudeBaseline(emptyForm),
|
||||
form: emptyForm,
|
||||
testModel: '',
|
||||
testStatus: 'idle',
|
||||
@@ -263,9 +274,50 @@ export function AiProvidersClaudeEditLayout() {
|
||||
}, [draft?.initialized, draftKey, initDraft, initialData, loading]);
|
||||
|
||||
const resolvedLoading = !draft?.initialized;
|
||||
const currentSignature = useMemo(() => buildClaudeSignature(form), [form]);
|
||||
const baselineSignature = draft?.baselineSignature ?? '';
|
||||
const isDirty = Boolean(draft?.initialized) && baselineSignature !== currentSignature;
|
||||
const baseline = draft?.baseline ?? null;
|
||||
const normalizedHeaders = useMemo(() => normalizeHeaderEntries(form.headers), [form.headers]);
|
||||
const normalizedModels = useMemo(
|
||||
() => normalizeClaudeModelEntries(form.modelEntries),
|
||||
[form.modelEntries]
|
||||
);
|
||||
const normalizedExcludedModels = useMemo(
|
||||
() => parseExcludedModels(form.excludedText ?? ''),
|
||||
[form.excludedText]
|
||||
);
|
||||
const normalizedCloak = useMemo(() => normalizeCloakConfig(form.cloak), [form.cloak]);
|
||||
const normalizedPriority = useMemo(() => {
|
||||
return form.priority !== undefined && Number.isFinite(form.priority)
|
||||
? Math.trunc(form.priority)
|
||||
: null;
|
||||
}, [form.priority]);
|
||||
const isHeadersDirty = useMemo(() => {
|
||||
if (!baseline) return false;
|
||||
return !areKeyValueEntriesEqual(baseline.headers, normalizedHeaders);
|
||||
}, [baseline, normalizedHeaders]);
|
||||
const isModelsDirty = useMemo(() => {
|
||||
if (!baseline) return false;
|
||||
return !areModelEntriesEqual(baseline.models, normalizedModels);
|
||||
}, [baseline, normalizedModels]);
|
||||
const isExcludedModelsDirty = useMemo(() => {
|
||||
if (!baseline) return false;
|
||||
return !areStringArraysEqual(baseline.excludedModels, normalizedExcludedModels);
|
||||
}, [baseline, normalizedExcludedModels]);
|
||||
const isCloakDirty = useMemo(() => {
|
||||
if (!baseline) return false;
|
||||
return !areCloakConfigsEqual(baseline.cloak, normalizedCloak);
|
||||
}, [baseline, normalizedCloak]);
|
||||
const isDirty =
|
||||
Boolean(draft?.initialized) &&
|
||||
baseline !== null &&
|
||||
(baseline.apiKey !== form.apiKey.trim() ||
|
||||
baseline.priority !== normalizedPriority ||
|
||||
baseline.prefix !== String(form.prefix ?? '').trim() ||
|
||||
baseline.baseUrl !== String(form.baseUrl ?? '').trim() ||
|
||||
baseline.proxyUrl !== String(form.proxyUrl ?? '').trim() ||
|
||||
isHeadersDirty ||
|
||||
isModelsDirty ||
|
||||
isExcludedModelsDirty ||
|
||||
isCloakDirty);
|
||||
const editorRootPath = useMemo(() => {
|
||||
if (hasIndexParam) {
|
||||
return `/ai-providers/claude/${params.index ?? ''}`;
|
||||
@@ -384,7 +436,7 @@ export function AiProvidersClaudeEditLayout() {
|
||||
'success'
|
||||
);
|
||||
allowNextNavigation();
|
||||
setDraftBaselineSignature(draftKey, buildClaudeSignature(form));
|
||||
setDraftBaseline(draftKey, buildClaudeBaseline(form));
|
||||
handleBack();
|
||||
} catch (err: unknown) {
|
||||
showNotification(`${t('notification.update_failed')}: ${getErrorMessage(err)}`, 'error');
|
||||
@@ -403,7 +455,7 @@ export function AiProvidersClaudeEditLayout() {
|
||||
invalidIndex,
|
||||
invalidIndexParam,
|
||||
resolvedLoading,
|
||||
setDraftBaselineSignature,
|
||||
setDraftBaseline,
|
||||
saving,
|
||||
showNotification,
|
||||
t,
|
||||
|
||||
@@ -16,6 +16,7 @@ import { modelsApi, providersApi } from '@/services/api';
|
||||
import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
|
||||
import type { ProviderKeyConfig } from '@/types';
|
||||
import { buildHeaderObject, headersToEntries, normalizeHeaderEntries } from '@/utils/headers';
|
||||
import { areKeyValueEntriesEqual, areModelEntriesEqual, areStringArraysEqual } from '@/utils/compare';
|
||||
import { entriesToModels, modelsToEntries } from '@/components/ui/modelInputListUtils';
|
||||
import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils';
|
||||
import type { ProviderFormState } from '@/components/providers';
|
||||
@@ -63,21 +64,30 @@ const normalizeModelEntries = (entries: Array<{ name: string; alias: string }>)
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
const buildCodexSignature = (form: ProviderFormState) =>
|
||||
JSON.stringify({
|
||||
apiKey: String(form.apiKey ?? '').trim(),
|
||||
priority:
|
||||
form.priority !== undefined && Number.isFinite(form.priority)
|
||||
? Math.trunc(form.priority)
|
||||
: null,
|
||||
prefix: String(form.prefix ?? '').trim(),
|
||||
baseUrl: String(form.baseUrl ?? '').trim(),
|
||||
websockets: Boolean(form.websockets),
|
||||
proxyUrl: String(form.proxyUrl ?? '').trim(),
|
||||
headers: normalizeHeaderEntries(form.headers),
|
||||
models: normalizeModelEntries(form.modelEntries),
|
||||
excludedModels: parseExcludedModels(form.excludedText ?? ''),
|
||||
});
|
||||
type CodexFormBaseline = {
|
||||
apiKey: string;
|
||||
priority: number | null;
|
||||
prefix: string;
|
||||
baseUrl: string;
|
||||
websockets: boolean;
|
||||
proxyUrl: string;
|
||||
headers: ReturnType<typeof normalizeHeaderEntries>;
|
||||
models: ReturnType<typeof normalizeModelEntries>;
|
||||
excludedModels: string[];
|
||||
};
|
||||
|
||||
const buildCodexBaseline = (form: ProviderFormState): CodexFormBaseline => ({
|
||||
apiKey: String(form.apiKey ?? '').trim(),
|
||||
priority:
|
||||
form.priority !== undefined && Number.isFinite(form.priority) ? Math.trunc(form.priority) : null,
|
||||
prefix: String(form.prefix ?? '').trim(),
|
||||
baseUrl: String(form.baseUrl ?? '').trim(),
|
||||
websockets: Boolean(form.websockets),
|
||||
proxyUrl: String(form.proxyUrl ?? '').trim(),
|
||||
headers: normalizeHeaderEntries(form.headers),
|
||||
models: normalizeModelEntries(form.modelEntries),
|
||||
excludedModels: parseExcludedModels(form.excludedText ?? ''),
|
||||
});
|
||||
|
||||
export function AiProvidersCodexEditPage() {
|
||||
const { t } = useTranslation();
|
||||
@@ -98,9 +108,7 @@ export function AiProvidersCodexEditPage() {
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [form, setForm] = useState<ProviderFormState>(() => buildEmptyForm());
|
||||
const [baselineSignature, setBaselineSignature] = useState(() =>
|
||||
buildCodexSignature(buildEmptyForm())
|
||||
);
|
||||
const [baseline, setBaseline] = useState(() => buildCodexBaseline(buildEmptyForm()));
|
||||
|
||||
const [modelDiscoveryOpen, setModelDiscoveryOpen] = useState(false);
|
||||
const [modelDiscoveryEndpoint, setModelDiscoveryEndpoint] = useState('');
|
||||
@@ -186,16 +194,50 @@ export function AiProvidersCodexEditPage() {
|
||||
excludedText: excludedModelsToText(initialData.excludedModels),
|
||||
};
|
||||
setForm(nextForm);
|
||||
setBaselineSignature(buildCodexSignature(nextForm));
|
||||
setBaseline(buildCodexBaseline(nextForm));
|
||||
return;
|
||||
}
|
||||
const nextForm = buildEmptyForm();
|
||||
setForm(nextForm);
|
||||
setBaselineSignature(buildCodexSignature(nextForm));
|
||||
setBaseline(buildCodexBaseline(nextForm));
|
||||
}, [initialData, loading]);
|
||||
|
||||
const currentSignature = useMemo(() => buildCodexSignature(form), [form]);
|
||||
const isDirty = baselineSignature !== currentSignature;
|
||||
const normalizedHeaders = useMemo(() => normalizeHeaderEntries(form.headers), [form.headers]);
|
||||
const normalizedModels = useMemo(
|
||||
() => normalizeModelEntries(form.modelEntries),
|
||||
[form.modelEntries]
|
||||
);
|
||||
const normalizedExcludedModels = useMemo(
|
||||
() => parseExcludedModels(form.excludedText ?? ''),
|
||||
[form.excludedText]
|
||||
);
|
||||
const normalizedPriority = useMemo(() => {
|
||||
return form.priority !== undefined && Number.isFinite(form.priority)
|
||||
? Math.trunc(form.priority)
|
||||
: null;
|
||||
}, [form.priority]);
|
||||
const isHeadersDirty = useMemo(
|
||||
() => !areKeyValueEntriesEqual(baseline.headers, normalizedHeaders),
|
||||
[baseline.headers, normalizedHeaders]
|
||||
);
|
||||
const isModelsDirty = useMemo(
|
||||
() => !areModelEntriesEqual(baseline.models, normalizedModels),
|
||||
[baseline.models, normalizedModels]
|
||||
);
|
||||
const isExcludedModelsDirty = useMemo(
|
||||
() => !areStringArraysEqual(baseline.excludedModels, normalizedExcludedModels),
|
||||
[baseline.excludedModels, normalizedExcludedModels]
|
||||
);
|
||||
const isDirty =
|
||||
baseline.apiKey !== form.apiKey.trim() ||
|
||||
baseline.priority !== normalizedPriority ||
|
||||
baseline.prefix !== String(form.prefix ?? '').trim() ||
|
||||
baseline.baseUrl !== String(form.baseUrl ?? '').trim() ||
|
||||
baseline.websockets !== Boolean(form.websockets) ||
|
||||
baseline.proxyUrl !== String(form.proxyUrl ?? '').trim() ||
|
||||
isHeadersDirty ||
|
||||
isModelsDirty ||
|
||||
isExcludedModelsDirty;
|
||||
const canGuard = !loading && !saving && !invalidIndexParam && !invalidIndex;
|
||||
|
||||
const { allowNextNavigation } = useUnsavedChangesGuard({
|
||||
@@ -430,7 +472,7 @@ export function AiProvidersCodexEditPage() {
|
||||
'success'
|
||||
);
|
||||
allowNextNavigation();
|
||||
setBaselineSignature(buildCodexSignature(form));
|
||||
setBaseline(buildCodexBaseline(form));
|
||||
handleBack();
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : '';
|
||||
|
||||
@@ -15,6 +15,7 @@ import { modelsApi, providersApi } from '@/services/api';
|
||||
import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
|
||||
import type { GeminiKeyConfig } from '@/types';
|
||||
import { buildHeaderObject, headersToEntries, normalizeHeaderEntries } from '@/utils/headers';
|
||||
import { areKeyValueEntriesEqual, areModelEntriesEqual, areStringArraysEqual } from '@/utils/compare';
|
||||
import type { ModelInfo } from '@/utils/models';
|
||||
import { entriesToModels, modelsToEntries } from '@/components/ui/modelInputListUtils';
|
||||
import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils';
|
||||
@@ -60,20 +61,28 @@ const normalizeModelEntries = (entries: Array<{ name: string; alias: string }>)
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
const buildGeminiSignature = (form: GeminiFormState) =>
|
||||
JSON.stringify({
|
||||
apiKey: String(form.apiKey ?? '').trim(),
|
||||
priority:
|
||||
form.priority !== undefined && Number.isFinite(form.priority)
|
||||
? Math.trunc(form.priority)
|
||||
: null,
|
||||
prefix: String(form.prefix ?? '').trim(),
|
||||
baseUrl: String(form.baseUrl ?? '').trim(),
|
||||
proxyUrl: String(form.proxyUrl ?? '').trim(),
|
||||
headers: normalizeHeaderEntries(form.headers),
|
||||
models: normalizeModelEntries(form.modelEntries),
|
||||
excludedModels: parseExcludedModels(form.excludedText ?? ''),
|
||||
});
|
||||
type GeminiFormBaseline = {
|
||||
apiKey: string;
|
||||
priority: number | null;
|
||||
prefix: string;
|
||||
baseUrl: string;
|
||||
proxyUrl: string;
|
||||
headers: ReturnType<typeof normalizeHeaderEntries>;
|
||||
models: ReturnType<typeof normalizeModelEntries>;
|
||||
excludedModels: string[];
|
||||
};
|
||||
|
||||
const buildGeminiBaseline = (form: GeminiFormState): GeminiFormBaseline => ({
|
||||
apiKey: String(form.apiKey ?? '').trim(),
|
||||
priority:
|
||||
form.priority !== undefined && Number.isFinite(form.priority) ? Math.trunc(form.priority) : null,
|
||||
prefix: String(form.prefix ?? '').trim(),
|
||||
baseUrl: String(form.baseUrl ?? '').trim(),
|
||||
proxyUrl: String(form.proxyUrl ?? '').trim(),
|
||||
headers: normalizeHeaderEntries(form.headers),
|
||||
models: normalizeModelEntries(form.modelEntries),
|
||||
excludedModels: parseExcludedModels(form.excludedText ?? ''),
|
||||
});
|
||||
|
||||
export function AiProvidersGeminiEditPage() {
|
||||
const { t } = useTranslation();
|
||||
@@ -94,9 +103,7 @@ export function AiProvidersGeminiEditPage() {
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [form, setForm] = useState<GeminiFormState>(() => buildEmptyForm());
|
||||
const [baselineSignature, setBaselineSignature] = useState(() =>
|
||||
buildGeminiSignature(buildEmptyForm())
|
||||
);
|
||||
const [baseline, setBaseline] = useState(() => buildGeminiBaseline(buildEmptyForm()));
|
||||
|
||||
const [modelDiscoveryOpen, setModelDiscoveryOpen] = useState(false);
|
||||
const [modelDiscoveryEndpoint, setModelDiscoveryEndpoint] = useState('');
|
||||
@@ -185,12 +192,12 @@ export function AiProvidersGeminiEditPage() {
|
||||
excludedText: excludedModelsToText(initialData.excludedModels),
|
||||
};
|
||||
setForm(nextForm);
|
||||
setBaselineSignature(buildGeminiSignature(nextForm));
|
||||
setBaseline(buildGeminiBaseline(nextForm));
|
||||
return;
|
||||
}
|
||||
const nextForm = buildEmptyForm();
|
||||
setForm(nextForm);
|
||||
setBaselineSignature(buildGeminiSignature(nextForm));
|
||||
setBaseline(buildGeminiBaseline(nextForm));
|
||||
}, [initialData, loading]);
|
||||
|
||||
const canSave = !disableControls && !saving && !loading && !invalidIndexParam && !invalidIndex;
|
||||
@@ -378,8 +385,41 @@ export function AiProvidersGeminiEditPage() {
|
||||
setModelDiscoveryOpen(false);
|
||||
};
|
||||
|
||||
const currentSignature = useMemo(() => buildGeminiSignature(form), [form]);
|
||||
const isDirty = baselineSignature !== currentSignature;
|
||||
const normalizedHeaders = useMemo(() => normalizeHeaderEntries(form.headers), [form.headers]);
|
||||
const normalizedModels = useMemo(
|
||||
() => normalizeModelEntries(form.modelEntries),
|
||||
[form.modelEntries]
|
||||
);
|
||||
const normalizedExcludedModels = useMemo(
|
||||
() => parseExcludedModels(form.excludedText ?? ''),
|
||||
[form.excludedText]
|
||||
);
|
||||
const normalizedPriority = useMemo(() => {
|
||||
return form.priority !== undefined && Number.isFinite(form.priority)
|
||||
? Math.trunc(form.priority)
|
||||
: null;
|
||||
}, [form.priority]);
|
||||
const isHeadersDirty = useMemo(
|
||||
() => !areKeyValueEntriesEqual(baseline.headers, normalizedHeaders),
|
||||
[baseline.headers, normalizedHeaders]
|
||||
);
|
||||
const isModelsDirty = useMemo(
|
||||
() => !areModelEntriesEqual(baseline.models, normalizedModels),
|
||||
[baseline.models, normalizedModels]
|
||||
);
|
||||
const isExcludedModelsDirty = useMemo(
|
||||
() => !areStringArraysEqual(baseline.excludedModels, normalizedExcludedModels),
|
||||
[baseline.excludedModels, normalizedExcludedModels]
|
||||
);
|
||||
const isDirty =
|
||||
baseline.apiKey !== form.apiKey.trim() ||
|
||||
baseline.priority !== normalizedPriority ||
|
||||
baseline.prefix !== String(form.prefix ?? '').trim() ||
|
||||
baseline.baseUrl !== String(form.baseUrl ?? '').trim() ||
|
||||
baseline.proxyUrl !== String(form.proxyUrl ?? '').trim() ||
|
||||
isHeadersDirty ||
|
||||
isModelsDirty ||
|
||||
isExcludedModelsDirty;
|
||||
const canGuard = !loading && !saving && !invalidIndexParam && !invalidIndex;
|
||||
|
||||
const { allowNextNavigation } = useUnsavedChangesGuard({
|
||||
@@ -432,7 +472,7 @@ export function AiProvidersGeminiEditPage() {
|
||||
'success'
|
||||
);
|
||||
allowNextNavigation();
|
||||
setBaselineSignature(buildGeminiSignature(form));
|
||||
setBaseline(buildGeminiBaseline(form));
|
||||
handleBack();
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : '';
|
||||
|
||||
@@ -9,9 +9,10 @@ import { entriesToModels, modelsToEntries } from '@/components/ui/modelInputList
|
||||
import type { ApiKeyEntry, OpenAIProviderConfig } from '@/types';
|
||||
import type { ModelInfo } from '@/utils/models';
|
||||
import { buildHeaderObject, headersToEntries, normalizeHeaderEntries } from '@/utils/headers';
|
||||
import { areKeyValueEntriesEqual, areModelEntriesEqual } from '@/utils/compare';
|
||||
import { buildApiKeyEntry } from '@/components/providers/utils';
|
||||
import type { ModelEntry, OpenAIFormState } from '@/components/providers/types';
|
||||
import type { KeyTestStatus } from '@/stores/useOpenAIEditDraftStore';
|
||||
import type { KeyTestStatus, OpenAIEditBaseline } from '@/stores/useOpenAIEditDraftStore';
|
||||
|
||||
type LocationState = { fromAiProviders?: boolean } | null;
|
||||
|
||||
@@ -103,18 +104,33 @@ const normalizeApiKeyEntries = (entries: ApiKeyEntry[]) =>
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
const buildOpenAISignature = (form: OpenAIFormState, testModel: string) =>
|
||||
JSON.stringify({
|
||||
name: String(form.name ?? '').trim(),
|
||||
priority:
|
||||
form.priority !== undefined && Number.isFinite(form.priority) ? Math.trunc(form.priority) : null,
|
||||
prefix: String(form.prefix ?? '').trim(),
|
||||
baseUrl: String(form.baseUrl ?? '').trim(),
|
||||
headers: normalizeHeaderEntries(form.headers),
|
||||
apiKeyEntries: normalizeApiKeyEntries(form.apiKeyEntries),
|
||||
models: normalizeModelEntries(form.modelEntries),
|
||||
testModel: String(testModel ?? '').trim(),
|
||||
});
|
||||
const buildOpenAIBaseline = (form: OpenAIFormState, testModel: string): OpenAIEditBaseline => ({
|
||||
name: String(form.name ?? '').trim(),
|
||||
priority:
|
||||
form.priority !== undefined && Number.isFinite(form.priority) ? Math.trunc(form.priority) : null,
|
||||
prefix: String(form.prefix ?? '').trim(),
|
||||
baseUrl: String(form.baseUrl ?? '').trim(),
|
||||
headers: normalizeHeaderEntries(form.headers),
|
||||
apiKeyEntries: normalizeApiKeyEntries(form.apiKeyEntries),
|
||||
models: normalizeModelEntries(form.modelEntries),
|
||||
testModel: String(testModel ?? '').trim(),
|
||||
});
|
||||
|
||||
const areNormalizedApiKeyEntriesEqual = (
|
||||
a: OpenAIEditBaseline['apiKeyEntries'],
|
||||
b: ReturnType<typeof normalizeApiKeyEntries>
|
||||
) => {
|
||||
if (a === b) return true;
|
||||
if (a.length !== b.length) return false;
|
||||
for (let i = 0; i < a.length; i += 1) {
|
||||
const left = a[i];
|
||||
const right = b[i];
|
||||
if (!left || !right) return false;
|
||||
if (left.apiKey !== right.apiKey || left.proxyUrl !== right.proxyUrl) return false;
|
||||
if (!areKeyValueEntriesEqual(left.headers, right.headers)) return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
export function AiProvidersOpenAIEditLayout() {
|
||||
const { t } = useTranslation();
|
||||
@@ -152,7 +168,7 @@ export function AiProvidersOpenAIEditLayout() {
|
||||
const acquireDraft = useOpenAIEditDraftStore((state) => state.acquireDraft);
|
||||
const releaseDraft = useOpenAIEditDraftStore((state) => state.releaseDraft);
|
||||
const initDraft = useOpenAIEditDraftStore((state) => state.initDraft);
|
||||
const setDraftBaselineSignature = useOpenAIEditDraftStore((state) => state.setDraftBaselineSignature);
|
||||
const setDraftBaseline = useOpenAIEditDraftStore((state) => state.setDraftBaseline);
|
||||
const setDraftForm = useOpenAIEditDraftStore((state) => state.setDraftForm);
|
||||
const setDraftTestModel = useOpenAIEditDraftStore((state) => state.setDraftTestModel);
|
||||
const setDraftTestStatus = useOpenAIEditDraftStore((state) => state.setDraftTestStatus);
|
||||
@@ -286,9 +302,9 @@ export function AiProvidersOpenAIEditLayout() {
|
||||
initialData.testModel && available.includes(initialData.testModel)
|
||||
? initialData.testModel
|
||||
: available[0] || '';
|
||||
const baselineSignature = buildOpenAISignature(seededForm, initialTestModel);
|
||||
const baseline = buildOpenAIBaseline(seededForm, initialTestModel);
|
||||
initDraft(draftKey, {
|
||||
baselineSignature,
|
||||
baseline,
|
||||
form: seededForm,
|
||||
testModel: initialTestModel,
|
||||
testStatus: 'idle',
|
||||
@@ -298,7 +314,7 @@ export function AiProvidersOpenAIEditLayout() {
|
||||
} else {
|
||||
const emptyForm = buildEmptyForm();
|
||||
initDraft(draftKey, {
|
||||
baselineSignature: buildOpenAISignature(emptyForm, ''),
|
||||
baseline: buildOpenAIBaseline(emptyForm, ''),
|
||||
form: emptyForm,
|
||||
testModel: '',
|
||||
testStatus: 'idle',
|
||||
@@ -362,9 +378,45 @@ export function AiProvidersOpenAIEditLayout() {
|
||||
);
|
||||
|
||||
const resolvedLoading = !draft?.initialized;
|
||||
const currentSignature = useMemo(() => buildOpenAISignature(form, testModel), [form, testModel]);
|
||||
const baselineSignature = draft?.baselineSignature ?? '';
|
||||
const isDirty = Boolean(draft?.initialized) && baselineSignature !== currentSignature;
|
||||
const baseline = draft?.baseline ?? null;
|
||||
const normalizedHeaders = useMemo(() => normalizeHeaderEntries(form.headers), [form.headers]);
|
||||
const normalizedModels = useMemo(
|
||||
() => normalizeModelEntries(form.modelEntries),
|
||||
[form.modelEntries]
|
||||
);
|
||||
const normalizedApiKeyEntries = useMemo(
|
||||
() => normalizeApiKeyEntries(form.apiKeyEntries),
|
||||
[form.apiKeyEntries]
|
||||
);
|
||||
const normalizedPriority = useMemo(() => {
|
||||
return form.priority !== undefined && Number.isFinite(form.priority)
|
||||
? Math.trunc(form.priority)
|
||||
: null;
|
||||
}, [form.priority]);
|
||||
const normalizedTestModel = useMemo(() => String(testModel ?? '').trim(), [testModel]);
|
||||
const isHeadersDirty = useMemo(() => {
|
||||
if (!baseline) return false;
|
||||
return !areKeyValueEntriesEqual(baseline.headers, normalizedHeaders);
|
||||
}, [baseline, normalizedHeaders]);
|
||||
const isModelsDirty = useMemo(() => {
|
||||
if (!baseline) return false;
|
||||
return !areModelEntriesEqual(baseline.models, normalizedModels);
|
||||
}, [baseline, normalizedModels]);
|
||||
const isApiKeyEntriesDirty = useMemo(() => {
|
||||
if (!baseline) return false;
|
||||
return !areNormalizedApiKeyEntriesEqual(baseline.apiKeyEntries, normalizedApiKeyEntries);
|
||||
}, [baseline, normalizedApiKeyEntries]);
|
||||
const isDirty =
|
||||
Boolean(draft?.initialized) &&
|
||||
baseline !== null &&
|
||||
(baseline.name !== form.name.trim() ||
|
||||
baseline.priority !== normalizedPriority ||
|
||||
baseline.prefix !== form.prefix.trim() ||
|
||||
baseline.baseUrl !== form.baseUrl.trim() ||
|
||||
baseline.testModel !== normalizedTestModel ||
|
||||
isHeadersDirty ||
|
||||
isApiKeyEntriesDirty ||
|
||||
isModelsDirty);
|
||||
const editorRootPath = useMemo(() => {
|
||||
if (hasIndexParam) {
|
||||
return `/ai-providers/openai/${params.index ?? ''}`;
|
||||
@@ -445,7 +497,7 @@ export function AiProvidersOpenAIEditLayout() {
|
||||
'success'
|
||||
);
|
||||
allowNextNavigation();
|
||||
setDraftBaselineSignature(draftKey, buildOpenAISignature(form, testModel));
|
||||
setDraftBaseline(draftKey, buildOpenAIBaseline(form, testModel));
|
||||
handleBack();
|
||||
} catch (err: unknown) {
|
||||
showNotification(`${t('notification.update_failed')}: ${getErrorMessage(err)}`, 'error');
|
||||
@@ -460,7 +512,7 @@ export function AiProvidersOpenAIEditLayout() {
|
||||
form,
|
||||
handleBack,
|
||||
providers,
|
||||
setDraftBaselineSignature,
|
||||
setDraftBaseline,
|
||||
showNotification,
|
||||
t,
|
||||
testModel,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
@@ -15,10 +15,12 @@ import {
|
||||
withDisableAllModelsRule,
|
||||
withoutDisableAllModelsRule,
|
||||
} from '@/components/providers/utils';
|
||||
import { usePageTransitionLayer } from '@/components/common/PageTransitionLayer';
|
||||
import { useHeaderRefresh } from '@/hooks/useHeaderRefresh';
|
||||
import { ampcodeApi, providersApi } from '@/services/api';
|
||||
import { useAuthStore, useConfigStore, useNotificationStore, useThemeStore } from '@/stores';
|
||||
import type { GeminiKeyConfig, OpenAIProviderConfig, ProviderKeyConfig } from '@/types';
|
||||
import { indexUsageDetailsBySource } from '@/utils/usageIndex';
|
||||
import styles from './AiProvidersPage.module.scss';
|
||||
|
||||
export function AiProvidersPage() {
|
||||
@@ -59,7 +61,16 @@ export function AiProvidersPage() {
|
||||
const disableControls = connectionStatus !== 'connected';
|
||||
const isSwitching = Boolean(configSwitchingKey);
|
||||
|
||||
const { keyStats, usageDetails, loadKeyStats, refreshKeyStats } = useProviderStats();
|
||||
const pageTransitionLayer = usePageTransitionLayer();
|
||||
const isCurrentLayer = pageTransitionLayer ? pageTransitionLayer.status === 'current' : true;
|
||||
|
||||
const { keyStats, usageDetails, loadKeyStats, refreshKeyStats } = useProviderStats({
|
||||
enabled: isCurrentLayer,
|
||||
});
|
||||
const usageDetailsBySource = useMemo(
|
||||
() => indexUsageDetailsBySource(usageDetails),
|
||||
[usageDetails]
|
||||
);
|
||||
|
||||
const getErrorMessage = (err: unknown) => {
|
||||
if (err instanceof Error) return err.message;
|
||||
@@ -113,8 +124,12 @@ export function AiProvidersPage() {
|
||||
if (hasMounted.current) return;
|
||||
hasMounted.current = true;
|
||||
loadConfigs();
|
||||
}, [loadConfigs]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isCurrentLayer) return;
|
||||
void loadKeyStats().catch(() => {});
|
||||
}, [loadConfigs, loadKeyStats]);
|
||||
}, [isCurrentLayer, loadKeyStats]);
|
||||
|
||||
useEffect(() => {
|
||||
if (config?.geminiApiKeys) setGeminiKeys(config.geminiApiKeys);
|
||||
@@ -130,7 +145,7 @@ export function AiProvidersPage() {
|
||||
config?.openaiCompatibility,
|
||||
]);
|
||||
|
||||
useHeaderRefresh(refreshKeyStats);
|
||||
useHeaderRefresh(refreshKeyStats, isCurrentLayer);
|
||||
|
||||
const openEditor = useCallback(
|
||||
(path: string) => {
|
||||
@@ -362,7 +377,7 @@ export function AiProvidersPage() {
|
||||
<GeminiSection
|
||||
configs={geminiKeys}
|
||||
keyStats={keyStats}
|
||||
usageDetails={usageDetails}
|
||||
usageDetailsBySource={usageDetailsBySource}
|
||||
loading={loading}
|
||||
disableControls={disableControls}
|
||||
isSwitching={isSwitching}
|
||||
@@ -377,7 +392,7 @@ export function AiProvidersPage() {
|
||||
<CodexSection
|
||||
configs={codexConfigs}
|
||||
keyStats={keyStats}
|
||||
usageDetails={usageDetails}
|
||||
usageDetailsBySource={usageDetailsBySource}
|
||||
loading={loading}
|
||||
disableControls={disableControls}
|
||||
isSwitching={isSwitching}
|
||||
@@ -392,7 +407,7 @@ export function AiProvidersPage() {
|
||||
<ClaudeSection
|
||||
configs={claudeConfigs}
|
||||
keyStats={keyStats}
|
||||
usageDetails={usageDetails}
|
||||
usageDetailsBySource={usageDetailsBySource}
|
||||
loading={loading}
|
||||
disableControls={disableControls}
|
||||
isSwitching={isSwitching}
|
||||
@@ -407,7 +422,7 @@ export function AiProvidersPage() {
|
||||
<VertexSection
|
||||
configs={vertexConfigs}
|
||||
keyStats={keyStats}
|
||||
usageDetails={usageDetails}
|
||||
usageDetailsBySource={usageDetailsBySource}
|
||||
loading={loading}
|
||||
disableControls={disableControls}
|
||||
isSwitching={isSwitching}
|
||||
@@ -432,7 +447,7 @@ export function AiProvidersPage() {
|
||||
<OpenAISection
|
||||
configs={openaiProviders}
|
||||
keyStats={keyStats}
|
||||
usageDetails={usageDetails}
|
||||
usageDetailsBySource={usageDetailsBySource}
|
||||
loading={loading}
|
||||
disableControls={disableControls}
|
||||
isSwitching={isSwitching}
|
||||
|
||||
@@ -15,6 +15,7 @@ import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
|
||||
import type { ProviderKeyConfig } from '@/types';
|
||||
import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils';
|
||||
import { buildHeaderObject, headersToEntries, normalizeHeaderEntries } from '@/utils/headers';
|
||||
import { areKeyValueEntriesEqual, areModelEntriesEqual, areStringArraysEqual } from '@/utils/compare';
|
||||
import type { VertexFormState } from '@/components/providers';
|
||||
import layoutStyles from './AiProvidersEditLayout.module.scss';
|
||||
|
||||
@@ -47,18 +48,28 @@ const normalizeModelEntries = (entries: Array<{ name: string; alias: string }>)
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
const buildVertexSignature = (form: VertexFormState) =>
|
||||
JSON.stringify({
|
||||
apiKey: String(form.apiKey ?? '').trim(),
|
||||
priority:
|
||||
form.priority !== undefined && Number.isFinite(form.priority) ? Math.trunc(form.priority) : null,
|
||||
prefix: String(form.prefix ?? '').trim(),
|
||||
baseUrl: String(form.baseUrl ?? '').trim(),
|
||||
proxyUrl: String(form.proxyUrl ?? '').trim(),
|
||||
headers: normalizeHeaderEntries(form.headers),
|
||||
models: normalizeModelEntries(form.modelEntries),
|
||||
excludedModels: parseExcludedModels(form.excludedText ?? ''),
|
||||
});
|
||||
type VertexFormBaseline = {
|
||||
apiKey: string;
|
||||
priority: number | null;
|
||||
prefix: string;
|
||||
baseUrl: string;
|
||||
proxyUrl: string;
|
||||
headers: ReturnType<typeof normalizeHeaderEntries>;
|
||||
models: ReturnType<typeof normalizeModelEntries>;
|
||||
excludedModels: string[];
|
||||
};
|
||||
|
||||
const buildVertexBaseline = (form: VertexFormState): VertexFormBaseline => ({
|
||||
apiKey: String(form.apiKey ?? '').trim(),
|
||||
priority:
|
||||
form.priority !== undefined && Number.isFinite(form.priority) ? Math.trunc(form.priority) : null,
|
||||
prefix: String(form.prefix ?? '').trim(),
|
||||
baseUrl: String(form.baseUrl ?? '').trim(),
|
||||
proxyUrl: String(form.proxyUrl ?? '').trim(),
|
||||
headers: normalizeHeaderEntries(form.headers),
|
||||
models: normalizeModelEntries(form.modelEntries),
|
||||
excludedModels: parseExcludedModels(form.excludedText ?? ''),
|
||||
});
|
||||
|
||||
export function AiProvidersVertexEditPage() {
|
||||
const { t } = useTranslation();
|
||||
@@ -79,7 +90,7 @@ export function AiProvidersVertexEditPage() {
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [form, setForm] = useState<VertexFormState>(() => buildEmptyForm());
|
||||
const [baselineSignature, setBaselineSignature] = useState(() => buildVertexSignature(buildEmptyForm()));
|
||||
const [baseline, setBaseline] = useState(() => buildVertexBaseline(buildEmptyForm()));
|
||||
|
||||
const hasIndexParam = typeof params.index === 'string';
|
||||
const editIndex = useMemo(() => parseIndexParam(params.index), [params.index]);
|
||||
@@ -160,18 +171,51 @@ export function AiProvidersVertexEditPage() {
|
||||
excludedText: excludedModelsToText(initialData.excludedModels),
|
||||
};
|
||||
setForm(nextForm);
|
||||
setBaselineSignature(buildVertexSignature(nextForm));
|
||||
setBaseline(buildVertexBaseline(nextForm));
|
||||
return;
|
||||
}
|
||||
const nextForm = buildEmptyForm();
|
||||
setForm(nextForm);
|
||||
setBaselineSignature(buildVertexSignature(nextForm));
|
||||
setBaseline(buildVertexBaseline(nextForm));
|
||||
}, [initialData, loading]);
|
||||
|
||||
const canSave = !disableControls && !saving && !loading && !invalidIndexParam && !invalidIndex;
|
||||
|
||||
const currentSignature = useMemo(() => buildVertexSignature(form), [form]);
|
||||
const isDirty = baselineSignature !== currentSignature;
|
||||
const normalizedHeaders = useMemo(() => normalizeHeaderEntries(form.headers), [form.headers]);
|
||||
const normalizedModels = useMemo(
|
||||
() => normalizeModelEntries(form.modelEntries),
|
||||
[form.modelEntries]
|
||||
);
|
||||
const normalizedExcludedModels = useMemo(
|
||||
() => parseExcludedModels(form.excludedText ?? ''),
|
||||
[form.excludedText]
|
||||
);
|
||||
const normalizedPriority = useMemo(() => {
|
||||
return form.priority !== undefined && Number.isFinite(form.priority)
|
||||
? Math.trunc(form.priority)
|
||||
: null;
|
||||
}, [form.priority]);
|
||||
const isHeadersDirty = useMemo(
|
||||
() => !areKeyValueEntriesEqual(baseline.headers, normalizedHeaders),
|
||||
[baseline.headers, normalizedHeaders]
|
||||
);
|
||||
const isModelsDirty = useMemo(
|
||||
() => !areModelEntriesEqual(baseline.models, normalizedModels),
|
||||
[baseline.models, normalizedModels]
|
||||
);
|
||||
const isExcludedModelsDirty = useMemo(
|
||||
() => !areStringArraysEqual(baseline.excludedModels, normalizedExcludedModels),
|
||||
[baseline.excludedModels, normalizedExcludedModels]
|
||||
);
|
||||
const isDirty =
|
||||
baseline.apiKey !== form.apiKey.trim() ||
|
||||
baseline.priority !== normalizedPriority ||
|
||||
baseline.prefix !== String(form.prefix ?? '').trim() ||
|
||||
baseline.baseUrl !== String(form.baseUrl ?? '').trim() ||
|
||||
baseline.proxyUrl !== String(form.proxyUrl ?? '').trim() ||
|
||||
isHeadersDirty ||
|
||||
isModelsDirty ||
|
||||
isExcludedModelsDirty;
|
||||
const canGuard = !loading && !saving && !invalidIndexParam && !invalidIndex;
|
||||
|
||||
const { allowNextNavigation } = useUnsavedChangesGuard({
|
||||
@@ -230,7 +274,7 @@ export function AiProvidersVertexEditPage() {
|
||||
'success'
|
||||
);
|
||||
allowNextNavigation();
|
||||
setBaselineSignature(buildVertexSignature(form));
|
||||
setBaseline(buildVertexBaseline(form));
|
||||
handleBack();
|
||||
} catch (err: unknown) {
|
||||
const message = err instanceof Error ? err.message : '';
|
||||
|
||||
@@ -659,8 +659,9 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: color-mix(in srgb, var(--bg-primary) 85%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
--glass-blur: 8px;
|
||||
backdrop-filter: var(--glass-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--glass-backdrop-filter);
|
||||
border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
|
||||
border-radius: 12px;
|
||||
padding: 16px;
|
||||
@@ -1529,8 +1530,9 @@
|
||||
border-radius: $radius-lg;
|
||||
border: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);
|
||||
background: color-mix(in srgb, var(--bg-primary) 84%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
--glass-blur: 12px;
|
||||
backdrop-filter: var(--glass-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--glass-backdrop-filter);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
|
||||
@@ -422,10 +422,11 @@
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 10px;
|
||||
background: color-mix(in srgb, var(--bg-primary) 82%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
|
||||
--glass-blur: 12px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: var(--glass-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--glass-backdrop-filter);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 999px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
max-width: inherit;
|
||||
|
||||
+16
-44
@@ -1,10 +1,7 @@
|
||||
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Suspense, lazy, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { createPortal } from 'react-dom';
|
||||
import CodeMirror, { ReactCodeMirrorRef } from '@uiw/react-codemirror';
|
||||
import { yaml } from '@codemirror/lang-yaml';
|
||||
import { search, searchKeymap, highlightSelectionMatches } from '@codemirror/search';
|
||||
import { keymap } from '@codemirror/view';
|
||||
import type { ReactCodeMirrorRef } from '@uiw/react-codemirror';
|
||||
import { parse as parseYaml, parseDocument } from 'yaml';
|
||||
import { usePageTransitionLayer } from '@/components/common/PageTransitionLayer';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
@@ -26,6 +23,8 @@ import styles from './ConfigPage.module.scss';
|
||||
|
||||
type ConfigEditorTab = 'visual' | 'source';
|
||||
|
||||
const LazyConfigSourceEditor = lazy(() => import('@/components/config/ConfigSourceEditor'));
|
||||
|
||||
function readCommercialModeFromYaml(yamlContent: string): boolean {
|
||||
try {
|
||||
const parsed = parseYaml(yamlContent);
|
||||
@@ -39,7 +38,7 @@ function readCommercialModeFromYaml(yamlContent: string): boolean {
|
||||
export function ConfigPage() {
|
||||
const { t } = useTranslation();
|
||||
const pageTransitionLayer = usePageTransitionLayer();
|
||||
const isCurrentLayer = pageTransitionLayer ? pageTransitionLayer.status === 'current' : true;
|
||||
const isCurrentLayer = pageTransitionLayer ? pageTransitionLayer.isCurrentLayer : true;
|
||||
const showNotification = useNotificationStore((state) => state.showNotification);
|
||||
const showConfirmation = useNotificationStore((state) => state.showConfirmation);
|
||||
const connectionStatus = useAuthStore((state) => state.connectionStatus);
|
||||
@@ -79,7 +78,7 @@ export function ConfigPage() {
|
||||
total: 0,
|
||||
});
|
||||
const [lastSearchedQuery, setLastSearchedQuery] = useState('');
|
||||
const editorRef = useRef<ReactCodeMirrorRef>(null);
|
||||
const editorRef = useRef<ReactCodeMirrorRef | null>(null);
|
||||
const floatingActionsRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const disableControls = connectionStatus !== 'connected';
|
||||
@@ -405,12 +404,6 @@ export function ConfigPage() {
|
||||
};
|
||||
}, [shouldRenderFloatingActions]);
|
||||
|
||||
// CodeMirror extensions
|
||||
const extensions = useMemo(
|
||||
() => [yaml(), search(), highlightSelectionMatches(), keymap.of(searchKeymap)],
|
||||
[]
|
||||
);
|
||||
|
||||
// Status text
|
||||
const getStatusText = () => {
|
||||
if (disableControls) return t('config_management.status_disconnected');
|
||||
@@ -630,37 +623,16 @@ export function ConfigPage() {
|
||||
</div>
|
||||
|
||||
<div className={styles.editorWrapper}>
|
||||
<CodeMirror
|
||||
ref={editorRef}
|
||||
value={content}
|
||||
onChange={handleChange}
|
||||
extensions={extensions}
|
||||
theme={resolvedTheme}
|
||||
editable={!disableControls && !loading}
|
||||
placeholder={t('config_management.editor_placeholder')}
|
||||
height="100%"
|
||||
style={{ height: '100%' }}
|
||||
basicSetup={{
|
||||
lineNumbers: true,
|
||||
highlightActiveLineGutter: true,
|
||||
highlightActiveLine: true,
|
||||
foldGutter: true,
|
||||
dropCursor: true,
|
||||
allowMultipleSelections: true,
|
||||
indentOnInput: true,
|
||||
bracketMatching: true,
|
||||
closeBrackets: true,
|
||||
autocompletion: false,
|
||||
rectangularSelection: true,
|
||||
crosshairCursor: false,
|
||||
highlightSelectionMatches: true,
|
||||
closeBracketsKeymap: true,
|
||||
searchKeymap: true,
|
||||
foldKeymap: true,
|
||||
completionKeymap: false,
|
||||
lintKeymap: true,
|
||||
}}
|
||||
/>
|
||||
<Suspense fallback={null}>
|
||||
<LazyConfigSourceEditor
|
||||
editorRef={editorRef}
|
||||
value={content}
|
||||
onChange={handleChange}
|
||||
theme={resolvedTheme}
|
||||
editable={!disableControls && !loading}
|
||||
placeholder={t('config_management.editor_placeholder')}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -72,14 +72,15 @@
|
||||
gap: $spacing-lg;
|
||||
padding: $spacing-2xl $spacing-xl;
|
||||
border-radius: $radius-lg;
|
||||
--glass-blur: 12px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
color-mix(in srgb, var(--bg-primary) 92%, transparent),
|
||||
color-mix(in srgb, var(--bg-secondary) 80%, transparent)
|
||||
);
|
||||
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: var(--glass-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--glass-backdrop-filter);
|
||||
overflow: hidden;
|
||||
animation: heroEnter 0.6s ease-out both;
|
||||
|
||||
@@ -212,10 +213,11 @@
|
||||
gap: 6px;
|
||||
padding: 5px 12px;
|
||||
border-radius: $radius-full;
|
||||
background: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--border-color) 60%, transparent);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
--glass-blur: 8px;
|
||||
background: var(--glass-bg-secondary);
|
||||
border: 1px solid var(--glass-border);
|
||||
backdrop-filter: var(--glass-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--glass-backdrop-filter);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
@@ -469,7 +469,8 @@
|
||||
rgba(255, 237, 158, 0.58) 32%,
|
||||
rgba(255, 215, 91, 0) 72%
|
||||
);
|
||||
filter: blur(9px);
|
||||
--glass-blur: 9px;
|
||||
filter: var(--glass-filter);
|
||||
opacity: 0.75;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
|
||||
@@ -78,9 +78,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: color-mix(in srgb, var(--bg-secondary) 78%, transparent);
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
--glass-blur: 6px;
|
||||
background: var(--glass-bg-secondary);
|
||||
backdrop-filter: var(--glass-backdrop-filter);
|
||||
-webkit-backdrop-filter: var(--glass-backdrop-filter);
|
||||
}
|
||||
|
||||
.loadingOverlayContent {
|
||||
|
||||
@@ -14,9 +14,27 @@ import type { ProviderFormState } from '@/components/providers/types';
|
||||
|
||||
export type ClaudeTestStatus = 'idle' | 'loading' | 'success' | 'error';
|
||||
|
||||
export type ClaudeCloakBaseline = {
|
||||
mode: string;
|
||||
strictMode: boolean;
|
||||
sensitiveWords: string[] | null;
|
||||
} | null;
|
||||
|
||||
export type ClaudeEditBaseline = {
|
||||
apiKey: string;
|
||||
priority: number | null;
|
||||
prefix: string;
|
||||
baseUrl: string;
|
||||
proxyUrl: string;
|
||||
headers: Array<{ key: string; value: string }>;
|
||||
models: Array<{ name: string; alias: string }>;
|
||||
excludedModels: string[];
|
||||
cloak: ClaudeCloakBaseline;
|
||||
};
|
||||
|
||||
type ClaudeEditDraft = {
|
||||
initialized: boolean;
|
||||
baselineSignature: string;
|
||||
baseline: ClaudeEditBaseline | null;
|
||||
form: ProviderFormState;
|
||||
testModel: string;
|
||||
testStatus: ClaudeTestStatus;
|
||||
@@ -33,7 +51,7 @@ interface ClaudeEditDraftState {
|
||||
key: string,
|
||||
draft: Omit<ClaudeEditDraft, 'initialized'>
|
||||
) => void;
|
||||
setDraftBaselineSignature: (key: string, signature: string) => void;
|
||||
setDraftBaseline: (key: string, baseline: ClaudeEditBaseline) => void;
|
||||
setDraftForm: (
|
||||
key: string,
|
||||
action: SetStateAction<ProviderFormState>
|
||||
@@ -64,7 +82,7 @@ const buildEmptyForm = (): ProviderFormState => ({
|
||||
|
||||
const buildEmptyDraft = (): ClaudeEditDraft => ({
|
||||
initialized: false,
|
||||
baselineSignature: '',
|
||||
baseline: null,
|
||||
form: buildEmptyForm(),
|
||||
testModel: '',
|
||||
testStatus: 'idle',
|
||||
@@ -124,14 +142,14 @@ export const useClaudeEditDraftStore = create<ClaudeEditDraftState>((set, get) =
|
||||
}));
|
||||
},
|
||||
|
||||
setDraftBaselineSignature: (key, signature) => {
|
||||
setDraftBaseline: (key, baseline) => {
|
||||
if (!key) return;
|
||||
set((state) => {
|
||||
const existing = state.drafts[key] ?? buildEmptyDraft();
|
||||
return {
|
||||
drafts: {
|
||||
...state.drafts,
|
||||
[key]: { ...existing, initialized: true, baselineSignature: signature },
|
||||
[key]: { ...existing, initialized: true, baseline },
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
@@ -20,9 +20,24 @@ export type KeyTestStatus = {
|
||||
message: string;
|
||||
};
|
||||
|
||||
export type OpenAIEditBaseline = {
|
||||
name: string;
|
||||
priority: number | null;
|
||||
prefix: string;
|
||||
baseUrl: string;
|
||||
headers: Array<{ key: string; value: string }>;
|
||||
apiKeyEntries: Array<{
|
||||
apiKey: string;
|
||||
proxyUrl: string;
|
||||
headers: Array<{ key: string; value: string }>;
|
||||
}>;
|
||||
models: Array<{ name: string; alias: string }>;
|
||||
testModel: string;
|
||||
};
|
||||
|
||||
export type OpenAIEditDraft = {
|
||||
initialized: boolean;
|
||||
baselineSignature: string;
|
||||
baseline: OpenAIEditBaseline | null;
|
||||
form: OpenAIFormState;
|
||||
testModel: string;
|
||||
testStatus: OpenAITestStatus;
|
||||
@@ -37,7 +52,7 @@ interface OpenAIEditDraftState {
|
||||
releaseDraft: (key: string) => void;
|
||||
ensureDraft: (key: string) => void;
|
||||
initDraft: (key: string, draft: Omit<OpenAIEditDraft, 'initialized'>) => void;
|
||||
setDraftBaselineSignature: (key: string, signature: string) => void;
|
||||
setDraftBaseline: (key: string, baseline: OpenAIEditBaseline) => void;
|
||||
setDraftForm: (key: string, action: SetStateAction<OpenAIFormState>) => void;
|
||||
setDraftTestModel: (key: string, action: SetStateAction<string>) => void;
|
||||
setDraftTestStatus: (key: string, action: SetStateAction<OpenAITestStatus>) => void;
|
||||
@@ -62,7 +77,7 @@ const buildEmptyForm = (): OpenAIFormState => ({
|
||||
|
||||
const buildEmptyDraft = (): OpenAIEditDraft => ({
|
||||
initialized: false,
|
||||
baselineSignature: '',
|
||||
baseline: null,
|
||||
form: buildEmptyForm(),
|
||||
testModel: '',
|
||||
testStatus: 'idle',
|
||||
@@ -123,14 +138,14 @@ export const useOpenAIEditDraftStore = create<OpenAIEditDraftState>((set, get) =
|
||||
}));
|
||||
},
|
||||
|
||||
setDraftBaselineSignature: (key, signature) => {
|
||||
setDraftBaseline: (key, baseline) => {
|
||||
if (!key) return;
|
||||
set((state) => {
|
||||
const existing = state.drafts[key] ?? buildEmptyDraft();
|
||||
return {
|
||||
drafts: {
|
||||
...state.drafts,
|
||||
[key]: { ...existing, initialized: true, baselineSignature: signature },
|
||||
[key]: { ...existing, initialized: true, baseline },
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
@@ -58,6 +58,14 @@
|
||||
|
||||
--radius-md: 8px;
|
||||
--accent-tertiary: var(--bg-tertiary);
|
||||
|
||||
// Glass effect (blurred surfaces)
|
||||
--glass-blur: 12px;
|
||||
--glass-backdrop-filter: blur(var(--glass-blur));
|
||||
--glass-filter: blur(var(--glass-blur));
|
||||
--glass-bg: color-mix(in srgb, var(--bg-primary) 82%, transparent);
|
||||
--glass-bg-secondary: color-mix(in srgb, var(--bg-secondary) 82%, transparent);
|
||||
--glass-border: color-mix(in srgb, var(--border-color) 60%, transparent);
|
||||
}
|
||||
|
||||
// 纯白主题
|
||||
@@ -173,4 +181,16 @@
|
||||
|
||||
--radius-md: 8px;
|
||||
--accent-tertiary: var(--bg-tertiary);
|
||||
|
||||
--glass-border: color-mix(in srgb, var(--border-color) 55%, transparent);
|
||||
}
|
||||
|
||||
@media (max-width: 768px), (prefers-reduced-motion: reduce), (prefers-reduced-transparency: reduce) {
|
||||
:root {
|
||||
--glass-backdrop-filter: none;
|
||||
--glass-filter: none;
|
||||
--glass-bg: var(--bg-primary);
|
||||
--glass-bg-secondary: var(--bg-secondary);
|
||||
--glass-border: var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
export function areStringArraysEqual(a: readonly string[], b: readonly string[]): boolean {
|
||||
if (a === b) return true;
|
||||
if (a.length !== b.length) return false;
|
||||
for (let i = 0; i < a.length; i += 1) {
|
||||
if (a[i] !== b[i]) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
export function areKeyValueEntriesEqual(
|
||||
a: readonly { key: string; value: string }[],
|
||||
b: readonly { key: string; value: string }[]
|
||||
): boolean {
|
||||
if (a === b) return true;
|
||||
if (a.length !== b.length) return false;
|
||||
for (let i = 0; i < a.length; i += 1) {
|
||||
const left = a[i];
|
||||
const right = b[i];
|
||||
if (!left || !right) return false;
|
||||
if (left.key !== right.key || left.value !== right.value) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
export function areModelEntriesEqual(
|
||||
a: readonly { name: string; alias: string }[],
|
||||
b: readonly { name: string; alias: string }[]
|
||||
): boolean {
|
||||
if (a === b) return true;
|
||||
if (a.length !== b.length) return false;
|
||||
for (let i = 0; i < a.length; i += 1) {
|
||||
const left = a[i];
|
||||
const right = b[i];
|
||||
if (!left || !right) return false;
|
||||
if (left.name !== right.name || left.alias !== right.alias) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import type { UsageDetail } from '@/utils/usage';
|
||||
|
||||
export type UsageDetailsBySource = Map<string, UsageDetail[]>;
|
||||
|
||||
const EMPTY_USAGE_DETAILS: UsageDetail[] = [];
|
||||
|
||||
export function indexUsageDetailsBySource(usageDetails: UsageDetail[]): UsageDetailsBySource {
|
||||
const map: UsageDetailsBySource = new Map();
|
||||
|
||||
usageDetails.forEach((detail) => {
|
||||
const sourceId = detail.source;
|
||||
if (!sourceId) return;
|
||||
|
||||
const bucket = map.get(sourceId);
|
||||
if (bucket) {
|
||||
bucket.push(detail);
|
||||
} else {
|
||||
map.set(sourceId, [detail]);
|
||||
}
|
||||
});
|
||||
|
||||
return map;
|
||||
}
|
||||
|
||||
export function collectUsageDetailsForCandidates(
|
||||
usageDetailsBySource: UsageDetailsBySource,
|
||||
candidates: Iterable<string>
|
||||
): UsageDetail[] {
|
||||
let firstDetails: UsageDetail[] | null = null;
|
||||
let merged: UsageDetail[] | null = null;
|
||||
|
||||
for (const candidate of candidates) {
|
||||
const details = usageDetailsBySource.get(candidate);
|
||||
if (!details || details.length === 0) continue;
|
||||
|
||||
if (!firstDetails) {
|
||||
firstDetails = details;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (!merged) {
|
||||
merged = [...firstDetails];
|
||||
}
|
||||
for (const detail of details) {
|
||||
merged.push(detail);
|
||||
}
|
||||
}
|
||||
|
||||
return merged ?? firstDetails ?? EMPTY_USAGE_DETAILS;
|
||||
}
|
||||
Reference in New Issue
Block a user