dashboard/src/App.jsx

import './App.css';
import React, { useContext, useState } from 'react';
import Icon, {
  HomeOutlined,
  TeamOutlined,
  DashboardOutlined,
  FileProtectOutlined,
  CustomerServiceTwoTone,
  SnippetsTwoTone,
  DollarOutlined,
  AreaChartOutlined,
  WechatOutlined,
  UserOutlined,
  FlagOutlined,
  PieChartOutlined,
  BarChartOutlined,
  CoffeeOutlined, DesktopOutlined,
  WhatsAppOutlined
} from '@ant-design/icons';
import { Layout, Menu, Image, Badge, Button } 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 Meeting2024GH from './views/Meeting2024-GH';
import Meeting2025GH from './views/Meeting2025-GH';
import SalesCustomerCareRegular from './views/SalesCustomerCareRegular';
import { stores_Context, APP_VERSION } from './config';
import { WaterMark } from '@ant-design/pro-components';
import CooperationIcon from './components/icons/CooperationIcon';
import OPDashboard from './views/OPDashboard';
import OPProcess from './views/OPProcess';
import OPRisk from './views/OPRisk';
import Cruise from './views/Cruise';
import Hotel from './views/Hotel';

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: 'mixed',
      label: '报告',
      icon: <DesktopOutlined />,
      children: [
        {
          key: 'meeting-2025-GH',
          label: <NavLink to="/orders/meeting-2025-GH">GH例会数据-2025</NavLink>, // GH例会数据-2024
        },
        {
          key: 'meeting-2024-GH',
          label: <NavLink to="/orders/meeting-2024-GH">GH区域数据</NavLink>, // GH例会数据-2024
        },
      ]
    },
    {
      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>,
        },
      ],
    },
    {
      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: 'customer_care_regular_sales', label: <NavLink to="/customer_care_regular_sales">销售-老客户</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: <CooperationIcon/>,
      children: [
        {
          key: 61,
          label: <NavLink to="/agent/group/count">地接社接团</NavLink>,
        },
        {
          key: 62,
          label: <NavLink to="/destination/group/count">目的地接团</NavLink>,
        },
        { key: 'cruise', label: <NavLink to="/cruise">三峡游船</NavLink> },
        { key: 'hotel', label: <NavLink to="/hotel">酒店</NavLink> },
      ],
    },
    {
      key: 'crm',
      label: '销售平台',
      icon: <WhatsAppOutlined />,
      children: [
        // { key: 'xx', type: 'divider' },
        { key: 'op_dashboard', label: <NavLink to="/op_dashboard">结果</NavLink> },
        { key: 'op_process', label: <NavLink to="/op_process">过程</NavLink> },
        // { key: 'op_risk', label: <NavLink to="/op_risk">提升</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();
    // window.$pageSpy.render();
    window.$pageSpy.triggerPlugins('onOfflineLog', 'upload');
    window.$pageSpy.triggerPlugins('onOfflineLog', 'download');
  };
  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 path="/orders/meeting-2024-GH" element={<Meeting2024GH />} />
                    <Route path="/orders/meeting-2025-GH" element={<Meeting2025GH />} />
                  </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_regular_sales" element={<SalesCustomerCareRegular />} />
                    <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 path="/cruise" element={<Cruise />} />
                    <Route path="/hotel" element={<Hotel />} />
                    </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 path="/op_dashboard" element={<OPDashboard />} />
                    <Route path="/op_process" element={<OPProcess />} />
                    <Route path="/op_risk" element={<OPRisk />} />
                  </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 > Created by IT</span>
                {window.$pageSpy && <Button type='link' onClick={callDebug}>上传/下载debug日志({window.$pageSpy.address.substring(0, 4)})</Button>}
              </Footer>
            </Layout>
          </Layout>
        </WaterMark>
      </WaterMark>
    </BrowserRouter>
  );
};

export default observer(App);