Revert "update to 0.3.6"

This reverts commit e33fb875dd.
2023-04-27 22:54:48 +08:00 · 2023-04-27 22:54:48 +08:00 · a469f45e26
commit a469f45e26
parent 155ede085c
38 changed files with 2804 additions and 6010 deletions
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,7 +0,0 @@
-version: 2
-updates:
-  # Maintain dependencies for GitHub Actions
-  - package-ecosystem: 'github-actions'
-    directory: '/'
-    schedule:
-      interval: 'daily'
--- a/.github/workflows/push.yml
+++ b/.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 }}
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +0,0 @@
-node_modules
-public
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged
--- a/README.md
+++ b/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**

--- a/README_CN.md
+++ b/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
-```
--- a/assets/Twemoji_Mozilla.ttf
+++ b/assets/Twemoji_Mozilla.ttf
--- a/package.json
+++ b/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": [
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/api/configs.ts
+++ b/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' });
--- a/src/api/connections.ts
+++ b/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(
-  apiConfig: ClashAPIConfig,
-  listener: unknown,
-  onClose: () => void
-): UnsubscribeFn | void {
+export function fetchData(apiConfig: ClashAPIConfig, listener: unknown): UnsubscribeFn | void {
  if (fetched || wsState === 1) {
-    if (listener)
-      return subscribe({
-        listner: listener,
-        onClose,
-      });
+    if (listener) return subscribe(listener);
  }
  wsState = 1;
  const url = buildWebSocketURL(apiConfig, endpoint);
  const ws = new WebSocket(url);
-  ws.addEventListener('error', () => {
-    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('error', () => (wsState = 3));
  ws.addEventListener('message', (event) => appendData(event.data));
-  if (listener)
-    return subscribe({
-      listner: listener,
-      onClose,
-    });
+  if (listener) return subscribe(listener);
 }

-function subscribe(subscriber: Subscriber): UnsubscribeFn {
-  subscribers.push(subscriber);
+function subscribe(listener: unknown): UnsubscribeFn {
+  subscribers.push(listener);
  return function unsubscribe() {
-    const idx = subscribers.indexOf(subscriber);
+    const idx = subscribers.indexOf(listener);
    subscribers.splice(idx, 1);
  };
 }
--- a/src/api/memory.ts
+++ b/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 };
--- a/src/api/proxies.ts
+++ b/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)}`;
--- a/src/components/Config.tsx
+++ b/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 />
--- a/src/components/ConnectionTable.module.scss
+++ b/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;
-  user-select: none;
+  font-size: 0.9em;
  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: 10px 2px;
+  padding: 8px 13px;
  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 {
-  min-width: 7em;
-  text-align: center;
+.du {
+  text-align: right;
 }

 .sortIconContainer {
  display: inline-flex;
-  margin-left: 0.5em;
-  width: 1em;
-  height: 1em;
+  margin-left: 10px;
+  width: 16px;
+  height: 16px;
 }

 .rotate180 {
--- a/src/components/ConnectionTable.tsx
+++ b/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_chains', accessor: 'chains' },
-  { Header: 'c_time', accessor: 'start' },
-  { Header: 'c_dl_speed', accessor: 'downloadSpeedCurr', sortDescFirst },
-  { Header: 'c_ul_speed', accessor: 'uploadSpeedCurr', sortDescFirst },
+  { Header: 'c_sni', accessor: 'sniffHost' },
+  { Header: 'c_process', accessor: 'process' },
  { 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) => (
-              <div
-                {...column.getHeaderProps(column.getSortByToggleProps())}
-                className={index == 0 || (index >= 5 && index < 10) ? s.thdu : s.th}
-              >
+            {headerGroup.headers.map((column) => (
+              <div {...column.getHeaderProps(column.getSortByToggleProps())} className={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 ==1 ? s.break : true
+                      j >= 2 && j <= 5 ? s.du : false
                    )}
                  >
                    {renderCell(cell, locale)}
--- a/src/components/Connections.css
+++ b/src/components/Connections.css
@ -47,7 +47,3 @@
 .react-tabs__tab-panel--selected {
  display: block;
 }
-
-._btn_lzu00_1 {
-  margin-right: 10px;
-}
--- a/src/components/Connections.tsx
+++ b/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) {
-  return conns.filter((each) => each.sourceIP === ipStr);
-}
-
-function filterConns(conns: FormattedConn[], keyword: string, sourceIp: string) {
-  let result = conns;
-  if (keyword !== '') {
-    result = conns.filter((conn) =>
+function filterConns(conns: FormattedConn[], keyword: string) {
+  return !keyword
+    ? conns
+    : 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) => {
-        return hasSubstring(field, keyword);
-      })
+        ].some((field) => 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, filterSourceIpStr);
-  const filteredClosedConns = filterConns(closedConns, filterKeyword, filterSourceIpStr);
-
-  const connIpSet = getConnIpList(conns);
-  const ClosedConnIpSet = getConnIpList(closedConns);
-
+  const filteredConns = filterConns(conns, filterKeyword);
+  const filteredClosedConns = filterConns(closedConns, filterKeyword);
  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, () => {
-      setTimeout(() => {
-        setReConnectCount((prev) => prev + 1);
-      }, 1000);
-    });
-  }, [apiConfig, read, reConnectCount, setReConnectCount]);
+    return connAPI.fetchData(apiConfig, read);
+  }, [apiConfig, read]);

  const { t } = useTranslation();

