From df01f1a579aebf3921f6ae5721b84e6e9082e2f4 Mon Sep 17 00:00:00 2001
From: Astrian Zheng <happy.wheel6743@astrian.moe>
Date: Sat, 24 May 2025 11:26:00 +1000
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=B8=93=E8=BE=91?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=8A=9F=E8=83=BD=E5=B9=B6=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在Home.vue中添加专辑浏览功能，显示专辑封面。将类型定义从apis/index.ts移动到vite-env.d.ts中以便全局使用。优化Sidebar.vue中的导航链接样式，添加图标。更新manifest.json以允许加载特定域名的图片资源。
---
 public/manifest.json       |  2 +-
 src/apis/index.ts          | 33 ---------------------------------
 src/components/Sidebar.vue | 14 ++++++++++++--
 src/pages/Home.vue         | 15 ++++++++++++---
 src/vite-env.d.ts          | 33 +++++++++++++++++++++++++++++++++
 5 files changed, 58 insertions(+), 39 deletions(-)

diff --git a/public/manifest.json b/public/manifest.json
index f38ee04..80914d9 100644
--- a/public/manifest.json
+++ b/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"
   }
 }
diff --git a/src/apis/index.ts b/src/apis/index.ts
index c6c34d9..9d5f66b 100644
--- a/src/apis/index.ts
+++ b/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: {
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 3502cdd..aaa68f2 100644
--- a/src/components/Sidebar.vue
+++ b/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>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index fc23982..a72cb58 100644
--- a/src/pages/Home.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 11f02fe..b3b9c63 100644
--- a/src/vite-env.d.ts
+++ b/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
+}
\ No newline at end of file