chore: 将 main 整棵树对齐到 feature 分支（移除并行分支遗留文件与重复声明，确保可构建）
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
fenghp
@@ -1,203 +0,0 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { GitCompareArrows, Loader2, RefreshCw, Search, X } from "lucide-react"
|
||||
|
||||
import { Button } from "~/components/ui/button"
|
||||
import { diffLocalLatest, diffRevisions } from "~/lib/api/endpoints"
|
||||
import type { TfsTextDiff } from "~/lib/api/types"
|
||||
|
||||
export type DiffPanelRequest =
|
||||
| {
|
||||
type: "localLatest"
|
||||
serverPath: string
|
||||
localPath: string
|
||||
label: string
|
||||
}
|
||||
| {
|
||||
type: "revisions"
|
||||
serverPath: string
|
||||
sourceChangeset: number
|
||||
targetChangeset: number
|
||||
label: string
|
||||
}
|
||||
|
||||
interface DiffPanelProps {
|
||||
request: DiffPanelRequest
|
||||
onClose(): void
|
||||
}
|
||||
|
||||
interface DiffRow {
|
||||
source?: string
|
||||
target?: string
|
||||
kind: "same" | "removed" | "added"
|
||||
}
|
||||
|
||||
/**
|
||||
* 展示文本 Diff 面板，支持本地 vs latest 和两个历史版本对比。
|
||||
*/
|
||||
export function DiffPanel({ request, onClose }: DiffPanelProps) {
|
||||
const [diff, setDiff] = useState<TfsTextDiff>()
|
||||
const [search, setSearch] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [message, setMessage] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
loadDiff()
|
||||
}, [request])
|
||||
|
||||
const rows = diff ? toDiffRows(diff.lines) : []
|
||||
const lowerSearch = search.trim().toLowerCase()
|
||||
|
||||
/**
|
||||
* 根据当前请求类型加载文本 diff。
|
||||
*/
|
||||
async function loadDiff() {
|
||||
setLoading(true)
|
||||
setMessage("")
|
||||
|
||||
const result =
|
||||
request.type === "localLatest"
|
||||
? await diffLocalLatest({
|
||||
serverPath: request.serverPath,
|
||||
localPath: request.localPath,
|
||||
})
|
||||
: await diffRevisions({
|
||||
serverPath: request.serverPath,
|
||||
sourceChangeset: request.sourceChangeset,
|
||||
targetChangeset: request.targetChangeset,
|
||||
})
|
||||
setLoading(false)
|
||||
|
||||
if (!result.success || !result.data.diff) {
|
||||
setDiff(undefined)
|
||||
setMessage(
|
||||
result.errorMessage ||
|
||||
result.message ||
|
||||
"大文件、二进制或不支持类型无法展示文本 diff。"
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
setDiff(result.data.diff)
|
||||
}
|
||||
|
||||
/**
|
||||
* 将后端统一 diff lines 转为左右两栏展示行。
|
||||
*/
|
||||
function toDiffRows(lines: string[]): DiffRow[] {
|
||||
return lines.map((line) => {
|
||||
const prefix = line.charAt(0)
|
||||
const content = line.slice(1)
|
||||
if (prefix === "-") {
|
||||
return { source: content, kind: "removed" }
|
||||
}
|
||||
if (prefix === "+") {
|
||||
return { target: content, kind: "added" }
|
||||
}
|
||||
return { source: content, target: content, kind: "same" }
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-[min(720px,calc(100svh-96px))] min-h-0 flex-col bg-background">
|
||||
<div className="flex min-h-9 items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-1.5 font-medium">
|
||||
<GitCompareArrows className="size-3.5" />
|
||||
Diff
|
||||
</div>
|
||||
<div className="truncate font-mono text-muted-foreground">
|
||||
{request.label}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<div className="flex h-7 items-center gap-1 rounded-[6px] border bg-background px-2">
|
||||
<Search className="size-3.5 text-muted-foreground" />
|
||||
<input
|
||||
className="w-36 bg-transparent text-xs outline-none"
|
||||
value={search}
|
||||
placeholder="搜索"
|
||||
onChange={(event) => setSearch(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="ghost"
|
||||
disabled={loading}
|
||||
title="刷新 Diff"
|
||||
onClick={loadDiff}
|
||||
>
|
||||
{loading ? <Loader2 className="animate-spin" /> : <RefreshCw />}
|
||||
</Button>
|
||||
<Button size="icon-xs" variant="ghost" title="关闭" onClick={onClose}>
|
||||
<X />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className="border-t border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{diff && (
|
||||
<div className="min-h-0 flex-1 border-t">
|
||||
<div className="grid h-8 grid-cols-2 border-b bg-muted/20 px-3 text-xs font-medium text-muted-foreground">
|
||||
<div className="flex min-w-0 items-center truncate font-mono">
|
||||
{diff.sourceLabel}
|
||||
</div>
|
||||
<div className="flex min-w-0 items-center truncate border-l pl-3 font-mono">
|
||||
{diff.targetLabel}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[calc(100%-2rem)] overflow-auto font-mono text-xs">
|
||||
{rows.length === 0 ? (
|
||||
<div className="px-3 py-4 text-muted-foreground">
|
||||
无可展示 diff 内容。
|
||||
</div>
|
||||
) : (
|
||||
rows.map((row, index) => (
|
||||
<div
|
||||
key={`${index}:${row.kind}`}
|
||||
className={`grid min-h-6 grid-cols-[48px_minmax(0,1fr)_48px_minmax(0,1fr)] border-b ${
|
||||
lowerSearch &&
|
||||
`${row.source || ""}\n${row.target || ""}`
|
||||
.toLowerCase()
|
||||
.includes(lowerSearch)
|
||||
? "bg-amber-50"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<div className="bg-muted/20 px-2 py-1 text-right text-muted-foreground">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div
|
||||
className={`whitespace-pre-wrap px-2 py-1 ${
|
||||
row.kind === "removed"
|
||||
? "bg-red-50 text-red-700"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{row.source ?? ""}
|
||||
</div>
|
||||
<div className="border-l bg-muted/20 px-2 py-1 text-right text-muted-foreground">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div
|
||||
className={`whitespace-pre-wrap px-2 py-1 ${
|
||||
row.kind === "added"
|
||||
? "bg-green-50 text-green-700"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
{row.target ?? ""}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,142 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from "react"
|
||||
import { Loader2, RefreshCw, Search } from "lucide-react"
|
||||
|
||||
import { Button } from "~/components/ui/button"
|
||||
import { getFileContent } from "~/lib/api/endpoints"
|
||||
|
||||
interface FileViewerDialogProps {
|
||||
serverPath: string
|
||||
localPath?: string
|
||||
preferLocal: boolean
|
||||
open: boolean
|
||||
onClose(): void
|
||||
}
|
||||
|
||||
/**
|
||||
* 只读展示本地映射文件或服务器 latest 文件内容，并处理大文件和二进制提示。
|
||||
*/
|
||||
export function FileViewerDialog({
|
||||
serverPath,
|
||||
localPath,
|
||||
preferLocal,
|
||||
open,
|
||||
}: FileViewerDialogProps) {
|
||||
const [content, setContent] = useState("")
|
||||
const [source, setSource] = useState("")
|
||||
const [size, setSize] = useState(0)
|
||||
const [encoding, setEncoding] = useState("")
|
||||
const [renderable, setRenderable] = useState(false)
|
||||
const [binary, setBinary] = useState(false)
|
||||
const [search, setSearch] = useState("")
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [message, setMessage] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
loadContent()
|
||||
}
|
||||
}, [open, serverPath, localPath, preferLocal])
|
||||
|
||||
const lines = useMemo(() => content.split(/\r?\n/), [content])
|
||||
const lowerSearch = search.trim().toLowerCase()
|
||||
|
||||
/**
|
||||
* 读取文件内容，优先本地映射文件，不满足条件时由调用方指定读取服务器 latest。
|
||||
*/
|
||||
async function loadContent() {
|
||||
setLoading(true)
|
||||
setMessage("")
|
||||
|
||||
const result = await getFileContent({
|
||||
serverPath,
|
||||
localPath,
|
||||
preferLocal,
|
||||
})
|
||||
setLoading(false)
|
||||
|
||||
const file = result.data.file
|
||||
if (!result.success || !file) {
|
||||
setContent("")
|
||||
setRenderable(false)
|
||||
setMessage(result.errorMessage || result.message)
|
||||
return
|
||||
}
|
||||
|
||||
setContent(file.content || "")
|
||||
setSource(file.source)
|
||||
setSize(file.size)
|
||||
setEncoding(file.encoding)
|
||||
setRenderable(file.renderable)
|
||||
setBinary(file.binary)
|
||||
setMessage("")
|
||||
}
|
||||
|
||||
if (!open) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-[min(720px,calc(100svh-96px))] min-h-0 flex-col">
|
||||
<div className="flex h-10 shrink-0 items-center justify-between gap-3 border-b px-3">
|
||||
<div className="min-w-0 truncate text-xs text-muted-foreground">
|
||||
来源：{source || (preferLocal ? "local" : "server")} · {size} bytes ·{" "}
|
||||
{encoding || "-"}
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<div className="flex h-7 items-center gap-1 rounded-[6px] border bg-background px-2">
|
||||
<Search className="size-3.5 text-muted-foreground" />
|
||||
<input
|
||||
className="w-36 bg-transparent text-xs outline-none"
|
||||
value={search}
|
||||
placeholder="搜索"
|
||||
onChange={(event) => setSearch(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="ghost"
|
||||
disabled={loading}
|
||||
title="刷新"
|
||||
onClick={loadContent}
|
||||
>
|
||||
{loading ? <Loader2 className="animate-spin" /> : <RefreshCw />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className="border-b border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!renderable && !message ? (
|
||||
<div className="flex flex-1 items-center justify-center text-sm text-muted-foreground">
|
||||
{binary ? "二进制文件不支持文本预览。" : "文件超过 5MB，不直接渲染内容。"}
|
||||
</div>
|
||||
) : (
|
||||
<div className="min-h-0 flex-1 overflow-auto bg-background font-mono text-xs">
|
||||
{lines.map((line, index) => {
|
||||
const matched =
|
||||
lowerSearch && line.toLowerCase().includes(lowerSearch)
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`grid min-h-6 grid-cols-[56px_minmax(0,1fr)] border-b ${
|
||||
matched ? "bg-amber-50" : ""
|
||||
}`}
|
||||
>
|
||||
<div className="bg-muted/20 px-2 py-1 text-right text-muted-foreground">
|
||||
{index + 1}
|
||||
</div>
|
||||
<pre className="overflow-visible whitespace-pre-wrap px-2 py-1">
|
||||
{line || " "}
|
||||
</pre>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,293 +0,0 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { FileText, Folder, GitCompareArrows, Loader2, RefreshCw } from "lucide-react"
|
||||
|
||||
import { ContextMenu } from "~/components/app/context-menu"
|
||||
import type { ContextMenuItem, ContextMenuState } from "~/components/app/context-menu"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import {
|
||||
addFiles,
|
||||
checkoutFiles,
|
||||
compareFolder,
|
||||
deleteFiles,
|
||||
getLatest,
|
||||
undoFiles,
|
||||
} from "~/lib/api/endpoints"
|
||||
import type { FolderDiffItem, FolderDiffStatus } from "~/lib/api/types"
|
||||
|
||||
interface FolderCompareDialogProps {
|
||||
serverPath: string
|
||||
localPath: string
|
||||
open: boolean
|
||||
onPendingChangesRefresh(): void
|
||||
onOpenDiff(diff: FolderDiffItem): void
|
||||
}
|
||||
|
||||
const STATUS_LABELS: Record<FolderDiffStatus, string> = {
|
||||
localModified: "本地修改",
|
||||
remoteChanged: "服务端有更新",
|
||||
bothChanged: "本地和服务端都变更",
|
||||
localOnly: "本地新增",
|
||||
remoteOnly: "服务端新增",
|
||||
notDownloaded: "未下载",
|
||||
localDeleted: "本地删除",
|
||||
pendingEdit: "已签出编辑",
|
||||
pendingAdd: "待新增",
|
||||
pendingDelete: "待删除",
|
||||
upToDate: "已同步",
|
||||
}
|
||||
|
||||
/**
|
||||
* 展示已映射目录的差异结果，并通过右键菜单执行差异项操作。
|
||||
*/
|
||||
export function FolderCompareDialog({
|
||||
serverPath,
|
||||
localPath,
|
||||
open,
|
||||
onPendingChangesRefresh,
|
||||
onOpenDiff,
|
||||
}: FolderCompareDialogProps) {
|
||||
const [diffs, setDiffs] = useState<FolderDiffItem[]>([])
|
||||
const [statusFilter, setStatusFilter] = useState("all")
|
||||
const [hideUpToDate, setHideUpToDate] = useState(true)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [operationPath, setOperationPath] = useState("")
|
||||
const [message, setMessage] = useState("")
|
||||
const [menu, setMenu] = useState<ContextMenuState>()
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
loadCompare()
|
||||
}
|
||||
}, [open, serverPath, localPath])
|
||||
|
||||
const visibleDiffs = diffs.filter((diff) => {
|
||||
if (hideUpToDate && diff.status === "upToDate") {
|
||||
return false
|
||||
}
|
||||
return statusFilter === "all" || diff.status === statusFilter
|
||||
})
|
||||
|
||||
/**
|
||||
* 调用目录对比 API，返回当前本地目录与服务器目录的元数据差异。
|
||||
*/
|
||||
async function loadCompare() {
|
||||
setLoading(true)
|
||||
setMessage("")
|
||||
const result = await compareFolder({
|
||||
serverPath,
|
||||
localPath,
|
||||
recursive: true,
|
||||
})
|
||||
setLoading(false)
|
||||
|
||||
if (!result.success) {
|
||||
setDiffs([])
|
||||
setMessage(result.errorMessage || result.message)
|
||||
return
|
||||
}
|
||||
|
||||
setDiffs(result.data.diffs)
|
||||
setMessage(
|
||||
result.data.diffs.length
|
||||
? `发现 ${result.data.diffs.length} 个差异。`
|
||||
: "未发现差异。"
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行单个目录对比差异项上的文件操作，完成后保留用户重新对比入口。
|
||||
*/
|
||||
async function runDiffAction(action: string, diff: FolderDiffItem) {
|
||||
setOperationPath(diff.serverPath)
|
||||
setMessage("")
|
||||
const result =
|
||||
action === "getLatest"
|
||||
? await getLatest({
|
||||
serverPath: diff.serverPath,
|
||||
recursive: diff.folder,
|
||||
})
|
||||
: action === "checkout"
|
||||
? await checkoutFiles({
|
||||
paths: [diff.serverPath],
|
||||
recursive: diff.folder,
|
||||
})
|
||||
: action === "add"
|
||||
? await addFiles({
|
||||
paths: [diff.localPath],
|
||||
recursive: diff.folder,
|
||||
})
|
||||
: action === "delete"
|
||||
? await deleteFiles({
|
||||
paths: [diff.serverPath],
|
||||
recursive: diff.folder,
|
||||
})
|
||||
: await undoFiles({
|
||||
paths: [diff.serverPath],
|
||||
recursive: diff.folder,
|
||||
})
|
||||
setOperationPath("")
|
||||
|
||||
if (!result.success) {
|
||||
setMessage(result.errorMessage || result.message)
|
||||
return
|
||||
}
|
||||
|
||||
if (action !== "getLatest") {
|
||||
onPendingChangesRefresh()
|
||||
}
|
||||
setMessage("操作完成，请重新对比刷新差异。")
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据差异状态生成右键菜单项，避免不可执行状态展示错误操作。
|
||||
*/
|
||||
function buildMenuItems(diff: FolderDiffItem): ContextMenuItem[] {
|
||||
return [
|
||||
{
|
||||
key: "diff",
|
||||
label: "比较本地与服务器 Latest",
|
||||
hidden:
|
||||
diff.folder ||
|
||||
!["localModified", "remoteChanged", "bothChanged", "pendingEdit"].includes(
|
||||
diff.status
|
||||
),
|
||||
onSelect: () => onOpenDiff(diff),
|
||||
},
|
||||
{
|
||||
key: "getLatest",
|
||||
label: "获取最新版本",
|
||||
hidden: !["remoteChanged", "remoteOnly", "notDownloaded"].includes(diff.status),
|
||||
onSelect: () => runDiffAction("getLatest", diff),
|
||||
},
|
||||
{
|
||||
key: "checkout",
|
||||
label: "签出",
|
||||
hidden: !["localModified"].includes(diff.status),
|
||||
onSelect: () => runDiffAction("checkout", diff),
|
||||
},
|
||||
{
|
||||
key: "add",
|
||||
label: "新增本地文件到服务器",
|
||||
hidden: diff.status !== "localOnly",
|
||||
onSelect: () => runDiffAction("add", diff),
|
||||
},
|
||||
{
|
||||
key: "delete",
|
||||
label: "删除",
|
||||
hidden: diff.status !== "localDeleted",
|
||||
danger: true,
|
||||
onSelect: () => runDiffAction("delete", diff),
|
||||
},
|
||||
{
|
||||
key: "undo",
|
||||
label: "撤销挂起更改",
|
||||
hidden: !diff.status.startsWith("pending"),
|
||||
onSelect: () => runDiffAction("undo", diff),
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
if (!open) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-[min(720px,calc(100svh-96px))] min-h-0 flex-col">
|
||||
<ContextMenu menu={menu} onClose={() => setMenu(undefined)} />
|
||||
<div className="flex min-h-10 shrink-0 items-center justify-between gap-3 border-b px-3 text-xs">
|
||||
<div className="min-w-0 truncate font-mono text-muted-foreground">
|
||||
{localPath}
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<label className="flex items-center gap-1.5 text-muted-foreground">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={hideUpToDate}
|
||||
onChange={(event) => setHideUpToDate(event.target.checked)}
|
||||
/>
|
||||
隐藏已同步
|
||||
</label>
|
||||
<select
|
||||
className="h-7 rounded-[6px] border bg-background px-2"
|
||||
value={statusFilter}
|
||||
onChange={(event) => setStatusFilter(event.target.value)}
|
||||
>
|
||||
<option value="all">全部状态</option>
|
||||
{Object.entries(STATUS_LABELS).map(([status, label]) => (
|
||||
<option key={status} value={status}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<Button size="sm" variant="outline" disabled={loading} onClick={loadCompare}>
|
||||
{loading ? <Loader2 className="animate-spin" /> : <RefreshCw />}
|
||||
重新对比
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className="border-b bg-muted/10 px-3 py-2 text-xs text-muted-foreground">
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid h-8 shrink-0 grid-cols-[minmax(160px,1fr)_128px_minmax(260px,1.4fr)_80px_80px] border-b bg-muted/20 px-3 text-xs font-medium text-muted-foreground">
|
||||
<div className="flex items-center">名称</div>
|
||||
<div className="flex items-center">状态</div>
|
||||
<div className="flex items-center">服务端路径</div>
|
||||
<div className="flex items-center">本地版本</div>
|
||||
<div className="flex items-center">最新版本</div>
|
||||
</div>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-auto">
|
||||
{visibleDiffs.map((diff) => (
|
||||
<div
|
||||
key={diff.serverPath}
|
||||
className="grid h-8 grid-cols-[minmax(160px,1fr)_128px_minmax(260px,1.4fr)_80px_80px] items-center border-b px-3 text-xs hover:bg-muted/50"
|
||||
onContextMenu={(event) => {
|
||||
event.preventDefault()
|
||||
setMenu({
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
items: buildMenuItems(diff),
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-1.5">
|
||||
{operationPath === diff.serverPath ? (
|
||||
<Loader2 className="size-3.5 shrink-0 animate-spin" />
|
||||
) : diff.folder ? (
|
||||
<Folder className="size-3.5 shrink-0 text-amber-600" />
|
||||
) : (
|
||||
<FileText className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
<span className="truncate">{diff.name}</span>
|
||||
</div>
|
||||
<div className="truncate">{STATUS_LABELS[diff.status]}</div>
|
||||
<div className="truncate font-mono text-muted-foreground">
|
||||
{diff.serverPath}
|
||||
</div>
|
||||
<div className="font-mono text-muted-foreground">
|
||||
{diff.localVersion}
|
||||
</div>
|
||||
<div className="font-mono text-muted-foreground">
|
||||
{diff.latestVersion}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{visibleDiffs.length === 0 && !loading && (
|
||||
<div className="flex h-full items-center justify-center text-sm text-muted-foreground">
|
||||
当前筛选无差异项
|
||||
</div>
|
||||
)}
|
||||
{loading && (
|
||||
<div className="flex h-full items-center justify-center gap-2 text-sm text-muted-foreground">
|
||||
<GitCompareArrows className="size-4" />
|
||||
正在对比
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,322 +0,0 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import {
|
||||
FileText,
|
||||
Folder,
|
||||
GitCompareArrows,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
X,
|
||||
} from "lucide-react"
|
||||
|
||||
import { Button } from "~/components/ui/button"
|
||||
import type { DiffPanelRequest } from "~/components/explorer/diff-panel"
|
||||
import { queryChangesetFiles, queryHistory } from "~/lib/api/endpoints"
|
||||
import type { TfsHistoryEntry } from "~/lib/api/types"
|
||||
|
||||
interface HistoryPanelProps {
|
||||
path: string
|
||||
folder: boolean
|
||||
label: string
|
||||
onOpenDiff(request: DiffPanelRequest): void
|
||||
onClose(): void
|
||||
}
|
||||
|
||||
/**
|
||||
* 展示文件或目录历史，并支持目录 changeset 文件列表和历史 diff 入口。
|
||||
*/
|
||||
export function HistoryPanel({
|
||||
path,
|
||||
folder,
|
||||
label,
|
||||
onOpenDiff,
|
||||
onClose,
|
||||
}: HistoryPanelProps) {
|
||||
const [history, setHistory] = useState<TfsHistoryEntry[]>([])
|
||||
const [changesetFiles, setChangesetFiles] = useState<TfsHistoryEntry[]>([])
|
||||
const [selectedChangeset, setSelectedChangeset] = useState<number>()
|
||||
const [selectedRevisionKeys, setSelectedRevisionKeys] = useState<string[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [filesLoading, setFilesLoading] = useState(false)
|
||||
const [message, setMessage] = useState("")
|
||||
const [diffMessage, setDiffMessage] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
loadHistory()
|
||||
}, [path, folder])
|
||||
|
||||
const selectedRevisions = history.filter((entry) =>
|
||||
selectedRevisionKeys.includes(toHistoryKey(entry))
|
||||
)
|
||||
|
||||
/**
|
||||
* 查询当前文件或目录最近 100 条历史记录。
|
||||
*/
|
||||
async function loadHistory() {
|
||||
setLoading(true)
|
||||
setMessage("")
|
||||
setDiffMessage("")
|
||||
setChangesetFiles([])
|
||||
setSelectedChangeset(undefined)
|
||||
setSelectedRevisionKeys([])
|
||||
|
||||
const result = await queryHistory(path, folder)
|
||||
setLoading(false)
|
||||
|
||||
if (!result.success) {
|
||||
setHistory([])
|
||||
setMessage(result.errorMessage || result.message)
|
||||
return
|
||||
}
|
||||
|
||||
setHistory(result.data.history)
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询目录历史中某个 changeset 影响的文件列表。
|
||||
*/
|
||||
async function loadChangesetFiles(changeset: number) {
|
||||
setFilesLoading(true)
|
||||
setMessage("")
|
||||
setDiffMessage("")
|
||||
setSelectedChangeset(changeset)
|
||||
|
||||
const result = await queryChangesetFiles(changeset)
|
||||
setFilesLoading(false)
|
||||
|
||||
if (!result.success) {
|
||||
setChangesetFiles([])
|
||||
setMessage(result.errorMessage || result.message)
|
||||
return
|
||||
}
|
||||
|
||||
setChangesetFiles(result.data.files)
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用 changeset 作为历史版本选择 key。
|
||||
*/
|
||||
function toHistoryKey(entry: TfsHistoryEntry) {
|
||||
return String(entry.changeset)
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择最多两个文件历史版本，供后续 Diff 面板使用。
|
||||
*/
|
||||
function toggleRevision(entry: TfsHistoryEntry, checked: boolean) {
|
||||
const key = toHistoryKey(entry)
|
||||
setSelectedRevisionKeys((currentKeys) => {
|
||||
if (!checked) {
|
||||
return currentKeys.filter((currentKey) => currentKey !== key)
|
||||
}
|
||||
if (currentKeys.includes(key)) {
|
||||
return currentKeys
|
||||
}
|
||||
return [...currentKeys, key].slice(-2)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化后端毫秒时间戳。
|
||||
*/
|
||||
function formatHistoryDate(date?: number | null) {
|
||||
return date ? new Date(date).toLocaleString() : "-"
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开用户选择的两个历史版本 diff。
|
||||
*/
|
||||
function enterHistoryDiff() {
|
||||
if (selectedRevisions.length !== 2) {
|
||||
return
|
||||
}
|
||||
|
||||
onOpenDiff({
|
||||
type: "revisions",
|
||||
serverPath: path,
|
||||
sourceChangeset: selectedRevisions[0].changeset,
|
||||
targetChangeset: selectedRevisions[1].changeset,
|
||||
label: `${path};C${selectedRevisions[0].changeset} ↔ C${selectedRevisions[1].changeset}`,
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 记录 changeset 文件列表中的单文件 diff 入口。
|
||||
*/
|
||||
function enterChangesetFileDiff(file: TfsHistoryEntry) {
|
||||
setDiffMessage(
|
||||
`已选择 ${file.serverPath} @${file.changeset}。请打开该文件历史并选择两个版本进入 Diff。`
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border-b bg-background">
|
||||
<div className="flex min-h-9 items-center justify-between gap-3 px-3 py-1.5 text-xs">
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium">History</div>
|
||||
<div className="truncate font-mono text-muted-foreground">
|
||||
{label}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="ghost"
|
||||
disabled={loading}
|
||||
title="刷新历史"
|
||||
onClick={loadHistory}
|
||||
>
|
||||
{loading ? <Loader2 className="animate-spin" /> : <RefreshCw />}
|
||||
</Button>
|
||||
<Button size="icon-xs" variant="ghost" title="关闭" onClick={onClose}>
|
||||
<X />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className="border-t border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{diffMessage && (
|
||||
<div className="border-t bg-muted/10 px-3 py-2 text-xs text-muted-foreground">
|
||||
{diffMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid max-h-80 border-t md:grid-cols-[minmax(0,1fr)_300px]">
|
||||
<div className="min-h-0 overflow-auto">
|
||||
<div className="min-w-[760px]">
|
||||
<div className="grid h-7 grid-cols-[36px_86px_110px_130px_150px_minmax(180px,1fr)] border-b bg-muted/20 px-3 text-xs font-medium text-muted-foreground">
|
||||
<div className="flex items-center">Diff</div>
|
||||
<div className="flex items-center">Changeset</div>
|
||||
<div className="flex items-center">变更</div>
|
||||
<div className="flex items-center">作者</div>
|
||||
<div className="flex items-center">时间</div>
|
||||
<div className="flex items-center">Comment</div>
|
||||
</div>
|
||||
|
||||
{history.length === 0 && !loading ? (
|
||||
<div className="px-3 py-4 text-xs text-muted-foreground">
|
||||
暂无历史记录。
|
||||
</div>
|
||||
) : (
|
||||
history.map((entry) => (
|
||||
<div
|
||||
key={toHistoryKey(entry)}
|
||||
className={`grid min-h-8 grid-cols-[36px_86px_110px_130px_150px_minmax(180px,1fr)] items-center border-b px-3 text-xs ${
|
||||
selectedChangeset === entry.changeset
|
||||
? "bg-primary/10"
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<label className="flex items-center justify-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
disabled={folder}
|
||||
checked={selectedRevisionKeys.includes(
|
||||
toHistoryKey(entry)
|
||||
)}
|
||||
aria-label={`选择 changeset ${entry.changeset}`}
|
||||
onChange={(event) =>
|
||||
toggleRevision(entry, event.target.checked)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<div className="font-mono">{entry.changeset}</div>
|
||||
<div className="truncate text-muted-foreground">
|
||||
{entry.changeType || "-"}
|
||||
</div>
|
||||
<div className="truncate">{entry.author || "-"}</div>
|
||||
<div className="truncate text-muted-foreground">
|
||||
{formatHistoryDate(entry.date)}
|
||||
</div>
|
||||
<div className="flex min-w-0 items-center justify-between gap-2">
|
||||
<span className="truncate">{entry.comment || "-"}</span>
|
||||
{folder && (
|
||||
<Button
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
onClick={() => loadChangesetFiles(entry.changeset)}
|
||||
>
|
||||
文件
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="min-h-0 border-t bg-muted/10 p-2 text-xs md:border-t-0 md:border-l">
|
||||
{folder ? (
|
||||
<div className="grid gap-2">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-medium">
|
||||
Changeset {selectedChangeset ?? "-"}
|
||||
</span>
|
||||
{filesLoading && <Loader2 className="size-3 animate-spin" />}
|
||||
</div>
|
||||
{changesetFiles.length === 0 ? (
|
||||
<div className="text-muted-foreground">
|
||||
点击目录历史 changeset 查看影响文件。
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid max-h-64 gap-2 overflow-auto">
|
||||
{changesetFiles.map((file) => (
|
||||
<div
|
||||
key={`${file.changeset}:${file.serverPath}`}
|
||||
className="grid gap-1 border-b pb-2 last:border-b-0 last:pb-0"
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-1.5">
|
||||
{file.itemType.toLowerCase().includes("folder") ? (
|
||||
<Folder className="size-3.5 shrink-0 text-amber-600" />
|
||||
) : (
|
||||
<FileText className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
<span className="truncate font-mono">
|
||||
{file.serverPath}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="text-muted-foreground">
|
||||
{file.changeType || "-"}
|
||||
</span>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="outline"
|
||||
onClick={() => enterChangesetFileDiff(file)}
|
||||
>
|
||||
<GitCompareArrows />
|
||||
Diff
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-2">
|
||||
<div className="font-medium">历史 Diff</div>
|
||||
<div className="text-muted-foreground">
|
||||
选择两个历史版本后进入 Diff。
|
||||
</div>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="outline"
|
||||
disabled={selectedRevisions.length !== 2}
|
||||
onClick={enterHistoryDiff}
|
||||
>
|
||||
<GitCompareArrows />
|
||||
Diff
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,224 +0,0 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
FileText,
|
||||
Folder,
|
||||
Loader2,
|
||||
} from "lucide-react"
|
||||
|
||||
import { listServerTree } from "~/lib/api/endpoints"
|
||||
import type { TfsServerItem } from "~/lib/api/types"
|
||||
|
||||
interface ServerTreePanelProps {
|
||||
connected: boolean
|
||||
collection: string
|
||||
selectedPath: string
|
||||
onPathSelect(path: string): void
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染固定 Collection 下的服务端目录树，并在展开目录时按需请求子节点。
|
||||
*/
|
||||
export function ServerTreePanel({
|
||||
connected,
|
||||
collection,
|
||||
selectedPath,
|
||||
onPathSelect,
|
||||
}: ServerTreePanelProps) {
|
||||
const [expandedPaths, setExpandedPaths] = useState<string[]>([])
|
||||
const [itemsByPath, setItemsByPath] = useState<
|
||||
Record<string, TfsServerItem[]>
|
||||
>({})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [errorMessage, setErrorMessage] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
if (!connected || !collection) {
|
||||
setExpandedPaths([])
|
||||
setItemsByPath({})
|
||||
return
|
||||
}
|
||||
|
||||
setExpandedPaths(["$/"])
|
||||
setItemsByPath({})
|
||||
loadServerItems(collection, "$/")
|
||||
}, [connected, collection])
|
||||
|
||||
useEffect(() => {
|
||||
if (connected && collection && selectedPath) {
|
||||
expandToPath(selectedPath)
|
||||
}
|
||||
}, [connected, collection, selectedPath])
|
||||
|
||||
/**
|
||||
* 加载指定目录的一层子节点，未映射目录也直接按服务端路径浏览。
|
||||
*/
|
||||
async function loadServerItems(collection: string, path: string) {
|
||||
setLoading(true)
|
||||
setErrorMessage("")
|
||||
|
||||
const result = await listServerTree(path, collection)
|
||||
setLoading(false)
|
||||
|
||||
if (!result.success) {
|
||||
setErrorMessage(result.errorMessage || result.message)
|
||||
return
|
||||
}
|
||||
|
||||
setItemsByPath((currentItems) => ({
|
||||
...currentItems,
|
||||
[path]: result.data.items,
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据中间文件列表进入的目录路径，展开并选中左侧树对应父级。
|
||||
*/
|
||||
async function expandToPath(path: string) {
|
||||
const parents = parentPaths(path)
|
||||
setExpandedPaths((currentPaths) =>
|
||||
Array.from(new Set([...currentPaths, ...parents]))
|
||||
)
|
||||
for (const parent of parents) {
|
||||
if (!itemsByPath[parent]) {
|
||||
await loadServerItems(collection, parent)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成服务端路径的父级目录列表，根路径固定为 $/。
|
||||
*/
|
||||
function parentPaths(path: string) {
|
||||
const result = ["$/"]
|
||||
if (!path || path === "$/") {
|
||||
return result
|
||||
}
|
||||
const parts = path.replace(/^\$\//, "").split("/").filter(Boolean)
|
||||
let current = "$"
|
||||
for (let index = 0; index < parts.length - 1; index++) {
|
||||
current = `${current}/${parts[index]}`
|
||||
result.push(current === "$" ? "$/" : current)
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
/**
|
||||
* 选中节点并通知中间区域当前服务端路径已变化。
|
||||
*/
|
||||
function selectPath(path: string) {
|
||||
onPathSelect(path)
|
||||
}
|
||||
|
||||
/**
|
||||
* 展开或收起目录；首次展开时才加载子节点。
|
||||
*/
|
||||
async function toggleFolder(item: TfsServerItem) {
|
||||
selectPath(item.serverPath)
|
||||
if (!item.folder || !collection) {
|
||||
return
|
||||
}
|
||||
|
||||
if (expandedPaths.includes(item.serverPath)) {
|
||||
setExpandedPaths((currentPaths) =>
|
||||
currentPaths.filter((path) => path !== item.serverPath)
|
||||
)
|
||||
return
|
||||
}
|
||||
|
||||
setExpandedPaths((currentPaths) => [...currentPaths, item.serverPath])
|
||||
if (!itemsByPath[item.serverPath]) {
|
||||
await loadServerItems(collection, item.serverPath)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 按层级渲染目录树节点。
|
||||
*/
|
||||
function renderItems(path: string, level = 0) {
|
||||
const items = itemsByPath[path] || []
|
||||
|
||||
return items.map((item) => {
|
||||
const expanded = expandedPaths.includes(item.serverPath)
|
||||
const selected = selectedPath === item.serverPath
|
||||
|
||||
return (
|
||||
<div key={item.serverPath}>
|
||||
<button
|
||||
className={`flex h-7 w-full items-center gap-1.5 rounded-[6px] px-2 text-left text-xs ${
|
||||
selected ? "bg-primary/10 text-primary" : "hover:bg-muted"
|
||||
}`}
|
||||
style={{ paddingLeft: 8 + level * 14 }}
|
||||
onClick={() => toggleFolder(item)}
|
||||
>
|
||||
{item.folder ? (
|
||||
expanded ? (
|
||||
<ChevronDown className="size-3.5 shrink-0" />
|
||||
) : (
|
||||
<ChevronRight className="size-3.5 shrink-0" />
|
||||
)
|
||||
) : (
|
||||
<span className="w-3.5 shrink-0" />
|
||||
)}
|
||||
{item.folder ? (
|
||||
<Folder className="size-3.5 shrink-0 text-amber-600" />
|
||||
) : (
|
||||
<FileText className="size-3.5 shrink-0 text-muted-foreground" />
|
||||
)}
|
||||
<span className="truncate">{item.name}</span>
|
||||
</button>
|
||||
|
||||
{item.folder && expanded && renderItems(item.serverPath, level + 1)}
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
if (!connected || !collection) {
|
||||
return <div className="px-2 py-1 text-xs text-muted-foreground">未连接</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-2">
|
||||
{loading && (
|
||||
<div className="flex items-center gap-2 px-2 text-xs text-muted-foreground">
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
加载中
|
||||
</div>
|
||||
)}
|
||||
|
||||
{errorMessage && (
|
||||
<div className="rounded-[6px] border border-destructive/30 bg-destructive/10 px-2 py-1.5 text-xs text-destructive">
|
||||
{errorMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid gap-1">
|
||||
<div className="truncate rounded-[6px] bg-background px-2 py-1.5 text-xs font-medium">
|
||||
{collection}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-0.5 border-t pt-2">
|
||||
<button
|
||||
className={`flex h-7 items-center gap-1.5 rounded-[6px] px-2 text-left font-mono text-xs ${
|
||||
selectedPath === "$/"
|
||||
? "bg-primary/10 text-primary"
|
||||
: "hover:bg-muted"
|
||||
}`}
|
||||
onClick={() => {
|
||||
selectPath("$/")
|
||||
if (collection && !itemsByPath["$/"]) {
|
||||
loadServerItems(collection, "$/")
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Folder className="size-3.5 shrink-0 text-amber-600" />
|
||||
$/
|
||||
</button>
|
||||
{renderItems("$/")}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user