From e82229193cdc0b9f08297f36f6e51cf5af5c3fc1 Mon Sep 17 00:00:00 2001
From: Cranyozen <61766249+Cranyozen@users.noreply.github.com>
Date: Thu, 21 May 2026 18:00:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=A7=86=E8=A7=92?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E7=BA=A2=E6=96=B9=E5=92=8C=E8=93=9D=E6=96=B9=E6=9C=BA=E5=99=A8?=
 =?UTF-8?q?=E4=BA=BA=E8=A7=86=E8=A7=92=EF=BC=8C=E6=9B=B4=E6=96=B0=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E6=A0=B7=E5=BC=8F=E5=92=8C=E6=B5=8B=E8=AF=95=E7=94=A8?=
 =?UTF-8?q?=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mock/rm-live.mock.ts                        |  24 ++
 src/api/rmApi.ts                            |   9 +-
 src/components/layout/LiveStage.vue         |  11 +
 src/components/live/LivePlayer.vue          | 115 ++++++---
 src/components/live/PerspectiveSwitcher.vue | 273 ++++++++++++++++++++
 src/styles/primevue-theme.css               |  40 +++
 src/utils/__tests__/rmStreamView.test.ts    |  30 ++-
 src/utils/rmStreamView.ts                   |   4 +-
 8 files changed, 466 insertions(+), 40 deletions(-)
 create mode 100644 src/components/live/PerspectiveSwitcher.vue

diff --git a/mock/rm-live.mock.ts b/mock/rm-live.mock.ts
index bd04277..5a856fa 100644
--- a/mock/rm-live.mock.ts
+++ b/mock/rm-live.mock.ts
@@ -22,6 +22,30 @@ const liveGameInfo = {
           src: TEST_HLS,
         },
       ],
+      fpvData: [
+        {
+          role: '红方机器人视角',
+          headimg: '',
+          sources: [
+            {
+              label: '720p',
+              res: 'high',
+              src: TEST_HLS,
+            },
+          ],
+        },
+        {
+          role: '蓝方机器人视角',
+          headimg: '',
+          sources: [
+            {
+              label: '720p',
+              res: 'high',
+              src: TEST_HLS,
+            },
+          ],
+        },
+      ],
     },
   ],
 };
