aegon-lv82 1.0.0

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

@@ -0,0 +1,667 @@
+<template>
+  <section class="template-editor-form">
+    <div class="template-editor-form__row">
+      <label class="template-editor-field template-editor-field--row">
+        <span class="template-editor-label"
+          >主要語言<span class="template-editor-label__required">*</span></span
+        >
+        <div class="template-editor-field__control template-editor-field__control--lang">
+          <el-select v-model="form.language" class="template-editor-field__lang">
+            <el-option
+              v-for="item in languageOptions"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </label>
+    </div>
+
+    <div class="template-editor-form__row">
+      <label class="template-editor-field template-editor-field--row">
+        <span class="template-editor-label"
+          >模板標題<span class="template-editor-label__required">*</span></span
+        >
+        <div class="template-editor-field__control">
+          <el-input
+            v-model="form.title"
+            :maxlength="TEMPLATE_TITLE_MAX"
+            show-word-limit
+            class="template-editor-field__input"
+          />
+        </div>
+      </label>
+    </div>
+
+    <div class="template-editor-form__row">
+      <label
+        class="template-editor-field template-editor-field--row template-editor-field--textarea-row"
+      >
+        <span class="template-editor-label"
+          >模板描述<span class="template-editor-label__required">*</span></span
+        >
+        <div class="template-editor-field__control">
+          <el-input
+            v-model="form.description"
+            type="textarea"
+            :rows="4"
+            :maxlength="TEMPLATE_DESC_MAX"
+            show-word-limit
+            resize="none"
+            class="template-editor-field__textarea"
+          />
+        </div>
+      </label>
+    </div>
+
+    <div class="template-editor-chapters">
+      <div v-for="chapter in form.chapters" :key="chapter.id" class="template-editor-chapter">
+        <button
+          type="button"
+          class="template-editor-chapter__header"
+          @click="toggleChapter(chapter.id)"
+        >
+          <span class="template-editor-chapter__drag" aria-hidden="true"> <i /><i /><i /> </span>
+          <span class="template-editor-chapter__header-title-wrap">
+            <span class="template-editor-chapter__header-title">
+              {{ getChapterDisplayTitle(chapter) }}
+            </span>
+            <el-icon
+              v-if="isChapterTitleEdited(chapter)"
+              class="template-editor-chapter__title-edited"
+              aria-label="章節標題已修改"
+            >
+              <Edit />
+            </el-icon>
+          </span>
+          <el-icon
+            class="template-editor-chapter__chevron"
+            :class="{ 'template-editor-chapter__chevron--expanded': chapter.expanded }"
+          >
+            <ArrowRight />
+          </el-icon>
+        </button>
+
+        <div v-if="chapter.expanded" class="template-editor-chapter__body">
+          <div class="template-editor-chapter__toolbar">
+            <button
+              v-if="isEditMode"
+              type="button"
+              class="template-center-toolbar-btn gen-ai-action-btn template-editor-chapter__action-btn"
+              :class="
+                isChapterEditing(chapter.id)
+                  ? 'template-center-toolbar-btn--outline template-center-toolbar-btn--delete'
+                  : 'template-center-toolbar-btn--ghost'
+              "
+              :disabled="isChapterEditing(chapter.id) && form.chapters.length <= 1"
+              @click.stop="handleChapterToolbarAction(chapter)"
+            >
+              {{ isChapterEditing(chapter.id) ? '刪除' : '編輯' }}
+            </button>
+            <button
+              v-else
+              type="button"
+              class="template-center-toolbar-btn gen-ai-action-btn template-center-toolbar-btn--outline template-center-toolbar-btn--delete template-editor-chapter__action-btn"
+              :disabled="form.chapters.length <= 1"
+              @click.stop="handleDeleteChapter(chapter)"
+            >
+              刪除
+            </button>
+          </div>
+
+          <template v-if="showChapterFields(chapter.id)">
+            <label class="template-editor-field template-editor-field--row">
+              <span class="template-editor-label">章節標題</span>
+              <div class="template-editor-field__control">
+                <el-input
+                  v-model="chapter.title"
+                  :maxlength="CHAPTER_TITLE_MAX"
+                  show-word-limit
+                  class="template-editor-field__input"
+                />
+              </div>
+            </label>
+
+            <label
+              class="template-editor-field template-editor-field--row template-editor-field--textarea-row"
+            >
+              <span class="template-editor-label">章節描述</span>
+              <div class="template-editor-field__control">
+                <el-input
+                  v-model="chapter.description"
+                  type="textarea"
+                  :rows="4"
+                  :maxlength="CHAPTER_DESC_MAX"
+                  show-word-limit
+                  resize="none"
+                  class="template-editor-field__textarea"
+                />
+              </div>
+            </label>
+
+            <ReportTemplatePromptField
+              v-model="chapter.prompt"
+              :maxlength="CHAPTER_PROMPT_MAX"
+              :rows="CHAPTER_PROMPT_ROWS"
+              :chapter-title="chapter.title"
+              :chapter-description="chapter.description"
+              v-bind="resolvePromptFieldProps(chapter)"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <div class="template-editor-form__add">
+      <button
+        type="button"
+        class="template-editor-form__add-btn"
+        aria-label="新增章節"
+        :disabled="form.chapters.length >= CHAPTER_MAX_COUNT"
+        @click="addChapter"
+      >
+        +
+      </button>
+    </div>
+
+    <div v-if="$slots['footer-actions']" class="template-editor-form__footer-actions">
+      <slot name="footer-actions" />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ArrowRight, Edit } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { computed, ref, watch } from 'vue'
+import {
+  createEmptyChapter,
+  type TemplateChapterForm,
+  type TemplateEditorForm,
+  type TemplateEditorMode,
+} from '../report-template-data'
+import { PromptField as ReportTemplatePromptField, type PromptFieldLayoutBind } from '../../common'
+const TEMPLATE_TITLE_MAX = 100
+const TEMPLATE_DESC_MAX = 3000
+const CHAPTER_TITLE_MAX = 100
+const CHAPTER_DESC_MAX = 1000
+const CHAPTER_PROMPT_MAX = 8000
+const CHAPTER_PROMPT_ROWS = 8
+const CHAPTER_MAX_COUNT = 100
+
+const languageOptions = [
+  { label: '中文', value: 'zh' },
+  { label: 'English', value: 'en' },
+]
+
+const props = defineProps<{
+  modelValue: TemplateEditorForm
+  editorMode: TemplateEditorMode
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: TemplateEditorForm]
+}>()
+
+const form = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value),
+})
+
+const editingChapterId = ref<string | null>(null)
+const chapterOriginalTitles = ref<Record<string, string>>({})
+
+const isEditMode = computed(() => props.editorMode === 'edit')
+const isCreateMode = computed(() => props.editorMode === 'create')
+
+function syncChapterOriginalTitles() {
+  const map: Record<string, string> = {}
+  for (const chapter of form.value.chapters) {
+    map[chapter.id] = chapter.title
+  }
+  chapterOriginalTitles.value = map
+}
+
+watch(
+  () => props.modelValue,
+  () => syncChapterOriginalTitles(),
+  { deep: true, immediate: true }
+)
+
+function isChapterEditing(chapterId: string) {
+  return isEditMode.value && editingChapterId.value === chapterId
+}
+
+function showChapterFields(chapterId: string) {
+  return !isEditMode.value || isChapterEditing(chapterId)
+}
+
+function isChapterTitleEdited(chapter: TemplateChapterForm) {
+  const original = chapterOriginalTitles.value[chapter.id] ?? ''
+  return chapter.title.trim() !== original.trim()
+}
+
+function expandChapter(id: string) {
+  form.value = {
+    ...form.value,
+    chapters: form.value.chapters.map((chapter) => ({
+      ...chapter,
+      expanded: chapter.id === id,
+    })),
+  }
+}
+
+function toggleChapter(id: string) {
+  const target = form.value.chapters.find((chapter) => chapter.id === id)
+  if (!target) return
+
+  if (target.expanded) {
+    if (editingChapterId.value === id) {
+      editingChapterId.value = null
+    }
+    form.value = {
+      ...form.value,
+      chapters: form.value.chapters.map((chapter) =>
+        chapter.id === id ? { ...chapter, expanded: false } : chapter
+      ),
+    }
+    return
+  }
+
+  expandChapter(id)
+}
+
+function handleStartEditChapter(chapter: TemplateChapterForm) {
+  if (editingChapterId.value && editingChapterId.value !== chapter.id) {
+    ElMessage.warning('請先保存當前章節，再編輯其他章節')
+    return
+  }
+
+  editingChapterId.value = chapter.id
+  expandChapter(chapter.id)
+}
+
+function handleChapterToolbarAction(chapter: TemplateChapterForm) {
+  if (isChapterEditing(chapter.id)) {
+    void handleDeleteChapter(chapter)
+    return
+  }
+  handleStartEditChapter(chapter)
+}
+
+function addChapter() {
+  if (form.value.chapters.length >= CHAPTER_MAX_COUNT) {
+    ElMessage.warning(`章節數量已達上限 ${CHAPTER_MAX_COUNT} 個`)
+    return
+  }
+
+  const collapsed = form.value.chapters.map((chapter) => ({ ...chapter, expanded: false }))
+  const newChapter = createEmptyChapter(true)
+  form.value = {
+    ...form.value,
+    chapters: [...collapsed, newChapter],
+  }
+  chapterOriginalTitles.value = {
+    ...chapterOriginalTitles.value,
+    [newChapter.id]: '',
+  }
+}
+
+function removeChapter(id: string) {
+  if (form.value.chapters.length <= 1) return
+  if (editingChapterId.value === id) {
+    editingChapterId.value = null
+  }
+  const next = form.value.chapters.filter((chapter) => chapter.id !== id)
+  if (!next.some((chapter) => chapter.expanded) && next[0]) {
+    next[0] = { ...next[0], expanded: true }
+  }
+  form.value = { ...form.value, chapters: next }
+  const { [id]: _removed, ...rest } = chapterOriginalTitles.value
+  chapterOriginalTitles.value = rest
+}
+
+async function handleDeleteChapter(chapter: TemplateChapterForm) {
+  if (form.value.chapters.length <= 1) return
+
+  const chapterName = getChapterDisplayTitle(chapter)
+  try {
+    await ElMessageBox.confirm(`確定刪除章節「${chapterName}」嗎？`, '刪除', {
+      confirmButtonText: '確定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    removeChapter(chapter.id)
+    ElMessage.success(`已刪除：${chapterName}`)
+  } catch {
+    // 用戶取消
+  }
+}
+
+function getChapterDisplayTitle(chapter: TemplateChapterForm) {
+  return chapter.title.trim() || '章節標題'
+}
+
+function resolvePromptFieldProps(_chapter: TemplateChapterForm): PromptFieldLayoutBind {
+  return {
+    labelWidth: '100px',
+    fieldGap: '16px',
+    width: '100%',
+  }
+}
+
+function resetEditingState() {
+  editingChapterId.value = null
+}
+
+defineExpose({
+  resetEditingState,
+  isCreateMode,
+})
+</script>
+
+<style scoped>
+.template-editor-form {
+  --gen-ai-fs-base: clamp(13px, calc(14 * 100vw / 1920), 14px);
+  --template-editor-label-w: 100px;
+  --template-editor-field-gap: 16px;
+  --report-accent: #c53355;
+  --report-accent-soft: #fdf0f2;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  font-size: var(--gen-ai-fs-base);
+}
+
+.template-editor-form__row {
+  width: 100%;
+}
+
+.template-editor-field {
+  margin: 0;
+}
+
+.template-editor-field--row {
+  display: grid;
+  grid-template-columns: var(--template-editor-label-w) minmax(0, 1fr);
+  column-gap: var(--template-editor-field-gap);
+  align-items: center;
+  width: 100%;
+}
+
+.template-editor-field--textarea-row {
+  align-items: start;
+}
+
+.template-editor-field--textarea-row .template-editor-label {
+  padding-top: 8px;
+}
+
+.template-editor-label {
+  flex-shrink: 0;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+  white-space: nowrap;
+}
+
+.template-editor-label__required {
+  margin-left: 2px;
+  color: #f56c6c;
+}
+
+.template-editor-field__control {
+  min-width: 0;
+  width: 100%;
+}
+
+.template-editor-field__control--lang {
+  width: auto;
+  max-width: 270px;
+}
+
+.template-editor-field__lang {
+  width: 270px;
+}
+
+.template-editor-field__input,
+.template-editor-field__textarea {
+  width: 100%;
+}
+
+.template-editor-field__input :deep(.el-input__wrapper),
+.template-editor-field__textarea :deep(.el-textarea__inner) {
+  font-size: var(--gen-ai-fs-base);
+}
+
+.template-editor-field__lang :deep(.el-select__wrapper) {
+  min-height: 32px;
+}
+
+.template-editor-field__input :deep(.el-input__count),
+.template-editor-field__textarea :deep(.el-input__count) {
+  right: 0;
+  bottom: -18px;
+  background: transparent;
+  font-size: 12px;
+  color: #909399;
+}
+
+.template-editor-chapters {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #ebeef5;
+}
+
+.template-editor-chapter {
+  border-bottom: 1px solid #ebeef5;
+}
+
+.template-editor-chapter:first-child {
+  margin-top: 16px;
+}
+
+.template-editor-chapter__header {
+  display: grid;
+  grid-template-columns: 20px var(--template-editor-label-w) minmax(0, 1fr) 20px;
+  column-gap: var(--template-editor-field-gap);
+  align-items: center;
+  width: 100%;
+  min-height: 48px;
+  padding: 0 4px;
+  border: none;
+  background: #fff;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.template-editor-chapter__header:hover {
+  background: #f5f7fa;
+}
+
+.template-editor-chapter__body {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 4px 16px;
+}
+
+.template-editor-chapter__toolbar {
+  display: grid;
+  grid-template-columns: var(--template-editor-label-w) minmax(0, 1fr);
+  column-gap: var(--template-editor-field-gap);
+  margin-top: 20px;
+}
+
+.template-editor-chapter__action-btn {
+  grid-column: 2;
+  justify-self: end;
+  width: 83px;
+  min-width: 83px;
+  height: 32px;
+  padding: 0;
+}
+
+.template-center-toolbar-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  height: 32px;
+  min-width: 83px;
+  padding: 0 14px;
+  border-radius: 4px;
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  color: #606266;
+  font-size: 15px;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  font-weight: 400;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.template-center-toolbar-btn--outline {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: #fff;
+}
+
+.template-center-toolbar-btn--outline:hover:not(:disabled) {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: var(--report-accent-soft);
+}
+
+.template-center-toolbar-btn--delete {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: #fff;
+}
+
+.template-center-toolbar-btn--delete:hover:not(:disabled) {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: var(--report-accent-soft);
+}
+
+.template-center-toolbar-btn--ghost {
+  border: 1px solid #dcdfe6;
+  background: #fff;
+  color: #606266;
+}
+
+.template-center-toolbar-btn--ghost:hover:not(:disabled) {
+  border-color: var(--report-accent);
+  color: var(--report-accent);
+  background: var(--report-accent-soft);
+}
+
+.template-editor-chapter__drag {
+  grid-column: 1;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 3px;
+  width: 12px;
+  flex-shrink: 0;
+}
+
+.template-editor-chapter__drag i {
+  display: block;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: #909399;
+}
+
+.template-editor-chapter__header-title-wrap {
+  grid-column: 2 / 4;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.template-editor-chapter__header-title {
+  min-width: 0;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', sans-serif);
+  color: #303133;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.template-editor-chapter__title-edited {
+  flex-shrink: 0;
+  font-size: 14px;
+  color: #c53355;
+}
+
+.template-editor-chapter__chevron {
+  grid-column: 4;
+  justify-self: end;
+  flex-shrink: 0;
+  font-size: 16px;
+  color: #dcdfe6;
+  transition: transform 0.2s ease;
+}
+
+.template-editor-chapter__chevron--expanded {
+  transform: rotate(90deg);
+}
+
+.template-editor-field--textarea-row .template-editor-field__control {
+  position: relative;
+  padding-bottom: 18px;
+}
+
+.template-editor-form__add {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0 0;
+}
+
+.template-editor-form__footer-actions {
+  display: flex;
+  justify-content: center;
+}
+
+.template-editor-form__add-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 160px;
+  height: 39px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fff;
+  color: #606266;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.template-editor-form__add-btn:hover:not(:disabled) {
+  border-color: #c53355;
+  color: #c53355;
+}
+
+.template-editor-form__add-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+</style>