@zl-ui-kit/components 0.26.2 → 0.27.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -4115,7 +4115,7 @@ const { i18n } = useLocale({ messages })
4115
4115
  | [`ZlAction`](#zlaction) | 主入口 | 1 | 0 | 0 | 0 |
4116
4116
  | [`ZlActionList`](#zlactionlist) | 主入口 | 6 | 1 | 1 | 0 |
4117
4117
  | [`ZlAddSub`](#zladdsub) | 主入口 | 2 | 1 | 1 | 0 |
4118
- | [`ZlAppLayout`](#zlapplayout) | 主入口 | 1 | 0 | 8 | 0 |
4118
+ | [`ZlAppLayout`](#zlapplayout) | 主入口 | 5 | 0 | 8 | 0 |
4119
4119
  | [`ZlAppSlogan`](#zlappslogan) | 主入口 | 3 | 0 | 0 | 0 |
4120
4120
  | [`ZlAutoTooltip`](#zlautotooltip) | 主入口 | 0 | 0 | 1 | 0 |
4121
4121
  | [`ZlAvatar`](#zlavatar) | 主入口 | 3 | 0 | 0 | 0 |
@@ -4137,7 +4137,7 @@ const { i18n } = useLocale({ messages })
4137
4137
  | [`ZlLoading`](#zlloading) | 主入口 | 2 | 0 | 1 | 0 |
4138
4138
  | [`ZlLogin`](#zllogin) | 主入口 | 2 | 0 | 2 | 0 |
4139
4139
  | [`ZlLoginForm`](#zlloginform) | 主入口 | 1 | 0 | 1 | 0 |
4140
- | [`ZlMenu`](#zlmenu) | 主入口 | 8 | 2 | 0 | 0 |
4140
+ | [`ZlMenu`](#zlmenu) | 主入口 | 9 | 2 | 0 | 0 |
4141
4141
  | [`ZlEmpty`](#zlempty) | 主入口 | 2 | 0 | 0 | 0 |
4142
4142
  | [`ZlForm`](#zlform) | 主入口 | 3 | 0 | 3 | 9 |
4143
4143
  | [`ZlFormChild`](#zlformchild) | 主入口 | 1 | 0 | 0 | 0 |
@@ -4325,7 +4325,7 @@ import { ZlAddSub } from '@zl-ui-kit/components'
4325
4325
 
4326
4326
  <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAppLayout/index.vue`</sub>
4327
4327
 
4328
- **接口概览**:1 props · 8 插槽
4328
+ **接口概览**:5 props · 8 插槽
4329
4329
 
4330
4330
  **用法示例**
4331
4331
 
@@ -4358,9 +4358,13 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
4358
4358
 
4359
4359
  **props**
4360
4360
 
4361
- | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
4362
- | -------- | ---------------------------------------------- | ---------------- | ---- | --------------------- | ---------------------------------------------------------------------------- |
4363
- | `layout` | `'horizontal' \| 'vertical' \| 'header-aside'` | `'header-aside'` | 否 | `layout="horizontal"` | 布局方向:横向用顶部菜单,纵向用侧边菜单,header-aside 用通栏顶栏 + 侧边菜单 |
4361
+ | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
4362
+ | ------------------ | ---------------------------------------------- | ---------------- | ---- | --------------------------------------- | ---------------------------------------------------------------------------- |
4363
+ | `layout` | `'horizontal' \| 'vertical' \| 'header-aside'` | `'header-aside'` | 否 | `layout="horizontal"` | 布局方向:横向用顶部菜单,纵向用侧边菜单,header-aside 用通栏顶栏 + 侧边菜单 |
4364
+ | `headerBg` | `string` | `undefined` | 否 | `header-bg="header-bg"` | 顶栏背景:支持颜色/渐变/图片URL |
4365
+ | `asideBg` | `string` | `undefined` | 否 | `aside-bg="aside-bg"` | 侧栏背景:支持颜色/渐变/图片URL |
4366
+ | `contentBg` | `string` | `undefined` | 否 | `content-bg="content-bg"` | 内容区背景:支持颜色/渐变/图片URL |
4367
+ | `breadcrumbBorder` | `string` | `undefined` | 否 | `breadcrumb-border="breadcrumb-border"` | 面包屑底边框样式,如 '1px solid #e3e9ef',传 'none' 隐藏 |
4364
4368
 
4365
4369
  > 选项式组件(`defineComponent`),props 定义在 `props: {}` 中
4366
4370
  > 把 `$attrs` 透传给内部组件,未列出的属性会继续下传
@@ -4379,28 +4383,6 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
4379
4383
  | `menu` | — | `<template #menu>…</template>` | 顶栏中部菜单区(横向形态下占满剩余宽度) |
4380
4384
  | `logo` | `v-bind="{ collapsed }"` 展开 | `<template #logo="{ collapsed }">…</template>` | 侧栏顶部 logo 区(纵向形态下作用域带 `{ collapsed }`,可据此在折叠态隐去文字) |
4381
4385
 
4382
- **CSS 变量(背景配置)**
4383
-
4384
- 各区域背景通过 CSS 变量配置,支持颜色、渐变色、图片:
4385
-
4386
- | 变量 | 适用区域 | 默认值 | 说明 |
4387
- | ------------------------- | -------- | ------------------------------------- | -------------------------------------- |
4388
- | `--zl-layout-header-bg` | 顶栏 | `#fff` | 支持纯色、`linear-gradient`、`url()` |
4389
- | `--zl-layout-aside-bg` | 侧边栏 | `var(--zl-fill-1, #f9fbfd)` | 支持纯色、`linear-gradient`、`url()` |
4390
- | `--zl-layout-content-bg` | 内容区 | `transparent` | 支持纯色、`linear-gradient`、`url()` |
4391
-
4392
- ```css
4393
- /* 使用示例 */
4394
- .my-layout {
4395
- /* 顶栏:渐变色 */
4396
- --zl-layout-header-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
4397
- /* 侧边栏:深色 */
4398
- --zl-layout-aside-bg: #1a1a2e;
4399
- /* 内容区:图片背景 */
4400
- --zl-layout-content-bg: url('/bg.png');
4401
- }
4402
- ```
4403
-
4404
4386
  #### `ZlAppSlogan`
4405
4387
 
4406
4388
  <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlAppSlogan/index.vue`</sub>
@@ -5433,7 +5415,7 @@ import { ZlLoginForm } from '@zl-ui-kit/components'
5433
5415
 
5434
5416
  **简介**:ZlMenu —— 通用 el-menu 封装 items 数据驱动 + v-model:selected 选中态,可选 navigate 回调做路由跳转, 适用于侧栏 / 顶部导航等任意菜单场景(已取代原 `ZlAppMenu`)。
5435
5417
 
5436
- **接口概览**:8 props · 2 事件
5418
+ **接口概览**:9 props · 2 事件
5437
5419
 
5438
5420
  **用法示例**
5439
5421
 
@@ -5460,6 +5442,7 @@ import { ZlMenu } from '@zl-ui-kit/components'
5460
5442
  | `uniqueOpened` | `boolean` | `false` | 否 | `unique-opened` | 是否只展开一个子菜单 |
5461
5443
  | `defaultOpeneds` | `string[]` | `() => []` | 否 | `:default-openeds="[]"` | 默认展开的子菜单 key 列表 |
5462
5444
  | `collapseTransition` | `boolean` | `false` | 否 | `collapse-transition` | 折叠动画(默认关闭,避免布局抖动) |
5445
+ | `collapseWidth` | `number` | `64` | 否 | `:collapse-width="1"` | 折叠后的宽度(px),需与侧栏折叠宽度一致,默认 64(EP 默认值) |
5463
5446
  | `navigate` | `(item: MenuOption) => void` | — | 否 | `:navigate="() => {}"` | 点击菜单项后的跳转回调(通常传 router.push),不传则只触发 select |
5464
5447
 
5465
5448
  **`items` 条目字段(`MenuOption`)**
@@ -1 +1 @@
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:var(--zl-layout-content-bg, transparent);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}
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}
@@ -1 +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}
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, 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}
@@ -1 +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}
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: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}
@@ -8,6 +8,26 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
8
8
  type: () => "horizontal" | "vertical" | "header-aside";
9
9
  default: string;
10
10
  };
11
+ /** 顶栏背景:支持颜色/渐变/图片URL */
12
+ headerBg: {
13
+ type: StringConstructor;
14
+ default: undefined;
15
+ };
16
+ /** 侧栏背景:支持颜色/渐变/图片URL */
17
+ asideBg: {
18
+ type: StringConstructor;
19
+ default: undefined;
20
+ };
21
+ /** 内容区背景:支持颜色/渐变/图片URL */
22
+ contentBg: {
23
+ type: StringConstructor;
24
+ default: undefined;
25
+ };
26
+ /** 面包屑底边框样式,如 '1px solid #e3e9ef',传 'none' 隐藏 */
27
+ breadcrumbBorder: {
28
+ type: StringConstructor;
29
+ default: undefined;
30
+ };
11
31
  }>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
12
32
  [key: string]: any;
13
33
  }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
@@ -16,8 +36,32 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
16
36
  type: () => "horizontal" | "vertical" | "header-aside";
17
37
  default: string;
18
38
  };
39
+ /** 顶栏背景:支持颜色/渐变/图片URL */
40
+ headerBg: {
41
+ type: StringConstructor;
42
+ default: undefined;
43
+ };
44
+ /** 侧栏背景:支持颜色/渐变/图片URL */
45
+ asideBg: {
46
+ type: StringConstructor;
47
+ default: undefined;
48
+ };
49
+ /** 内容区背景:支持颜色/渐变/图片URL */
50
+ contentBg: {
51
+ type: StringConstructor;
52
+ default: undefined;
53
+ };
54
+ /** 面包屑底边框样式,如 '1px solid #e3e9ef',传 'none' 隐藏 */
55
+ breadcrumbBorder: {
56
+ type: StringConstructor;
57
+ default: undefined;
58
+ };
19
59
  }>> & Readonly<{}>, {
20
60
  layout: "horizontal" | "vertical" | "header-aside";
61
+ headerBg: string;
62
+ asideBg: string;
63
+ contentBg: string;
64
+ breadcrumbBorder: string;
21
65
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
22
66
  export default _default;
23
67
  //# sourceMappingURL=index.vue.d.ts.map
@@ -1,18 +1,36 @@
1
- import { defineComponent as r, defineAsyncComponent as t, h as i } from "vue";
2
- const l = r({
1
+ import { defineComponent as i, computed as l, defineAsyncComponent as r, h as u } from "vue";
2
+ function a(e) {
3
+ if (e)
4
+ return /^(url\(|linear-gradient|radial-gradient|#|rgb|rgba|hsl|hsla)/.test(e) ? e : `url(${e})`;
5
+ }
6
+ const y = i({
3
7
  name: "ZlAppLayout",
4
8
  props: {
5
9
  /** 布局方向:横向用顶部菜单,纵向用侧边菜单,header-aside 用通栏顶栏 + 侧边菜单 */
6
- layout: { type: String, default: "header-aside" }
10
+ layout: { type: String, default: "header-aside" },
11
+ /** 顶栏背景:支持颜色/渐变/图片URL */
12
+ headerBg: { type: String, default: void 0 },
13
+ /** 侧栏背景:支持颜色/渐变/图片URL */
14
+ asideBg: { type: String, default: void 0 },
15
+ /** 内容区背景:支持颜色/渐变/图片URL */
16
+ contentBg: { type: String, default: void 0 },
17
+ /** 面包屑底边框样式,如 '1px solid #e3e9ef',传 'none' 隐藏 */
18
+ breadcrumbBorder: { type: String, default: void 0 }
7
19
  },
8
- setup(o, { slots: a, attrs: n }) {
20
+ setup(e, { slots: n, attrs: d }) {
21
+ const o = l(() => ({
22
+ "--zl-layout-header-bg": a(e.headerBg),
23
+ "--zl-layout-aside-bg": a(e.asideBg),
24
+ "--zl-layout-content-bg": a(e.contentBg),
25
+ "--zl-breadcrumb-border": e.breadcrumbBorder
26
+ }));
9
27
  return () => {
10
- let e;
11
- 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);
28
+ let t;
29
+ return e.layout === "vertical" ? t = r(() => import("./Vertical.vue.mjs")) : e.layout === "header-aside" ? t = r(() => import("./HeaderAside.vue.mjs")) : t = r(() => import("./Horizontal.vue.mjs")), u(t, { ...d, style: o.value }, n);
12
30
  };
13
31
  }
14
32
  });
15
33
  export {
16
- l as default
34
+ y as default
17
35
  };
18
36
  //# sourceMappingURL=index.vue.mjs.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zl-ui-kit/components",
3
- "version": "0.26.2",
3
+ "version": "0.27.1",
4
4
  "type": "module",
5
5
  "description": "ZL UI 业务组件库(Element Plus 体系,Zl 前缀)——首批:Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
6
6
  "license": "MIT",
@@ -39,9 +39,9 @@
39
39
  "file-type": "^20.4.1",
40
40
  "dt-sql-parser": "^4.3.1",
41
41
  "sql-formatter": "^15.4.2",
42
- "@zl-ui-kit/composables": "0.26.2",
43
- "@zl-ui-kit/icons": "0.26.2",
44
- "@zl-ui-kit/utils": "0.26.2"
42
+ "@zl-ui-kit/composables": "0.27.1",
43
+ "@zl-ui-kit/icons": "0.27.1",
44
+ "@zl-ui-kit/utils": "0.27.1"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
@@ -100,9 +100,9 @@
100
100
  "@vue-office/pptx": "1.0.1",
101
101
  "echarts": "^5.6.0",
102
102
  "@jichuang/eslint-config": "1.0.0",
103
- "@jichuang/tsconfig": "1.0.0",
104
103
  "@jichuang/vite-config": "1.0.0",
105
- "@zl-ui-kit/theme": "0.26.2"
104
+ "@jichuang/tsconfig": "1.0.0",
105
+ "@zl-ui-kit/theme": "0.27.1"
106
106
  },
107
107
  "repository": {
108
108
  "type": "git",