添加聊天

TUIKit/components/TUIConversation/conversation-header/index.ts

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

TUIKit/components/TUIConversation/conversation-header/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div
+    :ref="convHeaderRef"
+    class="tui-conversation-header"
+  >
+    <Navigation title="测试首页标题">
+      <template
+        #right
+      >
+        <div v-show="!isGlobalSearching" class="menu-container">
+          <ul
+            v-if="menuList.length > 0"
+            class="list"
+          >
+            <li
+              v-for="(item, index) in menuList"
+              :key="index"
+              class="list-item"
+            >
+              <main
+                class="list-item-item"
+                @click.stop="handleMenu(item)"
+              >
+                <Icon
+                  v-if="item.icon"
+                  class="list-item-icon"
+                  :file="item.icon"
+                />
+              </main>
+            </li>
+          </ul>
+          <ul
+            v-if="showChildren.length > 0"
+            class="menu-container-children list"
+          >
+            <li
+              v-for="(childrenItem, childrenIndex) in showChildren"
+              :key="childrenIndex"
+              class="list-item"
+              @click="handleMenu(childrenItem)"
+            >
+              <Icon
+                v-if="childrenItem.icon"
+                class="list-item-icon"
+                :file="childrenItem.icon"
+              />
+              <h1 class="list-item-title">
+                {{ childrenItem.text }}
+              </h1>
+            </li>
+          </ul>
+        </div>
+      </template>
+    </Navigation>
+    <slot />
+  </div>
+</template>
+<script lang="ts" setup>
+import { StoreName, TUIStore } from '@tencentcloud/chat-uikit-engine-lite';
+import { computed, ref, onMounted, onUnmounted } from '../../../adapter-vue';
+import Icon from '../../common/Icon.vue';
+import Navigation from '../../common/Navigation/index.vue';
+import Server, { IMenuItem } from './server';
+import type { ISearchingStatus } from '../../TUISearch/type';
+
+const showChildren = ref<IMenuItem[]>([]);
+const convHeaderRef = ref<HTMLElement | undefined>();
+const isGlobalSearching = ref(false);
+
+const menuList = computed(() => {
+  return Server.getInstance().getMenu();
+});
+
+const onCurrentSearchingStatusChange = (data: ISearchingStatus) => {
+  isGlobalSearching.value = data.searchType === 'global' && data.isSearching;
+  if (isGlobalSearching.value) {
+    closeChildren();
+  }
+};
+
+onMounted(() => {
+  showChildren.value = [];
+  TUIStore.watch(StoreName.SEARCH, {
+    currentSearchingStatus: onCurrentSearchingStatusChange,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.SEARCH, {
+    currentSearchingStatus: onCurrentSearchingStatusChange,
+  });
+});
+
+const handleMenu = (item: IMenuItem) => {
+  const { data: { children }, listener = { onClicked: () => {} } } = item;
+  if (children) {
+    showChildren.value = showChildren.value.length > 0 ? [] : children;
+  } else {
+    listener.onClicked(item);
+    closeChildren();
+  }
+};
+
+const closeChildren = () => {
+  showChildren.value = [];
+};
+
+defineExpose({
+  closeChildren,
+});
+
+</script>
+<style lang="scss" scoped>
+.menu-container {
+  position: relative;
+}
+</style>
+
+<style lang="scss" scoped src="../style/index.scss"></style>

TUIKit/components/TUIConversation/conversation-header/server.ts

@@ -0,0 +1,80 @@
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core-lite';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine-lite';
+import { isPC } from '../../../utils/env';
+import addCircle from '../../../assets/icon/add-circle.svg';
+import createGroup from '../../../assets/icon/start-group.svg';
+import C2C from '../../../assets/icon/icon-c2c.svg';
+import { CONV_CREATE_TYPE } from '../../../constant';
+
+export interface IMenuItem {
+  icon?: string;
+  text: string;
+  data: {
+    name: string;
+    children?: any[];
+  };
+  listener?: {
+    onClicked: (...args: any[]) => void;
+  };
+}
+
+export default class ConversationHeaderServer {
+  static instance: ConversationHeaderServer;
+
+  static getInstance(): ConversationHeaderServer {
+    if (!ConversationHeaderServer.instance) {
+      ConversationHeaderServer.instance = new ConversationHeaderServer();
+    }
+    return ConversationHeaderServer.instance;
+  }
+
+  public getMenu(): any[] {
+    const list = this.generateMenuList();
+    if (!isPC && list.length > 0) {
+      return [{
+        text: '',
+        icon: addCircle,
+        data: {
+          name: 'all',
+          children: list,
+        },
+      }];
+    }
+    return list;
+  }
+
+  private generateMenuList(): any[] {
+    const list = [
+      {
+        icon: C2C,
+        text: TUITranslateService.t('TUIConversation.发起单聊'),
+        data: {
+          name: CONV_CREATE_TYPE.TYPEC2C,
+        },
+        listener: {
+          onClicked: this.createConversation.bind(this),
+        },
+      },
+      {
+        icon: createGroup,
+        text: TUITranslateService.t('TUIConversation.发起群聊'),
+        data: {
+          name: CONV_CREATE_TYPE.TYPEGROUP,
+        },
+        listener: {
+          onClicked: this.createConversation.bind(this),
+        },
+      },
+    ];
+    return list;
+  }
+
+  private createConversation(item: IMenuItem) {
+    // Create a conversation and notify conversationServer via TUICore.callService
+    TUICore.callService({
+      serviceName: TUIConstants.TUIConversation.SERVICE.NAME,
+      method: TUIConstants.TUIConversation.SERVICE.METHOD.CREATE_CONVERSATION,
+      params: item,
+    });
+  }
+}