-
- {{ props?.title }}
-
-
+
+
+
diff --git a/src/pages/recommend.vue b/src/pages/recommend.vue
index fe92d87c..350b3ac5 100644
--- a/src/pages/recommend.vue
+++ b/src/pages/recommend.vue
@@ -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
>
+
+// 预处理的分类视图数据
+const categoryViewsMap = reactive({
+ 电影: [],
+ 电视剧: [],
+ 动漫: [],
+ 榜单: []
+})
+
+// 按分类过滤视图的映射
+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([])
+// 分类视图
+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 = {
+ 电影: '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')
+ })
+})
-
-
-
-
-
-
- 设置推荐榜单
+
+
+
+
+
+
+
+
+
+
+
+
+
当前分类下没有可显示的内容
+
+ 设置显示内容
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+ 选择您想在页面显示的内容
+
+
+
+
+
+
+
+
{{ item.title }}
+
+
+
+
+
+