build: update depends

Release 1.6.5
fix: package error
2024-06-04 12:16:42 +08:00 · 2024-06-04 12:11:38 +08:00 · 2024-06-04 10:47:17 +08:00 · 2024-06-04 10:16:25 +08:00 · 2024-06-04 10:09:04 +08:00 · 2024-06-03 09:01:33 +08:00
27 changed files with 2926 additions and 1087 deletions
--- a/.github/build-for-linux/build.sh
+++ b/.github/build-for-linux/build.sh
@@ -2,7 +2,7 @@ pnpm install
 pnpm check $INPUT_TARGET
 sed -i "s/#openssl/openssl={version=\"0.10\",features=[\"vendored\"]}/g" src-tauri/Cargo.toml
 if [ "$INPUT_TARGET" = "x86_64-unknown-linux-gnu" ]; then
-    pnpm build --target $INPUT_TARGET
+    cargo tauri build --target $INPUT_TARGET
 else
-    pnpm build --target $INPUT_TARGET -b deb
+    cargo tauri build --target $INPUT_TARGET -b deb,rpm
 fi
--- a/.github/build-for-linux/entrypoint.sh
+++ b/.github/build-for-linux/entrypoint.sh
@@ -5,6 +5,8 @@ tar -Jxvf ./node-v20.10.0-linux-x64.tar.xz
 export PATH=$(pwd)/node-v20.10.0-linux-x64/bin:$PATH
 npm install pnpm -g

+cargo install --git https://github.com/tauri-apps/tauri --branch 1.x tauri-cli
+
 rustup target add "$INPUT_TARGET"

 if [ "$INPUT_TARGET" = "x86_64-unknown-linux-gnu" ]; then
--- a/.github/workflows/alpha.yml
+++ b/.github/workflows/alpha.yml
@@ -62,6 +62,7 @@ jobs:
      - name: Tauri build
        uses: tauri-apps/tauri-action@v0
        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -101,6 +102,7 @@ jobs:
      - name: Build for Linux
        uses: ./.github/build-for-linux
        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
        with:
@@ -132,7 +134,9 @@ jobs:
          body: "More new features are now supported."
          prerelease: true
          token: ${{ secrets.GITHUB_TOKEN }}
