lvetech-ui-lib 1.0.0

package/README.md

@@ -0,0 +1,242 @@
+# 🎨 Micro UI 组件库
+
+一个现代化的 React UI 组件库，基于 Tailwind CSS，支持可视化设计编辑器。
+
+## ✨ 特性
+
+- 🧩 **丰富的组件** - 包含 20+ 精心设计的 UI 组件
+- 🎨 **可视化设计器** - 拖拽式组件编排，实时预览，一键导出代码
+- 📦 **模板系统** - 预设多种常用模板，快速开始设计
+- 💻 **代码编辑器** - 内置代码编辑器，支持自定义组件开发
+- 🔄 **撤销/重做** - 完整的历史记录功能
+- 📱 **响应式** - 所有组件支持响应式设计
+- 🌈 **主题定制** - 灵活的主题系统
+
+## 📦 安装
+
+```bash
+# npm
+npm install @lvetech/ui-lib
+
+# pnpm
+pnpm add @lvetech/ui-lib
+
+# yarn
+yarn add @lvetech/ui-lib
+```
+
+## 🚀 快速开始
+
+### 使用组件
+
+```tsx
+import { Button, Card, Input, Alert } from '@lvetech/ui-lib'
+
+function App() {
+  return (
+    <Card title="欢迎" variant="elevated">
+      <Input label="用户名" placeholder="请输入用户名" />
+      <Button variant="primary">登录</Button>
+    </Card>
+  )
+}
+```
+
+### 使用可视化设计器
+
+```tsx
+import { ComponentDesigner } from '@lvetech/ui-lib'
+
+function DesignerPage() {
+  return (
+    <ComponentDesigner
+      height="100vh"
+      onChange={(nodes) => console.log('设计更新:', nodes)}
+      onExport={(code) => console.log('导出代码:', code)}
+    />
+  )
+}
+```
+
+## 🎨 可视化设计器
+
+设计器提供了强大的可视化界面设计能力：
+
+### 功能特点
+
+| 功能 | 描述 |
+|------|------|
+| 🧩 组件面板 | 拖拽添加 10+ 种组件 |
+| 📦 模板系统 | 15+ 预设模板快速开始 |
+| ✨ 自定义代码 | 内置代码编辑器 |
+| ⚙️ 属性编辑 | 可视化配置组件属性 |
+| 🔄 撤销/重做 | 支持 50 步历史记录 |
+| 📋 导入/导出 | JSON 格式导入导出设计 |
+| 💻 代码生成 | 一键导出 React 代码 |
+
+### 视图模式
+
+- **设计模式** - 拖拽编排组件
+- **代码模式** - 编写自定义代码
+- **分屏模式** - 同时查看设计和代码
+
+### 预设模板
+
+| 分类 | 模板 |
+|------|------|
+| 📋 表单 | 登录表单、注册表单、联系表单 |
+| 🃏 卡片 | 用户卡片、产品卡片、统计卡片 |
+| 💬 反馈 | 成功提示、错误提示、加载状态 |
+| 📐 布局 | 操作栏、设置区块 |
+| 📄 页面 | 首页头部、定价卡片 |
+
+## 🧩 组件列表
+
+### 基础组件
+- `Button` - 按钮
+- `Input` - 输入框
+- `Card` - 卡片
+
+### 表单组件
+- `Select` - 选择器
+- `Checkbox` - 复选框
+- `Switch` - 开关
+- `Radio` / `RadioGroup` - 单选框
+- `Textarea` - 文本域
+
+### 反馈组件
+- `Toast` / `ToastProvider` - 轻提示
+- `Alert` - 警告提示
+- `Progress` - 进度条
+- `Skeleton` - 骨架屏
+- `Spinner` - 加载动画
+
+### 布局组件
+- `Flex` - 弹性布局
+- `Grid` / `GridItem` - 网格布局
+- `Container` - 容器
+- `Space` - 间距
+- `Divider` - 分割线
+
+### 数据展示
+- `Avatar` / `AvatarGroup` - 头像
+- `Badge` / `BadgeWrapper` - 徽标
+- `Tag` - 标签
+- `Tabs` - 标签页
+- `Tooltip` - 文字提示
+
+## 💻 代码编辑器
+
+独立使用代码编辑器组件：
+
+```tsx
+import { CodeEditor } from '@lvetech/ui-lib'
+
+function MyEditor() {
+  const [code, setCode] = useState('')
+  
+  return (
+    <CodeEditor
+      value={code}
+      onChange={setCode}
+      language="tsx"
+      theme="dark"
+      height={400}
+      showLineNumbers
+    />
+  )
+}
+```
+
+### CodeEditor Props
+
+| 属性 | 类型 | 默认值 | 描述 |
+|------|------|--------|------|
+| value | string | - | 代码内容 |
+| onChange | (value: string) => void | - | 内容变化回调 |
+| language | 'tsx' \| 'jsx' \| 'css' \| 'json' | 'tsx' | 语言类型 |
+| theme | 'dark' \| 'light' | 'dark' | 主题 |
+| readOnly | boolean | false | 是否只读 |
+| height | string \| number | 300 | 高度 |
+| showLineNumbers | boolean | true | 显示行号 |
+
+## 🔧 Hooks
+
+### useDesignerHistory
+
+管理设计器历史记录：
+
+```tsx
+import { useDesignerHistory } from '@lvetech/ui-lib'
+
+function MyDesigner() {
+  const {
+    nodes,
+    setNodes,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+  } = useDesignerHistory([])
+  
+  // ...
+}
+```
+
+## 📖 更多示例
+
+### 登录表单
+
+```tsx
+import { Card, Input, Button, Checkbox } from '@lvetech/ui-lib'
+
+function LoginForm() {
+  return (
+    <Card title="用户登录" variant="elevated" className="max-w-md mx-auto">
+      <div className="space-y-4">
+        <Input label="用户名" placeholder="请输入用户名" required />
+        <Input label="密码" placeholder="请输入密码" required />
+        <Checkbox label="记住我" />
+        <Button variant="primary" fullWidth>登录</Button>
+      </div>
+    </Card>
+  )
+}
+```
+
+### 统计仪表盘
+
+```tsx
+import { Card, Progress, Tag, Flex } from '@lvetech/ui-lib'
+
+function Dashboard() {
+  return (
+    <Flex gap={4}>
+      <Card title="销售额" variant="glass">
+        <div className="text-3xl font-bold">¥128,430</div>
+        <Tag color="emerald" variant="soft">+12.5%</Tag>
+        <Progress value={75} color="gradient" />
+      </Card>
+      
+      <Card title="订单数" variant="glass">
+        <div className="text-3xl font-bold">1,234</div>
+        <Tag color="cyan" variant="soft">+8.2%</Tag>
+        <Progress value={60} color="cyan" />
+      </Card>
+    </Flex>
+  )
+}
+```
+
+## 🎯 路线图
+
+- [ ] 更多组件（Table、Tree、Drawer）
+- [ ] 拖拽排序
+- [ ] 组件嵌套
+- [ ] 自定义主题编辑器
+- [ ] 组件市场
+- [ ] 协作设计
+
+## 📄 许可证
+
+MIT License