2.4 Oinone的三大独特性

相关推荐

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

  2.0K000
• Oinone 7天入门到精通

  5.5 基础支撑之结算域

  一、基础介绍 随着企业的业务不断进行数字化改造、业务越来越在线化，给企业财务工作带来几个明显的变化和挑战： 变化： 业务在线后，不同类收费、预售、授信模式的创新层出不穷，需要财务不仅只从事单一传统的会计核算工作，还需要积极地参与到业务中去。 从事后算账事后报账，变成财务业务一体化信息的实时处理 挑战： 业务系统与财务系统明显割裂，业务部门与财务部门各自采用一套软件处理其数据，不能及时沟通信息和协同更正信息。 财务系统往往都是单体的传统架构，凭证处理能力无法适应今天企业的不断爆棚的业务发展。 财务的严谨性与业务的灵活性中间有巨大的鸿沟，导致业务要做一种创新的模式，财务可能是最大阻碍。 不论是传统软件公司喜欢说的业财一体化还是互联网平台公司喜欢说的结算平台，都是为了解决以上变化和挑战的。业财一体化主要是从财务部门角度出发进行，在业务支撑上化被动为主动。结算中心往往是结合财务部门和业务运营部门的需求。如果拿我们下面介绍的，计费、账务、会计三个领域来说，业财一体化项目往往只包括账务和会计，结算中心往往包括：计费、账务、会计。或者说业财一体化弱化了计费，没有纳入企业统一管理，把如何计价给到了业务系统自行决定或者简单处理只要产生应收应付单据（计费详单）就好了。 结算域的是一个相对比较专业的领域，没有一定背景知识甚至连一些专业名词都很难理解，更不用说模型设计了，这里我尽快地简单去描述定位而不是描述细节。而且2.1.9版本的结算领域相对还是没有那么完善，这里介绍的是下个版本的内容，所以大家看当前版本的时候会有一些对不上。 二、子领域职责 图5-5-1 子领域职责 计费 计费的价值 随着企业多业务发展以及融合计费需求，我们需要引入计费模型，对灵活计价模式进行支持，快速支撑未来可能的计费方式等 计费的核心设计理念 所有的计算器都继承自虚函数计算器y=f(x) 平滑兼容-默认斜率计算器y=a+bxY – 求值结果(用下标描述结果是什么)A – 偏移量(计算固定值)B – 斜率(费率值)X – 变量(数量)任何计算都是通过一组斜率组合出来的 利用区间限定定义各种斜率组合出各种算法交易额0-100w：y=0.03x >100w：y=0.02x;时间0:00-6:00：y=0.02x 6:00-24:00：y=0.03xX- 变量，数量 图5-5-2 计费的核心设计理念 更灵活多维区间组合，时间维度、计数器维度、其它属性维度计数器区间斜率限定，比如交易额、空间、使用月份数… 计费的核心功能 通过产品定义运营方案 通过订购产品完成商务合同的签订来决定客户计费策略，或者通过系统产品定义通用计费策略 支撑各类产品的模拟计费 以事件驱动，根据事件、产品、订购关系完成产品路由，并实时产生计费详单 根据计费科目与账务科目，打通账务进行核销 账务 账务的价值 以账户账本为中心，提供记账、账户管理，以及账务的实时监控与持续对账。如果计费是对接业务，那么账务的价值是对接财务系统 账务的核心设计理念 不依赖计费，可独立对接，所有业务最终都需要反馈到帐户账本的操作上，并通过账本明细记录所有操作 账务的核心功能 记账：充值、转账、提现，冻结、解冻，差错处理 账务管理：开户、科目维护 账务查询：对账 会计（暂不在计划内） 会计的价值 结算平台的会计模块不是严格意义上的会计系统，它主要是衔接其他的财务系统，做凭证前置处理。在于汇总凭证，产出业务帐，对接到财务总帐系统，缓解财务系统压力。 三、模型介绍 图5-5-3 模型介绍 四、结算基础流程 图5-5-4 结算基础流程

  史, 昂

  2024年5月23日

  1.3K000
