feat: add quick room watch action

Author: demogest

app/globals.css

@@ -4386,6 +4386,18 @@ textarea.config-input {
   background: rgba(155, 134, 255, 0.045);
 }
 
+.room-card-actions .action-watch {
+  color: #61d7ca;
+  border-color: rgba(62, 231, 211, 0.12);
+  background: rgba(62, 231, 211, 0.035);
+}
+
+.room-card-actions .action-watch:hover {
+  color: #a4f5eb;
+  border-color: rgba(62, 231, 211, 0.24);
+  background: rgba(62, 231, 211, 0.07);
+}
+
 @media (max-width: 1120px) {
   .config-field-grid {
     grid-template-columns: 1fr;

components/Dashboard.tsx

@@ -11,6 +11,7 @@ import {
   Database,
   Eye,
   EyeOff,
+  ExternalLink,
   Gauge,
   HardDrive,
   Info,
@@ -41,7 +42,7 @@ import {
   useRef,
   useState
 } from 'react';
-import { bilirecRequest } from '@/lib/api';
+import { bilirecRequest, openLiveRoom } from '@/lib/api';
 import ConfigurationCenter from '@/components/ConfigurationCenter';
 import RecordingLibrary from '@/components/RecordingLibrary';
 import UpdateCenter from '@/components/UpdateCenter';
@@ -153,14 +154,16 @@ function RoomCard({
   onAction,
   onDelete,
   onHistory,
-  onConfigure
+  onConfigure,
+  onWatch
 }: {
   room: Room;
   busy: boolean;
   onAction: (room: Room, action: 'start' | 'stop' | 'split' | 'refresh') => void;
   onDelete: (room: Room) => void;
   onHistory: (room: Room) => void;
   onConfigure: (room: Room) => void;
+  onWatch: (room: Room) => void;
 }) {
   const status = room.recording ? 'recording' : room.streaming ? 'live' : 'offline';
   const statusLabel = room.recording ? '录制中' : room.streaming ? '直播中' : '离线';
@@ -272,6 +275,15 @@ function RoomCard({
           <Settings2 size={15} />
           设置
         </button>
+        <button
+          className="room-action action-watch"
+          type="button"
+          onClick={() => onWatch(room)}
+          title={`在线观看 ${room.name || room.roomId}`}
+        >
+          <ExternalLink size={15} />
+          观看
+        </button>
         {room.recording ? (
           <>
             <button
@@ -649,6 +661,19 @@ export default function Dashboard() {
     });
   };
 
+  const watchLiveRoom = async (room: Room) => {
+    const url = `https://live.bilibili.com/${room.roomId}`;
+    try {
+      if ('__TAURI_INTERNALS__' in window) {
+        await openLiveRoom(room.roomId);
+      } else {
+        window.open(url, '_blank', 'noopener,noreferrer');
+      }
+    } catch (error) {
+      pushToast(error instanceof Error ? error.message : '无法打开直播间', 'error');
+    }
+  };
+
   const executeConfirmed = async () => {
     if (!confirmState) return;
     setConfirmBusy(true);
@@ -970,6 +995,7 @@ export default function Dashboard() {
                   onDelete={requestDeleteRoom}
                   onHistory={(selectedRoom) => openLibrary(selectedRoom.roomId)}
                   onConfigure={(selectedRoom) => openConfigCenter(selectedRoom.roomId)}
+                  onWatch={(selectedRoom) => void watchLiveRoom(selectedRoom)}
                 />
               ))}
 

lib/api.ts

@@ -61,6 +61,10 @@ export function getMpvStatus() {
   return invoke<MpvStatus>('mpv_status');
 }
 
+export function openLiveRoom(roomId: number) {
+  return invoke<void>('open_live_room', { roomId });
+}
+
 export function playRecordingWithMpv(
   connection: ConnectionSettings,
   fileUrl: string,

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "bilirec-control",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "private": true,
   "description": "基于 Tauri 2 与 Next.js 的录播姬本地控制中心",
   "scripts": {