68 lines
1.6 KiB
Vue
68 lines
1.6 KiB
Vue
<template>
|
|
<div class="setting">
|
|
<h1>设置</h1>
|
|
<p>管理您的音乐库和系统配置</p>
|
|
<p class="controll-buttons">
|
|
<button type="submit" @click="show = true">添加</button>
|
|
<button @click="butterfliu.fetchLibraries()">刷新</button>
|
|
</p>
|
|
|
|
<AddLibraryDialog v-model="show" @confirm="toAddLibrary" />
|
|
|
|
<div>
|
|
<LibraryCard
|
|
v-for="l in libraries"
|
|
:key="l.id"
|
|
:name="l.name"
|
|
:id="l.id"
|
|
@scan="toScanLibrary(l.id)"
|
|
@delete="toDeleteLibrary(l.id)"
|
|
@viewSongs="toViewSongs(l.id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from 'vue-router'
|
|
import AddLibraryDialog from '@/components/AddLibraryDialog.vue'
|
|
import LibraryCard from '@/components/LibraryCard.vue'
|
|
import { useButterfliuStore } from '@/stores/butterfliu'
|
|
import { ref, computed } from 'vue'
|
|
|
|
const router = useRouter()
|
|
const butterfliu = useButterfliuStore()
|
|
butterfliu.fetchLibraries()
|
|
const libraries = computed(() => butterfliu.libraries)
|
|
const show = ref(false)
|
|
|
|
function toAddLibrary(name, path) {
|
|
butterfliu.addLibrary(name, path).then(() => butterfliu.fetchLibraries())
|
|
}
|
|
|
|
function toScanLibrary(id) {
|
|
butterfliu.scanLibrary(id)
|
|
}
|
|
|
|
function toDeleteLibrary(id) {
|
|
butterfliu.deleteLibrary(id).then(() => butterfliu.fetchLibraries())
|
|
}
|
|
|
|
function toViewSongs(id) {
|
|
router.push({ name: 'music-library', params: { id } })
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.setting {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--size-2);
|
|
}
|
|
|
|
.controll-buttons {
|
|
display: flex;
|
|
gap: var(--size-2);
|
|
}
|
|
</style>
|