@ant-design/icons#SettingOutlined TypeScript Examples

My = () => {
  const history = useNavigate()

  return (
    <Container direction="vertical">
      <Header
        style={{
          height: '45px',
          lineHeight: '45px',
          backgroundColor: '#fff',
          textAlign: 'center',
          fontSize: '18px',
        }}
      >
        我
      </Header>
      <WhiteSpace size={15} />
      <Main>
        <UserInfoCard />
        <WhiteSpace size={15} />
        <List>
          <List.Item prefix={<BellOutlined />} onClick={() => {}}>
            通知
          </List.Item>
          <List.Item prefix={<ProfileOutlined />} onClick={() => {}}>
            我的作品
          </List.Item>
          <List.Item prefix={<SettingOutlined />} onClick={() => history('/setting')}>
            设置
          </List.Item>
        </List>
      </Main>
    </Container>
  )
}

Strategy: React.FC = () => {
  const urlQuery = useQuery();
  const history = useHistory();
  const id = urlQuery.get('id');
  const { t } = useTranslation();
  const busiChange = (id) => {
    history.push(`/alert-rules?id=${id}`);
  };
  return (
    <PageLayout title={t('告警规则')} icon={<SettingOutlined />} hideCluster>
      <div className='strategy-content'>
        <LeftTree
          busiGroup={{
            defaultSelect: id ? Number(id) : undefined,
            onChange: busiChange,
          }}
        ></LeftTree>
        {id ? <PageTable bgid={Number(id)}></PageTable> : <BlankBusinessPlaceholder text='告警规则' />}
      </div>
    </PageLayout>
  );
}

RecentTransactionsPreferences: React.FC = () => {
  return (
    <>
      <Popover
        placement="left"
        content={
          <Card size="small" bordered={false} className="detail-layout">
            <LiveTransactionsPreferences />
            <FilterTransactionsPreferences />
          </Card>
        }
        trigger="click"
      >
        <SettingOutlined />
      </Popover>
    </>
  );
}

menuItems = [
  makeItem(<HomeFilled />, "Home", "/connections", "#77c593"),
  makeItem(<ThunderboltFilled />, "Live Events", "/events-stream", "#fccd04"),
  makeItem(<AreaChartOutlined />, "Statistics", "/dashboard", "#88bdbc"),
  makeItem(<Icon component={KeyIcon} />, "API Keys", "/api-keys", "#d79922"),
  makeItem(<ApiFilled />, "Sources", "/sources", "#d83f87"),
  makeItem(<NotificationFilled />, "Destinations", "/destinations", "#4056a1"),
  makeItem(<Icon component={DbtCloudIcon} />, "dbt Cloud Integration", "/dbtcloud", "#e76e52"),
  makeItem(<SettingOutlined />, "Project settings", "/project-settings", "#0d6050"),
  makeItem(<Icon component={GlobeIcon} />, "Geo data resolver", "/geo-data-resolver", "#41b3a3"),
  makeItem(<CloudFilled />, "Custom Domains", "/domains", "#5ab9ea", f => f.enableCustomDomains),
  makeItem(<Icon component={DownloadIcon} />, "Download Config", "/cfg-download", "#14a76c"),
]

Configuration: React.FC<IProps> = (props: IProps) => {
  const [visible, setVisible] = useState<boolean>(false);

  // events
  const onOpenEditModal = useCallback(() => {
    setVisible(true);
  }, [setVisible]);
  const onCloseEditModal = useCallback(() => {
    setVisible(false);
  }, []);
  const onOk = useCallback(() => {
    onCloseEditModal();
    props.confirmToSync();
  }, [onCloseEditModal]);

  return (
    <div>
      <Button size="small" type="text" onClick={onOpenEditModal}>
        <SettingOutlined />
      </Button>
      <EditModal visible={visible} onOk={onOk} onCancel={onCloseEditModal} />
    </div>
  );
}

export function DropdownBtn({
  isMoreButton,
}: dropdownBtnProps): React.ReactElement {
  return (
    <>
      <BaseButton>
        {isMoreButton ? (
          <EllipsisOutlined />
        ) : (
          <>
            <SettingOutlined style={{ marginRight: 5 }} /> 管理{" "}
            <DownOutlined style={{ marginLeft: 5 }} />
          </>
        )}
      </BaseButton>
    </>
  );
}

SettingWrap: React.FC = () => {
  return (
    <Layout>
      <ScrollTools
        source={[
          {
            Key: 'SettingsUser',
            Label: (
              <React.Fragment>
                <UserOutlined size={18} />
                <span>导航预览</span>
              </React.Fragment>
            ),
            Content: <SettingNavigator />
          },
          {
            Key: 'SettingsOther',
            Label: (
              <React.Fragment>
                <SettingOutlined size={18} />
                <span>关于</span>
              </React.Fragment>
            ),
            Content: <SettingAbout />
          }
        ]}
        isFullScreen
      ></ScrollTools>
    </Layout>
  );
}

GlobalMenu: React.FC<{ disabled: boolean }> = React.memo(({ disabled }) => {
  const { t } = useTranslation(I18nKey);
  const { filters, enableAll, toggleExclude, removeAll } = useContext(Context);

  const menu = useMemo(() => {
    const someEnabled = filters.some((f) => !f.required && f.active);
    const someDisabled = filters.some((f) => !f.required && !f.active);
    const hasNotRequired = filters.some((f) => !f.required);

    return (
      <Menu>
        <h4 style={{ padding: "0 16px" }}>{t("label.all_filters")}</h4>
        <Menu.Item disabled={!someDisabled} onClick={() => enableAll(true)}>
          <EyeOutlined /> {t("label.enable_all")}
        </Menu.Item>
        <Menu.Item disabled={!someEnabled} onClick={() => enableAll(false)}>
          <EyeInvisibleOutlined /> {t("label.disable_all")}
        </Menu.Item>
        <Menu.Item disabled={!hasNotRequired} onClick={toggleExclude}>
          {<Icon component={TwoTone} />} {t("label.invert")}
        </Menu.Item>
        <Menu.Item
          className="ant-typography ant-typography-danger"
          disabled={!hasNotRequired}
          onClick={removeAll}
        >
          <DeleteOutlined /> {t("label.remove_all")}
        </Menu.Item>
      </Menu>
    );
  }, [filters, enableAll, removeAll, t, toggleExclude]);

  return (
    <Dropdown overlay={menu} trigger={["click"]} disabled={disabled || filters.length === 0}>
      <Button type="link" icon={<SettingOutlined />} />
    </Dropdown>
  );
})

