diff --git a/packages/editor/src/language/zh-CN-en-US.ts b/packages/editor/src/language/zh-CN-en-US.ts
index ecf9ebb..c3407bb 100644
--- a/packages/editor/src/language/zh-CN-en-US.ts
+++ b/packages/editor/src/language/zh-CN-en-US.ts
@@ -539,6 +539,154 @@ export default {
             htmlPanel: {
                 Content: "内容"
             },
+            Heatmap: "热力图",
+            Path: "路径",
+            "UI panel": "UI面板",
+            "Water pool": "水池",
+            heatmap: {
+                "Heatmap Texture": "热力图纹理",
+                Blur: "模糊",
+                Gradient: "色阶",
+                Add: "添加",
+                Remove: "移除",
+                Data: "数据",
+                Points: "点",
+                "Controls the opacity of the darkest and brightest parts of a thermal texture": "控制热力纹理最暗处和最亮处的不透明度",
+                "Height Scale": "高度缩放",
+                "Heatmap Points": "热力图点",
+                Error: "错误",
+                "Points must be an array.": "点数据必须是数组。",
+                "Point[{index}] must be an object.": "点[{index}]必须是对象。",
+                "Point[{index}].x must be a number.": "点[{index}].x必须是数字。",
+                "Point[{index}].y must be a number.": "点[{index}].y必须是数字。",
+                "Point[{index}].value must be a number.": "点[{index}].value必须是数字。",
+                "Point[{index}].radius must be a number.": "点[{index}].radius必须是数字。",
+            },
+            path: {
+                "Path Params": "路径参数",
+                "Ribbon Params": "平面路径",
+                "Tube Params": "管状路径",
+                "Flow Params": "流动效果",
+                Type: "类型",
+                Ribbon: "平面",
+                Tube: "管状",
+                "Corner Radius": "拐角半径",
+                "Corner Split": "拐角分段",
+                Progress: "进度",
+                Arrow: "箭头",
+                Side: "绘制侧",
+                Both: "双侧",
+                Left: "左侧",
+                Right: "右侧",
+                "Start Rad": "起始弧度",
+                Flow: "流动",
+                "Flow Speed": "流动速度",
+                "Flow Direction": "流动方向",
+            },
+            uipanel: {
+                Node: "节点",
+                "Select a node to edit": "选择节点以编辑",
+                Type: "类型",
+                Text: "文本",
+                Color: "颜色",
+                Padding: "内边距",
+                Margin: "外边距",
+                Offset: "偏移",
+                "Font opacity": "字体透明度",
+                "Font supersampling": "字体超采样",
+                "Letter spacing": "字间距",
+                "Line height": "行高",
+                "White space": "空白处理",
+                "Break on": "换行字符",
+                "Background color": "背景色",
+                "Background opacity": "背景透明度",
+                "Background image URL": "背景图链接",
+                "Select local image": "选择本地图片",
+                "Image size must be <= {size}MB": "图片大小不能超过{size}MB",
+                "Background size": "背景图大小",
+                Cover: "覆盖",
+                Contain: "包含",
+                Stretch: "拉伸",
+                "Border radius": "圆角",
+                "Border width": "边框宽度",
+                "Border color": "边框颜色",
+                "Hidden overflow": "隐藏溢出",
+                "Flex direction": "布局方向",
+                Row: "横向",
+                "Row reverse": "横向反转",
+                Column: "纵向",
+                "Column reverse": "纵向反转",
+                "Justify content": "主轴对齐",
+                "Align items": "交叉轴对齐",
+                States: "状态样式",
+                Hover: "悬停",
+                Active: "点击",
+                "Hover background": "悬停背景色",
+                "Hover opacity": "悬停透明度",
+                "Active background": "点击背景色",
+                "Active opacity": "点击透明度",
+                "Hover color": "悬停颜色",
+                "Active color": "点击颜色",
+                Start: "开始",
+                Center: "居中",
+                End: "结束",
+                "Space between": "两端对齐",
+                "Space around": "环绕",
+                "Space evenly": "均分",
+                "Font size": "字号",
+                "Text align": "文字对齐",
+                Left: "左对齐",
+                Right: "右对齐",
+                "Add Block": "添加容器",
+                "Add Text": "添加文本",
+            },
+            waterPool: {
+                Basic: "基础",
+                Type: "水池类型",
+                Cylinder: "圆柱",
+                Square: "方形",
+                WallMode: "墙体模式",
+                WallNone: "无墙体",
+                Wall: "墙体",
+                Volume: "体积水",
+                WallOpacity: "墙体透明度",
+                ScreenRefraction: "屏幕空间折射",
+                Size: "尺寸",
+                Diameter: "直径",
+                Width: "宽度",
+                Depth: "深度",
+                Height: "高度",
+                Light: "光照",
+                Direction: "方向",
+                Color: "颜色",
+                VolumeColor: "体积水颜色",
+                SurfaceColor: "水面颜色",
+                Disturbance: "水波",
+                Enabled: "启用",
+                Mode: "模式",
+                ModeDrag: "拖动",
+                ModeUniform: "均匀",
+                DropsPerStep: "每步水滴数",
+                RadiusMin: "半径最小",
+                RadiusMax: "半径最大",
+                StrengthMin: "强度最小",
+                StrengthMax: "强度最大",
+                TravelRadius: "活动半径",
+                DriftSpeed: "漂移速度",
+                Jitter: "抖动强度",
+                Spread: "扩散范围",
+                Refraction: "折射与波纹",
+                SurfaceTransmittance: "透视强度",
+                NormalStrength: "法线强度",
+                RefractionStrength: "折射强度",
+                Texture: "贴图",
+                WallTexture: "墙体纹理",
+                Quality: "模拟精度",
+                SimulationSize: "模拟尺寸",
+                CausticsSize: "焦散尺寸",
+                WaterSegments: "水面分段",
+                WallSegments: "墙体分段",
+            },
             "3D Tiles": "3D Tiles",
             tiles: {
                 "Color mode": "颜色模式",
diff --git a/packages/editor/src/views/editor/layouts/Sidebar.vue b/packages/editor/src/views/editor/layouts/Sidebar.vue
index 866ba26..3bc3f3a 100644
--- a/packages/editor/src/views/editor/layouts/Sidebar.vue
+++ b/packages/editor/src/views/editor/layouts/Sidebar.vue
@@ -18,7 +18,10 @@ import {
   ImageReference,
   LocationHeart,
   LocationCompany,
-  ChoroplethMap
+  ChoroplethMap,
+  DirectionLoopLeft,
+  Gui,
+  ChartWaterfall
 } from "@vicons/carbon";
 
 import { t } from "@/language";
@@ -38,6 +41,10 @@ import SidebarParticle from "./sidebar/SidebarParticle.vue";
 import SidebarBillboard from "./sidebar/SidebarBillboard.vue";
 import SidebarHtmlPanel from "./sidebar/SidebarHtmlPanel.vue";
 import Sidebar3DTiles from "./sidebar/Sidebar3DTiles.vue";
+import SidebarHeatmap from "./sidebar/SidebarHeatmap.vue";
+import SidebarPath from "./sidebar/SidebarPath.vue";
+import SidebarUIPanel from "./sidebar/SidebarUIPanel.vue";
+import SidebarWaterPool from "./sidebar/SidebarWaterPool.vue";
 
 const tabsInstRef = ref<TabsInst | null>(null);
 const tabs = ref<Array<any>>([]);
@@ -96,6 +103,30 @@ function setTabs(object){
 
         current.value = '3DTiles';
         break;
+      case "Heatmap":
+        object3DTabs.push({ name: 'heatmap', icon: { text: 'Heatmap',color:"#A9575F", component: markRaw(HeatMap) }, component: markRaw(SidebarHeatmap) })
+
+        current.value = 'heatmap';
+        break;
+      case "Path":
+        object3DTabs.push({ name: 'path', icon: { text: 'Path',color:"#A9575F", component: markRaw(DirectionLoopLeft) }, component: markRaw(SidebarPath) })
+
+        current.value = 'path';
+        break;
+      case "WaterPool":
+        object3DTabs.push({ name: 'waterPool', icon: { text: 'Water pool',color:"#4aa3b5", component: markRaw(ChartWaterfall) }, component: markRaw(SidebarWaterPool) })
+
+        current.value = 'waterPool';
+        break;
+      case "UIPanel":
+      case "UIPanelBlock":
+      case "UIPanelText":
+      case "UIPanelInline":
+      case "UIPanelInlineBlock":
+        object3DTabs.push({ name: 'uipanel', icon: { text: 'UI panel',color:"#A9575F", component: markRaw(Gui) }, component: markRaw(SidebarUIPanel) })
+
+        current.value = 'uipanel';
+        break;
     }
   }
 
@@ -130,6 +161,30 @@ function setTabs(object){
       current.value = 'object';
     }
   }
