vue2server7 7.0.46 → 7.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2server7",
-  "version": "7.0.46",
+  "version": "7.0.48",
   "description": "",
   "scripts": {
     "dev": "nodemon --watch src --ext ts --exec \"ts-node src/app.ts\"",

package/test/vue3_permission_directive.md

@@ -0,0 +1,206 @@
+# Vue3 按钮权限控制（自定义指令 + Pinia 版）
+
+## 📌 目标
+
+实现一套企业级按钮权限控制方案：
+
+- ✔ 从 Pinia 获取权限
+- ✔ 支持单权限 / 多权限
+- ✔ 支持 AND / OR 逻辑
+- ✔ 支持动态更新权限
+- ✔ 全局指令 v-permission
+- ✔ 自动响应权限变化
+
+---
+
+# 🧠 一、权限 Store（Pinia）
+
+```ts
+// stores/auth.ts
+import { defineStore } from 'pinia'
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({
+    permissions: [] as string[],
+  }),
+
+  actions: {
+    setPermissions(perms: string[]) {
+      this.permissions = perms
+    },
+
+    clearPermissions() {
+      this.permissions = []
+    },
+  },
+})
+```
+
+---
+
+# 🧩 二、权限判断工具函数
+
+```ts
+// utils/permission.ts
+
+export type PermissionValue =
+  | string
+  | string[]
+  | { value: string[]; mode?: 'and' | 'or' }
+
+export function hasPermission(
+  userPermissions: string[],
+  required?: PermissionValue
+): boolean {
+  if (!required) return true
+
+  if (typeof required === 'string') {
+    return userPermissions.includes(required)
+  }
+
+  if (Array.isArray(required)) {
+    return required.some(p => userPermissions.includes(p))
+  }
+
+  const { value, mode = 'or' } = required
+
+  if (mode === 'and') {
+    return value.every(p => userPermissions.includes(p))
+  }
+
+  return value.some(p => userPermissions.includes(p))
+}
+```
+
+---
+
+# ⚙️ 三、自定义指令 v-permission
+
+```ts
+// directives/permission.ts
+import type { Directive } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { hasPermission } from '@/utils/permission'
+
+export const permission: Directive = {
+  mounted(el, binding) {
+    const authStore = useAuthStore()
+
+    const check = () => {
+      const ok = hasPermission(authStore.permissions, binding.value)
+
+      if (!ok) {
+        el.remove()
+      }
+    }
+
+    check()
+  },
+
+  updated(el, binding) {
+    const authStore = useAuthStore()
+
+    const ok = hasPermission(authStore.permissions, binding.value)
+
+    if (!ok) {
+      el.remove()
+    }
+  },
+}
+```
+
+---
+
+# 🚀 四、全局注册指令
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createPinia } from 'pinia'
+import { permission } from '@/directives/permission'
+
+const app = createApp(App)
+
+app.use(createPinia())
+
+app.directive('permission', permission)
+
+app.mount('#app')
+```
+
+---
+
+# 🧪 五、使用方式
+
+## ✔ 单权限
+
+```vue
+<button v-permission="'user:add'">
+  新增用户
+</button>
+```
+
+---
+
+## ✔ 多权限（OR）
+
+```vue
+<button v-permission="['user:add', 'user:edit']">
+  新增 / 编辑
+</button>
+```
+
+---
+
+## ✔ AND 权限
+
+```vue
+<button
+  v-permission="{
+    value: ['user:add', 'user:delete'],
+    mode: 'and'
+  }"
+>
+  必须同时拥有权限
+</button>
+```
+
+---
+
+# ⚠️ 六、常见问题
+
+## ❌ Pinia 未初始化
+
+```ts
+let authStore: any
+
+function getStore() {
+  if (!authStore) {
+    authStore = useAuthStore()
+  }
+  return authStore
+}
+```
+
+---
+
+## ❌ 权限不更新
+
+```ts
+import { watch } from 'vue'
+
+watch(
+  () => authStore.permissions,
+  () => {
+    // recheck
+  },
+  { deep: true }
+)
+```
+
+---
+
+# 🎯 总结
+
+适用于中后台系统的权限控制方案，支持扩展 RBAC / 路由权限 / 菜单权限。

package/test/vue3_permission_directive_advanced.md

@@ -218,3 +218,31 @@ el.style.pointerEvents = 'none'
 - 清晰
 - 可维护
 - 可扩展
+
+
+type Button = {
+appName: string
+}
+
+type Menu = {
+children?: Menu[]
+buttonChildren?: Button[]
+}
+
+export function getButtonPermissions(menuTree: Menu[]): string[] {
+const set = new Set<string>()
+
+const dfs = (nodes: Menu[]) => {
+nodes.forEach(node => {
+node.buttonChildren?.forEach(btn => {
+if (btn.appName) set.add(btn.appName)
+})
+
+      if (node.children) dfs(node.children)
+    })
+}
+
+dfs(menuTree)
+
+return [...set]
+}