@ant-design/icons#CopyOutlined JavaScript Examples

Prediction = observer(({ item, store }) => {
  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");
  };

  return (
    <List.Item
      key={item.id}
      className={item.selected ? `${styles.annotation} ${styles.annotation_selected}` : styles.annotation}
      onClick={() => {
        !item.selected && store.annotationStore.selectPrediction(item.id);
      }}
      onMouseEnter={highlight}
      onMouseLeave={unhighlight}
    >
      <div className={styles.itembtns}>
        <div>
          <div className={styles.title}>{item.createdBy ? `Model (${item.createdBy})` : null}</div>
          Created
          <i>{item.createdAgo ? ` ${item.createdAgo} ago` : ` ${Utils.UDate.prettyDate(item.createdDate)}`}</i>
        </div>
        <div className={styles.buttons}>
          {item.selected && (
            <Tooltip placement="topLeft" title="Add a new annotation based on this prediction">
              <Button
                size="small"
                onClick={ev => {
                  ev.preventDefault();

                  const cs = store.annotationStore;
                  const p = cs.selected;
                  const c = cs.addAnnotationFromPrediction(p);

                  // this is here because otherwise React doesn't re-render the change in the tree
                  window.setTimeout(function() {
                    store.annotationStore.selectAnnotation(c.id);
                  }, 50);
                }}
              >
                <CopyOutlined />
              </Button>
            </Tooltip>
          )}
          {store.annotationStore.viewingAllAnnotations && (
            <Button size="small" type="primary" ghost onClick={toggleVisibility}>
              {item.hidden ? <EyeInvisibleOutlined /> : <EyeOutlined />}
            </Button>
          )}
        </div>
      </div>
    </List.Item>
  );
})

superviseRoutes = [
    {
        path: "/admin/supervisedashboard",
        component: SuperviseDashboard,
        exact: true,
        isShow: true,
        title: "监管信息面板",
        icon: AreaChartOutlined
    },
    {
        path: "/admin/dataapproval",
        component: dataApproval,
        exact: true,
        isShow: true,
        title: "信息审核",
        icon: CopyOutlined
    },
    {
        path: "/admin/punish",
        component: punish,
        exact: true,
        isShow: true,
        title: "违约处罚",
        icon: ToolOutlined
    },
    {
        path: "/admin/ceriticateApprove",
        component: certificateApprove,
        exact: true,
        isShow: true,
        title: "认证签名",
        icon: VerifiedOutlined
    },
    {
        path: "/admin/contributionverify",
        component: contributionVerify,
        exact: true,
        isShow: true,
        title: "贡献审核",
        icon: SolutionOutlined
    },
]

SeedCard = (props) => {
  const { t } = useTranslation();
  const db = useDB();
  if (!db) return null;
  const data = props.data;
  const player = db.get("players").find({ id: data.playerId0 }).value();
  const support = db.get("supports").find({ id: data.supportId }).value();
  const like = async (seed) => {
    if (!userId) {
      message.info(t("刷新后重试"));
      return;
    }
    let id = seed.id;
    const res = await axios.post("https://urarawin.com/api/sqlite/like", { id, userId });
    if (res.data) {
      message.info(t("成功"));
      seed.likes += 1;
    }
  };
  const dislike = async (seed) => {
    if (!userId) {
      message.info(t("刷新后重试"));
      return;
    } else if (seed.dislikes && seed.dislikes.indexOf(userId) !== -1) {
      return;
    }
    let id = seed.id;
    const res = await axios.post("https://urarawin.com/api/sqlite/dislike", { id, userId });
    if (res.data) {
      message.info(t("成功"));
      seed.dislikes += 1;
    }
  };
  return (
    <div className="w-1/2 p-1">
      <div className="border-green-300 border border-solid flex flex-col">
        <CopyToClipboard text={data.gameId} onCopy={() => message.info("成功")}>
          <div className="w-full flex text-lg">
            {data.gameId}
            <CopyOutlined />
          </div>
        </CopyToClipboard>
        <div className="w-full flex items-center justify-around">
          {player && (
            <img alt={player.name} src={CDN_SERVER + player.imgUrl} className="w-10 h-10" />
          )}
          {support && <img alt={support.name} src={CDN_SERVER + support.imgUrl} className="w-10" />}
          <div className="text-lg flex" onClick={() => like(data)}>
            <SmileOutlined />
            <div>{data.likes}</div>
          </div>
          <div className="text-lg flex" onClick={() => dislike(data)}>
            <FrownOutlined />
            <div>{data.dislikes}</div>
          </div>
        </div>
        <div>{`${t(SEED_BLUE_LABELS[data["blue0"]])}: ${data["blueLevel0"]}`}</div>
        <div>{`${t(SEED_RED_LABELS[data["red0"]])}: ${data["redLevel0"]}`}</div>
        {Object.keys(SEED_BLUE_LABELS).map((key) =>
          data[key] ? (
            <div key={key}>{`${t("总计")} ${t(SEED_BLUE_LABELS[key])}: ${data[key]}`}</div>
          ) : null
        )}
        {Object.keys(SEED_RED_LABELS).map((key) =>
          data[key] ? (
            <div key={key}>{`${t("总计")} ${t(SEED_RED_LABELS[key])}: ${data[key]}`}</div>
          ) : null
        )}
        <div>{`${t("突破等级")}: ${data["supportLevel"] || 0}`}</div>
      </div>
    </div>
  );
}

