功能：测试

babel.config.js

+module.exports = {
+  presets: ['next/babel'],
+  plugins: [['styled-components', { ssr: true }]],
+};

babel.config.json

-{
-    "presets": ["next/babel"],
-    "plugins": [
-      [
-        "styled-components",{ "ssr":true }
-      ]
-    ]
-  }

next.config.js

 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
-  compilerOptions: {
-    types: ['@types/styled-components'],
-    styledComponents: true,
-  },
-  styledComponents: {
-    fileName: false,
-    ssr: true,
+  // compilerOptions: {
+  //   types: ['@types/styled-components'],
+  //   styledComponents: true,
+  // },
+  // styledComponents: {
+  //   fileName: false,
+  //   ssr: true,
+  // },
+  compiler: {
+    // see https://styled-components.com/docs/tooling#babel-plugin for more info on the options.
+    styledComponents: {
+      ssr: true,
+      fileName: false,
+    },
   },
   redirects() {
     return [

package.json

@@ -30,7 +30,7 @@
     "env-cmd": "^10.1.0",
     "js-base64": "^3.7.5",
     "js-cookie": "^3.0.5",
-    "next": "14.0.1",
+    "next": "^14.0.4",
     "next-redux-wrapper": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -54,7 +54,7 @@
     "eslint": "^8",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-next": "14.0.1",
+    "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-unused-imports": "^3.0.0",

src/pages/order/comp/orderLsit/_index.tsx

+import React from 'react';
+import { Table } from 'antd';
+
+const OrderListTable = () => {
+  return (
+    <>
+      <Table
+        dataSource={[]}
+        columns={[
+          {
+            title: '姓名',
+            dataIndex: 'name',
+            key: 'name',
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+export default OrderListTable;

src/pages/order/index.tsx

+import React from 'react';
+import { ShopOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { Menu, MenuProps } from 'antd';
+import styled from 'styled-components';
+import BreadcrumbView from '@/components/breadcrumb';
+import LayoutView from '@/components/layout';
+import OrderListTable from '@/pages/order/comp/orderLsit/_index';
+
+type MenuItem = Required<MenuProps>['items'];
+
+const OrderListView = () => {
+  // 菜单栏点击事件
+  const handleMenuClick = (e: { key: string; keyPath: string[] }) => {
+    console.log(e);
+  };
+  // 菜单栏数据
+  const menuList: MenuItem = [
+    {
+      key: '1',
+      label: '全部订单',
+      icon: <UnorderedListOutlined />,
+      children: [
+        {
+          key: '11',
+          label: '商城订单',
+          icon: <ShopOutlined />,
+        },
+      ],
+    },
+  ];
+  return (
+    <LayoutView>
+      <OrderListWrap>
+        <BreadcrumbView />
+        <div className="flex w-full items-start justify-start pt-2">
+          <div className="select">
+            <Menu
+              mode="inline"
+              items={menuList}
+              defaultOpenKeys={['1']}
+              defaultSelectedKeys={['11']}
+              onClick={handleMenuClick}
+            />
+          </div>
+          <div className="list">
+            <OrderListTable />
+          </div>
+        </div>
+      </OrderListWrap>
+    </LayoutView>
+  );
+};
+
+export default OrderListView;
+// 样式
+const OrderListWrap = styled.div`
+  position: relative;
+  max-width: 1190px;
+  box-sizing: border-box;
+  padding: 2rem 0 0 0;
+  margin: 0 auto;
+  .select {
+    position: relative;
+    width: 15%;
+  }
+  .list {
+    position: relative;
+    width: 85%;
+  }
+`;