@zl-ui-kit/components 0.18.8 → 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 章）。
 
@@ -1839,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`。
@@ -3961,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    |
@@ -4964,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>
@@ -5061,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>
@@ -5075,7 +5228,7 @@ import { ZlEmpty } from '@zl-ui-kit/components'
 </script>
 
 <template>
-  <ZlEmpty />
+  <ZlEmpty text="内容已加载" />
 </template>
 ```
 
@@ -7106,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.8",
+  "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/utils": "0.18.8",
-    "@zl-ui-kit/composables": "0.18.8",
-    "@zl-ui-kit/icons": "0.18.8"
+    "@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/tsconfig": "1.0.0",
-    "@zl-ui-kit/theme": "0.18.8",
+    "@jichuang/vite-config": "1.0.0",
     "@jichuang/eslint-config": "1.0.0",
-    "@jichuang/vite-config": "1.0.0"
+    "@jichuang/tsconfig": "1.0.0",
+    "@zl-ui-kit/theme": "0.19.0"
   },
   "repository": {
     "type": "git",