UI优化，红包领取后缺少头像，名称字段

2026-01-19 23:30:08 +08:00
parent d2a22b9419
commit 651d20b909
41 changed files with 2189 additions and 1827 deletions
--- a/TUIKit/components/TUISearch/index.vue
+++ b/TUIKit/components/TUISearch/index.vue
@@ -5,7 +5,7 @@
      'tui-search',
      !isPC && 'tui-search-h5',
      `tui-search-main-${currentSearchType}`,
-      isFullScreen && 'tui-search-h5-full-screen',
+      isFullScreen && 'tui-search-h5-full-screen'
    ]"
  >
    <div
@@ -16,7 +16,7 @@
      <div
        :class="[
          'tui-search-global-header',
-          !isPC && 'tui-search-h5-global-header',
+          !isPC && 'tui-search-h5-global-header'
        ]"
      >
        <SearchInput
@@ -40,12 +40,13 @@
    </div>
    <div
      v-else-if="
-        (currentSearchType === 'conversation' && isShowInConversationSearch) ||
-          isUniFrameWork
+        (currentSearchType === 'conversation' &&
+          isShowInConversationSearch) ||
+        isUniFrameWork
      "
      :class="[
        'tui-search-conversation',
-        !isPC && 'tui-search-h5-conversation',
+        !isPC && 'tui-search-h5-conversation'
      ]"
    >
      <SearchContainer
@@ -55,9 +56,7 @@
        @closeInConversationSearch="closeInConversationSearch"
      >
        <template #input>
-          <SearchInput
-            :searchType="currentSearchType"
-          />
+          <SearchInput :searchType="currentSearchType" />
        </template>
        <template #result>
          <SearchResult
@@ -70,149 +69,176 @@
  </div>
 </template>
 <script lang="ts" setup>
-import {
-  ref,
-  onMounted,
-  computed,
-  withDefaults,
-  onUnmounted,
-  watch,
-} from '../../adapter-vue';
-import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine-lite';
-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 { searchMessageTypeDefault } from './search-type-list';
-import { searchMessageTimeDefault } from './search-time-list';
-import { isPC, isUniFrameWork } from '../../utils/env';
-import { ISearchingStatus, SEARCH_TYPE } from './type';
+  import {
+    ref,
+    onMounted,
+    computed,
+    withDefaults,
+    onUnmounted,
+    watch
+  } from '../../adapter-vue'
+  import {
+    TUIStore,
+    StoreName
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  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 { 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 'global';
-    },
-  },
-);
-
-const globalSearchRef = ref<HTMLElement | null>();
-const currentConversationID = ref<string>('');
-const searchingStatus = ref<boolean>(false);
-const currentSearchType = ref<SEARCH_TYPE>('global');
-const isShowSearch = 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
-    && ((currentSearchType.value === 'global' && searchingStatus.value)
-    || (currentSearchType.value === 'conversation' && isShowInConversationSearch.value)),
-);
-
-watch(() => [currentConversationID.value, isShowInConversationSearch.value], (data) => {
-  if (isUniFrameWork && data[0]) {
-    currentSearchType.value = 'conversation';
-  } else {
-    currentSearchType.value = props.searchType;
-  }
-  isShowSearch.value = currentSearchType.value === 'global'
-  || ((currentSearchType.value === 'conversation' || (!currentSearchType.value && isUniFrameWork))
-  && !!data[1]);
-}, { immediate: true, deep: true });
-
-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,
-  });
-  TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
-    isSearching: false,
-    searchType: currentSearchType.value,
-  });
-};
-
-function onCurrentConversationIDUpdate(conversationID: string) {
-  if (!isUniFrameWork && currentConversationID.value !== conversationID) {
-    // PC side single page switch session, close search
-    closeInConversationSearch();
-  }
-  if (!conversationID && isUniFrameWork) {
-	  initSearchValue('global');
-  }
-  currentConversationID.value = conversationID;
-}
-function onCurrentSearchingStatusChange(value: ISearchingStatus) {
-  if (value?.searchType === currentSearchType.value) {
-    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,
-        });
+  const props = withDefaults(
+    defineProps<{
+      searchType?: SEARCH_TYPE
+    }>(),
+    {
+      searchType: () => {
+        return 'global'
      }
    }
-    if (value?.searchType === 'global' && isUniFrameWork) {
-      // hide tab bar in uni-app when global searching
-      value.isSearching ? TUIGlobal?.hideTabBar()?.catch(() => { /* ignore */ }) : TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
+  )
+
+  const globalSearchRef = ref<HTMLElement | null>()
+  const currentConversationID = ref<string>('')
+  const searchingStatus = ref<boolean>(false)
+  const currentSearchType = ref<SEARCH_TYPE>('global')
+  const isShowSearch = 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 &&
+      ((currentSearchType.value === 'global' && searchingStatus.value) ||
+        (currentSearchType.value === 'conversation' &&
+          isShowInConversationSearch.value))
+  )
+
+  watch(
+    () => [currentConversationID.value, isShowInConversationSearch.value],
+    data => {
+      if (isUniFrameWork && data[0]) {
+        currentSearchType.value = 'conversation'
+      } else {
+        currentSearchType.value = props.searchType
+      }
+      isShowSearch.value =
+        currentSearchType.value === 'global' ||
+        ((currentSearchType.value === 'conversation' ||
+          (!currentSearchType.value && isUniFrameWork)) &&
+          !!data[1])
+    },
+    { immediate: true, deep: true }
+  )
+
+  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
+    })
+    TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
+      isSearching: false,
+      searchType: currentSearchType.value
+    })
+  }
+
+  function onCurrentConversationIDUpdate(conversationID: string) {
+    if (
+      !isUniFrameWork &&
+      currentConversationID.value !== conversationID
+    ) {
+      // PC side single page switch session, close search
+      closeInConversationSearch()
+    }
+    if (!conversationID && isUniFrameWork) {
+      initSearchValue('global')
+    }
+    currentConversationID.value = conversationID
+  }
+  function onCurrentSearchingStatusChange(value: ISearchingStatus) {
+    if (value?.searchType === currentSearchType.value) {
+      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(currentSearchType.value);
-}
+  function onIsShowInConversationSearchChange(value: boolean) {
+    isShowInConversationSearch.value = value ? true : false
+    isShowInConversationSearch.value &&
+      initSearchValue(currentSearchType.value)
+  }

-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,
-  });
-});
+  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,
-  });
-});
+  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: currentSearchType.value,
-  });
-}
+  function closeGlobalSearch() {
+    TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
+      isSearching: false,
+      searchType: currentSearchType.value
+    })
+  }

