开发移动端登录、会话、聊天界面

src/main.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { createBrowserRouter, RouterProvider, useNavigate } from 'react-router-dom'
 import { ThemeContext } from '@/stores/ThemeContext'
 import AuthApp from '@/views/AuthApp'
 import Standlone from '@/views/Standlone'
+import MobileApp from '@/views/MobileApp'
 import OrderFollow from '@/views/OrderFollow'
 import ChatHistory from '@/views/ChatHistory'
 import SalesManagement from '@/views/SalesManagement'
@@ -12,6 +13,8 @@ import DingdingCallback from '@/views/dingding/Callback'
 import AccountProfile from '@/views/AccountProfile'
 import ErrorPage from '@/components/ErrorPage'
 import Conversations from '@/views/Conversations/ChatWindow'
+import MobileConversation from '@/views/mobile/Conversation'
+import MobileChat from '@/views/mobile/Chat'
 import MobileLogin from '@/views/mobile/Login'
 import useAuthStore from '@/stores/AuthStore'
 import '@/assets/index.css'
@@ -39,13 +42,15 @@ const router = createBrowserRouter([
     children: [
       { path: 'dingding/qrcode', element: <DingdingQRCode /> },
       { path: 'dingding/callback', element: <DingdingCallback /> },
+      { path: 'mobile-login', element: <MobileLogin />},
     ],
   },
   {
     path: '/m',
-    element: <Standlone />,
+    element: <MobileApp />,
     children: [
-      { path: 'login', element: <MobileLogin /> },
+      { path: 'conversation', element: <MobileConversation /> },
+      { path: 'chat', element: <MobileChat /> },
     ],
   },
 ])

src/views/MobileApp.jsx

@@ -0,0 +1,68 @@
+import '@/assets/App.css'
+import AppLogo from '@/assets/logo-gh.png'
+import { useThemeContext } from '@/stores/ThemeContext'
+import useAuthStore from '@/stores/AuthStore'
+import { App as AntApp, Col, ConfigProvider, Empty, Layout, Row, Typography, theme, Space, Avatar } from 'antd'
+import { DownOutlined } from '@ant-design/icons'
+import { NavLink, Outlet } from 'react-router-dom'
+const { Header, Footer, Content } = Layout
+const { Title } = Typography
+
+function MobileApp() {
+
+  const {colorPrimary, borderRadius} = useThemeContext()
+  const loginUser = useAuthStore(state => state.loginUser)
+
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken()
+
+  function renderLayout() {
+    return (
+      <Layout>
+        <Header className='header' style={{ position: 'sticky', top: 0, zIndex: 1, width: '100%', background: 'white' }}>
+          <Row gutter={{ md: 24 }} align='middle'>
+            <Col flex="auto" style={{ color: "white", marginBottom: "0", display: "flex", justifyContent: "center" }}>
+              <NavLink to='/'>
+                <img src={AppLogo} className='logo' alt='App logo' />
+              </NavLink>
+              <Space><Avatar
+                      src={loginUser.avatarUrl}>{loginUser?.username?.substring(1)}</Avatar><span style={{ color: colorPrimary }}>{loginUser.username}</span><DownOutlined />​</Space>
+            </Col>
+          </Row>
+        </Header>
+        <Layout>
+          <Content
+            style={{
+              padding: 0,
+              margin: 0,
+              minHeight: 200,
+              background: colorBgContainer,
+            }}>
+            <Outlet />
+          </Content>
+        </Layout>
+        <Footer>桂林海纳国际旅行社有限公司</Footer>
+      </Layout>
+    )
+  }
+
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: colorPrimary,
+          borderRadius: borderRadius
+        },
+        algorithm: theme.defaultAlgorithm,
+      }}
+      renderEmpty={() => <Empty description={false} />}
+    >
+      <AntApp>
+        {renderLayout()}
+      </AntApp>
+    </ConfigProvider>
+  )
+}
+
+export default MobileApp

src/views/mobile/Chat.jsx

