优化页面

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>