Add frontend workspace UI and refactor plan
This commit is contained in:
fenghp
@@ -0,0 +1,210 @@
|
||||
import type { ReactNode } from "react"
|
||||
import {
|
||||
CheckCircle2,
|
||||
Cloud,
|
||||
Download,
|
||||
FolderTree,
|
||||
GitPullRequest,
|
||||
History,
|
||||
RefreshCw,
|
||||
TriangleAlert,
|
||||
} from "lucide-react"
|
||||
|
||||
import { OperationLogPanel } from "~/components/app/operation-log-panel"
|
||||
import { Button } from "~/components/ui/button"
|
||||
import type { ApiRequestLogEntry } from "~/lib/api/client"
|
||||
|
||||
interface AppShellProps {
|
||||
connected: boolean
|
||||
serviceReady: boolean
|
||||
serviceLoading: boolean
|
||||
serverUri: string
|
||||
username: string
|
||||
collectionCount?: number
|
||||
serviceBaseUrl?: string
|
||||
tokenFile?: string
|
||||
serviceMessage: string
|
||||
requestStatus: string
|
||||
operationLogs: ApiRequestLogEntry[]
|
||||
operationLogsLoading: boolean
|
||||
workspaceGetLatestEnabled: boolean
|
||||
workspaceHistoryEnabled: boolean
|
||||
sourceList?: ReactNode
|
||||
inspector?: ReactNode
|
||||
onRefreshService(): void
|
||||
onRefreshOperationLogs(): void
|
||||
onWorkspaceGetLatest(): void
|
||||
onWorkspaceHistory(): void
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染 macOS Source Workspace 主框架，承载顶部工具栏、Source List、主内容、Inspector 和 Console。
|
||||
*/
|
||||
export function AppShell({
|
||||
connected,
|
||||
serviceReady,
|
||||
serviceLoading,
|
||||
serverUri,
|
||||
username,
|
||||
collectionCount,
|
||||
serviceBaseUrl,
|
||||
tokenFile,
|
||||
serviceMessage,
|
||||
requestStatus,
|
||||
operationLogs,
|
||||
operationLogsLoading,
|
||||
workspaceGetLatestEnabled,
|
||||
workspaceHistoryEnabled,
|
||||
sourceList,
|
||||
inspector,
|
||||
onRefreshService,
|
||||
onRefreshOperationLogs,
|
||||
onWorkspaceGetLatest,
|
||||
onWorkspaceHistory,
|
||||
children,
|
||||
}: AppShellProps) {
|
||||
return (
|
||||
<div className="flex h-[calc(100svh-32px)] min-h-[640px] flex-col overflow-hidden rounded-[8px] border bg-background text-sm shadow-sm">
|
||||
<header className="flex h-13 shrink-0 items-center justify-between gap-3 border-b bg-muted/30 px-3">
|
||||
<div className="flex min-w-0 items-center gap-3">
|
||||
<div className="flex size-7 items-center justify-center rounded-[7px] border bg-background text-primary">
|
||||
<Cloud className="size-4" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium">macTFS</span>
|
||||
<span className="rounded-[6px] border bg-background px-1.5 py-0.5 text-xs text-muted-foreground">
|
||||
{connected ? "已连接" : "未连接"}
|
||||
</span>
|
||||
</div>
|
||||
<div className="truncate font-mono text-xs text-muted-foreground">
|
||||
{serverUri || "http://127.0.0.1:38765"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex shrink-0 items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!workspaceGetLatestEnabled}
|
||||
onClick={onWorkspaceGetLatest}
|
||||
>
|
||||
<Download />
|
||||
Get Latest
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={!workspaceHistoryEnabled}
|
||||
onClick={onWorkspaceHistory}
|
||||
>
|
||||
<History />
|
||||
History
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
disabled={serviceLoading}
|
||||
onClick={onRefreshService}
|
||||
>
|
||||
<RefreshCw className={serviceLoading ? "animate-spin" : ""} />
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="grid min-h-0 flex-1 grid-cols-1 md:grid-cols-[280px_minmax(0,1fr)] lg:grid-cols-[280px_minmax(0,1fr)_340px]">
|
||||
<aside className="flex min-h-[220px] min-w-0 flex-col border-b bg-muted/25 md:min-h-0 md:border-r md:border-b-0">
|
||||
<div className="flex h-9 items-center gap-2 border-b px-3 text-xs font-medium text-muted-foreground">
|
||||
<FolderTree className="size-4" />
|
||||
Source List
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-auto p-2">
|
||||
{sourceList || (
|
||||
<>
|
||||
<div className="rounded-[6px] bg-background px-2 py-1.5 font-mono text-xs">
|
||||
$/
|
||||
</div>
|
||||
<div className="mt-2 px-2 text-xs text-muted-foreground">
|
||||
Collection：{collectionCount ?? "-"}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main className="flex min-h-[320px] min-w-0 flex-col">
|
||||
<div className="flex h-9 items-center justify-between gap-3 border-b px-3">
|
||||
<div className="min-w-0 truncate font-medium">Source Workspace</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button variant="ghost" size="sm" disabled>
|
||||
Compare
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" disabled>
|
||||
Mapping
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-hidden">{children}</div>
|
||||
</main>
|
||||
|
||||
<aside className="flex min-h-[260px] min-w-0 flex-col border-t bg-background md:col-span-2 lg:col-span-1 lg:border-t-0 lg:border-l">
|
||||
<div className="flex h-9 items-center gap-2 border-b px-3 text-xs font-medium text-muted-foreground">
|
||||
<GitPullRequest className="size-4" />
|
||||
Inspector
|
||||
</div>
|
||||
<div className="min-h-0 flex-1 overflow-auto p-3">
|
||||
<div className="grid gap-4">
|
||||
{inspector || (
|
||||
<section className="grid gap-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-medium">Pending Changes</span>
|
||||
<span className="rounded-[6px] border px-1.5 py-0.5 text-xs text-muted-foreground">
|
||||
0 项
|
||||
</span>
|
||||
</div>
|
||||
<div className="rounded-[6px] border bg-muted/20 px-3 py-2 text-muted-foreground">
|
||||
暂无挂起更改
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="grid gap-2">
|
||||
<div className="font-medium">本地服务</div>
|
||||
<div className="flex items-center gap-2 rounded-[6px] border bg-muted/30 px-3 py-2">
|
||||
{serviceReady ? (
|
||||
<CheckCircle2 className="size-4 text-green-600" />
|
||||
) : (
|
||||
<TriangleAlert className="size-4 text-amber-600" />
|
||||
)}
|
||||
<span>{serviceReady ? "服务可用" : "服务未就绪"}</span>
|
||||
</div>
|
||||
<div className="grid gap-1 text-xs text-muted-foreground">
|
||||
<div className="truncate font-mono">
|
||||
{serviceBaseUrl || "http://127.0.0.1:38765"}
|
||||
</div>
|
||||
<div className="truncate font-mono">
|
||||
{tokenFile || "~/.mactfs/server-token"}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<footer className="h-40 shrink-0 border-t bg-muted/20">
|
||||
<OperationLogPanel
|
||||
logs={operationLogs}
|
||||
loading={operationLogsLoading}
|
||||
serviceMessage={serviceMessage}
|
||||
requestStatus={requestStatus}
|
||||
username={username}
|
||||
onRefresh={onRefreshOperationLogs}
|
||||
/>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,169 @@
|
||||
import {
|
||||
CheckCircle2,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
Terminal,
|
||||
TriangleAlert,
|
||||
} from "lucide-react"
|
||||
|
||||
import { Button } from "~/components/ui/button"
|
||||
import type { ApiRequestLogEntry } from "~/lib/api/client"
|
||||
|
||||
interface OperationLogPanelProps {
|
||||
logs: ApiRequestLogEntry[]
|
||||
loading: boolean
|
||||
serviceMessage: string
|
||||
requestStatus: string
|
||||
username: string
|
||||
onRefresh(): void
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染底部操作日志面板，展示 API 操作状态、耗时、路径摘要和错误信息。
|
||||
*/
|
||||
export function OperationLogPanel({
|
||||
logs,
|
||||
loading,
|
||||
serviceMessage,
|
||||
requestStatus,
|
||||
username,
|
||||
onRefresh,
|
||||
}: OperationLogPanelProps) {
|
||||
return (
|
||||
<div className="flex h-full min-h-0 flex-col">
|
||||
<div className="flex h-9 shrink-0 items-center justify-between gap-3 border-b px-3 text-xs font-medium text-muted-foreground">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<Terminal className="size-4" />
|
||||
<span>Console</span>
|
||||
<span className="rounded-[6px] border bg-background px-1.5 py-0.5">
|
||||
{logs.length} 条
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="ghost"
|
||||
title="刷新服务端操作日志"
|
||||
disabled={loading}
|
||||
onClick={onRefresh}
|
||||
>
|
||||
{loading ? <Loader2 className="animate-spin" /> : <RefreshCw />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{logs.length === 0 ? (
|
||||
<div className="grid gap-1 p-3 font-mono text-xs text-muted-foreground">
|
||||
<div>[service] {serviceMessage}</div>
|
||||
<div>[request] {requestStatus}</div>
|
||||
<div>[session] {username || "anonymous"}</div>
|
||||
<div>[logs] 暂无 API 操作日志</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="min-h-0 flex-1 overflow-auto">
|
||||
<div className="min-w-[920px]">
|
||||
<div className="sticky top-0 z-10 grid h-7 grid-cols-[140px_76px_142px_142px_86px_minmax(180px,1fr)_minmax(190px,1fr)] border-b bg-muted 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 className="flex items-center">路径摘要</div>
|
||||
<div className="flex items-center">错误信息</div>
|
||||
</div>
|
||||
|
||||
{logs.map((log) => (
|
||||
<div
|
||||
key={log.id}
|
||||
className="grid min-h-7 grid-cols-[140px_76px_142px_142px_86px_minmax(180px,1fr)_minmax(190px,1fr)] items-center border-b px-3 font-mono text-xs"
|
||||
>
|
||||
<div className="truncate">{log.operation}</div>
|
||||
<div>
|
||||
<span
|
||||
className={`inline-flex max-w-full items-center gap-1 rounded-[6px] border px-1.5 py-0.5 ${statusClassName(log)}`}
|
||||
>
|
||||
{log.status === "success" ? (
|
||||
<CheckCircle2 className="size-3" />
|
||||
) : log.status === "running" ? (
|
||||
<Loader2 className="size-3 animate-spin" />
|
||||
) : (
|
||||
<TriangleAlert className="size-3" />
|
||||
)}
|
||||
{statusLabel(log)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="truncate text-muted-foreground">
|
||||
{formatLogTime(log.startedAt)}
|
||||
</div>
|
||||
<div className="truncate text-muted-foreground">
|
||||
{log.status === "running"
|
||||
? "执行中"
|
||||
: formatLogTime(log.endedAt)}
|
||||
</div>
|
||||
<div className="text-muted-foreground">
|
||||
{formatDuration(log)}
|
||||
</div>
|
||||
<div className="truncate text-muted-foreground">
|
||||
{log.summary || "-"}
|
||||
</div>
|
||||
<div
|
||||
className={`truncate ${
|
||||
log.errorMessage
|
||||
? "text-destructive"
|
||||
: "text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{log.status === "running"
|
||||
? "请求执行中"
|
||||
: log.errorMessage || "-"}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 按日志状态返回中文状态文案。
|
||||
*/
|
||||
function statusLabel(log: ApiRequestLogEntry) {
|
||||
if (log.status === "running") {
|
||||
return "执行中"
|
||||
}
|
||||
return log.success ? "成功" : "失败"
|
||||
}
|
||||
|
||||
/**
|
||||
* 按日志状态返回 badge 样式。
|
||||
*/
|
||||
function statusClassName(log: ApiRequestLogEntry) {
|
||||
if (log.status === "running") {
|
||||
return "border-amber-200 bg-amber-50 text-amber-700"
|
||||
}
|
||||
return log.success
|
||||
? "border-green-200 bg-green-50 text-green-700"
|
||||
: "border-red-200 bg-red-50 text-red-700"
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化操作日志时间戳。
|
||||
*/
|
||||
function formatLogTime(value?: number) {
|
||||
return value ? new Date(value).toLocaleString() : "-"
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化操作耗时，执行中的请求保持明确状态。
|
||||
*/
|
||||
function formatDuration(log: ApiRequestLogEntry) {
|
||||
if (log.status === "running") {
|
||||
return "执行中"
|
||||
}
|
||||
if (log.durationMs === undefined) {
|
||||
return "-"
|
||||
}
|
||||
return log.durationMs < 1000
|
||||
? `${log.durationMs} ms`
|
||||
: `${(log.durationMs / 1000).toFixed(1)} s`
|
||||
}
|
||||
@@ -0,0 +1,185 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import { GitCompareArrows, Loader2, RefreshCw, 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 [loading, setLoading] = useState(false)
|
||||
const [message, setMessage] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
loadDiff()
|
||||
}, [request])
|
||||
|
||||
const rows = diff ? toDiffRows(diff.lines) : []
|
||||
|
||||
/**
|
||||
* 根据当前请求类型加载文本 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="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="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">
|
||||
<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="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="max-h-80 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"
|
||||
>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,322 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,241 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Database,
|
||||
FileText,
|
||||
Folder,
|
||||
Loader2,
|
||||
} from "lucide-react"
|
||||
|
||||
import { listCollections, listServerTree } from "~/lib/api/endpoints"
|
||||
import type { TfsCollectionInfo, TfsServerItem } from "~/lib/api/types"
|
||||
|
||||
interface ServerTreePanelProps {
|
||||
connected: boolean
|
||||
preferredCollection: string
|
||||
onCollectionSelect(collection: string): void
|
||||
onPathSelect(path: string): void
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染 Collection 与服务端目录树，并在展开目录时按需请求子节点。
|
||||
*/
|
||||
export function ServerTreePanel({
|
||||
connected,
|
||||
preferredCollection,
|
||||
onCollectionSelect,
|
||||
onPathSelect,
|
||||
}: ServerTreePanelProps) {
|
||||
const [collections, setCollections] = useState<TfsCollectionInfo[]>([])
|
||||
const [selectedCollection, setSelectedCollection] = useState("")
|
||||
const [selectedPath, setSelectedPath] = useState("")
|
||||
const [expandedPaths, setExpandedPaths] = useState<string[]>([])
|
||||
const [itemsByPath, setItemsByPath] = useState<
|
||||
Record<string, TfsServerItem[]>
|
||||
>({})
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [errorMessage, setErrorMessage] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
if (!connected) {
|
||||
setCollections([])
|
||||
setSelectedCollection("")
|
||||
setSelectedPath("")
|
||||
setExpandedPaths([])
|
||||
setItemsByPath({})
|
||||
return
|
||||
}
|
||||
|
||||
loadCollections()
|
||||
}, [connected, preferredCollection])
|
||||
|
||||
/**
|
||||
* 加载 Collection 列表，并优先展开当前配置保存的 Collection。
|
||||
*/
|
||||
async function loadCollections() {
|
||||
setLoading(true)
|
||||
setErrorMessage("")
|
||||
|
||||
const result = await listCollections()
|
||||
setLoading(false)
|
||||
|
||||
if (!result.success) {
|
||||
setErrorMessage(result.errorMessage || result.message)
|
||||
return
|
||||
}
|
||||
|
||||
setCollections(result.data.collections)
|
||||
const collection =
|
||||
result.data.collections.find(
|
||||
(item) => item.name === preferredCollection
|
||||
) || result.data.collections[0]
|
||||
if (collection) {
|
||||
selectCollection(collection)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换当前 Collection，并加载该 Collection 的服务端根目录。
|
||||
*/
|
||||
async function selectCollection(collection: TfsCollectionInfo) {
|
||||
setSelectedCollection(collection.name)
|
||||
setSelectedPath("$/")
|
||||
setExpandedPaths(["$/"])
|
||||
setItemsByPath({})
|
||||
onCollectionSelect(collection.name)
|
||||
onPathSelect("$/")
|
||||
await loadServerItems(collection.name, "$/")
|
||||
}
|
||||
|
||||
/**
|
||||
* 加载指定目录的一层子节点，未映射目录也直接按服务端路径浏览。
|
||||
*/
|
||||
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,
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* 选中节点并通知中间区域当前服务端路径已变化。
|
||||
*/
|
||||
function selectPath(path: string) {
|
||||
setSelectedPath(path)
|
||||
onPathSelect(path)
|
||||
}
|
||||
|
||||
/**
|
||||
* 展开或收起目录；首次展开时才加载子节点。
|
||||
*/
|
||||
async function toggleFolder(item: TfsServerItem) {
|
||||
selectPath(item.serverPath)
|
||||
if (!item.folder || !selectedCollection) {
|
||||
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(selectedCollection, 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) {
|
||||
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">
|
||||
{collections.map((collection) => (
|
||||
<button
|
||||
key={collection.id || collection.name}
|
||||
className={`flex h-7 items-center gap-1.5 rounded-[6px] px-2 text-left text-xs ${
|
||||
selectedCollection === collection.name
|
||||
? "bg-background text-foreground"
|
||||
: "text-muted-foreground hover:bg-muted"
|
||||
}`}
|
||||
onClick={() => selectCollection(collection)}
|
||||
>
|
||||
<Database className="size-3.5 shrink-0" />
|
||||
<span className="truncate">{collection.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</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 (selectedCollection && !itemsByPath["$/"]) {
|
||||
loadServerItems(selectedCollection, "$/")
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Folder className="size-3.5 shrink-0 text-amber-600" />
|
||||
$/
|
||||
</button>
|
||||
{renderItems("$/")}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,441 @@
|
||||
import { useEffect, useState } from "react"
|
||||
import {
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
FileText,
|
||||
Folder,
|
||||
Loader2,
|
||||
RefreshCw,
|
||||
RotateCcw,
|
||||
Upload,
|
||||
} from "lucide-react"
|
||||
|
||||
import { Button } from "~/components/ui/button"
|
||||
import { checkin, listPendingChanges, undoFiles } from "~/lib/api/endpoints"
|
||||
import type {
|
||||
PendingChangeStatus,
|
||||
TfsPendingChangeInfo,
|
||||
} from "~/lib/api/types"
|
||||
|
||||
interface PendingChangesPanelProps {
|
||||
connected: boolean
|
||||
collection: string
|
||||
refreshKey: number
|
||||
}
|
||||
|
||||
const PENDING_STATUS_LABELS: Record<PendingChangeStatus, string> = {
|
||||
pendingEdit: "编辑",
|
||||
pendingAdd: "新增",
|
||||
pendingDelete: "删除",
|
||||
pendingRename: "重命名",
|
||||
pending: "挂起",
|
||||
}
|
||||
|
||||
const PENDING_STATUS_CLASSES: Record<PendingChangeStatus, string> = {
|
||||
pendingEdit: "border-blue-200 bg-blue-50 text-blue-700",
|
||||
pendingAdd: "border-green-200 bg-green-50 text-green-700",
|
||||
pendingDelete: "border-red-200 bg-red-50 text-red-700",
|
||||
pendingRename: "border-violet-200 bg-violet-50 text-violet-700",
|
||||
pending: "border-border bg-muted/30 text-muted-foreground",
|
||||
}
|
||||
|
||||
/**
|
||||
* 在 Inspector 中展示当前 Workspace 的 Included / Excluded Pending Changes。
|
||||
*/
|
||||
export function PendingChangesPanel({
|
||||
connected,
|
||||
collection,
|
||||
refreshKey,
|
||||
}: PendingChangesPanelProps) {
|
||||
const [pendingChanges, setPendingChanges] = useState<
|
||||
TfsPendingChangeInfo[]
|
||||
>([])
|
||||
const [includedKeys, setIncludedKeys] = useState<string[]>([])
|
||||
const [excludedKeys, setExcludedKeys] = useState<string[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [operationKey, setOperationKey] = useState("")
|
||||
const [checkinComment, setCheckinComment] = useState("")
|
||||
const [checkinLoading, setCheckinLoading] = useState(false)
|
||||
const [messageType, setMessageType] = useState<"success" | "error">(
|
||||
"success"
|
||||
)
|
||||
const [message, setMessage] = useState("")
|
||||
|
||||
useEffect(() => {
|
||||
if (!connected || !collection) {
|
||||
setPendingChanges([])
|
||||
setIncludedKeys([])
|
||||
setExcludedKeys([])
|
||||
setCheckinComment("")
|
||||
setCheckinLoading(false)
|
||||
setMessageType("success")
|
||||
setMessage("")
|
||||
return
|
||||
}
|
||||
|
||||
loadPendingChanges()
|
||||
}, [connected, collection, refreshKey])
|
||||
|
||||
const includedChanges = pendingChanges.filter((change) =>
|
||||
includedKeys.includes(toPendingChangeKey(change))
|
||||
)
|
||||
const excludedChanges = pendingChanges.filter((change) =>
|
||||
excludedKeys.includes(toPendingChangeKey(change))
|
||||
)
|
||||
const collectionReady = connected && Boolean(collection)
|
||||
const canCheckin =
|
||||
includedChanges.length > 0 &&
|
||||
checkinComment.trim().length > 0 &&
|
||||
!checkinLoading
|
||||
|
||||
/**
|
||||
* 查询后端 pending changes，并保留当前会话内用户移动到 Excluded 的选择。
|
||||
*/
|
||||
async function loadPendingChanges() {
|
||||
setLoading(true)
|
||||
setMessage("")
|
||||
|
||||
const result = await listPendingChanges({ collection })
|
||||
setLoading(false)
|
||||
|
||||
if (!result.success) {
|
||||
setPendingChanges([])
|
||||
setIncludedKeys([])
|
||||
setExcludedKeys([])
|
||||
setMessageType("error")
|
||||
setMessage(result.errorMessage || result.message)
|
||||
return
|
||||
}
|
||||
|
||||
const nextChanges = result.data.pendingChanges
|
||||
const nextKeys = nextChanges.map(toPendingChangeKey)
|
||||
setPendingChanges(nextChanges)
|
||||
setExcludedKeys((currentKeys) =>
|
||||
currentKeys.filter((currentKey) => nextKeys.includes(currentKey))
|
||||
)
|
||||
setIncludedKeys((currentKeys) => {
|
||||
const knownKeys = new Set([...currentKeys, ...excludedKeys])
|
||||
const excludedKeySet = new Set(excludedKeys)
|
||||
const includedKeySet = new Set(currentKeys)
|
||||
|
||||
return nextKeys.filter((key) => {
|
||||
if (excludedKeySet.has(key)) {
|
||||
return false
|
||||
}
|
||||
return knownKeys.has(key) ? includedKeySet.has(key) : true
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 使用服务端路径作为 Pending Change 的会话 key。
|
||||
*/
|
||||
function toPendingChangeKey(change: TfsPendingChangeInfo) {
|
||||
return change.serverPath
|
||||
}
|
||||
|
||||
/**
|
||||
* 将单个挂起更改移动到 Excluded Changes。
|
||||
*/
|
||||
function moveToExcluded(change: TfsPendingChangeInfo) {
|
||||
const key = toPendingChangeKey(change)
|
||||
setIncludedKeys((currentKeys) =>
|
||||
currentKeys.filter((currentKey) => currentKey !== key)
|
||||
)
|
||||
setExcludedKeys((currentKeys) =>
|
||||
currentKeys.includes(key) ? currentKeys : [...currentKeys, key]
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 将单个挂起更改移回 Included Changes，后续签入只读取 Included。
|
||||
*/
|
||||
function moveToIncluded(change: TfsPendingChangeInfo) {
|
||||
const key = toPendingChangeKey(change)
|
||||
setExcludedKeys((currentKeys) =>
|
||||
currentKeys.filter((currentKey) => currentKey !== key)
|
||||
)
|
||||
setIncludedKeys((currentKeys) =>
|
||||
currentKeys.includes(key) ? currentKeys : [...currentKeys, key]
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* 撤销指定 pending change，完成后刷新右侧挂起更改列表。
|
||||
*/
|
||||
async function undoPendingChange(change: TfsPendingChangeInfo) {
|
||||
const key = toPendingChangeKey(change)
|
||||
setOperationKey(key)
|
||||
setMessage("")
|
||||
|
||||
const result = await undoFiles({
|
||||
paths: [change.serverPath],
|
||||
recursive: change.folder,
|
||||
})
|
||||
setOperationKey("")
|
||||
|
||||
if (!result.success) {
|
||||
setMessage(result.errorMessage || result.message)
|
||||
setMessageType("error")
|
||||
return
|
||||
}
|
||||
|
||||
setMessageType("success")
|
||||
setMessage(`Undo 完成，影响 ${result.data.result?.affected ?? 0} 项。`)
|
||||
await loadPendingChanges()
|
||||
}
|
||||
|
||||
/**
|
||||
* 提交 Included Changes，成功后清空 Included 并保留 Excluded 会话状态。
|
||||
*/
|
||||
async function submitIncludedChanges() {
|
||||
const comment = checkinComment.trim()
|
||||
if (!comment) {
|
||||
setMessageType("error")
|
||||
setMessage("Comment 必填。")
|
||||
return
|
||||
}
|
||||
if (includedChanges.length === 0) {
|
||||
setMessageType("error")
|
||||
setMessage("没有可签入的 Included Changes。")
|
||||
return
|
||||
}
|
||||
|
||||
setCheckinLoading(true)
|
||||
setMessage("")
|
||||
|
||||
const result = await checkin({
|
||||
serverPaths: includedChanges.map((change) => change.serverPath),
|
||||
comment,
|
||||
})
|
||||
setCheckinLoading(false)
|
||||
|
||||
if (!result.success) {
|
||||
setMessageType("error")
|
||||
setMessage(result.errorMessage || result.message)
|
||||
return
|
||||
}
|
||||
|
||||
setCheckinComment("")
|
||||
await loadPendingChanges()
|
||||
setIncludedKeys([])
|
||||
setMessageType("success")
|
||||
setMessage(
|
||||
`Checkin 成功，changeset ${result.data.checkin?.changeset ?? "-"}，提交 ${result.data.checkin?.submittedChanges ?? 0} 项。`
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="grid gap-3">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<div className="font-medium">Pending Changes</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
签入范围：Included Changes
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1.5">
|
||||
<span className="rounded-[6px] border px-1.5 py-0.5 text-xs text-muted-foreground">
|
||||
{pendingChanges.length} 项
|
||||
</span>
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="ghost"
|
||||
disabled={!collectionReady || loading || checkinLoading}
|
||||
title="刷新挂起更改"
|
||||
onClick={loadPendingChanges}
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<RefreshCw />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!collectionReady ? (
|
||||
<div className="rounded-[6px] border bg-muted/20 px-3 py-2 text-sm text-muted-foreground">
|
||||
{connected ? "请选择 Collection" : "未连接"}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{message && (
|
||||
<div
|
||||
className={`rounded-[6px] border px-3 py-2 text-xs ${
|
||||
messageType === "error"
|
||||
? "border-destructive/30 bg-destructive/10 text-destructive"
|
||||
: "bg-muted/20 text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<PendingChangeGroup
|
||||
title="Included Changes"
|
||||
changes={includedChanges}
|
||||
emptyText={loading ? "正在查询挂起更改" : "暂无 Included Changes"}
|
||||
actionTitle="移到 Excluded"
|
||||
actionIcon="down"
|
||||
operationKey={operationKey}
|
||||
disabled={checkinLoading}
|
||||
onUndo={undoPendingChange}
|
||||
onMove={moveToExcluded}
|
||||
/>
|
||||
|
||||
<PendingChangeGroup
|
||||
title="Excluded Changes"
|
||||
changes={excludedChanges}
|
||||
emptyText="暂无 Excluded Changes"
|
||||
actionTitle="移回 Included"
|
||||
actionIcon="up"
|
||||
operationKey={operationKey}
|
||||
disabled={checkinLoading}
|
||||
onUndo={undoPendingChange}
|
||||
onMove={moveToIncluded}
|
||||
/>
|
||||
|
||||
<section className="grid gap-2">
|
||||
<div className="flex items-center justify-between gap-2 text-xs">
|
||||
<span className="font-medium text-muted-foreground">Checkin</span>
|
||||
<span className="rounded-[6px] border px-1.5 py-0.5 text-muted-foreground">
|
||||
Included {includedChanges.length}
|
||||
</span>
|
||||
</div>
|
||||
<textarea
|
||||
className="min-h-20 rounded-[6px] border bg-background px-2 py-1.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
|
||||
value={checkinComment}
|
||||
placeholder="Comment"
|
||||
disabled={checkinLoading}
|
||||
onChange={(event) => setCheckinComment(event.target.value)}
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={!canCheckin}
|
||||
onClick={submitIncludedChanges}
|
||||
>
|
||||
{checkinLoading ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<Upload />
|
||||
)}
|
||||
Checkin
|
||||
</Button>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
只提交 Included Changes，Excluded 保留在当前 UI 会话。
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
interface PendingChangeGroupProps {
|
||||
title: string
|
||||
changes: TfsPendingChangeInfo[]
|
||||
emptyText: string
|
||||
actionTitle: string
|
||||
actionIcon: "up" | "down"
|
||||
operationKey: string
|
||||
disabled: boolean
|
||||
onUndo(change: TfsPendingChangeInfo): void
|
||||
onMove(change: TfsPendingChangeInfo): void
|
||||
}
|
||||
|
||||
/**
|
||||
* 渲染 Pending Changes 单个分组，并提供组间移动入口。
|
||||
*/
|
||||
function PendingChangeGroup({
|
||||
title,
|
||||
changes,
|
||||
emptyText,
|
||||
actionTitle,
|
||||
actionIcon,
|
||||
operationKey,
|
||||
disabled,
|
||||
onUndo,
|
||||
onMove,
|
||||
}: PendingChangeGroupProps) {
|
||||
return (
|
||||
<section className="grid gap-2">
|
||||
<div className="flex items-center justify-between gap-2 text-xs">
|
||||
<span className="font-medium text-muted-foreground">{title}</span>
|
||||
<span className="rounded-[6px] border px-1.5 py-0.5 text-muted-foreground">
|
||||
{changes.length}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{changes.length === 0 ? (
|
||||
<div className="rounded-[6px] border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
|
||||
{emptyText}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid max-h-56 gap-2 overflow-auto">
|
||||
{changes.map((change) => (
|
||||
<div
|
||||
key={change.serverPath}
|
||||
className="grid gap-1 rounded-[6px] border bg-muted/20 p-2 text-xs"
|
||||
>
|
||||
<div className="flex min-w-0 items-start justify-between gap-2">
|
||||
<div className="flex min-w-0 items-center gap-1.5">
|
||||
{change.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-medium">{change.name}</span>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="ghost"
|
||||
title="Undo"
|
||||
disabled={disabled || operationKey === change.serverPath}
|
||||
onClick={() => onUndo(change)}
|
||||
>
|
||||
{operationKey === change.serverPath ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<RotateCcw />
|
||||
)}
|
||||
</Button>
|
||||
<Button
|
||||
size="icon-xs"
|
||||
variant="ghost"
|
||||
title={actionTitle}
|
||||
disabled={disabled || operationKey === change.serverPath}
|
||||
onClick={() => onMove(change)}
|
||||
>
|
||||
{actionIcon === "down" ? <ArrowDown /> : <ArrowUp />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="truncate font-mono text-[11px] text-muted-foreground">
|
||||
{change.serverPath}
|
||||
</div>
|
||||
|
||||
<div className="flex min-w-0 flex-wrap items-center gap-1">
|
||||
<span
|
||||
className={`rounded-[6px] border px-1.5 py-0.5 ${PENDING_STATUS_CLASSES[change.status]}`}
|
||||
>
|
||||
{change.status} / {PENDING_STATUS_LABELS[change.status]}
|
||||
</span>
|
||||
{change.changeType && (
|
||||
<span className="rounded-[6px] border bg-background px-1.5 py-0.5 text-muted-foreground">
|
||||
{change.changeType}
|
||||
</span>
|
||||
)}
|
||||
<span className="rounded-[6px] border bg-background px-1.5 py-0.5 font-mono text-muted-foreground">
|
||||
v{change.version}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user