function TZConversionHeader(): JSX.Element {
    return (
        <h3 className="l3">
            Timezone conversion
            <span className="float-right">
                <Link to="/project/settings#timezone">
                    <SettingOutlined />
                </Link>
            </span>
        </h3>
    )
}

DataTableSettings = observer(<T, >({
  columns,
  fieldsVisibility,
  onChange
}: DataTableSettingsProps<T>) => {
  const intl = useIntl();
  const content = <List
    dataSource={columns}
    renderItem={item => (
      <List.Item>
        <Checkbox
            checked = {fieldsVisibility.get(item.key as string)}
            onChange={ev => onChange(item.key as string, ev.target.checked)}
        >
          {item.title}
        </Checkbox>
      </List.Item>
    )}
  />;

  return <Popover
    placement="bottom"
    title={intl.formatMessage({id: 'jmix.dataTable.fieldsVisibility'})}
    content={content} 
    trigger="click"
  >
    <Button>
      <SettingOutlined />
    </Button>
  </Popover>
})

render(): React.ReactNode {
    const { todoList } = this.props?.todo
    // const todoNum = todoList.filter((item: any) => item.status === 0).length
    const todoNum = todoList?.filter((item: any) => {
      if (item != null) {
        return item.status === 0
      }
    }).length
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && (
          <Menu.Item key="center">
            <UserOutlined />
            个人中心
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <SettingOutlined />
            个人设置
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}
        <Menu.Item key="todo">
          <UnorderedListOutlined />
          待办事项
          <Badge count={todoNum} offset={[10, -5]} />
        </Menu.Item>
        {menu && <Menu.Divider />}
        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.name ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
          <span className={`${styles.name} anticon`}>{currentUser.name}
            <Badge count={todoNum} dot={true} /></span>
        </span>
      </HeaderDropdown>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }

AppHeader = observer(({children}: {children?: React.ReactNode}) => {
  const intl = useIntl();
  const mainStore = useMainStore();

  const [settingsEnabled, setSettingsEnabled] = useState(false);

  const [visibleHotkeyInfo, setVisibleHotkeyInfo] = useState(false);

  const toggleHotkeyInfo = useCallback<KeyHandler>(() => setVisibleHotkeyInfo(!visibleHotkeyInfo), [visibleHotkeyInfo]);
  useHotkey(toggleHotkeyInfoHotkeyConfig, toggleHotkeyInfo);

  const toggleSettings = useCallback(() => {
    setSettingsEnabled((isEnabled) => {
      return !isEnabled;
    })
  }, [])

  const showLogoutConfirm = useCallback(() => {
    modals.open({
      content: intl.formatMessage({id: 'header.logout.areYouSure'}),
      okText: intl.formatMessage({id: 'header.logout.ok'}),
      cancelText: intl.formatMessage({id: 'header.logout.cancel'}),
      onOk: () => mainStore.logout()
    });
  }, [mainStore, intl]);

  return (
    <div className={styles.header}>
      <JmixLightIcon className={styles.icon} />

      <div className={styles.content}>{children}</div>
      <>
      {settingsEnabled && (
          <>
            <ThemeSwitcher className={styles.themeSwitcher} />
            <LanguageSwitcher className={styles.languageSwitcher} />
          </>
        )}
      </>
      <Space className={styles.userPanel}>
        <span>{mainStore.userName}</span>
        <Button
          className={classNames(settingsEnabled ? styles.settingsBtnActive : styles.settingsBtn, appStyles.focusOuterHighlight)}
          type={"text"}
          icon={<SettingOutlined role={""}/>}
          onClick={toggleSettings}
          role={"switch"}
          aria-checked={settingsEnabled}
        />
        <HotkeyInfoModalButton
          visible={visibleHotkeyInfo}
          setVisible={setVisibleHotkeyInfo}
          className={classNames(styles.infoBtn, appStyles.focusOuterHighlight)}
        />
        <Button
          id="button_logout"
          className={classNames(styles.logoutBtn, appStyles.focusOuterHighlight)}
          type="text"
          icon={<LogoutOutlined role={""}/>}
          onClick={showLogoutConfirm}
        />
      </Space>
    </div>
  );
})

Preferences: React.FC = () => {
  const { t } = useTranslation();
  const { theme } = React.useContext(PreferencesContext);
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <Popover
      className={theme === Theme.DARK ? "theme-dark" : ""}
      placement="bottomRight"
      content={
        <Card
          size="small"
          bordered={false}
          style={{ maxWidth: 340 }}
          className="detail-layout"
        >
          <ThemePreferences />
          <LanguagePreferences />
          <CryptocurrencyPreferences />
          <FiatPreferences />
          <Row>
            <Col xs={24} style={{ textAlign: "right" }}>
              <Link to="/preferences" onClick={() => setIsOpen(false)}>
                {t("preferences.viewAll")}
              </Link>
            </Col>
          </Row>
          <Row>
            <Col xs={24} style={{ textAlign: "right" }}>
              <Link to="/bookmarks" onClick={() => setIsOpen(false)}>
                {t("pages.bookmarks.viewAll")}
              </Link>
            </Col>
          </Row>
        </Card>
      }
      trigger="click"
      visible={isOpen}
      onVisibleChange={setIsOpen}
    >
      <SettingOutlined />
    </Popover>
  );
}

render(): React.ReactNode {
    const {
      currentUser = {
        avatar: '',
        name: '',
      },
      menu,
    } = this.props;
    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && (
          <Menu.Item key="center">
            <UserOutlined />
            个人中心
          </Menu.Item>
        )}
        {menu && (
          <Menu.Item key="settings">
            <SettingOutlined />
            个人设置
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}

        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.name ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
          <span className={styles.name}>{currentUser.name}</span>
        </span>
      </HeaderDropdown>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }

