排版系统

Nexus UI v3.0 正式发布

新增 4 级侧栏菜单、深浅色一键切换与 52 个行业模块页面。升级后旧版类名全部向下兼容。

区块标题条 = 标题 + 等宽副标题 + 下边框，全站演示区块统一使用该结构，保证 97 个页面浏览节奏一致。

组件库遵循“克制”原则：一份页面只保留一种主色，装饰元素不超过两处。所有间距取自 4px 基准刻度，因此任意页面拼装后节奏都一致。

正文段落之间留出 16px 间距，通过 mt-4 控制，不使用空行或 <br> 制造间隔。

小号说明文字用于补充信息，颜色降到 fg-3，与正文形成层级差。

• 设计令牌：颜色、圆角、阴影、间距
• 通用组件：导航、按钮、表单、数据
• 行业模块：16 个业务场景 52 个页面
• 多级嵌套：
  • 浮层弹窗 6 页
  • 卡片与布局 5 页
  • 辅助工具 5 页

1. 引入 header.php 与 sidebar.php
2. 以纯 HTML 书写页面主体
3. 结尾补齐页脚、Toast 容器与交互脚本

设计令牌

全站视觉变量的唯一来源，CSS 变量实现。

页面骨架

两行 include + main + 页脚 + 脚本。

交互约定

一律使用 data-* 属性驱动，不写内联 JS。

移动优先

默认单列，lg 断点起展开侧栏与多列栅格。

好的设计系统不是限制创造力的栅栏，而是把重复决策一次性做完，让创造力只花在真正需要它的地方。

“ 组件库的价值不在于组件数量，而在于每个组件都恰好被放在它该在的位置上。

强调使用 加粗 strong， 语气变化使用 斜体 em， 需要注意的内容用 高亮 mark， 缩写使用 API， 已废弃的价格用 ¥399 并搭配 ¥199。

行内代码使用 <main id="top"> 这样的浅底胶囊，代码块使用 .codeblock 深底容器。

/* 排版令牌：负字距让大字号标题更紧凑 */
.text-h1  { font-size:48px; line-height:1.1;  letter-spacing:-.045em }
.text-h2  { font-size:36px; line-height:1.18; letter-spacing:-.035em }
.text-body{ font-size:15px; line-height:1.6 }
kbd       { font-family:'JetBrains Mono', monospace }

表格数字统一 .num：右对齐 + 等宽字体，小数点自然对齐。