From ceb89d28c8fa133bd701d4a537fa49c28df36e44 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B1=90=E6=AE=87?= Date: Sun, 24 Nov 2024 22:10:08 +0800 Subject: [PATCH] adjust --- .../components/resources/proxy-provider.tsx | 64 ++++++++-------- .../components/resources/rule-provider.tsx | 76 ++++++++++--------- .../src/components/resources/viewer.tsx | 5 +- 3 files changed, 76 insertions(+), 69 deletions(-) diff --git a/src/renderer/src/components/resources/proxy-provider.tsx b/src/renderer/src/components/resources/proxy-provider.tsx index f189ecd3..c797e82d 100644 --- a/src/renderer/src/components/resources/proxy-provider.tsx +++ b/src/renderer/src/components/resources/proxy-provider.tsx @@ -17,31 +17,32 @@ import { calcTraffic } from '@renderer/utils/calc' import { getHash } from '@renderer/utils/hash' const ProxyProvider: React.FC = () => { - const [ShowProvider, setShowProvider] = useState(false) - const [ShowPath, setShowPath] = useState('') - const [ShowType, setShowType] = useState('') - + const [showDetails, setShowDetails] = useState({ + show: false, + path: '', + type: '', + title: '' + }) useEffect(() => { - const fetchProviderPath = async (name: string): Promise => { - try { - const providers = await getRuntimeConfig() - const provider = providers['proxy-providers'][name] - console.log(provider) - if (provider?.path) { - setShowPath(provider.path) - } else if (provider?.url) { - setShowPath(`proxies/` + getHash(provider.url)) + if (showDetails.title) { + const fetchProviderPath = async (name: string): Promise => { + try { + const providers= await getRuntimeConfig() + const provider = providers['proxy-providers'][name] + if (provider) { + setShowDetails((prev) => ({ + ...prev, + show: true, + path: provider?.path || `proxies/${getHash(provider?.url)}` + })) + } + } catch { + setShowDetails((prev) => ({ ...prev, path: '' })) } - setShowProvider(true) - } catch (error) { - setShowPath('') } + fetchProviderPath(showDetails.title) } - - if (ShowPath != '') { - fetchProviderPath(ShowPath) - } - }, [ShowProvider, ShowPath]) + }, [showDetails.title]) const { data, mutate } = useSWR('mihomoProxyProviders', mihomoProxyProviders) const providers = useMemo(() => { @@ -79,15 +80,12 @@ const ProxyProvider: React.FC = () => { return ( - {ShowProvider && ( + {showDetails.show && ( { - setShowProvider(false) - setShowPath('') - setShowType('') - }} - path={ShowPath} - type={ShowType} + path={showDetails.path} + type={showDetails.type} + title={showDetails.title} + onClose={() => setShowDetails({ show: false, path: '', type: '', title: '' })} /> )} @@ -125,8 +123,12 @@ const ProxyProvider: React.FC = () => { className="ml-2" size="sm" onPress={() => { - setShowType(provider.vehicleType) - setShowPath(provider.name) + setShowDetails({ + show: false, + path: provider.name, + type: provider.vehicleType, + title: provider.name + }) }} > {provider.vehicleType == 'File' ? ( diff --git a/src/renderer/src/components/resources/rule-provider.tsx b/src/renderer/src/components/resources/rule-provider.tsx index 2ad739d2..91b1a634 100644 --- a/src/renderer/src/components/resources/rule-provider.tsx +++ b/src/renderer/src/components/resources/rule-provider.tsx @@ -16,10 +16,33 @@ import { MdEditDocument } from 'react-icons/md' import dayjs from 'dayjs' const RuleProvider: React.FC = () => { - const [ShowProvider, setShowProvider] = useState(false) - const [ShowPath, setShowPath] = useState('') - const [ShowType, setShowType] = useState('') - const [ShowFormat, setShowFormat] = useState('') + const [showDetails, setShowDetails] = useState({ + show: false, + path: '', + type: '', + title: '', + format: '' + }) + useEffect(() => { + if (showDetails.title) { + const fetchProviderPath = async (name: string): Promise => { + try { + const providers= await getRuntimeConfig() + const provider = providers['rule-providers'][name] + if (provider) { + setShowDetails((prev) => ({ + ...prev, + show: true, + path: provider?.path || `rules/${getHash(provider?.url)}` + })) + } + } catch { + setShowDetails((prev) => ({ ...prev, path: '' })) + } + } + fetchProviderPath(showDetails.title) + } + }, [showDetails.title]) const { data, mutate } = useSWR('mihomoRuleProviders', mihomoRuleProviders) const providers = useMemo(() => { @@ -29,26 +52,6 @@ const RuleProvider: React.FC = () => { }, [data]) const [updating, setUpdating] = useState(Array(providers.length).fill(false)) - useEffect(() => { - const fetchProviderPath = async (name: string): Promise => { - try { - const providers = await getRuntimeConfig() - const provider = providers['rule-providers'][name] - if (provider?.path) { - setShowPath(provider.path) - } else if (provider?.url) { - setShowPath(`rules/` + getHash(provider.url)) - } - setShowProvider(true) - } catch (error) { - setShowPath('') - } - } - if (ShowPath != '') { - fetchProviderPath(ShowPath) - } - }, [ShowProvider, ShowPath]) - const onUpdate = async (name: string, index: number): Promise => { setUpdating((prev) => { prev[index] = true @@ -73,16 +76,13 @@ const RuleProvider: React.FC = () => { return ( - {ShowProvider && ( + {showDetails.show && ( { - setShowProvider(false) - setShowPath('') - setShowType('') - }} + path={showDetails.path} + type={showDetails.type} + title={showDetails.title} + format={showDetails.format} + onClose={() => setShowDetails({ show: false, path: '', type: '', title: '', format: '' })} /> )} @@ -117,9 +117,13 @@ const RuleProvider: React.FC = () => { className="ml-2" size="sm" onPress={() => { - setShowType(provider.vehicleType) - setShowFormat(provider.format) - setShowPath(provider.name) + setShowDetails({ + show: false, + path: provider.name, + type: provider.vehicleType, + title: provider.name, + format: provider.format + }) }} > {provider.vehicleType == 'File' ? ( diff --git a/src/renderer/src/components/resources/viewer.tsx b/src/renderer/src/components/resources/viewer.tsx index 36735c80..c717df3a 100644 --- a/src/renderer/src/components/resources/viewer.tsx +++ b/src/renderer/src/components/resources/viewer.tsx @@ -8,10 +8,11 @@ interface Props { onClose: () => void path: string type: string + title: string format?: string } const Viewer: React.FC = (props) => { - const { type, path, format, onClose } = props + const { type, path, title, format, onClose } = props const [currData, setCurrData] = useState('') const language: Language = !format || format === 'YamlRule' ? 'yaml' : 'text' @@ -34,7 +35,7 @@ const Viewer: React.FC = (props) => { scrollBehavior="inside" > - Provider 内容 + {title}