@@ -0,0 +1,68 @@
+import { memo, useCallback, useEffect, useRef, useState, forwardRef } from 'react';
+import { App, Avatar, List, Layout, Input, DatePicker, Button, Spin } from 'antd';
+import { ChatItem, MessageBox } from 'react-chat-elements';
+import { fetchConversationsList, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
+import { isEmpty } from '@/utils/utils';
+import useFormStore from '@/stores/FormStore';
+import { useShallow } from 'zustand/react/shallow';
+
+
+import { RightOutlined } from '@ant-design/icons'
+
+import { fetchSalesAgent, fetchCustomerList } from '@/actions/CommonActions';
+import SearchInput from '@/components/SearchInput';
+
+const { Sider, Content, Header, Footer } = Layout;
+const { TextArea } = Input
+const { RangePicker } = DatePicker;
+
+const data = [
+  {
+    title: 'Tyler Dru Kelly',
+    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
+    msgTime: 'Hi Nazly Parlindungan Siregar, this is Sharon , travel advisor of Asia Highlights. We got your inquiry for your trip toJapan  , are you available for a quick chat to discuss about your trip? I have some ideas to share with you . Looking forward to talking with you!',
+  },
+  {
+    title: 'Chhavi',
+    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
+    msgTime: 'Hi Sharon, thanks for reaching out. I am extremely busy person, please feel free to write down or send me any note and I will respond to you immediately. Cheers🙏',
+  },
+  {
+    title: 'Nathan Posey',
+    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
+    msgTime: 'It is too late to see cherry blossom from April 28, is it ok for you? For your 7 days tour, visit Tokyo and Kyoto is ok. I will suggest a tour with private car for you because your mother cannot walk too much.',
+  },
+]
+
+function Chat() {
+  const { notification } = App.useApp()
+  return (
+    <>
+      <List
+        itemLayout='horizontal'
+        dataSource={data}
+        renderItem={(item, index) => (
+          <List.Item>
+            <List.Item.Meta
+              avatar={<Avatar src={item.avatarUrl} />}
+              title={<a href='https://ant.design'>{item.title}</a>}
+              description={item.msgTime}
+            />
+          </List.Item>
+
+        )}
+      />
+      <TextArea rows={4} placeholder='聊天窗口' maxLength={2000} />
+      <Button type='primary' onClick={() => {
+          notification.info({
+            message: '温馨提示',
+            description: '功能还在开发中，敬请期待',
+            placement: 'top',
+            duration: 60,
+          })
+        }}>发送</Button>
+    </>
+  );
+}
+
+export default Chat

src/views/mobile/Conversation.jsx

@@ -0,0 +1,90 @@
+import { memo, useCallback, useEffect, useRef, useState, forwardRef } from 'react';
+import { Avatar, List, Button, Input, Layout, Select, DatePicker, Form, Spin } from 'antd';
+import { ChatItem, MessageBox } from 'react-chat-elements';
+import { fetchConversationsList, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
+import { isEmpty } from '@/utils/utils';
+import useFormStore from '@/stores/FormStore';
+import { useShallow } from 'zustand/react/shallow'
+import { useNavigate, useHref } from 'react-router-dom'
+
+
+import { RightOutlined } from '@ant-design/icons'
+
+import { fetchSalesAgent, fetchCustomerList } from '@/actions/CommonActions';
+import SearchInput from '@/components/SearchInput';
+
+const { Sider, Content, Header, Footer } = Layout;
+const { Search } = Input;
+const { RangePicker } = DatePicker;
+
+const data = [
+  {
+    title: 'Tyler Dru Kelly',
+    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
+    msgTime: '15127570944',
+  },
+  {
+    title: 'Chhavi',
+    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
+    msgTime: 'WLJ240311112',
+  },
+  {
+    title: 'Nathan Posey',
+    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
+    msgTime: 'WLJ240311114',
+  },
+  {
+    title: 'Philip',
+    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
+    msgTime: 'WLJ240312062',
+  },
+  {
+    title: 'Jeanne',
+    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
+    msgTime: 'H240313032',
+  },
+  {
+    title: 'Susan Puls',
+    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
+    msgTime: 'H240311213',
+  },
+  {
+    title: 'Ana Beatriz',
+    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
+    msgTime: 'H240312073',
+  },
+  {
+    title: 'Kathleen Anne Workman',
+    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
+    msgTime: 'HXY240104171',
+  },
+]
+
+function Login() {
+  const navigate = useNavigate()
+
+  return (
+    <>
+      <List
+        itemLayout='horizontal'
+        dataSource={data}
+        renderItem={(item, index) => (
+          <List.Item
+          onClick={() => {
+            navigate('/m/chat')}}
+          actions={[<RightOutlined key='goto' />]}
+          >
+            <List.Item.Meta
+              avatar={<Avatar src={item.avatarUrl} />}
+              title={<a href='https://ant.design'>{item.title}</a>}
+              description={item.msgTime}
+            />
+          </List.Item>
+
+        )}
+      />
+    </>
+  );
+}
+
+export default Login

src/views/mobile/Login.jsx

@@ -1,85 +1,22 @@
-import { memo, useCallback, useEffect, useRef, useState, forwardRef } from 'react';
+import { memo, useCallback, useEffect, useRef, useState, forwardRef } from 'react'
-import { Avatar, List, Button, Input, Layout, Select, DatePicker, Form, Spin } from 'antd';
+import { App, Avatar, List, Layout, Input, DatePicker, Flex, Result, Spin } from 'antd'
-import { ChatItem, MessageBox } from 'react-chat-elements';
-import { fetchConversationsList, fetchMessages, MESSAGE_PAGE_SIZE } from '@/actions/ConversationActions';
-import { isEmpty } from '@/utils/utils';
-import useFormStore from '@/stores/FormStore';
-import { useShallow } from 'zustand/react/shallow';
 
+function Chat() {
+  
+  window.location = 'https://login.dingtalk.com/oauth2/auth?redirect_uri=https%3A%2F%2Fsales.mycht.cn%2Fp%2Fdingding%2Fcallback&response_type=code&client_id=dingwgdx6emlxr3fcrg8&scope=openid&state=global-saels&prompt=consent'
 
-import { RightOutlined } from '@ant-design/icons'
-
-import { fetchSalesAgent, fetchCustomerList } from '@/actions/CommonActions';
-import SearchInput from '@/components/SearchInput';
-
-const { Sider, Content, Header, Footer } = Layout;
-const { Search } = Input;
-const { RangePicker } = DatePicker;
-
-const data = [
-  {
-    title: 'Tyler Dru Kelly',
-    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
-    msgTime: '15127570944',
-  },
-  {
-    title: 'Chhavi',
-    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
-    msgTime: 'WLJ240311112',
-  },
-  {
-    title: 'Nathan Posey',
-    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
-    msgTime: 'WLJ240311114',
-  },
-  {
-    title: 'Philip',
-    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
-    msgTime: 'WLJ240312062',
-  },
-  {
-    title: 'Jeanne',
-    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
-    msgTime: 'H240313032',
-  },
-  {
-    title: 'Susan Puls',
-    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
-    msgTime: 'H240311213',
-  },
-  {
-    title: 'Ana Beatriz',
-    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
-    msgTime: 'H240312073',
-  },
-  {
-    title: 'Kathleen Anne Workman',
-    avatarUrl: 'https://api.dicebear.com/7.x/miniavs/svg?seed=' + Math.random() * 10000,
-    msgTime: 'HXY240104171',
-  },
-]
-
-function Login() {
   return (
-    <>
+    <Flex justify='center' align='center' gap='middle' vertical>
-      <List
+      <Result
-        itemLayout='horizontal'
+        status='success'
-        dataSource={data}
+        title='欢迎使用'
-        renderItem={(item, index) => (
+        subTitle='正在跳转到钉钉登录页面'
-          <List.Item
+        extra={[
-          actions={[<RightOutlined key='goto' />]}
+          <Spin key='mobile-login' size='small' />
-          >
+        ]}
-            <List.Item.Meta
-              avatar={<Avatar src={item.avatarUrl} />}
-              title={<a href='https://ant.design'>{item.title}</a>}
-              description={item.msgTime}
-            />
-          </List.Item>
-
-        )}
       />
-    </>
+    </Flex>
   );
 }
 
-export default Login;
+export default Chat