蒋江伟

相关推荐

• Oinone 7天入门到精通

  3.5.7.7 自定义主题

  主题是什么 Oinone框架提供了强大的主题定制功能，使得平台可以轻松适应和遵循公司的品牌和UI规范。通过自定义主题，你可以调整颜色、间距、圆角等视觉元素，从而使Oinone更好地融入到特定行业的需求和公司标准中。以下是关于如何定制主题的关键点和步骤： 关键点 使用CSS变量： Oinone使用CSS变量 (Css Var) 来实现主题定制。 CSS变量提供了一种高效且灵活的方式来定义和使用样式。 全面定制： 可以定制的范围广泛，包括颜色、字体、间距、边框、圆角等。 通过调整这些元素，可以确保UI符合公司的视觉标准。 定制步骤 了解CSS变量： 首先，了解如何在CSS中使用变量。 查看Oinone现有的CSS变量列表，以了解哪些样式可以被定制。 定义公司的UI规范： 根据公司的品牌指南，定义一套UI规范。 包括颜色方案、字体样式、元素尺寸等。 应用自定义样式： 在Oinone的样式表中，使用定义的CSS变量来覆盖默认样式。 确保在适当的地方应用这些自定义样式。 作用场景 Oinone平台提供了灵活的主题定制选项，包括内置的六套主题样式，涵盖深色和浅色模式以及不同的尺寸选项（大、中、小）。这些主题可以适应不同的业务需求和项目特性，同时提供了定制工具，方便用户根据公司的UI规范进行调整。下面是主题作用场景的详细说明： 主题选项 内置主题： 六套主题：包括深色和浅色模式，以及大、中、小尺寸。 用户可以通过系统设置功能轻松切换不同的主题。 可定制性： 提供CSS变量的JSON文件，方便用户下载和修改。 允许用户根据具体需求定制颜色、字体、间距等样式变量。 应用场景 公司UI规范对齐： 首先根据公司的UI规范调整一份基础主题。 这有助于确保平台的外观与公司品牌一致。 项目和业务适应性： 在不同项目或业务场景中，可以基于公司UI规范进行微调。 这提供了项目特定的灵活性，同时保持整体的品牌一致性。 实施建议 初始设置： 初始时，选择一个接近公司标准的内置主题作为起点。 通过系统设置功能体验不同的主题效果。 定制和微调： 下载并修改CSS变量的JSON文件，以符合公司的UI标准。 对于特定项目或业务场景，根据需要进行进一步的微调。 自定义主题 自定义主题功能允许在Oinone平台上创建和应用独特的视觉风格，以适应特定的业务需求和品牌标准。以下是自定义主题的步骤和示例，用于指导如何在Oinone平台上实现这一功能。 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./theme： 图3-5-7-24 自定义主题目录示例 步骤 1: 创建主题 定义主题变量： 创建一个包含主题样式变量的JavaScript文件。例如，可以定义一个名为OinoneTheme的新主题，并设置相应的CSS变量。 图3-5-7-24 自定义主题代码示例 注册主题： 使用registerTheme函数注册自定义主题。这个函数将新主题添加到可用主题列表中。 步骤 2: 应用主题 在主入口文件中引用： 在main.ts文件中引入自定义主题，并在VueOioProvider配置中指定。 图3-5-7-24 自定义主题应用配置示例 效果 图3-5-7-24 自定义黑色主题效果示例 主题叠加： Oinone支持多个主题变量同时存在，后导入的主题变量会覆盖前面导入的。 内置主题 Oinone平台内置了以下六个主题变量，你可以在自定义主题时参考或扩展它们： ‘default – large’ ‘default – medium’ ‘default – small’ ‘dark – large’ ‘dark – medium’ ‘dark – small’ 扩展变量 在定义主题变量时，根据业务需求可以添加不存在的变量，作为变量的扩展。 示例 { "custom-color": "#新的辅助颜色", "button-padding": "10px 20px", // …其他自定义变量 } 图3 – 5 – 7 – 24 扩展主题变量 查找主题变量 在Oinone平台上，通过DOM调试器查找主题变量是一种有效的方式，允许用户定位并获取相应组件的主题变量。以下是执行这一步骤的详细说明： 步骤： 使用DOM调试器： 在浏览器中打开Oinone平台，进入需要查找主题变量的页面。 使用浏览器的开发者工具或DOM调试器（通常可通过右键点击页面元素并选择“检查”打开）。 选择目标组件： 在DOM调试器中，通过选择器工具或直接点击页面上的组件，选中你想要查找主题变量的目标组件。 查看样式和主题变量： 在选中的组件上，浏览开发者工具中的“样式”或“计算”选项卡。 可以通过查看样式表中的相关样式规则，找到组件所使用的主题变量。 4标识主题变量： 主题变量通常以 –oio 为前缀。标识出你感兴趣的主题变量，记录下变量名和当前的取值。 示例： 假设你想查找某个按钮组件的主题变量，可以通过以下步骤： 在DOM调试器中选中按钮组件。 在“样式”或“计算”选项卡中查看相关样式规则。 找到以 –oio 为前缀的主题变量，如 –oio-button-pirmary-background。 记录该主题变量的取值，例如 #3498db。 图3-5-7-24 DOM调试器查询主题变量

  史, 昂

  2024年5月23日

  1.7K000
• Oinone 7天入门到精通

  业务域

  1. 业务域介绍 业务域是根据业务域对集成应用、开放接口进行归类管理。在创建集成应用、开发接口时，可选择归属的业务域。 操作入口：集成设计器——业务域。 2. 业务域管理 业务域管理提供新增、删除、搜索操作。 2.1 业务域列表 支持按照编码、名称、描述搜索业务域。 2.2 新增业务域 新增业务域：输入业务域名称、描述新增。 2.3 删除业务域 当前业务域未被其他数据记录引用时，可删除成功，反之如果被引用了，不允许删除。

  史, 昂

  2024年6月20日

  2.3K000
• Oinone 7天入门到精通

  应用中心

  在App Finder 中点击应用中心可以进入Oinone的应用中心，可以看到Oinone平台所有应用列表、应用大屏、以及技术可视化。 1. App Finder 平台提供App Finder搜索查找已安装的应用、点击进入应用； 我收藏的应用：在应用中心收藏后会呈现在“我收藏的应用”； 业务应用：与业务相关、用户可操作的应用； 设计器：平台提供五大设计器设计应用，即平台的无代码能力，包括：模型设计器、界面设计器、流程设计器、数据可视化、集成设计器。 2. 应用列表 应用列表管理平台中所有应用，管理应用的生命周期，如安装、升级、卸载，提供搜索、创建、编辑、卸载、收藏、设置首页等功能。 在介绍应用具体操作前，我们先来了解以下概念： 应用类型：分为应用与模块两种类型，两者区别在于在于应用有前台页面，可以在前台页面操作数据，模块没有前台页面、服务于其他应用或模块，大家在创建应用时可根据业务需求创建应用或模块。 依赖：创建新应用时，可依赖已有应用或模块，依赖后使用依赖应用/模块的能力，比如依赖文件应用可使用导入、导出能力，依赖资源应用可使用地址、语言等能力。 图3-2-35 Oinone的应用列表 2.1 创建 创建应用时，需要选择类型、定义应用名称、技术名称，选择依赖模块、所属分类、客户端类型。 每个应用大多数都需要依赖一些基础模块：文件、资源、 应用分类是按照应用所属业务域进行的分类管理，目前是平台提供的分类，后续会开放给用户自行管理。 客户端类型是指应用适用于PC端、移动端，如果只选择PC端，则应用不可在移动端使用。 2.2 编辑 编辑时，不允许编辑类型，技术名称，需要在创建时定义正确。 2.3 安装与卸载 卸载后，应用就不会呈现在App Finder中，不可进入应用、使用应用，可重新安装，安装后继续使用。 2.4 收藏应用 点击应用卡片右上角的星标可收藏、取消收藏应用，收藏的应用在App Finder和工作台中展示在收藏位置，可快捷进入。 2.5 设置首页 定义每个应用的首页，有两种方式： a. 通过绑定菜单，进入绑定菜单的页面； b. 直接绑定视图，选择模型、找到模型下的视图，如果可作为首页的视图不存在，也可以进入设计器创建。 2.6 应用详情 点击了解更多，可进入应用详情，查看应用基础信息。 2.7 设计器快捷入口 设计页面：进入界面设计器； 设计模型：进入模型设计器； 设计流程：进入流程设计器； 3. 应用大屏 应用大屏按照分类展示应用，未设置应用分类的应用，无法在应用大屏中呈现。 图3-2-37 未设置应用类目则无法在应用大屏中呈现。 4. 技术可视化 在技术可视化页面，出展示已经安装模块的元数据，并进行分类呈现。 图3-2-38 云数据分类呈现

  史, 昂

  2024年5月23日

  2.2K000
• Oinone 7天入门到精通

  报表

  1. 业务场景 报表不局限于表格的样式，还能以各式各样的图表形式展现各项汇总数据 这有利于管理者更为直观地了解公司的经营情况，便于后续进行分析，提高对公司的管理水平。 2. 操作流程 1）进入数据可视化，进入报表tab，维护分组信息； 2）在二级分组名称后点击“+”【添加报表】，对报表进行编辑设计； 3）创建完成后可以【编辑】报表标题、备注； 4）需要通过【选择图表、创建图表】完善报表内容； 5）完善后可以点击【发布】报表，则报表此时可以被引用； 6）如果报表有更新，则可以点击【更新发布】，使业务系统引用对报表变为最新的报表信息； 7）如果报表数据不再可以公开使用，则需要通过【隐藏】功能将报表的引用权限收起，此时数据大屏、前端业务系统均不可再引用该报表，但不影响已被引用的报表； 8）隐藏后可以【取消隐藏】，报表恢复隐藏前的状态和功能，可以被引用。 3. 操作流程图解 3.1 创建分组 1）操作流程：创建分组 2）操作路径：数据可视化-报表-创建分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建报表 3.2 编辑分组名称 1）操作流程：选择分组-编辑分组名称 2）操作路径：数据可视化-报表-编辑分组名称 3）鼠标移动至需要修改的分组上，点击出现的「编辑图标」，可以修改分组名称，修改后分组名称实时更新 3.3 删除分组 1）操作流程：选择分组-删除分组 2）操作路径：数据可视化-报表-删除分组 3）鼠标移动至需要删除的分组上，当分组下无报表时出现「删除图标」，可以点击图标后删除分组，删除一级分组时对应所有的二级分组也会被删除，删除后消失，只要分组下没有报表的分组才能直接删除成功 3.4 创建报表 1）操作流程：选择二级分组-创建报表 2）操作路径：数据可视化-报表-二级分组-创建报表 3）鼠标移动至需要创建报表的二级分组上，出现「+」，点击图标后=需要填写报表标题； a. 报表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； 4）创建后可以选择报表需要展示的图表 3.5 删除报表 1）操作流程：选择报表-删除报表 2）操作路径：数据可视化-报表-二级分组-报表名称-删除图表 3）未发布或者已发布但没有被隐藏的报表，并且没被前端或者数据大屏引用，才展示报表菜单名称后的删除图标 4）删除报表后报表消失 3.6 选择图表 1）操作流程：选择报表-为报表选择图表 2）操作路径：数据可视化-报表-二级分组-报表名称-选择图表 3）选择单个未发布或者已发布但没有被隐藏的报表，点击【选择图表】，弹出“选择图表”弹窗，对该报表需要展示的图表进行选择 a. 需要选择图表的一级分组后才能选择图表； b. 可以多选图表，选择的图表只能是已选一级分组下的未隐藏的未被选择的图表；选择一个二级分组时，默认该二级分组下的图表会全部被选中，图表会按照选中的顺序展示在报表列表； 4）选择图表后，报表信息保持展示图表的最新效果；如果图表更新了，但是报表没有发布最新，则报表在前端展示的仍为最近发布的版本； 5）如果图表中存在超过一行的图内筛选项，则在报表处原始的图表尺寸只能查看一行图内筛选项，需要根据图表在报表处的等比拖动效果展示更多的图内筛选项 3.7 创建图表 1）操作流程：选择报表-创建图表 2）操作路径：数据可视化-报表-二级分组-创建图表 3）选择单个未发布或者已发布但没有被隐藏的报表，点击【创建图表】，弹出“创建图表”弹窗，需要填写图表标题、模型、方法； a. 图表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； b. 模型：需要选择来源数据对应的模型； c. 方法：选择模型后需要选择方法，方法是用来提取模型数据的逻辑； 4）选择成功后进入图表设计页面，创建图表保存后返回，返回到当前报表页面，新创建的图表展示在报表的第一个位置 3.8 拖拽图表 1）操作流程：选择报表-拖拽图表 2) 操作路径：数据可视化-报表-二级分组-报表名称-拖拽图表 3）所有的报表均可拖拽图表，拖拽时需要选择图表，可以上下左右等比拖动，图表的内容也会根据拖动的比例进行缩放，展示全部的被遮挡图表内容 4）拖拽后实时生效，报表信息保持展示最新效果 3.9 移除图表 1）操作流程：选择报表-移除图表 2）操作路径：数据可视化-报表-二级分组-报表名称-移除图表 3）未发布或者已发布但没有被隐藏的报表，并且没被前端或者数据大屏引用，此时可以针对不需要的图表进行移除 4）选择移除后不展示在报表中，不影响原图表 5）报表移除图表后实时更新，更新发布后，前端可以展示最新的报表信息，如果未发布，则仅数据大屏可展示最新的报表信息，前端仍为最近发布的报表 3.10 设置报表筛选项 1）操作流程：选择报表-设置报表筛选项 2）操作路径：数据可视化-报表-二级分组-报表名称-更多-报表筛选项-添加 3）添加时选择筛选项字段的类型，关联每个图表对应的字段，一个图表只能关联一个 4）关联后可以按关联字段查询图表数据 3.11 发布 1）操作流程：选择报表-发布报表 2）操作路径：数据可视化-图表-二级分组-报表-发布 3）选择单个未发布且没有被隐藏的报表，点击【发布】按钮，报表发布后可以被前端引用，报表状态变为已发布，展示最近发布时间； 4）如果报表发布后有更新内容，会展示的更新类型：更新报表信息/更新图表内容/选择图表/移除图表 3.12 查看最近一次发布的版本 1）操作流程：选择报表-查看最近一次发布的版本 2）操作路径：数据可视化-报表-二级分组-报表名称-查看最近一次发布的版本 3）当报表发布后有更新，在最近发布时间左侧展示【查看】，在最近发布时间下展示更新的类型，点击查看可以查看最近发布的版 3.13 更新发布 1）操作流程：选择报表-更新发布报表 2）操作路径：数据可视化-报表-二级分组-报表名称-更新发布报表 3）选择单个已发布且没有被隐藏的报表，并且该报表在上次发布后有所更新，可以点击【更新发布】按钮，将最新的报表内容发布至业务系统，业务系统引用的报表为最新内容； 4）如果更新了内容，但未点击更新发布，则前端业务系统查看的报表仍为最近发布的报表 3.14 隐藏 1）操作流程：选择报表-隐藏报表 2）操作路径：数据可视化-报表-二级分组-报表名称-隐藏报表 3）报表默认不隐藏，可以切换是否隐藏=是 a. 未发布的报表，较隐藏前，不可以操作【发布】，可以【取消隐藏】； b. 已发布的图表，较隐藏前，只能操作【导出图片、导出excel、取消隐藏】； c. 隐藏后的报表不可以被引用，但不影响已经被引用的数据 3.15 取消隐藏 1) 操作流程：选择报表-取消隐藏报表 2) 操作路径：数据可视化-报表-二级分组-报表名称-取消隐藏报表 3) 隐藏后的报表可以取消隐藏，切换是否隐藏=否，取消隐藏后，报表恢复隐藏前的状态和功能，可以被引用 3.16 查看引用 1）流程：选择报表-查看被哪些页面引用 2）操作路径：数据可视化-报表-二级分组-报表-更多-查看引用 3）选择具体的报表，查看当前报表被引用的所有信息 3.17 不允许别人编辑 1）流程：选择报表-不允许别人编辑 2）操作路径：数据可视化-报表-二级分组-报表-更多-不允许别人编辑 3）选择自己创建的报表，对报表是否允许其他人编辑进行设置；如果设置为不允许，则其他人无法编辑报表 3.18 不允许别人引用 1）流程：选择图表-更多-不允许别人引用 2）操作路径：数据可视化-报表-二级分组-报表-更多-不允许别人引用 3）选择自己创建的报表，对报表是否允许他人引用进行设置；如果设置为不允许，则其他人无法引用到该报表 3.19 导出图片 1) 操作流程：选择报表-导出图片 2) 操作路径：数据可视化-报表-二级分组-报表名称-导出图片 3) 选择报表后，点击【导出图片】按钮可以将当前报表导出为图片 3.20 导出EXCEL 1）操作流程：选择报表-导出EXCEL 2）操作路径：数据可视化-报表-二级分组-报表名称-报表导出EXCEL 3）选择报表后，点击【导出EXCEL】按钮可以将当前报表导出为EXCEL

  史, 昂

  2024年6月20日

  2.1K000
