@zl-ui-kit/components 0.24.1 → 0.25.0
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 +77 -53
- package/dist/components/ZlAppLayout/HeaderAside.css +1 -0
- package/dist/components/ZlAppLayout/HeaderAside.vue.d.ts +25 -0
- package/dist/components/ZlAppLayout/HeaderAside.vue.mjs +6 -0
- package/dist/components/ZlAppLayout/HeaderAside2.vue.mjs +65 -0
- package/dist/components/ZlAppLayout/index.vue.d.ts +6 -6
- package/dist/components/ZlAppLayout/index.vue.mjs +8 -8
- package/dist/components/ZlSearch/index.vue.mjs +18 -18
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -157,15 +157,13 @@ import { ZlEditor, ZlSqlEditor } from '@zl-ui-kit/components/editor'
|
|
|
157
157
|
import { ZlFilePreview, ZlFileViewer } from '@zl-ui-kit/components/file-preview'
|
|
158
158
|
```
|
|
159
159
|
|
|
160
|
-
> 例外：`ZlPdfViewer` 没有重型依赖，仍留在主入口，`import { ZlPdfViewer } from '@zl-ui-kit/components'`。
|
|
160
|
+
> 例外：`ZlPdfViewer` 没有重型依赖，仍留在主入口，`import { ZlPdfViewer } from '@zl-ui-kit/components'`。
|
|
161
161
|
> `app.use(ZlUI)` 全量注册**不含**上述子入口组件，需要的话手动 `app.component('ZlChart', ZlChart)`。
|
|
162
162
|
|
|
163
163
|
**关于 `echarts` 版本**（`peerDependencies: "^5.6.0 || ^6.0.0"`，5.6+ 与 6.x 均支持）：
|
|
164
164
|
|
|
165
|
-
- `ZlChart` 内部是 `import * as echarts from 'echarts'`（全量包，开箱即用、无需自己 `use()`
|
|
166
|
-
|
|
167
|
-
此时可按需改用宿主实例自绘，或在构建里把 `echarts` 设为 external 由宿主提供。
|
|
168
|
-
- 升级到 **echarts 6** 后默认主题变了（配色、legend 默认挪到画布底部、轴标签防溢出默认开启），
|
|
165
|
+
- `ZlChart` 内部是 `import * as echarts from 'echarts'`（全量包，开箱即用、无需自己 `use()` 注册图表类型）；若宿主用 `echarts/core` + 按需注册，两者是两份独立实例，产物会同时含两份 echarts（实测约 +600KB）。此时可按需改用宿主实例自绘，或在构建里把 `echarts` 设为 external 由宿主提供。
|
|
166
|
+
- 升级到 **echarts 6** 后默认主题变了（配色、legend 默认挪到画布底部、轴标签防溢出默认开启），
|
|
169
167
|
想保持 v5 观感：`import 'echarts/theme/v5'` + `<ZlChart theme="v5" ... />`（`theme` prop 见 §6 ⑧）。
|
|
170
168
|
|
|
171
169
|
**关于 `@vueuse/core` 版本**（`peerDependencies: "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0"`，v12.3+ / v13 / v14 / v15 均支持）：
|
|
@@ -218,20 +216,18 @@ import '@zl-ui-kit/theme/themes.css'
|
|
|
218
216
|
|
|
219
217
|
> **`0.5.0` 起不再包含任何微前端依赖**
|
|
220
218
|
>
|
|
221
|
-
> 微前端通信层（`useMicroApp` / `useMicroAction` / `usePageTabs` / `useMicroGlobalData`）与
|
|
222
|
-
> `formatMicroUrl` 工具已全部移除，`@micro-zoe/micro-app` 不再是 peer 依赖 —— 安装本库不会
|
|
223
|
-
> 再拉入这个约 2.4MB 的包，`@zl-ui-kit/composables` 的产物里也没有它的静态 import
|
|
224
|
-
> （旧版在 Node 原生 ESM / SSR 下会因这条 import 报 `ERR_MODULE_NOT_FOUND`）。
|
|
225
|
-
> 全局数据（`locale` / `theme` / `token` / 用户 / 权限 / `config`）改用 `useGlobalData()`，
|
|
219
|
+
> 微前端通信层（`useMicroApp` / `useMicroAction` / `usePageTabs` / `useMicroGlobalData`）与
|
|
220
|
+
> `formatMicroUrl` 工具已全部移除，`@micro-zoe/micro-app` 不再是 peer 依赖 —— 安装本库不会
|
|
221
|
+
> 再拉入这个约 2.4MB 的包，`@zl-ui-kit/composables` 的产物里也没有它的静态 import
|
|
222
|
+
> （旧版在 Node 原生 ESM / SSR 下会因这条 import 报 `ERR_MODULE_NOT_FOUND`）。
|
|
223
|
+
> 全局数据（`locale` / `theme` / `token` / 用户 / 权限 / `config`）改用 `useGlobalData()`，
|
|
226
224
|
> 纯 `localStorage` 持久化；`useLocale`、主题、字典等能力的用法与行为不变。
|
|
227
225
|
|
|
228
226
|
> **两个「看起来像错、其实正常」的现象**
|
|
229
227
|
>
|
|
230
|
-
> 1. 只 import 主入口、没装 `echarts` / `monaco-editor` 时，Vite
|
|
231
|
-
>
|
|
232
|
-
>
|
|
233
|
-
> 2. `@zl-ui-kit/icons` 与 `@zl-ui-kit/utils` 在 **Node 原生 ESM** 下直接 import 会报错
|
|
234
|
-
> （前者是 JSON 缺 import attribute，后者依赖 CJS 包 `file-saver` 的具名导出）。
|
|
228
|
+
> 1. 只 import 主入口、没装 `echarts` / `monaco-editor` 时，Vite 会打印`"xxx" is not exported by "__vite-optional-peer-dep:monaco-editor"`。这是 Vite 对 optional peer 的内置 stub 机制：**警告不阻断构建**，装好对应依赖后警告消失。
|
|
229
|
+
> 2. `@zl-ui-kit/icons` 与 `@zl-ui-kit/utils` 在 **Node 原生 ESM** 下直接 import 会报错
|
|
230
|
+
> （前者是 JSON 缺 import attribute，后者依赖 CJS 包 `file-saver` 的具名导出）。
|
|
235
231
|
> Vite / webpack 打包的 Vue 项目不受影响；做 Node SSR 时把这两个包加进 `ssr.noExternal`。
|
|
236
232
|
|
|
237
233
|
### 1.2 宿主接入清单（从零到跑起来）
|
|
@@ -399,9 +395,9 @@ playground 的界面按 **Element Plus 官网的信息架构**组织（顶栏 +
|
|
|
399
395
|
| 组件页 | `/#/component/ZlTable`，依次是「基础用法」实时示例 → 用法示例 / 插槽用法代码块 → props/事件/插槽/暴露方法表（props 与插槽表各带一列「示例」） |
|
|
400
396
|
| 接口手册 | `/#/manual`，跨组件检索（按 props 名 / 事件名反查组件），支持 `?name=ZlTable` 直接定位 |
|
|
401
397
|
|
|
402
|
-
> 组件页的示例来自 `apps/playground/src/pages/gallery-demos.ts`（与冒烟测试同一份渲染函数），
|
|
403
|
-
> 接口表来自 `pnpm docs:api` 产物 —— 与本文件第 14 章同源：改完组件源码记得重跑，否则 `pnpm check` 会报产物过期。
|
|
404
|
-
> 两处的 **用法示例 / 插槽用法** 代码块也是同一份字符串，页面里可一键复制；
|
|
398
|
+
> 组件页的示例来自 `apps/playground/src/pages/gallery-demos.ts`（与冒烟测试同一份渲染函数），
|
|
399
|
+
> 接口表来自 `pnpm docs:api` 产物 —— 与本文件第 14 章同源：改完组件源码记得重跑，否则 `pnpm check` 会报产物过期。
|
|
400
|
+
> 两处的 **用法示例 / 插槽用法** 代码块也是同一份字符串，页面里可一键复制；
|
|
405
401
|
> 每个 prop / 插槽的「示例」列同样是同一份字符串（可直接粘贴的属性写法 / `<template #name>` 片段）。
|
|
406
402
|
|
|
407
403
|
> 注意：`@zl-ui-kit/theme/light`、`@zl-ui-kit/theme/themes.css` 等 CSS 子路径不走别名，读取 `src/generated/` 生成物——改主题 token 后需先 `pnpm --filter @zl-ui-kit/theme gen`。
|
|
@@ -482,7 +478,7 @@ defineTheme({
|
|
|
482
478
|
|
|
483
479
|
### 3.4 布局与权限
|
|
484
480
|
|
|
485
|
-
`ZlAppLayout` · `ZlHorizontalLayout` · `ZlVerticalLayout` · `ZlDevMenu` · `ZlPermission` · `ZlHorizontalTable`
|
|
481
|
+
`ZlAppLayout` · `ZlHorizontalLayout` · `ZlVerticalLayout` · `ZlHeaderAsideLayout` · `ZlDevMenu` · `ZlPermission` · `ZlHorizontalTable`
|
|
486
482
|
|
|
487
483
|
> `ZlAppMenu` / `ZlAppMenuItem` 与 `ZlMenu` 功能重复，**自 `0.22.0` 起移除**：菜单统一用 §8 的 `ZlMenu`（`items` + `v-model:selected`），迁移映射见 §15.5。
|
|
488
484
|
|
|
@@ -498,12 +494,13 @@ defineTheme({
|
|
|
498
494
|
|
|
499
495
|
### 3.7 内部子组件（不对外导出，随父组件使用）
|
|
500
496
|
|
|
501
|
-
下面
|
|
497
|
+
下面 4 个组件被父组件内部递归/分发渲染，主入口**不导出**，因此不在 §14 的自动生成范围里。
|
|
502
498
|
这里单独给出 props 与插槽的可粘贴示例。
|
|
503
499
|
|
|
504
|
-
#### `ZlHorizontalLayout` / `ZlVerticalLayout` —— 布局形态（供 `ZlAppLayout` 分发）
|
|
500
|
+
#### `ZlHorizontalLayout` / `ZlVerticalLayout` / `ZlHeaderAsideLayout` —— 布局形态（供 `ZlAppLayout` 分发）
|
|
505
501
|
|
|
506
|
-
由 `ZlAppLayout` 的 `layout`（`'
|
|
502
|
+
由 `ZlAppLayout` 的 `layout`（`'header-aside'`（默认）/ `'horizontal'` / `'vertical'`）三选一渲染，不单独使用。
|
|
503
|
+
`vertical` 是「logo 在侧栏顶部」的侧边菜单，`header-aside` 是「logo 与用户区在通栏顶栏、菜单整体下移到左侧栏」的形态。
|
|
507
504
|
`ZlAppLayout` **只声明 `layout` 一个 prop**，插槽一律写在 `ZlAppLayout` 标签内；菜单自己放进 `#menu`，
|
|
508
505
|
用 `ZlMenu` 的 `items` 渲染（传 `:menus` 给 `ZlAppLayout` 是无效的——它不声明该 prop）：
|
|
509
506
|
|
|
@@ -526,16 +523,17 @@ defineTheme({
|
|
|
526
523
|
</ZlAppLayout>
|
|
527
524
|
```
|
|
528
525
|
|
|
529
|
-
| 插槽 | 适用形态
|
|
530
|
-
| ------------ |
|
|
531
|
-
| `logo` |
|
|
532
|
-
| `menu` |
|
|
533
|
-
| `header` |
|
|
534
|
-
| `breadcrumb` |
|
|
535
|
-
| `footer` | 仅 vertical | —
|
|
536
|
-
| `default` |
|
|
526
|
+
| 插槽 | 适用形态 | 作用域 | 示例 |
|
|
527
|
+
| ------------ | -------------------------- | ------------------------------------------ | --------------------------------- |
|
|
528
|
+
| `logo` | 三者 | vertical 传 `{ collapsed }` | `<template #logo>` |
|
|
529
|
+
| `menu` | 三者 | vertical / header-aside 传 `{ collapsed }` | `<template #menu>` |
|
|
530
|
+
| `header` | 三者 | — | `<template #header>` |
|
|
531
|
+
| `breadcrumb` | 三者 | — | `<template #breadcrumb>` |
|
|
532
|
+
| `footer` | 仅 vertical / header-aside | — | `<template #footer>` |
|
|
533
|
+
| `default` | 三者 | — | 直接写页面内容（不写 `#default`） |
|
|
537
534
|
|
|
538
|
-
vertical 形态的 `logo` / `menu` 插槽会收到 `{ collapsed }
|
|
535
|
+
vertical 形态的 `logo` / `menu` 插槽、header-aside 形态的 `menu` 插槽会收到 `{ collapsed }`
|
|
536
|
+
（header-aside 的 `logo` 在通栏顶栏、不参与折叠），可据此在折叠态隐藏文字：
|
|
539
537
|
|
|
540
538
|
```vue
|
|
541
539
|
<template #logo="{ collapsed }">
|
|
@@ -572,7 +570,7 @@ vertical 形态的 `logo` / `menu` 插槽会收到 `{ collapsed }`，可据此
|
|
|
572
570
|
|
|
573
571
|
### 4.1 必须先注册图标集（否则一个图标都不显示）
|
|
574
572
|
|
|
575
|
-
`ZlIcon` 走 `@iconify/vue/offline`，**库不会自动把 470 个图标塞进打包结果**（否则不用图标的宿主也会白扛 ~150KB）。
|
|
573
|
+
`ZlIcon` 走 `@iconify/vue/offline`，**库不会自动把 470 个图标塞进打包结果**（否则不用图标的宿主也会白扛 ~150KB）。
|
|
576
574
|
消费方需要在应用启动时把内置图标集注册进 offline 集合，只需一次：
|
|
577
575
|
|
|
578
576
|
```ts
|
|
@@ -583,11 +581,11 @@ import { icons } from '@zl-ui-kit/icons'
|
|
|
583
581
|
presetIconifyIcon(icons)
|
|
584
582
|
```
|
|
585
583
|
|
|
586
|
-
> **漏掉这一步的表现**：`ZlIcon` 只渲染出一个空的 `<div class="zl-icon">`，不报错、不告警，
|
|
587
|
-
> 组件内部（查询条的「查询/重置/展开」按钮、表单 label 后的问号、空态插画等）的图标同样全部空白——
|
|
584
|
+
> **漏掉这一步的表现**：`ZlIcon` 只渲染出一个空的 `<div class="zl-icon">`，不报错、不告警，
|
|
585
|
+
> 组件内部（查询条的「查询/重置/展开」按钮、表单 label 后的问号、空态插画等）的图标同样全部空白——
|
|
588
586
|
> 排查时容易误判成图标名写错或样式问题。
|
|
589
587
|
>
|
|
590
|
-
> `@zl-ui-kit/icons` 需要作为**直接依赖**安装（`pnpm add @zl-ui-kit/icons`），不要依赖它被 `components` 间接带进 `node_modules`：
|
|
588
|
+
> `@zl-ui-kit/icons` 需要作为**直接依赖**安装（`pnpm add @zl-ui-kit/icons`），不要依赖它被 `components` 间接带进 `node_modules`：
|
|
591
589
|
> 幽灵依赖在提升规则变化或切换包管理器后会直接解析失败。
|
|
592
590
|
|
|
593
591
|
`presetIconifyIcon(...collections)` 接受多个集合，可叠加自建图标：`presetIconifyIcon(icons, myIcons)`。
|
|
@@ -770,7 +768,7 @@ presetIconifyIcon(icons)
|
|
|
770
768
|
|
|
771
769
|
### ZlCard / ZlPagination — 卡片与分页的视觉约定
|
|
772
770
|
|
|
773
|
-
`ZlCard` 的外观对齐设计稿（`DnCard`）：圆角 6px、轻阴影、右上角一张很淡的蓝紫渐变装饰底图。
|
|
771
|
+
`ZlCard` 的外观对齐设计稿（`DnCard`）：圆角 6px、轻阴影、右上角一张很淡的蓝紫渐变装饰底图。
|
|
774
772
|
底图**随包内联**（构建期转 base64，不额外产出图片文件），消费方无需配 `assetsInclude` 或图片服务。
|
|
775
773
|
|
|
776
774
|
```vue
|
|
@@ -816,7 +814,7 @@ presetIconifyIcon(icons)
|
|
|
816
814
|
头部左侧的图标列**只有传了 `#icon` 插槽才占位**（44px）：不传图标时该列整列去掉，标题/副标题直接顶到左侧内边距，
|
|
817
815
|
不会留出空白方框。
|
|
818
816
|
|
|
819
|
-
其余颜色、圆角、阴影统一走 token（`--zl-bg-1` / `--zl-shadow` / `--zl-radius-large` / `--zl-text-1` / `--zl-border-2`），
|
|
817
|
+
其余颜色、圆角、阴影统一走 token（`--zl-bg-1` / `--zl-shadow` / `--zl-radius-large` / `--zl-text-1` / `--zl-border-2`），
|
|
820
818
|
随主题切换。深色主题下装饰底图会自动关闭——浅色渐变压在深底上会发白。
|
|
821
819
|
|
|
822
820
|
`ZlPagination` 默认是**完整模式**：左侧是「共 N 条资源，当前筛选命中 X 条，每页」+ 页容量选择器，
|
|
@@ -1203,7 +1201,7 @@ function onSearch(params) {
|
|
|
1203
1201
|
```
|
|
1204
1202
|
|
|
1205
1203
|
`ZlSearch` 按容器宽度自适应排列（每项最小 240px，列数随宽度变化）。**一行放不下的项会自动隐藏**，
|
|
1206
|
-
|
|
1204
|
+
此时「搜索」左侧出现展开按钮（筛选图标）：点击在查询条上层展开全量表单，再点即收起。
|
|
1207
1205
|
是否溢出由实测宽度算出（不是按项数猜），窗口拉宽后按钮会自动消失。`@search` 回传查询参数对象。
|
|
1208
1206
|
|
|
1209
1207
|
#### ⑤ `ZlDictTag` —— 注入字典后由 `useDict` 解析
|
|
@@ -1765,7 +1763,7 @@ const items: SearchItem[] = [
|
|
|
1765
1763
|
校验与取值不受影响），所以查询条永远只有一行高；
|
|
1766
1764
|
- `ResizeObserver` 监听宽度变化重算，拉宽窗口后展开按钮会自己消失；查询项增删/显隐后也会重测。
|
|
1767
1765
|
|
|
1768
|
-
|
|
1766
|
+
**按钮布局**：操作区从左到右为 展开/收起图标按钮（有溢出时）→「搜索」→「重置」；「搜索」「重置」为
|
|
1769
1767
|
文本按钮、不带图标，展开/收起为纯图标按钮。点击图标按钮在查询条**上层**展开全量表单浮层
|
|
1770
1768
|
（`position: absolute` + 上滑 `--28px` 淡入，不改变页面高度），再点收起；搜索/重置后自动收起。
|
|
1771
1769
|
`labelsVisible` 不显式传时，仅在发生溢出时展示「筛选条件」标签行（旧名 `showLabels` 仍兼容）。
|
|
@@ -1918,8 +1916,9 @@ treeRef.value.getCheckedKeys(true)
|
|
|
1918
1916
|
|
|
1919
1917
|
### ZlAppLayout
|
|
1920
1918
|
|
|
1921
|
-
- `ZlAppLayout
|
|
1922
|
-
插槽为 `logo` / `menu` / `header` / `breadcrumb` / `footer` / 默认（详见 §3.7），vertical 形态自带折叠按钮（`el-button circle`）。
|
|
1919
|
+
- `ZlAppLayout`：三形态布局骨架，用 `layout="header-aside" | "horizontal" | "vertical"` 选形态（默认 `header-aside`），
|
|
1920
|
+
插槽为 `logo` / `menu` / `header` / `breadcrumb` / `footer` / 默认（详见 §3.7），vertical 与 header-aside 形态自带折叠按钮（`el-button circle`）。
|
|
1921
|
+
`header-aside` 为通栏顶栏（logo + 用户区）下方接左侧菜单 + 右侧内容区，适合「顶栏通栏、菜单下移」的后台框架。
|
|
1923
1922
|
- 菜单放进 `#menu` 插槽，用下面的 `ZlMenu` 渲染；`ZlAppMenu` 已移除（迁移见 §15.5）。
|
|
1924
1923
|
|
|
1925
1924
|
### ZlMenu — 通用菜单
|
|
@@ -1988,7 +1987,10 @@ const items: MenuOption[] = [
|
|
|
1988
1987
|
]
|
|
1989
1988
|
```
|
|
1990
1989
|
|
|
1991
|
-
主题变量：`--zl-menu-text-color` / `--zl-menu-hover-bg`（与 `--el-menu-*` 对接，主题包已配置）。
|
|
1990
|
+
主题变量：`--zl-menu-text-color` / `--zl-menu-hover-bg` / `--zl-menu-active-bg` / `--zl-menu-active-color` / `--zl-menu-active-border-color` / `--zl-menu-icon-color` / `--zl-menu-font-size` / `--zl-menu-item-height`（与 `--el-menu-*` 对接，主题包已配置）。
|
|
1991
|
+
|
|
1992
|
+
内置 `light` 主题：侧栏 / 顶栏为浅色底，选中项主色底 + 主色文字 + 右侧 3px 主色竖条、图标比文字浅一档，纵向菜单行高 40px / 字号 14px；
|
|
1993
|
+
`dark` 与彩色主题保持深色渐变 + 白字菜单，未设置的选中态变量回落到 hover 底色与文字色、无右侧竖条，观感不变。
|
|
1992
1994
|
|
|
1993
1995
|
### ZlDevMenu — 开发菜单
|
|
1994
1996
|
|
|
@@ -4344,21 +4346,21 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
|
|
|
4344
4346
|
<ZlAppLayout>
|
|
4345
4347
|
<template #default>…</template>
|
|
4346
4348
|
<template #logo>…</template>
|
|
4347
|
-
<template #menu>…</template>
|
|
4348
4349
|
<template #header>…</template>
|
|
4349
|
-
<template #breadcrumb>…</template>
|
|
4350
|
-
<template #logo="{ collapsed }">…</template>
|
|
4351
4350
|
<template #menu="{ collapsed }">…</template>
|
|
4352
4351
|
<template #footer>…</template>
|
|
4352
|
+
<template #breadcrumb>…</template>
|
|
4353
|
+
<template #menu>…</template>
|
|
4354
|
+
<template #logo="{ collapsed }">…</template>
|
|
4353
4355
|
</ZlAppLayout>
|
|
4354
4356
|
</template>
|
|
4355
4357
|
```
|
|
4356
4358
|
|
|
4357
4359
|
**props**
|
|
4358
4360
|
|
|
4359
|
-
| 属性 | 类型
|
|
4360
|
-
| -------- |
|
|
4361
|
-
| `layout` | `'horizontal' \| 'vertical'` | `'
|
|
4361
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4362
|
+
| -------- | ---------------------------------------------- | ---------------- | ---- | --------------------- | ---------------------------------------------------------------------------- |
|
|
4363
|
+
| `layout` | `'horizontal' \| 'vertical' \| 'header-aside'` | `'header-aside'` | 否 | `layout="horizontal"` | 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 |
|
|
4362
4364
|
|
|
4363
4365
|
> 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
|
|
4364
4366
|
> 把 `$attrs` 透传给内部组件，未列出的属性会继续下传
|
|
@@ -4369,13 +4371,35 @@ import { ZlAppLayout } from '@zl-ui-kit/components'
|
|
|
4369
4371
|
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
4370
4372
|
| ------------ | ----------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------ |
|
|
4371
4373
|
| `default` | — | `<template #default>…</template>` | 整个 `slots` 对象原样透传，插槽由子组件决定 |
|
|
4372
|
-
| `logo` | — | `<template #logo>…</template>` |
|
|
4373
|
-
| `
|
|
4374
|
-
| `
|
|
4374
|
+
| `logo` | — | `<template #logo>…</template>` | 通栏顶栏左侧 logo 区（不写则整块不渲染） |
|
|
4375
|
+
| `header` | — | `<template #header>…</template>` | 通栏顶栏右侧用户 / 操作区 |
|
|
4376
|
+
| `menu` | `v-bind="{ collapsed }"` 展开 | `<template #menu="{ collapsed }">…</template>` | 侧栏菜单区（作用域带 `{ collapsed }`） |
|
|
4377
|
+
| `footer` | — | `<template #footer>…</template>` | 侧栏底部区（排在内置折叠按钮之后） |
|
|
4375
4378
|
| `breadcrumb` | — | `<template #breadcrumb>…</template>` | 主区上方的面包屑 / 页签区 |
|
|
4379
|
+
| `menu` | — | `<template #menu>…</template>` | 顶栏中部菜单区（横向形态下占满剩余宽度） |
|
|
4376
4380
|
| `logo` | `v-bind="{ collapsed }"` 展开 | `<template #logo="{ collapsed }">…</template>` | 侧栏顶部 logo 区（纵向形态下作用域带 `{ collapsed }`，可据此在折叠态隐去文字） |
|
|
4377
|
-
|
|
4378
|
-
|
|
4381
|
+
|
|
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
|
+
```
|
|
4379
4403
|
|
|
4380
4404
|
#### `ZlAppSlogan`
|
|
4381
4405
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.zl-layout-header-aside{height:100%;display:flex;flex-direction:column}.zl-layout-header-aside.collapsed .zl-layout-header-aside__aside{width:44px}.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-horizontal-header-bg, #fff)}.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-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-header-aside__aside__content{flex:1;height:1px;overflow-y:auto}.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}.zl-layout-header-aside__breadcrumb{padding:10px 16px;border-bottom:1px solid var(--zl-border-2, #e3e9ef);line-height:24px;background-color:var(--zl-bg-1, #fff)}.zl-layout-header-aside__content{flex:1;padding:12px;height:1px}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
declare function __VLS_template(): {
|
|
2
|
+
attrs: Partial<{}>;
|
|
3
|
+
slots: {
|
|
4
|
+
logo?(_: {}): any;
|
|
5
|
+
header?(_: {}): any;
|
|
6
|
+
menu?(_: {
|
|
7
|
+
collapsed: boolean;
|
|
8
|
+
}): any;
|
|
9
|
+
footer?(_: {}): any;
|
|
10
|
+
breadcrumb?(_: {}): any;
|
|
11
|
+
default?(_: {}): any;
|
|
12
|
+
};
|
|
13
|
+
refs: {};
|
|
14
|
+
rootEl: HTMLDivElement;
|
|
15
|
+
};
|
|
16
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
17
|
+
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>;
|
|
18
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
19
|
+
export default _default;
|
|
20
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
21
|
+
new (): {
|
|
22
|
+
$slots: S;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=HeaderAside.vue.d.ts.map
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
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";
|
|
2
|
+
import { useToggle as y } from "@vueuse/core";
|
|
3
|
+
import f from "../ZlButton/index.vue.mjs";
|
|
4
|
+
import p from "../ZlIcon/index.vue.mjs";
|
|
5
|
+
const z = { class: "zl-layout-header-aside__header" }, v = {
|
|
6
|
+
key: 0,
|
|
7
|
+
class: "zl-layout-header-aside__logo"
|
|
8
|
+
}, $ = {
|
|
9
|
+
key: 1,
|
|
10
|
+
class: "zl-layout-header-aside__user"
|
|
11
|
+
}, 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 = {
|
|
12
|
+
key: 0,
|
|
13
|
+
class: "zl-layout-header-aside__breadcrumb"
|
|
14
|
+
}, A = { class: "zl-layout-header-aside__content" }, I = /* @__PURE__ */ n({
|
|
15
|
+
name: "ZlHeaderAsideLayout",
|
|
16
|
+
__name: "HeaderAside",
|
|
17
|
+
setup(B) {
|
|
18
|
+
const [a] = y(!1);
|
|
19
|
+
return (e, i) => (l(), d("div", {
|
|
20
|
+
class: c(["zl-layout-header-aside", { collapsed: t(a) }])
|
|
21
|
+
}, [
|
|
22
|
+
o("div", z, [
|
|
23
|
+
e.$slots.logo ? (l(), d("div", v, [
|
|
24
|
+
s(e.$slots, "logo")
|
|
25
|
+
])) : r("", !0),
|
|
26
|
+
e.$slots.header ? (l(), d("div", $, [
|
|
27
|
+
s(e.$slots, "header")
|
|
28
|
+
])) : r("", !0)
|
|
29
|
+
]),
|
|
30
|
+
o("div", b, [
|
|
31
|
+
o("div", g, [
|
|
32
|
+
o("div", k, [
|
|
33
|
+
s(e.$slots, "menu", u(h({ collapsed: t(a) })))
|
|
34
|
+
]),
|
|
35
|
+
o("div", C, [
|
|
36
|
+
_(f, {
|
|
37
|
+
circle: "",
|
|
38
|
+
onClick: i[0] || (i[0] = (E) => a.value = !t(a))
|
|
39
|
+
}, {
|
|
40
|
+
icon: m(() => [
|
|
41
|
+
_(p, {
|
|
42
|
+
icon: t(a) ? "zl:slider-on-color" : "zl:slider-off-color"
|
|
43
|
+
}, null, 8, ["icon"])
|
|
44
|
+
]),
|
|
45
|
+
_: 1
|
|
46
|
+
}),
|
|
47
|
+
s(e.$slots, "footer")
|
|
48
|
+
])
|
|
49
|
+
]),
|
|
50
|
+
o("div", N, [
|
|
51
|
+
e.$slots.breadcrumb ? (l(), d("div", V, [
|
|
52
|
+
s(e.$slots, "breadcrumb")
|
|
53
|
+
])) : r("", !0),
|
|
54
|
+
o("div", A, [
|
|
55
|
+
s(e.$slots, "default")
|
|
56
|
+
])
|
|
57
|
+
])
|
|
58
|
+
])
|
|
59
|
+
], 2));
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
export {
|
|
63
|
+
I as default
|
|
64
|
+
};
|
|
65
|
+
//# sourceMappingURL=HeaderAside2.vue.mjs.map
|
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* 应用布局：horizontal
|
|
2
|
+
* 应用布局：header-aside（默认，通栏顶栏 + 侧边菜单）/ horizontal（顶部菜单）/ vertical（侧边菜单，可折叠）
|
|
3
3
|
* 插槽：logo/menu/breadcrumb/header/footer/default
|
|
4
4
|
*/
|
|
5
5
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
6
|
-
/**
|
|
6
|
+
/** 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 */
|
|
7
7
|
layout: {
|
|
8
|
-
type: () => "horizontal" | "vertical";
|
|
8
|
+
type: () => "horizontal" | "vertical" | "header-aside";
|
|
9
9
|
default: string;
|
|
10
10
|
};
|
|
11
11
|
}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
|
|
12
12
|
[key: string]: any;
|
|
13
13
|
}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
14
|
-
/**
|
|
14
|
+
/** 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 */
|
|
15
15
|
layout: {
|
|
16
|
-
type: () => "horizontal" | "vertical";
|
|
16
|
+
type: () => "horizontal" | "vertical" | "header-aside";
|
|
17
17
|
default: string;
|
|
18
18
|
};
|
|
19
19
|
}>> & Readonly<{}>, {
|
|
20
|
-
layout: "horizontal" | "vertical";
|
|
20
|
+
layout: "horizontal" | "vertical" | "header-aside";
|
|
21
21
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
22
22
|
export default _default;
|
|
23
23
|
//# sourceMappingURL=index.vue.d.ts.map
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { defineComponent as r, defineAsyncComponent as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as r, defineAsyncComponent as t, h as i } from "vue";
|
|
2
|
+
const l = r({
|
|
3
3
|
name: "ZlAppLayout",
|
|
4
4
|
props: {
|
|
5
|
-
/**
|
|
6
|
-
layout: { type: String, default: "
|
|
5
|
+
/** 布局方向：横向用顶部菜单，纵向用侧边菜单，header-aside 用通栏顶栏 + 侧边菜单 */
|
|
6
|
+
layout: { type: String, default: "header-aside" }
|
|
7
7
|
},
|
|
8
|
-
setup(
|
|
8
|
+
setup(o, { slots: a, attrs: n }) {
|
|
9
9
|
return () => {
|
|
10
|
-
|
|
11
|
-
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);
|
|
12
12
|
};
|
|
13
13
|
}
|
|
14
14
|
});
|
|
15
15
|
export {
|
|
16
|
-
|
|
16
|
+
l as default
|
|
17
17
|
};
|
|
18
18
|
//# sourceMappingURL=index.vue.mjs.map
|
|
@@ -139,15 +139,6 @@ const de = { class: "zl-search" }, ue = {
|
|
|
139
139
|
}))
|
|
140
140
|
]), 1032, ["model", "items", "disabled", "hide-empty-label"]),
|
|
141
141
|
g("div", fe, [
|
|
142
|
-
s(b, {
|
|
143
|
-
type: "primary",
|
|
144
|
-
onClick: y
|
|
145
|
-
}, {
|
|
146
|
-
default: t(() => [
|
|
147
|
-
m(c(o(r)("zl.search.search", "搜索")), 1)
|
|
148
|
-
]),
|
|
149
|
-
_: 1
|
|
150
|
-
}),
|
|
151
142
|
o(E) !== null ? (n(), N(b, {
|
|
152
143
|
key: 0,
|
|
153
144
|
class: "zl-search-form-actions__toggle",
|
|
@@ -161,6 +152,15 @@ const de = { class: "zl-search" }, ue = {
|
|
|
161
152
|
]),
|
|
162
153
|
_: 1
|
|
163
154
|
}, 8, ["title", "aria-label", "aria-expanded"])) : v("", !0),
|
|
155
|
+
s(b, {
|
|
156
|
+
type: "primary",
|
|
157
|
+
onClick: y
|
|
158
|
+
}, {
|
|
159
|
+
default: t(() => [
|
|
160
|
+
m(c(o(r)("zl.search.search", "搜索")), 1)
|
|
161
|
+
]),
|
|
162
|
+
_: 1
|
|
163
|
+
}),
|
|
164
164
|
s(b, {
|
|
165
165
|
class: "zl-search-form-actions__reset",
|
|
166
166
|
onClick: V
|
|
@@ -228,15 +228,6 @@ const de = { class: "zl-search" }, ue = {
|
|
|
228
228
|
}))
|
|
229
229
|
]), 1032, ["model", "items", "disabled", "hide-empty-label"]),
|
|
230
230
|
g("div", be, [
|
|
231
|
-
s(b, {
|
|
232
|
-
type: "primary",
|
|
233
|
-
onClick: y
|
|
234
|
-
}, {
|
|
235
|
-
default: t(() => [
|
|
236
|
-
m(c(o(r)("zl.search.search", "搜索")), 1)
|
|
237
|
-
]),
|
|
238
|
-
_: 1
|
|
239
|
-
}),
|
|
240
231
|
s(b, {
|
|
241
232
|
class: "zl-search-form-actions__toggle",
|
|
242
233
|
title: o(r)("zl.search.collapse", "收起"),
|
|
@@ -249,6 +240,15 @@ const de = { class: "zl-search" }, ue = {
|
|
|
249
240
|
]),
|
|
250
241
|
_: 1
|
|
251
242
|
}, 8, ["title", "aria-label", "aria-expanded"]),
|
|
243
|
+
s(b, {
|
|
244
|
+
type: "primary",
|
|
245
|
+
onClick: y
|
|
246
|
+
}, {
|
|
247
|
+
default: t(() => [
|
|
248
|
+
m(c(o(r)("zl.search.search", "搜索")), 1)
|
|
249
|
+
]),
|
|
250
|
+
_: 1
|
|
251
|
+
}),
|
|
252
252
|
s(b, {
|
|
253
253
|
class: "zl-search-form-actions__reset",
|
|
254
254
|
onClick: V
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zl-ui-kit/components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.25.0",
|
|
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/
|
|
43
|
-
"@zl-ui-kit/
|
|
44
|
-
"@zl-ui-kit/utils": "0.
|
|
42
|
+
"@zl-ui-kit/composables": "0.25.0",
|
|
43
|
+
"@zl-ui-kit/icons": "0.25.0",
|
|
44
|
+
"@zl-ui-kit/utils": "0.25.0"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
@@ -99,9 +99,9 @@
|
|
|
99
99
|
"@vue-office/pdf": "^2.0.10",
|
|
100
100
|
"@vue-office/pptx": "1.0.1",
|
|
101
101
|
"echarts": "^5.6.0",
|
|
102
|
-
"@jichuang/eslint-config": "1.0.0",
|
|
103
102
|
"@jichuang/tsconfig": "1.0.0",
|
|
104
|
-
"@
|
|
103
|
+
"@jichuang/eslint-config": "1.0.0",
|
|
104
|
+
"@zl-ui-kit/theme": "0.25.0",
|
|
105
105
|
"@jichuang/vite-config": "1.0.0"
|
|
106
106
|
},
|
|
107
107
|
"repository": {
|