@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.2

package/src/TUIRoom/components/Chat/ChatKit/components/TUISearch/index.vue

@@ -0,0 +1,207 @@
+<template>
+  <div
+    v-if="
+      searchType === 'global' ||
+        ((searchType === 'conversation' || (!searchType && isUniFrameWork)) &&
+          isShowInConversationSearch)
+    "
+    :class="[
+      'tui-search',
+      !isPC && 'tui-search-h5',
+      `tui-search-main-${searchType ? searchType : 'conversation'}`,
+      isFullScreen && 'tui-search-h5-full-screen',
+    ]"
+  >
+    <div
+      v-if="searchType === 'global'"
+      ref="globalSearchRef"
+      :class="['tui-search-global', !isPC && 'tui-search-h5-global']"
+    >
+      <div
+        :class="[
+          'tui-search-global-header',
+          !isPC && 'tui-search-h5-global-header',
+        ]"
+      >
+        <SearchInput
+          class="search-input"
+          :searchType="searchType"
+        />
+        <SearchMore
+          v-if="isPC || !searchingStatus"
+          class="search-more"
+          :searchType="searchType"
+        />
+      </div>
+      <SearchContainer
+        v-if="searchingStatus"
+        class="search-container"
+        popupPosition="bottom"
+        :searchType="searchType"
+      >
+        <template #result>
+          <SearchResult
+            class="search-result"
+            :searchType="searchType"
+          />
+        </template>
+      </SearchContainer>
+    </div>
+    <div
+      v-else-if="
+        (searchType === 'conversation' && isShowInConversationSearch) ||
+          isUniFrameWork
+      "
+      :class="[
+        'tui-search-conversation',
+        !isPC && 'tui-search-h5-conversation',
+      ]"
+    >
+      <SearchContainer
+        class="search-container"
+        popupPosition="aside"
+        :searchType="searchType ? searchType : 'conversation'"
+        @closeInConversationSearch="closeInConversationSearch"
+      >
+        <template #input>
+          <SearchInput
+            :searchType="searchType ? searchType : 'conversation'"
+          />
+        </template>
+        <template #result>
+          <SearchResult
+            class="search-result"
+            :searchType="searchType ? searchType : 'conversation'"
+          />
+        </template>
+      </SearchContainer>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import {
+  ref,
+  onMounted,
+  computed,
+  withDefaults,
+  onUnmounted,
+} from '../../adapter-vue';
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal, outsideClick } from '@tencentcloud/universal-api';
+import SearchInput from './search-input/index.vue';
+import SearchContainer from './search-container/index.vue';
+import SearchResult from './search-result/index.vue';
+import SearchMore from './search-more/index.vue';
+import { searchMessageTypeDefault } from './search-type-list';
+import { searchMessageTimeDefault } from './search-time-list';
+import { isPC, isUniFrameWork } from '../../utils/env';
+import { ISearchingStatus, SEARCH_TYPE } from './type';
+
+const props = withDefaults(
+  defineProps<{
+    searchType?: SEARCH_TYPE;
+  }>(),
+  {
+    searchType: () => {
+      return isUniFrameWork ? 'conversation' : 'global';
+    },
+  },
+);
+const globalSearchRef = ref<HTMLElement | null>();
+const currentConversationID = ref<string>('');
+const searchingStatus = ref<boolean>(false);
+// Whether to display the search in the chat
+const isShowInConversationSearch = ref<boolean>(isUniFrameWork);
+// Whether to search in full screen - Search in full screen when the mobile terminal is searching
+const isFullScreen = computed(
+  () =>
+    !isPC
+    && ((props.searchType === 'global' && searchingStatus.value)
+    || (props.searchType === 'conversation' && isShowInConversationSearch.value)),
+);
+
+const initSearchValue = (searchType: SEARCH_TYPE) => {
+  TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
+    value: '',
+    searchType: searchType,
+  });
+  TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
+    value: searchMessageTypeDefault[searchType],
+    searchType: searchType,
+  });
+  TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
+    value: searchMessageTimeDefault,
+    searchType: searchType,
+  });
+};
+
+function onCurrentConversationIDUpdate(conversationID: string) {
+  if (!isUniFrameWork && currentConversationID.value !== conversationID) {
+    // PC side single page switch session, close search
+    closeInConversationSearch();
+  }
+  currentConversationID.value = conversationID;
+}
+
+function onCurrentSearchingStatusChange(value: ISearchingStatus) {
+  if (value?.searchType === props.searchType) {
+    searchingStatus.value = value?.isSearching;
+    // global search ui bind on click outside close
+    if (value?.searchType === 'global' && globalSearchRef.value) {
+      if (isPC && value.isSearching) {
+        outsideClick.listen({
+          domRefs: globalSearchRef.value,
+          handler: closeGlobalSearch,
+        });
+      }
+    }
+    if (value?.searchType === 'global' && isUniFrameWork) {
+      // hide tab bar in uni-app when global searching
+      value.isSearching ? TUIGlobal?.hideTabBar()?.catch(() => { /* ignore */ }) : TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
+    }
+  }
+}
+
+function onIsShowInConversationSearchChange(value: boolean) {
+  isShowInConversationSearch.value = value ? true : false;
+  isShowInConversationSearch.value && initSearchValue(props.searchType);
+}
+
+onMounted(() => {
+  // init with default value
+  ['global', 'conversation'].forEach((type: string) => {
+    initSearchValue(type as SEARCH_TYPE);
+  });
+  // watch store change
+  TUIStore.watch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdate,
+  });
+  TUIStore.watch(StoreName.SEARCH, {
+    currentSearchingStatus: onCurrentSearchingStatusChange,
+    isShowInConversationSearch: onIsShowInConversationSearchChange,
+  });
+});
+
+onUnmounted(() => {
+  // unwatch store change
+  TUIStore.unwatch(StoreName.CONV, {
+    currentConversationID: onCurrentConversationIDUpdate,
+  });
+  TUIStore.unwatch(StoreName.SEARCH, {
+    currentSearchingStatus: onCurrentSearchingStatusChange,
+    isShowInConversationSearch: onIsShowInConversationSearchChange,
+  });
+});
+
+function closeGlobalSearch() {
+  TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
+    isSearching: false,
+    searchType: props.searchType,
+  });
+}
+
+function closeInConversationSearch() {
+  TUIStore.update(StoreName.SEARCH, 'isShowInConversationSearch', false);
+}
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUISearch/search-container/index.ts

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

