From b93220378db8b6d944f32db5d3b0d4076d1fc9a9 Mon Sep 17 00:00:00 2001
From: ning <710leo@gmail.com>
Date: Tue, 21 Jul 2026 20:56:02 +0800
Subject: [PATCH 1/3] feat: revamp alert mute form with sections, auto-naming,
 quick durations and empty guide

---
 .../FormNG/components/SectionCard/index.tsx   |   5 +-
 src/pages/warning/shield/add.tsx              |   2 +-
 .../shield/components/DaysOfWeekSelect.tsx    |  63 ++
 .../shield/components/PreviewMutedEvents.tsx  |  21 +-
 .../warning/shield/components/operateForm.tsx | 819 +++++++++++-------
 .../shield/components/utils.summary.test.ts   | 106 +++
 src/pages/warning/shield/components/utils.ts  |  83 ++
 src/pages/warning/shield/index.tsx            |  68 +-
 src/pages/warning/shield/locale/en_US.ts      |  45 +-
 src/pages/warning/shield/locale/ja_JP.ts      |  44 +-
 src/pages/warning/shield/locale/ru_RU.ts      |  46 +-
 src/pages/warning/shield/locale/zh_CN.ts      |  42 +-
 src/pages/warning/shield/locale/zh_HK.ts      |  42 +-
 13 files changed, 1020 insertions(+), 366 deletions(-)
 create mode 100644 src/pages/warning/shield/components/DaysOfWeekSelect.tsx
 create mode 100644 src/pages/warning/shield/components/utils.summary.test.ts

diff --git a/src/pages/alertRules/FormNG/components/SectionCard/index.tsx b/src/pages/alertRules/FormNG/components/SectionCard/index.tsx
index 48692d420..96f1f6584 100644
--- a/src/pages/alertRules/FormNG/components/SectionCard/index.tsx
+++ b/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>
diff --git a/src/pages/warning/shield/add.tsx b/src/pages/warning/shield/add.tsx
index 2632492a3..5355c9cca 100644
--- a/src/pages/warning/shield/add.tsx
+++ b/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,
diff --git a/src/pages/warning/shield/components/DaysOfWeekSelect.tsx b/src/pages/warning/shield/components/DaysOfWeekSelect.tsx
new file mode 100644
index 000000000..7219358ca
--- /dev/null
+++ b/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>
+        </>
+      )}
+    />
+  );
+}
diff --git a/src/pages/warning/shield/components/PreviewMutedEvents.tsx b/src/pages/warning/shield/components/PreviewMutedEvents.tsx
index c8034ba50..fefe03b82 100644
--- a/src/pages/warning/shield/components/PreviewMutedEvents.tsx
+++ b/src/pages/warning/shield/components/PreviewMutedEvents.tsx
@@ -1,5 +1,5 @@
 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';
@@ -7,18 +7,19 @@ 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'
diff --git a/src/pages/warning/shield/components/operateForm.tsx b/src/pages/warning/shield/components/operateForm.tsx
index 2d899e165..2896650d5 100644
--- a/src/pages/warning/shield/components/operateForm.tsx
+++ b/src/pages/warning/shield/components/operateForm.tsx
@@ -14,9 +14,10 @@
  * limitations under the License.
  *
  */
-import React, { useState, useEffect, useContext } from 'react';
-import { Form, Input, Card, Select, Col, Button, Row, message, DatePicker, Tooltip, Space, Radio, TimePicker, Checkbox, Alert, Affix } from 'antd';
-import { PlusCircleOutlined, CaretDownOutlined, MinusCircleOutlined, InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';
+import React, { useState, useEffect, useContext, useMemo, useRef } from 'react';
+import { Form, Input, Card, Select, Col, Button, Row, message, DatePicker, Tooltip, Space, Radio, TimePicker, Checkbox, Alert } from 'antd';
+import { PlusCircleOutlined, MinusCircleOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { ListFilter, BellOff, FileText } from 'lucide-react';
 import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import _ from 'lodash';
@@ -26,58 +27,151 @@ import { addShield, editShield, alertMuteTryrun } from '@/services/shield';
 import { shieldItem } from '@/store/warningInterface';
 import DatasourceValueSelect from '@/pages/alertRules/Form/components/DatasourceValueSelect';
 import { CommonStateContext } from '@/App';
-import { daysOfWeek } from '@/pages/alertRules/constants';
 import { DatasourceCateSelect } from '@/components/DatasourceSelect';
+import { allCates, getCateDisplayLabel } from '@/components/AdvancedWrap/utils';
 import { scrollToFirstError } from '@/utils';
 import AlertEventRuleTesterWithButton from '@/components/AlertEventRuleTesterWithButton';
 import { KVTags } from '@/components/KVTagSelect';
 import Markdown from '@/components/Markdown';
 import AffixWrapper from '@/components/AffixWrapper';
+import SectionCard, { SectionItem } from '@/pages/alertRules/FormNG/components/SectionCard';
 
-import { timeLensDefault } from '../../const';
-import { processFormValues } from './utils';
+import { processFormValues, buildMuteScopeText, formatMuteTag, formatSeverities, formatDuration, isMuteScopeUnlimited } from './utils';
+import DaysOfWeekSelect from './DaysOfWeekSelect';
 import PreviewMutedEvents from './PreviewMutedEvents';
 import '../index.less';
 
-const { Option } = Select;
 const { TextArea } = Input;
 
+const DOC_PATH = 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v9/usage/alert-notify/rules/alert-mute/';
+// 高频屏蔽时长，点击后按开始时间推算结束时间
+const QUICK_DURATIONS = ['30m', '1h', '2h', '6h', '12h', '1d', '3d', '7d', '30d'];
+// 超过该时长给出提醒，避免配置了长期屏蔽后忘记解除
+const LONG_DURATION_DAYS = 30;
+
+const parseDuration = (val: string) => {
+  const unit = val.charAt(val.length - 1);
+  const num = _.toNumber(val.substring(0, val.length - 1));
+  return { unit, num };
+};
+
 interface Props {
   detail?: shieldItem;
   type?: number; // 1:编辑; 2:克隆 3:新增
 }
 
 const OperateForm: React.FC<Props> = ({ detail = {}, type }: any) => {
-  const { t } = useTranslation('alertMutes');
+  const { t, i18n } = useTranslation('alertMutes');
   const btimeDefault = new Date().getTime();
   const etimeDefault = new Date().getTime() + 1 * 60 * 60 * 1000; // 默认时长1h
   const [form] = Form.useForm(null as any);
   const history = useHistory();
-  const [timeLen, setTimeLen] = useState('1h');
   const { groupedDatasourceList, busiGroups, isPlus, businessGroupOnChange } = useContext(CommonStateContext);
 
+  const cate = Form.useWatch('cate', form);
+  const datasourceIds = Form.useWatch('datasource_ids', form);
+  const severities = Form.useWatch('severities', form);
+  const tags = Form.useWatch('tags', form);
+  const muteTimeType = Form.useWatch('mute_time_type', form);
+  const muteType = Form.useWatch('mute_type', form);
+  const btime = Form.useWatch('btime', form);
+  const etime = Form.useWatch('etime', form);
+  const periodicMutes = Form.useWatch('periodic_mutes', form);
+
+  const sections = useMemo<SectionItem[]>(() => {
+    return [
+      {
+        key: 'filter',
+        title: t('filter_configs'),
+        description: t('filter_configs_desc'),
+        tag: 'core',
+        icon: <ListFilter size={14} />,
+        helpDoc: {
+          documentPath: DOC_PATH,
+        },
+      },
+      {
+        key: 'mute',
+        title: t('mute_configs'),
+        description: t('mute_configs_desc'),
+        tag: 'core',
+        icon: <BellOff size={14} />,
+      },
+      {
+        key: 'basic',
+        title: t('basic_configs'),
+        description: t('basic_configs_desc'),
+        tag: 'default',
+        icon: <FileText size={14} />,
+      },
+    ];
+  }, [i18n.language]);
+
+  // 分区序号由 sections 的书写顺序推导，调用点按 key 取值，避免插入/隐藏分区时漏改序号
+  const sectionKeys = useMemo(() => _.map(sections, 'key'), [sections]);
+  const sectionMap = useMemo(() => _.keyBy(sections, 'key') as Record<string, SectionItem | undefined>, [sections]);
+
+  const [sectionCollapsed, setSectionCollapsed] = useState<Record<string, boolean>>({
+    filter: false,
+    mute: false,
+    basic: false,
+  });
+
+  const cateLabel = getCateDisplayLabel(_.find(allCates, { value: cate }), i18n.language);
+  const datasourceNames = _.compact(
+    _.map(datasourceIds, (id) => {
+      if (id === 0) return '';
+      return _.find(groupedDatasourceList[cate], { id })?.name;
+    }),
+  );
+
+  // 自动生成规则标题：仅当标题为空或仍是上次自动生成值时覆盖，用户手动改过则不再干预
+  const lastAutoNameRef = useRef<string>();
   useEffect(() => {
-    timeChange();
-  }, [detail]);
+    const scope = buildMuteScopeText({
+      tags,
+      severities,
+      datasourceNames,
+      cateLabel,
+      separator: t('name_auto_separator'),
+      fallbackText: t('name_auto_all_alerts'),
+    });
+    const suggestion = t('name_auto_template', { scope });
+    const current = form.getFieldValue('note');
+    if (current && current !== lastAutoNameRef.current) return;
+    if (current !== suggestion) {
+      form.setFieldsValue({ note: suggestion });
+    }
+    lastAutoNameRef.current = suggestion;
+  }, [cateLabel, JSON.stringify(datasourceNames), JSON.stringify(severities), JSON.stringify(tags)]);
 
-  const timeChange = () => {
-    const btime = form.getFieldValue('btime');
-    const etime = form.getFieldValue('etime');
-    if (!!etime && !!btime) {
-      const y = Math.round(moment.duration(etime - btime).asYears());
-      const d = Math.floor(moment.duration(etime - btime).asDays());
-      const h = Math.floor(moment.duration(etime - btime).hours());
-      const m = Math.floor(moment.duration(etime - btime).minutes());
-      const s = Math.floor(moment.duration(etime - btime).seconds());
-      if (y > 0) {
-        const timeLen = `${y ? `${y}y ` : ''}`;
-        setTimeLen(timeLen);
-      } else {
-        const timeLen = `${d ? `${d}d ` : ''}${h ? `${h}h ` : ''}${m ? `${m}m ` : ''}${s ? `${s}s` : ''}`;
-        setTimeLen(timeLen);
-      }
+  const scopeUnlimited = isMuteScopeUnlimited({ tags, datasource_ids: datasourceIds });
+  const durationText = formatDuration(btime, etime);
+  const isExpired = muteTimeType === 0 && etime && moment(etime).isBefore(moment());
+  const isLongDuration = muteTimeType === 0 && btime && etime && moment(etime).diff(moment(btime), 'days') >= LONG_DURATION_DAYS;
+  const activeQuickDuration = useMemo(() => {
+    if (!btime || !etime) return undefined;
+    const diff = moment(etime).valueOf() - moment(btime).valueOf();
+    return _.find(QUICK_DURATIONS, (item) => {
+      const { unit, num } = parseDuration(item);
+      return moment.duration(num, unit as any).asMilliseconds() === diff;
+    });
+  }, [btime, etime]);
+
+  const filterSummary = _.compact([
+    _.isEmpty(datasourceNames) ? cateLabel : `${cateLabel} / ${_.take(datasourceNames, 2).join(', ')}`,
+    formatSeverities(severities) || t('summary.severities_all'),
+    _.isEmpty(_.compact(_.map(tags, formatMuteTag))) ? t('summary.tags_none') : t('summary.tags_count', { count: _.size(_.compact(_.map(tags, formatMuteTag))) }),
+  ]).join(' · ');
+
+  const muteSummary = (() => {
+    const methodText = t(`mute_method.${muteType ?? 0}`);
+    if (muteTimeType === 1) {
+      return `${t('mute_type.1')} · ${t('summary.periodic_count', { count: _.size(periodicMutes) })} · ${methodText}`;
     }
-  };
+    if (!btime || !etime) return methodText;
+    return `${moment(btime).format('MM-DD HH:mm')} ~ ${moment(etime).format('MM-DD HH:mm')}${durationText ? ` (${durationText})` : ''} · ${methodText}`;
+  })();
 
   const onFinish = (values) => {
     const params = processFormValues(values);
@@ -99,321 +193,384 @@ const OperateForm: React.FC<Props> = ({ detail = {}, type }: any) => {
       });
     }
   };
