fix: 音频文件

apps/web-antd/src/views/business/chat/components/MessageInput.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { nextTick, onMounted, onUnmounted, provide, ref } from 'vue';
+import { ref, provide, nextTick, onMounted, onUnmounted } from 'vue';
 
 import { message } from 'ant-design-vue';
 
@@ -13,6 +13,14 @@ import CustomTextarea from './CustomTextarea.vue';
 import EmojiPicker from './EmojiPicker.vue';
 import FileUploadPreview from './FileUploadPreview.vue';
 
+// 定义 props
+const props = defineProps({
+  currentFriend: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
 const userStore = useUserStore();
 const chatStore = useChatStore();
 const themeStore = useThemeStore();
@@ -244,65 +252,84 @@ onMounted(() => {
 onUnmounted(() => {
   window.removeEventListener('audioRecorded', handleAudioRecorded);
 });
+
+// 定义 emits
+const emit = defineEmits([
+  'sendMessage',
+  'openPrescription' // 添加开方事件
+]);
+
+// 开方功能触发函数
+const handleOpenPrescription = () => {
+  // 获取当前会话的register_id，这里假设可以通过某种方式获取
+  // 例如从聊天存储或props中获取
+  const registerId = props.currentFriend?.register_id || 66;
+
+  if (registerId) {
+    emit('openPrescription', registerId);
+  } else {
+    console.warn('无法获取当前会话的register_id');
+    // 可以添加一个提示或使用默认值
+    emit('openPrescription', 0);
+  }
+};
+
 </script>
 
 <template>
-  <div :class="{ dark: themeStore.isDarkMode }" class="message-input-area">
+  <div class="message-input-container" :class="{ dark: themeStore.isDarkMode }">
+
     <!-- 文件上传预览 -->
     <FileUploadPreview v-if="uploadPreview" />
     <!-- 表情选择器 -->
     <EmojiPicker v-if="showEmojiPicker" class="mb-10" @select="insertEmoji" />
+    <!-- 工具栏 -->
+    <div class="toolbar">
+      <button
+        class="function-btn prescription-button"
+        @click="handleOpenPrescription"
+        title="开方"
+      >
+        <i class="fas fa-file-medical"></i>
+<!--        <i class="fas fa-prescription"></i>-->
+      </button>
+      <button
+        class="function-btn"
+        @click="triggerFileInput('image')"
+        title="发送图片"
+      >
+        <i class="fas fa-image"></i>
+      </button>
+      <button
+        class="function-btn"
+        @click="triggerFileInput('video')"
+        title="发送视频"
+      >
+        <i class="fas fa-video"></i>
+      </button>
+      <button
+        :class="{ active: showEmojiPicker }"
+        class="function-btn"
+        title="选择表情"
+        @click="toggleEmojiPicker"
+      >
+        <i class="fas fa-smile"></i>
+      </button>
+      <button
+        :class="{ recording: isRecording }"
+        class="function-btn record-btn"
+        title="按住录音"
+        @mousedown="startRecording"
+        @mouseleave="stopRecording"
+        @mouseup="stopRecording"
+        @touchend="stopRecording"
+        @touchstart="startRecording"
+      >
+        <i class="fas fa-microphone"></i>
+      </button>
+    </div>
 
     <div class="input-container">
-      <!-- 功能按钮区域 -->
-      <div class="function-buttons">
-        <button
-          class="function-btn"
-          title="发送图片"
-          @click="triggerFileInput('image')"
-        >
-          <i class="fas fa-image"></i>
-          <div class="btn-ripple"></div>
-        </button>
-
-        <button
-          class="function-btn"
-          title="发送视频"
-          @click="triggerFileInput('video')"
-        >
-          <i class="fas fa-video"></i>
-          <div class="btn-ripple"></div>
-        </button>
-
-        <button
-          :class="{ active: showEmojiPicker }"
-          class="function-btn"
-          title="选择表情"
-          @click="toggleEmojiPicker"
-        >
-          <i class="fas fa-smile"></i>
-          <div class="btn-ripple"></div>
-        </button>
-
-        <button
-          :class="{ recording: isRecording }"
-          class="function-btn record-btn"
-          title="按住录音"
-          @mousedown="startRecording"
-          @mouseleave="stopRecording"
-          @mouseup="stopRecording"
-          @touchend="stopRecording"
-          @touchstart="startRecording"
-        >
-          <i class="fas fa-microphone"></i>
-          <div class="btn-ripple"></div>
-          <div v-if="isRecording" class="recording-wave"></div>
-        </button>
-
-        <!-- 录音状态指示器 -->
-        <!--        <RecordingIndicator />-->
-      </div>
-
       <!-- 输入框区域 -->
       <div class="input-section">
         <CustomTextarea
@@ -348,14 +375,14 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
-.message-input-area {
+.message-input-container {
   padding: 20px;
   border-top: 1px solid #e2e8f0;
   background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
   position: relative;
 }
 
-.message-input-area.dark {
+.message-input-container.dark {
   border-top-color: #374151;
   background: linear-gradient(135deg, #2d2d2d 0%, #1f2937 100%);
 }
@@ -366,6 +393,38 @@ onUnmounted(() => {
   gap: 16px;
 }
 
+.toolbar {
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-top: 1px solid #666666;
+}
+
+.function-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 5px 10px;
+  border-radius: 4px;
+  margin-right: 5px;
+  display: flex;
+  align-items: center;
+  color: #666;
+}
+
+.function-btn:hover {
+  background-color: #f0f0f0;
+}
+
+.prescription-button {
+  color: #455cda;
+  font-weight: 500;
+}
+
+.prescription-button:hover {
+  background-color: #e6e9ff;
+}
+
 .function-buttons {
   display: flex;
   gap: 12px;
@@ -461,12 +520,12 @@ onUnmounted(() => {
   height: 100px;
 }
 
-.message-input-area.dark .function-btn {
+.message-input-container.dark .function-btn {
   background: linear-gradient(135deg, #374151, #4b5563);
   color: #9ca3af;
 }
 
-.message-input-area.dark .function-btn:hover {
+.message-input-container.dark .function-btn:hover {
   background: linear-gradient(135deg, #4361ee, #3f37c9);
   color: white;
 }