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

相关推荐

• 后端

  Maven Setting 配置详解

  常用标签概览 servers/server：配置私有仓库用户名和密码进行认证，以 id 进行关联。 mirrors/mirror：配置镜像仓库拉取时的地址源和额外配置。 profiles/profile：配置多个可能使用的镜像仓库。 activeProfiles/activeProfile：配置默认激活的 profile，以 id 进行关联。 Oinone 私有仓库配置 以下配置可以在使用 Oinone 私有仓库的同时，也可以正常使用 aliyun 镜像源。 <servers> <server> <id>shushi</id> <username>${username}</username> <password>${password}</password> </server> </servers> <mirrors> <mirror> <id>shushi</id> <mirrorOf>shushi</mirrorOf> <url>http://ss.nexus.ixtx.fun/repository/public</url> <!– 忽略 https 认证，maven 版本过高时需要配置 –> <blocked>false</blocked> </mirror> </mirrors> <profiles> <profile> <id>shushi</id> <repositories> <repository> <!– 对应 server.id –> <id>shushi</id> <url>http://ss.nexus.ixtx.fun/repository/public</url> <releases> <enabled>true</enabled> </releases> <snapshots> <enabled>true</enabled> </snapshots> </repository> </repositories> <pluginRepositories> <pluginRepository> <!– 对应 server.id –> <id>shushi</id> <url>http://ss.nexus.ixtx.fun/repository/snapshots</url> <releases> <enabled>false</enabled> </releases> <snapshots> <enabled>true</enabled> </snapshots> </pluginRepository> </pluginRepositories> </profile> <profile> <id>aliyun</id> <repositories> <repository> <id>aliyun</id> <url>https://maven.aliyun.com/repository/public</url> <releases> <enabled>true</enabled> </releases> <snapshots> <enabled>false</enabled> </snapshots> </repository> </repositories> <pluginRepositories> <pluginRepository> <id>aliyun</id> <url>https://maven.aliyun.com/repository/public</url> <releases> <enabled>true</enabled> </releases> <snapshots> <enabled>false</enabled> </snapshots> </pluginRepository> </pluginRepositories> </profile> </profiles> <activeProfiles> <!– 使用 shushi 私有仓库 –> <activeProfile>shushi</activeProfile> <!– 使用 aliyun 镜像仓库 –> <activeProfile>aliyun</activeProfile> </activeProfiles> 常见问题 使用 mvn 时无法拉取 Oinone 最新版镜像，提示找不到对应的包 原因：在 Oinone 开源后，oinone-pamirs 内核相关包都被部署到 maven 中央仓库，但由于其他镜像仓库的同步存在延时，在未正确同步的其他镜像源拉取时会出现找不到对应的包相关异常。 解决方案：检查 mirrors 中是否配置了 aliyun 镜像源，如果配置了，使用上述 Oinone 私有仓库配置重新配置后，再进行拉取。这一问题是由于 mirrors 配置不当，拦截了所有从 maven 中央仓库拉取的地址替换为了 aliyun 镜像源导致的。

  张博昊

  2025年11月10日

  441000
• 前端

  Oinone平台之Router扩展

  问题描述 在Oinone平台内置路由中，默认了三种路由 /login //默认登录页 /page //默认主逻辑页 / //根页面，会自动发起查询优先级最高的应用，并跳转 在实际的业务迭代中，我们通常有以下三种需求： 我要覆盖默认的登录页，页面我不喜欢，登录逻辑满足不了； 我要在平台上加个帮助中心； 这个路径不符合我司规范，我要自定义加前缀 接下来，我将在Oinone平台中满足以上场景 覆盖默认路径 以登录页为例 在项目目录src/main.ts下，添加自定义router import 'ant-design-vue/dist/antd.css'; import 'element-plus/dist/index.css'; import '@kunlun/vue-ui-antd/dist/kunlun-vue-ui-antd.css'; import '@kunlun/vue-ui-el/dist/kunlun-vue-ui-el.css'; import 'reflect-metadata'; import { VueOioProvider } from '@kunlun/dependencies'; import interceptor from './middleware/network-interceptor'; import './field'; import './view'; import './actions'; VueOioProvider( { http: { url: location.origin, callback: interceptor }, browser: { title: 'Oinone – 构你想象!', favicon: 'https://pamirs.oss-cn-hangzhou.aliyuncs.com/pamirs/image/default_favicon.ico' }, router: [{ path: '/login', widget: 'CustomLogin'}] // 用CustomLogin覆盖默认登录页 }, [] ); 定义CustomLogin, 定义方式同书籍中的自定义表单和自定义表格类似，精简版的代码为： import { RouterWidget, SPI } from "@kunlun/dependencies"; @SPI.ClassFactory(RouterWidget.Token({ widget: 'CustomLogin' })) // SPI注册，router得widget和此处的widgetshi对应的 export class CustomLogin extends RouterWidget { public initialize(props) { super.initialize(props); this.setComponent('定义的vue文件'); return this; } } 增加新的访问路径 同覆盖登录页 在router中增加路由 router: [{ path: '/login', widget: 'CustomLogin'}, { path: '/help', widget: 'Help'}] 定义Help，同覆盖登录页 定义个性化路径 需要再所有访问路径前统一加标识，比如添加Oinone;在项目目录下新建.env文件(若存在，可以复用)，在env文件中添加： BASE_PATH=/Oinone 修改后重启工程即可，访问/Oinone/login即可 结语 以上就是Oinone平台路由的扩展能力，在Oinone平台中，通过自定义Router达到扩展路由的能力，并通过采用env等通用配置的能力，解决批量修改路由的目的。

  oinone

  2023年11月1日

  60.1K000
