@lingfan-engine/create 0.0.0-stage → 0.1.4

package/template/overlays/miniprogram/src/components/ChoiceLayer.vue

@@ -0,0 +1,208 @@
+<script setup lang="ts">
+/**
+ * 选择层：菜单与输入两形态互斥（同一张卡片，`choices.options` 或 `choices.input` 二选一）。
+ *
+ * 层根拦住点击：选项点完不该再穿到舞台层推进一次对话。输入框的值暂存在页面状态里，
+ * 提交时一次性交回核心——这样「打字中的字」不会污染叙事状态。
+ */
+import type { MiniprogramChoicesData } from "../mp/index.ts";
+
+defineOptions({ name: "ChoiceLayer" });
+
+defineProps<{
+  /** 选择层数据：菜单、输入或两者皆空的空壳 */
+  choices: MiniprogramChoicesData;
+  /** 输入框当前值（受控） */
+  inputValue: string;
+  /** 层序（核心下发的 z 表） */
+  zIndex: number;
+}>();
+
+const emit = defineEmits<{
+  choose: [target: string];
+  input: [value: string];
+  submit: [];
+}>();
+
+/** 选项点击：带回核心给的列 id */
+function onChoose(target: string): void {
+  emit("choose", target);
+}
+
+/** 输入事件：小程序把值放在 `event.detail.value`，Web 形态放在 `target.value` */
+function onInput(event: unknown): void {
+  const detail = (event as { detail?: { value?: unknown } }).detail;
+  if (typeof detail?.value === "string") {
+    emit("input", detail.value);
+    return;
+  }
+  const target = (event as { target?: { value?: unknown } }).target;
+  if (typeof target?.value === "string") emit("input", target.value);
+}
+
+/** 提交：回车或点按钮都走这里 */
+function onSubmit(): void {
+  emit("submit");
+}
+</script>
+
+<template>
+  <view
+    class="layer choices"
+    :class="choices.rootClass"
+    :style="{ zIndex }"
+    @tap.stop
+  >
+    <view v-if="choices.promptHtml" class="layer-prompt">
+      <rich-text :nodes="choices.promptHtml" />
+    </view>
+    <view v-if="choices.options.length" class="choice-row">
+      <view
+        v-for="option in choices.options"
+        :key="option.key"
+        class="option"
+        @tap="onChoose(option.target)"
+      >
+        <rich-text :nodes="option.html" />
+      </view>
+    </view>
+    <view v-if="choices.input" class="input-row">
+      <input
+        class="input-box"
+        :value="inputValue"
+        :placeholder="choices.input.prompt"
+        @input="onInput"
+        @confirm="onSubmit"
+      />
+      <view class="submit" @tap="onSubmit">
+        {{ choices.input.submitText }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<style>
+.layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+/* 选择层：与对话层同一张卡片形态，菜单或输入二选一 */
+.choices {
+  top: auto;
+  bottom: 24rpx;
+  left: 24rpx;
+  right: 24rpx;
+  width: auto;
+  padding: 32rpx 40rpx;
+  box-sizing: border-box;
+  border: 2rpx solid rgba(68, 68, 68, 0.27);
+  border-radius: 24rpx;
+  background: rgba(30, 30, 46, 0.92);
+  color: #e6e6f0;
+}
+
+.layer-prompt {
+  margin: 0 0 20rpx;
+  color: #9aa5ce;
+  text-align: center;
+  font-size: 30rpx;
+}
+
+.choice-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24rpx;
+  justify-content: center;
+}
+
+.option {
+  padding: 16rpx 32rpx;
+  border: 2rpx solid rgba(122, 162, 247, 0.4);
+  border-radius: 20rpx;
+  background: rgba(30, 30, 46, 0.8);
+  color: #e6e6f0;
+  font-size: 30rpx;
+  text-align: center;
+}
+
+.option:active {
+  background: rgba(60, 80, 130, 0.72);
+}
+
+.input-row {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+}
+
+.input-box {
+  flex: 1;
+  padding: 16rpx 24rpx;
+  border: 2rpx solid rgba(122, 162, 247, 0.4);
+  border-radius: 20rpx;
+  background: rgba(30, 30, 46, 0.8);
+  color: #e6e6f0;
+  font-size: 30rpx;
+}
+
+.submit {
+  padding: 16rpx 32rpx;
+  border: 2rpx solid rgba(122, 162, 247, 0.4);
+  border-radius: 20rpx;
+  background: rgba(30, 30, 46, 0.8);
+  color: #e6e6f0;
+  font-size: 30rpx;
+}
+
+/* 编号选项皮肤：整行靠左（序号由模板正文自带） */
+.choices.tpl-choice-numbered .option {
+  text-align: left;
+}
+
+/* 横屏：rpx 的基准是窗口宽度，横过来同一串 rpx 会被放大，方向相关的排版改用 px 定值 */
+@media (orientation: landscape) {
+  .choices {
+    bottom: 12px;
+    left: 12px;
+    right: 12px;
+    padding: 12px 16px;
+    border-width: 1px;
+    border-radius: 12px;
+  }
+
+  .layer-prompt,
+  .option,
+  .input-box,
+  .submit {
+    font-size: 16px;
+  }
+
+  .choice-row {
+    gap: 10px;
+  }
+
+  .layer-prompt {
+    margin-bottom: 10px;
+  }
+
+  .option,
+  .submit {
+    padding: 8px 16px;
+    border-width: 1px;
+    border-radius: 10px;
+  }
+
+  .input-row {
+    gap: 10px;
+  }
+
+  .input-box {
+    padding: 8px 12px;
+    border-width: 1px;
+    border-radius: 10px;
+  }
+}
+</style>

