制作移动端会话原型界面

src/main.jsx

@@ -12,6 +12,7 @@ import DingdingCallback from '@/views/dingding/Callback'
 import AccountProfile from '@/views/AccountProfile'
 import ErrorPage from '@/components/ErrorPage'
 import Conversations from '@/views/Conversations/ChatWindow'
+import MobileLogin from '@/views/mobile/Login'
 import useAuthStore from '@/stores/AuthStore'
 import '@/assets/index.css'
 
@@ -40,6 +41,13 @@ const router = createBrowserRouter([
       { path: 'dingding/callback', element: <DingdingCallback /> },
     ],
   },
+  {
+    path: '/m',
+    element: <Standlone />,
+    children: [
+      { path: 'login', element: <MobileLogin /> },
+    ],
+  },
 ])
 
 ReactDOM.createRoot(document.getElementById('root')).render(

src/views/Conversations/Components/CustomerProfile.jsx

@@ -1,5 +1,5 @@
 import { LinkOutlined, MailOutlined, PhoneOutlined, UserOutlined, WhatsAppOutlined } from '@ant-design/icons'
-import { Card, Flex, Select, Typography, Empty, Button } from 'antd'
+import { App, Card, Flex, Select, Typography, Empty, Button } from 'antd'
 import { useEffect } from 'react'
 import { useParams } from 'react-router-dom'
 
@@ -7,6 +7,7 @@ import useOrderStore from '@/stores/OrderStore'
 import QuotesHistory from './QuotesHistory'
 
 const CustomerProfile = (() => {
+  const { notification } = App.useApp()
   const { order_sn: order_sn } = useParams()
   const { orderDetail, customerDetail, lastQuotation, quotationList,
     fetchOrderDetail, setOrderPropValue
@@ -91,7 +92,14 @@ const CustomerProfile = (() => {
           </span>
         }
       >
-        <Button type='primary'>现在关联</Button>
+        <Button type='primary' onClick={() => {
+          notification.info({
+            message: '温馨提示',
+            description: '功能还在开发中，敬请期待',
+            placement: 'top',
+            duration: 60,
+          })
+        }}>现在关联</Button>
       </Empty>
     )
   }

src/views/OrderFollow.jsx

@@ -197,8 +197,8 @@ function OrderGroupTable({ formValues }) {
 
         return (          
           <Space>
-            {text}
             {statusIcon}
+            {text}
           </Space>
         )
       }
@@ -326,20 +326,10 @@ function OrderGroupTable({ formValues }) {
     whenTrue={<Tabs defaultActiveKey={0} items={collapseItems} />}
     whenFalse={<Empty />}
     />)
-
-  // return (<Collapse bordered={false} defaultActiveKey={0} items={collapseItems} />)
 }
 
 function OrderFollow() {
 
-  // const [advanceChecked, toggleAdvance] = useState(false)
-  // const [formValues, setFormValues] = useState({
-  //   type: 'today',
-  //   orderStatus: '新状态',
-  //   orderNumber: '订单号',
-  //   orderLabel: '订单标签',
-  //   startDate: '走团时间'
-  // })
   const [formValues, setFormValues] = useFormStore(useShallow((state) => [state.orderFollowForm, state.setOrderFollowForm]));
   const [advanceChecked, toggleAdvance] = useFormStore(useShallow((state) => [state.orderFollowAdvanceChecked, state.setOrderFollowAdvanceChecked]));
 

src/views/dingding/Callback.jsx

@@ -42,7 +42,7 @@ function Callback() {
       </Flex>
     )
   } else if (loginStatus === 302) {
-    navigate('/')
+    navigate('/m/login')
   } else if (loginStatus === 403) {
     return (
       <Flex justify='center' align='center' gap='middle' vertical>

src/views/mobile/Login.jsx

@@ -0,0 +1,85 @@
+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 { 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 (
+    <>
+      <List
+        itemLayout='horizontal'
+        dataSource={data}
+        renderItem={(item, index) => (
+          <List.Item
+          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;