yd-admin 0.1.7 → 0.1.8

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 CHANGED
@@ -1,327 +1,372 @@
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
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
+ vp add yd-admin
22
+ ```
23
+
24
+ ## 🚀 快速开始
25
+
26
+ ### 完整引入
27
+
28
+ ```typescript
29
+ import { createApp } from "vue";
30
+ import YdAdmin from "yd-admin";
31
+ import "yd-admin/style.css"; // 引入样式
32
+ import App from "./App.vue";
33
+
34
+ const app = createApp(App);
35
+ app.use(YdAdmin);
36
+ app.mount("#app");
37
+ ```
38
+
39
+ ### 按需引入
40
+
41
+ ```typescript
42
+ import { YdButton, YdInput, YdSelect } from "yd-admin";
43
+ import "yd-admin/style.css";
44
+ ```
45
+
46
+ ### Vite 配置(自动导入)
47
+
48
+ ```typescript
49
+ // vite.config.ts
50
+ import Components from "unplugin-vue-components/vite";
51
+ import { YdAdminResolver } from "yd-admin/resolver";
52
+
53
+ export default {
54
+ plugins: [
55
+ Components({
56
+ resolvers: [YdAdminResolver()],
57
+ }),
58
+ ],
59
+ };
60
+ ```
61
+
62
+ ## 📚 组件列表
63
+
64
+ ### 基础组件 (Base)
65
+
66
+ | 组件 | 说明 |
67
+ | ------------------- | ------------ |
68
+ | `YdButton` | 按钮 |
69
+ | `YdInput` | 输入框 |
70
+ | `YdTextarea` | 多行文本 |
71
+ | `YdInputNumber` | 数字输入 |
72
+ | `YdSelect` | 选择器 |
73
+ | `YdColorPicker` | 颜色选择 |
74
+ | `YdTreeSelect` | 树选择 |
75
+ | `YdSwitch` | 开关 |
76
+ | `YdCheckbox` | 复选框 |
77
+ | `YdCheckboxGroup` | 复选框组 |
78
+ | `YdRadio` | 单选框 |
79
+ | `YdRadioGroup` | 单选框组 |
80
+ | `YdTag` | 标签 |
81
+ | `YdAvatar` | 头像 |
82
+ | `YdBadge` | 徽章 |
83
+ | `YdRate` | 评分 |
84
+ | `YdSlider` | 滑块 |
85
+ | `YdDatePicker` | 日期选择 |
86
+ | `YdDateRangePicker` | 日期范围选择 |
87
+ | `YdTimePicker` | 时间选择 |
88
+ | `YdCascader` | 级联选择 |
89
+ | `YdAutoComplete` | 自动完成 |
90
+ | `YdTransfer` | 穿梭框 |
91
+ | `YdUpload` | 上传 |
92
+ | `YdLogin` | 登录框 |
93
+ | `YdLoginCentered` | 居中登录框 |
94
+ | `YdCaptcha` | 验证码 |
95
+ | `YdPinInput` | PIN 输入 |
96
+ | `YdCalendar` | 日历 |
97
+
98
+ ### AI 组件 (AI Components)
99
+
100
+ | 组件 | 说明 |
101
+ | ----------------- | ---------------- |
102
+ | `YdChatBubble` | 聊天消息气泡 |
103
+ | `YdConversation` | 会话容器 |
104
+ | `YdPromptInput` | AI提示词输入框 |
105
+ | `YdReasoning` | AI推理过程展示 |
106
+ | `YdCodeBlock` | 代码块(带高亮) |
107
+ | `YdStreamingText` | 流式文本展示 |
108
+ | `YdAiLoader` | AI加载动画 |
109
+ | `YdSuggestion` | AI建议按钮 |
110
+ | `YdSources` | 引用来源展示 |
111
+ | `YdModelSelector` | AI模型选择器 |
112
+ | `YdChatPage` | AI聊天页面 |
113
+
114
+ ### 表单组件 (Form)
115
+
116
+ | 组件 | 说明 |
117
+ | ------------ | -------- |
118
+ | `YdForm` | 表单容器 |
119
+ | `YdFormItem` | 表单项 |
120
+
121
+ ### 布局组件 (Layout)
122
+
123
+ | 组件 | 说明 |
124
+ | ----------------- | ------------ |
125
+ | `YdLayout` | 后台管理布局 |
126
+ | `YdLayoutSidebar` | 侧边栏 |
127
+ | `YdLayoutHeader` | 顶部 header |
128
+ | `YdLayoutContent` | 内容区域 |
129
+ | `YdCrudPage` | 增删改查页面 |
130
+ | `YdSpace` | 间距 |
131
+ | `YdDivider` | 分割线 |
132
+ | `YdStepper` | 步骤条 |
133
+
134
+ ### 数据存储 (Stores)
135
+
136
+ | 导出 | 说明 |
137
+ | --------------------- | ---------------------------- |
138
+ | `secureStoragePlugin` | Pinia 加密存储插件 (AES-GCM) |
139
+ | `initSecureStorage` | 初始化安全存储密钥 |
140
+
141
+ **使用示例**:
142
+
143
+ ```typescript
144
+ import { createPinia } from "pinia";
145
+ import { secureStoragePlugin, initSecureStorage } from "yd-admin";
146
+
147
+ const pinia = createPinia();
148
+ pinia.use(secureStoragePlugin);
149
+
150
+ // 应用启动时初始化
151
+ await initSecureStorage();
152
+ ```
153
+
154
+ ### 数据展示 (Data Display)
155
+
156
+ | 组件 | 说明 |
157
+ | --------------------- | ------------------ |
158
+ | `YdCard` | 卡片 |
159
+ | `YdTable` | 表格(含虚拟滚动) |
160
+ | `YdProgress` | 进度条 |
161
+ | `YdStatistic` | 统计数值 |
162
+ | `YdCollapse` | 折叠面板 |
163
+ | `YdTimeline` | 时间线 |
164
+ | `YdTree` | 树形控件 |
165
+ | `YdList` | 列表 |
166
+ | `YdEmpty` | 空状态 |
167
+ | `YdImage` | 图片 |
168
+ | `YdImagePreviewGroup` | 图片预览组 |
169
+ | `YdFlowChart` | 流程图 |
170
+ | `YdWatermark` | 水印 |
171
+
172
+ ### 导航组件 (Navigation)
173
+
174
+ | 组件 | 说明 |
175
+ | -------------- | -------- |
176
+ | `YdMenu` | 菜单 |
177
+ | `YdTabs` | 标签页 |
178
+ | `YdBreadcrumb` | 面包屑 |
179
+ | `YdPagination` | 分页 |
180
+ | `YdDropdown` | 下拉菜单 |
181
+ | `YdSteps` | 步骤条 |
182
+ | `YdStepper` | 步骤器 |
183
+ | `YdAnchor` | 锚点 |
184
+
185
+ ### 反馈组件 (Feedback)
186
+
187
+ | 组件 | 说明 |
188
+ | --------------- | ---------- |
189
+ | `YdModal` | 对话框 |
190
+ | `YdDrawer` | 抽屉 |
191
+ | `Message` | 消息提示 |
192
+ | `Notification` | 通知提醒 |
193
+ | `YdTooltip` | 文字提示 |
194
+ | `YdSpin` | 加载中 |
195
+ | `YdSkeleton` | 骨架屏 |
196
+ | `YdPopconfirm` | 气泡确认框 |
197
+ | `YdResult` | 结果页 |
198
+ | `YdContextMenu` | 右键菜单 |
199
+ | `YdLoadingBar` | 加载进度条 |
200
+
201
+ ### 配置组件 (Config)
202
+
203
+ | 组件 | 说明 |
204
+ | ------------------ | -------- |
205
+ | `YdConfigProvider` | 全局配置 |
206
+
207
+ ### 路由 (Router)
208
+
209
+ | 导出 | 说明 |
210
+ | ----------------------- | ---------------- |
211
+ | `createAppRouter` | 创建路由实例 |
212
+ | `createAuthGuard` | 创建认证守卫 |
213
+ | `createPermissionGuard` | 创建权限守卫 |
214
+ | `YdRouter` | 路由命名空间导出 |
215
+
216
+ ## 🎨 主题定制
217
+
218
+ 组件库使用 CSS 变量构建,支持全局主题覆盖:
219
+
220
+ ```css
221
+ :root {
222
+ --yd-color-primary: #1890ff;
223
+ --yd-border-radius: 4px;
224
+ /* 更多变量见 tokens.css */
225
+ }
226
+ ```
227
+
228
+ 或使用 `YdConfigProvider`:
229
+
230
+ ```vue
231
+ <template>
232
+ <YdConfigProvider :theme="darkTheme">
233
+ <App />
234
+ </YdConfigProvider>
235
+ </template>
236
+ ```
237
+
238
+ ## 🛠️ 工具函数
239
+
240
+ ```typescript
241
+ import { cn, debounce, throttle, generateId, deepClone } from "yd-admin";
242
+
243
+ // 合并 class
244
+ const classes = cn("base-class", condition && "conditional-class");
245
+
246
+ // 防抖
247
+ const debouncedFn = debounce(() => console.log("debounced"), 300);
248
+
249
+ // 节流
250
+ const throttledFn = throttle(() => console.log("throttled"), 100);
251
+
252
+ // 生成唯一 ID
253
+ const id = generateId("prefix");
254
+
255
+ // 深拷贝
256
+ const cloned = deepClone(obj);
257
+ ```
258
+
259
+ ## 📐 组件尺寸
260
+
261
+ 所有组件支持统一尺寸配置:
262
+
263
+ | 尺寸 | 说明 |
264
+ | ---- | ---------- |
265
+ | `xs` | 超小 |
266
+ | `sm` | 小 |
267
+ | `md` | 中(默认) |
268
+ | `lg` | 大 |
269
+ | `xl` | 特大 |
270
+
271
+ ## 🌐 开发
272
+
273
+ ### 环境要求
274
+
275
+ - Node.js >= 18
276
+ - Vite+ (vp)
277
+
278
+ ### 安装依赖
279
+
280
+ ```bash
281
+ vp install
282
+ ```
283
+
284
+ ### 开发预览
285
+
286
+ ```bash
287
+ # 启动 Demo
288
+ vp dev
289
+
290
+ # 监视模式构建
291
+ vp build --watch
292
+ ```
293
+
294
+ ### 代码检查
295
+
296
+ ```bash
297
+ # 类型检查和格式化检查
298
+ vp check
299
+
300
+ # 格式化修复
301
+ vp fmt
302
+ ```
303
+
304
+ ### 构建发布
305
+
306
+ ```bash
307
+ vp build
308
+ ```
309
+
310
+ ### 运行测试
311
+
312
+ ```bash
313
+ vp test
314
+ ```
315
+
316
+ ## 代码质量状态
317
+
318
+ 项目已通过以下检查:
319
+
320
+ - ✅ TypeScript 类型检查
321
+ - ESLint 代码检查
322
+ - 格式化检查
323
+ - ✅ 100 个单元测试全部通过
324
+
325
+ ## 📊 Bundle 信息
326
+
327
+ | 文件 | 大小 | Gzip |
328
+ | -------------- | ----------- | ----------- |
329
+ | dist/index.js | ~472 KB | ~89 KB |
330
+ | dist/style.css | ~182 KB | ~23 KB |
331
+ | **总计** | **~800 KB** | **~136 KB** |
332
+
333
+ ## 📋 更新日志
334
+
335
+ ### v0.1.8
336
+
337
+ - **feat(secureStorage)**: 支持 localStorage 和 sessionStorage 分别设置不同密钥
338
+ - **fix**: 修复报错问题
339
+ - **enhancement**: 优化说明文档
340
+ - **feat**: 登录控件优化,增强用户体验
341
+ - **feat**: 增加侧边栏控件,支持更灵活的布局配置
342
+ - **feat**: 增加懒加载和优化轮询机制,提升性能
343
+ - **enhancement**: 优化整体介绍和文档
344
+ - **feat**: 增加整体效果展示组件
345
+ - **feat**: 虚拟滚动等性能优化
346
+ - **enhancement**: 暂存优化,改进数据缓存
347
+
348
+ ### v0.1.7
349
+
350
+ - **feat**: 安全存储插件 (AES-GCM) 支持敏感数据加密存储
351
+
352
+ ### v0.1.6
353
+
354
+ - **feat**: 多语言支持 (i18n)
355
+
356
+ ### v0.1.5
357
+
358
+ - **feat**: 虚拟滚动表格组件
359
+
360
+ ### v0.1.4
361
+
362
+ - **feat**: 初始版本发布
363
+
364
+ ## 🔗 相关链接
365
+
366
+ - [Vue 3 文档](https://vuejs.org/)
367
+ - [Vite+ 文档](https://vite-plus._voidzero.dev/)
368
+ - [AsyncValidator](https://github.com/yiminghe/async-validator)
369
+
370
+ ## 📄 License
371
+
372
+ MIT