母版是什么
在业务系统中,母版是一种全局通用的组件,用于包裹每个页面的元素。这个概念类似于 PPT 中的母版,它定义了页面的整体结构、样式和布局,使得系统具有一致的外观和风格。
特点:
-
全局通用:母版是全局性的,适用于系统中的每个页面,确保一致性的用户体验。
-
包裹元素:母版包裹每个页面的元素,定义了整体的结构和布局。
-
外观一致性:通过统一的母版设计,系统达到外观和风格的一致性。
与 PPT 母版的类比:
在母版的概念上,与 PPT 中的母版类似,都是用于定义整体结构和样式,确保每个页面都具有一致的外观。
默认母版范围:
作用场景
在系统中,我们提供了多个纬度的母版,包括全局、应用和页面纬度。这样的设计允许根据不同的业务场景选择合适的母版纬度,以满足不同层次的定制需求。
母版纬度:
-
全局母版:
- 覆盖系统中所有页面,确保全局的一致性和统一的用户体验。
- 定义全局性的结构、样式和布局。
-
应用母版:
- 适用于特定应用或模块,定制化程度介于全局和页面之间。
- 允许在不同应用间实现一定的差异化。
-
页面母版:
- 面向具体页面,提供最大的定制化空间。
- 允许在不同页面中定义不同的结构和样式。
选择纬度:
- 业务场景决定:根据具体的业务场景和需求选择合适的母版纬度。
- 定制化需求:如果需要全局一致性,选择全局母版;如果在应用层面有特定需求,选择应用母版;如果需要最大的灵活性和定制化,选择页面母版。
参数说明:
在系统中,使用 registerMask 注册母版时,需要提供两个参数。第一个参数是母版的 XML,第二个参数用于控制母版的注册行为,包括 module、moduleName、model 和 actionName。
-
母版 XML(第一个参数):
- 提供母版的 XML 描述,定义了母版的结构和样式。
-
控制参数(第二个参数):
- module:指定模块的名称。
- moduleName:指定模块的显示名称。
- model:指定母版所属的模型。
- actionName:指定母版的操作名称,可以是字符串或字符串数组。
全局母版
可以使用 registerMask 注册母版。当第二个参数为 {} 时,即代表注册全局母版。
示例工程目录
以下是需关注的工程目录示例,并确保导入导出依赖正确:
示例代码
以下是一个示例代码:
import { registerMask } from '@kunlun/dependencies';
/**
* mask: 在做系统时,我们通常会把外层的布局(菜单、顶部导航)等抽出公共组件,公共组件会抽离全局通用。类似ppt母版的概念即为Mask
* registerMask 第二个入参为{}即注册了全局得母版
*
* 和默认母版相比移除右上角消息、语言切换、用户
* `<block>
* <widget widget="notification" />
* <widget widget="divider" />
* <widget widget="language" />
* <widget widget="divider" />
* <widget widget="user" />
* </block>`
*/
const registerGlobalMask = () => {
registerMask(`
<mask>
<multi-tabs />
<header>
<widget widget="app-switcher" />
</header>
<container>
<sidebar>
<widget widget="nav-menu" height="100%" />
</sidebar>
<content>
<breadcrumb />
<block width="100%">
<widget width="100%" widget="main-view" />
</block>
</content>
</container>
</mask>`, {});
}
registerGlobalMask();
复制这段代码执行下registerGlobalMask()试试看吧
效果
右上角消息、语言切换、用户被移除。
应用母版
在系统中,可以使用 registerMask 注册母版。当第二个参数为 {moduleName: ‘resource’} 时,即注册了 resource(资源)应用的母版。
示例工程目录
以下是需关注的工程目录示例,更新导出./moduleMask:
示例代码
以下是一个示例代码:
/**
* registerMask 第二个入参为{moduleName: 'resource'}即注册了resource(资源)应用的母版
*
* resource来源: 通常是浏览器url上的module
*
* 和默认模版相比拿掉了菜单
* `<sidebar>
* <widget widget="nav-menu" height="100%" />
* </sidebar>`
* */
const registerModuleMask = () => {
registerMask(`<mask>
<multi-tabs />
<header>
<widget widget="app-switcher" />
<block>
<widget widget="notification" />
<widget widget="divider" />
<widget widget="language" />
<widget widget="divider" />
<widget widget="user" />
</block>
</header>
<container>
<content>
<breadcrumb />
<block width="100%">
<widget width="100%" widget="main-view" />
</block>
</content>
</container>
</mask>`, { moduleName: 'resource'})
}
registerModuleMask();
在这个示例中,通过将第二个参数设置为 {moduleName: ‘resource’},实现了注册 resource 应用的母版。该母版包含了特定于 resource 应用的全局结构和布局,并在示例中去掉了菜单部分。
这样的设计使得可以根据不同应用注册不同的母版,以满足应用层面的定制需求。
效果
页面母版
在系统中,可以使用 registerMask 注册母版。当第二个参数为 {moduleName: ‘resource’, model: ‘resource.ResourceRegionProxyModel’} 时,即注册了 resource(资源)应用和 这个应用下ResourceRegionProxyModel(地区)模型的母版。
示例工程目录
以下是需关注的工程目录示例,更新导出./viewMask:
示例代码
以下是一个示例代码:
/**
* registerMask 第二个入参为{moduleName: 'resource', model: 'resource.ResourceRegionProxyModel'}即注册了resource(资源)和resource.ResourceRegionProxyModel(地区)模型的母版
*
* resource来源: 通常是浏览器url上的module
* model来源: 通常是浏览器url上的model
*
* 拿掉菜单
* `<sidebar>
* <widget widget="nav-menu" height="100%" />
* </sidebar>`
*
* 拿掉appFounder
* `<widget widget="app-switcher" />`
* */
const registerViewMask = () => {
registerMask(`<mask>
<multi-tabs />
<header>
<block>
<widget widget="notification" />
<widget widget="divider" />
<widget widget="language" />
<widget widget="divider" />
<widget widget="user" />
</block>
</header>
<container>
<content>
<breadcrumb />
<block width="100%">
<widget width="100%" widget="main-view" />
</block>
</content>
</container>
</mask>`, { moduleName: 'resource', model: 'resource.ResourceRegionProxyModel'})
}
registerViewMask();
在这个示例中,通过将第二个参数设置为 {moduleName: ‘resource’, model: ‘resource.ResourceRegionProxyModel’},实现了注册 Resource 应用和 ResourceRegionProxyModel 模型的母版。该母版包含了特定于这两个条件的全局结构和布局,并在示例中去掉了菜单和应用切换部分。
效果
这样的设计使得可以根据不同应用和模型注册不同的母版,以满足不同层次的定制需求
扩展母版
在系统中,除了平台内置的母版组件和布局外,开发者还可以自由地添加自定义的组件和布局,以决定应用的个性化。以下是一些示例代码和说明:
注册母版组件
在这个示例中,我们注册了一个名为 custom-mask-widget 的自定义组件,并使用 CustomMaskWidget 类初始化了该组件。
示例工程目录
以下是需关注的工程目录示例,更新导出./widget:
示例代码
以下是代码示例和相应的组件实现:
1. 注册自定义组件:
import { SPI, MaskWidget } from '@kunlun/dependencies'
import CustomMaskWidgetVue from './MaskWidget.vue'
@SPI.ClassFactory(MaskWidget.Token({ widget: 'custom-mask-widget' }))
export class CustomMaskWidget extends MaskWidget {
public initialize(props) {
super.initialize(props);
this.setComponent(CustomMaskWidgetVue);
return this;
}
}
在这段代码中,我们使用 @SPI.ClassFactory 注解来创建 CustomMaskWidget 类,并使用 MaskWidget.Token 注入组件的标识。通过 setComponent 方法,我们将组件与 CustomMaskWidgetVue 相关联。
2. 自定义组件实现(MaskWidget.vue):
<template>
<div class="mask-widget-wrapper">
<h1>Mask组件</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
inheritAttrs: false,
name: 'CustomMaskWidgetVue'
})
</script>
<style lang="scss">
.mask-widget-wrapper {
display: flex;
align-items: center;
background-color: var(--oio-disable-color);
h1 {
color: red;
}
}
</style>
在 MaskWidget.vue 文件中,我们定义了 CustomMaskWidgetVue 组件的模板、逻辑和样式。这个组件简单地展示了一个包含标题的容器。
通过这个示例,我们展示了如何使用 SPI 和 Vue 来注册和实现自定义组件,以满足系统中的个性化需求
自定义母版
在这个示例中,我们注册了一个全局母版,并将自定义组件 custom-mask-widget 与母版结合。
示例工程目录
以下是需关注的工程目录示例,新导出了./globalMask:
示例代码
以下是代码示例:
const registerGlobalMask = () => {
registerMask(`
<mask>
<multi-tabs />
<header>
<widget widget="language" />
+ <widget widget="custom-mask-widget" />
</header>
<container>
<sidebar>
<widget widget="nav-menu" height="100%" />
</sidebar>
<content>
<breadcrumb />
<block width="100%">
<widget width="100%" widget="main-view" />
</block>
</content>
</container>
</mask>`, {});
}
registerGlobalMask();
在这段代码中,我们使用 registerMask 注册了一个全局母版,其中包含了多个内置组件和布局元素。通过
效果
Oinone社区 作者:史, 昂原创文章,如若转载,请注明出处:https://doc.oinone.top/oio4/9265.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验