@zl-ui-kit/components 0.26.1 → 0.27.0

package/README.md

@@ -4325,7 +4325,7 @@ import { ZlAddSub } from '@zl-ui-kit/components'
 
 <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAppLayout/index.vue`</sub>
 
-**接口概览**：1 props · 8 插槽
+**接口概览**：5 props · 8 插槽
 
 **用法示例**
 
@@ -4358,9 +4358,13 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
 
 **props**
 
-| 属性     | 类型                                           | 默认值           | 必填 | 示例                  | 说明                                                                         |
-| -------- | ---------------------------------------------- | ---------------- | ---- | --------------------- | ---------------------------------------------------------------------------- |
-| `layout` | `'horizontal' \| 'vertical' \| 'header-aside'` | `'header-aside'` | 否   | `layout="horizontal"` | 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 |
+| 属性                 | 类型                                           | 默认值           | 必填 | 示例                                               | 说明                                                                         |
+| -------------------- | ---------------------------------------------- | ---------------- | ---- | -------------------------------------------------- | ---------------------------------------------------------------------------- |
+| `layout`             | `'horizontal' \| 'vertical' \| 'header-aside'` | `'header-aside'` | 否   | `layout="horizontal"`                              | 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 |
+| `header-bg`          | `string`                                       | —                | 否   | `header-bg="#fff"`                                 | 顶栏背景：支持颜色/渐变/图片URL，图片路径自动包装 `url()`                    |
+| `aside-bg`           | `string`                                       | —                | 否   | `aside-bg="linear-gradient(...)"`                  | 侧栏背景：支持颜色/渐变/图片URL                                              |
+| `content-bg`         | `string`                                       | —                | 否   | `content-bg="/bg.png"`                             | 内容区背景：支持颜色/渐变/图片URL                                            |
+| `breadcrumb-border`  | `string`                                       | —                | 否   | `breadcrumb-border="none"`                         | 面包屑底边框样式，如 `'1px solid #e3e9ef'`，传 `'none'` 隐藏                 |
 
 > 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
 > 把 `$attrs` 透传给内部组件，未列出的属性会继续下传
@@ -4379,27 +4383,27 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
 | `menu`       | —                             | `<template #menu>…</template>`                 | 顶栏中部菜单区（横向形态下占满剩余宽度）                                       |
 | `logo`       | `v-bind="{ collapsed }"` 展开 | `<template #logo="{ collapsed }">…</template>` | 侧栏顶部 logo 区（纵向形态下作用域带 `{ collapsed }`，可据此在折叠态隐去文字） |
 
-**CSS 变量（背景配置）**
+**背景配置**
 
-各区域背景通过 CSS 变量配置，支持颜色、渐变色、图片：
+推荐使用 props 方式（`header-bg` / `aside-bg` / `content-bg`），组件内部自动处理 `url()` 包装：
+
+```vue
+<ZlAppLayout
+  header-bg="linear-gradient(135deg, #667eea 0%, #764ba2 100%)"
+  aside-bg="#1a1a2e"
+  content-bg="/bg.png"
+  breadcrumb-border="none"
+/>
+```
+
+也可通过 CSS 变量配置（向后兼容）：
 
 | 变量                      | 适用区域 | 默认值                                | 说明                                   |
 | ------------------------- | -------- | ------------------------------------- | -------------------------------------- |
 | `--zl-layout-header-bg`   | 顶栏     | `#fff`                                | 支持纯色、`linear-gradient`、`url()`   |
 | `--zl-layout-aside-bg`    | 侧边栏   | `var(--zl-fill-1, #f9fbfd)`           | 支持纯色、`linear-gradient`、`url()`   |
 | `--zl-layout-content-bg`  | 内容区   | `transparent`                         | 支持纯色、`linear-gradient`、`url()`   |
-
-```css
-/* 使用示例 */
-.my-layout {
-  /* 顶栏：渐变色 */
-  --zl-layout-header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  /* 侧边栏：深色 */
-  --zl-layout-aside-bg: #1a1a2e;
-  /* 内容区：图片背景 */
-  --zl-layout-content-bg: url('/bg.png');
-}
-```
+| `--zl-breadcrumb-border`  | 面包屑   | `1px solid var(--zl-border-2, #e3e9ef)` | 传 `none` 隐藏                         |
 
 #### `ZlAppSlogan`
 

