```feat(canvas): 添加图层预览功能

在画布组件中实现图层预览，支持通过新引入的'LayerPreview'组件展示不同图层的缩略图。修
复并优化了'canvas.tsx'中的图层导入问题，确保正确显示图层数据。

引入'LayerPreview'组件，用于根据当前图层类型渲染相应图形。目前支持矩形图层的预览，
其他图层类型将作为未知类型处理。组件支持指针事件处理和图层选择高亮功能。

调整'rectangle.tsx'中矩形图层组件的实现，增加对指针事件的支持，并应用阴影效果提升视
觉表现。

在'room.tsx'中更新了'layerIds'的类型定义，明确其为字符串数组类型，增强了类型安全性。
```

app/board/[boardId]/_components/canvas.tsx

@@ -26,6 +26,7 @@ import {
 import { Info } from "./info";
 import { Toolbar } from "./toolbar";
 import { Participants } from "./participants";
+import { LayerPreview } from "./layer-preview";
 import { CursorsPresence } from "./cursors-presence";
 import { pointerEventToCanvasEvent } from "@/lib/utils";
 
@@ -40,7 +41,7 @@ interface CanvasProps {
   boardId: string;
 }
 export const Canvas = ({ boardId }: CanvasProps) => {
-  const layerIds = useStorage((root) => root.layers);
+  const layerIds = useStorage((root) => root.layerIds);
 
 
   const [camera, setCamera] = useState<Camera>({ x: 0, y: 0 });
@@ -172,6 +173,13 @@ export const Canvas = ({ boardId }: CanvasProps) => {
         <g style={{
           transform: `tanslate(${camera.x}px, ${camera.y}px)`
         }}>
+          {layerIds?.map((layerId) => {
+            return <LayerPreview
+              key={layerId}
+              id={layerId}
+              onLayerPointerDown={() => { }}
+              selectionColor={"#000"} />;
+          })}
           <CursorsPresence />
         </g>
       </svg>

app/board/[boardId]/_components/layer-preview.tsx

@@ -0,0 +1,42 @@
+
+"use client";
+
+import { LayerType } from "@/types/canvas";
+import { useStorage } from "@liveblocks/react";
+import { memo } from "react";
+
+interface LayerPreviewProps {
+    id: string;
+    onLayerPointerDown: (
+        e: React.PointerEvent,
+        layerId: string
+    ) => void;
+    selectionColor?: string;
+}
+
+export const LayerPreview = memo(({
+    id,
+    onLayerPointerDown,
+    selectionColor,
+}: LayerPreviewProps) => {
+    const layer = useStorage((root) => root.layers.get(id));
+
+    if (!layer) {
+        return null;
+    }
+
+    switch (layer.type) {
+        case LayerType.Rectangle:
+            return (<div>Rectangle</div>);
+            break;
+        default:
+            console.warn("Unkown layer type");
+            return null;
+            break;
+    }
+
+
+
+});
+
+LayerPreview.displayName = "LayerPreview";

app/board/[boardId]/_components/rectangle.tsx

@@ -0,0 +1,41 @@
+
+
+import { RectangleLayer } from "@/types/canvas";
+
+interface RectangleProps {
+    id: string;
+    layer: RectangleLayer;
+    onPointerDown: (e: React.PointerEvent, id: string) => void;
+    selectionColor?: string;
+}
+
+export const Rectangle = ({
+    id,
+    layer,
+    onPointerDown,
+    selectionColor,
+}: RectangleProps) => {
+    console.log({
+        id,
+        layer
+    });
+
+    const { x, y, width, height, fill } = layer;
+
+
+    return <rect
+        className="drop-shadow-md"
+        onPointerDown={(e) => { onPointerDown(e, id); }}
+        style={{
+            transform: `${`translate(${x}px, ${y}px)`}`
+        }}
+        x={0}
+        y={0}
+        width={width}
+        height={height}
+        strokeWidth={1}
+        fill="#000"
+        stroke="transparent"
+    />;
+
+};

components/room.tsx

@@ -36,7 +36,7 @@ export const Room = ({ children, roomId, fallback }: RoomProps) => {
         }}
         initialStorage={{
           layers: new LiveMap<string, LiveObject<Layer>>(),
-          layerIds: new LiveList([])
+          layerIds: new LiveList<string[]>([])
         }}>
         {/* // there are some problem that the board should not be access by a non-privledged user
       // the ui canvas should in the loading status when such users trying to join a board room which not belong to them */}