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

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'" /> <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?.attrs?.title ?? props.config?.name }} {{ props.config?.attrs?.title ?? 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>
</VHover>
</template> </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>
@@ -136,4 +138,6 @@ onUnmounted(() => {
<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
+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>
@@ -82,4 +84,6 @@ onMounted(() => {
</VRow> </VRow>
</VCardText> </VCardText>
</VCard> </VCard>
</template>
</VHover>
</template> </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>
@@ -142,4 +144,6 @@ onUnmounted(() => {
<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
+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>
@@ -77,6 +79,8 @@ onUnmounted(() => {
</VList> </VList>
</VCardText> </VCardText>
</VCard> </VCard>
</template>
</VHover>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
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>
@@ -114,6 +116,8 @@ onUnmounted(() => {
</VList> </VList>
</VCardText> </VCardText>
</VCard> </VCard>
</template>
</VHover>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
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>
@@ -61,6 +63,8 @@ onMounted(() => {
<!-- 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
+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>
@@ -131,4 +133,6 @@ onMounted(() => {
<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
+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>
@@ -33,6 +35,8 @@ onMounted(() => {
<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
+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>
@@ -33,6 +35,8 @@ onMounted(() => {
<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
+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>
@@ -33,6 +35,8 @@ onMounted(() => {
<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">