package/template/overlays/miniprogram/src/components/DialogueLayer.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+/**
+ * 对话层：普通形态三段式（说话人 / 正文 / 推进提示），NVL 形态抬升为阅读区。
+ *
+ * 两种形态共用同一个容器类（`.dialogue`），NVL 时补 `.nvl-mode` 把高度抬高并改成
+ * 纵向排布——与桌面面板同构，差别只在单位（这里用 rpx，横屏在样式表尾部改 px）。
+ *
+ * 点击整层推进对话：面板本体吃掉点击，不让它穿到舞台层去触发第二次推进。
+ */
+import type {
+  MiniprogramDialogueData,
+  MiniprogramNvlData,
+} from "../mp/index.ts";
+
+defineOptions({ name: "DialogueLayer" });
+
+defineProps<{
+  /** 普通对话形态的数据 */
+  dialogue: MiniprogramDialogueData;
+  /** NVL 累积形态的数据；非 null 时优先于普通形态 */
+  nvl: MiniprogramNvlData | null;
+  /** 层序（核心下发的 z 表） */
+  zIndex: number;
+}>();
+
+const emit = defineEmits<{ advance: [] }>();
+
+function onAdvance(): void {
+  emit("advance");
+}
+</script>
+
+<template>
+  <view
+    class="layer dialogue"
+    :class="nvl ? 'nvl-mode' : dialogue.rootClass"
+    :style="{ zIndex }"
+    @tap="onAdvance"
+  >
+    <!-- NVL 形态：累积行自上而下一行行铺开，最后一行是正在打字的当前行 -->
+    <view v-if="nvl" class="nvl-body">
+      <view v-for="(html, index) in nvl.pastLines" :key="index" class="text">
+        <rich-text :nodes="html" />
+      </view>
+      <view class="text">
+        <rich-text :nodes="nvl.typingHtml" />
+      </view>
+    </view>
+    <template v-else>
+      <view
+        v-if="dialogue.speakerHtml"
+        class="speaker"
+        :style="{ color: dialogue.speakerColor }"
+      >
+        <rich-text :nodes="dialogue.speakerHtml" />
+      </view>
+      <view
+        class="text"
+        :style="
+          dialogue.bodyFont ? { fontFamily: dialogue.bodyFont } : undefined
+        "
+      >
+        <rich-text :nodes="dialogue.bodyHtml" />
+      </view>
+      <view v-if="dialogue.hintHtml" class="advance-hint">
+        <rich-text :nodes="dialogue.hintHtml" />
+      </view>
+    </template>
+  </view>
+</template>
+
+<style>
+.layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+/* 对话层：贴底居中的卡片。
+   高度按视口百分比给下限：竖屏约等于桌面的 104~150px，横屏不会因为 rpx 基准换成大宽度而撑破屏。 */
+.dialogue {
+  top: auto;
+  bottom: 24rpx;
+  left: 24rpx;
+  right: 24rpx;
+  width: auto;
+  min-height: 16%;
+  padding: 32rpx 40rpx;
+  box-sizing: border-box;
+  border: 2rpx solid rgba(68, 68, 68, 0.27);
+  border-radius: 24rpx;
+  background: rgba(30, 30, 46, 0.8);
+  color: #e6e6f0;
+}
+
+/* NVL 累积层形态：容器抬升为阅读区（累积文本自上而下滚动） */
+.dialogue.nvl-mode {
+  min-height: 46%;
+  display: flex;
+  flex-direction: column;
+}
+
+.nvl-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.speaker {
+  margin: 0 0 16rpx;
+  font-weight: 600;
+  font-size: 30rpx;
+  letter-spacing: 1rpx;
+}
+
+.text {
+  margin: 0;
+  font-size: 34rpx;
+  line-height: 1.7;
+  white-space: pre-wrap;
+}
+
+/* 推进指示器：右下角闪烁（桌面对应 `.advance-hint`） */
+.advance-hint {
+  position: absolute;
+  right: 24rpx;
+  bottom: 16rpx;
+  font-size: 26rpx;
+  color: #7aa2f7;
+  opacity: 0.9;
+  animation: blink 1.2s infinite;
+}
+
+/* 对话模板皮肤：居中独白形态（与桌面的 .tpl-center 同名同色） */
+.dialogue.tpl-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-size: 1.15em;
+  background: rgba(22, 22, 30, 0.8);
+  border-color: rgba(122, 162, 247, 0.27);
+}
+
+/* 横屏：rpx 的基准是窗口宽度，横过来同一串 rpx 会被放大，方向相关的排版改用 px 定值 */
+@media (orientation: landscape) {
+  .dialogue {
+    bottom: 12px;
+    left: 12px;
+    right: 12px;
+    padding: 12px 16px;
+    border-width: 1px;
+    border-radius: 12px;
+  }
+
+  .speaker {
+    margin: 0 0 6px;
+    font-size: 15px;
+    letter-spacing: 0;
+  }
+
+  .text {
+    font-size: 16px;
+  }
+
+  .advance-hint {
+    right: 12px;
+    bottom: 8px;
+    font-size: 13px;
+  }
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0.2;
+  }
+}
+</style>