function ClusterDetail(props) {
  const { currentInstance, dispatch, config, appName, env } = props;
  const [visibleRestartModal, setVisibleRestartModal] = useState(false);
  const [loading, setLoading] = useState(false);
  const [content, setContent] = useState('');
  const [k8sClusters2, setK8sClusters2] = useState();

  useEffect(() => {
    if (k8sClusters2 == undefined) {
      getCluterInfo(currentInstance.name, appName, env, config.id, currentInstance).then((res) => {
        setK8sClusters2(res.data);
      });
    }
  });

  if (!currentInstance) {
    return <div />;
  }

  return (
    <div className={styles.instanceDetail}>
      <div className={styles.topHeader}>
        <div style={{ fontSize: '48px', textAlign: 'center', padding: '10px' }}>
          <DatabaseOutlined />
        </div>
        <div style={{ padding: '10px' }}>
          <div style={{ fontSize: '24px', fontWeight: 'bold' }}>{currentInstance.host_name}</div>
          <div>
            {currentInstance.region_name} {currentInstance.zone_name} {currentInstance.ip}
          </div>
          <div style={{ marginTop: '10px' }}>
            <Space></Space>
          </div>
        </div>
      </div>

      <ul className={styles.instanceInfoList}>
        <li key="1">
          <div className={styles.instanceInfoName}>
            <div className={styles.instanceInfoTitle}>使用文档</div>
          </div>
          <div className={styles.instanceInfoContent}>
            <a href={k8sClusters2 && k8sClusters2.doc ? k8sClusters2.doc : ''}>点击查看</a>
          </div>
        </li>
        <li key="2">
          <div className={styles.instanceInfoName}>
            <div className={styles.instanceInfoTitle}>同步时间</div>
          </div>
          <div className={styles.instanceInfoContent}>
            {k8sClusters2 && k8sClusters2.created_at
              ? moment(k8sClusters2.created_at).format('YYYY-MM-DD HH:mm:ss')
              : ''}
          </div>
        </li>
        <li key="3">
          <div className={styles.instanceInfoName}>
            <div className={styles.instanceInfoTitle}>配置状态</div>
          </div>
          <div className={styles.instanceInfoContent}>
            {k8sClusters2 && k8sClusters2.sync_status ? k8sClusters2.sync_status : ''}
          </div>
        </li>
        <li key="4">
          <div className={styles.instanceInfoName}>
            <div className={styles.instanceInfoTitle}>配置版本</div>
          </div>
          <div className={styles.instanceInfoContent}>
            {k8sClusters2 && k8sClusters2.version ? (
              <Tag>{k8sClusters2 ? k8sClusters2.version : ''}</Tag>
            ) : (
              ''
            )}{' '}
            {k8sClusters2 ? k8sClusters2.change_log : ''}
          </div>
        </li>
        <li key="5">
          <div className={styles.instanceInfoName}>
            <div className={styles.instanceInfoTitle}>参考路径</div>
          </div>
          <div className={styles.instanceInfoContent}>
            {k8sClusters2 && k8sClusters2.config_file_path ? (
              <div key="0" className={styles.configPathItem}>
                <span>{k8sClusters2.config_file_path}</span>
                <CopyOutlined
                  onClick={() => {
                    copyToClipBoard(k8sClusters2.config_file_path);
                    message.success('已复制到剪切板');
                  }}
                  className={styles.configPathCopyBtn}
                />
              </div>
            ) : (
              ''
            )}
          </div>
        </li>
      </ul>

      <Modal
        title="操作面板"
        visible={visibleRestartModal}
        onOk={() => setVisibleRestartModal(false)}
        onCancel={() => setVisibleRestartModal(false)}
      >
        <div>
          <Spin spinning={loading} />
        </div>
        <div style={{ backgroundColor: 'black', borderRadius: '5px' }}>
          <p style={{ color: 'green' }}>{content}</p>
        </div>
      </Modal>
      <ModalRealtimeConfig />
    </div>
  );
}

