From 7f38dda1568bee274aea094d90d291167eb4ca74 Mon Sep 17 00:00:00 2001
From: ZLY <zhongliangyuan@gdngsk.com>
Date: Fri, 28 Nov 2025 14:13:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(component):=20=E5=AE=9E=E7=8E=B0=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=8B=E6=9E=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../componentList/index.tsx                   | 51 ++++++++++++++++++-
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/pages/componentDevelopment/componentList/index.tsx b/src/pages/componentDevelopment/componentList/index.tsx
index fbb0a76..9a748a3 100644
--- a/src/pages/componentDevelopment/componentList/index.tsx
+++ b/src/pages/componentDevelopment/componentList/index.tsx
@@ -26,6 +26,7 @@ import {
 import dayjs from 'dayjs';
 import { updateComponentCodingPath } from '@/store/ideContainer';
 import { useDispatch } from 'react-redux';
+import { componentOffSale } from '@/api/componentDeploy';
 
 const Group = Radio.Group;
 
@@ -49,6 +50,8 @@ const GlobalVarContainer = () => {
   const [importModalVisible, setImportModalVisible] = useState(false); // 导入弹窗
   const [importComponentInfo, setImportComponentInfo] = useState(null); // 导入组件信息
   const [importLoading, setImportLoading] = useState(false); // 导入加载状态
+  const [showOffSaleModal, setShowOffSaleModal] = useState(false);
+  const [offSaleComponent, setOffSaleComponent] = useState(null);
   const dispatch = useDispatch();
 
   const menuItems = [
@@ -207,8 +210,8 @@ const GlobalVarContainer = () => {
             onExportComponent(row);
           }}
           onStopComponentShow={(row) => {
-            // TODO: 实现下架组件逻辑
-            console.log('Stop component show', row);
+            setOffSaleComponent(row);
+            setShowOffSaleModal(true);
           }}
           onRowDel={(row) => {
             // 显示确认框
@@ -272,6 +275,22 @@ const GlobalVarContainer = () => {
     };
   }, []);
 
+  // 下架组件
+  const componentOffSaleHandler = async (stopInstance: boolean) => {
+    const res: any = await componentOffSale({ identifier: offSaleComponent.identifier, stopInstance });
+    if (res.code === 200) {
+      setShowOffSaleModal(false);
+      setOffSaleComponent(null);
+      fetchComponentReview();
+    }
+    else {
+      Modal.error({
+        title: '下架失败',
+        content: res.message
+      });
+    }
+  };
+
   // 处理导入组件 - 文件选择后获取组件信息
   const handleImportFileSelect = async (file: File) => {
     try {
@@ -627,6 +646,34 @@ const GlobalVarContainer = () => {
         componentInfo={importComponentInfo}
         loading={importLoading}
       />
+
+      <Modal
+        title={'下架组件'}
+        visible={showOffSaleModal}
+        style={{ width: '45%' }}
+        onCancel={() => {
+          setSelectedItem(null);
+          setShowOffSaleModal(false);
+        }}
+        footer={[
+          <Button key="cancel" onClick={() => setShowOffSaleModal(false)}>
+            取消
+          </Button>,
+          <Button key="offshelf" type="primary" onClick={() => {
+            componentOffSaleHandler(false);
+          }}>
+            仅下架组件
+          </Button>,
+          <Button key="stopAndOffshelf" type="primary" status="danger" onClick={() => {
+            componentOffSaleHandler(true);
+          }}>
+            停止线上实例并下架组件
+          </Button>
+        ]}
+      >
+        <p>下架后该组件状态为编码中，不可继续新增实例等。</p>
+        <p> 该组件存在线上部署的实例，可继续使用原有的代码逻辑继续运行，是否需要同步停止所有线上实例？</p>
+      </Modal>
     </>
   );
 };