feat: 新增主页、侧边栏和播放组件，并配置路由

添加了主页、侧边栏和播放组件的基本结构，并配置了 Vue Router 以支持路由功能。同时，更新了全局样式和依赖项，确保界面风格一致。

package.json

@@ -14,8 +14,10 @@
 	},
 	"dependencies": {
 		"@tailwindcss/vite": "^4.1.7",
+		"axios": "^1.9.0",
 		"tailwindcss": "^4.1.7",
-		"vue": "^3.5.13"
+		"vue": "^3.5.13",
+		"vue-router": "^4.5.1"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",

public/background.js

@@ -12,7 +12,6 @@ chrome.webRequest.onBeforeRequest.addListener(
 			details.type === 'other' &&
 			details.frameId === 0
 		) {
-			console.log('onBeforeRequest - REDIRECTING MAIN_FRAME')
 			chrome.tabs.create({ url: chrome.runtime.getURL('index.html') })
 			chrome.tabs.remove(details.tabId)
 		}

src/App.vue

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

src/components/Playing.vue

@@ -0,0 +1,3 @@
+<template>
+	<div class="bg-[#070909a7] backdrop-blur-3xl h-16 shadow-[0px_-1px_1rem_0px_rgba(0,0,0,0.1)] border-b border-b-[#1c1c1c]"></div>
+</template>

src/components/Sidebar.vue

@@ -0,0 +1,3 @@
+<template>
+	<div class="bg-[#0c1112] w-56 text-white">aaa</div>
+</template>

src/main.ts

@@ -1,5 +1,16 @@
 import { createApp } from 'vue'
+import { createWebHashHistory, createRouter } from 'vue-router'
 import './style.css'
 import App from './App.vue'
+import HomePage from './pages/Home.vue'
 
-createApp(App).mount('#app')
+const routes = [
+  { path: '/', component: HomePage }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+; createApp(App).use(router).mount('#app')

src/pages/Home.vue

@@ -0,0 +1,3 @@
+<template>
+	<div class="text-white">hello</div>
+</template>

src/style.css

@@ -1 +1,5 @@
 @import "tailwindcss";
+
+* {
+	@apply text-white;
+}