function InstanceDetail(props) {
  const { currentInstance, dispatch, config, appName, env } = props;
  const [visibleRestartModal, setVisibleRestartModal] = useState(false);
  const [loading, setLoading] = useState(false);
  const [content, setContent] = useState('');

  if (!currentInstance) {
    return <div />;
  }

  const {
    config_file_used,
    config_file_synced,
    config_file_take_effect,
    config_file_path,
    sync_at,
    version,
    change_log,
    host_name,
  } = currentInstance;

  let info = [
    {
      title: '接入状态',
      help: '当前应用是否在该实例上接入配置中心',
      content: config_file_used ? '已接入' : '未接入',
    },
    {
      title: '发布状态',
      help: '配置是否下发到机器上',
      content: config_file_synced ? '已下发' : '未下发',
    },
    {
      title: '生效状态',
      help: '配置是否在应用上生效（依赖Go框架支持）',
      content: config_file_take_effect ? '已生效' : '未生效',
    },
    {
      title: '文件路径',
      content: config_file_path
        ? config_file_path.split(';').map((item, idx) => {
            return (
              <div key={idx} className={styles.configPathItem}>
                <span>{item}</span>
                <CopyOutlined
                  onClick={() => {
                    copyToClipBoard(item);
                    message.success('已复制到剪切板');
                  }}
                  className={styles.configPathCopyBtn}
                />
              </div>
            );
          })
        : '---',
    },
    {
      title: '配置版本',
      content: version ? (
        <span>
          <Tag>{version}</Tag> {change_log}
        </span>
      ) : (
        '---'
      ),
    },
    {
      title: '同步时间',
      content: sync_at,
    },
  ];

  let showConfirm = (action, zoneCode, hostname, usedTyp) => {
    const descMap = {
      start: {
        title: '确定启动应用进程吗？',
        content: `应用进程会被执行 start 命令`,
      },
      restart: {
        title: '确定重启应用进程吗？',
        content: '应用进程会被执行 restart 命令',
      },
      stop: {
        title: '确定停止应用进程吗？',
        content: '应用进程会被执行 stop 命令',
      },
    };

    const desc = descMap[action] || {};
    confirm({
      title: desc.title,
      content: (
        <div>
          <p>{desc.content}</p>
          <h4>操作实例：</h4>
          <p>{hostname}</p>
        </div>
      ),
      onOk() {
        setVisibleRestartModal(true);

        doAction(action, zoneCode, hostname, usedTyp);
      },
      onCancel() {},
      okText: '确定',
      cancelText: '取消',
    });
  };

  let doAction = (action, zoneCode, hostname, usedTyp) => {
    if (usedTyp === 0) {
      setContent('配置文件未接入，无法进行重启操作');
      setLoading(false);
      return;
    }

    setLoading(true);
    ServiceAppAction({
      action: action,
      zone_code: zoneCode,
      node_name: hostname,
      typ: usedTyp,
      app_name: appName,
      env: env,
    }).then((res) => {
      if (res.code !== 0) {
        setContent(res.data);
        setLoading(false);
      } else {
        let result = [];
        for (const itemListKey in res.data) {
          let itemList = res.data[itemListKey];
          if (itemList['code'] !== 0) {
            result.push(<p>状态：重启失败</p>);
          } else {
            result.push(<p>状态：重启成功</p>);
          }
          for (const item in itemList) {
            result.push(<p>{item + ':' + itemList[item]}</p>);
          }
        }
        setContent(result);
        setLoading(false);
      }
    });
  };

  return (
    <div className={styles.instanceDetail}>
      <div className={styles.topHeader}>
        <div style={{ fontSize: '48px', textAlign: 'center', padding: '10px' }}>
          <DatabaseOutlined />
        </div>
        <div style={{ padding: '10px' }}>
          <div style={{ fontSize: '24px', fontWeight: 'bold' }}>{currentInstance.host_name}</div>
          <div>
            {currentInstance.region_name} {currentInstance.zone_name} {currentInstance.ip}
          </div>
          <div style={{ marginTop: '10px' }}>
            <Space>
              <Button
                size={'small'}
                type={'primary'}
                icon={<ReloadOutlined />}
                onClick={() => {
                  showConfirm(
                    'restart',
                    currentInstance.zone_code,
                    currentInstance.host_name,
                    currentInstance.config_file_used,
                  );
                }}
              >
                重启
              </Button>

              <Button
                size={'small'}
                icon={<EyeOutlined />}
                onClick={() => {
                  dispatch({
                    type: 'config/fetchInstanceConfig',
                    payload: {
                      id: config.id,
                      hostName: host_name,
                    },
                  });
                }}
              >
                实时配置
              </Button>
            </Space>
          </div>
        </div>
      </div>

      <ul className={styles.instanceInfoList}>
        {info.map((item, index) => (
          <li key={index}>
            <div className={styles.instanceInfoName}>
              <div className={styles.instanceInfoTitle}>{item.title}</div>
              <div className={styles.instanceInfoHelp}>{item.help}</div>
            </div>
            <div className={styles.instanceInfoContent}>{item.content}</div>
          </li>
        ))}
      </ul>

      <Modal
        title="操作面板"
        visible={visibleRestartModal}
        onOk={() => setVisibleRestartModal(false)}
        onCancel={() => setVisibleRestartModal(false)}
      >
        <div>
          <Spin spinning={loading} />
        </div>
        <div style={{ backgroundColor: 'black', borderRadius: '5px' }}>
          <p style={{ color: 'green' }}>{content}</p>
        </div>
      </Modal>
      <ModalRealtimeConfig />
    </div>
  );
}