-  const timeLenChange = (val: string) => {
-    setTimeLen(val);
-    const time = new Date().getTime();
-    const unit = val.charAt(val.length - 1);
-    const num = val.substr(0, val.length - 1);
+
+  // 点击快捷时长：保留用户已设置的开始时间，只推算结束时间
+  const quickDurationChange = (val: string) => {
+    const { unit, num } = parseDuration(val);
+    const start = form.getFieldValue('btime') || moment();
     form.setFieldsValue({
-      btime: moment(time),
-      etime: moment(time).add({
-        [unit]: num,
-      }),
+      btime: moment(start),
+      etime: moment(start).add({ [unit]: num }),
     });
+    form.validateFields(['etime']);
   };
 
-  const content = (
-    <Form
-      form={form}
-      layout='vertical'
-      className='operate-form'
-      onFinish={onFinish}
-      onFinishFailed={() => {
-        scrollToFirstError();
-      }}
-      initialValues={{
-        ...detail,
-        prod: detail.prod || 'metric',
-        severities: detail.severities || [1, 2, 3],
-        btime: detail?.btime ? moment(detail.btime * 1000) : moment(btimeDefault),
-        etime: detail?.etime ? moment(detail.etime * 1000) : moment(etimeDefault),
-        mute_time_type: detail?.mute_time_type || 0,
-        mute_type: detail?.mute_type || 0,
-        periodic_mutes: detail?.periodic_mutes
-          ? _.map(detail?.periodic_mutes, (item) => {
-              return {
-                enable_days_of_week: _.split(item.enable_days_of_week, ' '),
-                enable_stime: moment(item.enable_stime, 'HH:mm'),
-                enable_etime: moment(item.enable_etime, 'HH:mm'),
-              };
-            })
-          : [
-              {
-                enable_days_of_week: ['1', '2', '3', '4', '5', '6', '0'],
-                enable_stime: moment('00:00', 'HH:mm'),
-                enable_etime: moment('00:00', 'HH:mm'),
-              },
-            ],
-      }}
-    >
-      <Card className='mb-4' title={t('basic_configs')}>
-        <Alert type='info' message={t('alert_content')} className='mb-2' />
-        <Form.Item label={t('common:business_group')} name='group_id' required>
-          <Select
-            disabled={type == 1}
-            options={_.map(busiGroups, (item) => {
-              return {
-                label: item.name,
-                value: item.id,
-              };
-            })}
-            showSearch
-            optionFilterProp='label'
-          />
-        </Form.Item>
-        <Form.Item
-          label={t('note')}
-          name='note'
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-        <Form.Item label={t('cause')} name='cause'>
-          <TextArea rows={3} />
-        </Form.Item>
-      </Card>
-      <Card
-        className='mb-4'
-        title={
-          <Space>
-            {t('filter_configs')}
-            <Tooltip title={t('filter_configs_tip')}>
-              <InfoCircleOutlined />
-            </Tooltip>
-          </Space>
-        }
+  // 校验失败时展开包含错误项的分区，否则被 display:none 隐藏的错误项滚动不可见，保存表现为"没反应"
+  const expandErrorSections = (errorFields?: { name: (string | number)[] }[]) => {
+    const errorSectionKeys: string[] = [];
+    _.forEach(errorFields, ({ name }) => {
+      const root = name?.[0];
+      if (_.includes(['btime', 'etime', 'periodic_mutes'], root)) {
+        errorSectionKeys.push('mute');
+      } else if (_.includes(['note', 'cause'], root)) {
+        errorSectionKeys.push('basic');
+      } else {
+        errorSectionKeys.push('filter');
+      }
+    });
+    if (errorSectionKeys.length) {
+      setSectionCollapsed((prev) => ({
+        ...prev,
+        ..._.zipObject(
+          errorSectionKeys,
+          _.map(errorSectionKeys, () => false),
+        ),
+      }));
+    }
+  };
+
+  const validateFields = () => {
+    return form.validateFields().catch((err) => {
+      expandErrorSections(err?.errorFields);
+      scrollToFirstError();
+      return Promise.reject(err);
+    });
+  };
+
+  return (
+    <div className='operate-form-index' style={{ background: 'none' }}>
+      <Form
+        form={form}
+        layout='vertical'
+        className='operate-form'
+        onFinish={onFinish}
+        initialValues={{
+          ...detail,
+          prod: detail.prod || 'metric',
+          cate: detail.cate || 'prometheus',
+          severities: detail.severities || [1, 2, 3],
+          btime: detail?.btime ? moment(detail.btime * 1000) : moment(btimeDefault),
+          etime: detail?.etime ? moment(detail.etime * 1000) : moment(etimeDefault),
+          mute_time_type: detail?.mute_time_type || 0,
+          mute_type: detail?.mute_type || 0,
+          periodic_mutes: detail?.periodic_mutes
+            ? _.map(detail?.periodic_mutes, (item) => {
+                return {
+                  enable_days_of_week: _.split(item.enable_days_of_week, ' '),
+                  enable_stime: moment(item.enable_stime, 'HH:mm'),
+                  enable_etime: moment(item.enable_etime, 'HH:mm'),
+                };
+              })
+            : [
+                {
+                  enable_days_of_week: ['1', '2', '3', '4', '5', '6', '0'],
+                  enable_stime: moment('00:00', 'HH:mm'),
+                  enable_etime: moment('00:00', 'HH:mm'),
+                },
+              ],
+        }}
       >
-        <Row gutter={10}>
-          <Col span={12}>
-            <Form.Item label={t('common:datasource.type')} name='cate' initialValue='prometheus'>
-              <DatasourceCateSelect
-                scene='alert'
-                filterCates={(cates) => {
-                  return _.filter(cates, (item) => {
-                    return !!item.alertRule && (item.alertPro ? isPlus : true);
-                  });
-                }}
-                onChange={() => {
-                  form.setFieldsValue({
-                    datasource_ids: [],
-                  });
-                }}
+        <div className='w-full max-w-[1200px] mx-auto'>
+          <SectionCard
+            item={sectionMap.filter!}
+            index={sectionKeys.indexOf('filter')}
+            collapsed={sectionCollapsed.filter}
+            setCollapsed={(collapsed) => setSectionCollapsed((prev) => ({ ...prev, filter: collapsed }))}
+            summary={filterSummary}
+          >
+            <Form.Item label={t('common:business_group')} name='group_id' extra={t('alert_content')} rules={[{ required: true }]}>
+              <Select
+                disabled={type == 1}
+                options={_.map(busiGroups, (item) => {
+                  return {
+                    label: item.name,
+                    value: item.id,
+                  };
+                })}
+                showSearch
+                optionFilterProp='label'
               />
             </Form.Item>
-          </Col>
-          <Col span={12}>
-            <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.cate !== curValues.cate} noStyle>
-              {({ getFieldValue, setFieldsValue }) => {
-                const cate = getFieldValue('cate');
-                return <DatasourceValueSelect mode='multiple' setFieldsValue={setFieldsValue} cate={cate} datasourceList={groupedDatasourceList[cate] || []} required={false} />;
-              }}
+            <Row gutter={10}>
+              <Col span={12}>
+                <Form.Item label={t('common:datasource.type')} name='cate'>
+                  <DatasourceCateSelect
+                    scene='alert'
+                    filterCates={(cates) => {
+                      return _.filter(cates, (item) => {
+                        return !!item.alertRule && (item.alertPro ? isPlus : true);
+                      });
+                    }}
+                    onChange={() => {
+                      form.setFieldsValue({
+                        datasource_ids: [],
+                      });
+                    }}
+                  />
+                </Form.Item>
+              </Col>
+              <Col span={12}>
+                <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.cate !== curValues.cate} noStyle>
+                  {({ getFieldValue, setFieldsValue }) => {
+                    const cate = getFieldValue('cate');
+                    return (
+                      <DatasourceValueSelect mode='multiple' setFieldsValue={setFieldsValue} cate={cate} datasourceList={groupedDatasourceList[cate] || []} required={false} />
+                    );
+                  }}
+                </Form.Item>
+              </Col>
+            </Row>
+            <Form.Item label={t('severities')} name='severities' tooltip={t('severities_tip')} rules={[{ required: true, message: t('severities_msg') }]}>
+              <Checkbox.Group
+                options={[
+                  {
+                    label: t('common:severity.1'),
+                    value: 1,
+                  },
+                  {
+                    label: t('common:severity.2'),
+                    value: 2,
+                  },
+                  {
+                    label: t('common:severity.3'),
+                    value: 3,
+                  },
+                ]}
+              />
             </Form.Item>
-          </Col>
-        </Row>
-        <Form.Item label={t('severities')} name='severities' initialValue={[1, 2, 3]} rules={[{ required: true, message: t('severities_msg') }]}>
-          <Checkbox.Group
-            options={[
-              {
-                label: t('common:severity.1'),
-                value: 1,
-              },
-              {
-                label: t('common:severity.2'),
-                value: 2,
-              },
-              {
-                label: t('common:severity.3'),
-                value: 3,
-              },
-            ]}
-          />
-        </Form.Item>
-        <KVTags
-          name={['tags']}
-          keyLabel={t('tag.key.label')}
-          keyLabelTootip={
-            <div className='pt-2 px-1'>
-              <Markdown content={t('tag.key.tip')} inTooltip />
-            </div>
-          }
-        />
-      </Card>
-      <Card title={t('mute_configs')}>
-        <Form.Item label={t('mute_method.label')} name='mute_type' tooltip={t('mute_method.tip')}>
-          <Radio.Group>
-            <Radio value={0}>{t('mute_method.0')}</Radio>
-            <Radio value={1}>{t('mute_method.1')}</Radio>
-          </Radio.Group>
-        </Form.Item>
-        <Form.Item label={t('mute_type.label')} name='mute_time_type'>
-          <Radio.Group>
-            <Radio value={0}>{t('mute_type.0')}</Radio>
-            <Radio value={1}>{t('mute_type.1')}</Radio>
-          </Radio.Group>
-        </Form.Item>
-        <Form.Item shouldUpdate noStyle>
-          {({ getFieldValue }) => {
-            const mute_type = getFieldValue('mute_time_type');
-            return (
-              <>
-                <div style={{ display: mute_type === 0 ? 'block' : 'none' }}>
-                  <Row gutter={10}>
-                    <Col span={8}>
-                      <Form.Item label={t('btime')} name='btime'>
-                        <DatePicker showTime onChange={timeChange} />
-                      </Form.Item>
-                    </Col>
-                    <Col span={8}>
-                      <Form.Item label={t('duration')}>
-                        <Select suffixIcon={<CaretDownOutlined />} onChange={timeLenChange} value={timeLen}>
-                          {timeLensDefault.map((item: any, index: number) => (
-                            <Option key={index} value={item.value}>
-                              {item.value}
-                            </Option>
-                          ))}
-                        </Select>
-                      </Form.Item>
-                    </Col>
-                    <Col span={8}>
-                      <Form.Item label={t('etime')} name='etime'>
-                        <DatePicker showTime onChange={timeChange} />
-                      </Form.Item>
-                    </Col>
-                  </Row>
+            <KVTags
+              name={['tags']}
+              keyLabel={t('tag.key.label')}
+              keyLabelTootip={
+                <div className='pt-2 px-1'>
+                  <Markdown content={t('tag.key.tip')} inTooltip />
                 </div>
-                <div style={{ display: mute_type === 1 ? 'block' : 'none' }}>
-                  <Form.List name='periodic_mutes'>
-                    {(fields, { add, remove }) => (
-                      <>
+              }
+            />
+            {scopeUnlimited && <Alert className='mt-3' type='warning' showIcon message={t('scope_unlimited_tip')} />}
+          </SectionCard>
+
+          <SectionCard
+            className='mt-4'
+            item={sectionMap.mute!}
+            index={sectionKeys.indexOf('mute')}
+            collapsed={sectionCollapsed.mute}
+            setCollapsed={(collapsed) => setSectionCollapsed((prev) => ({ ...prev, mute: collapsed }))}
+            summary={muteSummary}
+          >
+            <Form.Item label={t('mute_method.label')} name='mute_type' tooltip={t('mute_method.tip')}>
+              <Radio.Group>
+                <Radio value={0}>
+                  {t('mute_method.0')}
+                  <span className='text-soft ml-1'>{t('mute_method.0_desc')}</span>
+                </Radio>
+                <Radio value={1}>
+                  {t('mute_method.1')}
+                  <span className='text-soft ml-1'>{t('mute_method.1_desc')}</span>
+                </Radio>
+              </Radio.Group>
+            </Form.Item>
+            <Form.Item label={t('mute_type.label')} name='mute_time_type'>
+              <Radio.Group buttonStyle='solid'>
+                <Radio.Button value={0}>{t('mute_type.0')}</Radio.Button>
+                <Radio.Button value={1}>{t('mute_type.1')}</Radio.Button>
+              </Radio.Group>
+            </Form.Item>
+            <div style={{ display: muteTimeType === 1 ? 'none' : 'block' }}>
+              <Form.Item label={t('duration_quick')} tooltip={t('duration_quick_tip')}>
+                <Radio.Group
+                  optionType='button'
+                  size='small'
+                  value={activeQuickDuration}
+                  onChange={(e) => {
+                    quickDurationChange(e.target.value);
+                  }}
+                  options={_.map(QUICK_DURATIONS, (item) => ({ label: item, value: item }))}
+                />
+              </Form.Item>
+              <Row gutter={10}>
+                <Col span={12}>
+                  {/* 开始时间变化后同步复校验结束时间，避免残留的先后关系报错 */}
+                  <Form.Item label={t('btime')} name='btime' rules={[{ required: muteTimeType !== 1, message: t('btime_msg') }]}>
+                    <DatePicker
+                      showTime
+                      onChange={() => {
+                        form.validateFields(['etime']);
+                      }}
+                    />
+                  </Form.Item>
+                </Col>
+                <Col span={12}>
+                  <Form.Item
+                    label={t('etime')}
+                    name='etime'
+                    dependencies={['btime']}
+                    rules={[
+                      { required: muteTimeType !== 1, message: t('etime_msg') },
+                      ({ getFieldValue }) => ({
+                        validator(_rule, value) {
+                          const start = getFieldValue('btime');
+                          if (getFieldValue('mute_time_type') === 1 || !value || !start) return Promise.resolve();
+                          if (moment(value).valueOf() <= moment(start).valueOf()) {
+                            return Promise.reject(new Error(t('etime_before_btime_msg')));
+                          }
+                          return Promise.resolve();
+                        },
+                      }),
+                    ]}
+                  >
+                    <DatePicker showTime />
+                  </Form.Item>
+                </Col>
+              </Row>
+              {durationText && (
+                <div className='text-soft'>
+                  {t('duration')}: {durationText}
+                </div>
+              )}
+              {isExpired && <Alert className='mt-3' type='warning' showIcon message={t('expired_tip')} />}
+              {isLongDuration && <Alert className='mt-3' type='info' showIcon message={t('long_duration_tip', { days: LONG_DURATION_DAYS })} />}
+            </div>
+            <div style={{ display: muteTimeType === 1 ? 'block' : 'none' }}>
+              <Form.List name='periodic_mutes'>
+                {(fields, { add, remove }) => (
+                  <>
+                    <Space>
+                      <div style={{ width: 450 }}>
+                        <Space align='baseline'>
+                          {t('mute_type.days_of_week')}
+                          <PlusCircleOutlined className='control-icon-normal' onClick={() => add()} />
+                        </Space>
+                      </div>
+                      <div style={{ width: 110 }}>
                         <Space>
-                          <div style={{ width: 450 }}>
-                            <Space align='baseline'>
-                              {t('mute_type.days_of_week')}
-                              <PlusCircleOutlined className='control-icon-normal' onClick={() => add()} />
-                            </Space>
-                          </div>
-                          <div style={{ width: 110 }}>
-                            <Space>
-                              {t('mute_type.start')}
-                              <Tooltip title={t('alertRules:effective_time_tip')}>
-                                <InfoCircleOutlined />
-                              </Tooltip>
-                            </Space>
-                          </div>
-                          <div style={{ width: 110 }}>
-                            <Space>
-                              {t('mute_type.end')}
-                              <Tooltip title={t('alertRules:effective_time_tip')}>
-                                <InfoCircleOutlined />
-                              </Tooltip>
-                            </Space>
-                          </div>
+                          {t('mute_type.start')}
+                          <Tooltip title={t('alertRules:effective_time_tip')}>
+                            <InfoCircleOutlined />
+                          </Tooltip>
                         </Space>
-                        {fields.map(({ key, name, ...restField }) => (
-                          <Space
-                            key={key}
-                            style={{
-                              display: 'flex',
-                              marginBottom: 8,
-                            }}
-                            align='baseline'
-                          >
-                            <Form.Item
-                              {...restField}
-                              name={[name, 'enable_days_of_week']}
-                              style={{ width: 450 }}
-                              rules={[
-                                {
-                                  required: true,
-                                  message: t('mute_type.days_of_week_msg'),
-                                },
-                              ]}
-                            >
-                              <Select mode='tags'>
-                                {daysOfWeek.map((item) => {
-                                  return (
-                                    <Select.Option key={item} value={String(item)}>
-                                      {t(`common:time.weekdays.${item}`)}
-                                    </Select.Option>
-                                  );
-                                })}
-                              </Select>
-                            </Form.Item>
-                            <Form.Item
-                              {...restField}
-                              name={[name, 'enable_stime']}
-                              style={{ width: 110 }}
-                              rules={[
-                                {
-                                  required: true,
-                                  message: t('mute_type.start_msg'),
-                                },
-                              ]}
-                            >
-                              <TimePicker format='HH:mm' />
-                            </Form.Item>
-                            <Form.Item
-                              {...restField}
-                              name={[name, 'enable_etime']}
-                              style={{ width: 110 }}
-                              rules={[
-                                {
-                                  required: true,
-                                  message: t('mute_type.end_msg'),
-                                },
-                              ]}
-                            >
-                              <TimePicker format='HH:mm' />
-                            </Form.Item>
-                            <MinusCircleOutlined onClick={() => remove(name)} />
-                          </Space>
-                        ))}
-                      </>
-                    )}
-                  </Form.List>
-                </div>
-              </>
-            );
-          }}
-        </Form.Item>
-      </Card>
-      <AffixWrapper>
-        <Card size='small' className='affix-bottom-shadow'>
-          <Space>
-            <PreviewMutedEvents
-              form={form}
-              onOk={() => {
-                form.validateFields().then((values: any) => {
-                  onFinish(values);
-                });
-              }}
-            />
-            <AlertEventRuleTesterWithButton
-              onClick={() => {
-                return form.validateFields();
-              }}
-              onTest={(eventID) => {
-                return form.validateFields().then((values: any) => {
-                  return alertMuteTryrun({
-                    event_id: eventID,
-                    config: processFormValues(values),
+                      </div>
+                      <div style={{ width: 110 }}>
+                        <Space>
+                          {t('mute_type.end')}
+                          <Tooltip title={t('alertRules:effective_time_tip')}>
+                            <InfoCircleOutlined />
+                          </Tooltip>
+                        </Space>
+                      </div>
+                    </Space>
+                    {fields.map(({ key, name, ...restField }) => (
+                      <Space
+                        key={key}
+                        style={{
+                          display: 'flex',
+                          marginBottom: 8,
+                        }}
+                        align='baseline'
+                      >
+                        <Form.Item
+                          {...restField}
+                          name={[name, 'enable_days_of_week']}
+                          style={{ width: 450 }}
+                          rules={[
+                            {
+                              required: true,
+                              message: t('mute_type.days_of_week_msg'),
+                            },
+                          ]}
+                        >
+                          <DaysOfWeekSelect />
+                        </Form.Item>
+                        <Form.Item
+                          {...restField}
+                          name={[name, 'enable_stime']}
+                          style={{ width: 110 }}
+                          rules={[
+                            {
+                              required: true,
+                              message: t('mute_type.start_msg'),
+                            },
+                          ]}
+                        >
+                          <TimePicker format='HH:mm' />
+                        </Form.Item>
+                        <Form.Item
+                          {...restField}
+                          name={[name, 'enable_etime']}
+                          style={{ width: 110 }}
+                          rules={[
+                            {
+                              required: true,
+                              message: t('mute_type.end_msg'),
+                            },
+                          ]}
+                        >
+                          <TimePicker format='HH:mm' />
+                        </Form.Item>
+                        {fields.length > 1 && <MinusCircleOutlined onClick={() => remove(name)} />}
+                      </Space>
+                    ))}
+                  </>
+                )}
+              </Form.List>
+              <div className='text-soft'>{t('mute_type.periodic_tip')}</div>
+            </div>
+          </SectionCard>
+
+          <SectionCard
+            className='mt-4'
+            item={sectionMap.basic!}
+            index={sectionKeys.indexOf('basic')}
+            collapsed={sectionCollapsed.basic}
+            setCollapsed={(collapsed) => setSectionCollapsed((prev) => ({ ...prev, basic: collapsed }))}
+          >
+            <Form.Item
+              label={t('note')}
+              name='note'
+              tooltip={t('name_auto_tip')}
+              rules={[
+                {
+                  required: true,
+                },
+              ]}
+            >
+              <Input />
+            </Form.Item>
+            <Form.Item label={t('cause')} name='cause' tooltip={t('cause_tip')} className='mb-0'>
+              <TextArea rows={3} placeholder={t('cause_placeholder')} />
+            </Form.Item>
+          </SectionCard>
+        </div>
+        <AffixWrapper>
+          <Card size='small' className='affix-bottom-shadow max-w-[1200px] mx-auto'>
+            <Space>
+              <PreviewMutedEvents
+                form={form}
+                validateFields={validateFields}
+                onOk={() => {
+                  validateFields().then((values: any) => {
+                    onFinish(values);
                   });
-                });
-              }}
-            />
-            <Button onClick={() => window.history.back()}>{t('common:btn.cancel')}</Button>
-          </Space>
-        </Card>
-      </AffixWrapper>
-    </Form>
-  );
-  return (
-    <div className='operate-form-index' style={{ background: 'none' }}>
-      {content}
+                }}
+              />
+              <AlertEventRuleTesterWithButton
+                onClick={() => {
+                  return validateFields();
+                }}
+                onTest={(eventID) => {
+                  return validateFields().then((values: any) => {
+                    return alertMuteTryrun({
+                      event_id: eventID,
+                      config: processFormValues(values),
+                    });
+                  });
+                }}
+              />
+              <Button onClick={() => window.history.back()}>{t('common:btn.cancel')}</Button>
+            </Space>
+          </Card>
+        </AffixWrapper>
+      </Form>
     </div>
   );
 };
diff --git a/src/pages/warning/shield/components/utils.summary.test.ts b/src/pages/warning/shield/components/utils.summary.test.ts
new file mode 100644
index 000000000..c57d508e5
--- /dev/null
+++ b/src/pages/warning/shield/components/utils.summary.test.ts
@@ -0,0 +1,106 @@
+import moment from 'moment';
+
+import { formatMuteTag, formatSeverities, isMuteScopeUnlimited, buildMuteScopeText, formatDuration } from './utils';
+
+describe('formatMuteTag', () => {
+  it('等值匹配用 key=value 表达', () => {
+    expect(formatMuteTag({ key: 'ident', func: '==', value: 'host01' })).toBe('ident=host01');
+  });
+
+  it('非等值匹配保留运算符', () => {
+    expect(formatMuteTag({ key: 'service', func: '=~', value: 'api.*' })).toBe('service =~ api.*');
+  });
+
+  it('缺少 func 时默认按等值处理', () => {
+    expect(formatMuteTag({ key: 'ident', value: 'host01' })).toBe('ident=host01');
+  });
+
+  it('没有 key 的空行返回空字符串', () => {
+    expect(formatMuteTag({})).toBe('');
+    expect(formatMuteTag(undefined)).toBe('');
+  });
+
+  it('只填了 key 还没填 value 时返回空字符串', () => {
+    expect(formatMuteTag({ key: 'ident', func: '==' })).toBe('');
+  });
+});
+
+describe('formatSeverities', () => {
+  it('全选或为空时不展示等级', () => {
+    expect(formatSeverities([1, 2, 3])).toBe('');
+    expect(formatSeverities([])).toBe('');
+    expect(formatSeverities(undefined)).toBe('');
+  });
+
+  it('部分选中时按顺序展示', () => {
+    expect(formatSeverities([2, 1])).toBe('S1/S2');
+  });
+});
+
+describe('isMuteScopeUnlimited', () => {
+  it('没有标签且没有数据源时视为无限制', () => {
+    expect(isMuteScopeUnlimited({})).toBe(true);
+    expect(isMuteScopeUnlimited({ tags: [{ func: '==' }], datasource_ids: [] })).toBe(true);
+  });
+
+  it('数据源选了 $all 仍视为无限制', () => {
+    expect(isMuteScopeUnlimited({ datasource_ids: [0] })).toBe(true);
+  });
+
+  it('配置了标签或具体数据源时不再提示', () => {
+    expect(isMuteScopeUnlimited({ tags: [{ key: 'ident', func: '==', value: 'host01' }] })).toBe(false);
+    expect(isMuteScopeUnlimited({ datasource_ids: [1] })).toBe(false);
+  });
+});
+
+describe('buildMuteScopeText', () => {
+  const base = {
+    separator: '、',
+    fallbackText: '全部告警',
+  };
+
+  it('优先使用标签条件，最多取两个', () => {
+    expect(
+      buildMuteScopeText({
+        ...base,
+        tags: [
+          { key: 'ident', func: '==', value: 'host01' },
+          { key: 'service', func: '==', value: 'api' },
+          { key: 'env', func: '==', value: 'prod' },
+        ],
+        datasourceNames: ['ds1'],
+        cateLabel: 'Prometheus',
+      }),
+    ).toBe('ident=host01、service=api');
+  });
+
+  it('没有标签时退化到数据源名称', () => {
+    expect(buildMuteScopeText({ ...base, datasourceNames: ['ds1'], cateLabel: 'Prometheus' })).toBe('ds1');
+  });
+
+  it('没有标签和数据源时退化到数据源类型', () => {
+    expect(buildMuteScopeText({ ...base, cateLabel: 'Prometheus' })).toBe('Prometheus');
+  });
+
+  it('非全选的事件等级追加在末尾', () => {
+    expect(buildMuteScopeText({ ...base, cateLabel: 'Prometheus', severities: [1, 2] })).toBe('Prometheus S1/S2');
+  });
+
+  it('什么都没有时使用兜底文案', () => {
+    expect(buildMuteScopeText(base)).toBe('全部告警');
+  });
+});
+
+describe('formatDuration', () => {
+  it('按天/时/分组合展示时长', () => {
+    const btime = moment('2026-07-21 10:00:00');
+    expect(formatDuration(btime, moment('2026-07-21 11:30:00'))).toBe('1h 30m');
+    expect(formatDuration(btime, moment('2026-07-22 12:00:00'))).toBe('1d 2h');
+  });
+
+  it('结束时间不晚于开始时间时返回空字符串', () => {
+    const btime = moment('2026-07-21 10:00:00');
+    expect(formatDuration(btime, moment('2026-07-21 10:00:00'))).toBe('');
+    expect(formatDuration(undefined, btime)).toBe('');
+  });
+});
diff --git a/src/pages/warning/shield/components/utils.ts b/src/pages/warning/shield/components/utils.ts
index ede61e0d9..de7d341ce 100644
--- a/src/pages/warning/shield/components/utils.ts
+++ b/src/pages/warning/shield/components/utils.ts
@@ -17,3 +17,86 @@ export const processFormValues = (values) => {
     cluster: '0',
   };
 };
