fix(proxy-pool): refine controls and runtime metrics

Author: ssfun

cliproxyapi-pro-management/monitoring-locales.json

@@ -46,13 +46,16 @@
       "failover_attempts": "Max failover attempts",
       "health_interval": "Health-check interval",
       "health_timeout": "Health-check timeout",
+      "unit_seconds": "seconds",
+      "unit_minutes": "minutes",
       "isolation_threshold": "Failures before isolation",
       "isolation_duration": "Isolation duration",
       "probe_target": "TCP probe target",
       "test_url": "Exit-IP test URL",
       "health_checks": "Background health checks",
       "fail_open": "Allow direct fallback (traffic leak risk)",
       "nodes": "Proxy nodes",
+      "actions": "Actions",
       "nodes_hint": "Supports HTTP, HTTPS, SOCKS5, and SOCKS5H proxy URLs.",
       "add_node": "Add node",
       "batch_import": "Batch import",
@@ -2406,13 +2409,16 @@
       "failover_attempts": "最大故障转移次数",
       "health_interval": "健康检查间隔",
       "health_timeout": "健康检查超时",
+      "unit_seconds": "秒",
+      "unit_minutes": "分钟",
       "isolation_threshold": "连续失败隔离阈值",
       "isolation_duration": "隔离时长",
       "probe_target": "TCP 探测目标",
       "test_url": "出口 IP 测试地址",
       "health_checks": "后台健康检查",
       "fail_open": "允许直连回退（存在流量泄漏风险）",
       "nodes": "代理节点",
+      "actions": "操作",
       "nodes_hint": "支持 HTTP、HTTPS、SOCKS5 和 SOCKS5H 代理地址。",
       "add_node": "添加节点",
       "batch_import": "批量导入",
@@ -3692,13 +3698,16 @@
       "failover_attempts": "最大故障轉移次數",
       "health_interval": "健康檢查間隔",
       "health_timeout": "健康檢查逾時",
+      "unit_seconds": "秒",
+      "unit_minutes": "分鐘",
       "isolation_threshold": "連續失敗隔離門檻",
       "isolation_duration": "隔離時間",
       "probe_target": "TCP 探測目標",
       "test_url": "出口 IP 測試位址",
       "health_checks": "背景健康檢查",
       "fail_open": "允許直接連線回退（存在流量洩漏風險）",
       "nodes": "代理節點",
+      "actions": "操作",
       "nodes_hint": "支援 HTTP、HTTPS、SOCKS5 和 SOCKS5H 代理位址。",
       "add_node": "新增節點",
       "batch_import": "批次匯入",

cliproxyapi-pro-management/overlay/src/features/proxyPool/ProxyPool.module.scss

@@ -7,7 +7,7 @@
 }
 
 .pageWithSave {
-  padding-bottom: 88px;
+  padding-bottom: calc(var(--proxy-pool-action-bar-height, 46px) + 38px);
 }
 
 .header {
@@ -202,20 +202,38 @@
 }
 
 .quickSettings {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  padding: 11px 14px;
+  display: grid;
+  grid-template-columns: minmax(220px, 320px) minmax(190px, 240px) minmax(0, 1fr);
+  align-items: end;
+  gap: 16px;
+  padding: 13px 14px;
   border: 1px solid var(--border-color);
   border-radius: 12px;
   background: var(--bg-secondary);
 }
