feat: 监控告警体系统一重构 + 自动化任务调度引擎 + 监控大屏拆分

告警中心 - 新增统一告警(alert_unified)、监控告警规则(monitor_alert_rule)、指标目录(alert_metric_catalog) - 通知策略与消息分发(alert_notify_policy/dispatch/message)、静默规则 - 告警引擎按阈值/SNMP 拆分(alert_engine_monitor/snmp) 监控采集 - SNMP 常量/模板与历史指标(snmp templates/constants、snmp_metrics_history、snmp_collect) - 中间件监控 Redis 采集与种子(middleware_monitor_redis/seed) - 站点探测 pkg(siteprobe) + 站点视图(site_view) 自动化任务 - cron 调度器(cronscheduler)、脚本运行器(scriptrunner)、系统任务(systask)及运行记录(cron_job_run、system_task) 审计与凭证 - 审计设置(audit_setting) + 历史清理(auditcleaner) 前端 - 监控页面(host/middleware/site/snmp)拆分为子模块并大屏化 - 告警中心多 Tab(规则/指标目录/通知策略/静默)、任务管理组件重构、Agent CLI Markdown 渲染 - 移除旧脚本卡片/详情/日志组件，统一为 ScriptTable/ScriptCodeEditor/TerminalOutput Co-Authored-By: Claude <noreply@anthropic.com>
2026-07-01 23:44:45 +08:00
1 parent 092d0e4b9e
commit 471353e3d7
@@ -1,3 +1,5 @@
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -10,9 +12,18 @@ import {
  SelectValue,
 } from '@/components/ui/select';
 import { Lock, History, Key, Settings, Network, RefreshCw, Loader2 } from 'lucide-react';
+import { PageTabs } from '@/components/layout/PageTabs';
 import { LdapManagementSection } from './LdapManagementSection';
 import type { JsonData } from '@/types/common';

