chore: update access demo

apps/backend-mock/src/modules/menu/menu.controller.ts

@@ -118,6 +118,17 @@ export class MenuController {
                     title: 'page.demos.access.buttonControl',
                   },
                 },
+                {
+                  name: 'AccessMenuVisible403',
+                  path: 'menu-visible-403',
+                  component: '/demos/access/menu-visible-403',
+                  meta: {
+                    authority: ['no-body'],
+                    icon: 'mdi:button-cursor',
+                    menuVisibleWithForbidden: true,
+                    title: 'page.demos.access.menuVisible403',
+                  },
+                },
                 roleWithMenus[role],
               ],
             },

apps/web-antd/src/views/demos/access/admin-visible.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/universal-ui';
 
-defineOptions({ name: 'AccessFrontendAccessTest2' });
+defineOptions({ name: 'AccessAdminVisible' });
 </script>
 
 <template>

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

@@ -9,7 +9,7 @@ import { Button } from 'ant-design-vue';
 
 import { useAccessStore, useAppStore } from '#/store';
 
-defineOptions({ name: 'AccessBackend' });
+defineOptions({ name: 'AccessButtonControl' });
 
 const accounts: Record<string, LoginAndRegisterParams> = {
   admin: {
@@ -41,7 +41,7 @@ async function changeAccount(role: string) {
   }
 
   const account = accounts[role];
-  await appStore.resetAppState();
+  appStore.resetAppState();
   await accessStore.authLogin(account, async () => {
     router.go(0);
   });
@@ -51,68 +51,68 @@ async function changeAccount(role: string) {
 <template>
   <div class="p-5">
     <div class="card-box p-5">
-      <h1 class="text-xl font-semibold">后端页面访问权限演示</h1>
+      <h1 class="text-xl font-semibold">
+        {{ accessMode === 'frontend' ? '前端' : '后端' }}页面访问权限演示
+      </h1>
       <div class="text-foreground/80 mt-2">切换不同的账号，观察按钮变化。</div>
     </div>
 
-    <template v-if="accessMode === 'backend'">
+    <div class="card-box mt-5 p-5 font-semibold">
-      <div class="card-box mt-5 p-5 font-semibold">
+      <div class="mb-3">
-        <div class="mb-3">
+        <span class="text-lg">当前账号:</span>
-          <span class="text-lg">当前账号:</span>
+        <span class="text-primary mx-4">
-          <span class="text-primary mx-4">
+          {{ accessStore.userRoles }}
-            {{ accessStore.userRoles }}
+        </span>
-          </span>
-        </div>
-
-        <Button :type="roleButtonType('super')" @click="changeAccount('super')">
-          切换为 Super 账号
-        </Button>
-
-        <Button
-          :type="roleButtonType('admin')"
-          class="mx-4"
-          @click="changeAccount('admin')"
-        >
-          切换为 Admin 账号
-        </Button>
-        <Button :type="roleButtonType('user')" @click="changeAccount('user')">
-          切换为 User 账号
-        </Button>
       </div>
 
-      <div class="card-box mt-5 p-5 font-semibold">
+      <Button :type="roleButtonType('super')" @click="changeAccount('super')">
-        <div class="mb-3 text-lg">组件形式控制</div>
+        切换为 Super 账号
-        <CodeAccess :value="['AC_100100']">
+      </Button>
-          <Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
+
-        </CodeAccess>
+      <Button
-        <CodeAccess :value="['AC_100030']">
+        :type="roleButtonType('admin')"
-          <Button class="mr-4"> Admin 账号可见 ["AC_100010"] </Button>
+        class="mx-4"
-        </CodeAccess>
+        @click="changeAccount('admin')"
-        <CodeAccess :value="['AC_1000001']">
+      >
-          <Button class="mr-4"> User 账号可见 ["AC_1000001"] </Button>
+        切换为 Admin 账号
-        </CodeAccess>
+      </Button>
-        <CodeAccess :value="['AC_100100', 'AC_100010']">
+      <Button :type="roleButtonType('user')" @click="changeAccount('user')">
-          <Button class="mr-4">
+        切换为 User 账号
-            Super & Admin 账号可见 ["AC_100100","AC_1000001"]
+      </Button>
-          </Button>
+    </div>
-        </CodeAccess>
-      </div>
 
-      <div class="card-box mt-5 p-5 font-semibold">
+    <div class="card-box mt-5 p-5 font-semibold">
-        <div class="mb-3 text-lg">函数形式控制</div>
+      <div class="mb-3 text-lg">组件形式控制</div>
-        <Button v-if="hasAuthByCodes(['AC_100100'])" class="mr-4">
+      <CodeAccess :value="['AC_100100']">
-          Super 账号可见 ["AC_1000001"]
+        <Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
-        </Button>
+      </CodeAccess>
-        <Button v-if="hasAuthByCodes(['AC_100030'])" class="mr-4">
+      <CodeAccess :value="['AC_100030']">
-          Admin 账号可见 ["AC_100010"]
+        <Button class="mr-4"> Admin 账号可见 ["AC_100010"] </Button>
-        </Button>
+      </CodeAccess>
-        <Button v-if="hasAuthByCodes(['AC_1000001'])" class="mr-4">
+      <CodeAccess :value="['AC_1000001']">
-          User 账号可见 ["AC_1000001"]
+        <Button class="mr-4"> User 账号可见 ["AC_1000001"] </Button>
-        </Button>
+      </CodeAccess>
-        <Button v-if="hasAuthByCodes(['AC_100100', 'AC_1000001'])" class="mr-4">
+      <CodeAccess :value="['AC_100100', 'AC_100010']">
+        <Button class="mr-4">
           Super & Admin 账号可见 ["AC_100100","AC_1000001"]
         </Button>
-      </div>
+      </CodeAccess>
-    </template>
+    </div>
+
+    <div class="card-box mt-5 p-5 font-semibold">
+      <div class="mb-3 text-lg">函数形式控制</div>
+      <Button v-if="hasAuthByCodes(['AC_100100'])" class="mr-4">
+        Super 账号可见 ["AC_1000001"]
+      </Button>
+      <Button v-if="hasAuthByCodes(['AC_100030'])" class="mr-4">
+        Admin 账号可见 ["AC_100010"]
+      </Button>
+      <Button v-if="hasAuthByCodes(['AC_1000001'])" class="mr-4">
+        User 账号可见 ["AC_1000001"]
+      </Button>
+      <Button v-if="hasAuthByCodes(['AC_100100', 'AC_1000001'])" class="mr-4">
+        Super & Admin 账号可见 ["AC_100100","AC_1000001"]
+      </Button>
+    </div>
   </div>
 </template>

apps/web-antd/src/views/demos/access/menu-visible-403.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/universal-ui';
 
-defineOptions({ name: 'AccessFrontendAccessTest2' });
+defineOptions({ name: 'AccessMenuVisible403' });
 </script>
 
 <template>

apps/web-antd/src/views/demos/access/super-visible.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/universal-ui';
 
-defineOptions({ name: 'AccessFrontendAccessTest1' });
+defineOptions({ name: 'AccessSuperVisible' });
 </script>
 
 <template>

apps/web-antd/src/views/demos/access/user-visible.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Fallback } from '@vben/universal-ui';
 
-defineOptions({ name: 'AccessFrontendAccessTest1' });
+defineOptions({ name: 'AccessUserVisible' });
 </script>
 
 <template>