docs: 使用 mockjs 模拟数据

docs/scene/mockjs/demos/Demo1.tsx

@@ -0,0 +1,69 @@
+import { Button } from 'antd';
+import Mock from 'mockjs';
+import { useState } from 'react';
+
+const options = {
+  'str1|2': 'a',
+  'str2|1-5': 'a',
+  'num1|+1': 1,
+  'num2|1-10': 1,
+  'num3|1-10.2': 1,
+  'boolean|1': true,
+  'obj1|1-3': {
+    '310005': '重庆市',
+    '310000': '上海市',
+    '320000': '江苏省',
+    '330000': '浙江省',
+    '340000': '安徽省',
+  },
+  'arr1|1': ['11', '22', '33'],
+  'arr2|2': ['11'],
+  'arr3|1-5': ['11'],
+  '@guid': '@guid',
+  '@id': '@id',
+  '@name': '@name',
+  '@cfirst': '@cfirst',
+  '@clast': '@clast',
+  '@cname': '@cname',
+  '@ctitle': '@ctitle',
+  '@cparagraph': '@cparagraph(2)',
+  '@csentence': '@csentence',
+  '@email': '@email(163.com)',
+  '@url': '@url(https)',
+  '@ip': '@ip',
+  '@zip': '@zip',
+  '@date': '@date',
+  '@time': '@time',
+  '@datetime': '@datetime',
+  '@color': '@color',
+  '@rgb': '@rgb',
+  '@rgba': '@rgba',
+  '@phone': '@phone',
+  '@region': '@region',
+  '@county': '@county(true)',
+  '@province@city@county': '@province@city@county',
+};
+
+const defaultData = Mock.mock(options);
+
+const Demo1 = () => {
+  const [obj, setObj] = useState(defaultData);
+
+  return (
+    <div>
+      <Button
+        type="primary"
+        onClick={() => {
+          setObj(Mock.mock(options));
+        }}
+      >
+        刷新
+      </Button>
+      <pre style={{ background: '#f5f5dc', fontSize: 16, fontWeight: 700 }}>
+        {JSON.stringify(obj, null, 4)}
+      </pre>
+    </div>
+  );
+};
+
+export default Demo1;

docs/scene/mockjs/index.md

@@ -0,0 +1,26 @@
+---
+title: better-mock
+toc: content
+nav:
+---
+
+# Mock 数据
+
+一般我们会使用`Mock.js`库, 这里更推荐 `better-mock`库 [better-mock](https://github.com/lavyun/better-mock)
+
+- 100% 兼容 Mock.js。
+- 使用 typescript 进行重构，更好的代码提示。
+- 更加现代化的构建打包方案。
+- 更加完善的单元测试。
+- 支持对 fetch 的拦截。
+- 支持主流小程序（微信、支付宝、头条、百度）。
+
+如果想调用接口进行网络请求推荐使用 `mockm`库 [mockm](https://github.com/wll8/mockm)
+
+Mock.js 更多示例代码 [Mock.js 更多示例代码](http://mockjs.com/examples.html#Image)
+
+## 代码演示
+
+### 基础用法
+
+<code src='./demos/Demo1.tsx' background="#f5f5f5"></code>

package.json

@@ -70,11 +70,11 @@
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
     "@types/mockjs": "^1.0.7",
-    "@types/react": "^18.0.0",
+    "@types/react": "^18.2.22",
     "@types/react-dom": "^18.0.0",
     "@umijs/lint": "^4.0.0",
     "antd": "^5.8.0",
-    "dumi": "^2.0.2",
+    "dumi": "^2.1.0",
     "eslint": "^8.23.0",
     "father": "^4.1.0",
     "husky": "^8.0.1",

sidebar.ts

@@ -271,6 +271,10 @@ export default {
           title: '解析 Excel 数据成 JSON',
           link: '/scene/excel-Import',
         },
+        {
+          title: 'Mock 数据',
+          link: '/scene/mockjs',
+        },
       ],
     },
   ],

src/Table/demos/Demo18.tsx

@@ -4,16 +4,7 @@ import type { LTableInstance } from 'lighting-design';
 import { LFormItemInput, LTable } from 'lighting-design';
 import type { FC } from 'react';
 import React, { useRef, useState } from 'react';
