错误界面增加异常信息；去掉 /s 路由，增加 /p 路由

src/components/ErrorBoundary.jsx

@@ -9,13 +9,13 @@ import { Result } from 'antd'
 class ErrorBoundary extends PureComponent {
   constructor(props) {
     super(props);
-    this.state = { hasError: false }
+    this.state = { hasError: false, info: '' }
   }
 
   componentDidCatch(error, info) {
     console.error('Sorry, Something went wrong.')
     console.error(error)
-    this.setState({ hasError: true })
+    this.setState({ hasError: true, info: error.message })
   }
 
   render() {
@@ -23,7 +23,7 @@ class ErrorBoundary extends PureComponent {
       return <Result
         status='500'
         title='Sorry, Something went wrong.'
-        subTitle='...'
+        subTitle={this.state.info}
       />
     }
     return this.props.children

src/main.jsx

@@ -32,13 +32,6 @@ const router = createBrowserRouter([
     path: '/',
     element: <App />,
     errorElement: <ErrorPage />,
-    children: [      
-      { index: true, element: <OrderFollow /> },
-    ]
-  },
-  {
-    path: '/s',
-    element: <App />,
     children: [      
       { index: true, element: <OrderFollow /> },
       { path: 'order/follow', element: <OrderFollow />},
@@ -48,10 +41,11 @@ const router = createBrowserRouter([
     ]
   },
   {
+    path: '/p',
     element: <Standlone />,
     children: [
-      { path: '/dingding/qrcode', element: <DingdingQRCode /> },
+      { path: 'dingding/qrcode', element: <DingdingQRCode /> },
-      { path: '/dingding/callback', element: <DingdingCallbak /> },
+      { path: 'dingding/callback', element: <DingdingCallbak /> },
     ]
   }
 ])

src/views/App.jsx

@@ -1,24 +1,27 @@
-import { Outlet, Link, useHref, NavLink } from 'react-router-dom'
+import { Outlet, Link, useHref, NavLink } from 'react-router-dom';
-import { useRef, useEffect, useState } from 'react'
+import { Layout, Menu, ConfigProvider, theme, Empty, Row, Col, Dropdown, Space, Typography, App as AntApp } from 'antd';
-import { Layout, Menu, ConfigProvider, theme, Empty, Row, Col, Dropdown, Space, Typography, Result, Select, App as AntApp } from 'antd'
 import { DownOutlined } from '@ant-design/icons';
 import ErrorBoundary from '@/components/ErrorBoundary';
 import zhLocale from 'antd/locale/zh_CN';
-import { useThemeContext } from '@/stores/ThemeContext'
+import { useThemeContext } from '@/stores/ThemeContext';
+import { useAuthContext } from '@/stores/AuthContext'
 import 'dayjs/locale/zh-cn';
 
-import '@/assets/App.css'
+import '@/assets/App.css';
-import AppLogo from '@/assets/logo-gh.png'
+import AppLogo from '@/assets/logo-gh.png';
-import { isEmpty } from '@/utils/commons'
+import { isEmpty } from '@/utils/commons';
 
 const { Header, Footer, Content } = Layout
 const { Title } = Typography
 
+// SecurityApp
 function App() {
 
-  const {colorPrimary, borderRadius} = useThemeContext()
+  const { colorPrimary, borderRadius } = useThemeContext()
+  const { loginUser, permissionList } = useAuthContext()
   const href = useHref()
-  //const shouldBeLogin = (isEmpty(userId) || isEmpty(website)) && (href.indexOf('/authorise/') == -1)
+  // 除了路由 /p...以外都需要登陆系统
+  const shouldBeLogin = isEmpty(loginUser) && (href.indexOf('/p/') == -1)
   let defaultPath = 'follow'
 
   if (href !== '/') {
@@ -29,93 +32,6 @@ function App() {
     token: { colorBgContainer },
   } = theme.useToken()
 
-  function globalEmpty() {
-    return (
-      <Empty description={false} />
-    )
-  }
-
-  function renderLogin() {
-    return (
-      <Result
-        status='403'
-        title='授权失败'
-        subTitle='请登陆信息平台，通过指定链接打开。'
-      />
-    )
-  }
-
-  function renderLayout() {
-    return (
-      <Layout>
-        <Header className='header' style={{ position: 'sticky', top: 0, zIndex: 2, width: '100%', background: 'white' }}>
-          <Row gutter={{ md: 24 }} align='middle'>
-            <Col flex='300px'>
-              <NavLink to='/'>
-                <img src={AppLogo} className='logo' alt='App logo' />
-              </NavLink>
-              <Title level={3}>
-                聊天式销售平台
-              </Title>
-            </Col>
-            <Col span={10}>
-              <Menu
-                mode='horizontal'
-                selectedKeys={[defaultPath]}
-                items={[
-                  { 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>
-            <Col flex='auto' style={{ color: 'white', marginBottom: '0', display: 'flex', justifyContent: 'end' }}>
-              <Dropdown
-                menu={{
-                  items: [
-                    {
-                      label: <Link to='/s/account/profile'>个人资料</Link>,
-                      key: '1',
-                    },
-                    {
-                      type: 'divider',
-                    },
-                    {
-                      label: <Link to='/login?out'>退出</Link>,
-                      key: '3',
-                    },
-                  ]
-                }}
-                trigger={['click']}
-              >
-                <a onClick={(e) => e.preventDefault()} style={{color: colorPrimary}}>
-                  <Space>
-                    廖一军
-                    <DownOutlined />
-                  </Space>
-                </a>
-              </Dropdown>
-
-            </Col>
-          </Row>
-        </Header>
-        <Layout>
-          <Content
-            style={{
-              padding: 24,
-              margin: 0,
-              minHeight: 280,
-              background: colorBgContainer,
-            }}>
-            <Outlet />
-          </Content>
-        </Layout>
-        <Footer>桂林海纳国际旅行社有限公司</Footer>
-      </Layout>
-    )
-  }
-
   return (
     <ConfigProvider
       theme={{
@@ -126,12 +42,77 @@ function App() {
         algorithm: theme.defaultAlgorithm,
       }}
       locale={zhLocale}
-      renderEmpty={globalEmpty}
+      renderEmpty={() => <Empty description={false} />}
     >
       <AntApp>
-      <ErrorBoundary>
+        <ErrorBoundary>
-        {renderLayout()}
+          <Layout>
-      </ErrorBoundary>
+            <Header className='header' style={{ position: 'sticky', top: 0, zIndex: 2, width: '100%', background: 'white' }}>
+              <Row gutter={{ md: 24 }} align='middle'>
+                <Col flex='300px'>
+                  <NavLink to='/'>
+                    <img src={AppLogo} className='logo' alt='App logo' />
+                  </NavLink>
+                  <Title level={3}>
+                    聊天式销售平台
+                  </Title>
+                </Col>
+                <Col span={10}>
+                  <Menu
+                    mode='horizontal'
+                    selectedKeys={[defaultPath]}
+                    items={[
+                      { key: '/order/follow', label: <Link to='/order/follow'>订单跟踪</Link> },
+                      { key: '/order/chat', label: <Link to='/order/chat'>销售聊天</Link> },
+                      { key: '/chat/history', label: <Link to='/chat/history'>聊天历史</Link> },
+                      { key: '/sales/management', label: <Link to='/sales/management'>销售管理</Link> }
+                    ]}
+                  />
+                </Col>
+                <Col flex='auto' style={{ color: 'white', marginBottom: '0', display: 'flex', justifyContent: 'end' }}>
+                  <Dropdown
+                    menu={{
+                      items: [
+                        {
+                          label: <Link to='/account/profile'>个人资料</Link>,
+                          key: '1',
+                        },
+                        {
+                          type: 'divider',
+                        },
+                        {
+                          label: <Link to='/login?out'>退出</Link>,
+                          key: '3',
+                        },
+                      ]
+                    }}
+                    trigger={['click']}
+                  >
+                    <a onClick={(e) => e.preventDefault()} style={{ color: colorPrimary }}>
+                      <Space>
+                        廖一军
+                        <DownOutlined />
+                      </Space>
+                    </a>
+                  </Dropdown>
+
+                </Col>
+              </Row>
+            </Header>
+            <Layout>
+              <Content
+                style={{
+                  padding: 24,
+                  margin: 0,
+                  minHeight: 280,
+                  background: colorBgContainer,
+                }}>
+                <Outlet />
+              </Content>
+            </Layout>
+            <Footer>桂林海纳国际旅行社有限公司</Footer>
+          </Layout>
+        </ErrorBoundary>
       </AntApp>
     </ConfigProvider>
   )

src/views/ChatHistory.jsx

@@ -1,6 +1,5 @@
 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, AutoComplete, DatePicker, Spin, List, Avatar
 } from 'antd'
@@ -92,4 +91,4 @@ function ChatHistory() {
   )
 }
 
-export default observer(ChatHistory)
+export default ChatHistory

src/views/DingdingCallbak.jsx

@@ -6,7 +6,7 @@ import { useRequest } from 'ahooks'
 const { Title } = Typography
 const { Meta } = Card
 
-import { useAuthContext } from '@/stores/AuthContext.js'
+import { useAuthContext } from '@/stores/AuthContext'
 
 function DingdingCallbak() {
 

src/views/SalesManagement.jsx

@@ -1,6 +1,5 @@
 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'
@@ -140,4 +139,4 @@ function SalesManagement() {
   )
 }
 
-export default observer(SalesManagement)
+export default SalesManagement

src/views/Standlone.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 Standlone() {
 
   const {colorPrimary, borderRadius} = useThemeContext()
@@ -35,22 +18,6 @@ function Standlone() {
     token: { colorBgContainer },
   } = theme.useToken()
 
-  function globalEmpty() {
-    return (
-      <Empty description={false} />
-    )
-  }
-
-  function renderLogin() {
-    return (
-      <Result
-        status='403'
-        title='授权失败'
-        subTitle='请登陆信息平台，通过指定链接打开。'
-      />
-    )
-  }
-
   function renderLayout() {
     return (
       <Layout>
@@ -91,7 +58,7 @@ function Standlone() {
         },
         algorithm: theme.defaultAlgorithm,
       }}
-      renderEmpty={globalEmpty}
+      renderEmpty={() => <Empty description={false} />}
     >
       <AntApp>
         {renderLayout()}