feat: 添加专辑浏览功能并优化侧边栏

在Home.vue中添加专辑浏览功能，显示专辑封面。将类型定义从apis/index.ts移动到vite-env.d.ts中以便全局使用。优化Sidebar.vue中的导航链接样式，添加图标。更新manifest.json以允许加载特定域名的图片资源。

public/manifest.json

@@ -21,7 +21,7 @@
 	},
 	"permissions": ["tabs", "webRequest"],
   "content_security_policy": {
-    "extension_pages": "default-src 'self'; script-src 'self' http://localhost:5173; style-src 'self' 'unsafe-inline'; connect-src 'self' ws://localhost:5173 https://monster-siren.hypergryph.com;",
+    "extension_pages": "default-src 'self'; script-src 'self' http://localhost:5173; style-src 'self' 'unsafe-inline'; connect-src 'self' ws://localhost:5173 https://monster-siren.hypergryph.com; img-src 'self' https://web.hycdn.cn;",
     "sandbox": "sandbox"
   }
 }

src/apis/index.ts

@@ -4,39 +4,6 @@ const msrInstance = axios.create({
 	baseURL: 'https://monster-siren.hypergryph.com/api/',
 })
 
-type SongList = {
-	list: Song[]
-}
-
-type Song = {
-  cid: string
-  name: string
-  albumCid: string
-  sourceUrl?: string
-  lyricUrl?: string | null
-  mvUrl?: string | null
-  mvCoverUrl?: string | null
-  artists: string[]
-}
-
-type Album = {
-  cid: string
-  name: string
-  intro?: string
-  belong?: string
-  coverUrl: string
-  coverDeUrl?: string
-  artistes: string[]
-}
-
-type AlbumList = Album[]
-
-interface ApiResponse {
-	code: number
-	msg: string
-	data: unknown
-}
-
 export default {
 	async getSongs() {
 		const songs: {

src/components/Sidebar.vue

@@ -8,10 +8,20 @@
 			<div class="font-semibold text-white/50 text-xs mb-2">音乐库</div>
 			<ul class="flex flex-col gap-1">
 				<li>
-					<RouterLink to="/"><div class="text-sm px-2 py-1 hover:bg-white/5 w-full text-left rounded-md">最新音乐</div></RouterLink>
+					<RouterLink to="/">
+						<div class="text-sm px-2 py-1 hover:bg-white/5 w-full text-left rounded-md">
+							<i class="ri-fire-line" />
+							<span>浏览</span>
+						</div>
+					</RouterLink>
 				</li>
 				<li>
-					<RouterLink to="/feelinglucky"><div class="text-sm px-2 py-1 hover:bg-white/5 w-full text-left rounded-md">手气不错</div></RouterLink>
+					<RouterLink to="/feelinglucky">
+						<div class="text-sm px-2 py-1 hover:bg-white/5 w-full text-left rounded-md">
+							<i class="ri-dice-5-line" />
+							<span>手气不错</span>
+						</div>
+					</RouterLink>
 				</li>
 			</ul>
 		</div>

src/pages/Home.vue

@@ -1,13 +1,22 @@
 <script setup lang="ts">
 import apis from '../apis'
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
+
+const albums = ref([] as AlbumList)
 
 onMounted(async () => {
 	const res = await apis.getAlbums()
-	console.log(res)
+	albums.value = res
 })
 </script>
 
 <template>
-	<div class="text-white">hello</div>
+	<div class="text-white flex flex-col gap-4 mb-16">
+		<h1 class="text-4xl font-semibold pt-8 px-4 sticky top-0 bg-gradient-to-b from-[#00000080] to-transparent">浏览</h1>
+		<div class="grid grid-cols-5">
+			<div v-for="album in albums" :key="album.cid">
+				<img :src="album.coverUrl" />
+			</div>
+		</div>
+	</div>
 </template>

src/vite-env.d.ts

@@ -1 +1,34 @@
 /// <reference types="vite/client" />
+
+type SongList = {
+	list: Song[]
+}
+
+type Song = {
+  cid: string
+  name: string
+  albumCid: string
+  sourceUrl?: string
+  lyricUrl?: string | null
+  mvUrl?: string | null
+  mvCoverUrl?: string | null
+  artists: string[]
+}
+
+type Album = {
+  cid: string
+  name: string
+  intro?: string
+  belong?: string
+  coverUrl: string
+  coverDeUrl?: string
+  artistes: string[]
+}
+
+type AlbumList = Album[]
+
+interface ApiResponse {
+	code: number
+	msg: string
+	data: unknown
+}