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: adjust style & logic

Browse Source
This commit is contained in:
Dreamacro 2018-12-23 20:29:52 +08:00
parent 9b0bf2727c
commit 42a6dfea87
7 changed files with 68 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Tags/style.scss
View File

@ -46,7 +46,7 @@ $delete-height: 22px;
.tags-expand {
height: 30px;
line-height: 30px;
padding: 0 10px;
padding: 0 20px;
user-select: none;
cursor: pointer;
}

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

@ -4,17 +4,17 @@ import { Header, Card, Row, Col } from '@components'
import { I18nProps, BaseRouterProps } from '@models'
import './style.scss'
import { storeKeys } from '@lib/createStore'
import { inject } from 'mobx-react'
import { inject, observer } from 'mobx-react'
import { List, AutoSizer } from 'react-virtualized'
interface RulesProps extends BaseRouterProps, I18nProps {}
@inject(...storeKeys)
@observer
class Rules extends React.Component<RulesProps, {}> {
async componentDidMount () {
const { store } = this.props
await store.fetchData()
async componentWillMount () {
await this.props.store.fetchData()
}
renderRuleItem = ({ index, key, style }) => {

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

@ -1,21 +1,22 @@
import * as React from 'react'
import { translate } from 'react-i18next'
import { changeLanguage } from 'i18next'
import { inject, observer } from 'mobx-react'
import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Input, Icon } from '@components'
import { ExternalControllerModal } from './components'
import { I18nProps } from '@models'
import { I18nProps, BaseRouterProps } from '@models'
import { updateConfig } from '@lib/request'
import { setLocalStorageItem, to } from '@lib/helper'
import { rootStores } from '@lib/createStore'
import { rootStores, storeKeys } from '@lib/createStore'
import './style.scss'
import { isClashX, jsBridge } from '@lib/jsBridge'
class Settings extends React.Component<I18nProps, {}> {
interface SettingProps extends BaseRouterProps, I18nProps {}
@inject(...storeKeys)
@observer
class Settings extends React.Component<SettingProps, {}> {
state = {
startAtLogin: false,
setAsSystemProxy: false,
allowConnectFromLan: false,
proxyMode: 'Rule',
socks5ProxyPort: 7891,
httpProxyPort: 7890,
externalControllerHost: '127.0.0.1',
@ -45,25 +46,31 @@ class Settings extends React.Component<I18nProps, {}> {
handleProxyModeChange = async (mode: string) => {
const [, err] = await to(updateConfig({ mode }))
if (err === null) {
this.setState({ proxyMode: mode })
if (!err) {
rootStores.store.fetchData()
}
}
handleHttpPortSave = async () => {
const [, err] = await to(updateConfig({ 'port': this.state.httpProxyPort }))
if (err === null) {}
if (!err) {
await this.props.store.fetchData()
this.setState({ httpProxyPort: this.props.store.data.general.port })
}
}
handleSocksPortSave = async () => {
const [, err] = await to(updateConfig({ 'socks-port': this.state.socks5ProxyPort }))
if (err === null) {}
if (!err) {
await this.props.store.fetchData()
this.setState({ socks5ProxyPort: this.props.store.data.general.socksPort })
}
}
handleAllowLanChange = async (state: boolean) => {
const [, err] = await to(updateConfig({ 'allow-lan': state }))
if (err === null) {
this.setState({ allowConnectFromLan: state })
if (!err) {
await this.props.store.fetchData()
}
}
@ -77,47 +84,43 @@ class Settings extends React.Component<I18nProps, {}> {
this.setState({ setAsSystemProxy: state })
}
async componentDidMount () {
async componentWillMount () {
await rootStores.store.fetchData()
if (isClashX()) {
await rootStores.store.fetchAndParseConfig()
const startAtLogin = await jsBridge.getStartAtLogin()
const setAsSystemProxy = await jsBridge.isSystemProxySet()
await rootStores.store.fetchClashXData()
const apiInfo = await jsBridge.getAPIInfo()
this.setState({
startAtLogin,
setAsSystemProxy,
isClashX: true,
externalControllerHost: apiInfo.host,
externalControllerPort: apiInfo.port,
externalControllerSecret: apiInfo.secret
})
}
await rootStores.store.fetchData()
const general = rootStores.store.data.general
const general = this.props.store.data.general
this.setState({
allowConnectFromLan: general.allowLan,
proxyMode: general.mode,
socks5ProxyPort: general.socksPort,
httpProxyPort: general.port
})
}
render () {
const { t, lng } = this.props
const { t, lng, store } = this.props
const {
isClashX,
startAtLogin,
setAsSystemProxy,
allowConnectFromLan,
proxyMode,
socks5ProxyPort,
httpProxyPort,
externalControllerHost,
externalControllerPort,
externalControllerSecret,
showEditDrawer
showEditDrawer,
socks5ProxyPort,
httpProxyPort
} = this.state
const { allowLan, mode } = store.data.general
const {
startAtLogin,
systemProxy
} = store.clashxData
const proxyModeOptions: ButtonSelectOptions[] = [
{ label: t('values.global'), value: 'Global' },
{ label: t('values.rules'), value: 'Rule' },
@ -149,7 +152,7 @@ class Settings extends React.Component<I18nProps, {}> {
<Col span={4} className="value-column">
<Switch
disabled={!isClashX}
checked={setAsSystemProxy}
checked={systemProxy}
onChange={this.handleSetSystemProxy}
/>
</Col>
@ -158,7 +161,7 @@ class Settings extends React.Component<I18nProps, {}> {
</Col>
<Col span={4} className="value-column">
<Switch
checked={allowConnectFromLan}
checked={allowLan}
onChange={this.handleAllowLanChange}
/>
</Col>
@ -173,7 +176,7 @@ class Settings extends React.Component<I18nProps, {}> {
<Col span={7} className="value-column">
<ButtonSelect
options={proxyModeOptions}
value={proxyMode}
value={mode}
onSelect={this.handleProxyModeChange}
/>
</Col>
@ -194,6 +197,7 @@ class Settings extends React.Component<I18nProps, {}> {
</Col>
<Col span={3} offset={2}>
<Input
type="number"
value={httpProxyPort}
onChange={httpProxyPort => this.setState({ httpProxyPort: parseInt(httpProxyPort, 10) })}
onBlur={this.handleHttpPortSave}

4
src/index.html.ejs
View File

@ -7,9 +7,5 @@
</head>
<body>
<div id="root"></div>
<!-- Dependencies -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js" integrity="sha256-2EQx5J1ux3sjgPLtDevlo449XNXfvEplcRYWIF6ui8w=" crossorigin="anonymous"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js" integrity="sha256-3NNU/yoE0R7VxxapKiw/hkgQzcSMztyclb5RpeVlV7Y=" crossorigin="anonymous"></script> -->
</body>
</html>

5
src/models/Config.ts
View File

@ -64,6 +64,11 @@ export interface Config {
}
export interface ClashXData {
startAtLogin: boolean
systemProxy: boolean
}
export interface Data {
general?: {

19
src/stores/ConfigStore.ts
View File

@ -22,6 +22,12 @@ export class ConfigStore {
rules: []
}
@observable
clashxData: Models.ClashXData = {
startAtLogin: false,
systemProxy: false
}
@action
async fetchData () {
const [{ data: general }, rawProxies, rules] = await Promise.all([API.getConfig(), API.getProxies(), API.getRules()])
@ -49,6 +55,19 @@ export class ConfigStore {
})
}
@action
async fetchClashXData () {
const startAtLogin = await jsBridge.getStartAtLogin()
const systemProxy = await jsBridge.isSystemProxySet()
runInAction(() => {
this.clashxData = {
startAtLogin,
systemProxy
}
})
}
@action
async fetchAndParseConfig () {
const rawConfig = await jsBridge.readConfigString()

1
src/styles/common.scss
View File

@ -33,6 +33,7 @@ body {
.page-container {
width: 100%;
height: 100vh;
overflow-y: scroll;
}
.page {