feat: use simpler nitro instead of nestjs to implement mock service

apps/web-antd/src/apis/core/auth.ts

@@ -0,0 +1,17 @@
+import type { UserApi } from '../types';
+
+import { requestClient } from '#/forward';
+
+/**
+ * 登录
+ */
+export async function login(data: UserApi.LoginParams) {
+  return requestClient.post<UserApi.LoginResult>('/auth/login', data);
+}
+
+/**
+ * 获取用户权限码
+ */
+export async function getAccessCodes() {
+  return requestClient.get<string[]>('/auth/codes');
+}

apps/web-antd/src/apis/core/index.ts

@@ -1,3 +1,3 @@
+export * from './auth';
 export * from './menu';
-export * from './mock';
 export * from './user';

apps/web-antd/src/apis/core/menu.ts

@@ -5,8 +5,6 @@ import { requestClient } from '#/forward';
 /**
  * 获取用户所有菜单
  */
-async function getAllMenus() {
-  return requestClient.get<RouteRecordStringComponent[]>('/menu/getAll');
+export async function getAllMenus() {
+  return requestClient.get<RouteRecordStringComponent[]>('/menu/all');
 }
-
-export { getAllMenus };

apps/web-antd/src/apis/core/user.ts

@@ -0,0 +1,10 @@
+import type { UserInfo } from '@vben/types';
+
+import { requestClient } from '#/forward';
+
+/**
+ * 获取用户信息
+ */
+export async function getUserInfo() {
+  return requestClient.get<UserInfo>('/user/info');
+}

apps/web-antd/src/apis/demos/index.ts

@@ -0,0 +1 @@
+export * from './status';

apps/web-antd/src/apis/demos/status.ts

@@ -4,7 +4,7 @@ import { requestClient } from '#/forward';
  * 模拟任意状态码
  */
 async function getMockStatus(status: string) {
-  return requestClient.get('/mock/status', { params: { status } });
+  return requestClient.get('/status', { params: { status } });
 }
 
 export { getMockStatus };

apps/web-antd/src/apis/index.ts

@@ -1,2 +1,3 @@
-export * from './modules';
+export * from './core';
+export * from './demos';
 export type * from './types';

apps/web-antd/src/apis/modules/user.ts

@@ -1,28 +0,0 @@
-import type { UserInfo } from '@vben/types';
-
-import type { UserApi } from '../types';
-
-import { requestClient } from '#/forward';
-
-/**
- * 登录
- */
-async function userLogin(data: UserApi.LoginParams) {
-  return requestClient.post<UserApi.LoginResult>('/auth/login', data);
-}
-
-/**
- * 获取用户信息
- */
-async function getUserInfo() {
-  return requestClient.get<UserInfo>('/auth/getUserInfo');
-}
-
-/**
- * 获取用户权限码
- */
-async function getAccessCodes() {
-  return requestClient.get<string[]>('/auth/getAccessCodes');
-}
-
-export { getAccessCodes, getUserInfo, userLogin };

apps/web-antd/src/forward/request.ts

@@ -25,8 +25,8 @@ function createRequestClient() {
         tokenHandler: () => {
           const accessStore = useAccessStore();
           return {
-            refreshToken: `Bearer ${accessStore.refreshToken}`,
-            token: `Bearer ${accessStore.accessToken}`,
+            refreshToken: `${accessStore.refreshToken}`,
+            token: `${accessStore.accessToken}`,
           };
         },
         unAuthorizedHandler: async () => {

apps/web-antd/src/locales/langs/en-US.json

@@ -38,11 +38,14 @@
         "title": "Features",
         "hideChildrenInMenu": "Hide Menu Children",
         "loginExpired": "Login Expired",
-        "breadcrumbNavigation": "Breadcrumb Navigation",
-        "breadcrumbLateral": "Lateral Mode",
-        "breadcrumbLateralDetail": "Lateral Mode Detail",
-        "breadcrumbLevel": "Level Mode",
-        "breadcrumbLevelDetail": "Level Mode Detail"
+        "tabs": "Tabs"
+      },
+      "breadcrumb": {
+        "navigation": "Breadcrumb Navigation",
+        "lateral": "Lateral Mode",
+        "lateralDetail": "Lateral Mode Detail",
+        "level": "Level Mode",
+        "levelDetail": "Level Mode Detail"
       }
     }
   }

