@rinova/playground 0.1.3 → 0.1.5

package/README.md

@@ -89,6 +89,8 @@ const size = ref<'sm' | 'md' | 'lg'>('lg')
 | `port` | Vite 默认（5173） | dev server 端口 |
 | `components` | — | 契约清单要扫的组件 glob；不配则不生成 `.playground/manifest.json` |
 | `tsconfig` | 项目根 `tsconfig.json` | 组件契约提取用的 tsconfig |
+| `groups` | — | 分组（`scenes` 下一级目录名）→ 侧栏显示名，**声明顺序即侧栏顺序**：`{ 'tao-common': 'Tao 通用组件' }` |
+| `groupIndex` | `false` | 为每个分组自动合成一个「概览」落地页，点分组标题即可进入 |
 
 ## 场景内 API
 
@@ -131,6 +133,21 @@ useSceneOutput(() => ({ size: args.size, clicked: count.value }))
 
 面板以 400ms 轮询这个 getter，把返回值显示在出参区。
 
+### 一个场景多个 demo —— 参数槽位
+
+同一场景里放多个 demo 时，各自调用一次并在选项里写 `slot`，面板会按槽位名分块，
+互不干扰（改一块的入参只影响那一个 demo）：
+
+```ts
+const primary = useSceneArgs({ label: '主按钮', size: 'md' }, { slot: '主按钮' })
+const ghost = useSceneArgs({ label: '次按钮', size: 'sm' }, { slot: '次按钮' })
+
+useSceneOutput(() => ({ clicked: primaryCount.value }), '主按钮')
+useSceneOutput(() => ({ clicked: ghostCount.value }), '次按钮')
+```
+
+槽位按代码里声明的顺序排列；只有一块时不显示槽位标题。
+
 ### toast
 
 ```ts
@@ -142,6 +159,7 @@ toast('保存失败', 'error')     // 'info' | 'success' | 'warning' | 'error'
 
 ## 样式约定
 
+- 只需引入一次 `@rinova/playground/style.css`（外壳样式）。**编辑器界面样式由包内按需加载**：打开代码面板时才会去拉 `@rinova/playground/editor.css`（≈125 KB gzip），不用手动引入；配 `codeViewer: 'shiki'` 的项目则永远不加载它。
 - 场景写 `<style scoped lang="less">`（使用方需要装 `less`）。**v0.1 没有 DOM 隔离**，非 scoped 样式会污染外壳。
 - 不要硬编码颜色，用外壳暴露的 12 个变量，明暗主题自动切换：
 

package/dist/{App-CK1Q_fap.js → App-DUVLlDOI.js}

@@ -1,4 +1,4 @@
-import { a as toast, o as toastState, r as currentArgs, t as currentOutput } from "./output-Dx3ubog9.js";
+import { a as currentArgsSlots, c as toastState, i as currentArgs, n as currentOutputSlots, s as toast, t as currentOutput } from "./output-CGawAeuu.js";
 import { Fragment, Teleport, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, h, inject, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, watch, watchEffect, withCtx } from "vue";
 import config from "virtual:playground/config";
 import { scenes } from "virtual:playground/scenes";
@@ -2379,7 +2379,7 @@ var Registry$1 = class {
 };
 var INITIAL = StateStackImpl.NULL;
 // src/components/PwToastHost.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$10 = {
+var _hoisted_1$11 = {
 	class: "pw-toast-host",
 	role: "status",
 	"aria-live": "polite"
@@ -2388,7 +2388,7 @@ var PwToastHost_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	__name: "PwToastHost",
 	setup(__props) {
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Teleport, { to: "body" }, [createElementVNode("div", _hoisted_1$10, [createVNode(TransitionGroup, { name: "pw-toast" }, {
+			return openBlock(), createBlock(Teleport, { to: "body" }, [createElementVNode("div", _hoisted_1$11, [createVNode(TransitionGroup, { name: "pw-toast" }, {
 				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(toastState), (item) => {
 					return openBlock(), createElementBlock("div", {
 						key: item.id,
@@ -2884,13 +2884,13 @@ var X$2 = createLucideIcon({
 	}]]
 });
 // src/components/PwButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$9 = ["disabled", "title"];
-var _hoisted_2$8 = {
+var _hoisted_1$10 = ["disabled", "title"];
+var _hoisted_2$9 = {
 	key: 0,
 	class: "pw-btn__spinner",
 	"aria-hidden": "true"
 };
-var _hoisted_3$7 = {
+var _hoisted_3$8 = {
 	key: 2,
 	class: "pw-btn__label"
 };
@@ -2921,13 +2921,13 @@ var PwButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				disabled: __props.disabled || __props.loading,
 				title: __props.title,
 				type: "button"
-			}, [__props.loading ? (openBlock(), createElementBlock("span", _hoisted_2$8)) : renderSlot(_ctx.$slots, "icon", {}, void 0, true, 1), _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3$7, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true)], 10, _hoisted_1$9);
+			}, [__props.loading ? (openBlock(), createElementBlock("span", _hoisted_2$9)) : renderSlot(_ctx.$slots, "icon", {}, void 0, true, 1), _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_3$8, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])) : createCommentVNode("", true)], 10, _hoisted_1$10);
 		};
 	}
 }), [["__scopeId", "data-v-8c5978c8"]]);
 // src/components/PwInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$8 = ["data-empty"];
-var _hoisted_2$7 = [
+var _hoisted_1$9 = ["data-empty"];
+var _hoisted_2$8 = [
 	"type",
 	"value",
 	"placeholder",
@@ -2986,7 +2986,7 @@ var PwInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 					onKeydown: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("keydown", $event)),
 					onFocus: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("focus", $event)),
 					onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("blur", $event))
-				}, null, 40, _hoisted_2$7),
+				}, null, 40, _hoisted_2$8),
 				__props.clearable && __props.modelValue ? (openBlock(), createElementBlock("button", {
 					key: 0,
 					class: "pw-input__clear",
@@ -2995,12 +2995,12 @@ var PwInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 					onClick: clear
 				}, " × ")) : createCommentVNode("", true),
 				renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
-			], 10, _hoisted_1$8);
+			], 10, _hoisted_1$9);
 		};
 	}
 }), [["__scopeId", "data-v-e249cd4b"]]);
 // src/components/PwSwitch.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$7 = ["aria-checked", "disabled"];
+var _hoisted_1$8 = ["aria-checked", "disabled"];
 // src/components/PwSwitch.vue
 var PwSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "PwSwitch",
@@ -3019,7 +3019,7 @@ var PwSwitch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				"aria-checked": __props.modelValue,
 				disabled: __props.disabled,
 				onClick: _cache[0] || (_cache[0] = ($event) => emit("update:modelValue", !__props.modelValue))
-			}, [..._cache[1] || (_cache[1] = [createElementVNode("span", { class: "pw-switch__thumb" }, null, -1)])], 10, _hoisted_1$7);
+			}, [..._cache[1] || (_cache[1] = [createElementVNode("span", { class: "pw-switch__thumb" }, null, -1)])], 10, _hoisted_1$8);
 		};
 	}
 }), [["__scopeId", "data-v-64fffbcb"]]);
@@ -11093,16 +11093,16 @@ var getHighlighter = () => {
 	return highlighterPromise;
 };
 // src/code/CodeBlock.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$6 = { class: "pw-code" };
-var _hoisted_2$6 = {
+var _hoisted_1$7 = { class: "pw-code" };
+var _hoisted_2$7 = {
 	key: 0,
 	class: "pw-code__hint"
 };
-var _hoisted_3$6 = {
+var _hoisted_3$7 = {
 	key: 1,
 	class: "pw-code__error"
 };
-var _hoisted_4$6 = ["innerHTML"];
+var _hoisted_4$7 = ["innerHTML"];
 // src/code/CodeBlock.vue
 var CodeBlock_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "CodeBlock",
@@ -11134,34 +11134,53 @@ var CodeBlock_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}
 		}, { immediate: true });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$6, [state.value === "loading" ? (openBlock(), createElementBlock("div", _hoisted_2$6, "高亮中…")) : state.value === "error" ? (openBlock(), createElementBlock("pre", _hoisted_3$6, toDisplayString(error.value), 1)) : (openBlock(), createElementBlock("div", {
+			return openBlock(), createElementBlock("div", _hoisted_1$7, [state.value === "loading" ? (openBlock(), createElementBlock("div", _hoisted_2$7, "高亮中…")) : state.value === "error" ? (openBlock(), createElementBlock("pre", _hoisted_3$7, toDisplayString(error.value), 1)) : (openBlock(), createElementBlock("div", {
 				key: 2,
 				class: "pw-code__body",
 				innerHTML: html.value
-			}, null, 8, _hoisted_4$6))]);
+			}, null, 8, _hoisted_4$7))]);
 		};
 	}
 }), [["__scopeId", "data-v-feddef62"]]);
 // src/app/PlaygroundParamsPanel.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$5 = { class: "pw-params" };
-var _hoisted_2$5 = { class: "pw-params__head" };
-var _hoisted_3$5 = ["disabled"];
-var _hoisted_4$5 = ["disabled"];
-var _hoisted_5$5 = { class: "pw-params__body" };
-var _hoisted_6$3 = {
+var _hoisted_1$6 = { class: "pw-params" };
+var _hoisted_2$6 = { class: "pw-params__head" };
+var _hoisted_3$6 = ["disabled"];
+var _hoisted_4$6 = ["disabled"];
+var _hoisted_5$6 = { class: "pw-params__body" };
+var _hoisted_6$4 = {
+	key: 0,
+	class: "pw-params__slots"
+};
+var _hoisted_7$4 = {
 	key: 0,
-	class: "pw-form"
+	class: "pw-slot__head"
 };
-var _hoisted_7$3 = ["title"];
-var _hoisted_8$1 = ["value", "onChange"];
-var _hoisted_9$1 = ["value"];
-var _hoisted_10 = {
+var _hoisted_8$2 = { class: "pw-slot__name" };
+var _hoisted_9$1 = { class: "pw-form" };
+var _hoisted_10$1 = ["title"];
+var _hoisted_11 = ["value", "onChange"];
+var _hoisted_12 = ["value"];
+var _hoisted_13 = {
 	key: 0,
 	class: "pw-params__hint"
 };
-var _hoisted_11 = {
+var _hoisted_14 = {
+	key: 0,
+	class: "pw-params__hint pw-params__hint--empty"
+};
+var _hoisted_15 = {
 	key: 1,
-	class: "pw-params__output"
+	class: "pw-params__slots"
+};
+var _hoisted_16 = {
+	key: 0,
+	class: "pw-slot__head"
+};
+var _hoisted_17 = { class: "pw-slot__name" };
+var _hoisted_18 = {
+	key: 0,
+	class: "pw-params__hint pw-params__hint--empty"
 };
 // src/app/PlaygroundParamsPanel.vue
 var PlaygroundParamsPanel_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -11169,67 +11188,56 @@ var PlaygroundParamsPanel_default = /*#__PURE__*/ _plugin_vue_export_helper_defa
 	props: { theme: {} },
 	setup(__props) {
 		const tab = ref("args");
-		const snapshot = ref(null);
-		const error = ref("");
+		const snapshots = ref([]);
 		let timer = null;
-		const hasArgs = computed(() => currentArgs.value !== null);
-		const hasOutput = computed(() => typeof currentOutput.value === "function");
+		const argsSlots = computed(() => currentArgsSlots.value);
+		const outputSlots = computed(() => currentOutputSlots.value);
+		const hasArgs = computed(() => argsSlots.value.length > 0);
+		const hasOutput = computed(() => outputSlots.value.length > 0);
+		/** 多槽位（一个场景多个 demo）时，每块都加小标题 */
+		const multiSlot = computed(() => argsSlots.value.length > 1 || outputSlots.value.length > 1);
 		const activeTab = computed(() => {
 			if (tab.value === "args" && hasArgs.value) return "args";
 			if (tab.value === "output" && hasOutput.value) return "output";
 			return hasArgs.value ? "args" : "output";
 		});
-		/** 表单字段：按值的类型决定控件 */
-		const fields = computed(() => {
-			const binding = currentArgs.value;
-			if (!binding) return [];
-			return Object.entries(binding.values).map(([key, value]) => ({
-				key,
-				value,
-				label: binding.options.labels?.[key] ?? key,
-				kind: typeof value === "boolean" ? "boolean" : typeof value === "number" ? "number" : "string",
-				options: binding.options.options?.[key]
-			}));
-		});
-		const setValue = (key, value) => {
-			const binding = currentArgs.value;
-			if (!binding) return;
+		const fieldsOf = (binding) => Object.entries(binding.values).map(([key, value]) => ({
+			key,
+			value,
+			label: binding.options.labels?.[key] ?? key,
+			kind: typeof value === "boolean" ? "boolean" : typeof value === "number" ? "number" : "string",
+			options: binding.options.options?.[key]
+		}));
+		const setValue = (binding, key, value) => {
 			binding.values[key] = value;
 		};
-		const setString = (key, raw) => setValue(key, raw);
-		const setNumber = (key, raw) => {
+		const setString = (binding, key, raw) => setValue(binding, key, raw);
+		const setNumber = (binding, key, raw) => {
 			const parsed = Number(raw);
-			setValue(key, Number.isFinite(parsed) ? parsed : 0);
+			setValue(binding, key, Number.isFinite(parsed) ? parsed : 0);
 		};
-		const resetArgs = () => {
-			const binding = currentArgs.value;
-			if (!binding) return;
+		const resetSlot = (binding) => {
 			for (const [key, value] of Object.entries(binding.defaults)) binding.values[key] = value;
 		};
+		const resetAll = () => {
+			argsSlots.value.forEach(resetSlot);
+		};
 		const readOutput = () => {
-			const getter = currentOutput.value;
-			if (!getter) {
-				snapshot.value = null;
-				error.value = "";
-				return;
-			}
-			try {
-				snapshot.value = getter();
-				error.value = "";
-			} catch (err) {
-				error.value = err instanceof Error ? err.message : String(err);
-				snapshot.value = null;
-			}
+			snapshots.value = outputSlots.value.map((binding) => {
+				try {
+					const value = binding.getter();
+					return {
+						label: binding.label || binding.key,
+						text: JSON.stringify(value, null, 2) ?? String(value)
+					};
+				} catch (err) {
+					return {
+						label: binding.label || binding.key,
+						text: err instanceof Error ? err.message : String(err)
+					};
+				}
+			});
 		};
-		const outputText = computed(() => {
-			if (error.value) return error.value;
-			if (!snapshot.value) return "（无数据）";
-			try {
-				return JSON.stringify(snapshot.value, null, 2);
-			} catch {
-				return String(snapshot.value);
-			}
-		});
 		const startPolling = () => {
 			readOutput();
 			timer = window.setInterval(readOutput, 400);
@@ -11242,69 +11250,130 @@ var PlaygroundParamsPanel_default = /*#__PURE__*/ _plugin_vue_export_helper_defa
 			if (timer !== null) window.clearInterval(timer);
 		});
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("aside", _hoisted_1$5, [createElementVNode("header", _hoisted_2$5, [
+			return openBlock(), createElementBlock("aside", _hoisted_1$6, [createElementVNode("header", _hoisted_2$6, [
 				createElementVNode("button", {
 					type: "button",
 					class: normalizeClass(["pw-params__tab", { "is-active": activeTab.value === "args" }]),
 					disabled: !hasArgs.value,
 					onClick: _cache[0] || (_cache[0] = ($event) => tab.value = "args")
-				}, " 入参 ", 10, _hoisted_3$5),
+				}, " 入参 ", 10, _hoisted_3$6),
 				createElementVNode("button", {
 					type: "button",
 					class: normalizeClass(["pw-params__tab", { "is-active": activeTab.value === "output" }]),
 					disabled: !hasOutput.value,
 					onClick: _cache[1] || (_cache[1] = ($event) => tab.value = "output")
-				}, " 出参 ", 10, _hoisted_4$5),
+				}, " 出参 ", 10, _hoisted_4$6),
 				_cache[2] || (_cache[2] = createElementVNode("span", { class: "pw-params__spacer" }, null, -1)),
 				activeTab.value === "args" && hasArgs.value ? (openBlock(), createBlock(PwButton_default, {
 					key: 0,
 					size: "sm",
 					variant: "text",
 					title: "恢复默认值",
-					onClick: resetArgs
+					onClick: resetAll
 				}, {
 					icon: withCtx(() => [createVNode(unref(RotateCcw), { size: 13 })]),
 					_: 1
 				})) : createCommentVNode("", true)
-			]), createElementVNode("div", _hoisted_5$5, [activeTab.value === "args" ? (openBlock(), createElementBlock("div", _hoisted_6$3, [(openBlock(true), createElementBlock(Fragment, null, renderList(fields.value, (field) => {
-				return openBlock(), createElementBlock("div", {
-					key: field.key,
-					class: "pw-form__row"
-				}, [createElementVNode("label", {
-					class: "pw-form__label",
-					title: field.key
-				}, toDisplayString(field.label), 9, _hoisted_7$3), field.kind === "boolean" ? (openBlock(), createBlock(PwSwitch_default, {
-					key: 0,
-					"model-value": field.value === true,
-					"onUpdate:modelValue": ($event) => setValue(field.key, $event)
-				}, null, 8, ["model-value", "onUpdate:modelValue"])) : field.options ? (openBlock(), createElementBlock("select", {
-					key: 1,
-					class: "pw-form__select",
-					value: String(field.value),
-					onChange: ($event) => setString(field.key, $event.target.value)
-				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(field.options, (option) => {
-					return openBlock(), createElementBlock("option", {
-						key: String(option),
-						value: String(option)
-					}, toDisplayString(option), 9, _hoisted_9$1);
-				}), 128))], 40, _hoisted_8$1)) : (openBlock(), createBlock(PwInput_default, {
-					key: 2,
+			]), createElementVNode("div", _hoisted_5$6, [activeTab.value === "args" ? (openBlock(), createElementBlock("div", _hoisted_6$4, [(openBlock(true), createElementBlock(Fragment, null, renderList(argsSlots.value, (slot) => {
+				return openBlock(), createElementBlock("section", {
+					key: `${slot.key}:${slot.label}`,
+					class: "pw-slot"
+				}, [multiSlot.value ? (openBlock(), createElementBlock("header", _hoisted_7$4, [createElementVNode("span", _hoisted_8$2, toDisplayString(slot.label || slot.key), 1), createVNode(PwButton_default, {
 					size: "sm",
-					type: field.kind === "number" ? "number" : "text",
-					"model-value": String(field.value ?? ""),
-					"onUpdate:modelValue": ($event) => field.kind === "number" ? setNumber(field.key, $event) : setString(field.key, $event)
-				}, null, 8, [
-					"type",
-					"model-value",
-					"onUpdate:modelValue"
-				]))]);
-			}), 128)), !fields.value.length ? (openBlock(), createElementBlock("p", _hoisted_10, "该场景没有声明入参")) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("div", _hoisted_11, [createVNode(CodeBlock_default, {
-				code: outputText.value,
-				lang: "json"
-			}, null, 8, ["code"])]))])]);
+					variant: "text",
+					title: "只恢复这一块",
+					onClick: ($event) => resetSlot(slot)
+				}, {
+					icon: withCtx(() => [createVNode(unref(RotateCcw), { size: 12 })]),
+					_: 1
+				}, 8, ["onClick"])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_9$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(fieldsOf(slot), (field) => {
+					return openBlock(), createElementBlock("div", {
+						key: field.key,
+						class: "pw-form__row"
+					}, [createElementVNode("label", {
+						class: "pw-form__label",
+						title: field.key
+					}, toDisplayString(field.label), 9, _hoisted_10$1), field.kind === "boolean" ? (openBlock(), createBlock(PwSwitch_default, {
+						key: 0,
+						"model-value": field.value === true,
+						"onUpdate:modelValue": ($event) => setValue(slot, field.key, $event)
+					}, null, 8, ["model-value", "onUpdate:modelValue"])) : field.options ? (openBlock(), createElementBlock("select", {
+						key: 1,
+						class: "pw-form__select",
+						value: String(field.value),
+						onChange: ($event) => setString(slot, field.key, $event.target.value)
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(field.options, (option) => {
+						return openBlock(), createElementBlock("option", {
+							key: String(option),
+							value: String(option)
+						}, toDisplayString(option), 9, _hoisted_12);
+					}), 128))], 40, _hoisted_11)) : (openBlock(), createBlock(PwInput_default, {
+						key: 2,
+						size: "sm",
+						type: field.kind === "number" ? "number" : "text",
+						"model-value": String(field.value ?? ""),
+						"onUpdate:modelValue": ($event) => field.kind === "number" ? setNumber(slot, field.key, $event) : setString(slot, field.key, $event)
+					}, null, 8, [
+						"type",
+						"model-value",
+						"onUpdate:modelValue"
+					]))]);
+				}), 128)), !fieldsOf(slot).length ? (openBlock(), createElementBlock("p", _hoisted_13, "这一块没有声明入参")) : createCommentVNode("", true)])]);
+			}), 128)), !argsSlots.value.length ? (openBlock(), createElementBlock("p", _hoisted_14, " 该场景没有声明入参 ")) : createCommentVNode("", true)])) : (openBlock(), createElementBlock("div", _hoisted_15, [(openBlock(true), createElementBlock(Fragment, null, renderList(snapshots.value, (item) => {
+				return openBlock(), createElementBlock("section", {
+					key: item.label,
+					class: "pw-slot pw-slot--output"
+				}, [multiSlot.value ? (openBlock(), createElementBlock("header", _hoisted_16, [createElementVNode("span", _hoisted_17, toDisplayString(item.label), 1)])) : createCommentVNode("", true), createVNode(CodeBlock_default, {
+					code: item.text,
+					lang: "json"
+				}, null, 8, ["code"])]);
+			}), 128)), !snapshots.value.length ? (openBlock(), createElementBlock("p", _hoisted_18, "（无数据）")) : createCommentVNode("", true)]))])]);
+		};
+	}
+}), [["__scopeId", "data-v-582d049e"]]);
+// src/app/PlaygroundGroupIndex.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$5 = { class: "pw-group-index" };
+var _hoisted_2$5 = { class: "pw-group-index__head" };
+var _hoisted_3$5 = { class: "pw-group-index__title" };
+var _hoisted_4$5 = { class: "pw-group-index__count" };
+var _hoisted_5$5 = { class: "pw-group-index__list" };
+var _hoisted_6$3 = ["onClick"];
+var _hoisted_7$3 = {
+	key: 0,
+	class: "pw-group-index__desc"
+};
+var _hoisted_8$1 = { class: "pw-group-index__id" };
+// src/app/PlaygroundGroupIndex.vue
+var PlaygroundGroupIndex_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "PlaygroundGroupIndex",
+	props: {
+		group: {},
+		items: {}
+	},
+	emits: ["select"],
+	setup(__props) {
+		/**
+		* 分组落地页：由 `groupIndex: true` 时框架合成的条目使用。
+		* 没有源文件，只是把该组其它场景列出来。
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("section", _hoisted_1$5, [createElementVNode("header", _hoisted_2$5, [createElementVNode("h2", _hoisted_3$5, toDisplayString(__props.group), 1), createElementVNode("span", _hoisted_4$5, toDisplayString(__props.items.length) + " 个场景", 1)]), createElementVNode("ul", _hoisted_5$5, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+				return openBlock(), createElementBlock("li", {
+					key: item.id,
+					class: "pw-group-index__item"
+				}, [
+					createElementVNode("button", {
+						type: "button",
+						class: "pw-group-index__link",
+						onClick: ($event) => _ctx.$emit("select", item.id)
+					}, toDisplayString(item.title), 9, _hoisted_6$3),
+					item.description ? (openBlock(), createElementBlock("p", _hoisted_7$3, toDisplayString(item.description), 1)) : createCommentVNode("", true),
+					createElementVNode("code", _hoisted_8$1, toDisplayString(item.id), 1)
+				]);
+			}), 128))])]);
 		};
 	}
-}), [["__scopeId", "data-v-7e91c8d4"]]);
+}), [["__scopeId", "data-v-97e3a4f9"]]);
 // src/app/PlaygroundSidebar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$4 = { class: "pw-sidebar" };
 var _hoisted_2$4 = { class: "pw-sidebar__brand" };
@@ -11313,11 +11382,12 @@ var _hoisted_4$4 = { class: "pw-sidebar__search" };
 var _hoisted_5$4 = { class: "pw-sidebar__nav" };
 var _hoisted_6$2 = { class: "pw-nav-group__title" };
 var _hoisted_7$2 = ["onClick"];
-var _hoisted_8 = {
+var _hoisted_8 = ["onClick"];
+var _hoisted_9 = {
 	key: 0,
 	class: "pw-sidebar__empty"
 };
-var _hoisted_9 = { class: "pw-sidebar__footer" };
+var _hoisted_10 = { class: "pw-sidebar__footer" };
 // src/app/PlaygroundSidebar.vue
 var PlaygroundSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "PlaygroundSidebar",
@@ -11332,6 +11402,8 @@ var PlaygroundSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 		const props = __props;
 		const query = ref("");
 		const inputRef = ref(null);
+		/** 分组头点击聚焦该组的合成落地页；没有落地页时返回 null */
+		const groupIndexId = (group) => group.items.find((item) => item.kind === "group-index")?.id ?? null;
 		const focusSearch = () => {
 			inputRef.value?.focus();
 		};
@@ -11369,20 +11441,25 @@ var PlaygroundSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 					return openBlock(), createElementBlock("section", {
 						key: group.name,
 						class: "pw-nav-group"
-					}, [createElementVNode("div", _hoisted_6$2, toDisplayString(group.name), 1), (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
+					}, [createElementVNode("div", _hoisted_6$2, [groupIndexId(group) ? (openBlock(), createElementBlock("button", {
+						key: 0,
+						type: "button",
+						class: normalizeClass(["pw-nav-group__title-btn", { "is-active": groupIndexId(group) === __props.activeId }]),
+						onClick: ($event) => _ctx.$emit("select", groupIndexId(group))
+					}, toDisplayString(group.name), 11, _hoisted_7$2)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(group.name), 1)], 64))]), (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
 						return openBlock(), createElementBlock("button", {
 							key: item.id,
 							type: "button",
 							class: normalizeClass(["pw-nav-item", { "is-active": item.id === __props.activeId }]),
 							onClick: ($event) => _ctx.$emit("select", item.id)
-						}, toDisplayString(item.title), 11, _hoisted_7$2);
+						}, toDisplayString(item.title), 11, _hoisted_8);
 					}), 128))]);
-				}), 128)), !filteredGroups.value.length ? (openBlock(), createElementBlock("p", _hoisted_8, "没有匹配的场景")) : createCommentVNode("", true)]),
-				createElementVNode("footer", _hoisted_9, toDisplayString(__props.sceneCount) + " 个场景", 1)
+				}), 128)), !filteredGroups.value.length ? (openBlock(), createElementBlock("p", _hoisted_9, "没有匹配的场景")) : createCommentVNode("", true)]),
+				createElementVNode("footer", _hoisted_10, toDisplayString(__props.sceneCount) + " 个场景", 1)
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-826f64d4"]]);
+}), [["__scopeId", "data-v-cda96938"]]);
 // src/code/monaco.ts
 /**
 * Monaco 单例：worker 环境只能设置一次，highlighter 也只注入一次。
@@ -11410,9 +11487,10 @@ var loadMonaco = () => {
 		const [editorWorker, tsWorker, monaco, _contribution, shikiModule] = await Promise.all([
 			import("./editor.worker-VDFPHiZj.js"),
 			import("./ts.worker-CpQm_d0w.js"),
-			import("./editor.api-BtqJ5Bxw.js").then((n) => n.s),
-			import("./monaco.contribution-GLS4-bVF.js").then((n) => n.t),
-			import("./dist-g9u4q-9e.js")
+			import("./editor.api-YVDhnHI-.js").then((n) => n.s),
+			import("./monaco.contribution-CaO2YABh.js").then((n) => n.t),
+			import("./dist-B0hittbo.js"),
+			import("@rinova/playground/editor.css")
 		]);
 		const EditorWorker = editorWorker.default;
 		const TsWorker = tsWorker.default;
@@ -11818,7 +11896,7 @@ var _hoisted_1 = { class: "pw-app" };
 var _hoisted_2 = { class: "pw-main" };
 var _hoisted_3 = { class: "pw-body" };
 var _hoisted_4 = {
-	key: 1,
+	key: 2,
 	class: "pw-empty"
 };
 var _hoisted_5 = {
@@ -11831,6 +11909,12 @@ var App_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ *
 	__name: "App",
 	setup(__props) {
 		const title = config.title ?? "Playground";
+		/** config.groups 的声明顺序即侧栏分组顺序；未声明的组排到后面 */
+		const groupLabelOrder = Object.values(config.groups ?? {});
+		const groupRank = (name) => {
+			const index = groupLabelOrder.indexOf(name);
+			return index === -1 ? Number.MAX_SAFE_INTEGER : index;
+		};
 		const groups = computed(() => {
 			const map = /* @__PURE__ */ new Map();
 			for (const scene of scenes) {
@@ -11842,12 +11926,19 @@ var App_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ *
 			return [...map.entries()].map(([name, items]) => ({
 				name,
 				items,
-				weight: items.reduce((min, item) => Math.min(min, item.order), Number.MAX_SAFE_INTEGER)
-			})).sort((a, b) => a.weight - b.weight || a.name.localeCompare(b.name));
+				weight: items.filter((item) => item.kind !== "group-index").reduce((min, item) => Math.min(min, item.order), Number.MAX_SAFE_INTEGER)
+			})).sort((a, b) => groupRank(a.name) - groupRank(b.name) || a.weight - b.weight || a.name.localeCompare(b.name));
 		});
-		const visibleCount = computed(() => scenes.filter((scene) => !scene.hidden).length);
+		const visibleCount = computed(() => scenes.filter((scene) => !scene.hidden && scene.kind !== "group-index").length);
 		const activeId = ref(scenes.find((scene) => !scene.hidden)?.id ?? scenes[0]?.id ?? "");
 		const activeScene = computed(() => scenes.find((scene) => scene.id === activeId.value) ?? scenes[0]);
+		/** 当前是分组落地页时，列出该组的普通场景（不含其它合成页） */
+		const groupSceneItems = computed(() => {
+			const scene = activeScene.value;
+			if (!scene || scene.kind !== "group-index") return [];
+			return scenes.filter((item) => item.group === scene.group && item.kind !== "group-index" && !item.hidden);
+		});
+		const isGroupIndex = computed(() => activeScene.value?.kind === "group-index");
 		const showCode = ref(false);
 		const showPayload = ref(false);
 		const hasPayload = computed(() => currentArgs.value !== null || currentOutput.value !== null);
@@ -11871,7 +11962,7 @@ var App_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ *
 			localStorage.setItem(STORAGE_KEY, preference.value);
 		};
 		const basePath = (() => {
-			const raw = config.base ?? "/";
+			const raw = config.routeBase ?? config.base ?? "/";
 			return raw.endsWith("/") ? raw : `${raw}/`;
 		})();
 		/** 从 location.pathname 解析出场景 id（去掉 base 与尾部斜杠） */
@@ -11958,23 +12049,28 @@ var App_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ *
 						"width",
 						"theme"
 					])) : createCommentVNode("", true),
-					createElementVNode("div", _hoisted_3, [activeScene.value ? (openBlock(), createBlock(PlaygroundStage_default, {
+					createElementVNode("div", _hoisted_3, [isGroupIndex.value && activeScene.value ? (openBlock(), createBlock(PlaygroundGroupIndex_default, {
 						key: 0,
+						group: activeScene.value.group,
+						items: groupSceneItems.value,
+						onSelect: _cache[4] || (_cache[4] = ($event) => activeId.value = $event)
+					}, null, 8, ["group", "items"])) : activeScene.value ? (openBlock(), createBlock(PlaygroundStage_default, {
+						key: 1,
 						scene: activeScene.value,
 						width: width.value
 					}, null, 8, ["scene", "width"])) : (openBlock(), createElementBlock("div", _hoisted_4, "没有找到任何场景，请在 scenes 目录下新建 .vue 文件。")), showPayload.value && hasPayload.value ? (openBlock(), createBlock(PlaygroundParamsPanel_default, {
-						key: 2,
+						key: 3,
 						theme: theme.value
 					}, null, 8, ["theme"])) : createCommentVNode("", true)]),
-					showCode.value && activeScene.value ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(PlaygroundSourcePanel_default, {
+					showCode.value && activeScene.value && !isGroupIndex.value ? (openBlock(), createElementBlock("div", _hoisted_5, [createVNode(PlaygroundSourcePanel_default, {
 						scene: activeScene.value,
 						theme: theme.value,
-						onClose: _cache[4] || (_cache[4] = ($event) => showCode.value = false)
+						onClose: _cache[5] || (_cache[5] = ($event) => showCode.value = false)
 					}, null, 8, ["scene", "theme"])])) : createCommentVNode("", true)
 				]),
 				createVNode(PwToastHost_default)
 			]);
 		};
 	}
-}), [["__scopeId", "data-v-cba81ecf"]]);
+}), [["__scopeId", "data-v-5c38b5f6"]]);
 export { App_default as default, __exportAll as i, FontStyle as n, INITIAL as r, EncodedTokenMetadata as t };