From 4b7d8b7b9c40a4d24d8293c4e59b1610f79e9df7 Mon Sep 17 00:00:00 2001
From: qixinbo <qixinbo@gmail.com>
Date: Tue, 17 Mar 2026 11:47:30 +0800
Subject: [PATCH] dashboard opt

---
 .../components/InlineVisualizationCard.tsx    | 10 ++++
 .../src/components/VisualizationPanel.tsx     | 10 ++++
 frontend/src/pages/Dashboard.tsx              | 60 +++++++++++++++++--
 frontend/src/store/dashboardStore.ts          |  2 +-
 4 files changed, 77 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/InlineVisualizationCard.tsx b/frontend/src/components/InlineVisualizationCard.tsx
index 023ba22..0aad566 100644
--- a/frontend/src/components/InlineVisualizationCard.tsx
+++ b/frontend/src/components/InlineVisualizationCard.tsx
@@ -31,6 +31,16 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
   const columns = objectRows.length > 0 ? Object.keys(objectRows[0]) : [];
 
   const buildPendingChart = (): Omit<ChartConfig, 'layout'> => {
+    if (view === "table") {
+      return {
+        id: Date.now().toString(),
+        title: viz.chartSpec?.title || "Generated Analysis",
+        type: "table",
+        data: objectRows,
+        sql: viz.sql,
+        chartSpec: null,
+      };
+    }
     const mark = viz.chartSpec?.mark;
     const markType = typeof mark === "string" ? mark : mark?.type;
     const dashboardType = markType === "line" ? "line" : "bar";
diff --git a/frontend/src/components/VisualizationPanel.tsx b/frontend/src/components/VisualizationPanel.tsx
index edfa18e..8cac54d 100644
--- a/frontend/src/components/VisualizationPanel.tsx
+++ b/frontend/src/components/VisualizationPanel.tsx
@@ -20,6 +20,16 @@ export function VisualizationPanel() {
 
   const buildPendingChart = (): Omit<ChartConfig, 'layout'> | null => {
     if (!currentData || !currentSQL) return null;
+    if (view === "table") {
+      return {
+        id: Date.now().toString(),
+        title: currentChartSpec?.title || 'Generated Analysis',
+        type: "table",
+        data: currentData,
+        sql: currentSQL,
+        chartSpec: null,
+      };
+    }
     const mark = currentChartSpec?.mark;
     const markType = typeof mark === "string" ? mark : mark?.type;
     const dashboardType = markType === "line" ? "line" : "bar";
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 55bb375..043c357 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -4,6 +4,8 @@ import { useDashboardStore } from '../store/dashboardStore';
 import { useProjectStore } from '../store/projectStore';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { X } from "lucide-react";
 import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, LineChart, Line } from 'recharts';
 import { VegaChart } from "@/components/VegaChart";
@@ -11,6 +13,7 @@ import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 
 const CHART_COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4'];
+const TABLE_PREVIEW_LIMIT = 20;
 
 function isNumericValue(value: unknown) {
   if (typeof value === 'number') return Number.isFinite(value);
@@ -103,13 +106,22 @@ export function Dashboard() {
         isDraggable
         isResizable
       >
-        {charts.map((chart) => (
+        {charts.map((chart) => {
+          const rows = chart.data as Record<string, unknown>[];
+          const columns = Object.keys(rows[0] || {});
+          const previewRows = chart.type === "table" ? rows.slice(0, TABLE_PREVIEW_LIMIT) : rows;
+          const isTableTruncated = chart.type === "table" && rows.length > TABLE_PREVIEW_LIMIT;
+          return (
           <div key={chart.id} className="relative group">
             <Card className="h-full flex flex-col shadow-sm border-muted">
               <CardHeader className="pb-2 shrink-0 flex flex-row items-center justify-between space-y-0">
                 <div>
                   <CardTitle className="text-base">{chart.title}</CardTitle>
-                  <CardDescription className="text-xs">{chart.type.toUpperCase()} Chart</CardDescription>
+                  <CardDescription className="text-xs">
+                    {chart.type === "table"
+                      ? `TABLE · ${rows.length} 行 · ${columns.length} 列`
+                      : `${chart.type.toUpperCase()} Chart`}
+                  </CardDescription>
                 </div>
                 <Button 
                   variant="ghost" 
@@ -122,7 +134,47 @@ export function Dashboard() {
               </CardHeader>
               <CardContent className="flex-1 min-h-0 p-2">
                 {(() => {
-                  const rows = chart.data as Record<string, unknown>[];
+                  if (chart.type === "table") {
+                    if (rows.length === 0) {
+                      return (
+                        <div className="h-full w-full flex items-center justify-center text-xs text-zinc-500">
+                          当前表格没有可展示数据
+                        </div>
+                      );
+                    }
+                    if (columns.length === 0) {
+                      return (
+                        <div className="h-full w-full flex items-center justify-center text-xs text-zinc-500">
+                          当前表格数据缺少可展示字段
+                        </div>
+                      );
+                    }
+                    return (
+                      <div className="h-full w-full flex flex-col gap-2">
+                        <div className="text-[11px] text-zinc-500 px-1">
+                          {isTableTruncated ? `预览前 ${TABLE_PREVIEW_LIMIT} 行 / 共 ${rows.length} 行，${columns.length} 列` : `共 ${rows.length} 行，${columns.length} 列`}
+                        </div>
+                        <ScrollArea className="flex-1 w-full border rounded-md">
+                          <Table>
+                            <TableHeader>
+                              <TableRow>
+                                {columns.map((col) => <TableHead key={col}>{col}</TableHead>)}
+                              </TableRow>
+                            </TableHeader>
+                            <TableBody>
+                              {previewRows.map((row, i) => (
+                                <TableRow key={i}>
+                                  {columns.map((col) => (
+                                    <TableCell key={`${i}-${col}`}>{String(row[col] ?? "")}</TableCell>
+                                  ))}
+                                </TableRow>
+                              ))}
+                            </TableBody>
+                          </Table>
+                        </ScrollArea>
+                      </div>
+                    );
+                  }
                   if (chart.chartSpec && rows.length > 0) {
                     return (
                       <div className="h-full w-full rounded-xl border border-zinc-100 p-2">
@@ -172,7 +224,7 @@ export function Dashboard() {
               </CardContent>
             </Card>
           </div>
-        ))}
+        )})}
       </ResponsiveGridLayout>
     </div>
   );
diff --git a/frontend/src/store/dashboardStore.ts b/frontend/src/store/dashboardStore.ts
index 7ba4278..8720457 100644
--- a/frontend/src/store/dashboardStore.ts
+++ b/frontend/src/store/dashboardStore.ts
@@ -7,7 +7,7 @@ type GridLayout = { i: string; x: number; y: number; w: number; h: number };
 export interface ChartConfig {
   id: string;
   title: string;
-  type: 'bar' | 'line';
+  type: 'bar' | 'line' | 'table';
   data: ChartRow[];
   sql: string;
   chartSpec?: ChartSpec | null;