tuikit-atomicx-vue3 0.1.1 → 3.3.0

package/src/components/BarrageList/Message/TextMessage/TextMessage.vue

@@ -26,6 +26,7 @@
         :is="context.slots['user-badge']"
         :message="message"
       />
+      <span class="user-badge" v-if="message.from === currentLive?.liveOwner.userId && !context.slots['user-badge']">{{ t('Anchor') }}</span>
       <span
         class="text-message__content__nick"
         @click="handleNickClick"
@@ -62,11 +63,13 @@ import { useUIKit, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { useScroll } from '../../../../hooks/useScroll';
 import { useBarrageListState } from '../../../../states/BarrageListState';
+import { useLiveState } from '../../../../states/LiveState';
 import { safeJSONParse } from '../../../../utils/json';
 import { useMessageListContext } from '../../MessageListContext';
 import type { ICloudCustomData } from '../../../../types/message';
 import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 
+const { currentLive } = useLiveState();
 const context: {
   slots: Record<string, () => VueElement>;
   nickClick: (payload: { message: IMessageModel; event: MouseEvent }) => void;
@@ -217,14 +220,21 @@ const handleNickClick = (event: MouseEvent) => {
     word-spacing: 0.2em;
     letter-spacing: 0.1em;
 
+    .user-badge {
+      background-color: var(--uikit-color-theme-6);
+      border-radius: 12px;
+      padding: 0px 8px;
+      margin-right: 6px;
+    }
+
     &__nick {
-      color: var(--text-color-link);
+      color: var(--uikit-color-theme-8);
       cursor: pointer;
     }
 
     &__nick:hover {
-      color: var(--text-color-link-active);
-      font-weight: 600;
+      // color: var(--text-color-link-active);
+      // font-weight: 600;
     }
 
     &__text {

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

@@ -7,4 +7,5 @@ export const resource = {
   'Operation Successful': 'Operation successful',
   'Operation Failed': 'Operation failed',
   'This message contains risky content': 'This message contains risky content',
+  'Anchor': 'ANCHOR'
 };

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

@@ -9,4 +9,5 @@ export const resource = {
   'Mute Success': '禁言成功',
   'Unmute Success': '解除禁言成功',
   'This message contains risky content': '该消息包含风险内容',
+  'Anchor': '主播',
 };

package/src/components/ChatSetting/ChatSetting.vue

@@ -2,29 +2,25 @@
 import { computed } from 'vue';
 import { TUIChatEngine } from '@tencentcloud/chat-uikit-engine';
 import { useConversationListState } from '../../states/ConversationListState';
-import { useUIOpenControlState } from '../../states/UIOpenControlState';
 import { C2CChatSetting } from './C2CChatSetting';
 import { GroupChatSetting } from './GroupChatSetting';
 
-const { currentConversation: activeConversation } = useConversationListState();
-const { isChatSettingOpen } = useUIOpenControlState();
-// Constants for conversation types
-const { TYPES } = TUIChatEngine;
-const { CONV_C2C, CONV_GROUP } = TYPES;
+const { activeConversation } = useConversationListState();
 
-const chatType = computed(() => activeConversation?.value?.type);
+const chatType = computed(() => activeConversation.value?.type);
 </script>
 
 <template>
   <div
-    v-if="activeConversation && isChatSettingOpen"
+    v-if="Boolean(activeConversation)"
     class="chat-setting"
   >
     <!-- C2C Chat Setting -->
-    <C2CChatSetting v-if="chatType === CONV_C2C" />
+    <C2CChatSetting v-if="chatType === TUIChatEngine.TYPES.CONV_C2C" />
     <!-- Group Chat Setting -->
-    <GroupChatSetting v-else-if="chatType === CONV_GROUP" />
+    <GroupChatSetting v-else-if="chatType === TUIChatEngine.TYPES.CONV_GROUP" />
   </div>
+  <div v-else>没渲染</div>
 </template>
 
 <style lang="scss" scoped>

package/src/components/ChatSetting/GroupChatSetting/GroupActions/GroupActions.vue

@@ -39,6 +39,7 @@
 
     <!-- Transfer Group Owner Dialog -->
     <TUIDialog
+      appendTo="body"
       :visible="isShowTransferDialog"
       :title="t('ChatSetting.transfer_group_owner')"
       :custom-classes="['user-picker-dialog']"
@@ -62,6 +63,7 @@
 
     <!-- Dismiss Group Dialog -->
     <TUIDialog
+      appendTo="body"
       :visible="isShowDismissDialog"
       :title="t('ChatSetting.dismiss_group')"
       @close="() => isShowDismissDialog = false"
@@ -71,6 +73,7 @@
 
     <!-- Quit Group Dialog -->
     <TUIDialog
+      appendTo="body"
       :visible="isShowQuitDialog"
       :title="t('ChatSetting.quit_group')"
       @close="() => isShowQuitDialog = false"
@@ -89,7 +92,7 @@ import { ref, computed } from 'vue';
 import { TUIButton, TUIDialog, TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useGroupSettingState, GroupPermission } from '../../../../states/GroupSettingState';
 import { UserPicker } from '../../../UserPicker';
-import type { IUserPickerRef } from '../../../UserPicker';
+import type { UserPickerRef } from '../../../UserPicker';
 
 const { t } = useUIKit();
 
@@ -107,7 +110,7 @@ const isShowDismissDialog = ref(false);
 const isShowQuitDialog = ref(false);
 const loading = ref(false);
 
-const userPickerRef = ref<IUserPickerRef>();
+const userPickerRef = ref<UserPickerRef>();
 
 // Check permissions for different actions
 const canDismissGroup = computed(() => hasPermission(GroupPermission.DISMISS_GROUP));

package/src/components/ChatSetting/GroupChatSetting/GroupChatSetting.vue

@@ -11,7 +11,7 @@ import { GroupManagement } from './GroupManagement';
 import { GroupManagementEntry } from './GroupManagementEntry';
 import { GroupMembers } from './GroupMembers';
 import { PersonalSettings } from './PersonalSettings';
-import type { IUserPickerRow, IUserPickerRef } from '../../UserPicker';
+import type { UserPickerRow, UserPickerRef } from '../../UserPicker';
 
 enum ViewMode {
   MAIN = 'main',
@@ -42,11 +42,11 @@ const loading = ref(false);
 const hasMore = ref(true);
 const currentView = ref<ViewMode>(ViewMode.MAIN);
 const isShowUserPickerDialog = ref(false);
-const memberDataSource = ref<IUserPickerRow[]>([]);
-const userPickerLockedItems = ref<IUserPickerRow[]>([]);
+const memberDataSource = ref<UserPickerRow[]>([]);
+const userPickerLockedItems = ref<UserPickerRow[]>([]);
 const memberActionType = ref<'remove' | 'add' | null>(null);
 
-const userPickerRef = ref<IUserPickerRef>();
+const userPickerRef = ref<UserPickerRef>();
 
 // Initialize member list when component mounts
 onMounted(() => {
@@ -260,6 +260,7 @@ const userPickerDialogTitle = computed(() => {
       <PersonalSettings />
       <GroupActions />
       <TUIDialog
+        appendTo="body"
         :visible="isShowUserPickerDialog"
         :title="userPickerDialogTitle"
         :custom-classes="['user-picker-dialog']"

package/src/components/ChatSetting/GroupChatSetting/GroupInfo/GroupInfo.vue

@@ -25,7 +25,7 @@ const {
   updateGroupProfile,
 } = useGroupSettingState();
 
-const { currentConversation: activeConversation } = useConversationListState();
+const { activeConversation } = useConversationListState();
 
 // Get group type display text
 const getGroupTypeText = () => {
@@ -51,7 +51,7 @@ const validateGroupName = (value: string, originalValue?: string) => {
   if (value.length === 0) {
     return t('ChatSetting.group_name_required');
   }
-  if (value.length > 25) {
+  if (value.length > 30) {
     return t('ChatSetting.group_name_max_length');
   }
   if (value === (originalValue || '')) {
@@ -65,7 +65,7 @@ const validateNotification = (value: string, originalValue?: string) => {
   if (typeof value !== 'string') {
     return t('ChatSetting.group_notification_required_string');
   }
-  if (value.length > 100) {
+  if (value.length > 130) {
     return t('ChatSetting.group_notification_max_length');
   }
   if (value === (originalValue || '')) {

package/src/components/ChatSetting/GroupChatSetting/GroupManagement/GroupManagement.vue

@@ -63,6 +63,7 @@
 
     <!-- User Picker Dialog -->
     <TUIDialog
+      appendTo="body"
       :custom-classes="['user-picker-dialog']"
       :visible="isShowUserPickerDialog"
       :title="userPickerTitle"
@@ -92,7 +93,7 @@ import {
 import { UserPicker } from '../../../UserPicker';
 import { SettingItem } from '../../SettingItem';
 import { GroupMembers } from '../GroupMembers';
-import type { IUserPickerRow, IUserPickerRef } from '../../../UserPicker';
+import type { UserPickerRow, UserPickerRef } from '../../../UserPicker';
 
 const emit = defineEmits<{
   back: [];
@@ -119,7 +120,7 @@ const isShowUserPickerDialog = ref(false);
 const userPickerTitle = ref('');
 const userPickerLockedItems = ref<any[]>([]);
 
-const userPickerRef = ref<IUserPickerRef>();
+const userPickerRef = ref<UserPickerRef>();
 const memberActionRef = ref<'promote_admin' | 'demote_admin' | 'mute' | 'unmute' | null>(null);
 
 // Filter muted members

package/src/components/ChatSetting/GroupChatSetting/GroupMembers/GroupMembers.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { IconArrowStrokeRight, IconMinus, IconAdd, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { IconArrowStrokeRight, IconMinus, IconPlus, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import {
   useGroupSettingState,
   GroupPermission,
@@ -13,7 +13,7 @@ interface GroupMembersProps {
   showAddButton: boolean; // Whether to show add button
   showRemoveButton: boolean; // Whether to show remove button
   // Basic configuration
-  title?: string; // Title, default "群成员"
+  title?: string; // Title
   members?: GroupMember[] | undefined; // Member list
   memberCount?: number; // Total member count
   maxDisplayCount?: number; // Mini version display count, default 6
@@ -239,7 +239,7 @@ onUnmounted(() => {
         @click="handleAddMember"
       >
         <div class="group-members__action-btn__icon">
-          <IconAdd />
+          <IconPlus />
         </div>
         <div class="group-members__action-btn__label">
           {{ t('ChatSetting.add') }}

package/src/components/ChatSetting/SettingItem/SettingItem.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { ref, nextTick } from 'vue';
+import { ref, nextTick, useCssModule } from 'vue';
 import { IconEditNameCard, TUIButton, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import cs from 'classnames';
 
 // Base props shared by all types
 interface BaseSettingItemProps {
@@ -59,6 +60,7 @@ const SettingItemType = {
 } as const;
 
 const { t } = useUIKit();
+const classes = useCssModule();
 
 // Edit state management
 const isEditing = ref(false);
@@ -152,46 +154,46 @@ function handleSwitchChange(event: Event) {
 <template>
   <div
     :class="[
-      'setting-item',
+      classes['setting-item'],
       {
-        [`setting-item--${type}`]: !!type,
-        'setting-item--disabled': disabled,
-        'setting-item--editing': isEditing,
-        'setting-item--error': !!errorMessage,
+        [classes[`setting-item--${type}`]]: !!type,
+        [classes['setting-item--disabled']]: disabled,
+        [classes['setting-item--editing']]: isEditing,
+        [classes['setting-item--error']]: !!errorMessage,
       }
     ]"
   >
-    <div class="setting-item__label">
+    <div :class="classes['setting-item__label']">
       {{ label }}
     </div>
-    <div class="setting-item__content-wrapper">
+    <div :class="classes['setting-item__content-wrapper']">
       <!-- Switch type content -->
       <label
         v-if="type === SettingItemType.SWITCH"
-        class="setting-item__switch"
+        :class="classes['setting-item__switch']"
       >
         <input
-          class="setting-item__switch-input"
+          :class="classes['setting-item__switch-input']"
           type="checkbox"
           :checked="value"
           :disabled="disabled"
           @change="handleSwitchChange"
         >
-        <span class="setting-item__switch-slider" />
+        <span :class="classes['setting-item__switch-slider']" />
       </label>
 
       <!-- Input type content -->
       <template v-else-if="type === SettingItemType.INPUT">
         <div
           v-if="isEditing && editable"
-          class="setting-item__edit-container"
+          :class="classes['setting-item__edit-container']"
         >
           <div>
             <input
               ref="inputRef"
               :class="[
-                'setting-item__input',
-                { 'setting-item__input--error': !!errorMessage }
+                classes['setting-item__input'],
+                { [classes['setting-item__input--error']]: !!errorMessage }
               ]"
               type="text"
               :value="editValue"
@@ -202,14 +204,14 @@ function handleSwitchChange(event: Event) {
             >
             <div
               v-if="errorMessage"
-              class="setting-item__error"
+              :class="classes['setting-item__error']"
             >
               {{ errorMessage }}
             </div>
           </div>
-          <div class="setting-item__actions">
+          <div :class="classes['setting-item__actions']">
             <TUIButton
-              class="setting-item__btn--cancel"
+              :class="classes['setting-item__btn--cancel']"
               color="gray"
               radius="rect"
               :disabled="disabled"
@@ -218,7 +220,7 @@ function handleSwitchChange(event: Event) {
               {{ t('ChatSetting.cancel') }}
             </TUIButton>
             <TUIButton
-              class="setting-item__btn--confirm"
+              :class="classes['setting-item__btn--confirm']"
               color="blue"
               radius="rect"
               :disabled="disabled || !!errorMessage || props.value === editValue"
@@ -230,14 +232,14 @@ function handleSwitchChange(event: Event) {
         </div>
         <div
           v-else
-          class="setting-item__content"
+          :class="classes['setting-item__content']"
         >
-          <span class="setting-item__value">
+          <span :class="[classes['setting-item__value'], { [classes['setting-item__value--placeholder']]: !value }]">
             {{ value || placeholder || t('ChatSetting.not_set') }}
           </span>
           <IconEditNameCard
             v-if="editable"
-            class="setting-item__edit-btn unique-icon-btn"
+            :class="cs(classes['setting-item__edit-btn'], 'unique-icon-btn')"
             :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
             @click="startEdit"
           />
@@ -248,14 +250,14 @@ function handleSwitchChange(event: Event) {
       <template v-else-if="type === SettingItemType.TEXTAREA">
         <div
           v-if="isEditing && editable"
-          class="setting-item__edit-container"
+          :class="classes['setting-item__edit-container']"
         >
           <div>
             <textarea
               ref="textareaRef"
               :class="[
-                'setting-item__textarea',
-                { 'setting-item__textarea--error': !!errorMessage }
+                classes['setting-item__textarea'],
+                { [classes['setting-item__textarea--error']]: !!errorMessage }
               ]"
               :value="editValue"
               :rows="rows || 3"
@@ -266,14 +268,14 @@ function handleSwitchChange(event: Event) {
             />
             <div
               v-if="errorMessage"
-              class="setting-item__error"
+              :class="classes['setting-item__error']"
             >
               {{ errorMessage }}
             </div>
           </div>
-          <div class="setting-item__actions">
+          <div :class="classes['setting-item__actions']">
             <TUIButton
-              class="setting-item__btn--cancel"
+              :class="classes['setting-item__btn--cancel']"
               color="gray"
               radius="rect"
               :disabled="disabled"
@@ -282,7 +284,7 @@ function handleSwitchChange(event: Event) {
               {{ t('ChatSetting.cancel') }}
             </TUIButton>
             <TUIButton
-              class="setting-item__btn--confirm"
+              :class="classes['setting-item__btn--confirm']"
               color="blue"
               radius="rect"
               :disabled="disabled || !!errorMessage || props.value === editValue"
@@ -294,14 +296,14 @@ function handleSwitchChange(event: Event) {
         </div>
         <div
           v-else
-          class="setting-item__content"
+          :class="classes['setting-item__content']"
         >
-          <span class="setting-item__value">
+          <span :class="[classes['setting-item__value'], { [classes['setting-item__value--placeholder']]: !value }]">
             {{ value || placeholder || t('ChatSetting.not_set') }}
           </span>
           <IconEditNameCard
             v-if="editable"
-            class="setting-item__edit-btn unique-icon-btn"
+            :class="cs(classes['setting-item__edit-btn'], 'unique-icon-btn')"
             :style="{ cursor: disabled ? 'not-allowed' : 'pointer' }"
             @click="startEdit"
           />
@@ -311,7 +313,7 @@ function handleSwitchChange(event: Event) {
       <!-- Display type content -->
       <span
         v-else-if="type === SettingItemType.DISPLAY"
-        class="setting-item__value"
+        :class="classes['setting-item__value']"
       >
         {{ value || placeholder || t('ChatSetting.not_set') }}
       </span>
@@ -319,7 +321,7 @@ function handleSwitchChange(event: Event) {
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 .setting-item {
   display: flex;
   flex: 1;
@@ -376,10 +378,11 @@ function handleSwitchChange(event: Event) {
     word-break: break-word;
 
     color: var(--text-color-secondary);
-  }
 
-  &__placeholder {
-    color: var(--text-color-placeholder);
+    &--placeholder {
+      font-style: italic;
+      color: var(--text-color-tertiary);
+    }
   }
 
   // Switch styles
@@ -460,15 +463,19 @@ function handleSwitchChange(event: Event) {
     &:focus {
       outline: none;
 
-      border-color: var(--primary-color);
+      border-color: var(--text-color-link);
     }
 
     &::placeholder {
-      color: var(--text-color-placeholder);
+      color: var(--text-color-secondary);
     }
 
     &--error {
-      border-color: var(--error-color);
+      border-color: var(--text-color-error);
+
+      &:focus {
+        border-color: var(--text-color-error);
+      }
     }
   }
 
@@ -481,7 +488,7 @@ function handleSwitchChange(event: Event) {
     font-size: 12px;
     margin-top: 4px;
 
-    color: var(--error-color);
+    color: var(--text-color-error);
   }
 
   &__actions {
@@ -500,7 +507,7 @@ function handleSwitchChange(event: Event) {
 </style>
 
 <style lang="scss">
-.unique-icon-btn {
+span.unique-icon-btn {
   display: flex;
   align-items: center;
   justify-content: center;

package/src/components/ChatSetting/i18n/en-US.ts

@@ -44,13 +44,13 @@ const ChatSetting = {
   // Validation messages
   group_name_required_string: 'Group name must be a string',
   group_name_required: 'Group name cannot be empty',
-  group_name_max_length: 'Group name cannot exceed 25 characters',
+  group_name_max_length: 'Group name cannot exceed 30 characters',
   group_name_unchanged: 'Please modify the group name before submitting',
   group_introduction_required_string: 'Group introduction must be a string',
-  group_introduction_max_length: 'Group introduction cannot exceed 100 characters',
+  group_introduction_max_length: 'Group introduction cannot exceed 130 characters',
   group_introduction_unchanged: 'Please modify the group introduction before submitting',
   group_notification_required_string: 'Group notification must be a string',
-  group_notification_max_length: 'Group notification cannot exceed 100 characters',
+  group_notification_max_length: 'Group notification cannot exceed 130 characters',
   group_notification_unchanged: 'Please modify the group notification before submitting',
   group_name_card_required_string: 'Name card must be a string',
   group_name_card_unchanged: 'Please modify the name card before submitting',

package/src/components/ChatSetting/i18n/index.ts

@@ -1,5 +1,3 @@
-import { i18next } from '@tencentcloud/uikit-base-component-vue3';
-
 import enUS from './en-US';
 import zhCN from './zh-CN';
 
@@ -8,6 +6,6 @@ const resources = {
   'zh-CN': zhCN,
 };
 
-Object.entries(resources).forEach(([lng, resource]) => {
-  i18next.addResourceBundle(lng, 'translation', { ChatSetting: resource }, true, false);
-});
+export {
+  resources,
+}

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

@@ -44,13 +44,13 @@ const ChatSetting = {
   // Validation messages
   group_name_required_string: '群名称必须是字符串',
   group_name_required: '群名称不能为空',
-  group_name_max_length: '群名称不能超过25个字符',
+  group_name_max_length: '群名称不能超过30个字符',
   group_name_unchanged: '请修改群名称后再提交',
   group_introduction_required_string: '群简介必须是字符串',
-  group_introduction_max_length: '群简介不能超过100个字符',
+  group_introduction_max_length: '群简介不能超过130个字符',
   group_introduction_unchanged: '请修改群简介后再提交',
   group_notification_required_string: '群公告必须是字符串',
-  group_notification_max_length: '群公告不能超过100个字符',
+  group_notification_max_length: '群公告不能超过130个字符',
   group_notification_unchanged: '请修改群公告后再提交',
   group_name_card_required_string: '群名片必须是字符串',
   group_name_card_unchanged: '请修改群名片后再提交',

package/src/components/ChatSetting/index.ts

@@ -1,6 +1,10 @@
-import ChatSetting from './ChatSetting.vue';
-import './i18n';
+import ChatSettingComponent 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'] } });
+
+const ChatSetting = ChatSettingComponent;
 
 export { ChatSetting };
-export { C2CChatSetting } from './C2CChatSetting';
-export { GroupChatSetting } from './GroupChatSetting';

package/src/components/CoGuestPanel/CoGuestPanel.vue

@@ -384,8 +384,17 @@ const handleDisconnect = async (userId: string) => {
         font-size: 16px;
         font-weight: 500;
         color: var(--text-color-primary);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 200px;
       }
     }
+
+    .user-actions {
+      display: flex;
+      gap: 6px;
+    }
   }
 }
 

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

@@ -0,0 +1,52 @@
+@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;
+}