调整v-model

src/components/chat.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="chat">
-    <el-row align="middle">
+    <el-row align="middle mar-b16">
       <div class="modelInfo">
         <img :src="config.model.avatar" alt=""/>
         <div class="fill mar-l8">
@@ -16,7 +16,10 @@
     </el-row>
     <thinking-bar v-show="loading"/>
     <chat-content class="fill"/>
-    <chat-input/>
+    <el-row class="mar-t8" align="middle">
+      <chat-input class="fill mar-r8" v-model="inputText"/>
+      <el-button type="primary" @click="handleSend">发送</el-button>
+    </el-row>
   </section>
 </template>
 
@@ -33,39 +36,14 @@ export default {
   },
   data() {
     return {
-      loading: true
+      loading: false,
+      inputText: "",
     }
   },
   methods: {
-    handleResize() {
-      if (window.innerWidth <= 700) {
-        this.$nextTick(() => {
-          document.querySelectorAll('.chat-content')[0].style.height = '93%';
-          this.buttonStatus = false
-          const textareaMsg = document.getElementById("textareaMsg");
-          textareaMsg.style.marginLeft = "0px";
-          this.personInfoSpan = [14, 0, 10];
-          const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
-          if (isMobile) {
-            document.querySelectorAll('.chatInputs')[0].style.margin = '0%';
-          } else {
-            document.querySelectorAll('.chatInputs')[0].style.margin = '3%';
-          }
-        });
-      } else {
-        this.$nextTick(() => {
-          document.querySelectorAll('.chat-content')[0].style.height = '88%';
-          this.buttonStatus = true
-          this.personInfoSpan = [1, 17, 6];
-        });
-      }
-    },
-  },
-  created() {
-    window.addEventListener('resize', this.handleResize)
-  },
-  unmounted() {
-    window.removeEventListener('resize', this.handleResize)
+    handleSend() {
+
+    }
   }
 }
 </script>

src/components/chatInput.vue

@@ -1,14 +1,21 @@
 <template>
   <section class="chatInput">
-
+    <!--todo 第二阶段接入音频-->
+    <el-input type="textarea" placeholder="请输入你想问的内容" class="inputs" maxlength="2048" rows="2" v-model="text" @change="v=>$emit('update:modelValue',v)"/>
   </section>
 </template>
 
 <script>
 export default {
   name: "chatInput",
+  props: {
+    modelValue: {default: null}
+  },
+  emits: ['update:modelValue'],
   data() {
-    return {}
+    return {
+      text: ""
+    }
   },
   methods: {},
   created() {
@@ -18,5 +25,18 @@ export default {
 
 <style lang="scss" scoped>
 .chatInput {
+  z-index: 202305121621;
+  min-height: 50px;
+  max-height: 400px;
+  max-width: 100%;
+  min-width: 45%;
+
+  :deep(.inputs) {
+    textarea {
+      background-color: rgb(66, 70, 86);
+      color: white;
+      border-color: #999;
+    }
+  }
 }
 </style>

src/components/settings.vue

@@ -12,10 +12,13 @@ export default {
     event: "input"
   },
   props: {
-    settings: {default: () => ({})}
+    modelValue: {default: () => ({})}
   },
+  emits: ["update:modelValue"],
   data() {
-    return {}
+    return {
+      settings: {}
+    }
   },
   methods: {},
   created() {

src/components/thinkingBar.vue

@@ -11,7 +11,6 @@ export default {
 <style lang="scss" scoped>
 .thinkingBar {
   position: relative;
-  margin-top: 16px;
   height: 2px;
   background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
   background-size: 100%;