✨ feat: 乐跑记录增加骨架屏

src/pages/admin/lepaoRecords/recordDetail.vue

@@ -2,8 +2,15 @@
     <div class="container">
         <Breadcrumb :items="['乐跑记录', '记录详情']" />
         <a-card title="记录详情">
+            <a-skeleton animation :loading="loading">
+                <a-space direction="vertical" :style="{ width: '100%' }" size="large">
+                    <a-skeleton-shape size="large" />
+                    <a-skeleton-line :rows="5" />
+                </a-space>
+            </a-skeleton>
             <a-descriptions :data="info" :column="2" />
-            <MapContainer v-if="showMap" :point_list="data.result.point_list" :pathData="data.data" threeD style="margin-top: 10px;"/>
+            <MapContainer v-if="showMap" :point_list="data.result.point_list" :pathData="data.data" threeD
+                style="margin-top: 10px;" />
         </a-card>
     </div>
 </template>
@@ -22,7 +29,7 @@ const showMap = ref(false)
 const data = ref({})
 const info = ref([])
 
-const adminGetRecordDetail = async (id) => {
+const GetRecordDetail = async (id) => {
     try {
         loading.value = true
         showMap.value = false
@@ -44,7 +51,7 @@ const adminGetRecordDetail = async (id) => {
             { label: '开始时间', value: stramptoTime(res.data.result.start_time * 1000) },
             { label: '打卡点数量', value: res.data.result.point_list.length },
             { label: '跑步距离', value: res.data.result.distance + ' Km' },
-            { label: '跑步时长', value: formatSecondsToMinSec(res.data.result.time ) },
+            { label: '跑步时长', value: formatSecondsToMinSec(res.data.result.time) },
             { label: '平均配速', value: calculatePace(res.data.result.time, res.data.result.distance) }
         ]
     } catch (error) {
@@ -58,19 +65,19 @@ const adminGetRecordDetail = async (id) => {
 }
 
 onMounted(() => {
-    adminGetRecordDetail(route.params.id)
+    GetRecordDetail(route.params.id)
 })
 
 const stramptoTime = (time) => {
-  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+    return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
 }
 
 function calculatePace(seconds, kilometers) {
-  const paceInSeconds = seconds / kilometers;
-  const minutes = Math.floor(paceInSeconds / 60);
-  const remainingSeconds = Math.round(paceInSeconds % 60);
+    const paceInSeconds = seconds / kilometers;
+    const minutes = Math.floor(paceInSeconds / 60);
+    const remainingSeconds = Math.round(paceInSeconds % 60);
 
-  return `${minutes}'${remainingSeconds.toString().padStart(2, '0')}''`;
+    return `${minutes}'${remainingSeconds.toString().padStart(2, '0')}''`;
 }
 
 function formatSecondsToMinSec(totalSeconds) {

src/pages/lepao/lepaoRecords/recordDetail.vue

@@ -2,8 +2,15 @@
     <div class="container">
         <Breadcrumb :items="['乐跑记录', '记录详情']" />
         <a-card title="记录详情">
+            <a-skeleton animation :loading="loading">
+                <a-space direction="vertical" :style="{ width: '100%' }" size="large">
+                    <a-skeleton-shape size="large" />
+                    <a-skeleton-line :rows="5" />
+                </a-space>
+            </a-skeleton>
             <a-descriptions :data="info" :column="2" />
-            <MapContainer v-if="showMap" :point_list="data.result.point_list" :pathData="data.data" threeD style="margin-top: 10px;"/>
+            <MapContainer v-if="showMap" :point_list="data.result.point_list" :pathData="data.data" threeD
+                style="margin-top: 10px;" />
         </a-card>
     </div>
 </template>
@@ -44,7 +51,7 @@ const getRecordDetail = async (id) => {
             { label: '开始时间', value: stramptoTime(res.data.result.start_time * 1000) },
             { label: '打卡点数量', value: res.data.result.point_list.length },
             { label: '跑步距离', value: res.data.result.distance + ' Km' },
-            { label: '跑步时长', value: formatSecondsToMinSec(res.data.result.time ) },
+            { label: '跑步时长', value: formatSecondsToMinSec(res.data.result.time) },
             { label: '平均配速', value: calculatePace(res.data.result.time, res.data.result.distance) }
         ]
     } catch (error) {
@@ -62,15 +69,15 @@ onMounted(() => {
 })
 
 const stramptoTime = (time) => {
-  return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
+    return new Date(time).toLocaleString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
 }
 
 function calculatePace(seconds, kilometers) {
-  const paceInSeconds = seconds / kilometers;
-  const minutes = Math.floor(paceInSeconds / 60);
-  const remainingSeconds = Math.round(paceInSeconds % 60);
+    const paceInSeconds = seconds / kilometers;
+    const minutes = Math.floor(paceInSeconds / 60);
+    const remainingSeconds = Math.round(paceInSeconds % 60);
 
-  return `${minutes}'${remainingSeconds.toString().padStart(2, '0')}''`;
+    return `${minutes}'${remainingSeconds.toString().padStart(2, '0')}''`;
 }
 
 function formatSecondsToMinSec(totalSeconds) {