diff --git a/src/renderer/src/components/resources/proxy-provider.tsx b/src/renderer/src/components/resources/proxy-provider.tsx
index f189ecd3..1ef72b07 100644
--- a/src/renderer/src/components/resources/proxy-provider.tsx
+++ b/src/renderer/src/components/resources/proxy-provider.tsx
@@ -17,31 +17,31 @@ 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<void> => {
       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))
-        }
-        setShowProvider(true)
-      } catch (error) {
-        setShowPath('')
+        setShowDetails((prev) => ({
+          ...prev,
+          show: true,
+          path: provider?.path || `proxies/${getHash(provider?.url)}`
+        }))
+      } catch {
+        setShowDetails((prev) => ({ ...prev, path: '' }))
       }
     }
-
-    if (ShowPath != '') {
-      fetchProviderPath(ShowPath)
+    if (showDetails.path) {
+      fetchProviderPath(showDetails.path)
     }
-  }, [ShowProvider, ShowPath])
+  }, [showDetails.path])
 
   const { data, mutate } = useSWR('mihomoProxyProviders', mihomoProxyProviders)
   const providers = useMemo(() => {
@@ -79,15 +79,12 @@ const ProxyProvider: React.FC = () => {
 
   return (
     <SettingCard>
-      {ShowProvider && (
+      {showDetails.show && (
         <Viewer
-          onClose={() => {
-            setShowProvider(false)
-            setShowPath('')
-            setShowType('')
-          }}
-          path={ShowPath}
-          type={ShowType}
+          path={showDetails.path}
+          type={showDetails.type}
+          title={showDetails.title}
+          onClose={() => setShowDetails({ show: false, path: '', type: '', title: '' })}
         />
       )}
       <SettingItem title="代理集合" divider>
@@ -125,8 +122,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..4722ba59 100644
--- a/src/renderer/src/components/resources/rule-provider.tsx
+++ b/src/renderer/src/components/resources/rule-provider.tsx
@@ -16,38 +16,43 @@ 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 { data, mutate } = useSWR('mihomoRuleProviders', mihomoRuleProviders)
-  const providers = useMemo(() => {
-    if (!data) return []
-    if (!data.providers) return []
-    return Object.keys(data.providers).map((key) => data.providers[key])
-  }, [data])
-  const [updating, setUpdating] = useState(Array(providers.length).fill(false))
-
+  const [showDetails, setShowDetails] = useState({
+    show: false,
+    path: '',
+    type: '',
+    title: '',
+    format: ''
+  })
   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('')
+        setShowDetails((prev) => ({
+          ...prev,
+          show: true,
+          path: provider?.path || `rules/${getHash(provider?.url)}`
+        }))
+      } catch {
+        setShowDetails((prev) => ({ ...prev, path: '' }))
       }
     }
-    if (ShowPath != '') {
-      fetchProviderPath(ShowPath)
+    if (showDetails.path != '') {
+      fetchProviderPath(showDetails.path)
     }
-  }, [ShowProvider, ShowPath])
+  }, [showDetails.path])
+
+  useEffect(() => {
+    console.log(showDetails)
+  }, [showDetails])
+
+  const { data, mutate } = useSWR('mihomoRuleProviders', mihomoRuleProviders)
+  const providers = useMemo(() => {
+    if (!data) return []
+    if (!data.providers) return []
+    return Object.keys(data.providers).map((key) => data.providers[key])
+  }, [data])
+  const [updating, setUpdating] = useState(Array(providers.length).fill(false))
 
   const onUpdate = async (name: string, index: number): Promise<void> => {
     setUpdating((prev) => {
@@ -73,16 +78,13 @@ const RuleProvider: React.FC = () => {
 
   return (
     <SettingCard>
-      {ShowProvider && (
+      {showDetails.show && (
         <Viewer
-          path={ShowPath}
-          type={ShowType}
-          format={ShowFormat}
-          onClose={() => {
-            setShowProvider(false)
-            setShowPath('')
-            setShowType('')
-          }}
+          path={showDetails.path}
+          type={showDetails.type}
+          title={showDetails.title}
+          format={showDetails.format}
+          onClose={() => setShowDetails({ show: false, path: '', type: '', title: '', format: '' })}
         />
       )}
       <SettingItem title="规则集合" divider>
@@ -117,9 +119,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> = (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}