tuikit-atomicx-vue3 0.1.0 → 0.1.1

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

@@ -0,0 +1,115 @@
+const ChatSetting = {
+  // SettingItem
+  cancel: '取消',
+  confirm: '确认',
+  not_set: '未设置',
+
+  // C2CChatSetting
+  user_id: '用户ID',
+  nickname: '昵称',
+  nickname_placeholder: '未设置昵称',
+  signature: '个性签名',
+  remark: '备注',
+  remark_placeholder: '未设置备注',
+  remark_update_success: '备注修改成功',
+  pin_conversation: '会话置顶',
+  mute_conversation: '会话免打扰',
+  copied: '已复制',
+
+  // GroupChatSetting
+  remove_member_dialog_title: '移除群成员',
+  add_member_dialog_title: '添加群成员',
+  failed_to_load_more_members: '加载更多成员失败',
+  failed_to_remove_member: '移除成员失败',
+  me: '我',
+
+  // GroupInfo
+  group_id: '群ID',
+  group_name: '群名称',
+  group_name_placeholder: '未设置群名称',
+  group_introduction: '群简介',
+  group_introduction_placeholder: '暂无群简介',
+  group_notification: '群公告',
+  group_notification_placeholder: '暂无群公告',
+  my_name_card: '我的群名片',
+  my_name_card_placeholder: '未设置我的群名片',
+  group_type: '群类型',
+  group_type_work: '好友工作群',
+  group_type_public: '陌生人社交群',
+  group_type_meeting: '临时会议群',
+  group_type_community: '社群',
+  group_type_avchatroom: '直播群',
+  group_type_unknown: '未知类型',
+
+  // Validation messages
+  group_name_required_string: '群名称必须是字符串',
+  group_name_required: '群名称不能为空',
+  group_name_max_length: '群名称不能超过25个字符',
+  group_name_unchanged: '请修改群名称后再提交',
+  group_introduction_required_string: '群简介必须是字符串',
+  group_introduction_max_length: '群简介不能超过100个字符',
+  group_introduction_unchanged: '请修改群简介后再提交',
+  group_notification_required_string: '群公告必须是字符串',
+  group_notification_max_length: '群公告不能超过100个字符',
+  group_notification_unchanged: '请修改群公告后再提交',
+  group_name_card_required_string: '群名片必须是字符串',
+  group_name_card_unchanged: '请修改群名片后再提交',
+
+  // Success/Error messages
+  group_name_update_success: '群名称修改成功',
+  group_name_update_failed: '群名称修改失败',
+  group_introduction_update_success: '群简介修改成功',
+  group_introduction_update_failed: '群简介修改失败',
+  group_notification_update_success: '群公告修改成功',
+  group_notification_update_failed: '群公告修改失败',
+  group_name_card_update_success: '群名片修改成功',
+  group_name_card_update_failed: '群名片修改失败',
+  group_member_add_success: '群成员添加成功',
+  group_member_add_failed: '群成员添加失败',
+  group_member_add_partially_failed: '部分群成员添加失败',
+  group_member_remove_success: '群成员移除成功',
+  group_member_remove_failed: '群成员移除失败',
+
+  // GroupMembers
+  group_members: '群成员',
+  add: '添加',
+  remove: '移除',
+  loading: '加载中...',
+  all_members_shown: '已显示全部成员',
+  collapse: '收起',
+
+  // GroupActions
+  transfer_group_owner: '转让群主',
+  quit_group: '退出群聊',
+  dismiss_group: '解散群聊',
+  confirm_quit_group: '确定要退出群聊吗？',
+  select_new_owner_error: '请选择新的群主',
+  only_one_owner_error: '只能选择一个成员作为新群主',
+  transfer_owner_success: '群主转让成功',
+  transfer_owner_failed: '群主转让失败',
+  quit_group_success: '已退出群聊',
+  quit_group_failed: '退出群聊失败',
+
+  // GroupManagement
+  group_management: '群管理',
+  set_admin: '设置管理员',
+  unset_admin: '取消管理员',
+  mute_members: '禁言成员',
+  unmute_members: '取消禁言',
+  operation_success: '操作成功',
+  operation_failed: '操作失败',
+  all_members_muted: '已开启全员禁言',
+  all_members_unmuted: '已关闭全员禁言',
+  mute_all_failed: '设置全员禁言失败',
+  group_admin: '群管理员',
+  mute_management: '禁言管理',
+  mute_all_members: '全员禁言',
+  mute_all_members_description: '开启后，除群主和管理员外，其他成员将无法发言',
+
+  // GroupMemberRole
+  group_member_role_owner: '群主',
+  group_member_role_admin: '管理员',
+  group_member_role_member: '群成员',
+};
+
+export default ChatSetting;

package/src/components/ChatSetting/index.ts

