mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add categories
This commit is contained in:
parent
c6e1eecc42
commit
e5ba3f3a80
@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<div class="fresh-home-categories">
|
||||||
|
<div class="fresh-home-header">
|
||||||
|
<div class="fresh-home-header-title">
|
||||||
|
分区
|
||||||
|
</div>
|
||||||
|
<div class="fresh-home-header-center-area">
|
||||||
|
<div class="fresh-home-header-tabs">
|
||||||
|
<div class="default-tabs">
|
||||||
|
<div
|
||||||
|
v-for="t of tabs"
|
||||||
|
:key="t.name"
|
||||||
|
class="default-tab"
|
||||||
|
:class="{ selected: t === selectedTab }"
|
||||||
|
@click="selectTab(t)"
|
||||||
|
>
|
||||||
|
<div class="default-tab-name">
|
||||||
|
{{ t.displayName }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fresh-home-header-pagination">
|
||||||
|
<VButton icon title="排序">
|
||||||
|
<VIcon icon="mdi-swap-horizontal" :size="18" />
|
||||||
|
</VButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="fresh-home-categories-content">
|
||||||
|
content
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { categories } from '@/components/utils/categories/data'
|
||||||
|
import { ArrayContent } from '@/core/common-types'
|
||||||
|
import { VButton, VIcon } from '@/ui'
|
||||||
|
|
||||||
|
const tabs = Object.entries(categories).map(([name, category]) => ({
|
||||||
|
id: category.code as number,
|
||||||
|
name,
|
||||||
|
displayName: name,
|
||||||
|
category,
|
||||||
|
href: category.link,
|
||||||
|
}))
|
||||||
|
type TabType = ArrayContent<typeof tabs>
|
||||||
|
export default Vue.extend({
|
||||||
|
components: {
|
||||||
|
VButton,
|
||||||
|
VIcon,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabs,
|
||||||
|
selectedTab: tabs[0],
|
||||||
|
loading: true,
|
||||||
|
videos: [],
|
||||||
|
rankVideos: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.reload()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
selectTab(tab: TabType) {
|
||||||
|
if (this.selectedTab === tab) {
|
||||||
|
window.open(tab.href, '_blank')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.selectedTab = tab
|
||||||
|
this.reload()
|
||||||
|
},
|
||||||
|
async reload() {
|
||||||
|
this.loading = true
|
||||||
|
this.videos = []
|
||||||
|
this.videos = await this.selectedTab.api().finally(() => { this.loading = false })
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
@import "common";
|
||||||
|
|
||||||
|
.fresh-home-categories {
|
||||||
|
@include v-stretch();
|
||||||
|
&-content {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import { FreshLayoutItem } from '../fresh-layout-item'
|
||||||
|
|
||||||
|
export const categories: FreshLayoutItem = {
|
||||||
|
name: 'categories',
|
||||||
|
displayName: '分区',
|
||||||
|
component: () => import('./Categories.vue').then(m => m.default),
|
||||||
|
}
|
||||||
@ -64,6 +64,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { getVideoFeeds } from '@/components/feeds/api'
|
import { getVideoFeeds } from '@/components/feeds/api'
|
||||||
import { VideoCard } from '@/components/feeds/video-card'
|
import { VideoCard } from '@/components/feeds/video-card'
|
||||||
|
import { ArrayContent } from '@/core/common-types'
|
||||||
import { VButton, VIcon } from '@/ui'
|
import { VButton, VIcon } from '@/ui'
|
||||||
import VideoList from '../../VideoList.vue'
|
import VideoList from '../../VideoList.vue'
|
||||||
|
|
||||||
@ -82,7 +83,6 @@ const tabs = [
|
|||||||
href: 'https://t.bilibili.com/?tab=512',
|
href: 'https://t.bilibili.com/?tab=512',
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
type ArrayContent<T> = T extends Array<infer R> ? R : T
|
|
||||||
type TabType = ArrayContent<typeof tabs>
|
type TabType = ArrayContent<typeof tabs>
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
components: {
|
components: {
|
||||||
|
|||||||
@ -6,6 +6,7 @@ export type ExecutableWithParameter<Parameters extends any[] = never[], ReturnTy
|
|||||||
) => ReturnType | Promise<ReturnType>
|
) => ReturnType | Promise<ReturnType>
|
||||||
|
|
||||||
export type TestPattern = (string | RegExp)[]
|
export type TestPattern = (string | RegExp)[]
|
||||||
|
export type ArrayContent<T> = T extends Array<infer R> ? R : T
|
||||||
export type VueModule = VueConstructor | { default: VueConstructor }
|
export type VueModule = VueConstructor | { default: VueConstructor }
|
||||||
export type I18nDescription = string | { 'zh-CN': string; [key: string]: string }
|
export type I18nDescription = string | { 'zh-CN': string; [key: string]: string }
|
||||||
export type WithName = {
|
export type WithName = {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user