PageHeader组件封装

20_React.js_VIP22/day-9/code/react-project-demo/src/Layout/index.jsx

@@ -5,6 +5,7 @@ import {
   HomeOutlined,
   EllipsisOutlined,
   ProfileOutlined,
+  UnorderedListOutlined,
 } from '@ant-design/icons';
 
 import './index.scss';
@@ -53,6 +54,12 @@ function LayoutAdmin() {
       label: <Link to="/goods/list">商品列表</Link>,
       url: '/goods/list',
     },
+    {
+      key: '04',
+      icon: <UnorderedListOutlined />,
+      label: <Link to="/todo/list">代办列表</Link>,
+      url: '/todo/list',
+    },
   ]);
 
   let { pathname } = useLocation();

20_React.js_VIP22/day-9/code/react-project-demo/src/api/goods.js

@@ -2,6 +2,6 @@
 import http from '../utils/http';
 
 export function getAllGoods() {
-  console.log(http);
+  // console.log(http);
   return http.get('/goods/list');
 }

20_React.js_VIP22/day-9/code/react-project-demo/src/components/PageHeader.jsx

@@ -0,0 +1,44 @@
+import { PlusOutlined, LeftOutlined } from '@ant-design/icons';
+import './PageHeader.scss';
+import { Space, Tooltip } from 'antd';
+import { useNavigate } from 'react-router-dom';
+
+function PageHeader({ children, addRoute }) {
+  let navigate = useNavigate();
+  return (
+    <div className="page-header">
+      <div className="header-left">
+        <Space size={8}>
+          <Tooltip title="返回">
+            <LeftOutlined
+              title="返回"
+              onClick={() => {
+                navigate(-1);
+              }}
+            />
+          </Tooltip>
+          <span>{children}</span>
+        </Space>
+      </div>
+      {/* 如果没有指定addRoute属性 则不显示新增按钮 */}
+      {addRoute && (
+        <div className="header-right">
+          <Tooltip title="新增">
+            <PlusOutlined
+              title="新增"
+              onClick={() => {
+                let t = typeof addRoute;
+                // 简单验证addRoute的类型
+                if (t == 'string' || (t == 'object' && t.path)) {
+                  navigate(addRoute);
+                }
+              }}
+            />
+          </Tooltip>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default PageHeader;

20_React.js_VIP22/day-9/code/react-project-demo/src/components/PageHeader.scss

@@ -0,0 +1,42 @@
+.page-header {
+  display: flex;
+  height: 48px;
+  background-color: #fff;
+  border-radius: 12px;
+  font-size: 20px;
+
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 12px;
+  margin-bottom: 12px;
+
+  .header-left {
+    flex: 1;
+    text-align: left;
+    color: #6e7b8b;
+
+    .ant-space-item {
+      cursor: pointer;
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+  }
+
+  .header-right {
+    flex: 1;
+
+    text-align: right;
+    color: #008b8b;
+
+    cursor: pointer;
+
+    .anticon-plus {
+      &:hover {
+        transform: scale(1.1);
+        opacity: 0.8;
+      }
+    }
+  }
+}

20_React.js_VIP22/day-9/code/react-project-demo/src/pages/GoodsList/index.jsx

@@ -4,6 +4,7 @@ import store from '../../store';
 import { getGoodsList } from './goodsSlice';
 import { useSelector } from 'react-redux';
 import { useState } from 'react';
+import PageHeader from '../../components/PageHeader';
 
 function GoodsList() {
   const list = useSelector(({ goods }) => goods.list);
@@ -52,7 +53,7 @@ function GoodsList() {
       if (l.category != cate) {
         // 如果当前商品分类 与上一次 不一样 就需要渲染分类行
         res.push(
-          <tr className="cate">
+          <tr className="cate" key={l.category}>
             <td colSpan={2}>{l.category}</td>
           </tr>
         );
@@ -61,7 +62,7 @@ function GoodsList() {
         cate = l.category;
       }
       res.push(
-        <tr>
+        <tr key={l.id}>
           <td className={l.amount ? '' : 'unstocked'}>{l.name}</td>
           <td>{`$${l.price}`}</td>
         </tr>
@@ -72,34 +73,37 @@ function GoodsList() {
   }
 
   return (
-    <div className="goods-list">
-      <div className="search-bar">
-        <Input
-          placeholder="通过商品名检索..."
-          value={searchName}
-          onChange={(e) => {
-            setSearchName(e.target.value);
-          }}
-        />
-        <Checkbox
-          checked={showStocked}
-          onChange={(e) => {
-            setShowStocked(e.target.checked);
-          }}
-        >
-          仅显示有库存的商品
-        </Checkbox>
+    <>
+      <PageHeader>商品列表</PageHeader>
+      <div className="goods-list">
+        <div className="search-bar">
+          <Input
+            placeholder="通过商品名检索..."
+            value={searchName}
+            onChange={(e) => {
+              setSearchName(e.target.value);
+            }}
+          />
+          <Checkbox
+            checked={showStocked}
+            onChange={(e) => {
+              setShowStocked(e.target.checked);
+            }}
+          >
+            仅显示有库存的商品
+          </Checkbox>
+        </div>
+        <table>
+          <thead>
+            <tr>
+              <th>商品名称</th>
+              <th>商品价格</th>
+            </tr>
+          </thead>
+          <tbody>{renderList()}</tbody>
+        </table>
       </div>
-      <table>
-        <thead>
-          <tr>
-            <th>商品名称</th>
-            <th>商品价格</th>
-          </tr>
-        </thead>
-        <tbody>{renderList()}</tbody>
-      </table>
-    </div>
+    </>
   );
 }
 

20_React.js_VIP22/day-9/code/react-project-demo/src/pages/TodoList/index.jsx

@@ -0,0 +1,11 @@
+import PageHeader from '../../components/PageHeader';
+
+function TodoList() {
+  return (
+    <div className="todo-list">
+      <PageHeader>代办列表</PageHeader>
+    </div>
+  );
+}
+
+export default TodoList;

20_React.js_VIP22/day-9/code/react-project-demo/src/router/index.js

@@ -12,6 +12,7 @@ import { goodsLoader } from '../pages/GoodsList';
 const About = lazy(() => import('../pages/About'));
 const Login = lazy(() => import('../pages/Login'));
 const GoodsList = lazy(() => import('../pages/GoodsList'));
+const TodoList = lazy(() => import('../pages/TodoList'));
 
 const router = createBrowserRouter([
   {
@@ -39,6 +40,10 @@ const router = createBrowserRouter([
         loader: goodsLoader,
         element: withSuspense(GoodsList),
       },
+      {
+        path: '/todo/list',
+        element: withSuspense(TodoList),
+      },
     ],
   },
 ]);