feat: 添加迷你模式功能,支持迷你窗口的显示与隐藏,更新设置项以控制迷你播放栏和歌词显示,优化路由管理以适应迷你模式

This commit is contained in:
alger
2025-04-01 23:22:26 +08:00
parent 8d6d0527db
commit 0f55795ca9
20 changed files with 990 additions and 89 deletions
+40 -1
View File
@@ -1,8 +1,20 @@
import { createRouter, createWebHashHistory } from 'vue-router';
import AppLayout from '@/layout/AppLayout.vue';
import MiniLayout from '@/layout/MiniLayout.vue';
import homeRouter from '@/router/home';
import otherRouter from '@/router/other';
import { useSettingsStore } from '@/store/modules/settings';
// 由于 Vue Router 守卫在创建前不能直接使用组合式 API
// 我们创建一个辅助函数来获取 store 实例
let _settingsStore: ReturnType<typeof useSettingsStore> | null = null;
const getSettingsStore = () => {
if (!_settingsStore) {
_settingsStore = useSettingsStore();
}
return _settingsStore;
};
const loginRouter = {
path: '/login',
@@ -35,10 +47,37 @@ const routes = [
{
path: '/lyric',
component: () => import('@/views/lyric/index.vue')
},
{
path: '/mini',
component: MiniLayout
}
];
export default createRouter({
const router = createRouter({
routes,
history: createWebHashHistory()
});
// 添加全局前置守卫
router.beforeEach((to, from, next) => {
const settingsStore = getSettingsStore();
// 如果是迷你模式
if (settingsStore.isMiniMode) {
// 只允许访问 /mini 路由
if (to.path === '/mini') {
next();
} else {
next(false); // 阻止导航
}
} else if (to.path === '/mini') {
// 如果不是迷你模式但想访问 /mini 路由,重定向到首页
next('/');
} else {
// 其他情况正常导航
next();
}
});
export default router;