fix: 使用 ResizeObserver 监控表格宽度变化，优化侧边栏显示 (#38)

* 优化表格组件，调整选中单元格样式及过渡效果，修复滚动事件处理逻辑

* 调整表格组件样式，修复单元格过渡效果及边距，优化表格边框样式

* 调整表格组件样式，修复单元格过渡效果及边距，优化表格边框样式

* 优化表格组件，调整行高计算逻辑，修复边框样式及表格布局

* 移除调试日志，优化滚动事件处理逻辑

* 调整表格组件行高计算，修复最后一行单元格边框样式及圆角效果

* 调整表格组件样式，优化行高和宽度计算，修复边框样式及圆角效果

* 优化表格组件样式，添加选中状态下最后一行单元格右下角边框圆角效果

* 调整表格组件样式，统一单位为em，修复边框圆角效果

* 优化表格组件样式，修复边框样式及圆角效果

* 调整表格侧边样式，修复左侧位置偏移，优化过渡效果

* feat: 添加删除和添加按钮的悬停效果，优化表格组件交互体验

* feat: 添加 React 导入以支持 Markdown 编辑器组件

* feat: 添加删除确认功能，并在删除时清除状态

* feat: 移除不必要的激活状态数组设置，优化删除操作逻辑

* feat: 更新删除功能，支持传递索引参数以确定删除的行或列

* feat: 添加获取选中单元格索引的函数，简化删除操作逻辑

* fix: 使用 ResizeObserver 监控表格宽度变化，优化侧边栏显示

* fix: 将 useLayoutEffect 替换为 useEffect，优化表格宽度监控逻辑

src/MarkdownEditor/editor/elements/renderSideDiv.tsx

@@ -594,6 +594,23 @@ export function ColSideDiv(props: ColSideDivProps) {
       };
     }
   }, [tableDom]);
+  const [tableWidth, setTableWidth] = useState(0);
+
+  useEffect(() => {
+    const target = tableRef.current;
+    if (!target) return;
+
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        const newWidth = entry.contentRect.width;
+        setTableWidth(newWidth);
+      }
+    });
+
+    observer.observe(target);
+    return () => observer.unobserve(target);
+  }, [tableRef]);
 
   return (
     <div
@@ -602,6 +619,8 @@ export function ColSideDiv(props: ColSideDivProps) {
       style={{
         position: 'absolute',
         display: 'flex',
+        width: tableWidth + 0.5,
+        overflow: 'hidden',
         height: '1rem',
         zIndex: 100,
         transform: `translateX(${scrollOffset / 9999}px)`,