package/dist/components/ZlAction/List.vue.mjs

@@ -1,13 +1,13 @@
-import { defineComponent as j, computed as g, resolveComponent as s, openBlock as n, createElementBlock as c, Fragment as m, renderList as w, createBlock as r, withCtx as i, createVNode as h, mergeProps as f, withModifiers as _, createCommentVNode as u, createElementVNode as E, toDisplayString as v, renderSlot as O, normalizeProps as S, createTextVNode as z, unref as T, normalizeClass as D } from "vue";
-import { useZlT as F } from "@zl-ui-kit/composables";
-import { isPlainObject as I } from "@zl-ui-kit/utils";
-import A from "../ZlIcon/index.vue.mjs";
-import P from "../ZlIconHover/index.vue.mjs";
-import { usePermission as q } from "../ZlPermission/usePermission.mjs";
-const G = { class: "zl-action-list" }, H = {
+import { defineComponent as Z, computed as C, resolveComponent as s, openBlock as n, createElementBlock as c, Fragment as p, renderList as g, createBlock as r, withCtx as i, createVNode as h, mergeProps as f, withModifiers as _, createCommentVNode as a, createElementVNode as j, toDisplayString as v, renderSlot as E, normalizeProps as O, createTextVNode as z, unref as S, normalizeClass as T } from "vue";
+import { useZlT as D } from "@zl-ui-kit/composables";
+import { isPlainObject as F } from "@zl-ui-kit/utils";
+import w from "../ZlIcon/index.vue.mjs";
+import A from "../ZlIconHover/index.vue.mjs";
+import { usePermission as I } from "../ZlPermission/usePermission.mjs";
+const q = { class: "zl-action-list" }, G = {
   key: 2,
   class: "zl-action-list__separator"
-}, X = /* @__PURE__ */ j({
+}, W = /* @__PURE__ */ Z({
   name: "ZlActionList",
   __name: "List",
   props: {
@@ -19,19 +19,19 @@ const G = { class: "zl-action-list" }, H = {
     separator: { type: Boolean }
   },
   emits: ["action"],
-  setup(b, { emit: M }) {
-    const { t: B } = F(), t = b, N = M, k = g(() => {
+  setup(b, { emit: P }) {
+    const { t: M } = D(), t = b, B = P, k = C(() => {
       if (t.iconMore === !0)
-        return { icon: "zl:password-color" };
-      if (I(t.iconMore))
-        return { icon: "zl:password-color", ...t.iconMore };
+        return { icon: "zl:operate-color" };
+      if (F(t.iconMore))
+        return { icon: "zl:operate-color", ...t.iconMore };
     });
-    function V(o) {
-      return o.permission ? q(o.permission).value : !0;
+    function N(o) {
+      return o.permission ? I(o.permission).value : !0;
     }
-    const a = g(() => {
+    const u = C(() => {
       const o = t.actions.filter((l) => {
-        const d = V(l);
+        const d = N(l);
         return typeof l.visible == "function" ? l.visible(...t.visibleArgs, l) && d : (l.visible === void 0 || !!l.visible) && d;
       });
       return o.length <= t.listCount ? { list: o, more: [] } : {
@@ -39,72 +39,69 @@ const G = { class: "zl-action-list" }, H = {
         more: o.slice(t.listCount - 1)
       };
     });
-    function p(o) {
-      o.disabled || (N("action", o, ...t.actionArgs), typeof o.handler == "function" && o.handler(...t.actionArgs, o));
-    }
-    function y(o) {
-      return typeof o.tooltip == "string" ? o.tooltip : o.label;
+    function m(o) {
+      o.disabled || (B("action", o, ...t.actionArgs), typeof o.handler == "function" && o.handler(...t.actionArgs, o));
     }
     return (o, l) => {
-      const d = s("el-tooltip"), C = s("el-link"), $ = s("el-dropdown-item"), x = s("el-dropdown-menu"), L = s("el-dropdown");
-      return n(), c("div", G, [
-        (n(!0), c(m, null, w(a.value.list, (e) => (n(), c(m, {
+      const d = s("el-tooltip"), y = s("el-link"), V = s("el-dropdown-item"), $ = s("el-dropdown-menu"), x = s("el-dropdown");
+      return n(), c("div", q, [
+        (n(!0), c(p, null, g(u.value.list, (e) => (n(), c(p, {
           key: e.label
         }, [
-          e.tooltip && e.icon && y(e) ? (n(), r(d, {
+          e.tooltip && e.icon ? (n(), r(d, {
             key: 0,
-            content: y(e),
+            content: e.label,
             placement: "top"
           }, {
             default: i(() => [
-              h(P, f({
+              h(A, f({
                 icon: e.icon
               }, { ref_for: !0 }, e.iconProps, {
-                onClick: _((Z) => p(e), ["stop"])
+                onClick: _((L) => m(e), ["stop"])
               }), null, 16, ["icon", "onClick"])
             ]),
             _: 2
-          }, 1032, ["content"])) : (n(), r(C, {
+          }, 1032, ["content"])) : (n(), r(y, {
             key: 1,
             class: "zl-action-list__action",
             type: "primary",
-            underline: "never",
+            underline: !1,
             disabled: e.disabled,
-            onClick: _((Z) => p(e), ["stop"])
+            onClick: _((L) => m(e), ["stop"])
           }, {
             default: i(() => [
-              e.icon ? (n(), r(A, f({
+              e.icon ? (n(), r(w, f({
                 key: 0,
                 icon: e.icon
-              }, { ref_for: !0 }, e.iconProps), null, 16, ["icon"])) : u("", !0),
-              E("span", null, v(e.label), 1)
+              }, { ref_for: !0 }, e.iconProps), null, 16, ["icon"])) : a("", !0),
+              j("span", null, v(e.label), 1)
             ]),
             _: 2
           }, 1032, ["disabled", "onClick"])),
-          b.separator ? (n(), c("div", H)) : u("", !0)
+          b.separator ? (n(), c("div", G)) : a("", !0)
         ], 64))), 128)),
-        a.value.more.length ? (n(), r(L, {
+        u.value.more.length ? (n(), r(x, {
           key: 0,
           trigger: "hover",
           placement: "bottom-end",
           class: "zl-action-list__more",
-          onCommand: p
+          onCommand: m
         }, {
           dropdown: i(() => [
-            h(x, null, {
+            h($, null, {
               default: i(() => [
-                (n(!0), c(m, null, w(a.value.more, (e) => (n(), r($, {
+                (n(!0), c(p, null, g(u.value.more, (e) => (n(), r(V, {
                   key: e.label,
                   command: e,
                   disabled: e.disabled,
                   divided: e.divided
                 }, {
                   default: i(() => [
-                    e.icon ? (n(), r(A, {
+                    e.icon ? (n(), r(w, {
                       key: 0,
                       icon: e.icon,
-                      class: D(e.iconClass)
-                    }, null, 8, ["icon", "class"])) : u("", !0),
+                      class: T(e.iconClass)
+                    }, null, 8, ["icon", "class"])) : a("", !0),
                     z(" " + v(e.label), 1)
                   ]),
                   _: 2
@@ -114,29 +111,29 @@ const G = { class: "zl-action-list" }, H = {
             })
           ]),
           default: i(() => [
-            O(o.$slots, "more", {}, () => [
-              k.value ? (n(), r(P, S(f({ key: 0 }, k.value)), null, 16)) : (n(), r(C, {
+            E(o.$slots, "more", {}, () => [
+              k.value ? (n(), r(A, O(f({ key: 0 }, k.value)), null, 16)) : (n(), r(y, {
                 key: 1,
                 class: "zl-action-list__more-icon",
                 type: "primary",
-                underline: "never",
+                underline: !1,
                 onClick: l[0] || (l[0] = _(() => {
                 }, ["stop"]))
               }, {
                 default: i(() => [
-                  z(v(T(B)("zl.action.more", "更多")), 1)
+                  z(v(S(M)("zl.action.more", "更多")), 1)
                 ]),
                 _: 1
               }))
             ])
           ]),
           _: 3
-        })) : u("", !0)
+        })) : a("", !0)
       ]);
     };
   }
 });
 export {
-  X as default
+  W as default
 };
 //# sourceMappingURL=List.vue.mjs.map

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

@@ -1,9 +1,3 @@
-type __VLS_Props = {
-    /** 直接展示的操作数，超出收入"更多"下拉，默认 2；透传给 ZlActionList */
-    listCount?: number;
-};
-declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    listCount: number;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;
 //# sourceMappingURL=index.vue.d.ts.map

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

@@ -1,19 +1,15 @@
-import { defineComponent as r, resolveComponent as c, openBlock as s, createBlock as i, normalizeProps as p, guardReactiveProps as a, withCtx as l, createVNode as m } from "vue";
-import _ from "./List.vue.mjs";
+import { defineComponent as r, resolveComponent as n, openBlock as t, createBlock as c, normalizeProps as i, guardReactiveProps as a, withCtx as m, createVNode as p } from "vue";
+import s from "./List.vue.mjs";
 import './List.css';/* empty css           */
 const h = /* @__PURE__ */ r({
   name: "ZlAction",
   __name: "index",
-  props: {
-    listCount: { default: 2 }
-  },
-  setup(o) {
-    const e = o;
-    return (t, u) => {
-      const n = c("zl-icon-hover");
-      return s(), i(_, p(a({ ...t.$attrs, listCount: e.listCount })), {
-        more: l(() => [
-          m(n, { icon: "zl:password-color" })
+  setup(_) {
+    return (o, l) => {
+      const e = n("zl-icon-hover");
+      return t(), c(s, i(a({ ...o.$attrs, listCount: 2 })), {
+        more: m(() => [
+          p(e, { icon: "zl:password-color" })
         ]),
         _: 1
       }, 16);

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

@@ -10,11 +10,8 @@ export interface ActionItem {
     iconProps?: Record<string, any>;
     /** 图标自定义类名 */
     iconClass?: string;
-    /**
-     * 提示词：`true` 用 `label` 作为提示；传字符串则直接作为提示词（无需同时配置 `label`）。
-     * 仅对纯图标操作项生效（配置了 `icon`）。
-     */
-    tooltip?: boolean | string;
+    /** 是否用 tooltip 包住文案（文字过长时） */
+    tooltip?: boolean;
     /** 禁用（点击无响应） */
     disabled?: boolean;
     /** 与下一项之间显示分割线 */

package/dist/components/ZlAppLayout/Horizontal.css

@@ -1 +1 @@
-.zl-layout-horizontal{height:100%;display:flex;flex-direction:column}.zl-layout-horizontal__header{display:flex;align-items:center;background:var(--zl-layout-header-bg, var(--zl-layout-horizontal-header-bg, #fff));background-size:cover;background-position:center}.zl-layout-horizontal__logo{padding:10px 16px}.zl-layout-horizontal__menu{flex:1;width:1px}.zl-layout-horizontal__user{flex:0 0 auto;padding-right:16px}.zl-layout-horizontal__main{display:flex;flex-direction:column;flex:1;height:1px;padding:12px;border-radius:var(--zl-radius-medium, 4px);overflow:hidden;background:var(--zl-layout-content-bg, transparent);background-size:cover;background-position:center}.zl-layout-horizontal__tabs{padding:12px 16px;background-color:var(--zl-bg-1, #fff);border-radius:var(--zl-radius-medium, 4px) var(--zl-radius-medium, 4px) 0 0}
+.zl-layout-horizontal{height:100%;display:flex;flex-direction:column}.zl-layout-horizontal__header{display:flex;align-items:center;background:var(--zl-layout-horizontal-header-bg, #fff)}.zl-layout-horizontal__logo{padding:10px 16px}.zl-layout-horizontal__menu{flex:1;width:1px}.zl-layout-horizontal__user{flex:0 0 auto;padding-right:16px}.zl-layout-horizontal__main{display:flex;flex-direction:column;flex:1;height:1px;padding:12px;border-radius:var(--zl-radius-medium, 4px);overflow:hidden}.zl-layout-horizontal__tabs{padding:12px 16px;background-color:var(--zl-bg-1, #fff);border-radius:var(--zl-radius-medium, 4px) var(--zl-radius-medium, 4px) 0 0}

package/dist/components/ZlAppLayout/Vertical.css

@@ -1 +1 @@
-.zl-layout-vertical{height:100%;display:flex}.zl-layout-vertical.collapsed .zl-layout-vertical__aside{width:64px}.zl-layout-vertical.collapsed .zl-layout-vertical__aside__header{padding-inline:10px}.zl-layout-vertical.collapsed .zl-layout-vertical__aside__footer{padding-inline:8px}.zl-layout-vertical__aside{flex:0 0 auto;width:220px;background:var(--zl-layout-aside-bg, var(--zl-fill-1, #f9fbfd));background-size:cover;background-position:center;display:flex;flex-direction:column;overflow:hidden;transition:width .2s cubic-bezier(.34,.69,.1,1)}.zl-layout-vertical__aside__header{padding:12px 16px;overflow:hidden;border-bottom:1px solid var(--zl-border-1, #eff4f9);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.zl-layout-vertical__aside__content{flex:1;overflow-y:auto;overflow-x:hidden}.zl-layout-vertical__aside__footer{padding:12px 16px;display:flex;justify-content:flex-end;flex-wrap:wrap-reverse;gap:8px;transition:padding .2s cubic-bezier(.34,.69,.1,1)}.zl-layout-vertical__main{flex:1;width:1px;display:flex;flex-direction:column}.zl-layout-vertical__header{padding:10px 16px;border-bottom:1px solid var(--zl-border-2, #e3e9ef);line-height:24px;background:var(--zl-layout-header-bg, var(--zl-bg-1, #fff));background-size:cover;background-position:center;display:flex;justify-content:space-between}.zl-layout-vertical__content{flex:1;padding:12px;height:1px;background:var(--zl-layout-content-bg, transparent);background-size:cover;background-position:center}
+.zl-layout-vertical{height:100%;display:flex}.zl-layout-vertical.collapsed .zl-layout-vertical__aside{width:44px}.zl-layout-vertical.collapsed .zl-layout-vertical__aside__header{padding-inline:10px}.zl-layout-vertical.collapsed .zl-layout-vertical__aside__footer{padding-inline:8px}.zl-layout-vertical__aside{flex:0 0 auto;width:220px;background-image:var(--zl-layout-vertical-aside-bg, none);background-color:var(--zl-fill-1, #f9fbfd);background-size:cover;display:flex;flex-direction:column;transition:width .2s cubic-bezier(.34,.69,.1,1)}.zl-layout-vertical__aside__header{padding:12px 16px;overflow:hidden;border-bottom:1px solid var(--zl-border-1, #eff4f9);transition:padding .2s cubic-bezier(.34,.69,.1,1)}.zl-layout-vertical__aside__content{flex:1;overflow-y:auto}.zl-layout-vertical__aside__footer{padding:12px 16px;display:flex;justify-content:flex-end;flex-wrap:wrap-reverse;gap:8px;transition:padding .2s cubic-bezier(.34,.69,.1,1)}.zl-layout-vertical__main{flex:1;width:1px;display:flex;flex-direction:column}.zl-layout-vertical__header{padding:10px 16px;border-bottom:1px solid var(--zl-border-2, #e3e9ef);line-height:24px;background-color:var(--zl-bg-1, #fff);display:flex;justify-content:space-between}.zl-layout-vertical__content{flex:1;padding:12px;height:1px}

package/dist/components/ZlAppLayout/Vertical2.vue.mjs

@@ -1,51 +1,53 @@
-import { defineComponent as _, openBlock as d, createElementBlock as n, normalizeClass as u, unref as t, createElementVNode as e, renderSlot as s, normalizeProps as i, guardReactiveProps as r, createVNode as c, withCtx as v } from "vue";
-import { useToggle as m } from "@vueuse/core";
-import p from "../ZlButton/index.vue.mjs";
+import { defineComponent as _, resolveComponent as d, openBlock as u, createElementBlock as v, normalizeClass as m, unref as s, createElementVNode as e, renderSlot as t, normalizeProps as c, guardReactiveProps as i, createVNode as r, withCtx as p } from "vue";
+import { useToggle as z } from "@vueuse/core";
 import f from "../ZlIcon/index.vue.mjs";
-const z = { class: "zl-layout-vertical__aside" }, h = { class: "zl-layout-vertical__aside__header" }, y = { class: "zl-layout-vertical__aside__content" }, $ = { class: "zl-layout-vertical__aside__footer" }, b = { class: "zl-layout-vertical__main" }, g = { class: "zl-layout-vertical__header" }, C = { class: "zl-layout-vertical__breadcrumb" }, V = { class: "zl-layout-vertical__app-header" }, k = { class: "zl-layout-vertical__content" }, I = /* @__PURE__ */ _({
+const h = { class: "zl-layout-vertical__aside" }, y = { class: "zl-layout-vertical__aside__header" }, $ = { class: "zl-layout-vertical__aside__content" }, b = { class: "zl-layout-vertical__aside__footer" }, C = { class: "zl-layout-vertical__main" }, g = { class: "zl-layout-vertical__header" }, V = { class: "zl-layout-vertical__breadcrumb" }, k = { class: "zl-layout-vertical__app-header" }, B = { class: "zl-layout-vertical__content" }, I = /* @__PURE__ */ _({
   name: "ZlVerticalLayout",
   __name: "Vertical",
-  setup(B) {
-    const [o] = m(!1);
-    return (l, a) => (d(), n("div", {
-      class: u(["zl-layout-vertical", { collapsed: t(o) }])
-    }, [
-      e("div", z, [
+  setup(E) {
+    const [o] = z(!1);
+    return (l, a) => {
+      const n = d("el-button");
+      return u(), v("div", {
+        class: m(["zl-layout-vertical", { collapsed: s(o) }])
+      }, [
         e("div", h, [
-          s(l.$slots, "logo", i(r({ collapsed: t(o) })))
-        ]),
-        e("div", y, [
-          s(l.$slots, "menu", i(r({ collapsed: t(o) })))
+          e("div", y, [
+            t(l.$slots, "logo", c(i({ collapsed: s(o) })))
+          ]),
+          e("div", $, [
+            t(l.$slots, "menu", c(i({ collapsed: s(o) })))
+          ]),
+          e("div", b, [
+            r(n, {
+              circle: "",
+              onClick: a[0] || (a[0] = (N) => o.value = !s(o))
+            }, {
+              icon: p(() => [
+                r(f, {
+                  icon: s(o) ? "zl:slider-on-color" : "zl:slider-off-color"
+                }, null, 8, ["icon"])
+              ]),
+              _: 1
+            }),
+            t(l.$slots, "footer")
+          ])
         ]),
-        e("div", $, [
-          c(p, {
-            circle: "",
-            onClick: a[0] || (a[0] = (E) => o.value = !t(o))
-          }, {
-            icon: v(() => [
-              c(f, {
-                icon: t(o) ? "zl:slider-on-color" : "zl:slider-off-color"
-              }, null, 8, ["icon"])
+        e("div", C, [
+          e("div", g, [
+            e("div", V, [
+              t(l.$slots, "breadcrumb")
             ]),
-            _: 1
-          }),
-          s(l.$slots, "footer")
-        ])
-      ]),
-      e("div", b, [
-        e("div", g, [
-          e("div", C, [
-            s(l.$slots, "breadcrumb")
+            e("div", k, [
+              t(l.$slots, "header")
+            ])
           ]),
-          e("div", V, [
-            s(l.$slots, "header")
+          e("div", B, [
+            t(l.$slots, "default")
           ])
-        ]),
-        e("div", k, [
-          s(l.$slots, "default")
         ])
-      ])
-    ], 2));
+      ], 2);
+    };
   }
 });
 export {

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

@@ -1,23 +1,23 @@
 /**
- * 应用布局：header-aside（默认，通栏顶栏 + 侧边菜单）/ horizontal（顶部菜单）/ vertical（侧边菜单，可折叠）
+ * 应用布局：horizontal（默认，顶部菜单）/ vertical（侧边菜单，可折叠）
  * 插槽：logo/menu/breadcrumb/header/footer/default
  */
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    /** 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 */
+    /** 布局方向：横向用顶部菜单，纵向用侧边菜单 */
     layout: {
-        type: () => "horizontal" | "vertical" | "header-aside";
+        type: () => "horizontal" | "vertical";
         default: string;
     };
 }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
-    /** 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 */
+    /** 布局方向：横向用顶部菜单，纵向用侧边菜单 */
     layout: {
-        type: () => "horizontal" | "vertical" | "header-aside";
+        type: () => "horizontal" | "vertical";
         default: string;
     };
 }>> & Readonly<{}>, {
-    layout: "horizontal" | "vertical" | "header-aside";
+    layout: "horizontal" | "vertical";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=index.vue.d.ts.map

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

@@ -1,18 +1,18 @@
-import { defineComponent as r, defineAsyncComponent as t, h as i } from "vue";
-const l = r({
+import { defineComponent as r, defineAsyncComponent as o, h as a } from "vue";
+const m = r({
   name: "ZlAppLayout",
   props: {
-    /** 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 */
-    layout: { type: String, default: "header-aside" }
+    /** 布局方向：横向用顶部菜单，纵向用侧边菜单 */
+    layout: { type: String, default: "horizontal" }
   },
-  setup(o, { slots: a, attrs: n }) {
+  setup(t, { slots: n, attrs: e }) {
     return () => {
-      let e;
-      return o.layout === "vertical" ? e = t(() => import("./Vertical.vue.mjs")) : o.layout === "header-aside" ? e = t(() => import("./HeaderAside.vue.mjs")) : e = t(() => import("./Horizontal.vue.mjs")), i(e, { ...n }, a);
+      const p = t.layout === "horizontal" ? o(() => import("./Horizontal.vue.mjs")) : o(() => import("./Vertical.vue.mjs"));
+      return a(p, { ...e }, n);
     };
   }
 });
 export {
-  l as default
+  m as default
 };
 //# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlAppMenu/AppMenu.css

@@ -0,0 +1 @@
+.zl-menu.el-menu{--el-menu-bg-color: transparent;--el-menu-text-color: var(--zl-menu-text-color, var(--zl-text-2));--el-menu-active-color: var(--zl-menu-text-color, var(--zl-text-2));--el-menu-hover-bg-color: var(--zl-menu-hover-bg, var(--zl-fill-2));border-right:none;background-color:transparent}.zl-menu.el-menu .el-menu-item.is-active{background-color:var(--zl-menu-hover-bg, var(--zl-fill-2))}.zl-menu.el-menu:not(.el-menu--horizontal){font-size:12px}.zl-menu.el-menu:not(.el-menu--horizontal) .el-menu-item,.zl-menu.el-menu:not(.el-menu--horizontal) .el-sub-menu__title{height:36px;line-height:36px}.zl-menu.el-menu.el-menu--horizontal .el-menu-item,.zl-menu.el-menu.el-menu--horizontal .el-sub-menu__title{height:44px;line-height:44px}

package/dist/components/ZlAppMenu/AppMenu.vue.d.ts

@@ -0,0 +1,27 @@
+export interface MenuItem {
+    /** 唯一键 */
+    name: string;
+    title: string;
+    icon?: string;
+    children?: MenuItem[];
+    [key: string]: any;
+}
+type __VLS_Props = {
+    /** 菜单是否收起为图标，侧栏折叠时用 */
+    collapsed?: boolean;
+    /** el-menu 模式：vertical / horizontal */
+    layout?: 'vertical' | 'horizontal';
+    /** 菜单树数据，递归渲染为多级菜单项 */
+    menus?: MenuItem[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "menu-item-click": (menu: MenuItem) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onMenu-item-click"?: ((menu: MenuItem) => any) | undefined;
+}>, {
+    layout: "vertical" | "horizontal";
+    collapsed: boolean;
+    menus: MenuItem[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=AppMenu.vue.d.ts.map

package/dist/components/ZlAppMenu/AppMenu.vue.mjs

@@ -0,0 +1,37 @@
+import { defineComponent as u, resolveComponent as s, openBlock as n, createBlock as l, withCtx as i, createElementBlock as r, Fragment as p, renderList as f } from "vue";
+import d from "./AppMenuItem.vue.mjs";
+const B = /* @__PURE__ */ u({
+  name: "ZlAppMenu",
+  __name: "AppMenu",
+  props: {
+    collapsed: { type: Boolean, default: !1 },
+    layout: { default: "vertical" },
+    menus: { default: () => [] }
+  },
+  emits: ["menu-item-click"],
+  setup(e, { emit: o }) {
+    const m = o;
+    return (k, _) => {
+      const a = s("el-menu");
+      return n(), l(a, {
+        class: "zl-menu",
+        collapse: e.collapsed,
+        mode: e.layout,
+        "collapse-transition": !1
+      }, {
+        default: i(() => [
+          (n(!0), r(p, null, f(e.menus, (t) => (n(), l(d, {
+            key: t.name,
+            menu: t,
+            onMenuItemClick: (c) => m("menu-item-click", c)
+          }, null, 8, ["menu", "onMenuItemClick"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["collapse", "mode"]);
+    };
+  }
+});
+export {
+  B as default
+};
+//# sourceMappingURL=AppMenu.vue.mjs.map

package/dist/components/ZlAppMenu/AppMenu3.vue.mjs

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

package/dist/components/ZlAppMenu/AppMenuItem.vue.d.ts

@@ -0,0 +1,11 @@
+import { MenuItem } from './AppMenu.vue';
+type __VLS_Props = {
+    menu: MenuItem;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "menu-item-click": (menu: MenuItem) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onMenu-item-click"?: ((menu: MenuItem) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=AppMenuItem.vue.d.ts.map

package/dist/components/ZlAppMenu/AppMenuItem.vue.mjs

@@ -0,0 +1,58 @@
+import { defineComponent as I, resolveComponent as i, openBlock as n, createBlock as t, withCtx as m, createElementBlock as M, Fragment as p, renderList as A, createCommentVNode as r, createElementVNode as g, toDisplayString as a, createTextVNode as h } from "vue";
+import d from "../ZlIcon/index.vue.mjs";
+const V = /* @__PURE__ */ I({
+  name: "ZlAppMenuItem",
+  __name: "AppMenuItem",
+  props: {
+    menu: {}
+  },
+  emits: ["menu-item-click"],
+  setup(e, { emit: k }) {
+    const f = e, s = k;
+    function l(c = f.menu) {
+      s("menu-item-click", c);
+    }
+    return (c, o) => {
+      const x = i("AppMenuItem", !0), y = i("el-sub-menu"), C = i("el-menu-item");
+      return e.menu.children?.length ? (n(), t(y, {
+        key: 0,
+        index: e.menu.name
+      }, {
+        title: m(() => [
+          e.menu.icon ? (n(), t(d, {
+            key: 0,
+            icon: e.menu.icon
+          }, null, 8, ["icon"])) : r("", !0),
+          g("span", null, a(e.menu.title), 1)
+        ]),
+        default: m(() => [
+          (n(!0), M(p, null, A(e.menu.children, (u) => (n(), t(x, {
+            key: u.name,
+            menu: u,
+            onMenuItemClick: l
+          }, null, 8, ["menu"]))), 128))
+        ]),
+        _: 1
+      }, 8, ["index"])) : (n(), t(C, {
+        key: 1,
+        index: e.menu.name,
+        onClick: o[0] || (o[0] = (u) => l())
+      }, {
+        title: m(() => [
+          h(a(e.menu.title), 1)
+        ]),
+        default: m(() => [
+          e.menu.icon ? (n(), t(d, {
+            key: 0,
+            icon: e.menu.icon
+          }, null, 8, ["icon"])) : r("", !0)
+        ]),
+        _: 1
+      }, 8, ["index"]));
+    };
+  }
+});
+export {
+  V as default
+};
+//# sourceMappingURL=AppMenuItem.vue.mjs.map

package/dist/components/ZlAppMenu/AppMenuItem2.vue.mjs

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