vue2server7 7.0.50 → 7.0.51

package/package.json

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

package/test/vue3_permission_directive.md

@@ -1,206 +0,0 @@
-# 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

@@ -1,248 +0,0 @@
-# Vue3 按钮权限管理（进阶版：自定义指令）
-
-## 📌 目标
-实现一套通用的按钮权限控制方案，支持：
-
-- ✅ 单权限 / 多权限
-- ✅ AND / OR 权限判断
-- ✅ 隐藏 或 禁用 控制
-- ✅ 动态更新权限
-- ✅ 可扩展（Pinia / 后端权限）
-
----
-
-## 🧩 一、指令实现
-
-```ts
-// src/directives/permission.ts
-import type { Directive } from 'vue'
-
-function getPermissions(): string[] {
-  return JSON.parse(localStorage.getItem('permissions') || '[]')
-}
-
-function checkPermission(value: any, permissions: string[]) {
-  if (typeof value === 'string') {
-    return permissions.includes(value)
-  }
-
-  if (Array.isArray(value)) {
-    return value.some(p => permissions.includes(p))
-  }
-
-  if (typeof value === 'object') {
-    const { code, mode = 'or' } = value
-
-    if (Array.isArray(code)) {
-      return mode === 'and'
-        ? code.every(p => permissions.includes(p))
-        : code.some(p => permissions.includes(p))
-    }
-
-    return permissions.includes(code)
-  }
-
-  return false
-}
-
-function handleEl(el: HTMLElement, hasPermission: boolean, effect = 'remove') {
-  if (hasPermission) return
-
-  if (effect === 'disable') {
-    el.setAttribute('disabled', 'true')
-    el.classList.add('is-disabled')
-    el.style.pointerEvents = 'none'
-  } else {
-    el.parentNode?.removeChild(el)
-  }
-}
-
-export const permissionDirective: Directive = {
-  mounted(el, binding) {
-    const permissions = getPermissions()
-    const { value, arg } = binding
-
-    const hasPermission = checkPermission(value, permissions)
-
-    handleEl(el, hasPermission, arg)
-  },
-
-  updated(el, binding) {
-    const permissions = getPermissions()
-    const { value, arg } = binding
-
-    const hasPermission = checkPermission(value, permissions)
-
-    handleEl(el, hasPermission, arg)
-  }
-}
-```
-
----
-
-## 🚀 二、全局注册
-
-```ts
-// main.ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import { permissionDirective } from '@/directives/permission'
-
-const app = createApp(App)
-
-app.directive('permission', permissionDirective)
-
-app.mount('#app')
-```
-
----
-
-## 🎯 三、使用方式
-
-### 1️⃣ 单权限
-```vue
-<el-button v-permission="'user:add'">新增</el-button>
-```
-
----
-
-### 2️⃣ 多权限（满足一个）
-```vue
-<el-button v-permission="['user:add','user:create']">
-  新增
-</el-button>
-```
-
----
-
-### 3️⃣ 多权限（必须全部满足）
-```vue
-<el-button v-permission="{ code: ['user:add','user:vip'], mode: 'and' }">
-  高级新增
-</el-button>
-```
-
----
-
-### 4️⃣ 无权限 → 禁用按钮
-```vue
-<el-button v-permission:disable="'user:add'">
-  新增
-</el-button>
-```
-
----
-
-## 🧠 四、推荐优化（生产环境必做）
-
-### ✔ 使用 Pinia 管理权限
-
-```ts
-// stores/user.ts
-import { defineStore } from 'pinia'
-
-export const useUserStore = defineStore('user', {
-  state: () => ({
-    permissions: [] as string[]
-  })
-})
-```
-
-### ✔ 修改指令权限来源
-
-```ts
-import { useUserStore } from '@/stores/user'
-
-const permissions = useUserStore().permissions
-```
-
----
-
-## 📦 五、权限格式规范
-
-建议统一格式：
-
-```
-user:add
-user:delete
-order:list
-order:create
-```
-
----
-
-## 🔐 六、后端权限校验（必须）
-
-前端权限只是 UI 控制，后端必须校验：
-
-```ts
-if (!user.permissions.includes('user:add')) {
-  throw new Error('Forbidden')
-}
-```
-
----
-
-## ⚠️ 七、常见问题
-
-### ❌ 权限变化 UI 不更新
-✔ 已通过 `updated` 生命周期解决
-
----
-
-### ❌ Element Plus 禁用无效
-✔ 必须加：
-
-```ts
-el.style.pointerEvents = 'none'
-```
-
----
-
-### ❌ 使用 v-if 控制权限
-不推荐，会导致：
-- 模板混乱
-- 逻辑分散
-
----
-
-## 🏁 总结
-
-推荐最终方案：
-
-👉 自定义指令（控制 UI）  
-👉 Pinia（存权限）  
-👉 后端校验（保证安全）  
-
-这样你的权限系统：
-- 清晰
-- 可维护
-- 可扩展
-
-
-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]
-}