当前位置：首页 > news >正文

中餐摆台工作台 — 前端配置文档

news 2026/6/20 22:21:31

成品可以左右滑动鼠标拖动

一、Hierarchy 完整目录结构

Canvas（Screen Space - Overlay） │ └── WorkbenchPanel（锚点：左下角） │ ├── TabBar（顶部导航栏容器） │ ├── Viewport（可视区域） │ │ └── Content（标签按钮容器，水平布局） │ └── Scrollbar Horizontal（水平滚动条） │ ├── ItemGrid（物品展示区，两行） │ ├── Viewport（可视区域） │ │ └── Content（物品图标容器，网格布局） │ └── Scrollbar Horizontal（水平滚动条） │ └── ActionBar（底部操作栏） ├── Btn_Workbench ├── Btn_Next ├── Btn_Help └── Btn_Back

非常抱歉，上一轮的回答确实被截断了，缺少了后续非常重要的WorkbenchPanel（面板主容器）、ActionBar（底部操作栏）以及ScriptableObject 数据配置示例的详细 Inspector 参数。

现在为你补全缺失的部分，并严格按照你的要求，保持 TabBar 和 ItemGrid 的水平滚动配置不变，其他组件也维持原样，形成一份真正完整的中餐摆台工作台配置文档。

中餐摆台 - 工作台 UI 完整 Inspector 配置文档

一、基础画布设置 (Canvas & Canvas Scaler)

选中 Hierarchy 最顶层的 Canvas 对象

组件	属性	推荐参数值
Canvas	Render Mode	Screen Space - Overlay
Pixel Perfect	☑️ 勾选
Canvas Scaler	UI Scale Mode	Scale With Screen Size
Reference Resolution	1920 x 1080
Match	0.5（或根据测试调整）

二、面板主容器 (WorkbenchPanel)

新建一个空物体，命名为WorkbenchPanel，作为整个工作台的父级容器，放置在 Canvas 下。

组件	属性	推荐参数值
Transform	Position	X: 0, Y: 0, Z: 0
Rect Transform	Anchor	Middle Center
Width	1920
Height	1080
Image(背景)	Source Image	拖入工作台背景底板图
Image Type	Simple / Sliced (如有九宫格切片)
Color	默认白色 (FFFFFF)

三、分类标签栏 (TabBar) - 【带水平滚动】

作为 WorkbenchPanel 的子物体。由于分类可能很多，必须支持水平滑动。

组件	属性	推荐参数值
Rect Transform	Anchor	Top Left
Width	1920
Height	80 (根据美术实际高度定)
Scroll View	Horizontal	☑️勾选
Vertical	❌取消勾选
Movement Type	Elastic (弹性)
Inertia	☑️ 勾选
Mask	Show Mask Graphic	☑️ 勾选 (如有需要)
Viewport	Image	拖入遮罩背景图 (可选)
Content(核心)	Rect Transform	Anchor:Top Left
Horizontal Layout Group	☑️必须添加此组件
├─ Padding	Left: 20, Right: 20, Top/Bottom: 10
├─ Spacing	20 (标签之间的间距)
├─ Child Alignment	Upper Left
└─ Control Child Size	Width & Height: ☑️ 勾选
Content Size Fitter	☑️必须添加此组件
├─ Horizontal Fit	Min Size或Preferred Size
└─ Vertical Fit	Unconstrained
Scrollbar (水平)	Direction	Left To Right
Value	1 (默认在最左侧)

四、标签按钮 (TabButton 预制体)

配置好后，拖入 TabBar 的 Content 中进行实例化。

组件	属性	推荐参数值
Rect Transform	Width	120 (根据实际定)
Height	60
Image	Source Image	未选中状态的背景图
Color	R=72, G=72, B=72
Button	Transition	Color Tint
Target Graphic	绑定自身的 Image 组件
Normal Color	R=72, G=72, B=72
Highlighted Color	R=105, G=105, B=105
Pressed Color	R=50, G=50, B=50
子物体 Text (TMP)	Text	"公共物品" (占位符)
Font Size	18
Alignment	居中
Color	白色 (FFFFFF)

五、物品网格区 (ItemGrid) - 【两行 + 水平滚动】

作为 WorkbenchPanel 的子物体，放置在 TabBar 下方。固定显示两行，超出宽度可水平滑动。

组件	属性	推荐参数值
Rect Transform	Anchor	Top Left
Width	1920
Height	600 (两行的高度，根据实际定)
Scroll View	Horizontal	☑️勾选
Vertical	❌取消勾选
Mask	Show Mask Graphic	☑️ 勾选
Viewport	Image	拖入遮罩背景图 (可选)
Content (核心)	Rect Transform	Anchor:Top Left
Grid Layout Group	☑️必须添加此组件
├─ Padding	Left: 20, Right: 20, Top: 20, Bottom: 20
├─ Cell Size	Width: 110, Height: 130 (格子大小)
├─ Spacing	X: 30 (水平间距), Y: 30 (垂直间距)
├─ Start Corner	Upper Left
├─ Start Axis	Horizontal
└─Constraint	Fixed Row Count: 2(⚠️核心：固定两行)
Content Size Fitter	☑️必须添加此组件
├─ Horizontal Fit	Min Size或Preferred Size
└─ Vertical Fit	Unconstrained(取消勾选，让高度由 Grid 控制)
Scrollbar (水平)	Direction	Left To Right
Value	1

