aegon-lv97 1.0.0

package/gen-ai/components/Preview/PreviewCapsuleScroll.vue

@@ -0,0 +1,205 @@
+<template>
+  <el-scrollbar ref="scrollRef" class="preview-capsule-scroll" :always="true">
+    <slot />
+  </el-scrollbar>
+</template>
+
+<script setup lang="ts">
+import { ElScrollbar } from 'element-plus'
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+defineOptions({ name: 'PreviewCapsuleScroll' })
+
+/** 正文區同款：8×比例高（最短 50）、#999、全圓角 */
+const THUMB_MIN_PX = 50
+const THUMB_W = 8
+
+const scrollRef = ref<InstanceType<typeof ElScrollbar> | null>(null)
+
+let thumbObserver: MutationObserver | null = null
+let resizeObserver: ResizeObserver | null = null
+let wrapEl: HTMLElement | null = null
+let onScroll: (() => void) | null = null
+
+function getRoot() {
+  return scrollRef.value?.$el as HTMLElement | undefined
+}
+
+function hideNativeScrollbar(wrap: HTMLElement) {
+  wrap.style.setProperty('scrollbar-width', 'none', 'important')
+  wrap.style.setProperty('-ms-overflow-style', 'none', 'important')
+  wrap.setAttribute('data-preview-capsule-wrap', '1')
+}
+
+function lockThumb() {
+  thumbObserver?.disconnect()
+  resizeObserver?.disconnect()
+  if (wrapEl && onScroll) wrapEl.removeEventListener('scroll', onScroll)
+  thumbObserver = null
+  resizeObserver = null
+  wrapEl = null
+  onScroll = null
+
+  const root = getRoot()
+  if (!root) return
+
+  const wrap = root.querySelector('.el-scrollbar__wrap') as HTMLElement | null
+  const bar = root.querySelector('.el-scrollbar__bar.is-vertical') as HTMLElement | null
+  const thumb = bar?.querySelector('.el-scrollbar__thumb') as HTMLElement | null
+  if (!wrap || !bar || !thumb) return
+
+  hideNativeScrollbar(wrap)
+  root.style.setProperty('height', '100%', 'important')
+  root.style.setProperty('max-height', '100%', 'important')
+  wrap.style.setProperty('height', '100%', 'important')
+  wrap.style.setProperty('max-height', '100%', 'important')
+  wrap.style.setProperty('overflow-x', 'hidden', 'important')
+  wrap.style.setProperty('overflow-y', 'scroll', 'important')
+
+  let applying = false
+  const apply = () => {
+    if (applying) return
+    applying = true
+
+    const clientH = wrap.clientHeight
+    const scrollH = wrap.scrollHeight
+    const trackH = Math.max(0, clientH)
+    const needsScroll = scrollH > clientH + 1
+
+    bar.style.cssText = [
+      `display:${needsScroll ? 'block' : 'none'} !important`,
+      `opacity:${needsScroll ? '1' : '0'} !important`,
+      `width:${THUMB_W}px !important`,
+      'right:2px !important',
+      'top:2px !important',
+      'bottom:2px !important',
+      'left:auto !important',
+      'height:auto !important',
+      'background:transparent !important',
+      'border-radius:9999px !important',
+      'z-index:20 !important',
+    ].join(';')
+
+    if (!needsScroll || trackH <= 0) {
+      applying = false
+      return
+    }
+
+    const proportional = Math.floor(trackH * (clientH / scrollH))
+    const thumbH = Math.min(trackH, Math.max(THUMB_MIN_PX, proportional))
+    const maxScroll = scrollH - clientH
+    const maxOffset = Math.max(0, trackH - thumbH)
+    const y = maxScroll > 0 ? (wrap.scrollTop / maxScroll) * maxOffset : 0
+
+    thumb.style.cssText = [
+      'display:block !important',
+      `width:${THUMB_W}px !important`,
+      'left:0 !important',
+      'right:auto !important',
+      `height:${thumbH}px !important`,
+      `min-height:${thumbH}px !important`,
+      `max-height:${thumbH}px !important`,
+      'border-radius:9999px !important',
+      'background-color:#999 !important',
+      'opacity:1 !important',
+      'cursor:pointer !important',
+      `transform:translateY(${y}px)`,
+    ].join(';')
+
+    applying = false
+  }
+
+  apply()
+  onScroll = () => apply()
+  wrap.addEventListener('scroll', onScroll, { passive: true })
+  wrapEl = wrap
+  thumbObserver = new MutationObserver(() => apply())
+  thumbObserver.observe(thumb, { attributes: true, attributeFilter: ['style'] })
+  thumbObserver.observe(bar, { attributes: true, attributeFilter: ['style'] })
+  resizeObserver = new ResizeObserver(() => apply())
+  resizeObserver.observe(wrap)
+  resizeObserver.observe(root)
+}
+
+function refresh() {
+  void nextTick(() => {
+    lockThumb()
+    requestAnimationFrame(() => lockThumb())
+  })
+}
+
+onMounted(() => refresh())
+onBeforeUnmount(() => {
+  thumbObserver?.disconnect()
+  resizeObserver?.disconnect()
+  if (wrapEl && onScroll) wrapEl.removeEventListener('scroll', onScroll)
+  thumbObserver = null
+  resizeObserver = null
+  wrapEl = null
+  onScroll = null
+})
+
+watch(
+  () => scrollRef.value,
+  () => refresh()
+)
+
+defineExpose({
+  refresh,
+  getWrap: () => getRoot()?.querySelector('.el-scrollbar__wrap') as HTMLElement | null,
+  getRoot,
+})
+</script>
+
+<style>
+/* 隱藏原生條，只留膠囊（目錄 / 正文同一套） */
+.preview-capsule-scroll.el-scrollbar {
+  height: 100% !important;
+  max-height: 100% !important;
+  width: 100% !important;
+}
+
+.preview-capsule-scroll .el-scrollbar__wrap,
+[data-preview-capsule-wrap='1'] {
+  height: 100% !important;
+  max-height: 100% !important;
+  overflow-x: hidden !important;
+  overflow-y: scroll !important;
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
+}
+
+.preview-capsule-scroll .el-scrollbar__wrap::-webkit-scrollbar,
+[data-preview-capsule-wrap='1']::-webkit-scrollbar {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+  background: transparent !important;
+}
+
+.preview-capsule-scroll .el-scrollbar__bar.is-horizontal {
+  display: none !important;
+}
+
+.preview-capsule-scroll .el-scrollbar__bar.is-vertical {
+  width: 8px !important;
+  right: 2px !important;
+  top: 2px !important;
+  bottom: 2px !important;
+  opacity: 1 !important;
+  background: transparent !important;
+  border-radius: 9999px !important;
+  z-index: 20 !important;
+}
+
+.preview-capsule-scroll .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
+  width: 8px !important;
+  border-radius: 9999px !important;
+  background-color: #999 !important;
+  opacity: 1 !important;
+}
+
+.preview-capsule-scroll .el-scrollbar__bar.is-vertical .el-scrollbar__thumb:hover {
+  background-color: #777 !important;
+}
+</style>

