Sytle: UI improvement & Update Readme

README.md

@@ -11,31 +11,15 @@ A Clash Meta GUI based on <a href="https://github.com/tauri-apps/tauri">Tauri</a
 
 ## Install
 
-Click on the corresponding link below to download the installation package. Supports Windows (x64/x86), Linux (x64/arm64) and macOS 10.15+ (intel/apple).
+请到发布页面下载对应的安装包：[Release page](https://github.com/clash-verge-rev/clash-verge-rev/releases)<br>
+Go to the [release page](https://github.com/clash-verge-rev/clash-verge-rev/releases) to download the corresponding installation package<br>
+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.5.5/Clash.Verge_1.5.5_x64-setup.exe)]
-[[Windows arm64](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.5.5/Clash.Verge_1.5.5_arm64-setup.exe)]
+### 安装说明和常见问题，请到[文档页](https://clash-verge-rev.github.io/)查看：[Doc](https://clash-verge-rev.github.io/)
 
-[[macOS intel](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.5.5/Clash.Verge_1.5.5_x64.dmg)]
-[[macOS apple](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.5.5/Clash.Verge_1.5.5_aarch64.dmg)]
+---
 
-[[Linux x64 AppImage](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.5.5/clash-verge_1.5.5_amd64.AppImage)]
-[[Linux x64 deb](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.5.5/clash-verge_1.5.5_amd64.deb)]
-[[Linux arm64 deb](https://github.com/clash-verge-rev/clash-verge-rev/releases/download/v1.5.5/clash-verge_1.5.5_arm64.deb)]
-
-Or you can build it yourself. Supports Windows, Linux and macOS 10.15+
-
-Notes: If you could not start the app on Windows, please check that you have [Webview2](https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section) installed.
-
-## Features
-
-- Since the clash core has been removed. The project no longer maintains the clash core, but only the Clash Meta core.
-- Profiles management and enhancement (by yaml and Javascript). [Doc](https://clash-verge-rev.github.io)
-- Simple UI and supports custom theme color.
-- Built-in support [Clash.Meta(mihomo)](https://github.com/MetaCubeX/mihomo) core.
-- System proxy setting and guard.
-
-#### TG Group: [@clash_verge_rev](https://t.me/clash_verge_rev)
+### TG Group: [@clash_verge_rev](https://t.me/clash_verge_rev)
 
 ## Promotion
 
@@ -51,15 +35,21 @@ Notes: If you could not start the app on Windows, please check that you have [We
 - 解锁流媒体及 ChatGPT
 - 官网：https://狗狗加速.com
 
+## Features
+
+- Since the clash core has been removed. The project no longer maintains the clash core, but only the Clash Meta core.
+- Profiles management and enhancement (by yaml and Javascript). [Doc](https://clash-verge-rev.github.io)
+- Improved UI and supports custom theme color.
+- Built-in support [Clash.Meta(mihomo)](https://github.com/MetaCubeX/mihomo) core.
+- System proxy setting and guard.
+
 ## Preview
 
 ![preview](./docs/preview.gif)
 
 ### FAQ
 
-#### 1. **macOS** "Clash Verge" is damaged and can't be opened
-
-open the terminal and run `sudo xattr -r -d com.apple.quarantine /Applications/Clash\ Verge.app`
+Refer to [Doc FAQ Page](https://clash-verge-rev.github.io/faq.html)
 
 ## Development
 
@@ -73,14 +63,6 @@ pnpm run check
 pnpm dev
 ```
 
-## Todos
-
-> This keng is a little big...
-
-## Disclaimer
-
-This is a learning project for Rust practice.
-
 ## Contributions
 
 Issue and PR welcome!

UPDATELOG.md

@@ -2,11 +2,13 @@
 
 ### Features
 
-- 全新 UI 界面 (by @Amnesiash)
+- 全新专属 Verge rev UI 界面 (by @Amnesiash) 及细节调整
 - 提供允许无效证书的开关
 - 删除不必要的快捷键
 - Provider 更新添加动画
 - Merge 支持 Provider
+- 更换订阅框的粘贴按钮，删除默认的"Remote File" Profile 名称
+- 链接菜单添加节点显示
 
 ### Bugs Fixes
 

src/assets/styles/layout.scss

@@ -5,7 +5,7 @@
   overflow: hidden;
 
   &__left {
-    flex: 1 0 228px;
+    flex: 1 0 200px;
     display: flex;
     height: 100%;
     width: 100%;
@@ -21,23 +21,23 @@
     -moz-user-select: none;
     -ms-user-select: none;
     overflow: hidden;
-    border-right: 1px solid var(--divider-color);
+    // border-right: 1px solid var(--divider-color);
     // background-color: var(--background-color-alpha);
 
     // $maxLogo: 100px;
 
     .the-logo {
       position: relative;
-      flex: 1 0 58px;
+      flex: 1 0 47px;
       // width: 100%;
       display: flex;
       height: 100%;
-      padding: 0px 20px;
+      padding: 0px 15px;
       flex-direction: column;
       justify-content: center;
       align-items: flex-start;
       align-self: stretch;
-      border-bottom: 1px solid var(--divider-color);
+      // border-bottom: 1px solid var(--divider-color);
       // max-width: $maxLogo + 32px;
       // max-height: $maxLogo;
       // margin: 0 auto;
@@ -119,7 +119,7 @@
     }
 
     .layout__left .the-logo {
-      flex: 1 0 58px;
+      flex: 1 0 47px;
     }
 
     .layout__right .the-content {

src/assets/styles/page.scss

@@ -13,12 +13,13 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-bottom: 1px solid var(--divider-color);
+    // border-bottom: 1px solid var(--divider-color);
   }
 
   .base-container {
     height: 100%;
     overflow: hidden;
+    border-radius: 10px;
     // border-top-left-radius: var(--border-radius);
 
     > section {
@@ -27,11 +28,11 @@
       width: 100%;
       height: 100%;
       overflow: auto;
-      padding: 16px 0;
+      padding: 10px 0;
       box-sizing: border-box;
       scrollbar-gutter: stable;
       .base-content {
-        width: calc(100% - 16px * 2);
+        width: calc(100% - 10px * 2);
         margin: 0 auto;
       }
     }

src/components/connection/connection-item.tsx

@@ -58,7 +58,9 @@ export const ConnectionItem = (props: Props) => {
 
             {!!metadata.process && <Tag>{metadata.process}</Tag>}
 
-            {chains?.length > 0 && <Tag>{chains[value.chains.length - 1]}</Tag>}
+            {chains?.length > 0 && (
+              <Tag>{[...chains].reverse().join(" / ")}</Tag>
+            )}
 
             <Tag>{dayjs(start).fromNow()}</Tag>
 

src/components/layout/layout-item.tsx

@@ -26,10 +26,10 @@ export const LayoutItem = (props: Props) => {
         sx={[
           {
             borderRadius: 2,
-            marginLeft: 1.5,
+            marginLeft: 1.25,
             paddingLeft: 1.5,
             paddingRight: 1,
-            marginRight: 1.5,
+            marginRight: 1.25,
             textAlign: "left",
             "& .MuiListItemText-primary": {
               color: "text.primary",
@@ -54,7 +54,7 @@ export const LayoutItem = (props: Props) => {
       >
         <ListItemIcon>{icon}</ListItemIcon>
         <ListItemText
-          sx={{ textAlign: "center", marginLeft: "-20px" }}
+          sx={{ textAlign: "center", marginLeft: "-35px" }}
           primary={children}
         />
       </ListItemButton>

src/components/layout/layout-traffic.tsx

@@ -89,7 +89,7 @@ export const LayoutTraffic = () => {
 
   return (
     <Box
-      width="188px"
+      width="150px"
       position="relative"
       onClick={trafficRef.current?.toggleStyle}
     >

src/components/proxy/proxy-render.tsx

@@ -47,7 +47,7 @@ export const ProxyRender = (props: RenderProps) => {
         style={{
           background: itembackgroundcolor,
           height: "64px",
-          margin: "8px 16px",
+          margin: "8px 8px",
           borderRadius: "8px",
         }}
         onClick={() => onHeadState(group.name, { open: !headState?.open })}

src/components/setting/setting-verge.tsx

@@ -167,6 +167,7 @@ const SettingVerge = ({ onError }: Props) => {
           <Input
             value={startup_script}
             disabled
+            sx={{ width: 230 }}
             endAdornment={
               <>
                 <Button

src/components/test/test-box.tsx

@@ -26,7 +26,7 @@ export const TestBox = styled(Box)(({ theme, "aria-selected": selected }) => {
     display: "block",
     cursor: "pointer",
     textAlign: "left",
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: 8,
     boxShadow: theme.shadows[2],
     padding: "8px 16px",
     boxSizing: "border-box",