GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-07-04 14:01:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(dashboard): enhance layout and responsiveness of dashboard components

Browse Source
This commit is contained in:
jxxghp
2026-06-06 17:56:44 +08:00
parent 63e28b76c8
commit e2722801e4
12 changed files with 180 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -139,8 +139,10 @@ useKeepAliveRefresh(refresh)
<VCardItem>
<VCardTitle>CPU</VCardTitle>
</VCardItem>
<VCardText>
<VApexChart type="line" :options="chartOptions" :series="series" :height="150" />
<VCardText class="dashboard-chart-content">
<div class="dashboard-chart-plot">
<VApexChart type="line" :options="chartOptions" :series="series" height="100%" />
</div>
<p class="text-center font-weight-medium mb-0">{{ t('dashboard.current') }}：{{ current }}%</p>
</VCardText>
</VCard>
@@ -149,7 +151,21 @@ useKeepAliveRefresh(refresh)
</template>
<style scoped>
.dashboard-chart-card {
min-block-size: 256px;
.dashboard-chart-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-block-size: 0;
}
.dashboard-chart-plot {
flex: 1 1 auto;
min-block-size: 0;
}
.dashboard-chart-plot :deep(.vue-apexcharts),
.dashboard-chart-plot :deep(.apexcharts-canvas),
.dashboard-chart-plot :deep(svg) {
block-size: 100% !important;
}
</style>

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

