From ab3291f9e3371c9cffc14e1bd9279bcf5fa67a87 Mon Sep 17 00:00:00 2001 From: Jimmy Liow Date: Fri, 12 Jan 2024 15:46:25 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E8=81=8A=E5=A4=A9=E5=8E=86?= =?UTF-8?q?=E5=8F=B2=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main.jsx | 4 ++ src/stores/Auth.js | 2 + src/views/App.jsx | 30 +++----------- src/views/ChatHistory.jsx | 80 ++++++++++++++++++++++++++++++++++++ src/views/DingdingQRCode.jsx | 40 +++++++++--------- src/views/ErrorPage.jsx | 16 ++++++++ 6 files changed, 127 insertions(+), 45 deletions(-) create mode 100644 src/views/ChatHistory.jsx create mode 100644 src/views/ErrorPage.jsx diff --git a/src/main.jsx b/src/main.jsx index 18d31c8..36dee8d 100644 --- a/src/main.jsx +++ b/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: , + errorElement: , children: [ { index: true, element: }, ] @@ -36,6 +39,7 @@ const router = createBrowserRouter([ children: [ { index: true, element: }, { path: 'order/follow', element: }, + { path: 'chat/history', element: }, ] }, { diff --git a/src/stores/Auth.js b/src/stores/Auth.js index 14b4ff2..9669db0 100644 --- a/src/stores/Auth.js +++ b/src/stores/Auth.js @@ -12,6 +12,8 @@ class Auth { this.website = root.getSession(KEY_WEBSITE) } + + setup(userId, website) { runInAction(() => { this.userId = userId diff --git a/src/views/App.jsx b/src/views/App.jsx index eee4529..a0290cc 100644 --- a/src/views/App.jsx +++ b/src/views/App.jsx @@ -10,23 +10,6 @@ import { isEmpty } from '@/utils/commons' const { Header, Footer, Content } = Layout const { Title } = Typography -const items = [ - { - label: Change password, - key: "0", - }, - { - label: Profile, - key: "1", - }, - { - type: "divider", - }, - { - label: Logout, - 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: 订单跟踪 }, - { key: 'chat', label: 销售聊天 }, - { key: 'history', label: 聊天历史 }, - { key: 'management', label: 销售管理 } + { key: '/s/order/follow', label: 订单跟踪 }, + { key: '/s/order/chat', label: 销售聊天 }, + { key: '/s/chat/history', label: 聊天历史 }, + { key: '/s/sales/management', label: 销售管理 } ]} /> diff --git a/src/views/ChatHistory.jsx b/src/views/ChatHistory.jsx new file mode 100644 index 0000000..6bb498a --- /dev/null +++ b/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 ( + + + + + + + + {}} + /> + + + + + + ( + + } + title={{item.title}} + description={item.content} + /> + + )} + /> + + + ) +} + +export default observer(ChatHistory) diff --git a/src/views/DingdingQRCode.jsx b/src/views/DingdingQRCode.jsx index d42c7cb..c3cebcb 100644 --- a/src/views/DingdingQRCode.jsx +++ b/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 ( - 使用钉钉扫码 -
+ 使用钉钉扫码 +
) } diff --git a/src/views/ErrorPage.jsx b/src/views/ErrorPage.jsx new file mode 100644 index 0000000..a0ffe04 --- /dev/null +++ b/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 ( +
+

Oops!

+

Sorry, an unexpected error has occurred.

+

+ {errorResponse.error.message} +

+
+ ); +} \ No newline at end of file