From 4133a5244a2d0e263ee017bf7f9f674e25b83ded Mon Sep 17 00:00:00 2001
From: que01 <que01@foxmail.com>
Date: Wed, 26 Aug 2026 15:09:27 +0800
Subject: [PATCH] fix: restore scene preview styles

---
 .../tasks/08-26-scene-preview-fix/check.jsonl |  1 +
 .../08-26-scene-preview-fix/implement.jsonl   |  1 +
 .trellis/tasks/08-26-scene-preview-fix/prd.md | 15 +++++++++++
 .../tasks/08-26-scene-preview-fix/task.json   | 26 +++++++++++++++++++
 workbench/client/src/components/MapCanvas.tsx |  4 ++-
 5 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 .trellis/tasks/08-26-scene-preview-fix/check.jsonl
 create mode 100644 .trellis/tasks/08-26-scene-preview-fix/implement.jsonl
 create mode 100644 .trellis/tasks/08-26-scene-preview-fix/prd.md
 create mode 100644 .trellis/tasks/08-26-scene-preview-fix/task.json

diff --git a/.trellis/tasks/08-26-scene-preview-fix/check.jsonl b/.trellis/tasks/08-26-scene-preview-fix/check.jsonl
new file mode 100644
index 0000000..9dd3234
--- /dev/null
+++ b/.trellis/tasks/08-26-scene-preview-fix/check.jsonl
@@ -0,0 +1 @@
+{"_example": "Fill with {\"file\": \"<path>\", \"reason\": \"<why>\"}. Put spec/research files only — no code paths. Run `python3 .trellis/scripts/get_context.py --mode packages` to list available specs. Delete this line once real entries are added."}
diff --git a/.trellis/tasks/08-26-scene-preview-fix/implement.jsonl b/.trellis/tasks/08-26-scene-preview-fix/implement.jsonl
new file mode 100644
index 0000000..9dd3234
--- /dev/null
+++ b/.trellis/tasks/08-26-scene-preview-fix/implement.jsonl
@@ -0,0 +1 @@
+{"_example": "Fill with {\"file\": \"<path>\", \"reason\": \"<why>\"}. Put spec/research files only — no code paths. Run `python3 .trellis/scripts/get_context.py --mode packages` to list available specs. Delete this line once real entries are added."}
diff --git a/.trellis/tasks/08-26-scene-preview-fix/prd.md b/.trellis/tasks/08-26-scene-preview-fix/prd.md
new file mode 100644
index 0000000..310715a
--- /dev/null
+++ b/.trellis/tasks/08-26-scene-preview-fix/prd.md
@@ -0,0 +1,15 @@
+# 修复场景效果预览
+
+## Goal
+
+恢复 React 工作台的场景效果：开启后道路面显示无边线的深灰沥青效果，步行带显示灰色填充；关闭后回到编辑样式。
+
+## Cause
+
+`MapCanvas` 只在挂载时创建 OpenLayers 图层，其 style callback 捕获了首次渲染的 `scene` 值，后续切换无法读取当前状态。
+
+## Acceptance Criteria
+
+- 切换场景效果后，原生道路面和步行带立即切换到对应场景样式。
+- 切换不重建 `Map`、图层或 feature source。
+- `npm run format:check`、`npm run test:client` 和 `npm run build` 通过。
diff --git a/.trellis/tasks/08-26-scene-preview-fix/task.json b/.trellis/tasks/08-26-scene-preview-fix/task.json
new file mode 100644
index 0000000..407fb35
--- /dev/null
+++ b/.trellis/tasks/08-26-scene-preview-fix/task.json
@@ -0,0 +1,26 @@
+{
+  "id": "scene-preview-fix",
+  "name": "scene-preview-fix",
+  "title": "修复场景效果预览",
+  "description": "修复 React OpenLayers 图层样式捕获初始 scene 状态导致沥青场景效果未生效的问题",
+  "status": "in_progress",
+  "dev_type": null,
+  "scope": null,
+  "package": null,
+  "priority": "P2",
+  "creator": "dingkang",
+  "assignee": "dingkang",
+  "createdAt": "2026-08-26",
+  "completedAt": null,
+  "branch": null,
+  "base_branch": "main",
+  "worktree_path": null,
+  "commit": null,
+  "pr_url": null,
+  "subtasks": [],
+  "children": [],
+  "parent": null,
+  "relatedFiles": [],
+  "notes": "",
+  "meta": {}
+}
\ No newline at end of file
diff --git a/workbench/client/src/components/MapCanvas.tsx b/workbench/client/src/components/MapCanvas.tsx
index 5741b7b..e6db799 100644
--- a/workbench/client/src/components/MapCanvas.tsx
+++ b/workbench/client/src/components/MapCanvas.tsx
@@ -20,13 +20,15 @@ export function MapCanvas({ state, selected, visible, scene, onSelectRoad, onFea
   const layersRef = useRef<ReturnType<typeof createLayers> | null>(null);
   const selectedRef = useRef<Road | null>(selected);
   const stateRef = useRef(state);
+  const sceneRef = useRef(scene);
   selectedRef.current = selected;
   stateRef.current = state;
+  sceneRef.current = scene;
   useEffect(() => {
     if (!target.current) return;
     const layers = createLayers(
       () => selectedRef.current,
-      () => scene,
+      () => sceneRef.current,
     );
     layersRef.current = layers;
     const map = new Map({