Merge pull request #220 from yaob421123/master

fix(Login): swr替换成@kkt/request

examples/base/package.json

@@ -24,16 +24,16 @@
     "@swc/core": ">=1.3.55"
   },
   "dependencies": {
-    "@kkt/pro": "^1.0.10",
-    "@uiw-admin/authorized": "6.1.7",
-    "@uiw-admin/basic-layouts": "6.1.7",
-    "@uiw-admin/components": "6.1.7",
-    "@uiw-admin/config": "6.1.7",
-    "@uiw-admin/document-title": "6.1.7",
-    "@uiw-admin/exceptions": "6.1.7",
-    "@uiw-admin/layout-tabs": "6.1.7",
-    "@uiw-admin/user-login": "6.1.7",
-    "@uiw-admin/utils": "6.1.7",
+    "@kkt/pro": "^1.0.13",
+    "@uiw-admin/authorized": "6.1.6",
+    "@uiw-admin/basic-layouts": "6.1.6",
+    "@uiw-admin/components": "6.1.6",
+    "@uiw-admin/config": "6.1.6",
+    "@uiw-admin/document-title": "6.1.6",
+    "@uiw-admin/exceptions": "6.1.6",
+    "@uiw-admin/layout-tabs": "6.1.6",
+    "@uiw-admin/user-login": "6.1.6",
+    "@uiw-admin/utils": "6.1.6",
     "@uiw/reset.css": "~1.0.5",
     "axios": "^0.27.0",
     "classnames": "~2.3.1",

examples/website/package.json

@@ -42,7 +42,7 @@
     "uiw": "^4.21.26"
   },
   "devDependencies": {
-    "@kkt/pro": "^1.0.10",
+    "@kkt/pro": "^1.0.13",
     "@types/react-test-renderer": "17.0.1",
     "hast": "^1.0.0",
     "rehype-rewrite": "^3.0.6",

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

@@ -1,31 +1,119 @@
 # 网络请求
-简介
-对于中后台应用来说，很大一部分工作就在于请求后端的 CRUD 的接口，为进一步降低用户对请求层的感知，我们移除了默认生成的 utils/request.ts 文件，改成通过配置化的方式暴露给开发者做请求的配置和增强处理；同时通过业务总结出一套标准的接口结构规范，并提供统一的接口解析、错误处理的能力；后续将持续完善可配置项、提供垂直场景如列表、登录失效等解决方案。
+
+对于中后台应用来说，很大一部分工作就在于请求后端的 CRUD 的接口，为进一步降低用户对请求层的感知，我们集成了接口请求方案。同时通过业务总结出一套标准的接口结构规范，并提供统一的接口解析、错误处理的能力。
+
+## @kkt/request
+
+kkt内置请求方案。配置 `queryClient`开启。 `@kkt/request` 内置了 `react-query`（和 [`@tanstack/react-query`](https://npmjs.com/@tanstack/react-query)<!--rehype:target=__blank--> 是同一个）请求方案。更多 API 方法请查看 [react-query 官方文档](https://tanstack.com/query/latest)。
+
+**`kktp`配置文件**
+
+```ts
+// .kktprc.ts
+export default {
+  queryClient: true
+}
+```
+
+```js
+import { useReactQuery, useReactMutation, queryClient, fetchFn } from '@kkt/request';
+// OR
+import { useReactQuery, useReactMutation, queryClient, fetchFn } from '@kkt/pro';
+```
+
+**useReactQuery**
+
+主要用于**默认**触发请求数据，默认 `GET` 请求，变更使用 `method="POST"` 参数配置
+
+```jsx
+useReactQuery({ 
+  queryKey: ['user', userId], 
+  url: `/api/user/list?id=${userId}`
+});
+```
+<!--rehype:style=background:#00de2247;border: 0;-->
+
+👆👆👆👆 上面是**推荐**使用 👆👆👆👆👆
+
+```jsx
+import { fetchFn, useReactQuery } from '@kkt/request';
+
+useReactQuery({ queryKey: ['user'], url: '/api/user/list' });
+useReactQuery({ queryKey: ['user'], url: '/api/user/list', method: 'POST' });
+useReactQuery({ queryKey: ['user', userId], queryFn: () => fetchFn(`/api/user/list?id=${userId}`) });
+useReactQuery({
+  queryKey: ['user', userId],
+  queryFn: async () => {
+    return fetchFn(`/api/user/list?id=${userId}`);
+  },
+});
+useReactQuery({
+  queryKey: ['user', userId],
+  queryFn: ({ queryKey }) => fetchFn(`/api/user/list?id=${queryKey[1]}`);,
+});
+useReactQuery({
+  queryKey: ['user'],
+  url: '/api/user/list',
+  initialData: [....],
+});
+
+const { isInitialLoading, isError, data, error, refetch, isFetching } = useQuery(...)
+```
+
+示例
+
+```javascript
+import { useReactQuery } from '@kkt/request';
+
+export default function HomePage() {
+  const { isLoading, isError, data } = useReactQuery({
+    url: `/api/user/list`,
+    queryKey: ['user-list'],
+  });
+
+  return (
+    <div>
+      <p className="title">x react-query</p>
+      {isError && <p>请求 API 错误 ...</p>}
+      {isLoading && <p>Loading ...</p>}
+      {data && <p>现在有 {data.stargazers_count} 颗星！</p>}
+    </div>
+  );
+}
+```
+
+更多参数及实例才考[@kkt/request](https://kktjs.github.io/kkt-pro/#/doc/request)
+
 ## request
 
-系统的请求基于axios进行了二次封装，参见[axios](https://axios-http.com/)
+`@uiw-admin/utils` 内置`request`方法。系统的请求基于axios进行了二次封装，参见[axios](https://axios-http.com/)
 
-## 方法
+```js
+import { request } from "@uiw-admin/utils"
+```
+
+**方法**
 基于restful规范，提供了2个方法：
 - get 获取服务端数据，参数拼接在url上，以 query string 方式发送给后端
 - post 新增数据，参数以body形式发送给后端
 
 
-## 参数
+**参数**
 
 | 参数    | 说明     | 类型           | 默认值 |
 | :------ | :------- | :------------- | :----- |
 | url | 请求地址 | string        | -      |
 | options   | 请求配置，即axios的配置，     | Options         | -     |
 
-### Options
+**Options**
 | 参数    | 说明     | 类型           | 默认值 |
 | :------ | :------- | :------------- | :----- |
 | body | 请求传递给后端的参数 | any      | -      |
 | requestType   | 数据格式    | 'form' 或 'json' 或 'urlencoded'        | -     |
 
-## 调用方式
-### ✨配和swr调用
+**调用方式**
+
+**✨配和swr调用**
 > 如果已全局配置过swr,可不用传入request
 
 ```tsx
@@ -55,7 +143,8 @@ export default const Index = () => {
 }
 
 ```
-### 在rematch中使用
+**在rematch中使用**
+
 > 在servers/index.js中
 ```ts
 import { request } from "@uiw-admin/utils"

package.json

@@ -94,7 +94,7 @@
     "lint-staged": "~12.5.0",
     "prettier": "^2.7.0",
     "recursive-readdir-files": "1.1.2",
-    "tsbb": "^4.1.4",
+    "tsbb": "^4.1.5",
     "webpack-bundle-analyzer": "~4.5.0"
   },
   "resolutions": {

packages/basic-layouts/package.json

@@ -44,8 +44,8 @@
   },
   "dependencies": {
     "@babel/runtime": "~7.21.0",
-    "@kkt/pro": "^1.0.10",
-    "@uiw-admin/document-title": "6.1.7",
+    "@kkt/pro": "^1.0.13",
+    "@uiw-admin/document-title": "6.1.6",
     "classnames": "2.3.1",
     "pinyin": "~2.11.2"
   },

packages/user-login/README.md

@@ -32,7 +32,7 @@ const UserLayout = () => {
           sessionStorage.setItem("token", data.token)
           sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
         } else {
-         Notify.error({ title: "错误通知", description: data.message || "请求失败" })
+         Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
         }
       }}
     />
@@ -61,7 +61,7 @@ const UserLayout = () => {
           sessionStorage.setItem("token", data.token)
           sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
         } else {
-          Notify.error({ title: "错误通知", description: data.message || "请求失败" })
+          Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
         }
       }}
     />
@@ -95,7 +95,7 @@ const UserLayout = () => {
           sessionStorage.setItem("token", data.token)
           sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
         } else {
-          Notify.error({ title: "错误通知", description: data.message || "请求失败" })
+          Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
         }
       }}
     />
@@ -128,7 +128,7 @@ const UserLayout = () => {
           sessionStorage.setItem("token", data.token)
           sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
         } else {
-          Notify.error({ title: "错误通知", description: data.message || "请求失败" })
+          Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
         }
       }}
     />
@@ -158,7 +158,7 @@ const UserLayout = () => {
           sessionStorage.setItem("token", data.token)
           sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
         } else {
-          Notify.error({ title: "错误通知", description: data.message || "请求失败" })
+          Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
         }
       }}
     />
@@ -202,7 +202,7 @@ const UserLayout = () => {
           sessionStorage.setItem("token", data.token)
           sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
         } else {
-          Notify.error({ title: "错误通知", description: data.message || "请求失败" })
+          Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
         }
       }}
     />
@@ -247,7 +247,7 @@ const UserLayout = () => {
           sessionStorage.setItem("token", data.token)
           sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
         } else {
-          Notify.error({ title: "错误通知", description: data.message || "请求失败" })
+          Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
         }
       }}
     />
@@ -285,7 +285,7 @@ const UserLayout = () => {
           sessionStorage.setItem("token", data.token)
           sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
         } else {
-          Notify.error({ title: "错误通知", description: data.message || "请求失败" })
+          Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
         }
       }}
     />
@@ -317,7 +317,7 @@ const UserLayout = () => {
           sessionStorage.setItem("token", data.token)
           sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
         } else {
-          Notify.error({ title: "错误通知", description: data.message || "请求失败" })
+          Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
         }
       }}
     />
@@ -347,7 +347,7 @@ const UserLayout = () => {
           sessionStorage.setItem("token", data.token)
           sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
         } else {
-          Notify.error({ title: "错误通知", description: data.message || "请求失败" })
+          Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
         }
       }}
     />
@@ -377,7 +377,7 @@ const UserLayout = () => {
           sessionStorage.setItem("token", data.token)
           sessionStorage.setItem("auth", JSON.stringify(data.authList || []))
         } else {
-          Notify.error({ title: "错误通知", description: data.message || "请求失败" })
+          Notify.error({ title: "错误通知", description: data?.message || "请求失败" })
         }
       }}
     />

packages/user-login/package.json

@@ -45,6 +45,7 @@
   },
   "dependencies": {
     "@uiw-admin/document-title": "6.1.7",
+    "@kkt/request": "^1.0.13",
     "classnames": "^2.3.1"
   },
   "devDependencies": {
@@ -55,7 +56,6 @@
     "@uiw-admin/utils": "6.1.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "swr": "^1.3.0",
     "uiw": "^4.21.26"
   }
 }