frontend: add mapping, history and folder compare dialogs with backend target precheck

Co-authored-by: Cursor <cursoragent@cursor.com>

mactfsui/app/components/explorer/compare-dialog.tsx

@@ -0,0 +1,230 @@
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { FileText, FolderClosed, Loader2, RefreshCw } from "lucide-react"
+
+import { FileTargetMenu } from "~/components/app/file-target-menu"
+import { Badge } from "~/components/ui/badge"
+import { Button } from "~/components/ui/button"
+import { Checkbox } from "~/components/ui/checkbox"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table"
+import { api } from "~/lib/api"
+import type { FolderDiffItem, MappingInfo } from "~/lib/api"
+import type { FileActionId, FileTarget } from "~/lib/tfs"
+import { makeFileTarget, statusBadgeClass, statusLabel } from "~/lib/tfs"
+import { cn } from "~/lib/utils"
+
+/**
+ * 目录对比弹窗：对已映射目录执行本地与服务端对比，
+ * 默认隐藏 upToDate，支持状态筛选、刷新重比，结果项走统一右键菜单。
+ */
+export function CompareDialog({
+  serverPath,
+  mappings,
+  onClose,
+  onFileAction,
+}: {
+  serverPath: string
+  mappings: MappingInfo[]
+  onClose: () => void
+  onFileAction: (target: FileTarget, action: FileActionId) => void
+}) {
+  const [diffs, setDiffs] = useState<FolderDiffItem[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showUpToDate, setShowUpToDate] = useState(false)
+  // 状态筛选：空集合表示不过滤（除 upToDate 开关外）。
+  const [statusFilter, setStatusFilter] = useState<Set<string>>(new Set())
+
+  /**
+   * 执行（或重新执行）目录对比。
+   */
+  const runCompare = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    const result = await api.compareFolder({ serverPath, recursive: true })
+    setLoading(false)
+    if (!result.ok) {
+      setError(result.errorMessage ?? "目录对比失败")
+      return
+    }
+    setDiffs(result.data?.diffs ?? [])
+  }, [serverPath])
+
+  useEffect(() => {
+    void runCompare()
+  }, [runCompare])
+
+  // 结果中出现过的状态（不含 upToDate），用于生成筛选 chips。
+  const presentStatuses = useMemo(() => {
+    const set = new Set<string>()
+    for (const diff of diffs) {
+      if (diff.status !== "upToDate") {
+        set.add(diff.status)
+      }
+    }
+    return [...set]
+  }, [diffs])
+
+  const visibleDiffs = useMemo(
+    () =>
+      diffs.filter((diff) => {
+        if (diff.status === "upToDate") {
+          return showUpToDate && statusFilter.size === 0
+        }
+        return statusFilter.size === 0 || statusFilter.has(diff.status)
+      }),
+    [diffs, showUpToDate, statusFilter],
+  )
+
+  /**
+   * 切换某个状态筛选 chip。
+   */
+  const toggleStatus = useCallback((status: string) => {
+    setStatusFilter((prev) => {
+      const next = new Set(prev)
+      if (next.has(status)) {
+        next.delete(status)
+      } else {
+        next.add(status)
+      }
+      return next
+    })
+  }, [])
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="flex max-h-[80svh] flex-col sm:max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>目录对比</DialogTitle>
+          <DialogDescription className="font-mono text-xs">{serverPath}</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          {presentStatuses.map((status) => (
+            <button key={status} type="button" onClick={() => toggleStatus(status)}>
+              <Badge
+                variant="secondary"
+                className={cn(
+                  "cursor-pointer rounded-md",
+                  statusBadgeClass(status),
+                  statusFilter.size > 0 && !statusFilter.has(status) && "opacity-40",
+                )}
+              >
+                {statusLabel(status)}
+              </Badge>
+            </button>
+          ))}
+          <label className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
+            <Checkbox
+              checked={showUpToDate}
+              onCheckedChange={(value) => setShowUpToDate(value === true)}
+            />
+            显示最新项
+          </label>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void runCompare()}
+            disabled={loading}
+          >
+            <RefreshCw data-icon="inline-start" className={cn(loading && "animate-spin")} />
+            重新对比
+          </Button>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-auto rounded-md border">
+          {loading ? (
+            <div className="flex h-48 items-center justify-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="size-4 animate-spin" />
+              正在对比目录…
+            </div>
+          ) : error ? (
+            <div className="flex h-48 items-center justify-center text-sm text-destructive">
+              {error}
+            </div>
+          ) : visibleDiffs.length === 0 ? (
+            <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">
+              {diffs.length === 0 ? "本地与服务端一致，没有差异" : "没有符合筛选条件的差异项"}
+            </div>
+          ) : (
+            <Table>
+              <TableHeader className="sticky top-0 z-10 bg-background">
+                <TableRow className="hover:bg-transparent">
+                  <TableHead className="h-8 text-xs text-muted-foreground">名称</TableHead>
+                  <TableHead className="h-8 w-28 text-xs text-muted-foreground">状态</TableHead>
+                  <TableHead className="h-8 w-24 text-right text-xs text-muted-foreground">本地版本</TableHead>
+                  <TableHead className="h-8 w-24 text-right text-xs text-muted-foreground">最新版本</TableHead>
+                  <TableHead className="h-8 text-xs text-muted-foreground">服务端路径</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {visibleDiffs.map((diff) => {
+                  const target = makeFileTarget({
+                    source: "compare",
+                    folder: diff.folder,
+                    serverPath: diff.serverPath,
+                    mappings,
+                    pendingStatus: diff.status.startsWith("pending") ? diff.status : null,
+                  })
+                  return (
+                    <FileTargetMenu key={diff.serverPath} target={target} onAction={onFileAction}>
+                      <TableRow className="cursor-default select-none">
+                        <TableCell className="py-1.5">
+                          <span className="flex items-center gap-1.5">
+                            {diff.folder ? (
+                              <FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
+                            ) : (
+                              <FileText className="size-3.5 shrink-0 text-muted-foreground" />
+                            )}
+                            <span className="truncate text-sm">{diff.name}</span>
+                          </span>
+                        </TableCell>
+                        <TableCell className="py-1.5">
+                          <Badge
+                            variant="secondary"
+                            className={cn("rounded-md", statusBadgeClass(diff.status))}
+                          >
+                            {statusLabel(diff.status)}
+                          </Badge>
+                        </TableCell>
+                        <TableCell className="py-1.5 text-right font-mono text-xs">
+                          {diff.localVersion > 0 ? diff.localVersion : "—"}
+                        </TableCell>
+                        <TableCell className="py-1.5 text-right font-mono text-xs">
+                          {diff.latestVersion > 0 ? diff.latestVersion : "—"}
+                        </TableCell>
+                        <TableCell
+                          className="max-w-0 truncate py-1.5 font-mono text-xs text-muted-foreground"
+                          title={diff.serverPath}
+                        >
+                          {diff.serverPath}
+                        </TableCell>
+                      </TableRow>
+                    </FileTargetMenu>
+                  )
+                })}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+
+        <p className="shrink-0 text-xs text-muted-foreground">
+          {visibleDiffs.length} / {diffs.length} 项 · 差异项操作通过右键菜单触发
+        </p>
+      </DialogContent>
+    </Dialog>
+  )
+}

