wood/clash-and-dashboard
1
0
Fork 0
mirror of https://github.com/woodchen-ink/clash-and-dashboard.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chore: sort classname and upgrade deps

Browse Source
This commit is contained in:
Dreamacro 2021-12-01 14:21:27 +08:00
parent a444adae43
commit c27f57eb1f
10 changed files with 980 additions and 936 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
package.json
View File

@ -27,31 +27,31 @@
"devDependencies": { "devDependencies": {
"@babel/eslint-parser": "^7.16.3", "@babel/eslint-parser": "^7.16.3",
"@types/lodash-es": "^4.17.5", "@types/lodash-es": "^4.17.5",
"@types/node": "^16.11.7", "@types/node": "^16.11.11",
"@types/react": "^17.0.34", "@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^17.0.11",
"@types/react-router-dom": "^5.3.2", "@types/react-router-dom": "^5.3.2",
"@types/react-table": "^7.7.8", "@types/react-table": "^7.7.8",
"@types/react-virtualized-auto-sizer": "^1.0.1", "@types/react-virtualized-auto-sizer": "^1.0.1",
"@types/react-window": "^1.8.5", "@types/react-window": "^1.8.5",
"@typescript-eslint/eslint-plugin": "^5.3.1", "@typescript-eslint/eslint-plugin": "^5.5.0",
"@typescript-eslint/parser": "^5.3.1", "@typescript-eslint/parser": "^5.5.0",
"@vitejs/plugin-react": "^1.0.9", "@vitejs/plugin-react": "^1.1.0",
"eslint": "^8.2.0", "eslint": "^8.3.0",
"eslint-config-airbnb": "^19.0.0", "eslint-config-airbnb": "^19.0.1",
"eslint-config-airbnb-typescript": "^15.0.0", "eslint-config-airbnb-typescript": "^16.1.0",
"eslint-config-standard-with-typescript": "^21.0.1", "eslint-config-standard-with-typescript": "^21.0.1",
"eslint-import-resolver-typescript": "^2.5.0", "eslint-import-resolver-typescript": "^2.5.0",
"eslint-plugin-import": "^2.25.3", "eslint-plugin-import": "^2.25.3",
"eslint-plugin-node": "^11.1.0", "eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.1", "eslint-plugin-promise": "^5.2.0",
"eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-react-hooks": "^4.3.0",
"sass": "^1.43.4", "sass": "^1.44.0",
"type-fest": "^2.5.3", "type-fest": "^2.7.0",
"typescript": "^4.4.4", "typescript": "^4.5.2",
"vite": "^2.6.14", "vite": "^2.6.14",
"vite-plugin-pwa": "^0.11.5", "vite-plugin-pwa": "^0.11.9",
"vite-plugin-windicss": "^1.5.1", "vite-plugin-windicss": "^1.5.3",
"vite-tsconfig-paths": "^3.3.17", "vite-tsconfig-paths": "^3.3.17",
"windicss": "^3.2.1" "windicss": "^3.2.1"
}, },
@ -60,10 +60,10 @@
"classnames": "^2.3.1", "classnames": "^2.3.1",
"dayjs": "^1.10.7", "dayjs": "^1.10.7",
"eventemitter3": "^4.0.7", "eventemitter3": "^4.0.7",
"immer": "^9.0.6", "immer": "^9.0.7",
"jotai": "^1.4.3", "jotai": "^1.4.6",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
"neverthrow": "^4.3.0", "neverthrow": "^4.3.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "^6.0.2", "react-router-dom": "^6.0.2",
@ -71,7 +71,7 @@
"react-use": "^17.3.1", "react-use": "^17.3.1",
"react-virtualized-auto-sizer": "^1.0.6", "react-virtualized-auto-sizer": "^1.0.6",
"react-window": "^1.8.6", "react-window": "^1.8.6",
"swr": "^1.0.1", "swr": "^1.1.0",
"use-immer": "^0.6.0" "use-immer": "^0.6.0"
} }
} }

1760
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

26
src/containers/Connections/Info/index.tsx
View File

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

14
src/containers/Connections/index.tsx
View File

