zljs——反应组件库
一个开源,TypeScript React组件库,用于企业网络应用(Next.js,Tailwind CSS v4),外加一个生成UI屏幕的AI代理.
软件包
| 软件包 | 说明 | 链接 |
|---|---|---|
core/ | 组件库——按钮、 DataGrid、 Forms、 Modal 等 | 故事书 |
agent/ | 生成 UI 屏幕的AI 代理( HTML + Tailwind CSS) | 读取 |
AI 路线图
检查过的项目今天存在;未检查的项目是计划中的,没有执行.
- 对话的 UI 生成( Name
agent/(中文(简体) ) - AI-Powered测试自动化(通过zl-质基特)
- 情报部门的建议
- 预测质量门
- 通过AI的可获取性验证
安装
pnpm add @alexandregme/zljs
同伴依赖性 : react@19, (中文(简体) ), react-dom@19, (中文(简体) ), next@>=16, (中文(简体) ), @reduxjs/toolkit@2, (中文(简体) ), react-redux@9。 。 。 .
一次导入全局样式( 如在根版式中) 。 它已经告诉Tailwind CSS v4 扫描图书馆的课,所以没有 @source 需要:
/* app/globals.css */
@import "tailwindcss";
@import "@alexandregme/zljs/styles.css";
import { Button } from "@alexandregme/zljs";
import { RootLayout } from "@alexandregme/zljs/next";
import { FormProvider, FormInput } from "@alexandregme/zljs/rhf";
<Button onClick={handleClick}>Submit</Button>;
颜色
组件工作时没有设置,使用默认颜色. 要使用自己的, 导入样式后重新定义您想要的值 :
@import "tailwindcss";
@import "@alexandregme/zljs/styles.css";
@theme {
--color-zl-primary: #2e7d32;
}
primary, (中文(简体) ), success, (中文(简体) ), danger, (中文(简体) ), warning, (中文(简体) ), info 财务报告和审定财务报表 muted 每个都取一个值(--color-zl-<color>),用于文本和重点大纲。 其他人跟着它, 你可以重新定义他们:
| 数值 | 用于 | 默认 |
|---|---|---|
--color-zl-<color>-strong | 链接徘徊和标签文本 | 30%更暗 |
--color-zl-<color>-bg | 按钮背景 | 颜色本身( E)warning数字 : yellow-500(中文(简体) ) |
--color-zl-<color>-hover | 按钮徘徊 | 背景 15% 更暗 |
--color-zl-<color>-on | 背景文字 | 白色( R)warning数字 : gray-900(中文(简体) ) |
A 类 Tag 还取了辅助颜色 orange, (中文(简体) ), pink 财务报告和审定财务报表 purple,它们本身没有意义:用它们来区分类别。 每个只有 --color-zl-<color> 财务报告和审定财务报表 --color-zl-<color>-strong第一个,15%,是 Tag 背景,第二个是其文本.
仅检查默认值对比值 。 请检查access-date=中的日期值 (帮助) 4.5: 1 文本, 打开 --color-zl-<color> 反页并开 -on 反对 -bg,重点大纲为3:1。 嵌入元素上设定的值不能达到其产生的值,所以设置在 @theme 或者说 :root。 。 。 .
更新
见 CHANGELOG.md,在 保留更改日志 格式。 需要应用中动作的改变有: 移徙 记着,写着一个特工可以跟着它 带包裹的文件船,在 node_modules/@alexandregme/zljs/CHANGELOG.md。 。 。 .
开始
pnpm install
pnpm storybook # Component library docs
pnpm agent:dev # AI agent
pnpm test # Run tests
技术堆栈
TypeScript, React 19, Tailwind CSS v4, Story Book 10, Radix UI, pnpm 工作空间, GitHub 动作, Vercel
许可证
麻省理工学院