aegon-lv97 1.0.0

package/gen-ai/components/CapsuleScrollbar.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    v-if="canScroll"
+    :class="[rootClass, { [`${rootClass}--hidden`]: !shown }]"
+    :style="rootStyle"
+    aria-hidden="true"
+  >
+    <div :class="thumbClass" :style="thumbStyle" @mousedown.stop="onThumbMouseDown" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, toRef, toValue, watch } from 'vue'
+import { useCapsuleScrollbar } from '../common/utils/scroll'
+
+const props = withDefaults(
+  defineProps<{
+    /** 滾動容器；模板傳 ref 時會自動解包為 HTMLElement */
+    scrollEl?: unknown
+    anchorEl?: unknown
+    active?: boolean
+    gutterPx?: number
+    thumbWidthPx?: number
+    minThumbPx?: number
+    visibleRatio?: number
+    alwaysVisible?: boolean
+    autoHideAfterMs?: number
+    rightOffsetPx?: number
+    classPrefix?: string
+  }>(),
+  {
+    scrollEl: undefined,
+    anchorEl: undefined,
+    active: false,
+    alwaysVisible: false,
+    autoHideAfterMs: 3000,
+    visibleRatio: 1,
+    rightOffsetPx: 1,
+  }
+)
+
+const scrollElRef = ref(null as HTMLElement | null)
+const anchorElRef = ref(null as HTMLElement | null)
+const activeRef = toRef(props, 'active')
+
+watch(
+  () => toValue(props.scrollEl),
+  (el) => {
+    scrollElRef.value = (el as HTMLElement | null) ?? null
+  },
+  { immediate: true }
+)
+
+watch(
+  () => toValue(props.anchorEl),
+  (el) => {
+    anchorElRef.value = (el as HTMLElement | null) ?? null
+  },
+  { immediate: true }
+)
+
+const {
+  canScroll,
+  shown,
+  rootStyle,
+  thumbStyle,
+  rootClass,
+  thumbClass,
+  onThumbMouseDown,
+  refresh,
+} = useCapsuleScrollbar({
+  scrollEl: scrollElRef,
+  anchorEl: anchorElRef,
+  active: activeRef,
+  gutterPx: props.gutterPx,
+  thumbWidthPx: props.thumbWidthPx,
+  minThumbPx: props.minThumbPx,
+  visibleRatio: props.visibleRatio,
+  alwaysVisible: props.alwaysVisible,
+  autoHideAfterMs: props.autoHideAfterMs,
+  rightOffsetPx: props.rightOffsetPx,
+  classPrefix: props.classPrefix,
+})
+
+defineExpose({ refresh })
+</script>
+
+<style>
+.capsule-scroll-container {
+  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) + 20px) !important;
+  margin-right: -20px !important;
+  width: calc(100% + 20px) !important;
+}
+
+.capsule-scroll-container::-webkit-scrollbar,
+.capsule-scroll-container::-webkit-scrollbar-thumb,
+.capsule-scroll-container::-webkit-scrollbar-track,
+.capsule-scroll-container::-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;
+}
+
+.capsule-scrollbar {
+  position: fixed;
+  z-index: 12;
+  box-sizing: border-box;
+  padding: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+
+.capsule-scrollbar--hidden {
+  opacity: 0;
+  pointer-events: none !important;
+}
+
+.capsule-scrollbar__thumb {
+  height: 100%;
+  background: #999;
+  border-radius: 9999px;
+  cursor: grab;
+  pointer-events: auto;
+  box-shadow: none;
+  filter: none;
+  outline: none;
+  border: none;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.capsule-scrollbar__thumb:hover {
+  background: #777;
+}
+
+.capsule-scrollbar__thumb:active {
+  cursor: grabbing;
+  background: #666;
+}
+</style>

package/gen-ai/components/ChapterTitleScroll.vue

@@ -0,0 +1,468 @@
+<template>
+  <component
+    :is="rootTag"
+    class="chapter-title-scroll"
+    :class="{
+      'is-truncatable': isTruncatable,
+      'is-animating': isAnimating,
+      'is-dragging': isDragging,
+      'is-active': active,
+      'is-fit-width': fitWidth,
+      'is-char-truncated': !showFull && isTruncatable && !fitWidth,
+    }"
+    @click="handleClick"
+    @wheel="handleWheel"
+  >
+    <div ref="viewportRef" class="chapter-title-scroll__viewport" @pointerdown="handlePointerDown">
+      <span
+        ref="textRef"
+        class="chapter-title-scroll__text"
+        :style="{ transform: `translateX(${-offset}px)` }"
+      >
+        <template v-if="!showFull && isTruncatable && !fitWidth">{{ truncatedPrefix }}</template>
+        <template v-else>{{ title }}</template>
+      </span>
+      <!-- fitWidth：省略號疊在容器右側 -->
+      <span
+        v-if="!showFull && isTruncatable && fitWidth"
+        class="chapter-title-scroll__ellipsis"
+        aria-hidden="true"
+        >...</span
+      >
+    </div>
+    <!-- 字數截斷：省略號在 overflow 外，保證 ... 完整顯示 -->
+    <span
+      v-if="!showFull && isTruncatable && !fitWidth"
+      class="chapter-title-scroll__ellipsis"
+      aria-hidden="true"
+      >...</span
+    >
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+const TITLE_MAX_DEFAULT = 19
+/** 自動滾動速度（px/s），較慢 */
+const SCROLL_SPEED_PX_PER_SEC = 22
+const END_PAUSE_MS = 280
+/** 全文已能完全顯示時，點擊展開後的停留時間（避免瞬間收回造成閃動/失效感） */
+const FULL_REVEAL_HOLD_MS = 1400
+const DRAG_CLICK_THRESHOLD_PX = 4
+
+const props = defineProps({
+  title: { type: String, required: true },
+  rootTag: { type: String, default: 'li' },
+  active: { type: Boolean, default: false },
+  /** 按容器寬度截斷，空間不足時再顯示 ... */
+  fitWidth: { type: Boolean, default: false },
+  /** 按字元數截斷（fitWidth 為 false 時生效），超過後顯示 ... */
+  maxChars: { type: Number, default: TITLE_MAX_DEFAULT },
+  /** 禁用按住文字橫向拖動，便於整行排序拖曳 */
+  disableScrollDrag: { type: Boolean, default: false },
+})
+
+const viewportRef = ref(null as HTMLElement | null)
+const textRef = ref(null as HTMLElement | null)
+const offset = ref(0)
+const showFull = ref(false)
+const isAnimating = ref(false)
+const isDragging = ref(false)
+const isOverflowing = ref(false)
+
+let animFrameId = 0
+let endPauseTimer = 0
+let dragStartX = 0
+let dragStartOffset = 0
+let pointerMoved = false
+/** pointerup 已處理點擊時，抑制隨後的 click，避免展開後立刻被收回 */
+let suppressClick = false
+let activePointerMove: ((event: PointerEvent) => void) | null = null
+let activePointerUp: ((event: PointerEvent) => void) | null = null
+let resizeObserver: ResizeObserver | null = null
+
+const titleMax = computed(() => Math.max(1, props.maxChars))
+
+const isTruncatable = computed(() =>
+  props.fitWidth ? isOverflowing.value : props.title.length > titleMax.value
+)
+const truncatedPrefix = computed(() =>
+  isTruncatable.value ? props.title.slice(0, titleMax.value) : props.title
+)
+
+function getMaxOffset() {
+  const viewport = viewportRef.value
+  const text = textRef.value
+  if (!viewport || !text) return 0
+  return Math.max(0, text.scrollWidth - viewport.clientWidth)
+}
+
+function clampOffset(value: number) {
+  return Math.min(getMaxOffset(), Math.max(0, value))
+}
+
+function cancelAnimation() {
+  if (animFrameId) {
+    cancelAnimationFrame(animFrameId)
+    animFrameId = 0
+  }
+  if (endPauseTimer) {
+    clearTimeout(endPauseTimer)
+    endPauseTimer = 0
+  }
+  isAnimating.value = false
+}
+
+function removePointerListeners() {
+  if (activePointerMove) {
+    window.removeEventListener('pointermove', activePointerMove)
+    activePointerMove = null
+  }
+  if (activePointerUp) {
+    window.removeEventListener('pointerup', activePointerUp)
+    window.removeEventListener('pointercancel', activePointerUp)
+    activePointerUp = null
+  }
+}
+
+function resetToInitial() {
+  cancelAnimation()
+  removePointerListeners()
+  isDragging.value = false
+  offset.value = 0
+  showFull.value = false
+}
+
+async function ensureFullMode() {
+  if (!showFull.value) {
+    showFull.value = true
+    offset.value = 0
+    await nextTick()
+  }
+}
+
+function waitForLayout() {
+  return new Promise<void>((resolve) => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => resolve())
+    })
+  })
+}
+
+async function startAutoScroll() {
+  if (!isTruncatable.value || isAnimating.value) return
+
+  cancelAnimation()
+  isAnimating.value = true
+  showFull.value = true
+  offset.value = 0
+  await nextTick()
+  await waitForLayout()
+
+  // 等待佈局期間若已被取消/收回，則中止
+  if (!isAnimating.value || !showFull.value) return
+
+  const maxOffset = getMaxOffset()
+
+  // 容器寬度已能裝下全文：無需滾動，停留後再收回（避免「點一下閃一下」）
+  if (maxOffset <= 0) {
+    endPauseTimer = window.setTimeout(() => {
+      resetToInitial()
+    }, FULL_REVEAL_HOLD_MS)
+    return
+  }
+
+  const startTime = performance.now()
+
+  const tick = (now: number) => {
+    const elapsedSec = (now - startTime) / 1000
+    const nextOffset = Math.min(maxOffset, elapsedSec * SCROLL_SPEED_PX_PER_SEC)
+    offset.value = nextOffset
+
+    if (nextOffset >= maxOffset) {
+      endPauseTimer = window.setTimeout(() => {
+        resetToInitial()
+      }, END_PAUSE_MS)
+      return
+    }
+
+    animFrameId = requestAnimationFrame(tick)
+  }
+
+  animFrameId = requestAnimationFrame(tick)
+}
+
+function activateByUserTap() {
+  if (!isTruncatable.value) return
+  // 展開/滾動中再次點擊：提前收回
+  if (isAnimating.value || showFull.value) {
+    resetToInitial()
+    return
+  }
+  void startAutoScroll()
+}
+
+function handleClick() {
+  // pointerup 已處理時吞掉後續 click，不可提前清 suppressClick（否則會立刻再觸發收回造成閃動）
+  if (suppressClick) return
+  if (pointerMoved) {
+    pointerMoved = false
+    return
+  }
+  activateByUserTap()
+}
+
+function handleWheel(event: WheelEvent) {
+  if (!isTruncatable.value) return
+
+  // 豎向滾輪交給父級列表滾動；僅橫向意圖（deltaX 為主或按住 Shift）時拖動標題
+  const isHorizontalIntent = event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY)
+  if (!isHorizontalIntent) return
+
+  event.preventDefault()
+  cancelAnimation()
+
+  void ensureFullMode().then(() => {
+    const delta = (event.deltaX !== 0 ? event.deltaX : event.deltaY) * 0.6
+    offset.value = clampOffset(offset.value + delta)
+  })
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (props.disableScrollDrag || !isTruncatable.value || event.button !== 0) return
+
+  // 延遲進入全文/拖曳：純點擊時不先展開，避免與激活邏輯互相打架閃動
+  pointerMoved = false
+  suppressClick = false
+  dragStartX = event.clientX
+  dragStartOffset = offset.value
+
+  activePointerMove = (moveEvent: PointerEvent) => {
+    const delta = dragStartX - moveEvent.clientX
+    if (!pointerMoved && Math.abs(delta) <= DRAG_CLICK_THRESHOLD_PX) return
+
+    if (!pointerMoved) {
+      pointerMoved = true
+      moveEvent.preventDefault()
+      cancelAnimation()
+      if (!showFull.value) {
+        showFull.value = true
+        offset.value = 0
+      }
+      isDragging.value = true
+      dragStartX = moveEvent.clientX
+      dragStartOffset = offset.value
+      return
+    }
+
+    if (!isDragging.value) return
+    offset.value = clampOffset(dragStartOffset + delta)
+  }
+
+  activePointerUp = () => {
+    const wasDrag = pointerMoved
+    isDragging.value = false
+    removePointerListeners()
+
+    if (wasDrag) {
+      // 拖曳結束：吞掉可能殘留的 click
+      suppressClick = true
+      window.setTimeout(() => {
+        pointerMoved = false
+        suppressClick = false
+      }, 120)
+      return
+    }
+
+    // 純點擊：在 pointerup 激活；延遲釋放 suppress，避免隨後的 click 再觸發一次（閃動/立刻收回）
+    suppressClick = true
+    activateByUserTap()
+    window.setTimeout(() => {
+      suppressClick = false
+    }, 120)
+  }
+
+  window.addEventListener('pointermove', activePointerMove)
+  window.addEventListener('pointerup', activePointerUp)
+  window.addEventListener('pointercancel', activePointerUp)
+}
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resetToInitial()
+})
+
+async function measureOverflow() {
+  if (!props.fitWidth) {
+    isOverflowing.value = false
+    return
+  }
+
+  await nextTick()
+  const viewport = viewportRef.value
+  const text = textRef.value
+  if (!viewport || !text) {
+    isOverflowing.value = false
+    return
+  }
+
+  isOverflowing.value = text.scrollWidth > viewport.clientWidth + 1
+}
+
+function setupResizeObserver() {
+  resizeObserver?.disconnect()
+  if (!props.fitWidth || !viewportRef.value) return
+
+  resizeObserver = new ResizeObserver(() => {
+    void measureOverflow()
+  })
+  resizeObserver.observe(viewportRef.value)
+}
+
+onMounted(() => {
+  void measureOverflow()
+  setupResizeObserver()
+})
+
+watch(
+  () => [props.title, props.fitWidth] as const,
+  () => {
+    void measureOverflow()
+    setupResizeObserver()
+  }
+)
+</script>
+
+<style scoped>
+.chapter-title-scroll {
+  --cts-lh-chapter: clamp(18px, calc(22 * 100vw / 1920), 22px);
+  --cts-fs-chapter: 14px;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  height: var(--cts-lh-chapter);
+  line-height: var(--cts-lh-chapter);
+  list-style: none;
+  color: #606266;
+  cursor: default;
+  user-select: none;
+}
+
+.chapter-title-scroll.is-truncatable {
+  cursor: grab;
+}
+
+.chapter-title-scroll.is-dragging {
+  cursor: grabbing;
+}
+
+.chapter-title-scroll__viewport {
+  position: relative;
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+  height: var(--cts-lh-chapter);
+  line-height: var(--cts-lh-chapter);
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: var(--cts-fs-chapter);
+  font-weight: 500;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  touch-action: none;
+}
+
+/* 字數截斷靜態展示：前綴按內容寬，不裁切最後一字；... 跟在後面 */
+.chapter-title-scroll.is-char-truncated {
+  width: max-content;
+  max-width: 100%;
+}
+
+.chapter-title-scroll.is-char-truncated .chapter-title-scroll__viewport {
+  flex: 0 0 auto;
+  min-width: auto;
+  max-width: none;
+  width: max-content;
+  overflow: visible;
+}
+
+.chapter-title-scroll.is-fit-width {
+  display: block;
+}
+
+.chapter-title-scroll.is-fit-width .chapter-title-scroll__viewport {
+  display: block;
+  width: 100%;
+}
+
+.chapter-title-scroll__viewport::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.chapter-title-scroll__text {
+  display: inline-block;
+  white-space: nowrap;
+  will-change: transform;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  color: #606266;
+}
+
+.chapter-title-scroll.is-dragging .chapter-title-scroll__text {
+  transition: none;
+}
+
+.chapter-title-scroll.is-active,
+.chapter-title-scroll.is-active .chapter-title-scroll__text {
+  color: #c53355;
+  font-weight: 500;
+}
+
+.chapter-title-scroll.is-active .chapter-title-scroll__ellipsis {
+  color: #c53355;
+}
+
+.chapter-title-scroll.is-fit-width.is-active .chapter-title-scroll__ellipsis {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 45%);
+}
+
+/* 默認：緊跟文字右側，加粗紅色；不參與 overflow 裁切 */
+.chapter-title-scroll__ellipsis {
+  position: static;
+  flex: 0 0 auto;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  height: 1em;
+  margin: 0 0 0 2px;
+  padding: 0;
+  background: none;
+  color: #c53355;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+/* fitWidth 滾動截斷：省略號固定在容器右側做遮罩 */
+.chapter-title-scroll.is-fit-width .chapter-title-scroll__ellipsis {
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  padding-left: 8px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 45%);
+  line-height: var(--cts-lh-chapter);
+}
+</style>