GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-08 17:26:41 +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
+7 -3
View File
@@ -40,10 +40,12 @@ onUnmounted(() => {
<MediaServerPlaying v-else-if="config?.id === 'playing'" />
<MediaServerLatest v-else-if="config?.id === 'latest'" />
<!-- 插件仪表板 -->
<VCard v-else-if="!isNullOrEmptyObject(props.config)">
<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">mdi-drag</VIcon>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>
{{ props.config?.attrs?.title ?? props.config?.name }}
@@ -53,8 +55,10 @@ onUnmounted(() => {
<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">
<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>
src/views/dashboard/AnalyticsCpu.vue
+6 -2
View File
@@ -123,10 +123,12 @@ onUnmounted(() => {
</script>
<template>
<VCard>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>CPU</VCardTitle>
</VCardItem>
@@ -137,3 +139,5 @@ onUnmounted(() => {
</VCardText>
</VCard>
</template>
</VHover>
</template>
src/views/dashboard/AnalyticsMediaStatistic.vue
+6 -2
View File
@@ -53,10 +53,12 @@ onMounted(() => {
</script>
<template>
<VCard>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>媒体统计</VCardTitle>
</VCardItem>
@@ -83,3 +85,5 @@ onMounted(() => {
</VCardText>
</VCard>
</template>
</VHover>
</template>
src/views/dashboard/AnalyticsMemory.vue
+6 -2
View File
@@ -129,10 +129,12 @@ onUnmounted(() => {
</script>
<template>
<VCard>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>内存</VCardTitle>
</VCardItem>
@@ -143,3 +145,5 @@ onUnmounted(() => {
</VCardText>
</VCard>
</template>
</VHover>
</template>
src/views/dashboard/AnalyticsScheduler.vue
+6 -2
View File
@@ -38,10 +38,12 @@ onUnmounted(() => {
</script>
<template>
<VCard>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>后台任务</VCardTitle>
</VCardItem>
@@ -78,6 +80,8 @@ onUnmounted(() => {
</VCardText>
</VCard>
</template>
</VHover>
</template>
<style lang="scss" scoped>
.card-list {
src/views/dashboard/AnalyticsSpeed.vue
+6 -2
View File
@@ -80,10 +80,12 @@ onUnmounted(() => {
</script>
<template>
<VCard>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>实时速率</VCardTitle>
</VCardItem>
@@ -115,6 +117,8 @@ onUnmounted(() => {
</VCardText>
</VCard>
</template>
</VHover>
</template>
<style lang="scss" scoped>
.card-list {
src/views/dashboard/AnalyticsStorage.vue
+6 -2
View File
@@ -39,12 +39,14 @@ onMounted(() => {
</script>
<template>
<VCard>
<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">mdi-drag</VIcon>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>存储空间</VCardTitle>
</VCardItem>
@@ -62,6 +64,8 @@ onMounted(() => {
<VImg :src="trophy" class="trophy" />
</VCard>
</template>
</VHover>
</template>
<style lang="scss">
@use '@layouts/styles/mixins' as layoutsMixins;
src/views/dashboard/AnalyticsWeeklyOverview.vue
+6 -2
View File
@@ -110,10 +110,12 @@ onMounted(() => {
</script>
<template>
<VCard>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>最近入库</VCardTitle>
</VCardItem>
@@ -132,3 +134,5 @@ onMounted(() => {
</VCardText>
</VCard>
</template>
</VHover>
</template>
src/views/dashboard/MediaServerLatest.vue
+6 -2
View File
@@ -21,10 +21,12 @@ onMounted(() => {
</script>
<template>
<VCard>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle >最近添加</VCardTitle>
</VCardItem>
@@ -34,6 +36,8 @@ onMounted(() => {
</div>
</VCard>
</template>
</VHover>
</template>
<style lang="scss">
.grid-media-card {
src/views/dashboard/MediaServerLibrary.vue
+6 -2
View File
@@ -21,10 +21,12 @@ onMounted(() => {
</script>
<template>
<VCard>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle >我的媒体库</VCardTitle>
</VCardItem>
@@ -34,6 +36,8 @@ onMounted(() => {
</div>
</VCard>
</template>
</VHover>
</template>
<style lang="scss">
.grid-backdrop-card {
src/views/dashboard/MediaServerPlaying.vue
+6 -2
View File
@@ -21,10 +21,12 @@ onMounted(() => {
</script>
<template>
<VCard>
<VHover>
<template #default="hover">
<VCard v-bind="hover.props">
<VCardItem>
<template #append>
<VIcon class="cursor-move">mdi-drag</VIcon>
<VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
</template>
<VCardTitle>继续观看</VCardTitle>
</VCardItem>
@@ -34,6 +36,8 @@ onMounted(() => {
</div>
</VCard>
</template>
</VHover>
</template>
<style lang="scss">
.grid-backdrop-card {