功能: changeset 文件支持右键查看版本与下钻历史，目录对比 localOnly 项可加入版本控制

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

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

@@ -178,6 +178,7 @@ export function CompareDialog({
                     serverPath: diff.serverPath,
                     mappings,
                     pendingStatus: diff.status.startsWith("pending") ? diff.status : null,
+                    compareStatus: diff.status,
                   })
                   return (
                     <FileTargetMenu key={diff.serverPath} target={target} onAction={onFileAction}>

mactfsui/app/components/explorer/file-view-dialog.tsx

@@ -31,34 +31,39 @@ function formatSize(size: number): string {
 }
 
 /**
- * 文件查看弹窗：只读展示本地或服务器 latest 内容，
+ * 文件查看弹窗：只读展示本地、服务器 latest 或指定 changeset 版本内容，
  * 支持来源切换、行号与搜索高亮；二进制 / 超大 / 非映射路径给出明确提示。
  */
 export function FileViewDialog({
   serverPath,
   localPath,
+  changeset,
   onClose,
 }: {
   serverPath: string
   localPath: string | null
+  /** 指定 changeset 时固定展示该版本内容，不提供来源切换。 */
+  changeset?: number
   onClose: () => void
 }) {
-  const [source, setSource] = useState<ViewSource>(localPath ? "local" : "server")
+  const [source, setSource] = useState<ViewSource>(localPath && changeset == null ? "local" : "server")
   const [content, setContent] = useState<FileContent | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [search, setSearch] = useState("")
 
-  // 加载所选来源的文件内容；本地内容仅在已映射时可用。
+  // 加载所选来源的文件内容；本地内容仅在已映射时可用；指定版本固定按 changeset 读取。
   useEffect(() => {
     let active = true
     setLoading(true)
     setError(null)
     void (async () => {
       const result =
-        source === "local" && localPath
-          ? await api.getFileContent({ localPath })
-          : await api.getFileContent({ serverPath })
+        changeset != null
+          ? await api.getFileContent({ serverPath, changeset })
+          : source === "local" && localPath
+            ? await api.getFileContent({ localPath })
+            : await api.getFileContent({ serverPath })
       if (!active) {
         return
       }
@@ -73,7 +78,7 @@ export function FileViewDialog({
     return () => {
       active = false
     }
-  }, [source, serverPath, localPath])
+  }, [source, serverPath, localPath, changeset])
 
   const lines = useMemo(
     () => (content && !content.binary && !content.tooLarge ? content.content.split(/\r?\n/) : []),
@@ -97,20 +102,26 @@ export function FileViewDialog({
         </DialogHeader>
 
         <div className="flex shrink-0 flex-wrap items-center gap-2">
-          <div className="flex items-center rounded-md border p-0.5">
-            <SourceTab
-              label="本地文件"
-              active={source === "local"}
-              disabled={!localPath}
-              disabledReason="未映射到本地"
-              onClick={() => setSource("local")}
-            />
-            <SourceTab
-              label="服务器 latest"
-              active={source === "server"}
-              onClick={() => setSource("server")}
-            />
-          </div>
+          {changeset != null ? (
+            <Badge variant="secondary" className="rounded-md">
+              版本 C{changeset}
+            </Badge>
+          ) : (
+            <div className="flex items-center rounded-md border p-0.5">
+              <SourceTab
+                label="本地文件"
+                active={source === "local"}
+                disabled={!localPath}
+                disabledReason="未映射到本地"
+                onClick={() => setSource("local")}
+              />
+              <SourceTab
+                label="服务器 latest"
+                active={source === "server"}
+                onClick={() => setSource("server")}
+              />
+            </div>
+          )}
           {content && (
             <span className="text-xs text-muted-foreground">
               {formatSize(content.size)}
@@ -165,7 +176,12 @@ export function FileViewDialog({
         </div>
 
         <p className="shrink-0 text-xs text-muted-foreground">
-          只读查看 · 来源：{source === "local" ? `本地 ${localPath ?? ""}` : "服务器 latest"}
+          只读查看 · 来源：
+          {changeset != null
+            ? `changeset ${changeset} 版本`
+            : source === "local"
+              ? `本地 ${localPath ?? ""}`
+              : "服务器 latest"}
         </p>
       </DialogContent>
     </Dialog>

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

@@ -2,8 +2,16 @@ import { useCallback, useEffect, useState } from "react"
 import { ArrowLeft, CloudDownload, Loader2 } from "lucide-react"
 
 import { ConfirmDialog } from "~/components/app/confirm-dialog"
+import { FileViewDialog } from "~/components/explorer/file-view-dialog"
 import { Button } from "~/components/ui/button"
 import { Checkbox } from "~/components/ui/checkbox"
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "~/components/ui/context-menu"
 import {
   Dialog,
   DialogContent,
@@ -23,9 +31,23 @@ import { api } from "~/lib/api"
 import type { HistoryEntry } from "~/lib/api"
 import { formatDateTime } from "~/lib/utils"
 
+// 历史弹窗当前查看的目标（支持从 changeset 文件下钻到单文件历史后返回）。
+interface HistoryTarget {
+  serverPath: string
+  folder: boolean
+}
+
+// 「获取此版本」待确认信息。
+interface VersionConfirm {
+  serverPath: string
+  changeset: number
+  folder: boolean
+}
+
 /**
  * History 弹窗：展示文件或目录历史（最近记录）。
- * 目录历史可点击 changeset 查看影响文件；文件历史可勾选两个版本进入版本对比；
+ * 目录历史可下钻 changeset 影响文件；changeset 文件支持右键查看此版本 /
+ * 查看该文件历史（可返回）/ 获取此版本；文件历史可勾选两个版本进入版本对比；
  * 每条记录支持「获取此版本…」（确认后用该版本覆盖本地）。
  */
 export function HistoryDialog({
@@ -41,6 +63,9 @@ export function HistoryDialog({
   onDiffRevisions?: (serverPath: string, source: number, target: number) => void
   onGetVersion?: (serverPath: string, changeset: number, folder: boolean) => Promise<boolean>
 }) {
+  const [target, setTarget] = useState<HistoryTarget>({ serverPath, folder })
+  // 下钻历史目标栈：从 changeset 文件进入单文件历史后可逐级返回。
+  const [targetStack, setTargetStack] = useState<HistoryTarget[]>([])
   const [entries, setEntries] = useState<HistoryEntry[]>([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
@@ -52,14 +77,15 @@ export function HistoryDialog({
   const [filesLoading, setFilesLoading] = useState(false)
   // 文件历史勾选的 changeset（最多两个），用于版本对比。
   const [selected, setSelected] = useState<number[]>([])
-  // 待确认的「获取此版本」目标 changeset。
-  const [confirmVersion, setConfirmVersion] = useState<number | null>(null)
+  const [confirmVersion, setConfirmVersion] = useState<VersionConfirm | null>(null)
+  // 「查看此版本内容」叠加的文件查看弹窗目标。
+  const [viewVersion, setViewVersion] = useState<{ serverPath: string; changeset: number } | null>(null)
 
   useEffect(() => {
     let active = true
     void (async () => {
       setLoading(true)
-      const result = await api.getHistory({ path: serverPath, folder })
+      const result = await api.getHistory({ path: target.serverPath, folder: target.folder })
       if (!active) {
         return
       }
@@ -68,12 +94,13 @@ export function HistoryDialog({
         setError(result.errorMessage ?? "历史加载失败")
         return
       }
+      setError(null)
       setEntries(result.data?.history ?? [])
     })()
     return () => {
       active = false
     }
-  }, [serverPath, folder])
+  }, [target])
 
   /**
    * 目录历史下钻：加载指定 changeset 影响的文件列表。
@@ -90,6 +117,35 @@ export function HistoryDialog({
     setChangesetFiles({ changeset, files: result.data?.files ?? [] })
   }, [])
 
+  /**
+   * 从 changeset 文件切换到该文件的历史（压栈当前目标，可返回）。
+   */
+  const openFileHistory = useCallback(
+    (fileServerPath: string) => {
+      setTargetStack((prev) => [...prev, target])
+      setTarget({ serverPath: fileServerPath, folder: false })
+      setChangesetFiles(null)
+      setSelected([])
+    },
+    [target],
+  )
+
+  /**
+   * 返回上一级历史目标。
+   */
+  const backToPreviousTarget = useCallback(() => {
+    setTargetStack((prev) => {
+      const next = [...prev]
+      const previous = next.pop()
+      if (previous) {
+        setTarget(previous)
+        setChangesetFiles(null)
+        setSelected([])
+      }
+      return next
+    })
+  }, [])
+
   /**
    * 勾选 / 取消勾选用于对比的 changeset，最多保留两个（先进先出）。
    */
@@ -103,7 +159,7 @@ export function HistoryDialog({
     })
   }, [])
 
-  const canDiff = onDiffRevisions != null && !folder && selected.length === 2
+  const canDiff = onDiffRevisions != null && !target.folder && selected.length === 2
 
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>
@@ -112,19 +168,25 @@ export function HistoryDialog({
           <DialogTitle>
             {changesetFiles ? `Changeset ${changesetFiles.changeset} 的文件` : "历史记录"}
           </DialogTitle>
-          <DialogDescription className="font-mono text-xs">{serverPath}</DialogDescription>
+          <DialogDescription className="font-mono text-xs">
+            {target.serverPath}
+          </DialogDescription>
         </DialogHeader>
 
-        {changesetFiles && (
-          <div>
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => setChangesetFiles(null)}
-            >
-              <ArrowLeft data-icon="inline-start" />
-              返回历史列表
-            </Button>
+        {(changesetFiles || targetStack.length > 0) && (
+          <div className="flex items-center gap-2">
+            {changesetFiles && (
+              <Button variant="ghost" size="sm" onClick={() => setChangesetFiles(null)}>
+                <ArrowLeft data-icon="inline-start" />
+                返回历史列表
+              </Button>
+            )}
+            {!changesetFiles && targetStack.length > 0 && (
+              <Button variant="ghost" size="sm" onClick={backToPreviousTarget}>
+                <ArrowLeft data-icon="inline-start" />
+                返回上级历史
+              </Button>
+            )}
           </div>
         )}
 
@@ -139,7 +201,24 @@ export function HistoryDialog({
               {error}
             </div>
           ) : changesetFiles ? (
-            <ChangesetFilesTable files={changesetFiles.files} />
+            <ChangesetFilesTable
+              files={changesetFiles.files}
+              changeset={changesetFiles.changeset}
+              onViewVersion={(fileServerPath) =>
+                setViewVersion({ serverPath: fileServerPath, changeset: changesetFiles.changeset })
+              }
+              onOpenFileHistory={openFileHistory}
+              onGetVersion={
+                onGetVersion
+                  ? (fileServerPath) =>
+                      setConfirmVersion({
+                        serverPath: fileServerPath,
+                        changeset: changesetFiles.changeset,
+                        folder: false,
+                      })
+                  : undefined
+              }
+            />
           ) : entries.length === 0 ? (
             <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
               没有历史记录
@@ -148,7 +227,7 @@ export function HistoryDialog({
             <Table>
               <TableHeader className="sticky top-0 z-10 bg-background">
                 <TableRow className="hover:bg-transparent">
-                  {!folder && <TableHead className="h-8 w-8" />}
+                  {!target.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>
@@ -163,12 +242,12 @@ export function HistoryDialog({
                     key={`${entry.changeset}-${entry.serverPath}`}
                     className="cursor-default select-none"
                     onDoubleClick={() => {
-                      if (folder) {
+                      if (target.folder) {
                         void openChangeset(entry.changeset)
                       }
                     }}
                   >
-                    {!folder && (
+                    {!target.folder && (
                       <TableCell className="py-1.5">
                         <Checkbox
                           checked={selected.includes(entry.changeset)}
@@ -178,7 +257,7 @@ export function HistoryDialog({
                       </TableCell>
                     )}
                     <TableCell className="py-1.5 font-mono text-xs">
-                      {folder ? (
+                      {target.folder ? (
                         <button
                           type="button"
                           className="text-primary underline-offset-2 hover:underline"
@@ -204,7 +283,13 @@ export function HistoryDialog({
                           variant="ghost"
                           size="icon-sm"
                           title={`获取此版本（C${entry.changeset}，覆盖本地）`}
-                          onClick={() => setConfirmVersion(entry.changeset)}
+                          onClick={() =>
+                            setConfirmVersion({
+                              serverPath: target.serverPath,
+                              changeset: entry.changeset,
+                              folder: target.folder,
+                            })
+                          }
                         >
                           <CloudDownload />
                         </Button>
@@ -220,18 +305,18 @@ export function HistoryDialog({
         <div className="flex shrink-0 items-center justify-between">
           <p className="text-xs text-muted-foreground">
             {changesetFiles
-              ? `${changesetFiles.files.length} 个文件`
-              : folder
+              ? `${changesetFiles.files.length} 个文件 · 右键文件可查看此版本 / 历史 / 获取`
+              : target.folder
                 ? "双击记录或点击 changeset 编号查看影响文件"
                 : "勾选两个版本可进行对比"}
           </p>
-          {!folder && onDiffRevisions && (
+          {!target.folder && onDiffRevisions && (
             <Button
               size="sm"
               disabled={!canDiff}
               onClick={() => {
                 const [a, b] = [...selected].sort((x, y) => x - y)
-                onDiffRevisions(serverPath, a, b)
+                onDiffRevisions(target.serverPath, a, b)
               }}
             >
               对比所选版本
@@ -239,14 +324,14 @@ export function HistoryDialog({
           )}
         </div>
 
-        {confirmVersion != null && onGetVersion && (
+        {confirmVersion && onGetVersion && (
           <ConfirmDialog
-            title={`获取版本 C${confirmVersion}`}
+            title={`获取版本 C${confirmVersion.changeset}`}
             description={
               <>
                 <p>
-                  将把 <span className="font-mono text-xs">{serverPath}</span>{" "}
-                  的本地内容替换为 changeset {confirmVersion} 的版本。
+                  将把 <span className="font-mono text-xs">{confirmVersion.serverPath}</span>{" "}
+                  的本地内容替换为 changeset {confirmVersion.changeset} 的版本。
                 </p>
                 <p className="mt-2 font-medium text-destructive">
                   本地未签入的修改会被覆盖，且无法恢复。确定继续吗？
@@ -256,21 +341,46 @@ export function HistoryDialog({
             confirmLabel="获取此版本"
             danger
             onConfirm={async () => {
-              await onGetVersion(serverPath, confirmVersion, folder)
+              await onGetVersion(
+                confirmVersion.serverPath,
+                confirmVersion.changeset,
+                confirmVersion.folder,
+              )
               setConfirmVersion(null)
             }}
             onClose={() => setConfirmVersion(null)}
           />
         )}
+
+        {viewVersion && (
+          <FileViewDialog
+            serverPath={viewVersion.serverPath}
+            localPath={null}
+            changeset={viewVersion.changeset}
+            onClose={() => setViewVersion(null)}
+          />
+        )}
       </DialogContent>
     </Dialog>
   )
 }
 
 /**
- * Changeset 影响文件列表（目录历史下钻视图）。
+ * Changeset 影响文件列表（目录历史下钻视图），行级右键菜单提供对象操作。
  */
-function ChangesetFilesTable({ files }: { files: HistoryEntry[] }) {
+function ChangesetFilesTable({
+  files,
+  changeset,
+  onViewVersion,
+  onOpenFileHistory,
+  onGetVersion,
+}: {
+  files: HistoryEntry[]
+  changeset: number
+  onViewVersion: (serverPath: string) => void
+  onOpenFileHistory: (serverPath: string) => void
+  onGetVersion?: (serverPath: string) => void
+}) {
   if (files.length === 0) {
     return (
       <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
@@ -288,12 +398,38 @@ function ChangesetFilesTable({ files }: { files: HistoryEntry[] }) {
       </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>
+          <ContextMenu key={file.serverPath}>
+            <ContextMenuTrigger asChild>
+              <TableRow className="cursor-default 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>
+            </ContextMenuTrigger>
+            <ContextMenuContent className="w-56">
+              <ContextMenuItem onSelect={() => onViewVersion(file.serverPath)}>
+                查看此版本内容
+              </ContextMenuItem>
+              <ContextMenuItem onSelect={() => onOpenFileHistory(file.serverPath)}>
+                查看该文件历史
+              </ContextMenuItem>
+              {onGetVersion && (
+                <>
+                  <ContextMenuSeparator />
+                  <ContextMenuItem
+                    variant="destructive"
+                    onSelect={() => onGetVersion(file.serverPath)}
+                  >
+                    获取此版本（C{changeset}）…
+                  </ContextMenuItem>
+                </>
+              )}
+            </ContextMenuContent>
+          </ContextMenu>
         ))}
       </TableBody>
     </Table>