@ant-design/icons#StopOutlined JavaScript Examples

render() {
    const {
      state: { isPredicting, actionKey, probability, interval },
      props: { cameraEnabled, ai },
      drive,
      stop,
      test,
      loadModel,
    } = this;
    return (
      <div className="ai-train">
        <Form layout="inline">
          <Form.Item label="操作间隔">
            <InputNumber
              value={interval}
              onChange={(interval) => this.setState({ interval })}
            />
          </Form.Item>
          <Form.Item label="动作">
            <Tag>
              {aiAction[actionKey].name} {aiAction[actionKey].icon}{" "}
              {probability.toFixed(2)}
            </Tag>
          </Form.Item>
        </Form>
        <br />
        <Form layout="inline">
          <Form.Item>
            <Button
              icon={<ImportOutlined />}
              loading={isPredicting}
              onClick={loadModel}
            >
              导入模型
            </Button>
          </Form.Item>
          <Form.Item>
            <Button
              icon={<BugOutlined />}
              loading={isPredicting}
              onClick={test}
              disabled={!cameraEnabled || !ai || !ai.model}
            >
              测试
            </Button>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <Button
              type="danger"
              key="predic"
              loading={isPredicting}
              onClick={drive}
              icon={<CarOutlined />}
              disabled={!cameraEnabled || !ai || !ai.model}
            >
              开始 Ai 驾驶
            </Button>
          </Form.Item>

          <Form.Item>
            <Button
              onClick={stop}
              icon={<StopOutlined />}
              disabled={!isPredicting}
              key="stop"
            >
              停止 Ai 驾驶
            </Button>
          </Form.Item>
          <br />
        </Form>
      </div>
    );
  }

sidebar = () => {
  return (
    <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
      <Menu.Item key="1">
        <Link to={{ pathname: "/" }}>
          <HomeOutlined />
          <span>首页</span>
        </Link>
      </Menu.Item>
      <Menu.Item key="5">
        <Link to={{ pathname: "/user-management" }}>
          <UserOutlined />
          <span>用户管理</span>
        </Link>
      </Menu.Item>
      <SubMenu
        key="sub1"
        title={
          <span>
            <FileOutlined />
            <span>文件管理</span>
          </span>
        }
      >
        <Menu.Item key="sub1-1">
          <Link to={{ pathname: "/file/list" }}>
            <OrderedListOutlined />
            <span>文件列表</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub1-2">
          <Link to={{ pathname: "/file/add" }}>
            <UploadOutlined />
            <span>文件上传</span>
          </Link>
        </Menu.Item>
      </SubMenu>
      <SubMenu
        key="sub2"
        title={
          <span>
            <DashboardOutlined />
            <span>可视化图表</span>
          </span>
        }
      >
        <Menu.Item key="sub2-1">
          <Link to={{ pathname: "/charts/line-chart" }}>
            <LineChartOutlined />
            <span>折线图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-2">
          <Link to={{ pathname: "/charts/bar-chart" }}>
            <BarChartOutlined />
            <span>柱状图</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub2-3">
          <Link to={{ pathname: "/charts/pie-chart" }}>
            <PieChartOutlined />
            <span>饼状图</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub5"
        title={
          <span>
            <FileExcelOutlined />
            <span>Excel表格</span>
          </span>
        }
      >
        <Menu.Item key="sub5-1">
          <Link to={{ pathname: "/excel/export-csv" }}>
            <ExportOutlined />
            <span>Export csv</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub4"
        title={
          <span>
            <EditOutlined />
            <span>文本编辑器</span>
          </span>
        }
      >
        <Menu.Item key="sub4-1">
          <Link to={{ pathname: "/rich-text-editor" }}>
            <Html5Outlined />
            <span>富文本编辑器</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub4-2">
          <Link to={{ pathname: "/md-editor" }}>
            <FileMarkdownOutlined />
            <span>Markdown编辑器</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <SubMenu
        key="sub3"
        title={
          <span>
            <BugOutlined />
            <span>错误页面</span>
          </span>
        }
      >
        <Menu.Item key="sub3-1">
          <Link to={{ pathname: "/not-found" }}>
            <InboxOutlined />
            <span>404</span>
          </Link>
        </Menu.Item>
        <Menu.Item key="sub3-2">
          <Link to={{ pathname: "/not-allow" }}>
            <StopOutlined />
            <span>403</span>
          </Link>
        </Menu.Item>
      </SubMenu>

      <Menu.Item key="6">
        <a
          href="https://github.com/cnscorpions/React-Nest-Admin"
          target="_blank"
          rel="noopener noreferrer"
        >
          <GithubOutlined />
          <span>Github</span>
        </a>
      </Menu.Item>
    </Menu>
  );
}