• 后端

  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.2K000
• 低无一体

  树型表格全量加载数据如何处理

  阅读该文档的前置条件 【界面设计器】树形表格 1.前端自定义表格组件 import { ActiveRecord, BaseElementWidget, Condition, Entity, SPI, TableWidget, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseElementWidget.Token({ type: ViewType.Table, widget: ['demo-tree-table'] }) ) export class TreeTableWidget extends TableWidget { // 默认展开所有层级 protected getTreeExpandAll() { return true; } // 关闭懒加载 protected getTreeLazy(): boolean { return false; } public async $$loadTreeNodes(condition?: Condition, currentRow?: ActiveRecord): Promise<Entity[]> { // 树表加载数据的方法，默认首次只查第一层的数据，这里去掉这个查询条件的参数condition，这样就会查所有层级数据 return super.$$loadTreeNodes(undefined, currentRow); } } 2. 注册layout import { registerLayout, ViewType } from '@kunlun/dependencies'; const install = () => { registerLayout( ` <view type="TABLE"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="demo-tree-table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </view> `, { viewType: ViewType.Table, model: "resource.resourceCity", // 变量，需要替换 actionName: "MenuuiMenu6f6005bdddba468bb2fb814a62fa83c6", // 变量，需要替换 } ); }; install();

  nation

  2024年8月17日

  1.0K000
• 组件

  前端自定义组件之单页面步骤条

  本文将讲解如何通过自定义，实现单页面的步骤条组件。其中每个步骤的元素里都是界面设计器拖出来的。 实现路径 整体的实现思路是界面设计器拖个选项卡组件，自定义这个选项卡，里面的每个选项页都当成一步渲染出来，每一步的名称是选项页的标题。 1. 界面设计器拖出页面 我们界面设计器拖个选项卡组件，然后在每个选项页里拖拽任意元素。完成后点击右上角九宫格，选中选项卡，填入组件 api 名称，作用是把选项卡切换成我们自定义的步骤条组件，这里的 api 名称和自定义组件的 widget 对应。最后发布页面，并绑定菜单。 2. 组件实现 widget 组件重写了选项卡，核心函数 renderStep，通过 DslRender.render 方法渲染界面设计器拖拽的元素，每一步的 step 又是解析选卡页得到的。 import { SPI, Widget, DefaultTabsWidget, BasePackWidget, DslDefinition, DslRender, DslDefinitionType, CallChaining, customMutation } from '@oinone/kunlun-dependencies'; import { VNode } from 'vue'; import NextStepSinglePage from './NextStepSinglePage.vue'; @SPI.ClassFactory(BasePackWidget.Token({ widget: 'NextStepSinglePage' })) export class NextStepSinglePageWidget extends DefaultTabsWidget { public initialize(props) { super.initialize(props); this.setComponent(NextStepSinglePage); return this; } @Widget.Reactive() public get invisible() { return false; } // 配置的每一步名称，解析选项页的标题 @Widget.Reactive() public get titles() { return this.template?.widgets?.map((item) => item.title) || []; } // region 上一步下一步配置 // 步骤数组，数组里的元素即步骤要渲染的内容 @Widget.Reactive() public get steps(): DslDefinition[] { // 每个 tab 是一个步骤，这里会有多个步骤 // 每个步骤里有多个元素，又是数组 // 所以这里是二维数组 const tabDsls: DslDefinition[][] = this.template?.widgets.map((item) => item.widgets) || []; // 对每个步骤的子元素们，外侧包一层 row 布局，所以变回了一维数组 return tabDsls.map((tabDsl) => { return { …(this.template || {}), dslNodeType: DslDefinitionType.PACK, widgets: tabDsl, widget: 'row', resolveOptions: { mode: 1 } }; }); } // 渲染步骤，每个步骤有多个子元素 @Widget.Method() public renderStep(step: DslDefinition): VNode | undefined { return DslRender.render(step); } // region 校验相关 // 校验的钩子 @Widget.Reactive() @Widget.Inject('validatorCallChaining') protected parentValidatorCallChaining: CallChaining<boolean> | undefined; // 校验步骤表单 @Widget.Method() public async onValidator(): Promise<boolean> { const res = await this.parentValidatorCallChaining?.syncCall(); return res…

  银时

  2025年7月8日

  621000