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>
|
</fragment>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { freshHomeOptions } from './types'
|
import { freshHomeOptions } from './options'
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
props: {
|
props: {
|
||||||
@ -22,6 +22,10 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
|
console.log({
|
||||||
|
name: this.item.name,
|
||||||
|
options: freshHomeOptions.layoutOptions[this.item.name] ?? {},
|
||||||
|
})
|
||||||
return {
|
return {
|
||||||
options: freshHomeOptions.layoutOptions[this.item.name] ?? {},
|
options: freshHomeOptions.layoutOptions[this.item.name] ?? {},
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
import { defineComponentMetadata } from '@/components/define'
|
import { defineComponentMetadata } from '@/components/define'
|
||||||
import { contentLoaded } from '@/core/life-cycle'
|
import { contentLoaded } from '@/core/life-cycle'
|
||||||
import { addComponentListener } from '@/core/settings'
|
import { addComponentListener } from '@/core/settings'
|
||||||
import { getNumberValidator, mountVueComponent } from '@/core/utils'
|
import { mountVueComponent } from '@/core/utils'
|
||||||
import { homeUrls } from '../urls'
|
import { homeUrls } from '../urls'
|
||||||
|
import { freshHomeOptionsMetadata } from './types'
|
||||||
|
|
||||||
export const component = defineComponentMetadata({
|
export const component = defineComponentMetadata({
|
||||||
name: 'freshHome',
|
name: 'freshHome',
|
||||||
@ -23,33 +24,7 @@ export const component = defineComponentMetadata({
|
|||||||
document.body.appendChild(freshHome.$el)
|
document.body.appendChild(freshHome.$el)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
options: {
|
options: freshHomeOptionsMetadata,
|
||||||
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),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
unload: () => document.body.classList.add('home-redesign-off'),
|
unload: () => document.body.classList.add('home-redesign-off'),
|
||||||
reload: () => document.body.classList.remove('home-redesign-off'),
|
reload: () => document.body.classList.remove('home-redesign-off'),
|
||||||
instantStyles: [
|
instantStyles: [
|
||||||
|
|||||||
@ -39,7 +39,7 @@ import { ArrayContent } from '@/core/common-types'
|
|||||||
import { Reorder } from '@/core/reorder'
|
import { Reorder } from '@/core/reorder'
|
||||||
import { ascendingSort } from '@/core/utils/sort'
|
import { ascendingSort } from '@/core/utils/sort'
|
||||||
import { VButton, VIcon } from '@/ui'
|
import { VButton, VIcon } from '@/ui'
|
||||||
import { freshHomeOptions } from '../../types'
|
import { freshHomeOptions } from '../../options'
|
||||||
import { supportedCategories } from './filter'
|
import { supportedCategories } from './filter'
|
||||||
import { getContent } from './content/content'
|
import { getContent } from './content/content'
|
||||||
|
|
||||||
|
|||||||
@ -7,23 +7,32 @@
|
|||||||
<BangumiTimeline :api="timelineApi" />
|
<BangumiTimeline :api="timelineApi" />
|
||||||
</div>
|
</div>
|
||||||
<div class="fresh-home-categories-bangumi-rank-list">
|
<div class="fresh-home-categories-bangumi-rank-list">
|
||||||
<a
|
<div class="fresh-home-categories-bangumi-rank-list-header">
|
||||||
class="fresh-home-categories-bangumi-rank-list-header"
|
<a :href="rankingsLink" target="_blank">
|
||||||
:href="rankingsLink"
|
|
||||||
target="_blank"
|
|
||||||
>
|
|
||||||
<SubHeader> 排行榜 </SubHeader>
|
<SubHeader> 排行榜 </SubHeader>
|
||||||
</a>
|
</a>
|
||||||
<RankList bangumi-mode :parse-json="parseJson" :api="rankingsApi" />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { VButton, VIcon } from '@/ui'
|
||||||
import { applyContentFilter } from '@/components/feeds/api'
|
import { applyContentFilter } from '@/components/feeds/api'
|
||||||
import SubHeader from '../../../SubHeader.vue'
|
import SubHeader from '../../../SubHeader.vue'
|
||||||
import RankList from './RankList.vue'
|
import RankList from './RankList.vue'
|
||||||
|
import CompactRankList from './CompactRankList.vue'
|
||||||
import BangumiTimeline from './BangumiTimeline.vue'
|
import BangumiTimeline from './BangumiTimeline.vue'
|
||||||
import { RankListCard } from './rank-list'
|
import { RankListCard } from './rank-list'
|
||||||
|
import { freshHomeOptions } from '../../../options'
|
||||||
|
import { RankListMode } from '../../../types'
|
||||||
|
|
||||||
const bangumiDataMap = {
|
const bangumiDataMap = {
|
||||||
anime: {
|
anime: {
|
||||||
@ -41,6 +50,9 @@ export default Vue.extend({
|
|||||||
SubHeader,
|
SubHeader,
|
||||||
BangumiTimeline,
|
BangumiTimeline,
|
||||||
RankList,
|
RankList,
|
||||||
|
CompactRankList,
|
||||||
|
VButton,
|
||||||
|
VIcon,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
region: {
|
region: {
|
||||||
@ -57,9 +69,23 @@ export default Vue.extend({
|
|||||||
timelineApi: `https://api.bilibili.com/pgc/web/timeline?types=${seasonType}&before=6&after=6`,
|
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}`,
|
rankingsApi: `https://api.bilibili.com/pgc/season/rank/web/list?day=3&season_type=${seasonType}`,
|
||||||
rankingsLink: `https://www.bilibili.com/v/popular/rank/${rankingName}`,
|
rankingsLink: `https://www.bilibili.com/v/popular/rank/${rankingName}`,
|
||||||
|
rankListMode: freshHomeOptions.rankListMode,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
isCompactRankList() {
|
||||||
|
return this.rankListMode === RankListMode.Compact
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
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) {
|
parseJson(json: any) {
|
||||||
const items = (json.data?.list ?? []) as any[]
|
const items = (json.data?.list ?? []) as any[]
|
||||||
const cards = items
|
const cards = items
|
||||||
@ -116,10 +142,15 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
&-rank-list {
|
&-rank-list {
|
||||||
@include v-stretch(var(--fresh-home-categories-header-gap));
|
@include v-stretch(var(--fresh-home-categories-header-gap));
|
||||||
// &-header {
|
&-header {
|
||||||
// // Timeline 的 header 中, 图标为 20px, 上下 padding 共 8px, 这里的 line-height 需要保持一致来对齐
|
// Timeline 的 header 中, 图标为 20px, 上下 padding 共 8px, 这里的 line-height 需要保持一致来对齐
|
||||||
// line-height: calc(20px + 8px);
|
// line-height: calc(20px + 8px);
|
||||||
// }
|
@include h-center();
|
||||||
|
justify-content: space-between;
|
||||||
|
.be-icon {
|
||||||
|
margin: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</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
|
grow?: boolean
|
||||||
}
|
}
|
||||||
export interface FreshLayoutItemSettings {
|
export interface FreshLayoutItemSettings {
|
||||||
name: string
|
// name: string
|
||||||
linebreak: boolean
|
linebreak: boolean
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,7 +24,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { VButton, VIcon } from '@/ui'
|
import { VButton, VIcon } from '@/ui'
|
||||||
import VideoList from '../../VideoList.vue'
|
import VideoList from '../../VideoList.vue'
|
||||||
import { freshHomeOptions } from '../../types'
|
import { freshHomeOptions } from '../../options'
|
||||||
import { getTrendingVideos } from '../../../trending'
|
import { getTrendingVideos } from '../../../trending'
|
||||||
|
|
||||||
export default Vue.extend({
|
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 { defineOptionsMetadata } from '@/components/define'
|
||||||
import { FreshLayoutItemSettings } from './layouts/fresh-layout-item'
|
import { getNumberValidator } from '@/core/utils'
|
||||||
|
import type { FreshLayoutItemSettings } from './layouts/fresh-layout-item'
|
||||||
|
|
||||||
export const freshHomeOptions = getComponentSettings('freshHome').options as {
|
export enum RankListMode {
|
||||||
layoutOptions: Record<string, FreshLayoutItemSettings>
|
Default = 'default',
|
||||||
personalized: boolean
|
Compact = 'compact',
|
||||||
horizontalWheelScroll: boolean
|
|
||||||
[key: string]: any
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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