refactor(table): 表格复制按钮复用 CopyButton，下载改为 markdown+BOM

- MarkdownTable 导出为公共组件
- 复制按钮直接复用 CopyButton，行为与 iframe 复制一致
- 表格数据通过 tableRef 在 render 阶段同步计算
- useLayoutEffect 确保首次渲染后即可获取正确数据
- 下载按钮改为 markdown 格式 (.md)，UTF-8 with BOM
- 移除废弃的 escapeCsvCell / toCsvTable

frontend/src/components/workspace/messages/markdown-content.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { CheckIcon, CopyIcon, DownloadIcon } from "lucide-react";
-import { useCallback, useMemo, useState, type MouseEvent } from "react";
+import { DownloadIcon } from "lucide-react";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type {
   AnchorHTMLAttributes,
   ComponentPropsWithoutRef,
@@ -14,7 +14,9 @@ import {
 } from "@/components/ai-elements/message";
 import { useI18n } from "@/core/i18n/hooks";
 import { streamdownPlugins } from "@/core/streamdown";
-import { cn, copyToClipboard } from "@/lib/utils";
+import { CopyButton } from "@/components/workspace/copy-button";
+import { Tooltip } from "@/components/workspace/tooltip";
+import { cn } from "@/lib/utils";
 
 import { CitationLink } from "../citations/citation-link";
 
@@ -56,21 +58,9 @@ function toMarkdownTable(data: TableData): string {
   return [headerLine, dividerLine, ...rowLines].join("\n");
 }
 
-function escapeCsvCell(value: string): string {
-  if (!/[",\n\r]/.test(value)) return value;
-  return `"${value.replaceAll('"', '""')}"`;
-}
-
-function toCsvTable(data: TableData): string {
-  if (data.headers.length === 0) return "";
-  return [data.headers, ...data.rows]
-    .map((row) => row.map(escapeCsvCell).join(","))
-    .join("\n");
-}
-
-function downloadCsvFile(content: string, filename: string) {
+function downloadMarkdownFile(content: string, filename: string) {
   const blob = new Blob(["\uFEFF", content], {
-    type: "text/csv;charset=utf-8",
+    type: "text/markdown;charset=utf-8",
   });
   const url = URL.createObjectURL(blob);
   const anchor = document.createElement("a");
@@ -80,58 +70,43 @@ function downloadCsvFile(content: string, filename: string) {
   URL.revokeObjectURL(url);
 }
 
-function MarkdownTable({
+export function MarkdownTable({
   className,
   children,
-  copyLabel,
+  copyLabel: _copyLabel,
   downloadLabel,
   ...props
 }: ComponentPropsWithoutRef<"table"> & {
   copyLabel: string;
   downloadLabel: string;
 }) {
-  const [copied, setCopied] = useState(false);
+  const tableRef = useRef<HTMLTableElement>(null);
+  const [, forceUpdate] = useState(0);
 
-  const getTableData = useCallback((event: MouseEvent<HTMLButtonElement>) => {
-    const wrapper = event.currentTarget.closest(
-      '[data-streamdown="table-wrapper"]',
-    );
-    const table = wrapper?.querySelector("table");
-    if (!(table instanceof HTMLTableElement)) return null;
-    return parseTableData(table);
+  // 首次 mount 后 tableRef 才被赋值，用 useLayoutEffect 在 paint 前强制刷新
+  useLayoutEffect(() => {
+    forceUpdate((n) => n + 1);
   }, []);
 
-  const handleCopy = useCallback(
-    async (event: MouseEvent<HTMLButtonElement>) => {
-      const data = getTableData(event);
-      if (!data) return;
+  // 在 render 阶段直接从 DOM ref 计算，不依赖 effect 异步更新
+  // tableRef 在上一次渲染的 commit 阶段已设置，本次渲染可用
+  const clipboardData = (() => {
+    const table = tableRef.current;
+    if (!table) return "";
+    const data = parseTableData(table);
+    if (!data) return "";
+    return toMarkdownTable(data);
+  })();
 
-      const markdown = toMarkdownTable(data);
-      if (!markdown) return;
-
-      try {
-        await copyToClipboard(markdown);
-        setCopied(true);
-        window.setTimeout(() => setCopied(false), 2000);
-      } catch {
-        // no-op
-      }
-    },
-    [getTableData],
-  );
-
-  const handleDownload = useCallback(
-    (event: MouseEvent<HTMLButtonElement>) => {
-      const data = getTableData(event);
-      if (!data) return;
-
-      const csv = toCsvTable(data);
-      if (!csv) return;
-
-      downloadCsvFile(csv, "table.csv");
-    },
-    [getTableData],
-  );
+  const handleDownload = useCallback(() => {
+    const table = tableRef.current;
+    if (!table) return;
+    const data = parseTableData(table);
+    if (!data) return;
+    const markdown = toMarkdownTable(data);
+    if (!markdown) return;
+    downloadMarkdownFile(markdown, "table.md");
+  }, []);
 
   return (
     <div
@@ -139,25 +114,20 @@ function MarkdownTable({
       data-streamdown="table-wrapper"
     >
       <div className="flex items-center justify-end gap-1">
-        <button
-          className="text-muted-foreground hover:text-foreground cursor-pointer p-1 transition-all"
-          onClick={handleCopy}
-          title={copyLabel}
-          type="button"
-        >
-          {copied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
-        </button>
-        <button
-          className="text-muted-foreground hover:text-foreground cursor-pointer p-1 transition-all"
-          onClick={handleDownload}
-          title={downloadLabel}
-          type="button"
-        >
-          <DownloadIcon size={14} />
-        </button>
+        <CopyButton className="text-muted-foreground hover:bg-transparent hover:text-foreground cursor-pointer p-1 transition-all" clipboardData={clipboardData} />
+        <Tooltip content={downloadLabel}>
+          <button
+            className="h-[32px] w-[32px] text-muted-foreground hover:text-foreground cursor-pointer p-1 transition-all"
+            onClick={handleDownload}
+            type="button"
+          >
+            <DownloadIcon size={16} />
+          </button>
+        </Tooltip>
       </div>
       <div className="overflow-x-auto">
         <table
+          ref={tableRef}
           className={cn(
             "border-border w-full border-collapse border",
             className,