adjust

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 [showDetails, setShowDetails] = useState({
-  const [ShowPath, setShowPath] = useState('')
+    show: false,
-  const [ShowType, setShowType] = useState('')
+    path: '',
-
+    type: '',
+    title: ''
+  })
   useEffect(() => {
-    const fetchProviderPath = async (name: string): Promise<void> => {
+    if (showDetails.title) {
-      try {
+      const fetchProviderPath = async (name: string): Promise<void> => {
-        const providers = await getRuntimeConfig()
+        try {
-        const provider = providers['proxy-providers'][name]
+          const providers= await getRuntimeConfig()
-        console.log(provider)
+          const provider = providers['proxy-providers'][name]
-        if (provider?.path) {
+          if (provider) {
-          setShowPath(provider.path)
+            setShowDetails((prev) => ({
-        } else if (provider?.url) {
+              ...prev,
-          setShowPath(`proxies/` + getHash(provider.url))
+              show: true,
+              path: provider?.path || `proxies/${getHash(provider?.url)}`
+            }))
+          }
+        } catch {
+          setShowDetails((prev) => ({ ...prev, path: '' }))
         }
-        setShowProvider(true)
-      } catch (error) {
-        setShowPath('')
       }
+      fetchProviderPath(showDetails.title)
     }
-
+  }, [showDetails.title])
-    if (ShowPath != '') {
-      fetchProviderPath(ShowPath)
-    }
-  }, [ShowProvider, ShowPath])
 
   const { data, mutate } = useSWR('mihomoProxyProviders', mihomoProxyProviders)
   const providers = useMemo(() => {
@@ -79,15 +80,12 @@ const ProxyProvider: React.FC = () => {
 
   return (
     <SettingCard>
-      {ShowProvider && (
+      {showDetails.show && (
         <Viewer
-          onClose={() => {
+          path={showDetails.path}
-            setShowProvider(false)
+          type={showDetails.type}
-            setShowPath('')
+          title={showDetails.title}
-            setShowType('')
+          onClose={() => setShowDetails({ show: false, path: '', type: '', title: '' })}
-          }}
-          path={ShowPath}
-          type={ShowType}
         />
       )}
       <SettingItem title="代理集合" divider>
@@ -125,8 +123,12 @@ const ProxyProvider: React.FC = () => {
                 className="ml-2"
                 size="sm"
                 onPress={() => {
-                  setShowType(provider.vehicleType)
+                  setShowDetails({
-                  setShowPath(provider.name)
+                    show: false,
+                    path: provider.name,
+                    type: provider.vehicleType,
+                    title: provider.name
+                  })
                 }}
               >
                 {provider.vehicleType == 'File' ? (

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 [showDetails, setShowDetails] = useState({
-  const [ShowPath, setShowPath] = useState('')
+    show: false,
-  const [ShowType, setShowType] = useState('')
+    path: '',
-  const [ShowFormat, setShowFormat] = useState('')
+    type: '',
+    title: '',
+    format: ''
+  })
+  useEffect(() => {
+    if (showDetails.title) {
+      const fetchProviderPath = async (name: string): Promise<void> => {
+        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<void> => {
-      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<void> => {
     setUpdating((prev) => {
       prev[index] = true
@@ -73,16 +76,13 @@ const RuleProvider: React.FC = () => {
 
   return (
     <SettingCard>
-      {ShowProvider && (
+      {showDetails.show && (
         <Viewer
-          path={ShowPath}
+          path={showDetails.path}
-          type={ShowType}
+          type={showDetails.type}
-          format={ShowFormat}
+          title={showDetails.title}
-          onClose={() => {
+          format={showDetails.format}
-            setShowProvider(false)
+          onClose={() => setShowDetails({ show: false, path: '', type: '', title: '', format: '' })}
-            setShowPath('')
-            setShowType('')
-          }}
         />
       )}
       <SettingItem title="规则集合" divider>
@@ -117,9 +117,13 @@ const RuleProvider: React.FC = () => {
                   className="ml-2"
                   size="sm"
                   onPress={() => {
-                    setShowType(provider.vehicleType)
+                    setShowDetails({
-                    setShowFormat(provider.format)
+                      show: false,
-                    setShowPath(provider.name)
+                      path: provider.name,
+                      type: provider.vehicleType,
+                      title: provider.name,
+                      format: provider.format
+                    })
                   }}
                 >
                   {provider.vehicleType == 'File' ? (

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> = (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> = (props) => {
       scrollBehavior="inside"
     >
       <ModalContent className="h-full w-[calc(100%-100px)]">
-        <ModalHeader className="flex pb-0 app-drag">Provider 内容</ModalHeader>
+        <ModalHeader className="flex pb-0 app-drag">{title}</ModalHeader>
         <ModalBody className="h-full">
           <BaseEditor
             language={language}