mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add CompactRankList
This commit is contained in:
parent
f68ae19479
commit
2982028501
@ -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] ?? {},
|
||||
}
|
||||
|
||||
@ -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: [
|
||||
|
||||
@ -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'
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
@ -5,6 +5,6 @@ export interface FreshLayoutItem extends WithName {
|
||||
grow?: boolean
|
||||
}
|
||||
export interface FreshLayoutItemSettings {
|
||||
name: string
|
||||
// name: string
|
||||
linebreak: boolean
|
||||
}
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -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
|
||||
@ -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,
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user