fix: tag theme

client/src/components/Tag/index.tsx

@@ -0,0 +1,47 @@
+import React, { useMemo } from 'react';
+import { Box, type BoxProps } from '@chakra-ui/react';
+
+interface Props extends BoxProps {
+  children: string;
+  colorSchema?: 'blue' | 'green' | 'gray';
+}
+
+const Tag = ({ children, colorSchema = 'blue', ...props }: Props) => {
+  const theme = useMemo(() => {
+    const map = {
+      blue: {
+        borderColor: 'myBlue.700',
+        bg: '#F2FBFF',
+        color: 'myBlue.700'
+      },
+      green: {
+        borderColor: '#52C41A',
+        bg: '#EDFFED',
+        color: '#52C41A'
+      },
+      gray: {
+        borderColor: '#979797',
+        bg: '#F7F7F7',
+        color: '#979797'
+      }
+    };
+    return map[colorSchema];
+  }, [colorSchema]);
+  return (
+    <Box
+      as={'span'}
+      border={'1px solid'}
+      px={2}
+      lineHeight={0}
+      py={'1px'}
+      borderRadius={'md'}
+      fontSize={'xs'}
+      {...theme}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default Tag;

client/src/constants/theme.ts

@@ -220,7 +220,6 @@ export const theme = extendTheme({
       900: '#1237b3',
       1000: '#07228c'
     },
-
     myRead: {
       600: '#ff4d4f'
     }

client/src/pages/chat/components/PhoneSliderBar.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { AddIcon, ChatIcon } from '@chakra-ui/icons';
 import {
   Box,
@@ -17,6 +17,12 @@ import WxConcat from '@/components/WxConcat';
 import { delChatHistoryById } from '@/api/chat';
 import { useChatStore } from '@/store/chat';
 import Avatar from '@/components/Avatar';
+import Tabs from '@/components/Tabs';
+
+enum TabEnum {
+  app = 'app',
+  history = 'history'
+}
 
 const PhoneSliderBar = ({
   chatId,
@@ -28,7 +34,7 @@ const PhoneSliderBar = ({
   onClose: () => void;
 }) => {
   const router = useRouter();
-  const { colorMode, toggleColorMode } = useColorMode();
+  const [currentTab, setCurrentTab] = useState(TabEnum.app);
   const { myModels, myCollectionModels, loadMyModels } = useUserStore();
   const { isOpen: isOpenWx, onOpen: onOpenWx, onClose: onCloseWx } = useDisclosure();
 
@@ -73,101 +79,116 @@ const PhoneSliderBar = ({
       backgroundColor={useColorModeValue('blackAlpha.800', 'blackAlpha.500')}
       color={'white'}
     >
-      <Flex alignItems={'center'} justifyContent={'space-between'} px={3}>
+      <Flex mb={2} alignItems={'center'} justifyContent={'space-between'} px={2}>
-        <Box flex={'0 0 50px'}>AI应用</Box>
+        <Tabs
+          w={'140px'}
+          list={[
+            { label: '应用', id: TabEnum.app },
+            { label: '历史记录', id: TabEnum.history }
+          ]}
+          size={'sm'}
+          activeId={currentTab}
+          onChange={(e: any) => setCurrentTab(e)}
+        />
         {/* 新对话 */}
-        <Button
+        {currentTab === TabEnum.app && (
-          w={'50%'}
+          <Button
-          variant={'base'}
+            size={'sm'}
-          colorScheme={'white'}
+            variant={'base'}
-          mb={2}
+            color={'white'}
-          leftIcon={<AddIcon />}
+            leftIcon={<AddIcon />}
-          onClick={() => router.replace(`/chat?modelId=${modelId}`)}
+            onClick={() => {
-        >
+              router.replace(`/chat?modelId=${modelId}`);
-          新对话
+              onClose();
-        </Button>
+            }}
+          >
+            新对话
+          </Button>
+        )}
       </Flex>
       {/* 我的模型 & 历史记录 折叠框*/}
       <Box flex={'1 0 0'} px={3} h={0} overflowY={'auto'}>
-        <Box>
+        {currentTab === TabEnum.app && (
-          {models.map((item) => (
+          <>
-            <Flex
+            {models.map((item) => (
-              key={item._id}
+              <Flex
-              alignItems={'center'}
+                key={item._id}
-              p={3}
+                alignItems={'center'}
-              borderRadius={'md'}
+                p={3}
-              mb={2}
+                borderRadius={'md'}
-              cursor={'pointer'}
+                mb={2}
-              _hover={{
+                cursor={'pointer'}
-                backgroundColor: 'rgba(255,255,255,0.1)'
+                _hover={{
-              }}
+                  backgroundColor: 'rgba(255,255,255,0.1)'
-              fontSize={'xs'}
+                }}
-              border={'1px solid transparent'}
+                fontSize={'xs'}
-              {...(item._id === modelId
+                border={'1px solid transparent'}
-                ? {
+                {...(item._id === modelId
-                    borderColor: 'rgba(255,255,255,0.5)',
+                  ? {
-                    backgroundColor: 'rgba(255,255,255,0.1)'
+                      borderColor: 'rgba(255,255,255,0.5)',
-                  }
+                      backgroundColor: 'rgba(255,255,255,0.1)'
-                : {})}
-              onClick={async () => {
-                if (item._id === modelId) return;
-                router.replace(`/chat?modelId=${item._id}`);
-                onClose();
-              }}
-            >
-              <Avatar src={item.avatar} mr={2} w={'18px'} h={'18px'} />
-              <Box className={'textEllipsis'} flex={'1 0 0'} w={0}>
-                {item.name}
-              </Box>
-            </Flex>
-          ))}
-        </Box>
-
-        <>
-          <Box py={1}>历史记录</Box>
-          {history.map((item) => (
-            <Flex
-              key={item._id}
-              alignItems={'center'}
-              p={3}
-              borderRadius={'md'}
-              mb={2}
-              fontSize={'xs'}
-              border={'1px solid transparent'}
-              {...(item._id === chatId
-                ? {
-                    borderColor: 'rgba(255,255,255,0.5)',
-                    backgroundColor: 'rgba(255,255,255,0.1)'
-                  }
-                : {})}
-              onClick={() => {
-                if (item._id === chatId) return;
-                router.replace(`/chat?modelId=${item.modelId}&chatId=${item._id}`);
-                onClose();
-              }}
-            >
-              <ChatIcon mr={2} />
-              <Box flex={'1 0 0'} w={0} className="textEllipsis">
-                {item.title}
-              </Box>
-              <Box>
-                <MyIcon
-                  name={'delete'}
-                  w={'14px'}
-                  onClick={async (e) => {
-                    e.stopPropagation();
-                    console.log(111);
-                    await delChatHistoryById(item._id);
-                    loadHistory({ pageNum: 1, init: true });
-                    if (item._id === chatId) {
-                      router.replace(`/chat?modelId=${modelId}`);
                     }
-                  }}
+                  : {})}
-                />
+                onClick={async () => {
-              </Box>
+                  if (item._id === modelId) return;
-            </Flex>
+                  router.replace(`/chat?modelId=${item._id}`);
-          ))}
+                  onClose();
-        </>
+                }}
+              >
+                <Avatar src={item.avatar} mr={2} w={'18px'} h={'18px'} />
+                <Box className={'textEllipsis'} flex={'1 0 0'} w={0}>
+                  {item.name}
+                </Box>
+              </Flex>
+            ))}
+          </>
+        )}
+        {currentTab === TabEnum.history && (
+          <>
+            {history.map((item) => (
+              <Flex
+                key={item._id}
+                alignItems={'center'}
+                p={3}
+                borderRadius={'md'}
+                mb={2}
+                fontSize={'xs'}
+                border={'1px solid transparent'}
+                {...(item._id === chatId
+                  ? {
+                      borderColor: 'rgba(255,255,255,0.5)',
+                      backgroundColor: 'rgba(255,255,255,0.1)'
+                    }
+                  : {})}
+                onClick={() => {
+                  if (item._id === chatId) return;
+                  router.replace(`/chat?modelId=${item.modelId}&chatId=${item._id}`);
+                  onClose();
+                }}
+              >
+                <ChatIcon mr={2} />
+                <Box flex={'1 0 0'} w={0} className="textEllipsis">
+                  {item.title}
+                </Box>
+                <Box>
+                  <MyIcon
+                    name={'delete'}
+                    w={'14px'}
+                    onClick={async (e) => {
+                      e.stopPropagation();
+                      console.log(111);
+                      await delChatHistoryById(item._id);
+                      loadHistory({ pageNum: 1, init: true });
+                      if (item._id === chatId) {
+                        router.replace(`/chat?modelId=${modelId}`);
+                      }
+                    }}
+                  />
+                </Box>
+              </Flex>
+            ))}
+          </>
+        )}
       </Box>
 
       <Divider my={3} colorScheme={useColorModeValue('gray', 'white')} />

client/src/pages/chat/index.tsx

@@ -893,7 +893,7 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
       {!isPc && (
         <Drawer isOpen={isOpenSlider} placement="left" size={'xs'} onClose={onCloseSlider}>
           <DrawerOverlay backgroundColor={'rgba(255,255,255,0.5)'} />
-          <DrawerContent maxWidth={'250px'}>
+          <DrawerContent maxW={'70%'}>
             <PhoneSliderBar chatId={chatId} modelId={modelId} onClose={onCloseSlider} />
           </DrawerContent>
         </Drawer>

client/src/pages/kb/components/Info.tsx

@@ -7,7 +7,7 @@ import React, {
   ForwardedRef
 } from 'react';
 import { useRouter } from 'next/router';
-import { Box, Flex, Button, FormControl, IconButton, Tooltip, Input, Tag } from '@chakra-ui/react';
+import { Box, Flex, Button, FormControl, IconButton, Tooltip, Input } from '@chakra-ui/react';
 import { QuestionOutlineIcon, DeleteIcon } from '@chakra-ui/icons';
 import { delKbById, putKbById } from '@/api/plugins/kb';
 import { useSelectFile } from '@/hooks/useSelectFile';
@@ -18,6 +18,7 @@ import { UseFormReturn } from 'react-hook-form';
 import { compressImg } from '@/utils/file';
 import type { KbItemType } from '@/types/plugin';
 import Avatar from '@/components/Avatar';
+import Tag from '@/components/Tag';
 
 export interface ComponentRef {
   initInput: (tags: string) => void;
@@ -211,7 +212,7 @@ const Info = (
               .split(' ')
               .filter((item) => item)
               .map((item, i) => (
-                <Tag mr={2} mb={2} key={i} variant={'base'} colorScheme={'blue'}>
+                <Tag mr={2} mb={2} key={i}>
                   {item}
                 </Tag>
               ))}

client/src/pages/kb/components/KbList.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useMemo } from 'react';
-import { Box, Flex, useTheme, Input, IconButton, Tooltip, Tag } from '@chakra-ui/react';
+import { Box, Flex, useTheme, Input, IconButton, Tooltip } from '@chakra-ui/react';
 import { AddIcon } from '@chakra-ui/icons';
 import { useRouter } from 'next/router';
 import { postCreateKb } from '@/api/plugins/kb';
@@ -9,6 +9,7 @@ import { useQuery } from '@tanstack/react-query';
 import { useUserStore } from '@/store/user';
 import MyIcon from '@/components/Icon';
 import Avatar from '@/components/Avatar';
+import Tag from '@/components/Tag';
 
 const KbList = ({ kbId }: { kbId: string }) => {
   const theme = useTheme();
@@ -118,12 +119,12 @@ const KbList = ({ kbId }: { kbId: string }) => {
                 {item.name}
               </Box>
               {/* tags */}
-              <Box className="textEllipsis" color={'myGray.400'} mt={1} fontSize={'sm'}>
+              <Box className="textEllipsis" color={'myGray.400'} py={1}>
                 {!item.tags ? (
                   <>{item.tags || '你还没设置标签~'}</>
                 ) : (
                   item.tags.split(' ').map((item, i) => (
-                    <Tag key={i} mr={2} mb={2} variant={'base'} colorScheme={'blue'} size={'sm'}>
+                    <Tag key={i} mr={2} mb={2}>
                       {item}
                     </Tag>
                   ))