fix: 恢复Agent指标并修复时间弹层

- 使用按主键更新避免SQLite字段错误
- 自定义时间选择器改用Portal避免卡片遮挡

frontend/src/pages/monitor/host-monitor/HostTimeRangePicker.tsx

@@ -1,8 +1,9 @@
 // 主机监控时间范围选择器 — 预设 + 自定义 // Logan.Li
-import { useState, useRef, useEffect } from 'react';
+import { useState } from 'react';
 import { Calendar, ChevronDown, Timer } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import {
   TIME_RANGE_PRESETS,
   type HostMonitorTimeRange,
@@ -21,15 +22,6 @@ export function HostTimeRangePicker({ value, onChange }: Props) {
   const now = new Date();
   const [customStart, setCustomStart] = useState(toDatetimeLocalValue(new Date(now.getTime() - 3600_000)));
   const [customEnd, setCustomEnd] = useState(toDatetimeLocalValue(now));
-  const popRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (popRef.current && !popRef.current.contains(e.target as Node)) setCustomOpen(false);
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, []);
 
   const selectPreset = (id: TimeRangePresetId) => {
     if (id === 'custom') return;
@@ -72,20 +64,20 @@ export function HostTimeRangePicker({ value, onChange }: Props) {
             {p.label}
           </Button>
         ))}
-        <div className="relative" ref={popRef}>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            className={`h-6 text-[11px] px-2 rounded gap-1 ${value.preset === 'custom' ? 'dg-btn-primary shadow-sm' : 'dg-text-secondary hover:dg-text-primary'}`}
-            onClick={() => setCustomOpen((v) => !v)}
-          >
-            <Calendar className="h-3 w-3" />
-            自定义
-            <ChevronDown className={`h-3 w-3 transition-transform ${customOpen ? 'rotate-180' : ''}`} />
-          </Button>
-          {customOpen && (
-            <div className="absolute right-0 top-full mt-1 z-50 w-72 rounded-lg border border-[var(--dg-border)] bg-[var(--dg-bg-primary)] p-3 shadow-lg">
+        <Popover open={customOpen} onOpenChange={setCustomOpen}>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className={`h-6 text-[11px] px-2 rounded gap-1 ${value.preset === 'custom' ? 'dg-btn-primary shadow-sm' : 'dg-text-secondary hover:dg-text-primary'}`}
+            >
+              <Calendar className="h-3 w-3" />
+              自定义
+              <ChevronDown className={`h-3 w-3 transition-transform ${customOpen ? 'rotate-180' : ''}`} />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align="end" sideOffset={4} className="z-[100] w-72 rounded-lg border-[var(--dg-border)] bg-[var(--dg-bg-primary)] p-3 shadow-lg">
               <p className="text-xs font-medium text-[var(--dg-text-primary)] mb-2"> {i18n.t('monitor.hosttimerangepi.s0122e022')} </p>
               <div className="space-y-2">
                 <div>
@@ -115,13 +107,12 @@ export function HostTimeRangePicker({ value, onChange }: Props) {
                   应用
                 </Button>
               </div>
-            </div>
-          )}
-        </div>
+          </PopoverContent>
+        </Popover>
       </div>
       <span className="text-[10px] dg-text-muted tabular-nums hidden md:inline">
         {formatRangeSummary(value)}
       </span>
     </div>
   );
-}
+}