render() {

        const hotKeyMenu = (
            <Menu>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65507', '65513', '65535'])}>Ctrl+Alt+Delete</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65507', '65513', '65288'])}>Ctrl+Alt+Backspace</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65515', '100'])}>Windows+D</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65515', '101'])}>Windows+E</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65515', '114'])}>Windows+R</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65515', '120'])}>Windows+X</Menu.Item>
                <Menu.Item
                    onClick={() => this.sendCombinationKey(['65515'])}>Windows</Menu.Item>
            </Menu>
        );

        const cmdMenuItems = this.state.commands.map(item => {
            return <Tooltip placement="left" title={item['content']} color='blue' key={'t-' + item['id']}>
                <Menu.Item onClick={() => {
                    this.writeCommand(item['content'])
                }} key={'i-' + item['id']}>{item['name']}</Menu.Item>
            </Tooltip>;
        });

        const cmdMenu = (
            <Menu>
                {cmdMenuItems}
            </Menu>
        );

        return (
            <div>

                <div className="container" style={{
                    overflow: this.state.containerOverflow,
                    width: this.state.containerWidth,
                    height: this.state.containerHeight,
                    margin: '0 auto'
                }}>
                    <div id="display"/>
                </div>

                <Draggable>
                    <Affix style={{position: 'absolute', top: 50, right: 50}}>
                        <Button icon={<ExpandOutlined/>} disabled={this.state.clientState !== STATE_CONNECTED}
                                onClick={() => {
                                    this.fullScreen();
                                }}/>
                    </Affix>
                </Draggable>

                {
                    this.state.session['copy'] === '1' || this.state.session['paste'] === '1' ?
                        <Draggable>
                            <Affix style={{position: 'absolute', top: 50, right: 100}}>
                                <Button icon={<CopyOutlined/>} disabled={this.state.clientState !== STATE_CONNECTED}
                                        onClick={() => {
                                            this.setState({
                                                clipboardVisible: true
                                            });
                                        }}/>
                            </Affix>
                        </Draggable> : undefined
                }


                {
                    this.state.protocol === 'vnc' ?
                        <>
                            <Draggable>
                                <Affix style={{position: 'absolute', top: 100, right: 100}}>
                                    <Dropdown overlay={hotKeyMenu} trigger={['click']} placement="bottomLeft">
                                        <Button icon={<WindowsOutlined/>}
                                                disabled={this.state.clientState !== STATE_CONNECTED}/>
                                    </Dropdown>
                                </Affix>
                            </Draggable>
                        </> : undefined
                }

                {
                    this.state.protocol === 'rdp' && this.state.showFileSystem ?
                        <>
                            <Draggable>
                                <Affix style={{position: 'absolute', top: 100, right: 50}}>
                                    <Button icon={<FolderOutlined/>}
                                            disabled={this.state.clientState !== STATE_CONNECTED} onClick={() => {
                                        this.setState({
                                            fileSystemVisible: true,
                                        });
                                    }}/>
                                </Affix>
                            </Draggable>
                        </> : undefined
                }

                {
                    this.state.protocol === 'rdp' ?
                        <>
                            <Draggable>
                                <Affix style={{position: 'absolute', top: 100, right: 100}}>
                                    <Dropdown overlay={hotKeyMenu} trigger={['click']} placement="bottomLeft">
                                        <Button icon={<WindowsOutlined/>}
                                                disabled={this.state.clientState !== STATE_CONNECTED}/>
                                    </Dropdown>
                                </Affix>
                            </Draggable>
                        </> : undefined
                }

                {
                    this.state.protocol === 'ssh' ?
                        <>
                            <Draggable>
                                <Affix style={{position: 'absolute', top: 100, right: 50}}>
                                    <Button icon={<FolderOutlined/>}
                                            disabled={this.state.clientState !== STATE_CONNECTED} onClick={() => {
                                        this.setState({
                                            fileSystemVisible: true,
                                        });
                                    }}/>
                                </Affix>
                            </Draggable>

                            <Draggable>
                                <Affix style={{position: 'absolute', top: 100, right: 100}}>
                                    <Dropdown overlay={cmdMenu} trigger={['click']} placement="bottomLeft">
                                        <Button icon={<CodeOutlined/>}
                                                disabled={this.state.clientState !== STATE_CONNECTED}/>
                                    </Dropdown>
                                </Affix>
                            </Draggable>

                            <Draggable>
                                <Affix style={{
                                    position: 'absolute',
                                    top: 150,
                                    right: 100,
                                    zIndex: this.state.enterBtnIndex
                                }}>
                                    <Button icon={<LineChartOutlined/>} onClick={() => {
                                        this.setState({
                                            statsVisible: true,
                                        });
                                        if (this.statsRef) {
                                            this.statsRef.addInterval();
                                        }
                                    }}/>
                                </Affix>
                            </Draggable>
                        </> : undefined
                }


                <Drawer
                    title={'文件管理'}
                    placement="right"
                    width={window.innerWidth * 0.8}
                    closable={true}
                    onClose={() => {
                        this.focus();
                        this.setState({
                            fileSystemVisible: false
                        });
                    }}
                    visible={this.state.fileSystemVisible}
                >
                    <FileSystem
                        storageId={this.state.sessionId}
                        storageType={'sessions'}
                        upload={this.state.session['upload'] === '1'}
                        download={this.state.session['download'] === '1'}
                        delete={this.state.session['delete'] === '1'}
                        rename={this.state.session['rename'] === '1'}
                        edit={this.state.session['edit'] === '1'}
                        minHeight={window.innerHeight - 103}/>

                </Drawer>

                <Drawer
                    title={'状态信息'}
                    placement="right"
                    width={window.innerWidth * 0.8}
                    closable={true}
                    onClose={() => {
                        this.setState({
                            statsVisible: false,
                        });
                        this.focus();
                        if (this.statsRef) {
                            this.statsRef.delInterval();
                        }
                    }}
                    visible={this.state.statsVisible}
                >
                    <Stats sessionId={this.state.sessionId} onRef={this.onRef}/>
                </Drawer>

                {
                    this.state.clipboardVisible ?
                        <Modal
                            title="剪贴板"
                            maskClosable={false}
                            visible={this.state.clipboardVisible}

                            onOk={() => {
                                this.clipboardFormRef.current
                                    .validateFields()
                                    .then(values => {
                                        let clipboardText = values['clipboard'];

                                        this.sendClipboard({
                                            'data': clipboardText,
                                            'type': 'text/plain'
                                        });

                                        this.setState({
                                            clipboardText: clipboardText,
                                            clipboardVisible: false
                                        });
                                    })
                                    .catch(info => {

                                    });
                            }}
                            confirmLoading={this.state.confirmLoading}
                            onCancel={() => {
                                this.focus();
                                this.setState({
                                    clipboardVisible: false
                                })
                            }}
                        >
                            <Form ref={this.clipboardFormRef} initialValues={{'clipboard': this.state.clipboardText}}>
                                <Form.Item name='clipboard' rules={[{required: false}]}>
                                    <TextArea id='clipboard' rows={10}/>
                                </Form.Item>
                            </Form>
                        </Modal>
                        : undefined
                }

            </div>
        );
    }

