【前端】默认布局模板（v4）

oinone • 2023年11月1日 pm6:40 • 前端 • 阅读 1271

默认母版（Mask）

PC端默认母版

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

PC端默认内联Tabs母版（`<multi-tabs inline="true" />`）

<mask>
    <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>
        <block height="100%" flex="1 0 0" flexDirection="column" alignContent="flex-start" flexWrap="nowrap" overflow="hidden">
            <multi-tabs inline="true" />
            <content>
                <breadcrumb />
                <block width="100%">
                    <widget width="100%" widget="main-view" />
                </block>
            </content>
        </block>
    </container>
</mask>

移动端默认母版

<mask>
    <widget widget="user" />
    <widget widget="nav-menu" app-switcher="true" menu="true" />
    <widget widget="main-view" height="100%" />
</mask>

PC端默认布局（Layout）

表格视图（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>

表单视图（FORM）

<view type="FORM">
    <element widget="actionBar" slot="actionBar">
        <xslot name="actions" />
    </element>
    <element widget="form" slot="form">
        <xslot name="fields" />
    </element>
</view>

详情视图（DETAIL）

<view type="DETAIL">
    <element widget="actionBar" slot="actionBar">
        <xslot name="actions" />
    </element>
    <element widget="detail" slot="detail">
        <xslot name="fields" />
    </element>
</view>

画廊视图（GALLERY）

<view type="GALLERY">
    <view type="SEARCH">
        <element widget="search" slot="search" />
    </view>
    <element widget="actionBar" slot="actionBar">
        <xslot name="actions" />
    </element>
    <element widget="gallery" slot="gallery">
        <element widget="card" slot="card" />
    </element>
</view>

树视图（TREE）

<view type="TREE">
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" />
        </view>
    </pack>
    <pack widget="group">
        <element widget="actionBar" slot="actionBar">
            <xslot name="actions" />
        </element>
        <element widget="card-cascader" slot="tree" />
    </pack>
</view>

默认内嵌布局（`inline="true"`）

内嵌表格视图（TABLE）

<view type="TABLE">
    <view type="SEARCH">
        <element widget="search" slot="search" />
    </view>
    <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>
</view>

内嵌表单视图（FORM）

<view type="FORM">
    <element widget="form" slot="form">
        <xslot name="fields" />
    </element>
</view>

内嵌详情视图（DETAIL）

<view type="DETAIL">
    <element widget="detail" slot="detail">
        <xslot name="fields" />
    </element>
</view>

内置其他布局

表格视图-树表

<view type="TABLE">
    <pack widget="group">
        <view type="SEARCH">
            <element widget="search" slot="search" slotSupport="field">
                <xslot name="searchFields" slotSupport="field" />
            </element>
        </view>
    </pack>
    <pack widget="group">
        <pack widget="row" wrap="false">
            <pack widget="col" width="257">
                <pack widget="group">
                    <pack widget="col">
                        <element widget="tree" slot="tree" />
                    </pack>
                </pack>
            </pack>
            <pack widget="col" mode="full">
                <pack widget="row">
                    <element widget="actionBar" slot="actionBar" slotSupport="action">
                        <xslot name="actions" slotSupport="action" />
                    </element>
                    <element widget="table" slot="table">
                        <element widget="expandColumn" slot="expandRow" />
                        <xslot name="fields" />
                        <element widget="rowActions" slot="rowActions" />
                    </element>
                </pack>
            </pack>
        </pack>
    </pack>
</view>

移动端默认布局（Layout）

表格视图（TABLE）

<view type="TABLE">
    <view type="SEARCH">
        <element widget="search" slot="search" slotSupport="field">
            <xslot name="searchFields" slotSupport="field" />
        </element>
    </view>
    <pack widget="group" class="oio-m-default-view-element" style="height: 100%;flex: 1;overflow-y: hidden;" wrapperStyle="height: 100%;box-sizing:border-box;">
        <pack widget="row" style="height: 100%;">
            <pack widget="col" mode="full" style="min-height: 234px;height: 100%;">
                <element widget="table" slot="table" slotSupport="field" checkbox="false">
                    <xslot name="fields" slotSupport="field" />
                    <element widget="rowActions" slot="rowActions" />
                </element>
            </pack>
        </pack>
    </pack>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