@@ -0,0 +1,6 @@
+import ChatSetting from './ChatSetting.vue';
+import './i18n';
+
+export { ChatSetting };
+export { C2CChatSetting } from './C2CChatSetting';
+export { GroupChatSetting } from './GroupChatSetting';

package/src/components/CoGuestPanel/CoGuestPanel.vue

@@ -2,18 +2,18 @@
   <div class="panel-content">
     <div class="panel-header">
       <div class="tabs">
-        <button
+        <span
           :class="['tab-item', { active: activeTab === 'applications' }]"
           @click="activeTab = 'applications'"
         >
           {{ t('Application for live') }}
-        </button>
-        <button
+        </span>
+        <span
           :class="['tab-item', { active: activeTab === 'invitations' }]"
           @click="activeTab = 'invitations'"
         >
-          {{ t('Invite for live') }}
-        </button>
+          {{ t('Co-guest management') }}
+        </span>
       </div>
     </div>
     <div class="panel-body">
@@ -32,19 +32,22 @@
               class="user-item"
             >
               <div class="user-item-left">
-                <Avatar :src="user.avatarUrl" :size="40" />
+                <Avatar
+                  :src="user.avatarUrl"
+                  :size="40"
+                />
               </div>
               <div class="user-item-right">
                 <div class="user-info">
                   <span class="user-name">{{ user.userName || user.userId }}</span>
                 </div>
                 <div class="user-actions">
-                  <TUIButton @click="acceptCoGuestRequest({ userId: user.userId })">
+                  <TUIButton @click="handleAcceptCoGuestRequest(user.userId)">
                     {{ t('Accept') }}
                   </TUIButton>
                   <TUIButton
                     color="red"
