fix: tag theme

9ab5cef5 · archer · 1ac3edcc · 9ab5cef5 · 9ab5cef5 · 9ab5cef5
Commit 9ab5cef5 authored Jun 11, 2023 by archer
6 changed files
--- a/client/src/components/Tag/index.tsx
+++ b/client/src/components/Tag/index.tsx
+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;
--- a/client/src/constants/theme.ts
+++ b/client/src/constants/theme.ts
@@ -220,7 +220,6 @@ export const theme = extendTheme({
      900: '#1237b3',
      1000: '#07228c'
    },
    myRead: {
      600: '#ff4d4f'
    }

--- a/client/src/pages/chat/components/PhoneSliderBar.tsx
+++ b/client/src/pages/chat/components/PhoneSliderBar.tsx
-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,23 +79,37 @@ 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)}
+        />
        {/* 新对话 */}
+        {currentTab === TabEnum.app && (
          <Button
-          w={'50%'}
+            size={'sm'}
            variant={'base'}
-          colorScheme={'white'}
+            color={'white'}
-          mb={2}
            leftIcon={<AddIcon />}
-          onClick={() => router.replace(`/chat?modelId=${modelId}`)}
+            onClick={() => {
+              router.replace(`/chat?modelId=${modelId}`);
+              onClose();
+            }}
          >
            新对话
          </Button>
+        )}
      </Flex>
      {/* 我的模型 & 历史记录 折叠框*/}
      <Box flex={'1 0 0'} px={3} h={0} overflowY={'auto'}>
-        <Box>
+        {currentTab === TabEnum.app && (
+          <>
            {models.map((item) => (
              <Flex
                key={item._id}
@@ -121,10 +141,10 @@ const PhoneSliderBar = ({
                </Box>
              </Flex>
            ))}
-        </Box>
+          </>
+        )}
+        {currentTab === TabEnum.history && (
          <>
-          <Box py={1}>历史记录</Box>
            {history.map((item) => (
              <Flex
                key={item._id}
@@ -168,6 +188,7 @@ const PhoneSliderBar = ({
              </Flex>
            ))}
          </>
+        )}
      </Box>
      <Divider my={3} colorScheme={useColorModeValue('gray', 'white')} />

--- a/client/src/pages/chat/index.tsx
+++ b/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>

--- a/client/src/pages/kb/components/Info.tsx
+++ b/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>
              ))}

--- a/client/src/pages/kb/components/KbList.tsx
+++ b/client/src/pages/kb/components/KbList.tsx
 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>
                  ))