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

Codebee2025-08-26 12:14

1. 配置文件概述

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

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

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

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

javascript:e:/qoder/ocstudio/target/static/RAD/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 系列图标。

javascript 复制代码 
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 中为各类组件定义了属性模板，包括列表组件、表单组件、容器组件等。

javascript 复制代码 
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 移动导航组件

javascript 复制代码 
{
    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 表单布局组件

javascript 复制代码 
{
    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 中定义了多种图表组件的默认配置，包括饼图、柱状图、折线图等。

javascript 复制代码 
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)

javascript 复制代码 
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 属性，可以切换设计器的主题：

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

6.2 自定义工具箱组件

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

javascript 复制代码 
// 添加自定义组件
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效果和动画：

javascript 复制代码 
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 属性，可以调整设计器的默认画布尺寸：

javascript 复制代码 
xui.ini.$DevEnv = {
    "designViewConf":{
        "width":1200,
        "height":900
    }
};

7. 配置文件加载顺序

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

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

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

8. 配置最佳实践

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

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

相关推荐
huangql520几秒前
前端多版本零404部署实践：为什么会404，以及怎么彻底解决
前端
梵得儿SHI21 分钟前
Vue 数据绑定深入浅出：从 v-bind 到 v-model 的实战指南
前端·javascript·vue.js·双向绑定·vue 数据绑定机制·单向绑定·v-bind v-model
Moment23 分钟前
Electron 发布 39 版本 ，这更新速度也变态了吧❓︎❓︎❓︎
前端·javascript·node.js
消失的旧时光-194324 分钟前
8方向控制圆盘View
android·前端
自由日记28 分钟前
前端学习：选择器的类别
前端·javascript·学习
念念不忘 必有回响28 分钟前
Nginx前端配置与服务器部署详解
服务器·前端·nginx
江城开朗的豌豆29 分钟前
Webpack打包：从“庞然大物”到“精致小可爱”
前端·javascript
安当加密29 分钟前
基于ASP身份认证网关实现Web系统免代码改造的单点登录方案
java·开发语言·前端
JarvanMo31 分钟前
Bitrise 自动化发布 Flutter 应用终极指南（一）
前端
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03BongoCat - 跨平台键盘猫动画工具04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07Labelme从安装到标注：零基础完整指南08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）10jdk21下载、安装（Windows、Linux、macOS）