tuikit-atomicx-vue3 0.1.0 → 0.1.1

package/src/components/Search/SearchResults/SearchResultsItem/Message/Message.scss

@@ -0,0 +1,169 @@
+@use "sass:map";
+@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
+
+.SearchMessage {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+}
+
+.SearchMessage__avatar-wrapper {
+  flex-shrink: 0;
+}
+
+.SearchMessage__avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.SearchMessage__content {
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.SearchMessage__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 4px;
+}
+
+.SearchMessage__name {
+  font-weight: 500;
+  font-size: 14px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-color-primary);
+}
+
+.SearchMessage__time {
+  font-size: 12px;
+  min-width: 120px;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  color: var(--text-color-secondary);
+}
+
+.SearchMessage__container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  &:hover {
+    .SearchMessage__container-action {
+      display: flex;
+    }
+  }
+}
+
+.SearchMessage__container-content {
+  flex-shrink: 1;
+  padding: 12px 10px;
+  border-radius: 10px;
+  display: inline-block;
+  color: var(--text-color-primary);
+  background: var(--bg-color-bubble-reciprocal);
+}
+
+.SearchMessage__container-action {
+  display: none;
+  font-size: 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  min-width: fit-content;
+  color: var(--text-color-link);
+}
+
+.SearchMessage__text {
+  font-size: 12px;
+  line-height: 1.5;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  color: var(--text-color-primary);
+}
+
+.SearchMessage__emoji-img {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  margin: 0 2px;
+}
+
+.SearchMessage__image-thumb {
+  max-width: 80px;
+  max-height: 80px;
+  border-radius: 4px;
+  object-fit: cover;
+  margin: 2px 0;
+}
+
+.SearchMessage__video-thumb {
+  position: relative;
+  display: inline-block;
+  width: 80px;
+  height: 60px;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #eee;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.SearchMessage__play-icon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 24px;
+  height: 24px;
+  transform: translate(-50%, -50%);
+}
+
+.SearchMessage__face-img {
+  width: 40px;
+  height: 40px;
+  vertical-align: middle;
+}
+
+.SearchMessage__file-box {
+  display: flex;
+  flex-direction: column;
+  font-size: 13px;
+  color: #666;
+}
+
+.SearchMessage__audio-box {
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  color: #666;
+}
+
+.SearchMessage__audio-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 4px;
+}
+
+:global(.SearchMessage__highlight) {
+  background-color: var(--bg-color-operate);
+  color: var(--text-color-link);
+  padding: 0 2px;
+  border-radius: 2px;
+  font-weight: 500;
+} 

package/src/components/Search/SearchResults/SearchResultsItem/Message/Message.vue

