mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Fix some type errors in src/components
This commit is contained in:
parent
e74b014c3a
commit
9e3a739fc2
@ -62,21 +62,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<template #toast>
|
<template #toast>
|
||||||
<div class="extra-actions-list">
|
<div class="extra-actions-list">
|
||||||
<div v-for="a of componentActions" :key="a.name">
|
<Action
|
||||||
<component
|
v-for="a in componentActions"
|
||||||
:is="a.component"
|
:key="a.name"
|
||||||
v-if="a.component"
|
:item="a"
|
||||||
:item="a"
|
:component="componentData"
|
||||||
:component="componentData"
|
/>
|
||||||
/>
|
|
||||||
<ComponentAction
|
|
||||||
v-else
|
|
||||||
v-show="a.visible !== false"
|
|
||||||
class="extra-action-item"
|
|
||||||
:item="a"
|
|
||||||
:component="componentData"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</MiniToast>
|
</MiniToast>
|
||||||
@ -88,20 +79,50 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import type { PropType } from 'vue'
|
||||||
|
import { defineComponent, h, vShow, withDirectives } from 'vue'
|
||||||
|
|
||||||
import { getComponentSettings } from '@/core/settings'
|
import { getComponentSettings } from '@/core/settings'
|
||||||
import { defineComponent, PropType } from 'vue'
|
|
||||||
import { visible } from '@/core/observer'
|
import { visible } from '@/core/observer'
|
||||||
import { MiniToast, SwitchBox, VButton, VIcon } from '@/ui'
|
import { MiniToast, SwitchBox, VButton, VIcon } from '@/ui'
|
||||||
import { ComponentMetadata } from '../component'
|
|
||||||
|
|
||||||
import type { OptionMetadata, OptionsMetadata } from '../component'
|
import type { ComponentMetadata, OptionMetadata, OptionsMetadata } from '../component'
|
||||||
import type { ComponentConfigAction } from './component-actions/component-actions'
|
import type {
|
||||||
|
ComponentConfigAction,
|
||||||
|
ComponentVueAction,
|
||||||
|
} from './component-actions/component-actions'
|
||||||
import { componentActions } from './component-actions/component-actions'
|
import { componentActions } from './component-actions/component-actions'
|
||||||
import ComponentAction from './component-actions/ComponentAction.vue'
|
import ComponentAction from './component-actions/ComponentAction.vue'
|
||||||
import ComponentDescription from './ComponentDescription.vue'
|
import ComponentDescription from './ComponentDescription.vue'
|
||||||
import ComponentOption from './ComponentOption.vue'
|
import ComponentOption from './ComponentOption.vue'
|
||||||
|
|
||||||
export default defineComponent({
|
const Action = defineComponent({
|
||||||
|
props: {
|
||||||
|
item: {
|
||||||
|
type: Object as PropType<ComponentConfigAction | ComponentVueAction>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
component: {
|
||||||
|
type: Object as PropType<ComponentMetadata>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
if ('component' in this.item) {
|
||||||
|
return h(this.item.component, { item: this.item, component: this.component })
|
||||||
|
}
|
||||||
|
return withDirectives(
|
||||||
|
h(ComponentAction, {
|
||||||
|
class: 'extra-item-item',
|
||||||
|
item: this.item,
|
||||||
|
component: this.component,
|
||||||
|
}),
|
||||||
|
[[vShow, !!this.item.visible]],
|
||||||
|
)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const ThisComponent = defineComponent({
|
||||||
components: {
|
components: {
|
||||||
ComponentDescription,
|
ComponentDescription,
|
||||||
ComponentOption,
|
ComponentOption,
|
||||||
@ -110,6 +131,7 @@ export default defineComponent({
|
|||||||
VIcon,
|
VIcon,
|
||||||
SwitchBox,
|
SwitchBox,
|
||||||
MiniToast,
|
MiniToast,
|
||||||
|
Action,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
componentData: {
|
componentData: {
|
||||||
@ -151,6 +173,7 @@ export default defineComponent({
|
|||||||
console.log(this.componentActions)
|
console.log(this.componentActions)
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
export default ThisComponent
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@ -76,7 +76,7 @@ export default defineComponent({
|
|||||||
tags: [],
|
tags: [],
|
||||||
selectedTagName: '',
|
selectedTagName: '',
|
||||||
subPages,
|
subPages,
|
||||||
selectedSubPage: null as PropType<Component | null>,
|
selectedSubPage: null as Component | null,
|
||||||
selectedSubPageOpen: false,
|
selectedSubPageOpen: false,
|
||||||
selectedSubPageTrigger: null,
|
selectedSubPageTrigger: null,
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,6 +11,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import type { ComponentMetadata } from '@/components/types'
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
import type { ComponentConfigAction } from './component-actions'
|
import type { ComponentConfigAction } from './component-actions'
|
||||||
@ -26,7 +27,7 @@ export default defineComponent({
|
|||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
component: {
|
component: {
|
||||||
type: Object,
|
type: Object as PropType<ComponentMetadata>,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
@ -10,7 +10,7 @@ import { uninstallComponent } from '../../user-component'
|
|||||||
export interface ComponentConfigAction {
|
export interface ComponentConfigAction {
|
||||||
name: string
|
name: string
|
||||||
displayName: string
|
displayName: string
|
||||||
action: Executable
|
action: (component: ComponentMetadata) => void
|
||||||
icon: string
|
icon: string
|
||||||
visible?: boolean
|
visible?: boolean
|
||||||
title?: string
|
title?: string
|
||||||
|
|||||||
@ -80,7 +80,7 @@
|
|||||||
<VEmpty v-if="debouncedList.length === 0" />
|
<VEmpty v-if="debouncedList.length === 0" />
|
||||||
<ManageItem v-for="item of debouncedList" :key="item.name">
|
<ManageItem v-for="item of debouncedList" :key="item.name">
|
||||||
<slot name="item" :item="item">
|
<slot name="item" :item="item">
|
||||||
{{ item.displayName }}
|
{{ item?.displayName }}
|
||||||
</slot>
|
</slot>
|
||||||
</ManageItem>
|
</ManageItem>
|
||||||
</div>
|
</div>
|
||||||
@ -115,7 +115,7 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
config: {
|
config: {
|
||||||
type: Object as PropType<ManagePanelConfig<unknown>>,
|
type: Object as PropType<ManagePanelConfig<{ name: string; displayName?: string }>>,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -131,11 +131,11 @@ export default defineComponent({
|
|||||||
batchAddShow: false,
|
batchAddShow: false,
|
||||||
batchUrl: '',
|
batchUrl: '',
|
||||||
excludeBuiltIn: true,
|
excludeBuiltIn: true,
|
||||||
debouncedList: [] as unknown[],
|
debouncedList: [] as { name: string; displayName?: string }[],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
filteredList(): unknown[] {
|
filteredList(): { name: string; displayName?: string }[] {
|
||||||
return this.config.list.filter(it =>
|
return this.config.list.filter(it =>
|
||||||
this.config.listFilter(it, this.search, this.excludeBuiltIn),
|
this.config.listFilter(it, this.search, this.excludeBuiltIn),
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
/** 用户内容管理面板配置 */
|
/** 用户内容管理面板配置 */
|
||||||
export interface ManagePanelConfig<ItemType> {
|
export interface ManagePanelConfig<ItemType extends { name: string; displayName?: string }> {
|
||||||
/** 唯一名称 */
|
/** 唯一名称 */
|
||||||
key: string
|
key: string
|
||||||
/** 图标 */
|
/** 图标 */
|
||||||
@ -18,8 +18,8 @@ export interface ManagePanelConfig<ItemType> {
|
|||||||
/** 表示用户内容管理面板的单个内容, 必须具有 name 和 displayName */
|
/** 表示用户内容管理面板的单个内容, 必须具有 name 和 displayName */
|
||||||
export interface ManageItem<
|
export interface ManageItem<
|
||||||
ItemType extends {
|
ItemType extends {
|
||||||
displayName: string
|
|
||||||
name: string
|
name: string
|
||||||
|
displayName?: string
|
||||||
},
|
},
|
||||||
> {
|
> {
|
||||||
/** 唯一名称 */
|
/** 唯一名称 */
|
||||||
|
|||||||
@ -4,7 +4,7 @@
|
|||||||
v-for="item of items"
|
v-for="item of items"
|
||||||
:key="item.name"
|
:key="item.name"
|
||||||
class="be-video-control-bar-extend-item bilibili-player-video-btn squirtle-block-wrap bpx-player-ctrl-btn"
|
class="be-video-control-bar-extend-item bilibili-player-video-btn squirtle-block-wrap bpx-player-ctrl-btn"
|
||||||
:style="{ order: item.order.toString() }"
|
:style="{ order: item.order }"
|
||||||
:data-name="item.name"
|
:data-name="item.name"
|
||||||
@click="item.action($event)"
|
@click="item.action($event)"
|
||||||
>
|
>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user