feat: 添加RemixIcon字体和MiSans字体支持

- 添加RemixIcon字体库并引入其CSS文件
- 添加MiSans字体文件并在style.css中定义字体样式
- 更新Sidebar组件，增加导航链接和样式
- 调整App.vue中的布局结构

package-lock.json

@@ -10,6 +10,7 @@
 			"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"
@@ -2242,6 +2243,12 @@
 			"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",

package.json

@@ -15,6 +15,7 @@
 	"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"

src/App.vue

@@ -4,11 +4,11 @@ import Playing from './components/Playing.vue'
 </script>
 
 <template>
-<div class="flex overflow-hidden flex-1 w-screen h-screen">
+	<div class="flex overflow-hidden flex-1 w-screen h-screen">
 		<Sidebar />
 		<div class="flex-1 bg-[#070909]">
 			<Playing />
 			<RouterView />
 		</div>
-</div>
+	</div>
 </template>

src/components/Sidebar.vue

@@ -1,3 +1,19 @@
+<script lang="ts" setup>
+	import { RouterLink } from 'vue-router'
+</script>
+
 <template>
-	<div class="bg-[#0c1112] w-56 text-white">aaa</div>
+	<div class="bg-[#0c1112] w-56 text-white p-4">
+		<div>
+			<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>
+				</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>
+				</li>
+			</ul>
+		</div>
+	</div>
 </template>

src/main.ts

@@ -3,6 +3,7 @@ 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'
 
 const routes = [
   { path: '/', component: HomePage }

src/style.css

@@ -1,5 +1,16 @@
 @import "tailwindcss";
+/* 导入来自 /assets/MiSans_VF.ttf 的字体 */
+@font-face {
+	font-family: 'MiSans';
+	src: url('/assets/MiSans_VF.ttf') format('truetype-variations');
+	font-weight: 1 999;
+	font-display: swap;
+}
 
 * {
-	@apply text-white;
+	@apply font-[MiSans];
+}
+
+button {
+	@apply cursor-pointer;
 }