fix(layout): 扩大顶栏图标与用户菜单点击热区

src/components/UserInfo/src/UserInfo.vue

@@ -40,10 +40,19 @@ const dialogVisible = ref<boolean>(false)
 const lockScreen = () => {
   dialogVisible.value = true
 }
+
+// 点击整行菜单项都能触发（之前 click 绑在内层文字 div 上，点到菜单项左右内边距没反应）
+const handleCommand = (command: string) => {
+  if (command === 'lock') {
+    lockScreen()
+  } else if (command === 'logout') {
+    loginOut()
+  }
+}
 </script>
 
 <template>
-  <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
+  <ElDropdown class="custom-hover" :class="prefixCls" trigger="click" @command="handleCommand">
     <div class="flex items-center">
       <img
         v-if="avatarUrl"
@@ -63,12 +72,8 @@ const lockScreen = () => {
     </div>
     <template #dropdown>
       <ElDropdownMenu>
-        <ElDropdownItem>
-          <div @click="lockScreen">{{ t('lock.lockScreen') }}</div>
-        </ElDropdownItem>
-        <ElDropdownItem>
-          <div @click="loginOut">{{ t('common.loginOut') }}</div>
-        </ElDropdownItem>
+        <ElDropdownItem command="lock">{{ t('lock.lockScreen') }}</ElDropdownItem>
+        <ElDropdownItem command="logout">{{ t('common.loginOut') }}</ElDropdownItem>
       </ElDropdownMenu>
     </template>
   </ElDropdown>

src/layout/components/ToolHeader.vue

@@ -10,6 +10,7 @@ import TranscodeNoticeButton from './TranscodeNoticeButton.vue'
 import { Screenfull } from '@/components/Screenfull'
 import { Breadcrumb } from '@/components/Breadcrumb'
 import { useAppStore } from '@/store/modules/app'
+import { useUserStore } from '@/store/modules/user'
 import { useDesign } from '@/hooks/web/useDesign'
 
 const { getPrefixCls, variables } = useDesign()
@@ -18,6 +19,16 @@ const prefixCls = getPrefixCls('tool-header')
 
 const appStore = useAppStore()
 
+const userStore = useUserStore()
+
+// 转码通知接口要求 drama:list，创作者账号没有该权限。
+// 不给入口，避免顶栏每 30 秒轮询打一次 403。
+const canSeeTranscodeNotice = computed(() => {
+  const permissions = userStore.getUserInfo?.permissions
+  if (Array.isArray(permissions)) return permissions.includes('drama:list')
+  return typeof permissions === 'string' && permissions.split(',').includes('drama:list')
+})
+
 // 面包屑
 const breadcrumb = computed(() => appStore.getBreadcrumb)
 
@@ -74,7 +85,9 @@ export default defineComponent({
               color="var(--top-header-text-color)"
             ></LocaleDropdown>
           ) : undefined}
-          <TranscodeNoticeButton color="var(--top-header-text-color)"></TranscodeNoticeButton>
+          {canSeeTranscodeNotice.value ? (
+            <TranscodeNoticeButton color="var(--top-header-text-color)"></TranscodeNoticeButton>
+          ) : undefined}
           <UserInfo></UserInfo>
         </div>
       </div>
@@ -95,6 +108,19 @@ export default defineComponent({
   :deep(.v-user-info) {
     flex-shrink: 0;
   }
+
+  // 顶栏图标的点击热区原来只有 18px 图标本身，容易点偏导致「点了没反应」。
+  // 统一撑满顶栏高度并左右留出内边距。
+  :deep(.v-screenfull),
+  :deep(.v-size-dropdown),
+  :deep(.v-locale-dropdown),
+  :deep(.v-user-info) {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 8px;
+    cursor: pointer;
+  }
 }
 
 @media (width <= 768px) {