update profile

src/main/config/index.ts

@@ -7,5 +7,9 @@ export {
   getProfileConfig,
   addProfileItem,
   removeProfileItem,
-  createProfile
+  createProfile,
+  getProfileStr,
+  setProfileStr,
+  changeCurrentProfile,
+  updateProfileItem
 } from './profile'

src/main/config/profile.ts

@@ -38,9 +38,21 @@ export async function changeCurrentProfile(id: string): Promise<void> {
   }
 }
 
+export async function updateProfileItem(item: IProfileItem): Promise<void> {
+  const index = profileConfig.items.findIndex((i) => i.id === item.id)
+  profileConfig.items[index] = item
+  fs.writeFileSync(profileConfigPath(), yaml.stringify(profileConfig))
+  window?.webContents.send('profileConfigUpdated')
+}
+
 export async function addProfileItem(item: Partial<IProfileItem>): Promise<void> {
   const newItem = await createProfile(item)
+  if (profileConfig.items.find((i) => i.id === newItem.id)) {
+    updateProfileItem(newItem)
+  } else {
     profileConfig.items.push(newItem)
+  }
+
   if (!getProfileConfig().current) {
     changeCurrentProfile(newItem.id)
   }
@@ -134,7 +146,7 @@ export async function createProfile(item: Partial<IProfileItem>): Promise<IProfi
         if (headers['subscription-userinfo']) {
           newItem.extra = parseSubinfo(headers['subscription-userinfo'])
         }
-        fs.writeFileSync(profilePath(id), data, 'utf-8')
+        setProfileStr(id, data)
       } catch (e) {
         dialog.showErrorBox('Failed to fetch remote profile', `${e}\nurl: ${item.url}`)
         throw new Error(`Failed to fetch remote profile ${e}`)
@@ -150,7 +162,7 @@ export async function createProfile(item: Partial<IProfileItem>): Promise<IProfi
         throw new Error('File is required for local profile')
       }
       const data = item.file
-      fs.writeFileSync(profilePath(id), yaml.stringify(data))
+      setProfileStr(id, data)
       break
     }
   }
@@ -158,13 +170,25 @@ export async function createProfile(item: Partial<IProfileItem>): Promise<IProfi
   return newItem
 }
 
