fix(frontend): 补齐 analysis 构建依赖与共享组件搬迁

补 commit hooks/图表组件、路由与 i18n domains、logs metrics API；
StatCard/TimeRangePicker/ingress-access-log 抽到共享路径，干净 checkout 可编过。

frontend/src/components/StatCard.tsx

@@ -0,0 +1,52 @@
+import { memo } from 'react'
+import type { LucideIcon } from 'lucide-react'
+import { Card, CardContent } from '@/components/ui/card'
+
+interface StatCardProps {
+  label: string
+  value: string | number
+  icon: LucideIcon
+  iconColor: string
+  iconBg: string
+  sub?: {
+    icon: LucideIcon
+    color: string
+    textColor: string
+    text: string
+  }
+}
+
+/** 指标卡 — 数字 + 图标 + 副指标（仪表盘通用件） */
+export const StatCard = memo(function StatCard({
+  label,
+  value,
+  icon: Icon,
+  iconColor,
+  iconBg,
+  sub,
+}: StatCardProps) {
+  const SubIcon = sub?.icon
+  return (
+    <Card className="border-border">
+      <CardContent className="p-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm text-muted-foreground">{label}</p>
+            <p className="text-3xl font-bold text-foreground mt-1 tabular-nums">
+              {value}
+            </p>
+          </div>
+          <div className={`w-12 h-12 rounded-xl ${iconBg} flex items-center justify-center`}>
+            <Icon className={`w-6 h-6 ${iconColor}`} />
+          </div>
+        </div>
+        {sub && SubIcon && (
+          <div className="flex items-center gap-2 mt-4">
+            <SubIcon className={`w-4 h-4 ${sub.color}`} />
+            <span className={`text-xs ${sub.textColor}`}>{sub.text}</span>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+})

frontend/src/components/TimeRangePicker.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CalendarRange, ChevronDown } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { getUser } from '@/lib/auth-storage'
+
+// 共享时间范围选择器(原 logs 页私有,日志分析页复用后晋升;词典用 common.range)
+const presets = [
+  { unit: 'minutes', count: 5, ms: 300000 },
+  { unit: 'minutes', count: 15, ms: 900000 },
+  { unit: 'hours', count: 1, ms: 3600000 },
+  { unit: 'hours', count: 6, ms: 21600000 },
+  { unit: 'hours', count: 24, ms: 86400000 },
+] as const
+const localTime = (date: Date) => new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, 19)
+const historyKey = () => `lokistack.logs.range-history.${getUser()?.id ?? 'anonymous'}`
+type SavedRange = { start: string; end: string }
+
+function readHistory(): SavedRange[] {
+  try {
+    const value: unknown = JSON.parse(localStorage.getItem(historyKey()) ?? '[]')
+    return Array.isArray(value) ? value.filter((item): item is SavedRange => typeof item?.start === 'string' && typeof item?.end === 'string').slice(0, 5) : []
+  } catch { return [] }
+}
+
+export function TimeRangePicker({ start, end, onChange }: { start: string; end: string; onChange: (start: string, end: string) => void }) {
+  const { t } = useTranslation('common')
+  const [open, setOpen] = useState(false)
+  const [draftStart, setDraftStart] = useState(start)
+  const [draftEnd, setDraftEnd] = useState(end)
+  const [history, setHistory] = useState(readHistory)
+  const root = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const close = (event: PointerEvent) => { if (!root.current?.contains(event.target as Node)) setOpen(false) }
+    document.addEventListener('pointerdown', close)
+    return () => document.removeEventListener('pointerdown', close)
+  }, [])
+
+  function choose(nextStart: string, nextEnd: string) {
+    if (!(new Date(nextStart).getTime() < new Date(nextEnd).getTime())) return
+    onChange(nextStart, nextEnd)
+    setDraftStart(nextStart); setDraftEnd(nextEnd); setOpen(false)
+    const next = [{ start: nextStart, end: nextEnd }, ...history.filter(item => item.start !== nextStart || item.end !== nextEnd)].slice(0, 5)
+    setHistory(next)
+    try { localStorage.setItem(historyKey(), JSON.stringify(next)) } catch { /* Storage may be unavailable. */ }
+  }
+
+  const presetLabel = (item: (typeof presets)[number]) => item.unit === 'minutes'
+    ? t('range.lastMinutes', { count: item.count })
+    : t('range.lastHours', { count: item.count })
+  // 高亮预设按 start/end 实际跨度推导:外部传入的初始范围(如分析页默认 1 小时)也能正确标注,
+  // 不再依赖内部记录的 ms(旧逻辑初始误标「最近 5 分钟」)
+  const activePreset = presets.find(item => item.ms === new Date(end).getTime() - new Date(start).getTime())
+  const label = activePreset ? presetLabel(activePreset) : t('range.custom')
+  const rangeText = `${new Date(start).toLocaleString()} ~ ${new Date(end).toLocaleString()}`
+
+  return <div ref={root} className="relative min-w-0">
+    <Button type="button" variant="outline" aria-expanded={open} className="h-9 max-w-full gap-2" onClick={() => { setDraftStart(start); setDraftEnd(end); setOpen(!open) }}>
+      <CalendarRange className="size-4 shrink-0" /><span className="shrink-0 font-medium">{label}</span><span className="hidden truncate font-normal text-muted-foreground xl:inline">{rangeText}</span><ChevronDown className="size-4 shrink-0" />
+    </Button>
+    {open && <div className="absolute left-0 top-full z-40 mt-1 w-[min(92vw,520px)] rounded-lg border bg-popover p-4 shadow-xl">
+      <h2 className="text-sm font-medium">{t('range.title')}</h2>
+      <div className="mt-3 grid grid-cols-2 gap-1 sm:grid-cols-3">{presets.map(item => <Button key={item.ms} type="button" size="sm" variant={activePreset?.ms === item.ms ? 'secondary' : 'ghost'} className="justify-start" onClick={() => { const now = Date.now(); choose(localTime(new Date(now - item.ms)), localTime(new Date(now))) }}>{presetLabel(item)}</Button>)}</div>
+      <div className="mt-3 grid gap-2 border-t pt-3 sm:grid-cols-2">
+        <label className="text-xs text-muted-foreground">{t('range.start')}<Input className="mt-1 h-8" type="datetime-local" step={1} value={draftStart} onChange={event => setDraftStart(event.target.value)} /></label>
+        <label className="text-xs text-muted-foreground">{t('range.end')}<Input className="mt-1 h-8" type="datetime-local" step={1} value={draftEnd} onChange={event => setDraftEnd(event.target.value)} /></label>
+      </div>
+      <div className="mt-2 flex justify-end"><Button type="button" size="sm" disabled={!(new Date(draftStart).getTime() < new Date(draftEnd).getTime())} onClick={() => choose(draftStart, draftEnd)}>{t('range.apply')}</Button></div>
+      {history.length > 0 && <div className="mt-3 border-t pt-3"><h3 className="mb-1 text-xs font-medium text-muted-foreground">{t('range.recent')}</h3><div className="max-h-32 space-y-0.5 overflow-y-auto">{history.map(item => <button type="button" key={`${item.start}-${item.end}`} className="block w-full truncate rounded px-2 py-1.5 text-left text-xs hover:bg-muted" onClick={() => choose(item.start, item.end)}>{new Date(item.start).toLocaleString()} ~ {new Date(item.end).toLocaleString()}</button>)}</div></div>}
+    </div>}
+  </div>
+}

frontend/src/components/index.ts

@@ -14,3 +14,5 @@ export { default as PasswordInput } from './PasswordInput';
 export { default as StatusBadge, StatusIcon } from './StatusBadge';
 export { getStatusColorClass } from './status-config';
 export { default as ErrorBoundary } from './ErrorBoundary';
+export { TimeRangePicker } from './TimeRangePicker';
+export { StatCard } from './StatCard';