Bilibili-Evolved/registry/lib/components/style/custom-navbar/favorites/FavoritesFolderSelect.vue
2023-02-05 04:39:29 +08:00

79 lines
2.1 KiB
Vue

<template>
<VDropdown
class="favorites-folder-select"
round
:items="folders"
:key-mapper="f => f.id"
:value="folder"
@update:value="change($event)"
>
<template #item="{ item }">
{{ item.name }}
</template>
</VDropdown>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'
import { getJsonWithCredentials } from '@/core/ajax'
import { getComponentSettings } from '@/core/settings'
import { getUID } from '@/core/utils'
import { VDropdown } from '@/ui'
import type { FavoritesFolder } from './favorites-folder'
import { notSelectedFolder } from './favorites-folder'
const navbarOptions = getComponentSettings('customNavbar').options
export default defineComponent({
components: {
VDropdown,
},
props: {
folder: {
type: Object as PropType<FavoritesFolder>,
required: true,
},
},
emits: ['update:folder'],
data() {
return {
folders: [] as FavoritesFolder[],
}
},
async created() {
const uid = getUID()
if (!uid) {
return
}
const url = `https://api.bilibili.com/medialist/gateway/base/created?pn=1&ps=100&up_mid=${uid}&is_space=0`
const json = await getJsonWithCredentials(url)
if (json.code !== 0) {
throw new Error(`获取收藏夹列表失败: ${json.message}`)
}
this.folders = lodash.get(json, 'data.list', []).map(
(item: { id: number; title: string; media_count: number }) =>
({
id: item.id,
name: item.title,
count: item.media_count,
} as FavoritesFolder),
)
if (this.folders.length > 0 && this.folder.id === notSelectedFolder.id) {
const { lastFavoriteFolder } = navbarOptions
const folder = this.folders.find((f: FavoritesFolder) => f.id === lastFavoriteFolder)
if (folder) {
this.$emit('update:folder', folder)
} else {
this.$emit('update:folder', this.folders[0])
}
}
},
methods: {
change(folder: FavoritesFolder) {
navbarOptions.lastFavoriteFolder = folder.id
this.$emit('update:folder', folder)
},
},
})
</script>