-          files: src-tauri/target/${{ matrix.target }}/release/bundle/deb/*.deb
+          files: |
+            src-tauri/target/${{ matrix.target }}/release/bundle/deb/*.deb
+            src-tauri/target/${{ matrix.target }}/release/bundle/rpm/*.rpm

  alpha-for-fixed-webview2:
    strategy:
@@ -188,6 +192,7 @@ jobs:
        id: build
        uses: tauri-apps/tauri-action@v0
        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -245,12 +250,12 @@ jobs:
          - MacOS apple M芯片: aarch64.dmg

          ### Linux
-          - Linux 64位: amd64.AppImage/amd64.deb
-          - Linux 32位: i386.deb
-          - Linux arm64架构: arm64.deb
-          - Linux armv7架构: armhf.deb
+          - Linux 64位: amd64.AppImage/amd64.deb/amd64.rpm
+          - Linux 32位: i386.deb/i386.rpm
+          - Linux arm64架构: arm64.deb/aarch64.rpm
+          - Linux armv7架构: armhf.deb/armhfp.rpm

-          ### Windows (Win7 用户请查看下面FAQ手动替换内核使用)
+          ### Windows (Win7 用户请查看下面FAQ中的解决方案)
          #### 正常版本(推荐)
          - 64位: x64-setup.exe
          - 32位: x86-setup.exe
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -59,6 +59,7 @@ jobs:
      - name: Tauri build
        uses: tauri-apps/tauri-action@v0
        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
@@ -96,6 +97,7 @@ jobs:
      - name: Build for Linux
        uses: ./.github/build-for-linux
        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
        with:
@@ -124,7 +126,9 @@ jobs:
          name: "Clash Verge Rev v${{env.VERSION}}"
          body: "More new features are now supported."
          token: ${{ secrets.GITHUB_TOKEN }}
-          files: src-tauri/target/${{ matrix.target }}/release/bundle/deb/*.deb
+          files: |
+            src-tauri/target/${{ matrix.target }}/release/bundle/deb/*.deb
+            src-tauri/target/${{ matrix.target }}/release/bundle/rpm/*.rpm

  release-for-fixed-webview2:
    strategy:
@@ -180,6 +184,7 @@ jobs:
        id: build
        uses: tauri-apps/tauri-action@v0
        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
          TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
--- a/UPDATELOG.md
+++ b/UPDATELOG.md
@@ -1,3 +1,17 @@
+## v1.6.5
+
+### Features
+
+- 添加 RPM 包支持
+- 优化细节
+
+### Bugs Fixes
+
+- MacOS 10.15 编辑器空白的问题
+- MacOS 低版本启动白屏的问题
+
+---
+
 ## v1.6.4

 ### Features
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "clash-verge",
-  "version": "1.6.4",
+  "version": "1.6.5",
  "license": "GPL-3.0-only",
  "scripts": {
    "dev": "tauri dev",
@@ -24,46 +24,47 @@
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@juggle/resize-observer": "^3.4.0",
-    "@mui/icons-material": "^5.15.16",
+    "@mui/icons-material": "^5.15.19",
    "@mui/lab": "5.0.0-alpha.149",
-    "@mui/material": "^5.15.16",
-    "@mui/x-data-grid": "^6.19.11",
-    "@tauri-apps/api": "^1.5.4",
+    "@mui/material": "^5.15.19",
+    "@mui/x-data-grid": "^6.20.0",
+    "@tauri-apps/api": "^1.5.6",
    "@types/json-schema": "^7.0.15",
-    "ahooks": "^3.7.11",
-    "axios": "^1.6.8",
+    "ahooks": "^3.8.0",
+    "axios": "^1.7.2",
    "dayjs": "1.11.5",
-    "i18next": "^23.11.3",
+    "i18next": "^23.11.5",
    "lodash-es": "^4.17.21",
-    "meta-json-schema": "1.18.5-alpha",
-    "monaco-editor": "^0.48.0",
+    "meta-json-schema": "1.18.5-alpha4",
+    "monaco-editor": "^0.49.0",
    "monaco-yaml": "^5.1.1",
-    "types-pac": "^1.0.2",
    "nanoid": "^5.0.7",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-error-boundary": "^3.1.4",
-    "react-hook-form": "^7.51.4",
+    "react-hook-form": "^7.51.5",
    "react-i18next": "^13.5.0",
    "react-markdown": "^9.0.1",
-    "react-router-dom": "^6.23.0",
+    "react-router-dom": "^6.23.1",
    "react-transition-group": "^4.4.5",
-    "react-virtuoso": "^4.7.10",
+    "react-virtuoso": "^4.7.11",
    "recoil": "^0.7.7",
    "swr": "^1.3.0",
-    "tar": "^6.2.1"
+    "tar": "^6.2.1",
+    "types-pac": "^1.0.2"
  },
  "devDependencies": {
    "@actions/github": "^5.1.1",
-    "@tauri-apps/cli": "^1.5.13",
+    "@tauri-apps/cli": "^1.5.14",
    "@types/fs-extra": "^9.0.13",
    "@types/js-cookie": "^3.0.6",
    "@types/lodash-es": "^4.17.12",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@types/react-transition-group": "^4.4.10",
-    "@vitejs/plugin-react": "^4.2.1",
-    "adm-zip": "^0.5.12",
+    "@vitejs/plugin-legacy": "^5.4.1",
+    "@vitejs/plugin-react": "^4.3.0",
+    "adm-zip": "^0.5.13",
    "cross-env": "^7.0.3",
    "fs-extra": "^11.2.0",
    "https-proxy-agent": "^5.0.1",
@@ -71,9 +72,10 @@
    "node-fetch": "^3.3.2",
    "prettier": "^2.8.8",
    "pretty-quick": "^3.3.1",
-    "sass": "^1.77.0",
+    "sass": "^1.77.4",
+    "terser": "^5.31.0",
    "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
    "vite-plugin-monaco-editor": "^1.1.0",
    "vite-plugin-svgr": "^4.2.0"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "clash-verge"
-version = "1.6.4"
+version = "1.6.5"
 description = "clash verge"
 authors = ["zzzgydi", "wonfen", "MystiPanda"]
 license = "GPL-3.0-only"
@@ -10,13 +10,13 @@ edition = "2021"
 build = "build.rs"

 [build-dependencies]
-tauri-build = { version = "1", features = [] }
+tauri-build = { git="https://github.com/Pylogmon/tauri",branch = "1.x", features = [] }

 [dependencies]
 warp = "0.3"
 anyhow = "1.0"
 dirs = "5.0"
-open = "5.0"
+open = "5.1"
 log = "0.4"
 dunce = "1.0"
 log4rs = "1"
@@ -26,9 +26,9 @@ sysinfo = "0.30"
 boa_engine = "0.18"
 serde_json = "1.0"
 serde_yaml = "0.9"
-once_cell = "1.18"
+once_cell = "1.19"
 port_scanner = "0.1.5"
-delay_timer = "0.11.5"
+delay_timer = "0.11"
 parking_lot = "0.12"
 percent-encoding = "2.3.1"
 window-shadows = { version = "0.2" }
@@ -37,8 +37,7 @@ serde = { version = "1.0", features = ["derive"] }
 reqwest = { version = "0.12", features = ["json", "rustls-tls"] }
 sysproxy = { git="https://github.com/zzzgydi/sysproxy-rs", branch = "main" }
 auto-launch = { git="https://github.com/zzzgydi/auto-launch", branch = "main" }
-tauri = { version = "1.6", features = [ "fs-read-file", "fs-exists", "path-all", "protocol-asset", "dialog-open", "notification-all", "icon-png", "icon-ico", "clipboard-all", "global-shortcut-all", "process-all", "shell-all", "system-tray", "updater", "window-all", "devtools"] }
-
+tauri = { git="https://github.com/Pylogmon/tauri",branch = "1.x", features = [ "fs-read-file", "fs-exists", "path-all", "protocol-asset", "dialog-open", "notification-all", "icon-png", "icon-ico", "clipboard-all", "global-shortcut-all", "process-all", "shell-all", "system-tray", "updater", "window-all", "devtools"] }
 [target.'cfg(windows)'.dependencies]
 runas = "=1.2.0"
 deelevate = "0.2.0"
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -2,7 +2,7 @@
  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
  "package": {
    "productName": "Clash Verge",
-    "version": "1.6.4"
+    "version": "1.6.5"
  },
  "build": {
    "distDir": "../dist",
@@ -75,7 +75,7 @@
    },
    "windows": [],
    "security": {
-      "csp": "script-src 'unsafe-eval' 'self'; default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self'; img-src asset: http: https: data: 'self';"
+      "csp": "default-src blob: data: filesystem: ws: wss: http: https: tauri: 'unsafe-eval' 'unsafe-inline' 'self';"
    }
  }
 }
--- a/src-tauri/tauri.linux.conf.json
+++ b/src-tauri/tauri.linux.conf.json
@@ -6,10 +6,20 @@
    },
    "bundle": {
      "identifier": "io.github.clash-verge-rev.clash-verge-rev",
-      "targets": ["deb", "appimage", "updater"],
+      "targets": ["deb", "rpm", "appimage", "updater"],
      "deb": {
        "depends": ["openssl"],
-        "desktopTemplate": "./template/clash-verge.desktop"
+        "desktopTemplate": "./template/clash-verge.desktop",
+        "provides": ["clash-verge", "clash-meta"],
+        "conflicts": ["clash-verge", "clash-meta"],
+        "replaces": ["clash-verge", "clash-meta"]
+      },
+      "rpm": {
+        "depends": ["openssl"],
+        "desktopTemplate": "./template/clash-verge.desktop",
+        "provides": ["clash-verge", "clash-meta"],
+        "conflicts": ["clash-verge", "clash-meta"],
+        "obsoletes": ["clash-verge", "clash-meta"]
      }
    }
  }
--- a/src-tauri/tauri.macos.conf.json
+++ b/src-tauri/tauri.macos.conf.json
@@ -12,7 +12,7 @@
        "frameworks": [],
        "minimumSystemVersion": "10.15",
        "exceptionDomain": "",
-        "signingIdentity": null,
+        "signingIdentity": "-",
        "entitlements": null
      }
    }
--- a/src/assets/image/test/apple.svg
+++ b/src/assets/image/test/apple.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path d="M16.125 1c-1.153.067-2.477.71-3.264 1.527-.71.744-1.272 1.85-1.043 2.918 1.253.033 2.511-.626 3.264-1.459.703-.779 1.236-1.866 1.043-2.986zm.068 4.443c-1.809 0-2.565 1.112-3.818 1.112-1.289 0-2.467-1.041-4.027-1.041C6.226 5.514 3 7.48 3 12.11 3 16.324 6.818 21 8.973 21c1.309.013 1.626-.823 3.402-.832 1.778-.013 2.162.843 3.473.832 1.476-.011 2.628-1.633 3.47-2.918.604-.92.853-1.39 1.32-2.43-3.472-.88-4.163-6.48 0-7.638-.785-1.341-3.08-2.57-4.445-2.57z"/></svg>
--- a/src/assets/image/test/github.svg
+++ b/src/assets/image/test/github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="48" height="48"><path d="M15 3C8.373 3 3 8.373 3 15c0 5.623 3.872 10.328 9.092 11.63a1.751 1.751 0 0 1-.092-.583v-2.051h-1.508c-.821 0-1.551-.353-1.905-1.009-.393-.729-.461-1.844-1.435-2.526-.289-.227-.069-.486.264-.451.615.174 1.125.596 1.605 1.222.478.627.703.769 1.596.769.433 0 1.081-.025 1.691-.121.328-.833.895-1.6 1.588-1.962-3.996-.411-5.903-2.399-5.903-5.098 0-1.162.495-2.286 1.336-3.233-.276-.94-.623-2.857.106-3.587 1.798 0 2.885 1.166 3.146 1.481A8.993 8.993 0 0 1 15.495 9c1.036 0 2.024.174 2.922.483C18.675 9.17 19.763 8 21.565 8c.732.731.381 2.656.102 3.594.836.945 1.328 2.066 1.328 3.226 0 2.697-1.904 4.684-5.894 5.097C18.199 20.49 19 22.1 19 23.313v2.734c0 .104-.023.179-.035.268C23.641 24.676 27 20.236 27 15c0-6.627-5.373-12-12-12z"/></svg>
--- a/src/assets/image/test/google.svg
+++ b/src/assets/image/test/google.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48"><path fill="#FFC107" d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"/><path fill="#FF3D00" d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"/><path fill="#4CAF50" d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"/><path fill="#1976D2" d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"/></svg>
--- a/src/assets/image/test/youtube.svg
+++ b/src/assets/image/test/youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48"><path fill="#FF3D00" d="M43.2 33.9c-.4 2.1-2.1 3.7-4.2 4-3.3.5-8.8 1.1-15 1.1-6.1 0-11.6-.6-15-1.1-2.1-.3-3.8-1.9-4.2-4-.4-2.3-.8-5.7-.8-9.9s.4-7.6.8-9.9c.4-2.1 2.1-3.7 4.2-4C12.3 9.6 17.8 9 24 9c6.2 0 11.6.6 15 1.1 2.1.3 3.8 1.9 4.2 4 .4 2.3.9 5.7.9 9.9-.1 4.2-.5 7.6-.9 9.9z"/><path fill="#FFF" d="M20 31V17l12 7z"/></svg>
--- a/src/components/base/base-search-box.tsx
+++ b/src/components/base/base-search-box.tsx
@@ -1,6 +1,6 @@
-import { Box, SvgIcon, TextField, Theme, styled } from "@mui/material";
+import { Box, SvgIcon, TextField, styled } from "@mui/material";
 import Tooltip from "@mui/material/Tooltip";
-import { ChangeEvent, useState } from "react";
+import { ChangeEvent, useEffect, useRef, useState } from "react";

 import { useTranslation } from "react-i18next";
 import matchCaseIcon from "@/assets/image/component/match_case.svg?react";
@@ -22,6 +22,7 @@ type SearchProps = {

 export const BaseSearchBox = styled((props: SearchProps) => {
  const { t } = useTranslation();
+  const inputRef = useRef<HTMLInputElement>(null);
  const [matchCase, setMatchCase] = useState(true);
  const [matchWholeWord, setMatchWholeWord] = useState(false);
  const [useRegularExpression, setUseRegularExpression] = useState(false);
@@ -36,6 +37,14 @@ export const BaseSearchBox = styled((props: SearchProps) => {
    inheritViewBox: true,
  };

+  useEffect(() => {
+    if (!inputRef.current) return;
+
+    onChange({
+      target: inputRef.current,
+    } as ChangeEvent<HTMLInputElement>);
+  }, [matchCase, matchWholeWord, useRegularExpression]);
+
  const onChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    props.onSearch(
      (content) => doSearch([content], e.target?.value ?? "").length > 0,
@@ -80,6 +89,7 @@ export const BaseSearchBox = styled((props: SearchProps) => {
  return (
    <Tooltip title={errorMessage} placement="bottom-start">
      <TextField
+        inputRef={inputRef}
        hiddenLabel
        fullWidth
        size="small"
--- a/src/components/connection/connection-item.tsx
+++ b/src/components/connection/connection-item.tsx
@@ -19,6 +19,7 @@ const Tag = styled("span")(({ theme }) => ({
  border: "1px solid",
  borderRadius: 4,
  borderColor: alpha(theme.palette.text.secondary, 0.35),
+  marginTop: "4px",
  marginRight: "4px",
 }));

--- a/src/components/setting/mods/layout-viewer.tsx
+++ b/src/components/setting/mods/layout-viewer.tsx
@@ -1,9 +1,16 @@
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { List, Button, Select, MenuItem } from "@mui/material";
+import {
+  List,
+  Button,
+  Select,
+  MenuItem,
+  styled,
+  ListItem,
+  ListItemText,
+} from "@mui/material";
 import { useVerge } from "@/hooks/use-verge";
 import { BaseDialog, DialogRef, Notice, Switch } from "@/components/base";
-import { SettingItem } from "./setting-comp";
 import { GuardState } from "./guard-state";
 import { open as openDialog } from "@tauri-apps/api/dialog";
 import { convertFileSrc } from "@tauri-apps/api/tauri";
@@ -77,7 +84,8 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
      onCancel={() => setOpen(false)}
    >
      <List>
-        <SettingItem label={t("Traffic Graph")}>
+        <Item>
+          <ListItemText primary={t("Traffic Graph")} />
          <GuardState
            value={verge?.traffic_graph ?? true}
            valueProps="checked"
@@ -88,9 +96,10 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
          >
            <Switch edge="end" />
          </GuardState>
-        </SettingItem>
+        </Item>

-        <SettingItem label={t("Memory Usage")}>
+        <Item>
+          <ListItemText primary={t("Memory Usage")} />
          <GuardState
            value={verge?.enable_memory_usage ?? true}
            valueProps="checked"
@@ -101,9 +110,10 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
          >
            <Switch edge="end" />
          </GuardState>
-        </SettingItem>
+        </Item>

-        <SettingItem label={t("Proxy Group Icon")}>
+        <Item>
+          <ListItemText primary={t("Proxy Group Icon")} />
          <GuardState
            value={verge?.enable_group_icon ?? true}
            valueProps="checked"
@@ -114,9 +124,10 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
          >
            <Switch edge="end" />
          </GuardState>
-        </SettingItem>
+        </Item>

-        <SettingItem label={t("Menu Icon")}>
+        <Item>
+          <ListItemText primary={t("Menu Icon")} />
          <GuardState
            value={verge?.menu_icon ?? "monochrome"}
            onCatch={onError}
@@ -130,9 +141,11 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
              <MenuItem value="disable">{t("Disable")}</MenuItem>
            </Select>
          </GuardState>
-        </SettingItem>
+        </Item>
+
        {OS === "macos" && (
-          <SettingItem label={t("Tray Icon")}>
+          <Item>
+            <ListItemText primary={t("Tray Icon")} />
            <GuardState
              value={verge?.tray_icon ?? "monochrome"}
              onCatch={onError}
@@ -148,10 +161,11 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
                <MenuItem value="colorful">{t("Colorful")}</MenuItem>
              </Select>
            </GuardState>
-          </SettingItem>
+          </Item>
        )}

-        <SettingItem label={t("Common Tray Icon")}>
+        <Item>
+          <ListItemText primary={t("Common Tray Icon")} />
          <GuardState
            value={verge?.common_tray_icon}
            onCatch={onError}
@@ -194,9 +208,10 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
              {verge?.common_tray_icon ? t("Clear") : t("Browse")}
            </Button>
          </GuardState>
-        </SettingItem>
+        </Item>

-        <SettingItem label={t("System Proxy Tray Icon")}>
+        <Item>
+          <ListItemText primary={t("System Proxy Tray Icon")} />
          <GuardState
            value={verge?.sysproxy_tray_icon}
            onCatch={onError}
@@ -239,9 +254,10 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
              {verge?.sysproxy_tray_icon ? t("Clear") : t("Browse")}
            </Button>
          </GuardState>
-        </SettingItem>
+        </Item>

-        <SettingItem label={t("Tun Tray Icon")}>
+        <Item>
+          <ListItemText primary={t("Tun Tray Icon")} />
          <GuardState
            value={verge?.tun_tray_icon}
            onCatch={onError}
@@ -282,8 +298,12 @@ export const LayoutViewer = forwardRef<DialogRef>((props, ref) => {
              {verge?.tun_tray_icon ? t("Clear") : t("Browse")}
            </Button>
          </GuardState>
-        </SettingItem>
+        </Item>
      </List>
    </BaseDialog>
  );
 });
+
+const Item = styled(ListItem)(() => ({
+  padding: "5px 2px",
+}));
--- a/src/components/test/test-viewer.tsx
+++ b/src/components/test/test-viewer.tsx
@@ -39,7 +39,7 @@ export const TestViewer = forwardRef<TestViewerRef, Props>((props, ref) => {
      }
      return x;
    });
-    await patchVerge({ ...verge, test_list: newList });
+    await patchVerge({ test_list: newList });
  };

  useImperativeHandle(ref, () => ({
--- a/src/index.html
+++ b/src/index.html
@@ -9,27 +9,6 @@
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clash Verge</title>
-    <script>
-      (function () {
-        var _matchMedia = window.matchMedia;
-        window.matchMedia = function () {
-          var v = _matchMedia.apply(null, arguments);
-          if (!v.addEventListener) {
-            v.addEventListener = function () {
-              if (arguments.length < 2 || arguments[0] !== "change") {
-                console.error("Cannot proxy addEventListener:", arguments);
-                return;
-              }
-              if (arguments.length > 2) {
-                console.warn("Proxy addEventListener:", arguments);
-              }
-              v.addListener(arguments[1]);
-            };
-          }
-          return v;
-        };
-      })();
-    </script>
  </head>
  <body>
    <div id="root"></div>
--- a/src/pages/connections.tsx
+++ b/src/pages/connections.tsx
@@ -1,14 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useLockFn } from "ahooks";
-import {
-  Box,
-  Button,
-  IconButton,
-  MenuItem,
-  Select,
-  SelectProps,
-  styled,
-} from "@mui/material";
+import { Box, Button, IconButton, MenuItem } from "@mui/material";
 import { useRecoilState } from "recoil";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
@@ -34,7 +26,7 @@ const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 type OrderFunc = (list: IConnectionsItem[]) => IConnectionsItem[];

 const ConnectionsPage = () => {
-  const { t, i18n } = useTranslation();
+  const { t } = useTranslation();
  const { clashInfo } = useClashInfo();
  const { theme } = useCustomTheme();
  const isDark = theme.palette.mode === "dark";
@@ -130,7 +122,7 @@ const ConnectionsPage = () => {
  return (
    <BasePage
      full
-      title={t("Connections")}
+      title={<span style={{ whiteSpace: "nowrap" }}>{t("Connections")}</span>}
      contentStyle={{ height: "100%" }}
      header={
        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
@@ -159,7 +151,7 @@ const ConnectionsPage = () => {
          </IconButton>

          <Button size="small" variant="contained" onClick={onCloseAll}>
-            {t("Close All")}
+            <span style={{ whiteSpace: "nowrap" }}>{t("Close All")}</span>
          </Button>
        </Box>
      }
@@ -209,7 +201,7 @@ const ConnectionsPage = () => {
        ) : (
          <Virtuoso
            data={filterConn}
-            itemContent={(index, item) => (
+            itemContent={(_, item) => (
              <ConnectionItem
                value={item}
                onShowDetail={() => detailRef.current?.open(item)}
--- a/src/pages/test.tsx
+++ b/src/pages/test.tsx
@@ -22,6 +22,12 @@ import { TestItem } from "@/components/test/test-item";
 import { emit } from "@tauri-apps/api/event";
 import { nanoid } from "nanoid";

+// test icons
+import apple from "@/assets/image/test/apple.svg?raw";
+import github from "@/assets/image/test/github.svg?raw";
+import google from "@/assets/image/test/google.svg?raw";
+import youtube from "@/assets/image/test/youtube.svg?raw";
+
 const TestPage = () => {
  const { t } = useTranslation();
  const sensors = useSensors(
@@ -38,19 +44,25 @@ const TestPage = () => {
      uid: nanoid(),
      name: "Apple",
      url: "https://www.apple.com",
-      icon: "https://www.apple.com/favicon.ico",
+      icon: apple,
    },
    {
      uid: nanoid(),
      name: "GitHub",
      url: "https://www.github.com",
-      icon: `<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#000000"/></svg>`,
+      icon: github,
    },
    {
      uid: nanoid(),
      name: "Google",
      url: "https://www.google.com",
-      icon: `<svg enable-background="new 0 0 48 48" height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="m43.611 20.083h-1.611v-.083h-18v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657c-3.572-3.329-8.35-5.382-13.618-5.382-11.045 0-20 8.955-20 20s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z" fill="#ffc107"/><path d="m6.306 14.691 6.571 4.819c1.778-4.402 6.084-7.51 11.123-7.51 3.059 0 5.842 1.154 7.961 3.039l5.657-5.657c-3.572-3.329-8.35-5.382-13.618-5.382-7.682 0-14.344 4.337-17.694 10.691z" fill="#ff3d00"/><path d="m24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238c-2.008 1.521-4.504 2.43-7.219 2.43-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025c3.31 6.477 10.032 10.921 17.805 10.921z" fill="#4caf50"/><path d="m43.611 20.083h-1.611v-.083h-18v8h11.303c-.792 2.237-2.231 4.166-4.087 5.571.001-.001.002-.001.003-.002l6.19 5.238c-.438.398 6.591-4.807 6.591-14.807 0-1.341-.138-2.65-.389-3.917z" fill="#1976d2"/></svg>`,
+      icon: google,
+    },
+    {
+      uid: nanoid(),
+      name: "Youtube",
+      url: "https://www.youtube.com",
+      icon: youtube,
    },
  ];

--- a/src/polyfills/RegExp.js
+++ b/src/polyfills/RegExp.js
@@ -0,0 +1,30 @@
+(function () {
+  if (typeof window.RegExp === "undefined") {
+    return;
+  }
+
+  const originalRegExp = window.RegExp;
+
+  window.RegExp = function (pattern, flags) {
+    if (pattern instanceof originalRegExp && flags === undefined) {
+      flags = pattern.flags;
+    }
+
+    if (flags) {
+      if (!originalRegExp.prototype.hasOwnProperty("unicodeSets")) {
+        if (flags.includes("v")) {
+          flags = flags.replace("v", "u");
+        }
+      }
+
+      if (!originalRegExp.prototype.hasOwnProperty("hasIndices")) {
+        if (flags.includes("d")) {
+          flags = flags.replace("d", "");
+        }
+      }
+    }
+
+    return new originalRegExp(pattern, flags);
+  };
+  window.RegExp.prototype = originalRegExp.prototype;
+})();
--- a/src/polyfills/WeakRef.js
+++ b/src/polyfills/WeakRef.js
@@ -0,0 +1,16 @@
+(function () {
+  if (typeof window.WeakRef !== "undefined") {
+    return;
+  }
+
+  window.WeakRef = (function (weakMap) {
+    function WeakRef(target) {
+      weakMap.set(this, target);
+    }
+    WeakRef.prototype.deref = function () {
+      return weakMap.get(this);
+    };
+
+    return WeakRef;
+  })(new WeakMap());
+})();
--- a/src/polyfills/matchMedia.js
+++ b/src/polyfills/matchMedia.js
@@ -0,0 +1,36 @@
+(function () {
+  if (window.matchMedia && window.matchMedia("all").addEventListener) {
+    return;
+  }
+
+  const originalMatchMedia = window.matchMedia;
+
+  window.matchMedia = function (query) {
+    const mediaQueryList = originalMatchMedia(query);
+
+    if (!mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener = function (eventType, listener) {
+        if (eventType !== "change" || typeof listener !== "function") {
+          console.error("Invalid arguments for addEventListener:", arguments);
+          return;
+        }
+        mediaQueryList.addListener(listener);
+      };
+    }
+
+    if (!mediaQueryList.removeEventListener) {
+      mediaQueryList.removeEventListener = function (eventType, listener) {
+        if (eventType !== "change" || typeof listener !== "function") {
+          console.error(
+            "Invalid arguments for removeEventListener:",
+            arguments
+          );
+          return;
+        }
+        mediaQueryList.removeListener(listener);
+      };
+    }
+
+    return mediaQueryList;
+  };
+})();
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,15 +2,25 @@ import { defineConfig } from "vite";
 import path from "path";
 import svgr from "vite-plugin-svgr";
 import react from "@vitejs/plugin-react";
+import legacy from "@vitejs/plugin-legacy";
 import monacoEditor from "vite-plugin-monaco-editor";

-// https://vitejs.dev/config/
 export default defineConfig({
  root: "src",
  server: { port: 3000 },
  plugins: [
    svgr(),
    react(),
+    legacy({
+      targets: ["edge>=109", "safari>=13"],
+      modernPolyfills: true,
+      polyfills: ["web.structured-clone"],
+      additionalModernPolyfills: [
+        path.resolve("./src/polyfills/matchMedia.js"),
+        path.resolve("./src/polyfills/WeakRef.js"),
+        path.resolve("./src/polyfills/RegExp.js"),
+      ],
+    }),
    monacoEditor({
      languageWorkers: ["editorWorkerService", "typescript", "css"],
      customWorkers: [
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path d="M16.125 1c-1.153.067-2.477.71-3.264 1.527-.71.744-1.272 1.85-1.043 2.918 1.253.033 2.511-.626 3.264-1.459.703-.779 1.236-1.866 1.043-2.986zm.068 4.443c-1.809 0-2.565 1.112-3.818 1.112-1.289 0-2.467-1.041-4.027-1.041C6.226 5.514 3 7.48 3 12.11 3 16.324 6.818 21 8.973 21c1.309.013 1.626-.823 3.402-.832 1.778-.013 2.162.843 3.473.832 1.476-.011 2.628-1.633 3.47-2.918.604-.92.853-1.39 1.32-2.43-3.472-.88-4.163-6.48 0-7.638-.785-1.341-3.08-2.57-4.445-2.57z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48" height="48"><path fill="#FF3D00" d="M43.2 33.9c-.4 2.1-2.1 3.7-4.2 4-3.3.5-8.8 1.1-15 1.1-6.1 0-11.6-.6-15-1.1-2.1-.3-3.8-1.9-4.2-4-.4-2.3-.8-5.7-.8-9.9s.4-7.6.8-9.9c.4-2.1 2.1-3.7 4.2-4C12.3 9.6 17.8 9 24 9c6.2 0 11.6.6 15 1.1 2.1.3 3.8 1.9 4.2 4 .4 2.3.9 5.7.9 9.9-.1 4.2-.5 7.6-.9 9.9z"/><path fill="#FFF" d="M20 31V17l12 7z"/></svg>`