📐 编辑布局
将组件拖放到屏幕上的任意位置,打造专属布局
在编辑布局模式下,你可以自由添加、移动、缩放和删除组件。
🚪 进入方式
| 操作 | 说明 |
|---|---|
| 首次安装 | 自动进入编辑布局模式 |
| 右键菜单 | 在空白处右键 → 编辑布局 |
| 退出 | 点击左上角「退出」按钮,或按 Esc 键 |
🖼️ 界面布局
+-----------------------------------------------------------------+
| [< 退出] |
| |
| +-----------+ +----------+ |
| | ☰ | | 🌤 天气 | |
| | 🕐 时钟 | `╲ | 25°C ☀ | |
| | 12:30 | +----------+ |
| +-----------+ |
| |
| +-----------------------+ |
| | 🔍 搜索栏 | |
| | | |
| +-----------------------+ |
| |
+-----------------------------------------------------------------+
| [🗑] 拖到此处删除组件 |
| |
| +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ |
| |时││日││历││天││搜││书││备││倒││进││资│ ... |
| +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ +--+ |
| 时钟 日期 日历 天气 搜索 书签 备忘 倒计 进度 资讯 |
+-----------------------------------------------------------------+➕ 添加组件
- 在底部组件面板中,点击要添加的组件图标
- 选中的组件会进入待放置状态
- 拖动到屏幕内的目标位置,松开鼠标即可放置
- 重复以上步骤可添加多个组件
🔄 移动组件
- 按住已放置的组件
- 拖动到新的位置
- 松开鼠标完成移动
组件位置使用 vw/vh 视口百分比存储,确保在不同分辨率下保持相对位置不变。
📐 缩放组件
在编辑模式下,选中组件后右下角会出现缩放拖拽手柄(╲ 角标):
- 单击组件使其进入选中状态(出现蓝色边框和缩放手柄)
- 拖拽右下角的缩放手柄调整尺寸
- 向东南方向拖拽 → 放大;向西北方向拖拽 → 缩小
- 松开鼠标完成缩放
缩放采用对角投影算法,所有尺寸字段按统一比例缩放,保持视觉比例一致。并非所有组件都支持缩放——仅尺寸可变的组件(如时钟、书签文件夹、搜索栏等)会显示手柄。
↕️ 组件置顶
当多个组件堆叠在一起时,可以通过置顶交互快速调整层级:
| 操作 | 行为 |
|---|---|
| 点击组件 | 将组件提升到最顶层(z-index 最大化),方便完整查看 |
| 鼠标悬停 | 临时将组件置顶,鼠标移开后恢复原有层级 |
这一设计确保被遮挡的组件可以快速浮现出来,无需进入编辑模式调整位置。
🗑 删除组件
方式一:拖拽删除
- 按住要删除的组件
- 拖动到左上角的 垃圾桶 区域
- 松开鼠标即可移除
方式二:键盘删除
- 选中要删除的组件(单击)
- 按
Delete或Backspace键
💡 常见问题
| 问题 | 解决 |
|---|---|
| 组件拖不动 | 确认当前处于编辑布局模式,非编辑模式下组件不可拖动 |
| 组件无法缩放 | 并非所有组件都支持缩放——仅尺寸可变的组件会在选中时显示缩放手柄 |
| 组件位置没保存 | 退出编辑布局时会自动保存,确认点击了「退出」或按了 Esc |
| 屏幕空间不够 | 缩小浏览器窗口或使用更高分辨率,组件支持所有分辨率适配 |
| 组件被其他组件遮挡 | 点击或悬停被遮挡的组件即可将其置顶显示 |
| 想恢复默认布局 | 在通用设置中使用「重置设置」→ 快速重置(保留用户数据) |