全局样式

全局样式是基于Ant Design Design Token体系的样式配置系统，负责统一管理应用的视觉设计规范。它通过标准化的设计令牌（Design Token）控制字体、颜色、圆角、阴影等视觉元素，确保整个应用界面的一致性和可维护性。

全局样式元素分层结构为Meta（themes.Meta） → Type（themes.NormalType） → 实例，开发者可通过JitAI的可视化开发工具快捷地创建全局样式实例元素。

当然，开发者也可以创建自己的Type元素，或者在自己的App中改写JitAi官方提供的themes.NormalType元素，以实现自己的封装。

参考文档

开发者可参考 Ant Design 定制主题文档 了解更多 Design Token 的概念和用法。

快速开始

基础配置示例

themes/myGlobalTheme.json

{
  "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial",
  "borderRadius": 6,
  "colorPrimary": "#1677ff",
  "colorSuccess": "#52c41a",
  "colorWarning": "#faad14",
  "colorError": "#ff4d4f",
  "colorInfo": "#1677ff",
  "colorText": "rgba(0, 0, 0, 0.88)",
  "colorTextSecondary": "rgba(0, 0, 0, 0.65)",
  "fontSizeHeading1": 38,
  "fontSizeHeading2": 30,
  "boxShadow": "0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02)"
}

配置属性说明

全局样式通过JSON配置文件定义设计令牌，支持以下几类属性配置：

属性类型	说明	主要属性
字体配置	控制字体家族和各级标题字号	fontFamily、fontSizeHeading1-5
圆角配置	定义组件圆角大小规范	borderRadius、borderRadiusXS/SM/LG
主题色彩	控制品牌色和功能色	colorPrimary、colorSuccess、colorWarning、colorError
背景填充	定义各级背景和填充色	colorBgBase、colorFill系列
文本颜色	控制文本层级颜色	colorText系列
边框颜色	定义边框颜色规范	colorBorder、colorBorderSecondary
阴影效果	控制组件阴影样式	boxShadow、boxShadowSecondary

方法

loader

全局样式加载器，负责加载和合并主题配置。

参数详解

参数名	类型	必填	说明
elements	Array<Element>	是	主题元素数组

返回值

类型	说明
object	合并后的主题配置对象

使用示例

主题加载示例

// 加载器会自动合并多个主题配置
const themeConfig = await loader([
  customThemeElement,
  baseThemeElement
]);

// 返回合并后的主题配置
console.log(themeConfig.colorPrimary); // '#1677ff'

属性

字体属性

fontFamily

• 类型: string
• 说明: 字体家族，优先使用系统默认界面字体，提供备用字体库
• 默认值: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto"

fontSizeXL

• 类型: number
• 说明: 超大号字体大小

fontSizeHeading1

• 类型: number
• 说明: 一级标题字号，H1标签使用
• 默认值: 38

fontSizeHeading2

• 类型: number
• 说明: 二级标题字号，H2标签使用
• 默认值: 30

fontSizeHeading3

• 类型: number
• 说明: 三级标题字号，H3标签使用
• 默认值: 24

fontSizeHeading4

• 类型: number
• 说明: 四级标题字号，H4标签使用
• 默认值: 20

fontSizeHeading5

• 类型: number
• 说明: 五级标题字号，H5标签使用
• 默认值: 16

圆角属性

borderRadius

• 类型: number
• 说明: 基础圆角大小，用于按钮、输入框、卡片等基础组件

borderRadiusXS

• 类型: number
• 说明: XS号圆角，用于Segmented、Arrow等小圆角组件
• 默认值: 2

borderRadiusSM

• 类型: number
• 说明: SM号圆角，用于小尺寸组件如small size的Button、Input、Select
• 默认值: 4

borderRadiusLG

• 类型: number
• 说明: LG号圆角，用于Card、Modal等大圆角组件
• 默认值: 8

颜色属性

colorPrimary

