@ant-design/icons#AppstoreOutlined TypeScript Examples

tabs = [
  { key: "workers", name: "Workers", icon: <RobotFilled /> },
  { key: "tasks", name: "Tasks", icon: <UnorderedListOutlined /> },
  { key: "control", name: "Control", icon: <ControlOutlined /> },
  { key: "queues", name: "Queues", icon: <BoxPlotOutlined /> },
  { key: "issues", name: "Issues", icon: <BugOutlined /> },
  { key: "monitor", name: "Monitor", icon: <RadarChartOutlined /> },
  { key: "agent", name: "Agent", icon: <DeploymentUnitOutlined /> },
  { key: "applications", name: "Applications", icon: <AppstoreOutlined /> },
]

getSiderMenu = (): Menu[] => {
  return [
    {
      id: 'layout',
      icon: <LayoutOutlined style={{ fontSize: 24 }} />,
      title: '布局',
      component: <LayoutComponent />,
    },
    {
      id: 'component',
      icon: <AppstoreOutlined style={{ fontSize: 24 }} />,
      title: '组件',
      component: <Component />,
    },
    {
      id: 'node',
      icon: <ApartmentOutlined style={{ fontSize: 24 }} />,
      title: '节点树',
      component: <NodeTree />,
    },
    {
      id: 'history',
      icon: <HistoryOutlined style={{ fontSize: 24 }} />,
      title: '历史',
      component: <History />,
    },
  ];
}

Footer: React.FC<Props> = ({ currentPath, onGotoPath }) => {
  console.log("currentPath", currentPath);

  return (
    <Segment style={{ padding: 8 }} spacing={10} width="100%" maxWidth={500}>
      <Horizontal horizontalAlign="center">
        <Menu selectedKeys={["/" + currentPath.split("/")[1]]} mode="horizontal">
          <Menu.Item key="/stats" onClick={() => onGotoPath(routes.stats.path())}>
            <DashboardOutlined style={{ fontSize: "2em" }} />
          </Menu.Item>
          <Menu.Item key="/terminal" onClick={() => onGotoPath(routes.terminal.path())}>
            <CodeOutlined style={{ fontSize: "2em" }} />
          </Menu.Item>
          <Menu.Item key="/apps" onClick={() => onGotoPath(routes.apps.path())}>
            <AppstoreOutlined style={{ fontSize: "2em" }} />
          </Menu.Item>
          <Menu.Item key="/account" onClick={() => onGotoPath(routes.account.path())}>
            <UserOutlined style={{ fontSize: "2em" }} />
          </Menu.Item>
        </Menu>
      </Horizontal>
    </Segment>
  );
}

options = [
  {
    label: '商品信息',
    value: 1,
    cover: <AppstoreOutlined />,
    api: goodsListApi,
    fields: [
      { title: '商品名称', key: 'goodsName', ellipsis: true },
      { title: '规格', key: 'sku', tooltip: '商品规格信息' },
      { title: '单价', key: 'price', renderType: 'unit', prefix: '¥' },
      { title: '数量', key: 'count', renderType: 'unit', prefix: 'x' }
    ]
  },
  {
    label: '审核记录',
    value: 2,
    cover: <PushpinOutlined />,
    api: auditListApi,
    fields: [
      { title: '审核人', key: 'auditName' },
      { title: '审核时间', key: 'createDate', renderType: 'datetime' },
      {
        title: '状态',
        key: 'status',
        renderType: 'status',
        options: [
          { label: '待审核', value: 1, status: 'processing' },
          { label: '已通过', value: 2, status: 'success' },
          { label: '已拒绝', value: 3, status: 'error' }
        ]
      },
      { title: '备注', key: 'memo' }
    ]
  },
  {
    label: '操作记录',
    value: 3,
    cover: <SolutionOutlined />,
    api: operationListApi,
    fields: [
      { title: '操作人', key: 'operatorName' },
      { title: '操作时间', key: 'createDate' },
      { title: '操作内容', key: 'content' },
      { title: '备注', key: 'memo' }
    ]
  }
]