</view>

表单视图（FORM）

<view type="FORM">
    <element widget="form" slot="form">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
</view>

详情视图（DETAIL）

<view type="DETAIL">
    <element widget="detail" slot="detail">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
</view>

画廊视图（GALLERY）

<view type="GALLERY">
    <view type="SEARCH">
        <element widget="search" slot="search" slotSupport="field">
            <xslot name="searchFields" slotSupport="field" />
        </element>
    </view>
    <element widget="gallery" slot="gallery">
        <pack widget="card" slot="card" slotSupport="pack,field" />
    </element>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
</view>

移动端默认内嵌布局（`inline=true`）

内嵌表格视图（TABLE）

<view type="TABLE">
    <view type="SEARCH">
        <element widget="search" slot="search" slotSupport="field" />
    </view>
    <element widget="actionBar" slot="actionBar" slotSupport="action">
        <xslot name="actions" slotSupport="action" />
    </element>
    <pack widget="group" style="height: 100%;flex: 1;overflow-y: hidden;"
        wrapperStyle="height: 100%;box-sizing:border-box;">
        <pack widget="row" style="height: 100%;">
            <pack widget="col" mode="full" style="min-height: 234px;height: 100%;">
                <element widget="table" slot="table">
                    <xslot name="fields" slotSupport="field" />
                    <element widget="rowActions" slot="rowActions" />
                </element>
            </pack>
        </pack>
    </pack>
</view>

内嵌表单视图（FORM）

<view type="FORM">
    <element widget="form" slot="form">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
</view>

内嵌详情视图（DETAIL）

<view type="DETAIL">
    <element widget="detail" slot="detail">
        <xslot name="fields" slotSupport="pack,field" />
    </element>
</view>

Oinone社区作者：oinone原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/36.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

前端项目开发知识要点

oinone

1 0

4.2.x版本更新说明-20230607

上一篇 2023年6月20日 pm4:07

4.6.x版本升级说明-20231207

下一篇 2023年11月2日 pm1:58

前端

【前端】生产环境部署及性能调优

概述前端工程使用vue-cli-service进行构建，生成dist静态资源目录，其中包括html、css、javascript以及其他项目中使用到的所有资源。在生产环境中，我们通常使用Nginx开启访问服务，并定位其访问目录至dist目录下的index.html，以此来实现前端工程的访问。不仅如此，为了使得前端发起请求时，可以正确访问到后端服务，也需要在nginx中配置相应的代理，使得访问过程在同域中进行，以达到Cookie共享的目的。当然，服务部署的形式可以有多种，上述的部署方式也是较为常用的部署方式。部署使用production模式进行打包使用dotenv-webpack插件启用process.env 配置chainWebpack调整资源加载顺序使用thread-loader进行打包加速性能调优使用compression-webpack-plugin插件进行压缩打包启用Nginx的gzip和gzip_static功能使用OSS加速静态资源访问（可选）使用production模式进行打包在package.json中添加执行脚本 { "scripts": { "build": "vue-cli-service build –mode production" } } 执行打包命令 npm run build 使用dotenv-webpack插件启用process.env 参考资料 dotenv-webpack 在package.json中添加依赖或使用npm安装 { "devDependencies": { "dotenv-webpack": "1.7.0" } } npm install dotenv-webpack@1.7.0 –save-dev 在vue.config.js中添加配置 const Dotenv = require('dotenv-webpack'); module.exports = { publicPath: '/', productionSourceMap: false, lintOnSave: false, configureWebpack: { plugins: [ new Dotenv() ] } }; .env加载顺序使用不同模式，加载的文件不同。文件按照从上到下依次加载。 development .env .env.development production .env .env.production 配置chainWebpack调整资源加载顺序 chainWebpack对资源加载顺序取决于name属性，而不是priority属性。如示例中的加载顺序为：chunk-a –> chunk-b –> chunk-c。 code>test属性决定其打包范围，但集合之间会自动去重。如chunk-a打包node_modules下所有内容，chunk-b打包node_modules/@kunlun下所有内容。因此在chunk-a中将不再包含node_modules/@kunlun中的内容。没有

