feat(3d): refine scene controls and camera views

Keep the control panel geometry stable when toggling building context, and use accessible switch controls to prevent focus-driven movement. Add browser coverage for camera framing, opacity, responsive layout, and the default 6x pipe scale.

src/components/threeDimensional/ThreeDimensionalControls.test.tsx

@@ -10,7 +10,7 @@ const state: SceneRuntimeState = {
   roofVisible: true,
   displayMode: "global",
   style: {
-    scale: 8,
+    scale: 6,
     mode: "uniform",
     color: "#098ed0",
     missingColor: "#89949d",
@@ -30,6 +30,7 @@ const state: SceneRuntimeState = {
   appearance: {
     preset: "day",
     exposure: 0.95,
+    contextOpacity: 0.4,
     shadows: true,
     effects: true,
     quality: "standard",
@@ -49,6 +50,48 @@ const state: SceneRuntimeState = {
 };
 
 describe("ThreeDimensionalControls", () => {
+  it("toggles the active toolbar panel and opens a different panel", () => {
+    const onOpenChange = jest.fn();
+    const onTabChange = jest.fn();
+    const { rerender } = render(
+      <ThreeDimensionalControls
+        open
+        activeTab="scene"
+        ready
+        state={state}
+        selection={null}
+        timelineOpen
+        onOpenChange={onOpenChange}
+        onTimelineOpenChange={jest.fn()}
+        onTabChange={onTabChange}
+        onCommand={jest.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "场景与视角" }));
+    expect(onOpenChange).toHaveBeenLastCalledWith(false);
+    expect(onTabChange).not.toHaveBeenCalled();
+
+    rerender(
+      <ThreeDimensionalControls
+        open={false}
+        activeTab="scene"
+        ready
+        state={state}
+        selection={null}
+        timelineOpen
+        onOpenChange={onOpenChange}
+        onTimelineOpenChange={jest.fn()}
+        onTabChange={onTabChange}
+        onCommand={jest.fn()}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "管网样式" }));
+    expect(onTabChange).toHaveBeenLastCalledWith("style");
+    expect(onOpenChange).toHaveBeenLastCalledWith(true);
+  });
+
   it("sends typed scene commands from platform controls", () => {
     const onCommand = jest.fn();
     const onTimelineOpenChange = jest.fn();
@@ -69,10 +112,49 @@ describe("ThreeDimensionalControls", () => {
 
     fireEvent.click(screen.getByRole("button", { name: "站房精细版" }));
     expect(onCommand).toHaveBeenCalledWith({ name: "set-mode", mode: "detail" });
+    fireEvent.change(screen.getByRole("slider", { name: "建筑背景透明度 60%" }), {
+      target: { value: "0.35" },
+    });
+    expect(onCommand).toHaveBeenCalledWith({
+      name: "set-appearance",
+      patch: { contextOpacity: 0.65 },
+    });
+    fireEvent.click(screen.getByRole("switch", { name: "建筑背景" }));
+    expect(onCommand).toHaveBeenCalledWith({ name: "toggle-context" });
     fireEvent.click(screen.getByRole("button", { name: "时间轴" }));
     expect(onTimelineOpenChange).toHaveBeenCalledWith(false);
   });
 
+  it("uses the glass listbox instead of a native select", () => {
+    const onCommand = jest.fn();
+    render(
+      <ThreeDimensionalControls
+        open
+        activeTab="scene"
+        ready
+        state={state}
+        selection={null}
+        timelineOpen
+        onOpenChange={jest.fn()}
+        onTimelineOpenChange={jest.fn()}
+        onTabChange={jest.fn()}
+        onCommand={onCommand}
+      />,
+    );
+
+    const displayMode = screen.getByRole("combobox", {
+      name: "管网展示比例",
+    });
+    expect(displayMode.tagName).not.toBe("SELECT");
+
+    fireEvent.mouseDown(displayMode);
+    fireEvent.click(screen.getByRole("option", { name: "泵房协调比例" }));
+    expect(onCommand).toHaveBeenCalledWith({
+      name: "set-display-mode",
+      mode: "coordinated",
+    });
+  });
+
   it("shows selected asset fields and linked assets in the property tab", () => {
     const onCommand = jest.fn();
     render(