function Files(props) {
  const {
    currentConfig,
    configList,
    configListLoading,
    currentContent,
    deleteConfig,
    aid,
    env,
    loadConfigList,
    appName,
    k8sClusters,
  } = props;
  let { zoneList } = props;
  const fileChanged = currentConfig && currentConfig.content !== currentContent;
  useEffect(() => {
    if (props.appName && props.env) {
      loadConfigList(props.appName, props.env);
    }
  }, []);

  k8sClusters.forEach((cluster) => {
    if (
      cluster.env.indexOf(env) > -1 &&
      zoneList.findIndex((zone) => zone.zone_code === cluster.zone_code) < 0
    ) {
      zoneList.push({
        zone_code: cluster.zone_code,
        zone_name: cluster.zone_name,
      });
    }
  });

  const renderConfigListByZone = (zone) => {
    let configs = (configList || []).filter((item) => item.zone === zone);
    if (configs.length === 0) {
      return (
        <div className={styles.noConfigTip}>
          <StopOutlined />
          该Zone暂无配置
        </div>
      );
    }

    return configs.map((cfg, index) => {
      const active = cfg.id === currentConfig?.id;
      return (
        <li
          key={index}
          className={[styles.configItem, active && styles.configItemActive].join(' ')}
          onClick={() => {
            if (fileChanged) {
              confirm({
                title: '当前配置未保存',
                content: '当前文件修改未保存，切换配置后当前的修改将丢失。是否切换文件?',
                cancelText: '我点错了',
                okText: '确认',
                onOk: () => {
                  props.loadConfigDetail(cfg.id);
                },
              });
            } else {
              props.loadConfigDetail(cfg.id);
            }
          }}
        >
          <div className={styles.configListTextItem}>
            <div>
              {cfg.config_status === 1 ? (
                <Tag color="green">已发布</Tag>
              ) : cfg.config_status === 2 ? (
                <Tag color="yellow">未发布</Tag>
              ) : (
                ''
              )}
              {cfg.name}.{cfg.format}
            </div>
            <div>
              {currentConfig &&
                currentConfig.content !== currentContent &&
                cfg.id === currentConfig.id && <span className={styles.notSavedTip}>未保存</span>}
            </div>
          </div>
          <div>
            <div onClick={(ev) => ev.stopPropagation()}>
              <Popconfirm
                title={'谨慎操作，删除后无法找回.确定删除?'}
                onConfirm={(ev) => {
                  deleteConfig(cfg.id).then((r) => {
                    loadConfigList(props.appName, props.env);
                  });
                }}
              >
                <OptionButton type={'text'}>
                  <DeleteOutlined />
                </OptionButton>
              </Popconfirm>
            </div>
          </div>
        </li>
      );
    });
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <div className={styles.options}>
        <OptionButton onClick={() => props.showCreateModal(true)} title={'新增配置'}>
          <FileOutlined />
        </OptionButton>
        {currentConfig && (
          <OptionButton title={'历史变更'} onClick={() => props.showHistoryModal(true)}>
            <HistoryOutlined />
          </OptionButton>
        )}
      </div>

      <ul className={styles.zoneList}>
        <ScrollArea style={{ height: '100%' }}>
          {configListLoading && (
            <div style={{ textAlign: 'center', paddingTop: '30px' }}>
              <Spin />
              <div>加载中</div>
            </div>
          )}

          {!configListLoading &&
            zoneList &&
            zoneList.map((zone, index) => {
              return (
                <li key={index}>
                  <div className={styles.zoneTitle}>{zone.zone_name}</div>
                  <ul className={styles.configList}>{renderConfigListByZone(zone.zone_code)}</ul>
                </li>
              );
            })}

          {!configListLoading && (!zoneList || !zoneList.length) && (
            <div className={styles.noConfigTip}>
              <StopOutlined />
              当前应用环境无机房
            </div>
          )}
        </ScrollArea>
      </ul>
    </div>
  );
}

