在多个组件中实现权限管理功能

2026-06-02 22:31:07 +08:00 · 2025-06-10 23:44:06 +08:00
parent eb143c28e3
commit 3f1d03a127
12 changed files with 67 additions and 158 deletions
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -15,6 +15,7 @@ import SearchSiteDialog from '@/components/dialog/SearchSiteDialog.vue'
 import SubscribeSeasonDialog from '../dialog/SubscribeSeasonDialog.vue'
 import { useI18n } from 'vue-i18n'
 import { mediaTypeDict } from '@/api/constants'
+import { hasPermission } from '@/utils/permission'

 // 国际化
 const { t } = useI18n()
@@ -481,7 +482,13 @@ onBeforeUnmount(() => {
            </p>
            <div v-if="props.media?.collection_id" class="mb-3" @click.stop=""></div>
            <div v-else class="flex align-center justify-between">
-              <IconBtn icon="mdi-magnify" color="white" @click.stop="clickSearch" />
+              <IconBtn
+                v-if="hasPermission({ is_superuser: userStore.superUser, ...userStore.permissions }, 'search')"
+                icon="mdi-magnify"
+                color="white"
+                @click.stop="clickSearch"
+              />
+              <VSpacer />
              <IconBtn icon="mdi-heart" :color="isSubscribed ? 'error' : 'white'" @click.stop="handleSubscribe" />
            </div>
          </VCardText>
--- a/src/components/dialog/UserAddEditDialog.vue
+++ b/src/components/dialog/UserAddEditDialog.vue
@@ -553,7 +553,7 @@ onMounted(() => {
            <span>{{ t('dialog.userAddEdit.permissions.title') }}</span>
          </VDivider>
          <!-- 权限设置 -->
-          <div v-if="canControl" class="mt-4">
+          <div v-if="canControl">
            <div class="mb-4">
              <VBtn
                variant="outlined"
--- a/src/layouts/components/DefaultLayout.vue
+++ b/src/layouts/components/DefaultLayout.vue
@@ -49,7 +49,7 @@ const systemMenus = ref<NavMenu[]>([])
 const getMenuList = (header: string) => {
  // 使用国际化菜单
  const menus = getNavMenus()
-  const filteredMenus = filterMenusByPermission(menus, userPermissions.value, t)
+  const filteredMenus = filterMenusByPermission(menus, userPermissions.value)
  return filteredMenus.filter((item: NavMenu) => item.header === header)
 }

--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -27,7 +27,7 @@ const userPermissions = computed(() => ({
 // 获取导航菜单
 const navMenus = computed(() => {
  const allMenus = getNavMenus()
-  return filterMenusByPermission(allMenus, userPermissions.value, t)
+  return filterMenusByPermission(allMenus, userPermissions.value)
 })

 // 根据当前路径获取匹配的菜单路径
--- a/src/layouts/components/UserProfile.vue
+++ b/src/layouts/components/UserProfile.vue
@@ -373,7 +373,7 @@ onUnmounted(() => {
          </template>
          <div>
            <span class="text-primary text-sm font-medium d-block">
-              {{ superUser ? t('user.admin') : t('user.normalUser') }}
+              {{ superUser ? t('user.admin') : t('user.normal') }}
            </span>
            <span class="text-high-emphasis text-lg font-weight-bold">
              {{ userName }}
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -1538,6 +1538,19 @@ export default {
      saveUserInfo: 'Save User Information',
      cannotDeleteCurrentUser: 'Cannot delete current logged-in user',
      deleteUser: 'Delete User',
+      permissions: {
+        title: 'Permission Settings',
+        presetNormal: 'Normal User',
+        presetAdmin: 'Administrator',
+        discovery: 'Discovery',
+        discoveryDesc: 'Access recommendation and exploration features',
+        search: 'Search',
+        searchDesc: 'Use search functionality and view search results',
+        subscribe: 'Subscribe',
+        subscribeDesc: 'Manage movie and TV show subscriptions',
+        manage: 'Manage',
+        manageDesc: 'Access system management and settings',
+      },
    },
    searchBar: {
      search: 'Search',
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -1520,6 +1520,19 @@ export default {
      saveUserInfo: '保存用戶信息',
      cannotDeleteCurrentUser: '不能刪除當前登錄用戶',
      deleteUser: '刪除用戶',
+      permissions: {
+        title: '權限設置',
+        presetNormal: '普通用戶',
+        presetAdmin: '管理員',
+        discovery: '發現',
+        discoveryDesc: '存取推薦和探索功能',
+        search: '搜索',
+        searchDesc: '使用搜索功能和查看搜索結果',
+        subscribe: '訂閱',
+        subscribeDesc: '管理電影和電視劇訂閱',
+        manage: '管理',
+        manageDesc: '存取系統管理和設置功能',
+      },
    },
    searchBar: {
      search: '搜索',
--- a/src/pages/appcenter.vue
+++ b/src/pages/appcenter.vue
@@ -25,7 +25,7 @@ const appGroups = ref<Record<string, NavMenu[]>>({})
 function categorizeApps() {
  // 获取所有菜单并根据权限过滤
  const allMenus = getNavMenus()
-  const filteredMenus = filterMenusByPermission(allMenus, userPermissions.value, t)
+  const filteredMenus = filterMenusByPermission(allMenus, userPermissions.value)
  const menus = filteredMenus.filter((item: NavMenu) => !item.footer)

  // 按header属性分组
--- a/src/router/i18n-menu.ts
+++ b/src/router/i18n-menu.ts
@@ -12,6 +12,7 @@ export function getNavMenus() {
      header: t('menu.start'),
      admin: false,
      footer: true,
+      permission: 'manage',
    },
    {
      title: t('navItems.searchResult'),
@@ -19,6 +20,7 @@ export function getNavMenus() {
      to: '/resource',
      header: t('menu.start'),
      admin: false,
+      permission: 'search',
    },
    {
      title: t('navItems.recommend'),
@@ -27,6 +29,7 @@ export function getNavMenus() {
      header: t('menu.discovery'),
      admin: false,
      footer: true,
+      permission: 'discovery',
    },
    {
      title: t('navItems.explore'),
@@ -35,6 +38,7 @@ export function getNavMenus() {
      header: t('menu.discovery'),
      admin: false,
      footer: true,
+      permission: 'discovery',
    },
    {
      title: t('navItems.movie'),
@@ -44,6 +48,7 @@ export function getNavMenus() {
      header: t('menu.subscribe'),
      admin: false,
      footer: false,
+      permission: 'subscribe',
    },
    {
      title: t('navItems.tv'),
@@ -53,6 +58,7 @@ export function getNavMenus() {
      header: t('menu.subscribe'),
      admin: false,
      footer: false,
+      permission: 'subscribe',
    },
    {
      title: t('navItems.workflow'),
@@ -62,6 +68,7 @@ export function getNavMenus() {
      header: t('menu.subscribe'),
      admin: true,
      footer: false,
+      permission: 'manage',
    },
    {
      title: t('navItems.calendar'),
@@ -70,6 +77,7 @@ export function getNavMenus() {
      to: '/calendar',
      header: t('menu.subscribe'),
      admin: false,
+      permission: 'subscribe',
    },
    {
      title: t('navItems.downloadManager'),
@@ -77,6 +85,7 @@ export function getNavMenus() {
      to: '/downloading',
      header: t('menu.organize'),
      admin: false,
+      permission: 'manage',
    },
    {
      title: t('navItems.mediaOrganize'),
@@ -84,6 +93,7 @@ export function getNavMenus() {
      to: '/history',
      header: t('menu.organize'),
      admin: true,
+      permission: 'manage',
    },
    {
      title: t('navItems.fileManager'),
@@ -91,6 +101,7 @@ export function getNavMenus() {
      to: '/filemanager',
      header: t('menu.organize'),
      admin: true,
+      permission: 'manage',
    },
    {
      title: t('navItems.pluginManager'),
@@ -98,6 +109,7 @@ export function getNavMenus() {
      to: '/plugins',
      header: t('menu.system'),
      admin: true,
+      permission: 'manage',
    },
    {
      title: t('navItems.siteManager'),
@@ -105,6 +117,7 @@ export function getNavMenus() {
      to: '/site',
      header: t('menu.system'),
      admin: true,
+      permission: 'manage',
    },
    {
      title: t('navItems.userManager'),
@@ -112,6 +125,7 @@ export function getNavMenus() {
      to: '/user',
      header: t('menu.system'),
      admin: true,
+      permission: 'admin',
    },
    {
      title: t('navItems.settings'),
@@ -119,6 +133,7 @@ export function getNavMenus() {
      to: '/setting',
      header: t('menu.system'),
      admin: true,
+      permission: 'admin',
    },
  ]
 }
--- a/src/utils/permission.ts
+++ b/src/utils/permission.ts
@@ -45,53 +45,19 @@ export function hasAllPermissions(userPermissions: any, permissionList: (keyof U
 }

 // 根据权限过滤菜单项
-export function filterMenusByPermission(menus: any[], userPermissions: any, t?: any): any[] {
+export function filterMenusByPermission(menus: any[], userPermissions: any): any[] {
  return menus.filter(menu => {
-    // 如果是超级用户且菜单需要管理员权限，允许访问
-    if (menu.admin && userPermissions?.is_superuser) {
+    // 如果是超级用户，拥有所有权限
+    if (userPermissions?.is_superuser) {
      return true
    }

-    // 如果菜单不需要管理员权限，检查具体权限
-    if (!menu.admin) {
-      // 根据菜单的header判断需要的权限
-      const header = menu.header
-
-      // 使用国际化键名进行匹配
-      if (header === 'menu.discovery' || (t && header === t('menu.discovery'))) {
-        return hasPermission(userPermissions, 'discovery')
-      }
-      if (header === 'menu.start' || (t && header === t('menu.start'))) {
-        return hasPermission(userPermissions, 'search')
-      }
-      if (header === 'menu.subscribe' || (t && header === t('menu.subscribe'))) {
-        return hasPermission(userPermissions, 'subscribe')
-      }
-      if (
-        header === 'menu.system' ||
-        header === 'menu.organize' ||
-        (t && (header === t('menu.system') || header === t('menu.organize')))
-      ) {
-        return hasPermission(userPermissions, 'manage')
-      }
-
-      // 兼容中文菜单头
-      switch (header) {
-        case '发现':
-          return hasPermission(userPermissions, 'discovery')
-        case '开始':
-          return hasPermission(userPermissions, 'search')
-        case '订阅':
-          return hasPermission(userPermissions, 'subscribe')
-        case '系统':
-        case '整理':
-          return hasPermission(userPermissions, 'manage')
-        default:
-          return true
-      }
+    // 如果菜单没有权限要求，默认显示
+    if (!menu.permission) {
+      return true
    }

-    // 需要管理员权限但用户不是超级用户
-    return false
+    // 检查用户是否拥有所需权限
+    return hasPermission(userPermissions, menu.permission)
  })
 }
--- a/src/views/discover/MediaDetailView.vue
+++ b/src/views/discover/MediaDetailView.vue
@@ -14,6 +14,7 @@ import SubscribeEditDialog from '@/components/dialog/SubscribeEditDialog.vue'
 import SearchSiteDialog from '@/components/dialog/SearchSiteDialog.vue'
 import { useTheme } from 'vuetify'
 import { useI18n } from 'vue-i18n'
+import { hasPermission } from '@/utils/permission'

 // 国际化
 const { t } = useI18n()
@@ -587,7 +588,10 @@ onBeforeMount(() => {
        </div>
        <div class="media-actions">
          <VBtn
-            v-if="mediaDetail.tmdb_id || mediaDetail.douban_id || mediaDetail.bangumi_id"
+            v-if="
+              (mediaDetail.tmdb_id || mediaDetail.douban_id || mediaDetail.bangumi_id) &&
+              hasPermission({ is_superuser: userStore.superUser, ...userStore.permissions }, 'search')
+            "
            variant="tonal"
            color="info"
            class="mb-2"