flow-playform-react/src/pages/application/subApplication.tsx

import React, { useState } from 'react';
import style from './style/SubApplication.module.less';
import { Input, Grid, Card, Result, Pagination } from '@arco-design/web-react';
import { IconPlus, IconApps } from '@arco-design/web-react/icon';

const InputSearch = Input.Search;
const Row = Grid.Row;
const Col = Grid.Col;

interface SubApplicationProps {
  dataType: 'my' | 'public',
  showAdd?: boolean,
}


const SubApplication: React.FC<SubApplicationProps> = ({ dataType, showAdd = true }) => {
  const [searchValue, setSearchValue] = useState<string>('');
  const [count, setCount] = useState<number>(12);

  const onSearchHandle = (value: string) => {
    if (!value) return;
    console.log('状态值:', searchValue);
  };

  const handleChange = (value: string) => {
    setSearchValue(value);
  };

  const openEngineHandle = (index: number) => {
    console.log('打开应用', index);
    const ideUrl = '/ideContainer';
    window.open(ideUrl, '_blank');
  };

  return (
    <>
      <div className={style.SubApplicationContainer}>
        {/*搜索*/}
        <Row>
          <Col span={24}>
            <InputSearch
              allowClear
              searchButton="搜索"
              defaultValue=""
              placeholder="输入需要搜索的应用名称"
              style={{ width: 350, marginBottom: 15 }}
              onChange={handleChange}
              onSearch={onSearchHandle}
              value={searchValue}
            />
          </Col>
        </Row>
        {/*卡片模式数据渲染*/}
        <Row>
          <Col
            xs={12}
            sm={12}
            md={12}
            lg={6}
            xl={6}
            xxl={6}>
            {/*新建应用按钮*/}
            {showAdd && (
              <Card
                className={style.cardStyle}
              >
                <Result
                  status="info"
                  subTitle={'新建应用'}
                  icon={<IconPlus />}
                ></Result>
              </Card>
            )}
          </Col>
          {/*遍历生成卡片*/}
          {Array.from({ length: count }).map((item, index) => (
            <Col
              key={index}
              xs={12}
              sm={12}
              md={12}
              lg={6}
              xl={6}
              xxl={6}>
              <Card className={style.cardStyle} hoverable onClick={() => openEngineHandle(index)}>
                <Result
                  status="info"
                  subTitle={'应用' + index}
                  icon={<IconApps />}
                ></Result>
              </Card>
            </Col>
          ))}
        </Row>
        <Row>
          <Col>
            <Pagination style={{ float: 'right' }} total={100} />
          </Col>
        </Row>
      </div>
    </>
  );
};

export default SubApplication;