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> </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">

View File

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

View File

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

View File

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

View File

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

View File

@ -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
}, },
> { > {
/** 唯一名称 */ /** 唯一名称 */

View File

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