feat(component): 支持动态加载不同类型的配置教程文档

src/pages/componentDevelopment/componentDeployment/index.tsx

@@ -1,22 +1,25 @@
 import React, { useState } from 'react';
 import styles from './style/index.module.less';
-import { Button, Input, Radio, Space } from '@arco-design/web-react';
+import { Button, Input, Modal, Radio, Space } from '@arco-design/web-react';
 import { IconSearch } from '@arco-design/web-react/icon';
 import CollapseList from './collapseList';
 import { startStatusConstant } from '@/const/isdp/componentDeploy';
+import ConfigTutorial from '@/pages/componentDevelopment/componentEnv/configTutorial';
 
 const ComponentDeployment = () => {
   const [searchKeyword, setSearchKeyword] = useState('');
   const [selectedStatus, setSelectedStatus] = useState<string | undefined>(undefined);
+  const [tutorialVisible, setTutorialVisible] = useState(false);
 
   // 状态选项配置
   const statusOptions = [
     { label: '全部', value: undefined },
-    { label: '启用中', value: "RUN" },
-    { label: '已下架', value: "STOP" }
+    { label: '启用中', value: 'RUN' },
+    { label: '已下架', value: 'STOP' }
   ];
 
   return (
+    <>
       <div className={styles['component-deployment']}>
         <div className={styles['header']}>
           <Radio.Group
@@ -53,6 +56,7 @@ const ComponentDeployment = () => {
             <Button
               type="primary"
               style={{ marginLeft: 5, borderRadius: 4 }}
+              onClick={() => setTutorialVisible(true)}
             >
               实例指引
             </Button>
@@ -62,6 +66,17 @@ const ComponentDeployment = () => {
           <CollapseList searchKeyword={searchKeyword} runStatus={selectedStatus} />
         </div>
       </div>
+
+      <Modal
+        title="组件实例教程"
+        visible={tutorialVisible}
+        onCancel={() => setTutorialVisible(false)}
+        footer={null}
+        style={{ top: 20, width: '100%' }}
+      >
+        <ConfigTutorial tutorialType="compInstance" />
+      </Modal>
+    </>
   );
 };
 

src/pages/componentDevelopment/componentEnv/configTutorial.tsx

@@ -1,15 +1,24 @@
 import React, { useEffect, useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 
-const ConfigTutorial = () => {
+type tutorialTypeProps = {
+  tutorialType: 'env' | 'compInstance';
+};
+
+const ConfigTutorial: React.FC<tutorialTypeProps> = ({ tutorialType }) => {
   const [markdown, setMarkdown] = useState('');
 
   useEffect(() => {
-    fetch('/assets/环境配置教程.md')
+    const fileMap = {
+      env: '/assets/环境配置教程.md',
+      compInstance: '/assets/组件实例指引.md'
+    };
+
+    fetch(fileMap[tutorialType])
       .then(response => response.text())
       .then(text => setMarkdown(text))
       .catch(error => console.error('Error loading markdown file:', error));
-  }, []);
+  }, [tutorialType]);
 
   return (
     <div style={{ padding: '20px' }}>

src/pages/componentDevelopment/componentEnv/envExtra.tsx

@@ -155,7 +155,7 @@ const EnvExtra = ({ currentEnvData }) => {
         footer={null}
         style={{ top: 20, width: '100%' }}
       >
-        <ConfigTutorial />
+        <ConfigTutorial tutorialType="env" />
       </Modal>
     </>
   );