aegon-lv82 1.0.0

package/src/views/gen-ai/components/ReportHistoryList.vue

@@ -0,0 +1,637 @@
+<template>
+  <div ref="listRootRef" class="report-history-list" :class="{ 'is-embedded': !showTitle }">
+    <div v-if="showTitle" class="report-history-list__title">{{ title }}</div>
+    <div class="report-history-list__items">
+      <div
+        v-for="item in items"
+        :key="item.key"
+        class="report-history-list__row"
+        :class="{
+          'is-active': item.key === activeKey,
+          'is-draft': item.kind === 'draft',
+        }"
+        @click="handleSelect(item)"
+      >
+        <span class="report-history-list__indicator" aria-hidden="true" />
+        <div class="report-history-list__item">
+          <!-- 存為草稿：首行提示卡片 + 淺色繼續編輯 / 刪除 -->
+          <template v-if="item.kind === 'draft'">
+            <div class="report-history-list__draft-body">
+              <div class="report-history-list__draft-title">{{ item.title }}</div>
+              <div class="report-history-list__draft-actions" @click.stop>
+                <button
+                  type="button"
+                  class="report-history-list__draft-btn"
+                  @click="emit('continue-draft', item)"
+                >
+                  繼續編輯
+                </button>
+                <button
+                  type="button"
+                  class="report-history-list__draft-btn"
+                  @click="handleDelete(item)"
+                >
+                  刪除
+                </button>
+              </div>
+            </div>
+          </template>
+
+          <template v-else>
+            <div class="report-history-list__body">
+              <div class="report-history-list__item-title">
+                {{ item.title }}
+              </div>
+              <div class="report-history-list__meta">
+                <span class="report-history-list__author">{{ item.author }}</span>
+                <span class="report-history-list__time">{{
+                  formatHistoryTime(item.finalizedAt)
+                }}</span>
+              </div>
+            </div>
+
+            <div class="report-history-list__item-trailing">
+              <button
+                v-if="editable"
+                type="button"
+                class="report-history-list__menu"
+                aria-label="重命名"
+                @click.stop="openRenamePopover(item, $event)"
+              >
+                <span class="report-history-list__menu-dots" aria-hidden="true">⋮</span>
+              </button>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <!-- 點擊 … 直接彈出重命名：寬度同章節歷史，位於當前行下方 -->
+    <el-popover
+      :visible="renamePopoverVisible"
+      virtual-triggering
+      :virtual-ref="renameVirtualRef"
+      placement="bottom-start"
+      :width="renamePopoverWidth"
+      :show-arrow="false"
+      :teleported="true"
+      :popper-options="renamePopperOptions"
+      popper-class="report-history-rename-popper"
+      :gpu-acceleration="false"
+      @update:visible="onRenamePopoverVisible"
+    >
+      <div class="report-history-rename-panel" @click.stop>
+        <div class="report-history-rename-panel__title">重命名</div>
+        <el-input
+          ref="renameTextareaRef"
+          v-model="renameDraft"
+          type="textarea"
+          :rows="renameTextareaRows"
+          maxlength="50"
+          show-word-limit
+          resize="none"
+          class="report-history-rename-panel__textarea"
+          @keydown.esc.stop="cancelRename"
+        />
+        <div class="report-history-rename-panel__actions">
+          <el-button class="report-history-rename-panel__btn" @click="handleDeleteFromRename">
+            <el-icon :size="14"><CloseBold /></el-icon>
+            <span>刪除</span>
+          </el-button>
+          <el-button
+            class="report-history-rename-panel__btn report-history-rename-panel__btn--primary"
+            @click="confirmRename"
+          >
+            <el-icon :size="14"><Select /></el-icon>
+            <span>確認</span>
+          </el-button>
+        </div>
+      </div>
+    </el-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { CloseBold, Select } from '@element-plus/icons-vue'
+import { ElButton, ElIcon, ElInput, ElMessage, ElMessageBox, ElPopover } from 'element-plus'
+import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { formatReportHistoryTime } from '../build-report/report-domain'
+
+export interface ReportHistoryItem {
+  key: string
+  title: string
+  author: string
+  finalizedAt: string
+  recordId?: string
+  kind?: 'draft' | 'history'
+}
+
+const props = withDefaults(
+  defineProps<{
+    title?: string
+    items: ReportHistoryItem[]
+    activeKey?: string
+    showTitle?: boolean
+    editable?: boolean
+  }>(),
+  {
+    title: '報告歷史',
+    activeKey: '',
+    showTitle: true,
+    editable: false,
+  }
+)
+
+const emit = defineEmits<{
+  'update:activeKey': [key: string]
+  'update:items': [items: ReportHistoryItem[]]
+  select: [item: ReportHistoryItem]
+  'continue-draft': [item: ReportHistoryItem]
+  /** 重命名彈窗點確認（由父組件調接口後再 update:items） */
+  'rename-confirm': [payload: { key: string; title: string }]
+  /** 重命名彈窗「刪除」或草稿卡刪除（由父組件調 deleteSectionVersion） */
+  'delete-confirm': [payload: { key: string }]
+}>()
+
+const now = ref(Date.now())
+const listRootRef = ref<HTMLElement | null>(null)
+const renameVirtualRef = ref<HTMLElement | null>(null)
+const renamingItem = ref<ReportHistoryItem | null>(null)
+const renameDraft = ref('')
+const renamePopoverWidth = ref(280)
+const renameTextareaRows = ref(3)
+const renameTextareaRef = ref<InstanceType<typeof ElInput> | null>(null)
+const renameOffsetKey = ref(0)
+let timeRefreshTimer: number | null = null
+
+const renamePopoverVisible = computed(() => !!renamingItem.value)
+
+const renamePopperOptions = computed(() => {
+  void renameOffsetKey.value
+  const list = listRootRef.value
+  const anchor = renameVirtualRef.value
+  let skid = 0
+  if (list && anchor) {
+    const listRect = list.getBoundingClientRect()
+    const anchorRect = anchor.getBoundingClientRect()
+    skid = Math.round(listRect.left - anchorRect.left)
+  }
+  return {
+    modifiers: [
+      {
+        name: 'offset',
+        options: { offset: [skid, 8] },
+      },
+      {
+        name: 'flip',
+        enabled: false,
+      },
+    ],
+  }
+})
+
+onMounted(() => {
+  timeRefreshTimer = window.setInterval(() => {
+    now.value = Date.now()
+  }, 30_000)
+})
+
+onUnmounted(() => {
+  if (timeRefreshTimer) window.clearInterval(timeRefreshTimer)
+})
+
+function formatHistoryTime(finalizedAt: string) {
+  return formatReportHistoryTime(finalizedAt, now.value)
+}
+
+function handleSelect(item: ReportHistoryItem) {
+  if (renamingItem.value) return
+  emit('update:activeKey', item.key)
+  emit('select', item)
+}
+
+function syncRenamePopoverWidth() {
+  const list = listRootRef.value
+  if (!list) return
+  renamePopoverWidth.value = Math.max(200, list.clientWidth)
+  // 按實際寬度估算：剛好放下 50 個漢字的行數
+  const contentW = renamePopoverWidth.value - 48
+  const charsPerLine = Math.max(8, Math.floor(contentW / 13))
+  renameTextareaRows.value = Math.max(2, Math.ceil(50 / charsPerLine))
+  renameOffsetKey.value += 1
+}
+
+async function openRenamePopover(item: ReportHistoryItem, event: MouseEvent) {
+  const trigger = event.currentTarget as HTMLElement | null
+  const row = trigger?.closest('.report-history-list__row') as HTMLElement | null
+  const itemEl = row?.querySelector('.report-history-list__item') as HTMLElement | null
+  renameVirtualRef.value = itemEl ?? row
+  renamingItem.value = item
+  renameDraft.value = item.title
+  // 點擊 … 聯動選中背景
+  emit('update:activeKey', item.key)
+  emit('select', item)
+  syncRenamePopoverWidth()
+  await nextTick()
+  syncRenamePopoverWidth()
+  renameTextareaRef.value?.focus()
+}
+
+function cancelRename() {
+  renamingItem.value = null
+  renameDraft.value = ''
+  renameVirtualRef.value = null
+}
+
+function onRenamePopoverVisible(visible: boolean) {
+  if (!visible) cancelRename()
+}
+
+function confirmRename() {
+  const item = renamingItem.value
+  if (!item) return
+  const nextTitle = renameDraft.value.trim()
+  if (!nextTitle) {
+    ElMessage.warning('名稱不能為空')
+    return
+  }
+
+  // 交由父組件調用 updateSectionVersionName，成功後再回寫 items
+  emit('rename-confirm', { key: item.key, title: nextTitle.slice(0, 50) })
+  cancelRename()
+}
+
+/** 重命名彈窗左側「刪除」→ 刪除當前 card 對應版本 */
+async function handleDeleteFromRename() {
+  const item = renamingItem.value
+  if (!item) return
+  await handleDelete(item)
+}
+
+async function handleDelete(item: ReportHistoryItem) {
+  const isDraft = item.kind === 'draft'
+  try {
+    await ElMessageBox.confirm(
+      isDraft ? '確定刪除此草稿？' : `確定刪除「${item.title}」？`,
+      '確認刪除',
+      {
+        confirmButtonText: '刪除',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+    )
+  } catch {
+    return
+  }
+
+  if (renamingItem.value?.key === item.key) {
+    cancelRename()
+  }
+
+  // 交由父組件調用 deleteSectionVersion，成功後再刷新列表
+  emit('delete-confirm', { key: item.key })
+}
+</script>
+
+<style scoped>
+.report-history-list {
+  --history-row-h: 62px;
+  --history-row-gap: 6px;
+  border-top: 1px solid #f0f0f0;
+  padding-top: 20px;
+}
+
+.report-history-list.is-embedded {
+  border-top: none;
+  padding-top: 0;
+}
+
+.report-history-list__title {
+  font-size: 15px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+  margin-bottom: 12px;
+}
+
+.report-history-list__items {
+  display: flex;
+  flex-direction: column;
+  gap: var(--history-row-gap);
+  max-height: calc(var(--history-row-h) * 20 + var(--history-row-gap) * 19);
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #999 transparent;
+}
+
+.report-history-list__row {
+  display: grid;
+  grid-template-columns: 4px minmax(0, 1fr);
+  column-gap: 0;
+  align-items: stretch;
+  cursor: pointer;
+}
+
+.report-history-list__indicator {
+  width: 4px;
+  border-radius: 2px;
+  background: transparent;
+  align-self: stretch;
+  margin-block: 12px;
+  min-height: 0;
+  transition: background 0.15s;
+}
+
+.report-history-list__row.is-active .report-history-list__indicator {
+  background: #c53355;
+}
+
+.report-history-list__row.is-draft {
+  grid-template-columns: minmax(0, 1fr);
+  column-gap: 0;
+}
+
+.report-history-list__row.is-draft .report-history-list__indicator {
+  display: none;
+}
+
+.report-history-list__row.is-draft.is-active .report-history-list__indicator {
+  background: transparent;
+}
+
+.report-history-list__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 8px;
+  border-radius: 12px;
+  transition: background 0.15s;
+  min-width: 0;
+}
+
+.report-history-list__item-trailing {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.report-history-list__row.is-active .report-history-list__item {
+  background: #fdf0f3;
+}
+
+.report-history-list__row.is-draft .report-history-list__item {
+  background: #fff5f7;
+}
+
+.report-history-list__row.is-draft.is-active .report-history-list__item {
+  background: #fdf0f3;
+}
+
+.report-history-list__row:not(.is-active):hover .report-history-list__item {
+  background: #fafafa;
+}
+
+.report-history-list__row.is-draft:not(.is-active):hover .report-history-list__item {
+  background: #fff0f3;
+}
+
+.report-history-list__draft-body {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+  width: 100%;
+  min-width: 0;
+}
+
+.report-history-list__draft-title {
+  width: 100%;
+  min-width: 0;
+  /* 與定稿版本（.report-history-list__item-title）字體一致 */
+  font-size: 15px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-synthesis: none;
+  color: #c53355;
+  line-height: 1.4;
+  letter-spacing: normal;
+}
+
+.report-history-list__draft-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.report-history-list__draft-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 4px;
+  border: 1px solid #f0c2cc;
+  background: #fdf0f2;
+  color: #c53355;
+  /* 與定稿版本標題同字族／字重 */
+  font-size: 15px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-synthesis: none;
+  line-height: 1;
+  letter-spacing: normal;
+  cursor: pointer;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.report-history-list__draft-btn:hover {
+  background: #fff;
+  border-color: #c53355;
+}
+
+.report-history-list__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.report-history-list__item-title {
+  font-size: 15px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-synthesis: none;
+  color: #303133;
+  line-height: 1.4;
+  letter-spacing: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.report-history-list__meta {
+  margin-top: 2px;
+  color: #999;
+  font-size: 12px;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.report-history-list__author {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.report-history-list__time {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.report-history-list__menu {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  width: 20px;
+  min-height: 36px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #1a1a1a;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.report-history-list__row:hover .report-history-list__menu,
+.report-history-list__row.is-active .report-history-list__menu {
+  color: #c53355;
+}
+
+.report-history-list__menu-dots {
+  display: block;
+  font-size: 26px;
+  font-weight: 900;
+  line-height: 1;
+  transform: translateY(-1px);
+}
+</style>
+
+<style>
+/* teleported popover：與章節歷史同寬，掛在當前行下方 */
+.report-history-rename-popper.el-popover.el-popper {
+  padding: 14px 16px;
+  border: 1px solid #ebeef5;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  box-sizing: border-box;
+}
+
+.report-history-rename-panel__title {
+  margin: 0 0 12px;
+  font-size: 15px;
+  font-weight: 500;
+  color: #303133;
+  line-height: 1.4;
+}
+
+.report-history-rename-panel__textarea {
+  width: 100%;
+}
+
+.report-history-rename-panel__textarea .el-textarea__inner {
+  font-size: 13px;
+  line-height: 1.5;
+  color: #303133;
+  overflow-y: auto;
+  box-shadow: 0 0 0 1px #dcdfe6 inset;
+  /* 與章節下拉 el-scrollbar 同款：寬 8px、滑塊高 50px */
+  scrollbar-width: thin;
+  scrollbar-color: #999 transparent;
+}
+
+.report-history-rename-panel__textarea .el-textarea__inner:hover {
+  box-shadow: 0 0 0 1px #c0c4cc inset;
+}
+
+.report-history-rename-panel__textarea .el-textarea__inner:focus {
+  box-shadow: 0 0 0 1px #c53355 inset;
+}
+
+.report-history-rename-panel__textarea .el-textarea__inner::-webkit-scrollbar {
+  width: 8px;
+}
+
+.report-history-rename-panel__textarea .el-textarea__inner::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.report-history-rename-panel__textarea .el-textarea__inner::-webkit-scrollbar-thumb {
+  min-height: 50px;
+  border-radius: 4px;
+  background-color: #999;
+}
+
+.report-history-rename-panel__actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.report-history-rename-panel__btn.el-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  height: 32px;
+  padding: 0 14px;
+  margin: 0;
+}
+
+.report-history-rename-panel__btn--primary.el-button {
+  --el-button-bg-color: #c53355;
+  --el-button-border-color: #c53355;
+  --el-button-hover-bg-color: #a82a47;
+  --el-button-hover-border-color: #a82a47;
+  --el-button-active-bg-color: #a82a47;
+  --el-button-active-border-color: #a82a47;
+  color: #fff;
+  background: #c53355;
+  border-color: #c53355;
+}
+
+.report-history-rename-panel__btn--primary.el-button:hover,
+.report-history-rename-panel__btn--primary.el-button:focus {
+  color: #fff;
+  background: #a82a47;
+  border-color: #a82a47;
+}
+
+/* 章節歷史 / 報告歷史：超過 20 條後垂直滾動條強制 寬 3px、高 8px */
+.report-history-list__items::-webkit-scrollbar {
+  width: 3px;
+  height: 8px;
+}
+
+.report-history-list__items::-webkit-scrollbar-thumb {
+  background: #999;
+  border-radius: 999px;
+}
+
+.report-history-list__items::-webkit-scrollbar-track {
+  background: transparent;
+}
+</style>