如何通过 Oineone 平台自定义视图

相关推荐

• 组件

  oio-drawer抽屉

  屏幕边缘滑出的浮层面板。 何时使用 抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。 API 参数 说明 类型 默认值 版本 class 对话框外层容器的类名 string – closable 是否显示左上角的关闭按钮 boolean true closeIcon 自定义关闭图标 VNode | slot destroyOnClose 关闭时销毁 Drawer 里的子元素 boolean false footer 抽屉的页脚 VNode | slot – getTriggerContainer 指定 Drawer 挂载的 HTML 节点 HTMLElement | () => HTMLElement | Selectors ‘body’ height 高度, 在 placement 为 top 或 bottom 时使用 string | number keyboard 是否支持键盘 esc 关闭 boolean true mask 是否展示遮罩 Boolean true maskClosable 点击蒙层是否允许关闭 boolean true placement 抽屉的方向 ‘top’ | ‘right’ | ‘bottom’ | ‘left’ ‘right’ style 可用于设置 Drawer 最外层容器的样式，和 drawerStyle 的区别是作用节点包括 mask CSSProperties – title 标题 string | slot – visible(v-model:visible) Drawer 是否可见 boolean – width 宽度 string | number 378 zIndex 设置 Drawer 的 z-index Number 1000 cancelCallback 点击遮罩层或右上角叉或取消按钮的回调, return true则关闭弹窗 function(e) enterCallback 点击确定回调 function(e)

  汤乾华

  2023年12月18日

  1.3K000
• 后端

  Oinone环境保护（v5.2.3以上）

  概述 Oinone平台为合作伙伴提供了环境保护功能，以确保在一套环境可以在较为安全前提下修改配置文件，启动多个JVM等部署操作。 本章内容主要介绍与环境保护功能相关的启动参数。 名词解释 本地开发环境：开发人员在本地启动业务工程的环境 公共环境：包含设计器镜像和业务工程的环境 环境保护参数介绍 【注意】参数是加在程序实参 (Program arguments)上，通常可能错误的加在Active Profiles上了 -PenvProtected=${value} 是否启用环境保护，默认为true。 环境保护是通过与最近一次保存在数据库的base_platform_environment表中数据进行比对，并根据每个参数的配置特性进行判断，在启动时将有错误的内容打印在启动日志中，以便于开发者进行问题排查。 除此之外，环境保护功能还提供了一些生产配置的优化建议，开发者可以在启动时关注这些日志，从而对生产环境的配置进行调优。 -PsaveEnvironments=${value} 是否将此次启动的环境参数保存到数据库，默认为true。 在某些特殊情况下，为了避免公共环境中的保护参数发生不必要的变化，我们可以选择不保存此次启动时的配置参数到数据库中，这样就不会影响其他JVM启动时发生校验失败而无法启动的问题。 -PstrictProtected=${value} 是否使用严格校验模式，默认为false 通常我们建议在公共环境启用严格校验模式，这样可以最大程度的保护公共环境的元数据不受其他环境干扰。 PS：在启用严格校验模式时，需避免内外网使用不同连接地址的场景。如无法避免，则无法启用严格校验模式。 常见问题 需要迁移数据库，并更换了数据库连接地址该如何操作？ 将原有数据库迁移到新数据库。 修改配置文件中数据库的连接地址。 在启动脚本中增加-PenvProtected=false关闭环境保护。 启动JVM服务可以看到有错误的日志提示，但不会中断本次启动。 移除启动脚本中的-PenvProtected=false或将值改为true，下次启动时将继续进行环境保护检查。 可查看数据库中base_platform_environment表中对应数据库连接配置已发生修改，此时若其他JVM在启动前未正确修改，则无法启动。 本地开发时需要修改Redis连接地址到本地，但希望不影响公共环境的使用该如何操作？ PS：由于Redis中的元数据缓存是根据数据库差量进行同步的，此操作会导致公共环境在启动时无法正确刷新Redis中的元数据缓存，需要配合pamirs.distribution.session.allMetaRefresh参数进行操作。如无特殊必要，我们不建议使用该形式进行协同开发，多次修改配置会导致出错的概率增加。 本地环境首次启动时，除了修改Redis相关配置外，还需要配置pamirs.distribution.session.allMetaRefresh=true，将本地新连接的Redis进行初始化。 在本地启动时，增加-PenvProtected=false -PsaveEnvironments=false启动参数，以确保本地启动不会修改公共环境的配置，并且可以正常通过环境保护检测。 本地环境成功启动并正常开发功能后，需要发布到公共环境进行测试时，需要先修改公共环境中业务工程配置pamirs.distribution.session.allMetaRefresh=true后，再启动业务工程。 启动一次业务工程后，将配置还原为pamirs.distribution.session.allMetaRefresh=false。

  张博昊

  2024年10月21日

  1.6K000
