feat: 组件样式分离

pages/chat/ChatInputArea.vue

@@ -9,6 +9,8 @@
 
       <!-- 输入框/语音按钮容器 -->
       <view class="input-button-container">
+        <Interceptor />
+
         <textarea
           ref="textareaRef"
           v-if="!isVoiceMode"
@@ -60,8 +62,10 @@
 </template>
 
 <script setup>
-import { ref, watch, nextTick, onMounted, computed, defineExpose } from "vue";
+import { ref, watch, nextTick, onMounted, defineExpose } from "vue";
+import { checkToken } from "@/hooks/useGoLogin";
 import RecordingWaveBtn from "@/components/Speech/RecordingWaveBtn.vue";
+import Interceptor from "@/components/Interceptor/index.vue";
 
 const plugin = requirePlugin("WechatSI");
 const manager = plugin.getRecordRecognitionManager();
@@ -113,15 +117,17 @@ const toggleVoiceMode = () => {
 
 // 处理语音按钮长按开始
 const handleVoiceTouchStart = () => {
-  manager.start({ lang: "zh_CN" });
+  checkToken().then(() => {
+    manager.start({ lang: "zh_CN" });
 
-  visibleWaveBtn.value = true;
+    visibleWaveBtn.value = true;
 
-  // 启动音频条动画
+    // 启动音频条动画
-  nextTick(() => {
+    nextTick(() => {
-    if (recordingWaveBtnRef.value) {
+      if (recordingWaveBtnRef.value) {
-      recordingWaveBtnRef.value.startAnimation();
+        recordingWaveBtnRef.value.startAnimation();
-    }
+      }
+    });
   });
 };
 
@@ -230,88 +236,5 @@ defineExpose({ focusInput });
 </script>
 
 <style scoped lang="scss">
-.area-input {
+@import "./styles/ChatInputArea.scss";
-  display: flex;
-  align-items: center;
-  border-radius: 22px;
-  background-color: #ffffff;
-  box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
-  margin: 0 12px;
-  margin-bottom: 8px;
-
-  .input-container-voice {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    align-self: flex-end;
-    width: 44px;
-    height: 44px;
-
-    image {
-      width: 22px;
-      height: 22px;
-    }
-  }
-
-  .input-button-container {
-    flex: 1;
-    position: relative;
-  }
-
-  .hold-to-talk-button {
-    width: 100%;
-    height: 44px;
-    color: #333333;
-    font-size: 16px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #ffffff;
-    transition: all 0.2s ease;
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .input-container-send {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    align-self: flex-end;
-    width: 44px;
-    height: 44px;
-
-    .input-container-send-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-    }
-
-    image {
-      width: 28px;
-      height: 28px;
-    }
-  }
-
-  .textarea {
-    flex: 1;
-    box-sizing: border-box;
-    width: 100%;
-    max-height: 92px;
-    min-height: 22px;
-    font-size: 16px;
-    line-height: 22px;
-    margin: 6px 0;
-
-    &::placeholder {
-      color: #cccccc;
-      line-height: normal;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
 </style>

pages/chat/styles/ChatInputArea.scss

@@ -0,0 +1,84 @@
+.area-input {
+  display: flex;
+  align-items: center;
+  border-radius: 22px;
+  background-color: #ffffff;
+  box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
+  margin: 0 12px;
+  margin-bottom: 8px;
+
+  .input-container-voice {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-end;
+    width: 44px;
+    height: 44px;
+
+    image {
+      width: 22px;
+      height: 22px;
+    }
+  }
+
+  .input-button-container {
+    flex: 1;
+    position: relative;
+  }
+
+  .hold-to-talk-button {
+    width: 100%;
+    height: 44px;
+    color: #333333;
+    font-size: 16px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #ffffff;
+    transition: all 0.2s ease;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .input-container-send {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-end;
+    width: 44px;
+    height: 44px;
+
+    .input-container-send-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    image {
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  .textarea {
+    flex: 1;
+    box-sizing: border-box;
+    width: 100%;
+    max-height: 92px;
+    min-height: 22px;
+    font-size: 16px;
+    line-height: 22px;
+    margin: 6px 0;
+
+    &::placeholder {
+      color: #cccccc;
+      line-height: normal;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}