tuikit-atomicx-vue3 3.4.2 → 3.5.0-beta.8

package/src/components/MessageList/Message/AudioMessage/WaveForm.vue

@@ -1,25 +1,21 @@
 <template>
   <div
     class="wave-form"
-    @click="handleClick"
     :style="waveFormStyle"
+    @click="handleClick"
   >
     <div
       v-for="(height, index) in waveBarHeights"
       :key="index"
       class="wave-form__bar"
-      :class="{ 'wave-form__bar--active': isBarActive(index) }"
+      :class="{ 'wave-form__bar--active': activeStates[index] }"
       :style="{ height: `${height}px` }"
     />
-    <div
-      class="wave-form__cursor"
-      :style="cursorStyle"
-    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted } from 'vue';
+import { computed } from 'vue';
 
 interface WaveFormProps {
   progress: number | undefined;
@@ -29,7 +25,7 @@ interface WaveFormProps {
 
 const props = withDefaults(defineProps<WaveFormProps>(), {
   barsCount: 30,
-  width: '100%'
+  width: '100%',
 });
 
 const emit = defineEmits<{
@@ -38,32 +34,27 @@ const emit = defineEmits<{
 
 // Calculate wave form container style
 const waveFormStyle = computed(() => ({
-  width: typeof props.width === 'number' ? `${props.width}px` : props.width
+  width: typeof props.width === 'number' ? `${props.width}px` : props.width,
 }));
 
 // Generate fixed wave bar heights array to avoid height changes on re-render
-const waveBarHeights = ref<number[]>([]);
-
-// Generate random heights on component mount and keep them constant during component lifecycle
-onMounted(() => {
-  const heights = [];
-  for (let i = 0; i < props.barsCount; i++) {
-    // Generate random heights between 8px and 24px
-    heights.push(Math.random() * 16 + 8);
+const waveBarHeights = Array.from({ length: props.barsCount }, () => Math.random() * 16 + 4);
+
+// Compute active states for all bars
+const activeStates = computed(() => {
+  const currentProgress = props.progress || 0;
+
+  if (currentProgress === 0) {
+    return Array(props.barsCount).fill(false);
   }
-  waveBarHeights.value = heights;
-});
 
-// Check if wave bar is active
-const isBarActive = (index: number) => {
-  const barProgress = (index + 1) / props.barsCount;
-  return (props.progress || 0) >= barProgress;
-};
+  const _activeStates = Array.from({ length: props.barsCount }, (_, index) => {
+    const barProgress = index / props.barsCount;
+    return currentProgress >= barProgress;
+  });
 
-// Calculate cursor position style
-const cursorStyle = computed(() => ({
-  left: `${(props.progress || 0) * 100}%`
-}));
+  return _activeStates;
+});
 
 // Handle click event, calculate new progress
 const handleClick = (event: MouseEvent) => {
@@ -71,7 +62,7 @@ const handleClick = (event: MouseEvent) => {
   const rect = waveElement.getBoundingClientRect();
   const offsetX = event.clientX - rect.left;
   const newProgress = offsetX / rect.width;
-  
+
   // Ensure progress value is between 0-1
   const validProgress = Math.max(0, Math.min(1, newProgress));
   emit('seek', validProgress);
@@ -102,13 +93,5 @@ const handleClick = (event: MouseEvent) => {
     }
   }
 
-  &__cursor {
-    position: absolute;
-    top: 0;
-    width: 2px;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 20%);
-    pointer-events: none;
-  }
 }
 </style>

package/src/components/MessageList/Message/CustomMessage/CallMessage/CallMessage.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, useCssModule } from 'vue';
-import { IconCall1Filled, IconVideoDefaultFilled } from '@tencentcloud/uikit-base-component-vue3';
+import { IconCall1Filled, IconVideoDefaultFilled, useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import { View } from '../../../../../baseComp/View';
 import { useConversationListState } from '../../../../../states/ConversationListState';
 import { ConversationType } from '../../../../../types/engine';
@@ -12,10 +12,12 @@ interface Props {
 }
 
 const props = defineProps<Props>();
+
+const { t } = useUIKit();
 const classes = useCssModule();
 const { activeConversation } = useConversationListState();
 
-const text = computed(() => parseCallMessageText(props.message));
+const text = computed(() => parseCallMessageText(props.message, t));
 const payload = computed(() => parseCallMessage(props.message));
 
 const callAgain = () => {
@@ -25,7 +27,7 @@ const callAgain = () => {
 
   startCall({
     type: payload.value.data.data.call_type,
-    userIDList: payload.value.data.inviteeList,
+    userIDList: [activeConversation.value.userProfile?.userID],
   });
 };
 </script>

package/src/components/MessageList/Message/GroupTipMessage/GroupTipMessage.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed } from 'vue';
 import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
 import cs from 'classnames';
 import { ConversationType } from '../../../../types/engine';
@@ -28,20 +29,20 @@ const { t } = useUIKit();
 
 const messageContent = props.message.getMessageContent() as GroupTipMessageContent & CustomMessageContent;
 
-const renderText = () => {
+const renderText = computed(() => {
   if (messageContent.businessID === 'group_create') {
     return `${messageContent.showName || ''} ${t('MessageList.create_group')}`;
   }
   if (isCallMessage(props.message) && props.message.conversationType === ConversationType.GROUP) {
-    return parseCallMessageText(props.message);
+    return parseCallMessageText(props.message, t);
   }
   return resolveGroupTipMessage(props.message).text;
-};
+});
 </script>
 
 <template>
   <div :class="cs('group-tip-message')">
-    {{ renderText() }}
+    {{ renderText }}
   </div>
 </template>
 

package/src/components/MessageList/Message/Message.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { MessageLayout } from './MessageLayout';
 import type { MessageAction } from '../../../hooks/useMessageActions';
-import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../types/engine';
 
 interface MessageProps {
   message: MessageModel;

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

@@ -82,17 +82,17 @@ const MessageComponent = computed(() => MessageComponentsFactory[props.message.t
 
 const isMessageOwner = computed(() => props.message.flow === 'out');
 
-const {
-  layoutClasses,
-  wrapperClasses,
-  avatarClasses,
-  bubbleClasses,
-  metaClasses,
-} = useMessageLayoutClasses({
+const messageLayoutClasses = computed(() => useMessageLayoutClasses({
   isMessageOwner: isMessageOwner.value,
   alignment: props.alignment,
   isAggregated: props.isAggregated,
-});
+}));
+
+const layoutClasses = computed(() => messageLayoutClasses.value.layoutClasses);
+const wrapperClasses = computed(() => messageLayoutClasses.value.wrapperClasses);
+const avatarClasses = computed(() => messageLayoutClasses.value.avatarClasses);
+const bubbleClasses = computed(() => messageLayoutClasses.value.bubbleClasses);
+const metaClasses = computed(() => messageLayoutClasses.value.metaClasses);
 
 function handleReadReceiptOpen() {
   isReadReceiptInfoOpen.value = true;

package/src/components/MessageList/Message/VideoMessage/VideoMessage.vue

@@ -1,15 +1,15 @@
 <script lang="ts" setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import cs from 'classnames';
 import { View } from '../../../../baseComp/View';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import type { MessageModel } from '../../../../types/engine';
 
-interface IVideoMessageProps {
-  message: IMessageModel;
+interface VideoMessageProps {
+  message: MessageModel;
   isLastInChunk?: boolean;
 }
 
-interface IVideoMessageContent {
+interface VideoMessageContent {
   showName: string;
   snapshotHeight: number;
   snapshotWidth: number;
@@ -17,33 +17,51 @@ interface IVideoMessageContent {
   url: string;
 }
 
-const props = withDefaults(defineProps<IVideoMessageProps>(), {
+const props = withDefaults(defineProps<VideoMessageProps>(), {
   isLastInChunk: false,
-  message: () => ({} as IMessageModel),
+  message: () => ({} as MessageModel),
 });
 
-const messageContent = props.message.getMessageContent() as IVideoMessageContent;
+// SDK uses 200×200 as placeholder before actual dimensions are available
+const isPlaceholderSize = (width: number, height: number): boolean => width === 200 && height === 200;
 
-const windowResize = ref(false);
-const loaded = ref(false);
-const naturalSize = ref<{ height: number; aspectRatio: number } | null>(
-  messageContent.snapshotWidth && messageContent.snapshotHeight
-    ? {
-      height: messageContent.snapshotHeight,
-      aspectRatio: messageContent.snapshotWidth / messageContent.snapshotHeight,
-    }
-    : null,
+const messageContent = computed(() =>
+  props.message.getMessageContent() as VideoMessageContent,
 );
 
-const isMessageOwner = computed(() => props.message.flow === 'out');
+const videoNaturalSize = ref<{ height: number; aspectRatio: number } | null>(null);
+const loaded = ref(false);
+
+// Priority: video metadata > snapshot > null (for placeholder data)
+const naturalSize = computed(() => {
+  if (videoNaturalSize.value) {
+    return videoNaturalSize.value;
+  }
+
+  const content = messageContent.value;
+
+  if (isPlaceholderSize(content.snapshotWidth, content.snapshotHeight)) {
+    return null;
+  }
+
+  if (content.snapshotWidth && content.snapshotHeight) {
+    return {
+      height: content.snapshotHeight,
+      aspectRatio: content.snapshotWidth / content.snapshotHeight,
+    };
+  }
+
+  return null;
+});
 
 const displaySize = computed(() => {
-  const MAX_HEIGHT = 400;
+  const MAX_HEIGHT = 300;
+  const PLACEHOLDER_HEIGHT = 200;
   const DEFAULT_RATIO = 3 / 4;
 
   if (!naturalSize.value) {
     return {
-      height: MAX_HEIGHT,
+      height: PLACEHOLDER_HEIGHT,
       aspectRatio: DEFAULT_RATIO,
     };
   }
@@ -56,41 +74,30 @@ const displaySize = computed(() => {
       height: 200,
     };
   }
+
   return {
     aspectRatio,
     height: MAX_HEIGHT,
   };
 });
 
-const onResize = () => {
-  windowResize.value = true;
-};
+const isMessageOwner = computed(() => props.message.flow === 'out');
 
 const onVideoLoad = (e: Event) => {
   const video = e.target as HTMLVideoElement;
-  naturalSize.value = {
+
+  videoNaturalSize.value = {
     aspectRatio: video.videoWidth / video.videoHeight,
     height: video.videoHeight,
   };
+
   loaded.value = true;
 };
 
-onMounted(() => {
-  window.addEventListener('resize', onResize);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', onResize);
-});
-
+// Reset state when message ID changes (e.g., URL switches from blob to real)
 watch(() => props.message.ID, () => {
   loaded.value = false;
-  naturalSize.value = messageContent.snapshotWidth && messageContent.snapshotHeight
-    ? {
-      height: messageContent.snapshotHeight,
-      aspectRatio: messageContent.snapshotWidth / messageContent.snapshotHeight,
-    }
-    : null;
+  videoNaturalSize.value = null;
 });
 </script>
 
@@ -102,7 +109,6 @@ watch(() => props.message.ID, () => {
       'video-message--loaded': loaded
     })"
     :style="{
-      minHeight: windowResize ? 'auto' : `${displaySize.height}px`,
       maxHeight: `${displaySize.height}px`,
       aspectRatio: naturalSize ? `${displaySize.aspectRatio}` : 'auto',
       width: !loaded ? `${displaySize.height * displaySize.aspectRatio}px` : undefined
@@ -150,10 +156,7 @@ watch(() => props.message.ID, () => {
 
 .video-placeholder {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+  inset: 0;
   background:
     linear-gradient(
       90deg,

package/src/components/MessageList/Message/VideoMessage/index.ts

@@ -1,3 +1,3 @@
 import VideoMessage from './VideoMessage.vue';
 
-export { VideoMessage };
+export { VideoMessage };

package/src/components/MessageList/MessageList.vue

@@ -243,6 +243,8 @@ watch(messageList, (newMessages, oldMessages) => {
       // TODO: new message notification
     }
   }
+}, {
+  immediate: true,
 });
 
 watch(() => props.enableReadReceipt, (newEnableReadReceipt) => {

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

@@ -72,7 +72,73 @@ const CallMessage = {
   no_answer_timeout: 'Call not answered (timeout)',
 };
 
+const Emoji = {
+  '[TUIEmoji_Smile]': '[Smile]',
+  '[TUIEmoji_Expect]': '[Expect]',
+  '[TUIEmoji_Blink]': '[Blink]',
+  '[TUIEmoji_Guffaw]': '[Guffaw]',
+  '[TUIEmoji_KindSmile]': '[KindSmile]',
+  '[TUIEmoji_Haha]': '[Haha]',
+  '[TUIEmoji_Cheerful]': '[Cheerful]',
+  '[TUIEmoji_Speechless]': '[Speechless]',
+  '[TUIEmoji_Amazed]': '[Amazed]',
+  '[TUIEmoji_Sorrow]': '[Sorrow]',
+  '[TUIEmoji_Complacent]': '[Complacent]',
+  '[TUIEmoji_Silly]': '[Silly]',
+  '[TUIEmoji_Lustful]': '[Lustful]',
+  '[TUIEmoji_Giggle]': '[Giggle]',
+  '[TUIEmoji_Kiss]': '[Kiss]',
+  '[TUIEmoji_Wail]': '[Wail]',
+  '[TUIEmoji_TearsLaugh]': '[TearsLaugh]',
+  '[TUIEmoji_Trapped]': '[Trapped]',
+  '[TUIEmoji_Mask]': '[Mask]',
+  '[TUIEmoji_Fear]': '[Fear]',
+  '[TUIEmoji_BareTeeth]': '[BareTeeth]',
+  '[TUIEmoji_FlareUp]': '[FlareUp]',
+  '[TUIEmoji_Yawn]': '[Yawn]',
+  '[TUIEmoji_Tact]': '[Tact]',
+  '[TUIEmoji_Stareyes]': '[StarEyes]',
+  '[TUIEmoji_ShutUp]': '[ShutUp]',
+  '[TUIEmoji_Sigh]': '[Sigh]',
+  '[TUIEmoji_Hehe]': '[Hehe]',
+  '[TUIEmoji_Silent]': '[Silent]',
+  '[TUIEmoji_Surprised]': '[Surprised]',
+  '[TUIEmoji_Askance]': '[Askance]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[Shit]',
+  '[TUIEmoji_Monster]': '[Monster]',
+  '[TUIEmoji_Daemon]': '[Daemon]',
+  '[TUIEmoji_Rage]': '[Rage]',
+  '[TUIEmoji_Fool]': '[Fool]',
+  '[TUIEmoji_Pig]': '[Pig]',
+  '[TUIEmoji_Cow]': '[Cow]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[Skull]',
+  '[TUIEmoji_Bombs]': '[Bombs]',
+  '[TUIEmoji_Coffee]': '[Coffee]',
+  '[TUIEmoji_Cake]': '[Cake]',
+  '[TUIEmoji_Beer]': '[Beer]',
+  '[TUIEmoji_Flower]': '[Flower]',
+  '[TUIEmoji_Watermelon]': '[Watermelon]',
+  '[TUIEmoji_Rich]': '[Rich]',
+  '[TUIEmoji_Heart]': '[Heart]',
+  '[TUIEmoji_Moon]': '[Moon]',
+  '[TUIEmoji_Sun]': '[Sun]',
+  '[TUIEmoji_Star]': '[Star]',
+  '[TUIEmoji_RedPacket]': '[RedPacket]',
+  '[TUIEmoji_Celebrate]': '[Celebrate]',
+  '[TUIEmoji_Bless]': '[Bless]',
+  '[TUIEmoji_Fortune]': '[Fortune]',
+  '[TUIEmoji_Convinced]': '[Convinced]',
+  '[TUIEmoji_Prohibit]': '[Prohibit]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[Knife]',
+  '[TUIEmoji_Like]': '[Like]',
+};
+
 export {
   MessageList,
   CallMessage,
+  Emoji,
 };

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

@@ -1,9 +1,9 @@
-import { MessageList as MessageListEn, CallMessage as CallMessageEn } from './en-US';
-import { MessageList as MessageListZh, CallMessage as CallMessageZh } from './zh-CN';
+import { MessageList as MessageListEn, CallMessage as CallMessageEn, Emoji as EmojiEn } from './en-US';
+import { MessageList as MessageListZh, CallMessage as CallMessageZh, Emoji as EmojiZh } from './zh-CN';
 
 const resources = {
-  'en-US': { MessageList: MessageListEn, CallMessage: CallMessageEn },
-  'zh-CN': { MessageList: MessageListZh, CallMessage: CallMessageZh },
+  'en-US': { MessageList: MessageListEn, CallMessage: CallMessageEn, Emoji: EmojiEn},
+  'zh-CN': { MessageList: MessageListZh, CallMessage: CallMessageZh, Emoji: EmojiZh },
 };
 
 export { resources };

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

@@ -71,7 +71,73 @@ const CallMessage = {
   no_answer_timeout: '超时无应答',
 };
 
+const Emoji = {
+  '[TUIEmoji_Smile]': '[微笑]',
+  '[TUIEmoji_Expect]': '[期待]',
+  '[TUIEmoji_Blink]': '[眨眼]',
+  '[TUIEmoji_Guffaw]': '[大笑]',
+  '[TUIEmoji_KindSmile]': '[姨母笑]',
+  '[TUIEmoji_Haha]': '[哈哈哈]',
+  '[TUIEmoji_Cheerful]': '[愉快]',
+  '[TUIEmoji_Speechless]': '[无语]',
+  '[TUIEmoji_Amazed]': '[惊讶]',
+  '[TUIEmoji_Sorrow]': '[悲伤]',
+  '[TUIEmoji_Complacent]': '[得意]',
+  '[TUIEmoji_Silly]': '[傻了]',
+  '[TUIEmoji_Lustful]': '[色]',
+  '[TUIEmoji_Giggle]': '[憨笑]',
+  '[TUIEmoji_Kiss]': '[亲亲]',
+  '[TUIEmoji_Wail]': '[大哭]',
+  '[TUIEmoji_TearsLaugh]': '[哭笑]',
+  '[TUIEmoji_Trapped]': '[困]',
+  '[TUIEmoji_Mask]': '[口罩]',
+  '[TUIEmoji_Fear]': '[恐惧]',
+  '[TUIEmoji_BareTeeth]': '[龇牙]',
+  '[TUIEmoji_FlareUp]': '[发怒]',
+  '[TUIEmoji_Yawn]': '[打哈欠]',
+  '[TUIEmoji_Tact]': '[机智]',
+  '[TUIEmoji_Stareyes]': '[星星眼]',
+  '[TUIEmoji_ShutUp]': '[闭嘴]',
+  '[TUIEmoji_Sigh]': '[叹气]',
+  '[TUIEmoji_Hehe]': '[呵呵]',
+  '[TUIEmoji_Silent]': '[收声]',
+  '[TUIEmoji_Surprised]': '[惊喜]',
+  '[TUIEmoji_Askance]': '[白眼]',
+  '[TUIEmoji_Ok]': '[OK]',
+  '[TUIEmoji_Shit]': '[便便]',
+  '[TUIEmoji_Monster]': '[怪兽]',
+  '[TUIEmoji_Daemon]': '[恶魔]',
+  '[TUIEmoji_Rage]': '[恶魔怒]',
+  '[TUIEmoji_Fool]': '[衰]',
+  '[TUIEmoji_Pig]': '[猪]',
+  '[TUIEmoji_Cow]': '[牛]',
+  '[TUIEmoji_Ai]': '[AI]',
+  '[TUIEmoji_Skull]': '[骷髅]',
+  '[TUIEmoji_Bombs]': '[炸弹]',
+  '[TUIEmoji_Coffee]': '[咖啡]',
+  '[TUIEmoji_Cake]': '[蛋糕]',
+  '[TUIEmoji_Beer]': '[啤酒]',
+  '[TUIEmoji_Flower]': '[花]',
+  '[TUIEmoji_Watermelon]': '[瓜]',
+  '[TUIEmoji_Rich]': '[壕]',
+  '[TUIEmoji_Heart]': '[爱心]',
+  '[TUIEmoji_Moon]': '[月亮]',
+  '[TUIEmoji_Sun]': '[太阳]',
+  '[TUIEmoji_Star]': '[星星]',
+  '[TUIEmoji_RedPacket]': '[红包]',
+  '[TUIEmoji_Celebrate]': '[庆祝]',
+  '[TUIEmoji_Bless]': '[福]',
+  '[TUIEmoji_Fortune]': '[发]',
+  '[TUIEmoji_Convinced]': '[服]',
+  '[TUIEmoji_Prohibit]': '[禁]',
+  '[TUIEmoji_666]': '[666]',
+  '[TUIEmoji_857]': '[857]',
+  '[TUIEmoji_Knife]': '[刀]',
+  '[TUIEmoji_Like]': '[赞]',
+};
+
 export {
   MessageList,
   CallMessage,
+  Emoji,
 }

package/src/components/MicButton/index.vue

@@ -2,7 +2,7 @@
   <div class="mic-button-container">
     <div class="mic-button" :class="{ 'disabled': !hasPublishAudioPermission }" @click="handleClick">
       <audio-icon
-        :audio-volume="audioVolume"
+        :audio-volume="currentMicVolume"
         :is-muted="isMuted"
         :is-disabled="!hasPublishAudioPermission"
       />
@@ -19,7 +19,7 @@ import { DeviceStatus, DeviceError } from '../../types';
 import AudioIcon from './AudioIcon.vue';
 
 const {
-  audioVolume,
+  currentMicVolume,
   hasPublishAudioPermission,
   microphoneStatus,
   microphoneLastError,
@@ -60,4 +60,4 @@ async function handleClick() {
     }
   }
 }
-</style>
+</style>

package/src/components/Search/Search.vue

@@ -188,5 +188,5 @@ const stopClickPropagation = (e: Event) => {
 </script>
 
 <style lang="scss" module>
-@import './Search.scss';
+@use './Search.scss';
 </style>

package/src/components/Search/SearchAdvanced/DateRangePicker/DateRangePicker.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchDateRangePicker {
   background: var(--bg-color-dialog);
   box-shadow: 0 2px 8px var(--shadow-color);
@@ -305,4 +302,4 @@
     color: #fff;
     border-color: #1677ff;
   }
-} 
+}

package/src/components/Search/SearchAdvanced/DateRangePicker/DateRangePicker.vue

@@ -554,5 +554,5 @@ const handleH5Cancel = () => {
 </script>
 
 <style lang="scss" module>
-@import './DateRangePicker.scss';
+@use './DateRangePicker.scss';
 </style>

package/src/components/Search/SearchAdvanced/MessageAdvanced/MessageAdvanced.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchMessageAdvanced {
   padding: 10px 20px;
   background-color: var(--bg-color-operate);
@@ -81,4 +78,4 @@
   left: 0;
   margin-top: 8px;
   z-index: 1000;
-} 
+}

package/src/components/Search/SearchAdvanced/MessageAdvanced/MessageAdvanced.vue

@@ -259,5 +259,5 @@ const handleQuickOptionClick = (option: string) => {
 </script>
 
 <style lang="scss" module>
-@import './MessageAdvanced.scss';
+@use './MessageAdvanced.scss';
 </style>

package/src/components/Search/SearchAdvanced/SearchAdvanced.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchAdvanced {
   display: flex;
   flex-direction: column;
@@ -53,4 +50,4 @@
     margin-top: 8px;
     z-index: 1000;
   }
-} 
+}

package/src/components/Search/SearchAdvanced/SearchAdvanced.vue

@@ -58,5 +58,5 @@ const handleUserAdvancedChange = (params: Map<SearchType, any>) => {
 </script>
 
 <style lang="scss" module>
-@import './SearchAdvanced.scss';
+@use './SearchAdvanced.scss';
 </style>

package/src/components/Search/SearchAdvanced/SearchTab/SearchTab.scss

@@ -1,6 +1,3 @@
-@use "sass:map";
-@use "@tencentcloud/uikit-base-component-vue3/src/providers/UIKitProvider/styles/variables.scss" as *;
-
 .SearchTab {
   position: sticky;
   top: 0;
@@ -37,4 +34,4 @@
       font-weight: 500;
     }
   }
-} 
+}

package/src/components/Search/SearchAdvanced/SearchTab/SearchTab.vue

@@ -53,5 +53,5 @@ const handleTabClick = (tabKey: SearchTabType) => {
 </script>
 
 <style lang="scss" module>
-@import './SearchTab.scss';
+@use './SearchTab.scss';
 </style>