折叠面板

折叠面板是可展开收起的内容容器组件，支持单个和多个面板的嵌套组合。它负责内容分类组织、空间优化和交互式布局管理，提供展开折叠状态的持久化保存和灵活的面板配置能力。

折叠面板元素分层结构为Meta（components.Meta） → Type（components.Collapse） → 实例，开发者可通过JitAI的可视化开发工具快捷地创建折叠面板实例元素。

当然，开发者也可以创建自己的Type元素，或者在自己的App中改写JitAi官方提供的components.CollapseType元素，以实现自己的封装。

快速开始

基础配置示例

推荐目录结构

testApp/
├── pages/
│   └── testPage/
│       ├── e.json
│       ├── scheme.json    # 页面配置，包含折叠面板组件
│       └── page.tsx

页面配置文件（scheme.json）

{
  "componentList": [
    {
      "fullName": "components.Collapse",
      "name": "collapse1",
      "title": "产品信息面板",
      "config": {
        "accordion": false,
        "ghost": false,
        "layoutList": [
          {
            "name": "basicInfo",
            "title": "基础信息",
            "layout": [
              {
                "i": "Form1",
                "x": 0,
                "y": 0,
                "w": 24,
                "h": 20
              }
            ],
            "headerColor": "rgba(24, 144, 255, 0.1)"
          },
          {
            "name": "detailInfo", 
            "title": "详细信息",
            "layout": [
              {
                "i": "Table1",
                "x": 0,
                "y": 0,
                "w": 48,
                "h": 30
              }
            ],
            "headerColor": "rgba(82, 196, 26, 0.1)"
          }
        ]
      }
    }
  ]
}

配置属性说明

属性名	类型	说明	默认值	必填
accordion	boolean	手风琴模式，只允许同时展开一个面板	false	否
ghost	boolean	幽灵模式，无边框样式	false	否
layoutList	ICollapseProps[]	折叠面板配置列表	[]	是

ICollapseProps 配置：

属性名	类型	说明	默认值	必填
name	string	面板唯一标识	-	是
title	string	面板标题	-	是
layout	Layout[]	面板内组件布局配置	[]	是
headerColor	string	面板头部背景色	"rgba(250, 250, 250, 1)"	否

变量

activeKey

当前激活的面板标识，类型为 datatypes.Ltext。组件实例化时自动创建，在手风琴模式下存储单个面板名称，非手风琴模式下存储面板名称数组。

获取激活面板

const collapseComponent = app.getElement("components.Collapse");
const currentActiveKey = collapseComponent.activeKey.value;
console.log("当前激活面板:", currentActiveKey);

方法

call

参数详解

参数名	类型	说明	默认值	必填
openPanel	string	要打开的面板名称，多个用逗号分隔	null	否

返回值

Promise<void>

使用示例

刷新并指定打开面板

const collapseComponent = app.getElement("components.Collapse");

// 打开指定面板
await collapseComponent.call("basicInfo");

// 在非手风琴模式下打开多个面板
await collapseComponent.call("basicInfo,detailInfo");

// 重置为默认状态
await collapseComponent.call();

setShowPanel

参数详解

参数名	类型	说明	默认值	必填
showPanelNames	string	要显示的面板名称，多个用逗号分隔	-	是

返回值

void

使用示例

动态控制面板显示

const collapseComponent = app.getElement("components.Collapse");

// 只显示指定面板
collapseComponent.setShowPanel("basicInfo,detailInfo");

// 显示单个面板
collapseComponent.setShowPanel("basicInfo");

changeCollapse

参数详解

参数名	类型	说明	默认值	必填
key	string	切换的面板标识	-	是

返回值

void

使用示例

切换面板状态

const collapseComponent = app.getElement("components.Collapse");

// 切换面板（内部方法，通常由用户交互触发）
collapseComponent.changeCollapse("basicInfo");

publishEvent

参数详解

参数名	类型	说明	默认值	必填
name	string	事件名称	-	是
ex	Record<string, any>	附加数据	-	否

返回值

Promise<void>

使用示例

发布自定义事件

const collapseComponent = app.getElement("components.Collapse");

// 发布自定义事件
await collapseComponent.publishEvent("customEvent", { data: "test" });

subscribeEvent

参数详解

参数名	类型	说明	默认值	必填
name	string	事件名称	-	是
evtCb	(data: any) => Promise<void> | void	事件回调函数	-	是
unSubscribeExist	boolean	是否取消已存在的订阅	true	否

返回值

string - 订阅句柄ID

使用示例

订阅事件

const collapseComponent = app.getElement("components.Collapse");

// 订阅面板打开事件
const handleId = collapseComponent.subscribeEvent("openBasicInfo", async (data) => {
    console.log("基础信息面板被打开", data);
});

unSubscribeEvent

参数详解

参数名	类型	说明	默认值	必填
id	string	订阅句柄ID	-	是

返回值

boolean

使用示例

取消订阅

const collapseComponent = app.getElement("components.Collapse");

// 取消事件订阅
collapseComponent.unSubscribeEvent(handleId);

setConfig

参数详解

参数名	类型	说明	默认值	必填
next	Partial<CollapseComponentConfig>	新的配置对象	-	是
clean	boolean	是否完全替换配置	false	否

