Revert "update to 0.3.6"

This reverts commit e33fb875dd.

.github/dependabot.yml

@@ -1,7 +0,0 @@
-version: 2
-updates:
-  # Maintain dependencies for GitHub Actions
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    schedule:
-      interval: 'daily'

.github/workflows/push.yml

@@ -1,30 +0,0 @@
-name: Deploy
-
-on: [push]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Dashboard code
-        uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v2
-        with:
-          version: latest
-      - name: Setup Nodejs
-        uses: actions/setup-node@v3
-        with:
-          node-version: '18.x'
-          cache: pnpm
-      - name: Install package and build
-        run: |
-          pnpm install --no-frozen-lockfile
-          pnpm build
-      - name: Deploy
-        uses: crazy-max/ghaction-github-pages@v2
-        with:
-          target_branch: gh-pages
-          build_dir: public
-          fqdn: yacd.metacubex.one
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,2 +0,0 @@
-node_modules
-public

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged

README.md

@@ -1,7 +1,5 @@
-[中文](./README_CN.md)
-
 <h1 align="center">
-  <img src="https://user-images.githubusercontent.com/78135608/232244383-5e1389db-ce56-4c83-9627-4f3d1a489c6e.png" alt="yacd">
+  <img src="https://user-images.githubusercontent.com/1166872/47954055-97e6cb80-dfc0-11e8-991f-230fd40481e5.png" alt="yacd">
 </h1>
 
 > Yet Another [Clash](https://github.com/yaling888/clash) [Dashboard](https://github.com/yaling888/clash-dashboard)
@@ -10,7 +8,8 @@
 
 Install [twemoji](https://github.com/mozilla/twemoji-colr/releases) to display emoji better on Windows system.
 
-The site http://yacd.metacubex.one is served with HTTP not HTTPS is because many browsers block requests to HTTP resources from a HTTPS website. If you think it's not safe, you could just download the [zip of the gh-pages](https://github.com/MetaCubeX/yacd/archive/gh-pages.zip), unzip and serve those static files with a web server(like Nginx).
+
+The site http://yacd.metacubex.one is served with HTTP not HTTPS is because many browsers block requests to HTTP resources from a HTTPS website. If you think it's not safe, you could just download the [zip of the gh-pages](https://github.com/yaling888/yacd/archive/gh-pages.zip), unzip and serve those static files with a web server(like Nginx).
 
 **Supported URL query params**
 

README_CN.md

@@ -1,36 +0,0 @@
-<h1 align="center">
-  <img src="https://user-images.githubusercontent.com/78135608/232244383-5e1389db-ce56-4c83-9627-4f3d1a489c6e.png" alt="yacd">
-</h1>
-
-> Yet Another [Clash](https://github.com/yaling888/clash) [Dashboard](https://github.com/yaling888/clash-dashboard)
-
-## 用法
-
-安装[twemoji](https://github.com/mozilla/twemoji-colr/releases)以在 Windows 系统上更好地显示表情符号。
-
-网站 http://yacd.metacubex.one 是通过 HTTP 提供服务的，而不是 HTTPS，因为许多浏览器会阻止从 HTTPS 网站请求 HTTP 资源。如果认为这不安全，可以下载[gh-pages 的 zip 文件](https://github.com/MetaCubeX/yacd/archive/gh-pages.zip)，解压缩并使用 Web 服务器（如 Nginx）提供这些静态文件。
-
-**支持的 URL 查询参数**
-
-| 参数     | 描述                                                               |
-| -------- | ------------------------------------------------------------------ |
-| hostname | Clash 后端 API 的主机名（通常是`external-controller`的 host 部分） |
-| port     | Clash 后端 API 的端口号（通常是`external-controller`的 port 部分） |
-| secret   | Clash API 密钥（`config.yaml`中的"secret"）                        |
-| theme    | UI 颜色方案（dark、light、auto）                                   |
-
-## 开发部署
-
-```sh
-# 安装依赖库
-# 你可以使用 `npm i -g pnpm` 安装 pnpm
-pnpm i
-
- # 启动开发服务器
- # 然后访问 http://127.0.0.1:3000
- pnpm start
-
- # 构建优化资源
- # 准备好部署的资源将在目录 `public` 中
- pnpm build
-```

package.json

@@ -1,8 +1,8 @@
 {
   "name": "yacd",
-  "version": "0.3.6",
+  "version": "0.3.5",
   "description": "Yet another Clash dashboard",
-  "author": "MetaCubeX (https://github.com/MetaCubeX)",
+  "author": "Haishan <haishanhan@gmail.com> (https://haishan.me)",
   "license": "MIT",
   "private": true,
   "keywords": [

src/api/configs.ts

@@ -5,8 +5,6 @@ import { ClashAPIConfig } from '~/types';
 const endpoint = '/configs';
 const updateGeoDatabasesFileEndpoint = '/configs/geo';
 const flushFakeIPPoolEndpoint = '/cache/fakeip/flush';
-const restartCoreEndpoint = '/restart';
-const upgradeCoreEndpoint = '/upgrade';
 
 export async function fetchConfigs(apiConfig: ClashAPIConfig) {
   const { url, init } = getURLAndInit(apiConfig);
@@ -44,18 +42,6 @@ export async function updateGeoDatabasesFile(apiConfig: ClashAPIConfig) {
   return await fetch(url + updateGeoDatabasesFileEndpoint, { ...init, body, method: 'POST' });
 }
 
-export async function restartCore(apiConfig: ClashAPIConfig) {
-  const { url, init } = getURLAndInit(apiConfig);
-  const body = '{"path": "", "payload": ""}';
-  return await fetch(url + restartCoreEndpoint, { ...init, body, method: 'POST' });
-}
-
-export async function upgradeCore(apiConfig: ClashAPIConfig) {
-  const { url, init } = getURLAndInit(apiConfig);
-  const body = '{"path": "", "payload": ""}';
-  return await fetch(url + upgradeCoreEndpoint, { ...init, body, method: 'POST' });
-}
-
 export async function flushFakeIPPool(apiConfig: ClashAPIConfig) {
   const { url, init } = getURLAndInit(apiConfig);
   return await fetch(url + flushFakeIPPoolEndpoint, { ...init, method: 'POST' });

src/api/connections.ts

@@ -5,12 +5,6 @@ import { buildWebSocketURL, getURLAndInit } from '../misc/request-helper';
 const endpoint = '/connections';
 
 const fetched = false;
-
-interface Subscriber {
-  listner: unknown; // on data received, listener will be called with data
-  onClose: () => void; // on stream closed, onClose will be called
-}
-
 const subscribers = [];
 
 // see also https://github.com/Dreamacro/clash/blob/dev/constant/metadata.go#L41
@@ -54,49 +48,28 @@ function appendData(s: string) {
     // eslint-disable-next-line no-console
     console.log('JSON.parse error', JSON.parse(s));
   }
-  subscribers.forEach((s) => s.listner(o));
+  subscribers.forEach((f) => f(o));
 }
 
 type UnsubscribeFn = () => void;
 
 let wsState: number;
-export function fetchData(
+export function fetchData(apiConfig: ClashAPIConfig, listener: unknown): UnsubscribeFn | void {
-  apiConfig: ClashAPIConfig,
-  listener: unknown,
-  onClose: () => void
-): UnsubscribeFn | void {
   if (fetched || wsState === 1) {
-    if (listener)
+    if (listener) return subscribe(listener);
-      return subscribe({
-        listner: listener,
-        onClose,
-      });
   }
   wsState = 1;
   const url = buildWebSocketURL(apiConfig, endpoint);
   const ws = new WebSocket(url);
-  ws.addEventListener('error', () => {
+  ws.addEventListener('error', () => (wsState = 3));
-    wsState = 3;
-    subscribers.forEach((s) => s.onClose());
-    subscribers.length = 0;
-  });
-  ws.addEventListener('close', () => {
-    wsState = 3;
-    subscribers.forEach((s) => s.onClose());
-    subscribers.length = 0;
-  });
   ws.addEventListener('message', (event) => appendData(event.data));
-  if (listener)
+  if (listener) return subscribe(listener);
-    return subscribe({
-      listner: listener,
-      onClose,
-    });
 }
 
-function subscribe(subscriber: Subscriber): UnsubscribeFn {
+function subscribe(listener: unknown): UnsubscribeFn {
-  subscribers.push(subscriber);
+  subscribers.push(listener);
   return function unsubscribe() {
-    const idx = subscribers.indexOf(subscriber);
+    const idx = subscribers.indexOf(listener);
     subscribers.splice(idx, 1);
   };
 }

src/api/memory.ts

@@ -1,119 +0,0 @@
-import { ClashAPIConfig } from '~/types';
-
-import { buildWebSocketURL, getURLAndInit } from '../misc/request-helper';
-
-const endpoint = '/memory';
-const textDecoder = new TextDecoder('utf-8');
-
-const Size = 150;
-
-const memory = {
-  labels: Array(Size).fill(0),
-  inuse: Array(Size),
-  oslimit: Array(Size),
-
-  size: Size,
-  subscribers: [],
-  appendData(o: { inuse: number; oslimit: number }) {
-    this.inuse.shift();
-    this.oslimit.shift();
-    this.labels.shift();
-
-    const l = Date.now();
-    this.inuse.push(o.inuse);
-    this.oslimit.push(o.oslimit);
-    this.labels.push(l);
-
-    this.subscribers.forEach((f) => f(o));
-  },
-
-  subscribe(listener: (x: any) => void) {
-    this.subscribers.push(listener);
-    return () => {
-      const idx = this.subscribers.indexOf(listener);
-      this.subscribers.splice(idx, 1);
-    };
-  },
-};
-
-let fetched = false;
-let decoded = '';
-
-function parseAndAppend(x: string) {
-  memory.appendData(JSON.parse(x));
-}
-
-function pump(reader: ReadableStreamDefaultReader) {
-  return reader.read().then(({ done, value }) => {
-    const str = textDecoder.decode(value, { stream: !done });
-    decoded += str;
-
-    const splits = decoded.split('\n');
-
-    const lastSplit = splits[splits.length - 1];
-
-    for (let i = 0; i < splits.length - 1; i++) {
-      parseAndAppend(splits[i]);
-    }
-
-    if (done) {
-      parseAndAppend(lastSplit);
-      decoded = '';
-
-      // eslint-disable-next-line no-console
-      console.log('GET /memory streaming done');
-      fetched = false;
-      return;
-    } else {
-      decoded = lastSplit;
-    }
-    return pump(reader);
-  });
-}
-
-// 1 OPEN
-// other value CLOSED
-// similar to ws readyState but not the same
-// https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/readyState
-let wsState: number;
-function fetchData(apiConfig: ClashAPIConfig) {
-  if (fetched || wsState === 1) return memory;
-  wsState = 1;
-  const url = buildWebSocketURL(apiConfig, endpoint);
-  const ws = new WebSocket(url);
-  ws.addEventListener('error', function (_ev) {
-    wsState = 3;
-  });
-  ws.addEventListener('close', function (_ev) {
-    wsState = 3;
-    fetchDataWithFetch(apiConfig);
-  });
-  ws.addEventListener('message', function (event) {
-    parseAndAppend(event.data);
-  });
-  return memory;
-}
-
-function fetchDataWithFetch(apiConfig: ClashAPIConfig) {
-  if (fetched) return memory;
-  fetched = true;
-  const { url, init } = getURLAndInit(apiConfig);
-  fetch(url + endpoint, init).then(
-    (response) => {
-      if (response.ok) {
-        const reader = response.body.getReader();
-        pump(reader);
-      } else {
-        fetched = false;
-      }
-    },
-    (err) => {
-      // eslint-disable-next-line no-console
-      console.log('fetch /memory error', err);
-      fetched = false;
-    }
-  );
-  return memory;
-}
-
-export { fetchData };

src/api/proxies.ts

@@ -34,7 +34,7 @@ export async function requestToSwitchProxy(apiConfig, name1, name2) {
 export async function requestDelayForProxy(
   apiConfig,
   name,
-  latencyTestUrl = 'https://www.gstatic.com/generate_204'
+  latencyTestUrl = 'http://www.gstatic.com/generate_204'
 ) {
   const { url, init } = getURLAndInit(apiConfig);
   const qs = `timeout=5000&url=${encodeURIComponent(latencyTestUrl)}`;

src/components/Config.tsx

@@ -15,10 +15,8 @@ import {
   flushFakeIPPool,
   getConfigs,
   reloadConfigFile,
-  restartCore,
   updateConfigs,
   updateGeoDatabasesFile,
-  upgradeCore,
 } from '../store/configs';
 import { openModal } from '../store/modals';
 import Button from './Button';
@@ -208,14 +206,6 @@ function ConfigImpl({
     dispatch(reloadConfigFile(apiConfig));
   }, [apiConfig, dispatch]);
 
-  const handleRestartCore = useCallback(() => {
-    dispatch(restartCore(apiConfig));
-  }, [apiConfig, dispatch]);
-
-  const handleUpgradeCore = useCallback(() => {
-    dispatch(upgradeCore(apiConfig));
-  }, [apiConfig, dispatch]);
-
   const handleUpdateGeoDatabasesFile = useCallback(() => {
     dispatch(updateGeoDatabasesFile(apiConfig));
   }, [apiConfig, dispatch]);
@@ -361,22 +351,6 @@ function ConfigImpl({
                 onClick={handleFlushFakeIPPool}
               />
             </div>
-            <div>
-              <div className={s0.label}>Restart</div>
-              <Button
-                start={<RotateCw size={16} />}
-                label={t('restart_core')}
-                onClick={handleRestartCore}
-              />
-            </div>
-            <div>
-              <div className={s0.label}>⚠️ Upgrade ⚠️</div>
-              <Button
-                start={<RotateCw size={16} />}
-                label={t('upgrade_core')}
-                onClick={handleUpgradeCore}
-              />
-            </div>
           </div>
           <div className={s0.sep}>
             <div />

src/components/ConnectionTable.module.scss

@@ -5,15 +5,15 @@
 }
 
 .th {
-  padding: 3% 2px;
+  padding: 8px 10px;
   height: 50px;
   background: var(--color-background);
   position: sticky;
   top: 0;
-  font-size: 1em;
+  font-size: 0.9em;
-  user-select: none;
   text-align: center;
-  vertical-align: middle;
+  user-select: none;
+
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -23,42 +23,10 @@
   }
 }
 
-.thdu {
-  padding: 3% 2px;
-  height: 50px;
-  background: var(--color-background);
-  position: sticky;
-  top: 0;
-  font-size: 1em;
-  user-select: none;
-  text-align: center;
-  vertical-align: middle;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    color: var(--color-text-highlight);
-  }
-}
-
-.break {
-  word-wrap: break-word;
-  word-break: break-all;
-  align-items: center;
-  text-align: left;
-}
-
 .td {
-  /* 上边下边 | 左边右边 */
+  padding: 8px 13px;
-  padding: 10px 2px;
   font-size: 0.9em;
-  // max-width: 14em;
-  min-width: 9em;
   cursor: default;
-  align-items: center;
-  text-align: left;
-  vertical-align: middle;
   &:hover {
     color: var(--color-text-highlight);
   }
@@ -70,16 +38,15 @@
 }
 
 /* download upload td cells */
-.center {
+.du {
-  min-width: 7em;
+  text-align: right;
-  text-align: center;
 }
 
 .sortIconContainer {
   display: inline-flex;
-  margin-left: 0.5em;
+  margin-left: 10px;
-  width: 1em;
+  width: 16px;
-  height: 1em;
+  height: 16px;
 }
 
 .rotate180 {

src/components/ConnectionTable.tsx

@@ -13,19 +13,19 @@ const sortDescFirst = true;
 
 const columns = [
   { accessor: 'id', show: false },
-  { Header: 'c_type', accessor: 'type' },
-  { Header: 'c_process', accessor: 'process' },
   { Header: 'c_host', accessor: 'host' },
-  { Header: 'c_rule', accessor: 'rule' },
+  { Header: 'c_sni', accessor: 'sniffHost' },
-  { Header: 'c_chains', accessor: 'chains' },
+  { Header: 'c_process', accessor: 'process' },
-  { Header: 'c_time', accessor: 'start' },
-  { Header: 'c_dl_speed', accessor: 'downloadSpeedCurr', sortDescFirst },
-  { Header: 'c_ul_speed', accessor: 'uploadSpeedCurr', sortDescFirst },
   { Header: 'c_dl', accessor: 'download', sortDescFirst },
   { Header: 'c_ul', accessor: 'upload', sortDescFirst },
+  { Header: 'c_dl_speed', accessor: 'downloadSpeedCurr', sortDescFirst },
+  { Header: 'c_ul_speed', accessor: 'uploadSpeedCurr', sortDescFirst },
+  { Header: 'c_chains', accessor: 'chains' },
+  { Header: 'c_rule', accessor: 'rule' },
+  { Header: 'c_time', accessor: 'start', sortDescFirst },
   { Header: 'c_source', accessor: 'source' },
   { Header: 'c_destination_ip', accessor: 'destinationIP' },
-  { Header: 'c_sni', accessor: 'sniffHost' },
+  { Header: 'c_type', accessor: 'type' },
 ];
 
 function renderCell(cell: { column: { id: string }; value: number }, locale: Locale) {
@@ -71,11 +71,8 @@ function Table({ data }) {
       {headerGroups.map((headerGroup) => {
         return (
           <div {...headerGroup.getHeaderGroupProps()} className={s.tr}>
-            {headerGroup.headers.map((column, index) => (
+            {headerGroup.headers.map((column) => (
-              <div
+              <div {...column.getHeaderProps(column.getSortByToggleProps())} className={s.th}>
-                {...column.getHeaderProps(column.getSortByToggleProps())}
-                className={index == 0 || (index >= 5 && index < 10) ? s.thdu : s.th}
-              >
                 <span>{t(column.render('Header'))}</span>
                 <span className={s.sortIconContainer}>
                   {column.isSorted ? (
@@ -96,8 +93,7 @@ function Table({ data }) {
                     className={cx(
                       s.td,
                       i % 2 === 0 ? s.odd : false,
-                      j == 0 || (j >= 5 && j < 10) ? s.center : true
+                      j >= 2 && j <= 5 ? s.du : false
-                      // j ==1 ? s.break : true
                     )}
                   >
                     {renderCell(cell, locale)}

src/components/Connections.css

@@ -47,7 +47,3 @@
 .react-tabs__tab-panel--selected {
   display: block;
 }
-
-._btn_lzu00_1 {
-  margin-right: 10px;
-}

src/components/Connections.tsx

@@ -11,7 +11,6 @@ import { State } from '~/store/types';
 import * as connAPI from '../api/connections';
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 import { getClashAPIConfig } from '../store/app';
-import Button from './Button';
 import s from './Connections.module.scss';
 import ConnectionTable from './ConnectionTable';
 import ContentHeader from './ContentHeader';
@@ -59,14 +58,10 @@ function hasSubstring(s: string, pat: string) {
   return s.toLowerCase().includes(pat.toLowerCase());
 }
 
-function filterConnIps(conns: FormattedConn[], ipStr: string) {
+function filterConns(conns: FormattedConn[], keyword: string) {
-  return conns.filter((each) => each.sourceIP === ipStr);
+  return !keyword
-}
+    ? conns
-
+    : conns.filter((conn) =>
-function filterConns(conns: FormattedConn[], keyword: string, sourceIp: string) {
-  let result = conns;
-  if (keyword !== '') {
-    result = conns.filter((conn) =>
         [
           conn.host,
           conn.sourceIP,
@@ -77,21 +72,9 @@ function filterConns(conns: FormattedConn[], keyword: string, sourceIp: string)
           conn.type,
           conn.network,
           conn.process,
-      ].some((field) => {
+        ].some((field) => hasSubstring(field, keyword))
-        return hasSubstring(field, keyword);
-      })
     );
 }
-  if (sourceIp !== '') {
-    result = filterConnIps(result, sourceIp);
-  }
-
-  return result;
-}
-
-function getConnIpList(conns: FormattedConn[]) {
-  return Array.from(new Set(conns.map((x) => x.sourceIP))).sort();
-}
 
 function formatConnectionDataItem(
   i: ConnectionItem,
@@ -120,7 +103,7 @@ function formatConnectionDataItem(
     upload,
     download,
     start: now - new Date(start).valueOf(),
-    chains: modifyChains(chains),
+    chains: chains.reverse().join(' / '),
     rule: !rulePayload ? rule : `${rule} :: ${rulePayload}`,
     ...metadata,
     host: `${host2}:${destinationPort}`,
@@ -134,24 +117,6 @@ function formatConnectionDataItem(
   };
   return ret;
 }
-function modifyChains(chains: string[]): string {
-  if (!Array.isArray(chains) || chains.length === 0) {
-    return '';
-  }
-
-  if (chains.length === 1) {
-    return chains[0];
-  }
-
-  //倒序
-  if (chains.length === 2) {
-    return chains[1] + ' / ' + chains[0];
-  }
-
-  const first = chains.pop();
-  const last = chains.shift();
-  return `${first} / ${last}`;
-}
 
 function renderTableOrPlaceholder(conns: FormattedConn[]) {
   return conns.length > 0 ? (
@@ -169,19 +134,11 @@ function ConnQty({ qty }) {
 
 function Conn({ apiConfig }) {
   const [refContainer, containerHeight] = useRemainingViewPortHeight();
-
   const [conns, setConns] = useState([]);
   const [closedConns, setClosedConns] = useState([]);
-
   const [filterKeyword, setFilterKeyword] = useState('');
-  const [filterSourceIpStr, setFilterSourceIpStr] = useState('');
+  const filteredConns = filterConns(conns, filterKeyword);
-
+  const filteredClosedConns = filterConns(closedConns, filterKeyword);
-  const filteredConns = filterConns(conns, filterKeyword, filterSourceIpStr);
-  const filteredClosedConns = filterConns(closedConns, filterKeyword, filterSourceIpStr);
-
-  const connIpSet = getConnIpList(conns);
-  const ClosedConnIpSet = getConnIpList(closedConns);
-
   const [isCloseAllModalOpen, setIsCloseAllModalOpen] = useState(false);
   const openCloseAllModal = useCallback(() => setIsCloseAllModalOpen(true), []);
   const closeCloseAllModal = useCallback(() => setIsCloseAllModalOpen(false), []);
@@ -221,15 +178,9 @@ function Conn({ apiConfig }) {
     },
     [setConns, isRefreshPaused]
   );
-  const [reConnectCount, setReConnectCount] = useState(0);
-
   useEffect(() => {
-    return connAPI.fetchData(apiConfig, read, () => {
+    return connAPI.fetchData(apiConfig, read);
-      setTimeout(() => {
+  }, [apiConfig, read]);
-        setReConnectCount((prev) => prev + 1);
-      }, 1000);
-    });
-  }, [apiConfig, read, reConnectCount, setReConnectCount]);
 
   const { t } = useTranslation();
 
@@ -279,17 +230,7 @@ function Conn({ apiConfig }) {
             }}
           >
             <TabPanel>
-              <Button onClick={() => setFilterSourceIpStr('')} kind="minimal">
+              <>{renderTableOrPlaceholder(filteredConns)}</>
-                {t('All')}
-              </Button>
-              {connIpSet.map((value, k) => {
-                return (
-                  <Button key={k} onClick={() => setFilterSourceIpStr(value)} kind="minimal">
-                    {value}
-                  </Button>
-                );
-              })}
-              {renderTableOrPlaceholder(filteredConns)}
               <Fab
                 icon={isRefreshPaused ? <Play size={16} /> : <Pause size={16} />}
                 mainButtonStyles={isRefreshPaused ? { background: '#e74c3c' } : {}}
@@ -302,19 +243,7 @@ function Conn({ apiConfig }) {
                 </Action>
               </Fab>
             </TabPanel>
-            <TabPanel>
+            <TabPanel>{renderTableOrPlaceholder(filteredClosedConns)}</TabPanel>
-              <Button onClick={() => setFilterSourceIpStr('')} kind="minimal">
-                {t('All')}
-              </Button>
-              {ClosedConnIpSet.map((value, k) => {
-                return (
-                  <Button key={k} onClick={() => setFilterSourceIpStr(value)} kind="minimal">
-                    {value}
-                  </Button>
-                );
-              })}
-              {renderTableOrPlaceholder(filteredClosedConns)}
-            </TabPanel>
           </div>
         </div>
         <ModalCloseAllConnections

src/components/Home.module.scss

@@ -2,10 +2,7 @@
 
 .root {
   padding: 6px 15px;
-  @media screen and (min-width: 30em) {
+  @media (--breakpoint-not-small) {
     padding: 10px 40px;
   }
 }
-.chart {
-  margin-top: 20px;
-}

src/components/Home.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import ContentHeader from './ContentHeader';
 import s0 from './Home.module.scss';
 import Loading from './Loading';
-import MemoryChart from './MemoryChart';
 import TrafficChart from './TrafficChart';
 import TrafficNow from './TrafficNow';
 
@@ -20,7 +19,6 @@ export default function Home() {
         <div className={s0.chart}>
           <Suspense fallback={<Loading height="200px" />}>
             <TrafficChart />
-            <MemoryChart />
           </Suspense>
         </div>
       </div>

src/components/MemoryChart.tsx

@@ -1,61 +0,0 @@
-import * as React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { State } from '~/store/types';
-
-import { fetchData } from '../api/memory';
-import { useLineChartMemory } from '../hooks/useLineChart';
-import {
-  chartJSResource,
-  chartStyles,
-  commonDataSetProps,
-  memoryChartOptions,
-} from '../misc/chart-memory';
-import { getClashAPIConfig, getSelectedChartStyleIndex } from '../store/app';
-import { connect } from './StateProvider';
-
-const { useMemo } = React;
-
-const chartWrapperStyle = {
-  // make chartjs chart responsive
-  position: 'relative',
-  maxWidth: 1000,
-  marginTop: '1em',
-};
-
-const mapState = (s: State) => ({
-  apiConfig: getClashAPIConfig(s),
-  selectedChartStyleIndex: getSelectedChartStyleIndex(s),
-});
-
-export default connect(mapState)(MemoryChart);
-
-function MemoryChart({ apiConfig, selectedChartStyleIndex }) {
-  const ChartMod = chartJSResource.read();
-  const memory = fetchData(apiConfig);
-  const { t } = useTranslation();
-  const data = useMemo(
-    () => ({
-      labels: memory.labels,
-      datasets: [
-        {
-          ...commonDataSetProps,
-          ...memoryChartOptions,
-          ...chartStyles[selectedChartStyleIndex].inuse,
-          label: t('Memory'),
-          data: memory.inuse,
-        },
-      ],
-    }),
-    [memory, selectedChartStyleIndex, t]
-  );
-
-  useLineChartMemory(ChartMod.Chart, 'MemoryChart', data, memory);
-
-  return (
-    // @ts-expect-error ts-migrate(2322) FIXME: Type '{ position: string; maxWidth: number; }' is ... Remove this comment to see the full error message
-    <div style={chartWrapperStyle}>
-      <canvas id="MemoryChart" />
-    </div>
-  );
-}

src/components/TrafficChart.tsx

@@ -11,10 +11,11 @@ import { connect } from './StateProvider';
 
 const { useMemo } = React;
 
-const chartWrapperStyle: React.CSSProperties = {
+const chartWrapperStyle = {
   // make chartjs chart responsive
   position: 'relative',
   maxWidth: 1000,
+  marginTop: '1em',
 };
 
 const mapState = (s: State) => ({
@@ -52,6 +53,7 @@ function TrafficChart({ apiConfig, selectedChartStyleIndex }) {
   useLineChart(ChartMod.Chart, 'trafficChart', data, traffic);
 
   return (
+    // @ts-expect-error ts-migrate(2322) FIXME: Type '{ position: string; maxWidth: number; }' is ... Remove this comment to see the full error message
     <div style={chartWrapperStyle}>
       <canvas id="trafficChart" />
     </div>

src/components/TrafficNow.module.scss

@@ -3,25 +3,26 @@
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-
+  justify-content: space-between;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 140px);
-  grid-gap: 20px;
-  justify-content: space-around;
   max-width: 1000px;
 
   .sec {
     padding: 10px;
+    width: 19%;
+    margin: 3px;
     background-color: var(--color-bg-card);
     border-radius: 10px;
     box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
     div:nth-child(1) {
       color: var(--color-text-secondary);
-      font-size: 0.7em;
+      font-size: 0.65em;
     }
     div:nth-child(2) {
       padding: 10px 0 0;
-      font-size: 1.3em;
+      font-size: 1em;
+    }
+    @media (max-width: 768px) {
+      width: 48%;
     }
   }
 }

src/components/TrafficNow.tsx

@@ -18,7 +18,7 @@ export default connect(mapState)(TrafficNow);
 function TrafficNow({ apiConfig }) {
   const { t } = useTranslation();
   const { upStr, downStr } = useSpeed(apiConfig);
-  const { upTotal, dlTotal, connNumber, mUsage } = useConnection(apiConfig);
+  const { upTotal, dlTotal, connNumber } = useConnection(apiConfig);
   return (
     <div className={s0.TrafficNow}>
       <div className={s0.sec}>
@@ -41,10 +41,6 @@ function TrafficNow({ apiConfig }) {
         <div>{t('Active Connections')}</div>
         <div>{connNumber}</div>
       </div>
-      <div className={s0.sec}>
-        <div>{t('Memory Usage')}</div>
-        <div>{mUsage}</div>
-      </div>
     </div>
   );
 }
@@ -67,15 +63,13 @@ function useConnection(apiConfig) {
     upTotal: '0 B',
     dlTotal: '0 B',
     connNumber: 0,
-    mUsage: '0 B',
   });
   const read = useCallback(
-    ({ downloadTotal, uploadTotal, connections, memory }) => {
+    ({ downloadTotal, uploadTotal, connections }) => {
       setState({
         upTotal: prettyBytes(uploadTotal),
         dlTotal: prettyBytes(downloadTotal),
         connNumber: connections.length,
-        mUsage: prettyBytes(memory),
       });
     },
     [setState]

src/components/proxies/Proxy.module.scss

@@ -76,8 +76,8 @@
 
 .proxySmall {
   position: relative;
-  width: 12px;
+  width: 10px;
-  height: 12px;
+  height: 10px;
   border-radius: 50%;
 
   .now {

src/components/proxies/ProxyGroup.tsx

@@ -50,7 +50,7 @@ function ProxyGroupImpl({
   );
 
   const isSelectable = useMemo(
-    () => ['Selector', version.meta && 'Fallback', version.meta && 'URLTest'].includes(type),
+    () => ['Selector', version.meta && 'Fallback'].includes(type),
     [type, version.meta]
   );
 

src/components/proxies/ProxyLatency.module.scss

@@ -3,8 +3,8 @@
 .proxyLatency {
   border-radius: 20px;
   color: #eee;
-  font-size: 1em;
+  font-size: 0.6em;
   @media (--breakpoint-not-small) {
-    font-size: 1em;
+    font-size: 0.7em;
   }
 }

src/components/proxies/ProxyProvider.tsx

@@ -89,7 +89,7 @@ function ProxyProviderImpl({
     const getYear = expire.getFullYear() + '-';
     const getMonth =
       (expire.getMonth() + 1 < 10 ? '0' + (expire.getMonth() + 1) : expire.getMonth() + 1) + '-';
-    const getDate = (expire.getDate() < 10 ? '0' + expire.getDate() : expire.getDate()) + ' ';
+    const getDate = expire.getDate() + ' ';
     return getYear + getMonth + getDate;
   };
   return (

src/components/shared/Basic.module.scss

@@ -4,7 +4,7 @@ h2.sectionNameType {
   margin: 0;
   font-size: 1em;
   @media (--breakpoint-not-small) {
-    font-size: 1.3em;
+    font-size: 1.1em;
   }
 
   span:nth-child(2) {

src/hooks/useLineChart.ts

@@ -2,7 +2,6 @@ import type { ChartConfiguration } from 'chart.js';
 import React from 'react';
 
 import { commonChartOptions } from '~/misc/chart';
-import { memoryChartOptions } from '~/misc/chart-memory';
 
 const { useEffect } = React;
 
@@ -24,22 +23,3 @@ export default function useLineChart(
     };
   }, [chart, elementId, data, subscription, extraChartOptions]);
 }
-
-export function useLineChartMemory(
-  chart: typeof import('chart.js').Chart,
-  elementId: string,
-  data: ChartConfiguration['data'],
-  subscription: any,
-  extraChartOptions = {}
-) {
-  useEffect(() => {
-    const ctx = (document.getElementById(elementId) as HTMLCanvasElement).getContext('2d');
-    const options = { ...memoryChartOptions, ...extraChartOptions };
-    const c = new chart(ctx, { type: 'line', data, options });
-    const unsubscribe = subscription && subscription.subscribe(() => c.update());
-    return () => {
-      unsubscribe && unsubscribe();
-      c.destroy();
-    };
-  }, [chart, elementId, data, subscription, extraChartOptions]);
-}

src/i18n/en.ts

@@ -1,5 +1,4 @@
 export const data = {
-  All: 'All',
   Overview: 'Overview',
   Proxies: 'Proxies',
   Rules: 'Rules',
@@ -11,7 +10,6 @@ export const data = {
   'Upload Total': 'Upload Total',
   'Download Total': 'Download Total',
   'Active Connections': 'Active Connections',
-  'Memory Usage': 'Memory Usage',
   'Pause Refresh': 'Pause Refresh',
   'Resume Refresh': 'Resume Refresh',
   close_all_connections: 'Close All Connections',
@@ -41,8 +39,6 @@ export const data = {
   update_all_rule_provider: 'Update all rule providers',
   update_all_proxy_provider: 'Update all proxy providers',
   reload_config_file: 'Reload config file',
-  restart_core: 'Restart clash core',
-  upgrade_core: 'Upgrade Alpha core',
   update_geo_databases_file: 'Update GEO Databases ',
   flush_fake_ip_pool: 'Flush fake-ip data',
   enable_tun_device: 'Enable TUN Device',

src/i18n/zh.ts

@@ -1,5 +1,4 @@
 export const data = {
-  All: '所有',
   Overview: '概览',
   Proxies: '代理',
   Rules: '规则',
@@ -11,8 +10,6 @@ export const data = {
   'Upload Total': '上传总量',
   'Download Total': '下载总量',
   'Active Connections': '活动连接',
-  'Memory Usage': '内存使用情况',
-  Memory: '内存',
   'Pause Refresh': '暂停刷新',
   'Resume Refresh': '继续刷新',
   close_all_connections: '关闭所有连接',
@@ -60,6 +57,4 @@ export const data = {
   c_source: '来源',
   c_destination_ip: '目标IP',
   c_type: '类型',
-  restart_core: '重启 clash 核心',
-  upgrade_core: '更新 Alpha 核心',
 };

src/misc/chart-memory.ts

@@ -1,64 +0,0 @@
-import { createAsset } from 'use-asset';
-
-import prettyBytes from './pretty-bytes';
-export const chartJSResource = createAsset(() => {
-  return import('~/misc/chart-lib');
-});
-
-export const commonDataSetProps = { borderWidth: 1, pointRadius: 0, tension: 0.2, fill: true };
-
-export const memoryChartOptions: import('chart.js').ChartOptions<'line'> = {
-  responsive: true,
-  maintainAspectRatio: true,
-  plugins: {
-    legend: { labels: { boxWidth: 20 } },
-  },
-  scales: {
-    x: { display: false, type: 'category' },
-    y: {
-      type: 'linear',
-      display: true,
-      grid: {
-        display: true,
-        color: '#555',
-        drawTicks: false,
-      },
-      border: {
-        dash: [3, 6],
-      },
-      ticks: {
-        maxTicksLimit: 3,
-        callback(value: number) {
-          return prettyBytes(value);
-        },
-      },
-    },
-  },
-};
-
-export const chartStyles = [
-  {
-    inuse: {
-      backgroundColor: 'rgba(81, 168, 221, 0.5)',
-      borderColor: 'rgb(81, 168, 221)',
-    },
-  },
-  {
-    inuse: {
-      backgroundColor: 'rgba(245,78,162,0.6)',
-      borderColor: 'rgba(245,78,162,1)',
-    },
-  },
-  {
-    inuse: {
-      backgroundColor: 'rgba(94, 175, 223, 0.3)',
-      borderColor: 'rgb(94, 175, 223)',
-    },
-  },
-  {
-    inuse: {
-      backgroundColor: 'rgba(242, 174, 62, 0.3)',
-      borderColor: 'rgb(242, 174, 62)',
-    },
-  },
-];

src/misc/chart.ts

@@ -27,7 +27,6 @@ export const commonChartOptions: import('chart.js').ChartOptions<'line'> = {
         dash: [3, 6],
       },
       ticks: {
-        maxTicksLimit: 5,
         callback(value: number) {
           return prettyBytes(value) + '/s ';
         },
@@ -39,22 +38,22 @@ export const commonChartOptions: import('chart.js').ChartOptions<'line'> = {
 export const chartStyles = [
   {
     down: {
-      backgroundColor: 'rgba(81, 168, 221, 0.5)',
+      backgroundColor: 'rgba(176, 209, 132, 0.8)',
-      borderColor: 'rgb(81, 168, 221)',
+      borderColor: 'rgb(176, 209, 132)',
     },
     up: {
-      backgroundColor: 'rgba(219, 77, 109, 0.5)',
+      backgroundColor: 'rgba(181, 220, 231, 0.8)',
-      borderColor: 'rgb(219, 77, 109)',
+      borderColor: 'rgb(181, 220, 231)',
     },
   },
   {
     up: {
-      backgroundColor: 'rgba(245,78,162,0.6)',
+      backgroundColor: 'rgb(98, 190, 100)',
-      borderColor: 'rgba(245,78,162,1)',
+      borderColor: 'rgb(78,146,79)',
     },
     down: {
-      backgroundColor: 'rgba(123,59,140,0.6)',
+      backgroundColor: 'rgb(160, 230, 66)',
-      borderColor: 'rgba(66,33,142,1)',
+      borderColor: 'rgb(110, 156, 44)',
     },
   },
   {

src/misc/i18n.ts

@@ -47,7 +47,7 @@ i18next
         }
       },
     },
-    supportedLngs: ['zh', 'en'],
+    supportedLngs: ['en', 'zh'],
     fallbackLng: 'en',
     interpolation: {
       escapeValue: false,

src/store/app.ts

@@ -95,7 +95,7 @@ export function updateClashAPIConfig({ baseURL, secret }) {
 const rootEl = document.querySelector('html');
 type ThemeType = 'dark' | 'light' | 'auto';
 
-function setTheme(theme: ThemeType = 'light') {
+function setTheme(theme: ThemeType = 'dark') {
   if (theme === 'auto') {
     rootEl.setAttribute('data-theme', 'auto');
   } else if (theme === 'dark') {
@@ -159,7 +159,7 @@ const defaultState: StateApp = {
   selectedClashAPIConfigIndex: 0,
   clashAPIConfigs: [defaultClashAPIConfig],
 
-  latencyTestUrl: 'https://www.gstatic.com/generate_204',
+  latencyTestUrl: 'http://www.gstatic.com/generate_204',
   selectedChartStyleIndex: 0,
   theme: 'dark',
 

src/store/configs.ts

@@ -115,51 +115,6 @@ export function reloadConfigFile(apiConfig: ClashAPIConfig) {
   };
 }
 
-export function restartCore(apiConfig: ClashAPIConfig) {
-  return async (dispatch: DispatchFn) => {
-    configsAPI
-      .restartCore(apiConfig)
-      .then(
-        (res) => {
-          if (res.ok === false) {
-            // eslint-disable-next-line no-console
-            console.log('Error restart core', res.statusText);
-          }
-        },
-        (err) => {
-          // eslint-disable-next-line no-console
-          console.log('Error restart core', err);
-          throw err;
-        }
-      )
-      .then(() => {
-        dispatch(fetchConfigs(apiConfig));
-      });
-  };
-}
-
-export function upgradeCore(apiConfig: ClashAPIConfig) {
-  return async (dispatch: DispatchFn) => {
-    configsAPI
-      .upgradeCore(apiConfig)
-      .then(
-        (res) => {
-          if (res.ok === false) {
-            // eslint-disable-next-line no-console
-            console.log('Error upgrade core', res.statusText);
-          }
-        },
-        (err) => {
-          // eslint-disable-next-line no-console
-          console.log('Error upgrade core', err);
-          throw err;
-        }
-      )
-      .then(() => {
-        dispatch(fetchConfigs(apiConfig));
-      });
-  };
-}
 export function updateGeoDatabasesFile(apiConfig: ClashAPIConfig) {
   return async (dispatch: DispatchFn) => {
     configsAPI

src/styles/main.scss

@@ -3,11 +3,6 @@
 @import '@fontsource/roboto-mono/latin-400.css';
 @import 'modern-normalize/modern-normalize.css';
 
-@font-face {
-  font-family: '_Twemoji Mozilla';
-  src: url('../../assets/Twemoji_Mozilla.ttf') format('truetype');
-}
-
 .relative {
   position: relative;
 }
@@ -64,7 +59,7 @@
 :root {
   --font-mono: 'Roboto Mono', Menlo, monospace;
   // prettier-ignore
-  --font-normal: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",  "Source Han Sans", "PingFang SC", "Microsoft YaHei" , "微软雅黑", Arial,"Twemoji Mozilla", "_Twemoji Mozilla","Segoe UI Emoji", "Segoe UI Symbol";
+  --font-normal: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, "Twemoji Mozilla", Segoe UI Emoji, Segoe UI Symbol, 'PingFang SC', 'Microsoft YaHei', '\5fae\8f6f\96c5\9ed1', Arial;
   --color-focus-blue: #1a73e8;
   --btn-bg: #387cec;
 }