dashboard/src/App.jsx

import './App.css';
import React, { useContext, useState } from 'react';
import {
  HomeOutlined,
  TeamOutlined,
  DashboardOutlined,
  FileProtectOutlined,
  CustomerServiceTwoTone,
  SnippetsTwoTone,
  DollarOutlined,
  AreaChartOutlined,
  WechatOutlined,
  UserOutlined,
  FlagOutlined,
  PieChartOutlined,
  BarChartOutlined,
  CoffeeOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Image, Badge, } from 'antd';
import { BrowserRouter, Route, Routes, NavLink } from 'react-router-dom';
import Home from './views/Home';
import Dashboard from './views/Dashboard';
import Orders from './views/Orders';
import Orders_sub from './views/Orders_sub';
import ProtectedRoute from './views/ProtectedRoute';
import Customer_care_inchina from './charts/Customer_care_inchina';
import Customer_care_potential from './charts/Customer_care_potential';
import Customer_care_regular from './charts/Customer_care_regular';
import Wechat_session from './charts/Wechat_session';
import WhatsApp_session from './charts/WhatsApp_session';
import AgentGroupCount from './views/AgentGroupCount';
import AgentGroupList from './views/AgentGroupList';
import DestinationGroupCount from './views/DestinationGroupCount';
import DestinationGroupList from './views/DestinationGroupList';
import Credit_card_bill from './views/Credit_card_bill';
import Sale from './views/Sale';
import Sale_sub from './views/Sale_sub';
import Sale_KPI from './views/Sale_KPI';
// import Logo from './logo.png';
import { observer } from 'mobx-react';
import ExchangeRate from './charts/ExchangeRate';
import KPI from './views/KPI';
import Distribution from './views/Distribution';
import Detail from './views/Detail';
import ServicePersonNum from './views/ServicePersonNum';
import DataPivot from './views/DataPivot';
import Welcome from './views/Welcome';
import { stores_Context, APP_VERSION } from './config';
import { WaterMark } from '@ant-design/pro-components';

