相关推荐

• 前端

  「前端」关闭源码依赖

  问题背景 在 5.x 版本的 oinone 前端架构中，我们开放了部分源码，但是导致以下性能问题： 1.构建耗时增加​​：Webpack 需要编译源码文件 2.​​加载性能下降​​：页面需加载全部编译产物 3.​​冷启动缓慢​​：开发服务器启动时间延长 以下方案通过关闭源码依赖。 操作步骤 1. 添加路径修正脚本 1: 在当前项目工程根目录中的scripts目录添加patch-package-entry.js脚本，内容如下： const fs = require('fs'); const path = require('path'); const targetPackages = [ '@kunlun+vue-admin-base', '@kunlun+vue-admin-layout', '@kunlun+vue-router', '@kunlun+vue-ui', '@kunlun+vue-ui-antd', '@kunlun+vue-ui-common', '@kunlun+vue-ui-el', '@kunlun+vue-widget' ]; // 递归查找目标包的 package.json function findPackageJson(rootDir, pkgName) { const entries = fs.readdirSync(rootDir); for (const entry of entries) { const entryPath = path.join(rootDir, entry); const stat = fs.statSync(entryPath); if (stat.isDirectory()) { if (entry.startsWith(pkgName)) { const [pkGroupName, name] = pkgName.split('+'); const pkgDir = path.join(entryPath, 'node_modules', pkGroupName, name); const pkgJsonPath = path.join(pkgDir, 'package.json'); if (fs.existsSync(pkgJsonPath)) { return pkgJsonPath; } } // 递归查找子目录 const found = findPackageJson(entryPath, pkgName); if (found) return found; } } return null; } // 从 node_modules/.pnpm 开始查找 const pnpmDir = path.join(__dirname, '../', 'node_modules', '.pnpm'); for (const pkgName of targetPackages) { const packageJsonPath = findPackageJson(pnpmDir, pkgName); if (packageJsonPath) { try { const packageJSON = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8')); if (packageJSON.main === 'index.ts') { const libName = packageJSON.name.replace('@', '').replace('/', '-'); packageJSON.main = `dist/${libName}.esm.js`; packageJSON.module = `dist/${libName}.esm.js`; const typings = 'dist/types/index.d.ts'; packageJSON.typings = typings; const [pwd] = packageJsonPath.split('package.json'); const typingsUrl = path.resolve(pwd, typings); const dir = fs.existsSync(typingsUrl); if (!dir)…

  汤乾华

  2025年4月17日

  635000
• 前端

  自定义组件之手动渲染任意视图（v4）

  private metadataViewWidget: MetadataViewWidget | null | undefined; private async renderCustomView(model: string, viewName: string, slotName?: string) { const view = await ViewCache.get(model, viewName); if (!view) { return; } if (this.metadataViewWidget) { this.metadataViewWidget.dispose(); this.metadataViewWidget = null; } const metadataViewWidget = this.createWidget(MetadataViewWidget, slotName, { metadataHandle: this.metadataHandle, rootHandle: this.rootHandle, internal: true, inline: true, automatic: true }); this.metadataViewWidget = metadataViewWidget; metadataViewWidget.initContextByView(view); this.forceUpdate(); }

  张博昊

  2025年3月6日

  1.4K000
• 低无一体

  列表页内上下文无关的动作如何添加自定义上下文

  场景 在界面设计器，可以配置当前列表页从上个页面带的上下文参数，现在需要传递这个上下文到下个页面，设计器没有配置入口，我们可以通过自定义改动作来解决 示例代码 import { ActionType, ActionWidget, RouterViewActionWidget, SPI, ViewActionTarget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Router], // 模型编码 model: 'module.model', // 动作名称 name: 'actionName' }) ) export class DemoRouterViewActionWidget extends RouterViewActionWidget { protected async clickAction(): Promise<void> { // initialContext内是上个页面传来的上下文，手动将值传递到下个页面的上下文 // 这里假设需要传递的字段名为type this.action.context = { type: this.initialContext.type }; return super.clickAction(); } }

  nation

  2024年8月20日

  1.9K000