Annotation = observer(({ item, store }) => {
  const removeHoney = () => (
    <Tooltip placement="topLeft" title="Unset this result as a ground truth">
      <Button
        size="small"
        type="primary"
        onClick={ev => {
          ev.preventDefault();
          item.setGroundTruth(false);
        }}
      >
        <StarOutlined />
      </Button>
    </Tooltip>
  );

  const setHoney = () => {
    const title = item.ground_truth
      ? "Unset this result as a ground truth"
      : "Set this result as a ground truth";

    return (
      <Tooltip placement="topLeft" title={title}>
        <Button
          size="small"
          look="link"
          onClick={ev => {
            ev.preventDefault();
            item.setGroundTruth(!item.ground_truth);
          }}
        >
          {item.ground_truth ? (
            <StarFilled />
          ) : (
            <StarOutlined />
          )}
        </Button>
      </Tooltip>
    );
  };

  const toggleVisibility = e => {
    e.preventDefault();
    e.stopPropagation();
    item.toggleVisibility();
    const c = document.getElementById(`c-${item.id}`);

    if (c) c.style.display = item.hidden ? "none" : "unset";
  };

  const highlight = () => {
    const c = document.getElementById(`c-${item.id}`);

    if (c) c.classList.add("hover");
  };

  const unhighlight = () => {
    const c = document.getElementById(`c-${item.id}`);

    if (c) c.classList.remove("hover");
  };

  /**
   * Default badge for saved annotations
   */
  let badge = <Badge status="default" />;

  /**
   *
   */
  let annotationID;

  /**
   * Title of card
   */
  if (item.userGenerate && !item.sentUserGenerate) {
    annotationID = <span className={styles.title}>Unsaved Annotation</span>;
  } else {
    if (item.pk) {
      annotationID = <span className={styles.title}>ID {item.pk}</span>;
    } else if (item.id) {
      annotationID = <span className={styles.title}>ID {item.id}</span>;
    }
  }

  /**
   * Badge for processing of user generate annotation
   */
  if (item.userGenerate) {
    badge = <Badge status="processing" />;
  }

  /**
   * Badge for complete of user generate annotation
   */
  if (item.userGenerate && item.sentUserGenerate) {
    badge = <Badge status="success" />;
  }

  const btnsView = () => {
    const confirm = () => {
      // ev.preventDefault();
      // debugger;
      item.list.deleteAnnotation(item);
    };

    return (
      <div className={styles.buttons}>
        {store.hasInterface("ground-truth") && (item.ground_truth ? removeHoney() : setHoney())}
        &nbsp;
        {store.hasInterface("annotations:delete") && (
          <Tooltip placement="topLeft" title="Delete selected annotation">
            <Popconfirm
              placement="bottomLeft"
              title={"Please confirm you want to delete this annotation"}
              onConfirm={confirm}
              okText="Delete"
              okType="danger"
              cancelText="Cancel"
            >
              <Button size="small" danger style={{ background: "transparent" }}>
                <DeleteOutlined />
              </Button>
            </Popconfirm>
          </Tooltip>
        )}
      </div>
    );
  };

  return (
    <List.Item
      key={item.id}
      className={item.selected ? `${styles.annotation} ${styles.annotation_selected}` : styles.annotation}
      onClick={() => {
        !item.selected && store.annotationStore.selectAnnotation(item.id);
      }}
      onMouseEnter={highlight}
      onMouseLeave={unhighlight}
    >
      <div className={styles.annotationcard}>
        <div>
          <div className={styles.title}>
            {badge}
            {annotationID}
          </div>
          {item.pk ? "Created" : "Started"}
          <i>{item.createdAgo ? ` ${item.createdAgo} ago` : ` ${Utils.UDate.prettyDate(item.createdDate)}`}</i>
          {item.createdBy && item.pk ? ` by ${item.createdBy}` : null}
          <DraftPanel item={item} />
        </div>
        {/* platform uses was_cancelled so check both */}
        {store.hasInterface("skip") && (item.skipped || item.was_cancelled) && (
          <Tooltip placement="topLeft" title="Skipped annotation">
            <StopOutlined className={styles.skipped} />
          </Tooltip>
        )}
        {store.annotationStore.viewingAllAnnotations && (
          <Button size="small" type="primary" ghost onClick={toggleVisibility}>
            {item.hidden ? <EyeInvisibleOutlined /> : <EyeOutlined />}
          </Button>
        )}
        {item.selected && btnsView()}
      </div>
    </List.Item>
  );
})

