# 自己设计：设计器

侧边栏里的**自己设计**是一块画布，让你亲手做一款皮肤，简单到一种纯色，复杂到层层叠叠的设计都可以。它完全离线工作。你设计的作品和其他皮肤一样保存在**我的皮肤**里，**保存并应用**会直接把它用到你选中的文件夹上。

![设计器：从图标库里选的一只虫子压印在蓝色文件夹上，旁边是图标搜索，下方是“保存并应用”](https://folderskin.app/docs/images/composer.webp)

## 大家用它做什么

| 你想要 | 从这里开始 | 然后 |
| --- | --- | --- |
| 一种颜色的文件夹，什么颜色都行 | **颜色**或**素色** | 点击文件夹，选择颜色。取色器支持任意颜色，还能调透明度 |
| 带文字标签的文件夹：“菜谱”“笔记 2026” | **文字标签** | 输入文字，选择字体、字重和颜色。字越少，在小尺寸下越清楚 |
| 一眼就能看出里面装着什么的文件夹 | **表情** | 双击表情即可替换，或者在选择器里用英文关键词搜索（*dog*、*plane*、*receipt*） |
| 页签上的文字 | **页签文字** | “位置”里的**页签**按钮可以把任意图层放到页签上 |
| 前后两块面板颜色不同 | **双色** | 分界线藏在纸张后面 |
| 透明的文件夹 | **玻璃**或**有色玻璃** | 降低背景的不透明度，或者直接删掉背景，得到一个全透明的文件夹：只留下纸张和边缘 |
| 带花纹的文件夹 | **条纹**、**格纹**、**波点** | **花纹**里还有十种，从条纹到彩纸屑和胶片颗粒 |
| 带说明文字的照片 | **照片** | 会先让你选一张图片，之后还可以拖入或粘贴更多 |
| 贴纸、徽章，任何不是文件夹形状的东西 | **贴纸** | **自由图标**会让设计本身成为整个图标 |
| 在已有的皮肤上加点自己的创意 | 皮肤的 ⋯ 菜单 → **在设计器中再创作** | 这款皮肤会变成一个图片图层，供你在上面继续创作 |
| 修改以前设计的作品 | 它的 ⋯ 菜单 → **编辑设计** | **保存修改**会原地更新，**另存为新皮肤**则会两个都保留 |

## 使用方法

**开始**：第一次打开以及点**新建**时，会显示各种起点模板。每一个都是普通的设计，上面没有任何东西是固定不变的。如果当前设计还有没保存的修改，选择新模板之前会先问你。

**添加**：文件夹上方的工具栏可以添加**文字**、**表情**、**形状**（共十三种，从圆角矩形到对话气泡）、**图片**（一个文件、你的某款皮肤，或者直接拖入、粘贴到文件夹上的图片）、**花纹**和**颜色**（选中背景，没有背景时则添加一个）。

**排列**：点击一个图层即可选中它。选中的图层会着色高亮，四角和四边出现控制点，上方还有一个用来旋转的圆形控制点。

- 拖动即可移动。它会自动吸附到文件夹的中心、页签、文件夹边缘和其他图层上，按住 ⌘（Ctrl）可以自由放置。
- 拖动角或边可以调整大小。拖动图片的角会保持比例，拖动边则会裁切。文字和表情始终保持比例。
- 按住 ⇧ 可以按 15° 的步长旋转，或者保持形状的比例。按住 ⌥ 可以从中心调整大小。
- 双击文字可以编辑，双击表情可以替换。
- 点击文件夹本身可以选中它的背景。

**图层**：右上角的列表显示图层的堆叠顺序，最上层排在最前面。拖动一行可以调整顺序，双击名称可以重命名，眼睛、锁和垃圾桶图标分别用来隐藏图层、锁定位置和删除图层。标题栏末尾的**全部删除**会清空设计，随后弹出的提示可以把它们全部恢复，和按 ⌘Z 的效果一样。和每一行一样，标题栏上的按钮也只在鼠标指向时才显示。

**图层**和**设置**都可以通过各自的标题栏展开或收起，拖动它们之间的分隔条可以给图层区域多留或少留一些空间（双击分隔条可恢复原位，选中它时也可以用方向键移动）。它们最后的状态会记在这台电脑上。

**设置**：图层列表下方是所选图层的全部设置，标题栏上显示图层名称，还有调整顺序、创建副本和删除的按钮：

- 文字：字体、字重、对齐方式、斜体、大写、字号、字间距、行高和弯曲（拱形或微笑弧）。
- 颜色：纯色、线性渐变或径向渐变，最多四种颜色，支持透明度，还有现成的渐变预设。
- 形状：圆角、角数或边数，以及星形的凹陷深度或圆环的内孔大小。
- 图片：亮度、对比度、色彩、色相、模糊、黑白、怀旧、反相和圆角。
- 所有图层：不透明度，以及十六种混合模式之一。
- 可放置的图层还有阴影（点**改为发光**可以做出霓虹效果）和贴纸描边，也就是像模切贴纸那样沿着轮廓走的一圈边框。

没有选中任何图层时，设置里可以选择**贴在文件夹上**或**自由图标**。

**预览**：画布下方的**文件夹骨架**开关可以让设计显示在文件夹上（带页签、纸张和边缘），或者平铺显示，并在上面叠画文件夹的边缘，让你看清哪些部分会被文件夹挡住。对于自由图标，它会在背后显示一个淡淡的文件夹，方便对照大小。旁边的四个圆点可以把设计放到窗口、浅色桌面、深色桌面或彩色壁纸上查看，这对任何透明的设计都很重要。右侧按真实尺寸（64、32 和 16 点）显示的图标，能让你看到它在 Finder 或文件资源管理器中的实际效果。

**保存**：右上角的名称就是皮肤的名称，留空时会用设计里的前几个词来命名。**保存到我的皮肤**会把它存进皮肤库，**保存并应用**还会同时把它用到选中的文件夹上。保存之后，设计仍然保持打开，可以继续修改：**保存修改**会原地更新同一款皮肤，**另存为新皮肤**则会再添加一款。还没保存的设计，在你切换到应用的其他地方时会一直保留，而且会存在这台电脑上，直到保存或被替换为止。

目标文件夹下方的**包括里面的 N 个文件夹**，就是文件夹面板里的**包括子文件夹**开关：在任意一处打开，两处都会同时打开。打开后，**保存并应用**会把设计用到这个文件夹及其中的所有文件夹上，超过十个时会先问你。按钮会显示处理进度，旁边有**停止**，结束时会弹出提示说明结果：中途停止的，可以点**继续**。有些文件夹没能修改的，可以点**查看是哪些**，打开文件夹面板的汇总。

| 按键 | |
| --- | --- |
| ⌘Z / ⇧⌘Z | 撤销、重做 |
| Delete | 删除所选图层 |
| ⌘D | 创建它的副本 |
| ⌘C，然后 ⌘V | 复制它，再粘贴一份。剪贴板里有图片时，⌘V 会添加这张图片 |
| 方向键、⇧ 加方向键 | 微移 1 或 10 |
| ⌘] / ⌘[ | 上移一层、下移一层（加 ⌥：置于顶层、置于底层） |
| Esc | 取消选择 |
| 在图层列表中 | ↑ ↓ 选择，⌥↑ ⌥↓ 调整顺序，F2 重命名 |

## 工作原理

### 设计直接画在图标空间里

一个设计就是一块边长 1024 单位的正方形画布，和测量文件夹模板所用的画布完全相同（`crates/folderskin-core/src/geometry.rs`）。你放在某个位置的东西，就出现在文件夹上的同一个位置。和从文件添加的图案不同，这里既没有铺满缩放，也没有裁切（见 [SKINS.md](https://folderskin.app/zh-cn/docs/skins/)）。设计文档就是 `src/composer/doc.ts` 中的普通数据，每次修改都会生成一份新文档，撤销就是沿着这些文档一步步往回走（`src/composer/history.ts`）。

### 仍然只有一条渲染路径

WebView 只绘制用户自己的内容：文字、表情、形状、图片和花纹（`src/composer/render.ts`）。外面的文件夹来自 Rust 模板。`composer_template` 会以 2048 px 的母版尺寸渲染一次模板，并拆分成把设计夹在中间的几个图层（`compositor::template_layers`）：

```
top      前面板的轮廓高光，以及沿底边的阴影
design   以 front 为遮罩：前面板覆盖的区域
middle   后面板的轮廓高光、纸张及其高光
design   以 back 为遮罩：后面板覆盖的区域，含页签
```

画布区域每一帧都会把这四层叠起来（`src/composer/composite.ts`），开销很低，拖动时也足够流畅。保存的图标由 `compositor::render_master_placed` 生成，它用同样的辅助函数绘制同一个模板，两块面板都填入放在原位的设计。测试 `the_layers_stacked_around_a_design_are_the_saved_icon` 保证两者每个通道的差异不超过 3 级，所以画布上看到的就是最终写入的图标。第五个图层 `outline` 是文件夹的可见边缘，平铺视图会给它着色，它永远不会成为图标的一部分。

### 保存

保存时，会以 2048 px 再绘制一次设计，编码为 PNG，然后在一个小小的 JSON 头之后以原始字节发送给 `composer_save`（`[u32 LE header length][header][PNG]`，见 `src/composer/body.ts`）。剩下的工作由 Rust 端的 `src-tauri/src/composer.rs` 完成：

- **贴在文件夹上**：根据设计渲染出文件夹。
- **自由图标**：直接把设计原样作为图标。完全透明的设计会被拒绝。
- **存储形式**：成品文件夹（`kind: "folder"`，`source: "composer"`），所以无论是用到文件夹上、生成缩略图还是分享，都和其他成品文件夹一样。
- **设计文档**：以 `<stem>.design.json` 的形式保存在图片旁边，**编辑设计**就是靠它重新打开设计的。
- **ID**：由设计的 PNG、设计文档和形状共同算出的 SHA-256。同一个设计保存两次，仍然只是一款皮肤。
- **保存修改**：在一次索引写入中替换旧皮肤，并保留它在皮肤库中的位置。收藏也会转到新 ID 上。

再创作时，会用 `composer_skin_image` 读取皮肤自身的图片：

- **图案**会变成一张铺满文件夹的图片。
- **成品文件夹**会变成一个自由图标，图片完整放在里面，和 FolderSkin 把它用到文件夹上时一模一样。

### 命令

| 命令 | 输入 | 输出 |
| --- | --- | --- |
| `composer_template` | – | `{size, back, front, middle, top, outline, parts}`：以 PNG data URL 表示的各个图层，以及文件夹各部分的位置（画布单位） |
| `composer_save` | 原始请求体，头部为 `{name, tags, shape, design, replaces}` | `{skin, replaced}`：保存的皮肤，以及被它替换的设计的 ID |
| `composer_preview` | 原始请求体，头部为 `{shape, sizes}` | 各个尺寸的图标（16 到 512，最多六个），以 data URL 表示 |
| `composer_image` | `path` | `{url, width, height, name, alpha}`：一个图片文件，最大 2048 px，有透明度时为 PNG，没有则为 JPEG |
| `composer_skin_image` | `skinId` | 同上，但针对已保存皮肤自身的图片 |
| `composer_design` | `skinId` | 设计文档，如果皮肤不是在这里做的则为 `null` |

### 设计文档

```json
{ "version": 1, "shape": "folder", "layers": [ { "kind": "fill", "paint": { "type": "solid", "color": "#3a86ff" }, "opacity": 1, "blend": "normal", "id": "…" } ] }
```

图层按从第一个到最后一个的顺序依次绘制：

- **覆盖整个画布**：`fill`（颜色或渐变）和 `pattern`。
- **可放置的**：`text`、`emoji`、`shape` 和 `image`。每个都有以画布单位表示的中心点 `x, y`、以度为单位的 `rotation`、翻转，以及可选的 `shadow` 和可选的贴纸描边 `edge`。
- **所有图层**：`opacity`、`blend`，以及可选的 `name`、`hidden` 和 `locked`。

颜色格式为 `#rrggbb`，带透明度时为 `#rrggbbaa`。图片以 data URL 的形式保存在文档内部。从磁盘读取的文档会先经过 `parseDoc` 处理：

- 未知的图层会被丢弃，超过 64 个图层时只保留 64 个。
- 数值会被限制在合理范围内，颜色会被转成规范写法。
- 不是 PNG、JPEG、WebP 或 GIF data URL 的图片会被丢弃。
- 来自更新版本的文档会被拒绝，以免读错。

### 值得了解的限制

- **表情**来自系统的 emoji 字体。在 macOS 上，这种字体是位图，大约 160 px 以内都很清晰，所以特别大的表情在 Finder 最大的几种图标尺寸下会略显模糊，而在 Finder 平常显示的各种尺寸下都很锐利。
- **字体**按风格提供，每种风格对应一组 macOS、Windows 或 Linux 自带的字体，按优先顺序排列（`src/composer/fonts.ts`）。FolderSkin 只内置了 Manrope。**其他已安装字体**可以按名称使用任何已安装的字体族。设计是以像素保存的，所以字体只需要装在制作它的那台电脑上。
- **图片调整**直接在像素上完成（`src/composer/imagefx.ts`），因为 macOS 12 的 WebView 不支持 canvas 滤镜。模糊效果由三次盒式模糊叠加而成，接近高斯模糊。
- **草稿**保存在 WebView 的存储中，包含几张大图的设计可能会超出存储上限。即便如此，这样的草稿也会一直保留到应用退出。

### 浏览器预览

在普通浏览器中运行 `pnpm dev` 也能看到设计器。文件夹图层是 `docs/images/composer/` 中的 PNG，由 `cargo run -p folderskin-tools -- composer-layers --out docs/images/composer` 生成。`folderskin-tools` 中有一个测试会检查它们与合成器绘制的像素是否一致，所以它们不会过时。

### 测试

| | |
| --- | --- |
| `folderskin-core` 合成器 | 叠加的图层与保存的图标一致，设计会落在绘制时的位置，透明的设计只留下纸张和边缘，轮廓线贴合可见的边缘 |
| `src-tauri` 存储 | 设计文档保存在图标旁边，重启后仍在，删除时一并删除，崩溃后留下的孤立文档会被清理。覆盖保存设计时保留它的位置，并拒绝覆盖不是设计的皮肤 |
| `src-tauri` 设计器 | 请求体的分帧、图片检查、预览、保存、命名、损坏的文档、各种图片编码，以及以原始字节经由 Tauri 自己的 IPC（它的 mock runtime）发送的设计能被正确预览和保存 |
| 前端（vitest） | 设计文档的修改与读回、撤销、移动、调整大小、旋转与吸附、文字排版与弯曲、形状、颜色、图片调整、模板、请求体的分帧 |