feat: 添加专辑详情页并调整路由和导航
新增 AlbumDetail.vue 页面，用于展示专辑详情。调整 Home.vue 中的路由链接，将 `/album` 改为 `/albums`。在 main.ts 中添加新的路由配置 `/albums/:id`。移除 remixicon 依赖，并优化 App.vue 中的导航栏逻辑，添加返回按钮。
This commit is contained in:
parent
2ee428500d
commit
b73748c084
SSH Key Fingerprint:
SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
7
package-lock.json
generated
7
package-lock.json
generated
|
|
@ -10,7 +10,6 @@
|
|||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.7",
|
||||
"axios": "^1.9.0",
|
||||
"remixicon": "^4.6.0",
|
||||
"tailwindcss": "^4.1.7",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.1"
|
||||
|
|
@ -2254,12 +2253,6 @@
|
|||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/remixicon": {
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/remixicon/-/remixicon-4.6.0.tgz",
|
||||
"integrity": "sha512-bKM5odjqE1yzVxEZGJE7F79WHhNrJFIKHXR+GG+P1IWXn8AnJZhl8SbIRDJsNAvIqx4VPkNwjuHfc42tutMDpQ==",
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.41.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.41.0.tgz",
|
||||
|
|
|
|||
|
|
@ -15,7 +15,6 @@
|
|||
"dependencies": {
|
||||
"@tailwindcss/vite": "^4.1.7",
|
||||
"axios": "^1.9.0",
|
||||
"remixicon": "^4.6.0",
|
||||
"tailwindcss": "^4.1.7",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.1"
|
||||
|
|
|
|||
52
src/App.vue
52
src/App.vue
|
|
@ -9,27 +9,39 @@ const route = useRoute()
|
|||
<template>
|
||||
<div class="w-screen h-screen overflow-hidden bg-[#191919]">
|
||||
<div class="flex flex-col w-full h-full overflow-y-auto pb-24">
|
||||
<div class="py-8 px-4 sticky top-0 bg-gradient-to-b from-[#00000080] to-transparent flex justify-between align-center">
|
||||
<ul class="flex gap-4">
|
||||
<li>
|
||||
<RouterLink to="/">
|
||||
<span class="text-4xl" :class="route.path === '/' ? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">浏览</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/lucky" :class="route.path === '/lucky'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
|
||||
<span class="text-4xl">手气不错</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/library" :class="route.path === '/library'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
|
||||
<span class="text-4xl">收藏库</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="py-8 px-4 sticky top-0 bg-gradient-to-b from-[#00000080] to-transparent">
|
||||
<div class="flex justify-between align-center" v-if="(() => {
|
||||
if (route.path === '/lucky' || route.path === '/library' || route.path === '/') { return true }
|
||||
else { return false }
|
||||
})()">
|
||||
<ul class="flex gap-4">
|
||||
<li>
|
||||
<RouterLink to="/">
|
||||
<span class="text-4xl" :class="route.path === '/' ? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">浏览</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/lucky" :class="route.path === '/lucky'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
|
||||
<span class="text-4xl">手气不错</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
<li>
|
||||
<RouterLink to="/library" :class="route.path === '/library'? 'font-semibold text-white' : 'text-white/50 hover:text-white/80'">
|
||||
<span class="text-4xl">收藏库</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<SearchBar />
|
||||
<div>
|
||||
<SearchBar />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between align-center h-[2.625rem] items-center" v-else>
|
||||
<button class="text-white w-8 h-8 bg-white/5 border border-[#ffffff39] rounded-full text-center backdrop-blur-3xl" @click="$router.back()">
|
||||
<div class="w-4 h-4 mx-auto my-auto">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M7.82843 10.9999H20V12.9999H7.82843L13.1924 18.3638L11.7782 19.778L4 11.9999L11.7782 4.22168L13.1924 5.63589L7.82843 10.9999Z"></path></svg>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<RouterView />
|
||||
|
|
|
|||
|
|
@ -3,10 +3,11 @@ import { createWebHashHistory, createRouter } from 'vue-router'
|
|||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import HomePage from './pages/Home.vue'
|
||||
import 'remixicon/fonts/remixicon.css'
|
||||
import AlbumDetailView from './pages/AlbumDetail.vue'
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: HomePage }
|
||||
{ path: '/', component: HomePage },
|
||||
{ path: '/albums/:id', component: AlbumDetailView },
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
|
|
|
|||
3
src/pages/AlbumDetail.vue
Normal file
3
src/pages/AlbumDetail.vue
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<div>album</div>
|
||||
</template>
|
||||
|
|
@ -14,7 +14,7 @@ onMounted(async () => {
|
|||
<div class="text-white flex flex-col gap-8">
|
||||
<div class="grid xl:grid-cols-6 grid-cols-3 lg:grid-cols-4">
|
||||
<div v-for="album in albums" :key="album.cid">
|
||||
<RouterLink :to="`/album/${album.cid}`">
|
||||
<RouterLink :to="`/albums/${album.cid}`">
|
||||
<img :src="album.coverUrl" />
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user