AutoAndroidController/src/pages/Devices/Devices.jsx

import './devices.css';
import { DevicesLogic } from './devices.js';

// Devices 组件：显示设备列表和连接/断开功能
function Devices() {
  const { 
    devices, 
    handleConnect, 
    handleDisconnect, 
    isConnected, 
    togglePreview,
    getRefreshButtonClassName,
    getRefreshIconClassName,
    getRefreshButtonText,
    getRefreshButtonOnClick,
    getPreviewButtonClassName,
    getPreviewButtonText,
  } = DevicesLogic();

  return (
    <div className="Devices-container">
      <div className="devices-header">
        <div className="devices-title">可连接设备</div>
        <div 
          className={getRefreshButtonClassName()}
          onClick={getRefreshButtonOnClick()}
        >
          <div className={getRefreshIconClassName()}>↻</div>
          {getRefreshButtonText()}
        </div>
      </div>
      
      <div className="devices-scroll-area">
        {devices.map((ipPort, index) => (
          <div key={index} className="device-item">
            <div className="device-info">
              <div className="device-id">{ipPort}</div>
            </div>
            <div className="device-actions">
              {!isConnected(ipPort) && (
                <div
                  className="connect-btn"
                  onClick={() => handleConnect(ipPort)}
                >
                  连接
                </div>
              )}
              {isConnected(ipPort) && (
                <div className="action-row">
                  <div
                    className={getPreviewButtonClassName(ipPort)}
                    onClick={() => togglePreview(ipPort)}
                  >
                    {getPreviewButtonText(ipPort)}
                  </div>
                  <div
                    className="disconnect-btn"
                    onClick={() => handleDisconnect(ipPort)}
                  >
                    断开
                  </div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Devices;