• Oinone 7天入门到精通

  页面设计

  1. 功能说明 页面设计时界面设计器中「页面」模块的设计入口，在这个界面，进行页面的设置、搭建、设计、排版。 主要分为顶部操作栏、左侧工具栏、中部设计画布区、右侧属性面板。 2. 操作栏 进入页面设计，顶部显示了页面的标题，以及返回、发布等操作。 2.1 发布 页面设计完成后，点击「发布」运行页面生效。若不点击发布，页面也有自动保存的功能，但在发布前，自动保存也等同于草稿，不会正式生效。 发布时如果有属性不符合校验规则（必填的属性未填、输入的内容校验不通过），会发布失败，相应的字段会特殊标记，需要查看并修改属性。 2.2 显示/隐藏母版 进入页面设计时默认不展示母版，可以手动操作显示母版 3. 工具栏 左侧的工具栏中包括组件库、页面设置等模块。 3.1 组件库 组件库中包含组件和模型，组件是当前设计器支持的所有组件，模型是页面所在模型下的所有字段和动作。 3.1.1 组件 组件中展示了系统支持的所有组件。包含 1）布局类组件，如分组、选项卡等，使用布局组件可以将页面进字段分类、分页； 2）字段类组件，如单行文本、整数、日期等等，使用字段类组件时都会在模型下对应创建一个字段； 3）动作类组件，如跳转动作、提交动作、链接动作等。 3.1.2 模型 组件库顶部，由组件可切换为模型：模型选项下，会展示当前模型的所有字段，以及系统默认动作。可以直接拖拽字段至设计画布中，会应用形成某个组件，可对组件进行多样的属性设置，优化交互。 3.1.2 组件和模型有什么区别 1展示内容维度不同 组件中展示的内容是组件信息，如分组、选项卡、单行文本、文件上传等；模型中展示的是模型下已有的所有字段。 2使用功能不同 组件中的组件使用前需要在模型中创建一个字段，当然，创建好的字段也会存在于模型中；模型中的字段可直接使用，并且使用时会在设计画布中对应生成个默认组件。 3使用场景不同 如果模型中已经存在目标字段，应直接选择从模型中拖拽字段；如果模型中没有需要的字段，可以在页面中增加一个组件，实际上也是在新增一个字段。 3.2 页面设置 页面设置中可以修改当前页面的标题、分组、页面描述，同时也是给页面上传缩略图的唯一入口。 4. 设计画布 将组件或字段拖拽至设计画布区，会生成样式。点击组件，右侧可对其进行设置，大部分属性可实时在画布中展示效果。 5. 属性面板 右侧属性面板抽屉中可以设置属性或查看字段信息，通过不同的属性配置化实现组件的多样化。 5.1 属性 属性中包括基本信息（如标题、占位提示、描述说明等）、校验信息（如是否必填、长度校验等）、交互信息（如排序方式、是否展示计数器等） 5.2 字段 首次从组件中拖拽，会先展示字段信息，并且是需要先创建一个字段，字段创建成功后，再次切换字段选项，只读展示当前组件所对应的字段基本信息。同理，如果是直接从字段中拖拽，字段选项中，只读展示当前字段基本信息。

  史, 昂

  2024年6月20日

  4.0K000