From 221f7c8dcf15747c9b3d86b665d8c11b35fba671 Mon Sep 17 00:00:00 2001
From: saopig1 <4x7sw862st@gmail.com>
Date: Sat, 30 May 2026 13:55:31 +0800
Subject: [PATCH] feat(perm): hide UI a member lacks capability for

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/src/components/Navbar.vue | 11 ++++--
 web/src/components/Player.vue | 66 +++++++++++++++++++++++------------
 web/src/views/Settings.vue    | 13 +++----
 3 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
index 1024b3f..5bd53e6 100644
--- a/web/src/components/Navbar.vue
+++ b/web/src/components/Navbar.vue
@@ -10,8 +10,8 @@
     </div>
 
     <div class="nav-right">
-      <!-- Bot selector (always shown when at least one bot exists) -->
-      <div v-if="store.bots.length > 0" class="bot-selector" ref="selectorRef">
+      <!-- Bot selector (always shown when at least one controllable bot exists) -->
+      <div v-if="controllableBots.length > 0" class="bot-selector" ref="selectorRef">
         <button class="bot-selector-btn" @click="dropdownOpen = !dropdownOpen">
           <span class="bot-dot" :class="{ online: activeBot?.connected }" />
           <span class="bot-selector-name">{{ activeBot?.name ?? '选择机器人' }}</span>
@@ -22,7 +22,7 @@
         <div v-if="dropdownOpen" class="bot-dropdown">
           <div class="bot-dropdown-header">机器人</div>
           <div
-            v-for="bot in store.bots"
+            v-for="bot in controllableBots"
             :key="bot.id"
             class="bot-card"
             :class="{ active: bot.id === store.activeBotId }"
@@ -131,12 +131,17 @@ import { useSession } from '../composables/useSession.js';
 
 const store = usePlayerStore();
 const session = useSession();
+const { canControlBot } = session;
 const navRouter = useRouter();
 
 async function onLogout() {
   await session.logout();
   navRouter.replace({ name: 'login' });
 }
+// Belt-and-suspenders: the backend already scopes store.bots to the allowed
+// set for members, but filtering here keeps the UI correct if an admin (who
+// sees all bots) is constrained, or if the list ever isn't pre-filtered.
+const controllableBots = computed(() => store.bots.filter((b) => canControlBot(b.id)));
 const activeBot = computed(() => store.activeBot);
 const dropdownOpen = ref(false);
 const selectorRef = ref<HTMLElement | null>(null);
diff --git a/web/src/components/Player.vue b/web/src/components/Player.vue
index e5669c7..dc502c6 100644
--- a/web/src/components/Player.vue
+++ b/web/src/components/Player.vue
@@ -3,9 +3,10 @@
     <Queue :open="showQueue" @close="showQueue = false" />
 
     <div class="player-bar frosted-glass">
-      <!-- Progress bar -->
+      <!-- Progress bar (read-only display; seek interaction gated on player.control) -->
       <div
         class="progress-bar-container"
+        :class="{ 'no-seek': !canControl }"
         ref="progressBarRef"
         @click="onProgressClick"
         @mousemove="onProgressHover"
@@ -37,32 +38,38 @@
 
       <div class="player-center">
         <span class="time-display time-current">{{ formatTime(currentElapsed) }}</span>
-        <button class="control-btn" @click="store.prev()">
-          <Icon icon="mdi:skip-previous" />
-        </button>
-        <button class="play-btn" @click="togglePlay">
-          <Icon :icon="store.isPlaying ? 'mdi:pause' : 'mdi:play'" />
-        </button>
-        <button class="control-btn" @click="store.next()">
-          <Icon icon="mdi:skip-next" />
-        </button>
-        <button class="control-btn mode-btn" @click="cycleMode" :title="modeLabel">
-          <Icon :icon="modeIcon" />
-          <span class="mode-label">{{ modeLabel }}</span>
-        </button>
+        <!-- Transport controls require player.control -->
+        <template v-if="canControl">
+          <button class="control-btn" @click="store.prev()">
+            <Icon icon="mdi:skip-previous" />
+          </button>
+          <button class="play-btn" @click="togglePlay">
+            <Icon :icon="store.isPlaying ? 'mdi:pause' : 'mdi:play'" />
+          </button>
+          <button class="control-btn" @click="store.next()">
+            <Icon icon="mdi:skip-next" />
+          </button>
+          <button class="control-btn mode-btn" @click="cycleMode" :title="modeLabel">
+            <Icon :icon="modeIcon" />
+            <span class="mode-label">{{ modeLabel }}</span>
+          </button>
+        </template>
         <span class="time-display time-total">{{ formatTime(currentSong?.duration ?? 0) }}</span>
       </div>
 
       <div class="player-right">
