tuikit-atomicx-vue3 0.1.1 → 3.3.0-beta.3

package/src/components/ContactList/i18n/zh-CN.ts

@@ -0,0 +1,77 @@
+export default {
+  TUIContact: {
+    // ContactList组件翻译
+    'New contacts': '新的联系人',
+    'Group applications': '群聊申请',
+    'My friends': '我的好友',
+    'My groups': '我的群聊',
+    'Blacklist': '黑名单',
+    'Search contacts': '搜索联系人',
+    'No contacts': '暂无联系人',
+    'No Result': '无搜索结果',
+    'Add friend/group': '添加好友/群聊',
+    'Unknown contact type': '未知联系人类型',
+    'Request to add you as friend': '请求添加您为好友',
+    'Apply to join group': '申请加入群聊',
+    'Invite you to join group': '邀请您加入群聊',
+    'Application status': '申请状态',
+    'Pending': '待处理',
+    'Application note': '申请备注',
+    'None': '无',
+    'Verification info': '验证信息',
+    'Personal signature': '个性签名',
+    'Remark name': '备注名',
+    'Save': '保存',
+    'Add to blacklist': '加入黑名单',
+    'Send message': '发送消息',
+    'Apply to add friend': '申请添加好友',
+    'Add friend failed': '添加好友失败',
+    'User is already your friend': '该用户已是您的好友',
+    'Friend request sent, waiting for confirmation': '好友请求已发送，等待确认',
+    'Application info': '申请信息',
+    'Please enter application info...': '请输入申请信息...',
+    'Group ID': '群ID',
+    'Group type': '群类型',
+    'Group introduction': '群介绍',
+    'No introduction': '暂无介绍',
+    'Work group': '工作群',
+    'Public group': '公开群',
+    'Meeting group': '会议群',
+    'Live group': '直播群',
+    'Community': '社群',
+    'Unknown': '未知',
+    'You are already in this group': '您已在该群中',
+    'Group application sent, waiting for admin approval': '入群申请已发送，等待管理员审核',
+    'Apply to join group failed': '申请入群失败',
+    'Remove from blacklist': '移出黑名单',
+    'dismiss group': '解散群组',
+    'quit group': '退出群组',
+    'Enter group chat': '进入群聊',
+    'Confirm dismiss group': '确认解散群组？',
+    'Confirm quit group': '确认退出群组？',
+    'Agree': '同意',
+    'Refuse': '拒绝',
+    'Accept': '接受',
+    'Submit': '确认',
+    'Cancel': '取消',
+    'Delete friend': '删除好友',
+    'Confirm delete friend': '确认删除好友？',
+    'Friends': '好友',
+    'User': '用户',
+    'ID': 'ID',
+    'Send Message': '发送消息',
+    'Signature': '签名',
+    'Blocked List': '黑名单列表',
+    'Group List': '群聊列表',
+    'Enter a userID': '输入用户ID',
+    'Enter the verification info': '输入验证信息',
+    'Request to join': '申请加入',
+    'Requested': '已申请',
+    'Handled': '已处理',
+    'remark': '备注',
+    'block': '拉黑',
+    'waiting for verification': '等待验证',
+    'verification info': '验证信息',
+    'Send application': '发送申请',
+  },
+};

package/src/components/ContactList/index.ts

@@ -0,0 +1,18 @@
+import { addI18n } from '../../i18n';
+import { ContactInfo as ContactInfoComponent } from './ContactInfo';
+import ContactListComponent from './ContactList.vue';
+import { ContactListItem as ContactListItemComponent } from './ContactListItem';
+import { enResource, zhResource } from './i18n';
+
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+
+const ContactListItem = ContactListItemComponent;
+const ContactInfo = ContactInfoComponent;
+const ContactList = ContactListComponent;
+
+export {
+  ContactList,
+  ContactListItem,
+  ContactInfo,
+};

package/src/components/ConversationList/ConversationActions/ConversationActions.scss

@@ -18,56 +18,55 @@
     }
   }
 
