style: add shared content width constraint to AI provider edit pages

This commit is contained in:
LTbinglingfeng
2026-01-30 23:35:41 +08:00
parent 129d89cf67
commit 3d83d0bfe2
8 changed files with 22 additions and 4 deletions

View File

@@ -14,6 +14,7 @@ import type { AmpcodeConfig } from '@/types';
import { maskApiKey } from '@/utils/format'; import { maskApiKey } from '@/utils/format';
import { buildAmpcodeFormState, entriesToAmpcodeMappings } from '@/components/providers/utils'; import { buildAmpcodeFormState, entriesToAmpcodeMappings } from '@/components/providers/utils';
import type { AmpcodeFormState } from '@/components/providers'; import type { AmpcodeFormState } from '@/components/providers';
import layoutStyles from './AiProvidersEditLayout.module.scss';
type LocationState = { fromAiProviders?: boolean } | null; type LocationState = { fromAiProviders?: boolean } | null;
@@ -97,9 +98,10 @@ export function AiProvidersAmpcodeEditPage() {
if (!mountedRef.current) return; if (!mountedRef.current) return;
setError(getErrorMessage(err) || t('notification.refresh_failed')); setError(getErrorMessage(err) || t('notification.refresh_failed'));
} finally { } finally {
if (!mountedRef.current) return; if (mountedRef.current) {
setLoading(false); setLoading(false);
} }
}
})(); })();
}, [clearCache, t, updateConfigValue]); }, [clearCache, t, updateConfigValue]);
@@ -220,6 +222,7 @@ export function AiProvidersAmpcodeEditPage() {
return ( return (
<SecondaryScreenShell <SecondaryScreenShell
ref={swipeRef} ref={swipeRef}
contentClassName={layoutStyles.content}
title={title} title={title}
onBack={handleBack} onBack={handleBack}
backLabel={t('common.back')} backLabel={t('common.back')}

View File

@@ -14,6 +14,7 @@ import type { ProviderKeyConfig } from '@/types';
import { buildHeaderObject, headersToEntries } from '@/utils/headers'; import { buildHeaderObject, headersToEntries } from '@/utils/headers';
import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils'; import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils';
import type { ProviderFormState } from '@/components/providers'; import type { ProviderFormState } from '@/components/providers';
import layoutStyles from './AiProvidersEditLayout.module.scss';
type LocationState = { fromAiProviders?: boolean } | null; type LocationState = { fromAiProviders?: boolean } | null;
@@ -192,6 +193,7 @@ export function AiProvidersClaudeEditPage() {
return ( return (
<SecondaryScreenShell <SecondaryScreenShell
ref={swipeRef} ref={swipeRef}
contentClassName={layoutStyles.content}
title={title} title={title}
onBack={handleBack} onBack={handleBack}
backLabel={t('common.back')} backLabel={t('common.back')}

View File

@@ -14,6 +14,7 @@ import { buildHeaderObject, headersToEntries } from '@/utils/headers';
import { entriesToModels } from '@/components/ui/ModelInputList'; import { entriesToModels } from '@/components/ui/ModelInputList';
import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils'; import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils';
import type { ProviderFormState } from '@/components/providers'; import type { ProviderFormState } from '@/components/providers';
import layoutStyles from './AiProvidersEditLayout.module.scss';
type LocationState = { fromAiProviders?: boolean } | null; type LocationState = { fromAiProviders?: boolean } | null;
@@ -193,6 +194,7 @@ export function AiProvidersCodexEditPage() {
return ( return (
<SecondaryScreenShell <SecondaryScreenShell
ref={swipeRef} ref={swipeRef}
contentClassName={layoutStyles.content}
title={title} title={title}
onBack={handleBack} onBack={handleBack}
backLabel={t('common.back')} backLabel={t('common.back')}

View File

@@ -0,0 +1,5 @@
.content {
width: 100%;
max-width: 960px;
margin: 0 auto;
}

View File

@@ -13,6 +13,7 @@ import type { GeminiKeyConfig } from '@/types';
import { buildHeaderObject, headersToEntries } from '@/utils/headers'; import { buildHeaderObject, headersToEntries } from '@/utils/headers';
import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils'; import { excludedModelsToText, parseExcludedModels } from '@/components/providers/utils';
import type { GeminiFormState } from '@/components/providers'; import type { GeminiFormState } from '@/components/providers';
import layoutStyles from './AiProvidersEditLayout.module.scss';
type LocationState = { fromAiProviders?: boolean } | null; type LocationState = { fromAiProviders?: boolean } | null;
@@ -176,6 +177,7 @@ export function AiProvidersGeminiEditPage() {
return ( return (
<SecondaryScreenShell <SecondaryScreenShell
ref={swipeRef} ref={swipeRef}
contentClassName={layoutStyles.content}
title={title} title={title}
onBack={handleBack} onBack={handleBack}
backLabel={t('common.back')} backLabel={t('common.back')}

View File

@@ -15,6 +15,7 @@ import { buildHeaderObject } from '@/utils/headers';
import { buildApiKeyEntry, buildOpenAIChatCompletionsEndpoint } from '@/components/providers/utils'; import { buildApiKeyEntry, buildOpenAIChatCompletionsEndpoint } from '@/components/providers/utils';
import type { OpenAIEditOutletContext } from './AiProvidersOpenAIEditLayout'; import type { OpenAIEditOutletContext } from './AiProvidersOpenAIEditLayout';
import styles from './AiProvidersPage.module.scss'; import styles from './AiProvidersPage.module.scss';
import layoutStyles from './AiProvidersEditLayout.module.scss';
const OPENAI_TEST_TIMEOUT_MS = 30_000; const OPENAI_TEST_TIMEOUT_MS = 30_000;
@@ -229,6 +230,7 @@ export function AiProvidersOpenAIEditPage() {
return ( return (
<SecondaryScreenShell <SecondaryScreenShell
ref={swipeRef} ref={swipeRef}
contentClassName={layoutStyles.content}
title={title} title={title}
onBack={handleBack} onBack={handleBack}
backLabel={t('common.back')} backLabel={t('common.back')}
@@ -370,4 +372,3 @@ export function AiProvidersOpenAIEditPage() {
</SecondaryScreenShell> </SecondaryScreenShell>
); );
} }

View File

@@ -12,6 +12,7 @@ import { buildHeaderObject } from '@/utils/headers';
import { buildOpenAIModelsEndpoint } from '@/components/providers/utils'; import { buildOpenAIModelsEndpoint } from '@/components/providers/utils';
import type { OpenAIEditOutletContext } from './AiProvidersOpenAIEditLayout'; import type { OpenAIEditOutletContext } from './AiProvidersOpenAIEditLayout';
import styles from './AiProvidersPage.module.scss'; import styles from './AiProvidersPage.module.scss';
import layoutStyles from './AiProvidersEditLayout.module.scss';
const getErrorMessage = (err: unknown) => { const getErrorMessage = (err: unknown) => {
if (err instanceof Error) return err.message; if (err instanceof Error) return err.message;
@@ -138,6 +139,7 @@ export function AiProvidersOpenAIModelsPage() {
return ( return (
<SecondaryScreenShell <SecondaryScreenShell
ref={swipeRef} ref={swipeRef}
contentClassName={layoutStyles.content}
title={t('ai_providers.openai_models_fetch_title')} title={t('ai_providers.openai_models_fetch_title')}
onBack={handleBack} onBack={handleBack}
backLabel={t('common.back')} backLabel={t('common.back')}
@@ -219,4 +221,3 @@ export function AiProvidersOpenAIModelsPage() {
</SecondaryScreenShell> </SecondaryScreenShell>
); );
} }

View File

@@ -13,6 +13,7 @@ import { useAuthStore, useConfigStore, useNotificationStore } from '@/stores';
import type { ProviderKeyConfig } from '@/types'; import type { ProviderKeyConfig } from '@/types';
import { buildHeaderObject, headersToEntries } from '@/utils/headers'; import { buildHeaderObject, headersToEntries } from '@/utils/headers';
import type { VertexFormState } from '@/components/providers'; import type { VertexFormState } from '@/components/providers';
import layoutStyles from './AiProvidersEditLayout.module.scss';
type LocationState = { fromAiProviders?: boolean } | null; type LocationState = { fromAiProviders?: boolean } | null;
@@ -200,6 +201,7 @@ export function AiProvidersVertexEditPage() {
return ( return (
<SecondaryScreenShell <SecondaryScreenShell
ref={swipeRef} ref={swipeRef}
contentClassName={layoutStyles.content}
title={title} title={title}
onBack={handleBack} onBack={handleBack}
backLabel={t('common.back')} backLabel={t('common.back')}