aegon-gen 1.0.0

package/src/utils/gen-ai-navigation.ts

@@ -0,0 +1,37 @@
+import type { Router } from 'vue-router'
+
+function openGenAiPage(
+  router: Router,
+  envUrl: string | undefined,
+  routeName: string,
+  query?: Record<string, string>,
+) {
+  const configured = envUrl?.trim()
+  const url = configured || router.resolve({ name: routeName, query }).href
+  window.open(url, '_blank')
+}
+
+/** 開啟模板中心（優先 VITE_TEMPLATE_CENTER_URL，否則同域路由） */
+export function openTemplateCenter(router: Router) {
+  openGenAiPage(router, import.meta.env.VITE_TEMPLATE_CENTER_URL, 'TemplateCenter')
+}
+
+/** 開啟模板中心（優先 VITE_MODEL_MANAGER_URL，否則同域路由） */
+export function openModelManager(router: Router, query?: Record<string, string>) {
+  openGenAiPage(router, import.meta.env.VITE_MODEL_MANAGER_URL, 'model-manager', query)
+}
+
+/** 開啟管理中心（優先 VITE_MANAGEMENT_CENTER_URL，否則同域路由） */
+export function openManagementCenter(router: Router, query?: Record<string, string>) {
+  openGenAiPage(router, import.meta.env.VITE_MANAGEMENT_CENTER_URL, 'management-center', query)
+}
+
+/** 同頁跳轉報告中心 */
+export function navigateToReportCenter(router: Router) {
+  void router.push({ name: 'report-center' })
+}
+
+/** 開啟報告中心（優先 VITE_REPORT_CENTER_URL，否則新分頁打開同域路由） */
+export function openReportCenter(router: Router, query?: Record<string, string>) {
+  openGenAiPage(router, import.meta.env.VITE_REPORT_CENTER_URL, 'report-center', query)
+}

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

