mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add CompactRankList in default content layout
This commit is contained in:
parent
68d2321859
commit
8c274b85f1
@ -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
|
||||
|
||||
@ -11,19 +11,31 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="fresh-home-categories-default-rank-list">
|
||||
<a :href="rankingsLink" target="_blank">
|
||||
<SubHeader> 排行榜 </SubHeader>
|
||||
</a>
|
||||
<RankList :parse-json="parseJson" :api="rankingsApi" />
|
||||
<div class="fresh-home-categories-default-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 :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>
|
||||
|
||||
@ -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,
|
||||
}
|
||||
|
||||
@ -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
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user