feat: revamp alert mute form with sections, auto-naming, quick durations and empty guide

src/pages/alertRules/FormNG/components/SectionCard/index.tsx

@@ -51,8 +51,10 @@ export default function SectionCard(props: {
   empty?: boolean;
   collapsed?: boolean;
   setCollapsed?: (collapsed: boolean) => void;
+  /** 收起状态下在标题右侧展示的配置摘要 */
+  summary?: React.ReactNode;
 }) {
-  const { item, index, sectionRef, children, empty, setCollapsed: onSetCollapsed } = props;
+  const { item, index, sectionRef, children, empty, summary, setCollapsed: onSetCollapsed } = props;
   const { t, i18n } = useTranslation('alertRules');
   const { darkMode } = useContext(CommonStateContext);
   const [collapsed, setCollapsed] = useState(props.collapsed ?? item.tag === 'optional');
@@ -113,6 +115,7 @@ export default function SectionCard(props: {
               )}
             </div>
           </div>
+          {collapsed && summary && <div className='shrink min-w-0 max-w-[50%] truncate text-[12px] text-soft'>{summary}</div>}
           <div className='flex items-center self-start mt-1'>
             <DownOutlined className='text-soft text-[10px] transition-transform duration-200' style={{ transform: collapsed ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
           </div>

src/pages/warning/shield/add.tsx

@@ -52,8 +52,8 @@ const AddShield: React.FC = () => {
             });
           } catch (e) {}
         }
+        // 不预填规则标题，交给表单按筛选条件自动生成
         setEventDetail({
-          note: t('quick_mute'),
           group_id: dat.group_id,
           prod: dat.rule_prod,
           cate: dat.cate,

src/pages/warning/shield/components/DaysOfWeekSelect.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Select, Divider, Space } from 'antd';
+import { useTranslation } from 'react-i18next';
+import _ from 'lodash';
+
+import { daysOfWeek } from '@/pages/alertRules/constants';
+
+interface Props {
+  value?: string[];
+  onChange?: (value: string[]) => void;
+  disabled?: boolean;
+}
+
+const PRESETS: { key: 'everyday' | 'workday' | 'weekend'; days: string[] }[] = [
+  { key: 'everyday', days: ['1', '2', '3', '4', '5', '6', '0'] },
+  { key: 'workday', days: ['1', '2', '3', '4', '5'] },
+  { key: 'weekend', days: ['6', '0'] },
+];
+
+/**
+ * 周期屏蔽的星期选择，下拉底部提供「每天 / 工作日 / 周末」快捷选项
+ */
+export default function DaysOfWeekSelect(props: Props) {
+  const { t } = useTranslation('alertMutes');
+  const { value, onChange, disabled } = props;
+
+  return (
+    <Select
+      mode='multiple'
+      value={value}
+      onChange={onChange}
+      disabled={disabled}
+      options={_.map(daysOfWeek, (item) => {
+        return {
+          label: t(`common:time.weekdays.${item}`),
+          value: String(item),
+        };
+      })}
+      dropdownRender={(menu) => (
+        <>
+          {menu}
+          <Divider className='my-1' />
+          <Space className='px-2 pb-1'>
+            {_.map(PRESETS, (preset) => (
+              <a
+                key={preset.key}
+                onMouseDown={(e) => {
+                  // 阻止下拉收起，保证连续选择
+                  e.preventDefault();
+                }}
+                onClick={() => {
+                  onChange?.(preset.days);
+                }}
+              >
+                {t(`mute_type.days_preset.${preset.key}`)}
+              </a>
+            ))}
+          </Space>
+        </>
+      )}
+    />
+  );
+}

src/pages/warning/shield/components/PreviewMutedEvents.tsx

@@ -1,24 +1,25 @@
 import React, { useState, useContext } from 'react';
-import { Button, Modal, Tooltip, Tag, Table } from 'antd';
+import { Alert, Button, Modal, Tooltip, Tag, Table } from 'antd';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
 import moment from 'moment';
 import { Link } from 'react-router-dom';
 import { previewMutedEvents } from '@/services/shield';
 import { CommonStateContext } from '@/App';
 import { deleteAlertEventsModal, SeverityColor } from '@/pages/event';
-import { scrollToFirstError } from '@/utils';
 import { processFormValues } from './utils';
 
 interface Props {
   form: any;
+  /** 由表单统一提供的校验方法，校验失败时会展开出错分区并滚动定位 */
+  validateFields: () => Promise<any>;
   onOk: () => void;
 }
 
 export default function PreviewMutedEvents(props: Props) {
   const { t } = useTranslation('AlertCurEvents');
   const { groupedDatasourceList } = useContext(CommonStateContext);
-  const { form, onOk } = props;
+  const { form, validateFields, onOk } = props;
   const [visible, setVisible] = useState(false);
   const [data, setData] = useState<any[]>([]);
   const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
@@ -91,8 +92,7 @@ export default function PreviewMutedEvents(props: Props) {
       <Button
         type='primary'
         onClick={() => {
-          form
-            .validateFields()
+          validateFields()
             .then((values: any) => {
               fetchData(values)
                 .then((dat) => {
@@ -103,12 +103,18 @@ export default function PreviewMutedEvents(props: Props) {
                     setData(dat);
                   }
                 })
-                .catch(() => {
+                .catch((err) => {
+                  console.error(err);
                   setVisible(false);
                   setData([]);
                 });
             })
-            .catch(scrollToFirstError);
+            .catch((err) => {
+              // 校验失败已由 validateFields 内部展开出错分区并滚动定位，这里只兜底非预期异常
+              if (!err?.errorFields) {
+                console.error(err);
+              }
+            });
         }}
       >
         {t('common:btn.save')}
@@ -159,6 +165,7 @@ export default function PreviewMutedEvents(props: Props) {
         }}
         width={800}
       >
+        <Alert className='mb-2' type='info' showIcon message={t('alertMutes:preview_muted_desc')} />
         <Table
           size='small'
           tableLayout='fixed'