render() {
    const {
      fixContent,
      ttsInput,
      props: {
        statusInfo,
        action,
        cameraEnabled,
        videoEl,
        onTTS,
        ttsPlaying,
        setting,
        playAudio,
        serverConfig,
        changeChannel,
        editabled,
        cameraList,
        channelStatus,
        saveServerConfig,
        isFullscreen,
        session,
        webrtcChannel,
      },
    } = this;
    const { isShowButton, ttsInputVisible, text } = this.state;
    const { channelList = [], specialChannel = {} } = serverConfig;
    const speedChannel = channelList.find(
      ({ id }) => id === specialChannel.speed
    );
    const { audioList = [] } = serverConfig;

    return (
      <div className="controller">
        <Router className="controller-router">
          <Ai
            path="ai/learn/*"
            canvasRef={videoEl}
            cameraEnabled={cameraEnabled}
            action={action}
            onAi={(isAiControlling) => this.setState({ isAiControlling })}
          />
          <ObjectDetection
            path="ai/coco-ssd/*"
            videoEl={videoEl}
            cameraEnabled={cameraEnabled}
            action={action}
            onAi={(isAiControlling) => this.setState({ isAiControlling })}
          />
        </Router>
        {!isFullscreen && (
          <Form className="controller-form" size="small" layout="inline">
            <Form.Item>
              <Popover
                content={fixContent}
                title="修正"
                trigger="click"
                placement="topLeft"
              >
                <Button icon={<SlidersOutlined />}>修正</Button>
              </Popover>
            </Form.Item>
            {speedChannel && (
              <>
                <Form.Item>
                  <Popover
                    placement="topLeft"
                    content={
                      <Slider
                        defaultValue={speedChannel.valuePostive * 100}
                        min={0}
                        max={100}
                        onChange={(v) => {
                          speedChannel.valuePostive = v / 100;
                          saveServerConfig({
                            channelList,
                          });
                        }}
                        arrowPointAtCenter
                        style={{ width: "30vw" }}
                      />
                    }
                  >
                    <Button shape="round">
                      前进:{Math.round(speedChannel.valuePostive * 100)}
                    </Button>
                  </Popover>
                </Form.Item>
                <Form.Item>
                  <Popover
                    placement="topLeft"
                    content={
                      <Slider
                        defaultValue={speedChannel.valueNegative * -100}
                        min={0}
                        max={100}
                        style={{ width: "30vw" }}
                        onChange={(v) => {
                          speedChannel.valueNegative = (v / 100) * -1;
                          saveServerConfig({
                            channelList,
                          });
                        }}
                      />
                    }
                  >
                    <Button shape="round">
                      倒退:{Math.round(speedChannel.valueNegative * -100)}
                    </Button>
                  </Popover>
                </Form.Item>
              </>
            )}

            <Form.Item>
              <Gamepad
                changeChannel={changeChannel}
                channelList={serverConfig.channelList}
                channelStatus={channelStatus}
                playAudio={playAudio}
                serverConfig={serverConfig}
              />
            </Form.Item>

            <Form.Item>
              <Orientation
                changeChannel={changeChannel}
                channelStatus={channelStatus}
                serverConfig={serverConfig}
              />
            </Form.Item>
            <Form.Item>
              <Keybord
                playAudio={playAudio}
                channelStatus={channelStatus}
                channelList={serverConfig.channelList}
                changeChannel={changeChannel}
                serverConfig={serverConfig}
                onEnter={() => {
                  this.setState({ ttsInputVisible: true });
                  setTimeout(() => {
                    ttsInput.current && ttsInput.current.focus();
                  }, 200);
                }}
              />
            </Form.Item>
            <Form.Item>
              <Popover
                arrowPointAtCenter
                trigger="click"
                placement="topRight"
                visible={ttsInputVisible}
                onVisibleChange={(ttsInputVisible) => {
                  this.setState({ ttsInputVisible });
                  setTimeout(() => {
                    ttsInput.current && ttsInput.current.focus();
                  }, 200);
                }}
                content={
                  <form>
                    <Input.Search
                      ref={ttsInput}
                      name="tts"
                      style={{ width: "60vw" }}
                      placeholder="发送语音"
                      enterButton="发送"
                      value={text}
                      onChange={(e) => this.setState({ text: e.target.value })}
                      onSearch={(text) => {
                        onTTS(text);
                        this.setState({ text: "" });
                      }}
                      loading={ttsPlaying}
                      onKeyDown={(e) => {
                        e.stopPropagation();
                        if (e.key === "Escape") {
                          this.setState({ ttsInputVisible: false });
                        }
                      }}
                    />
                  </form>
                }
              >
                <Button shape="round">
                  <SendOutlined />
                </Button>
              </Popover>
            </Form.Item>

            {audioList
              .filter((i) => i.showFooter)
              .map(({ path, text, name }) => (
                <Form.Item key={name}>
                  <Button
                    shape="round"
                    onClick={() => playAudio({ path, text })}
                    icon={<SoundOutlined />}
                  >
                    {name}
                  </Button>
                </Form.Item>
              ))}

            <Form.Item>
              <Popover
                placement="topRight"
                content={
                  <Space size={[16, 16]} wrap>
                    <Form.Item extra="显示触控 UI">
                      <Switch
                        checked={isShowButton}
                        onChange={(isShowButton) => {
                          store.set("is-show-button", isShowButton);
                          this.setState({ isShowButton });
                        }}
                        checkedChildren={<DragOutlined />}
                        unCheckedChildren={<DragOutlined />}
                      />
                    </Form.Item>
                    {audioList
                      .filter((i) => !i.showFooter)
                      .map(({ path, text, name, type }) => (
                        <Form.Item extra={`播放${name}`} key={name}>
                          {type === "audio" && (
                            <Button
                              shape="round"
                              onClick={() => playAudio({ path })}
                              icon={<SoundOutlined />}
                            >
                              {name}
                            </Button>
                          )}
                          {type === "text" && (
                            <Button
                              shape="round"
                              onClick={() => playAudio({ text })}
                              icon={<SoundOutlined />}
                            >
                              {name}
                            </Button>
                          )}
                          {type === "stop" && (
                            <Button
                              shape="round"
                              onClick={() => playAudio({ stop: true })}
                              icon={<StopOutlined />}
                            >
                              {name}
                            </Button>
                          )}
                        </Form.Item>
                      ))}
                  </Space>
                }
              >
                <Button shape="round">
                  <MoreOutlined />
                </Button>
              </Popover>
            </Form.Item>
            <Form.Item>
              <Microphone
                url={
                  setting.host &&
                  `${
                    window.location.protocol === "https:" ? "wss://" : "ws://"
                  }${setting.host}/audio`
                }
              />
            </Form.Item>
          </Form>
        )}
        <ControlUI
          webrtcChannel={webrtcChannel}
          session={session}
          channelStatus={channelStatus}
          isShowButton={isShowButton}
          uiComponentList={serverConfig.uiComponentList}
          channelList={serverConfig.channelList}
          changeChannel={changeChannel}
          editabled={editabled}
          cameraList={cameraList}
          setting={setting}
          isFullscreen={isFullscreen}
          statusInfo={statusInfo}
        />
      </div>
    );
  }

