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>
|
||||
<div
|
||||
ref="el"
|
||||
class="fresh-home-categories-bangumi-timeline-content"
|
||||
:class="{ loading, loaded, scrolled, empty: items.length === 0 }"
|
||||
>
|
||||
@ -105,7 +106,7 @@ import { enableHorizontalScroll } from '@/core/horizontal-scroll'
|
||||
import { addComponentListener } from '@/core/settings'
|
||||
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 { rankListCssVars } from './rank-list'
|
||||
|
||||
@ -155,9 +156,6 @@ const timelineCssVars = (() => {
|
||||
timelineViewportHeight,
|
||||
}
|
||||
})()
|
||||
const mixin0 = requestMixin<TimelineDay>({ requestMethod: getJsonWithCredentials })
|
||||
const mixin1 = cssVariableMixin(timelineCssVars)
|
||||
type MixinsInstance = InstanceType<typeof mixin0> & InstanceType<typeof mixin1>
|
||||
export default defineComponent({
|
||||
components: {
|
||||
DpiImage,
|
||||
@ -165,7 +163,15 @@ export default defineComponent({
|
||||
VEmpty,
|
||||
VLoading,
|
||||
},
|
||||
mixins: [mixin0, mixin1],
|
||||
props: requestProps,
|
||||
setup: props => ({
|
||||
...useRequest<TimelineDay>({
|
||||
api: props.api,
|
||||
parseJson: (json: any) => json.result ?? [],
|
||||
requestMethod: getJsonWithCredentials,
|
||||
}),
|
||||
...useCssVariable(timelineCssVars),
|
||||
}),
|
||||
data() {
|
||||
return {
|
||||
observers: [],
|
||||
@ -176,23 +182,19 @@ export default defineComponent({
|
||||
},
|
||||
computed: {
|
||||
todayIndex(): number {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
return this0.items.findIndex(it => it.is_today === 1)
|
||||
return this.items.findIndex(it => it.is_today === 1)
|
||||
},
|
||||
pastWeekItems(): TimelineDay[] {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
return this0.items.slice(0, this0.todayIndex + 1)
|
||||
return this.items.slice(0, this.todayIndex + 1)
|
||||
},
|
||||
currentWeekItems(): TimelineDay[] {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
return this0.items.slice(this0.todayIndex)
|
||||
return this.items.slice(this.todayIndex)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
loaded() {
|
||||
const this0 = this as typeof this & { loaded: boolean }
|
||||
if (this0.loaded) {
|
||||
this0.updateScrollPosition()
|
||||
if (this.loaded) {
|
||||
this.updateScrollPosition()
|
||||
}
|
||||
},
|
||||
},
|
||||
@ -203,7 +205,7 @@ export default defineComponent({
|
||||
const element = this.$el as HTMLElement
|
||||
let ended = 0
|
||||
const endHandler = () => {
|
||||
ended++
|
||||
ended += 1
|
||||
if (ended >= 7) {
|
||||
element.classList.add('snap')
|
||||
element.removeEventListener('animationend', endHandler)
|
||||
@ -219,9 +221,6 @@ export default defineComponent({
|
||||
cleanUpScrollMask(...list)
|
||||
},
|
||||
methods: {
|
||||
parseJson(json: any) {
|
||||
return json.result ?? []
|
||||
},
|
||||
async updateScrollPosition() {
|
||||
await this.$nextTick()
|
||||
const list: HTMLElement[] = this.$refs.seasonsList
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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">
|
||||
<VLoading v-if="loading" />
|
||||
<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 { DpiImage, VButton, VEmpty, VIcon, VLoading } from '@/ui'
|
||||
|
||||
import { cssVariableMixin, requestMixin } from '../../../../mixin'
|
||||
import { type RankListCard, rankListCssVars } from './rank-list'
|
||||
import { requestProps, useCssVariable, useRequest } from '../../../../mixin'
|
||||
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({
|
||||
components: {
|
||||
DpiImage,
|
||||
@ -125,7 +123,6 @@ export default defineComponent({
|
||||
VEmpty,
|
||||
VButton,
|
||||
},
|
||||
mixins: [mixin0, mixin1],
|
||||
props: {
|
||||
parseJson: {
|
||||
type: Function as PropType<(json: unknown) => RankListCard[]>,
|
||||
@ -135,19 +132,21 @@ export default defineComponent({
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
...requestProps,
|
||||
},
|
||||
setup: props => ({
|
||||
...useRequest<RankListCard>({ api: props.api, parseJson: props.parseJson }),
|
||||
...useCssVariable(rankListCssVars),
|
||||
}),
|
||||
computed: {
|
||||
firstItem(): RankListCard | undefined {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
return this0.items[0]
|
||||
return this.items[0]
|
||||
},
|
||||
secondItem(): RankListCard | undefined {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
return this0.items[1]
|
||||
return this.items[1]
|
||||
},
|
||||
thirdItem(): RankListCard | undefined {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
return this0.items[2]
|
||||
return this.items[2]
|
||||
},
|
||||
upInfoProps(): { size: number; icon: string; style: { transform: string } } {
|
||||
return {
|
||||
@ -159,12 +158,10 @@ export default defineComponent({
|
||||
}
|
||||
},
|
||||
firstRow(): RankListCard[] {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
return this0.items.slice(3, 6)
|
||||
return this.items.slice(3, 6)
|
||||
},
|
||||
secondRow(): RankListCard[] {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
return this0.items.slice(6, 10)
|
||||
return this.items.slice(6, 10)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -111,51 +111,9 @@ import { getWatchlaterList, toggleWatchlater, watchlaterList } from '@/component
|
||||
import { formatDuration } from '@/core/utils/formatters'
|
||||
import { DpiImage, VButton, VEmpty, VIcon, VLoading } from '@/ui'
|
||||
|
||||
import { cssVariableMixin, requestMixin } from '../../../../mixin'
|
||||
import { requestProps, useCssVariable, useRequest } from '../../../../mixin'
|
||||
|
||||
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({
|
||||
components: {
|
||||
VButton,
|
||||
VIcon,
|
||||
DpiImage,
|
||||
VLoading,
|
||||
VEmpty,
|
||||
},
|
||||
mixins: [mixin0, mixin1],
|
||||
data() {
|
||||
return {
|
||||
watchlaterList,
|
||||
itemLimit: 10,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentItem(): VideoCard | undefined {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
return this0.items[1]
|
||||
},
|
||||
currentUrl(): string {
|
||||
return this.url(this.currentItem!.bvid)
|
||||
},
|
||||
watchlaterAdded(): boolean {
|
||||
return this.watchlaterList.includes(this.currentItem.aid)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
getWatchlaterList()
|
||||
},
|
||||
methods: {
|
||||
parseJson(json: any): VideoCard[] {
|
||||
const parseJson = (json: any): VideoCard[] => {
|
||||
const items = lodash.get(json, 'data.archives', [])
|
||||
const cards = items.map(
|
||||
(item: any): VideoCard => ({
|
||||
@ -179,28 +137,68 @@ export default defineComponent({
|
||||
}),
|
||||
)
|
||||
return applyContentFilter(cards)
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VButton,
|
||||
VIcon,
|
||||
DpiImage,
|
||||
VLoading,
|
||||
VEmpty,
|
||||
},
|
||||
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() {
|
||||
return {
|
||||
watchlaterList,
|
||||
itemLimit: 10,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentItem(): VideoCard | undefined {
|
||||
return this.items[1]
|
||||
},
|
||||
currentUrl(): string {
|
||||
return this.url(this.currentItem!.bvid)
|
||||
},
|
||||
watchlaterAdded(): boolean {
|
||||
return this.watchlaterList.includes(this.currentItem.aid)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
getWatchlaterList()
|
||||
},
|
||||
methods: {
|
||||
url(id: string) {
|
||||
return `https://www.bilibili.com/video/${id}`
|
||||
},
|
||||
toggleWatchlater,
|
||||
nextCard() {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
this0.items.push(this0.items.shift())
|
||||
this.items.push(this.items.shift())
|
||||
},
|
||||
previousCard() {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
this0.items.unshift(this0.items.pop())
|
||||
this.items.unshift(this.items.pop())
|
||||
},
|
||||
jumpToCard(event: MouseEvent, index: number) {
|
||||
const this0 = this as typeof this & MixinsInstance
|
||||
if (index <= 1 || index >= this0.items.length) {
|
||||
if (index <= 1 || index >= this.items.length) {
|
||||
return
|
||||
}
|
||||
let steps = index - 1
|
||||
const jump = () => {
|
||||
this.nextCard()
|
||||
steps--
|
||||
steps -= 1
|
||||
if (steps > 0) {
|
||||
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'
|
||||
|
||||
/**
|
||||
* 封装一些 API 请求的通用行为, 使用者要定义 parseJson 方法将返回的 JSON 转换为数据数组, 会自动存到 this.items 里
|
||||
*/
|
||||
export const requestMixin = <Item = unknown, JsonData = unknown>(
|
||||
config: {
|
||||
requestMethod?: (url: string) => Promise<JsonData>
|
||||
} = {},
|
||||
) => {
|
||||
const { requestMethod = getJson } = config
|
||||
return defineComponent({
|
||||
props: {
|
||||
export const requestProps = {
|
||||
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 常量
|
||||
*/
|
||||
export const cssVariableMixin = (variables: Record<string, string | number>) =>
|
||||
defineComponent({
|
||||
data() {
|
||||
return {
|
||||
ui: variables,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const element = this.$el as HTMLElement
|
||||
export const useCssVariable = <V extends Record<string, string | number>>(
|
||||
variables: V,
|
||||
): { el: Ref<HTMLElement | null>; ui: Ref<V> } => {
|
||||
const el = ref(null) as Ref<HTMLElement | null>
|
||||
const ui = ref(variables) as Ref<V>
|
||||
|
||||
onMounted(() => {
|
||||
const element = document.documentElement
|
||||
Object.entries(variables).forEach(([name, value]) => {
|
||||
const stringValue = typeof value === 'number' ? `${value}px` : value
|
||||
element.style.setProperty(`--${lodash.kebabCase(name)}`, stringValue)
|
||||
})
|
||||
},
|
||||
})
|
||||
|
||||
return { el, ui }
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user