mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-05-17 02:07:29 +08:00
✨ feat: 添加迷你模式功能,支持迷你窗口的显示与隐藏,更新设置项以控制迷你播放栏和歌词显示,优化路由管理以适应迷你模式
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user