chore: initial commit

src/components/RolePreviewSwitcher.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ChevronDown, UserRoundCog } from '@lucide/vue'
+import type { Role } from '@/types/admin'
+
+const props = defineProps<{
+  roles: Role[]
+  currentRole: Role | null
+}>()
+
+const emit = defineEmits<{
+  select: [roleId: string]
+}>()
+
+const roleName = computed(() => props.currentRole?.name ?? '无可用角色')
+const accessibleLabel = computed(() => `权限预览：${roleName.value}，数据范围未模拟`)
+
+function handleCommand(command: string | number) {
+  emit('select', String(command))
+}
+</script>
+
+<template>
+  <el-dropdown :disabled="roles.length === 0" trigger="click" @command="handleCommand">
+    <button
+      class="role-preview-trigger"
+      type="button"
+      :aria-label="accessibleLabel"
+      :title="accessibleLabel"
+    >
+      <UserRoundCog :size="18" aria-hidden="true" />
+      <span class="role-preview-copy">
+        <strong>权限预览：{{ roleName }}</strong>
+        <small>仅预览菜单、页面和操作；数据范围未模拟</small>
+      </span>
+      <ChevronDown :size="15" aria-hidden="true" />
+    </button>
+
+    <template #dropdown>
+      <el-dropdown-menu>
+        <el-dropdown-item
+          v-for="role in roles"
+          :key="role.id"
+          :command="role.id"
+          :disabled="role.id === currentRole?.id"
+        >
+          {{ role.name }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>