消息

2025-05-13 19:39:53 +08:00
parent 37da6765b8
commit c006a8e63d
1232 changed files with 96963 additions and 883 deletions
--- a/TUIKit/components/TUIContact/index.vue
+++ b/TUIKit/components/TUIContact/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <SelectFriend v-if="isShowSelectFriend" />
+  <div
+    v-else-if="isShowContactList"
+    :class="['tui-contact', !isPC && 'tui-contact-h5']"
+  >
+    <div :class="['tui-contact-left', !isPC && 'tui-contact-h5-left']">
+      <ContactSearch />
+      <ContactList :class="['tui-contact-left-list', !isPC && 'tui-contact-h5-left-list']" />
+    </div>
+    <div
+      v-if="isShowContactInfo"
+      :class="['tui-contact-right', !isPC && 'tui-contact-h5-right']"
+    >
+      <ContactInfo @switchConversation="switchConversation" />
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { TUIStore, StoreName } from '@tencentcloud/chat-uikit-engine';
+import { TUIGlobal } from '@tencentcloud/universal-api';
+import { ref, watchEffect } from '../../adapter-vue';
+import { isPC, isUniFrameWork } from '../../utils/env';
+
+import SelectFriend from './select-friend/index.vue';
+import ContactSearch from './contact-search/index.vue';
+import ContactList from './contact-list/index.vue';
+import ContactInfo from './contact-info/index.vue';
+
+const emits = defineEmits(['switchConversation']);
+
+const props = defineProps({
+  // web/h5 single page application display format, uniapp please ignore
+  displayType: {
+    type: String,
+    default: 'contactList', // "contactList" /  "selectFriend"
+    require: false,
+  },
+});
+
+const displayTypeRef = ref<string>(props.displayType || 'contactList');
+const isShowSelectFriend = ref(false);
+const isShowContactList = ref(true);
+const isShowContactInfo = ref(true);
+
+watchEffect(() => {
+  isShowContactList.value = props?.displayType !== 'selectFriend';
+});
+
+TUIStore.watch(StoreName.CUSTOM, {
+  isShowSelectFriendComponent: (data: any) => {
+    if (!isUniFrameWork && props?.displayType === 'selectFriend') {
+      isShowSelectFriend.value = data;
+      isShowContactList.value = false;
+      return;
+    }
+    if (data) {
+      isShowSelectFriend.value = true;
+      if (isUniFrameWork) {
+        displayTypeRef.value = 'selectFriend';
+        TUIGlobal?.hideTabBar();
+      }
+    } else {
+      isShowSelectFriend.value = false;
+      if (isUniFrameWork) {
+        displayTypeRef.value = props.displayType;
+        TUIGlobal?.showTabBar()?.catch(() => { /* ignore */ });
+      }
+    }
+  },
+  currentContactInfo: (contactInfo: any) => {
+    isShowContactInfo.value = isPC || (contactInfo && typeof contactInfo === 'object' && Object.keys(contactInfo)?.length > 0);
+  },
+});
+
+const switchConversation = (data: any) => {
+  isUniFrameWork
+  && TUIGlobal?.navigateTo({
+    url: '/TUIKit/components/TUIChat/index',
+  });
+  emits('switchConversation', data);
+};
+
+</script>
+<style lang="scss" scoped>
+@import "../../assets/styles/common";
+
+.tui-contact {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  overflow: hidden;
+
+  &-left {
+    min-width: 285px;
+    flex: 0 0 24%;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-right {
+    border-left: 1px solid #f4f5f9;
+    flex: 1;
+    overflow: hidden;
+  }
+}
+
+.tui-contact-h5 {
+  position: relative;
+
+  &-left,
+  &-right {
+    width: 100%;
+    height: 100%;
+    flex: 1;
+  }
+
+  &-right {
+    position: absolute;
+    z-index: 100;
+  }
+
+  &-left {
+    &-list {
+      overflow-y: auto;
+    }
+  }
+}
+</style>