文档目录

界面基座

按原版容器尺寸（GUI px）定位的绝对坐标基座。

容器面板

176×166 GUI px

import { gui } from "../../lib/utils";
import { Slot } from "../slot/index";
import { ScreenPanel } from "./index";

export function ScreenPanelDemo() {
  return (
    <ScreenPanel height={166} title="容器面板" width={176}>
      <p
        className="absolute font-mc mc-text"
        style={{ left: gui(8), top: gui(24) }}
      >
        176×166 GUI px
      </p>
      <Slot className="absolute" style={{ left: gui(8), top: gui(40) }} />
      <Slot
        className="absolute"
        selected
        style={{ left: gui(26), top: gui(40) }}
      />
    </ScreenPanel>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/screen-panel

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

import { ScreenPanel } from "@tennantite/ui";

CLI 拷贝导入

import { ScreenPanel } from "@/components/tennantite/screen-panel";

import { gui } from "../../lib/utils";
import { Slot } from "../slot/index";
import { ScreenPanel } from "./index";

export function ScreenPanelDemo() {
  return (
    <ScreenPanel height={166} title="容器面板" width={176}>
      <p
        className="absolute font-mc mc-text"
        style={{ left: gui(8), top: gui(24) }}
      >
        176×166 GUI px
      </p>
      <Slot className="absolute" style={{ left: gui(8), top: gui(40) }} />
      <Slot
        className="absolute"
        selected
        style={{ left: gui(26), top: gui(40) }}
      />
    </ScreenPanel>
  );
}

API Reference

Prop	Type	Default	描述
background	GuiSpriteName	—	原版容器背景精灵（如 `container/inventory.png`）。
backgroundClassName	string	"mc-tex-panel"	非 Sprite 背景的 CSS 纹理类（如 IC2 复刻 `.mc-tex-ic2-machine`）；未传 `background` 时替代默认 `.mc-tex-panel` 回退。
backgroundSlice	number \| { bottom: number; left: number; right: number; top: number }	—	背景九宫格切片（源 PNG px）。
backgroundSrc	GuiSpriteRect	—	背景裁剪区域；省略时为整图。
backgroundTile	boolean	—	背景平铺。
height	number	—	面板高度（GUI px，原版容器界面 166）。
title	ReactNode	—	窗口标题（渲染在 (8,6) 的原版标题位置）。
width	number	—	面板宽度（GUI px，原版容器界面 176）。

源码

packages/ui/src/containers/screen-panel/index.tsx

npm 包保留源码目录，可直接复制改造。