Add categories

This commit is contained in:
the1812 2022-01-04 08:55:45 +08:00
parent c6e1eecc42
commit e5ba3f3a80
4 changed files with 100 additions and 1 deletions

View File

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

View File

@ -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),
}

View File

@ -64,6 +64,7 @@
<script lang="ts">
import { getVideoFeeds } from '@/components/feeds/api'
import { VideoCard } from '@/components/feeds/video-card'
import { ArrayContent } from '@/core/common-types'
import { VButton, VIcon } from '@/ui'
import VideoList from '../../VideoList.vue'
@ -82,7 +83,6 @@ const tabs = [
href: 'https://t.bilibili.com/?tab=512',
},
]
type ArrayContent<T> = T extends Array<infer R> ? R : T
type TabType = ArrayContent<typeof tabs>
export default Vue.extend({
components: {

View File

@ -6,6 +6,7 @@ export type ExecutableWithParameter<Parameters extends any[] = never[], ReturnTy
) => ReturnType | Promise<ReturnType>
export type TestPattern = (string | RegExp)[]
export type ArrayContent<T> = T extends Array<infer R> ? R : T
export type VueModule = VueConstructor | { default: VueConstructor }
export type I18nDescription = string | { 'zh-CN': string; [key: string]: string }
export type WithName = {