@zl-ui-kit/components 0.8.0 → 0.8.1
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 +214 -64
- package/dist/components/ZlCardPage/index.vue.d.ts +5 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -6,6 +6,84 @@ ZL UI 业务组件库 —— Element Plus 体系，`Zl` 前缀，47 个业务组
|
|
|
6
6
|
|
|
7
7
|
> 本文档即 UI 组件的**权威文档**，直接在本文件维护；npm 官网包页面渲染的就是它，改完随下一次发版对外生效。
|
|
8
8
|
|
|
9
|
+
## 目录
|
|
10
|
+
|
|
11
|
+
<!-- TOC:START -->
|
|
12
|
+
|
|
13
|
+
- [1. 简介与包结构](#1-简介与包结构)
|
|
14
|
+
- [1.1 在业务项目中安装（npm 发布版）](#11-在业务项目中安装npm-发布版)
|
|
15
|
+
- [1.2 宿主接入清单（从零到跑起来）](#12-宿主接入清单从零到跑起来)
|
|
16
|
+
- [2. 环境准备与运行示例](#2-环境准备与运行示例)
|
|
17
|
+
- [2.1 运行环境](#21-运行环境)
|
|
18
|
+
- [2.2 启动 playground（组件示例与联调）](#22-启动-playground组件示例与联调)
|
|
19
|
+
- [2.3 主题快速接入（宿主项目）](#23-主题快速接入宿主项目)
|
|
20
|
+
- [2.4 示例页面索引](#24-示例页面索引)
|
|
21
|
+
- [3. 组件总览（47 个业务组件）](#3-组件总览47-个业务组件)
|
|
22
|
+
- [3.1 通用展示组件](#31-通用展示组件)
|
|
23
|
+
- [3.2 数据型组件](#32-数据型组件)
|
|
24
|
+
- [3.3 表单与交互组件](#33-表单与交互组件)
|
|
25
|
+
- [3.4 布局与权限](#34-布局与权限)
|
|
26
|
+
- [3.5 文件与编辑](#35-文件与编辑)
|
|
27
|
+
- [3.6 国际化基础设施（独立于 47 个业务组件）](#36-国际化基础设施独立于-47-个业务组件)
|
|
28
|
+
- [3.7 内部子组件（不对外导出，随父组件使用）](#37-内部子组件不对外导出随父组件使用)
|
|
29
|
+
- [4. 图标组件 `ZlIcon`](#4-图标组件-zlicon)
|
|
30
|
+
- [4.1 必须先注册图标集（否则一个图标都不显示）](#41-必须先注册图标集否则一个图标都不显示)
|
|
31
|
+
- [5. 通用展示组件](#5-通用展示组件)
|
|
32
|
+
- [ZlTitle — 区块标题](#zltitle-区块标题)
|
|
33
|
+
- [ZlTag — 标签](#zltag-标签)
|
|
34
|
+
- [ZlCopy — 一键复制](#zlcopy-一键复制)
|
|
35
|
+
- [ZlEmpty — 空状态](#zlempty-空状态)
|
|
36
|
+
- [ZlDictTag — 字典标签](#zldicttag-字典标签)
|
|
37
|
+
- [ZlCard / ZlPagination — 卡片与分页的视觉约定](#zlcard-zlpagination-卡片与分页的视觉约定)
|
|
38
|
+
- [其余](#其余)
|
|
39
|
+
- [6. 数据型组件 + useRequest 体系（核心）](#6-数据型组件-userequest-体系核心)
|
|
40
|
+
- [6.1 useRequest 三件套](#61-userequest-三件套)
|
|
41
|
+
- [6.2 Mock 模块（playground 离线联调）](#62-mock-模块playground-离线联调)
|
|
42
|
+
- [6.3 组件对接实战（对应 `/use-request` 页面）](#63-组件对接实战对应-use-request-页面)
|
|
43
|
+
- [6.4 常见坑位](#64-常见坑位)
|
|
44
|
+
- [7. 表单与交互组件](#7-表单与交互组件)
|
|
45
|
+
- [ZlForm —— schema 驱动](#zlform-schema-驱动)
|
|
46
|
+
- [ZlSearch —— 查询条](#zlsearch-查询条)
|
|
47
|
+
- [ZlDrawer / ZlPopconfirm / ZlSwitch](#zldrawer-zlpopconfirm-zlswitch)
|
|
48
|
+
- [ZlAction / ZlActionList —— 操作列与操作列表](#zlaction-zlactionlist-操作列与操作列表)
|
|
49
|
+
- [ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch](#zlradiotag-zlcheckboxtag-zlcheckall-zlsorter-zladdsub-zllayoutswitch)
|
|
50
|
+
- [ZlTabs / ZlDynamicComponent / ZlGrid](#zltabs-zldynamiccomponent-zlgrid)
|
|
51
|
+
- [8. 布局与权限](#8-布局与权限)
|
|
52
|
+
- [ZlAppLayout / ZlAppMenu](#zlapplayout-zlappmenu)
|
|
53
|
+
- [ZlPermission](#zlpermission)
|
|
54
|
+
- [ZlHorizontalTable](#zlhorizontaltable)
|
|
55
|
+
- [9. 文件与编辑](#9-文件与编辑)
|
|
56
|
+
- [9.1 `ZlEditor`：monaco worker 配置与首屏治理](#91-zleditormonaco-worker-配置与首屏治理)
|
|
57
|
+
- [10. 主题定制（@zl-ui-kit/theme）](#10-主题定制zl-ui-kittheme)
|
|
58
|
+
- [L1 变量直覆（小幅微调）](#l1-变量直覆小幅微调)
|
|
59
|
+
- [L2 运行时定义主题（换肤/多租户推荐）](#l2-运行时定义主题换肤多租户推荐)
|
|
60
|
+
- [变量速查（改样式时最常用）](#变量速查改样式时最常用)
|
|
61
|
+
- [主题状态与 `useGlobalData().theme` 的关系（容易踩）](#主题状态与-useglobaldatatheme-的关系容易踩)
|
|
62
|
+
- [换肤不生效？按这个顺序查](#换肤不生效按这个顺序查)
|
|
63
|
+
- [L3 构建时生成主题（深度定制，规划中）](#l3-构建时生成主题深度定制规划中)
|
|
64
|
+
- [SCSS 工具（编译期定制）](#scss-工具编译期定制)
|
|
65
|
+
- [11. 调试与常见问题](#11-调试与常见问题)
|
|
66
|
+
- [各包常用命令](#各包常用命令)
|
|
67
|
+
- [文档维护位置](#文档维护位置)
|
|
68
|
+
- [常见问题](#常见问题)
|
|
69
|
+
- [12. 公共 Hooks 与 Utils 方法](#12-公共-hooks-与-utils-方法)
|
|
70
|
+
- [12.1 `@zl-ui-kit/composables` —— 公共 Hooks](#121-zl-ui-kitcomposables-公共-hooks)
|
|
71
|
+
- [12.2 `@zl-ui-kit/utils` —— 工具方法](#122-zl-ui-kitutils-工具方法)
|
|
72
|
+
- [13. 国际化接入（i18n）](#13-国际化接入i18n)
|
|
73
|
+
- [13.1 三层结构](#131-三层结构)
|
|
74
|
+
- [13.2 宿主接入（main.ts，推荐 `createZlI18n`）](#132-宿主接入maints推荐-createzli18n)
|
|
75
|
+
- [13.3 根容器挂载（App.vue）](#133-根容器挂载appvue)
|
|
76
|
+
- [13.4 组件内渐进式翻译 `useZlT`](#134-组件内渐进式翻译-usezlt)
|
|
77
|
+
- [13.5 useLocale 注册修复说明](#135-uselocale-注册修复说明)
|
|
78
|
+
- [13.6 消费者定制 i18n（与主题对齐）](#136-消费者定制-i18n与主题对齐)
|
|
79
|
+
- [14. 组件 API 参考（自动生成）](#14-组件-api-参考自动生成)
|
|
80
|
+
- [组件索引](#组件索引)
|
|
81
|
+
- [14.1 主入口组件（`@zl-ui-kit/components`）](#141-主入口组件zl-ui-kitcomponents)
|
|
82
|
+
- [14.2 子路径入口组件（重型依赖，需单独安装）](#142-子路径入口组件重型依赖需单独安装)
|
|
83
|
+
- [14.3 公共类型声明（schema 用）](#143-公共类型声明schema-用)
|
|
84
|
+
|
|
85
|
+
<!-- TOC:END -->
|
|
86
|
+
|
|
9
87
|
---
|
|
10
88
|
|
|
11
89
|
## 1. 简介与包结构
|
|
@@ -345,7 +423,7 @@ setTheme('dark') // 切换主题（light/dark/red-light/red-dark/blue）
|
|
|
345
423
|
|
|
346
424
|
### 3.1 通用展示组件
|
|
347
425
|
|
|
348
|
-
`ZlIcon` · `ZlTitle` · `ZlTag` · `ZlCornerTag` · `ZlText` · `ZlCopy` · `ZlAutoTooltip` · `ZlEmpty` · `ZlDictTag` · `ZlDescription` · `ZlSection` · `ZlCard` · `ZlAvatar` · `ZlAppSlogan` · `ZlIconLabel` · `ZlIconHover`
|
|
426
|
+
`ZlIcon` · `ZlTitle` · `ZlTag` · `ZlCornerTag` · `ZlText` · `ZlCopy` · `ZlAutoTooltip` · `ZlEmpty` · `ZlDictTag` · `ZlDescription` · `ZlSection` · `ZlCard` · `ZlAvatar` · `ZlAvatarGroup` · `ZlAppSlogan` · `ZlIconLabel` · `ZlIconHover`
|
|
349
427
|
|
|
350
428
|
### 3.2 数据型组件
|
|
351
429
|
|
|
@@ -353,15 +431,15 @@ setTheme('dark') // 切换主题（light/dark/red-light/red-dark/blue）
|
|
|
353
431
|
|
|
354
432
|
### 3.3 表单与交互组件
|
|
355
433
|
|
|
356
|
-
`ZlForm` · `ZlSearch` · `ZlDrawer` · `ZlPopconfirm` · `ZlSwitch` · `ZlAction` · `ZlActionList` · `ZlRadioTag` · `ZlCheckboxTag` · `ZlCheckAll` · `ZlSorter` · `ZlAddSub` · `ZlLayoutSwitch` · `ZlTabs` · `ZlDynamicComponent` · `ZlGrid`
|
|
434
|
+
`ZlForm` · `ZlFormChild` · `ZlSearch` · `ZlDrawer` · `ZlPopconfirm` · `ZlSwitch` · `ZlAction` · `ZlActionList` · `ZlRadioTag` · `ZlCheckboxTag` · `ZlCheckAll` · `ZlSorter` · `ZlSorterList` · `ZlAddSub` · `ZlLayoutSwitch` · `ZlTabs` · `ZlDynamicComponent` · `ZlGrid` · `ZlGridItem`
|
|
357
435
|
|
|
358
436
|
### 3.4 布局与权限
|
|
359
437
|
|
|
360
|
-
`ZlAppLayout` · `ZlAppMenu` · `ZlPermission` · `ZlHorizontalTable`
|
|
438
|
+
`ZlAppLayout` · `ZlHorizontalLayout` · `ZlVerticalLayout` · `ZlAppMenu` · `ZlAppMenuItem` · `ZlPermission` · `ZlHorizontalTable`
|
|
361
439
|
|
|
362
440
|
### 3.5 文件与编辑
|
|
363
441
|
|
|
364
|
-
`ZlFilePreview` · `ZlFileViewer` · `ZlPdfViewer` · `ZlEditor` · `ZlSqlEditor` · `ZlLogin`
|
|
442
|
+
`ZlFilePreview` · `ZlFileFetchError` · `ZlFileViewer` · `ZlPdfViewer` · `ZlEditor` · `ZlSqlEditor` · `ZlLogin`
|
|
365
443
|
|
|
366
444
|
> 页签/微前端类组件（`ZlMicroPage`/`ZlAppTabs`/`ZlPageTabs`/`ZlDevMenu`）与配套 composables（`usePageTabs` 等）均已移除，`0.5.0` 起组件库不含任何微前端能力。
|
|
367
445
|
|
|
@@ -369,6 +447,70 @@ setTheme('dark') // 切换主题（light/dark/red-light/red-dark/blue）
|
|
|
369
447
|
|
|
370
448
|
`ZlI18nProvider` —— 国际化根容器，将 Element Plus 语言包经 `<el-config-provider>` 挂载到 Element Plus（详见第 13 章）。
|
|
371
449
|
|
|
450
|
+
### 3.7 内部子组件（不对外导出，随父组件使用）
|
|
451
|
+
|
|
452
|
+
下面 4 个组件被父组件内部递归/分发渲染，主入口**不导出**，因此不在 §14 的自动生成范围里。
|
|
453
|
+
这里单独给出 props 与插槽的可粘贴示例。
|
|
454
|
+
|
|
455
|
+
#### `ZlAppMenuItem` —— 菜单项（供 `ZlAppMenu` 递归渲染）
|
|
456
|
+
|
|
457
|
+
| prop | 类型 | 必填 | 示例 |
|
|
458
|
+
| ------ | ---------- | ---- | ---------------------------------------------------------- |
|
|
459
|
+
| `menu` | `MenuItem` | 是 | `:menu="{ name: 'home', title: '首页', icon: 'zl:home' }"` |
|
|
460
|
+
|
|
461
|
+
| 事件 | 说明 | 示例 |
|
|
462
|
+
| ----------------- | -------------------- | ----------------------------------------------------- |
|
|
463
|
+
| `menu-item-click` | 点击叶子菜单项时触发 | `@menu-item-click="(menu) => router.push(menu.name)"` |
|
|
464
|
+
|
|
465
|
+
`menu.children` 非空时渲染 `el-sub-menu` 并递归自身，否则渲染 `el-menu-item`。日常不需要手写——
|
|
466
|
+
把 `menus` 传给 `ZlAppMenu` 即可（见 §8）。
|
|
467
|
+
|
|
468
|
+
#### `ZlHorizontalLayout` / `ZlVerticalLayout` —— 布局形态（供 `ZlAppLayout` 分发）
|
|
469
|
+
|
|
470
|
+
由 `ZlAppLayout` 的 `horizontal` 布尔值二选一渲染，不单独使用。插槽用法（写在 `ZlAppLayout` 标签内）：
|
|
471
|
+
|
|
472
|
+
```vue
|
|
473
|
+
<ZlAppLayout :menus="menus" :horizontal="true">
|
|
474
|
+
<template #logo>
|
|
475
|
+
<img src="/logo.svg" />
|
|
476
|
+
</template>
|
|
477
|
+
<template #menu>
|
|
478
|
+
<!-- horizontal 形态下自行放菜单 -->
|
|
479
|
+
</template>
|
|
480
|
+
<template #breadcrumb>
|
|
481
|
+
<el-breadcrumb />
|
|
482
|
+
</template>
|
|
483
|
+
<template #header>
|
|
484
|
+
<span>顶部操作区</span>
|
|
485
|
+
</template>
|
|
486
|
+
<!-- 默认插槽：页面主体 -->
|
|
487
|
+
<RouterView />
|
|
488
|
+
</ZlAppLayout>
|
|
489
|
+
```
|
|
490
|
+
|
|
491
|
+
| 插槽 | 适用形态 | 作用域 | 示例 |
|
|
492
|
+
| ------------ | ----------- | --------------------------- | --------------------------------- |
|
|
493
|
+
| `logo` | 两者 | vertical 传 `{ collapsed }` | `<template #logo>` |
|
|
494
|
+
| `menu` | 两者 | vertical 传 `{ collapsed }` | `<template #menu>` |
|
|
495
|
+
| `header` | 两者 | — | `<template #header>` |
|
|
496
|
+
| `breadcrumb` | 两者 | — | `<template #breadcrumb>` |
|
|
497
|
+
| `footer` | 仅 vertical | — | `<template #footer>` |
|
|
498
|
+
| `default` | 两者 | — | 直接写页面内容（不写 `#default`） |
|
|
499
|
+
|
|
500
|
+
vertical 形态的 `logo` / `menu` 插槽会收到 `{ collapsed }`，可据此在折叠态隐藏文字：
|
|
501
|
+
|
|
502
|
+
```vue
|
|
503
|
+
<template #logo="{ collapsed }">
|
|
504
|
+
<img src="/logo.svg" />
|
|
505
|
+
<span v-if="!collapsed">数据空间</span>
|
|
506
|
+
</template>
|
|
507
|
+
```
|
|
508
|
+
|
|
509
|
+
#### `ZlFileFetchError` —— 文件获取失败占位（供 `ZlFilePreview` 内部渲染）
|
|
510
|
+
|
|
511
|
+
无 props、无插槽。文案走 i18n key `zl.filePreview.fetchError`（中文「文件获取失败」），
|
|
512
|
+
消费方可通过 `createZlI18n({ messages })` 覆盖（见第 13 章）。
|
|
513
|
+
|
|
372
514
|
---
|
|
373
515
|
|
|
374
516
|
## 4. 图标组件 `ZlIcon`
|
|
@@ -1458,64 +1600,64 @@ const { i18n } = useLocale({ messages })
|
|
|
1458
1600
|
|
|
1459
1601
|
### 组件索引
|
|
1460
1602
|
|
|
1461
|
-
| 组件
|
|
1462
|
-
|
|
|
1463
|
-
| `ZlAction`
|
|
1464
|
-
| `ZlActionList`
|
|
1465
|
-
| `ZlAddSub`
|
|
1466
|
-
| `ZlAppLayout`
|
|
1467
|
-
| `ZlAppMenu`
|
|
1468
|
-
| `ZlAppSlogan`
|
|
1469
|
-
| `ZlAutoTooltip`
|
|
1470
|
-
| `ZlAvatar`
|
|
1471
|
-
| `ZlAvatarGroup`
|
|
1472
|
-
| `ZlCard`
|
|
1473
|
-
| `ZlCardPage`
|
|
1474
|
-
| `ZlCheckAll`
|
|
1475
|
-
| `ZlCheckboxTag`
|
|
1476
|
-
| `ZlCopy`
|
|
1477
|
-
| `ZlDescription`
|
|
1478
|
-
| `ZlDictTag`
|
|
1479
|
-
| `ZlDrawer`
|
|
1480
|
-
| `ZlDynamicComponent` | 主入口 | 3 | 2 | 0 | 0 |
|
|
1481
|
-
| `ZlPdfViewer`
|
|
1482
|
-
| `ZlLogin`
|
|
1483
|
-
| `ZlLoginForm`
|
|
1484
|
-
| `ZlEmpty`
|
|
1485
|
-
| `ZlForm`
|
|
1486
|
-
| `ZlFormChild`
|
|
1487
|
-
| `ZlGridItem`
|
|
1488
|
-
| `ZlGrid`
|
|
1489
|
-
| `ZlHorizontalTable`
|
|
1490
|
-
| `ZlIcon`
|
|
1491
|
-
| `ZlI18nProvider`
|
|
1492
|
-
| `ZlIconHover`
|
|
1493
|
-
| `ZlIconLabel`
|
|
1494
|
-
| `ZlCornerTag`
|
|
1495
|
-
| `ZlLayoutSwitch`
|
|
1496
|
-
| `ZlPagination`
|
|
1497
|
-
| `ZlPermission`
|
|
1498
|
-
| `ZlPopconfirm`
|
|
1499
|
-
| `ZlRadioTag`
|
|
1500
|
-
| `ZlSearch`
|
|
1501
|
-
| `ZlSearchTable`
|
|
1502
|
-
| `ZlSection`
|
|
1503
|
-
| `ZlSorter`
|
|
1504
|
-
| `ZlSorterList`
|
|
1505
|
-
| `ZlSwitch`
|
|
1506
|
-
| `ZlTable`
|
|
1507
|
-
| `ZlTabs`
|
|
1508
|
-
| `ZlTag`
|
|
1509
|
-
| `ZlText`
|
|
1510
|
-
| `ZlTitle`
|
|
1511
|
-
| `ZlUpload`
|
|
1512
|
-
| `ZlTree`
|
|
1513
|
-
| `ZlTreeSelect`
|
|
1514
|
-
| `ZlChart`
|
|
1515
|
-
| `ZlEditor`
|
|
1516
|
-
| `ZlSqlEditor`
|
|
1517
|
-
| `ZlFilePreview`
|
|
1518
|
-
| `ZlFileViewer`
|
|
1603
|
+
| 组件 | 入口 | props | 事件 | 插槽 | 暴露 |
|
|
1604
|
+
| ------------------------------------------- | ------------------- | ----- | ---- | ---- | ---- |
|
|
1605
|
+
| [`ZlAction`](#zlaction) | 主入口 | 0 | 0 | 0 | 0 |
|
|
1606
|
+
| [`ZlActionList`](#zlactionlist) | 主入口 | 6 | 1 | 1 | 0 |
|
|
1607
|
+
| [`ZlAddSub`](#zladdsub) | 主入口 | 2 | 1 | 1 | 0 |
|
|
1608
|
+
| [`ZlAppLayout`](#zlapplayout) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1609
|
+
| [`ZlAppMenu`](#zlappmenu) | 主入口 | 3 | 1 | 0 | 0 |
|
|
1610
|
+
| [`ZlAppSlogan`](#zlappslogan) | 主入口 | 3 | 0 | 0 | 0 |
|
|
1611
|
+
| [`ZlAutoTooltip`](#zlautotooltip) | 主入口 | 0 | 0 | 1 | 0 |
|
|
1612
|
+
| [`ZlAvatar`](#zlavatar) | 主入口 | 3 | 0 | 0 | 0 |
|
|
1613
|
+
| [`ZlAvatarGroup`](#zlavatargroup) | 主入口 | 3 | 0 | 0 | 0 |
|
|
1614
|
+
| [`ZlCard`](#zlcard) | 主入口 | 1 | 0 | 8 | 0 |
|
|
1615
|
+
| [`ZlCardPage`](#zlcardpage) | 主入口 | 6 | 1 | 3 | 3 |
|
|
1616
|
+
| [`ZlCheckAll`](#zlcheckall) | 主入口 | 2 | 1 | 0 | 0 |
|
|
1617
|
+
| [`ZlCheckboxTag`](#zlcheckboxtag) | 主入口 | 7 | 1 | 1 | 0 |
|
|
1618
|
+
| [`ZlCopy`](#zlcopy) | 主入口 | 2 | 0 | 2 | 0 |
|
|
1619
|
+
| [`ZlDescription`](#zldescription) | 主入口 | 5 | 0 | 1 | 0 |
|
|
1620
|
+
| [`ZlDictTag`](#zldicttag) | 主入口 | 7 | 0 | 0 | 0 |
|
|
1621
|
+
| [`ZlDrawer`](#zldrawer) | 主入口 | 6 | 1 | 2 | 0 |
|
|
1622
|
+
| [`ZlDynamicComponent`](#zldynamiccomponent) | 主入口 | 3 | 2 | 0 | 0 |
|
|
1623
|
+
| [`ZlPdfViewer`](#zlpdfviewer) | 主入口 | 2 | 0 | 0 | 0 |
|
|
1624
|
+
| [`ZlLogin`](#zllogin) | 主入口 | 2 | 0 | 2 | 0 |
|
|
1625
|
+
| [`ZlLoginForm`](#zlloginform) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1626
|
+
| [`ZlEmpty`](#zlempty) | 主入口 | 2 | 0 | 0 | 0 |
|
|
1627
|
+
| [`ZlForm`](#zlform) | 主入口 | 2 | 0 | 3 | 0 |
|
|
1628
|
+
| [`ZlFormChild`](#zlformchild) | 主入口 | 1 | 0 | 0 | 0 |
|
|
1629
|
+
| [`ZlGridItem`](#zlgriditem) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1630
|
+
| [`ZlGrid`](#zlgrid) | 主入口 | 9 | 0 | 2 | 0 |
|
|
1631
|
+
| [`ZlHorizontalTable`](#zlhorizontaltable) | 主入口 | 4 | 0 | 1 | 0 |
|
|
1632
|
+
| [`ZlIcon`](#zlicon) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1633
|
+
| [`ZlI18nProvider`](#zli18nprovider) | 主入口 | 0 | 0 | 1 | 0 |
|
|
1634
|
+
| [`ZlIconHover`](#zliconhover) | 主入口 | 0 | 0 | 0 | 0 |
|
|
1635
|
+
| [`ZlIconLabel`](#zliconlabel) | 主入口 | 1 | 1 | 1 | 0 |
|
|
1636
|
+
| [`ZlCornerTag`](#zlcornertag) | 主入口 | 3 | 0 | 1 | 0 |
|
|
1637
|
+
| [`ZlLayoutSwitch`](#zllayoutswitch) | 主入口 | 2 | 1 | 0 | 0 |
|
|
1638
|
+
| [`ZlPagination`](#zlpagination) | 主入口 | 4 | 3 | 0 | 0 |
|
|
1639
|
+
| [`ZlPermission`](#zlpermission) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1640
|
+
| [`ZlPopconfirm`](#zlpopconfirm) | 主入口 | 4 | 2 | 3 | 0 |
|
|
1641
|
+
| [`ZlRadioTag`](#zlradiotag) | 主入口 | 3 | 1 | 1 | 0 |
|
|
1642
|
+
| [`ZlSearch`](#zlsearch) | 主入口 | 6 | 2 | 2 | 3 |
|
|
1643
|
+
| [`ZlSearchTable`](#zlsearchtable) | 主入口 | 5 | 1 | 3 | 4 |
|
|
1644
|
+
| [`ZlSection`](#zlsection) | 主入口 | 4 | 0 | 3 | 0 |
|
|
1645
|
+
| [`ZlSorter`](#zlsorter) | 主入口 | 2 | 2 | 1 | 0 |
|
|
1646
|
+
| [`ZlSorterList`](#zlsorterlist) | 主入口 | 2 | 1 | 0 | 0 |
|
|
1647
|
+
| [`ZlSwitch`](#zlswitch) | 主入口 | 6 | 1 | 2 | 0 |
|
|
1648
|
+
| [`ZlTable`](#zltable) | 主入口 | 6 | 3 | 3 | 0 |
|
|
1649
|
+
| [`ZlTabs`](#zltabs) | 主入口 | 4 | 0 | 3 | 0 |
|
|
1650
|
+
| [`ZlTag`](#zltag) | 主入口 | 15 | 4 | 1 | 0 |
|
|
1651
|
+
| [`ZlText`](#zltext) | 主入口 | 1 | 0 | 1 | 0 |
|
|
1652
|
+
| [`ZlTitle`](#zltitle) | 主入口 | 5 | 0 | 3 | 0 |
|
|
1653
|
+
| [`ZlUpload`](#zlupload) | 主入口 | 13 | 1 | 1 | 0 |
|
|
1654
|
+
| [`ZlTree`](#zltree) | 主入口 | 5 | 0 | 3 | 0 |
|
|
1655
|
+
| [`ZlTreeSelect`](#zltreeselect) | 主入口 | 6 | 1 | 0 | 0 |
|
|
1656
|
+
| [`ZlChart`](#zlchart) | 子入口 chart | 2 | 0 | 0 | 1 |
|
|
1657
|
+
| [`ZlEditor`](#zleditor) | 子入口 editor | 3 | 1 | 0 | 0 |
|
|
1658
|
+
| [`ZlSqlEditor`](#zlsqleditor) | 子入口 editor | 4 | 1 | 0 | 0 |
|
|
1659
|
+
| [`ZlFilePreview`](#zlfilepreview) | 子入口 file-preview | 1 | 0 | 0 | 0 |
|
|
1660
|
+
| [`ZlFileViewer`](#zlfileviewer) | 子入口 file-preview | 1 | 0 | 0 | 0 |
|
|
1519
1661
|
|
|
1520
1662
|
> 说明列为 `—` 表示该属性在源码里没写 `/** */` 注释（当前 134/194 个）；补完注释重跑 `pnpm docs:api` 即可同步。
|
|
1521
1663
|
|
|
@@ -1655,6 +1797,8 @@ import { ZlAddSub } from '@zl-ui-kit/components'
|
|
|
1655
1797
|
|
|
1656
1798
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAppLayout/index.vue`</sub>
|
|
1657
1799
|
|
|
1800
|
+
**简介**：布局形态（供 分发）
|
|
1801
|
+
|
|
1658
1802
|
**接口概览**：1 props · 1 插槽
|
|
1659
1803
|
|
|
1660
1804
|
**用法示例**
|
|
@@ -1694,12 +1838,14 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
|
|
|
1694
1838
|
| --------- | ---------- | --------------------------------- | ------------------------------------------- |
|
|
1695
1839
|
| `default` | — | `<template #default>…</template>` | 整个 `slots` 对象原样透传，插槽由子组件决定 |
|
|
1696
1840
|
|
|
1697
|
-
**完整示例**：见 §
|
|
1841
|
+
**完整示例**：见 §3 组件总览（47 个业务组件） › ZlHorizontalLayout / ZlVerticalLayout —— 布局形态（供 ZlAppLayout 分发）
|
|
1698
1842
|
|
|
1699
1843
|
#### `ZlAppMenu`
|
|
1700
1844
|
|
|
1701
1845
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAppMenu/AppMenu.vue`</sub>
|
|
1702
1846
|
|
|
1847
|
+
**简介**：菜单项（供 递归渲染）
|
|
1848
|
+
|
|
1703
1849
|
**接口概览**：3 props · 1 事件
|
|
1704
1850
|
|
|
1705
1851
|
**用法示例**
|
|
@@ -1730,7 +1876,7 @@ import { ZlAppMenu } from '@zl-ui-kit/components'
|
|
|
1730
1876
|
| ----------------- | ---------- | ---- |
|
|
1731
1877
|
| `menu-item-click` | `MenuItem` | — |
|
|
1732
1878
|
|
|
1733
|
-
**完整示例**：见 §
|
|
1879
|
+
**完整示例**：见 §3 组件总览（47 个业务组件） › ZlAppMenuItem —— 菜单项（供 ZlAppMenu 递归渲染）
|
|
1734
1880
|
|
|
1735
1881
|
#### `ZlAppSlogan`
|
|
1736
1882
|
|
|
@@ -3979,6 +4125,8 @@ import { ZlSqlEditor } from '@zl-ui-kit/components/editor'
|
|
|
3979
4125
|
|
|
3980
4126
|
<sub>入口 `@zl-ui-kit/components/file-preview` · 源码 `packages/components/src/components/ZlFilePreview/index.vue` · ⚠️ 不在主入口，需从子路径 import，并自行安装对应 peer 依赖</sub>
|
|
3981
4127
|
|
|
4128
|
+
**简介**：文件获取失败占位（供 内部渲染）
|
|
4129
|
+
|
|
3982
4130
|
**接口概览**：1 props
|
|
3983
4131
|
|
|
3984
4132
|
**用法示例**
|
|
@@ -4001,6 +4149,8 @@ import { ZlFilePreview } from '@zl-ui-kit/components/file-preview'
|
|
|
4001
4149
|
| ----- | -------- | ------ | ---- | ------------------------------------ | ---- |
|
|
4002
4150
|
| `url` | `string` | — | 否 | `url="https://example.com/file.pdf"` | — |
|
|
4003
4151
|
|
|
4152
|
+
**完整示例**：见 §3 组件总览（47 个业务组件） › ZlFileFetchError —— 文件获取失败占位（供 ZlFilePreview 内部渲染）
|
|
4153
|
+
|
|
4004
4154
|
#### `ZlFileViewer`
|
|
4005
4155
|
|
|
4006
4156
|
<sub>入口 `@zl-ui-kit/components/file-preview` · 源码 `packages/components/src/components/ZlFileViewer/index.vue` · ⚠️ 不在主入口，需从子路径 import，并自行安装对应 peer 依赖</sub>
|
|
@@ -4,7 +4,11 @@ import { SearchItem } from '../../types';
|
|
|
4
4
|
* 仅用结构特征识别：带 `run`/`data`/`loading` 且**没有** `service` 字段即视为实例。
|
|
5
5
|
*/
|
|
6
6
|
interface UseRequestInstance {
|
|
7
|
-
|
|
7
|
+
/**
|
|
8
|
+
* `run` 的返回类型各家不一致：`useRequest` 返回 `Promise`，`usePageableRequest`
|
|
9
|
+
* 声明为 `void`，因此这里放宽成 any（本组件只调不读返回值）。
|
|
10
|
+
*/
|
|
11
|
+
run: (...args: any[]) => any;
|
|
8
12
|
data: any;
|
|
9
13
|
loading: any;
|
|
10
14
|
params?: any;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zl-ui-kit/components",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"file-type": "^20.4.1",
|
|
40
40
|
"dt-sql-parser": "^4.3.1",
|
|
41
41
|
"sql-formatter": "^15.4.2",
|
|
42
|
-
"@zl-ui-kit/icons": "0.8.
|
|
43
|
-
"@zl-ui-kit/composables": "0.8.
|
|
44
|
-
"@zl-ui-kit/utils": "0.8.
|
|
42
|
+
"@zl-ui-kit/icons": "0.8.1",
|
|
43
|
+
"@zl-ui-kit/composables": "0.8.1",
|
|
44
|
+
"@zl-ui-kit/utils": "0.8.1"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0",
|
|
@@ -98,10 +98,10 @@
|
|
|
98
98
|
"@vue-office/pdf": "^2.0.10",
|
|
99
99
|
"@vue-office/pptx": "1.0.1",
|
|
100
100
|
"echarts": "^5.6.0",
|
|
101
|
-
"@jichuang/tsconfig": "1.0.0",
|
|
102
101
|
"@jichuang/eslint-config": "1.0.0",
|
|
103
|
-
"@jichuang/
|
|
104
|
-
"@zl-ui-kit/theme": "0.8.
|
|
102
|
+
"@jichuang/tsconfig": "1.0.0",
|
|
103
|
+
"@zl-ui-kit/theme": "0.8.1",
|
|
104
|
+
"@jichuang/vite-config": "1.0.0"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|
|
107
107
|
"type": "git",
|