GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-05-21 16:29:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

仪表板组件拖拽按钮按照hover进行展示

Browse Source
This commit is contained in:
Allen
2024-05-17 10:23:57 +08:00
parent aecf52551b
commit b85950e4ca
11 changed files with 253 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/misc/DashboardElement.vue
View File

@@ -40,21 +40,25 @@ onUnmounted(() => {
<MediaServerPlaying v-else-if="config?.id === 'playing'" />
<MediaServerLatest v-else-if="config?.id === 'latest'" />
<!-- 插件仪表板 -->
<VCard v-else-if="!isNullOrEmptyObject(props.config)">
<VCardItem v-if="props.config?.attrs.border !== false">
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>
{{ props.config?.name }}
</VCardTitle>
<VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
</VCardItem>
<VCardText :class="{ 'p-0': props.config?.attrs.border === false }">
<DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
</VCardText>
<div v-if="props.config?.attrs.border === false" class="absolute right-5 top-5">
<VIcon class="cursor-move">mdi-drag</VIcon>
</div>
</VCard>
<VHover v-else-if="!isNullOrEmptyObject(props.config)">
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem v-if="props.config?.attrs.border !== false">
<template #append>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>
{{ props.config?.name }}
</VCardTitle>
<VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
</VCardItem>
<VCardText :class="{ 'p-0': props.config?.attrs.border === false }">
<DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
</VCardText>
<div v-if="props.config?.attrs.border === false && hover.isHovering" class="absolute right-5 top-5">
<VIcon class="cursor-move">mdi-drag</VIcon>
</div>
</VCard>
</template>
</VHover>
</template>

28
src/views/dashboard/AnalyticsCpu.vue
View File

@@ -123,17 +123,21 @@ onUnmounted(() => {
</script>
<template>
<VCard>
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>CPU</VCardTitle>
</VCardItem>
<VCardText>
<VueApexCharts type="line" :options="chartOptions" :series="series" :height="150" />
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>CPU</VCardTitle>
</VCardItem>
<VCardText>
<VueApexCharts type="line" :options="chartOptions" :series="series" :height="150" />
<p class="text-center font-weight-medium mb-0">当前：{{ current }}%</p>
</VCardText>
</VCard>
<p class="text-center font-weight-medium mb-0">当前：{{ current }}%</p>
</VCardText>
</VCard>
</template>
</VHover>
</template>

58
src/views/dashboard/AnalyticsMediaStatistic.vue
View File

@@ -53,33 +53,37 @@ onMounted(() => {
</script>
<template>
<VCard>
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>媒体统计</VCardTitle>
</VCardItem>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>媒体统计</VCardTitle>
</VCardItem>
<VCardText>
<VRow>
<VCol v-for="item in statistics" :key="item.title" cols="6" sm="3">
<div class="d-flex align-center">
<div class="me-3">
<VAvatar :color="item.color" rounded size="42" class="elevation-1">
<VIcon size="24" :icon="item.icon" />
</VAvatar>
</div>
<VCardText>
<VRow>
<VCol v-for="item in statistics" :key="item.title" cols="6" sm="3">
<div class="d-flex align-center">
<div class="me-3">
<VAvatar :color="item.color" rounded size="42" class="elevation-1">
<VIcon size="24" :icon="item.icon" />
</VAvatar>
</div>
<div class="d-flex flex-column">
<span class="text-caption">
{{ item.title }}
</span>
<span class="text-h6">{{ item.stats }}</span>
</div>
</div>
</VCol>
</VRow>
</VCardText>
</VCard>
<div class="d-flex flex-column">
<span class="text-caption">
{{ item.title }}
</span>
<span class="text-h6">{{ item.stats }}</span>
</div>
</div>
</VCol>
</VRow>
</VCardText>
</VCard>
</template>
</VHover>
</template>

28
src/views/dashboard/AnalyticsMemory.vue
View File

@@ -129,17 +129,21 @@ onUnmounted(() => {
</script>
<template>
<VCard>
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>内存</VCardTitle>
</VCardItem>
<VCardText>
<VueApexCharts type="area" :options="chartOptions" :series="series" :height="150" />
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>内存</VCardTitle>
</VCardItem>
<VCardText>
<VueApexCharts type="area" :options="chartOptions" :series="series" :height="150" />
<p class="text-center font-weight-medium mb-0">当前：{{ formatBytes(usedMemory) }}</p>
</VCardText>
</VCard>
<p class="text-center font-weight-medium mb-0">当前：{{ formatBytes(usedMemory) }}</p>
</VCardText>
</VCard>
</template>
</VHover>
</template>

78
src/views/dashboard/AnalyticsScheduler.vue
View File

@@ -38,45 +38,49 @@ onUnmounted(() => {
</script>
<template>
<VCard>
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>后台任务</VCardTitle>
</VCardItem>
<VCardText>
<VList class="card-list" height="250">
<VListItem v-for="item in schedulerList" :key="item.id">
<template #prepend>
<VAvatar size="40" variant="tonal" color="" class="me-3">
{{ item.name[0] }}
</VAvatar>
</template>
<VListItemTitle class="mb-1">
<span class="text-sm font-weight-medium">{{ item.name }}</span>
</VListItemTitle>
<VListItemSubtitle class="text-xs">
{{ item.next_run }}
</VListItemSubtitle>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<div>
<h4 class="font-weight-medium">
{{ item.status }}
</h4>
</div>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
</VListItem>
<VListItem v-if="schedulerList.length === 0">
<VListItemTitle class="text-center"> 没有后台服务 </VListItemTitle>
</VListItem>
</VList>
</VCardText>
</VCard>
<VCardTitle>后台任务</VCardTitle>
</VCardItem>
<VCardText>
<VList class="card-list" height="250">
<VListItem v-for="item in schedulerList" :key="item.id">
<template #prepend>
<VAvatar size="40" variant="tonal" color="" class="me-3">
{{ item.name[0] }}
</VAvatar>
</template>
<VListItemTitle class="mb-1">
<span class="text-sm font-weight-medium">{{ item.name }}</span>
</VListItemTitle>
<VListItemSubtitle class="text-xs">
{{ item.next_run }}
</VListItemSubtitle>
<template #append>
<div>
<h4 class="font-weight-medium">
{{ item.status }}
</h4>
</div>
</template>
</VListItem>
<VListItem v-if="schedulerList.length === 0">
<VListItemTitle class="text-center"> 没有后台服务 </VListItemTitle>
</VListItem>
</VList>
</VCardText>
</VCard>
</template>
</VHover>
</template>
<style lang="scss" scoped>

68
src/views/dashboard/AnalyticsSpeed.vue
View File

@@ -80,40 +80,44 @@ onUnmounted(() => {
</script>
<template>
<VCard>
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>实时速率</VCardTitle>
</VCardItem>
<VCardText class="pt-4">
<div>
<p class="text-h5 me-2">↑{{ formatFileSize(downloadInfo.upload_speed) }}/s</p>
<p class="text-h4 me-2">↓{{ formatFileSize(downloadInfo.download_speed) }}/s</p>
</div>
<VList class="card-list mt-9">
<VListItem v-for="item in infoItems" :key="item.title">
<template #prepend>
<VIcon rounded :icon="item.avatar" />
</template>
<VListItemTitle class="text-sm font-weight-medium mb-1">
{{ item.title }}
</VListItemTitle>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<div>
<h6 class="text-sm font-weight-medium mb-2">
{{ item.amount }}
</h6>
</div>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
</VListItem>
</VList>
</VCardText>
</VCard>
<VCardTitle>实时速率</VCardTitle>
</VCardItem>
<VCardText class="pt-4">
<div>
<p class="text-h5 me-2">↑{{ formatFileSize(downloadInfo.upload_speed) }}/s</p>
<p class="text-h4 me-2">↓{{ formatFileSize(downloadInfo.download_speed) }}/s</p>
</div>
<VList class="card-list mt-9">
<VListItem v-for="item in infoItems" :key="item.title">
<template #prepend>
<VIcon rounded :icon="item.avatar" />
</template>
<VListItemTitle class="text-sm font-weight-medium mb-1">
{{ item.title }}
</VListItemTitle>
<template #append>
<div>
<h6 class="text-sm font-weight-medium mb-2">
{{ item.amount }}
</h6>
</div>
</template>
</VListItem>
</VList>
</VCardText>
</VCard>
</template>
</VHover>
</template>
<style lang="scss" scoped>

46
src/views/dashboard/AnalyticsStorage.vue
View File

@@ -39,28 +39,32 @@ onMounted(() => {
</script>
<template>
<VCard>
<!-- Triangle Background -->
<VImg :src="triangleBg" class="triangle-bg flip-in-rtl" />
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>存储空间</VCardTitle>
</VCardItem>
<VCardText>
<h5 class="text-2xl font-weight-medium text-primary">
{{ formatFileSize(storage) }}
</h5>
<p class="mt-2">已使用 {{ usedPercent }}% 🚀</p>
<p class="mt-1">
<VProgressLinear :model-value="usedPercent" color="primary" />
</p>
</VCardText>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<!-- Triangle Background -->
<VImg :src="triangleBg" class="triangle-bg flip-in-rtl" />
<VCardItem>
<template #append>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>存储空间</VCardTitle>
</VCardItem>
<VCardText>
<h5 class="text-2xl font-weight-medium text-primary">
{{ formatFileSize(storage) }}
</h5>
<p class="mt-2">已使用 {{ usedPercent }}% 🚀</p>
<p class="mt-1">
<VProgressLinear :model-value="usedPercent" color="primary" />
</p>
</VCardText>
<!-- Trophy -->
<VImg :src="trophy" class="trophy" />
</VCard>
<!-- Trophy -->
<VImg :src="trophy" class="trophy" />
</VCard>
</template>
</VHover>
</template>
<style lang="scss">

40
src/views/dashboard/AnalyticsWeeklyOverview.vue
View File

@@ -110,25 +110,29 @@ onMounted(() => {
</script>
<template>
<VCard>
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>最近入库</VCardTitle>
</VCardItem>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>最近入库</VCardTitle>
</VCardItem>
<VCardText>
<VueApexCharts type="bar" :options="options" :series="series" :height="160" />
<VCardText>
<VueApexCharts type="bar" :options="options" :series="series" :height="160" />
<div class="d-flex align-center mb-3">
<h5 class="text-h5 me-4">
{{ totalCount }}
</h5>
<p>最近一周入库了 {{ totalCount }} 部影片 😎</p>
</div>
<div class="d-flex align-center mb-3">
<h5 class="text-h5 me-4">
{{ totalCount }}
</h5>
<p>最近一周入库了 {{ totalCount }} 部影片 😎</p>
</div>
<VBtn v-if="superUser" block to="/history"> 查看详情 </VBtn>
</VCardText>
</VCard>
<VBtn v-if="superUser" block to="/history"> 查看详情 </VBtn>
</VCardText>
</VCard>
</template>
</VHover>
</template>

26
src/views/dashboard/MediaServerLatest.vue
View File

@@ -21,18 +21,22 @@ onMounted(() => {
</script>
<template>
<VCard>
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle >最近添加</VCardTitle>
</VCardItem>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle >最近添加</VCardTitle>
</VCardItem>
<div v-if="latestList.length > 0" class="grid gap-4 grid-media-card mx-3 mb-3" tabindex="0">
<PosterCard v-for="data in latestList" :key="data.id" :media="data" />
</div>
</VCard>
<div v-if="latestList.length > 0" class="grid gap-4 grid-media-card mx-3 mb-3" tabindex="0">
<PosterCard v-for="data in latestList" :key="data.id" :media="data" />
</div>
</VCard>
</template>
</VHover>
</template>
<style lang="scss">

26
src/views/dashboard/MediaServerLibrary.vue
View File

@@ -21,18 +21,22 @@ onMounted(() => {
</script>
<template>
<VCard>
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle >我的媒体库</VCardTitle>
</VCardItem>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle >我的媒体库</VCardTitle>
</VCardItem>
<div v-if="libraryList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
<LibraryCard v-for="data in libraryList" :key="data.id" :media="data" height="10rem" />
</div>
</VCard>
<div v-if="libraryList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
<LibraryCard v-for="data in libraryList" :key="data.id" :media="data" height="10rem" />
</div>
</VCard>
</template>
</VHover>
</template>
<style lang="scss">

26
src/views/dashboard/MediaServerPlaying.vue
View File

@@ -21,18 +21,22 @@ onMounted(() => {
</script>
<template>
<VCard>
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
</template>
<VCardTitle>继续观看</VCardTitle>
</VCardItem>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>继续观看</VCardTitle>
</VCardItem>
<div v-if="playingList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
<BackdropCard v-for="data in playingList" :key="data.id" :media="data" height="10rem" />
</div>
</VCard>
<div v-if="playingList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
<BackdropCard v-for="data in playingList" :key="data.id" :media="data" height="10rem" />
</div>
</VCard>
</template>
</VHover>
</template>
<style lang="scss">