export function Background() {
  const [formVisible, setFormVisible] = useState(false);
  const userSettings = useSelector(selectUserSettings);
  const organizations = useSelector(selectOrganizations);
  const userSettingLoading = useSelector(selectUserSettingLoading);
  const error = useSelector(selectInitializationError);
  const t = useI18NPrefix('main.background');

  const showForm = useCallback(() => {
    setFormVisible(true);
  }, []);

  const hideForm = useCallback(() => {
    setFormVisible(false);
  }, []);

  let visible = true;
  let content;

  if (userSettingLoading) {
    content = (
      <Hint>
        <SettingOutlined className="img loading" />
        <p>{t('loading')}</p>
      </Hint>
    );
  } else if (error) {
    content = (
      <Hint>
        <ReloadOutlined className="img" />
        <p>{t('initError')}</p>
      </Hint>
    );
  } else if (
    !userSettingLoading &&
    !(userSettings && userSettings.length) &&
    !organizations.length
  ) {
    content = (
      <>
        <Hint className="add" onClick={showForm}>
          <AppstoreAddOutlined className="img" />
          <p>{t('createOrg')}</p>
        </Hint>
        <OrganizationForm visible={formVisible} onCancel={hideForm} />
      </>
    );
  } else {
    visible = false;
  }

  return <Container visible={visible}>{content}</Container>;
}

AppLayout = (props: React.PropsWithChildren<Props>) => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  const onChangeIsCollapsed = (isCollapsed: boolean) => {
    setIsCollapsed(isCollapsed);
  };

  const pathname = props.router.pathname;
  const pathsplit: string[] = pathname.split('/');
  const routes = routesMaker(pathsplit);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={isCollapsed}
        onCollapse={onChangeIsCollapsed}
      >
        <Link href="/menu1">
          <a>
            <div className="App-logo" />
          </a>
        </Link>
        <Menu
          theme="dark"
          defaultSelectedKeys={['/menu1']}
          selectedKeys={[pathsplit.pop()]}
          defaultOpenKeys={[pathsplit[1]]}
          mode="inline"
        >
          <Item key="menu1" icon={<DesktopOutlined />}>
            <Link href="/menu1">
              <a>Menu 1</a>
            </Link>
          </Item>
          <Item key="menu2" icon={<DashboardOutlined />}>
            <Link href="/menu2">
              <a>Menu 2</a>
            </Link>
          </Item>
          <SubMenu key="menu3" icon={<SettingOutlined />} title="Menu 3">
            <Item key="submenu1">
              <Link href="/menu3/submenu1">
                <a>Submenu 1</a>
              </Link>
            </Item>
            <Item key="submenu2">
              <Link href="/menu3/submenu2">
                <a>Submenu 2</a>
              </Link>
            </Item>
          </SubMenu>
        </Menu>
      </Sider>
      <Layout style={{ padding: '0 16px 16px' }}>
        <Breadcrumb
          style={{ margin: '16px 0' }}
          itemRender={itemRender}
          routes={routes}
        />
        <Content
          className="site-layout-background"
          style={{
            padding: 16,
            minHeight: 280,
            backgroundColor: '#ffffff',
          }}
        >
          {props.children}
        </Content>
      </Layout>
    </Layout>
  );
}

export default function ProfileDrawer({
  courseId,
}: ProfileDrawerProps): ReactElement {
  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
  const role = useRoleInCourse(courseId);

  return (
    <>
      <NoPaddingPopover
        content={
          isPopoverOpen && (
            <Menu mode="inline">
              <Menu.Item icon={<SettingOutlined />}>
                <Link
                  href={{ pathname: "/settings", query: { cid: courseId } }}
                >
                  <a>Settings</a>
                </Link>
              </Menu.Item>
              <Menu.Item
                icon={<MacCommandOutlined />}
                onClick={() => {
                  Modal.info({
                    title: "Queue Page Keyboard Shortcuts",
                    content: shortcutInfoContent(role),
                  });
                  setIsPopoverOpen(false);
                }}
              >
                Keyboard Shortcuts
              </Menu.Item>
              <Menu.Item
                key="1"
                icon={<QuestionCircleOutlined />}
                onClick={() => {
                  window.open("https://info.khouryofficehours.com/help");
                  setIsPopoverOpen(false);
                }}
              >
                Help Guide
              </Menu.Item>
              <Menu.Item
                key="2"
                icon={<FileTextOutlined />}
                onClick={() => {
                  window.open(
                    "https://info.khouryofficehours.com/release-notes-archive"
                  );
                  setIsPopoverOpen(false);
                }}
              >
                Release Notes
              </Menu.Item>
              <Menu.Item key="3" icon={<ReadOutlined />}>
                <Link href={"/about"}>
                  <a>About Us</a>
                </Link>
              </Menu.Item>
              <Menu.Item key="4" icon={<LogoutOutlined />}>
                <Link href={"/api/v1/logout"}>
                  <a data-cy="logout-button">Logout</a>
                </Link>
              </Menu.Item>
            </Menu>
          )
        }
        placement="bottomRight"
        trigger="click"
        visible={isPopoverOpen}
        onVisibleChange={setIsPopoverOpen}
      >
        <AvatarButton>
          <SelfAvatar size={40} />
        </AvatarButton>
      </NoPaddingPopover>
    </>
  );
}

EnvPicker: React.FunctionComponent<unknown> = ({}) => {
  const [modalVisible, setModalVisible] = React.useState(false);
  const showModal = (): void => setModalVisible(true);
  const closeModal = (): void => setModalVisible(false);

  const currentEnv = useSelector((s: AppState) => s.currentEnv);
  const envNames = useSelector(selectEnvNames);
  const envList = useSelector((s: AppState) => s.envList);

  const dispatch = useDispatch();

  function checkName(name: string): boolean {
    return validateNewEnvName(name, envNames);
  }

  function createNewEnv(): void {
    const tmpName = 'Env';
    let tmpNameIdx = 1;
    while (!checkName(`${tmpName}${tmpNameIdx}`)) tmpNameIdx++;
    dispatch(createEnv(`${tmpName}${tmpNameIdx}`));
  }

  function handleEnvSwitch(newEnvName: string): void {
    dispatch(switchEnv(newEnvName));
  }

  return (
    <>
      <Button shape="circle-outline" style={{ marginLeft: 4 }} onClick={showModal}>
        <SettingOutlined />
      </Button>
      <Select
        onSelect={handleEnvSwitch}
        value={currentEnv}
        style={{ width: 300 }}
        dropdownRender={(menu): React.ReactElement => (
          <div>
            {menu}
            <Divider style={{ margin: '4px 0' }} />
            <div
              style={{ padding: '4px 8px', cursor: 'pointer' }}
              onMouseDown={(e): void => e.preventDefault()}
              onClick={createNewEnv}
            >
              <PlusOutlined /> New
            </div>
          </div>
        )}
      >
        {envList.map(([name], idx) => (
          <Select.Option key={idx} value={name}>
            {name}
          </Select.Option>
        ))}
      </Select>
      {modalVisible ? (
        <Modal visible={modalVisible} footer={null} closable={false} destroyOnClose width={ENV_MODAL_WIDTH}>
          <EnvEditor onCancel={closeModal} />
        </Modal>
      ) : null}
    </>
  );
}