+export function getProfileStr(id: string): string {
+  return fs.readFileSync(profilePath(id), 'utf-8')
+}
+
+export function setProfileStr(id: string, content: string): void {
+  fs.writeFileSync(profilePath(id), content, 'utf-8')
+  if (id === getProfileConfig().current) {
+    getCurrentProfile(true)
+    restartCore()
+  }
+}
+
 export function getCurrentProfile(force = false): Partial<IMihomoConfig> {
   if (force || !currentProfile) {
     const current = getProfileConfig().current
     if (current) {
-      currentProfile = yaml.parse(fs.readFileSync(profilePath(current), 'utf-8'))
+      currentProfile = yaml.parse(getProfileStr(current))
     } else {
-      currentProfile = yaml.parse(fs.readFileSync(profilePath('default'), 'utf-8'))
+      currentProfile = yaml.parse(getProfileStr('default'))
     }
   }
   return currentProfile

src/main/utils/ipc.ts

@@ -23,11 +23,14 @@ import {
   getCurrentProfileItem,
   getProfileItem,
   addProfileItem,
-  removeProfileItem
+  removeProfileItem,
+  changeCurrentProfile,
+  getProfileStr,
+  setProfileStr,
+  updateProfileItem
 } from '../config'
 import { isEncryptionAvailable, restartCore } from '../core/manager'
 import { triggerSysProxy } from '../resolve/sysproxy'
-import { changeCurrentProfile } from '../config/profile'
 
 export function registerIpcMainHandlers(): void {
   ipcMain.handle('mihomoVersion', mihomoVersion)
@@ -52,6 +55,9 @@ export function registerIpcMainHandlers(): void {
   ipcMain.handle('getProfileConfig', (_e, force) => getProfileConfig(force))
   ipcMain.handle('getCurrentProfileItem', getCurrentProfileItem)
   ipcMain.handle('getProfileItem', (_e, id) => getProfileItem(id))
+  ipcMain.handle('getProfileStr', (_e, id) => getProfileStr(id))
+  ipcMain.handle('setProfileStr', (_e, id, str) => setProfileStr(id, str))
+  ipcMain.handle('updateProfileItem', (_e, item) => updateProfileItem(item))
   ipcMain.handle('changeCurrentProfile', (_e, id) => changeCurrentProfile(id))
   ipcMain.handle('addProfileItem', (_e, item) => addProfileItem(item))
   ipcMain.handle('removeProfileItem', (_e, id) => removeProfileItem(id))

src/renderer/src/components/profiles/edit-file-modal.tsx

@@ -0,0 +1,77 @@
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@nextui-org/react'
+import React, { useEffect, useState } from 'react'
+import MonacoEditor, { monaco } from 'react-monaco-editor'
+import { useTheme } from 'next-themes'
+import { getProfileStr, setProfileStr } from '@renderer/utils/ipc'
+interface Props {
+  id: string
+  onClose: () => void
+}
+const EditFileModal: React.FC<Props> = (props) => {
+  const { id, onClose } = props
+  const [currData, setCurrData] = useState('')
+  const { theme } = useTheme()
+
+  const editorDidMount = (editor: monaco.editor.IStandaloneCodeEditor): void => {
+    window.electron.ipcRenderer.on('resize', () => {
+      editor.layout()
+    })
+  }
+
+  const editorWillUnmount = (editor: monaco.editor.IStandaloneCodeEditor): void => {
+    window.electron.ipcRenderer.removeAllListeners('resize')
+    editor.dispose()
+  }
+
+  const getContent = async (): Promise<void> => {
+    setCurrData(await getProfileStr(id))
+  }
+
+  useEffect(() => {
+    getContent()
+  }, [])
+
+  return (
+    <Modal size="5xl" hideCloseButton isOpen={true} scrollBehavior="inside">
+      <ModalContent className="h-full w-[calc(100%-100px)]">
+        <ModalHeader className="flex">编辑订阅</ModalHeader>
+        <ModalBody className="h-full">
+          <MonacoEditor
+            height="100%"
+            language="yaml"
+            value={currData}
+            theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+            options={{
+              minimap: {
+                enabled: false
+              },
+              mouseWheelZoom: true,
+              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"`,
+              fontLigatures: true, // 连字符
+              smoothScrolling: true // 平滑滚动
+            }}
+            editorDidMount={editorDidMount}
+            editorWillUnmount={editorWillUnmount}
+            onChange={(value) => setCurrData(value)}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="light" onPress={onClose}>
+            取消
+          </Button>
+          <Button
+            color="primary"
+            onPress={async () => {
+              await setProfileStr(id, currData)
+              onClose()
+            }}
+          >
+            确认
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default EditFileModal

src/renderer/src/components/profiles/edit-info-modal.tsx

@@ -0,0 +1,79 @@
+import {
+  Modal,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  Input
+} from '@nextui-org/react'
+import React, { useState } from 'react'
+import SettingItem from '../base/base-setting-item'
+interface Props {
+  item: IProfileItem
+  updateProfileItem: (item: IProfileItem) => Promise<void>
+  onClose: () => void
+}
+const EditInfoModal: React.FC<Props> = (props) => {
+  const { item, updateProfileItem, onClose } = props
+  const [values, setValues] = useState(item)
+
+  const onSave = async (): Promise<void> => {
+    await updateProfileItem(values)
+    onClose()
+  }
+
+  return (
+    <Modal hideCloseButton isOpen={true} scrollBehavior="inside">
+      <ModalContent>
+        <ModalHeader className="flex">编辑信息</ModalHeader>
+        <ModalBody>
+          <SettingItem title="名称">
+            <Input
+              size="sm"
+              className="w-[200px]"
+              value={values.name}
+              onValueChange={(v) => {
+                setValues({ ...values, name: v })
+              }}
+            />
+          </SettingItem>
+          {values.url && (
+            <SettingItem title="订阅地址">
+              <Input
+                size="sm"
+                className="w-[200px]"
+                value={values.url}
+                onValueChange={(v) => {
+                  setValues({ ...values, url: v })
+                }}
+              />
+            </SettingItem>
+          )}
+
+          <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}>
+            取消
+          </Button>
+          <Button color="primary" onPress={onSave}>
+            保存
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default EditInfoModal

src/renderer/src/components/profiles/profile-item.tsx

@@ -12,11 +12,15 @@ import {
 import { calcPercent, calcTraffic } from '@renderer/utils/calc'
 import { IoMdMore, IoMdRefresh } from 'react-icons/io'
 import dayjs from 'dayjs'
-import React, { Key, useMemo } from 'react'
+import React, { Key, useMemo, useState } from 'react'
+import EditFileModal from './edit-file-modal'
+import EditInfoModal from './edit-info-modal'
 
 interface Props {
   info: IProfileItem
   isCurrent: boolean
+  addProfileItem: (item: Partial<IProfileItem>) => Promise<void>
+  updateProfileItem: (item: IProfileItem) => Promise<void>
   removeProfileItem: (id: string) => Promise<void>
   mutateProfileConfig: () => void
   onClick: () => Promise<void>
@@ -30,15 +34,33 @@ interface MenuItem {
   className: string
 }
 const ProfileItem: React.FC<Props> = (props) => {
-  const { info, removeProfileItem, mutateProfileConfig, onClick, isCurrent } = props
+  const {
+    info,
+    addProfileItem,
+    removeProfileItem,
+    mutateProfileConfig,
+    updateProfileItem,
+    onClick,
+    isCurrent
+  } = props
   const extra = info?.extra
   const usage = (extra?.upload ?? 0) + (extra?.download ?? 0)
   const total = extra?.total ?? 0
+  const [updating, setUpdating] = useState(false)
+  const [openInfo, setOpenInfo] = useState(false)
+  const [openFile, setOpenFile] = useState(false)
 
   const menuItems: MenuItem[] = useMemo(() => {
     const list = [
       {
-        key: 'edit',
+        key: 'edit-info',
+        label: '编辑信息',
+        showDivider: false,
+        color: 'default',
+        className: ''
+      } as MenuItem,
+      {
+        key: 'edit-file',
         label: '编辑文件',
         showDivider: true,
         color: 'default',
@@ -66,8 +88,14 @@ const ProfileItem: React.FC<Props> = (props) => {
 
   const onMenuAction = (key: Key): void => {
     switch (key) {
-      case 'edit':
+      case 'edit-info': {
+        setOpenInfo(true)
         break
+      }
+      case 'edit-file': {
+        setOpenFile(true)
+        break
+      }
       case 'delete': {
         removeProfileItem(info.id)
         mutateProfileConfig()
@@ -82,6 +110,15 @@ const ProfileItem: React.FC<Props> = (props) => {
   }
 
   return (
+    <>
+      {openFile && <EditFileModal id={info.id} onClose={() => setOpenFile(false)} />}
+      {openInfo && (
+        <EditInfoModal
+          item={info}
+          onClose={() => setOpenInfo(false)}
+          updateProfileItem={updateProfileItem}
+        />
+      )}
       <Card fullWidth isPressable onPress={onClick} className={isCurrent ? 'bg-primary' : ''}>
         <CardBody className="pb-1">
           <div className="flex justify-between h-[32px]">
@@ -89,8 +126,23 @@ const ProfileItem: React.FC<Props> = (props) => {
               {info?.name}
             </h3>
             <div className="flex">
-            <Button isIconOnly size="sm" variant="light" color="default">
+              <Button
-              <IoMdRefresh color="default" className="text-[24px]" />
+                isIconOnly
+                size="sm"
+                variant="light"
+                color="default"
+                disabled={updating}
+                onPress={() => {
+                  setUpdating(true)
+                  addProfileItem(info).finally(() => {
+                    setUpdating(false)
+                  })
+                }}
+              >
+                <IoMdRefresh
+                  color="default"
+                  className={`text-[24px] ${updating ? 'animate-spin' : ''}`}
+                />
               </Button>
               <Dropdown>
                 <DropdownTrigger>
@@ -128,6 +180,7 @@ const ProfileItem: React.FC<Props> = (props) => {
           )}
         </CardFooter>
       </Card>
+    </>
   )
 }
 

src/renderer/src/components/sider/profile-card.tsx

@@ -6,6 +6,7 @@ import { IoMdRefresh } from 'react-icons/io'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import 'dayjs/locale/zh-cn'
 import dayjs from 'dayjs'
+import { useState } from 'react'
 
 dayjs.extend(relativeTime)
 dayjs.locale('zh-cn')
@@ -14,8 +15,8 @@ const ProfileCard: React.FC = () => {
   const navigate = useNavigate()
   const location = useLocation()
   const match = location.pathname.includes('/profiles')
-
+  const [updating, setUpdating] = useState(false)
-  const { profileConfig } = useProfileConfig()
+  const { profileConfig, addProfileItem } = useProfileConfig()
   const { current, items } = profileConfig ?? {}
   const info = items?.find((item) => item.id === current) ?? {
     id: 'default',
@@ -39,8 +40,23 @@ const ProfileCard: React.FC = () => {
           <h3 className="select-none text-ellipsis whitespace-nowrap overflow-hidden text-md font-bold leading-[32px]">
             {info?.name}
           </h3>
-          <Button isIconOnly size="sm" variant="light" color="default">
+          <Button
-            <IoMdRefresh color="default" className="text-[24px]" />
+            isIconOnly
+            size="sm"
+            disabled={updating}
+            variant="light"
+            color="default"
+            onPress={() => {
+              setUpdating(true)
+              addProfileItem(info).finally(() => {
+                setUpdating(false)
+              })
+            }}
+          >
+            <IoMdRefresh
+              color="default"
+              className={`text-[24px] ${updating ? 'animate-spin' : ''}`}
+            />
           </Button>
         </div>
         <div className="mt-2 flex justify-between">

src/renderer/src/hooks/use-profile-config.tsx

@@ -3,6 +3,7 @@ import {
   getProfileConfig,
   addProfileItem as add,
   removeProfileItem as remove,
+  updateProfileItem as update,
   changeCurrentProfile as change
 } from '@renderer/utils/ipc'
 import { useEffect } from 'react'
@@ -11,6 +12,7 @@ interface RetuenType {
   profileConfig: IProfileConfig | undefined
   mutateProfileConfig: () => void
   addProfileItem: (item: Partial<IProfileItem>) => Promise<void>
+  updateProfileItem: (item: IProfileItem) => Promise<void>
   removeProfileItem: (id: string) => Promise<void>
   changeCurrentProfile: (id: string) => Promise<void>
 }
@@ -30,6 +32,11 @@ export const useProfileConfig = (): RetuenType => {
     mutateProfileConfig()
   }
 
+  const updateProfileItem = async (item: IProfileItem): Promise<void> => {
+    await update(item)
+    mutateProfileConfig()
+  }
+
   const changeCurrentProfile = async (id: string): Promise<void> => {
     await change(id)
     mutateProfileConfig()
@@ -49,6 +56,7 @@ export const useProfileConfig = (): RetuenType => {
     mutateProfileConfig,
     addProfileItem,
     removeProfileItem,
+    updateProfileItem,
     changeCurrentProfile
   }
 }

src/renderer/src/pages/profiles.tsx

@@ -9,6 +9,7 @@ const Profiles: React.FC = () => {
   const {
     profileConfig,
     addProfileItem,
+    updateProfileItem,
     removeProfileItem,
     changeCurrentProfile,
     mutateProfileConfig
@@ -61,8 +62,10 @@ const Profiles: React.FC = () => {
           <ProfileItem
             key={item.id}
             isCurrent={item.id === current}
+            addProfileItem={addProfileItem}
             removeProfileItem={removeProfileItem}
             mutateProfileConfig={mutateProfileConfig}
+            updateProfileItem={updateProfileItem}
             info={item}
             onClick={async () => {
               await changeCurrentProfile(item.id)

src/renderer/src/utils/ipc.ts

@@ -99,6 +99,18 @@ export async function removeProfileItem(id: string): Promise<void> {
   return await window.electron.ipcRenderer.invoke('removeProfileItem', id)
 }
 
+export async function updateProfileItem(item: IProfileItem): Promise<void> {
+  return await window.electron.ipcRenderer.invoke('updateProfileItem', item)
+}
+
+export async function getProfileStr(id: string): Promise<string> {
+  return await window.electron.ipcRenderer.invoke('getProfileStr', id)
+}
+
+export async function setProfileStr(id: string, str: string): Promise<void> {
+  return await window.electron.ipcRenderer.invoke('setProfileStr', id, str)
+}
+
 export async function restartCore(): Promise<void> {
   return await window.electron.ipcRenderer.invoke('restartCore')
 }