• Oinone 7天入门到精通

  3.5.7.3 自定义布局

  布局是什么 在系统中，布局决定了母版内的页面元素，一个页面可以由多个组件进行组装，布局可以根据视图类型来替换。 默认布局范围: 图3-5-7-36 默认布局范围 作用场景 系统内置了多个布局组件，这些组件适用于全局、某个应用或某个页面，提供了灵活的布局定制选项。这些组件根据不同类型的视图进行了默认的组装，这也是选择了视图类型后，页面能够呈现的原因。当然，这些默认的组装是可以被覆盖、新增和添加新组件的。 使用registerLayout进行自定义布局 开发者在使用这些布局组件时，应该遵循公司的规范进行统一的调整。自定义布局组件的使用可通过 registerLayout 实现。registerLayout 的第一个参数是代表布局的 XML，第二个参数是不同的选项维度，默认包含以下维度： viewType: 视图类型 module: 视图模型所在模块 moduleName: 视图模型所在模块名称 model: 视图模型编码 modelName: 视图模型名称 viewName: 视图名称 actionName: 动作名称 inline: 是否内嵌视图(子视图特有) ttype: 模型字段类型(子视图特有) relatedTtype: 关联模型字段类型(子视图特有) field: 字段(子视图特有) 需要注意的是，动作可以是A模块下的a模型，这个动作可以打开B模块下的b模型的视图，module、moduleName、model、modelName应该填b模型对应的值，只不过大部分场景我们都是本模型的动作打开本模型的视图，所以这些场景拿动作所在模型填这些值也可以这些纬度也可以通过查看TS的定义查看 全局 在系统中，我们可以通过指定视图类型来决定某一类视图的全局布局。以表格为例，当第二个入参为 { viewType: ViewType.Table } 时，代表了替换了系统内所有表格的布局样式。 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./layout，layout/index.ts更新导出./tableLayout： 图3-5-7-37 全局纬度注册布局工程目录示例 示例代码 import {registerLayout, ViewType} from '@kunlun/dependencies' /** * 把系统内所有表格类型视图的全局动作放入搜索区域 * * 移动actionBar布局至外层 * <element widget="actionBar" slot="actionBar" slotSupport="action"> * <xslot name="actions" slotSupport="action" /> * </element> * */ const registerGlobalTableLayout = () => { return registerLayout(`<view type="TABLE"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="table" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view>`, { viewType: ViewType.Table }) } registerGlobalTableLayout() 图3-5-7-38 全局纬度注册布局代码示例 效果 图3-5-7-39 全局纬度注册布局效果示例 应用 在系统中，我们可以通过指定视图类型和模块名称来替换某一类视图在特定模块下的全局布局。以表格为例，当第二个入参为 { viewType: ViewType.Table, moduleName: ‘resource’ } 时，代表了替换了资源应用下所有表格的布局样式，而其他应用仍使用默认布局 import {registerLayout, ViewType} from '@kunlun/dependencies' const registerModuleTableLayout = () => { return registerLayout(`<view type="TABLE"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <pack…

  史, 昂

  2024年5月23日

  1.6K000
• Oinone 7天入门到精通

  2.4.2 Oinone独特性之每一个需求都可以是一个模块

  我们的Oinone平台采用模型驱动的方式，并符合面向对象设计原则，每个需求都可以是一个独立模块，可以独立安装、升级和卸载。这让系统真正像乐高积木一样搭建，具有高度的灵活性和可维护性。 与大部分低代码或无代码平台不同的是，它们的应用市场上的应用往往是模板式的，也就是说，这是一个拷贝，个性化只能在应用上直接修改，而且一旦修改就不能升级。这对于软件公司和客户来说都非常痛苦。客户无法享受到软件公司产品的升级功能，而软件公司在服务大量客户时，也会面临不同版本的维护问题，成本也非常高。而我们的Oinone平台完全避免了这些问题，让客户和软件公司都可以从中受益（如下图2-9、2-10所示）。 图2-9软件公司与客户项目的关系-让标准与个性化共存 图2-10 软件公司与客户项目的关系-让升级无忧 实现原理 在满足客户个性化定制需求时，传统的方法通常是直接修改标准产品源码，但这样做会带来一个问题：标准产品无法持续升级。相反，无论是在OP模式还是SaaS模式下，Oinone都采用全新的模块为客户进行个性化开发，保持标准产品和个性化模块的独立维护和升级。这是因为在元数据设计时，Oinone采用了面向对象的设计原则，实现了元数据设计与面向对象设计思想的完美融合。 面向对象设计的核心特征包括封装、继承、多态，而Oinone的元数据设计完全融入了这些思想。下面是几个例子，说明Oinone的元数据设计如何体现面向对象设计的核心特征，并带来了什么好处： 继承：在继承原有模型的字段、逻辑、展示的情况下，增加一段代码来扩展模型的字段、逻辑、展示。 多态：在继承原有模型的字段、逻辑、展示的情况下，增加一段代码来覆盖模型的原有字段、逻辑、展示。 封装：外部无需关心模型内部如何实现，只需按照不同场景调用模型对应开放级别的字段、逻辑、展示。 这些特征和优势使得Oinone在满足客户个性化需求时更加灵活和可持续，同时使得标准产品的维护和升级变得更加容易和高效。 在Java语言设计中，万物皆对象，一切都以对象为基础。而Oinone的元数据设计则是以模型为出发点，作为数据和行为的承载体。如下图2-11清晰地描述了Java面向对象编程中封装、继承、多态在Oinone元数据中的对应关系。Oinone元数据描述了B对象继承A对象并拥有其所有属性和方法，并覆盖了A对象的属性1和方法1，同时新增了属性3和方法3。 此外，Oinone的面向对象特性是用元数据来描述的。一方面，我们基于Java编码规范收集相关元数据，以保持不改变Java编程习惯。另一方面，方法和对象的挂载是松耦合的，只要按照元数据规范进行挂载，就能轻松地将其附加到模型上。在不改变原有A对象的情况下，我们可以直接增加方法和属性（如下图2-12所示）。 图2-11 java面向对象在Oinone元数据中对应 图2-12 java对象的修改 VS Oinone元数据模型的修改 Oinone函数不仅支持面向对象的继承和多态特性，还提供了面向切面的拦截器和SPI机制的扩展点，以应对方法逻辑的覆盖和扩展，以及系统层面的逻辑扩展（如下图2-13所示）。这些扩展功能可以独立地在模块中维护。 其中，拦截器可以在不侵入函数逻辑的情况下，根据优先级为满足条件的函数添加执行前和执行后的逻辑。 扩展点是一种类似于SPI机制的逻辑扩展机制，用于扩展函数的逻辑。通过这一机制，可以对函数逻辑进行灵活的扩展，以满足不同的业务需求。 图2-13 Oinone函数拦截与扩展机制 不管是对象、属性还是方法，都可以以独立的模块方式来扩展，这就使得每一个需求都可以成为一个独立的模块，方便我们在研发标准产品时进行模块化的划分，同时也让我们在以低代码模式为客户进行二次开发时，能够更好地支持“标准产品迭代与个性化保持独立”的需求。在2.4.3【oinone独特性之低无一体】一文中，我们也提到了这个特性，但那是在低无一体的情况下，通过元数据融合来实现的。让我们看看基于低代码开发模式下，典型的Oinone二次开发工程结构（如下图2-14所示），就可以更好地理解这个特性啦！ 图2-14 Oinone典型的二开工程结构

  史, 昂

  2024年5月23日

  1.7K000
• Oinone 7天入门到精通

  4.1.10 函数之触发与定时（改）

  函数的触发和定时在很多场景中会用到，也是一个oinone的基础能力。比如我们的流程产品中在定义流程触发时就会让用户选择模型触发还是时间触发，就是用到了函数的触发与定时能力。 整体链路示意图（如下图4-1-10-1 所示），本文只讲trigger里的两类任务，一个是触发任务，一个是定时任务，异步任务放在4.1.11【函数之异步执行】一文中单独去介绍。 图4-1-10-1 整体链路示意图 一、触发任务TriggerTaskAction（举例） 触发任务的创建，使用pamirs-middleware-canal监听mysql的binlog事件，通过rocketmq发送变更数据消息，收到MQ消息后，创建TriggerAutoTask。 触发任务的执行，使用TBSchedule拉取触发任务后，执行相应函数。 注意：pamirs-middleware-canal监听的数据库表必须包含触发模型的数据库表。 Step1 下载canal中间件 下载pamirs-middleware-canal-deployer-3.0.1.zip，去.txt后缀为pamirs-middleware-canal-deployer-3.0.1.zip，解压文件如下： 图4-1-10-2 下载canal中间件 Step2 引入依赖pamirs-core-trigger模块 pamirs-demo-api增加pamirs-trigger-api <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-api</artifactId> </dependency> 图4-1-10-3 pamirs-trigger-api依赖包 DemoModule在模块依赖定义中增加@Module(dependencies={TriggerModule.MODULE_MODULE}) @Component @Module( name = DemoModule.MODULE_NAME, displayName = "oinoneDemo工程", version = "1.0.0", dependencies = {ModuleConstants.MODULE_BASE, CommonModule.MODULE_MODULE, UserModule.MODULE_MODULE, TriggerModule.MODULE_MODULE} ) @Module.module(DemoModule.MODULE_MODULE) @Module.Advanced(selfBuilt = true, application = true) @UxHomepage(PetShopProxy.MODEL_MODEL) public class DemoModule implements PamirsModule { ……其他代码 } 图4-1-10-4 模块依赖中增加Trigger模块 pamirs-demo-boot 增加pamirs-trigger-core和pamirs-trigger-bridge-tbschedule的依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-trigger-bridge-tbschedule</artifactId> </dependency> 图4-1-10-5 增加pamirs-trigger-core和pamirs-trigger-bridge-tbschedule的依赖 修改pamirs-demo-boot的applcation-dev.yml 修改pamris.event.enabled和pamris.event.schedule.enabled为true pamirs_boot_modules增加启动模块:trigger pamirs: event: enabled: true schedule: enabled: true rocket-mq: namesrv-addr: 127.0.0.1:9876 boot: init: true sync: true modules: – base – common – sequence – resource – user – auth – message – international – business – trigger – demo_core 图4-1-10-6 启动模块中增加trigger模块 Step3 启动canal中间件 canal的库表需要手工建 create schema canal_tsdb collate utf8mb4_bin 图4-1-10-7 canal的建库语句 CREATE TABLE IF NOT EXISTS `meta_snapshot` ( `id` bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT '主键', `gmt_create` datetime NOT NULL COMMENT '创建时间', `gmt_modified` datetime NOT NULL COMMENT '修改时间', `destination` varchar(128) DEFAULT NULL COMMENT '通道名称', `binlog_file` varchar(64) DEFAULT NULL COMMENT 'binlog文件名', `binlog_offest` bigint(20) DEFAULT NULL COMMENT 'binlog偏移量', `binlog_master_id` varchar(64) DEFAULT NULL COMMENT 'binlog节点id', `binlog_timestamp` bigint(20) DEFAULT NULL…

  史, 昂

  2024年5月23日

  1.9K000