@zl-ui-kit/components 0.27.0 → 0.27.2

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>
 
-**接口概览**：5 props · 8 插槽
+**接口概览**：1 props · 8 插槽
 
 **用法示例**
 
@@ -4358,13 +4358,9 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
 
 **props**
 
-| 属性                 | 类型                                           | 默认值           | 必填 | 示例                                               | 说明                                                                         |
-| -------------------- | ---------------------------------------------- | ---------------- | ---- | -------------------------------------------------- | ---------------------------------------------------------------------------- |
-| `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'` 隐藏                 |
+| 属性     | 类型                                           | 默认值           | 必填 | 示例                  | 说明                                                                         |
+| -------- | ---------------------------------------------- | ---------------- | ---- | --------------------- | ---------------------------------------------------------------------------- |
+| `layout` | `'horizontal' \| 'vertical' \| 'header-aside'` | `'header-aside'` | 否   | `layout="horizontal"` | 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 |
 
 > 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
 > 把 `$attrs` 透传给内部组件，未列出的属性会继续下传
@@ -4383,27 +4379,27 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
 | `menu`       | —                             | `<template #menu>…</template>`                 | 顶栏中部菜单区（横向形态下占满剩余宽度）                                       |
 | `logo`       | `v-bind="{ collapsed }"` 展开 | `<template #logo="{ collapsed }">…</template>` | 侧栏顶部 logo 区（纵向形态下作用域带 `{ collapsed }`，可据此在折叠态隐去文字） |
 
