-
+
+ +
+ + +
+
@@ -30,8 +50,50 @@ import SideBar from './components/layout/SideBar.vue'; import WindowControls from './components/layout/WindowControls.vue'; import PlayerBar from './components/layout/PlayerBar.vue'; import SettingsOverlay from "./components/layout/SettingsOverlay.vue"; +import { Icon } from '@iconify/vue'; +import { ref, watch, onMounted } from 'vue'; +import { useRouter, useRoute } from 'vue-router'; const store = usePlayerStore(); +const router = useRouter(); +const route = useRoute(); + +// 跟踪路由历史，判断是否可以返回和前进 +const canGoBack = ref(true); // 返回按钮始终可用，让浏览器处理 +const canGoForward = ref(false); + +// 记录之前的路由路径 +const previousPath = ref(route.path); + +// 监听路由变化，更新前进按钮状态 +watch( + () => route.path, + (newPath) => { + // 当从歌单页返回主页时，前进按钮应该可用 + if (newPath === '/' && previousPath.value.startsWith('/playlist/')) { + canGoForward.value = true; + } else if (newPath.startsWith('/playlist/')) { + // 当进入歌单页时，前进按钮不可用 + canGoForward.value = false; + } + // 更新之前的路径 + previousPath.value = newPath; + }, + { immediate: true } +); + +// 监听返回和前进事件 +const handleBack = () => { + router.back(); +}; + +const handleForward = () => { + if (canGoForward.value) { + router.forward(); + // 前进后前进按钮可能不可用，具体取决于历史记录 + canGoForward.value = false; + } +}; diff --git a/src/main.ts b/src/main.ts index 95e90bd..9151ccb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,15 +5,17 @@ import { createRouter, createWebHashHistory } from 'vue-router' import App from './App.vue' import HomeView from './views/HomeView.vue' +import PlaylistDetailView from './views/PlaylistDetailView.vue' -import ElementPlus from 'element-plus' -import 'element-plus/dist/index.css' +import TDesign from 'tdesign-vue-next' +import 'tdesign-vue-next/es/style/index.css' const pinia = createPinia() const router = createRouter({ history: createWebHashHistory(), routes: [ { path: '/', component: HomeView }, + { path: '/playlist/:id', component: PlaylistDetailView }, // 可扩展其他路由 ] }) @@ -21,5 +23,5 @@ const router = createRouter({ const app = createApp(App) app.use(pinia) app.use(router) -app.use(ElementPlus) +app.use(TDesign) app.mount('#app') diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index bbbd5ba..3ab1e43 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -261,17 +261,22 @@ const playlistData = ref([ ]); +import { useRouter } from 'vue-router'; + +const router = useRouter(); + const handlePlayListClick = (item: any) => { - console.log("跳转到歌单详情:", item.id); + router.push(`/playlist/${item.id}`); }; \ No newline at end of file