SqlManagerModal.jsx

import React, { useState, useEffect, useRef } from 'react'
import {
  Modal, Table, Button, Space, Form, Input, Tag, Popconfirm,
  message, Empty, Tooltip, Divider, Tabs, Switch, Select, Badge,
  DatePicker, Upload,
} from 'antd'
import {
  PlusOutlined, DeleteOutlined, EditOutlined, ImportOutlined,
  SearchOutlined, SaveOutlined, MailOutlined, ClockCircleOutlined,
  SettingOutlined, PlayCircleOutlined, CheckCircleOutlined,
  CloseCircleOutlined, UploadOutlined,
} from '@ant-design/icons'
import dayjs from 'dayjs'
import request from '../utils/request'
import { extractVariables, parseVariables, CONDITION_TYPES } from './ConditionPanel'
import SendMailModal from './SendMailModal'

const { TextArea } = Input
const { RangePicker } = DatePicker

// cron预设
const CRON_PRESETS = [
  { label: '每天 08:00', value: '0 8 * * *' },
  { label: '每天 10:00', value: '0 10 * * *' },
  { label: '每天 14:00', value: '0 14 * * *' },
  { label: '每周一 09:00', value: '0 9 * * 1' },
  { label: '每月1号 09:00', value: '0 9 1 * *' },
  { label: '工作日 10:00', value: '0 10 * * 1-5' },
]

// 动态日期变量提示
const DATE_VARIABLES = [
  { key: 'TODAY', desc: '当天' },
  { key: 'YESTERDAY', desc: '昨天' },
  { key: 'THIS_MONTH_START', desc: '本月1号' },
  { key: 'THIS_MONTH_END', desc: '本月末' },
  { key: 'LAST_MONTH_START', desc: '上月1号' },
  { key: 'LAST_MONTH_END', desc: '上月末' },
  { key: 'THIS_YEAR', desc: '今年' },
  { key: 'THIS_YEAR_START', desc: '今年1月1号' },
  { key: 'LAST_YEAR', desc: '去年' },
]

// 验证逗号分隔的多个邮箱
const validateEmails = (rule, value) => {
  if (!value || !value.trim()) return Promise.resolve()
  const emails = value.split(',').map(e => e.trim()).filter(e => e)
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  const invalid = emails.find(e => !emailRegex.test(e))
  if (invalid) return Promise.reject(new Error(`邮箱格式不正确: ${invalid}`))
  return Promise.resolve()
}