render() {
    const {
      state: {
        loading,
        threshold,
        interval,
        detecting,
        driving,
        detectionList,
        targetClass,
        pauseThreshold,
      },
      props: { videoSize, cameraEnabled, action, videoEl },
      startDetect,
      start,
      stop,
      stopDetect,
    } = this;
    return (
      <div className="ai-object-detection">
        <Spin spinning={loading} tip={loading}>
          <Form
            className="inline-form"
            layout="inline"
            style={{ padding: "1em" }}
            size="small"
          >
            <Form.Item>
              <Switch
                onChange={(v) => (v ? startDetect() : stopDetect())}
                checked={detecting}
                disabled={!cameraEnabled}
                checkedChildren="检测"
                unCheckedChildren="检测"
              />
            </Form.Item>
            <Form.Item>
              <Popover
                placement="topLeft"
                content={
                  <Radio.Group
                    onChange={({ target: { value: targetClass } }) =>
                      this.setState({ targetClass })
                    }
                    value={targetClass}
                  >
                    {detectionList.map((i) => (
                      <Radio value={i}>{i}</Radio>
                    ))}
                  </Radio.Group>
                }
              >
                <Button shape="round">目标:{targetClass || "无"}</Button>
              </Popover>
            </Form.Item>
            <Form.Item>
              <Popover
                placement="topLeft"
                content={
                  <Slider
                    min={0}
                    max={100}
                    value={threshold}
                    onChange={(threshold) => this.setState({ threshold })}
                    arrowPointAtCenter
                    style={{ width: "30vw" }}
                  />
                }
              >
                <Button shape="round">目标阀值:{threshold}</Button>
              </Popover>
            </Form.Item>
            <Form.Item>
              <Popover
                placement="topLeft"
                content={
                  <Slider
                    min={0}
                    max={100}
                    value={pauseThreshold}
                    onChange={(pauseThreshold) =>
                      this.setState({ pauseThreshold })
                    }
                    arrowPointAtCenter
                    style={{ width: "30vw" }}
                  />
                }
              >
                <Button shape="round">跟随阀值:{pauseThreshold}</Button>
              </Popover>
            </Form.Item>
            <Form.Item>
              <Popover
                placement="topLeft"
                content={
                  <InputNumber
                    min={0}
                    max={1000}
                    value={interval}
                    onChange={(interval) => this.setState({ interval })}
                  />
                }
              >
                <Button shape="round">间隔:{interval} ms</Button>
              </Popover>
            </Form.Item>

            <Form.Item>
              <Button
                icon={<CarOutlined />}
                type="danger"
                onClick={start}
                disabled={!detecting || driving || !targetClass}
              >
                开始驾驶
              </Button>
            </Form.Item>
            <Form.Item>
              <Button
                icon={<StopOutlined />}
                onClick={stop}
                disabled={!driving}
              >
                停止驾驶
              </Button>
            </Form.Item>

            <Form.Item>
              <Tag>方向{action.direction.toFixed(2)}</Tag>
              <Tag>油门{action.speed.toFixed(2)}</Tag>
            </Form.Item>
          </Form>
        </Spin>
        <div
          className="ai-object-detection-canvas-container"
          style={{
            opacity: cameraEnabled ? 1 : 0,
            transform: `scale(${videoSize / 50})`,
          }}
        >
          {videoEl &&
            <canvas ref={this.canvas} width={videoEl.width} height={videoEl.height}></canvas>
          }
        </div>
      </div>
    );
  }

