优化页面

TUIKit/components/TUIChat/chat-header/index.vue

@@ -1,5 +1,20 @@
 <template>
-  <view style="display: flex;" />
+  <div class="Navigation">
+    <div class="Navigation-name">
+      {{ Title }}
+    </div>
+    <image
+      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Navigationimg.png"
+      mode="scaleToFill"
+      class="Navigationimg"
+    />
+    <image
+      @click="Returnfunc"
+      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
+      mode="scaleToFill"
+      class="Return"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -18,6 +33,7 @@ const props = defineProps(['isGroup']);
 
 const currentConversation = ref<IConversationModel>();
 const typingStatus = ref(false);
+const Title = ref('Global'); // 初始化为默认标题
 
 // #ifdef APP-PLUS
 onNavigationBarButtonTap(() => {
@@ -42,10 +58,14 @@ if (!props.isGroup) {
 }
 // #endif
 
-const setChatHeaderContent = (content: string) => {
-  TUIGlobal?.setNavigationBarTitle({
-    title: content || '云通信 IM',
+function Returnfunc() {
+  uni.navigateBack({
+    delta: 1,
   });
+}
+
+const setChatHeaderContent = (content: string | undefined) => {
+  Title.value = content || 'Global'; // 确保默认值存在
 };
 
 onMounted(() => {
@@ -80,9 +100,44 @@ function onCurrentConversationUpdated(conversation: IConversationModel) {
 function onTypingStatusUpdated(status: boolean) {
   typingStatus.value = status;
   if (typingStatus.value) {
-    setChatHeaderContent(TUITranslateService.t('TUIChat.对方正在输入'));
+    setChatHeaderContent(TUITranslateService.t('TUIChat.对方正在输入...'));
   } else {
     setChatHeaderContent(currentConversation.value?.getShowName());
   }
 }
 </script>
+<style>
+.Return {
+  width: 46rpx;
+  height: 46rpx;
+  position: absolute;
+  top: 110rpx;
+  left: 40rpx;
+  z-index: 999;
+  font-weight: bold;
+}
+.Navigationimg {
+  width: 100%;
+  height: 240rpx;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.Navigation-name{
+  position: absolute;
+  top: 110rpx;
+  left: 320rpx;
+  font-size: 36rpx;
+  color: #000000;
+  font-weight: bold;
+}
+.Navigation{
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 240rpx;
+}
+</style>

TUIKit/components/TUIChat/index.vue

@@ -1,23 +1,6 @@
 <template>
-   <!-- <div class="Navigation">
-    <div class="Navigation-name">
-      {{currentConversationID}}
-    </div>
-    <image
-      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Navigationimg.png"
-      mode="scaleToFill"
-      class="Navigationimg"
-    />
-    <image
-      @click="Returnfunc"
-      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
-      mode="scaleToFill"
-      class="Return"
-    />
-  </div> -->
-    <div class="dingweizhibox">
-
-  </div>
+  <ChatHeader class="ChatHeadercss"/>
+    <div class="dingweizhibox"></div>
   <div class="chat">
     <div :class="['tui-chat', !isPC && 'tui-chat-h5']">
       <div
@@ -27,17 +10,6 @@
         <slot />
       </div>
       <div v-if="currentConversationID" :class="['tui-chat', !isPC && 'tui-chat-h5']">
-        <ChatHeader
-          :class="[
-            'tui-chat-header',
-            !isPC && 'tui-chat-H5-header',
-            isUniFrameWork && 'tui-chat-uniapp-header',
-          ]"
-          :isGroup="isGroup"
-          :headerExtensionList="headerExtensionList"
-          @closeChat="closeChat"
-          @openGroupManagement="handleGroup"
-        />
         <Forward @toggleMultipleSelectMode="toggleMultipleSelectMode" />
         <MessageList
           ref="messageListRef"
@@ -145,9 +117,9 @@ const counter = useCounterStore();
 
 let myitem = ref();
 let youritem = ref();
-let MessageListinfo = ref();
 onLoad((options) => {
   initChat(options);
+  try{
   myitem.value = JSON.parse(options.myitem);
   console.log(myitem.value);
   youritem.value = JSON.parse(options.youritem);
@@ -156,6 +128,7 @@ onLoad((options) => {
   setTimeout(() => {
     sendCustomMessage(myitem.value, youritem.value);
   }, 1000);
+  }catch(e){}
 });
 
 onUnload(() => {
@@ -183,7 +156,7 @@ const messageInputRef = ref();
 const messageListRef = ref<InstanceType<typeof MessageList>>();
 const headerExtensionList = ref<ExtensionInfo[]>([]);
 const featureConfig = TUIChatConfig.getFeatureConfig();
-
+let marginTopcss = ref("0px");
 onMounted(() => {
   TUIStore.watch(StoreName.CONV, {
     currentConversation: onCurrentConversationUpdate,
@@ -347,19 +320,12 @@ const handleGroup = () => {
   headerExtensionList.value[0].listener.onClicked({ groupID: groupID.value });
 };
 
-function Returnfunc() {
-  uni.navigateBack({
-    delta: 1,
-  });
-}
-
 function changeToolbarDisplayType(type: ToolbarDisplayType) {
   inputToolbarDisplayType.value = inputToolbarDisplayType.value === type ? "none" : type;
   if (inputToolbarDisplayType.value !== "none" && isUniFrameWork) {
     uni.$emit("scroll-to-bottom");
   }
 }
-
 function scrollToLatestMessage() {
   messageListRef.value?.scrollToLatestMessage();
 }
@@ -455,59 +421,12 @@ function onCurrentConversationUpdate(conversation: IConversationModel) {
   width: 100%;
   height: 15%;
 }
-.tui-chat{
-  width: 100%;
-  height: 15%;
-}
-.tui-chat-h5 {
-  width: 100%;
-  height: 100%;
-}
-.tui-chat-uniapp-header{
-  width: 100%;
-  height: 100%;
-}
-.Navigation {
-  width: 100%;
-  height: 10%;
+.ChatHeadercss{
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.Navigationimg {
   width: 100%;
-  height: 200rpx;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-}
-.Navigation {
-  width: 100%;
-  height: 200rpx;
-  z-index: 999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.Return {
-  width: 50rpx;
-  height: 50rpx;
-  position: absolute;
-  top: 100rpx;
-  left: 40rpx;
-  z-index: 999;
-}
-.Navigation-name{
-  width: 50rpx;
-  height: 50rpx;
-  position: absolute;
-  top: 100rpx;
-  left: 300rpx;
-  z-index: 999;
+  height: 15%;
 }
 </style>

TUIKit/components/TUIConversation/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="Navigation-left"> </div>
   <div class="Navigation">
     <image
       src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Navigationimg.png"