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

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,10 @@
+import ChatSetting from './ChatSetting.vue';
+import { addI18n } from '../../i18n';
+import { resources } from './i18n';
+
+addI18n('zh-CN', { translation: { ChatSetting: resources['zh-CN'] } });
+addI18n('en-US', { translation: { ChatSetting: resources['en-US'] } });
+
+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/ContactList/ContactInfo/BlacklistInfo/BlacklistInfo.scss

@@ -0,0 +1,50 @@
+@use '../../../../styles/mixins' as mixins;
+.contact-blacklist-info {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-topbar);
+  padding: 48px;
+}
+
+.contact-blacklist-info__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 20px;
+  margin-bottom: 32px;
+}
+
+.contact-blacklist-info__main-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 0;
+}
+
+.contact-blacklist-info__name {
+  font-size: 24px;
+  font-weight: 400;
+  color: var(--text-color-primary);
+  max-width: 100%;
+  @include mixins.text-ellipsis();
+}
+
+.contact-blacklist-info__id,
+.contact-blacklist-info__intro {
+  font-size: 16px;
+  color: var(--text-color-tertiary);
+  width: 100%;
+  word-break: break-word;
+  @include mixins.multi-line-ellipsis(3);
+}
+
+.contact-blacklist-info__actions {
+  border-top: 1px solid var(--stroke-color-secondary);
+  padding-top: 32px;
+  display: flex;
+  justify-content: center;
+}

package/src/components/ContactList/ContactInfo/BlacklistInfo/BlacklistInfo.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="contact-blacklist-info">
+    <div class="contact-blacklist-info__header">
+      <div class="contact-blacklist-info__main-info">
+        <div class="contact-blacklist-info__name">
+          {{ displayName }}
+        </div>
+        <div class="contact-blacklist-info__id">
+          {{ t('TUIContact.ID') }}：{{ profile?.userID }}
+        </div>
+        <div class="contact-blacklist-info__intro">
+          {{ t('TUIContact.Personal signature') }}：{{ profile?.selfSignature || '' }}
+        </div>
+      </div>
+      <Avatar
+        :src="profile?.avatar"
+        :alt="displayName"
+        size="xl"
+      />
+    </div>
+
+    <div
+      v-if="showActions"
+      class="contact-blacklist-info__actions"
+    >
+      <TUIButton
+        type="primary"
+        size="big"
+        @click="handleRemoveFromBlacklist"
+      >
+        {{ t('TUIContact.Remove from blacklist') }}
+      </TUIButton>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { useContactListState } from '../../../../states/ContactListState';
+import { Avatar } from '../../../Avatar';
+import type { BlacklistInfoProps, UserProfile } from '../../../../types/contact';
+
+const props = withDefaults(defineProps<BlacklistInfoProps>(), {
+  showActions: true,
+});
+
+const emit = defineEmits<{
+  removeFromBlacklist: [profile: UserProfile];
+  close: [];
+}>();
+
+const { t } = useUIKit();
+const { removeFromBlacklist } = useContactListState();
+
+const displayName = computed(() => props.profile?.nick || props.profile?.userID);
+
+const handleRemoveFromBlacklist = async () => {
+  try {
+    await removeFromBlacklist([props.profile?.userID]);
+    emit('removeFromBlacklist', props.profile);
+    emit('close');
+  } catch (err) {
+    console.error('[ContactInfo removeFromBlacklist] error', err);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import './BlacklistInfo.scss';
+</style>

package/src/components/ContactList/ContactInfo/BlacklistInfo/index.ts

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

package/src/components/ContactList/ContactInfo/ContactInfo.scss

@@ -0,0 +1,33 @@
+.contact-info {
+  flex: 1;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--bg-color-operate);
+}
+
+.contact-info__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--text-color-secondary);
+}
+
+.contact-info__header {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+}
+
+.contact-info__title {
+  flex: 1;
+  text-align: center;
+  font-size: 16px;
+  line-height: 100%;
+  font-weight: 500;
+  padding-right: 24px;
+  color: var(--text-color-primary);
+}