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

Fix: clashx controllers display

Browse Source
This commit is contained in:
Dreamacro 2023-02-21 11:58:20 +08:00
parent 6b2992de32
commit 7b88e014f0
1 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,7 @@ import { Header, Card, Switch, ButtonSelect, type ButtonSelectOptions, Input, Se
import { type Lang } from '@i18n' import { type Lang } from '@i18n'
import { useObject } from '@lib/hook' import { useObject } from '@lib/hook'
import { jsBridge } from '@lib/jsBridge' import { jsBridge } from '@lib/jsBridge'
import { useI18n, useClashXData, useGeneral, useVersion, useClient, identityAtom, hostSelectIdxStorageAtom, hostsStorageAtom } from '@stores' import { useI18n, useClashXData, useGeneral, useVersion, useClient, identityAtom, hostSelectIdxStorageAtom, hostsStorageAtom, useAPIInfo } from '@stores'
import './style.scss' import './style.scss'
const languageOptions: ButtonSelectOptions[] = [{ label: '中文', value: 'zh_CN' }, { label: 'English', value: 'en_US' }] const languageOptions: ButtonSelectOptions[] = [{ label: '中文', value: 'zh_CN' }, { label: 'English', value: 'en_US' }]
@ -19,6 +19,7 @@ export default function Settings () {
const setIdentity = useSetAtom(identityAtom) const setIdentity = useSetAtom(identityAtom)
const [hostSelectIdx, setHostSelectIdx] = useAtom(hostSelectIdxStorageAtom) const [hostSelectIdx, setHostSelectIdx] = useAtom(hostSelectIdxStorageAtom)
const hostsStorage = useAtomValue(hostsStorageAtom) const hostsStorage = useAtomValue(hostsStorageAtom)
const apiInfo = useAPIInfo()
const { translation, setLang, lang } = useI18n() const { translation, setLang, lang } = useI18n()
const { t } = translation('Settings') const { t } = translation('Settings')
const client = useClient() const client = useClient()
@ -73,6 +74,11 @@ export default function Settings () {
await fetchGeneral() await fetchGeneral()
} }
const {
hostname: externalControllerHost,
port: externalControllerPort,
} = apiInfo
const { allowLan, mode } = general const { allowLan, mode } = general
const startAtLogin = clashXData?.startAtLogin ?? false const startAtLogin = clashXData?.startAtLogin ?? false
@ -95,6 +101,24 @@ export default function Settings () {
(h, idx) => ({ value: idx, label: <span className="text-right truncate">{h.hostname}</span> }), (h, idx) => ({ value: idx, label: <span className="text-right truncate">{h.hostname}</span> }),
) )
const controllers = isClashX
? <span>{`${externalControllerHost}:${externalControllerPort}`}</span>
: (
<>
<Select
disabled={hostsStorage.length < 2 && !isClashX}
options={controllerOptions}
value={hostSelectIdx}
onSelect={idx => setHostSelectIdx(idx)}
/>
<span
className={classnames({ 'modify-btn': !isClashX }, 'external-controller')}
onClick={() => !isClashX && setIdentity(false)}>
编辑
</span>
</>
)
return ( return (
<div className="page"> <div className="page">
<Header title={t('title')} /> <Header title={t('title')} />
@ -172,17 +196,7 @@ export default function Settings () {
<div className="flex items-center justify-between md:w-1/2 px-8 py-3 w-full"> <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> <span className="font-bold label">{t('labels.externalController')}</span>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Select { controllers }
disabled={hostsStorage.length < 2 && !isClashX}
options={controllerOptions}
value={hostSelectIdx}
onSelect={idx => setHostSelectIdx(idx)}
/>
<span
className={classnames({ 'modify-btn': !isClashX }, 'external-controller')}
onClick={() => !isClashX && setIdentity(false)}>
编辑
</span>
</div> </div>
</div> </div>
<div className="px-8 w-1/2"></div> <div className="px-8 w-1/2"></div>