Global-sales/src/views/AuthApp.jsx

import { useEffect } from 'react';
import { Outlet, Link, useHref, useNavigate, NavLink } from 'react-router-dom'
import { Layout, Menu, ConfigProvider, theme, Empty, Row, Col, Avatar, Dropdown, Space, Typography, 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 { useAuthContext } from '@/stores/AuthContext'
import useConversationStore from '@/stores/ConversationStore'
import useAuthStore from '@/stores/AuthStore'
import 'dayjs/locale/zh-cn'

import 'react-chat-elements/dist/main.css'
import '@/assets/App.css'
import AppLogo from '@/assets/logo-gh.png'

const { Header, Footer, Content } = Layout
const { Title } = Typography

function AuthApp() {

  const navigate = useNavigate()

  const { colorPrimary, borderRadius } = useThemeContext()
  const { loadUser } = useAuthStore()

  const loginUser = loadUser()

  const href = useHref()

  useEffect(() => {
    // 除了路由 /p...以外都需要登陆系统
    if ((loginUser.userId === 0) && (href.indexOf('/p/') == -1)) {
      navigate('/p/dingding/qrcode');
    }
	}, [href])

  const userId = loginUser.userId

  useEffect(() => {
    if (userId) {
      useConversationStore.getState().connectWebsocket(userId);
      useConversationStore.getState().fetchInitialData(userId);
    }
    return () => {
      //useConversationStore.getState().disconnectWebsocket();
    }
  }, [userId])

  let defaultPath = 'follow'

  if (href !== '/') {
    const splitPath = href.split('/')
    defaultPath = href
  }

  const {
    token: { colorBgContainer },
  } = theme.useToken()

  return (
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: colorPrimary,
          borderRadius: borderRadius
        },
        algorithm: theme.defaultAlgorithm,
      }}
      locale={zhLocale}
      renderEmpty={() => <Empty description={false} />}
    >
      <AntApp>
        <ErrorBoundary>
          <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: '/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> },
                    ]}
                  />
                </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='/p/dingding/qrcode?out'>退出</Link>,
                          key: '3',
                        },
                      ]
                    }}
                    trigger={['click']}
                  >
                    <a onClick={(e) => e.preventDefault()} style={{ color: colorPrimary }}>
                      <Space><Avatar
                      style={{
                        backgroundColor: colorPrimary,
                      }}
                      src={loginUser.avatarUrl}>{loginUser.username.substring(1)}</Avatar>{loginUser.username}<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>
  )
}

export default AuthApp