refactor(project): simplified part of the package, code optimization

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

@@ -1,7 +1,9 @@
-import type { GeneratorMenuAndRoutesOptions } from '@vben/access';
-import type { ComponentRecordType } from '@vben/types';
+import type {
+  ComponentRecordType,
+  GenerateMenuAndRoutesOptions,
+} from '@vben/types';
 
-import { generateMenusAndRoutes } from '@vben/access';
+import { generateAccessible } from '@vben/access';
 import { preferences } from '@vben-core/preferences';
 
 import { message } from 'ant-design-vue';
@@ -13,7 +15,7 @@ import { $t } from '#/locales';
 const forbiddenComponent = () =>
   import('#/views/_essential/fallback/forbidden.vue');
 
-async function generateAccess(options: GeneratorMenuAndRoutesOptions) {
+async function generateAccess(options: GenerateMenuAndRoutesOptions) {
   const pageMap: ComponentRecordType = import.meta.glob('../views/**/*.vue');
 
   const layoutMap: ComponentRecordType = {
@@ -21,7 +23,7 @@ async function generateAccess(options: GeneratorMenuAndRoutesOptions) {
     IFrameView,
   };
 
-  return await generateMenusAndRoutes(preferences.app.accessMode, {
+  return await generateAccessible(preferences.app.accessMode, {
     ...options,
     fetchMenuListAsync: async () => {
       message.loading({

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

@@ -3,8 +3,8 @@
     "demos": {
       "title": "Demos",
       "access": {
-        "frontendControl": "Frontend Control",
-        "backendControl": "Backend Control",
+        "frontendPermissions": "Frontend Permissions",
+        "backendPermissions": "Backend Permissions",
         "pageAccess": "Page Access",
         "buttonControl": "Button Control",
         "menuVisible403": "Menu Visible(403)",

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

@@ -3,8 +3,8 @@
     "demos": {
       "title": "演示",
       "access": {
-        "frontendControl": "前端控制",
-        "backendControl": "后端控制",
+        "frontendPermissions": "前端权限",
+        "backendPermissions": "后端权限",
         "pageAccess": "页面访问",
         "buttonControl": "按钮控制",
         "menuVisible403": "菜单可见(403)",

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

@@ -19,7 +19,7 @@ const routes: RouteRecordRaw[] = [
       {
         meta: {
           icon: 'mdi:shield-key-outline',
-          title: $t('page.demos.access.frontendControl'),
+          title: $t('page.demos.access.frontendPermissions'),
         },
         name: 'Access',
         path: 'access',

apps/web-antd/src/views/dashboard/analytics/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { TabsItem } from '@vben/types';
+import type { TabsOption } from '@vben/types';
 import type { AnalysisOverviewItem } from '@vben/universal-ui';
 
 import {
@@ -53,7 +53,7 @@ const overviewItems: AnalysisOverviewItem[] = [
   },
 ];
 
-const chartTabs: TabsItem[] = [
+const chartTabs: TabsOption[] = [
   {
     label: '流量趋势',
     value: 'trends',

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

@@ -3,7 +3,7 @@ import type { LoginAndRegisterParams } from '@vben/universal-ui';
 
 import { useRouter } from 'vue-router';
 
-import { CodeAccess, useAccess } from '@vben/access';
+import { AccessControl, useAccess } from '@vben/access';
 
 import { Button } from 'ant-design-vue';
 
@@ -59,9 +59,9 @@ async function changeAccount(role: string) {
 
     <div class="card-box mt-5 p-5 font-semibold">
       <div class="mb-3">
-        <span class="text-lg">当前账号:</span>
-        <span class="text-primary mx-4">
-          {{ accessStore.userRoles }}
+        <span class="text-lg">当前角色:</span>
+        <span class="text-primary mx-4 text-lg">
+          {{ accessStore.userRoles?.[0] }}
         </span>
       </div>
 
@@ -82,21 +82,40 @@ async function changeAccount(role: string) {
     </div>
 
     <div class="card-box mt-5 p-5 font-semibold">
-      <div class="mb-3 text-lg">组件形式控制</div>
-      <CodeAccess :value="['AC_100100']">
+      <div class="mb-3 text-lg">组件形式控制 - 权限码方式</div>
+      <AccessControl :value="['AC_100100']" type="code">
         <Button class="mr-4"> Super 账号可见 ["AC_1000001"] </Button>
-      </CodeAccess>
-      <CodeAccess :value="['AC_100030']">
+      </AccessControl>
+      <AccessControl :value="['AC_100030']" type="code">
         <Button class="mr-4"> Admin 账号可见 ["AC_100010"] </Button>
-      </CodeAccess>
-      <CodeAccess :value="['AC_1000001']">
+      </AccessControl>
+      <AccessControl :value="['AC_1000001']" type="code">
         <Button class="mr-4"> User 账号可见 ["AC_1000001"] </Button>
-      </CodeAccess>
-      <CodeAccess :value="['AC_100100', 'AC_100010']">
+      </AccessControl>
+      <AccessControl :value="['AC_100100', 'AC_100010']" type="code">
         <Button class="mr-4">
           Super & Admin 账号可见 ["AC_100100","AC_1000001"]
         </Button>
-      </CodeAccess>
+      </AccessControl>
+    </div>
+
+    <div
+      v-if="accessMode === 'frontend'"
+      class="card-box mt-5 p-5 font-semibold"
+    >
+      <div class="mb-3 text-lg">组件形式控制 - 用户角色方式</div>
+      <AccessControl :value="['super']">
+        <Button class="mr-4"> Super 角色可见 </Button>
+      </AccessControl>
+      <AccessControl :value="['admin']">
+        <Button class="mr-4"> Admin 角色可见 </Button>
+      </AccessControl>
+      <AccessControl :value="['user']">
+        <Button class="mr-4"> User 角色可见 </Button>
+      </AccessControl>
+      <AccessControl :value="['super', 'admin']">
+        <Button class="mr-4"> Super & Admin 角色可见 </Button>
+      </AccessControl>
     </div>
 
     <div class="card-box mt-5 p-5 font-semibold">

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

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

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { LoginExpiredModeType } from '@vben-core/preferences';
+import type { LoginExpiredModeType } from '@vben/types';
 
 import { preferences, updatePreferences } from '@vben-core/preferences';