feat(components): 新增 CustomCard组件

src/pages/scene/engineering.tsx

@@ -0,0 +1,98 @@
+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';
+
+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);
+  };
+  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>
+          {/*遍历生成4个卡片*/}
+          {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>
+                <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;

src/pages/scene/index.tsx

@@ -1,10 +1,43 @@
 import React from 'react';
+import CustomCard from '@/components/CustomCard';
+import Engineering from './engineering';
+import { Tabs, Typography } from '@arco-design/web-react';
+import { IconUser, IconPublic } from '@arco-design/web-react/icon';
+import style from './style/index.module.less';
+
+const TabPane = Tabs.TabPane;
 
 function Scene() {
   return (
     <>
-      <div>
+      <div className={style.container}>
-        所有应用
+        <CustomCard>
+          {/*tabs工具栏*/}
+          <Tabs defaultActiveTab="1">
+            <TabPane key="1"
+                     title={
+                       <span>
+                        <IconUser />
+                        我的工程
+                      </span>
+                     }>
+              <Typography.Paragraph>
+                <Engineering dataType={'my'}></Engineering>
+              </Typography.Paragraph>
+            </TabPane>
+            <TabPane key="2"
+                     title={
+                       <span>
+                        <IconPublic />
+                        公开工程
+                      </span>
+                     }>
+              <Typography.Paragraph>
+                <Engineering dataType={'public'}></Engineering>
+              </Typography.Paragraph>
+            </TabPane>
+          </Tabs>
+        </CustomCard>
       </div>
     </>
   );

src/pages/scene/style/engineering.module.less

@@ -0,0 +1,6 @@
+.engineeringContainer {
+  .cardStyle {
+    margin: 5px;
+    border: 1px solid var(--color-neutral-3);
+  }
+}

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

@@ -0,0 +1,2 @@
+.container {
+}