diff --git a/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx b/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx
index 1bd71cdc0..917eb0526 100644
--- a/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx
+++ b/webapp/packages/supersonic-fe/src/components/MDatePicker/DynamicDate.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect } from 'react';
+import React, { useRef, forwardRef, useImperativeHandle, useState, useEffect } from 'react';
+import type { Ref, ReactNode } from 'react';
 import type { RadioChangeEvent } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
 import { objToList } from '@/utils/utils';
@@ -44,8 +45,7 @@ const { Option } = Select;
 
 type Props = {
   initialValues?: any;
-  submitFormDataState?: boolean;
-  dateRangeTypeProps?: DateRangeType;
+  dateRangeTypeProps: DateRangeType;
   onDateRangeChange: (value: string[], config: any) => void;
   onAdvanceSettingCollapsedChange?: (collapse: boolean) => void;
   onShortCutClick?: (shortCutId: string) => void;
@@ -59,489 +59,506 @@ type Props = {
   disabledAdvanceSetting?: boolean;
 };
 
-const DynamicDate: React.FC<Props> = ({
-  initialValues,
-  dateRangeTypeProps,
-  submitFormDataState,
-  onDateRangeChange,
-  onAdvanceSettingCollapsedChange,
-  onShortCutClick,
-  onDateRangeStringAndDescChange,
-  disabledAdvanceSetting = false,
-}: any) => {
-  const initAdvacedConfigPanelCollapsed = () => {
-    return !initialValues?.dateSettingType || initialValues?.shortCutId ? [] : ['1'];
-  };
-  const [advancedPanelFormResetState, setAdvancedPanelFormResetState] =
-    useState(dateRangeTypeProps);
-
-  useEffect(() => {
-    // 当时间粒度发生变化时重置高级设置面板
-    resetAdvancedPanelForm(dateRangeTypeProps);
-  }, [dateRangeTypeProps]);
-
-  useEffect(() => {
-    if (initialValues?.dateSettingType !== DateSettingType.DYNAMIC) {
-      return;
-    }
-    initShortCutByDateRangeChange(dateRangeTypeProps);
-  }, [advancedPanelFormResetState]);
-
-  const resetAdvancedPanelForm = (dateRangeType: DateRangeType) => {
-    const lastConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.LAST];
-    const historyConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.HISTORY];
-    switch (dateRangeType) {
-      case DateRangeType.DAY:
-        setAdvancedPanelFormData({
-          ...advancedPanelFormData,
-          [DynamicAdvancedConfigType.LAST]: {
-            ...lastConfigTypeFormData,
-            periodType: DatePeriodType.DAY,
-          },
-          [DynamicAdvancedConfigType.HISTORY]: {
-            ...historyConfigTypeFormData,
-            periodType: DatePeriodType.DAY,
-          },
-        });
-        break;
-      case DateRangeType.WEEK:
-        setAdvancedPanelFormData({
-          ...advancedPanelFormData,
-          [DynamicAdvancedConfigType.LAST]: {
-            ...lastConfigTypeFormData,
-            periodType: DatePeriodType.WEEK,
-          },
-          [DynamicAdvancedConfigType.HISTORY]: {
-            ...historyConfigTypeFormData,
-            periodType: DatePeriodType.WEEK,
-          },
-        });
-        break;
-      case DateRangeType.MONTH:
-        setAdvancedPanelFormData({
-          ...advancedPanelFormData,
-          [DynamicAdvancedConfigType.LAST]: {
-            ...lastConfigTypeFormData,
-            periodType: DatePeriodType.MONTH,
-          },
-          [DynamicAdvancedConfigType.HISTORY]: {
-            ...historyConfigTypeFormData,
-            periodType: DatePeriodType.MONTH,
-          },
-        });
-        break;
-      default:
-        break;
-    }
-    setAdvancedPanelFormResetState(dateRangeType);
-    setAdvacedConfigPanelCollapsed([]);
-  };
-
-  const initAdvancedConfigType = () => {
-    return initialValues?.dynamicAdvancedConfigType;
-  };
-  const initAdvancedPanelFormData = () => {
-    let defaultConfig = {
-      [DynamicAdvancedConfigType.LAST]: {
-        number: 1,
-        periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
-        includesCurrentPeriod: false,
-      },
-      [DynamicAdvancedConfigType.HISTORY]: {
-        number: 1,
-        periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
-      },
-      [DynamicAdvancedConfigType.FROM_DATE_PERIOD]: {
-        perPeriodType: PerDatePeriodType.PERDAY,
-      },
-      [DynamicAdvancedConfigType.FROM_DATE]: { date: dayjs() },
-    };
-    if (advancedPanelFormData) {
-      defaultConfig = { ...advancedPanelFormData };
-    }
-    if (initialValues?.dynamicAdvancedConfigType) {
-      const { dynamicAdvancedConfigType } = initialValues;
-      const targetConfig = defaultConfig[dynamicAdvancedConfigType];
-      if (!targetConfig) {
-        return defaultConfig;
-      }
-      const mergeConfig = Object.keys(targetConfig).reduce((result, key) => {
-        return {
-          ...result,
-          [key]: initialValues[key],
-        };
-      }, {});
-      defaultConfig[dynamicAdvancedConfigType] = mergeConfig;
-    }
-    return defaultConfig;
-  };
-  const initShortCutSettingChecked = () => {
-    return initialValues?.shortCutId || '';
-  };
-  const [advacedConfigPanelCollapsed, setAdvacedConfigPanelCollapsed] = useState<string | string[]>(
-    initAdvacedConfigPanelCollapsed(),
-  );
-  const [advancedConfigType, setAdvancedConfigType] = useState<
-    DynamicAdvancedConfigType | undefined
-  >(initAdvancedConfigType());
-  const [advancedPanelFormData, setAdvancedPanelFormData] = useState<any>(
-    initAdvancedPanelFormData(),
-  );
-  const [shortCutSettingChecked, setShortCutSettingChecked] = useState<string>(
-    initShortCutSettingChecked(),
-  );
-
-  useEffect(() => {
-    // 外部状态触发表单数据提交
-    if (submitFormDataState && advancedConfigType) {
-      updateAdvancedPanelFormData(
-        advancedPanelFormData[advancedConfigType],
-        advancedConfigType,
-        true,
-      );
-    }
-  }, [submitFormDataState]);
-
-  const init = () => {
-    setAdvacedConfigPanelCollapsed(initAdvacedConfigPanelCollapsed());
-    setAdvancedConfigType(initAdvancedConfigType());
-    setAdvancedPanelFormData(initAdvancedPanelFormData());
-    setShortCutSettingChecked(initShortCutSettingChecked());
-  };
-
-  useEffect(() => {
-    if (initialValues?.dateSettingType === DateSettingType.DYNAMIC) {
-      init();
-    }
-  }, [initialValues]);
-
-  const handleDateRangeChange = (dateRange: string[], config: any) => {
-    onDateRangeChange(dateRange, {
-      ...config,
-      dateSettingType: DateSettingType.DYNAMIC,
-    });
-  };
-
-  const updateAdvancedPanelFormData = (
-    formData: any,
-    configType: DynamicAdvancedConfigType,
-    emitImmediately = false,
+const DynamicDate: React.FC<Props> = forwardRef(
+  (
+    {
+      initialValues,
+      dateRangeTypeProps,
+      onDateRangeChange,
+      onAdvanceSettingCollapsedChange,
+      onShortCutClick,
+      onDateRangeStringAndDescChange,
+      disabledAdvanceSetting = false,
+    }: Props,
+    ref: Ref<any>,
   ) => {
-    const mergeConfigTypeData = {
-      ...advancedPanelFormData[configType],
-      ...formData,
-      // shortCutId: shortCutSettingChecked,
-      dateRangeType: dateRangeTypeProps,
-      dynamicAdvancedConfigType: configType,
+    useImperativeHandle(ref, () => ({
+      dynamicDateUpdateAdvancedPanelFormData: () => {
+        // return [...dataSource];
+        if (advancedConfigType) {
+          updateAdvancedPanelFormData(
+            advancedPanelFormData[advancedConfigType],
+            advancedConfigType,
+            true,
+          );
+        }
+      },
+    }));
+
+    const initAdvacedConfigPanelCollapsed = () => {
+      return !initialValues?.dateSettingType || initialValues?.shortCutId ? [] : ['1'];
     };
-    const { dateRangeString, dateRangeStringDesc } = getDynamicDateRangeStringByParams(
-      mergeConfigTypeData,
-      configType,
-      { maxPartition: dayjs().format('YYYY-MM-DD') },
+    const [advancedPanelFormResetState, setAdvancedPanelFormResetState] =
+      useState(dateRangeTypeProps);
+
+    useEffect(() => {
+      // 当时间粒度发生变化时重置高级设置面板
+      resetAdvancedPanelForm(dateRangeTypeProps);
+    }, [dateRangeTypeProps]);
+
+    useEffect(() => {
+      if (initialValues?.dateSettingType !== DateSettingType.DYNAMIC) {
+        return;
+      }
+      initShortCutByDateRangeChange(dateRangeTypeProps);
+    }, [advancedPanelFormResetState]);
+
+    const resetAdvancedPanelForm = (dateRangeType: DateRangeType) => {
+      const lastConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.LAST];
+      const historyConfigTypeFormData = advancedPanelFormData[DynamicAdvancedConfigType.HISTORY];
+      switch (dateRangeType) {
+        case DateRangeType.DAY:
+          setAdvancedPanelFormData({
+            ...advancedPanelFormData,
+            [DynamicAdvancedConfigType.LAST]: {
+              ...lastConfigTypeFormData,
+              periodType: DatePeriodType.DAY,
+            },
+            [DynamicAdvancedConfigType.HISTORY]: {
+              ...historyConfigTypeFormData,
+              periodType: DatePeriodType.DAY,
+            },
+          });
+          break;
+        case DateRangeType.WEEK:
+          setAdvancedPanelFormData({
+            ...advancedPanelFormData,
+            [DynamicAdvancedConfigType.LAST]: {
+              ...lastConfigTypeFormData,
+              periodType: DatePeriodType.WEEK,
+            },
+            [DynamicAdvancedConfigType.HISTORY]: {
+              ...historyConfigTypeFormData,
+              periodType: DatePeriodType.WEEK,
+            },
+          });
+          break;
+        case DateRangeType.MONTH:
+          setAdvancedPanelFormData({
+            ...advancedPanelFormData,
+            [DynamicAdvancedConfigType.LAST]: {
+              ...lastConfigTypeFormData,
+              periodType: DatePeriodType.MONTH,
+            },
+            [DynamicAdvancedConfigType.HISTORY]: {
+              ...historyConfigTypeFormData,
+              periodType: DatePeriodType.MONTH,
+            },
+          });
+          break;
+        default:
+          break;
+      }
+      setAdvancedPanelFormResetState(dateRangeType);
+      setAdvacedConfigPanelCollapsed([]);
+    };
+
+    const initAdvancedConfigType = () => {
+      return initialValues?.dynamicAdvancedConfigType;
+    };
+    const initAdvancedPanelFormData = () => {
+      let defaultConfig = {
+        [DynamicAdvancedConfigType.LAST]: {
+          number: 1,
+          periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
+          includesCurrentPeriod: false,
+        },
+        [DynamicAdvancedConfigType.HISTORY]: {
+          number: 1,
+          periodType: dateRangeTypeExchangeDatePeriodTypeMap[dateRangeTypeProps],
+        },
+        [DynamicAdvancedConfigType.FROM_DATE_PERIOD]: {
+          perPeriodType: PerDatePeriodType.PERDAY,
+        },
+        [DynamicAdvancedConfigType.FROM_DATE]: { date: dayjs() },
+      };
+      if (advancedPanelFormData) {
+        defaultConfig = { ...advancedPanelFormData };
+      }
+      if (initialValues?.dynamicAdvancedConfigType) {
+        const { dynamicAdvancedConfigType } = initialValues;
+        const targetConfig = defaultConfig[dynamicAdvancedConfigType];
+        if (!targetConfig) {
+          return defaultConfig;
+        }
+        const mergeConfig = Object.keys(targetConfig).reduce((result, key) => {
+          return {
+            ...result,
+            [key]: initialValues[key],
+          };
+        }, {});
+        defaultConfig[dynamicAdvancedConfigType] = mergeConfig;
+      }
+      return defaultConfig;
+    };
+    const initShortCutSettingChecked = () => {
+      return initialValues?.shortCutId || '';
+    };
+    const [advacedConfigPanelCollapsed, setAdvacedConfigPanelCollapsed] = useState<
+      string | string[]
+    >(initAdvacedConfigPanelCollapsed());
+    const [advancedConfigType, setAdvancedConfigType] = useState<
+      DynamicAdvancedConfigType | undefined
+    >(initAdvancedConfigType());
+    const [advancedPanelFormData, setAdvancedPanelFormData] = useState<any>(
+      initAdvancedPanelFormData(),
+    );
+    const [shortCutSettingChecked, setShortCutSettingChecked] = useState<string>(
+      initShortCutSettingChecked(),
     );
-    mergeConfigTypeData.dateRangeStringDesc = dateRangeStringDesc;
-    onDateRangeStringAndDescChange?.({ dateRangeString, dateRangeStringDesc });
-    if (emitImmediately) {
-      handleDateRangeChange(dateRangeString, mergeConfigTypeData);
-    }
-    setAdvancedPanelFormData({
-      ...advancedPanelFormData,
-      [configType]: mergeConfigTypeData,
-    });
-  };
 
-  // 根据当前时间粒度判断高级设置中时间区间选项哪些可用
-  const isDisabledDatePeriodTypeOption = (
-    datePeriodType: DatePeriodType,
-    dateRangeType: DateRangeType,
-  ) => {
-    switch (datePeriodType) {
-      case DatePeriodType.DAY:
-        return ![DateRangeType.DAY].includes(dateRangeType);
-      case DatePeriodType.WEEK:
-        return ![DateRangeType.DAY, DateRangeType.WEEK].includes(dateRangeType);
-      case DatePeriodType.MONTH:
-        return false;
-      case DatePeriodType.YEAR:
-        return false;
-      default:
-        return false;
-    }
-  };
+    const init = () => {
+      setAdvacedConfigPanelCollapsed(initAdvacedConfigPanelCollapsed());
+      setAdvancedConfigType(initAdvancedConfigType());
+      setAdvancedPanelFormData(initAdvancedPanelFormData());
+      setShortCutSettingChecked(initShortCutSettingChecked());
+    };
 
-  const getDatePeriodTypeOptions = (dateRangeType: DateRangeType) => {
-    const list = objToList(datePeriodTypeMap);
-    const optionList = list.reduce((result: any[], { value, label }: any) => {
-      const isDisabled = isDisabledDatePeriodTypeOption(value, dateRangeType);
-      if (isDisabled) {
-        return result;
+    useEffect(() => {
+      if (initialValues?.dateSettingType === DateSettingType.DYNAMIC) {
+        init();
       }
-      result.push(
-        <Option value={value} key={value}>
-          {label}
-        </Option>,
+    }, [initialValues]);
+
+    const handleDateRangeChange = (dateRange: string[], config: any) => {
+      onDateRangeChange(dateRange, {
+        ...config,
+        dateSettingType: DateSettingType.DYNAMIC,
+      });
+    };
+
+    const updateAdvancedPanelFormData = (
+      formData: any,
+      configType: DynamicAdvancedConfigType,
+      emitImmediately = false,
+    ) => {
+      const mergeConfigTypeData = {
+        ...advancedPanelFormData[configType],
+        ...formData,
+        // shortCutId: shortCutSettingChecked,
+        dateRangeType: dateRangeTypeProps,
+        dynamicAdvancedConfigType: configType,
+      };
+      const { dateRangeString, dateRangeStringDesc } = getDynamicDateRangeStringByParams(
+        mergeConfigTypeData,
+        configType,
+        { maxPartition: dayjs().format('YYYY-MM-DD') },
       );
-      return result;
-    }, []);
-    return optionList;
-  };
+      mergeConfigTypeData.dateRangeStringDesc = dateRangeStringDesc;
+      onDateRangeStringAndDescChange?.({ dateRangeString, dateRangeStringDesc });
+      if (emitImmediately) {
+        handleDateRangeChange(dateRangeString, mergeConfigTypeData);
+      }
+      setAdvancedPanelFormData({
+        ...advancedPanelFormData,
+        [configType]: mergeConfigTypeData,
+      });
+    };
 
-  const isAdvancedConfigTypeRadioDisabled = (type: DynamicAdvancedConfigType) => {
-    return type !== advancedConfigType;
-  };
+    // 根据当前时间粒度判断高级设置中时间区间选项哪些可用
+    const isDisabledDatePeriodTypeOption = (
+      datePeriodType: DatePeriodType,
+      dateRangeType: DateRangeType,
+    ) => {
+      switch (datePeriodType) {
+        case DatePeriodType.DAY:
+          return ![DateRangeType.DAY].includes(dateRangeType);
+        case DatePeriodType.WEEK:
+          return ![DateRangeType.DAY, DateRangeType.WEEK].includes(dateRangeType);
+        case DatePeriodType.MONTH:
+          return false;
+        case DatePeriodType.YEAR:
+          return false;
+        default:
+          return false;
+      }
+    };
 
-  const initShortCutByDateRangeChange = (dateRangeType: DateRangeType, emitImmediately = false) => {
-    const shortCutList = SHORT_CUT_ITEM_LIST.filter((item) => {
-      return item.dateRangeType === dateRangeType;
-    });
-    const firstItem = shortCutList[0];
-    if (firstItem) {
-      handleShortCutChange(firstItem, emitImmediately);
-    }
-  };
+    const getDatePeriodTypeOptions = (dateRangeType: DateRangeType) => {
+      const list = objToList(datePeriodTypeMap);
+      const optionList = list.reduce((result: any[], { value, label }: any) => {
+        const isDisabled = isDisabledDatePeriodTypeOption(value, dateRangeType);
+        if (isDisabled) {
+          return result;
+        }
+        result.push(
+          <Option value={value} key={value}>
+            {label}
+          </Option>,
+        );
+        return result;
+      }, []);
+      return optionList;
+    };
 
-  const handleShortCutChange = (item: any, emitImmediately = true) => {
-    const { id, advancedConfigType, initData } = item;
-    // 设置选中状态
-    setShortCutSettingChecked(id);
-    // 设置快捷选项AdvancedConfigType类型
-    setAdvancedConfigType(advancedConfigType);
-    // 更新数据至表单数据并立即向上层组件传递
-    updateAdvancedPanelFormData(initData, advancedConfigType, emitImmediately);
-    if (emitImmediately) {
-      // 触发快捷选项点击时间，上层组件关闭配置浮窗
-      onShortCutClick?.(id);
-    }
-  };
+    const isAdvancedConfigTypeRadioDisabled = (type: DynamicAdvancedConfigType) => {
+      return type !== advancedConfigType;
+    };
 
-  const handleAdvancedPanelFormChange = () => {
-    // 当高级面板表单发生变化时，重置快捷选项为空
-    setShortCutSettingChecked('');
-  };
+    const initShortCutByDateRangeChange = (
+      dateRangeType: DateRangeType,
+      emitImmediately = false,
+    ) => {
+      const shortCutList = SHORT_CUT_ITEM_LIST.filter((item) => {
+        return item.dateRangeType === dateRangeType;
+      });
+      const firstItem = shortCutList[0];
+      if (firstItem) {
+        handleShortCutChange(firstItem, emitImmediately);
+      }
+    };
 
-  return (
-    <>
-      <div className={styles.dateShortCutSettingContent}>
-        <Row>
-          {SHORT_CUT_ITEM_LIST.map((item) => {
-            const { id, text, dateRangeType } = item;
-            if (dateRangeType === dateRangeTypeProps) {
-              return (
-                <Col key={`row-col-${id}`}>
-                  <CheckableTag
-                    className={styles['ant-tag-checkable']}
-                    checked={shortCutSettingChecked === id}
-                    key={`row-col-tag-${id}`}
-                    onChange={() => {
-                      handleShortCutChange(item);
-                    }}
-                  >
-                    <div className={styles['tag-value-box']}>{text}</div>
-                  </CheckableTag>
-                </Col>
-              );
-            }
-            return undefined;
-          })}
-        </Row>
-      </div>
-      {!disabledAdvanceSetting && (
-        <div className={styles.dateAdvancedSettingContent}>
-          <Collapse
-            // defaultActiveKey={['1']}
-            activeKey={advacedConfigPanelCollapsed}
-            onChange={(key: string | string[]) => {
-              setAdvacedConfigPanelCollapsed(key);
-              if (key.length === 0) {
-                onAdvanceSettingCollapsedChange?.(false);
-                return;
+    const handleShortCutChange = (item: any, emitImmediately = true) => {
+      const { id, advancedConfigType, initData } = item;
+      // 设置选中状态
+      setShortCutSettingChecked(id);
+      // 设置快捷选项AdvancedConfigType类型
+      setAdvancedConfigType(advancedConfigType);
+      // 更新数据至表单数据并立即向上层组件传递
+      updateAdvancedPanelFormData(initData, advancedConfigType, emitImmediately);
+      if (emitImmediately) {
+        // 触发快捷选项点击时间，上层组件关闭配置浮窗
+        onShortCutClick?.(id);
+      }
+    };
+
+    const handleAdvancedPanelFormChange = () => {
+      // 当高级面板表单发生变化时，重置快捷选项为空
+      setShortCutSettingChecked('');
+    };
+
+    return (
+      <>
+        <div className={styles.dateShortCutSettingContent}>
+          <Row>
+            {SHORT_CUT_ITEM_LIST.map((item) => {
+              const { id, text, dateRangeType } = item;
+              if (dateRangeType === dateRangeTypeProps) {
+                return (
+                  <Col key={`row-col-${id}`}>
+                    <CheckableTag
+                      className={styles['ant-tag-checkable']}
+                      checked={shortCutSettingChecked === id}
+                      key={`row-col-tag-${id}`}
+                      onChange={() => {
+                        handleShortCutChange(item);
+                      }}
+                    >
+                      <div className={styles['tag-value-box']}>{text}</div>
+                    </CheckableTag>
+                  </Col>
+                );
               }
-              onAdvanceSettingCollapsedChange?.(true);
-            }}
-            bordered={false}
-            ghost={true}
-            expandIconPosition="right"
-          >
-            <Panel
-              header=""
-              // collapsible={'disabled'}
-              key="1"
-              extra={
-                <Space>
-                  <Link>高级设置</Link>
-                </Space>
-              }
-            >
-              <div>
-                <Space>
-                  <div style={{ color: 'rgba(0, 0, 0, 0.85)' }}>动态时间</div>
-                  <Tooltip
-                    title={`日期随着时间推移而更新。 若在1月1日设置查询日期为“今天”， 则第二天的查询日期为1月2日。`}
-                  >
-                    <QuestionCircleOutlined />
-                  </Tooltip>
-                </Space>
-              </div>
-              <Radio.Group
-                onChange={(e: RadioChangeEvent) => {
-                  const configType = e.target.value;
-                  setAdvancedConfigType(configType);
-                  updateAdvancedPanelFormData(advancedPanelFormData[configType], configType);
-                  handleAdvancedPanelFormChange();
-                }}
-                value={advancedConfigType}
-              >
-                <Space direction="vertical">
-                  <Radio value={DynamicAdvancedConfigType.LAST}>
-                    <Space size={10}>
-                      <span className={styles.advancedSettingItemText}>最近</span>
-                      <InputNumber
-                        style={{ width: 120 }}
-                        placeholder="请输入数字"
-                        min={1}
-                        disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
-                        value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].number}
-                        onChange={(value: number | null) => {
-                          updateAdvancedPanelFormData(
-                            { number: value },
-                            DynamicAdvancedConfigType.LAST,
-                          );
-                          handleAdvancedPanelFormChange();
-                        }}
-                      />
-                      <Select
-                        // defaultValue={DatePeriodType.DAY}
-                        style={{ width: 120 }}
-                        disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
-                        value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType}
-                        onClick={(e) => {
-                          // 禁止冒泡触发Radio点击后续逻辑
-                          e.preventDefault();
-                          e.stopPropagation();
-                        }}
-                        onChange={(value: string) => {
-                          updateAdvancedPanelFormData(
-                            { periodType: value },
-                            DynamicAdvancedConfigType.LAST,
-                          );
-                          handleAdvancedPanelFormChange();
-                        }}
-                      >
-                        {getDatePeriodTypeOptions(dateRangeTypeProps)}
-                      </Select>
-                      <Checkbox
-                        disabled={isAdvancedConfigTypeRadioDisabled(DynamicAdvancedConfigType.LAST)}
-                        checked={
-                          advancedPanelFormData[DynamicAdvancedConfigType.LAST]
-                            .includesCurrentPeriod
-                        }
-                        onChange={(e) => {
-                          const isChecked = e.target.checked;
-                          updateAdvancedPanelFormData(
-                            { includesCurrentPeriod: isChecked },
-                            DynamicAdvancedConfigType.LAST,
-                          );
-                          handleAdvancedPanelFormChange();
-                        }}
-                      >
-                        包含
-                        {
-                          datePeriodTypeWordingMap[
-                            advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType
-                          ]
-                        }
-                      </Checkbox>
-                    </Space>
-                  </Radio>
-                  <Radio value={DynamicAdvancedConfigType.HISTORY}>
-                    <Space size={10}>
-                      <span className={styles.advancedSettingItemText}>过去第</span>
-
-                      <InputNumber
-                        style={{ width: 120 }}
-                        placeholder="请输入数字"
-                        min={1}
-                        disabled={isAdvancedConfigTypeRadioDisabled(
-                          DynamicAdvancedConfigType.HISTORY,
-                        )}
-                        value={advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].number}
-                        // defaultValue={3}
-                        onChange={(value: number | null) => {
-                          updateAdvancedPanelFormData(
-                            { number: value },
-                            DynamicAdvancedConfigType.HISTORY,
-                          );
-                          handleAdvancedPanelFormChange();
-                        }}
-                      />
-                      <Select
-                        // defaultValue={DatePeriodType.DAY}
-                        style={{ width: 120 }}
-                        disabled={isAdvancedConfigTypeRadioDisabled(
-                          DynamicAdvancedConfigType.HISTORY,
-                        )}
-                        value={advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].periodType}
-                        onClick={(e) => {
-                          // 禁止冒泡触发Radio点击后续逻辑
-                          e.preventDefault();
-                          e.stopPropagation();
-                        }}
-                        onChange={(value: string) => {
-                          updateAdvancedPanelFormData(
-                            { periodType: value },
-                            DynamicAdvancedConfigType.HISTORY,
-                          );
-                          handleAdvancedPanelFormChange();
-                        }}
-                      >
-                        {getDatePeriodTypeOptions(dateRangeTypeProps)}
-                      </Select>
-                    </Space>
-                  </Radio>
-                  <Radio value={DynamicAdvancedConfigType.FROM_DATE}>
-                    <Space size={10}>
-                      <span className={styles.advancedSettingItemText}>自从</span>
-                      <DatePicker
-                        disabled={isAdvancedConfigTypeRadioDisabled(
-                          DynamicAdvancedConfigType.FROM_DATE,
-                        )}
-                        value={dayjs(
-                          advancedPanelFormData[DynamicAdvancedConfigType.FROM_DATE].date,
-                        )}
-                        disabledDate={(current) => {
-                          return current && current > dayjs().endOf('day');
-                        }}
-                        picker={DateRangeTypeToPickerMap[dateRangeTypeProps]}
-                        onChange={(date, dateString) => {
-                          if (!date) {
-                            return;
-                          }
-                          const picker = DateRangeTypeToPickerMap[dateRangeTypeProps];
-
-                          if (picker === DateRangePicker.WEEK) {
-                            date.startOf('week').format('YYYY-MM-DD');
-                          }
-                          if (picker === DateRangePicker.MONTH) {
-                            date.startOf('month').format('YYYY-MM-DD');
-                          }
-                          updateAdvancedPanelFormData(
-                            { date },
-                            DynamicAdvancedConfigType.FROM_DATE,
-                          );
-                          handleAdvancedPanelFormChange();
-                        }}
-                      />
-                      至此刻
-                    </Space>
-                  </Radio>
-                </Space>
-              </Radio.Group>
-            </Panel>
-          </Collapse>
+              return undefined;
+            })}
+          </Row>
         </div>
-      )}
-    </>
-  );
-};
+        {!disabledAdvanceSetting && (
+          <div className={styles.dateAdvancedSettingContent}>
+            <Collapse
+              // defaultActiveKey={['1']}
+              activeKey={advacedConfigPanelCollapsed}
+              onChange={(key: string | string[]) => {
+                setAdvacedConfigPanelCollapsed(key);
+                if (key.length === 0) {
+                  onAdvanceSettingCollapsedChange?.(false);
+                  return;
+                }
+                onAdvanceSettingCollapsedChange?.(true);
+              }}
+              bordered={false}
+              ghost={true}
+              expandIconPosition="right"
+            >
+              <Panel
+                header=""
+                // collapsible={'disabled'}
+                key="1"
+                extra={
+                  <Space>
+                    <Link>高级设置</Link>
+                  </Space>
+                }
+              >
+                <div>
+                  <Space>
+                    <div style={{ color: 'rgba(0, 0, 0, 0.85)' }}>动态时间</div>
+                    <Tooltip
+                      title={`日期随着时间推移而更新。 若在1月1日设置查询日期为“今天”， 则第二天的查询日期为1月2日。`}
+                    >
+                      <QuestionCircleOutlined />
+                    </Tooltip>
+                  </Space>
+                </div>
+                <Radio.Group
+                  onChange={(e: RadioChangeEvent) => {
+                    const configType = e.target.value;
+                    setAdvancedConfigType(configType);
+                    updateAdvancedPanelFormData(advancedPanelFormData[configType], configType);
+                    handleAdvancedPanelFormChange();
+                  }}
+                  value={advancedConfigType}
+                >
+                  <Space direction="vertical">
+                    <Radio value={DynamicAdvancedConfigType.LAST}>
+                      <Space size={10}>
+                        <span className={styles.advancedSettingItemText}>最近</span>
+                        <InputNumber
+                          style={{ width: 120 }}
+                          placeholder="请输入数字"
+                          min={1}
+                          disabled={isAdvancedConfigTypeRadioDisabled(
+                            DynamicAdvancedConfigType.LAST,
+                          )}
+                          value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].number}
+                          onChange={(value: number | null) => {
+                            updateAdvancedPanelFormData(
+                              { number: value },
+                              DynamicAdvancedConfigType.LAST,
+                            );
+                            handleAdvancedPanelFormChange();
+                          }}
+                        />
+                        <Select
+                          // defaultValue={DatePeriodType.DAY}
+                          style={{ width: 120 }}
+                          disabled={isAdvancedConfigTypeRadioDisabled(
+                            DynamicAdvancedConfigType.LAST,
+                          )}
+                          value={advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType}
+                          onClick={(e) => {
+                            // 禁止冒泡触发Radio点击后续逻辑
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }}
+                          onChange={(value: string) => {
+                            updateAdvancedPanelFormData(
+                              { periodType: value },
+                              DynamicAdvancedConfigType.LAST,
+                            );
+                            handleAdvancedPanelFormChange();
+                          }}
+                        >
+                          {getDatePeriodTypeOptions(dateRangeTypeProps)}
+                        </Select>
+                        <Checkbox
+                          disabled={isAdvancedConfigTypeRadioDisabled(
+                            DynamicAdvancedConfigType.LAST,
+                          )}
+                          checked={
+                            advancedPanelFormData[DynamicAdvancedConfigType.LAST]
+                              .includesCurrentPeriod
+                          }
+                          onChange={(e) => {
+                            const isChecked = e.target.checked;
+                            updateAdvancedPanelFormData(
+                              { includesCurrentPeriod: isChecked },
+                              DynamicAdvancedConfigType.LAST,
+                            );
+                            handleAdvancedPanelFormChange();
+                          }}
+                        >
+                          包含
+                          {
+                            datePeriodTypeWordingMap[
+                              advancedPanelFormData[DynamicAdvancedConfigType.LAST].periodType
+                            ]
+                          }
+                        </Checkbox>
+                      </Space>
+                    </Radio>
+                    <Radio value={DynamicAdvancedConfigType.HISTORY}>
+                      <Space size={10}>
+                        <span className={styles.advancedSettingItemText}>过去第</span>
+
+                        <InputNumber
+                          style={{ width: 120 }}
+                          placeholder="请输入数字"
+                          min={1}
+                          disabled={isAdvancedConfigTypeRadioDisabled(
+                            DynamicAdvancedConfigType.HISTORY,
+                          )}
+                          value={advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].number}
+                          // defaultValue={3}
+                          onChange={(value: number | null) => {
+                            updateAdvancedPanelFormData(
+                              { number: value },
+                              DynamicAdvancedConfigType.HISTORY,
+                            );
+                            handleAdvancedPanelFormChange();
+                          }}
+                        />
+                        <Select
+                          // defaultValue={DatePeriodType.DAY}
+                          style={{ width: 120 }}
+                          disabled={isAdvancedConfigTypeRadioDisabled(
+                            DynamicAdvancedConfigType.HISTORY,
+                          )}
+                          value={
+                            advancedPanelFormData[DynamicAdvancedConfigType.HISTORY].periodType
+                          }
+                          onClick={(e) => {
+                            // 禁止冒泡触发Radio点击后续逻辑
+                            e.preventDefault();
+                            e.stopPropagation();
+                          }}
+                          onChange={(value: string) => {
+                            updateAdvancedPanelFormData(
+                              { periodType: value },
+                              DynamicAdvancedConfigType.HISTORY,
+                            );
+                            handleAdvancedPanelFormChange();
+                          }}
+                        >
+                          {getDatePeriodTypeOptions(dateRangeTypeProps)}
+                        </Select>
+                      </Space>
+                    </Radio>
+                    <Radio value={DynamicAdvancedConfigType.FROM_DATE}>
+                      <Space size={10}>
+                        <span className={styles.advancedSettingItemText}>自从</span>
+                        <DatePicker
+                          disabled={isAdvancedConfigTypeRadioDisabled(
+                            DynamicAdvancedConfigType.FROM_DATE,
+                          )}
+                          value={dayjs(
+                            advancedPanelFormData[DynamicAdvancedConfigType.FROM_DATE].date,
+                          )}
+                          disabledDate={(current) => {
+                            return current && current > dayjs().endOf('day');
+                          }}
+                          picker={DateRangeTypeToPickerMap[dateRangeTypeProps]}
+                          onChange={(date, dateString) => {
+                            if (!date) {
+                              return;
+                            }
+                            const picker = DateRangeTypeToPickerMap[dateRangeTypeProps];
+
+                            if (picker === DateRangePicker.WEEK) {
+                              date.startOf('week').format('YYYY-MM-DD');
+                            }
+                            if (picker === DateRangePicker.MONTH) {
+                              date.startOf('month').format('YYYY-MM-DD');
+                            }
+                            updateAdvancedPanelFormData(
+                              { date },
+                              DynamicAdvancedConfigType.FROM_DATE,
+                            );
+                            handleAdvancedPanelFormChange();
+                          }}
+                        />
+                        至此刻
+                      </Space>
+                    </Radio>
+                  </Space>
+                </Radio.Group>
+              </Panel>
+            </Collapse>
+          </div>
+        )}
+      </>
+    );
+  },
+);
 
 export default DynamicDate;
