标签页

标签页是布局类组件，用于在有限空间内切换显示多个内容面板。它基于React技术栈实现组件化布局，支持线条型和卡片型两种视觉风格，可在顶部、底部、左侧、右侧四个位置放置。标签页负责多内容面板的组织管理、标签切换交互和动态显示控制，支持权限过滤、动态别名设置和事件驱动的交互响应。

标签页元素分层结构为Meta（components.Meta） → Type（components.Tab） → 实例，开发者可通过JitAI的可视化开发工具快捷地创建标签页实例元素。

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

快速开始

基础配置示例

推荐目录结构

pages/
├── UserManage/
│   ├── e.json
│   ├── scheme.json    # 页面布局配置
│   └── index.tsx

标签页组件配置 - scheme.json

{
  "name": "userTabs",
  "type": "components.Tab",
  "title": "用户管理标签页",
  "config": {
    "position": "top",
    "size": "middle",
    "type": "line",
    "layoutList": [
      {
        "name": "basicInfo",
        "title": "基础信息",
        "layout": []
      },
      {
        "name": "permissions",
        "title": "权限设置",
        "layout": []
      }
    ]
  }
}

页面中调用标签页

// 获取标签页组件实例
const tabComponent = app.getElement('pages.UserManage.userTabs');

// 切换到权限设置标签
await tabComponent.call('permissions', '');

// 根据条件显示不同标签
if (userRole === 'admin') {
  tabComponent.setDisplayTabs('basicInfo,permissions');
} else {
  tabComponent.setDisplayTabs('basicInfo');
}

配置属性说明

属性	类型	说明	默认值	必填
position	"top" | "bottom" | "left" | "right"	标签位置	"top"	否
size	"large" | "middle" | "small"	标签尺寸	"middle"	否
type	"line" | "card"	标签类型：线条型或卡片型	"line"	否
layoutList	ITabProps[]	标签页列表配置	[]	是

ITabProps 结构：

属性	类型	说明	默认值	必填
name	string	标签页唯一标识	-	是
title	string	标签页显示名称	-	是
layout	Layout[]	标签页内组件布局配置	[]	否

变量

tab

当前点击的标签页信息，包含标签页名称或别名。

类型： Dropdown
访问方式： tabComponent.tab.value

方法

call

打开指定标签页并可设置自定义别名。

参数详解

参数名	类型	说明	默认值	必填
tabName	string	目标标签页的name	-	是
tabAlias	string	标签页别名（显示用）	-	否

返回值

Promise<void>

使用示例

打开指定标签页

// 打开名为permissions的标签页
await tabComponent.call("permissions", "");

// 打开标签页并设置别名
await tabComponent.call("permissions", "权限设置(3项待处理)");

setDisplayTabs

设定显示的标签页，隐藏其他标签页。调用后会触发内部刷新事件。

参数详解

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

使用示例

动态控制标签显示

// 只显示基础信息和权限设置标签
tabComponent.setDisplayTabs("basicInfo,permissions");

// 根据权限动态显示
if (hasAdvancedPermission) {
  tabComponent.setDisplayTabs("basicInfo,permissions,advanced");
} else {
  tabComponent.setDisplayTabs("basicInfo");
}

setConfig

更新组件配置。

参数详解

参数名	类型	说明	默认值	必填
next	Partial<TabComponentConfig & { requireElements: requireElement[] }>	新的配置项	-	是
clean	boolean	是否完全替换配置	false	否

使用示例

更新组件配置

// 更改标签位置和样式
tabComponent.setConfig({
  position: "bottom",
  type: "card"
});

publishEvent

发布组件事件。

参数详解

参数名	类型	说明	默认值	必填
name	string	事件名称	-	是
ex	Record<string, any>	事件携带的额外数据	-	否

返回值

Promise<void>

使用示例

发布自定义事件

await tabComponent.publishEvent("customRefresh", {
  activeTab: "basicInfo",
  timestamp: Date.now()
});

subscribeEvent

订阅组件事件。

参数详解

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

返回值

string - 事件处理器ID

使用示例

订阅标签切换事件

const handlerId = tabComponent.subscribeEvent("clickbasicInfo", async (data) => {
  console.log("基础信息标签被点击");
  // 执行相应业务逻辑
});

unSubscribeEvent

取消事件订阅。

参数详解

参数名	类型	说明	默认值	必填
id	string	事件处理器ID	-	是

runCode

在页面上下文中执行JavaScript代码字符串。

参数详解

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

返回值

any - 代码执行结果

使用示例

执行动态代码

const result = tabComponent.runCode("this.fullName");
console.log("当前页面:", result);

destroy

销毁组件实例，清理事件监听和资源。

使用示例

组件销毁

