aegon-lv97 1.0.0

package/gen-ai/build-report/components/ReportSourcesPanel.vue

@@ -0,0 +1,1327 @@
+<template>
+  <section
+    class="report-sources-panel"
+    :class="{
+      'is-embedded': embedded,
+      'is-sources-finalize': isFinalizeView,
+    }"
+  >
+    <h2 v-if="!embedded" class="report-sources-panel__title">資訊源檔案</h2>
+
+    <div v-if="!isFinalizeView" class="report-sources-stage-wrapper">
+      <div class="report-sources-stage">
+        <div
+          class="report-upload-zone"
+          role="button"
+          tabindex="0"
+          @click="triggerFilePick"
+          @keydown.enter="triggerFilePick"
+        >
+          <span class="report-upload-zone__plus">+</span>
+          <span class="report-upload-zone__label">添加資訊源</span>
+          <p class="report-upload-zone__hint">
+            （可一次多選，單個檔案上限100 MB，接受格式
+            txt、doc、docx、pdf、xls、xlsx、json、csv、pptx、PNG、JPG、JPEG、GIF，任何外部檔案需從可掃描病毒的方法接收，如內部電郵系統。）
+          </p>
+          <input
+            ref="fileInputRef"
+            type="file"
+            class="report-upload-zone__input"
+            multiple
+            accept=".txt,.doc,.docx,.pdf,.xls,.xlsx,.json,.csv,.pptx,.png,.jpg,.jpeg,.gif"
+            @change="onFilesPicked"
+          />
+        </div>
+
+        <div v-if="pendingFiles.length" class="report-pending">
+          <div class="report-pending__header">
+            <span class="report-pending__name-col">檔案名稱</span>
+            <span class="report-pending__size-col">大小</span>
+            <span class="report-pending__delete-col">刪除</span>
+          </div>
+          <div class="report-pending__body">
+            <div v-for="file in pendingFiles" :key="file.id" class="report-pending__row">
+              <span class="report-pending__name">{{ file.name }}</span>
+              <span
+                class="report-pending__size"
+                :class="{ 'is-over-limit': file.sizeKb > FILE_SIZE_LIMIT_KB }"
+              >
+                {{ file.sizeKb }}KB
+              </span>
+              <span class="report-pending__delete-col">
+                <button
+                  type="button"
+                  class="report-icon-btn report-pending__remove"
+                  aria-label="刪除"
+                  @click="requestRemovePending(file.id, $event)"
+                >
+                  ×
+                </button>
+              </span>
+            </div>
+          </div>
+        </div>
+        <div
+          class="report-pending__actions report-pending__actions--center"
+          :class="{ 'report-pending__actions--standalone': !pendingFiles.length }"
+        >
+          <button
+            type="button"
+            class="report-btn report-btn--primary"
+            :disabled="!pendingFiles.length || submitLoading"
+            @click="requestSubmitPending($event)"
+          >
+            提交
+          </button>
+          <button
+            type="button"
+            class="report-btn report-btn--outline"
+            :disabled="!pendingFiles.length"
+            @click="clearPending"
+          >
+            清空
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="report-sources-library">
+      <div class="report-source-toolbar">
+        <div class="report-source-toolbar__tabs">
+          <button
+            type="button"
+            class="report-source-tab"
+            :class="{ 'report-source-tab--active': sourceFilterTab === 'selected' }"
+            @click="setSourceFilterTab('selected')"
+          >
+            已選中 ({{ selectedSourceCount }})
+          </button>
+          <button
+            type="button"
+            class="report-source-tab"
+            :class="{ 'report-source-tab--active': sourceFilterTab === 'unselected' }"
+            @click="setSourceFilterTab('unselected')"
+          >
+            未選中 ({{ unselectedSourceCount }})
+          </button>
+        </div>
+        <div class="report-source-toolbar__search">
+          <span class="report-source-toolbar__search-label">Search:</span>
+          <input v-model="sourceSearch" type="text" class="report-source-toolbar__search-input" />
+          <button
+            type="button"
+            class="report-btn report-btn--outline report-btn--sm"
+            @click="refreshSources"
+          >
+            Refresh
+          </button>
+        </div>
+      </div>
+
+      <div class="report-source-table-wrap">
+        <div class="report-source-table__bulk">
+          <!-- // 0914：資訊源「全選/全不選」checkbox -->
+          <label
+            class="report-source-table__select-all"
+            :class="{ 'is-disabled': !isSourcesEditable }"
+          >
+            <span class="report-source-table__bulk-check">
+              <input
+                type="checkbox"
+                :checked="allSourcesSelected"
+                :disabled="!isSourcesEditable"
+                @change="onToggleAllSources"
+              />
+            </span>
+            <span class="report-source-table__bulk-label">全選/全不選</span>
+          </label>
+          <!-- // 0914 -->
+          <button
+            v-if="showMoreSourcesLink && !isFinalizeView"
+            type="button"
+            class="report-sources-more report-source-table__bulk-more"
+            @click="handleShowMore"
+          >
+            顯示更多 &gt;&gt;
+          </button>
+        </div>
+        <div class="report-source-table-scroll">
+          <table class="report-source-table" :class="{ 'is-finalize': isFinalizeView }">
+            <colgroup>
+              <col class="report-source-table__col-check" />
+              <col class="report-source-table__col-name" />
+              <col class="report-source-table__col-action" />
+              <col class="report-source-table__col-action" />
+              <col v-if="!isFinalizeView" class="report-source-table__col-action" />
+            </colgroup>
+            <thead>
+              <tr>
+                <th class="report-source-table__check" />
+                <th>檔案名稱</th>
+                <th class="report-source-table__action">預覽</th>
+                <th class="report-source-table__action">下載</th>
+                <th v-if="!isFinalizeView" class="report-source-table__action">刪除</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="file in visibleSources" :key="file.id">
+                <td class="report-source-table__check">
+                  <!-- finalize（報告歷史環節）：僅反顯 selected，不可主動勾選；可預覽/下載 -->
+                  <input
+                    type="checkbox"
+                    :checked="file.selected"
+                    :disabled="!isSourcesEditable"
+                    @change="onSourceSelectedChange(file, $event)"
+                  />
+                </td>
+                <td class="report-source-table__name">{{ file.name }}</td>
+                <td class="report-source-table__action">
+                  <button
+                    type="button"
+                    class="report-icon-btn"
+                    aria-label="預覽"
+                    @click="previewSource(file)"
+                  >
+                    <el-icon>
+                      <View />
+                    </el-icon>
+                  </button>
+                </td>
+                <td class="report-source-table__action">
+                  <button
+                    type="button"
+                    class="report-icon-btn"
+                    aria-label="下載"
+                    @click="downloadSource(file)"
+                  >
+                    <el-icon>
+                      <Download />
+                    </el-icon>
+                  </button>
+                </td>
+                <td v-if="!isFinalizeView" class="report-source-table__action">
+                  <button
+                    type="button"
+                    class="report-icon-btn"
+                    aria-label="刪除"
+                    @click="requestDeleteSource(file.id, $event)"
+                  >
+                    <el-icon>
+                      <Close />
+                    </el-icon>
+                  </button>
+                </td>
+              </tr>
+              <tr v-if="!visibleSources.length">
+                <td :colspan="isFinalizeView ? 4 : 5" class="report-source-table__empty">
+                  暫無匹配檔案
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <ReportSectionConfirmPopover
+    v-if="embedded"
+    :visible="deleteConfirmOpen"
+    :virtual-ref="deleteConfirmVirtualRef"
+    :boundary-el="sectionBoundaryEl ?? null"
+    :trigger-btn="deleteConfirmTriggerBtn"
+    :message="deleteConfirmMessage"
+    :instant="popoverInstant"
+    @confirm="confirmDelete"
+    @cancel="closeDeleteConfirm"
+  />
+  <ReportSectionConfirmPopover
+    v-if="embedded"
+    :visible="submitConfirmOpen"
+    :virtual-ref="submitConfirmVirtualRef"
+    :boundary-el="sectionBoundaryEl ?? null"
+    :trigger-btn="submitConfirmTriggerBtn"
+    title="確認提交"
+    :message="submitConfirmMessage"
+    :instant="popoverInstant"
+    @confirm="confirmSubmit"
+    @cancel="closeSubmitConfirm"
+  />
+</template>
+
+<script setup lang="ts">
+import { Close, Download, View } from '@element-plus/icons-vue'
+import { ElIcon, ElMessage, ElMessageBox } from 'element-plus'
+import { computed, ref, watch } from 'vue'
+import { ReportSectionConfirmPopover } from '../../common'
+import {
+  deleteSourceFileBlob,
+  downloadBlobAsFile,
+  fetchPreviewFileBlob,
+  isPreviewableFileName,
+  openSourceFilePreview,
+  putSourceFileBlob,
+} from '../../components/Preview'
+import {
+  FILE_SIZE_LIMIT_KB,
+  SOURCE_VISIBLE_LIMIT,
+  useReportWorkflow,
+  type PendingFile,
+  type SourceFile,
+  type SourceFilterTab,
+} from '../useReportWorkflow'
+const props = withDefaults(
+  defineProps<{
+    syncWorkflow?: boolean
+    embedded?: boolean
+    sectionBoundaryEl?: HTMLElement | null
+    panelOpen?: boolean
+    sourcesViewMode?: 'edit' | 'finalize'
+  }>(),
+  {
+    syncWorkflow: false,
+    embedded: false,
+    sectionBoundaryEl: null,
+    panelOpen: true,
+    sourcesViewMode: 'edit',
+  }
+)
+
+const emit = defineEmits<{
+  submitted: []
+}>()
+
+const workflow = useReportWorkflow()
+
+const isFinalizeView = computed(() => props.sourcesViewMode === 'finalize')
+const isSourcesEditable = computed(() => !isFinalizeView.value)
+
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const sourceSearch = ref('')
+const sourceFilterTab = ref<SourceFilterTab>('all')
+const showAllSources = ref(false)
+// 0914
+const allSourcesSelected = ref(false)
+// 0914
+
+const deleteConfirmOpen = ref(false)
+const submitConfirmOpen = ref(false)
+const submitLoading = ref(false)
+const popoverInstant = ref(false)
+const deleteConfirmMessage = ref('')
+const submitConfirmMessage = ref('')
+const deleteConfirmVirtualRef = ref<HTMLElement | null>(null)
+const submitConfirmVirtualRef = ref<HTMLElement | null>(null)
+const deleteConfirmTriggerBtn = ref<HTMLElement | null>(null)
+const submitConfirmTriggerBtn = ref<HTMLElement | null>(null)
+const deleteTarget = ref<{ type: 'source' | 'pending'; id: string } | null>(null)
+
+const localPendingFiles = ref<PendingFile[]>([])
+const localSourceFiles = ref<SourceFile[]>([])
+
+const pendingFiles = computed({
+  get: () => (props.syncWorkflow ? workflow.pendingFiles.value : localPendingFiles.value),
+  set: (value) => {
+    if (props.syncWorkflow) workflow.pendingFiles.value = value
+    else localPendingFiles.value = value
+  },
+})
+
+const sourceFiles = computed({
+  get: () => (props.syncWorkflow ? workflow.sourceFiles.value : localSourceFiles.value),
+  set: (value) => {
+    if (props.syncWorkflow) workflow.sourceFiles.value = value
+    else localSourceFiles.value = value
+  },
+})
+
+const selectedSourceCount = computed(() => sourceFiles.value.filter((f) => f.selected).length)
+const unselectedSourceCount = computed(() => sourceFiles.value.filter((f) => !f.selected).length)
+
+const tabFilteredSources = computed(() => {
+  if (sourceFilterTab.value === 'selected') {
+    return sourceFiles.value.filter((file) => file.selected)
+  }
+  if (sourceFilterTab.value === 'unselected') {
+    return sourceFiles.value.filter((file) => !file.selected)
+  }
+  return sourceFiles.value
+})
+
+const filteredSources = computed(() => {
+  const q = sourceSearch.value.trim().toLowerCase()
+  const base = tabFilteredSources.value
+  if (!q) return base
+  return base.filter((file) => file.name.toLowerCase().includes(q))
+})
+
+const visibleSources = computed(() => {
+  if (showAllSources.value) return filteredSources.value
+  return filteredSources.value.slice(0, SOURCE_VISIBLE_LIMIT)
+})
+
+const showMoreSourcesLink = computed(
+  () => !showAllSources.value && filteredSources.value.length > SOURCE_VISIBLE_LIMIT
+)
+
+function handleShowMore() {
+  if (isFinalizeView.value) return
+  showAllSources.value = true
+}
+
+// 0914：全選 checkbox 與可見列表同步
+watch(sourceFilterTab, () => {
+  showAllSources.value = false
+  const list = visibleSources.value
+  allSourcesSelected.value = list.length > 0 && list.every((f) => f.selected)
+})
+
+watch(
+  () => visibleSources.value.map((file) => file.selected),
+  () => {
+    const list = visibleSources.value
+    allSourcesSelected.value = list.length > 0 && list.every((file) => file.selected)
+  }
+)
+// 0914
+
+function triggerFilePick() {
+  if (!isSourcesEditable.value) return
+  fileInputRef.value?.click()
+}
+
+function onFilesPicked(event: Event) {
+  if (!isSourcesEditable.value) return
+  const input = event.target as HTMLInputElement
+  const files = input.files
+  if (!files?.length) return
+
+  for (const file of files) {
+    const id = `pending-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`
+    void putSourceFileBlob(id, file, file.name)
+    pendingFiles.value = [
+      ...pendingFiles.value,
+      {
+        id,
+        name: file.name,
+        sizeKb: Math.ceil(file.size / 1024),
+      },
+    ]
+  }
+  input.value = ''
+}
+
+function removePending(id: string) {
+  pendingFiles.value = pendingFiles.value.filter((f) => f.id !== id)
+  void deleteSourceFileBlob(id)
+}
+
+function resolveDeletePopoverAnchors(event: MouseEvent) {
+  const btn = event.currentTarget as HTMLElement
+  const row = btn.closest('tr, .report-pending__row') as HTMLElement | null
+  return {
+    virtualRef: row ?? btn,
+    triggerBtn: btn,
+  }
+}
+
+function requestRemovePending(id: string, event: MouseEvent) {
+  if (!isSourcesEditable.value) return
+  if (!props.embedded || !props.sectionBoundaryEl) {
+    removePending(id)
+    return
+  }
+  const file = pendingFiles.value.find((item) => item.id === id)
+  if (!file) return
+  const anchors = resolveDeletePopoverAnchors(event)
+  deleteConfirmVirtualRef.value = anchors.virtualRef
+  deleteConfirmTriggerBtn.value = anchors.triggerBtn
+  deleteTarget.value = { type: 'pending', id }
+  deleteConfirmMessage.value = `確定刪除「${file.name}」？`
+  deleteConfirmOpen.value = true
+}
+
+function clearPending() {
+  if (!isSourcesEditable.value) return
+  if (!pendingFiles.value.length) return
+
+  if (props.syncWorkflow) {
+    workflow.pendingFiles.value = []
+  } else {
+    localPendingFiles.value = []
+  }
+
+  if (fileInputRef.value) {
+    fileInputRef.value.value = ''
+  }
+}
+
+function hasOverLimitPendingFiles() {
+  return pendingFiles.value.some((file) => file.sizeKb > FILE_SIZE_LIMIT_KB)
+}
+
+function getSubmitConfirmMessage() {
+  return hasOverLimitPendingFiles() ? '是否跳過超出限制的檔案，上傳列表中的檔案？' : '是否提交？'
+}
+
+function requestSubmitPending(event: MouseEvent) {
+  if (!isSourcesEditable.value) return
+  if (!pendingFiles.value.length || submitLoading.value) return
+
+  const message = getSubmitConfirmMessage()
+  if (props.embedded && props.sectionBoundaryEl) {
+    const btn = event.currentTarget as HTMLElement
+    submitConfirmVirtualRef.value = btn
+    submitConfirmTriggerBtn.value = btn
+    submitConfirmMessage.value = message
+    submitConfirmOpen.value = true
+    return
+  }
+
+  void ElMessageBox.confirm(message, '確認提交', {
+    confirmButtonText: '確認',
+    cancelButtonText: '取消',
+    type: 'warning',
+  })
+    .then(() => performSubmit())
+    .catch(() => undefined)
+}
+
+function confirmSubmit() {
+  closeSubmitConfirm()
+  void performSubmit()
+}
+
+function closeSubmitConfirm() {
+  submitConfirmOpen.value = false
+}
+
+async function uploadPendingFiles(files: PendingFile[]) {
+  void files
+  await new Promise<void>((resolve) => {
+    window.setTimeout(resolve, 300)
+  })
+}
+
+async function performSubmit() {
+  if (!pendingFiles.value.length || submitLoading.value) return
+
+  const valid = pendingFiles.value.filter((file) => file.sizeKb <= FILE_SIZE_LIMIT_KB)
+  submitLoading.value = true
+  try {
+    await uploadPendingFiles(valid)
+    valid.forEach((file) => {
+      sourceFiles.value.push({ id: file.id, name: file.name, selected: false })
+    })
+    pendingFiles.value = pendingFiles.value.filter((file) => file.sizeKb > FILE_SIZE_LIMIT_KB)
+    ElMessage.success('提交成功')
+    emit('submitted')
+  } catch {
+    ElMessage.warning('請稍後重試')
+  } finally {
+    submitLoading.value = false
+  }
+}
+
+function setSourceFilterTab(tab: 'selected' | 'unselected') {
+  sourceFilterTab.value = sourceFilterTab.value === tab ? 'all' : tab
+}
+
+// 0914
+function onToggleAllSources(event: Event) {
+  if (!isSourcesEditable.value) {
+    // 報告歷史環節：強制回顯當前狀態，阻止主動勾選
+    const input = event.target as HTMLInputElement
+    input.checked = allSourcesSelected.value
+    return
+  }
+  const next = (event.target as HTMLInputElement).checked
+  allSourcesSelected.value = next
+  visibleSources.value.forEach((file) => {
+    file.selected = next
+  })
+}
+// 0914
+
+/** 單行勾選；finalize 僅反顯接口 selected，不可改 */
+function onSourceSelectedChange(file: SourceFile, event: Event) {
+  const input = event.target as HTMLInputElement
+  if (!isSourcesEditable.value) {
+    input.checked = !!file.selected
+    return
+  }
+  file.selected = input.checked
+}
+
+function refreshSources() {
+  sourceSearch.value = ''
+  sourceFilterTab.value = 'all'
+  showAllSources.value = false
+}
+
+async function previewSource(file: SourceFile) {
+  if (!isPreviewableFileName(file.name)) {
+    ElMessage.warning('暫僅支持預覽 PDF / DOCX / DOC / 圖片')
+    return
+  }
+  try {
+    await openSourceFilePreview({
+      id: file.id,
+      name: file.name,
+      url: file.url,
+    })
+  } catch (err) {
+    ElMessage.warning(
+      err instanceof Error && err.message.trim()
+        ? `${err.message}（可嘗試重新上傳該檔後再預覽）`
+        : '無法打開預覽頁，請重新上傳後再試'
+    )
+  }
+}
+
+async function downloadSource(file: SourceFile) {
+  try {
+    const blob = await fetchPreviewFileBlob({
+      id: file.id,
+      name: file.name,
+      url: file.url,
+    })
+    downloadBlobAsFile(blob, file.name)
+  } catch (err) {
+    console.error(err)
+    ElMessage.warning(err instanceof Error && err.message.trim() ? err.message : '下載失敗')
+  }
+}
+
+function deleteSource(id: string) {
+  sourceFiles.value = sourceFiles.value.filter((f) => f.id !== id)
+  void deleteSourceFileBlob(id)
+}
+
+function requestDeleteSource(id: string, event: MouseEvent) {
+  if (!isSourcesEditable.value) return
+  if (!props.embedded || !props.sectionBoundaryEl) {
+    deleteSource(id)
+    return
+  }
+  const file = sourceFiles.value.find((item) => item.id === id)
+  if (!file) return
+  const anchors = resolveDeletePopoverAnchors(event)
+  deleteConfirmVirtualRef.value = anchors.virtualRef
+  deleteConfirmTriggerBtn.value = anchors.triggerBtn
+  deleteTarget.value = { type: 'source', id }
+  deleteConfirmMessage.value = `確定刪除「${file.name}」？`
+  deleteConfirmOpen.value = true
+}
+
+function confirmDelete() {
+  if (!deleteTarget.value) {
+    closeDeleteConfirm()
+    return
+  }
+  if (deleteTarget.value.type === 'source') {
+    deleteSource(deleteTarget.value.id)
+  } else {
+    removePending(deleteTarget.value.id)
+  }
+  closeDeleteConfirm()
+}
+
+function closeDeleteConfirm() {
+  deleteConfirmOpen.value = false
+  deleteTarget.value = null
+}
+
+function hasOpenOverlays() {
+  return deleteConfirmOpen.value || submitConfirmOpen.value
+}
+
+function closeAllOverlays(instant = false) {
+  if (!deleteConfirmOpen.value && !submitConfirmOpen.value) return
+  if (instant) popoverInstant.value = true
+  closeDeleteConfirm()
+  closeSubmitConfirm()
+  if (instant) {
+    window.setTimeout(() => {
+      popoverInstant.value = false
+    }, 320)
+  }
+}
+
+watch(
+  () => props.panelOpen,
+  (open) => {
+    if (!open) closeAllOverlays()
+  }
+)
+
+defineExpose({
+  sourceFiles: props.syncWorkflow ? workflow.sourceFiles : localSourceFiles,
+  pendingFiles: props.syncWorkflow ? workflow.pendingFiles : localPendingFiles,
+  hasOpenOverlays,
+  closeAllOverlays,
+})
+</script>
+
+<style scoped>
+.report-sources-panel {
+  display: none;
+  flex-direction: column;
+  height: 100%;
+  padding: 20px 24px 24px;
+  min-width: 0;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  background: #fff;
+  box-sizing: border-box;
+  transition: box-shadow var(--el-transition-duration, 0.3s);
+  --report-source-check-col: 36px;
+  --report-source-action-col: 36px;
+  --report-source-grid-cols: var(--report-source-check-col) 1fr
+    repeat(3, var(--report-source-action-col));
+  --report-source-row-h: 36px;
+}
+
+.report-sources-panel:not(.is-embedded):hover {
+  box-shadow: var(--el-box-shadow-light, 0 0 12px rgba(0, 0, 0, 0.12));
+}
+
+.report-sources-panel__title {
+  margin: 0 0 16px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #1a1a1a;
+  flex-shrink: 0;
+}
+
+.report-sources-panel.is-embedded {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  height: 100%;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.report-sources-panel.is-embedded.is-section-collapsed {
+  flex: 0 0 auto;
+}
+
+.report-sources-panel.is-embedded .report-sources-library {
+  flex: 0 0 auto;
+  overflow: visible;
+}
+
+.report-sources-panel.is-embedded .report-source-toolbar__search-input {
+  min-width: 0;
+}
+
+.report-sources-panel.is-embedded .report-source-table-wrap {
+  overflow-x: auto;
+}
+
+.report-sources-panel.is-sources-finalize {
+  --report-source-grid-cols: var(--report-source-check-col) 1fr
+    repeat(2, var(--report-source-action-col));
+}
+
+/* // 0914 */
+.report-sources-panel.is-sources-finalize .report-source-table__select-all.is-disabled {
+  cursor: not-allowed;
+}
+/* // 0914 */
+
+.report-sources-panel.is-sources-finalize .report-source-table__check input:disabled {
+  cursor: not-allowed;
+}
+
+.report-sources-panel.is-embedded.is-sources-finalize .report-sources-library {
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+}
+
+.report-sources-panel.is-sources-finalize:not(.is-embedded) .report-sources-library {
+  border-top: 1px solid #ebeef5;
+  border-radius: 8px;
+}
+
+.report-source-table.is-finalize th.report-source-table__action,
+.report-source-table.is-finalize td.report-source-table__action {
+  width: var(--report-source-action-col);
+}
+
+.report-sources-stage-wrapper {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  padding: 5px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px 8px 0 0;
+}
+
+.report-sources-stage {
+  flex-shrink: 0;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  overflow: hidden;
+}
+
+.report-sources-library {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  box-sizing: border-box;
+  padding: 5px;
+  border: 1px solid #ebeef5;
+  border-top: 0;
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
+}
+
+.report-sources-more {
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 13px;
+  color: #409eff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.report-sources-more:hover {
+  color: #66b1ff;
+}
+
+.report-upload-zone {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 120px;
+  padding: 16px;
+  border: 1px dashed #c9cdd4;
+  border-radius: 8px;
+  background: #fafafa;
+  cursor: pointer;
+  text-align: center;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.report-upload-zone:hover {
+  background: #f5f5f5;
+  border-color: #c53355;
+}
+
+.report-upload-zone__plus {
+  font-size: 28px;
+  line-height: 1;
+  color: #86909c;
+  font-weight: 300;
+  margin-top: -20px;
+}
+
+.report-upload-zone__label {
+  font-size: 13px;
+  color: #4e5969;
+}
+
+.report-upload-zone__hint {
+  margin: 4px 0 0;
+  max-width: 100%;
+  font-size: 11px;
+  line-height: 1.5;
+  color: #86909c;
+}
+
+.report-upload-zone__input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.report-pending {
+  margin-top: 5px;
+  box-sizing: border-box;
+}
+
+.report-pending__body {
+  max-height: calc(var(--report-source-row-h) * 20);
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #999 transparent;
+}
+
+.report-pending__header,
+.report-pending__row {
+  display: grid;
+  grid-template-columns: var(--report-source-grid-cols);
+  align-items: center;
+  height: var(--report-source-row-h);
+  font-size: 13px;
+}
+
+.report-pending__row {
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+}
+
+.report-pending__row:hover {
+  background-color: #f5f7fa;
+}
+
+.report-pending__header {
+  background: #fafafa;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.report-pending__name-col,
+.report-pending__name {
+  grid-column: 1 / 4;
+  padding: 0 10px;
+  min-width: 0;
+  height: var(--report-source-row-h);
+  display: flex;
+  align-items: center;
+}
+
+.report-pending__size-col,
+.report-pending__size {
+  grid-column: 4;
+  padding: 0 10px;
+  height: var(--report-source-row-h);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+  box-sizing: border-box;
+}
+
+.report-pending__delete-col {
+  grid-column: 5;
+  padding: 0 10px;
+  height: var(--report-source-row-h);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  text-align: right;
+  box-sizing: border-box;
+}
+
+.report-pending__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.report-pending__size {
+  color: #4e5969;
+  white-space: nowrap;
+}
+
+.report-pending__size.is-over-limit {
+  color: #c53355;
+  font-weight: 600;
+}
+
+.report-pending__remove {
+  border: 0;
+  background: none;
+  font-size: 18px;
+  line-height: 1;
+  color: #86909c;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.report-pending__remove:hover {
+  color: #c53355;
+}
+
+.report-pending__actions {
+  display: flex;
+  gap: 10px;
+  padding: 10px;
+}
+
+.report-pending__actions--center {
+  justify-content: center;
+}
+
+.report-btn {
+  min-width: 72px;
+  padding: 6px 16px;
+  border-radius: 3px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.report-btn--primary {
+  border: 1px solid #c53355;
+  background: #c53355;
+  color: #fff;
+}
+
+.report-btn--primary:hover {
+  background: #a82b48;
+  border-color: #a82b48;
+}
+
+.report-btn--primary:disabled,
+.report-btn--outline:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.report-btn--primary:disabled:hover {
+  background: #c53355;
+  border-color: #c53355;
+}
+
+.report-btn--outline:disabled:hover {
+  background: #fff;
+}
+
+.report-pending__actions--standalone {
+  margin-top: 8px;
+}
+
+.report-btn--outline {
+  border: 1px solid #c53355;
+  background: #fff;
+  color: #c53355;
+}
+
+.report-btn--outline:hover {
+  background: #fff5f6;
+}
+
+.report-btn--sm {
+  min-width: auto;
+  padding: 4px 12px;
+  font-size: 12px;
+  margin-right: -16px;
+}
+
+.report-source-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 8px 0;
+  flex-shrink: 0;
+}
+
+.report-source-toolbar__tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.report-source-tab {
+  min-width: 88px;
+  padding: 4px 12px;
+  border: 1px solid #e8eaec;
+  border-radius: 2px;
+  background: #fff;
+  font-size: 13px;
+  color: #4e5969;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.report-source-tab--active {
+  border-color: #c53355;
+  color: #c53355;
+  background: #fff5f6;
+}
+
+.report-source-toolbar__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.report-source-toolbar__search-label {
+  font-size: 13px;
+  color: #4e5969;
+}
+
+.report-source-toolbar__search-input {
+  width: min(140px, 100%);
+  height: 28px;
+  padding: 2px 8px;
+  border: 1px solid #c9cdd4;
+  border-radius: 2px;
+  font-size: 13px;
+  box-sizing: border-box;
+}
+
+.report-source-table-wrap {
+  overflow: visible;
+}
+
+.report-source-table-scroll {
+  max-height: calc(var(--report-source-row-h) * 21);
+  overflow-x: auto;
+  overflow-y: auto;
+  scrollbar-width: auto;
+  scrollbar-color: #999 transparent;
+}
+
+.report-source-table__bulk {
+  display: grid;
+  grid-template-columns: var(--report-source-grid-cols);
+  align-items: center;
+  padding: 8px 0 6px;
+}
+
+.report-source-table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 13px;
+}
+
+.report-source-table__col-check {
+  width: var(--report-source-check-col);
+}
+
+.report-source-table__col-action {
+  width: var(--report-source-action-col);
+}
+
+.report-source-table th,
+.report-source-table td {
+  height: var(--report-source-row-h);
+  padding: 0 10px;
+  text-align: left;
+  background: #fff;
+  vertical-align: middle;
+  box-sizing: border-box;
+  transition: background-color 0.2s ease;
+}
+
+.report-source-table th.report-source-table__action,
+.report-source-table td.report-source-table__action {
+  width: var(--report-source-action-col);
+  padding: 0 2px;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.report-source-table th.report-source-table__action:last-child,
+.report-source-table td.report-source-table__action:last-child {
+  padding-right: 4px;
+}
+
+.report-source-table td.report-source-table__action .report-icon-btn {
+  vertical-align: middle;
+}
+
+.report-source-table tbody tr:hover > td {
+  background-color: #f5f7fa;
+}
+
+.report-source-table tbody tr:hover > td:first-child {
+  border-radius: 4px 0 0 4px;
+}
+
+.report-source-table tbody tr:hover > td:last-child {
+  border-radius: 0 4px 4px 0;
+}
+
+.report-source-table th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #fafafa;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.report-source-table__check {
+  width: var(--report-source-check-col);
+  padding-left: 10px;
+  padding-right: 0;
+  text-align: left;
+  vertical-align: middle;
+}
+
+/* // 0914：全選/全不選 checkbox 列樣式 */
+.report-source-table__select-all {
+  display: contents;
+  cursor: pointer;
+}
+
+.report-source-table__bulk-check {
+  display: flex;
+  align-items: center;
+  padding-left: 10px;
+}
+
+.report-source-table__bulk-label {
+  padding: 0 10px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+  white-space: nowrap;
+}
+
+.report-source-table__bulk-check input,
+.report-source-table__check input {
+  accent-color: #c53355;
+}
+/* // 0914 */
+
+.report-source-table__bulk-more {
+  grid-column: 3 / -1;
+  justify-self: end;
+  align-self: center;
+  padding-right: 10px;
+}
+
+.report-source-table__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.report-source-table__empty {
+  text-align: center;
+  color: #86909c;
+  height: auto;
+  padding: 24px;
+}
+
+@media (max-width: 960px) {
+  .report-sources-panel {
+    height: auto;
+  }
+
+  .report-source-toolbar {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .report-source-toolbar__search {
+    width: 100%;
+  }
+
+  .report-source-toolbar__search-input {
+    flex: 1;
+    width: auto;
+    min-width: 0;
+  }
+
+  .report-source-table__bulk {
+    grid-template-columns: var(--report-source-check-col) 1fr;
+    gap: 6px;
+  }
+
+  .report-source-table__bulk-more {
+    grid-column: 1 / -1;
+    justify-self: end;
+    padding-right: 10px;
+  }
+}
+
+@media (max-width: 849px) {
+  .report-source-toolbar__search {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    row-gap: 8px;
+  }
+
+  /* Search input 等比例縮小佔滿剩餘寬度 */
+  .report-source-toolbar__search-input {
+    flex: 1 1 0;
+    width: auto;
+    min-width: 0;
+  }
+
+  /* Refresh 換行，max-width 120，居右 */
+  .report-source-toolbar__search .report-btn {
+    flex: 0 0 100%;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 120px;
+    margin-left: auto;
+    margin-right: 0;
+  }
+}
+</style>
+
+<style>
+/* 編輯者 / 待提交 / 資訊源列表：滾動條 8px 軌道，滑塊 50px（豎=高 / 橫=寬） */
+.report-editor-list::-webkit-scrollbar,
+.report-pending__body::-webkit-scrollbar,
+.report-source-table-scroll::-webkit-scrollbar,
+.report-sources-panel.is-embedded .report-source-table-wrap::-webkit-scrollbar {
+  width: 8px !important;
+  height: 8px !important;
+}
+
+.report-editor-list::-webkit-scrollbar-track,
+.report-pending__body::-webkit-scrollbar-track,
+.report-source-table-scroll::-webkit-scrollbar-track,
+.report-sources-panel.is-embedded .report-source-table-wrap::-webkit-scrollbar-track {
+  background: transparent !important;
+}
+
+.report-editor-list::-webkit-scrollbar-thumb,
+.report-pending__body::-webkit-scrollbar-thumb,
+.report-source-table-scroll::-webkit-scrollbar-thumb,
+.report-sources-panel.is-embedded .report-source-table-wrap::-webkit-scrollbar-thumb {
+  border-radius: 4px !important;
+  background-color: #999 !important;
+  /* 豎向滑塊高 50px；底部橫向滑塊寬 50px */
+  min-width: 50px !important;
+  min-height: 50px !important;
+}
+
+.report-editor-list::-webkit-scrollbar-corner,
+.report-pending__body::-webkit-scrollbar-corner,
+.report-source-table-scroll::-webkit-scrollbar-corner,
+.report-sources-panel.is-embedded .report-source-table-wrap::-webkit-scrollbar-corner {
+  background: transparent !important;
+}
+
+.report-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: #4e5969;
+  cursor: pointer;
+  border-radius: 4px;
+  vertical-align: middle;
+}
+
+.report-icon-btn:hover {
+  color: #c53355;
+  background: #fff5f6;
+}
+</style>