Change settingsContainer to define api

This commit is contained in:
timongh 2022-03-21 04:56:53 +08:00
parent 8d83d55fe3
commit e21a9db070

View File

@ -4,7 +4,8 @@ import { TextColor } from '@/core/text-color'
import { CdnTypes } from '@/core/cdn-types' import { CdnTypes } from '@/core/cdn-types'
import { addComponentListener } from '@/core/settings' import { addComponentListener } from '@/core/settings'
import { DownloadPackageEmitMode } from '@/core/download-mode' import { DownloadPackageEmitMode } from '@/core/download-mode'
import { ComponentEntry, ComponentMetadata, componentsTags } from '../types' import { ComponentEntry, componentsTags } from '../types'
import { defineOptionsMetadata, defineComponentMetadata } from '../define'
import { provideActions } from './external-actions' import { provideActions } from './external-actions'
import description from './desc.md' import description from './desc.md'
@ -14,27 +15,7 @@ export enum SettingsPanelDockSide {
Right = '右侧', Right = '右侧',
} }
const entry: ComponentEntry = async ({ metadata }) => { const options = defineOptionsMetadata({
const { isIframe } = await import('@/core/utils')
if (isIframe()) {
return
}
addComponentListener(`${metadata.name}.dockSide`, (value: SettingsPanelDockSide) => {
document.body.classList.toggle('settings-panel-dock-right', value === SettingsPanelDockSide.Right)
}, true)
requestIdleCallback(async () => {
const Container = await import('./SettingsContainer.vue')
const instance = mountVueComponent(Container)
document.body.insertAdjacentElement('beforeend', instance.$el)
})
}
export const component: ComponentMetadata = {
name: 'settingsPanel',
displayName: '通用设置',
configurable: false,
description,
entry,
options: {
themeColor: { themeColor: {
defaultValue: '#00A0D8', defaultValue: '#00A0D8',
displayName: '主题颜色', displayName: '主题颜色',
@ -82,7 +63,30 @@ export const component: ComponentMetadata = {
defaultValue: false, defaultValue: false,
displayName: '开发者模式', displayName: '开发者模式',
}, },
}, })
const entry: ComponentEntry<typeof options> = async ({ metadata }) => {
const { isIframe } = await import('@/core/utils')
if (isIframe()) {
return
}
addComponentListener(`${metadata.name}.dockSide`, (value: SettingsPanelDockSide) => {
document.body.classList.toggle('settings-panel-dock-right', value === SettingsPanelDockSide.Right)
}, true)
requestIdleCallback(async () => {
const Container = await import('./SettingsContainer.vue')
const instance = mountVueComponent(Container)
document.body.insertAdjacentElement('beforeend', instance.$el)
})
}
export const component = defineComponentMetadata({
name: 'settingsPanel',
displayName: '通用设置',
configurable: false,
description,
entry,
options,
tags: [componentsTags.general], tags: [componentsTags.general],
i18n: { i18n: {
'en-US': { 'en-US': {
@ -103,4 +107,4 @@ export const component: ComponentMetadata = {
provideActions() provideActions()
}, },
}, },
} })