消息

TUIKit/components/TUIChat/message-input-toolbar/words/index.ts

@@ -0,0 +1,2 @@
+import Words from "./index.vue";
+export default Words;

TUIKit/components/TUIChat/message-input-toolbar/words/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <ToolbarItemContainer
+    ref="container"
+    :iconFile="wordsIcon"
+    title="常用语"
+    :needBottomPopup="true"
+    :iconWidth="isUniFrameWork ? '26px' : '20px'"
+    :iconHeight="isUniFrameWork ? '26px' : '20px'"
+    @onDialogShow="onDialogShow"
+    @onDialogClose="onDialogClose"
+  >
+    <div :class="['words', !isPC && 'words-h5']">
+      <div :class="['words-header', !isPC && 'words-h5-header']">
+        <span :class="['words-header-title', !isPC && 'words-h5-header-title']">
+          {{ TUITranslateService.t("Words.常用语-快捷回复工具") }}
+        </span>
+        <span
+          v-if="!isPC"
+          :class="['words-header-close', !isPC && 'words-h5-header-close']"
+          @click="closeDialog"
+        >
+          关闭
+        </span>
+      </div>
+      <ul :class="['words-list', !isPC && 'words-h5-list']">
+        <li
+          v-for="(item, index) in wordsList"
+          :key="index"
+          :class="['words-list-item', !isPC && 'words-h5-list-item']"
+          @click="selectWord(item)"
+        >
+          {{ TUITranslateService.t(`Words.${item.value}`) }}
+        </li>
+      </ul>
+    </div>
+  </ToolbarItemContainer>
+</template>
+<script setup lang="ts">
+import {
+  TUITranslateService,
+  TUIStore,
+  StoreName,
+  IConversationModel,
+  SendMessageParams,
+  TUIChatService,
+} from '@tencentcloud/chat-uikit-engine';
+import { ref } from '../../../../adapter-vue';
+import ToolbarItemContainer from '../toolbar-item-container/index.vue';
+import wordsIconLight from '../../../../assets/icon/words-light.svg';
+import wordsIconDark from '../../../../assets/icon/words-dark.svg';
+import { wordsList } from '../../utils/wordsList';
+import { isEnabledMessageReadReceiptGlobal } from '../../utils/utils';
+import { isPC, isUniFrameWork } from '../../../../utils/env';
+import TUIChatConfig from '../../config';
+
+const wordsIcon = TUIChatConfig.getTheme() === 'dark' ? wordsIconDark : wordsIconLight;
+const emits = defineEmits(['onDialogPopupShowOrHide']);
+const currentConversation = ref<IConversationModel>();
+const container = ref();
+
+TUIStore.watch(StoreName.CONV, {
+  currentConversation: (conversation: IConversationModel) => {
+    currentConversation.value = conversation;
+  },
+});
+
+const selectWord = (item: any) => {
+  const options = {
+    to:
+      currentConversation?.value?.groupProfile?.groupID
+      || currentConversation?.value?.userProfile?.userID,
+    conversationType: currentConversation?.value?.type,
+    payload: {
+      text: TUITranslateService.t(`Words.${item.value}`),
+    },
+    needReadReceipt: isEnabledMessageReadReceiptGlobal(),
+  } as SendMessageParams;
+  TUIChatService.sendTextMessage(options);
+  // close dialog after submit evaluate
+  container?.value?.toggleDialogDisplay(false);
+};
+
+const closeDialog = () => {
+  container?.value?.toggleDialogDisplay(false);
+};
+
+const onDialogShow = () => {
+  emits('onDialogPopupShowOrHide', true);
+};
+
+const onDialogClose = () => {
+  emits('onDialogPopupShowOrHide', false);
+};
+</script>
+<style scoped lang="scss" src="./style/index.scss"></style>

TUIKit/components/TUIChat/message-input-toolbar/words/style/color.scss

@@ -0,0 +1,8 @@
+.words {
+  background-color: #ffffff;
+  &-header {
+    &-close {
+      color: #3370ff;
+    }
+  }
+}

TUIKit/components/TUIChat/message-input-toolbar/words/style/h5.scss

@@ -0,0 +1,29 @@
+.words-h5 {
+  width: 100%;
+  box-sizing: border-box;
+  max-height: 80vh;
+  height: fit-content;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  &-header {
+    &-title {
+      font-size: 18px;
+      line-height: 40px;
+    }
+  }
+  &-list {
+    flex: 1;
+    overflow-y: scroll;
+    &-item {
+      cursor: none;
+      -webkit-tap-highlight-color: transparent;
+      -moz-tap-highlight-color: transparent;
+      padding: 12px 0;
+      font-size: 16px;
+      color: #50545c;
+      line-height: 18px;
+      border-bottom: 1px solid #eeeeee;
+    }
+  }
+}

TUIKit/components/TUIChat/message-input-toolbar/words/style/index.scss

@@ -0,0 +1,5 @@
+@import url("../../../../../assets/styles/common.scss");
+@import "./color.scss";
+@import "./web.scss";
+@import "./h5.scss";
+

TUIKit/components/TUIChat/message-input-toolbar/words/style/web.scss

@@ -0,0 +1,32 @@
+.words {
+  z-index: 5;
+  width: 315px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  width: 19.13rem;
+  height: 12.44rem;
+  overflow-y: auto;
+  &-header {
+    display: flex;
+    justify-content: space-between;
+    font-size: 14px;
+    font-weight: 500;
+  }
+  &-list {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    &-item {
+      cursor: pointer;
+      padding: 4px 0;
+      font-size: 14px;
+      color: #50545c;
+      line-height: 18px;
+    }
+    &-item:hover {
+      color: #006eff;
+    }
+  }
+}