React项目: 商品列表基本搭建

15_React/day-7/code/my-app/src/layout/index.css

@@ -6,9 +6,11 @@
 }
 
 .layout aside {
-  width: 200px;
+  box-sizing: border-box;
 
-  padding: 10px;
+  width: 200px;
+  padding: 4px 0 4px 4px;
+  overflow: hidden;
 }
 
 .layout main {
@@ -29,7 +31,7 @@
 }
 
 .layout main header {
-  height: 60px;
+  height: 50px;
   background-color: burlywood;
 }
 
@@ -38,6 +40,12 @@
 }
 
 .ant-menu {
+  margin-top: 14px;
   box-sizing: border-box;
   height: 100%;
+  font-size: 12px;
+}
+
+aside .ant-btn {
+  margin-right: 4px;
 }

15_React/day-7/code/my-app/src/layout/index.jsx

@@ -1,18 +1,31 @@
 import './index.css';
 import { Outlet } from 'react-router-dom';
-import { Menu } from 'antd';
+import { Menu, Button } from 'antd';
 import { useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
 
 export default function Layout() {
   const items = useSelector(({ system }) => system.menus);
+  const navigate = useNavigate();
+  function selectMenu({ key }) {
+    navigate(key);
+  }
   return (
     <div className="layout">
       <aside>
+        <Button
+          type="primary"
+          ghost
+          style={{ width: 'calc(100% - 4px)', boxSizing: 'border-box' }}
+        >
+          导航菜单
+        </Button>
         <Menu
           defaultSelectedKeys={['1']}
           mode="inline"
           inlineCollapsed={false}
           items={items}
+          onClick={selectMenu}
         />
       </aside>
       <main>

15_React/day-7/code/my-app/src/pages/setting.jsx

@@ -0,0 +1,3 @@
+export default function Setting() {
+  return <h3>设置</h3>;
+}

15_React/day-7/code/my-app/src/pages/shop-list.css

@@ -0,0 +1,34 @@
+.shop-list {
+  width: 100%;
+}
+
+.shop-list .list-header {
+  display: flex;
+  flex-direction: column;
+}
+
+.shop-list .list-header > input {
+  height: 28px;
+  padding-left: 6px;
+  font-size: 16px;
+  width: 400px;
+}
+
+.shop-list .list-header > label {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.shop-list .list-content {
+  padding-top: 10px;
+}
+
+.shop-list .list-content table {
+  width: 400px;
+}
+
+.shop-list .list-content table th {
+  text-align: left;
+  font-size: 20px;
+}

15_React/day-7/code/my-app/src/pages/shop-list.jsx

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import './shop-list.css';
+
+const initialProducts = [
+  {
+    category: 'Sporting Goods',
+    price: '$49.99',
+    stocked: true,
+    name: 'Football',
+  },
+  {
+    category: 'Sporting Goods',
+    price: '$9.99',
+    stocked: true,
+    name: 'Baseball',
+  },
+  {
+    category: 'Sporting Goods',
+    price: '$29.99',
+    stocked: false,
+    name: 'Basketball',
+  },
+  {
+    category: 'Electronics',
+    price: '$99.99',
+    stocked: true,
+    name: 'iPod Touch',
+  },
+  {
+    category: 'Electronics',
+    price: '$399.99',
+    stocked: false,
+    name: 'iPhone 5',
+  },
+  { category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7' },
+];
+
+export default function ShopList() {
+  let [products] = useState(() => initialProducts);
+
+  return (
+    <div className="shop-list">
+      <h3 style={{ marginTop: '0' }}>商品列表</h3>
+      <div className="list-header">
+        <input type="text" placeholder="Search..." />
+        <label>
+          <input type="checkbox" />
+          仅显示在库商品
+        </label>
+      </div>
+      <div className="list-content">
+        <table>
+          <thead>
+            <tr>
+              <th>商品名称</th>
+              <th>商品价格</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th colSpan={2}>运动商品</th>
+            </tr>
+            <tr>
+              <td>篮球</td>
+              <td>$19.9</td>
+            </tr>
+            <tr>
+              <th colSpan={2}>电子商品</th>
+            </tr>
+            <tr>
+              <td>Iphone 14 pm</td>
+              <td>$1399.9</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

15_React/day-7/code/my-app/src/router/index.js

@@ -3,7 +3,15 @@ import Layout from '../layout';
 import { Suspense, lazy } from 'react';
 
 const Home = lazy(() => import('../pages/home'));
+const Setting = lazy(() => import('../pages/setting'));
+const ShopList = lazy(() => import('../pages/shop-list'));
+
 const fallbackEle = '加载中...';
+const withSuspense = (ComP) => (
+  <Suspense fallback={fallbackEle}>
+    <ComP />
+  </Suspense>
+);
 
 const router = createBrowserRouter([
   {
@@ -12,11 +20,15 @@ const router = createBrowserRouter([
     children: [
       {
         index: true,
-        element: (
-          <Suspense fallback={fallbackEle}>
-            <Home />
-          </Suspense>
-        ),
+        element: withSuspense(Home),
+      },
+      {
+        path: '/setting',
+        element: withSuspense(Setting),
+      },
+      {
+        path: '/shop-list',
+        element: withSuspense(ShopList),
       },
     ],
   },

15_React/day-7/code/my-app/src/store/slices/system.js

@@ -1,18 +1,31 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { HomeOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  HomeOutlined,
+  SettingOutlined,
+  TaobaoCircleOutlined,
+} from '@ant-design/icons';
 
 export const systemSlice = createSlice({
   name: 'loader',
   initialState: {
     menus: [
       {
-        key: 1,
+        id: 1,
+        key: '/',
         label: '主页',
         title: '主页',
         icon: <HomeOutlined />,
       },
       {
-        key: 2,
+        id: 1,
+        key: '/shop-list',
+        label: '商品列表',
+        title: '商品列表',
+        icon: <TaobaoCircleOutlined />,
+      },
+      {
+        id: 3,
+        key: '/setting',
         label: '设置',
         title: '设置',
         icon: <SettingOutlined />,