• API&SDK 文档

  前端密码加密

  在项目开发中，我们可能会遇到自定义登录页，密码需要加密，或者是数据提交的时候，某个数据需要加密，在平台的前端中，提供了默认的全局加密 API 在 oinone 前端工程使用 // pc端工程使用 import { encrypt } from '@kunlun/dependencies'; // 移动端端工程使用 import { encrypt } from '@kunlun/mobile-dependencies'; // 加密后的密码 const password = encrypt('123456'); 其他工程使用 如果是其他工程，前端没有用到 oinone 这一套，比如小程序，或者是其他工程，可以使用下面的代码记得安装 crypto-js import CryptoJS from 'crypto-js'; const key = CryptoJS.enc.Utf8.parse('1234567890abcdefghijklmnopqrstuv'); const iv = CryptoJS.enc.Utf8.parse('1234567890aabbcc'); export const encrypt = (content: string): string => { if (typeof content === 'string' && content) { const encryptedContent = CryptoJS.AES.encrypt(content, key, { iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }); return encryptedContent.ciphertext.toString(); } return ''; };

  汤乾华

  2025年3月24日

  753000
• 低无一体

  如何增加页面消息通知轮询的间隔或者关闭轮询

  场景 oinone的前端页面默认自带了消息通知功能，在顶部状态栏可以看到消息的查看入口，默认每隔5秒查询一次最新的消息，我们可以通过自定义消息组件增加该间隔或者是关闭轮询 示例代码 修改轮询间隔 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { /** * 轮询间隔时间，单位: 秒 * @protected */ protected msgDelay = 30000; } 关闭轮询 import { MaskWidget, NotificationWidget, SPI } from '@kunlun/dependencies'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'notification' })) export class DemoNotificationWidget extends NotificationWidget { protected mounted() { super.mounted(); // 清除轮询的定时器 this.msgTimer && clearInterval(this.msgTimer); // 挂载后手动查询一次消息 this.getMsgTotal(); } }

  nation

  2024年8月20日

  1.5K000
• 组件

  oio-grid 栅格

  24 栅格系统。 <oio-row :gutter="24"> <oio-col :span="12"></oio-col> <oio-col :span="12"></oio-col> </oio-row> 概述 布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理： 通过\row\在水平方向建立一组\column\（简写 col） 你的内容应当放置于\col\内，并且，只有\col\可以作为\row\的直接元素 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 \<a-col :span="8" />\ 来创建 如果一个\row\中的\col\总和超过 24，那么多余的\col\会作为一个整体另起一行排列 Flex 布局 我们的栅格化系统支持 Flex 布局，允许子元素在父节点内的水平对齐方式 – 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。 Flex 布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。 API Row 成员 说明 类型 默认值 align flex 布局下的垂直对齐方式：top middle bottom string top gutter 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]（1.5.0 后支持）。 number/object/array 0 justify flex 布局下的水平排列方式：start end center space-around space-between string start wrap 是否自动换行 boolean false Col 成员 说明 类型 默认值 版本 flex flex 布局填充 string|number – offset 栅格左侧的间隔格数，间隔内不可以有栅格 number 0 order 栅格顺序，flex 布局模式下有效 number 0 pull 栅格向左移动格数 number 0 push 栅格向右移动格数 number 0 span 栅格占位格数，为 0 时相当于 display: none number – xxxl ≥2000px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – xs <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – sm ≥576px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – md ≥768px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – lg ≥992px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – xl ≥1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object – xxl ≥1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 number|object –

  汤乾华

  2023年12月18日

  978000