:construction: add pro-table demo

dashboard/src/Router.tsx

@@ -35,19 +35,16 @@ const Widget = () => {
           />
           <Route path="forgot-password" element={<NutUsersForgotPassword />} />
         </Route>
+      </Route>
 
-        <Route path="dashboard" element={<Dashboard />}>
-          <Route path="users">
-            <Route
-              path="change-password"
-              element={<NutUsersChangePassword />}
-            />
-            <Route path="logs" element={<NutUsersLogs />} />
-            <Route path="account-info" element={<NutUsersAccountInfo />} />
-          </Route>
+      <Route path="dashboard" element={<Dashboard />}>
+        <Route path="users">
+          <Route path="change-password" element={<NutUsersChangePassword />} />
+          <Route path="logs" element={<NutUsersLogs />} />
+          <Route path="account-info" element={<NutUsersAccountInfo />} />
         </Route>
-        <Route path="switch-language" element={<NutSwitchLanguage />} />
       </Route>
+      <Route path="switch-language" element={<NutSwitchLanguage />} />
       <Route path="forbidden" element={<NutForbidden />} />
       <Route path="" element={<NutHome />} />
       <Route path="*" element={<NutNotFound />} />

dashboard/src/components/nut/users/Logs.tsx

@@ -0,0 +1,67 @@
+import { ProTable } from "@ant-design/pro-components";
+import { useIntl } from "react-intl";
+
+interface IItem {
+  id: number;
+  message: string;
+  createdAt: Date;
+}
+
+const Widget = () => {
+  const intl = useIntl();
+  return (
+    <ProTable<IItem>
+      columns={[
+        {
+          title: intl.formatMessage({ id: "forms.fields.id.label" }),
+          dataIndex: "id",
+          key: "id",
+          width: 80,
+          search: false,
+        },
+
+        {
+          title: intl.formatMessage({ id: "forms.fields.message.label" }),
+          dataIndex: "message",
+          key: "message",
+          search: false,
+        },
+        {
+          title: intl.formatMessage({ id: "forms.fields.created-at.label" }),
+          key: "created-at",
+          width: 200,
+          render: (_, it) => <>{it.createdAt.toISOString()}</>,
+          search: false,
+        },
+      ]}
+      request={async (params = {}, sorter, filter) => {
+        // TODO
+        console.log(params, sorter, filter);
+
+        const size = params.pageSize || 20;
+        return {
+          total: 1 << 12,
+          success: true,
+          data: Array.from(Array(size).keys()).map((x) => {
+            const id = ((params.current || 1) - 1) * size + x + 1;
+            var it: IItem = {
+              id,
+              message: `message ${id}`,
+              createdAt: new Date(),
+            };
+            return it;
+          }),
+        };
+      }}
+      rowKey="id"
+      bordered
+      pagination={{
+        showQuickJumper: true,
+        showSizeChanger: true,
+      }}
+      headerTitle={intl.formatMessage({ id: "nut.users.logs.title" })}
+    />
+  );
+};
+
+export default Widget;

dashboard/src/locales/zh-Hans/forms.ts

@@ -1,6 +1,9 @@
 const items = {
   "forms.fields.email.label": "电子邮箱",
   "forms.fields.password.label": "密码",
+  "forms.fields.id.label": "ID",
+  "forms.fields.message.label": "消息",
+  "forms.fields.created-at.label": "创建时间",
 };
 
 export default items;

dashboard/src/locales/zh-Hans/nut/index.ts

@@ -1,6 +1,7 @@
 const items = {
   "nut.users.sign-in.title": "欢迎登录",
   "nut.users.sign-up.title": "新用户注册",
+  "nut.users.logs.title": "日志列表",
 };
 
 export default items;

dashboard/src/pages/nut/users/logs.tsx

@@ -1,5 +1,13 @@
+import Logs from "../../../components/nut/users/Logs";
+
 const Widget = () => {
-  return <div>logs</div>;
+  return (
+    <div>
+      logs
+      <br />
+      <Logs />
+    </div>
+  );
 };
 
 export default Widget;

documents/development/frontend/README.md

@@ -43,4 +43,4 @@ yarn start
 - [React 第二天： i18n & form](react-day-2/)
 - [React 第三天： table](react-day-3/)
 - [React 第四天： http request](react-day-4/)
-- [React 第五天： page](react-day-5/)
+- [React 第五天： page & component & redux](react-day-5/)

documents/development/frontend/react-day-2/README.md

@@ -34,10 +34,11 @@
 
 - 表单
   - 从简单的 case 开始
-  - 不考虑表单布局 全部用默认样式
+  - 不考虑表单布局 全部用默认样式(**ProForm**)
   - 随便找个自己的页面 表单放进去 能够显示出来即可
   - 所有自定义的字符串都要放入国际化目录(比如中文在：locales/zh-Hans)
-  - onFinish 里打印出表单值即可，标记为 todo
+  - onFinish 里**打印**出表单值即可，标记为 TODO
+  - 重点练习下 DatePicker, DateRangePicker, Select 组件
 
 ## 参考文档
 

documents/development/frontend/react-day-3/README.md

@@ -0,0 +1,15 @@
+# ProTable
+
+## 例子
+
+![table](table.png)
+
+## 作业
+
+- 使用**ProTable**
+- 行数据类型定义 **IItem**
+- **分页**模拟数据
+
+## 文档
+
+- [ProTable](https://procomponents.ant.design/en-US/components/table/)