7.1 设计器总览

相关推荐

• 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日

  884000
• Oinone 7天入门到精通

  4.2.4 框架之网络请求-HttpClient

  oinone提供统一的网络请求底座，基于graphql二次封装 一、初始化 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware() // 必须设置，请求回调。具体查看文章https://shushi.yuque.com/yqitvf/oinone/vwo80g http.setBaseURL() // 必须设置，后端请求的路径 图4-2-4-1 初始化代码示例 二、HttpClient详细介绍 获取实例 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); 图4-2-4-2 获取实例 接口地址 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setBaseURL('接口地址'); http.getBaseURL(); // 获取接口地址 图4-2-4-3 接口地址 请求头 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setHeader({key: value}); 图4-2-4-4 请求头 variables import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setExtendVariables((moduleName: string) => { return customFuntion(); }); 图4-2-4-5 variables 回调 import { HttpClient } from '@kunlun/dependencies'; const http = HttpClient.getInstance(); http.setMiddleware([middleware]); 图4-2-4-6 回调 业务使用-query private http = HttpClient.getInstance(); private getTestQuery = async () => { const query = `gql str`; const result = await this.http.query('module name', query); console.log(result) return result.data[`xx`]['xx']; // 返回的接口，打印出result对象层次返回 }; 图4-2-4-7 业务使用-query 业务使用-mutate private http = HttpClient.getInstance(); private getTestMutate = async () => { const mutation = `gql str`; const result = await this.http.mutate('module name', mutation); console.log(result) return result.data[`xx`]['xx']; // 返回的接口，打印出result对象层次返回 }; 图4-2-4-8 业务使用-mutate 三、如何使用HttpClient 初始化 在项目目录src/main.ts下初始化httpClient 初始化必须要做的事: 设置服务接口链接 设置接口请求回调 业务实战 前文说到自定义新增宠物表单，让我们在这个基础上加入我们的httpClient; 第一步新增service.ts 图4-2-4-8 新增service.ts service.ts import { HttpClient }…

  史, 昂

  2024年5月23日

  1.2K000
