AutoAndroidController

**一、框架：Electron + React + Vite

**二、开发命令

• npm run dev：只启动 Vite 前端开发服务器。
• npm run electron：直接启动 Electron（加载本地文件）。
• npm run electron:dev：同时启动 Vite 开发服务器并在准备好后打开 Electron（推荐开发时使用）。
• npm run build：构建生产版本。
• npm run preview：预览构建后的应用。

**三、将页面设置为子页面（条件渲染）

步骤：

1. 修改 src/pages/Home.jsx：

• 添加：import Devices from './Devices/Devices';
• 在 HomeLogic() 中获取：const { showDevices, setShowDevices } = HomeLogic();
• 在 return 中添加：{showDevices && <Devices />} 和按钮控制显示/隐藏

2. 修改 src/pages/Home.js：

• 添加：import { useState } from 'react';
• 在 HomeLogic 中添加：const [showDevices, setShowDevices] = useState(false);
• return 中暴露：showDevices, setShowDevices

3. 修改 src/App.jsx：

• 删除 Devices 的 import 和组件使用

**四、响应式适配方案

推荐组合：媒体查询 + 相对单位 + Flexbox

• 布局单位：rem、vw、%
• 字体大小：clamp(最小, 自适应, 最大)
• 间距内边距：rem 或 %
• 关键尺寸：vw 或 %
• 布局控制：Flexbox + 媒体查询断点

五、媒体查询器

• 桌面端适配：

  • 最小值 = 1024px × 20% = 204.8px ≈ 200px（1024 是 PC 的最小尺寸）

  • 最大值 = 1920px × 20% = 384px ≈ 400px（1920 是 PC 的最大尺寸）

    .devices-container {
    width: clamp(200px, 20%, 400px);
    height: 100%;
    }
    

• 平板适配：

  • 最小值 = 768px × 20% = 153.6px ≈ 150px（768px 是平板端媒体查询的最小宽度）

  • 最大值 = 300px（设计限制，不是计算出来的）

    .devices-container {
    width: clamp(150px, 20%, 300px);
    }