feat: 基础完成

.umirc.ts

@@ -4,12 +4,13 @@ export default defineConfig({
   nodeModulesTransform: {
     type: 'none',
   },
-  // routes: [  走约定式路由
+  // routes: [  // 走约定式路由
   //   { path: '/', component: '@/pages/index' },
   // ],
   fastRefresh: {},
   ssr: {
     mode: 'stream',
     // forceInitial: true  // 无论是首屏还是页面切换，都会触发 getInitialProps
   },
+  publicPath: '/static/',
 });

README.md

@@ -1,12 +1,15 @@
 # 基于umi3开发的日程管理系统
 > 包括新建日程 日程列表， 打通微信， 定时推送日程
 
-# 开发
+# 开发说明
 1. clone 项目
 2. cd daymanage
 3. npm i
 4. npm start
 
+## 特别注意
+1. 所有基础变量均配置在define中如主题色, 背景色等
+
 
 # 服务端渲染
 https://umijs.org/zh-CN/docs/ssr

mock/api.js

@@ -0,0 +1,51 @@
+import mockjs from 'mockjs';
+import { delay } from 'roadhog-api-doc';
+
+const proxy = {
+  '/todayList': {
+    code: 0,
+    data: {
+      total: 4,
+      list: [
+        {
+          key: '1',
+          name: 'John Brown',
+          date: 32,
+          remark: 'New York No. 1 Lake Park',
+        },
+        {
+          key: '2',
+          name: 'Joe Black',
+          date: 42,
+          remark: 'London No. 1 Lake Park',
+        },
+        {
+          key: '3',
+          name: 'Jim Green',
+          date: 32,
+          remark: 'Sidney No. 1 Lake Park',
+        },
+        {
+          key: '4',
+          name: 'Jim Red',
+          date: 32,
+          remark: 'London No. 2 Lake Park',
+        },
+        {
+          key: '5',
+          name: 'Jim Red xh',
+          date: 32,
+          remark: 'London No. 2 Lake Park',
+        },
+        {
+          key: '6',
+          name: 'xim Red ',
+          date: 32,
+          remark: 'London No. 2 Lake Park',
+        },
+      ],
+    },
+  },
+};
+
+export default delay(proxy, 500);

package.json

@@ -26,7 +26,7 @@
     "react": "17.x",
     "react-dom": "17.x",
     "react-highlight-words": "^0.17.0",
-    "umi": "^3.5.17"
+    "umi": "^3.4.0"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",

public/a.txt

@@ -0,0 +1 @@
+1111

src/global.css

@@ -0,0 +1,4 @@
+:root {
+  --main-bg-color: #f6f7f9;;
+  --main-color: #1d6efe;
+}

src/pages/dayList/index.tsx

@@ -32,17 +32,23 @@ const data = [
 function dayList() {
   const columns: ColumnsType<object> = [
     {
-      title: 'Name',
+      title: '名称',
       dataIndex: 'name',
       key: 'name',
-      width: '30%',
+      width: '20%',
     },
     {
-      title: 'Age',
-      dataIndex: 'age',
-      key: 'age',
+      title: '日期',
+      dataIndex: 'date',
+      key: 'date',
       width: '20%',
     },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+      key: 'remark',
+      width: '60%',
+    },
   ];
   return <Table columns={columns} dataSource={data} />;
 }

src/pages/home/index.less

@@ -0,0 +1,24 @@
+.ScheduleIndex {
+  display: flex;
+  min-height: 100vh;
+  .todaySchedule {
+    width: 60%;
+    // h3 {
+    //   text-align: center;
+    //   color: var(--main-color);
+    // }
+  }
+  .otherSchedule {
+    width: 40%;
+    h3 {
+      text-align: center;
+      color: var(--main-color);
+    }
+    .outDateSchedule {
+      height: 50%;
+    }
+    .tomorrowSchedule {
+      height: 50%;
+    }
+  }
+}

src/pages/home/index.tsx

@@ -0,0 +1,104 @@
+// 大盘数据
+import React, { useEffect, useState } from 'react';
+// 页面组件上的 getInitialProps 静态方法，执行后将结果注入到该页面组件的 props 中
+import { IGetInitialProps, history } from 'umi';
+import { Card, Table } from 'antd';
+import { ColumnsType } from 'antd/lib/table';
+import styles from './index.less';
+
+interface Iprops {
+  data: {
+    title: string;
+  };
+}
+const goList = () => {
+  history.push('/dayList');
+};
+const data = [
+  {
+    key: '1',
+    name: 'John Brown',
+    date: 32,
+    remark: 'New York No. 1 Lake Park',
+  },
+  {
+    key: '2',
+    name: 'Joe Black',
+    date: 42,
+    remark: 'London No. 1 Lake Park',
+  },
+  {
+    key: '3',
+    name: 'Jim Green',
+    date: 32,
+    remark: 'Sidney No. 1 Lake Park',
+  },
+  {
+    key: '4',
+    name: 'Jim Red',
+    date: 32,
+    remark: 'London No. 2 Lake Park',
+  },
+];
+const columns: ColumnsType<object> = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    key: 'name',
+    width: '20%',
+  },
+  {
+    title: '日期',
+    dataIndex: 'date',
+    key: 'date',
+    width: '20%',
+  },
+  {
+    title: '备注',
+    dataIndex: 'remark',
+    key: 'remark',
+    width: '60%',
+  },
+];
+function IndexPage(props: Iprops) {
+  // const { data } = props;
+  // console.log(props, data); // data 没有值
+  return (
+    <div className={styles.ScheduleIndex}>
+      <div className={styles.todaySchedule}>
+        <Card title="今日任务">
+          <Table columns={columns} dataSource={data} />;
+        </Card>
+      </div>
+      <div className={styles.otherSchedule}>
+        <div className={styles.outDateSchedule}>
+          <Card title="过期任务">
+            <ul></ul>
+          </Card>
+        </div>
+        <div className={styles.tomorrowSchedule}>
+          <Card title="明日任务">
+            <ul></ul>
+          </Card>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+IndexPage.getInitialProps = (async (ctx) => {
+  console.log(ctx, 1234); // 此方法没有执行
+  return new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve({
+        data: {
+          todayList: 'Hello World',
+          outDateList: '',
+          tomorrowList: '',
+        },
+      });
+    }, 300);
+  });
+}) as IGetInitialProps;
+
+export default IndexPage;