package/src/TUIRoom/components/Chat/ChatKit/components/TUISearch/search-container/index.vue

@@ -0,0 +1,259 @@
+<template>
+  <div
+    :class="[
+      'tui-search-container',
+      !isPC && 'tui-search-container-h5',
+      isPC && `container-${props.popupPosition}`,
+      `container-${props.searchType}`,
+    ]"
+  >
+    <div
+      :class="[
+        isPC && `tui-search-container-${props.popupPosition}`,
+        !isPC && 'tui-search-container-h5-main',
+      ]"
+    >
+      <div
+        v-if="props.searchType === 'conversation' && !isUniFrameWork"
+        class="tui-search-header"
+      >
+        <div class="tui-search-header-title">
+          {{ TUITranslateService.t("TUISearch.搜索会话内容") }}
+        </div>
+        <div
+          class="tui-search-header-close"
+          @click="closeSearchContainer"
+        >
+          <Icon
+            :file="closeDarkIcon"
+            width="14px"
+            height="14px"
+          />
+        </div>
+      </div>
+      <div class="tui-search-tabs">
+        <div
+          v-for="(tabItem, tabKey) in searchTypeList"
+          :key="tabKey"
+          :class="[
+            'tui-search-tabs-item',
+            currentSearchMessageType.key === tabItem.key && 'tui-search-tabs-item-selected',
+          ]"
+          @click="selectSearchType(tabItem)"
+        >
+          {{ TUITranslateService.t(`TUISearch.${tabItem.label}`) }}
+        </div>
+      </div>
+      <!-- TUISearch search input slot -->
+      <slot name="input" />
+      <div
+        v-if="isTimeTabsShow"
+        class="tui-search-time"
+      >
+        <div
+          v-for="(tabItem, tabKey) in searchMessageTimeList"
+          :key="tabKey"
+          :class="[
+            'tui-search-time-item',
+            currentSearchMessageTime.key === tabItem.key && 'tui-search-time-item-selected',
+          ]"
+          @click="selectSearchTime(tabItem)"
+        >
+          <div
+            v-if="tabItem.key === 'all'"
+            class="tui-search-time-item-picker"
+          >
+            <div
+              v-if="!isDatePickerShow"
+              class="tui-search-time-item-all"
+              @click.stop="handleSelectAllTimeClicked"
+            >
+              {{
+                TUITranslateService.t(`TUISearch.选择时间`) +
+                  ":  " +
+                  TUITranslateService.t(`TUISearch.全部`)
+              }}
+              <Icon
+                :file="downArrowIcon"
+                width="14px"
+                height="14px"
+              />
+            </div>
+            <div @click.stop>
+              <DatePicker
+                v-if="isDatePickerShow"
+                type="range"
+                :rangeTableType="datePickerRangeDisplayType"
+                @pick="pickTimePeriod"
+              />
+            </div>
+            <div
+              v-if="isDatePickerShow"
+              class="tui-search-time-item-close"
+              @click="clearTimePicker"
+            >
+              <Icon
+                class="icon"
+                :file="closeIcon"
+                width="14px"
+                height="14px"
+              />
+            </div>
+          </div>
+          <div v-else>
+            {{ TUITranslateService.t(`TUISearch.${tabItem.label}`) }}
+          </div>
+        </div>
+      </div>
+      <!-- TUISearch search result slot -->
+      <slot name="result" />
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from '../../../adapter-vue';
+import {
+  TUITranslateService,
+  TUIStore,
+  StoreName,
+} from '@tencentcloud/chat-uikit-engine';
+import { Dayjs } from 'dayjs';
+import {
+  globalSearchTypeList,
+  conversationSearchTypeList,
+  searchMessageTypeDefault,
+} from '../search-type-list';
+import { searchMessageTimeList, searchMessageTimeDefault } from '../search-time-list';
+import Icon from '../../common/Icon.vue';
+import DatePicker from '../../common/DatePicker/index.vue';
+import downArrowIcon from '../../../assets/icon/down-icon.svg';
+import closeIcon from '../../../assets/icon/input-close.svg';
+import closeDarkIcon from '../../../assets/icon/close-dark.svg';
+import { isPC, isUniFrameWork } from '../../../utils/env';
+import { SEARCH_TYPE, ISearchMessageTime, ISearchMessageType, ISearchTimeTab, ISearchTypeTab } from '../type';
+
+const props = defineProps({
+  popupPosition: {
+    type: String, // "bottom" / "aside"
+    default: 'bottom',
+  },
+  searchType: {
+    type: String,
+    default: 'global', // "global" / "conversation"
+    validator(value: string) {
+      return ['global', 'conversation'].includes(value);
+    },
+  },
+});
+
+const emits = defineEmits(['searchConfigChange', 'closeInConversationSearch']);
+
+const searchTypeList = computed(() =>
+  props?.searchType === 'conversation' ? conversationSearchTypeList : globalSearchTypeList,
+);
+const currentSearchMessageType = ref(searchMessageTypeDefault[props?.searchType as SEARCH_TYPE]);
+const currentSearchMessageTime = ref(searchMessageTimeDefault);
+
+const isTimeTabsShow = computed(() => {
+  return (
+    currentSearchMessageType.value.key !== 'contact'
+    && currentSearchMessageType.value.key !== 'group'
+  );
+});
+const datePickerRangeDisplayType = computed((): string =>
+  isPC && props.searchType === 'global' && !isUniFrameWork ? 'two' : 'one',
+);
+const isDatePickerShow = ref<boolean>(false);
+
+function onCurrentSearchMessageTypeChange(typeObject: ISearchMessageType) {
+  if (typeObject?.searchType === props?.searchType) {
+    currentSearchMessageType.value
+        = typeObject?.value || searchMessageTypeDefault[props?.searchType as SEARCH_TYPE];
+  }
+}
+
+function onCurrentSearchMessageTimeChange(timeObject: ISearchMessageTime) {
+  if (timeObject?.searchType === props?.searchType) {
+    currentSearchMessageTime.value = timeObject?.value || searchMessageTimeDefault;
+  }
+}
+
+onMounted(() => {
+  TUIStore.watch(StoreName.SEARCH, {
+    currentSearchMessageType: onCurrentSearchMessageTypeChange,
+    currentSearchMessageTime: onCurrentSearchMessageTimeChange,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.SEARCH, {
+    currentSearchMessageType: onCurrentSearchMessageTypeChange,
+    currentSearchMessageTime: onCurrentSearchMessageTimeChange,
+  });
+});
+
+const selectSearchType = (item: ISearchTypeTab) => {
+  TUIStore.update(StoreName.SEARCH, 'currentSearchMessageType', {
+    value: item,
+    searchType: props.searchType,
+  });
+};
+
+const selectSearchTime = (item: ISearchTimeTab) => {
+  if (isDatePickerShow.value && item.key === 'all') {
+    isDatePickerShow.value = false;
+  } else {
+    isDatePickerShow.value = false;
+    TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
+      value: item,
+      searchType: props.searchType,
+    });
+  }
+};
+
+const handleSelectAllTimeClicked = () => {
+  if (currentSearchMessageTime.value?.key !== 'all') {
+    TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
+      value: searchMessageTimeDefault,
+      searchType: props.searchType,
+    });
+  } else {
+    isDatePickerShow.value = true;
+  }
+};
+
+const pickTimePeriod = (time: typeof Dayjs) => {
+  if (currentSearchMessageTime.value?.key === 'all') {
+    const { startDate, endDate } = time;
+    const timePosition = Number((endDate?.toDate()?.getTime() / 1000).toFixed(0));
+    const timePeriod = timePosition - Number((startDate?.toDate()?.getTime() / 1000).toFixed(0));
+    const newSearchMessageTime = {
+      key: currentSearchMessageTime.value.key,
+      label: currentSearchMessageTime.value.label,
+      value: {
+        timePosition,
+        timePeriod,
+      },
+    };
+    TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
+      value: newSearchMessageTime,
+      searchType: props.searchType,
+    });
+  }
+};
+
+const clearTimePicker = () => {
+  isDatePickerShow.value = false;
+  if (currentSearchMessageTime.value?.key === 'all') {
+    TUIStore.update(StoreName.SEARCH, 'currentSearchMessageTime', {
+      value: searchMessageTimeDefault,
+      searchType: props.searchType,
+    });
+  }
+};
+
+const closeSearchContainer = () => {
+  emits('closeInConversationSearch');
+};
+</script>
+<style lang="scss" scoped src="./style/index.scss"></style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUISearch/search-container/style/h5.scss

