GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-04 23:18:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化主题切换器和用户通知组件样式，添加文件大小显示，调整布局和样式变量

Browse Source
This commit is contained in:
jxxghp
2025-04-08 13:32:36 +08:00
parent 34a33f87b2
commit 6e1503334e
7 changed files with 87 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/@core/components/ThemeSwitcher.vue
+6 -3
View File
@@ -196,9 +196,9 @@ onMounted(() => {
</IconBtn> </IconBtn>
</template> </template>
<VList elevation="0" class="theme-switcher-list"> <VList elevation="0" class="theme-switcher-list">
<div class="theme-switcher-header py-1 mb-2"> <VCardItem class="theme-switcher-header">
<VCardTitle class="font-weight-medium text-primary">主题选择</VCardTitle> <VCardTitle class="font-weight-medium text-primary">主题选择</VCardTitle>
</div> </VCardItem>
<div class="theme-switcher-options px-2"> <div class="theme-switcher-options px-2">
<VListItem <VListItem
@@ -258,7 +258,10 @@ onMounted(() => {
<style lang="scss"> <style lang="scss">
.theme-switcher-header { .theme-switcher-header {
border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.05); background: linear-gradient(to right, rgba(var(--v-theme-primary), 0.04), rgba(var(--v-theme-primary), 0.01));
border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
padding-block: 12px;
padding-inline: 16px;
} }
.theme-switcher-options { .theme-switcher-options {
src/@layouts/components/VerticalNavLayout.vue
+7 -7
View File
@@ -101,6 +101,13 @@ export default defineComponent({
@use '@layouts/styles/placeholders'; @use '@layouts/styles/placeholders';
@use '@layouts/styles/mixins'; @use '@layouts/styles/mixins';
.layout-page-content {
position: relative;
z-index: 1;
margin-block-start: 0;
padding-block-start: 0;
}
.layout-wrapper.layout-nav-type-vertical { .layout-wrapper.layout-nav-type-vertical {
// TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav // TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
block-size: 100%; block-size: 100%;
@@ -208,11 +215,4 @@ export default defineComponent({
padding-inline-start: 0; padding-inline-start: 0;
} }
} }
.layout-page-content {
position: relative;
z-index: 1;
margin-block-start: calc(variables.$layout-vertical-nav-navbar-height - 42px);
padding-block-start: 0;
}
</style> </style>
src/api/types.ts
+2
View File
@@ -188,6 +188,8 @@ export interface TransferHistory {
errmsg?: string errmsg?: string
// 日期 // 日期
date?: string date?: string
// 源文件项
src_fileitem?: FileItem
} }
// 媒体信息 // 媒体信息
src/layouts/components/UserNotification.vue
+3 -1
View File
@@ -106,8 +106,10 @@ onBeforeUnmount(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.notification-header { .notification-header {
padding: 16px; background: linear-gradient(to right, rgba(var(--v-theme-primary), 0.04), rgba(var(--v-theme-primary), 0.01));
border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08); border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
padding-block: 12px;
padding-inline: 16px;
} }
.notification-list { .notification-list {
src/layouts/components/UserProfile.vue
+49 -49
View File
@@ -86,7 +86,7 @@ const userLevel = computed(() => userStore.level)
<VImg :src="avatar" /> <VImg :src="avatar" />
<VMenu activator="parent" width="230" location="bottom end" offset="14px" class="user-menu"> <VMenu activator="parent" width="230" location="bottom end" offset="14px" class="user-menu">
<VList elevation="0" class="user-profile-list px-2"> <VList elevation="0" class="overflow-hidden">
<!-- 👉 User Avatar & Name --> <!-- 👉 User Avatar & Name -->
<div class="user-profile-header px-2 py-4 mb-2"> <div class="user-profile-header px-2 py-4 mb-2">
<div class="d-flex align-center"> <div class="d-flex align-center">
@@ -103,59 +103,59 @@ const userLevel = computed(() => userStore.level)
</div> </div>
</div> </div>
</div> </div>
<div class="px-2">
<!-- 👉 Profile -->
<VListItem link @click="router.push('/profile')" class="user-menu-item mb-1">
<template #prepend>
<div class="user-menu-icon">
<VIcon icon="mdi-account-outline" />
</div>
</template>
<VListItemTitle>个人信息</VListItemTitle>
</VListItem>
<!-- 👉 Profile --> <VListItem link @click="router.push('/apps')" class="user-menu-item mb-1">
<VListItem link @click="router.push('/profile')" class="user-menu-item mb-1"> <template #prepend>
<template #prepend> <div class="user-menu-icon">
<div class="user-menu-icon"> <VIcon icon="mdi-view-grid-outline" />
<VIcon icon="mdi-account-outline" /> </div>
</div> </template>
</template> <VListItemTitle>功能视图</VListItemTitle>
<VListItemTitle>个人信息</VListItemTitle> </VListItem>
</VListItem>
<VListItem link @click="router.push('/apps')" class="user-menu-item mb-1"> <!-- 👉 Site Auth -->
<template #prepend> <VListItem v-if="userLevel < 2 && superUser" link @click="showSiteAuthDialog" class="user-menu-item mb-1">
<div class="user-menu-icon"> <template #prepend>
<VIcon icon="mdi-view-grid-outline" /> <div class="user-menu-icon">
</div> <VIcon icon="mdi-lock-check-outline" />
</template> </div>
<VListItemTitle>功能视图</VListItemTitle> </template>
</VListItem> <VListItemTitle>用户认证</VListItemTitle>
</VListItem>
<!-- 👉 Site Auth --> <!-- 👉 FAQ -->
<VListItem v-if="userLevel < 2 && superUser" link @click="showSiteAuthDialog" class="user-menu-item mb-1"> <VListItem href="https://wiki.movie-pilot.org" target="_blank" class="user-menu-item mb-1">
<template #prepend> <template #prepend>
<div class="user-menu-icon"> <div class="user-menu-icon">
<VIcon icon="mdi-lock-check-outline" /> <VIcon icon="mdi-help-circle-outline" />
</div> </div>
</template> </template>
<VListItemTitle>用户认证</VListItemTitle> <VListItemTitle>帮助文档</VListItemTitle>
</VListItem> </VListItem>
<!-- 👉 FAQ --> <!-- Divider -->
<VListItem href="https://wiki.movie-pilot.org" target="_blank" class="user-menu-item mb-1"> <VDivider v-if="superUser" class="my-3" />
<template #prepend>
<div class="user-menu-icon">
<VIcon icon="mdi-help-circle-outline" />
</div>
</template>
<VListItemTitle>帮助文档</VListItemTitle>
</VListItem>
<!-- Divider -->
<VDivider v-if="superUser" class="my-3" />
<!-- 👉 restart -->
<VListItem v-if="superUser" @click="showRestartDialog" class="user-menu-item mb-1">
<template #prepend>
<div class="user-menu-icon restart-icon">
<VIcon icon="mdi-restart" />
</div>
</template>
<VListItemTitle>重启</VListItemTitle>
</VListItem>
<!-- 👉 restart -->
<VListItem v-if="superUser" @click="showRestartDialog" class="user-menu-item mb-1">
<template #prepend>
<div class="user-menu-icon restart-icon">
<VIcon icon="mdi-restart" />
</div>
</template>
<VListItemTitle>重启</VListItemTitle>
</VListItem>
</div>
<!-- 👉 Logout --> <!-- 👉 Logout -->
<div class="px-2 mt-3 mb-2"> <div class="px-2 mt-3 mb-2">
<VBtn color="error" block class="logout-btn" @click="logout"> <VBtn color="error" block class="logout-btn" @click="logout">
src/styles/styles.scss
+1 -1
View File
@@ -285,7 +285,7 @@ html.v-overlay-scroll-blocked body {
} }
.v-overlay__content .v-list{ .v-overlay__content .v-list{
padding: 4px !important; padding: 0;
margin: 0 !important; margin: 0 !important;
background-color: rgb(var(--v-theme-surface)) !important; background-color: rgb(var(--v-theme-surface)) !important;
} }
src/views/reorganize/TransferHistoryView.vue
+19 -4
View File
@@ -10,6 +10,7 @@ import { useRoute } from 'vue-router'
import router from '@/router' import router from '@/router'
import { useDisplay } from 'vuetify' import { useDisplay } from 'vuetify'
import { storageDict } from '@/api/constants' import { storageDict } from '@/api/constants'
import { formatFileSize } from '@/@core/utils/formatters'
// APP // APP
const display = useDisplay() const display = useDisplay()
@@ -57,6 +58,11 @@ const headers = [
key: 'mode', key: 'mode',
sortable: true, sortable: true,
}, },
{
title: '大小',
key: 'size',
sortable: true,
},
{ {
title: '时间', title: '时间',
key: 'date', key: 'date',
@@ -91,6 +97,11 @@ const groupHeaders = [
key: 'mode', key: 'mode',
sortable: true, sortable: true,
}, },
{
title: '大小',
key: 'size',
sortable: true,
},
{ {
title: '时间', title: '时间',
key: 'date', key: 'date',
@@ -415,7 +426,7 @@ onMounted(fetchData)
</script> </script>
<template> <template>
<VCard> <VCard class="bg-transparent">
<VCardItem> <VCardItem>
<VCardTitle> <VCardTitle>
<VRow> <VRow>
@@ -523,6 +534,9 @@ onMounted(fetchData)
</template> </template>
</VTooltip> </VTooltip>
</template> </template>
<template #item.size="{ item }">
<small>{{ formatFileSize(item?.src_fileitem?.size || 0) }}</small>
</template>
<template #item.date="{ item }"> <template #item.date="{ item }">
<small>{{ item?.date }}</small> <small>{{ item?.date }}</small>
</template> </template>
@@ -607,6 +621,9 @@ onMounted(fetchData)
</template> </template>
</VTooltip> </VTooltip>
</template> </template>
<template #item.size="{ item }">
<small>{{ formatFileSize(item?.src_fileitem?.size || 0) }}</small>
</template>
<template #item.date="{ item }"> <template #item.date="{ item }">
<small>{{ item?.date }}</small> <small>{{ item?.date }}</small>
</template> </template>
@@ -633,11 +650,9 @@ onMounted(fetchData)
</template> </template>
<template #no-data> 没有数据 </template> <template #no-data> 没有数据 </template>
</VDataTableVirtual> </VDataTableVirtual>
<!-- 分页 -->
<VDivider />
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="w-auto"> <div class="w-auto">
<VSelect v-model="itemsPerPage" :items="pageRange" density="compact" variant="solo" flat /> <VSelect v-model="itemsPerPage" :items="pageRange" density="compact" variant="plain" flat />
</div> </div>
<div class="w-auto text-sm">{{ pageTip.begin }} - {{ pageTip.end }} / {{ totalItems }}</div> <div class="w-auto text-sm">{{ pageTip.begin }} - {{ pageTip.end }} / {{ totalItems }}</div>
<VPagination <VPagination