预览按钮

src/pages/Devices/Devices.css

@@ -174,6 +174,13 @@
   align-items: flex-start;
 }
 
+.action-row {
+  display: flex;
+  flex-direction: column;
+  gap: clamp(0.4rem, 1vw, 0.75rem);
+  align-items: flex-end;
+}
+
 /* 设备信息容器 */
 .device-info {
   width: 100%;
@@ -237,13 +244,13 @@
 /* 断开按钮 */
 .disconnect-btn {
   /* match connect button sizing */
-  padding: clamp(0.4rem, 1.2cqw, 0.6rem) clamp(0.6rem, 1.8cqw, 1.1rem);
+  padding: clamp(0.32rem, 0.9cqw, 0.5rem) clamp(0.5rem, 1.3cqw, 0.85rem);
   background: #dc2626;
   color: white;
   border: none;
   border-radius: clamp(6px, 1vw, 8px);
   cursor: pointer;
-  font-size: clamp(0.75rem, 2.2cqw, 0.95rem);
+  font-size: clamp(0.65rem, 1.6cqw, 0.85rem);
   font-weight: 500;
   transition: all 0.2s ease;
   white-space: nowrap;
@@ -270,6 +277,33 @@
   transform: none;
 }
 
+/* 预览按钮 */
+.preview-btn {
+  padding: clamp(0.32rem, 0.9cqw, 0.5rem) clamp(0.5rem, 1.3cqw, 0.85rem);
+  background: #2abf6e;
+  color: white;
+  border: none;
+  border-radius: clamp(6px, 1vw, 8px);
+  cursor: pointer;
+  font-size: clamp(0.65rem, 1.6cqw, 0.85rem);
+  font-weight: 500;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.preview-btn.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  background: #ccc;
+}
+
+.preview-btn--active {
+  background: #4a90e2;
+  color: #fff;
+}
+
 /* 平板适配 */
 @media (min-width: 768px) and (max-width: 1023px) {
   .devices-header {

src/pages/Devices/Devices.js

@@ -8,6 +8,8 @@ export function DevicesLogic() {
   const [loading, setLoading] = useState(false);
   // 已连接设备集合（用于控制按钮显示）
   const [connectedDevices, setConnectedDevices] = useState(new Set());
+  // 预览中的设备集合
+  const [previewingDevices, setPreviewingDevices] = useState(new Set());
   // 防止重复扫描标记
   const hasScanned = useRef(false);
 
@@ -69,6 +71,25 @@ export function DevicesLogic() {
       newSet.delete(ipPort);
       return newSet;
     });
+    // 同时取消预览状态
+    setPreviewingDevices(prev => {
+      const next = new Set(prev);
+      next.delete(ipPort);
+      return next;
+    });
+  };
+
+  // 切换预览/取消预览
+  const togglePreview = (ipPort) => {
+    setPreviewingDevices(prev => {
+      const next = new Set(prev);
+      if (next.has(ipPort)) {
+        next.delete(ipPort);
+      } else {
+        next.add(ipPort);
+      }
+      return next;
+    });
   };
 
   // 页面加载时自动扫描
@@ -86,5 +107,7 @@ export function DevicesLogic() {
     connectDevice,
     disconnectDevice,
     connectedDevices,
+    previewingDevices,
+    togglePreview,
   };
 }

src/pages/Devices/Devices.jsx

@@ -3,7 +3,7 @@ import { DevicesLogic } from './Devices.js';
 
 // Devices 组件：显示设备列表和连接/断开功能
 function Devices() {
-  const { devices, loading, scanDevices, connectDevice, disconnectDevice, connectedDevices } = DevicesLogic();
+  const { devices, loading, scanDevices, connectDevice, disconnectDevice, connectedDevices, previewingDevices, togglePreview } = DevicesLogic();
 
   // 处理连接设备点击
   const handleConnect = async (ipPort) => {
@@ -44,11 +44,19 @@ function Devices() {
                 </div>
               )}
               {connectedDevices.has(ipPort) && (
-                <div 
-                  className={`disconnect-btn ${loading ? 'disabled' : ''}`}
-                  onClick={loading ? undefined : () => handleDisconnect(ipPort)}
-                >
-                  断开
+                <div className="action-row">
+                  <div 
+                    className={`preview-btn ${previewingDevices.has(ipPort) ? 'preview-btn--active' : ''} ${loading ? 'disabled' : ''}`}
+                    onClick={loading ? undefined : () => togglePreview(ipPort)}
+                  >
+                    {previewingDevices.has(ipPort) ? '取消' : '预览'}
+                  </div>
+                  <div 
+                    className={`disconnect-btn ${loading ? 'disabled' : ''}`}
+                    onClick={loading ? undefined : () => handleDisconnect(ipPort)}
+                  >
+                    断开
+                  </div>
                 </div>
               )}
             </div>

src/pages/ScreenShot/ScreenShot.css

@@ -14,7 +14,7 @@
   width: min(100%, calc(80vh * 1280 / 2400));
   height: auto;
   max-height: 80vh;
-  margin: auto 0; /* vertical centering inside flex container */
+  margin: auto 0;
   aspect-ratio: 1280 / 2400;
   border: 2px dashed #999;
   background-color: #f5f5f5;

src/pages/ScreenShot/ScreenShot.jsx

@@ -6,7 +6,6 @@ function ScreenShot() {
 
   return (
     <div className="ScreenShot-container">
-      <div className="preview">显示预览</div>
       <div className="screenshot-frame">
         {/* 竖屏 2400x1280 灰色线框区域 */}
       </div>