RouteMenuData: MenuDataProps[] = [
    // {key: Route.MITM, label: "HTTP(S) 中间人劫持", icon: <FireOutlined/>},
    {
        key: Route.PenTest, label: "手工渗透测试", icon: <AimOutlined/>,
        subMenuData: [
            {key: Route.HTTPHacker, label: "MITM", icon: <FireOutlined/>},
            {key: Route.HTTPFuzzer, label: "Web Fuzzer", icon: <AimOutlined/>},
        ],
    },
    {
        key: Route.GeneralModule, label: "基础安全工具", icon: <RocketOutlined/>,
        subMenuData: [
            {key: Route.Mod_ScanPort, label: "扫描端口/指纹", icon: <EllipsisOutlined/>},
            {key: Route.Mod_Brute, label: "爆破与未授权", icon: <EllipsisOutlined/>, disabled: false},
            // {key: Route.Mod_Subdomain, label: "子域名发现", icon: <EllipsisOutlined/>, disabled: true},
            // {key: Route.Mod_Crawler, label: "基础爬虫", icon: <EllipsisOutlined/>, disabled: true},
            // {key: Route.Mod_SpaceEngine, label: "空间引擎", icon: <EllipsisOutlined/>, disabled: true},
        ],
    },
    {
        key: Route.PoC, label: "专项漏洞检测",
        icon: <FunctionOutlined/>,
    },

    {
        key: Route.ModManagerDetail, label: "插件管理", icon: <AppstoreOutlined/>,
        subMenuData: [
            {key: Route.ModManager, label: "插件仓库", icon: <AppstoreOutlined/>},
            {key: Route.BatchExecutorPage, label: "插件批量执行", icon: <AppstoreOutlined/>},
        ]
    },

    {key: Route.PayloadManager, label: "Payload 管理", icon: <AuditOutlined/>},
    {key: Route.YakScript, label: "Yak Runner", icon: <CodeOutlined/>},
    {
        key: Route.ReverseManager, label: "反连管理", icon: <AppstoreOutlined/>,
        subMenuData: [
            {key: Route.ShellReceiver, label: "端口监听器", icon: <OneToOneOutlined/>},
            {key: Route.ReverseServer, label: "反连服务器", icon: <OneToOneOutlined/>},
            {key: Route.DNSLog, label: "DNSLog", icon: <OneToOneOutlined/>},
            {key: Route.ICMPSizeLog, label: "ICMP-SizeLog", icon: <OneToOneOutlined/>},
            {key: Route.TCPPortLog, label: "TCP-PortLog", icon: <OneToOneOutlined/>},
        ]
    },
    {
        key: Route.DataHandler, label: "数据处理",
        icon: <FunctionOutlined/>,
        subMenuData: [
            {key: Route.Codec, label: "Codec", icon: <FireOutlined/>},
            {key: Route.DataCompare, label: "数据对比", icon: <OneToOneOutlined/>},
        ],
    },

    {
        key: Route.Database, label: "数据库",
        icon: <FunctionOutlined/>,
        subMenuData: [
            {key: Route.DB_HTTPHistory, label: "HTTP History", icon: <OneToOneOutlined/>},
            {key: Route.DB_Ports, label: "端口资产", icon: <OneToOneOutlined/>},
            {key: Route.DB_Domain, label: "域名资产", icon: <FireOutlined/>},
            {key: Route.DB_ExecResults, label: "插件执行结果", icon: <FireOutlined/>},
            {key: Route.DB_Risk, label: "漏洞与风险", icon: <BugOutlined/>},
            {key: Route.DB_Report, label: "报告(Beta*)", icon: <FireOutlined/>},
        ],
    },
    // {
    //     key: Route.IGNORE, label: "常用工具包", icon: <FireOutlined/>,
    //     subMenuData: [
    //         {key: Route.Codec, label: "编码与解码", icon: <EllipsisOutlined/>},
    //         {key: Route.ShellReceiver, label: "端口开放助手", icon: <FireOutlined/>},
    //     ],
    // },
]