DropdownMenu: React.FC<{ user: User; plan: CurrentSubscription; hideMenu: () => void }> = ({
  plan,
  user,
  hideMenu,
}) => {
  const services = useServices()
  const history = useHistory()

  const showSettings = React.useCallback<() => void>(() => history.push("/user/settings"), [history])

  const becomeUser = async () => {
    let email = prompt("Please enter e-mail of the user", "")
    if (!email) {
      return
    }
    try {
      AnalyticsBlock.blockAll()
      await services.userService.becomeUser(email)
    } catch (e) {
      handleError(e, "Can't login as other user")
      AnalyticsBlock.unblockAll()
    }
  }

  return (
    <div>
      <div className="py-5 border-b px-5 flex flex-col items-center">
        <div className="text-center text-text text-lg">{user.name}</div>
        <div className="text-secondaryText text-xs underline">{user.email}</div>
      </div>
      <div className="py-2 border-b border-main px-5 flex flex-col items-start">
        <div>
          {services.activeProject?.name && (
            <>
              Project: <b>{services.activeProject.name}</b>
            </>
          )}
          <div className="text-xs">
            <a
              onClick={() => {
                hideMenu()
                showProjectSwitchModal()
              }}
            >
              Switch project
            </a>
          </div>
        </div>
      </div>
      {services.features.billingEnabled && services.applicationConfiguration.billingUrl && (
        <div className="py-5 border-b border-main px-5 flex flex-col items-start">
          <BillingCurrentPlan planStatus={plan} onPlanChangeModalOpen={hideMenu} />
        </div>
      )}
      <div className="p-2 flex flex-col items-stretch">
        <Button type="text" className="text-left" key="settings" icon={<SettingOutlined />} onClick={showSettings}>
          Settings
        </Button>
        {(services.userService.getUser().email === "[email protected]" ||
          services.userService.getUser().email.endsWith("@jitsu.com")) && (
          <Button className="text-left" type="text" key="become" icon={<UserSwitchOutlined />} onClick={becomeUser}>
            Become User
          </Button>
        )}
        <Button
          className="text-left"
          type="text"
          key="logout"
          icon={<LogoutOutlined />}
          onClick={() => services.userService.removeAuth(reloadPage)}
        >
          Logout
        </Button>
      </div>
    </div>
  )
}

export function SettingDropdown(): React.ReactElement {
  const { toolboxTab } = useBuilderUIContext();
  const { t } = useTranslation(NS_NEXT_BUILDER);
  const [visible, setVisible] = useState(false);
  const storage = React.useMemo(() => new JsonStorage(localStorage), []);
  const [showRelatedBricks, setShowRelatedBricks] = React.useState(
    storage.getItem(localStorageKeyForShowRelatedNodesBasedOnEvents) ?? false
  );
  const manager = useBuilderDataManager();

  const handleClick = (): void => {
    setVisible(!visible);
  };

  const handleVisibleChange = (value: boolean): void => {
    setVisible(value);
  };

  const handleShowRelatedBricksChange = (value: boolean): void => {
    setShowRelatedBricks(value);
    storage.setItem(localStorageKeyForShowRelatedNodesBasedOnEvents, value);
    if (toolboxTab !== ToolboxTab.EVENTS_VIEW) {
      manager.setShowRelatedNodesBasedOnEvents(value);
    }
  };

  const content = (
    <Menu>
      <div className={styles.settingContainer}>
        <div className={styles.headerContainer}>
          <span>{t(K.SETTINGS)}</span>
        </div>
        <div className={styles.settingItem}>
          <span>{t(K.SHOW_RELATED_NODES_BASED_ON_EVENTS_WHEN_HOVERING)}</span>
          <Switch
            size="small"
            checked={showRelatedBricks}
            onChange={handleShowRelatedBricksChange}
          />
        </div>
      </div>
    </Menu>
  );

  return (
    <Dropdown
      overlay={content}
      overlayClassName={shareStyles.customAnimation}
      trigger={["click"]}
      placement="bottomLeft"
      visible={visible}
      onVisibleChange={handleVisibleChange}
    >
      <Tooltip
        title={t(K.SETTINGS)}
        placement="bottomRight"
        overlayStyle={{
          // Hide tooltip when dropdown is open.
          display: visible ? "none" : undefined,
        }}
      >
        <a
          className={shareStyles.tabLink}
          role="button"
          onClick={handleClick}
          data-testid="setting-btn"
        >
          <SettingOutlined />
        </a>
      </Tooltip>
    </Dropdown>
  );
}

AppBar = (props: {
  left?: JSX.Element;
  right?: JSX.Element;
  useWalletBadge?: boolean;
  additionalSettings?: JSX.Element;
}) => {
  const { connected } = useWallet();

  const TopBar = (
    <div className="App-Bar-right">
      {props.left}
      {connected ? (
        <CurrentUserBadge />
      ) : (
        <ConnectButton
          type="text"
          size="large"
          style={{ color: '#2abdd2' }}
          allowWalletChange
        />
      )}
      <Popover
        placement="topRight"
        title={LABELS.SETTINGS_TOOLTIP}
        content={<Settings additionalSettings={props.additionalSettings} />}
        trigger="click"
      >
        <Button
          shape="circle"
          size="large"
          type="text"
          icon={<SettingOutlined />}
        />
      </Popover>
      {props.right}
    </div>
  );

  return TopBar;
}

