Chore: update dependencies and make unocss lint effect

package.json

@@ -27,53 +27,53 @@
     "devDependencies": {
         "@types/lodash-es": "^4.17.7",
         "@types/node": "^18.15.11",
-        "@types/react": "^18.0.31",
+        "@types/react": "^18.0.37",
         "@types/react-dom": "^18.0.11",
         "@types/react-virtualized-auto-sizer": "^1.0.1",
         "@types/react-window": "^1.8.5",
-        "@typescript-eslint/eslint-plugin": "^5.57.0",
+        "@typescript-eslint/eslint-plugin": "^5.59.0",
-        "@typescript-eslint/parser": "^5.57.0",
+        "@typescript-eslint/parser": "^5.59.0",
-        "@unocss/eslint-config": "^0.50.6",
+        "@unocss/eslint-config": "^0.51.4",
-        "@unocss/preset-wind": "^0.50.6",
+        "@unocss/preset-wind": "^0.51.4",
-        "@unocss/reset": "^0.50.6",
+        "@unocss/reset": "^0.51.4",
         "@vitejs/plugin-react": "^3.1.0",
-        "eslint": "^8.37.0",
+        "eslint": "^8.38.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-standard-with-typescript": "^34.0.1",
-        "eslint-import-resolver-typescript": "^3.5.4",
+        "eslint-import-resolver-typescript": "^3.5.5",
         "eslint-plugin-import": "^2.27.5",
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-n": "^15.7.0",
         "eslint-plugin-promise": "^6.1.1",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "sass": "^1.60.0",
+        "sass": "^1.62.0",
-        "type-fest": "^3.7.2",
+        "type-fest": "^3.8.0",
-        "typescript": "^5.0.3",
+        "typescript": "^5.0.4",
-        "unocss": "^0.50.6",
+        "unocss": "^0.51.4",
-        "vite": "^4.2.1",
+        "vite": "^4.2.2",
         "vite-plugin-pwa": "^0.14.7",
-        "vite-tsconfig-paths": "^4.0.7"
+        "vite-tsconfig-paths": "^4.2.0"
     },
     "dependencies": {
         "@react-hookz/web": "^23.0.0",
-        "@tanstack/react-table": "^8.8.4",
+        "@tanstack/react-table": "^8.8.5",
-        "axios": "^1.3.4",
+        "axios": "^1.3.5",
         "classnames": "^2.3.2",
         "dayjs": "^1.11.7",
         "eventemitter3": "^5.0.0",
-        "immer": "^9.0.21",
+        "immer": "^10.0.1",
-        "jotai": "^2.0.3",
+        "jotai": "^2.0.4",
         "jotai-immer": "^0.2.0",
         "lodash-es": "^4.17.21",
         "neverthrow": "^6.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.10.0",
-        "react-virtualized-auto-sizer": "^1.0.9",
+        "react-virtualized-auto-sizer": "^1.0.15",
-        "react-window": "^1.8.8",
+        "react-window": "^1.8.9",
-        "swr": "^2.1.1",
+        "swr": "^2.1.3",
-        "use-immer": "^0.8.1"
+        "use-immer": "^0.9.0"
     }
 }

src/components/Modal/index.tsx

