@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/peek-panel.tsx

@@ -15,24 +15,62 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-// BUG 详情侧滑 peek 面板（规格 §5.3 双形态之一）：自绘侧滑容器（非 Dialog portal，
-// 与列表同层渲染）+ Escape 关闭 + 上下条导航（getBugNeighborsFn）+ 全屏跳转
-// /bugs/$bugId（由父级 onFullscreen 决定）。与独立路由共用 BugDetailBody。
+// BUG 详情 Peek 面板（三期 BUG-C 四形态，规格 §5.3）：side-dock（portal 布局槽）/
+// side-peek（侧滑浮窗）/ modal / full-screen 四分支，容器结构照 story peek-panel
+// 样式表（testcase peek-panel 同款）。默认 side-peek 兼容叠加层旧用法（story 面板
+// 内嵌 BUG 预览不传 mode）。Escape 仅 side-peek 注册（Dialog 形态由自身 Esc 处理）；
+// 上下条导航（getBugNeighborsFn）+ 全屏跳转 /bugs/$bugId（由父级 onFullscreen 决定）。
+// 与独立路由共用 BugDetailBody。
 import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { Skeleton } from "@/components/ui/skeleton";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { CalendarClock, Folder } from "lucide-react";
 import { getBugDetailFn, getBugNeighborsFn } from "@/server/serverFns/bug";
+import { formatTimestamp } from "@/lib/datetime";
 import type { BugPatch } from "./display/use-paged-bug-groups";
 import type { BugDetail } from "./types";
 import type { UserBrief } from "@/components/story/types";
 import { BugDetailBody } from "./detail/bug-detail-body";
 import { BugPanelHeader } from "./bug-panel-header";
+import type { PeekMode } from "@/components/shared-kit/peek/peek-mode";
+import {
+  PEEK_SIDE_PANEL_WIDTH_CLASS,
+  isDockMode,
+  usePeekDockSlot,
+} from "@/components/shared-kit/peek/dock-slot";
+import { useLayoutResponsive, useDockPresence } from "@/lib/layout-responsive";
 import { m } from "@/paraglide/messages.js";
 