@@ -0,0 +1,455 @@
+import { computed, nextTick, onUnmounted, ref, watch, type ComputedRef, type Ref } from 'vue'
+
+export const CAPSULE_SCROLLBAR_STYLE_ID = 'capsule-scrollbar-styles'
+export const CAPSULE_SCROLL_CONTAINER_CLASS = 'capsule-scroll-container'
+
+const NATIVE_GUTTER_HIDE_PX = 20
+
+export interface CapsuleScrollbarTheme {
+  thumbColor?: string
+  thumbHoverColor?: string
+  thumbActiveColor?: string
+  trackColor?: string
+  thumbWidthPx?: number
+  classPrefix?: string
+}
+
+export interface CapsuleScrollbarOptions extends CapsuleScrollbarTheme {
+  scrollEl: Ref<HTMLElement | null>
+  anchorEl?: Ref<HTMLElement | null>
+  active: Ref<boolean>
+  gutterPx?: number
+  thumbWidthPx?: number
+  minThumbPx?: number
+  visibleRatio?: number
+  alwaysVisible?: boolean
+  autoHideAfterMs?: number
+  rightOffsetPx?: number
+}
+
+export interface CapsuleScrollbarBindings {
+  canScroll: Ref<boolean>
+  shown: Ref<boolean>
+  visible: ComputedRef<boolean>
+  rootStyle: ComputedRef<Record<string, string>>
+  thumbStyle: ComputedRef<Record<string, string>>
+  rootClass: string
+  thumbClass: string
+  onThumbMouseDown: (event: MouseEvent) => void
+  refresh: () => void
+  bind: () => void
+  unbind: () => void
+}
+
+const DEFAULT_THEME: Required<Omit<CapsuleScrollbarTheme, 'thumbWidthPx'>> & { thumbWidthPx: number } = {
+  thumbColor: '#999',
+  thumbHoverColor: '#777',
+  thumbActiveColor: '#666',
+  trackColor: 'transparent',
+  thumbWidthPx: 10,
+  classPrefix: 'capsule-scrollbar',
+}
+
+export function injectCapsuleScrollbarStyles(theme: CapsuleScrollbarTheme = {}): () => void {
+  const merged = { ...DEFAULT_THEME, ...theme }
+  const p = merged.classPrefix
+  const thumbW = merged.thumbWidthPx
+  const hide = NATIVE_GUTTER_HIDE_PX
+
+  const css = `
+.${CAPSULE_SCROLL_CONTAINER_CLASS} {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+  overflow-y: auto !important;
+  box-sizing: border-box !important;
+  padding-right: calc(var(--capsule-scroll-padding-right, 0px) + ${hide}px) !important;
+  margin-right: -${hide}px !important;
+  width: calc(100% + ${hide}px) !important;
+}
+.${CAPSULE_SCROLL_CONTAINER_CLASS}::-webkit-scrollbar,
+.${CAPSULE_SCROLL_CONTAINER_CLASS}::-webkit-scrollbar-thumb,
+.${CAPSULE_SCROLL_CONTAINER_CLASS}::-webkit-scrollbar-track,
+.${CAPSULE_SCROLL_CONTAINER_CLASS}::-webkit-scrollbar-corner {
+  -webkit-appearance: none !important;
+  appearance: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  background: transparent !important;
+}
+.${p} {
+  position: fixed;
+  z-index: 12;
+  box-sizing: border-box;
+  padding: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+.${p}--hidden {
+  opacity: 0;
+  pointer-events: none !important;
+}
+.${p}__thumb {
+  width: ${thumbW}px;
+  height: 100%;
+  background: ${merged.thumbColor};
+  border-radius: 9999px;
+  cursor: grab;
+  pointer-events: auto;
+  box-shadow: none;
+  filter: none;
+  outline: none;
+  border: none;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+.${p}__thumb:hover {
+  background: ${merged.thumbHoverColor};
+}
+.${p}__thumb:active {
+  cursor: grabbing;
+  background: ${merged.thumbActiveColor};
+}
+`
+
+  let style = document.getElementById(CAPSULE_SCROLLBAR_STYLE_ID) as HTMLStyleElement | null
+  if (!style) {
+    style = document.createElement('style')
+    style.id = CAPSULE_SCROLLBAR_STYLE_ID
+    document.head.appendChild(style)
+  }
+  style.textContent = css
+
+  return () => style?.remove()
+}
+
+let globalCapsuleStylesInitialized = false
+
+/** 應用啟動時注入一次；全局組件與舊版 useCapsuleScrollbar 手寫模板共用 */
+export function initCapsuleScrollbarGlobal(theme: CapsuleScrollbarTheme = {}) {
+  if (globalCapsuleStylesInitialized) return
+  injectCapsuleScrollbarStyles(theme)
+  globalCapsuleStylesInitialized = true
+}
+
+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_THEME.classPrefix
+
+  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: ReturnType<typeof setTimeout> | 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 = 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,
+  }
+}
+
+// --- 頁面滿屏滾動鎖定 ---
+
+/** 鎖定 document 滿屏滾動，返回 cleanup 恢復原 overflow */
+export function lockDocumentScroll(): () => void {
+  const html = document.documentElement
+  const body = document.body
+  const prevHtml = html.style.overflow
+  const prevBody = body.style.overflow
+
+  html.style.overflow = 'hidden'
+  body.style.overflow = 'hidden'
+
+  return () => {
+    html.style.overflow = prevHtml
+    body.style.overflow = prevBody
+  }
+}
+
+// --- 視口主內容區高度 ---
+
+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<HTMLElement>(options.subtractSelector)
+    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 = ''
+  }
+}

package/src/utils/openDataLoaderWordExport.ts

@@ -0,0 +1,33 @@
+const EXPORT_WORD_API = '/opendataloader/export/word'
+
+export interface OpenDataLoaderWordExportOptions {
+  fileName?: string
+}
+
+export async function exportPdfViaOpenDataLoader(
+  pdfBlob: Blob,
+  options: OpenDataLoaderWordExportOptions = {},
+): Promise<Blob> {
+  const fileName = options.fileName ?? 'report.pdf'
+  const response = await fetch(EXPORT_WORD_API, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/pdf',
+      'X-File-Name': encodeURIComponent(fileName),
+    },
+    body: pdfBlob,
+  })
+
+  if (!response.ok) {
+    let message = `Word export failed (${response.status})`
+    try {
+      const payload = (await response.json()) as { message?: string }
+      if (payload.message) message = payload.message
+    } catch {
+      // ignore json parse errors
+    }
+    throw new Error(message)
+  }
+
+  return response.blob()
+}

