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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tuikit-atomicx-vue3",
-  "version": "0.1.1",
+  "version": "3.3.0-beta.3",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -24,13 +24,31 @@
       "import": "./dist/rtc/index.js"
     }
   },
-  "scripts": {},
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "vite build",
+    "lint": "eslint .",
+    "check-chinese": "node scripts/check-chinese-simple.js",
+    "check-chinese:src": "node scripts/check-chinese-simple.js directory src",
+    "check-chinese:staged": "node scripts/check-chinese-simple.js staged",
+    "pre-commit": "npm run check-chinese:staged",
+    "publish": "npm publish --access public",
+    "test:pre": "node scripts/test-pre.js",
+    "test": "playwright test",
+    "test:ci": "playwright test || exit 0",
+    "test:ui": "playwright test --ui",
+    "test:serve": "node scripts/dev-test-app.js",
+    "docs:html": "node scripts/generate-test-docs.js",
+    "docs:serve": "npx http-server docs/html -p 8080 -o",
+    "publish:npm": "node scripts/publish-npm.js",
+    "publish:github": "node scripts/publish-github.js"
+  },
   "peerDependencies": {
     "@tencentcloud/chat": "^3.5.4",
     "@tencentcloud/chat-uikit-engine": "~2.5.1",
     "@tencentcloud/tui-core": "latest",
-    "@tencentcloud/tuiroom-engine-js": "~3.2.1",
-    "@tencentcloud/uikit-base-component-vue3": "0.3.6",
+    "@tencentcloud/tuiroom-engine-js": "~3.3.0-beta.3",
+    "@tencentcloud/uikit-base-component-vue3": "0.3.7",
     "vue": "^3.4.21"
   },
   "dependencies": {
@@ -60,4 +78,4 @@
     "vite-plugin-static-copy": "^2.2.0",
     "vue-tsc": "^2.0.6"
   }
-}
+}

package/src/baseComp/View/View.vue

