feat(componentMarket): 组件市场页面增加搜索和分类功能

src/pages/componentMarket/compCard.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import styles from './style/compCard.module.less';
+import { compData } from '@/pages/componentMarket/test/data';
+import { Card, Grid, Rate, Typography } from '@arco-design/web-react';
+
+const { Row, Col } = Grid;
+
+interface CompCardProps {
+  componentClassify: string;
+}
+
+const CompCard: React.FC<CompCardProps> = ({ componentClassify }) => {
+  const [componentClassifyData, setComponentClassifyData] = useState<any>([]);
+
+  useEffect(() => {
+    if (componentClassify === '全部') setComponentClassifyData(compData);
+    else {
+      const filterData = compData.filter(v => v.componentClassify === componentClassify);
+      setComponentClassifyData(filterData || []);
+    }
+  }, [componentClassify]);
+
+  return (
+    <div className={styles['comp-card']}>
+      <Row style={{ marginBottom: 16 }}>
+        {componentClassifyData.map((v, i) => {
+          return (
+            <Col
+              xs={12}
+              sm={12}
+              md={12}
+              lg={6}
+              xl={6}
+              xxl={6}
+              key={i}>
+              <Card style={{ border: '1px solid #d9d9d9' }}>
+                {/*左侧图片*/}
+                <div className={styles['img-box']}>图片</div>
+                {/*右侧数据*/}
+                <div className={styles['info-box']}>
+                  <div className={styles['info-title']}>{v.name}</div>
+                  <div className={styles['info-author']}>{v.identifier}</div>
+                  <div className={styles['info-score']}>
+                    <div>组件评分：</div>
+                    <Rate readonly allowHalf value={v.star < 0 ? 5 : v.star} />
+                    <Typography.Text
+                      style={{
+                        margin: '0 5px'
+                      }}
+                    >
+                      {v.star < 0 ? 5 : v.star}分
+                    </Typography.Text>
+                  </div>
+                </div>
+              </Card>
+              <div className={styles['comp-card-footer']}>
+                <div className={styles['comp-type']}>{v.componentClassify}</div>
+                <div className={styles['comp-language']}>{v.deployType}</div>
+              </div>
+            </Col>
+          );
+        })}
+      </Row>
+    </div>
+  );
+};
+
+export default CompCard;

src/pages/componentMarket/index.tsx

@@ -1,10 +1,44 @@
-import React from 'react';
+import React, { useState } from 'react';
+import styles from './style/index.module.less';
+import CustomCard from '@/components/CustomCard/index';
+import CompCard from './compCard';
+import { menu } from './test/data';
+import { Tabs, Input, Select } from '@arco-design/web-react';
+
+const TabPane = Tabs.TabPane;
+const InputSearch = Input.Search;
 
 function ComponentMarket() {
   return (
     <>
-      <div>
-        组件市场
+      <div className={styles['comp-market-container']}>
+        <CustomCard>
+          {/*公用搜索*/}
+          <div className={styles['comp-market-header']}>
+            <div className={styles['comp-market-search']}>
+              <Input.Group compact>
+                <Select size="large" defaultValue="全部" style={{ width: '25%' }}>
+                  {menu.map((item, index) => {
+                    return (
+                      <Select.Option key={index} value={item.dictValue}>{item.dictValue}</Select.Option>
+                    );
+                  })}
+                </Select>
+                <InputSearch size="large" placeholder="请输入组件名、关键词进行搜索" style={{ width: '75%' }} />
+              </Input.Group>
+            </div>
+          </div>
+          {/*单类型数据渲染*/}
+          <Tabs key="card" tabPosition="left">
+            {menu.map((item) => {
+              return (
+                <TabPane key={item.id} title={item.dictValue}>
+                  <CompCard componentClassify={item.dictValue}></CompCard>
+                </TabPane>
+              );
+            })}
+          </Tabs>
+        </CustomCard>
       </div>
     </>
   );

src/pages/componentMarket/style/compCard.module.less

@@ -0,0 +1,38 @@
+.comp-card {
+
+  :global(.arco-col) {
+    padding: 10px;
+  }
+
+  :global(.arco-card-body) {
+    display: flex;
+  }
+
+  .img-box {
+    width: 80px;
+    height: 110px;
+    background-color: #cccccc;
+    margin-right: 10px;
+  }
+
+  .info-box {
+
+    .info-author {
+      margin-bottom: 40px;
+    }
+
+    .info-score {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .comp-card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    background: linear-gradient(90deg, #64b5f6, #2175f3);
+    color: #ffffff;
+  }
+}

src/pages/componentMarket/style/index.module.less

@@ -0,0 +1,24 @@
+.comp-market-container {
+
+
+  .comp-market-header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    box-shadow: 0 0 10px #ebebeb;
+    background-color: #fcfcfc;
+    padding: 20px 0;
+    margin-bottom: 15px;
+
+    .comp-market-search {
+      width: 40%;
+    }
+  }
+
+  :global {
+    .arco-tabs-header-title {
+      text-align: right;
+    }
+  }
+}