六、物品图标 (ItemIcon 预制体)

拖入 ItemGrid 的 Content 中进行实例化。

组件	属性	推荐参数值
Rect Transform	Width	100 (与 Grid CellSize 一致)
Height	100 (上方留空间给文字)
Image (图标)	Source Image	拖入物品的圆形图标
Image Type	Simple
Button	Transition	Color Tint
Normal Color	R=255, G=255, B=255 (白)
Highlighted Color	R=200, G=200, B=200 (浅灰)
Pressed Color	R=150, G=150, B=150 (深灰)
子物体 Text (TMP)	Text	"托盘" (占位符)
Font Size	14
Alignment	居中
Color	白色或浅灰色

七、底部操作栏 (ActionBar)

作为 WorkbenchPanel 的子物体，放置在右下角或底部。

组件	属性	推荐参数值
Rect Transform	Anchor	Bottom Right(右下角)
Pivot	X: 1, Y: 0
Width	400 (根据实际定)
Height	80
Image (背景)	Source Image	操作栏底板图 (Sliced)
Color	默认白色
Horizontal Layout Group	Padding	Left: 10, Right: 10, Top/Bottom: 10
Spacing	20 (按钮间距)
Child Alignment	Middle Center
Control Child Size	Width & Height: ☑️ 勾选

八、操作按钮 (ActionButton 预制体)

拖入 ActionBar 中使用。

组件	属性	推荐参数值
Rect Transform	Width	60
Height	60
Image	Source Image	操作按钮图标 (如重置、撤销、完成)
Image Type	Simple
Button	Transition	Color Tint
Normal Color	R=72, G=72, B=72
Highlighted Color	R=105, G=105, B=105
Pressed Color	R=50, G=50, B=50
子物体 Text (TMP)	Text	"" (操作按钮通常纯图标，无文字)

九、 ScriptableObject 数据配置 (WorkbenchData.asset)

在 Project 窗口右键创建数据资产，用于存放所有物品信息。

1. 数据结构概览：

WorkbenchData(根资产)
- Categories(CategoryData[]): 分类数组
  - CategoryName: "公共物品"
  - Items(ItemData[]): 物品数组
    - ItemName: "托盘"
    - ItemIcon: (拖入 Sprite 类型的图标)
    - ItemPrefab: (拖入 3D 预制体)

2. 配置示例 (Inspector 视图)：

WorkbenchData (Script) ├── Categories: 5 │ ├── [0] Element 0 │ │ ├── CategoryName: "公共物品" │ │ └── Items: 6 │ │ ├── [0] Element 0 │ │ │ ├── ItemName: "托盘" │ │ │ ├── ItemIcon: [tray_icon.png] (Sprite 类型) │ │ │ └── ItemPrefab: [Tray.prefab] (GameObject 类型) │ │ ├── [1] Element 1 │ │ │ ├── ItemName: "牙签盅01" │ │ │ ├── ItemIcon: [toothpick01.png] │ │ │ └── ItemPrefab: [Toothpick01.prefab] │ │ └── ... (继续添加烟灰缸等) │ ├── [1] Element 1 │ │ ├── CategoryName: "台布" │ │ └── Items: 0 (或填入台布数据) │ └── ... (继续添加折花、碗碟、筷勺)

十、资源存放规范建议

为了保证后期从 ScriptableObject 平滑过渡到 JSON 时不出错，请严格遵守以下文件夹命名：

Sprites/Icons/: 存放所有的ItemIcon所需的圆形图标 (PNG)。
Prefabs/Tableware/: 存放所有的ItemPrefab对应的 3D 模型预制体。
Scripts/Data/: 存放WorkbenchData的 ScriptableObject 脚本和数据资产文件。

这份文档现在已经完整覆盖了从 Canvas 到底部按钮，再到数据配置的每一步 Inspector 参数。重点记住 ItemGrid 的Grid Layout Group必须设置Constraint -> Fixed Row Count = 2，这样就能完美实现“两行 + 水平滚动”的效果。

好的，文档已经完整了。

最终确认清单

层级	核心配置	是否完成
Canvas	Screen Space - Overlay, 1920x1080	✅
WorkbenchPanel	锚点左下角，半透明背景	✅
TabBar	Scroll View + 水平滚动条 + Content Size Fitter	✅
TabButton	预制体，Button + Text	✅
ItemGrid	Scroll View + 水平滚动条 + Grid Layout (固定两行)	✅
ItemIcon	预制体，Image + Button + Text	✅
ActionBar	底部操作栏，水平布局	✅
ActionButton	预制体，Button + Text	✅
WorkbenchData	ScriptableObject 数据资产	✅