web-fusion/src/components/PermissionMask.vue

<template>
  <div class="permission-mask-wrapper" ref="wrapperRef">
    <!-- 有权限时才渲染原始内容 -->
    <template v-if="hasAccess">
      <slot></slot>
    </template>
    
    <!-- 无权限时显示遮罩和占位内容 -->
    <template v-else>
      <!-- 占位背景 - 显示工作台截图作为假界面 -->
      <div class="permission-placeholder">
        <img v-if="placeholderImage" :src="placeholderImage" alt="" class="placeholder-image" />
        <div v-else class="placeholder-pattern"></div>
      </div>
      
      <!-- 权限遮罩层 -->
      <div class="permission-mask" ref="maskRef" :data-permission-guard="guardKey">
        <div class="mask-content">
          <div class="lock-icon-wrapper">
            <svg class="lock-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 11H5C3.89543 11 3 11.8954 3 13V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V13C21 11.8954 20.1046 11 19 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h3 class="mask-title">{{ title }}</h3>
          <p class="mask-description">{{ description }}</p>
          <div class="mask-hint">
            <span class="material-icons-round hint-icon">info</span>
            <span>请联系管理员开通权限</span>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { getPermissions } from '@/utils/storage'

const props = defineProps({
  /**
   * 权限类型: 'bigBrother' | 'crawl' | 'webAi'
   */
  permissionKey: {
    type: String,
    required: true,
    validator: (value) => ['bigBrother', 'crawl', 'webAi'].includes(value)
  },
  /**
   * 遮罩标题
   */
  title: {
    type: String,
    default: '功能未开通'
  },
  /**
   * 遮罩描述
   */
  description: {
    type: String,
    default: '您当前没有使用此功能的权限'
  },
  /**
   * 占位图片路径（工作台截图）
   */
  placeholderImage: {
    type: String,
    default: ''
  }
})

const wrapperRef = ref(null)
const maskRef = ref(null)

// 生成唯一的守卫标识
const guardKey = computed(() => `guard_${props.permissionKey}_${Date.now()}`)

// 响应式权限检查
const permissionsData = ref(getPermissions())

const hasAccess = computed(() => {
  return permissionsData.value[props.permissionKey] === 1
})

// 定时刷新权限状态（防止localStorage被篡改后状态不同步）
let permissionCheckInterval = null

const refreshPermissions = () => {
  permissionsData.value = getPermissions()
}

// MutationObserver 监测DOM篡改
let observer = null

const setupDOMProtection = () => {
  if (hasAccess.value || !wrapperRef.value) return
  
  observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      // 检测遮罩是否被删除
      if (mutation.type === 'childList') {
        const maskExists = wrapperRef.value?.querySelector('.permission-mask')
        if (!maskExists && !hasAccess.value) {
          console.warn('[PermissionMask] 检测到权限遮罩被非法移除，正在重载页面...')
          // 强制刷新页面
          window.location.reload()
        }
      }
      // 检测遮罩样式是否被修改（如display:none, visibility:hidden等）
      if (mutation.type === 'attributes' && mutation.target.classList?.contains('permission-mask')) {
        const mask = mutation.target
        const style = window.getComputedStyle(mask)
        if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
          console.warn('[PermissionMask] 检测到权限遮罩样式被非法修改，正在重载页面...')
          window.location.reload()
        }
      }
    }
  })
  
  observer.observe(wrapperRef.value, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['style', 'class']
  })
}

onMounted(() => {
  // 定时检查权限（每2秒）
  permissionCheckInterval = setInterval(refreshPermissions, 2000)
  
  // 延迟设置DOM保护，确保元素已渲染
  setTimeout(setupDOMProtection, 100)
})

onUnmounted(() => {
  if (permissionCheckInterval) {
    clearInterval(permissionCheckInterval)
  }
  if (observer) {
    observer.disconnect()
  }
})

// 权限变化时重新设置保护
watch(hasAccess, (newVal) => {
  if (observer) {
    observer.disconnect()
  }
  if (!newVal) {
    setTimeout(setupDOMProtection, 100)
  }
})
</script>

<style scoped>
.permission-mask-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 占位背景 - 无权限时显示，防止删除遮罩后看到内容 */
.permission-placeholder {
  position: absolute;
  inset: 0;
  background: #f8fafc;
  z-index: 99;
  overflow: hidden;
}

.placeholder-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  pointer-events: none;
  user-select: none;
}

.placeholder-pattern {
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  opacity: 0.5;
}

.permission-mask {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(8px);
}

.mask-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 360px;
  animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lock-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.lock-icon {
  width: 40px;
  height: 40px;
  color: #64748b;
}

.mask-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 0.5rem 0;
}

.mask-description {
  font-size: 0.9375rem;
  color: #64748b;
  margin: 0 0 1.5rem 0;
  line-height: 1.5;
}

.mask-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-radius: 9999px;
  color: #3b82f6;
  font-size: 0.875rem;
  font-weight: 500;
}

.hint-icon {
  font-size: 1.125rem;
}
</style>