mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Remove mixins in registry/lib/components/style/home-redesign/mixin.ts
This commit is contained in:
parent
78f91156eb
commit
046957478d
@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
|
ref="el"
|
||||||
class="fresh-home-categories-bangumi-timeline-content"
|
class="fresh-home-categories-bangumi-timeline-content"
|
||||||
:class="{ loading, loaded, scrolled, empty: items.length === 0 }"
|
:class="{ loading, loaded, scrolled, empty: items.length === 0 }"
|
||||||
>
|
>
|
||||||
@ -105,7 +106,7 @@ import { enableHorizontalScroll } from '@/core/horizontal-scroll'
|
|||||||
import { addComponentListener } from '@/core/settings'
|
import { addComponentListener } from '@/core/settings'
|
||||||
import { DpiImage, VEmpty, VIcon, VLoading } from '@/ui'
|
import { DpiImage, VEmpty, VIcon, VLoading } from '@/ui'
|
||||||
|
|
||||||
import { cssVariableMixin, requestMixin } from '../../../../mixin'
|
import { requestProps, useCssVariable, useRequest } from '../../../../mixin'
|
||||||
import { cleanUpScrollMask, setupScrollMask } from '../../../scroll-mask'
|
import { cleanUpScrollMask, setupScrollMask } from '../../../scroll-mask'
|
||||||
import { rankListCssVars } from './rank-list'
|
import { rankListCssVars } from './rank-list'
|
||||||
|
|
||||||
@ -155,9 +156,6 @@ const timelineCssVars = (() => {
|
|||||||
timelineViewportHeight,
|
timelineViewportHeight,
|
||||||
}
|
}
|
||||||
})()
|
})()
|
||||||
const mixin0 = requestMixin<TimelineDay>({ requestMethod: getJsonWithCredentials })
|
|
||||||
const mixin1 = cssVariableMixin(timelineCssVars)
|
|
||||||
type MixinsInstance = InstanceType<typeof mixin0> & InstanceType<typeof mixin1>
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
DpiImage,
|
DpiImage,
|
||||||
@ -165,7 +163,15 @@ export default defineComponent({
|
|||||||
VEmpty,
|
VEmpty,
|
||||||
VLoading,
|
VLoading,
|
||||||
},
|
},
|
||||||
mixins: [mixin0, mixin1],
|
props: requestProps,
|
||||||
|
setup: props => ({
|
||||||
|
...useRequest<TimelineDay>({
|
||||||
|
api: props.api,
|
||||||
|
parseJson: (json: any) => json.result ?? [],
|
||||||
|
requestMethod: getJsonWithCredentials,
|
||||||
|
}),
|
||||||
|
...useCssVariable(timelineCssVars),
|
||||||
|
}),
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
observers: [],
|
observers: [],
|
||||||
@ -176,23 +182,19 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
todayIndex(): number {
|
todayIndex(): number {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
return this.items.findIndex(it => it.is_today === 1)
|
||||||
return this0.items.findIndex(it => it.is_today === 1)
|
|
||||||
},
|
},
|
||||||
pastWeekItems(): TimelineDay[] {
|
pastWeekItems(): TimelineDay[] {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
return this.items.slice(0, this.todayIndex + 1)
|
||||||
return this0.items.slice(0, this0.todayIndex + 1)
|
|
||||||
},
|
},
|
||||||
currentWeekItems(): TimelineDay[] {
|
currentWeekItems(): TimelineDay[] {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
return this.items.slice(this.todayIndex)
|
||||||
return this0.items.slice(this0.todayIndex)
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
loaded() {
|
loaded() {
|
||||||
const this0 = this as typeof this & { loaded: boolean }
|
if (this.loaded) {
|
||||||
if (this0.loaded) {
|
this.updateScrollPosition()
|
||||||
this0.updateScrollPosition()
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -203,7 +205,7 @@ export default defineComponent({
|
|||||||
const element = this.$el as HTMLElement
|
const element = this.$el as HTMLElement
|
||||||
let ended = 0
|
let ended = 0
|
||||||
const endHandler = () => {
|
const endHandler = () => {
|
||||||
ended++
|
ended += 1
|
||||||
if (ended >= 7) {
|
if (ended >= 7) {
|
||||||
element.classList.add('snap')
|
element.classList.add('snap')
|
||||||
element.removeEventListener('animationend', endHandler)
|
element.removeEventListener('animationend', endHandler)
|
||||||
@ -219,9 +221,6 @@ export default defineComponent({
|
|||||||
cleanUpScrollMask(...list)
|
cleanUpScrollMask(...list)
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
parseJson(json: any) {
|
|
||||||
return json.result ?? []
|
|
||||||
},
|
|
||||||
async updateScrollPosition() {
|
async updateScrollPosition() {
|
||||||
await this.$nextTick()
|
await this.$nextTick()
|
||||||
const list: HTMLElement[] = this.$refs.seasonsList
|
const list: HTMLElement[] = this.$refs.seasonsList
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="fresh-home-rank-list" :class="{ loading, loaded }">
|
<div ref="el" class="fresh-home-rank-list" :class="{ loading, loaded }">
|
||||||
<div v-if="!loaded" class="fresh-home-rank-list-loading-container">
|
<div v-if="!loaded" class="fresh-home-rank-list-loading-container">
|
||||||
<VLoading v-if="loading" />
|
<VLoading v-if="loading" />
|
||||||
<div v-if="(error || items.length === 0) && !loading" class="fresh-home-rank-list-empty">
|
<div v-if="(error || items.length === 0) && !loading" class="fresh-home-rank-list-empty">
|
||||||
@ -110,12 +110,10 @@ import UpInfo from '@/components/feeds/UpInfo.vue'
|
|||||||
import { formatCount } from '@/core/utils/formatters'
|
import { formatCount } from '@/core/utils/formatters'
|
||||||
import { DpiImage, VButton, VEmpty, VIcon, VLoading } from '@/ui'
|
import { DpiImage, VButton, VEmpty, VIcon, VLoading } from '@/ui'
|
||||||
|
|
||||||
import { cssVariableMixin, requestMixin } from '../../../../mixin'
|
import { requestProps, useCssVariable, useRequest } from '../../../../mixin'
|
||||||
import { type RankListCard, rankListCssVars } from './rank-list'
|
import { rankListCssVars } from './rank-list'
|
||||||
|
import type { RankListCard } from './rank-list'
|
||||||
|
|
||||||
const mixin0 = requestMixin<RankListCard>()
|
|
||||||
const mixin1 = cssVariableMixin(rankListCssVars)
|
|
||||||
type MixinsInstance = InstanceType<typeof mixin0> & InstanceType<typeof mixin1>
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
DpiImage,
|
DpiImage,
|
||||||
@ -125,7 +123,6 @@ export default defineComponent({
|
|||||||
VEmpty,
|
VEmpty,
|
||||||
VButton,
|
VButton,
|
||||||
},
|
},
|
||||||
mixins: [mixin0, mixin1],
|
|
||||||
props: {
|
props: {
|
||||||
parseJson: {
|
parseJson: {
|
||||||
type: Function as PropType<(json: unknown) => RankListCard[]>,
|
type: Function as PropType<(json: unknown) => RankListCard[]>,
|
||||||
@ -135,19 +132,21 @@ export default defineComponent({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
...requestProps,
|
||||||
},
|
},
|
||||||
|
setup: props => ({
|
||||||
|
...useRequest<RankListCard>({ api: props.api, parseJson: props.parseJson }),
|
||||||
|
...useCssVariable(rankListCssVars),
|
||||||
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
firstItem(): RankListCard | undefined {
|
firstItem(): RankListCard | undefined {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
return this.items[0]
|
||||||
return this0.items[0]
|
|
||||||
},
|
},
|
||||||
secondItem(): RankListCard | undefined {
|
secondItem(): RankListCard | undefined {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
return this.items[1]
|
||||||
return this0.items[1]
|
|
||||||
},
|
},
|
||||||
thirdItem(): RankListCard | undefined {
|
thirdItem(): RankListCard | undefined {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
return this.items[2]
|
||||||
return this0.items[2]
|
|
||||||
},
|
},
|
||||||
upInfoProps(): { size: number; icon: string; style: { transform: string } } {
|
upInfoProps(): { size: number; icon: string; style: { transform: string } } {
|
||||||
return {
|
return {
|
||||||
@ -159,12 +158,10 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
firstRow(): RankListCard[] {
|
firstRow(): RankListCard[] {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
return this.items.slice(3, 6)
|
||||||
return this0.items.slice(3, 6)
|
|
||||||
},
|
},
|
||||||
secondRow(): RankListCard[] {
|
secondRow(): RankListCard[] {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
return this.items.slice(6, 10)
|
||||||
return this0.items.slice(6, 10)
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
|||||||
@ -111,19 +111,34 @@ import { getWatchlaterList, toggleWatchlater, watchlaterList } from '@/component
|
|||||||
import { formatDuration } from '@/core/utils/formatters'
|
import { formatDuration } from '@/core/utils/formatters'
|
||||||
import { DpiImage, VButton, VEmpty, VIcon, VLoading } from '@/ui'
|
import { DpiImage, VButton, VEmpty, VIcon, VLoading } from '@/ui'
|
||||||
|
|
||||||
import { cssVariableMixin, requestMixin } from '../../../../mixin'
|
import { requestProps, useCssVariable, useRequest } from '../../../../mixin'
|
||||||
|
|
||||||
|
const parseJson = (json: any): VideoCard[] => {
|
||||||
|
const items = lodash.get(json, 'data.archives', [])
|
||||||
|
const cards = items.map(
|
||||||
|
(item: any): VideoCard => ({
|
||||||
|
id: item.aid,
|
||||||
|
aid: item.aid,
|
||||||
|
bvid: item.bvid,
|
||||||
|
coverUrl: item.pic,
|
||||||
|
title: item.title,
|
||||||
|
upName: item.owner.name,
|
||||||
|
upFaceUrl: item.owner.face,
|
||||||
|
upID: item.owner.mid,
|
||||||
|
playCount: item.stat.view,
|
||||||
|
danmakuCount: item.stat.danmaku,
|
||||||
|
like: item.stat.like,
|
||||||
|
coins: item.stat.coin,
|
||||||
|
description: item.desc,
|
||||||
|
dynamic: item.desc === '-' ? '' : item.desc,
|
||||||
|
type: item.tname,
|
||||||
|
duration: item.duration,
|
||||||
|
durationText: formatDuration(item.duration),
|
||||||
|
}),
|
||||||
|
)
|
||||||
|
return applyContentFilter(cards)
|
||||||
|
}
|
||||||
|
|
||||||
const mixin0 = requestMixin<VideoCard>()
|
|
||||||
const mixin1 = cssVariableMixin({
|
|
||||||
mainCoverHeight: 185,
|
|
||||||
mainCoverWidth: 287,
|
|
||||||
otherCoverHeight: 100,
|
|
||||||
otherCoverWidth: 154,
|
|
||||||
mainPaddingX: 18,
|
|
||||||
mainPaddingY: 20,
|
|
||||||
coverPadding: 16,
|
|
||||||
})
|
|
||||||
type MixinsInstance = InstanceType<typeof mixin0> & InstanceType<typeof mixin1>
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: {
|
components: {
|
||||||
VButton,
|
VButton,
|
||||||
@ -132,7 +147,19 @@ export default defineComponent({
|
|||||||
VLoading,
|
VLoading,
|
||||||
VEmpty,
|
VEmpty,
|
||||||
},
|
},
|
||||||
mixins: [mixin0, mixin1],
|
props: requestProps,
|
||||||
|
setup: props => ({
|
||||||
|
...useRequest({ api: props.api, parseJson }),
|
||||||
|
...useCssVariable({
|
||||||
|
mainCoverHeight: 185,
|
||||||
|
mainCoverWidth: 287,
|
||||||
|
otherCoverHeight: 100,
|
||||||
|
otherCoverWidth: 154,
|
||||||
|
mainPaddingX: 18,
|
||||||
|
mainPaddingY: 20,
|
||||||
|
coverPadding: 16,
|
||||||
|
}),
|
||||||
|
}),
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
watchlaterList,
|
watchlaterList,
|
||||||
@ -141,8 +168,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
currentItem(): VideoCard | undefined {
|
currentItem(): VideoCard | undefined {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
return this.items[1]
|
||||||
return this0.items[1]
|
|
||||||
},
|
},
|
||||||
currentUrl(): string {
|
currentUrl(): string {
|
||||||
return this.url(this.currentItem!.bvid)
|
return this.url(this.currentItem!.bvid)
|
||||||
@ -155,52 +181,24 @@ export default defineComponent({
|
|||||||
getWatchlaterList()
|
getWatchlaterList()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
parseJson(json: any): VideoCard[] {
|
|
||||||
const items = lodash.get(json, 'data.archives', [])
|
|
||||||
const cards = items.map(
|
|
||||||
(item: any): VideoCard => ({
|
|
||||||
id: item.aid,
|
|
||||||
aid: item.aid,
|
|
||||||
bvid: item.bvid,
|
|
||||||
coverUrl: item.pic,
|
|
||||||
title: item.title,
|
|
||||||
upName: item.owner.name,
|
|
||||||
upFaceUrl: item.owner.face,
|
|
||||||
upID: item.owner.mid,
|
|
||||||
playCount: item.stat.view,
|
|
||||||
danmakuCount: item.stat.danmaku,
|
|
||||||
like: item.stat.like,
|
|
||||||
coins: item.stat.coin,
|
|
||||||
description: item.desc,
|
|
||||||
dynamic: item.desc === '-' ? '' : item.desc,
|
|
||||||
type: item.tname,
|
|
||||||
duration: item.duration,
|
|
||||||
durationText: formatDuration(item.duration),
|
|
||||||
}),
|
|
||||||
)
|
|
||||||
return applyContentFilter(cards)
|
|
||||||
},
|
|
||||||
url(id: string) {
|
url(id: string) {
|
||||||
return `https://www.bilibili.com/video/${id}`
|
return `https://www.bilibili.com/video/${id}`
|
||||||
},
|
},
|
||||||
toggleWatchlater,
|
toggleWatchlater,
|
||||||
nextCard() {
|
nextCard() {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
this.items.push(this.items.shift())
|
||||||
this0.items.push(this0.items.shift())
|
|
||||||
},
|
},
|
||||||
previousCard() {
|
previousCard() {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
this.items.unshift(this.items.pop())
|
||||||
this0.items.unshift(this0.items.pop())
|
|
||||||
},
|
},
|
||||||
jumpToCard(event: MouseEvent, index: number) {
|
jumpToCard(event: MouseEvent, index: number) {
|
||||||
const this0 = this as typeof this & MixinsInstance
|
if (index <= 1 || index >= this.items.length) {
|
||||||
if (index <= 1 || index >= this0.items.length) {
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
let steps = index - 1
|
let steps = index - 1
|
||||||
const jump = () => {
|
const jump = () => {
|
||||||
this.nextCard()
|
this.nextCard()
|
||||||
steps--
|
steps -= 1
|
||||||
if (steps > 0) {
|
if (steps > 0) {
|
||||||
setTimeout(jump)
|
setTimeout(jump)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,73 +1,75 @@
|
|||||||
import { defineComponent } from 'vue'
|
import type { Ref, ComputedRef } from 'vue'
|
||||||
|
import { ref, computed, onMounted } from 'vue'
|
||||||
import { getJson } from '@/core/ajax'
|
import { getJson } from '@/core/ajax'
|
||||||
|
|
||||||
/**
|
export const requestProps = {
|
||||||
* 封装一些 API 请求的通用行为, 使用者要定义 parseJson 方法将返回的 JSON 转换为数据数组, 会自动存到 this.items 里
|
api: {
|
||||||
*/
|
type: String,
|
||||||
export const requestMixin = <Item = unknown, JsonData = unknown>(
|
required: true,
|
||||||
config: {
|
},
|
||||||
requestMethod?: (url: string) => Promise<JsonData>
|
|
||||||
} = {},
|
|
||||||
) => {
|
|
||||||
const { requestMethod = getJson } = config
|
|
||||||
return defineComponent({
|
|
||||||
props: {
|
|
||||||
api: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
items: [] as Item[],
|
|
||||||
loading: true,
|
|
||||||
error: false,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
loaded(): boolean {
|
|
||||||
return !this.loading && !this.error
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.reload().then()
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
async reload() {
|
|
||||||
const this0 = this as typeof this & { parseJson: (json: JsonData) => Item[]; itemLimit?: number }
|
|
||||||
try {
|
|
||||||
this.error = false
|
|
||||||
this.loading = true
|
|
||||||
this.items = this0
|
|
||||||
.parseJson(await requestMethod(this.api))
|
|
||||||
.slice(0, this0.itemLimit ?? Infinity)
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error)
|
|
||||||
this.error = true
|
|
||||||
} finally {
|
|
||||||
this.loading = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 将 UI 常量放到 this.ui 上, 并在根元素上同步对应的 CSS var
|
* 封装一些 API 请求的通用行为, 使用者要定义 parseJson 方法将返回的 JSON 转换为数据数组, 会自动存到 items 里
|
||||||
|
*/
|
||||||
|
export const useRequest = <Item = unknown, JsonData = unknown>(config: {
|
||||||
|
api: string
|
||||||
|
requestMethod?: (url: string) => Promise<JsonData>
|
||||||
|
parseJson: (json: JsonData) => Item[]
|
||||||
|
itemLimit?: number
|
||||||
|
}): {
|
||||||
|
items: Ref<Item[]>
|
||||||
|
loading: Ref<boolean>
|
||||||
|
error: Ref<boolean>
|
||||||
|
loaded: ComputedRef<boolean>
|
||||||
|
reload: () => Promise<void>
|
||||||
|
} => {
|
||||||
|
const items = ref([]) as Ref<Item[]>
|
||||||
|
const loading = ref(true)
|
||||||
|
const error = ref(false)
|
||||||
|
|
||||||
|
const reload = async () => {
|
||||||
|
const { api, requestMethod = getJson, parseJson, itemLimit } = config
|
||||||
|
try {
|
||||||
|
error.value = false
|
||||||
|
loading.value = true
|
||||||
|
items.value = parseJson(await requestMethod(api)).slice(0, itemLimit ?? Infinity)
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e)
|
||||||
|
error.value = true
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
reload().then()
|
||||||
|
|
||||||
|
return {
|
||||||
|
items,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
loaded: computed(() => !loading.value && !error.value),
|
||||||
|
reload,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将 UI 常量放到 ui 上, 并在根元素上同步对应的 CSS var
|
||||||
* @param variables UI 常量
|
* @param variables UI 常量
|
||||||
*/
|
*/
|
||||||
export const cssVariableMixin = (variables: Record<string, string | number>) =>
|
export const useCssVariable = <V extends Record<string, string | number>>(
|
||||||
defineComponent({
|
variables: V,
|
||||||
data() {
|
): { el: Ref<HTMLElement | null>; ui: Ref<V> } => {
|
||||||
return {
|
const el = ref(null) as Ref<HTMLElement | null>
|
||||||
ui: variables,
|
const ui = ref(variables) as Ref<V>
|
||||||
}
|
|
||||||
},
|
onMounted(() => {
|
||||||
mounted() {
|
const element = document.documentElement
|
||||||
const element = this.$el as HTMLElement
|
Object.entries(variables).forEach(([name, value]) => {
|
||||||
Object.entries(variables).forEach(([name, value]) => {
|
const stringValue = typeof value === 'number' ? `${value}px` : value
|
||||||
const stringValue = typeof value === 'number' ? `${value}px` : value
|
element.style.setProperty(`--${lodash.kebabCase(name)}`, stringValue)
|
||||||
element.style.setProperty(`--${lodash.kebabCase(name)}`, stringValue)
|
})
|
||||||
})
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
return { el, ui }
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user