aegon-dangerious 1.0.0

package/build-report/components/ReportPromptPanel.vue

@@ -0,0 +1,445 @@
+<template>
+  <aside class="report-prompt-panel" :class="{ 'is-compact': !promptOpen && !historyOpen }">
+    <ReportCollapsibleSection v-model:open="promptOpen" title="Prompt">
+      <div class="report-prompt-panel__content">
+        <div class="report-prompt-panel__prompt">
+          <PromptField
+            v-model="promptChapterForm.prompt"
+            label="Prompt"
+            layout="stack"
+            :required="false"
+            :rows="8"
+            min-height="180px"
+            :maxlength="1300"
+            :disabled="!chapterEditMode"
+          />
+        </div>
+
+        <div class="report-prompt-panel__options">
+          <label class="report-prompt-panel__option report-prompt-panel__option--inline">
+            <input
+              v-model="promptChapterForm.enableBodyContent"
+              type="checkbox"
+              class="report-prompt-panel__checkbox"
+              :disabled="!chapterEditMode"
+            />
+            <span class="report-prompt-panel__option-label">正文內容</span>
+            <input
+              v-model.number="promptChapterForm.bodyWordLimit"
+              type="number"
+              class="report-prompt-panel__number-input"
+              :disabled="!chapterEditMode || !promptChapterForm.enableBodyContent"
+              min="1"
+              max="5000"
+            />
+            <span class="report-prompt-panel__option-suffix">字以內</span>
+          </label>
+
+          <div class="report-prompt-panel__option-group">
+            <div class="report-prompt-panel__option-header">
+              <label class="report-prompt-panel__option">
+                <input
+                  v-model="promptChapterForm.enableTable"
+                  type="checkbox"
+                  class="report-prompt-panel__checkbox"
+                  :disabled="!chapterEditMode"
+                />
+                <span class="report-prompt-panel__option-label">生成表格</span>
+              </label>
+              <button
+                type="button"
+                class="report-prompt-panel__fold-toggle"
+                aria-label="展開或收起生成設置"
+                @click="optionsDetailsOpen = !optionsDetailsOpen"
+              >
+                <span class="report-prompt-panel__fold-arrow" :class="{ 'is-open': optionsDetailsOpen }" aria-hidden="true" />
+              </button>
+            </div>
+
+            <div v-show="optionsDetailsOpen" class="report-prompt-panel__details">
+              <div v-if="promptChapterForm.enableTable" class="report-prompt-panel__nested">
+                <label class="report-prompt-panel__field">
+                  <span class="report-prompt-panel__field-label">表格標題</span>
+                  <el-input
+                    v-model="promptChapterForm.tableTitle"
+                    class="report-prompt-panel__input"
+                    placeholder="請輸入表格名稱"
+                    :disabled="!chapterEditMode"
+                  />
+                </label>
+                <label class="report-prompt-panel__field">
+                  <span class="report-prompt-panel__field-label">列標籤</span>
+                  <el-input
+                    v-model="promptChapterForm.tableRowLabels"
+                    type="textarea"
+                    :rows="3"
+                    resize="none"
+                    class="report-prompt-panel__textarea"
+                    :disabled="!chapterEditMode"
+                  />
+                </label>
+                <label class="report-prompt-panel__field">
+                  <span class="report-prompt-panel__field-label">欄標籤</span>
+                  <el-input
+                    v-model="promptChapterForm.tableColumnLabels"
+                    type="textarea"
+                    :rows="3"
+                    resize="none"
+                    class="report-prompt-panel__textarea"
+                    :disabled="!chapterEditMode"
+                  />
+                </label>
+                <label class="report-prompt-panel__field">
+                  <span class="report-prompt-panel__field-label">內容</span>
+                  <el-input
+                    v-model="promptChapterForm.tableContent"
+                    type="textarea"
+                    :rows="3"
+                    resize="none"
+                    class="report-prompt-panel__textarea"
+                    :disabled="!chapterEditMode"
+                  />
+                </label>
+              </div>
+
+              <div class="report-prompt-panel__option-group report-prompt-panel__option-group--nested">
+                <label class="report-prompt-panel__option">
+                  <input
+                    v-model="promptChapterForm.enableSourceChart"
+                    type="checkbox"
+                    class="report-prompt-panel__checkbox"
+                    :disabled="!chapterEditMode"
+                  />
+                  <span class="report-prompt-panel__option-label">引用資訊源圖表</span>
+                </label>
+
+                <div v-if="promptChapterForm.enableSourceChart" class="report-prompt-panel__nested">
+                  <label class="report-prompt-panel__field">
+                    <span class="report-prompt-panel__field-label">圖表描述</span>
+                    <el-input
+                      v-model="promptChapterForm.chartDescription"
+                      type="textarea"
+                      :rows="4"
+                      resize="none"
+                      class="report-prompt-panel__textarea"
+                      :disabled="!chapterEditMode"
+                    />
+                  </label>
+                </div>
+              </div>
+
+              <div class="report-prompt-panel__actions">
+                <button type="button" class="app-btn app-btn--wide" @click="handleGenerateChapter">
+                  生成章節內容
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ReportCollapsibleSection>
+
+    <ReportCollapsibleSection v-model:open="historyOpen" title="章節歷史">
+      <ReportHistoryList
+        v-model:active-key="activeChapterHistoryKey"
+        :items="chapterHistory"
+        :show-title="false"
+      />
+    </ReportCollapsibleSection>
+  </aside>
+</template>
+
+<script lang="ts">
+export interface PromptLibraryItem {
+  id: string
+  label: string
+  content: string
+}
+
+export const MOCK_PROMPT_LIBRARY: PromptLibraryItem[] = [
+  {
+    id: 'p1',
+    label: '風險摘要',
+    content: '請以風控經理視角，用 3 段話概括本章核心風險與管控重點。',
+  },
+  {
+    id: 'p2',
+    label: '數據解讀',
+    content: '結合已引用資料，解讀關鍵指標同比/環比變化，並指出異常波動原因。',
+  },
+  {
+    id: 'p3',
+    label: '政策影響',
+    content: '分析近期監管與政策變化對本行授信策略的潛在影響。',
+  },
+  {
+    id: 'p4',
+    label: '行動建議',
+    content: '給出可執行的風險管控建議，包含責任部門與跟進時限。',
+  },
+]
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ElInput, ElMessage } from 'element-plus'
+import PromptField from './PromptField.vue'
+import ReportHistoryList, {
+  type ReportHistoryItem,
+} from './ReportHistoryList.vue'
+import ReportCollapsibleSection from './ReportCollapsibleSection.vue'
+import { useReportWorkflow } from '../useReportWorkflow'
+
+const { promptChapterForm, chapterEditMode } = useReportWorkflow()
+
+const promptOpen = ref(true)
+const historyOpen = ref(true)
+const optionsDetailsOpen = ref(false)
+
+const chapterHistory = ref<ReportHistoryItem[]>([
+  { key: 'history-final', title: '定稿版本', author: '陳大文', time: '15min前' },
+  { key: 'history-v2', title: 'V2', author: '陳大文', time: '15min前' },
+])
+const activeChapterHistoryKey = ref('history-final')
+
+function handleGenerateChapter() {
+  if (!promptChapterForm.prompt.trim()) {
+    ElMessage.warning('請先填寫 Prompt')
+    return
+  }
+  console.log('generate chapter content', { ...promptChapterForm })
+  ElMessage.success('章節內容生成中')
+}
+</script>
+
+<style scoped>
+.report-prompt-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+  height: 100%;
+  box-sizing: border-box;
+  overflow: visible;
+}
+
+.report-prompt-panel.is-compact {
+  height: auto;
+  align-self: flex-start;
+}
+
+.report-prompt-panel > :deep(.report-collapsible-section:last-child:not(.is-collapsed)) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.report-prompt-panel > :deep(.report-collapsible-section:last-child:not(.is-collapsed) .report-collapsible-section__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.report-prompt-panel :deep(.report-collapsible-section__toggle) {
+  border-bottom: none;
+}
+
+.report-prompt-panel :deep(.report-collapsible-section.is-collapsed .report-collapsible-section__toggle) {
+  padding-bottom: 0;
+}
+
+.report-prompt-panel__content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.report-prompt-panel__prompt :deep(.gen-ai-prompt-field__label) {
+  display: none;
+}
+
+.report-prompt-panel__prompt :deep(.gen-ai-prompt-field--row) {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.report-prompt-panel__prompt :deep(.gen-ai-prompt-field__count) {
+  margin-top: 2px;
+}
+
+.report-prompt-panel__options {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.report-prompt-panel__option-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.report-prompt-panel__option-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-width: 0;
+}
+
+.report-prompt-panel__fold-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+.report-prompt-panel__fold-arrow {
+  display: inline-block;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 7px solid #c53355;
+  transition: transform 0.2s ease;
+}
+
+.report-prompt-panel__fold-arrow.is-open {
+  transform: rotate(180deg);
+}
+
+.report-prompt-panel__option {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.report-prompt-panel__option--inline {
+  flex-wrap: wrap;
+}
+
+.report-prompt-panel__checkbox {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  accent-color: #c53355;
+  flex-shrink: 0;
+}
+
+.report-prompt-panel__option-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: #303133;
+}
+
+.report-prompt-panel__option-suffix {
+  font-size: 13px;
+  color: #606266;
+}
+
+.report-prompt-panel__number-input {
+  width: 64px;
+  height: 28px;
+  padding: 2px 8px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 13px;
+  color: #303133;
+  box-sizing: border-box;
+}
+
+.report-prompt-panel__number-input:disabled {
+  background: #f5f7fa;
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+.report-prompt-panel__nested {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.report-prompt-panel__details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.report-prompt-panel__option-group--nested {
+  margin-top: 0;
+}
+
+.report-prompt-panel__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.report-prompt-panel__field-label {
+  font-size: 13px;
+  color: #606266;
+}
+
+.report-prompt-panel__input :deep(.el-input__wrapper),
+.report-prompt-panel__textarea :deep(.el-textarea__inner) {
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.report-prompt-panel__textarea :deep(.el-textarea__inner) {
+  min-height: 72px;
+  line-height: 1.6;
+}
+
+.report-prompt-panel__actions {
+  display: flex;
+  justify-content: center;
+  padding-top: 8px;
+}
+
+.app-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 160px;
+  height: 39px;
+  min-width: 160px;
+  padding: 0;
+  border: 1px solid #c53355;
+  border-radius: 4px;
+  background: #c53355;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.app-btn:hover:not(:disabled) {
+  background: #fff;
+  color: #c53355;
+}
+
+.app-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.app-btn--wide {
+  width: 160px;
+  min-width: 160px;
+}
+</style>

package/build-report/components/ReportSectionConfirmPopover.vue

@@ -0,0 +1,232 @@
+<template>
+  <el-popover :visible="visible" :virtual-ref="virtualRef" placement="bottom-start" :width="popoverWidth"
+    :popper-options="popperOptions" :popper-style="popperStyle" popper-class="report-config-popover"
+    :transition="instant ? 'report-config-popover-instant' : 'report-config-popover-fade'" :gpu-acceleration="false"
+    :teleported="true">
+    <div class="report-section-confirm">
+      <h4 class="report-section-confirm__title">{{ title }}</h4>
+      <p class="report-section-confirm__message">{{ message }}</p>
+      <div class="report-section-confirm__actions">
+        <button type="button" class="report-section-confirm__btn" @click="emit('cancel')">取消</button>
+        <button type="button" class="report-section-confirm__btn report-section-confirm__btn--primary"
+          @click="emit('confirm')">
+          確認
+        </button>
+      </div>
+    </div>
+  </el-popover>
+</template>
+
+<script setup lang="ts">
+import { ElPopover } from 'element-plus'
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean
+    virtualRef: HTMLElement | null
+    boundaryEl: HTMLElement | null
+    triggerBtn?: HTMLElement | null
+    title?: string
+    message: string
+    instant?: boolean
+  }>(),
+  {
+    title: '確認刪除',
+    triggerBtn: null,
+    instant: false,
+  },
+)
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
+const popoverWidthPx = ref(240)
+const arrowAlignKey = ref(0)
+const popoverWidth = computed(() => popoverWidthPx.value)
+
+function getSectionContentInsets() {
+  if (!props.boundaryEl) return { paddingLeft: 0, contentWidth: 240 }
+  const styles = getComputedStyle(props.boundaryEl)
+  const paddingLeft = parseFloat(styles.paddingLeft)
+  const paddingRight = parseFloat(styles.paddingRight)
+  return {
+    paddingLeft,
+    contentWidth: Math.round(props.boundaryEl.clientWidth - paddingLeft - paddingRight),
+  }
+}
+
+function getHorizontalSkid(): number {
+  if (!props.virtualRef || !props.boundaryEl) return 0
+  const { paddingLeft } = getSectionContentInsets()
+  const sectionRect = props.boundaryEl.getBoundingClientRect()
+  const anchorRect = props.virtualRef.getBoundingClientRect()
+  return Math.round(sectionRect.left + paddingLeft - anchorRect.left)
+}
+
+function syncLayout() {
+  if (!props.boundaryEl) return
+  const { contentWidth } = getSectionContentInsets()
+  popoverWidthPx.value = contentWidth
+  arrowAlignKey.value += 1
+}
+
+const popperStyle = computed(() => {
+  void arrowAlignKey.value
+  const sectionEl = props.boundaryEl
+  const triggerBtn = props.triggerBtn ?? props.virtualRef
+  if (!triggerBtn || !sectionEl) return {}
+  const sectionRect = sectionEl.getBoundingClientRect()
+  const { paddingLeft } = getSectionContentInsets()
+  const btnRect = triggerBtn.getBoundingClientRect()
+  const popperLeft = sectionRect.left + paddingLeft
+  const left = btnRect.left + btnRect.width / 2 - popperLeft - 8
+  return { '--report-config-arrow-left': `${left}px` }
+})
+
+const popperOptions = computed(() => {
+  void arrowAlignKey.value
+  return {
+    modifiers: [
+      {
+        name: 'preventOverflow',
+        options: {
+          boundary: props.boundaryEl ?? 'viewport',
+          padding: 0,
+          altAxis: true,
+        },
+      },
+      {
+        name: 'flip',
+        enabled: false,
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [getHorizontalSkid(), 8],
+        },
+      },
+    ],
+  }
+})
+
+watch(
+  () => props.visible,
+  (open) => {
+    if (open) {
+      syncLayout()
+      void nextTick(() => {
+        arrowAlignKey.value += 1
+      })
+    }
+  },
+)
+
+watch(() => props.boundaryEl, () => syncLayout())
+
+watch(() => props.virtualRef, () => syncLayout())
+
+let resizeObserver: ResizeObserver | null = null
+
+onMounted(() => {
+  syncLayout()
+  if (props.boundaryEl) {
+    resizeObserver = new ResizeObserver(() => syncLayout())
+    resizeObserver.observe(props.boundaryEl)
+  }
+  window.addEventListener('resize', syncLayout)
+})
+
+onUnmounted(() => {
+  resizeObserver?.disconnect()
+  window.removeEventListener('resize', syncLayout)
+})
+</script>
+
+<style scoped>
+.report-section-confirm__title {
+  margin: 0 0 8px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #303133;
+}
+
+.report-section-confirm__message {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: #606266;
+  word-break: break-word;
+}
+
+.report-section-confirm__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.report-section-confirm__btn {
+  min-width: 72px;
+  padding: 6px 10px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  font-size: 12px;
+  color: #606266;
+  cursor: pointer;
+}
+
+.report-section-confirm__btn--primary {
+  border-color: #c53355;
+  background: #c53355;
+  color: #fff;
+}
+
+.report-section-confirm__btn--primary:hover {
+  background: #fff;
+  color: #c53355;
+}
+</style>
+
+<style>
+.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>