+
+export interface MuteTagItem {
+  key?: string;
+  func?: string;
+  value?: string;
+}
+
+/**
+ * 把单个标签条件格式化成可读文本，如 `ident=host01`、`service =~ api.*`
+ * 键或值未填完整时返回空字符串，避免半成品文案出现在标题和摘要里
+ */
+export const formatMuteTag = (tag?: MuteTagItem): string => {
+  if (!tag?.key) return '';
+  const func = tag.func || '==';
+  const value = _.isArray(tag.value) ? _.join(tag.value, ',') : tag.value ?? '';
+  if (value === '') return '';
+  return func === '==' ? `${tag.key}=${value}` : `${tag.key} ${func} ${value}`;
+};
+
+/**
+ * 事件等级摘要，如 `S1/S2`；全选或为空时返回空字符串
+ */
+export const formatSeverities = (severities?: number[]): string => {
+  if (!_.isArray(severities) || _.isEmpty(severities) || _.size(severities) >= 3) return '';
+  return _.map(_.sortBy(severities), (item) => `S${item}`).join('/');
+};
+
+/**
+ * 筛选条件是否完全没有限制（没有标签条件，且数据源不限或选了 $all）
+ * 这种规则会屏蔽业务组下的所有告警，需要给出风险提示
+ */
+export const isMuteScopeUnlimited = (values?: { tags?: MuteTagItem[]; datasource_ids?: number[] }): boolean => {
+  const hasTags = _.some(values?.tags, (tag) => !!tag?.key);
+  const hasDatasource = !_.isEmpty(values?.datasource_ids) && !_.includes(values?.datasource_ids, 0);
+  return !hasTags && !hasDatasource;
+};
+
+/**
+ * 根据筛选条件生成规则标题里的「屏蔽范围」描述
+ * 优先级：标签条件 > 具体数据源 > 数据源类型，末尾追加非全选的事件等级
+ */
+export const buildMuteScopeText = (params: {
+  tags?: MuteTagItem[];
+  severities?: number[];
+  datasourceNames?: string[];
+  cateLabel?: string;
+  separator: string;
+  fallbackText: string;
+}): string => {
+  const { tags, severities, datasourceNames, cateLabel, separator, fallbackText } = params;
+  const parts: string[] = [];
+  const tagTexts = _.compact(_.map(tags, formatMuteTag));
+  if (!_.isEmpty(tagTexts)) {
+    parts.push(_.take(tagTexts, 2).join(separator));
+  } else if (!_.isEmpty(datasourceNames)) {
+    parts.push(_.take(datasourceNames, 2).join(separator));
+  } else if (cateLabel) {
+    parts.push(cateLabel);
+  }
+  const severitiesText = formatSeverities(severities);
+  if (severitiesText) {
+    parts.push(severitiesText);
+  }
+  if (_.isEmpty(parts)) return fallbackText;
+  return parts.join(' ');
+};
+
+/**
+ * 两个时间点之间的时长文本，如 `1d 2h 30m`
+ */
+export const formatDuration = (btime?: moment.Moment, etime?: moment.Moment): string => {
+  if (!btime || !etime) return '';
+  const diff = moment(etime).valueOf() - moment(btime).valueOf();
+  if (diff <= 0) return '';
+  const duration = moment.duration(diff);
+  const y = Math.floor(duration.asYears());
+  if (y > 0) return `${y}y`;
+  const d = Math.floor(duration.asDays());
+  const h = duration.hours();
+  const m = duration.minutes();
+  const s = duration.seconds();
+  return _.compact([d ? `${d}d` : '', h ? `${h}h` : '', m ? `${m}m` : '', s ? `${s}s` : '']).join(' ');
+};
diff --git a/src/pages/warning/shield/index.tsx b/src/pages/warning/shield/index.tsx
index eeffa7e97..44b2ea652 100644
--- a/src/pages/warning/shield/index.tsx
+++ b/src/pages/warning/shield/index.tsx
@@ -35,6 +35,8 @@ import { DatasourceSelect } from '@/components/DatasourceSelect';
 import { CommonStateContext } from '@/App';
 import usePagination from '@/components/usePagination';
 import { allCates, getCateDisplayLabel } from '@/components/AdvancedWrap/utils';
