agent_jrxml/frontend/src/components/UnifiedInput.vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { fileIcon } from '../utils/format'

const props = defineProps<{
  disabled: boolean
}>()

const emit = defineEmits<{
  send: [text: string, files: File[]]
}>()

const text = ref('')
const attachedFiles = ref<{ id: string; name: string; file: File }[]>([])
const textareaRef = ref<HTMLTextAreaElement | null>(null)
const fileInputRef = ref<HTMLInputElement | null>(null)

const canSend = computed(() =>
  !props.disabled && (text.value.trim() || attachedFiles.value.length > 0)
)

function triggerFileInput() {
  fileInputRef.value?.click()
}

function handleFileSelect(e: Event) {
  const input = e.target as HTMLInputElement
  if (input.files) {
    for (const f of input.files) {
      attachedFiles.value.push({ id: crypto.randomUUID(), name: f.name, file: f })
    }
  }
  input.value = ''
}

function removeFile(id: string) {
  attachedFiles.value = attachedFiles.value.filter(f => f.id !== id)
}

function handleSend() {
  if (!canSend.value) return
  emit('send', text.value, attachedFiles.value.map(f => f.file))
  text.value = ''
  attachedFiles.value = []
}

function handleKeydown(e: KeyboardEvent) {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    handleSend()
  }
}

// Auto-resize textarea
function autoResize() {
  const el = textareaRef.value
  if (el) {
    el.style.height = 'auto'
    el.style.height = Math.min(el.scrollHeight, 120) + 'px'
  }
}

// Drag & drop
function handleDrop(e: DragEvent) {
  e.preventDefault()
  if (e.dataTransfer?.files) {
    for (const f of e.dataTransfer.files) {
      attachedFiles.value.push({ id: crypto.randomUUID(), name: f.name, file: f })
    }
  }
}

function handleDragover(e: DragEvent) {
  e.preventDefault()
  if (e.dataTransfer) {
    e.dataTransfer.dropEffect = 'copy'
  }
}

// Paste support
function handlePaste(e: ClipboardEvent) {
  const items = e.clipboardData?.items
  if (!items) return
  for (const item of items) {
    if (item.kind === 'file') {
      const f = item.getAsFile()
      if (f) {
        e.preventDefault()
        attachedFiles.value.push({ id: crypto.randomUUID(), name: f.name || 'clipboard.png', file: f })
      }
    }
  }
}
</script>

<template>
  <div class="unified-input" @drop="handleDrop" @dragover="handleDragover">
    <!-- File chips -->
    <div v-if="attachedFiles.length > 0" class="file-chips">
      <div v-for="f in attachedFiles" :key="f.id" class="chip">
        <span class="chip-icon">{{ fileIcon(f.name) }}</span>
        <span class="chip-name">{{ f.name }}</span>
        <button class="chip-remove" @click="removeFile(f.id)">&times;</button>
      </div>
    </div>

    <!-- Input row -->
    <div class="input-row">
      <button class="attach-btn" @click="triggerFileInput" title="附加文件">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
        </svg>
      </button>

      <textarea
        ref="textareaRef"
        v-model="text"
        class="text-input"
        placeholder="描述您的报表需求... (Enter 发送, Shift+Enter 换行)"
        :disabled="disabled"
        @keydown="handleKeydown"
        @input="autoResize"
        @paste="handlePaste"
        rows="1"
      ></textarea>

      <button
        class="send-btn"
        :disabled="!canSend"
        @click="handleSend"
        title="发送"
      >
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
        </svg>
      </button>
    </div>

    <input
      ref="fileInputRef"
      type="file"
      multiple
      accept="image/*,.pdf,.docx,.doc,.xlsx,.xls,.txt,.csv"
      style="display:none"
      @change="handleFileSelect"
    />
  </div>
</template>

<style scoped>
.unified-input {
  border: 1px solid #45475a;
  border-radius: 12px;
  background: #1e1e2e;
  margin: 0 24px 16px;
  padding: 8px 12px;
  transition: border-color 0.2s;
}

.unified-input:focus-within {
  border-color: #cba6f7;
}

.file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #313244;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
}

.chip-icon {
  font-size: 14px;
}

.chip-name {
  color: #cdd6f4;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-remove {
  background: none;
  border: none;
  color: #6c7086;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
}

.chip-remove:hover {
  color: #f38ba8;
}

.input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.attach-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: #313244;
  color: #a6adc8;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.attach-btn:hover {
  background: #45475a;
  color: #cdd6f4;
}

.text-input {
  flex: 1;
  background: transparent;
  border: none;
  color: #cdd6f4;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.5;
  padding: 8px 0;
  min-height: 36px;
  max-height: 120px;
}

.text-input::placeholder {
  color: #6c7086;
}

.send-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: #cba6f7;
  color: #1e1e2e;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-btn:hover:not(:disabled) {
  background: #b4befe;
}

.send-btn:disabled {
  background: #45475a;
  color: #6c7086;
  cursor: not-allowed;
}
</style>