package/gen-ai/components/Preview/PreviewOutlineTree.vue

@@ -0,0 +1,148 @@
+<!-- Aug25preview -->
+<template>
+  <ul class="file-preview-page__outline-list">
+    <li v-for="item in items" :key="item.id" class="file-preview-page__outline-item">
+      <div
+        class="file-preview-page__outline-row"
+        :class="[`is-level-${item.level}`, { 'is-active': activeId === item.id }]"
+      >
+        <button
+          type="button"
+          class="file-preview-page__outline-link"
+          @click="emit('select', item.id)"
+        >
+          {{ item.title }}
+        </button>
+        <button
+          v-if="item.children?.length"
+          type="button"
+          class="file-preview-page__outline-chevron"
+          :aria-label="expandedIds.has(item.id) ? '收起' : '展開'"
+          @click.stop="emit('toggle', item.id)"
+        >
+          <el-icon :size="14">
+            <ArrowUpBold v-if="expandedIds.has(item.id)" />
+            <ArrowDownBold v-else />
+          </el-icon>
+        </button>
+        <span v-else class="file-preview-page__outline-chevron-placeholder" />
+      </div>
+      <PreviewOutlineTree
+        v-if="item.children?.length && expandedIds.has(item.id)"
+        :items="item.children"
+        :expanded-ids="expandedIds"
+        :active-id="activeId"
+        @toggle="emit('toggle', $event)"
+        @select="emit('select', $event)"
+      />
+    </li>
+  </ul>
+</template>
+
+<script setup lang="ts">
+//Aug25preview
+import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
+import { ElIcon } from 'element-plus'
+import type { PreviewOutlineItem } from './preview'
+
+defineOptions({ name: 'PreviewOutlineTree' })
+
+defineProps<{
+  items: PreviewOutlineItem[]
+  expandedIds: Set<string>
+  activeId?: string
+}>()
+
+const emit = defineEmits<{
+  toggle: [id: string]
+  select: [id: string]
+}>()
+//Aug25preview
+</script>
+
+<style scoped>
+.file-preview-page__outline-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.file-preview-page__outline-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 4px;
+  /* 箭頭與側欄滾動條分開，避免重疊 */
+  padding-right: 4px;
+  box-sizing: border-box;
+}
+
+.file-preview-page__outline-row.is-active {
+  background: #e8e8e8;
+}
+
+.file-preview-page__outline-row:hover {
+  background: #ededed;
+}
+
+.file-preview-page__outline-chevron,
+.file-preview-page__outline-link,
+.file-preview-page__outline-chevron-placeholder {
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.file-preview-page__outline-chevron,
+.file-preview-page__outline-chevron-placeholder {
+  width: 22px;
+  height: 22px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #303133;
+}
+
+.file-preview-page__outline-link {
+  flex: 1;
+  min-width: 0;
+  padding: 6px 4px 6px 0;
+  text-align: left;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+/* 選中二級大綱後字體加粗 */
+.file-preview-page__outline-row.is-level-2.is-active .file-preview-page__outline-link {
+  font-weight: 700;
+}
+
+.file-preview-page__outline-row.is-level-2 .file-preview-page__outline-link,
+.file-preview-page__outline-row.is-level-3 .file-preview-page__outline-link {
+  padding-left: 4px;
+}
+
+.file-preview-page__outline-row.is-level-2 {
+  padding-left: 12px;
+}
+
+.file-preview-page__outline-row.is-level-3 {
+  padding-left: 24px;
+}
+
+.file-preview-page__outline-row.is-level-4 {
+  padding-left: 36px;
+}
+</style>
+<!-- Aug25preview -->

package/gen-ai/components/Preview/index.ts

@@ -0,0 +1,11 @@
+/**
+ * GEN-AI 檔案預覽
+ * - FilePreviewPage.vue — 預覽頁（路由入口）
+ * - PreviewOutlineTree.vue — 左側大綱樹
+ * - PreviewCapsuleScroll.vue — 目錄/正文共用膠囊滾動條（UI 必須一致）
+ * - preview.ts — 打開預覽、Blob 緩存、大綱、mammoth、docx-preview
+ */
+export { default as FilePreviewPage } from './FilePreviewPage.vue'
+export * from './preview'
+export { default as PreviewCapsuleScroll } from './PreviewCapsuleScroll.vue'
+export { default as PreviewOutlineTree } from './PreviewOutlineTree.vue'