@@ -0,0 +1,36 @@
+.tui-search-container-h5 {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+
+  .tui-search-container-h5-main {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    .tui-search-tabs {
+      .tui-search-tabs-item {
+        cursor: none;
+      }
+    }
+
+    .tui-search-time {
+      background-color: #f4f4f4;
+
+      .tui-search-time-item {
+        cursor: none;
+        background-color: #fff;
+      }
+
+      .tui-search-time-item-selected {
+        background-color: rgba(0,122,255,0.2);
+      }
+    }
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUISearch/search-container/style/index.scss

@@ -0,0 +1,3 @@
+@import '../../../../assets/styles/common';
+@import './web';
+@import './h5';

package/src/TUIRoom/components/Chat/ChatKit/components/TUISearch/search-container/style/web.scss

@@ -0,0 +1,114 @@
+.container-bottom {
+  margin: 0 10px;
+  position: relative;
+}
+
+.container-conversation {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.tui-search-container {
+  &-bottom {
+    position: absolute;
+    min-width: 400px;
+    width: fit-content;
+    height: 453px;
+    border-radius: 4px;
+    background-color: #fff;
+    z-index: 1000;
+    display: flex;
+    flex-direction: column;
+    box-shadow: rgba(0,0,0,0.16) 0 3px 6px, rgba(0,0,0,0.23) 0 3px 6px;
+    left: 0;
+    top: -5px;
+  }
+
+  &-aside {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .tui-search-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px 10px;
+
+    &-title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 19.6px;
+      font-family: "PingFang SC", sans-serif;
+    }
+
+    &-close {
+      cursor: pointer;
+    }
+  }
+
+  .tui-search-tabs {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+
+    &-item {
+      padding: 10px 0;
+      margin: 0 10px;
+      font-size: 14px;
+      color: #666;
+      user-select: none;
+      cursor: pointer;
+
+      &-selected {
+        color: #007aff;
+        border-bottom: 2px solid #007aff;
+      }
+    }
+  }
+
+  .tui-search-time {
+    width: 100%;
+    height: 43px;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+
+    &-item {
+      height: calc(100% - 20px);
+      padding: 5px;
+      margin: 5px;
+      border-radius: 5px;
+      font-size: 12px;
+      color: #666;
+      user-select: none;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      &-picker {
+        display: flex;
+      }
+
+      &-close,
+      &-all {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      &-selected {
+        background-color: rgba(0,122,255,0.2);
+      }
+    }
+  }
+}

package/src/TUIRoom/components/Chat/ChatKit/components/TUISearch/search-input/index.ts

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