package/template/overlays/miniprogram/src/components/NodeTree.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+/**
+ * 递归节点树：把 `mp/view.ts` 算出的描述树铺成节点。
+ *
+ * 小程序没有 DOM，渲染就是「数据 + 模板」：这一层只做映射，不拼样式（行内样式串已在数据侧
+ * 算好）。组件自带样式——小程序组件默认样式隔离，页面样式不会穿透进来。自引用靠文件名。
+ */
+import type { MiniNode } from "../mp/view.ts";
+
+defineProps<{ nodes: MiniNode[] }>();
+</script>
+
+<template>
+  <template v-for="node in nodes" :key="node.key">
+    <image
+      v-if="node.kind === 'image'"
+      class="node node-image"
+      :class="node.className"
+      :style="node.style"
+      :src="node.src"
+      mode="widthFix"
+    />
+    <view
+      v-else
+      class="node"
+      :class="[`node-${node.kind}`, node.className]"
+      :style="node.style"
+    >
+      <text v-if="node.text">{{ node.text }}</text>
+      <rich-text v-else-if="node.html" :nodes="node.html" />
+      <NodeTree v-if="node.children" :nodes="node.children" />
+    </view>
+  </template>
+</template>
+
+<style>
+.node {
+  position: absolute;
+}
+
+.node-image {
+  display: block;
+}
+</style>

