fix: replace WidthProvider with ResizeObserver for grid layout

react-grid-layout v2 removed WidthProvider. Use ResizeObserver to
track container width and pass it directly to Responsive component.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/frameworks/components/layout/CenterCanvas.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useRef, useState, useEffect } from 'react';
+import { Responsive } from 'react-grid-layout';
 import { useAppSelector } from '@/adapters/state/redux/store';
 import { useLayout } from '@/frameworks/hooks/useLayout';
 import { ChartWrapper } from '@/frameworks/components/charts/ChartWrapper';
@@ -41,16 +42,19 @@ function DropZonePlaceholder() {
 export function CenterCanvas() {
   const charts = useAppSelector((s) => s.chart.charts);
   const { layouts, onLayoutChange } = useLayout();
-  const [GridLayout, setGridLayout] = useState<any>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(1200);
 
   useEffect(() => {
-    import('react-grid-layout').then((mod: any) => {
-      const WP = mod.WidthProvider || mod.default?.WidthProvider;
-      const Resp = mod.Responsive || mod.default?.Responsive;
-      if (WP && Resp) {
-        setGridLayout(() => WP(Resp));
+    if (!containerRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setWidth(entry.contentRect.width);
       }
     });
+    observer.observe(containerRef.current);
+    setWidth(containerRef.current.clientWidth);
+    return () => observer.disconnect();
   }, []);
 
   const gridLayouts = useMemo(() => {
@@ -79,29 +83,23 @@ export function CenterCanvas() {
     );
   }
 
-  if (!GridLayout) {
-    return <div style={{ padding: 16 }}>加载中...</div>;
-  }
-
   return (
-    <div style={{ padding: 16, minHeight: '100%' }}>
-      <GridLayout
+    <div ref={containerRef} style={{ padding: 16, minHeight: '100%' }}>
+      <Responsive
         className="layout"
+        width={width}
         layouts={{ lg: gridLayouts }}
         breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
         cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
         rowHeight={80}
-        onLayoutChange={(layout: any[]) => onLayoutChange(layout)}
-        isDraggable
-        isResizable
-        compactType="vertical"
+        onLayoutChange={(layout: any) => onLayoutChange([...layout])}
       >
         {charts.map((chart) => (
           <div key={chart.id}>
             <ChartWrapper chartId={chart.id} />
           </div>
         ))}
-      </GridLayout>
+      </Responsive>
     </div>
   );
 }