<template>
<toolbar-base
:content="isBlock() ? '区块设置' : '页面设置'"
:icon="options.icon.default || options.icon"
:options="options"
@click-api="openSetting"
>
</toolbar-base>
</template>
<script lang="jsx">
import { useCanvas, useLayout, useBlock, usePage, useModal, useNotify } from '@opentiny/tiny-engine-meta-register'
import { constants } from '@opentiny/tiny-engine-utils'
import { ToolbarBase } from '@opentiny/tiny-engine-common'
const { PAGE_STATUS } = constants
export default {
components: {
ToolbarBase
},
props: {
options: {
type: Object,
default: () => ({})
}
},
setup() {
const { pageState, isBlock } = useCanvas()
const { getCurrentBlock } = useBlock()
const { initCurrentPageData, isChangePageData } = usePage()
const { PLUGIN_NAME, activePlugin, layoutState, isEmptyPage } = useLayout()
const { confirm, message } = useModal()
const openBlockSetting = () => {
activePlugin(PLUGIN_NAME.BlockManage).then((api) => {
api.openSettingPanel({ item: getCurrentBlock() })
})
}
const openPageAndInit = async (api) => {
const { currentPage } = pageState
api.openPageSettingPanel()
const page = await api.getPageById(currentPage.id)
initCurrentPageData(page)
}
const openPageSetting = () => {
const { pageStatus } = layoutState
if (pageStatus.state === PAGE_STATUS.Lock) {
const username = pageStatus.data?.username || ''
message({
message: `您点击的页面被${username}锁定,暂时无法编辑,请联系解锁`,
status: 'info'
})
return
}
activePlugin(PLUGIN_NAME.AppManage).then((api) => {
if (isChangePageData()) {
confirm({
title: '提示',
message: `当前页面尚未保存,是否要继续切换?`,
exec: () => {
openPageAndInit(api)
}
})
return
}
openPageAndInit(api)
})
}
const openSetting = () => {
if (isEmptyPage()) {
useNotify({ type: 'warning', message: '请先创建页面' })
return
}
if (isBlock()) {
openBlockSetting()
return
}
openPageSetting()
}
return {
openSetting,
isBlock
}
}
}
</script>