Documentation
Ae2InterfaceScreen
接口:interface.png 211×256 + 4 槽升级条,配置 9 格 / 存储 9 格 / 图样 4 行 ×9(样板扩展可裁 2 行)+ 优先级标签。
接口配置存储物品图样物品栏
import { Ae2InterfaceScreen } from "./index";
/**
* Ae2InterfaceScreen 预览用例:满样板扩展(4 行图样槽)。
*/
export function Ae2InterfaceScreenDemo() {
return (
<Ae2InterfaceScreen
config={[{ icon: "iron-ingot", tooltip: "配置:铁锭" }]}
hotbarItems={Array.from({ length: 9 }, (_, index) => ({ icon: index % 2 ? "charcoal" : "iron-ingot" }))}
mainItems={Array.from({ length: 20 }, (_, index) => ({ icon: index % 2 ? "gold-ingot" : "iron-ingot" }))}
patterns={Array.from({ length: 3 }, (_, index) => ({ icon: "diamond", tooltip: `图样 ${index + 1}` }))}
storage={[{ icon: "iron-ingot", tooltip: "存储:铁锭 ×64" }]}
upgrades={[{ icon: "emerald", tooltip: "样板扩展卡" }, { icon: "emerald", tooltip: "样板扩展卡" }]}
/>
);
}
Install
$pnpm add @tennantite/ae2npm installs the compiled package; use the CLI copy above to adapt the source.
Source
packages/ae2/src/ae2-interface-screen/index.tsxThe npm package keeps the source tree, so you can copy and adapt it directly.