@ -279,17 +230,7 @@ function Conn({ apiConfig }) {
            }}
          >
            <TabPanel>
-              <Button onClick={() => setFilterSourceIpStr('')} kind="minimal">
-                {t('All')}
-              </Button>
-              {connIpSet.map((value, k) => {
-                return (
-                  <Button key={k} onClick={() => setFilterSourceIpStr(value)} kind="minimal">
-                    {value}
-                  </Button>
-                );
-              })}
-              {renderTableOrPlaceholder(filteredConns)}
+              <>{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>
-              <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>
+            <TabPanel>{renderTableOrPlaceholder(filteredClosedConns)}</TabPanel>
          </div>
        </div>
        <ModalCloseAllConnections
--- a/src/components/Home.module.scss
+++ b/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;
-}
--- a/src/components/Home.tsx
+++ b/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>
--- a/src/components/MemoryChart.tsx
+++ b/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>
-  );
-}
--- a/src/components/TrafficChart.tsx
+++ b/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>
--- a/src/components/TrafficNow.module.scss
+++ b/src/components/TrafficNow.module.scss
@ -3,25 +3,26 @@
  display: flex;
  align-items: center;
  flex-wrap: wrap;
-
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 140px);
-  grid-gap: 20px;
-  justify-content: space-around;
+  justify-content: space-between;
  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%;
    }
  }
 }
--- a/src/components/TrafficNow.tsx
+++ b/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]
--- a/src/components/proxies/Proxy.module.scss
+++ b/src/components/proxies/Proxy.module.scss
@ -76,8 +76,8 @@

 .proxySmall {
  position: relative;
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
  border-radius: 50%;

  .now {
--- a/src/components/proxies/ProxyGroup.tsx
+++ b/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]
  );

--- a/src/components/proxies/ProxyLatency.module.scss
+++ b/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;
  }
 }
--- a/src/components/proxies/ProxyProvider.tsx
+++ b/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 (
--- a/src/components/shared/Basic.module.scss
+++ b/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) {
--- a/src/hooks/useLineChart.ts
+++ b/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]);
-}
--- a/src/i18n/en.ts
+++ b/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',
--- a/src/i18n/zh.ts
+++ b/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 核心',
 };
--- a/src/misc/chart-memory.ts
+++ b/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)',
-    },
-  },
-];
--- a/src/misc/chart.ts
+++ b/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)',
-      borderColor: 'rgb(81, 168, 221)',
+      backgroundColor: 'rgba(176, 209, 132, 0.8)',
+      borderColor: 'rgb(176, 209, 132)',
    },
    up: {
-      backgroundColor: 'rgba(219, 77, 109, 0.5)',
-      borderColor: 'rgb(219, 77, 109)',
+      backgroundColor: 'rgba(181, 220, 231, 0.8)',
+      borderColor: 'rgb(181, 220, 231)',
    },
  },
  {
    up: {
-      backgroundColor: 'rgba(245,78,162,0.6)',
-      borderColor: 'rgba(245,78,162,1)',
+      backgroundColor: 'rgb(98, 190, 100)',
+      borderColor: 'rgb(78,146,79)',
    },
    down: {
-      backgroundColor: 'rgba(123,59,140,0.6)',
-      borderColor: 'rgba(66,33,142,1)',
+      backgroundColor: 'rgb(160, 230, 66)',
+      borderColor: 'rgb(110, 156, 44)',
    },
  },
  {
--- a/src/misc/i18n.ts
+++ b/src/misc/i18n.ts
@ -47,7 +47,7 @@ i18next
        }
      },
    },
-    supportedLngs: ['zh', 'en'],
+    supportedLngs: ['en', 'zh'],
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
--- a/src/store/app.ts
+++ b/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',

--- a/src/store/configs.ts
+++ b/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
--- a/src/styles/main.scss
+++ b/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;
 }