feat: support sub route config (#3071)

* feat: support sub route config

* dockerfile

* fix upload

* delete unused code

packages/web/components/common/Avatar/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Box, Flex, Image } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import type { ImageProps } from '@chakra-ui/react';
 import { LOGO_ICON } from '@fastgpt/global/common/system/constants';
 import MyIcon from '../Icon';
 import { iconPaths } from '../Icon/constants';
+import MyImage from '../Image/MyImage';
 
 const Avatar = ({ w = '30px', src, ...props }: ImageProps) => {
   // @ts-ignore
@@ -14,7 +15,7 @@ const Avatar = ({ w = '30px', src, ...props }: ImageProps) => {
       <MyIcon name={src as any} w={w} borderRadius={props.borderRadius} />
     </Box>
   ) : (
-    <Image
+    <MyImage
       fallbackSrc={LOGO_ICON}
       fallbackStrategy={'onError'}
       objectFit={'contain'}

packages/web/components/common/Image/MyImage.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Image, ImageProps } from '@chakra-ui/react';
+import { getWebReqUrl } from '../../../common/system/utils';
+const MyImage = (props: ImageProps) => {
+  return <Image {...props} src={getWebReqUrl(props.src)} alt={props.alt || ''} />;
+};
+export default React.memo(MyImage);

packages/web/components/common/Image/PhotoView.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { PhotoProvider, PhotoView } from 'react-photo-view';
 import 'react-photo-view/dist/react-photo-view.css';
-import { Box, Image, ImageProps } from '@chakra-ui/react';
+import { ImageProps } from '@chakra-ui/react';
 import { useSystem } from '../../../hooks/useSystem';
 import Loading from '../MyLoading';
+import MyImage from './MyImage';
 
 const MyPhotoView = ({ ...props }: ImageProps) => {
   const { isPc } = useSystem();
@@ -15,7 +16,7 @@ const MyPhotoView = ({ ...props }: ImageProps) => {
       loadingElement={<Loading fixed={false} />}
     >
       <PhotoView src={props.src}>
-        <Image cursor={'pointer'} {...props} />
+        <MyImage cursor={'pointer'} {...props} />
       </PhotoView>
     </PhotoProvider>
   );

packages/web/components/common/MyDrawer/CustomRightDrawer.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import MyIcon from '../Icon';
-import { Flex, Image, Box, CloseButton, FlexProps } from '@chakra-ui/react';
+import { Flex, Box, CloseButton, FlexProps } from '@chakra-ui/react';
 import { useLoading } from '../../../hooks/useLoading';
+import Avatar from '../Avatar';
 
 type Props = FlexProps & {
   onClose: () => void;
@@ -50,15 +50,7 @@ const CustomRightDrawer = ({
         py={'10px'}
         px={5}
       >
-        {iconSrc && (
-          <>
-            {iconSrc.startsWith('/') ? (
-              <Image mr={3} objectFit={'contain'} alt="" src={iconSrc} w={'20px'} />
-            ) : (
-              <MyIcon mr={3} name={iconSrc as any} w={'20px'} />
-            )}
-          </>
-        )}
+        {iconSrc && <Avatar mr={3} w={'20px'} src={iconSrc} />}
         <Box flex={'1'} fontSize={'md'}>
           {title}
         </Box>

packages/web/components/common/MyDrawer/MyRightDrawer.tsx

@@ -13,6 +13,7 @@ import {
   Box
 } from '@chakra-ui/react';
 import { useLoading } from '../../../hooks/useLoading';
+import Avatar from '../Avatar';
 
 type Props = DrawerContentProps & {
   onClose: () => void;
@@ -52,15 +53,7 @@ const MyRightDrawer = ({
           py={'10px'}
           px={5}
         >
-          {iconSrc && (
-            <>
-              {iconSrc.startsWith('/') ? (
-                <Image mr={3} objectFit={'contain'} alt="" src={iconSrc} w={'20px'} />
-              ) : (
-                <MyIcon mr={3} name={iconSrc as any} w={'20px'} />
-              )}
-            </>
-          )}
+          {iconSrc && <Avatar mr={3} w={'20px'} src={iconSrc} />}
           <Box flex={'1'} fontSize={'md'}>
             {title}
           </Box>

packages/web/components/common/Textarea/CodeEditor/Editor.tsx

@@ -2,9 +2,10 @@ import React, { useCallback, useRef, useState } from 'react';
 import Editor, { Monaco, loader } from '@monaco-editor/react';
 import { Box, BoxProps } from '@chakra-ui/react';
 import MyIcon from '../../Icon';
+import { getWebReqUrl } from '../../../../common/system/utils';
 
 loader.config({
-  paths: { vs: '/js/monaco-editor.0.45.0/vs' }
+  paths: { vs: getWebReqUrl('/js/monaco-editor.0.45.0/vs') }
 });
 
 type EditorVariablePickerType = {

packages/web/components/common/Textarea/JsonEditor/index.tsx

@@ -4,9 +4,10 @@ import { Box, BoxProps } from '@chakra-ui/react';
 import MyIcon from '../../Icon';
 import { useToast } from '../../../../hooks/useToast';
 import { useTranslation } from 'next-i18next';
+import { getWebReqUrl } from '../../../../common/system/utils';
 
 loader.config({
-  paths: { vs: '/js/monaco-editor.0.45.0/vs' }
+  paths: { vs: getWebReqUrl('/js/monaco-editor.0.45.0/vs') }
 });
 
 type EditorVariablePickerType = {

packages/web/components/common/Textarea/PromptEditor/modules/ComfirmVar/index.tsx

@@ -1,97 +0,0 @@
-import { Box, Button, Image } from '@chakra-ui/react';
-import { useTranslation } from 'next-i18next';
-export default function ComfirmVar({
-  newVariables,
-  onCancel,
-  onConfirm
-}: {
-  newVariables: string[];
-  onCancel: () => void;
-  onConfirm: () => void;
-}) {
-  const { t } = useTranslation();
-  return (
-    <>
-      <Box
-        background={'rgba(35, 56, 118, 0.2)'}
-        rounded={'sm'}
-        position={'absolute'}
-        top={0}
-        left={0}
-        right={0}
-        bottom={0}
-      />
-      <Box
-        position={'absolute'}
-        top={'50%'}
-        left={'50%'}
-        transform={'translate(-50%, -50%)'}
-        w={'70%'}
-        h={'70%'}
-        bg={'white'}
-        rounded={'lg'}
-        boxShadow={'0 2px 4px rgba(0, 0, 0, 0.1)'}
-        display={'flex'}
-        flexDirection={'column'}
-        justifyContent={'space-between'}
-        pb={4}
-      >
-        <Box display={'flex'} mt={4} mr={4}>
-          <Box
-            w={'36px'}
-            h={'36px'}
-            minW={'36px'}
-            boxShadow={'0 4px 8px rgba(0, 0, 0, 0.1)'}
-            display={'flex'}
-            alignItems={'center'}
-            justifyContent={'center'}
-            rounded={'md'}
-            border={'1px solid rgba(0, 0, 0, 0.1)'}
-            mx={4}
-          >
-            <Image alt={''} src={'/imgs/workflow/variable.png'} objectFit={'contain'} w={'20px'} />
-          </Box>
-          <Box>{t('common:undefined_var')}</Box>
-        </Box>
-        <Box
-          ml={16}
-          mt={4}
-          fontSize={'sm'}
-          color={'rgb(28,100,242)'}
-          display={'flex'}
-          whiteSpace={'wrap'}
-        >
-          {newVariables.map((item, index) => (
-            <Box
-              key={index}
-              display={'flex'}
-              alignItems={'center'}
-              justifyContent={'center'}
-              bg={'rgb(237,242,250)'}
-              px={1}
-              h={6}
-              rounded={'md'}
-              mr={2}
-            >
-              <span>
-                <span style={{ opacity: '60%' }}>{`{{`}</span>
-                <span>{item}</span>
-                <span style={{ opacity: '60%' }}>{`}}`}</span>
-              </span>
-            </Box>
-          ))}
-        </Box>
-        <Box>
-          <Box display={'flex'} justifyContent={'flex-end'} mt={4} mr={4}>
-            <Button size={'sm'} variant={'ghost'} onClick={onCancel}>
-              {t('common:common.Cancel')}
-            </Button>
-            <Button size={'sm'} variant={'primary'} ml={4} onClick={onConfirm}>
-              {t('common:common.Confirm')}
-            </Button>
-          </Box>
-        </Box>
-      </Box>
-    </>
-  );
-}