polish UI
This commit is contained in:
qixinbo
@@ -2,7 +2,7 @@ import { useState, useRef, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { User, Loader2, Sparkles, ArrowUp, ChevronDown, Paperclip, Check, X, Square, Plus, Database, Wand2, Search, Zap, LayoutGrid, CheckCircle2, Table, XCircle } from "lucide-react";
|
||||
import { User, Loader2, Sparkles, ArrowUp, ChevronDown, Paperclip, Check, X, Square, Plus, Database, Wand2, Search, Zap, LayoutGrid, CheckCircle2, Table, XCircle, Settings } from "lucide-react";
|
||||
import { api } from "@/lib/api";
|
||||
import { type ChartSpec } from "@/store/visualizationStore";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
@@ -848,11 +848,20 @@ export function ChatInterface() {
|
||||
<span>{msg.awaitingFirstToken ? "正在处理中" : "处理完成"}</span>
|
||||
</div>
|
||||
<div className="mt-1.5 space-y-1">
|
||||
{msg.progressLogs.map((log, idx) => (
|
||||
<div key={`${msg.id}-log-${idx}`} className="text-[12px] text-zinc-500 leading-5">
|
||||
{idx + 1}. {log}
|
||||
</div>
|
||||
))}
|
||||
{msg.progressLogs.map((log, idx, arr) => {
|
||||
const isLast = idx === arr.length - 1;
|
||||
const isLoading = isLast && msg.awaitingFirstToken;
|
||||
return (
|
||||
<div key={`${msg.id}-log-${idx}`} className="flex items-start gap-2 text-[12px] text-zinc-500 leading-5">
|
||||
{isLoading ? (
|
||||
<Settings className="mt-0.5 h-3.5 w-3.5 text-amber-500 animate-spin" />
|
||||
) : (
|
||||
<CheckCircle2 className="mt-0.5 h-3.5 w-3.5 text-emerald-500" />
|
||||
)}
|
||||
<span>{log}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@@ -3,12 +3,15 @@ import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogDescription, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Code, Table as TableIcon, BarChart as ChartIcon, LayoutDashboard } from "lucide-react";
|
||||
import { Code, Table as TableIcon, BarChart as ChartIcon, LayoutDashboard, Copy, Check } from "lucide-react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { useDashboardStore, type ChartConfig } from "@/store/dashboardStore";
|
||||
import { useProjectStore } from "@/store/projectStore";
|
||||
import type { ChartSpec } from "@/store/visualizationStore";
|
||||
import { VegaChart } from "./VegaChart";
|
||||
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
||||
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
||||
import { format } from 'sql-formatter';
|
||||
|
||||
interface InlineVisualizationCardProps {
|
||||
viz: {
|
||||
@@ -24,6 +27,7 @@ interface InlineVisualizationCardProps {
|
||||
export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
|
||||
const [view, setView] = useState<'table' | 'chart'>('chart');
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [pendingChart, setPendingChart] = useState<Omit<ChartConfig, 'layout'> | null>(null);
|
||||
const { addChart } = useDashboardStore();
|
||||
const { currentProject } = useProjectStore();
|
||||
@@ -68,6 +72,14 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
|
||||
setPendingChart(null);
|
||||
};
|
||||
|
||||
const handleCopySql = () => {
|
||||
navigator.clipboard.writeText(viz.sql || "");
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
const formattedSql = viz.sql ? format(viz.sql, { language: 'postgresql' }) : "--";
|
||||
|
||||
if (viz.error) {
|
||||
return <div className="text-sm text-red-500">{viz.error}</div>;
|
||||
}
|
||||
@@ -76,7 +88,6 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
|
||||
<Card className="w-full border border-zinc-100 shadow-none">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">{viz.chartSpec?.title || "可视化结果"}</CardTitle>
|
||||
<CardDescription>{viz.reasoning || "根据当前回答生成的可视化"}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-0">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
@@ -106,13 +117,47 @@ export function InlineVisualizationCard({ viz }: InlineVisualizationCardProps) {
|
||||
SQL
|
||||
</Button>
|
||||
} />
|
||||
<DialogContent className="sm:max-w-[625px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Generated SQL Query</DialogTitle>
|
||||
<DialogDescription>用于生成当前图表的数据查询语句。</DialogDescription>
|
||||
<DialogContent className="sm:max-w-[700px]">
|
||||
<DialogHeader className="flex flex-row items-start justify-between pr-8">
|
||||
<div>
|
||||
<DialogTitle>Generated SQL Query</DialogTitle>
|
||||
<DialogDescription className="mt-1">用于生成当前图表的数据查询语句。</DialogDescription>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8 gap-1.5 shrink-0"
|
||||
onClick={handleCopySql}
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="h-3.5 w-3.5 text-emerald-500" />
|
||||
<span>已复制</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="h-3.5 w-3.5" />
|
||||
<span>复制</span>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DialogHeader>
|
||||
<div className="bg-slate-950 text-slate-50 p-4 rounded-md overflow-x-auto">
|
||||
<pre className="text-sm font-mono">{viz.sql || "--"}</pre>
|
||||
<div className="relative rounded-md overflow-hidden bg-[#1e1e1e] border border-zinc-200 shadow-inner mt-2">
|
||||
<ScrollArea className="max-h-[500px]">
|
||||
<SyntaxHighlighter
|
||||
language="sql"
|
||||
style={vscDarkPlus}
|
||||
customStyle={{
|
||||
margin: 0,
|
||||
padding: '1.25rem',
|
||||
fontSize: '0.875rem',
|
||||
lineHeight: '1.5',
|
||||
background: 'transparent',
|
||||
}}
|
||||
>
|
||||
{formattedSql}
|
||||
</SyntaxHighlighter>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
Reference in New Issue
Block a user