aegon-lv97 1.0.0

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

@@ -0,0 +1,1036 @@
+<!--
+  TipTap 工具欄（格式 + 插入），僅供 ChapterTiptapEditor 使用。
+-->
+<template>
+  <div class="report-tiptap-toolbar-merged">
+    <div class="report-tiptap-format-toolbar">
+      <div class="report-tiptap-editor__group">
+        <el-dropdown
+          trigger="click"
+          :disabled="!editable"
+          :popper-options="mainBoundPopperOptions"
+          popper-class="report-tiptap-style-popper"
+          @command="applyBlockStyle"
+          @visible-change="onStyleDropdownVisible"
+        >
+          <button
+            type="button"
+            class="report-tiptap-editor__tool report-tiptap-editor__tool--style"
+            :disabled="!editable"
+          >
+            Style
+            <ChevronDown :size="14" :stroke-width="2" class="report-tiptap-editor__caret" />
+          </button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item
+                v-for="(item, index) in styleOptions"
+                :key="item.command"
+                :command="item.command"
+                :divided="index > 0"
+                :class="{ 'is-style-active': isStyleActive(item.command) }"
+              >
+                <span class="report-tiptap-style-item">
+                  <span class="report-tiptap-style-item__icon" aria-hidden="true">{{
+                    item.icon
+                  }}</span>
+                  <span class="report-tiptap-style-item__label">{{ item.label }}</span>
+                </span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+
+      <span class="report-tiptap-editor__divider" aria-hidden="true" />
+
+      <div class="report-tiptap-editor__group">
+        <button
+          type="button"
+          class="report-tiptap-editor__tool report-tiptap-editor__tool--text"
+          :class="{ 'is-active': editor?.isActive('bold') }"
+          title="粗體"
+          :disabled="!editable"
+          @click="editor?.chain().focus().toggleBold().run()"
+        >
+          <Bold :size="18" :stroke-width="2.5" />
+        </button>
+        <button
+          type="button"
+          class="report-tiptap-editor__tool report-tiptap-editor__tool--text"
+          :class="{ 'is-active': editor?.isActive('italic') }"
+          title="斜體"
+          :disabled="!editable"
+          @click="editor?.chain().focus().toggleItalic().run()"
+        >
+          <Italic :size="18" :stroke-width="2" />
+        </button>
+        <button
+          type="button"
+          class="report-tiptap-editor__tool report-tiptap-editor__tool--text"
+          :class="{ 'is-active': editor?.isActive('underline') }"
+          title="底線"
+          :disabled="!editable"
+          @click="editor?.chain().focus().toggleUnderline().run()"
+        >
+          <UnderlineIcon :size="18" :stroke-width="2" />
+        </button>
+      </div>
+
+      <span class="report-tiptap-editor__divider" aria-hidden="true" />
+
+      <div class="report-tiptap-editor__group">
+        <button
+          type="button"
+          class="report-tiptap-editor__tool"
+          :class="{ 'is-active': editor?.isActive('bulletList') }"
+          title="無序列表"
+          :disabled="!editable"
+          @click="editor?.chain().focus().toggleBulletList().run()"
+        >
+          <List :size="18" :stroke-width="1.75" />
+        </button>
+        <button
+          type="button"
+          class="report-tiptap-editor__tool"
+          :class="{ 'is-active': editor?.isActive('orderedList') }"
+          title="有序列表"
+          :disabled="!editable"
+          @click="editor?.chain().focus().toggleOrderedList().run()"
+        >
+          <ListOrdered :size="18" :stroke-width="1.75" />
+        </button>
+      </div>
+    </div>
+    <span class="report-tiptap-editor__divider" aria-hidden="true" />
+    <div class="report-tiptap-insert-toolbar report-tiptap-editor__group">
+      <el-popover
+        :visible="tablePickerVisible"
+        placement="bottom-start"
+        :width="232"
+        trigger="click"
+        :disabled="!editable"
+        :popper-options="mainBoundPopperOptions"
+        popper-class="report-tiptap-table-picker-popper"
+        @update:visible="onTablePickerVisible"
+      >
+        <template #reference>
+          <button
+            type="button"
+            class="report-tiptap-editor__tool"
+            :class="{ 'is-active': tablePickerVisible }"
+            title="插入表格"
+            :disabled="!editable"
+          >
+            <svg
+              class="report-tiptap-editor__table-icon"
+              viewBox="0 0 18 18"
+              width="18"
+              height="18"
+              aria-hidden="true"
+            >
+              <rect
+                x="1.5"
+                y="1.5"
+                width="15"
+                height="15"
+                rx="2.5"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+              />
+              <path d="M9 1.5v15M1.5 9h15" fill="none" stroke="currentColor" stroke-width="1.5" />
+            </svg>
+          </button>
+        </template>
+
+        <div class="report-tiptap-table-picker" @mouseleave="resetTableHover">
+          <div class="report-tiptap-table-picker__label">
+            插入 {{ tableHoverCols }} x {{ tableHoverRows }} 表格
+          </div>
+          <div class="report-tiptap-table-picker__grid" role="grid" aria-label="選擇表格尺寸">
+            <button
+              v-for="cell in tablePickerCells"
+              :key="cell.key"
+              type="button"
+              class="report-tiptap-table-picker__cell"
+              :class="{ 'is-selected': cell.selected }"
+              :aria-label="`${cell.cols} 欄 ${cell.rows} 列`"
+              @mouseenter="setTableHover(cell.cols, cell.rows)"
+              @click="confirmInsertTable(cell.cols, cell.rows)"
+            />
+          </div>
+        </div>
+      </el-popover>
+
+      <el-popover
+        :visible="linkPopoverVisible"
+        placement="bottom-start"
+        :width="320"
+        trigger="click"
+        :disabled="!editable"
+        :popper-options="mainBoundPopperOptions"
+        popper-class="report-tiptap-link-popper"
+        @update:visible="onLinkPopoverVisible"
+      >
+        <template #reference>
+          <button
+            type="button"
+            class="report-tiptap-editor__tool"
+            :class="{ 'is-active': linkPopoverVisible || editor?.isActive('link') }"
+            title="插入鏈接"
+            :disabled="!editable"
+          >
+            <LinkIcon :size="18" :stroke-width="1.75" />
+          </button>
+        </template>
+
+        <div class="report-tiptap-link-panel">
+          <div class="report-tiptap-link-panel__title">插入鏈接</div>
+          <div class="report-tiptap-link-panel__field">
+            <input
+              ref="linkInputRef"
+              v-model="linkUrl"
+              type="url"
+              class="report-tiptap-link-panel__input"
+              @keydown.enter.prevent="confirmInsertLink"
+            />
+            <button
+              v-if="linkUrl"
+              type="button"
+              class="report-tiptap-link-panel__clear"
+              title="一鍵清除"
+              @click="clearLinkInput"
+            >
+              ×
+            </button>
+          </div>
+          <div class="report-tiptap-link-panel__actions">
+            <button
+              type="button"
+              class="report-tiptap-link-panel__submit"
+              @click="confirmInsertLink"
+            >
+              插入
+            </button>
+          </div>
+        </div>
+      </el-popover>
+
+      <el-popover
+        :visible="imagePopoverVisible"
+        placement="bottom-start"
+        :width="360"
+        trigger="click"
+        :disabled="!editable"
+        :popper-options="mainBoundPopperOptions"
+        popper-class="report-tiptap-image-popper"
+        @update:visible="onImagePopoverVisible"
+      >
+        <template #reference>
+          <button
+            type="button"
+            class="report-tiptap-editor__tool"
+            :class="{ 'is-active': imagePopoverVisible }"
+            title="上傳圖片"
+            :disabled="!editable"
+          >
+            <ImageIcon :size="18" :stroke-width="1.75" />
+          </button>
+        </template>
+
+        <div
+          class="report-tiptap-image-panel"
+          :class="{ 'is-dragging': imageDragging }"
+          @click="triggerImageFilePick"
+          @dragenter.prevent="onImageDragEnter"
+          @dragover.prevent="onImageDragEnter"
+          @dragleave.prevent="onImageDragLeave"
+          @drop.prevent="onImageDrop"
+        >
+          <div class="report-tiptap-image-panel__icon" aria-hidden="true">
+            <FileUp :size="28" :stroke-width="1.75" />
+          </div>
+          <div class="report-tiptap-image-panel__copy">
+            <div class="report-tiptap-image-panel__title">上傳圖片</div>
+            <div class="report-tiptap-image-panel__desc">拖動圖片到輸入框，或點擊上傳圖片</div>
+          </div>
+          <input
+            ref="imageFileInputRef"
+            type="file"
+            class="report-tiptap-image-panel__file"
+            accept="image/*"
+            @change="onImageFileChange"
+          />
+        </div>
+      </el-popover>
+
+      <button
+        type="button"
+        class="report-tiptap-editor__tool"
+        title="插入結構區塊"
+        :disabled="!editable"
+        @click="insertSectionBlock"
+      >
+        <Network :size="18" :stroke-width="1.75" />
+      </button>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import type { Editor } from '@tiptap/core'
+import { ElDropdown, ElDropdownItem, ElDropdownMenu, ElMessage, ElPopover } from 'element-plus'
+import {
+  Bold,
+  ChevronDown,
+  FileUp,
+  Image as ImageIcon,
+  Italic,
+  Link as LinkIcon,
+  List,
+  ListOrdered,
+  Network,
+  Underline as UnderlineIcon,
+} from 'lucide-vue-next'
+import { computed, nextTick, ref } from 'vue'
+
+const props = defineProps<{
+  editor: Editor | undefined | null
+  editable: boolean
+}>()
+
+const mainBoundaryEl = ref<HTMLElement | null>(null)
+
+function refreshMainBoundary() {
+  mainBoundaryEl.value = document.querySelector(
+    '.report-edit-page__main--anchored'
+  ) as HTMLElement | null
+}
+
+const mainBoundPopperOptions = computed(() => ({
+  modifiers: [
+    {
+      name: 'preventOverflow',
+      options: {
+        boundary: mainBoundaryEl.value ?? 'clippingParents',
+        padding: 8,
+        altAxis: true,
+      },
+    },
+  ],
+}))
+
+function onStyleDropdownVisible(visible: boolean) {
+  if (visible) refreshMainBoundary()
+}
+
+const styleOptions = [
+  { command: 'paragraph', icon: 'T', label: '段落' },
+  { command: 'heading1', icon: 'H₁', label: '標題1' },
+  { command: 'heading2', icon: 'H₂', label: '標題2' },
+  { command: 'heading3', icon: 'H₃', label: '標題3' },
+  { command: 'remark', icon: 'a', label: '備註' },
+] as const
+
+function isStyleActive(command: string) {
+  if (!props.editor) return false
+  switch (command) {
+    case 'heading1':
+      return props.editor.isActive('heading', { level: 1 })
+    case 'heading2':
+      return props.editor.isActive('heading', { level: 2 })
+    case 'heading3':
+      return props.editor.isActive('heading', { level: 3 })
+    case 'remark':
+      return props.editor.isActive('blockquote')
+    case 'paragraph':
+      return (
+        props.editor.isActive('paragraph') &&
+        !props.editor.isActive('heading') &&
+        !props.editor.isActive('blockquote')
+      )
+    default:
+      return false
+  }
+}
+
+function applyBlockStyle(command: string) {
+  if (!props.editor || !props.editable) return
+  const chain = props.editor.chain().focus()
+  switch (command) {
+    case 'heading1':
+      chain.setHeading({ level: 1 }).run()
+      break
+    case 'heading2':
+      chain.setHeading({ level: 2 }).run()
+      break
+    case 'heading3':
+      chain.setHeading({ level: 3 }).run()
+      break
+    case 'remark':
+      if (props.editor.isActive('heading')) {
+        chain.setParagraph()
+      }
+      if (!props.editor.isActive('blockquote')) {
+        chain.toggleBlockquote()
+      }
+      chain.run()
+      break
+    default:
+      if (props.editor.isActive('blockquote')) {
+        chain.toggleBlockquote()
+      }
+      chain.setParagraph().run()
+  }
+}
+
+const TABLE_PICKER_MAX = 10
+const tablePickerVisible = ref(false)
+const tableHoverCols = ref(1)
+const tableHoverRows = ref(1)
+
+const tablePickerCells = computed(() => {
+  const cells: Array<{ key: string; cols: number; rows: number; selected: boolean }> = []
+  for (let row = 1; row <= TABLE_PICKER_MAX; row += 1) {
+    for (let col = 1; col <= TABLE_PICKER_MAX; col += 1) {
+      cells.push({
+        key: `${col}-${row}`,
+        cols: col,
+        rows: row,
+        selected: col <= tableHoverCols.value && row <= tableHoverRows.value,
+      })
+    }
+  }
+  return cells
+})
+
+function onTablePickerVisible(visible: boolean) {
+  if (!props.editable) {
+    tablePickerVisible.value = false
+    return
+  }
+  if (visible) refreshMainBoundary()
+  tablePickerVisible.value = visible
+  if (!visible) resetTableHover()
+}
+
+function setTableHover(cols: number, rows: number) {
+  tableHoverCols.value = cols
+  tableHoverRows.value = rows
+}
+
+function resetTableHover() {
+  tableHoverCols.value = 1
+  tableHoverRows.value = 1
+}
+
+function confirmInsertTable(cols: number, rows: number) {
+  if (!props.editor || !props.editable) return
+  props.editor.chain().focus().insertTable({ rows, cols, withHeaderRow: false }).run()
+  tablePickerVisible.value = false
+  resetTableHover()
+}
+
+const linkPopoverVisible = ref(false)
+const linkUrl = ref('')
+const linkInputRef = ref<HTMLInputElement | null>(null)
+
+function normalizeLinkUrl(raw: string) {
+  const value = raw.trim()
+  if (!value) return ''
+  if (/^[a-z][a-z0-9+.-]*:/i.test(value) || value.startsWith('/') || value.startsWith('#')) {
+    return value
+  }
+  return `https://${value}`
+}
+
+function onLinkPopoverVisible(visible: boolean) {
+  if (!props.editable) {
+    linkPopoverVisible.value = false
+    return
+  }
+  if (visible) refreshMainBoundary()
+  linkPopoverVisible.value = visible
+  if (visible) {
+    const previous = (props.editor?.getAttributes('link').href as string | undefined) || ''
+    linkUrl.value = previous
+    void nextTick(() => linkInputRef.value?.focus())
+  } else {
+    linkUrl.value = ''
+  }
+}
+
+function clearLinkInput() {
+  linkUrl.value = ''
+  if (props.editor?.isActive('link')) {
+    props.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+  }
+  void nextTick(() => linkInputRef.value?.focus())
+}
+
+function confirmInsertLink() {
+  if (!props.editor || !props.editable) return
+  const raw = linkUrl.value.trim()
+  const href = normalizeLinkUrl(raw)
+  if (!href) {
+    clearLinkInput()
+    return
+  }
+
+  const { empty } = props.editor.state.selection
+  if (empty) {
+    props.editor
+      .chain()
+      .focus()
+      .insertContent({
+        type: 'text',
+        text: raw || href,
+        marks: [{ type: 'link', attrs: { href, target: '_blank' } }],
+      })
+      .run()
+  } else {
+    props.editor.chain().focus().extendMarkRange('link').setLink({ href, target: '_blank' }).run()
+  }
+
+  linkPopoverVisible.value = false
+  linkUrl.value = ''
+}
+
+const imagePopoverVisible = ref(false)
+const imageDragging = ref(false)
+const imageFileInputRef = ref<HTMLInputElement | null>(null)
+let imageDragDepth = 0
+
+function isAllowedImageSource(src: string): boolean {
+  try {
+    const url = new URL(src, window.location.href)
+    const hostname = url.hostname.toLowerCase()
+    return hostname.includes('bochk') || hostname.includes('bochkuatcloud')
+  } catch {
+    return false
+  }
+}
+
+function rejectDisallowedImageSource() {
+  ElMessage.warning('僅允許上傳來源為 bochk / bochkuatcloud 網域的圖片')
+}
+
+function onImagePopoverVisible(visible: boolean) {
+  if (!props.editable) {
+    imagePopoverVisible.value = false
+    return
+  }
+  if (visible) refreshMainBoundary()
+  imagePopoverVisible.value = visible
+  if (!visible) {
+    imageDragging.value = false
+    imageDragDepth = 0
+    if (imageFileInputRef.value) imageFileInputRef.value.value = ''
+  }
+}
+
+function triggerImageFilePick() {
+  if (!props.editable) return
+  imageFileInputRef.value?.click()
+}
+
+function onImageDragEnter() {
+  imageDragDepth += 1
+  imageDragging.value = true
+}
+
+function onImageDragLeave() {
+  imageDragDepth = Math.max(0, imageDragDepth - 1)
+  if (imageDragDepth === 0) imageDragging.value = false
+}
+
+function getDroppedImageUrl(event: DragEvent): string | null {
+  const uriList = event.dataTransfer?.getData('text/uri-list')?.trim()
+  if (uriList) {
+    const first = uriList.split('\n').find((line) => line.trim() && !line.startsWith('#'))
+    if (first?.trim()) return first.trim()
+  }
+
+  const plain = event.dataTransfer?.getData('text/plain')?.trim()
+  if (plain && /^https?:\/\//i.test(plain)) return plain
+
+  const html = event.dataTransfer?.getData('text/html')
+  if (html) {
+    const match = html.match(/<img[^>]+src=["']([^"']+)["']/i)
+    if (match?.[1]) return match[1].trim()
+  }
+
+  return null
+}
+
+function onImageDrop(event: DragEvent) {
+  imageDragDepth = 0
+  imageDragging.value = false
+
+  const droppedUrl = getDroppedImageUrl(event)
+  if (droppedUrl) {
+    insertImageFromSrc(droppedUrl)
+    return
+  }
+
+  // 本地檔案無 hostname，無法通過網域白名單
+  if (event.dataTransfer?.files?.length) {
+    rejectDisallowedImageSource()
+    return
+  }
+
+  rejectDisallowedImageSource()
+}
+
+function onImageFileChange(event: Event) {
+  const input = event.target as HTMLInputElement
+  input.value = ''
+  // 本地選擇的檔案沒有 bochk / bochkuatcloud 來源 URL
+  rejectDisallowedImageSource()
+}
+
+function insertImageFromSrc(src: string, alt = '') {
+  if (!props.editor || !props.editable) return
+  if (!isAllowedImageSource(src)) {
+    rejectDisallowedImageSource()
+    return
+  }
+
+  props.editor.chain().focus().setImage({ src, alt }).run()
+  imagePopoverVisible.value = false
+  imageDragging.value = false
+  imageDragDepth = 0
+}
+
+function insertSectionBlock() {
+  if (!props.editor || !props.editable) return
+  props.editor.chain().focus().insertStructureBlock().run()
+}
+</script>
+
+<style scoped>
+.report-tiptap-toolbar-merged {
+  display: contents;
+}
+
+.report-tiptap-format-toolbar {
+  --report-tiptap-toolbar-fg: oklch(0.145 0 0);
+  display: contents;
+  color: var(--report-tiptap-toolbar-fg);
+}
+
+.report-tiptap-editor__group {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  flex-shrink: 0;
+}
+
+.report-tiptap-editor__tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  box-sizing: border-box;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 6px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--report-tiptap-toolbar-fg);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.report-tiptap-editor__tool :deep(svg) {
+  display: block;
+  flex-shrink: 0;
+  color: inherit;
+  stroke: currentColor;
+}
+
+.report-tiptap-editor__tool:hover:not(:disabled) {
+  background: #f3f4f6;
+  color: var(--report-tiptap-toolbar-fg);
+}
+
+.report-tiptap-editor__tool.is-active {
+  background: #f3f4f6;
+  color: var(--report-tiptap-toolbar-fg);
+}
+
+.report-tiptap-editor__tool:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.report-tiptap-editor__tool--style {
+  min-width: auto;
+  padding: 0 8px;
+  gap: 4px;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--report-tiptap-toolbar-fg);
+}
+
+.report-tiptap-editor__caret {
+  color: inherit;
+  opacity: 0.72;
+}
+
+.report-tiptap-editor__divider {
+  width: 1px;
+  height: 16px;
+  margin: 0 8px;
+  background: #e5e7eb;
+  flex-shrink: 0;
+}
+</style>
+
+<style>
+.report-tiptap-style-popper.el-dropdown__popper {
+  border: 1px solid #e5e7eb;
+  border-radius: 10px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+}
+
+.report-tiptap-style-popper .el-dropdown-menu {
+  min-width: 168px;
+  padding: 6px 0;
+  border: none;
+  border-radius: 10px;
+}
+
+.report-tiptap-style-popper .el-dropdown-menu__item {
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 0 14px;
+  color: oklch(0.145 0 0);
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 14px;
+  line-height: 1;
+}
+
+.report-tiptap-style-popper .el-dropdown-menu__item--divided {
+  margin-top: 0;
+  border-top: 1px solid #eceff3;
+}
+
+.report-tiptap-style-popper .el-dropdown-menu__item--divided::before {
+  display: none;
+}
+
+.report-tiptap-style-popper .el-dropdown-menu__item:hover,
+.report-tiptap-style-popper .el-dropdown-menu__item:focus,
+.report-tiptap-style-popper .el-dropdown-menu__item.is-style-active {
+  background: #f3f4f6;
+  color: oklch(0.145 0 0);
+}
+
+.report-tiptap-style-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.report-tiptap-style-item__icon {
+  flex-shrink: 0;
+  width: 28px;
+  color: oklch(0.145 0 0);
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  text-align: left;
+}
+
+.report-tiptap-style-item__label {
+  color: inherit;
+  font-size: 14px;
+  font-weight: 400;
+}
+</style>
+
+<style scoped>
+.report-tiptap-insert-toolbar {
+  --report-tiptap-toolbar-fg: oklch(0.145 0 0);
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  flex-shrink: 0;
+  color: var(--report-tiptap-toolbar-fg);
+}
+
+.report-tiptap-editor__tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  box-sizing: border-box;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 6px;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--report-tiptap-toolbar-fg);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    color 0.15s ease;
+}
+
+.report-tiptap-editor__tool :deep(svg) {
+  display: block;
+  flex-shrink: 0;
+  color: inherit;
+  stroke: currentColor;
+}
+
+.report-tiptap-editor__table-icon {
+  display: block;
+}
+
+.report-tiptap-editor__tool:hover:not(:disabled) {
+  background: #f3f4f6;
+  color: var(--report-tiptap-toolbar-fg);
+}
+
+.report-tiptap-editor__tool.is-active {
+  background: #f3f4f6;
+  color: var(--report-tiptap-toolbar-fg);
+}
+
+.report-tiptap-editor__tool:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+</style>
+
+<style>
+.report-tiptap-table-picker-popper.el-popover {
+  padding: 12px !important;
+  border: 1px solid #e5e7eb !important;
+  border-radius: 8px !important;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 10%) !important;
+}
+
+.report-tiptap-table-picker {
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 14px;
+  color: oklch(0.145 0 0);
+  user-select: none;
+}
+
+.report-tiptap-table-picker__label {
+  margin-bottom: 10px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.4;
+  color: oklch(0.145 0 0);
+}
+
+.report-tiptap-table-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(10, 18px);
+  grid-template-rows: repeat(10, 18px);
+  gap: 2px;
+  width: max-content;
+}
+
+.report-tiptap-table-picker__cell {
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 1px solid #dcdfe6;
+  border-radius: 1px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.report-tiptap-table-picker__cell.is-selected {
+  border-color: #c53355;
+  background: #c53355;
+}
+
+.report-tiptap-link-popper.el-popover {
+  padding: 16px !important;
+  border: 1px solid #e5e7eb !important;
+  border-radius: 10px !important;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 10%) !important;
+}
+
+.report-tiptap-link-panel {
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 14px;
+  color: oklch(0.145 0 0);
+}
+
+.report-tiptap-link-panel__title {
+  margin-bottom: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.4;
+  color: oklch(0.145 0 0);
+}
+
+.report-tiptap-link-panel__field {
+  position: relative;
+  margin-bottom: 14px;
+}
+
+.report-tiptap-link-panel__input {
+  box-sizing: border-box;
+  width: 100%;
+  height: 40px;
+  padding: 0 36px 0 12px;
+  border: none;
+  border-radius: 8px;
+  background: #f4f4f4;
+  color: oklch(0.145 0 0);
+  font-family: inherit;
+  font-size: 14px;
+  outline: none;
+}
+
+.report-tiptap-link-panel__input:focus {
+  box-shadow: 0 0 0 1px #c53355 inset;
+}
+
+.report-tiptap-link-panel__clear {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: #dcdfe6;
+  color: #606266;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+
+.report-tiptap-link-panel__clear:hover {
+  background: #c0c4cc;
+  color: #303133;
+}
+
+.report-tiptap-link-panel__actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.report-tiptap-link-panel__submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 72px;
+  height: 36px;
+  padding: 0 16px;
+  border: none;
+  border-radius: 8px;
+  background: #c53355;
+  color: #fff;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.report-tiptap-link-panel__submit:hover {
+  background: #a82b48;
+}
+
+.report-tiptap-image-popper.el-popover {
+  padding: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+  overflow: visible;
+}
+
+.report-tiptap-image-popper .el-popover__content {
+  overflow: visible;
+}
+
+.report-tiptap-image-panel {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 88px;
+  padding: 18px 16px;
+  border: 1px dashed #d1d5db;
+  border-radius: 10px;
+  background: #fff;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    border-color 0.15s ease,
+    background-color 0.15s ease;
+}
+
+.report-tiptap-image-panel:hover,
+.report-tiptap-image-panel.is-dragging {
+  border-color: #9ca3af;
+  background: #fafafa;
+}
+
+.report-tiptap-image-panel__icon {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: oklch(0.145 0 0);
+}
+
+.report-tiptap-image-panel__copy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  overflow: visible;
+}
+
+.report-tiptap-image-panel__title {
+  color: oklch(0.145 0 0);
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.report-tiptap-image-panel__desc {
+  color: #666;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.4;
+  padding-inline-end: 0.2em;
+  overflow: visible;
+}
+
+.report-tiptap-image-panel__file {
+  display: none;
+}
+</style>