yd-admin 0.1.4 → 0.1.7

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.
Files changed (6) hide show
  1. package/README.md +327 -295
  2. package/dist/chunk-pbuEa-1d.js +13 -0
  3. package/dist/index.d.ts +2037 -420
  4. package/dist/index.js +3340 -311
  5. package/dist/style.css +2068 -1484
  6. package/package.json +81 -74
package/README.md CHANGED
@@ -1,295 +1,327 @@
1
- # yd-admin
2
-
3
- 🎨 基于 Vue 3 的后台管理框架通用组件库
4
-
5
- [![npm version](https://img.shields.io/npm/v/yd-admin.svg)](https://www.npmjs.com/package/yd-admin)
6
- [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
- [![Vue 3](https://img.shields.io/badge/Vue-3.5+-green.svg)](https://vuejs.org/)
8
- [![TypeScript](https://img.shields.io/badge/TypeScript-6.0+-blue.svg)](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
1
+ # yd-admin
2
+
3
+ 🎨 基于 Vue 3 的后台管理框架通用组件库
4
+
5
+ [![npm version](https://img.shields.io/npm/v/yd-admin.svg)](https://www.npmjs.com/package/yd-admin)
6
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
7
+ [![Vue 3](https://img.shields.io/badge/Vue-3.5+-green.svg)](https://vuejs.org/)
8
+ [![TypeScript](https://img.shields.io/badge/TypeScript-6.0+-blue.svg)](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
+ | `YdColorPicker` | 颜色选择 |
78
+ | `YdTreeSelect` | 树选择 |
79
+ | `YdSwitch` | 开关 |
80
+ | `YdCheckbox` | 复选框 |
81
+ | `YdCheckboxGroup` | 复选框组 |
82
+ | `YdRadio` | 单选框 |
83
+ | `YdRadioGroup` | 单选框组 |
84
+ | `YdTag` | 标签 |
85
+ | `YdAvatar` | 头像 |
86
+ | `YdBadge` | 徽章 |
87
+ | `YdRate` | 评分 |
88
+ | `YdSlider` | 滑块 |
89
+ | `YdDatePicker` | 日期选择 |
90
+ | `YdDateRangePicker` | 日期范围选择 |
91
+ | `YdTimePicker` | 时间选择 |
92
+ | `YdCascader` | 级联选择 |
93
+ | `YdAutoComplete` | 自动完成 |
94
+ | `YdTransfer` | 穿梭框 |
95
+ | `YdUpload` | 上传 |
96
+ | `YdLogin` | 登录框 |
97
+ | `YdLoginCentered` | 居中登录框 |
98
+ | `YdCaptcha` | 验证码 |
99
+ | `YdPinInput` | PIN 输入 |
100
+
101
+ ### 表单组件 (Form)
102
+
103
+ | 组件 | 说明 |
104
+ | ------------ | -------- |
105
+ | `YdForm` | 表单容器 |
106
+ | `YdFormItem` | 表单项 |
107
+
108
+ ### 布局组件 (Layout)
109
+
110
+ | 组件 | 说明 |
111
+ | ----------- | ------------ |
112
+ | `YdLayout` | 后台管理布局 |
113
+ | `YdSpace` | 间距 |
114
+ | `YdDivider` | 分割线 |
115
+
116
+ ### 数据存储 (Stores)
117
+
118
+ | 导出 | 说明 |
119
+ | --------------------- | ---------------------------- |
120
+ | `secureStoragePlugin` | Pinia 加密存储插件 (AES-GCM) |
121
+ | `initSecureStorage` | 初始化安全存储密钥 |
122
+
123
+ **使用示例**:
124
+
125
+ ```typescript
126
+ import { createPinia } from "pinia";
127
+ import { secureStoragePlugin, initSecureStorage } from "yd-admin";
128
+
129
+ const pinia = createPinia();
130
+ pinia.use(secureStoragePlugin);
131
+
132
+ // 应用启动时初始化
133
+ await initSecureStorage();
134
+ ```
135
+
136
+ ### 数据展示 (Data Display)
137
+
138
+ | 组件 | 说明 |
139
+ | --------------------- | ------------------ |
140
+ | `YdCard` | 卡片 |
141
+ | `YdTable` | 表格（含虚拟滚动） |
142
+ | `YdProgress` | 进度条 |
143
+ | `YdStatistic` | 统计数值 |
144
+ | `YdCollapse` | 折叠面板 |
145
+ | `YdTimeline` | 时间线 |
146
+ | `YdTree` | 树形控件 |
147
+ | `YdList` | 列表 |
148
+ | `YdEmpty` | 空状态 |
149
+ | `YdImage` | 图片 |
150
+ | `YdImagePreviewGroup` | 图片预览组 |
151
+
152
+ ### 导航组件 (Navigation)
153
+
154
+ | 组件 | 说明 |
155
+ | -------------- | -------- |
156
+ | `YdMenu` | 菜单 |
157
+ | `YdTabs` | 标签页 |
158
+ | `YdBreadcrumb` | 面包屑 |
159
+ | `YdPagination` | 分页 |
160
+ | `YdDropdown` | 下拉菜单 |
161
+ | `YdSteps` | 步骤条 |
162
+ | `YdAnchor` | 锚点 |
163
+
164
+ ### 反馈组件 (Feedback)
165
+
166
+ | 组件 | 说明 |
167
+ | --------------- | ---------- |
168
+ | `YdModal` | 对话框 |
169
+ | `YdDrawer` | 抽屉 |
170
+ | `Message` | 消息提示 |
171
+ | `Notification` | 通知提醒 |
172
+ | `YdTooltip` | 文字提示 |
173
+ | `YdSpin` | 加载中 |
174
+ | `YdSkeleton` | 骨架屏 |
175
+ | `YdPopconfirm` | 气泡确认框 |
176
+ | `YdResult` | 结果页 |
177
+ | `YdContextMenu` | 右键菜单 |
178
+
179
+ ### 配置组件 (Config)
180
+
181
+ | 组件 | 说明 |
182
+ | ------------------ | -------- |
183
+ | `YdConfigProvider` | 全局配置 |
184
+
185
+ ## 🎨 主题定制
186
+
187
+ 组件库使用 CSS 变量构建，支持全局主题覆盖：
188
+
189
+ ```css
190
+ :root {
191
+ --yd-color-primary: #1890ff;
192
+ --yd-border-radius: 4px;
193
+ /* 更多变量见 tokens.css */
194
+ }
195
+ ```
196
+
197
+ 或使用 `YdConfigProvider`：
198
+
199
+ ```vue
200
+ <template>
201
+ <YdConfigProvider :theme="darkTheme">
202
+ <App />
203
+ </YdConfigProvider>
204
+ </template>
205
+ ```
206
+
207
+ ## 🛠️ 工具函数
208
+
209
+ ```typescript
210
+ import { cn, debounce, throttle, generateId, deepClone } from "yd-admin";
211
+
212
+ // 合并 class
213
+ const classes = cn("base-class", condition && "conditional-class");
214
+
215
+ // 防抖
216
+ const debouncedFn = debounce(() => console.log("debounced"), 300);
217
+
218
+ // 节流
219
+ const throttledFn = throttle(() => console.log("throttled"), 100);
220
+
221
+ // 生成唯一 ID
222
+ const id = generateId("prefix");
223
+
224
+ // 深拷贝
225
+ const cloned = deepClone(obj);
226
+ ```
227
+
228
+ ## 📐 组件尺寸
229
+
230
+ 所有组件支持统一尺寸配置：
231
+
232
+ | 尺寸 | 说明 |
233
+ | ---- | ---------- |
234
+ | `xs` | 超小 |
235
+ | `sm` | 小 |
236
+ | `md` | 中（默认） |
237
+ | `lg` | 大 |
238
+ | `xl` | 特大 |
239
+
240
+ ## 🌐 开发
241
+
242
+ ### 环境要求
243
+
244
+ - Node.js >= 18
245
+ - pnpm >= 9
246
+
247
+ ### 安装依赖
248
+
249
+ ```bash
250
+ pnpm install
251
+ # 或使用 Vite+
252
+ vp install
253
+ ```
254
+
255
+ ### 开发预览
256
+
257
+ ```bash
258
+ # 启动 Demo
259
+ pnpm demo
260
+ # 或
261
+ vp dev
262
+
263
+ # 监视模式构建
264
+ pnpm dev
265
+ ```
266
+
267
+ ### 代码检查
268
+
269
+ ```bash
270
+ # 类型检查和格式化检查
271
+ pnpm check
272
+ # 或
273
+ vp check
274
+
275
+ # Lint 检查
276
+ pnpm lint
277
+ # 或
278
+ vp lint
279
+
280
+ # 格式化修复
281
+ pnpm check --fix
282
+ # 或
283
+ vp fmt
284
+ ```
285
+
286
+ ### 构建发布
287
+
288
+ ```bash
289
+ pnpm build
290
+ # 或
291
+ vp build
292
+ ```
293
+
294
+ ### 运行测试
295
+
296
+ ```bash
297
+ pnpm test
298
+ # 或
299
+ vp test
300
+ ```
301
+
302
+ ## ✅ 代码质量状态
303
+
304
+ 项目已通过以下检查：
305
+
306
+ - ✅ TypeScript 类型检查
307
+ - ✅ ESLint 代码检查
308
+ - ✅ 格式化检查
309
+ - ✅ 100 个单元测试全部通过
310
+
311
+ ## 📊 Bundle 信息
312
+
313
+ | 文件 | 大小 | Gzip |
314
+ | -------------- | ----------- | ---------- |
315
+ | dist/index.js | ~472 KB | ~89 KB |
316
+ | dist/style.css | ~182 KB | ~23 KB |
317
+ | **总计** | **~800 KB** | **~136 KB** |
318
+
319
+ ## 🔗 相关链接
320
+
321
+ - [Vue 3 文档](https://vuejs.org/)
322
+ - [Vite+ 文档](https://vite-plus._voidzero.dev/)
323
+ - [AsyncValidator](https://github.com/yiminghe/async-validator)
324
+
325
+ ## 📄 License
326
+
327
+ MIT
package/dist/chunk-pbuEa-1d.js ADDED
@@ -0,0 +1,13 @@
1
+ //#region \0rolldown/runtime.js
2
+ var __defProp = Object.defineProperty;
3
+ var __exportAll = (all, no_symbols) => {
4
+ let target = {};
5
+ for (var name in all) __defProp(target, name, {
6
+ get: all[name],
7
+ enumerable: true
8
+ });
9
+ if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
10
+ return target;
11
+ };
12
+ //#endregion
13
+ export { __exportAll as t };