aegon-dangerious 1.0.0

package/build-report/components/ReportGenerateSettingsPanel.vue

@@ -0,0 +1,403 @@
+<template>
+  <aside class="chatbot-report-panel chatbot-report-panel--settings">
+    <div class="chatbot-report-panel__body">
+      <ReportCollapsibleSection v-model:open="settingsOpen" title="生成報告設置">
+        <div class="chatbot-report-settings__content">
+          <div class="chatbot-report-chapter-select">
+            <div class="chatbot-report-chapter-header">
+              <span class="chatbot-report-chapter-header__title">選擇章節及版本</span>
+              <div class="chatbot-report-chapter-header__all" @click="toggleAllChapters">
+                <CheckMark :checked="allChaptersSelected" />
+                <span>全部章節</span>
+              </div>
+            </div>
+            <div class="chatbot-report-chapter-list">
+              <div
+                v-for="preset in orderedPresets"
+                :key="preset.key"
+                class="chatbot-report-chapter-row"
+                :class="{
+                  'is-dragging': dragChapterKey === preset.key,
+                  'is-drag-over': dragOverChapterKey === preset.key,
+                }"
+                draggable="true"
+                @dragstart="onChapterDragStart($event, preset.key)"
+                @dragend="handleChapterDragEnd"
+                @dragover.prevent="dragOverChapterKey = preset.key"
+                @drop="handleChapterDrop(preset.key)"
+              >
+                <CheckMark
+                  :checked="!!selectedChapters[preset.key]"
+                  @click.stop="toggleChapter(preset.key)"
+                  @mousedown.stop
+                  @dragstart.prevent
+                />
+                <span class="chatbot-report-chapter-row__label">{{ preset.label }}</span>
+                <select
+                  class="chatbot-report-chapter-row__version"
+                  :value="chapterVersions[preset.key]"
+                  @change="chapterVersions[preset.key] = ($event.target as HTMLSelectElement).value"
+                  @click.stop
+                  @mousedown.stop
+                >
+                  <option v-for="version in CHAPTER_VERSIONS" :key="version" :value="version">{{ version }}</option>
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <div class="chatbot-report-section-title chatbot-report-section-title--settings">生成報告方式</div>
+          <el-radio-group v-model="reportMode" class="chatbot-report-radio-group">
+            <el-radio value="polish">拼裝並潤色</el-radio>
+            <el-radio value="rewrite">重寫整篇報告</el-radio>
+          </el-radio-group>
+
+          <el-button class="chatbot-report-generate-btn" :disabled="!hasSelectedChapters" @click="handleGenerate">
+            生成報告
+          </el-button>
+        </div>
+      </ReportCollapsibleSection>
+    </div>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { ElButton, ElRadio, ElRadioGroup } from 'element-plus'
+import { computed, defineComponent, h, ref, watch } from 'vue'
+import ReportCollapsibleSection from './ReportCollapsibleSection.vue'
+import { useReportWorkflow } from '../useReportWorkflow'
+
+const CHAPTER_VERSIONS = ['V1', 'V2', 'V3']
+
+interface ChapterPreset {
+  key: string
+  label: string
+}
+
+const emit = defineEmits<{
+  generate: []
+}>()
+
+const CheckMark = defineComponent({
+  name: 'CheckMark',
+  inheritAttrs: false,
+  props: {
+    checked: { type: Boolean, required: true },
+  },
+  emits: ['click'],
+  setup(props, { emit: emitClick, attrs }) {
+    return () =>
+      h('span', {
+        ...attrs,
+        class: ['chatbot-report-check', props.checked && 'is-checked', attrs.class],
+        onClick: (event: MouseEvent) => emitClick('click', event),
+      })
+  },
+})
+
+const settingsOpen = ref(true)
+const { selectedTemplate } = useReportWorkflow()
+
+const chapterPresets = ref<ChapterPreset[]>([])
+const selectedChapters = ref<Record<string, boolean>>({})
+const chapterVersions = ref<Record<string, string>>({})
+const chapterOrder = ref<string[]>([])
+const reportMode = ref('polish')
+const dragChapterKey = ref<string | null>(null)
+const dragOverChapterKey = ref<string | null>(null)
+
+const orderedPresets = computed(() =>
+  chapterOrder.value
+    .map((key) => chapterPresets.value.find((preset) => preset.key === key))
+    .filter((preset): preset is ChapterPreset => !!preset),
+)
+
+const allChaptersSelected = computed(
+  () => chapterPresets.value.length > 0 && chapterPresets.value.every((preset) => selectedChapters.value[preset.key]),
+)
+
+const hasSelectedChapters = computed(() =>
+  orderedPresets.value.some((preset) => selectedChapters.value[preset.key]),
+)
+
+function buildChapterPresets(chapters: string[]) {
+  return chapters.map((title, index) => ({
+    key: `chapter-${index}`,
+    label: title.trim(),
+  }))
+}
+
+function resetChapterState(chapters: string[]) {
+  const presets = buildChapterPresets(chapters)
+  chapterPresets.value = presets
+  chapterOrder.value = presets.map((preset) => preset.key)
+  selectedChapters.value = Object.fromEntries(presets.map((preset) => [preset.key, true]))
+  chapterVersions.value = Object.fromEntries(presets.map((preset) => [preset.key, 'V3']))
+}
+
+watch(
+  () => selectedTemplate.value?.chapters,
+  (chapters) => {
+    resetChapterState(chapters?.length ? chapters : ['摘要與本年總結'])
+  },
+  { immediate: true, deep: true },
+)
+
+function toggleChapter(key: string) {
+  selectedChapters.value[key] = !selectedChapters.value[key]
+}
+
+function toggleAllChapters() {
+  const next = !allChaptersSelected.value
+  chapterPresets.value.forEach((preset) => {
+    selectedChapters.value[preset.key] = next
+  })
+}
+
+function onChapterDragStart(event: DragEvent, key: string) {
+  if ((event.target as HTMLElement).closest('.chatbot-report-check, .chatbot-report-chapter-row__version')) {
+    event.preventDefault()
+    return
+  }
+  dragChapterKey.value = key
+  dragOverChapterKey.value = key
+}
+
+function handleChapterDragEnd() {
+  dragChapterKey.value = null
+  dragOverChapterKey.value = null
+}
+
+function handleChapterDrop(targetKey: string) {
+  const draggingKey = dragChapterKey.value
+  if (draggingKey && draggingKey !== targetKey) {
+    const newOrder = [...chapterOrder.value]
+    const fromIdx = newOrder.indexOf(draggingKey)
+    const toIdx = newOrder.indexOf(targetKey)
+    if (fromIdx !== -1 && toIdx !== -1) {
+      newOrder.splice(fromIdx, 1)
+      newOrder.splice(toIdx, 0, draggingKey)
+      chapterOrder.value = newOrder
+    }
+  }
+  handleChapterDragEnd()
+}
+
+function handleGenerate() {
+  if (!hasSelectedChapters.value) return
+  emit('generate')
+}
+</script>
+
+<style scoped>
+.chatbot-report-panel {
+  --report-border: #ebeef5;
+  --report-card-bg: #f5f5f5;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.chatbot-report-panel--settings .chatbot-report-panel__body {
+  padding: 0;
+  border: 1px solid var(--report-border);
+  border-radius: 8px;
+  background: #fff;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.chatbot-report-panel__body > :deep(.report-collapsible-section) {
+  border: none;
+  border-radius: 0;
+  padding: 14px 16px;
+}
+
+.chatbot-report-panel__body > :deep(.report-collapsible-section__toggle) {
+  border-bottom: none;
+  padding-bottom: 14px;
+}
+
+.chatbot-report-panel__body > :deep(.report-collapsible-section.is-collapsed .report-collapsible-section__toggle) {
+  padding-bottom: 0;
+}
+
+.chatbot-report-settings__content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.chatbot-report-chapter-select {
+  --chapter-check-size: 20px;
+  --chapter-version-width: 52px;
+}
+
+.chatbot-report-chapter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 4px;
+}
+
+.chatbot-report-chapter-header__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.chatbot-report-chapter-header__all {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: #555;
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.chatbot-report-chapter-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.chatbot-report-chapter-row {
+  display: grid;
+  grid-template-columns: var(--chapter-check-size) minmax(0, 1fr) var(--chapter-version-width);
+  column-gap: 8px;
+  align-items: center;
+  padding: 7px 4px;
+  margin: 0 -4px;
+  font-size: 13px;
+  color: #333;
+  border-radius: 6px;
+  cursor: grab;
+  user-select: none;
+  transition: background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
+}
+
+.chatbot-report-chapter-row:hover {
+  background: var(--report-card-bg);
+}
+
+.chatbot-report-chapter-row.is-dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+  background: #fff;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+}
+
+.chatbot-report-chapter-row.is-drag-over {
+  background: #fdf0f2;
+  box-shadow: inset 0 0 0 1px rgba(197, 51, 85, 0.35);
+}
+
+.chatbot-report-chapter-row__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1.45;
+}
+
+.chatbot-report-chapter-row__version {
+  width: var(--chapter-version-width);
+  height: 26px;
+  padding: 0 18px 0 8px;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  font-size: 12px;
+  appearance: none;
+  cursor: pointer;
+  justify-self: end;
+  box-sizing: border-box;
+}
+
+.chatbot-report-check {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #ccc;
+  position: relative;
+  cursor: pointer;
+  background: #fff;
+}
+
+.chatbot-report-check.is-checked {
+  border-color: #c53355;
+  background-color: #c53355;
+}
+
+.chatbot-report-check.is-checked::after {
+  content: '';
+  position: absolute;
+  left: 4px;
+  top: 1px;
+  width: 5px;
+  height: 9px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.chatbot-report-section-title--settings {
+  margin: 20px 0 12px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.chatbot-report-radio-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  margin: 0 0 20px;
+}
+
+.chatbot-report-radio-group :deep(.el-radio) {
+  margin-right: 0;
+  height: auto;
+}
+
+.chatbot-report-radio-group :deep(.el-radio__label) {
+  font-size: 13px;
+  color: #333;
+  padding-left: 8px;
+}
+
+.chatbot-report-radio-group :deep(.el-radio__inner) {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #d9d9d9;
+}
+
+.chatbot-report-radio-group :deep(.el-radio__input.is-checked .el-radio__inner) {
+  border-color: #c53355;
+  background: #c53355;
+}
+
+.chatbot-report-generate-btn.el-button {
+  display: flex;
+  width: 100%;
+  height: 40px;
+  border: 1px solid #c53355;
+  color: #c53355;
+  background: #fff;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.chatbot-report-generate-btn.el-button:hover:not(.is-disabled) {
+  background: #fdf0f2;
+  color: #c53355;
+  border-color: #c53355;
+}
+</style>