张博昊
2024年4月19日
1.0K000
前端

Class Component(ts)（v4）

Class Component 一种使用typescript的class声明组件的方式。 IWidget类型声明 IWidget是平台内所有组件的统一接口定义，也是一个组件定义的最小集。 /** * 组件构造器 */ export type WidgetConstructor<Props extends WidgetProps, Widget extends IWidget<Props>> = Constructor<Widget>; /** * 组件属性 */ export interface WidgetProps { [key: string]: unknown; } /** * 组件 */ export interface IWidget<Props extends WidgetProps = WidgetProps> extends DisposableSupported { /** * 获取当前组件响应式对象 * @return this */ getOperator(); /** * 组件初始化 * @param props 属性 */ initialize(props: Props); /** * 创建子组件 * @param constructor 子组件构造器 * @param slotName 插槽名称 * @param props 属性 * @param specifiedIndex 插入/替换指定索引的子组件 */ createWidget<ChildProps extends WidgetProps = WidgetProps>( constructor: WidgetConstructor<ChildProps, IWidget<ChildProps>>, slotName?: string, props?: ChildProps, specifiedIndex?: number ); } Widget Widget是平台实现的类似于Class Component组件抽象基类，定义了包括渲染、生命周期、provider/inject、watch等相关功能。 export abstract class Widget<Props extends WidgetProps = WidgetProps, R = unknown> implements IWidget<Props> { /** * 添加事件监听 * * @param {string} path 监听的路径 * @param {deep?:boolean;immediate?:boolean} options? * * @example * * @Widget.Watch('formData.name', {deep: true, immediate: true}) * private watchName(name: string) { * … todo * } * */ protected static Watch(path: string, options?: { deep?: boolean; immediate?: boolean }); /** * 可以用来处理不同widget之间的通讯，当被订阅的时候，会将默认值发送出去 * * @param {Symbol} name 唯一标示 * @param {unknown} value? 默认值 * * @example *…

oinone
2023年11月1日
1.2K000
前端

前端自定义请求入门版

在开发过程中，为了满足业务场景、增加灵活性，前端自定义请求不可避免。下面将会从——自定义 mask、自定义表格(表单等)、自定义字段三个实际场景的角度，介绍自定义请求。这篇文章把请求都写在了 ts 中，这样便于继承重写，如果不习惯 ts 的写法，把请求写在 vue 里也是可以的。 1. 自定义 mask mask 组件通常会有一个特点：在不同页面不同模型或不同应用下都展示，与业务模型无关，且往往只需要请求一次。同时可能有精确控制请求体大小的需求，这就很适合采取手写 GraphQL 的方式。例如，我要重写顶部 mask 中的用户组件，展示用户信息。这个请求就只需请求一次，而且不需要复用，就很适合手写 GraphQL。这里继承平台的用户组件，然后在代码中写死 GraphQL 发起请求。但是 GraphQL 语句怎么拼呢？我们可以去默认页面，打开浏览器控制台，找到相应的请求，把 GraphQL 语句复制出来，这里复制下默认的用户请求。 http.query 参数的构造、相应结果的获取都能从请求中得到。可以看到我这里精简了请求，只取了用户名。 TS import { SPI, UserWidget, MaskWidget, Widget, http } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory(MaskWidget.Token({ widget: 'user' })) export class TestWidget extends UserWidget { public initialize(props) { super.initialize(props); this.setComponent(Test); return this; } // 添加响应式注解，这样能在 vue 中接受到 ts 中的变量 @Widget.Reactive() public testUserInfo: { pamirsUser: { name: string } } | undefined; public async queryUser() { const query = ` { topBarUserBlockQuery { construct(data: {}) { pamirsUser { name } } } } `; const result = await http.query('user', query); this.testUserInfo = result.data['topBarUserBlockQuery']['construct'] as { pamirsUser: { name: string } }; } public mounted() { this.queryUser(); } } VUE <template> <div class="Test"> {{ testUserInfo }} </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'Test', props: ['testUserInfo'] }); </script> 效果如下： 2. 自定义表格(表单)等视图元素组件 2-1. 自定义表格 2-1-1. 自定义表格自动获取数据 Oinone 提供了前端组件的默认实现。所以生成默认页面的时候，请求数据都是通的，可以看到表格、表单、表单里的字段等组件数据都是能回填的。所以这里继承平台的表格组件，就有了平台表格自动获取数据的能力。 TS import { BaseElementWidget, SPI, TABLE_WIDGET, TableWidget, ViewType } from '@kunlun/dependencies'; import Test from './Test.vue'; @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Table, widget:…

银时
2025年4月17日
537000
低无一体

【动作】-路由动作跳转后如何主动刷新页面数据

介绍当我们使用多tab组件的时候，如果一个viewAction已经打开了一个tab页，再次用该viewAction打开页面的时候，会发现不会根据路由上的业务参数(如详情和编辑页的id参数)主动刷新数据，这个时候可以通过以下方法解决该问题 // 该方法可以在进入新路由页面后刷新数据，推荐将该方法放到工具类 function refreshViewAction(action: any) { const onRefreshTabWithActive = (manager: MultiTabsManager, instance: MultiTabInstance) => { // 进入路由后刷新页面数据 manager.refresh(instance.key); manager.clearOnActive(onRefreshTabWithActive); }; MultiTabsManager.INSTANCE.onActive(onRefreshTabWithActive); executeViewAction(action); } 将原本调用executeViewAction的方法改为refreshViewAction 如果需要扩展executeViewAction的其他入参请自行拓展refreshViewAction的入参

nation
2024年6月18日
1.1K000
前端

自定义组件之手动渲染任意视图（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日
932000

登录后才能评论

shao 2024年11月25日

支持其他的国家的语言，需要在资源里面创建，如果有其他的疑问，也可以群内联系我们哈

评论于 6.4 国际化之多语言
xiao3 2024年11月25日

只支持英语吗？如何添加其他语种？

评论于 6.4 国际化之多语言
psyy 2024年8月21日

1.4 Oinone对软件特性的思考，技术原理一段，几余（几->冗） 1.4 Oinone对软件特性的思考，协同演进一段，新特生（生->性）

评论于 1.4 Oinone对软件特性的思考
望闲 2024年6月21日

感谢反馈，已修正

评论于 1.5 Oinone与行业对比
xinf 2024年6月14日

bug反馈：采用无一体设计 -> 采用低无一体设计

评论于 1.5 Oinone与行业对比

【前端】默认布局模板（v4）

默认母版（Mask）

PC端默认母版

PC端默认内联Tabs母版（<multi-tabs inline="true" />）

移动端默认母版

PC端默认布局（Layout）

表格视图（TABLE）

表单视图（FORM）

详情视图（DETAIL）

画廊视图（GALLERY）

树视图（TREE）

默认内嵌布局（inline="true"）

内嵌表格视图（TABLE）

内嵌表单视图（FORM）

内嵌详情视图（DETAIL）

内置其他布局

表格视图-树表

移动端默认布局（Layout）

表格视图（TABLE）

表单视图（FORM）

详情视图（DETAIL）

画廊视图（GALLERY）

移动端默认内嵌布局（inline=true）

内嵌表格视图（TABLE）

内嵌表单视图（FORM）

内嵌详情视图（DETAIL）

相关推荐

【前端】生产环境部署及性能调优

Class Component(ts)（v4）

前端自定义请求入门版

【动作】-路由动作跳转后如何主动刷新页面数据

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

Leave a Reply

PC端默认内联Tabs母版（`<multi-tabs inline="true" />`）

默认内嵌布局（`inline="true"`）

移动端默认内嵌布局（`inline=true`）