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

更新 Vuetify 默认设置，修改菜单图标，调整样式变量，优化用户资料组件样式

Browse Source
This commit is contained in:
jxxghp
2025-04-08 12:24:52 +08:00
parent 03d885d391
commit 34a33f87b2
15 changed files with 218 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/layouts/components/ShortcutBar.vue
View File

@@ -111,8 +111,8 @@ onMounted(() => {
location="top end"
origin="top end"
transition="scale-transition"
:close-on-content-click="false"
:close-on-back="true"
close-on-content-click
close-on-back
>
<!-- Menu Activator -->
<template #activator="{ props }">
@@ -302,20 +302,19 @@ onMounted(() => {
<style lang="scss" scoped>
.shortcut-menu-card {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(var(--v-theme-on-surface), 0.12), 0 4px 12px rgba(var(--v-theme-on-surface), 0.08) !important;
border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
}
.shortcut-header {
background: linear-gradient(to right, rgba(var(--v-theme-primary), 0.04), rgba(var(--v-theme-primary), 0.01));
border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.08);
padding: 12px 16px;
border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
padding-block: 12px;
padding-inline: 16px;
}
.shortcut-close-btn {
transition: transform 0.3s ease;
&:hover {
transform: rotate(90deg);
}
@@ -327,58 +326,54 @@ onMounted(() => {
.shortcut-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
.shortcut-item {
display: flex;
align-items: center;
padding: 16px;
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
background-color: rgba(var(--v-theme-surface));
border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
position: relative;
z-index: 1;
display: flex;
overflow: hidden;
align-items: center;
padding: 16px;
border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
border-radius: 12px;
background-color: rgba(var(--v-theme-surface));
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
&::before {
content: '';
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.08) 0%, rgba(var(--v-theme-primary), 0) 60%);
content: '';
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
&:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(var(--v-theme-on-surface), 0.12);
border-color: rgba(var(--v-theme-primary), 0.15);
transform: translateY(-4px);
&::before {
opacity: 1;
}
.shortcut-icon-wrapper {
transform: scale(1.1);
background-color: rgba(var(--v-theme-primary), 0.12);
transform: scale(1.1);
.v-icon {
transform: scale(1.2);
}
}
}
&:active {
transform: translateY(0);
box-shadow: 0 3px 10px rgba(var(--v-theme-on-surface), 0.08);
transform: translateY(0);
}
}
@@ -386,16 +381,16 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background-color: rgba(var(--v-theme-primary), 0.08);
margin-right: 16px;
block-size: 48px;
inline-size: 48px;
margin-inline-end: 16px;
transition: all 0.3s ease;
.v-icon {
transition: transform 0.3s ease;
color: rgba(var(--v-theme-primary), 1);
transition: transform 0.3s ease;
}
}
@@ -404,14 +399,14 @@ onMounted(() => {
}
.shortcut-title {
font-weight: 600;
font-size: 1rem;
margin-bottom: 4px;
color: rgba(var(--v-theme-on-surface), 0.95);
font-size: 1rem;
font-weight: 600;
margin-block-end: 4px;
}
.shortcut-subtitle {
font-size: 0.8rem;
color: rgba(var(--v-theme-on-surface), 0.7);
font-size: 0.8rem;
}
</style>

141
src/layouts/components/UserNotification.vue
View File

@@ -40,76 +40,6 @@ onBeforeUnmount(() => {
})
</script>
<style lang="scss" scoped>
.notification-header {
border-bottom: 1px solid rgba(var(--v-theme-on-surface), 0.08);
padding: 16px;
.v-card-title {
font-size: 1.1rem;
font-weight: 600;
color: rgba(var(--v-theme-primary), 0.9);
}
}
.notification-list {
max-height: 500px;
overflow-y: auto;
padding: 8px;
}
.notification-item {
border-radius: 12px;
margin-bottom: 8px;
transition: all 0.2s ease;
border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
&:hover {
background-color: rgba(var(--v-theme-primary), 0.03);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(var(--v-theme-on-surface), 0.06);
}
.notification-avatar {
background-color: rgba(var(--v-theme-primary), 0.1);
box-shadow: 0 4px 8px rgba(var(--v-theme-primary), 0.15);
}
.notification-title {
font-weight: 600;
font-size: 0.95rem;
}
.notification-text {
font-size: 0.85rem;
color: rgba(var(--v-theme-on-surface), 0.75);
margin-top: 6px;
}
.notification-time {
font-size: 0.8rem;
color: rgba(var(--v-theme-primary), 0.8);
margin-top: 6px;
}
}
.no-notification {
padding: 30px 0;
color: rgba(var(--v-theme-on-surface), 0.6);
font-size: 0.95rem;
}
.mark-read-btn {
transition: all 0.2s ease;
border-radius: 8px;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.1);
transform: scale(1.05);
}
}
</style>
<template>
<VMenu v-model="appsMenu" width="400" transition="scale-transition" close-on-content-click class="notification-menu">
<!-- Menu Activator -->
@@ -126,7 +56,7 @@ onBeforeUnmount(() => {
<!-- Menu Content -->
<VCard elevation="0">
<VCardItem class="notification-header">
<VCardTitle>通知中心</VCardTitle>
<VCardTitle class="font-weight-medium text-primary">通知中心</VCardTitle>
<template #append>
<VTooltip text="设为已读">
<template #activator="{ props }">
@@ -173,3 +103,72 @@ onBeforeUnmount(() => {
</VCard>
</VMenu>
</template>
<style lang="scss" scoped>
.notification-header {
padding: 16px;
border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
}
.notification-list {
padding: 8px;
max-block-size: 500px;
overflow-y: auto;
}
.notification-item {
border: 1px solid rgba(var(--v-theme-on-surface), 0.05);
border-radius: 12px;
margin-block-end: 8px;
transition: all 0.2s ease;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.03);
box-shadow: 0 4px 8px rgba(var(--v-theme-on-surface), 0.06);
transform: translateY(-2px);
}
.notification-avatar {
background-color: rgba(var(--v-theme-primary), 0.1);
box-shadow: 0 4px 8px rgba(var(--v-theme-primary), 0.15);
}
.notification-title {
font-size: 0.95rem;
font-weight: 600;
}
.notification-text {
color: rgba(var(--v-theme-on-surface), 0.75);
font-size: 0.85rem;
margin-block-start: 6px;
}
.notification-time {
color: rgba(var(--v-theme-primary), 0.8);
font-size: 0.8rem;
margin-block-start: 6px;
}
}
.no-notification {
color: rgba(var(--v-theme-on-surface), 0.6);
font-size: 0.95rem;
padding-block: 30px;
padding-inline: 0;
}
.mark-read-btn {
border-radius: 8px;
transition: all 0.2s ease;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.1);
transform: scale(1.05);
}
}
.notification-menu .v-overlay__content {
overflow: hidden;
}
</style>

33
src/layouts/components/UserProfile.vue
View File

@@ -197,32 +197,32 @@ const userLevel = computed(() => userStore.level)
<style lang="scss" scoped>
.user-profile-header {
background: linear-gradient(135deg, rgba(var(--v-theme-primary), 0.05), rgba(var(--v-theme-primary), 0.02));
border-radius: 12px;
}
.user-role {
font-size: 0.875rem;
color: rgba(var(--v-theme-primary), 0.9);
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 4px;
margin-block-end: 4px;
}
.user-name {
color: rgba(var(--v-theme-on-surface), 0.9);
font-size: 1.125rem;
font-weight: 600;
color: rgba(var(--v-theme-on-surface), 0.9);
}
.user-avatar {
box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.2);
border: 2px solid rgba(var(--v-theme-on-surface), 0.1);
box-shadow: 0 4px 12px rgba(var(--v-theme-primary), 0.2);
}
.user-menu-item {
border-radius: 8px;
margin: 4px 0;
margin-block: 4px;
margin-inline: 0;
transition: all 0.2s ease;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.06);
transform: translateX(4px);
@@ -233,13 +233,13 @@ const userLevel = computed(() => userStore.level)
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 8px;
background-color: rgba(var(--v-theme-primary), 0.08);
margin-right: 12px;
block-size: 36px;
inline-size: 36px;
margin-inline-end: 12px;
transition: all 0.2s ease;
.v-icon {
color: rgba(var(--v-theme-primary), 0.9);
}
@@ -247,17 +247,22 @@ const userLevel = computed(() => userStore.level)
.restart-icon {
background-color: rgba(var(--v-theme-error), 0.1);
.v-icon {
color: rgba(var(--v-theme-error), 0.9);
}
}
.logout-btn {
border-radius: 10px;
padding: 12px;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(var(--v-theme-error), 0.2);
font-weight: 500;
letter-spacing: 0.5px;
box-shadow: 0 4px 12px rgba(var(--v-theme-error), 0.2);
}
.user-menu .v-overlay__content {
border-radius: 8px !important;
box-shadow: 0 4px 12px rgba(var(--v-theme-on-surface), 0.08) !important;
}
</style>