-  &__container {
-    position: absolute;
-    top: 100%;
-    right: 0;
-    border-radius: 4px;
-    box-shadow: 0 0 10px var(--shadow-color);
-    background-color: var(--bg-color-operate);
-    z-index: 100;
-    min-width: 120px;
+  &__h5 {
+    z-index: 5;
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    background: var(--bg-color-mask)
   }
 
   &__h5__container {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
     background-color: var(--bg-color-operate);
     border-radius: 8px 8px 0 0;
     box-shadow: 0 0 10px var(--shadow-color);
-    z-index: 100;
-    padding: 16px;
+
+    .conversationActions__item {
+      text-align: center;
+      font-weight: 400;
+      font-size: 17px;
+      line-height: 22px;
+      padding: 16px 0;
+      border-bottom: 1px solid var(--stroke-color-primary);
+      color: var(--button-color-primary-default);
+
+      &:last-child {
+        border-bottom: none;
+        color: var(--text-color-error);
+      }
+    }
   }
 
   &__item {
-    padding: 8px 12px;
-    cursor: pointer;
     font-size: 14px;
-    color: var(--text-color-primary, #333);
-    border-bottom: 1px solid var(--stroke-color-primary, #f0f0f0);
-    transition: background-color 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 8px;
+    line-height: 19px;
+    padding: 9px 16px;
+    cursor: pointer;
+    font-weight: 400;
+    box-sizing: border-box;
+    color: var(--text-color-primary);
 
     &:hover {
-      background-color: var(--dropdown-color-active, #f8f9fa);
-    }
-
-    &:last-child {
-      border-bottom: none;
+      background-color: var(--dropdown-color-active);
     }
 
     &--delete {
-      color: var(--text-color-error, #dc3545);
-    }
-
-    .action-icon {
-      width: 16px;
-      height: 16px;
-      flex-shrink: 0;
+      color: var(--text-color-error);
     }
   }
 } 

package/src/components/ConversationList/ConversationActions/ConversationActions.vue

@@ -1,23 +1,14 @@
 <template>
   <div
     :class="[$style.conversationActions, {
-      [$style.conversationActions__H5]: isH5,
+      [$style.conversationActions__h5]: isH5,
     }, className]"
     :style="style"
     @click="handleMaskClick"
   >
     <div
-      :class="$style.conversationActions__popupIcon"
-      @click="toggleClick"
-    >
-      <slot name="popupIcon">
-        <IconEllipsis />
-      </slot>
-    </div>
-
-    <div
-      v-if="PopupElements || isH5"
-      :class="$style.conversationActions__H5__container"
+      v-if="isH5"
+      :class="$style.conversationActions__h5__container"
       @click.stop
     >
       <div
@@ -31,22 +22,18 @@
         {{ action.label }}
       </div>
     </div>
-
-    <Popup
+    <TUIDropdown
       v-else
-      :open="Boolean(anchor)"
-      :anchor="anchor"
+      trigger="click"
       placement="bottom-end"
-      disable-portal
-      :slot-props="{
-        root: {
-          style: {
-            zIndex: 5,
-          },
-        },
-      }"
     >
-      <div :class="$style.conversationActions__container">
+      <div
+        :class="$style.conversationActions__popupIcon"
+        @click="toggleClick"
+      >
+        <IconEllipsis />
+      </div>
+      <template #dropdown>
         <div
           v-for="(action, key) in enabledActions"
           :key="key"
@@ -57,16 +44,15 @@
         >
           {{ action.label }}
         </div>
-      </div>
-    </Popup>
+      </template>
+    </TUIDropdown>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
-import { IconEllipsis, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import { Popup } from '../../../baseComp';
+import { IconEllipsis, useUIKit, TUIDropdown } from '@tencentcloud/uikit-base-component-vue3';
 import { useConversationListState } from '../../../states/ConversationListState';
 import { isH5 } from '../../../utils';
 import type {

package/src/components/ConversationList/ConversationCreate/ConversationCreate.scss

@@ -5,43 +5,17 @@
     justify-content: center;
   }
 
-  &__main {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--bg-color-operate);
-    color: var(--text-color-primary);
-    z-index: 100;
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__header {
-    display: flex;
-    align-items: center;
-    padding: 12px;
-    background-color: var(--bg-color-topbar, #f5f5f5);
-  }
-
-  &__icon {
-    cursor: pointer;
-    padding: 4px;
-    border-radius: 4px;
-    transition: background-color 0.2s;
-    color: var(--text-color-link, #e0e0e0);
-  }
-
-  &__title {
-    margin-left: 12px;
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--text-color-primary, #333);
+  &__detail {
+    flex: 1;
   }
+} 
 
-  &__content {
-    flex: 1;
-    overflow: hidden;
+:deep(.conversationCreate__dialog) {
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  border-radius: 0;
+  .dialog-body {
+    height: 0;
   }
-} 
+}

package/src/components/ConversationList/ConversationCreate/ConversationCreate.vue

@@ -1,66 +1,69 @@
 <template>
   <div
-    v-if="visible"
-    :class="[$style.conversationCreate__container, className]"
-    :style="style"
+    :class="['conversationCreate__container', {['conversationCreate__detail']: !enableSearch }]"
   >
-    <ConversationCreateButton
-      v-if="!showCreateConversation"
-      @click="toggleCreateConversation(true)"
-    />
-
-    <div
-      v-if="showCreateConversation"
-      :class="$style.conversationCreate__main"
+    <ConversationCreateButton @click="openCreateConversation" />
+
+    <TUIDialog
+      :visible="showCreateConversation"
+      :title="dialogTitles"
+      :confirm-text="dialogConfirmText"
+      :cancel-text="dialogCancelText"
+      :custom-classes="[isH5 ? 'conversationCreate__dialog' : '']"
+      @confirm="handleConfirm"
+      @cancel="handleCancel"
+      @close="resetCreatePageState"
     >
-      <div :class="$style.conversationCreate__header">
-        <div
-          :class="$style.conversationCreate__icon"
-          @click="back"
-        >
-          <IconArrowStrokeBack />
-        </div>
-        <div :class="$style.conversationCreate__title">
-          {{ !isCreateGroup ? t('TUIConversation.Start chat') : t('TUIConversation.Add Participants') }}
-        </div>
-      </div>
-
       <ConversationCreateUserSelectList
         v-if="pageState === PageStateTypes.USER_SELECT"
         :is-create-group="isCreateGroup"
-        :set-is-create-group="setIsCreateGroup"
         :select-list="selectList"
         :set-select-list="setSelectList"
-        :conversation-list="conversationList"
         :set-page-state="setPageState"
-        :on-before-create-conversation="handleBeforeCreate"
-        :on-conversation-created="handleCreated"
       />
 
       <ConversationCreateGroupDetail
         v-else
         :page-state="pageState"
         :profile-list="selectList"
+        :group-info="groupInfo"
         :set-page-state="setPageState"
-        :on-before-create-conversation="handleBeforeCreate"
-        :on-conversation-created="handleCreated"
+        @update-group-info="updateGroupInfo"
       />
-    </div>
+    </TUIDialog>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';
-import { IconArrowStrokeBack, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import { PageStateTypes } from '../../../types';
+import { useUIKit, TUIDialog, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
+import { useConversationListState } from '../../../states/ConversationListState';
+import { useLoginState } from '../../../states/LoginState';
+import { PageStateTypes, CreateConvTypes, GroupType } from '../../../types';
+import { isH5 } from '../../../utils/env';
+import { useConversation } from '../hooks/useConversation';
+import { useConversationCreate } from '../hooks/useConversationCreate';
 import ConversationCreateButton from './ConversationCreateButton/ConversationCreateButton.vue';
 import ConversationCreateGroupDetail from './ConversationCreateGroupDetail/ConversationCreateGroupDetail.vue';
 import ConversationCreateUserSelectList from './ConversationCreateUserSelectList/ConversationCreateUserSelectList.vue';
-import type { ConversationModel, ConversationCreateProps, CreateGroupParams } from '../../../types';
+import type { ConversationModel, ConversationCreateProps, CreateGroupParams, CreateGroupInfo, Friend } from '../../../types';
+
+const { t } = useUIKit();
+const { enableSearch } = useConversation();
+const { getDefaultAvatar } = useConversationCreate();
+const { loginUserInfo } = useLoginState();
+const { createC2CConversation, createGroupConversation } = useConversationListState();
+
+const GROUP_NAME_LIMIT = 20;
+const GROUP_INFO_DEFAULTS: CreateGroupInfo = {
+  avatar: getDefaultAvatar(GroupType.WORK),
+  name: '',
+  groupID: '',
+  type: GroupType.WORK,
+};
 
 const props = withDefaults(defineProps<ConversationCreateProps>(), {
-  visible: true,
   conversationList: () => [],
 });
 
@@ -70,12 +73,16 @@ const emit = defineEmits<{
   'conversationCreated': [conversation: ConversationModel];
 }>();
 
-const { t } = useUIKit();
-
 const showCreateConversation = ref(false);
 const isCreateGroup = ref(false);
 const pageState = ref<PageStateTypes>(PageStateTypes.USER_SELECT);
-const selectList = ref<any[]>([]);
+const selectList = ref<Friend[]>([]);
+const groupInfo = ref<CreateGroupInfo>({
+  avatar: getDefaultAvatar(GroupType.WORK),
+  name: '',
+  groupID: '',
+  type: GroupType.WORK,
+});
 
 const setIsCreateGroup = (value: boolean) => {
   isCreateGroup.value = value;
@@ -85,65 +92,143 @@ const setPageState = (value: PageStateTypes) => {
   pageState.value = value;
 };
 
-const setSelectList = (value: any[]) => {
+const setSelectList = (value: Friend[]) => {
   selectList.value = value;
 };
 
+const openCreateConversation = (value: CreateConvTypes) => {
+  if (value === CreateConvTypes.GROUP) {
+    setIsCreateGroup(true);
+  } else {
+    setIsCreateGroup(false);
+  }
+  showCreateConversation.value = true;
+};
+
 const toggleCreateConversation = (value: boolean) => {
   showCreateConversation.value = value;
 };
 
 const resetCreatePageState = () => {
+  toggleCreateConversation(false);
+  groupInfo.value = GROUP_INFO_DEFAULTS;
   isCreateGroup.value = false;
   pageState.value = PageStateTypes.USER_SELECT;
   selectList.value = [];
 };
 
 const _onConversationCreated = (conversation: ConversationModel) => {
-  toggleCreateConversation(false);
   resetCreatePageState();
   TUIConversationService.switchConversation(conversation.conversationID);
   emit('conversationCreated', conversation);
+  props.onConversationCreated?.(conversation);
 };
 
-const back = () => {
-  if (isCreateGroup.value) {
-    switch (pageState.value) {
-      case PageStateTypes.USER_SELECT:
-        setIsCreateGroup(false);
-        break;
-      case PageStateTypes.CREATE_DETAIL:
-        setPageState(PageStateTypes.USER_SELECT);
-        setSelectList([]);
-        break;
-      case PageStateTypes.GROUP_TYPE:
-        setPageState(PageStateTypes.CREATE_DETAIL);
-        break;
-      default:
-        break;
-    }
-  } else {
-    toggleCreateConversation(false);
-    resetCreatePageState();
+const pageStateTitle = {
+  [PageStateTypes.USER_SELECT]: t('TUIConversation.Add Participants'),
+  [PageStateTypes.CREATE_DETAIL]: t('TUIConversation.New group chat'),
+  [PageStateTypes.GROUP_TYPE]: t('TUIConversation.New group chat'),
+};
+
+const pageStateConfirmText = {
+  [PageStateTypes.USER_SELECT]: t('TUIConversation.Next'),
+  [PageStateTypes.CREATE_DETAIL]: t('TUIConversation.Start chat'),
+  [PageStateTypes.GROUP_TYPE]: t('TUIConversation.Confirm'),
+};
+const pageStateCancelText = {
+  [PageStateTypes.USER_SELECT]: t('TUIConversation.Cancel'),
+  [PageStateTypes.CREATE_DETAIL]: t('TUIConversation.Prev'),
+  [PageStateTypes.GROUP_TYPE]: t('TUIConversation.Prev'),
+};
+const dialogCancelText = computed(() => {
+  if (!isCreateGroup.value) {
+    return t('TUIConversation.Cancel');
+  }
+  return pageStateCancelText[pageState.value];
+});
+
+const dialogTitles = computed(() => {
+  if (!isCreateGroup.value) {
+    return t('TUIConversation.Start chat');
   }
+  return pageStateTitle[pageState.value];
+});
+
+const dialogConfirmText = computed(() => !isCreateGroup.value ? t('TUIConversation.Start chat') : pageStateConfirmText[pageState.value]);
+
+const updateGroupInfo = (value: CreateGroupInfo) => {
+  groupInfo.value = value;
 };
 
-const handleBeforeCreate = (params: string | CreateGroupParams) => {
-  if (props.onBeforeCreateConversation) {
-    return props.onBeforeCreateConversation(params);
+const handleCreateC2CConversation = async () => {
+  const { userID } = selectList.value[0];
+  emit('beforeCreateConversation', userID);
+  props.onBeforeCreateConversation?.(userID);
+
+  try {
+    const conversation = await createC2CConversation(userID);
+    _onConversationCreated(conversation);
+  } catch (error: any) {
+    TUIToast.error({ message: error.message });
   }
-  return params;
 };
 
-const handleCreated = (conversation: ConversationModel) => {
-  _onConversationCreated(conversation);
+const handleCreateGroupConversation = async () => {
+  const options = {
+    ...groupInfo.value,
+    memberList: selectList.value.map(item => ({
+      userID: item.userID,
+    })),
+  } as unknown as CreateGroupParams;
+
+  emit('beforeCreateConversation', options);
+  props.onBeforeCreateConversation?.(options);
+
+  try {
+    const conversation = await createGroupConversation(options);
+    _onConversationCreated(conversation);
+  } catch (error: any) {
+    TUIToast.error({ message: error.message });
+  }
 };
 
-watch(showCreateConversation, (newValue) => {
-  emit('update:visible', newValue);
-});
+const generateGroupName = (userList: Friend[]) => {
+  const selfName = loginUserInfo.value?.userName || loginUserInfo.value?.userId || '';
+  const name = selfName + userList.map(item => item?.remark || item?.nick || item?.userID).join('、');
+  return name.length >= GROUP_NAME_LIMIT ? name.slice(0, GROUP_NAME_LIMIT) : name;
+};
+
+const handleConfirm = () => {
+  if (selectList.value.length === 0) {
+    TUIToast.error({ message: t('TUIConversation.Participant cannot be empty') });
+    return;
+  }
+  if (!isCreateGroup.value) {
+    handleCreateC2CConversation();
+    toggleCreateConversation(false);
+  } else if (pageState.value === PageStateTypes.USER_SELECT) {
+    groupInfo.value.name = generateGroupName(selectList.value);
+    setPageState(PageStateTypes.CREATE_DETAIL);
+  } else if (pageState.value === PageStateTypes.CREATE_DETAIL) {
+    handleCreateGroupConversation();
+    toggleCreateConversation(false);
+  } else {
+    setPageState(PageStateTypes.CREATE_DETAIL);
+  }
+};
+
+const handleCancel = () => {
+  if (pageState.value === PageStateTypes.USER_SELECT) {
+    toggleCreateConversation(false);
+    resetCreatePageState();
+  } else if (pageState.value === PageStateTypes.CREATE_DETAIL) {
+    setPageState(PageStateTypes.USER_SELECT);
+  } else if (pageState.value === PageStateTypes.GROUP_TYPE) {
+    setPageState(PageStateTypes.CREATE_DETAIL);
+  }
+};
 </script>
 
-<style lang="scss" module>
+<style lang="scss" scoped>
 @import './ConversationCreate.scss';
 </style>

package/src/components/ConversationList/ConversationCreate/ConversationCreateButton/ConversationCreateButton.scss

@@ -2,6 +2,42 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: var(--text-color-link);
   margin-right: 10px;
+}
+
+.conversation-create-dropdown {
+  display: flex;
+  justify-content: center;
+  padding: 5px 10px;
+}
+
+.conversation-create-list {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 5px 0;
+  gap: 10px;
+}
+
+.conversation-create-list--detail {
+  padding: 10px 20px;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.conversation-create-item {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  color: var(--text-color-primary);
+}
+
+.conversation-create-text {
+  font-size: 14px;
+  font-weight: 400;
 }