技术文档

# 栏目样式拖拽设实现

**门户（3.5版）**提供栏目拖拽式样式设计，涉及到各个组自定义栏目需要升级适配问题。

  1. # 截图演示的栏目样式拖拽效果

    将左侧栏目组件选中拖拽到空间编辑区域，已快速实现栏目添加效果。如下图所示

拖拽进来空间编辑区域的栏目数据在左侧新增了本期所做的栏目样式数据。如图下所示

实现这效果需要各个栏目组进行栏目样式适配，将样式文件提取到（init/tenant/com.seeyon.portal.domain.entity.PortalPortletStyleSheet.json）中

  1. # 栏目样式注册规范

    init/tenant/com.seeyon.portal.domain.entity.PortalPortletStyleSheet.json栏目字段示例说明下面是横幅图片默认样式的json展示

    [

    {

    "id": "4494515200230444305",

    "tenantId": "-1",

    "createTime": "2021-09-11 05:31:24",

    "updateTime": "2021-09-11 05:31:24",

    "version": 0,

    "styleName": "defaultConfig",

    "styleImage": "/styles/preview/pc/bannerImagePortlet/defaultConfig.jpg",

    "styleType": "DEFAULT",

    "styleId": "defaultConfig",

    "portletId": "bannerImagePortlet",

    # "styleDefinitionInfo": "{\"label\":\"portal.common.graphic_slides\",\"value\":\"defaultConfig\",\"exposeName\":\"BannerImage\",\"items\":[{\"key\":\"slideDisplayMethod\",\"label\":\"portal.common.display_method\",\"type\":\"select\",\"attrCmptProps\":{\"options\":[{\"label\":\"portal.common.carousel\",\"value\":\"carousel\"},{\"label\":\"portal.common.tile_page\",\"value\":\"tile_page\"},{\"label\":\"portal.common.multi_roll\",\"value\":\"multi_roll\"}]},\"defaultValue\":\"carousel\"},{\"key\":\"slideSingleDisplayRules\",\"label\":\"portal.common.single_display_rules\",\"type\":\"select\",\"attrCmptProps\":{\"options\":[{\"label\":\"portal.common.auto\",\"value\":\"auto\"},{\"label\":\"portal.common.custom\",\"value\":\"contain\"}]},\"visible\":{\"dynamic\":true,\"getValue\":\"function(data, state) {return data?.portlets[data?.activedIdx]?.properties?.slideDisplayMethod === 'carousel' ? false : true}\"},\"defaultValue\":\"auto\"},{\"key\":\"slideSingleDisplayNumber\",\"label\":\"portal.common.single_display_number\",\"type\":\"inputNumber\",\"attrCmptProps\":{\"min\":1,\"step\":1,\"max\":10},\"validation\":{\"inputNumber\":{\"message\":\"请输入1-10之间的整数\"}},\"visible\":{\"dynamic\":true,\"getValue\":\"function(data, state) {return data?.portlets[data?.activedIdx]?.properties?.slideDisplayMethod === 'carousel' ? false : data?.portlets[data?.activedIdx]?.properties?.slideSingleDisplayRules

    'contain'}\"},\"defaultValue\":1},{\"key\":\"summarySwitch\",\"type\":\"switch\",\"defaultValue\":true,\"attrCmptProps\":{\"label\":\"{ \\\"k\\\": \\\"portal.common.summary\\\", \\\"d\\\": \\\"显示摘要\\\" }\"}},{\"key\":\"borderRadius\",\"type\":\"borderRadius\",\"hideKeys\":[\"type\"],\"defaultValue\":{\"type\":\"all\",\"radius\":\"4\"}},{\"key\":\"boxShadow\",\"type\":\"boxShadow\",\"hideKeys\":[\"type\"],\"defaultValue\":{\"color\":\"rgba(0, 0, 0, 0.04)\",\"optinValue\":\"none\"},\"attrCmptProps\":{\"label\":true}},{\"key\":\"cardSpacingNumber\",\"label\":\"portal.common.card_spacing_number\",\"type\":\"inputNumber\",\"attrCmptProps\":{\"min\":0,\"step\":2,\"max\":100},\"validation\":{\"inputNumber\":{\"message\":\"请输入0-100之间的整数\"}},\"defaultValue\":20},{\"key\":\"dataList\",\"required\":true,\"type\":\"uploadImages\",\"label\":\"portal.common.upload_img\",\"defaultValue\":{\"id\":\"\",\"flag\":false},\"attrCmptProps\":{\"maxLength\":20,\"maxSize\":1,\"label\":\"portal.common.upload_img\"},\"visible\":false},{\"key\":\"defaultBackgroundSize\",\"label\":\"portal.common.adapt_style\",\"type\":\"select\",\"attrCmptProps\":{\"options\":[{\"label\":\"portal.common.cover\",\"value\":\"cover\"},{\"label\":\"portal.common.auto\",\"value\":\"contain\"},{\"label\":\"portal.common.stretch\",\"value\":\"100% 100%\"},{\"label\":\"portal.common.tile\",\"value\":\"auto\"}]},\"defaultValue\":\"cover\"},{\"key\":\"autoplaySpeed\",\"label\":\"portal.common.rotatin_speed\",\"type\":\"select\",\"attrCmptProps\":{\"options\":[{\"label\":\"portal.common.fast\",\"value\":\"3000\"},{\"label\":\"portal.common.medium\",\"value\":\"5000\"},{\"label\":\"portal.common.slow\",\"value\":\"8000\"}]},\"defaultValue\":\"5000\"}],\"groupId\":\"imagesSetting\",\"groupName\":\"portal.common.content_set\"}",

    "styleProperties": "",

    "sortNo": 1,

    "type": "PC"

    }]

字段名称 字段注释 字段示例

styleName 样式名称 defaultConfig

styleImage 样式效果图 /styles/preview/pc/bannerImagePortlet/defaultConfig.jpg

styleType 样式类型 DEAULT（目前都是默认值）

styleId 样式id defaultConfig

portletId 所属栏目样式 bannerImagePortlet

styleDefinitionInfo 样式参数定义数据 ..... 需要前端定义好提供给后端

sortNo 样式排序号

type 样式适配端 PC，MOBILE

parentPortletId 渲染栏目id 运行态栏目渲染的id，当parentPortletId与portletId相同时此值可以不填。当这个栏目挂载到其他样式下必填

  1. # 历史栏目数据处理方案

    历史数据存在样式参数的可以参照以下方案，将init/tenant/com.seeyon.portal.domain.entity.PortalPortletDefinition.json下栏目样式提取到init/tenant/com.seeyon.portal.domain.entity.PortalPortletStyleSheet.json文件中，具体操作步骤如下，以横幅图片栏目为例

<!-- -->

  1. 提取目标文件init/tenant/com.seeyon.portal.domain.entity.PortalPortletDefinition.json中的definitionInfo和mobileDefinitionInfo字段数据。横幅图片definitionInfo字段中存了6份样式数据。可以将每份单独提出到init/tenant/com.seeyon.portal.domain.entity.PortalPortletStyleSheet.json中，一份对应一个实体

  2. 将definitionInfo字段数据中的style层和properties-》styleId层合并成一个对象作为init/tenant/com.seeyon.portal.domain.entity.PortalPortletStyleSheet.json文件中styleDefinitionInfo字段数据 如下图所示。整个历史数据的处理过程就到此结束，如果存在疑惑请联系门户开发李智，胡杨

    编撰人：lizhiyf

快速跳转

← 门户栏目样式扩展 →