Remove mixins in registry/lib/components/style/home-redesign/mixin.ts

This commit is contained in:
timongh 2023-02-08 16:26:31 +08:00
parent 78f91156eb
commit 046957478d
4 changed files with 143 additions and 147 deletions

View File

@ -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

View File

@ -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: {

View File

@ -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)
} }

View File

@ -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 }
}