V4.6.6-1 (#656)

2023-12-27 11:07:39 +08:00
parent 86286efb54
commit 759a2330e6
182 changed files with 3099 additions and 81685 deletions
--- a/projects/app/src/components/Badge/index.tsx
+++ b/projects/app/src/components/Badge/index.tsx
@@ -18,11 +18,11 @@ const Badge = ({
      {count > 0 && (
        <Box position={'absolute'} right={0} top={0} transform={'translate(70%,-50%)'}>
          {isDot ? (
-            <Box w={'5px'} h={'5px'} bg={'myRead.600'} borderRadius={'20px'}></Box>
+            <Box w={'5px'} h={'5px'} bg={'red.600'} borderRadius={'20px'}></Box>
          ) : (
            <Box
              color={'white'}
-              bg={'myRead.600'}
+              bg={'red.600'}
              lineHeight={0.9}
              borderRadius={'100px'}
              px={'4px'}
--- a/projects/app/src/components/ChatBox/FeedbackModal.tsx
+++ b/projects/app/src/components/ChatBox/FeedbackModal.tsx
@@ -49,7 +49,7 @@ const FeedbackModal = ({
        <Textarea ref={ref} rows={10} placeholder={t('chat.Feedback Modal Tip')} />
      </ModalBody>
      <ModalFooter>
-        <Button variant={'base'} mr={2} onClick={onClose}>
+        <Button variant={'whiteBase'} mr={2} onClick={onClose}>
          {t('Cancel')}
        </Button>
        <Button isLoading={isLoading} onClick={mutate}>
--- a/projects/app/src/components/ChatBox/MessageInput.tsx
+++ b/projects/app/src/components/ChatBox/MessageInput.tsx
@@ -216,7 +216,7 @@ ${images.map((img) => JSON.stringify({ src: img.src })).join('\n')}
          pl={5}
          alignItems={'center'}
          bg={'white'}
-          color={'blue.500'}
+          color={'primary.500'}
          visibility={isSpeaking && isTransCription ? 'visible' : 'hidden'}
        >
          <Spinner size={'sm'} mr={4} />
@@ -244,7 +244,7 @@ ${images.map((img) => JSON.stringify({ src: img.src })).join('\n')}
                  alignItems={'center'}
                  justifyContent={'center'}
                  rounded={'md'}
-                  color={'blue.500'}
+                  color={'primary.500'}
                  top={0}
                  left={0}
                  bottom={0}
@@ -260,7 +260,7 @@ ${images.map((img) => JSON.stringify({ src: img.src })).join('\n')}
                h={'16px'}
                color={'myGray.700'}
                cursor={'pointer'}
-                _hover={{ color: 'blue.500' }}
+                _hover={{ color: 'primary.500' }}
                position={'absolute'}
                bg={'white'}
                right={'-8px'}
@@ -396,7 +396,7 @@ ${images.map((img) => JSON.stringify({ src: img.src })).join('\n')}
                      name={isSpeaking ? 'core/chat/stopSpeechFill' : 'core/chat/recordFill'}
                      width={['20px', '22px']}
                      height={['20px', '22px']}
-                      color={'blue.500'}
+                      color={'primary.500'}
                    />
                  </MyTooltip>
                </Flex>
@@ -415,7 +415,7 @@ ${images.map((img) => JSON.stringify({ src: img.src })).join('\n')}
                h={['28px', '32px']}
                w={['28px', '32px']}
                borderRadius={'md'}
-                bg={isSpeaking || isChatting ? '' : !havInput ? '#E5E5E5' : 'blue.500'}
+                bg={isSpeaking || isChatting ? '' : !havInput ? '#E5E5E5' : 'primary.500'}
                cursor={havInput ? 'pointer' : 'not-allowed'}
                lineHeight={1}
                onClick={() => {
--- a/projects/app/src/components/ChatBox/QuoteModal.tsx
+++ b/projects/app/src/components/ChatBox/QuoteModal.tsx
@@ -125,7 +125,7 @@ export const QuoteList = React.memo(function QuoteList({
                className="hover-data"
                display={'none'}
                alignItems={'center'}
-                color={'blue.500'}
+                color={'primary.500'}
                href={`/dataset/detail?datasetId=${item.datasetId}&currentTab=dataCard&collectionId=${item.collectionId}`}
              >
                {t('core.dataset.Go Dataset')}
@@ -184,7 +184,7 @@ export const QuoteList = React.memo(function QuoteList({
                      cursor={'pointer'}
                      color={'myGray.600'}
                      _hover={{
-                        color: 'blue.600'
+                        color: 'primary.600'
                      }}
                      onClick={() => onclickEdit(item)}
                    />
--- a/projects/app/src/components/ChatBox/ResponseTags.tsx
+++ b/projects/app/src/components/ChatBox/ResponseTags.tsx
@@ -147,7 +147,7 @@ const ResponseTags = ({
                        name="common/routePushLight"
                        w={'14px'}
                        cursor={'pointer'}
-                        _hover={{ color: 'blue.500' }}
+                        _hover={{ color: 'primary.500' }}
                        onClick={async (e) => {
                          e.stopPropagation();

--- a/projects/app/src/components/ChatBox/SelectMarkCollection.tsx
+++ b/projects/app/src/components/ChatBox/SelectMarkCollection.tsx
@@ -70,7 +70,7 @@ const SelectMarkCollection = ({
                      }}
                      {...(selected
                        ? {
-                            bg: 'blue.200'
+                            bg: 'primary.200'
                          }
                        : {})}
                      onClick={() => {
@@ -132,7 +132,7 @@ const SelectMarkCollection = ({
          CustomFooter={
            <ModalFooter>
              <Button
-                variant={'base'}
+                variant={'whiteBase'}
                mr={2}
                onClick={() => {
                  setAdminMarkData({
--- a/projects/app/src/components/ChatBox/index.tsx
+++ b/projects/app/src/components/ChatBox/index.tsx
@@ -505,7 +505,7 @@ const ChatBox = (
    const colorMap = {
      loading: 'myGray.700',
      running: '#67c13b',
-      finish: 'blue.500'
+      finish: 'primary.500'
    };
    if (!isChatting) return;
    const chatContent = chatHistory[chatHistory.length - 1];
@@ -673,7 +673,7 @@ const ChatBox = (
                      <Card
                        className="markdown"
                        {...MessageCardStyle}
-                        bg={'blue.200'}
+                        bg={'primary.200'}
                        borderRadius={'8px 0 8px 8px'}
                        textAlign={'left'}
                      >
@@ -1145,7 +1145,7 @@ function ChatAvatar({ src, type }: { src?: string; type: 'Human' | 'AI' }) {
      borderRadius={'lg'}
      border={theme.borders.base}
      boxShadow={'0 0 5px rgba(0,0,0,0.1)'}
-      bg={type === 'Human' ? 'white' : 'blue.50'}
+      bg={type === 'Human' ? 'white' : 'primary.50'}
    >
      <Avatar src={src} w={'100%'} h={'100%'} />
    </Box>
@@ -1226,7 +1226,7 @@ function ChatController({
        <MyIcon
          {...controlIconStyle}
          name={'copy'}
-          _hover={{ color: 'blue.600' }}
+          _hover={{ color: 'primary.600' }}
          onClick={() => copyData(chat.value)}
        />
      </MyTooltip>
--- a/projects/app/src/components/CommunityModal/index.tsx
+++ b/projects/app/src/components/CommunityModal/index.tsx
@@ -19,7 +19,7 @@ const CommunityModal = ({ onClose }: { onClose: () => void }) => {
      </ModalBody>

      <ModalFooter>
-        <Button variant={'base'} onClick={onClose}>
+        <Button variant={'whiteBase'} onClick={onClose}>
          关闭
        </Button>
      </ModalFooter>
--- a/projects/app/src/components/Layout/index.tsx
+++ b/projects/app/src/components/Layout/index.tsx
@@ -74,14 +74,14 @@ const Layout = ({ children }: { children: JSX.Element }) => {

  return (
    <>
-      <Box h={'100%'} bg={'myWhite.600'}>
+      <Box h={'100%'} bg={'myGray.100'}>
        {isPc === true && (
          <>
            {pcUnShowLayoutRoute[router.pathname] ? (
              <Auth>{children}</Auth>
            ) : (
              <>
-                <Box h={'100%'} position={'fixed'} left={0} top={0} w={'70px'}>
+                <Box h={'100%'} position={'fixed'} left={0} top={0} w={'64px'}>
                  <Navbar unread={unread} />
                </Box>
                <Box h={'100%'} ml={'70px'} overflow={'overlay'}>
--- a/projects/app/src/components/Layout/navbar.tsx
+++ b/projects/app/src/components/Layout/navbar.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Box, Flex, Link } from '@chakra-ui/react';
+import { Box, BoxProps, Flex, Link, LinkProps } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useChatStore } from '@/web/core/chat/storeChat';
@@ -77,19 +77,16 @@ const Navbar = ({ unread }: { unread: number }) => {
    [lastChatAppId, lastChatId, t]
  );

-  const itemStyles: any = {
+  const itemStyles: BoxProps & LinkProps = {
    my: 3,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    cursor: 'pointer',
-    w: '54px',
-    h: '54px',
-    borderRadius: 'md',
-    _hover: {
-      bg: 'myWhite.600'
-    }
+    w: '48px',
+    h: '58px',
+    borderRadius: 'md'
  };

  return (
@@ -97,10 +94,8 @@ const Navbar = ({ unread }: { unread: number }) => {
      flexDirection={'column'}
      alignItems={'center'}
      pt={6}
-      bg={'white'}
      h={'100%'}
      w={'100%'}
-      boxShadow={'2px 0px 8px 0px rgba(0,0,0,0.1)'}
      userSelect={'none'}
    >
      {/* logo */}
@@ -113,13 +108,7 @@ const Navbar = ({ unread }: { unread: number }) => {
        cursor={'pointer'}
        onClick={() => router.push('/account')}
      >
-        <Avatar
-          w={'36px'}
-          h={'36px'}
-          borderRadius={'50%'}
-          src={userInfo?.avatar}
-          fallbackSrc={HUMAN_ICON}
-        />
+        <Avatar w={'36px'} h={'36px'} src={userInfo?.avatar} fallbackSrc={HUMAN_ICON} />
      </Box>
      {/* 导航列表 */}
      <Box flex={1}>
@@ -129,13 +118,17 @@ const Navbar = ({ unread }: { unread: number }) => {
            {...itemStyles}
            {...(item.activeLink.includes(router.pathname)
              ? {
-                  color: 'blue.600',
-                  bg: 'white !important',
-                  boxShadow: '1px 1px 10px rgba(0,0,0,0.2)'
+                  color: 'primary.600',
+                  bg: 'white',
+                  boxShadow:
+                    '0px 0px 1px 0px rgba(19, 51, 107, 0.08), 0px 4px 4px 0px rgba(19, 51, 107, 0.05)'
                }
              : {
                  color: 'myGray.500',
-                  backgroundColor: 'transparent'
+                  bg: 'transparent',
+                  _hover: {
+                    bg: 'rgba(255,255,255,0.9)'
+                  }
                })}
            {...(item.link !== router.asPath
              ? {
--- a/projects/app/src/components/Loading/index.tsx
+++ b/projects/app/src/components/Loading/index.tsx
@@ -25,9 +25,15 @@ const Loading = ({
      justifyContent={'center'}
      flexDirection={'column'}
    >
-      <Spinner thickness="4px" speed="0.65s" emptyColor="myGray.100" color="blue.500" size="xl" />
+      <Spinner
+        thickness="4px"
+        speed="0.65s"
+        emptyColor="myGray.100"
+        color="primary.500"
+        size="xl"
+      />
      {text && (
-        <Box mt={2} color="blue.600" fontWeight={'bold'}>
+        <Box mt={2} color="primary.600" fontWeight={'bold'}>
          {text}
        </Box>
      )}
--- a/projects/app/src/components/Markdown/chat/Guide.tsx
+++ b/projects/app/src/components/Markdown/chat/Guide.tsx
@@ -23,7 +23,7 @@ function MyLink(e: any) {
    <Box as={'li'} mb={1}>
      <Box
        as={'span'}
-        color={'blue.700'}
+        color={'primary.700'}
        textDecoration={'underline'}
        cursor={'pointer'}
        onClick={() => {
--- a/projects/app/src/components/Markdown/chat/QuestionGuide.tsx
+++ b/projects/app/src/components/Markdown/chat/QuestionGuide.tsx
@@ -77,7 +77,7 @@ const QuestionGuide = ({ text }: { text: string }) => {
                  name={'core/chat/sendLight'}
                  w={'14px'}
                  cursor={'pointer'}
-                  _hover={{ color: 'blue.500' }}
+                  _hover={{ color: 'primary.500' }}
                  onClick={() => eventBus.emit(EventNameEnum.sendQuestion, { text })}
                />
              </MyTooltip>
--- a/projects/app/src/components/Markdown/img/MermaidCodeBlock.tsx
+++ b/projects/app/src/components/Markdown/img/MermaidCodeBlock.tsx
@@ -123,7 +123,7 @@ const MermaidBlock = ({ code }: { code: string }) => {
        position={'absolute'}
        color={'myGray.600'}
        _hover={{
-          color: 'blue.600'
+          color: 'primary.600'
        }}
        right={0}
        top={0}
--- a/projects/app/src/components/Markdown/index.module.scss
+++ b/projects/app/src/components/Markdown/index.module.scss
@@ -4,7 +4,7 @@
  width: 3px;
  height: 14px;
  transform: translate(4px, 2px) scaleY(1.3);
-  background-color: var(--chakra-colors-blue-700);
+  background-color: var(--chakra-colors-primary-700);
  animation: blink 0.6s infinite;
 }

@@ -17,7 +17,7 @@
    width: 3px;
    height: 14px;
    transform: translate(4px, 2px) scaleY(1.3);
-    background-color: var(--chakra-colors-blue-700);
+    background-color: var(--chakra-colors-primary-700);
    animation: blink 0.6s infinite;
  }
 }
@@ -129,7 +129,7 @@
 .markdown dl,
 .markdown table,
 .markdown pre {
-  margin: 10px 0;
+  margin: 14px 0;
 }
 .markdown > h2:first-child,
 .markdown > h1:first-child,
@@ -368,7 +368,7 @@

  a {
    text-decoration: underline;
-    color: var(--chakra-colors-blue-600);
+    color: var(--chakra-colors-primary-700);
  }

  table {
--- a/projects/app/src/components/Markdown/index.tsx
+++ b/projects/app/src/components/Markdown/index.tsx
@@ -1,11 +1,11 @@
 import React, { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
-import RemarkGfm from 'remark-gfm';
-import RemarkMath from 'remark-math';
-import RehypeKatex from 'rehype-katex';
-import RemarkBreaks from 'remark-breaks';
-
 import 'katex/dist/katex.min.css';
+import RemarkMath from 'remark-math';
+import RemarkBreaks from 'remark-breaks';
+import RehypeKatex from 'rehype-katex';
+import RemarkGfm from 'remark-gfm';
+
 import styles from './index.module.scss';
 import dynamic from 'next/dynamic';

@@ -74,7 +74,7 @@ function A({ children, ...props }: any) {
    return (
      <MyTooltip label={t('core.chat.markdown.Quick Question')}>
        <Button
-          variant={'base'}
+          variant={'whitePrimary'}
          size={'xs'}
          borderRadius={'md'}
          my={1}
@@ -96,10 +96,10 @@ function A({ children, ...props }: any) {
            name={'core/chat/quoteSign'}
            transform={'translateY(-2px)'}
            w={'18px'}
-            color={'blue.500'}
+            color={'primary.500'}
            cursor={'pointer'}
            _hover={{
-              color: 'blue.700'
+              color: 'primary.700'
            }}
            onClick={() => getFileAndOpen(props.href)}
          />
@@ -112,17 +112,6 @@ function A({ children, ...props }: any) {
 }

 const Markdown = ({ source, isChatting = false }: { source: string; isChatting?: boolean }) => {
-  const components = useMemo(
-    () => ({
-      img: Image,
-      pre: 'div',
-      p: 'div',
-      code: Code,
-      a: A
-    }),
-    []
-  );
-
  const formatSource = source
    .replace(/\\n/g, '\n&nbsp;')
    .replace(/(http[s]?:\/\/[^\s，。]+)([。，])/g, '$1 $2')
@@ -133,10 +122,15 @@ const Markdown = ({ source, isChatting = false }: { source: string; isChatting?:
      className={`markdown ${styles.markdown}
      ${isChatting ? `${formatSource ? styles.waitingAnimation : styles.animation}` : ''}
    `}
-      remarkPlugins={[RemarkGfm, RemarkMath, RemarkBreaks]}
+      remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
      rehypePlugins={[RehypeKatex]}
-      // @ts-ignore
-      components={components}
+      components={{
+        img: Image,
+        pre: 'div',
+        p: (pProps) => <p {...pProps} dir="auto" />,
+        code: Code,
+        a: A
+      }}
      linkTarget={'_blank'}
    >
      {formatSource}
--- a/projects/app/src/components/MyMenu/index.tsx
+++ b/projects/app/src/components/MyMenu/index.tsx
@@ -41,7 +41,7 @@ const MyMenu = ({ width, offset = [0, 10], Button, menuList }: Props) => {
              e.stopPropagation();
              item.onClick && item.onClick();
            }}
-            color={item.isActive ? 'blue.500' : ''}
+            color={item.isActive ? 'primary.500' : ''}
            whiteSpace={'pre-wrap'}
          >
            {item.child}
--- a/projects/app/src/components/MyModal/index.tsx
+++ b/projects/app/src/components/MyModal/index.tsx
@@ -70,7 +70,9 @@ const MyModal = ({
            )}
            {title}
            <Box flex={1} />
-            {onClose && <ModalCloseButton position={'relative'} top={0} right={0} />}
+            {onClose && (
+              <ModalCloseButton position={'relative'} fontSize={'sm'} top={0} right={0} />
+            )}
          </ModalHeader>
        )}

--- a/projects/app/src/components/PageContainer/index.tsx
+++ b/projects/app/src/components/PageContainer/index.tsx
@@ -1,20 +1,29 @@
 import React from 'react';
-import { Box, useTheme, type BoxProps } from '@chakra-ui/react';
+import { useTheme, type BoxProps } from '@chakra-ui/react';
 import MyBox from '../common/MyBox';

-const PageContainer = ({ children, ...props }: BoxProps & { isLoading?: boolean }) => {
+const PageContainer = ({
+  children,
+  isLoading,
+  insertProps = {},
+  ...props
+}: BoxProps & { isLoading?: boolean; insertProps?: BoxProps }) => {
  const theme = useTheme();
  return (
-    <MyBox bg={'myGray.100'} h={'100%'} p={[0, 5]} px={[0, 6]} {...props}>
-      <Box
+    <MyBox h={'100%'} py={[0, '16px']} pr={[0, '16px']} {...props}>
+      <MyBox
+        isLoading={isLoading}
        h={'100%'}
-        bg={'white'}
-        borderRadius={props?.borderRadius || [0, '2xl']}
-        border={['none', theme.borders.lg]}
+        borderColor={'borderColor.base'}
+        borderWidth={[0, 1]}
+        boxShadow={'1.5'}
        overflow={'overlay'}
+        bg={'myGray.25'}
+        borderRadius={[0, '16px']}
+        {...insertProps}
      >
        {children}
-      </Box>
+      </MyBox>
    </MyBox>
  );
 };
--- a/projects/app/src/components/PromptTemplate/index.tsx
+++ b/projects/app/src/components/PromptTemplate/index.tsx
@@ -32,7 +32,7 @@ const PromptTemplate = ({
              cursor={'pointer'}
              {...(item.title === selectTemplateTitle?.title
                ? {
-                    bg: 'blue.50'
+                    bg: 'primary.50'
                  }
                : {})}
              onClick={() => setSelectTemplateTitle(item)}
--- a/projects/app/src/components/Select/index.tsx
+++ b/projects/app/src/components/Select/index.tsx
@@ -54,7 +54,7 @@ const MySelect = (
        width={width}
        px={3}
        rightIcon={<ChevronDownIcon />}
-        variant={'base'}
+        variant={'whitePrimary'}
        textAlign={'left'}
        _active={{
          transform: 'none'
@@ -62,7 +62,7 @@ const MySelect = (
        {...(isOpen
          ? {
              boxShadow: '0px 0px 4px #A8DBFF',
-              borderColor: 'blue.500'
+              borderColor: 'primary.500'
            }
          : {})}
        {...props}
@@ -93,7 +93,7 @@ const MySelect = (
            {...menuItemStyles}
            {...(value === item.value
              ? {
-                  color: 'blue.500',
+                  color: 'primary.500',
                  bg: 'myWhite.300'
                }
              : {})}
--- a/projects/app/src/components/SideTabs/index.tsx
+++ b/projects/app/src/components/SideTabs/index.tsx
@@ -44,9 +44,9 @@ const SideTabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) =>
          alignItems={'center'}
          {...(activeId === item.id
            ? {
-                bg: ' blue.100 !important',
+                bg: ' primary.100 !important',
                fontWeight: 'bold',
-                color: 'blue.600 ',
+                color: 'primary.600 ',
                cursor: 'default'
              }
            : {
--- a/projects/app/src/components/Slider/index.tsx
+++ b/projects/app/src/components/Slider/index.tsx
@@ -69,18 +69,18 @@ const MySlider = ({
      <SliderMark
        value={value}
        textAlign="center"
-        bg="blue.500"
+        bg="primary.500"
        color="white"
        px={1}
        minW={'18px'}
        w={'auto'}
        h={'18px'}
+        lineHeight={'18px'}
        borderRadius={'18px'}
-        fontSize={'xs'}
        transform={'translate(-50%, -155%)'}
-        boxSizing={'border-box'}
+        fontSize={'11px'}
      >
-        {value}
+        <Box transform={'scale(0.9)'}>{value}</Box>
      </SliderMark>
      <SliderTrack
        bg={'#EAEDF3'}
@@ -95,9 +95,9 @@ const MySlider = ({
          right: '-3px'
        }}
      >
-        <SliderFilledTrack bg={'blue.500'} />
+        <SliderFilledTrack bg={'primary.500'} />
      </SliderTrack>
-      <SliderThumb border={'3px solid'} borderColor={'blue.500'}></SliderThumb>
+      <SliderThumb border={'3px solid'} borderColor={'primary.500'}></SliderThumb>
    </Slider>
  );
 };
--- a/projects/app/src/components/Tabs/index.tsx
+++ b/projects/app/src/components/Tabs/index.tsx
@@ -55,10 +55,10 @@ const Tabs = ({ list, size = 'md', activeId, onChange, ...props }: Props) => {
          whiteSpace={'nowrap'}
          {...(activeId === item.id
            ? {
-                color: 'blue.600',
+                color: 'primary.600',
                cursor: 'default',
                fontWeight: 'bold',
-                borderBottomColor: 'blue.600'
+                borderBottomColor: 'primary.600'
              }
            : {
                cursor: 'pointer'
--- a/projects/app/src/components/Tag/index.tsx
+++ b/projects/app/src/components/Tag/index.tsx
@@ -10,9 +10,9 @@ const Tag = ({ children, colorSchema = 'blue', ...props }: Props) => {
  const theme = useMemo(() => {
    const map = {
      blue: {
-        borderColor: 'blue.500',
+        borderColor: 'primary.500',
        bg: '#F2FBFF',
-        color: 'blue.600'
+        color: 'primary.600'
      },
      green: {
        borderColor: '#67c13b',
--- a/projects/app/src/components/common/MyRadio/index.tsx
+++ b/projects/app/src/components/common/MyRadio/index.tsx
@@ -43,13 +43,13 @@ const MyRadio = ({
          position={'relative'}
          {...(value === item.value
            ? {
-                borderColor: 'blue.400',
-                bg: 'blue.50'
+                borderColor: 'primary.400',
+                bg: 'primary.50'
              }
            : {
                bg: 'myWhite.300',
                _hover: {
-                  borderColor: 'blue.400'
+                  borderColor: 'primary.400'
                }
              })}
          _after={{
@@ -66,7 +66,7 @@ const MyRadio = ({
            ...(value === item.value
              ? {
                  border: '5px solid',
-                  borderColor: 'blue.600'
+                  borderColor: 'primary.600'
                }
              : {
                  border: '2px solid',
--- a/projects/app/src/components/common/Textarea/TagTextarea.tsx
+++ b/projects/app/src/components/common/Textarea/TagTextarea.tsx
@@ -52,7 +52,7 @@ const TagTextarea = ({ defaultValues, onUpdate, ...props }: Props) => {
      bg={'myWhite.600'}
      {...(focus && {
        boxShadow: '0px 0px 4px #A8DBFF',
-        borderColor: 'blue.500'
+        borderColor: 'primary.500'
      })}
      {...props}
      onClick={() => {
@@ -64,7 +64,7 @@ const TagTextarea = ({ defaultValues, onUpdate, ...props }: Props) => {
    >
      <Flex alignItems={'center'} gap={2} flexWrap={'wrap'}>
        {tags.map((tag, i) => (
-          <Tag key={tag} colorScheme="blue" onClick={(e) => e.stopPropagation()}>
+          <Tag key={tag} colorScheme="primary" onClick={(e) => e.stopPropagation()}>
            <TagLabel>{tag}</TagLabel>
            <TagCloseButton
              onClick={() => {
--- a/projects/app/src/components/core/module/AIChatSettingsModal.tsx
+++ b/projects/app/src/components/core/module/AIChatSettingsModal.tsx
@@ -66,7 +66,7 @@ const AIChatSettingsModal = ({
    fontSize: ['sm', 'md']
  };
  const selectTemplateBtn: BoxProps = {
-    color: 'blue.500',
+    color: 'primary.500',
    cursor: 'pointer'
  };

@@ -229,7 +229,7 @@ const AIChatSettingsModal = ({
        )}
      </ModalBody>
      <ModalFooter>
-        <Button variant={'base'} onClick={onClose}>
+        <Button variant={'whiteBase'} onClick={onClose}>
          {t('Cancel')}
        </Button>
        <Button ml={4} onClick={handleSubmit(onSuccess)}>
--- a/projects/app/src/components/core/module/DatasetParamsModal.tsx
+++ b/projects/app/src/components/core/module/DatasetParamsModal.tsx
@@ -141,7 +141,7 @@ const DatasetParamsModal = ({
        )}
      </ModalBody>
      <ModalFooter>
-        <Button variant={'base'} mr={3} onClick={onClose}>
+        <Button variant={'whiteBase'} mr={3} onClick={onClose}>
          {t('common.Close')}
        </Button>
        <Button
--- a/projects/app/src/components/core/module/DatasetSelectModal.tsx
+++ b/projects/app/src/components/core/module/DatasetSelectModal.tsx
@@ -82,7 +82,7 @@ export const DatasetSelectModal = ({
                    p={3}
                    border={theme.borders.base}
                    boxShadow={'sm'}
-                    bg={'blue.200'}
+                    bg={'primary.200'}
                  >
                    <Flex alignItems={'center'} h={'38px'}>
                      <Avatar src={item.avatar} w={['24px', '28px']}></Avatar>
--- a/projects/app/src/components/core/module/Flow/ChatTest.tsx
+++ b/projects/app/src/components/core/module/Flow/ChatTest.tsx
@@ -104,9 +104,9 @@ const ChatTest = (
          <MyTooltip label={'重置'}>
            <IconButton
              className="chat"
-              size={'sm'}
+              size={'smSquare'}
              icon={<MyIcon name={'clear'} w={'14px'} />}
-              variant={'base'}
+              variant={'whiteDanger'}
              borderRadius={'md'}
              aria-label={'delete'}
              onClick={(e) => {
--- a/projects/app/src/components/core/module/Flow/FlowProvider.tsx
+++ b/projects/app/src/components/core/module/Flow/FlowProvider.tsx
@@ -48,7 +48,7 @@ export type useFlowProviderStoreType = {
  onDelNode: (nodeId: string) => void;
  onChangeNode: (e: FlowNodeChangeProps) => void;
  onCopyNode: (nodeId: string) => void;
-  onResetNode: (id: string, module: FlowModuleTemplateType) => void;
+  onResetNode: (e: { id: string; module: FlowModuleTemplateType }) => void;
  onDelEdge: (e: {
    moduleId: string;
    sourceHandle?: string | undefined;
@@ -58,6 +58,13 @@ export type useFlowProviderStoreType = {
  onConnect: ({ connect }: { connect: Connection }) => any;
  initData: (modules: ModuleItemType[]) => void;
 };
+type requestEventType =
+  | 'onChangeNode'
+  | 'onCopyNode'
+  | 'onResetNode'
+  | 'onDelNode'
+  | 'onDelConnect'
+  | 'setNodes';

 const StateContext = createContext<useFlowProviderStoreType>({
  reactFlowWrapper: null,
@@ -107,7 +114,7 @@ const StateContext = createContext<useFlowProviderStoreType>({
  initData: function (modules: ModuleItemType[]): void {
    throw new Error('Function not implemented.');
  },
-  onResetNode: function (id: string, module: FlowModuleTemplateType): void {
+  onResetNode: function (e): void {
    throw new Error('Function not implemented.');
  }
 });
@@ -350,7 +357,7 @@ export const FlowProvider = ({

  // reset a node data. delete edge and replace it
  const onResetNode = useCallback(
-    (id: string, module: FlowModuleTemplateType) => {
+    ({ id, module }: { id: string; module: FlowModuleTemplateType }) => {
      setNodes((state) =>
        state.map((node) => {
          if (node.id === id) {
@@ -379,8 +386,7 @@ export const FlowProvider = ({
  const initData = useCallback(
    (modules: ModuleItemType[]) => {
      const edges = appModule2FlowEdge({
-        modules,
-        onDelete: onDelConnect
+        modules
      });
      setEdges(edges);

@@ -388,19 +394,54 @@ export const FlowProvider = ({

      onFixView();
    },
-    [onDelConnect, setEdges, setNodes, onFixView]
+    [setEdges, setNodes, onFixView]
  );

  // use eventbus to avoid refresh ReactComponents
  useEffect(() => {
-    const update = (e: FlowNodeChangeProps) => {
-      onChangeNode(e);
-    };
-    eventBus.on(EventNameEnum.updaterNode, update);
+    eventBus.on(
+      EventNameEnum.requestFlowEvent,
+      ({ type, data }: { type: requestEventType; data: any }) => {
+        switch (type) {
+          case 'onChangeNode':
+            onChangeNode(data);
+            return;
+          case 'onCopyNode':
+            onCopyNode(data);
+            return;
+          case 'onResetNode':
+            onResetNode(data);
+            return;
+          case 'onDelNode':
+            onDelNode(data);
+            return;
+          case 'onDelConnect':
+            onDelConnect(data);
+            return;
+          case 'setNodes':
+            setNodes(data);
+            return;
+        }
+      }
+    );
    return () => {
-      eventBus.off(EventNameEnum.updaterNode);
+      eventBus.off(EventNameEnum.requestFlowEvent);
    };
-  }, [onChangeNode]);
+  }, []);
+  useEffect(() => {
+    eventBus.on(EventNameEnum.requestFlowStore, () => {
+      eventBus.emit('receiveFlowStore', {
+        nodes,
+        edges,
+        mode,
+        filterAppIds,
+        reactFlowWrapper
+      });
+    });
+    return () => {
+      eventBus.off(EventNameEnum.requestFlowStore);
+    };
+  }, [edges, filterAppIds, mode, nodes]);

  const value = {
    reactFlowWrapper,
@@ -429,5 +470,53 @@ export const FlowProvider = ({
 export default React.memo(FlowProvider);

 export const onChangeNode = (e: FlowNodeChangeProps) => {
-  eventBus.emit(EventNameEnum.updaterNode, e);
+  eventBus.emit(EventNameEnum.requestFlowEvent, {
+    type: 'onChangeNode',
+    data: e
+  });
 };
+export const onCopyNode = (nodeId: string) => {
+  eventBus.emit(EventNameEnum.requestFlowEvent, {
+    type: 'onCopyNode',
+    data: nodeId
+  });
+};
+export const onResetNode = (e: Parameters<useFlowProviderStoreType['onResetNode']>[0]) => {
+  eventBus.emit(EventNameEnum.requestFlowEvent, {
+    type: 'onResetNode',
+    data: e
+  });
+};
+export const onDelNode = (nodeId: string) => {
+  eventBus.emit(EventNameEnum.requestFlowEvent, {
+    type: 'onDelNode',
+    data: nodeId
+  });
+};
+export const onDelConnect = (e: Parameters<useFlowProviderStoreType['onDelConnect']>[0]) => {
+  eventBus.emit(EventNameEnum.requestFlowEvent, {
+    type: 'onDelConnect',
+    data: e
+  });
+};
+export const onSetNodes = (e: useFlowProviderStoreType['nodes']) => {
+  eventBus.emit(EventNameEnum.requestFlowEvent, {
+    type: 'setNodes',
+    data: e
+  });
+};
+
+export const getFlowStore = () =>
+  new Promise<{
+    nodes: useFlowProviderStoreType['nodes'];
+    edges: useFlowProviderStoreType['edges'];
+    mode: useFlowProviderStoreType['mode'];
+    filterAppIds: useFlowProviderStoreType['filterAppIds'];
+    reactFlowWrapper: useFlowProviderStoreType['reactFlowWrapper'];
+  }>((resolve) => {
+    eventBus.on('receiveFlowStore', (data: any) => {
+      resolve(data);
+      eventBus.off('receiveFlowStore');
+    });
+    eventBus.emit(EventNameEnum.requestFlowStore);
+  });
--- a/projects/app/src/components/core/module/Flow/ImportSettings.tsx
+++ b/projects/app/src/components/core/module/Flow/ImportSettings.tsx
@@ -3,24 +3,16 @@ import { Textarea, Button, ModalBody, ModalFooter } from '@chakra-ui/react';
 import MyModal from '@/components/MyModal';
 import { useTranslation } from 'next-i18next';
 import { useToast } from '@/web/common/hooks/useToast';
-import { useFlowProviderStore, type useFlowProviderStoreType } from './FlowProvider';
+import { useFlowProviderStore } from './FlowProvider';

 type Props = {
  onClose: () => void;
 };

-const ImportSettings = ({
-  onClose,
-  setNodes,
-  setEdges,
-  initData
-}: Props & {
-  setNodes: useFlowProviderStoreType['setNodes'];
-  setEdges: useFlowProviderStoreType['setEdges'];
-  initData: useFlowProviderStoreType['initData'];
-}) => {
+const ImportSettings = ({ onClose }: Props) => {
  const { t } = useTranslation();
  const { toast } = useToast();
+  const { setNodes, setEdges, initData } = useFlowProviderStore();
  const [value, setValue] = useState('');

  return (
@@ -41,7 +33,7 @@ const ImportSettings = ({
      </ModalBody>
      <ModalFooter>
        <Button
-          variant="base"
+          variant="whiteBase"
          onClick={() => {
            if (!value) {
              return onClose();
@@ -68,8 +60,4 @@ const ImportSettings = ({
  );
 };

-export default React.memo(function (props: Props) {
-  const { setNodes, setEdges, initData } = useFlowProviderStore();
-
-  return <ImportSettings {...props} setNodes={setNodes} setEdges={setEdges} initData={initData} />;
-});
+export default React.memo(ImportSettings);
--- a/projects/app/src/components/core/module/Flow/ModuleTemplateList.tsx
+++ b/projects/app/src/components/core/module/Flow/ModuleTemplateList.tsx
@@ -7,11 +7,10 @@ import type {
 import { useViewport, XYPosition } from 'reactflow';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import Avatar from '@/components/Avatar';
-import { useFlowProviderStore, type useFlowProviderStoreType } from './FlowProvider';
+import { getFlowStore, onSetNodes } from './FlowProvider';
 import { customAlphabet } from 'nanoid';
 import { appModule2FlowNode } from '@/utils/adapt';
 import { useTranslation } from 'next-i18next';
-import { useRouter } from 'next/router';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);
 import EmptyTip from '@/components/EmptyTip';
 import { FlowNodeTypeEnum } from '@fastgpt/global/core/module/node/constant';
@@ -19,7 +18,6 @@ import { getPreviewPluginModule } from '@/web/core/plugin/api';
 import { useToast } from '@/web/common/hooks/useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
 import { moduleTemplatesList } from '@/web/core/modules/template/system';
-import { ModuleTemplateTypeEnum } from '@fastgpt/global/core/module/constants';

 export type ModuleTemplateProps = {
  templates: FlowModuleTemplateType[];
@@ -32,20 +30,9 @@ type ModuleTemplateListProps = ModuleTemplateProps & {
 type RenderListProps = {
  templates: FlowModuleTemplateType[];
  onClose: () => void;
-  setNodes: useFlowProviderStoreType['setNodes'];
-  reactFlowWrapper: useFlowProviderStoreType['reactFlowWrapper'];
 };

-const ModuleTemplateList = ({
-  templates,
-  isOpen,
-  onClose,
-  setNodes,
-  reactFlowWrapper
-}: ModuleTemplateListProps & {
-  setNodes: useFlowProviderStoreType['setNodes'];
-  reactFlowWrapper: useFlowProviderStoreType['reactFlowWrapper'];
-}) => {
+const ModuleTemplateList = ({ templates, isOpen, onClose }: ModuleTemplateListProps) => {
  const { t } = useTranslation();

  return (
@@ -77,31 +64,16 @@ const ModuleTemplateList = ({
        transition={'.2s ease'}
        userSelect={'none'}
      >
-        <RenderList
-          templates={templates}
-          onClose={onClose}
-          setNodes={setNodes}
-          reactFlowWrapper={reactFlowWrapper}
-        />
+        <RenderList templates={templates} onClose={onClose} />
      </Flex>
    </>
  );
 };

-export default React.memo(function (props: ModuleTemplateListProps) {
-  const { setNodes, reactFlowWrapper } = useFlowProviderStore();
+export default React.memo(ModuleTemplateList);

-  return <ModuleTemplateList {...props} setNodes={setNodes} reactFlowWrapper={reactFlowWrapper} />;
-});
-
-const RenderList = React.memo(function RenderList({
-  templates,
-  onClose,
-  setNodes,
-  reactFlowWrapper
-}: RenderListProps) {
+const RenderList = React.memo(function RenderList({ templates, onClose }: RenderListProps) {
  const { t } = useTranslation();
-  const router = useRouter();
  const { isPc } = useSystemStore();
  const { x, y, zoom } = useViewport();
  const { setLoading } = useSystemStore();
@@ -119,6 +91,7 @@ const RenderList = React.memo(function RenderList({

  const onAddNode = useCallback(
    async ({ template, position }: { template: FlowModuleTemplateType; position: XYPosition }) => {
+      const { reactFlowWrapper, nodes } = await getFlowStore();
      if (!reactFlowWrapper?.current) return;

      const templateModule = await (async () => {
@@ -145,8 +118,8 @@ const RenderList = React.memo(function RenderList({
      const mouseX = (position.x - reactFlowBounds.left - x) / zoom - 100;
      const mouseY = (position.y - reactFlowBounds.top - y) / zoom;

-      setNodes((state) =>
-        state.concat(
+      onSetNodes(
+        nodes.concat(
          appModule2FlowNode({
            item: {
              ...templateModule,
@@ -157,7 +130,7 @@ const RenderList = React.memo(function RenderList({
        )
      );
    },
-    [reactFlowWrapper, setLoading, setNodes, t, toast, x, y, zoom]
+    [setLoading, t, toast, x, y, zoom]
  );

  return templates.length === 0 ? (
--- a/projects/app/src/components/core/module/Flow/SelectAppModal.tsx
+++ b/projects/app/src/components/core/module/Flow/SelectAppModal.tsx
@@ -60,7 +60,7 @@ const SelectAppModal = ({
            cursor={'pointer'}
            {...(selectedApps.includes(app._id)
              ? {
-                  bg: 'blue.100',
+                  bg: 'primary.100',
                  onClick: () => {
                    setSelectedApps(selectedApps.filter((e) => e !== app._id));
                  }
@@ -83,7 +83,7 @@ const SelectAppModal = ({
        ))}
      </ModalBody>
      <ModalFooter>
-        <Button variant={'base'} onClick={onClose}>
+        <Button variant={'whiteBase'} onClick={onClose}>
          {t('Cancel')}
        </Button>
        <Button
--- a/projects/app/src/components/core/module/Flow/components/modules/ButtonEdge.tsx
+++ b/projects/app/src/components/core/module/Flow/components/modules/ButtonEdge.tsx
@@ -1,19 +1,10 @@
 import React from 'react';
-import {
-  BezierEdge,
-  getBezierPath,
-  EdgeLabelRenderer,
-  EdgeProps,
-  getSmoothStepPath
-} from 'reactflow';
+import { BezierEdge, getBezierPath, EdgeLabelRenderer, EdgeProps } from 'reactflow';
+import { onDelConnect } from '../../FlowProvider';
 import { Flex } from '@chakra-ui/react';
 import MyIcon from '@/components/Icon';

-const ButtonEdge = (
-  props: EdgeProps<{
-    onDelete: (id: string) => void;
-  }>
-) => {
+const ButtonEdge = (props: EdgeProps) => {
  const {
    id,
    sourceX,
@@ -22,7 +13,6 @@ const ButtonEdge = (
    targetY,
    sourcePosition,
    targetPosition,
-    data,
    selected,
    style = {}
  } = props;
@@ -67,12 +57,12 @@ const ButtonEdge = (
          _hover={{
            boxShadow: '0 0 6px 2px rgba(0, 0, 0, 0.08)'
          }}
-          onClick={() => data?.onDelete(id)}
+          onClick={() => onDelConnect(id)}
        >
          <MyIcon
            name="closeSolid"
            w={'100%'}
-            color={selected ? 'blue.700' : 'myGray.500'}
+            color={selected ? 'primary.700' : 'myGray.500'}
          ></MyIcon>
        </Flex>
      </EdgeLabelRenderer>
--- a/projects/app/src/components/core/module/Flow/components/modules/TTSSelect.tsx
+++ b/projects/app/src/components/core/module/Flow/components/modules/TTSSelect.tsx
@@ -133,7 +133,8 @@ const TTSSelect = ({
                  <Image src="/icon/speaking.gif" w={'24px'} alt={''} />
                  <Button
                    ml={2}
-                    variant={'gray'}
+                    variant={'grayBase'}
+                    color={'primary.600'}
                    isLoading={audioLoading}
                    leftIcon={<MyIcon name={'core/chat/stopSpeech'} w={'16px'} />}
                    onClick={() => {
--- a/projects/app/src/components/core/module/Flow/components/modules/VariableEdit.tsx
+++ b/projects/app/src/components/core/module/Flow/components/modules/VariableEdit.tsx
@@ -289,7 +289,7 @@ const VariableEdit = ({
        </ModalBody>

        <ModalFooter>
-          <Button variant={'base'} mr={3} onClick={onCloseEdit}>
+          <Button variant={'whiteBase'} mr={3} onClick={onCloseEdit}>
            {t('common.Close')}
          </Button>
          <Button
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeAnswer.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeAnswer.tsx
@@ -6,7 +6,7 @@ import Container from '../modules/Container';
 import RenderInput from '../render/RenderInput';
 import RenderOutput from '../render/RenderOutput';

-const NodeAnswer = ({ data }: NodeProps<FlowModuleItemType>) => {
+const NodeAnswer = React.memo(function NodeAnswer({ data }: { data: FlowModuleItemType }) {
  const { moduleId, inputs, outputs } = data;
  return (
    <NodeCard minW={'400px'} {...data}>
@@ -16,5 +16,7 @@ const NodeAnswer = ({ data }: NodeProps<FlowModuleItemType>) => {
      </Container>
    </NodeCard>
  );
-};
-export default React.memo(NodeAnswer);
+});
+export default function Node({ data }: NodeProps<FlowModuleItemType>) {
+  return <NodeAnswer data={data} />;
+}
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeCQNode.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeCQNode.tsx
@@ -17,7 +17,7 @@ import SourceHandle from '../render/SourceHandle';
 import MyTooltip from '@/components/MyTooltip';
 import { onChangeNode } from '../../FlowProvider';

-const NodeCQNode = ({ data }: NodeProps<FlowModuleItemType>) => {
+const NodeCQNode = React.memo(function NodeCQNode({ data }: { data: FlowModuleItemType }) {
  const { t } = useTranslation();
  const { moduleId, inputs } = data;

@@ -136,5 +136,7 @@ const NodeCQNode = ({ data }: NodeProps<FlowModuleItemType>) => {
      </Container>
    </NodeCard>
  );
-};
-export default React.memo(NodeCQNode);
+});
+export default function Node({ data }: NodeProps<FlowModuleItemType>) {
+  return <NodeCQNode data={data} />;
+}
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeEmpty.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeEmpty.tsx
@@ -3,7 +3,10 @@ import { NodeProps } from 'reactflow';
 import NodeCard from '../render/NodeCard';
 import { FlowModuleItemType } from '@fastgpt/global/core/module/type.d';

-const NodeAnswer = ({ data }: NodeProps<FlowModuleItemType>) => {
+const NodeAnswer = React.memo(function NodeAnswer({ data }: { data: FlowModuleItemType }) {
  return <NodeCard {...data}></NodeCard>;
-};
-export default React.memo(NodeAnswer);
+});
+
+export default function Node({ data }: NodeProps<FlowModuleItemType>) {
+  return <NodeAnswer data={data} />;
+}
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/ExtractFieldModal.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/ExtractFieldModal.tsx
@@ -73,7 +73,7 @@ const ExtractFieldModal = ({
      </ModalBody>

      <ModalFooter>
-        <Button variant={'base'} mr={3} onClick={onClose}>
+        <Button variant={'whiteBase'} mr={3} onClick={onClose}>
          {t('common.Close')}
        </Button>
        <Button onClick={handleSubmit(onSubmit)}>{t('common.Confirm')}</Button>
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/index.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeExtract/index.tsx
@@ -17,7 +17,7 @@ import { FlowNodeOutputTypeEnum } from '@fastgpt/global/core/module/node/constan
 import { ModuleIOValueTypeEnum } from '@fastgpt/global/core/module/constants';
 import { onChangeNode } from '../../../FlowProvider';

-const NodeExtract = ({ data }: NodeProps<FlowModuleItemType>) => {
+const NodeExtract = React.memo(function NodeExtract({ data }: { data: FlowModuleItemType }) {
  const { inputs, outputs, moduleId } = data;
  const { t } = useTranslation();
  const [editExtractFiled, setEditExtractField] = useState<ContextExtractAgentItemType>();
@@ -39,7 +39,7 @@ const NodeExtract = ({ data }: NodeProps<FlowModuleItemType>) => {
              <Box pt={2}>
                <Box position={'absolute'} top={0} right={0}>
                  <Button
-                    variant={'base'}
+                    variant={'whitePrimary'}
                    leftIcon={<AddIcon fontSize={'10px'} />}
                    onClick={() => setEditExtractField(defaultField)}
                  >
@@ -183,6 +183,8 @@ const NodeExtract = ({ data }: NodeProps<FlowModuleItemType>) => {
      )}
    </NodeCard>
  );
-};
+});

-export default React.memo(NodeExtract);
+export default function Node({ data }: NodeProps<FlowModuleItemType>) {
+  return <NodeExtract data={data} />;
+}
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeHttp.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeHttp.tsx
@@ -17,7 +17,7 @@ import { ModuleIOValueTypeEnum } from '@fastgpt/global/core/module/constants';
 import { customAlphabet } from 'nanoid';
 const nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz1234567890', 6);

-const NodeHttp = ({ data }: NodeProps<FlowModuleItemType>) => {
+const NodeHttp = React.memo(function NodeHttp({ data }: { data: FlowModuleItemType }) {
  const { moduleId, inputs, outputs } = data;

  return (
@@ -31,5 +31,7 @@ const NodeHttp = ({ data }: NodeProps<FlowModuleItemType>) => {
      </Container>
    </NodeCard>
  );
-};
-export default React.memo(NodeHttp);
+});
+export default function Node({ data }: NodeProps<FlowModuleItemType>) {
+  return <NodeHttp data={data} />;
+}
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodePluginInput.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodePluginInput.tsx
@@ -41,7 +41,11 @@ const createEditField = {
  inputType: true
 };

-const NodePluginInput = ({ data }: NodeProps<FlowModuleItemType>) => {
+const NodePluginInput = React.memo(function NodePluginInput({
+  data
+}: {
+  data: FlowModuleItemType;
+}) {
  const { t } = useTranslation();
  const { moduleId, inputs, outputs } = data;
  const [createField, setCreateField] = useState<EditNodeFieldType>();
@@ -65,7 +69,7 @@ const NodePluginInput = ({ data }: NodeProps<FlowModuleItemType>) => {
              w={'14px'}
              cursor={'pointer'}
              mr={3}
-              _hover={{ color: 'blue.500' }}
+              _hover={{ color: 'primary.500' }}
              onClick={() =>
                setEditField({
                  inputType: item.type,
@@ -121,7 +125,7 @@ const NodePluginInput = ({ data }: NodeProps<FlowModuleItemType>) => {
        ))}
        <Box textAlign={'right'} mt={5}>
          <Button
-            variant={'base'}
+            variant={'whitePrimary'}
            leftIcon={<SmallAddIcon />}
            onClick={() => {
              setCreateField(defaultCreateField);
@@ -253,5 +257,7 @@ const NodePluginInput = ({ data }: NodeProps<FlowModuleItemType>) => {
      )}
    </NodeCard>
  );
-};
-export default React.memo(NodePluginInput);
+});
+export default function Node({ data }: NodeProps<FlowModuleItemType>) {
+  return <NodePluginInput data={data} />;
+}
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodePluginOutput.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodePluginOutput.tsx
@@ -42,7 +42,11 @@ const createEditField = {
  inputType: false
 };

-const NodePluginOutput = ({ data }: NodeProps<FlowModuleItemType>) => {
+const NodePluginOutput = React.memo(function NodePluginOutput({
+  data
+}: {
+  data: FlowModuleItemType;
+}) {
  const { t } = useTranslation();
  const { moduleId, inputs, outputs } = data;
  const [createField, setCreateField] = useState<EditNodeFieldType>();
@@ -84,7 +88,7 @@ const NodePluginOutput = ({ data }: NodeProps<FlowModuleItemType>) => {
              w={'14px'}
              cursor={'pointer'}
              ml={3}
-              _hover={{ color: 'blue.500' }}
+              _hover={{ color: 'primary.500' }}
              onClick={() =>
                setEditField({
                  inputType: item.type,
@@ -121,7 +125,7 @@ const NodePluginOutput = ({ data }: NodeProps<FlowModuleItemType>) => {
        ))}
        <Box textAlign={'left'} mt={5}>
          <Button
-            variant={'base'}
+            variant={'whitePrimary'}
            leftIcon={<SmallAddIcon />}
            onClick={() => {
              setCreateField(defaultCreateField);
@@ -233,5 +237,8 @@ const NodePluginOutput = ({ data }: NodeProps<FlowModuleItemType>) => {
      )}
    </NodeCard>
  );
-};
-export default React.memo(NodePluginOutput);
+});
+
+export default function Node({ data }: NodeProps<FlowModuleItemType>) {
+  return <NodePluginOutput data={data} />;
+}
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeQuestionInput.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeQuestionInput.tsx
@@ -6,7 +6,11 @@ import Container from '../modules/Container';

 import RenderOutput from '../render/RenderOutput';

-const QuestionInputNode = ({ data }: NodeProps<FlowModuleItemType>) => {
+const QuestionInputNode = React.memo(function QuestionInputNode({
+  data
+}: {
+  data: FlowModuleItemType;
+}) {
  const { moduleId, outputs } = data;

  return (
@@ -16,5 +20,8 @@ const QuestionInputNode = ({ data }: NodeProps<FlowModuleItemType>) => {
      </Container>
    </NodeCard>
  );
-};
-export default React.memo(QuestionInputNode);
+});
+
+export default function Node({ data }: NodeProps<FlowModuleItemType>) {
+  return <QuestionInputNode data={data} />;
+}
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeRunAPP.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeRunAPP.tsx
@@ -7,7 +7,7 @@ import Container from '../modules/Container';
 import RenderInput from '../render/RenderInput';
 import RenderOutput from '../render/RenderOutput';

-const NodeRunAPP = ({ data }: NodeProps<FlowModuleItemType>) => {
+const NodeRunAPP = React.memo(function NodeRunAPP({ data }: { data: FlowModuleItemType }) {
  const { moduleId, inputs, outputs } = data;

  return (
@@ -21,5 +21,7 @@ const NodeRunAPP = ({ data }: NodeProps<FlowModuleItemType>) => {
      </Container>
    </NodeCard>
  );
-};
-export default React.memo(NodeRunAPP);
+});
+export default function Node({ data }: NodeProps<FlowModuleItemType>) {
+  return <NodeRunAPP data={data} />;
+}
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeSimple.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeSimple.tsx
@@ -7,7 +7,7 @@ import Container from '../modules/Container';
 import RenderInput from '../render/RenderInput';
 import RenderOutput from '../render/RenderOutput';

-const NodeSimple = ({ data }: NodeProps<FlowModuleItemType>) => {
+const NodeSimple = React.memo(function NodeSimple({ data }: { data: FlowModuleItemType }) {
  const { moduleId, inputs, outputs } = data;

  return (
@@ -30,5 +30,7 @@ const NodeSimple = ({ data }: NodeProps<FlowModuleItemType>) => {
      )}
    </NodeCard>
  );
-};
-export default React.memo(NodeSimple);
+});
+export default function Node({ data }: NodeProps<FlowModuleItemType>) {
+  return <NodeSimple data={data} />;
+}
--- a/projects/app/src/components/core/module/Flow/components/nodes/NodeUserGuide.tsx
+++ b/projects/app/src/components/core/module/Flow/components/nodes/NodeUserGuide.tsx
@@ -30,7 +30,7 @@ import QGSwitch from '@/components/core/module/Flow/components/modules/QGSwitch'
 import TTSSelect from '@/components/core/module/Flow/components/modules/TTSSelect';
 import { splitGuideModule } from '@fastgpt/global/core/module/utils';

-const NodeUserGuide = ({ data }: NodeProps<FlowModuleItemType>) => {
+const NodeUserGuide = React.memo(function NodeUserGuide({ data }: { data: FlowModuleItemType }) {
  const theme = useTheme();
  return (
    <>
@@ -50,9 +50,11 @@ const NodeUserGuide = ({ data }: NodeProps<FlowModuleItemType>) => {
      </NodeCard>
    </>
  );
-};
-export default React.memo(NodeUserGuide);
+});

+export default function Node({ data }: NodeProps<FlowModuleItemType>) {
+  return <NodeUserGuide data={data} />;
+}
 export function WelcomeText({ data }: { data: FlowModuleItemType }) {
  const { inputs, moduleId } = data;

--- a/projects/app/src/components/core/module/Flow/components/render/FieldEditModal.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/FieldEditModal.tsx
@@ -221,7 +221,7 @@ const FieldEditModal = ({
      </ModalBody>

      <ModalFooter>
-        <Button variant={'base'} mr={3} onClick={onClose}>
+        <Button variant={'whiteBase'} mr={3} onClick={onClose}>
          {t('common.Close')}
        </Button>
        <Button
--- a/projects/app/src/components/core/module/Flow/components/render/NodeCard.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/NodeCard.tsx
@@ -8,11 +8,7 @@ import { QuestionOutlineIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'next-i18next';
 import { useEditTitle } from '@/web/common/hooks/useEditTitle';
 import { useToast } from '@/web/common/hooks/useToast';
-import {
-  useFlowProviderStore,
-  onChangeNode,
-  type useFlowProviderStoreType
-} from '../../FlowProvider';
+import { onChangeNode, onCopyNode, onResetNode, onDelNode } from '../../FlowProvider';
 import { FlowNodeTypeEnum } from '@fastgpt/global/core/module/node/constant';
 import { ModuleInputKeyEnum } from '@fastgpt/global/core/module/constants';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
@@ -27,13 +23,7 @@ type Props = FlowModuleItemType & {
  isPreview?: boolean;
 };

-const NodeCard = (
-  props: Props & {
-    onCopyNode: useFlowProviderStoreType['onCopyNode'];
-    onResetNode: useFlowProviderStoreType['onResetNode'];
-    onDelNode: useFlowProviderStoreType['onDelNode'];
-  }
-) => {
+const NodeCard = (props: Props) => {
  const { t } = useTranslation();
  const {
    children,
@@ -44,11 +34,9 @@ const NodeCard = (
    moduleId,
    flowType,
    inputs,
-    isPreview,
-    onCopyNode,
-    onResetNode,
-    onDelNode
+    isPreview
  } = props;
+
  const theme = useTheme();
  const { toast } = useToast();
  const { setLoading } = useSystemStore();
@@ -77,7 +65,10 @@ const NodeCard = (
                  try {
                    setLoading(true);
                    const pluginModule = await getPreviewPluginModule(pluginId);
-                    onResetNode(moduleId, pluginModule);
+                    onResetNode({
+                      id: moduleId,
+                      module: pluginModule
+                    });
                  } catch (e) {
                    return toast({
                      status: 'error',
@@ -130,20 +121,7 @@ const NodeCard = (
        onClick: () => {}
      }
    ],
-    [
-      flowType,
-      inputs,
-      moduleId,
-      name,
-      onCopyNode,
-      onDelNode,
-      onOpenModal,
-      onResetNode,
-      openConfirm,
-      setLoading,
-      t,
-      toast
-    ]
+    [flowType, inputs, moduleId, name, onOpenModal, openConfirm, setLoading, t, toast]
  );

  return (
@@ -198,10 +176,4 @@ const NodeCard = (
  );
 };

-export default React.memo(function (props: Props) {
-  const { onCopyNode, onResetNode, onDelNode } = useFlowProviderStore();
-
-  return (
-    <NodeCard {...props} onCopyNode={onCopyNode} onResetNode={onResetNode} onDelNode={onDelNode} />
-  );
-});
+export default React.memo(NodeCard);
--- a/projects/app/src/components/core/module/Flow/components/render/RenderInput/Label.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/RenderInput/Label.tsx
@@ -1,11 +1,7 @@
 import { EditNodeFieldType, FlowNodeInputItemType } from '@fastgpt/global/core/module/node/type';
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'next-i18next';
-import {
-  onChangeNode,
-  useFlowProviderStore,
-  useFlowProviderStoreType
-} from '../../../FlowProvider';
+import { onChangeNode, useFlowProviderStoreType } from '../../../FlowProvider';
 import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/module/node/constant';
 import { Box, Flex } from '@chakra-ui/react';
 import MyTooltip from '@/components/MyTooltip';
@@ -20,16 +16,10 @@ const FieldEditModal = dynamic(() => import('../FieldEditModal'));
 type Props = FlowNodeInputItemType & {
  moduleId: string;
  inputKey: string;
+  mode: useFlowProviderStoreType['mode'];
 };

-const InputLabel = ({
-  moduleId,
-  inputKey,
-  mode,
-  ...item
-}: Props & {
-  mode: useFlowProviderStoreType['mode'];
-}) => {
+const InputLabel = ({ moduleId, inputKey, mode, ...item }: Props) => {
  const { t } = useTranslation();
  const {
    required = false,
@@ -41,6 +31,7 @@ const InputLabel = ({
    showTargetInApp,
    showTargetInPlugin
  } = item;
+
  const [editField, setEditField] = useState<EditNodeFieldType>();

  const targetHandle = useMemo(() => {
@@ -81,7 +72,7 @@ const InputLabel = ({
            w={'14px'}
            cursor={'pointer'}
            ml={3}
-            _hover={{ color: 'blue.500' }}
+            _hover={{ color: 'primary.500' }}
            onClick={() =>
              setEditField({
                inputType: type,
@@ -153,8 +144,4 @@ const InputLabel = ({
  );
 };

-export default React.memo(function (props: Props) {
-  const { mode } = useFlowProviderStore();
-
-  return <InputLabel {...props} mode={mode} />;
-});
+export default React.memo(InputLabel);
--- a/projects/app/src/components/core/module/Flow/components/render/RenderInput/index.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/RenderInput/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import type { FlowNodeInputItemType } from '@fastgpt/global/core/module/node/type';
 import { Box } from '@chakra-ui/react';
 import { FlowNodeInputTypeEnum } from '@fastgpt/global/core/module/node/constant';
@@ -6,7 +6,7 @@ import dynamic from 'next/dynamic';

 import InputLabel from './Label';
 import type { RenderInputProps } from './type.d';
-import { useFlowProviderStore, type useFlowProviderStoreType } from '../../../FlowProvider';
+import { getFlowStore, type useFlowProviderStoreType } from '../../../FlowProvider';

 const RenderList: {
  types: `${FlowNodeInputTypeEnum}`[];
@@ -71,14 +71,9 @@ type Props = {
  moduleId: string;
  CustomComponent?: Record<string, (e: FlowNodeInputItemType) => React.ReactNode>;
 };
-const RenderInput = ({
-  flowInputList,
-  moduleId,
-  CustomComponent = {},
-  mode
-}: Props & {
-  mode: useFlowProviderStoreType['mode'];
-}) => {
+const RenderInput = ({ flowInputList, moduleId, CustomComponent = {} }: Props) => {
+  const [mode, setMode] = useState<useFlowProviderStoreType['mode']>('app');
+
  const sortInputs = useMemo(
    () =>
      flowInputList.sort((a, b) => {
@@ -108,6 +103,13 @@ const RenderInput = ({
    [mode, sortInputs]
  );

+  useEffect(() => {
+    async () => {
+      const { mode } = await getFlowStore();
+      setMode(mode);
+    };
+  }, []);
+
  return (
    <>
      {filterInputs.map((input) => {
@@ -124,7 +126,9 @@ const RenderInput = ({
        return (
          input.type !== FlowNodeInputTypeEnum.hidden && (
            <Box key={input.key} _notLast={{ mb: 7 }} position={'relative'}>
-              {!!input.label && <InputLabel moduleId={moduleId} inputKey={input.key} {...input} />}
+              {!!input.label && (
+                <InputLabel moduleId={moduleId} inputKey={input.key} mode={mode} {...input} />
+              )}
              {!!RenderComponent && (
                <Box mt={2} className={'nodrag'}>
                  {RenderComponent}
@@ -138,7 +142,4 @@ const RenderInput = ({
  );
 };

-export default React.memo(function (props: Props) {
-  const { mode } = useFlowProviderStore();
-  return <RenderInput {...props} mode={mode} />;
-});
+export default React.memo(RenderInput);
--- a/projects/app/src/components/core/module/Flow/components/render/RenderInput/templates/AddInputParam.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/RenderInput/templates/AddInputParam.tsx
@@ -16,7 +16,7 @@ const AddInputParam = ({ inputs = [], item, moduleId }: RenderInputProps) => {
  return (
    <>
      <Button
-        variant={'base'}
+        variant={'whitePrimary'}
        leftIcon={<SmallAddIcon />}
        onClick={() => {
          setEditField(item.defaultEditField || {});
--- a/projects/app/src/components/core/module/Flow/components/render/RenderInput/templates/AiSetting.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/RenderInput/templates/AiSetting.tsx
@@ -26,7 +26,7 @@ const AiSettingRender = ({ inputs = [], moduleId }: RenderInputProps) => {
  return (
    <>
      <Button
-        variant={'base'}
+        variant={'whitePrimary'}
        leftIcon={<MyIcon name={'settingLight'} w={'14px'} />}
        onClick={onOpenAIChatSetting}
      >
--- a/projects/app/src/components/core/module/Flow/components/render/RenderInput/templates/SelectApp.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/RenderInput/templates/SelectApp.tsx
@@ -1,23 +1,14 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import type { RenderInputProps } from '../type';
-import {
-  onChangeNode,
-  useFlowProviderStore,
-  type useFlowProviderStoreType
-} from '../../../../FlowProvider';
+import { getFlowStore, onChangeNode, useFlowProviderStoreType } from '../../../../FlowProvider';
 import { Box, Button, Flex, useDisclosure, useTheme } from '@chakra-ui/react';
 import { SelectAppItemType } from '@fastgpt/global/core/module/type';
 import Avatar from '@/components/Avatar';
 import SelectAppModal from '../../../../SelectAppModal';

-const SelectAppRender = ({
-  item,
-  moduleId,
-  filterAppIds
-}: RenderInputProps & {
-  filterAppIds: useFlowProviderStoreType['filterAppIds'];
-}) => {
+const SelectAppRender = ({ item, moduleId }: RenderInputProps) => {
  const theme = useTheme();
+  const [filterAppIds, setFilterAppIds] = useState<useFlowProviderStoreType['filterAppIds']>([]);

  const {
    isOpen: isOpenSelectApp,
@@ -27,11 +18,18 @@ const SelectAppRender = ({

  const value = item.value as SelectAppItemType | undefined;

+  useEffect(() => {
+    async () => {
+      const { filterAppIds } = await getFlowStore();
+      setFilterAppIds(filterAppIds);
+    };
+  }, []);
+
  return (
    <>
      <Box onClick={onOpenSelectApp}>
        {!value ? (
-          <Button variant={'base'} w={'100%'}>
+          <Button variant={'whitePrimary'} w={'100%'}>
            选择应用
          </Button>
        ) : (
@@ -66,7 +64,4 @@ const SelectAppRender = ({
  );
 };

-export default React.memo(function (props: RenderInputProps) {
-  const { filterAppIds } = useFlowProviderStore();
-  return <SelectAppRender {...props} filterAppIds={filterAppIds} />;
-});
+export default React.memo(SelectAppRender);
--- a/projects/app/src/components/core/module/Flow/components/render/RenderInput/templates/SelectDatasetParams.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/RenderInput/templates/SelectDatasetParams.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import type { RenderInputProps } from '../type';
-import { onChangeNode, useFlowProviderStore } from '../../../../FlowProvider';
+import { getFlowStore, onChangeNode, useFlowProviderStoreType } from '../../../../FlowProvider';
 import { Button, useDisclosure } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { DatasetSearchModeEnum } from '@fastgpt/global/core/dataset/constant';
@@ -11,7 +11,7 @@ import MyIcon from '@/components/Icon';
 import DatasetParamsModal from '@/components/core/module/DatasetParamsModal';

 const SelectDatasetParam = ({ inputs = [], moduleId }: RenderInputProps) => {
-  const { nodes } = useFlowProviderStore();
+  const [nodes, setNodes] = useState<useFlowProviderStoreType['nodes']>([]);

  const { t } = useTranslation();
  const [data, setData] = useState({
@@ -51,10 +51,17 @@ const SelectDatasetParam = ({ inputs = [], moduleId }: RenderInputProps) => {
    });
  }, [inputs]);

+  useEffect(() => {
+    async () => {
+      const { nodes } = await getFlowStore();
+      setNodes(nodes);
+    };
+  }, []);
+
  return (
    <>
      <Button
-        variant={'base'}
+        variant={'whitePrimary'}
        leftIcon={<MyIcon name={'settingLight'} w={'14px'} />}
        onClick={onOpen}
      >
--- a/projects/app/src/components/core/module/Flow/components/render/RenderOutput/Label.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/RenderOutput/Label.tsx
@@ -41,7 +41,7 @@ const OutputLabel = ({
            w={'14px'}
            cursor={'pointer'}
            mr={3}
-            _hover={{ color: 'blue.500' }}
+            _hover={{ color: 'primary.500' }}
            onClick={() =>
              setEditField({
                key: outputKey,
--- a/projects/app/src/components/core/module/Flow/components/render/RenderOutput/templates/AddOutputParam.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/RenderOutput/templates/AddOutputParam.tsx
@@ -17,7 +17,7 @@ const AddOutputParam = ({ outputs = [], item, moduleId }: RenderOutputProps) =>
  return (
    <Box textAlign={'right'}>
      <Button
-        variant={'base'}
+        variant={'whitePrimary'}
        leftIcon={<SmallAddIcon />}
        onClick={() => {
          setEditField(item.defaultEditField || {});
--- a/projects/app/src/components/core/module/Flow/components/render/SourceHandle.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/SourceHandle.tsx
@@ -28,7 +28,7 @@ const SourceHandle = ({ handleKey, valueType, ...props }: Props) => {
    <Box
      position={'absolute'}
      top={'50%'}
-      right={'-16px'}
+      right={'-18px'}
      transform={'translate(50%,-50%)'}
      {...props}
    >
@@ -40,8 +40,8 @@ const SourceHandle = ({ handleKey, valueType, ...props }: Props) => {
      >
        <Handle
          style={{
-            width: '12px',
-            height: '12px',
+            width: '14px',
+            height: '14px',
            ...valueStyle
          }}
          type="source"
--- a/projects/app/src/components/core/module/Flow/components/render/TargetHandle.tsx
+++ b/projects/app/src/components/core/module/Flow/components/render/TargetHandle.tsx
@@ -9,10 +9,9 @@ import { ModuleIOValueTypeEnum } from '@fastgpt/global/core/module/constants';
 interface Props extends BoxProps {
  handleKey: string;
  valueType?: `${ModuleIOValueTypeEnum}`;
-  onConnect?: OnConnect;
 }

-const TargetHandle = ({ handleKey, valueType, onConnect, ...props }: Props) => {
+const TargetHandle = ({ handleKey, valueType, ...props }: Props) => {
  const { t } = useTranslation();

  const valType = valueType ?? ModuleIOValueTypeEnum.any;
@@ -28,7 +27,7 @@ const TargetHandle = ({ handleKey, valueType, onConnect, ...props }: Props) => {
    <Box
      position={'absolute'}
      top={'50%'}
-      left={'-16px'}
+      left={'-18px'}
      transform={'translate(50%,-50%)'}
      {...props}
    >
@@ -40,8 +39,8 @@ const TargetHandle = ({ handleKey, valueType, onConnect, ...props }: Props) => {
      >
        <Handle
          style={{
-            width: '12px',
-            height: '12px',
+            width: '14px',
+            height: '14px',
            ...valueStyle
          }}
          type="target"
--- a/projects/app/src/components/core/module/Flow/index.tsx
+++ b/projects/app/src/components/core/module/Flow/index.tsx
@@ -11,7 +11,6 @@ import ModuleTemplateList, { type ModuleTemplateProps } from './ModuleTemplateLi
 import { useFlowProviderStore } from './FlowProvider';

 import 'reactflow/dist/style.css';
-import type { ModuleItemType } from '@fastgpt/global/core/module/type.d';

 const NodeSimple = dynamic(() => import('./components/nodes/NodeSimple'));
 const nodeTypes: Record<`${FlowNodeTypeEnum}`, any> = {
@@ -34,106 +33,96 @@ const nodeTypes: Record<`${FlowNodeTypeEnum}`, any> = {
 const edgeTypes = {
  [EDGE_TYPE]: ButtonEdge
 };
-type Props = {
-  modules: ModuleItemType[];
-  Header: React.ReactNode;
-} & ModuleTemplateProps;

-const Container = React.memo(function Container(props: Props) {
-  const { modules = [], Header, templates } = props;
+const Container = React.memo(function Container() {
+  const { reactFlowWrapper, nodes, onNodesChange, edges, onEdgesChange, onConnect } =
+    useFlowProviderStore();

+  return (
+    <ReactFlow
+      ref={reactFlowWrapper}
+      fitView
+      nodes={nodes}
+      edges={edges}
+      minZoom={0.1}
+      maxZoom={1.5}
+      defaultEdgeOptions={{
+        animated: true,
+        zIndex: 0
+      }}
+      elevateEdgesOnSelect
+      connectionLineStyle={{ strokeWidth: 2, stroke: '#5A646Es' }}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={(connect) => {
+        connect.sourceHandle &&
+          connect.targetHandle &&
+          onConnect({
+            connect
+          });
+      }}
+    >
+      <Background />
+      <Controls position={'bottom-right'} style={{ display: 'flex' }} showInteractive={false} />
+    </ReactFlow>
+  );
+});
+
+const Flow = ({
+  Header,
+  templates,
+  ...data
+}: ModuleTemplateProps & { Header: React.ReactNode }) => {
  const {
    isOpen: isOpenTemplate,
    onOpen: onOpenTemplate,
    onClose: onCloseTemplate
  } = useDisclosure();

-  const { reactFlowWrapper, nodes, onNodesChange, edges, onEdgesChange, onConnect, initData } =
-    useFlowProviderStore();
-
-  useEffect(() => {
-    initData(JSON.parse(JSON.stringify(modules)));
-  }, [modules.length]);
-
-  return (
-    <>
-      {/* header */}
-      {Header}
-      <Box
-        minH={'400px'}
-        flex={'1 0 0'}
-        w={'100%'}
-        h={0}
-        position={'relative'}
-        onContextMenu={(e) => {
-          e.preventDefault();
-          return false;
-        }}
-      >
-        {/* open module template */}
-        <IconButton
-          position={'absolute'}
-          top={5}
-          left={5}
-          w={'38px'}
-          h={'38px'}
-          borderRadius={'50%'}
-          icon={<SmallCloseIcon fontSize={'26px'} />}
-          transform={isOpenTemplate ? '' : 'rotate(135deg)'}
-          transition={'0.2s ease'}
-          aria-label={''}
-          zIndex={1}
-          boxShadow={'2px 2px 6px #85b1ff'}
-          onClick={() => {
-            isOpenTemplate ? onCloseTemplate() : onOpenTemplate();
-          }}
-        />
-
-        <ReactFlow
-          ref={reactFlowWrapper}
-          fitView
-          nodes={nodes}
-          edges={edges}
-          minZoom={0.1}
-          maxZoom={1.5}
-          defaultEdgeOptions={{
-            animated: true,
-            zIndex: 0
-          }}
-          elevateEdgesOnSelect
-          connectionLineStyle={{ strokeWidth: 2, stroke: '#5A646Es' }}
-          nodeTypes={nodeTypes}
-          edgeTypes={edgeTypes}
-          onNodesChange={onNodesChange}
-          onEdgesChange={onEdgesChange}
-          onConnect={(connect) => {
-            connect.sourceHandle &&
-              connect.targetHandle &&
-              onConnect({
-                connect
-              });
-          }}
-        >
-          <Background />
-          <Controls position={'bottom-right'} style={{ display: 'flex' }} showInteractive={false} />
-        </ReactFlow>
-
-        <ModuleTemplateList
-          templates={templates}
-          isOpen={isOpenTemplate}
-          onClose={onCloseTemplate}
-        />
-      </Box>
-    </>
-  );
-});
-
-const Flow = (data: Props) => {
  return (
    <Box h={'100%'} position={'fixed'} zIndex={999} top={0} left={0} right={0} bottom={0}>
      <ReactFlowProvider>
        <Flex h={'100%'} flexDirection={'column'} bg={'#fff'}>
-          <Container {...data} />
+          {Header}
+          <Box
+            minH={'400px'}
+            flex={'1 0 0'}
+            w={'100%'}
+            h={0}
+            position={'relative'}
+            onContextMenu={(e) => {
+              e.preventDefault();
+              return false;
+            }}
+          >
+            {/* open module template */}
+            <IconButton
+              position={'absolute'}
+              top={5}
+              left={5}
+              size={'mdSquare'}
+              borderRadius={'50%'}
+              icon={<SmallCloseIcon fontSize={'26px'} />}
+              transform={isOpenTemplate ? '' : 'rotate(135deg)'}
+              transition={'0.2s ease'}
+              aria-label={''}
+              zIndex={1}
+              boxShadow={'2px 2px 6px #85b1ff'}
+              onClick={() => {
+                isOpenTemplate ? onCloseTemplate() : onOpenTemplate();
+              }}
+            />
+
+            <Container {...data} />
+
+            <ModuleTemplateList
+              templates={templates}
+              isOpen={isOpenTemplate}
+              onClose={onCloseTemplate}
+            />
+          </Box>
        </Flex>
      </ReactFlowProvider>
    </Box>
--- a/projects/app/src/components/support/apikey/Table.tsx
+++ b/projects/app/src/components/support/apikey/Table.tsx
@@ -88,7 +88,7 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
                href={feConfigs.openAPIDocUrl || getDocPath('/docs/development/openapi')}
                target={'_blank'}
                ml={1}
-                color={'blue.500'}
+                color={'primary.500'}
              >
                查看文档
              </Link>
@@ -119,7 +119,7 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
          <Button
            ml={3}
            leftIcon={<AddIcon fontSize={'md'} />}
-            variant={'base'}
+            variant={'whitePrimary'}
            onClick={() =>
              setEditData({
                ...defaultEditData,
@@ -254,7 +254,7 @@ const ApiKeyTable = ({ tips, appId }: { tips: string; appId?: string }) => {
          </Flex>
        </ModalBody>
        <ModalFooter>
-          <Button variant="base" onClick={() => setApiKey('')}>
+          <Button variant="whiteBase" onClick={() => setApiKey('')}>
            好的
          </Button>
        </ModalFooter>
@@ -358,7 +358,7 @@ function EditKeyModal({
      </ModalBody>

      <ModalFooter>
-        <Button variant={'base'} mr={3} onClick={onClose}>
+        <Button variant={'whiteBase'} mr={3} onClick={onClose}>
          {t('Cancel')}
        </Button>

--- a/projects/app/src/components/support/permission/IconText/index.tsx
+++ b/projects/app/src/components/support/permission/IconText/index.tsx
@@ -12,7 +12,7 @@ const PermissionIconText = ({
  return PermissionTypeMap[permission] ? (
    <Flex alignItems={'center'} {...props}>
      <MyIcon name={PermissionTypeMap[permission]?.iconLight as any} w={'14px'} />
-      <Box ml={'1px'}>{t(PermissionTypeMap[permission]?.label)}</Box>
+      <Box ml={'2px'}>{t(PermissionTypeMap[permission]?.label)}</Box>
    </Flex>
  ) : null;
 };
--- a/projects/app/src/components/support/user/team/TeamManageModal/EditModal.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/EditModal.tsx
@@ -135,7 +135,7 @@ function EditModal({
        {!!defaultData.id ? (
          <>
            <Box flex={1} />
-            <Button variant={'base'} mr={3} onClick={onClose}>
+            <Button variant={'whiteBase'} mr={3} onClick={onClose}>
              {t('common.Close')}
            </Button>
            <Button isLoading={updating} onClick={handleSubmit((data) => onclickUpdate(data))}>
--- a/projects/app/src/components/support/user/team/TeamManageModal/index.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/index.tsx
@@ -156,7 +156,7 @@ const TeamManageModal = ({ onClose }: { onClose: () => void }) => {
                    <MyIcon
                      name={'common/addCircleLight'}
                      w={['16px', '18px']}
-                      color={'blue.500'}
+                      color={'primary.500'}
                      cursor={'pointer'}
                    />
                  }
@@ -177,7 +177,7 @@ const TeamManageModal = ({ onClose }: { onClose: () => void }) => {
                  gap={3}
                  {...(userInfo?.team?.teamId === team.teamId
                    ? {
-                        bg: 'blue.200'
+                        bg: 'primary.200'
                      }
                    : {
                        _hover: {
@@ -198,9 +198,13 @@ const TeamManageModal = ({ onClose }: { onClose: () => void }) => {
                    {team.teamName}
                  </Box>
                  {userInfo?.team?.teamId === team.teamId ? (
-                    <MyIcon name={'common/tickFill'} w={'16px'} color={'blue.500'} />
+                    <MyIcon name={'common/tickFill'} w={'16px'} color={'primary.500'} />
                  ) : (
-                    <Button size={'xs'} variant={'base'} onClick={() => onSwitchTeam(team.teamId)}>
+                    <Button
+                      size={'xs'}
+                      variant={'whitePrimary'}
+                      onClick={() => onSwitchTeam(team.teamId)}
+                    >
                      {t('user.team.Check Team')}
                    </Button>
                  )}
@@ -235,7 +239,7 @@ const TeamManageModal = ({ onClose }: { onClose: () => void }) => {
                  ml={2}
                  cursor={'pointer'}
                  _hover={{
-                    color: 'blue.500'
+                    color: 'primary.500'
                  }}
                  onClick={() => {
                    if (!userInfo?.team) return;
@@ -256,11 +260,11 @@ const TeamManageModal = ({ onClose }: { onClose: () => void }) => {
              </Box>
              {userInfo.team.role === TeamMemberRoleEnum.owner && (
                <Button
-                  variant={'base'}
+                  variant={'whitePrimary'}
                  size="sm"
                  borderRadius={'md'}
                  ml={3}
-                  leftIcon={<MyIcon name={'common/inviteLight'} w={'14px'} color={'blue.500'} />}
+                  leftIcon={<MyIcon name={'common/inviteLight'} w={'14px'} color={'primary.500'} />}
                  onClick={() => {
                    if (userInfo.team.maxSize <= members.length) {
                      toast({
@@ -278,12 +282,16 @@ const TeamManageModal = ({ onClose }: { onClose: () => void }) => {
              <Box flex={1} />
              {userInfo.team.role !== TeamMemberRoleEnum.owner && (
                <Button
-                  variant={'base'}
+                  variant={'whitePrimary'}
                  size="sm"
                  borderRadius={'md'}
                  ml={3}
                  leftIcon={
-                    <MyIcon name={'support/account/loginoutLight'} w={'14px'} color={'blue.500'} />
+                    <MyIcon
+                      name={'support/account/loginoutLight'}
+                      w={'14px'}
+                      color={'primary.500'}
+                    />
                  }
                  onClick={() => {
                    openLeaveConfirm(() => onLeaveTeam(userInfo?.team?.teamId))();
@@ -335,7 +343,7 @@ const TeamManageModal = ({ onClose }: { onClose: () => void }) => {
                                      name={'edit'}
                                      cursor={'pointer'}
                                      w="14px"
-                                      _hover={{ color: 'blue.500' }}
+                                      _hover={{ color: 'primary.500' }}
                                    />
                                  </MenuButton>
                                }
--- a/projects/app/src/components/support/user/team/TeamMenu/index.tsx
+++ b/projects/app/src/components/support/user/team/TeamMenu/index.tsx
@@ -19,7 +19,7 @@ const TeamMenu = () => {

  return (
    <Button
-      variant={'base'}
+      variant={'whitePrimary'}
      userSelect={'none'}
      w={'100%'}
      display={'block'}
--- a/projects/app/src/constants/common.ts
+++ b/projects/app/src/constants/common.ts
@@ -367,7 +367,7 @@ export const htmlTemplate = `<!DOCTYPE html>
    }
    .markdown a {
      text-decoration: underline;
-      color: var(--chakra-colors-blue-600);
+      color: var(--chakra-colors-primary-600);
    }
    .markdown table {
      border-collapse: separate;
--- a/projects/app/src/global/common/api/systemRes.d.ts
+++ b/projects/app/src/global/common/api/systemRes.d.ts
@@ -8,22 +8,9 @@ import type {
  ReRankModelItemType
 } from '@fastgpt/global/core/ai/model.d';

-import type { FeConfigsType } from '@fastgpt/global/common/system/types/index.d';
+import type { FastGPTFeConfigsType } from '@fastgpt/global/common/system/types/index.d';
 import { AppSimpleEditConfigTemplateType } from '@fastgpt/global/core/app/type';

-export type ConfigFileType = {
-  FeConfig: FeConfigsType;
-  SystemParams: SystemEnvType;
-  ChatModels: ChatModelItemType[];
-  QAModels: LLMModelItemType[];
-  CQModels: FunctionModelItemType[];
-  ExtractModels: FunctionModelItemType[];
-  QGModels: LLMModelItemType[];
-  VectorModels: VectorModelItemType[];
-  ReRankModels: ReRankModelItemType[];
-  AudioSpeechModels: AudioSpeechModelType[];
-  WhisperModel: WhisperModelType;
-};
 export type InitDateResponse = {
  chatModels: ChatModelItemType[];
  qaModels: LLMModelItemType[];
@@ -32,7 +19,7 @@ export type InitDateResponse = {
  vectorModels: VectorModelItemType[];
  audioSpeechModels: AudioSpeechModels[];
  reRankModels: ReRankModelItemType[];
-  feConfigs: FeConfigsType;
+  feConfigs: FastGPTFeConfigsType;
  priceMd: string;
  systemVersion: string;
  simpleModeTemplates: AppSimpleEditConfigTemplateType[];
--- a/projects/app/src/pages/_app.tsx
+++ b/projects/app/src/pages/_app.tsx
@@ -12,7 +12,7 @@ import { clientInitData, feConfigs } from '@/web/common/system/staticData';
 import { appWithTranslation, useTranslation } from 'next-i18next';
 import { useRouter } from 'next/router';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
-import type { FeConfigsType } from '@fastgpt/global/common/system/types/index.d';
+import type { FastGPTFeConfigsType } from '@fastgpt/global/common/system/types/index.d';
 import { change2DefaultLng, setLngStore } from '@/web/common/utils/i18n';

 import 'nprogress/nprogress.css';
@@ -40,7 +40,7 @@ function App({ Component, pageProps }: AppProps) {
  const { hiId } = router.query as { hiId?: string };
  const { i18n } = useTranslation();
  const { loadGitStar } = useSystemStore();
-  const [scripts, setScripts] = useState<FeConfigsType['scripts']>([]);
+  const [scripts, setScripts] = useState<FastGPTFeConfigsType['scripts']>([]);
  const [title, setTitle] = useState(process.env.SYSTEM_NAME || 'AI');

  useEffect(() => {
--- a/projects/app/src/pages/account/components/BillTable.tsx
+++ b/projects/app/src/pages/account/components/BillTable.tsx
@@ -72,7 +72,7 @@ const BillTable = () => {
                <Td>{t(item.appName) || '-'}</Td>
                <Td>{item.total}元</Td>
                <Td>
-                  <Button size={'sm'} variant={'base'} onClick={() => setBillDetail(item)}>
+                  <Button size={'sm'} variant={'whitePrimary'} onClick={() => setBillDetail(item)}>
                    详情
                  </Button>
                </Td>
--- a/projects/app/src/pages/account/components/Info.tsx
+++ b/projects/app/src/pages/account/components/Info.tsx
@@ -128,7 +128,6 @@ const UserInfo = () => {
      py={[2, 10]}
      justifyContent={'center'}
      alignItems={'flex-start'}
-      fontSize={['lg', 'xl']}
    >
      <Flex
        flexDirection={'column'}
@@ -230,7 +229,7 @@ const UserInfo = () => {
        <Flex mt={6} alignItems={'center'} w={['85%', '300px']}>
          <Box flex={'0 0 80px'}>{t('user.Password')}:&nbsp;</Box>
          <Box flex={1}>*****</Box>
-          <Button size={['sm', 'md']} variant={'base'} ml={5} onClick={onOpenUpdatePsw}>
+          <Button size={['sm', 'md']} variant={'whitePrimary'} ml={5} onClick={onOpenUpdatePsw}>
            {t('user.Change')}
          </Button>
        </Flex>
--- a/projects/app/src/pages/account/components/InformTable.tsx
+++ b/projects/app/src/pages/account/components/InformTable.tsx
@@ -59,7 +59,7 @@ const BillTable = () => {
                w={'5px'}
                h={'5px'}
                borderRadius={'10px'}
-                bg={'myRead.600'}
+                bg={'red.600'}
                position={'absolute'}
                bottom={'8px'}
                right={'8px'}
--- a/projects/app/src/pages/account/components/OpenAIAccountModal.tsx
+++ b/projects/app/src/pages/account/components/OpenAIAccountModal.tsx
@@ -54,7 +54,7 @@ const OpenAIAccountModal = ({
        </Flex>
      </ModalBody>
      <ModalFooter>
-        <Button mr={3} variant={'base'} onClick={onClose}>
+        <Button mr={3} variant={'whiteBase'} onClick={onClose}>
          取消
        </Button>
        <Button isLoading={isLoading} onClick={handleSubmit((data) => onSubmit(data))}>
--- a/projects/app/src/pages/account/components/PayModal.tsx
+++ b/projects/app/src/pages/account/components/PayModal.tsx
@@ -110,8 +110,8 @@ const PayModal = ({ onClose }: { onClose: () => void }) => {
      <ModalFooter>
        {!payId && (
          <>
-            <Button variant={'base'} onClick={onClose}>
-              取消
+            <Button variant={'whiteBase'} onClick={onClose}>
+              {t('common.Close')}
            </Button>
            <Button
              ml={3}
--- a/projects/app/src/pages/account/components/Promotion.tsx
+++ b/projects/app/src/pages/account/components/Promotion.tsx
@@ -93,7 +93,7 @@ const Promotion = () => {
          </Flex>
          <Button
            mt={4}
-            variant={'base'}
+            variant={'whitePrimary'}
            fontSize={'sm'}
            onClick={() => {
              copyData(`${location.origin}/?hiId=${userInfo?._id}`);
--- a/projects/app/src/pages/account/components/UpdatePswModal.tsx
+++ b/projects/app/src/pages/account/components/UpdatePswModal.tsx
@@ -78,7 +78,7 @@ const UpdatePswModal = ({ onClose }: { onClose: () => void }) => {
        </Flex>
      </ModalBody>
      <ModalFooter>
-        <Button mr={3} variant={'base'} onClick={onClose}>
+        <Button mr={3} variant={'whiteBase'} onClick={onClose}>
          取消
        </Button>
        <Button isLoading={isLoading} onClick={handleSubmit((data) => onSubmit(data))}>
--- a/projects/app/src/pages/api/common/system/getInitData.ts
+++ b/projects/app/src/pages/api/common/system/getInitData.ts
@@ -1,15 +1,16 @@
-import type { FeConfigsType } from '@fastgpt/global/common/system/types/index.d';
+import type { FastGPTFeConfigsType } from '@fastgpt/global/common/system/types/index.d';
 import type { NextApiRequest, NextApiResponse } from 'next';
 import { jsonRes } from '@fastgpt/service/common/response';
 import { readFileSync, readdirSync } from 'fs';
-import type { ConfigFileType, InitDateResponse } from '@/global/common/api/systemRes';
+import type { InitDateResponse } from '@/global/common/api/systemRes';
+import type { FastGPTConfigFileType } from '@fastgpt/global/common/system/types/index.d';
 import { formatPrice } from '@fastgpt/global/support/wallet/bill/tools';
 import { getTikTokenEnc } from '@fastgpt/global/common/string/tiktoken';
 import { initHttpAgent } from '@fastgpt/service/common/middle/httpAgent';
 import { SimpleModeTemplate_FastGPT_Universal } from '@/global/core/app/constants';
 import { getSimpleTemplatesFromPlus } from '@/service/core/app/utils';
 import { PluginSourceEnum } from '@fastgpt/global/core/plugin/constants';
-import { getFastGPTFeConfig } from '@fastgpt/service/common/system/config/controller';
+import { getFastGPTConfigFromDB } from '@fastgpt/service/common/system/config/controller';
 import { connectToDatabase } from '@/service/mongo';
 import { PluginTemplateType } from '@fastgpt/global/core/plugin/type';
 import { readConfigData } from '@/service/common/system';
@@ -26,11 +27,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
      cqModels: global.cqModels,
      extractModels: global.extractModels,
      vectorModels: global.vectorModels,
-      reRankModels: global.reRankModels.map((item) => ({
-        ...item,
-        requestUrl: undefined,
-        requestAuth: undefined
-      })),
+      reRankModels:
+        global.reRankModels?.map((item) => ({
+          ...item,
+          requestUrl: undefined,
+          requestAuth: undefined
+        })) || [],
      audioSpeechModels: global.audioSpeechModels,
      priceMd: global.priceMd,
      systemVersion: global.systemVersion || '0.0.0',
@@ -39,7 +41,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
  });
 }

-const defaultFeConfigs: FeConfigsType = {
+const defaultFeConfigs: FastGPTFeConfigsType = {
  show_emptyChat: true,
  show_git: true,
  docUrl: 'https://doc.fastgpt.in',
@@ -58,72 +60,87 @@ export async function getInitConfig() {
  try {
    if (global.feConfigs) return;
    await connectToDatabase();
+
    initGlobal();
-
-    // load config
-    const [dbConfig, fileConfig] = await Promise.all([
-      getFastGPTFeConfig(),
-      readConfigData('config.json')
-    ]);
-    const fileRes = JSON.parse(fileConfig) as ConfigFileType;
-
-    // get config from database
-    const config: ConfigFileType = {
-      ...fileRes,
-      FeConfig: {
-        ...defaultFeConfigs,
-        ...fileRes.FeConfig,
-        ...dbConfig
-      }
-    };
-
-    // set config
-    global.feConfigs = {
-      isPlus: !!config.SystemParams.pluginBaseUrl,
-      concatMd: config.FeConfig.show_git ? config.FeConfig.concatMd : '',
-      ...config.FeConfig
-    };
-    global.systemEnv = config.SystemParams;
-
-    global.chatModels = config.ChatModels || [];
-    global.qaModels = config.QAModels || [];
-    global.cqModels = config.CQModels || [];
-    global.extractModels = config.ExtractModels || [];
-    global.qgModels = config.QGModels || [];
-    global.vectorModels = config.VectorModels || [];
-    global.reRankModels = config.ReRankModels || [];
-    global.audioSpeechModels = config.AudioSpeechModels || [];
-    global.whisperModel = config.WhisperModel;
-
-    global.priceMd = '';
+    await initSystemConfig();
  } catch (error) {
    console.error('Load init config error', error);
-    exit(1);
+
+    if (!global.feConfigs) {
+      exit(1);
+    }
  }
  await getSimpleModeTemplates();

  getSystemVersion();
-  getModelPrice();
+  countModelPrice();
  getSystemPlugin();

  console.log({
-    FeConfig: global.feConfigs,
-    SystemParams: global.systemEnv,
-    ChatModels: global.chatModels,
-    QAModels: global.qaModels,
-    CQModels: global.cqModels,
-    ExtractModels: global.extractModels,
-    QGModels: global.qgModels,
-    VectorModels: global.vectorModels,
-    ReRankModels: global.reRankModels,
-    AudioSpeechModels: global.reRankModels,
-    WhisperModel: global.whisperModel,
+    feConfigs: global.feConfigs,
+    systemEnv: global.systemEnv,
+    chatModels: global.chatModels,
+    qaModels: global.qaModels,
+    cqModels: global.cqModels,
+    extractModels: global.extractModels,
+    qgModels: global.qgModels,
+    vectorModels: global.vectorModels,
+    reRankModels: global.reRankModels,
+    audioSpeechModels: global.audioSpeechModels,
+    whisperModel: global.whisperModel,
    price: global.priceMd,
    simpleModeTemplates: global.simpleModeTemplates,
    communityPlugins: global.communityPlugins
  });
 }

+export async function initSystemConfig() {
+  // load config
+  const [dbConfig, fileConfig] = await Promise.all([
+    getFastGPTConfigFromDB(),
+    readConfigData('config.json')
+  ]);
+  const fileRes = JSON.parse(fileConfig) as FastGPTConfigFileType;
+
+  // get config from database
+  const config: FastGPTConfigFileType = {
+    feConfigs: {
+      ...defaultFeConfigs,
+      ...(fileRes.feConfigs || {}),
+      ...(dbConfig.feConfigs || {})
+    },
+    systemEnv: fileRes.systemEnv,
+    chatModels: dbConfig.chatModels || fileRes.chatModels || [],
+    qaModels: dbConfig.qaModels || fileRes.qaModels || [],
+    cqModels: dbConfig.cqModels || fileRes.cqModels || [],
+    extractModels: dbConfig.extractModels || fileRes.extractModels || [],
+    qgModels: dbConfig.qgModels || fileRes.qgModels || [],
+    vectorModels: dbConfig.vectorModels || fileRes.vectorModels || [],
+    reRankModels: dbConfig.reRankModels || fileRes.reRankModels || [],
+    audioSpeechModels: dbConfig.audioSpeechModels || fileRes.audioSpeechModels || [],
+    whisperModel: dbConfig.whisperModel || fileRes.whisperModel
+  };
+
+  // set config
+  global.feConfigs = {
+    isPlus: !!config.systemEnv.pluginBaseUrl,
+    ...config.feConfigs
+  };
+  global.systemEnv = config.systemEnv;
+
+  global.chatModels = config.chatModels || [];
+  global.qaModels = config.qaModels || [];
+  global.cqModels = config.cqModels || [];
+  global.extractModels = config.extractModels || [];
+  global.qgModels = config.qgModels || [];
+  global.vectorModels = config.vectorModels || [];
+  global.reRankModels = config.reRankModels || [];
+  global.audioSpeechModels = config.audioSpeechModels || [];
+  global.whisperModel = config.whisperModel;
+
+  global.priceMd = '';
+}
+
 export function initGlobal() {
  global.communityPlugins = [];
  global.simpleModeTemplates = [];
@@ -151,8 +168,7 @@ export function getSystemVersion() {
  }
 }

-function getModelPrice() {
-  if (global.priceMd) return;
+export function countModelPrice() {
  global.priceMd = `| 计费项 | 价格: 元/ 1K tokens(包含上下文)|
 | --- | --- |
 ${global.vectorModels
@@ -176,7 +192,11 @@ ${global.qgModels
 ${global.audioSpeechModels
  ?.map((item) => `| 语音播放-${item.name} | ${formatPrice(item.price, 1000)} |`)
  .join('\n')}
-${`| 语音输入-${global.whisperModel.name} | ${global.whisperModel.price}/分钟 |`}
+${
+  global.whisperModel
+    ? `| 语音输入-${global.whisperModel.name} | ${global.whisperModel.price}/分钟 |`
+    : ''
+}
 `;
 }

--- a/projects/app/src/pages/api/common/system/refreshConfig.ts
+++ b/projects/app/src/pages/api/common/system/refreshConfig.ts
@@ -0,0 +1,33 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@fastgpt/service/common/response';
+import { connectToDatabase } from '@/service/mongo';
+import { authCert } from '@fastgpt/service/support/permission/auth/common';
+import { countModelPrice, initSystemConfig } from './getInitData';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+  try {
+    await connectToDatabase();
+    await authCert({ req, authRoot: true });
+    await initSystemConfig();
+    countModelPrice();
+
+    console.log(`refresh config`);
+    console.log({
+      feConfigs: global.feConfigs,
+      systemEnv: global.systemEnv,
+      chatModels: global.chatModels,
+      qaModels: global.qaModels,
+      cqModels: global.cqModels,
+      extractModels: global.extractModels,
+      qgModels: global.qgModels,
+      vectorModels: global.vectorModels,
+      reRankModels: global.reRankModels,
+      audioSpeechModels: global.audioSpeechModels,
+      whisperModel: global.whisperModel,
+      price: global.priceMd
+    });
+  } catch (error) {
+    console.log(error);
+  }
+  jsonRes(res);
+}
--- a/projects/app/src/pages/api/core/dataset/data/pushData.ts
+++ b/projects/app/src/pages/api/core/dataset/data/pushData.ts
@@ -68,7 +68,7 @@ export async function pushDataToDatasetCollection({
  teamId: string;
  tmbId: string;
 } & PushDatasetDataProps): Promise<PushDataResponse> {
-  const { datasetId, model, maxToken } = await checkModelValid({
+  const { datasetId, model, maxToken, weight } = await checkModelValid({
    mode,
    collectionId
  });
@@ -137,6 +137,7 @@ export async function pushDataToDatasetCollection({
      q: item.q,
      a: item.a,
      chunkIndex: item.chunkIndex ?? i,
+      weight: weight ?? 0,
      indexes: item.indexes
    }))
  );
@@ -167,10 +168,12 @@ export async function checkModelValid({
    if (!vectorModelData) {
      return Promise.reject(`Model ${vectorModel} is inValid`);
    }
+
    return {
      datasetId,
      maxToken: vectorModelData.maxToken * 1.5,
-      model: vectorModelData.model
+      model: vectorModelData.model,
+      weight: vectorModelData.weight
    };
  }

@@ -182,7 +185,8 @@ export async function checkModelValid({
    return {
      datasetId,
      maxToken: qaModelData.maxContext * 0.8,
-      model: qaModelData.model
+      model: qaModelData.model,
+      weight: 0
    };
  }
  return Promise.reject(`Mode ${mode} is inValid`);
--- a/projects/app/src/pages/api/plusApi/[...path].ts
+++ b/projects/app/src/pages/api/plusApi/[...path].ts
@@ -3,7 +3,7 @@ import { jsonRes } from '@fastgpt/service/common/response';
 import { request } from '@fastgpt/service/common/api/plusRequest';
 import type { Method } from 'axios';
 import { setCookie } from '@fastgpt/service/support/permission/controller';
-import { getInitConfig } from '../system/getInitData';
+import { getInitConfig } from '../common/system/getInitData';

 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  try {
--- a/projects/app/src/pages/api/support/user/account/loginByPassword.ts
+++ b/projects/app/src/pages/api/support/user/account/loginByPassword.ts
--- a/projects/app/src/pages/api/support/user/account/loginout.ts
+++ b/projects/app/src/pages/api/support/user/account/loginout.ts
--- a/projects/app/src/pages/api/support/user/account/tokenLogin.ts
+++ b/projects/app/src/pages/api/support/user/account/tokenLogin.ts
--- a/projects/app/src/pages/api/support/user/account/update.ts
+++ b/projects/app/src/pages/api/support/user/account/update.ts
--- a/projects/app/src/pages/api/support/user/account/updatePasswordByOld.ts
+++ b/projects/app/src/pages/api/support/user/account/updatePasswordByOld.ts
--- a/projects/app/src/pages/app/detail/components/AdEdit/Header.tsx
+++ b/projects/app/src/pages/app/detail/components/AdEdit/Header.tsx
@@ -12,7 +12,7 @@ import dynamic from 'next/dynamic';
 import MyIcon from '@/components/Icon';
 import MyTooltip from '@/components/MyTooltip';
 import ChatTest, { type ChatTestComponentRef } from '@/components/core/module/Flow/ChatTest';
-import { useFlowProviderStore } from '@/components/core/module/Flow/FlowProvider';
+import { getFlowStore } from '@/components/core/module/Flow/FlowProvider';
 import { flowNode2Modules, filterExportModules } from '@/components/core/module/utils';
 import { useAppStore } from '@/web/core/app/store/useAppStore';
 import { useToast } from '@/web/common/hooks/useToast';
@@ -43,9 +43,9 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
  const { isOpen: isOpenImport, onOpen: onOpenImport, onClose: onCloseImport } = useDisclosure();
  const { updateAppDetail } = useAppStore();

-  const { nodes, edges } = useFlowProviderStore();
+  const flow2ModulesAndCheck = useCallback(async () => {
+    const { nodes, edges } = await getFlowStore();

-  const flow2ModulesAndCheck = useCallback(() => {
    const modules = flowNode2Modules({ nodes, edges });
    // check required connect
    for (let i = 0; i < modules.length; i++) {
@@ -72,7 +72,7 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
      }
    }
    return modules;
-  }, [edges, nodes, t, toast]);
+  }, [t, toast]);

  const { mutate: onclickSave, isLoading } = useRequest({
    mutationFn: async (modules: ModuleItemType[]) => {
@@ -100,14 +100,13 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
      >
        <MyTooltip label={t('common.Back')} offset={[10, 10]}>
          <IconButton
-            size={'sm'}
+            size={'smSquare'}
            icon={<MyIcon name={'back'} w={'14px'} />}
-            borderRadius={'md'}
            borderColor={'myGray.300'}
-            variant={'base'}
+            variant={'whiteBase'}
            aria-label={''}
            onClick={openConfirmOut(async () => {
-              const modules = flow2ModulesAndCheck();
+              const modules = await flow2ModulesAndCheck();
              if (modules) {
                await onclickSave(modules);
              }
@@ -122,9 +121,9 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
        <MyTooltip label={t('app.Import Configs')}>
          <IconButton
            mr={[3, 6]}
+            size={'smSquare'}
            icon={<MyIcon name={'importLight'} w={['14px', '16px']} />}
-            borderRadius={'lg'}
-            variant={'base'}
+            variant={'whitePrimary'}
            aria-label={'save'}
            onClick={onOpenImport}
          />
@@ -133,11 +132,11 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
          <IconButton
            mr={[3, 6]}
            icon={<MyIcon name={'export'} w={['14px', '16px']} />}
-            borderRadius={'lg'}
-            variant={'base'}
+            size={'smSquare'}
+            variant={'whitePrimary'}
            aria-label={'save'}
-            onClick={() => {
-              const modules = flow2ModulesAndCheck();
+            onClick={async () => {
+              const modules = await flow2ModulesAndCheck();
              if (modules) {
                copyData(filterExportModules(modules), t('app.Export Config Successful'));
              }
@@ -149,9 +148,8 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
          <IconButton
            mr={[3, 6]}
            icon={<SmallCloseIcon fontSize={'25px'} />}
-            variant={'base'}
-            color={'myGray.600'}
-            borderRadius={'lg'}
+            variant={'whitePrimary'}
+            size={'smSquare'}
            aria-label={''}
            onClick={() => setTestModules(undefined)}
          />
@@ -160,11 +158,11 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
            <IconButton
              mr={[3, 6]}
              icon={<MyIcon name={'chat'} w={['14px', '16px']} />}
-              borderRadius={'lg'}
+              size={'smSquare'}
              aria-label={'save'}
-              variant={'base'}
-              onClick={() => {
-                const modules = flow2ModulesAndCheck();
+              variant={'whitePrimary'}
+              onClick={async () => {
+                const modules = await flow2ModulesAndCheck();
                if (modules) {
                  setTestModules(modules);
                }
@@ -176,11 +174,11 @@ const RenderHeaderContainer = React.memo(function RenderHeaderContainer({
        <MyTooltip label={'保存配置'}>
          <IconButton
            icon={<MyIcon name={'save'} w={['14px', '16px']} />}
-            borderRadius={'lg'}
+            size={'smSquare'}
            isLoading={isLoading}
            aria-label={'save'}
-            onClick={() => {
-              const modules = flow2ModulesAndCheck();
+            onClick={async () => {
+              const modules = await flow2ModulesAndCheck();
              if (modules) {
                onclickSave(modules);
              }
--- a/projects/app/src/pages/app/detail/components/AdEdit/index.tsx
+++ b/projects/app/src/pages/app/detail/components/AdEdit/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { AppSchema } from '@fastgpt/global/core/app/type.d';
 import Header from './Header';
 import Flow from '@/components/core/module/Flow';
@@ -12,7 +12,7 @@ import { useQuery } from '@tanstack/react-query';
 type Props = { app: AppSchema; onClose: () => void };

 const Render = ({ app, onClose }: Props) => {
-  const { nodes } = useFlowProviderStore();
+  const { nodes, initData } = useFlowProviderStore();
  const { pluginModuleTemplates, loadPluginTemplates } = usePluginStore();

  const moduleTemplates = useMemo(() => {
@@ -40,13 +40,11 @@ const Render = ({ app, onClose }: Props) => {

  useQuery(['getPlugTemplates'], () => loadPluginTemplates());

-  return (
-    <Flow
-      templates={moduleTemplates}
-      modules={app.modules}
-      Header={<Header app={app} onClose={onClose} />}
-    />
-  );
+  useEffect(() => {
+    initData(JSON.parse(JSON.stringify(app.modules)));
+  }, [app.modules]);
+
+  return <Flow templates={moduleTemplates} Header={<Header app={app} onClose={onClose} />} />;
 };

 export default React.memo(function AdEdit(props: Props) {
--- a/projects/app/src/pages/app/detail/components/InfoModal.tsx
+++ b/projects/app/src/pages/app/detail/components/InfoModal.tsx
@@ -174,7 +174,7 @@ const InfoModal = ({
      </ModalBody>

      <ModalFooter>
-        <Button variant={'base'} mr={3} onClick={onClose}>
+        <Button variant={'whiteBase'} mr={3} onClick={onClose}>
          取消
        </Button>
        <Button isLoading={btnLoading} onClick={saveUpdateModel}>
--- a/projects/app/src/pages/app/detail/components/OutLink/SelectUsingWayModal.tsx
+++ b/projects/app/src/pages/app/detail/components/OutLink/SelectUsingWayModal.tsx
@@ -189,7 +189,7 @@ const SelectUsingWayModal = ({ share, onClose }: { share: OutLinkSchema; onClose
              w={'16px'}
              color={'myGray.600'}
              cursor={'pointer'}
-              _hover={{ color: 'blue.500' }}
+              _hover={{ color: 'primary.500' }}
              onClick={() => {
                copyData(wayMap[getValues('usingWay')].code);
              }}
--- a/projects/app/src/pages/app/detail/components/OutLink/Share.tsx
+++ b/projects/app/src/pages/app/detail/components/OutLink/Share.tsx
@@ -76,7 +76,7 @@ const Share = ({ appId }: { appId: string }) => {
          </MyTooltip>
        </Box>
        <Button
-          variant={'base'}
+          variant={'whitePrimary'}
          colorScheme={'blue'}
          size={['sm', 'md']}
          {...(shareChatList.length >= 10
@@ -383,7 +383,7 @@ function EditLinkModal({
      </ModalBody>

      <ModalFooter>
-        <Button variant={'base'} mr={3} onClick={onClose}>
+        <Button variant={'whiteBase'} mr={3} onClick={onClose}>
          取消
        </Button>

--- a/projects/app/src/pages/app/detail/components/SimpleEdit/index.tsx
+++ b/projects/app/src/pages/app/detail/components/SimpleEdit/index.tsx
@@ -199,7 +199,7 @@ function ConfigForm({
        ref={divRef}
        position={'sticky'}
        top={-4}
-        bg={'white'}
+        bg={'myGray.25'}
        py={4}
        justifyContent={'space-between'}
        alignItems={'center'}
@@ -218,9 +218,8 @@ function ConfigForm({
        </Box>
        <Button
          isLoading={isSaving}
-          fontSize={'sm'}
          size={['sm', 'md']}
-          variant={appDetail.type === AppTypeEnum.simple ? 'primary' : 'base'}
+          variant={appDetail.type === AppTypeEnum.simple ? 'primary' : 'whitePrimary'}
          onClick={() => {
            if (appDetail.type !== AppTypeEnum.simple) {
              openConfirmSave(handleSubmit((data) => onSubmitSave(data)))();
@@ -562,26 +561,26 @@ function Settings({ appId }: { appId: string }) {
      overflow={'overlay'}
    >
      <Box px={4}>
-        <Flex alignItems={'flex-end'}>
+        <Flex alignItems={'center'} justifyContent={'space-between'}>
          <Box fontSize={['md', 'xl']} fontWeight={'bold'}>
            <PermissionIconText permission={appDetail.permission} />
          </Box>
-          <Box ml={1} color={'myGray.500'} fontSize={'sm'}>
-            (AppId:{' '}
+          <Box color={'myGray.500'} fontSize={'sm'}>
+            AppId:{' '}
            <Box as={'span'} userSelect={'all'}>
              {appId}
            </Box>
-            )
          </Box>
        </Flex>
        {/* basic info */}
        <Box
-          border={theme.borders.base}
+          borderWidth={'1px'}
+          borderColor={'primary.1'}
          borderRadius={'lg'}
          mt={2}
          px={5}
          py={4}
-          bg={'blue.50'}
+          bg={'primary.50'}
          position={'relative'}
        >
          <Flex alignItems={'center'} py={2}>
@@ -595,15 +594,11 @@ function Settings({ appId }: { appId: string }) {
                position={'absolute'}
                top={4}
                right={4}
-                size={'sm'}
+                size={'smSquare'}
                icon={<MyIcon name={'delete'} w={'14px'} />}
-                variant={'base'}
+                variant={'whiteDanger'}
                borderRadius={'md'}
                aria-label={'delete'}
-                _hover={{
-                  bg: 'myGray.100',
-                  color: 'red.600'
-                }}
                isLoading={isLoading}
                onClick={openConfirmDel(handleDelModel)}
              />
@@ -621,7 +616,7 @@ function Settings({ appId }: { appId: string }) {
          <Flex>
            <Button
              size={['sm', 'md']}
-              variant={'base'}
+              variant={'whitePrimary'}
              leftIcon={<MyIcon name={'chat'} w={'16px'} />}
              onClick={() => router.push(`/chat?appId=${appId}`)}
            >
@@ -630,7 +625,7 @@ function Settings({ appId }: { appId: string }) {
            <Button
              mx={3}
              size={['sm', 'md']}
-              variant={'base'}
+              variant={'whitePrimary'}
              leftIcon={<MyIcon name={'shareLight'} w={'16px'} />}
              onClick={() => {
                router.replace({
@@ -646,7 +641,7 @@ function Settings({ appId }: { appId: string }) {
            {appDetail.isOwner && (
              <Button
                size={['sm', 'md']}
-                variant={'base'}
+                variant={'whitePrimary'}
                leftIcon={<MyIcon name={'settingLight'} w={'16px'} />}
                onClick={() => setSettingAppInfo(appDetail)}
              >
@@ -722,7 +717,14 @@ function ChatTest({ appId }: { appId: string }) {
  }, [appDetail, resetChatBox]);

  return (
-    <Flex position={'relative'} flexDirection={'column'} h={'100%'} py={4} overflowX={'auto'}>
+    <Flex
+      position={'relative'}
+      flexDirection={'column'}
+      h={'100%'}
+      py={4}
+      overflowX={'auto'}
+      bg={'white'}
+    >
      <Flex px={[2, 5]}>
        <Box fontSize={['md', 'xl']} fontWeight={'bold'} flex={1}>
          {t('app.Chat Debug')}
@@ -730,9 +732,9 @@ function ChatTest({ appId }: { appId: string }) {
        <MyTooltip label={t('core.chat.Restart')}>
          <IconButton
            className="chat"
-            size={'sm'}
+            size={'smSquare'}
            icon={<MyIcon name={'clear'} w={'14px'} />}
-            variant={'base'}
+            variant={'whiteDanger'}
            borderRadius={'md'}
            aria-label={'delete'}
            onClick={(e) => {
--- a/projects/app/src/pages/app/detail/index.tsx
+++ b/projects/app/src/pages/app/detail/index.tsx
@@ -109,7 +109,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
          >
            <Flex mb={4} alignItems={'center'}>
              <Avatar src={appDetail.avatar} w={'34px'} borderRadius={'lg'} />
-              <Box ml={2} fontWeight={'bold'} fontSize={'sm'}>
+              <Box ml={2} fontWeight={'bold'}>
                {appDetail.name}
              </Box>
            </Flex>
@@ -139,11 +139,10 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
            >
              <IconButton
                mr={3}
-                icon={<MyIcon name={'backFill'} w={'18px'} color={'blue.500'} />}
+                icon={<MyIcon name={'backFill'} w={'18px'} color={'primary.500'} />}
                bg={'white'}
                boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
-                h={'28px'}
-                size={'sm'}
+                size={'smSquare'}
                borderRadius={'50%'}
                aria-label={''}
              />
--- a/projects/app/src/pages/app/list/component/CreateModal.tsx
+++ b/projects/app/src/pages/app/list/component/CreateModal.tsx
@@ -180,7 +180,7 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: (
      </ModalBody>

      <ModalFooter>
-        <Button variant={'base'} mr={3} onClick={onClose}>
+        <Button variant={'whiteBase'} mr={3} onClick={onClose}>
          取消
        </Button>
        <Button isLoading={creating} onClick={handleSubmit((data) => onclickCreate(data))}>
--- a/projects/app/src/pages/app/list/index.tsx
+++ b/projects/app/src/pages/app/list/index.tsx
@@ -71,21 +71,18 @@ const MyApps = () => {
  });

  return (
-    <PageContainer isLoading={isFetching}>
-      <Flex pt={3} px={5} alignItems={'center'}>
-        <Flex flex={1} alignItems={'center'}>
-          <Image src={'/imgs/module/ai.svg'} alt={''} mr={2} h={'24px'} />
-          <Box className="textlg" letterSpacing={1} fontSize={['20px', '24px']} fontWeight={'bold'}>
-            {t('app.My Apps')}
-          </Box>
-        </Flex>
-        <Button leftIcon={<AddIcon />} variant={'base'} onClick={onOpenCreateModal}>
+    <PageContainer isLoading={isFetching} insertProps={{ px: [5, '48px'] }}>
+      <Flex pt={[4, '30px']} alignItems={'center'} justifyContent={'space-between'}>
+        <Box letterSpacing={1} fontSize={['20px', '24px']} color={'myGray.900'}>
+          {t('app.My Apps')}
+        </Box>
+        <Button leftIcon={<AddIcon />} variant={'primaryOutline'} onClick={onOpenCreateModal}>
          {t('common.New Create')}
        </Button>
      </Flex>
      <Grid
-        p={5}
-        gridTemplateColumns={['1fr', 'repeat(3,1fr)', 'repeat(4,1fr)', 'repeat(5,1fr)']}
+        py={[4, 6]}
+        gridTemplateColumns={['1fr', 'repeat(2,1fr)', 'repeat(3,1fr)', 'repeat(4,1fr)']}
        gridGap={5}
      >
        {myApps.map((app) => (
@@ -93,26 +90,28 @@ const MyApps = () => {
            key={app._id}
            label={userInfo?.team.canWrite ? t('app.To Settings') : t('app.To Chat')}
          >
-            <Card
+            <Box
              lineHeight={1.5}
              h={'100%'}
              py={3}
              px={5}
              cursor={'pointer'}
-              border={theme.borders.md}
-              boxShadow={'none'}
+              borderWidth={'1.5px'}
+              borderColor={'borderColor.low'}
+              bg={'white'}
+              borderRadius={'lg'}
              userSelect={'none'}
              position={'relative'}
              display={'flex'}
              flexDirection={'column'}
              _hover={{
-                boxShadow: '1px 1px 10px rgba(0,0,0,0.2)',
-                borderColor: 'transparent',
+                borderColor: 'primary.300',
+                boxShadow: '1.5',
                '& .delete': {
-                  display: 'block'
+                  display: 'flex'
                },
                '& .chat': {
-                  display: 'block'
+                  display: 'flex'
                }
              }}
              onClick={() => {
@@ -132,15 +131,11 @@ const MyApps = () => {
                    position={'absolute'}
                    top={4}
                    right={4}
-                    size={'sm'}
+                    size={'xsSquare'}
+                    variant={'whiteDanger'}
                    icon={<MyIcon name={'delete'} w={'14px'} />}
-                    variant={'base'}
-                    borderRadius={'md'}
                    aria-label={'delete'}
                    display={['', 'none']}
-                    _hover={{
-                      bg: 'red.100'
-                    }}
                    onClick={(e) => {
                      e.stopPropagation();
                      openConfirm(() => onclickDelApp(app._id))();
@@ -165,19 +160,15 @@ const MyApps = () => {
                {userInfo?.team.canWrite && (
                  <IconButton
                    className="chat"
-                    size={'sm'}
+                    size={'xsSquare'}
+                    variant={'whitePrimary'}
                    icon={
                      <MyTooltip label={'去聊天'}>
                        <MyIcon name={'chat'} w={'14px'} />
                      </MyTooltip>
                    }
-                    variant={'base'}
-                    borderRadius={'md'}
-                    aria-label={'delete'}
+                    aria-label={'chat'}
                    display={['', 'none']}
-                    _hover={{
-                      bg: 'myGray.100'
-                    }}
                    onClick={(e) => {
                      e.stopPropagation();
                      router.push(`/chat?appId=${app._id}`);
@@ -185,7 +176,7 @@ const MyApps = () => {
                  />
                )}
              </Flex>
-            </Card>
+            </Box>
          </MyTooltip>
        ))}
      </Grid>
--- a/projects/app/src/pages/appStore/components/list.tsx
+++ b/projects/app/src/pages/appStore/components/list.tsx
@@ -61,7 +61,7 @@ const ShareModelList = ({
            <Flex
              alignItems={'center'}
              cursor={'pointer'}
-              color={model.isCollection ? 'blue.600' : 'blackAlpha.700'}
+              color={model.isCollection ? 'primary.600' : 'blackAlpha.700'}
              onClick={() => onclickCollection(model._id)}
            >
              <MyIcon
@@ -74,7 +74,7 @@ const ShareModelList = ({
            <Box>
              <Button
                size={'sm'}
-                variant={'base'}
+                variant={'whitePrimary'}
                w={['60px', '70px']}
                onClick={() => router.push(`/chat?appId=${model._id}`)}
              >
--- a/projects/app/src/pages/chat/components/ChatHeader.tsx
+++ b/projects/app/src/pages/chat/components/ChatHeader.tsx
@@ -42,8 +42,7 @@ const ChatHeader = ({
      alignItems={'center'}
      px={[3, 5]}
      h={['46px', '60px']}
-      borderBottom={theme.borders.base}
-      borderBottomColor={'gray.200'}
+      borderBottom={theme.borders.sm}
      color={'myGray.900'}
    >
      {isPc ? (
--- a/projects/app/src/pages/chat/components/ChatHistorySlider.tsx
+++ b/projects/app/src/pages/chat/components/ChatHistorySlider.tsx
@@ -151,10 +151,10 @@ const ChatHistorySlider = ({
          />
        )}
        <Button
-          variant={'base'}
+          variant={'whitePrimary'}
          flex={1}
          h={'100%'}
-          color={'blue.600'}
+          color={'primary.600'}
          borderRadius={'xl'}
          leftIcon={<MyIcon name={'chat'} w={'16px'} />}
          overflow={'hidden'}
@@ -167,7 +167,8 @@ const ChatHistorySlider = ({
          <IconButton
            ml={3}
            h={'100%'}
-            variant={'base'}
+            variant={'whiteDanger'}
+            size={'mdSquare'}
            aria-label={''}
            borderRadius={'xl'}
            onClick={openConfirm(onClearHistory)}
@@ -201,8 +202,8 @@ const ChatHistorySlider = ({
                bg={item.top ? '#E6F6F6 !important' : ''}
                {...(item.id === activeChatId
                  ? {
-                      backgroundColor: 'blue.50 !important',
-                      color: 'blue.600'
+                      backgroundColor: 'primary.50 !important',
+                      color: 'primary.600'
                    }
                  : {
                      onClick: () => {
@@ -290,8 +291,8 @@ const ChatHistorySlider = ({
                alignItems={'center'}
                {...(item._id === appId
                  ? {
-                      backgroundColor: 'blue.50 !important',
-                      color: 'blue.600'
+                      backgroundColor: 'primary.50 !important',
+                      color: 'primary.600'
                    }
                  : {
                      onClick: () => {
@@ -325,11 +326,10 @@ const ChatHistorySlider = ({
        >
          <IconButton
            mr={3}
-            icon={<MyIcon name={'backFill'} w={'18px'} color={'blue.500'} />}
+            icon={<MyIcon name={'backFill'} w={'18px'} color={'primary.500'} />}
            bg={'white'}
            boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
-            h={'28px'}
-            size={'sm'}
+            size={'smSquare'}
            borderRadius={'50%'}
            aria-label={''}
          />
--- a/projects/app/src/pages/chat/components/SliderApps.tsx
+++ b/projects/app/src/pages/chat/components/SliderApps.tsx
@@ -28,11 +28,10 @@ const SliderApps = ({ appId }: { appId: string }) => {
        >
          <IconButton
            mr={3}
-            icon={<MyIcon name={'backFill'} w={'18px'} color={'blue.500'} />}
+            icon={<MyIcon name={'backFill'} w={'18px'} color={'primary.500'} />}
            bg={'white'}
            boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
-            h={'28px'}
-            size={'sm'}
+            size={'smSquare'}
            borderRadius={'50%'}
            aria-label={''}
          />
--- a/Show More
+++ b/Show More