OneCode3.0-RAD 可视化设计器配置手册

原创

OneCode

发布于 2025-08-26 12:04:19

14200

代码可运行

文章被收录于专栏：OneCode 低代码OneCode 低代码

运行总次数：0

代码可运行

1. 配置文件概述

OneCode-RAD 平台采用了灵活的配置体系，通过多个核心配置文件来控制设计器的行为、组件属性和系统参数。主要配置文件包括：

conf.js: 系统级配置、字体图标、组件通用属性配置
conf_widgets.js: 工具箱组件配置、组件结构定义
fcconf.js: 图表组件配置、图表属性定义
xuiconf.js: UI外观和开发环境设置

2. xuiconf.js - UI外观和开发环境配置

xuiconf.js 主要用于配置设计器的外观和开发环境参数。

// [[Page Appearance
xui.ini.$PageAppearance = {
    "theme":"default"
};
// ]]Page Appearance


// [[Font Icons CDN

// ]]Font Icons CDN



// [[Develop Env Setting
xui.ini.$DevEnv = {
    "designViewConf":{
        "width":800,
        "height":600
    }
};
// ]]Develop Env Setting

2.1 页面外观配置 ($PageAppearance)

属性	类型	说明	默认值	示例
theme	String	设计器主题	"default"	"dark", "light", "custom"

2.2 开发环境设置 ($DevEnv)

属性	类型	说明	默认值	示例
designViewConf.width	Number	设计视图默认宽度	800	1024
designViewConf.height	Number	设计视图默认高度	600	768

3. conf.js - 系统级配置

conf.js 是系统的核心配置文件，包含字体图标定义、组件通用属性、设计器参数等配置。

3.1 字体图标配置 (xui.builtinFontIcon)

定义了设计器中使用的所有内置字体图标，包括 Font Awesome 和自定义 spa-icon 系列图标。

xui.builtinFontIcon = {
    "fa fa-lg fa-calendar-plus-o": "fa fa-lg fa-calendar-plus-o",
    "fa fa-lg fa-close": "fa fa-lg fa-close",
    "fa fa-lg fa-circle-o-notch": "fa fa-lg fa-circle-o-notch",
    'spafont spa-icon-data': '&#xe601',
    'spafont spa-icon-debug': '&#xe602',
    // ...更多图标定义
};

3.2 系统配置 (window.CONF)

通过 xui.merge(window.CONF, {...}) 合并的方式定义系统级配置，包括：

功能开关
产品信息
服务API路径
正则表达式
设计器配置
组件默认属性

3.3 组件通用属性配置

conf.js 中定义了各种组件的通用属性配置，包括编辑器类型、默认值、选项等。

3.3.1 常用属性编辑器类型

编辑器类型	说明	示例
checkbox	复选框，用于布尔值设置	{type: "checkbox", dftValue: true}
input	文本输入框，用于字符串设置	{type: "input", maxlength: 50}
textarea	多行文本输入框	{type: "textarea"}
combobox	下拉选择框	{type: "combobox", editorListItems: "left", "center", "right"}
spin	数字微调框	{type: "spin", precision: 0, increment: 1, min: 0, max: 100}
listbox	列表选择框	{type: "listbox", editorListItems: "", "AUTO", "WRAP"}
color	颜色选择器	{type: "color"}

3.3.2 组件配置模板

conf.js 中为各类组件定义了属性模板，包括列表组件、表单组件、容器组件等。

items: {
    "xui.UI.List": {
        header: ["id", {
            id: 'type',
            type: "listbox",
            editorListItems: ["", "split"]
        }, "caption", "imageClass", "disabled", "hidden", "tagCmds", "tips", "tag", "tagVar"],
        uniqueKey: "id"
    },
    // ...更多组件配置
}

4. conf_widgets.js - UI组件配置

conf_widgets.js 定义了设计器左侧工具箱中的组件结构、分类和初始属性。

4.1 组件分类结构

组件按照功能和类型进行分组，常见的分类包括：

布局组件
表单组件
列表组件
导航组件
移动组件
聚合模块

4.2 组件定义格式

每个组件定义包含以下核心属性：

属性	类型	说明
id	String	组件唯一标识符
key	String	组件类型键值
caption	String	组件显示名称
comment	String	组件描述
imageClass	String	组件图标类名
draggable	Boolean	是否可拖拽
iniProp	Object	组件初始属性

4.3 常见组件配置示例

4.3.1 移动导航组件

{
    id: 'xui.UI.MTabs',
    key: 'xui.UI.MTabs',
    comment: '移动TAB导航',
    caption: '',
    imageClass: 'spafont spa-icon-c-tabs',
    draggable: true,
    iniProp: {
        "barLocation": "left",
        "barSize": "12em",
        "sideBarStatus": "fold",
        items: [
            {"caption": "item 1", "id": "a", "imageClass": "xui-icon-number1"},
            {"caption": "item 2", "id": "b", "imageClass": "xui-icon-number2"}
        ],
        value: 'a'
    }
}

4.3.2 表单布局组件

