Fix some type errors in src/components

This commit is contained in:
timongh 2023-02-09 23:35:46 +08:00
parent e74b014c3a
commit 9e3a739fc2
7 changed files with 54 additions and 30 deletions

View File

@ -62,21 +62,12 @@
</div>
<template #toast>
<div class="extra-actions-list">
<div v-for="a of componentActions" :key="a.name">
<component
:is="a.component"
v-if="a.component"
:item="a"
:component="componentData"
/>
<ComponentAction
v-else
v-show="a.visible !== false"
class="extra-action-item"
:item="a"
:component="componentData"
/>
</div>
<Action
v-for="a in componentActions"
:key="a.name"
:item="a"
:component="componentData"
/>
</div>
</template>
</MiniToast>
@ -88,20 +79,50 @@
</template>
<script lang="ts">
import type { PropType } from 'vue'
import { defineComponent, h, vShow, withDirectives } from 'vue'
import { getComponentSettings } from '@/core/settings'
import { defineComponent, PropType } from 'vue'
import { visible } from '@/core/observer'
import { MiniToast, SwitchBox, VButton, VIcon } from '@/ui'
import { ComponentMetadata } from '../component'
import type { OptionMetadata, OptionsMetadata } from '../component'
import type { ComponentConfigAction } from './component-actions/component-actions'
import type { ComponentMetadata, OptionMetadata, OptionsMetadata } from '../component'
import type {
ComponentConfigAction,
ComponentVueAction,
} from './component-actions/component-actions'
import { componentActions } from './component-actions/component-actions'
import ComponentAction from './component-actions/ComponentAction.vue'
import ComponentDescription from './ComponentDescription.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: {
ComponentDescription,
ComponentOption,
@ -110,6 +131,7 @@ export default defineComponent({
VIcon,
SwitchBox,
MiniToast,
Action,
},
props: {
componentData: {
@ -151,6 +173,7 @@ export default defineComponent({
console.log(this.componentActions)
},
})
export default ThisComponent
</script>
<style lang="scss">

View File

@ -76,7 +76,7 @@ export default defineComponent({
tags: [],
selectedTagName: '',
subPages,
selectedSubPage: null as PropType<Component | null>,
selectedSubPage: null as Component | null,
selectedSubPageOpen: false,
selectedSubPageTrigger: null,
}

View File

@ -11,6 +11,7 @@
</div>
</template>
<script lang="ts">
import type { ComponentMetadata } from '@/components/types'
import { defineComponent } from 'vue'
import type { PropType } from 'vue'
import type { ComponentConfigAction } from './component-actions'
@ -26,7 +27,7 @@ export default defineComponent({
required: true,
},
component: {
type: Object,
type: Object as PropType<ComponentMetadata>,
required: true,
},
},

View File

@ -10,7 +10,7 @@ import { uninstallComponent } from '../../user-component'
export interface ComponentConfigAction {
name: string
displayName: string
action: Executable
action: (component: ComponentMetadata) => void
icon: string
visible?: boolean
title?: string

View File

@ -80,7 +80,7 @@
<VEmpty v-if="debouncedList.length === 0" />
<ManageItem v-for="item of debouncedList" :key="item.name">
<slot name="item" :item="item">
{{ item.displayName }}
{{ item?.displayName }}
</slot>
</ManageItem>
</div>
@ -115,7 +115,7 @@ export default defineComponent({
},
props: {
config: {
type: Object as PropType<ManagePanelConfig<unknown>>,
type: Object as PropType<ManagePanelConfig<{ name: string; displayName?: string }>>,
required: true,
},
},
@ -131,11 +131,11 @@ export default defineComponent({
batchAddShow: false,
batchUrl: '',
excludeBuiltIn: true,
debouncedList: [] as unknown[],
debouncedList: [] as { name: string; displayName?: string }[],
}
},
computed: {
filteredList(): unknown[] {
filteredList(): { name: string; displayName?: string }[] {
return this.config.list.filter(it =>
this.config.listFilter(it, this.search, this.excludeBuiltIn),
)

View File

@ -1,5 +1,5 @@
/** 用户内容管理面板配置 */
export interface ManagePanelConfig<ItemType> {
export interface ManagePanelConfig<ItemType extends { name: string; displayName?: string }> {
/** 唯一名称 */
key: string
/** 图标 */
@ -18,8 +18,8 @@ export interface ManagePanelConfig<ItemType> {
/** 表示用户内容管理面板的单个内容, 必须具有 name 和 displayName */
export interface ManageItem<
ItemType extends {
displayName: string
name: string
displayName?: string
},
> {
/** 唯一名称 */

View File

@ -4,7 +4,7 @@
v-for="item of items"
:key="item.name"
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"
@click="item.action($event)"
>