package/src/utils/pageScrollbar.ts

@@ -0,0 +1,115 @@
+import { lockDocumentScroll } from './gen-ai-scroll'
+
+export { lockDocumentScroll }
+
+export interface PageScrollbarStyleOptions {
+  /** 滚动条宽高，默认 20px */
+  size?: number
+  /** 挂载到滚动容器的 class，默认 app-page-scrollbar */
+  className?: string
+  trackColor?: string
+  thumbColor?: string
+  thumbHoverColor?: string
+}
+
+export interface SetupPageScrollOptions extends PageScrollbarStyleOptions {
+  /** 需要滚动的容器（元素或选择器） */
+  containers: (HTMLElement | string)[]
+  /** 进入页面时锁定 html/body 满屏滚动，默认 true */
+  lockDocumentScroll?: boolean
+}
+
+const DEFAULT_CLASS = 'app-page-scrollbar'
+const STYLE_ID_PREFIX = 'app-page-scrollbar-style'
+
+function resolveElements(targets: (HTMLElement | string)[]): HTMLElement[] {
+  const result: HTMLElement[] = []
+  for (const target of targets) {
+    if (typeof target === 'string') {
+      result.push(...Array.from(document.querySelectorAll<HTMLElement>(target)))
+    } else {
+      result.push(target)
+    }
+  }
+  return result
+}
+
+/** 注入 20px（可配置）滚动条样式，返回 cleanup */
+export function injectPageScrollbarStyle(options?: PageScrollbarStyleOptions): () => void {
+  const size = options?.size ?? 20
+  const className = options?.className ?? DEFAULT_CLASS
+  const track = options?.trackColor ?? '#f4f5f7'
+  const thumb = options?.thumbColor ?? '#cbd5e1'
+  const thumbHover = options?.thumbHoverColor ?? '#94a3b8'
+  const styleId = `${STYLE_ID_PREFIX}-${size}`
+
+  const css = `
+.${className}::-webkit-scrollbar {
+  width: ${size}px !important;
+  height: ${size}px !important;
+}
+.${className}::-webkit-scrollbar-track {
+  background: ${track} !important;
+  border-radius: 9999px !important;
+}
+.${className}::-webkit-scrollbar-thumb {
+  background-color: ${thumb} !important;
+  border-radius: 9999px !important;
+  border: 3px solid transparent !important;
+  background-clip: padding-box !important;
+  min-height: 40px;
+}
+.${className}::-webkit-scrollbar-thumb:hover {
+  background-color: ${thumbHover} !important;
+}
+.${className} {
+  scrollbar-color: ${thumb} ${track};
+  scrollbar-width: auto;
+}
+`
+
+  let style = document.getElementById(styleId) as HTMLStyleElement | null
+  if (!style) {
+    style = document.createElement('style')
+    style.id = styleId
+    document.head.appendChild(style)
+  }
+  style.textContent = css
+
+  return () => {
+    style?.remove()
+  }
+}
+
+
+/** 为容器标记滚动条 class，返回 cleanup */
+export function markScrollContainers(
+  containers: (HTMLElement | string)[],
+  className = DEFAULT_CLASS,
+): () => void {
+  const elements = resolveElements(containers)
+  elements.forEach((el) => el.classList.add(className))
+
+  return () => {
+    elements.forEach((el) => el.classList.remove(className))
+  }
+}
+
+/**
+ * 进入页面：禁用满屏滚动 + 为指定容器应用定制滚动条（默认 20px）
+ * 离开页面时调用返回的 cleanup 恢复
+ */
+export function setupPageScroll(options: SetupPageScrollOptions): () => void {
+  const className = options.className ?? DEFAULT_CLASS
+  const lockDocument = options.lockDocumentScroll ?? true
+
+  const cleanStyle = injectPageScrollbarStyle(options)
+  const cleanLock = lockDocument ? lockDocumentScroll() : () => {}
+  const cleanMark = markScrollContainers(options.containers, className)
+
+  return () => {
+    cleanMark()
+    cleanLock()
+    cleanStyle()
+  }
+}