@djangocfg/ui-tools (英语)
重型而懒惰的回放组件,用于管理员,devtools,和仪表板. 与 @djangocfg/ui-core (原始内容 + 主题标志).
每个工具都是 React.lazy 默认情况下——导入您使用的东西,只支付其捆绑成本.
安装
pnpm add @djangocfg/ui-tools @djangocfg/ui-core
/* your app's globals.css — Tailwind v4 must scan this package's sources */
@import "@djangocfg/ui-core/styles/full";
@import "@djangocfg/ui-tools/styles"; /* ← add this */
没有样式导入,Tailwind从未看到这个软件包的类和工具会部分变成不样式.
将您的应用程序包入 <UiProviders> 从 @djangocfg/ui-core 一次在根上(将工具提示/ Dialog/ Toast上下文输入每个工具).
目录
| 组 | 工具 |
|---|---|
chat/ | ChatLauncher, 信件列表、 作曲家、 建议的Prompts |
data/ | DataGrid 数据表 · JsonTree · Kanban · Listbox · 梅森里 · 时间线 · 树 |
dev/code/ | PrettyCode · DiffViewer · 马克下沉 |
dev/api/ | OpenapiViewer – Api Referable – 请求维耶尔 |
dev/ops/ | 日志编辑器 – 信封表 |
dev/ (顶部) | · 地图 |
forms/ | 代码编辑器(摩纳哥) ^ Json编辑器 ^ JsonForm → Markdown编辑器 ^ 符号编辑器 → 文件上传器 |
input/ | Combobox → CronScheduller (+ CronPreview) → Scroller → 可排序 → 语音识别 |
media/ | AudioPlayer ・ VideoPlayer ・ 图像查看器 ・ LottiePlayer ・ 图片库 |
overlay/ | 响应Dialog / scrollSpy / 选择工具栏 / 巡回赛 |
visual/charts/ | Gauge 活动Graph 提交Graph 火花线 |
visual/indicators/ | · 评级 |
visual/design/ | 彩色夹 * 彩色夹 * 文件Icon |
visual/ (顶部) | 马尔克 · 克克德 |
分集团是内部的——公共进口保持平稳.
使用量
import { JsonTree, LogViewer, DiffViewer, CronScheduler } from '@djangocfg/ui-tools';
<JsonTree data={response} compactHeader />
<LogViewer entries={logs} />
<DiffViewer oldCode={a} newCode={b} language="ts" view="split" />
<CronScheduler value={cron} onChange={setCron} />
子路径进口避免将兄弟姐妹装入:
import { JsonTree } from '@djangocfg/ui-tools/json-tree';
import { LogViewer } from '@djangocfg/ui-tools/log-viewer';
他们
所有工具通过 @djangocfg/ui-core 语义符号( e)bg-card, (中文(简体) ), text-foreground, (中文(简体) ), border-border,状态表面)——它们会自动地适应光/暗以及ui-core中的主题预设.
两种有意例外,均通过道具选择进入:
PrettyCode——无论UI主题如何,固定的暗面. 代号区块运送它们自己的对比模型(GitHub/VSCode/ChatGPT Convention);与光UI相混合会生成低相接面条制作. 通过mode="light"。 。 。 .DiffViewer适应性;用途themes.github光线,themes.vsDark黑暗通过useResolvedTheme()。 。 。 .
Canvas/ SVG 组件(图, viz) 通过 useThemeColor编号 :alpha 从 @djangocfg/ui-core/styles/palette 从来没有 color-mix编号 :oklch 字符串( Canvas2D 拒绝它们) .
懒惰装入
每个工具的默认导出是 React.lazy- 包装; 初始捆绑保持小。 最重的:
美人鱼~800KB ^ 摩纳哥代码编辑器~550KB ^ 漂亮代码 (shiki)~500KB ^ OpenapiViewer~400KB ^ JsonForm~300KB ^ 音频 Player (WaveSurfer)~200KB ^ LottiePlayer~200KB → 口号编辑器 (TipTap)~200KB → 视频播放器 (media-chrome)~150KB ~JsonTree~100KB 相像编辑器~50KB~克伦斯克杜勒~15K.
工作在Next.js,Vite,Wails,CRA——没有框架锁定.
建立纪律
毕竟 src/ 变化, 运行 pnpm build 在考虑已做的改革之前——消费者起步 dist/ 通过 pnpm sync:cfg; stale (变质) dist/ 舰只的旧代码沉默地。 见 CLAUDE.md 详细情况.
pnpm build # rebuild dist/ (tsup)
pnpm check # tsc --noEmit
所需资源
- 反应 18 或 19
@djangocfg/ui-core(同声)- 尾风 CSS v4( 主机导入)
@djangocfg/ui-core/styles(中文(简体) )
许可证
麻省理工学院 - djangocfg.