From 07a5d04f24c01c28c001d16647a3de3bd78a56d8 Mon Sep 17 00:00:00 2001 From: yujiangtao Date: Thu, 6 Aug 2026 21:35:16 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20settings=20UI=20consistency=20=E2=80=94?= =?UTF-8?q?=20empty=20states,=20MCP=20layout,=20remove=20power=20section?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. AIModelConfig: empty model list now uses --element-bg-subtle background instead of transparent, matching other ConfigPageSection body styles 2. BasicsConfig: remove BasicsPreventSleepSection (电源) — not applicable on OHOS 3. McpToolsConfig: - Remove .bitfun-collection-empty override (was flex-start + no padding; now uses standard centered style) - JSON editor: add horizontal padding (-gap-3) for content margin - JSON actions: right-align (flex-end) instead of centered 4. ExternalSourcesConfig: __mcp-empty now centered with proper padding (-gap-6 -gap-4) instead of grid with no horizontal padding 5. VoiceInputConfig: __empty now centered with standard padding 6. AcpAgentsConfig: __empty now centered with standard padding --- .../config/components/AIModelConfig.scss | 2 +- .../config/components/AcpAgentsConfig.scss | 5 +- .../config/components/BasicsConfig.tsx | 95 ------------------- .../components/ExternalSourcesConfig.scss | 14 ++- .../config/components/McpToolsConfig.scss | 9 +- .../config/components/VoiceInputConfig.scss | 6 +- .../components/NotificationItem.scss | 6 +- 7 files changed, 24 insertions(+), 113 deletions(-) diff --git a/src/web-ui/src/infrastructure/config/components/AIModelConfig.scss b/src/web-ui/src/infrastructure/config/components/AIModelConfig.scss index 48a18888e6..cf960ae020 100644 --- a/src/web-ui/src/infrastructure/config/components/AIModelConfig.scss +++ b/src/web-ui/src/infrastructure/config/components/AIModelConfig.scss @@ -377,7 +377,7 @@ border: 1px dashed var(--border-base); border-radius: $size-radius-sm; - background: transparent; + background: var(--element-bg-subtle); svg { opacity: 0.5; diff --git a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss index 99f53f8d9a..8738dbdb74 100644 --- a/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss +++ b/src/web-ui/src/infrastructure/config/components/AcpAgentsConfig.scss @@ -241,7 +241,10 @@ } &__empty { - padding: $size-gap-4; + display: flex; + align-items: center; + justify-content: center; + padding: $size-gap-6 $size-gap-4; color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: center; diff --git a/src/web-ui/src/infrastructure/config/components/BasicsConfig.tsx b/src/web-ui/src/infrastructure/config/components/BasicsConfig.tsx index 280898162e..d4ab6e4847 100644 --- a/src/web-ui/src/infrastructure/config/components/BasicsConfig.tsx +++ b/src/web-ui/src/infrastructure/config/components/BasicsConfig.tsx @@ -241,100 +241,6 @@ function BasicsAutoUpdateSection() { ); } -function BasicsPreventSleepSection() { - const { t } = useTranslation('settings/basics'); - const isTauri = typeof window !== 'undefined' && '__TAURI__' in window; - const [enabled, setEnabled] = useState(false); - const [loading, setLoading] = useState(true); - const [saving, setSaving] = useState(false); - const [message, setMessage] = useState<{ type: 'success' | 'error' | 'info'; text: string } | null>(null); - - const showMessage = useCallback((type: 'success' | 'error' | 'info', text: string) => { - setMessage({ type, text }); - setTimeout(() => setMessage(null), 3000); - }, []); - - useEffect(() => { - if (!isTauri) { - setLoading(false); - return; - } - - let cancelled = false; - void (async () => { - try { - setLoading(true); - const value = await systemAPI.getPreventSleepEnabled(); - if (!cancelled) { - setEnabled(value); - } - } catch (error) { - log.error('Failed to load prevent-sleep preference', error); - if (!cancelled) { - showMessage('error', t('preventSleep.messages.loadFailed')); - } - } finally { - if (!cancelled) { - setLoading(false); - } - } - })(); - - return () => { - cancelled = true; - }; - }, [isTauri, showMessage, t]); - - const handleToggle = useCallback( - async (next: boolean) => { - const previous = enabled; - setEnabled(next); - setSaving(true); - try { - await systemAPI.setPreventSleepEnabled(next); - showMessage('success', t('preventSleep.messages.saved')); - } catch (error) { - setEnabled(previous); - log.error('Failed to set prevent-sleep preference', { next, error }); - showMessage('error', t('preventSleep.messages.saveFailed')); - } finally { - setSaving(false); - } - }, - [enabled, showMessage, t] - ); - - if (!isTauri) { - return null; - } - - if (loading) { - return ; - } - - return ( - - - - { - void handleToggle(event.target.checked); - }} - disabled={saving} - /> - - - ); -} - function BasicsLoggingSection() { const { t } = useTranslation('settings/basics'); const [configLevel, setConfigLevel] = useState('info'); @@ -1238,7 +1144,6 @@ const BasicsConfig: React.FC = () => { - diff --git a/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss b/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss index f8c2109317..713b76c7f9 100644 --- a/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss +++ b/src/web-ui/src/infrastructure/config/components/ExternalSourcesConfig.scss @@ -542,14 +542,18 @@ } &__mcp-empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--size-gap-2); + padding: var(--size-gap-6) var(--size-gap-4); color: var(--color-text-secondary); - font-size: 13px; - display: grid; - gap: 8px; - padding: 12px 0; + font-size: var(--font-size-sm); + text-align: center; code { - font-size: 12px; + font-size: var(--font-size-xs); color: var(--color-text-muted); } } diff --git a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss index 0edcd189a8..54eac2014e 100644 --- a/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss +++ b/src/web-ui/src/infrastructure/config/components/McpToolsConfig.scss @@ -1,14 +1,9 @@ @use '../../../component-library/styles/tokens' as *; .bitfun-mcp-tools { - .bitfun-collection-empty { - justify-content: flex-start; - padding: $size-gap-2 0; - font-size: var(--font-size-xs); - } // ─── JSON editor (MCP) ───────────────────────────────────────────────────── &__json-editor { - padding: $size-gap-3 0; + padding: $size-gap-3; border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; @@ -40,7 +35,7 @@ &__json-actions { display: flex; - justify-content: center; + justify-content: flex-end; gap: $size-gap-2; } diff --git a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.scss b/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.scss index cba507d46b..5a667e0b6c 100644 --- a/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.scss +++ b/src/web-ui/src/infrastructure/config/components/VoiceInputConfig.scss @@ -283,7 +283,11 @@ } &__empty { - color: var(--color-text-secondary); + display: flex; + align-items: center; + justify-content: center; + padding: $size-gap-6 $size-gap-4; + color: var(--color-text-muted); font-size: var(--font-size-sm); } } diff --git a/src/web-ui/src/shared/notification-system/components/NotificationItem.scss b/src/web-ui/src/shared/notification-system/components/NotificationItem.scss index 4551572a7a..ee3fcd1ff8 100644 --- a/src/web-ui/src/shared/notification-system/components/NotificationItem.scss +++ b/src/web-ui/src/shared/notification-system/components/NotificationItem.scss @@ -117,11 +117,11 @@ transition: all $motion-base $easing-standard; &--primary { - background: var(--color-accent-600); - color: var(--color-text-primary); + background: color-mix(in srgb, var(--color-accent-500) 25%, var(--element-bg-base)); + color: var(--color-accent-500); &:hover { - background: var(--color-accent-500); + background: color-mix(in srgb, var(--color-accent-500) 35%, var(--element-bg-base)); } &:active {