27 | {
28 | options.map(option => (
29 |
36 | ))
37 | }
38 |
39 | )
40 | }
41 |
--------------------------------------------------------------------------------
/src/components/ButtonSelect/style.scss:
--------------------------------------------------------------------------------
1 | .button-select {
2 | display: flex;
3 | flex-direction: row;
4 |
5 | .button-select-options {
6 | height: 30px;
7 | padding: 0 15px;
8 | color: $color-primary-darken;
9 | font-size: 12px;
10 | line-height: 30px;
11 | background: $color-white;
12 | border: 1px solid $color-primary-lightly;
13 | border-right: none;
14 | transition: all 300ms ease;
15 | cursor: pointer;
16 | outline: 0;
17 | display: block;
18 | }
19 |
20 | .button-select-options:first-child {
21 | border-radius: 3px 0 0 3px;
22 | }
23 |
24 | .button-select-options:last-child {
25 | border-radius: 0 3px 3px 0;
26 | border-right: 1px solid $color-primary-lightly;
27 | }
28 |
29 | .button-select-options.actived {
30 | background: $color-primary;
31 | color: $color-white;
32 | border-color: $color-primary;
33 | box-shadow: 0 2px 5px rgba($color: $color-primary, $alpha: 0.5);
34 |
35 | &:active {
36 | box-shadow: none;
37 | }
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/src/components/Card/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 | import { forwardRef } from 'react'
3 |
4 | import { type BaseComponentProps } from '@models/BaseProps'
5 | import './style.scss'
6 |
7 | interface CardProps extends BaseComponentProps {
8 | ref?: React.ForwardedRef
15 | { children }
16 |
17 | )
18 | })
19 |
--------------------------------------------------------------------------------
/src/components/Card/style.scss:
--------------------------------------------------------------------------------
1 | .card {
2 | padding: 15px;
3 | box-shadow: 2px 5px 20px -3px rgba($color-primary-dark, 0.18);
4 | background-color: $color-white;
5 | border-radius: 4px;
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/Checkbox/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 |
3 | import { Icon } from '@components'
4 | import { noop } from '@lib/helper'
5 | import { type BaseComponentProps } from '@models/BaseProps'
6 | import './style.scss'
7 |
8 | interface CheckboxProps extends BaseComponentProps {
9 | checked: boolean
10 | onChange?: (checked: boolean) => void
11 | }
12 |
13 | export function Checkbox (props: CheckboxProps) {
14 | const { className, checked = false, onChange = noop } = props
15 | const classname = classnames('checkbox', { checked }, className)
16 |
17 | function handleClick () {
18 | onChange(!checked)
19 | }
20 |
21 | return (
22 |
23 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/Checkbox/style.scss:
--------------------------------------------------------------------------------
1 | $length: 18px;
2 | $padding: 26px;
3 |
4 | .checkbox {
5 | display: flex;
6 | position: relative;
7 | padding-left: $padding;
8 | cursor: pointer;
9 | line-height: $length;
10 |
11 | &::before {
12 | content: '';
13 | display: inline-block;
14 | position: absolute;
15 | left: 0;
16 | top: 50%;
17 | width: $length;
18 | height: $length;
19 | border-radius: 3px;
20 | transition: background-color 0.3s ease;
21 | transform: translateY(math.div(-$length, 2));
22 | background-color: $color-white;
23 | border: 1px solid $color-primary-lightly;
24 | }
25 |
26 | &.checked::before {
27 | background-color: $color-primary;
28 | }
29 | }
30 |
31 | .checkbox-icon {
32 | position: absolute;
33 | left: 0;
34 | top: 50%;
35 | line-height: $length;
36 | transform: translateY(math.div(-$length, 2)) scale(0.6);
37 | text-shadow: none;
38 | font-weight: bold;
39 |
40 | &.checkbox-icon {
41 | color: $color-white;
42 | }
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/Drawer/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 | import { useLayoutEffect, useRef, type RefObject } from 'react'
3 | import { createPortal } from 'react-dom'
4 |
5 | import { Card } from '@components'
6 | import { type BaseComponentProps } from '@models/BaseProps'
7 |
8 | interface DrawerProps extends BaseComponentProps {
9 | visible?: boolean
10 | width?: number
11 | bodyClassName?: string
12 | containerRef?: RefObject{ props.children }
25 |
28 | {props.children}
33 |
34 | )
35 |
36 | return createPortal(container, props.containerRef?.current ?? portalRef.current)
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/Header/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 |
3 | import { type BaseComponentProps } from '@models/BaseProps'
4 | import './style.scss'
5 |
6 | interface HeaderProps extends BaseComponentProps {
7 | // header title
8 | title: string
9 | }
10 |
11 | export function Header (props: HeaderProps) {
12 | const { title, children, className, style } = props
13 |
14 | return {title}
16 |{children}
17 |
14 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/Loading/Spinner/style.scss:
--------------------------------------------------------------------------------
1 | .spinner {
2 | position: relative;
3 | width: 80px;
4 | height: 80px;
5 | border-radius: 100%;
6 | animation: spinner 5s infinite linear;
7 | }
8 |
9 | .spinner-circle {
10 | position: absolute;
11 | width: 100%;
12 | height: 100%;
13 | transform-origin: 48% 48%;
14 | }
15 |
16 | .spinner-inner {
17 | width: 100%;
18 | height: 100%;
19 | border-radius: 100%;
20 | border: 5px solid transparentize($color-primary-dark, 0.3);
21 | border-right: none;
22 | border-top: none;
23 | background-clip: padding-box;
24 | box-shadow: inset 0 0 10px transparentize($color-primary-dark, 0.85);
25 | }
26 |
27 | @keyframes spinner {
28 | from {
29 | transform: rotate(0deg);
30 | }
31 |
32 | to {
33 | transform: rotate(360deg);
34 | }
35 | }
36 |
37 | .spinner-circle:nth-of-type(0) {
38 | transform: rotate(0deg);
39 | }
40 |
41 | .spinner-circle:nth-of-type(0) .spinner-inner {
42 | animation: spinner 2s infinite linear;
43 | }
44 |
45 | .spinner-circle:nth-of-type(1) {
46 | transform: rotate(70deg);
47 | }
48 |
49 | .spinner-circle:nth-of-type(1) .spinner-inner {
50 | animation: spinner 2s infinite linear;
51 | }
52 |
53 | .spinner-circle:nth-of-type(2) {
54 | transform: rotate(140deg);
55 | }
56 |
57 | .spinner-circle:nth-of-type(2) .spinner-inner {
58 | animation: spinner 2s infinite linear;
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/Loading/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 |
3 | import { type BaseComponentProps } from '@models/BaseProps'
4 |
5 | import { Spinner } from './Spinner'
6 | import './style.scss'
7 |
8 | interface LoadingProps extends BaseComponentProps {
9 | visible: boolean
10 | spinnerClassName?: string
11 | }
12 |
13 | export function Loading (props: LoadingProps) {
14 | const classname = classnames('loading', 'visible', props.className)
15 | return props.visible
16 | ? (
17 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
18 |
20 | )
21 | : null
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/Loading/style.scss:
--------------------------------------------------------------------------------
1 | .loading {
2 | position: absolute;
3 | display: flex;
4 | align-items: center;
5 | justify-content: center;
6 | top: 0;
7 | left: 0;
8 | bottom: 0;
9 | right: 0;
10 | background-color: rgba($color: #fff, $alpha: 0.9);
11 | box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.1);
12 | z-index: 1000;
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/Message/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 | import { useLayoutEffect } from 'react'
3 | import { unmountComponentAtNode } from 'react-dom'
4 | import { createRoot } from 'react-dom/client'
5 |
6 | import { Icon } from '@components'
7 | import { noop } from '@lib/helper'
8 | import { useVisible } from '@lib/hook'
9 | import './style.scss'
10 |
11 | const TYPE_ICON_MAP = {
12 | info: 'info',
13 | success: 'check',
14 | warning: 'info-o',
15 | error: 'close',
16 | }
17 |
18 | type NoticeType = 'success' | 'info' | 'warning' | 'error'
19 |
20 | interface ArgsProps {
21 | content: string
22 | type: NoticeType
23 | duration?: number
24 | onClose?: typeof noop
25 | }
26 |
27 | interface MessageProps {
28 | content?: string
29 | type?: NoticeType
30 | icon?: React.ReactNode
31 | duration?: number
32 | onClose?: typeof noop
33 | removeComponent: typeof noop
34 | }
35 |
36 | export function Message (props: MessageProps) {
37 | const {
38 | removeComponent = noop,
39 | onClose = noop,
40 | icon = !visible && removeComponent()}
62 | >
63 | {icon}
64 | {content}
65 |
66 | )
67 | }
68 |
69 | export function showMessage (args: ArgsProps) {
70 | // create container element
71 | const container = document.createElement('div')
72 | document.body.appendChild(container)
73 |
74 | // remove container when component unmount
75 | const removeComponent = () => {
76 | const isUnMount = unmountComponentAtNode(container)
77 | if (isUnMount) {
78 | document.body.removeChild(container)
79 | }
80 | }
81 |
82 | const icon =
80 |
102 | )
103 |
104 | return createPortal(modal, portalRef.current)
105 | }
106 |
--------------------------------------------------------------------------------
/src/components/Modal/style.scss:
--------------------------------------------------------------------------------
1 | $width: 400px;
2 | $bigWidth: 600px;
3 |
4 | $mobileWidth: 280px;
5 | $mobileBigWidth: 480px;
6 |
7 | .modal-mask {
8 | position: fixed;
9 | top: 0;
10 | left: 0;
11 | width: 100%;
12 | height: 100%;
13 | background: rgba($color: $color-black, $alpha: 0.15);
14 | opacity: 0;
15 | pointer-events: none;
16 | transition: all 500ms ease;
17 | display: flex;
18 | justify-content: center;
19 | align-items: center;
20 | z-index: 9999;
21 |
22 | .modal {
23 | margin-top: -50px;
24 | padding: 20px 30px;
25 | background: $color-white;
26 | box-shadow: 0 2px 16px rgba($color: $color-primary-darken, $alpha: 0.2);
27 | border-radius: 4px;
28 | display: flex;
29 | flex-direction: column;
30 | transform: scale(0);
31 | transition: all 300ms cubic-bezier(0.32, 0.26, 0.71, 1.29);
32 |
33 | .modal-title {
34 | margin: 5px 0;
35 | width: 100%;
36 | display: flex;
37 | align-items: center;
38 | justify-content: space-between;
39 | font-weight: bold;
40 | font-size: 18px;
41 | color: $color-primary-dark;
42 | text-shadow: 0 2px 6px rgba($color: $color-primary-dark, $alpha: 0.4);
43 | }
44 |
45 | .modal-body {
46 | margin: 10px 0;
47 | font-size: 14px;
48 | color: $color-primary-darken;
49 | }
50 | }
51 |
52 | .modal-small {
53 | width: $width;
54 | }
55 |
56 | .modal-big {
57 | width: $bigWidth;
58 | }
59 | }
60 |
61 | .modal-show {
62 | opacity: 1;
63 | pointer-events: visible;
64 |
65 | .modal {
66 | transform: scale(1);
67 | }
68 | }
69 |
70 | @media (max-width: 768px) {
71 | .modal-mask {
72 | .modal {
73 | margin-top: 0;
74 | padding: 18px 20px;
75 | }
76 |
77 | .modal-small {
78 | width: $mobileWidth;
79 | }
80 |
81 | .modal-big {
82 | width: $mobileBigWidth;
83 | }
84 | }
85 | }
86 |
--------------------------------------------------------------------------------
/src/components/Select/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 | import { useRef, useState, useMemo, useLayoutEffect, type ReactNode } from 'react'
3 | import { createPortal } from 'react-dom'
4 |
5 | import { Icon } from '@components'
6 | import { noop } from '@lib/helper'
7 | import { type BaseComponentProps } from '@models'
8 |
9 | import './style.scss'
10 |
11 | export interface SelectOptions
84 |
101 | {title}
85 | {children}
89 | {
90 | footer && (
91 |
92 | {footerExtra}
93 |
98 | )
99 | }
100 |
94 |
95 |
96 |
97 |
74 |
92 | )
93 |
94 | return (
95 | <>
96 | -
75 | {
76 | options.map(option => (
77 |
88 | ))
89 | }
90 |
102 | {matchChild?.label}
103 |
105 | {createPortal(dropDownList, portalRef.current)}
106 |
107 | )
108 | }
109 |
110 | interface OptionProps
26 |
28 | )
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/Switch/style.scss:
--------------------------------------------------------------------------------
1 | $height: 16px;
2 | $switch-radius: 18px;
3 | $switch-offset: 2px;
4 | $width: 32px;
5 |
6 | .switch {
7 | display: inline-block;
8 | width: $width;
9 | height: $height;
10 | border-radius: math.div($height, 2);
11 | background-color: $color-gray;
12 | transition: background-color 0.3s ease;
13 | position: relative;
14 | cursor: pointer;
15 |
16 | &.checked {
17 | background-color: $color-primary;
18 |
19 | &::after {
20 | transform: translateX($width - $switch-radius + $switch-offset);
21 | }
22 | }
23 |
24 | &.disabled {
25 | cursor: not-allowed;
26 | background-color: $color-gray-dark;
27 |
28 | &::after {
29 | background-color: lighten($color-primary-lightly, 0.1);
30 | box-shadow: 0 0 8px rgba($color-gray-darken, 0.5);
31 | }
32 | }
33 |
34 | &.checked.disabled {
35 | background-color: $color-primary-lightly;
36 | }
37 |
38 | &::after {
39 | content: '';
40 | position: absolute;
41 | top: math.div($switch-radius - $height, -2);
42 | height: $switch-radius;
43 | width: $switch-radius;
44 | border-radius: math.div($switch-radius, 2);
45 | background-color: $color-white;
46 | box-shadow: 0 0 8px rgba($color-primary-dark, 0.4);
47 | transition: transform 0.3s ease;
48 | transform: translateX(-$switch-offset);
49 | }
50 | }
51 |
52 | .switch-icon {
53 | position: absolute;
54 | transform: translateX(-1px) scale(0.4);
55 | color: $color-white;
56 | line-height: $height;
57 | }
58 |
--------------------------------------------------------------------------------
/src/components/Tag/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 |
3 | import { type BaseComponentProps } from '@models/BaseProps'
4 |
5 | import './style.scss'
6 |
7 | interface TagProps extends BaseComponentProps {
8 | color?: string
9 | }
10 |
11 | export function Tag (props: TagProps) {
12 | const { color, className: cn, style: s } = props
13 | const className = classnames('tag', cn)
14 | const style: React.CSSProperties = { color, ...s }
15 | const spanProps = { ...props, className, style }
16 |
17 | return { props.children }
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/Tag/style.scss:
--------------------------------------------------------------------------------
1 | .tag {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | height: 24px;
6 | font-size: 12px;
7 | padding: 0 12px;
8 | text-align: center;
9 | background-color: #fff;
10 | border: 2px solid $color-primary-dark;
11 | color: $color-primary-dark;
12 | border-radius: 12px;
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/Tags/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 | import { useState, useRef, useLayoutEffect } from 'react'
3 |
4 | import { noop } from '@lib/helper'
5 | import { type BaseComponentProps } from '@models'
6 | import { useI18n } from '@stores'
7 | import './style.scss'
8 |
9 | interface TagsProps extends BaseComponentProps {
10 | data: string[]
11 | onClick: (name: string) => void
12 | errSet?: Set
50 |
58 | )
59 | }
60 |
--------------------------------------------------------------------------------
/src/components/Tags/style.scss:
--------------------------------------------------------------------------------
1 | $height: 22px;
2 |
3 | .tags {
4 | display: flex;
5 | flex: 1;
6 | align-items: center;
7 | list-style: none;
8 | flex-wrap: wrap;
9 | box-sizing: content-box;
10 |
11 | li {
12 | position: relative;
13 | display: flex;
14 | align-items: center;
15 | justify-content: center;
16 | border: 1px solid $color-primary-dark;
17 | color: $color-primary-darken;
18 | height: $height;
19 | border-radius: math.div($height, 2);
20 | padding: 0 6px;
21 | margin: 3px 4px;
22 | font-size: 10px;
23 | }
24 |
25 | li.error {
26 | color: #fff;
27 | background-color: $color-red;
28 | border-color: $color-red;
29 | }
30 |
31 | li.tags-selected.error {
32 | background: linear-gradient(135deg, $color-primary-dark, $color-red);
33 | border: none;
34 | height: $height + 2px;
35 | padding: 0 7px;
36 | }
37 |
38 | .tags-selected {
39 | background-color: $color-primary-dark;
40 | color: #fff;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Header'
2 | export * from './Icon'
3 | export * from './Switch'
4 | export * from './Card'
5 | export * from './ButtonSelect'
6 | export * from './Tags'
7 | export * from './Input'
8 | export * from './Select'
9 | export * from './Modal'
10 | export * from './Alert'
11 | export * from './Button'
12 | export * from './Message'
13 | export * from './Checkbox'
14 | export * from './Tag'
15 | export * from './Loading'
16 | export * from './Drawer'
17 |
--------------------------------------------------------------------------------
/src/containers/App.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 | import { Route, Navigate, Routes, useLocation, Outlet } from 'react-router-dom'
3 |
4 | // import Overview from '@containers/Overview'
5 | import Connections from '@containers/Connections'
6 | import ExternalControllerModal from '@containers/ExternalControllerDrawer'
7 | import Logs from '@containers/Logs'
8 | import Proxies from '@containers/Proxies'
9 | import Rules from '@containers/Rules'
10 | import Settings from '@containers/Settings'
11 | import SideBar from '@containers/Sidebar'
12 | import { isClashX } from '@lib/jsBridge'
13 | import { useLogsStreamReader } from '@stores'
14 |
15 | import '../styles/common.scss'
16 | import '../styles/iconfont.scss'
17 |
18 | export default function App () {
19 | useLogsStreamReader()
20 |
21 | const location = useLocation()
22 |
23 | const routes = [
24 | // { path: '/', name: 'Overview', component: Overview, exact: true },
25 | { path: '/proxies', name: 'Proxies', element: -
51 | { tags }
52 |
34 |
40 | )
41 |
42 | return (
43 |
36 |
38 |
26 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/src/containers/Connections/Devices/style.scss:
--------------------------------------------------------------------------------
1 | .connections-devices-item {
2 | margin-right: 20px;
3 | font-size: 14px;
4 | color: $color-gray-darken;
5 | border-radius: 3px;
6 | cursor: pointer;
7 | transition: color .3s ease;
8 |
9 | &.selected {
10 | color: $color-primary-dark;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/containers/Connections/Info/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 | import { useMemo } from 'react'
3 |
4 | import { basePath, formatTraffic } from '@lib/helper'
5 | import { type BaseComponentProps } from '@models'
6 | import { useI18n } from '@stores'
7 |
8 | import { type Connection } from '../store'
9 |
10 | interface ConnectionsInfoProps extends BaseComponentProps {
11 | connection: Partial handleSelected('')}>
27 | { t('filter.all') }
28 |
29 | {
30 | props.devices.map(
31 | device => (
32 | handleSelected(device.label)}>
36 | { device.label } ({ device.number })
37 |
38 | ),
39 | )
40 | }
41 |
20 |
103 | )
104 | }
105 |
--------------------------------------------------------------------------------
/src/containers/Connections/index.tsx:
--------------------------------------------------------------------------------
1 | import { useIntersectionObserver, useSyncedRef, useUnmountEffect } from '@react-hookz/web'
2 | import { useReactTable, getSortedRowModel, getFilteredRowModel, getCoreRowModel, flexRender, createColumnHelper } from '@tanstack/react-table'
3 | import classnames from 'classnames'
4 | import { groupBy } from 'lodash-es'
5 | import { useMemo, useLayoutEffect, useRef, useState, useEffect } from 'react'
6 |
7 | import { Header, Checkbox, Modal, Icon, Drawer, Card, Button } from '@components'
8 | import { fromNow } from '@lib/date'
9 | import { basePath, formatTraffic } from '@lib/helper'
10 | import { useObject, useVisible } from '@lib/hook'
11 | import type * as API from '@lib/request'
12 | import { useClient, useConnectionStreamReader, useI18n } from '@stores'
13 |
14 | import { Devices } from './Devices'
15 | import { ConnectionInfo } from './Info'
16 | import { type Connection, type FormatConnection, useConnections } from './store'
17 | import './style.scss'
18 |
19 | const Columns = {
20 | Host: 'host',
21 | Network: 'network',
22 | Process: 'process',
23 | Type: 'type',
24 | Chains: 'chains',
25 | Rule: 'rule',
26 | Speed: 'speed',
27 | Upload: 'upload',
28 | Download: 'download',
29 | SourceIP: 'sourceIP',
30 | Time: 'time',
31 | } as const
32 |
33 | const shouldCenter = new Set
21 | {t('info.id')}
22 | {props.connection.id}
23 |
24 |
25 |
34 |
26 | {t('info.network')}
27 | {props.connection.metadata?.network}
28 |
29 |
30 | {t('info.inbound')}
31 | {props.connection.metadata?.type}
32 |
33 |
35 | {t('info.host')}
36 | {
37 | props.connection.metadata?.host
38 | ? `${props.connection.metadata.host}:${props.connection.metadata?.destinationPort}`
39 | : t('info.hostEmpty')
40 | }
41 |
42 |
43 | {t('info.dstIP')}
44 | {
45 | props.connection.metadata?.destinationIP
46 | ? `${props.connection.metadata.destinationIP}:${props.connection.metadata?.destinationPort}`
47 | : t('info.hostEmpty')
48 | }
49 |
50 |
51 | {t('info.srcIP')}
52 | {
53 | `${props.connection.metadata?.sourceIP}:${props.connection.metadata?.sourcePort}`
54 | }
55 |
56 |
57 | {t('info.process')}
58 | {
59 | props.connection.metadata?.processPath
60 | ? `${basePath(props.connection.metadata.processPath)}`
61 | : t('info.hostEmpty')
62 | }
63 |
64 |
65 | {t('info.processPath')}
66 | {
67 | props.connection.metadata?.processPath
68 | ? `${props.connection.metadata.processPath}`
69 | : t('info.hostEmpty')
70 | }
71 |
72 |
73 | {t('info.rule')}
74 |
75 | { props.connection.rule && `${props.connection.rule}${props.connection.rulePayload && ` :: ${props.connection.rulePayload}`}` }
76 |
77 |
78 |
79 | {t('info.chains')}
80 |
81 | { props.connection.chains?.slice().reverse().join(' / ') }
82 |
83 |
84 |
85 |
94 |
86 | {t('info.upload')}
87 | {formatTraffic(props.connection.upload ?? 0)}
88 |
89 |
90 | {t('info.download')}
91 | {formatTraffic(props.connection.download ?? 0)}
92 |
93 |
95 | {t('info.status')}
96 | {
97 | !props.connection.completed
98 | ? {t('info.opening')}
99 | : {t('info.closed')}
100 | }
101 |
102 |
226 | { flexRender(header.column.columnDef.header, header.getContext()) }
227 | {
228 | column.getIsSorted() !== false
229 | ? column.getIsSorted() === 'desc' ? ' ↓' : ' ↑'
230 | : null
231 | }
232 |
233 | { idx !== headerGroup.headers.length - 1 &&
234 |
238 | }
239 |
275 |
276 |
277 | {`(${t('total.text')}: ${t('total.upload')} ${formatTraffic(traffic.uploadTotal)} ${t('total.download')} ${formatTraffic(traffic.downloadTotal)})`}
278 |
279 | {t('keepClosed')}
280 |
282 | { devices.length > 1 &&
284 |
297 | {t('closeAll.content')}
298 |
299 |
308 |
309 | )
310 | }
311 |
--------------------------------------------------------------------------------
/src/containers/Connections/store.ts:
--------------------------------------------------------------------------------
1 | import { produce } from 'immer'
2 | import { useState, useMemo, useRef, useCallback } from 'react'
3 |
4 | import type * as API from '@lib/request'
5 |
6 | export type Connection = API.Connections & { completed?: boolean, uploadSpeed: number, downloadSpeed: number }
7 |
8 | export interface FormatConnection {
9 | id: string
10 | host: string
11 | chains: string
12 | rule: string
13 | time: number
14 | upload: number
15 | download: number
16 | type: string
17 | network: string
18 | process?: string
19 | sourceIP: string
20 | speed: {
21 | upload: number
22 | download: number
23 | }
24 | completed: boolean
25 | original: Connection
26 | }
27 |
28 | class Store {
29 | protected connections = new Map
285 |
286 |
287 |
295 |
296 |
300 | {t('info.title')}
301 | setDrawerState('visible', false)} />
302 |
303 |
305 |
306 |
307 |
57 |
58 |
59 |
60 | )
61 |
62 | return (
63 | {t('externalControllerSetting.note')}
74 |
76 | {t('externalControllerSetting.host')}
77 | set('hostname', hostname)}
83 | onEnter={handleOk}
84 | />
85 |
86 |
87 |
97 | {t('externalControllerSetting.port')}
88 | set('port', port)}
94 | onEnter={handleOk}
95 | />
96 |
98 |
108 | {t('externalControllerSetting.secret')}
99 | set('secret', secret)}
105 | onEnter={handleOk}
106 | />
107 |
63 |
64 | {t('levelLabel')}:
65 |
72 |
73 |
74 |
88 |
89 | )
90 | }
91 |
--------------------------------------------------------------------------------
/src/containers/Logs/style.scss:
--------------------------------------------------------------------------------
1 | .logs-panel {
2 | display: flex;
3 | flex-direction: column;
4 | flex-grow: 1;
5 | flex-basis: 0;
6 | list-style: none;
7 | padding: 10px;
8 | border-radius: 2px;
9 | background-color: $color-gray-light;
10 | font-size: 12px;
11 | color: #73808f;
12 | overflow-y: auto;
13 | font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
14 | }
15 |
--------------------------------------------------------------------------------
/src/containers/Overview/index.tsx:
--------------------------------------------------------------------------------
1 | import logo from '@assets/logo-fixing.svg'
2 |
3 | export default function Overview () {
4 | return (
5 | -
75 | {
76 | logs.map(
77 | (log, index) => (
78 |
- 79 | [{ dayjs(log.time).format('YYYY-MM-DD HH:mm:ss') }] 80 | [{ log.type.toUpperCase() }] 81 | { log.payload } 82 | 83 | ), 84 | ) 85 | } 86 |
13 | 
16 |
17 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/containers/Proxies/components/Group/index.tsx:
--------------------------------------------------------------------------------
1 | import { useAtom } from 'jotai'
2 | import { useMemo } from 'react'
3 |
4 | import { Tags, Tag } from '@components'
5 | import { type Group as IGroup } from '@lib/request'
6 | import { useProxy, useConfig, proxyMapping, useClient } from '@stores'
7 |
8 | import './style.scss'
9 |
10 | interface GroupProps {
11 | config: IGroup
12 | }
13 |
14 | export function Group (props: GroupProps) {
15 | const { markProxySelected } = useProxy()
16 | const [proxyMap] = useAtom(proxyMapping)
17 | const { data: Config } = useConfig()
18 | const client = useClient()
19 | const { config } = props
20 |
21 | async function handleChangeProxySelected (name: string) {
22 | await client.changeProxySelected(props.config.name, name)
23 | markProxySelected(props.config.name, name)
24 | if (Config.breakConnections) {
25 | const list: string[] = []
26 | const snapshot = await client.getConnections()
27 | for (const connection of snapshot.data.connections) {
28 | if (connection.chains.includes(props.config.name)) {
29 | list.push(connection.id)
30 | }
31 | }
32 |
33 | await Promise.all(list.map(id => client.closeConnection(id)))
34 | }
35 | }
36 |
37 | const errSet = useMemo(() => {
38 | const set = new SetComing Soon...
18 |
52 |
67 | )
68 | }
69 |
--------------------------------------------------------------------------------
/src/containers/Proxies/components/Group/style.scss:
--------------------------------------------------------------------------------
1 | .proxy-group {
2 | display: flex;
3 | align-items: flex-start;
4 | font-size: 14px;
5 | color: $color-black-light;
6 | }
7 |
8 | @media (max-width: 768px) {
9 | .proxy-group {
10 | flex-direction: column;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/containers/Proxies/components/Provider/index.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 |
3 | import { Card, Tag, Icon, Loading } from '@components'
4 | import { compareDesc } from '@containers/Proxies'
5 | import { Proxy } from '@containers/Proxies/components/Proxy'
6 | import { fromNow } from '@lib/date'
7 | import { useVisible } from '@lib/hook'
8 | import { type Provider as IProvider, type Proxy as IProxy } from '@lib/request'
9 | import { useClient, useI18n, useProxyProviders } from '@stores'
10 |
11 | import './style.scss'
12 |
13 | interface ProvidersProps {
14 | provider: IProvider
15 | }
16 |
17 | export function Provider (props: ProvidersProps) {
18 | const { update } = useProxyProviders()
19 | const { translation, lang } = useI18n()
20 | const client = useClient()
21 |
22 | const { provider } = props
23 | const { t } = translation('Proxies')
24 |
25 | const { visible, hide, show } = useVisible()
26 |
27 | function handleHealthChech () {
28 | show()
29 | client.healthCheckProvider(provider.name).then(async () => await update()).finally(() => hide())
30 | }
31 |
32 | function handleUpdate () {
33 | show()
34 | client.updateProvider(provider.name).then(async () => await update()).finally(() => hide())
35 | }
36 |
37 | const proxies = useMemo(() => {
38 | return (provider.proxies as IProxy[]).slice().sort((a, b) => -1 * compareDesc(a, b))
39 | }, [provider.proxies])
40 |
41 | return (
42 |
53 | { config.name }
54 | { config.type }
55 |
56 |
57 |
66 |
45 |
58 |
46 | { provider.name }
47 | { provider.vehicleType }
48 |
49 |
50 | {
51 | provider.updatedAt &&
52 | { `${t('providerUpdateTime')}: ${fromNow(new Date(provider.updatedAt), lang)}`}
53 | }
54 |
57 | -
59 | {
60 | proxies.map((p: IProxy) => (
61 |
-
62 |
63 |
64 | ))
65 | }
66 |
76 |
89 | )
90 | }
91 |
--------------------------------------------------------------------------------
/src/containers/Proxies/components/Proxy/style.scss:
--------------------------------------------------------------------------------
1 | .proxy-item {
2 | display: flex;
3 | flex-flow: column nowrap;
4 | position: relative;
5 | width: 100%;
6 | height: 110px;
7 | padding: 10px;
8 | border-radius: 4px;
9 | background: $color-white;
10 | user-select: none;
11 | overflow: hidden;
12 | cursor: default;
13 | box-shadow: 2px 5px 20px -3px rgba($color-primary-dark, 0.2);
14 | transition: all 300ms ease;
15 |
16 | .proxy-name {
17 | display: -webkit-box;
18 | margin: 6px 0;
19 | color: $color-primary-darken;
20 | font-size: 10px;
21 | overflow: hidden;
22 | word-break: break-word;
23 | -webkit-line-clamp: 2;
24 | -webkit-box-orient: vertical;
25 | }
26 |
27 | .proxy-delay {
28 | font-size: 10px;
29 | color: rgba($color: $color-primary-darken, $alpha: 0.8);
30 | }
31 |
32 | &:hover {
33 | box-shadow: 0 14px 20px -4px rgba($color-primary-darken, 0.4);
34 | }
35 | }
36 |
37 | @media (max-width: 768px) {
38 | .proxy-item {
39 | $height: 70px;
40 |
41 | flex-flow: row nowrap;
42 | height: $height;
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/src/containers/Proxies/components/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Proxy'
2 | export * from './Group'
3 | export * from './Provider'
4 |
--------------------------------------------------------------------------------
/src/containers/Proxies/index.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 |
3 | import { Card, Header, Icon, Checkbox } from '@components'
4 | import EE from '@lib/event'
5 | import { useRound } from '@lib/hook'
6 | import type * as API from '@lib/request'
7 | import { useI18n, useConfig, useProxy, useProxyProviders, useGeneral } from '@stores'
8 |
9 | import { Proxy, Group, Provider } from './components'
10 | import './style.scss'
11 |
12 | enum sortType {
13 | None,
14 | Asc,
15 | Desc,
16 | }
17 |
18 | const sortMap = {
19 | [sortType.None]: 'sort',
20 | [sortType.Asc]: 'sort-ascending',
21 | [sortType.Desc]: 'sort-descending',
22 | }
23 |
24 | export function compareDesc (a: API.Proxy, b: API.Proxy) {
25 | const lastDelayA = (a.history.length > 0) ? a.history.slice(-1)[0].delay : 0
26 | const lastDelayB = (b.history.length > 0) ? b.history.slice(-1)[0].delay : 0
27 | return (lastDelayB || Number.MAX_SAFE_INTEGER) - (lastDelayA || Number.MAX_SAFE_INTEGER)
28 | }
29 |
30 | function ProxyGroups () {
31 | const { groups, global } = useProxy()
32 | const { data: config, set: setConfig } = useConfig()
33 | const { general } = useGeneral()
34 | const { translation } = useI18n()
35 | const { t } = translation('Proxies')
36 |
37 | const list = useMemo(
38 | () => general.mode === 'global' ? [global, ...groups] : groups,
39 | [general, groups, global],
40 | )
41 |
42 | return <>
43 | {
44 | list.length !== 0 &&
45 |
77 |
80 | {config.type}
81 |
82 |
84 | {config.name}
83 |
85 |
88 | {delayText}{meanDelayText}
86 | { config.udp &&UDP
} 87 |
46 |
47 | setConfig('breakConnections', value)}>
51 | {t('breakConnectionsText')}
52 |
53 |
54 |
55 |
65 |
66 | }
67 |
68 | }
69 |
70 | function ProxyProviders () {
71 | const { providers } = useProxyProviders()
72 | const { translation: useTranslation } = useI18n()
73 | const { t } = useTranslation('Proxies')
74 |
75 | return <>
76 | {
77 | providers.length !== 0 &&
78 | -
56 | {
57 | list.map(p => (
58 |
-
59 |
60 |
61 | ))
62 | }
63 |
79 |
90 | }
91 |
92 | }
93 |
94 | function Proxies () {
95 | const { proxies } = useProxy()
96 | const { translation: useTranslation } = useI18n()
97 | const { t } = useTranslation('Proxies')
98 |
99 | function handleNotitySpeedTest () {
100 | EE.notifySpeedTest()
101 | }
102 |
103 | const { current: sort, next } = useRound(
104 | [sortType.Asc, sortType.Desc, sortType.None],
105 | )
106 | const sortedProxies = useMemo(() => {
107 | switch (sort) {
108 | case sortType.Desc:
109 | return proxies.slice().sort((a, b) => compareDesc(a, b))
110 | case sortType.Asc:
111 | return proxies.slice().sort((a, b) => -1 * compareDesc(a, b))
112 | default:
113 | return proxies.slice()
114 | }
115 | }, [sort, proxies])
116 | const handleSort = next
117 |
118 | return <>
119 | {
120 | sortedProxies.length !== 0 &&
121 | -
81 | {
82 | providers.map(p => (
83 |
-
84 |
85 |
86 | ))
87 | }
88 |
122 |
123 |
127 |
137 | }
138 |
139 | }
140 |
141 | export default function ProxyContainer () {
142 | return (
143 | -
128 | {
129 | sortedProxies.map(p => (
130 |
-
131 |
132 |
133 | ))
134 | }
135 |
144 |
148 | )
149 | }
150 |
--------------------------------------------------------------------------------
/src/containers/Proxies/style.scss:
--------------------------------------------------------------------------------
1 | .proxies-list {
2 | --item-width: calc(100% / (var(--columns) + 1));
3 | --gap: calc(var(--item-width) / var(--columns));
4 |
5 | display: flex;
6 | margin-right: calc(-1 * var(--gap));
7 | margin-top: 20px;
8 | flex-wrap: wrap;
9 | align-content: flex-start;
10 | list-style: none;
11 |
12 | @include response(xxl) {
13 | --columns: 12;
14 | }
15 |
16 | @include response(xl) {
17 | --columns: 10;
18 | }
19 |
20 | @include response(lg) {
21 | --columns: 8;
22 | }
23 |
24 | @include response(md) {
25 | --columns: 7;
26 | }
27 |
28 | @include response(sm) {
29 | --columns: 6;
30 | }
31 |
32 | @include response(xs) {
33 | --columns: 5;
34 | }
35 |
36 | @include response(xxs) {
37 | --columns: 3;
38 | }
39 |
40 | > li {
41 | display: inline-block;
42 | width: var(--item-width);
43 | margin-right: var(--gap);
44 | flex-shrink: 0;
45 | margin-bottom: 10px;
46 | }
47 | }
48 |
49 | .proxies-speed-test {
50 | line-height: 32px;
51 | margin: 0 2px 0 6px;
52 | color: $color-primary-dark;
53 | text-shadow: 0 2px 6px rgba($color: $color-primary-dark, $alpha: 0.4);
54 | cursor: pointer;
55 | }
56 |
57 | @media (max-width: 768px) {
58 | .proxies-list {
59 | margin-right: 0;
60 | padding-bottom: 20px;
61 | flex-wrap: unset;
62 | flex-direction: column;
63 |
64 | > li {
65 | width: 100%;
66 | margin-right: 0;
67 | margin-bottom: 10px;
68 | }
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/src/containers/Rules/Provider/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 |
3 | import { Tag, Icon } from '@components'
4 | import { fromNow } from '@lib/date'
5 | import { useVisible } from '@lib/hook'
6 | import { type RuleProvider } from '@lib/request'
7 | import { useClient, useI18n, useRuleProviders } from '@stores'
8 | import './style.scss'
9 |
10 | interface ProvidersProps {
11 | provider: RuleProvider
12 | }
13 |
14 | export function Provider (props: ProvidersProps) {
15 | const { update } = useRuleProviders()
16 | const { translation, lang } = useI18n()
17 | const client = useClient()
18 |
19 | const { provider } = props
20 | const { t } = translation('Rules')
21 |
22 | const { visible, hide, show } = useVisible()
23 |
24 | function handleUpdate () {
25 | show()
26 | client.updateRuleProvider(provider.name).then(async () => await update()).finally(() => hide())
27 | }
28 |
29 | const updateClassnames = classnames('rule-provider-icon', { 'rule-provider-loading': visible })
30 |
31 | return (
32 |
33 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/containers/Rules/Provider/style.scss:
--------------------------------------------------------------------------------
1 | .rule-provider {
2 | position: relative;
3 | display: flex;
4 | flex-direction: column;
5 | font-size: 16px;
6 | padding: 20px;
7 | color: $color-black-light;
8 | }
9 |
10 | .rule-provider-header {
11 | display: flex;
12 | align-items: center;
13 | justify-content: space-between;
14 | }
15 |
16 | .rule-provider-header-part {
17 | display: flex;
18 | align-items: center;
19 | }
20 |
21 | .rule-provider-name {
22 | width: 120px;
23 | margin-right: 6px;
24 | overflow: hidden;
25 | text-overflow: ellipsis;
26 | white-space: nowrap;
27 | }
28 |
29 | .rule-provider-behavior {
30 | width: 80px;
31 | margin: 0 20px 0 12px;
32 | background-color: $color-primary-dark;
33 | color: #fff;
34 | }
35 |
36 | .rule-provider-spinner {
37 | transform: scale(0.4);
38 | }
39 |
40 | .rule-provider-proxies {
41 | list-style: none;
42 | }
43 |
44 | .rule-provider-item {
45 | box-shadow: 0 0 24px 0 rgba(44, 138, 248, 0.2);
46 |
47 | &:hover {
48 | box-shadow: 0 0 24px 0 rgba(84, 117, 154, 0.4);
49 | }
50 | }
51 |
52 | .rule-provider-update {
53 | line-height: 14px;
54 | font-size: 14px;
55 | }
56 |
57 | .rule-provider-icon {
58 | display: block;
59 | margin-left: 20px;
60 | cursor: pointer;
61 |
62 | &.rule-provider-loading::before {
63 | color: $color-gray-darken;
64 | cursor: not-allowed;
65 | animation: spinner 2s infinite linear;
66 | }
67 | }
68 |
69 | @media (max-width: 768px) {
70 | .rule-provider-header {
71 | flex-direction: column;
72 | align-items: flex-start;
73 | }
74 |
75 | .rule-provider-header-part {
76 | margin: 6px 0;
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/containers/Rules/index.tsx:
--------------------------------------------------------------------------------
1 | import AutoSizer from 'react-virtualized-auto-sizer'
2 | import { FixedSizeList as List } from 'react-window'
3 | import useSWR from 'swr'
4 |
5 | import { Header, Card } from '@components'
6 | import { useI18n, useRule, useRuleProviders } from '@stores'
7 |
8 | import { Provider } from './Provider'
9 | import './style.scss'
10 |
11 | function RuleProviders () {
12 | const { providers } = useRuleProviders()
13 | const { translation } = useI18n()
14 | const { t } = translation('Rules')
15 |
16 | return <>
17 | {
18 | providers.length !== 0 &&
19 |
34 |
48 |
35 | { provider.name }
36 | { provider.vehicleType }
37 | { provider.behavior }
38 | { `${t('ruleCount')}: ${provider.ruleCount}` }
39 |
40 |
41 | {
42 | provider.updatedAt &&
43 | { `${t('providerUpdateTime')}: ${fromNow(new Date(provider.updatedAt), lang)}`}
44 | }
45 |
47 |
20 |
22 | {
23 | providers.map(p => (
24 |
28 |
29 | }
30 |
31 | }
32 |
33 | export default function Rules () {
34 | const { rules, update } = useRule()
35 | const { translation } = useI18n()
36 | const { t } = translation('Rules')
37 |
38 | useSWR('rules', update)
39 |
40 | function renderRuleItem ({ index, style }: { index: number, style: React.CSSProperties }) {
41 | const rule = rules[index]
42 | return (
43 |
45 |
49 | { rule.type }
46 | { rule.payload }
47 | { rule.proxy }
48 |
55 |
58 |
59 | {
60 | ({ height, width }) => (
61 |
72 |
73 |
74 | )
75 | }
76 |
--------------------------------------------------------------------------------
/src/containers/Rules/style.scss:
--------------------------------------------------------------------------------
1 | .rule-item {
2 | line-height: 30px;
3 | padding: 5px 0;
4 | height: 50px;
5 | overflow: hidden;
6 | list-style: none;
7 | user-select: none;
8 | border-bottom: 1px solid rgba($color: $color-primary-lightly, $alpha: 0.5);
9 |
10 | .drag-handler {
11 | cursor: row-resize;
12 | margin: 0 10px;
13 | display: flex;
14 | justify-content: center;
15 |
16 | > i {
17 | font-weight: bold;
18 | color: $color-gray-dark;
19 | }
20 | }
21 |
22 | .rule-type {
23 | font-size: 14px;
24 | color: $color-primary-darken;
25 |
26 | > i {
27 | margin-left: 5px;
28 | color: $color-primary-darken;
29 | }
30 | }
31 |
32 | .payload {
33 | font-size: 14px;
34 | color: $color-primary-darken;
35 | cursor: pointer;
36 | }
37 |
38 | .rule-proxy {
39 | font-size: 14px;
40 | color: $color-primary-darken;
41 | }
42 |
43 | .delete-btn {
44 | opacity: 0;
45 | transition: all 300ms ease;
46 |
47 | span {
48 | font-size: 14px;
49 | color: $color-red;
50 | cursor: pointer;
51 | }
52 | }
53 |
54 | &:last-child {
55 | border-bottom: none;
56 | }
57 |
58 | &:hover {
59 | .delete-btn {
60 | opacity: 1;
61 | }
62 | }
63 | }
64 |
--------------------------------------------------------------------------------
/src/containers/Settings/index.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 | import { useAtom, useAtomValue, useSetAtom } from 'jotai'
3 | import { capitalize } from 'lodash-es'
4 | import { useEffect, useMemo } from 'react'
5 |
6 | import { Header, Card, Switch, ButtonSelect, type ButtonSelectOptions, Input, Select } from '@components'
7 | import { type Lang } from '@i18n'
8 | import { useObject } from '@lib/hook'
9 | import { jsBridge } from '@lib/jsBridge'
10 | import { useI18n, useClashXData, useGeneral, useVersion, useClient, identityAtom, hostSelectIdxStorageAtom, hostsStorageAtom, useAPIInfo } from '@stores'
11 | import './style.scss'
12 |
13 | const languageOptions: ButtonSelectOptions[] = [{ label: '中文', value: 'zh_CN' }, { label: 'English', value: 'en_US' }]
14 |
15 | export default function Settings () {
16 | const { premium } = useVersion()
17 | const { data: clashXData, update: fetchClashXData } = useClashXData()
18 | const { general, update: fetchGeneral } = useGeneral()
19 | const setIdentity = useSetAtom(identityAtom)
20 | const [hostSelectIdx, setHostSelectIdx] = useAtom(hostSelectIdxStorageAtom)
21 | const hostsStorage = useAtomValue(hostsStorageAtom)
22 | const apiInfo = useAPIInfo()
23 | const { translation, setLang, lang } = useI18n()
24 | const { t } = translation('Settings')
25 | const client = useClient()
26 | const [info, set] = useObject({
27 | socks5ProxyPort: 7891,
28 | httpProxyPort: 7890,
29 | mixedProxyPort: 0,
30 | })
31 |
32 | useEffect(() => {
33 | set('socks5ProxyPort', general?.socksPort ?? 0)
34 | set('httpProxyPort', general?.port ?? 0)
35 | set('mixedProxyPort', general?.mixedPort ?? 0)
36 | }, [general, set])
37 |
38 | async function handleProxyModeChange (mode: string) {
39 | await client.updateConfig({ mode })
40 | await fetchGeneral()
41 | }
42 |
43 | async function handleStartAtLoginChange (state: boolean) {
44 | await jsBridge?.setStartAtLogin(state)
45 | await fetchClashXData()
46 | }
47 |
48 | async function handleSetSystemProxy (state: boolean) {
49 | await jsBridge?.setSystemProxy(state)
50 | await fetchClashXData()
51 | }
52 |
53 | function changeLanguage (language: Lang) {
54 | setLang(language)
55 | }
56 |
57 | async function handleHttpPortSave () {
58 | await client.updateConfig({ port: info.httpProxyPort })
59 | await fetchGeneral()
60 | }
61 |
62 | async function handleSocksPortSave () {
63 | await client.updateConfig({ 'socks-port': info.socks5ProxyPort })
64 | await fetchGeneral()
65 | }
66 |
67 | async function handleMixedPortSave () {
68 | await client.updateConfig({ 'mixed-port': info.mixedProxyPort })
69 | await fetchGeneral()
70 | }
71 |
72 | async function handleAllowLanChange (state: boolean) {
73 | await client.updateConfig({ 'allow-lan': state })
74 | await fetchGeneral()
75 | }
76 |
77 | const {
78 | hostname: externalControllerHost,
79 | port: externalControllerPort,
80 | } = apiInfo
81 |
82 | const { allowLan, mode } = general
83 |
84 | const startAtLogin = clashXData?.startAtLogin ?? false
85 | const systemProxy = clashXData?.systemProxy ?? false
86 | const isClashX = clashXData?.isClashX ?? false
87 |
88 | const proxyModeOptions = useMemo(() => {
89 | const options = [
90 | { label: t('values.global'), value: 'Global' },
91 | { label: t('values.rules'), value: 'Rule' },
92 | { label: t('values.direct'), value: 'Direct' },
93 | ] as Array<{ label: string, value: string }>
94 | if (premium) {
95 | options.push({ label: t('values.script'), value: 'Script' })
96 | }
97 | return options
98 | }, [t, premium])
99 |
100 | const controllerOptions = hostsStorage.map(
101 | (h, idx) => ({ value: idx, label: {h.hostname} }),
102 | )
103 |
104 | const controllers = isClashX
105 | ? {`${externalControllerHost}:${externalControllerPort}`}
106 | : (
107 | <>
108 | -
67 | { renderRuleItem }
68 |