mirror of
https://github.com/woodchen-ink/clash-and-dashboard.git
synced 2025-07-18 05:51:56 +08:00
Chore: update dependencies and make unocss lint effect
This commit is contained in:
Dreamacro
parent
77c2c17283
commit
21904d2f1f
44
package.json
44
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/parser": "^5.57.0",
|
||||
"@unocss/eslint-config": "^0.50.6",
|
||||
"@unocss/preset-wind": "^0.50.6",
|
||||
"@unocss/reset": "^0.50.6",
|
||||
"@typescript-eslint/eslint-plugin": "^5.59.0",
|
||||
"@typescript-eslint/parser": "^5.59.0",
|
||||
"@unocss/eslint-config": "^0.51.4",
|
||||
"@unocss/preset-wind": "^0.51.4",
|
||||
"@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",
|
||||
"type-fest": "^3.7.2",
|
||||
"typescript": "^5.0.3",
|
||||
"unocss": "^0.50.6",
|
||||
"vite": "^4.2.1",
|
||||
"sass": "^1.62.0",
|
||||
"type-fest": "^3.8.0",
|
||||
"typescript": "^5.0.4",
|
||||
"unocss": "^0.51.4",
|
||||
"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",
|
||||
"axios": "^1.3.4",
|
||||
"@tanstack/react-table": "^8.8.5",
|
||||
"axios": "^1.3.5",
|
||||
"classnames": "^2.3.2",
|
||||
"dayjs": "^1.11.7",
|
||||
"eventemitter3": "^5.0.0",
|
||||
"immer": "^9.0.21",
|
||||
"jotai": "^2.0.3",
|
||||
"immer": "^10.0.1",
|
||||
"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-window": "^1.8.8",
|
||||
"swr": "^2.1.1",
|
||||
"use-immer": "^0.8.1"
|
||||
"react-virtualized-auto-sizer": "^1.0.15",
|
||||
"react-window": "^1.8.9",
|
||||
"swr": "^2.1.3",
|
||||
"use-immer": "^0.9.0"
|
||||
}
|
||||
}
|
||||
|
||||
1014
pnpm-lock.yaml
generated
1014
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -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>
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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">
|
||||
<span className="font-bold w-20">{t('info.id')}</span>
|
||||
<div className="my-3 flex">
|
||||
<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">
|
||||
<span className="font-bold w-20">{t('info.host')}</span>
|
||||
<span className="flex-1 font-mono break-all">{
|
||||
<div className="my-3 flex">
|
||||
<span className="w-20 font-bold">{t('info.host')}</span>
|
||||
<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">
|
||||
<span className="font-bold w-20">{t('info.dstIP')}</span>
|
||||
<div className="my-3 flex">
|
||||
<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">
|
||||
<span className="font-bold w-20">{t('info.srcIP')}</span>
|
||||
<div className="my-3 flex">
|
||||
<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">
|
||||
<span className="font-bold w-20">{t('info.process')}</span>
|
||||
<span className="break-all flex-1 font-mono">{
|
||||
<div className="my-3 flex">
|
||||
<span className="w-20 font-bold">{t('info.process')}</span>
|
||||
<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">
|
||||
<span className="font-bold w-20">{t('info.processPath')}</span>
|
||||
<span className="break-all flex-1 font-mono">{
|
||||
<div className="my-3 flex">
|
||||
<span className="w-20 font-bold">{t('info.processPath')}</span>
|
||||
<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">
|
||||
<span className="font-bold w-20">{t('info.rule')}</span>
|
||||
<div className="my-3 flex">
|
||||
<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">
|
||||
<span className="font-bold w-20">{t('info.chains')}</span>
|
||||
<span className="break-all flex-1 font-mono">
|
||||
<div className="my-3 flex">
|
||||
<span className="w-20 font-bold">{t('info.chains')}</span>
|
||||
<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">
|
||||
<span className="font-bold w-20">{t('info.status')}</span>
|
||||
<div className="my-3 flex">
|
||||
<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>
|
||||
|
||||
@ -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">
|
||||
<span className="font-bold pl-3">{t('info.title')}</span>
|
||||
<div className="h-8 flex items-center justify-between">
|
||||
<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} />
|
||||
<div className="flex justify-end mt-3 pr-3">
|
||||
<ConnectionInfo className="mt-3 px-5" connection={drawerState.connection} />
|
||||
<div className="mt-3 flex justify-end pr-3">
|
||||
<Button type="danger" disabled={drawerState.connection.completed} onClick={() => handleConnectionClosed()}>{ t('info.closeConnection') }</Button>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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">
|
||||
<span className="px-5 h-6 md:w-30 overflow-ellipsis overflow-hidden w-35 whitespace-nowrap">{ config.name }</span>
|
||||
<Tag className="md:mr-0 mr-5">{ config.type }</Tag>
|
||||
<div className="mt-4 h-10 w-full flex items-center justify-between md:mt-0 md:h-15 md:w-auto">
|
||||
<span className="overflow-ellipsis h-6 w-35 overflow-hidden whitespace-nowrap px-5 md:w-30">{ config.name }</span>
|
||||
<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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -51,8 +51,8 @@ function ProxyGroups () {
|
||||
{t('breakConnectionsText')}
|
||||
</Checkbox>
|
||||
</Header>
|
||||
<Card className="md:my-4 my-2.5 p-0">
|
||||
<ul className="divide-gray-300 divide-y list-none">
|
||||
<Card className="my-2.5 p-0 md:my-4">
|
||||
<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>
|
||||
))
|
||||
|
||||
@ -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="flex-1 text-center payload">{ rule.payload }</div>
|
||||
<div className="text-center w-40 rule-proxy">{ rule.proxy }</div>
|
||||
<div className="rule-type w-40 text-center">{ rule.type }</div>
|
||||
<div className="payload flex-1 text-center">{ rule.payload }</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 }) => (
|
||||
|
||||
@ -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">
|
||||
<span className="font-bold label">{t('labels.startAtLogin')}</span>
|
||||
<div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
|
||||
<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">
|
||||
<span className="font-bold label">{t('labels.language')}</span>
|
||||
<div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
|
||||
<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">
|
||||
<span className="font-bold label">{t('labels.setAsSystemProxy')}</span>
|
||||
<div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
|
||||
<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">
|
||||
<span className="font-bold label">{t('labels.allowConnectFromLan')}</span>
|
||||
<div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
|
||||
<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">
|
||||
<span className="font-bold label">{t('labels.proxyMode')}</span>
|
||||
<div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
|
||||
<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">
|
||||
<span className="font-bold label">{t('labels.socks5ProxyPort')}</span>
|
||||
<div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
|
||||
<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">
|
||||
<span className="font-bold label">{t('labels.httpProxyPort')}</span>
|
||||
<div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
|
||||
<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">
|
||||
<span className="font-bold label">{t('labels.mixedProxyPort')}</span>
|
||||
<div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
|
||||
<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">
|
||||
<span className="font-bold label">{t('labels.externalController')}</span>
|
||||
<div className="w-full flex items-center justify-between px-8 py-3 md:w-1/2">
|
||||
<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">
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -34,6 +34,7 @@
|
||||
},
|
||||
"include": [
|
||||
"src",
|
||||
"vite.config.ts"
|
||||
"vite.config.ts",
|
||||
"uno.config.ts"
|
||||
]
|
||||
}
|
||||
|
||||
23
uno.config.ts
Normal file
23
uno.config.ts
Normal file
@ -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%)',
|
||||
},
|
||||
},
|
||||
})
|
||||
@ -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({
|
||||
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%)',
|
||||
},
|
||||
},
|
||||
}),
|
||||
UnoCSS(),
|
||||
VitePWA({
|
||||
injectRegister: 'inline',
|
||||
manifest: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user