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