render() {
    const { spinning } = this.state;
    const { extraRender, data, showHeader = true } = this.props;
    const { title, metric } = data;
    const graphConfig = this.getGraphConfig(data);
    return (
      <div className={this.state.legend ? 'graph-container graph-container-hasLegend' : 'graph-container'}>
        {showHeader && (
          <div
            className='graph-header'
            style={{
              height: this.headerHeight,
              lineHeight: `${this.headerHeight}px`,
            }}
          >
            <div>{title || metric}</div>
            <div className='graph-extra'>
              <span className='graph-operationbar-item' key='info'>
                <Popover placement='left' content={this.getContent()} trigger='click' autoAdjustOverflow={false} getPopupContainer={() => document.body}>
                  <Button className='' type='link' size='small' onClick={(e) => e.preventDefault()}>
                    <SettingOutlined />
                  </Button>
                </Popover>
              </span>
              {this.props.isShowRefresh === false ? null : (
                <span className='graph-operationbar-item' key='sync'>
                  <Button type='link' size='small' onClick={(e) => e.preventDefault()}>
                    <SyncOutlined onClick={this.refresh} />
                  </Button>
                </span>
              )}
              {this.props.isShowShare === false ? null : (
                <span className='graph-operationbar-item' key='share'>
                  <Button type='link' size='small' onClick={(e) => e.preventDefault()}>
                    <ShareAltOutlined onClick={this.shareChart} />
                  </Button>
                </span>
              )}
              {extraRender && _.isFunction(extraRender) ? extraRender(this) : null}
            </div>
          </div>
        )}
        {this.props.graphConfigInnerVisible ? (
          <GraphConfigInner
            data={graphConfig}
            onChange={(...args) => {
              this.updateGraphConfig(args[2] || {});
            }}
          />
        ) : null}
        {/* 这个spin有点难搞，因为要第一时间获取chart容器的offsetheight */}
        {/* <Spin spinning={spinning} wrapperClassName='graph-spin'> */}
        {this.renderChart()}
        {/* </Spin> */}
        <Legend
          style={{ display: this.state.legend ? 'block' : 'none', overflowY: 'auto', maxHeight: '35%' }}
          graphConfig={graphConfig}
          series={this.getZoomedSeries()}
          onSelectedChange={this.handleLegendRowSelectedChange}
          comparisonOptions={graphConfig.comparisonOptions}
        />
      </div>
    );
  }

AppHeader = observer(({ children }: { children?: React.ReactNode }) => {
  const intl = useIntl();
  const mainStore = useMainStore();

  const [settingsEnabled, setSettingsEnabled] = useState(false);

  const [visibleHotkeyInfo, setVisibleHotkeyInfo] = useState(false);

  const toggleHotkeyInfo = useCallback<KeyHandler>(
    () => setVisibleHotkeyInfo(!visibleHotkeyInfo),
    [visibleHotkeyInfo]
  );
  useHotkey(toggleHotkeyInfoHotkeyConfig, toggleHotkeyInfo);

  const toggleSettings = useCallback(() => {
    setSettingsEnabled(isEnabled => {
      return !isEnabled;
    });
  }, []);

  const showLogoutConfirm = useCallback(() => {
    modals.open({
      content: intl.formatMessage({ id: "header.logout.areYouSure" }),
      okText: intl.formatMessage({ id: "header.logout.ok" }),
      cancelText: intl.formatMessage({ id: "header.logout.cancel" }),
      onOk: () => mainStore.logout()
    });
  }, [mainStore, intl]);

  return (
    <div className={styles.header}>
      <JmixLightIcon className={styles.icon} />

      <div className={styles.content}>{children}</div>
      <>
        {settingsEnabled && (
          <>
            <ThemeSwitcher className={styles.themeSwitcher} />
            <LanguageSwitcher className={styles.languageSwitcher} />
          </>
        )}
      </>
      <Space className={styles.userPanel}>
        <span>{mainStore.userName}</span>
        <Button
          className={classNames(
            settingsEnabled ? styles.settingsBtnActive : styles.settingsBtn,
            appStyles.focusOuterHighlight
          )}
          type={"text"}
          icon={<SettingOutlined role={""} />}
          onClick={toggleSettings}
          role={"switch"}
          aria-checked={settingsEnabled}
        />
        <HotkeyInfoModalButton
          visible={visibleHotkeyInfo}
          setVisible={setVisibleHotkeyInfo}
          className={classNames(styles.infoBtn, appStyles.focusOuterHighlight)}
        />
        <Button
          id="button_logout"
          className={classNames(
            styles.logoutBtn,
            appStyles.focusOuterHighlight
          )}
          type="text"
          icon={<LogoutOutlined role={""} />}
          onClick={showLogoutConfirm}
        />
      </Space>
    </div>
  );
})

AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
  const { initialState, setInitialState } = useModel('@@initialState');

  const onMenuClick = useCallback(
    (event: {
      key: React.Key;
      keyPath: React.Key[];
      item: React.ReactInstance;
      domEvent: React.MouseEvent<HTMLElement>;
    }) => {
      const { key } = event;
      if (key === 'logout' && initialState) {
        setInitialState({ ...initialState, currentUser: undefined });
        loginOut();
        return;
      }
      history.push(`/account/${key}`);
    },
    [initialState, setInitialState],
  );

  const loading = (
    <span className={`${styles.action} ${styles.account}`}>
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    </span>
  );

  if (!initialState) {
    return loading;
  }

  const { currentUser } = initialState;

  if (!currentUser || !currentUser.name) {
    return loading;
  }

  const menuHeaderDropdown = (
    <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
      {menu && (
        <Menu.Item key="center">
          <UserOutlined />
          个人中心
        </Menu.Item>
      )}
      {menu && (
        <Menu.Item key="settings">
          <SettingOutlined />
          个人设置
        </Menu.Item>
      )}
      {menu && <Menu.Divider />}

      <Menu.Item key="logout">
        <LogoutOutlined />
        退出登录
      </Menu.Item>
    </Menu>
  );
  return (
    <HeaderDropdown overlay={menuHeaderDropdown}>
      <span className={`${styles.action} ${styles.account}`}>
        <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
        <span className={`${styles.name} anticon`}>{currentUser.name}</span>
      </span>
    </HeaderDropdown>
  );
}

AvatarDropdown: React.FC<GlobalHeaderRightProps> = ({ menu }) => {
  const { initialState, setInitialState } = useModel('@@initialState');

  const onMenuClick = useCallback(
    (event: MenuInfo) => {
      const { key } = event;
      if (key === 'logout' && initialState) {
        setInitialState({ ...initialState, currentUser: undefined });
        loginOut();
        return;
      }
      history.push('/account/settings');
    },
    [initialState, setInitialState],
  );

  const loading = (
    <span className={`${styles.action} ${styles.account}`}>
      <Spin
        size="small"
        style={{
          marginLeft: 8,
          marginRight: 8,
        }}
      />
    </span>
  );

  if (!initialState) {
    return loading;
  }

  const { currentUser } = initialState;

  if (!currentUser || !currentUser.name) {
    return loading;
  }

  const menuHeaderDropdown = (
    <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
      {menu && (
        <Menu.Item key="settings">
          <SettingOutlined />
          个人设置
        </Menu.Item>
      )}
      {menu && <Menu.Divider />}

      <Menu.Item key="logout">
        <LogoutOutlined />
        退出登录
      </Menu.Item>
    </Menu>
  );
  return (
    <HeaderDropdown overlay={menuHeaderDropdown}>
      <span className={`${styles.action} ${styles.account}`}>
        <Avatar size="small" className={styles.avatar} src={currentUser.avatar} alt="avatar" />
        <span className={`${styles.name} anticon`}>{currentUser.name}</span>
      </span>
    </HeaderDropdown>
  );
}