+
+  if (current.value === 'heatmap') {
+    if (!(object && object.type === 'Heatmap')){
+      current.value = 'object';
+    }
+  }
+
+  if (current.value === 'path') {
+    if (!(object && object.type === 'Path')){
+      current.value = 'object';
+    }
+  }
+
+  if (current.value === 'waterPool') {
+    if (!(object && object.type === 'WaterPool')){
+      current.value = 'object';
+    }
+  }
+
+  if (current.value === 'uipanel') {
+    if (!(object && ["UIPanel", "UIPanelBlock", "UIPanelText", "UIPanelInline", "UIPanelInlineBlock"].includes(object.type))){
+      current.value = 'object';
+    }
+  }
 }
 
 onMounted(()=>{
diff --git a/packages/editor/src/views/editor/layouts/sidebar/SidebarHeatmap.vue b/packages/editor/src/views/editor/layouts/sidebar/SidebarHeatmap.vue
new file mode 100644
index 0000000..3fb17b0
--- /dev/null
+++ b/packages/editor/src/views/editor/layouts/sidebar/SidebarHeatmap.vue
@@ -0,0 +1,534 @@
+<script setup lang="ts">
+	import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
+	import { CaretForwardOutline } from "@vicons/ionicons5";
+	import { t } from "@/language";
+	import { App, Hooks, Utils, getDefaultHeatmapOptions } from "@astral3d/engine";
+	import CodeEditor from "@/components/code/CodeEditor.vue";
+	import EsTip from "@/components/es/EsTip.vue";
+
+	type GradientStep = {
+		id: string;
+		step: number;
+		color: string;
+	};
+
+	const defaultOptions = getDefaultHeatmapOptions();
+	const heatmapData = reactive(getDefaultHeatmapOptions() as any);
+	const opacityRange = ref<[number, number]>([heatmapData.heatmap.minOpacity, heatmapData.heatmap.maxOpacity]);
+	const isHeightMode = computed(() => heatmapData.mode === "height");
+	const pointsPreview = computed(() => JSON.stringify(heatmapData.data?.points || [], null, 2));
+	const pointsEditorShow = ref(false);
+	const pointsEditorRef = ref();
+	const pointsSource = ref("[]");
+	const pointsErrors = ref<string[]>([]);
+	const gradientSteps = ref<GradientStep[]>([]);
+
+	function getHeatmapObject() {
+		const object = App.selected;
+		if (!object) return null;
+		if (object.type !== "Heatmap" || !object.options) return null;
+		return object as any;
+	}
+
+	function updateUI() {
+		const object = getHeatmapObject();
+		if (!object) return;
+
+		Utils.deepAssign(heatmapData, object.options);
+		if (object.options.heatmap?.gradient) {
+			heatmapData.heatmap.gradient = { ...object.options.heatmap.gradient };
+		}
+		opacityRange.value = [heatmapData.heatmap.minOpacity, heatmapData.heatmap.maxOpacity];
+
+		ensureDataShape();
+		syncGradientSteps();
+	}
+
+	function ensureDataShape() {
+		if (!heatmapData.data) {
+			heatmapData.data = JSON.parse(JSON.stringify(defaultOptions.data));
+		}
+		if (!Array.isArray(heatmapData.data.points)) {
+			heatmapData.data.points = [];
+		}
+		if (!heatmapData.height) {
+			heatmapData.height = JSON.parse(JSON.stringify(defaultOptions.height));
+		}
+		if (!heatmapData.heatmap) {
+			heatmapData.heatmap = JSON.parse(JSON.stringify(defaultOptions.heatmap));
+		}
+		if (!heatmapData.heatmap.gradient || typeof heatmapData.heatmap.gradient !== "object" || Array.isArray(heatmapData.heatmap.gradient)) {
+			heatmapData.heatmap.gradient = JSON.parse(JSON.stringify(defaultOptions.heatmap.gradient));
+		}
+	}
+
+	function clampStep(value: number) {
+		if (!Number.isFinite(value)) return 0;
+		return Math.min(1, Math.max(0, value));
+	}
+
+	function normalizeGradientSteps(gradient: Record<string, string>) {
+		const steps: GradientStep[] = [];
+		let index = 0;
+
+		Object.entries(gradient).forEach(([step, color]) => {
+			const numericStep = Number(step);
+			if (!Number.isFinite(numericStep)) return;
+			steps.push({
+				id: `step-${index}-${numericStep}`,
+				step: clampStep(numericStep),
+				color: typeof color === "string" && color.trim() !== "" ? color : "#ffffff",
+			});
+			index += 1;
+		});
+
+		if (steps.length === 0) {
+			steps.push({ id: `step-${Date.now()}`, step: 0, color: "#ffffff" });
+		}
+
+		steps.sort((a, b) => a.step - b.step);
+		return steps;
+	}
+
+	function syncGradientSteps() {
+		ensureDataShape();
+		gradientSteps.value = normalizeGradientSteps(heatmapData.heatmap.gradient || {});
+	}
+
+	function buildGradientFromSteps() {
+		const gradient: Record<string, string> = {};
+		const sortedSteps = [...gradientSteps.value].sort((a, b) => a.step - b.step);
+
+		sortedSteps.forEach(step => {
+			const clamped = clampStep(Number(step.step));
+			gradient[clamped.toFixed(2)] = step.color || "#ffffff";
+		});
+
+		return gradient;
+	}
+
+	function updateGradient() {
+		ensureDataShape();
+		heatmapData.heatmap.gradient = buildGradientFromSteps();
+		update("heatmap");
+	}
+
+	function getNextGradientStep() {
+		const steps = gradientSteps.value
+			.map(step => step.step)
+			.filter(Number.isFinite)
+			.sort((a, b) => a - b);
+		if (steps.length === 0) return 0;
+		for (let i = 0; i < steps.length - 1; i += 1) {
+			const gap = steps[i + 1] - steps[i];
+			if (gap > 0.1) {
+				return Number(((steps[i] + steps[i + 1]) / 2).toFixed(2));
+			}
+		}
+		const last = steps[steps.length - 1];
+		if (last < 1) {
+			return Number(Math.min(1, last + 0.1).toFixed(2));
+		}
+		const first = steps[0];
+		return Number(Math.max(0, first - 0.1).toFixed(2));
+	}
+
+	function addGradientStep() {
+		const step = getNextGradientStep();
+		const fallbackColor = gradientSteps.value.length ? gradientSteps.value[gradientSteps.value.length - 1].color : "#ffffff";
+		gradientSteps.value.push({ id: `step-${Date.now()}-${Math.random().toString(16).slice(2)}`, step, color: fallbackColor });
+		updateGradient();
+	}
+
+	function removeGradientStep(index: number) {
+		if (gradientSteps.value.length <= 1) return;
+		gradientSteps.value.splice(index, 1);
+		updateGradient();
+	}
+
+	function updateGradientStep(index: number) {
+		const item = gradientSteps.value[index];
+		if (!item) return;
+		const step = clampStep(Number(item.step ?? 0));
+		item.step = step;
+		updateGradient();
+	}
+
+	function updateGradientColor(index: number, color: string | null) {
+		const item = gradientSteps.value[index];
+		if (!item) return;
+		item.color = color || "#ffffff";
+		updateGradient();
+	}
+
+	function requestRender(object) {
+		Hooks.useDispatchSignal("objectChanged", object);
+	}
+
+	function update(key: string) {
+		const object = getHeatmapObject();
+		if (!object) return;
+
+		const call = {
+			mode: () => {
+				object.setMode(heatmapData.mode);
+			},
+			size: () => {
+				object.setSize({ width: heatmapData.size.width, height: heatmapData.size.height });
+			},
+			heatmap: () => {
+				heatmapData.heatmap.minOpacity = opacityRange.value[0];
+				heatmapData.heatmap.maxOpacity = opacityRange.value[1];
+
+				object.updateHeatmapConfig(heatmapData.heatmap);
+			},
+			height: () => {
+				object.options.height = {
+					scale: heatmapData.height.scale,
+					segments: {
+						width: heatmapData.height.segments.width,
+						height: heatmapData.height.segments.height,
+					},
+				};
+				object.setSize({ width: heatmapData.size.width, height: heatmapData.size.height });
+			},
+		};
+
+		call[key]?.();
+		requestRender(object);
+	}
+
+	function updateData() {
+		const object = getHeatmapObject();
+		if (!object) return;
+
+		ensureDataShape();
+		object.setData({
+			max: heatmapData.data.max,
+			min: heatmapData.data.min,
+			points: heatmapData.data.points || [],
+		});
+		requestRender(object);
+	}
+
+	function openPointsEditor() {
+		pointsEditorShow.value = true;
+	}
+
+	function validatePoints(value: unknown) {
+		const errors: string[] = [];
+		const points: Array<{ x: number; y: number; value: number; radius?: number }> = [];
+
+		if (!Array.isArray(value)) {
+			return { errors: [t("layout.sider.heatmap.Points must be an array.")], points };
+		}
+
+		value.forEach((item, index) => {
+			if (!item || typeof item !== "object") {
+				errors.push(t("layout.sider.heatmap.Point[{index}] must be an object.", { index }));
+				return;
+			}
+
+			const point = item as Record<string, unknown>;
+			const x = Number(point.x);
+			const y = Number(point.y);
+			const v = Number(point.value);
+			const radius = point.radius === undefined ? undefined : Number(point.radius);
+
+			if (!Number.isFinite(x)) errors.push(t("layout.sider.heatmap.Point[{index}].x must be a number.", { index }));
+			if (!Number.isFinite(y)) errors.push(t("layout.sider.heatmap.Point[{index}].y must be a number.", { index }));
+			if (!Number.isFinite(v)) errors.push(t("layout.sider.heatmap.Point[{index}].value must be a number.", { index }));
+			if (radius !== undefined && !Number.isFinite(radius)) {
+				errors.push(t("layout.sider.heatmap.Point[{index}].radius must be a number.", { index }));
+			}
+
+			if (Number.isFinite(x) && Number.isFinite(y) && Number.isFinite(v)) {
+				const normalized: { x: number; y: number; value: number; radius?: number } = { x, y, value: v };
+				if (radius !== undefined && Number.isFinite(radius)) {
+					normalized.radius = radius;
+				}
+				points.push(normalized);
+			}
+		});
+
+		return { errors, points };
+	}
+
+	function submitPoints(e: Event) {
+		e.stopPropagation();
+
+		pointsErrors.value = pointsEditorRef.value?.getErrors?.() || [];
+		if (pointsErrors.value.length > 0) return;
+
+		let parsed;
+		try {
+			parsed = JSON.parse(pointsSource.value);
+		} catch (error) {
+			pointsErrors.value = [String((error as Error).message || error)];
+			return;
+		}
+
+		const { errors, points } = validatePoints(parsed);
+		if (errors.length > 0) {
+			pointsErrors.value = errors;
+			return;
+		}
+
+		ensureDataShape();
+		heatmapData.data.points = points;
+		updateData();
+		pointsEditorShow.value = false;
+	}
+
+	watch(
+		() => pointsEditorShow.value,
+		show => {
+			if (!show) return;
+			ensureDataShape();
+			pointsSource.value = JSON.stringify(heatmapData.data.points || [], null, 2);
+			pointsErrors.value = [];
+		}
+	);
+
+	onMounted(() => {
+		Hooks.useAddSignal("objectSelected", updateUI);
+		updateUI();
+	});
+	onBeforeUnmount(() => {
+		Hooks.useRemoveSignal("objectSelected", updateUI);
+	});
+</script>
+
+<template>
+	<n-collapse display-directive="show" :default-expanded-names="['basic', 'heatmap', 'data', 'height']">
+		<template #arrow>
+			<n-icon>
+				<CaretForwardOutline />
+			</n-icon>
+		</template>
+
+		<!-- 基础 -->
+		<n-collapse-item :title="t('extra.resource.expansion.Heat map')" name="basic">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.particle.Type") }}</span>
+				<n-select
+					v-model:value="heatmapData.mode"
+					size="small"
+					:options="[
+						{ label: t('extra.resource.expansion.Flat heatmap'), value: 'flat' },
+						{ label: t('extra.resource.expansion.Elevation heatmap'), value: 'height' },
+					]"
+					@update:value="update('mode')"
+				/>
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("other.Width") }}</span>
+				<EsInputNumber
+					v-model:value="heatmapData.size.width"
+					size="small"
+					:min="0.1"
+					:max="Infinity"
+					:decimal="2"
+					:show-button="false"
+					@change="update('size')"
+				/>
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("other.Height") }}</span>
+				<EsInputNumber
+					v-model:value="heatmapData.size.height"
+					size="small"
+					:min="0.1"
+					:max="Infinity"
+					:decimal="2"
+					:show-button="false"
+					@change="update('size')"
+				/>
+			</div>
+		</n-collapse-item>
+
+		<!-- 高程 -->
+		<n-collapse-item v-if="isHeightMode" :title="t('extra.resource.expansion.Elevation heatmap')" name="height">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.heatmap.Height Scale") }}</span>
+				<EsInputNumber v-model:value="heatmapData.height.scale" size="small" :min="0" :max="100" :decimal="2" :show-button="false" @change="update('height')" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.scene.Width segments") }}</span>
+				<EsInputNumber
+					v-model:value="heatmapData.height.segments.width"
+					size="small"
+					:min="1"
+					:max="512"
+					:decimal="0"
+					:show-button="false"
+					@change="update('height')"
+				/>
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.scene.Height segments") }}</span>
+				<EsInputNumber
+					v-model:value="heatmapData.height.segments.height"
+					size="small"
+					:min="1"
+					:max="512"
+					:decimal="0"
+					:show-button="false"
+					@change="update('height')"
+				/>
+			</div>
+		</n-collapse-item>
+
+		<!-- 热力图纹理参数 -->
+		<n-collapse-item :title="t('layout.sider.heatmap.Heatmap Texture')" name="heatmap">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.postProcessing.Radius") }}</span>
+				<EsInputNumber
+					v-model:value="heatmapData.heatmap.radius"
+					size="small"
+					:min="1"
+					:max="Infinity"
+					:decimal="0"
+					:show-button="false"
+					@change="update('heatmap')"
+				/>
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.heatmap.Blur") }}</span>
+				<n-slider v-model:value="heatmapData.heatmap.blur" :min="0" :max="1" :step="0.01" @update:value="update('heatmap')" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<n-text>
+					<EsTip class="!justify-start" content="Alpha">
+						{{ t("layout.sider.heatmap.Controls the opacity of the darkest and brightest parts of a thermal texture") }}
+					</EsTip>
+				</n-text>
+				<n-slider v-model:value="opacityRange" range :min="0" :max="1" :step="0.01" @update:value="update('heatmap')" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.heatmap.Gradient") }}</span>
+				<div class="heatmap-gradient-actions">
+					<n-button size="tiny" tertiary @click="addGradientStep">{{ t("layout.sider.heatmap.Add") }}</n-button>
+				</div>
+			</div>
+
+			<div class="heatmap-gradient-item" v-for="(step, index) in gradientSteps" :key="step.id">
+				<EsInputNumber
+					v-model:value="step.step"
+					size="small"
+					:min="0"
+					:max="1"
+					:decimal="2"
+					:show-button="false"
+					class="heatmap-gradient-step"
+					@change="updateGradientStep(index)"
+				/>
+				<n-color-picker
+					v-model:value="step.color"
+					:show-alpha="false"
+					:modes="['hex']"
+					size="small"
+					class="heatmap-gradient-color"
+					:render-label="() => ''"
+					@update:value="updateGradientColor(index, $event)"
+				/>
+				<n-button size="tiny" quaternary :disabled="gradientSteps.length <= 1" @click="removeGradientStep(index)">
+					{{ t("layout.sider.heatmap.Remove") }}
+				</n-button>
+			</div>
+		</n-collapse-item>
+
+		<!-- 数据 -->
+		<n-collapse-item :title="t('layout.sider.heatmap.Data')" name="data">
+			<div class="sidebar-config-item">
+				<span>{{ t("other.Maximum") }}</span>
+				<EsInputNumber
+					v-model:value="heatmapData.data.max"
+					size="small"
+					:min="-Infinity"
+					:max="Infinity"
+					:decimal="2"
+					:show-button="false"
+					@change="updateData"
+				/>
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("other.Minimum") }}</span>
+				<EsInputNumber
+					v-model:value="heatmapData.data.min"
+					size="small"
+					:min="-Infinity"
+					:max="Infinity"
+					:decimal="2"
+					:show-button="false"
+					@change="updateData"
+				/>
+			</div>
+
+			<div class="sidebar-config-item">
+				<n-input class="!w-full" type="textarea" :value="pointsPreview" :rows="6" readonly round @click.stop="openPointsEditor" />
+			</div>
+		</n-collapse-item>
+	</n-collapse>
+
+	<n-modal
+		:show="pointsEditorShow"
+		@update:show="show => (pointsEditorShow = show)"
+		class="!w-60vw"
+		preset="dialog"
+		:title="t('layout.sider.heatmap.Heatmap Points')"
+		:showIcon="false"
+	>
+		<CodeEditor ref="pointsEditorRef" v-model:source="pointsSource" mode="json" class="!h-400px" />
+
+		<n-alert
+			:title="t('layout.sider.heatmap.Error')"
+			type="error"
+			v-if="pointsErrors.length"
+			closable
+			@close="pointsErrors = []"
+			class="absolute bottom-0 w-full z-9999"
+		>
+			<n-text depth="1" v-for="(error, index) in pointsErrors" :key="index" class="block">{{ error }}</n-text>
+		</n-alert>
+		<div class="float-right mt-10px">
+			<n-button size="small" @click="pointsEditorShow = false">{{ t("other.Cancel") }}</n-button>
+			<n-button class="ml-5px" type="primary" size="small" @click="submitPoints">{{ t("other.Ok") }}</n-button>
+		</div>
+	</n-modal>
+</template>
+
+<style scoped lang="less">
+	.heatmap-gradient-actions {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.heatmap-gradient-item {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0 1rem 0.5rem 1rem;
+		width: calc(100% - 2rem);
+	}
+
+	.heatmap-gradient-step {
+		width: 70px;
+	}
+
+	.heatmap-gradient-color {
+		flex: 1;
+	}
+
+	:deep(.n-input__textarea) {
+		font-size: 12px;
+	}
+</style>
diff --git a/packages/editor/src/views/editor/layouts/sidebar/SidebarPath.vue b/packages/editor/src/views/editor/layouts/sidebar/SidebarPath.vue
new file mode 100644
index 0000000..d1db22d
--- /dev/null
+++ b/packages/editor/src/views/editor/layouts/sidebar/SidebarPath.vue
@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, reactive } from "vue";
+import { CaretForwardOutline } from "@vicons/ionicons5";
+import { t } from "@/language";
+import { App, Hooks, Utils, getDefaultPathOptions } from "@astral3d/engine";
+import EsInputNumber from "@/components/es/EsInputNumber.vue";
+
+const defaultOptions = getDefaultPathOptions();
+const pathData = reactive(getDefaultPathOptions() as any);
+const isTubeMode = computed(() => pathData.mode === "tube");
+
+function getPathObject() {
+	const object = App.selected;
+	if (!object) return null;
+	if (object.type !== "Path") return null;
+	return object as any;
+}
+
+function ensureDataShape() {
+	if (!pathData.path) {
+		pathData.path = JSON.parse(JSON.stringify(defaultOptions.path));
+	}
+	if (!pathData.tube) {
+		pathData.tube = JSON.parse(JSON.stringify(defaultOptions.tube));
+	}
+	if (!pathData.flow) {
+		pathData.flow = JSON.parse(JSON.stringify(defaultOptions.flow));
+	}
+	if (!Array.isArray(pathData.flow.direction)) {
+		pathData.flow.direction = defaultOptions.flow.direction.slice();
+	}
+	if (typeof pathData.cornerRadius !== "number") {
+		pathData.cornerRadius = defaultOptions.cornerRadius;
+	}
+	if (typeof pathData.cornerSplit !== "number") {
+		pathData.cornerSplit = defaultOptions.cornerSplit;
+	}
+	if (typeof pathData.closed !== "boolean") {
+		pathData.closed = defaultOptions.closed;
+	}
+	if (!pathData.mode) {
+		pathData.mode = defaultOptions.mode;
+	}
+}
+
+function updateUI() {
+	const object = getPathObject();
+	if (!object) return;
+	Utils.deepAssign(pathData, object.options);
+	ensureDataShape();
+}
+
+function updateOptions() {
+	const object = getPathObject();
+	if (!object) return;
+
+	object.updateOptions({
+		mode: pathData.mode,
+		closed: pathData.closed,
+		cornerRadius: pathData.cornerRadius,
+		cornerSplit: pathData.cornerSplit,
+		path: { ...pathData.path },
+		tube: { ...pathData.tube },
+		flow: {
+			...pathData.flow,
+			direction: Array.isArray(pathData.flow.direction) ? pathData.flow.direction.slice() : defaultOptions.flow.direction.slice(),
+		},
+	});
+
+	Hooks.useDispatchSignal("objectChanged", object);
+}
+
+onMounted(() => {
+	Hooks.useAddSignal("objectSelected", updateUI);
+	updateUI();
+});
+
+onBeforeUnmount(() => {
+	Hooks.useRemoveSignal("objectSelected", updateUI);
+});
+</script>
+
+<template>
+	<n-collapse display-directive="show" :default-expanded-names="['base', 'shape', 'flow']">
+		<template #arrow>
+			<n-icon>
+				<CaretForwardOutline />
+			</n-icon>
+		</template>
+
+		<n-collapse-item :title="t('layout.sider.path.Path Params')" name="base">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.path.Type") }}</span>
+				<n-select
+					v-model:value="pathData.mode"
+					size="small"
+					:options="[
+						{ label: t('layout.sider.path.Ribbon'), value: 'path' },
+						{ label: t('layout.sider.path.Tube'), value: 'tube' },
+					]"
+					@update:value="updateOptions"
+				/>
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.path.Corner Radius") }}</span>
+				<EsInputNumber v-model:value="pathData.cornerRadius" size="small" :min="0" :max="100" :decimal="2" :show-button="false" @change="updateOptions" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.path.Corner Split") }}</span>
+				<EsInputNumber v-model:value="pathData.cornerSplit" size="small" :min="0" :max="50" :decimal="0" :show-button="false" @change="updateOptions" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.scene.Closed") }}</span>
+				<n-checkbox size="small" v-model:checked="pathData.closed" @update:checked="updateOptions" />
+			</div>
+		</n-collapse-item>
+
+		<n-collapse-item v-if="!isTubeMode" :title="t('layout.sider.path.Ribbon Params')" name="shape">
+			<div class="sidebar-config-item">
+				<span>{{ t("other.Width") }}</span>
+				<EsInputNumber v-model:value="pathData.path.width" size="small" :min="0.01" :max="100" :decimal="2" :show-button="false" @change="updateOptions" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.path.Progress") }}</span>
+				<n-slider v-model:value="pathData.path.progress" :min="0" :max="1" :step="0.01" @update:value="updateOptions" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.path.Arrow") }}</span>
+				<n-switch size="small" v-model:value="pathData.path.arrow" @update:value="updateOptions" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.path.Side") }}</span>
+				<n-select
+					v-model:value="pathData.path.side"
+					size="small"
+					:options="[
+						{ label: t('layout.sider.path.Both'), value: 'both' },
+						{ label: t('layout.sider.path.Left'), value: 'left' },
+						{ label: t('layout.sider.path.Right'), value: 'right' },
+					]"
+					@update:value="updateOptions"
+				/>
+			</div>
+		</n-collapse-item>
+
+		<n-collapse-item v-else :title="t('layout.sider.path.Tube Params')" name="shape">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.scene.Radius") }}</span>
+				<EsInputNumber v-model:value="pathData.tube.radius" size="small" :min="0.01" :max="100" :decimal="2" :show-button="false" @change="updateOptions" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.scene['Radial segments']") }}</span>
+				<EsInputNumber v-model:value="pathData.tube.radialSegments" size="small" :min="2" :max="64" :decimal="0" :show-button="false" @change="updateOptions" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.path.Progress") }}</span>
+				<n-slider v-model:value="pathData.tube.progress" :min="0" :max="1" :step="0.01" @update:value="updateOptions" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.path.Start Rad") }}</span>
+				<EsInputNumber v-model:value="pathData.tube.startRad" size="small" :min="-6.28" :max="6.28" :decimal="2" :show-button="false" @change="updateOptions" />
+			</div>
+		</n-collapse-item>
+
+		<n-collapse-item :title="t('layout.sider.path.Flow Params')" name="flow">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.path.Flow") }}</span>
+				<n-switch size="small" v-model:value="pathData.flow.enabled" @update:value="updateOptions" />
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.path.Flow Speed") }}</span>
+				<EsInputNumber
+					v-model:value="pathData.flow.speed"
+					size="small"
+					:min="-10"
+					:max="10"
+					:decimal="2"
+					:show-button="false"
+					:disabled="!pathData.flow.enabled"
+					@change="updateOptions"
+				/>
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.path.Flow Direction") }}</span>
+				<div class="flex">
+					<EsInputNumber
+						v-model:value="pathData.flow.direction[0]"
+						size="small"
+						:min="-1"
+						:max="1"
+						:decimal="2"
+						:show-button="false"
+						:disabled="!pathData.flow.enabled"
+						@change="updateOptions"
+					/>
+					<EsInputNumber
+						v-model:value="pathData.flow.direction[1]"
+						size="small"
+						:min="-1"
+						:max="1"
+						:decimal="2"
+						:show-button="false"
+						:disabled="!pathData.flow.enabled"
+						@change="updateOptions"
+					/>
+				</div>
+			</div>
+		</n-collapse-item>
+	</n-collapse>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/packages/editor/src/views/editor/layouts/sidebar/SidebarUIPanel.vue b/packages/editor/src/views/editor/layouts/sidebar/SidebarUIPanel.vue
new file mode 100644
index 0000000..4f6b01b
--- /dev/null
+++ b/packages/editor/src/views/editor/layouts/sidebar/SidebarUIPanel.vue
@@ -0,0 +1,256 @@
+<script setup lang="ts">
+	import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
+	import { CaretForwardOutline } from "@vicons/ionicons5";
+	import { t } from "@/language";
+	import { App, Hooks, UIPanelBlock, UIPanelText, Utils } from "@astral3d/engine";
+	import SidebarUIPanelBlock from "./uipanel/Sidebar.UIPanel.Block.vue";
+	import SidebarUIPanelText from "./uipanel/Sidebar.UIPanel.Text.vue";
+
+	type UIPanelFormType = "Block" | "Text";
+	type UIPanelStateMap = Record<string, Record<string, any>>;
+
+	const UIPANEL_TYPES = new Set(["UIPanel", "UIPanelBlock", "UIPanelText", "UIPanelInline", "UIPanelInlineBlock"]);
+	// 只存储是否有选中对象的状态，3D 对象完全脱离 Vue 响应式系统
+	const hasSelection = ref(false);
+
+	const formData = reactive({
+		type: "Block" as UIPanelFormType,
+		props: {} as Record<string, any>,
+		states: {} as UIPanelStateMap,
+	});
+
+	function getUIPanelContext() {
+		const object = App.selected as any;
+		if (!object || !UIPANEL_TYPES.has(object.type)) return null;
+		const panel = Utils.findUIPanelRoot(object);
+		if (!panel) return null;
+		return { panel, object };
+	}
+
+	function normalizeFormData() {
+		if (!formData.props || typeof formData.props !== "object") formData.props = {};
+		if (!formData.states || typeof formData.states !== "object") formData.states = {};
+
+		if (formData.type === "Block") {
+			if (!Number.isFinite(formData.props.width)) formData.props.width = 1;
+			if (!Number.isFinite(formData.props.height)) formData.props.height = 0.4;
+			if (!Number.isFinite(formData.props.padding)) formData.props.padding = 0.04;
+			if (!Number.isFinite(formData.props.margin)) formData.props.margin = 0;
+			if (!Number.isFinite(formData.props.offset)) formData.props.offset = 0.005;
+			if (!Number.isFinite(formData.props.backgroundOpacity)) formData.props.backgroundOpacity = 0.8;
+			if (!Number.isFinite(formData.props.borderRadius)) formData.props.borderRadius = 0.04;
+			if (!Number.isFinite(formData.props.borderWidth)) formData.props.borderWidth = 0;
+			if (!formData.props.backgroundColor) formData.props.backgroundColor = "#2a2a2a";
+			if (!formData.props.borderColor) formData.props.borderColor = "#ffffff";
+			if (!formData.props.flexDirection) formData.props.flexDirection = "column";
+			if (!formData.props.justifyContent) formData.props.justifyContent = "center";
+			if (!formData.props.alignItems) formData.props.alignItems = "center";
+			if (!formData.props.backgroundSize) formData.props.backgroundSize = "cover";
+			if (!formData.props.overflow) formData.props.overflow = "visible";
+			if (!formData.props.bestFit) formData.props.bestFit = "none";
+		} else {
+			if (!formData.props.textContent) formData.props.textContent = "";
+			// Text 类型的 width/height 使用 "auto" 表示自动尺寸，
+			// 若 props 中未定义或为 "auto"，则保持 "auto"；仅当为有限数值时显示具体值
+			if (formData.props.width !== "auto" && !Number.isFinite(formData.props.width)) formData.props.width = "auto";
+			if (formData.props.height !== "auto" && !Number.isFinite(formData.props.height)) formData.props.height = "auto";
+			if (!Number.isFinite(formData.props.fontSize)) formData.props.fontSize = 0.05;
+			if (!Number.isFinite(formData.props.fontOpacity)) formData.props.fontOpacity = 1;
+			if (!Number.isFinite(formData.props.letterSpacing)) formData.props.letterSpacing = 0;
+			if (!Number.isFinite(formData.props.lineHeight)) formData.props.lineHeight = 1.2;
+			if (!Number.isFinite(formData.props.padding)) formData.props.padding = 0;
+			if (!Number.isFinite(formData.props.margin)) formData.props.margin = 0;
+			if (!Number.isFinite(formData.props.offset)) formData.props.offset = 0.005;
+			if (!formData.props.color) formData.props.color = "#ffffff";
+			if (!formData.props.textAlign) formData.props.textAlign = "center";
+			if (!formData.props.fontKerning) formData.props.fontKerning = "normal";
+			if (!formData.props.whiteSpace) formData.props.whiteSpace = "pre-line";
+			if (!formData.props.fontSmooth) formData.props.fontSmooth = "antialiased";
+			if (!formData.props.breakOn) formData.props.breakOn = "- ,.:?!\n";
+		}
+	}
+
+	function updateUI() {
+		const context = getUIPanelContext();
+		if (!context) {
+			hasSelection.value = false;
+			return;
+		}
+
+		hasSelection.value = true;
+
+		const options = context.object.options || {};
+		formData.type = context.object.type === "UIPanelText" || context.object.type === "UIPanelInline" ? "Text" : "Block";
+		formData.props = JSON.parse(JSON.stringify(options.props || {}));
+		formData.states = JSON.parse(JSON.stringify(options.states || {}));
+		normalizeFormData();
+	}
+
+	const canAddNodes = computed(() => {
+		if (!hasSelection.value) return false;
+		const object = App.selected as any;
+		return object && (object.type === "UIPanel" || object.type === "UIPanelBlock");
+	});
+
+	function getAddParent() {
+		const object = App.selected as any;
+		if (object && (object.type === "UIPanel" || object.type === "UIPanelBlock")) {
+			return object;
+		}
+		return Utils.findUIPanelRoot(object);
+	}
+
+	function createBlock() {
+		return new UIPanelBlock({
+			name: "Block",
+			props: {
+				width: 1,
+				height: 0.4,
+				padding: 0.04,
+				backgroundColor: "#2a2a2a",
+				backgroundOpacity: 0.8,
+				borderRadius: 0.04,
+				justifyContent: "center",
+				alignItems: "center",
+			},
+		});
+	}
+
+	function createText() {
+		return new UIPanelText({
+			name: "Text",
+			props: {
+				textContent: "",
+				fontSize: 0.05,
+				color: "#ffffff",
+				textAlign: "center",
+			},
+		});
+	}
+
+	function addNode(type: "Block" | "Text") {
+		const parent = getAddParent();
+		if (!parent) return;
+		const node = type === "Block" ? createBlock() : createText();
+		parent.add?.(node);
+		Hooks.useDispatchSignal("objectChanged", parent);
+		App.select(node);
+	}
+
+	function updateProps(patch: Record<string, any>) {
+		const object = App.selected as any;
+		if (!object) return;
+		object.setProps?.(patch);
+		Hooks.useDispatchSignal("objectChanged", object);
+	}
+
+	function updateStates() {
+		const object = App.selected as any;
+		if (!object) return;
+		object.setStates?.(formData.states);
+		Hooks.useDispatchSignal("objectChanged", object);
+	}
+
+	function isStateEnabled(key: string) {
+		return Boolean(formData.states && formData.states[key]);
+	}
+
+	function toggleState(key: string, enabled: boolean) {
+		if (enabled) {
+			if (!formData.states) formData.states = {};
+			if (!formData.states[key]) {
+				// 首次启用状态时，根据类型设置不同的默认值
+				if (formData.type === "Block") {
+					// Block: 使用当前背景色和透明度 1
+					formData.states[key] = {
+						backgroundColor: formData.props.backgroundColor || "#2a2a2a",
+						backgroundOpacity: 1,
+					};
+				} else {
+					// Text: 使用当前文字颜色
+					formData.states[key] = {
+						color: formData.props.color || "#ffffff",
+					};
+				}
+			}
+		} else if (formData.states) {
+			delete formData.states[key];
+			if (Object.keys(formData.states).length === 0) {
+				formData.states = {};
+			}
+		}
+		updateStates();
+	}
+
+	function updateStateProps(key: string, patch: Record<string, any>) {
+		if (!formData.states) formData.states = {};
+		if (!formData.states[key]) formData.states[key] = {};
+		formData.states[key] = { ...formData.states[key], ...patch };
+		updateStates();
+	}
+
+	onMounted(() => {
+		Hooks.useAddSignal("objectSelected", updateUI);
+		Hooks.useAddSignal("objectChanged", updateUI);
+		updateUI();
+	});
+
+	onBeforeUnmount(() => {
+		Hooks.useRemoveSignal("objectSelected", updateUI);
+		Hooks.useRemoveSignal("objectChanged", updateUI);
+	});
+</script>
+
+<template>
+	<div class="uipanel-actions">
+		<n-space size="small" align="center" justify="center">
+			<n-button v-if="canAddNodes" @click="addNode('Block')">{{ t("layout.sider.uipanel['Add Block']") }}</n-button>
+			<n-button v-if="canAddNodes" @click="addNode('Text')">{{ t("layout.sider.uipanel['Add Text']") }}</n-button>
+		</n-space>
+	</div>
+
+	<n-collapse display-directive="show" :default-expanded-names="['node']">
+		<template #arrow>
+			<n-icon>
+				<CaretForwardOutline />
+			</n-icon>
+		</template>
+
+		<n-collapse-item :title="t('layout.sider.uipanel.Node')" name="node">
+			<div v-if="!hasSelection" class="text-12px opacity-70">
+				{{ t("layout.sider.uipanel['Select a node to edit']") }}
+			</div>
+
+			<template v-else>
+				<div class="sidebar-config-item">
+					<span>{{ t("layout.sider.uipanel.Type") }}</span>
+					<div class="text-center">{{ formData.type }}</div>
+				</div>
+
+				<SidebarUIPanelBlock
+					v-if="formData.type === 'Block'"
+					:form-data="formData"
+					:is-state-enabled="isStateEnabled"
+					:toggle-state="toggleState"
+					:update-props="updateProps"
+					:update-state-props="updateStateProps"
+				/>
+
+				<SidebarUIPanelText
+					v-else
+					:form-data="formData"
+					:is-state-enabled="isStateEnabled"
+					:toggle-state="toggleState"
+					:update-props="updateProps"
+					:update-state-props="updateStateProps"
+				/>
+			</template>
+		</n-collapse-item>
+	</n-collapse>
+</template>
+
+<style scoped lang="less">
+	.uipanel-actions {
+		margin-bottom: 0.5rem;
+	}
+</style>
diff --git a/packages/editor/src/views/editor/layouts/sidebar/SidebarWaterPool.vue b/packages/editor/src/views/editor/layouts/sidebar/SidebarWaterPool.vue
new file mode 100644
index 0000000..93afc55
--- /dev/null
+++ b/packages/editor/src/views/editor/layouts/sidebar/SidebarWaterPool.vue
@@ -0,0 +1,687 @@
+<script setup lang="ts">
+	import { computed, onBeforeUnmount, onMounted, reactive, ref, toRaw } from "vue";
+	import { CaretForwardOutline } from "@vicons/ionicons5";
+	import { Color, CubeTexture, Texture } from "three";
+	import { App, Hooks, Water, WaterPool } from "@astral3d/engine";
+	import EsInputNumber from "@/components/es/EsInputNumber.vue";
+	import EsTexture from "@/components/es/EsTexture.vue";
+	import { useI18n } from "vue-i18n";
+
+	const { t } = useI18n();
+
+	const poolData = reactive({
+		type: "cylinder",
+		light: { x: 0.7, y: 1, z: -0.3 },
+		wallMode: "volume",
+		wallOpacity: 0.3,
+		disturbanceEnabled: true,
+		disturbanceMode: "drag",
+		disturbanceDropsPerStep: 1,
+		disturbanceRadiusMin: 0.01,
+		disturbanceRadiusMax: 0.05,
+		disturbanceStrengthMin: 0.005,
+		disturbanceStrengthMax: 0.02,
+		disturbanceTravelRadius: 0.85,
+		disturbanceDriftSpeed: 0.015,
+		disturbanceJitter: 0.01,
+		disturbanceSpread: 0.08,
+		useSceneRefraction: true,
+		surfaceTransmittance: 0.65,
+		normalStrength: 0.6,
+		refractionStrength: 0.035,
+		simulationSize: 256,
+		causticsSize: 1024,
+		waterSegments: 200,
+		wallSegments: 64,
+		diameter: 2,
+		width: 2,
+		depth: 2,
+		height: 2,
+	});
+
+	const tilesTexture = ref<Color | Texture | CubeTexture | null>(null);
+	const volumeColor = ref("#2c5965");
+	const surfaceColor = ref("#4a8aa0");
+	const rebuilding = ref(false);
+	let qualityTimer: number | null = null;
+
+	const isCylinder = computed(() => poolData.type === "cylinder");
+
+	function getWaterPoolObject() {
+		const object = App.selected;
+		if (!object) return null;
+		if (object.type !== "WaterPool") return null;
+		return object as any;
+	}
+
+	function syncColors(object) {
+		const volume = object.volumeColor instanceof Color ? object.volumeColor : new Color(object.volumeColor ?? 0x2c5965);
+		const surface = object.surfaceColor instanceof Color ? object.surfaceColor : new Color(object.surfaceColor ?? volume.getHex());
+		volumeColor.value = `#${volume.getHexString()}`;
+		surfaceColor.value = `#${surface.getHexString()}`;
+	}
+
+	function updateUI() {
+		const object = getWaterPoolObject();
+		if (!object) return;
+
+		poolData.type = object.poolType === "cylinder" ? "cylinder" : "square";
+		poolData.light.x = object.light?.[0] ?? 0.7;
+		poolData.light.y = object.light?.[1] ?? 1;
+		poolData.light.z = object.light?.[2] ?? -0.3;
+		poolData.wallMode = object.wallMode ?? (object.hasWall ? "wall" : "none");
+		poolData.wallOpacity = Number.isFinite(object.wallOpacity) ? object.wallOpacity : 1;
+		const disturbance = object._disturbance || null;
+		if (disturbance) {
+			poolData.disturbanceEnabled = true;
+			poolData.disturbanceMode = disturbance.mode === "uniform" ? "uniform" : "drag";
+			poolData.disturbanceDropsPerStep = disturbance.dropsPerStep ?? 1;
+			poolData.disturbanceRadiusMin = disturbance.radiusMin ?? 0.01;
+			poolData.disturbanceRadiusMax = disturbance.radiusMax ?? 0.05;
+			poolData.disturbanceStrengthMin = disturbance.strengthMin ?? 0.005;
+			poolData.disturbanceStrengthMax = disturbance.strengthMax ?? 0.02;
+			poolData.disturbanceTravelRadius = disturbance.travelRadius ?? 0.85;
+			poolData.disturbanceDriftSpeed = disturbance.driftSpeed ?? 0.015;
+			poolData.disturbanceJitter = disturbance.jitter ?? 0.01;
+			poolData.disturbanceSpread = disturbance.spread ?? 0.08;
+		} else {
+			poolData.disturbanceEnabled = true;
+			poolData.disturbanceMode = "drag";
+			poolData.disturbanceDropsPerStep = 1;
+			poolData.disturbanceRadiusMin = 0.01;
+			poolData.disturbanceRadiusMax = 0.05;
+			poolData.disturbanceStrengthMin = 0.005;
+			poolData.disturbanceStrengthMax = 0.02;
+			poolData.disturbanceTravelRadius = 0.85;
+			poolData.disturbanceDriftSpeed = 0.015;
+			poolData.disturbanceJitter = 0.01;
+			poolData.disturbanceSpread = 0.08;
+		}
+		poolData.useSceneRefraction = !!object.useSceneRefraction;
+		poolData.surfaceTransmittance = Number.isFinite(object.surfaceTransmittance) ? object.surfaceTransmittance : 0.65;
+		poolData.normalStrength = Number.isFinite(object.normalStrength) ? object.normalStrength : 0.6;
+		poolData.refractionStrength = Number.isFinite(object.refractionStrength) ? object.refractionStrength : 0.035;
+		poolData.simulationSize = object.simulationSize ?? 256;
+		poolData.causticsSize = object.causticsSize ?? 1024;
+		poolData.waterSegments = object.waterSegments ?? 200;
+		poolData.wallSegments = object.wallSegments ?? 64;
+		poolData.height = Number.isFinite(object.height) ? object.height : (object._poolHeight ?? 2);
+
+		if (poolData.type === "cylinder") {
+			poolData.diameter = Number.isFinite(object.diameter) ? object.diameter : object._radius ? object._radius * 2 : 2;
+		} else {
+			poolData.width = Number.isFinite(object.width) ? object.width : 2;
+			poolData.depth = Number.isFinite(object.depth) ? object.depth : 2;
+		}
+
+		tilesTexture.value = object.tiles || null;
+		syncColors(object);
+		applyDisturbance();
+	}
+
+	function requestRender(object) {
+		Hooks.useDispatchSignal("objectChanged", object);
+	}
+
+	function applyLight() {
+		const object = getWaterPoolObject();
+		if (!object) return;
+
+		const light = [poolData.light.x, poolData.light.y, poolData.light.z];
+		object.light = light;
+
+		const materials = typeof object._getWaterMaterials === "function" ? object._getWaterMaterials() : [];
+		materials.forEach(material => {
+			if (material?.uniforms?.light) material.uniforms.light.value = light;
+		});
+
+		const wallMaterial = object.wall?._material;
+		if (wallMaterial?.uniforms?.light) wallMaterial.uniforms.light.value = light;
+
+		const causticsMaterial = typeof object._getCausticsMaterial === "function" ? object._getCausticsMaterial() : null;
+		if (causticsMaterial?.uniforms?.light) causticsMaterial.uniforms.light.value = light;
+
+		requestRender(object);
+	}
+
+	function applySize() {
+		const object = getWaterPoolObject();
+		if (!object) return;
+
+		if (poolData.type === "cylinder") {
+			object.setSize({ diameter: poolData.diameter, height: poolData.height });
+		} else {
+			object.setSize({ width: poolData.width, depth: poolData.depth, height: poolData.height });
+		}
+
+		requestRender(object);
+	}
+
+	function applyTiles() {
+		const object = getWaterPoolObject();
+		if (!object) return;
+		if (poolData.wallMode !== "wall") return;
+
+		const texture = (toRaw(tilesTexture.value) as any) || null;
+		object.tiles = texture;
+
+		const materials = typeof object._getWaterMaterials === "function" ? object._getWaterMaterials() : [];
+		materials.forEach(material => {
+			if (material?.uniforms?.tiles) material.uniforms.tiles.value = texture;
+			if (material?.uniforms?.useTiles) material.uniforms.useTiles.value = texture ? 1 : 0;
+			if (material?.uniforms?.tilesColor) material.uniforms.tilesColor.value = object.volumeColor;
+		});
+
+		const wallMaterial = object.wall?._material;
+		if (wallMaterial?.uniforms?.tiles) wallMaterial.uniforms.tiles.value = texture;
+		if (wallMaterial?.uniforms?.useTiles) wallMaterial.uniforms.useTiles.value = texture ? 1 : 0;
+		if (wallMaterial?.uniforms?.tilesColor) wallMaterial.uniforms.tilesColor.value = object.volumeColor;
+
+		requestRender(object);
+	}
+
+	function applyColors() {
+		const object = getWaterPoolObject();
+		if (!object) return;
+
+		object.volumeColor = new Color(volumeColor.value || "#2c5965");
+		object.surfaceColor = new Color(surfaceColor.value || volumeColor.value || "#2c5965");
+
+		if (typeof object._applyUniforms === "function") {
+			object._applyUniforms();
+		}
+
+		requestRender(object);
+	}
+
+	function applyRefraction() {
+		const object = getWaterPoolObject();
+		if (!object) return;
+
+		object.useSceneRefraction = poolData.useSceneRefraction ? 1 : 0;
+		object.surfaceTransmittance = poolData.surfaceTransmittance;
+		object.normalStrength = poolData.normalStrength;
+		object.refractionStrength = poolData.refractionStrength;
+
+		if (typeof object._applyUniforms === "function") {
+			object._applyUniforms();
+		}
+
+		requestRender(object);
+	}
+
+	function applyDisturbance() {
+		const object = getWaterPoolObject();
+		if (!object) return;
+
+		if (!poolData.disturbanceEnabled) {
+			object.stopDisturbance?.();
+			requestRender(object);
+			return;
+		}
+
+		object.startDisturbance?.({
+			mode: poolData.disturbanceMode === "uniform" ? "uniform" : "drag",
+			dropsPerStep: Math.max(1, Math.round(poolData.disturbanceDropsPerStep)),
+			radiusMin: Math.max(0, poolData.disturbanceRadiusMin),
+			radiusMax: Math.max(poolData.disturbanceRadiusMin, poolData.disturbanceRadiusMax),
+			strengthMin: poolData.disturbanceStrengthMin,
+			strengthMax: poolData.disturbanceStrengthMax,
+			travelRadius: Math.max(0, poolData.disturbanceTravelRadius),
+			driftSpeed: Math.max(0, poolData.disturbanceDriftSpeed),
+			jitter: Math.max(0, poolData.disturbanceJitter),
+			spread: Math.max(0, poolData.disturbanceSpread),
+		});
+
+		requestRender(object);
+	}
+
+	function applyWallOpacity() {
+		const object = getWaterPoolObject();
+		if (!object) return;
+
+		object.wallOpacity = poolData.wallOpacity;
+		if (typeof object._applyUniforms === "function") {
+			object._applyUniforms();
+		}
+
+		const wallMaterial = object.wall?._material;
+		if (wallMaterial) {
+			const transparent = object.wallOpacity < 1;
+			wallMaterial.transparent = transparent;
+			wallMaterial.depthWrite = !transparent;
+			wallMaterial.needsUpdate = true;
+		}
+
+		requestRender(object);
+	}
+
+	function buildOptionsFromUI(object) {
+		const options: any = {
+			name: object?.name || "WaterPool",
+			type: poolData.type,
+			light: [poolData.light.x, poolData.light.y, poolData.light.z],
+			tiles: poolData.wallMode === "wall" ? (toRaw(tilesTexture.value) as any) || null : object?.tiles || null,
+			sky: object?.sky || null,
+			wallMode: poolData.wallMode,
+			wall: poolData.wallMode !== "none",
+			wallOpacity: poolData.wallOpacity,
+			useSceneRefraction: poolData.useSceneRefraction ? 1 : 0,
+			surfaceTransmittance: poolData.surfaceTransmittance,
+			normalStrength: poolData.normalStrength,
+			refractionStrength: poolData.refractionStrength,
+			volumeColor: new Color(volumeColor.value || "#2c5965"),
+			surfaceColor: new Color(surfaceColor.value || volumeColor.value || "#2c5965"),
+			simulationSize: Math.max(16, Math.round(poolData.simulationSize)),
+			causticsSize: Math.max(64, Math.round(poolData.causticsSize)),
+			waterSegments: Math.max(1, Math.round(poolData.waterSegments)),
+			wallSegments: Math.max(3, Math.round(poolData.wallSegments)),
+		};
+
+		if (poolData.type === "cylinder") {
+			options.diameter = poolData.diameter;
+		} else {
+			options.width = poolData.width;
+			options.depth = poolData.depth;
+		}
+		options.height = poolData.height;
+
+		if (object && Number.isFinite(object._renderOrderBase)) {
+			options.renderOrder = object._renderOrderBase;
+		}
+
+		return options;
+	}
+
+	async function rebuildPool() {
+		const object = getWaterPoolObject();
+		if (!object || rebuilding.value) return;
+
+		rebuilding.value = true;
+		try {
+			const options = buildOptionsFromUI(object);
+
+			const newPool = new WaterPool(options);
+			await newPool.loaded;
+
+			newPool.name = object.name;
+			newPool.position.copy(object.position);
+			newPool.quaternion.copy(object.quaternion);
+			newPool.scale.copy(object.scale);
+			newPool.visible = object.visible;
+			newPool.layers.mask = object.layers.mask;
+			newPool.userData = { ...object.userData };
+
+			const parent = object.parent ?? App.scene;
+			if (parent) {
+				const oldIndex = parent.children.indexOf(object);
+				parent.add(newPool);
+				const newIndex = parent.children.indexOf(newPool);
+				if (oldIndex >= 0 && newIndex >= 0 && newIndex !== oldIndex) {
+					parent.children.splice(newIndex, 1);
+					parent.children.splice(oldIndex, 0, newPool);
+				}
+			}
+
+			Water.registerRendering();
+
+			object.parent?.remove(object);
+
+			App.select(newPool);
+			requestRender(newPool);
+		} catch (error) {
+			// 避免阻断侧边栏操作
+			console.warn("WaterPool 重建失败:", error);
+		} finally {
+			rebuilding.value = false;
+		}
+	}
+
+	function applyWallMode() {
+		rebuildPool();
+	}
+
+	function applyType() {
+		rebuildPool();
+	}
+
+	function applyQuality() {
+		rebuildPool();
+	}
+
+	function scheduleQualityRebuild() {
+		if (qualityTimer !== null) {
+			clearTimeout(qualityTimer);
+		}
+		qualityTimer = window.setTimeout(() => {
+			qualityTimer = null;
+			applyQuality();
+		}, 600);
+	}
+
+	onMounted(() => {
+		Hooks.useAddSignal("objectSelected", updateUI);
+		updateUI();
+	});
+
+	onBeforeUnmount(() => {
+		if (qualityTimer !== null) {
+			clearTimeout(qualityTimer);
+			qualityTimer = null;
+		}
+		Hooks.useRemoveSignal("objectSelected", updateUI);
+	});
+</script>
+
+<template>
+	<n-collapse display-directive="show" :default-expanded-names="['basic', 'size', 'light', 'color', 'disturbance', 'refraction', 'texture', 'quality']">
+		<template #arrow>
+			<n-icon>
+				<CaretForwardOutline />
+			</n-icon>
+		</template>
+
+		<n-collapse-item :title="t('layout.sider.waterPool.Basic')" name="basic">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.Type") }}</span>
+				<n-select
+					v-model:value="poolData.type"
+					size="small"
+					:options="[
+						{ label: t('layout.sider.waterPool.Cylinder'), value: 'cylinder' },
+						{ label: t('layout.sider.waterPool.Square'), value: 'square' },
+					]"
+					:disabled="rebuilding"
+					@update:value="applyType"
+				/>
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.WallMode") }}</span>
+				<n-select
+					v-model:value="poolData.wallMode"
+					size="small"
+					:options="[
+						{ label: t('layout.sider.waterPool.WallNone'), value: 'none' },
+						{ label: t('layout.sider.waterPool.Wall'), value: 'wall' },
+						{ label: t('layout.sider.waterPool.Volume'), value: 'volume' },
+					]"
+					:disabled="rebuilding"
+					@update:value="applyWallMode"
+				/>
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.WallOpacity") }}</span>
+				<n-slider
+					v-model:value="poolData.wallOpacity"
+					:min="0"
+					:max="1"
+					:step="0.01"
+					:disabled="poolData.wallMode === 'none'"
+					@update:value="applyWallOpacity"
+				/>
+			</div>
+
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.ScreenRefraction") }}</span>
+				<n-switch size="small" v-model:value="poolData.useSceneRefraction" @update:value="applyRefraction" />
+			</div>
+		</n-collapse-item>
+
+		<n-collapse-item :title="t('layout.sider.waterPool.Size')" name="size">
+			<div class="sidebar-config-item" v-if="isCylinder">
+				<span>{{ t("layout.sider.waterPool.Diameter") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.diameter"
+					size="small"
+					:min="0.1"
+					:max="Infinity"
+					:decimal="2"
+					:show-button="false"
+					@change="applySize"
+				/>
+			</div>
+			<div class="sidebar-config-item" v-else>
+				<span>{{ t("layout.sider.waterPool.Width") }}</span>
+				<EsInputNumber v-model:value="poolData.width" size="small" :min="0.1" :max="Infinity" :decimal="2" :show-button="false" @change="applySize" />
+			</div>
+			<div class="sidebar-config-item" v-if="!isCylinder">
+				<span>{{ t("layout.sider.waterPool.Depth") }}</span>
+				<EsInputNumber v-model:value="poolData.depth" size="small" :min="0.1" :max="Infinity" :decimal="2" :show-button="false" @change="applySize" />
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.Height") }}</span>
+				<EsInputNumber v-model:value="poolData.height" size="small" :min="0.1" :max="Infinity" :decimal="2" :show-button="false" @change="applySize" />
+			</div>
+		</n-collapse-item>
+
+		<n-collapse-item :title="t('layout.sider.waterPool.Light')" name="light">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.Direction") }}</span>
+				<div class="flex gap-6px">
+					<EsInputNumber v-model:value="poolData.light.x" size="small" :min="-1" :max="1" :decimal="2" :show-button="false" @change="applyLight" />
+					<EsInputNumber v-model:value="poolData.light.y" size="small" :min="-1" :max="1" :decimal="2" :show-button="false" @change="applyLight" />
+					<EsInputNumber v-model:value="poolData.light.z" size="small" :min="-1" :max="1" :decimal="2" :show-button="false" @change="applyLight" />
+				</div>
+			</div>
+		</n-collapse-item>
+
+		<n-collapse-item :title="t('layout.sider.waterPool.Color')" name="color">
+			<div class="sidebar-config-item" v-if="poolData.wallMode !== 'none'">
+				<span>{{ t("layout.sider.waterPool.VolumeColor") }}</span>
+				<n-color-picker v-model:value="volumeColor" :show-alpha="false" :modes="['hex']" size="small" @update:value="applyColors" />
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.SurfaceColor") }}</span>
+				<n-color-picker v-model:value="surfaceColor" :show-alpha="false" :modes="['hex']" size="small" @update:value="applyColors" />
+			</div>
+		</n-collapse-item>
+
+		<n-collapse-item :title="t('layout.sider.waterPool.Disturbance')" name="disturbance">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.Enabled") }}</span>
+				<n-switch size="small" v-model:value="poolData.disturbanceEnabled" @update:value="applyDisturbance" />
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.Mode") }}</span>
+				<n-select
+					v-model:value="poolData.disturbanceMode"
+					size="small"
+					:options="[
+						{ label: t('layout.sider.waterPool.ModeDrag'), value: 'drag' },
+						{ label: t('layout.sider.waterPool.ModeUniform'), value: 'uniform' },
+					]"
+					@update:value="applyDisturbance"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.DropsPerStep") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.disturbanceDropsPerStep"
+					size="small"
+					:min="1"
+					:max="20"
+					:decimal="0"
+					:show-button="false"
+					@change="applyDisturbance"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.RadiusMin") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.disturbanceRadiusMin"
+					size="small"
+					:min="0"
+					:max="1"
+					:decimal="3"
+					:show-button="false"
+					@change="applyDisturbance"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.RadiusMax") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.disturbanceRadiusMax"
+					size="small"
+					:min="0"
+					:max="1"
+					:decimal="3"
+					:show-button="false"
+					@change="applyDisturbance"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.StrengthMin") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.disturbanceStrengthMin"
+					size="small"
+					:min="-1"
+					:max="1"
+					:decimal="3"
+					:show-button="false"
+					@change="applyDisturbance"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.StrengthMax") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.disturbanceStrengthMax"
+					size="small"
+					:min="-1"
+					:max="1"
+					:decimal="3"
+					:show-button="false"
+					@change="applyDisturbance"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.TravelRadius") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.disturbanceTravelRadius"
+					size="small"
+					:min="0"
+					:max="2"
+					:decimal="3"
+					:show-button="false"
+					@change="applyDisturbance"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.DriftSpeed") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.disturbanceDriftSpeed"
+					size="small"
+					:min="0"
+					:max="1"
+					:decimal="3"
+					:show-button="false"
+					@change="applyDisturbance"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.Jitter") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.disturbanceJitter"
+					size="small"
+					:min="0"
+					:max="1"
+					:decimal="3"
+					:show-button="false"
+					@change="applyDisturbance"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.Spread") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.disturbanceSpread"
+					size="small"
+					:min="0"
+					:max="1"
+					:decimal="3"
+					:show-button="false"
+					@change="applyDisturbance"
+				/>
+			</div>
+		</n-collapse-item>
+
+		<n-collapse-item :title="t('layout.sider.waterPool.Refraction')" name="refraction">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.SurfaceTransmittance") }}</span>
+				<n-slider v-model:value="poolData.surfaceTransmittance" :min="0" :max="1" :step="0.01" @update:value="applyRefraction" />
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.NormalStrength") }}</span>
+				<n-slider v-model:value="poolData.normalStrength" :min="0" :max="1" :step="0.01" @update:value="applyRefraction" />
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.RefractionStrength") }}</span>
+				<n-slider v-model:value="poolData.refractionStrength" :min="0" :max="1" :step="0.001" @update:value="applyRefraction" />
+			</div>
+		</n-collapse-item>
+
+		<n-collapse-item v-if="poolData.wallMode === 'wall'" :title="t('layout.sider.waterPool.Texture')" name="texture">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.WallTexture") }}</span>
+				<EsTexture v-model:texture="tilesTexture" width="26px" height="26px" class="ml-5px" @change="applyTiles" />
+			</div>
+		</n-collapse-item>
+
+		<n-collapse-item :title="t('layout.sider.waterPool.Quality')" name="quality">
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.SimulationSize") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.simulationSize"
+					size="small"
+					:min="16"
+					:max="2048"
+					:decimal="0"
+					:show-button="false"
+					:disabled="rebuilding"
+					@update:value="scheduleQualityRebuild"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.CausticsSize") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.causticsSize"
+					size="small"
+					:min="64"
+					:max="4096"
+					:decimal="0"
+					:show-button="false"
+					:disabled="rebuilding"
+					@update:value="scheduleQualityRebuild"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.WaterSegments") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.waterSegments"
+					size="small"
+					:min="1"
+					:max="1024"
+					:decimal="0"
+					:show-button="false"
+					:disabled="rebuilding"
+					@update:value="scheduleQualityRebuild"
+				/>
+			</div>
+			<div class="sidebar-config-item">
+				<span>{{ t("layout.sider.waterPool.WallSegments") }}</span>
+				<EsInputNumber
+					v-model:value="poolData.wallSegments"
+					size="small"
+					:min="3"
+					:max="512"
+					:decimal="0"
+					:show-button="false"
+					:disabled="rebuilding"
+					@update:value="scheduleQualityRebuild"
+				/>
+			</div>
+		</n-collapse-item>
+	</n-collapse>
+</template>
+
+<style scoped lang="less"></style>
diff --git a/packages/editor/src/views/editor/layouts/sidebar/uipanel/Sidebar.UIPanel.Block.vue b/packages/editor/src/views/editor/layouts/sidebar/uipanel/Sidebar.UIPanel.Block.vue
new file mode 100644
index 0000000..b5acb3a
--- /dev/null
+++ b/packages/editor/src/views/editor/layouts/sidebar/uipanel/Sidebar.UIPanel.Block.vue
@@ -0,0 +1,342 @@
+<script setup lang="ts">
+	import { computed, ref, toRefs } from "vue";
+	import { t } from "@/language";
+	import EsInputNumber from "@/components/es/EsInputNumber.vue";
+
+	type UIPanelStateMap = Record<string, Record<string, any>>;
+
+	const props = defineProps<{
+		formData: { props: Record<string, any>; states: UIPanelStateMap };
+		updateProps: (patch: Record<string, any>) => void;
+		updateStateProps: (key: string, patch: Record<string, any>) => void;
+		isStateEnabled: (key: string) => boolean;
+		toggleState: (key: string, enabled: boolean) => void;
+	}>();
+
+	const { formData } = toRefs(props);
+	const backgroundImageInput = ref<HTMLInputElement | null>(null);
+
+	const overflowHidden = computed({
+		get: () => formData.value.props.overflow === "hidden",
+		set: (value: boolean) => {
+			formData.value.props.overflow = value ? "hidden" : "visible";
+			props.updateProps({ overflow: formData.value.props.overflow });
+		},
+	});
+
+	const flexOptions = computed(() => [
+		{ label: t("layout.sider.uipanel.Row"), value: "row" },
+		{ label: t("layout.sider.uipanel.Row reverse"), value: "row-reverse" },
+		{ label: t("layout.sider.uipanel.Column"), value: "column" },
+		{ label: t("layout.sider.uipanel.Column reverse"), value: "column-reverse" },
+	]);
+
+	const justifyOptions = computed(() => [
+		{ label: t("layout.sider.uipanel.Start"), value: "start" },
+		{ label: t("layout.sider.uipanel.Center"), value: "center" },
+		{ label: t("layout.sider.uipanel.End"), value: "end" },
+		{ label: t("layout.sider.uipanel['Space between']"), value: "space-between" },
+		{ label: t("layout.sider.uipanel['Space around']"), value: "space-around" },
+		{ label: t("layout.sider.uipanel['Space evenly']"), value: "space-evenly" },
+	]);
+
+	const alignOptions = computed(() => [
+		{ label: t("layout.sider.uipanel.Start"), value: "start" },
+		{ label: t("layout.sider.uipanel.Center"), value: "center" },
+		{ label: t("layout.sider.uipanel.End"), value: "end" },
+		{ label: t("layout.sider.uipanel.Stretch"), value: "stretch" },
+	]);
+
+	const backgroundSizeOptions = computed(() => [
+		{ label: t("layout.sider.uipanel.Cover"), value: "cover" },
+		{ label: t("layout.sider.uipanel.Contain"), value: "contain" },
+		{ label: t("layout.sider.uipanel.Stretch"), value: "stretch" },
+	]);
+
+	function handleBackgroundImageUrl(value: string) {
+		formData.value.props.backgroundImage = value;
+		props.updateProps({ backgroundImage: value });
+	}
+
+	function openBackgroundImagePicker() {
+		backgroundImageInput.value?.click();
+	}
+
+	function handleBackgroundImageFile(event: Event) {
+		const input = event.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (!file) return;
+
+		const maxSizeMb = 3;
+		if (file.size / (1024 * 1024) > maxSizeMb) {
+			console.log(file.size / (1024 * 1024));
+			const message = t("layout.sider.uipanel['Image size must be <= {size}MB']").replace("{size}", String(maxSizeMb));
+			window.$message?.warning(message);
+			input.value = "";
+			return;
+		}
+
+		const reader = new FileReader();
+		reader.onload = () => {
+			if (typeof reader.result !== "string") return;
+			formData.value.props.backgroundImage = reader.result;
+			props.updateProps({ backgroundImage: reader.result });
+		};
+		reader.readAsDataURL(file);
+		input.value = "";
+	}
+</script>
+
+<template>
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.scene.Width") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.width"
+			size="small"
+			:decimal="2"
+			:show-button="false"
+			@change="props.updateProps({ width: formData.props.width })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.scene.Height") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.height"
+			size="small"
+			:decimal="2"
+			:show-button="false"
+			@change="props.updateProps({ height: formData.props.height })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Padding") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.padding"
+			size="small"
+			:decimal="2"
+			:show-button="false"
+			@change="props.updateProps({ padding: formData.props.padding })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Margin") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.margin"
+			size="small"
+			:decimal="2"
+			:show-button="false"
+			@change="props.updateProps({ margin: formData.props.margin })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Offset") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.offset"
+			size="small"
+			:decimal="3"
+			:show-button="false"
+			@change="props.updateProps({ offset: formData.props.offset })"
+		/>
+	</div>
+
+	<n-divider class="!my-2" />
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Background color']") }}</span>
+		<n-color-picker
+			v-model:value="formData.props.backgroundColor"
+			:show-alpha="false"
+			size="small"
+			@update:value="props.updateProps({ backgroundColor: formData.props.backgroundColor })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Background opacity']") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.backgroundOpacity"
+			size="small"
+			:min="0"
+			:max="1"
+			:decimal="2"
+			:show-button="false"
+			@change="props.updateProps({ backgroundOpacity: formData.props.backgroundOpacity })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Background image URL']") }}</span>
+		<n-input v-model:value="formData.props.backgroundImage" size="small" @update:value="handleBackgroundImageUrl" />
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Select local image']") }}</span>
+		<div class="uipanel-bg-image">
+			<n-button size="small" @click="openBackgroundImagePicker">
+				{{ t("layout.sider.uipanel['Select local image']") }}
+			</n-button>
+			<input ref="backgroundImageInput" class="uipanel-bg-image-input" type="file" accept="image/*" @change="handleBackgroundImageFile" />
+		</div>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Background size']") }}</span>
+		<n-select
+			v-model:value="formData.props.backgroundSize"
+			size="small"
+			:options="backgroundSizeOptions"
+			@update:value="props.updateProps({ backgroundSize: formData.props.backgroundSize })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Border radius']") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.borderRadius"
+			size="small"
+			:min="0"
+			:decimal="3"
+			:show-button="false"
+			@change="props.updateProps({ borderRadius: formData.props.borderRadius })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Border width']") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.borderWidth"
+			size="small"
+			:min="0"
+			:decimal="3"
+			:show-button="false"
+			@change="props.updateProps({ borderWidth: formData.props.borderWidth })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Border color']") }}</span>
+		<n-color-picker
+			v-model:value="formData.props.borderColor"
+			:show-alpha="false"
+			size="small"
+			@update:value="props.updateProps({ borderColor: formData.props.borderColor })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Hidden overflow']") }}</span>
+		<n-switch v-model:value="overflowHidden" size="small" />
+	</div>
+
+	<n-divider class="!my-2" />
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Flex direction']") }}</span>
+		<n-select
+			v-model:value="formData.props.flexDirection"
+			size="small"
+			:options="flexOptions"
+			@update:value="props.updateProps({ flexDirection: formData.props.flexDirection })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Justify content']") }}</span>
+		<n-select
+			v-model:value="formData.props.justifyContent"
+			size="small"
+			:options="justifyOptions"
+			@update:value="props.updateProps({ justifyContent: formData.props.justifyContent })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Align items']") }}</span>
+		<n-select
+			v-model:value="formData.props.alignItems"
+			size="small"
+			:options="alignOptions"
+			@update:value="props.updateProps({ alignItems: formData.props.alignItems })"
+		/>
+	</div>
+
+	<n-divider class="!my-2" />
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.States") }}</span>
+		<div />
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Hover") }}</span>
+		<n-switch size="small" :value="props.isStateEnabled('hover')" @update:value="(value: boolean) => props.toggleState('hover', value)" />
+	</div>
+
+	<template v-if="props.isStateEnabled('hover')">
+		<div class="sidebar-config-item">
+			<span>{{ t("layout.sider.uipanel['Hover background']") }}</span>
+			<n-color-picker
+				v-model:value="formData.states.hover.backgroundColor"
+				:show-alpha="false"
+				size="small"
+				@update:value="props.updateStateProps('hover', { backgroundColor: formData.states.hover.backgroundColor })"
+			/>
+		</div>
+		<div class="sidebar-config-item">
+			<span>{{ t("layout.sider.uipanel['Hover opacity']") }}</span>
+			<EsInputNumber
+				v-model:value="formData.states.hover.backgroundOpacity"
+				size="small"
+				:min="0"
+				:max="1"
+				:decimal="2"
+				:show-button="false"
+				@change="props.updateStateProps('hover', { backgroundOpacity: formData.states.hover.backgroundOpacity })"
+			/>
+		</div>
+	</template>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Active") }}</span>
+		<n-switch size="small" :value="props.isStateEnabled('active')" @update:value="(value: boolean) => props.toggleState('active', value)" />
+	</div>
+
+	<template v-if="props.isStateEnabled('active')">
+		<div class="sidebar-config-item">
+			<span>{{ t("layout.sider.uipanel['Active background']") }}</span>
+			<n-color-picker
+				v-model:value="formData.states.active.backgroundColor"
+				:show-alpha="false"
+				size="small"
+				@update:value="props.updateStateProps('active', { backgroundColor: formData.states.active.backgroundColor })"
+			/>
+		</div>
+		<div class="sidebar-config-item">
+			<span>{{ t("layout.sider.uipanel['Active opacity']") }}</span>
+			<EsInputNumber
+				v-model:value="formData.states.active.backgroundOpacity"
+				size="small"
+				:min="0"
+				:max="1"
+				:decimal="2"
+				:show-button="false"
+				@change="props.updateStateProps('active', { backgroundOpacity: formData.states.active.backgroundOpacity })"
+			/>
+		</div>
+	</template>
+</template>
+
+<style scoped lang="less">
+	.uipanel-bg-image {
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.uipanel-bg-image-input {
+		display: none;
+	}
+</style>
diff --git a/packages/editor/src/views/editor/layouts/sidebar/uipanel/Sidebar.UIPanel.Text.vue b/packages/editor/src/views/editor/layouts/sidebar/uipanel/Sidebar.UIPanel.Text.vue
new file mode 100644
index 0000000..8096231
--- /dev/null
+++ b/packages/editor/src/views/editor/layouts/sidebar/uipanel/Sidebar.UIPanel.Text.vue
@@ -0,0 +1,284 @@
+<script setup lang="ts">
+	import { computed, toRefs } from "vue";
+	import { t } from "@/language";
+	import EsInputNumber from "@/components/es/EsInputNumber.vue";
+
+	type UIPanelStateMap = Record<string, Record<string, any>>;
+
+	const props = defineProps<{
+		formData: { props: Record<string, any>; states: UIPanelStateMap };
+		updateProps: (patch: Record<string, any>) => void;
+		updateStateProps: (key: string, patch: Record<string, any>) => void;
+		isStateEnabled: (key: string) => boolean;
+		toggleState: (key: string, enabled: boolean) => void;
+	}>();
+
+	const { formData } = toRefs(props);
+
+	const fontSupersampling = computed({
+		get: () => formData.value.props.fontSmooth !== "none",
+		set: (value: boolean) => {
+			formData.value.props.fontSmooth = value ? "antialiased" : "none";
+			props.updateProps({ fontSmooth: formData.value.props.fontSmooth });
+		},
+	});
+
+	// 宽度是否使用 auto
+	const widthIsAuto = computed({
+		get: () => formData.value.props.width === "auto",
+		set: (value: boolean) => {
+			formData.value.props.width = value ? "auto" : 0.5;
+			props.updateProps({ width: formData.value.props.width });
+		},
+	});
+
+	// 高度是否使用 auto
+	const heightIsAuto = computed({
+		get: () => formData.value.props.height === "auto",
+		set: (value: boolean) => {
+			formData.value.props.height = value ? "auto" : 0.1;
+			props.updateProps({ height: formData.value.props.height });
+		},
+	});
+
+	// 数值化的宽度（用于绑定数字输入）
+	const numericWidth = computed({
+		get: () => (typeof formData.value.props.width === "number" ? formData.value.props.width : 0),
+		set: (value: number) => {
+			formData.value.props.width = value;
+			props.updateProps({ width: value });
+		},
+	});
+
+	// 数值化的高度（用于绑定数字输入）
+	const numericHeight = computed({
+		get: () => (typeof formData.value.props.height === "number" ? formData.value.props.height : 0),
+		set: (value: number) => {
+			formData.value.props.height = value;
+			props.updateProps({ height: value });
+		},
+	});
+
+	const textAlignOptions = computed(() => [
+		{ label: t("layout.sider.uipanel.Left"), value: "left" },
+		{ label: t("layout.sider.uipanel.Center"), value: "center" },
+		{ label: t("layout.sider.uipanel.Right"), value: "right" }
+	]);
+
+	const whiteSpaceOptions = [
+		{ label: "normal", value: "normal" },
+		{ label: "pre-line", value: "pre-line" },
+		{ label: "pre-wrap", value: "pre-wrap" },
+		{ label: "pre", value: "pre" },
+		{ label: "nowrap", value: "nowrap" },
+	];
+
+	function handleTextContent(value: string) {
+		formData.value.props.textContent = value;
+		props.updateProps({ textContent: value });
+	}
+</script>
+
+<template>
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Text") }}</span>
+		<n-input v-model:value="formData.props.textContent" type="textarea" size="small" :autosize="{ minRows: 1, maxRows: 3 }" @update:value="handleTextContent" />
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.scene.Width") }}</span>
+		<div class="uipanel-auto-size">
+			<n-switch v-model:value="widthIsAuto" size="small" />
+			<span class="uipanel-auto-label">auto</span>
+			<EsInputNumber v-if="!widthIsAuto" v-model:value="numericWidth" size="small" :min="0" :decimal="3" :show-button="false" @change="numericWidth = $event" />
+		</div>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.scene.Height") }}</span>
+		<div class="uipanel-auto-size">
+			<n-switch v-model:value="heightIsAuto" size="small" />
+			<span class="uipanel-auto-label">auto</span>
+			<EsInputNumber
+				v-if="!heightIsAuto"
+				v-model:value="numericHeight"
+				size="small"
+				:min="0"
+				:decimal="3"
+				:show-button="false"
+				@change="numericHeight = $event"
+			/>
+		</div>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Font size']") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.fontSize"
+			size="small"
+			:decimal="3"
+			:show-button="false"
+			@change="props.updateProps({ fontSize: formData.props.fontSize })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Color") }}</span>
+		<n-color-picker v-model:value="formData.props.color" :show-alpha="false" size="small" @update:value="props.updateProps({ color: formData.props.color })" />
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Font opacity']") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.fontOpacity"
+			size="small"
+			:min="0"
+			:max="1"
+			:decimal="2"
+			:show-button="false"
+			@change="props.updateProps({ fontOpacity: formData.props.fontOpacity })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Font supersampling']") }}</span>
+		<n-switch v-model:value="fontSupersampling" size="small" />
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Letter spacing']") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.letterSpacing"
+			size="small"
+			:decimal="3"
+			:show-button="false"
+			@change="props.updateProps({ letterSpacing: formData.props.letterSpacing })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Line height']") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.lineHeight"
+			size="small"
+			:decimal="2"
+			:show-button="false"
+			@change="props.updateProps({ lineHeight: formData.props.lineHeight })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Padding") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.padding"
+			size="small"
+			:decimal="3"
+			:show-button="false"
+			@change="props.updateProps({ padding: formData.props.padding })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Margin") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.margin"
+			size="small"
+			:decimal="3"
+			:show-button="false"
+			@change="props.updateProps({ margin: formData.props.margin })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Offset") }}</span>
+		<EsInputNumber
+			v-model:value="formData.props.offset"
+			size="small"
+			:decimal="3"
+			:show-button="false"
+			@change="props.updateProps({ offset: formData.props.offset })"
+		/>
+	</div>
+
+	<n-divider class="!my-2" />
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Text align']") }}</span>
+		<n-select
+			v-model:value="formData.props.textAlign"
+			size="small"
+			:options="textAlignOptions"
+			@update:value="props.updateProps({ textAlign: formData.props.textAlign })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['White space']") }}</span>
+		<n-select
+			v-model:value="formData.props.whiteSpace"
+			size="small"
+			:options="whiteSpaceOptions"
+			@update:value="props.updateProps({ whiteSpace: formData.props.whiteSpace })"
+		/>
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel['Break on']") }}</span>
+		<n-input v-model:value="formData.props.breakOn" size="small" @update:value="(value: string) => props.updateProps({ breakOn: value })" />
+	</div>
+
+	<n-divider class="!my-2" />
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.States") }}</span>
+		<div />
+	</div>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Hover") }}</span>
+		<n-switch size="small" :value="props.isStateEnabled('hover')" @update:value="(value: boolean) => props.toggleState('hover', value)" />
+	</div>
+
+	<template v-if="props.isStateEnabled('hover')">
+		<div class="sidebar-config-item">
+			<span>{{ t("layout.sider.uipanel['Hover color']") }}</span>
+			<n-color-picker
+				v-model:value="formData.states.hover.color"
+				:show-alpha="false"
+				size="small"
+				@update:value="props.updateStateProps('hover', { color: formData.states.hover.color })"
+			/>
+		</div>
+	</template>
+
+	<div class="sidebar-config-item">
+		<span>{{ t("layout.sider.uipanel.Active") }}</span>
+		<n-switch size="small" :value="props.isStateEnabled('active')" @update:value="(value: boolean) => props.toggleState('active', value)" />
+	</div>
+
+	<template v-if="props.isStateEnabled('active')">
+		<div class="sidebar-config-item">
+			<span>{{ t("layout.sider.uipanel['Active color']") }}</span>
+			<n-color-picker
+				v-model:value="formData.states.active.color"
+				:show-alpha="false"
+				size="small"
+				@update:value="props.updateStateProps('active', { color: formData.states.active.color })"
+			/>
+		</div>
+	</template>
+</template>
+
+<style scoped lang="less">
+	.uipanel-auto-size {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.uipanel-auto-label {
+		font-size: 12px;
+		opacity: 0.7;
+		min-width: 30px;
+	}
+</style>