aegon-dangerious 1.0.0

package/build-report/components/ReportTemplatePromptField.vue

@@ -0,0 +1,314 @@
+<template>
+  <label class="gen-ai-prompt-field" :class="{ 'gen-ai-prompt-field--row': layout === 'row' }" :style="fieldStyle">
+    <span class="gen-ai-prompt-field__label">
+      {{ label }}<span v-if="required" class="gen-ai-prompt-field__required">*</span>
+    </span>
+    <div class="gen-ai-prompt-field__control" :style="controlStyle">
+      <div class="gen-ai-prompt-field__box" :class="{ 'gen-ai-prompt-field__box--constrained': isConstrained }"
+        :style="boxStyle">
+        <div class="gen-ai-prompt-field__body" :class="{ 'gen-ai-prompt-field__body--scroll': isConstrained }">
+          <el-input :model-value="modelValue" type="textarea" :autosize="textareaAutosize"
+            :rows="isConstrained ? rows : undefined" :maxlength="maxlength" :placeholder="placeholder"
+            :disabled="disabled" resize="none" :class="[
+              'gen-ai-prompt-field__textarea',
+              { 'gen-ai-prompt-field__textarea--fill': isConstrained },
+            ]" @update:model-value="emit('update:modelValue', $event)" />
+        </div>
+        <div class="gen-ai-prompt-field__toolbar">
+          <button type="button" class="gen-ai-prompt-field__ai" :disabled="disabled" @click="openAiDialog">
+            AI+
+          </button>
+        </div>
+      </div>
+      <p class="gen-ai-prompt-field__count">{{ wordCountText }}</p>
+    </div>
+  </label>
+
+  <AiPromptGenerateDialog v-model="aiDialogVisible" :initial-title="chapterTitle"
+    :initial-description="chapterDescription" @confirm="handleAiConfirm" />
+</template>
+
+<script setup lang="ts">
+import { computed, ref, type StyleValue } from 'vue';
+import AiPromptGenerateDialog from './AiPromptGenerateDialog.vue'
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    label?: string
+    required?: boolean
+    maxlength?: number
+    rows?: number
+    maxRows?: number
+    chapterTitle?: string
+    chapterDescription?: string
+    /** 外层可指定宽度，默认随父级撑满 */
+    width?: string
+    /** 外层可指定整体高度（含底栏），内部文字区域滚动 */
+    height?: string
+    minHeight?: string
+    /** 外层可指定最大高度，超出后内部滚动 */
+    maxHeight?: string
+    placeholder?: string
+    disabled?: boolean
+    layout?: 'row' | 'stack'
+    labelWidth?: string
+    fieldGap?: string
+    rootStyle?: StyleValue
+  }>(),
+  {
+    label: 'Prompt',
+    required: true,
+    maxlength: 1300,
+    rows: 8,
+    maxRows: 16,
+    placeholder: '',
+    disabled: false,
+    layout: 'row',
+    chapterTitle: '',
+    chapterDescription: '',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'ai-assist': [prompt: string]
+}>()
+
+const aiDialogVisible = ref(false)
+
+function openAiDialog() {
+  if (props.disabled) return
+  aiDialogVisible.value = true
+}
+
+function handleAiConfirm(prompt: string) {
+  emit('update:modelValue', prompt)
+  emit('ai-assist', prompt)
+}
+
+/** 指定 height / maxHeight 时改为固定容器 + 内部滚动 */
+const isConstrained = computed(() => !!(props.height || props.maxHeight))
+
+const textareaAutosize = computed(() => {
+  if (isConstrained.value) return false
+  return {
+    minRows: props.rows,
+    maxRows: props.maxRows,
+  }
+})
+
+const wordCountText = computed(() => `${props.modelValue.length} / ${props.maxlength}`)
+
+function pickSizeStyle(
+  width?: string,
+  height?: string,
+  minHeight?: string,
+  maxHeight?: string,
+): StyleValue {
+  const style: Record<string, string> = {}
+  if (width) style.width = width
+  if (height) style.height = height
+  if (minHeight) style.minHeight = minHeight
+  if (maxHeight) style.maxHeight = maxHeight
+  return style
+}
+
+const fieldStyle = computed((): StyleValue => {
+  const style: Record<string, string> = {}
+  if (props.labelWidth) style['--gen-ai-prompt-field-label-w'] = props.labelWidth
+  if (props.fieldGap) style['--gen-ai-prompt-field-gap'] = props.fieldGap
+  if (!props.rootStyle) return style
+  if (typeof props.rootStyle === 'string') return [style, props.rootStyle]
+  if (Array.isArray(props.rootStyle)) return [style, ...props.rootStyle]
+  return { ...style, ...props.rootStyle }
+})
+
+const controlStyle = computed(() => pickSizeStyle(props.width))
+const boxStyle = computed(() =>
+  pickSizeStyle(props.width, props.height, props.minHeight, props.maxHeight),
+)
+
+export interface PromptFieldLayoutBind {
+  labelWidth?: string
+  fieldGap?: string
+  width?: string
+  height?: string
+  minHeight?: string
+  maxHeight?: string
+  rootStyle?: StyleValue
+}
+</script>
+
+<style scoped>
+.gen-ai-prompt-field {
+  margin: 0;
+}
+
+.gen-ai-prompt-field--row {
+  --gen-ai-prompt-field-label-w: 100px;
+  --gen-ai-prompt-field-gap: 16px;
+  display: grid;
+  grid-template-columns: var(--gen-ai-prompt-field-label-w) minmax(0, 1fr);
+  column-gap: var(--gen-ai-prompt-field-gap);
+  align-items: start;
+}
+
+.gen-ai-prompt-field__label {
+  flex-shrink: 0;
+  padding-top: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: Arial, sans-serif;
+  color: #303133;
+  white-space: nowrap;
+}
+
+.gen-ai-prompt-field__required {
+  margin-left: 2px;
+  color: #f56c6c;
+}
+
+.gen-ai-prompt-field__control {
+  min-width: 0;
+  width: 100%;
+}
+
+.gen-ai-prompt-field__box {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 1px solid #dcdfe6;
+  border-radius: 8px;
+  background: #fff;
+  overflow: hidden;
+  transition: border-color 0.2s ease;
+}
+
+.gen-ai-prompt-field__box--constrained {
+  min-height: 0;
+}
+
+.gen-ai-prompt-field__box:focus-within {
+  border-color: #c0c4cc;
+}
+
+.gen-ai-prompt-field__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  /* 右侧 1px：滚动条贴边框；左侧 12px 与 textarea 内边距共同保证文字两端留白一致 */
+  padding: 12px 2px 4px 12px;
+}
+
+.gen-ai-prompt-field__body--scroll {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.gen-ai-prompt-field__textarea {
+  width: 100%;
+}
+
+.gen-ai-prompt-field__textarea :deep(.el-textarea),
+.gen-ai-prompt-field__textarea :deep(.el-textarea__wrapper) {
+  padding: 0;
+  margin: 0;
+  box-shadow: none;
+  background: transparent;
+}
+
+.gen-ai-prompt-field__textarea :deep(.el-textarea__inner) {
+  padding: 0 10px 0 0;
+  margin: 0;
+  border: none;
+  box-shadow: none;
+  background: transparent;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #303133;
+  resize: none;
+  box-sizing: border-box;
+}
+
+.gen-ai-prompt-field__textarea :deep(.el-textarea__inner:focus) {
+  box-shadow: none;
+}
+
+.gen-ai-prompt-field__textarea--fill {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.gen-ai-prompt-field__textarea--fill :deep(.el-textarea) {
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.gen-ai-prompt-field__textarea--fill :deep(.el-textarea__inner) {
+  flex: 1 1 auto;
+  min-height: 0 !important;
+  height: 100% !important;
+  overflow-y: auto !important;
+}
+
+.gen-ai-prompt-field__textarea :deep(.el-textarea__inner::-webkit-scrollbar) {
+  width: 6px;
+}
+
+.gen-ai-prompt-field__textarea :deep(.el-textarea__inner::-webkit-scrollbar-thumb) {
+  border-radius: 3px;
+  background: #c0c4cc;
+}
+
+.gen-ai-prompt-field__toolbar {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 12px 10px;
+}
+
+.gen-ai-prompt-field__ai {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #7b61ff 0%, #5b8def 100%);
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+  cursor: pointer;
+  box-shadow: 0 2px 8px rgba(91, 141, 239, 0.35);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.gen-ai-prompt-field__ai:hover:not(:disabled) {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(91, 141, 239, 0.45);
+}
+
+.gen-ai-prompt-field__ai:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: 0 2px 8px rgba(91, 141, 239, 0.35);
+}
+
+.gen-ai-prompt-field__count {
+  margin: 4px 0 0;
+  text-align: right;
+  font-size: 12px;
+  color: #909399;
+  line-height: 1;
+}
+</style>

package/build-report/components/ReportWorkflowSidebar.vue

@@ -0,0 +1,104 @@
+<template>
+  <aside class="report-workflow-sidebar">
+    <ReportConfigPanel />
+
+    <ReportSourceFileSummary v-if="showEditorPanel" />
+
+    <ReportCollapsibleSection ref="sourcesSectionRef" v-model:open="sourcesOpen" title="信息源"
+      class="report-workflow-sidebar__sources-wrap" :class="{ 'is-collapsed': !sourcesOpen }"
+      @before-collapse="closeSourcesOverlays">
+      <ReportSourcesPanel ref="sourcesPanelRef" sync-workflow embedded :section-boundary-el="sourcesSectionRoot"
+        :panel-open="sourcesOpen" :sources-readonly="sourcesReadonly" :use-more-overlay="useMoreOverlay"
+        :class="{ 'is-section-collapsed': !sourcesOpen }" @submitted="collapseSources" @show-more="emit('show-more')" />
+    </ReportCollapsibleSection>
+  </aside>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import ReportSourcesPanel from './ReportSourcesPanel.vue'
+import ReportCollapsibleSection from './ReportCollapsibleSection.vue'
+import ReportConfigPanel from './ReportConfigPanel.vue'
+import ReportSourceFileSummary from './ReportSourceFileSummary.vue'
+import { useReportWorkflow } from '../useReportWorkflow'
+
+withDefaults(
+  defineProps<{
+    useMoreOverlay?: boolean
+  }>(),
+  {
+    useMoreOverlay: false,
+  },
+)
+
+const emit = defineEmits<{
+  'show-more': []
+}>()
+
+const { promptRightPanel, modelStep, chapterEditMode } = useReportWorkflow()
+
+const showEditorPanel = computed(() => promptRightPanel.value !== 'settings')
+const sourcesReadonly = computed(() => modelStep.value === 'prompt' && !chapterEditMode.value)
+
+const sourcesOpen = ref(true)
+const sourcesSectionRef = ref<InstanceType<typeof ReportCollapsibleSection> | null>(null)
+const sourcesPanelRef = ref<InstanceType<typeof ReportSourcesPanel> | null>(null)
+const sourcesSectionRoot = computed(() => sourcesSectionRef.value?.rootRef ?? null)
+
+function closeSourcesOverlays(done: (hadOpenOverlays: boolean) => void) {
+  const hadOpen = sourcesPanelRef.value?.hasOpenOverlays() ?? false
+  if (hadOpen) {
+    sourcesPanelRef.value?.closeAllOverlays(true)
+  }
+  done(hadOpen)
+}
+
+function collapseSources() {
+  sourcesOpen.value = false
+}
+</script>
+
+<style scoped>
+.report-workflow-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+  height: 100%;
+  overflow: visible;
+}
+
+.report-workflow-sidebar__sources-wrap {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.report-workflow-sidebar__sources-wrap :deep(.report-collapsible-section) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.report-workflow-sidebar__sources-wrap :deep(.report-collapsible-section__body) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.report-workflow-sidebar__sources-wrap :deep(.report-collapsible-section__body) {
+  min-width: 0;
+}
+
+.report-workflow-sidebar__sources-wrap :deep(.report-collapsible-section__toggle) {
+  border-bottom: none;
+}
+
+.report-workflow-sidebar__sources-wrap :deep(.report-collapsible-section.is-collapsed .report-collapsible-section__toggle) {
+  padding-bottom: 14px;
+}
+</style>