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 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
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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,
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user