V4.8.17 feature (#3485)

* feat: add third party account config (#3443)

* temp

* editor workflow variable style

* add team to dispatch

* i18n

* delete console

* change openai account position

* fix

* fix

* fix

* fix

* fix

* 4.8.17 test (#3461)

* perf: external provider config

* perf: ui

* feat: add template config (#3434)

* change template position

* template config

* delete console

* delete

* fix

* fix

* perf: Mongo visutal field (#3464)

* remve invalid code

* perf: team member visutal code

* perf: virtual search; perf: search test data

* fix: ts

* fix: image response headers

* perf: template code

* perf: auth layout；perf: auto save (#3472)

* perf: auth layout

* perf: auto save

* perf: auto save

* fix: template guide display & http input support external variables (#3475)

* fix: template guide display

* http editor support external workflow variables

* perf: auto save;fix: ifelse checker line break; (#3478)

* perf: auto save

* perf: auto save

* fix: ifelse checker line break

* perf: doc

* perf: doc

* fix: update var type error

* 4.8.17 test (#3479)

* perf: auto save

* perf: auto save

* perf: template code

* 4.8.17 test (#3480)

* perf: auto save

* perf: auto save

* perf: model price model

* feat: add react memo

* perf: model provider filter

* fix: ts (#3481)

* perf: auto save

* perf: auto save

* fix: ts

* simple app tool select (#3473)

* workflow plugin userguide & simple tool ui

* simple tool filter

* reuse component

* change component to hook

* fix

* perf: too selector modal (#3484)

* perf: auto save

* perf: auto save

* perf: markdown render

* perf: too selector

* fix: app version require tmbId

* perf: templates refresh

* perf: templates refresh

* hide auto save error tip

* perf: toolkit guide

---------

Co-authored-by: heheer <heheer@sealos.io>

projects/app/src/pages/toolkit/components/PluginCard.tsx

@@ -1,14 +1,13 @@
 import { useSystemStore } from '@/web/common/system/useSystemStore';
-import { Box, Flex, HStack, ModalBody } from '@chakra-ui/react';
+import { Box, Flex, HStack } from '@chakra-ui/react';
 import Avatar from '@fastgpt/web/components/common/Avatar';
 import MyBox from '@fastgpt/web/components/common/MyBox';
-import React, { useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import MyModal from '@fastgpt/web/components/common/MyModal';
-import Markdown from '@/components/Markdown';
 import { NodeTemplateListItemType } from '@fastgpt/global/core/workflow/type/node';
 import { PluginGroupSchemaType } from '@fastgpt/service/core/app/plugin/type';
+import UseGuideModal from '@/components/common/Modal/UseGuideModal';
 
 const PluginCard = ({
   item,
@@ -20,8 +19,6 @@ const PluginCard = ({
   const { t } = useTranslation();
   const { feConfigs } = useSystemStore();
 
-  const [currentPlugin, setCurrentPlugin] = useState<NodeTemplateListItemType | null>(null);
-
   const type = groups.reduce<string | undefined>((acc, group) => {
     const foundType = group.groupTypes.find((type) => type.typeId === item.templateType);
     return foundType ? foundType.typeName : acc;
@@ -82,51 +79,33 @@ const PluginCard = ({
 
       <Flex w={'full'} fontSize={'mini'}>
         <Flex flex={1}>
-          {item.instructions && (
-            <Flex
-              color={'primary.700'}
-              alignItems={'center'}
-              gap={1}
-              cursor={'pointer'}
-              onClick={() => setCurrentPlugin(item)}
-              _hover={{ bg: 'myGray.100' }}
+          {(item.instructions || item.courseUrl) && (
+            <UseGuideModal
+              title={item.name}
+              iconSrc={item.avatar}
+              text={item.instructions}
+              link={item.courseUrl}
             >
-              <MyIcon name={'book'} w={'14px'} />
-              {t('app:plugin.Instructions')}
-            </Flex>
+              {({ onClick }) => (
+                <Flex
+                  color={'primary.700'}
+                  alignItems={'center'}
+                  gap={1}
+                  cursor={'pointer'}
+                  onClick={onClick}
+                  _hover={{ bg: 'myGray.100' }}
+                >
+                  <MyIcon name={'book'} w={'14px'} />
+                  {t('app:plugin.Instructions')}
+                </Flex>
+              )}
+            </UseGuideModal>
           )}
         </Flex>
         <Box color={'myGray.500'}>{`by ${item.author || feConfigs.systemTitle}`}</Box>
       </Flex>
-      {currentPlugin && (
-        <InstructionModal currentPlugin={currentPlugin} onClose={() => setCurrentPlugin(null)} />
-      )}
     </MyBox>
   );
 };
 
-const InstructionModal = ({
-  currentPlugin,
-  onClose
-}: {
-  currentPlugin: NodeTemplateListItemType;
-  onClose: () => void;
-}) => {
-  return (
-    <MyModal
-      isOpen
-      iconSrc={currentPlugin.avatar}
-      title={currentPlugin.name}
-      onClose={onClose}
-      minW={'600px'}
-    >
-      <ModalBody>
-        <Box border={'base'} borderRadius={'10px'} p={4} minH={'500px'}>
-          <Markdown source={currentPlugin.instructions} />
-        </Box>
-      </ModalBody>
-    </MyModal>
-  );
-};
-
 export default React.memo(PluginCard);