@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/reui/gantt/use-gantt-row-window.ts

@@ -0,0 +1,159 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// 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/>.
+
+// 甘特图行窗口虚拟化滚动 hook：gantt-row-window.ts 纯函数的 React 接入层。
+// 职责边界——px↔rem 换算、scroll 监听、渐进增强门控都收在这里，
+// 纯函数层全程 rem 不碰 px。canVirtualize=false（SSR / jsdom 无布局）时
+// 返回覆盖全部行的全窗口，消费方按同一 slice+垫片路径渲染，零分叉。
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  type RefObject,
+} from "react"
+
+import {
+  buildRowOffsets,
+  computeRowWindow,
+  type GanttRowWindow,
+} from "./gantt-row-window"
+
+/**
+ * reui 默认最小行高（gantt-view 的 `metrics?.minRowHeight ?? 2.5`）。
+ * 无 bars 行的回落高度必须钉死非 0 值：用 0 会让累计偏移塌缩、窗口边界算错。
+ * reui 源码未导出该常量，此处与 gantt-view 内联默认值保持同值。
+ */
+export const DEFAULT_GANTT_MIN_ROW_REM = 2.5
+
+/** 与 gantt-view.tsx 的 getPaneViewport 同口径：pane 内真正的滚动 viewport */
+function getPaneViewport(pane: HTMLElement | null): HTMLElement | null {
+  return (
+    pane?.querySelector<HTMLElement>("[data-slot=scroll-area-viewport]") ?? null
+  )
+}
+
+export interface GanttRowWindowState extends GanttRowWindow {
+  /** false = jsdom/SSR 等无布局环境（渐进增强门控未开），全渲染 */
+  canVirtualize: boolean
+}
+
+const FULL_WINDOW = {
+  startIdx: 0,
+  endIdx: Number.POSITIVE_INFINITY,
+  canVirtualize: false,
+} as const
+
+/**
+ * 行窗口状态：滚动 pane（tree/timeline 二选一，两 pane 垂直同步）驱动，
+ * 两个 pane 共用同一窗口实例。消费方 `rows.slice(startIdx, endIdx)`（endIdx 排他）。
+ */
+export function useGanttRowWindow<Row extends { resource: { id: string } }>(
+  rows: readonly Row[],
+  rowBars: ReadonlyMap<string, { heightRem: number }>,
+  paneRef: RefObject<HTMLElement | null>,
+  minRowRem: number = DEFAULT_GANTT_MIN_ROW_REM,
+  overscan = 10,
+): GanttRowWindowState {
+  // 未门控时窗口覆盖全部行（slice = 原数组，垫片恒 0）
+  const [win, setWin] = useState<{ startIdx: number; endIdx: number }>(
+    () => FULL_WINDOW
+  )
+  const [canVirtualize, setCanVirtualize] = useState(false)
+
+  // 行高数组：无 bars 的行回落 minRowRem；再构建累计偏移表（rem 单位）
+  const offsets = useMemo(() => {
+    const heightRems = rows.map(
+      (row) => rowBars.get(row.resource.id)?.heightRem ?? minRowRem
+    )
+    return buildRowOffsets(heightRems)
+  }, [rows, rowBars, minRowRem])
+
+  // 垫片从「当前 offsets + 窗口下标」实时推导：行集变化而窗口下标不变时
+  // 垫片也跟着变，不落 state 就不会有陈旧垫片
+  const topPadRem = offsets.prefix[win.startIdx] ?? 0
+  const bottomPadRem =
+    win.endIdx >= offsets.prefix.length
+      ? 0
+      : offsets.totalRem - offsets.prefix[win.endIdx]
+
+  // 滚动回调经 ref 读最新值，rows/rowBars 变化不重绑监听
+  const offsetsRef = useRef(offsets)
+  offsetsRef.current = offsets
+  const overscanRef = useRef(overscan)
+  overscanRef.current = overscan
+
+  const measure = useCallback(() => {
+    const viewport = getPaneViewport(paneRef.current)
+    if (!viewport || viewport.clientHeight <= 0) return
+    // px→rem 换算在本层做（纯函数层不做）：漏掉会窗口错位一个根字号倍数。
+    // computed font-size 为 CSS 关键字时（jsdom 返回 "medium"）parseFloat 得
+    // NaN，回落浏览器默认根字号 16。
+    const rem =
+      parseFloat(getComputedStyle(document.documentElement).fontSize) || 16
+    const scrollTopRem = viewport.scrollTop / rem
+    const viewportRem = viewport.clientHeight / rem
+    const next = computeRowWindow(
+      offsetsRef.current,
+      scrollTopRem,
+      viewportRem,
+      overscanRef.current
+    )
+    setWin((prev) =>
+      prev.startIdx === next.startIdx && prev.endIdx === next.endIdx
+        ? prev
+        : { startIdx: next.startIdx, endIdx: next.endIdx }
+    )
+    setCanVirtualize(true)
+  }, [paneRef])
+
+  // [allblue-fork] scroll 监听绑在 pane 上、走捕获阶段（scroll 不冒泡，但捕获
+  // 相位可达子元素）：custom 模式 ScrollArea 以 key={scale} 键控，scale 切换会
+  // 重挂 ScrollArea、替换 viewport 元素——绑 viewport 会在替换后死挂（旧监听
+  // 留在已脱离节点，滚动不再重算窗口）。捕获监听随 pane 存活，measure 每次
+  // 现查当前 viewport。
+  // 渐进增强门控由 measure 自检 viewport clientHeight > 0 完成（SSR 无 effect；
+  // jsdom 无布局时 measure no-op，保持全渲染，测试与 hydration 不受影响——
+  // kanban canVirtualize 同款语义）。
+  useLayoutEffect(() => {
+    const pane = paneRef.current
+    if (!pane) return
+    measure()
+    let raf: number | null = null
+    const onScroll = () => {
+      if (raf !== null) return
+      raf = requestAnimationFrame(() => {
+        raf = null
+        measure()
+      })
+    }
+    pane.addEventListener("scroll", onScroll, { capture: true, passive: true })
+    return () => {
+      pane.removeEventListener("scroll", onScroll, { capture: true })
+      if (raf !== null) cancelAnimationFrame(raf)
+    }
+  }, [paneRef, measure])
+
+  // 行集/行高变化（增删行、展开折叠、bars 重排）时窗口可能越界或错位，重算
+  useEffect(() => {
+    measure()
+  }, [measure, offsets])
+
+  return { startIdx: win.startIdx, endIdx: win.endIdx, topPadRem, bottomPadRem, canVirtualize }
+}

