@zl-ui-kit/components 0.27.0 → 0.27.1

package/README.md

@@ -4115,7 +4115,7 @@ const { i18n } = useLocale({ messages })
 | [`ZlAction`](#zlaction)                     | 主入口              | 1     | 0    | 0    | 0    |
 | [`ZlActionList`](#zlactionlist)             | 主入口              | 6     | 1    | 1    | 0    |
 | [`ZlAddSub`](#zladdsub)                     | 主入口              | 2     | 1    | 1    | 0    |
-| [`ZlAppLayout`](#zlapplayout)               | 主入口              | 1     | 0    | 8    | 0    |
+| [`ZlAppLayout`](#zlapplayout)               | 主入口              | 5     | 0    | 8    | 0    |
 | [`ZlAppSlogan`](#zlappslogan)               | 主入口              | 3     | 0    | 0    | 0    |
 | [`ZlAutoTooltip`](#zlautotooltip)           | 主入口              | 0     | 0    | 1    | 0    |
 | [`ZlAvatar`](#zlavatar)                     | 主入口              | 3     | 0    | 0    | 0    |
@@ -4137,7 +4137,7 @@ const { i18n } = useLocale({ messages })
 | [`ZlLoading`](#zlloading)                   | 主入口              | 2     | 0    | 1    | 0    |
 | [`ZlLogin`](#zllogin)                       | 主入口              | 2     | 0    | 2    | 0    |
 | [`ZlLoginForm`](#zlloginform)               | 主入口              | 1     | 0    | 1    | 0    |
-| [`ZlMenu`](#zlmenu)                         | 主入口              | 8     | 2    | 0    | 0    |
+| [`ZlMenu`](#zlmenu)                         | 主入口              | 9     | 2    | 0    | 0    |
 | [`ZlEmpty`](#zlempty)                       | 主入口              | 2     | 0    | 0    | 0    |
 | [`ZlForm`](#zlform)                         | 主入口              | 3     | 0    | 3    | 9    |
 | [`ZlFormChild`](#zlformchild)               | 主入口              | 1     | 0    | 0    | 0    |
@@ -4358,13 +4358,13 @@ 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 用通栏顶栏 + 侧边菜单 |
+| `headerBg`         | `string`                                       | `undefined`      | 否   | `header-bg="header-bg"`                 | 顶栏背景：支持颜色/渐变/图片URL                                              |
+| `asideBg`          | `string`                                       | `undefined`      | 否   | `aside-bg="aside-bg"`                   | 侧栏背景：支持颜色/渐变/图片URL                                              |
+| `contentBg`        | `string`                                       | `undefined`      | 否   | `content-bg="content-bg"`               | 内容区背景：支持颜色/渐变/图片URL                                            |
+| `breadcrumbBorder` | `string`                                       | `undefined`      | 否   | `breadcrumb-border="breadcrumb-border"` | 面包屑底边框样式，如 '1px solid #e3e9ef'，传 'none' 隐藏                     |
 
 > 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
 > 把 `$attrs` 透传给内部组件，未列出的属性会继续下传
@@ -4383,28 +4383,6 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
 | `menu`       | —                             | `<template #menu>…</template>`                 | 顶栏中部菜单区（横向形态下占满剩余宽度）                                       |
 | `logo`       | `v-bind="{ collapsed }"` 展开 | `<template #logo="{ collapsed }">…</template>` | 侧栏顶部 logo 区（纵向形态下作用域带 `{ collapsed }`，可据此在折叠态隐去文字） |
 
-**背景配置**
-
-推荐使用 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()`   |
-| `--zl-breadcrumb-border`  | 面包屑   | `1px solid var(--zl-border-2, #e3e9ef)` | 传 `none` 隐藏                         |
-
 #### `ZlAppSlogan`
 
 <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAppSlogan/index.vue`</sub>
@@ -5437,7 +5415,7 @@ import { ZlLoginForm } from '@zl-ui-kit/components'
 
 **简介**：ZlMenu —— 通用 el-menu 封装 items 数据驱动 + v-model:selected 选中态，可选 navigate 回调做路由跳转， 适用于侧栏 / 顶部导航等任意菜单场景（已取代原 `ZlAppMenu`）。
 
-**接口概览**：8 props · 2 事件
+**接口概览**：9 props · 2 事件
 
 **用法示例**
 
@@ -5464,6 +5442,7 @@ import { ZlMenu } from '@zl-ui-kit/components'
 | `uniqueOpened`       | `boolean`                                 | `false`      | 否   | `unique-opened`            | 是否只展开一个子菜单                                              |
 | `defaultOpeneds`     | `string[]`                                | `() => []`   | 否   | `:default-openeds="[]"`    | 默认展开的子菜单 key 列表                                         |
 | `collapseTransition` | `boolean`                                 | `false`      | 否   | `collapse-transition`      | 折叠动画（默认关闭，避免布局抖动）                                |
+| `collapseWidth`      | `number`                                  | `64`         | 否   | `:collapse-width="1"`      | 折叠后的宽度（px），需与侧栏折叠宽度一致，默认 64（EP 默认值）    |
 | `navigate`           | `(item: MenuOption) => void`              | —            | 否   | `:navigate="() => {}"`     | 点击菜单项后的跳转回调（通常传 router.push），不传则只触发 select |
 
 **`items` 条目字段（`MenuOption`）**

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:var(--zl-breadcrumb-border, 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,6 @@
+import o from "./HeaderAside2.vue.mjs";
+import './HeaderAside.css';/* empty css                  */
+export {
+  o as default
+};
+//# sourceMappingURL=HeaderAside.vue.mjs.map

package/dist/components/ZlAppLayout/HeaderAside2.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=HeaderAside2.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-bottom:var(--zl-breadcrumb-border, 1px solid var(--zl-border-2, #e3e9ef));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: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:var(--zl-breadcrumb-border, 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/Vertical2.vue.mjs

@@ -1,53 +1,51 @@
-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 { 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 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__ */ _({
+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(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) }])
-      }, [
+  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, [
-          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")
-          ])
+          s(l.$slots, "logo", i(r({ collapsed: t(o) })))
         ]),
-        e("div", C, [
-          e("div", g, [
-            e("div", V, [
-              t(l.$slots, "breadcrumb")
+        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"])
             ]),
-            e("div", k, [
-              t(l.$slots, "header")
-            ])
+            _: 1
+          }),
+          s(l.$slots, "footer")
+        ])
+      ]),
+      e("div", b, [
+        e("div", g, [
+          e("div", C, [
+            s(l.$slots, "breadcrumb")
           ]),
-          e("div", B, [
-            t(l.$slots, "default")
+          e("div", V, [
+            s(l.$slots, "header")
           ])
+        ]),
+        e("div", k, [
+          s(l.$slots, "default")
         ])
-      ], 2);
-    };
+      ])
+    ], 2));
   }
 });
 export {

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

@@ -1,23 +1,67 @@
 /**
- * 应用布局：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;
     };
+    /** 顶栏背景：支持颜色/渐变/图片URL */
+    headerBg: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 侧栏背景：支持颜色/渐变/图片URL */
+    asideBg: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 内容区背景：支持颜色/渐变/图片URL */
+    contentBg: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 面包屑底边框样式，如 '1px solid #e3e9ef'，传 'none' 隐藏 */
+    breadcrumbBorder: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>, () => 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;
     };
+    /** 顶栏背景：支持颜色/渐变/图片URL */
+    headerBg: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 侧栏背景：支持颜色/渐变/图片URL */
+    asideBg: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 内容区背景：支持颜色/渐变/图片URL */
+    contentBg: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** 面包屑底边框样式，如 '1px solid #e3e9ef'，传 'none' 隐藏 */
+    breadcrumbBorder: {
+        type: StringConstructor;
+        default: undefined;
+    };
 }>> & Readonly<{}>, {
-    layout: "horizontal" | "vertical";
+    layout: "horizontal" | "vertical" | "header-aside";
+    headerBg: string;
+    asideBg: string;
+    contentBg: string;
+    breadcrumbBorder: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=index.vue.d.ts.map