refactor(frontend): api/components/pages 目录架构统一对齐菜单域 + 日志中心修复

1. 目录架构统一（API = components = 菜单域，一域一目录 + barrel） - log/ 提为独立顶层域（日志中心在菜单中与监控中心平级，不再塞在 monitor/） - task/ 拆分原 automation.ts → cron-job / script / remote-exec - aiops/ 合并 ai.ts + agentCli.ts → assistant + agent-cli - agent/ approval/ audit/ 提升为域目录 - auth 拆分：authApi(认证自服务) + system/user.ts(userApi+ldapApi 管理端) - components/automation → components/task，菜单"自动化运维"→"作业任务" - pages/ 按域分子目录(approval/audit/monitor)，删孤儿 AuditPage.tsx - 所有 API 符号名不变，组件经 @/api 聚合引用，运行时行为零变化 2. Loki 查询无返回修复：aiops 容器 DNS 解析外网域名失败（宿主机 systemd-resolved 转发链路异常），docker-compose 显式配 dns 上游 3. ES 查询框布局：工具栏单行挤 7 控件(ES 多 150px 索引框)，拆两行—— 查询输入独占一行(+查询按钮)，次级控件换行 flex-wrap Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-28 06:06:48 +00:00
1 parent da01cbb119
commit c0ee8e4ddd
@@ -0,0 +1,310 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { Badge } from '@/components/ui/badge';
+import { toast } from 'sonner';
+import { cronJobApi, scriptApi } from '@/api';
+import type { JsonData } from '@/types/common';
+
+// 定时任务类型定义 // Logan.Li
+const jobTypes = [
+  { value: 'shell',   label: 'Shell 脚本',   desc: '关联脚本库中的 Shell 脚本' },
+  { value: 'python',  label: 'Python 脚本',  desc: '关联脚本库中的 Python 脚本' },
+  { value: 'command', label: '自定义命令',    desc: '手动输入命令或脚本路径' },
+];
+
+export function CronJobFormDialog({
+  open,
+  onOpenChange,
+  editJob,
+  onSuccess,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  editJob: JsonData | null;
+  onSuccess: () => void;
+}) {
+  const [form, setForm] = useState({
+    name: '',
+    description: '',
+    cron_expr: '',
+    type: 'shell',
+    content: '',
+    script_id: null as number | null,
+  });
+  const [scripts, setScripts] = useState<JsonData[]>([]);
+  const [selectedScript, setSelectedScript] = useState<JsonData>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  // 弹窗打开时：加载脚本库 + 初始化表单 // Logan.Li
+  useEffect(() => {
+    if (!open) return;
+    // 拉取脚本库
+    scriptApi.getScripts({ page_size: 200 }).then((res: JsonData) => {
+      setScripts(res?.list || []);
+    }).catch(() => setScripts([]));
+
+    if (editJob) {
+      setForm({
+        name: editJob.name || '',
+        description: editJob.description || '',
+        cron_expr: editJob.cron_expr || '',
+        type: editJob.type || 'shell',
+        content: editJob.content || '',
+        script_id: editJob.script_id || null,
+      });
+      // 如果关联了脚本，拉取脚本详情
+      if (editJob.script_id) {
+        scriptApi.getScript(editJob.script_id).then((res: JsonData) => {
+          setSelectedScript(res);
+        }).catch(() => setSelectedScript(null));
+      } else {
+        setSelectedScript(null);
+      }
+    } else {
+      setForm({ name: '', description: '', cron_expr: '', type: 'shell', content: '', script_id: null });
+      setSelectedScript(null);
+    }
+  }, [open, editJob]);
+
+  // 按类型过滤脚本库
+  const filteredScripts = form.type === 'shell' || form.type === 'python'
+    ? scripts.filter(s => s.type === form.type)
+    : [];
+
+  // 选中脚本时更新关联
+  const handleSelectScript = (scriptId: string) => {
+    const sc = scripts.find(s => String(s.id) === scriptId);
+    if (sc) {
+      setSelectedScript(sc);
+      setForm(prev => ({ ...prev, script_id: sc.id, content: sc.content }));
+    }
+  };
+
+  // 切换类型时重置脚本关联
+  const handleTypeChange = (type: string) => {
+    setForm(prev => ({
+      ...prev,
+      type,
+      script_id: null,
+      content: type === 'command' ? prev.content : '',
+    }));
+    setSelectedScript(null);
+  };
+
+  const handleSave = async () => {
+    if (!form.name || !form.cron_expr) {
+      toast.error('请填写任务名称和 Cron 表达式');
+      return;
+    }
+    // shell/python 类型必须选脚本
+    if ((form.type === 'shell' || form.type === 'python') && !form.script_id) {
+      toast.error('请选择关联的脚本');
+      return;
+    }
+    try {
+      setSubmitting(true);
+      const payload: Record<string, unknown> = {
+        name: form.name,
+        description: form.description,
+        cron_expr: form.cron_expr,
+        type: form.type,
+        content: form.content,
+        script_id: form.script_id,
+      };
+      if (editJob) {
+        await cronJobApi.updateJob(editJob.id, payload);
+        toast.success('任务更新成功');
+      } else {
+        await cronJobApi.createJob(payload);
+        toast.success('任务创建成功');
+      }
+      onOpenChange(false);
+      onSuccess();
+    } catch (error) {
+      console.error('Failed to save cron job:', error);
+      toast.error(editJob ? '更新失败' : '创建失败');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl bg-[var(--dg-bg-primary)] border-[var(--dg-border)] text-[var(--dg-text-primary)]">
+        <DialogHeader>
+          <DialogTitle>{editJob ? '编辑定时任务' : '新建定时任务'}</DialogTitle>
+          <DialogDescription className="text-[var(--dg-text-secondary)]">配置 Cron 定时任务</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 py-4 max-h-[60vh] overflow-y-auto pr-1">
+          {/* 任务名称 */}
+          <div>
+            <Label className="text-[var(--dg-text-primary)]">任务名称</Label>
+            <Input
+              value={form.name}
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
+              placeholder="例如: 数据库备份"
+              className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
+            />
+          </div>
+
+          {/* 描述 */}
+          <div>
+            <Label className="text-[var(--dg-text-primary)]">描述</Label>
+            <Textarea
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              placeholder="任务描述..."
+              rows={2}
+              className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
+            />
+          </div>
+
+          {/* Cron 表达式 */}
+          <div>
+            <Label className="text-[var(--dg-text-primary)]">Cron 表达式</Label>
+            <div className="flex gap-2">
+              <Input
+                value={form.cron_expr}
+                onChange={(e) => setForm({ ...form, cron_expr: e.target.value })}
+                placeholder="0 2 * * *"
+                className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1"
+              />
+              <Select onValueChange={(v) => setForm({ ...form, cron_expr: v })}>
+                <SelectTrigger className="w-48 bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1">
+                  <SelectValue placeholder="快速选择" />
+                </SelectTrigger>
+                <SelectContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+                  <SelectItem value="*/5 * * * *" className="text-[var(--dg-text-primary)]">每 5 分钟</SelectItem>
+                  <SelectItem value="0 * * * *" className="text-[var(--dg-text-primary)]">每小时</SelectItem>
+                  <SelectItem value="0 2 * * *" className="text-[var(--dg-text-primary)]">每天 02:00</SelectItem>
+                  <SelectItem value="0 3 * * 0" className="text-[var(--dg-text-primary)]">每周日 03:00</SelectItem>
+                  <SelectItem value="0 9 * * 1" className="text-[var(--dg-text-primary)]">每周一 09:00</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <p className="text-xs text-[var(--dg-text-muted)] mt-1">格式: 分 时 日 月 周</p>
+          </div>
+
+          {/* 执行类型 */}
+          <div>
+            <Label className="text-[var(--dg-text-primary)]">执行类型</Label>
+            <div className="grid grid-cols-3 gap-2 mt-1">
+              {jobTypes.map(t => (
+                <button
+                  key={t.value}
+                  type="button"
+                  onClick={() => handleTypeChange(t.value)}
+                  className={`px-3 py-2 rounded-md border text-sm transition-colors text-left ${
+                    form.type === t.value
+                      ? 'border-[var(--dg-blue)] bg-[var(--dg-blue)]/10 text-[var(--dg-blue)]'
+                      : 'border-[var(--dg-border)] text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)]'
+                  }`}
+                >
+                  <div className="font-medium">{t.label}</div>
+                </button>
+              ))}
+            </div>
+            <p className="text-xs text-[var(--dg-text-muted)] mt-1">
+              {jobTypes.find(t => t.value === form.type)?.desc}
+            </p>
+          </div>
+
+          {/* 脚本选择 (shell/python) 或 命令输入 (command) */}
+          {form.type === 'shell' || form.type === 'python' ? (
+            <div className="space-y-3">
+              <div>
+                <Label className="text-[var(--dg-text-primary)]">
+                  选择脚本 <span className="text-red-400">*</span>
+                </Label>
+                {filteredScripts.length === 0 ? (
+                  <div className="mt-1 px-3 py-4 rounded-md border border-dashed border-[var(--dg-border)] text-center">
+                    <p className="text-sm text-[var(--dg-text-muted)]">
+                      脚本库中没有 {form.type === 'shell' ? 'Shell' : 'Python'} 脚本
+                    </p>
+                    <p className="text-xs text-[var(--dg-text-muted)] mt-1">
+                      请先到「脚本库」创建 {form.type === 'shell' ? 'Shell' : 'Python'} 脚本
+                    </p>
+                  </div>
+                ) : (
+                  <Select
+                    value={form.script_id ? String(form.script_id) : ''}
+                    onValueChange={handleSelectScript}
+                  >
+                    <SelectTrigger className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1">
+                      <SelectValue placeholder="选择脚本库中的脚本..." />
+                    </SelectTrigger>
+                    <SelectContent className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)]">
+                      {filteredScripts.map(sc => (
+                        <SelectItem key={sc.id} value={String(sc.id)} className="text-[var(--dg-text-primary)]">
+                          {sc.name}
+                          {sc.description ? ` — ${sc.description}` : ''}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              </div>
+              {/* 脚本预览 */}
+              {selectedScript && (
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <Badge variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-muted)]">
+                      {selectedScript.type === 'shell' ? 'Shell' : 'Python'}
+                    </Badge>
+                    <span className="text-xs text-[var(--dg-text-muted)]">
+                      {(selectedScript.content || '').split('\n').length} 行
+                    </span>
+                  </div>
+                  <pre className="max-h-48 overflow-auto rounded-md bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] p-3 text-xs font-mono text-[var(--dg-text-secondary)] whitespace-pre-wrap break-all">
+                    {selectedScript.content || '(空脚本)'}
+                  </pre>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div>
+              <Label className="text-[var(--dg-text-primary)]">执行命令</Label>
+              <Textarea
+                value={form.content}
+                onChange={(e) => setForm({ ...form, content: e.target.value })}
+                placeholder="/scripts/backup.sh arg1 arg2"
+                rows={4}
+                className="bg-[var(--dg-bg-secondary)] border-[var(--dg-border)] text-[var(--dg-text-primary)] mt-1 font-mono"
+              />
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)} className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]">
+            取消
+          </Button>
+          <Button
+            className="bg-blue-600 hover:bg-blue-700"
+            onClick={handleSave}
+            disabled={submitting}
+          >
+            {submitting ? '保存中...' : editJob ? '保存修改' : '创建任务'}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}