-        <Icon icon="mdi:volume-high" class="volume-icon" />
-        <input
-          type="range"
-          min="0"
-          max="100"
-          :value="activeBot?.volume ?? 75"
-          @change="onVolumeChange"
-          class="volume-slider"
-        />
+        <!-- Volume requires player.control -->
+        <template v-if="canControl">
+          <Icon icon="mdi:volume-high" class="volume-icon" />
+          <input
+            type="range"
+            min="0"
+            max="100"
+            :value="activeBot?.volume ?? 75"
+            @change="onVolumeChange"
+            class="volume-slider"
+          />
+        </template>
         <button class="control-btn" :class="{ active: showQueue }" @click="showQueue = !showQueue">
           <Icon icon="mdi:playlist-music" />
         </button>
@@ -79,6 +86,7 @@ import { computed, ref, onMounted, onUnmounted } from 'vue';
 import { Icon } from '@iconify/vue';
 import { useRoute, useRouter } from 'vue-router';
 import { usePlayerStore } from '../stores/player.js';
+import { useSession } from '../composables/useSession.js';
 import CoverArt from './CoverArt.vue';
 import Queue from './Queue.vue';
 
@@ -86,6 +94,9 @@ const route = useRoute();
 const router = useRouter();
 const showQueue = ref(false);
 
+const { can } = useSession();
+const canControl = computed(() => can('player.control'));
+
 const store = usePlayerStore();
 const activeBot = computed(() => store.activeBot);
 const currentSong = computed(() => store.currentSong);
@@ -133,6 +144,7 @@ function updateProgress() {
 }
 
 async function onProgressClick(e: MouseEvent) {
+  if (!canControl.value) return; // seek requires player.control
   const bar = progressBarRef.value;
   if (!bar) return;
   const rect = bar.getBoundingClientRect();
@@ -237,6 +249,14 @@ function cycleMode() {
     .progress-bar-bg { height: 4px; }
     .progress-bar-thumb { opacity: 1; transform: scale(1); }
   }
+
+  &.no-seek {
+    cursor: default;
+    &:hover {
+      .progress-bar-bg { height: 2px; }
+      .progress-bar-thumb { opacity: 0; transform: scale(0); }
+    }
+  }
 }
 
 .progress-bar-bg {
diff --git a/web/src/views/Settings.vue b/web/src/views/Settings.vue
index 863c267..4aa2262 100755
--- a/web/src/views/Settings.vue
+++ b/web/src/views/Settings.vue
@@ -50,8 +50,8 @@
       <p v-if="ownPwSuccess" class="user-success">{{ ownPwSuccess }}</p>
     </section>
 
-    <!-- Bot Management -->
-    <section class="settings-section">
+    <!-- Bot Management (create/edit/delete/start-stop) requires bot.manage -->
+    <section v-if="can('bot.manage')" class="settings-section">
       <h2 class="section-title">机器人管理</h2>
       <div class="bot-list">
         <div v-for="bot in store.bots" :key="bot.id" class="bot-item">
@@ -157,8 +157,8 @@
       </div>
     </section>
 
-    <!-- Music Account - QR Code Login -->
-    <section class="settings-section">
+    <!-- Music Account - QR Code Login (platform auth) requires platform.auth -->
+    <section v-if="can('platform.auth')" class="settings-section">
       <h2 class="section-title">音乐账号</h2>
 
       <!-- NetEase -->
@@ -371,8 +371,8 @@
       </div>
     </section>
 
-    <!-- Audio Quality -->
-    <section class="settings-section">
+    <!-- Audio Quality requires quality -->
+    <section v-if="can('quality')" class="settings-section">
       <h2 class="section-title">音质设置</h2>
       <div class="setting-row">
         <div class="setting-label">
@@ -967,6 +967,7 @@ async function updateProfile(botId: string, key: keyof ProfileConfig, value: boo
 
 // --- User Management ---
 const session = useSession();
+const { can } = session;
 
 // --- Own password change (available to all authenticated users) ---
 const ownPw = reactive({ old: '', new: '', confirm: '' });