-function closeInConversationSearch() {
-  TUIStore.update(StoreName.SEARCH, 'isShowInConversationSearch', false);
-}
+  function closeInConversationSearch() {
+    TUIStore.update(StoreName.SEARCH, 'isShowInConversationSearch', false)
+  }
 </script>
 <style lang="scss" scoped src="./style/index.scss"></style>
+
+<style lang="scss" scoped>
+  .tui-search-global {
+    // background: red;
+    padding: 0 !important;
+  }
+</style>
--- a/TUIKit/components/TUISearch/search-input/index.vue
+++ b/TUIKit/components/TUISearch/search-input/index.vue
@@ -12,10 +12,7 @@
      v-if="!searchingStatus && props.searchType === 'global'"
      :class="['tui-search-input', !isPC && 'tui-search-input-h5']"
    >
-      <div
-        class="tui-search-input-place"
-        @click="onSearchInputClick"
-      >
+      <div class="tui-search-input-place" @click="onSearchInputClick">
        <Icon
          class="icon"
          :file="searchIcon"
@@ -47,200 +44,197 @@
        @blur="onBlur"
        @keyup.enter="search"
        @confirm="search"
-      >
+      />
      <div
        v-if="searchingStatus"
        class="tui-search-input-right"
        @click="endSearching"
      >
-        <Icon
-          class="icon"
-          :file="closeIcon"
-          width="14px"
-          height="14px"
-        />
+        <Icon class="icon" :file="closeIcon" width="14px" height="14px" />
      </div>
    </div>
    <div
      v-if="!isPC && searchingStatus && props.searchType === 'global'"
      :class="[
        'tui-search-input-cancel',
-        !isPC && 'tui-search-input-h5-cancel',
+        !isPC && 'tui-search-input-h5-cancel'
      ]"
      @click="endSearching"
    >
-      {{ TUITranslateService.t("TUISearch.取消") }}
+      {{ TUITranslateService.t('TUISearch.取消') }}
    </div>
  </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, onUnmounted } from '../../../adapter-vue';
