Todo: 移动端: 历史记录

src/main.jsx

@@ -16,6 +16,7 @@ import ErrorPage from '@/components/ErrorPage'
 import Conversations from '@/views/Conversations/ChatWindow'
 import MobileConversation from '@/views/mobile/Conversation'
 import MobileChat from '@/views/mobile/Chat'
+import MobileHistory from '@/views/mobile/History'
 import MobileSecondHeader from '@/views/mobile/SecondHeaderWrapper';
 import CustomerProfile from '@/views/Conversations/Components/CustomerProfile';
 
@@ -47,6 +48,7 @@ const router = createBrowserRouter([
             element: <MobileSecondHeader />,
             children: [
               { path: 'm/order', element: <CustomerProfile /> },
+              { path: 'm/history', element: <MobileHistory /> },
             ],
           },
         ]

src/views/MobileApp.jsx

@@ -4,7 +4,7 @@ import AppLogo from '@/assets/logo-gh.png';
 import { useThemeContext } from '@/stores/ThemeContext';
 import useAuthStore from '@/stores/AuthStore';
 import { Col, Layout, Row, Typography, theme, Space, Avatar, Dropdown, Flex } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
+import { DownOutlined, FileSearchOutlined } from '@ant-design/icons';
 import { NavLink, Outlet, Link } from 'react-router-dom';
 const { Header, Footer, Content } = Layout;
 const { Title } = Typography;
@@ -46,10 +46,13 @@ function MobileApp() {
     <Layout>
       <Header className='header px-2' style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%', background: 'white' }}>
         <Flex justify={'space-between'}>
+          <Flex gap={8}>
           <NavLink to='/'>
             <img src={AppLogo} className='logo' alt='App logo' />
             {!('Notification' in window) && <span>🔕</span>}
           </NavLink>
+          <NavLink to={'/m/history'} className={'text-primary'}><FileSearchOutlined className='pr-1' />历史</NavLink>
+          </Flex>
           <Dropdown
             menu={{
               items: [

src/views/mobile/History.jsx

@@ -0,0 +1,31 @@
+import { createContext, useContext, useEffect, useState, useCallback } from 'react';
+import { Divider, Layout } from 'antd';
+import useFormStore from '@/stores/FormStore';
+import SearchForm from '@/views/Conversations/History/SearchForm';
+import ConversationsList from '@/views/Conversations/History/ConversationsList';
+
+const { Sider, Content, Header } = Layout;
+const History = (props) => {
+  const [formValues, setFormValues] = useFormStore((state) => [state.chatHistoryForm, state.setChatHistoryForm]);
+
+  const handleSubmit = useCallback((values) => {
+    setFormValues({ ...values });
+  }, []);
+  return (
+    <div className='chathistory-wrapper chatwindow-wrapper'>
+      <SearchForm onSubmit={handleSubmit} initialValues={formValues} />
+      <ConversationsList />
+      {/* <Layout hasSider className='h-screen chathistory-wrapper chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 279px)', height: 'calc(100% - 279px)' }}>
+        <Header
+          className='header px-2 h-8 border-0 border-b border-neutral-200 border-solid '
+          style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%', background: 'white' }}>
+          <SearchForm onSubmit={handleSubmit} initialValues={formValues} />
+        </Header>
+        <Content style={{ maxHeight: 'calc(100vh - 279px)', height: 'calc(100vh - 279px)', minWidth: '360px' }}>
+          <ConversationsList />
+        </Content>
+      </Layout> */}
+    </div>
+  );
+};
+export default History;

src/views/mobile/SecondHeaderWrapper.jsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useEffect, useState } from 'react';
 import { NavLink, Outlet, Link, useNavigate } from 'react-router-dom';
 import { Layout, Button, Flex, theme } from 'antd';
-import { LeftOutlined, HomeOutlined } from '@ant-design/icons';
+import { LeftOutlined, HomeOutlined, FileSearchOutlined } from '@ant-design/icons';
 
 const { Content, Header } = Layout;
 const HeaderWrapper = ({ children, ...props }) => {
@@ -17,7 +17,10 @@ const HeaderWrapper = ({ children, ...props }) => {
           style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%', background: 'white' }}>
           <Flex justify={'space-between'} align={'center'}>
             <Button onClick={() => navigate(-1)} type='link' icon={<LeftOutlined />} />
-            <Button onClick={() => navigate('/', { replace: true })} type='link' icon={<HomeOutlined />} />
+            <Flex gap={8}>
+              {/* <Button onClick={() => navigate('/m/history', { replace: true })} type='link' icon={<FileSearchOutlined />} /> */}
+              <Button onClick={() => navigate('/', { replace: true })} type='link' icon={<HomeOutlined />} />
+            </Flex>
           </Flex>
         </Header>
         <Content className='' style={{ backgroundColor: colorBgContainer }}>