处理聊天页面中出现的问题；优化页面中部门明细的样式问题

components.d.ts

@@ -25,11 +25,13 @@ declare module 'vue' {
     GroupNoticeMessage: typeof import('./src/components/talk/message/GroupNoticeMessage.vue')['default']
     HistoryRecord: typeof import('./src/components/talk/HistoryRecord.vue')['default']
     ImageMessage: typeof import('./src/components/talk/message/ImageMessage.vue')['default']
+    LinkMessage: typeof import('./src/components/talk/message/LinkMessage.vue')['default']
     Loading: typeof import('./src/components/base/Loading.vue')['default']
     LoginMessage: typeof import('./src/components/talk/message/LoginMessage.vue')['default']
     Message: typeof import('./src/components/x-message/message/index.vue')['default']
     MixedMessage: typeof import('./src/components/talk/message/MixedMessage.vue')['default']
-    NTag: typeof import('naive-ui')['NTag']
+    NButton: typeof import('naive-ui')['NButton']
+    NIcon: typeof import('naive-ui')['NIcon']
     PageAnimation: typeof import('./src/components/page-animation/index.vue')['default']
     RevokeMessage: typeof import('./src/components/talk/message/RevokeMessage.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/App.vue

@@ -1,36 +1,48 @@
 <script setup>
-import {useStatus} from "@/store/status";
+import { useStatus } from '@/store/status'
 import { useUserStore } from '@/store'
-import {
+import { useProvideUserModal } from '@/hooks'
-  useProvideUserModal,
-} from '@/hooks'
 import ws from '@/connect'
-const {statusBarHeight}= useStatus()
+const { statusBarHeight } = useStatus()
 const { uid, isShow } = useProvideUserModal()
 const userStore = useUserStore()
 const root = document.documentElement
-root.style.setProperty('--statusBarHeight',`${statusBarHeight.value}px`)
+root.style.setProperty('--statusBarHeight', `${statusBarHeight.value}px`)
+const handleWebview = () => {
+  let statusBarHeight = window?.plus?.navigator?.getStatusbarHeight()
+  plus.webview.currentWebview().setStyle({
+    top: statusBarHeight,
+    bottom: 0,
+  })
+}
 const init = () => {
   userStore.loadSetting()
   ws.connect()
+  if (typeof plus !== 'undefined') {
+    handleWebview()
+  } else {
+    document.addEventListener('plusready', () => {
+      handleWebview()
+    })
+  }
 }
 init()
 </script>
 <style lang="scss">
-@import "@/static/css/color.scss";
+@import '@/static/css/color.scss';
-@import "@/static/css/font.scss";
+@import '@/static/css/font.scss';
 /* #ifdef APP-NVUE */
 @import '@/uni_modules/tmui/scss/nvue.css';
 /* #endif */
 /* #ifndef APP-NVUE */
 @import '@/uni_modules/tmui/scss/noNvue.css';
 /* #endif */
-*{
+* {
   box-sizing: border-box;
 }
 /*解决阅览图片关闭按钮会显示在状态栏区域的问题*/
-#u-a-p>div>div{
+#u-a-p > div > div {
-  margin-top:var(--statusBarHeight)
+  margin-top: var(--statusBarHeight);
 }
 /*不显示滚动条的类*/
 .no-scroll {

src/components/custom-navbar/index.vue

@@ -5,6 +5,7 @@
     :title="props.title"
     :shadow="props.shadowNum"
     :fontSize="34"
+    :showStatusBar="false"
   >
     <template #left>
       <slot name="left"></slot>

src/components/talk/message/GroupNoticeMessage.vue

@@ -20,7 +20,8 @@ let show = ref(false)
     }"
   >
     <div class="title">
-      <n-tag :bordered="false" size="small" type="primary">群公告</n-tag>
+      <!-- <n-tag :bordered="false" size="small" type="primary">群公告</n-tag> -->
+       <text>群公告</text>
       <!-- 《{{ extra.title }}》 -->
     </div>
     <div class="title" :class="{ ellipsis: !show }">

src/components/talk/message/LinkMessage.vue

@@ -0,0 +1,95 @@
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<!-- 完全复制的textMessage组件，没有用处，仅兜底真有14类型时的场景。后续会单独做制作分享卡片功能，到时再根据分享卡片样式重做本页面 -->
+<script lang="ts" setup>
+import { textReplaceEmoji } from '@/utils/emojis'
+import { textReplaceLink, textReplaceMention } from '@/utils/strings'
+import { ITalkRecordExtraText, ITalkRecord } from '@/types/chat'
+
+const props = defineProps<{
+  extra: ITalkRecordExtraText
+  data: ITalkRecord
+  maxWidth?: boolean
+  source?: 'panel' | 'forward' | 'history'
+}>()
+
+const float = props.data.float
+
+let textContent = props.extra?.content || ''
+
+textContent = textReplaceLink(textContent)
+
+if (props.data.talk_type == 2) {
+  textContent = textReplaceMention(textContent, '#1890ff')
+}
+
+textContent = textReplaceEmoji(textContent)
+</script>
+
+<template>
+  <div
+    class="im-message-text"
+    :class="{
+      left: float == 'left',
+      right: float == 'right',
+      maxwidth: maxWidth,
+      'radius-reset': source != 'panel',
+    }"
+  >
+    <pre v-html="textContent" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.im-message-text {
+  min-width: 40rpx;
+  min-height: 40rpx;
+  padding: 22rpx 30rpx;
+  color: #1a1a1a;
+  background: #ffffff;
+  border-radius: 0 16rpx 16rpx 16rpx;
+
+  &.right {
+    background-color: #46299d;
+    color: #ffffff;
+    border-radius: 16rpx 0 16rpx 16rpx;
+  }
+
+  &.maxwidth {
+    max-width: 486rpx;
+  }
+
+  &.radius-reset {
+    border-radius: 0;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    overflow: hidden;
+    word-break: break-word;
+    word-wrap: break-word;
+    font-size: 32rpx;
+    font-family: 'PingFang SC', 'Microsoft YaHei', 'Alibaba PuHuiTi 2.0 45';
+    line-height: 44rpx;
+
+    :deep(.emoji) {
+      vertical-align: text-bottom;
+      margin: 0 10rpx;
+      width: 44rpx;
+      height: 44rpx;
+    }
+
+    :deep(a) {
+      color: #2196f3;
+      text-decoration: revert;
+    }
+  }
+}
+</style>

src/constant/message.ts

@@ -11,6 +11,7 @@ export const ChatMsgTypeLogin = 10 // 登录消息
 export const ChatMsgTypeVote = 11 // 投票消息
 export const ChatMsgTypeMixed = 12 // 混合消息
 export const ChatMsgTypeGroupNotice = 13 // 群公告消息
+export const ChatMsgTypeLink = 14 // 链接消息
 
 export const ChatMsgSysText = 1000 // 系统文本消息
 export const ChatMsgSysGroupCreate = 1101 // 创建群聊消息
@@ -40,6 +41,7 @@ export const ChatMsgTypeMapping = {
   [ChatMsgTypeCode]: '[代码消息]',
   [ChatMsgTypeMixed]: '[图文消息]',
   [ChatMsgTypeGroupNotice]: '[群公告]',
+  [ChatMsgTypeLink]: '[链接]',
   [ChatMsgSysText]: '[系统消息]',
   [ChatMsgSysGroupCreate]: '[创建群消息]',
   [ChatMsgSysGroupMemberJoin]: '[加入群消息]',
@@ -69,6 +71,7 @@ export const MessageComponents = {
   [ChatMsgTypeCode]: 'code-message',
   [ChatMsgTypeMixed]: 'mixed-message',
   [ChatMsgTypeGroupNotice]: 'group-notice-message',
+  [ChatMsgTypeLink]: 'link-message',
   [ChatMsgSysText]: 'sys-text-message',
   [ChatMsgSysGroupCreate]: 'sys-group-create-message',
   [ChatMsgSysGroupMemberJoin]: 'sys-group-join-message',
@@ -92,5 +95,6 @@ export const ForwardableMessageType = [
   ChatMsgTypeVideo,
   ChatMsgTypeFile,
   ChatMsgTypeLocation,
-  ChatMsgTypeCard
+  ChatMsgTypeCard,
+  ChatMsgTypeLink
 ]

src/pages/chatSettings/components/settingFormItem.vue

@@ -115,6 +115,7 @@ const changeSwitch = (e, item) => {
       flex-direction: row;
       align-items: center;
       justify-content: flex-end;
+      padding: 0 0 0 20rpx;
       span {
         line-height: 44rpx;
         color: #747474;

src/pages/chatSettings/index.vue

@@ -21,12 +21,15 @@
             <div class="base-info">
               <div class="base-info-name">
                 <span class="text-[32rpx] font-medium">{{ groupName }}</span>
-                <span class="base-info_num text-[32rpx] font-medium">
+                <span
+                  class="base-info_num text-[32rpx] font-medium"
+                  v-if="groupNum"
+                >
                   {{ '（' + groupNum + '）' }}
                 </span>
               </div>
               <div
-                v-if="groupParams?.groupInfo?.group_type !== 1"
+                v-if="groupParams?.groupInfo?.group_type !== 1 && groupType"
                 class="base-info-tag"
                 :style="{
                   borderColor:
@@ -292,10 +295,10 @@ onMounted(() => {
       value: t('record.searchType.files'),
       typeIcon: recordSearchTypeIcon_files,
     },
-    {
+    // {
-      value: t('record.searchType.link'),
+    //   value: t('record.searchType.link'),
-      typeIcon: recordSearchTypeIcon_link,
+    //   typeIcon: recordSearchTypeIcon_link,
-    },
+    // },
   ]
   if (dialogueParams.type === 2) {
     state.recordSearchTypeList.unshift({

src/pages/dialog/dialogDetail/userDetail.vue

@@ -27,7 +27,10 @@
               <span class="text-[40rpx] font-medium user-info-name">
                 {{ state?.userInfo?.nickname }}
               </span>
-              <span class="text-[28rpx] font-medium user-info-job-num">
+              <span
+                class="text-[28rpx] font-medium user-info-job-num"
+                v-if="state?.userInfo?.job_num"
+              >
                 {{ $t('user.info.jobNum') + '：' + state?.userInfo?.job_num }}
               </span>
             </div>

src/pages/dialog/index.vue

@@ -8,12 +8,8 @@
       :hide-empty-view="true"
       height="100%"
       ref="zpagingRef"
-      :use-virtual-list="true"
+      v-model="virtualList"
-      :preload-page="1"
-      cell-height-mode="dynamic"
-      virtual-scroll-fps="80"
       :loading-more-custom-style="{ display: 'none', height: '0' }"
-      @virtualListChange="virtualListChange"
       @scrolltolower="onRefreshLoad"
     >
       <template #top>
@@ -45,7 +41,7 @@
           </template> -->
 
       <!-- 数据加载状态栏 -->
-      <div class="dialog-list">
+      <div class="dialog-list" @touchstart="handleHidePanel">
         <div
           class="message-item"
           v-for="item in virtualList"
@@ -189,6 +185,7 @@
                   :options="editorOption"
                   @editorChange="onEditorChange"
                   style="height: 100%; border: none;"
+                  @click="onEditorClick"
                 />
                 <!-- <tm-input type=textarea autoHeight focusColor="#F9F9F9" color="#F9F9F9" :inputPadding="[12]"
               placeholder=""></tm-input> -->
@@ -409,7 +406,18 @@ const handleFilePanel = () => {
   state.value.isOpenFilePanel = !state.value.isOpenFilePanel
 }
 
-const onSendMessage = (data = {}) => {
+//点击隐藏表情/文件上传 面板
+const handleHidePanel = () => {
+  state.value.isOpenFilePanel = false
+  state.value.isOpenEmojiPanel = false
+}
+
+//点击编辑区聚焦输入框
+const onEditorClick = () => {
+  handleHidePanel()
+}
+
+const onSendMessage = (data = {}, callBack) => {
   let message = {
     ...data,
     receiver: {
@@ -421,7 +429,9 @@ const onSendMessage = (data = {}) => {
   ServePublishMessage(message)
     .then(({ code, message }) => {
       if (code == 200) {
-        // callBack(true)
+        if (callBack) {
+          callBack(true)
+        }
       } else {
         message.warning(message)
       }
@@ -466,7 +476,7 @@ const onSendTextEvent = lodash.throttle((value) => {
     mentions: data.mentionUids,
   }
 
-  onSendMessage(message)
+  onSendMessage(message, callBack)
 }, 1000)
 
 // 编辑器输入事件
@@ -823,7 +833,7 @@ const initData = async () => {
     no_limit: dialogueList ? 1 : 0,
   }
   await onLoad({ ...objT })
-  zpagingRef.value?.complete(records.value)
+  zpagingRef.value?.setLocalPaging(records.value)
 }
 
 //点击跳转到聊天设置页面

src/pages/index/components/chatItem.vue

@@ -31,8 +31,12 @@
         </div>
         <div class="chatInfo">
           <div class="chatInfo_1">
-            <div >
+            <div>
-              <span  class="text-[#000000] text-[32rpx] font-bold opacity-90 mr-[20rpx]">{{ props.data.name }}</span>
+              <span
+                class="text-[#000000] text-[32rpx] font-bold opacity-90 mr-[20rpx]"
+              >
+                {{ props.data.name }}
+              </span>
               <span v-if="props.data.group_type === 2" class="depTag">
                 部门
               </span>
@@ -43,7 +47,10 @@
                 公司
               </span>
             </div>
-            <div class="text-[#000000] text-[28rpx] font-medium opacity-26 ml-[24rpx]">
+            <div
+              class="text-[#000000] text-[28rpx] font-medium opacity-26 ml-[24rpx]"
+              style="flex-shrink: 0;"
+            >
               {{ beautifyTime(props.data.updated_at) }}
             </div>
           </div>
@@ -57,7 +64,7 @@
       <template #right>
         <div class="flex flex-row flex-row-center-end">
           <!-- 样式占位 -->
-          <div style="width:1px"></div>
+          <div style="width: 1px;"></div>
           <div
             @click="handleTop"
             class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#F09F1F] flex items-center justify-center"

src/pages/index/index.vue

@@ -17,6 +17,7 @@
       :auto="true"
       :empty-view-show="isEmptyViewShow"
       @refresherRefresh="onRefresh"
+      :show-scrollbar="false"
     >
       <template #top>
         <div>
@@ -26,12 +27,13 @@
             hideHome
             title=""
             :leftWidth="420"
+            :showStatusBar="false"
           >
             <template v-slot:left>
               <div class="flex items-center ml-[48rpx]">
                 <image
                   class="w-[72rpx] h-[72rpx]"
-									style="border-radius: 50%"
+                  style="border-radius: 50%;"
                   :src="userStore.avatar"
                   mode="scaleToFill"
                 />
@@ -45,7 +47,7 @@
                 <tm-popover position="br" color="#333333" :width="260">
                   <image
                     class="w-[48rpx] h-[48rpx]"
-										style="border-radius: 50%"
+                    style="border-radius: 50%;"
                     :src="addCircle"
                     mode="scaleToFill"
                   />
@@ -126,29 +128,29 @@
   </div>
 </template>
 <script setup>
-import { ref, watch, computed } from "vue";
+import { ref, watch, computed } from 'vue'
-import { onShow, onLoad } from "@dcloudio/uni-app";
+import { onShow, onLoad } from '@dcloudio/uni-app'
-import { useChatList } from "@/store/chatList/index.js";
+import { useChatList } from '@/store/chatList/index.js'
-import { useAuth } from "@/store/auth";
+import { useAuth } from '@/store/auth'
-import { useTalkStore, useUserStore, useDialogueStore } from "@/store";
+import { useTalkStore, useUserStore, useDialogueStore } from '@/store'
-import chatItem from "./components/chatItem.vue";
+import chatItem from './components/chatItem.vue'
-import addCircle from "@/static/image/chatList/addCircle.png";
+import addCircle from '@/static/image/chatList/addCircle.png'
-import cahtPopover from "@/static/image/chatList/cahtPopover.png";
+import cahtPopover from '@/static/image/chatList/cahtPopover.png'
-import zu3289 from "@/static/image/chatList/zu3289@2x.png";
+import zu3289 from '@/static/image/chatList/zu3289@2x.png'
-import ZPaging from "@/uni_modules/z-paging/components/z-paging/z-paging.vue";
+import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
-const paging = ref();
+const paging = ref()
-const isEmptyViewShow = ref(false);
+const isEmptyViewShow = ref(false)
-const talkStore = useTalkStore();
+const talkStore = useTalkStore()
-const userStore = useUserStore();
+const userStore = useUserStore()
-const dialogueStore = useDialogueStore();
+const dialogueStore = useDialogueStore()
-const { userInfo } = useAuth();
+const { userInfo } = useAuth()
 
-const topItems = computed(() => talkStore.topItems);
+const topItems = computed(() => talkStore.topItems)
 const items = computed(() => {
   // if (searchKeyword.value.length === 0) {
-	console.log(talkStore.talkItems);
+  console.log(talkStore.talkItems)
 
-	return talkStore.talkItems;
+  return talkStore.talkItems
   // }
 
   // return talkStore.talkItems.filter((item) => {
@@ -156,53 +158,59 @@ const items = computed(() => {
 
   //   return keyword.toLowerCase().indexOf(searchKeyword.value.toLowerCase()) != -1
   // })
-});
+})
 
 const queryList = (pageNo, pageSize) => {
   // paging.value.complete(res.data.list);
-	console.log(talkStore);
+  console.log(talkStore)
-  talkStore.loadTalkList().then(() => {
+  talkStore
-    isEmptyViewShow.value = talkStore.talkItems.length === 0;
+    .loadTalkList()
+    .then(() => {
+      isEmptyViewShow.value = talkStore.talkItems.length === 0
       // 数据加载成功
-  paging.value.complete(talkStore.talkItems);
+      paging.value.complete(talkStore.talkItems)
-}).catch(error => {
+    })
+    .catch((error) => {
       // 数据加载失败
-  console.error('加载失败', error);
+      console.error('加载失败', error)
-  paging.value.complete(false);
+      paging.value.complete(false)
-});
+    })
-};
+}
 
 // 添加下拉刷新处理函数
 const onRefresh = () => {
-  console.log('触发下拉刷新');
+  console.log('触发下拉刷新')
-  talkStore.loadTalkList().then(() => {
+  talkStore
+    .loadTalkList()
+    .then(() => {
       // 数据加载成功
-  paging.value.complete(talkStore.talkItems);
+      paging.value.complete(talkStore.talkItems)
-}).catch(error => {
+    })
+    .catch((error) => {
       // 数据加载失败
-  console.error('加载失败', error);
+      console.error('加载失败', error)
-  paging.value.complete(false);
+      paging.value.complete(false)
-});
+    })
-};
+}
 
 const creatGroupChat = () => {
   uni.navigateTo({
-		url: "/pages/creatGroupChat/index",
+    url: '/pages/creatGroupChat/index',
-	});
+  })
-};
+}
 
 const toSearchPage = () => {
   uni.navigateTo({
-		url: "/pages/search/index",
+    url: '/pages/search/index',
-	});
+  })
-};
+}
 
 //点击跳转到通讯录页面
 const toAddressBookPage = () => {
   uni.navigateTo({
-		url: "/pages/chooseByDeps/index?chooseMode=3",
+    url: '/pages/chooseByDeps/index?chooseMode=3',
-	});
+  })
-};
+}
 
 /* watch(
 	() => talkStore,
@@ -214,24 +222,27 @@ const toAddressBookPage = () => {
 
 onShow(() => {
   // 页面显示时重新加载数据
-	talkStore.loadTalkList().then(() => {
+  talkStore
+    .loadTalkList()
+    .then(() => {
       // 如果paging已经初始化，则刷新列表
       if (paging.value) {
-      paging.value.reload();
+        paging.value.reload()
       }
-  }).catch(error => {
+    })
-    console.error('页面显示时数据加载失败', error);
+    .catch((error) => {
-  });
+      console.error('页面显示时数据加载失败', error)
-});
+    })
+})
 
 onLoad((options) => {
-	console.log(options);
+  console.log(options)
 
   if (options?.openSessionIndexName) {
     if (items?.value?.length > 0) {
       items.value.forEach((openSession) => {
         if (openSession.index_name === options?.openSessionIndexName) {
-					dialogueStore.setDialogue(openSession);
+          dialogueStore.setDialogue(openSession)
           if (openSession.unread_num > 0) {
             ServeClearTalkUnreadNum({
               talk_type: openSession.talk_type,
@@ -240,30 +251,30 @@ onLoad((options) => {
               talkStore.updateItem({
                 index_name: openSession.index_name,
                 unread_num: 0,
-							});
+              })
-						});
+            })
           }
           uni.navigateTo({
-						url: "/pages/dialog/index?sessionId=" + openSession.id,
+            url: '/pages/dialog/index?sessionId=' + openSession.id,
-					});
+          })
         }
-			});
+      })
     }
   }
-});
+})
 </script>
 <style scoped lang="scss">
 uni-page-body,
 page {
   height: 100vh;
-  background-image: url("@/static/image/clockIn/z3280@3x.png");
+  background-image: url('@/static/image/clockIn/z3280@3x.png');
   background-size: cover;
   flex-direction: column;
 }
 .outer-layer {
   height: 100%;
 }
-.paging_container{
+.paging_container {
   // border: 1px solid red;
   background: #fff;
   margin: 0 32rpx 20rpx 32rpx;
@@ -281,8 +292,7 @@ page {
   height: 70px !important;
 }
 
-.content{
+.content {
-
   // overflow: auto;
 }
 .root {

src/uni_modules/tmui/components/tm-navbar/tm-navbar.vue

@@ -1,7 +1,14 @@
 <template>
   <view>
-		<view v-if="props.isPlace" class="statusHeight" :style="{ height: _barHeight + 'px' }"></view>
+    <view
-		<view class="fixed l-0 t-0 statusHeightTop flex" :style="{ width: _width + 'px', height: _barHeight + 'px' }">
+      v-if="props.isPlace"
+      class="statusHeight"
+      :style="{ height: _barHeight + 'px' }"
+    ></view>
+    <view
+      class="fixed l-0 t-0 statusHeightTop flex"
+      :style="{ width: _width + 'px', height: _barHeight + 'px' }"
+    >
       <tm-sheet
         @click="emits('click', $event)"
         :blur="_blur"
@@ -28,10 +35,17 @@
         unit="px"
         :darkBgColor="props.darkBgColor"
       >
-				<view class="statusHeight" :style="{ height: statusBarHeight + 'px' }"></view>
+        <view
+          class="statusHeight"
+          :style="{ height: statusBarHeight + 'px' }"
+          v-if="props?.showStatusBar"
+        ></view>
 
         <view class="flex flex-row flex-1 flex-row flex-row-center-between">
-					<view class="flex-row flex flex-row-center-start" :style="{ width: _leftWidth + 'rpx' }">
+          <view
+            class="flex-row flex flex-row-center-start"
+            :style="{ width: _leftWidth + 'rpx' }"
+          >
             <!-- #ifndef MP-ALIPAY -->
             <tm-icon
               :unit="props.unit"
@@ -54,7 +68,10 @@
             <!-- #endif -->
             <slot name="left"></slot>
           </view>
-					<view class="flex flex-row-center-center flex-col" :style="{ width: contentwidth + 'px' }">
+          <view
+            class="flex flex-row-center-center flex-col"
+            :style="{ width: contentwidth + 'px' }"
+          >
             <slot>
               <tm-text
                 :unit="props.unit"
@@ -66,7 +83,10 @@
               <slot name="subTitle"></slot>
             </slot>
           </view>
-					<view class="flex-row flex flex-row-center-end" :style="{ width: _rightWidth + 'rpx' }">
+          <view
+            class="flex-row flex flex-row-center-end"
+            :style="{ width: _rightWidth + 'rpx' }"
+          >
             <slot name="right"></slot>
           </view>
         </view>
@@ -83,7 +103,19 @@ import tmSheet from '../tm-sheet/tm-sheet.vue'
 import tmText from '../tm-text/tm-text.vue'
 import tmIcon from '../tm-icon/tm-icon.vue'
 import { custom_props } from '../../tool/lib/minxs'
-import { getCurrentInstance, computed, ref, provide, inject, onUpdated, onMounted, onUnmounted, nextTick, watch, PropType } from 'vue'
+import {
+  getCurrentInstance,
+  computed,
+  ref,
+  provide,
+  inject,
+  onUpdated,
+  onMounted,
+  onUnmounted,
+  nextTick,
+  watch,
+  PropType,
+} from 'vue'
 import { useTmpiniaStore } from '../../tool/lib/tmpinia'
 const store = useTmpiniaStore()
 const emits = defineEmits(['click', 'close'])
@@ -92,27 +124,27 @@ const props = defineProps({
   ...custom_props,
   followTheme: {
     type: [Boolean, String],
-		default: true
+    default: true,
   },
   transprent: {
     type: [Boolean, String],
-		default: false
+    default: false,
   },
   color: {
     type: [String],
-		default: 'white'
+    default: 'white',
   },
   text: {
     type: [Boolean],
-		default: false
+    default: false,
   },
   border: {
     type: [Number],
-		default: 0
+    default: 0,
   },
   shadow: {
     type: [Number],
-		default: 1
+    default: 1,
   },
   borderDirection: {
     type: String as PropType<
@@ -130,97 +162,104 @@ const props = defineProps({
       | 'x'
       | 'y'
     >,
-		default: 'bottom'
+    default: 'bottom',
   },
   round: {
     type: [Number],
-		default: 0
+    default: 0,
   },
   margin: {
     type: Array as PropType<Array<number>>,
-		default: () => [0, 0]
+    default: () => [0, 0],
   },
   padding: {
     type: Array as PropType<Array<number>>,
-		default: () => [0, 0]
+    default: () => [0, 0],
   },
   height: {
     type: [Number],
-		default: 44
+    default: 44,
   },
   //指两边，左宽度除了中间，中间标题宽度为自动
   leftWidth: {
     type: [Number],
-		default: 220
+    default: 220,
   },
   //指两边，左宽度除了中间，中间标题宽度为自动
   rightWidth: {
     type: [Number],
-		default: 220
+    default: 220,
   },
   fontSize: {
     type: [Number],
-		default: 30
+    default: 30,
   },
   iconFontSize: {
     type: [Number],
-		default: 37
+    default: 37,
   },
   title: {
     type: [String],
-		default: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题'
+    default: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题',
   },
   //默认为自动，提供了，将强制使用本主题色。
   fontColor: {
     type: [String],
-		default: ''
+    default: '',
   },
   homeColor: {
     type: [String],
-		default: ''
+    default: '',
   },
   hideHome: {
     type: Boolean,
-		default: false
+    default: false,
   },
   hideBack: {
     type: Boolean,
-		default: false
+    default: false,
   },
   //返回首页的路径，默认/pages/index/index
   homePath: {
     type: [String],
-		default: '/pages/index/index'
+    default: '/pages/index/index',
   },
   beforeBack: {
     type: [Boolean, Function],
-		default: () => true
+    default: () => true,
   },
   blur: {
     type: Boolean,
-		default: false
+    default: false,
   },
   unit: {
     type: String,
-		default: 'rpx'
+    default: 'rpx',
   },
   //暗下强制的背景色，
   //有时自动的背景，可能不是你想要暗黑背景，此时可以使用此参数，强制使用背景色，
   //只能是颜色值。
   darkBgColor: {
     type: String,
-		default: ''
+    default: '',
   },
   /**是否占位,如果为false,底部内容会被导航遮盖,true则会店内内容位置. */
   isPlace: {
     type: Boolean,
-		default: true
+    default: true,
-	}
+  },
+  //是否显示状态栏
+  showStatusBar: {
+    type: Boolean,
+    default: true,
+  },
 })
 const _height = computed(() => props.height)
 const _width = uni.getSystemInfoSync().windowWidth
-const statusBarHeight=window?.plus?.navigator?.getStatusbarHeight() ?? 0
+const statusBarHeight = window?.plus?.navigator?.getStatusbarHeight() ?? 0
-const _barHeight = computed(() => statusBarHeight + _height.value)
+const _barHeight = computed(() =>
+  props?.showStatusBar ? statusBarHeight + _height.value : _height.value,
+)
 const _leftWidth = computed(() => props.leftWidth)
 const _rightWidth = computed(() => props.rightWidth)
 const contentwidth = computed(() => {
@@ -237,7 +276,7 @@ onMounted(() => {
 
 const backhome = () => {
   uni.reLaunch({
-		url: props.homePath
+    url: props.homePath,
   })
 }
 let timerId = NaN
@@ -272,7 +311,7 @@ const goback = () => {
       uni.navigateBack({})
     },
     250,
-		true
+    true,
   )
 }
 </script>