@@ -0,0 +1,263 @@
+<!-- eslint-disable import/extensions -->
+<template>
+  <div :class="$style.SearchMessage">
+    <div :class="$style['SearchMessage__avatar-wrapper']">
+      <Avatar :src="avatar" :alt="name" />
+    </div>
+    <div :class="$style.SearchMessage__content">
+      <div :class="$style.SearchMessage__header">
+        <span :class="$style.SearchMessage__name" v-html="highlightedName"> </span>
+        <span v-if="time" :class="$style.SearchMessage__time">
+          {{ formatTime(time) }}
+        </span>
+      </div>
+      <div :class="$style.SearchMessage__container">
+        <div :class="$style['SearchMessage__container-content']">
+          <component :is="renderMessageContent(data, keyword)" />
+        </div>
+        <div :class="$style['SearchMessage__container-action']" @click="handleClick">
+          {{ t('Search.action.locateToChat') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, h, defineProps, useCssModule } from 'vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { SearchType } from '../../../../../types/engine';
+import type { ResultItemProps, MessageModel } from '../../../../../types';
+import { Avatar } from '../../../../Avatar';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { highlightText } from '../utils';
+
+const $style = useCssModule();
+
+const formatTime = (timestamp: number): string => {
+  return new Date(timestamp * 1000).toLocaleString();
+};
+
+const props = defineProps<ResultItemProps<SearchType.CHAT_MESSAGE>>();
+
+const { t } = useUIKit();
+
+const { nick, avatar, nameCard, from, time } = props.data as MessageModel;
+const name = computed(() => nameCard || nick || from);
+
+const highlightedName = computed(() => {
+  if (!props.keyword) {
+    return name.value;
+  }
+  return highlightText(name.value, props.keyword, $style['SearchMessage__highlight']);
+});
+
+const renderTextContent = (messageContent: any, keyword: string) => {
+  if (messageContent.text && Array.isArray(messageContent.text)) {
+    return messageContent.text
+      .map((item: any, idx: number) => {
+        if (item.name === 'text') {
+          return h('span', {
+            key: idx,
+            innerHTML: highlightText(item.text, keyword, $style['SearchMessage__highlight']),
+          });
+        }
+        if (item.name === 'img') {
+          return h('img', {
+            key: idx,
+            src: item.src,
+            alt: item.emojiKey || '',
+            class: $style['SearchMessage__emoji-img'],
+            draggable: false,
+            'data-emoji-key': item.emojiKey || '',
+          });
+        }
+        return null;
+      })
+      .filter(Boolean);
+  }
+  return h('span', {
+    innerHTML: highlightText(messageContent.text, keyword, $style['SearchMessage__highlight']),
+  });
+};
+
+const renderMessageContent = (message: MessageModel, searchKeyword: string) => {
+  const messageContent = message.getMessageContent?.() || {};
+  const messageType = message.type;
+
+  switch (messageType) {
+    case TUIChatEngine.TYPES.MSG_TEXT:
+      return h(
+        'div',
+        {
+          class: $style['SearchMessage__text'],
+        },
+        renderTextContent(messageContent, searchKeyword)
+      );
+
+    case TUIChatEngine.TYPES.MSG_IMAGE:
+      return h('img', {
+        src: messageContent.url,
+        class: $style['SearchMessage__image-thumb'],
+        alt: t('Search.messageType.image'),
+      });
+
+    case TUIChatEngine.TYPES.MSG_VIDEO:
+      return h(
+        'div',
+        {
+          class: $style['SearchMessage__video-thumb'],
+        },
+        [
+          h('img', {
+            src: messageContent.snapshotUrl,
+            alt: t('Search.messageType.videoCover'),
+          }),
+          h(
+            'span',
+            {
+              class: $style['SearchMessage__play-icon'],
+            },
+            [
+              h(
+                'svg',
+                {
+                  width: '24',
+                  height: '24',
+                  viewBox: '0 0 24 24',
+                  fill: 'none',
+                },
+                [
+                  h('circle', {
+                    cx: '12',
+                    cy: '12',
+                    r: '12',
+                    fill: 'rgba(43,93,245,0.15)',
+                  }),
+                  h('polygon', {
+                    points: '9,7 18,12 9,17',
+                    fill: '#2B5DF5',
+                  }),
+                ]
+              ),
+            ]
+          ),
+        ]
+      );
+
+    case TUIChatEngine.TYPES.MSG_FILE:
+      return h(
+        'div',
+        {
+          class: $style['SearchMessage__file-box'],
+        },
+        [
+          h(
+            'span',
+            {
+              class: $style['SearchMessage__text'],
+            },
+            messageContent.name
+          ),
+          h(
+            'span',
+            {
+              class: $style['SearchMessage__text'],
+            },
+            messageContent.size
+          ),
+        ]
+      );
+
+    case TUIChatEngine.TYPES.MSG_AUDIO:
+      return h(
+        'div',
+        {
+          class: $style['SearchMessage__audio-box'],
+        },
+        [
+          h(
+            'span',
+            {
+              class: $style['SearchMessage__audio-icon'],
+            },
+            [
+              h(
+                'svg',
+                {
+                  width: '20',
+                  height: '20',
+                  viewBox: '0 0 20 20',
+                  fill: 'none',
+                },
+                [
+                  h('rect', {
+                    x: '3',
+                    y: '7',
+                    width: '4',
+                    height: '6',
+                    rx: '1',
+                    fill: '#2B5DF5',
+                  }),
+                  h('rect', {
+                    x: '8',
+                    y: '5',
+                    width: '4',
+                    height: '10',
+                    rx: '1',
+                    fill: '#2B5DF5',
+                    fillOpacity: '0.7',
+                  }),
+                  h('rect', {
+                    x: '13',
+                    y: '9',
+                    width: '4',
+                    height: '2',
+                    rx: '1',
+                    fill: '#2B5DF5',
+                    fillOpacity: '0.4',
+                  }),
+                ]
+              ),
+            ]
+          ),
+          h('span', `${messageContent.second}s`),
+        ]
+      );
+
+    case TUIChatEngine.TYPES.MSG_LOCATION:
+      if (messageContent.businessID === 'text_link') {
+        return h(
+          'span',
+          {
+            class: $style['SearchMessage__text'],
+          },
+          [
+            messageContent.text,
+            h(
+              'a',
+              {
+                href: messageContent.link,
+                target: '_blank',
+                rel: 'noopener noreferrer',
+              },
+              `${t('Search.action.readMore')}>>>`
+            ),
+          ]
+        );
+      }
+      return h('span', t('Search.messageType.custom'));
+
+    default:
+      return h('span', t('Search.messageType.unsupported'));
+  }
+};
+
+const handleClick = () => {
+  props.onClick?.(props.data, SearchType.CHAT_MESSAGE);
+};
+</script>
+
+<style lang="scss" module>
+@import './Message.scss';
+</style>

package/src/components/Search/SearchResults/SearchResultsItem/Message/index.ts

@@ -0,0 +1,2 @@
+export { default as Message } from './Message.vue';
+export * from './Message.vue';

package/src/components/Search/SearchResults/SearchResultsItem/SearchResultsItem.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
+
+.SearchResultsItem {
+  padding: 12px 16px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--stroke-color-primary);
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: var(--list-color-hover);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+} 

