ci4sManagement-cloud/react-ui/src/pages/Workspace/components/Search/index.tsx

import KFIcon from '@/components/KFIcon';
import { Button, Flex, Input } from 'antd';
import styles from './index.less';

const hotQuestions = [
  {
    icon: '',
    title: '高分子材料有哪些？',
  },
  {
    icon: '',
    title: '高分子材料有哪些？',
  },
  {
    icon: '',
    title: '高分子材料有哪些？',
  },
  {
    icon: '',
    title: '高分子材料有哪些？',
  },
];

function WorkspaceSearch() {
  return (
    <div className={styles['workspace-search']}>
      <Flex align="center">
        <img
          src={require('@/assets/img/workspace/search-icon.png')}
          className={styles['workspace-search__icon']}
        ></img>
        <span>今天你想问一些什么科学的问题</span>
        <img
          src={require('@/assets/img/workspace/search-star.gif')}
          className={styles['workspace-search__star']}
        ></img>
      </Flex>
      <div className={styles['workspace-search__textarea']}>
        <Input.TextArea
          autoSize={{ minRows: 5, maxRows: 5 }}
          placeholder="请输入科学问题进行搜索"
          allowClear
        />
        <Button
          icon={<KFIcon type="icon-a-lianhe173" />}
          color="default"
          variant="solid"
          shape="round"
        >
          开始搜索
        </Button>
      </div>
      <Flex align="center" gap={'20px'} wrap>
        {hotQuestions.map((item, index) => (
          <div key={index} className={styles['workspace-search__question']}>
            <img
              src={require('@/assets/img/workspace/hot-icon.png')}
              className={styles['workspace-search__question__icon']}
            ></img>
            <span>{item.title}</span>
          </div>
        ))}
      </Flex>
      <Flex className={styles['workspace-search__try']} align="center" justify="center">
        <div>试一试主题：梅洛 · 庞蒂的“身体现象学”</div>
        <Button
          icon={<KFIcon type="icon-shuaxin1" font={12} style={{ verticalAlign: 1 }} />}
          color="default"
          variant="solid"
          shape="round"
          size="middle"
        >
          换一换
        </Button>
      </Flex>
    </div>
  );
}

export default WorkspaceSearch;