InputDialog

输入对话框组件，用于获取用户输入。支持文本输入和单选两种模式。

导入


import InputDialog from "@plugins/default/components/input-dialog";

基础用法

与 Game.use() 配合使用：


const value = await Game.use<string>(
  "input",
  <InputDialog title="请输入内容" type="text" />
);

文本输入模式


const name = await Game.use<string>(
  "input",
  <InputDialog title="请输入你的名字" type="text" />
);
 
Game.narrate`你好，${name}！`;

带验证器


const age = await Game.use<string>(
  "input",
  <InputDialog
    title="请输入你的年龄"
    type="text"
    validator={(value) => {
      const num = parseInt(value);
      if (isNaN(num) || num < 0 || num > 150) {
        return { success: false, message: "请输入有效的年龄" };
      }
      return { success: true };
    }}
  />
);

单选模式


const choice = await Game.use<string>(
  "input",
  <InputDialog
    type="select-single"
    title="你要选择哪条路？"
    options={[
      { label: "左边", value: "left" },
      { label: "右边", value: "right" },
      { label: "返回", value: "back" },
    ]}
  />
);
 
if (choice === "left") {
  return leftScene;
}

单选模式需要点击两次：第一次选中，第二次确认。

Props

通用属性

属性	类型	必填	描述
title	string	是	对话框标题/提示文字
type	”text” \| “select-single”	是	输入类型

文本模式属性 (type=“text”)

属性	类型	必填	描述
validator	(value: string) => ValidatorResult	否	输入验证函数


interface ValidatorResult {
  success: boolean;
  message?: string; // 验证失败时的提示信息
}

单选模式属性 (type=“select-single”)

属性	类型	必填	描述
options	Option[]	是	选项列表


interface Option {
  label: string; // 显示文本
  value: string; // 返回值
}

完整示例


import { createScene } from "@core/scene";
import { Game } from "@core/game";
import InputDialog from "@plugins/default/components/input-dialog";
 
const entry = createScene("entry", async () => {
  // 文本输入
  const name = await Game.use<string>(
    "input",
    <InputDialog title="请输入你的名字" type="text" />
  );
 
  Game.narrate`你好，${name}！`;
 
  // 单选
  const difficulty = await Game.use<string>(
    "input",
    <InputDialog
      type="select-single"
      title="选择游戏难度"
      options={[
        { label: "简单", value: "easy" },
        { label: "普通", value: "normal" },
        { label: "困难", value: "hard" },
      ]}
    />
  );
 
  Game.narrate`你选择了${difficulty}难度`;
});