diff --git a/src/api/rmApi.ts b/src/api/rmApi.ts
index 8f03fa3..e8dd99c 100644
--- a/src/api/rmApi.ts
+++ b/src/api/rmApi.ts
@@ -273,11 +273,18 @@ export function extractLiveZones(data: LiveGameInfo | null): LiveZoneOption[] {
       const qualities = source
         .map((item, qualityIndex) => toQualityOption(item, qualityIndex))
         .filter((item): item is LiveQualityOption => item !== null);
+      const firstFpvHeadimg =
+        Array.isArray(zone.fpvData) &&
+        zone.fpvData.length > 0 &&
+        typeof zone.fpvData[0].headimg === 'string' &&
+        zone.fpvData[0].headimg.trim()
+          ? zone.fpvData[0].headimg.trim()
+          : null;
       const perspectives: LivePerspectiveOption[] = [
         {
           key: 'main',
           label: '主视角',
-          headimg: null,
+          headimg: firstFpvHeadimg,
           qualities,
         },
       ];
diff --git a/src/components/layout/LiveStage.vue b/src/components/layout/LiveStage.vue
index f5935d0..0befde3 100644
--- a/src/components/layout/LiveStage.vue
+++ b/src/components/layout/LiveStage.vue
@@ -7,6 +7,7 @@ import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
 import { computed, defineAsyncComponent } from 'vue';
 import LivePlayer from '../live/LivePlayer.vue';
+import PerspectiveSwitcher from '../live/PerspectiveSwitcher.vue';
 import type { DanmuMessage } from '../../types/api';
 
 const dataStore = useRmDataStore();
@@ -68,6 +69,11 @@ function onDanmuReset() {
         <div class="live-column">
           <MatchFirepowerBar v-if="pkEnabled && hasCurrentMatch" />
           <div v-else-if="pkEnabled && showMatchDependentPlaceholder" class="firepower-slot" aria-hidden="true" />
+          <PerspectiveSwitcher
+            :perspectives="playerPerspectiveOptions"
+            :selected-key="selectedPerspectiveKey"
+            @select="onPerspectiveChange"
+          />
           <LivePlayer
             :stream-url="effectiveStreamUrl"
             :loading="streamLoading"
@@ -100,6 +106,11 @@ function onDanmuReset() {
     <div v-else class="live-column">
       <MatchFirepowerBar v-if="pkEnabled && hasCurrentMatch" />
       <div v-else-if="pkEnabled && showMatchDependentPlaceholder" class="firepower-slot" aria-hidden="true" />
+      <PerspectiveSwitcher
+        :perspectives="playerPerspectiveOptions"
+        :selected-key="selectedPerspectiveKey"
+        @select="onPerspectiveChange"
+      />
       <LivePlayer
         :stream-url="effectiveStreamUrl"
         :loading="streamLoading"
diff --git a/src/components/live/LivePlayer.vue b/src/components/live/LivePlayer.vue
index 8941b34..8b02599 100644
--- a/src/components/live/LivePlayer.vue
+++ b/src/components/live/LivePlayer.vue
@@ -30,6 +30,7 @@ interface QualityOption {
 interface PerspectiveOption {
   label: string;
   value: string;
+  headimg: string | null;
 }
 
 interface Props {
@@ -728,30 +729,6 @@ function buildQualityItems() {
 function buildPlayerSettings() {
   const settings: NonNullable<Option['settings']> = [];
 
-  const perspectiveOptions = props.perspectiveOptions ?? [];
-  if (perspectiveOptions.length > 1) {
-    const selectedPerspective =
-      perspectiveOptions.find((item) => item.value === props.selectedPerspectiveKey) ?? perspectiveOptions[0];
-    settings.push({
-      name: 'perspective',
-      html: '视角',
-      tooltip: selectedPerspective?.label ?? '主视角',
-      icon: '',
-      selector: perspectiveOptions.map((item) => ({
-        html: item.label,
-        value: item.value,
-        default: item.value === selectedPerspective?.value,
-      })),
-      onSelect(item) {
-        const value = typeof item.value === 'string' ? item.value : '';
-        if (value) {
-          emit('perspectiveChange', value);
-        }
-        return item.html;
-      },
-    });
-  }
-
   if (danmuEnabledAtLoad) {
     settings.push({
       html: filterActive.value ? `过滤 ${activeFilterCount.value}` : '过滤',
@@ -770,24 +747,81 @@ function buildPlayerSettings() {
   return settings;
 }
 
-function updatePerspectiveSetting() {
+const PERSPECTIVE_ICON_VIDEO = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0"><path d="M4 6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2.5l4 3.5V6.5L18 10V8a2 2 0 0 0-2-2H4z"/></svg>`;
+const PERSPECTIVE_ICON_CAMERA = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0"><path d="M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4z"/><path d="M9 3 7.17 5H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-3.17L15 3H9zm3 15a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/></svg>`;
+
+function buildPerspectiveIconHtml(item: { value: string; headimg: string | null }): string {
+  if (item.headimg) {
+    return `<img src="${item.headimg}" width="16" height="16" style="border-radius:50%;object-fit:cover;flex-shrink:0" alt="">`;
+  }
+  return item.value === 'main' ? PERSPECTIVE_ICON_VIDEO : PERSPECTIVE_ICON_CAMERA;
+}
+
+function getPerspectiveColor(label: string): string {
+  if (label.includes('红')) return 'rgba(252,165,165,0.95)';
+  if (label.includes('蓝')) return 'rgba(147,197,253,0.95)';
+  return '';
+}
+
+function trimPerspectiveLabel(label: string): string {
+  return label.replace(/第.视角/g, '').trim();
+}
+
+function updatePerspectiveControl() {
   if (!player || !playerReady) {
     return;
   }
 
-  const perspectiveSetting = buildPlayerSettings().find((item) => item.name === 'perspective');
+  const perspectiveOptions = props.perspectiveOptions ?? [];
   const p = player as Artplayer & {
-    setting?: { update?: (option: NonNullable<Option['settings']>[number]) => void; remove?: (name: string) => void };
+    controls?: {
+      remove?: (name: string) => void;
+      update?: (option: NonNullable<Option['controls']>[number]) => void;
+    };
   };
 
-  try {
-    if (perspectiveSetting) {
-      p.setting?.update?.(perspectiveSetting);
-    } else {
-      p.setting?.remove?.('perspective');
+  if (perspectiveOptions.length > 1) {
+    const selectedPerspective =
+      perspectiveOptions.find((item) => item.value === props.selectedPerspectiveKey) ?? perspectiveOptions[0];
+    const btnIconHtml = buildPerspectiveIconHtml(selectedPerspective ?? perspectiveOptions[0]);
+    p.controls?.update?.({
+      name: 'perspective',
+      position: 'right',
+      index: 9,
+      style: { marginRight: '10px' },
+      html: `<span style="display:inline-flex;align-items:center;gap:4px">${btnIconHtml}${trimPerspectiveLabel(selectedPerspective?.label ?? '视角')}</span>`,
+      mounted(el: HTMLElement) {
+        const list = el.querySelector<HTMLElement>('.art-selector-list');
+        if (list) {
+          list.style.display = 'grid';
+          list.style.gridTemplateColumns = '1fr 1fr';
+          list.style.minWidth = '220px';
+          list.classList.add('art-perspective-list');
+        }
+      },
+      selector: perspectiveOptions.map((item) => {
+        const color = getPerspectiveColor(item.label);
+        const colorStyle = color ? `color:${color};` : '';
+        return {
+          html: `<span style="display:inline-flex;align-items:center;gap:6px;${colorStyle}">${buildPerspectiveIconHtml(item)}${trimPerspectiveLabel(item.label)}</span>`,
+          value: item.value,
+          default: item.value === selectedPerspective?.value,
+        };
+      }),
+      onSelect(item) {
+        const value = typeof item.value === 'string' ? item.value : '';
+        if (value) {
+          emit('perspectiveChange', value);
+        }
+        return item.html;
+      },
+    });
+  } else {
+    try {
+      p.controls?.remove?.('perspective');
+    } catch {
+      // no perspective control to remove
     }
-  } catch {
-    // Ignore menu refresh races while Artplayer is mounting.
   }
 }
 
@@ -1053,7 +1087,7 @@ async function mountPlayer(url: string) {
     markPerformance('rm-player-ready');
     danmukuPlugin = danmuEnabledAtLoad ? (player as any).plugins?.artplayerPluginDanmuku : null;
     updateQualityControl();
-    updatePerspectiveSetting();
+    updatePerspectiveControl();
     syncDanmuConnection();
     flushPendingDanmu();
     try {
@@ -1194,7 +1228,7 @@ watch(
 watch(
   () => [props.perspectiveOptions, props.selectedPerspectiveKey] as const,
   () => {
-    updatePerspectiveSetting();
+    updatePerspectiveControl();
   },
 );
 
@@ -1229,7 +1263,7 @@ onBeforeUnmount(async () => {
 
     <div v-if="isStreamSwitching && !loading && !errorMessage" class="overlay center overlay-soft" aria-live="polite">
       <ProgressSpinner style="width: 2rem; height: 2rem" stroke-width="6" />
-      <span class="switching-tip">切换清晰度中...</span>
+      <span class="switching-tip">切换中...</span>
     </div>
 
     <div ref="container" class="player-container" />
@@ -1304,4 +1338,11 @@ onBeforeUnmount(async () => {
     min-height: 190px;
   }
 }
+
+:deep(.art-perspective-list .art-selector-item.art-current) {
+  background: rgba(56, 189, 248, 0.22);
+  border-radius: 4px;
+  box-shadow: inset 0 0 0 1px rgba(56, 189, 248, 0.6);
+  font-weight: 600;
+}
 </style>
diff --git a/src/components/live/PerspectiveSwitcher.vue b/src/components/live/PerspectiveSwitcher.vue
new file mode 100644
index 0000000..3396dc0
--- /dev/null
+++ b/src/components/live/PerspectiveSwitcher.vue
@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import type { PlayerPerspectiveOption } from '@/utils/rmStreamView';
+
+interface Props {
+  perspectives: PlayerPerspectiveOption[];
+  selectedKey: string | null;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  select: [key: string];
+}>();
+
+const collapsed = ref(false);
+
+const otherPerspectives = computed(() =>
+  props.perspectives.filter((p) => !p.label.includes('红') && !p.label.includes('蓝')),
+);
+const redPerspectives = computed(() => props.perspectives.filter((p) => p.label.includes('红')));
+const bluePerspectives = computed(() => props.perspectives.filter((p) => p.label.includes('蓝')));
+
+function trimLabel(label: string): string {
+  return label.replace(/第.视角/g, '').trim();
+}
+
+const selectedLabel = computed(() => {
+  const active = props.perspectives.find(
+    (p) => p.value === (props.selectedKey ?? props.perspectives[0]?.value),
+  );
+  return active ? trimLabel(active.label) : '视角切换';
+});
+</script>
+
+<template>
+  <div v-if="perspectives.length > 1" class="perspective-switcher" role="tablist" aria-label="视角切换">
+    <button
+      class="perspective-toggle"
+      :aria-expanded="!collapsed"
+      aria-controls="perspective-panel"
+      @click="collapsed = !collapsed"
+    >
+      <span class="perspective-toggle-label">
+        <i class="pi pi-video" aria-hidden="true" />
+        {{ selectedLabel }}
+      </span>
+      <i class="pi" :class="collapsed ? 'pi-chevron-down' : 'pi-chevron-up'" aria-hidden="true" />
+    </button>
+
+    <div v-show="!collapsed" id="perspective-panel" class="perspective-panel">
+      <div v-if="otherPerspectives.length" class="perspective-row perspective-row--other">
+        <button
+          v-for="p in otherPerspectives"
+          :key="p.value"
+          class="perspective-btn"
+          :class="{ active: p.value === (selectedKey ?? perspectives[0]?.value) }"
+          role="tab"
+          :aria-selected="p.value === (selectedKey ?? perspectives[0]?.value)"
+          @click="emit('select', p.value)"
+        >
+          <img v-if="p.headimg" :src="p.headimg" class="perspective-avatar" :alt="p.label" />
+          <span v-else class="perspective-icon" aria-hidden="true">
+            <i v-if="p.value === 'main'" class="pi pi-video" />
+            <i v-else class="pi pi-camera" />
+          </span>
+          <span class="perspective-label">{{ trimLabel(p.label) }}</span>
+        </button>
+      </div>
+
+      <div v-if="redPerspectives.length" class="perspective-row perspective-row--red">
+        <button
+          v-for="p in redPerspectives"
+          :key="p.value"
+          class="perspective-btn perspective-btn--red"
+          :class="{ active: p.value === (selectedKey ?? perspectives[0]?.value) }"
+          role="tab"
+          :aria-selected="p.value === (selectedKey ?? perspectives[0]?.value)"
+          @click="emit('select', p.value)"
+        >
+          <img v-if="p.headimg" :src="p.headimg" class="perspective-avatar" :alt="p.label" />
+          <span v-else class="perspective-icon" aria-hidden="true">
+            <i class="pi pi-camera" />
+          </span>
+          <span class="perspective-label">{{ trimLabel(p.label) }}</span>
+        </button>
+      </div>
+
+      <div v-if="bluePerspectives.length" class="perspective-row perspective-row--blue">
+        <button
+          v-for="p in bluePerspectives"
+          :key="p.value"
+          class="perspective-btn perspective-btn--blue"
+          :class="{ active: p.value === (selectedKey ?? perspectives[0]?.value) }"
+          role="tab"
+          :aria-selected="p.value === (selectedKey ?? perspectives[0]?.value)"
+          @click="emit('select', p.value)"
+        >
+          <img v-if="p.headimg" :src="p.headimg" class="perspective-avatar" :alt="p.label" />
+          <span v-else class="perspective-icon" aria-hidden="true">
+            <i class="pi pi-camera" />
+          </span>
+          <span class="perspective-label">{{ trimLabel(p.label) }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.perspective-switcher {
+  display: flex;
+  flex-direction: column;
+  background: var(--perspective-switcher-bg);
+  border-bottom: 1px solid var(--perspective-switcher-border);
+  container-type: inline-size;
+}
+
+.perspective-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.3rem 0.625rem;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--perspective-switcher-border);
+  color: var(--perspective-btn-color);
+  font-size: 0.8rem;
+  cursor: pointer;
+  gap: 0.5rem;
+  transition: background 0.15s;
+}
+
+.perspective-toggle:hover {
+  background: var(--perspective-btn-hover-bg);
+}
+
+.perspective-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  font-weight: 500;
+}
+
+.perspective-row {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 0.375rem;
+  padding: 0.375rem 0.5rem;
+}
+
+/* "other" items: span 3 cols each → 2 per row */
+.perspective-row--other .perspective-btn {
+  grid-column: span 3;
+}
+
+/* Red row tint */
+.perspective-row--red {
+  background: var(--perspective-row-red-bg);
+}
+
+/* Blue row tint */
+.perspective-row--blue {
+  background: var(--perspective-row-blue-bg);
+}
+
+.perspective-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.625rem;
+  border: 1px solid var(--perspective-btn-border);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--perspective-btn-color);
+  font-size: 0.8rem;
+  line-height: 1.4;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    color 0.15s;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.perspective-btn:hover {
+  background: var(--perspective-btn-hover-bg);
+  border-color: var(--perspective-btn-hover-border);
+  color: var(--perspective-btn-hover-color);
+}
+
+.perspective-btn.active {
+  background: rgba(56, 189, 248, 0.18);
+  border-color: rgba(56, 189, 248, 0.7);
+  color: var(--perspective-btn-active-color);
+  font-weight: 600;
+}
+
+/* Red team button */
+.perspective-btn--red {
+  border-color: var(--perspective-btn-red-border);
+  color: var(--perspective-btn-red-color);
+}
+
+.perspective-btn--red:hover {
+  background: var(--perspective-btn-red-hover-bg);
+  border-color: rgba(239, 68, 68, 0.6);
+  color: var(--perspective-btn-red-active-color);
+}
+
+.perspective-btn--red.active {
+  background: rgba(239, 68, 68, 0.25);
+  border-color: rgba(239, 68, 68, 0.85);
+  color: var(--perspective-btn-red-active-color);
+}
+
+/* Blue team button */
+.perspective-btn--blue {
+  border-color: var(--perspective-btn-blue-border);
+  color: var(--perspective-btn-blue-color);
+}
+
+.perspective-btn--blue:hover {
+  background: var(--perspective-btn-blue-hover-bg);
+  border-color: rgba(59, 130, 246, 0.6);
+  color: var(--perspective-btn-blue-active-color);
+}
+
+.perspective-btn--blue.active {
+  background: rgba(59, 130, 246, 0.25);
+  border-color: rgba(59, 130, 246, 0.85);
+  color: var(--perspective-btn-blue-active-color);
+}
+
+.perspective-avatar {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  object-fit: cover;
+  flex-shrink: 0;
+}
+
+.perspective-icon {
+  display: flex;
+  align-items: center;
+  font-size: 0.8rem;
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+
+.perspective-btn.active .perspective-icon {
+  opacity: 1;
+}
+
+.perspective-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+/* Narrow: red/blue rows → 3 per row (span 2 in 6-col grid) */
+@container (max-width: 680px) {
+  .perspective-row--red .perspective-btn,
+  .perspective-row--blue .perspective-btn {
+    grid-column: span 2;
+  }
+}
+</style>
diff --git a/src/styles/primevue-theme.css b/src/styles/primevue-theme.css
index c61f16d..77e34db 100644
--- a/src/styles/primevue-theme.css
+++ b/src/styles/primevue-theme.css
@@ -1,6 +1,26 @@
 @import "tailwindcss";
 
 :root {
+  /* Perspective Switcher */
+  --perspective-switcher-bg: rgba(241, 245, 249, 0.92);
+  --perspective-switcher-border: rgba(0, 0, 0, 0.08);
+  --perspective-row-red-bg: rgba(239, 68, 68, 0.06);
+  --perspective-row-blue-bg: rgba(59, 130, 246, 0.06);
+  --perspective-btn-color: rgba(30, 41, 59, 0.85);
+  --perspective-btn-border: rgba(0, 0, 0, 0.18);
+  --perspective-btn-hover-bg: rgba(0, 0, 0, 0.06);
+  --perspective-btn-hover-border: rgba(0, 0, 0, 0.35);
+  --perspective-btn-hover-color: #0f172a;
+  --perspective-btn-active-color: #0369a1;
+  --perspective-btn-red-color: rgb(185, 28, 28);
+  --perspective-btn-red-border: rgba(239, 68, 68, 0.4);
+  --perspective-btn-red-hover-bg: rgba(239, 68, 68, 0.1);
+  --perspective-btn-red-active-color: rgb(153, 27, 27);
+  --perspective-btn-blue-color: rgb(29, 78, 216);
+  --perspective-btn-blue-border: rgba(59, 130, 246, 0.4);
+  --perspective-btn-blue-hover-bg: rgba(59, 130, 246, 0.1);
+  --perspective-btn-blue-active-color: rgb(30, 64, 175);
+
   /* Scoreboard Theme Colors (from MatchBlock.vue) */
   --scoreboard-bg-light: linear-gradient(135deg, rgba(219, 234, 254, 0.45), rgba(191, 219, 254, 0.35));
   --scoreboard-border: rgb(148, 163, 184, 0.25);
@@ -27,6 +47,26 @@
 }
 
 html.app-dark {
+  /* Dark Mode Perspective Switcher */
+  --perspective-switcher-bg: rgba(9, 16, 33, 0.55);
+  --perspective-switcher-border: rgba(255, 255, 255, 0.08);
+  --perspective-row-red-bg: rgba(239, 68, 68, 0.08);
+  --perspective-row-blue-bg: rgba(59, 130, 246, 0.08);
+  --perspective-btn-color: rgba(255, 255, 255, 0.72);
+  --perspective-btn-border: rgba(255, 255, 255, 0.18);
+  --perspective-btn-hover-bg: rgba(255, 255, 255, 0.1);
+  --perspective-btn-hover-border: rgba(255, 255, 255, 0.35);
+  --perspective-btn-hover-color: #fff;
+  --perspective-btn-active-color: #fff;
+  --perspective-btn-red-color: rgba(255, 180, 180, 0.9);
+  --perspective-btn-red-border: rgba(239, 68, 68, 0.3);
+  --perspective-btn-red-hover-bg: rgba(239, 68, 68, 0.18);
+  --perspective-btn-red-active-color: #fff;
+  --perspective-btn-blue-color: rgba(147, 197, 253, 0.9);
+  --perspective-btn-blue-border: rgba(59, 130, 246, 0.3);
+  --perspective-btn-blue-hover-bg: rgba(59, 130, 246, 0.18);
+  --perspective-btn-blue-active-color: #fff;
+
   /* Dark Mode Scoreboard */
   --scoreboard-bg-light: linear-gradient(135deg, rgb(2 6 23 / 0.72), rgb(30 58 138 / 0.34));
   --scoreboard-border: rgb(96 165 250 / 0.35);
diff --git a/src/utils/__tests__/rmStreamView.test.ts b/src/utils/__tests__/rmStreamView.test.ts
index a3e15f6..04e3cfe 100644
--- a/src/utils/__tests__/rmStreamView.test.ts
+++ b/src/utils/__tests__/rmStreamView.test.ts
@@ -1,5 +1,10 @@
 import { describe, expect, it } from 'vitest';
-import { resolveDefaultQualityRes, resolveEffectiveStreamErrorMessage, toPlayerQualityOptions } from '../rmStreamView';
+import {
+  resolveDefaultQualityRes,
+  resolveEffectiveStreamErrorMessage,
+  toPlayerPerspectiveOptions,
+  toPlayerQualityOptions,
+} from '../rmStreamView';
 
 describe('toPlayerQualityOptions', () => {
   it('maps qualities to player options', () => {
@@ -75,3 +80,26 @@ describe('resolveEffectiveStreamErrorMessage', () => {
     expect(message).toBe('fallback');
   });
 });
+
+describe('toPlayerPerspectiveOptions', () => {
+  it('maps perspectives to player options with headimg', () => {
+    const options = toPlayerPerspectiveOptions([
+      { key: 'main', label: '主视角', headimg: null },
+      { key: 'fpv-0', label: '红方机器人视角', headimg: 'https://example.com/avatar.png' },
+    ]);
+
+    expect(options).toEqual([
+      { label: '主视角', value: 'main', headimg: null },
+      { label: '红方机器人视角', value: 'fpv-0', headimg: 'https://example.com/avatar.png' },
+    ]);
+  });
+
+  it('returns empty array for null input', () => {
+    expect(toPlayerPerspectiveOptions(null)).toEqual([]);
+  });
+
+  it('defaults missing headimg to null', () => {
+    const options = toPlayerPerspectiveOptions([{ key: 'main', label: '主视角' }]);
+    expect(options[0].headimg).toBeNull();
+  });
+});
diff --git a/src/utils/rmStreamView.ts b/src/utils/rmStreamView.ts
index 9fe47be..265baee 100644
--- a/src/utils/rmStreamView.ts
+++ b/src/utils/rmStreamView.ts
@@ -20,6 +20,7 @@ export interface PlayerQualityOption {
 export interface PlayerPerspectiveOption {
   label: string;
   value: string;
+  headimg: string | null;
 }
 
 export function toPlayerQualityOptions(zone: PlayableZoneLike | null): PlayerQualityOption[] {
@@ -35,11 +36,12 @@ export function toPlayerQualityOptions(zone: PlayableZoneLike | null): PlayerQua
 }
 
 export function toPlayerPerspectiveOptions(
-  perspectives: Array<{ key: string; label: string }> | null | undefined,
+  perspectives: Array<{ key: string; label: string; headimg?: string | null }> | null | undefined,
 ): PlayerPerspectiveOption[] {
   return (perspectives ?? []).map((item) => ({
     label: item.label,
     value: item.key,
+    headimg: item.headimg ?? null,
   }));
 }