diff --git a/apps/desktop/src/renderer/src/components/SettingsModal.tsx b/apps/desktop/src/renderer/src/components/SettingsModal.tsx index a7c5b2f..3a1cdc1 100644 --- a/apps/desktop/src/renderer/src/components/SettingsModal.tsx +++ b/apps/desktop/src/renderer/src/components/SettingsModal.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react' +import { memo, useEffect, useMemo, useRef, useState, useTransition, type ReactNode } from 'react' import type { JSX, RefObject } from 'react' import { useVirtualizer } from '@tanstack/react-virtual' import { @@ -685,6 +685,15 @@ function CorePluginPanel({ ) } +/** 系统提示词预览:整段 pi 提示词是大文本,memo 化避免弹窗内任意状态变化触发重渲染;挂载耗时靠过渡提交兜住 */ +const PromptPreview = memo(function PromptPreview({ loading, text }: { loading: boolean; text: string }): ReactNode { + return ( +
+ {loading ? '载入中…' : text || '(空)'} +
+ ) +}) + export function SettingsModal({ open, sessionState, @@ -705,6 +714,8 @@ export function SettingsModal({ const [keyValue, setKeyValue] = useState('') const [prompt, setPrompt] = useState('') const [promptLoading, setPromptLoading] = useState(false) + // 大文本(系统提示词)的提交走过渡优先级,避免卡住弹窗动画与交互帧 + const [, startTransition] = useTransition() const [theme, setTheme] = useState('default') const [themeMode, setThemeMode] = useState('system') const [busy, setBusy] = useState(false) @@ -839,7 +850,9 @@ export function SettingsModal({ setPromptLoading(true) window.api .getSystemPrompt() - .then(setPrompt) + .then((text) => { + startTransition(() => setPrompt(text)) + }) .catch(() => setPrompt('')) .finally(() => setPromptLoading(false)) }, [open, tab]) @@ -871,7 +884,7 @@ export function SettingsModal({ const meta = TAB_META[tab] return ( -
+
-
- {promptLoading ? '载入中…' : prompt || '(空)'} -
+
)}