@allbluecn/web-app 0.12.0 → 0.12.2

package/src/components/harness/workbench/use-track-columns.ts

@@ -0,0 +1,69 @@
+import { useCallback, useEffect, useRef, useState } from "react"
+
+export const SIDEBAR_MIN = 264
+export const SIDEBAR_MAX = 420
+export const RAIL_MIN = 300
+export const CENTER_MIN = 400
+export const SIDEBAR_AUTO_COLLAPSE = 1024
+const SIDEBAR_STORAGE = "allblue.harness.sidebarWidth"
+const RAIL_STORAGE = "allblue.harness.railWidth"
+
+export interface ColumnPrefs { sidebar: number; rail: number }
+export interface ColumnsState extends ColumnPrefs {
+  railVisible: boolean
+}
+
+export function clampColumns(viewport: number, prefs: ColumnPrefs): ColumnsState {
+  const sidebar = Math.min(SIDEBAR_MAX, Math.max(SIDEBAR_MIN, prefs.sidebar))
+  const rail = Math.min(560, Math.max(RAIL_MIN, prefs.rail))
+  const center = viewport - sidebar - rail
+  if (center >= CENTER_MIN) return { sidebar, rail, railVisible: true }
+  const centerShrunk = viewport - sidebar
+  if (centerShrunk >= CENTER_MIN) {
+    const railSpace = viewport - sidebar - CENTER_MIN
+    return {
+      sidebar,
+      rail: railSpace >= RAIL_MIN ? railSpace : 0,
+      railVisible: railSpace >= RAIL_MIN,
+    }
+  }
+  return { sidebar, rail: 0, railVisible: false }
+}
+
+export function useTrackColumns(railOpen: boolean) {
+  const [viewport, setViewport] = useState(() =>
+    typeof window === "undefined" ? 1440 : window.innerWidth,
+  )
+  useEffect(() => {
+    const onResize = () => setViewport(window.innerWidth)
+    window.addEventListener("resize", onResize)
+    return () => window.removeEventListener("resize", onResize)
+  }, [])
+  const prefsRef = useRef(readPrefs())
+  const [manualCollapse, setManualCollapse] = useState<boolean | null>(null)
+  const cols = clampColumns(viewport, prefsRef.current)
+  const autoCollapse = viewport < SIDEBAR_AUTO_COLLAPSE
+  const sidebarCollapsed = manualCollapse ?? autoCollapse
+  const setSidebarWidth = useCallback((w: number) => {
+    prefsRef.current.sidebar = w
+    localStorage.setItem(SIDEBAR_STORAGE, String(w))
+  }, [])
+  const setRailWidth = useCallback((w: number) => {
+    prefsRef.current.rail = w
+    localStorage.setItem(RAIL_STORAGE, String(w))
+  }, [])
+  return {
+    columns: railOpen ? cols : { ...cols, rail: 0, railVisible: false },
+    sidebarCollapsed,
+    setManualCollapse,
+    setSidebarWidth,
+    setRailWidth,
+  }
+}
+
+function readPrefs(): ColumnPrefs {
+  return {
+    sidebar: Number(localStorage.getItem(SIDEBAR_STORAGE)) || 280,
+    rail: Number(localStorage.getItem(RAIL_STORAGE)) || 360,
+  }
+}

package/src/components/harness/workbench/workbench-shell.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import { useCallback, useRef, type ReactNode } from "react"
+import { useTrackColumns } from "./use-track-columns"
+
+export interface WorkbenchShellProps {
+  sidebar: ReactNode
+  center: ReactNode
+  rail: ReactNode | null
+  onSidebarWidthChange?: (w: number) => void
+}
+
+export function WorkbenchShell({ sidebar, center, rail }: WorkbenchShellProps) {
+  const railOpen = rail !== null
+  const { columns, sidebarCollapsed, setManualCollapse, setSidebarWidth, setRailWidth } =
+    useTrackColumns(railOpen)
+  const dragBase = useRef<{ x: number; w: number } | null>(null)
+
+  const startSidebarDrag = useCallback(
+    (e: React.PointerEvent) => {
+      dragBase.current = { x: e.clientX, w: columns.sidebar }
+      const el = e.currentTarget as HTMLElement
+      el.setPointerCapture(e.pointerId)
+      const onMove = (ev: PointerEvent) => {
+        if (!dragBase.current) return
+        const next = dragBase.current.w + (ev.clientX - dragBase.current.x)
+        setSidebarWidth(Math.min(420, Math.max(264, next)))
+      }
+      const onUp = () => {
+        dragBase.current = null
+        el.removeEventListener("pointermove", onMove)
+        el.removeEventListener("pointerup", onUp)
+      }
+      el.addEventListener("pointermove", onMove)
+      el.addEventListener("pointerup", onUp)
+    },
+    [columns.sidebar, setSidebarWidth],
+  )
+
+  return (
+    <div className="flex h-full min-h-0 overflow-hidden">
+      <aside
+        className="relative shrink-0 border-r transition-none"
+        style={{ width: sidebarCollapsed ? 56 : columns.sidebar }}
+        data-testid="workbench-sidebar"
+      >
+        {sidebar}
+      </aside>
+      {!sidebarCollapsed && (
+        <div
+          className="z-10 w-1 shrink-0 cursor-col-resize bg-transparent hover:bg-border"
+          onPointerDown={startSidebarDrag}
+          role="separator"
+          aria-orientation="vertical"
+        />
+      )}
+      <main className="flex min-w-0 flex-1 flex-col overflow-hidden">{center}</main>
+      {columns.railVisible && rail && (
+        <>
+          <div
+            className="z-10 w-1 shrink-0 cursor-col-resize bg-transparent hover:bg-border"
+            onPointerDown={(e) => {
+              dragBase.current = { x: e.clientX, w: columns.rail }
+              const el = e.currentTarget as HTMLElement
+              el.setPointerCapture(e.pointerId)
+              const onMove = (ev: PointerEvent) => {
+                if (!dragBase.current) return
+                const next = dragBase.current.w - (ev.clientX - dragBase.current.x)
+                setRailWidth(Math.min(560, Math.max(300, next)))
+              }
+              const onUp = () => {
+                dragBase.current = null
+                el.removeEventListener("pointermove", onMove)
+                el.removeEventListener("pointerup", onUp)
+              }
+              el.addEventListener("pointermove", onMove)
+              el.addEventListener("pointerup", onUp)
+            }}
+            role="separator"
+            aria-orientation="vertical"
+          />
+          <aside
+            className="shrink-0 border-l"
+            style={{ width: columns.rail }}
+            data-testid="workbench-rail"
+          >
+            {rail}
+          </aside>
+        </>
+      )}
+      {sidebarCollapsed && (
+        <button
+          aria-label="展开侧栏"
+          className="absolute bottom-4 left-14 z-20"
+          onClick={() => setManualCollapse(false)}
+        >
+          {/* 展开图标由任务后续接入 */}
+        </button>
+      )}
+    </div>
+  )
+}