const myDirective = {
  // 元素掛載前調(diào)用（僅SSR）
  beforeMount(el, binding, vnode, prevVnode) {},
  
  // 元素掛載到父節(jié)點后調(diào)用
  mounted(el, binding, vnode, prevVnode) {},
  
  // 父組件更新前調(diào)用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  
  // 父組件及其子組件更新后調(diào)用
  updated(el, binding, vnode, prevVnode) {},
  
  // 父組件卸載前調(diào)用
  beforeUnmount(el, binding, vnode, prevVnode) {},
  
  // 父組件卸載后調(diào)用
  unmounted(el, binding, vnode, prevVnode) {}
}

// permission.js
export const permission = {
  mounted(el, binding) {
    const { value, modifiers } = binding
    const store = useStore()
    const roles = store.getters.roles
    
    if (value && value instanceof Array && value.length > 0) {
      const requiredRoles = value
      const hasPermission = roles.some(role => requiredRoles.includes(role))
      
      if (!hasPermission && !modifiers.show) {
        el.parentNode && el.parentNode.removeChild(el)
      } else if (!hasPermission && modifiers.show) {
        el.style.opacity = '0.5'
        el.style.pointerEvents = 'none'
      }
    } else {
      throw new Error(`需要指定權限角色，如 v-permission="['admin']"`)
    }
  }
}

???????// 使用方式
<button v-permission.show="['admin']">管理員按鈕</button>
<template v-permission="['editor']">編輯區(qū)域</template>

// draggable.js
export const draggable = {
  mounted(el, binding) {
    const { value, modifiers } = binding
    const handle = modifiers.handle ? el.querySelector(value.handle) : el
    const boundary = modifiers.boundary 
      ? document.querySelector(value.boundary) 
      : document.body
    
    if (!handle) return
    
    let startX, startY, initialX, initialY
    
    handle.style.cursor = 'grab'
    
    const onMouseDown = (e) => {
      if (modifiers.prevent) e.preventDefault()
      
      startX = e.clientX
      startY = e.clientY
      initialX = el.offsetLeft
      initialY = el.offsetTop
      
      document.addEventListener('mousemove', onMouseMove)
      document.addEventListener('mouseup', onMouseUp)
      
      el.style.transition = 'none'
      handle.style.cursor = 'grabbing'
    }
    
    const onMouseMove = (e) => {
      const dx = e.clientX - startX
      const dy = e.clientY - startY
      
      let newX = initialX + dx
      let newY = initialY + dy
      
      // 邊界檢查
      if (modifiers.boundary) {
        const rect = boundary.getBoundingClientRect()
        const elRect = el.getBoundingClientRect()
        
        newX = Math.max(0, Math.min(newX, rect.width - elRect.width))
        newY = Math.max(0, Math.min(newY, rect.height - elRect.height))
      }
      
      el.style.left = `${newX}px`
      el.style.top = `${newY}px`
      
      // 實時回調(diào)
      if (typeof value === 'function') {
        value({ x: newX, y: newY, dx, dy })
      }
    }
    
    const onMouseUp = () => {
      document.removeEventListener('mousemove', onMouseMove)
      document.removeEventListener('mouseup', onMouseUp)
      
      el.style.transition = ''
      handle.style.cursor = 'grab'
      
      // 結束回調(diào)
      if (typeof value === 'object' && value.onEnd) {
        value.onEnd({
          x: el.offsetLeft,
          y: el.offsetTop
        })
      }
    }
    
    handle.addEventListener('mousedown', onMouseDown)
    
    // 清理函數(shù)
    el._cleanupDraggable = () => {
      handle.removeEventListener('mousedown', onMouseDown)
    }
  },
  
  unmounted(el) {
    el._cleanupDraggable?.()
  }
}

???????// 使用示例
<div 
  v-draggable.handle.boundary.prevent="{
    handle: '.drag-handle',
    boundary: '#container',
    onEnd: (pos) => console.log('最終位置', pos)
  }"
  style="position: absolute;"
>
  <div class="drag-handle">拖拽這里</div>
  可拖拽內(nèi)容
</div>

// click-outside.js
export const clickOutside = {
  mounted(el, binding) {
    el._clickOutsideHandler = (event) => {
      const { value, modifiers } = binding
      const excludeElements = modifiers.exclude 
        ? document.querySelectorAll(value.exclude)
        : []
      
      // 檢查點擊是否在元素內(nèi)部或排除元素上
      const isInside = el === event.target || el.contains(event.target)
      const isExcluded = [...excludeElements].some(exEl => 
        exEl === event.target || exEl.contains(event.target)
      )
      
      if (!isInside && !isExcluded) {
        // 支持異步回調(diào)
        if (modifiers.async) {
          Promise.resolve().then(() => value(event))
        } else {
          value(event)
        }
      }
    }
    
    // 使用捕獲階段確保先于內(nèi)部點擊事件執(zhí)行
    document.addEventListener('click', el._clickOutsideHandler, true)
  },
  
  unmounted(el) {
    document.removeEventListener('click', el._clickOutsideHandler, true)
  }
}

