mky-vent-base/src/views/vent/home/configurable

可配置首页文档及开发指引

可配置首页是一个能让用户在线上进行灵活变更的首页，它可以在配置正确的布局、模块后展示它们，提供了更为低成本的维护方式。

配置详解

具体的配置字段及注释请见 /views/vent/deviceManager/configurationTable/types.ts

目录结构

/configurable

--xxx.vue 各个首页的具体文件，每个首页需要一个文件来承载它们的子模块，放置特殊的装饰以及实现特定的功能。例如 dustBD 即为保德煤矿专用的粉尘首页。

--mock.ts 提供一些模拟数据

--configurable.data.ts 该文件及类似命名的文件用来提供测试用的首页具体配置，测试通过后可以依据此配置上线。

--configurable.api.ts 获取数据的 api 都在这里维护。

--/hooks 包含了可供各个首页、子模块核心组件复用的 setup 内容，包括初始化配置、初始化选项等。

--/components

----/detail 包含了各个细分模块的具体组件，例如列表、表格、告示板、画廊、时间线等等组件，它们根据自己的 prop 实现自己的内容。

----/enhanced 包含了新版子模块的各样组件，例如底部特化、边缘特化等，子模块内由上述的细分模块组成。

----/original 包含了原版子模块的组件，例如底部特化、边缘特化等，子模块内由上述的细分模块组成。

----/preset 包含了预设类细分模块的具体组件，预设类指的是较为复杂，难以可配置化的组件，通常仅需提供数据，即首页配置内指向的数据。

----ModuleXXX.vue 各个子模块的具体组件，子模块通常负责边框、Header、Content的布局，样式在这里维护。特殊情况下更为底层的实现也可以在这里。

----content.vue 内容组件，核心组件之一，这个组件负责将首页配置转换为可以供细分模块使用的 prop，并且引用所有细分模块，负责它们的布局。

----header.vue 头部组件，核心组件之一，这个组件负责将首页配置的 Header 项实现为下拉框，并向外提供了获取所选内容的方法，供其他与 content 类同的组件使用。

开发流程

从开发一个新的首页开始，需要的步骤可能如下：

1、新建 xxx.vue 作为该首页的具体文件，引入 hooks 里的初始化方法，并对配置进行初始化，配置存在自己的作用域（即 deviceType），初始化数据。

2、根据作用域向项目的数据字典里添加新的项目，code 在配置表处定义（目前为 configurable_homepage），内容为上述的 deviceType。

3、参照已有的首页文件，将需要支持的子模块类型加入其中，添加必要的装饰并提供子模块需要的 prop。

4、新建 configurable.data.ts 或类同的文件，根据先前的文件配置，写出一份适用于本首页的配置来。

5、测试完毕后提交代码、打包项目，部署后在线上的首页配置页面将写好的配置以JSON写入即可。

菜单事项

完整的首页需要对应的配置页面来配合，首页名称各不相同，但是配置页只有一个：vent/deviceManager/configurationTable/index

开发新的细分模块/子模块

如果需要开发新的细分模块，那么基本流程如下：

1、在配置类型声明处添加子项，可参考 chart、table、list、board 项的结构。

2、开发细分模块，将其放置在 /components/detail 下。

3、根据细分模块的 prop，在 content.vue 下参考已有实现将新的细分模块标识添加进处理结构中，添加能把配置转换为 prop 的逻辑，同时添加该细分模块至相关布局代码中。

4、测试修改并提交。

如果是子模块，那么参考 ModuleEnhanced.vue 即可。

相关项目配置

1、配置可配置首页配置页面，组件名：vent/deviceManager/configurationTable/index，参考菜单：/configurable/table，参考页面位置：设置-首页管理。

2、配置可配置首页依赖的字典，进入字典配置页面，添加 configurable_homepage 字典项，参考名称：可配置首页。

3、在 2 中添加的字典里添加子项，添加的子项具体名称需要和相关同事确认，参考字典：vent(通风首页)、gas(瓦斯首页)、dust(粉尘首页)、vent_realtime(通风首页-实时数据版)等。

4、配置可配置首页，组件名：vent/home/configurable/xxx(需要和开发同事确认)，参考菜单：将需要替换的首页菜单配给可配置首页。

5、进入可配置首页配置页面，点击导入，将开发同事给的配置导入即可，后续调整可以点击帮助按钮查看配置细则，更为复杂的配置建议交与开发同事。