-.quickSettings > :first-child {
-  width: 210px;
-  margin: 0;
+.quickSettingField {
+  display: grid;
+  min-width: 0;
+  gap: 6px;
 }
-.quickSettings label {
+.quickSettingLabel {
+  color: var(--text-primary);
   font-size: 11px;
+  font-weight: 600;
+  line-height: 1.2;
+}
+.quickSelectTrigger {
+  height: 34px !important;
+}
+.quickToggleControl {
+  display: flex;
+  height: 34px;
+  align-items: center;
+  gap: 8px;
+}
+.quickToggleControl > span {
+  color: var(--text-secondary);
+  font-size: 12px;
 }
 .settingsLink,
 .textButton {
@@ -229,6 +247,13 @@
   font-size: 12px;
   font-weight: 600;
 }
+.quickSettings .settingsLink {
+  display: inline-flex;
+  height: 34px;
+  align-items: center;
+  align-self: end;
+  justify-self: end;
+}
 
 .nodePanel,
 .settingsPanel,
@@ -329,6 +354,9 @@
 .desktopTable table {
   table-layout: fixed;
 }
+.desktopTable th {
+  white-space: nowrap;
+}
 .desktopTable th:nth-child(1),
 .desktopTable td:nth-child(1) {
   width: 38px;
@@ -355,7 +383,7 @@
 }
 .desktopTable th:nth-child(7),
 .desktopTable td:nth-child(7) {
-  width: 58px;
+  width: 76px;
 }
 .desktopTable th:nth-child(8),
 .desktopTable td:nth-child(8) {
@@ -836,6 +864,31 @@
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 13px;
 }
+.durationControl {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+.durationControl input {
+  min-width: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.durationControl > span {
+  display: inline-flex;
+  min-width: 58px;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0 11px;
+  border: 1px solid var(--border-color);
+  border-left: 0;
+  border-radius: 0 8px 8px 0;
+  color: var(--text-secondary);
+  background: var(--muted-bg, rgba(148, 163, 184, 0.1));
+  font-size: 11px;
+  font-weight: 600;
+  white-space: nowrap;
+}
 .dangerZone {
   display: flex;
   align-items: center;
@@ -966,47 +1019,6 @@
   margin-top: 12px;
 }
 
-.saveBar {
-  position: fixed;
-  z-index: 50;
-  right: max(24px, env(safe-area-inset-right));
-  bottom: max(16px, env(safe-area-inset-bottom));
-  left: calc(var(--sidebar-active-width, 216px) + 24px);
-  display: flex;
-  min-height: 58px;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-  padding: 8px 11px 8px 14px;
-  border: 1px solid color-mix(in srgb, var(--primary-color) 25%, var(--border-color));
-  border-radius: 13px;
-  background: color-mix(in srgb, var(--bg-secondary) 94%, transparent);
-  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.17);
-  backdrop-filter: blur(16px);
-}
-.saveBar > div:first-child {
-  min-width: 0;
-}
-.saveBar strong,
-.saveBar span {
-  display: block;
-}
-.saveBar strong {
-  font-size: 13px;
-}
-.saveBar span {
-  overflow: hidden;
-  color: var(--text-secondary);
-  font-size: 11px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.saveBar > div:last-child {
-  display: flex;
-  gap: 7px;
-}
-
 .noticeCard {
   padding: 24px;
 }
@@ -1056,7 +1068,7 @@
     padding: 0 0 18px;
   }
   .pageWithSave {
-    padding-bottom: 78px;
+    padding-bottom: calc(var(--proxy-pool-action-bar-height, 46px) + 28px);
   }
   .header {
     align-items: flex-start;
@@ -1107,13 +1119,9 @@
     white-space: nowrap;
   }
   .quickSettings {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 11px;
   }
-  .quickSettings > :first-child {
-    width: auto;
-  }
   .settingsLink {
     grid-column: 1 / -1;
     margin-left: 0;
@@ -1220,19 +1228,6 @@
   .bypassPanel > div > div {
     grid-template-columns: 1fr;
   }
-  .saveBar {
-    right: 10px;
-    bottom: max(8px, env(safe-area-inset-bottom));
-    left: 10px;
-    min-height: 58px;
-    padding: 7px 8px 7px 11px;
-  }
-  .saveBar > div:first-child span {
-    display: none;
-  }
-  .saveBar > div:last-child > :first-child {
-    display: none;
-  }
 }
 
 @media (max-width: 480px) {
@@ -1267,7 +1262,8 @@
   .quickSettings {
     grid-template-columns: 1fr;
   }
-  .quickSettings > :nth-child(2) {
+  .quickSettings .settingsLink {
+    grid-column: auto;
     justify-self: start;
   }
   .nodeFilters {

cliproxyapi-pro-management/overlay/src/features/proxyPool/ProxyPoolNodeManager.tsx

@@ -269,7 +269,7 @@ export function ProxyPoolNodeManager({
                     {t('proxy_pool.last_check', { defaultValue: 'Last check' })}
                   </TableHead>
                   <TableHead alignRight>
-                    {t('common.actions', { defaultValue: 'Actions' })}
+                    {t('proxy_pool.actions', { defaultValue: 'Actions' })}
                   </TableHead>
                 </TableRow>
               </TableHeader>

cliproxyapi-pro-management/overlay/src/features/proxyPool/ProxyPoolSaveBar.tsx

@@ -1,7 +1,9 @@
+import { useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@/components/ui/Button';
-import styles from './ProxyPool.module.scss';
+import { IconCheck, IconRefreshCw } from '@/components/ui/icons';
+import { useActionBarHeightVar } from '@/hooks/useActionBarHeightVar';
+import configStyles from '@/pages/ConfigPage.module.scss';
 
 interface ProxyPoolSaveBarProps {
   visible: boolean;
@@ -12,27 +14,41 @@ interface ProxyPoolSaveBarProps {
 
 export function ProxyPoolSaveBar({ visible, saving, onDiscard, onSave }: ProxyPoolSaveBarProps) {
   const { t } = useTranslation();
+  const actionBarRef = useRef<HTMLDivElement>(null);
+  useActionBarHeightVar(actionBarRef, '--proxy-pool-action-bar-height', visible);
+
   if (!visible) return null;
   const content = (
-    <footer className={styles.saveBar}>
-      <div>
-        <strong>{t('proxy_pool.unsaved_changes', { defaultValue: 'Unsaved changes' })}</strong>
-        <span>
-          {t('proxy_pool.save_bar_hint', {
-            defaultValue: 'Review and save to apply them to the running pool.',
-          })}
-        </span>
-      </div>
-      <div>
-        <Button variant="ghost" size="sm" onClick={onDiscard} disabled={saving}>
-          {t('proxy_pool.discard_changes', { defaultValue: 'Discard' })}
-        </Button>
-        <Button size="sm" onClick={onSave} loading={saving}>
-          {t('common.save')}
-        </Button>
+    <div className={configStyles.floatingActionContainer} ref={actionBarRef}>
+      <div className={configStyles.floatingActionList}>
+        <div className={`${configStyles.floatingStatus} ${configStyles.modified}`}>
+          {saving
+            ? t('config_management.status_saving_short', { defaultValue: 'Saving' })
+            : t('config_management.status_dirty_short', { defaultValue: 'Unsaved' })}
+        </div>
+        <button
+          type="button"
+          className={configStyles.floatingActionButton}
+          onClick={onDiscard}
+          disabled={saving}
+          title={t('proxy_pool.discard_changes', { defaultValue: 'Discard changes' })}
+          aria-label={t('proxy_pool.discard_changes', { defaultValue: 'Discard changes' })}
+        >
+          <IconRefreshCw size={16} />
+        </button>
+        <button
+          type="button"
+          className={configStyles.floatingActionButton}
+          onClick={onSave}
+          disabled={saving}
+          title={t('common.save')}
+          aria-label={t('common.save')}
+        >
+          <IconCheck size={16} />
+          {!saving && <span className={configStyles.dirtyDot} aria-hidden="true" />}
+        </button>
       </div>
-    </footer>
+    </div>
   );
-  const target = typeof document !== 'undefined' ? document.querySelector('.main-body') : null;
-  return target ? createPortal(content, target) : content;
+  return typeof document === 'undefined' ? content : createPortal(content, document.body);
 }