相关推荐

• Oinone 7天入门到精通

  第7章 Oinone的设计器们（改）

  史, 昂

  2024年5月23日

  1.8K001
• 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.3K000
• Oinone 7天入门到精通

  4.2.6 框架之网络请求-拦截器

  在整个http的链路中，异常错误对前端来说尤为重要，他作用在很多不同的场景，通用的比如500, 502等; 一个好的软件通常需要在不同的错误场景中做不同的事情。当用户cookie失效时，希望能自动跳转到登录页；当用户权限发生变更时，希望能跳转到一个友好的提示页；那么如何满足这些个性化的诉求呢？接下来让我们一起了解oinone前端网络请求-拦截器。 一、入口 在src目录下main.ts中可以看到VueOioProvider，这是系统功能提供者的注册入口 图4-2-6-1 VueOioProvider import interceptor from './middleware/network-interceptor'; VueOioProvider( { http: { callback: interceptor } }, [] ); 图4-2-6-2 拦截器的申明入口 二、middleware 在项目初始化时使用CLI构建初始化前端工程，在src/middleware有拦截器的默认实现： 图4-2-6-3 在src/middleware有拦截器的默认实现 三、interceptor interceptor在请求返回后触发，interceptor有两个回调函数，error和next error参数 graphQLErrors 处理业务异常 networkError 处理网络异常 next extensions 后端返回扩展参数 const interceptor: RequestHandler = (operation, forward) => { return forward(operation).subscribe({ error: ({ graphQLErrors, networkError }) => { console.log(graphQLErrors, networkError); // 默认实现 => interceptor error }, next: ({ extensions }) => { console.log(extensions); // 默认实现 => interceptor next }, }); }; 图4-2-6-4 后端返回扩展参数 四、interceptor error // 定义错误提示等级 const DEFAULT_MESSAGE_LEVEL = ILevel.ERROR; // 错误提示等级 对应提示的报错 const MESSAGE_LEVEL_MAP = { [ILevel.ERROR]: [ILevel.ERROR], [ILevel.WARN]: [ILevel.ERROR, ILevel.WARN], [ILevel.INFO]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO], [ILevel.SUCCESS]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS], [ILevel.DEBUG]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS, ILevel.DEBUG] }; // 错误提示通用函数 const notificationMsg = (type: string = 'error', tip: string = '错误', desc: string = '') => { notification[type]({ message: tip, description: desc }); }; // 根据错误等级 返回错误提示和类型 const getMsgInfoByLevel = (level: ILevel) => { let notificationType = 'info'; let notificationText = translate('kunlun.common.info'); switch (level) { case ILevel.DEBUG: notificationType = 'info'; notificationText = translate('kunlun.common.debug'); break; case ILevel.INFO: notificationType = 'info'; notificationText = translate('kunlun.common.info'); break;…

  史, 昂

  2024年5月23日

  1.3K000
• Oinone 7天入门到精通

  3.5.2.1 整体介绍

  虽然我们有小眼睛可以让用户自定义展示字段和排序喜好，以及通过权限控制行、列展示，但在我们日常业务开发中还是会对页面进行调整，以满足业务方的对交互友好和便捷性的要求。本节会在如何自定义之前我们先介绍页面结构与逻辑，再带小伙伴一起完成自定义view的Template和Layout，以及整个母版的Template和Layout 页面的构成讲解 页面交互拓扑图 页面交互拓扑图 图3-5-2-1 页面交互拓扑图 注：页面逻辑交互拓扑图说明 模块作为主切换入口 模块决定菜单列表 菜单切换触发点击action 前端根据Mask、View进行渲染， a. Mask是母版是确定了主题、非主内容分发区域所使用组件和主内容分发区域联动方式的页面模板。全局、应用、视图动作、视图都可以通过mask属性指定母版 bMask和View都是有layout定义和template定义合并而成，系统会提供默认母版，以及为每种视图提供默认layout c. layout与template通过插槽进行匹配 Action根据不同类型做出不同访问后端服务、url跳转、页面路由、发起客户端动作等 Aciton路由可以指定Mask、视图组件的layout、template a. 当layout没有指定的时候则用系统默认的 b. 当template没有指定的时候，且视图组件相同类型有多条记录时，根据优先级选取 Mask和视图组件的layout优先级（视图组件>视图动作 > 应用 > 全局） 默认母版以及各类视图组件 母版布局 默认母版基础布局base-layout <mask layout="default"> <header slot="header"/> <container slot="main" name="main"> <sidebar slot="sidebar"/> <container slot="content"/> </container> <footer slot="footer"/> </mask> 图3-5-2-2 默认母版基础布局base-layout 母版template <mask layout="default"> <mask name="defaultMask"> <template slot="header"> <container name="appBar"> <element widget="logo"/> <element widget="appFinder"/> </container> <container name="operationBar"> <element widget="notification"/> <element widget="dividerVertical"/> <element widget="languages"/> </container> <element widget="userProfile"/> </template> <template slot="sidebar"> <element widget="navMenu"/> </template> <template slot="content"> <element widget="breadcrumb"/> <element widget="mainView"/> </template> </mask> 图3-5-2-3 母版template 注： 上例中因为名称为main的插槽不需要设置更多的属性，所以在template中缺省了main插槽的template标签。 最终可执行视图 <mask name="defaultMask"> <header> <container name="appBar"> <element widget="logo"/> <element widget="appFinder"/> </container> <container name="operationBar"> <element widget="notification"/> <element widget="dividerVertical"/> <element widget="languages"/> </container> <element widget="userProfile"/> </header> <container name="main"> <sidebar name="sidebar"> <element widget="navMenu"/> </sidebar> <container name="content"> <element widget="breadcrumb"/> <element widget="mainView"/> </container> </container> <footer/> </mask> 图3-5-2-4 最终可执行视图 表格视图布局 默认表格视图基础布局base-layout <view type="table"> <view type="search"> <element widget="search" slot="search"> <xslot name="fields" slotSupport="field" /> </element> </view> <pack widget="fieldset"> <element widget="actionBar" slot="actions" slotSupport="action" /> <element widget="table" slot="table"> <xslot name="fields" slotSupport="field" /> <element widget="actionsColumn" slot="actionsColumn"> <xslot name="rowActions" slotSupport="action" /> </element> </element> </pack> </view> 图3-5-2-5 默认表格视图基础布局base-layout 注：table标签的子标签为column组件，如果field填充到元数据插槽fields没有column组件将自动包裹column组件。 表格视图template <view type="table" model="xxx" name="tableViewExample">…

  史, 昂

  2024年5月23日

  1.3K000
• 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.5K000