chore: adjust mobile style

9 files changed, 61 insertions, 30 deletions

diff --git a/src/App.module.scss b/src/App.module.scss
index c70e7a3..8c6f31b 100644
--- a/src/App.module.scss
+++ b/src/App.module.scss
@@ -19,4 +19,9 @@
   min-width: 0;
   overflow-y: auto;
   overflow-x: auto;
+
+  @media (max-width: 768px) {
+    padding-bottom: 0;
+    padding-top: calc(64px + env(safe-area-inset-top));
+  }
 }
diff --git a/src/components/Connections.css b/src/components/Connections.css
index 43667a9..a7bec45 100644
--- a/src/components/Connections.css
+++ b/src/components/Connections.css
@@ -27,15 +27,15 @@
 }
 
 .react-tabs__tab:hover {
-  opacity: 0.85;
-  background: var(--bg-near-transparent);
+  opacity: 1;
+  color: var(--color-focus-blue);
+  background: rgba(176, 206, 255, 0.221);
 }
 
 .react-tabs__tab--selected {
   opacity: 1;
   background: var(--color-focus-blue);
   color: white;
-  box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
 }
 
 .react-tabs__tab--selected:hover {
diff --git a/src/components/ContentHeader.module.scss b/src/components/ContentHeader.module.scss
index b71b37e..37a7b86 100644
--- a/src/components/ContentHeader.module.scss
+++ b/src/components/ContentHeader.module.scss
@@ -9,7 +9,7 @@
   @media (max-width: 768px) {
     min-height: 48px;
     height: auto;
-    padding: 5px 10px;
+    padding: 5px 15px;
     flex-wrap: wrap;
   }
 
diff --git a/src/components/Logs.module.scss b/src/components/Logs.module.scss
index d09400a..87492c7 100644
--- a/src/components/Logs.module.scss
+++ b/src/components/Logs.module.scss
@@ -9,11 +9,20 @@
   & > div {
     flex: 1;
   }
+
+  @media (max-width: 768px) {
+    max-width: none;
+    justify-content: stretch;
+  }
 }
 
 .searchWrapper {
   flex: 1;
   max-width: 300px;
+
+  @media (max-width: 768px) {
+    max-width: none;
+  }
 }
 
 .clearBtn {
@@ -113,7 +122,7 @@
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 
   @media (max-width: 768px) {
-    margin: 15px 25px;
+    margin: 10px 15px;
   }
 
   &::-webkit-scrollbar {
diff --git a/src/components/Logs.tsx b/src/components/Logs.tsx
index 90a048b..0dbb8f0 100644
--- a/src/components/Logs.tsx
+++ b/src/components/Logs.tsx
@@ -56,7 +56,6 @@ export default function Logs({ dispatch, logLevel, apiConfig, logs, logStreaming
   return (
     <div>
       <ContentHeader>
-        <div style={{ flex: 1 }} />
         <div className={s.headerControls}>
           <LogSearch className={s.searchWrapper} />
           <button className={s.clearBtn} onClick={() => dispatch(clearLogs())} title={t('Clear')}>
diff --git a/src/components/Rules.module.scss b/src/components/Rules.module.scss
index d56b182..c2a4f39 100644
--- a/src/components/Rules.module.scss
+++ b/src/components/Rules.module.scss
@@ -19,7 +19,7 @@
 }
 
 .listWrapper {
-  margin: 0 45px 20px;
+  margin: 10px 45px 20px;
   background-color: var(--bg-log-info-card);
   border-radius: 12px;
   box-shadow: var(--shadow-card);
@@ -27,7 +27,7 @@
   overflow: hidden;
 
   @media (max-width: 768px) {
-    margin: 0 15px 15px;
+    margin: 10px 15px 15px;
   }
 }
 
@@ -71,14 +71,13 @@
   }
 
   &:hover {
-    color: var(--color-text-primary);
-    background: var(--bg-near-transparent);
+    color: var(--color-focus-blue);
+    background: rgba(176, 206, 255, 0.221);
   }
 
   &.active {
     background-color: var(--color-focus-blue);
     color: #fff;
-    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
   }
 }
 
diff --git a/src/components/SideBar.module.scss b/src/components/SideBar.module.scss
index 37f06db..2d73535 100644
--- a/src/components/SideBar.module.scss
+++ b/src/components/SideBar.module.scss
@@ -10,6 +10,13 @@
   @media (max-width: 768px) {
     width: 100%;
     min-width: 0;
+    background: var(--color-background);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    padding: max(8px, env(safe-area-inset-top)) 16px 8px;
   }
 }
 
@@ -40,8 +47,14 @@
 .rows {
   @media (max-width: 768px) {
     display: flex;
-    justify-content: space-between;
-    overflow: auto;
+    justify-content: space-around;
+    align-items: center;
+    overflow: visible;
+    background: var(--color-bg-sidebar);
+    border-radius: 20px;
+    padding: 6px 8px;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
+    border: 1px solid var(--color-separator);
   }
 }
 
@@ -56,13 +69,11 @@
   margin: 4px 8px;
   border-radius: 8px;
   box-shadow: inset 0 0 0 1px transparent;
-  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease,
-    box-shadow 0.18s ease;
+  transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
 
   &:hover {
     background-color: rgba(176, 206, 255, 0.221);
     color: var(--color-focus-blue);
-    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.12), inset 0 0 0 1px rgba(59, 130, 246, 0.18);
     transform: translateX(2px);
   }
 
