aegon-lv82 1.0.0

package/src/views/gen-ai/build-report/components/ReportSourceFileSummary.vue

@@ -0,0 +1,656 @@
+<template>
+  <ReportCollapsibleSection
+    ref="sectionRef"
+    v-model:open="panelOpen"
+    title="編輯者"
+    card-hover
+    @before-collapse="handleBeforeCollapse"
+  >
+    <template #actions>
+      <button
+        v-if="canManageReportEditors"
+        ref="addBtnRef"
+        type="button"
+        class="report-icon-btn"
+        aria-label="添加"
+        @click.stop="toggleAddOpen"
+      >
+        <el-icon>
+          <Plus />
+        </el-icon>
+      </button>
+      <button
+        v-if="canManageReportEditors"
+        ref="shareBtnRef"
+        type="button"
+        class="report-icon-btn"
+        aria-label="轉移發起人"
+        @click.stop="toggleShareOpen"
+      >
+        <el-icon>
+          <Share />
+        </el-icon>
+      </button>
+    </template>
+
+    <div class="report-editor-panel">
+      <ul class="report-editor-list">
+        <li v-for="editor in editors" :key="editor.id" class="report-editor-list__row">
+          <span class="report-editor-list__name" :title="`${editor.name}(${editor.employeeId})`">
+            {{ editor.name }}({{ editor.employeeId }})
+          </span>
+          <span class="report-editor-list__dept">{{ editor.department }}</span>
+          <span class="report-editor-list__role">{{ editorRoleLabel(editor.role) }}</span>
+          <span class="report-editor-list__action">
+            <button
+              v-if="canManageReportEditors && editor.role !== 'initiator'"
+              type="button"
+              class="report-icon-btn"
+              :aria-label="`移除${editor.name}`"
+              @click="requestRemoveEditor(editor, $event)"
+            >
+              <el-icon>
+                <Close />
+              </el-icon>
+            </button>
+          </span>
+        </li>
+      </ul>
+    </div>
+  </ReportCollapsibleSection>
+
+  <el-popover
+    :visible="addOpen"
+    :virtual-ref="shareToggleRef"
+    placement="bottom-start"
+    :width="popoverWidth"
+    :popper-options="popperOptions"
+    :popper-style="addPopperStyle"
+    popper-class="report-config-popover"
+    :transition="popoverInstant ? 'report-config-popover-instant' : 'report-config-popover-fade'"
+    :gpu-acceleration="false"
+    :teleported="true"
+  >
+    <div class="report-source-transfer">
+      <h4 class="report-source-transfer__title">添加編輯者</h4>
+      <label class="report-source-transfer__field">
+        <span class="report-source-transfer__label">用戶</span>
+        <el-select
+          v-model="addSelectedUser"
+          class="report-source-transfer__select"
+          filterable
+          clearable
+          placeholder="請選擇用戶"
+        >
+          <el-option
+            v-for="user in addEditorOptions"
+            :key="user.id"
+            :label="`${user.name}(${user.employeeId})`"
+            :value="user.id"
+          />
+        </el-select>
+      </label>
+      <div class="report-source-transfer__actions">
+        <button type="button" class="report-source-transfer__btn" @click="addOpen = false">
+          取消
+        </button>
+        <button
+          type="button"
+          class="report-source-transfer__btn report-source-transfer__btn--primary"
+          @click="confirmAdd"
+        >
+          確認
+        </button>
+      </div>
+    </div>
+  </el-popover>
+
+  <el-popover
+    :visible="shareOpen"
+    :virtual-ref="shareToggleRef"
+    placement="bottom-start"
+    :width="popoverWidth"
+    :popper-options="popperOptions"
+    :popper-style="sharePopperStyle"
+    popper-class="report-config-popover"
+    :transition="popoverInstant ? 'report-config-popover-instant' : 'report-config-popover-fade'"
+    :gpu-acceleration="false"
+    :teleported="true"
+  >
+    <div class="report-source-transfer">
+      <h4 class="report-source-transfer__title">轉移報告發起人權限</h4>
+      <label class="report-source-transfer__field">
+        <span class="report-source-transfer__label">用戶</span>
+        <el-select
+          v-model="transferSelectedUser"
+          class="report-source-transfer__select"
+          filterable
+          clearable
+          placeholder="請選擇用戶"
+        >
+          <el-option
+            v-for="user in transferUserOptions"
+            :key="user.id"
+            :label="`${user.name}(${user.employeeId})`"
+            :value="user.id"
+          />
+        </el-select>
+      </label>
+      <div class="report-source-transfer__actions">
+        <button type="button" class="report-source-transfer__btn" @click="shareOpen = false">
+          取消
+        </button>
+        <button
+          type="button"
+          class="report-source-transfer__btn report-source-transfer__btn--primary"
+          @click="confirmTransfer"
+        >
+          確認
+        </button>
+      </div>
+    </div>
+  </el-popover>
+
+  <ReportSectionConfirmPopover
+    :visible="deleteConfirmOpen"
+    :virtual-ref="deleteConfirmVirtualRef"
+    :boundary-el="sectionBoundaryEl"
+    :trigger-btn="deleteConfirmTriggerBtn"
+    :message="deleteConfirmMessage"
+    :instant="popoverInstant"
+    @confirm="confirmRemoveEditor"
+    @cancel="closeDeleteConfirm"
+  />
+</template>
+
+<script setup lang="ts">
+import { Close, Plus, Share } from '@element-plus/icons-vue'
+import { ElIcon, ElMessage, ElOption, ElPopover, ElSelect } from 'element-plus'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import {
+  MOCK_UMS_EDITOR_USERS,
+  type ReportEditor,
+  type ReportEditorRole,
+} from '../useReportWorkflow'
+import { useReportWorkflow } from '../useReportWorkflow'
+import { ReportCollapsibleSection, ReportSectionConfirmPopover } from '../../common'
+const workflow = useReportWorkflow()
+const { reportEditors, canManageReportEditors } = workflow
+
+const editors = reportEditors
+const addOpen = ref(false)
+const shareOpen = ref(false)
+const popoverInstant = ref(false)
+const addSelectedUser = ref('')
+const transferSelectedUser = ref('')
+
+const addBtnRef = ref<HTMLElement | null>(null)
+const shareBtnRef = ref<HTMLElement | null>(null)
+const sectionRef = ref<InstanceType<typeof ReportCollapsibleSection> | null>(null)
+
+const shareToggleRef = computed(() => sectionRef.value?.toggleRef ?? null)
+
+const popoverWidthPx = ref(240)
+const arrowAlignKey = ref(0)
+const popoverWidth = computed(() => popoverWidthPx.value)
+
+const addEditorOptions = computed(() => {
+  const existingIds = new Set(editors.value.map((editor) => editor.employeeId))
+  return MOCK_UMS_EDITOR_USERS.filter((user) => !existingIds.has(user.employeeId))
+})
+
+const transferUserOptions = computed(() => {
+  const currentInitiator = editors.value.find((editor) => editor.role === 'initiator')
+  const candidates = new Map<string, (typeof MOCK_UMS_EDITOR_USERS)[number]>()
+
+  for (const user of MOCK_UMS_EDITOR_USERS) {
+    if (user.id !== currentInitiator?.id) {
+      candidates.set(user.id, user)
+    }
+  }
+  for (const editor of editors.value) {
+    if (editor.id !== currentInitiator?.id) {
+      candidates.set(editor.id, {
+        id: editor.id,
+        name: editor.name,
+        employeeId: editor.employeeId,
+        department: editor.department,
+      })
+    }
+  }
+
+  return Array.from(candidates.values())
+})
+
+const panelOpen = ref(true)
+
+const deleteConfirmOpen = ref(false)
+const deleteConfirmMessage = ref('')
+const deleteConfirmVirtualRef = ref<HTMLElement | null>(null)
+const deleteConfirmTriggerBtn = ref<HTMLElement | null>(null)
+const deleteTargetId = ref<string | null>(null)
+
+const sectionBoundaryEl = computed(() => sectionRef.value?.rootRef ?? null)
+
+function editorRoleLabel(role: ReportEditorRole) {
+  return role === 'initiator' ? '發起人' : '編輯者'
+}
+
+function requestRemoveEditor(editor: ReportEditor, event: MouseEvent) {
+  if (!canManageReportEditors.value) return
+  const btn = event.currentTarget as HTMLElement
+  deleteConfirmVirtualRef.value = (btn.closest('.report-editor-list__row') as HTMLElement) ?? btn
+  deleteConfirmTriggerBtn.value = btn
+  deleteTargetId.value = editor.id
+  deleteConfirmMessage.value = `確定刪除「${editor.name}(${editor.employeeId})」？`
+  deleteConfirmOpen.value = true
+}
+
+function confirmRemoveEditor() {
+  if (deleteTargetId.value) {
+    editors.value = editors.value.filter((item) => item.id !== deleteTargetId.value)
+  }
+  closeDeleteConfirm()
+}
+
+function closeDeleteConfirm() {
+  deleteConfirmOpen.value = false
+  deleteTargetId.value = null
+}
+
+function hasOpenOverlays() {
+  return addOpen.value || shareOpen.value || deleteConfirmOpen.value
+}
+
+function closeAllOverlays() {
+  addOpen.value = false
+  shareOpen.value = false
+  deleteConfirmOpen.value = false
+  deleteTargetId.value = null
+}
+
+function handleBeforeCollapse(done: (hadOpenOverlays: boolean) => void) {
+  const hadOpen = hasOpenOverlays()
+  if (hadOpen) {
+    popoverInstant.value = true
+    closeAllOverlays()
+    window.setTimeout(() => {
+      popoverInstant.value = false
+    }, 320)
+  }
+  done(hadOpen)
+}
+
+function getSectionContentWidth() {
+  const sectionEl = sectionRef.value?.rootRef
+  if (!sectionEl) return 240
+  const styles = getComputedStyle(sectionEl)
+  const paddingX = parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight)
+  return Math.round(sectionEl.clientWidth - paddingX)
+}
+
+function getArrowPopperStyle(triggerBtn: HTMLElement | null): Record<string, string> {
+  void arrowAlignKey.value
+  void panelOpen.value
+  const sectionEl = sectionRef.value?.rootRef
+  if (!triggerBtn || !sectionEl) return {}
+  const sectionRect = sectionEl.getBoundingClientRect()
+  const paddingLeft = parseFloat(getComputedStyle(sectionEl).paddingLeft)
+  const btnRect = triggerBtn.getBoundingClientRect()
+  const left = btnRect.left + btnRect.width / 2 - sectionRect.left - paddingLeft - 8
+  return { '--report-config-arrow-left': `${left}px` }
+}
+
+const addPopperStyle = computed(() => getArrowPopperStyle(addBtnRef.value))
+
+const sharePopperStyle = computed(() => getArrowPopperStyle(shareBtnRef.value))
+
+const popperOptions = computed(() => {
+  const boundary = sectionRef.value?.rootRef
+  return {
+    modifiers: [
+      {
+        name: 'preventOverflow',
+        options: {
+          boundary: boundary ?? 'viewport',
+          padding: 0,
+          altAxis: true,
+        },
+      },
+      {
+        name: 'flip',
+        enabled: false,
+      },
+    ],
+  }
+})
+
+function syncPopoverWidth() {
+  popoverWidthPx.value = getSectionContentWidth()
+  arrowAlignKey.value += 1
+}
+
+function toggleAddOpen() {
+  if (!canManageReportEditors.value) return
+  syncPopoverWidth()
+  shareOpen.value = false
+  addOpen.value = !addOpen.value
+  if (addOpen.value) {
+    void nextTick(() => {
+      arrowAlignKey.value += 1
+    })
+  }
+}
+
+function toggleShareOpen() {
+  if (!canManageReportEditors.value) return
+  syncPopoverWidth()
+  addOpen.value = false
+  shareOpen.value = !shareOpen.value
+  if (shareOpen.value) {
+    void nextTick(() => {
+      arrowAlignKey.value += 1
+    })
+  }
+}
+
+function confirmAdd() {
+  if (!canManageReportEditors.value) {
+    addOpen.value = false
+    return
+  }
+
+  const candidate = MOCK_UMS_EDITOR_USERS.find((user) => user.id === addSelectedUser.value)
+  if (!candidate) {
+    addOpen.value = false
+    return
+  }
+
+  const alreadyExists = editors.value.some((editor) => editor.employeeId === candidate.employeeId)
+  if (alreadyExists) {
+    ElMessage.warning('該用戶已是報告編輯者')
+    addOpen.value = false
+    addSelectedUser.value = ''
+    return
+  }
+
+  editors.value.push({
+    id: candidate.id,
+    name: candidate.name,
+    employeeId: candidate.employeeId,
+    department: candidate.department,
+    role: 'editor',
+  })
+  addSelectedUser.value = ''
+  addOpen.value = false
+  ElMessage.success('已添加編輯者')
+}
+
+function confirmTransfer() {
+  if (!canManageReportEditors.value) {
+    shareOpen.value = false
+    return
+  }
+
+  const targetId = transferSelectedUser.value
+  if (!targetId) {
+    shareOpen.value = false
+    return
+  }
+
+  const currentInitiator = editors.value.find((editor) => editor.role === 'initiator')
+  let target = editors.value.find((editor) => editor.id === targetId)
+
+  if (!target) {
+    const umsUser = MOCK_UMS_EDITOR_USERS.find((user) => user.id === targetId)
+    if (!umsUser) {
+      shareOpen.value = false
+      return
+    }
+    target = {
+      id: umsUser.id,
+      name: umsUser.name,
+      employeeId: umsUser.employeeId,
+      department: umsUser.department,
+      role: 'editor',
+    }
+    editors.value.push(target)
+  }
+
+  if (currentInitiator) {
+    currentInitiator.role = 'editor'
+  }
+  target.role = 'initiator'
+
+  transferSelectedUser.value = ''
+  shareOpen.value = false
+  ElMessage.success('已轉移報告發起人權限')
+}
+
+watch(panelOpen, (open) => {
+  if (!open) closeAllOverlays()
+})
+
+let sectionResizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  void nextTick(() => {
+    syncPopoverWidth()
+    const sectionEl = sectionRef.value?.rootRef
+    if (sectionEl) {
+      sectionResizeObserver = new ResizeObserver(() => syncPopoverWidth())
+      sectionResizeObserver.observe(sectionEl)
+    }
+  })
+  window.addEventListener('resize', syncPopoverWidth)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncPopoverWidth)
+  sectionResizeObserver?.disconnect()
+})
+</script>
+
+<style scoped>
+.report-editor-panel {
+  box-sizing: border-box;
+}
+
+.report-editor-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  max-height: calc(36px * 20);
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #999 transparent;
+}
+
+.report-editor-list::-webkit-scrollbar {
+  width: 3px !important;
+  height: 8px !important;
+}
+
+.report-editor-list::-webkit-scrollbar-track {
+  background: transparent !important;
+}
+
+.report-editor-list::-webkit-scrollbar-thumb {
+  width: 3px !important;
+  min-height: 8px !important;
+  border-radius: 4px;
+  background-color: #999 !important;
+}
+
+.report-editor-list::-webkit-scrollbar-corner {
+  background: transparent !important;
+}
+
+.report-editor-list__row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto 24px;
+  align-items: center;
+  gap: 10px;
+  height: 36px;
+  padding: 0 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #303133;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.report-editor-list__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.report-editor-list__dept,
+.report-editor-list__role {
+  white-space: nowrap;
+  color: #303133;
+}
+
+.report-editor-list__action {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.report-source-transfer__title {
+  margin: 0 0 12px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.report-source-transfer__field {
+  display: grid;
+  gap: 6px;
+}
+
+.report-source-transfer__label {
+  font-size: 13px;
+  color: #909399;
+}
+
+.report-source-transfer__select {
+  width: 100%;
+}
+
+.report-source-transfer__select :deep(.el-select__wrapper) {
+  min-height: 32px;
+}
+
+.report-source-transfer__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.report-source-transfer__btn {
+  min-width: 72px;
+  padding: 6px 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 12px;
+  color: #606266;
+  cursor: pointer;
+}
+
+.report-source-transfer__btn--primary {
+  border-color: #c53355;
+  background: #c53355;
+  color: #fff;
+}
+
+.report-source-transfer__btn--primary:hover {
+  background: #fff;
+  color: #c53355;
+}
+</style>
+
+<style>
+/* 編輯者列表滾動條強制尺寸（避免 scoped 未生效） */
+.report-editor-list::-webkit-scrollbar {
+  width: 3px !important;
+  height: 8px !important;
+}
+
+.report-editor-list::-webkit-scrollbar-track {
+  background: transparent !important;
+}
+
+.report-editor-list::-webkit-scrollbar-thumb {
+  width: 3px !important;
+  min-height: 8px !important;
+  border-radius: 4px;
+  background-color: #999 !important;
+}
+
+.report-editor-list::-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;
+}
+
+.report-config-popover.el-popover.el-popper {
+  max-width: 100%;
+  padding: 12px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.report-config-popover.el-popper[data-popper-placement^='bottom'] .el-popper__arrow {
+  left: var(--report-config-arrow-left) !important;
+  right: auto !important;
+  top: -6px !important;
+  transform: translateX(-50%) !important;
+}
+
+.report-config-popover.el-popper[data-popper-placement^='bottom'] .el-popper__arrow::before {
+  bottom: -1px;
+}
+
+.report-config-popover-fade-enter-active,
+.report-config-popover-fade-leave-active {
+  transition: opacity 0.12s ease;
+}
+
+.report-config-popover-fade-enter-from,
+.report-config-popover-fade-leave-to {
+  opacity: 0;
+}
+
+.report-config-popover-instant-enter-active,
+.report-config-popover-instant-leave-active {
+  transition: none !important;
+}
+
+.report-config-popover-instant-enter-from,
+.report-config-popover-instant-leave-to {
+  opacity: 0;
+}
+</style>