-                    @click="rejectCoGuestRequest({ userId: user.userId })"
+                    @click="handleRejectCoGuestRequest(user.userId)"
                   >
                     {{
                       t('Reject')
@@ -80,7 +83,10 @@
               class="user-item"
             >
               <div class="user-item-left">
-                <Avatar :src="user.avatarUrl" :size="40" />
+                <Avatar
+                  :src="user.avatarUrl"
+                  :size="40"
+                />
               </div>
               <div class="user-item-right">
                 <div class="user-info">
@@ -96,7 +102,7 @@
                 >
                   <TUIButton
                     color="gray"
-                    @click="disconnect(user.userId)"
+                    @click="handleDisconnect(user.userId)"
                   >
                     {{ t('Disconnect') }}
                   </TUIButton>
@@ -111,7 +117,7 @@
             <span>{{ t('Seat is empty') }}</span>
           </div>
         </div>
-        <div
+        <!-- <div
           v-if="sentCoGuestUserList.length > 0"
           class="user-list-container"
         >
@@ -181,7 +187,7 @@
           >
             <span>{{ t('No invited users yet') }}</span>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -189,11 +195,12 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { TUIButton, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useCoGuestState } from '../../states/CoGuestState';
 import { useLoginState } from '../../states/LoginState';
 import { useSeatStore } from '../../states/SeatStore';
 import { Avatar } from '../Avatar';
+import { ERROR_MESSAGE } from './constants';
 
 const { t } = useUIKit();
 
@@ -213,6 +220,37 @@ const {
 } = useCoGuestState();
 
 const activeTab = ref('applications');
+
+const handleAcceptCoGuestRequest = async (userId: string) => {
+  try {
+    await acceptCoGuestRequest({ userId });
+  } catch (error: any) {
+    const message = t(ERROR_MESSAGE[error.code as keyof typeof ERROR_MESSAGE] || 'Accept co-guest request failed');
+    TUIToast.error({ message });
+  }
+};
+
+const handleRejectCoGuestRequest = async (userId: string) => {
+  try {
+    await rejectCoGuestRequest({ userId });
+  } catch (error) {
+    console.error('[CoGuestPanel] handleRejectCoGuestRequest error', error);
+    TUIToast.error({
+      message: t('Reject co-guest request failed'),
+    });
+  }
+};
+
+const handleDisconnect = async (userId: string) => {
+  try {
+    await disconnect(userId);
+  } catch (error) {
+    console.error('[CoGuestPanel] handleDisconnect error', error);
+    TUIToast.error({
+      message: t('Disconnect co-guest failed'),
+    });
+  }
+};
 </script>
 
 <style lang="scss" scoped>
@@ -244,6 +282,7 @@ const activeTab = ref('applications');
         cursor: pointer;
         position: relative;
         transition: color 0.3s ease;
+        user-select: none;
 
         &.active {
           color: var(--text-color-link);

package/src/components/CoGuestPanel/constants.ts

@@ -0,0 +1,4 @@
+export const ERROR_MESSAGE = {
+  100210: 'this seat is already occupied by others',
+  100205: 'there is no available seat to take',
+};

package/src/components/CoGuestPanel/i18n/en-US/index.ts

@@ -1,16 +1,21 @@
 export const resource = {
   'Application for live': 'Application for live',
   'Invite for live': 'Invite for live',
+  'Co-guest management': 'Co-guest management',
   'Seat is empty': 'Seat is empty',
   'No invited users yet': 'No invited users yet',
   'Current seat': 'Current seat',
-  Accept: 'Accept',
-  Reject: 'Reject',
-  Disconnect: 'Disconnect',
-  Cancel: 'Cancel',
-  Invite: 'Invite',
+  'Accept': 'Accept',
+  'Reject': 'Reject',
+  'Disconnect': 'Disconnect',
+  'Cancel': 'Cancel',
+  'Invite': 'Invite',
   'Invite more': 'Invite more',
-  Inviting: 'Inviting',
+  'Inviting': 'Inviting',
   'No application for live': 'No application for live',
-  Me: 'Me',
+  'Me': 'Me',
+  'this seat is already occupied by others': 'This seat is already occupied by others',
+  'there is no available seat to take': 'There is no available seat to take',
+  'Accept co-guest request failed': 'Accept co-guest request failed',
+  'Reject co-guest request failed': 'Reject co-guest request failed',
 };

package/src/components/CoGuestPanel/i18n/zh-CN/index.ts

@@ -1,16 +1,21 @@
 export const resource = {
   'Application for live': '连麦申请',
   'Invite for live': '邀请连麦',
+  'Co-guest management': '连麦管理',
   'Seat is empty': '麦位空闲',
   'No invited users yet': '暂无可邀请用户',
   'Current seat': '当前麦位',
-  Accept: '接受',
-  Reject: '拒绝',
-  Disconnect: '断开连麦',
-  Cancel: '取消',
-  Invite: '邀请',
+  'Accept': '接受',
+  'Reject': '拒绝',
+  'Disconnect': '断开连麦',
+  'Cancel': '取消',
+  'Invite': '邀请',
   'Invite more': '邀请更多',
-  Inviting: '邀请中',
+  'Inviting': '邀请中',
   'No application for live': '暂无连麦申请',
-  Me: '我',
+  'Me': '我',
+  'this seat is already occupied by others': '该麦位已被占用',
+  'there is no available seat to take': '暂无可用麦位',
+  'Accept co-guest request failed': '接受连麦请求失败',
+  'Reject co-guest request failed': '拒绝连麦请求失败',
 };

package/src/components/CoGuestPanel/index.ts

@@ -1,7 +1,7 @@
-import CoGuestPanel from './CoGuestPanel.vue';
+import CoGuestPanelPC from './CoGuestPanel.vue';
 import { addI18n } from '../../i18n';
 import { enResource, zhResource } from './i18n';
 addI18n('en-US', { translation: enResource });
 addI18n('zh-CN', { translation: zhResource });
-
+const CoGuestPanel = CoGuestPanelPC;
 export { CoGuestPanel };

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

@@ -0,0 +1,73 @@
+.conversationActions {
+  position: relative;
+
+  &__popup-icon {
+    padding: 4px 8px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: var(--hover-bg-color, #f0f0f0);
+    }
+
+    .more-icon {
+      font-size: 16px;
+      color: var(--text-color-secondary, #666);
+      font-weight: bold;
+    }
+  }
+
+  &__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__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;
+  }
+
+  &__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;
+
+    &:hover {
+      background-color: var(--dropdown-color-active, #f8f9fa);
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &--delete {
+      color: var(--text-color-error, #dc3545);
+    }
+
+    .action-icon {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+    }
+  }
+} 

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

@@ -0,0 +1,196 @@
+<template>
+  <div
+    :class="[$style.conversationActions, {
+      [$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"
+      @click.stop
+    >
+      <div
+        v-for="(action, key) in enabledActions"
+        :key="key"
+        :class="[$style.conversationActions__item, {
+          [$style['conversationActions__item--delete']]: key === 'delete'
+        }]"
+        @click="(e) => onClickMenuItem(e, key)"
+      >
+        {{ action.label }}
+      </div>
+    </div>
+
+    <Popup
+      v-else
+      :open="Boolean(anchor)"
+      :anchor="anchor"
+      placement="bottom-end"
+      disable-portal
+      :slot-props="{
+        root: {
+          style: {
+            zIndex: 5,
+          },
+        },
+      }"
+    >
+      <div :class="$style.conversationActions__container">
+        <div
+          v-for="(action, key) in enabledActions"
+          :key="key"
+          :class="[$style.conversationActions__item, {
+            [$style['conversationActions__item--delete']]: key === 'delete'
+          }]"
+          @click="(e) => onClickMenuItem(e, key)"
+        >
+          {{ action.label }}
+        </div>
+      </div>
+    </Popup>
+  </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 { useConversationListState } from '../../../states/ConversationListState';
+import { isH5 } from '../../../utils';
+import type {
+  ConversationModel,
+  ConversationActionItem,
+  ConversationActionsProps,
+} from '../../../types';
+
+const props = withDefaults(defineProps<ConversationActionsProps>(), {
+  enablePin: true,
+  enableMute: true,
+  enableDelete: true,
+  enableMarkUnread: true,
+});
+
+const emit = defineEmits<{
+  click: [e: Event, key?: string, conversation?: ConversationModel];
+  close: [];
+  markConversationUnread: [conversation: ConversationModel, e?: Event];
+  conversationPin: [conversation: ConversationModel, e?: Event];
+  conversationMute: [conversation: ConversationModel, e?: Event];
+  conversationDelete: [conversation: ConversationModel, e?: Event];
+}>();
+
+const { t } = useUIKit();
+const { markConversationUnread } = useConversationListState();
+
+const markUnreadStatus = ref(true);
+const anchor = ref<HTMLElement | null>(null);
+const conversationActions = ref<Record<string, ConversationActionItem>>({});
+
+const enabledActions = computed(() => Object.entries(conversationActions.value)
+  .filter(([, action]) => action.enable !== false)
+  .reduce((acc, [key, action]) => {
+    acc[key] = action;
+    return acc;
+  }, {} as Record<string, ConversationActionItem>));
+
+const generateConversationActions = (): Record<string, ConversationActionItem> => ({
+  pin: {
+    enable: !!props.enablePin,
+    label: props.conversation.isPinned ? t('TUIConversation.Unpin') : t('TUIConversation.Pin'),
+    onClick: (_conversation: ConversationModel, e?: Event) => {
+      _conversation.pinConversation();
+      emit('conversationPin', _conversation, e);
+    },
+  },
+  mute: {
+    enable: !!props.enableMute,
+    label: props.conversation.isMuted ? t('TUIConversation.Unmute') : t('TUIConversation.Mute'),
+    onClick: (_conversation: ConversationModel, e?: Event) => {
+      _conversation.muteConversation();
+      emit('conversationMute', _conversation, e);
+    },
+  },
+  markUnread: {
+    enable: !!props.enableMarkUnread,
+    label: markUnreadStatus.value ? t('TUIConversation.MarkRead') : t('TUIConversation.MarkUnRead'),
+    onClick: (_conversation: ConversationModel, e?: Event) => {
+      markConversationUnread(_conversation.conversationID, !markUnreadStatus.value);
+      emit('markConversationUnread', _conversation, e);
+    },
+  },
+  delete: {
+    enable: !!props.enableDelete,
+    label: t('TUIConversation.Delete'),
+    onClick: (_conversation: ConversationModel, e?: Event) => {
+      _conversation.deleteConversation();
+      emit('conversationDelete', _conversation, e);
+    },
+  },
+});
+
+watch(
+  () => props.conversation,
+  (newConversation) => {
+    if (newConversation.unreadCount > 0) {
+      markUnreadStatus.value = true;
+    } else {
+      const targetValue = TUIChatEngine.TYPES.CONV_MARK_TYPE_UNREAD;
+      const unreadStatus = newConversation?.markList?.includes(targetValue);
+      markUnreadStatus.value = unreadStatus;
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  [() => props.conversation, () => props.customConversationActions],
+  ([newConversation, newCustomActions]) => {
+    conversationActions.value = {
+      ...generateConversationActions(),
+      ...(newCustomActions || {}),
+    };
+  },
+  { immediate: true, deep: true },
+);
+
+const toggleClick = (e: Event) => {
+  anchor.value = anchor.value ? null : (e.currentTarget as HTMLElement);
+};
+
+const onClickMenuItem = (e: Event, key: string) => {
+  toggleClick(e);
+  emit('click', e, key, props.conversation);
+
+  const action = conversationActions.value[key];
+  if (action) {
+    action.onClick(props.conversation, e);
+  }
+
+  if (props.onClose) {
+    props.onClose();
+  }
+};
+
+const handleMaskClick = (e: Event) => {
+  e.stopPropagation();
+  if ((e.target as HTMLElement) === (e.currentTarget as HTMLElement) && isH5 && props.onClose) {
+    props.onClose();
+  }
+};
+</script>
+
+<style lang="scss" module>
+@import './ConversationActions.scss';
+</style>

package/src/components/ConversationList/ConversationActions/index.ts

@@ -0,0 +1 @@
+export { default as ConversationActions } from './ConversationActions.vue';

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

@@ -0,0 +1,47 @@
+.conversationCreate {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    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);
+  }
+
+  &__content {
+    flex: 1;
+    overflow: hidden;
+  }
+}