package/src/components/Search/SearchResults/SearchResultsItem/SearchResultsItem.vue

@@ -0,0 +1,63 @@
+<template>
+  <div :class="[$style.SearchResultsItem, className]">
+    <component
+      v-if="type === SearchType.MESSAGE"
+      :is="Conversation"
+      :data="data as SearchCloudMessagesResultItem"
+      :keyword="keyword"
+      @click="onClick"
+    />
+    <component
+      v-else-if="type === SearchType.USER"
+      :is="User"
+      :data="data as SearchCloudUsersResultItem"
+      :keyword="keyword"
+      @click="onClick"
+    />
+    <component
+      v-else-if="type === SearchType.GROUP"
+      :is="Group"
+      :data="data as SearchCloudGroupsResultItem"
+      :keyword="keyword"
+      @click="onClick"
+    />
+    <component
+      v-else-if="type === SearchType.CHAT_MESSAGE"
+      :is="Message"
+      :data="data as MessageModel"
+      :keyword="keyword"
+      @click="onClick"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, withDefaults } from 'vue';
+import { SearchType } from '../../../../types/engine';
+import type {
+  SearchCloudMessagesResultItem,
+  SearchCloudUsersResultItem,
+  SearchCloudGroupsResultItem,
+  MessageModel,
+} from '../../../../types/engine';
+import { Conversation } from './Conversation';
+import { User } from './User';
+import { Group } from './Group';
+import { Message } from './Message';
+
+interface ISearchResultsItemProps {
+  keyword: string;
+  onClick?: () => void;
+  data: any;
+  type: SearchType;
+  className?: string;
+}
+
+const props = withDefaults(defineProps<ISearchResultsItemProps>(), {
+  className: '',
+});
+</script>
+
+<style lang="scss" module>
+@import './SearchResultsItem.scss';
+</style>

