tifenxi-design
v1.0.26
Published
DataRise 产品设计系统 —— 基于 React 19 + Tailwind CSS 4 + Ant Design 6 构建的医疗数据分析 UI 组件库。
Downloads
2,522
Readme
tifenxi-design
DataRise 产品设计系统 —— 基于 React 19 + Tailwind CSS 4 + Ant Design 6 构建的医疗数据分析 UI 组件库。
npm: https://www.npmjs.com/package/tifenxi-design
Docs
Features
- Design Token 驱动 — 所有视觉值（颜色、间距、圆角、阴影等）由 CSS Custom Properties 统一管理
- Dark Mode — 完整的深色模式支持，通过
<html class="dark">切换，零闪烁 - Ant Design 6 集成 — TifenxiProvider 自动将 token 同步至 AntD 主题，确保自定义组件与 AntD 组件风格一致
- Tailwind CSS 4 — 全部组件使用 Tailwind 工具类，无独立 CSS 文件
- Tree-shakable — ES Module 输出，按需引入
Components
Common（通用组件）
| 组件 | 说明 | |------|------| | Button | 主按钮，支持多种变体和尺寸 | | Tag | 标签，支持语义色和自定义色 | | Badge | 徽标，数字/状态指示 | | Avatar | 头像 | | Card | 卡片容器 | | Modal | 模态对话框 | | Drawer | 抽屉面板（DrawerShell / DrawerHeader / DrawerBody / DrawerFooter） | | Tooltip | 文字提示 | | Popover | 气泡卡片 | | Toast | 轻提示 | | Alert | 警告提示 | | Tabs / SegTabs | 选项卡切换 | | DeltaBadge | 趋势变化标识（涨跌色自动适配） | | EmptyState | 空状态占位 | | Skeleton | 骨架屏加载 | | Spinner | 加载指示器 | | Divider | 分割线 | | SegmentedBar | 分段比例条 | | PeriodPicker | 时间周期选择器 | | KpiCardGrid | KPI 卡片网格布局 | | SectionTitle | 区块标题 | | InfoPair / Callout | 信息展示 |
Business（业务组件）
| 组件 | 说明 | |------|------| | KpiCard | KPI 指标卡，含趋势和环比 | | InsightCard | AI 洞察卡片 | | ActionCard | 操作建议卡片 | | TimeRangePicker | 时间范围选择器（预设 + 自定义日历） |
Charts（图表组件）
| 组件 | 说明 | |------|------| | TrendSparkline | 迷你趋势折线图 | | DualTrendChart | 折线 + 柱状双趋势图 | | QuadrantScatterChart | 四象限散点图 | | StackedBarChart | 堆叠柱状图 |
Wrapped AntD（Ant Design 封装）
统一 token 注入的 AntD 组件直通封装：
Table / Select / Dropdown / Form / DatePicker / RangePicker / Progress / Menu / Breadcrumb / Segmented
Quick Start
Install
# npm
npm install tifenxi-design
# yarn
yarn add tifenxi-designPeer Dependencies
yarn add react react-dom antd @ant-design/icons @antv/g2 framer-motion dayjsReact 运行时要求：
react >=19.0.0 <20.0.0react-dom >=19.0.0 <20.0.0react与react-dom必须使用完全相同的版本号；如果使用 rc/canary 版本，也必须两者一致。
tifenxi-design 会使用宿主项目解析到的 React 运行时。初始化时如果发现版本不兼容，会抛出带有当前检测版本和要求范围的明确错误。
Usage
import { TifenxiProvider, Button, KpiCard } from 'tifenxi-design';
import 'tifenxi-design/dist/index.css';
function App() {
return (
<TifenxiProvider>
<Button variant="primary">Click Me</Button>
<KpiCard
title="满意度"
value={92.5}
unit="%"
trend={{ value: 2.3, direction: 'up' }}
/>
</TifenxiProvider>
);
}Design Tokens
所有视觉变量定义在 tokens.css 中，通过 @theme inline 映射到 Tailwind 工具类：
| 类别 | 变量示例 | 说明 |
|------|---------|------|
| Brand | --brand-50 ~ --brand-900 | 主题色阶 |
| Neutral | --neutral-0 ~ --neutral-900 | 中性色（背景、文字、边框） |
| Semantic | --success-500, --danger-bg | 语义色（成功、警告、危险、信息） |
| Chart | --chart-1 ~ --chart-5 | 满意度评分色 |
| Series | --series-1 ~ --series-12 | 多系列图表色 |
| Spacing | --sp-0 ~ --sp-16 | 4px 网格间距 |
| Radius | --radius-xs ~ --radius-full | 圆角 |
| Shadow | --shadow-card, --shadow-modal | 投影层级 |
Development
yarn install # 安装依赖
yarn dev # 启动 Storybook（port 6006）
yarn build # 构建组件库 → dist/
yarn build:storybook # 构建 Storybook 静态站点
yarn test # 运行测试Contributing
禁止直接向 main 分支推送代码。 所有变更必须通过 Pull Request 合并。
# 1. 从 main 创建分支
git checkout -b feat/my-feature main
# 2. 开发、提交
git add . && git commit -m "feat: add new component"
# 3. 推送并创建 PR
git push -u origin feat/my-feature
gh pr create --base main分支命名规范：feat/xxx（新功能）、fix/xxx（修复）、chore/xxx（构建/依赖）
发版流程
方式一：GitHub Actions 一键发版（推荐）
- 打开 Bump Version & Publish
- 点击 Run workflow → 选择版本类型（
patch/minor/major）→ 确认 - 自动完成以下步骤：
package.json版本号 bump- 创建 commit + tag 并 push 到
main yarn build构建npm publish发布到 npm- 创建 GitHub Release
方式二：GitHub Actions 发布测试包
测试包使用 prerelease 版本和 npm dist-tag 发布，不提交 package.json、不打 git tag、不更新 latest。
- 打开 Publish Preview Package
- 点击 Run workflow → 选择要测试的分支 → 选择测试标签（
beta/next/alpha）→ 确认 - workflow 会生成类似
1.0.26-beta.123.1的临时版本，并发布到对应 npm 标签
前端项目安装测试包：
cd ti-datarise-frontend
yarn add tifenxi-design@beta --ignore-engines
# 或使用 workflow summary 中输出的精确版本：
yarn add [email protected] --ignore-engines该 workflow 使用 GitHub Actions Secret
NPM_TOKEN发布。NPM_TOKEN必须是tifenxi-designnpm 包 owner/maintainer 的 automation token；workflow 会在发布前校验 token 归属。
方式三：本地手动发版
# 1. 确保在 main 分支且代码最新
git checkout main && git pull
# 2. bump 版本号
npm version patch --no-git-tag-version # 或 minor / major
# 3. 提交并打 tag
git add package.json
git commit -m "chore: bump version to vX.Y.Z"
git tag vX.Y.Z
git push origin main --tags
# 4. tag 推送后自动触发 npm-publish.yml 发布前端项目升级
cd ti-datarise-frontend
yarn upgrade tifenxi-design@latest --ignore-engines
yarn build # 验证构建Storybook 部署
- 平台：Vercel
- 地址：https://tifenxi-datarise-ui.vercel.app
- 触发方式：push 到
main分支后 Vercel 自动部署（通过 GitHub App 集成） - 构建命令：
yarn build:storybook（在 Vercel Build Settings 中配置）
注意：commit author 邮箱必须是 GitHub 账号中已验证的邮箱，否则 Vercel Hobby 计划会 block 部署。
CI/CD
| Workflow | 触发条件 | 功能 |
|----------|---------|------|
| bump-version.yml | 手动触发 (workflow_dispatch) | 版本 bump → commit → tag → npm 发布 → GitHub Release |
| publish-preview.yml | 手动触发 (workflow_dispatch) | 生成 prerelease 测试版本 → npm dist-tag 发布，不改 latest |
| npm-publish.yml | push tag v* | 构建 → 发布 npm → 创建 GitHub Release（本地打 tag 时触发） |
| Vercel | push to main | 自动构建部署 Storybook 到 Vercel |
Tech Stack
- React 19 + TypeScript
- Tailwind CSS 4 (utility-first,
@theme inlinetoken mapping) - Ant Design 6 (wrapped with token sync)
- G2 5 (chart rendering)
- Framer Motion (animations)
- Vite 6 (library build, ES module output)
- Storybook 8 (component development & documentation)
- Vitest (unit testing)
License
Private