const App = () => {
  const { Content, Footer, Sider, } = Layout;
  const { auth_store, date_picker_store } = useContext(stores_Context);

  const [collapsed, setCollapsed] = useState(false);

  const menu_items = [
    { key: 1, label: <NavLink to="/">欢迎</NavLink>, icon: <CoffeeOutlined /> },
    { key: 'annual', label: <NavLink to="/annual">综合看板</NavLink>, icon: <DashboardOutlined /> },
    {
      key: 2,
      label: '市场',
      icon: <AreaChartOutlined />,
      children: [
        {
          key: 21,
          label: <NavLink to="/orders">订单数据</NavLink>,
          // icon: <FileProtectOutlined />,
        },
        {
          key: 22,
          label: <NavLink to="/dashboard">仪表盘</NavLink>,
          // icon: <DashboardOutlined />,
        },
        {
          key: 'orders-pivot',
          label: <NavLink to="/orders/pivot">数据透视</NavLink>,
          // icon: <DashboardOutlined />,
        },
      ],
    },
    {
      key: 5,
      label: '销售',
      icon: <SnippetsTwoTone />,
      children: [
        { key: 51, label: <NavLink to="/sale">业绩数据</NavLink> },
        { key: 52, label: <NavLink to="/sale_kpi">销售进度</NavLink> },
        { key: 'distribution', label: <NavLink to="/distribution">统计分布</NavLink> },
        { key: 'trade-pivot', label: <NavLink to="/trade/pivot">数据透视</NavLink> },
      ],
    },
    {
      key: 3,
      label: '客运',
      icon: <WechatOutlined />,
      children: [
        {
          key: 31,
          label: <NavLink to="/customer_care_potential">潜力客户</NavLink>,
        },
        {
          key: 32,
          label: <NavLink to="/customer_care_regular">老客户</NavLink>,
        },
        {
          key: 33,
          label: <NavLink to="/customer_care_inchina">在华客户</NavLink>,
        },
      ],
    },
    {
      key: 4,
      label: '财务',
      icon: <DollarOutlined />,
      children: [
        {
          key: 41,
          label: <NavLink to="/credit_card_bill">信用卡账单</NavLink>,
        },
        { key: 42, label: <NavLink to="/exchange_rate">汇率</NavLink> },
        { key: 'service_person_num', label: <NavLink to="/service_person_num">服务人数</NavLink> },
      ],
    },
    {
      key: 6,
      label: '客服',
      icon: <WechatOutlined />,
      children: [
        {
          key: 61,
          label: <NavLink to="/agent/group/count">地接社接团</NavLink>,
        },
        {
          key: 62,
          label: <NavLink to="/destination/group/count">目的地接团</NavLink>,
        },
      ],
    },
    { key: 'kpi', label: <NavLink to="/kpi">目标配置</NavLink>, icon: <FlagOutlined /> },
    // {
    //   key: 'detail',
    //   label: (
    //     <NavLink to="/detail">
    //       <Badge.Ribbon text="Beta">统计分析</Badge.Ribbon>
    //     </NavLink>
    //   ),
    //   icon: <BarChartOutlined />,
    // },
  ];

  const callDebug = () => {
    const vConsole = new window.VConsole({ theme: 'dark' });
    auth_store.get_auth();
  };
  return (
    <BrowserRouter>
      <WaterMark content={['HT统计']} gapY={100} gapX={100} rotate={-20} offsetLeft={150} offsetTop={150} fontColor="rgba(0,0,0,.06)" zIndex={20}>
        <WaterMark content={[auth_store.user.name, auth_store.user.userid.slice(-4)]} gapY={100} gapX={100} rotate={-20} fontColor="rgba(0,0,0,.08)" zIndex={20}>
          <Layout
            hasSider
            style={{
              minHeight: '100vh',
            }}
          >
            <Sider
              collapsible={true}
              breakpoint="lg"
              collapsedWidth="0"
              collapsed={collapsed}
              style={{
                // overflow: 'auto',
                height: '100vh',
                position: 'sticky',
                left: 0,
                top: 0,
                bottom: 0,
                zIndex: 999,
              }}
              zeroWidthTriggerStyle={collapsed ? { zIndex: 90, bottom: '64px', top: '3px', left: 'unset', right: '-34px' } : { bottom: '64px', top: '3px', left: 'unset', right: 0 }}
              onBreakpoint={(broken) => {
                date_picker_store.setSiderBroken(broken);
              }}
              onCollapse={(collapsed, type) => {
                setCollapsed(collapsed);
              }}
            >
              {/* <Image src={Logo} preview={false} /> */}
              <Menu theme="dark" defaultSelectedKeys={['1']} defaultOpenKeys={[]} mode="inline" items={menu_items} onClick={() => date_picker_store.siderBroken ? setCollapsed(!collapsed) : false} />
            </Sider>

            <Layout className="site-layout">
              <Content
                style={{
                  padding: 16,
                  minHeight: 480,
                }}
              >
                <Routes>
                  <Route path="/" element={<Welcome />} />
                  <Route path="/detail" element={<Detail />} />
                  <Route element={<ProtectedRoute auth={['admin', 'director_bu']} />}>
                    <Route path="/annual" element={<Home />} />
                    <Route path="/kpi" element={<KPI />} />
                  </Route>
                  <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'marketing']} />}>
                    <Route path="/orders" element={<Orders />} />
                    <Route path="/orders_sub/:ordertype/:ordertype_sub/:ordertype_title" element={<Orders_sub />} />
                    <Route path="/dashboard" element={<Dashboard />} />
                    <Route path="/:page/pivot" element={<DataPivot />} />
                  </Route>
                  <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'customer_care']} />}>
                    <Route path="/customer_care_inchina" element={<Customer_care_inchina />} />
                    <Route path="/customer_care_regular" element={<Customer_care_regular />} />
                    <Route path="/customer_care_potential" element={<Customer_care_potential />} />
                    <Route path="/whatsapp_session" element={<WhatsApp_session />} />
                    <Route path="/wechat_session" element={<Wechat_session />} />
                    <Route path="/agent/group/count" element={<AgentGroupCount />} />
                    <Route path="/destination/group/count" element={<DestinationGroupCount />} />
                    <Route path="/agent/:agentId/group/list" element={<AgentGroupList />} />
                    <Route path="/destination/:destinationId/group/list" element={<DestinationGroupList />} />
                  </Route>
                  <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'financial']} />}>
                    <Route path="/credit_card_bill" element={<Credit_card_bill />} />
                    <Route path="/exchange_rate" element={<ExchangeRate />} />
                    <Route path="/service_person_num" element={<ServicePersonNum />} />
                  </Route>
                  <Route element={<ProtectedRoute auth={['admin', 'director_bu', 'sale']} />}>
                    <Route path="/sale" element={<Sale />} />
                    <Route path="/sale_sub/:type_sub" element={<Sale_sub />} />
                    <Route path="/sale_kpi" element={<Sale_KPI />} />
                    <Route path="/distribution" element={<Distribution />} />
                    <Route path="/:page/pivot" element={<DataPivot />} />
                  </Route>
                </Routes>
              </Content>
              <Footer
                style={{
                  textAlign: 'center',
                }}
              >
                <UserOutlined /> {auth_store.user.name} ({auth_store.user.userid})
                <br />
                Hainatravel Dashboard{' '}
                <span>
                  v<span>{APP_VERSION}</span>{' '}
                </span>{' '}
                ©2022 <span onClick={callDebug}> Created by IT</span>
              </Footer>
            </Layout>
          </Layout>
        </WaterMark>
      </WaterMark>
    </BrowserRouter>
  );
};

export default observer(App);