-**背景配置**
+**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 变量配置（向后兼容）：
+各区域背景通过 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()`   |
-| `--zl-breadcrumb-border`  | 面包屑   | `1px solid var(--zl-border-2, #e3e9ef)` | 传 `none` 隐藏                         |
+
+```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');
+}
+```
 
 #### `ZlAppSlogan`
 

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

@@ -1,13 +1,13 @@
-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 = {
+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 = {
   key: 2,
   class: "zl-action-list__separator"
-}, W = /* @__PURE__ */ Z({
+}, X = /* @__PURE__ */ j({
   name: "ZlActionList",
   __name: "List",
   props: {
@@ -19,19 +19,19 @@ const q = { class: "zl-action-list" }, G = {
     separator: { type: Boolean }
   },
   emits: ["action"],
-  setup(b, { emit: P }) {
-    const { t: M } = D(), t = b, B = P, k = C(() => {
+  setup(b, { emit: M }) {
+    const { t: B } = F(), t = b, N = M, k = g(() => {
       if (t.iconMore === !0)
-        return { icon: "zl:operate-color" };
-      if (F(t.iconMore))
-        return { icon: "zl:operate-color", ...t.iconMore };
+        return { icon: "zl:password-color" };
+      if (I(t.iconMore))
+        return { icon: "zl:password-color", ...t.iconMore };
     });
-    function N(o) {
-      return o.permission ? I(o.permission).value : !0;
+    function V(o) {
+      return o.permission ? q(o.permission).value : !0;
     }
-    const u = C(() => {
+    const a = g(() => {
       const o = t.actions.filter((l) => {
-        const d = N(l);
+        const d = V(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,69 +39,72 @@ const q = { class: "zl-action-list" }, G = {
         more: o.slice(t.listCount - 1)
       };
     });
-    function m(o) {
-      o.disabled || (B("action", o, ...t.actionArgs), typeof o.handler == "function" && o.handler(...t.actionArgs, o));
+    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;
     }
     return (o, l) => {
-      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, {
+      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, {
           key: e.label
         }, [
-          e.tooltip && e.icon ? (n(), r(d, {
+          e.tooltip && e.icon && y(e) ? (n(), r(d, {
             key: 0,
-            content: e.label,
+            content: y(e),
             placement: "top"
           }, {
             default: i(() => [
-              h(A, f({
+              h(P, f({
                 icon: e.icon
               }, { ref_for: !0 }, e.iconProps, {
-                onClick: _((L) => m(e), ["stop"])
+                onClick: _((Z) => p(e), ["stop"])
               }), null, 16, ["icon", "onClick"])
             ]),
             _: 2
-          }, 1032, ["content"])) : (n(), r(y, {
+          }, 1032, ["content"])) : (n(), r(C, {
             key: 1,
             class: "zl-action-list__action",
             type: "primary",
-            underline: !1,
+            underline: "never",
             disabled: e.disabled,
-            onClick: _((L) => m(e), ["stop"])
+            onClick: _((Z) => p(e), ["stop"])
           }, {
             default: i(() => [
-              e.icon ? (n(), r(w, f({
+              e.icon ? (n(), r(A, f({
                 key: 0,
                 icon: e.icon
-              }, { ref_for: !0 }, e.iconProps), null, 16, ["icon"])) : a("", !0),
-              j("span", null, v(e.label), 1)
+              }, { ref_for: !0 }, e.iconProps), null, 16, ["icon"])) : u("", !0),
+              E("span", null, v(e.label), 1)
             ]),
             _: 2
           }, 1032, ["disabled", "onClick"])),
-          b.separator ? (n(), c("div", G)) : a("", !0)
+          b.separator ? (n(), c("div", H)) : u("", !0)
         ], 64))), 128)),
-        u.value.more.length ? (n(), r(x, {
+        a.value.more.length ? (n(), r(L, {
           key: 0,
           trigger: "hover",
           placement: "bottom-end",
           class: "zl-action-list__more",
-          onCommand: m
+          onCommand: p
         }, {
           dropdown: i(() => [
-            h($, null, {
+            h(x, null, {
               default: i(() => [
-                (n(!0), c(p, null, g(u.value.more, (e) => (n(), r(V, {
+                (n(!0), c(m, null, w(a.value.more, (e) => (n(), r($, {
                   key: e.label,
                   command: e,
                   disabled: e.disabled,
                   divided: e.divided
                 }, {
                   default: i(() => [
-                    e.icon ? (n(), r(w, {
+                    e.icon ? (n(), r(A, {
                       key: 0,
                       icon: e.icon,
-                      class: T(e.iconClass)
-                    }, null, 8, ["icon", "class"])) : a("", !0),
+                      class: D(e.iconClass)
+                    }, null, 8, ["icon", "class"])) : u("", !0),
                     z(" " + v(e.label), 1)
                   ]),
                   _: 2
@@ -111,29 +114,29 @@ const q = { class: "zl-action-list" }, G = {
             })
           ]),
           default: i(() => [
-            E(o.$slots, "more", {}, () => [
-              k.value ? (n(), r(A, O(f({ key: 0 }, k.value)), null, 16)) : (n(), r(y, {
+            O(o.$slots, "more", {}, () => [
+              k.value ? (n(), r(P, S(f({ key: 0 }, k.value)), null, 16)) : (n(), r(C, {
                 key: 1,
                 class: "zl-action-list__more-icon",
                 type: "primary",
-                underline: !1,
+                underline: "never",
                 onClick: l[0] || (l[0] = _(() => {
                 }, ["stop"]))
               }, {
                 default: i(() => [
-                  z(v(S(M)("zl.action.more", "更多")), 1)
+                  z(v(T(B)("zl.action.more", "更多")), 1)
                 ]),
                 _: 1
               }))
             ])
           ]),
           _: 3
-        })) : a("", !0)
+        })) : u("", !0)
       ]);
     };
   }
 });
 export {
-  W as default
+  X as default
 };
 //# sourceMappingURL=List.vue.mjs.map

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

@@ -1,3 +1,9 @@
-declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+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>;
 export default _default;
 //# sourceMappingURL=index.vue.d.ts.map

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

@@ -1,15 +1,19 @@
-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 { 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 './List.css';/* empty css           */
 const h = /* @__PURE__ */ r({
   name: "ZlAction",
   __name: "index",
-  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" })
+  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" })
         ]),
         _: 1
       }, 16);

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

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

package/dist/components/ZlAppLayout/HeaderAside.css

@@ -0,0 +1 @@
+.zl-layout-header-aside{height:100%;display:flex;flex-direction:column}.zl-layout-header-aside.collapsed .zl-layout-header-aside__aside{width:64px}.zl-layout-header-aside.collapsed .zl-layout-header-aside__aside__footer{padding-inline:8px}.zl-layout-header-aside__header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;background:var(--zl-layout-header-bg, var(--zl-layout-horizontal-header-bg, #fff));background-size:cover;background-position:center;border-bottom:var(--zl-layout-header-border-bottom, none)}.zl-layout-header-aside__logo{padding:10px 16px}.zl-layout-header-aside__user{flex:0 0 auto;padding-right:16px}.zl-layout-header-aside__body{flex:1;height:1px;display:flex}.zl-layout-header-aside__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-header-aside__aside__content{flex:1;height:1px;overflow-y:auto;overflow-x:hidden}.zl-layout-header-aside__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-header-aside__main{flex:1;width:1px;display:flex;flex-direction:column;background-image:var(--zl-layout-content-bg, none);background-size:cover;background-position:center}.zl-layout-header-aside__breadcrumb{padding:10px 16px;border-bottom:1px solid var(--zl-border-2, #e3e9ef);line-height:24px;background-color:transparent}.zl-layout-header-aside__content{flex:1;padding:12px;height:1px}

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

@@ -0,0 +1,25 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        logo?(_: {}): any;
+        header?(_: {}): any;
+        menu?(_: {
+            collapsed: boolean;
+        }): any;
+        footer?(_: {}): any;
+        breadcrumb?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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=HeaderAside.vue.d.ts.map

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

@@ -0,0 +1,65 @@
+import { defineComponent as n, openBlock as l, createElementBlock as d, normalizeClass as c, unref as t, createElementVNode as o, renderSlot as s, createCommentVNode as r, normalizeProps as u, guardReactiveProps as h, createVNode as _, withCtx as m } from "vue";
+import { useToggle as y } from "@vueuse/core";
+import f from "../ZlButton/index.vue.mjs";
+import p from "../ZlIcon/index.vue.mjs";
+const z = { class: "zl-layout-header-aside__header" }, v = {
+  key: 0,
+  class: "zl-layout-header-aside__logo"
+}, $ = {
+  key: 1,
+  class: "zl-layout-header-aside__user"
+}, b = { class: "zl-layout-header-aside__body" }, g = { class: "zl-layout-header-aside__aside" }, k = { class: "zl-layout-header-aside__aside__content" }, C = { class: "zl-layout-header-aside__aside__footer" }, N = { class: "zl-layout-header-aside__main" }, V = {
+  key: 0,
+  class: "zl-layout-header-aside__breadcrumb"
+}, A = { class: "zl-layout-header-aside__content" }, I = /* @__PURE__ */ n({
+  name: "ZlHeaderAsideLayout",
+  __name: "HeaderAside",
+  setup(B) {
+    const [a] = y(!1);
+    return (e, i) => (l(), d("div", {
+      class: c(["zl-layout-header-aside", { collapsed: t(a) }])
+    }, [
+      o("div", z, [
+        e.$slots.logo ? (l(), d("div", v, [
+          s(e.$slots, "logo")
+        ])) : r("", !0),
+        e.$slots.header ? (l(), d("div", $, [
+          s(e.$slots, "header")
+        ])) : r("", !0)
+      ]),
+      o("div", b, [
+        o("div", g, [
+          o("div", k, [
+            s(e.$slots, "menu", u(h({ collapsed: t(a) })))
+          ]),
+          o("div", C, [
+            _(f, {
+              circle: "",
+              onClick: i[0] || (i[0] = (E) => a.value = !t(a))
+            }, {
+              icon: m(() => [
+                _(p, {
+                  icon: t(a) ? "zl:slider-on-color" : "zl:slider-off-color"
+                }, null, 8, ["icon"])
+              ]),
+              _: 1
+            }),
+            s(e.$slots, "footer")
+          ])
+        ]),
+        o("div", N, [
+          e.$slots.breadcrumb ? (l(), d("div", V, [
+            s(e.$slots, "breadcrumb")
+          ])) : r("", !0),
+          o("div", A, [
+            s(e.$slots, "default")
+          ])
+        ])
+      ])
+    ], 2));
+  }
+});
+export {
+  I as default
+};
+//# sourceMappingURL=HeaderAside.vue.mjs.map

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

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

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-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}
+.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, none);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}

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

@@ -1,6 +1,42 @@
-import o from "./Horizontal2.vue.mjs";
-import './Horizontal.css';/* empty css                 */
+import { defineComponent as n, openBlock as e, createElementBlock as s, createElementVNode as a, renderSlot as t, createCommentVNode as l } from "vue";
+const r = { class: "zl-layout-horizontal" }, i = { class: "zl-layout-horizontal__header" }, d = {
+  key: 0,
+  class: "zl-layout-horizontal__logo"
+}, _ = {
+  key: 1,
+  class: "zl-layout-horizontal__menu"
+}, u = {
+  key: 2,
+  class: "zl-layout-horizontal__user"
+}, h = { class: "zl-layout-horizontal__main" }, c = {
+  key: 0,
+  class: "zl-layout-horizontal__tabs"
+}, $ = /* @__PURE__ */ n({
+  name: "ZlHorizontalLayout",
+  __name: "Horizontal",
+  setup(m) {
+    return (o, z) => (e(), s("div", r, [
+      a("div", i, [
+        o.$slots.logo ? (e(), s("div", d, [
+          t(o.$slots, "logo")
+        ])) : l("", !0),
+        o.$slots.menu ? (e(), s("div", _, [
+          t(o.$slots, "menu")
+        ])) : l("", !0),
+        o.$slots.header ? (e(), s("div", u, [
+          t(o.$slots, "header")
+        ])) : l("", !0)
+      ]),
+      a("div", h, [
+        o.$slots.breadcrumb ? (e(), s("div", c, [
+          t(o.$slots, "breadcrumb")
+        ])) : l("", !0),
+        t(o.$slots, "default")
+      ])
+    ]));
+  }
+});
 export {
-  o as default
+  $ as default
 };
 //# sourceMappingURL=Horizontal.vue.mjs.map

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

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

package/dist/components/ZlAppLayout/Vertical.css

@@ -1 +1 @@
-.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}
+.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, none);background-size:cover;background-position:center}

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

@@ -1,6 +1,54 @@
-import o from "./Vertical2.vue.mjs";
-import './Vertical.css';/* empty css               */
+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 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__ */ _({
+  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, [
+        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", $, [
+          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"])
+            ]),
+            _: 1
+          }),
+          s(l.$slots, "footer")
+        ])
+      ]),
+      e("div", b, [
+        e("div", g, [
+          e("div", C, [
+            s(l.$slots, "breadcrumb")
+          ]),
+          e("div", V, [
+            s(l.$slots, "header")
+          ])
+        ]),
+        e("div", k, [
+          s(l.$slots, "default")
+        ])
+      ])
+    ], 2));
+  }
+});
 export {
-  o as default
+  I as default
 };
 //# sourceMappingURL=Vertical.vue.mjs.map

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

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

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

@@ -1,23 +1,23 @@
 /**
- * 应用布局：horizontal（默认，顶部菜单）/ vertical（侧边菜单，可折叠）
+ * 应用布局：header-aside（默认，通栏顶栏 + 侧边菜单）/ horizontal（顶部菜单）/ vertical（侧边菜单，可折叠）
  * 插槽：logo/menu/breadcrumb/header/footer/default
  */
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
-    /** 布局方向：横向用顶部菜单，纵向用侧边菜单 */
+    /** 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 */
     layout: {
-        type: () => "horizontal" | "vertical";
+        type: () => "horizontal" | "vertical" | "header-aside";
         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";
+        type: () => "horizontal" | "vertical" | "header-aside";
         default: string;
     };
 }>> & Readonly<{}>, {
-    layout: "horizontal" | "vertical";
+    layout: "horizontal" | "vertical" | "header-aside";
 }, {}, {}, {}, 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,24 @@
-import { defineComponent as r, defineAsyncComponent as o, h as a } from "vue";
-const m = r({
+import { defineComponent as a, h as i } from "vue";
+import m from "./HeaderAside.vue.mjs";
+import './Vertical.css';import './Horizontal.css';import './HeaderAside.css';/* empty css                  */
+import n from "./Horizontal.vue.mjs";
+/* empty css                 */
+import p from "./Vertical.vue.mjs";
+/* empty css               */
+const y = a({
   name: "ZlAppLayout",
   props: {
-    /** 布局方向：横向用顶部菜单，纵向用侧边菜单 */
-    layout: { type: String, default: "horizontal" }
+    /** 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 */
+    layout: { type: String, default: "header-aside" }
   },
-  setup(t, { slots: n, attrs: e }) {
+  setup(e, { slots: o, attrs: r }) {
     return () => {
-      const p = t.layout === "horizontal" ? o(() => import("./Horizontal.vue.mjs")) : o(() => import("./Vertical.vue.mjs"));
-      return a(p, { ...e }, n);
+      let t;
+      return e.layout === "vertical" ? t = p : e.layout === "header-aside" ? t = m : t = n, i(t, { ...r }, o);
     };
   }
 });
 export {
-  m as default
+  y as default
 };
 //# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlAppSlogan/index.css

@@ -1 +1 @@
-@charset "UTF-8";.zl-app-slogan{width:100%;overflow:hidden;display:flex;align-items:center;gap:6px}.zl-app-slogan__logo{width:24px;aspect-ratio:1;object-fit:cover}.zl-app-slogan__text{white-space:nowrap;font-family:var(--zl-slogan-font-family, "PingFang SC", "Microsoft YaHei", sans-serif);color:var(--zl-menu-text-color, var(--zl-text-2));font-size:16px;font-weight:400;letter-spacing:1.6px;line-height:24px}
+@charset "UTF-8";.zl-app-slogan{width:100%;overflow:hidden;display:flex;align-items:center;gap:6px}.zl-app-slogan__logo{width:24px;aspect-ratio:1;object-fit:cover}.zl-app-slogan__logo--default{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background-color:var(--zl-primary-6, var(--el-color-primary));color:#fff;font-size:14px}.zl-app-slogan__text{white-space:nowrap;font-family:"PingFang TC",var(--zl-slogan-font-family, "PingFang SC", "Microsoft YaHei", sans-serif);color:var(--zl-slogan-color, var(--zl-primary-6, var(--el-color-primary)));font-size:20px;font-weight:500;letter-spacing:1px;line-height:24px}

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

@@ -1,7 +1,7 @@
 type __VLS_Props = {
     /** 为 true 时只显示 Logo，隐藏标题 */
     collapsed?: boolean;
-    /** 品牌 Logo 的图片地址 */
+    /** 品牌 Logo 的图片地址；不传时渲染内置默认 Logo 图标 */
     logo?: string;
     /** 应用标题文案，折叠时隐藏 */
     title?: string;