add plugin cost & change plugin avatar

labring · Jul 12, 2024 · ec1da3e · ec1da3e
1 parent e80dcb8
commit ec1da3e
Show file tree

Hide file tree

Showing 7 changed files with 290 additions and 256 deletions.
diff --git a/packages/global/core/workflow/type/node.d.ts b/packages/global/core/workflow/type/node.d.ts
@@ -79,6 +79,7 @@ export type NodeTemplateListItemType = {
   isTool?: boolean;
   author?: string;
   unique?: boolean; // 唯一的
+  currentCost?: number; // 当前积分消耗
 };
 
 export type NodeTemplateListType = {

diff --git a/packages/web/components/common/Icon/constants.ts b/packages/web/components/common/Icon/constants.ts
diff --git a/packages/web/components/common/Icon/icons/plugins/textEditor.svg b/packages/web/components/common/Icon/icons/plugins/textEditor.svg
diff --git a/packages/web/i18n/en/common.json b/packages/web/i18n/en/common.json
@@ -1045,9 +1045,11 @@
     "plugin": {
       "Custom headers": "Custom headers",
       "Delete http plugin": "Confirm to delete this group of HTTP plugins? This will delete all plugins in the directory.",
+      "Free": "The plugin requires no points～",
       "Get Plugin Module Detail Failed": "Plugin loading failed",
       "Http plugin intro placeholder": "For display only, no actual effect",
-      "Intro placeholder": "If this plugin is used as a tool, this introduction will be used as a prompt."
+      "Intro placeholder": "If this plugin is used as a tool, this introduction will be used as a prompt.",
+      "cost": "Plugin cost: "
     },
     "shareChat": {
       "Init Error": "Failed to initialize chat dialog",

diff --git a/packages/web/i18n/zh/common.json b/packages/web/i18n/zh/common.json
@@ -1054,9 +1054,11 @@
     "plugin": {
       "Custom headers": "自定义请求头",
       "Delete http plugin": "确认删除该组 HTTP 插件？会删除该目录下所有插件。",
+      "Free": "该插件无需积分消耗～",
       "Get Plugin Module Detail Failed": "加载插件异常",
       "Http plugin intro placeholder": "仅做展示，无实际效果",
-      "Intro placeholder": "如果该插件作为工具被调用，则会使用该介绍作为提示词。"
+      "Intro placeholder": "如果该插件作为工具被调用，则会使用该介绍作为提示词。",
+      "cost": "积分消耗："
     },
     "shareChat": {
       "Init Error": "初始化对话框失败",

diff --git a/projects/app/src/pages/api/core/app/plugin/getSystemPluginTemplates.ts b/projects/app/src/pages/api/core/app/plugin/getSystemPluginTemplates.ts
@@ -23,7 +23,8 @@ async function handler(
         avatar: plugin.avatar,
         name: plugin.name,
         intro: plugin.intro,
-        isTool: plugin.isTool
+        isTool: plugin.isTool,
+        currentCost: plugin.currentCost
       }))
   );
 }

diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/NodeTemplatesModal.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/NodeTemplatesModal.tsx
@@ -1,5 +1,14 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Box, Flex, IconButton, Input, InputGroup, InputLeftElement, css } from '@chakra-ui/react';
+import {
+  Box,
+  Divider,
+  Flex,
+  IconButton,
+  Input,
+  InputGroup,
+  InputLeftElement,
+  css
+} from '@chakra-ui/react';
 import type {
   NodeTemplateListItemType,
   NodeTemplateListType
@@ -42,6 +51,7 @@ type RenderListProps = {
   onClose: () => void;
   parentId: ParentIdType;
   setParentId: React.Dispatch<React.SetStateAction<ParentIdType>>;
+  showCost?: boolean;
 };
 
 enum TemplateTypeEnum {
@@ -248,6 +258,7 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
             onClose={onClose}
             parentId={parentId}
             setParentId={setParentId}
+            showCost={templateType === TemplateTypeEnum.systemPlugin}
           />
         </MyBox>
       </>
@@ -263,7 +274,8 @@ const RenderList = React.memo(function RenderList({
   templates,
   onClose,
   parentId,
-  setParentId
+  setParentId,
+  showCost
 }: RenderListProps) {
   const { t } = useTranslation();
   const { appT } = useI18n();
@@ -386,19 +398,34 @@ const RenderList = React.memo(function RenderList({
                     label={
                       <Box>
                         <Flex alignItems={'center'}>
-                          <Avatar
-                            src={template.avatar}
-                            w={'24px'}
-                            objectFit={'contain'}
-                            borderRadius={'0'}
-                          />
+                          {template.avatar?.startsWith('/') ? (
+                            <Avatar
+                              src={template.avatar}
+                              w={'24px'}
+                              objectFit={'contain'}
+                              borderRadius={'0'}
+                            />
+                          ) : (
+                            <MyIcon name={template.avatar as any} w={'24px'} />
+                          )}
                           <Box fontWeight={'bold'} ml={3}>
                             {t(template.name)}
                           </Box>
                         </Flex>
                         <Box mt={2} color={'myGray.500'}>
                           {t(template.intro) || t('core.workflow.Not intro')}
                         </Box>
+                        {showCost && (
+                          <>
+                            <Divider mt={4} mb={2} />
+                            <Flex>
+                              <Box>{t('core.plugin.cost')}</Box>
+                              <Box color={'myGray.600'}>
+                                {template.currentCost || t('core.plugin.Free')}
+                              </Box>
+                            </Flex>
+                          </>
+                        )}
                       </Box>
                     }
                   >
@@ -433,12 +460,16 @@ const RenderList = React.memo(function RenderList({
                         onClose();
                       }}
                     >
-                      <Avatar
-                        src={template.avatar}
-                        w={'1.7rem'}
-                        objectFit={'contain'}
-                        borderRadius={'0'}
-                      />
+                      {template.avatar?.startsWith('/') ? (
+                        <Avatar
+                          src={template.avatar}
+                          w={'1.7rem'}
+                          objectFit={'contain'}
+                          borderRadius={'0'}
+                        />
+                      ) : (
+                        <MyIcon name={template.avatar as any} w={'1.7rem'} />
+                      )}
                       <Box color={'black'} fontSize={'sm'} ml={5} flex={'1 0 0'}>
                         {t(template.name)}
                       </Box>