refactor: 优化站点卡片组件

src/views/site/SiteCardListView.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import draggable from 'vuedraggable'
 import api from '@/api'
-import type { Site } from '@/api/types'
+import type { Site, SiteUserData } from '@/api/types'
 import SiteCard from '@/components/cards/SiteCard.vue'
 import NoDataFound from '@/components/NoDataFound.vue'
 import SiteAddEditDialog from '@/components/dialog/SiteAddEditDialog.vue'
@@ -15,8 +15,11 @@ const appMode = computed(() => {
   return localStorage.getItem('MP_APPMODE') != '0' && display.mdAndDown.value
 })
 
-// 数据列表
-const dataList = ref<Site[]>([])
+// 站点列表
+const siteList = ref<Site[]>([])
+
+// 站点数据列表
+const userDataList = ref<SiteUserData[]>([])
 
 // 是否刷新过
 const isRefreshed = ref(false)
@@ -31,7 +34,7 @@ const siteAddDialog = ref(false)
 async function fetchData() {
   try {
     loading.value = true
-    dataList.value = await api.get('site/')
+    siteList.value = await api.get('site/')
     loading.value = false
     isRefreshed.value = true
   } catch (error) {
@@ -39,10 +42,19 @@ async function fetchData() {
   }
 }
 
+// 获取站点最新数据
+async function fetchUserData() {
+  try {
+    userDataList.value = await api.get('site/userdata/latest')
+  } catch (error) {
+    console.error(error)
+  }
+}
+
 // 保存站点排序
 async function savaSitesPriority() {
   // 重新排序
-  const priorities = dataList.value.map((site, index) => ({ id: site.id, pri: index + 1 }))
+  const priorities = siteList.value.map((site, index) => ({ id: site.id, pri: index + 1 }))
   try {
     const result: { [key: string]: any } = await api.post('site/priorities', priorities)
     if (result.success) {
@@ -53,6 +65,11 @@ async function savaSitesPriority() {
   }
 }
 
+// 根据站点ID获取站点数据
+function getUserData(domain: string) {
+  return userDataList.value.find(userData => userData.domain === domain)
+}
+
 // 更新站点事件时
 function onSiteSave() {
   siteAddDialog.value = false
@@ -60,11 +77,15 @@ function onSiteSave() {
 }
 
 // 加载时获取数据
-onBeforeMount(fetchData)
+onBeforeMount(() => {
+  fetchData()
+  fetchUserData()
+})
 
 onActivated(() => {
   if (!loading.value) {
     fetchData()
+    fetchUserData()
   }
 })
 </script>
@@ -73,8 +94,8 @@ onActivated(() => {
   <LoadingBanner v-if="!isRefreshed" class="mt-12" />
   <div>
     <draggable
-      v-if="dataList.length > 0"
-      v-model="dataList"
+      v-if="siteList.length > 0"
+      v-model="siteList"
       @end="savaSitesPriority"
       handle=".cursor-move"
       item-key="id"
@@ -82,12 +103,12 @@ onActivated(() => {
       :component-data="{ 'class': 'grid gap-3 grid-site-card' }"
     >
       <template #item="{ element }">
-        <SiteCard :site="element" @remove="fetchData" @update="fetchData" />
+        <SiteCard :site="element" :data="getUserData(element.domain)" @remove="fetchData" @update="fetchData" />
       </template>
     </draggable>
   </div>
   <NoDataFound
-    v-if="dataList.length === 0 && isRefreshed"
+    v-if="siteList.length === 0 && isRefreshed"
     error-code="404"
     error-title="没有站点"
     error-description="已添加并支持的站点将会在这里显示。"