render(): React.ReactNode {
    const { menu, currentStaffAdmin } = this.props;

    const currentUser = {
      ...currentStaffAdmin,
    };

    const menuHeaderDropdown = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={this.onMenuClick}>
        {menu && CanSee([BizRole_Full, BizRole_Read]) && (
          <Menu.Item
            key="settings"
          >
            <SettingOutlined />
            权限设置
          </Menu.Item>
        )}
        {menu && <Menu.Divider />}
        <Menu.Item key="logout">
          <LogoutOutlined />
          退出登录
        </Menu.Item>
      </Menu>
    );
    return currentUser && currentUser.name ? (
      <HeaderDropdown overlay={menuHeaderDropdown}>
        <span className={`${styles.action} ${styles.account}`}>
          <Avatar
            size="small"
            className={styles.avatar}
            src={currentUser.avatar_url}
            alt="avatar"
          />
          <span className={`${styles.name} anticon`}>{currentUser.name}</span>
        </span>
      </HeaderDropdown>
    ) : (
      <span className={`${styles.action} ${styles.account}`}>
        <Spin
          size="small"
          style={{
            marginLeft: 8,
            marginRight: 8,
          }}
        />
      </span>
    );
  }

export function TestAccountFilter({
    filters,
    onChange,
}: {
    filters: Partial<FilterType>
    onChange: (filters: Partial<FilterType>) => void
}): JSX.Element | null {
    const { currentTeam } = useValues(teamLogic)
    const hasFilters = (currentTeam?.test_account_filters || []).length > 0

    return (
        <Tooltip
            title={
                hasFilters
                    ? 'Filter out internal test and team members users from this query.'
                    : "You don't have internal users filtering set up. Click the gear icon to configure it."
            }
        >
            <Row style={{ alignItems: 'center', flexWrap: 'nowrap' }}>
                <div>
                    <Link to="/project/settings#internal-users-filtering">
                        <SettingOutlined
                            style={{
                                marginRight: 4,
                                fontSize: '0.85em',
                            }}
                        />
                    </Link>
                    <label
                        style={{
                            marginRight: 6,
                            fontWeight: 500,
                        }}
                        htmlFor="text-account-filter"
                    >
                        Filter out internal and test users
                    </label>
                </div>
                <LemonSwitch
                    disabled={!hasFilters}
                    checked={hasFilters ? !!filters.filter_test_accounts : false}
                    onChange={(checked: boolean) => {
                        localStorage.setItem('default_filter_test_accounts', checked.toString())
                        onChange({ filter_test_accounts: checked })
                    }}
                    id="test-account-filter"
                />
            </Row>
        </Tooltip>
    )
}