@@ -85,9 +85,3 @@ onActivated(() => {
</template>
</VHover>
</template>
<style scoped>
.dashboard-summary-card {
min-block-size: 160px;
}
</style>

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

@@ -144,8 +144,10 @@ useKeepAliveRefresh(refresh)
<VCardItem>
<VCardTitle>{{ t('dashboard.memory') }}</VCardTitle>
</VCardItem>
<VCardText>
<VApexChart type="area" :options="chartOptions" :series="series" :height="150" />
<VCardText class="dashboard-chart-content">
<div class="dashboard-chart-plot">
<VApexChart type="area" :options="chartOptions" :series="series" height="100%" />
</div>
<p class="text-center font-weight-medium mb-0">{{ t('dashboard.current') }}：{{ formatBytes(usedMemory) }}</p>
</VCardText>
</VCard>
@@ -154,7 +156,21 @@ useKeepAliveRefresh(refresh)
</template>
<style scoped>
.dashboard-chart-card {
min-block-size: 256px;
.dashboard-chart-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-block-size: 0;
}
.dashboard-chart-plot {
flex: 1 1 auto;
min-block-size: 0;
}
.dashboard-chart-plot :deep(.vue-apexcharts),
.dashboard-chart-plot :deep(.apexcharts-canvas),
.dashboard-chart-plot :deep(svg) {
block-size: 100% !important;
}
</style>

24
src/views/dashboard/AnalyticsNetwork.vue
View File

@@ -177,8 +177,10 @@ useKeepAliveRefresh(refresh)
<VCardItem>
<VCardTitle>{{ t('dashboard.network') }}</VCardTitle>
</VCardItem>
<VCardText>
<VApexChart type="line" :options="chartOptions" :series="series" :height="150" />
<VCardText class="dashboard-chart-content">
<div class="dashboard-chart-plot">
<VApexChart type="line" :options="chartOptions" :series="series" height="100%" />
</div>
<div class="d-flex justify-space-between">
<p class="text-center font-weight-medium mb-0">
<span class="text-warning">{{ t('dashboard.upload') }}</span
@@ -196,7 +198,21 @@ useKeepAliveRefresh(refresh)
</template>
<style scoped>
.dashboard-chart-card {
min-block-size: 256px;
.dashboard-chart-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-block-size: 0;
}
.dashboard-chart-plot {
flex: 1 1 auto;
min-block-size: 0;
}
.dashboard-chart-plot :deep(.vue-apexcharts),
.dashboard-chart-plot :deep(.apexcharts-canvas),
.dashboard-chart-plot :deep(svg) {
block-size: 100% !important;
}
</style>

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

@@ -51,8 +51,8 @@ useDataRefresh(
<VCardTitle>{{ t('dashboard.scheduler') }}</VCardTitle>
</VCardItem>
<VCardText>
<VList class="card-list" height="260">
<VCardText class="dashboard-work-content">
<VList class="card-list">
<VListItem v-for="item in schedulerList" :key="item.id">
<template #prepend>
<VAvatar size="40" variant="tonal" color="" class="me-3">
@@ -89,10 +89,17 @@ useDataRefresh(
<style lang="scss" scoped>
.card-list {
--v-card-list-gap: 1.5rem;
flex: 1 1 auto;
min-block-size: 0;
overflow: auto;
}
.dashboard-work-card {
min-block-size: 352px;
.dashboard-work-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-block-size: 0;
}
.card-list::-webkit-scrollbar {

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

@@ -94,7 +94,7 @@ const { loading } = useDataRefresh(
<VCardTitle>{{ t('dashboard.realTimeSpeed') }}</VCardTitle>
</VCardItem>
<VCardText class="pt-4">
<VCardText class="dashboard-work-content 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>
@@ -127,9 +127,16 @@ const { loading } = useDataRefresh(
<style lang="scss" scoped>
.card-list {
--v-card-list-gap: 1rem;
flex: 1 1 auto;
min-block-size: 0;
overflow: auto;
}
.dashboard-work-card {
min-block-size: 352px;
.dashboard-work-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-block-size: 0;
}
</style>

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

@@ -88,7 +88,4 @@ onActivated(() => {
inset-inline-end: 2rem;
}
.dashboard-summary-card {
min-block-size: 160px;
}
</style>

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

@@ -138,8 +138,10 @@ onActivated(() => {
<VCardTitle>{{ t('dashboard.weeklyOverview') }}</VCardTitle>
</VCardItem>
<VCardText>
<VApexChart type="bar" :options="options" :series="series" :height="160" />
<VCardText class="dashboard-work-content">
<div class="dashboard-work-chart">
<VApexChart type="bar" :options="options" :series="series" height="100%" />
</div>
<div class="d-flex align-center mb-3">
<h5 class="text-h5 me-4">
{{ totalCount }}
@@ -155,7 +157,21 @@ onActivated(() => {
</template>
<style scoped>
.dashboard-work-card {
min-block-size: 352px;
.dashboard-work-content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-block-size: 0;
}
.dashboard-work-chart {
flex: 1 1 auto;
min-block-size: 0;
}
.dashboard-work-chart :deep(.vue-apexcharts),
.dashboard-work-chart :deep(.apexcharts-canvas),
.dashboard-work-chart :deep(svg) {
block-size: 100% !important;
}
</style>

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

@@ -60,7 +60,7 @@ onActivated(() => {
<div>
<VHover v-for="(data, name) in latestList" :key="name">
<template #default="hover">
<VCard v-bind="hover.props" class="dashboard-work-card">
<VCard v-bind="hover.props" class="dashboard-work-card dashboard-media-card">
<VCardItem>
<VCardTitle>{{ t('dashboard.latest') }} - {{ name }}</VCardTitle>
</VCardItem>
@@ -87,11 +87,9 @@ onActivated(() => {
<style scoped>
.dashboard-card-grid-wrap {
/* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
min-block-size: 260px;
flex: 1 1 auto;
min-block-size: 0;
overflow: auto;
padding: 0 0.75rem 0.75rem;
}
.dashboard-work-card {
min-block-size: 352px;
}
</style>

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

@@ -63,7 +63,7 @@ onActivated(() => {
<template>
<VHover v-if="libraryList.length > 0">
<template #default="hover">
<VCard v-bind="hover.props">
<VCard v-bind="hover.props" class="dashboard-media-card">
<VCardItem>
<VCardTitle>{{ t('dashboard.library') }}</VCardTitle>
</VCardItem>
@@ -88,6 +88,9 @@ onActivated(() => {
<style scoped>
.dashboard-card-grid-wrap {
/* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
flex: 1 1 auto;
min-block-size: 0;
overflow: auto;
padding: 0 0.75rem 0.75rem;
}
</style>

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

@@ -63,7 +63,7 @@ onActivated(() => {
<template>
<VHover v-if="playingList.length > 0">
<template #default="hover">
<VCard v-bind="hover.props">
<VCard v-bind="hover.props" class="dashboard-media-card">
<VCardItem>
<VCardTitle>{{ t('dashboard.playing') }}</VCardTitle>
</VCardItem>
@@ -89,6 +89,9 @@ onActivated(() => {
<style scoped>
.dashboard-card-grid-wrap {
/* 用内边距提供卡片留白，避免 100% 宽度网格叠加横向外边距后在 iOS 小屏溢出。 */
flex: 1 1 auto;
min-block-size: 0;
overflow: auto;
padding: 0 0.75rem 0.75rem;
}
</style>