语义结构

TechUI 的主题系统遵循一套严格的语义化 Schema（数据结构）。无论主题的视觉风格如何变化（浅色、深色或高对比度），其底层的数据结构都保持一致。

这种标准化设计确保了：

1. 组件通用性：组件只需引用语义变量（如 button.bg_hov），即可在任何主题下正确展示。
2. 替换安全性：开发者可以放心地切换主题，无需担心缺少字段导致报错。

命名规范

在深入结构之前，请先了解 TechUI 主题中通用的缩写和命名习惯：

属性前缀

• bg: 背景色 (Background)
• bd: 边框色 (Border)
• fc: 字体色 (Font Color)
• hlite: 高亮色 (Highlight)

状态后缀

• _hov: 悬停状态 (Hover)
• _act: 激活/按下状态 (Active/Pressed)
• _foc: 聚焦状态 (Focus)
• _dis: 禁用状态 (Disabled)

层级后缀

对于色阶类配置，通常分为 7 个层级： weakest < weaker < weak < base (基准) < strong < stronger < strongest

根节点结构

一个标准的主题对象包含以下一级分类：

const themeData = {
  name: "lightBlue", // 主题名称
  common: {},        // 通用基础色
  font: {},          // 文字色阶
  tone: {},          // 中性色阶
  
  // 交互组件类
  button: {},        // 按钮
  input: {},         // 输入框
  menu: {},          // 下拉菜单/浮层
  
  // 功能状态色
  primary: {},       // 主色
  success: {},       // 成功
  warning: {},       // 警告
  danger: {},        // 危险
  info: {},          // 信息
  emphasis: {},      // 强调
  
  // 布局与特殊组件
  sider: {},         // 侧边栏
  background: {},    // 全局背景策略
  scroll: {},        // 滚动条
  prominent: {},     // 突出显示块
  
  // 高级视觉
  scifi: {},         // 科幻/装饰性组件
  chart: {}          // 图表配色
}

详细字段解析

通用基础 (Common)

定义了页面的层级结构颜色，用于构建“从底向上”的视觉纵深。

字段名	说明	CSS 变量示例
bg_root / bd_root	最底层的根背景和边框（通常是 body 颜色）。	--common-bg-root
bg_frame / bd_frame	布局框架层，位于根背景之上。	--common-bg-frame
bg_layer / bd_layer	内容容器层，如卡片、面板。	--common-bg-layer
bg / bd	最基础的通用背景和边框。	--common-bg

排版系统 (Font & Tone)

• font: 专门用于文本颜色。
• tone: 用于非文本的中性色元素（如分割线、占位符背景、骨架屏）。

两者均包含从 weakest 到 strongest 的 7 级色阶。

• base: 正文/默认颜色。
• weak: 辅助文字/次要信息。
• weakest: 占位符/禁用文字。
• strong: 标题/强调文字。

交互组件 (Button, Input, Menu)

定义了标准交互元素在不同状态下的表现。

以 button 为例：

• bg, bd: 默认状态。
• bg_hov, bd_hov: 鼠标悬停。
• bg_act, bd_act: 鼠标按下。
• bg_dis, bd_dis: 禁用状态。

Input 额外包含 _foc (聚焦) 状态，Menu 通常指代下拉选项或气泡卡片。

功能色阶 (Functional Colors)

包含 primary (主色), success, warning, danger, info, emphasis。 每个分类都包含完整的 7 级色阶：

• base: 标准色（如标准红）。
• weakest / weaker: 常用于浅色背景（如 Alert 提示框的背景）。
• strong: 常用于 Hover 状态或深色背景下的文字。

布局特有 (Layout Specifics)

• sider: 侧边栏专用配置。
  • grad_pri, grad_sec, grad_thi: 用于生成侧边栏的渐变背景。
  • focus: 选中菜单项的颜色。
• background: 全局背景策略。
  • view_grad: 视图区域的渐变色数组。
  • view_svgfill: 视图区域 SVG 纹理的填充色。
  • root_svgfill: 根背景 SVG 纹理的填充色。
• scroll: 滚动条配色。
  • track: 轨道颜色。
  • thumb: 滑块颜色。

高级视觉 (Scifi & Chart)

这是 TechUI 区别于普通 UI 库的特色部分。

Scifi (科幻/装饰风格)

用于 <ScifiPanel>, <ScifiButton> 等具有科技感装饰的组件。

字段名	说明
thickness	装饰线条的“厚度”颜色（常用于产生立体感）。
hlite	高亮/发光颜色（Glow）。
focus	焦点/选中部分的颜色。
bg_alt, fc_alt	备用背景和备用前景色。

Chart (图表)

直接映射到 ECharts 的配置项，详情请参考 ECharts 主题集成 章节。

• line: 轴线颜色分级 (weak, base, strong)。
• bubble: 散点图/气泡图配色。
• map: 地图区域配色 (bg, bd, glow, shadow)。
• palette: 调色盘数组（用于饼图、柱状图自动着色）。
• visual: 视觉映射渐变端点。

扩展建议

如果您在开发自定义组件时发现现有语义无法满足需求，建议优先复用 primary 或 common 中的变量，而不是硬编码颜色值。这样可以确保您的组件在未来任何新主题下都能保持视觉协调。