aegon-lv97 1.0.0

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

@@ -0,0 +1,441 @@
+<template>
+  <NodeViewWrapper
+    class="report-structure-block"
+    :class="{
+      'is-readonly': !editor?.isEditable,
+      'is-selected': selected,
+    }"
+    data-type="structure-block"
+    @click="onBlockClick"
+  >
+    <div
+      v-if="selected && editor?.isEditable"
+      class="report-structure-block__actions"
+      contenteditable="false"
+      @mousedown.prevent
+      @click.stop
+    >
+      <button
+        type="button"
+        class="report-structure-block__action"
+        title="刪除"
+        @click="removeBlock"
+      >
+        <Trash2 :size="15" :stroke-width="2" />
+      </button>
+      <button
+        type="button"
+        class="report-structure-block__action"
+        title="撤銷"
+        :disabled="!editor?.can().undo()"
+        @click="editor?.chain().focus().undo().run()"
+      >
+        <Undo2 :size="15" :stroke-width="2" />
+      </button>
+      <button
+        type="button"
+        class="report-structure-block__action"
+        title="重做"
+        :disabled="!editor?.can().redo()"
+        @click="editor?.chain().focus().redo().run()"
+      >
+        <Redo2 :size="15" :stroke-width="2" />
+      </button>
+      <button
+        type="button"
+        class="report-structure-block__action"
+        title="重置視圖"
+        @click="resetView"
+      >
+        <RefreshCw :size="15" :stroke-width="2" />
+      </button>
+    </div>
+
+    <div ref="viewportRef" class="report-structure-block__viewport" contenteditable="false">
+      <div class="report-structure-block__stage" :style="stageStyle">
+        <div ref="contentRef" class="report-structure-block__content" :style="contentStyle">
+          <ReportStructureOrgNode
+            :node="tree"
+            :selected-id="activeNodeId"
+            :readonly="!editor?.isEditable"
+            @select="onSelectNode"
+            @add="onAddChild"
+            @rename="onRenameNode"
+          />
+        </div>
+      </div>
+
+      <div class="report-structure-block__zoombar" @mousedown.prevent @click.stop>
+        <button
+          type="button"
+          class="report-structure-block__zoom-btn"
+          title="全屏"
+          @click="toggleFullscreen"
+        >
+          <Maximize2 :size="14" :stroke-width="2" />
+        </button>
+        <button
+          type="button"
+          class="report-structure-block__zoom-btn"
+          title="適應視圖"
+          @click="fitView"
+        >
+          <Scan :size="14" :stroke-width="2" />
+        </button>
+        <span class="report-structure-block__zoom-divider" aria-hidden="true" />
+        <button
+          type="button"
+          class="report-structure-block__zoom-btn"
+          title="縮小"
+          @click="zoomOut"
+        >
+          <Minus :size="14" :stroke-width="2" />
+        </button>
+        <span class="report-structure-block__zoom-label">{{ zoom }}%</span>
+        <button type="button" class="report-structure-block__zoom-btn" title="放大" @click="zoomIn">
+          <Plus :size="14" :stroke-width="2" />
+        </button>
+      </div>
+    </div>
+  </NodeViewWrapper>
+</template>
+
+<script setup lang="ts">
+import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+import { Maximize2, Minus, Plus, Redo2, RefreshCw, Scan, Trash2, Undo2 } from 'lucide-vue-next'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import type { StructureOrgNode } from './_StructureOrgNode.vue'
+import ReportStructureOrgNode from './_StructureOrgNode.vue'
+
+const props = defineProps(nodeViewProps)
+
+const DEFAULT_TREE: StructureOrgNode = {
+  id: 'root',
+  label: '',
+  pct: 0,
+  children: [],
+}
+
+function parseTree(raw: unknown): StructureOrgNode {
+  if (!raw) return structuredClone(DEFAULT_TREE)
+  try {
+    const data = typeof raw === 'string' ? JSON.parse(raw) : raw
+    if (data && typeof data === 'object' && data.id && Array.isArray(data.children)) {
+      return data as StructureOrgNode
+    }
+  } catch {
+    /* fall through */
+  }
+  return structuredClone(DEFAULT_TREE)
+}
+
+function cloneTree(node: StructureOrgNode): StructureOrgNode {
+  return {
+    ...node,
+    children: node.children.map(cloneTree),
+  }
+}
+
+function findNode(node: StructureOrgNode, id: string): StructureOrgNode | null {
+  if (node.id === id) return node
+  for (const child of node.children) {
+    const found = findNode(child, id)
+    if (found) return found
+  }
+  return null
+}
+
+function createChildId() {
+  return `n-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`
+}
+
+const viewportRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+const activeNodeId = ref<string | null>(null)
+const contentSize = ref({ w: 0, h: 0 })
+const zoom = computed(() => Number(props.node.attrs.zoom) || 70)
+const tree = computed(() => parseTree(props.node.attrs.tree))
+
+/** stage 使用縮放後佔位，保證 transform 不撐出滾動條，並可水平垂直居中 */
+const stageStyle = computed(() => {
+  const w = contentSize.value.w
+  const h = contentSize.value.h
+  if (!w || !h) return undefined
+  const scale = zoom.value / 100
+  return {
+    width: `${w * scale}px`,
+    height: `${h * scale}px`,
+  }
+})
+
+const contentStyle = computed(() => ({
+  transform: `scale(${zoom.value / 100})`,
+  transformOrigin: 'top left',
+}))
+
+let contentObserver: ResizeObserver | null = null
+
+function measureContentSize() {
+  const el = contentRef.value
+  if (!el) return
+  // scrollWidth/Height 不受 transform 影響，即 100% 自然尺寸
+  contentSize.value = {
+    w: Math.max(el.scrollWidth, el.offsetWidth, 1),
+    h: Math.max(el.scrollHeight, el.offsetHeight, 1),
+  }
+}
+
+async function refreshContentSize() {
+  await nextTick()
+  measureContentSize()
+}
+
+watch(
+  () => props.selected,
+  (isSelected) => {
+    if (!isSelected) activeNodeId.value = null
+  }
+)
+
+watch(
+  () => props.node.attrs.tree,
+  () => {
+    void refreshContentSize()
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  void refreshContentSize()
+  if (typeof ResizeObserver !== 'undefined' && contentRef.value) {
+    contentObserver = new ResizeObserver(() => measureContentSize())
+    contentObserver.observe(contentRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  contentObserver?.disconnect()
+  contentObserver = null
+})
+
+function updateAttrs(attrs: Record<string, unknown>) {
+  props.updateAttributes(attrs)
+}
+
+function onBlockClick() {
+  if (!props.editor?.isEditable) return
+  const pos = props.getPos?.()
+  if (typeof pos !== 'number') return
+  props.editor.commands.setNodeSelection(pos)
+}
+
+function onSelectNode(id: string) {
+  onBlockClick()
+  activeNodeId.value = id
+}
+
+function onAddChild(parentId: string) {
+  if (!props.editor?.isEditable) return
+  const next = cloneTree(tree.value)
+  const parent = findNode(next, parentId)
+  if (!parent) return
+  parent.children.push({
+    id: createChildId(),
+    label: '',
+    pct: 0,
+    children: [],
+  })
+  updateAttrs({ tree: next })
+  activeNodeId.value = parentId
+  void refreshContentSize()
+}
+
+function onRenameNode(id: string, label: string) {
+  if (!props.editor?.isEditable) return
+  const next = cloneTree(tree.value)
+  const target = findNode(next, id)
+  if (!target) return
+  target.label = label
+  updateAttrs({ tree: next })
+  void refreshContentSize()
+}
+
+function removeBlock() {
+  props.deleteNode()
+}
+
+function resetView() {
+  updateAttrs({ zoom: 70 })
+}
+
+/**
+ * 適應視圖：按視口自動縮放並水平/垂直居中顯示全部內容，不出現滾動條。
+ * 不改動默認 zoom=70 與其他操作邏輯。
+ */
+async function fitView() {
+  const viewport = viewportRef.value
+  const content = contentRef.value
+  if (!viewport || !content) return
+
+  await refreshContentSize()
+  const naturalW = Math.max(contentSize.value.w, 1)
+  const naturalH = Math.max(contentSize.value.h, 1)
+
+  // 預留邊距與右下角縮放條空間，避免貼邊或被遮擋
+  const padX = 48
+  const padY = 64
+  const availW = Math.max(viewport.clientWidth - padX, 1)
+  const availH = Math.max(viewport.clientHeight - padY, 1)
+
+  const fitScale = Math.min(availW / naturalW, availH / naturalH, 1)
+  // 向下取整並留 1% 餘量，避免亞像素導致出現滾動條
+  let nextZoom = Math.floor(fitScale * 100) - 1
+  nextZoom = Math.max(10, Math.min(200, nextZoom))
+
+  updateAttrs({ zoom: nextZoom })
+  await nextTick()
+  measureContentSize()
+  viewport.scrollLeft = 0
+  viewport.scrollTop = 0
+}
+
+function zoomIn() {
+  updateAttrs({ zoom: Math.min(200, zoom.value + 10) })
+}
+
+function zoomOut() {
+  updateAttrs({ zoom: Math.max(50, zoom.value - 10) })
+}
+
+async function toggleFullscreen() {
+  const el = viewportRef.value
+  if (!el) return
+  if (document.fullscreenElement) {
+    await document.exitFullscreen()
+    return
+  }
+  await el.requestFullscreen?.()
+}
+</script>
+
+<style scoped>
+.report-structure-block {
+  position: relative;
+  margin: 16px 0 20px;
+  user-select: none;
+}
+
+.report-structure-block__actions {
+  position: absolute;
+  top: -44px;
+  left: 0;
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px;
+  border-radius: 999px;
+  background: #2f2f2f;
+  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
+}
+
+.report-structure-block__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: transparent;
+  color: #f5f5f5;
+  cursor: pointer;
+}
+
+.report-structure-block__action:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.report-structure-block__action:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.report-structure-block__viewport {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  background: #fff;
+  overflow: auto;
+  transition: border-color 0.15s ease;
+}
+
+.report-structure-block.is-selected .report-structure-block__viewport {
+  border-color: #000;
+}
+
+.report-structure-block__stage {
+  position: relative;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.report-structure-block__content {
+  width: max-content;
+  padding: 24px 32px 40px;
+}
+
+.report-structure-block__zoombar {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  z-index: 4;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 4px 6px;
+  border-radius: 8px;
+  background: #3a3a3a;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+}
+
+.report-structure-block__zoom-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #f5f5f5;
+  cursor: pointer;
+}
+
+.report-structure-block__zoom-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+}
+
+.report-structure-block__zoom-divider {
+  width: 1px;
+  height: 14px;
+  margin: 0 4px;
+  background: rgba(255, 255, 255, 0.25);
+}
+
+.report-structure-block__zoom-label {
+  min-width: 42px;
+  padding: 0 4px;
+  color: #f5f5f5;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 12px;
+  text-align: center;
+  line-height: 1;
+}
+</style>