diff --git a/docs/extension-capabilities-tutorial/customize-page-configured.md b/docs/extension-capabilities-tutorial/customize-page-configured.md new file mode 100644 index 00000000..8ba33685 --- /dev/null +++ b/docs/extension-capabilities-tutorial/customize-page-configured.md @@ -0,0 +1,41 @@ +# 页面操作菜单支持配置 + +我们提供了页面操作菜单增加自定义操作 + +当前是默认操作菜单项 + +![页面默认操作菜单](./imgs/page-default-action.png) + +## 通过配置项来定制 + +- `customPageOperations`:自定义操作配置项 +- `type`:菜单项类型 +- `label`:菜单项名称 +- `action`:菜单项操作 + +```js +// registry.js +import { handleClickDelete } from './tests/utils' +export default { + // ... + plugins: [ + // ... + [Page, { options: { ...Page.options, customPageOperations: [{type: 'delete', label: '删除', action: handleClickDelete}] } }] + // ... + ] + // ... +} +``` + +![页面增加自定义操作菜单项](./imgs/page-custom-action.png) + +方法中传有两个参数 + +```js +export const handleClickDelete = async (node, emit) => { + // node 为所选择的页面的信息, 可以直接调接口处理数据 + // emit 可以调用页面父组件的方法,例如 在选择的页面下新建子页面 emit('createPage', 'staticPages', node.id) +} +``` + + diff --git a/docs/extension-capabilities-tutorial/imgs/page-custom-action.png b/docs/extension-capabilities-tutorial/imgs/page-custom-action.png new file mode 100644 index 00000000..260bcd14 Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/page-custom-action.png differ diff --git a/docs/extension-capabilities-tutorial/imgs/page-default-action.png b/docs/extension-capabilities-tutorial/imgs/page-default-action.png new file mode 100644 index 00000000..bf15540e Binary files /dev/null and b/docs/extension-capabilities-tutorial/imgs/page-default-action.png differ diff --git a/packages/plugins/page/src/PageTree.vue b/packages/plugins/page/src/PageTree.vue index e6a0978c..6573155e 100644 --- a/packages/plugins/page/src/PageTree.vue +++ b/packages/plugins/page/src/PageTree.vue @@ -66,6 +66,7 @@ import { useNotify, useMessage, getMetaApi, + getOptions, META_SERVICE } from '@opentiny/tiny-engine-meta-register' import { isEqual } from '@opentiny/vue-renderless/common/object' @@ -77,6 +78,7 @@ import { closeFolderSettingPanel } from './PageFolderSetting.vue' import http from './http' import DraggableTree from './Tree.vue' import { SvgButton } from '@opentiny/tiny-engine-common' +import meta from '../meta' const { PAGE_STATUS } = constants @@ -112,6 +114,7 @@ export default { } = usePage() const { fetchPageDetail, requestUpdatePage } = http const getAppId = () => getMetaApi(META_SERVICE.GlobalService).getBaseInfo().id + const { customPageOperations = [] } = getOptions(meta.id) const state = reactive({ pageSearchValue: '', @@ -250,7 +253,8 @@ export default { { type: 'divider' }, { type: 'createPage', label: '新建子页面', action: createPage }, { type: 'createFolder', label: '新建子文件夹', action: createFolder }, - { type: 'settingHome', label: '设置为主页', action: settingHome } + { type: 'settingHome', label: '设置为主页', action: settingHome }, + ...customPageOperations // TODO 复制和删除的逻辑耦合在其他组件内,暂时屏蔽 // { type: 'divider' }, // { type: 'copy', label: '复制页面', action: copyPage }, @@ -258,7 +262,7 @@ export default { ].map((item) => ({ ...item, action: (node) => { - item.action?.(node) + item.action?.(node, emit) // 点击 action 后,关闭 popover 弹窗 popoverRefs[node.id]?.doClose?.() }