yd-admin 0.1.4
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 +295 -0
- package/dist/index.d.ts +2971 -0
- package/dist/index.js +10559 -0
- package/dist/style.css +6138 -0
- package/package.json +75 -0
package/README.md
ADDED
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
# yd-admin
|
|
2
|
+
|
|
3
|
+
🎨 基于 Vue 3 的后台管理框架通用组件库
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/yd-admin)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
[](https://vuejs.org/)
|
|
8
|
+
[](https://www.typescriptlang.org/)
|
|
9
|
+
|
|
10
|
+
## ✨ 特性
|
|
11
|
+
|
|
12
|
+
- 📦 **轻量高效** - Tree-shaking 支持，按需引入
|
|
13
|
+
- 🎯 **类型安全** - 完整的 TypeScript 类型定义
|
|
14
|
+
- 🎨 **主题定制** - CSS 变量设计，支持暗色模式
|
|
15
|
+
- ⚡ **性能优化** - 虚拟滚动、防抖节流、位置缓存
|
|
16
|
+
- 🔌 **即插即用** - 零配置，简单 API
|
|
17
|
+
|
|
18
|
+
## 📦 安装
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
pnpm add yd-admin
|
|
22
|
+
# 或
|
|
23
|
+
npm install yd-admin
|
|
24
|
+
# 或
|
|
25
|
+
yarn add yd-admin
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## 🚀 快速开始
|
|
29
|
+
|
|
30
|
+
### 完整引入
|
|
31
|
+
|
|
32
|
+
```typescript
|
|
33
|
+
import { createApp } from "vue";
|
|
34
|
+
import YdAdmin from "yd-admin";
|
|
35
|
+
import "yd-admin/style.css"; // 引入样式
|
|
36
|
+
import App from "./App.vue";
|
|
37
|
+
|
|
38
|
+
const app = createApp(App);
|
|
39
|
+
app.use(YdAdmin);
|
|
40
|
+
app.mount("#app");
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### 按需引入
|
|
44
|
+
|
|
45
|
+
```typescript
|
|
46
|
+
import { YdButton, YdInput, YdSelect } from "yd-admin";
|
|
47
|
+
import "yd-admin/style.css";
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Vite 配置（自动导入）
|
|
51
|
+
|
|
52
|
+
```typescript
|
|
53
|
+
// vite.config.ts
|
|
54
|
+
import Components from "unplugin-vue-components/vite";
|
|
55
|
+
import { YdAdminResolver } from "yd-admin/resolver";
|
|
56
|
+
|
|
57
|
+
export default {
|
|
58
|
+
plugins: [
|
|
59
|
+
Components({
|
|
60
|
+
resolvers: [YdAdminResolver()],
|
|
61
|
+
}),
|
|
62
|
+
],
|
|
63
|
+
};
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## 📚 组件列表
|
|
67
|
+
|
|
68
|
+
### 基础组件 (Base)
|
|
69
|
+
|
|
70
|
+
| 组件 | 说明 |
|
|
71
|
+
| ------------------- | ------------ |
|
|
72
|
+
| `YdButton` | 按钮 |
|
|
73
|
+
| `YdInput` | 输入框 |
|
|
74
|
+
| `YdTextarea` | 多行文本 |
|
|
75
|
+
| `YdInputNumber` | 数字输入 |
|
|
76
|
+
| `YdSelect` | 选择器 |
|
|
77
|
+
| `YdSwitch` | 开关 |
|
|
78
|
+
| `YdCheckbox` | 复选框 |
|
|
79
|
+
| `YdCheckboxGroup` | 复选框组 |
|
|
80
|
+
| `YdRadio` | 单选框 |
|
|
81
|
+
| `YdRadioGroup` | 单选框组 |
|
|
82
|
+
| `YdTag` | 标签 |
|
|
83
|
+
| `YdAvatar` | 头像 |
|
|
84
|
+
| `YdBadge` | 徽章 |
|
|
85
|
+
| `YdRate` | 评分 |
|
|
86
|
+
| `YdSlider` | 滑块 |
|
|
87
|
+
| `YdDatePicker` | 日期选择 |
|
|
88
|
+
| `YdDateRangePicker` | 日期范围选择 |
|
|
89
|
+
| `YdTimePicker` | 时间选择 |
|
|
90
|
+
| `YdCascader` | 级联选择 |
|
|
91
|
+
| `YdAutoComplete` | 自动完成 |
|
|
92
|
+
| `YdTransfer` | 穿梭框 |
|
|
93
|
+
| `YdUpload` | 上传 |
|
|
94
|
+
| `YdLogin` | 登录框 |
|
|
95
|
+
| `YdLoginCentered` | 居中登录框 |
|
|
96
|
+
| `YdCaptcha` | 验证码 |
|
|
97
|
+
| `YdPinInput` | PIN 输入 |
|
|
98
|
+
|
|
99
|
+
### 表单组件 (Form)
|
|
100
|
+
|
|
101
|
+
| 组件 | 说明 |
|
|
102
|
+
| ------------ | -------- |
|
|
103
|
+
| `YdForm` | 表单容器 |
|
|
104
|
+
| `YdFormItem` | 表单项 |
|
|
105
|
+
|
|
106
|
+
### 布局组件 (Layout)
|
|
107
|
+
|
|
108
|
+
| 组件 | 说明 |
|
|
109
|
+
| ----------- | ------------ |
|
|
110
|
+
| `YdLayout` | 后台管理布局 |
|
|
111
|
+
| `YdSpace` | 间距 |
|
|
112
|
+
| `YdDivider` | 分割线 |
|
|
113
|
+
|
|
114
|
+
### 数据存储 (Stores)
|
|
115
|
+
|
|
116
|
+
| 导出 | 说明 |
|
|
117
|
+
| --------------------- | ------------------ |
|
|
118
|
+
| `secureStoragePlugin` | Pinia 加密存储插件 |
|
|
119
|
+
| `initSecureStorage` | 初始化安全存储密钥 |
|
|
120
|
+
|
|
121
|
+
**使用示例**:
|
|
122
|
+
|
|
123
|
+
```typescript
|
|
124
|
+
import { createPinia } from "pinia";
|
|
125
|
+
import { secureStoragePlugin, initSecureStorage } from "yd-admin";
|
|
126
|
+
|
|
127
|
+
const pinia = createPinia();
|
|
128
|
+
pinia.use(secureStoragePlugin);
|
|
129
|
+
|
|
130
|
+
// 应用启动时初始化
|
|
131
|
+
await initSecureStorage();
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
### 数据展示 (Data Display)
|
|
135
|
+
|
|
136
|
+
| 组件 | 说明 |
|
|
137
|
+
| --------------------- | ------------------ |
|
|
138
|
+
| `YdCard` | 卡片 |
|
|
139
|
+
| `YdTable` | 表格（含虚拟滚动） |
|
|
140
|
+
| `YdProgress` | 进度条 |
|
|
141
|
+
| `YdStatistic` | 统计数值 |
|
|
142
|
+
| `YdCollapse` | 折叠面板 |
|
|
143
|
+
| `YdTimeline` | 时间线 |
|
|
144
|
+
| `YdTree` | 树形控件 |
|
|
145
|
+
| `YdList` | 列表 |
|
|
146
|
+
| `YdEmpty` | 空状态 |
|
|
147
|
+
| `YdImage` | 图片 |
|
|
148
|
+
| `YdImagePreviewGroup` | 图片预览组 |
|
|
149
|
+
|
|
150
|
+
### 导航组件 (Navigation)
|
|
151
|
+
|
|
152
|
+
| 组件 | 说明 |
|
|
153
|
+
| -------------- | -------- |
|
|
154
|
+
| `YdMenu` | 菜单 |
|
|
155
|
+
| `YdTabs` | 标签页 |
|
|
156
|
+
| `YdBreadcrumb` | 面包屑 |
|
|
157
|
+
| `YdPagination` | 分页 |
|
|
158
|
+
| `YdDropdown` | 下拉菜单 |
|
|
159
|
+
| `YdSteps` | 步骤条 |
|
|
160
|
+
| `YdAnchor` | 锚点 |
|
|
161
|
+
|
|
162
|
+
### 反馈组件 (Feedback)
|
|
163
|
+
|
|
164
|
+
| 组件 | 说明 |
|
|
165
|
+
| --------------- | ---------- |
|
|
166
|
+
| `YdModal` | 对话框 |
|
|
167
|
+
| `YdDrawer` | 抽屉 |
|
|
168
|
+
| `Message` | 消息提示 |
|
|
169
|
+
| `Notification` | 通知提醒 |
|
|
170
|
+
| `YdTooltip` | 文字提示 |
|
|
171
|
+
| `YdSpin` | 加载中 |
|
|
172
|
+
| `YdSkeleton` | 骨架屏 |
|
|
173
|
+
| `YdPopconfirm` | 气泡确认框 |
|
|
174
|
+
| `YdResult` | 结果页 |
|
|
175
|
+
| `YdContextMenu` | 右键菜单 |
|
|
176
|
+
|
|
177
|
+
### 配置组件 (Config)
|
|
178
|
+
|
|
179
|
+
| 组件 | 说明 |
|
|
180
|
+
| ------------------ | -------- |
|
|
181
|
+
| `YdConfigProvider` | 全局配置 |
|
|
182
|
+
|
|
183
|
+
## 🎨 主题定制
|
|
184
|
+
|
|
185
|
+
组件库使用 CSS 变量构建，支持全局主题覆盖：
|
|
186
|
+
|
|
187
|
+
```css
|
|
188
|
+
:root {
|
|
189
|
+
--yd-color-primary: #1890ff;
|
|
190
|
+
--yd-border-radius: 4px;
|
|
191
|
+
/* 更多变量见 tokens.css */
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
或使用 `YdConfigProvider`：
|
|
196
|
+
|
|
197
|
+
```vue
|
|
198
|
+
<template>
|
|
199
|
+
<YdConfigProvider :theme="darkTheme">
|
|
200
|
+
<App />
|
|
201
|
+
</YdConfigProvider>
|
|
202
|
+
</template>
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
## 🛠️ 工具函数
|
|
206
|
+
|
|
207
|
+
```typescript
|
|
208
|
+
import { cn, debounce, throttle, generateId, deepClone } from "yd-admin";
|
|
209
|
+
|
|
210
|
+
// 合并 class
|
|
211
|
+
const classes = cn("base-class", condition && "conditional-class");
|
|
212
|
+
|
|
213
|
+
// 防抖
|
|
214
|
+
const debouncedFn = debounce(() => console.log("debounced"), 300);
|
|
215
|
+
|
|
216
|
+
// 节流
|
|
217
|
+
const throttledFn = throttle(() => console.log("throttled"), 100);
|
|
218
|
+
|
|
219
|
+
// 生成唯一 ID
|
|
220
|
+
const id = generateId("prefix");
|
|
221
|
+
|
|
222
|
+
// 深拷贝
|
|
223
|
+
const cloned = deepClone(obj);
|
|
224
|
+
```
|
|
225
|
+
|
|
226
|
+
## 📐 组件尺寸
|
|
227
|
+
|
|
228
|
+
所有组件支持统一尺寸配置：
|
|
229
|
+
|
|
230
|
+
| 尺寸 | 说明 |
|
|
231
|
+
| ---- | ---------- |
|
|
232
|
+
| `xs` | 超小 |
|
|
233
|
+
| `sm` | 小 |
|
|
234
|
+
| `md` | 中（默认） |
|
|
235
|
+
| `lg` | 大 |
|
|
236
|
+
| `xl` | 特大 |
|
|
237
|
+
|
|
238
|
+
## 🌐 开发
|
|
239
|
+
|
|
240
|
+
### 环境要求
|
|
241
|
+
|
|
242
|
+
- Node.js >= 18
|
|
243
|
+
- pnpm >= 9
|
|
244
|
+
|
|
245
|
+
### 安装依赖
|
|
246
|
+
|
|
247
|
+
```bash
|
|
248
|
+
pnpm install
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
### 开发预览
|
|
252
|
+
|
|
253
|
+
```bash
|
|
254
|
+
# 启动 Demo
|
|
255
|
+
pnpm demo
|
|
256
|
+
|
|
257
|
+
# 或监视模式构建
|
|
258
|
+
pnpm dev
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
### 代码检查
|
|
262
|
+
|
|
263
|
+
```bash
|
|
264
|
+
pnpm check
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
### 构建发布
|
|
268
|
+
|
|
269
|
+
```bash
|
|
270
|
+
pnpm build
|
|
271
|
+
```
|
|
272
|
+
|
|
273
|
+
### 运行测试
|
|
274
|
+
|
|
275
|
+
```bash
|
|
276
|
+
pnpm test
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
## 📊 Bundle 信息
|
|
280
|
+
|
|
281
|
+
| 文件 | 大小 | Gzip |
|
|
282
|
+
| -------------- | ----------- | ---------- |
|
|
283
|
+
| dist/index.js | ~293 KB | ~50 KB |
|
|
284
|
+
| dist/style.css | ~121 KB | ~14 KB |
|
|
285
|
+
| **总计** | **~499 KB** | **~78 KB** |
|
|
286
|
+
|
|
287
|
+
## 🔗 相关链接
|
|
288
|
+
|
|
289
|
+
- [Vue 3 文档](https://vuejs.org/)
|
|
290
|
+
- [Vite+ 文档](https://vite-plus._voidzero.dev/)
|
|
291
|
+
- [AsyncValidator](https://github.com/yiminghe/async-validator)
|
|
292
|
+
|
|
293
|
+
## 📄 License
|
|
294
|
+
|
|
295
|
+
MIT
|