feat(application): 新增应用页面模块

src/pages/application/index.tsx

@@ -1,10 +1,43 @@
 import React from 'react';
+import CustomCard from '@/components/CustomCard';
+import SubApplication from './subApplication';
+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 Application() {
   return (
     <>
-      <div>
+      <div className={style.container}>
-        所有应用
+        <CustomCard>
+          {/*tabs工具栏*/}
+          <Tabs defaultActiveTab="1">
+            <TabPane key="1"
+                     title={
+                       <span>
+                        <IconUser />
+                        我的应用
+                      </span>
+                     }>
+              <Typography.Paragraph>
+                <SubApplication dataType={'my'}></SubApplication>
+              </Typography.Paragraph>
+            </TabPane>
+            <TabPane key="2"
+                     title={
+                       <span>
+                        <IconPublic />
+                        公开应用
+                      </span>
+                     }>
+              <Typography.Paragraph>
+                <SubApplication dataType={'public'}></SubApplication>
+              </Typography.Paragraph>
+            </TabPane>
+          </Tabs>
+        </CustomCard>
       </div>
     </>
   );

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

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

src/pages/application/style/subApplication.module.less

@@ -0,0 +1,7 @@
+.SubApplicationContainer {
+  .cardStyle {
+    margin: 5px;
+    border: 1px solid var(--color-neutral-3);
+    cursor: pointer;
+  }
+}

src/pages/application/subApplication.tsx

@@ -0,0 +1,105 @@
+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;

src/routes/modules/ideContainer.ts

@@ -0,0 +1,8 @@
+import { IRoute } from '@/routes/types';
+
+export const ideContainerMoudle: IRoute = {
+  name: 'menu.ideContainer',
+  key: 'ideContainer',
+  breadcrumb: false,
+  ignore: true
+};