SettingDrawer = function SettingDrawer(props) {
  var _props$settings = props.settings,
      propsSettings = _props$settings === void 0 ? undefined : _props$settings,
      _props$hideLoading = props.hideLoading,
      hideLoading = _props$hideLoading === void 0 ? false : _props$hideLoading,
      hideColors = props.hideColors,
      hideHintAlert = props.hideHintAlert,
      hideCopyButton = props.hideCopyButton,
      getContainer = props.getContainer,
      onSettingChange = props.onSettingChange,
      _props$prefixCls = props.prefixCls,
      prefixCls = _props$prefixCls === void 0 ? 'ant-pro' : _props$prefixCls;
  var firstRender = useRef(true);

  var _useMergeValue = useMergeValue(false, {
    value: props.collapse,
    onChange: props.onCollapseChange
  }),
      _useMergeValue2 = _slicedToArray(_useMergeValue, 2),
      show = _useMergeValue2[0],
      setShow = _useMergeValue2[1];

  var _useState = useState(getLanguage()),
      _useState2 = _slicedToArray(_useState, 2),
      language = _useState2[0],
      setLanguage = _useState2[1];

  var _useMergeValue3 = useMergeValue(function () {
    return getParamsFromUrl(propsSettings);
  }, {
    value: propsSettings,
    onChange: onSettingChange
  }),
      _useMergeValue4 = _slicedToArray(_useMergeValue3, 2),
      settingState = _useMergeValue4[0],
      setSettingState = _useMergeValue4[1];

  var preStateRef = useRef(settingState);

  var _ref3 = settingState || {},
      _ref3$navTheme = _ref3.navTheme,
      navTheme = _ref3$navTheme === void 0 ? 'dark' : _ref3$navTheme,
      _ref3$primaryColor = _ref3.primaryColor,
      primaryColor = _ref3$primaryColor === void 0 ? 'daybreak' : _ref3$primaryColor,
      _ref3$layout = _ref3.layout,
      layout = _ref3$layout === void 0 ? 'sidemenu' : _ref3$layout,
      colorWeak = _ref3.colorWeak;

  useEffect(function () {
    // 语言修改，这个是和 locale 是配置起来的
    var onLanguageChange = function onLanguageChange() {
      if (language !== getLanguage()) {
        setLanguage(getLanguage());
      }
    }; // 记住默认的选择，方便做 diff，然后保存到 url 参数中


    oldSetting = Object.assign(Object.assign({}, defaultSettings), propsSettings);
    /**
     * 如果不是浏览器 都没有必要做了
     */

    if (!isBrowser()) {
      return function () {
        return null;
      };
    }

    initState(settingState, setSettingState, props.publicPath);
    window.addEventListener('languagechange', onLanguageChange, {
      passive: true
    });
    return function () {
      return window.removeEventListener('languagechange', onLanguageChange);
    };
  }, []);
  /**
   * 修改设置
   * @param key
   * @param value
   * @param hideMessageLoading
   */

  var changeSetting = function changeSetting(key, value, hideMessageLoading) {
    var nextState = Object.assign({}, preStateRef.current);
    nextState[key] = value;

    if (key === 'navTheme') {
      updateTheme(value === 'realDark', undefined, hideMessageLoading, props.publicPath);
      nextState.primaryColor = 'daybreak';
    }

    if (key === 'primaryColor') {
      updateTheme(nextState.navTheme === 'realDark', value === 'daybreak' ? '' : value, hideMessageLoading, props.publicPath);
    }

    if (key === 'layout') {
      nextState.contentWidth = value === 'top' ? 'Fixed' : 'Fluid';
    }

    if (key === 'layout' && value !== 'mix') {
      nextState.splitMenus = false;
    }

    if (key === 'layout' && value === 'mix') {
      nextState.navTheme = 'light';
    }

    if (key === 'colorWeak' && value === true) {
      var dom = document.querySelector('body div');

      if (!dom) {
        return;
      }

      dom.dataset.prosettingdrawer = dom.style.filter;
      dom.style.filter = 'invert(80%)';
    }

    if (key === 'colorWeak' && value === false) {
      var _dom = document.querySelector('body div');

      if (!_dom) {
        return;
      }

      _dom.style.filter = _dom.dataset.prosettingdrawer || 'none';
      delete _dom.dataset.prosettingdrawer;
    }

    preStateRef.current = nextState;
    setSettingState(nextState);
  };

  var formatMessage = getFormatMessage();
  var themeList = getThemeList(settingState);
  useEffect(function () {
    /**
     * 如果不是浏览器 都没有必要做了
     */
    if (!isBrowser()) {
      return;
    }

    if (firstRender.current) {
      firstRender.current = false;
      return;
    }

    var browserHistory = createBrowserHistory();
    var params = {};

    if (window.location.search) {
      params = parse(window.location.search.replace('?', ''));
    }

    var diffParams = getDifferentSetting(Object.assign(Object.assign({}, params), settingState));

    if (Object.keys(settingState).length < 1) {
      return;
    }

    browserHistory.replace({
      search: stringify(diffParams)
    });
  }, [JSON.stringify(settingState)]);
  var baseClassName = "".concat(prefixCls, "-setting");
  return React.createElement(_Drawer, {
    visible: show,
    width: 300,
    onClose: function onClose() {
      return setShow(false);
    },
    placement: "right",
    getContainer: getContainer,
    handler: React.createElement("div", {
      className: "".concat(baseClassName, "-drawer-handle"),
      onClick: function onClick() {
        return setShow(!show);
      }
    }, show ? React.createElement(CloseOutlined, {
      style: {
        color: '#fff',
        fontSize: 20
      }
    }) : React.createElement(SettingOutlined, {
      style: {
        color: '#fff',
        fontSize: 20
      }
    })),
    style: {
      zIndex: 999
    }
  }, React.createElement("div", {
    className: "".concat(baseClassName, "-drawer-content")
  }, React.createElement(Body, {
    title: formatMessage({
      id: 'app.setting.pagestyle',
      defaultMessage: 'Page style setting'
    }),
    prefixCls: baseClassName
  }, React.createElement(BlockCheckbox, {
    prefixCls: baseClassName,
    list: themeList.themeList,
    value: navTheme,
    key: "navTheme",
    onChange: function onChange(value) {
      return changeSetting('navTheme', value, hideLoading);
    }
  })), React.createElement(Body, {
    title: formatMessage({
      id: 'app.setting.themecolor',
      defaultMessage: 'Theme color'
    }),
    prefixCls: baseClassName
  }, React.createElement(ThemeColor, {
    value: primaryColor,
    colors: hideColors ? [] : themeList.colorList[navTheme === 'realDark' ? 'dark' : 'light'],
    formatMessage: formatMessage,
    onChange: function onChange(color) {
      return changeSetting('primaryColor', color, hideLoading);
    }
  })), React.createElement(_Divider, null), React.createElement(Body, {
    prefixCls: baseClassName,
    title: formatMessage({
      id: 'app.setting.navigationmode'
    })
  }, React.createElement(BlockCheckbox, {
    prefixCls: baseClassName,
    value: layout,
    key: "layout",
    list: [{
      key: 'side',
      url: 'https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg',
      title: formatMessage({
        id: 'app.setting.sidemenu'
      })
    }, {
      key: 'top',
      url: 'https://gw.alipayobjects.com/zos/antfincdn/URETY8%24STp/KDNDBbriJhLwuqMoxcAr.svg',
      title: formatMessage({
        id: 'app.setting.topmenu'
      })
    }, {
      key: 'mix',
      url: 'https://gw.alipayobjects.com/zos/antfincdn/x8Ob%26B8cy8/LCkqqYNmvBEbokSDscrm.svg',
      title: formatMessage({
        id: 'app.setting.mixmenu'
      })
    }],
    onChange: function onChange(value) {
      return changeSetting('layout', value, hideLoading);
    }
  })), React.createElement(LayoutSetting, {
    settings: settingState,
    changeSetting: changeSetting
  }), React.createElement(_Divider, null), React.createElement(Body, {
    prefixCls: baseClassName,
    title: formatMessage({
      id: 'app.setting.regionalsettings'
    })
  }, React.createElement(RegionalSetting, {
    settings: settingState,
    changeSetting: changeSetting
  })), React.createElement(_Divider, null), React.createElement(Body, {
    prefixCls: baseClassName,
    title: formatMessage({
      id: 'app.setting.othersettings'
    })
  }, React.createElement(_List, {
    split: false,
    renderItem: renderLayoutSettingItem,
    dataSource: [{
      title: formatMessage({
        id: 'app.setting.weakmode'
      }),
      action: React.createElement(_Switch, {
        size: "small",
        checked: !!colorWeak,
        onChange: function onChange(checked) {
          return changeSetting('colorWeak', checked);
        }
      })
    }]
  })), hideHintAlert && hideCopyButton ? null : React.createElement(_Divider, null), hideHintAlert ? null : React.createElement(_Alert, {
    type: "warning",
    message: formatMessage({
      id: 'app.setting.production.hint'
    }),
    icon: React.createElement(NotificationOutlined, null),
    showIcon: true,
    style: {
      marginBottom: 16
    }
  }), hideCopyButton ? null : React.createElement(CopyToClipboard, {
    text: genCopySettingJson(settingState),
    onCopy: function onCopy() {
      return _message.success(formatMessage({
        id: 'app.setting.copyinfo'
      }));
    }
  }, React.createElement(_Button, {
    block: true
  }, React.createElement(CopyOutlined, null), " ", formatMessage({
    id: 'app.setting.copy'
  })))));
}