@@ -20,7 +20,7 @@ defineOptions({
 
 interface ViewProps {
   gap?: number;
-  // 方向：row | column
+  // dir: row | column
   dir?: 'row' | 'column';
   // main aix：flex-start | flex-end | center | space-between | space-around | space-evenly
   justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
@@ -35,7 +35,6 @@ const props = withDefaults(defineProps<ViewProps>(), {
   align: undefined,
 });
 
-// 计算最终的 class
 const computedClass = computed(() => cs(
   'view__v',
   {

package/src/baseComp/index.ts

@@ -1,2 +1 @@
-export { Popup } from './Popup';
-export { default as Input } from './Input';
+export { default as Input } from './Input';

package/src/chat/index.ts

@@ -1,6 +1,11 @@
 // Chat related exports
 import { View as ViewComponent } from '../baseComp/View';
 import { ChatSetting as ChatSettingComponent } from '../components/ChatSetting';
+import {
+  ContactList as ContactListComponent,
+  ContactListItem as ContactListItemComponent,
+  ContactInfo as ContactInfoComponent,
+} from '../components/ContactList';
 import {
   ConversationList as ConversationListComponent,
   ConversationActions as ConversationActionsComponent,
@@ -47,6 +52,9 @@ const ConversationActions = ConversationActionsComponent;
 const ConversationListHeader = ConversationListHeaderComponent;
 const ConversationListContent = ConversationListContentComponent;
 const ConversationPreview = ConversationPreviewComponent;
+const ContactList = ContactListComponent;
+const ContactListItem = ContactListItemComponent;
+const ContactInfo = ContactInfoComponent;
 
 const MessageList = MessageListComponent;
 const MessageInput = MessageInputComponent;
@@ -84,6 +92,9 @@ export {
   EmojiPicker,
   ChatSetting,
   View,
+  ContactList,
+  ContactListItem,
+  ContactInfo,
 
   // Hooks
   useMessageActions,

package/src/components/Avatar/Avatar.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, useSlots, h } from 'vue';
+import { computed, ref, useSlots, h, useCssModule } from 'vue';
 import type { CSSProperties } from 'vue';
 import { Badge } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
@@ -94,6 +94,7 @@ const props = withDefaults(defineProps<AvatarProps>(), {
 });
 
 const slots = useSlots();
+const classes = useCssModule();
 
 // State management
 const imageError = ref(false);
@@ -174,9 +175,9 @@ const fontSizeStyle = computed(() => {
 });
 
 const avatarClasses = computed(() => cs(
-  'avatar',
-  `avatar--shape-${props.shape}`,
-  typeof props.size !== 'number' && `size-${props.size}`,
+  classes['avatar'],
+  classes[`avatar--shape-${props.shape}`],
+  typeof props.size !== 'number' && classes[`size-${props.size}`],
   props.className,
 ));
 
@@ -195,11 +196,11 @@ const baseAvatar = computed(() => h(
     // Render avatar content
     (() => {
       if (children.value) {
-        return h('div', { class: 'avatar__fallback' }, children.value);
+        return h('div', { class: classes['avatar__fallback'] }, children.value);
       }
       if (props.src && !imageError.value) {
         return h('img', {
-          class: cs('avatar__image'),
+          class: classes['avatar__image'],
           src: props.src,
           alt: props.alt || 'avatar',
           onLoad: handleImageLoad,
@@ -207,10 +208,10 @@ const baseAvatar = computed(() => h(
         });
       }
       if (props.alt) {
-        return h('div', { class: 'avatar__fallback' }, getAltText());
+        return h('div', { class: classes['avatar__fallback'] }, getAltText());
       }
       return h('img', {
-        class: 'avatar__image',
+        class: classes['avatar__image'],
         src: DEFAULT_USER_AVATAR,
         alt: 'default avatar',
         onLoad: () => setIsLoading(false),
@@ -219,7 +220,7 @@ const baseAvatar = computed(() => h(
     })(),
 
     // Loading skeleton
-    isLoading.value && h('div', { class: 'avatar__skeleton' }),
+    isLoading.value && h('div', { class: classes['avatar__skeleton'] }),
   ],
 ));
 
@@ -258,10 +259,10 @@ defineOptions({
 export type { AvatarSize, AvatarShape, BaseAvatarProps, AvatarProps };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
 .avatar {
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;

package/src/components/BarrageInput/BarrageInputH5.vue

@@ -2,14 +2,14 @@
   <div class="live-message-input-h5">
     <BarrageInput
       :autoFocus="props.autoFocus"
-      :containerClass="props.containerClass"
+      :containerClass="inputClass"
       :containerStyle="props.containerStyle"
       :width="props.width"
       :height="props.height"
       :minHeight="props.minHeight"
       :maxHeight="props.maxHeight"
       :placeholder="props.placeholder"
-      :disabled="props.disabled"
+      :disabled="disabled"
       :maxLength="props.maxLength"
       @focus="handleFocus"
       @blur="handleBlur"
@@ -26,10 +26,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, withDefaults, defineProps, defineEmits } from 'vue';
-import { useUIKit, TUIButton } from '@tencentcloud/uikit-base-component-vue3';
+import { ref, withDefaults, defineProps, defineEmits, computed } from 'vue';
+import { useUIKit, TUIButton, TUIToast } from '@tencentcloud/uikit-base-component-vue3';
+import { useLiveAudienceState } from '../../states/LiveAudienceState';
+import { useLoginState } from '../../states/LoginState';
 import { useMessageInputState } from '../../states/MessageInputState';
 import BarrageInput from './BarrageInput.vue';
+import { ERROR_MESSAGE } from './constants';
 
 const emit = defineEmits<{
   (e: 'focus'): void;
@@ -53,13 +56,22 @@ const props = withDefaults(defineProps<Props>(), {
   containerClass: '',
   containerStyle: () => ({}),
   height: '',
-  minHeight: '40px',
-  maxHeight: '140px',
+  minHeight: '',
+  maxHeight: '',
   disabled: false,
   autoFocus: false,
   maxLength: 80,
 });
 
+const { loginUserInfo } = useLoginState();
+const { audienceList } = useLiveAudienceState();
+
+const inputClass = computed(() => ['message-input-container-h5', props.containerClass].join(' '));
+const disabled = computed(() => {
+  const localUser = audienceList.value.find(item => item.userId === loginUserInfo.value?.userId);
+  return props.disabled || localUser?.isMessageDisabled;
+});
+
 const { t } = useUIKit();
 const { inputRawValue, setContent, sendMessage, blurEditor } = useMessageInputState();
 const isFocus = ref(false);
@@ -69,11 +81,18 @@ const handleTouchStart = () => {
   isTouching.value = true;
 };
 
-const handleSend = () => {
+const handleSend = async () => {
   if (inputRawValue.value) {
-    sendMessage();
-    setContent('');
     blurEditor();
+    try {
+      const inputValue = inputRawValue.value;
+      setContent('');
+      await sendMessage(inputValue);
+    } catch (err: any) {
+      TUIToast.error({
+        message: t(ERROR_MESSAGE[err.code as keyof typeof ERROR_MESSAGE] || 'send message failed'),
+      });
+    }
   }
 };
 const handleTouchEnd = () => {
@@ -102,5 +121,13 @@ const handleBlur = () => {
   align-items: center;
   gap: 12px;
   width: 100%;
+  :deep(.message-input-container-h5) {
+    height: 36px;
+    max-height: 140px;
+    min-height: 36px;
+    padding: 2px 12px;
+    border-radius: 100px;
+    border: 1px solid var(--stroke-color-primary)
+  }
 }
 </style>

package/src/components/BarrageInput/TextEditor/TextEditor.vue

@@ -22,9 +22,10 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed, watch, withDefaults, defineProps, nextTick, defineEmits } from 'vue';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+import { TUIToast, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { useConversationListState } from '../../../states/ConversationListState';
 import { useMessageInputState } from '../../../states/MessageInputState';
+import { ERROR_MESSAGE } from '../constants';
 import { createEditor } from './EditorCore';
 import styles from './TextEditor.module.scss';
 import type { Editor } from './EditorCore';
@@ -48,7 +49,7 @@ const emit = defineEmits<{
 }>();
 const { t } = useUIKit();
 const { activeConversation } = useConversationListState();
-const { updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
+const { inputRawValue, updateRawValue, sendMessage, setEditorInstance, setContent } = useMessageInputState();
 
 const editorRef = ref<HTMLDivElement | null>(null);
 const isFocused = ref(props.autoFocus);
@@ -72,9 +73,16 @@ const createEditorInstance = (p: ITextEditorProps) => {
       onUpdate: (content) => {
         updateRawValue(content);
       },
-      onEnter: () => {
-        sendMessage();
-        setContent('');
+      onEnter: async () => {
+        try {
+          const inputValue = inputRawValue.value;
+          setContent('');
+          await sendMessage(inputValue);
+        } catch (err: any) {
+          TUIToast.error({
+            message: t(ERROR_MESSAGE[err.code as keyof typeof ERROR_MESSAGE] || 'send message failed'),
+          });
+        }
       },
       onFocus: () => {
         isFocused.value = true;

package/src/components/BarrageInput/constants.ts

@@ -0,0 +1,3 @@
+export const ERROR_MESSAGE = {
+  10017: 'you have been forbidden to speak',
+};

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

@@ -2,4 +2,6 @@ export const resource = {
   'Say something': 'Say something...',
   'You have been muted': 'You have been muted',
   Send: 'Send',
+  'you have been forbidden to speak': 'You have been forbidden to speak',
+  'send message failed': 'Send message failed',
 };

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

@@ -2,4 +2,6 @@ export const resource = {
   'Say something': '说点什么...',
   'You have been muted': '您已被禁言',
   Send: '发送',
+  'you have been forbidden to speak': '您已被禁言',
+  'send message failed': '发送失败',
 };

package/src/components/BarrageList/BarrageList.vue

@@ -244,7 +244,7 @@ onUnmounted(() => {
       </ObserverView>
 
       <div class="message-chunk">
-        <template v-for="message in messageList" :key="message.ID + message.isRevoked">
+        <template v-for="message in messageList" :key="message.ID + message.isRevoked + message.status">
           <component
             :style="props.itemStyle"
             :is="props.Message || DefaultMessage"
@@ -365,7 +365,7 @@ onUnmounted(() => {
   letter-spacing: 0.1em;
 
   .message-group-tip-name {
-    color: var(--text-color-link);
+    color: var(--uikit-color-theme-8);
   }
   .message-group-tip-action {
   }

package/src/components/BarrageList/BarrageListH5.vue

@@ -244,7 +244,7 @@ onUnmounted(() => {
       </ObserverView>
 
       <div class="message-chunk">
-        <template v-for="message in messageList" :key="message.ID + message.isRevoked">
+        <template v-for="message in messageList" :key="message.ID + message.isRevoked + message.status">
           <component
             class="message-item"
             :style="props.itemStyle"
@@ -365,7 +365,7 @@ onUnmounted(() => {
   letter-spacing: 0.1em;
 
   .message-group-tip-name {
-    color: var(--text-color-link);
+    color: var(--uikit-color-theme-8);
   }
   .message-group-tip-action {
   }

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

@@ -185,7 +185,6 @@ $message-bubble-border-radius: 8px;
 
   &__meta {
     flex: 0 0 auto;
-    align-self: flex-end;
   }
 
   &__failed {

package/src/components/BarrageList/Message/MessageLayout/MessageMeta/MessageMeta.vue

@@ -8,7 +8,7 @@
       class="message-meta__time"
     >{{ getTimeStampAuto(props.timestamp) }}</span>
     <div
-      v-if="props.status && props.isShowSendStatus"
+      v-if="showStatus"
       class="message-meta__status"
     >
       <MessageStatusIcon :status="props.status" />
@@ -17,6 +17,7 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
 import cs from 'classnames';
 import { getTimeStampAuto } from '../../../../../utils/time';
 import MessageStatusIcon from './MessageStatusIcon.vue';
@@ -40,10 +41,12 @@ const props = withDefaults(defineProps<IMessageMetaProps>(), {
   isShowSendStatus: false,
   isShowReadStatus: false,
   isShowTime: false,
-  status: undefined,
+  status: '',
   class: undefined,
   style: undefined,
 });
+
+const showStatus = computed(() => (props.status && props.isShowSendStatus) || props.status === 'fail');
 </script>
 
 <style lang="scss" scoped>

package/src/components/BarrageList/Message/MessageLayout/MessageMeta/MessageStatusIcon.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { IconLoading, IconSuccess } from '@tencentcloud/uikit-base-component-vue3';
+import { IconErrorToast, IconLoading, IconSuccess } from '@tencentcloud/uikit-base-component-vue3';
 
 defineProps<{
   status: string;
@@ -10,12 +10,16 @@ defineProps<{
   <IconLoading
     v-if="status === 'unSend'"
     class="message-meta__status--unSend"
-    :size="16"
+    :size="14"
   />
   <IconSuccess
     v-else-if="status === 'success'"
     name="&#xe60a;"
-    :size="16"
+    :size="14"
+  />
+  <IconErrorToast
+    v-else-if="status === 'fail'"
+    :size="14"
   />
 </template>
 

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

@@ -218,13 +218,13 @@ const handleNickClick = (event: MouseEvent) => {
     letter-spacing: 0.1em;
 
     &__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/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/GroupInfo/GroupInfo.vue

@@ -25,7 +25,7 @@ const {
   updateGroupProfile,
 } = useGroupSettingState();
 
-const { currentConversation: activeConversation } = useConversationListState();
+const { activeConversation } = useConversationListState();
 
 // Get group type display text
 const getGroupTypeText = () => {