返回值

void

使用示例

动态更新配置

const collapseComponent = app.getElement("components.Collapse");

// 更新配置
collapseComponent.setConfig({
    accordion: true,
    layoutList: [
        {
            name: "newPanel",
            title: "新面板",
            layout: [],
            headerColor: "rgba(0, 123, 255, 1)"
        }
    ]
});

destroy

返回值

void

使用示例

销毁组件

const collapseComponent = app.getElement("components.Collapse");

// 销毁组件，清理所有事件订阅和变量引用
collapseComponent.destroy();

runCode

参数详解

参数名	类型	说明	默认值	必填
code	string	要执行的代码字符串	-	是

返回值

any - 代码执行结果

使用示例

执行代码

const collapseComponent = app.getElement("components.Collapse");

// 在页面上下文中执行代码
const result = collapseComponent.runCode("this.userName");

getPermConfig

返回值

Record<string, any> | undefined - 权限配置对象

使用示例

获取权限配置

const collapseComponent = app.getElement("components.Collapse");

// 获取组件权限配置
const permConfig = collapseComponent.getPermConfig();
if (permConfig?.visible === false) {
    // 组件不可见
}

属性

name

组件实例名称，用于在页面中唯一标识该组件。

title

组件显示标题，在可视化编辑器中显示的名称。

fullName

组件完整名称，包含元素类型的完整路径标识，值为 "components.Collapse"。

type

组件类型标识，表示该组件的Type元素类型，值为 "components.Collapse"。

showTitle

是否显示组件标题，控制在页面中是否展示组件的标题。

app

关联的应用实例，提供对当前运行时应用的访问。

page

关联的页面实例，提供对当前页面的访问。

config

组件配置对象，类型为 CollapseComponentConfig，包含完整的组件配置信息。

获取组件配置

const collapseComponent = app.getElement("components.Collapse");
const config = collapseComponent.config;
console.log("手风琴模式:", config.accordion);
console.log("幽灵模式:", config.ghost);
console.log("面板配置:", config.layoutList);

showPanelList

当前显示的面板列表，类型为 ICollapseProps[]。该属性包含所有当前可见的面板配置信息。

获取显示面板信息

const collapseComponent = app.getElement("components.Collapse");
const visiblePanels = collapseComponent.showPanelList;
console.log("可见面板数量:", visiblePanels.length);
console.log("面板信息:", visiblePanels.map(panel => panel.title));

事件

折叠面板的事件会根据配置的面板动态生成，每个面板对应一个打开事件。

动态面板事件

参数详解

无参数

使用示例

监听面板打开事件

const collapseComponent = app.getElement("components.Collapse");

// 监听基础信息面板打开
collapseComponent.subscribeEvent("openBasicInfo", async () => {
    console.log("基础信息面板已打开");
    await loadBasicData();
});

高级特性

权限控制配置

折叠面板支持基于权限的面板显示控制。通过权限配置可以控制特定用户角色能够看到的面板。

权限控制示例

const collapseComponent = app.getElement("components.Collapse");

// 根据用户权限动态设置可见面板
const userRole = getCurrentUserRole();
if (userRole === "admin") {
    collapseComponent.setShowPanel("basicInfo,detailInfo,adminInfo");
} else {
    collapseComponent.setShowPanel("basicInfo");
}

样式自定义

通过 headerColor 属性可以自定义每个面板的头部颜色，实现视觉区分。

自定义面板样式

{
  "layoutList": [
    {
      "name": "errorPanel",
      "title": "错误信息",
      "headerColor": "rgba(255, 77, 79, 0.1)",
      "layout": []
    },
    {
      "name": "successPanel", 
      "title": "成功信息",
      "headerColor": "rgba(82, 196, 26, 0.1)",
      "layout": []
    }
  ]
}

面板状态管理

支持状态持久化和动态状态控制，实现面板状态的保存和恢复。

状态持久化

const collapseComponent = app.getElement("components.Collapse");

// 保存当前状态
const saveState = () => {
    const state = {
        activeKey: collapseComponent.activeKey.value,
        visiblePanels: collapseComponent.showPanelList.map(p => p.name)
    };
    localStorage.setItem("collapseState", JSON.stringify(state));
};

// 恢复状态  
const restoreState = () => {
    const savedState = localStorage.getItem("collapseState");
    if (savedState) {
        const state = JSON.parse(savedState);
        collapseComponent.setShowPanel(state.visiblePanels.join(","));
        collapseComponent.call(Array.isArray(state.activeKey) ? 
            state.activeKey.join(",") : state.activeKey);
    }
};

动态内容加载

结合事件机制，可以实现面板内容的懒加载，提升页面性能。

懒加载配置

const collapseComponent = app.getElement("components.Collapse");

// 监听面板打开事件，实现懒加载
collapseComponent.subscribeEvent("openDetailInfo", async () => {
    const detailTable = app.getElement("Table1");
    if (!detailTable.hasData) {
        // 显示加载状态
        showLoading();
        
        // 异步加载数据
        const data = await fetchDetailData();
        detailTable.setData(data);
        
        // 隐藏加载状态
        hideLoading();
    }
});