frontend: add read-only file viewer and text diff dialogs with search and line highlights

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

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

@@ -0,0 +1,207 @@
+import { useEffect, useMemo, useState } from "react"
+import { Loader2 } from "lucide-react"
+
+import { Badge } from "~/components/ui/badge"
+import { Checkbox } from "~/components/ui/checkbox"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog"
+import { Input } from "~/components/ui/input"
+import { api } from "~/lib/api"
+import type { TextDiff } from "~/lib/api"
+import { cn } from "~/lib/utils"
+
+// Diff 请求：本地 vs latest，或同一服务端文件两个历史版本。
+export type DiffRequest =
+  | { mode: "localLatest"; serverPath: string; localPath: string }
+  | { mode: "revisions"; serverPath: string; sourceChangeset: number; targetChangeset: number }
+
+// 解析后的 Diff 行：种类 + 双侧行号。
+interface DiffLine {
+  kind: "same" | "removed" | "added"
+  text: string
+  sourceLine: number | null
+  targetLine: number | null
+}
+
+/**
+ * 把后端返回的前缀行（" " / "-" / "+"）解析为带双侧行号的结构。
+ */
+function parseDiffLines(raw: string[]): DiffLine[] {
+  const result: DiffLine[] = []
+  let sourceLine = 0
+  let targetLine = 0
+  for (const line of raw) {
+    const prefix = line.charAt(0)
+    const text = line.slice(1)
+    if (prefix === "-") {
+      sourceLine += 1
+      result.push({ kind: "removed", text, sourceLine, targetLine: null })
+    } else if (prefix === "+") {
+      targetLine += 1
+      result.push({ kind: "added", text, sourceLine: null, targetLine })
+    } else {
+      sourceLine += 1
+      targetLine += 1
+      result.push({ kind: "same", text, sourceLine, targetLine })
+    }
+  }
+  return result
+}
+
+/**
+ * 文本 Diff 弹窗：支持 本地 vs 服务器 latest 与 两个历史版本 对比，
+ * 提供行号、差异高亮、搜索与仅看差异。
+ */
+export function DiffDialog({
+  request,
+  onClose,
+}: {
+  request: DiffRequest
+  onClose: () => void
+}) {
+  const [diff, setDiff] = useState<TextDiff | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [search, setSearch] = useState("")
+  const [onlyChanges, setOnlyChanges] = useState(false)
+
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    setError(null)
+    void (async () => {
+      const result =
+        request.mode === "localLatest"
+          ? await api.diffLocalLatest({
+              serverPath: request.serverPath,
+              localPath: request.localPath,
+            })
+          : await api.diffRevisions({
+              serverPath: request.serverPath,
+              sourceChangeset: request.sourceChangeset,
+              targetChangeset: request.targetChangeset,
+            })
+      if (!active) {
+        return
+      }
+      setLoading(false)
+      if (!result.ok || !result.data) {
+        setError(result.errorMessage ?? "Diff 加载失败")
+        return
+      }
+      setDiff(result.data.diff)
+    })()
+    return () => {
+      active = false
+    }
+  }, [request])
+
+  const lines = useMemo(() => parseDiffLines(diff?.lines ?? []), [diff])
+  const changedCount = useMemo(
+    () => lines.filter((line) => line.kind !== "same").length,
+    [lines],
+  )
+  const keyword = search.trim().toLowerCase()
+  const visibleLines = useMemo(
+    () => (onlyChanges ? lines.filter((line) => line.kind !== "same") : lines),
+    [lines, onlyChanges],
+  )
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="flex max-h-[85svh] flex-col sm:max-w-5xl">
+        <DialogHeader>
+          <DialogTitle>
+            {request.mode === "localLatest" ? "本地 vs 服务器 latest" : "历史版本对比"}
+          </DialogTitle>
+          <DialogDescription className="font-mono text-xs">
+            {request.serverPath}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex shrink-0 flex-wrap items-center gap-2 text-xs">
+          {diff && (
+            <>
+              <Badge variant="secondary" className="rounded-md bg-red-500/10 text-red-700 dark:text-red-400">
+                − {diff.sourceLabel}
+              </Badge>
+              <Badge variant="secondary" className="rounded-md bg-green-500/10 text-green-700 dark:text-green-400">
+                + {diff.targetLabel}
+              </Badge>
+              <span className="text-muted-foreground">{changedCount} 行差异</span>
+            </>
+          )}
+          <label className="ml-auto flex items-center gap-1.5 text-muted-foreground">
+            <Checkbox
+              checked={onlyChanges}
+              onCheckedChange={(value) => setOnlyChanges(value === true)}
+            />
+            仅看差异
+          </label>
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder="搜索内容…"
+            className="h-7 w-48 text-xs"
+          />
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-auto rounded-md border bg-muted/20">
+          {loading ? (
+            <div className="flex h-60 items-center justify-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="size-4 animate-spin" />
+              正在生成 Diff…
+            </div>
+          ) : error ? (
+            <div className="flex h-60 items-center justify-center p-6 text-center text-sm text-destructive">
+              {error}
+            </div>
+          ) : visibleLines.length === 0 ? (
+            <div className="flex h-60 items-center justify-center text-sm text-muted-foreground">
+              {changedCount === 0 ? "两个版本内容一致" : "没有符合条件的行"}
+            </div>
+          ) : (
+            <pre className="min-w-full font-mono text-xs leading-5">
+              {visibleLines.map((line, index) => {
+                const hit = keyword.length > 0 && line.text.toLowerCase().includes(keyword)
+                return (
+                  <div
+                    key={index}
+                    className={cn(
+                      "flex",
+                      line.kind === "removed" && "bg-red-500/10",
+                      line.kind === "added" && "bg-green-500/10",
+                      hit && "bg-amber-500/20",
+                    )}
+                  >
+                    <span className="w-10 shrink-0 pr-1 text-right text-muted-foreground/60 select-none">
+                      {line.sourceLine ?? ""}
+                    </span>
+                    <span className="w-10 shrink-0 border-r pr-1 text-right text-muted-foreground/60 select-none">
+                      {line.targetLine ?? ""}
+                    </span>
+                    <span
+                      className={cn(
+                        "w-5 shrink-0 text-center select-none",
+                        line.kind === "removed" && "text-red-600",
+                        line.kind === "added" && "text-green-600",
+                      )}
+                    >
+                      {line.kind === "removed" ? "−" : line.kind === "added" ? "+" : ""}
+                    </span>
+                    <span className="whitespace-pre-wrap break-all">{line.text}</span>
+                  </div>
+                )
+              })}
+            </pre>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,217 @@
+import { useEffect, useMemo, useState } from "react"
+import { Loader2 } from "lucide-react"
+
+import { Badge } from "~/components/ui/badge"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog"
+import { Input } from "~/components/ui/input"
+import { api } from "~/lib/api"
+import type { FileContent } from "~/lib/api"
+import { cn } from "~/lib/utils"
+
+// 查看来源：本地映射文件或服务器 latest。
+type ViewSource = "local" | "server"
+
+/**
+ * 把字节数格式化为可读大小。
+ */
+function formatSize(size: number): string {
+  if (size < 1024) {
+    return `${size} B`
+  }
+  if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(1)} KB`
+  }
+  return `${(size / 1024 / 1024).toFixed(1)} MB`
+}
+
+/**
+ * 文件查看弹窗：只读展示本地或服务器 latest 内容，
+ * 支持来源切换、行号与搜索高亮；二进制 / 超大 / 非映射路径给出明确提示。
+ */
+export function FileViewDialog({
+  serverPath,
+  localPath,
+  onClose,
+}: {
+  serverPath: string
+  localPath: string | null
+  onClose: () => void
+}) {
+  const [source, setSource] = useState<ViewSource>(localPath ? "local" : "server")
+  const [content, setContent] = useState<FileContent | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [search, setSearch] = useState("")
+
+  // 加载所选来源的文件内容；本地内容仅在已映射时可用。
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    setError(null)
+    void (async () => {
+      const result =
+        source === "local" && localPath
+          ? await api.getFileContent({ localPath })
+          : await api.getFileContent({ serverPath })
+      if (!active) {
+        return
+      }
+      setLoading(false)
+      if (!result.ok || !result.data) {
+        setContent(null)
+        setError(result.errorMessage ?? "文件内容加载失败")
+        return
+      }
+      setContent(result.data.content)
+    })()
+    return () => {
+      active = false
+    }
+  }, [source, serverPath, localPath])
+
+  const lines = useMemo(
+    () => (content && !content.binary && !content.tooLarge ? content.content.split(/\r?\n/) : []),
+    [content],
+  )
+  const keyword = search.trim().toLowerCase()
+  const matchCount = useMemo(
+    () =>
+      keyword.length === 0
+        ? 0
+        : lines.filter((line) => line.toLowerCase().includes(keyword)).length,
+    [lines, keyword],
+  )
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="flex max-h-[85svh] flex-col sm:max-w-4xl">
+        <DialogHeader>
+          <DialogTitle>查看文件</DialogTitle>
+          <DialogDescription className="font-mono text-xs">{serverPath}</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex shrink-0 flex-wrap items-center gap-2">
+          <div className="flex items-center rounded-md border p-0.5">
+            <SourceTab
+              label="本地文件"
+              active={source === "local"}
+              disabled={!localPath}
+              disabledReason="未映射到本地"
+              onClick={() => setSource("local")}
+            />
+            <SourceTab
+              label="服务器 latest"
+              active={source === "server"}
+              onClick={() => setSource("server")}
+            />
+          </div>
+          {content && (
+            <span className="text-xs text-muted-foreground">
+              {formatSize(content.size)}
+              {content.changeset > 0 && ` · 版本 ${content.changeset}`}
+            </span>
+          )}
+          <Input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder="搜索内容…"
+            className="ml-auto h-7 w-48 text-xs"
+          />
+          {keyword.length > 0 && (
+            <Badge variant="secondary" className="rounded-md">
+              {matchCount} 行命中
+            </Badge>
+          )}
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-auto rounded-md border bg-muted/20">
+          {loading ? (
+            <div className="flex h-60 items-center justify-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="size-4 animate-spin" />
+              正在加载内容…
+            </div>
+          ) : error ? (
+            <div className="flex h-60 items-center justify-center p-6 text-center text-sm text-destructive">
+              {error}
+            </div>
+          ) : content?.binary ? (
+            <Notice text={`二进制文件不支持预览（${formatSize(content.size)}）`} />
+          ) : content?.tooLarge ? (
+            <Notice text={`文件过大（${formatSize(content.size)}），不直接渲染内容`} />
+          ) : (
+            <pre className="min-w-full font-mono text-xs leading-5">
+              {lines.map((line, index) => {
+                const hit = keyword.length > 0 && line.toLowerCase().includes(keyword)
+                return (
+                  <div
+                    key={index}
+                    className={cn("flex", hit && "bg-amber-500/15")}
+                  >
+                    <span className="w-12 shrink-0 border-r pr-2 text-right text-muted-foreground/60 select-none">
+                      {index + 1}
+                    </span>
+                    <span className="whitespace-pre-wrap break-all pl-2">{line}</span>
+                  </div>
+                )
+              })}
+            </pre>
+          )}
+        </div>
+
+        <p className="shrink-0 text-xs text-muted-foreground">
+          只读查看 · 来源：{source === "local" ? `本地 ${localPath ?? ""}` : "服务器 latest"}
+        </p>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+/**
+ * 来源切换小标签按钮。
+ */
+function SourceTab({
+  label,
+  active,
+  disabled,
+  disabledReason,
+  onClick,
+}: {
+  label: string
+  active: boolean
+  disabled?: boolean
+  disabledReason?: string
+  onClick: () => void
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      title={disabled ? disabledReason : undefined}
+      onClick={onClick}
+      className={cn(
+        "rounded-[5px] px-2 py-0.5 text-xs",
+        active ? "bg-primary/10 font-medium text-foreground" : "text-muted-foreground",
+        disabled && "cursor-not-allowed opacity-50",
+      )}
+    >
+      {label}
+    </button>
+  )
+}
+
+/**
+ * 内容区占位提示（二进制 / 超大文件）。
+ */
+function Notice({ text }: { text: string }) {
+  return (
+    <div className="flex h-60 items-center justify-center p-6 text-center text-sm text-muted-foreground">
+      {text}
+    </div>
+  )
+}