feat(component): 实现组件下架功能

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>
     </>
   );
 };