@@ -71,13 +82,17 @@
   }
 
   @media (max-width: 768px) {
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: center;
     margin: 0;
-    border-radius: 0;
+    border-radius: 14px;
+    padding: 8px 14px;
+    flex: 1;
 
     &:hover {
       transform: none;
-      box-shadow: inset 0 -2px 0 0 var(--color-focus-blue);
+      background-color: rgba(176, 206, 255, 0.221);
+      box-shadow: none;
     }
   }
 
@@ -102,12 +117,10 @@
 .rowActive {
   background: linear-gradient(135deg, #60a5fa 0%, var(--color-focus-blue) 100%);
   color: #fff;
-  box-shadow: 0 10px 24px rgba(59, 130, 246, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18);
 
   &:hover {
     color: #fff;
     background: linear-gradient(135deg, #60a5fa 0%, var(--color-focus-blue) 100%);
-    box-shadow: 0 12px 28px rgba(59, 130, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2);
   }
 
   svg {
@@ -119,9 +132,15 @@
   }
 
   @media (max-width: 768px) {
-    background: none;
-    border-bottom: 2px solid var(--color-focus-blue);
+    background: rgba(99, 160, 255, 0.18);
+    color: var(--color-focus-blue);
+    border-bottom: none;
     box-shadow: none;
+
+    svg {
+      color: var(--color-focus-blue);
+      transform: scale(1.15);
+    }
   }
 }
 
@@ -129,8 +148,7 @@
   padding-left: 14px;
   font-size: 0.75em;
   @media (max-width: 768px) {
-    padding-left: 0;
-    padding-top: 5px;
+    display: none;
   }
 
   @media (--breakpoint-not-small) {
diff --git a/src/components/Sparkline.tsx b/src/components/Sparkline.tsx
index c851e2f..b7f35a9 100644
--- a/src/components/Sparkline.tsx
+++ b/src/components/Sparkline.tsx
@@ -76,7 +76,8 @@ export default function Sparkline({ data: dataArray, labels, type, styleIndex =
             label(context) {
               if (context.parsed.y !== null) {
                 const suffix = type === 'inuse' ? '' : '/s';
-                return prettyBytes(context.parsed.y) + suffix;
+                // 还原 log1p 变换后的真实值
+                return prettyBytes(Math.expm1(context.parsed.y)) + suffix;
               }
               return '';
             },
@@ -92,7 +93,8 @@ export default function Sparkline({ data: dataArray, labels, type, styleIndex =
         {
           ...commonDataSetProps,
           ...chartStyles[styleIndex][type],
-          data: dataArray.map((v, i) => ({ x: labels[i], y: v })),
+          // log1p 变换：压缩大尖刺，让小流量也可见；log1p(0)=0 不会出现 -Infinity
+          data: dataArray.map((v, i) => ({ x: labels[i], y: Math.log1p(v) })),
           fill: true,
         },
       ],
diff --git a/src/components/proxies/Proxies.module.scss b/src/components/proxies/Proxies.module.scss
index b31a847..8990688 100644
--- a/src/components/proxies/Proxies.module.scss
+++ b/src/components/proxies/Proxies.module.scss
@@ -120,14 +120,13 @@
   }
 
   &:hover {
-    color: var(--color-text-primary);
-    background: var(--bg-near-transparent);
+    color: var(--color-focus-blue);
+    background: rgba(176, 206, 255, 0.221);
   }
 
   &.active {
     background-color: var(--color-focus-blue);
     color: #fff;
-    box-shadow: 0 2px 8px rgba(66, 133, 244, 0.3);
   }
 }