fix mock

Author: xlorne

admin-ui/__mocks__/axios.ts

@@ -1,8 +1,8 @@
-const Mock = require('mockjs');
+import Mock from "mockjs";
+import webpackMockServer from "webpack-mock-server";
 
-module.exports = (app, helper) => {
+export default webpackMockServer.add((app, helper) => {
     app.get('/api/products', (req, res) => {
-
         const products = Mock.mock({
             'list|100': [{
                 'id|+1': 1,
@@ -13,4 +13,4 @@ module.exports = (app, helper) => {
 
         res.json(products);
     });
-};
+});

admin-ui/__mocks__/fileMock.js

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "../mocks/*",
+    "*.mock.ts",
+    "**/global.d.ts"
+  ],
+  "files": [],
+  "exclude": [
+    "*test.mock.ts"
+  ]
+}

admin-ui/__mocks__/monaco-editor.js

@@ -1,7 +1,8 @@
-module.exports = (app, helper) => {
+import webpackMockServer from "webpack-mock-server";
+
+export default webpackMockServer.add((app, helper) => {
     app.post('/user/login', (req, res) => {
         const username = req.body.username;
-
         if(username==='admin'){
             res.json({
                 success:true,
@@ -25,4 +26,4 @@ module.exports = (app, helper) => {
             }
         });
     });
-};
+});

admin-ui/mocks/index.js

@@ -1,9 +1,8 @@
 {
-  "name": "admin-pro-ui",
+  "name": "admin-ui",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ag-grid-community/locale": "^33.0.3",
     "@ant-design/icons": "^5.4.0",
     "@ant-design/pro-components": "^2.8.2",
     "@babel/standalone": "^7.25.6",
@@ -20,7 +19,7 @@
     "@types/node": "^16.18.108",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "ag-grid-react": "^33.0.3",
+    "@visactor/react-vtable": "^1.18.2",
     "antd": "^5.20.6",
     "axios": "^1.7.7",
     "base64-js": "^1.5.1",
@@ -72,6 +71,7 @@
     "@types/jest": "^29.5.14",
     "@types/lodash": "^4.17.7",
     "@types/lodash-es": "^4.17.12",
+    "@types/mockjs": "^1.0.10",
     "babel-jest": "^29.7.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^12.0.2",
@@ -93,6 +93,6 @@
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.1.0",
     "webpack-merge": "^6.0.1",
-    "webpack-mock-server": "^1.0.21"
+    "webpack-mock-server": "^1.0.23"
   }
 }

admin-ui/mocks/product.js renamed to admin-ui/mocks/product.ts

@@ -27,6 +27,12 @@ export const menus = [
         icon: "FormOutlined",
         page: 'mirco',
     },
+    {
+        path: '/table',
+        name: '表格',
+        icon: "TableOutlined",
+        page: 'table',
+    },
     {
         path: '/flow',
         name: '流程',

admin-ui/mocks/tsconfig.json

@@ -0,0 +1,39 @@
+import React from "react";
+import {ListTable} from '@visactor/react-vtable';
+import {PageContainer} from "@ant-design/pro-components";
+
+const TablePage: React.FC = () => {
+
+    const option = {
+        columns: [
+            {
+                field: '0',
+                title: 'name'
+            },
+            {
+                field: '1',
+                title: 'age'
+            },
+            {
+                field: '2',
+                title: 'gender'
+            },
+            {
+                field: '3',
+                title: 'hobby'
+            }
+        ],
+        records: new Array(1000).fill(['John', 18, 'male', '🏀'])
+    };
+
+    return (
+        <PageContainer>
+            <ListTable
+                option={option}
+                height={'500px'}
+            />
+        </PageContainer>
+    )
+}
+
+export default TablePage;

admin-ui/mocks/user.js renamed to admin-ui/mocks/user.ts

@@ -1,8 +1,6 @@
 const {merge} = require('webpack-merge');
 const common = require('./webpack.common.js');
 const webpackMockServer = require('webpack-mock-server');
-const mockFunction = require('./mocks/index.js');
-const express = require('express');
 
 module.exports = merge(common, {
     mode: 'development',
@@ -13,12 +11,17 @@ module.exports = merge(common, {
             if (!devServer) {
                 throw new Error('webpack-dev-server is not defined');
             }
-            // 使用 express.json() 来解析请求体
-            devServer.app.use(express.json());
 
             // 使用 webpackMockServer 来添加 mock 功能
-            webpackMockServer.use(devServer.app);
-            webpackMockServer.add(mockFunction)(devServer.app);
+            webpackMockServer.use(devServer.app,{
+                port: 8090,
+                entry:[
+                    './mocks/user.ts',
+                    './mocks/product.ts',
+                ],
+                tsConfigFileName: "mocks/tsconfig.json"
+            });
+            // webpackMockServer.add(mockFunction)(devServer.app);
 
             console.log('mock server is running');
             return middlewares; // 返回 middlewares

admin-ui/package.json

@@ -0,0 +1,6 @@
+/*!-----------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Version: 0.52.2(404545bded1df6ffa41ea0af4e8ddb219018c6c1)
+ * Released under the MIT license
+ * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
+ *-----------------------------------------------------------------------------*/

admin-ui/src/config/menus.tsx

@@ -0,0 +1,6 @@
+/*!-----------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Version: 0.52.2(404545bded1df6ffa41ea0af4e8ddb219018c6c1)
+ * Released under the MIT license
+ * https://github.com/microsoft/monaco-editor/blob/main/LICENSE.txt
+ *-----------------------------------------------------------------------------*/