chore: update documentation and deps (#4510)

* chore: update docs

* chore: update deps

* chore: update action

* fix: reset after preferences are refreshed

* fix: ci error

docs/src/en/guide/essentials/server.md

@@ -163,6 +163,8 @@ The `src/api/request.ts` within the application can be configured according to t
 /**
  * This file can be adjusted according to business logic
  */
+import type { HttpResponse } from '@vben/request';
+
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
@@ -227,7 +229,7 @@ function createRequestClient(baseURL: string) {
   });
 
   // Deal Response Data
-  client.addResponseInterceptor({
+  client.addResponseInterceptor<HttpResponse>({
     fulfilled: (response) => {
       const { data: responseData, status } = response;
 
@@ -253,7 +255,10 @@ function createRequestClient(baseURL: string) {
 
   // Generic error handling; if none of the above error handling logic is triggered, it will fall back to this.
   client.addResponseInterceptor(
-    errorMessageResponseInterceptor((msg: string) => message.error(msg)),
+    errorMessageResponseInterceptor((msg: string, _error) => {
+      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+      message.error(msg);
+    }),
   );
 
   return client;

docs/src/en/guide/in-depth/login.md

@@ -37,8 +37,6 @@ If you want to adjust the content of the login form, you can configure the `Auth
 ```vue
 <AuthenticationLogin
   :loading="authStore.loginLoading"
-  password-placeholder="123456"
-  username-placeholder="vben"
   @submit="authStore.authLogin"
 />
 ```

docs/src/guide/essentials/server.md

@@ -163,6 +163,8 @@ export async function deleteUserApi(user: UserInfo) {
 /**
  * 该文件可自行根据业务逻辑进行调整
  */
+import type { HttpResponse } from '@vben/request';
+
 import { useAppConfig } from '@vben/hooks';
 import { preferences } from '@vben/preferences';
 import {
@@ -230,7 +232,7 @@ function createRequestClient(baseURL: string) {
   });
 
   // response数据解构
-  client.addResponseInterceptor({
+  client.addResponseInterceptor<HttpResponse>({
     fulfilled: (response) => {
       const { data: responseData, status } = response;
 
@@ -256,7 +258,10 @@ function createRequestClient(baseURL: string) {
 
   // 通用的错误处理,如果没有进入上面的错误处理逻辑，就会进入这里
   client.addResponseInterceptor(
-    errorMessageResponseInterceptor((msg: string) => message.error(msg)),
+    errorMessageResponseInterceptor((msg: string, _error) => {
+      // 这里可以根据业务进行定制,你可以拿到 error 内的信息进行定制化处理，根据不同的 code 做不同的提示，而不是直接使用 message.error 提示 msg
+      message.error(msg);
+    }),
   );
 
   return client;

docs/src/guide/in-depth/login.md

@@ -1,10 +1,14 @@
+---
+outline: deep
+---
+
 # 登录
 
-本文介绍如何去改造自己的应用程序登录页。
+本文介绍如何去改造自己的应用程序登录页以及如何快速的对接登录页面接口。
 
 ## 登录页面调整
 
-如果你想调整登录页面的标题、描述和图标以及工具栏，你可以通过配置 `AuthPageLayout` 组件的 `props` 参数来实现。
+如果你想调整登录页面的标题、描述和图标以及工具栏，你可以通过配置 `AuthPageLayout` 组件的参数来实现。
 
 ![login](/guide/login.png)
 
@@ -30,8 +34,6 @@
 ```vue
 <AuthenticationLogin
   :loading="authStore.loginLoading"
-  password-placeholder="123456"
-  username-placeholder="vben"
   @submit="authStore.authLogin"
 />
 ```
@@ -108,8 +110,111 @@
 
 :::
 
-::: tip
+::: tip Note
 
-如果这些配置不能满足你的需求，你可以自行实现登录表单及相关登录逻辑。
+如果这些配置不能满足你的需求，你可以自行实现登录表单及相关登录逻辑或者给我们提交 `PR`。
 
 :::
+
+## 接口对接流程
+
+这里将会快速的介绍如何快速对接自己的后端。
+
+### 前置条件
+
+- 首先文档用的后端服务，接口返回的格式统一如下：
+
+```ts
+interface HttpResponse<T = any> {
+  /**
+   * 0 表示成功 其他表示失败
+   * 0 means success, others means fail
+   */
+  code: number;
+  data: T;
+  message: string;
+}
+```
+
+如果你不符合这个格式，你需要先阅读 [服务端交互](../essentials/server.md) 文档，改造你的`request.ts`配置。
+
+- 其次你需要在先将本地代理地址改为你的真实后端地址，你可以在应用下的 `vite.config.mts` 内配置：
+
+```ts
+import { defineConfig } from '@vben/vite-config';
+
+export default defineConfig(async () => {
+  return {
+    vite: {
+      server: {
+        proxy: {
+          '/api': {
+            changeOrigin: true,
+            rewrite: (path) => path.replace(/^\/api/, ''),
+            // 这里改为你的真实接口地址
+            target: 'http://localhost:5320/api',
+            ws: true,
+          },
+        },
+      },
+    },
+  };
+});
+```
+
+### 登录接口
+
+为了能正常登录，你的后端最少需要提供 `2-3` 个接口：
+
+- 登录接口
+
+接口地址可在应用下的 `src/api/core/auth` 内修改，以下为默认接口地址：
+
+```ts
+/**
+ * 登录
+ */
+export async function loginApi(data: AuthApi.LoginParams) {
+  return requestClient.post<AuthApi.LoginResult>('/auth/login', data);
+}
+
+/** 只需要保证登录接口返回值有 `accessToken` 字段即可 */
+export interface LoginResult {
+  accessToken: string;
+}
+```
+
+- 获取用户信息接口
+
+接口地址可在应用下的 `src/api/core/user` 内修改，以下为默认接口地址：
+
+```ts
+export async function getUserInfoApi() {
+  return requestClient.get<UserInfo>('/user/info');
+}
+
+/** 只需要保证登录接口返回值有以下字段即可，多的字段可以自行使用 */
+export interface UserInfo {
+  roles: string[];
+  realName: string;
+}
+```
+
+- 获取权限码 (可选)
+
+这个接口用于获取用户的权限码，权限码是用于控制用户的权限的，接口地址可在应用下的 `src/api/core/auth` 内修改，以下为默认接口地址：
+
+```ts
+export async function getAccessCodesApi() {
+  return requestClient.get<string[]>('/auth/codes');
+}
+```
+
+如果你不需要这个权限，你只需要把代码改为返回一个空数组即可。
+
+```ts {2}
+export async function getAccessCodesApi() {
+  // 这里返回一个空数组即可
+  return [];
+}
+```

docs/src/guide/introduction/thin.md

@@ -1,3 +1,7 @@
+---
+outline: deep
+---
+
 # 精简版本
 
 从 `5.0` 版本开始，我们不再提供精简的仓库或者分支。我们的目标是提供一个更加一致的开发体验，同时减少维护成本。在这里，我们将如何介绍自己的项目，如何去精简以及移除不需要的功能。
@@ -74,3 +78,17 @@ pnpm install
 - `.github` 文件夹用于存放 GitHub 的配置文件
 - `.vscode` 文件夹用于存放 VSCode 的配置文件，如果你使用其他编辑器，可以删除
 - `./scripts/deploy` 文件夹用于存放部署脚本，如果你不需要docker部署，可以删除
+
+## 应用精简
+
+当你确定了某个应用，你还可以进一步精简：
+
+### 删除不需要的路由及页面
+
+- 在应用的 `src/router/routes` 文件中，你可以删除不需要的路由。其中 `core` 文件夹内，如果只需要登录和忘记密码，你可以删除其他路由，如忘记密码、注册等。路由删除后，你可以删除对应的页面文件，在 `src/views/_core` 文件夹中。
+
+- 在应用的 `src/router/routes` 文件中，你可以按需求删除不需要的路由，如`demos`、`vben` 目录等。路由删除后，你可以删除对应的页面文件，在 `src/views` 文件夹中。
+
+### 删除不需要的组件
+
+- 在应用的 `packages/effects/common-ui/src/ui` 文件夹中，你可以删除不需要的组件，如`about`、`dashboard` 目录等。删除之前请先确保你的路由中没有引用到这些组件。