@ant-design/icons#HddOutlined JavaScript Examples

The following examples show how to use @ant-design/icons#HddOutlined. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: confgo.jsx    From juno with Apache License 2.0 4 votes vote down vote up
render() {
    const that = this;
    const {
      appId = 0,
      app = {},
      apps = [],
      configList = [],
      configText,
      commonText,
      appConfigList = [],
      configChangeList = [],
      statusList = [],
      configHistoryList = [],
      resourceData = {},
      appInfo: { aid, appName },
      msg,
      idcList,
      file_path = '',
      zoneCode,
    } = this.props;
    console.log('render -> configText', configText);

    const { users = [] } = app;
    const appInfo = appConfigList[0] || {};
    const {
      caid,
      file_name,
      format,
      env,
      filterKey,
      selectItemID,
      selectKey,
      selectValue,
      selectComment,
      selectIsResource,
      selectResourceID,
      selectIsPublic,
      fileDelModalVisible: showFileManage,
      fileDelConfirmLoading,
      result_list = [],
    } = this.state;
    const changeNum = configList.filter((v) => v.status * 1 !== 1).length;

    const leftCardStyle = {
      borderRadius: '4px',
      marginTop: '4px',
      marginLeft: '4px',
    };
    const statusMap = (t, status) => {
      const map = {
        1: <span></span>,
        2: <span>{getOpSapn('new')}</span>,
        3: <span>{getOpSapn('update')}</span>,
        4: <span>{getOpSapn('del')}</span>,
      };
      return map[status];
    };

    const changListCols = [
      {
        key: 'key',
        dataIndex: 'key',
        title: 'Block',
        width: 120,
        render(t, r) {
          return <span style={{ wordBreak: 'break-word' }}>{t}</span>;
        },
      },
      {
        key: 'op_type',
        dataIndex: 'op_type',
        title: '操作',
        width: 80,
        render(t) {
          const opMap = {
            1: getOpSapn('new', '新增'),
            2: getOpSapn('update', '更新'),
            3: getOpSapn('del', '删除'),
          };
          return <span>{opMap[t]}</span>;
        },
      },
      {
        key: 'old_value',
        dataIndex: 'old_value',
        title: '旧值',
        render(t) {
          let tmp = t;
          if (t.length > 200) {
            tmp = tmp.substring(0, 200) + '...';
          }
          return <span style={{ wordBreak: 'break-word' }}>{tmp}</span>;
        },
      },
      {
        key: 'new_value',
        dataIndex: 'new_value',
        title: '新值',
        render(t) {
          let tmp = t;
          if (t.length > 200) {
            tmp = tmp.substring(0, 200) + '...';
          }
          return <span style={{ wordBreak: 'break-word' }}>{tmp}</span>;
        },
      },
      {
        key: 'update_time',
        dataIndex: 'update_time',
        title: '时间',
        width: 180,
        render(t) {
          return moment(t * 1000).format('YYYY-MM-DD HH:mm:ss');
        },
      },
      {
        key: 'op_name',
        dataIndex: 'op_name',
        width: 180,
        title: '操作人',
      },
    ];

    const statusCol = [
      {
        key: 'is_use',
        dataIndex: 'is_use',
        title: (
          <span>
            配置状态
            <Tooltip
              title={`当前实例上的systemd配置文件项是否接入配置中心\n。若显示未接入,则需要修改systemd下发配置,路径改为配置中心提供的路径\n。若已经修改下发过,点击【同步实例状态】刷新。`}
            >
              <QuestionCircleOutlined style={{ marginLeft: '6px' }} />
            </Tooltip>
          </span>
        ),
        render(t) {
          return t ? getOpSapn('new', '已接入') : <div>{getOpSapn('del', '未接入')}</div>;
        },
      },
      {
        key: 'is_latest',
        dataIndex: 'is_latest',
        title: (
          <span>
            文件状态
            <Tooltip
              title={`当前实例上的配置文件是否为最新发布\n。若显示未同步,点击【刷新文件状态】。若刷新无效则需要【重新发布】一次。`}
            >
              <QuestionCircleOutlined style={{ marginLeft: '6px' }} />
            </Tooltip>
          </span>
        ),
        render(t) {
          return t ? getOpSapn('new', '已同步') : getOpSapn('del', '未同步');
        },
      },
      {
        key: 'is_effect',
        dataIndex: 'is_effect',
        title: (
          <span>
            配置状态
            <Tooltip title={`重启之后应用配置是否生效`}>
              <QuestionCircleOutlined style={{ marginLeft: '6px' }} />
            </Tooltip>
          </span>
        ),
        render(t) {
          return t ? getOpSapn('new', '已生效') : <div>{getOpSapn('del', '未生效')}</div>;
        },
      },
      {
        key: 'hostname',
        dataIndex: 'hostname',
        title: '实例名称',
      },
      {
        key: 'message',
        dataIndex: 'message',
        title: '提交日志',
      },
      {
        key: 'timestamp',
        dataIndex: 'timestamp',
        title: '文件同步时间/进程启动时间',
        render(t, r) {
          const { process_start_time = 0, is_latest, is_use } = r;
          if (process_start_time !== 0) {
            const syncTime = t * 1000;
            const startTime = process_start_time * 1000;
            //进程生效状态
            let process_start_status = null;
            if (syncTime > startTime) {
              //配置未完全生效
              process_start_status = (
                <Tooltip title={'配置文件已经同步完成,进程尚未重启生效'}>
                  <Icon type="clock-circle" style={{ color: 'orange' }} />
                </Tooltip>
              );
            } else if (is_latest && is_use) {
              // 配置文件已同步,进程已重启,生效
              process_start_status = (
                <Tooltip title={'最新配置已经生效'}>
                  <Icon type="check-circle" style={{ color: 'green' }} />
                </Tooltip>
              );
            }
            return (
              <div>
                <p>{moment(syncTime).format('YYYY-MM-DD HH:mm:ss')}</p>
                <p>
                  {moment(startTime).format('YYYY-MM-DD HH:mm:ss')} {process_start_status}
                </p>
              </div>
            );
          }
          return (
            <div>
              <p>{moment(t * 1000).format('YYYY-MM-DD HH:mm:ss')}</p>
            </div>
          );
        },
      },
      {
        key: 'params',
        dataIndex: 'params',
        title: (
          <span>
            启动参数
            <Tooltip
              title={
                '当前实例上的systemd配置中的启动参数, ${ConfigDir}变量为配置中心默认下发路径。启动时间为进程启动时间。'
              }
            >
              <Icon style={{ marginLeft: '6px' }} type="question-circle" />
            </Tooltip>
          </span>
        ),
        render(t, r) {
          const paramsArr = t.split('/bin/%(program_name)s');
          if (paramsArr.length !== 2) {
            return t;
          }
          const params = paramsArr[1];
          return (
            <div>
              <p style={{ margin: 0 }}>{params}</p>
            </div>
          );
        },
      },
      {
        key: 'op',
        dataIndex: 'op',
        title: '操作',
        render(t, r) {
          const { pub_id, is_latest } = r;
          if (is_latest) {
            return (
              <div>
                <Button
                  style={{ color: 'black' }}
                  onClick={(e) => {
                    that.showConfirm('restart', this.state.zone_code, r.hostname);
                  }}
                >
                  重启
                </Button>
              </div>
            );
          }
        },
      },
    ];

    const customPanelStyle = {
      background: '#f7f7f7',
      borderRadius: 4,
      marginBottom: 8,
      border: 0,
      overflow: 'hidden',
    };

    //文本编辑器options
    const options = {
      lineNumbers: true, //显示行号
      mode: { name: 'text/html' }, //定义mode
      theme: 'ambiance', //选中的theme
      lineWrapping: true,
    };

    if (msg === '权限错误') {
      return (
        <div style={{ marginTop: 10 }}>
          <Alert
            message="权限不足"
            description="对线上配置操作需要管理员权限"
            type="error"
            showIcon
          />
        </div>
      );
    }
    let idcArr = [];
    let zone_codeMap = [];

    idcList.forEach((element) => {
      idcArr.push(element.zone_code);
      zone_codeMap[element.zone_code] = element.zone_name;
    });

    const genHeader = (record) => (
      <div>
        <div className={'cube'}>
          {record.is_public == 0 && <Tag color="#2db7f5">私有</Tag>}
          {record.is_public == 1 && <Tag color="#f50">公有</Tag>}
          {record.is_public == 2 && <Tag color="#87d068">关联</Tag>}
        </div>
        <div className={'cube-title'}>
          <h3>{record.key}</h3>
        </div>
      </div>
    );

    const genExtra = (record) => (
      <div>
        {statusMap(record.key, record.status)}
        <Divider type="vertical" />
        {record.status != 4 && (
          <Tag
            color={'blue'}
            onClick={(event) => {
              event.stopPropagation();
              that.setState({
                selectItemID: record.id,
                selectKey: record.key,
                selectValue: record.value,
                selectComment: record.comment,
                selectIsResource: record.is_resource,
                selectResourceID: record.resource_id,
                selectIsPublic: record.is_public,
                showUpdateItem: true,
              });
              that.getEnvResource();
            }}
          >
            编辑
          </Tag>
        )}
        {record.status != 4 && (
          <Popconfirm
            title="确定删除吗?"
            onConfirm={() => {
              that.delItem({ id: record.id });
            }}
          >
            <Tag color={'red'}>删除</Tag>
          </Popconfirm>
        )}
      </div>
    );

    let configItemList = [];
    configList.forEach((element) => {
      configItemList.push(
        <Panel
          header={genHeader(element)}
          key={element.key}
          className="site-collapse-custom-panel"
          extra={genExtra(element)}
        >
          <ReactCodeMirror
            ref="editor"
            value={element.value}
            options={{
              mode: 'text/x-toml',
              lineNumbers: true,
              autoMatchParens: true,
              lineWrapping: false,
              readOnly: this.state.readOnly,
              scrollbarStyle: null,
            }}
          />
        </Panel>,
      );
    });

    return (
      <Layout>
        <Sider width={250} style={{ backgroundColor: 'transparent' }}>
          <Card style={leftCardStyle}>
            <p style={{ textAlign: 'left' }}>
              配置文件列表
              <Button
                style={{ marginLeft: '8px' }}
                size={'small'}
                type={'primary'}
                icon={<PlusCircleOutlined />}
                onClick={() => {
                  this.setState({ showConfigFile: true });
                }}
              >
                添加配置
              </Button>
            </p>
            {appInfo && appInfo.configs ? (
              <Menu
                selectedKeys={[caid + '_' + env + '_' + format]}
                mode="inline"
                style={{ height: '50%', borderRight: 0 }}
                defaultOpenKeys={idcArr}
                onClick={this.changeAppConfig}
              >
                {Object.keys(this.sortObj(appInfo.files, idcArr)).map((zone_code) => {
                  if (zoneCode == 'all' || zoneCode == zone_code) {
                    return (
                      <Menu.SubMenu key={zone_code} title={<h4>{`${zone_codeMap[zone_code]}`}</h4>}>
                        {appInfo.files[zone_code].map((v) => {
                          console.log('this.state.zone_code', this.state.zone_code);
                          return (
                            <Menu.Item
                              style={{ paddingLeft: '20px' }}
                              key={v.id + '_' + v.env + '_' + v.format}
                            >
                              {v.file_name}
                            </Menu.Item>
                          );
                        })}
                      </Menu.SubMenu>
                    );
                  }
                })}
              </Menu>
            ) : (
              <div style={{ textAlign: 'left' }}>
                <Button type={'primary'} onClick={() => this.setState({ showConfigFile: true })}>
                  添加配置文件
                </Button>
              </div>
            )}
          </Card>
          <Card style={leftCardStyle}>
            <p style={{ textAlign: 'left' }}>文件管理</p>
            <Button type="primary" onClick={this.handleFileManage} style={{ marginLeft: '4px' }}>
              文件管理
            </Button>
            <Button type="primary" onClick={this.handleFileDiff} style={{ marginLeft: '4px' }}>
              文件对比
            </Button>
          </Card>
        </Sider>
        <Content>
          <div>
            {caid !== 0 && (
              <Row style={{ marginTop: '4px', marginLeft: '4px', marginRight: '4px' }}>
                <Col span={4} style={{ textAlign: 'left' }}>
                  <Button
                    style={{ float: 'left', marginRight: '6px' }}
                    onClick={(e) => {
                      //加载节点数据
                      this.getAppList().then((_) => {
                        //获取配置列表
                        this.autoChangeConfig(); //自动选择第一个配置文件
                        message.success('数据已更新');
                      });
                    }}
                  >
                    <Icon type="sync" />
                    刷新数据
                  </Button>
                  <Tooltip
                    title={`当前页面为静态页面,修改配置前需要刷新获取最新配置数据,以免覆盖其他人的配置数据`}
                  >
                    <QuestionCircleOutlined />
                  </Tooltip>
                </Col>
                <Col span={20} style={{ textAlign: 'right' }}>
                  <Button.Group>
                    <Button
                      type={'primary'}
                      onClick={() => {
                        that.setState({ showPublish: true });
                      }}
                    >
                      发布配置
                    </Button>
                    <Button
                      type={'danger'}
                      onClick={(e) => {
                        that.changeTab('status');
                      }}
                    >
                      重启列表
                    </Button>
                    <Button
                      type={'primary'}
                      onClick={(e) => {
                        that.setState({ showRollback: true });
                      }}
                    >
                      配置回滚
                    </Button>
                    <Button
                      onClick={() => {
                        that.getHistoryList();
                        that.setState({ showHistory: true });
                      }}
                    >
                      发布历史
                    </Button>
                  </Button.Group>
                </Col>
              </Row>
            )}
            {caid !== 0 && (
              <Tabs
                style={{
                  backgroundColor: '#fff',
                  marginTop: '5px',
                  marginLeft: '5px',
                  marginRight: '5px',
                }}
                activeKey={this.state.tab}
                onChange={this.changeTab}
              >
                <TabPane
                  tab={
                    <span>
                      <div style={{ marginLeft: 10 }}>
                        <TableOutlined />
                        配置编辑
                      </div>
                    </span>
                  }
                  key="table"
                >
                  <Row>
                    <Col style={{ marginTop: '-5px' }}>
                      <Button.Group>
                        <Button
                          style={{ marginLeft: '10px' }}
                          type="primary"
                          onClick={() => {
                            that.setState({ showAddItem: true });
                            that.getEnvResource();
                          }}
                        >
                          添加 Block
                        </Button>
                      </Button.Group>
                    </Col>
                  </Row>
                  <Row gutter={24}>
                    <Col span={24} style={{ marginTop: '10px' }}>
                      <Collapse
                        bordered={false}
                        defaultActiveKey={['application']}
                        expandIcon={({ isActive }) => (
                          <CaretRightOutlined rotate={isActive ? 90 : 0} />
                        )}
                        className="site-collapse-custom-collapse"
                        expandIconPosition="right"
                      >
                        {configItemList}
                      </Collapse>
                    </Col>
                  </Row>
                </TabPane>
                <TabPane
                  tab={
                    <span>
                      <FileOutlined />
                      发布预览
                    </span>
                  }
                  key="text"
                >
                  <Spin spinning={this.state.loading} />
                  <Row>
                    <Col
                      style={{
                        textAlign: 'left',
                        marginLeft: '8px',
                        marginBottom: '8px',
                        fontSize: '18px',
                      }}
                      span={12}
                    >
                      {file_name}
                    </Col>
                    <Col
                      style={{
                        textAlign: 'right',
                        marginRight: '8px',
                        marginBottom: '8px',
                      }}
                      span={11}
                    >
                      <Button.Group>
                        <span>
                          <Button
                            onClick={(e) => {
                              copy(configText);
                              message.success('已复制到剪切板');
                            }}
                          >
                            复制
                          </Button>
                        </span>
                      </Button.Group>
                    </Col>
                  </Row>
                  <div className={'configEditor'}>
                    <ReactCodeMirror
                      ref="editor"
                      value={configText}
                      options={{
                        mode: 'text/x-toml',
                        lineNumbers: true,
                        autoMatchParens: true,
                        lineWrapping: true,
                        readOnly: this.state.readOnly,
                      }}
                      onChange={(editor, data, value) => {
                        this.configInputText = editor.getValue();
                      }}
                    />
                  </div>
                </TabPane>
                <TabPane
                  tab={
                    <span>
                      <FileDoneOutlined />
                      <Badge count={changeNum} overflowCount={9999} offset={[0, 18]}>
                        变更历史
                      </Badge>
                    </span>
                  }
                  key="history"
                >
                  <Table
                    columns={changListCols}
                    dataSource={configChangeList}
                    size={'small'}
                    pagination={false}
                    rowKey={'id'}
                  />
                </TabPane>
                <TabPane
                  tab={
                    <span>
                      <HddOutlined />
                      实例列表
                    </span>
                  }
                  key="status"
                >
                  <Spin spinning={this.state.showStatusSync} />
                  <div style={{ marginLeft: '10px' }}>
                    配置文件路径:
                    <span
                      style={{
                        marginLeft: '8px',
                        marginRight: '8px',
                        fontSize: '16px',
                      }}
                    >{`${file_path}`}</span>
                    <a
                      onClick={(e) => {
                        copy(`${file_path}`);
                        message.success('已复制,请重新下发配置文件生效');
                      }}
                    >
                      点击复制
                    </a>
                    <Tooltip
                      title={`修改systemd下发的配置文件路径,由原来的项目相对路径改为配置中心的路径`}
                    >
                      <Icon style={{ marginLeft: '6px' }} type="question-circle" />
                    </Tooltip>
                    <span
                      style={{
                        float: 'right',
                        marginRight: '8px',
                        marginBottom: '8px',
                      }}
                    >
                      <Button
                        type={'primary'}
                        onClick={(e) => {
                          that.setState({
                            showStatusSync: true,
                          });
                          SyncConfigNodes({ caid: caid })
                            .then((rs) => {
                              that.getConfigStatusList();
                              message.success('同步成功');
                              that.setState({
                                showStatusSync: false,
                              });
                            })
                            .catch((err) => {
                              that.setState({
                                showStatusSync: false,
                              });
                            });
                        }}
                      >
                        刷新实例状态
                      </Button>
                    </span>
                    <Table
                      size="small"
                      columns={statusCol}
                      dataSource={statusList}
                      pagination={false}
                    />
                  </div>
                </TabPane>
              </Tabs>
            )}

            <NewItemForm
              show={this.state.showAddItem}
              cancel={() => {
                this.setState({ showAddItem: false });
              }}
              item={{
                resourceData: resourceData,
              }}
              env={this.state.env}
              zone_code={this.state.zone_code}
              submit={this.addItem}
              caid={this.state.caid}
              zone_codeMap={zone_codeMap}
            />

            <UpdateItemForm
              show={this.state.showUpdateItem}
              env={this.state.env}
              zone_code={this.state.zone_code}
              cancel={() => {
                this.setState({ showUpdateItem: false });
              }}
              changeResource={(e) => {
                that.setState({
                  selectIsResource: e,
                });
              }}
              changeResourceID={(e) => {
                that.setState({
                  selectResourceID: e * 1,
                });
              }}
              caid={this.state.caid}
              submit={this.updateItem}
              item={{
                id: selectItemID,
                key: selectKey,
                value: selectValue,
                comment: selectComment,
                is_resource: selectIsResource,
                resource_id: selectResourceID,
                resourceData: resourceData,
                is_public: selectIsPublic,
              }}
              zone_codeMap={zone_codeMap}
            />

            <PublishForm
              show={this.state.showPublish}
              publish_loading={this.state.publish_loading}
              file_name={file_name}
              item={{ caid }}
              cancel={() => {
                this.setState({ showPublish: false });
              }}
              submit={this.publishItem}
            />

            <NewConfigFile
              show={this.state.showConfigFile}
              cancel={() => {
                this.setState({ showConfigFile: false });
              }}
              submit={this.AddConfigFile}
              zoneList={this.props.zoneList}
            />

            <HistoryList
              show={this.state.showHistory}
              cancel={() => {
                this.setState({ showHistory: false });
                this.props.dispatch({
                  type: 'confuNew/setPublishChangeData',
                  payload: {},
                });
              }}
              list={configHistoryList}
            />

            <Preview
              oldCode={configText}
              newCode={this.configInputText}
              show={this.state.showPreview}
              cancel={() => {
                this.setState({ showPreview: false });
              }}
            />

            {this.state.showRollback && (
              <RollbackView
                caid={caid}
                show={this.state.showRollback}
                rollback={() => {
                  that.getConfigList();
                }}
                cancel={() => {
                  this.setState({ showRollback: false });
                }}
              />
            )}
            <FileManageView
              show={this.state.showFileManage}
              app_name={appName}
              app_id={aid}
              env={env}
              zone_code={this.state.zone_code}
              cancel={() => {
                this.setState({ showFileManage: false }, () => {
                  this.autoChangeConfig;
                });
              }}
            />
            <FileDiffView
              show={this.state.showFileDiff}
              originCid={this.state.caid}
              rafeCid={0}
              appConfigList={this.props.appConfigList}
              cancel={() => {
                this.setState({ showFileDiff: false });
              }}
            />
          </div>
        </Content>
        <Modal
          title="操作面板"
          visible={this.state.visible}
          onOk={(e) => {
            this.refreshState();
            this.setState({ visible: false, result_list: [] });
          }}
          okText={'确定'}
          onCancel={(e) => {
            this.refreshState();
            this.setState({ visible: false, result_list: [] });
          }}
          cancelText={'关闭'}
        >
          <div>
            <Spin spinning={this.state.loading} />
          </div>
          <div style={{ backgroundColor: 'black', borderRadius: '5px' }}>
            {result_list.map((v, i) => {
              const { name, content } = v;
              return (
                <p key={i} style={{ color: 'green' }}>
                  {content}
                </p>
              );
            })}
          </div>
        </Modal>
      </Layout>
    );
  }