Seed = () => {
  document.title = TITLE;
  useDidRecover(() => {
    document.title = TITLE;
  });
  const [isSeedInputVisible, setIsSeedInputVisible] = useState(false);
  const [seedList, setSeedList] = useState([]);
  const [total, setTotal] = useState(0);
  // const [current, setCurrent] = useState(0)
  const [value, setValue] = useState();

  const columns = [
    {
      title: "玩家id",
      dataIndex: "gameId",
      key: "gameId",
      render: (text, seed) => (
        <>
          <Row>
            <p>{text}</p>
            <CopyToClipboard text={text} onCopy={() => message.info("成功")}>
              <CopyOutlined />
            </CopyToClipboard>
          </Row>
          <Row align="middle">
            <SmileOutlined onClick={() => like(seed)} />
            <p>{seed.likes}</p>
          </Row>
          <Row align="middle">
            <FrownOutlined onClick={() => dislike(seed)} />
            <p>{seed.dislikes}</p>
          </Row>
          {seed.userId === userId && (
            <Row align="middle">
              <DeleteOutlined onClick={() => deleteSeed(seed)} />
            </Row>
          )}
        </>
      ),
    },
    {
      title: "主要",
      dataIndex: "playerId0",
      key: "playerId0",
      render: (text) => <PlayerImage id={text} />,
    },
    {
      title: "蓝色因子",
      dataIndex: "blue0",
      key: "blue0",
      render: (text, record) => (
        <span className="rate-label">{`${SEED_BLUE_LABELS[text]}\xa0\xa0${record["blueLevel0"]}`}</span>
      ),
    },
    {
      title: "红色因子",
      dataIndex: "red0",
      key: "red0",
      render: (text, record) => (
        <span className="rate-label">{`${SEED_RED_LABELS[text]}\xa0\xa0${record["redLevel0"]}`}</span>
      ),
    },
    {
      title: "绿色因子",
      dataIndex: "greenLevel0",
      key: "greenLevel0",
      render: (text, record) => (
        <span className="rate-label">{`固有\xa0\xa0${record["greenLevel0"]}`}</span>
      ),
    },
    {
      title: "URA",
      dataIndex: "uraLevel0",
      key: "uraLevel0",
      render: (text, record) => (
        <span className="rate-label">
          {`${record["uraLevel0"] ? `URA  ${record["uraLevel0"]}` : ""}`}
        </span>
      ),
    },
    {
      title: "父辈1",
      dataIndex: "playerId1",
      key: "playerId1",
      render: (text) => <PlayerImage id={text} />,
    },
    {
      title: "父辈2",
      dataIndex: "playerId2",
      key: "playerId2",
      render: (text) => <PlayerImage id={text} />,
    },
    {
      title: "总计蓝色",
      key: "allBlue",
      render: (text, record) =>
        Object.keys(SEED_BLUE_LABELS).map((key) => {
          if (record[key]) {
            return (
              <span
                key={key}
                className="rate-label"
              >{`${SEED_BLUE_LABELS[key]}\xa0\xa0${record[key]}`}</span>
            );
          } else {
            return null;
          }
        }),
    },
    {
      title: "总计红色",
      key: "allRed",
      render: (text, record) =>
        Object.keys(SEED_RED_LABELS).map((key) => {
          if (record[key]) {
            return (
              <span
                key={key}
                className="rate-label"
              >{`${SEED_RED_LABELS[key]}\xa0\xa0${record[key]}`}</span>
            );
          } else {
            return null;
          }
        }),
    },
    { title: "总计URA", dataIndex: "uraLevel", key: "uraLevel", render: (text) => text },
    { title: "总计白色", dataIndex: "white", key: "white", render: (text) => text },
    {
      title: "支援卡",
      dataIndex: "supportId",
      key: "supportId",
      render: (text) => <SupportImage id={text} />,
    },
    {
      title: "突破等级",
      dataIndex: "supportLevel",
      key: "supportLevel",
      render: (text, record) => (
        <Row>
          <Rate count={4} value={record["supportLevel"]} disabled />
        </Row>
      ),
    },
  ];

  const showSeedInput = (index) => {
    setIsSeedInputVisible(true);
  };
  const closeSeedInput = () => {
    setIsSeedInputVisible(false);
  };
  const showMySeed = () => {
    search({ attrs: ["userId"], levels: [userId] });
  };
  const deleteSeed = async (value) => {
    const res = await axios.post("https://urarawin.com/api/sqlite/delete", value);
    if (res.data) {
      message.info("成功删除");
    } else {
      message.info("出错了");
    }
  };
  const search = async (value) => {
    setValue(value);
    const res = await axios.post("https://urarawin.com/api/sqlite/search", value);
    // setCurrent(0)
    if (res.data) {
      if (res.data.count) {
        setSeedList([...res.data.list]);
        setTotal(res.data.count);
      } else {
        setSeedList([]);
        setTotal(0);
        message.info("暂无数据");
      }
    } else {
      message.info("出错了");
    }
  };
  const like = async (seed) => {
    if (!userId) {
      message.info("刷新后重试");
      return;
    }
    let id = seed.id;
    const res = await axios.post("https://urarawin.com/api/sqlite/like", { id, userId });
    if (res.data) {
      message.info("成功");
      seed.likes += 1;
    }
    setSeedList([...seedList]);
  };
  const dislike = async (seed) => {
    if (!userId) {
      message.info("刷新后重试");
      return;
    }
    let id = seed.id;
    const res = await axios.post("https://urarawin.com/api/sqlite/dislike", { id, userId });
    if (res.data) {
      message.info("成功");
      seed.dislikes += 1;
    }
    setSeedList([...seedList]);
  };
  const onChange = (e) => {
    search({
      ...value,
      count: e.total,
      offset: e.current * 10 - 10,
    });
  };
  return (
    <>
      <div className="seed-container">
        <Card className="card" title="过滤条件">
          <SearchForm search={search} />
          <Button onClick={() => showSeedInput()}>配置我的种子</Button>
          <Button onClick={() => showMySeed()}>查看我的种子</Button>
        </Card>
        <Card className="card" title="结果">
          <Table
            columns={columns}
            dataSource={seedList}
            onChange={onChange}
            pagination={{
              pageSize: 10,
              total: total,
              simple: true,
              showQuickJumper: false,
              position: ["topRight", "bottomRight"],
            }}
            rowKey={"id"}
          />
        </Card>
      </div>
      <Modal
        visible={isSeedInputVisible}
        onOk={closeSeedInput}
        onCancel={closeSeedInput}
        footer={null}
        width={"80%"}
      >
        <SeedInput onFinish={closeSeedInput} />
      </Modal>
    </>
  );
}