package/template/overlays/miniprogram/src/components/NoticeLayer.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+/**
+ * 通知层：贴右上角的逐条气泡，不吃点击（挡住下面的层会让舞台点不动）。
+ *
+ * 气泡的皮肤由 `rootClass` 决定（`tpl-notify-warning` / `tpl-notify-error`），
+ * 配色与桌面那份同名同色——两份实现同一套视觉语言。
+ */
+import type { MiniprogramNoticeData } from "../mp/index.ts";
+
+defineOptions({ name: "NoticeLayer" });
+
+defineProps<{
+  /** 当前显示的通知列表（新通知在末尾） */
+  notices: MiniprogramNoticeData[];
+  /** 层序（核心下发的 z 表） */
+  zIndex: number;
+}>();
+</script>
+
+<template>
+  <view class="layer notices" :style="{ zIndex }">
+    <view
+      v-for="notice in notices"
+      :key="notice.key"
+      class="notice"
+      :class="notice.rootClass"
+    >
+      <rich-text :nodes="notice.bodyHtml" />
+    </view>
+  </view>
+</template>
+
+<style>
+.layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+
+/* 通知层：贴右上角的一条条气泡（桌面对应 NotificationLayer），不吃点击 */
+.notices {
+  top: 24rpx;
+  left: auto;
+  right: 24rpx;
+  width: auto;
+  max-width: 560rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 16rpx;
+  pointer-events: none;
+}
+
+.notice {
+  padding: 16rpx 28rpx;
+  border-radius: 16rpx;
+  background: rgba(42, 47, 69, 0.87);
+  color: #9ece6a;
+  font-size: 26rpx;
+}
+
+/* 通知层皮肤：按 tone 换色（与桌面的 .tpl-notify-* 同名同色） */
+.notice.tpl-notify-warning {
+  color: #e0af68;
+}
+
+.notice.tpl-notify-error {
+  color: #f7768e;
+}
+
+/* 横屏：rpx 的基准是窗口宽度，横过来同一串 rpx 会被放大，方向相关的排版改用 px 定值 */
+@media (orientation: landscape) {
+  .notices {
+    top: 12px;
+    right: 12px;
+    max-width: 320px;
+    gap: 8px;
+  }
+
+  .notice {
+    padding: 8px 14px;
+    border-radius: 8px;
+    font-size: 13px;
+  }
+}
+</style>

