:pencil: add day2

dashboard/.umirc.ts

@@ -4,8 +4,6 @@ export default defineConfig({
   nodeModulesTransform: {
     type: 'none',
   },
-  routes: [
-    { path: '/', component: '@/pages/index' },
-  ],
+  base: '/my/',
   fastRefresh: {},
 });

dashboard/README.md

@@ -4,7 +4,7 @@
 cd dashboard
 # install dependencies
 yarn install
-# start the dev server
+# start the dev server: http://localhost:8000/my/
 yarn start
 ```
 
@@ -40,13 +40,18 @@ yarn start
 
 - Start backend & frontend server
 
-### Day 2
+### Day 2: Router & Component
 
-### Day 3
+- 浏览器打开： `http://localhost:8000/my/demo`
+- 路由跳转（history vs Link） **pages/demo/index.tsx**
+- 组件复用: **components/demo.ts**
+- 路由参数： **pages/demo/[id]/show.tsx**
 
-### Day 4
+### Day 3: State & Fetch
 
-### Day 5
+### Day 4: Form & Table
+
+### Day 5: Work with http rest api
 
 ### Day 6
 

dashboard/src/components/demo.tsx

@@ -0,0 +1,24 @@
+import {Link} from 'umi';
+import { Alert } from 'antd';
+
+type IWidget1Props ={
+  message: String
+}
+
+export const Widget1 = ({message}: IWidget1Props) => {
+  return (
+    <div>
+      bla bla bla
+      <Alert message={message} type="success" />
+    </div>
+  );
+}
+
+export const Widget2 = ({}) => {
+  return (
+    <div>
+      bla bla bla
+      <Alert message="Widget 2" type="error" />
+    </div>
+  );
+}

dashboard/src/pages/404.tsx

@@ -0,0 +1,13 @@
+
+
+type IProps = {
+
+}
+
+export default ({}: IProps) => {
+  return (
+    <div>
+      <h1>Not found</h1>
+    </div>
+  );
+}

dashboard/src/pages/demo/index.tsx

@@ -0,0 +1,26 @@
+import {Link, history} from 'umi';
+import {Button} from 'antd';
+
+type IProps = {
+
+}
+
+export default ({}: IProps) => {
+  return (
+    <div>
+      <h1>Demo home page</h1>
+
+
+      <div>
+
+        <Link to="/demo/items">List items</Link>
+        &nbsp;
+        <Link to="/demo/items/1/show">Show items 1</Link>
+        &nbsp;
+        <Link to="/demo/items/2/show">Show items 2</Link>
+        &nbsp;
+        <Button onClick={()=>history.push('/demo/items/333/edit')}>Edit items 333</Button>
+      </div>
+    </div>
+  );
+}

dashboard/src/pages/demo/items/[id]/edit.tsx

@@ -0,0 +1,14 @@
+import {Link} from 'umi';
+
+import {Widget1, Widget2} from '@/components/demo'
+
+export default ({match}) => {
+  return (
+    <div>
+      <h1>Edit item page by id {match.params.id}</h1>
+      <Link to="/demo">Go home</Link>
+      <Widget1 message={"edit page " + match.params.id}/>
+      <Widget2/>
+    </div>
+  );
+}

dashboard/src/pages/demo/items/[id]/show.tsx

@@ -0,0 +1,14 @@
+import {Link} from 'umi';
+
+import {Widget1, Widget2} from '@/components/demo'
+
+export default ({match}) => {
+  return (
+    <div>
+      <h1>Show item page {match.params.id}</h1>
+      <Link to="/demo">Go home</Link>
+      <Widget1 message={"show page " + match.params.id}/>
+      <Widget2/>
+    </div>
+  )
+}

dashboard/src/pages/demo/items/index.tsx

@@ -0,0 +1,14 @@
+import {Link} from 'umi';
+
+type IProps = {
+
+}
+
+export default ({}: IProps) => {
+  return (
+    <div>
+      <h1>List items page</h1>
+      <Link to="/demo">Go home</Link>
+    </div>
+  );
+}

dashboard/src/pages/index.less

@@ -1,3 +0,0 @@
-.title {
-  background: rgb(121, 242, 157);
-}

dashboard/src/pages/index.tsx

@@ -1,9 +1,9 @@
-import styles from './index.less';
+
 
 export default function IndexPage() {
   return (
     <div>
-      <h1 className={styles.title}>Page index</h1>
+      <h1>Page index</h1>
     </div>
   );
 }