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

View File

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

View File

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

View File

@ -1,4 +1,6 @@
import { getJson } from '@/core/ajax' import { getJson } from '@/core/ajax'
import { freshHomeOptions } from './fresh/options'
import { RankListMode } from './fresh/types'
/** /**
* API , 使 parseJson JSON , this.items * 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
},
},
})
}