package/src/components/Search/SearchResults/SearchResultsItem/User/User.scss

@@ -0,0 +1,53 @@
+@use "sass:map";
+@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
+
+.SearchUser {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  width: 100%;
+}
+
+.SearchUser__avatar {
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.SearchUser__profile {
+  flex: 1;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.SearchUser__nickname {
+  font-weight: 500;
+  font-size: 14px;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-color-primary);
+}
+
+.SearchUser__signature {
+  font-size: 12px;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  word-break: break-word;
+  color: var(--text-color-secondary);
+}
+
+:global(.SearchUser__highlight) {
+  background-color: var(--bg-color-operate);
+  color: var(--text-color-link);
+  padding: 0 2px;
+  border-radius: 2px;
+  font-weight: 500;
+} 

package/src/components/Search/SearchResults/SearchResultsItem/User/User.vue

@@ -0,0 +1,72 @@
+<!-- eslint-disable import/extensions -->
+<template>
+  <div :class="$style.SearchUser" @click="handleClick">
+    <div :class="$style['SearchUser__avatar']">
+      <Avatar :src="profile?.avatar" :alt="profile?.nick || profile?.userID" />
+    </div>
+    <div :class="$style['SearchUser__profile']">
+      <div
+        :class="$style['SearchUser__nickname']"
+        v-html="highlightText(profile?.nick || profile?.userID, keyword, $style['SearchUser__highlight'])"
+      ></div>
+      <div
+        v-if="profile?.selfSignature"
+        :class="$style['SearchUser__signature']"
+        v-html="highlightText(profile?.selfSignature, keyword, $style['SearchUser__highlight'])"
+      ></div>
+      <div v-else :class="$style['SearchUser__signature']">
+        {{ getGenderText(profile?.gender as string) }}
+        &nbsp;
+        {{ profile?.birthday && `${birthdayToAge(profile?.birthday)}${t('Search.filter.age.yearsOld')}` }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, defineProps } from 'vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import { SearchType } from '../../../../../types/engine';
+import type { ResultItemProps } from '../../../../../types/search';
+import { Avatar } from '../../../../Avatar';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { highlightText } from '../utils';
+
+const { t } = useUIKit();
+
+const birthdayToAge = (birthday: number): number => {
+  const today = new Date();
+  const birthDate = new Date(birthday);
+  let age = today.getFullYear() - birthDate.getFullYear();
+  const monthDiff = today.getMonth() - birthDate.getMonth();
+
+  if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
+    age = age - 1;
+  }
+
+  return age;
+};
+
+const props = defineProps<ResultItemProps<SearchType.USER>>();
+
+const profile = computed(() => props.data.profile);
+
+const getGenderText = (gender: string) => {
+  switch (gender) {
+    case TUIChatEngine.TYPES.GENDER_MALE:
+      return t('Search.filter.gender.male');
+    case TUIChatEngine.TYPES.GENDER_FEMALE:
+      return t('Search.filter.gender.female');
+    default:
+      return t('Search.filter.gender.secret');
+  }
+};
+
+const handleClick = () => {
+  props.onClick?.(props.data, SearchType.USER);
+};
+</script>
+
+<style lang="scss" module>
+@import './User.scss';
+</style>

package/src/components/Search/SearchResults/SearchResultsItem/User/index.ts

@@ -0,0 +1,2 @@
+export { default as User } from './User.vue';
+export * from './User.vue';

package/src/components/Search/SearchResults/SearchResultsItem/index.ts

@@ -0,0 +1,10 @@
+import SearchResultItemComponent from './SearchResultsItem.vue';
+export { default as SearchResultItem } from './SearchResultsItem.vue';
+
+export * from './SearchResultsItem.vue';
+export * from './Conversation';
+export * from './Group';
+export * from './Message';
+export * from './User';
+
+export default SearchResultItemComponent;