增加聊天历史界面

src/main.jsx

@@ -10,8 +10,10 @@ import { StoreContext } from '@/stores/StoreContext'
 import App from '@/views/App'
 import Standlone from '@/views/Standlone'
 import OrderFollow from '@/views/OrderFollow'
+import ChatHistory from '@/views/ChatHistory'
 import DingdingQRCode from '@/views/DingdingQRCode'
 import DingdingCallbak from '@/views/DingdingCallbak'
+import ErrorPage from '@/views/ErrorPage'
 
 configure({
   useProxies: 'ifavailable',
@@ -26,6 +28,7 @@ const router = createBrowserRouter([
   {
     path: '/',
     element: <App />,
+    errorElement: <ErrorPage />,
     children: [      
       { index: true, element: <OrderFollow /> },
     ]
@@ -36,6 +39,7 @@ const router = createBrowserRouter([
     children: [      
       { index: true, element: <OrderFollow /> },
       { path: 'order/follow', element: <OrderFollow />},
+      { path: 'chat/history', element: <ChatHistory />},
     ]
   },
   {

src/stores/Auth.js

@@ -12,6 +12,8 @@ class Auth {
     this.website = root.getSession(KEY_WEBSITE)
   }
 
+  
+
   setup(userId, website) {
     runInAction(() => {
       this.userId = userId

src/views/App.jsx

@@ -10,23 +10,6 @@ import { isEmpty } from '@/utils/commons'
 const { Header, Footer, Content } = Layout
 const { Title } = Typography
 
-const items = [
-	{
-		label: <Link to="/account/change-password">Change password</Link>,
-		key: "0",
-	},
-	{
-		label: <Link to="/account/profile">Profile</Link>,
-		key: "1",
-	},
-	{
-		type: "divider",
-	},
-	{
-		label: <Link to="/login?out">Logout</Link>,
-		key: "3",
-	},
-];
 function App() {
 
   const href = useHref()
@@ -37,10 +20,7 @@ function App() {
 
   if (href !== '/') {
     const splitPath = href.split('/')
-
-    if (splitPath.length > 1) {
-      defaultPath = splitPath[2]
-    }
+    defaultPath = href
   }
   const {
     token: { colorBgContainer },
@@ -80,10 +60,10 @@ function App() {
                 mode='horizontal'
                 selectedKeys={[defaultPath]}
                 items={[
-                  { key: 'follow', label: <Link to='/order/follow'>订单跟踪</Link> },
-                  { key: 'chat', label: <Link to='/order/chat'>销售聊天</Link> },
-                  { key: 'history', label: <Link to='/chat/history'>聊天历史</Link> },
-                  { key: 'management', label: <Link to='/sales/management'>销售管理</Link> }
+                  { key: '/s/order/follow', label: <Link to='/s/order/follow'>订单跟踪</Link> },
+                  { key: '/s/order/chat', label: <Link to='/s/order/chat'>销售聊天</Link> },
+                  { key: '/s/chat/history', label: <Link to='/s/chat/history'>聊天历史</Link> },
+                  { key: '/s/sales/management', label: <Link to='/s/sales/management'>销售管理</Link> }
                 ]}
               />
             </Col>

src/views/ChatHistory.jsx

@@ -0,0 +1,80 @@
+import { useNavigate } from 'react-router-dom'
+import { useRef, useEffect, useState } from 'react'
+import { observer } from 'mobx-react'
+import { Row, Col, Divider, Table , Card, Button, Input, 
+  Space, Empty, Radio, Select, DatePicker, Spin, List, Avatar
+} from 'antd'
+import {
+  StarFilled, ZoomInOutlined, StarOutlined, SearchOutlined
+} from '@ant-design/icons'
+
+const { Search } = Input;
+const { RangePicker } = DatePicker;
+
+const data = [
+  {
+    title: 'Samantha Mohammed',
+    content: 'Travel by Japan'
+  },
+  {
+    title: 'Margarita',
+    content: 'Hello! This a a big trip for our family of 16 people (ages ranging from 1- adults)'
+  },
+  {
+    title: 'Vishnu',
+    content: 'FIRST TIME TRAVEL TO VIETNAM AND CAMBODIA WITHH STAY IN A CRUISING SHIP FOR 2 NIGHTS.'
+  },
+  {
+    title: 'Hailey',
+    content: 'Disregard my first email- I was using Siri and didn\'t realize all the typos. '
+  },
+];
+
+function ChatHistory() {
+  
+  useEffect(() => {
+  }, [])
+  
+  return (
+    <Spin spinning={false} delay={500}>
+      <Space direction='vertical' style={{ width: '100%' }}>
+        <Row gutter={[16, 16]} justify='start' align='middle'>
+        <Col span={6}>
+        <RangePicker />
+          </Col>
+        <Col span={6}>
+        <Search
+          placeholder="关键词"
+          allowClear
+          onSearch={()=>{}}
+        />
+          </Col>
+        </Row>
+      </Space>
+      <Divider plain orientation='left'></Divider>
+      <Space
+        direction='vertical'
+        size='middle'
+        style={{
+          display: 'flex',
+        }}
+      >
+        <List
+          itemLayout="horizontal"
+          dataSource={data}
+          renderItem={(item, index) => (
+            <List.Item>
+              <List.Item.Meta
+                avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
+                title={<a href="https://ant.design">{item.title}</a>}
+                description={item.content}
+              />
+            </List.Item>
+          )}
+        />
+      </Space>
+    </Spin>
+  )
+}
+
+export default observer(ChatHistory)

src/views/DingdingQRCode.jsx

@@ -4,36 +4,36 @@ import { Card, Typography, Flex, Button } from 'antd'
 const { Title } = Typography
 const { Meta } = Card
 
+// 钉钉扫码开发文档：https://open.dingtalk.com/document/orgapp/tutorial-obtaining-user-personal-information#title-qpi-0qv-anm
+
 function DingdingQRCode() {
 
   useEffect(() => {
     import('https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js').then((module) => {
-      console.info(module);
-
       window.DTFrameLogin(
         {
-            id: 'dingdingContainer',
-            width: 300,
-            height: 300,
+          id: 'dingdingContainer',
+          width: 300,
+          height: 300,
         },
         {
-            redirect_uri: encodeURIComponent('https://sales.mycht.cn/dingding/callback'),
-            client_id: 'dingwgdx6emlxr3fcrg8',
-            scope: 'openid',
-            response_type: 'code',
-            state: 'state1111',
-            prompt: 'consent',
+          redirect_uri: encodeURIComponent('https://sales.mycht.cn/dingding/callback'),
+          client_id: 'dingwgdx6emlxr3fcrg8',
+          scope: 'openid',
+          response_type: 'code',
+          state: 'state1111',
+          prompt: 'consent',
         },
         (loginResult) => {
-            const {redirectUrl, authCode, state} = loginResult;
-            // 这里可以直接进行重定向
-            window.location.href = redirectUrl;
-            // 也可以在不跳转页面的情况下，使用code进行授权
-            console.log(authCode);
+          const { redirectUrl, authCode, state } = loginResult;
+          // 这里可以直接进行重定向
+          window.location.href = redirectUrl;
+          // 也可以在不跳转页面的情况下，使用code进行授权
+          console.log(authCode);
         },
         (errorMsg) => {
-            // 这里一般需要展示登录失败的具体原因
-            alert(`Login Error: ${errorMsg}`);
+          // 这里一般需要展示登录失败的具体原因
+          alert(`Login Error: ${errorMsg}`);
         },
       )
     })
@@ -41,8 +41,8 @@ function DingdingQRCode() {
 
   return (
     <Flex justify='center' align='center' gap="middle" vertical>
-    <Title level={4}>使用钉钉扫码</Title>
-    <div id="dingdingContainer" style={{border: '1px solid rgba(5, 5, 5, 0.06)', borderRadius: '8px'}}></div>
+      <Title level={4}>使用钉钉扫码</Title>
+      <div id="dingdingContainer" style={{ border: '1px solid rgba(5, 5, 5, 0.06)', borderRadius: '8px' }}></div>
     </Flex>
   )
 }

src/views/ErrorPage.jsx

@@ -0,0 +1,16 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const errorResponse = useRouteError();
+  console.error(errorResponse);
+
+  return (
+    <div id="error-page">
+      <h1>Oops!</h1>
+      <p>Sorry, an unexpected error has occurred.</p>
+      <p>
+        <i>{errorResponse.error.message}</i>
+      </p>
+    </div>
+  );
+}