YakitStorePage: React.FC<YakitStorePageProp> = (props) => {
    const [script, setScript] = useState<YakScript>()
    const [trigger, setTrigger] = useState(false)
    const [keyword, setKeyword] = useState("")
    const [ignored, setIgnored] = useState(false)
    const [history, setHistory] = useState(false)

    const refresh = useMemoizedFn(() => {
        setTrigger(!trigger)
    })

    const [loading, setLoading] = useState(false)
    const [localPluginDir, setLocalPluginDir] = useState("");
    const [pluginType, setPluginType] = useState<"yak" | "mitm" | "nuclei" | "codec" | "packet-hack" | "port-scan">("yak");

    useEffect(() => {
        getValue(YAKIT_DEFAULT_LOAD_LOCAL_PATH).then(e => {
            if (e) {
                setLocalPluginDir(`${e}`)
            }
        })
    }, [])

    useEffect(() => {
        setLoading(true)
        setTimeout(() => {
            setLoading(false)
        }, 200)
    }, [script])

    return (
        <div style={{height: "100%", display: "flex", flexDirection: "row"}}>
            <div style={{width: 470}}>
                <AutoCard
                    bodyStyle={{padding: 0, overflow: "auto"}}
                    bordered={false}
                    style={{height: "100%"}}
                    title={
                        <Space size={0}>
                            类型：
                            <ManySelectOne
                                size={"small"}
                                data={[
                                    {text: "YAK 插件", value: "yak"},
                                    {text: "MITM 插件", value: "mitm"},
                                    {text: "数据包扫描", value: "packet-hack"},
                                    {text: "端口扫描插件", value: "port-scan"},
                                    {text: "CODEC插件", value: "codec"},
                                    {text: "YAML POC", value: "nuclei"},
                                ]}
                                value={pluginType} setValue={setPluginType}
                                formItemStyle={{marginBottom: 0, width: 115}}
                            />
                            <Button size={"small"} type={"link"} onClick={(e) => setTrigger(!trigger)}>
                                <ReloadOutlined/>
                            </Button>
                            <Button
                                size={"small"}
                                type={"link"}
                                onClick={(e) => {
                                    let m = showModal({
                                        title: "设置 Keyword",
                                        content: (
                                            <>
                                                <KeywordSetter
                                                    defaultIgnore={ignored}
                                                    defaultHistory={history}
                                                    onFinished={(e, ignored, history) => {
                                                        setKeyword(e)
                                                        setIgnored(ignored)
                                                        setHistory(history)
                                                        m.destroy()
                                                    }}
                                                    defaultValue={keyword}
                                                />
                                            </>
                                        )
                                    })
                                }}
                            >
                                <SearchOutlined/>
                            </Button>
                        </Space>
                    }
                    size={"small"}
                    extra={
                        <Space size={1}>
                            <Popover
                                title={"额外设置"}
                                content={<>
                                    <Form onSubmitCapture={e => {
                                        e.preventDefault()

                                        saveValue(YAKIT_DEFAULT_LOAD_LOCAL_PATH, localPluginDir)
                                    }} size={"small"}>
                                        <InputItem
                                            label={"本地插件仓库"} value={localPluginDir} setValue={setLocalPluginDir}
                                            extraFormItemProps={{style: {marginBottom: 4}}}
                                        />
                                        <Form.Item colon={false} label={" "} style={{marginBottom: 12}}>
                                            <Button type="primary" htmlType="submit"> 设置 </Button>
                                        </Form.Item>
                                    </Form>
                                </>}
                                trigger={["click"]}
                            >
                                <Button
                                    icon={<SettingOutlined/>} size={"small"} type={"link"}
                                    style={{marginRight: 3}}
                                />
                            </Popover>
                            <Button
                                size={"small"}
                                type={"primary"}
                                icon={<DownloadOutlined/>}
                                onClick={() => {
                                    showModal({
                                        width: 800,
                                        title: "导入插件方式",
                                        content: (
                                            <>
                                                <div style={{width: 800}}>
                                                    <LoadYakitPluginForm onFinished={refresh}/>
                                                </div>
                                            </>
                                        )
                                    })
                                }}
                            >
                                导入
                            </Button>
                            {/*<Popconfirm*/}
                            {/*    title={"更新模块数据库？"}*/}
                            {/*    onConfirm={e => {*/}
                            {/*        showModal({*/}
                            {/*            title: "自动更新 Yak 模块", content: <>*/}
                            {/*                <AutoUpdateYakModuleViewer/>*/}
                            {/*            </>, width: "60%",*/}
                            {/*        })*/}
                            {/*    }}*/}
                            {/*>*/}
                            {/*    <Button size={"small"} type={"primary"} icon={<DownloadOutlined/>}>*/}
                            {/*        导入*/}
                            {/*    </Button>*/}
                            {/*</Popconfirm>*/}
                            <Button
                                size={"small"}
                                type={"link"}
                                icon={<PlusOutlined/>}
                                onClick={() => {
                                    let m = showDrawer({
                                        title: "创建新插件",
                                        width: "100%",
                                        content: (
                                            <>
                                                <YakScriptCreatorForm
                                                    onChanged={(e) => setTrigger(!trigger)}
                                                    onCreated={() => {
                                                        m.destroy()
                                                    }}
                                                />
                                            </>
                                        ),
                                        keyboard: false
                                    })
                                }}
                            >
                                新插件
                            </Button>
                        </Space>
                    }
                >
                    <YakModuleList
                        currentId={script?.Id}
                        Keyword={keyword}
                        Type={pluginType}
                        onClicked={setScript}
                        trigger={trigger}
                        isHistory={history}
                        isIgnored={ignored}
                    />
                    {/*<Tabs*/}
                    {/*    className='yak-store-list'*/}
                    {/*    tabPosition={"left"}*/}
                    {/*    size={"small"}*/}
                    {/*    tabBarStyle={{*/}
                    {/*        padding: 0,*/}
                    {/*        margin: 0,*/}
                    {/*        width: 70,*/}
                    {/*        marginLeft: -20*/}
                    {/*    }}*/}
                    {/*    direction={"ltr"}*/}
                    {/*>*/}
                    {/*    {[*/}
                    {/*        {tab: "YAK", key: "yak"},*/}
                    {/*        {tab: "YAML", key: "nuclei"},*/}
                    {/*        {tab: "MITM", key: "mitm"},*/}
                    {/*        {tab: "Packet", key: "packet-hack"},*/}
                    {/*        {tab: "CODEC", key: "codec"},*/}
                    {/*    ].map((e) => {*/}
                    {/*        return (*/}
                    {/*            <Tabs.TabPane tab={e.tab} key={e.key}>*/}
                    {/*                <YakModuleList*/}
                    {/*                    currentId={script?.Id}*/}
                    {/*                    Keyword={keyword}*/}
                    {/*                    Type={e.key as any}*/}
                    {/*                    onClicked={setScript}*/}
                    {/*                    trigger={trigger}*/}
                    {/*                    isHistory={history}*/}
                    {/*                    isIgnored={ignored}*/}
                    {/*                />*/}
                    {/*            </Tabs.TabPane>*/}
                    {/*        )*/}
                    {/*    })}*/}
                    {/*</Tabs>*/}
                </AutoCard>
            </div>
            <div style={{flex: 1, overflowX: "hidden"}}>
                {script ? (
                    <AutoCard
                        loading={loading}
                        title={
                            <Space>
                                <div>Yak[{script?.Type}] 模块详情</div>
                            </Space>
                        }
                        bordered={false}
                        size={"small"}
                    >
                        <PluginOperator yakScriptId={script.Id} setTrigger={() => setTrigger(!trigger)}
                                        setScript={setScript}/>
                    </AutoCard>
                ) : (
                    <Empty style={{marginTop: 100}}>在左侧所选模块查看详情</Empty>
                )}
            </div>
        </div>
    )
}

