Migrate NextUI to HeroUI

.npmrc

@@ -1,3 +1,3 @@
 shamefully-hoist=true
 virtual-store-dir-max-length=80
-public-hoist-pattern[]=*@nextui-org/*
+public-hoist-pattern[]=*@heroui/*

package.json

@@ -25,8 +25,8 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
+    "@heroui/react": "^2.6.13",
     "@mihomo-party/sysproxy": "^2.0.7",
-    "@nextui-org/react": "2.6.10",
     "@types/crypto-js": "^4.2.2",
     "adm-zip": "^0.5.16",
     "axios": "^1.7.7",

src/renderer/src/App.tsx

@@ -4,7 +4,7 @@ import { NavigateFunction, useLocation, useNavigate, useRoutes } from 'react-rou
 import OutboundModeSwitcher from '@renderer/components/sider/outbound-mode-switcher'
 import SysproxySwitcher from '@renderer/components/sider/sysproxy-switcher'
 import TunSwitcher from '@renderer/components/sider/tun-switcher'
-import { Button, Divider } from '@nextui-org/react'
+import { Button, Divider } from '@heroui/react'
 import { IoSettings } from 'react-icons/io5'
 import routes from '@renderer/routes'
 import {

src/renderer/src/assets/main.css

@@ -8,22 +8,22 @@
 }
 
 .driver-popover {
-  background-color: hsl(var(--nextui-content2)) !important;
+  background-color: hsl(var(--heroui-content2)) !important;
   border-radius: 8px !important;
-  color: hsl(var(--nextui-foreground)) !important;
+  color: hsl(var(--heroui-foreground)) !important;
 }
 
 .driver-popover a {
-  color: hsl(var(--nextui-primary)) !important;
+  color: hsl(var(--heroui-primary)) !important;
   text-decoration: underline !important;
 }
 
 .driver-popover-close-btn {
-  color: hsl(var(--nextui-foreground)) !important;
+  color: hsl(var(--heroui-foreground)) !important;
 }
 
 .driver-popover-progress-text {
-  color: hsl(var(--nextui-default-500)) !important;
+  color: hsl(var(--heroui-default-500)) !important;
 }
 
 .driver-popover-prev-btn {
@@ -33,7 +33,7 @@
   padding: 8px !important;
   border-radius: 5px !important;
   font-size: 12px !important;
-  background-color: hsl(var(--nextui-primary)) !important;
+  background-color: hsl(var(--heroui-primary)) !important;
 }
 
 .driver-popover-next-btn {
@@ -43,23 +43,23 @@
   padding: 8px !important;
   border-radius: 5px !important;
   font-size: 12px !important;
-  background-color: hsl(var(--nextui-primary)) !important;
+  background-color: hsl(var(--heroui-primary)) !important;
 }
 
 .driver-popover-arrow-side-bottom {
-  border-bottom-color: hsl(var(--nextui-content2)) !important;
+  border-bottom-color: hsl(var(--heroui-content2)) !important;
 }
 
 .driver-popover-arrow-side-top {
-  border-top-color: hsl(var(--nextui-content2)) !important;
+  border-top-color: hsl(var(--heroui-content2)) !important;
 }
 
 .driver-popover-arrow-side-left {
-  border-left-color: hsl(var(--nextui-content2)) !important;
+  border-left-color: hsl(var(--heroui-content2)) !important;
 }
 
 .driver-popover-arrow-side-right {
-  border-right-color: hsl(var(--nextui-content2)) !important;
+  border-right-color: hsl(var(--heroui-content2)) !important;
 }
 
 .app-nodrag {

src/renderer/src/components/base/base-error-boundary.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@nextui-org/react'
+import { Button } from '@heroui/react'
 import { ReactNode } from 'react'
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary'
 

src/renderer/src/components/base/base-page.tsx

@@ -1,4 +1,4 @@
-import { Button, Divider } from '@nextui-org/react'
+import { Button, Divider } from '@heroui/react'
 import { useAppConfig } from '@renderer/hooks/use-app-config'
 import { platform } from '@renderer/utils/init'
 import { isAlwaysOnTop, setAlwaysOnTop } from '@renderer/utils/ipc'

src/renderer/src/components/base/base-password-modal.tsx

@@ -6,7 +6,7 @@ import {
   ModalFooter,
   Button,
   Input
-} from '@nextui-org/react'
+} from '@heroui/react'
 import React, { useState } from 'react'
 
 interface Props {
@@ -21,7 +21,7 @@ const BasePasswordModal: React.FC<Props> = (props) => {
   return (
     <Modal backdrop="blur" classNames={{ backdrop: 'top-[48px]' }} hideCloseButton isOpen={true}>
       <ModalContent>
-        <ModalHeader className="flex app-drag">请输入root密码</ModalHeader>
+        <ModalHeader className="flex app-drag">请输入 root 密码</ModalHeader>
         <ModalBody>
           <Input fullWidth type="password" value={password} onValueChange={setPassword} />
         </ModalBody>

src/renderer/src/components/base/base-setting-card.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Accordion, AccordionItem, Card, CardBody } from '@nextui-org/react'
+import { Accordion, AccordionItem, Card, CardBody } from '@heroui/react'
 
 interface Props {
   title?: string

src/renderer/src/components/base/base-setting-item.tsx

@@ -1,4 +1,4 @@
-import { Divider } from '@nextui-org/react'
+import { Divider } from '@heroui/react'
 
 import React from 'react'
 

src/renderer/src/components/base/border-swtich.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { cn, Switch, SwitchProps } from '@nextui-org/react'
+import { cn, Switch, SwitchProps } from '@heroui/react'
 import './border-switch.css'
 
 interface SiderSwitchProps extends SwitchProps {

src/renderer/src/components/base/collapse-input.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { Input, InputProps } from '@nextui-org/react'
+import { Input, InputProps } from '@heroui/react'
 import { FaSearch } from 'react-icons/fa'
 
 interface CollapseInputProps extends InputProps {

src/renderer/src/components/connections/connection-detail-modal.tsx

@@ -9,7 +9,7 @@ import {
   DropdownTrigger,
   DropdownMenu,
   DropdownItem
-} from '@nextui-org/react'
+} from '@heroui/react'
 import React from 'react'
 import SettingItem from '../base/base-setting-item'
 import { calcTraffic } from '@renderer/utils/calc'

src/renderer/src/components/connections/connection-item.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, CardFooter, CardHeader, Chip } from '@nextui-org/react'
+import { Button, Card, CardFooter, CardHeader, Chip } from '@heroui/react'
 import { calcTraffic } from '@renderer/utils/calc'
 import dayjs from 'dayjs'
 import React, { useEffect } from 'react'

src/renderer/src/components/logs/log-item.tsx

@@ -1,4 +1,4 @@
-import { Card, CardBody, CardHeader } from '@nextui-org/react'
+import { Card, CardBody, CardHeader } from '@heroui/react'
 import React from 'react'
 
 const colorMap = {

src/renderer/src/components/mihomo/interface-modal.tsx

@@ -6,7 +6,7 @@ import {
   ModalFooter,
   Button,
   Snippet
-} from '@nextui-org/react'
+} from '@heroui/react'
 import React, { useEffect, useState } from 'react'
 import { getInterfaces } from '@renderer/utils/ipc'
 interface Props {

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

@@ -1,4 +1,4 @@
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@nextui-org/react'
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@heroui/react'
 import React, { useEffect, useState } from 'react'
 import { BaseEditor } from '../base/base-editor'
 import { getOverride, restartCore, setOverride } from '@renderer/utils/ipc'

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

@@ -7,7 +7,7 @@ import {
   Button,
   Input,
   Switch
-} from '@nextui-org/react'
+} from '@heroui/react'
 import React, { useState } from 'react'
 import SettingItem from '../base/base-setting-item'
 import { restartCore } from '@renderer/utils/ipc'

src/renderer/src/components/override/exec-log-modal.tsx

@@ -6,7 +6,7 @@ import {
   ModalFooter,
   Button,
   Divider
-} from '@nextui-org/react'
+} from '@heroui/react'
 import React, { useEffect, useState } from 'react'
 import { getOverride } from '@renderer/utils/ipc'
 interface Props {

src/renderer/src/components/override/override-item.tsx

@@ -7,7 +7,7 @@ import {
   DropdownItem,
   DropdownMenu,
   DropdownTrigger
-} from '@nextui-org/react'
+} from '@heroui/react'
 import { IoMdMore, IoMdRefresh } from 'react-icons/io'
 import dayjs from 'dayjs'
 import React, { Key, useEffect, useMemo, useState } from 'react'

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

@@ -1,4 +1,4 @@
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@nextui-org/react'
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@heroui/react'
 import React, { useEffect, useState } from 'react'
 import { BaseEditor } from '../base/base-editor'
 import { getProfileStr, setProfileStr } from '@renderer/utils/ipc'

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

@@ -12,7 +12,7 @@ import {
   DropdownTrigger,
   DropdownMenu,
   DropdownItem
-} from '@nextui-org/react'
+} from '@heroui/react'
 import React, { useState } from 'react'
 import SettingItem from '../base/base-setting-item'
 import { useOverrideConfig } from '@renderer/hooks/use-override-config'

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

@@ -10,7 +10,7 @@ import {
   DropdownTrigger,
   Progress,
   Tooltip
-} from '@nextui-org/react'
+} from '@heroui/react'
 import { calcPercent, calcTraffic } from '@renderer/utils/calc'
 import { IoMdMore, IoMdRefresh } from 'react-icons/io'
 import dayjs from 'dayjs'

src/renderer/src/components/proxies/proxy-item.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, CardBody } from '@nextui-org/react'
+import { Button, Card, CardBody } from '@heroui/react'
 import { mihomoUnfixedProxy } from '@renderer/utils/ipc'
 import React, { useMemo, useState } from 'react'
 import { FaMapPin } from 'react-icons/fa6'

src/renderer/src/components/resources/geo-data.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, Switch, Tab, Tabs } from '@nextui-org/react'
+import { Button, Input, Switch, Tab, Tabs } from '@heroui/react'
 import SettingCard from '@renderer/components/base/base-setting-card'
 import SettingItem from '@renderer/components/base/base-setting-item'
 import { useControledMihomoConfig } from '@renderer/hooks/use-controled-mihomo-config'

src/renderer/src/components/resources/proxy-provider.tsx

@@ -8,7 +8,7 @@ import Viewer from './viewer'
 import useSWR from 'swr'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
-import { Button, Chip } from '@nextui-org/react'
+import { Button, Chip } from '@heroui/react'
 import { IoMdRefresh } from 'react-icons/io'
 import { CgLoadbarDoc } from 'react-icons/cg'
 import { MdEditDocument } from 'react-icons/md'

src/renderer/src/components/resources/rule-provider.tsx

@@ -9,7 +9,7 @@ import { Fragment, useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
-import { Button, Chip } from '@nextui-org/react'
+import { Button, Chip } from '@heroui/react'
 import { IoMdRefresh } from 'react-icons/io'
 import { CgLoadbarDoc } from 'react-icons/cg'
 import { MdEditDocument } from 'react-icons/md'

src/renderer/src/components/resources/viewer.tsx

@@ -1,4 +1,4 @@
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@nextui-org/react'
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@heroui/react'
 import React, { useEffect, useState } from 'react'
 import { BaseEditor } from '../base/base-editor'
 import { getFileStr, setFileStr } from '@renderer/utils/ipc'

src/renderer/src/components/rules/rule-item.tsx

@@ -1,4 +1,4 @@
-import { Card, CardBody } from '@nextui-org/react'
+import { Card, CardBody } from '@heroui/react'
 import React from 'react'
 
 const RuleItem: React.FC<IMihomoRulesDetail & { index: number }> = (props) => {

src/renderer/src/components/settings/actions.tsx

@@ -1,4 +1,4 @@
-import { Button, Tooltip } from '@nextui-org/react'
+import { Button, Tooltip } from '@heroui/react'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
 import {

src/renderer/src/components/settings/css-editor-modal.tsx

@@ -1,4 +1,4 @@
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@nextui-org/react'
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@heroui/react'
 import { BaseEditor } from '@renderer/components/base/base-editor'
 import { readTheme } from '@renderer/utils/ipc'
 import React, { useEffect, useState } from 'react'

src/renderer/src/components/settings/general-config.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
-import { Button, Input, Select, SelectItem, Switch, Tab, Tabs, Tooltip } from '@nextui-org/react'
+import { Button, Input, Select, SelectItem, Switch, Tab, Tabs, Tooltip } from '@heroui/react'
 import { BiCopy, BiSolidFileImport } from 'react-icons/bi'
 import useSWR from 'swr'
 import {

src/renderer/src/components/settings/mihomo-config.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
-import { Button, Input, Select, SelectItem, Switch, Tooltip } from '@nextui-org/react'
+import { Button, Input, Select, SelectItem, Switch, Tooltip } from '@heroui/react'
 import { useAppConfig } from '@renderer/hooks/use-app-config'
 import debounce from '@renderer/utils/debounce'
 import { getGistUrl, patchControledMihomoConfig, restartCore } from '@renderer/utils/ipc'

src/renderer/src/components/settings/shortcut-config.tsx

@@ -1,4 +1,4 @@
-import { Button, Input } from '@nextui-org/react'
+import { Button, Input } from '@heroui/react'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
 import { useAppConfig } from '@renderer/hooks/use-app-config'

src/renderer/src/components/settings/sider-config.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
-import { RadioGroup, Radio } from '@nextui-org/react'
+import { RadioGroup, Radio } from '@heroui/react'
 import { useAppConfig } from '@renderer/hooks/use-app-config'
 const titleMap = {
   sysproxyCardStatus: '系统代理',

src/renderer/src/components/settings/substore-config.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import SettingCard from '@renderer/components/base/base-setting-card'
 import SettingItem from '@renderer/components/base/base-setting-item'
-import { Button, Input, Switch } from '@nextui-org/react'
+import { Button, Input, Switch } from '@heroui/react'
 import {
   startSubStoreFrontendServer,
   startSubStoreBackendServer,

src/renderer/src/components/settings/webdav-config.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import SettingCard from '../base/base-setting-card'
 import SettingItem from '../base/base-setting-item'
-import { Button, Input } from '@nextui-org/react'
+import { Button, Input } from '@heroui/react'
 import { listWebdavBackups, webdavBackup } from '@renderer/utils/ipc'
 import WebdavRestoreModal from './webdav-restore-modal'
 import debounce from '@renderer/utils/debounce'

src/renderer/src/components/settings/webdav-restore-modal.tsx

@@ -1,4 +1,4 @@
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@nextui-org/react'
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@heroui/react'
 import { relaunchApp, webdavDelete, webdavRestore } from '@renderer/utils/ipc'
 import React, { useState } from 'react'
 import { MdDeleteForever } from 'react-icons/md'

src/renderer/src/components/sider/config-viewer.tsx

@@ -1,4 +1,4 @@
-import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@nextui-org/react'
+import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Button } from '@heroui/react'
 import React, { useEffect, useState } from 'react'
 import { BaseEditor } from '../base/base-editor'
 import { getRuntimeConfigStr } from '@renderer/utils/ipc'

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

@@ -1,4 +1,4 @@
-import { Button, Card, CardBody, CardFooter, Tooltip } from '@nextui-org/react'
+import { Button, Card, CardBody, CardFooter, Tooltip } from '@heroui/react'
 import { FaCircleArrowDown, FaCircleArrowUp } from 'react-icons/fa6'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { calcTraffic } from '@renderer/utils/calc'
@@ -48,17 +48,17 @@ const ConnCard: React.FC<Props> = (props) => {
   useEffect(() => {
     setChartColor(
       match
-        ? `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--nextui-primary-foreground')})`
-        : `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--nextui-foreground')})`
+        ? `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--heroui-primary-foreground')})`
+        : `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--heroui-foreground')})`
     )
   }, [theme, systemTheme, match])
 
   useEffect(() => {
     setTimeout(() => {
       setChartColor(
         match
-          ? `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--nextui-primary-foreground')})`
-          : `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--nextui-foreground')})`
+          ? `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--heroui-primary-foreground')})`
+          : `hsla(${getComputedStyle(document.documentElement).getPropertyValue('--heroui-foreground')})`
       )
     }, 200)
   }, [customTheme])

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

@@ -1,4 +1,4 @@
-import { Button, Card, CardBody, CardFooter, Tooltip } from '@nextui-org/react'
+import { Button, Card, CardBody, CardFooter, Tooltip } from '@heroui/react'
 import { useControledMihomoConfig } from '@renderer/hooks/use-controled-mihomo-config'
 import BorderSwitch from '@renderer/components/base/border-swtich'
 import { LuServer } from 'react-icons/lu'

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

@@ -1,4 +1,4 @@
-import { Button, Card, CardBody, CardFooter, Tooltip } from '@nextui-org/react'
+import { Button, Card, CardBody, CardFooter, Tooltip } from '@heroui/react'
 import { IoJournalOutline } from 'react-icons/io5'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useSortable } from '@dnd-kit/sortable'

src/renderer/src/components/sider/mihomo-core-card.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, CardBody, CardFooter, Tooltip } from '@nextui-org/react'
+import { Button, Card, CardBody, CardFooter, Tooltip } from '@heroui/react'
 import { calcTraffic } from '@renderer/utils/calc'
 import { mihomoVersion, restartCore } from '@renderer/utils/ipc'
 import React, { useEffect, useState } from 'react'