feat: 新增主页、侧边栏和播放组件,并配置路由
添加了主页、侧边栏和播放组件的基本结构,并配置了 Vue Router 以支持路由功能。同时,更新了全局样式和依赖项,确保界面风格一致。
This commit is contained in:
parent
97d7bc0f4e
commit
fff7ceeb2e
4693
package-lock.json
generated
4693
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
@ -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",
|
||||||
|
|
|
@ -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)
|
||||||
}
|
}
|
||||||
|
|
17
src/App.vue
17
src/App.vue
|
@ -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>
|
3
src/components/Playing.vue
Normal file
3
src/components/Playing.vue
Normal 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>
|
3
src/components/Sidebar.vue
Normal file
3
src/components/Sidebar.vue
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="bg-[#0c1112] w-56 text-white">aaa</div>
|
||||||
|
</template>
|
13
src/main.ts
13
src/main.ts
|
@ -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
3
src/pages/Home.vue
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
<template>
|
||||||
|
<div class="text-white">hello</div>
|
||||||
|
</template>
|
|
@ -1 +1,5 @@
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
* {
|
||||||
|
@apply text-white;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user