+// 系统设置子 Tab：通用 / 安全 / LDAP // Logan.Li
+const SETTINGS_TABS = [
+  { id: 'general', label: '通用' },
+  { id: 'security', label: '安全' },
+  { id: 'ldap', label: 'LDAP' },
+] as const;
+type SettingsSubTab = (typeof SETTINGS_TABS)[number]['id'];
+
 export interface LdapFormData {
  ldap_host: string;
  ldap_port: number;
@@ -24,6 +35,16 @@ export interface LdapFormData {
 }

 interface SystemSettingsTabProps {
+  // 审计策略 // Logan.Li
+  auditRetentionDays: string;
+  setAuditRetentionDays: (v: string) => void;
+  auditRecordAll: boolean;
+  setAuditRecordAll: (v: boolean) => void;
+  auditLoading: boolean;
+  auditApplying: boolean;
+  handleAuditApply: () => void;
+  auditLastCleanupText: string | null;
+  auditRetentionOptions: number[];
  // LDAP config
  ldapConfig: unknown;
  ldapForm: LdapFormData;
@@ -44,7 +65,7 @@ interface SystemSettingsTabProps {
  setSelectedLDAPUsers: (v: string[]) => void;
  loadLdapOUs: () => void;
  loadLdapOUUsers: (ouDn?: string) => void;
-  handleLdapImport: () => void;
+  handleLdapImport: (opts?: { importAll?: boolean }) => void | Promise<void>;
  importing: boolean;
  importFeedback: string | null;
  importResultOpen: boolean;
@@ -79,6 +100,15 @@ interface SystemSettingsTabProps {

 export function SystemSettingsTab(props: SystemSettingsTabProps) {
  const {
+    auditRetentionDays,
+    setAuditRetentionDays,
+    auditRecordAll,
+    setAuditRecordAll,
+    auditLoading,
+    auditApplying,
+    handleAuditApply,
+    auditLastCleanupText,
+    auditRetentionOptions,
    ldapConfig,
    ldapForm,
    setLdapForm,
@@ -89,43 +119,33 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
    handleLdapTest,
  } = props;

-  // 作为 SystemManager 子 Tab 渲染，外层已有 PageShell，此处仅输出配置内容 // Logan.Li
-  return (
-    <div className="max-w-3xl mx-auto w-full space-y-4">
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
-        <Card className="dg-card">
-          <CardHeader>
-            <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
-              <Lock className="h-5 w-5 dg-text-blue" />
-              安全设置
-            </CardTitle>
-            <CardDescription className="dg-text-muted">密码策略与登录安全</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-[var(--dg-text-primary)]">强制密码复杂度</p>
-                <p className="text-xs dg-text-muted">要求密码包含大小写字母、数字和特殊字符</p>
-              </div>
-              <Switch defaultChecked className="data-[state=checked]:bg-blue-600" />
-            </div>
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-[var(--dg-text-primary)]">登录失败锁定</p>
-                <p className="text-xs dg-text-muted">连续5次登录失败锁定账户30分钟</p>
-              </div>
-              <Switch defaultChecked className="data-[state=checked]:bg-blue-600" />
-            </div>
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-[var(--dg-text-primary)]">双因素认证</p>
-                <p className="text-xs dg-text-muted">启用后需要手机验证码登录</p>
-              </div>
-              <Switch className="data-[state=checked]:bg-blue-600" />
-            </div>
-          </CardContent>
-        </Card>
+  const [searchParams, setSearchParams] = useSearchParams();
+  const tabFromUrl = searchParams.get('tab') as SettingsSubTab | null;
+  const [subTab, setSubTab] = useState<SettingsSubTab>(
+    SETTINGS_TABS.some(t => t.id === tabFromUrl) ? tabFromUrl! : 'general',
+  );

+  useEffect(() => {
+    if (tabFromUrl && SETTINGS_TABS.some(t => t.id === tabFromUrl) && tabFromUrl !== subTab) {
+      setSubTab(tabFromUrl);
+    }
+  }, [tabFromUrl, subTab]);
+
+  const changeSubTab = (id: string) => {
+    const next = id as SettingsSubTab;
+    setSubTab(next);
+    const params = new URLSearchParams(searchParams);
+    if (next === 'general') params.delete('tab');
+    else params.set('tab', next);
+    setSearchParams(params, { replace: true });
+  };
+
+  return (
+    <div className="w-full space-y-4">
+      <PageTabs items={[...SETTINGS_TABS]} value={subTab} onChange={changeSubTab} />
+
+      {subTab === 'general' && (
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
        <Card className="dg-card">
          <CardHeader>
            <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
@@ -140,60 +160,56 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
                <p className="text-sm font-medium text-[var(--dg-text-primary)]">记录所有操作</p>
                <p className="text-xs dg-text-muted">记录用户的所有操作行为</p>
              </div>
-              <Switch defaultChecked className="data-[state=checked]:bg-blue-600" />
+              <Switch
+                checked={auditRecordAll}
+                onCheckedChange={setAuditRecordAll}
+                disabled={auditLoading || auditApplying}
+                className="data-[state=checked]:bg-blue-600"
+              />
            </div>
-            <div className="flex items-center justify-between">
-              <div>
+            <div className="flex items-center justify-between gap-3">
+              <div className="min-w-0">
                <p className="text-sm font-medium text-[var(--dg-text-primary)]">日志保留时间</p>
-                <p className="text-xs dg-text-muted">操作日志保留180天</p>
+                <p className="text-xs dg-text-muted">
+                  应用后立即清理超期记录；之后每天自动检查
+                </p>
+                {auditLastCleanupText && (
+                  <p className="text-xs dg-text-muted mt-1">{auditLastCleanupText}</p>
+                )}
              </div>
-              <Select defaultValue="180">
-                <SelectTrigger className="w-32 h-8 dg-input">
+              <Select
+                value={auditRetentionDays}
+                onValueChange={setAuditRetentionDays}
+                disabled={auditLoading || auditApplying}
+              >
+                <SelectTrigger className="w-28 h-8 dg-input shrink-0">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className="dg-input">
-                  <SelectItem value="30">30天</SelectItem>
-                  <SelectItem value="90">90天</SelectItem>
-                  <SelectItem value="180">180天</SelectItem>
-                  <SelectItem value="365">1年</SelectItem>
+                  {auditRetentionOptions.map((d) => (
+                    <SelectItem key={d} value={String(d)}>
+                      {d}天
+                    </SelectItem>
+                  ))}
                </SelectContent>
              </Select>
            </div>
-          </CardContent>
-        </Card>
-
-        <Card className="dg-card">
-          <CardHeader>
-            <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
-              <Key className="h-5 w-5 dg-text-yellow" />
-              会话设置
-            </CardTitle>
-            <CardDescription className="dg-text-muted">会话超时与Token配置</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-[var(--dg-text-primary)]">会话超时时间</p>
-                <p className="text-xs dg-text-muted">用户无操作30分钟后自动登出</p>
-              </div>
-              <Select defaultValue="30">
-                <SelectTrigger className="w-32 h-8 dg-input">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent className="dg-input">
-                  <SelectItem value="15">15分钟</SelectItem>
-                  <SelectItem value="30">30分钟</SelectItem>
-                  <SelectItem value="60">1小时</SelectItem>
-                  <SelectItem value="120">2小时</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="flex items-center justify-between">
-              <div>
-                <p className="text-sm font-medium text-[var(--dg-text-primary)]">单点登录</p>
-                <p className="text-xs dg-text-muted">同一账号只能在一个设备登录</p>
-              </div>
-              <Switch className="data-[state=checked]:bg-blue-600" />
+            <div className="flex justify-end pt-1">
+              <Button
+                size="sm"
+                className="dg-btn-primary"
+                onClick={handleAuditApply}
+                disabled={auditLoading || auditApplying}
+              >
+                {auditApplying ? (
+                  <>
+                    <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
+                    应用中...
+                  </>
+                ) : (
+                  '应用'
+                )}
+              </Button>
            </div>
          </CardContent>
        </Card>
@@ -218,9 +234,84 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
          </CardContent>
        </Card>
      </div>
+      )}

-      {/* LDAP 配置 */}
-      <Card className="dg-card mt-4">
+      {subTab === 'security' && (
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
+        <Card className="dg-card">
+          <CardHeader>
+            <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+              <Lock className="h-5 w-5 dg-text-blue" />
+              安全设置
+            </CardTitle>
+            <CardDescription className="dg-text-muted">密码策略与登录安全（规划中）</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">强制密码复杂度</p>
+                <p className="text-xs dg-text-muted">要求密码包含大小写字母、数字和特殊字符</p>
+              </div>
+              <Switch disabled className="data-[state=checked]:bg-blue-600" />
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">登录失败锁定</p>
+                <p className="text-xs dg-text-muted">连续5次登录失败锁定账户30分钟</p>
+              </div>
+              <Switch disabled defaultChecked className="data-[state=checked]:bg-blue-600" />
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">双因素认证</p>
+                <p className="text-xs dg-text-muted">启用后需要手机验证码登录</p>
+              </div>
+              <Switch disabled className="data-[state=checked]:bg-blue-600" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="dg-card">
+          <CardHeader>
+            <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
+              <Key className="h-5 w-5 dg-text-yellow" />
+              会话设置
+            </CardTitle>
+            <CardDescription className="dg-text-muted">会话超时与 Token 配置（规划中）</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">会话超时时间</p>
+                <p className="text-xs dg-text-muted">用户无操作30分钟后自动登出</p>
+              </div>
+              <Select defaultValue="30" disabled>
+                <SelectTrigger className="w-32 h-8 dg-input">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className="dg-input">
+                  <SelectItem value="15">15分钟</SelectItem>
+                  <SelectItem value="30">30分钟</SelectItem>
+                  <SelectItem value="60">1小时</SelectItem>
+                  <SelectItem value="120">2小时</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium text-[var(--dg-text-primary)]">单点登录</p>
+                <p className="text-xs dg-text-muted">同一账号只能在一个设备登录</p>
+              </div>
+              <Switch disabled className="data-[state=checked]:bg-blue-600" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+      )}
+
+      {subTab === 'ldap' && (
+      <>
+      <Card className="dg-card pt-2">
        <CardHeader>
          <div className="flex items-center justify-between">
            <div>
@@ -233,7 +324,7 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
          </div>
        </CardHeader>
        <CardContent>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
            <div className="space-y-1.5">
              <label className="text-xs dg-text-muted">LDAP 服务器地址</label>
              <Input
@@ -331,11 +422,8 @@ export function SystemSettingsTab(props: SystemSettingsTabProps) {
        </CardContent>
      </Card>

-      {/* LDAP 账号管理 - 可折叠 */}
-      {ldapConfig && (
-        <div className="mt-4">
-          <LdapManagementSection {...props} />
-        </div>
+      {ldapConfig && <LdapManagementSection {...props} />}
+      </>
      )}
    </div>
  );