mactfsui/app/components/explorer/history-dialog.tsx

@@ -0,0 +1,259 @@
+import { useCallback, useEffect, useState } from "react"
+import { ArrowLeft, Loader2 } from "lucide-react"
+
+import { Button } from "~/components/ui/button"
+import { Checkbox } from "~/components/ui/checkbox"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table"
+import { api } from "~/lib/api"
+import type { HistoryEntry } from "~/lib/api"
+import { formatDateTime } from "~/lib/utils"
+
+/**
+ * History 弹窗：展示文件或目录历史（最近记录）。
+ * 目录历史可点击 changeset 查看影响文件；文件历史可勾选两个版本，
+ * 通过 onDiffRevisions 进入版本对比（FE-008 提供 Diff 弹窗）。
+ */
+export function HistoryDialog({
+  serverPath,
+  folder,
+  onClose,
+  onDiffRevisions,
+}: {
+  serverPath: string
+  folder: boolean
+  onClose: () => void
+  onDiffRevisions?: (serverPath: string, source: number, target: number) => void
+}) {
+  const [entries, setEntries] = useState<HistoryEntry[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  // 目录历史下钻：当前查看的 changeset 文件列表，null 表示在历史主列表。
+  const [changesetFiles, setChangesetFiles] = useState<{
+    changeset: number
+    files: HistoryEntry[]
+  } | null>(null)
+  const [filesLoading, setFilesLoading] = useState(false)
+  // 文件历史勾选的 changeset（最多两个），用于版本对比。
+  const [selected, setSelected] = useState<number[]>([])
+
+  useEffect(() => {
+    let active = true
+    void (async () => {
+      setLoading(true)
+      const result = await api.getHistory({ path: serverPath, folder })
+      if (!active) {
+        return
+      }
+      setLoading(false)
+      if (!result.ok) {
+        setError(result.errorMessage ?? "历史加载失败")
+        return
+      }
+      setEntries(result.data?.history ?? [])
+    })()
+    return () => {
+      active = false
+    }
+  }, [serverPath, folder])
+
+  /**
+   * 目录历史下钻：加载指定 changeset 影响的文件列表。
+   */
+  const openChangeset = useCallback(async (changeset: number) => {
+    setFilesLoading(true)
+    const result = await api.getChangesetFiles({ changeset })
+    setFilesLoading(false)
+    if (!result.ok) {
+      setError(result.errorMessage ?? "Changeset 文件加载失败")
+      return
+    }
+    setError(null)
+    setChangesetFiles({ changeset, files: result.data?.files ?? [] })
+  }, [])
+
+  /**
+   * 勾选 / 取消勾选用于对比的 changeset，最多保留两个（先进先出）。
+   */
+  const toggleSelected = useCallback((changeset: number) => {
+    setSelected((prev) => {
+      if (prev.includes(changeset)) {
+        return prev.filter((item) => item !== changeset)
+      }
+      const next = [...prev, changeset]
+      return next.length > 2 ? next.slice(next.length - 2) : next
+    })
+  }, [])
+
+  const canDiff = onDiffRevisions != null && !folder && selected.length === 2
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="flex max-h-[80svh] flex-col sm:max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>
+            {changesetFiles ? `Changeset ${changesetFiles.changeset} 的文件` : "历史记录"}
+          </DialogTitle>
+          <DialogDescription className="font-mono text-xs">{serverPath}</DialogDescription>
+        </DialogHeader>
+
+        {changesetFiles && (
+          <div>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setChangesetFiles(null)}
+            >
+              <ArrowLeft data-icon="inline-start" />
+              返回历史列表
+            </Button>
+          </div>
+        )}
+
+        <div className="min-h-0 flex-1 overflow-auto rounded-md border">
+          {loading || filesLoading ? (
+            <div className="flex h-40 items-center justify-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="size-4 animate-spin" />
+              正在加载…
+            </div>
+          ) : error ? (
+            <div className="flex h-40 items-center justify-center text-sm text-destructive">
+              {error}
+            </div>
+          ) : changesetFiles ? (
+            <ChangesetFilesTable files={changesetFiles.files} />
+          ) : entries.length === 0 ? (
+            <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
+              没有历史记录
+            </div>
+          ) : (
+            <Table>
+              <TableHeader className="sticky top-0 z-10 bg-background">
+                <TableRow className="hover:bg-transparent">
+                  {!folder && <TableHead className="h-8 w-8" />}
+                  <TableHead className="h-8 w-24 text-xs text-muted-foreground">Changeset</TableHead>
+                  <TableHead className="h-8 w-20 text-xs text-muted-foreground">类型</TableHead>
+                  <TableHead className="h-8 w-28 text-xs text-muted-foreground">作者</TableHead>
+                  <TableHead className="h-8 w-36 text-xs text-muted-foreground">时间</TableHead>
+                  <TableHead className="h-8 text-xs text-muted-foreground">注释</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {entries.map((entry) => (
+                  <TableRow
+                    key={`${entry.changeset}-${entry.serverPath}`}
+                    className="cursor-default select-none"
+                    onDoubleClick={() => {
+                      if (folder) {
+                        void openChangeset(entry.changeset)
+                      }
+                    }}
+                  >
+                    {!folder && (
+                      <TableCell className="py-1.5">
+                        <Checkbox
+                          checked={selected.includes(entry.changeset)}
+                          onCheckedChange={() => toggleSelected(entry.changeset)}
+                          aria-label={`选择 changeset ${entry.changeset}`}
+                        />
+                      </TableCell>
+                    )}
+                    <TableCell className="py-1.5 font-mono text-xs">
+                      {folder ? (
+                        <button
+                          type="button"
+                          className="text-primary underline-offset-2 hover:underline"
+                          onClick={() => void openChangeset(entry.changeset)}
+                        >
+                          {entry.changeset}
+                        </button>
+                      ) : (
+                        entry.changeset
+                      )}
+                    </TableCell>
+                    <TableCell className="py-1.5 text-xs">{entry.changeType}</TableCell>
+                    <TableCell className="max-w-0 truncate py-1.5 text-xs">{entry.author}</TableCell>
+                    <TableCell className="py-1.5 text-xs text-muted-foreground">
+                      {formatDateTime(entry.date)}
+                    </TableCell>
+                    <TableCell className="max-w-0 truncate py-1.5 text-xs" title={entry.comment}>
+                      {entry.comment || "—"}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+        </div>
+
+        <div className="flex shrink-0 items-center justify-between">
+          <p className="text-xs text-muted-foreground">
+            {changesetFiles
+              ? `${changesetFiles.files.length} 个文件`
+              : folder
+                ? "双击记录或点击 changeset 编号查看影响文件"
+                : "勾选两个版本可进行对比"}
+          </p>
+          {!folder && onDiffRevisions && (
+            <Button
+              size="sm"
+              disabled={!canDiff}
+              onClick={() => {
+                const [a, b] = [...selected].sort((x, y) => x - y)
+                onDiffRevisions(serverPath, a, b)
+              }}
+            >
+              对比所选版本
+            </Button>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+/**
+ * Changeset 影响文件列表（目录历史下钻视图）。
+ */
+function ChangesetFilesTable({ files }: { files: HistoryEntry[] }) {
+  if (files.length === 0) {
+    return (
+      <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
+        该 changeset 没有文件记录
+      </div>
+    )
+  }
+  return (
+    <Table>
+      <TableHeader className="sticky top-0 z-10 bg-background">
+        <TableRow className="hover:bg-transparent">
+          <TableHead className="h-8 w-20 text-xs text-muted-foreground">类型</TableHead>
+          <TableHead className="h-8 text-xs text-muted-foreground">服务端路径</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {files.map((file) => (
+          <TableRow key={file.serverPath} className="select-none">
+            <TableCell className="py-1.5 text-xs">{file.changeType}</TableCell>
+            <TableCell className="max-w-0 truncate py-1.5 font-mono text-xs" title={file.serverPath}>
+              {file.serverPath}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}

mactfsui/app/components/explorer/mapping-dialog.tsx

@@ -0,0 +1,201 @@
+import { useCallback, useEffect, useState } from "react"
+import { FolderSearch, Loader2 } from "lucide-react"
+
+import { Button } from "~/components/ui/button"
+import { Checkbox } from "~/components/ui/checkbox"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog"
+import { Input } from "~/components/ui/input"
+import { Label } from "~/components/ui/label"
+import { api } from "~/lib/api"
+import type { CheckMappingTargetResult, MappingInfo } from "~/lib/api"
+import { isElectron, selectDirectory } from "~/lib/electron"
+
+/**
+ * Mapping 创建弹窗：展示服务端路径，选择本地父目录后由后端预校验最终目标路径，
+ * 目标已存在时禁止映射；支持创建后立即 Get Latest。
+ */
+export function MappingDialog({
+  serverPath,
+  onClose,
+  onCreated,
+}: {
+  serverPath: string
+  onClose: () => void
+  onCreated: (mappings: MappingInfo[], didGetLatest: boolean) => void
+}) {
+  const [parentPath, setParentPath] = useState("")
+  const [check, setCheck] = useState<CheckMappingTargetResult | null>(null)
+  const [checking, setChecking] = useState(false)
+  const [getLatest, setGetLatest] = useState(true)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  /**
+   * 通过系统目录选择器选择本地父目录（非 Electron 环境保留手动输入）。
+   */
+  const handleBrowse = useCallback(async () => {
+    const selected = await selectDirectory()
+    if (selected) {
+      setParentPath(selected)
+    }
+  }, [])
+
+  // 父目录变化时调用后端预校验最终目标路径，最终路径以后端结果为准。
+  useEffect(() => {
+    const trimmed = parentPath.trim()
+    if (trimmed.length === 0) {
+      setCheck(null)
+      return
+    }
+    let active = true
+    setChecking(true)
+    const timer = setTimeout(() => {
+      void (async () => {
+        const result = await api.checkMappingTarget({
+          serverPath,
+          localParentPath: trimmed,
+        })
+        if (!active) {
+          return
+        }
+        setChecking(false)
+        if (!result.ok || !result.data) {
+          setCheck(null)
+          setError(result.errorMessage ?? "目标路径校验失败")
+          return
+        }
+        setError(null)
+        setCheck(result.data)
+      })()
+    }, 300)
+    return () => {
+      active = false
+      clearTimeout(timer)
+    }
+  }, [parentPath, serverPath])
+
+  const exists = check?.exists === true
+  const canConfirm = check != null && check.allowed && !exists && !busy && !checking
+
+  /**
+   * 创建 Mapping（按需立即 Get Latest），成功后回调上层刷新并关闭弹窗。
+   */
+  const handleConfirm = useCallback(async () => {
+    if (!check) {
+      return
+    }
+    setBusy(true)
+    setError(null)
+    const result = await api.addMapping({
+      serverPath,
+      localPath: check.targetPath,
+      getLatest,
+    })
+    setBusy(false)
+    if (!result.ok) {
+      setError(result.errorMessage ?? "创建 Mapping 失败")
+      return
+    }
+    const mappingsResult = await api.listMappings()
+    onCreated(mappingsResult.data?.mappings ?? [], getLatest)
+  }, [check, serverPath, getLatest, onCreated])
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>映射到本地</DialogTitle>
+          <DialogDescription>
+            为服务端目录创建本地工作区映射
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-1.5">
+            <Label>服务端路径</Label>
+            <p className="rounded-md border bg-muted/40 px-2.5 py-1.5 font-mono text-xs">
+              {serverPath}
+            </p>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="parentPath">本地父目录</Label>
+            <div className="flex gap-2">
+              <Input
+                id="parentPath"
+                placeholder="/Users/me/tfs"
+                value={parentPath}
+                onChange={(event) => setParentPath(event.target.value)}
+                disabled={busy}
+                className="font-mono text-xs"
+              />
+              {isElectron() && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="icon"
+                  onClick={() => void handleBrowse()}
+                  disabled={busy}
+                  aria-label="浏览本地目录"
+                >
+                  <FolderSearch />
+                </Button>
+              )}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              选择父目录，最终映射目录由后端按服务端目录名生成
+            </p>
+          </div>
+
+          {checking && (
+            <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+              <Loader2 className="size-3 animate-spin" />
+              正在校验目标路径…
+            </p>
+          )}
+
+          {check && !checking && (
+            <div className="space-y-1.5">
+              <Label>最终映射路径</Label>
+              <p className="rounded-md border bg-muted/40 px-2.5 py-1.5 font-mono text-xs">
+                {check.targetPath}
+              </p>
+              {exists && (
+                <p className="text-xs font-medium text-destructive">
+                  目标目录已存在，禁止映射
+                </p>
+              )}
+            </div>
+          )}
+
+          <label className="flex items-center gap-2 text-sm">
+            <Checkbox
+              checked={getLatest}
+              onCheckedChange={(value) => setGetLatest(value === true)}
+              disabled={busy}
+            />
+            创建后立即获取最新
+          </label>
+
+          {error && <p className="text-sm text-destructive">{error}</p>}
+        </div>
+
+        <DialogFooter>
+          <Button variant="ghost" onClick={onClose} disabled={busy}>
+            取消
+          </Button>
+          <Button onClick={() => void handleConfirm()} disabled={!canConfirm}>
+            {busy ? "正在创建…" : "创建映射"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}