???????// 使用示例
<div v-click-outside.exclude.async="closeMenu">
  <button @click="toggleMenu">菜單</button>
  <div v-if="menuOpen" class="menu">
    <!-- 菜單內(nèi)容 -->
  </div>
  <div class="excluded-area" data-exclude>不會被觸發(fā)的區(qū)域</div>
</div>

// lazy-directive.js
export const lazyDirective = {
  mounted(el, binding) {
    import('./heavy-directive-logic.js').then(module => {
      module.default.mounted(el, binding)
    })
  }
}

// scroll-directive.js
export const scroll = {
  mounted(el, binding) {
    const callback = binding.value
    const delay = binding.arg || 100
    const options = binding.modifiers.passive 
      ? { passive: true }
      : undefined
    
    let timeout
    const handler = () => {
      clearTimeout(timeout)
      timeout = setTimeout(() => {
        callback(el.getBoundingClientRect())
      }, delay)
    }
    
    window.addEventListener('scroll', handler, options)
    el._cleanupScroll = () => {
      window.removeEventListener('scroll', handler, options)
    }
  },
  
  unmounted(el) {
    el._cleanupScroll?.()
  }
}

// directives.d.ts
import type { Directive } from 'vue'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    vPermission: Directive<HTMLElement, string[]>
    vDraggable: Directive<
      HTMLElement, 
      { handle?: string; boundary?: string; onEnd?: (pos: Position) => void }
    >
    vClickOutside: Directive<HTMLElement, (event: MouseEvent) => void>
  }
}

<button v-permission.show="['admin']">管理員按鈕</button>

// directives-plugin.js
export default {
  install(app, options = {}) {
    const directives = {
      permission: require('./directives/permission').default,
      draggable: require('./directives/draggable').default,
      // 其他指令...
    }
    
    Object.entries(directives).forEach(([name, directive]) => {
      app.directive(name, directive(options[name] || {}))
    })
    
    // 提供全局方法訪問
    app.config.globalProperties.$directives = directives
  }
}

???????// main.js
import DirectivesPlugin from './plugins/directives-plugin'
app.use(DirectivesPlugin, {
  permission: {
    strictMode: true
  }
})

// useDirective.js
import { onMounted, onUnmounted } from 'vue'

export function useClickOutside(callback, excludeSelectors = []) {
  const element = ref(null)
  
  const handler = (event) => {
    const excludeElements = excludeSelectors.map(selector =>
      document.querySelector(selector)
    ).filter(Boolean)
    
    if (
      element.value && 
      !element.value.contains(event.target) &&
      !excludeElements.some(el => el.contains(event.target))
    ) {
      callback(event)
    }
  }
  
  onMounted(() => {
    document.addEventListener('click', handler, true)
  })
  
  onUnmounted(() => {
    document.removeEventListener('click', handler, true)
  })
  
  return { element }
}

???????// 組件中使用
const { element } = useClickOutside(() => {
  menuOpen.value = false
}, ['.excluded-area'])

// permission.directive.spec.js
import { mount } from '@vue/test-utils'
import { createStore } from 'vuex'
import directive from './permission'

const store = createStore({
  getters: {
    roles: () => ['user']
  }
})

test('v-permission 隱藏無權限元素', async () => {
  const wrapper = mount({
    template: `<div v-permission="['admin']">敏感內(nèi)容</div>`,
    directives: { permission: directive }
  }, {
    global: {
      plugins: [store]
    }
  })
  
  expect(wrapper.html()).toBe('<!--v-if-->')
})

???????test('v-permission.show 顯示但禁用無權限元素', async () => {
  const wrapper = mount({
    template: `<div v-permission.show="['admin']" class="test">內(nèi)容</div>`,
    directives: { permission: directive }
  }, {
    global: {
      plugins: [store]
    }
  })
  
  const div = wrapper.find('.test')
  expect(div.exists()).toBe(true)
  expect(div.element.style.opacity).toBe('0.5')
})

// directives.e2e.js
describe('拖拽指令', () => {
  it('應該能拖拽元素到新位置', () => {
    cy.visit('/draggable-demo')
    cy.get('.draggable-item')
      .trigger('mousedown', { which: 1 })
      .trigger('mousemove', { clientX: 100, clientY: 100 })
      .trigger('mouseup')
    
    cy.get('.draggable-item').should('have.css', 'left', '100px')
  })
})