aha-components 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -188
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,7 +25,7 @@ pnpm add aha-components
|
|
|
25
25
|
|
|
26
26
|
```tsx
|
|
27
27
|
import React from 'react';
|
|
28
|
-
import { Button,
|
|
28
|
+
import { Button, Alert } from 'aha-components';
|
|
29
29
|
|
|
30
30
|
function App() {
|
|
31
31
|
return (
|
|
@@ -34,106 +34,11 @@ function App() {
|
|
|
34
34
|
点击我
|
|
35
35
|
</Button>
|
|
36
36
|
|
|
37
|
-
<
|
|
38
|
-
|
|
39
|
-
<Card title="卡片标题" subtitle="副标题">
|
|
40
|
-
卡片内容
|
|
41
|
-
</Card>
|
|
42
|
-
|
|
43
|
-
<Alert type="success">
|
|
44
|
-
操作成功！
|
|
45
|
-
</Alert>
|
|
37
|
+
<Alert type="success" title="title" description="description" />
|
|
46
38
|
</div>
|
|
47
39
|
);
|
|
48
40
|
}
|
|
49
41
|
```
|
|
50
|
-
|
|
51
|
-
## 🎨 组件
|
|
52
|
-
|
|
53
|
-
### Button 按钮
|
|
54
|
-
|
|
55
|
-
```tsx
|
|
56
|
-
import { Button } from 'aha-components';
|
|
57
|
-
|
|
58
|
-
// 基础用法
|
|
59
|
-
<Button>默认按钮</Button>
|
|
60
|
-
|
|
61
|
-
// 不同样式
|
|
62
|
-
<Button variant="primary">主要按钮</Button>
|
|
63
|
-
<Button variant="secondary">次要按钮</Button>
|
|
64
|
-
<Button variant="outline">轮廓按钮</Button>
|
|
65
|
-
|
|
66
|
-
// 不同尺寸
|
|
67
|
-
<Button size="small">小按钮</Button>
|
|
68
|
-
<Button size="medium">中按钮</Button>
|
|
69
|
-
<Button size="large">大按钮</Button>
|
|
70
|
-
|
|
71
|
-
// 禁用状态
|
|
72
|
-
<Button disabled>禁用按钮</Button>
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
### Input 输入框
|
|
76
|
-
|
|
77
|
-
```tsx
|
|
78
|
-
import { Input } from 'aha-components';
|
|
79
|
-
|
|
80
|
-
// 基础用法
|
|
81
|
-
<Input placeholder="请输入..." />
|
|
82
|
-
|
|
83
|
-
// 不同类型
|
|
84
|
-
<Input type="text" placeholder="文本输入" />
|
|
85
|
-
<Input type="password" placeholder="密码输入" />
|
|
86
|
-
<Input type="email" placeholder="邮箱输入" />
|
|
87
|
-
<Input type="number" placeholder="数字输入" />
|
|
88
|
-
|
|
89
|
-
// 不同尺寸
|
|
90
|
-
<Input size="small" placeholder="小尺寸" />
|
|
91
|
-
<Input size="medium" placeholder="中尺寸" />
|
|
92
|
-
<Input size="large" placeholder="大尺寸" />
|
|
93
|
-
|
|
94
|
-
// 禁用状态
|
|
95
|
-
<Input disabled placeholder="禁用状态" />
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
### Card 卡片
|
|
99
|
-
|
|
100
|
-
```tsx
|
|
101
|
-
import { Card } from 'aha-components';
|
|
102
|
-
|
|
103
|
-
// 基础用法
|
|
104
|
-
<Card>卡片内容</Card>
|
|
105
|
-
|
|
106
|
-
// 带标题
|
|
107
|
-
<Card title="卡片标题">卡片内容</Card>
|
|
108
|
-
|
|
109
|
-
// 带副标题
|
|
110
|
-
<Card title="卡片标题" subtitle="副标题">
|
|
111
|
-
卡片内容
|
|
112
|
-
</Card>
|
|
113
|
-
|
|
114
|
-
// 可点击
|
|
115
|
-
<Card onClick={() => alert('卡片被点击了！')}>
|
|
116
|
-
可点击的卡片
|
|
117
|
-
</Card>
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
### Alert 提示
|
|
121
|
-
|
|
122
|
-
```tsx
|
|
123
|
-
import { Alert } from 'aha-components';
|
|
124
|
-
|
|
125
|
-
// 不同类型
|
|
126
|
-
<Alert type="info">信息提示</Alert>
|
|
127
|
-
<Alert type="success">成功提示</Alert>
|
|
128
|
-
<Alert type="warning">警告提示</Alert>
|
|
129
|
-
<Alert type="error">错误提示</Alert>
|
|
130
|
-
|
|
131
|
-
// 自定义样式
|
|
132
|
-
<Alert type="info" className="border-2 border-blue-300">
|
|
133
|
-
自定义样式提示
|
|
134
|
-
</Alert>
|
|
135
|
-
```
|
|
136
|
-
|
|
137
42
|
## 📚 按需加载
|
|
138
43
|
|
|
139
44
|
### 方法一：使用 ES6 导入（推荐）
|
|
@@ -166,104 +71,14 @@ interface ButtonProps {
|
|
|
166
71
|
}
|
|
167
72
|
```
|
|
168
73
|
|
|
169
|
-
## 🛠️ 开发
|
|
170
|
-
|
|
171
|
-
### 安装依赖
|
|
172
|
-
|
|
173
|
-
```bash
|
|
174
|
-
npm install
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
### 启动开发服务器
|
|
178
|
-
|
|
179
|
-
```bash
|
|
180
|
-
# 启动 Storybook
|
|
181
|
-
npm run storybook
|
|
182
|
-
|
|
183
|
-
# 启动示例应用
|
|
184
|
-
npm run dev:example
|
|
185
|
-
|
|
186
|
-
# 启动构建监听
|
|
187
|
-
npm run dev
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
### 构建
|
|
191
|
-
|
|
192
|
-
```bash
|
|
193
|
-
# 构建组件库
|
|
194
|
-
npm run build
|
|
195
|
-
|
|
196
|
-
# 构建 Storybook
|
|
197
|
-
npm run build-storybook
|
|
198
|
-
|
|
199
|
-
# 构建示例应用
|
|
200
|
-
npm run build:example
|
|
201
|
-
```
|
|
202
|
-
|
|
203
|
-
### 测试
|
|
204
|
-
|
|
205
|
-
```bash
|
|
206
|
-
# 运行测试
|
|
207
|
-
npm test
|
|
208
|
-
|
|
209
|
-
# 监听模式
|
|
210
|
-
npm run test:watch
|
|
211
|
-
|
|
212
|
-
# 类型检查
|
|
213
|
-
npm run type-check
|
|
214
|
-
|
|
215
|
-
# 代码检查
|
|
216
|
-
npm run lint
|
|
217
|
-
```
|
|
218
|
-
|
|
219
|
-
### 生成组件
|
|
220
|
-
|
|
221
|
-
```bash
|
|
222
|
-
# 基础组件生成
|
|
223
|
-
npm run generate
|
|
224
|
-
|
|
225
|
-
# 高级组件生成
|
|
226
|
-
npm run generate:advanced
|
|
227
|
-
```
|
|
228
|
-
|
|
229
74
|
## 📖 文档
|
|
230
75
|
|
|
231
|
-
- [组件文档](https://
|
|
232
|
-
- [Storybook](http://localhost:6006) - 本地开发文档
|
|
233
|
-
|
|
234
|
-
## 🤝 贡献
|
|
235
|
-
|
|
236
|
-
1. Fork 本仓库
|
|
237
|
-
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
|
|
238
|
-
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
|
239
|
-
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
|
240
|
-
5. 打开 Pull Request
|
|
76
|
+
- [组件文档](https://aha-components-docs.netlify.app) - 完整的组件文档和示例
|
|
241
77
|
|
|
242
78
|
## 📝 许可证
|
|
243
79
|
|
|
244
80
|
本项目基于 MIT 许可证开源 - 查看 [LICENSE](LICENSE) 文件了解详情。
|
|
245
81
|
|
|
246
|
-
## 🆘 支持
|
|
247
|
-
|
|
248
|
-
如果您遇到问题或有建议，请：
|
|
249
|
-
|
|
250
|
-
1. 查看 [Issues](https://github.com/yourusername/aha-components/issues)
|
|
251
|
-
2. 创建新的 Issue
|
|
252
|
-
3. 联系维护者
|
|
253
|
-
|
|
254
|
-
## 📦 发布
|
|
255
|
-
|
|
256
|
-
```bash
|
|
257
|
-
# 发布到 npm
|
|
258
|
-
npm run release
|
|
259
|
-
|
|
260
|
-
# 构建文档
|
|
261
|
-
npm run docs:build
|
|
262
|
-
|
|
263
|
-
# 部署文档到 GitHub Pages
|
|
264
|
-
npm run docs:deploy
|
|
265
|
-
```
|
|
266
|
-
|
|
267
82
|
## 🔄 更新日志
|
|
268
83
|
|
|
269
84
|
查看 [CHANGELOG.md](CHANGELOG.md) 了解版本更新历史。
|