Bläddra i källkod

删去智能体、附件、等输入框选项

mrh 9 månader sedan
förälder
incheckning
b35ba1f518
2 ändrade filer med 14 tillägg och 79 borttagningar
  1. 7 39
      src/components/ChatInput.vue
  2. 7 40
      src/components/FileUpload.vue

+ 7 - 39
src/components/ChatInput.vue

@@ -1,60 +1,29 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import FileUpload from './FileUpload.vue';
 
-const { value } = defineProps(['value']);
+const { value: inputValue } = defineProps(['value']);
 const emit = defineEmits(['submit', 'update:value']);
 
-const uploadRef = ref();
-const inputFootIcons = [
-  { icon: 'icon-at', text: '智能体' },
-  { icon: 'icon-standard', text: '词库' },
-  { icon: 'icon-add', text: '附件' },
-];
-
-const handleUpload = () => {
-  const input = document.createElement('input');
-  input.type = 'file';
-  input.multiple = true;
-  input.onchange = (e: Event) => {
-    const files = (e.target as HTMLInputElement).files;
-    if (files) {
-      uploadRef.value.handleFiles(files);
-    }
-  };
-  input.click();
-};
 </script>
 
 <template>
-  <FileUpload ref="uploadRef">
     <McInput
-      :value="value"
+      :value="inputValue"
       :maxLength="2000"
-      @change="(value: string) => emit('update:value', value)"
-      @submit="emit('submit', value)"
+      @change="(newValue: string) => emit('update:value', newValue)"
+      @submit="emit('submit', inputValue)"
     >
       <template #extra>
         <div class="input-foot-wrapper">
           <div class="input-foot-left">
-            <span v-for="(item, index) in inputFootIcons" :key="index">
-              <i 
-                v-if="item.icon === 'icon-add'"
-                :class="item.icon"
-                @click="handleUpload"
-                style="cursor: pointer"
-              ></i>
-              <i v-else :class="item.icon"></i>
-              {{ item.text }}
-            </span>
             <span class="input-foot-dividing-line"></span>
-            <span class="input-foot-maxlength">{{ value.length }}/2000</span>
+            <span class="input-foot-maxlength">{{ inputValue.length }}/2000</span>
           </div>
           <div class="input-foot-right">
             <d-button 
               icon="op-clearup" 
               shape="round" 
-              :disabled="!value" 
+              :disabled="!inputValue" 
               @click="emit('update:value', '')"
             >
               清空输入
@@ -63,5 +32,4 @@ const handleUpload = () => {
         </div>
       </template>
     </McInput>
-  </FileUpload>
-</template>
+</template>

+ 7 - 40
src/components/FileUpload.vue

@@ -1,50 +1,17 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
-const emit = defineEmits(['upload-success']);
-
-const dropZoneRef = ref<HTMLElement>();
-const isDragging = ref(false);
-
-const handleFiles = (files: FileList) => {
-  // TODO: 实际文件上传逻辑
-  console.log('上传文件:', files);
-  emit('upload-success', Array.from(files));
-};
-
-const onDragover = (e: DragEvent) => {
-  e.preventDefault();
-  isDragging.value = true;
-};
-
-const onDragleave = () => {
-  isDragging.value = false;
-};
-
-const onDrop = (e: DragEvent) => {
-  e.preventDefault();
-  isDragging.value = false;
-  if (e.dataTransfer?.files) {
-    handleFiles(e.dataTransfer.files);
-  }
-};
-
-defineExpose({
-  handleFiles
+const uploadedFiles = ref([]);
+const uploadOptions = ref({
+  uri: 'https://run.mocky.io/v3/132b3ea3-23ea-436b-aed4-c43ef9d116f0',
 });
+
 </script>
 
 <template>
-  <div 
-    class="drop-zone"
-    ref="dropZoneRef"
-    @dragover.prevent="onDragover"
-    @dragleave.prevent="onDragleave"
-    @drop.prevent="onDrop"
-    :class="{ dragover: isDragging }"
-  >
-    <slot />
-  </div>
+    <d-upload v-model="uploadedFiles" :upload-options="uploadOptions" droppable />
+
+<slot />
 </template>
 
 <style scoped>