IconSymbol: FC = () => {
  return (
    <Row>
      {/*<CaretUpOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
      {/*/>*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
      {/*/>*/}
      {/*<StepBackwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      {/*<StepForwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      <StepForwardOutlined />
      <ShrinkOutlined />
      <ArrowsAltOutlined />
      <DownOutlined />
      <UpOutlined />
      <LeftOutlined />
      <RightOutlined />
      <CaretUpOutlined />
      <CaretDownOutlined />
      <CaretLeftOutlined />
      <CaretRightOutlined />
      <VerticalAlignTopOutlined />
      <RollbackOutlined />
      <FastBackwardOutlined />
      <FastForwardOutlined />
      <DoubleRightOutlined />
      <DoubleLeftOutlined />
      <VerticalLeftOutlined />
      <VerticalRightOutlined />
      <VerticalAlignMiddleOutlined />
      <VerticalAlignBottomOutlined />
      <ForwardOutlined />
      <BackwardOutlined />
      <EnterOutlined />
      <RetweetOutlined />
      <SwapOutlined />
      <SwapLeftOutlined />
      <SwapRightOutlined />
      <ArrowUpOutlined />
      <ArrowDownOutlined />
      <ArrowLeftOutlined />
      <ArrowRightOutlined />
      <LoginOutlined />
      <LogoutOutlined />
      <MenuFoldOutlined />
      <MenuUnfoldOutlined />
      <BorderBottomOutlined />
      <BorderHorizontalOutlined />
      <BorderInnerOutlined />
      <BorderOuterOutlined />
      <BorderLeftOutlined />
      <BorderRightOutlined />
      <BorderTopOutlined />
      <BorderVerticleOutlined />
      <PicCenterOutlined />
      <PicLeftOutlined />
      <PicRightOutlined />
      <RadiusBottomleftOutlined />
      <RadiusBottomrightOutlined />
      <RadiusUpleftOutlined />
      <RadiusUprightOutlined />
      <FullscreenOutlined />
      <FullscreenExitOutlined />
      <QuestionOutlined />
      <PauseOutlined />
      <MinusOutlined />
      <PauseCircleOutlined />
      <InfoOutlined />
      <CloseOutlined />
      <ExclamationOutlined />
      <CheckOutlined />
      <WarningOutlined />
      <IssuesCloseOutlined />
      <StopOutlined />
      <EditOutlined />
      <CopyOutlined />
      <ScissorOutlined />
      <DeleteOutlined />
      <SnippetsOutlined />
      <DiffOutlined />
      <HighlightOutlined />
      <AlignCenterOutlined />
      <AlignLeftOutlined />
      <AlignRightOutlined />
      <BgColorsOutlined />
      <BoldOutlined />
      <ItalicOutlined />
      <UnderlineOutlined />
      <StrikethroughOutlined />
      <RedoOutlined />
      <UndoOutlined />
      <ZoomInOutlined />
      <ZoomOutOutlined />
      <FontColorsOutlined />
      <FontSizeOutlined />
      <LineHeightOutlined />
      <SortAscendingOutlined />
      <SortDescendingOutlined />
      <DragOutlined />
      <OrderedListOutlined />
      <UnorderedListOutlined />
      <RadiusSettingOutlined />
      <ColumnWidthOutlined />
      <ColumnHeightOutlined />
      <AreaChartOutlined />
      <PieChartOutlined />
      <BarChartOutlined />
      <DotChartOutlined />
      <LineChartOutlined />
      <RadarChartOutlined />
      <HeatMapOutlined />
      <FallOutlined />
      <RiseOutlined />
      <StockOutlined />
      <BoxPlotOutlined />
      <FundOutlined />
      <SlidersOutlined />
      <AndroidOutlined />
      <AppleOutlined />
      <WindowsOutlined />
      <IeOutlined />
      <ChromeOutlined />
      <GithubOutlined />
      <AliwangwangOutlined />
      <DingdingOutlined />
      <WeiboSquareOutlined />
      <WeiboCircleOutlined />
      <TaobaoCircleOutlined />
      <Html5Outlined />
      <WeiboOutlined />
      <TwitterOutlined />
      <WechatOutlined />
      <AlipayCircleOutlined />
      <TaobaoOutlined />
      <SkypeOutlined />
      <FacebookOutlined />
      <CodepenOutlined />
      <CodeSandboxOutlined />
      <AmazonOutlined />
      <GoogleOutlined />
      <AlipayOutlined />
      <AntDesignOutlined />
      <AntCloudOutlined />
      <ZhihuOutlined />
      <SlackOutlined />
      <SlackSquareOutlined />
      <BehanceSquareOutlined />
      <DribbbleOutlined />
      <DribbbleSquareOutlined />
      <InstagramOutlined />
      <YuqueOutlined />
      <AlibabaOutlined />
      <YahooOutlined />
      <RedditOutlined />
      <SketchOutlined />
      <AccountBookOutlined />
      <AlertOutlined />
      <ApartmentOutlined />
      <ApiOutlined />
      <QqOutlined />
      <MediumWorkmarkOutlined />
      <GitlabOutlined />
      <MediumOutlined />
      <GooglePlusOutlined />
      <AppstoreAddOutlined />
      <AppstoreOutlined />
      <AudioOutlined />
      <AudioMutedOutlined />
      <AuditOutlined />
      <BankOutlined />
      <BarcodeOutlined />
      <BarsOutlined />
      <BellOutlined />
      <BlockOutlined />
      <BookOutlined />
      <BorderOutlined />
      <BranchesOutlined />
      <BuildOutlined />
      <BulbOutlined />
      <CalculatorOutlined />
      <CalendarOutlined />
      <CameraOutlined />
      <CarOutlined />
      <CarryOutOutlined />
      <CiCircleOutlined />
      <CiOutlined />
      <CloudOutlined />
      <ClearOutlined />
      <ClusterOutlined />
      <CodeOutlined />
      <CoffeeOutlined />
      <CompassOutlined />
      <CompressOutlined />
      <ContactsOutlined />
      <ContainerOutlined />
      <ControlOutlined />
      <CopyrightCircleOutlined />
      <CopyrightOutlined />
      <CreditCardOutlined />
      <CrownOutlined />
      <CustomerServiceOutlined />
      <DashboardOutlined />
      <DatabaseOutlined />
      <DeleteColumnOutlined />
      <DeleteRowOutlined />
      <DisconnectOutlined />
      <DislikeOutlined />
      <DollarCircleOutlined />
      <DollarOutlined />
      <DownloadOutlined />
      <EllipsisOutlined />
      <EnvironmentOutlined />
      <EuroCircleOutlined />
      <EuroOutlined />
      <ExceptionOutlined />
      <ExpandAltOutlined />
      <ExpandOutlined />
      <ExperimentOutlined />
      <ExportOutlined />
      <EyeOutlined />
      <FieldBinaryOutlined />
      <FieldNumberOutlined />
      <FieldStringOutlined />
      <DesktopOutlined />
      <DingtalkOutlined />
      <FileAddOutlined />
      <FileDoneOutlined />
      <FileExcelOutlined />
      <FileExclamationOutlined />
      <FileOutlined />
      <FileImageOutlined />
      <FileJpgOutlined />
      <FileMarkdownOutlined />
      <FilePdfOutlined />
      <FilePptOutlined />
      <FileProtectOutlined />
      <FileSearchOutlined />
      <FileSyncOutlined />
      <FileTextOutlined />
      <FileUnknownOutlined />
      <FileWordOutlined />
      <FilterOutlined />
      <FireOutlined />
      <FlagOutlined />
      <FolderAddOutlined />
      <FolderOutlined />
      <FolderOpenOutlined />
      <ForkOutlined />
      <FormatPainterOutlined />
      <FrownOutlined />
      <FunctionOutlined />
      <FunnelPlotOutlined />
      <GatewayOutlined />
      <GifOutlined />
      <GiftOutlined />
      <GlobalOutlined />
      <GoldOutlined />
      <GroupOutlined />
      <HddOutlined />
      <HeartOutlined />
      <HistoryOutlined />
      <HomeOutlined />
      <HourglassOutlined />
      <IdcardOutlined />
      <ImportOutlined />
      <InboxOutlined />
      <InsertRowAboveOutlined />
      <InsertRowBelowOutlined />
      <InsertRowLeftOutlined />
      <InsertRowRightOutlined />
      <InsuranceOutlined />
      <InteractionOutlined />
      <KeyOutlined />
      <LaptopOutlined />
      <LayoutOutlined />
      <LikeOutlined />
      <LineOutlined />
      <LinkOutlined />
      <Loading3QuartersOutlined />
      <LoadingOutlined />
      <LockOutlined />
      <MailOutlined />
      <ManOutlined />
      <MedicineBoxOutlined />
      <MehOutlined />
      <MenuOutlined />
      <MergeCellsOutlined />
      <MessageOutlined />
      <MobileOutlined />
      <MoneyCollectOutlined />
      <MonitorOutlined />
      <MoreOutlined />
      <NodeCollapseOutlined />
      <NodeExpandOutlined />
      <NodeIndexOutlined />
      <NotificationOutlined />
      <NumberOutlined />
      <PaperClipOutlined />
      <PartitionOutlined />
      <PayCircleOutlined />
      <PercentageOutlined />
      <PhoneOutlined />
      <PictureOutlined />
      <PoundCircleOutlined />
      <PoundOutlined />
      <PoweroffOutlined />
      <PrinterOutlined />
      <ProfileOutlined />
      <ProjectOutlined />
      <PropertySafetyOutlined />
      <PullRequestOutlined />
      <PushpinOutlined />
      <QrcodeOutlined />
      <ReadOutlined />
      <ReconciliationOutlined />
      <RedEnvelopeOutlined />
      <ReloadOutlined />
      <RestOutlined />
      <RobotOutlined />
      <RocketOutlined />
      <SafetyCertificateOutlined />
      <SafetyOutlined />
      <ScanOutlined />
      <ScheduleOutlined />
      <SearchOutlined />
      <SecurityScanOutlined />
      <SelectOutlined />
      <SendOutlined />
      <SettingOutlined />
      <ShakeOutlined />
      <ShareAltOutlined />
      <ShopOutlined />
      <ShoppingCartOutlined />
      <ShoppingOutlined />
      <SisternodeOutlined />
      <SkinOutlined />
      <SmileOutlined />
      <SolutionOutlined />
      <SoundOutlined />
      <SplitCellsOutlined />
      <StarOutlined />
      <SubnodeOutlined />
      <SyncOutlined />
      <TableOutlined />
      <TabletOutlined />
      <TagOutlined />
      <TagsOutlined />
      <TeamOutlined />
      <ThunderboltOutlined />
      <ToTopOutlined />
      <ToolOutlined />
      <TrademarkCircleOutlined />
      <TrademarkOutlined />
      <TransactionOutlined />
      <TrophyOutlined />
      <UngroupOutlined />
      <UnlockOutlined />
      <UploadOutlined />
      <UsbOutlined />
      <UserAddOutlined />
      <UserDeleteOutlined />
      <UserOutlined />
      <UserSwitchOutlined />
      <UsergroupAddOutlined />
      <UsergroupDeleteOutlined />
      <VideoCameraOutlined />
      <WalletOutlined />
      <WifiOutlined />
      <BorderlessTableOutlined />
      <WomanOutlined />
      <BehanceOutlined />
      <DropboxOutlined />
      <DeploymentUnitOutlined />
      <UpCircleOutlined />
      <DownCircleOutlined />
      <LeftCircleOutlined />
      <RightCircleOutlined />
      <UpSquareOutlined />
      <DownSquareOutlined />
      <LeftSquareOutlined />
      <RightSquareOutlined />
      <PlayCircleOutlined />
      <QuestionCircleOutlined />
      <PlusCircleOutlined />
      <PlusSquareOutlined />
      <MinusSquareOutlined />
      <MinusCircleOutlined />
      <InfoCircleOutlined />
      <ExclamationCircleOutlined />
      <CloseCircleOutlined />
      <CloseSquareOutlined />
      <CheckCircleOutlined />
      <CheckSquareOutlined />
      <ClockCircleOutlined />
      <FormOutlined />
      <DashOutlined />
      <SmallDashOutlined />
      <YoutubeOutlined />
      <CodepenCircleOutlined />
      <AliyunOutlined />
      <PlusOutlined />
      <LinkedinOutlined />
      <AimOutlined />
      <BugOutlined />
      <CloudDownloadOutlined />
      <CloudServerOutlined />
      <CloudSyncOutlined />
      <CloudUploadOutlined />
      <CommentOutlined />
      <ConsoleSqlOutlined />
      <EyeInvisibleOutlined />
      <FileGifOutlined />
      <DeliveredProcedureOutlined />
      <FieldTimeOutlined />
      <FileZipOutlined />
      <FolderViewOutlined />
      <FundProjectionScreenOutlined />
      <FundViewOutlined />
      <MacCommandOutlined />
      <PlaySquareOutlined />
      <OneToOneOutlined />
      <RotateLeftOutlined />
      <RotateRightOutlined />
      <SaveOutlined />
      <SwitcherOutlined />
      <TranslationOutlined />
      <VerifiedOutlined />
      <VideoCameraAddOutlined />
      <WhatsAppOutlined />

      {/*</Col>*/}
    </Row>
  );
}

export function BrickBook({
  storyId,
  storyType,
  stories,
  brickDoc,
  titleLinkEnabled,
  titleLinkTarget,
  notToSetPageTitle,
  renderDocLink,
}: BrickBookProps): React.ReactElement {
  const story = findStoryById(storyId, storyType, stories);
  const actions = story ? story.actions : null;
  const confList: BrickConf[] = [].concat(story?.conf).filter(Boolean);
  const developerStorage = storage.getItem(NS_DEVELOPERS) ?? {};

  const { t } = useTranslation(NS_DEVELOPERS);

  const [mode, setMode] = React.useState(developerStorage.mode ?? "json");
  React.useEffect(() => {
    if (story && !notToSetPageTitle) {
      getRuntime().applyPageTitle(i18nText(story.text));
    }
  }, [notToSetPageTitle, story]);

  if (!story) {
    return null;
  }

  const onChange = (e: RadioChangeEvent): void => {
    const value = e.target.value;
    developerStorage.mode = value;
    setMode(value);
    storage.setItem(NS_DEVELOPERS, developerStorage);
  };

  const title = getStoryTitle(story);
  const description = i18nText(story.description) || "";

  return (
    <>
      <section>
        <h1 style={{ fontSize: "16px", marginBottom: "10px" }}>
          {titleLinkEnabled ? (
            <Link
              to={`/developers/brick-book/${story.type}/${story.storyId}`}
              {...(titleLinkTarget ? { target: titleLinkTarget } : {})}
            >
              {title} <FileSearchOutlined style={{ fontSize: "16px" }} />
            </Link>
          ) : (
            title
          )}
          <span className={cssStyle.subTitle}> {story.author}</span>
        </h1>
        <p style={{ marginBottom: "20px", color: "#595959" }}>
          {" "}
          {description}{" "}
        </p>
      </section>
      <section>
        <div className={cssStyle.previewHeader}>
          <div className={cssStyle.left}>
            {" "}
            {t(K.PREVIEW)} <AppstoreOutlined />
            <span className={cssStyle.subTitle}>
              {" "}
              {story.category}:{story.type}:{story.storyId}
            </span>
          </div>
          <Radio.Group
            defaultValue={mode}
            buttonStyle="solid"
            onChange={onChange}
          >
            <Radio.Button value="json">JSON</Radio.Button>
            <Radio.Button value="yaml">YAML</Radio.Button>
          </Radio.Group>
        </div>
        <div
          className={cssStyle.brickPreview}
          style={{
            gridTemplateColumns: `repeat(${story.previewColumns || 1}, 1fr)`,
          }}
        >
          {confList.map((item, i) => (
            <BrickDemo
              key={`${storyId}-${i}`}
              mode={mode}
              defaultConf={item}
              actions={actions}
            />
          ))}
        </div>
      </section>
      <section className={cssStyle.sectionTitle}>
        <h2 style={{ marginBottom: "10px" }}>
          API <CodeOutlined />
        </h2>
        {
          // 兼容第二版构件文档（demo和doc都在stories.json里）
          (story?.doc as StoryDoc)?.id ? (
            <BrickDocument
              storyId={storyId}
              storyType={storyType}
              doc={story?.doc as StoryDoc}
              renderLink={renderDocLink}
            />
          ) : brickDoc ? (
            // 兼容第一版构件文档（docs.jsons)
            <BrickDocument
              storyId={storyId}
              storyType={storyType}
              doc={brickDoc}
              renderLink={renderDocLink}
            />
          ) : (
            // 兼容最老的一般文档（手写markdown）
            <BrickDoc doc={story.doc as string} />
          )
        }
      </section>
    </>
  );
}

Applications = () => {
  const service = new ApplicationService();
  const [applicationPurging, setApplicationPurging] = useState<boolean>();
  const [applicationDeleting, setApplicationDeleting] = useState<boolean>();
  const { applications, currentApp, listApplications, deleteApplication } =
    useApplication();
  const [selectedApp, setSelectedApp] = useState<
    | {
        app_name: string;
        app_description: string;
        app_key: string;
        created_at: number;
        owner: string;
        fo_triggers: [any];
      }
    | undefined
  >();

  const [isCleanModalVisible, setIsCleanModalVisible] = useState(false);
  const [subscriptionVisible, setSubscriptionVisible] =
    useState<boolean>(false);

  useEffect(() => {
    listApplications();
  }, []);

  useEffect(() => {
    // Initialise selected app when the apps are fetched and the selectedApp is null
    if (applications.length && !selectedApp)
      setSelectedApp(
        applications.find((app) => {
          return app.app_name === currentApp;
        })
      );
  }, [applications]);

  function handleSelectApp(app) {
    setSelectedApp(app);
  }

  function handleCleanApp(clean) {
    setIsCleanModalVisible(false);
    if (selectedApp) {
      confirm({
        title: "Clean application",
        icon: <ExclamationCircleOutlined />,
        content: `Do you really want to clean application ${clean.kind} older than ${clean.count} ${clean.unit}`,
        onOk() {
          setApplicationPurging(true);
          service
            .cleanApplication(
              selectedApp.app_name,
              clean.kind,
              clean.count,
              clean.unit
            )
            .then(handleAPIResponse)
            .then((_: any) => {
              message.info("Deletion request processing...");
            }, handleAPIError)
            .catch(handleAPIError)
            .finally(() => {
              setApplicationPurging(false);
            });
        },
      });
    }
  }

  function handlePurgeApp() {
    if (selectedApp) {
      confirm({
        title: "Purge application",
        icon: <ExclamationCircleOutlined />,
        content: "Do you want to purge all events from selected application?",
        onOk() {
          setApplicationPurging(true);
          service
            .purgeApplication(selectedApp.app_name)
            .then(handleAPIResponse)
            .then((_: any) => {
              message.info("Application purged!");
            }, handleAPIError)
            .catch(handleAPIError)
            .finally(() => {
              setApplicationPurging(false);
            });
        },
      });
    }
  }

  function handleDeleteApp() {
    if (selectedApp) {
      confirm({
        title: "Delete application",
        icon: <ExclamationCircleOutlined />,
        content: "Do you want to delete selected application?",
        onOk() {
          setApplicationDeleting(true);
          service
            .deleteApplication(selectedApp.app_name)
            .then(handleAPIResponse)
            .then((_: any) => {
              deleteApplication(selectedApp.app_name);
              setSelectedApp(undefined);
              message.info("Application deleted!");
            }, handleAPIError)
            .catch(handleAPIError)
            .finally(() => {
              setApplicationDeleting(false);
            });
        },
      });
    }
  }

  return (
    <Row justify="center">
      <Modal
        footer={[
          <Button form="cleanForm" key="submit" htmlType="submit">
            Clean
          </Button>,
        ]}
        onCancel={() => setIsCleanModalVisible(false)}
        visible={isCleanModalVisible}
      >
        <Form
          id="cleanForm"
          onFinish={handleCleanApp}
          initialValues={{ count: 60, unit: "days", kind: "task" }}
          style={{ marginTop: 20 }}
        >
          <FormItem label="Clean" name="kind" style={{ width: 130 }}>
            <Select>
              <Option value="task">Tasks</Option>
              <Option value="worker">Workers</Option>
            </Select>
          </FormItem>
          <Input.Group compact style={{ marginTop: 16 }}>
            <Text style={{ marginTop: 4, marginRight: 4 }}>Older than: </Text>
            <FormItem name="count">
              <InputNumber min={1} max={1000} step={1} placeholder="count" />
            </FormItem>
            <FormItem name="unit">
              <Select style={{ width: 80 }}>
                <Option value="minutes">Minutes</Option>
                <Option value="hours">Hours</Option>
                <Option value="days">Days</Option>
              </Select>
            </FormItem>
          </Input.Group>
        </Form>
      </Modal>
      <Row style={{ width: "100%" }}>
        <Col xxl={4} xl={4} md={6} lg={6} sm={24} xs={24}>
          <AppsList onSelectApp={handleSelectApp} selectedApp={selectedApp} />
        </Col>
        <Col xxl={20} xl={20} md={18} lg={18} sm={24} xs={24}>
          {selectedApp && (
            <PageHeader
              onBack={() => setSelectedApp(undefined)}
              title={selectedApp.app_name}
              tags={
                currentApp == selectedApp.app_name ? (
                  <Tag color="blue">Current</Tag>
                ) : (
                  <></>
                )
              }
              subTitle={selectedApp.app_description}
              extra={[
                <Button
                  key="1"
                  type="dashed"
                  danger
                  ghost
                  onClick={(e) => setIsCleanModalVisible(true)}
                  loading={applicationPurging}
                >
                  Clean
                </Button>,
                <Button
                  key="2"
                  type="dashed"
                  danger
                  ghost
                  onClick={handlePurgeApp}
                  loading={applicationPurging}
                >
                  Purge
                </Button>,
                <Button
                  key="3"
                  danger
                  ghost
                  onClick={handleDeleteApp}
                  loading={applicationDeleting}
                >
                  Delete
                </Button>,
              ]}
            >
              <Card
                size="small"
                style={{ marginBottom: "24px" }}
                extra={
                  <Radio.Group
                    onChange={(v) => {
                      v.target.value === "INFO"
                        ? setSubscriptionVisible(false)
                        : setSubscriptionVisible(true);
                    }}
                    defaultValue="INFO"
                    size="small"
                  >
                    <Radio.Button value="INFO">INFO</Radio.Button>
                    <Radio.Button value="SUBSCRIPTION">
                      SUBSCRIPTION
                    </Radio.Button>
                  </Radio.Group>
                }
                title={
                  <Row justify="space-between">
                    <Col>
                      <Space>
                        <AppstoreOutlined />
                        <Text strong>Application</Text>
                      </Space>
                    </Col>
                  </Row>
                }
              >
                {subscriptionVisible ? (
                  <Row>
                    <SyntaxHighlighter
                      customStyle={{ width: "100%" }}
                      style={atelierCaveDark}
                      language="json"
                    >
                      {agentSubscriptionsSnippet(selectedApp)}
                    </SyntaxHighlighter>
                  </Row>
                ) : (
                  <>
                    <Row style={{ marginBottom: "16px" }}>
                      <Space direction="horizontal">
                        <Text strong>API KEY</Text>
                        <Text copyable code>
                          {selectedApp.app_key}
                        </Text>
                      </Space>
                    </Row>

                    <Row style={{ marginBottom: "16px" }}>
                      <Space direction="horizontal">
                        <Text strong>Created</Text>
                        <Text code>{adaptTime(selectedApp.created_at)}</Text>
                      </Space>
                    </Row>

                    <Row>
                      <Space
                        direction="horizontal"
                        style={{ marginBottom: "16px" }}
                      >
                        <Text strong>Owner</Text>
                        <Text code>{selectedApp.owner}</Text>
                      </Space>
                    </Row>
                  </>
                )}
              </Card>

              <Triggers
                selectedApp={selectedApp}
                setSelectedApp={setSelectedApp}
              />

              <Indices selectedApp={selectedApp} />
            </PageHeader>
          )}
        </Col>
      </Row>
    </Row>
  );
}

NodeTree = () => {
  const [search, setSearch] = useState('');
  const [expandedKeys, setExpandedKeys] = useState<Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const { appService, refresh } = useContext(AppContext);

  const page = appService.project.getCurrentPage();
  useEffect(() => {
    setAutoExpandParent(true);
    setExpandedKeys([
      // @ts-ignore
      ...new Set([
        ...expandedKeys,
        ...(page?.currentNode.map(({ id }) => id) || []),
      ]),
    ]);
    // eslint-disable-next-line
  }, [appService.project, page?.currentNode[0]]);

  const trees = useMemo((): DataNode[] => {
    const getTree = (node: NodeService | string, id?: number): DataNode => {
      if (isString(node)) {
        return {
          title: node,
          key: `${id}:${node}`,
          icon: (
            <Tooltip placement="right" title="Text">
              <ProfileOutlined />
            </Tooltip>
          ),
        };
      } else {
        const { id, _name, type, children } = node;
        nodeKeyId.set(id, node);
        return {
          title: `${_name}`,
          key: id,
          icon: ({ selected }) =>
            selected ? (
              <CheckCircleTwoTone twoToneColor="#52c41a" />
            ) : type === 'Component' ? (
              <Tooltip placement="right" title="Component">
                <AppstoreOutlined />
              </Tooltip>
            ) : (
              <Tooltip placement="right" title="Element">
                <BuildOutlined />
              </Tooltip>
            ),

          children: isString(children)
            ? [
                {
                  title: children,
                  key: `${id}:${children}`,
                  icon: (
                    <Tooltip placement="right" title="Text">
                      <ProfileOutlined />
                    </Tooltip>
                  ),
                },
              ]
            : (children
                ?.map(child => child && getTree(child, id))
                .filter(_ => _) as DataNode[]),
        };
      }
    };
    return page?.page ? [getTree(page.page)] : [];
    // eslint-disable-next-line
  }, [refresh, page?.page]);

  const filter = (treeData: DataNode[]): DataNode[] => {
    function matchSearch<T extends string>(title: T): boolean {
      return !search || new RegExp(_.escapeRegExp(search), 'ig').test(title);
    }

    return treeData
      .map(tree => {
        const { title, children } = tree;
        tree.children = children && filter(children);
        if (tree.children?.length || matchSearch(title as string)) {
          return tree;
        }
        return false;
      })
      .filter(_ => _) as DataNode[];
  };

  return (
    <div className={styles.container}>
      <div className={styles.search}>
        <Input.Search
          placeholder="Search Node"
          onChange={e => setSearch(e.target.value)}
        />
      </div>
      <div className={styles.scrollWarper}>
        <Tree
          showIcon
          onSelect={(_, { node }) => {
            if (node) {
              const nodeService = nodeKeyId.get(node.key);
              if (nodeService) {
                page.setCurrentNode([nodeService]);
              }
            }
          }}
          showLine={{ showLeafIcon: false }}
          selectedKeys={
            appService.project.getCurrentPage()?.currentNode.map(({ id }) => id) ||
            []
          }
          autoExpandParent={autoExpandParent}
          expandedKeys={expandedKeys}
          onExpand={expandedKeysValue => {
            setAutoExpandParent(false);
            setExpandedKeys(expandedKeysValue);
          }}
          treeData={filter(cloneJsxObject(trees))}
        />
      </div>
    </div>
  );
}

Event: React.FC = () => {
  const history = useHistory();
  const { t } = useTranslation();
  const [view, setView] = useState<'card' | 'list'>('card');
  const dispatch = useDispatch();
  const [severity, setSeverity] = useState<number>();
  const [curClusterItems, setCurClusterItems] = useState<string[]>([]);
  const { hourRange, queryContent } = useSelector<RootState, eventStoreState>((state) => state.event);
  const DateRangeItems: RelativeRange[] = useMemo(
    () => [
      { num: 6, unit: 'hours', description: t('hours') },
      { num: 12, unit: 'hours', description: t('hours') },
      { num: 1, unit: 'day', description: t('天') },
      { num: 2, unit: 'days', description: t('天') },
      { num: 3, unit: 'days', description: t('天') },
      { num: 7, unit: 'days', description: t('天') },
      { num: 14, unit: 'days', description: t('天') },
      { num: 30, unit: 'days', description: t('天') },
      { num: 60, unit: 'days', description: t('天') },
      { num: 90, unit: 'days', description: t('天') },
    ],
    [],
  );
  const tableRef = useRef({
    handleReload() {},
  });
  const cardRef = useRef({
    reloadCard() {},
  });
  const isAddTagToQueryInput = useRef(false);
  const [curBusiId, setCurBusiId] = useState<number>(-1);
  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
  const [interval, setInterval] = useState<number>(0);

  useInterval(
    () => {
      view === 'list' ? tableRef.current.handleReload() : cardRef.current.reloadCard();
    },
    interval > 0 ? interval * 1000 : undefined,
  );

  const columns = [
    {
      title: t('集群'),
      dataIndex: 'cluster',
      width: 120,
    },
    {
      title: t('规则标题&事件标签'),
      dataIndex: 'rule_name',
      render(title, { id, tags }) {
        const content =
          tags &&
          tags.map((item) => (
            <Tag
              color='blue'
              key={item}
              onClick={(e) => {
                if (!queryContent.includes(item)) {
                  isAddTagToQueryInput.current = true;
                  saveData('queryContent', queryContent ? `${queryContent.trim()} ${item}` : item);
                }
              }}
            >
              {item}
            </Tag>
          ));
        return (
          <>
            <div>
              <a style={{ padding: 0 }} onClick={() => history.push(`/alert-cur-events/${id}`)}>
                {title}
              </a>
            </div>
            <div>
              <span className='event-tags'>{content}</span>
            </div>
          </>
        );
      },
    },
    {
      title: t('触发时间'),
      dataIndex: 'trigger_time',
      width: 120,
      render(value) {
        return moment(value * 1000).format('YYYY-MM-DD HH:mm:ss');
      },
    },
    {
      title: t('操作'),
      dataIndex: 'operate',
      width: 120,
      render(value, record) {
        return (
          <>
            <Button
              size='small'
              type='link'
              onClick={() => {
                history.push('/alert-mutes/add', {
                  cluster: record.cluster,
                  tags: record.tags.map((tag) => {
                    const [key, value] = tag.split('=');
                    return {
                      func: '==',
                      key,
                      value,
                    };
                  }),
                });
              }}
            >
              屏蔽
            </Button>
            <Button
              size='small'
              type='link'
              danger
              onClick={() =>
                deleteAlertEventsModal(curBusiId, [record.id], () => {
                  setSelectedRowKeys(selectedRowKeys.filter((key) => key !== record.id));
                  view === 'list' && tableRef.current.handleReload();
                })
              }
            >
              删除
            </Button>
          </>
        );
      },
    },
  ];

  function saveData(prop, data) {
    dispatch({
      type: 'event/saveData',
      prop,
      data,
    });
  }

  function renderLeftHeader() {
    const intervalItems: RelativeRange[] = [
      { num: 0, unit: 'second', description: 'off' },
      { num: 5, unit: 'seconds', description: 's' },
      { num: 30, unit: 'seconds', description: 's' },
      { num: 60, unit: 'seconds', description: 's' },
    ];

    const menu = (
      <Menu
        onClick={(e) => {
          setInterval(e.key as any);
        }}
      >
        {intervalItems.map(({ num, description }) => (
          <Menu.Item key={num}>
            {num > 0 && <span className='num'>{num}</span>}
            {description}
          </Menu.Item>
        ))}
      </Menu>
    );
    return (
      <div className='table-operate-box' style={{ background: '#fff' }}>
        <div className='left'>
          <Button icon={<AppstoreOutlined />} onClick={() => setView('card')} />
          <Button icon={<UnorderedListOutlined />} onClick={() => setView('list')} style={{ marginLeft: 8, marginRight: 8 }} />

          <DateRangePicker
            showRight={false}
            leftList={DateRangeItems}
            value={hourRange}
            onChange={(range: RelativeRange) => {
              if (range.num !== hourRange.num || range.unit !== hourRange.unit) {
                saveData('hourRange', range);
              }
            }}
          />
          <ColumnSelect
            onSeverityChange={(e) => setSeverity(e)}
            onBusiGroupChange={(e) => setCurBusiId(typeof e === 'number' ? e : -1)}
            onClusterChange={(e) => setCurClusterItems(e)}
          />
          <Input
            className='search-input'
            prefix={<SearchOutlined />}
            placeholder='模糊搜索规则和标签(多个关键词请用空格分隔)'
            value={queryContent}
            onChange={(e) => saveData('queryContent', e.target.value)}
            onPressEnter={(e) => view === 'list' && tableRef.current.handleReload()}
          />
        </div>
        <div className='right'>
          {view === 'list' && (
            <Button
              danger
              style={{ marginRight: 8 }}
              disabled={selectedRowKeys.length === 0}
              onClick={() =>
                deleteAlertEventsModal(curBusiId, selectedRowKeys, () => {
                  setSelectedRowKeys([]);
                  view === 'list' && tableRef.current.handleReload();
                })
              }
            >
              批量删除
            </Button>
          )}
          <RefreshIcon
            onClick={() => {
              view === 'list' && tableRef.current.handleReload();
              view === 'card' && cardRef.current.reloadCard()
            }}
          />
          <Dropdown overlay={menu}>
            <Button className='interval-btn' icon={<DownOutlined />}>
              {interval > 0 ? interval + 's' : 'off'}
            </Button>
          </Dropdown>
        </div>
      </div>
    );
  }

  useEffect(() => {
    if (isAddTagToQueryInput.current) {
      view === 'list' && tableRef.current.handleReload();
      isAddTagToQueryInput.current = false;
    }
  }, [queryContent]);

  useEffect(() => {
    view === 'list' && tableRef.current.handleReload();
  }, [curClusterItems, severity, hourRange, curBusiId, view]);

  return (
    <PageLayout icon={<AlertOutlined />} title={t('活跃告警')} hideCluster>
      <div className='event-content cur-events'>
        <div className='table-area' style={{ padding: view === 'card' ? 0 : undefined }}>
          {view === 'card' ? (
            <div style={{ width: '100%', height: '100%', background: '#eee' }}>
              <Card
                ref={cardRef}
                header={renderLeftHeader()}
                filter={Object.assign(
                  { hours: hourRange.unit !== 'hours' ? hourRange.num * 24 : hourRange.num },
                  curClusterItems.length ? { clusters: curClusterItems.join(',') } : {},
                  severity ? { severity } : {},
                  queryContent ? { query: queryContent } : {},
                  { bgid: curBusiId },
                )}
              />
            </div>
          ) : (
            <DataTable
              ref={tableRef}
              antProps={{
                rowKey: 'id',
                rowClassName: (record: { severity: number }, index) => {
                  return SeverityColor[record.severity - 1] + '-left-border';
                },
                rowSelection: {
                  selectedRowKeys: selectedRowKeys,
                  onChange(selectedRowKeys, selectedRows) {
                    setSelectedRowKeys(selectedRowKeys.map((key) => Number(key)));
                  },
                },
                // scroll: { x: 'max-content' },
              }}
              url={`/api/n9e/alert-cur-events/list`}
              customQueryCallback={(data) =>
                Object.assign(
                  data,
                  { hours: hourRange.unit !== 'hours' ? hourRange.num * 24 : hourRange.num },
                  curClusterItems.length ? { clusters: curClusterItems.join(',') } : {},
                  severity ? { severity } : {},
                  queryContent ? { query: queryContent } : {},
                  { bgid: curBusiId },
                )
              }
              pageParams={{
                curPageName: 'p',
                pageSizeName: 'limit',
                pageSize: 30,
                pageSizeOptions: ['30', '100', '200', '500'],
              }}
              apiCallback={({ dat: { list: data, total } }) => ({
                data,
                total,
              })}
              columns={columns}
              reloadBtnType='btn'
              reloadBtnPos='right'
              showReloadBtn
              filterType='flex'
              leftHeader={renderLeftHeader()}
            />
          )}
        </div>
      </div>
    </PageLayout>
  );
}