532 lines
20 KiB
TypeScript
532 lines
20 KiB
TypeScript
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,
|
|
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"
|
|
|
|
// 历史弹窗当前查看的目标（支持从 changeset 文件下钻到单文件历史后返回）。
|
|
interface HistoryTarget {
|
|
serverPath: string
|
|
folder: boolean
|
|
}
|
|
|
|
// 「获取此版本」待确认信息。
|
|
interface VersionConfirm {
|
|
serverPath: string
|
|
changeset: number
|
|
folder: boolean
|
|
}
|
|
|
|
// 「回滚」待确认信息：single 仅反做该变更集，toVersion 反做其后全部改动。
|
|
interface RollbackConfirm {
|
|
serverPath: string
|
|
changeset: number
|
|
mode: "single" | "toVersion"
|
|
}
|
|
|
|
/**
|
|
* History 弹窗：展示文件或目录历史（最近记录）。
|
|
* 目录历史可下钻 changeset 影响文件；changeset 文件支持右键查看此版本 /
|
|
* 查看该文件历史（可返回）/ 获取此版本；文件历史可勾选两个版本进入版本对比；
|
|
* 每条记录支持「获取此版本…」（确认后用该版本覆盖本地）。
|
|
*/
|
|
export function HistoryDialog({
|
|
serverPath,
|
|
folder,
|
|
onClose,
|
|
onDiffRevisions,
|
|
onGetVersion,
|
|
onRollback,
|
|
}: {
|
|
serverPath: string
|
|
folder: boolean
|
|
onClose: () => void
|
|
onDiffRevisions?: (serverPath: string, source: number, target: number) => void
|
|
onGetVersion?: (serverPath: string, changeset: number, folder: boolean) => Promise<boolean>
|
|
onRollback?: (serverPath: string, mode: "single" | "toVersion", changeset: number) => 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)
|
|
// 目录历史下钻：当前查看的 changeset 文件列表，null 表示在历史主列表。
|
|
const [changesetFiles, setChangesetFiles] = useState<{
|
|
changeset: number
|
|
files: HistoryEntry[]
|
|
} | null>(null)
|
|
const [filesLoading, setFilesLoading] = useState(false)
|
|
// 文件历史勾选的 changeset（最多两个），用于版本对比。
|
|
const [selected, setSelected] = useState<number[]>([])
|
|
const [confirmVersion, setConfirmVersion] = useState<VersionConfirm | null>(null)
|
|
// 「回滚」待确认信息。
|
|
const [confirmRollback, setConfirmRollback] = useState<RollbackConfirm | 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: target.serverPath, folder: target.folder })
|
|
if (!active) {
|
|
return
|
|
}
|
|
setLoading(false)
|
|
if (!result.ok) {
|
|
setError(result.errorMessage ?? "历史加载失败")
|
|
return
|
|
}
|
|
setError(null)
|
|
setEntries(result.data?.history ?? [])
|
|
})()
|
|
return () => {
|
|
active = false
|
|
}
|
|
}, [target])
|
|
|
|
/**
|
|
* 目录历史下钻：加载指定 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 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，最多保留两个（先进先出）。
|
|
*/
|
|
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 && !target.folder && selected.length === 2
|
|
|
|
return (
|
|
<Dialog open onOpenChange={(open) => !open && onClose()}>
|
|
<DialogContent className="flex h-[88svh] max-h-[88svh] flex-col sm:max-w-[88vw]">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{changesetFiles ? `Changeset ${changesetFiles.changeset} 的文件` : "历史记录"}
|
|
</DialogTitle>
|
|
<DialogDescription className="font-mono text-xs">
|
|
{target.serverPath}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
{(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>
|
|
)}
|
|
|
|
<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}
|
|
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">
|
|
没有历史记录
|
|
</div>
|
|
) : (
|
|
<Table>
|
|
<TableHeader className="sticky top-0 z-10 bg-background">
|
|
<TableRow className="hover:bg-transparent">
|
|
{!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>
|
|
<TableHead className="h-8 w-36 text-xs text-muted-foreground">时间</TableHead>
|
|
<TableHead className="h-8 text-xs text-muted-foreground">注释</TableHead>
|
|
{onGetVersion && <TableHead className="h-8 w-12 text-xs text-muted-foreground" />}
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{entries.map((entry) => (
|
|
<ContextMenu key={`${entry.changeset}-${entry.serverPath}`}>
|
|
<ContextMenuTrigger asChild>
|
|
<TableRow
|
|
className="cursor-default select-none"
|
|
onDoubleClick={() => {
|
|
if (target.folder) {
|
|
void openChangeset(entry.changeset)
|
|
}
|
|
}}
|
|
>
|
|
{!target.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">
|
|
{target.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>
|
|
{onGetVersion && (
|
|
<TableCell className="py-1.5">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
title={`获取此版本（C${entry.changeset}，覆盖本地）`}
|
|
onClick={() =>
|
|
setConfirmVersion({
|
|
serverPath: target.serverPath,
|
|
changeset: entry.changeset,
|
|
folder: target.folder,
|
|
})
|
|
}
|
|
>
|
|
<CloudDownload />
|
|
</Button>
|
|
</TableCell>
|
|
)}
|
|
</TableRow>
|
|
</ContextMenuTrigger>
|
|
{(onGetVersion || onRollback) && (
|
|
<ContextMenuContent className="w-60">
|
|
{onGetVersion && (
|
|
<ContextMenuItem
|
|
onSelect={() =>
|
|
setConfirmVersion({
|
|
serverPath: target.serverPath,
|
|
changeset: entry.changeset,
|
|
folder: target.folder,
|
|
})
|
|
}
|
|
>
|
|
获取此版本（C{entry.changeset}）…
|
|
</ContextMenuItem>
|
|
)}
|
|
{onGetVersion && onRollback && <ContextMenuSeparator />}
|
|
{onRollback && (
|
|
<>
|
|
<ContextMenuItem
|
|
variant="destructive"
|
|
onSelect={() =>
|
|
setConfirmRollback({
|
|
serverPath: target.serverPath,
|
|
changeset: entry.changeset,
|
|
mode: "single",
|
|
})
|
|
}
|
|
>
|
|
回滚此变更集（C{entry.changeset}）…
|
|
</ContextMenuItem>
|
|
<ContextMenuItem
|
|
variant="destructive"
|
|
onSelect={() =>
|
|
setConfirmRollback({
|
|
serverPath: target.serverPath,
|
|
changeset: entry.changeset,
|
|
mode: "toVersion",
|
|
})
|
|
}
|
|
>
|
|
回滚到此变更集（C{entry.changeset}）…
|
|
</ContextMenuItem>
|
|
</>
|
|
)}
|
|
</ContextMenuContent>
|
|
)}
|
|
</ContextMenu>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex shrink-0 items-center justify-between">
|
|
<p className="text-xs text-muted-foreground">
|
|
{changesetFiles
|
|
? `${changesetFiles.files.length} 个文件 · 右键文件可查看此版本 / 历史 / 获取`
|
|
: target.folder
|
|
? "双击记录或点击 changeset 编号查看影响文件"
|
|
: "勾选两个版本可进行对比"}
|
|
</p>
|
|
{!target.folder && onDiffRevisions && (
|
|
<Button
|
|
size="sm"
|
|
disabled={!canDiff}
|
|
onClick={() => {
|
|
const [a, b] = [...selected].sort((x, y) => x - y)
|
|
onDiffRevisions(target.serverPath, a, b)
|
|
}}
|
|
>
|
|
对比所选版本
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{confirmVersion && onGetVersion && (
|
|
<ConfirmDialog
|
|
title={`获取版本 C${confirmVersion.changeset}`}
|
|
description={
|
|
<>
|
|
<p>
|
|
将把 <span className="font-mono text-xs">{confirmVersion.serverPath}</span>{" "}
|
|
的本地内容替换为 changeset {confirmVersion.changeset} 的版本。
|
|
</p>
|
|
<p className="mt-2 font-medium text-destructive">
|
|
本地未签入的修改会被覆盖，且无法恢复。确定继续吗？
|
|
</p>
|
|
</>
|
|
}
|
|
confirmLabel="获取此版本"
|
|
danger
|
|
onConfirm={async () => {
|
|
await onGetVersion(
|
|
confirmVersion.serverPath,
|
|
confirmVersion.changeset,
|
|
confirmVersion.folder,
|
|
)
|
|
setConfirmVersion(null)
|
|
}}
|
|
onClose={() => setConfirmVersion(null)}
|
|
/>
|
|
)}
|
|
|
|
{confirmRollback && onRollback && (
|
|
<ConfirmDialog
|
|
title={
|
|
confirmRollback.mode === "single"
|
|
? `回滚变更集 C${confirmRollback.changeset}`
|
|
: `回滚到变更集 C${confirmRollback.changeset}`
|
|
}
|
|
description={
|
|
<>
|
|
<p>
|
|
将对 <span className="font-mono text-xs">{confirmRollback.serverPath}</span>{" "}
|
|
{confirmRollback.mode === "single"
|
|
? `反做变更集 C${confirmRollback.changeset} 的改动。`
|
|
: `反做 C${confirmRollback.changeset} 之后的全部改动（回到该变更集时刻的内容）。`}
|
|
</p>
|
|
<p className="mt-2">
|
|
回滚只会产生挂起更改，不会直接写入服务器；可在挂起更改面板审查、撤销，确认无误后签入。
|
|
</p>
|
|
</>
|
|
}
|
|
confirmLabel="执行回滚"
|
|
danger
|
|
onConfirm={async () => {
|
|
await onRollback(
|
|
confirmRollback.serverPath,
|
|
confirmRollback.mode,
|
|
confirmRollback.changeset,
|
|
)
|
|
setConfirmRollback(null)
|
|
}}
|
|
onClose={() => setConfirmRollback(null)}
|
|
/>
|
|
)}
|
|
|
|
{viewVersion && (
|
|
<FileViewDialog
|
|
serverPath={viewVersion.serverPath}
|
|
localPath={null}
|
|
changeset={viewVersion.changeset}
|
|
onClose={() => setViewVersion(null)}
|
|
/>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Changeset 影响文件列表（目录历史下钻视图），行级右键菜单提供对象操作。
|
|
*/
|
|
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">
|
|
该 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) => (
|
|
<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>
|
|
)
|
|
}
|