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

src/pages/componentDevelopment/componentDeployment/index.tsx

@@ -1,67 +1,82 @@
 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
-          value={selectedStatus}
-          onChange={(value) => setSelectedStatus(value)}
-          name="button-radio-group"
-        >
-          {statusOptions.map((item) => {
-            return (
-              <Radio key={item.label} value={item.value}>
-                {({ checked }) => {
-                  return (
-                    <Button tabIndex={-1} key={item.label} shape="round" type={checked ? 'primary' : 'default'}>
-                      {item.label}
-                    </Button>
-                  );
-                }}
-              </Radio>
-            );
-          })}
-        </Radio.Group>
-
-        <Space>
-          <Input
-            prefix={<IconSearch />}
-            placeholder={'搜索'}
-            style={{ width: 236 }}
-            value={searchKeyword}
-            onChange={(value) => setSearchKeyword(value)}
-            onPressEnter={() => {
-              // 触发搜索
-            }}
-          />
-          <Button
-            type="primary"
-            style={{ marginLeft: 5, borderRadius: 4 }}
+    <>
+      <div className={styles['component-deployment']}>
+        <div className={styles['header']}>
+          <Radio.Group
+            value={selectedStatus}
+            onChange={(value) => setSelectedStatus(value)}
+            name="button-radio-group"
           >
-            实例指引
-          </Button>
-        </Space>
-      </div>
-      <div className={styles['content']}>
-        <CollapseList searchKeyword={searchKeyword} runStatus={selectedStatus} />
+            {statusOptions.map((item) => {
+              return (
+                <Radio key={item.label} value={item.value}>
+                  {({ checked }) => {
+                    return (
+                      <Button tabIndex={-1} key={item.label} shape="round" type={checked ? 'primary' : 'default'}>
+                        {item.label}
+                      </Button>
+                    );
+                  }}
+                </Radio>
+              );
+            })}
+          </Radio.Group>
+
+          <Space>
+            <Input
+              prefix={<IconSearch />}
+              placeholder={'搜索'}
+              style={{ width: 236 }}
+              value={searchKeyword}
+              onChange={(value) => setSearchKeyword(value)}
+              onPressEnter={() => {
+                // 触发搜索
+              }}
+            />
+            <Button
+              type="primary"
+              style={{ marginLeft: 5, borderRadius: 4 }}
+              onClick={() => setTutorialVisible(true)}
+            >
+              实例指引
+            </Button>
+          </Space>
+        </div>
+        <div className={styles['content']}>
+          <CollapseList searchKeyword={searchKeyword} runStatus={selectedStatus} />
+        </div>
       </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>
     </>
   );