From 2fccfd44ec83a0b046d8860d108dd5e15ae1763c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8B=AC=E6=9C=A8=E8=88=9F?= <1978141412@qq.com> Date: Thu, 18 Jun 2026 20:49:05 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E8=AF=AD?= =?UTF-8?q?=E4=B9=89=E5=8C=96=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- semantic/ctrl/app-menu.md | 10 ++++++---- semantic/ctrl/dashboard.md | 4 +--- semantic/ctrl/gantt.md | 8 ++++---- semantic/ctrl/grid.md | 2 -- semantic/ctrl/kanban.md | 4 +--- semantic/ctrl/search-bar.md | 16 ++++++++-------- semantic/ctrl/toolbar.md | 14 +++----------- semantic/ctrl/tree-grid.md | 2 -- semantic/ctrl/tree.md | 2 +- 9 files changed, 24 insertions(+), 38 deletions(-) diff --git a/semantic/ctrl/app-menu.md b/semantic/ctrl/app-menu.md index 0aa1019..b7725c9 100644 --- a/semantic/ctrl/app-menu.md +++ b/semantic/ctrl/app-menu.md @@ -2,15 +2,16 @@ name: app-menu semantic-parts: - root（`semantic-mark-root`）: 菜单部件组件根节点（`ibiz-control-appmenu`），拥有垂直、水平两种布局方式 -- submenu（`semantic-mark-submenu`）: 子菜单容器，包含可展开/收起的子菜单项交互样式（`ibiz-control-appmenu-submenu`），可嵌套出现 -- submenu.icon（`semantic-mark-submenu-icon`）: 子菜单图标，`i` 元素，子菜单标题区内的前置 icon 字体图标样式（`ibiz-control-appmenu__icon`） -- submenu.content（`semantic-mark-submenu-content`）: 子菜单标题区，`div` 元素，包含图标、文字、箭头的子菜单触发行样式（`el-sub-menu__title`） +- submenu（`semantic-mark-submenu`）: 子菜单容器，包含可展开/收起的子菜单项交互样式（`ibiz-control-appmenu-submenu`） +- submenu.icon（`semantic-mark-submenu-icon`）: 子菜单图标，子菜单标题区内的前置 icon 字体图标样式（`ibiz-control-appmenu__icon`） +- submenu.content（`semantic-mark-submenu-content`）: 子菜单标题区，包含图标、文字、箭头的子菜单触发行样式（`el-sub-menu__title`） - item（`semantic-mark-item`）: 普通菜单项，包含图标与文字水平排列的叶子菜单项样式（`ibiz-control-appmenu__item`） - item.icon（`semantic-mark-item-icon`）: 菜单项图标元素，普通菜单项内的前置 icon 字体图标样式（`ibiz-control-appmenu__icon`） - item.content（`semantic-mark-item-content`）: 菜单项文字，包含菜单项标题文本样式（`ibiz-control-appmenu__caption`） +- item.counter（`semantic-mark-item-counter`）: 菜单项计数器，每个菜单项右侧的计数器徽标（`ibiz-control-appmenu__caption`） - divider（`semantic-mark-divider`）: 菜单分隔线，用于分隔菜单项，在水平菜单中显示为水平线，在垂直菜单中显示为垂直线 - rawitem（`semantic-mark-rawitem`）: 自定义内容项，用于绘制自定义菜单项内容（`ibiz-control-appmenu__rawitem`） -- collapse（`semantic-mark-rawitem`）: 菜单折叠图标元素（`ibiz-control-appmenu-collapse-icon`），只在垂直菜单中显示 +- collapse（`semantic-mark-collapse`）: 菜单折叠图标元素（`ibiz-control-appmenu-collapse-icon`），只在垂直菜单中显示 --- ## 使用案例 @@ -26,6 +27,7 @@ semantic-parts: item: "semantic-mark-item", "item.icon": "semantic-mark-item-icon", "item.content": "semantic-mark-item-content", + "item.counter": "semantic-mark-item-counter", divider: "semantic-mark-divider", rawitem: "semantic-mark-rawitem", collapse: "semantic-mark-collapse", diff --git a/semantic/ctrl/dashboard.md b/semantic/ctrl/dashboard.md index bf7d004..f2beb1c 100644 --- a/semantic/ctrl/dashboard.md +++ b/semantic/ctrl/dashboard.md @@ -7,7 +7,7 @@ semantic-parts: - portlet.header（`semantic-mark-portlet-header`）: 门户头部，包含标题与右侧工具栏的头部横向布局区（`ibiz-portlet-layout-header`） - portlet.caption（`semantic-mark-portlet-caption`）: 门户标题，显示门户名称的标题容器（`ibiz-portlet-layout__caption`） - portlet.action（`semantic-mark-portlet-action`）: 门户操作工具栏，头部右侧的操作按钮区（`ibiz-portlet-layout__toolbar`） -- portlet.content（`semantic-mark-portlet-action`）: 门户部件内容区，包含门户部件各种类型部件（`ibiz-portlet-layout-content`） +- portlet.content（`semantic-mark-portlet-content`）: 门户部件内容区，包含门户部件各种类型部件（`ibiz-portlet-layout-content`） - portlet.rawitem（`semantic-mark-portlet-rawitem`）: 直接内容型部件，嵌入自定义直接内容的部件（`ibiz-portlet-rawitem`） - portlet.view（`semantic-mark-portlet-view`）: 嵌入视图型部件，内嵌子视图的部件（`ibiz-portlet-view`） - portlet.filter（`semantic-mark-portlet-filter`）: 过滤器型部件，包含过滤条件与搜索/重置按钮的过滤器部件（`ibiz-portlet-filter`） @@ -15,7 +15,6 @@ semantic-parts: - portlet.list（`semantic-mark-portlet-list`）: 列表型部件，内嵌列表控件的部件（`ibiz-portlet-list`） - portlet.container（`semantic-mark-portlet-container`）: 容器型部件，可嵌套多个子部件的复合容器部件（`ibiz-portlet-container`） - portlet.actionbar（`semantic-mark-portlet-actionbar`）: 应用行为栏部件，内嵌行为工具栏组件（`ibiz-portlet-actionbar`） -- portlet.menu（`semantic-mark-portlet-menu`）: 应用菜单型部件，内嵌应用菜单控件的部件（`ibiz-portlet-appmenu`） - portlet.html（`semantic-mark-portlet-html`）: 网页型部件，内嵌 iframe 网页内容的部件（`ibiz-portlet-html`） --- @@ -39,7 +38,6 @@ semantic-parts: "portlet.list": "semantic-mark-portlet-list", "portlet.container": "semantic-mark-portlet-container", "portlet.actionbar": "semantic-mark-portlet-actionbar", - "portlet.menu": "semantic-mark-portlet-menu", "portlet.html": "semantic-mark-portlet-html", }} /> diff --git a/semantic/ctrl/gantt.md b/semantic/ctrl/gantt.md index e53344e..40e5a2e 100644 --- a/semantic/ctrl/gantt.md +++ b/semantic/ctrl/gantt.md @@ -1,7 +1,6 @@ -## IBizGanttControl - -### Semantic Parts - +--- +name: gantt +semantic-parts: - root（`semantic-mark-root`）: 组件根节点，甘特图控件最外层容器（`xg-root`） - grid（`semantic-mark-grid`）: 左侧表格容器，承载任务列表表格的可滚动容器（`xg-scroll-container xg-table-container`） - grid.header（`semantic-mark-grid-header`）: 表格表头，左侧表格的列标题表格（`xg-table-header`） @@ -24,6 +23,7 @@ - toolbar.item（`semantic-mark-toolbar-item`）: 工具栏操作项，工具栏内的单个操作按钮，包括"今天"定位按钮、时间类型下拉、全屏按钮（`full-screen`）等 - split（`semantic-mark-split`）: 左右分隔条，左侧表格与右侧甘特图之间的可拖拽分隔线（`xg-mid-separate-line`） - setting（`semantic-mark-setting`）: 设置按钮，表头右侧的列设置入口按钮（`ibiz-control-gantt__setting`） +--- ### 使用案例 diff --git a/semantic/ctrl/grid.md b/semantic/ctrl/grid.md index 0777230..5091716 100644 --- a/semantic/ctrl/grid.md +++ b/semantic/ctrl/grid.md @@ -10,7 +10,6 @@ semantic-parts: - body.cell（`semantic-mark-body-cell`）: 数据列内容容器td, 包含表格单元格内容（`ibiz-grid-field-column`），包含字段值文本等数据展示样式 - setting（`semantic-mark-setting`）: 列设置入口容器（`ibiz-grid-setting`），点击展开列设置面板，可控制表格列显隐 - pagination（`semantic-mark-pagination`）: 分页区域容器 （`ibiz-pagination`），包含页码、跳页、页大小选择等分页控件样式 -- pagination.item（`semantic-mark-pagination-item`）: 分页页码数字按钮, el-pagination分页组件下的li页面按钮 - pagination.refresh（`semantic-mark-pagination-refresh`）: 分页组件最左侧刷新按钮，点击后刷新表格数据 --- @@ -29,7 +28,6 @@ semantic-parts: "body.cell": "semantic-mark-body-cell", setting: "semantic-mark-setting", pagination: "semantic-mark-pagination", - "pagination.item": "semantic-mark-pagination-item", "pagination.refresh": "semantic-mark-pagination-refresh", }} /> diff --git a/semantic/ctrl/kanban.md b/semantic/ctrl/kanban.md index 75da680..96462bf 100644 --- a/semantic/ctrl/kanban.md +++ b/semantic/ctrl/kanban.md @@ -3,7 +3,7 @@ name: kanban semantic-parts: - root（`semantic-mark-root`）: 看板组件根节点，看板控件最外层容器（`ibiz-control-kanban`） - content（`semantic-mark-content`）: 看板内容区，包含分组容器与底部工具栏的主内容区（`ibiz-control-kanban__content`） -- group（`semantic-mark-group`）: 看板分组，看板按数据类型划分的分组容器，包含分组头部与卡片列表（`ibiz-control-kanban-group`），可多个 +- group（`semantic-mark-group`）: 看板分组，看板按数据类型划分的分组容器，包含分组头部与卡片列表（`ibiz-control-kanban-group`） - group.header（`semantic-mark-group-header`）: 分组头部，包含分组标题与分组行为按钮的头部横向布局区（`ibiz-control-kanban-group__header`） - group.caption（`semantic-mark-group-caption`）: 分组标题文字，显示分组名称与计数器数量的文本节点（`ibiz-control-kanban-group__header-caption`） - group.action（`semantic-mark-group-action`）: 分组行为操作菜单，头部右侧的下拉操作按钮区（`ibiz-control-kanban-group__header-actions`） @@ -12,7 +12,6 @@ semantic-parts: - toolbar（`semantic-mark-toolbar`）: 操作工具栏，位于 content 右侧的工具按钮区（`ibiz-control-kanban-toolbar`） - fullscreen（`semantic-mark-fullscreen`）: 全屏按钮，toolbar 内的全屏切换按钮（`ibiz-control-kanban__fullscreen`） - pagination（`semantic-mark-pagination`）: 分页区域容器 （`ibiz-pagination`），包含页码、跳页、页大小选择等分页控件样式 -- pagination.item（`semantic-mark-pagination-item`）: 分页页码数字按钮, el-pagination分页组件下的li页面按钮 - pagination.refresh（`semantic-mark-pagination-refresh`）: 分页组件最左侧刷新按钮，点击后刷新表格数据 --- @@ -33,7 +32,6 @@ semantic-parts: toolbar: "semantic-mark-toolbar", fullscreen: "semantic-mark-fullscreen", pagination: "semantic-mark-pagination", - "pagination.item": "semantic-mark-pagination-item", "pagination.refresh": "semantic-mark-pagination-refresh", }} /> diff --git a/semantic/ctrl/search-bar.md b/semantic/ctrl/search-bar.md index cffc0e4..3e1cf0b 100644 --- a/semantic/ctrl/search-bar.md +++ b/semantic/ctrl/search-bar.md @@ -1,14 +1,14 @@ --- name: search-bar semantic-parts: -- root（`semantic-mark-root`）: 搜索栏根节点，快捷搜索栏最外层容器（`ibiz-control-searchbar`） -- group（`semantic-mark-group`）: 搜索栏快速分组，包含所有快捷分组标签与更多按钮的横向容器（`ibiz-search-groups`） -- item（`semantic-mark-item`）: 快速分组标签项，单个快捷分组标签，含名称与计数器角标（`ibiz-search-groups-quick-group-item`），可多个；激活态携带 `is-selected` class -- item.counter（`semantic-mark-item-counter`）: 快速分组标签项计数器，分组标签项的角标（`ibiz-badge`） -- group.more（`semantic-mark-group-more`）: 快速分组更多分组按钮，展开隐藏分组列表的下拉触发按钮（`ibiz-search-groups-more`） -- save（`semantic-mark-save`）: 保存分组按钮，将当前搜索条件保存的操作按钮（`ibiz-control-searchbar-save`） -- input（`semantic-mark-input`）: 快捷搜索输入框，用于快速查询条件的文本输入容器（`ibiz-control-searchbar-quick-search`） -- filter（`semantic-mark-filter`）: 过滤按钮，触发高级过滤面板展开的操作按钮（`ibiz-control-searchbar-filter`） +- root（`ibiz-control-searchbar`）: 搜索栏根节点，快捷搜索栏最外层容器（`ibiz-control-searchbar`） +- group（`ibiz-search-groups`）: 搜索栏快速分组，包含所有快捷分组标签与更多按钮的横向容器（`ibiz-search-groups`） +- item（`ibiz-search-groups-quick-group-item`）: 快速分组标签项，单个快捷分组标签，含名称与计数器角标（`ibiz-search-groups-quick-group-item`） +- item.counter（`ibiz-search-groups__counter`）: 快速分组标签项计数器，分组标签项的角标（`ibiz-badge`） +- group.more（`ibiz-search-groups-more`）: 快速分组更多分组按钮，展开隐藏分组列表的下拉触发按钮（`ibiz-search-groups-more`） +- save（`ibiz-control-searchbar-save`）: 保存分组按钮，将当前搜索条件保存的操作按钮（`ibiz-control-searchbar-save`） +- input（`ibiz-control-searchbar-quick-search`）: 快捷搜索输入框，用于快速查询条件的文本输入容器（`ibiz-control-searchbar-quick-search`） +- filter（`ibiz-control-searchbar-filter`）: 过滤按钮，触发高级过滤面板展开的操作按钮（`ibiz-control-searchbar-filter`） --- ## 使用案例 diff --git a/semantic/ctrl/toolbar.md b/semantic/ctrl/toolbar.md index 943b3e6..d32218f 100644 --- a/semantic/ctrl/toolbar.md +++ b/semantic/ctrl/toolbar.md @@ -5,14 +5,10 @@ semantic-parts: - item（`semantic-mark-item`）: 工具栏操作项（`ibiz-control-toolbar_item`），多种元素类型，单个可点击操作的容器，根据渲染模式不同出现在以下位置：根节点内的行为项、行为组展开列表下的行为项、分组下拉弹框下的行为项 - item.icon（`semantic-mark-item-icon`）: 操作项图标，操作项内的前置图标容器（`ibiz-toolbar-item-icon`） - item.content（`semantic-mark-item-content`）: 操作项文字，操作项内的标题文本节点（`ibiz-toolbar-item-text`） -- item.counter（`semantic-mark-item-counter`）: 操作项角标，操作项右上角的数量徽章（`ibiz-toolbar-item-counter`） +- item.counter（`semantic-mark-item-counter`）: 操作项角标，操作项右上角的计数器徽章（`ibiz-toolbar-item-counter`） - divider（`semantic-mark-divider`）: 分隔线，工具栏中用于视觉分组的竖向分隔符（`ibiz-control-toolbar__item-separator`） - rawitem（`semantic-mark-rawitem`）: 自定义内容项，工具栏中用于绘制自定义项内容（`ibiz-control-toolbar_item-rawitem`） -- popup（`semantic-mark-popup`）: 弹出层容器，通过 teleport 渲染到 body 外的下拉/弹出内容容器，包括分组菜单项下拉弹框（`ibiz-control-toolbar-submenu-popper`）和界面行为组下拉弹框（`ibiz-control-toolbar-actions-dropdown-popper`） -- menu（`semantic-mark-menu`）: 菜单容器，包裹 submenu 类型操作项的水平菜单容器（`ibiz-control-toolbar__menu`） -- menu.item（`semantic-mark-menu-item`）: 菜单弹框下拉项（`el-menu-item`），包裹行为项图标、项文本、项计数器 -- submenu（`semantic-mark-submenu`）: 子菜单项，可展开下拉列表的分组操作项（`ibiz-control-toolbar-submenu`），展开时弹出 popup -- actions（`semantic-mark-actions`）: 界面行为组菜单项（`ibiz-control-toolbar-actions`），包含按项展开、按分组展开、按首项+分组三种分组模式，分组项展开时弹出 popup +- group（`semantic-mark-group`）: 分组容器，存在菜单分组与行为分组两种模式 --- ## 使用案例 @@ -28,11 +24,7 @@ semantic-parts: "item.counter": "semantic-mark-item-counter", divider: "semantic-mark-divider", rawitem: "semantic-mark-rawitem", - popup: "semantic-mark-popup", - menu: "semantic-mark-menu", - "menu.item": "semantic-mark-menu-item", - submenu: "semantic-mark-submenu", - actions: "semantic-mark-actions", + group: "semantic-mark-group", }} /> ``` \ No newline at end of file diff --git a/semantic/ctrl/tree-grid.md b/semantic/ctrl/tree-grid.md index 10c4108..c6a1c65 100644 --- a/semantic/ctrl/tree-grid.md +++ b/semantic/ctrl/tree-grid.md @@ -9,7 +9,6 @@ semantic-parts: - body.cell（`semantic-mark-body-cell`）: 数据列内容容器td,包含树表格单元格内容（`ibiz-grid-field-column`），包含字段值文本等数据展示样式 - setting（`semantic-mark-setting`）: 列设置入口容器（`ibiz-grid-setting`），点击展开列设置面板，可控制表格列显隐 - pagination（`semantic-mark-pagination`）: 分页区域容器 （`ibiz-pagination`），包含页码、跳页、页大小选择等分页控件样式 -- pagination.item（`semantic-mark-pagination-item`）: 分页页码数字按钮, el-pagination分页组件下的li页面按钮 - pagination.refresh（`semantic-mark-pagination-refresh`）: 分页组件最左侧刷新按钮，点击后刷新表格数据 --- @@ -28,7 +27,6 @@ semantic-parts: "body.cell": "semantic-mark-body-cell", setting: "semantic-mark-setting", pagination: "semantic-mark-pagination", - "pagination.item": "semantic-mark-pagination-item", "pagination.refresh": "semantic-mark-pagination-refresh", }} /> diff --git a/semantic/ctrl/tree.md b/semantic/ctrl/tree.md index 24d7337..64aebb4 100644 --- a/semantic/ctrl/tree.md +++ b/semantic/ctrl/tree.md @@ -4,7 +4,7 @@ semantic-parts: - root（`semantic-mark-root`）: 组件根节点，树视图控件最外层容器（`ibiz-control-treeview`） - search（`semantic-mark-search`）: 搜索栏容器，树部件启用搜索时绘制的快捷搜索输入框（`ibiz-panel-container--control_searchbar`） - content（`semantic-mark-content`）: 树内容容器，承载树节点列表的容器（`ibiz-panel-container--control_tree`） -- item（`semantic-mark-item`）: 树节点行，单个树节点的整行容器，含展开图标与节点内容（`ibiz-control-treeview-node`），可多个 +- item（`semantic-mark-item`）: 树节点行，单个树节点的整行容器，含展开图标与节点内容（`ibiz-control-treeview-node`） - item.content（`semantic-mark-item-content`）: 节点内容容器，包含树节点文本内容区（`ibiz-control-treeview-node__label`） - item.icon（`semantic-mark-item-icon`）: 节点图标，树节点前置 icon 字体图标（`ibiz-control-treeview-node__icon`） - item.counter（`semantic-mark-item-counter`）: 节点计数器角标，节点右侧数量徽章（`ibiz-control-treeview__counter`） -- Gitee From f39e7f08d81ca27b02bb68c4c698c4420ff7a934 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8B=AC=E6=9C=A8=E8=88=9F?= <1978141412@qq.com> Date: Sat, 20 Jun 2026 23:00:39 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E8=AF=AD?= =?UTF-8?q?=E4=B9=89=E5=8C=96=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- semantic/ctrl/edit-form.md | 78 +++++++++++++++++--------------------- 1 file changed, 35 insertions(+), 43 deletions(-) diff --git a/semantic/ctrl/edit-form.md b/semantic/ctrl/edit-form.md index e81f9eb..ba4f3fc 100644 --- a/semantic/ctrl/edit-form.md +++ b/semantic/ctrl/edit-form.md @@ -1,42 +1,38 @@ --- name: edit-form semantic-parts: -- root（`semantic-mark-root`）: 组件根节点，表单控件最外层容器 -- page（`semantic-mark-page`）: 表单分页容器，表单最外层的分页组件，基于 `el-tabs` 实现的分页包装器（`ibiz-form-page-tab`） -- page.label（`semantic-mark-page-label`）: 分页标签文字，tab 标题栏中的页签文字节点（`ibiz-form-page-tab-label`） -- page.item（`semantic-mark-page-item`）: 分页内容面板，tab 激活时显示的内容区（`ibiz-form-page-tab-item`） -- group（`semantic-mark-group`）: 表单分组，包含标题与内容区域的表单分组容器（`ibiz-form-group`） -- group.header（`semantic-mark-group-header`）: 分组标题栏，包含分组名称与操作工具栏的标题区域（`ibiz-form-group-header`） -- group.content（`semantic-mark-group-content`）: 分组内容区，承载分组内表单项的内容容器（`ibiz-form-group-content`） -- group.action（`semantic-mark-group-action`）: 分组工具栏，分组标题栏右侧的操作按钮区域（`ibiz-form-group__toolbar`） -- item（`semantic-mark-item`）: 表单项，包含标签与编辑器的表单字段容器（`ibiz-form-item-container`） +- root（`semantic-mark-root`）: 编辑表单组件根节点，表单控件最外层容器 +- item（`semantic-mark-item`）: 表单项，包含表单项标签与编辑器的表单字段容器（`ibiz-form-item-container`） - item.label（`semantic-mark-item-label`）: 表单项标签，显示字段名称的标签区域（`ibiz-form-item-container__label`） - item.icon（`semantic-mark-item-icon`）: 表单项标签图标，标签区内的前置 icon 图标（`ibiz-form-item-container__label--icon`） -- item.content（`semantic-mark-item-content`）: 表单项编辑器，承载编辑器组件的内容区（`ibiz-form-item-container__editor`） +- item.content（`semantic-mark-item-content`）: 表单项编辑器，承载编辑器组件的表单项内容区（`ibiz-form-item-container__editor`） - item.error（`semantic-mark-item-error`）: 表单项错误提示，校验失败时显示的错误信息区（`ibiz-form-item-container__error`） -- tabpanel（`semantic-mark-tabpanel`）: 表单分页面板，在表单内部使用的 tab 切换容器（`ibiz-form-tab-panel`） -- tabpanel.item（`semantic-mark-tabpanel-item`）: 表单分页面板项，内嵌 tab 的内容面板（`ibiz-form-tab-panel-tab-item`） -- tabpanel.label（`semantic-mark-tabpanel-label`）: 表单分页面板项标签文字，内嵌 tab 标题栏的文字节点（`ibiz-form-tab-panel-tab-item-content`） -- rawitem（`semantic-mark-rawitem`）: 自定义内容项，嵌入自定义原始内容的表单项容器（`ibiz-form-raw-item`） -- rawitem.text（`semantic-mark-rawitem-text`）: 文本型直接内容，显示纯文本的直接内容项（含 `is-form-text` 状态类） +- compositeItem（`semantic-mark-compositeItem`）: 复合表单项，包含多个表单项编辑器的复合字段容器（`ibiz-form-item-container.is-compositeItem`） +- rawitem.raw（`semantic-mark-rawitem-raw`）: 文本型直接内容，显示纯文本的直接内容项 - rawitem.image（`semantic-mark-rawitem-image`）: 图片型直接内容，显示图片的直接内容项（`ibiz-rawitem__image`） - rawitem.divider（`semantic-mark-rawitem-divider`）: 分隔线型直接内容，包含水平分隔线的直接内容项（`ibiz-rawitem__divider`） - rawitem.info（`semantic-mark-rawitem-info`）: 信息提示型直接内容，包含 `el-alert--info` 提示框的内容项 -- rawitem.warning（`semantic-mark-rawitem-warning`）: 警告提示型直接内容，包含 `el-alert--warning` 警告框的内容项 -- rawitem.error（`semantic-mark-rawitem-error`）: 错误提示型直接内容，包含 `el-alert--error` 错误框的内容项 - button（`semantic-mark-button`）: 单按钮，包含独立操作按钮的表单按钮容器（`ibiz-form-button`） -- button.list（`semantic-mark-button-list`）: 按钮组，包含多个操作按钮的按钮列表容器（`ibiz-button-list.ibiz-form-button-list`） -- iframe（`semantic-mark-iframe`）: 内嵌 iframe，包含 iframe 的表单嵌入容器（`ibiz-form-iframe`） -- compositeItem（`semantic-mark-compositeItem`）: 复合表单项，包含多个编辑器的复合字段容器（`ibiz-form-item-container.is-compositeItem`） +- button.list（`semantic-mark-button-list`）: 按钮组，包含多个操作按钮的按钮列表容器（`.ibiz-form-button-list`） +- group（`semantic-mark-group`）: 表单分组，包含标题与内容区域的表单分组容器（`ibiz-form-group`） +- group.header（`semantic-mark-group-header`）: 分组头部，包含分组名称与操作工具栏的头部区域（`ibiz-form-group-header`） +- group.caption（`semantic-mark-group-caption`）: 分组标题，分组头部左侧的分组标题栏区域（`ibiz-form-group__caption`） +- group.action（`semantic-mark-group-action`）: 分组工具栏，分组头部右侧的操作按钮区域（`ibiz-form-group__toolbar`） +- group.content（`semantic-mark-group-content`）: 分组内容区，承载分组内表单项的内容容器（`ibiz-form-group-content`） +- tabpanel（`semantic-mark-tabpanel`）: 表单分页面板，在表单内部使用的 tab 切换容器（`ibiz-form-tab-panel`） +- tabpanel.label（`semantic-mark-tabpanel-label`）: 表单分页面板项标签文字，内嵌 tab 标题栏的文字节点（`ibiz-form-tab-panel-tab-item-content`） +- tabpanel.item（`semantic-mark-tabpanel-item`）: 表单分页面板项，内嵌 tab 的内容面板（`ibiz-form-tab-panel-tab-item`） - druipart（`semantic-mark-druipart`）: 关系界面，嵌入关联视图的关系界面容器（`ibiz-form-druipart`） -- mdctrl（`semantic-mark-mdctrl`）: 多数据部件容器，包裹多数据（表单/表格/重复器）的外层容器（`ibiz-form-mdctrl`） +- mdctrl（`semantic-mark-mdctrl`）: 多数据部件容器，包裹多数据（表单/多数据部件/重复器）的外层容器（`ibiz-form-mdctrl`） +- mdctrl.header（`semantic-mark-mdctrl-header`）: 多数据部件头部容器，包含多数据部件标题与右侧的操作按钮区域（`ibiz-form-mdctrl-header`） +- mdctrl.caption（`semantic-mark-mdctrl-caption`）: 多数据部件标题，多数据部件头部左侧标题栏区域（`ibiz-form-mdctrl-title`） +- mdctrl.toolbar（`semantic-mark-mdctrl-toolbar`）: 多数据部件工具栏，多数据部件头部右侧操作按钮区域区域（`ibiz-form-mdctrl`） - mdctrl.form（`semantic-mark-mdctrl-form`）: 多数据部件表单容器，多数据表单模式的数据列表区（`ibiz-form-mdctrl-form`） -- mdctrl.button（`semantic-mark-mdctrl-button`）: 多数据部件操作区，多数据模式底部的添加/删除操作按钮区（`ibiz-form-mdctrl-md-actions`） - mdctrl.md（`semantic-mark-mdctrl-md`）: 多数据部件多数据容器，包含表格、列表、卡片三种模式，多数据模式的表格+操作区外层容器（`ibiz-form-mdctrl-md`） -- repeater（`semantic-mark-repeater`）: 重复器容器，重复器模式的数据容器（`ibiz-form-mdctrl-repeater`） -- repeater.form（`semantic-mark-repeater-form`）: 重复器行表单，重复器-表单模式每行嵌套的子表单（`ibiz-repeater-single-form`） +- mdctrl.button（`semantic-mark-mdctrl-button`）: 多数据部件操作区，多数据模式底部的添加/删除操作按钮区（`ibiz-form-mdctrl-md-actions`） +- repeater（`semantic-mark-repeater`）: 重复器容器，位于多数据部件容器下的重复器模式的数据容器（`ibiz-form-mdctrl-repeater`） +- repeater.form（`semantic-mark-repeater-form`）: 重复器表单，重复器-表单模式下嵌套的子表单（`ibiz-repeater-single-form`） - repeater.grid（`semantic-mark-repeater-grid`）: 重复器表格，重复器-表格模式的可编辑表格容器（`ibiz-repeater-grid`） -- repeater.button（`semantic-mark-repeater-button`）: 重复器操作按钮，`button` 元素，重复器每行的添加/删除操作按钮（`ibiz-mdctrl-container-item-actions__create` / `ibiz-mdctrl-container-item-actions__remove`） --- ## 使用案例 @@ -46,40 +42,36 @@ semantic-parts: {...otherProps} classNames={{ root: "semantic-mark-root", - page: "semantic-mark-page", - "page.label": "semantic-mark-page-label", - "page.item": "semantic-mark-page-item", - group: "semantic-mark-group", - "group.header": "semantic-mark-group-header", - "group.content": "semantic-mark-group-content", - "group.action": "semantic-mark-group-action", item: "semantic-mark-item", "item.label": "semantic-mark-item-label", "item.icon": "semantic-mark-item-icon", "item.content": "semantic-mark-item-content", "item.error": "semantic-mark-item-error", - tabpanel: "semantic-mark-tabpanel", - "tabpanel.item": "semantic-mark-tabpanel-item", - "tabpanel.label": "semantic-mark-tabpanel-label", - rawitem: "semantic-mark-rawitem", - "rawitem.text": "semantic-mark-rawitem-text", + compositeItem: "semantic-mark-compositeItem", + "rawitem.raw": "semantic-mark-rawitem-raw", "rawitem.image": "semantic-mark-rawitem-image", "rawitem.divider": "semantic-mark-rawitem-divider", "rawitem.info": "semantic-mark-rawitem-info", - "rawitem.warning": "semantic-mark-rawitem-warning", - "rawitem.error": "semantic-mark-rawitem-error", + group: "semantic-mark-group", + "group.header": "semantic-mark-group-header", + "group.caption": "semantic-mark-group-caption", + "group.content": "semantic-mark-group-content", + "group.action": "semantic-mark-group-action", + tabpanel: "semantic-mark-tabpanel", + "tabpanel.label": "semantic-mark-tabpanel-label", + "tabpanel.item": "semantic-mark-tabpanel-item", button: "semantic-mark-button", "button.list": "semantic-mark-button-list", - iframe: "semantic-mark-iframe", - compositeItem: "semantic-mark-compositeItem", druipart: "semantic-mark-druipart", mdctrl: "semantic-mark-mdctrl", + "mdctrl.header": "semantic-mark-mdctrl-header", + "mdctrl.caption": "semantic-mark-mdctrl-caption", + "mdctrl.toolbar": "semantic-mark-mdctrl-toolbar", "mdctrl.form": "semantic-mark-mdctrl-form", - "mdctrl.button": "semantic-mark-mdctrl-button", "mdctrl.md": "semantic-mark-mdctrl-md", + "mdctrl.button": "semantic-mark-mdctrl-button", repeater: "semantic-mark-repeater", "repeater.form": "semantic-mark-repeater-form", - "repeater.button": "semantic-mark-repeater-button", "repeater.grid": "semantic-mark-repeater-grid", }} /> -- Gitee