• Oinone 7天入门到精通

  模型

  1. 模型介绍 Oinone低代码设计器是采用模型驱动的方式来设计应用，数据、数据都在模型，在模型设计器的模型管理模块，通过可视化配置的方式为用户提供快速设计模型的功能。 模型是对应用中所需要描述的实体进行必要的简化，并用适当的变现形式或规则把它的主要特征描述出来所得到的系统模仿品。模型由元信息、字段、数据管理器和自定义函数构成。 2. 操作模式 为了满足有无研发背景知识的不同用户使用需求，在模型设计器中，支持切换操作模式，包含专家模式和经典模式。经典模式功能基础且完善，操作交互简单易理解，适用于非研发用户；专家模式下模型的设计能力更高，有经典模式下的所有功能，相比于经典模式，功能更多，适用于一般有研发知识基础的用户。 比如在添加模型时，经典模式下可以创建的模型类型有：存储模型、传输模型，专家模式下，在此基础上还可以创建抽象模型和代理模型。 3. 分组管理 当模型过多时，可以自定义添加15个分组，将模型进行归类管理。点击「全部」展开所有分组，展开后，分组右侧可以管理分组。 3.1 管理分组 展开分组后，点击「管理分组」，出现弹窗，在弹窗中可以修改分组名称、添加分组、删除分组。 3.2 添加分组 操作「+模型分组」，可以直接输入分组名称后回车以添加一个新分组，或快捷选择其他应用使用的分组。最多添加15个分组。 3.3 修改分组 双击分组标签，即可对已有分组进行名称的修改。若分组在其他应用也使用，则在其他应用内，该分组名称也同步变化。 3.4 删除分组 点击分组标签右侧的“X”按钮，即为删除分组，但分组下如果有模型或者分组有被其他应用使用，则分组无法删除。 4. 模型管理 4.1 管理模式 在模型管理中，有两种管理模式，分别是图管理模式和列表管理模式。（下文简称图模式、表模式） 可以根据不同的使用场景，切换管理模式： 图管理模式下，模型操作区展示当前模型和与当前模型有直接关联关系的模型关系图，可以在关注模型关联关系时使用； 列表管理模式下，展示更多更详细的模型信息、字段信息，且左侧可快速切换不同模型，可以在关注模型基础信息时使用； 4.2 筛选 4.2.1 图模式筛选 在图模式下，顶部进行应用/模块、模型类型、分组的筛选，依此向下可以搜索或展开当前筛选条件下的模型列表，切换模型后在模型操作区将展示另一模型的信息。为了更大程度保留图模式下的模型展示区域，模型列表默认不会展示，点击搜索行的任意筛选项，即可展开模型列表。 4.2.2 表模式筛选 在表模式下，顶部和图模式一致，都是应用/模块、模型类型、分组的筛选，模型操作区左侧会直接展示模型列表。 4.2.3 重置筛选 图模式和表模式下，右侧都有重置筛选的选项。如果点击“重置筛选”按钮，则将筛选栏恢复到进入页面时的选项。 4.3 模型分组 模型新增成功后，默认无所属分组，每个模型可以设置所属分组，设置后通过分组进行筛选时，模型即展示在所属分组下。 4.3.1 图模式设置分组 图模式下为模型设置分组，点击模型信息顶部第一个「模型分组」操作图标，点击后设置或修改分组。 4.3.2 表模式设置分组 表模式下为模型设置分组，点击模型信息右上角第一个操作「模型分组」，点击后设置或修改分组。 4.4 继承关系 查看模型的继承关系，点击展示跟当前模型有父子关系的模型关系图。 页面初始状态只展示一层父模型与一层子模型，父模型顶部和子模型底部有“展示更多”按钮，点击展示更多再向上或向下加载一层。连线的顶部展示“收起”按钮，点击“收起”按钮收起子模型。 点击非当前模型，会打开新窗口，链接跳转到点击模型的模型设计器页面，新页面满足点击模型的筛选条件； 支持设置显示比例，缩放模型关系图； 支持最大化全屏展示。 4.4.1 图模式继承关系 4.4.2 表模式继承关系 4.5 查看引用关系 当删除模型时，如果模型有被其他设计器引用使用，则无法被删除。删除失败时会弹出“该模型仍在使用中，无法删除模型”的提示，并且可以点击「查看模型引用」，进而展示引用的详细信息。 引用包括五种：模型引用、页面引用、逻辑引用、流程引用、图表引用。 每种关系通过列表展示，列表项为链接（链接到对应的设计页面），内容为对应名称。例如，存在引用关系的流程的列表项显示的是流程的名称。列表项链接到对应流程的设计页面。 4.6 导入模型 导入模型的添加模型的一种方式，下载导入模板后在Excel中按照规则填写模型信息，成功导入后即添加模型成功。 点击「导入模型」后，可在弹窗中下载导入模板、上传导入文件、查看导入说明。 4.6.1 下载导入模板 下载导入模板时，会根据当前的操作模式不同，下载到的模板也不同。 在经典模型下，下载的导入模板中需要填写的模型信息基础、数量少、易懂。 在专家模型下，下载的导入模板中需要填写的模型信息丰富、数量多、专业。 4.6.2 查看导入说明 导入说明中描述了导入模板中各项内容的含义、填写规则等，有助于用户正确填写导入文件。在经典模式或专家模式下点击「导入说明」后，分别弹出两种操作模式下的导入说明。 4.6.3 导入上传 导入文件正确填写后，在弹窗中选择Excel文件，或将Excel直接拖入弹窗中的文件上传区域。Excel文件仅支持三种格式：.xlsx .xls .xlsm。 4.7 添加模型 点击「添加模型」，出现模型信息填写的弹窗，弹窗中包括：模型名称、模型类型、父模型。填写并保存成功后，模型即创建成功。 4.7.1 模型类型 专家模式下支持创建4种类型的模型：存储模型、传输模型、抽象模型、代理模型；经典模式下支持创建2种类型的模型：存储模型、传输模型。 存储模型：用于存储数据的模型，生成前后端交互协议、数据表、数据构造器和数据管理器。 抽象模型：用于配置多个子模型的公用字段和函数的模型，不会生成前后端交互协议、数据表、数据构造器和数据管理器。 传输模型：用于数据传输的模型，生成前后端交互协议和数据构造器，不生成数据表和数据管理器。 代理模型：用于以代理的方式扩展存储模型的模型，可以在存储模型的基础上增加传输字段和函数，与被代理的存储模型共用相同的数据管理器。 4.7.2 选择父模型 添加模型时，需要选择父模型，其中，经典模式下，无需且不展示父模型；专家模式下，必须选择父模型。 存储模型的父模型，默认是“基础存储模型”，可选项为可见的抽象模型和存储模型。 传输模型的父模型，默认是“基础存储模型”，可选项为可见的传输模型。 抽象模型的父模型，默认是“基础存储模型”，可选项为可见的抽象模型。 代理模型的父模型，无默认值，可选项为可见的存储模型和代理模型。 4.8 编辑模型 创建成功的模型，可以对其进行编辑，但只有部分信息支持编辑。 4.8.1 图模式编辑模型 图模式下，点击模型标题右侧的「编辑模型」按钮，即可在右侧弹出的抽屉中编辑模型信息。 4.8.2 表模式编辑模型 表模式下，点击模型信息标题右侧的「编辑模型」按钮，下方模型信息中可以被编辑修改的字段即由只读变为可编辑。 4.9 隐藏/可见模型 对于暂时不使用的模型，可以进行隐藏（隐藏后可再设置可见）的操作。 在其他设计器需要选择模型使用时，隐藏的模型将不被展示。对隐藏的模型再次操作可见后，即可选择到。 4.9.1 图模式隐藏/可见模型 图模式下，展开模型列表，模型列表中每个模型所在行的右侧，可点击隐藏/可见图标，以隐藏/可见该模型。 可见的模型常规展示，无特殊标识；隐藏后的模型在列表中将置灰展示。 4.9.1 表模式隐藏/可见模型 表模式下，模型信息左侧的模型列表中每个模型所在行的右侧，可点击隐藏/可见图标，以隐藏/可见该模型。 可见的模型常规展示，无特殊标识；隐藏后的模型在列表中将置灰展示。 4.10 删除模型 不再使用模型可以进行删除，删除时需要确保模型没有被其他设计器引用。删除成功后的模型将不在列表展示，且不可恢复，请谨慎操作。 4.10.1 图模式删除模型 图模式下，展开模型列表，模型列表中每个模型所在行的右侧，可点击删除图标，以删除该模型。 4.10.2 表模式删除模型 表模式下，模型信息左侧的模型列表中每个模型所在行的右侧，可点击删除图标，以删除该模型。 4.10.3 存在引用关系 如果删除的模型存在引用关系，则无法删除，并提示模型仍在使用。点击提示中的「查看模型引用」，可以查看这个模型引用情况。 5. 字段管理 在模型中，可以对字段进行增删改查等基础管理操作。 5.1 添加字段 每个模型中可以添加多个字段，手动添加的字段都为自定义字段。点击「添加字段」，右侧出现字段信息填写的抽屉，抽屉中包括：字段名称、字段业务类型、存储类型、长度（部分业务类型的字段无长度设置）。填写并保存成功后，字段即创建成功。 5.1.1 图模式添加字段 5.1.2 表模式添加字段 5.1.3 字段业务类型 添加字段时，支持设置16种基础类型的字段、支持设置4种关系类型字段。 基础类型：用户ID、整数、浮点数、金额、布尔型、文本、多行文本、富文本、日期时间、年份、日期、时间、数据字典、键值对、手机、邮箱； 字段为数据字典时需要选择一个数据字典。 关系类型：一对一、多对一、一对多、多对多 字段为关系类型字段时需要选择关联的模型。 5.1.4 多值字段 多值字段表示该字段可以存储或传输多个该业务类型的数据，非多值字段只能存储或传输单个该业务类型的数据。 5.1.5 存储类型 设置字段的存储类型：存储字段、传输字段 存储字段：用于查询和存储字段 传输字段：仅用于数据的组装与存储 5.2 编辑字段 创建成功的字段，可以对其进行编辑，但只有部分信息支持编辑。 字段长度和精度只能由小往大改，不能由大往小改。 关联关系的关联模型、关联字段、关系字段、中间模型，中间关系字段、中间关联字段、支持关联查询不可修改。 5.2.1 图模式编辑字段 图模式下，点击字段列表所在行右侧的「编辑字段」按钮，即可在右侧弹出的抽屉中编辑字段信息。 5.2.2 表模式编辑字段 表模式下，点击模型信息标题右侧的「编辑模型」按钮，下方模型中的字段都可以被展开编辑。 5.3 隐藏/可见字段 对于暂时不使用的字段，可以进行隐藏（隐藏后可再设置可见）的操作。 在其他设计器需要选择字段使用时，隐藏的字段将不被展示。对隐藏的字段再次操作可见后，即可选择到。 5.3.1 表模式隐藏/可见字段 表模式下，编辑模型时，字段所在行右侧可以操作隐藏/可见。 可见的字段常规展示，无特殊标识；隐藏的字段在列表中将置灰展示。 5.4 删除字段…

  史, 昂

  2024年6月20日

  1.2K000

