diff --git a/src/containers/Rules/Provider/index.tsx b/src/containers/Rules/Provider/index.tsx
new file mode 100644
index 0000000..b4447cf
--- /dev/null
+++ b/src/containers/Rules/Provider/index.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import classnames from 'classnames'
+import { Card, Tag, Icon } from '@components'
+import { useI18n, useRuleProviders } from '@stores'
+import { fromNow } from '@lib/date'
+import { RuleProvider, updateRuleProvider } from '@lib/request'
+import { useVisible } from '@lib/hook'
+import './style.scss'
+
+interface ProvidersProps {
+ provider: RuleProvider
+}
+
+export function Provider (props: ProvidersProps) {
+ const { update } = useRuleProviders()
+ const { useTranslation, lang } = useI18n()
+
+ const { provider } = props
+ const { t } = useTranslation('Proxies')
+
+ const { visible, hide, show } = useVisible()
+
+ function handleUpdate () {
+ show()
+ updateRuleProvider(provider.name).then(() => update()).finally(() => hide())
+ }
+
+ const updateClassnames = classnames('rule-provider-icon', { 'rule-provider-loading': visible })
+
+ return (
+
+
+
+ { provider.name }
+ { provider.vehicleType }
+ { provider.behavior }
+
+
+ {
+ provider.updatedAt &&
+ { `${t('providerUpdateTime')}: ${fromNow(new Date(provider.updatedAt), lang)}`}
+ }
+
+
+
+ )
+}
diff --git a/src/containers/Rules/Provider/style.scss b/src/containers/Rules/Provider/style.scss
new file mode 100644
index 0000000..87cbded
--- /dev/null
+++ b/src/containers/Rules/Provider/style.scss
@@ -0,0 +1,79 @@
+@import '~@styles/variables';
+
+.rule-provider {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ font-size: 16px;
+ padding: 20px;
+ color: $color-black-light;
+}
+
+.rule-provider-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.rule-provider-header-part {
+ display: flex;
+ align-items: center;
+}
+
+.rule-provider-name {
+ width: 120px;
+ margin-right: 6px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.rule-provider-behavior {
+ margin-left: 12px;
+ background-color: $color-primary-dark;
+ color: #fff;
+}
+
+.rule-provider-spinner {
+ transform: scale(0.4);
+}
+
+.rule-provider-proxies {
+ list-style: none;
+}
+
+.rule-provider-item {
+ box-shadow: 0 0 24px 0 rgba(44, 138, 248, 0.2);
+
+ &:hover {
+ box-shadow: 0 0 24px 0 rgba(84, 117, 154, 0.4);
+ }
+}
+
+.rule-provider-update {
+ line-height: 14px;
+ font-size: 14px;
+}
+
+.rule-provider-icon {
+ display: block;
+ margin-left: 20px;
+ cursor: pointer;
+
+ &.rule-provider-loading::before {
+ color: $color-gray-darken;
+ cursor: not-allowed;
+ animation: spinner 2s infinite linear;
+ }
+}
+
+@media (max-width: 768px) {
+ .rule-provider-header {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ .rule-provider-header-part {
+ margin: 6px 0;
+ }
+}
diff --git a/src/containers/Rules/index.tsx b/src/containers/Rules/index.tsx
index 48d6eee..dc50f6b 100644
--- a/src/containers/Rules/index.tsx
+++ b/src/containers/Rules/index.tsx
@@ -1,11 +1,43 @@
-import React from 'react'
+import React, { useLayoutEffect } from 'react'
import { Header, Card, Row, Col } from '@components'
-import { useI18n, useRule } from '@stores'
+import { useI18n, useRule, useRuleProviders, useVersion } from '@stores'
import { FixedSizeList as List } from 'react-window'
import AutoSizer from 'react-virtualized-auto-sizer'
import useSWR from 'swr'
+import { Provider } from './Provider'
import './style.scss'
+function RuleProviders () {
+ const { providers, update } = useRuleProviders()
+ const { premium } = useVersion()
+ const { useTranslation } = useI18n()
+ const { t } = useTranslation('Rules')
+
+ useLayoutEffect(() => {
+ if (premium) {
+ update()
+ }
+ }, [premium])
+
+ return <>
+ {
+ providers.length !== 0 &&
+
+
+
+ {
+ providers.map(p => (
+ -
+
+
+ ))
+ }
+
+
+ }
+
+}
+
export default function Rules () {
const { rules, update } = useRule()
const { useTranslation } = useI18n()
@@ -34,6 +66,7 @@ export default function Rules () {
return (
+
diff --git a/src/containers/Settings/index.tsx b/src/containers/Settings/index.tsx
index 76429fc..383bb51 100644
--- a/src/containers/Settings/index.tsx
+++ b/src/containers/Settings/index.tsx
@@ -4,7 +4,7 @@ import { Header, Card, Row, Col, Switch, ButtonSelect, ButtonSelectOptions, Inpu
import { useI18n, useClashXData, useAPIInfo, useGeneral, useIdentity } from '@stores'
import { updateConfig } from '@lib/request'
import { useObject } from '@lib/hook'
-import { isClashX, jsBridge } from '@lib/jsBridge'
+import { jsBridge } from '@lib/jsBridge'
import { Lang } from '@i18n'
import './style.scss'
@@ -19,15 +19,12 @@ export default function Settings () {
const { t } = useTranslation('Settings')
const [info, set] = useObject({
socks5ProxyPort: 7891,
- httpProxyPort: 7890,
- isClashX: false
+ httpProxyPort: 7890
})
useEffect(() => {
fetchGeneral()
- if (isClashX()) {
- fetchClashXData().then(() => set('isClashX', true))
- }
+ fetchClashXData()
}, [])
useEffect(() => {
@@ -96,7 +93,7 @@ export default function Settings () {
{t('labels.startAtLogin')}
-
+
@@ -115,7 +112,7 @@ export default function Settings () {
diff --git a/src/containers/Sidebar/index.tsx b/src/containers/Sidebar/index.tsx
index e37fb3f..bac28f0 100644
--- a/src/containers/Sidebar/index.tsx
+++ b/src/containers/Sidebar/index.tsx
@@ -1,7 +1,7 @@
import * as React from 'react'
import { NavLink } from 'react-router-dom'
import classnames from 'classnames'
-import { useI18n, useVersion } from '@stores'
+import { useI18n, useVersion, useClashXData } from '@stores'
import './style.scss'
import logo from '@assets/logo.png'
@@ -20,9 +20,11 @@ export default function Sidebar (props: SidebarProps) {
const { routes } = props
const { useTranslation } = useI18n()
const { version, premium, update } = useVersion()
+ const { data: { isClashX }, update: updateClashXData } = useClashXData()
const { t } = useTranslation('SideBar')
useSWR('version', update)
+ useSWR('clashx', updateClashXData)
const navlinks = routes.map(
({ path, name, exact, noMobile }) => (
@@ -39,7 +41,7 @@ export default function Sidebar (props: SidebarProps) {
{ navlinks }
- Clash { t('Version') }
+ Clash{ isClashX && 'X' } { t('Version') }
{ version }
{ premium && Premium }
diff --git a/src/i18n/en_US.ts b/src/i18n/en_US.ts
index 6ed55ef..8470a7e 100644
--- a/src/i18n/en_US.ts
+++ b/src/i18n/en_US.ts
@@ -41,7 +41,9 @@ export default {
title: 'Logs'
},
Rules: {
- title: 'Rules'
+ title: 'Rules',
+ providerTitle: 'Providers',
+ providerUpdateTime: 'Last updated at'
},
Connections: {
title: 'Connections',
diff --git a/src/i18n/zh_CN.ts b/src/i18n/zh_CN.ts
index 15f4b9b..6ca740f 100644
--- a/src/i18n/zh_CN.ts
+++ b/src/i18n/zh_CN.ts
@@ -41,7 +41,9 @@ export default {
title: '日志'
},
Rules: {
- title: '规则'
+ title: '规则',
+ providerTitle: '规则集',
+ providerUpdateTime: '最后更新于'
},
Connections: {
title: '连接',
diff --git a/src/lib/request.ts b/src/lib/request.ts
index 3b53358..f350dbf 100644
--- a/src/lib/request.ts
+++ b/src/lib/request.ts
@@ -25,23 +25,32 @@ export interface Rule {
}
export interface Proxies {
- proxies: {
- [key: string]: Proxy | Group
- }
+ proxies: Record
}
export interface Provider {
name: string
proxies: Array
- type: 'Proxy' | 'Rule'
+ type: 'Proxy'
vehicleType: 'HTTP' | 'File' | 'Compatible'
updatedAt?: string
}
+export interface RuleProvider {
+ name: string
+ type: 'Rule'
+ vehicleType: 'HTTP' | 'File'
+ behavior: string
+ ruleCount: number
+ updatedAt?: string
+}
+
+export interface RuleProviders {
+ providers: Record
+}
+
export interface ProxyProviders {
- providers: {
- [key: string]: Provider
- }
+ providers: Record
}
interface History {
@@ -159,11 +168,21 @@ export async function getProxyProviders () {
})
}
+export async function getRuleProviders () {
+ const req = await getInstance()
+ return req.get('providers/rules')
+}
+
export async function updateProvider (name: string) {
const req = await getInstance()
return req.put(`providers/proxies/${encodeURIComponent(name)}`)
}
+export async function updateRuleProvider (name: string) {
+ const req = await getInstance()
+ return req.put(`providers/rules/${encodeURIComponent(name)}`)
+}
+
export async function healthCheckProvider (name: string) {
const req = await getInstance()
return req.get(`providers/proxies/${encodeURIComponent(name)}/healthcheck`)
diff --git a/src/stores/recoil.ts b/src/stores/recoil.ts
index 25bb52b..ed4618e 100644
--- a/src/stores/recoil.ts
+++ b/src/stores/recoil.ts
@@ -7,7 +7,7 @@ import { getLanguage, setLanguage, Lang, locales, Language } from '@i18n'
import { useRecoilObjectWithImmer } from '@lib/recoil'
import * as API from '@lib/request'
import { setLocalStorageItem, partition, to } from '@lib/helper'
-import { jsBridge } from '@lib/jsBridge'
+import { jsBridge, isClashX } from '@lib/jsBridge'
import * as Models from '@models'
const identity = atom({
@@ -62,6 +62,32 @@ export function useI18n () {
return { lang, locales, setLang, useTranslation }
}
+export const version = atom({
+ key: 'version',
+ default: {
+ version: '',
+ premium: false
+ }
+})
+
+export function useVersion () {
+ const [data, set] = useRecoilState(version)
+ const { set: setIdentity } = useIdentity()
+
+ async function update () {
+ const [resp, err] = await to(API.getVersion())
+ setIdentity(!err)
+
+ set(
+ err
+ ? { version: '', premium: false }
+ : { version: resp.data.version, premium: !!resp.data.premium }
+ )
+ }
+
+ return { version: data.version, premium: data.premium, update }
+}
+
export const config = atom({
key: 'config',
default: {
@@ -97,6 +123,31 @@ export function useProxyProviders () {
return { providers: data, update }
}
+export const ruleProvider = atom({
+ key: 'ruleProvider',
+ default: [] as API.RuleProvider[]
+})
+
+export function useRuleProviders () {
+ const [data, set] = useRecoilState(ruleProvider)
+ const [{ premium }] = useRecoilState(version)
+
+ async function update () {
+ if (!premium) {
+ return
+ }
+
+ const ruleProviders = await API.getRuleProviders()
+
+ const providers = Object.keys(ruleProviders.data.providers)
+ .map(name => ruleProviders.data.providers[name])
+
+ set(providers)
+ }
+
+ return { providers: data, update }
+}
+
export const general = atom({
key: 'general',
default: {} as Models.Data['general']
@@ -179,35 +230,10 @@ export const proxyMapping = selector({
}
})
-export const version = atom({
- key: 'version',
- default: {
- version: '',
- premium: false
- }
-})
-
-export function useVersion () {
- const [data, set] = useRecoilState(version)
- const { set: setIdentity } = useIdentity()
-
- async function update () {
- const [resp, err] = await to(API.getVersion())
- setIdentity(!err)
-
- set(
- err
- ? { version: '', premium: false }
- : { version: resp.data.version, premium: !!resp.data.premium }
- )
- }
-
- return { version: data.version, premium: data.premium, update }
-}
-
export const clashxData = atom({
key: 'clashxData',
default: {
+ isClashX: false,
startAtLogin: false,
systemProxy: false
}
@@ -217,10 +243,14 @@ export function useClashXData () {
const [data, set] = useRecoilState(clashxData)
async function update () {
+ if (!isClashX()) {
+ return
+ }
+
const startAtLogin = await jsBridge.getStartAtLogin()
const systemProxy = await jsBridge.isSystemProxySet()
- set({ startAtLogin, systemProxy })
+ set({ startAtLogin, systemProxy, isClashX: true })
}
return { data, update }