aegon-lv82 1.0.0

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

@@ -0,0 +1,398 @@
+<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
+  }
+}
+
+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()
+  }
+}
+
+function findDocScrollParent(from: HTMLElement): HTMLElement | null {
+  const col = from.closest('.report-edit-page__col-scroll') as HTMLElement | null
+  const wrap = col?.querySelector('.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
+}
+
+/** 僅滾動本組件所在滾動容器，不查詢左右欄 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>

package/src/views/gen-ai/components/editor/_StructureOrgNode.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="org-tree-node" :class="{ 'is-root': isRoot, 'has-children': hasChildren }">
+    <div
+      class="org-tree-node__box"
+      :class="{
+        'is-root': isRoot,
+        'is-selected': selected,
+        'is-editing': editing,
+      }"
+      @click.stop="onBoxClick"
+    >
+      <span
+        ref="labelRef"
+        class="org-tree-node__label"
+        :contenteditable="canEdit ? 'true' : 'false'"
+        spellcheck="false"
+        @focus="editing = true"
+        @blur="onLabelBlur"
+        @keydown.enter.prevent="blurLabel"
+        @keydown.esc.prevent="cancelEdit"
+        @mousedown.stop
+        @click.stop="onLabelClick"
+        >{{ node.label }}</span
+      >
+    </div>
+
+    <!-- 連續豎幹：線不斷開，+ 疊在線上 -->
+    <div v-if="hasChildren || (selected && !readonly)" class="org-tree-node__trunk">
+      <button
+        v-if="selected && !readonly"
+        type="button"
+        class="org-tree-node__plus"
+        title="新增子公司"
+        @mousedown.prevent
+        @click.stop="emit('add', node.id)"
+      >
+        <Plus :size="12" :stroke-width="3" />
+      </button>
+    </div>
+
+    <div v-if="hasChildren" class="org-tree-node__children">
+      <div v-for="child in node.children" :key="child.id" class="org-tree-node__branch">
+        <span class="org-tree-node__pct">{{ child.pct }}%</span>
+        <ReportStructureOrgNode
+          :node="child"
+          :selected-id="selectedId"
+          :readonly="readonly"
+          @select="emit('select', $event)"
+          @add="emit('add', $event)"
+          @rename="onChildRename"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Plus } from 'lucide-vue-next'
+import { computed, nextTick, ref, watch } from 'vue'
+
+export type StructureOrgNode = {
+  id: string
+  label: string
+  pct: number
+  children: StructureOrgNode[]
+}
+
+const props = defineProps<{
+  node: StructureOrgNode
+  selectedId: string | null
+  readonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  select: [id: string]
+  add: [id: string]
+  rename: [id: string, label: string]
+}>()
+
+const labelRef = ref<HTMLElement | null>(null)
+const editing = ref(false)
+
+const isRoot = computed(() => props.node.id === 'root')
+const selected = computed(() => props.selectedId === props.node.id)
+const hasChildren = computed(() => props.node.children.length > 0)
+const canEdit = computed(() => !props.readonly && selected.value)
+
+watch(selected, (isSelected) => {
+  if (!isSelected && editing.value) {
+    commitLabel()
+  }
+})
+
+function onBoxClick() {
+  emit('select', props.node.id)
+}
+
+function onLabelClick() {
+  emit('select', props.node.id)
+  if (props.readonly) return
+  nextTick(() => {
+    const el = labelRef.value
+    if (!el) return
+    el.focus()
+    const range = document.createRange()
+    range.selectNodeContents(el)
+    const sel = window.getSelection()
+    sel?.removeAllRanges()
+    sel?.addRange(range)
+  })
+}
+
+function blurLabel() {
+  labelRef.value?.blur()
+}
+
+function commitLabel() {
+  editing.value = false
+  const text = (labelRef.value?.innerText ?? '').trim()
+  if (labelRef.value) labelRef.value.innerText = text
+  if (text !== props.node.label) {
+    emit('rename', props.node.id, text)
+  }
+}
+
+function cancelEdit() {
+  editing.value = false
+  if (labelRef.value) labelRef.value.innerText = props.node.label
+  labelRef.value?.blur()
+}
+
+function onLabelBlur() {
+  commitLabel()
+}
+
+function onChildRename(id: string, label: string) {
+  emit('rename', id, label)
+}
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ReportStructureOrgNode',
+}
+</script>
+
+<style scoped>
+.org-tree-node {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.org-tree-node__box {
+  position: relative;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-width: 88px;
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  background: #f4f4f4;
+  color: #303133;
+  cursor: pointer;
+  outline: none;
+  box-shadow: none;
+}
+
+.org-tree-node__box.is-root {
+  background: #c53355;
+  color: #fff;
+}
+
+.org-tree-node__box:focus,
+.org-tree-node__box:focus-visible,
+.org-tree-node__label:focus,
+.org-tree-node__label:focus-visible {
+  outline: none !important;
+}
+
+/* 選中：紅色邊框（覆蓋瀏覽器/編輯器藍色 focus） */
+.org-tree-node__box.is-selected {
+  border-color: #c53355 !important;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.org-tree-node__box.is-root.is-selected {
+  border-color: #c53355 !important;
+  box-shadow: 0 0 0 2px #c53355 !important;
+}
+
+.org-tree-node__label {
+  display: inline-block;
+  min-width: 2em;
+  max-width: 160px;
+  outline: none;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: text;
+  color: inherit;
+}
+
+.org-tree-node__label[contenteditable='false'] {
+  cursor: pointer;
+  user-select: none;
+}
+
+.org-tree-node__label[contenteditable='true'] {
+  cursor: text;
+  user-select: text;
+}
+
+/* 連續豎幹：整段實線，+ 居中疊加，線不中斷 */
+.org-tree-node__trunk {
+  position: relative;
+  z-index: 1;
+  width: 1px;
+  height: 36px;
+  flex-shrink: 0;
+  background: #d1d5db;
+}
+
+.org-tree-node__plus {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: #c53355;
+  color: #fff;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+  /* 不使用白圈打斷豎線；線從圓形兩側連續可見 */
+  box-shadow: none;
+}
+
+.org-tree-node__plus:hover {
+  background: #a82b48;
+}
+
+.org-tree-node__children {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 28px;
+  width: max-content;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.org-tree-node__branch {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 20px;
+}
+
+/*
+ * 水平連線：向兩側延伸半個 gap(14px) 以跨過 flex gap，避免斷開
+ */
+.org-tree-node__branch::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -14px;
+  right: -14px;
+  height: 1px;
+  background: #d1d5db;
+}
+
+.org-tree-node__branch:first-child::before {
+  left: 50%;
+}
+
+.org-tree-node__branch:last-child::before {
+  right: 50%;
+}
+
+.org-tree-node__branch:only-child::before {
+  display: none;
+}
+
+/* 落到百分比/節點的豎線（與水平線相接，不斷開） */
+.org-tree-node__branch::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 1px;
+  height: 20px;
+  background: #d1d5db;
+  transform: translateX(-50%);
+}
+
+.org-tree-node__pct {
+  position: relative;
+  z-index: 1;
+  margin-bottom: 6px;
+  padding: 0 3px;
+  color: #9ca3af;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 12px;
+  line-height: 1;
+  background: #fff;
+}
+</style>