package/src/components/reui/icon-stack.tsx

@@ -0,0 +1,90 @@
+import { cn } from "cn"
+
+type IconStackProps = React.ComponentProps<"div">
+
+function IconStack({ className, children, style, ...props }: IconStackProps) {
+  return (
+    <div
+      data-slot="icon-stack"
+      className={cn(
+        "text-foreground **:data-[slot=icon-stack-layer]:fill-background relative h-20 w-18",
+        className
+      )}
+      style={
+        {
+          "--icon-stack-content-x": "71%",
+          "--icon-stack-content-y": "58%",
+          ...style,
+        } as React.CSSProperties
+      }
+      {...props}
+    >
+      <svg
+        aria-hidden="true"
+        viewBox="0 0 72 81"
+        fill="none"
+        className="h-full w-full overflow-visible"
+      >
+        <ellipse
+          cx="36"
+          cy="76"
+          rx="30"
+          ry="7"
+          fill="currentColor"
+          fillOpacity="0.055"
+          className="blur-[4px]"
+        />
+
+        <IconStackLayer opacity="0.4" />
+        <IconStackLayer opacity="0.6" x={13.65} y={6.04} />
+        <IconStackLayer opacity="0.8" x={27.32} y={12.08} active />
+      </svg>
+
+      {children ? (
+        <div
+          data-slot="icon-stack-content"
+          className="text-muted-foreground pointer-events-none absolute top-[var(--icon-stack-content-y)] left-[var(--icon-stack-content-x)] flex -translate-x-1/2 -translate-y-1/2 scale-x-90 -skew-y-26 items-center justify-center"
+        >
+          {children}
+        </div>
+      ) : null}
+    </div>
+  )
+}
+
+function IconStackLayer({
+  active = false,
+  opacity,
+  x = 0,
+  y = 0,
+}: {
+  active?: boolean
+  opacity: string
+  x?: number
+  y?: number
+}) {
+  return (
+    <g opacity={opacity} transform={`translate(${x} ${y})`}>
+      <path
+        data-slot="icon-stack-layer"
+        d="M42.2538 2.046C41.4408 1.6325 40.3965 1.6677 39.2612 2.2424L7.9616 18.1934C5.3895 19.5039 3.301 23.1064 3.301 26.2322V64.3226C3.301 66.0677 3.9458 67.2943 4.962 67.8199L1.8363 66.229C0.8201 65.7104 0.1753 64.4771 0.1753 62.732V24.6412C0.1753 21.5085 2.2638 17.913 4.8359 16.6024L36.1355 0.6515C37.2778 0.0698 38.322 0.0416 39.128 0.4551L42.2538 2.046Z"
+        stroke="currentColor"
+        strokeOpacity={active ? "0.3" : "0.2"}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        data-slot="icon-stack-layer"
+        d="M42.2545 2.0456C43.2707 2.5643 43.9155 3.7979 43.9155 5.543V43.6337C43.9155 46.7665 41.827 50.3616 39.2549 51.6722L7.9554 67.6235C6.813 68.2052 5.7687 68.2331 4.9628 67.8196C3.9465 67.301 3.3018 66.0673 3.3018 64.3222V26.2318C3.3018 23.0991 5.3903 19.5036 7.9624 18.193L39.2619 2.2421C40.4043 1.6604 41.4486 1.6321 42.2545 2.0456Z"
+        stroke="currentColor"
+        strokeOpacity={active ? "0.3" : "0.2"}
+        strokeWidth="0.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  )
+}
+
+export { IconStack, type IconStackProps }

package/src/components/reui/kanban-keyboard.ts

@@ -0,0 +1,268 @@
+import {
+  KeyboardCode,
+  KeyboardSensor,
+  closestCorners,
+  defaultCoordinates,
+  defaultKeyboardCoordinateGetter,
+  getFirstCollision,
+  type Activators,
+  type ClientRect,
+  type DroppableContainer,
+  type KeyboardCodes,
+  type KeyboardCoordinateGetter,
+  type KeyboardSensorOptions,
+  type KeyboardSensorProps,
+  type SensorContext,
+  type SensorInstance,
+  type UniqueIdentifier,
+} from "@dnd-kit/core"
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable"
+import type { Coordinates } from "@dnd-kit/utilities"
+import { getOwnerDocument, getWindow, subtract } from "@dnd-kit/utilities"
+
+/**
+ * 键盘拖拽传感器（#470 窄屏修复）。
+ *
+ * 上游 KeyboardSensor.handleKeyDown 在目标位于滚动容器视口外时会走「只滚动容器、
+ * return 不下发 move」分支——它假设滚动会触发碰撞重算，但 sortable 的碰撞检测基于
+ * translate（对滚动不变），over 永不更新：每次按键容器滚一下、被拖项原地踏步，松键
+ * 后顺序不变。窄屏下列表横向溢出，目标列几乎总在视口外，键盘拖列完全失效；宽屏列
+ * 全部可见（无可滚空间）不触发该分支，所以只有窄屏坏。
+ *
+ * 本实现保留上游的激活契约（复用 KeyboardSensor.activators）与坐标步进（复用
+ * defaultKeyboardCoordinateGetter），删除滚动分支——每次方向键都把被拖项向目标
+ * 平移完整一步（over 因此必然更新），滚动交给 move 提交后的 scrollIntoView 兜底，
+ * 不再做上游那套 scrollDelta 折算。
+ */
+
+// 与上游 defaultKeyboardCodes 一致（core 未导出，这里本地维护）
+const KEYBOARD_CODES: KeyboardCodes = {
+  start: [KeyboardCode.Space, KeyboardCode.Enter],
+  cancel: [KeyboardCode.Esc],
+  end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab],
+}
+
+export type KeyboardMoveDecision =
+  | { kind: "move"; coordinates: Coordinates; referenceCoordinates: Coordinates }
+  | { kind: "end" }
+  | { kind: "cancel" }
+  | { kind: "ignore" }
+
+export interface ResolveKeyboardMoveInput {
+  event: KeyboardEvent
+  active: UniqueIdentifier
+  options?: KeyboardSensorOptions | undefined
+  context: SensorContext
+  referenceCoordinates: Coordinates | null
+}
+
+/**
+ * 键盘位移决策（纯函数，不碰 DOM）：
+ * - end/cancel：终止/取消键（Space/Enter/Tab、Esc）
+ * - ignore：getter 无目标（非方向键、无候选）
+ * - move：目标位移（相对 reference 的绝对 translate，等同上游无滚动路径的公式
+ *   `new - reference`；首按时 reference 取当前位置，与上游一致）
+ */
+export function resolveKeyboardMove({
+  event,
+  active,
+  options,
+  context,
+  referenceCoordinates,
+}: ResolveKeyboardMoveInput): KeyboardMoveDecision {
+  const { keyboardCodes = KEYBOARD_CODES, coordinateGetter = defaultKeyboardCoordinateGetter } =
+    options ?? {}
+  const { code } = event
+
+  if (keyboardCodes.end.includes(code)) return { kind: "end" }
+  if (keyboardCodes.cancel.includes(code)) return { kind: "cancel" }
+
+  const { collisionRect } = context
+  const currentCoordinates: Coordinates = collisionRect
+    ? { x: collisionRect.left, y: collisionRect.top }
+    : { ...defaultCoordinates }
+  // 上游：首按时 reference 就位为当前位置，且同一拍即参与位移计算
+  const reference = referenceCoordinates ?? currentCoordinates
+
+  const newCoordinates = coordinateGetter(event, { active, context, currentCoordinates })
+  if (!newCoordinates) return { kind: "ignore" }
+
+  return { kind: "move", coordinates: subtract(newCoordinates, reference), referenceCoordinates: reference }
+}
+
+const DIRECTIONS: string[] = [
+  KeyboardCode.Down,
+  KeyboardCode.Right,
+  KeyboardCode.Up,
+  KeyboardCode.Left,
+]
+
+/**
+ * 列感知的键盘坐标 getter：列拖拽只在列候选中选目标。
+ *
+ * 上游 sortableKeyboardCoordinates 的候选注册表是「列 + 卡」混合的，closestCorners
+ * 拖拽中途可能在相邻列与其卡片之间跳变（卡片左上角比列头更近时），位移落点漂移；
+ * 且列头（列 rect 左上角）天然被列内卡片支配，直接过滤掉卡片候选目标更确定。
+ * 这与 kanban.tsx 里 collisionDetection 对列拖拽「只在列中选最近中心」的口径一致。
+ * 卡片拖拽原样委托上游 getter，行为零漂移。
+ */
+export function makeKanbanKeyboardCoordinateGetter(
+  isColumnId: (id: UniqueIdentifier) => boolean
+): KeyboardCoordinateGetter {
+  return (event, { active, currentCoordinates, context }) => {
+    if (!DIRECTIONS.includes(event.code)) return
+    if (!isColumnId(active)) {
+      return sortableKeyboardCoordinates(event, { active, currentCoordinates, context })
+    }
+
+    const { active: activeEntry, collisionRect, droppableRects, droppableContainers, over } = context
+    if (!activeEntry || !collisionRect) return
+
+    const { code } = event
+    const filteredContainers: DroppableContainer[] = []
+    droppableContainers.getEnabled().forEach((entry) => {
+      if (!entry || entry.disabled) return
+      if (!isColumnId(entry.id)) return
+      const entryRect = droppableRects.get(entry.id)
+      if (!entryRect) return
+      // 方向过滤（上游同款）：只与移动方向一侧的候选比较，active 自身被天然排除
+      const inDirection =
+        (code === KeyboardCode.Right && collisionRect.left < entryRect.left) ||
+        (code === KeyboardCode.Left && collisionRect.left > entryRect.left) ||
+        (code === KeyboardCode.Down && collisionRect.top < entryRect.top) ||
+        (code === KeyboardCode.Up && collisionRect.top > entryRect.top)
+      if (!inDirection) return
+      filteredContainers.push(entry)
+    })
+
+    const collisions = closestCorners({
+      active: activeEntry,
+      collisionRect,
+      droppableRects,
+      droppableContainers: filteredContainers,
+      pointerCoordinates: null,
+    })
+    let closestId = getFirstCollision(collisions, "id")
+    if (closestId === over?.id && collisions.length > 1) closestId = collisions[1].id
+    if (closestId == null) return
+
+    const activeDroppable = droppableContainers.get(active)
+    const newDroppable = droppableContainers.get(closestId)
+    const newRect: ClientRect | undefined = newDroppable
+      ? droppableRects.get(newDroppable.id)
+      : undefined
+    if (!activeDroppable || !newDroppable || !newRect) return
+
+    // 列同属 board SortableContext；保留 sortable 的 isAfter 尺寸补偿公式以兼容
+    // 未来不等高列（等宽等高列 offset 恒为 0）
+    const activeSortable = activeDroppable.data.current?.sortable
+    const newSortable = newDroppable.data.current?.sortable
+    const isAfterActive =
+      activeSortable != null &&
+      newSortable != null &&
+      activeSortable.containerId === newSortable.containerId &&
+      activeSortable.index < newSortable.index
+    const offset = isAfterActive
+      ? { x: collisionRect.width - newRect.width, y: collisionRect.height - newRect.height }
+      : { x: 0, y: 0 }
+    return { x: newRect.left - offset.x, y: newRect.top - offset.y }
+  }
+}
+
+export class KanbanKeyboardSensor implements SensorInstance {
+  static activators: Activators<KeyboardSensorOptions> = KeyboardSensor.activators
+
+  // 与上游 KeyboardSensor 一致：键盘拖拽不启用 auto-scroll，可视性由本类兜底
+  autoScrollEnabled = false
+
+  private props: KeyboardSensorProps
+  private referenceCoordinates: Coordinates | null = null
+  private teardown: () => void = () => {}
+  private scrollFrame: number | null = null
+
+  constructor(props: KeyboardSensorProps) {
+    this.props = props
+    this.attach()
+  }
+
+  private attach() {
+    this.handleStart()
+    const { event } = this.props
+    const ownerDocument = getOwnerDocument(event.target as Node)
+    const win = getWindow(event.target as Node)
+
+    const onKeyDown = (nativeEvent: Event) => this.handleKeyDown(nativeEvent as KeyboardEvent)
+    // 上游同款：延后一拍挂 keydown 监听，跳过触发激活的那次按键
+    const timerId = setTimeout(() => {
+      ownerDocument.addEventListener("keydown", onKeyDown)
+    })
+    const onCancel = () => this.handleCancel()
+    win.addEventListener("resize", onCancel)
+    win.addEventListener("visibilitychange", onCancel)
+
+    this.teardown = () => {
+      clearTimeout(timerId)
+      ownerDocument.removeEventListener("keydown", onKeyDown)
+      win.removeEventListener("resize", onCancel)
+      win.removeEventListener("visibilitychange", onCancel)
+      if (this.scrollFrame != null) cancelAnimationFrame(this.scrollFrame)
+    }
+  }
+
+  private handleStart() {
+    const node = this.props.activeNode.node.current
+    if (node) scrollIntoViewNearest(node)
+    this.props.onStart(defaultCoordinates)
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    const decision = resolveKeyboardMove({
+      event,
+      active: this.props.active,
+      options: this.props.options,
+      context: this.props.context.current,
+      referenceCoordinates: this.referenceCoordinates,
+    })
+
+    switch (decision.kind) {
+      case "end":
+        this.handleEnd(event)
+        break
+      case "cancel":
+        this.handleCancel(event)
+        break
+      case "move":
+        this.referenceCoordinates = decision.referenceCoordinates
+        event.preventDefault()
+        this.props.onMove(decision.coordinates)
+        // move 走 React 离散事件同步提交，rAF 时 transform 已落 DOM；
+        // 这里只负责把被拖节点带回视口，不做坐标折算
+        if (this.scrollFrame == null) {
+          this.scrollFrame = requestAnimationFrame(() => {
+            this.scrollFrame = null
+            const node = this.props.activeNode.node.current
+            if (node) scrollIntoViewNearest(node)
+          })
+        }
+        break
+      case "ignore":
+        break
+    }
+  }
+
+  private handleEnd(event: { preventDefault(): void }) {
+    event.preventDefault()
+    this.teardown()
+    this.props.onEnd()
+  }
+
+  private handleCancel(event?: { preventDefault(): void }) {
+    event?.preventDefault()
+    this.teardown()
+    this.props.onCancel()
+  }
+}
+
+function scrollIntoViewNearest(node: HTMLElement) {
+  node.scrollIntoView({ block: "nearest", inline: "nearest" })
+}