export default function SqlManagerModal({ open, onClose, onLoadSql, currentSql, currentConditions, connId, currentScriptId, onScriptIdChange }) {
  const [scripts, setScripts] = useState([])
  const [loading, setLoading] = useState(false)
  const [searchKeyword, setSearchKeyword] = useState('')
  // 详情/编辑弹窗
  const [detailOpen, setDetailOpen] = useState(false)
  const [detailForm] = Form.useForm()
  const [editingId, setEditingId] = useState(null)
  const [activeTab, setActiveTab] = useState('basic')
  // 脚本维度的参数编辑
  const [scriptConditions, setScriptConditions] = useState([])
  // 手动发送邮件弹窗
  const [sendMailOpen, setSendMailOpen] = useState(false)
  const [sendMailScript, setSendMailScript] = useState(null)

  useEffect(() => {
    if (open) loadScripts()
  }, [open])

  const loadScripts = async () => {
    setLoading(true)
    const res = await request.get('/sql-manage')
    if (res.success) setScripts(res.data)
    setLoading(false)
  }

  // 打开"保存当前SQL"
  const handleOpenSave = () => {
    setEditingId(null)
    setActiveTab('basic')
    // 从当前编辑器的SQL解析参数，并带入当前值
    const parsedConds = currentConditions && currentConditions.length > 0
      ? currentConditions
      : parseVariables(currentSql || '', [])
    setScriptConditions(parsedConds)

    detailForm.resetFields()
    // 用 setTimeout 确保 form 已准备好再设值
    setTimeout(() => {
      detailForm.setFieldsValue({
        sql: currentSql || '',
        schedulerEnabled: false,
      })
    }, 0)
    setDetailOpen(true)
  }

  // 编辑已有脚本
  const handleEdit = (record) => {
    setEditingId(record.id)
    setActiveTab('basic')
    // 使用脚本保存的 conditions
    setScriptConditions(record.conditions || [])

    detailForm.resetFields()
    setTimeout(() => {
      detailForm.setFieldsValue({
        name: record.name,
        purpose: record.purpose || '',
        usedBy: record.usedBy || '',
        category: record.category || '',
        sql: record.sql,
        recipientEmails: record.recipientEmails || '',
        emailSubject: record.emailSubject || '',
        cronExpression: record.cronExpression || '',
        schedulerEnabled: record.schedulerEnabled || false,
      })
    }, 0)
    setDetailOpen(true)
  }

  // 序列化conditions中的dayjs对象为字符串
  const serializeConditions = (conds) => {
    return conds.map(c => {
      const safe = { ...c }
      if (safe.value && dayjs.isDayjs(safe.value)) safe.value = safe.value.format('YYYY-MM-DD')
      if (safe.valueStart && dayjs.isDayjs(safe.valueStart)) safe.valueStart = safe.valueStart.format('YYYY-MM-DD')
      if (safe.valueEnd && dayjs.isDayjs(safe.valueEnd)) safe.valueEnd = safe.valueEnd.format('YYYY-MM-DD')
      return safe
    })
  }

  // 保存脚本
  const handleSave = async () => {
    try {
      const values = await detailForm.validateFields()
      const safeConditions = serializeConditions(scriptConditions)
      setScriptConditions(safeConditions)  // 更新本地为安全格式
      const payload = {
        ...values,
        conditions: safeConditions,
        connId,
      }

      if (editingId) {
        const res = await request.put(`/sql-manage/${editingId}`, payload)
        if (res.success) {
          message.success('脚本更新成功')
          // 如果当前正在使用这个脚本，同步参数到编辑器
          if (currentScriptId === editingId) {
            onLoadSql({ ...payload, id: editingId, conditions: safeConditions })
          }
          setDetailOpen(false)
          loadScripts()
        } else {
          message.error(res.message)
        }
      } else {
        const res = await request.post('/sql-manage', payload)
        if (res.success) {
          message.success('脚本保存成功')
          // 新保存的脚本，设置为当前脚本
          if (onScriptIdChange) onScriptIdChange(res.data.id)
          setDetailOpen(false)
          loadScripts()
        } else {
          message.error(res.message)
        }
      }
    } catch {
      // 表单验证失败
    }
  }

  // 删除脚本
  const handleDelete = async (id) => {
    await request.delete(`/sql-manage/${id}`)
    message.success('已删除')
    if (currentScriptId === id && onScriptIdChange) onScriptIdChange(null)
    loadScripts()
  }

  // 打开手动发送邮件弹窗
  const handleOpenSendMail = (record) => {
    setSendMailScript(record)
    setSendMailOpen(true)
  }

  // 手动触发执行
  const handleManualRun = async (record) => {
    const res = await request.post(`/sql-manage/${record.id}/run`)
    if (res.success) {
      message.success('任务已触发执行，请稍候查看执行结果')
      setTimeout(() => loadScripts(), 3000)
    } else {
      message.error(res.message)
    }
  }

  // 加载脚本到编辑器
  const handleLoad = (record) => {
    onLoadSql(record)
    if (onScriptIdChange) onScriptIdChange(record.id)
    onClose()
  }

  // ====== 参数编辑逻辑 ======

  // 从当前编辑弹窗中的SQL解析参数
  const handleParseConditionsInDetail = () => {
    const sql = detailForm.getFieldValue('sql') || ''
    const vars = extractVariables(sql)
    if (vars.length === 0) {
      message.info('未在SQL中发现 {{变量名}} 占位符')
      return
    }
    // 合并已有值
    const newConds = parseVariables(sql, scriptConditions)
    setScriptConditions(newConds)
    setActiveTab('params')
    message.success(`解析到 ${vars.length} 个条件参数`)
  }

  // 更新单个参数
  const updateScriptCondition = (index, updates) => {
    const newConds = [...scriptConditions]
    newConds[index] = { ...newConds[index], ...updates }
    setScriptConditions(newConds)
  }

  // Excel导入
  const handleExcelImportInDetail = (index, file) => {
    const reader = new FileReader()
    reader.onload = async (e) => {
      const base64 = e.target.result.split(',')[1]
      try {
        const response = await fetch('/api/export/import', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ fileData: base64, fileName: file.name }),
        })
        const res = await response.json()
        if (res.success) {
          updateScriptCondition(index, { importedValues: res.data.values })
          message.success(`成功导入 ${res.data.count} 条数据`)
        } else {
          message.error(res.message)
        }
      } catch (err) {
        message.error('导入失败: ' + err.message)
      }
    }
    reader.readAsDataURL(file)
    return false
  }

  // 渲染参数值输入框
  const renderParamValueInput = (cond, index) => {
    switch (cond.type) {
      case 'exact':
        return <Input size="small" placeholder="请输入值" value={cond.value} onChange={e => updateScriptCondition(index, { value: e.target.value })} style={{ width: 200 }} />
      case 'fuzzy':
        return <Input size="small" placeholder="模糊关键词" value={cond.value} onChange={e => updateScriptCondition(index, { value: e.target.value })} style={{ width: 200 }} />
      case 'daterange':
        return (
          <RangePicker
            size="small"
            value={cond.valueStart && cond.valueEnd ? [dayjs(cond.valueStart), dayjs(cond.valueEnd)] : null}
            onChange={dates => {
              if (dates) updateScriptCondition(index, { valueStart: dates[0], valueEnd: dates[1] })
              else updateScriptCondition(index, { valueStart: '', valueEnd: '' })
            }}
            style={{ width: 260 }}
          />
        )
      case 'datemonth':
        return <DatePicker size="small" picker="month" value={cond.value ? dayjs(cond.value) : null} onChange={d => updateScriptCondition(index, { value: d })} style={{ width: 200 }} />
      case 'dateyear':
        return <DatePicker size="small" picker="year" value={cond.value ? dayjs(cond.value) : null} onChange={d => updateScriptCondition(index, { value: d })} style={{ width: 200 }} />
      case 'dateday':
        return <DatePicker size="small" value={cond.value ? dayjs(cond.value) : null} onChange={d => updateScriptCondition(index, { value: d })} style={{ width: 200 }} />
      case 'dictionary':
        return (
          <Space direction="vertical" size={4} style={{ width: 240 }}>
            <Select size="small" placeholder="请选择" value={cond.value || undefined} onChange={v => updateScriptCondition(index, { value: v })} options={cond.dictOptions || []} style={{ width: '100%' }} allowClear />
            <Button size="small" type="dashed" onClick={() => {
              const input = prompt('输入字典项，格式：标签:值，每行一个\n例如：\n启用:1\n停用:0')
              if (input) {
                const opts = input.split('\n').filter(s => s.trim()).map(s => {
                  const [label, value] = s.split(':').map(p => p.trim())
                  return { label: label || value, value: value || label }
                })
                updateScriptCondition(index, { dictOptions: opts })
              }
            }}>配置字典</Button>
          </Space>
        )
      case 'excel_import':
        return (
          <Space size={4}>
            <Upload accept=".xlsx,.xls,.csv" showUploadList={false} beforeUpload={(file) => handleExcelImportInDetail(index, file)}>
              <Button size="small" icon={<UploadOutlined />}>导入Excel</Button>
            </Upload>
            {cond.importedValues && cond.importedValues.length > 0 && (
              <Tag color="blue">{cond.importedValues.length} 条</Tag>
            )}
          </Space>
        )
      default:
        return <Input size="small" placeholder="请输入值" value={cond.value} onChange={e => updateScriptCondition(index, { value: e.target.value })} style={{ width: 200 }} />
    }
  }

  // 搜索过滤
  const filteredScripts = scripts.filter(s => {
    if (!searchKeyword) return true
    const kw = searchKeyword.toLowerCase()
    return (
      (s.name || '').toLowerCase().includes(kw) ||
      (s.purpose || '').toLowerCase().includes(kw) ||
      (s.usedBy || '').toLowerCase().includes(kw) ||
      (s.category || '').toLowerCase().includes(kw)
    )
  })

  // 格式化条件值为可显示的字符串
  const formatCondValue = (val) => {
    if (!val) return ''
    if (dayjs.isDayjs(val)) return val.format('YYYY-MM-DD')
    return String(val)
  }

  // 条件值渲染
  const renderConditionTags = (conditions) => {
    if (!conditions || conditions.length === 0) return <span style={{ color: '#999' }}>无参数</span>
    return (
      <Space size={4} wrap>
        {conditions.map((c, i) => (
          <Tag key={i} style={{ fontSize: 11 }}>
            {c.name}({c.type}) = {c.type === 'excel_import'
              ? `[${(c.importedValues || []).length}条]`
              : formatCondValue(c.value) || formatCondValue(c.valueStart) || '(未填)'}
          </Tag>
        ))}
      </Space>
    )
  }

  const columns = [
    {
      title: '脚本名称',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      ellipsis: true,
      render: (text) => <span style={{ fontWeight: 600 }}>{text}</span>,
    },
    {
      title: '分类',
      dataIndex: 'category',
      key: 'category',
      width: 80,
      ellipsis: true,
      render: (text) => text ? <Tag color="blue">{text}</Tag> : '-',
    },
    {
      title: '参数',
      key: 'conditions',
      width: 160,
      render: (_, record) => renderConditionTags(record.conditions),
    },
    {
      title: '定时',
      key: 'scheduler',
      width: 90,
      render: (_, record) => {
        if (!record.cronExpression) return <span style={{ color: '#999' }}>未配置</span>
        return (
          <Space size={4}>
            <Badge status={record.schedulerEnabled ? 'success' : 'default'} />
            <span style={{ fontSize: 12 }}>{record.cronExpression}</span>
          </Space>
        )
      },
    },
    {
      title: '上次执行',
      key: 'lastRun',
      width: 120,
      render: (_, record) => {
        if (!record.lastRunAt) return <span style={{ color: '#999' }}>-</span>
        const statusIcon = record.lastRunStatus === 'success'
          ? <CheckCircleOutlined style={{ color: '#52c41a' }} />
          : <CloseCircleOutlined style={{ color: '#ff4d4f' }} />
        return (
          <Tooltip title={record.lastRunMessage}>
            <Space size={4}>
              {statusIcon}
              <span style={{ fontSize: 11, color: '#999' }}>
                {new Date(record.lastRunAt).toLocaleString()}
              </span>
            </Space>
          </Tooltip>
        )
      },
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_, record) => (
        <Space size={4}>
          <Tooltip title="加载到编辑器">
            <Button type="link" size="small" icon={<ImportOutlined />} onClick={() => handleLoad(record)}>
              加载
            </Button>
          </Tooltip>
          <Tooltip title="编辑脚本配置">
            <Button type="link" size="small" icon={<EditOutlined />} onClick={() => handleEdit(record)} />
          </Tooltip>
          <Tooltip title="手动发送邮件">
            <Button type="link" size="small" icon={<MailOutlined />} onClick={() => handleOpenSendMail(record)} />
          </Tooltip>
          {record.cronExpression && (
            <Tooltip title="手动触发执行">
              <Button type="link" size="small" icon={<PlayCircleOutlined />} onClick={() => handleManualRun(record)} />
            </Tooltip>
          )}
          <Popconfirm title="确定删除该脚本？" onConfirm={() => handleDelete(record.id)}>
            <Button type="link" size="small" danger icon={<DeleteOutlined />} />
          </Popconfirm>
        </Space>
      ),
    },
  ]

  return (
    <>
      <Modal
        title="SQL脚本管理"
        open={open}
        onCancel={onClose}
        width={1000}
        footer={
          <Space>
            <Button onClick={onClose}>关闭</Button>
          </Space>
        }
      >
        {/* 工具栏 */}
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
          <Space>
            <Button
              type="primary"
              icon={<SaveOutlined />}
              onClick={handleOpenSave}
              disabled={!currentSql || !currentSql.trim()}
            >
              保存当前SQL
            </Button>
          </Space>
          <Input
            placeholder="搜索脚本..."
            prefix={<SearchOutlined />}
            size="small"
            value={searchKeyword}
            onChange={e => setSearchKeyword(e.target.value)}
            style={{ width: 200 }}
            allowClear
          />
        </div>

        <Table
          dataSource={filteredScripts}
          columns={columns}
          rowKey="id"
          size="small"
          loading={loading}
          pagination={{ pageSize: 10, showSizeChanger: false, showTotal: t => `共 ${t} 条` }}
          locale={{
            emptyText: (
              <Empty description="暂无保存的脚本" style={{ padding: '20px 0' }}>
                <Button type="primary" size="small" onClick={handleOpenSave}>
                  保存当前SQL
                </Button>
              </Empty>
            ),
          }}
          expandable={{
            rowExpandable: () => true,
            expandedRowRender: (record) => (
              <div style={{ padding: '8px 0' }}>
                <pre style={{
                  background: '#f5f5f5', padding: 12, borderRadius: 6,
                  fontSize: 12, fontFamily: 'Menlo, Monaco, Consolas, monospace',
                  maxHeight: 200, overflow: 'auto', whiteSpace: 'pre-wrap', wordBreak: 'break-all',
                }}>
                  {record.sql}
                </pre>
                {record.recipientEmails && (
                  <div style={{ marginTop: 8, fontSize: 12, color: '#666' }}>
                    <MailOutlined style={{ marginRight: 4 }} />
                    收件人: {record.recipientEmails}
                  </div>
                )}
              </div>
            ),
          }}
        />
      </Modal>

      {/* 保存/编辑详情弹窗 - 含参数/邮件/定时四个Tab */}
      <Modal
        title={editingId ? '编辑脚本配置' : '保存SQL脚本'}
        open={detailOpen}
        onCancel={() => setDetailOpen(false)}
        onOk={handleSave}
        okText="保存"
        cancelText="取消"
        width={720}
      >
        <Form form={detailForm} layout="vertical" style={{ marginTop: 16 }}>
          <Tabs activeKey={activeTab} onChange={setActiveTab} items={[
            {
              key: 'basic',
              label: <span><SettingOutlined /> 基本信息</span>,
              children: (
                <>
                  <div style={{ display: 'flex', gap: 12 }}>
                    <Form.Item name="name" label="脚本名称" rules={[{ required: true, message: '请输入脚本名称' }]} style={{ flex: 1 }}>
                      <Input placeholder="例如：月度终端支付明细" />
                    </Form.Item>
                    <Form.Item name="category" label="分类" style={{ flex: 1 }}>
                      <Input placeholder="例如：月常态、合规" />
                    </Form.Item>
                  </div>
                  <div style={{ display: 'flex', gap: 12 }}>
                    <Form.Item name="purpose" label="用途描述" style={{ flex: 2 }}>
                      <Input placeholder="例如：导出指定月份的终端支付明细数据" />
                    </Form.Item>
                    <Form.Item name="usedBy" label="使用人" style={{ flex: 1 }}>
                      <Input placeholder="例如：仕雄" />
                    </Form.Item>
                  </div>
                  <Form.Item name="sql" label="SQL内容" rules={[{ required: true, message: 'SQL内容不能为空' }]}>
                    <TextArea
                      rows={6}
                      placeholder="SQL脚本内容"
                      style={{ fontFamily: 'Menlo, Monaco, Consolas, monospace', fontSize: 12 }}
                    />
                  </Form.Item>
                  <div style={{ textAlign: 'right', marginBottom: 8 }}>
                    <Button size="small" icon={<SearchOutlined />} onClick={handleParseConditionsInDetail}>
                      从SQL解析参数
                    </Button>
                  </div>
                  {scriptConditions.length > 0 && (
                    <div style={{
                      padding: '10px 12px', background: '#f6ffed', border: '1px solid #b7eb8f',
                      borderRadius: 6,
                    }}>
                      <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 6, color: '#389e0d' }}>
                        已解析 {scriptConditions.length} 个参数，可在"参数配置"Tab中编辑详细值：
                      </div>
                      {renderConditionTags(scriptConditions)}
                    </div>
                  )}
                </>
              ),
            },
            {
              key: 'params',
              label: <span><SearchOutlined /> 参数配置</span>,
              children: (
                <>
                  {scriptConditions.length === 0 ? (
                    <Empty description="未配置参数。请在SQL中使用 {{变量名}} 定义条件，然后点击从SQL解析参数" style={{ padding: '30px 0' }}>
                      <Button size="small" icon={<SearchOutlined />} onClick={handleParseConditionsInDetail}>
                        从SQL解析参数
                      </Button>
                    </Empty>
                  ) : (
                    <div style={{ maxHeight: '50vh', overflowY: 'auto' }}>
                      {scriptConditions.map((cond, index) => (
                        <div
                          key={cond.name}
                          style={{
                            display: 'flex', alignItems: 'center', gap: 8,
                            padding: '10px 12px', borderBottom: '1px solid #f0f0f0', flexWrap: 'wrap',
                          }}
                        >
                          <Tag color="blue" style={{ minWidth: 90, textAlign: 'center' }}>{cond.name}</Tag>
                          <Select
                            size="small"
                            value={cond.type}
                            onChange={t => updateScriptCondition(index, { type: t })}
                            options={CONDITION_TYPES}
                            style={{ width: 140 }}
                          />
                          <div style={{ flex: 1, minWidth: 200 }}>
                            {renderParamValueInput(cond, index)}
                          </div>
                          <Popconfirm title="删除该参数？" onConfirm={() => {
                            setScriptConditions(scriptConditions.filter((_, i) => i !== index))
                          }}>
                            <Button size="small" type="text" danger icon={<DeleteOutlined />} />
                          </Popconfirm>
                        </div>
                      ))}
                    </div>
                  )}
                  <div style={{ marginTop: 12, padding: '8px 12px', background: '#f6f6f6', borderRadius: 6, fontSize: 12, color: '#888' }}>
                    提示：参数值将随脚本一起保存。加载脚本时自动恢复参数值，执行时修改参数也会自动同步回脚本。
                    日期区间需在SQL中使用 {'{{end_变量名}}'} 表示结束日期。
                  </div>
                  <div style={{ marginTop: 8, fontSize: 12, color: '#1890ff' }}>
                    参数值支持动态日期变量：
                    <Space size={4} wrap style={{ marginLeft: 8 }}>
                      {DATE_VARIABLES.map(v => (
                        <Tag key={v.key} color="geekblue">{v.key}={v.desc}</Tag>
                      ))}
                    </Space>
                  </div>
                </>
              ),
            },
            {
              key: 'email',
              label: <span><MailOutlined /> 邮件配置</span>,
              children: (
                <>
                  <div style={{
                    padding: '10px 12px', background: '#fff7e6', border: '1px solid #ffd591',
                    borderRadius: 6, marginBottom: 16, fontSize: 12, color: '#d46b08',
                  }}>
                    邮件发送依赖全局SMTP配置，请先在工具栏"邮件配置"中完成SMTP设置。每个脚本可单独配置收件人和邮件主题。
                  </div>
                  <Form.Item
                    name="recipientEmails"
                    label="收件人邮箱"
                    tooltip="多个收件人用英文逗号分隔，支持群发"
                    rules={[{ validator: validateEmails }]}
                  >
                    <Input placeholder="例如：zhangsan@company.com,lisi@company.com" />
                  </Form.Item>
                  <Form.Item name="emailSubject" label="邮件主题" tooltip="为空则自动生成：[SQL报表] 脚本名称 - 日期">
                    <Input placeholder="例如：月度终端支付明细报表（自定义）" />
                  </Form.Item>
                  <div style={{ color: '#999', fontSize: 12 }}>
                    邮件将自动附带Excel附件，包含查询结果数据。
                  </div>
                </>
              ),
            },
            {
              key: 'scheduler',
              label: <span><ClockCircleOutlined /> 定时配置</span>,
              children: (
                <>
                  <Form.Item name="schedulerEnabled" label="启用定时执行" valuePropName="checked">
                    <Switch checkedChildren="开" unCheckedChildren="关" />
                  </Form.Item>
                  <Form.Item name="cronExpression" label="执行时间（cron表达式）">
                    <Input placeholder="例如：0 10 * * *（每天10:00）" />
                  </Form.Item>
                  <div style={{ marginBottom: 16 }}>
                    <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>快捷选择：</div>
                    <Space wrap>
                      {CRON_PRESETS.map(p => (
                        <Button
                          key={p.value}
                          size="small"
                          onClick={() => detailForm.setFieldsValue({ cronExpression: p.value })}
                        >
                          {p.label}
                        </Button>
                      ))}
                    </Space>
                  </div>
                  <Divider style={{ margin: '12px 0' }} />
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600, marginBottom: 8 }}>参数支持动态日期变量：</div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {DATE_VARIABLES.map(v => (
                        <Tag key={v.key} color="geekblue">
                          {v.key} → {v.desc}
                        </Tag>
                      ))}
                    </div>
                    <div style={{ color: '#999', fontSize: 12, marginTop: 8 }}>
                      在参数值中填入以上关键字，执行时会自动替换为对应日期。例如参数值填 TODAY，执行时自动替换为当天日期。
                    </div>
                  </div>
                </>
              ),
            },
          ]} />
        </Form>
      </Modal>
      {/* 发送邮件弹窗 */}
      <SendMailModal
        open={sendMailOpen}
        onClose={() => setSendMailOpen(false)}
        script={sendMailScript}
        onSent={() => loadScripts()}
      />
    </>
  )
}