+// modal / full-screen 的固定尺寸（side-dock 与 side-peek 均走自适应宽度，不在此表）。
+// 与 story/testcase peek-panel 同值（容器类为视觉常量，改样式须三处同步）。
+const CONTENT_CLASS: Record<"modal" | "full-screen", string> = {
+  modal: "top-[8.33%] left-[8.33%] w-[83.33%] h-[83.33%] sm:max-w-none",
+  "full-screen": "inset-4 w-auto h-auto sm:max-w-none",
+};
+
+/** 侧边浮窗（side-peek）：贴内容区右缘滑出的浮层层，仅左缘直角。
+    四边统一用 ring-1 的 1px 描边（此前额外叠加 border-l 导致左缘约 2px、显粗）。 */
+const SIDE_PEEK_PANEL_CLASS =
+  "flex flex-col overflow-hidden bg-popover rounded-r-2xl rounded-l-none shadow-xl ring-1 ring-foreground/10 @max-[1399px]:rounded-l-2xl";
+
+/** 侧边面板（side-dock）：四角圆角与右侧内容容器一致（rounded-xl）。
+    停靠时额外加边框（独立卡片）；重叠时自身不加边框（避免与内容容器的边框叠成 2px）。 */
+const SIDE_DOCK_PANEL_CLASS =
+  "flex flex-col overflow-hidden bg-popover rounded-xl";
+const DOCKED_PANEL_BORDER_CLASS = "border border-sidebar-border";
+
 interface BugPeekPanelProps {
   bugId: string;
   users: UserBrief[];
   labels: { id: string; name: string; color: string }[];
+  /** 叠加打开时的上级需求（peek 传入）：关闭按钮变返回箭头 + 渲染面包屑 */
+  breadcrumbParent?: { identifier?: string; projectId?: string };
+  /** Peek 展示模式（四形态与 story 一致；缺省 side-peek 兼容叠加层旧用法） */
+  mode?: PeekMode;
+  /** 模式切换回调（与 mode 同时传入时头部渲染布局切换器） */
+  onModeChange?: (mode: PeekMode) => void;
   onClose: () => void;
   /** 面板内上一条/下一条导航（父级持有 peek 状态） */
   onNavigate: (bugId: string) => void;
@@ -48,6 +86,9 @@ export function BugPeekPanel({
   bugId,
   users,
   labels,
+  breadcrumbParent,
+  mode: modeProp,
+  onModeChange,
   onClose,
   onNavigate,
   onFullscreen,
@@ -55,6 +96,12 @@ export function BugPeekPanel({
   onDeleted,
   onBugPatched,
 }: BugPeekPanelProps) {
+  const mode = modeProp ?? "side-peek";
+  const isSidePeek = mode === "side-peek";
+  const dockSlot = usePeekDockSlot(mode);
+  const isDock = isDockMode(mode);
+  const { dockOverlay } = useLayoutResponsive();
+  useDockPresence(isDock);
   const [bug, setBug] = useState<BugDetail | null>(null);
   const [neighbors, setNeighbors] = useState<{ prevId: string | null; nextId: string | null } | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -95,7 +142,9 @@ export function BugPeekPanel({
     };
   }, [bugId]);
 
-  useHotkey("Escape", onClose);
+  // Esc 仅 side-peek 面板注册（side-dock 与 story/testcase 口径一致不注册；
+  // modal/full-screen 由 Dialog 自身 Esc → onOpenChange 关闭）
+  useHotkey("Escape", onClose, { enabled: isSidePeek });
 
   const handleBugUpdate = useCallback(
     (next: BugDetail) => {
@@ -123,9 +172,11 @@ export function BugPeekPanel({
 
   const header = (
     <BugPanelHeader
-      closeType="collapse"
+      closeType={breadcrumbParent ? "back" : isSidePeek ? "collapse" : "close"}
       onClose={onClose}
       onFullscreen={onFullscreen}
+      mode={mode}
+      onModeChange={onModeChange}
       onPrevious={neighbors?.prevId ? () => onNavigate(neighbors.prevId!) : undefined}
       onNext={neighbors?.nextId ? () => onNavigate(neighbors.nextId!) : undefined}
       prevDisabled={!neighbors?.prevId}
@@ -135,43 +186,110 @@ export function BugPeekPanel({
       canArchive={!!bug && !bug.archived}
       onArchived={onArchived}
       onDeleted={onDeleted}
+      navTitle={bug ? `${bug.identifier} ${bug.title}` : undefined}
     />
   );
 
-  return (
+  const body = (
     <div
-      // 宽度取规格 §5.3 明文：w-[min(100%,max(85vw,560px),1200px)]
-      className="absolute inset-y-0 right-0 z-20 flex w-[min(100%,max(85vw,560px),1200px)] flex-col overflow-hidden border-l bg-popover rounded-r-2xl rounded-l-none shadow-xl ring-1 ring-foreground/10 @max-[1399px]:rounded-l-2xl"
-      onClick={(e) => {
-        // 仅拦截本容器 DOM 内的点击（防冒泡到列表背景误关 peek）；
-        // Radix 弹层 portal 到 body 不在本容器内，stopPropagation 会破坏其
-        // DismissableLayer outside-dismiss 判定（story peek-panel 同款注释）
-        if (!e.currentTarget.contains(e.target as Node)) return;
-        e.stopPropagation();
-      }}
+      className={`flex min-h-0 flex-1 flex-col overflow-hidden transition-opacity duration-200${refreshing ? " pointer-events-none opacity-50" : ""}`}
     >
-      {header}
+      {error && <div className="w-full p-6 text-sm text-destructive">{m.bug_detail_load_failed()}: {error}</div>}
+      {!error && !bug && (
+        <div className="space-y-4 px-6 py-4">
+          <Skeleton className="h-3 w-24" />
+          <Skeleton className="h-8 w-72" />
+          <div className="flex gap-2">
+            <Skeleton className="h-7 w-20" />
+            <Skeleton className="h-7 w-20" />
+            <Skeleton className="h-7 w-20" />
+          </div>
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-2/3" />
+        </div>
+      )}
+      {breadcrumbParent && (
+        <div className="flex items-center gap-1.5 px-6 pt-4 text-sm font-mono text-muted-foreground">
+          <button
+            type="button"
+            onClick={onClose}
+            className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer"
+          >
+            <Folder className="size-4 shrink-0 text-muted-foreground" />
+            {breadcrumbParent.identifier}
+          </button>
+          <span className="text-muted-foreground/40 px-1">/</span>
+          <span>{bug?.identifier ?? "…"}</span>
+          {bug && (
+            <span className="ml-auto inline-flex items-center gap-3 font-sans text-xs">
+              <span className="inline-flex items-center gap-1">
+                <CalendarClock className="size-3" />
+                {m.bug_list_occurrences({ count: bug.totalCount })}
+              </span>
+              <span>{m.bug_list_last_occur()} {formatTimestamp(bug.lastOccurAt)}</span>
+            </span>
+          )}
+        </div>
+      )}
+      {bug && (
+        <BugDetailBody
+          key={bug.id}
+          bug={bug}
+          users={users}
+          labels={labels}
+          onBugUpdate={handleBugUpdate}
+          compactMeta
+          hideIdentifierRow={!!breadcrumbParent}
+        />
+      )}
+    </div>
+  );
+
+  if (isSidePeek || isDock) {
+    // 侧边面板（dock）：portal 到右侧内容父容器之外的布局槽，与内容区并排占位。
+    // 槽位就绪且未进入窄屏浮层态时才 portal 占位；否则（SSR 首帧 / 布局外渲染 /
+    // 窄屏浮层）退化为容器内绝对定位覆盖，避免面板消失或首帧布局跳动。
+    const dockLayout = isDock && dockSlot !== null && !dockOverlay;
+    const panel = (
       <div
-        className={`flex min-h-0 flex-1 flex-col overflow-hidden transition-opacity duration-200${refreshing ? " pointer-events-none opacity-50" : ""}`}
+        data-testid="peek-panel"
+        className={`${dockLayout ? `relative h-full w-full ${DOCKED_PANEL_BORDER_CLASS}` : `absolute inset-y-0 right-0 z-20 ${PEEK_SIDE_PANEL_WIDTH_CLASS}`} ${isDock ? SIDE_DOCK_PANEL_CLASS : SIDE_PEEK_PANEL_CLASS}`}
+        onClick={(e) => {
+          // 仅拦截本容器 DOM 内的点击（防止冒泡到列表背景误关 peek）。
+          // Radix/Base UI 弹层 portal 到 body、不在本容器 DOM 内，其合成事件冒泡会
+          // 经过这里，若 stopPropagation 会同时终止原生 click 冒泡到 document，
+          // 导致 DismissableLayer 的 outside-dismiss 判定失效（弹窗内 popover 无法关闭）。
+          if (!e.currentTarget.contains(e.target as Node)) return;
+          e.stopPropagation();
+        }}
       >
-        {error && <div className="w-full p-6 text-sm text-destructive">{m.bug_detail_load_failed()}: {error}</div>}
-        {!error && !bug && (
-          <div className="space-y-4 px-6 py-4">
-            <Skeleton className="h-3 w-24" />
-            <Skeleton className="h-8 w-72" />
-            <div className="flex gap-2">
-              <Skeleton className="h-7 w-20" />
-              <Skeleton className="h-7 w-20" />
-              <Skeleton className="h-7 w-20" />
-            </div>
-            <Skeleton className="h-4 w-full" />
-            <Skeleton className="h-4 w-2/3" />
-          </div>
-        )}
-        {bug && (
-          <BugDetailBody key={bug.id} bug={bug} users={users} labels={labels} onBugUpdate={handleBugUpdate} />
-        )}
+        {header}
+        {body}
       </div>
-    </div>
+    );
+
+    if (dockLayout && dockSlot) {
+      return createPortal(panel, dockSlot);
+    }
+    return panel;
+  }
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent
+        showCloseButton={false}
+        data-testid="peek-panel"
+        className={`flex flex-col gap-0 overflow-hidden p-0 shadow-2xl transition-all duration-300 translate-x-0 translate-y-0 data-open:zoom-in-0 data-closed:zoom-out-0 bg-popover ${CONTENT_CLASS[mode as "modal" | "full-screen"]}`}
+        initialFocus={false}
+      >
+        {header}
+        {body}
+      </DialogContent>
+    </Dialog>
   );
 }