dashboard cards

src/pages/dashboard.vue

@@ -6,6 +6,9 @@ import AnalyticsStorage from '@/views/dashboard/AnalyticsStorage.vue'
 import AnalyticsWeeklyOverview from '@/views/dashboard/AnalyticsWeeklyOverview.vue'
 import AnalyticsCpu from '@/views/dashboard/AnalyticsCpu.vue'
 import AnalyticsMemory from '@/views/dashboard/AnalyticsMemory.vue'
+import MediaServerLatest from '@/views/dashboard/MediaServerLatest.vue'
+import MediaServerLibrary from '@/views/dashboard/MediaServerLibrary.vue'
+import MediaServerPlaying from '@/views/dashboard/MediaServerPlaying.vue'
 
 // 仪表盘配置
 const dashboard_names = {
@@ -17,7 +20,7 @@ const dashboard_names = {
   cpu: 'CPU',
   memory: '内存',
   library: '我的媒体库',
-  playing: '继续播放',
+  playing: '继续观看',
   latest: '最近添加',
 }
 
@@ -107,6 +110,27 @@ function setDashboardConfig() {
     >
       <AnalyticsMemory />
     </VCol>
+
+    <VCol
+      v-if="config.library"
+      cols="12"
+    >
+      <MediaServerLibrary />
+    </VCol>
+
+    <VCol
+      v-if="config.playing"
+      cols="12"
+    >
+      <MediaServerPlaying />
+    </VCol>
+
+    <VCol
+      v-if="config.latest"
+      cols="12"
+    >
+      <MediaServerLatest />
+    </VCol>
   </VRow>
   <!-- 底部操作按钮 -->
   <span class="fixed right-5 bottom-5">

src/views/dashboard/MediaServerLatest.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import api from '@/api'
+import type { MediaServerPlayItem } from '@/api/types'
+
+// 最近入库列表
+const latestList = ref<MediaServerPlayItem[]>([])
+
+// 调用API查询
+async function loadLatest() {
+  try {
+    latestList.value = await api.get('mediaserver/latest')
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+onMounted(() => {
+  loadLatest()
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <VCardTitle>最近添加</VCardTitle>
+    </VCardItem>
+
+    <VCardText class="pt-4" />
+  </VCard>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+  --v-card-list-gap: 1rem;
+}
+</style>

src/views/dashboard/MediaServerLibrary.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import api from '@/api'
+import type { MediaServerPlayItem } from '@/api/types'
+
+// 媒体库列表
+const libraryList = ref<MediaServerPlayItem[]>([])
+
+// 调用API查询
+async function loadLibrary() {
+  try {
+    libraryList.value = await api.get('mediaserver/library')
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+onMounted(() => {
+  loadLibrary()
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <VCardTitle>我的媒体库</VCardTitle>
+    </VCardItem>
+
+    <VCardText class="pt-4" />
+  </VCard>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+  --v-card-list-gap: 1rem;
+}
+</style>

src/views/dashboard/MediaServerPlaying.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import api from '@/api'
+import type { MediaServerPlayItem } from '@/api/types'
+
+// 继续播放列表
+const playingList = ref<MediaServerPlayItem[]>([])
+
+// 调用API查询
+async function loadPlayingList() {
+  try {
+    playingList.value = await api.get('mediaserver/playing')
+  }
+  catch (e) {
+    console.log(e)
+  }
+}
+
+onMounted(() => {
+  loadPlayingList()
+})
+</script>
+
+<template>
+  <VCard>
+    <VCardItem>
+      <VCardTitle>继续观看</VCardTitle>
+    </VCardItem>
+
+    <VCardText class="pt-4" />
+  </VCard>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+  --v-card-list-gap: 1rem;
+}
+</style>