From 1d0d7f997590e14e9fbebf3c5d5a4620c56cacd5 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Fri, 5 Jan 2024 15:59:03 +0800
Subject: [PATCH] dashboard cards

---
 src/pages/dashboard.vue                    | 26 ++++++++++++++-
 src/views/dashboard/MediaServerLatest.vue  | 37 ++++++++++++++++++++++
 src/views/dashboard/MediaServerLibrary.vue | 37 ++++++++++++++++++++++
 src/views/dashboard/MediaServerPlaying.vue | 37 ++++++++++++++++++++++
 4 files changed, 136 insertions(+), 1 deletion(-)
 create mode 100644 src/views/dashboard/MediaServerLatest.vue
 create mode 100644 src/views/dashboard/MediaServerLibrary.vue
 create mode 100644 src/views/dashboard/MediaServerPlaying.vue

diff --git a/src/pages/dashboard.vue b/src/pages/dashboard.vue
index 0e887462..1d149bd8 100644
--- a/src/pages/dashboard.vue
+++ b/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">
diff --git a/src/views/dashboard/MediaServerLatest.vue b/src/views/dashboard/MediaServerLatest.vue
new file mode 100644
index 00000000..8d509a5e
--- /dev/null
+++ b/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>
diff --git a/src/views/dashboard/MediaServerLibrary.vue b/src/views/dashboard/MediaServerLibrary.vue
new file mode 100644
index 00000000..933c91cc
--- /dev/null
+++ b/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>
diff --git a/src/views/dashboard/MediaServerPlaying.vue b/src/views/dashboard/MediaServerPlaying.vue
new file mode 100644
index 00000000..11240542
--- /dev/null
+++ b/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>