主题定制系列——JSON配置文件说明

栏目:云苍穹知识作者:金蝶来源:金蝶云社区发布:2024-09-23浏览:3

主题定制系列——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视觉配置...
点击下载文档
确认删除?
回到顶部
客服QQ
  • 客服QQ点击这里给我发消息