From fd86c0dba42c177a3517c89b1a53798fcb6515eb Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Wed, 7 Aug 2024 21:21:04 +0800
Subject: [PATCH] support local profile

---
 src/main/config/profile.ts                    |  2 +-
 src/main/utils/ipc.ts                         |  4 +-
 .../src/components/base/base-page.tsx         | 14 ++--
 .../components/profiles/edit-info-modal.tsx   | 25 +++----
 .../src/components/profiles/profile-item.tsx  | 65 ++++++++++++-------
 .../src/components/sider/profile-card.tsx     | 65 ++++++++++++-------
 .../components/sider/sysproxy-switcher.tsx    |  2 +-
 src/renderer/src/pages/profiles.tsx           | 50 +++++++++++++-
 8 files changed, 157 insertions(+), 70 deletions(-)

diff --git a/src/main/config/profile.ts b/src/main/config/profile.ts
index 7055f53..1df3271 100644
--- a/src/main/config/profile.ts
+++ b/src/main/config/profile.ts
@@ -105,7 +105,7 @@ export async function createProfile(item: Partial<IProfileItem>): Promise<IProfi
   const newItem = {
     id,
     name: item.name || (item.type === 'remote' ? 'Remote File' : 'Local File'),
-    type: item.type || 'local',
+    type: item.type,
     url: item.url,
     interval: item.interval || 0,
     updated: new Date().getTime()
diff --git a/src/main/utils/ipc.ts b/src/main/utils/ipc.ts
index b039f9a..60cbad7 100644
--- a/src/main/utils/ipc.ts
+++ b/src/main/utils/ipc.ts
@@ -94,14 +94,14 @@ async function setupFirewall(): Promise<void> {
       try {
         execSync(removeCommand, { shell: 'powershell' })
       } catch {
-        console.log('Remove-NetFirewallRule Failed')
+        console.error('Remove-NetFirewallRule Failed')
       }
       try {
         execSync(createCommand, { shell: 'powershell' })
       } catch (e) {
         dialog.showErrorBox('防火墙设置失败', `${e}`)
         reject(e)
-        console.log('New-NetFirewallRule Failed')
+        console.error('New-NetFirewallRule Failed')
       }
     }
     resolve()
diff --git a/src/renderer/src/components/base/base-page.tsx b/src/renderer/src/components/base/base-page.tsx
index f726076..9aa49ba 100644
--- a/src/renderer/src/components/base/base-page.tsx
+++ b/src/renderer/src/components/base/base-page.tsx
@@ -1,5 +1,5 @@
 import { Divider } from '@nextui-org/react'
-import React from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
 interface Props {
   title?: React.ReactNode
   header?: React.ReactNode
@@ -7,9 +7,14 @@ interface Props {
   contentClassName?: string
 }
 
-const BasePage: React.FC<Props> = (props) => {
+const BasePage = forwardRef<HTMLDivElement, Props>((props, ref) => {
+  const contentRef = useRef<HTMLDivElement>(null)
+  useImperativeHandle(ref, () => {
+    return contentRef.current as HTMLDivElement
+  })
+
   return (
-    <div className="w-full h-full overflow-y-auto custom-scrollbar">
+    <div ref={contentRef} className="w-full h-full overflow-y-auto custom-scrollbar">
       <div className="sticky top-0 z-40 h-[48px] w-full backdrop-blur bg-background/40">
         <div className="p-2 flex justify-between">
           <div className="select-none title h-full text-lg leading-[32px]">{props.title}</div>
@@ -20,6 +25,7 @@ const BasePage: React.FC<Props> = (props) => {
       <div className="content">{props.children}</div>
     </div>
   )
-}
+})
 
+BasePage.displayName = 'BasePage'
 export default BasePage
diff --git a/src/renderer/src/components/profiles/edit-info-modal.tsx b/src/renderer/src/components/profiles/edit-info-modal.tsx
index c9e1f72..f61c97d 100644
--- a/src/renderer/src/components/profiles/edit-info-modal.tsx
+++ b/src/renderer/src/components/profiles/edit-info-modal.tsx
@@ -50,18 +50,19 @@ const EditInfoModal: React.FC<Props> = (props) => {
               />
             </SettingItem>
           )}
-
-          <SettingItem title="更新间隔（分钟）">
-            <Input
-              size="sm"
-              type="number"
-              className="w-[200px]"
-              value={values.interval?.toString() ?? ''}
-              onValueChange={(v) => {
-                setValues({ ...values, interval: parseInt(v) })
-              }}
-            />
-          </SettingItem>
+          {values.type === 'remote' && (
+            <SettingItem title="更新间隔（分钟）">
+              <Input
+                size="sm"
+                type="number"
+                className="w-[200px]"
+                value={values.interval?.toString() ?? ''}
+                onValueChange={(v) => {
+                  setValues({ ...values, interval: parseInt(v) })
+                }}
+              />
+            </SettingItem>
+          )}
         </ModalBody>
         <ModalFooter>
           <Button variant="light" onPress={onClose}>
diff --git a/src/renderer/src/components/profiles/profile-item.tsx b/src/renderer/src/components/profiles/profile-item.tsx
index c476c1e..ff5bb76 100644
--- a/src/renderer/src/components/profiles/profile-item.tsx
+++ b/src/renderer/src/components/profiles/profile-item.tsx
@@ -3,6 +3,7 @@ import {
   Card,
   CardBody,
   CardFooter,
+  Chip,
   Dropdown,
   DropdownItem,
   DropdownMenu,
@@ -139,24 +140,27 @@ const ProfileItem: React.FC<Props> = (props) => {
               {info?.name}
             </h3>
             <div className="flex">
-              <Button
-                isIconOnly
-                size="sm"
-                variant="light"
-                color="default"
-                disabled={updating}
-                onPress={() => {
-                  setUpdating(true)
-                  addProfileItem(info).finally(() => {
-                    setUpdating(false)
-                  })
-                }}
-              >
-                <IoMdRefresh
+              {info.type === 'remote' && (
+                <Button
+                  isIconOnly
+                  size="sm"
+                  variant="light"
                   color="default"
-                  className={`${isCurrent ? 'text-white' : 'text-foreground'} text-[24px] ${updating ? 'animate-spin' : ''}`}
-                />
-              </Button>
+                  disabled={updating}
+                  onPress={() => {
+                    setUpdating(true)
+                    addProfileItem(info).finally(() => {
+                      setUpdating(false)
+                    })
+                  }}
+                >
+                  <IoMdRefresh
+                    color="default"
+                    className={`${isCurrent ? 'text-white' : 'text-foreground'} text-[24px] ${updating ? 'animate-spin' : ''}`}
+                  />
+                </Button>
+              )}
+
               <Dropdown>
                 <DropdownTrigger>
                   <Button isIconOnly size="sm" variant="light" color="default">
@@ -181,12 +185,27 @@ const ProfileItem: React.FC<Props> = (props) => {
               </Dropdown>
             </div>
           </div>
-          <div
-            className={`mt-2 flex select-none justify-between ${isCurrent ? 'text-white' : 'text-foreground'}`}
-          >
-            <small>{extra ? `${calcTraffic(usage)}/${calcTraffic(total)}` : undefined}</small>
-            <small>{dayjs(info.updated).fromNow()}</small>
-          </div>
+          {info.type === 'remote' && (
+            <div
+              className={`mt-2 flex select-none justify-between ${isCurrent ? 'text-white' : 'text-foreground'}`}
+            >
+              <small>{extra ? `${calcTraffic(usage)}/${calcTraffic(total)}` : undefined}</small>
+              <small>{dayjs(info.updated).fromNow()}</small>
+            </div>
+          )}
+          {info.type === 'local' && (
+            <div
+              className={`mt-2 flex select-none justify-between ${isCurrent ? 'text-white' : 'text-foreground'}`}
+            >
+              <Chip
+                size="sm"
+                variant="bordered"
+                className={`${isCurrent ? 'text-white border-white' : 'border-primary text-primary'}`}
+              >
+                本地
+              </Chip>
+            </div>
+          )}
         </CardBody>
         <CardFooter className="pt-0">
           {extra && (
diff --git a/src/renderer/src/components/sider/profile-card.tsx b/src/renderer/src/components/sider/profile-card.tsx
index d05e233..e5bc7f7 100644
--- a/src/renderer/src/components/sider/profile-card.tsx
+++ b/src/renderer/src/components/sider/profile-card.tsx
@@ -1,4 +1,4 @@
-import { Button, Card, CardBody, CardFooter, Progress } from '@nextui-org/react'
+import { Button, Card, CardBody, CardFooter, Chip, Progress } from '@nextui-org/react'
 import { useProfileConfig } from '@renderer/hooks/use-profile-config'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { calcTraffic, calcPercent } from '@renderer/utils/calc'
@@ -42,30 +42,47 @@ const ProfileCard: React.FC = () => {
           >
             {info?.name}
           </h3>
-          <Button
-            isIconOnly
-            size="sm"
-            disabled={updating}
-            variant="light"
-            color="default"
-            onPress={() => {
-              setUpdating(true)
-              addProfileItem(info).finally(() => {
-                setUpdating(false)
-              })
-            }}
+          {info.type === 'remote' && (
+            <Button
+              isIconOnly
+              size="sm"
+              disabled={updating}
+              variant="light"
+              color="default"
+              onPress={() => {
+                setUpdating(true)
+                addProfileItem(info).finally(() => {
+                  setUpdating(false)
+                })
+              }}
+            >
+              <IoMdRefresh
+                className={`text-[24px] ${match ? 'text-white' : 'text-foreground'} ${updating ? 'animate-spin' : ''}`}
+              />
+            </Button>
+          )}
+        </div>
+        {info.type === 'remote' && (
+          <div
+            className={`mt-2 flex select-none justify-between ${match ? 'text-white' : 'text-foreground'} `}
           >
-            <IoMdRefresh
-              className={`text-[24px] ${match ? 'text-white' : 'text-foreground'} ${updating ? 'animate-spin' : ''}`}
-            />
-          </Button>
-        </div>
-        <div
-          className={`mt-2 flex select-none justify-between ${match ? 'text-white' : 'text-foreground'} `}
-        >
-          <small>{extra ? `${calcTraffic(usage)}/${calcTraffic(total)}` : undefined}</small>
-          <small>{dayjs(info.updated).fromNow()}</small>
-        </div>
+            <small>{extra ? `${calcTraffic(usage)}/${calcTraffic(total)}` : undefined}</small>
+            <small>{dayjs(info.updated).fromNow()}</small>
+          </div>
+        )}
+        {info.type === 'local' && (
+          <div
+            className={`mt-2 flex select-none justify-between ${match ? 'text-white' : 'text-foreground'}`}
+          >
+            <Chip
+              size="sm"
+              variant="bordered"
+              className={`${match ? 'text-white border-white' : 'border-primary text-primary'}`}
+            >
+              本地
+            </Chip>
+          </div>
+        )}
       </CardBody>
       <CardFooter className="pt-0">
         {extra && (
diff --git a/src/renderer/src/components/sider/sysproxy-switcher.tsx b/src/renderer/src/components/sider/sysproxy-switcher.tsx
index faca5ac..989ce3c 100644
--- a/src/renderer/src/components/sider/sysproxy-switcher.tsx
+++ b/src/renderer/src/components/sider/sysproxy-switcher.tsx
@@ -19,7 +19,7 @@ const SysproxySwitcher: React.FC = () => {
       await triggerSysProxy(enable)
       await patchAppConfig({ sysProxy: { enable } })
     } catch (e) {
-      console.log(e)
+      console.error(e)
     }
   }
 
diff --git a/src/renderer/src/pages/profiles.tsx b/src/renderer/src/pages/profiles.tsx
index 82a7f0d..c7ff404 100644
--- a/src/renderer/src/pages/profiles.tsx
+++ b/src/renderer/src/pages/profiles.tsx
@@ -2,7 +2,7 @@ import { Button, Input } from '@nextui-org/react'
 import BasePage from '@renderer/components/base/base-page'
 import ProfileItem from '@renderer/components/profiles/profile-item'
 import { useProfileConfig } from '@renderer/hooks/use-profile-config'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { MdContentPaste } from 'react-icons/md'
 
 const Profiles: React.FC = () => {
@@ -16,6 +16,7 @@ const Profiles: React.FC = () => {
   } = useProfileConfig()
   const { current, items } = profileConfig || {}
   const [importing, setImporting] = useState(false)
+  const [fileOver, setFileOver] = useState(false)
   const [url, setUrl] = useState('')
 
   const handleImport = async (): Promise<void> => {
@@ -26,9 +27,50 @@ const Profiles: React.FC = () => {
       setImporting(false)
     }
   }
+  const pageRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    pageRef.current?.addEventListener('dragover', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setFileOver(true)
+    })
+    pageRef.current?.addEventListener('dragleave', (e) => {
+      e.preventDefault()
+      e.stopPropagation()
+      setFileOver(false)
+    })
+    pageRef.current?.addEventListener('drop', (event) => {
+      event.preventDefault()
+      event.stopPropagation()
+      if (event.dataTransfer?.files) {
+        const file = event.dataTransfer.files[0]
+        if (file.name.endsWith('.yml') || file.name.endsWith('.yaml')) {
+          const reader = new FileReader()
+          reader.onload = async (e): Promise<void> => {
+            const content = e.target?.result as string
+            try {
+              await addProfileItem({ name: file.name, type: 'local', file: content })
+            } finally {
+              setFileOver(false)
+            }
+          }
+          reader.readAsText(file)
+        } else {
+          alert('不支持的文件类型')
+        }
+      }
+      setFileOver(false)
+    })
+    return (): void => {
+      pageRef.current?.removeEventListener('dragover', () => {})
+      pageRef.current?.removeEventListener('dragleave', () => {})
+      pageRef.current?.removeEventListener('drop', () => {})
+    }
+  }, [])
 
   return (
-    <BasePage title="订阅管理">
+    <BasePage ref={pageRef} title="订阅管理">
       <div className="sticky top-[48px] z-40 backdrop-blur bg-background/40 flex p-2">
         <Input
           variant="bordered"
@@ -61,7 +103,9 @@ const Profiles: React.FC = () => {
           导入
         </Button>
       </div>
-      <div className="grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 mx-2">
+      <div
+        className={`${fileOver ? 'blur-sm' : ''} grid sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 mx-2`}
+      >
         {items?.map((item) => (
           <ProfileItem
             key={item.id}