-import {
-  TUIStore,
-  StoreName,
-  TUITranslateService,
-} from '@tencentcloud/chat-uikit-engine-lite';
-import { TUIGlobal } from '@tencentcloud/universal-api';
-import Icon from '../../common/Icon.vue';
-import searchIcon from '../../../assets/icon/search.svg';
-import closeIcon from '../../../assets/icon/input-close.svg';
-import { isPC } from '../../../utils/env';
-import { ISearchInputValue, ISearchingStatus } from '../type';
-const props = defineProps({
-  placeholder: {
-    type: String,
-    default: () => TUITranslateService.t('TUISearch.搜索'),
-  },
-  searchType: {
-    type: String,
-    default: 'global', // "global" / "conversation"
-    validator(value: string) {
-      return ['global', 'conversation'].includes(value);
+  import { ref, onMounted, onUnmounted } from '../../../adapter-vue'
+  import {
+    TUIStore,
+    StoreName,
+    TUITranslateService
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { TUIGlobal } from '@tencentcloud/universal-api'
+  import Icon from '../../common/Icon.vue'
+  import searchIcon from '../../../assets/icon/search.svg'
+  import closeIcon from '../../../assets/icon/input-close.svg'
+  import { isPC } from '../../../utils/env'
+  import { ISearchInputValue, ISearchingStatus } from '../type'
+  const props = defineProps({
+    placeholder: {
+      type: String,
+      default: () => TUITranslateService.t('TUISearch.搜索')
    },
-  },
-});
+    searchType: {
+      type: String,
+      default: 'global', // "global" / "conversation"
+      validator(value: string) {
+        return ['global', 'conversation'].includes(value)
+      }
+    }
+  })

-const searchValueModel = ref<string>('');
-const currentSearchInputValue = ref<string>('');
-const searchingStatus = ref<boolean>(false);
+  const searchValueModel = ref<string>('')
+  const currentSearchInputValue = ref<string>('')
+  const searchingStatus = ref<boolean>(false)

-function onCurrentSearchInputValueChange(obj: ISearchInputValue) {
-  if (obj?.searchType === props?.searchType) {
-    currentSearchInputValue.value = obj?.value;
-    searchValueModel.value = obj?.value;
+  function onCurrentSearchInputValueChange(obj: ISearchInputValue) {
+    if (obj?.searchType === props?.searchType) {
+      currentSearchInputValue.value = obj?.value
+      searchValueModel.value = obj?.value
+    }
  }
-}

-function onCurrentSearchingStatusChange(obj: ISearchingStatus) {
-  if (obj?.searchType === props?.searchType) {
-    searchingStatus.value = obj?.isSearching;
+  function onCurrentSearchingStatusChange(obj: ISearchingStatus) {
+    if (obj?.searchType === props?.searchType) {
+      searchingStatus.value = obj?.isSearching
+    }
  }
-}

-onMounted(() => {
-  TUIStore.watch(StoreName.SEARCH, {
-    currentSearchInputValue: onCurrentSearchInputValueChange,
-    currentSearchingStatus: onCurrentSearchingStatusChange,
-  });
-});
+  onMounted(() => {
+    TUIStore.watch(StoreName.SEARCH, {
+      currentSearchInputValue: onCurrentSearchInputValueChange,
+      currentSearchingStatus: onCurrentSearchingStatusChange
+    })
+  })

-onUnmounted(() => {
-  TUIStore.unwatch(StoreName.SEARCH, {
-    currentSearchInputValue: onCurrentSearchInputValueChange,
-    currentSearchingStatus: onCurrentSearchingStatusChange,
-  });
-});
+  onUnmounted(() => {
+    TUIStore.unwatch(StoreName.SEARCH, {
+      currentSearchInputValue: onCurrentSearchInputValueChange,
+      currentSearchingStatus: onCurrentSearchingStatusChange
+    })
+  })

-const search = () => {
-  // Avoid duplicate searches
-  if (searchValueModel.value === currentSearchInputValue.value) {
-    return;
+  const search = () => {
+    // Avoid duplicate searches
+    if (searchValueModel.value === currentSearchInputValue.value) {
+      return
+    }
+    TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
+      value: searchValueModel.value,
+      searchType: props.searchType
+    })
  }
-  TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
-    value: searchValueModel.value,
-    searchType: props.searchType,
-  });
-};

-const endSearching = () => {
-  searchingStatus.value = false;
-  TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
-    isSearching: false,
-    searchType: props.searchType,
-  });
-  TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
-    value: '',
-    searchType: props.searchType,
-  });
-};
+  const endSearching = () => {
+    searchingStatus.value = false
+    TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
+      isSearching: false,
+      searchType: props.searchType
+    })
+    TUIStore.update(StoreName.SEARCH, 'currentSearchInputValue', {
+      value: '',
+      searchType: props.searchType
+    })
+  }

