企业官网建设流程全解析

Music Island 是一款常驻 Windows 桌面顶边的开源音乐控制小工具：音乐控制、本地语音听写、语音处理与 AI 助手额度提示，尽在指尖。它的布局编辑器（Layout Editor）让你直接拖拽封面、播放键、进度条等组件，再拉伸边缘调宽度、拖角落调缩放，几分钟就能拼出一座完全属于自己的"音乐岛"。本攻略面向新手，带你完整走一遍拖拽布局的每一步。

打开布局编辑器的最快路径

布局编辑器不需要单独安装，它内置在设置窗口里：

1. 点击桌面顶边（或任务栏图标）打开 Music Island，点击齿轮图标进入设置；
2. 在左侧导航选择Appearance（外观）；
3. 页面第一块就是"你的岛屿"实时预览 + 元素目录，整个 Appearance 页面都在 SettingsPanel.tsx 中渲染。

小提示：预览区下方还提供显示器选择、强调色（Accent Color）和悬停延迟（Hover Delay）等选项，都是"外观"的一部分。

认识 6 个放置区域：哪些组件能拖到哪里

编辑器把岛屿划分为若干"安全区"，每个区域只接受特定类型的组件，拖拽时高亮的区域就是合法落点：

三条硬性规则（由 islandLayout.ts 保证，拖错位置会自动弹回）：

• 播放/暂停和设置按钮不可移除，尝试拖动会被忽略，保证任何布局下都能打开设置、控制播放；
• Like / Dislike 依赖 Direct Yandex 连接（设置 → Music source 中配置）；Shuffle / Repeat 取决于当前播放器是否支持，目录里会显示小天线图标标注此限制；
• 把 Codex/Claude 圆环从一侧拖到另一侧，移动的是同一个实例，不会复制出第二个。

拖拽操作步骤：鼠标和键盘都能拼岛

鼠标拖拽（最直观）：

1. 按住预览中任意非固定组件不放，出现"幽灵"跟随光标；
2. 合法区域会以强调色高亮，拖到目标位置松手即可，同区域内拖动可调整顺序；
3. 把组件拖回底部Add to island目录区，即可将其从岛屿移除。

键盘拖拽（无障碍友好）：

1. Tab 选中组件，按空格 / Enter开始拖拽；
2. 方向键在所有落点之间循环选择；
3. 再按Enter放置，Esc取消。

布局改动会即时生效并保存——预览即真实岛屿。

拉伸边缘改宽度、拖角落调缩放

预览区内置三种拉伸手柄，改的是真实岛屿尺寸，不是预览效果：

• 左右两侧的竖线：拖动改变宽度，范围 80%–125%；
• 右下角的斜线手柄：拖动改变整体缩放，范围 70%–120%；
• 双击手柄一键回到 100%。

预览下方的Width / Scale读数实时显示当前百分比；键盘聚焦手柄后还可以用方向键微调（Shift 加速）、Home/End 跳边界。这段手势逻辑在 IslandPreview.tsx 中实现。

一键重置：乱了怎么恢复默认

编辑器右上角的旋转箭头按钮可以一键重置整岛布局：音乐区恢复"上一曲 · 封面 · 播放/暂停 · 下一曲 · 进度条"的经典顺序，动作区恢复"设置 · Pin"，而已启用的 Codex/Claude 额度组件会保留（见 IslandLayoutEditor.tsx）。

另外，你的布局以 v2 格式保存在本地配置plugins.settings.ui.islandLayout，旧的 v1 配置会自动迁移，损坏的值会被自动规范化——不用担心"拖坏了开不了"，最坏情况也只是回到默认布局。

顺手调好任务栏迷你播放器

除了顶边音乐岛，Music Island 还提供一个原生迷你播放器，贴在系统托盘旁、随任务栏显隐。在Settings → Taskbar中开启后，同样有一个可视化编辑器：

• 默认是 144×40 逻辑像素的"封面 + 上一曲 + 播放/暂停 + 下一曲"；
• 可添加 Like、Shuffle、Repeat，随意调整顺序；
• 支持75%–125%独立缩放。

它与布局编辑器共用同一套拖拽几何逻辑（TASKBAR.md 有完整说明），操作手感一致。

FAQ：新手常见问题

问：拖组件时为什么放不进去？答：每个区域只接受特定组件——额度圆环只能放左右两侧，反应按钮只能放进度条两侧，目录区只用于移除。落点不高亮就说明不合法，拖回其他区域即可。

问：为什么播放键和设置键拖不动？答：这是保护机制，两者"永远在岛上"，保证你随时能控制播放和打开设置。

问：改动会丢失吗？答：不会。布局随配置本地实时保存，重启后依旧生效；想恢复默认点右上角重置按钮。

问：Shuffle 按钮为什么是灰的？答：Shuffle / Repeat 由所选播放器（SMTC 或 Direct Yandex）的能力决定，当前播放器不支持时按钮会禁用。

延伸阅读

• 布局编辑器实现：IslandLayoutEditor.tsx
• 区域与元素数据模型：islandLayout.ts
• 实时预览与拉伸手势：IslandPreview.tsx
• 设计决策记录：docs/DESIGN.md
• 任务栏迷你播放器：docs/TASKBAR.md
• 3.0 版本说明：docs/releases/3.0-release-notes.md