fix: phone ui

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Flex, useTheme, Box } from '@chakra-ui/react';
+import { useGlobalStore } from '@/store/global';
+import MyIcon from '@/components/Icon';
+import Tag from '@/components/Tag';
+import Avatar from '@/components/Avatar';
+import ToolMenu from './ToolMenu';
+import { ChatItemType } from '@/types/chat';
+
+const ChatHeader = ({
+  title,
+  history,
+  appAvatar,
+  onOpenSlider
+}: {
+  title: string;
+  history: ChatItemType[];
+  appAvatar: string;
+  onOpenSlider: () => void;
+}) => {
+  const theme = useTheme();
+  const { isPc } = useGlobalStore();
+  return (
+    <Flex
+      alignItems={'center'}
+      py={[3, 5]}
+      px={[3, 5]}
+      borderBottom={theme.borders.base}
+      borderBottomColor={'gray.200'}
+      color={'myGray.900'}
+    >
+      {isPc ? (
+        <>
+          <Box mr={3} color={'myGray.1000'}>
+            {title}
+          </Box>
+          <Tag display={'flex'}>
+            <MyIcon name={'history'} w={'14px'} />
+            <Box ml={1}>{history.length}条记录</Box>
+          </Tag>
+          <Box flex={1} />
+        </>
+      ) : (
+        <>
+          <MyIcon name={'menu'} w={'20px'} h={'20px'} color={'myGray.900'} onClick={onOpenSlider} />
+          <Flex px={3} alignItems={'center'} flex={'1 0 0'} w={0} justifyContent={'center'}>
+            <Avatar src={appAvatar} w={'16px'} />
+            <Box ml={1} className="textEllipsis">
+              {title}
+            </Box>
+          </Flex>
+        </>
+      )}
+      {/* control */}
+      <ToolMenu history={history} />
+    </Flex>
+  );
+};
+
+export default ChatHeader;

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

@@ -7,7 +7,8 @@ import {
   Menu,
   MenuButton,
   MenuList,
-  MenuItem
+  MenuItem,
+  IconButton
 } from '@chakra-ui/react';
 import { useGlobalStore } from '@/store/global';
 import { useRouter } from 'next/router';
@@ -29,8 +30,7 @@ const ChatHistorySlider = ({
   activeHistoryId,
   onChangeChat,
   onDelHistory,
-  onSetHistoryTop,
-  onCloseSlider
+  onSetHistoryTop
 }: {
   appId?: string;
   appName: string;
@@ -40,7 +40,6 @@ const ChatHistorySlider = ({
   onChangeChat: (historyId?: string) => void;
   onDelHistory: (historyId: string) => void;
   onSetHistoryTop?: (e: { historyId: string; top: boolean }) => void;
-  onCloseSlider: () => void;
 }) => {
   const theme = useTheme();
   const router = useRouter();
@@ -180,6 +179,29 @@ const ChatHistorySlider = ({
           </Flex>
         ))}
       </Box>
+
+      {!isPc && appId && (
+        <Flex
+          mt={2}
+          borderTop={theme.borders.base}
+          alignItems={'center'}
+          cursor={'pointer'}
+          p={3}
+          onClick={() => router.push('/app/list')}
+        >
+          <IconButton
+            mr={3}
+            icon={<MyIcon name={'backFill'} w={'18px'} color={'myBlue.600'} />}
+            bg={'white'}
+            boxShadow={'1px 1px 9px rgba(0,0,0,0.15)'}
+            h={'28px'}
+            size={'sm'}
+            borderRadius={'50%'}
+            aria-label={''}
+          />
+          切换应用
+        </Flex>
+      )}
     </Flex>
   );
 };

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

@@ -21,7 +21,7 @@ const SliderApps = ({ appId }: { appId: string }) => {
         px={3}
         borderRadius={'md'}
         _hover={{ bg: 'myGray.200' }}
-        onClick={() => router.back()}
+        onClick={() => router.push('/app/list')}
       >
         <IconButton
           mr={3}

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

@@ -1,11 +1,29 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useChatBox } from '@/components/ChatBox';
 import { ChatItemType } from '@/types/chat';
-import { Menu, MenuButton, MenuList, MenuItem } from '@chakra-ui/react';
+import { Menu, MenuButton, MenuList, MenuItem, Box } from '@chakra-ui/react';
 import MyIcon from '@/components/Icon';
 
 const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
   const { onExportChat } = useChatBox();
+  const menuList = useRef([
+    {
+      icon: 'shareLight',
+      label: '分享对话',
+      onClick: () => {}
+    },
+    {
+      icon: 'apiLight',
+      label: 'HTML导出',
+      onClick: () => onExportChat({ type: 'html', history })
+    },
+    {
+      icon: 'markdown',
+      label: 'Markdown导出',
+      onClick: () => onExportChat({ type: 'md', history })
+    },
+    { icon: 'pdf', label: 'PDF导出', onClick: () => onExportChat({ type: 'pdf', history }) }
+  ]);
   return (
     <Menu autoSelect={false} isLazy>
       <MenuButton
@@ -18,10 +36,13 @@ const ToolMenu = ({ history }: { history: ChatItemType[] }) => {
       >
         <MyIcon name={'more'} w={'14px'} p={2} />
       </MenuButton>
-      <MenuList color={'myGray.700'} minW={`90px !important`}>
-        <MenuItem onClick={() => onExportChat({ type: 'html', history })}>导出HTML格式</MenuItem>
-        <MenuItem onClick={() => onExportChat({ type: 'pdf', history })}>导出PDF格式</MenuItem>
-        <MenuItem onClick={() => onExportChat({ type: 'md', history })}>导出Markdown格式</MenuItem>
+      <MenuList color={'myGray.700'} minW={`120px !important`} zIndex={10}>
+        {menuList.current.map((item) => (
+          <MenuItem key={item.label} onClick={item.onClick} py={[2, 3]}>
+            <MyIcon name={item.icon as any} w={['14px', '16px']} />
+            <Box ml={[1, 2]}>{item.label}</Box>
+          </MenuItem>
+        ))}
       </MenuList>
     </Menu>
   );