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

优化SlideView和Footer组件

Browse Source
This commit is contained in:
jxxghp
2025-04-28 14:05:24 +08:00
parent dca5885ef1
commit 51f7694788
4 changed files with 80 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/slide/SlideView.vue
+39 -31
View File
@@ -1,6 +1,10 @@
<script lang="ts" setup>
import SlideViewTitle from '@/components/slide/SlideViewTitle.vue'
import { ref, onMounted, onUnmounted, inject, computed } from 'vue'
import { useDisplay } from 'vuetify'
// 判断是否可以触摸
const display = useDisplay()
const isTouch = computed(() => display.mobile.value)
// 元素
const slideview_content = ref<HTMLElement | null>(null)
@@ -142,26 +146,32 @@ onActivated(() => {
</div>
<!-- 左侧导航按钮 -->
<button
<VBtn
class="nav-button nav-button-left"
@click.stop="slideNext(false)"
v-show="disabled !== 0 && disabled !== 3"
v-show="disabled !== 0 && disabled !== 3 && !isTouch"
variant="text"
icon
color="secondary"
>
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
</svg>
</button>
</VBtn>
<!-- 右侧导航按钮 -->
<button
<VBtn
class="nav-button nav-button-right"
@click.stop="slideNext(true)"
v-show="disabled !== 2 && disabled !== 3"
v-show="disabled !== 2 && disabled !== 3 && !isTouch"
variant="text"
icon
color="secondary"
>
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
</button>
</VBtn>
</div>
</div>
</template>
@@ -189,26 +199,27 @@ onActivated(() => {
.view-all-button {
.arrow-svg {
fill: currentColor;
fill: currentcolor;
margin-inline-start: 2px;
transition: transform 0.3s ease;
margin-left: 2px;
}
display: inline-flex;
flex-shrink: 0;
align-items: center;
border-radius: 8px;
padding: 5px 12px;
background-color: transparent;
color: rgb(var(--v-theme-primary));
font-size: 0.85rem;
font-weight: 500;
padding-block: 5px;
padding-inline: 12px;
text-decoration: none;
transition: all 0.25s ease;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.08);
border-color: rgba(var(--v-theme-primary), 0.5);
background-color: rgba(var(--v-theme-primary), 0.08);
transform: translateY(-1px);
.arrow-svg {
@@ -234,40 +245,37 @@ onActivated(() => {
.nav-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(var(--v-theme-background), 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
padding: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50%;
backdrop-filter: blur(8px);
background-color: rgba(var(--v-theme-background), 0.3);
block-size: 36px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 8%);
cursor: pointer;
z-index: 20;
color: rgb(var(--v-theme-on-surface));
inline-size: 36px;
inset-block-start: 50%;
opacity: 0;
pointer-events: none;
transform: translateY(-50%);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease,
box-shadow 0.3s ease, border-color 0.3s ease;
svg {
fill: currentColor;
block-size: 22px;
fill: currentcolor;
filter: none;
inline-size: 22px;
opacity: 0.7;
transition: all 0.3s ease;
width: 22px;
height: 22px;
filter: none;
}
&:hover {
background-color: rgba(var(--v-theme-background), 0.95);
transform: translateY(-50%) scale(1.05);
color: rgb(var(--v-theme-primary));
transform: translateY(-50%) scale(1.05);
svg {
opacity: 1;
@@ -276,11 +284,11 @@ onActivated(() => {
}
.nav-button-left {
left: 8px;
inset-inline-start: 8px;
}
.nav-button-right {
right: 8px;
inset-inline-end: 8px;
}
.slider-content {
src/layouts/components/Footer.vue
+20 -5
View File
@@ -6,7 +6,10 @@ import { useI18n } from 'vue-i18n'
const display = useDisplay()
const appMode = inject('pwaMode') && display.mdAndDown.value
const { t } = useI18n()
const { t, locale } = useI18n()
// 判断当前是否为英文环境
const isEnglish = computed(() => locale.value === 'en-US')
const route = useRoute()
@@ -114,8 +117,8 @@ const showDynamicButton = computed(() => {
:value="menu.to"
>
<div class="btn-content">
<VIcon :icon="menu.icon" size="24"></VIcon>
<span class="text-xs">{{ menu.title }}</span>
<VIcon :icon="menu.icon" :size="isEnglish ? 32 : 24"></VIcon>
<span v-if="!isEnglish" class="text-xs">{{ menu.title }}</span>
</div>
</VBtn>
@@ -131,8 +134,8 @@ const showDynamicButton = computed(() => {
value="/apps"
>
<div class="btn-content">
<VIcon icon="mdi-dots-horizontal" size="24"></VIcon>
<span class="btn-text">{{ t('nav.more') }}</span>
<VIcon icon="mdi-dots-horizontal" :size="isEnglish ? 32 : 24"></VIcon>
<span v-if="!isEnglish" class="btn-text">{{ t('nav.more') }}</span>
</div>
</VBtn>
</VBtnToggle>
@@ -222,6 +225,18 @@ const showDynamicButton = computed(() => {
flex-direction: column;
align-items: center;
justify-content: center;
inline-size: 100%;
span {
overflow: hidden;
font-size: 0.75rem;
max-inline-size: 100%;
scale: var(--text-scale, 1);
text-overflow: ellipsis;
transform-origin: center;
transition: scale 0.2s ease;
white-space: nowrap;
}
}
}
src/layouts/components/HeaderTab.vue
+20 -40
View File
@@ -37,15 +37,13 @@ const showRightButton = ref(false)
const scrollTabs = (direction: 'left' | 'right') => {
const el = tabsContainerRef.value
if (!el) return
const scrollAmount = 200 // 可以根据需要调整滚动量
const scrollPosition = direction === 'left'
? el.scrollLeft - scrollAmount
: el.scrollLeft + scrollAmount
const scrollPosition = direction === 'left' ? el.scrollLeft - scrollAmount : el.scrollLeft + scrollAmount
el.scrollTo({
left: scrollPosition,
behavior: 'smooth'
behavior: 'smooth',
})
}
@@ -93,16 +91,10 @@ onUnmounted(() => {
</script>
<template>
<div class="tab-header rounded-t-lg">
<VBtn
v-if="showLeftButton"
class="scroll-button left-button"
@click="scrollTabs('left')"
variant="text"
icon
>
<VIcon icon="tabler-chevron-left" size="small" />
<VBtn v-if="showLeftButton" class="scroll-button left-button" @click="scrollTabs('left')" variant="text" icon>
<VIcon icon="tabler-chevron-left" size="small" color="secondary" />
</VBtn>
<div ref="tabsContainerRef" class="header-tabs" :class="{ 'show-indicator': showTabsScrollIndicator }">
<div
v-for="(item, index) in items"
@@ -115,17 +107,11 @@ onUnmounted(() => {
<span>{{ item.title }}</span>
</div>
</div>
<VBtn
v-if="showRightButton"
class="scroll-button right-button"
@click="scrollTabs('right')"
variant="text"
icon
>
<VIcon icon="tabler-chevron-right" size="small" />
<VBtn v-if="showRightButton" class="scroll-button right-button" @click="scrollTabs('right')" variant="text" icon>
<VIcon icon="tabler-chevron-right" size="small" color="secondary" />
</VBtn>
<slot name="append" />
</div>
</template>
@@ -145,30 +131,24 @@ onUnmounted(() => {
}
.scroll-button {
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
height: 28px;
width: 28px;
border-radius: 50%;
background-color: rgba(var(--v-theme-primary), 0.1);
color: rgb(var(--v-theme-primary));
cursor: pointer;
border: none;
border-radius: 50%;
block-size: 28px;
cursor: pointer;
inline-size: 28px;
outline: none;
z-index: 2;
transition: background-color 0.2s ease;
&:hover {
background-color: rgba(var(--v-theme-primary), 0.2);
}
&.left-button {
margin-right: 6px;
margin-inline-end: 6px;
}
&.right-button {
margin-left: 6px;
margin-inline-start: 6px;
}
}
src/pages/login.vue
+1 -6
View File
@@ -180,12 +180,7 @@ onMounted(async () => {
<div class="relative flex min-h-screen flex-col items-center justify-center">
<!-- 登录表单 -->
<div class="auth-wrapper d-flex align-center justify-center">
<VCard
class="auth-card px-7 py-3 w-full h-full"
:class="{ 'opacity-75': globalTheme.name.value !== 'transparent' }"
max-width="24rem"
border
>
<VCard class="auth-card px-7 py-3 w-full h-full" max-width="24rem" border>
<VCardItem class="justify-center">
<template #prepend>
<div class="d-flex pe-0">