Fix upload issue for chat (#23)

Co-authored-by: Germey <[email protected]>
AceDataCloud · Apr 6, 2024 · e031760 · e031760
1 parent 89ad558
commit e031760
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 31 deletions.
diff --git a/change/@acedatacloud-hub-0a2c66aa-22b5-460a-896a-221c2cf7b994.json b/change/@acedatacloud-hub-0a2c66aa-22b5-460a-896a-221c2cf7b994.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix upload issue",
+  "packageName": "@acedatacloud/hub",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/src/components/chat/InputBox.vue b/src/components/chat/InputBox.vue
@@ -1,27 +1,27 @@
 <template>
+  <el-upload
+    v-if="canUpload"
+    v-model:file-list="fileList"
+    :class="{
+      upload: true
+    }"
+    :disabled="!canUpload"
+    name="file"
+    :show-file-list="true"
+    :limit="1"
+    :multiple="false"
+    :action="uploadUrl"
+    :on-exceed="onExceed"
+    :on-error="onError"
+    :headers="headers"
+  >
+    <el-tooltip class="box-item" effect="dark" :content="$t('chat.message.uploadFile')" placement="top">
+      <span class="btn btn-upload">
+        <font-awesome-icon icon="fa-solid fa-paperclip" class="icon icon-attachment" />
+      </span>
+    </el-tooltip>
+  </el-upload>
   <div class="input-box">
-    <el-upload
-      v-model:file-list="fileList"
-      :class="{
-        upload: true,
-        disabled: !canUpload
-      }"
-      :disabled="!canUpload"
-      name="file"
-      :show-file-list="true"
-      :limit="1"
-      :multiple="false"
-      :action="uploadUrl"
-      :on-exceed="onExceed"
-      :on-error="onError"
-      :headers="headers"
-    >
-      <el-tooltip class="box-item" effect="dark" :content="$t('chat.message.uploadFile')" placement="top">
-        <span class="btn btn-upload">
-          <font-awesome-icon icon="fa-solid fa-paperclip" class="icon icon-attachment" />
-        </span>
-      </el-tooltip>
-    </el-upload>
     <span
       :class="{
         btn: true,
@@ -138,6 +138,14 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.upload {
+  display: flex;
+  height: 40px;
+  .el-upload-list {
+    flex: 1;
+  }
+}
+
 .input-box {
   position: relative;
   .input {
@@ -151,11 +159,6 @@ export default defineComponent({
       line-height: 30px;
     }
   }
-  .el-upload-list {
-    position: absolute;
-    width: 400px;
-    bottom: 45px;
-  }
 
   .el-textarea.is-disabled .el-textarea__inner {
     background-color: initial;
@@ -171,7 +174,7 @@ export default defineComponent({
   background: none;
   box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
   .upload {
-    display: inline-block;
+    display: block;
     &.disabled {
       .btn-upload {
         cursor: not-allowed;
@@ -184,7 +187,6 @@ export default defineComponent({
   .input {
     border: none;
     width: calc(100% - 80px);
-    margin-left: 30px;
   }
   .btn {
     display: block;

diff --git a/src/pages/chat/Conversation.vue b/src/pages/chat/Conversation.vue
@@ -289,7 +289,7 @@ export default defineComponent({
 .dialogue {
   flex: 1;
   overflow-y: scroll;
-  padding: 20px 0;
+  margin: 15px 0;
   position: relative;
   .messages {
     padding-top: 30px;

diff --git a/src/pages/chatdoc/Conversation.vue b/src/pages/chatdoc/Conversation.vue
@@ -256,7 +256,7 @@ export default defineComponent({
   .dialogue {
     flex: 1;
     overflow-y: scroll;
-    padding: 20px 0;
+    margin: 15px 0;
     position: relative;
     .messages {
       .message {