diff --git a/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx b/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx
index ed176a095..3c6fda566 100644
--- a/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx
+++ b/webapp/packages/supersonic-fe/src/components/MDatePicker/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { InfoCircleOutlined, CalendarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { Input, Tooltip, Popover, Space, Button, Select, Row, Col, Tag } from 'antd';
 import styles from './style.less';
@@ -36,6 +36,8 @@ const MDatePicker: React.FC<Props> = ({
   onDateRangeTypeChange,
   onInit,
 }: any) => {
+  const dynamicDateRef = useRef<any>({});
+
   const getDynamicDefaultConfig = (dateRangeType: DateRangeType) => {
     const dynamicDefaultConfig = {
       shortCutId: 'last7Days',
@@ -95,7 +97,6 @@ const MDatePicker: React.FC<Props> = ({
   const [dateRangesParams] = useState(() => {
     return initialValues ? generatorDateRangesParams(initialValues) : {};
   });
-  const [confirmBtnClickState, setConfirmBtnClickState] = useState(false);
 
   const [visible, setVisible] = useState(false);
 
@@ -153,9 +154,9 @@ const MDatePicker: React.FC<Props> = ({
       }
     }
   }
-  useEffect(() => {
-    onInit?.({ dateRange: currentDateRange });
-  }, []);
+  // useEffect(() => {
+  //   onInit?.({ dateRange: currentDateRange });
+  // }, []);
 
   useEffect(() => {
     setSelectedDateRangeString(getSelectedDateRangeString());
@@ -255,12 +256,6 @@ const MDatePicker: React.FC<Props> = ({
     initDefaultDynamicData({ latestDateMap });
   }, []);
 
-  useEffect(() => {
-    if (visible) {
-      setConfirmBtnClickState(false);
-    }
-  }, [visible]);
-
   useEffect(() => {
     const { dateRange } = dateRangesParams;
     setDateRangeStringShow(getDateRangeStringShow(dateRange));
@@ -310,7 +305,6 @@ const MDatePicker: React.FC<Props> = ({
           </Row>
         </div>
       </ProCard>
-
       <ProCard
         className={styles.dateProCard}
         title={'快捷选项'}
@@ -320,10 +314,10 @@ const MDatePicker: React.FC<Props> = ({
         // extra="2019年9月28日"
       >
         <DynamicDate
+          ref={dynamicDateRef}
           disabledAdvanceSetting={disabledAdvanceSetting}
           initialValues={dynamicParams}
           dateRangeTypeProps={dateRangeType}
-          submitFormDataState={confirmBtnClickState}
           onDateRangeChange={handleDateRangeChange}
           onDateRangeStringAndDescChange={({ dateRangeString }) => {
             setCurrentDateRange(dateRangeString);
@@ -333,7 +327,6 @@ const MDatePicker: React.FC<Props> = ({
           }}
         />
       </ProCard>
-
       <ProCard
         className={styles.dateProCard}
         title={
@@ -354,7 +347,6 @@ const MDatePicker: React.FC<Props> = ({
           onDateRangeChange={handleDateRangeChange}
         />
       </ProCard>
-
       <div
         style={{
           display: 'flex',
@@ -372,7 +364,7 @@ const MDatePicker: React.FC<Props> = ({
             type="primary"
             onClick={() => {
               if (currentDateSettingType === DateSettingType.DYNAMIC) {
-                setConfirmBtnClickState(true);
+                dynamicDateRef.current.dynamicDateUpdateAdvancedPanelFormData();
               }
               setVisible(false);
             }}
@@ -394,7 +386,7 @@ const MDatePicker: React.FC<Props> = ({
     <Space direction="vertical">
       <Popover
         content={content}
-        // destroyTooltipOnHide={true}
+        destroyTooltipOnHide={false}
         // title="Title"
         open={visible}
         trigger="click"