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

**二、测试连接：adb connect 192.168.0.15:5555

**三、开发命令
- `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 的最大尺寸）
  
  ```css
  .devices-container {
    width: clamp(200px, 20%, 400px);
    height: 100%;
  }
  ```

- **平板适配**：
  - 最小值 = 768px × 20% = 153.6px ≈ 150px（768px 是平板端媒体查询的最小宽度）
  - 最大值 = 300px（设计限制，不是计算出来的）
  
  ```css
  .devices-container {
    width: clamp(150px, 20%, 300px);
  }
  ```