• 4.5 研发辅助

  这里都是一些提升研发效率的小工具

  史, 昂

  Oinone 7天入门到精通 2024年5月23日

  1.2K000
• Oinone 7天入门到精通

  4.1.24 框架之分库分表

  随着数据库技术的发展如分区设计、分布式数据库等，业务层的分库分表的技术终将成老一辈程序员的回忆，谈笑间扯扯蛋既羡慕又自吹地说到“现在的研发真简单，连分库分表都不需要考虑了”。竟然这样为什么要写这篇文章呢？因为现今的数据库虽能解决大部分场景的数据量问题，但涉及核心业务数据真到过亿数据后性能加速降低，能给的方案都还有一定的局限性，或者说性价比不高。相对性价比比较高的分库分表，也会是现阶段一种不错的补充。言归正传oinone的分库分表方案是基于Sharding-JDBC的整合方案，所以大家得先具备一点Sharding-JDBC的知识。 一、分表（举例） 做分库分表前，大家要有一个明确注意的点就是分表字段的选择，它是非常重要的，与业务场景非常相关。在明确了分库分表字段以后，甚至在功能上都要做一些妥协。比如分库分表字段在查询管理中做为查询条件是必须带上的，不然效率只会更低。 Step1 新建ShardingModel模型 ShardingModel模型是用于分表测试的模型，我们选定userId作为分表字段。分表字段不允许更新，所以这里更新策略设置类永不更新，并在设置了在页面修改的时候为readonly package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.boot.base.ux.annotation.field.UxWidget; import pro.shushi.pamirs.boot.base.ux.annotation.view.UxForm; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.enmu.FieldStrategyEnum; @Model.model(ShardingModel.MODEL_MODEL) @Model(displayName = "分表模型",summary="分表模型",labelFields ={"name"} ) public class ShardingModel extends AbstractDemoIdModel { public static final String MODEL_MODEL="demo.ShardingModel"; @Field(displayName = "名称") private String name; @Field(displayName = "用户id",summary = "分表字段",immutable=true/* 不可修改 **/) @UxForm.FieldWidget(@UxWidget(readonly = "scene == 'redirectUpdatePage'"/* 在编辑页面只读 **/ )) @Field.Advanced(updateStrategy = FieldStrategyEnum.NEVER) private Long userId; } 图4-1-24-1 新建ShardingModel模型 Step2 配置分表策略 配置ShardingModel模型走分库分表的数据源pamirsSharding 为pamirsSharding配置数据源以及sharding规则 a. pamirs.sharding.define用于oinone的数据库表创建用 b. pamirs.sharding.rule用于分表规则配置 pamirs: load: sessionMode: true framework: system: system-ds-key: base system-models: – base.WorkerNode data: default-ds-key: pamirs ds-map: base: base modelDsMap: "[demo.ShardingModel]": pamirsSharding #配置模型对应的库 图4-1-24-2 指定模型对应数据源 pamirs: sharding: define: data-sources: ds: pamirs pamirsSharding: pamirs #申明pamirsSharding库对应的pamirs数据源 models: "[trigger.PamirsSchedule]": tables: 0..13 "[demo.ShardingModel]": tables: 0..7 table-separator: _ rule: pamirsSharding: #配置pamirsSharding库的分库分表规则 actual-ds: – pamirs #申明pamirsSharding库对应的pamirs数据源 sharding-rules: # Configure sharding rule ，以下配置跟sharding-jdbc配置一致 – tables: demo_core_sharding_model: #demo_core_sharding_model表规则配置 actualDataNodes: pamirs.demo_core_sharding_model_${0..7} tableStrategy: standard: shardingColumn: user_id shardingAlgorithmName: table_inline shardingAlgorithms: table_inline: type: INLINE props: algorithm-expression: demo_core_sharding_model_${(Long.valueOf(user_id) % 8)} props: sql.show: true 图4-1-24-3 分库分表规则配置 Step3 配置测试入口 修改DemoMenus类增加一行代码，为测试提供入口 @UxMenu("分表模型")@UxRoute(ShardingModel.MODEL_MODEL) class ShardingModelMenu{} 图4-1-24-4 配置测试入口 Step4 重启看效果 自行尝试增删改查 观察数据库表与数据分布 图4-1-24-5 自行尝试增删改查 图4-1-24-6 观察数据库表与数据分布 二、分库分表（举例） Step1 新建ShardingModel2模型 ShardingModel2模型是用于分库分表测试的模型，我们选定userId作为分表字段。分库分表字段不允许更新，所以这里更新策略设置类永不更新，并在设置了在页面修改的时候为readonly package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.boot.base.ux.annotation.field.UxWidget; import pro.shushi.pamirs.boot.base.ux.annotation.view.UxForm; import…

  史, 昂

  2024年5月23日

  1.1K000