@zl-ui-kit/components 0.18.7 → 0.19.0

package/README.md

@@ -18,13 +18,13 @@ ZL UI 业务组件库 —— Element Plus 体系，`Zl` 前缀，56 个业务组
   - [2.2 启动 playground（组件示例与联调）](#22-启动-playground组件示例与联调)
   - [2.3 主题快速接入（宿主项目）](#23-主题快速接入宿主项目)
   - [2.4 示例页面索引](#24-示例页面索引)
-- [3. 组件总览（56 个业务组件）](#3-组件总览56-个业务组件)
+- [3. 组件总览（58 个业务组件）](#3-组件总览58-个业务组件)
   - [3.1 通用展示组件](#31-通用展示组件)
   - [3.2 数据型组件](#32-数据型组件)
   - [3.3 表单与交互组件](#33-表单与交互组件)
   - [3.4 布局与权限](#34-布局与权限)
   - [3.5 文件与编辑](#35-文件与编辑)
-  - [3.6 国际化基础设施（独立于 56 个业务组件）](#36-国际化基础设施独立于-56-个业务组件)
+  - [3.6 国际化基础设施（独立于 58 个业务组件）](#36-国际化基础设施独立于-58-个业务组件)
   - [3.7 内部子组件（不对外导出，随父组件使用）](#37-内部子组件不对外导出随父组件使用)
 - [4. 图标组件 `ZlIcon`](#4-图标组件-zlicon)
   - [4.1 必须先注册图标集（否则一个图标都不显示）](#41-必须先注册图标集否则一个图标都不显示)
@@ -52,6 +52,7 @@ ZL UI 业务组件库 —— Element Plus 体系，`Zl` 前缀，56 个业务组
   - [ZlTree —— 树形控件（多选 / 暴露方法）](#zltree-树形控件多选-暴露方法)
 - [8. 布局与权限](#8-布局与权限)
   - [ZlAppLayout / ZlAppMenu](#zlapplayout-zlappmenu)
+  - [ZlMenu — 通用菜单](#zlmenu-通用菜单)
   - [ZlPermission](#zlpermission)
   - [ZlHorizontalTable](#zlhorizontaltable)
 - [9. 文件与编辑](#9-文件与编辑)
@@ -458,9 +459,9 @@ defineTheme({
 
 ---
 
-## 3. 组件总览（56 个业务组件）
+## 3. 组件总览（58 个业务组件）
 
-> 口径：主入口 `@zl-ui-kit/components` 导出 **52 个**组件，另有 **5 个**重型组件走子路径入口（`/chart`、`/editor`、`/file-preview`），合计 **57 个对外组件**（§14 逐条覆盖这 57 个）；其中 `ZlI18nProvider` 是国际化基础设施，故**业务组件为 56 个**（playground 的 `/gallery` 逐个渲染的就是这 56 个）。组件目录共 49 个（一个目录可产出多个导出符号，如 `ZlTag` 目录同时产出 `ZlTag` / `ZlCornerTag`）。§3.1~§3.5 按功能分组列出业务组件，其中混列了 4 个**不对外导出**的内部子组件（`ZlHorizontalLayout` / `ZlVerticalLayout` / `ZlAppMenuItem` / `ZlFileFetchError`，见 §3.7），去掉这 4 个后正好 56 个。
+> 口径：主入口 `@zl-ui-kit/components` 导出 **54 个**组件，另有 **5 个**重型组件走子路径入口（`/chart`、`/editor`、`/file-preview`），合计 **59 个对外组件**（§14 逐条覆盖这 59 个）；其中 `ZlI18nProvider` 是国际化基础设施，故**业务组件为 58 个**（playground 的 `/gallery` 逐个渲染的就是这 58 个）。组件目录共 51 个（一个目录可产出多个导出符号，如 `ZlTag` 目录同时产出 `ZlTag` / `ZlCornerTag`）。§3.1~§3.5 按功能分组列出业务组件，其中混列了 4 个**不对外导出**的内部子组件（`ZlHorizontalLayout` / `ZlVerticalLayout` / `ZlAppMenuItem` / `ZlFileFetchError`，见 §3.7），去掉这 4 个后正好 58 个。
 
 > **要查精确的 props / 事件 / 插槽 / 暴露方法 / schema 类型？** 直接看 **[§14 组件 API 参考](#14-组件-api-参考自动生成)**——逐个组件给出 `import`、可直接照抄的 **用法示例**（props 怎么写）与 **插槽用法**（`<template #name>` 怎么写），再用表格列出 TS 类型表达式、默认值、是否必填，**且每个 prop / 每个插槽都带一列「示例」**（能直接粘到标签上的写法），以及 `TableColumn` / `FormItem` / `SearchItem` / `ActionItem` 等 schema 类型的字段表。本章及 §4~§9 讲的是**场景化用法**，§14 是**逐字段的契约 + 可粘贴代码**。
 
@@ -486,7 +487,7 @@ defineTheme({
 
 > 页签/微前端类组件（`ZlMicroPage`/`ZlAppTabs`/`ZlPageTabs`/`ZlDevMenu`）与配套 composables（`usePageTabs` 等）均已移除，`0.5.0` 起组件库不含任何微前端能力。
 
-### 3.6 国际化基础设施（独立于 56 个业务组件）
+### 3.6 国际化基础设施（独立于 58 个业务组件）
 
 `ZlI18nProvider` —— 国际化根容器，将 Element Plus 语言包经 `<el-config-provider>` 挂载到 Element Plus（详见第 13 章）。
 
@@ -803,6 +804,16 @@ presetIconifyIcon(icons)
 
 来源：`@zl-ui-kit/composables`。`service` 统一签名：`(...args) => Promise<R>`。
 
+四个 hook 共享同一套状态与方法（`loading` / `data` / `error` / `status` / `run` / `runAsync` /
+`refresh` / `refreshAsync` / `cancel` / `mutate`），差别只在 `data` 怎么取：
+
+| Hook                   | 适用的接口响应                       | `data` 内容                                                                 |
+| ---------------------- | ------------------------------------ | --------------------------------------------------------------------------- |
+| `useRequest`           | 任意                                 | 原始响应 `R`                                                                |
+| `useDataRequest`       | 信封对象（如 `{ code, msg, data }`） | 解包后的 `响应[dataKey]`，取不到时回落到 `initialData`                      |
+| `usePageableRequest`   | 数组 **或** 分页对象                 | 数组原样返回；对象则 `{ ...响应, pageNum, pageSize }`（页码取本次请求入参） |
+| `usePaginationRequest` | 分页对象                             | 行数组，另给 `total` / `current` / `pageSize` / `change*`                   |
+
 #### `useRequest(service, options?, plugins?)` —— 基础形态
 
 ```ts
@@ -825,13 +836,82 @@ const { loading, data, error, status, run, runAsync, refresh, refreshAsync, canc
 | `options.onBefore/onSuccess/onError/onFinally` | 生命周期回调                                                |
 | `options.loadingDelay` / `refreshDeps`         | 延迟 loading / 依赖变更刷新                                 |
 
-#### `useDataRequest(service, { dataKey = 'data' })` —— 自动解包信封
+#### `useDataRequest(service, { dataKey = 'data' })` —— 解包信封响应
+
+适用：后端统一返回 `{ code, msg, data }` 这类信封，页面只关心内层业务数据。
+
+```ts
+const { data, loading, run, runAsync, refresh } = useDataRequest(getDetailApi)
+// data.value === 响应.data
+```
+
+| 选项          | 说明                                                                              |
+| ------------- | --------------------------------------------------------------------------------- |
+| `dataKey`     | 信封里承载业务数据的字段名，默认 `data`                                           |
+| `initialData` | 解包结果为空（未请求 / 该 key 不存在）时的兜底值，**按解包后的数据形态传**        |
+| `manual`      | `true` 时挂载不请求，需 `run` / `runAsync` 触发；其余选项与 `useRequest` 完全一致 |
+
+真实页面里最常见的三种写法：
 
 ```ts
-const { data } = useDataRequest(getChartDataApi, { dataKey: 'data' })
-// data.value === 响应里的 data 字段
+// 1) 自动请求 + 兜底：模板可直接渲染，不必到处判空
+const { data: detail, loading } = useDataRequest(getDetailApi, { initialData: {} })
+
+// 2) 手动触发：点击按钮 / 打开抽屉时再查
+const { data: detail, loading, runAsync } = useDataRequest(getDetailApi, { manual: true })
+async function open(row: { id: number }) {
+  const res = await runAsync({ id: row.id }) // res 是原始信封，不是解包后的 data
+  // 需要解包值请读 detail.value
+}
+
+// 3) service 用闭包读取 props（详情组件按 id 查询）
+const { data: detail, run: fetchDetail } = useDataRequest(() => getDetailApi({ id: props.id }))
+// props.id 变化后需自行 refresh() / run()，或把变化源放进 refreshDeps
 ```
 
+> 注意：`useDataRequest` 只适合**对象信封**。接口直接返回数组时 `rawData[dataKey]` 取不到值，
+> `data` 会恒等于 `initialData`——数组 / 分页响应请改用 `usePageableRequest` 或 `useRequest`。
+> 另外 `onSuccess(data, params)` 与 `runAsync()` 拿到的都是**原始响应 `R`**，不是解包后的值。
+
+#### `usePageableRequest(service, options?, plugins?)` —— 列表 / 分页响应适配
+
+适用：把「数组响应」和「分页对象响应」统一成同一份 `data`，供 `ZlSearchTable` / `ZlCardPage`
+或自定义列表使用。返回值与 `useRequest` 相同，只改写了 `data`：
+
+| 接口响应                                    | `data.value`                                                         |
+| ------------------------------------------- | -------------------------------------------------------------------- |
+| `TreeNode[]` 等数组                         | 原样返回数组                                                         |
+| `{ rows, total, pageNum, pageSize }` 等对象 | `{ ...响应, pageNum, pageSize }`（响应没回页码时用本次请求入参补齐） |
+
+```ts
+// 后端直接返回数组：data 就是数组，initialData 兜底空列表
+const { data: treeData, loading } = usePageableRequest(getTreeApi, { initialData: [] })
+
+// 后端返回分页对象：data.rows 是行数据，data.pageNum / data.pageSize 已被补齐
+const { data: pageData, loading, run } = usePageableRequest(getPageApi, { manual: true })
+run({ pageNum: 2, pageSize: 20 })
+// pageData.value.rows / total / pageNum / pageSize
+```
+
+**它不提供 `total` / `current` / `pageSize` / 翻页方法**——需要自己控制分页器时用
+`usePaginationRequest`；只是给组件喂数据、或读取 `loading` / `refresh` 时用 `usePageableRequest`。
+
+**实例形态直传组件**（页面侧要接管 `loading` / `refresh` 时）：
+
+```ts
+const cardRequest = usePageableRequest(getPageApi, { manual: true, initialData: [] })
+// 组件内部的搜索 / 翻页仍调用同一实例的 run，loading / data 与页面共享
+```
+
+```vue
+<ZlCardPage :request="cardRequest" card-min-width="200px" :pagination="{ pageSize: 6 }">
+  <template #default="{ data }">…</template>
+</ZlCardPage>
+```
+
+> `ZlSearchTable` / `ZlCardPage` 默认在内部自行创建 `usePageableRequest`，**页面直接传 service 即可**；
+> 只有需要在页面里读取同一份 `loading` / `data` / `refresh` 时才传实例（见 §6.3 ⑨）。
+
 #### `usePaginationRequest(service, { pagination })` —— 分页专用
 
 额外返回 `data`(行数组) / `total` / `current` / `pageSize` / `changeCurrent` / `changePageSize` / `changePagination`，分页键名（`pageNum/pageSize/total/rows`）可配置，与后端契约对齐时通过 `pagination` 选项或 `setGlobalOptions` 调整。
@@ -1150,9 +1230,10 @@ const { data: treeData, loading: treeLoading } = treeReq
 `ZlChart` 显式 prop 为 `series`，其余配置（title/xAxis/yAxis/tooltip/grid）经 attrs 透传，故用 `v-bind` 传完整 echarts option：
 
 ```ts
-const chartReq = useDataRequest(getChartDataApi, { dataKey: 'data' })
+const chartReq = useDataRequest(getChartDataApi) // 默认 dataKey='data'
+const { data: chartData, loading: chartLoading } = chartReq // 顶层 ref 才会在模板自动解包
 const chartOption = computed(() => {
-  const d = chartReq.data.value
+  const d = chartData.value
   if (!d) return {}
   return {
     tooltip: { trigger: 'axis' },
@@ -1164,7 +1245,8 @@ const chartOption = computed(() => {
 ```
 
 ```vue
-<ZlChart v-bind="chartOption" />
+<el-skeleton v-if="chartLoading" :rows="5" />
+<ZlChart v-else v-bind="chartOption" />
 ```
 
 | Prop     | 类型                 | 说明                                                                                                                |
@@ -1174,7 +1256,44 @@ const chartOption = computed(() => {
 
 > 暴露方法：`clear()`（模板 ref 调用）。尺寸自适应由 `useResizeObserver` 负责，容器需有明确高度。
 
-#### ⑨ `useRequest` 生命周期面板
+需要「点击后再拉取」时用 `manual + runAsync`；`runAsync()` 返回原始信封，解包后的值仍看 `data`：
+
+```ts
+const { data: chartData, runAsync: fetchChartAsync } = useDataRequest(getChartDataApi, {
+  manual: true,
+})
+async function fetchChart() {
+  const res = await fetchChartAsync() // res: { code, msg, data }
+  console.log(res.code, chartData.value)
+}
+```
+
+#### ⑨ `usePageableRequest` —— 数组 / 分页对象 / 实例直传
+
+接口返回数组或分页对象都能用；组件需要自己接管 `loading` / `refresh` 时，直接传实例：
+
+```ts
+// 数组响应：data 原样是数组
+const { data: treeData, loading } = usePageableRequest(getTreeApi, { initialData: [] })
+
+// 分页对象响应：data.rows 是行数据，pageNum / pageSize 已用本次入参补齐
+const { data: pageData, loading, run } = usePageableRequest(getPageApi, { manual: true })
+run({ pageNum: 1, pageSize: 20 })
+
+// 实例形态直传 ZlCardPage：组件的搜索 / 翻页复用同一实例
+const cardRequest = usePageableRequest(getPageApi, { manual: true, initialData: [] })
+```
+
+```vue
+<ZlCardPage :request="cardRequest" card-min-width="200px" :pagination="{ pageSize: 6 }">
+  <template #default="{ data }">{{ data.name }}</template>
+</ZlCardPage>
+```
+
+> 与 `usePaginationRequest` 的区别：`usePageableRequest` 只改写 `data`、不提供 `total` / 翻页方法，
+> 用于给组件喂数据；页面要自己渲染分页器时用 `usePaginationRequest`（见 ③ / ④）。
+
+#### ⑩ `useRequest` 生命周期面板
 
 ```ts
 const req = useRequest(getResourcePageMaybeFail, { defaultParams: [{ pageNum: 1, pageSize: 5 }] })
@@ -1721,6 +1840,61 @@ treeRef.value.getCheckedKeys(true)
   插槽为 `logo` / `menu` / `header` / `breadcrumb` / `footer` / 默认（详见 §3.7），vertical 形态自带折叠按钮（`el-button circle`）。
 - `ZlAppMenu`(+Item)：`el-menu` 重写（index=menu.name），主题经 `--zl-menu-*` CSS 变量对接 `--el-menu-*`。
 
+### ZlMenu — 通用菜单
+
+`el-menu` 的 schema 封装：`items` 递归渲染多级菜单，`v-model:selected` 双向绑定选中项。
+与 `ZlAppMenu`（应用布局专用）不同，它不依赖布局，选中态、折叠、水平/垂直、跳转回调都可独立使用。
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { MenuOption } from '@zl-ui-kit/components'
+
+const selected = ref('datasource')
+const items: MenuOption[] = [
+  { key: 'datasource', label: '数据源', icon: 'zl:database' },
+  {
+    key: 'dataset',
+    label: '数据集',
+    icon: 'zl:folder',
+    children: [
+      { key: 'dataset-list', label: '数据集列表' },
+      { key: 'dataset-auth', label: '数据集授权', disabled: true },
+    ],
+  },
+]
+</script>
+
+<template>
+  <ZlMenu v-model:selected="selected" :items="items" @select="(key) => console.log(key)" />
+
+  <!-- 侧栏折叠 + 路由跳转 -->
+  <ZlMenu
+    v-model:selected="selected"
+    :items="items"
+    :collapsed="collapsed"
+    :navigate="(item) => router.push({ name: item.key })"
+  />
+
+  <!-- 顶部横向 -->
+  <ZlMenu v-model:selected="selected" :items="items" mode="horizontal" />
+</template>
+```
+
+| prop                 | 类型                         | 默认       | 说明                                     |
+| -------------------- | ---------------------------- | ---------- | ---------------------------------------- |
+| `items`              | `MenuOption[]`               | `[]`       | 菜单项配置，`children` 递归              |
+| `selected`           | `string`                     | `''`       | 选中项 key，支持 `v-model:selected`      |
+| `collapsed`          | `boolean`                    | false      | 是否收起为图标                           |
+| `mode`               | `'vertical' \| 'horizontal'` | `vertical` | 菜单方向                                 |
+| `uniqueOpened`       | `boolean`                    | false      | 是否只展开一个子菜单                     |
+| `defaultOpeneds`     | `string[]`                   | `[]`       | 默认展开的子菜单 key                     |
+| `collapseTransition` | `boolean`                    | false      | 折叠动画                                 |
+| `navigate`           | `(item: MenuOption) => void` | —          | 点击后的跳转回调（通常传 `router.push`） |
+
+`MenuOption` 字段：`key`（唯一标识）/ `label`（文案）/ `icon?`（`zl:*` 图标名）/ `disabled?` / `children?`。
+主题变量：`--zl-menu-text-color` / `--zl-menu-hover-bg`（与 `ZlAppMenu` 同口径）。
+
 ### ZlPermission
 
 配合 `usePermissionProvider` 提供权限上下文，`usePermission` 校验；样例见 `/general`。
@@ -3843,8 +4017,10 @@ const { i18n } = useLocale({ messages })
 | [`ZlDrawer`](#zldrawer)                     | 主入口              | 7     | 1    | 2    | 0    |
 | [`ZlDynamicComponent`](#zldynamiccomponent) | 主入口              | 3     | 2    | 0    | 0    |
 | [`ZlPdfViewer`](#zlpdfviewer)               | 主入口              | 2     | 0    | 0    | 0    |
+| [`ZlLoading`](#zlloading)                   | 主入口              | 2     | 0    | 1    | 0    |
 | [`ZlLogin`](#zllogin)                       | 主入口              | 2     | 0    | 2    | 0    |
 | [`ZlLoginForm`](#zlloginform)               | 主入口              | 1     | 0    | 1    | 0    |
+| [`ZlMenu`](#zlmenu)                         | 主入口              | 8     | 2    | 0    | 0    |
 | [`ZlEmpty`](#zlempty)                       | 主入口              | 2     | 0    | 0    | 0    |
 | [`ZlForm`](#zlform)                         | 主入口              | 3     | 0    | 3    | 9    |
 | [`ZlFormChild`](#zlformchild)               | 主入口              | 1     | 0    | 0    | 0    |
@@ -4846,6 +5022,49 @@ import { ZlPdfViewer } from '@zl-ui-kit/components'
 | `url`   | `string`           | —      | 否   | `url="https://example.com/file.pdf"` | PDF 文件地址，渲染时自动隐藏内置工具栏 |
 | `width` | `number \| string` | —      | 否   | `:width="width"`                     | 预览区宽度，直接透传给 object 元素     |
 
+#### `ZlLoading`
+
+<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlLoading/index.vue`</sub>
+
+**简介**：ZlLoading —— 带首次渲染保护的加载容器 首次加载完成前不渲染默认插槽，避免接口未回来时先闪一下空状态 / 空表格； 之后即使再次 loading，内容也保持挂载，只叠加载遮罩。
+
+**接口概览**：2 props · 1 插槽
+
+**用法示例**
+
+```vue
+<script setup lang="ts">
+import { ZlLoading } from '@zl-ui-kit/components'
+</script>
+
+<template>
+  <ZlLoading :loading="false" />
+</template>
+```
+
+**插槽用法**
+
+```vue
+<template>
+  <ZlLoading>
+    <template #default>…</template>
+  </ZlLoading>
+</template>
+```
+
+**props**
+
+| 属性          | 类型      | 默认值  | 必填 | 示例           | 说明                                                  |
+| ------------- | --------- | ------- | ---- | -------------- | ----------------------------------------------------- |
+| `loading`     | `boolean` | `false` | 否   | `loading`      | 是否处于加载中                                        |
+| `forceRender` | `boolean` | `false` | 否   | `force-render` | 是否首屏就渲染内容（默认等首次 loading 结束后再挂载） |
+
+**插槽（slots）**
+
+| 插槽      | 作用域参数 | 示例                              | 说明 |
+| --------- | ---------- | --------------------------------- | ---- |
+| `default` | —          | `<template #default>…</template>` | —    |
+
 #### `ZlLogin`
 
 <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlLogin/index.vue`</sub>
@@ -4943,6 +5162,58 @@ import { ZlLoginForm } from '@zl-ui-kit/components'
 | -------- | ---------- | -------------------------------- | ------------------------ |
 | `action` | —          | `<template #action>…</template>` | 登录按钮下方的扩展操作区 |
 
+#### `ZlMenu`
+
+<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlMenu/index.vue`</sub>
+
+**简介**：ZlMenu —— 通用 el-menu 封装 与 ZlAppMenu（应用布局专用）的区别：items 数据驱动 + v-model:selected 选中态， 可选 navigate 回调做路由跳转，适用于侧栏 / 顶部导航等任意菜单场景。
+
+**接口概览**：8 props · 2 事件
+
+**用法示例**
+
+```vue
+<script setup lang="ts">
+import { ZlMenu } from '@zl-ui-kit/components'
+</script>
+
+<template>
+  <ZlMenu v-model:selected="value" :items="items" />
+</template>
+```
+
+> 示例中的 `items` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
+
+**props**
+
+| 属性                 | 类型                                      | 默认值       | 必填 | 示例                       | 说明                                                              |
+| -------------------- | ----------------------------------------- | ------------ | ---- | -------------------------- | ----------------------------------------------------------------- |
+| `selected`           | `string`                                  | `''`         | 否   | `v-model:selected="value"` | 当前选中项 key，支持 v-model:selected                             |
+| `items`              | `MenuOption[]`<br>— 条目字段见下「items」 | `() => []`   | 否   | `:items="items"`           | 菜单项配置（支持 children 递归）                                  |
+| `collapsed`          | `boolean`                                 | `false`      | 否   | `collapsed`                | 是否收起为图标                                                    |
+| `mode`               | `'vertical' \| 'horizontal'`              | `'vertical'` | 否   | `mode="vertical"`          | 菜单方向：vertical / horizontal                                   |
+| `uniqueOpened`       | `boolean`                                 | `false`      | 否   | `unique-opened`            | 是否只展开一个子菜单                                              |
+| `defaultOpeneds`     | `string[]`                                | `() => []`   | 否   | `:default-openeds="[]"`    | 默认展开的子菜单 key 列表                                         |
+| `collapseTransition` | `boolean`                                 | `false`      | 否   | `collapse-transition`      | 折叠动画（默认关闭，避免布局抖动）                                |
+| `navigate`           | `(item: MenuOption) => void`              | —            | 否   | `:navigate="() => {}"`     | 点击菜单项后的跳转回调（通常传 router.push），不传则只触发 select |
+
+**`items` 条目字段（`MenuOption`）**
+
+| 字段       | 类型           | 必填 | 说明                                              |
+| ---------- | -------------- | ---- | ------------------------------------------------- |
+| `key`      | `string`       | 是   | 唯一标识：选中态、select 事件、路由跳转都以它为准 |
+| `label`    | `string`       | 是   | 菜单文案                                          |
+| `icon`     | `string`       | 否   | 图标名（@zl-ui-kit/icons 中的 `zl:*` 图标）       |
+| `disabled` | `boolean`      | 否   | 是否禁用                                          |
+| `children` | `MenuOption[]` | 否   | 子菜单                                            |
+
+**事件（emits）**
+
+| 事件              | 参数                 | 说明                 |
+| ----------------- | -------------------- | -------------------- |
+| `update:selected` | `string`             | `v-model` 更新       |
+| `select`          | `string, MenuOption` | 选中叶子菜单项时触发 |
+
 #### `ZlEmpty`
 
 <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlEmpty/index.vue`</sub>
@@ -4957,7 +5228,7 @@ import { ZlEmpty } from '@zl-ui-kit/components'
 </script>
 
 <template>
-  <ZlEmpty />
+  <ZlEmpty text="内容已加载" />
 </template>
 ```
 
@@ -6988,6 +7259,20 @@ ZlGrid 子项 schema
 | `slot`     | `boolean`                                                                          | 否   | 是否启用具名插槽（#key）渲染                                                 |
 | `ellipsis` | `number \| boolean`                                                                | 否   | 溢出省略行数（悬浮提示）                                                     |
 
+#### `MenuOption`
+
+<sub>源码 `packages/components/src/components/ZlMenu/types.ts`</sub>
+
+ZlMenu 菜单项配置
+
+| 字段       | 类型           | 必填 | 说明                                              |
+| ---------- | -------------- | ---- | ------------------------------------------------- |
+| `key`      | `string`       | 是   | 唯一标识：选中态、select 事件、路由跳转都以它为准 |
+| `label`    | `string`       | 是   | 菜单文案                                          |
+| `icon`     | `string`       | 否   | 图标名（@zl-ui-kit/icons 中的 `zl:*` 图标）       |
+| `disabled` | `boolean`      | 否   | 是否禁用                                          |
+| `children` | `MenuOption[]` | 否   | 子菜单                                            |
+
 #### `TableColumn`
 
 <sub>源码 `packages/components/src/types.ts`</sub>

package/dist/components/ZlLoading/index.css

@@ -0,0 +1 @@
+.zl-loading[data-v-2a50177b]{width:100%;height:100%;flex:1;min-width:1px;min-height:1px}

package/dist/components/ZlLoading/index.vue.d.ts

@@ -0,0 +1,27 @@
+type __VLS_Props = {
+    /** 是否处于加载中 */
+    loading?: boolean;
+    /** 是否首屏就渲染内容（默认等首次 loading 结束后再挂载） */
+    forceRender?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    loading: boolean;
+    forceRender: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=index.vue.d.ts.map

package/dist/components/ZlLoading/index.vue.mjs

@@ -0,0 +1,8 @@
+import o from "./index2.vue.mjs";
+import './index.css';/* empty css            */
+import t from "../../_virtual/_plugin-vue_export-helper.mjs";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2a50177b"]]);
+export {
+  p as default
+};
+//# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlLoading/index2.vue.mjs

@@ -0,0 +1,30 @@
+import { defineComponent as r, ref as l, watch as d, resolveDirective as i, withDirectives as c, openBlock as s, createElementBlock as f, renderSlot as u, createCommentVNode as m } from "vue";
+const p = { class: "zl-loading" }, _ = /* @__PURE__ */ r({
+  name: "ZlLoading",
+  __name: "index",
+  props: {
+    loading: { type: Boolean, default: !1 },
+    forceRender: { type: Boolean, default: !1 }
+  },
+  setup(o) {
+    const t = o, n = l(t.forceRender);
+    return d(
+      () => t.loading,
+      (e) => {
+        e || (n.value = !0);
+      },
+      { immediate: !0 }
+    ), (e, v) => {
+      const a = i("loading");
+      return c((s(), f("div", p, [
+        n.value ? u(e.$slots, "default", {}, void 0, !0, 0) : m("", !0)
+      ])), [
+        [a, o.loading]
+      ]);
+    };
+  }
+});
+export {
+  _ as default
+};
+//# sourceMappingURL=index2.vue.mjs.map

package/dist/components/ZlMenu/ZlMenuItem.vue.d.ts

@@ -0,0 +1,7 @@
+import { MenuOption } from './types';
+type __VLS_Props = {
+    item: MenuOption;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=ZlMenuItem.vue.d.ts.map

package/dist/components/ZlMenu/ZlMenuItem.vue.mjs

@@ -0,0 +1,53 @@
+import { defineComponent as k, resolveComponent as l, openBlock as t, createBlock as n, withCtx as i, createElementBlock as b, Fragment as s, renderList as y, createCommentVNode as c, createElementVNode as x, toDisplayString as o, createTextVNode as f } from "vue";
+import u from "../ZlIcon/index.vue.mjs";
+const M = /* @__PURE__ */ k({
+  name: "ZlMenuItem",
+  __name: "ZlMenuItem",
+  props: {
+    item: {}
+  },
+  setup(e) {
+    return (I, Z) => {
+      const d = l("ZlMenuItem", !0), a = l("el-sub-menu"), r = l("el-menu-item");
+      return e.item.children?.length ? (t(), n(a, {
+        key: 0,
+        index: e.item.key,
+        disabled: e.item.disabled
+      }, {
+        title: i(() => [
+          e.item.icon ? (t(), n(u, {
+            key: 0,
+            icon: e.item.icon
+          }, null, 8, ["icon"])) : c("", !0),
+          x("span", null, o(e.item.label), 1)
+        ]),
+        default: i(() => [
+          (t(!0), b(s, null, y(e.item.children, (m) => (t(), n(d, {
+            key: m.key,
+            item: m
+          }, null, 8, ["item"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["index", "disabled"])) : (t(), n(r, {
+        key: 1,
+        index: e.item.key,
+        disabled: e.item.disabled
+      }, {
+        title: i(() => [
+          f(o(e.item.label), 1)
+        ]),
+        default: i(() => [
+          e.item.icon ? (t(), n(u, {
+            key: 0,
+            icon: e.item.icon
+          }, null, 8, ["icon"])) : c("", !0)
+        ]),
+        _: 1
+      }, 8, ["index", "disabled"]));
+    };
+  }
+});
+export {
+  M as default
+};
+//# sourceMappingURL=ZlMenuItem.vue.mjs.map

package/dist/components/ZlMenu/ZlMenuItem2.vue.mjs

@@ -0,0 +1,5 @@
+import f from "./ZlMenuItem.vue.mjs";
+export {
+  f as default
+};
+//# sourceMappingURL=ZlMenuItem2.vue.mjs.map

package/dist/components/ZlMenu/index.vue.d.ts

@@ -0,0 +1,37 @@
+import { MenuOption } from './types';
+type __VLS_Props = {
+    /** 菜单项配置（支持 children 递归） */
+    items?: MenuOption[];
+    /** 是否收起为图标 */
+    collapsed?: boolean;
+    /** 菜单方向：vertical / horizontal */
+    mode?: 'vertical' | 'horizontal';
+    /** 是否只展开一个子菜单 */
+    uniqueOpened?: boolean;
+    /** 默认展开的子菜单 key 列表 */
+    defaultOpeneds?: string[];
+    /** 折叠动画（默认关闭，避免布局抖动） */
+    collapseTransition?: boolean;
+    /** 点击菜单项后的跳转回调（通常传 router.push），不传则只触发 select */
+    navigate?: (item: MenuOption) => void;
+};
+type __VLS_PublicProps = {
+    'selected'?: string;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:selected": (value: string) => any;
+} & {
+    select: (key: string, item: MenuOption) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((key: string, item: MenuOption) => any) | undefined;
+    "onUpdate:selected"?: ((value: string) => any) | undefined;
+}>, {
+    mode: "vertical" | "horizontal";
+    collapsed: boolean;
+    collapseTransition: boolean;
+    items: MenuOption[];
+    uniqueOpened: boolean;
+    defaultOpeneds: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=index.vue.d.ts.map

package/dist/components/ZlMenu/index.vue.mjs

@@ -0,0 +1,58 @@
+import { defineComponent as p, useModel as v, resolveComponent as B, openBlock as o, createBlock as u, withCtx as h, createElementBlock as g, Fragment as q, renderList as x, mergeModels as c } from "vue";
+import M from "./ZlMenuItem.vue.mjs";
+const y = /* @__PURE__ */ p({
+  name: "ZlMenu",
+  __name: "index",
+  props: /* @__PURE__ */ c({
+    items: { default: () => [] },
+    collapsed: { type: Boolean, default: !1 },
+    mode: { default: "vertical" },
+    uniqueOpened: { type: Boolean, default: !1 },
+    defaultOpeneds: { default: () => [] },
+    collapseTransition: { type: Boolean, default: !1 },
+    navigate: {}
+  }, {
+    selected: { default: "" },
+    selectedModifiers: {}
+  }),
+  emits: /* @__PURE__ */ c(["select"], ["update:selected"]),
+  setup(e, { emit: f }) {
+    const d = e, i = v(e, "selected"), r = f;
+    function s(n, t) {
+      for (const l of n) {
+        if (l.key === t) return l;
+        const a = l.children && s(l.children, t);
+        if (a) return a;
+      }
+    }
+    function m(n) {
+      const t = s(d.items, n);
+      !t || t.disabled || (i.value = n, r("select", n, t), d.navigate?.(t));
+    }
+    return (n, t) => {
+      const l = B("el-menu");
+      return o(), u(l, {
+        class: "zl-menu",
+        "default-active": i.value,
+        collapse: e.collapsed,
+        mode: e.mode,
+        "unique-opened": e.uniqueOpened,
+        "default-openeds": e.defaultOpeneds,
+        "collapse-transition": e.collapseTransition,
+        onSelect: m
+      }, {
+        default: h(() => [
+          (o(!0), g(q, null, x(e.items, (a) => (o(), u(M, {
+            key: a.key,
+            item: a
+          }, null, 8, ["item"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["default-active", "collapse", "mode", "unique-opened", "default-openeds", "collapse-transition"]);
+    };
+  }
+});
+export {
+  y as default
+};
+//# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlMenu/index3.vue.mjs

@@ -0,0 +1,6 @@
+import o from "./index.vue.mjs";
+import '../ZlAppMenu/AppMenu.css';/* empty css            */
+export {
+  o as default
+};
+//# sourceMappingURL=index3.vue.mjs.map

package/dist/components/ZlMenu/types.d.ts

@@ -0,0 +1,14 @@
+/** ZlMenu 菜单项配置 */
+export interface MenuOption {
+    /** 唯一标识：选中态、select 事件、路由跳转都以它为准 */
+    key: string;
+    /** 菜单文案 */
+    label: string;
+    /** 图标名（@zl-ui-kit/icons 中的 `zl:*` 图标） */
+    icon?: string;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 子菜单 */
+    children?: MenuOption[];
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/index.d.ts

@@ -19,8 +19,10 @@ export { default as ZlDictTag } from './components/ZlDictTag/index.vue';
 export { default as ZlDrawer } from './components/ZlDrawer/index.vue';
 export { default as ZlDynamicComponent } from './components/ZlDynamicComponent/index.vue';
 export { default as ZlPdfViewer } from './components/ZlPdfViewer/index.vue';
+export { default as ZlLoading } from './components/ZlLoading/index.vue';
 export { default as ZlLogin } from './components/ZlLogin/index.vue';
 export { default as ZlLoginForm } from './components/ZlLogin/components/LoginForm.vue';
+export { default as ZlMenu } from './components/ZlMenu/index.vue';
 export { default as ZlEmpty } from './components/ZlEmpty/index.vue';
 export { default as ZlForm } from './components/ZlForm/index.vue';
 export { default as ZlFormChild } from './components/ZlForm/ZlFormChild.vue';
@@ -60,6 +62,7 @@ export { usePagination } from './components/ZlPagination/usePagination';
 export { useTablePagination } from './components/ZlTable/useTablePagination';
 export { usePermission, usePermissionProvider } from './components/ZlPermission/usePermission';
 export type { MenuItem } from './components/ZlAppMenu/AppMenu.vue';
+export type { MenuOption } from './components/ZlMenu/types';
 export type { StepItem } from './components/ZlStep/index.vue';
 export type { ActionItem, FormItem, SearchItem, TableColumn } from './types';
 export type { IGridItem } from './components/ZlGrid/types';

package/dist/index.mjs

@@ -37,55 +37,58 @@ import I from "./components/ZlGrid/index.vue.mjs";
 /* empty css                              */
 import L from "./components/ZlHorizontalTable/index.vue.mjs";
 import D from "./components/ZlIcon/index.vue.mjs";
-import v from "./components/ZlI18nProvider/index.vue.mjs";
-import w from "./components/ZlIconHover/index.vue.mjs";
-import y from "./components/ZlIconLabel/index.vue.mjs";
+import y from "./components/ZlI18nProvider/index.vue.mjs";
+import v from "./components/ZlIconHover/index.vue.mjs";
+import w from "./components/ZlIconLabel/index.vue.mjs";
 /* empty css                                   */
-import F from "./components/ZlLayoutSwitch/index.vue.mjs";
+import M from "./components/ZlLayoutSwitch/index.vue.mjs";
+import F from "./components/ZlLoading/index.vue.mjs";
 import G from "./components/ZlLogin/index.vue.mjs";
 /* empty css                               */
-import M from "./components/ZlLogin/components/LoginForm.vue.mjs";
-import k from "./components/ZlPageContainer/index.vue.mjs";
-import z from "./components/ZlPagination/index.vue.mjs";
-import E from "./components/ZlPdfViewer/index.vue.mjs";
+import k from "./components/ZlLogin/components/LoginForm.vue.mjs";
+import z from "./components/ZlMenu/index.vue.mjs";
+/* empty css                              */
+import E from "./components/ZlPageContainer/index.vue.mjs";
+import H from "./components/ZlPagination/index.vue.mjs";
+import j from "./components/ZlPdfViewer/index.vue.mjs";
 /* empty css                                   */
-import H from "./components/ZlPermission/index.vue.mjs";
-import j from "./components/ZlPopconfirm/index.vue.mjs";
+import R from "./components/ZlPermission/index.vue.mjs";
+import V from "./components/ZlPopconfirm/index.vue.mjs";
 /* empty css                                    */
-import R from "./components/ZlRadioTag/index.vue.mjs";
+import q from "./components/ZlRadioTag/index.vue.mjs";
 /* empty css                                  */
-import V from "./components/ZlSearch/index.vue.mjs";
+import O from "./components/ZlSearch/index.vue.mjs";
 /* empty css                                */
-import q from "./components/ZlSearchTable/index.vue.mjs";
+import U from "./components/ZlSearchTable/index.vue.mjs";
 /* empty css                                     */
-import O from "./components/ZlSection/index.vue.mjs";
+import B from "./components/ZlSection/index.vue.mjs";
 /* empty css                                 */
-import U from "./components/ZlSorter/index.vue.mjs";
-import B from "./components/ZlSorter/ZlSorterList.vue.mjs";
-import J from "./components/ZlStep/index.vue.mjs";
-import K from "./components/ZlSwitch/index.vue.mjs";
+import J from "./components/ZlSorter/index.vue.mjs";
+import K from "./components/ZlSorter/ZlSorterList.vue.mjs";
+import N from "./components/ZlStep/index.vue.mjs";
+import Q from "./components/ZlSwitch/index.vue.mjs";
 /* empty css                                */
-import N from "./components/ZlTable/index.vue.mjs";
+import W from "./components/ZlTable/index.vue.mjs";
 /* empty css                               */
-import Q from "./components/ZlTabs/index.vue.mjs";
+import X from "./components/ZlTabs/index.vue.mjs";
 /* empty css                              */
-import W from "./components/ZlTag/index.vue.mjs";
+import Y from "./components/ZlTag/index.vue.mjs";
 /* empty css                             */
-import X from "./components/ZlText/index.vue.mjs";
-import Y from "./components/ZlTitle/index.vue.mjs";
-import oo from "./components/ZlTree/index.vue.mjs";
+import oo from "./components/ZlText/index.vue.mjs";
+import ro from "./components/ZlTitle/index.vue.mjs";
+import mo from "./components/ZlTree/index.vue.mjs";
 /* empty css                              */
-import ro from "./components/ZlTreeSelect/index.vue.mjs";
-import mo from "./components/ZlUpload/index.vue.mjs";
-import { presetIconifyIcon as Gr } from "./components/ZlIcon/presetIconifyIcon.mjs";
-import { usePagination as kr } from "./components/ZlPagination/usePagination.mjs";
-import { useTablePagination as Er } from "./components/ZlTable/useTablePagination.mjs";
-import { usePermission as jr, usePermissionProvider as Rr } from "./components/ZlPermission/usePermission.mjs";
-import { createZlI18n as qr } from "./locales/createZlI18n.mjs";
-import { default as Ur } from "./locales/en.mjs";
-import { zlMessages as Jr } from "./locales/messages.mjs";
-import { default as Nr } from "./locales/zh-cn.mjs";
-const io = {
+import io from "./components/ZlTreeSelect/index.vue.mjs";
+import to from "./components/ZlUpload/index.vue.mjs";
+import { presetIconifyIcon as Hr } from "./components/ZlIcon/presetIconifyIcon.mjs";
+import { usePagination as Rr } from "./components/ZlPagination/usePagination.mjs";
+import { useTablePagination as qr } from "./components/ZlTable/useTablePagination.mjs";
+import { usePermission as Ur, usePermissionProvider as Br } from "./components/ZlPermission/usePermission.mjs";
+import { createZlI18n as Kr } from "./locales/createZlI18n.mjs";
+import { default as Qr } from "./locales/en.mjs";
+import { zlMessages as Xr } from "./locales/messages.mjs";
+import { default as om } from "./locales/zh-cn.mjs";
+const ao = {
   ZlAction: i,
   ZlActionList: t,
   ZlAddSub: a,
@@ -112,41 +115,43 @@ const io = {
   ZlGrid: I,
   ZlHorizontalTable: L,
   ZlIcon: D,
-  ZlI18nProvider: v,
-  ZlIconHover: w,
-  ZlIconLabel: y,
+  ZlI18nProvider: y,
+  ZlIconHover: v,
+  ZlIconLabel: w,
   ZlCornerTag: g,
-  ZlLayoutSwitch: F,
+  ZlLayoutSwitch: M,
+  ZlLoading: F,
   ZlLogin: G,
-  ZlLoginForm: M,
-  ZlPageContainer: k,
-  ZlPagination: z,
-  ZlPdfViewer: E,
-  ZlPermission: H,
-  ZlPopconfirm: j,
-  ZlRadioTag: R,
-  ZlSearch: V,
-  ZlSearchTable: q,
-  ZlSection: O,
-  ZlSorter: U,
-  ZlSorterList: B,
-  ZlStep: J,
-  ZlSwitch: K,
-  ZlTable: N,
-  ZlTabs: Q,
-  ZlTag: W,
-  ZlText: X,
-  ZlTitle: Y,
-  ZlUpload: mo,
-  ZlTree: oo,
-  ZlTreeSelect: ro
+  ZlLoginForm: k,
+  ZlMenu: z,
+  ZlPageContainer: E,
+  ZlPagination: H,
+  ZlPdfViewer: j,
+  ZlPermission: R,
+  ZlPopconfirm: V,
+  ZlRadioTag: q,
+  ZlSearch: O,
+  ZlSearchTable: U,
+  ZlSection: B,
+  ZlSorter: J,
+  ZlSorterList: K,
+  ZlStep: N,
+  ZlSwitch: Q,
+  ZlTable: W,
+  ZlTabs: X,
+  ZlTag: Y,
+  ZlText: oo,
+  ZlTitle: ro,
+  ZlUpload: to,
+  ZlTree: mo,
+  ZlTreeSelect: io
 };
-function to(o) {
-  Object.entries(io).forEach(([r, m]) => {
+function lo(o) {
+  Object.entries(ao).forEach(([r, m]) => {
     o.component(r, m);
   });
 }
-const wr = { install: to };
+const kr = { install: lo };
 export {
   i as ZlAction,
   t as ZlActionList,
@@ -174,44 +179,46 @@ export {
   I as ZlGrid,
   x as ZlGridItem,
   L as ZlHorizontalTable,
-  v as ZlI18nProvider,
+  y as ZlI18nProvider,
   D as ZlIcon,
-  w as ZlIconHover,
-  y as ZlIconLabel,
-  F as ZlLayoutSwitch,
+  v as ZlIconHover,
+  w as ZlIconLabel,
+  M as ZlLayoutSwitch,
+  F as ZlLoading,
   G as ZlLogin,
-  M as ZlLoginForm,
-  k as ZlPageContainer,
-  z as ZlPagination,
-  E as ZlPdfViewer,
-  H as ZlPermission,
-  j as ZlPopconfirm,
-  R as ZlRadioTag,
-  V as ZlSearch,
-  q as ZlSearchTable,
-  O as ZlSection,
-  U as ZlSorter,
-  B as ZlSorterList,
-  J as ZlStep,
-  K as ZlSwitch,
-  N as ZlTable,
-  Q as ZlTabs,
-  W as ZlTag,
-  X as ZlText,
-  Y as ZlTitle,
-  oo as ZlTree,
-  ro as ZlTreeSelect,
-  mo as ZlUpload,
-  qr as createZlI18n,
-  wr as default,
-  to as install,
-  Gr as presetIconifyIcon,
-  kr as usePagination,
-  jr as usePermission,
-  Rr as usePermissionProvider,
-  Er as useTablePagination,
-  Ur as zlEnMessages,
-  Jr as zlMessages,
-  Nr as zlZhMessages
+  k as ZlLoginForm,
+  z as ZlMenu,
+  E as ZlPageContainer,
+  H as ZlPagination,
+  j as ZlPdfViewer,
+  R as ZlPermission,
+  V as ZlPopconfirm,
+  q as ZlRadioTag,
+  O as ZlSearch,
+  U as ZlSearchTable,
+  B as ZlSection,
+  J as ZlSorter,
+  K as ZlSorterList,
+  N as ZlStep,
+  Q as ZlSwitch,
+  W as ZlTable,
+  X as ZlTabs,
+  Y as ZlTag,
+  oo as ZlText,
+  ro as ZlTitle,
+  mo as ZlTree,
+  io as ZlTreeSelect,
+  to as ZlUpload,
+  Kr as createZlI18n,
+  kr as default,
+  lo as install,
+  Hr as presetIconifyIcon,
+  Rr as usePagination,
+  Ur as usePermission,
+  Br as usePermissionProvider,
+  qr as useTablePagination,
+  Qr as zlEnMessages,
+  Xr as zlMessages,
+  om as zlZhMessages
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zl-ui-kit/components",
-  "version": "0.18.7",
+  "version": "0.19.0",
   "type": "module",
   "description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "file-type": "^20.4.1",
     "dt-sql-parser": "^4.3.1",
     "sql-formatter": "^15.4.2",
-    "@zl-ui-kit/composables": "0.18.7",
-    "@zl-ui-kit/icons": "0.18.7",
-    "@zl-ui-kit/utils": "0.18.7"
+    "@zl-ui-kit/icons": "0.19.0",
+    "@zl-ui-kit/composables": "0.19.0",
+    "@zl-ui-kit/utils": "0.19.0"
   },
   "peerDependencies": {
     "@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
@@ -98,10 +98,10 @@
     "@vue-office/pdf": "^2.0.10",
     "@vue-office/pptx": "1.0.1",
     "echarts": "^5.6.0",
+    "@jichuang/vite-config": "1.0.0",
     "@jichuang/eslint-config": "1.0.0",
     "@jichuang/tsconfig": "1.0.0",
-    "@jichuang/vite-config": "1.0.0",
-    "@zl-ui-kit/theme": "0.18.7"
+    "@zl-ui-kit/theme": "0.19.0"
   },
   "repository": {
     "type": "git",