文档目录

FD 厨锅界面

FD 厨锅（176×166）：6 个食材槽 + 成品展示 / 盛装容器 / 输出槽、受热火焰、烹饪进度箭头与配方书按钮；槽框与锅体由上游贴图烘焙。

全屏预览预览页不进入搜索引擎索引

厨锅物品栏

点击物品槽切换受热状态；点击配方书按钮切换按钮态。

组成

这些是可直接组合的组件；Block 只是把它们按原版坐标放在一起。

Mod 槽位网格 Mod 文字界面基座玩家物品栏物品格 GUI 精灵 FD 精灵 FD 受热图标 FD 烹饪进度 FD 配方书按钮

代码

import { useState } from "react";

import { FD_DEMO_ITEMS } from "../fd-demo-data";
import { FdCookingPotScreen } from "./index";

interface FdCookingPotScreenDemoProps {
  progress?: number;
}

export function FdCookingPotScreenDemo({ progress = 0.6 }: FdCookingPotScreenDemoProps = {}) {
  const [heated, setHeated] = useState(true);
  const [recipeBookOpen, setRecipeBookOpen] = useState(false);
  return (
    <div className="flex flex-col gap-3">
      <FdCookingPotScreen
        container={FD_DEMO_ITEMS.bowl}
        heated={heated}
        ingredients={[
          FD_DEMO_ITEMS.brownMushroom,
          FD_DEMO_ITEMS.redMushroom,
          null,
          null,
          null,
          null,
        ]}
        meal={undefined}
        onRecipeBookToggle={() => { setRecipeBookOpen(value => !value); }}
        onSlotClick={() => { setHeated(value => !value); }}
        output={FD_DEMO_ITEMS.mushroomStew}
        progress={progress}
        recipeBookOpen={recipeBookOpen}
      />
      <p className="text-xs opacity-60">
        点击物品槽切换受热状态；点击配方书按钮切换按钮态。
      </p>
    </div>
  );
}