mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Perfect the type of styled-components
This commit is contained in:
parent
691ed33188
commit
1dbbc36d22
@ -1,6 +1,16 @@
|
||||
import { defineComponentMetadata } from '@/components/define'
|
||||
import { defineComponentMetadata, defineOptionsMetadata, OptionsOfMetadata } from '@/components/define'
|
||||
import { startResolution } from './resolution'
|
||||
|
||||
const options = defineOptionsMetadata({
|
||||
scale: {
|
||||
displayName: '缩放级别',
|
||||
defaultValue: 'auto',
|
||||
hidden: true,
|
||||
},
|
||||
})
|
||||
|
||||
export type Options = OptionsOfMetadata<typeof options>
|
||||
|
||||
export const component = defineComponentMetadata({
|
||||
name: 'imageResolution',
|
||||
displayName: '高分辨率图片',
|
||||
@ -12,11 +22,5 @@ export const component = defineComponentMetadata({
|
||||
description: {
|
||||
'zh-CN': '根据屏幕 DPI 请求更高分辨率的图片, 例如 DPI 缩放 200% 则请求 2 倍的分辨率, 加载时间也会相应变长一些. (也会导致某些浏览器里出现图片闪动, 因为本质上是更换了图片源)',
|
||||
},
|
||||
options: {
|
||||
scale: {
|
||||
displayName: '缩放级别',
|
||||
defaultValue: 'auto',
|
||||
hidden: true,
|
||||
},
|
||||
},
|
||||
options,
|
||||
})
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { styledComponentEntry } from '@/components/styled-component'
|
||||
import { Options } from '.'
|
||||
|
||||
const resizeRegex = /@(\d+)[Ww]_(\d+)[Hh]/
|
||||
const excludeSelectors = [
|
||||
@ -59,7 +60,7 @@ export const imageResolution = async (dpi: number, element: HTMLElement) => {
|
||||
replaceSource(e => e.style.backgroundImage, (e, v) => (e.style.backgroundImage = v))
|
||||
})
|
||||
}
|
||||
export const startResolution = styledComponentEntry(() => import('./fix.scss'),
|
||||
export const startResolution = styledComponentEntry<Options>(() => import('./fix.scss'),
|
||||
async ({ settings }) => {
|
||||
const { allMutations } = await import('@/core/observer')
|
||||
const dpi = settings.options.scale === 'auto'
|
||||
|
||||
@ -1,33 +1,31 @@
|
||||
import { none } from '@/core/utils'
|
||||
import { ComponentEntry, ComponentMetadata } from './component'
|
||||
import { ComponentEntry, ComponentMetadata, UnknownOptions } from './component'
|
||||
|
||||
/**
|
||||
* 创建一个自动添加指定样式的组件入口函数
|
||||
* @param styleImport 动态导入样式的函数
|
||||
* @param entry 组件入口函数
|
||||
*/
|
||||
export const styledComponentEntry = (
|
||||
export const styledComponentEntry = <O extends UnknownOptions>(
|
||||
styleImport: () => Promise<{ default: string }>,
|
||||
entry: ComponentEntry,
|
||||
): ComponentEntry => (
|
||||
async context => {
|
||||
entry: ComponentEntry<O>,
|
||||
): ComponentEntry<O> => async context => {
|
||||
const { default: style } = await styleImport()
|
||||
const { addStyle } = await import('@/core/style')
|
||||
addStyle(style, context.metadata.name)
|
||||
return entry(context)
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* 创建仅切换样式的组件`entry`, `reload`和`unload`, 展开至组件定义中即可, 也可以提供可选的组件入口函数
|
||||
* @param styleImport 动态导入样式的函数
|
||||
* @param entry 组件入口函数
|
||||
*/
|
||||
export const toggleStyle = (
|
||||
export const toggleStyle = <O extends UnknownOptions>(
|
||||
name: string,
|
||||
styleImport: () => Promise<{ default: string }>,
|
||||
entry: ComponentEntry = none,
|
||||
): Pick<ComponentMetadata, 'name' | 'entry' | 'reload' | 'unload'> => {
|
||||
entry: ComponentEntry<O> = none,
|
||||
): Pick<ComponentMetadata<O>, 'name' | 'entry' | 'reload' | 'unload'> => {
|
||||
let styleElement: HTMLStyleElement = null
|
||||
const styleEntry = async () => {
|
||||
if (styleElement) {
|
||||
@ -39,9 +37,7 @@ export const toggleStyle = (
|
||||
}
|
||||
return {
|
||||
name,
|
||||
entry: context => (
|
||||
styleEntry().then(() => entry(context))
|
||||
),
|
||||
entry: context => styleEntry().then(() => entry(context)),
|
||||
reload: styleEntry,
|
||||
unload: () => {
|
||||
styleElement?.remove()
|
||||
|
||||
Loading…
Reference in New Issue
Block a user