消息

2025-05-13 19:39:53 +08:00
parent 37da6765b8
commit c006a8e63d
1232 changed files with 96963 additions and 883 deletions
--- a/TUIKit/components/TUIChat/mulitple-select-panel/index.vue
+++ b/TUIKit/components/TUIChat/mulitple-select-panel/index.vue
@@ -0,0 +1,134 @@
+<template>
+  <div
+    :class="{
+      'mulitple-select-panel': true,
+      'mulitple-select-panel-mobile': isMobile,
+    }"
+  >
+    <div
+      class="forward-button"
+      @click="oneByOneForwardMessage"
+    >
+      <Icon
+        :file="ForwardEachIcon"
+        :size="iconSize"
+      />
+      <span
+        :class="{
+          'forward-button-text': true,
+          'forward-button-text-mobile': isMobile,
+        }"
+      >{{ TUITranslateService.t('TUIChat.逐条转发') }}</span>
+    </div>
+    <div
+      class="forward-button"
+      @click="mergeForwardMessage"
+    >
+      <Icon
+        :file="ForwardMergeIcon"
+        :size="iconSize"
+      />
+      <span
+        :class="{
+          'forward-button-text': true,
+          'forward-button-text-mobile': isMobile,
+        }"
+      >{{ TUITranslateService.t('TUIChat.合并转发') }}</span>
+    </div>
+    <div
+      class="forward-button"
+      @click="cancelMultipleSelect"
+    >
+      <Icon
+        class="cancel-button-icon"
+        :file="AddIcon"
+        :size="iconSize"
+      />
+      <span
+        :class="{
+          'forward-button-text': true,
+          'forward-button-text-mobile': isMobile,
+        }"
+      >
+        {{ TUITranslateService.t('TUIChat.取消') }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from '../../../adapter-vue';
+import {
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../common/Icon.vue';
+import ForwardEachIcon from '../../../assets/icon/forward-each.svg';
+import ForwardMergeIcon from '../../../assets/icon/forward-merge.svg';
+import AddIcon from '../../../assets/icon/add-circle.svg';
+import { isMobile } from '../../../utils/env';
+
+interface IEmits {
+  (key: 'oneByOneForwardMessage'): void;
+  (key: 'mergeForwardMessage'): void;
+  (key: 'toggleMultipleSelectMode'): void;
+}
+
+const emits = defineEmits<IEmits>();
+
+const iconSize = ref(isMobile ? '25px' : '30px');
+
+function oneByOneForwardMessage() {
+  emits('oneByOneForwardMessage');
+}
+
+function mergeForwardMessage() {
+  emits('mergeForwardMessage');
+}
+
+function cancelMultipleSelect() {
+  emits('toggleMultipleSelectMode');
+}
+</script>
+
+<style lang="scss" scoped>
+:not(not) {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.mulitple-select-panel {
+  height: 196px;
+  border-top: 1px solid #ebebeb;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #EBF0F6;
+
+  &-mobile {
+    height: 64px;
+    padding-bottom: 15px;
+    flex-direction: row;
+    align-items: flex-end;
+  }
+}
+
+.forward-button {
+  justify-content: center;
+  align-items: center;
+
+  &-text {
+    margin-top: 8px;
+    font-size: 12px;
+
+    &-mobile {
+      margin-top: 2px;
+    }
+  }
+
+  .cancel-button-icon {
+    transform: rotate(45deg);
+  }
+}
+</style>