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

Improve: external controller modal support i18n

Browse Source
This commit is contained in:
Jason 2018-10-08 22:19:19 +08:00
parent 123f125399
commit be5df8571a
4 changed files with 55 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/containers/Settings/components/ExternalControllerDrawer/index.tsx
View File

@ -1,50 +1,55 @@
import * as React from 'react'
import { translate } from 'react-i18next'
import { Modal, Input, Row, Col, Alert } from '@components'
import { I18nProps } from '@models'
import './style.scss'
interface ExternalControllerDrawerProps {
interface ExternalControllerModalProps extends I18nProps {
show: boolean
host: string
port: string
onConfirm: (host: string, port: string) => void
secret?: string
onConfirm: (host: string, port: string, secret: string) => void
onCancel: () => void
}
interface ExternalControllerDrawerState {
host: string,
interface ExternalControllerModalState {
host: string
port: string
secret: string
}
export class ExternalControllerDrawer extends React.Component<ExternalControllerDrawerProps, ExternalControllerDrawerState> {
class ExternalController extends React.Component<ExternalControllerModalProps, ExternalControllerModalState> {
state = {
host: this.props.host,
port: this.props.port
port: this.props.port,
secret: this.props.secret || ''
}
private handleOk = () => {
const { onConfirm } = this.props
const { host, port } = this.state
onConfirm(host, port)
const { host, port, secret } = this.state
onConfirm(host, port, secret)
}
render () {
const { show, onCancel } = this.props
const { host, port } = this.state
const { show, onCancel, t } = this.props
const { host, port, secret } = this.state
return (
<Modal
show={show}
title="编辑外部控制设置"
title={t('externalControllerSetting.title')}
bodyClassName="external-controller"
onClose={onCancel}
onOk={this.handleOk}
>
<Alert type="info" inside={true}>
<p>请注意，修改该配置项并不会修改你的 Clash 配置文件，请确认修改后的外部控制地址和 Clash 配置文件内的地址一致，否则会导致 Dashboard 无法连接。</p>
<p>{t('externalControllerSetting.note')}</p>
</Alert>
<Row gutter={24} align="middle">
<Col span={4} className="title">Host</Col>
<Col span={4} className="title">{t('externalControllerSetting.host')}</Col>
<Col span={20} className="form">
<Input
align="left"
@ -55,7 +60,7 @@ export class ExternalControllerDrawer extends React.Component<ExternalController
</Col>
</Row>
<Row gutter={24} align="middle">
<Col span={4} className="title">端口</Col>
<Col span={4} className="title">{t('externalControllerSetting.port')}</Col>
<Col span={20} className="form">
<Input
align="left"
@ -65,7 +70,20 @@ export class ExternalControllerDrawer extends React.Component<ExternalController
/>
</Col>
</Row>
<Row gutter={24} align="middle">
<Col span={4} className="title">{t('externalControllerSetting.secret')}</Col>
<Col span={20} className="form">
<Input
align="left"
inside={true}
value={secret}
onChange={secret => this.setState({ secret })}
/>
</Col>
</Row>
</Modal>
)
}
}
export const ExternalControllerModal = translate(['Settings'])(ExternalController)

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

@ -2,7 +2,7 @@ import * as React from 'react'
import { translate } from 'react-i18next'
import { changeLanguage } from 'i18next'
import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input, Icon } from '@components'
import { ExternalControllerDrawer } from './components'
import { ExternalControllerModal } from './components'
import { I18nProps } from '@models'
import './style.scss'
@ -17,6 +17,7 @@ class Settings extends React.Component<I18nProps, {}> {
httpProxyPort: 7890,
externalControllerHost: '127.0.0.1',
externalControllerPort: '7892',
externalControllerSecret: '',
showEditDrawer: false
}
@ -40,6 +41,7 @@ class Settings extends React.Component<I18nProps, {}> {
httpProxyPort,
externalControllerHost,
externalControllerPort,
externalControllerSecret,
showEditDrawer
} = this.state
const proxyModeOptions: ButtonSelectOptions[] = [
@ -142,15 +144,14 @@ class Settings extends React.Component<I18nProps, {}> {
<span className="check-update-btn">{t('checkUpdate')}</span>
</Card>
<ExternalControllerDrawer
<ExternalControllerModal
show={showEditDrawer}
host={externalControllerHost}
port={externalControllerPort}
onConfirm={(host, port) => console.log(host, port)}
secret={externalControllerSecret}
onConfirm={(host, port, secret) => console.log(host, port, secret)}
onCancel={() => this.setState({ showEditDrawer: false })}
>
<div>666666</div>
</ExternalControllerDrawer>
/>
</div>
)
}

9
src/i18n/en_US.ts
View File

@ -26,7 +26,14 @@ export default {
direct: 'Direct'
},
versionString: 'Current ClashX is the latest version：{{version}}',
checkUpdate: 'Check Update'
checkUpdate: 'Check Update',
externalControllerSetting: {
title: 'External Controller',
note: 'Please note that modifying this configuration will only configure Dashboard. Will not modify your Clash configuration file. Please make sure that the external controller address matches the address in the Clash configuration file, otherwise, Dashboard will not be able to connect to Clash.',
host: 'Host',
port: 'Port',
secret: 'Secret'
}
},
Logs: {
title: 'Logs'

9
src/i18n/zh_CN.ts
View File

@ -26,7 +26,14 @@ export default {
direct: '直连'
},
versionString: '当前 ClashX 已是最新版本：{{version}}',
checkUpdate: '检查更新'
checkUpdate: '检查更新',
externalControllerSetting: {
title: '编辑外部控制设置',
note: '请注意，修改该配置项并不会修改你的 Clash 配置文件，请确认修改后的外部控制地址和 Clash 配置文件内的地址一致，否则会导致 Dashboard 无法连接。',
host: 'Host',
port: '端口',
secret: '密钥'
}
},
Logs: {
title: '日志'