mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-30 21:00:43 +08:00
优化探索页UI
This commit is contained in:
madrays
@@ -429,7 +429,7 @@ function onRemoveSubscribe() {
|
||||
v-bind="hover.props"
|
||||
:height="props.height"
|
||||
:width="props.width"
|
||||
class="outline-none shadow ring-gray-500"
|
||||
class="outline-none shadow ring-gray-500 media-card"
|
||||
:class="{
|
||||
'transition transform-cpu duration-300 -translate-y-1 shadow-lg': hover.isHovering,
|
||||
'ring-1': isImageLoaded,
|
||||
@@ -450,6 +450,7 @@ function onRemoveSubscribe() {
|
||||
</div>
|
||||
</template>
|
||||
</VImg>
|
||||
|
||||
<!-- 详情 -->
|
||||
<VCardText
|
||||
v-show="hover.isHovering || imageLoadError || searchMenuShow"
|
||||
@@ -532,3 +533,15 @@ function onRemoveSubscribe() {
|
||||
@close="chooseSiteDialog = false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.media-card {
|
||||
position: relative;
|
||||
transition: transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.03);
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,8 @@ const display = useDisplay()
|
||||
|
||||
// 元素
|
||||
const slideview_content = ref()
|
||||
// 分页切换状态
|
||||
const sliderContainer = ref()
|
||||
// 分页切换状态: 0-左边不可用 1-两边可用 2-右边不可用 3-两边都不可用
|
||||
const disabled = ref(0)
|
||||
// 记录滚动值
|
||||
const slideview_scrollLeft = ref(0)
|
||||
@@ -21,6 +22,10 @@ let card_width: number
|
||||
let card_max: number
|
||||
// 当前定位
|
||||
let card_current: number
|
||||
// 是否鼠标悬停在容器上
|
||||
const isHovering = ref(false)
|
||||
// 获取传入的链接地址
|
||||
const props: any = inject('rankingPropsKey', { linkurl: '', title: '' })
|
||||
|
||||
// 分页切换
|
||||
function slideNext(next: boolean) {
|
||||
@@ -30,12 +35,10 @@ function slideNext(next: boolean) {
|
||||
run_to_left_px = card_index * card_width
|
||||
if (run_to_left_px >= slideview_content.value.scrollWidth - slideview_content.value.clientWidth)
|
||||
run_to_left_px = slideview_content.value.scrollWidth - slideview_content.value.clientWidth
|
||||
// console.log(`最多显示: ${card_max} 当前起点: ${card_current} 目标起点: ${card_index} 卡片宽度: ${card_width}`)
|
||||
} else {
|
||||
const card_index = card_current - card_max
|
||||
run_to_left_px = card_index * card_width
|
||||
if (run_to_left_px <= 0) run_to_left_px = 0
|
||||
// console.log(`最多显示: ${card_max} 当前起点: ${card_current} 目标起点: ${card_index} 卡片宽度: ${card_width}`)
|
||||
}
|
||||
slideview_content.value.scrollTo({
|
||||
top: 0,
|
||||
@@ -46,6 +49,7 @@ function slideNext(next: boolean) {
|
||||
|
||||
// 计算最大显示数量
|
||||
function countMaxNumber() {
|
||||
if (!slideview_content.value || !slideview_content.value.firstElementChild) return
|
||||
slide_card_length = slideview_content.value.children.length
|
||||
card_width = slideview_content.value.firstElementChild.getBoundingClientRect().width
|
||||
slide_gap_px = slideview_content.value.scrollWidth / slide_card_length - card_width
|
||||
@@ -71,6 +75,21 @@ function countDisabled() {
|
||||
else disabled.value = 1
|
||||
}
|
||||
|
||||
// 处理鼠标进入
|
||||
function handleMouseEnter() {
|
||||
isHovering.value = true
|
||||
}
|
||||
|
||||
// 处理鼠标离开
|
||||
function handleMouseLeave() {
|
||||
isHovering.value = false
|
||||
}
|
||||
|
||||
// 检测是否有足够内容可显示
|
||||
const hasEnoughContent = computed(() => {
|
||||
return slide_card_length > card_max
|
||||
})
|
||||
|
||||
// 组件加载完成
|
||||
onMounted(() => {
|
||||
// 初次获取元素参数
|
||||
@@ -78,61 +97,222 @@ onMounted(() => {
|
||||
// 窗口大小发生改变时
|
||||
window.addEventListener('resize', countMaxNumber)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
// 卸载事件
|
||||
window.removeEventListener('resize', countMaxNumber)
|
||||
})
|
||||
|
||||
onActivated(() => {
|
||||
if (slideview_scrollLeft.value !== 0) {
|
||||
// console.log(`onActivated: to_scrollLeft, ${slideview_scrollLeft.value}`)
|
||||
slideview_content.value.scrollLeft = slideview_scrollLeft.value
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex justify-between mt-3">
|
||||
<slot name="title">
|
||||
<SlideViewTitle />
|
||||
</slot>
|
||||
<div v-if="disabled !== 3 && display.mdAndUp.value" class="me-1 d-flex">
|
||||
<VBtn
|
||||
class="rounded-circle"
|
||||
variant="text"
|
||||
icon="mdi-chevron-left"
|
||||
color="grey"
|
||||
:disabled="disabled === 0"
|
||||
@click="slideNext(false)"
|
||||
/>
|
||||
<VBtn
|
||||
class="rounded-circle"
|
||||
variant="text"
|
||||
icon="mdi-chevron-right"
|
||||
color="grey"
|
||||
:disabled="disabled === 2"
|
||||
@click="slideNext(true)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
ref="slideview_content"
|
||||
class="slideview_content grid grid-rows-1 grid-flow-col justify-start gap-4 p-3"
|
||||
tabindex="0"
|
||||
@scroll="countDisabled"
|
||||
<div
|
||||
ref="sliderContainer"
|
||||
class="slider-container"
|
||||
@mouseenter="handleMouseEnter"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<slot name="content" />
|
||||
<div class="slider-header">
|
||||
<slot name="title">
|
||||
<SlideViewTitle />
|
||||
</slot>
|
||||
|
||||
<!-- 查看全部按钮 -->
|
||||
<RouterLink
|
||||
v-if="props.linkurl"
|
||||
:to="props.linkurl"
|
||||
class="view-all-button"
|
||||
>
|
||||
<span>全部</span>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" class="arrow-svg">
|
||||
<path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
|
||||
</svg>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<div class="slider-content-wrapper">
|
||||
<div class="slider-content-container">
|
||||
<div
|
||||
ref="slideview_content"
|
||||
class="slider-content"
|
||||
tabindex="0"
|
||||
@scroll="countDisabled"
|
||||
>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 左侧导航按钮 -->
|
||||
<button
|
||||
class="nav-button nav-button-left"
|
||||
@click.stop="slideNext(false)"
|
||||
v-show="isHovering && disabled !== 0 && disabled !== 3"
|
||||
>
|
||||
<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>
|
||||
|
||||
<!-- 右侧导航按钮 -->
|
||||
<button
|
||||
class="nav-button nav-button-right"
|
||||
@click.stop="slideNext(true)"
|
||||
v-show="isHovering && disabled !== 2 && disabled !== 3"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slideview_content {
|
||||
.slider-container {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
// 移除padding，按钮放置在外部
|
||||
}
|
||||
|
||||
.slider-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
padding: 0 8px;
|
||||
gap: 16px;
|
||||
|
||||
& > :first-child {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.view-all-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
color: rgb(var(--v-theme-primary));
|
||||
background-color: rgba(var(--v-theme-primary), 0.1);
|
||||
padding: 4px 10px;
|
||||
border-radius: 16px;
|
||||
transition: all 0.25s ease;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--v-theme-primary), 0.15);
|
||||
box-shadow: 0 2px 8px rgba(var(--v-theme-primary), 0.1);
|
||||
transform: translateY(-1px);
|
||||
|
||||
.arrow-svg {
|
||||
transform: translateX(2px);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.arrow-svg {
|
||||
transition: transform 0.3s ease;
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.slider-content-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slider-content-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(var(--v-theme-surface), 0.9);
|
||||
border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
|
||||
backdrop-filter: blur(5px);
|
||||
-webkit-backdrop-filter: blur(5px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
z-index: 20;
|
||||
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;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
svg {
|
||||
fill: rgb(var(--v-theme-on-surface));
|
||||
opacity: 0.8;
|
||||
transition: all 0.3s ease;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-50%) scale(1.1);
|
||||
background-color: rgba(var(--v-theme-surface), 1);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
|
||||
border-color: rgba(var(--v-theme-on-surface), 0.15);
|
||||
|
||||
svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-button-left {
|
||||
left: -19px; // 半径
|
||||
}
|
||||
|
||||
.nav-button-right {
|
||||
right: -19px; // 半径
|
||||
}
|
||||
|
||||
.slider-content {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-auto-flow: column;
|
||||
justify-content: start;
|
||||
gap: 16px;
|
||||
padding: 8px 12px;
|
||||
overflow: scroll hidden !important;
|
||||
-ms-overflow-style: none !important;
|
||||
overscroll-behavior-x: contain !important;
|
||||
scrollbar-width: none !important;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.slideview_content::-webkit-scrollbar {
|
||||
display: none;
|
||||
.slider-container:hover .nav-button[style*="display: none;"] ~ .nav-button,
|
||||
.slider-container:hover .nav-button {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.nav-button[style*="display: none;"] {
|
||||
opacity: 0 !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,10 +4,41 @@ const props: any = inject('rankingPropsKey')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ms-1">
|
||||
<RouterLink :to="props?.linkurl ? props?.linkurl : ''" class="slider-title">
|
||||
<span>{{ props?.title }}</span>
|
||||
<VIcon icon="mdi-arrow-right-circle-outline" class="ms-1" />
|
||||
</RouterLink>
|
||||
<div class="title-wrapper">
|
||||
<div class="title-section">
|
||||
<div class="title-badge"></div>
|
||||
<h3 class="title-text">{{ props?.title }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title-badge {
|
||||
width: 3px;
|
||||
height: 16px;
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
margin-right: 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.title-text {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: rgba(var(--v-theme-on-background), 0.95);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -8,6 +8,35 @@ import { useDisplay } from 'vuetify'
|
||||
const display = useDisplay()
|
||||
const appMode = inject('pwaMode') && display.mdAndDown.value
|
||||
|
||||
// 当前选择的分类
|
||||
const currentCategory = ref('电影')
|
||||
|
||||
// 定义分类类型
|
||||
type CategoryType = '电影' | '电视剧' | '动漫' | '榜单'
|
||||
type CategoryMap = Record<CategoryType, Array<{apipath: string; linkurl: string; title: string}>>
|
||||
|
||||
// 预处理的分类视图数据
|
||||
const categoryViewsMap = reactive<CategoryMap>({
|
||||
电影: [],
|
||||
电视剧: [],
|
||||
动漫: [],
|
||||
榜单: []
|
||||
})
|
||||
|
||||
// 按分类过滤视图的映射
|
||||
const getCategoryForView = (title: string): CategoryType => {
|
||||
if (title.includes('电影') || title.includes('热映') || (title.includes('TOP250') && !title.includes('剧集'))) {
|
||||
return '电影'
|
||||
} else if (title.includes('电视剧') || (title.includes('剧集') && !title.includes('动漫'))) {
|
||||
return '电视剧'
|
||||
} else if (title.includes('动漫') || title.includes('Bangumi')) {
|
||||
return '动漫'
|
||||
} else if (title.includes('TOP') || title.includes('榜') || title.includes('趋势')) {
|
||||
return '榜单'
|
||||
}
|
||||
return '电影' // 默认分类
|
||||
}
|
||||
|
||||
const viewList = reactive<{ apipath: string; linkurl: string; title: string }[]>([
|
||||
{
|
||||
apipath: 'recommend/tmdb_trending',
|
||||
@@ -76,8 +105,10 @@ const viewList = reactive<{ apipath: string; linkurl: string; title: string }[]>
|
||||
},
|
||||
])
|
||||
|
||||
// 计算启用的视图
|
||||
const enabledViews = computed(() => viewList.filter(item => enableConfig.value[item.title]))
|
||||
// 计算当前分类下显示的视图
|
||||
const filteredViews = computed(() => {
|
||||
return categoryViewsMap[currentCategory.value as CategoryType]
|
||||
})
|
||||
|
||||
// 榜单启用配置， 以title为key
|
||||
const enableConfig = ref<{ [key: string]: boolean }>({
|
||||
@@ -90,6 +121,21 @@ const dialog = ref(false)
|
||||
// 额外的数据源
|
||||
const extraRecommendSources = ref<RecommendSource[]>([])
|
||||
|
||||
// 分类视图
|
||||
function updateCategoryViews() {
|
||||
// 清空所有分类
|
||||
(Object.keys(categoryViewsMap) as CategoryType[]).forEach(category => {
|
||||
categoryViewsMap[category] = []
|
||||
})
|
||||
|
||||
// 先把所有启用的视图按照分类归类
|
||||
const enabledViews = viewList.filter(item => enableConfig.value[item.title])
|
||||
enabledViews.forEach(view => {
|
||||
const category = getCategoryForView(view.title)
|
||||
categoryViewsMap[category].push(view)
|
||||
})
|
||||
}
|
||||
|
||||
// 加载额外的发现数据源
|
||||
async function loadExtraRecommendSources() {
|
||||
try {
|
||||
@@ -102,6 +148,8 @@ async function loadExtraRecommendSources() {
|
||||
title: source.name,
|
||||
})),
|
||||
)
|
||||
// 添加新视图后更新分类
|
||||
updateCategoryViews()
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
@@ -121,6 +169,8 @@ async function loadConfig() {
|
||||
localStorage.setItem('MP_RECOMMEND', JSON.stringify(response.data.value))
|
||||
}
|
||||
}
|
||||
// 配置加载后更新分类
|
||||
updateCategoryViews()
|
||||
}
|
||||
|
||||
// 设置项目
|
||||
@@ -136,6 +186,21 @@ async function saveConfig() {
|
||||
console.error(error)
|
||||
}
|
||||
dialog.value = false
|
||||
|
||||
// 保存后更新分类
|
||||
updateCategoryViews()
|
||||
}
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({top: 0, behavior: 'smooth'})
|
||||
}
|
||||
|
||||
// 标签图标映射
|
||||
const categoryIcons: Record<CategoryType, string> = {
|
||||
电影: 'mdi-movie',
|
||||
电视剧: 'mdi-television-classic',
|
||||
动漫: 'mdi-animation',
|
||||
榜单: 'mdi-trophy'
|
||||
}
|
||||
|
||||
onBeforeMount(async () => {
|
||||
@@ -149,48 +214,495 @@ onMounted(async () => {
|
||||
onActivated(async () => {
|
||||
loadExtraRecommendSources()
|
||||
})
|
||||
|
||||
// 监听分类变更，平滑过渡
|
||||
watch(currentCategory, () => {
|
||||
// 当分类变更时，应用渐变动画
|
||||
const contentGroups = document.querySelectorAll('.content-group')
|
||||
contentGroups.forEach(group => {
|
||||
group.classList.add('fade-transition')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<MediaCardSlideView v-for="item in enabledViews" :key="item.title" v-bind="item" />
|
||||
<!-- 弹窗，根据配置生成选项 -->
|
||||
<VDialog v-if="dialog" v-model="dialog" max-width="35rem" scrollable>
|
||||
<VCard>
|
||||
<VCardItem>
|
||||
<VCardTitle>设置推荐榜单</VCardTitle>
|
||||
<div class="mp-recommend">
|
||||
<!-- 页面顶部控制栏 -->
|
||||
<div class="recommend-header">
|
||||
<div class="header-tabs">
|
||||
<div
|
||||
v-for="(category, idx) in ['电影', '电视剧', '动漫', '榜单']"
|
||||
:key="idx"
|
||||
class="header-tab"
|
||||
:class="{ 'active': currentCategory === category }"
|
||||
@click="currentCategory = category"
|
||||
>
|
||||
<VIcon
|
||||
:icon="categoryIcons[category as CategoryType]"
|
||||
size="small"
|
||||
class="header-tab-icon"
|
||||
/>
|
||||
<span>{{ category }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="tune-button"
|
||||
@click="dialog = true"
|
||||
>
|
||||
<div class="tune-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<span class="tune-text">显示设置</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 滚动内容区域 -->
|
||||
<div class="recommend-content">
|
||||
<TransitionGroup name="fade">
|
||||
<MediaCardSlideView
|
||||
v-for="item in filteredViews"
|
||||
:key="item.title"
|
||||
v-bind="item"
|
||||
class="content-group"
|
||||
/>
|
||||
</TransitionGroup>
|
||||
|
||||
<div v-if="filteredViews.length === 0" class="empty-category">
|
||||
<VIcon icon="mdi-alert-circle-outline" size="large" class="empty-icon" />
|
||||
<p class="empty-text">当前分类下没有可显示的内容</p>
|
||||
<VBtn
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
size="small"
|
||||
@click="dialog = true"
|
||||
>
|
||||
设置显示内容
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 设置面板 -->
|
||||
<VDialog v-model="dialog" width="500" class="settings-dialog" scrollable>
|
||||
<VCard class="settings-card">
|
||||
<VCardItem class="settings-card-header">
|
||||
<VCardTitle>
|
||||
<VIcon icon="mdi-tune" size="small" class="me-2" />
|
||||
自定义内容
|
||||
</VCardTitle>
|
||||
<template #append>
|
||||
<VBtn icon="mdi-close" variant="text" @click="dialog = false" />
|
||||
</template>
|
||||
</VCardItem>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<VCardText>
|
||||
<VRow>
|
||||
<VCol v-for="item in viewList" :key="item.title" cols="6" md="4" sm="4">
|
||||
<VCheckbox v-model="enableConfig[item.title]" :label="item.title" />
|
||||
</VCol>
|
||||
</VRow>
|
||||
<p class="settings-hint">选择您想在页面显示的内容</p>
|
||||
|
||||
<div class="settings-grid">
|
||||
<div
|
||||
v-for="(item, index) in viewList"
|
||||
:key="index"
|
||||
class="setting-item"
|
||||
:class="{
|
||||
'enabled': enableConfig[item.title],
|
||||
[getCategoryForView(item.title)]: true
|
||||
}"
|
||||
@click="enableConfig[item.title] = !enableConfig[item.title]"
|
||||
>
|
||||
<div class="setting-item-inner">
|
||||
<div class="setting-check">
|
||||
<VIcon
|
||||
:icon="enableConfig[item.title] ? 'mdi-check-circle' : 'mdi-circle-outline'"
|
||||
:color="enableConfig[item.title] ? 'primary' : undefined"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
<span class="setting-label">{{ item.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<VDivider />
|
||||
<VCardText class="pt-5 text-end">
|
||||
<VSpacer />
|
||||
<VBtn variant="outlined" color="secondary" class="me-4" @click="dialog = false"> 关闭 </VBtn>
|
||||
<VBtn @click="saveConfig">
|
||||
<template #prepend>
|
||||
<VIcon icon="mdi-content-save" />
|
||||
</template>
|
||||
保存
|
||||
|
||||
<VCardActions>
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="Object.keys(enableConfig).forEach(key => enableConfig[key] = true)"
|
||||
>
|
||||
全选
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
<VBtn
|
||||
variant="text"
|
||||
@click="Object.keys(enableConfig).forEach(key => enableConfig[key] = false)"
|
||||
>
|
||||
全不选
|
||||
</VBtn>
|
||||
<VSpacer />
|
||||
<VBtn variant="text" @click="dialog = false">取消</VBtn>
|
||||
<VBtn
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
@click="saveConfig"
|
||||
>
|
||||
保存设置
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
|
||||
<!-- 快速滚动到顶部按钮 -->
|
||||
<div class="global-action-buttons">
|
||||
<button
|
||||
class="global-action-button"
|
||||
@click="scrollToTop"
|
||||
>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 14L12 9L17 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 底部操作按钮 -->
|
||||
<VFab
|
||||
icon="mdi-text-box-edit"
|
||||
location="bottom"
|
||||
size="x-large"
|
||||
fixed
|
||||
app
|
||||
appear
|
||||
@click="dialog = true"
|
||||
:class="{ 'mb-12': appMode }"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mp-recommend {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.recommend-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 16px;
|
||||
background-color: rgba(var(--v-theme-primary), 0.02);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(var(--v-theme-primary), 0.1);
|
||||
}
|
||||
|
||||
.header-tabs {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
padding: 4px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.header-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: all 0.2s ease;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
color: rgba(var(--v-theme-on-background), 0.7);
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scaleX(0);
|
||||
width: 70%;
|
||||
height: 3px;
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
border-radius: 3px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
|
||||
&::after {
|
||||
transform: translateX(-50%) scaleX(1);
|
||||
}
|
||||
|
||||
.header-tab-icon {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
|
||||
&:hover:not(.active) {
|
||||
color: rgba(var(--v-theme-on-background), 1);
|
||||
background-color: rgba(var(--v-theme-primary), 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.header-tab-icon {
|
||||
margin-right: 6px;
|
||||
transition: color 0.2s ease;
|
||||
color: rgba(var(--v-theme-on-background), 0.6);
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
min-width: auto;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.recommend-content {
|
||||
padding: 0 8px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.empty-category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 300px;
|
||||
background-color: rgba(var(--v-theme-surface), 0.5);
|
||||
border-radius: 12px;
|
||||
margin: 20px 0;
|
||||
border: 1px dashed rgba(var(--v-theme-on-surface), 0.1);
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
opacity: 0.5;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: rgba(var(--v-theme-on-surface), 0.6);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.content-group {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.settings-card {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-card-header {
|
||||
background-color: rgba(var(--v-theme-primary), 0.03);
|
||||
}
|
||||
|
||||
.settings-hint {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--v-theme-on-surface), 0.6);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.settings-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
cursor: pointer;
|
||||
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&.enabled {
|
||||
.setting-item-inner {
|
||||
background-color: rgba(var(--v-theme-primary), 0.08);
|
||||
border-color: rgba(var(--v-theme-primary), 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
&.电影 .setting-item-inner {
|
||||
border-left: 3px solid #3b82f6;
|
||||
}
|
||||
|
||||
&.电视剧 .setting-item-inner {
|
||||
border-left: 3px solid #6366f1;
|
||||
}
|
||||
|
||||
&.动漫 .setting-item-inner {
|
||||
border-left: 3px solid #a855f7;
|
||||
}
|
||||
|
||||
&.榜单 .setting-item-inner {
|
||||
border-left: 3px solid #f59e0b;
|
||||
}
|
||||
}
|
||||
|
||||
.setting-item-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
background-color: rgba(var(--v-theme-surface), 1);
|
||||
border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 2px 8px rgba(var(--v-theme-on-surface), 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
.setting-check {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.setting-label {
|
||||
font-size: 0.9rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.global-action-buttons {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.global-action-button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background-color: rgba(var(--v-theme-surface), 0.8);
|
||||
border: 1px solid rgba(var(--v-theme-on-surface), 0.1);
|
||||
border-radius: 50%;
|
||||
backdrop-filter: blur(6px);
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
color: rgb(var(--v-theme-on-surface));
|
||||
opacity: 0.7;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(var(--v-theme-surface), 0.95);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
|
||||
opacity: 1;
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
svg {
|
||||
transition: all 0.3s ease;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease, transform 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
.fade-move {
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-transition {
|
||||
animation: fadeInOut 0.5s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeInOut {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.tune-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(var(--v-theme-primary), 0.1);
|
||||
border: none;
|
||||
border-radius: 30px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
color: rgb(var(--v-theme-primary));
|
||||
|
||||
&:hover {
|
||||
background: rgba(var(--v-theme-primary), 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(var(--v-theme-primary), 0.2);
|
||||
}
|
||||
|
||||
.tune-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
justify-content: space-between;
|
||||
margin-right: 8px;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
height: 2px;
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:nth-child(1) {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tune-text {
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
&:hover .tune-icon span {
|
||||
&:nth-child(1) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
1
src/types/colorthief.d.ts
vendored
Normal file
1
src/types/colorthief.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
Reference in New Issue
Block a user