Merge branch 'agile' of https://github.com/visuddhinanda/mint into agile

dashboard/src/Router.tsx

@@ -41,19 +41,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/deployment/README.md

@@ -2,12 +2,32 @@
 
 ## 操作系统准备
 
-### **仅** Windows 用户
+### For MacOS
 
-- [使用 WSL 在 Windows 上安装 Linux](https://learn.microsoft.com/zh-cn/windows/wsl/install)
-- 从[Windows Store](https://apps.microsoft.com/store/detail/ubuntu/9PDXGNCFSCZV)安装 ubuntu（版本不小于 22.04）
+- [安装 Homebrew](https://brew.sh/)
+- 安装 Podman
 
-### 安装容器工具 `sudo apt install crun podman buildah`
+  ```bash
+  brew install qemu
+  brew install podman
+  podman machine init # init the FIRST PODMAN MACHINE
+  ```
+
+- 启动 Podman `podman machine start`
+
+### For Windows 10+
+
+- 先决条件
+
+  ![prerequisites](wsl/prerequisites.png)
+
+- 安装 WSL
+
+  ![install](wsl/install.png)
+
+- 从[Windows Store](https://apps.microsoft.com/store/detail/ubuntu/9PDXGNCFSCZV)安装 ubuntu（版本不小于 **22.04**）
+
+## Ubuntu 内安装容器工具包 `sudo apt install crun podman buildah`
 
 ## 镜像准备
 
@@ -59,3 +79,7 @@ podman images
 # 列出所有容器
 podman ps -a
 ```
+
+## 参考文档
+
+- [Install Linux on Windows with WSL](https://learn.microsoft.com/en-us/windows/wsl/install)

documents/development/frontend/README.md

@@ -12,15 +12,16 @@ tar xf node_modules.tar.xz
 ### online
 
 ```bash
-yarn config set registry 'https://registry.npmmirror.com/' --global # for China users
+cd dashboard
 yarn install
 ```
 
 - for windows user, download [Node.js](https://nodejs.org/en/download/current/) and then,
 
   ```bash
-  npm config set registry 'https://registry.npmmirror.com/' --global # for China user
+  npm config set registry 'https://registry.npmmirror.com/' --global # ONLY for China user
   npm install -g yarn
+  yarn config set registry 'https://registry.npmmirror.com/' --global # ONLY for China users
   ```
 
 ![dashboard.png](dashboard.png)
@@ -28,6 +29,7 @@ yarn install
 ## 开发模式启动 [dashboard](http://localhost:3000)
 
 ```bash
+cd dashboard
 yarn start
 ```
 
@@ -41,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

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

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/)