-
-const originData: any[] = [];
-
-for (let index = 0; index < 12; index++) {
-  originData.push({
-    key: `${index}`,
-    name: `JohnBrown-${index + 0}`,
-    age: 10 + index,
-  });
-}
+import { originData } from './service';
 
 const columns: ColumnsType<any> = [
   {
@@ -84,7 +75,7 @@ const Demo18: React.FC = () => {
   return (
     <div>
       <Button type="primary" onClick={showModal}>
-        Open Modal
+        打开弹框
       </Button>
       <Modal
         footer={false}

src/Table/demos/Demo19.tsx

@@ -4,16 +4,7 @@ import type { ColumnsType } from 'antd/es/table';
 import type { LTableInstance } from 'lighting-design';
 import { LTable } from 'lighting-design';
 import React, { useRef, useState } from 'react';
-
-const originData: any[] = [];
-
-for (let index = 0; index < 12; index++) {
-  originData.push({
-    key: `${index}`,
-    name: `JohnBrown-${index + 0}`,
-    age: 10 + index,
-  });
-}
+import { apiGetUserList } from './service';
 
 const columns1: ColumnsType<any> = [
   {
@@ -84,10 +75,11 @@ const Demo18: React.FC = () => {
           showQuickJumper: false,
         }}
         request={async (params, requestType) => {
+          const res: Record<string, any> = await apiGetUserList();
           return {
             success: true,
-            data: originData,
-            total: originData.length,
+            data: res.data,
+            total: res.total,
           };
         }}
       />

src/Table/demos/Demo20.tsx

@@ -2,17 +2,9 @@ import { Button, type FormInstance } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import type { LTableInstance } from 'lighting-design';
 import { LTable } from 'lighting-design';
+import Mock from 'mockjs';
 import React, { useRef } from 'react';
-
-const originData: any[] = [];
-
-for (let index = 0; index < 10; index++) {
-  originData.push({
-    key: `${index}`,
-    name: `JohnBrown-${index}`,
-    age: 10 + index,
-  });
-}
+import { originData } from './service';
 
 const Demo20: React.FC = () => {
   const formRef = useRef<FormInstance>();
@@ -43,9 +35,10 @@ const Demo20: React.FC = () => {
               onClick={() => {
                 // 调用修改的接口成功后再执行以下方法
                 tableRef.current?.setTableData((prev) => {
-                  prev.list[index].name = `李岚清-${index}`;
-                  prev.list[index].age = index + 20;
-                  return { ...prev, total: prev.list?.length };
+                  const newList = [...prev.list];
+                  newList[index].name = Mock.Random.cname();
+                  newList[index].age = Mock.Random.integer(10, 60);
+                  return { list: newList, total: newList?.length };
                 });
               }}
             >

src/Table/demos/Demo6.tsx

@@ -3,25 +3,20 @@ import { Button, Card, Col, Row } from 'antd';
 import type { LTableInstance } from 'lighting-design';
 import { LFormItemInput, LTable } from 'lighting-design';
 import { awaitTime } from 'lighting-design/_test';
+import Mock from 'mockjs';
 import type { FC } from 'react';
 import { useRef } from 'react';
 
-const originData = [
-  {
-    key: '1',
-    name: 'John Brown',
-    age: 10,
-    address: 'New York No. 1 Lake Park',
-  },
-  { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },
-  { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
-  { key: '4', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
-  { key: '5', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
-  { key: '6', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
-  { key: '7', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
-  { key: '8', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
-  { key: '9', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },
-];
+const originData = Mock.mock({
+  'list|9': [
+    {
+      key: '@id',
+      name: '@cname',
+      'age|10-70': 10,
+      address: `@province@city@county`,
+    },
+  ],
+}).list;
 
 const formItems = [
   <LFormItemInput key="0" name="input4" label="输入框" />,
@@ -43,6 +38,10 @@ const Demo6: FC = () => {
       toolbarLeft={<Button type="primary">新增</Button>}
       toolbarRight={<Button type="primary">审批</Button>}
       formItems={formItems}
+      pagination={{
+        pageSize: 9,
+        pageSizeOptions: [9, 18, 27, 36],
+      }}
       request={async (params, requestType) => {
         await awaitTime();
         return {
@@ -55,7 +54,7 @@ const Demo6: FC = () => {
         <Row gutter={[10, 10]}>
           {list.map((item) => (
             <Col span={8} key={item.key}>
-              <Card title={item.name} />
+              <Card title={`${item.name}-${item.age}`}>{item.address}</Card>
             </Col>
           ))}
         </Row>

src/Table/demos/service.ts

@@ -1,4 +1,5 @@
 import type { ColumnsType } from 'antd/lib/table';
+import Mock from 'mockjs';
 
 export const columns: ColumnsType<any> = [
   {
@@ -7,7 +8,6 @@ export const columns: ColumnsType<any> = [
     key: 'name',
     align: 'center',
     className: 'my-name-columns',
-    // fixed: 'left',
   },
   {
     title: '年龄',
@@ -23,34 +23,35 @@ export const columns: ColumnsType<any> = [
   },
 ];
 
-export const originData: any[] = [];
-
-for (let index = 0; index < 12; index++) {
-  originData.push({
-    key: index.toString(),
-    name: `Jack ${index + 1}`,
-    age: Math.floor(Math.random() * 60) + 20,
-    address: `London Park no-${index}`,
-  });
-}
-
 interface Item {
   key: string;
   name: string;
   age: number;
   address: string;
 }
-const data: Item[] = [];
-for (let i = 0; i < 60; i++) {
-  data.push({
-    key: i.toString(),
-    name: `Edrward ${i + 1}`,
-    age: Math.floor(Math.random() * 60) + 20,
-    address: `London Park no-${i}`,
-  });
-}
+
+export const originData: Item[] = Mock.mock({
+  'list|10': [
+    {
+      key: '@id',
+      name: '@cname',
+      'age|10-60': 10,
+      address: `@province@city@county`,
+    },
+  ],
+}).list;
 
 export function apiGetUserList(time = 1000): Promise<Record<string, any>> {
+  const data: Item[] = Mock.mock({
+    'list|20-60': [
+      {
+        key: '@id',
+        name: '@cname',
+        'age|10-60': 10,
+        address: `@province@city@county`,
+      },
+    ],
+  }).list;
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve({

src/Table/index.md

@@ -117,21 +117,23 @@ nav:
 
 ### Excel 导入与导出
 
-[表格的导出](/scene/table-Export)
-[表格的导入](/scene/excel-Import)
+[表格的导出 - json2Excel ](/scene/table-Export) <br>
+[表格的导入 - excel2Json (excel2Json ) ](/scene/excel-Import)
 
 ### 编辑表格
 
-[编辑表格行](https://ant.design/components/table-cn#components-table-demo-edit-row)
-[编辑表格单元格](https://ant.design/components/table-cn#components-table-demo-edit-cell)
+[LEditTable - 高级编辑表格](/components/edit-table) <br>
+[antd - 编辑表格行示例](https://ant.design/components/table-cn#components-table-demo-edit-row) <br>
+[antd - 编辑表格单元格示例](https://ant.design/components/table-cn#components-table-demo-edit-cell) <br>
 
 ### 拖拽表格
 
-[拖拽排序](https://ant.design/components/table-cn#components-table-demo-drag-sorting)
+[拖拽排序](https://ant.design/components/table-cn#components-table-demo-drag-sorting) <br>
 [拖拽手柄](https://ant.design/components/table-cn#components-table-demo-drag-sorting-handler)
 
 ### 虚拟表格
 
+`antd 版本 >= 5.9.0`时可通过 `virtual` 开启虚拟滚动，此时 `scroll.x` 与 `scroll.y` 必须设置且为 `number` 类型。
 [虚拟表格](https://ant.design/components/table-cn#components-table-demo-virtual-list)
 
 ## API

tsconfig.json

@@ -15,5 +15,5 @@
       "lighting-design/*": ["src/*", "*"]
     }
   },
-  "include": [".dumi/**/*", ".dumirc.ts", "src/**/*", "docs/**/*"]
+  "include": [".dumirc.ts", "src/**/*", "docs/**/*"]
 }