aegon-dangerious 1.0.0

package/build-report/components/ChapterTitleScroll.vue

@@ -0,0 +1,292 @@
+<template>
+  <component
+    :is="rootTag"
+    class="chapter-title-scroll"
+    :class="{
+      'is-truncatable': isTruncatable,
+      'is-animating': isAnimating,
+      'is-dragging': isDragging,
+      'is-active': active,
+    }"
+    @click="handleClick"
+    @wheel.prevent="handleWheel"
+  >
+    <div
+      ref="viewportRef"
+      class="chapter-title-scroll__viewport"
+      @pointerdown="handlePointerDown"
+    >
+      <span
+        ref="textRef"
+        class="chapter-title-scroll__text"
+        :style="{ transform: `translateX(${-offset}px)` }"
+      >
+        <template v-if="!showFull && isTruncatable">{{ truncatedPrefix }}</template>
+        <template v-else>{{ title }}</template>
+      </span>
+      <span
+        v-if="!showFull && isTruncatable"
+        class="chapter-title-scroll__ellipsis"
+        aria-hidden="true"
+      >...</span>
+    </div>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
+
+const TITLE_MAX = 19
+/** 自動滾動速度（px/s），較慢 */
+const SCROLL_SPEED_PX_PER_SEC = 22
+const END_PAUSE_MS = 280
+const DRAG_CLICK_THRESHOLD_PX = 4
+
+const props = defineProps({
+  title: { type: String, required: true },
+  rootTag: { type: String, default: 'li' },
+  active: { type: Boolean, default: false },
+})
+
+const viewportRef = ref(null as HTMLElement | null)
+const textRef = ref(null as HTMLElement | null)
+const offset = ref(0)
+const showFull = ref(false)
+const isAnimating = ref(false)
+const isDragging = ref(false)
+
+let animFrameId = 0
+let endPauseTimer = 0
+let dragStartX = 0
+let dragStartOffset = 0
+let pointerMoved = false
+let activePointerMove: ((event: PointerEvent) => void) | null = null
+let activePointerUp: ((event: PointerEvent) => void) | null = null
+
+const isTruncatable = computed(() => props.title.length > TITLE_MAX)
+const truncatedPrefix = computed(() =>
+  isTruncatable.value ? props.title.slice(0, TITLE_MAX) : props.title,
+)
+
+function getMaxOffset() {
+  const viewport = viewportRef.value
+  const text = textRef.value
+  if (!viewport || !text) return 0
+  return Math.max(0, text.scrollWidth - viewport.clientWidth)
+}
+
+function clampOffset(value: number) {
+  return Math.min(getMaxOffset(), Math.max(0, value))
+}
+
+function cancelAnimation() {
+  if (animFrameId) {
+    cancelAnimationFrame(animFrameId)
+    animFrameId = 0
+  }
+  if (endPauseTimer) {
+    clearTimeout(endPauseTimer)
+    endPauseTimer = 0
+  }
+  isAnimating.value = false
+}
+
+function removePointerListeners() {
+  if (activePointerMove) {
+    window.removeEventListener('pointermove', activePointerMove)
+    activePointerMove = null
+  }
+  if (activePointerUp) {
+    window.removeEventListener('pointerup', activePointerUp)
+    window.removeEventListener('pointercancel', activePointerUp)
+    activePointerUp = null
+  }
+}
+
+function resetToInitial() {
+  cancelAnimation()
+  removePointerListeners()
+  isDragging.value = false
+  offset.value = 0
+  showFull.value = false
+}
+
+async function ensureFullMode() {
+  if (!showFull.value) {
+    showFull.value = true
+    offset.value = 0
+    await nextTick()
+  }
+}
+
+async function startAutoScroll() {
+  if (!isTruncatable.value || isAnimating.value) return
+
+  cancelAnimation()
+  showFull.value = true
+  offset.value = 0
+  await nextTick()
+
+  const maxOffset = getMaxOffset()
+  if (maxOffset <= 0) {
+    resetToInitial()
+    return
+  }
+
+  isAnimating.value = true
+  const startTime = performance.now()
+
+  const tick = (now: number) => {
+    const elapsedSec = (now - startTime) / 1000
+    const nextOffset = Math.min(maxOffset, elapsedSec * SCROLL_SPEED_PX_PER_SEC)
+    offset.value = nextOffset
+
+    if (nextOffset >= maxOffset) {
+      endPauseTimer = window.setTimeout(() => {
+        resetToInitial()
+      }, END_PAUSE_MS)
+      return
+    }
+
+    animFrameId = requestAnimationFrame(tick)
+  }
+
+  animFrameId = requestAnimationFrame(tick)
+}
+
+function handleClick() {
+  if (!isTruncatable.value || isAnimating.value || pointerMoved) {
+    pointerMoved = false
+    return
+  }
+  resetToInitial()
+  void nextTick(() => {
+    void startAutoScroll()
+  })
+}
+
+function handleWheel(event: WheelEvent) {
+  if (!isTruncatable.value) return
+
+  cancelAnimation()
+
+  void ensureFullMode().then(() => {
+    const delta = (event.deltaY !== 0 ? event.deltaY : event.deltaX) * 0.6
+    offset.value = clampOffset(offset.value + delta)
+  })
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (!isTruncatable.value || event.button !== 0) return
+
+  event.preventDefault()
+  cancelAnimation()
+
+  void ensureFullMode().then(() => {
+    isDragging.value = true
+    pointerMoved = false
+    dragStartX = event.clientX
+    dragStartOffset = offset.value
+
+    activePointerMove = (moveEvent: PointerEvent) => {
+      const delta = dragStartX - moveEvent.clientX
+      if (Math.abs(delta) > DRAG_CLICK_THRESHOLD_PX) {
+        pointerMoved = true
+      }
+      offset.value = clampOffset(dragStartOffset + delta)
+    }
+
+    activePointerUp = () => {
+      isDragging.value = false
+      removePointerListeners()
+      if (pointerMoved) {
+        window.setTimeout(() => {
+          pointerMoved = false
+        }, 0)
+      }
+    }
+
+    window.addEventListener('pointermove', activePointerMove)
+    window.addEventListener('pointerup', activePointerUp)
+    window.addEventListener('pointercancel', activePointerUp)
+  })
+}
+
+onBeforeUnmount(() => {
+  resetToInitial()
+})
+</script>
+
+<style scoped>
+.chapter-title-scroll {
+  --cts-lh-chapter: clamp(18px, calc(22 * 100vw / 1920), 22px);
+  --cts-fs-chapter: clamp(12px, calc(14 * 100vw / 1920), 14px);
+  --cts-fs-chapter-ellipsis: clamp(14px, calc(16 * 100vw / 1920), 16px);
+  height: var(--cts-lh-chapter);
+  line-height: var(--cts-lh-chapter);
+  list-style: none;
+  font-size: var(--cts-fs-chapter);
+  color: #606266;
+  cursor: default;
+  user-select: none;
+}
+
+.chapter-title-scroll.is-truncatable {
+  cursor: grab;
+}
+
+.chapter-title-scroll.is-dragging {
+  cursor: grabbing;
+}
+
+.chapter-title-scroll__viewport {
+  position: relative;
+  overflow: hidden;
+  height: var(--cts-lh-chapter);
+  line-height: var(--cts-lh-chapter);
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  touch-action: none;
+}
+
+.chapter-title-scroll__viewport::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.chapter-title-scroll__text {
+  display: inline-block;
+  white-space: nowrap;
+  will-change: transform;
+  color: #606266;
+}
+
+.chapter-title-scroll.is-dragging .chapter-title-scroll__text {
+  transition: none;
+}
+
+.chapter-title-scroll.is-active,
+.chapter-title-scroll.is-active .chapter-title-scroll__text {
+  color: #c53355;
+  font-weight: 600;
+}
+
+.chapter-title-scroll.is-active .chapter-title-scroll__ellipsis {
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 45%);
+}
+
+.chapter-title-scroll__ellipsis {
+  position: absolute;
+  right: 0;
+  top: 0;
+  padding-left: 8px;
+  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 45%);
+  color: #c53355;
+  font-weight: 900;
+  font-size: var(--cts-fs-chapter-ellipsis);
+  line-height: var(--cts-lh-chapter);
+  letter-spacing: 0.05em;
+  pointer-events: none;
+}
+</style>

package/build-report/components/PromptField.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>