aegon-lv97 1.0.0

package/gen-ai/common/utils/scroll.ts

@@ -0,0 +1,577 @@
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
+export const CAPSULE_SCROLL_CONTAINER_CLASS = 'capsule-scroll-container'
+
+export interface CapsuleScrollbarTheme {
+  thumbColor?: string
+  thumbHoverColor?: string
+  thumbActiveColor?: string
+  trackColor?: string
+  thumbWidthPx?: number
+  classPrefix?: string
+}
+
+export interface CapsuleScrollbarOptions extends CapsuleScrollbarTheme {
+  scrollEl: { value: HTMLElement | null }
+  anchorEl?: { value: HTMLElement | null }
+  active: { value: boolean }
+  gutterPx?: number
+  thumbWidthPx?: number
+  minThumbPx?: number
+  visibleRatio?: number
+  alwaysVisible?: boolean
+  autoHideAfterMs?: number
+  rightOffsetPx?: number
+}
+
+export interface CapsuleScrollbarBindings {
+  canScroll: { value: boolean }
+  shown: { value: boolean }
+  visible: { value: boolean }
+  rootStyle: { value: { [key: string]: string } }
+  thumbStyle: { value: { [key: string]: string } }
+  rootClass: string
+  thumbClass: string
+  onThumbMouseDown: (event: MouseEvent) => void
+  refresh: () => void
+  bind: () => void
+  unbind: () => void
+}
+
+const DEFAULT_CLASS_PREFIX = 'capsule-scrollbar'
+
+interface NativeHideSnapshot {
+  paddingRight: string
+  marginRight: string
+  width: string
+  boxSizing: string
+  scrollbarWidth: string
+  msOverflowStyle: string
+}
+
+export function markCapsuleScrollContainer(el: HTMLElement): () => void {
+  const computed = getComputedStyle(el)
+  const snapshot: NativeHideSnapshot = {
+    paddingRight: el.style.paddingRight,
+    marginRight: el.style.marginRight,
+    width: el.style.width,
+    boxSizing: el.style.boxSizing,
+    scrollbarWidth: el.style.scrollbarWidth,
+    msOverflowStyle:
+      (el.style as CSSStyleDeclaration & { msOverflowStyle?: string }).msOverflowStyle ?? '',
+  }
+
+  el.style.setProperty('--capsule-scroll-padding-right', computed.paddingRight)
+  el.classList.add(CAPSULE_SCROLL_CONTAINER_CLASS)
+  el.style.scrollbarWidth = 'none'
+  ;(el.style as CSSStyleDeclaration & { msOverflowStyle?: string }).msOverflowStyle = 'none'
+
+  return () => {
+    el.classList.remove(CAPSULE_SCROLL_CONTAINER_CLASS)
+    el.style.removeProperty('--capsule-scroll-padding-right')
+    el.style.paddingRight = snapshot.paddingRight
+    el.style.marginRight = snapshot.marginRight
+    el.style.width = snapshot.width
+    el.style.boxSizing = snapshot.boxSizing
+    el.style.scrollbarWidth = snapshot.scrollbarWidth
+    ;(el.style as CSSStyleDeclaration & { msOverflowStyle?: string }).msOverflowStyle =
+      snapshot.msOverflowStyle
+  }
+}
+
+export function useCapsuleScrollbar(options: CapsuleScrollbarOptions): CapsuleScrollbarBindings {
+  const thumbWidthPx = options.thumbWidthPx ?? 10
+  const gutterPx = options.gutterPx ?? thumbWidthPx
+  const minThumbPx = options.minThumbPx ?? 48
+  const visibleRatio = options.visibleRatio ?? 1
+  const rightOffsetPx = options.rightOffsetPx ?? 1
+  const autoHideAfterMs = options.autoHideAfterMs ?? 3000
+  const alwaysVisible = options.alwaysVisible ?? autoHideAfterMs <= 0
+  const classPrefix = options.classPrefix ?? DEFAULT_CLASS_PREFIX
+
+  const canScroll = ref(false)
+  const shown = ref(false)
+  const zoneTop = ref(0)
+  const zoneRight = ref(rightOffsetPx)
+  const zoneHeight = ref(0)
+  const thumbHeight = ref(minThumbPx)
+  const thumbOffset = ref(0)
+
+  const visible = computed(() => canScroll.value && (alwaysVisible || shown.value))
+
+  let resizeObserver: ResizeObserver | undefined
+  let thumbDragCleanup: (() => void) | undefined
+  let removeContainerMark: (() => void) | undefined
+  let hideTimer: number | undefined
+  let rafId = 0
+
+  const rootStyle = computed(() => ({
+    top: `${zoneTop.value + thumbOffset.value}px`,
+    right: `${zoneRight.value}px`,
+    width: `${gutterPx}px`,
+    height: `${Math.round(thumbHeight.value)}px`,
+  }))
+
+  const thumbStyle = computed(() => ({
+    width: `${thumbWidthPx}px`,
+    height: '100%',
+  }))
+
+  function clearHideTimer() {
+    if (hideTimer !== undefined) {
+      clearTimeout(hideTimer)
+      hideTimer = undefined
+    }
+  }
+
+  function scheduleHide() {
+    clearHideTimer()
+    if (alwaysVisible || autoHideAfterMs <= 0) return
+    hideTimer = window.setTimeout(() => {
+      shown.value = false
+      hideTimer = undefined
+    }, autoHideAfterMs)
+  }
+
+  function revealBar() {
+    if (!canScroll.value) return
+    shown.value = true
+    scheduleHide()
+  }
+
+  function refreshLayout() {
+    const scrollEl = options.scrollEl.value
+    const anchorEl = options.anchorEl?.value ?? scrollEl
+    if (!options.active.value || !scrollEl || !anchorEl) {
+      canScroll.value = false
+      shown.value = false
+      return
+    }
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollEl
+    const scrollable = scrollHeight > clientHeight + 1
+    canScroll.value = scrollable
+    if (!scrollable) {
+      shown.value = false
+      return
+    }
+
+    const anchorRect = anchorEl.getBoundingClientRect()
+    const shrinkInset = (anchorRect.height * (1 - visibleRatio)) / 2
+
+    zoneTop.value = Math.round(anchorRect.top + shrinkInset)
+    zoneRight.value = rightOffsetPx
+    zoneHeight.value = Math.round(anchorRect.height * visibleRatio)
+
+    const trackH = zoneHeight.value
+    thumbHeight.value = Math.max(minThumbPx, (clientHeight / scrollHeight) * trackH)
+    const maxThumbTravel = Math.max(0, trackH - thumbHeight.value)
+    const scrollMax = scrollHeight - clientHeight
+    thumbOffset.value = scrollMax > 0 ? Math.round((scrollTop / scrollMax) * maxThumbTravel) : 0
+  }
+
+  function scheduleRefresh() {
+    cancelAnimationFrame(rafId)
+    rafId = requestAnimationFrame(refreshLayout)
+  }
+
+  function onScroll() {
+    revealBar()
+    scheduleRefresh()
+  }
+
+  function bind() {
+    unbind()
+    const scrollEl = options.scrollEl.value
+    if (!scrollEl) return
+
+    removeContainerMark = markCapsuleScrollContainer(scrollEl)
+    refreshLayout()
+    scrollEl.addEventListener('scroll', onScroll, { passive: true })
+    resizeObserver = new ResizeObserver(() => scheduleRefresh())
+    resizeObserver.observe(scrollEl)
+    if (options.anchorEl?.value) resizeObserver.observe(options.anchorEl.value)
+    window.addEventListener('resize', scheduleRefresh, { passive: true })
+  }
+
+  function unbind() {
+    cancelAnimationFrame(rafId)
+    clearHideTimer()
+    window.removeEventListener('resize', scheduleRefresh)
+    resizeObserver?.disconnect()
+    resizeObserver = undefined
+    thumbDragCleanup?.()
+    thumbDragCleanup = undefined
+    options.scrollEl.value?.removeEventListener('scroll', onScroll)
+    removeContainerMark?.()
+    removeContainerMark = undefined
+    canScroll.value = false
+    shown.value = false
+  }
+
+  function onThumbMouseDown(event: MouseEvent) {
+    const scrollEl = options.scrollEl.value
+    if (!scrollEl) return
+
+    event.preventDefault()
+    revealBar()
+    clearHideTimer()
+
+    const startY = event.clientY
+    const startScrollTop = scrollEl.scrollTop
+    const trackH = zoneHeight.value
+    const scrollMax = scrollEl.scrollHeight - scrollEl.clientHeight
+    const maxThumbTravel = Math.max(0, trackH - thumbHeight.value)
+
+    const onMove = (ev: MouseEvent) => {
+      if (maxThumbTravel <= 0 || scrollMax <= 0) return
+      scrollEl.scrollTop = startScrollTop + ((ev.clientY - startY) / maxThumbTravel) * scrollMax
+    }
+
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+      thumbDragCleanup = undefined
+      scheduleHide()
+    }
+
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup', onUp)
+    thumbDragCleanup = onUp
+  }
+
+  watch(
+    () => options.active.value,
+    (active) => {
+      if (active) {
+        void nextTick(() => {
+          bind()
+          void nextTick(refreshLayout)
+        })
+        return
+      }
+      unbind()
+    },
+    { immediate: true }
+  )
+
+  onUnmounted(unbind)
+
+  return {
+    canScroll,
+    shown,
+    visible,
+    rootStyle,
+    thumbStyle,
+    rootClass: classPrefix,
+    thumbClass: `${classPrefix}__thumb`,
+    onThumbMouseDown,
+    refresh: refreshLayout,
+    bind,
+    unbind,
+  }
+}
+
+// --- 頁面滿屏滾動鎖定 ---
+
+const LAYOUT_SCROLL_ROOT_SELECTOR = '.main-layout__main'
+
+interface OverflowSnapshot {
+  el: HTMLElement
+  overflow: string
+  overflowX: string
+  overflowY: string
+}
+
+function snapshotOverflow(el: HTMLElement): OverflowSnapshot {
+  return {
+    el,
+    overflow: el.style.overflow,
+    overflowX: el.style.overflowX,
+    overflowY: el.style.overflowY,
+  }
+}
+
+function lockElementOverflow(el: HTMLElement) {
+  el.style.overflow = 'hidden'
+  el.style.overflowX = 'hidden'
+  el.style.overflowY = 'hidden'
+}
+
+function restoreElementOverflow(snapshot: OverflowSnapshot) {
+  const { el, overflow, overflowX, overflowY } = snapshot
+  el.style.overflow = overflow
+  el.style.overflowX = overflowX
+  el.style.overflowY = overflowY
+}
+
+/** 鎖定 document / 佈局主區滾動，返回 cleanup 恢復原 overflow（保留，新頁面請用 hiddenLayoutScroll） */
+export function lockDocumentScroll(): () => void {
+  const roots = [
+    document.documentElement,
+    document.body,
+    ...Array.from(document.querySelectorAll<HTMLElement>(LAYOUT_SCROLL_ROOT_SELECTOR)),
+  ]
+
+  const snapshots = roots.map(snapshotOverflow)
+  snapshots.forEach(({ el }) => lockElementOverflow(el))
+
+  return () => {
+    snapshots.forEach(restoreElementOverflow)
+  }
+}
+
+// --- 隱藏 .layout 佈局滾動（進頁調用，離頁 cleanup）---
+// useHiddenLayoutScroll / hiddenLayoutScroll 及配套
+
+/** 默認佈局滾動容器：#app 下的 .layout */
+export const LAYOUT_CONTAINER_SELECTOR = '.layout'
+
+/** 鎖定時掛上的 class，resize 後仍靠樣式表固定 */
+export const LAYOUT_SCROLL_HIDDEN_CLASS = 'layout--scroll-hidden'
+
+const LAYOUT_SCROLL_HIDDEN_STYLE_ID = 'gen-ai-layout-scroll-hidden-style'
+
+interface LayoutScrollSnapshot {
+  el: HTMLElement
+  height: string
+  maxHeight: string
+  overflow: string
+  overflowX: string
+  overflowY: string
+}
+
+let layoutScrollLockCount = 0
+let layoutScrollSnapshots: LayoutScrollSnapshot[] | null = null
+let layoutScrollActiveSelector = LAYOUT_CONTAINER_SELECTOR
+let layoutScrollReapplyBound = false
+
+function ensureLayoutScrollHiddenStyles() {
+  if (typeof document === 'undefined') return
+  if (document.getElementById(LAYOUT_SCROLL_HIDDEN_STYLE_ID)) return
+
+  const style = document.createElement('style')
+  style.id = LAYOUT_SCROLL_HIDDEN_STYLE_ID
+  style.textContent = `
+.${LAYOUT_SCROLL_HIDDEN_CLASS},
+.layout.${LAYOUT_SCROLL_HIDDEN_CLASS},
+.main-layout__main.${LAYOUT_SCROLL_HIDDEN_CLASS},
+.main-layout__main.layout.${LAYOUT_SCROLL_HIDDEN_CLASS} {
+  height: 100% !important;
+  max-height: 100% !important;
+  overflow: hidden !important;
+  overflow-x: hidden !important;
+  overflow-y: hidden !important;
+}
+`
+  document.head.appendChild(style)
+}
+
+function snapshotLayoutScroll(el: HTMLElement): LayoutScrollSnapshot {
+  return {
+    el,
+    height: el.style.height,
+    maxHeight: el.style.maxHeight,
+    overflow: el.style.overflow,
+    overflowX: el.style.overflowX,
+    overflowY: el.style.overflowY,
+  }
+}
+
+function applyHiddenLayoutScroll(el: HTMLElement) {
+  ensureLayoutScrollHiddenStyles()
+  el.classList.add(LAYOUT_SCROLL_HIDDEN_CLASS)
+  // inline + important：防止業務樣式 / resize 覆寫
+  el.style.setProperty('height', '100%', 'important')
+  el.style.setProperty('max-height', '100%', 'important')
+  el.style.setProperty('overflow', 'hidden', 'important')
+  el.style.setProperty('overflow-x', 'hidden', 'important')
+  el.style.setProperty('overflow-y', 'hidden', 'important')
+}
+
+function restoreLayoutScroll(snapshot: LayoutScrollSnapshot) {
+  const { el, height, maxHeight, overflow, overflowX, overflowY } = snapshot
+  if (!el.isConnected) return
+  el.classList.remove(LAYOUT_SCROLL_HIDDEN_CLASS)
+  el.style.removeProperty('height')
+  el.style.removeProperty('max-height')
+  el.style.removeProperty('overflow')
+  el.style.removeProperty('overflow-x')
+  el.style.removeProperty('overflow-y')
+  // 還原進頁前的 inline（若原本有）
+  if (height) el.style.height = height
+  if (maxHeight) el.style.maxHeight = maxHeight
+  if (overflow) el.style.overflow = overflow
+  if (overflowX) el.style.overflowX = overflowX
+  if (overflowY) el.style.overflowY = overflowY
+}
+
+function resolveLayoutScrollElements(selector: string): HTMLElement[] {
+  const fromSelector = Array.from(document.querySelectorAll<HTMLElement>(selector))
+  if (fromSelector.length) return fromSelector
+
+  // 兼容尚未掛 layout class 的主內容區
+  return Array.from(document.querySelectorAll<HTMLElement>(LAYOUT_SCROLL_ROOT_SELECTOR))
+}
+
+function reapplyHiddenLayoutScroll() {
+  if (layoutScrollLockCount <= 0) return
+  const elements = resolveLayoutScrollElements(layoutScrollActiveSelector)
+
+  // DOM 若被重建：先快照原樣再套鎖定，離頁才能正確恢復
+  if (layoutScrollSnapshots) {
+    const known = new Set(layoutScrollSnapshots.map((s) => s.el))
+    for (const el of elements) {
+      if (!known.has(el)) {
+        layoutScrollSnapshots.push(snapshotLayoutScroll(el))
+      }
+    }
+  }
+
+  elements.forEach(applyHiddenLayoutScroll)
+}
+
+function bindLayoutScrollReapply() {
+  if (layoutScrollReapplyBound) return
+  layoutScrollReapplyBound = true
+  window.addEventListener('resize', reapplyHiddenLayoutScroll, { passive: true })
+  window.visualViewport?.addEventListener('resize', reapplyHiddenLayoutScroll)
+  window.visualViewport?.addEventListener('scroll', reapplyHiddenLayoutScroll)
+}
+
+function unbindLayoutScrollReapply() {
+  if (!layoutScrollReapplyBound) return
+  layoutScrollReapplyBound = false
+  window.removeEventListener('resize', reapplyHiddenLayoutScroll)
+  window.visualViewport?.removeEventListener('resize', reapplyHiddenLayoutScroll)
+  window.visualViewport?.removeEventListener('scroll', reapplyHiddenLayoutScroll)
+}
+
+export interface HiddenLayoutScrollOptions {
+  /** 佈局容器選擇器，默認 `.layout` */
+  selector?: string
+}
+
+/**
+ * 進頁隱藏佈局滾動：`.layout { height: 100%; overflow: hidden }`
+ * 離頁調用返回的 cleanup 恢復原樣。支持多次嵌套調用（引用計數）。
+ * resize / 視口變化時會自動重套，保證鎖定一直有效。
+ */
+export function hiddenLayoutScroll(options?: HiddenLayoutScrollOptions): () => void {
+  const selector = options?.selector ?? LAYOUT_CONTAINER_SELECTOR
+  layoutScrollActiveSelector = selector
+  const elements = resolveLayoutScrollElements(selector)
+
+  if (layoutScrollLockCount === 0) {
+    layoutScrollSnapshots = elements.map(snapshotLayoutScroll)
+    elements.forEach(applyHiddenLayoutScroll)
+    bindLayoutScrollReapply()
+  } else {
+    // 已鎖定時再調用：立即重套，避免漏網
+    elements.forEach(applyHiddenLayoutScroll)
+  }
+  layoutScrollLockCount += 1
+
+  // 下一幀再套一次，擋住 mount 後樣式回寫
+  requestAnimationFrame(() => reapplyHiddenLayoutScroll())
+
+  let released = false
+  return () => {
+    if (released) return
+    released = true
+    layoutScrollLockCount = Math.max(0, layoutScrollLockCount - 1)
+    if (layoutScrollLockCount === 0) {
+      unbindLayoutScrollReapply()
+      layoutScrollSnapshots?.forEach(restoreLayoutScroll)
+      layoutScrollSnapshots = null
+    }
+  }
+}
+
+/**
+ * 頁面 setup 內調用即可：自動 onMounted 鎖定 .layout、onUnmounted 恢復。
+ * 業務頁無需再手寫 cleanup；resize 期間鎖定保持有效。
+ */
+export function useHiddenLayoutScroll(options?: HiddenLayoutScrollOptions): void {
+  let cleanup: (() => void) | undefined
+
+  onMounted(() => {
+    cleanup = hiddenLayoutScroll(options)
+  })
+
+  onUnmounted(() => {
+    cleanup?.()
+    cleanup = undefined
+  })
+}
+
+// --- 視口主內容區高度 ---
+
+export interface ViewportBodyHeightOptions {
+  /** 從視口高度中扣除的固定像素 */
+  subtract?: number
+  /** 按選擇器測量需扣除的高度（如 PageHeader） */
+  subtractSelector?: string
+  /** 測量 subtractSelector 時的父級容器，默認取 element 的 offsetParent 或 document */
+  subtractRoot?: HTMLElement
+  /** 是否監聽 resize，默認 true */
+  listenResize?: boolean
+}
+
+/** 當前視口高度（px） */
+export function getViewportHeight(): number {
+  return window.innerHeight
+}
+
+function resolveSubtract(el: HTMLElement, options?: ViewportBodyHeightOptions): number {
+  if (options?.subtract !== undefined) return options.subtract
+
+  if (options?.subtractSelector) {
+    const root = options.subtractRoot ?? el.parentElement ?? document.body
+    const node = root.querySelector(options.subtractSelector) as HTMLElement | null
+    if (node) return node.getBoundingClientRect().height
+  }
+
+  return 0
+}
+
+/** 計算主內容區可用高度（視口高度 − 扣除項） */
+export function getViewportBodyHeight(
+  el: HTMLElement,
+  options?: ViewportBodyHeightOptions
+): number {
+  const subtract = resolveSubtract(el, options)
+  return Math.max(0, getViewportHeight() - subtract)
+}
+
+/**
+ * 將元素高度綁定為當前視口可用高度；返回 cleanup（移除監聽並清空 inline height）
+ */
+export function bindViewportBodyHeight(
+  el: HTMLElement,
+  options?: ViewportBodyHeightOptions
+): () => void {
+  const listenResize = options?.listenResize ?? true
+
+  const update = () => {
+    const height = getViewportBodyHeight(el, options)
+    el.style.height = `${height}px`
+    el.style.maxHeight = `${height}px`
+  }
+
+  update()
+
+  if (!listenResize) {
+    return () => {
+      el.style.height = ''
+      el.style.maxHeight = ''
+    }
+  }
+
+  window.addEventListener('resize', update)
+  return () => {
+    window.removeEventListener('resize', update)
+    el.style.height = ''
+    el.style.maxHeight = ''
+  }
+}