matrix_components 2.0.462 → 2.0.464

package/README.md

@@ -6,9 +6,8 @@ Matrix Components 是一个功能丰富的 Vue 3 企业级组件库，提供办
 
 组件使用示例参考 `dist/ComponentDemo`
 
-## 📸 组件预览
+## 📸 部分组件预览
 
-以下是组件库的架构和功能概览图：
 ### NsVideo:
 ![组件库架构](https://tc-cdn.processon.com/po/605c2da663768970077b1422-695db61dbffe264705f9b033)
 
@@ -859,16 +858,109 @@ const scaleY = sacle_y()
 import { createApp } from 'vue'
 
 const app = createApp(App)
-const btnsPermission = {
-  'zuhu_list_add': true, // 有权限
-  'zuhu_list_edit': false // 无权限
-}
 
+// 方式1：使用 provide/inject
+const btnsPermission = ['zuhu_list_add', 'zuhu_list_edit', 'admin-btn']
 app.provide('btnsPermission', btnsPermission)
+
+// 方式2：使用全局属性
+app.config.globalProperties.$btnsPermission = ['zuhu_list_add', 'zuhu_list_edit']
+
+// 方式3：使用 sessionStorage（适用于动态权限）（推荐）
+sessionStorage.setItem('btnsPermission', JSON.stringify(['zuhu_list_add', 'zuhu_list_edit']))
+
+// 方式4：使用 localStorage（持久化权限）
+localStorage.setItem('btnsPermission', JSON.stringify(['zuhu_list_add', 'zuhu_list_edit']))
+
 app.use(NsComponents) // 引入组件库
 </script>
 ```
 
+#### 权限控制优先级说明
+
+权限控制按以下优先级进行判断（从高到低）：
+
+1. **sessionStorage** → `sessionStorage.getItem('btnsPermission')`
+2. **localStorage** → `localStorage.getItem('btnsPermission')`
+3. **全局属性** → `app.config.globalProperties.$btnsPermission`
+4. **provide/inject** → `app.provide('btnsPermission', btnsPermission)`
+
+#### 指令修饰符说明
+
+- **v-permission** - 默认模式，使用 `id` 选择器，无权限时设置 `visibility: hidden`
+- **v-permission.id** - 显式指定使用 `id` 选择器
+- **v-permission.class** - 使用 `class` 选择器
+- **v-permission.id.display** - 使用 `id` 选择器，无权限时设置 `display: none`
+- **v-permission.class.display** - 使用 `class` 选择器，无权限时设置 `display: none`
+
+#### 动态权限切换示例
+
+```javascript
+// 动态切换权限
+function togglePermission() {
+  // 获取当前权限列表
+  let btnsPermission = JSON.parse(sessionStorage.getItem('btnsPermission')) || []
+  
+  // 添加新权限
+  if (!btnsPermission.includes('delete_btn')) {
+    btnsPermission.push('delete_btn')
+  } else {
+    // 移除权限
+    btnsPermission = btnsPermission.filter(item => item !== 'delete_btn')
+  }
+  
+  // 更新权限存储
+  sessionStorage.setItem('btnsPermission', JSON.stringify(btnsPermission))
+  
+  // 刷新页面或重新渲染组件
+  location.reload() // 或使用响应式更新
+}
+```
+
+#### 实际应用场景
+
+```vue
+<template>
+  <!-- 按钮组权限控制 -->
+  <div class="toolbar">
+    <el-button id="add_btn" v-permission type="primary">添加</el-button>
+    <el-button id="edit_btn" v-permission type="success">编辑</el-button>
+    <el-button id="delete_btn" v-permission type="danger">删除</el-button>
+    <el-button id="export_btn" v-permission.id.display type="warning">导出</el-button>
+    <el-button class="admin-btn" v-permission.class type="info">管理员</el-button>
+  </div>
+  
+  <!-- 菜单权限控制 -->
+  <el-menu>
+    <el-menu-item index="1" id="dashboard_menu" v-permission>
+      <span>仪表盘</span>
+    </el-menu-item>
+    <el-menu-item index="2" class="user-menu" v-permission.class>
+      <span>用户管理</span>
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script setup>
+// 权限配置示例
+const app = createApp(App)
+
+// 实际项目中，权限数据通常从后端获取
+const userPermissions = {
+  // 普通用户权限
+  normal: ['add_btn', 'edit_btn', 'dashboard_menu'],
+  // 管理员权限
+  admin: ['add_btn', 'edit_btn', 'delete_btn', 'export_btn', 'admin-btn', 'user-menu']
+}
+
+// 根据用户角色设置权限
+const userRole = 'admin' // 从登录信息获取
+app.provide('btnsPermission', userPermissions[userRole])
+
+app.use(NsComponents)
+</script>
+```
+
 ### 2. v-length - 输入长度限制
 
 ```vue

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix_components",
-  "version": "2.0.462",
+  "version": "2.0.464",
   "private": false,
   "type": "module",
   "files": [