feat: add project-aware agent workspace

2026-10-22 18:52:18 +08:00
parent c6a0e74e72
commit 2d8506fea0
191 changed files with 12373 additions and 3556 deletions
@@ -0,0 +1,70 @@
+import { useMemo, useState } from "react";
+import { ArrowDown, ArrowUp, ArrowUpDown } from "lucide-react";
+import { Input } from "@/shared/ui/input";
+import { Button } from "@/shared/ui/button";
+import { Checkbox } from "@/shared/ui/checkbox";
+import { cn } from "@/shared/ui/cn";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/shared/ui/table";
+import { AskAboutContent } from "./answer-ui-interactions";
+
+export function InteractiveDataTable({ title, columns, rows, source }: {
+  title: string; columns: string[]; rows: string[][]; source?: string;
+}) {
+  const [query, setQuery] = useState("");
+  const [sort, setSort] = useState<{ column: number; descending: boolean } | null>(null);
+  const [selection, setSelection] = useState<number[]>([]);
+  const filtered = useMemo(() => {
+    const items = rows.map((cells, id) => ({ cells, id }))
+      .filter(({ cells }) => cells.join(" ").toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()));
+    if (sort) items.sort((a, b) => {
+      const aValue = a.cells[sort.column], bValue = b.cells[sort.column];
+      const compared = /^[-+]?\d+(\.\d+)?%?$/.test(aValue) && /^[-+]?\d+(\.\d+)?%?$/.test(bValue)
+        ? Number.parseFloat(aValue) - Number.parseFloat(bValue)
+        : aValue.localeCompare(bValue, "zh-CN", { numeric: true });
+      return sort.descending ? -compared : compared;
+    });
+    return items;
+  }, [rows, sort, query]);
+  const selected = filtered.filter(({ id }) => selection.includes(id));
+  const quote = selected.map(({ cells }) => cells.map((cell, index) => `${columns[index]}：${cell}`).join("；")).join("\n");
+  return <div className="min-w-0 space-y-2" data-interactive-table>
+    <div className="flex flex-wrap items-center gap-2">
+      <Input aria-label={`搜索${title}`} placeholder="搜索当前数据" value={query} className="h-9 min-w-0 flex-1 text-xs"
+        onChange={(event) => { setQuery(event.currentTarget.value); setSelection([]); }} />
+      <span className="text-[11px] tabular-nums text-muted-foreground">{filtered.length} / {rows.length} 行</span>
+    </div>
+    <div role="region" aria-label={title} tabIndex={0}
+      className="answer-ui-table overflow-x-auto rounded-lg border border-border focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring">
+      <Table>
+        <TableCaption className="caption-top font-medium">{title}</TableCaption>
+        <TableHeader className="bg-muted/50"><TableRow>
+          <TableHead scope="col" className="w-10"><span className="sr-only">选择行</span></TableHead>
+          {columns.map((column, index) => <TableHead key={index} scope="col" className="whitespace-nowrap"
+            aria-sort={sort?.column === index ? sort.descending ? "descending" : "ascending" : "none"}>
+            <Button size="sm" variant="ghost" className="h-9 gap-1 px-1 text-xs" aria-label={`按${column}排序`}
+              onClick={() => setSort((current) => current?.column === index
+                ? current.descending ? null : { column: index, descending: true }
+                : { column: index, descending: false })}>
+              {column}{sort?.column === index ? sort.descending ? <ArrowDown size={12} /> : <ArrowUp size={12} /> : <ArrowUpDown size={12} />}
+            </Button>
+          </TableHead>)}
+        </TableRow></TableHeader>
+        <TableBody>
+          {filtered.map(({ cells, id }) => <TableRow key={id} data-state={selection.includes(id) ? "selected" : undefined}>
+            <TableCell className="w-10"><Checkbox aria-label={`选择第 ${id + 1} 行`} checked={selection.includes(id)}
+              onChange={(event) => setSelection((current) => event.target.checked ? [...current, id] : current.filter((value) => value !== id))} /></TableCell>
+            {cells.map((cell, index) => <TableCell key={index}
+              className={cn("min-w-24", /^[-+]?\d+(\.\d+)?%?$/.test(cell) && "text-right tabular-nums")}>{cell}</TableCell>)}
+          </TableRow>)}
+          {!filtered.length ? <TableRow><TableCell colSpan={columns.length + 1} className="py-6 text-center text-xs text-muted-foreground">
+            {rows.length ? "当前筛选没有匹配的数据。" : "没有已加载的数据。"}
+          </TableCell></TableRow> : null}
+        </TableBody>
+      </Table>
+    </div>
+    {selected.length ? <div className="flex flex-wrap items-center justify-between gap-1">
+      <span className="text-xs text-muted-foreground">已选 {selected.length} 行</span>
+      <AskAboutContent title={title} text={`${quote}${source ? `\n来源：${source}` : ""}`} />
+    </div> : <p className="text-[11px] text-muted-foreground">筛选与排序仅作用于已加载数据；勾选行可继续提问。</p>}
+  </div>;
+}