四步不换行问题和输入框高度问题

src/views/AIchat.vue

@@ -957,6 +957,7 @@ async function showThinkingProcess(stockName = null) {
     flag: true,
     content: "夺宝奇兵大模型正在思考",
     gif: thinkingGif,
+    nowrap: true,
   });
   chatStore.messages.push(thinkingMessage1);
   await new Promise((resolve) => setTimeout(resolve, 1500));
@@ -970,6 +971,7 @@ async function showThinkingProcess(stockName = null) {
     flag: true,
     content: "正在解析关键数据",
     gif: analyzeGif,
+    nowrap: true,
   });
   chatStore.messages.push(thinkingMessage2);
 
@@ -990,6 +992,7 @@ async function showThinkingProcess(stockName = null) {
     flag: true,
     content: `正在生成${stockName}全景作战报告`,
     gif: generateGif,
+    nowrap: true,
   });
   chatStore.messages.push(thinkingMessage3);
   await new Promise((resolve) => setTimeout(resolve, 1500));
@@ -1001,6 +1004,7 @@ async function showThinkingProcess(stockName = null) {
     class: "ing",
     type: "ing",
     content: "报告已生成！",
+    nowrap: true,
   });
   chatStore.messages.push(thinkingMessage4);
   await new Promise((resolve) => setTimeout(resolve, 1500));
@@ -4506,7 +4510,7 @@ onUnmounted(() => {
             alt="思考过程"
             class="thinking-gif"
           />
-          <div class="ai-message-content">
+          <div class="ai-message-content" :class="{ fourStep: msg.nowrap }">
             <div v-if="msg.flag">
               <span>{{ msg.content }}</span>
               <span class="loading-dots">
@@ -5071,7 +5075,7 @@ p {
   align-items: center;
   gap: 10px;
   margin-right: auto;
-  max-width: 80%;
+  /* max-width: 80%; */
 }
 
 /* 思考过程动图样式 */
@@ -5102,4 +5106,8 @@ p {
   width: fit-content;
   overflow: visible;
 }
+
+.fourStep {
+  white-space: nowrap;
+}
 </style>

src/views/homePage.vue

@@ -553,6 +553,9 @@ const adjustFooterPosition = (height) => {
   }, 200);
 };
 
+// 是否正在输入法组合
+const inputing = ref(false);
+
 const onFocus = function () {
   const visualViewport = window.visualViewport;
   // 获取可视区域高度
@@ -569,6 +572,7 @@ const onFocus = function () {
 };
 
 const onBlur = function () {
+  inputing.value = false;
   const visualViewport = window.visualViewport;
   setTimeout(() => {
     console.log("输入框失焦");
@@ -896,13 +900,15 @@ onUnmounted(() => {
               @focus="onFocus"
               @blur="onBlur"
               :autosize="{ minRows: 1, maxRows: 4 }"
-              placeholder="请输入股票名称或股票代码..."
               class="msg-input"
               @keydown.enter.exact.prevent="
                 isLoading || isInputDisabled ? null : sendMessage()
               "
               :disabled="isInputDisabled"
               resize="none"
+              :class="{ input: !message && !inputing }"
+              @compositionstart="inputing = true"
+              @compositionend="inputing = false"
             >
             </el-input>
             <img
@@ -1520,12 +1526,6 @@ body {
   padding-right: 45px !important;
 }
 
-.msg-input:deep(.el-textarea__inner::placeholder) {
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-}
-
 .msg-input {
   min-height: 34px;
   width: 100%;
@@ -1545,6 +1545,20 @@ body {
   outline: none;
 }
 
+.input::before {
+  content: "请输入股票名称或股票代码...";
+  position: absolute;
+  left: 11px;
+  top: 5px;
+  color: var(--el-text-color-secondary);
+  pointer-events: none;
+  white-space: nowrap ;
+  overflow-x: hidden ;
+  text-overflow: ellipsis ;
+  width: 80%;
+  z-index: 6;
+}
+
 @media (max-width: 768px) {
   .action-btn {
     height: 21px;