fix: 增加权限管理文档 & 修复ProForm 只读模式下宽度问题

examples/website/config/routes.js

@@ -18,6 +18,7 @@ const routeList = [
       { path: '/newPages/*', element: '@/pages/newPages' },
       { path: '/mocker/*', element: '@/pages/mocker' },
       { path: '/request/*', element: '@/pages/request' },
+      { path: '/auth/*', element: '@/pages/auth' },
       { path: '/proxy/*', element: '@/pages/proxy' },
       { path: '/basic-layouts/*', element: '@/pages/basic-layouts' },
       { path: '/components/*', element: '@/pages/components' },

examples/website/src/menus.json

@@ -36,6 +36,10 @@
     "label": "全局状态管理",
     "path": "/models"
   },
+  {
+    "label": "权限管理",
+    "path": "/auth"
+  },
   {
     "label": "代理",
     "path": "/proxy"

examples/website/src/pages/auth/README.md

@@ -0,0 +1,76 @@
+# 权限管理
+
+## 一、简介
+在项目中经常有的场景是不同的用户的权限不同，通常有如下场景：
+- 不同的用户在页面中可以看到的元素和操作不同
+- 不同的用户对页面的访问权限不同
+
+```bash
+针对这些场景，我们为中台场景下常用的权限控制提供了一种更加简单、易用、通用的解决方案。实现了一个基于 umi 插件的权限管
+理方案 - @uiw-admin/authorized。通过定义权限，使用权限，完成 React 组件内的执行权限控制，渲染权限控制。搭配 
+@uiw-admin/basic-layouts 插件一起使用，还可以进一步完成对路由权限的控制。
+```
+
+## 二、路由和菜单
+当项目需要根据权限判断组件是否展示 使用组件时，请在 .kktprc.ts文件中配置全局变量(define)中AUTH=true
+```diff
+import config from "@uiw-admin/config"
+export default config({
+  define:{
++    AUTH:true,
+    //  ...
+  }
+  //  ...
+})
+```
+如果是路由权限判断,请在route.json中添加对应菜单的权限``isAuth``
+```json
+[
+  {
+    "path": "/new",
+    "name": "新页面",
+    "element": "@page/NewPage",
+    "icon": "home",
+    "isAuth":true
+  },
+]
+```
+
+然后在BasicLayout.tsx,使用 ``AuthPage``组件
+```jsx
+import AuthPage  from "@uiw-admin/authorized"
+import BasicLayout from '@uiw-admin/BasicLayout'
+export default ()=>{
+  return (
+    <AuthPage authority={true} redirectPath="/login">
+      <BasicLayout />
+    </AuthPage>
+  )
+}
+```
+
+## 三、页面中控件权限控制
+```jsx
+import React from "react"
+import { AuthBtn } from "@uiw-admin/authorized"
+
+const Demos = ()=>{
+  return (
+   <div>
+     <AuthBtn path="/dom/save" >
+       子集渲染1
+     </AuthBtn>
+     <AuthBtn path="/dom/edit" disabled >
+       <button>子集渲染2</button>
+     </AuthBtn>
+      <AuthBtn path="/dom/edit1" disabled >
+       <button>子集渲染3</button>
+     </AuthBtn>
+      <AuthBtn path="/dom/edit1"  >
+       <button>子集渲染4</button>
+     </AuthBtn>
+   </div>
+  )
+}
+export default Demos
+```

examples/website/src/pages/auth/index.tsx

@@ -0,0 +1,5 @@
+import Preview from '../../components/Preview';
+
+const Page = () => <Preview path={() => import('./README.md')} />;
+
+export default Page;

examples/website/src/pages/newPages/README.md

@@ -1,6 +1,32 @@
 # 新增页面
 这里的『页面』指配置了路由，能够通过链接直接访问的模块，要新建一个页面，通常可以在脚手架的基础上进行简单的配置。
 
+## 页面代码结构推荐
+为了让项目代码组织更加规范，让开发能够更方便的定位到相关页面组件代码，我们定义了一套规范，该规范当前只作为推荐的指导，并非强制。
+```bash
+src
+├── components
+└── pages
+    ├── Welcome        // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
+    |   ├── components // 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
+    |   ├── Form.tsx
+    |   ├── index.tsx  // 页面组件的代码
+    |   └── index.less // 页面样式
+    ├── Order          // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
+    |   ├── index.tsx
+    |   └── index.less
+    ├── User
+    |   ├── components // group 下公用的组件集合
+    |   ├── Login      // group 下的页面 Login
+    |   ├── Register   // group 下的页面 Register
+    |   └── util.ts    // 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
+    └── *              // 其它页面组件代码
+```
+
+所有路由组件（会配置在路由配置中的组件）我们推荐以大驼峰命名打平到 pages 下面第一级（复杂的项目可以增加 group 层级，在 group 下放置 pages）。不建议在路由组件内部再嵌套路由组件 - 不方便分辨一个组件是否是路由组件，而且不方便快速从全局定位到路由组件。
+
+我们推荐尽可能的拆分路由组件为更细粒度的组件，对于多个页面可能会用到的组件我们推荐放到 src/components 中，对于只是被单个页面依赖的（区块）组件，我们推荐就近维护到路由组件文件夹下即可。
+
 ## 手动创建
 新增 ts、less 文件
 在 src / pages 下创建新的 tsx，less 文件。 如果有多个相关页面，您可以创建一个新文件夹来放置相关文件。
@@ -26,7 +52,7 @@ export default () => {
 
 ## 新增路由
 在脚手架中我们通过嵌套路由来实现布局模板。config文件中的routes.json 是一个数组，其中第一级数据就是我们的布局，如果你需要新增布局可以再直接增加一个新的一级数据。
-```bash
+```json
 [
   {
     "path": "/dom",
@@ -36,9 +62,9 @@ export default () => {
   },
   // new
   {
-    "path": '/new',
+    "path": "/new",
     "name": "新页面",
-    "element": '@page/NewPage',
+    "element": "@page/NewPage",
     "icon": "home"
   },
 ]

examples/website/src/pages/proxy/README.md

@@ -16,34 +16,202 @@
 
 ## 在开发中使用
 
-在 Uiw Admin 中是用 proxy 更加简单在 kktprc.ts  中配置即可，配置出来可能是这样的：
+```ts
+// mocker/index.ts
+const proxy = {
+  // mocker 获取用户信息接口
+  'GET /api/user': { id: 1, username: 'kenny', sex: 6 },
+  'POST /api/user': { id: 1, username: 'kenny', sex: 6 },
+  /** 用于开发的代理服务，保持代理服务 host 的值为本机开发 IP，否则为代理服务 IP */
+  _proxy: {
+    changeHost: false,
+    /** 用于开发的代理服务 */
+    proxy: {
+      '/api/access/auth': 'http://10.10.101.96:8899/emt/',
+    },
+  }
+};
+
+module.exports = proxy;
+```
+
+## 目录文件约定
+
+约定 `./mocker/index.js`<!--rehype:style=color:white;background:#00b86c;--> 文件为 `mock` 入口文件，例如这样的目录结构：
+
+```bash {4}
+.
+├── src
+├── mocker
+│   └── index.ts       # 配置代理
+```
+
+在此文件中也可以用于**代理**的配置
+
+## 配置代理
+
+在约定 `./mocker/index.ts`<!--rehype:style=color:white;background:#00b86c;--> 文件中添加 `_proxy` 代理配置，在此配置支持**热更新**，不用重启服务。
+
+```ts
+module.exports = {
+  _proxy: {
+    proxy: {
+      // 将路径字符串（例如 /user/:name）转换为正则表达式。
+      // https://www.npmjs.com/package/path-to-regexp
+      '/repos/(.*)': 'https://api.github.com/',
+      '/:owner/:repo/raw/:ref/(.*)': 'http://127.0.0.1:2018',
+      '/api/repos/(.*)': 'http://127.0.0.1:3721/'
+    },
+    // 重写目标 url 路径。 对象键将用作正则表达式以匹配路径
+    // https://github.com/jaywcjlove/mocker-api/issues/62
+    pathRewrite: {
+      '^/api/repos/': '/repos/',
+    },
+    // 修改 host 选项，为代理服务的 IP 设为 false 禁用这一功能
+    changeHost: false,
+    // 修改 http-proxy 选项
+    httpProxy: {
+      options: {
+        ignorePath: true,
+      },
+      listeners: {
+        proxyReq: function (proxyReq, req, res, options) {
+          console.log('proxyReq');
+        },
+      },
+    },    
+  },
+};
+```
+
+## 约定代理配置
+
+在 `src` 目录中也存在约定代理配置 `src/setupProxy.js`<!--rehype:style=color:white;background:#00b86c;--> 下建立文件，如果代理选项不够灵活，您可以直接访问 **Express** 应用程序实例并连接自己的代理中间件。
+
+- 不推荐：~~`src/setupProxy.js`~~，但是更加灵活，如果代理选项不够灵活，可结合它一起使用
+- **推荐**：模拟 API 中配置代理，`./mocker/index.js`<!--rehype:style=color:white;background:#00b86c;--> 中配置，支持热更新
+
+```bash {3}
+.
+├── src
+│   └── setupProxy.js  # 配置代理
+```
 
 ```bash
-import { createProxyMiddleware } from 'http-proxy-middleware'
-import path from 'path'
-
-const kktpConfig = {
-  ...
-  proxySetup: (app) => {
-    app.use(
-      '/api',
-      createProxyMiddleware({
-        // target: 'http://192.168.188.222:33202', // 测试环境地址
-        // target: 'http://192.168.188.84:7500', // 安江锋
-        // target: 'http://192.168.188.159:7500/', // 邓伟伟
-        // target: 'http://192.168.188.81:7500/', // 曾王杰
-        // target: 'http://192.168.188.199:7500/', // 王龙飞
-        target: 'https://dtpms-dev.nihaosi.com/', //  测试环境
+$ npm install http-proxy-middleware --save
+$ # or
+$ yarn add http-proxy-middleware
+```
+
+接下来，创建 **`src/setupProxy.js`** 并在其中放置以下内容：
+
+```ts
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  // ...
+};
+```
+
+您现在可以根据需要注册代理了！下面是使用上述 **http-proxy-middleware** 的示例：
+
+```ts
+import express from 'express';
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app: express.Application) {
+  app.use(
+    '/api',
+    createProxyMiddleware({
+      target: 'http://localhost:5000',
+      changeOrigin: true,
+    })
+  );
+};
+```
+
+- 注意：您不需要在任何地方导入此文件。当您启动开发服务器时，它会自动注册。
+- 注意：此文件仅支持 Node 的 JavaScript 语法。确保只使用受支持的语言功能（即不支持~~Flow~~、~~ES~~模块等）。
+- 注意：将路径传递给代理函数允许您在路径上使用**通配符** 和/或 模式匹配，这比快速路由匹配更灵活。
+
+使用 `.kktprc.ts` 同样支持直接访问 **Express** 应用程序
+
+```javascript
+// .kktprc.ts
+import type { WebpackConfiguration, LoaderConfOptions } from 'kkt';
+import express from 'express';
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+export default {
+  // ...
+  overrideWebpack:(conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions | undefined)=>{
+    conf.proxySetup = (app: express.Application) => {
+      app.use('/api', createProxyMiddleware({
+        target: 'http://localhost:5000',
         changeOrigin: true,
-        // headers: {Authorization: 'Bearer ' + token},
-      })
-    )
-    return {
-      path: path.resolve('./mocker/index.js'),
+      }));
+    };
+    return conf;
+  }
+}
+```
+或者直接使用`proxySetup`来配置
+```ts
+// .kktprc.ts
+import express from 'express';
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+export default {
+  // ...
+  proxySetup: (app: express.Application) => {
+    app.use('/api', createProxyMiddleware({
+      target: 'http://localhost:5000',
+      changeOrigin: true,
+    }));
+  }
+}
+```
+
+## 修改约定 mocker 入口配置
+
+可以在 `.kktprc.ts`<!--rehype:style=color:white;background:#00b86c;--> 修改默认约定 [`mock`](https://www.npmjs.com/package/mocker-api) 入口配置和代理
+
+```ts
+// .kktprc.ts
+import express from 'express';
+import type { WebpackConfiguration, LoaderConfOptions } from 'kkt';
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+const proxySetup = (app: express.Application) => {
+  /** 支持直接访问 Express 应用程序 */
+  app.use('/api', createProxyMiddleware({
+    target: 'http://localhost:5000',
+    changeOrigin: true,
+  }));
+  /** Mocker API Options */
+  return {
+    path: path.resolve('./mocker/index.js'),
+    option: {
+      proxy: {
+        '/repos/(.*)': 'https://api.github.com/',
+      },
+      changeHost: false,
     }
-  },
+  }
+}
+
+/**
+ * 🚧🚧🚧 对于 webpack 不了解的，不建议使用此配置 🚧🚧🚧
+ */
+export default {
+  // ...
+  overrideWebpack:(conf: WebpackConfiguration, env: 'development' | 'production', options: LoaderConfOptions | undefined)=>{
+    // 编译用于开发或生产的 React 应用程序时要使用的 Webpack 配置
+    // ...添加你的 webpack 配置
+    conf.proxySetup = proxySetup;
+    return conf;
+  }
 }
-export default kktpConfig
 ```
 
 ## 贡献者