@@ -90,7 +90,7 @@ export function Modal (props: ModalProps) {
                     footer && (
                         <div className="flex items-center justify-between">
                             {footerExtra}
-                            <div className="flex justify-end flex-1 space-x-3">
+                            <div className="flex flex-1 justify-end space-x-3">
                                 <Button onClick={() => onClose()}>{ t('cancel') }</Button>
                                 <Button type="primary" onClick={() => onOk()}>{ t('ok') }</Button>
                             </div>

src/components/Switch/index.tsx

@@ -23,7 +23,7 @@ export function Switch (props: SwitchProps) {
 
     return (
         <div className={classname} onClick={handleClick}>
-            <Icon className="font-bold switch-icon" type="check" size={20} />
+            <Icon className="switch-icon font-bold" type="check" size={20} />
         </div>
     )
 }

src/components/Tags/index.tsx

@@ -52,7 +52,7 @@ export function Tags (props: TagsProps) {
             </ul>
             {
                 showExtend &&
-                <span className="select-none cursor-pointer h-7 leading-7 px-5" onClick={toggleExtend}>{ expand ? t('collapseText') : t('expandText') }</span>
+                <span className="h-7 cursor-pointer select-none px-5 leading-7" onClick={toggleExtend}>{ expand ? t('collapseText') : t('expandText') }</span>
             }
         </div>
     )

src/containers/Connections/Info/index.tsx

@@ -17,82 +17,82 @@ export function ConnectionInfo (props: ConnectionsInfoProps) {
 
     return (
         <div className={classnames(props.className, 'flex flex-col overflow-y-auto text-sm')}>
-            <div className="flex my-3">
+            <div className="my-3 flex">
-                <span className="font-bold w-20">{t('info.id')}</span>
+                <span className="w-20 font-bold">{t('info.id')}</span>
                 <span className="font-mono">{props.connection.id}</span>
             </div>
-            <div className="flex justify-between my-3">
+            <div className="my-3 flex justify-between">
                 <div className="flex flex-1">
-                    <span className="font-bold w-20">{t('info.network')}</span>
+                    <span className="w-20 font-bold">{t('info.network')}</span>
                     <span className="font-mono">{props.connection.metadata?.network}</span>
                 </div>
                 <div className="flex flex-1">
-                    <span className="font-bold w-20">{t('info.inbound')}</span>
+                    <span className="w-20 font-bold">{t('info.inbound')}</span>
                     <span className="font-mono">{props.connection.metadata?.type}</span>
                 </div>
             </div>
-            <div className="flex my-3">
+            <div className="my-3 flex">
-                <span className="font-bold w-20">{t('info.host')}</span>
+                <span className="w-20 font-bold">{t('info.host')}</span>
-                <span className="flex-1 font-mono break-all">{
+                <span className="flex-1 break-all font-mono">{
                     props.connection.metadata?.host
                         ? `${props.connection.metadata.host}:${props.connection.metadata?.destinationPort}`
                         : t('info.hostEmpty')
                 }</span>
             </div>
-            <div className="flex my-3">
+            <div className="my-3 flex">
-                <span className="font-bold w-20">{t('info.dstIP')}</span>
+                <span className="w-20 font-bold">{t('info.dstIP')}</span>
                 <span className="font-mono">{
                     props.connection.metadata?.destinationIP
                         ? `${props.connection.metadata.destinationIP}:${props.connection.metadata?.destinationPort}`
                         : t('info.hostEmpty')
                 }</span>
             </div>
-            <div className="flex my-3">
+            <div className="my-3 flex">
-                <span className="font-bold w-20">{t('info.srcIP')}</span>
+                <span className="w-20 font-bold">{t('info.srcIP')}</span>
                 <span className="font-mono">{
                     `${props.connection.metadata?.sourceIP}:${props.connection.metadata?.sourcePort}`
                 }</span>
             </div>
-            <div className="flex my-3">
+            <div className="my-3 flex">
-                <span className="font-bold w-20">{t('info.process')}</span>
+                <span className="w-20 font-bold">{t('info.process')}</span>
-                <span className="break-all flex-1 font-mono">{
+                <span className="flex-1 break-all font-mono">{
                     props.connection.metadata?.processPath
                         ? `${basePath(props.connection.metadata.processPath)}`
                         : t('info.hostEmpty')
                 }</span>
             </div>
-            <div className="flex my-3">
+            <div className="my-3 flex">
-                <span className="font-bold w-20">{t('info.processPath')}</span>
+                <span className="w-20 font-bold">{t('info.processPath')}</span>
-                <span className="break-all flex-1 font-mono">{
+                <span className="flex-1 break-all font-mono">{
                     props.connection.metadata?.processPath
                         ? `${props.connection.metadata.processPath}`
                         : t('info.hostEmpty')
                 }</span>
             </div>
-            <div className="flex my-3">
+            <div className="my-3 flex">
-                <span className="font-bold w-20">{t('info.rule')}</span>
+                <span className="w-20 font-bold">{t('info.rule')}</span>
                 <span className="font-mono">
                     { props.connection.rule && `${props.connection.rule}${props.connection.rulePayload && ` :: ${props.connection.rulePayload}`}` }
                 </span>
             </div>
-            <div className="flex my-3">
+            <div className="my-3 flex">
-                <span className="font-bold w-20">{t('info.chains')}</span>
+                <span className="w-20 font-bold">{t('info.chains')}</span>
-                <span className="break-all flex-1 font-mono">
+                <span className="flex-1 break-all font-mono">
                     { props.connection.chains?.slice().reverse().join(' / ') }
                 </span>
             </div>
-            <div className="flex justify-between my-3">
+            <div className="my-3 flex justify-between">
                 <div className="flex flex-1">
-                    <span className="font-bold w-20">{t('info.upload')}</span>
+                    <span className="w-20 font-bold">{t('info.upload')}</span>
                     <span className="font-mono">{formatTraffic(props.connection.upload ?? 0)}</span>
                 </div>
                 <div className="flex flex-1">
-                    <span className="font-bold w-20">{t('info.download')}</span>
+                    <span className="w-20 font-bold">{t('info.download')}</span>
                     <span className="font-mono">{formatTraffic(props.connection.download ?? 0)}</span>
                 </div>
             </div>
-            <div className="flex my-3">
+            <div className="my-3 flex">
-                <span className="font-bold w-20">{t('info.status')}</span>
+                <span className="w-20 font-bold">{t('info.status')}</span>
                 <span className="font-mono">{
                     !props.connection.completed
                         ? <span className="text-green">{t('info.opening')}</span>

src/containers/Connections/index.tsx

@@ -243,7 +243,7 @@ export default function Connections () {
     const content = instance.getRowModel().rows.map(row => {
         return (
             <tr
-                className="select-none cursor-default"
+                className="cursor-default select-none"
                 key={row.original?.id}
                 onClick={() => setDrawerState({ visible: true, selectedID: row.original?.id })}>
                 {
@@ -271,9 +271,9 @@ export default function Connections () {
     })
 
     return (
-        <div className="!h-100vh page">
+        <div className="page !h-100vh">
             <Header title={t('title')}>
-                <span className="cursor-default flex-1 connections-filter">
+                <span className="connections-filter flex-1 cursor-default">
                     {`(${t('total.text')}: ${t('total.upload')} ${formatTraffic(traffic.uploadTotal)} ${t('total.download')} ${formatTraffic(traffic.downloadTotal)})`}
                 </span>
                 <Checkbox className="connections-filter" checked={save} onChange={toggleSave}>{t('keepClosed')}</Checkbox>
@@ -296,12 +296,12 @@ export default function Connections () {
             </Card>
             <Modal title={t('closeAll.title')} show={visible} onClose={hide} onOk={handleCloseConnections}>{t('closeAll.content')}</Modal>
             <Drawer containerRef={cardRef} bodyClassName="flex flex-col" visible={drawerState.visible} width={450}>
-                <div className="flex items-center justify-between h-8">
+                <div className="h-8 flex items-center justify-between">
-                    <span className="font-bold pl-3">{t('info.title')}</span>
+                    <span className="pl-3 font-bold">{t('info.title')}</span>
                     <Icon type="close" size={16} className="cursor-pointer" onClick={() => setDrawerState('visible', false)} />
                 </div>
-                <ConnectionInfo className="px-5 mt-3" connection={drawerState.connection} />
+                <ConnectionInfo className="mt-3 px-5" connection={drawerState.connection} />
-                <div className="flex justify-end mt-3 pr-3">
+                <div className="mt-3 flex justify-end pr-3">
                     <Button type="danger" disabled={drawerState.connection.completed} onClick={() => handleConnectionClosed()}>{ t('info.closeConnection') }</Button>
                 </div>
             </Drawer>

src/containers/Connections/store.ts

@@ -1,4 +1,4 @@
-import produce from 'immer'
+import { produce } from 'immer'
 import { useState, useMemo, useRef, useCallback } from 'react'
 
 import type * as API from '@lib/request'

src/containers/ExternalControllerDrawer/index.tsx

@@ -61,7 +61,7 @@ export default function ExternalController () {
 
     return (
         <Modal
-            className="!<sm:w-84 !w-105"
+            className="!w-105 !<sm:w-84"
             show={!identity}
             title={t('externalControllerSetting.title')}
             bodyClassName="external-controller"
@@ -73,9 +73,9 @@ export default function ExternalController () {
                 <p>{t('externalControllerSetting.note')}</p>
             </Alert>
             <div className="flex items-center">
-                <span className="font-bold md:my-3 my-1 w-14">{t('externalControllerSetting.host')}</span>
+                <span className="my-1 w-14 font-bold md:my-3">{t('externalControllerSetting.host')}</span>
                 <Input
-                    className="flex-1 md:my-3 my-1"
+                    className="my-1 flex-1 md:my-3"
                     align="left"
                     inside={true}
                     value={value.hostname}
@@ -84,9 +84,9 @@ export default function ExternalController () {
                 />
             </div>
             <div className="flex items-center">
-                <div className="font-bold md:my-3 my-1 w-14">{t('externalControllerSetting.port')}</div>
+                <div className="my-1 w-14 font-bold md:my-3">{t('externalControllerSetting.port')}</div>
                 <Input
-                    className="flex-1 md:my-3 my-1 w-14"
+                    className="my-1 w-14 flex-1 md:my-3"
                     align="left"
                     inside={true}
                     value={value.port}
@@ -95,9 +95,9 @@ export default function ExternalController () {
                 />
             </div>
             <div className="flex items-center">
-                <div className="font-bold md:my-3 my-1 w-14">{t('externalControllerSetting.secret')}</div>
+                <div className="my-1 w-14 font-bold md:my-3">{t('externalControllerSetting.secret')}</div>
                 <Input
-                    className="flex-1 md:my-3 my-1 w-14"
+                    className="my-1 w-14 flex-1 md:my-3"
                     align="left"
                     inside={true}
                     value={value.secret}

src/containers/Logs/index.tsx

@@ -61,7 +61,7 @@ export default function Logs () {
     return (
         <div className="page">
             <Header title={ t('title') } >
-                <span className="mr-2 text-primary-darken text-sm">{t('levelLabel')}:</span>
+                <span className="mr-2 text-sm text-primary-darken">{t('levelLabel')}:</span>
                 <Select
                     disabled={isConfigSilent}
                     options={logLevelOptions}
@@ -70,12 +70,12 @@ export default function Logs () {
                 />
             </Header>
 
-            <Card className="flex flex-1 flex-col md:mt-4 mt-2.5">
+            <Card className="mt-2.5 flex flex-1 flex-col md:mt-4">
                 <ul className="logs-panel" ref={listRef}>
                     {
                         logs.map(
                             (log, index) => (
-                                <li className="inline-block leading-5 text-[11px]" key={index}>
+                                <li className="inline-block text-[11px] leading-5" key={index}>
                                     <span className="mr-2 text-orange-400">[{ dayjs(log.time).format('YYYY-MM-DD HH:mm:ss') }]</span>
                                     <span className={logMap.get(log.type)}>[{ log.type.toUpperCase() }]</span>
                                     <span> { log.payload }</span>

src/containers/Proxies/components/Group/index.tsx

@@ -49,13 +49,13 @@ export function Group (props: GroupProps) {
     const canClick = config.type === 'Selector'
     return (
         <div className="proxy-group">
-            <div className="flex items-center justify-between h-10 md:h-15 md:mt-0 md:w-auto mt-4 w-full">
+            <div className="mt-4 h-10 w-full flex items-center justify-between md:mt-0 md:h-15 md:w-auto">
-                <span className="px-5 h-6 md:w-30 overflow-ellipsis overflow-hidden w-35 whitespace-nowrap">{ config.name }</span>
+                <span className="overflow-ellipsis h-6 w-35 overflow-hidden whitespace-nowrap px-5 md:w-30">{ config.name }</span>
-                <Tag className="md:mr-0 mr-5">{ config.type }</Tag>
+                <Tag className="mr-5 md:mr-0">{ config.type }</Tag>
             </div>
-            <div className="flex-1 md:py-4 py-2">
+            <div className="flex-1 py-2 md:py-4">
                 <Tags
-                    className="md:ml-8 ml-5"
+                    className="ml-5 md:ml-8"
                     data={config.all}
                     onClick={handleChangeProxySelected}
                     errSet={errSet}

src/containers/Proxies/components/Provider/index.tsx

@@ -46,12 +46,12 @@ export function Provider (props: ProvidersProps) {
                     <span className="mr-6">{ provider.name }</span>
                     <Tag>{ provider.vehicleType }</Tag>
                 </div>
-                <div className="flex items-center md:pt-0 pt-3">
+                <div className="flex items-center pt-3 md:pt-0">
                     {
                         provider.updatedAt &&
                         <span className="text-sm">{ `${t('providerUpdateTime')}: ${fromNow(new Date(provider.updatedAt), lang)}`}</span>
                     }
-                    <Icon className="cursor-pointer text-red pl-5" type="healthcheck" size={18} onClick={handleHealthChech} />
+                    <Icon className="cursor-pointer pl-5 text-red" type="healthcheck" size={18} onClick={handleHealthChech} />
                     <Icon className="cursor-pointer pl-5" type="update" size={18} onClick={handleUpdate} />
                 </div>
             </div>

src/containers/Proxies/components/Proxy/index.tsx

@@ -81,9 +81,9 @@ export function Proxy (props: ProxyProps) {
                 </span>
                 <p className="proxy-name">{config.name}</p>
             </div>
-            <div className="flex flex-col h-full items-center justify-center md:flex-row md:h-[18px] md:justify-between md:space-y-0 space-y-3 text-[10px]">
+            <div className="h-full flex flex-col items-center justify-center text-[10px] md:h-[18px] md:flex-row md:justify-between space-y-3 md:space-y-0">
                 <p >{delayText}{meanDelayText}</p>
-                { config.udp && <p className="bg-gray-200 p-[3px] rounded text-gray-600">UDP</p> }
+                { config.udp && <p className="rounded bg-gray-200 p-[3px] text-gray-600">UDP</p> }
             </div>
         </div>
     )

src/containers/Proxies/index.tsx

@@ -51,8 +51,8 @@ function ProxyGroups () {
                         {t('breakConnectionsText')}
                     </Checkbox>
                 </Header>
-                <Card className="md:my-4 my-2.5 p-0">
+                <Card className="my-2.5 p-0 md:my-4">
-                    <ul className="divide-gray-300 divide-y list-none">
+                    <ul className="list-none divide-y divide-gray-300">
                         {
                             list.map(p => (
                                 <li key={p.name}>
@@ -80,7 +80,7 @@ function ProxyProviders () {
                 <ul className="list-none">
                     {
                         providers.map(p => (
-                            <li className="md:my-4 my-2.5" key={p.name}>
+                            <li className="my-2.5 md:my-4" key={p.name}>
                                 <Provider provider={p} />
                             </li>
                         ))

src/containers/Rules/index.tsx

@@ -18,7 +18,7 @@ function RuleProviders () {
             providers.length !== 0 &&
             <div className="flex flex-col">
                 <Header title={t('providerTitle')} />
-                <Card className="divide-y mt-4 p-0 rounded shadow-primary">
+                <Card className="mt-4 rounded p-0 shadow-primary divide-y">
                     {
                         providers.map(p => (
                             <Provider key={p.name} provider={p} />
@@ -42,9 +42,9 @@ export default function Rules () {
         return (
             <li className="rule-item" style={style}>
                 <div className="flex py-1">
-                    <div className="rule-type text-center w-40">{ rule.type }</div>
+                    <div className="rule-type w-40 text-center">{ rule.type }</div>
-                    <div className="flex-1 text-center payload">{ rule.payload }</div>
+                    <div className="payload flex-1 text-center">{ rule.payload }</div>
-                    <div className="text-center w-40 rule-proxy">{ rule.proxy }</div>
+                    <div className="rule-proxy w-40 text-center">{ rule.proxy }</div>
                 </div>
             </li>
         )
@@ -54,7 +54,7 @@ export default function Rules () {
         <div className="page">
             <RuleProviders />
             <Header className="not-first:mt-7.5" title={t('title')} />
-            <Card className="flex flex-1 flex-col md:mt-4 mt-2.5 p-0 focus:outline-none">
+            <Card className="mt-2.5 flex flex-1 flex-col p-0 md:mt-4 focus:outline-none">
                 <AutoSizer className="min-h-120">
                     {
                         ({ height, width }) => (

src/containers/Settings/index.tsx

@@ -98,11 +98,11 @@ export default function Settings () {
     }, [t, premium])
 
     const controllerOptions = hostsStorage.map(
-        (h, idx) => ({ value: idx, label: <span className="text-right truncate">{h.hostname}</span> }),
+        (h, idx) => ({ value: idx, label: <span className="truncate text-right">{h.hostname}</span> }),
     )
 
     const controllers = isClashX
-        ? <span className="text-primary-darken text-sm">{`${externalControllerHost}:${externalControllerPort}`}</span>
+        ? <span className="text-sm text-primary-darken">{`${externalControllerHost}:${externalControllerPort}`}</span>
         : (
             <>
                 <Select
@@ -124,26 +124,26 @@ export default function Settings () {
             <Header title={t('title')} />
             <Card className="settings-card">
                 <div className="flex flex-wrap">
-                    <div className="flex items-center justify-between w-full md:w-1/2 px-8 py-3">
+                    <div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
-                        <span className="font-bold label">{t('labels.startAtLogin')}</span>
+                        <span className="label font-bold">{t('labels.startAtLogin')}</span>
                         <Switch disabled={!clashXData?.isClashX} checked={startAtLogin} onChange={handleStartAtLoginChange} />
                     </div>
-                    <div className="flex items-center justify-between md:w-1/2 px-8 py-3 w-full">
+                    <div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
-                        <span className="font-bold label">{t('labels.language')}</span>
+                        <span className="label font-bold">{t('labels.language')}</span>
                         <ButtonSelect options={languageOptions} value={lang} onSelect={(lang) => changeLanguage(lang as Lang)} />
                     </div>
                 </div>
                 <div className="flex flex-wrap">
-                    <div className="flex items-center justify-between md:w-1/2 px-8 py-3 w-full">
+                    <div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
-                        <span className="font-bold label">{t('labels.setAsSystemProxy')}</span>
+                        <span className="label font-bold">{t('labels.setAsSystemProxy')}</span>
                         <Switch
                             disabled={!isClashX}
                             checked={systemProxy}
                             onChange={handleSetSystemProxy}
                         />
                     </div>
-                    <div className="flex items-center justify-between md:w-1/2 px-8 py-3 w-full">
+                    <div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
-                        <span className="font-bold label">{t('labels.allowConnectFromLan')}</span>
+                        <span className="label font-bold">{t('labels.allowConnectFromLan')}</span>
                         <Switch checked={allowLan} onChange={handleAllowLanChange} />
                     </div>
                 </div>
@@ -151,16 +151,16 @@ export default function Settings () {
 
             <Card className="settings-card">
                 <div className="flex flex-wrap">
-                    <div className="flex items-center justify-between md:w-1/2 px-8 py-3 w-full">
+                    <div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
-                        <span className="font-bold label">{t('labels.proxyMode')}</span>
+                        <span className="label font-bold">{t('labels.proxyMode')}</span>
                         <ButtonSelect
                             options={proxyModeOptions}
                             value={capitalize(mode)}
                             onSelect={handleProxyModeChange}
                         />
                     </div>
-                    <div className="flex items-center justify-between md:w-1/2 px-8 py-3 w-full">
+                    <div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
-                        <span className="font-bold label">{t('labels.socks5ProxyPort')}</span>
+                        <span className="label font-bold">{t('labels.socks5ProxyPort')}</span>
                         <Input
                             className="w-28"
                             disabled={isClashX}
@@ -171,8 +171,8 @@ export default function Settings () {
                     </div>
                 </div>
                 <div className="flex flex-wrap">
-                    <div className="flex items-center justify-between md:w-1/2 px-8 py-3 w-full">
+                    <div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
-                        <span className="font-bold label">{t('labels.httpProxyPort')}</span>
+                        <span className="label font-bold">{t('labels.httpProxyPort')}</span>
                         <Input
                             className="w-28"
                             disabled={isClashX}
@@ -181,8 +181,8 @@ export default function Settings () {
                             onBlur={handleHttpPortSave}
                         />
                     </div>
-                    <div className="flex items-center justify-between md:w-1/2 px-8 py-3 w-full">
+                    <div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
-                        <span className="font-bold label">{t('labels.mixedProxyPort')}</span>
+                        <span className="label font-bold">{t('labels.mixedProxyPort')}</span>
                         <Input
                             className="w-28"
                             disabled={isClashX}
@@ -193,13 +193,13 @@ export default function Settings () {
                     </div>
                 </div>
                 <div className="flex flex-wrap">
-                    <div className="flex items-center justify-between md:w-1/2 px-8 py-3 w-full">
+                    <div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
-                        <span className="font-bold label">{t('labels.externalController')}</span>
+                        <span className="label font-bold">{t('labels.externalController')}</span>
                         <div className="flex items-center space-x-2">
                             { controllers }
                         </div>
                     </div>
-                    <div className="px-8 w-1/2"></div>
+                    <div className="w-1/2 px-8"></div>
                 </div>
             </Card>
             {/* <Card className="clash-version hidden">

src/lib/jotai.ts

@@ -1,4 +1,4 @@
-import produce, { type Draft } from 'immer'
+import { produce, type Draft } from 'immer'
 import { useMemo } from 'react'
 
 export type WritableDraft<T> = (draft: Draft<T>) => void

src/stores/jotai.ts

@@ -1,6 +1,6 @@
 import { usePreviousDistinct, useSyncedRef } from '@react-hookz/web'
 import { type AxiosError } from 'axios'
-import produce from 'immer'
+import { produce } from 'immer'
 import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
 import { atomWithStorage } from 'jotai/utils'
 import { atomWithImmer } from 'jotai-immer'

tsconfig.json

@@ -34,6 +34,7 @@
     },
     "include": [
         "src",
-        "vite.config.ts"
+        "vite.config.ts",
+        "uno.config.ts"
     ]
 }

uno.config.ts

@@ -0,0 +1,23 @@
+import presetWind from '@unocss/preset-wind'
+import { defineConfig } from 'unocss'
+
+export default defineConfig({
+    presets: [presetWind()],
+    theme: {
+        colors: {
+            primary: {
+                500: '#57befc',
+                600: '#2c8af8',
+                darken: '#54759a',
+            },
+            red: '#f56c6c',
+            green: '#67c23a',
+        },
+        boxShadow: {
+            primary: '2px 5px 20px -3px rgb(44 138 248 / 18%)',
+        },
+        textShadow: {
+            primary: '0 0 6px rgb(44 138 248 / 40%)',
+        },
+    },
+})

vite.config.ts

@@ -1,4 +1,3 @@
-import presetWind from '@unocss/preset-wind'
 import react from '@vitejs/plugin-react'
 import jotaiDebugLabel from 'jotai/babel/plugin-debug-label'
 import jotaiReactRefresh from 'jotai/babel/plugin-react-refresh'
@@ -15,26 +14,7 @@ export default defineConfig(
                 babel: { plugins: [jotaiDebugLabel, jotaiReactRefresh] },
             }),
             tsConfigPath(),
-            UnoCSS({
+            UnoCSS(),
-                presets: [presetWind()],
-                theme: {
-                    colors: {
-                        primary: {
-                            500: '#57befc',
-                            600: '#2c8af8',
-                            darken: '#54759a',
-                        },
-                        red: '#f56c6c',
-                        green: '#67c23a',
-                    },
-                    boxShadow: {
-                        primary: '2px 5px 20px -3px rgb(44 138 248 / 18%)',
-                    },
-                    textShadow: {
-                        primary: '0 0 6px rgb(44 138 248 / 40%)',
-                    },
-                },
-            }),
             VitePWA({
                 injectRegister: 'inline',
                 manifest: {