**一、框架：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 和组件使用

**五、响应式字体大小设置**

根据窗口的宽高变化，字体大小自动缩放。在最外层父标签设置基础字体大小，下面所有子标签的字体都使用 `rem` 为单位即可。

**示例：**

```css
/* 父div宽度 = 50vw，高度 = 30vh */
/* 宽度比例：50vw * 0.04 = 父div宽度的4% */
/* 高度比例：30vh * 0.08 = 父div高度的8% */
font-size: min(calc(50vw * 0.04), calc(30vh * 0.08));
```

**参数说明：**

- **`50vw`**：根父容器宽度
- **`30vh`**：根父容器高度
- **`0.04`**：字体大小 = 父容器宽度的4%（调整此值可改变字体大小）
- **`0.08`**：字体大小 = 父容器高度的8%（调整此值可改变字体大小）
- **`min()`**：取两个计算结果中的较小值，确保字体同时响应宽高变化

**调整方法：**
- 修改 `0.04` 和 `0.08` 的值来调整字体大小（数值越大字体越大）
- 修改 `50vw` 和 `30vh` 来调整容器大小