123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135 |
- <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>
|