• 前端

  母版-布局-DSL 渲染基础（v4）

  概述 不论是母版、布局还是DSL，我们统一使用XML进行定义，可以更好的提供结构化表述。 参考文档： XML百度百科 XML语法参考 下面文档中未介绍到的Mask母版和Layout布局，可以去数据库中base库的表base_layout_definition和base_mask_definition的template字段查看 母版 确定了主题、非主内容分发区域所使用组件和主内容分发区域联动方式的页面配置。 母版内容分为主内容分发区域与非主内容分发区域。非主内容分发区域一般包含顶部栏、底部栏和侧边栏。侧边栏可以放置菜单，菜单与主内容分发区域内容进行联动。 默认母板 <mask> <multi-tabs /> <header> <widget widget="app-switcher" /> <block> <widget widget="notification" /> <widget widget="divider" /> <widget widget="language" /> <widget widget="divider" /> <widget widget="user" /> </block> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </container> </mask> 该模板中包含了如下几个组件： mask：母版根标签 multi-tabs：多选项卡 header：顶部栏 container：容器 sldebar：侧边栏 nav-menu：导航菜单 content：主内容 breadcrumb：面包屑 block：div块 main-view：主视图；用于渲染布局和DSL等相关内容； 母版将整个页面的大体框架进行了描述，接下来将主要介绍布局和DSL是如何在main-view中进行渲染的。关于自定义母版组件的相关内容 点击查看 布局 布局是将页面拆分成一个一个的小单元，按照从上到下、从左到右进行顺序排列 布局主要用于控制页面中元素的展示的相对位置，原则上不建议将元数据相关内容在布局中进行使用，可最大化布局的利用率。 默认表格视图（TABLE） <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar"> <xslot name="actions" /> </element> <element widget="table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> 该模板中包含了如下几个组件： view：视图；用于定义当前视图类型，不同的视图类型会有不同的数据交互，以及渲染不同的组件。 pack：容器类型相关组件。 element：元素组件；包含各种各样的组件，根据组件实现有不同的作用。 xslot：DSL插槽；用于将DSL中定义的模板分别插入到对应的槽中； 特别的，任何XML标签上的slot属性都具备DSL插槽的全部能力。当学习完DSL相关内容后，我们将会对DSL插槽有比较清晰的理解。 PS：在下面的内容中，将使用该布局进行描述。 DSL 准备工作 为了方便描述DSL和元数据之间的关系，我们需要先定义一个简单模型，这个模型里面包含字段和动作。这些通常是服务端定义的。（对服务端不感兴趣的同学可以跳过代码部分） DemoModel.java @Model.model(DemoModel.MODEL_MODEL) @Model(displayName = "演示模型", labelFields = {"name"}) public class DemoModel extends IdModel { private static final long serialVersionUID = -7211802945795866154L; public static final String MODEL_MODEL = "demo.DemoModel"; @Field(displayName = "名称") private String name; @Field(displayName = "是否启用") private Boolean isEnabled; } DemoModelAction.java @Model.model(DemoModel.MODEL_MODEL) @UxRouteButton( action = @UxAction(name = "redirectCreatePage", displayName = "创建", contextType = ActionContextTypeEnum.CONTEXT_FREE), value = @UxRoute(model =…

  oinone

  2023年11月1日

  2.7K101
• 前端

  自定义视图组件（v4）

  阅读之前 你应该： 了解DSL相关内容。母版-布局-DSL 渲染基础（v4） 了解SPI机制相关内容。组件SPI机制（v4） 什么是视图组件 我们将一个视图中提供数据源的组件称为视图组件。 下面，我们将根据提供的示例布局进行进一步介绍。 示例布局（默认表格视图布局） <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar"> <xslot name="actions" /> </element> <element widget="table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> view: 视图标签；一个视图中的所有组件将共享数据源，视图的数据源通过视图组件进行提供。（在这个示例中，该视图的数据源通过widget="table"（TableWidget）提供） pack: 容器组件标签； element: 通用元素组件标签； xslot：dsl插槽； 根据标签性质，我们可以将这个示例布局进一步简化，只留下我们目前要关注的主要内容。 <view type="TABLE"> <element widget="table" slot="table"> <xslot name="fields" /> </element> </view> 在以上示例布局中，有且仅有一个组件会向视图提供数据源，那就是widget="table"（TableWidget）这个组件。我们接下来将对这个组件进行自定义，以实现业务中所需的列表(List)数据源展示方式。 1 平台组件简介 平台提供的基础组件有如下几种： 组件名称 描述 BaseElement element标签通用组件 BaseElementViewWidget 通用视图组件 BaseElementObjectViewWidget 对象（Object）数据源通用视图组件 BaseElementListViewWidget 列表（List）数据源通用组件 平台提供的内置组件有如下几种：（均使用element标签） 组件名称 标签 视图类型 描述 TableWidget widget="table" TABLE 内置表格组件 FormWidget widget="form" FORM 内置表单组件 DetailWidget widget="detail" DETAIL 内置详情组件 GallertWidget widget="gallery" GALLERY 内置画廊组件 TreeWidget/CardCascaderWidget widget="tree/cardCascader" TREE 内置树/卡片级联组件 我们可以根据业务场景，继承不同的组件，来实现自己的业务场景。在自定义过程中，我们建议尽可能的将逻辑控制在组件内部。如果场景是唯一且确定的，也可以进行一些特殊逻辑处理。 2 场景：实现一个虚拟滚动表格（不使用分页器） 2.1 确定组件名称 widget="VirtualTable" 通过布局设置自定义组件名称 我们将原表格布局中的widget="table"改为我们所需要的自定义组件名称即可。 多个视图可以绑定同一个布局，所以这种修改方式更适用于大范围使用相同布局的情况。 <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar> <xslot name="actions" /> </element> <element widget="VirtualTable" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" /> <element widget="rowActions" slot="rowActions" /> </element> </pack> </view> 通过DSL设置自定义组件名称 我们使用了slot="table"这个插槽，通过属性合并覆盖的方式，在DSL上直接指定我们所需要的自定义组件名称即可。 这种修改方式更适用于个别几个视图需要使用该组件的情况。 <view type="TABLE"> <template slot="table" widget="VirtualTable"> …… </template> </view> 2.2 简单实现一个基础功能的虚拟滚动表格 定义一个VirtualTable.vue文件，使用平台提供的oio-table组件。目前内部采用vxe-table封装，相关api文档 点击查看 props定义： showDataSource: 当前展示数据；通过平台内置BaseElementListViewWidget组件提供。 <template> <oio-table ref="table" border show-overflow height="400" :row-config="{ isHover: true…

  oinone

  2023年11月1日

  1.5K000