aegon-lv97 1.0.0

package/gen-ai/components/editor/TypewriterDocEditor.vue

@@ -0,0 +1,422 @@
+<template>
+  <div ref="rootRef" class="report-typewriter-doc">
+    <template v-if="ready && chapters.length">
+      <ReportChapterTiptapEditor
+        v-for="chapter in revealedChapters"
+        :key="chapter.key"
+        class="report-typewriter-doc__chapter"
+        :data-chapter-key="chapter.key"
+        :chapter-title="chapter.title"
+        :chapter-intro="chapter.intro"
+        :content-identity="chapter.key"
+        :typewriter-phase="phaseOf(chapter.key)"
+        :editable="false"
+        :show-review-markers="false"
+        :typewriter-settle-ms="typewriterSettleMs"
+        :disable-typewriter="disableTypewriter"
+        plain-content
+        @typewriter-complete="onChapterComplete(chapter.key)"
+      />
+    </template>
+    <p v-else-if="ready" class="report-typewriter-doc__empty">
+      {{ emptyText }}
+    </p>
+    <div v-else class="report-typewriter-doc__shell" aria-hidden="true">
+      <div class="report-typewriter-doc__shell-title" />
+      <div class="report-typewriter-doc__shell-line" />
+      <div class="report-typewriter-doc__shell-line is-short" />
+      <div class="report-typewriter-doc__shell-line" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+import ReportChapterTiptapEditor from './ChapterTiptapEditor.vue'
+
+export interface TypewriterDocChapter {
+  key: string
+  title: string
+  intro: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    /** 按展示順序的章節（已過濾勾選） */
+    chapters: TypewriterDocChapter[]
+    /** 內容區是否可掛載編輯器 */
+    ready?: boolean
+    emptyText?: string
+    /** 拖拽排序後重播：從該章起重新列印 */
+    replayKey?: string | null
+    replayToken?: number
+    /**
+     * 流式斷續 settle：追平緩衝後等待多久無新內容才進入下一章。
+     * 傳給 ChapterTiptapEditor；空緩衝會一直等首包。
+     */
+    typewriterSettleMs?: number
+    /** 需求 2026-08-13 16:58：settings 頁直接滿內容，不打字 */
+    disableTypewriter?: boolean
+  }>(),
+  {
+    ready: false,
+    emptyText: '請勾選至少一個章節',
+    replayKey: null,
+    replayToken: 0,
+    typewriterSettleMs: 1500,
+    disableTypewriter: false,
+  }
+)
+
+const emit = defineEmits<{
+  /** 當前正在打字的章節 key（供外側列表等鬆耦合聯動） */
+  'typing-change': [key: string | null]
+  /** 是否仍在整篇列印流程中（含章間切換；全部打完為 false） */
+  'printing-change': [printing: boolean]
+  'chapter-complete': [key: string]
+}>()
+
+const rootRef = ref<HTMLElement | null>(null)
+const typedKeys = ref<string[]>([])
+const typingKey = ref<string | null>(null)
+
+const chapterKeys = computed(() => props.chapters.map((c) => c.key))
+
+const isPrinting = computed(() => {
+  if (props.disableTypewriter) return false
+  const keys = chapterKeys.value
+  if (!keys.length || !props.ready) return false
+  return typedKeys.value.length < keys.length || typingKey.value !== null
+})
+
+function phaseOf(key: string): 'idle' | 'typing' | 'done' {
+  if (props.disableTypewriter) return 'done'
+  if (typedKeys.value.includes(key)) return 'done'
+  if (typingKey.value === key) return 'typing'
+  return 'idle'
+}
+
+const revealedChapters = computed(() =>
+  props.disableTypewriter
+    ? props.chapters
+    : props.chapters.filter((chapter) => phaseOf(chapter.key) !== 'idle')
+)
+
+function syncQueue() {
+  if (props.disableTypewriter) {
+    typingKey.value = null
+    typedKeys.value = [...chapterKeys.value]
+    return
+  }
+  const keys = chapterKeys.value
+  const typed = typedKeys.value.filter((key) => keys.includes(key))
+  if (typed.length !== typedKeys.value.length) {
+    typedKeys.value = typed
+  }
+
+  if (typingKey.value && !keys.includes(typingKey.value)) {
+    typingKey.value = null
+  }
+
+  if (typingKey.value && keys.includes(typingKey.value) && !typed.includes(typingKey.value)) {
+    return
+  }
+
+  const next = keys.find((key) => !typed.includes(key)) ?? null
+  if (typingKey.value !== next) {
+    typingKey.value = next
+  }
+}
+
+//0918：disableTypewriter true→false 必须 reset typedKeys，否则整段灌文 / 跟滚失效
+watch(
+  () => props.disableTypewriter,
+  (disabled, wasDisabled) => {
+    if (disabled) {
+      syncQueue()
+      return
+    }
+    if (wasDisabled === true) {
+      reset()
+      void nextTick(() => syncQueue())
+    }
+  }
+)
+//0918
+
+function onChapterComplete(key: string) {
+  if (!typedKeys.value.includes(key)) {
+    typedKeys.value = [...typedKeys.value, key]
+  }
+  if (typingKey.value === key) {
+    typingKey.value = null
+  }
+  emit('chapter-complete', key)
+  syncQueue()
+
+  // 全部打完：滾到文檔最底（表格等高塊佈局穩定後）
+  const keys = chapterKeys.value
+  if (keys.length && keys.every((k) => typedKeys.value.includes(k))) {
+    scrollDocToBottom()
+  }
+}
+
+//0918：滚动父级回落（迁移后无 report-edit class 时仍能跟滚）
+function findDocScrollParent(from: HTMLElement): HTMLElement | null {
+  const col =
+    (from.closest('.report-edit-page__col-scroll') as HTMLElement | null) ||
+    (from.closest('.report-edit-page__main--anchored') as HTMLElement | null) ||
+    (from.closest('.report-edit-page__main') as HTMLElement | null) ||
+    (from.closest('[data-report-main-scroll]') as HTMLElement | null)
+  const wrap =
+    (col?.querySelector('.el-scrollbar__wrap') as HTMLElement | null) ||
+    (from.closest('.el-scrollbar__wrap') as HTMLElement | null)
+  if (wrap) return wrap
+
+  let node: HTMLElement | null = from.parentElement
+  let fallback: HTMLElement | null = null
+  while (node && node !== document.body) {
+    if (node.classList.contains('el-scrollbar__wrap')) fallback = node
+    const { overflowY } = getComputedStyle(node)
+    const canOverflow =
+      overflowY === 'auto' ||
+      overflowY === 'scroll' ||
+      overflowY === 'overlay' ||
+      node.classList.contains('el-scrollbar__wrap')
+    if (canOverflow && node.scrollHeight > node.clientHeight + 1) {
+      return node
+    }
+    node = node.parentElement
+  }
+  return fallback
+}
+//0918
+
+/** 僅滾動本組件所在滾動容器，不查詢左右欄 DOM */
+function scrollTypingChapterIntoView(key: string | null) {
+  if (!key || !rootRef.value) return
+  void nextTick(() => {
+    const el = rootRef.value?.querySelector(
+      `.report-typewriter-doc__chapter[data-chapter-key="${CSS.escape(key)}"]`
+    ) as HTMLElement | null
+    if (!el) return
+    // 僅在章節頂部超出視口時輕推，避免與 DeepSeek 跟滾搶控制權
+    const scrollParent = findDocScrollParent(el)
+    if (!scrollParent) {
+      el.scrollIntoView({ block: 'nearest', behavior: 'auto', inline: 'nearest' })
+      return
+    }
+    const parentRect = scrollParent.getBoundingClientRect()
+    const rect = el.getBoundingClientRect()
+    if (rect.top < parentRect.top + 24) {
+      scrollParent.scrollTop += rect.top - parentRect.top - 24
+    }
+  })
+}
+
+function scrollDocToBottom() {
+  void nextTick(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        const root = rootRef.value
+        if (!root) return
+        const scrollParent = findDocScrollParent(root)
+        if (!scrollParent) return
+        scrollParent.scrollTop = scrollParent.scrollHeight - scrollParent.clientHeight
+      })
+    })
+  })
+}
+
+function replayFromKey(key: string) {
+  const keys = chapterKeys.value
+  const idx = keys.indexOf(key)
+  if (idx < 0) return
+
+  typedKeys.value = keys.slice(0, idx)
+  typingKey.value = null
+  void nextTick(() => {
+    typingKey.value = key
+    scrollTypingChapterIntoView(key)
+  })
+}
+
+function reset() {
+  typedKeys.value = []
+  typingKey.value = null
+}
+
+watch(
+  chapterKeys,
+  () => {
+    syncQueue()
+  },
+  { immediate: true }
+)
+
+/**
+ * 接口正文晚到：當前章仍在打 / 已 done 但 intro 從空→有 → 重播該章
+ * （子編輯器在 phase=done 時只能靜態灌入，必須由隊列拉回 typing）
+ */
+watch(
+  () =>
+    props.chapters.map((chapter) => ({
+      key: chapter.key,
+      title: (chapter.title || '').trim(),
+      intro: (chapter.intro || '').trim(),
+    })),
+  (next, prev) => {
+    if (props.disableTypewriter) return
+    if (!props.ready || !prev?.length) return
+    for (const chapter of next) {
+      const before = prev.find((item) => item.key === chapter.key)
+      if (!before) continue
+      const introArrived = !before.intro && !!chapter.intro
+      const titleArrived = !before.title && !!chapter.title
+      const introGrew = !!before.intro && chapter.intro.startsWith(before.intro) && chapter.intro.length > before.intro.length
+      if (!introArrived && !titleArrived && !introGrew) continue
+
+      const alreadyDone = typedKeys.value.includes(chapter.key)
+      const isCurrent = typingKey.value === chapter.key
+      // 增長中的當前章：交給子編輯器 onStreamContentUpdated 續打
+      if (isCurrent && introGrew && !introArrived) continue
+      if (alreadyDone || (isCurrent && (introArrived || titleArrived))) {
+        replayFromKey(chapter.key)
+        return
+      }
+    }
+  },
+  { deep: true }
+)
+
+watch(typingKey, (key) => {
+  emit('typing-change', key)
+  scrollTypingChapterIntoView(key)
+})
+
+watch(
+  isPrinting,
+  (printing) => {
+    emit('printing-change', printing)
+  },
+  { immediate: true }
+)
+
+watch(
+  () => [props.replayToken ?? 0, props.replayKey ?? null] as const,
+  ([token, key]) => {
+    if (props.disableTypewriter) return
+    if (!token || !key) return
+    replayFromKey(key)
+  }
+)
+
+defineExpose({
+  reset,
+  replayFromKey,
+  typingKey,
+})
+</script>
+
+<style scoped>
+.report-typewriter-doc {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding-bottom: 24px;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.report-typewriter-doc
+  :deep(.ProseMirror > *:first-child:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)) {
+  margin-top: 0 !important;
+}
+
+.report-typewriter-doc :deep(.ProseMirror h2) {
+  margin: 24px 0 !important;
+}
+
+.report-typewriter-doc__chapter + .report-typewriter-doc__chapter :deep(.ProseMirror > h2:first-child) {
+  margin-top: 24px !important;
+}
+
+.report-typewriter-doc :deep(.report-tiptap-editor__toolbar) {
+  display: none;
+}
+
+.report-typewriter-doc__chapter {
+  flex-shrink: 0;
+}
+
+.report-typewriter-doc__chapter :deep(.report-tiptap-editor__content),
+.report-typewriter-doc__chapter :deep(.report-tiptap-editor__body),
+.report-typewriter-doc__chapter :deep(.report-tiptap-editor) {
+  min-height: 0 !important;
+  height: auto !important;
+}
+
+.report-typewriter-doc__chapter :deep(.ProseMirror),
+.report-typewriter-doc__chapter :deep(.report-tiptap-editor__prose) {
+  min-height: 0 !important;
+  height: auto !important;
+  padding-bottom: 0 !important;
+}
+
+.report-typewriter-doc :deep(.ProseMirror > p:empty),
+.report-typewriter-doc :deep(.ProseMirror > p:has(> br.ProseMirror-trailingBreak:only-child)) {
+  display: none !important;
+  margin: 0 !important;
+  height: 0 !important;
+}
+
+.report-typewriter-doc__empty {
+  margin: 48px 0;
+  text-align: center;
+  color: #606266;
+  font-size: 16px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+}
+
+.report-typewriter-doc__shell {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 280px;
+  padding-top: 8px;
+}
+
+.report-typewriter-doc__shell-title {
+  width: min(420px, 70%);
+  height: 28px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #f2f3f5 25%, #e9ebef 37%, #f2f3f5 63%);
+  background-size: 400% 100%;
+  animation: report-typewriter-doc-shimmer 1.2s ease-in-out infinite;
+}
+
+.report-typewriter-doc__shell-line {
+  width: 100%;
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #f5f6f8 25%, #eceef2 37%, #f5f6f8 63%);
+  background-size: 400% 100%;
+  animation: report-typewriter-doc-shimmer 1.2s ease-in-out infinite;
+}
+
+.report-typewriter-doc__shell-line.is-short {
+  width: 62%;
+}
+
+@keyframes report-typewriter-doc-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+</style>