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

添加了主页、侧边栏和播放组件的基本结构,并配置了 Vue Router 以支持路由功能。同时,更新了全局样式和依赖项,确保界面风格一致。
This commit is contained in:
Astrian Zheng 2025-05-24 09:39:33 +10:00
parent 97d7bc0f4e
commit fff7ceeb2e
Signed by: Astrian
SSH Key Fingerprint: SHA256:rVnhx3DAKjujCwWE13aDl7uV6+9U1MvydLkNRXJrBiA
9 changed files with 2536 additions and 2207 deletions

4693
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

@ -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>

View File

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

View File

@ -1,5 +1,16 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import { createWebHashHistory, createRouter } from 'vue-router'
import './style.css' import './style.css'
import App from './App.vue' 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')

3
src/pages/Home.vue Normal file
View File

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

View File

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