export default function Status({
  statusInfo,
  piPowerOff,
  wsConnected,
  delay = 0,
  isFullscreen,
  setting,
  isLogin,
  session,
  changeEditabled,
  channelStatus,
  changeChannel,
  serverConfig,
  version,
  connectType,
  onCarMicphoneChange,
  locked,
  onControllerMicphoneChange = () => {},
  enabledControllerMicphone = true,
}) {
  const isWebRTC = connectType === "webrtc";
  const { sharedEndTime } = serverConfig;

  const gamepadPress = ({ detail: { index, value } }) => {
    if (index === 3 && value > 0.5) {
      onControllerMicphoneChange(!enabledControllerMicphone);
    }
  };

  useKeyPress(
    "t",
    () => onControllerMicphoneChange(!enabledControllerMicphone),
    {
      events: ["keyup"],
    }
  );

  useEventListener("gamepadpress", gamepadPress);

  return (
    <Form layout="inline" className="app-status" size="small">
      <Form.Item>
        <Link to={`${process.env.PUBLIC_URL}/controller`}>
          <img className="logo" src="/logo-256.png" alt="N-RC" />
        </Link>
        <span>N RC</span>
      </Form.Item>
      <Form.Item>
        <Tag
          style={{
            width: "7em",
          }}
          icon={
            locked ? (
              <StopOutlined />
            ) : wsConnected ? (
              <LinkOutlined />
            ) : (
              <DisconnectOutlined />
            )
          }
          color={locked || delay > 80 || !wsConnected ? "red" : "green"}
          size="xs"
        >
          {isWebRTC ? "直连" : "中转"}:{delay.toFixed(0)}
        </Tag>
      </Form.Item>
      {(serverConfig.channelList || [])
        .filter(({ enabled, type }) => enabled && type === "switch")
        .map(({ pin, name }) => (
          <Form.Item key={pin}>
            <Switch
              checked={channelStatus[pin] || false}
              checkedChildren={name}
              unCheckedChildren={name}
              onChange={(value) => changeChannel({ pin, value })}
            />
          </Form.Item>
        ))}

      {isLogin && isWebRTC && (
        <Form.Item>
          <Switch
            checked={enabledControllerMicphone}
            onChange={onControllerMicphoneChange}
            checkedChildren={
              <>
                <DesktopOutlined /> <AudioOutlined />
              </>
            }
            unCheckedChildren={
              <>
                <DesktopOutlined /> <AudioMutedOutlined />
              </>
            }
          />
        </Form.Item>
      )}

      {isLogin && (
        <Form.Item>
          <AudioPlayer
            session={session}
            connectType={connectType}
            onMicphoneChange={onCarMicphoneChange}
            url={`${
              window.location.protocol === "https:" ? "wss://" : "ws://"
            }${setting.host}/microphone`}
          />
        </Form.Item>
      )}

      <Form.Item>
        <Switch
          checkedChildren={<FormOutlined />}
          unCheckedChildren={<FormOutlined />}
          onChange={changeEditabled}
        ></Switch>
      </Form.Item>

      <Form.Item>
        <Link to={`${process.env.PUBLIC_URL}/setting`}>
          <Button
            size="small"
            icon={<SettingOutlined />}
            shape="circle"
          ></Button>
        </Link>
      </Form.Item>

      {document.body.requestFullscreen && (
        <Form.Item>
          <Button
            type="primary"
            shape="circle"
            icon={
              isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />
            }
            onClick={() => {
              if (isFullscreen) {
                document.exitFullscreen();
              } else {
                document.body.requestFullscreen();
              }
            }}
          ></Button>
        </Form.Item>
      )}

      {wsConnected && isLogin && (
        <Form.Item>
          <Button
            type="danger"
            shape="circle"
            icon={<PoweroffOutlined />}
            onClick={piPowerOff}
          ></Button>
        </Form.Item>
      )}

      {wsConnected &&
        isLogin &&
        Object.keys(statusInfo).map((key) => {
          const { color, label, value } = statusInfo[key];
          return !["gps"].includes(label) ? (
            <Form.Item key={key}>
              <Tag color={color}>
                {label}:{value}
              </Tag>
            </Form.Item>
          ) : undefined;
        })}

      {wsConnected && sharedEndTime && (
        <Form.Item>
          <Tag
            icon={<HourglassOutlined />}
            color={session && session.endTime && "orange"}
          >
            {((sharedEndTime - new Date().getTime()) / 1000).toFixed(0)}s
          </Tag>
        </Form.Item>
      )}

      {version && (
        <Form.Item>
          <Tag>v{version}</Tag>
        </Form.Item>
      )}
    </Form>
  );
}