@ -237,7 +237,7 @@ export default function Connections () {
return ( return (
<div className="page"> <div className="page">
<Header title={t('title')}> <Header title={t('title')}>
<span className="connections-filter flex-1 cursor-default"> <span className="cursor-default flex-1 connections-filter">
{`(${t('total.text')}: ${t('total.upload')} ${formatTraffic(traffic.uploadTotal)} ${t('total.download')} ${formatTraffic(traffic.downloadTotal)})`} {`(${t('total.text')}: ${t('total.upload')} ${formatTraffic(traffic.uploadTotal)} ${t('total.download')} ${formatTraffic(traffic.downloadTotal)})`}
</span> </span>
<Checkbox className="connections-filter" checked={save} onChange={toggleSave}>{t('keepClosed')}</Checkbox> <Checkbox className="connections-filter" checked={save} onChange={toggleSave}>{t('keepClosed')}</Checkbox>
@ -245,7 +245,7 @@ export default function Connections () {
</Header> </Header>
{ devices.length > 1 && <Devices devices={devices} selected={device} onChange={handleDeviceSelected} /> } { devices.length > 1 && <Devices devices={devices} selected={device} onChange={handleDeviceSelected} /> }
<Card ref={cardRef} className="connections-card relative"> <Card ref={cardRef} className="connections-card relative">
<div {...getTableProps()} className="flex flex-col w-full flex-1 overflow-auto" style={{ flexBasis: 0 }} ref={tableRef}> <div {...getTableProps()} className="flex flex-col flex-1 w-full overflow-auto" style={{ flexBasis: 0 }} ref={tableRef}>
<div {...headerGroup.getHeaderGroupProps()} className="connections-header"> <div {...headerGroup.getHeaderGroupProps()} className="connections-header">
{ {
headerGroup.headers.map((column, idx) => { headerGroup.headers.map((column, idx) => {
@ -283,7 +283,7 @@ export default function Connections () {
return ( return (
<div <div
{...row.getRowProps()} {...row.getRowProps()}
className="connections-item cursor-default select-none" className="cursor-default connections-item select-none"
key={row.original.id} key={row.original.id}
onClick={() => handleConnectionSelected(row.original.id)}> onClick={() => handleConnectionSelected(row.original.id)}>
{ {
@ -309,12 +309,12 @@ export default function Connections () {
</Card> </Card>
<Modal title={t('closeAll.title')} show={visible} onClose={hide} onOk={handleCloseConnections}>{t('closeAll.content')}</Modal> <Modal title={t('closeAll.title')} show={visible} onClose={hide} onOk={handleCloseConnections}>{t('closeAll.content')}</Modal>
<Drawer containerRef={cardRef} visible={drawerState.visible} width={450}> <Drawer containerRef={cardRef} visible={drawerState.visible} width={450}>
<div className="flex justify-between items-center h-8"> <div className="flex h-8 justify-between items-center">
<span className="pl-3 font-bold">{t('info.title')}</span> <span className="font-bold pl-3">{t('info.title')}</span>
<Icon type="close" size={16} className="cursor-pointer" onClick={() => setDrawerState('visible', false)} /> <Icon type="close" size={16} className="cursor-pointer" onClick={() => setDrawerState('visible', false)} />
</div> </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="flex mt-3 pr-3 justify-end">
<Button type="danger" disiabled={drawerState.connection.completed} onClick={() => handleConnectionClosed()}>{ t('info.closeConnection') }</Button> <Button type="danger" disiabled={drawerState.connection.completed} onClick={() => handleConnectionClosed()}>{ t('info.closeConnection') }</Button>
</div> </div>
</Drawer> </Drawer>

12
src/containers/ExternalControllerDrawer/index.tsx
View File

@ -42,9 +42,9 @@ export default function ExternalController () {
<p>{t('externalControllerSetting.note')}</p> <p>{t('externalControllerSetting.note')}</p>
</Alert> </Alert>
<div className="flex items-center"> <div className="flex items-center">
<span className="md:my-3 w-14 my-1 font-bold">{t('externalControllerSetting.host')}</span> <span className="font-bold my-1 w-14 md:my-3">{t('externalControllerSetting.host')}</span>
<Input <Input
className="md:my-3 flex-1 my-1" className="flex-1 my-1 md:my-3"
align="left" align="left"
inside={true} inside={true}
value={value.hostname} value={value.hostname}
@ -53,9 +53,9 @@ export default function ExternalController () {
/> />
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="md:my-3 w-14 my-1 font-bold">{t('externalControllerSetting.port')}</div> <div className="font-bold my-1 w-14 md:my-3">{t('externalControllerSetting.port')}</div>
<Input <Input
className="md:my-3 w-14 my-1 flex-1" className="flex-1 my-1 w-14 md:my-3"
align="left" align="left"
inside={true} inside={true}
value={value.port} value={value.port}
@ -64,9 +64,9 @@ export default function ExternalController () {
/> />
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
<div className="md:my-3 w-14 my-1 font-bold">{t('externalControllerSetting.secret')}</div> <div className="font-bold my-1 w-14 md:my-3">{t('externalControllerSetting.secret')}</div>
<Input <Input
className="md:my-3 w-14 my-1 flex-1" className="flex-1 my-1 w-14 md:my-3"
align="left" align="left"
inside={true} inside={true}
value={value.secret} value={value.secret}

6
src/containers/Proxies/components/Group/index.tsx
View File

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

8
src/containers/Proxies/components/Provider/index.tsx
View File

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

4
src/containers/Proxies/index.tsx
View File

@ -45,13 +45,13 @@ function ProxyGroups () {
<div className="flex flex-col"> <div className="flex flex-col">
<Header title={t('groupTitle')}> <Header title={t('groupTitle')}>
<Checkbox <Checkbox
className="text-primary-600 text-sm text-shadow-primary cursor-pointer" className="cursor-pointer text-sm text-shadow-primary text-primary-600"
checked={config.breakConnections} checked={config.breakConnections}
onChange={value => setConfig('breakConnections', value)}> onChange={value => setConfig('breakConnections', value)}>
{t('breakConnectionsText')} {t('breakConnectionsText')}
</Checkbox> </Checkbox>
</Header> </Header>
<Card className="my-2.5 md:my-4 p-0"> <Card className="my-2.5 p-0 md:my-4">
<ul className="list-none"> <ul className="list-none">
{ {
list.map(p => ( list.map(p => (

12
src/containers/Rules/index.tsx
View File

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

38
src/containers/Settings/index.tsx
View File

@ -100,26 +100,26 @@ export default function Settings () {
<Header title={t('title')} /> <Header title={t('title')} />
<Card className="settings-card"> <Card className="settings-card">
<div className="flex flex-wrap"> <div className="flex flex-wrap">
<div className="w-full flex md:w-1/2 items-center justify-between px-8 py-3"> <div className="flex w-full py-3 px-8 items-center justify-between md:w-1/2">
<span className="label font-bold">{t('labels.startAtLogin')}</span> <span className="font-bold label">{t('labels.startAtLogin')}</span>
<Switch disabled={!clashXData?.isClashX} checked={startAtLogin} onChange={handleStartAtLoginChange} /> <Switch disabled={!clashXData?.isClashX} checked={startAtLogin} onChange={handleStartAtLoginChange} />
</div> </div>
<div className="w-full flex md:w-1/2 items-center justify-between px-8 py-3"> <div className="flex w-full py-3 px-8 items-center justify-between md:w-1/2">
<span className="label font-bold">{t('labels.language')}</span> <span className="font-bold label">{t('labels.language')}</span>
<ButtonSelect options={languageOptions} value={lang} onSelect={(lang) => changeLanguage(lang as Lang)} /> <ButtonSelect options={languageOptions} value={lang} onSelect={(lang) => changeLanguage(lang as Lang)} />
</div> </div>
</div> </div>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
<div className="w-full flex md:w-1/2 items-center justify-between px-8 py-3"> <div className="flex w-full py-3 px-8 items-center justify-between md:w-1/2">
<span className="label font-bold">{t('labels.setAsSystemProxy')}</span> <span className="font-bold label">{t('labels.setAsSystemProxy')}</span>
<Switch <Switch
disabled={!isClashX} disabled={!isClashX}
checked={systemProxy} checked={systemProxy}
onChange={handleSetSystemProxy} onChange={handleSetSystemProxy}
/> />
</div> </div>
<div className="w-full flex md:w-1/2 items-center justify-between px-8 py-3"> <div className="flex w-full py-3 px-8 items-center justify-between md:w-1/2">
<span className="label font-bold">{t('labels.allowConnectFromLan')}</span> <span className="font-bold label">{t('labels.allowConnectFromLan')}</span>
<Switch checked={allowLan} onChange={handleAllowLanChange} /> <Switch checked={allowLan} onChange={handleAllowLanChange} />
</div> </div>
</div> </div>
@ -127,16 +127,16 @@ export default function Settings () {
<Card className="settings-card"> <Card className="settings-card">
<div className="flex flex-wrap"> <div className="flex flex-wrap">
<div className="w-full flex md:w-1/2 items-center justify-between px-8 py-3"> <div className="flex w-full py-3 px-8 items-center justify-between md:w-1/2">
<span className="label font-bold">{t('labels.proxyMode')}</span> <span className="font-bold label">{t('labels.proxyMode')}</span>
<ButtonSelect <ButtonSelect
options={proxyModeOptions} options={proxyModeOptions}
value={capitalize(mode)} value={capitalize(mode)}
onSelect={handleProxyModeChange} onSelect={handleProxyModeChange}
/> />
</div> </div>
<div className="w-full flex md:w-1/2 items-center justify-between px-8 py-3"> <div className="flex w-full py-3 px-8 items-center justify-between md:w-1/2">
<span className="label font-bold">{t('labels.socks5ProxyPort')}</span> <span className="font-bold label">{t('labels.socks5ProxyPort')}</span>
<Input <Input
className="w-28" className="w-28"
disabled={isClashX} disabled={isClashX}
@ -147,8 +147,8 @@ export default function Settings () {
</div> </div>
</div> </div>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
<div className="w-full flex md:w-1/2 items-center justify-between px-8 py-3"> <div className="flex w-full py-3 px-8 items-center justify-between md:w-1/2">
<span className="label font-bold">{t('labels.httpProxyPort')}</span> <span className="font-bold label">{t('labels.httpProxyPort')}</span>
<Input <Input
className="w-28" className="w-28"
disabled={isClashX} disabled={isClashX}
@ -157,8 +157,8 @@ export default function Settings () {
onBlur={handleHttpPortSave} onBlur={handleHttpPortSave}
/> />
</div> </div>
<div className="w-full flex md:w-1/2 items-center justify-between px-8 py-3"> <div className="flex w-full py-3 px-8 items-center justify-between md:w-1/2">
<span className="label font-bold">{t('labels.mixedProxyPort')}</span> <span className="font-bold label">{t('labels.mixedProxyPort')}</span>
<Input <Input
className="w-28" className="w-28"
disabled={isClashX} disabled={isClashX}
@ -169,15 +169,15 @@ export default function Settings () {
</div> </div>
</div> </div>
<div className="flex flex-wrap"> <div className="flex flex-wrap">
<div className="w-full flex md:w-1/2 items-center justify-between px-8 py-3"> <div className="flex w-full py-3 px-8 items-center justify-between md:w-1/2">
<span className="label font-bold">{t('labels.externalController')}</span> <span className="font-bold label">{t('labels.externalController')}</span>
<span <span
className={classnames({ 'modify-btn': !isClashX }, 'external-controller')} className={classnames({ 'modify-btn': !isClashX }, 'external-controller')}
onClick={() => !isClashX && setIdentity(false)}> onClick={() => !isClashX && setIdentity(false)}>
{`${externalControllerHost}:${externalControllerPort}`} {`${externalControllerHost}:${externalControllerPort}`}
</span> </span>
</div> </div>
<div className="w-1/2 px-8"></div> <div className="px-8 w-1/2"></div>
</div> </div>
</Card> </Card>
{/* <Card className="clash-version hidden"> {/* <Card className="clash-version hidden">