DeleteCustomerRecordList: React.FC = () => {
  const [settingsModalVisible, setSettingsModalVisible] = useState<boolean>(false);
  const [settings, setSettings] = useState<DeleteCustomerRecordNotifyRuleInterface>();
  const [allStaffs, setAllStaffs] = useState<StaffOption[]>([]);
  const actionRef = useRef<ActionType>();
  const formRef = useRef<FormInstance>();

  const [exportLoading, setExportLoading] = useState<boolean>(false);
  const queryFormRef = useRef<FormInstance>();
  const [extraFilterParams] = useState<any>();

  const formattedParams = (originParams: any) => {
    const params = {...originParams, ...extraFilterParams};
    if (params.relation_delete_at) {
      [params.delete_customer_start, params.delete_customer_end] = params.relation_delete_at;
      delete params.relation_delete_at;
    }
    if (params.relation_create_at) {
      [params.connection_create_start, params.connection_create_end] = params.relation_create_at;
      delete params.relation_create_at;
    }

    return params;
  };

  useEffect(() => {
    QuerySimpleStaffs({page_size: 5000}).then((res) => {
      if (res.code === 0) {
        const staffs = res?.data?.items?.map((item: SimpleStaffInterface) => {
          return {
            label: item.name,
            value: item.ext_id,
            ...item,
          };
        }) || [];
        setAllStaffs(staffs);
      } else {
        message.error(res.message);
      }
    });
  }, []);

  useEffect(() => {
    GetDeleteCustomerRecordNotifyRule()
      .then((resp) => {
        if (resp && resp.data) {
          const item = resp.data as DeleteCustomerRecordNotifyRuleInterface;
          setSettings(item);
        }
      })
      .catch((err) => {
        message.error(err);
      });
  }, []);

  const columns: ProColumns<DeleteCustomerRecordItem>[] = [
    {
      title: 'ID',
      dataIndex: 'id',
      valueType: 'text',
      hideInTable: true,
      hideInSearch: true,
    },
    {
      title: '删除客户',
      dataIndex: 'ext_customer_name',
      valueType: 'text',
      hideInSearch: true,
      render: (dom, item) => {
        return (
          <div className={'customer-info-field'}>
            <img
              src={item.ext_customer_avatar}
              className={'icon'}
              alt={item.ext_customer_name}
            />
            <div className={'text-group'}>
              <p className={'text'}>
                {item.ext_customer_name}
              </p>
              {item.customer_corp_name && (
                <p className={'text'} style={{ color: '#eda150' }}>@{item.customer_corp_name}</p>
              )}
              {item.customer_type === 1 && (
                <p className={'text'} style={{ color: '#5ec75d' }}>@微信</p>
              )}
            </div>
          </div>
        );
      },
    },
    {
      title: '操作人',
      dataIndex: 'ext_staff_id',
      valueType: 'text',
      renderFormItem: () => {
        return <StaffTreeSelect options={allStaffs}/>;
      },
      render: (dom, item) => {
        return (
          <Space>
            <div className={'tag-like-staff-item'}>
              <img src={item.ext_staff_avatar} className={'icon'} alt={item.staff_name}/>
              <span className={'text'}>{item.staff_name}</span>
            </div>
          </Space>
        );
      },
    },
    {
      title: '删除时间',
      dataIndex: 'relation_delete_at',
      valueType: 'dateRange',
      sorter: true,
      filtered: true,
      render: (dom, item) => {
        return (
          <div
            dangerouslySetInnerHTML={{
              __html: moment(item.relation_delete_at)
                .format('YYYY-MM-DD HH:mm')
                .split(' ')
                .join('<br />'),
            }}
          />
        );
      },
    },
    {
      title: '添加时间',
      dataIndex: 'relation_create_at',
      valueType: 'dateRange',
      sorter: true,
      filtered: true,
      render: (dom, item) => {
        return (
          <div
            dangerouslySetInnerHTML={{
              __html: moment(item.relation_create_at)
                .format('YYYY-MM-DD HH:mm')
                .split(' ')
                .join('<br />'),
            }}
          />
        );
      },
    },

    {
      title: '操作',
      width: 180,
      valueType: 'option',
      render: (__,item) => [
        <a
          key={'detail'}
          onClick={() => {
            history.push(`/staff-admin/customer-management/customer/detail?ext_customer_id=${item.ext_customer_id}`);
          }}
        >
          客户详情
        </a>,
      ],
    },
  ];

  return (
    <PageContainer
      fixedHeader
      header={{
        title: '删人提醒',
        subTitle: (
          <a
            target={'_blank'}
            className={styles.tipsLink}
            // href={'https://www.openscrm.cn/wiki/contact-way'}
          >
            什么是删人提醒？
          </a>
        ),
      }}
      extra={[
        <Button
          type="dashed"
          key={'settings'}
          icon={<SettingOutlined style={{fontSize: 16, verticalAlign: '-3px'}}/>}
          onClick={() => {
            setSettingsModalVisible(true);
          }}
        >
          设置
        </Button>,

        <Button
          key={'export'}
          type="dashed"
          loading={exportLoading}
          icon={<CloudDownloadOutlined style={{fontSize: 16, verticalAlign: '-3px'}}/>}
          onClick={async () => {
            setExportLoading(true);
            try {
              const content = await ExportDeleteCustomerRecord(
                formattedParams(queryFormRef.current?.getFieldsValue()),
              );
              const blob = new Blob([content], {
                type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
              });
              FileSaver.saveAs(blob, `删除记录.xlsx`);
            } catch (e) {
              console.log(e);
              message.error('导出失败');
            }
            setExportLoading(false);
          }}
        >
          导出Excel
        </Button>,
      ]}
    >
      <ProTable<DeleteCustomerRecordItem>
        actionRef={actionRef}
        className={'table'}
        scroll={{x: 'max-content'}}
        columns={columns}
        rowKey="id"
        pagination={{
          pageSizeOptions: ['5', '10', '20', '50', '100'],
          pageSize: 5,
        }}
        toolBarRender={false}
        bordered={false}
        tableAlertRender={false}
        params={{}}
        request={async (originParams: any, sort, filter) => {
          return ProTableRequestAdapter(
            formattedParams(originParams),
            sort,
            filter,
            QueryDeleteCustomerRecord,
          );
        }}
        dateFormatter="string"
      />

      <ModalForm
        formRef={formRef}
        width={660}
        className={'dialog from-item-label-100w'}
        layout={'horizontal'}
        visible={settingsModalVisible}
        onVisibleChange={setSettingsModalVisible}
        onFinish={async (values: DeleteCustomerRecordNotifyRuleInterface) => {
          console.log(values);
          return await HandleRequest(
            {
              is_notify_staff: values.is_notify_staff ? True : False,
              notify_type: values?.notify_type,
              ext_staff_ids: values?.ext_staff_ids,
            },
            UpdateDeleteCustomerRecordRule,
            () => {
              actionRef.current?.clearSelected?.();
              actionRef.current?.reload?.();
            },
          );
        }}
      >
        <h2 className="dialog-title"> 删人提醒设置 </h2>
        <Alert
          showIcon={true}
          closable={false}
          style={{marginBottom: 16}}
          type="info"
          message={
            <Text type={'secondary'}>
              开启「当前状态」之后，选择的「接收通知管理员」将会在企业微信中收到提醒通知
            </Text>
          }
        />
        <ProFormSwitch
          label={'当前状态：'}
          checkedChildren="开启"
          unCheckedChildren="关闭"
          name="is_notify_staff"
          initialValue={settings?.is_notify_staff === True}
        />

        <ProForm.Item
          label="接收通知管理员"
          name="ext_staff_ids"
          style={{width: 435}}
          initialValue={settings?.ext_staff_ids || []}
        >
          <StaffTreeSelect options={allStaffs}/>
        </ProForm.Item>

        <ProFormRadio.Group
          name="notify_type"
          label="通知频率"
          initialValue={settings?.notify_type}
          options={[
            {
              label: '每次通知',
              value: 1,
            },
            {
              label: '每天通知一次（每日8-9点推送昨日汇总）',
              value: 2,
            },
          ]}
        />
      </ModalForm>
    </PageContainer>
  );
}