feat: add monitoring retention controls

vite-frontend/src/api/index.ts

@@ -41,6 +41,7 @@ import type {
   MonitorPermissionApiItem,
   MonitorAccessApiData,
   TunnelQualityApiItem,
+  StorageSummaryApiData,
 } from "./types";
 
 import axios from "axios";
@@ -254,6 +255,9 @@ export const updateConfigs = (configMap: Record<string, string>) =>
 export const updateConfig = (name: string, value: string) =>
   Network.post("/config/update-single", { name, value });
 
+export const getStorageSummary = () =>
+  Network.get<StorageSummaryApiData>("/system/storage");
+
 export const activateLicense = (licenseKey: string) =>
   Network.post("/license/activate", { license_key: licenseKey });
 

vite-frontend/src/api/types.ts

@@ -474,6 +474,12 @@ export interface ServiceMonitorLimitsApiData {
   maxTimeoutSec: number;
 }
 
+export interface StorageSummaryApiData {
+  dbType: string;
+  databaseSizeBytes: number;
+  databaseSizeText: string;
+}
+
 export interface MonitorNodeApiItem {
   id: number;
   inx: number;

vite-frontend/src/pages/config.tsx

@@ -26,6 +26,7 @@ import {
   importBackup,
   getAnnouncement,
   updateAnnouncement,
+  getStorageSummary,
   type AnnouncementData,
 } from "@/api";
 import { BackIcon, SettingsIcon } from "@/components/icons";
@@ -146,6 +147,14 @@ const CONFIG_ITEMS: ConfigItem[] = [
       "关闭后，前端停止自动刷新，后端停止实时隧道质量探测（全局配置）",
     type: "switch",
   },
+  {
+    key: "monitor_retention_days",
+    label: "监控数据保留天数",
+    placeholder: "7",
+    description:
+      "统一清理节点指标、隧道流量、服务监控结果和隧道质量历史；默认 7 天。",
+    type: "input",
+  },
   {
     key: "captcha_enabled",
     label: "启用验证码",
@@ -220,6 +229,7 @@ const getInitialConfigs = (): Record<string, string> => {
     "cloudflare_secret_key",
     "forward_compact_mode",
     "monitor_tunnel_quality_enabled",
+    "monitor_retention_days",
     "ip",
     "panel_domain",
     "app_logo",
@@ -288,6 +298,7 @@ export default function ConfigPage() {
   const [brandUploading, setBrandUploading] = useState<
     Partial<Record<BrandPreviewKey, boolean>>
   >({});
+  const [storageSummary, setStorageSummary] = useState("加载中...");
 
   const canGoBack =
     typeof window !== "undefined" &&
@@ -347,10 +358,26 @@ export default function ConfigPage() {
     }
   };
 
+  const loadStorageSummary = async () => {
+    try {
+      const response = await getStorageSummary();
+
+      if (response.code === 0 && response.data?.databaseSizeText) {
+        setStorageSummary(response.data.databaseSizeText);
+
+        return;
+      }
+      setStorageSummary("获取失败");
+    } catch {
+      setStorageSummary("获取失败");
+    }
+  };
+
   useEffect(() => {
     const timer = setTimeout(() => {
       loadConfigs(initialConfigs);
       loadAnnouncement();
+      loadStorageSummary();
     }, 100);
 
     return () => clearTimeout(timer);
@@ -1324,6 +1351,22 @@ export default function ConfigPage() {
             </Select>
           </div>
 
+          <Divider className="my-2" />
+
+          <div className="space-y-3">
+            <div className="flex flex-col gap-1">
+              <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                数据库占用
+              </p>
+              <p className="text-xs text-gray-500 dark:text-gray-400">
+                当前后端数据库文件或实例占用空间，仅用于容量参考。
+              </p>
+            </div>
+            <div className="rounded-lg border border-divider bg-default-50/60 dark:bg-default-100/10 px-4 py-3 text-sm font-semibold text-default-800 dark:text-default-200">
+              {storageSummary}
+            </div>
+          </div>
+
           <div className="flex justify-end pt-6 border-t border-divider/50 mt-4">
             <Button
               color="primary"