apps/web-antd/src/locales/langs/zh-CN.json

@@ -40,11 +40,14 @@
         "title": "功能",
         "hideChildrenInMenu": "隐藏子菜单",
         "loginExpired": "登录过期",
-        "breadcrumbNavigation": "面包屑导航",
-        "breadcrumbLateral": "平级模式",
-        "breadcrumbLevel": "层级模式",
-        "breadcrumbLevelDetail": "层级模式详情",
-        "breadcrumbLateralDetail": "平级模式详情"
+        "tabs": "标签页"
+      },
+      "breadcrumb": {
+        "navigation": "面包屑导航",
+        "lateral": "平级模式",
+        "level": "层级模式",
+        "levelDetail": "层级模式详情",
+        "lateralDetail": "平级模式详情"
       }
     }
   }

apps/web-antd/src/router/routes/modules/demos.ts

@@ -16,6 +16,7 @@ const routes: RouteRecordRaw[] = [
     path: '/demos',
     redirect: '/demos/access',
     children: [
+      // 权限控制
       {
         meta: {
           icon: 'mdi:shield-key-outline',
@@ -87,6 +88,7 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      // 功能
       {
         meta: {
           icon: 'mdi:feature-highlight',
@@ -94,8 +96,17 @@ const routes: RouteRecordRaw[] = [
         },
         name: 'Features',
         path: 'features',
-        redirect: '/demos/features/hide-menu-children',
+        redirect: '/demos/features/tabs',
         children: [
+          {
+            name: 'FeatureTabsDemo',
+            path: 'tabs',
+            component: () => import('#/views/demos/features/tabs/index.vue'),
+            meta: {
+              icon: 'lucide:app-window',
+              title: $t('page.demos.features.tabs'),
+            },
+          },
           {
             name: 'HideChildrenInMenuParent',
             path: 'hide-children-in-menu',
@@ -127,62 +138,61 @@ const routes: RouteRecordRaw[] = [
               title: $t('page.demos.features.loginExpired'),
             },
           },
+        ],
+      },
+      // 面包屑导航
+      {
+        name: 'BreadcrumbDemos',
+        path: 'breadcrumb',
+        meta: {
+          icon: 'lucide:navigation',
+          title: $t('page.demos.breadcrumb.navigation'),
+        },
+        redirect: '/demos/breadcrumb/lateral',
+        children: [
           {
-            name: 'BreadcrumbDemos',
-            path: 'breadcrumb',
+            name: 'BreadcrumbLateral',
+            path: 'lateral',
+            component: () => import('#/views/demos/breadcrumb/lateral.vue'),
             meta: {
               icon: 'lucide:navigation',
-              title: $t('page.demos.features.breadcrumbNavigation'),
+              title: $t('page.demos.breadcrumb.lateral'),
             },
+          },
+          {
+            name: 'BreadcrumbLateralDetail',
+            path: 'lateral-detail',
+            component: () =>
+              import('#/views/demos/breadcrumb/lateral-detail.vue'),
+            meta: {
+              activePath: '/demos/breadcrumb/lateral',
+              hideInMenu: true,
+              title: $t('page.demos.breadcrumb.lateralDetail'),
+            },
+          },
+          {
+            name: 'BreadcrumbLevel',
+            path: 'level',
+            meta: {
+              icon: 'lucide:navigation',
+              title: $t('page.demos.breadcrumb.level'),
+            },
+            redirect: '/demos/breadcrumb/level/detail',
             children: [
               {
-                name: 'BreadcrumbLateral',
-                path: 'lateral',
+                name: 'BreadcrumbLevelDetail',
+                path: 'detail',
                 component: () =>
-                  import('#/views/demos/features/breadcrumb/lateral.vue'),
+                  import('#/views/demos/breadcrumb/level-detail.vue'),
                 meta: {
-                  icon: 'lucide:navigation',
-                  title: $t('page.demos.features.breadcrumbLateral'),
+                  title: $t('page.demos.breadcrumb.levelDetail'),
                 },
               },
-              {
-                name: 'BreadcrumbLateralDetail',
-                path: 'lateral-detail',
-                component: () =>
-                  import(
-                    '#/views/demos/features/breadcrumb/lateral-detail.vue'
-                  ),
-                meta: {
-                  activePath: '/demos/features/breadcrumb/lateral',
-                  hideInMenu: true,
-                  title: $t('page.demos.features.breadcrumbLateralDetail'),
-                },
-              },
-              {
-                name: 'BreadcrumbLevel',
-                path: 'level',
-                meta: {
-                  icon: 'lucide:navigation',
-                  title: $t('page.demos.features.breadcrumbLevel'),
-                },
-                children: [
-                  {
-                    name: 'BreadcrumbLevelDetail',
-                    path: 'detail',
-                    component: () =>
-                      import(
-                        '#/views/demos/features/breadcrumb/level-detail.vue'
-                      ),
-                    meta: {
-                      title: $t('page.demos.features.breadcrumbLevelDetail'),
-                    },
-                  },
-                ],
-              },
             ],
           },
         ],
       },
+      // 缺省页
       {
         meta: {
           icon: 'mdi:lightbulb-error-outline',
@@ -231,6 +241,7 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      // 菜单徽标
       {
         meta: {
           badgeType: 'dot',
@@ -275,6 +286,7 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      // 外部链接
       {
         meta: {
           icon: 'ic:round-settings-input-composite',
@@ -350,6 +362,7 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
+      // 嵌套菜单
       {
         meta: {
           icon: 'ic:round-menu',

apps/web-antd/src/router/routes/modules/vben.ts

@@ -10,11 +10,12 @@ const routes: RouteRecordRaw[] = [
     component: BasicLayout,
     meta: {
       badgeType: 'dot',
+      badgeVariants: 'destructive',
       icon: VBEN_LOGO_URL,
       order: 9999,
-      title: 'Vben',
+      title: $t('page.vben.title'),
     },
-    name: 'AboutLayout',
+    name: 'VbenProject',
     path: '/vben-admin',
     redirect: '/vben-admin/about',
     children: [
@@ -24,6 +25,7 @@ const routes: RouteRecordRaw[] = [
         component: () => import('#/views/_core/vben/about/index.vue'),
         meta: {
           badgeType: 'dot',
+          badgeVariants: 'destructive',
           icon: 'lucide:copyright',
           title: $t('page.vben.about'),
         },

apps/web-antd/src/store/modules/access.ts

@@ -11,7 +11,7 @@ import { useCoreAccessStore } from '@vben-core/stores';
 import { notification } from 'ant-design-vue';
 import { defineStore } from 'pinia';
 
-import { getAccessCodes, getUserInfo, userLogin } from '#/apis';
+import { getAccessCodes, getUserInfo, login } from '#/apis';
 import { $t } from '#/locales';
 
 export const useAccessStore = defineStore('access', () => {
@@ -53,7 +53,7 @@ export const useAccessStore = defineStore('access', () => {
     let userInfo: UserInfo | null = null;
     try {
       loading.value = true;
-      const { accessToken, refreshToken } = await userLogin(params);
+      const { accessToken, refreshToken } = await login(params);
 
       // 如果成功获取到 accessToken
       // If accessToken is successfully obtained

apps/web-antd/src/views/demos/access/button-control.vue

@@ -57,9 +57,9 @@ async function changeAccount(role: string) {
       <div class="text-foreground/80 mt-2">切换不同的账号，观察按钮变化。</div>
     </div>
 
-    <div class="card-box mt-5 p-5 font-semibold">
+    <div class="card-box mt-5 p-5">
       <div class="mb-3">
-        <span class="text-lg">当前角色:</span>
+        <span class="text-lg font-semibold">当前角色:</span>
         <span class="text-primary mx-4 text-lg">
           {{ accessStore.userRoles?.[0] }}
         </span>
@@ -81,45 +81,42 @@ async function changeAccount(role: string) {
       </Button>
     </div>
 
-    <div class="card-box mt-5 p-5 font-semibold">
-      <div class="mb-3 text-lg">组件形式控制 - 权限码方式</div>
-      <AccessControl :permissions="['AC_100100']" type="code">
+    <div class="card-box mt-5 p-5">
+      <div class="mb-3 text-lg font-semibold">组件形式控制 - 权限码方式</div>
+      <AccessControl :codes="['AC_100100']" type="code">
         <Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
       </AccessControl>
-      <AccessControl :permissions="['AC_100030']" type="code">
+      <AccessControl :codes="['AC_100030']" type="code">
         <Button class="mr-4"> Admin 账号可见 ["AC_100010"] </Button>
       </AccessControl>
-      <AccessControl :permissions="['AC_1000001']" type="code">
+      <AccessControl :codes="['AC_1000001']" type="code">
         <Button class="mr-4"> User 账号可见 ["AC_1000001"] </Button>
       </AccessControl>
-      <AccessControl :permissions="['AC_100100', 'AC_100010']" type="code">
+      <AccessControl :codes="['AC_100100', 'AC_100010']" type="code">
         <Button class="mr-4">
           Super & Admin 账号可见 ["AC_100100","AC_1000001"]
         </Button>
       </AccessControl>
     </div>
 
-    <div
-      v-if="accessMode === 'frontend'"
-      class="card-box mt-5 p-5 font-semibold"
-    >
-      <div class="mb-3 text-lg">组件形式控制 - 用户角色方式</div>
-      <AccessControl :permissions="['super']">
+    <div v-if="accessMode === 'frontend'" class="card-box mt-5 p-5">
+      <div class="mb-3 text-lg font-semibold">组件形式控制 - 用户角色方式</div>
+      <AccessControl :codes="['super']">
         <Button class="mr-4"> Super 角色可见 </Button>
       </AccessControl>
-      <AccessControl :permissions="['admin']">
+      <AccessControl :codes="['admin']">
         <Button class="mr-4"> Admin 角色可见 </Button>
       </AccessControl>
-      <AccessControl :permissions="['user']">
+      <AccessControl :codes="['user']">
         <Button class="mr-4"> User 角色可见 </Button>
       </AccessControl>
-      <AccessControl :permissions="['super', 'admin']">
+      <AccessControl :codes="['super', 'admin']">
         <Button class="mr-4"> Super & Admin 角色可见 </Button>
       </AccessControl>
     </div>
 
-    <div class="card-box mt-5 p-5 font-semibold">
-      <div class="mb-3 text-lg">函数形式控制</div>
+    <div class="card-box mt-5 p-5">
+      <div class="mb-3 text-lg font-semibold">函数形式控制</div>
       <Button v-if="hasAccessByCodes(['AC_100100'])" class="mr-4">
         Super 账号可见 ["AC_1000001"]
       </Button>

apps/web-antd/src/views/demos/access/index.vue

@@ -67,8 +67,8 @@ async function handleToggleAccessMode() {
       </div>
     </div>
 
-    <div class="card-box mt-5 p-5 font-semibold">
-      <span class="text-lg">当前权限模式:</span>
+    <div class="card-box mt-5 p-5">
+      <span class="text-lg font-semibold">当前权限模式:</span>
       <span class="text-primary mx-4">{{
         accessMode === 'frontend' ? '前端权限控制' : '后端权限控制'
       }}</span>
@@ -76,9 +76,9 @@ async function handleToggleAccessMode() {
         切换为{{ accessMode === 'frontend' ? '后端' : '前端' }}权限模式
       </Button>
     </div>
-    <div class="card-box mt-5 p-5 font-semibold">
+    <div class="card-box mt-5 p-5">
       <div class="mb-3">
-        <span class="text-lg">当前账号:</span>
+        <span class="text-lg font-semibold">当前账号:</span>
         <span class="text-primary mx-4 text-lg">
           {{ accessStore.userRoles?.[0] }}
         </span>

apps/web-antd/src/views/demos/features/login-expired/index.vue

@@ -23,17 +23,21 @@ async function handleClick(type: LoginExpiredModeType) {
     <div class="card-box p-5">
       <h1 class="text-xl font-semibold">登录过期演示</h1>
       <div class="text-foreground/80 mt-2">
-        401状态码转到登录页，登录成功后跳转回原页面。
+        接口请求遇到401状态码时，需要重新登录。有两种方式：
+        <div>1.转到登录页，登录成功后跳转回原页面</div>
+        <div>
+          2.弹出重新登录弹窗，登录后关闭弹窗，不进行任何页面跳转（刷新后调整登录页面）
+        </div>
       </div>
     </div>
 
-    <div class="card-box mt-5 p-5 font-semibold">
-      <div class="mb-3 text-lg">跳转登录页面方式</div>
+    <div class="card-box mt-5 p-5">
+      <div class="mb-3 text-lg font-semibold">跳转登录页面方式</div>
       <Button type="primary" @click="handleClick('page')"> 点击触发 </Button>
     </div>
 
-    <div class="card-box mt-5 p-5 font-semibold">
-      <div class="mb-3 text-lg">登录弹窗方式</div>
+    <div class="card-box mt-5 p-5">
+      <div class="mb-3 text-lg font-semibold">登录弹窗方式</div>
       <Button type="primary" @click="handleClick('modal')"> 点击触发 </Button>
     </div>
   </div>

apps/web-antd/src/views/demos/features/tabs/index.vue

@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+import { useRouter } from 'vue-router';
+
+import { useTabs } from '@vben/hooks';
+
+import { Button } from 'ant-design-vue';
+
+defineOptions({ name: 'FeatureTabsDemo' });
+
+const router = useRouter();
+// const newTabTitle = ref('');
+const {
+  closeAllTabs,
+  closeCurrentTab,
+  closeLeftTabs,
+  closeOtherTabs,
+  closeRightTabs,
+  closeTabByKey,
+  refreshTab,
+} = useTabs();
+
+function openTab() {
+  // 这里就是路由跳转，也可以用path
+  router.push({ name: 'VbenAbout' });
+}
+</script>
+
+<template>
+  <div class="p-5">
+    <div class="card-box p-5">
+      <h1 class="text-xl font-semibold">标签页</h1>
+      <div class="text-foreground/80 mt-2">用于需要操作标签页的场景</div>
+    </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="text-lg font-semibold">打开/关闭标签页</div>
+      <div class="text-foreground/80 my-3">
+        如果标签页存在，直接跳转切换。如果标签页不存在，则打开新的标签页。
+      </div>
+      <div class="flex flex-wrap gap-3">
+        <Button type="primary" @click="openTab"> 打开 "关于" 标签页 </Button>
+        <Button type="primary" @click="closeTabByKey('/vben-admin/about')">
+          关闭 "关于" 标签页
+        </Button>
+      </div>
+    </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="text-lg font-semibold">标签页操作</div>
+      <div class="text-foreground/80 my-3">用于动态控制标签页的各种操作</div>
+      <div class="flex flex-wrap gap-3">
+        <Button type="primary" @click="closeCurrentTab()">
+          关闭当前标签页
+        </Button>
+        <Button type="primary" @click="closeLeftTabs()">
+          关闭左侧标签页
+        </Button>
+        <Button type="primary" @click="closeRightTabs()">
+          关闭右侧标签页
+        </Button>
+        <Button type="primary" @click="closeAllTabs()"> 打开所有标签页 </Button>
+        <Button type="primary" @click="closeOtherTabs()">
+          关闭其他标签页
+        </Button>
+        <Button type="primary" @click="refreshTab()"> 刷新当前标签页 </Button>
+      </div>
+    </div>
+
+    <div class="card-box mt-5 p-5">
+      <div class="text-lg font-semibold">动态标题</div>
+      <div class="text-foreground/80 my-3">
+        该操作不会影响页面标题，仅修改Tab标题
+      </div>
+      <!-- <div class="flex flex-wrap items-center gap-3">
+        <Input
+          v-model="newTabTitle"
+          class="w-30"
+          placeholder="请输入新的标题"
+        />
+        <Button type="primary" @click="closeCurrentTab()">
+          关闭当前标签页 {{ newTabTitle }}
+        </Button>
+      </div> -->
+    </div>
+  </div>
+</template>