package/template/overlays/miniprogram/src/components/SaveLoadBar.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+/**
+ * 存/读入口：左上角两颗按钮 + 打开后的槽位面板。
+ *
+ * 组件只管渲染与转发：槽位视图由页面在打开时从宿主取（`loadHostSlotViews`），点选判据与
+ * 存读命令都在宿主侧（`chooseHostSlot`），这里不判断空槽、不碰引擎——「谁能点」与「点了
+ * 做什么」各只有一处实现。
+ *
+ * 面板形态与桌面宿主的槽位面板同构（列表 + 标题/时间），移动端换成 rpx 与更大的点击面。
+ */
+import {
+  canChooseSlot,
+  type SlotPanelMode,
+  type SlotView,
+} from "../mp/slots.ts";
+
+const props = defineProps<{
+  /** 面板模式：null = 收起（只留入口条） */
+  mode: SlotPanelMode | null;
+  /** 逐槽视图（打开面板时由页面拉取） */
+  views: SlotView[];
+}>();
+
+const emit = defineEmits<{
+  /** 点入口条：打开对应模式的面板 */
+  open: [mode: SlotPanelMode];
+  /** 点槽位：交给宿主执行存/读 */
+  choose: [view: SlotView];
+  /** 关闭面板 */
+  close: [];
+}>();
+
+/** 槽位能否点：判据与桌面面板同一份 */
+function pickable(view: SlotView): boolean {
+  return canChooseSlot(view, props.mode);
+}
+
+/** 槽位上的一行说明：有档给标题，没档写「空槽」 */
+function slotHint(view: SlotView): string {
+  if (view.empty) return "空槽";
+  const title = (view.title ?? "").trim();
+  return title === "" ? "已有存档" : title;
+}
+
+/** 点槽位：不可点（读档模式的空槽）就什么都不做 */
+function pick(view: SlotView): void {
+  if (pickable(view)) emit("choose", view);
+}
+</script>
+
+<template>
+  <view class="save-load">
+    <view class="entries">
+      <view class="entry" @tap.stop="emit('open', 'save')">存</view>
+      <view class="entry" @tap.stop="emit('open', 'load')">读</view>
+    </view>
+
+    <view v-if="mode" class="sheet">
+      <view class="sheet-title">{{
+        mode === "save" ? "写入存档" : "读取存档"
+      }}</view>
+      <view class="slots">
+        <view
+          v-for="view in views"
+          :key="view.id"
+          class="slot"
+          :class="{ 'slot-disabled': !pickable(view) }"
+          @tap.stop="pick(view)"
+        >
+          <view class="slot-label">{{ view.label }}</view>
+          <view class="slot-hint">{{ slotHint(view) }}</view>
+        </view>
+      </view>
+      <view class="close" @tap.stop="emit('close')">关闭</view>
+    </view>
+  </view>
+</template>
+
+<style>
+/* 入口与面板都在左上：右上角归通知层，底部归对话与选择层 */
+.save-load {
+  position: absolute;
+  left: 24rpx;
+  top: 24rpx;
+  pointer-events: auto;
+}
+
+.entries {
+  display: flex;
+  gap: 16rpx;
+}
+
+.entry,
+.close {
+  padding: 12rpx 28rpx;
+  border: 2rpx solid rgba(122, 162, 247, 0.4);
+  border-radius: 16rpx;
+  background: rgba(30, 30, 46, 0.72);
+  color: #e6e6f0;
+  font-size: 26rpx;
+  text-align: center;
+}
+
+.entry:active,
+.close:active {
+  background: rgba(60, 80, 130, 0.72);
+}
+
+/* 面板：卡片形态与对话层同源（同一批色值），点击面按移动端放大 */
+.sheet {
+  margin-top: 16rpx;
+  width: 520rpx;
+  padding: 24rpx 24rpx 16rpx;
+  box-sizing: border-box;
+  border: 2rpx solid rgba(68, 68, 68, 0.27);
+  border-radius: 24rpx;
+  background: rgba(30, 30, 46, 0.92);
+  color: #e6e6f0;
+}
+
+.sheet-title {
+  margin: 0 0 16rpx;
+  color: #9aa5ce;
+  font-size: 26rpx;
+  text-align: center;
+}
+
+.slots {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+  max-height: 520rpx;
+  overflow-y: auto;
+}
+
+.slot {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 16rpx;
+  padding: 16rpx 20rpx;
+  border: 2rpx solid rgba(122, 162, 247, 0.28);
+  border-radius: 16rpx;
+  background: rgba(30, 30, 46, 0.8);
+}
+
+.slot:active {
+  background: rgba(60, 80, 130, 0.72);
+}
+
+/* 空槽在读档模式下置灰：引擎读不到档必失败，点了只会多一条提示 */
+.slot-disabled {
+  opacity: 0.45;
+}
+
+.slot-label {
+  font-size: 28rpx;
+}
+
+.slot-hint {
+  color: #9aa5ce;
+  font-size: 24rpx;
+}
+
+.close {
+  margin-top: 16rpx;
+}
+</style>