GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 15:36:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #128 from hotlcc/develop-20240517-页面优化

Browse Source 
仪表板组件拖拽按钮按照hover进行展示
This commit is contained in:
jxxghp
2024-05-17 10:56:16 +08:00
committed by GitHub
parent 33d2a396ce 05320d1070
commit 825b8bb4a5
11 changed files with 253 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/misc/DashboardElement.vue
+21 -17
View File
@@ -40,21 +40,25 @@ onUnmounted(() => {
<MediaServerPlaying v-else-if="config?.id === 'playing'" /> <MediaServerPlaying v-else-if="config?.id === 'playing'" />
<MediaServerLatest v-else-if="config?.id === 'latest'" /> <MediaServerLatest v-else-if="config?.id === 'latest'" />
<!-- 插件仪表板 --> <!-- 插件仪表板 -->
<VCard v-else-if="!isNullOrEmptyObject(props.config)"> <VHover v-else-if="!isNullOrEmptyObject(props.config)">
<VCardItem v-if="props.config?.attrs.border !== false"> <template #default="hover">
<template #append> <VCard v-bind="hover.props">
<VIcon class="cursor-move">mdi-drag</VIcon> <VCardItem v-if="props.config?.attrs.border !== false">
</template> <template #append>
<VCardTitle> <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
{{ props.config?.attrs?.title ?? props.config?.name }} </template>
</VCardTitle> <VCardTitle>
<VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle> {{ props.config?.attrs?.title ?? props.config?.name }}
</VCardItem> </VCardTitle>
<VCardText :class="{ 'p-0': props.config?.attrs.border === false }"> <VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
<DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" /> </VCardItem>
</VCardText> <VCardText :class="{ 'p-0': props.config?.attrs.border === false }">
<div v-if="props.config?.attrs.border === false" class="absolute right-5 top-5"> <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
<VIcon class="cursor-move">mdi-drag</VIcon> </VCardText>
</div> <div v-if="props.config?.attrs.border === false && hover.isHovering" class="absolute right-5 top-5">
</VCard> <VIcon class="cursor-move">mdi-drag</VIcon>
</div>
</VCard>
</template>
</VHover>
</template> </template>
src/views/dashboard/AnalyticsCpu.vue
+16 -12
View File
@@ -123,17 +123,21 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<VCard> <VHover>
<VCardItem> <template #default="hover">
<template #append> <VCard v-bind="hover.props">
<VIcon class="cursor-move">mdi-drag</VIcon> <VCardItem>
</template> <template #append>
<VCardTitle>CPU</VCardTitle> <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</VCardItem> </template>
<VCardText> <VCardTitle>CPU</VCardTitle>
<VueApexCharts type="line" :options="chartOptions" :series="series" :height="150" /> </VCardItem>
<VCardText>
<VueApexCharts type="line" :options="chartOptions" :series="series" :height="150" />
<p class="text-center font-weight-medium mb-0">当前：{{ current }}%</p> <p class="text-center font-weight-medium mb-0">当前：{{ current }}%</p>
</VCardText> </VCardText>
</VCard> </VCard>
</template>
</VHover>
</template> </template>
src/views/dashboard/AnalyticsMediaStatistic.vue
+31 -27
View File
@@ -53,33 +53,37 @@ onMounted(() => {
</script> </script>
<template> <template>
<VCard> <VHover>
<VCardItem> <template #default="hover">
<template #append> <VCard v-bind="hover.props">
<VIcon class="cursor-move">mdi-drag</VIcon> <VCardItem>
</template> <template #append>
<VCardTitle>媒体统计</VCardTitle> <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</VCardItem> </template>
<VCardTitle>媒体统计</VCardTitle>
</VCardItem>
<VCardText> <VCardText>
<VRow> <VRow>
<VCol v-for="item in statistics" :key="item.title" cols="6" sm="3"> <VCol v-for="item in statistics" :key="item.title" cols="6" sm="3">
<div class="d-flex align-center"> <div class="d-flex align-center">
<div class="me-3"> <div class="me-3">
<VAvatar :color="item.color" rounded size="42" class="elevation-1"> <VAvatar :color="item.color" rounded size="42" class="elevation-1">
<VIcon size="24" :icon="item.icon" /> <VIcon size="24" :icon="item.icon" />
</VAvatar> </VAvatar>
</div> </div>
<div class="d-flex flex-column"> <div class="d-flex flex-column">
<span class="text-caption"> <span class="text-caption">
{{ item.title }} {{ item.title }}
</span> </span>
<span class="text-h6">{{ item.stats }}</span> <span class="text-h6">{{ item.stats }}</span>
</div> </div>
</div> </div>
</VCol> </VCol>
</VRow> </VRow>
</VCardText> </VCardText>
</VCard> </VCard>
</template>
</VHover>
</template> </template>
src/views/dashboard/AnalyticsMemory.vue
+16 -12
View File
@@ -129,17 +129,21 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<VCard> <VHover>
<VCardItem> <template #default="hover">
<template #append> <VCard v-bind="hover.props">
<VIcon class="cursor-move">mdi-drag</VIcon> <VCardItem>
</template> <template #append>
<VCardTitle>内存</VCardTitle> <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</VCardItem> </template>
<VCardText> <VCardTitle>内存</VCardTitle>
<VueApexCharts type="area" :options="chartOptions" :series="series" :height="150" /> </VCardItem>
<VCardText>
<VueApexCharts type="area" :options="chartOptions" :series="series" :height="150" />
<p class="text-center font-weight-medium mb-0">当前：{{ formatBytes(usedMemory) }}</p> <p class="text-center font-weight-medium mb-0">当前：{{ formatBytes(usedMemory) }}</p>
</VCardText> </VCardText>
</VCard> </VCard>
</template>
</VHover>
</template> </template>
src/views/dashboard/AnalyticsScheduler.vue
+41 -37
View File
@@ -38,45 +38,49 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<VCard> <VHover>
<VCardItem> <template #default="hover">
<template #append> <VCard v-bind="hover.props">
<VIcon class="cursor-move">mdi-drag</VIcon> <VCardItem>
</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>
<template #append> <template #append>
<div> <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
<h4 class="font-weight-medium">
{{ item.status }}
</h4>
</div>
</template> </template>
</VListItem> <VCardTitle>后台任务</VCardTitle>
<VListItem v-if="schedulerList.length === 0"> </VCardItem>
<VListItemTitle class="text-center"> 没有后台服务 </VListItemTitle>
</VListItem> <VCardText>
</VList> <VList class="card-list" height="250">
</VCardText> <VListItem v-for="item in schedulerList" :key="item.id">
</VCard> <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> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
src/views/dashboard/AnalyticsSpeed.vue
+36 -32
View File
@@ -80,40 +80,44 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<VCard> <VHover>
<VCardItem> <template #default="hover">
<template #append> <VCard v-bind="hover.props">
<VIcon class="cursor-move">mdi-drag</VIcon> <VCardItem>
</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>
<template #append> <template #append>
<div> <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
<h6 class="text-sm font-weight-medium mb-2">
{{ item.amount }}
</h6>
</div>
</template> </template>
</VListItem> <VCardTitle>实时速率</VCardTitle>
</VList> </VCardItem>
</VCardText>
</VCard> <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> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
src/views/dashboard/AnalyticsStorage.vue
+25 -21
View File
@@ -39,28 +39,32 @@ onMounted(() => {
</script> </script>
<template> <template>
<VCard> <VHover>
<!-- Triangle Background --> <template #default="hover">
<VImg :src="triangleBg" class="triangle-bg flip-in-rtl" /> <VCard v-bind="hover.props">
<VCardItem> <!-- Triangle Background -->
<template #append> <VImg :src="triangleBg" class="triangle-bg flip-in-rtl" />
<VIcon class="cursor-move">mdi-drag</VIcon> <VCardItem>
</template> <template #append>
<VCardTitle>存储空间</VCardTitle> <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</VCardItem> </template>
<VCardText> <VCardTitle>存储空间</VCardTitle>
<h5 class="text-2xl font-weight-medium text-primary"> </VCardItem>
{{ formatFileSize(storage) }} <VCardText>
</h5> <h5 class="text-2xl font-weight-medium text-primary">
<p class="mt-2">已使用 {{ usedPercent }}% 🚀</p> {{ formatFileSize(storage) }}
<p class="mt-1"> </h5>
<VProgressLinear :model-value="usedPercent" color="primary" /> <p class="mt-2">已使用 {{ usedPercent }}% 🚀</p>
</p> <p class="mt-1">
</VCardText> <VProgressLinear :model-value="usedPercent" color="primary" />
</p>
</VCardText>
<!-- Trophy --> <!-- Trophy -->
<VImg :src="trophy" class="trophy" /> <VImg :src="trophy" class="trophy" />
</VCard> </VCard>
</template>
</VHover>
</template> </template>
<style lang="scss"> <style lang="scss">
src/views/dashboard/AnalyticsWeeklyOverview.vue
+22 -18
View File
@@ -110,25 +110,29 @@ onMounted(() => {
</script> </script>
<template> <template>
<VCard> <VHover>
<VCardItem> <template #default="hover">
<template #append> <VCard v-bind="hover.props">
<VIcon class="cursor-move">mdi-drag</VIcon> <VCardItem>
</template> <template #append>
<VCardTitle>最近入库</VCardTitle> <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</VCardItem> </template>
<VCardTitle>最近入库</VCardTitle>
</VCardItem>
<VCardText> <VCardText>
<VueApexCharts type="bar" :options="options" :series="series" :height="160" /> <VueApexCharts type="bar" :options="options" :series="series" :height="160" />
<div class="d-flex align-center mb-3"> <div class="d-flex align-center mb-3">
<h5 class="text-h5 me-4"> <h5 class="text-h5 me-4">
{{ totalCount }} {{ totalCount }}
</h5> </h5>
<p>最近一周入库了 {{ totalCount }} 部影片 😎</p> <p>最近一周入库了 {{ totalCount }} 部影片 😎</p>
</div> </div>
<VBtn v-if="superUser" block to="/history"> 查看详情 </VBtn> <VBtn v-if="superUser" block to="/history"> 查看详情 </VBtn>
</VCardText> </VCardText>
</VCard> </VCard>
</template>
</VHover>
</template> </template>
src/views/dashboard/MediaServerLatest.vue
+15 -11
View File
@@ -21,18 +21,22 @@ onMounted(() => {
</script> </script>
<template> <template>
<VCard> <VHover>
<VCardItem> <template #default="hover">
<template #append> <VCard v-bind="hover.props">
<VIcon class="cursor-move">mdi-drag</VIcon> <VCardItem>
</template> <template #append>
<VCardTitle >最近添加</VCardTitle> <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</VCardItem> </template>
<VCardTitle >最近添加</VCardTitle>
</VCardItem>
<div v-if="latestList.length > 0" class="grid gap-4 grid-media-card mx-3 mb-3" tabindex="0"> <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" /> <PosterCard v-for="data in latestList" :key="data.id" :media="data" />
</div> </div>
</VCard> </VCard>
</template>
</VHover>
</template> </template>
<style lang="scss"> <style lang="scss">
src/views/dashboard/MediaServerLibrary.vue
+15 -11
View File
@@ -21,18 +21,22 @@ onMounted(() => {
</script> </script>
<template> <template>
<VCard> <VHover>
<VCardItem> <template #default="hover">
<template #append> <VCard v-bind="hover.props">
<VIcon class="cursor-move">mdi-drag</VIcon> <VCardItem>
</template> <template #append>
<VCardTitle >我的媒体库</VCardTitle> <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</VCardItem> </template>
<VCardTitle >我的媒体库</VCardTitle>
</VCardItem>
<div v-if="libraryList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0"> <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" /> <LibraryCard v-for="data in libraryList" :key="data.id" :media="data" height="10rem" />
</div> </div>
</VCard> </VCard>
</template>
</VHover>
</template> </template>
<style lang="scss"> <style lang="scss">
src/views/dashboard/MediaServerPlaying.vue
+15 -11
View File
@@ -21,18 +21,22 @@ onMounted(() => {
</script> </script>
<template> <template>
<VCard> <VHover>
<VCardItem> <template #default="hover">
<template #append> <VCard v-bind="hover.props">
<VIcon class="cursor-move">mdi-drag</VIcon> <VCardItem>
</template> <template #append>
<VCardTitle>继续观看</VCardTitle> <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</VCardItem> </template>
<VCardTitle>继续观看</VCardTitle>
</VCardItem>
<div v-if="playingList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0"> <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" /> <BackdropCard v-for="data in playingList" :key="data.id" :media="data" height="10rem" />
</div> </div>
</VCard> </VCard>
</template>
</VHover>
</template> </template>
<style lang="scss"> <style lang="scss">