主题定制系列——JSON配置文件说明
# 变更记录
| 产品版本 | 更新内容 | 更新日期 |
| --- | --- | --- |
| V7.0.1 | 支持了主题定制的全局加载loading视觉配置功能(PC、移动端) | 2024-10-24 |
```
{
"theme": {
"@theme-color": "#5582F3", // 主题色
"@hover-color": "#f5f5f5", // 中性的悬停色
"@disabled-contain-bg": "#f5f5f5", // 容器失效背景色
"@success-color": "#1BA854", // 成功色(深)
"@success-bg-color": "#F2FFF5", // 成功反馈浮层的底色
"@success-border-color": "#6DD18E", // 成功反馈浮层的容器边框色
"@warning-color": "#FF991C", // 警示色(深)
"@warning-bg-color": "#FFFBF2", // 警示反馈浮层的底色
"@warning-border-color": "#FFCB78", // 警示反馈浮层的容器边框色
"@error-color": "#FB2323", // 失败色(深)
"@error-bg-color": "#FFF2F4", // 失败反馈浮层的底色
"@error-border-color": "#FF8088", // 失败反馈浮层的容器边框色
"@ongoing-color": "#276FF5", // 进行中(深)
"@ongoing-bg-color": "#F2F9FF", // 进行中反馈浮层的底色
"@ongoing-border-color": "#85B8FF", // 进行中反馈浮层的容器边框色
"@disabled-color": "#B2B2B2", // 失效色
"@disabled-border-color": "#CCC", // 失效边框色
"@link-color": "#0E5FD8", // 链接色
"@link-color-hover": "#3987ED", // 链接色或辅助色(悬浮)
"@link-color-active": "#0041B0", // 链接色或辅助色(点击)
"@primary-text-color": "#212121", // 一级文本
"@secondary-text-color": "#666", // 二级文本
"@third-text-color": "#999", // 三级文本
"@contain-bg": "#FAFAFA", // 容器内的灰背景
"@radius-size": "2px", // 圆角值
"@strong-border-color": "#D9D9D9", // 强线条 --带操作
"@strong-border-color-1": "#D9D9D9", // 强线条 --分割内容/容器包裹线
"@weak-border-color": "#E5E5E5", // 弱线条 -- 需要多层级时
"@zebra-stripe-deep-bg-color": "#ECEEF2", //交替显示(斑马条纹)时深色的背景色
"@grid-row-selected-bg-color": "var(--theme-color-level1)", //表格行选中色
"@contain-bg-color": "#FFFFFF", // 新建单据内容器背景色 目前包含页签/高级面板/字段布局容器
"@treemenu-expand-btn-color": "#c1cadc", // 左下角折叠展开图标颜色
"@treemenu-expand-btn-hover-color": "var(--theme-color)", // 左下角折叠展开图标悬停色
"@treemenu-star-color": "#FFF", // 收藏图标颜色
"@treemenu-star-hover-color": "#ffc859", // 收藏图标悬停色
"@treemenu-star-select-color": "#ffc859", // 收藏图标选中色
"@treemenu-first-level-bg-color": "#343848", // 一级菜单背景色
"@treemenu-first-level-color": "#c1cadc", // 一级菜单字体颜色
"@treemenu-first-level-hover-color": "#FFF",// 一级菜单字体悬停色
"@treemenu-first-level-hover-bg-color": "#21242d",// 一级菜单背景悬停色
"@treemenu-second-level-bg-color": "#21242d", // 二级菜单背景色
"@treemenu-second-level-color": "#c1cadc",// 二级菜单字体颜色
"@treemenu-second-level-hover-color": "var(--theme-color)", // 二级菜单字体悬停色
"@treemenu-third-level-title-color": "rgba(255, 255, 255, 0.5)", // 三级菜单标题字体颜色
"@treemenu-third-level-bg-color": "#21242d", // 三级菜单背景颜色
"@treemenu-third-level-color": "rgba(255, 255, 255, 0.8)", // 三级菜单字体颜色
"@treemenu-third-level-hover-color": "var(--theme-color)", // 三级菜单字体悬停色
"--kd-cq-tree-node-indentation-width": "20px", // 树控件配置子节点缩进间距
"--kd-cq-container-title-font-weight": 600 // 容器标题加粗
},
"defaultProps": {
"common": {
"field": {
"labelDirection": "v", // 字段布局 值: v/h(垂直布局/水平布局) 不能为空
"vOverallHeight": 44, // 垂直布局设置的默认高度
"vOverallWidth": 230, //垂直布局设置的默认宽度
"emptyText": "-", // 字段 锁定/查看态,无内容展示
"fieldStyle": 2, // 字段风格 值: 0/1/2(下划线/标签/边框) 注: 边框风格推荐与标题右对齐方式配套使用
"textAlign": "right", // 字段标题对齐方式 值: left/center/right(左对齐/居中/右对齐)
"fieldStyleInView": 0, // 查看态字段风格 值: 0/1/2(下划线/标签/边框)
"placeHolder": "请输入内容", // 输入框占位符
"vOverallHeight": "50px", //设置整个字段垂直布局情况下的高度(标题+输入框)
"horizontalTitleFontSize": "12px", // 水平布局标题大小
"horizontalTitleAlign": "left", // 水平布局字段标题对齐方式
"fieldPanelItemAdaptive": true, // 字段布局面板字段自适应
"fieldPanelItemPriorHorizontalMarginRight": 20, // 字段水平布局右边距,优先级高于用户设置
"fieldPanelItemPriorVerticalMarginRight": 20, // 字段垂直布局右边距,优先级高于用户设置
"fieldPanelItemInputHeightForBorder": 28, // 字段布局面板全边框模式输入框高度(不含弹窗)
"fieldPanelItemMarginBottom": 5, // 字段布局面板字段外底边距
"horizontalInputMarginRight": "", // 字段水平布局标题到输入框的右间距
"horizontalInputWidth": "", // 字段水平布局输入框宽度
"horizontalTitleWidth": "", // 字段水平布局的标题宽度
"replaceIcons": {
"select": "kdfont kdfont-xiala", // 下拉列表图标替换
"basedata": {
"commonIcon": "kdfont kdfont-f" // 基础资料图吧替换
}
}
},
"grid": {
"headerHeight": 32, // 表头高度
"rowHeight": 40, // 行高
"verticalBordered": false, // 竖分割线
"isGridStriped": false, // 斑马纹
"columnResizeMode": "adaptive", // 列宽显示模式
"pageType": "basic", // 翻页器风格
"rowMergeCellVerticalAlign": "top", // 行融合单元格内容竖直对齐方式 top居上,不固定位置,滚动显示内容会消失,上下会提前加载表格20行数据;middle 固定居中显示,上下不会提前加载表格20行数据;默认是top
"showEditMark": false // 单据体一直显示可编辑的悬浮样式
"fseqName": "序号" // 表格序号列自定义设置为其他字符
},
"emotional": {
"noData": { // 无数据提示
"imagePath": "../img/de",
"description": "3213123"
},
"defaultPrompt": { // 默认类别提示
"imagePath": "",
"description": ""
},
"savePrompt": { // 保存提交类提示
"imagePath": "",
"description": ""
},
"deletePrompt": { // 删除类提示
"imagePath": "",
"description": ""
},
"waitPrompt": { // 等待类提示
"imagePath": "",
"description": ""
},
"businessPrompt": { // 功能业务类提示
"imagePath": "",
"description": ""
},
"permissionPrompt": { // 权限类提示
"imagePath": "",
"description": ""
},
"submitPrompt": { // 提交类提示
"imagePath": "",
"description": ""
},
"stayTuned": { // 敬请期待
"imagePath": "",
"description": ""
},
"systemError": { // 系统错误
"imagePath": "", // “./public/img/emotional/XXX.webp”
"description": ""
},
"pageInaccessible": { // 页面无法访问
"imagePath": "",
"description": ""
}
},
"ui": {
"cancelConfirmBtnPositionExchange": true, // 取消和确定按钮是否进行位置交换, m默认是取消确认
"loading": {
"svgIconPath": "public/thirdjs/image/loading.svg", // 自定义加载loading图标地址
"noAnimation": true, // 是否关闭loading默认动画,关闭后可通过自定义样式添加动画
"mobSvgIconPath": "public/thirdjs/image/mobLoading.svg", // 移动加载loading地址,仅支持svg
"mobNoAnimation": true, // 移动是否关闭loading默认动画,关闭后可通过自定义样式添加动画
}
}
},
"largeText": { // 大文本
"fieldStyleInView": 2 // 查看态字段风格 值: 0/1/2(下划线/标签/边框)
},
"advcon": { // 折叠面板
"titleFontSize": "14px", // 标题文字大小
"subTitleFontSize": "12px", // 二级标题文字大小
"foldedFontClass": "kdfont kdfont-houfan", // 折叠态需要替换的字体图标[需为折叠态的字体图标,展开态由旋转生成]
"hideCollapseIcon": false, /// 隐藏折叠图标
"paddingTop": "", // 可折叠面板的内上边距
"paddingLeft": "", // 可折叠面板的内左边距
"paddingRight": "", // 可折叠面板的内右边距
"paddingBottom": "", // 可折叠面板的内下边距
},
"button": { // 按钮
"height": "30px", // 高度
"color": "themeColor", // 字体颜色 值: themeColor/具体色值
"minWidth": "80px", // 最小宽度
"ghostTypeActiveWithLightBg": true, // 幽灵按钮active 态是否带背景色,值: true/false, 默认为false
"iconButtonFontColor": "themeColor", // 当没有了color时,字体图标字体颜色为color 设置的属性,当无设置color属性时,可设置iconButtonFontColor 来默认设置图标的颜色 值: themeColor/具体色值
"followThemeDisabledStyle": { // 跟随主题锁定态的样式
"color": "#fff",
"backgroundColor": "#B2B2B2"
}
},
"baritem": { // 工具栏里面的按钮
"height": "30px", // 高度
"color": "themeColor", // 字体颜色 值: themeColor/具体色值
"bgColor": "#fff", // 背景色
"ghostTypeBorder": "1px_solid_#d9d9d9", // 幽灵按钮情况下的边框(只有bgColor设置为白色才生效) 数据类型也可为{ "b": "1px_solid_#D9D9D9", "t": "1px_solid_#D9D9D9", /// "l": "1px_solid_#D9D9D9", "r": "1px_solid_#D9D9D9"}
"minWidth": "80px", //最小宽度
"ghostTypeActiveWithLightBg": true, // 幽灵按钮active 态是否带背景色,值: true/false, 默认为false
"followThemeDisabledStyle": { // 跟随主题锁定态的样式
"color": "#fff",
"backgroundColor": "#B2B2B2"
}
},
"grid": { // 整体表格配置
"toolbarLocation":"0", //0:上 1:下
"bordered":false, //true显示内部边框, false:不显示内部边框
"pageType":"basic", //基础(basic)、单据(bill)、简化(simple)、少页(less)和精细(nicety)可选
"groupContractedFontClass": "kdfont kdfont-shubiaozhankai2", // 树表展开图标 "groupExpandedFontClass": "kdfont kdfont-shubiaoshouqi2" // 树表收起图标
},
"listGrid": {// 列表表格
"toolbarLocation":"0", //0:上 1:下
"bordered":false, //true显示内部边框, false:不显示内部边框
"pageType":"basic", //基础(basic)、单据(bill)、简化(simple)、少页(less)和精细(nicety)可选
},
"entryGrid": {// 单据体(分录)表格
"toolbarLocation":"0", //0:上 1:下
"bordered":false, //true 显示内部边框, false:不显示内部边框
"pageType":"basic", //基础(basic)、单据(bill)、简化(simple)、少页(less)和精细(nicety)可选
},
"reportGrid": {// 报表
"bordered":false //true 显示内部边框, false:不显示内部边框
},
"f7ListGrid": {// f7列表表格
"pageType":"basic", //基础(basic)、单据(bill)、简化(simple)、少页(less)和精细(nicety)可选
},
"card": { // 卡片配置
"toolbarLocation":"0", //0:上 1:下
"pageType":"basic", //基础(basic)、单据(bill)、简化(simple)、少页(less)和精细(nicety)可选
}
}
}
```
无注释版本:
```
{
"theme": {
"@theme-color": "#5582F3",
"@hover-color": "#f5f5f5",
"@disabled-contain-bg": "#f5f5f5",
"@success-color": "#1BA854",
"@success-bg-color": "#F2FFF5",
"@success-border-color": "#6DD18E",
"@warning-color": "#FF991C",
"@warning-bg-color": "#FFFBF2",
"@warning-border-color": "#FFCB78",
"@error-color": "#FB2323",
"@error-bg-color": "#FFF2F4",
"@error-border-color": "#FF8088",
"@ongoing-color": "#276FF5",
"@ongoing-bg-color": "#F2F9FF",
"@ongoing-border-color": "#85B8FF",
"@disabled-color": "#B2B2B2",
"@disabled-border-color": "#CCC",
"@link-color": "#0E5FD8",
"@link-color-hover": "#3987ED",
"@link-color-active": "#0041B0",
"@primary-text-color": "#212121",
"@secondary-text-color": "#666",
"@third-text-color": "#999",
"@contain-bg": "#FAFAFA",
"@radius-size": "2px",
"@strong-border-color": "#D9D9D9",
"@strong-border-color-1": "#D9D9D9",
"@weak-border-color": "#E5E5E5",
"@zebra-stripe-deep-bg-color": "#ECEEF2",
"@grid-row-selected-bg-color": "var(--theme-color-level1)",
"@contain-bg-color": "#FFFFFF",
"@treemenu-expand-btn-color": "#c1cadc",
"@treemenu-expand-btn-hover-color": "var(--theme-color)",
"@treemenu-star-color": "#FFF",
"@treemenu-star-hover-color": "#ffc859",
"@treemenu-star-select-color": "#ffc859",
"@treemenu-first-level-bg-color": "#343848",
"@treemenu-first-level-color": "#c1cadc",
"@treemenu-first-level-hover-color": "#FFF",
"@treemenu-first-level-hover-bg-color": "#21242d",
"@treemenu-second-level-bg-color": "#21242d",
"@treemenu-second-level-color": "#c1cadc",
"@treemenu-second-level-hover-color": "var(--theme-color)",
"@treemenu-third-level-title-color": "rgba(255, 255, 255, 0.5)",
"@treemenu-third-level-bg-color": "#21242d",
"@treemenu-third-level-color": "rgba(255, 255, 255, 0.8)",
"@treemenu-third-level-hover-color": "var(--theme-color)",
"--kd-cq-tree-node-indentation-width": "20px",
"--kd-cq-container-title-font-weight": 600
},
"defaultProps": {
"common": {
"field": {
"labelDirection": "v",
"vOverallHeight": 44,
"vOverallWidth": 230,
"emptyText": "-",
"fieldStyle": 2,
"textAlign": "right",
"fieldStyleInView": 0,
"placeHolder": "请输入内容",
"vOverallHeight": "50px",
"horizontalTitleFontSize": "12px",
"horizontalTitleAlign": "left",
"fieldPanelItemAdaptive": true,
"fieldPanelItemPriorHorizontalMarginRight": 20,
"fieldPanelItemPriorVerticalMarginRight": 20,
"fieldPanelItemInputHeightForBorder": 28,
"fieldPanelItemMarginBottom": 5,
"horizontalInputMarginRight": "",
"horizontalInputWidth": "",
"horizontalTitleWidth": "",
"replaceIcons": {
"select": "kdfont kdfont-xiala",
"basedata": {
"commonIcon": "kdfont kdfont-f"
}
}
},
"grid": {
"headerHeight": 32,
"rowHeight": 40,
"verticalBordered": false,
"isGridStriped": false,
"columnResizeMode": "adaptive",
"pageType": "basic",
"rowMergeCellVerticalAlign": "top",
"showEditMark": false
"fseqName": "序号"
},
"emotional": {
"noData": {
"imagePath": "../img/de",
"description": "3213123"
},
"defaultPrompt": {
"imagePath": "",
"description": ""
},
"savePrompt": {
"imagePath": "",
"description": ""
},
"deletePrompt": {
"imagePath": "",
"description": ""
},
"waitPrompt": {
"imagePath": "",
"description": ""
},
"businessPrompt": {
"imagePath": "",
"description": ""
},
"permissionPrompt": {
"imagePath": "",
"description": ""
},
"submitPrompt": {
"imagePath": "",
"description": ""
},
"stayTuned": {
"imagePath": "",
"description": ""
},
"systemError": {
"imagePath": "",
"description": ""
},
"pageInaccessible": {
"imagePath": "",
"description": ""
}
},
"ui": {
"cancelConfirmBtnPositionExchange": true,
"loading": {
"svgIconPath": "public/thirdjs/image/loading.svg",
"noAnimation": true,
"mobSvgIconPath": "public/thirdjs/image/mobLoading.svg",
"mobNoAnimation": true,
}
}
},
"largeText": {
"fieldStyleInView": 2
},
"advcon": {
"titleFontSize": "14px",
"subTitleFontSize": "12px",
"foldedFontClass": "kdfont kdfont-houfan",
"hideCollapseIcon": false,
"paddingTop": "",
"paddingLeft": "",
"paddingRight": "",
"paddingBottom": "",
},
"button": {
"height": "30px",
"color": "themeColor",
"minWidth": "80px",
"ghostTypeActiveWithLightBg": true,
"iconButtonFontColor": "themeColor",
"followThemeDisabledStyle": {
"color": "#fff",
"backgroundColor": "#B2B2B2"
}
},
"baritem": {
"height": "30px",
"color": "themeColor",
"bgColor": "#fff",
"ghostTypeBorder": "1px_solid_#d9d9d9",
"minWidth": "80px",
"ghostTypeActiveWithLightBg": true,
"followThemeDisabledStyle": {
"color": "#fff",
"backgroundColor": "#B2B2B2"
}
},
"grid": {
"toolbarLocation":"0",
"bordered":false,
"pageType":"basic",
"groupContractedFontClass": "kdfont kdfont-shubiaozhankai2",
"groupExpandedFontClass": "kdfont kdfont-shubiaoshouqi2"
},
"listGrid": {
"toolbarLocation":"0",
"bordered":false,
"pageType":"basic",
},
"entryGrid": {
"toolbarLocation":"0",
"bordered":false,
"pageType":"basic",
},
"reportGrid": {
"bordered":false
},
"f7ListGrid": {
"pageType":"basic",
},
"card": {
"toolbarLocation":"0",
"pageType":"basic",
}
}
}
```
主题定制系列——JSON配置文件说明
# 变更记录| 产品版本 | 更新内容 | 更新日期 || --- | --- | --- || V7.0.1 | 支持了主题定制的全局加载loading视觉配置...
点击下载文档
上一篇:导出数据常见问题汇总下一篇:UI主题可视化——轻松实现个性化主题编辑
本文2024-09-23 00:35:40发表“云苍穹知识”栏目。
本文链接:https://wenku.my7c.com/article/kingdee-cangqiong-140468.html
您需要登录后才可以发表评论, 登录登录 或者 注册
最新文档
热门文章