From c72923ef88343758a7a22858d5c48cc97ad7def4 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Tue, 19 Aug 2025 11:57:37 +0800
Subject: [PATCH] =?UTF-8?q?feat(application):=20=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E9=A1=B5=E9=9D=A2=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/application/index.tsx               |  37 +++++-
 src/pages/application/style/index.module.less |   2 +
 .../style/subApplication.module.less          |   7 ++
 src/pages/application/subApplication.tsx      | 105 ++++++++++++++++++
 src/routes/modules/ideContainer.ts            |   8 ++
 5 files changed, 157 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/application/style/index.module.less
 create mode 100644 src/pages/application/style/subApplication.module.less
 create mode 100644 src/pages/application/subApplication.tsx
 create mode 100644 src/routes/modules/ideContainer.ts

diff --git a/src/pages/application/index.tsx b/src/pages/application/index.tsx
index e130e11..c09684f 100644
--- a/src/pages/application/index.tsx
+++ b/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>
     </>
   );
diff --git a/src/pages/application/style/index.module.less b/src/pages/application/style/index.module.less
new file mode 100644
index 0000000..204049c
--- /dev/null
+++ b/src/pages/application/style/index.module.less
@@ -0,0 +1,2 @@
+.container {
+}
\ No newline at end of file
diff --git a/src/pages/application/style/subApplication.module.less b/src/pages/application/style/subApplication.module.less
new file mode 100644
index 0000000..f473b1c
--- /dev/null
+++ b/src/pages/application/style/subApplication.module.less
@@ -0,0 +1,7 @@
+.SubApplicationContainer {
+  .cardStyle {
+    margin: 5px;
+    border: 1px solid var(--color-neutral-3);
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/application/subApplication.tsx b/src/pages/application/subApplication.tsx
new file mode 100644
index 0000000..e399849
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/routes/modules/ideContainer.ts b/src/routes/modules/ideContainer.ts
new file mode 100644
index 0000000..2a01608
--- /dev/null
+++ b/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
+};
\ No newline at end of file