@templmf/temp-solf-lmf 0.0.55 → 0.0.56

package/guanwang/src/chat-sdk/core/components/InputBar.vue

@@ -1,354 +0,0 @@
-<template>
-  <div
-    class="input-wrap"
-    :class="{ 'is-dragging': isDragging }"
-    @dragover.prevent="isDragging = true"
-    @dragleave.prevent="isDragging = false"
-    @drop.prevent="onDrop"
-  >
-    <!-- 附件预览条 -->
-    <FileAttachment
-      :attachments="attachments"
-      @remove="removeAttachment"
-    />
-
-    <!-- 拖拽提示遮罩 -->
-    <div v-if="isDragging" class="drop-overlay">
-      <Paperclip :size="28" />
-      <span>松开以添加附件</span>
-    </div>
-
-    <!-- 输入行 -->
-    <div class="input-row">
-      <!-- 上传按钮 -->
-      <el-tooltip content="添加附件（图片/PDF/代码/文档）" placement="top">
-        <el-button
-          text
-          circle
-          :disabled="isLoading"
-          class="upload-btn"
-          :class="{ 'has-files': attachments.length > 0 }"
-          @click="triggerFileInput"
-        >
-          <Paperclip :size="18" />
-        </el-button>
-      </el-tooltip>
-
-      <!-- 隐藏的 file input -->
-      <input
-        ref="fileInputRef"
-        type="file"
-        multiple
-        :accept="ACCEPT_TYPES"
-        style="display:none"
-        @change="onFileChange"
-      />
-
-      <!-- 文字输入框 -->
-      <el-input
-        ref="inputRef"
-        v-model="input"
-        type="textarea"
-        :autosize="{ minRows: 1, maxRows: 4 }"
-        :placeholder="currentPlaceholder"
-        resize="none"
-        style="flex: 1;"
-        @keydown="onKey"
-        @paste="onPaste"
-      />
-
-      <!-- 发送按钮 -->
-      <el-button
-        type="primary"
-        :disabled="!canSend"
-        :loading="isLoading"
-        class="send-btn"
-        @click="send"
-      >
-        <Send v-if="!isLoading" :size="18" />
-      </el-button>
-    </div>
-
-    <!-- 处理中提示 -->
-    <div v-if="processingFile" class="processing-bar">
-      <span class="processing-dot" />
-      正在处理附件：{{ processingFile }}...
-    </div>
-
-    <!-- 模型选择工具栏 -->
-     <!-- v-if="showModelSelector"  -->
-    <div class="model-bar">
-      <span class="model-bar__label">模型</span>
-      <el-select
-        v-model="localSelectedId"
-        size="small"
-        class="model-select"
-        @change="id => emit('select-model', id)"
-      >
-        <el-option
-          v-for="m in availableModels"
-          :key="m.id"
-          :label="m.name"
-          :value="m.id"
-        />
-      </el-select>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import { Send, Paperclip } from 'lucide-vue-next'
-import { ElMessage } from 'element-plus'
-import FileAttachment from '../../features/upload/FileAttachment.vue'
-import { processFile, buildMessageContent, ACCEPT_TYPES, FILE_TYPE_HINT } from '../../features/upload/useFileHandler.js'
-
-const props = defineProps({
-  isLoading:        { type: Boolean, default: false },
-  placeholder:      { type: String,  default: '描述您的需求...' },
-  autoFocus:        { type: Boolean, default: false },
-  // 模型相关（由 ChatBox 从 chatStore 传入）
-  availableModels:  { type: Array,   default: () => [] },
-  selectedModelId:  { type: String,  default: '' },
-  showModelSelector: { type: Boolean, default: false },
-})
-
-const emit = defineEmits(['send', 'select-model'])
-
-const input         = ref('')
-const inputRef      = ref(null)
-const fileInputRef  = ref(null)
-const attachments   = ref([])
-const isDragging    = ref(false)
-const processingFile = ref('')
-
-// 本地临时选中（用户在当次会话里临时切换，和 store 双向同步）
-// selectedModelId 未传时自动取第一个可用模型，避免选择框空白
-const localSelectedId = ref(props.selectedModelId || props.availableModels[0]?.id || '')
-
-const canSend = computed(() =>
-  !props.isLoading && (input.value.trim().length > 0 || attachments.value.length > 0)
-)
-
-const currentPlaceholder = computed(() =>
-  attachments.value.length > 0 ? '描述一下你想对这些文件做什么...' : props.placeholder
-)
-
-onMounted(() => {
-  if (props.autoFocus) setTimeout(() => inputRef.value?.focus(), 100)
-})
-
-// ── 发送 ──────────────────────────────────────────────────────────
-function send() {
-  if (!canSend.value) return
-  const text    = input.value.trim()
-  const content = buildMessageContent(text, attachments.value)
-
-  emit('send', {
-    content,
-    displayText: text,
-    // 只有和 store 里的 selectedModelId 不同时才传 override
-    modelOverride: localSelectedId.value !== props.selectedModelId
-      ? localSelectedId.value
-      : undefined,
-    attachments: attachments.value.map(a => ({
-      id:       a.id,
-      fileName: a.fileName,
-      type:     a.type,
-      preview:  a.preview,
-      ext:      a.ext,
-    })),
-  })
-
-  input.value       = ''
-  attachments.value = []
-}
-
-function onKey(e) {
-  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send() }
-}
-
-// ── 文件处理 ──────────────────────────────────────────────────────
-function triggerFileInput() { fileInputRef.value?.click() }
-
-async function onFileChange(e) {
-  const files = Array.from(e.target.files || [])
-  e.target.value = ''   // 清空 input 以便同文件可重复选
-  await addFiles(files)
-}
-
-async function onDrop(e) {
-  isDragging.value = false
-  const files = Array.from(e.dataTransfer.files || [])
-  await addFiles(files)
-}
-
-// 粘贴图片（截图直接粘贴）
-async function onPaste(e) {
-  const items = Array.from(e.clipboardData?.items || [])
-  // 修复：部分浏览器粘贴截图时 item.type 为空字符串，改为只要 kind==='file' 就尝试处理
-  const fileItems = items.filter(i => i.kind === 'file')
-  if (fileItems.length === 0) return
-  const files = fileItems.map(i => i.getAsFile()).filter(Boolean)
-  if (files.length === 0) return
-  e.preventDefault()
-  await addFiles(files)
-}
-
-async function addFiles(files) {
-  const MAX_ATTACHMENTS = 5
-  const remaining = MAX_ATTACHMENTS - attachments.value.length
-  if (remaining <= 0) {
-    ElMessage.warning(`最多同时上传 ${MAX_ATTACHMENTS} 个文件`)
-    return
-  }
-
-  for (const file of files.slice(0, remaining)) {
-    processingFile.value = file.name
-    try {
-      const att = await processFile(file)
-      attachments.value.push(att)
-    } catch (err) {
-      ElMessage.error(`${file.name}：${err.message}`)
-    }
-  }
-  processingFile.value = ''
-}
-
-function removeAttachment(id) {
-  attachments.value = attachments.value.filter(a => a.id !== id)
-}
-</script>
-
-<style scoped>
-.input-wrap {
-  position: relative;
-  border-radius: 14px;
-  border: 1px solid var(--border-default);
-  background: var(--bg-secondary);
-  transition: border-color 0.2s, box-shadow 0.2s;
-  overflow: hidden;
-}
-.input-wrap:focus-within {
-  border-color: rgba(26,111,196,0.6);
-  box-shadow: 0 0 0 3px rgba(26,111,196,0.08);
-}
-.input-wrap.is-dragging {
-  border-color: var(--brand-500);
-  box-shadow: 0 0 0 3px rgba(26,111,196,0.15);
-}
-
-/* 拖拽遮罩 */
-.drop-overlay {
-  position: absolute; inset: 0; z-index: 10;
-  background: rgba(26,111,196,0.1);
-  display: flex; flex-direction: column;
-  align-items: center; justify-content: center;
-  gap: 8px; color: var(--brand-400);
-  font-size: 14px; font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  pointer-events: none;
-}
-
-/* 输入行 */
-.input-row {
-  display: flex;
-  align-items: flex-end;
-  gap: 6px;
-  padding: 8px 8px 8px 6px;
-}
-
-.upload-btn {
-  color: var(--text-muted) !important;
-  transition: color 0.15s !important;
-  flex-shrink: 0;
-  margin-bottom: 2px;
-}
-.upload-btn:hover { color: var(--brand-400) !important; }
-.upload-btn.has-files { color: var(--brand-500) !important; }
-
-.send-btn {
-  flex-shrink: 0;
-  width: 44px !important;
-  height: 44px !important;
-  border-radius: 10px !important;
-  padding: 0 !important;
-  margin-bottom: 2px;
-}
-
-/* 去掉输入框自带边框（改由 .input-wrap 统一管理） */
-:deep(.el-textarea__inner) {
-  border: none !important;
-  box-shadow: none !important;
-  background: transparent !important;
-  border-radius: 0 !important;
-  padding: 10px 6px !important;
-  font-size: 14px !important;
-  min-height: 44px !important;
-  line-height: 1.5 !important;
-  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif !important;
-  resize: none !important;
-}
-:deep(.el-textarea__inner:focus) {
-  box-shadow: none !important;
-}
-
-/* 处理中提示 */
-.processing-bar {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 6px 14px 8px;
-  font-size: 12px;
-  font-family: Inter, 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-  color: var(--text-muted);
-  border-top: 1px solid var(--border-subtle);
-}
-.processing-dot {
-  width: 6px; height: 6px; border-radius: 50%;
-  background: var(--brand-400);
-  animation: pulseSlow 1s ease infinite;
-}
-
-/* ── 模型选择栏 ── */
-.model-bar {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 5px 12px 7px;
-  border-top: 1px solid var(--border-subtle);
-}
-.model-bar__label {
-  font-size: 11px;
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-.model-select {
-  width: 200px;
-}
-:deep(.model-select .el-input__wrapper) {
-  background: transparent !important;
-  box-shadow: none !important;
-  border: 1px solid var(--border-default) !important;
-  border-radius: 6px !important;
-  padding: 0 8px !important;
-  height: 26px !important;
-  font-size: 11px !important;
-  font-family: 'Cascadia Code', 'Consolas', monospace !important;
-  transition: border-color 0.15s !important;
-}
-:deep(.model-select .el-input__wrapper:hover),
-:deep(.model-select .el-input__wrapper.is-focus) {
-  border-color: var(--brand-500) !important;
-}
-:deep(.model-select .el-input__inner) {
-  font-size: 11px !important;
-  font-family: 'Cascadia Code', 'Consolas', monospace !important;
-  color: var(--text-secondary) !important;
-  height: 24px !important;
-  line-height: 24px !important;
-}
-:deep(.model-select .el-select__caret) {
-  color: var(--text-muted) !important;
-  font-size: 11px !important;
-}
-</style>