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 设计器的外观和功能，打造符合团队需求的开发环境。

相关推荐
崔庆才丨静觅2 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60613 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了3 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅3 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅3 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅4 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment4 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅4 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊4 小时前
jwt介绍
前端
爱敲代码的小鱼4 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南