Add CompactRankList

This commit is contained in:
the1812 2023-04-16 16:21:05 +08:00
parent f68ae19479
commit 2982028501
9 changed files with 122 additions and 51 deletions

View File

@ -12,7 +12,7 @@
</fragment>
</template>
<script lang="ts">
import { freshHomeOptions } from './types'
import { freshHomeOptions } from './options'
export default Vue.extend({
props: {
@ -22,6 +22,10 @@ export default Vue.extend({
},
},
data() {
console.log({
name: this.item.name,
options: freshHomeOptions.layoutOptions[this.item.name] ?? {},
})
return {
options: freshHomeOptions.layoutOptions[this.item.name] ?? {},
}

View File

@ -1,8 +1,9 @@
import { defineComponentMetadata } from '@/components/define'
import { contentLoaded } from '@/core/life-cycle'
import { addComponentListener } from '@/core/settings'
import { getNumberValidator, mountVueComponent } from '@/core/utils'
import { mountVueComponent } from '@/core/utils'
import { homeUrls } from '../urls'
import { freshHomeOptionsMetadata } from './types'
export const component = defineComponentMetadata({
name: 'freshHome',
@ -23,33 +24,7 @@ export const component = defineComponentMetadata({
document.body.appendChild(freshHome.$el)
})
},
options: {
layoutOptions: {
displayName: '版块设置',
defaultValue: {
trending: {
linebreak: true,
},
areas: {
linebreak: true,
},
},
hidden: true,
},
personalized: {
displayName: '个性化推荐',
defaultValue: false,
},
horizontalWheelScroll: {
displayName: '启用横向滚动',
defaultValue: false,
},
maxWidth: {
displayName: '最大宽度 (px)',
defaultValue: 1440,
validator: getNumberValidator(1000, 3000),
},
},
options: freshHomeOptionsMetadata,
unload: () => document.body.classList.add('home-redesign-off'),
reload: () => document.body.classList.remove('home-redesign-off'),
instantStyles: [

View File

@ -39,7 +39,7 @@ import { ArrayContent } from '@/core/common-types'
import { Reorder } from '@/core/reorder'
import { ascendingSort } from '@/core/utils/sort'
import { VButton, VIcon } from '@/ui'
import { freshHomeOptions } from '../../types'
import { freshHomeOptions } from '../../options'
import { supportedCategories } from './filter'
import { getContent } from './content/content'

View File

@ -7,23 +7,32 @@
<BangumiTimeline :api="timelineApi" />
</div>
<div class="fresh-home-categories-bangumi-rank-list">
<a
class="fresh-home-categories-bangumi-rank-list-header"
:href="rankingsLink"
target="_blank"
>
<SubHeader> 排行榜 </SubHeader>
</a>
<RankList bangumi-mode :parse-json="parseJson" :api="rankingsApi" />
<div class="fresh-home-categories-bangumi-rank-list-header">
<a :href="rankingsLink" target="_blank">
<SubHeader> 排行榜 </SubHeader>
</a>
<VButton v-if="isCompactRankList" icon title="显示较少项目" @click="toggleRankListMode">
<VIcon icon="mdi-poll" :size="16" />
</VButton>
<VButton v-else icon title="显示较多项目" @click="toggleRankListMode">
<VIcon icon="mdi-format-list-text" :size="16" />
</VButton>
</div>
<CompactRankList v-if="isCompactRankList" :parse-json="parseJson" :api="rankingsApi" />
<RankList v-else bangumi-mode :parse-json="parseJson" :api="rankingsApi" />
</div>
</div>
</template>
<script lang="ts">
import { VButton, VIcon } from '@/ui'
import { applyContentFilter } from '@/components/feeds/api'
import SubHeader from '../../../SubHeader.vue'
import RankList from './RankList.vue'
import CompactRankList from './CompactRankList.vue'
import BangumiTimeline from './BangumiTimeline.vue'
import { RankListCard } from './rank-list'
import { freshHomeOptions } from '../../../options'
import { RankListMode } from '../../../types'
const bangumiDataMap = {
anime: {
@ -41,6 +50,9 @@ export default Vue.extend({
SubHeader,
BangumiTimeline,
RankList,
CompactRankList,
VButton,
VIcon,
},
props: {
region: {
@ -57,9 +69,23 @@ export default Vue.extend({
timelineApi: `https://api.bilibili.com/pgc/web/timeline?types=${seasonType}&before=6&after=6`,
rankingsApi: `https://api.bilibili.com/pgc/season/rank/web/list?day=3&season_type=${seasonType}`,
rankingsLink: `https://www.bilibili.com/v/popular/rank/${rankingName}`,
rankListMode: freshHomeOptions.rankListMode,
}
},
computed: {
isCompactRankList() {
return this.rankListMode === RankListMode.Compact
},
},
methods: {
toggleRankListMode() {
if (this.rankListMode === RankListMode.Compact) {
this.rankListMode = RankListMode.Default
} else if (this.rankListMode === RankListMode.Default) {
this.rankListMode = RankListMode.Compact
}
freshHomeOptions.rankListMode = this.rankListMode
},
parseJson(json: any) {
const items = (json.data?.list ?? []) as any[]
const cards = items
@ -116,10 +142,15 @@ export default Vue.extend({
}
&-rank-list {
@include v-stretch(var(--fresh-home-categories-header-gap));
// &-header {
// // Timeline header , 20px, padding 8px, line-height
// line-height: calc(20px + 8px);
// }
&-header {
// Timeline header , 20px, padding 8px, line-height
// line-height: calc(20px + 8px);
@include h-center();
justify-content: space-between;
.be-icon {
margin: 1px;
}
}
}
}
</style>

View File

@ -0,0 +1,23 @@
<template>
<div class="bangumi-compact-rank-list">compact rank list</div>
</template>
<script lang="ts">
import { requestMixin } from '../../../../mixin'
export default Vue.extend({
mixins: [requestMixin()],
props: {
parseJson: {
type: Function,
required: true,
},
},
})
</script>
<style lang="scss">
@import 'common';
.bangumi-compact-rank-list {
@include v-stretch();
}
</style>

View File

@ -5,6 +5,6 @@ export interface FreshLayoutItem extends WithName {
grow?: boolean
}
export interface FreshLayoutItemSettings {
name: string
// name: string
linebreak: boolean
}

View File

@ -24,7 +24,7 @@
<script lang="ts">
import { VButton, VIcon } from '@/ui'
import VideoList from '../../VideoList.vue'
import { freshHomeOptions } from '../../types'
import { freshHomeOptions } from '../../options'
import { getTrendingVideos } from '../../../trending'
export default Vue.extend({

View File

@ -0,0 +1,6 @@
import { OptionsOfMetadata } from '@/components/define'
import { getComponentSettings } from '@/core/settings'
import { freshHomeOptionsMetadata } from './types'
export const freshHomeOptions =
getComponentSettings<OptionsOfMetadata<typeof freshHomeOptionsMetadata>>('freshHome').options

View File

@ -1,9 +1,41 @@
import { getComponentSettings } from '@/core/settings'
import { FreshLayoutItemSettings } from './layouts/fresh-layout-item'
import { defineOptionsMetadata } from '@/components/define'
import { getNumberValidator } from '@/core/utils'
import type { FreshLayoutItemSettings } from './layouts/fresh-layout-item'
export const freshHomeOptions = getComponentSettings('freshHome').options as {
layoutOptions: Record<string, FreshLayoutItemSettings>
personalized: boolean
horizontalWheelScroll: boolean
[key: string]: any
export enum RankListMode {
Default = 'default',
Compact = 'compact',
}
export const freshHomeOptionsMetadata = defineOptionsMetadata({
layoutOptions: {
displayName: '版块设置',
defaultValue: {
trending: {
linebreak: true,
},
areas: {
linebreak: true,
},
} satisfies Record<string, FreshLayoutItemSettings>,
hidden: true,
},
personalized: {
displayName: '个性化推荐',
defaultValue: false,
},
horizontalWheelScroll: {
displayName: '启用横向滚动',
defaultValue: false,
},
maxWidth: {
displayName: '最大宽度 (px)',
defaultValue: 1440,
validator: getNumberValidator(1000, 3000),
},
rankListMode: {
displayName: '',
defaultValue: RankListMode.Default,
hidden: true,
},
})