NocoBase 查看操作View详解行内只读详情弹窗的配置与实现原理【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase导读查看操作View是 NocoBase 界面搭建器中表格行按钮体系的重要组成部分它借助当前行的记录作为上下文以弹窗形式打开一个只读详情视图并允许搭建者在弹窗内自由组合各类区块。本文将基于官方文档与packages/core/client中的源码系统讲解查看操作的使用场景、弹窗内区块的编排方式、三类操作配置项编辑按钮、联动规则、编辑弹窗的完整能力并深入其底层 Schema 与设置面板的实现帮助你在实际业务页面中快速落地点击行查看详情的交互。一、什么是查看操作查看操作属于行按钮即它只会出现在表格或列表、卡片等数据区块的每一行上而不是表头或页面级别。它的核心特征如下有当前记录作为上下文点击某一行上的查看按钮该按钮会携带当前行的完整数据作为上下文弹窗中的所有区块都会基于这条记录进行数据渲染无需额外传参。以弹窗形式呈现默认通过弹窗Popup承载详情内容打开方式、尺寸均可配置。只读语义查看操作展示的是数据详情与编辑操作不同它默认面向只读场景你可以在弹窗内自由添加详情、表单、关系区块等。弹窗内容可自定义查看弹窗默认提供一个详情页签和区块容器你可以在其中按需配置区块实现完全贴合业务的自定义详情页。在 NocoBase 中查看、编辑、打开弹窗三类操作都共享弹窗机制但各自的职责不同查看用于只读展示编辑用于进入可写表单打开弹窗则用于从表头或行上打开任意指定内容的弹窗。三者都在点击后弹出弹窗且弹窗内的区块会根据当前上下文记录进行数据展示。二、查看操作的源码级实现1. 按钮的 Schema 定义查看操作由ViewActionInitializer初始化器生成其源码位于 ViewActionInitializer.tsx核心 Schema 结构如下- type: void - title: View按钮标题可多语言 - x-action: view ← 动作类型标识 - x-toolbar: ActionSchemaToolbar - x-settings: actionSettings:view ← 配置面板标识 - x-component: Action ← 渲染为操作按钮 - x-component-props.openMode: 继承默认打开方式 - properties: - drawer: Action.Container弹窗容器class 为 nb-action-popup - tabs: Tabs 页签容器x-initializer 为 popup:addTab可新增页签 - tab1: 默认详情页签 - grid: Grid 网格容器x-initializer 为 popup:common:addBlock可添加区块从该 Schema 可以看出查看按钮天然内嵌了一个完整的弹窗容器Tabs 页签 Grid 网格并且页签与区块都通过 Initializer 暴露了添加入口。这意味着你不需要额外创建页面直接在查看弹窗中就能编排一个多页签、多区块的详情视图。x-action: view这一动作类型与表格行按钮的注册位置一一对应在 TableActionColumnInitializers.tsx 中可以看到查看按钮被注册在表格的操作列里从而以行按钮的形式出现在每一行上。2. 配置面板的注册查看操作绑定的设置面板标识是actionSettings:view其实现位于 viewActionSettings.tsx。该面板通过SchemaSettings注册了以下配置项正好对应文档中列出的操作配置项配置项组件作用editButtonButtonEditor编辑按钮的标题、类型、图标、危险样式linkageRulesSchemaSettingsLinkageRules配置联动规则动态控制按钮的显示/禁用openModeSchemaSettingOpenModeSchemaItems配置弹窗的打开方式与尺寸removeRemoveButton移除该按钮其中linkageRules在组装配置时会读取当前数据表的collectionName说明联动规则与数据集合上下文强相关openMode则从useOpenModeContext()读取全局打开方式上下文当全局隐藏打开方式配置时该项也会自动隐藏。3. 弹窗机制的复用查看弹窗底层使用Action.Container见 Action.Container.tsx它与编辑操作、打开弹窗共用同一套弹窗基础设施因此打开方式、尺寸、页签、区块编排的行为在各操作之间完全一致。三、操作配置项编辑按钮通过查看弹窗右上角的设置入口或选中按钮后的 Schema 设置进入编辑按钮配置。它允许你自定义按钮的展示外观具体能力包括按钮名称根据业务需求自定义按钮文本确保按钮标签清晰直观例如查看详情预览。按钮图标为按钮设置图标提升视觉辨识度使用户能快速识别按钮功能。危险操作当按钮代表危险操作如删除、重置时可设置为Danger Action类型。按钮类型Button Type支持多种类型默认类型Default标准按钮适合普通操作主要类型Primary用于重要或主要操作通常带有显眼的视觉效果虚线类型Dashed具有虚线边框的按钮适用于次要操作或提示类按钮文本类型Text只有文本没有背景色的按钮通常用于轻量级操作或链接。完整的配置说明可参考 编辑按钮。从源码结构看该能力由Action.Designer.tsx中的ButtonEditor组件提供见 Action.Designer.tsx它会实时将配置写回按钮对应的 Schema 属性中。四、操作配置项联动规则联动规则允许你根据特定条件动态控制查看按钮的状态显示/隐藏、启用/禁用从而让按钮行为与当前记录、用户角色或上下文数据建立联动。核心使用规则如下满足条件时触发规则分为条件判断与执行动作两部分条件为空时默认通过。支持常量与变量条件判断中可以使用常量也可以引用系统变量、上下文变量。可修改的按钮属性支持对按钮的显示、启用等属性进行修改。常量示例例如已付款订单不允许查看/不允许编辑在条件中选择订单状态字段与常量已付款做相等判断再对按钮执行禁用动作即可实现已付款订单行上的查看按钮置灰不可点。变量示例系统变量可根据当前设备类型控制按钮显示也可根据当前用户角色控制按钮可用性例如订单区块表格头上的批量更新按钮仅限管理员角色使用。上下文变量可根据当前记录或关系区块的数据状态控制按钮例如订单商机关系区块上的添加按钮仅在订单状态为待支付和草稿时启用其他状态下按钮将被禁用。更多变量相关内容可参考 操作联动规则 与 变量 专题文档。五、操作配置项编辑弹窗凡是点击后能打开弹窗的操作或字段都支持配置弹窗的打开方式与尺寸查看操作也不例外。进入编辑弹窗配置后可以设置打开方式抽屉Drawer从页面侧边滑出的面板适合需要保留页面上下文、进行连续性操作的场景对话框Modal居中的模态框聚焦度最高适合轻量快速的详情查看子页面Subpage以独立子页面形式打开拥有更大的空间编排复杂详情内容。弹窗尺寸大中默认小以上配置会通过SchemaSettingOpenModeSchemaItems写入按钮 Schema 的openMode、openSize等属性见 viewActionSettings.tsx并依赖全局的OpenModeProvider提供默认打开方式。完整的打开方式与尺寸说明可参考 编辑弹窗。六、在查看弹窗中编排自定义详情区块查看弹窗默认结构为一个详情页签Tabs.TabPane内嵌网格容器Grid并开放两个 Initializer 入口popup:addTab新增更多页签。适合将详情拆分为基本信息关联数据操作记录等多个页签实现信息分区。popup:common:addBlock在当前页签内添加区块。你可以添加详情区块、表单区块、关系区块子表格、子表单、统计区块等让弹窗内容完全由业务驱动。例如在查看订单详情时你可以保留默认详情页签添加订单信息详情区块展示核心字段新增订单明细页签添加子表格区块展示订单行项目再新增跟进记录页签添加列表区块展示历史跟进。这种行内按钮 弹窗内自由编排的模式避免了为每个详情场景单独创建页面大幅提升了搭建效率。七、查看操作与其他行操作的差异速览操作打开形式数据上下文典型用途查看弹窗抽屉/对话框/子页面当前行记录只读展示详情弹窗内自定义区块编辑弹窗当前行记录进入可写表单修改数据打开弹窗弹窗当前行记录或表头上下文打开指定区块内容不限定只读或编辑从源码看三类操作的弹窗容器Action.Container与设置面板结构高度一致查看操作通过x-action: view与actionSettings:view与其余操作区分这也是它在表格行按钮初始化器中被独立注册的原因。八、小结查看操作是 NocoBase 行级交互中最常用的只读详情入口。通过本文你可以掌握使用方式在表格行按钮中添加查看弹窗内按需添加区块与页签三类配置项编辑按钮名称/图标/类型/危险样式、联动规则常量/系统变量/上下文变量控制显示与禁用、编辑弹窗抽屉/对话框/子页面 大中小尺寸底层原理查看按钮由ViewActionInitializer生成内嵌弹窗容器的 Schema配置面板由viewActionSettings注册弹窗机制与编辑、打开弹窗操作完全复用。相关源码与文档索引初始化器ViewActionInitializer.tsx设置面板viewActionSettings.tsx行按钮注册TableActionColumnInitializers.tsx弹窗容器Action.Container.tsx官方文档查看操作 / 打开弹窗操作【免费下载链接】nocobaseNocoBase is an open-source AI no-code platform for building business systems fast. Instead of generating everything from scratch, AI works on top of production-proven infrastructure and a WYSIWYG no-code interface, so you get both speed and reliability.项目地址: https://gitcode.com/GitHub_Trending/no/nocobase创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考