功能：onSelect改为onClick

src/assets/style/App.scss

@@ -11,7 +11,7 @@
     font-size: 14px;
   }
 
-  .ant-btn-link{
+  .ant-btn-link {
     padding: 0;
     font-size: 16px !important;
     font-weight: bold !important;
@@ -22,3 +22,27 @@
     }
   }
 }
+
+.ant-table-row:nth-child(odd) {
+  background: #FCFCFC;
+}
+
+.ant-table-row:nth-child(odd) > td {
+  background: #FCFCFC;
+}
+
+::-webkit-scrollbar {
+  background-color: transparent;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+  width: 7px;
+  height: 7px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #1677ff;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}

src/components/layout/menu/index.tsx

@@ -24,9 +24,10 @@ export function MenuView() {
   const onOpenChange: MenuProps['onOpenChange'] = (keys) => {
     setOpenKeys([keys[keys.length - 1]]);
   };
-  // 点击侧边栏事件
-  const onSelect: MenuProps['onSelect'] = (keys) => {
-    setSelectedKeys(keys.selectedKeys);
+  // 点击侧边栏事件 onSelect改为onClick
+  const onSelect: MenuProps['onClick'] = (keys) => {
+    setSelectedKeys([keys.key]);
+    // setSelectedKeys(keys.selectedKeys);
     const id = Number(keys.key);
     const current = GetRouteByID(id, routerList);
     // console.log(current?.path);
@@ -74,7 +75,7 @@ export function MenuView() {
       <Menu
         openKeys={openKeys}
         selectedKeys={selectedKeys}
-        onSelect={onSelect}
+        onClick={onSelect}
         onOpenChange={onOpenChange}
         mode='inline'
         items={items}

src/pages/orderManage/productOrder/detail/index.tsx

+import React, { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+function ProductOrderDetail() {
+  // 路由钩子
+  const location = useLocation();
+  // 接收参数
+  const { id } = location.state;
+  // componentDidMount
+  useEffect(() => {
+    console.log('拿到的id是 --->', id);
+  }, [id]);
+  return (
+    <div>
+      <h2>ProductOrderDetail</h2>
+      <h3>{id}</h3>
+    </div>
+  );
+}
+
+export default ProductOrderDetail;

src/pages/orderManage/productOrder/index.tsx

 import { useState } from 'react';
 import SearchBox from '~/components/search-box';
-import { Button } from 'antd';
+import { Button, Table } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import { useNavigate } from 'react-router-dom';
+
+// 表格数据类型
+type TableType = any;
 
 // 订单状态搜索列表
 const statusCodeButtonList = [
@@ -14,12 +19,105 @@ const statusCodeButtonList = [
 ];
 
 function ProductOrderView() {
+  // 路由钩子
+  const navigate = useNavigate();
   // 当前选择的是第几个按钮
   const [statusCodeButtonIndex, setStatusCodeButtonIndex] = useState<number>(0);
+  // 表格分页配置
+  const [pagination] = useState({
+    total: 0,
+    pageSize: 10,
+    current: 1,
+    totalPage: 0,
+  });
+  // 表格数据
+  const [tableData] = useState<TableType>([{ id: 1 }]);
   // 订单状态筛选
-  const statusChangeEvent = (index: number) => {
-    setStatusCodeButtonIndex(index);
+  const statusChangeEvent = (i: number) => {
+    console.log('订单状态筛选 --->', i);
+    setStatusCodeButtonIndex(i);
+  };
+  // 跳转订单详情
+  const handleDetail = (record: TableType[0]) => {
+    navigate(`/orderManage/productOrder/detail`, { state: { id: record.id } });
+    console.log('跳转订单详情 --->', record.id);
   };
+  // 表格结构
+  const columns: ColumnsType<TableType[0]> = [
+    {
+      title: '商品',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '单价(元)',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '数量',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '买家',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '订单状态',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '实收款',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '相关运营',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '推荐人',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '订单交期',
+      dataIndex: 'userName',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+      align: 'center',
+      render: (_text, _record) => `--`,
+    },
+    {
+      title: '操作',
+      dataIndex: 'action',
+      align: 'center',
+      fixed: 'right',
+      render: (_text, record) => (
+        <>
+          <Button type={'link'} onClick={() => handleDetail(record)}>
+            详情
+          </Button>
+        </>
+      ),
+    },
+  ];
   return (
     <>
       <SearchBox
@@ -68,6 +166,24 @@ function ProductOrderView() {
           </>
         }
       />
+      <Table
+        size='small'
+        dataSource={tableData}
+        columns={columns}
+        rowKey='id'
+        scroll={{ x: 1200 }}
+        pagination={{
+          total: pagination.total,
+          pageSize: pagination.pageSize,
+          current: pagination.current,
+          showSizeChanger: true,
+          showQuickJumper: true,
+          // onChange: (page: number, pageSize: number) =>
+          //   paginationChange(page, pageSize),
+          showTotal: (total, range) => `当前 ${range[0]}-${range[1]} 条记录 / 共 ${total} 条数据`,
+        }}
+        // rowSelection={{ selectedRowKeys, onChange: onSelectChange }}
+      />
     </>
   );
 }

src/router/router.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 import { Navigate, RouteObject } from 'react-router-dom';
 import ErrorPage from '~/pages/common/error';
 import LayoutView from '~/components/layout';
-import { AccountBookOutlined, MacCommandOutlined } from '@ant-design/icons';
+import {
+  AccountBookOutlined,
+  BarsOutlined,
+  MacCommandOutlined,
+  ShopOutlined,
+  CreditCardOutlined,
+  ShoppingOutlined,
+} from '@ant-design/icons';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import { AgnosticIndexRouteObject } from '@remix-run/router';
@@ -14,6 +21,7 @@ import PointDetailList from '~/pages/pointManage/pointDetail';
 import DivideOrder from '~/pages/pointManage/divideOrder';
 import DivideRules from '~/pages/pointManage/divideRules';
 import LoginView from '~/pages/common/login';
+import ProductOrderDetail from '~/pages/orderManage/productOrder/detail';
 
 const ProductOrderView = React.lazy(() => import('src/pages/orderManage/productOrder')); //销售订单
 const EquipmentOrderView = React.lazy(() => import('src/pages/orderManage/equipmentOrder')); //设备订单
@@ -53,7 +61,7 @@ export const routerList: Array<RouteObjectType> = [
     errorElement: <ErrorPage />,
     meta: {
       id: 10000,
-      icon: <MacCommandOutlined />,
+      icon: <BarsOutlined />,
       title: '订单管理',
     },
     children: [
@@ -63,7 +71,17 @@ export const routerList: Array<RouteObjectType> = [
         meta: {
           id: 10010,
           title: '商城订单',
-          icon: <MacCommandOutlined />,
+          icon: <ShoppingOutlined />,
+        },
+      },
+      {
+        path: '/orderManage/productOrder/detail',
+        element: withLoadingComponent(<ProductOrderDetail />),
+        meta: {
+          id: 10010,
+          title: '商城订单 / 详情',
+          icon: <ShoppingOutlined />,
+          hidden: true,
         },
       },
       {
@@ -72,7 +90,7 @@ export const routerList: Array<RouteObjectType> = [
         meta: {
           id: 10020,
           title: '租赁订单',
-          icon: <MacCommandOutlined />,
+          icon: <ShopOutlined />,
         },
       },
       {
@@ -81,7 +99,7 @@ export const routerList: Array<RouteObjectType> = [
         meta: {
           id: 10030,
           title: '服务订单',
-          icon: <MacCommandOutlined />,
+          icon: <CreditCardOutlined />,
         },
       },
     ],