From ad592ef134e417cdccf5ce29d42d0b8ca0320b40 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Thu, 9 Oct 2025 15:50:04 +0800
Subject: [PATCH] =?UTF-8?q?feat(componentDeployment):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E9=83=A8=E7=BD=B2=E9=A1=B5=E9=9D=A2=E5=8F=8A?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componentDeployment/collapseList.tsx      | 228 ++++++++++++++++++
 .../componentDeployment/index.tsx             |  48 ++++
 .../style/collapseList.module.less            |  25 ++
 .../style/index.module.less                   |  13 +
 src/pages/ideContainer/index.tsx              |   2 +-
 5 files changed, 315 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/componentDevelopment/componentDeployment/collapseList.tsx
 create mode 100644 src/pages/componentDevelopment/componentDeployment/index.tsx
 create mode 100644 src/pages/componentDevelopment/componentDeployment/style/collapseList.module.less
 create mode 100644 src/pages/componentDevelopment/componentDeployment/style/index.module.less

diff --git a/src/pages/componentDevelopment/componentDeployment/collapseList.tsx b/src/pages/componentDevelopment/componentDeployment/collapseList.tsx
new file mode 100644
index 0000000..2001533
--- /dev/null
+++ b/src/pages/componentDevelopment/componentDeployment/collapseList.tsx
@@ -0,0 +1,228 @@
+import React from 'react';
+import { Collapse, Space, Tag, Button, Table, TableColumnProps } from '@arco-design/web-react';
+import styles from './style/collapseList.module.less';
+import { IconEye } from '@arco-design/web-react/icon';
+
+const CollapseItem = Collapse.Item;
+
+
+const headerNode = () => {
+  return (
+    <div className={styles['header-node']}>
+      <Space size={7} style={{ marginRight: 50 }}>
+        <img src="https://picsum.photos/200/300"
+             style={{ width: 50, height: 50, borderRadius: 6, overflow: 'hidden' }} />
+        <div>小车零件中心点识别</div>
+      </Space>
+
+      <Space size={10}>
+        <Tag>视觉AI组件</Tag>
+        <Tag>X86_64</Tag>
+        <Tag color={'green'}>启用中</Tag>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/countIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>4</span>
+        </div>
+      </Space>
+    </div>
+  );
+};
+
+const extraNode = () => {
+  return (
+    <div className={styles['extra-node']}>
+      <Space size={20}>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/compileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>未编译</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/recompileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>重新编译</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/addIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>新增实例</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/removedIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>下架组件</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>更多操作</span>
+        </div>
+      </Space>
+    </div>
+  );
+};
+
+const extraNode1 = () => {
+  return (
+    <div className={styles['extra-node']}>
+      <Space size={20}>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/compiledIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#40BF6D' }}>已编译</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/recompileIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>重新编译</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/addIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>新增实例</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/removedIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>下架组件</span>
+        </div>
+        <div className={styles['flex-box']}>
+          <img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
+          <span style={{ color: '#A2A2AB' }}>更多操作</span>
+        </div>
+      </Space>
+    </div>
+  );
+};
+
+const columns: TableColumnProps[] = [
+  {
+    title: '#',
+    dataIndex: 'key',
+    align: 'center'
+  },
+  {
+    title: '组件标识',
+    dataIndex: 'name',
+    align: 'center'
+  },
+  {
+    title: '实例名称',
+    dataIndex: 'salary',
+    align: 'center'
+  },
+  {
+    title: '运行类型',
+    dataIndex: 'address',
+    align: 'center'
+  },
+  {
+    title: '运行状态',
+    dataIndex: 'email',
+    align: 'center'
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'email',
+    align: 'center'
+  },
+  {
+    title: '操作',
+    dataIndex: '',
+    align: 'center',
+    render: (col, record, index) => (
+      <div className={styles['table-handle-box']}>
+        <Space size={20}>
+          <Button type="text">查看配置</Button>
+          <Button type="text">环境配置</Button>
+          <Button type="text">运行日志</Button>
+          <Button type="text">实例配置</Button>
+          <Button type="text"
+                  icon={<img
+                    src={'/icons/editIcon.png'}
+                    style={{ width: 16, height: 16, marginRight: 5 }} />}
+          >编辑</Button>
+          <Button type="text"
+                  icon={<img
+                    src={'/icons/powerUpIcon.png'}
+                    style={{ width: 16, height: 16, marginRight: 5 }} />}
+          >启用</Button>
+          <Button type="text"
+                  icon={<img
+                    src={'/icons/deleteIcon.png'}
+                    style={{ width: 16, height: 16, marginRight: 5 }} />}
+          >删除</Button>
+        </Space>
+      </div>
+    )
+  }
+];
+const data = [
+  {
+    key: '1',
+    name: 'Jane Doe',
+    salary: 23000,
+    address: '32 Park Road, London',
+    email: 'jane.doe@example.com'
+  },
+  {
+    key: '2',
+    name: 'Alisa Ross',
+    salary: 25000,
+    address: '35 Park Road, London',
+    email: 'alisa.ross@example.com'
+  },
+  {
+    key: '3',
+    name: 'Kevin Sandra',
+    salary: 22000,
+    address: '31 Park Road, London',
+    email: 'kevin.sandra@example.com'
+  },
+  {
+    key: '4',
+    name: 'Ed Hellen',
+    salary: 17000,
+    address: '42 Park Road, London',
+    email: 'ed.hellen@example.com'
+  },
+  {
+    key: '5',
+    name: 'William Smith',
+    salary: 27000,
+    address: '62 Park Road, London',
+    email: 'william.smith@example.com'
+  }
+];
+
+const listNode = () => {
+  return (
+    <Table pagination={false} border={false} columns={columns} data={data} />
+  );
+};
+
+const CollapseList = () => {
+  return (
+    <div className={styles['collapse-list']}>
+      <Collapse
+        expandIconPosition={'right'}
+        bordered={false}
+      >
+        <CollapseItem
+          header={headerNode()}
+          name="1"
+          extra={extraNode()}
+        >
+          {listNode()}
+        </CollapseItem>
+
+        <CollapseItem
+          header={headerNode()}
+          name="2"
+          extra={extraNode1()}>
+          {listNode()}
+        </CollapseItem>
+
+        <CollapseItem
+          header={headerNode()}
+          name="3"
+          extra={extraNode()}>
+          {listNode()}
+        </CollapseItem>
+      </Collapse>
+    </div>
+  );
+};
+
+export default CollapseList;
\ No newline at end of file
diff --git a/src/pages/componentDevelopment/componentDeployment/index.tsx b/src/pages/componentDevelopment/componentDeployment/index.tsx
new file mode 100644
index 0000000..17157b8
--- /dev/null
+++ b/src/pages/componentDevelopment/componentDeployment/index.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import styles from './style/index.module.less';
+import { Button, Input, Radio, Space } from '@arco-design/web-react';
+import { IconSearch } from '@arco-design/web-react/icon';
+import CollapseList from './collapseList';
+
+const ComponentDeployment = () => {
+  return (
+    <div className={styles['component-deployment']}>
+      <div className={styles['header']}>
+        <Radio.Group defaultValue={'Beijing'} name="button-radio-group">
+          {['全部', '启用中', '已下架'].map((item) => {
+            return (
+              <Radio key={item} value={item}>
+                {({ checked }) => {
+                  return (
+                    <Button tabIndex={-1} key={item} shape="round" type={checked ? 'primary' : 'default'}>
+                      {item}
+                    </Button>
+                  );
+                }}
+              </Radio>
+            );
+          })}
+        </Radio.Group>
+
+        <Space>
+          <Input
+            prefix={<IconSearch />}
+            placeholder={'搜索'}
+            style={{ width: 236 }}
+          />
+          <Button
+            type="primary"
+            style={{ marginLeft: 5, borderRadius: 4 }}
+          >
+            实例指引
+          </Button>
+        </Space>
+      </div>
+      <div className="content">
+        <CollapseList></CollapseList>
+      </div>
+    </div>
+  );
+};
+
+export default ComponentDeployment;
\ No newline at end of file
diff --git a/src/pages/componentDevelopment/componentDeployment/style/collapseList.module.less b/src/pages/componentDevelopment/componentDeployment/style/collapseList.module.less
new file mode 100644
index 0000000..62ee218
--- /dev/null
+++ b/src/pages/componentDevelopment/componentDeployment/style/collapseList.module.less
@@ -0,0 +1,25 @@
+.collapse-list {
+  :global(.arco-collapse-item-content-box) {
+    padding: 0;
+  }
+}
+
+.header-node {
+  display: flex;
+  align-items: center;
+}
+
+.extra-node {
+  margin-right: 20px;
+}
+
+.flex-box {
+  display: flex;
+  align-items: center;
+}
+
+.table-handle-box {
+  :global(.arco-btn) {
+    padding: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/componentDevelopment/componentDeployment/style/index.module.less b/src/pages/componentDevelopment/componentDeployment/style/index.module.less
new file mode 100644
index 0000000..d3d5b03
--- /dev/null
+++ b/src/pages/componentDevelopment/componentDeployment/style/index.module.less
@@ -0,0 +1,13 @@
+.component-deployment {
+  height: 98%;
+  background-color: #ffffff;
+  padding: 17px 19px 0 24px;
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ebebeb;
+    margin-bottom: 25px;
+  }
+}
\ No newline at end of file
diff --git a/src/pages/ideContainer/index.tsx b/src/pages/ideContainer/index.tsx
index 4dc7ca9..ba1f91c 100644
--- a/src/pages/ideContainer/index.tsx
+++ b/src/pages/ideContainer/index.tsx
@@ -17,6 +17,7 @@ import GlobalVarContainer from '@/pages/orchestration/globalVar';
 import AppCompComponent from '@/pages/orchestration/appCompComponent';
 import ComponentList from '@/pages/componentDevelopment/componentList';
 import ComponentCoding from '@/pages/componentDevelopment/componentCoding';
+import ComponentDeployment from '@/pages/componentDevelopment/componentDeployment';
 
 type UrlParamsOptions = {
   identity?: string;
@@ -28,7 +29,6 @@ const AppInstanceComponent = () => <div style={{ height: '100%', width: '100%' }
 const MyComponents = () => <div style={{ height: '100%', width: '100%' }}>我的组件</div>;
 const MatchingComponents = () => <div style={{ height: '100%', width: '100%' }}>协同组件</div>;
 const ComponentReview = () => <div style={{ height: '100%', width: '100%' }}>组件审核</div>;
-const ComponentDeployment = () => <div style={{ height: '100%', width: '100%' }}>组件部署</div>;
 const ComponentTest = () => <div style={{ height: '100%', width: '100%' }}>组件测试</div>;
 const EnvConfig = () => <div style={{ height: '100%', width: '100%' }}>环境配置</div>;