缩略图插件

SpineThumbnailGenerateServer/index.html

@@ -13,18 +13,25 @@
 			border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; }
 		.notice b { color: var(--text); font-weight: 500; }
 		.notice code { color: var(--accent); font-family: ui-monospace, Consolas, monospace; }
-		.toggle-row { display: flex; align-items: center; gap: 8px; cursor: pointer;
+		.toggle-row { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
+			flex: 1 1 240px;
 			background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; }
 		.toggle-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
-		.toolbar { display: flex; gap: 8px; }
-		.toolbar .toggle-row { flex: 1; }
+		/* 窗口窄的时候整组换行，而不是把标签压成一列一个字符。 */
+		.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
+		.toolbar-group { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
 		#clear { background: var(--panel); color: var(--text); border: 1px solid var(--border);
-			border-radius: 6px; padding: 9px 12px; font: inherit; cursor: pointer; }
+			border-radius: 6px; padding: 9px 12px; font: inherit; cursor: pointer; white-space: nowrap; }
 		#clear:hover { border-color: var(--accent); color: var(--accent); }
+		.mode-row { display: flex; align-items: center; gap: 8px; color: var(--dim); white-space: nowrap;
+			flex: 0 1 auto;
+			background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 9px 11px; }
+		.mode-row select { background: var(--panel); color: var(--text); border: 1px solid var(--border);
+			border-radius: 6px; padding: 3px 6px; font: inherit; max-width: 200px; }
 		.row { display: flex; gap: 8px; align-items: baseline; color: var(--dim); }
 		.row b { color: var(--text); font-weight: 500; word-break: break-all; }
 		#stats { color: var(--accent); }
-		#log { flex: 1; overflow: auto; margin: 0; padding: 10px; list-style: none;
+		#log { flex: 1; overflow: auto; margin: 0; padding: 10px; list-style: none; min-height: 140px;
 			background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
 			font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55; }
 		#log li { white-space: pre-wrap; word-break: break-all; }
@@ -50,11 +57,29 @@
 		导入 Spine 资产（<code>.skel</code> / <code>.json</code> + <code>.atlas</code> + 贴图）后，
 		本插件会为还没设置缩略图的素材生成一张骨骼预览图。
 		<b>它只处理本次新导入的素材，不扫描、不修改历史素材，也不会覆盖你已经设置过的自定义缩略图。</b>
+		生成方式可切换：<b>动态</b>取骨骼里的第一个动画压成 WebP（200×200，体积按动画时长自动定，
+		参数与主插件默认值一致），<b>静帧</b>始终用 setup pose。
 		自动生成默认关闭，需要你在下面手动启用。
 	</div>
 	<div class="toolbar">
-		<label class="toggle-row"><input type="checkbox" id="toggle"><span>导入时自动生成缩略图</span></label>
-		<button id="clear" type="button">清空日志</button>
+		<div class="toolbar-group">
+			<label class="toggle-row"><input type="checkbox" id="toggle"><span>导入时自动生成缩略图</span></label>
+			<button id="clear" type="button">清空日志</button>
+		</div>
+		<div class="toolbar-group">
+			<label class="mode-row"><span>生成方式</span>
+				<select id="mode">
+					<option value="animated">动态（第一个动画）</option>
+					<option value="static">静帧（setup pose）</option>
+				</select>
+			</label>
+			<label class="mode-row"><span>生成策略</span>
+				<select id="strategy">
+					<option value="size">最优体积（慢）</option>
+					<option value="speed">最优速度（快）</option>
+				</select>
+			</label>
+		</div>
 	</div>
 	<div class="row"><span>状态</span><b id="status">启动中…</b></div>
 	<div class="row"><span>素材库</span><b id="library">—</b></div>
@@ -92,6 +117,9 @@
 	<script src="js/spine-webgl-rasterizer.js"></script>
 	<script src="js/spine-canvas-clipping.js"></script>
 	<script src="js/spine-background.js"></script>
+	<script src="js/spine-visible-bounds.js"></script>
+	<script src="js/animated-profiles.js"></script>
+	<script src="js/animated-webp-encoder.js"></script>
 	<script src="js/spine-utils.js"></script>
 	<script src="js/spine-legacy-binary.js"></script>
 	<script src="js/spine-badge.js"></script>