Add CompactRankList in default content layout

This commit is contained in:
the1812 2023-04-16 22:15:57 +08:00
parent 68d2321859
commit 8c274b85f1
4 changed files with 64 additions and 22 deletions

View File

@ -31,8 +31,7 @@ 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'
import { compactRankListMixin } from '../../../../mixin'
const bangumiDataMap = {
anime: {
@ -54,6 +53,7 @@ export default Vue.extend({
VButton,
VIcon,
},
mixins: [compactRankListMixin()],
props: {
region: {
type: Object,
@ -69,23 +69,9 @@ 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

View File

@ -11,19 +11,31 @@
</div>
</div>
<div class="fresh-home-categories-default-rank-list">
<div class="fresh-home-categories-default-rank-list-header">
<a :href="rankingsLink" target="_blank">
<SubHeader> 排行榜 </SubHeader>
</a>
<RankList :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 :parse-json="parseJson" :api="rankingsApi" />
</div>
</div>
</template>
<script lang="ts">
import { VButton, VIcon } from '@/ui'
import { applyContentFilter } from '@/components/feeds/api'
import { RankListCard } from './rank-list'
import CompactRankList from './CompactRankList.vue'
import RankList from './RankList.vue'
import VideoSlides from './VideoSlides.vue'
import SubHeader from '../../../SubHeader.vue'
import { compactRankListMixin } from '../../../../mixin'
/*
TODO: 有几个区表面上是普通视频, 但内容走的还是番剧那套, 所以 RankList 也要换 API
@ -34,10 +46,14 @@ TODO: 有几个区表面上是普通视频, 但内容走的还是番剧那套,
export default Vue.extend({
components: {
CompactRankList,
RankList,
VideoSlides,
SubHeader,
VButton,
VIcon,
},
mixins: [compactRankListMixin()],
props: {
region: {
type: Object,
@ -92,6 +108,18 @@ export default Vue.extend({
}
&-rank-list {
@include v-stretch(var(--fresh-home-categories-header-gap));
&-header {
@include h-center();
justify-content: space-between;
position: relative;
.be-button {
@include absolute-v-center();
right: 0;
}
.be-icon {
margin: 1px;
}
}
}
}
</style>

View File

@ -12,7 +12,7 @@ export interface RankListCard {
}
export const rankListCssVars = {
panelWidth: 400,
panelHeight: 608,
panelHeight: 604,
padding: 12,
rankItemHeight: 110,
rankItemMargin: 24,
@ -26,6 +26,6 @@ export const rankListCssVars = {
}
export const compactRankListCssVars = {
panelWidth: 376,
panelHeight: 584,
panelHeight: 580,
padding: 0,
}

View File

@ -1,4 +1,6 @@
import { getJson } from '@/core/ajax'
import { freshHomeOptions } from './fresh/options'
import { RankListMode } from './fresh/types'
/**
* API , 使 parseJson JSON , this.items
@ -70,3 +72,29 @@ export const cssVariableMixin = (variables: Record<string, string | number>) =>
})
},
})
/** 使用 CompactRankList, 提供一些与设置关联的 data */
export const compactRankListMixin = () => {
return Vue.extend({
data() {
return {
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
},
},
})
}