chore

src/components/chat-stu-card/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { type_dyaw_xlfw_zxhd } from '~/types';
+import { formatTimeToShow } from '~/utils/time'
 const props = defineProps<{ d: type_dyaw_xlfw_zxhd }>()
 
 const showMsg = $computed(() => {
@@ -18,7 +19,7 @@ const showMsg = $computed(() => {
     <div class="flex flex-col justify-evenly flex-auto">
       <div class="flex justify-between">
         <div class="font-medium">{{ d.dxz_stu_user_realname }}</div>
-        <div class="opacity-40 text-sm">{{ d.dxz_last_msg_datetime }}</div>
+        <div class="opacity-40 text-sm">{{ formatTimeToShow(d.dxz_last_msg_datetime) }}</div>
       </div>
       <div class="flex justify-between h-20px">
         <template v-if="d.dxz_last_msg_datetime">

src/components/info-item/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { type_dyaw_xlfw_zxhd_log } from '~/types';
-import { formatTimestamp } from '~/utils/time';
+import { formatTimestamp,formatTimeToShow } from '~/utils/time';
 const props = defineProps<{
   left: boolean,
   d: type_dyaw_xlfw_zxhd_log
@@ -19,7 +19,7 @@ const showMsg = $computed(() => decodeURIComponent(props.d.dxzl_last_msg_content
   <div class="w-full" :class="left ? 'left' : 'right'">
     <div class="flex items-end r_flex-row-reverse gap-4">
       <div>{{ id2name[d.create_user_id] }}</div>
-      <div class="text-sm text-hex-AFB2B6">{{ formatTimestamp(d.create_dateline) }}</div>
+      <div class="text-sm text-hex-AFB2B6">{{ formatTimeToShow(formatTimestamp(d.create_dateline)) }}</div>
     </div>
     <div class="flex mt-2 r_flex-row-reverse">
       <div class=" py-10px px-25px rounded-3xl min-h-44px bg-white text_wrapper" v-html="showMsg">

src/components/rtc-dialog/index.vue

@@ -8,9 +8,9 @@ import type { type_dyaw_xlfw_zxhd, type_dyaw_xlfw_zxhd_log } from '~/types';
 import user, { UserRole } from '~/store/user';
 import { socketSend } from '~/utils/ws';
 import { formatOffsetSec } from '~/utils/time';
-import { useInterval } from '@vueuse/core'
 
-let offsetTime: unknown
+let offsetTimer: NodeJS.Timeout
+let offsetTime: number
 
 const emits = defineEmits<{
   (event: 'update-info', info: Partial<type_dyaw_xlfw_zxhd_log>, isUpdate?: boolean): void;
@@ -100,7 +100,9 @@ defineExpose({
         if (mode === 'video')
           await rtcInstance.client!.publish(rtcInstance.localVideoTrack!);
         currentChatStatus = CHAT_STATUS.CHATING
-        offsetTime = useInterval(1000, { callback: n => formatOffsetSec(n) })
+        offsetTimer = setInterval(() => {
+          offsetTime = (offsetTime as number + 1)
+        }, 1000)
         break;
       case CHAT_OPERATION.DENY:
         emits('update-info', content.fullSendData!, true)
@@ -109,6 +111,7 @@ defineExpose({
         break;
       case CHAT_OPERATION.END:
         emits('update-info', content.fullSendData!, true)
+        offsetTimer && clearInterval(offsetTimer)
         isOpen = false
         await rtcInstance.client!.leave();
         break;
@@ -328,7 +331,9 @@ async function handleAudioChatAccept() {
     fullSendData
   })
   currentChatStatus = CHAT_STATUS.CHATING
-  offsetTime = useInterval(1000, { callback: n => formatOffsetSec(n) })
+  offsetTimer = setInterval(() => {
+    offsetTime = (offsetTime as number + 1)
+  }, 1000)
 }
 async function handleAudioChatDeny() {
   const fullSendData = await handleInfoEdit({ dxzl_status: '4' }, '已拒接')
@@ -342,6 +347,7 @@ async function handleAudioChatDeny() {
 }
 async function handleAudioChatEnd() {
   const fullSendData = await handleInfoEdit({ dxzl_status: '4' }, '已结束')
+  offsetTimer && clearInterval(offsetTimer)
   await rtcInstance.client!.leave();
   socketSend(ws2, {
     dxzl_stu_user_id: dyaw_xlfw_zxhd!.dxz_stu_user_id,
@@ -372,6 +378,7 @@ function handleSwitchVideo() {
     console.error(error);
   }
 }
+
 </script>
 
 <template>
@@ -456,7 +463,7 @@ function handleSwitchVideo() {
           <div class="text-hex-909090 flex_center flex-col space-y-2 h-16"
             v-show="mode === 'audio' && currentChatStatus === CHAT_STATUS.CHATING">
             <div>正在通话中</div>
-            <div>{{ offsetTime }}</div>
+            <div>{{ formatOffsetSec(offsetTime) }}</div>
           </div>
           <!-- </div> -->
         </div>
@@ -465,6 +472,3 @@ function handleSwitchVideo() {
   </UseDraggable>
 </template>
 
-<style scoped>
-
-</style>

src/utils/time.ts

@@ -10,11 +10,24 @@ export function formatDate2String(d: Date) {
   return d.toLocaleString().replace(/\//g, '-')
 }
 
-export function formatOffsetSec(s: number) {
-  const n = s * 1000
-  var days = (n / (1000 * 60 * 60 * 24)).toString().padStart(2, '0');
-  var hours = ((n % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)).toString().padStart(2, '0');
-  var minutes = ((n % (1000 * 60 * 60)) / (1000 * 60)).toString().padStart(2, '0');
-  var seconds = ((n % (1000 * 60)) / 1000).toString().padStart(2, '0');
-  return days + ":" + hours + ":" + minutes + ":" + seconds;
+
+
+// 将一个秒数转换为 00:00:00 格式
+export function formatOffsetSec(s: number):string {
+  const h = Math.floor(s / 3600)
+  const m = Math.floor(s % 3600 / 60)
+  const ss = Math.floor(s % 3600 % 60)
+  console.log(`${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${ss < 10 ? '0' + ss : ss}`);
+  return `${h < 10 ? '0' + h : h}:${m < 10 ? '0' + m : m}:${ss < 10 ? '0' + ss : ss}`
+}
+
+// 将LocaleTimeString 改为当天只显示 hh:mm:ss，之前的日期改为yyyy-mm-dd hh:mm:ss
+export function formatTimeToShow(t: string) {
+  const d = new Date(t)
+  const now = new Date()
+  if (d.getFullYear() === now.getFullYear() && d.getMonth() === now.getMonth() && d.getDate() === now.getDate()) {
+    return d.toLocaleTimeString()
+  } else {
+    return d.toLocaleString().replace(/\//g, '-')
+  }
 }