perf: 去掉设置弹窗遮罩的 backdrop-blur,修复弹窗内滚动掉帧
This commit is contained in:
@@ -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 type { JSX, RefObject } from 'react'
|
||||||
import { useVirtualizer } from '@tanstack/react-virtual'
|
import { useVirtualizer } from '@tanstack/react-virtual'
|
||||||
import {
|
import {
|
||||||
@@ -685,6 +685,15 @@ function CorePluginPanel({
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 系统提示词预览:整段 pi 提示词是大文本,memo 化避免弹窗内任意状态变化触发重渲染;挂载耗时靠过渡提交兜住 */
|
||||||
|
const PromptPreview = memo(function PromptPreview({ loading, text }: { loading: boolean; text: string }): ReactNode {
|
||||||
|
return (
|
||||||
|
<div className="min-h-0 flex-1 overflow-y-auto overscroll-contain whitespace-pre-wrap rounded-card border border-line bg-inset p-3.5 font-mono text-[12px] leading-6 text-ink-2">
|
||||||
|
{loading ? '载入中…' : text || '(空)'}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
export function SettingsModal({
|
export function SettingsModal({
|
||||||
open,
|
open,
|
||||||
sessionState,
|
sessionState,
|
||||||
@@ -705,6 +714,8 @@ export function SettingsModal({
|
|||||||
const [keyValue, setKeyValue] = useState('')
|
const [keyValue, setKeyValue] = useState('')
|
||||||
const [prompt, setPrompt] = useState('')
|
const [prompt, setPrompt] = useState('')
|
||||||
const [promptLoading, setPromptLoading] = useState(false)
|
const [promptLoading, setPromptLoading] = useState(false)
|
||||||
|
// 大文本(系统提示词)的提交走过渡优先级,避免卡住弹窗动画与交互帧
|
||||||
|
const [, startTransition] = useTransition()
|
||||||
const [theme, setTheme] = useState('default')
|
const [theme, setTheme] = useState('default')
|
||||||
const [themeMode, setThemeMode] = useState<ThemeMode>('system')
|
const [themeMode, setThemeMode] = useState<ThemeMode>('system')
|
||||||
const [busy, setBusy] = useState(false)
|
const [busy, setBusy] = useState(false)
|
||||||
@@ -839,7 +850,9 @@ export function SettingsModal({
|
|||||||
setPromptLoading(true)
|
setPromptLoading(true)
|
||||||
window.api
|
window.api
|
||||||
.getSystemPrompt()
|
.getSystemPrompt()
|
||||||
.then(setPrompt)
|
.then((text) => {
|
||||||
|
startTransition(() => setPrompt(text))
|
||||||
|
})
|
||||||
.catch(() => setPrompt(''))
|
.catch(() => setPrompt(''))
|
||||||
.finally(() => setPromptLoading(false))
|
.finally(() => setPromptLoading(false))
|
||||||
}, [open, tab])
|
}, [open, tab])
|
||||||
@@ -871,7 +884,7 @@ export function SettingsModal({
|
|||||||
const meta = TAB_META[tab]
|
const meta = TAB_META[tab]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/25 backdrop-blur-[2px]" onClick={onClose}>
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/25" onClick={onClose}>
|
||||||
<div
|
<div
|
||||||
className="flex h-[640px] w-[920px] max-w-[94vw] overflow-hidden rounded-card border border-line bg-surface shadow-overlay"
|
className="flex h-[640px] w-[920px] max-w-[94vw] overflow-hidden rounded-card border border-line bg-surface shadow-overlay"
|
||||||
style={{ animation: 'pop-in 200ms cubic-bezier(0.23,1,0.32,1) both' }}
|
style={{ animation: 'pop-in 200ms cubic-bezier(0.23,1,0.32,1) both' }}
|
||||||
@@ -975,9 +988,7 @@ export function SettingsModal({
|
|||||||
|
|
||||||
{tab === 'prompt' && (
|
{tab === 'prompt' && (
|
||||||
<div className="flex h-full min-h-0 flex-col">
|
<div className="flex h-full min-h-0 flex-col">
|
||||||
<div className="min-h-0 flex-1 overflow-y-auto whitespace-pre-wrap rounded-card border border-line bg-inset p-3.5 font-mono text-[12px] leading-6 text-ink-2">
|
<PromptPreview loading={promptLoading} text={prompt} />
|
||||||
{promptLoading ? '载入中…' : prompt || '(空)'}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user