{
    id: 'xui.UI.FormLayout',
    key: 'xui.UI.FormLayout',
    caption: '',
    comment: '$RAD.widgets.esd.FormLayout',
    imageClass: 'spafont spa-icon-c-grid',
    draggable: true,
    iniProp: {
        "properties": {
            "name": "TestForm",
            "showEffects": "Classic",
            "width": "50em",
            "height": "20em",
            "defaultRowHeight": 35,
            "defaultColWidth": 150,
            "layoutData": {
                "rows": 3,
                "cols": 2,
                "merged": []
            }
        }
    }
}

4.3.3 图表组件

conf_widgets.js 中定义了多种图表组件的默认配置，包括饼图、柱状图、折线图等。

FCPie: {
    "chart": {
        "caption": "Monthly Sales Summary",
        "subcaption": "For the year 2006",
        "xaxisname": "Month",
        "yaxisname": "Sales",
        "numberprefix": "$",
        "useroundedges": "1",
        "bgcolor": "FFFFFF,FFFFFF",
        "showborder": "0",
        "enablerotation": "0"
    },
    "data": [{"label": "January", "value": "17400"}, {"label": "February", "value": "19800"}]
}

5. fcconf.js - 图表组件配置

fcconf.js 定义了图表组件的详细配置属性和编辑器设置。

5.1 图表全局配置 (window.FCCONF)

window.FCCONF = {
    gridAttr: {
        numVisiblePlot: {type: "spin", precision: 2, increment: 0.1, min: 2, max: 100},
        animate3D: {type: "checkbox"},
        animation: {type: "checkbox"},
        exeTime: {type: "spin", precision: 2, increment: 0.1, min: 0, max: 10},
        palette: {type: "spin", precision: 0, increment: 1, min: 1, max: 5},
        // ...更多图表属性配置
    }
};

5.2 图表常用配置属性

属性	类型	说明	默认值
animate3D	Boolean	是否启用3D动画	false
animation	Boolean	是否启用动画效果	false
exeTime	Number	动画执行时间(秒)	0
palette	Number	调色板编号	1
paletteThemeColor	String	主题颜色	-
showLabels	Boolean	是否显示标签	false
rotateLabels	Boolean	是否旋转标签	false
showShadow	Boolean	是否显示阴影	false
use3DLighting	Boolean	是否使用3D光照效果	false
maxLabelHeight	Number	最大标签高度	0
labelDisplay	String	标签显示方式	"AUTO"

6. 配置实战指南

6.1 定制设计器主题

通过修改 xuiconf.js 中的 $PageAppearance.theme 属性，可以切换设计器的主题：

// 修改为暗色主题
xui.ini.$PageAppearance = {
    "theme":"dark"
};

6.2 自定义工具箱组件

在 conf_widgets.js 中，可以添加自定义组件或修改现有组件的配置：

// 添加自定义组件
xui.merge(window.CONF, {
    widgets: [
        {
            id: 'custom.group',
            key: 'custom.group',
            comment: '自定义组件组',
            group: true,
            view: 'Gallery',
            imageClass: 'fa fa-puzzle-piece',
            sub: [
                {
                    id: 'custom.component',
                    key: 'custom.component',
                    caption: '自定义组件',
                    comment: '我的第一个自定义组件',
                    imageClass: 'fa fa-star',
                    draggable: true,
                    iniProp: {
                        "width": "20em",
                        "height": "10em",
                        "caption": "自定义组件"
                    }
                }
            ]
        }
    ]
});

6.3 修改图表默认配置

在 fcconf.js 中，可以修改图表的默认配置，例如启用3D效果和动画：

window.FCCONF = {
    gridAttr: {
        // ...现有配置
        animate3D: {type: "checkbox", dftValue: true},
        animation: {type: "checkbox", dftValue: true},
        exeTime: {type: "spin", precision: 2, increment: 0.1, min: 0, max: 10, dftValue: 2},
        // ...更多配置
    }
};

6.4 调整设计视图尺寸

通过修改 xuiconf.js 中的 designViewConf 属性，可以调整设计器的默认画布尺寸：

xui.ini.$DevEnv = {
    "designViewConf":{
        "width":1200,
        "height":900
    }
};

7. 配置文件加载顺序

OneCode-RAD 配置文件的加载顺序为：

xuiconf.js - 首先加载，定义基础环境配置
conf.js - 其次加载，定义系统核心配置
fcconf.js - 然后加载，定义图表组件配置
conf_widgets.js - 最后加载，定义工具箱组件配置

了解加载顺序有助于正确覆盖和扩展配置。

8. 配置最佳实践

备份原始配置：在修改任何配置文件前，先备份原始文件
模块化修改：按功能模块组织配置修改，便于维护
使用注释：为自定义配置添加详细注释，说明用途和参数
逐步测试：每次修改后测试效果，确保不会影响其他功能
版本控制：将配置文件纳入版本控制系统，便于追踪变更

通过合理配置这些文件，可以完全定制 OneCode-RAD 设计器的外观和功能，打造符合团队需求的开发环境。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

低代码

人工智能

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

低代码

人工智能

登录后参与评论

0 条评论

热度