消息

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,96 @@
+<template>
+  <div
+    :ref="convHeaderRef"
+    class="tui-conversation-header"
+  >
+    <ul
+      v-if="menuList.length > 0"
+      class="list"
+    >
+      <li
+        v-for="(item, index) in menuList"
+        :key="index"
+        class="list-item"
+      >
+        <main
+          class="tui-conversation-header-item"
+          @click.stop="handleMenu(item)"
+        >
+          <Icon
+            v-if="item.icon && !item.data.children"
+            class="tui-conversation-header-item-icon"
+            :file="item.icon"
+          />
+          <i
+            v-else
+            class="plus"
+          />
+          <h1 class="tui-conversation-header-item-title">
+            {{ item.text }}
+          </h1>
+        </main>
+      </li>
+    </ul>
+    <ul
+      v-if="showChildren.length > 0"
+      class="tui-conversation-header-children list"
+    >
+      <li
+        v-for="(childrenItem, childrenIndex) in showChildren"
+        :key="childrenIndex"
+        class="list-item"
+      >
+        <main
+          class="tui-conversation-header-item"
+          @click="handleMenu(childrenItem)"
+        >
+          <Icon
+            v-if="childrenItem.icon"
+            class="tui-conversation-header-item-icon"
+            :file="childrenItem.icon"
+          />
+          <h1 class="tui-conversation-header-item-title">
+            {{ childrenItem.text }}
+          </h1>
+        </main>
+      </li>
+    </ul>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, ref, onMounted } from '../../../adapter-vue';
+import Icon from '../../common/Icon.vue';
+import Server, { IMenuItem } from './server';
+
+const showChildren = ref<Array<IMenuItem>>([]);
+const convHeaderRef = ref<HTMLElement | undefined>();
+
+const menuList = computed(() => {
+  return Server.getInstance().getMenu();
+});
+
+onMounted(() => {
+  showChildren.value = [];
+});
+
+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 src="../style/index.scss"></style>

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

@@ -0,0 +1,78 @@
+import TUICore, { TUIConstants } from '@tencentcloud/tui-core';
+import { TUITranslateService } from '@tencentcloud/chat-uikit-engine';
+import { isPC } from '../../../utils/env';
+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: TUITranslateService.t('TUIConversation.发起会话'),
+        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,
+    });
+  }
+}