tabComponent.destroy();

getPermConfig

获取当前组件的权限配置信息。

返回值

Record<string, any> | undefined - 权限配置对象，如果没有权限限制则返回undefined

使用示例

获取权限配置

const permConfig = tabComponent.getPermConfig();
if (permConfig?.permitLayout) {
  console.log("允许显示的标签:", permConfig.permitLayout);
}

bindApp

绑定应用实例。

参数详解

参数名	类型	说明	默认值	必填
app	App	应用实例	-	是

bindPage

绑定页面实例。

参数详解

参数名	类型	说明	默认值	必填
page	BasePage	页面实例	-	是

属性

name

组件实例名称。

类型： string
只读： 是

title

组件显示标题。

类型： string
只读： 是

config

组件配置对象，包含position、size、type、layoutList等配置项。

类型： TabComponentConfig & { requireElements: requireElement[] }
只读： 否

compType

组件类型枚举值。

类型： COMPONENT_TYPE
只读： 是

showTitle

是否显示组件标题。

类型： boolean
只读： 是

type

组件类型标识。

类型： string
只读： 是

fullName

组件完整名称，包含页面路径和组件名称。

类型： string
只读： 是

组件完整名称，包含页面路径和组件名称。

类型： string
只读： 是

app

当前应用实例的访问器。

类型： App
只读： 是

page

当前页面实例的访问器。

类型： BasePage
只读： 是

showLayoutList

当前实际显示的标签页列表（经过权限过滤和setDisplayTabs方法处理后的结果）。

类型： ITabProps[]
只读： 是

defaultActivatedTabStatus

默认激活标签的状态信息，包含标签别名和激活的标签名称。

类型： Ltext
只读： 是

activatedTabStatus

当前激活标签的状态。

类型： Stext
只读： 是

dataTypeList

组件变量类型列表。

类型： BaseDataType[]
只读： 是

事件

标签页组件为每个标签页动态生成对应的点击事件。

click[标签页name]

当指定标签页被点击时触发。事件名称根据标签页的name动态生成，如标签页name为"basicInfo"，则事件名为"clickbasicInfo"。

参数详解

事件触发时，组件的tab变量会自动更新为被点击标签的信息。

使用示例

监听标签页点击事件

// 监听基础信息标签点击
tabComponent.subscribeEvent("clickbasicInfo", async () => {
  console.log("基础信息标签被点击");
  console.log("当前标签值:", tabComponent.tab.value);
});

// 监听权限设置标签点击
tabComponent.subscribeEvent("clickpermissions", async () => {
  console.log("权限设置标签被点击");
  // 可在此处加载权限数据
  await loadPermissionData();
});

高级特性

权限控制

标签页支持基于RBAC权限配置动态显示/隐藏特定标签页。组件会自动调用setPermConfig方法过滤layoutList。

配置示例

权限配置应用

// 权限配置会在组件初始化时自动应用
// 组件会根据permitLayout自动过滤可显示的标签页
const permConfig = {
  permitLayout: ["basicInfo", "permissions"] // 只允许显示这两个标签
};

// 组件内部会自动执行权限过滤
tabComponent.setPermConfig(); // 内部调用，开发者无需手动调用

动态标签管理

结合setDisplayTabs方法和权限控制实现灵活的标签页管理策略。

配置示例

智能标签显示策略

// 根据用户角色和数据状态动态显示
const userRole = await getCurrentUserRole();
const dataStatus = await getDataStatus();

if (userRole === "admin") {
  if (dataStatus.hasAdvancedFeatures) {
    tabComponent.setDisplayTabs("basicInfo,permissions,advanced,audit");
  } else {
    tabComponent.setDisplayTabs("basicInfo,permissions");
  }
} else if (userRole === "editor") {
  tabComponent.setDisplayTabs("basicInfo,permissions");
} else {
  tabComponent.setDisplayTabs("basicInfo");
}

动态别名与状态指示

使用call方法的tabAlias参数实现标签页标题的实时更新。

配置示例

智能标签别名

// 监听数据变化，更新标签名称
async function updateTabAlias() {
  const pendingCount = await getPendingApprovalCount();
  const errorCount = await getErrorCount();
  
  // 根据待处理数量更新审批标签
  if (pendingCount > 0) {
    await tabComponent.call("approval", `审批管理(${pendingCount})`);
  } else {
    await tabComponent.call("approval", "审批管理");
  }
  
  // 根据错误状态更新系统标签
  if (errorCount > 0) {
    await tabComponent.call("system", `系统设置 ⚠️`);
  } else {
    await tabComponent.call("system", "系统设置");
  }
}

// 定期更新或响应特定事件时更新
setInterval(updateTabAlias, 30000); // 30秒更新一次