• 类型: string
• 说明: 品牌主色，体现产品特性的核心视觉元素

colorPrimaryBg

• 类型: string
• 说明: 主色浅色背景色，用于视觉层级较弱的选中状态

colorSuccess

• 类型: string
• 说明: 成功色，用于Result、Progress等组件

colorSuccessTextActive

• 类型: string
• 说明: 成功色文本激活态

colorWarning

• 类型: string
• 说明: 警戒色，用于Notification、Alert等警告类组件

colorError

• 类型: string
• 说明: 错误色，表示错误状态

colorInfo

• 类型: string
• 说明: 信息色

colorBgBase

• 类型: string
• 说明: 基础背景色，用于派生背景色梯度的基础变量

colorBorder

• 类型: string
• 说明: 一级边框色，默认边框颜色，用于分割不同元素

colorBorderSecondary

• 类型: string
• 说明: 二级边框色，比默认边框色浅一级

colorFill

• 类型: string
• 说明: 一级填充色，最深的填充色，用于Slider的hover效果

colorFillSecondary

• 类型: string
• 说明: 二级填充色，用于Rate、Skeleton等组件，也可作为Table等的hover状态

colorFillTertiary

• 类型: string
• 说明: 三级填充色，用于Slider、Segmented等组件的默认填色

colorFillQuaternary

• 类型: string
• 说明: 四级填充色，最弱填充色，适用于斑马纹、区分边界等场景

colorText

• 类型: string
• 说明: 一级文本色，符合W3C标准的默认文本颜色

colorTextSecondary

• 类型: string
• 说明: 二级文本色，用于Label文本、Menu文本选中态等场景

colorTextTertiary

• 类型: string
• 说明: 三级文本色，用于描述性文本，如表单补充说明、列表描述等

colorTextQuaternary

• 类型: string
• 说明: 四级文本色，最浅文本色，用于输入提示文本、禁用文本等

阴影属性

boxShadow

• 类型: string
• 说明: 一级阴影，控制元素阴影样式

boxShadowSecondary

• 类型: string
• 说明: 二级阴影，控制元素二级阴影样式

风格属性

wireframe

• 类型: boolean
• 说明: 线框风格，用于将组件视觉效果变为线框化，启用V4效果
• 默认值: false

事件

暂无

高级特性

主题合并机制

全局样式支持多层主题配置合并，通过loader机制实现：

主题合并示例

// loader会按顺序合并多个主题配置
// 后面的配置会覆盖前面的同名属性
const mergedTheme = await loader([
  baseThemeElement,    // 基础主题
  brandThemeElement,   // 品牌主题  
  customThemeElement   // 自定义主题
]);

Design Token继承

基于Ant Design的Design Token体系，支持从基础色彩自动生成完整色板：

色彩继承示例

{
  "colorPrimary": "#1677ff",
  // 会自动生成：
  // colorPrimaryHover, colorPrimaryActive, 
  // colorPrimaryBg, colorPrimaryBorder 等派生色彩
}

响应式设计支持

通过配置不同尺寸的圆角和字体，支持多屏幕适配：

响应式配置示例

{
  "borderRadiusXS": 2,   // 小屏幕细节
  "borderRadiusSM": 4,   // 中等屏幕
  "borderRadius": 6,     // 标准圆角
  "borderRadiusLG": 8,   // 大屏幕组件
  
  "fontSizeHeading5": 16, // 移动端标题
  "fontSizeHeading1": 38  // 桌面端大标题
}

品牌定制化

支持完整的品牌色彩体系定制：

品牌定制示例

{
  // 品牌主色定制
  "colorPrimary": "#8B5CF6",
  "colorSuccess": "#10B981", 
  "colorWarning": "#F59E0B",
  "colorError": "#EF4444",
  
  // 字体品牌化
  "fontFamily": "Inter, -apple-system, BlinkMacSystemFont",
  
  // 圆角风格
  "borderRadius": 12  // 更现代的圆角风格
}