mirror of
https://github.com/woodchen-ink/proxy-go.git
synced 2025-07-18 16:41:54 +08:00
feat(config): 增强配置页面的状态管理
- 添加标志以跟踪配置来源,区分API加载和用户修改 - 优化自动保存逻辑,确保在用户修改时不触发自动保存 - 更新配置时使用包装的setConfig函数,提升代码可读性和维护性
This commit is contained in:
parent
de2209d177
commit
50021c1a09
@ -68,6 +68,8 @@ export default function ConfigPage() {
|
|||||||
const scrollPositionRef = useRef(0)
|
const scrollPositionRef = useRef(0)
|
||||||
// 添加一个ref来跟踪是否是初始加载
|
// 添加一个ref来跟踪是否是初始加载
|
||||||
const isInitialLoadRef = useRef(true)
|
const isInitialLoadRef = useRef(true)
|
||||||
|
// 添加一个标志来跟踪配置是否是从API加载的
|
||||||
|
const isConfigFromApiRef = useRef(true)
|
||||||
// 添加一个防抖定时器ref
|
// 添加一个防抖定时器ref
|
||||||
const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null)
|
const saveTimeoutRef = useRef<NodeJS.Timeout | null>(null)
|
||||||
|
|
||||||
@ -126,6 +128,7 @@ export default function ConfigPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const data = await response.json()
|
const data = await response.json()
|
||||||
|
isConfigFromApiRef.current = true // 标记配置来自API
|
||||||
setConfig(data)
|
setConfig(data)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
const message = error instanceof Error ? error.message : "获取配置失败"
|
const message = error instanceof Error ? error.message : "获取配置失败"
|
||||||
@ -139,6 +142,12 @@ export default function ConfigPage() {
|
|||||||
}
|
}
|
||||||
}, [router, toast])
|
}, [router, toast])
|
||||||
|
|
||||||
|
// 创建一个包装的setConfig函数,用于用户修改配置时
|
||||||
|
const updateConfig = useCallback((newConfig: Config) => {
|
||||||
|
isConfigFromApiRef.current = false // 标记配置来自用户修改
|
||||||
|
setConfig(newConfig)
|
||||||
|
}, [])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
fetchConfig()
|
fetchConfig()
|
||||||
}, [fetchConfig])
|
}, [fetchConfig])
|
||||||
@ -193,8 +202,9 @@ export default function ConfigPage() {
|
|||||||
// 添加自动保存的useEffect
|
// 添加自动保存的useEffect
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// 如果是初始加载或者配置为空,不触发保存
|
// 如果是初始加载或者配置为空,不触发保存
|
||||||
if (isInitialLoadRef.current || !config) {
|
if (isInitialLoadRef.current || !config || isConfigFromApiRef.current) {
|
||||||
isInitialLoadRef.current = false
|
isInitialLoadRef.current = false
|
||||||
|
isConfigFromApiRef.current = false // 重置标志
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -203,9 +213,15 @@ export default function ConfigPage() {
|
|||||||
clearTimeout(saveTimeoutRef.current)
|
clearTimeout(saveTimeoutRef.current)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 保存当前滚动位置
|
||||||
|
const currentScrollPosition = window.scrollY
|
||||||
|
|
||||||
// 设置新的定时器,延迟1秒后保存
|
// 设置新的定时器,延迟1秒后保存
|
||||||
saveTimeoutRef.current = setTimeout(() => {
|
saveTimeoutRef.current = setTimeout(() => {
|
||||||
handleSave()
|
handleSave().then(() => {
|
||||||
|
// 保存完成后恢复滚动位置
|
||||||
|
window.scrollTo(0, currentScrollPosition)
|
||||||
|
})
|
||||||
}, 1000)
|
}, 1000)
|
||||||
|
|
||||||
// 组件卸载时清除定时器
|
// 组件卸载时清除定时器
|
||||||
@ -305,7 +321,7 @@ export default function ConfigPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
newConfig.MAP[path] = pathConfig
|
newConfig.MAP[path] = pathConfig
|
||||||
setConfig(newConfig)
|
updateConfig(newConfig)
|
||||||
|
|
||||||
if (editingPathData) {
|
if (editingPathData) {
|
||||||
setEditingPathData(null)
|
setEditingPathData(null)
|
||||||
@ -332,7 +348,7 @@ export default function ConfigPage() {
|
|||||||
if (!config || !deletingPath) return
|
if (!config || !deletingPath) return
|
||||||
const newConfig = { ...config }
|
const newConfig = { ...config }
|
||||||
delete newConfig.MAP[deletingPath]
|
delete newConfig.MAP[deletingPath]
|
||||||
setConfig(newConfig)
|
updateConfig(newConfig)
|
||||||
setDeletingPath(null)
|
setDeletingPath(null)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -344,7 +360,7 @@ export default function ConfigPage() {
|
|||||||
} else {
|
} else {
|
||||||
newConfig.Compression[type].Level = value as number
|
newConfig.Compression[type].Level = value as number
|
||||||
}
|
}
|
||||||
setConfig(newConfig)
|
updateConfig(newConfig)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleExtensionMapEdit = (path: string, ext?: string, target?: string) => {
|
const handleExtensionMapEdit = (path: string, ext?: string, target?: string) => {
|
||||||
@ -417,7 +433,7 @@ export default function ConfigPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
setConfig(newConfig)
|
updateConfig(newConfig)
|
||||||
setExtensionMapDialogOpen(false)
|
setExtensionMapDialogOpen(false)
|
||||||
setEditingExtension(null)
|
setEditingExtension(null)
|
||||||
setNewExtension({ ext: "", target: "" })
|
setNewExtension({ ext: "", target: "" })
|
||||||
@ -436,7 +452,7 @@ export default function ConfigPage() {
|
|||||||
delete newExtensionMap[deletingExtension.ext]
|
delete newExtensionMap[deletingExtension.ext]
|
||||||
mapping.ExtensionMap = newExtensionMap
|
mapping.ExtensionMap = newExtensionMap
|
||||||
}
|
}
|
||||||
setConfig(newConfig)
|
updateConfig(newConfig)
|
||||||
setDeletingExtension(null)
|
setDeletingExtension(null)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -516,6 +532,8 @@ export default function ConfigPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 使用setConfig而不是updateConfig,因为导入的配置不应触发自动保存
|
||||||
|
isConfigFromApiRef.current = true
|
||||||
setConfig(newConfig)
|
setConfig(newConfig)
|
||||||
toast({
|
toast({
|
||||||
title: "成功",
|
title: "成功",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user