Feature/add chat record (#4391)

* feat: add chat-record component

新增chat-record 语音输入组件

* feat: 新增语音书输入插件

BREAKING CHANGE: 新增语音输入组件

* feat: 新增语音输入组件

* feat(chat-record 组件样式调整): chat-record 组件样式调整

* feat(chat-record 组件样式优化): chat-record 组件样式优化

* feat: 更新chat-record 组件文档

* feat: 更新chat-record 组件文档

* feat: chat-record 组件交互更改

* feat: chat-record 组件demo调整

* feat: chat-record 组件，麦克风权限相关问题修改

* feat: chat-record bug 修复

* feat(chat-record demo bug修复): chat-record demo 修复

* feat: chat-record 组件bug修复

* feat: 删除快码插件配置

* feat: 还原setting.json文件

Author: zhangjiaoalice

.vscode/settings.json

@@ -47,7 +47,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "cSpell.words": [
-    "stylelint", 
+    "stylelint",
     "cascader",
     "tdesign",
     "uniapp",

packages/pro-components/chat/attachments/attachments.less

@@ -142,7 +142,7 @@
         align-items: center;
         justify-content: center;
 
-        image {
+        .attachment-image {
           width: 100%;
           height: 100%;
         }

packages/pro-components/chat/chat-record/_example/base/index.js

@@ -0,0 +1,108 @@
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    query: '', // 输入框内容
+    placeholder: '请输入内容', // 输入框占位符
+    loading: false, // 发送按钮加载状态
+    showVoice: false, // 是否显示语音输入组件
+    allowSpeech: 'keyboard',
+  },
+
+  /**
+   * 返回上一页
+   */
+  navigateBack() {
+    wx.navigateBack({
+      delta: 1,
+    });
+  },
+
+  /**
+   * 处理输入框内容变化
+   */
+  handleInput(e) {
+    this.setData({
+      query: e.detail.value,
+    });
+  },
+
+  /**
+   * 切换语音输入显示状态
+   */
+  handleVoice() {
+    const showVoice = !this.data.showVoice;
+    this.setData({
+      showVoice,
+      allowSpeech: showVoice ? 'speech' : 'keyboard',
+    });
+  },
+
+  toggleVoiceIcon() {
+    this.setData({
+      allowSpeech: this.data.allowSpeech === 'keyboard' ? 'speech' : 'keyboard',
+    });
+  },
+
+
+  /**
+   * 语音识别回调
+   * @param {Object} e - 事件对象
+   */
+  handleRecognize(e) {
+    const voiceMsg = e.detail;
+    console.log('语音识别结果:', voiceMsg);
+
+    // 将语音识别结果设置到输入框中
+    this.setData({
+      query: voiceMsg.voiceText,
+      showVoice: false, // 识别完成后隐藏语音输入组件
+      allowSpeech: 'keyboard',
+    });
+
+    // 提示用户
+    wx.showToast({
+      title: '识别成功',
+      icon: 'success',
+      duration: 1500,
+    });
+  },
+
+  /**
+   * 发送消息
+   */
+  handleSend() {
+    const { query, loading } = this.data;
+
+    // 如果正在加载或内容为空，不处理
+    if (loading || !query.trim()) {
+      if (!query.trim()) {
+        wx.showToast({
+          title: '请输入内容',
+          icon: 'none',
+          duration: 1500,
+        });
+      }
+      return;
+    }
+    // 设置加载状态
+    this.setData({
+      loading: true,
+    });
+
+    // 模拟发送请求
+    setTimeout(() => {
+      this.setData({
+        loading: false,
+        query: '', // 清空输入框
+      });
+
+      wx.showToast({
+        title: '发送成功',
+        icon: 'success',
+        duration: 1500,
+      });
+    }, 1000);
+  },
+});

packages/pro-components/chat/chat-record/_example/chat-record.less

@@ -0,0 +1,17 @@
+:deep(.chat-sender-placeholder) {
+  --demo-chat-sender-placeholder: rgba(0, 0, 0, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  :deep(.chat-sender-placeholder) {
+    --demo-chat-sender-placeholder: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.t-button {
+  margin-right: 32rpx;
+}
+
+.t-button:last-child {
+  margin-right: 0;
+}

packages/pro-components/chat/chat-sender/props.ts

@@ -48,7 +48,10 @@ const props: TdChatSenderProps = {
   /** 预设发送区渲染配置，用于灵活配置发送区的上传入口和发送按钮，支持自定义类型、顺序、样式 */
   renderPresets: {
     type: Array,
-    value: [{name: 'upload', presets: ['uploadCamera', 'uploadImage', 'uploadAttachment'], status: ''},{ name: 'send', type: 'icon'}],
+    value: [
+      { name: 'upload', presets: ['uploadCamera', 'uploadImage', 'uploadAttachment'], status: '' },
+      { name: 'send', type: 'icon' },
+    ],
   },
   /** 透传给 Textarea 组件的属性，autosize数值单位为 rpx */
   textareaProps: {
@@ -60,6 +63,11 @@ const props: TdChatSenderProps = {
     type: String,
     value: '',
   },
+  // 输入类型， keyboard-键盘输入，speech-语音输入
+  allowSpeech: {
+    type: String,
+    value: 'keyboard',
+  },
   /** 上传面板是否可见 */
   visible: {
     type: Boolean,

packages/pro-components/chat/chat-sender/type.ts

@@ -94,6 +94,10 @@ export interface TdChatSenderProps {
     type: StringConstructor;
     value?: string;
   };
+  allowSpeech?: {
+    type: StringConstructor;
+    value?: 'keyboard' | 'speech';
+  };
   /**
    * 上传面板是否可见
    * @default false

packages/tdesign-miniprogram/example/project.config.json

@@ -505,4 +505,4 @@
       }
     }
   }
-}
+}