Style: UI improvement & 1.4.6 ready

README.md

@@ -41,18 +41,18 @@ A Clash Meta GUI based on <a href="https://github.com/tauri-apps/tauri">Tauri</a
 
 Download from [release](https://github.com/clash-verge-rev/clash-verge-rev/releases). Supports Windows (x64/x86), Linux (x64/arm64) and macOS 10.15+ (intel/apple).
 
-- [Windows x64](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.5/Clash.Verge_1.4.5_x64-setup.exe)
+- [Windows x64](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.6/Clash.Verge_1.4.6_x64-setup.exe)
-- [Windows x86](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.5/Clash.Verge_1.4.5_x86-setup.exe)
+- [Windows x86](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.6/Clash.Verge_1.4.6_x86-setup.exe)
-- [Windows arm64](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.5/Clash.Verge_1.4.5_arm64-setup.exe)
+- [Windows arm64](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.6/Clash.Verge_1.4.6_arm64-setup.exe)
 
-- [macOS intel](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.5/Clash.Verge_1.4.5_x64.dmg)
+- [macOS intel](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.6/Clash.Verge_1.4.6_x64.dmg)
-- [macOS apple](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.5/Clash.Verge_1.4.5_aarch64.dmg)
+- [macOS apple](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.6/Clash.Verge_1.4.6_aarch64.dmg)
 
-- [Linux x64 AppImage](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.5/clash-verge_1.4.5_amd64.AppImage)
+- [Linux x64 AppImage](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.6/clash-verge_1.4.6_amd64.AppImage)
-- [Linux x64 deb](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.5/clash-verge_1.4.5_amd64.deb)
+- [Linux x64 deb](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.6/clash-verge_1.4.6_amd64.deb)
-- [Linux x86 AppImage](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.5/clash-verge_1.4.5_i386.AppImage)
+- [Linux x86 AppImage](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.6/clash-verge_1.4.6_i386.AppImage)
-- [Linux x86 deb](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.5/clash-verge_1.4.5_i386.deb)
+- [Linux x86 deb](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.6/clash-verge_1.4.6_i386.deb)
-- [Linux arm64 deb](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.5/clash-verge_1.4.5_arm64.deb)
+- [Linux arm64 deb](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.4.6/clash-verge_1.4.6_arm64.deb)
 
 Or you can build it yourself. Supports Windows, Linux and macOS 10.15+
 

UPDATELOG.md

@@ -1,3 +1,12 @@
+## v1.4.6
+
+### Features
+
+- 更新 Clash Meta(mihomo) Core to v1.18.0
+- UI 优化调整
+
+---
+
 ## v1.4.5
 
 ### Features

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clash-verge",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "license": "GPL-3.0",
   "scripts": {
     "dev": "tauri dev",

src-tauri/Cargo.lock

@@ -559,7 +559,7 @@ dependencies = [
 
 [[package]]
 name = "clash-verge"
-version = "1.4.5"
+version = "1.4.6"
 dependencies = [
  "anyhow",
  "auto-launch",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "clash-verge"
-version = "1.4.5"
+version = "1.4.6"
 description = "clash verge"
 authors = ["zzzgydi", "wonfen", "MystiPanda"]
 license = "GPL-3.0"

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "package": {
     "productName": "Clash Verge",
-    "version": "1.4.5"
+    "version": "1.4.6"
   },
   "build": {
     "distDir": "../dist",

src/assets/styles/page.scss

@@ -27,15 +27,25 @@
       width: 100%;
       height: 100%;
       overflow: auto;
-      padding: 5px 5px;
+      padding: 10px 0;
       box-sizing: border-box;
       scrollbar-gutter: stable;
 
       .base-content {
-        width: 100%;
+        width: calc(100% - 10px * 2);
-        // max-width: 850px;
         margin: 0 auto;
       }
     }
+
+    &.no-padding {
+      > section {
+        padding: 0;
+        overflow: visible;
+
+        .base-content {
+          width: 100%;
+        }
+      }
+    }
   }
 }

src/components/base/base-page.tsx

@@ -8,10 +8,11 @@ interface Props {
   header?: React.ReactNode; // something behind title
   contentStyle?: React.CSSProperties;
   children?: ReactNode;
+  full?: boolean;
 }
 
 export const BasePage: React.FC<Props> = (props) => {
-  const { title, header, contentStyle, children } = props;
+  const { title, header, contentStyle, full, children } = props;
   const { theme } = useCustomTheme();
 
   const isDark = theme.palette.mode === "dark";
@@ -28,7 +29,7 @@ export const BasePage: React.FC<Props> = (props) => {
         </header>
 
         <div
-          className="base-container"
+          className={full ? "base-container no-padding" : "base-container"}
           style={{ backgroundColor: isDark ? "#090909" : "#ffffff" }}
         >
           <section

src/pages/connections.tsx

@@ -114,6 +114,7 @@ const ConnectionsPage = () => {
 
   return (
     <BasePage
+      full
       title={t("Connections")}
       contentStyle={{ height: "100%" }}
       header={
@@ -142,12 +143,11 @@ const ConnectionsPage = () => {
         </Box>
       }
     >
-      <Box sx={{ boxShadow: 0, height: "100%" }}>
       <Box
         sx={{
           pt: 1,
           mb: 0.5,
-            mx: "12px",
+          mx: "10px",
           height: "36px",
           display: "flex",
           alignItems: "center",
@@ -208,9 +208,7 @@ const ConnectionsPage = () => {
           />
         )}
       </Box>
-
       <ConnectionDetail ref={detailRef} />
-      </Box>
     </BasePage>
   );
 };

src/pages/logs.tsx

@@ -38,6 +38,7 @@ const LogPage = () => {
 
   return (
     <BasePage
+      full
       title={t("Logs")}
       contentStyle={{ height: "100%" }}
       header={
@@ -63,20 +64,12 @@ const LogPage = () => {
           </Button>
         </Box>
       }
-    >
-      <Box
-        sx={{
-          boxSizing: "border-box",
-          boxShadow: 0,
-          height: "100%",
-          userSelect: "text",
-        }}
     >
       <Box
         sx={{
           pt: 1,
           mb: 0.5,
-            mx: "12px",
+          mx: "10px",
           height: "36px",
           display: "flex",
           alignItems: "center",
@@ -121,7 +114,6 @@ const LogPage = () => {
           <BaseEmpty text="No Logs" />
         )}
       </Box>
-      </Box>
     </BasePage>
   );
 };

src/pages/proxies.tsx

@@ -51,6 +51,7 @@ const ProxyPage = () => {
 
   return (
     <BasePage
+      full
       contentStyle={{ height: "100%" }}
       title={t("Proxy Groups")}
       header={
@@ -71,17 +72,8 @@ const ProxyPage = () => {
           </ButtonGroup>
         </Box>
       }
-    >
-      <Box
-        sx={{
-          borderRadius: 1,
-          boxShadow: 0,
-          height: "100%",
-          boxSizing: "border-box",
-        }}
     >
       <ProxyGroups mode={curMode!} />
-      </Box>
     </BasePage>
   );
 };

src/pages/rules.tsx

@@ -18,13 +18,12 @@ const RulesPage = () => {
   }, [data, filterText]);
 
   return (
-    <BasePage title={t("Rules")} contentStyle={{ height: "100%" }}>
+    <BasePage full title={t("Rules")} contentStyle={{ height: "100%" }}>
-      <Box sx={{ boxSizing: "border-box", boxShadow: 0, height: "100%" }}>
       <Box
         sx={{
           pt: 1,
           mb: 0.5,
-            mx: "12px",
+          mx: "10px",
           height: "36px",
           display: "flex",
           alignItems: "center",
@@ -57,7 +56,6 @@ const RulesPage = () => {
           <BaseEmpty text="No Rules" />
         )}
       </Box>
-      </Box>
     </BasePage>
   );
 };