-const onSearchInputClick = () => {
-  TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
-    isSearching: true,
-    searchType: props.searchType,
-  });
-};
+  const onSearchInputClick = () => {
+    TUIStore.update(StoreName.SEARCH, 'currentSearchingStatus', {
+      isSearching: true,
+      searchType: props.searchType
+    })
+  }

-const onBlur = () => {
-  TUIGlobal?.hideKeyboard?.();
-};
+  const onBlur = () => {
+    TUIGlobal?.hideKeyboard?.()
+  }
 </script>
 <style lang="scss" scoped>
-.tui-search-input-container {
-  display: flex;
-  flex-direction: row;
-  box-sizing: border-box;
-  border-radius: 8px;
-  padding: 0 2px;
-
-  &-global {
-    flex: 1;
-  }
-
-  .tui-search-input {
-    flex: 1;
+  .tui-search-input-container {
    display: flex;
    flex-direction: row;
-    margin: 10px;
-    background: #FEFEFE;
-    justify-content: center;
-    align-items: center;
-    height: 28px;
+    box-sizing: border-box;
    border-radius: 8px;
-
-    &-main {
+    padding: 0 2px;
+    &-global {
      flex: 1;
-      background: transparent;
-      border: none;
-      caret-color: #007aff;
-      font-size: 14px;
-
-      &:focus {
-        border: none;
-        outline: none;
-      }
-
-      &::placeholder {
-        color: #666;
-        font-size: 12px;
-      }
    }

-    &-left,
-    &-right {
+    .tui-search-input {
+      flex: 1;
      display: flex;
-      width: 14px;
-      height: 14px;
-      padding: 0 7px;
+      flex-direction: row;
+      margin: 0 26rpx;
+      margin-top: 12rpx;
+      background: #F4F4F4;
+      justify-content: center;
+      align-items: center;
+      height: 64rpx;
+      border-radius: 64rpx;
+      margin-bottom: 12rpx;
+
+      &-main {
+        flex: 1;
+        background: transparent;
+        border: none;
+        caret-color: #007aff;
+        font-size: 14px;
+
+        &:focus {
+          border: none;
+          outline: none;
+        }
+
+        &::placeholder {
+          color: #666;
+          font-size: 12px;
+        }
+      }
+
+      &-left,
+      &-right {
+        display: flex;
+        width: 14px;
+        height: 14px;
+        padding: 0 7px;
+      }
+    }
+
+    .tui-search-input-place {
+      flex: 1;
+      display: flex;
+      gap: 5px;
+      justify-content: flex-start;
+      align-items: center;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #bbbbbb;
+      padding-left: 32rpx;
    }
  }

-  .tui-search-input-place {
-    flex: 1;
-    display: flex;
-    gap: 5px;
-    justify-content: center;
-    align-items: center;
-    font-family: PingFang SC;
-    font-weight: 400;
-    color: #BBBBBB;
-  }
-}
+  .tui-search-input-container-h5 {
+    .tui-search-input-h5 {
+      height: 40px;
+    }

-.tui-search-input-container-h5 {
-  .tui-search-input-h5 {
-    height: 40px;
+    .tui-search-input-cancel {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      color: #007aff;
+      font-size: 16px;
+      padding: 7px 10px 7px 3px;
+      font-family: 'PingFang SC', sans-serif;
+    }
  }
-
-  .tui-search-input-cancel {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: #007aff;
-    font-size: 16px;
-    padding: 7px 10px 7px 3px;
-    font-family: "PingFang SC", sans-serif;
-  }
-}
 </style>
--- a/TUIKit/components/TUISearch/style/web.scss
+++ b/TUIKit/components/TUISearch/style/web.scss
@@ -1,5 +1,5 @@
 .tui-search {
-  background: #EBF0F6;
+  background: #fff;

  &-main-global {
    width: 100%;
@@ -14,7 +14,7 @@
  }

  .tui-search-global {
-    padding-bottom: 10px;
+    padding-bottom: 32rpx;
    &-header {
      display: flex;
      flex-direction: row;