flow-playform-react/src/pages/scene/engineering.tsx

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

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

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


const Engineering: React.FC<EngineeringProps> = ({ 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) => {
    const url = `/ideContainer`;
    const params: OpenWindowOptions = {
      target: '_blank',
      menu: false,
      identity: 'scene'
    };
    openWindow(url, params);
  };

  return (
    <>
      <div className={style.engineeringContainer}>
        {/*搜索*/}
        <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 Engineering;