+import DocumentDrawer from '@/components/DocumentDrawer';
+import EmptyGuide from '@/components/EmptyGuide';
 import DeleteMutesModal from './components/DeleteMutesModal';
 
 import './locale';
@@ -53,11 +55,12 @@ interface Filter {
 }
 
 const FILTER_SESSION_STORAGE_KEY = 'alert-mutes-filter';
+const DOC_PATH = 'https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v9/usage/alert-notify/rules/alert-mute/';
 
 const Shield: React.FC = () => {
   const { t, i18n } = useTranslation('alertMutes');
   const history = useHistory();
-  const { datasourceList, groupedDatasourceList, businessGroup, busiGroups } = useContext(CommonStateContext);
+  const { datasourceList, groupedDatasourceList, businessGroup, busiGroups, darkMode } = useContext(CommonStateContext);
   const [gids, setGids] = useState<string | undefined>(getDefaultGids(N9E_GIDS_LOCALKEY, businessGroup));
   let defaultFilter = {} as Filter;
   let defaultPage = 1;
@@ -71,7 +74,8 @@ const Shield: React.FC = () => {
   const [query, setQuery] = useState<string>(defaultFilter.query ?? '');
   const [currentShieldDataAll, setCurrentShieldDataAll] = useState<Array<shieldItem>>([]);
   const [currentShieldData, setCurrentShieldData] = useState<Array<shieldItem>>([]);
-  const [loading, setLoading] = useState<boolean>(false);
+  // 有业务组时首屏就会拉列表，初始即置为 loading，避免接口返回前闪现空态引导
+  const [loading, setLoading] = useState<boolean>(!!gids);
   const [datasourceIds, setDatasourceIds] = useState<number[] | undefined>(defaultFilter.datasourceIds);
   const [filterDisabled, setFilterDisabled] = useState<0 | 1 | undefined>(defaultFilter.disabled);
   const [deleteMutesModalVisible, setDeleteMutesModalVisible] = useState(false);
@@ -301,14 +305,19 @@ const Shield: React.FC = () => {
   };
 
   const getList = async () => {
-    if (gids) {
-      setLoading(true);
-      const ids = gids === '-2' ? undefined : gids;
+    if (!gids) return;
+    setLoading(true);
+    const ids = gids === '-2' ? undefined : gids;
+    try {
       const { success, dat } = await getBusiGroupsAlertMutes(ids);
       if (success) {
         setCurrentShieldDataAll(dat || []);
-        setLoading(false);
       }
+    } catch (e) {
+      console.error(e);
+    } finally {
+      // 请求失败也要结束 loading，否则表格会一直转圈且空态引导永远不出现
+      setLoading(false);
     }
   };
 
@@ -323,8 +332,20 @@ const Shield: React.FC = () => {
     saveState({ query: val, current: 1 });
   };
 
+  // 只有选中了叶子业务组才能新建屏蔽规则
+  const canAdd = businessGroup.isLeaf && gids !== '-2';
+  const openDoc = () => {
+    DocumentDrawer({
+      language: i18n.language,
+      darkMode,
+      title: t('common:page_help'),
+      type: 'iframe',
+      documentPath: DOC_PATH,
+    });
+  };
+
   return (
-    <PageLayout title={t('title')} icon={<CloseCircleOutlined />} doc='https://flashcat.cloud/docs/content/flashcat-monitor/nightingale-v9/usage/alert-notify/rules/alert-mute/'>
+    <PageLayout title={t('title')} icon={<CloseCircleOutlined />} doc={DOC_PATH}>
       <div className='shield-content'>
         <BusinessGroupSideBarWithAll gids={gids} setGids={setGids} localeKey={N9E_GIDS_LOCALKEY} />
         <div className='shield-index fc-border rounded-lg' style={{ height: '100%', overflowY: 'auto' }}>
@@ -370,7 +391,7 @@ const Shield: React.FC = () => {
               />
             </Space>
             <Space>
-              {businessGroup.isLeaf && gids !== '-2' && (
+              {canAdd && (
                 <Button
                   type='primary'
                   className='add'
@@ -404,6 +425,37 @@ const Shield: React.FC = () => {
             loading={loading}
             dataSource={currentShieldData}
             columns={columns}
+            // 仅在「确实一条规则都没有」时展示引导；筛选命中为空时回退到默认空态，避免误导
+            // 加载中不展示，否则首屏接口返回前会闪现「还没有屏蔽规则」
+            locale={
+              !loading && currentShieldDataAll.length === 0
+                ? {
+                    emptyText: (
+                      <EmptyGuide
+                        title={t('empty_guide.title')}
+                        description={t('empty_guide.desc')}
+                        actions={
+                          <>
+                            {canAdd ? (
+                              <Button
+                                type='primary'
+                                onClick={() => {
+                                  history.push('/alert-mutes/add');
+                                }}
+                              >
+                                {t('common:btn.add')}
+                              </Button>
+                            ) : (
+                              <span className='opacity-70'>{t('empty_guide.select_busi_group')}</span>
+                            )}
+                            <a onClick={openDoc}>{t('common:page_help')}</a>
+                          </>
+                        }
+                      />
+                    ),
+                  }
+                : undefined
+            }
             rowActions={(record: shieldItem) => ({
               inline: [
                 {
diff --git a/src/pages/warning/shield/locale/en_US.ts b/src/pages/warning/shield/locale/en_US.ts
index 16f283886..227573781 100644
--- a/src/pages/warning/shield/locale/en_US.ts
+++ b/src/pages/warning/shield/locale/en_US.ts
@@ -5,28 +5,47 @@ const en_US = {
   datasource_type: 'Datasource type',
   datasource_id: 'Datasource',
   cause: 'Cause',
+  cause_tip: 'Describe why the alerts are muted, so teammates know the background and when the mute can be released',
+  cause_placeholder: 'e.g. Order service release, expected to finish within 1 hour',
   time: 'Time',
   note: 'Name',
   btime: 'Start time',
+  btime_msg: 'Start time is required',
   duration: 'Duration',
+  duration_quick: 'Quick duration',
+  duration_quick_tip: 'The end time is calculated from the start time, you can also edit the start and end time below',
   etime: 'End time',
+  etime_msg: 'End time is required',
+  etime_before_btime_msg: 'End time must be later than start time',
+  expired_tip: 'This rule has expired and mutes nothing right now. Pick a quick duration or change the end time to make it effective again',
+  long_duration_tip: 'The mute lasts longer than {{days}} days, alerts will stay invisible for a long time, please confirm',
   prod: 'Type',
   severities: 'Severity',
+  severities_tip: 'Only the checked severities are muted, the others still alert as usual',
   severities_msg: 'Severity is required',
+  scope_unlimited_tip: 'No datasource and no event tag is configured, this rule will mute all alert events of the selected business group, please confirm',
   mute_type: {
     label: 'Mute type',
     0: 'Fixed time',
     1: 'Periodic time',
     days_of_week: 'Mute time',
+    days_preset: {
+      everyday: 'Every day',
+      workday: 'Workdays',
+      weekend: 'Weekend',
+    },
     start: 'Start time',
     start_msg: 'Start time is required',
     end: 'End time',
     end_msg: 'End time is required',
+    periodic_tip: 'A periodic mute never expires, alerts matched in the time ranges above are muted every week. Same start and end time means the whole day',
   },
   mute_method: {
     label: 'Mute method',
     0: 'Mute events and notifications',
+    '0_desc': '(no event, no notification)',
     1: 'Mute notifications only',
+    '1_desc': '(events are still recorded)',
     tip: 'With "Mute notifications only", matched alerts still generate and record events during the mute period; only notifications are suppressed, so you can still tell whether a change caused anomalies and release the mute after recovery.',
   },
   tag: {
@@ -42,18 +61,36 @@ const en_US = {
 - \`!~\` does not match the regular expression, fill in a regular expression, and tag values that match this regular expression will be excluded, similar to \`!~\` in PromQL`,
     },
   },
+  name_auto_tip: 'The name is generated from the filter conditions above, you can change it at any time',
+  name_auto_template: 'Mute {{scope}}',
+  name_auto_separator: ', ',
+  name_auto_all_alerts: 'all alerts',
+  summary: {
+    severities_all: 'All severities',
+    tags_none: 'Any tag',
+    tags_count: '{{count}} tag conditions',
+    periodic_count: '{{count}} time ranges',
+  },
   basic_configs: 'Basic information',
+  basic_configs_desc: 'Rule name and mute cause, which make the rule easier to maintain and search',
   filter_configs: 'Filter conditions',
-  filter_configs_tip:
-    'The alert events that meet the filter conditions will be muted by the mute rule, and then be muted. The filter condition is essentially to filter the alert event, and filter the event data source, level, tag, etc. through the filter condition',
-  mute_configs: 'Mute duration',
+  filter_configs_desc:
+    'Decide which alert events are muted: business group, datasource, severity and event tags. Conditions are combined with AND, an empty one means no restriction',
+  mute_configs: 'Mute settings',
+  mute_configs_desc: 'Decide when and how the alerts are muted: a fixed time range, or time ranges repeated every week',
   alert_content:
     'In order to prevent the misalignment of the mute rule from muting all the alerts of the company, this mute rule will only take effect on the alerts of a specific business group',
   preview_muted_title: 'Preview related events',
+  preview_muted_desc:
+    'The following existing alert events match the filter conditions. After saving, newly generated events will be muted, existing events will not disappear automatically, you can delete them here.',
   preview_muted_save_only: 'Save only',
   preview_muted_save_and_delete: 'Save and delete related events',
   expired: 'Expired',
-  quick_mute: 'Quick Mute',
+  empty_guide: {
+    title: 'No mute rule yet',
+    desc: 'During releases, maintenance or drills, a mute rule temporarily silences alerts you already know about, so the on-call is not disturbed. It expires on its own, no manual cleanup needed.',
+    select_busi_group: 'Select a business group on the left first',
+  },
   delete_mutes: {
     title: 'Mute Rule Cleanup',
     alert_message: 'Once deleted, data cannot be recovered. Please proceed with caution!',
diff --git a/src/pages/warning/shield/locale/ja_JP.ts b/src/pages/warning/shield/locale/ja_JP.ts
index 3f3533742..e4454de01 100644
--- a/src/pages/warning/shield/locale/ja_JP.ts
+++ b/src/pages/warning/shield/locale/ja_JP.ts
@@ -5,28 +5,47 @@ const ja_JP = {
   datasource_type: 'データソースタイプ',
   datasource_id: 'データソース',
   cause: 'スクリーンの理由',
+  cause_tip: '抑制の背景を記録しておくと、チームメンバーが理由と解除のタイミングを把握しやすくなります',
+  cause_placeholder: '例：注文サービスのリリース、1 時間以内に完了予定',
   time: 'スクリーンの時間',
   note: 'ルールのタイトル',
   btime: 'スクリーンの開始時間',
+  btime_msg: 'スクリーンの開始時間は空にできません',
   duration: 'スクリーンの持続時間',
+  duration_quick: 'クイック期間',
+  duration_quick_tip: '「スクリーンの開始時間」を起点に終了時間を算出します。下の開始・終了時間を直接編集することもできます',
   etime: 'スクリーンの終了時間',
+  etime_msg: 'スクリーンの終了時間は空にできません',
+  etime_before_btime_msg: '終了時間は開始時間より後である必要があります',
+  expired_tip: 'このルールは期限切れで、現在アラートを抑制していません。クイック期間を選ぶか終了時間を変更してください',
+  long_duration_tip: '抑制期間が {{days}} 日を超えています。その間アラートが長期間見えなくなります。ご確認ください',
   prod: '監視タイプ',
   severities: 'イベントのレベル',
+  severities_tip: 'チェックしたレベルのみ抑制され、チェックしていないレベルは通常どおり通知されます',
   severities_msg: 'イベントのレベルは空にできません',
+  scope_unlimited_tip: 'データソースとイベントタグが未設定のため、選択したビジネスグループの全てのアラートイベントが抑制されます。ご確認ください',
   mute_type: {
     '0': '固定時間',
     '1': '周期時間',
     label: 'スクリーンの時間タイプ',
     days_of_week: 'スクリーンの時間',
+    days_preset: {
+      everyday: '毎日',
+      workday: '平日',
+      weekend: '週末',
+    },
     start: '開始時間',
     start_msg: '開始時間は空にできません',
     end: '終了時間',
     end_msg: '終了時間は空にできません',
+    periodic_tip: '周期抑制は期限がなく、毎週上記の時間帯に一致したアラートが抑制されます。開始時間と終了時間が同じ場合は終日を意味します',
   },
   mute_method: {
     label: '抑制方式',
     0: 'イベントと通知を抑制',
+    '0_desc': '（イベントも通知も発生しません）',
     1: '通知のみ抑制',
+    '1_desc': '（イベントは通常どおり記録されます）',
     tip: '「通知のみ抑制」を選ぶと、抑制期間中に一致したアラートはイベントを通常どおり生成・記録し、通知のみ送信されません。変更が異常を引き起こしたか把握でき、復旧後に抑制を解除できます。',
   },
   tag: {
@@ -42,17 +61,34 @@ const ja_JP = {
 - \`!~\` 正規表現にマッチしません。正規表現を入力し、この正規表現にマッチするタグ値は除外されます。PromQLの \`!~\` に類似しています`,
     },
   },
+  name_auto_tip: 'タイトルは上のフィルタ条件から自動生成されます。いつでも変更できます',
+  name_auto_template: '{{scope}} を抑制',
+  name_auto_separator: '、',
+  name_auto_all_alerts: '全てのアラート',
+  summary: {
+    severities_all: '全てのレベル',
+    tags_none: 'タグ制限なし',
+    tags_count: 'タグ条件 {{count}} 件',
+    periodic_count: '時間帯 {{count}} 件',
+  },
   basic_configs: '基本情報',
+  basic_configs_desc: 'ルールのタイトルと抑制理由。チームでの共有や後からの検索に役立ちます',
   filter_configs: 'フィルタリング設定',
-  filter_configs_tip:
-    'フィルタリング条件に一致するアラートイベントはスクリーンルールにマッチし、スクリーンされます。フィルタリング条件は本質的にアラートイベントのフィルタリングであり、イベントのデータソース、レベル、タグなどを通じて行われます',
-  mute_configs: 'スクリーンの持続時間',
+  filter_configs_desc: 'どのアラートイベントを抑制するかを決めます：ビジネスグループ、データソース、レベル、タグ。条件は AND で結合され、空欄は制限なしを意味します',
+  mute_configs: 'スクリーン設定',
+  mute_configs_desc: 'いつ、どの程度抑制するかを決めます：固定の期間、または毎週繰り返す時間帯',
   alert_content: '会社の全てのアラートを誤ってスクリーンしないために、このスクリーンルールは特定のビジネスグループ下のアラートイベントにのみ適用されます',
   preview_muted_title: '関連イベントのプレビュー',
+  preview_muted_desc:
+    '以下はフィルタ条件に一致する既存のアラートイベントです。保存後は新たに発生した同種のイベントが抑制されます。既存のイベントは自動では消えないため、ここでまとめて削除できます。',
   preview_muted_save_only: '保存のみ',
   preview_muted_save_and_delete: '保存して関連イベントを削除',
   expired: '期限切れ',
-  quick_mute: 'クイックミュート',
+  empty_guide: {
+    title: 'スクリーンルールがまだありません',
+    desc: 'リリースやメンテナンス、訓練の期間中、既知のアラートをスクリーンルールで一時的に抑制し、当番者への通知を防ぎます。期限が切れると自動的に失効するため、手動で戻す必要はありません。',
+    select_busi_group: '先に左側でビジネスグループを選択してください',
+  },
   delete_mutes: {
     title: 'スクリーンルールクリーンアップ',
     alert_message: '一度削除すると復元できません。慎重に操作してください！',
diff --git a/src/pages/warning/shield/locale/ru_RU.ts b/src/pages/warning/shield/locale/ru_RU.ts
index 0325ed721..8200c40c0 100644
--- a/src/pages/warning/shield/locale/ru_RU.ts
+++ b/src/pages/warning/shield/locale/ru_RU.ts
@@ -5,28 +5,48 @@ const ru_RU = {
   datasource_type: 'Тип источника данных',
   datasource_id: 'Источник данных',
   cause: 'Причина блокировки',
+  cause_tip: 'Опишите причину блокировки, чтобы коллеги понимали контекст и знали, когда её можно снять',
+  cause_placeholder: 'Например: релиз сервиса заказов, ожидается около 1 часа',
   time: 'Время блокировки',
   note: 'Описание заголовок',
   btime: 'Время начала блокировки',
+  btime_msg: 'Время начала блокировки не может быть пустым',
   duration: 'Длительность блокировки',
+  duration_quick: 'Быстрая длительность',
+  duration_quick_tip: 'Время окончания рассчитывается от времени начала, вы также можете изменить время начала и окончания ниже',
   etime: 'Время окончания блокировки',
+  etime_msg: 'Время окончания блокировки не может быть пустым',
+  etime_before_btime_msg: 'Время окончания должно быть позже времени начала',
+  expired_tip: 'Правило истекло и сейчас ничего не блокирует. Выберите быструю длительность или измените время окончания',
+  long_duration_tip: 'Длительность блокировки превышает {{days}} дней, оповещения будут долго не видны, пожалуйста, подтвердите',
   prod: 'Тип мониторинга',
   severities: 'Уровень событий',
+  severities_tip: 'Блокируются только отмеченные уровни, остальные продолжают оповещать как обычно',
   severities_msg: 'Уровень событий не может быть пустым',
+  scope_unlimited_tip: 'Источник данных и теги событий не заданы: правило заблокирует все события оповещений выбранной бизнес-группы, пожалуйста, подтвердите',
   mute_type: {
     '0': 'По времени',
     '1': 'По расписанию',
     label: 'Тип блокировки',
     days_of_week: 'Время блокировки',
+    days_preset: {
+      everyday: 'Каждый день',
+      workday: 'Рабочие дни',
+      weekend: 'Выходные',
+    },
     start: 'Время начала',
     start_msg: 'Время начала не может быть пустым',
     end: 'Время окончания',
     end_msg: 'Время окончания не может быть пустым',
+    periodic_tip:
+      'Периодическая блокировка действует бессрочно: каждую неделю блокируются оповещения в указанных интервалах. Одинаковое время начала и окончания означает весь день',
   },
   mute_method: {
     label: 'Способ блокировки',
     0: 'Блокировать события и уведомления',
+    '0_desc': '(события не создаются, уведомления не отправляются)',
     1: 'Блокировать только уведомления',
+    '1_desc': '(события по-прежнему записываются)',
     tip: 'При выборе «Блокировать только уведомления» совпавшие оповещения в период блокировки по-прежнему создают и записывают события, подавляются лишь уведомления — так можно заметить, вызвало ли изменение аномалии, и снять блокировку после восстановления.',
   },
   tag: {
@@ -42,19 +62,37 @@ const ru_RU = {
 - \`!~\` не сопоставляет регулярное выражение, заполняет регулярное выражение, и значения тегов, соответствующие этому регулярному выражению, будут исключены, аналогично \`!~\` в PromQL`,
     },
   },
+  name_auto_tip: 'Заголовок генерируется по условиям фильтрации выше, его можно изменить в любой момент',
+  name_auto_template: 'Блокировка {{scope}}',
+  name_auto_separator: ', ',
+  name_auto_all_alerts: 'всех оповещений',
+  summary: {
+    severities_all: 'Все уровни',
+    tags_none: 'Теги без ограничений',
+    tags_count: 'Условий по тегам: {{count}}',
+    periodic_count: 'Интервалов: {{count}}',
+  },
 
   basic_configs: 'Основная информация',
+  basic_configs_desc: 'Заголовок правила и причина блокировки — облегчают совместную работу и последующий поиск',
   filter_configs: 'Фильтр',
-  filter_configs_tip:
-    'События оповещений, соответствующие условиям фильтрации, будут попадать под режим тишины и, следовательно, блокироваться. Фильтры по сути являются фильтрацией событий оповещений по источнику данных, уровню, тегам и другой информации события',
-  mute_configs: 'Продолжительность блокировки',
+  filter_configs_desc:
+    'Определяет, какие события оповещений блокируются: бизнес-группа, источник данных, уровень и теги события. Условия объединяются по «И», пустое значение — без ограничений',
+  mute_configs: 'Настройки блокировки',
+  mute_configs_desc: 'Определяет, когда и насколько блокировать: фиксированный интервал времени или интервалы, повторяющиеся каждую неделю',
   alert_content:
     'Чтобы предотвратить ошибочную блокировку всех оповещений компании, это правило блокировки будет действовать только для событий оповещений в определенной бизнес-группе',
   preview_muted_title: 'Предварительный просмотр соответствующих событий',
+  preview_muted_desc:
+    'Ниже перечислены уже существующие события оповещений, подходящие под условия фильтрации. После сохранения новые такие события будут блокироваться, а существующие не исчезнут автоматически — их можно удалить здесь.',
   preview_muted_save_only: 'Только сохранить',
   preview_muted_save_and_delete: 'Сохранить и удалить соответствующие события',
   expired: 'Истекший',
-  quick_mute: 'Быстрая блокировка',
+  empty_guide: {
+    title: 'Правил блокировки пока нет',
+    desc: 'Во время релизов, обслуживания или учений правило блокировки временно скрывает уже известные оповещения, чтобы не беспокоить дежурного. По истечении срока оно перестаёт действовать само, вручную ничего возвращать не нужно.',
+    select_busi_group: 'Сначала выберите бизнес-группу слева',
+  },
   delete_mutes: {
     title: 'Очистка правил блокировки',
     alert_message: 'После удаления данные невозможно восстановить. Пожалуйста, действуйте осторожно!',
diff --git a/src/pages/warning/shield/locale/zh_CN.ts b/src/pages/warning/shield/locale/zh_CN.ts
index 969cbd8ad..33188895c 100644
--- a/src/pages/warning/shield/locale/zh_CN.ts
+++ b/src/pages/warning/shield/locale/zh_CN.ts
@@ -5,28 +5,47 @@ const zh_CN = {
   datasource_type: '数据源类型',
   datasource_id: '数据源',
   cause: '屏蔽原因',
+  cause_tip: '记录本次屏蔽的背景，便于团队成员理解为什么屏蔽、什么时候可以解除',
+  cause_placeholder: '例如：订单服务发版，预计 1 小时内完成',
   time: '屏蔽时间',
   note: '规则标题',
   btime: '屏蔽开始时间',
+  btime_msg: '屏蔽开始时间不能为空',
   duration: '屏蔽时长',
+  duration_quick: '快捷时长',
+  duration_quick_tip: '以「屏蔽开始时间」为起点推算结束时间，也可以直接修改下面的起止时间',
   etime: '屏蔽结束时间',
+  etime_msg: '屏蔽结束时间不能为空',
+  etime_before_btime_msg: '屏蔽结束时间必须晚于开始时间',
+  expired_tip: '该规则已过期，当前不会屏蔽任何告警。如需继续生效，请选择快捷时长或修改结束时间',
+  long_duration_tip: '屏蔽时长超过 {{days}} 天，期间的告警将长期不可见，请确认是否符合预期',
   prod: '监控类型',
   severities: '事件等级',
+  severities_tip: '只有勾选的等级会被屏蔽，未勾选的等级仍会正常告警',
   severities_msg: '事件等级不能为空',
+  scope_unlimited_tip: '当前没有配置数据源和事件标签，该规则将屏蔽所选业务组下的所有告警事件，请确认是否符合预期',
   mute_type: {
     label: '屏蔽时间类型',
     0: '固定时间',
     1: '周期时间',
     days_of_week: '屏蔽时间',
+    days_preset: {
+      everyday: '每天',
+      workday: '工作日',
+      weekend: '周末',
+    },
     start: '开始时间',
     start_msg: '开始时间不能为空',
     end: '结束时间',
     end_msg: '结束时间不能为空',
+    periodic_tip: '周期屏蔽长期有效，每周在上述时段内命中的告警都会被屏蔽；开始时间与结束时间相同表示全天',
   },
   mute_method: {
     label: '屏蔽方式',
     0: '屏蔽事件与通知',
+    '0_desc': '（不产生事件，也不发通知）',
     1: '只屏蔽通知',
+    '1_desc': '（正常记录事件，只是不发通知）',
     tip: '选择「只屏蔽通知」时，屏蔽周期内匹配的告警仍会正常产生事件并记录，仅不发送通知，便于感知变更期间是否产生异常，处理恢复后再放开屏蔽。',
   },
   tag: {
@@ -42,16 +61,33 @@ const zh_CN = {
 - \`!~\` 正则不匹配，填写正则，匹配这个正则的标签值都将被排除，类似 PromQL 中的 \`!~\``,
     },
   },
+  name_auto_tip: '标题会根据上面的筛选条件自动生成，可随时修改',
+  name_auto_template: '屏蔽 {{scope}}',
+  name_auto_separator: '、',
+  name_auto_all_alerts: '全部告警',
+  summary: {
+    severities_all: '全部等级',
+    tags_none: '标签不限',
+    tags_count: '{{count}} 个标签条件',
+    periodic_count: '{{count}} 个时段',
+  },
   basic_configs: '基本信息',
+  basic_configs_desc: '规则标题与屏蔽原因，便于团队协作和后续检索',
   filter_configs: '筛选条件',
-  filter_configs_tip: '符合筛选条件的告警事件会命中屏蔽规则，进而被屏蔽。筛选条件本质就是对告警事件的筛选，通过事件的数据源、等级、标签等信息进行筛选',
-  mute_configs: '屏蔽时长',
+  filter_configs_desc: '决定哪些告警事件会被屏蔽：业务组、数据源、事件等级、事件标签，条件之间是「与」的关系，留空表示不限制',
+  mute_configs: '屏蔽设置',
+  mute_configs_desc: '决定什么时候屏蔽、屏蔽到什么程度：固定的一段时间，或每周重复的时段',
   alert_content: '为了防止误配屏蔽规则屏蔽掉公司所有的告警，此屏蔽规则只会生效于特定业务组下的告警事件',
   preview_muted_title: '预览相关事件',
+  preview_muted_desc: '以下是当前已存在、且符合本条筛选条件的告警事件。保存后新产生的同类事件会被屏蔽，已存在的事件不会自动消失，可在此一并删除。',
   preview_muted_save_only: '仅保存',
   preview_muted_save_and_delete: '保存并删除相关事件',
   expired: '已过期',
-  quick_mute: '快速屏蔽',
+  empty_guide: {
+    title: '还没有屏蔽规则',
+    desc: '发版、维护、演练期间，用屏蔽规则临时挡掉已知的告警，避免打扰值班同学；到期自动失效，不需要手动恢复。',
+    select_busi_group: '请先在左侧选择一个业务组',
+  },
   delete_mutes: {
     title: '屏蔽规则清理',
     alert_message: '一旦删除将无法找回，请谨慎操作！',
diff --git a/src/pages/warning/shield/locale/zh_HK.ts b/src/pages/warning/shield/locale/zh_HK.ts
index 1de61d7a8..ae683f2af 100644
--- a/src/pages/warning/shield/locale/zh_HK.ts
+++ b/src/pages/warning/shield/locale/zh_HK.ts
@@ -5,28 +5,47 @@ const zh_HK = {
   datasource_type: '數據源類型',
   datasource_id: '數據源',
   cause: '屏蔽原因',
+  cause_tip: '記錄本次屏蔽的背景，便於團隊成員理解為什麼屏蔽、什麼時候可以解除',
+  cause_placeholder: '例如：訂單服務發版，預計 1 小時內完成',
   time: '屏蔽時間',
   note: '規則標題',
   btime: '屏蔽開始時間',
+  btime_msg: '屏蔽開始時間不能為空',
   duration: '屏蔽時長',
+  duration_quick: '快捷時長',
+  duration_quick_tip: '以「屏蔽開始時間」為起點推算結束時間，也可以直接修改下面的起止時間',
   etime: '屏蔽結束時間',
+  etime_msg: '屏蔽結束時間不能為空',
+  etime_before_btime_msg: '屏蔽結束時間必須晚於開始時間',
+  expired_tip: '該規則已過期，當前不會屏蔽任何告警。如需繼續生效，請選擇快捷時長或修改結束時間',
+  long_duration_tip: '屏蔽時長超過 {{days}} 天，期間的告警將長期不可見，請確認是否符合預期',
   prod: '監控類型',
   severities: '事件等級',
+  severities_tip: '只有勾選的等級會被屏蔽，未勾選的等級仍會正常告警',
   severities_msg: '事件等級不能為空',
+  scope_unlimited_tip: '當前沒有配置數據源和事件標籤，該規則將屏蔽所選業務組下的所有告警事件，請確認是否符合預期',
   mute_type: {
     '0': '固定時間',
     '1': '週期時間',
     label: '屏蔽時間類型',
     days_of_week: '屏蔽時間',
+    days_preset: {
+      everyday: '每天',
+      workday: '工作日',
+      weekend: '週末',
+    },
     start: '開始時間',
     start_msg: '開始時間不能為空',
     end: '結束時間',
     end_msg: '結束時間不能為空',
+    periodic_tip: '週期屏蔽長期有效，每週在上述時段內命中的告警都會被屏蔽；開始時間與結束時間相同表示全天',
   },
   mute_method: {
     label: '屏蔽方式',
     0: '屏蔽事件與通知',
+    '0_desc': '（不產生事件，也不發通知）',
     1: '只屏蔽通知',
+    '1_desc': '（正常記錄事件，只是不發通知）',
     tip: '選擇「只屏蔽通知」時，屏蔽週期內匹配的告警仍會正常產生事件並記錄，僅不發送通知，便於感知變更期間是否產生異常，處理恢復後再放開屏蔽。',
   },
   tag: {
@@ -42,16 +61,33 @@ const zh_HK = {
 - \`!~\` 正則不匹配，填寫正則，匹配這個正則的標籤值都將被排除，類似 PromQL 中的 \`!~\``,
     },
   },
+  name_auto_tip: '標題會根據上面的篩選條件自動生成，可隨時修改',
+  name_auto_template: '屏蔽 {{scope}}',
+  name_auto_separator: '、',
+  name_auto_all_alerts: '全部告警',
+  summary: {
+    severities_all: '全部等級',
+    tags_none: '標籤不限',
+    tags_count: '{{count}} 個標籤條件',
+    periodic_count: '{{count}} 個時段',
+  },
   basic_configs: '基本信息',
+  basic_configs_desc: '規則標題與屏蔽原因，便於團隊協作和後續檢索',
   filter_configs: '篩選條件',
-  filter_configs_tip: '符合篩選條件的告警事件會命中屏蔽規則，進而被屏蔽。篩選條件本質就是對告警事件的篩選，通過事件的數據源、等級、標籤等信息進行篩選',
-  mute_configs: '屏蔽時長',
+  filter_configs_desc: '決定哪些告警事件會被屏蔽：業務組、數據源、事件等級、事件標籤，條件之間是「與」的關係，留空表示不限制',
+  mute_configs: '屏蔽設置',
+  mute_configs_desc: '決定什麼時候屏蔽、屏蔽到什麼程度：固定的一段時間，或每週重複的時段',
   alert_content: '為了防止誤配屏蔽規則屏蔽掉公司所有的告警，此屏蔽規則只會生效於特定業務組下的告警事件',
   preview_muted_title: '預覽相關事件',
+  preview_muted_desc: '以下是當前已存在、且符合本條篩選條件的告警事件。保存後新產生的同類事件會被屏蔽，已存在的事件不會自動消失，可在此一併刪除。',
   preview_muted_save_only: '僅保存',
   preview_muted_save_and_delete: '保存並刪除相關事件',
   expired: '已過期',
-  quick_mute: '快速屏蔽',
+  empty_guide: {
+    title: '還沒有屏蔽規則',
+    desc: '發版、維護、演練期間，用屏蔽規則臨時擋掉已知的告警，避免打擾值班同學；到期自動失效，不需要手動恢復。',
+    select_busi_group: '請先在左側選擇一個業務組',
+  },
   delete_mutes: {
     title: '屏蔽規則清理',
     alert_message: '一旦刪除將無法找回，請謹慎操作！',

From e301ff1ab2609be25221e1ddde87333d6318fc97 Mon Sep 17 00:00:00 2001
From: ning <710leo@gmail.com>
Date: Wed, 22 Jul 2026 12:27:24 +0800
Subject: [PATCH 2/3] =?UTF-8?q?fix(alert-mutes):=20=E5=91=A8=E6=9C=9F?=
 =?UTF-8?q?=E5=B1=8F=E8=94=BD=E5=BF=85=E5=A1=AB=E6=A0=A1=E9=AA=8C=E8=B7=9F?=
 =?UTF-8?q?=E9=9A=8F=E6=97=B6=E9=97=B4=E7=B1=BB=E5=9E=8B=EF=BC=8C=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3=E7=A9=BA=E6=80=81=E5=BC=95=E5=AF=BC=E6=96=87=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 固定时间模式下周期屏蔽区块被隐藏，其 required 校验也随之关闭，
  避免用户切到周期模式加了空行再切回固定时间后，保存被隐藏字段拦住且看不到错误
- 「全部业务组」或非叶子节点下的空态提示改为指向具体业务组，五种语言同步
---
 src/pages/warning/shield/components/operateForm.tsx | 7 ++++---
 src/pages/warning/shield/locale/en_US.ts            | 2 +-
 src/pages/warning/shield/locale/ja_JP.ts            | 2 +-
 src/pages/warning/shield/locale/ru_RU.ts            | 2 +-
 src/pages/warning/shield/locale/zh_CN.ts            | 2 +-
 src/pages/warning/shield/locale/zh_HK.ts            | 2 +-
 6 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/pages/warning/shield/components/operateForm.tsx b/src/pages/warning/shield/components/operateForm.tsx
index 2896650d5..5796f3925 100644
--- a/src/pages/warning/shield/components/operateForm.tsx
+++ b/src/pages/warning/shield/components/operateForm.tsx
@@ -431,6 +431,7 @@ const OperateForm: React.FC<Props> = ({ detail = {}, type }: any) => {
               {isExpired && <Alert className='mt-3' type='warning' showIcon message={t('expired_tip')} />}
               {isLongDuration && <Alert className='mt-3' type='info' showIcon message={t('long_duration_tip', { days: LONG_DURATION_DAYS })} />}
             </div>
+            {/* 固定时间模式下本区块被隐藏，必填校验也要一起关掉，否则残留的空行会拦住保存且错误不可见 */}
             <div style={{ display: muteTimeType === 1 ? 'block' : 'none' }}>
               <Form.List name='periodic_mutes'>
                 {(fields, { add, remove }) => (
@@ -474,7 +475,7 @@ const OperateForm: React.FC<Props> = ({ detail = {}, type }: any) => {
                           style={{ width: 450 }}
                           rules={[
                             {
-                              required: true,
+                              required: muteTimeType === 1,
                               message: t('mute_type.days_of_week_msg'),
                             },
                           ]}
@@ -487,7 +488,7 @@ const OperateForm: React.FC<Props> = ({ detail = {}, type }: any) => {
                           style={{ width: 110 }}
                           rules={[
                             {
-                              required: true,
+                              required: muteTimeType === 1,
                               message: t('mute_type.start_msg'),
                             },
                           ]}
@@ -500,7 +501,7 @@ const OperateForm: React.FC<Props> = ({ detail = {}, type }: any) => {
                           style={{ width: 110 }}
                           rules={[
                             {
-                              required: true,
+                              required: muteTimeType === 1,
                               message: t('mute_type.end_msg'),
                             },
                           ]}
diff --git a/src/pages/warning/shield/locale/en_US.ts b/src/pages/warning/shield/locale/en_US.ts
index 227573781..c10059ce2 100644
--- a/src/pages/warning/shield/locale/en_US.ts
+++ b/src/pages/warning/shield/locale/en_US.ts
@@ -89,7 +89,7 @@ const en_US = {
   empty_guide: {
     title: 'No mute rule yet',
     desc: 'During releases, maintenance or drills, a mute rule temporarily silences alerts you already know about, so the on-call is not disturbed. It expires on its own, no manual cleanup needed.',
-    select_busi_group: 'Select a business group on the left first',
+    select_busi_group: 'Pick a specific business group on the left to create a mute rule',
   },
   delete_mutes: {
     title: 'Mute Rule Cleanup',
diff --git a/src/pages/warning/shield/locale/ja_JP.ts b/src/pages/warning/shield/locale/ja_JP.ts
index e4454de01..eec224e1b 100644
--- a/src/pages/warning/shield/locale/ja_JP.ts
+++ b/src/pages/warning/shield/locale/ja_JP.ts
@@ -87,7 +87,7 @@ const ja_JP = {
   empty_guide: {
     title: 'スクリーンルールがまだありません',
     desc: 'リリースやメンテナンス、訓練の期間中、既知のアラートをスクリーンルールで一時的に抑制し、当番者への通知を防ぎます。期限が切れると自動的に失効するため、手動で戻す必要はありません。',
-    select_busi_group: '先に左側でビジネスグループを選択してください',
+    select_busi_group: '左側で具体的なビジネスグループを選択すると、スクリーンルールを作成できます',
   },
   delete_mutes: {
     title: 'スクリーンルールクリーンアップ',
diff --git a/src/pages/warning/shield/locale/ru_RU.ts b/src/pages/warning/shield/locale/ru_RU.ts
index 8200c40c0..88fd1130f 100644
--- a/src/pages/warning/shield/locale/ru_RU.ts
+++ b/src/pages/warning/shield/locale/ru_RU.ts
@@ -91,7 +91,7 @@ const ru_RU = {
   empty_guide: {
     title: 'Правил блокировки пока нет',
     desc: 'Во время релизов, обслуживания или учений правило блокировки временно скрывает уже известные оповещения, чтобы не беспокоить дежурного. По истечении срока оно перестаёт действовать само, вручную ничего возвращать не нужно.',
-    select_busi_group: 'Сначала выберите бизнес-группу слева',
+    select_busi_group: 'Выберите слева конкретную бизнес-группу, чтобы создать правило блокировки',
   },
   delete_mutes: {
     title: 'Очистка правил блокировки',
diff --git a/src/pages/warning/shield/locale/zh_CN.ts b/src/pages/warning/shield/locale/zh_CN.ts
index 33188895c..fb967708b 100644
--- a/src/pages/warning/shield/locale/zh_CN.ts
+++ b/src/pages/warning/shield/locale/zh_CN.ts
@@ -86,7 +86,7 @@ const zh_CN = {
   empty_guide: {
     title: '还没有屏蔽规则',
     desc: '发版、维护、演练期间，用屏蔽规则临时挡掉已知的告警，避免打扰值班同学；到期自动失效，不需要手动恢复。',
-    select_busi_group: '请先在左侧选择一个业务组',
+    select_busi_group: '请先在左侧选择一个具体的业务组，才能新建屏蔽规则',
   },
   delete_mutes: {
     title: '屏蔽规则清理',
diff --git a/src/pages/warning/shield/locale/zh_HK.ts b/src/pages/warning/shield/locale/zh_HK.ts
index ae683f2af..b9e1e9bd7 100644
--- a/src/pages/warning/shield/locale/zh_HK.ts
+++ b/src/pages/warning/shield/locale/zh_HK.ts
@@ -86,7 +86,7 @@ const zh_HK = {
   empty_guide: {
     title: '還沒有屏蔽規則',
     desc: '發版、維護、演練期間，用屏蔽規則臨時擋掉已知的告警，避免打擾值班同學；到期自動失效，不需要手動恢復。',
-    select_busi_group: '請先在左側選擇一個業務組',
+    select_busi_group: '請先在左側選擇一個具體的業務組，才能新建屏蔽規則',
   },
   delete_mutes: {
     title: '屏蔽規則清理',

From 2bb0dcdafbb660cf31bb8626133ad0ad45ef71c2 Mon Sep 17 00:00:00 2001
From: ning <710leo@gmail.com>
Date: Wed, 22 Jul 2026 13:37:24 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fix(alert-mutes):=20=E7=BA=A7=E5=88=AB?=
 =?UTF-8?q?=E6=94=B6=E7=AA=84=E7=AE=97=E4=BD=9C=E7=AD=9B=E9=80=89=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E8=A1=A5=E9=BD=90=20validateFields=20?=
 =?UTF-8?q?=E7=9A=84=20rejection=20=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 事件等级未全选也算一种筛选，与订阅规则口径一致，
  避免只收敛级别时仍提示「将屏蔽所有告警事件」
- 起止时间联动的 validateFields(['etime']) 与预览保存回调补上 catch，
  避免校验失败时控制台出现 Uncaught (in promise) 报错
---
 .../warning/shield/components/operateForm.tsx | 29 ++++++++++++-------
 .../shield/components/utils.summary.test.ts   |  9 ++++++
 src/pages/warning/shield/components/utils.ts  |  8 +++--
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/src/pages/warning/shield/components/operateForm.tsx b/src/pages/warning/shield/components/operateForm.tsx
index 5796f3925..ff78948c1 100644
--- a/src/pages/warning/shield/components/operateForm.tsx
+++ b/src/pages/warning/shield/components/operateForm.tsx
@@ -145,7 +145,7 @@ const OperateForm: React.FC<Props> = ({ detail = {}, type }: any) => {
     lastAutoNameRef.current = suggestion;
   }, [cateLabel, JSON.stringify(datasourceNames), JSON.stringify(severities), JSON.stringify(tags)]);
 
-  const scopeUnlimited = isMuteScopeUnlimited({ tags, datasource_ids: datasourceIds });
+  const scopeUnlimited = isMuteScopeUnlimited({ tags, datasource_ids: datasourceIds, severities });
   const durationText = formatDuration(btime, etime);
   const isExpired = muteTimeType === 0 && etime && moment(etime).isBefore(moment());
   const isLongDuration = muteTimeType === 0 && btime && etime && moment(etime).diff(moment(btime), 'days') >= LONG_DURATION_DAYS;
@@ -194,6 +194,11 @@ const OperateForm: React.FC<Props> = ({ detail = {}, type }: any) => {
     }
   };
 
+  // 起止时间联动后复校验结束时间；校验失败的提示由表单展示，吞掉 rejection 避免控制台 Uncaught 报错
+  const revalidateEtime = () => {
+    form.validateFields(['etime']).catch(() => {});
+  };
+
   // 点击快捷时长：保留用户已设置的开始时间，只推算结束时间
   const quickDurationChange = (val: string) => {
     const { unit, num } = parseDuration(val);
@@ -202,7 +207,7 @@ const OperateForm: React.FC<Props> = ({ detail = {}, type }: any) => {
       btime: moment(start),
       etime: moment(start).add({ [unit]: num }),
     });
-    form.validateFields(['etime']);
+    revalidateEtime();
   };
 
   // 校验失败时展开包含错误项的分区，否则被 display:none 隐藏的错误项滚动不可见，保存表现为"没反应"
@@ -392,12 +397,7 @@ const OperateForm: React.FC<Props> = ({ detail = {}, type }: any) => {
                 <Col span={12}>
                   {/* 开始时间变化后同步复校验结束时间，避免残留的先后关系报错 */}
                   <Form.Item label={t('btime')} name='btime' rules={[{ required: muteTimeType !== 1, message: t('btime_msg') }]}>
-                    <DatePicker
-                      showTime
-                      onChange={() => {
-                        form.validateFields(['etime']);
-                      }}
-                    />
+                    <DatePicker showTime onChange={revalidateEtime} />
                   </Form.Item>
                 </Col>
                 <Col span={12}>
@@ -549,9 +549,16 @@ const OperateForm: React.FC<Props> = ({ detail = {}, type }: any) => {
                 form={form}
                 validateFields={validateFields}
                 onOk={() => {
-                  validateFields().then((values: any) => {
-                    onFinish(values);
-                  });
+                  validateFields()
+                    .then((values: any) => {
+                      onFinish(values);
+                    })
+                    .catch((err) => {
+                      // 校验失败已由 validateFields 内部展开出错分区并滚动定位，这里只兜底非预期异常
+                      if (!err?.errorFields) {
+                        console.error(err);
+                      }
+                    });
                 }}
               />
               <AlertEventRuleTesterWithButton
diff --git a/src/pages/warning/shield/components/utils.summary.test.ts b/src/pages/warning/shield/components/utils.summary.test.ts
index c57d508e5..3c1162458 100644
--- a/src/pages/warning/shield/components/utils.summary.test.ts
+++ b/src/pages/warning/shield/components/utils.summary.test.ts
@@ -51,6 +51,15 @@ describe('isMuteScopeUnlimited', () => {
     expect(isMuteScopeUnlimited({ tags: [{ key: 'ident', func: '==', value: 'host01' }] })).toBe(false);
     expect(isMuteScopeUnlimited({ datasource_ids: [1] })).toBe(false);
   });
+
+  it('事件等级未全选时算作筛选条件，不再提示', () => {
+    expect(isMuteScopeUnlimited({ severities: [1] })).toBe(false);
+    expect(isMuteScopeUnlimited({ severities: [1, 2] })).toBe(false);
+  });
+
+  it('事件等级全选（默认值）不算筛选条件', () => {
+    expect(isMuteScopeUnlimited({ severities: [1, 2, 3] })).toBe(true);
+  });
 });
 
 describe('buildMuteScopeText', () => {
diff --git a/src/pages/warning/shield/components/utils.ts b/src/pages/warning/shield/components/utils.ts
index de7d341ce..53c1251d9 100644
--- a/src/pages/warning/shield/components/utils.ts
+++ b/src/pages/warning/shield/components/utils.ts
@@ -45,13 +45,15 @@ export const formatSeverities = (severities?: number[]): string => {
 };
 
 /**
- * 筛选条件是否完全没有限制（没有标签条件，且数据源不限或选了 $all）
+ * 筛选条件是否完全没有限制（没有标签条件，数据源不限或选了 $all，且事件等级全选）
  * 这种规则会屏蔽业务组下的所有告警，需要给出风险提示
  */
-export const isMuteScopeUnlimited = (values?: { tags?: MuteTagItem[]; datasource_ids?: number[] }): boolean => {
+export const isMuteScopeUnlimited = (values?: { tags?: MuteTagItem[]; datasource_ids?: number[]; severities?: number[] }): boolean => {
   const hasTags = _.some(values?.tags, (tag) => !!tag?.key);
   const hasDatasource = !_.isEmpty(values?.datasource_ids) && !_.includes(values?.datasource_ids, 0);
-  return !hasTags && !hasDatasource;
+  // 级别未全选也是一种筛选，全选（默认值）时才算没收敛
+  const hasSeverityFilter = !_.isEmpty(values?.severities) && _.size(values?.severities) < 3;
+  return !hasTags && !hasDatasource && !hasSeverityFilter;
 };
 
 /**