Selrux UI — 面向中后台的 React 组件库

01 · 设计初衷

中后台要的是稳定的层级，而不是花哨的表面。

同一个按钮，每个页面各写一遍 loading 与禁用逻辑
颜色、圆角散落在业务样式里，换肤只能全局搜索替换
文案写死在组件里，切换语言要改源码

公开子路径: 75
设计 Token: 267
Button 组合: 1928 色 × 4 展示 × 6 尺寸
语言包: 2zh-CN · en-US

behavior

onClick 激活
disabled 拦截
loading 拦截
键盘焦点

tokens

--srx-primary#bf80ff
--srx-radius-md0.375rem
--srx-space-unit0.25rem
--srx-motion-duration150ms

#bf80ff 为本站覆盖值，库默认 #8e51ff

skin

srx-button srx-button--primary

1主题皮肤@selrux/ui
2Tokentokens.css
3行为@selrux/headless

点击按钮可触发真实的 loading（文案来自语言包）

01行为只写一次激活、禁用、loading 拦截与焦点交给 @selrux/headless。
02样式只走 Token267 个 --srx-* 变量；组件用 CVA 组合语义类名。
03克制的视觉查询、表格、操作优先，不做大面积渐变与过度动效。
04可访问焦点可见；tokens.css 内置 prefers-reduced-motion。
05中英文zh-CN / en-US，如 loadingLabel：处理中 / Loading。
06反馈门面App 提供 useMessage、useNotification、useModal。

阅读设计初衷 →

02 · 架构

四层分工，构建时逐条校验。

运行时：属性与调用自上而下，状态与事件自下而上。构建时：每个子路径独立打包，并校验它没有把不该带的层拉进来。

公开子路径: 75
组件目录: 64
CSS 产物: 3
闭包校验: 9

目录职责与构建细节 →

@selrux/ui

64 个组件目录，每个子路径独立入口，无包根聚合导出
Token 写在 @layer srx 内，挂在 .srx-ui 根上
ConfigProvider 提供配置域；locale 内置 zh-CN / en-US
App 反馈门面：useMessage、useNotification、useModal

src/components/*
src/styles/tokens.css
src/config/config-provider.tsx
src/locale/zh-CN.ts
src/app/index.ts

tsx

123456const buttonClassName = cva('srx-button', {
  variants: {
    color: { primary: 'srx-button--primary' },
    variant: { solid: 'srx-button--solid' },
  },
});

属性与调用向下状态与事件向上

03 · 研发方式

先找到真实定义，再写一行代码。

规则来自仓库根目录的 AGENTS.md：保留已有改动、先检索再实现、用类型固定契约、按影响范围验证，交付时列出实际运行的命令与未验证项。

测试文件: 73
编译期契约: 13
Button 反例: 8

研发与贡献指南 →

zsh — repos/ui1 / 4

先确认目录与职责用 rg 找真实定义、同类实现、调用方与公开导出；不编造 API、import 路径或依赖版本。

$ git status --short$ ls src/components/buttonbutton-options.ts   button-props.contract.ts   button-props.tsbutton-variants.ts  button.css  button.test.tsx  button.tsxindex.ts            resolve-button-size.ts$ rg "ButtonProps" src/components/button

04 · 实时预览

调一调真实的 Button。

onClick 触发 0 次

05 · 主题

换一个品牌色，整套组件跟着变。

品牌色

“库默认”为 tokens.css 中的 --srx-primary 初始值。

明暗

在主题编辑器中调整更多 Token →

发布审批

确认后将通知 3 位评审人。

06 · 安装

两步接入。

安装使用包管理器当前配置的 registry；私有源地址只保存在开发者本机。peer 依赖为 React 19。

pnpm add @selrux/ui

App.tsx

1234567891011// 样式随组件入口自动按需引入
import { ConfigProvider } from '@selrux/ui/config-provider';
import { Button } from '@selrux/ui/button';

export function App() {
  return (
    <ConfigProvider mode="light">
      <Button>开始</Button>
    </ConfigProvider>
  );
}

07 · 生态

一个中心，五条轨道。

以下节点全部来自 package.json 与工作区同级包：20 个依赖、工具与相关包，按职责排在三层轨道上。点选节点查看真实版本与用法。

@selrux/headless0.4.0

运行时 · dependencies

同作者维护的无样式行为层，本库组件在其上加皮肤与 Token。

import { Button as HeadlessButton } from '@selrux/headless/button';

行为交给 Headless，视觉交给 Token。