功能: 右键新增属性弹窗与获取特定版本(FE-019)，服务端新增 /api/items/info

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-11 12:58:11 +08:00
parent 0c2324b1db
commit 23062e8333
12 changed files with 606 additions and 7 deletions
@@ -0,0 +1,186 @@
+import { useEffect, useState } from "react"
+import { Check, Copy, Loader2 } from "lucide-react"
+
+import { Badge } from "~/components/ui/badge"
+import { Button } from "~/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "~/components/ui/dialog"
+import { api } from "~/lib/api"
+import type { ItemInfo } from "~/lib/api"
+import type { FileTarget } from "~/lib/tfs"
+import { statusBadgeClass, statusLabel } from "~/lib/tfs"
+import { formatDateTime } from "~/lib/utils"
+
+/**
+ * 把字节数格式化为可读大小（B / KB / MB）。
+ */
+function formatSize(size: number | null): string {
+  if (size == null) {
+    return "—"
+  }
+  if (size < 1024) {
+    return `${size} B`
+  }
+  if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(1)} KB`
+  }
+  return `${(size / 1024 / 1024).toFixed(2)} MB`
+}
+
+/**
+ * 对象属性弹窗：展示服务器路径、本地路径、映射与挂起状态，
+ * 以及服务器侧最新版本信息（changeset / 时间 / 提交人），文件附带大小与编码。
+ */
+export function PropertiesDialog({
+  target,
+  onClose,
+}: {
+  target: FileTarget
+  onClose: () => void
+}) {
+  const [info, setInfo] = useState<ItemInfo | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let active = true
+    void (async () => {
+      setLoading(true)
+      const result = await api.getItemInfo({ serverPath: target.serverPath })
+      if (!active) {
+        return
+      }
+      setLoading(false)
+      if (!result.ok || !result.data) {
+        setError(result.errorMessage ?? "属性加载失败")
+        return
+      }
+      setError(null)
+      setInfo(result.data.item)
+    })()
+    return () => {
+      active = false
+    }
+  }, [target.serverPath])
+
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>属性</DialogTitle>
+          <DialogDescription className="font-mono text-xs">
+            {target.serverPath}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-1 text-sm">
+          <PropertyRow label="对象类型" value={target.folder ? "目录" : "文件"} />
+          <PropertyRow label="服务器路径" value={target.serverPath} mono copyable />
+          <PropertyRow
+            label="本地路径"
+            value={target.localPath ?? "未映射"}
+            mono={target.localPath != null}
+            copyable={target.localPath != null}
+            muted={target.localPath == null}
+          />
+          <PropertyRow
+            label="映射状态"
+            value={
+              <Badge variant="secondary" className={statusBadgeClass(target.mapped ? "mapped" : "notMapped")}>
+                {target.mapped ? (target.mappingRoot ? "映射根目录" : "已映射") : "未映射"}
+              </Badge>
+            }
+          />
+          <PropertyRow
+            label="挂起状态"
+            value={
+              target.pendingStatus ? (
+                <Badge variant="secondary" className={statusBadgeClass(target.pendingStatus)}>
+                  {statusLabel(target.pendingStatus)}
+                </Badge>
+              ) : (
+                "无挂起更改"
+              )
+            }
+            muted={target.pendingStatus == null}
+          />
+
+          <div className="my-2 border-t" />
+
+          {loading ? (
+            <div className="flex h-24 items-center justify-center gap-2 text-sm text-muted-foreground">
+              <Loader2 className="size-4 animate-spin" />
+              正在加载服务器信息…
+            </div>
+          ) : error ? (
+            <div className="flex h-24 items-center justify-center text-sm text-destructive">{error}</div>
+          ) : info ? (
+            <>
+              <PropertyRow label="最新 Changeset" value={`C${info.changeset}`} mono />
+              <PropertyRow label="签入时间" value={formatDateTime(info.checkinDate)} />
+              <PropertyRow label="签入人" value={info.author || "—"} />
+              <PropertyRow label="签入备注" value={info.comment || "—"} muted={!info.comment} />
+              {!info.folder && (
+                <>
+                  <PropertyRow label="文件大小" value={formatSize(info.size)} />
+                  <PropertyRow label="编码" value={info.encoding ?? "—"} />
+                </>
+              )}
+            </>
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+/**
+ * 单行属性：左侧标签 + 右侧值，可选等宽字体与复制按钮。
+ */
+function PropertyRow({
+  label,
+  value,
+  mono,
+  copyable,
+  muted,
+}: {
+  label: string
+  value: React.ReactNode
+  mono?: boolean
+  copyable?: boolean
+  muted?: boolean
+}) {
+  const [copied, setCopied] = useState(false)
+
+  return (
+    <div className="flex items-start gap-3 py-0.5">
+      <span className="w-24 shrink-0 pt-0.5 text-xs text-muted-foreground">{label}</span>
+      <span
+        className={`min-w-0 flex-1 break-all ${mono ? "font-mono text-xs leading-5" : "text-sm"} ${muted ? "text-muted-foreground" : ""}`}
+      >
+        {value}
+      </span>
+      {copyable && typeof value === "string" && (
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="shrink-0"
+          title="复制"
+          onClick={() => {
+            void navigator.clipboard.writeText(value).then(() => {
+              setCopied(true)
+              setTimeout(() => setCopied(false), 1500)
+            })
+          }}
+        >
+          {copied ? <Check className="text-green-600" /> : <Copy />}
+        </Button>
+      )}
+    </div>
+  )
+}