代办列表展示

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

@@ -72,7 +72,7 @@ function LayoutAdmin() {
   }, [pathname, items]);
 
   return (
-    <Layout style={{ height: '100vh' }}>
+    <Layout style={{ minHeight: '100vh' }}>
       <Header style={headerStyle}>Header</Header>
       <Layout hasSider>
         <Content style={contentStyle}>

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

@@ -1,11 +1,87 @@
 import PageHeader from '../../components/PageHeader';
 import store from '../../store';
 import { fetchTodoList } from './todoSlice';
+import { useSelector } from 'react-redux';
+import { Col, Row, Switch, Card, Typography, Pagination } from 'antd';
+import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
+
+import { useDispatch } from 'react-redux';
+import { setPage } from './todoSlice';
+
+import { useSubmit } from 'react-router-dom';
+
+const { Meta } = Card;
+const { Paragraph } = Typography;
 
 function TodoList() {
+  const submit = useSubmit();
+  const dispatch = useDispatch();
+  let filter = useSelector(({ todos }) => todos.filter);
+  let page = useSelector(({ todos }) => todos.page);
+  let list = useSelector(({ todos }) => todos.list);
+
+  function onPageChange(page, pageSize) {
+    dispatch(setPage({ current: page, count: pageSize }));
+    submit(null, { method: 'get' });
+  }
+
   return (
     <div className="todo-list">
       <PageHeader addRoute={'/todo/add'}>代办列表</PageHeader>
+      <div className="list">
+        <Row>
+          {list.map((todo) => (
+            <Col key={todo.id} span={8}>
+              <Card
+                hoverable
+                style={{
+                  width: 300,
+                  marginBottom: 12,
+                  marginLeft: 'auto',
+                  marginRight: 'auto',
+                }}
+                cover={
+                  <img
+                    alt="代办封面"
+                    src={todo.cover}
+                    style={{ width: '100%', height: '200px' }}
+                  />
+                }
+                actions={[
+                  <EditOutlined key="edit" />,
+                  <DeleteOutlined />,
+                  <Switch
+                    checkedChildren="已完成"
+                    unCheckedChildren="进行中"
+                    checked={!!todo.status}
+                  />,
+                ]}
+              >
+                <Meta
+                  title={todo.title}
+                  description={
+                    <Paragraph
+                      style={{ width: '100%' }}
+                      ellipsis={{
+                        rows: 1,
+                        tooltip: todo.description,
+                      }}
+                    >
+                      {todo.description}
+                    </Paragraph>
+                  }
+                />
+              </Card>
+            </Col>
+          ))}
+        </Row>
+        <Pagination
+          current={page.current}
+          total={page.total}
+          onChange={onPageChange}
+          pageSize={page.count}
+        />
+      </div>
     </div>
   );
 }

20_React.js_VIP22/day-9/code/react-project-demo/src/pages/TodoList/todoSlice.js

@@ -10,7 +10,7 @@ export const todoSlice = createSlice({
     },
     page: {
       current: 1,
-      count: 10,
+      count: 9,
       total: 0,
       pages: 0,
       activeCount: 0,

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

@@ -9,4 +9,13 @@ module.exports = function (app) {
       pathRewrite: { '^/api': '' },
     })
   );
+
+  app.use(
+    '/public',
+    createProxyMiddleware({
+      target: 'http://localhost:4000',
+      changeOrigin: true,
+      pathRewrite: { '^/public': '' },
+    })
+  );
 };