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

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

默认母版（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

前端

表格主题配置（v4）

TableThemeConfig /** * 表格主题配置 */ export interface TableThemeConfig { border: boolean | string; stripe: boolean; isCurrent: boolean; isHover: boolean; /** * 表格列主题配置 */ column: Partial<TableColumnThemeConfig>; } /** * 表格列主题配置 */ export interface TableColumnThemeConfig { /** * <h3>最小宽度</h3> * <ul> * <li>boolean: enabled column width auto compute</li> * <li>number: using css width (default: px)</li> * <li>string: using css width</li> * <li> * object: auto compute width for label by default function * <ul> * <li>min: min min width (default: 120)</li> * <li>max: max min width (default: 432)</li> * <li>chineseWidth: chinese width (default: 14 -> fontSize: 14px)</li> * <li>otherWidth: non chinese width (default: 9 -> fontSize: 14px)</li> * <li>sortableFixWidth: sortable handle width (default: 40)</li> * <li>nonSortableFixWidth: non sortable fix width (default: 22)</li> * </ul> * </li> * <li>function: auto compute width for label by function</li> * </ul> */ minWidth: boolean | number | string | Partial<TableColumnMinWidthComputeConfig> | TableColumnMinWidthComputeFunction; /** * 操作列 */ operation: { /** * 宽度 (default: 165) */ width?: number | string; /** * 最小宽度 (default: 120) */ minWidth?: number | string; }; } export interface TableColumnMinWidthComputeConfig { min: number;…

数式-海波
2023年11月1日
824000
组件

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

本文将讲解如何通过自定义，实现单页面的步骤条组件。其中每个步骤的元素里都是界面设计器拖出来的。实现路径整体的实现思路是界面设计器拖个选项卡组件，自定义这个选项卡，里面的每个选项页都当成一步渲染出来，每一步的名称是选项页的标题。 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日
483000
前端

Oinone平台可视化调试工具

为方便开发者定位问题，我们提供了可视化的调试工具。
该文档将介绍可视化调试工具的基本使用方法。

张博昊
2024年4月13日
1.1K000
前端

如何在Oinone 根据主题实现自定义组件样式

在页面交互中，样式的变化是前端核心工作之一。本文介绍如何在Oinone平台中根据主题变化自定义组件样式。介绍 Oinone平台提供了六种不同的主题设置，浅色大主题、浅色中主题、浅色小主题、深色大主题、深色中主题、深色小主题，默认采用浅色中主题。本文旨在指导如何在线或通过代码修改这些主题，以满足个性化需求。基础知识 Oinone平台的默认主题为浅色中主题，用户可以根据喜好选择以下六种主题中的任何一种：浅色大主题浅色中主题浅色小主题深色大主题深色中主题深色小主题在线修改主题用户可以通过进入系统配置应用，并切换到系统风格配置菜单来在线修改主题。选择喜欢的主题并保存即可轻松更换。代码修改主题步骤示例新建theme.ts文件在项目的src目录下新建一个theme.ts文件。定义主题变量在theme.ts文件中定义主题名称和CSS变量，示例中将主色系替换为黑色。 export const themeName = ‘OinoneTheme’; export const themeCssVars = { ‘primary-color’: ‘black’, ‘primary-color-hover’: ‘black’, ‘primary-color-rgb’: ‘0, 0, 0’, ‘primary-color-focus’: ‘black’, ‘primary-color-active’: ‘black’, ‘primary-color-outline’: ‘black’, }; 在main.ts注册 import { registerTheme, VueOioProvider } from ‘@kunlun/dependencies’; // 引入注册主题组件 import { themeName, themeCssVars } from ‘./theme’; // 引入theme.ts registerTheme(themeName, themeCssVars);// 注册 VueOioProvider( { …other config theme: [themeName] // 定义的themeName传入provider中 }, [] ); 4: 刷新页面看效果注意事项确保在定义CSS变量时遵循主题设计规范。正确引入theme.ts文件以避免编译错误。总结本文详细介绍了在Oinone平台中修改主题的两种方法：在线修改和代码修改。这些步骤允许开发者和用户根据个人喜好或项目需求，自定义界面的主题风格。

汤乾华
2024年2月26日
875001
【前端】移动端工程结构最佳实践（v4/v5）

阅读之前你应该：了解node与npm相关内容了解lerna包管理工具的相关内容官方文档了解git仓库的相关内容了解rollup的相关内容工程结构包示例 Vue项目结构包下载-v4.7.xVue项目结构包下载-v5.2.x 工程结构详解工程结构 ├── packages │ ├── kunlun-mobile-boot │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ └── index.html │ │ ├── src │ │ │ ├── main.ts │ │ │ └── shim-vue.d.ts │ │ ├── tsconfig.json │ │ └── vue.config.js │ ├── kunlun-module-mobile-demo │ │ ├── scripts │ │ │ ├── postpublish.js │ │ │ └── prepublish-only.js │ │ ├── src │ │ │ ├── index.ts │ │ │ └── shim-vue.d.ts │ │ ├── index.ts │ │ ├── package.json │ │ ├── rollup.config.js │ │ └── tsconfig.json │ └── kunlun-modules-mobile-demo │ ├── scripts │ │ ├── build.config.js │ │ ├── postpublish.js │ │ └── prepublish-only.js │ ├── packages │ │ ├── module-demo1 │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ ├── rollup.config.js │ │ │ └── src │ │ │ ├── index.ts │ │ │ └── shim-vue.d.ts │ │ ├── module-demo2 │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ ├── rollup.config.js │ │ │ …

nation
前端 2023年11月1日
1.2K000

登录后才能评论

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）

相关推荐

表格主题配置（v4）

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

Oinone平台可视化调试工具

如何在Oinone 根据主题实现自定义组件样式

【前端】移动端工程结构最佳实践（v4/v5）

Leave a Reply

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

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

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