aegon-lv97 1.0.0

package/gen-ai/components/PromptField.vue

@@ -0,0 +1,505 @@
+<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
+          ref="bodyRef"
+          class="gen-ai-prompt-field__body"
+          :class="{ 'gen-ai-prompt-field__body--scroll': isConstrained }"
+        >
+          <el-input
+            ref="inputRef"
+            :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="onModelUpdate"
+          />
+          <!-- 自定義滾動條：滑塊固定 50px（原生 scrollbar 無法鎖定高度） -->
+          <div
+            v-show="scrollbarVisible"
+            ref="trackRef"
+            class="gen-ai-prompt-field__scrollbar"
+            @mousedown.prevent="onTrackMouseDown"
+          >
+            <div
+              class="gen-ai-prompt-field__scrollbar-thumb"
+              :style="{ transform: `translateY(${thumbTop}px)` }"
+              @mousedown.stop.prevent="onThumbMouseDown"
+            />
+          </div>
+        </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>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch, type StyleValue } from 'vue'
+import type { InputInstance } from 'element-plus'
+
+const THUMB_HEIGHT = 50
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: string
+    label?: string
+    required?: boolean
+    maxlength?: number
+    rows?: number
+    maxRows?: number
+    /** 外層可指定寬度，默認隨父級撐滿 */
+    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',
+  }
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  'ai-assist': []
+}>()
+
+const inputRef = ref<InputInstance | null>(null)
+const bodyRef = ref<HTMLElement | null>(null)
+const trackRef = ref<HTMLElement | null>(null)
+const scrollbarVisible = ref(false)
+const thumbTop = ref(0)
+
+let dragStartY = 0
+let dragStartTop = 0
+let dragging = false
+let resizeObserver: ResizeObserver | null = null
+
+function openAiDialog() {
+  if (props.disabled) return
+  emit('ai-assist')
+}
+
+function onModelUpdate(value: string) {
+  emit('update:modelValue', value)
+  void nextTick(updateScrollbar)
+}
+
+/** 指定 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)
+)
+
+function getTextarea(): HTMLTextAreaElement | null {
+  const root = inputRef.value?.$el as HTMLElement | undefined
+  return root?.querySelector?.('textarea.el-textarea__inner') ?? null
+}
+
+function trackHeight(): number {
+  return trackRef.value?.clientHeight ?? 0
+}
+
+function maxThumbTop(): number {
+  return Math.max(0, trackHeight() - THUMB_HEIGHT)
+}
+
+function updateScrollbar() {
+  const el = getTextarea()
+  if (!el) {
+    scrollbarVisible.value = false
+    return
+  }
+  const { scrollTop, scrollHeight, clientHeight } = el
+  const needs = scrollHeight > clientHeight + 1
+  scrollbarVisible.value = needs
+  if (!needs) {
+    thumbTop.value = 0
+    return
+  }
+  const maxScroll = scrollHeight - clientHeight
+  const maxTop = maxThumbTop()
+  thumbTop.value = maxScroll > 0 ? (scrollTop / maxScroll) * maxTop : 0
+}
+
+function scrollToThumbTop(nextTop: number) {
+  const el = getTextarea()
+  if (!el) return
+  const maxTop = maxThumbTop()
+  const clamped = Math.min(maxTop, Math.max(0, nextTop))
+  thumbTop.value = clamped
+  const maxScroll = el.scrollHeight - el.clientHeight
+  if (maxScroll <= 0 || maxTop <= 0) return
+  el.scrollTop = (clamped / maxTop) * maxScroll
+}
+
+function onTrackMouseDown(e: MouseEvent) {
+  const track = trackRef.value
+  if (!track) return
+  const rect = track.getBoundingClientRect()
+  const clickY = e.clientY - rect.top
+  scrollToThumbTop(clickY - THUMB_HEIGHT / 2)
+  onThumbMouseDown(e)
+}
+
+function onThumbMouseDown(e: MouseEvent) {
+  dragging = true
+  dragStartY = e.clientY
+  dragStartTop = thumbTop.value
+  window.addEventListener('mousemove', onDragMove)
+  window.addEventListener('mouseup', onDragEnd)
+}
+
+function onDragMove(e: MouseEvent) {
+  if (!dragging) return
+  scrollToThumbTop(dragStartTop + (e.clientY - dragStartY))
+}
+
+function onDragEnd() {
+  dragging = false
+  window.removeEventListener('mousemove', onDragMove)
+  window.removeEventListener('mouseup', onDragEnd)
+}
+
+function bindTextareaScroll() {
+  const el = getTextarea()
+  if (!el) return
+  el.removeEventListener('scroll', updateScrollbar)
+  el.addEventListener('scroll', updateScrollbar, { passive: true })
+  updateScrollbar()
+}
+
+onMounted(() => {
+  void nextTick(() => {
+    bindTextareaScroll()
+    const el = getTextarea()
+    if (el && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => updateScrollbar())
+      resizeObserver.observe(el)
+      if (bodyRef.value) resizeObserver.observe(bodyRef.value)
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  const el = getTextarea()
+  el?.removeEventListener('scroll', updateScrollbar)
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  onDragEnd()
+})
+
+watch(
+  () => props.modelValue,
+  () => {
+    void nextTick(() => {
+      bindTextareaScroll()
+      updateScrollbar()
+    })
+  }
+)
+
+watch(
+  () => [props.height, props.maxHeight, props.rows, props.maxRows, isConstrained.value] as const,
+  () => {
+    void nextTick(() => {
+      bindTextareaScroll()
+      updateScrollbar()
+    })
+  }
+)
+
+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: 15px;
+  font-weight: 500;
+  font-family: var(--gen-ai-font-family, 'Noto Sans', 'Noto Sans TC', 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: #c53355;
+}
+
+.gen-ai-prompt-field__body {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 12px 14px 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),
+.gen-ai-prompt-field__textarea :deep(.el-textarea__wrapper.is-focus) {
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  box-shadow: none !important;
+  background: transparent;
+}
+
+.gen-ai-prompt-field__textarea :deep(.el-textarea__inner) {
+  padding: 0 4px 0 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  box-shadow: none !important;
+  background: transparent;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #303133;
+  resize: none;
+  box-sizing: border-box;
+  /* 隱藏原生滾動條，改用自定義 50px 滑塊 */
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.gen-ai-prompt-field__textarea :deep(.el-textarea__inner::-webkit-scrollbar) {
+  width: 0 !important;
+  height: 0 !important;
+  display: none !important;
+}
+
+.gen-ai-prompt-field__textarea :deep(.el-textarea__inner:focus) {
+  border: none;
+  outline: none;
+  box-shadow: none !important;
+}
+
+.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;
+}
+
+/* 與章節下拉同款：寬 8px、滑塊固定高 50px */
+.gen-ai-prompt-field__scrollbar {
+  position: absolute;
+  top: 12px;
+  right: 4px;
+  bottom: 4px;
+  width: 8px;
+  z-index: 2;
+}
+
+.gen-ai-prompt-field__scrollbar-thumb {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 8px;
+  height: 50px;
+  border-radius: 4px;
+  background-color: #999;
+  cursor: default;
+  will-change: transform;
+}
+
+.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>