chore: UI adjustment, add translation, fix CI

src/pages/connections.tsx

@@ -3,24 +3,16 @@ import { useLockFn } from "ahooks";
 import {
   Box,
   Button,
-  Grid,
   IconButton,
   MenuItem,
   Paper,
   Select,
   TextField,
-  Typography,
 } from "@mui/material";
 import { useRecoilState } from "recoil";
 import { Virtuoso } from "react-virtuoso";
 import { useTranslation } from "react-i18next";
-import {
-  ArrowDownward,
-  ArrowUpward,
-  Link,
-  TableChartRounded,
-  TableRowsRounded,
-} from "@mui/icons-material";
+import { TableChartRounded, TableRowsRounded } from "@mui/icons-material";
 import { closeAllConnections } from "@/services/api";
 import { atomConnectionSetting } from "@/services/states";
 import { useClashInfo } from "@/hooks/use-clash";
@@ -32,7 +24,6 @@ import {
   ConnectionDetail,
   ConnectionDetailRef,
 } from "@/components/connection/connection-detail";
-import parseTraffic from "@/utils/parse-traffic";
 
 const initConn = { uploadTotal: 0, downloadTotal: 0, connections: [] };
 
@@ -57,10 +48,6 @@ const ConnectionsPage = () => {
       list.sort((a, b) => b.curDownload! - a.curDownload!),
   };
 
-  const uploadTotal = connData.uploadTotal;
-
-  const downloadTotal = connData.downloadTotal;
-
   const filterConn = useMemo(() => {
     const orderFunc = orderOpts[curOrderOpt];
     const connections = connData.connections.filter((conn) =>
@@ -125,24 +112,6 @@ const ConnectionsPage = () => {
 
   const detailRef = useRef<ConnectionDetailRef>(null!);
 
-  const connectionItems = [
-    {
-      icon: <ArrowUpward />,
-      label: t("Upload Total"),
-      value: parseTraffic(uploadTotal).join(" "),
-    },
-    {
-      icon: <ArrowDownward />,
-      label: t("Download Total"),
-      value: parseTraffic(downloadTotal).join(" "),
-    },
-    {
-      icon: <Link />,
-      label: t("Active Connections"),
-      value: filterConn.length,
-    },
-  ];
-
   return (
     <BasePage
       title={t("Connections")}
@@ -173,21 +142,7 @@ const ConnectionsPage = () => {
         </Box>
       }
     >
-      <Paper sx={{ padding: 2, mb: 2 }}>
-        <Grid container>
-          {connectionItems.map((item, index) => (
-            <Grid item xs={4} key={index}>
-              <Box display="flex" alignItems="center" whiteSpace="nowrap">
-                {item.icon}
-                <Typography sx={{ ml: 1, mr: 1 }}>{item.label}</Typography>
-                <Typography>{item.value}</Typography>
-              </Box>
-            </Grid>
-          ))}
-        </Grid>
-      </Paper>
-
-      <Paper sx={{ boxShadow: 2, height: "calc(100% - 56px - 16px)" }}>
+      <Paper sx={{ boxShadow: 0, height: "100%" }}>
         <Box
           sx={{
             pt: 1,

src/pages/logs.tsx

@@ -67,7 +67,7 @@ const LogPage = () => {
       <Paper
         sx={{
           boxSizing: "border-box",
-          boxShadow: 2,
+          boxShadow: 0,
           height: "100%",
           userSelect: "text",
         }}

src/pages/proxies.tsx

@@ -75,7 +75,7 @@ const ProxyPage = () => {
       <Paper
         sx={{
           borderRadius: 1,
-          boxShadow: 2,
+          boxShadow: 0,
           height: "100%",
           boxSizing: "border-box",
           py: 1,

src/pages/rules.tsx

@@ -19,7 +19,7 @@ const RulesPage = () => {
 
   return (
     <BasePage title={t("Rules")} contentStyle={{ height: "100%" }}>
-      <Paper sx={{ boxSizing: "border-box", boxShadow: 2, height: "100%" }}>
+      <Paper sx={{ boxSizing: "border-box", boxShadow: 0, height: "100%" }}>
         <Box
           sx={{
             pt: 1,

src/pages/settings.tsx

@@ -35,17 +35,13 @@ const SettingPage = () => {
     >
       <Grid container spacing={{ xs: 2, lg: 3 }}>
         <Grid item xs={12} md={6}>
+          <Paper sx={{ borderRadius: 1, boxShadow: 2, marginBottom: 2 }}>
+            <SettingSystem onError={onError} />
+          </Paper>
           <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
             <SettingClash onError={onError} />
           </Paper>
         </Grid>
-
-        <Grid item xs={12} md={6}>
-          <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
-            <SettingSystem onError={onError} />
-          </Paper>
-        </Grid>
-
         <Grid item xs={12} md={6}>
           <Paper sx={{ borderRadius: 1, boxShadow: 2 }}>
             <SettingVerge onError={onError} />