docs: 优化权限相关文档

README.md

@@ -51,14 +51,14 @@ China repository: [Gitee](https://gitee.com/un-pany/v3-admin-vite)
 
 ## Functions
 
-- **User management**: log in, log out of the demo
+- **User management**: Log in and out of the demo
-- **Authority management**: Built-in page permissions (dynamic routing), instruction permissions, permission functions
+- **Authority management**: Page-level permissions (dynamic routing), button-level permissions (directive permissions, permission functions), and route navigation guards
 - **Multiple Environments**: Development, Staging, Production
-- **Multiple themes**: Normal, Dark, Dark Blue, theme modes
+- **Multiple themes**: Normal, Dark, Dark Blue, three theme modes
-- **Multiple layouts**：Built-in left, top, left-top three layout modes
+- **Multiple layouts**：Left, Top, Left Top, three layout modes
 - **Error page**: 403, 404
 - **Dashboard**: Display different Dashboard pages according to different users
-- **Other functions**：SVG, Dynamic Sidebar, Dynamic Breadcrumb Navigation, Tabbed Navigation, Screenfull, Adaptive Shrink Sidebar, HooK (Composables)
+- **Other functions**：SVG, Dynamic Sidebar, Dynamic Breadcrumb Navigation, Tabbed Navigation, Screenfull, Adaptive Shrink Sidebar, Hook (Composables)
 
 ## 🚀 Development
 

README.zh-CN.md

@@ -52,10 +52,10 @@ V3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，
 ## 功能
 
 - **用户管理**：登录、登出演示
-- **权限管理**：内置页面权限（动态路由）、指令权限、权限函数、路由守卫
+- **权限管理**：页面级权限（动态路由）、按钮级权限（指令权限、权限函数）、路由守卫
 - **多环境**：开发环境（development）、预发布环境（staging）、正式环境（production）
-- **多主题**：内置普通、黑暗、深蓝三种主题模式
+- **多主题**：普通、黑暗、深蓝, 三种主题模式
-- **多布局**：内置左侧、顶部、混合三种布局模式
+- **多布局**：左侧、顶部、混合, 三种布局模式
 - **错误页面**: 403、404
 - **Dashboard**：根据不同用户显示不同的 Dashboard 页面
 - **其他内置功能**：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏、Hook（Composables）

src/router/index.ts

@@ -217,7 +217,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     redirect: "/hook-demo/use-fetch-select",
     name: "HookDemo",
     meta: {
-      title: "Hook 示例",
+      title: "Hook",
       elIcon: "Menu",
       alwaysShow: true
     },
@@ -262,7 +262,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
     redirect: "/permission/page",
     name: "Permission",
     meta: {
-      title: "权限管理",
+      title: "权限",
       svgIcon: "lock",
       roles: ["admin", "editor"], // 可以在根路由中设置角色
       alwaysShow: true // 将始终显示根菜单
@@ -273,7 +273,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         component: () => import("@/views/permission/page.vue"),
         name: "PagePermission",
         meta: {
-          title: "页面权限",
+          title: "页面级",
           roles: ["admin"] // 或者在子导航中设置角色
         }
       },
@@ -282,7 +282,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
         component: () => import("@/views/permission/directive.vue"),
         name: "DirectivePermission",
         meta: {
-          title: "指令权限" // 如果未设置角色，则表示：该页面不需要权限，但会继承根路由的角色
+          title: "按钮级" // 如果未设置角色，则表示：该页面不需要权限，但会继承根路由的角色
         }
       }
     ]

src/router/permission.ts

@@ -19,7 +19,7 @@ router.beforeEach(async (to, _from, next) => {
   const permissionStore = usePermissionStoreHook()
   const token = getToken()
 
-  // 判断该用户是否已经登录
+  // 如果没有登陆
   if (!token) {
     // 如果在免登录的白名单中，则直接进入
     if (isWhiteList(to)) return next()

src/views/dashboard/components/Admin.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container center">
-    <el-empty description="Admin 权限可见" />
+    <el-empty description="欢迎来到 admin 角色专属首页" />
   </div>
 </template>
 

src/views/dashboard/components/Editor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container center">
-    <el-empty description="Editor 权限可见" />
+    <el-empty description="欢迎来到 editor 角色专属首页" />
   </div>
 </template>
 

src/views/permission/components/SwitchRoles.vue

@@ -11,12 +11,12 @@ watch(switchRoles, (value) => {
 
 <template>
   <div>
-    <div>你的权限：{{ userStore.roles }}</div>
+    <div>你的角色：{{ userStore.roles }}</div>
     <div class="switch-roles">
-      <span>切换权限（模拟权限变化后重新登录）：</span>
+      <span>切换用户（模拟重新登录）：</span>
       <el-radio-group v-model="switchRoles">
-        <el-radio-button label="editor" />
+        <el-radio-button label="editor" value="editor" />
-        <el-radio-button label="admin" />
+        <el-radio-button label="admin" value="admin" />
       </el-radio-group>
     </div>
   </div>

src/views/permission/page.vue

@@ -5,7 +5,7 @@ import SwitchRoles from "./components/SwitchRoles.vue"
 <template>
   <div class="app-container">
     <SwitchRoles />
-    <el-tag type="warning" size="large">当前页面只有 admin 权限可见，切换权限后将不能进入该页面</el-tag>
+    <el-tag type="warning" size="large">当前页面只有 admin 角色可见，切换角色后将不能进入该页面</el-tag>
   </div>
 </template>
 

types/vue-router.d.ts

@@ -19,7 +19,7 @@ declare module "vue-router" {
      */
     hidden?: boolean
     /**
-     * 设置该路由进入的权限，支持多个权限叠加
+     * 设置能进入该路由的角色，支持多个角色叠加
      */
     roles?: string[]
     /**