Example #2
Source File: App.js    From next-terminal with GNU Affero General Public License v3.0 4 votes vote down vote up
render() {

        const menu = (
            <Menu>

                <Menu.Item>
                    <Link to={'/info'}>
                        <SolutionOutlined/> 个人中心
                    </Link>
                </Menu.Item>
                <Menu.Divider/>

                <Menu.Item>

                    <Popconfirm
                        key='login-btn-pop'
                        title="您确定要退出登录吗?"
                        onConfirm={this.confirm}
                        okText="确定"
                        cancelText="取消"
                        placement="left"
                    >
                        <LogoutOutlined/> 退出登录
                    </Popconfirm>
                </Menu.Item>

            </Menu>
        );

        return (

            <Switch>
                <Route path="/access" component={Access}/>
                <Route path="/term" component={Term}/>
                <Route path="/login"><Login updateUser={this.updateUser}/></Route>

                <Route path="/">
                    <Layout className="layout" style={{minHeight: '100vh'}}>

                        {
                            isAdmin() ?
                                <>
                                    <Sider collapsible collapsed={this.state.collapsed} trigger={null}>
                                        <div className="logo">
                                            <img src={this.state.logo} alt='logo' width={this.state.logoWidth}/>
                                        </div>

                                        <Menu
                                            onClick={(e) => this.setCurrent(e.key)}
                                            selectedKeys={[this.state.current]}
                                            onOpenChange={this.subMenuChange}
                                            defaultOpenKeys={this.state.openKeys}
                                            theme="dark" mode="inline" defaultSelectedKeys={['dashboard']}
                                            inlineCollapsed={this.state.collapsed}
                                            style={{lineHeight: '64px'}}>

                                            <Menu.Item key="dashboard" icon={<DashboardOutlined/>}>
                                                <Link to={'/'}>
                                                    控制面板
                                                </Link>
                                            </Menu.Item>

                                            <SubMenu key='resource' title='资源管理' icon={<CloudServerOutlined/>}>
                                                <Menu.Item key="asset" icon={<DesktopOutlined/>}>
                                                    <Link to={'/asset'}>
                                                        资产列表
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="credential" icon={<IdcardOutlined/>}>
                                                    <Link to={'/credential'}>
                                                        授权凭证
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="dynamic-command" icon={<CodeOutlined/>}>
                                                    <Link to={'/dynamic-command'}>
                                                        动态指令
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="access-gateway" icon={<ApiOutlined/>}>
                                                    <Link to={'/access-gateway'}>
                                                        接入网关
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>

                                            <SubMenu key='audit' title='会话审计' icon={<AuditOutlined/>}>
                                                <Menu.Item key="online-session" icon={<LinkOutlined/>}>
                                                    <Link to={'/online-session'}>
                                                        在线会话
                                                    </Link>
                                                </Menu.Item>

                                                <Menu.Item key="offline-session" icon={<DisconnectOutlined/>}>
                                                    <Link to={'/offline-session'}>
                                                        历史会话
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>
                                            <SubMenu key='ops' title='系统运维' icon={<ControlOutlined/>}>
                                                <Menu.Item key="login-log" icon={<LoginOutlined/>}>
                                                    <Link to={'/login-log'}>
                                                        登录日志
                                                    </Link>
                                                </Menu.Item>

                                                <Menu.Item key="job" icon={<BlockOutlined/>}>
                                                    <Link to={'/job'}>
                                                        计划任务
                                                    </Link>
                                                </Menu.Item>

                                                <Menu.Item key="access-security" icon={<SafetyCertificateOutlined/>}>
                                                    <Link to={'/access-security'}>
                                                        访问安全
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="storage" icon={<HddOutlined/>}>
                                                    <Link to={'/storage'}>
                                                        磁盘空间
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>

                                            <SubMenu key='user-manage' title='用户管理' icon={<UserSwitchOutlined/>}>
                                                <Menu.Item key="user" icon={<UserOutlined/>}>
                                                    <Link to={'/user'}>
                                                        用户管理
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="user-group" icon={<TeamOutlined/>}>
                                                    <Link to={'/user-group'}>
                                                        用户组管理
                                                    </Link>
                                                </Menu.Item>
                                                <Menu.Item key="strategy" icon={<InsuranceOutlined/>}>
                                                    <Link to={'/strategy'}>
                                                        授权策略
                                                    </Link>
                                                </Menu.Item>
                                            </SubMenu>
                                            <Menu.Item key="my-file" icon={<FolderOutlined/>}>
                                                <Link to={'/my-file'}>
                                                    我的文件
                                                </Link>
                                            </Menu.Item>
                                            <Menu.Item key="info" icon={<SolutionOutlined/>}>
                                                <Link to={'/info'}>
                                                    个人中心
                                                </Link>
                                            </Menu.Item>
                                            <Menu.Item key="setting" icon={<SettingOutlined/>}>
                                                <Link to={'/setting'}>
                                                    系统设置
                                                </Link>
                                            </Menu.Item>
                                        </Menu>
                                    </Sider>

                                    <Layout className="site-layout">
                                        <Header className="site-layout-background"
                                                style={{padding: 0, height: headerHeight, zIndex: 20}}>
                                            <div className='layout-header'>
                                                <div className='layout-header-left'>
                                                    {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                                        className: 'trigger',
                                                        onClick: this.onCollapse,
                                                    })}
                                                </div>

                                                <div className='layout-header-right'>
                                                    <div className={'layout-header-right-item'}>
                                                        <a style={{color: 'black'}} target='_blank'
                                                           href='https://github.com/dushixiang/next-terminal'
                                                           rel='noreferrer noopener'>
                                                            <GithubOutlined/>
                                                        </a>
                                                    </div>
                                                </div>

                                                <div className='layout-header-right'>
                                                    <Dropdown overlay={menu}>
                                                        <div className='nickname layout-header-right-item'>
                                                            {getCurrentUser()['nickname']} &nbsp;<DownOutlined/>
                                                        </div>
                                                    </Dropdown>
                                                </div>
                                            </div>
                                        </Header>

                                        <Route path="/" exact component={Dashboard}/>
                                        <Route path="/user" component={User}/>
                                        <Route path="/user-group" component={UserGroup}/>
                                        <Route path="/asset" component={Asset}/>
                                        <Route path="/credential" component={Credential}/>
                                        <Route path="/dynamic-command" component={DynamicCommand}/>
                                        <Route path="/batch-command" component={BatchCommand}/>
                                        <Route path="/online-session" component={OnlineSession}/>
                                        <Route path="/offline-session" component={OfflineSession}/>
                                        <Route path="/login-log" component={LoginLog}/>
                                        <Route path="/info" component={Info}/>
                                        <Route path="/setting" component={Setting}/>
                                        <Route path="/job" component={Job}/>
                                        <Route path="/access-security" component={Security}/>
                                        <Route path="/access-gateway" component={AccessGateway}/>
                                        <Route path="/my-file" component={MyFile}/>
                                        <Route path="/storage" component={Storage}/>
                                        <Route path="/strategy" component={Strategy}/>

                                        <Footer style={{textAlign: 'center'}}>
                                            Copyright © 2020-2022 dushixiang, All Rights Reserved.
                                            Version:{this.state.package['version']}
                                        </Footer>
                                    </Layout>
                                </> :
                                <>
                                    <Header style={{padding: 0}}>
                                        <div className='km-header'>
                                            <div style={{flex: '1 1 0%'}}>
                                                <Link to={'/'}>
                                                    <img src={this.state.logo} alt='logo' width={120}/>
                                                </Link>

                                                <Link to={'/my-file'}>
                                                    <Button type="text" style={{color: 'white'}}
                                                            icon={<FolderOutlined/>}>
                                                        文件
                                                    </Button>
                                                </Link>

                                                <Link to={'/dynamic-command'}>
                                                    <Button type="text" style={{color: 'white'}}
                                                            icon={<CodeOutlined/>}>
                                                        指令
                                                    </Button>
                                                </Link>
                                            </div>
                                            <div className='km-header-right'>
                                                <Dropdown overlay={menu}>
                                                <span className={'km-header-right-item'}>
                                                    {getCurrentUser()['nickname']}
                                                </span>
                                                </Dropdown>
                                            </div>
                                        </div>
                                    </Header>
                                    <Content className='km-container'>
                                        <Layout>
                                            <Route path="/" exact component={MyAsset}/>
                                            <Content className={'kd-content'}>
                                                <Route path="/info" component={Info}/>
                                                <Route path="/my-file" component={MyFile}/>
                                                <Route path="/dynamic-command" component={DynamicCommand}/>
                                            </Content>
                                        </Layout>
                                    </Content>
                                    <Footer style={{textAlign: 'center'}}>
                                        Copyright © 2020-2022 dushixiang, All Rights Reserved.
                                        Version:{this.state.package['version']}
                                    </Footer>
                                </>
                        }


                    </Layout>
                </Route>
            </Switch>

        );
    }