@zl-ui-kit/components 0.11.1 → 0.12.0

package/README.md

@@ -3464,6 +3464,7 @@ const { i18n } = useLocale({ messages })
 | [`ZlIconLabel`](#zliconlabel)               | 主入口              | 1     | 1    | 1    | 0    |
 | [`ZlCornerTag`](#zlcornertag)               | 主入口              | 3     | 0    | 1    | 0    |
 | [`ZlLayoutSwitch`](#zllayoutswitch)         | 主入口              | 2     | 1    | 0    | 0    |
+| [`ZlPageHeader`](#zlpageheader)             | 主入口              | 2     | 0    | 3    | 0    |
 | [`ZlPagination`](#zlpagination)             | 主入口              | 4     | 3    | 0    | 0    |
 | [`ZlPermission`](#zlpermission)             | 主入口              | 1     | 0    | 1    | 0    |
 | [`ZlPopconfirm`](#zlpopconfirm)             | 主入口              | 4     | 2    | 3    | 0    |
@@ -4910,6 +4911,53 @@ import { ZlLayoutSwitch } from '@zl-ui-kit/components'
 | ------------------- | ------------------- | -------------- |
 | `update:modelValue` | `'grid' \| 'table'` | `v-model` 更新 |
 
+#### `ZlPageHeader`
+
+<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlPageHeader/index.vue`</sub>
+
+**简介**：页头：页面顶部的标题栏，左侧标题 + 描述，右侧 extra 插槽放操作按钮
+
+**接口概览**：2 props · 3 插槽
+
+**用法示例**
+
+```vue
+<script setup lang="ts">
+import { ZlPageHeader } from '@zl-ui-kit/components'
+</script>
+
+<template>
+  <ZlPageHeader title="数据加工管理" description="点击左侧任务卡片，在右侧查看该任务的运行记录与历史配置" />
+</template>
+```
+
+**插槽用法**
+
+```vue
+<template>
+  <ZlPageHeader>
+    <template #title>…</template>
+    <template #description>…</template>
+    <template #extra>…</template>
+  </ZlPageHeader>
+</template>
+```
+
+**props**
+
+| 属性          | 类型     | 默认值 | 必填 | 示例                   | 说明                                          |
+| ------------- | -------- | ------ | ---- | ---------------------- | --------------------------------------------- |
+| `title`       | `string` | —      | 否   | `title="标题"`         | 页头标题文案；可用 title 插槽覆盖             |
+| `description` | `string` | —      | 否   | `description="副标题"` | 标题下方的描述文案；可用 description 插槽覆盖 |
+
+**插槽（slots）**
+
+| 插槽          | 作用域参数 | 示例                                  | 说明                                           |
+| ------------- | ---------- | ------------------------------------- | ---------------------------------------------- |
+| `title`       | —          | `<template #title>…</template>`       | 自定义标题内容，覆盖 title                     |
+| `description` | —          | `<template #description>…</template>` | 自定义描述内容，覆盖 description               |
+| `extra`       | —          | `<template #extra>…</template>`       | 页头右侧自定义内容区（如新建、导出等操作按钮） |
+
 #### `ZlPagination`
 
 <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlPagination/index.vue`</sub>

package/dist/components/ZlAction/List.css

@@ -1 +1 @@
-.zl-action-list{display:inline-flex;align-items:center;color:var(--zl-link-6, var(--el-color-primary, #3261ce));font-size:12px;line-height:20px;flex:0 0 auto;gap:4px}.zl-action-list__action{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:12px}.zl-action-list__separator{margin:4px 0;width:1px;background-color:var(--zl-border-2)}.zl-action-list__separator:last-child{display:none}.zl-action-list__more{color:inherit}.zl-action-list__more-icon{cursor:pointer;font-size:12px}
+.zl-action-list{display:inline-flex;align-items:center;color:var(--zl-link-6, var(--el-color-primary, #3b82f6));font-size:12px;line-height:20px;flex:0 0 auto;gap:4px}.zl-action-list__action{display:flex;align-items:center;gap:4px;cursor:pointer;font-size:12px}.zl-action-list__separator{margin:4px 0;width:1px;background-color:var(--zl-border-2)}.zl-action-list__separator:last-child{display:none}.zl-action-list__more{color:inherit}.zl-action-list__more-icon{cursor:pointer;font-size:12px}

package/dist/components/ZlPageHeader/index.css

@@ -0,0 +1 @@
+.zl-page-header[data-v-1d8b3906]{display:flex;align-items:center;gap:16px;padding:12px 16px;background-color:var(--zl-bg-1, #fff);border-bottom:1px solid var(--zl-border-2, #e3e9ef)}.zl-page-header__main[data-v-1d8b3906]{flex:1;min-width:0}.zl-page-header__title[data-v-1d8b3906]{font-size:16px;font-weight:600;line-height:24px;color:var(--zl-text-1, #242e43)}.zl-page-header__description[data-v-1d8b3906]{margin-top:2px;font-size:13px;line-height:20px;color:var(--zl-text-3, #79879c)}.zl-page-header__extra[data-v-1d8b3906]{flex-shrink:0;display:flex;align-items:center;gap:8px}

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    /** 页头标题文案；可用 title 插槽覆盖 */
+    title?: string;
+    /** 标题下方的描述文案；可用 description 插槽覆盖 */
+    description?: string;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        title?(_: {}): any;
+        description?(_: {}): any;
+        extra?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, 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=index.vue.d.ts.map

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

@@ -0,0 +1,8 @@
+import o from "./index2.vue.mjs";
+import './index.css';/* empty css            */
+import r from "../../_virtual/_plugin-vue_export-helper.mjs";
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-1d8b3906"]]);
+export {
+  m as default
+};
+//# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlPageHeader/index2.vue.mjs

@@ -0,0 +1,38 @@
+import { defineComponent as l, openBlock as s, createElementBlock as o, createElementVNode as r, renderSlot as i, createTextVNode as a, toDisplayString as d, createCommentVNode as n } from "vue";
+const c = { class: "zl-page-header" }, p = { class: "zl-page-header__main" }, _ = { class: "zl-page-header__title" }, h = {
+  key: 0,
+  class: "zl-page-header__description"
+}, m = {
+  key: 0,
+  class: "zl-page-header__extra"
+}, v = /* @__PURE__ */ l({
+  name: "ZlPageHeader",
+  __name: "index",
+  props: {
+    title: {},
+    description: {}
+  },
+  setup(t) {
+    return (e, u) => (s(), o("div", c, [
+      r("div", p, [
+        r("div", _, [
+          i(e.$slots, "title", {}, () => [
+            a(d(t.title), 1)
+          ], !0)
+        ]),
+        t.description || e.$slots.description ? (s(), o("div", h, [
+          i(e.$slots, "description", {}, () => [
+            a(d(t.description), 1)
+          ], !0)
+        ])) : n("", !0)
+      ]),
+      e.$slots.extra ? (s(), o("div", m, [
+        i(e.$slots, "extra", {}, void 0, !0)
+      ])) : n("", !0)
+    ]));
+  }
+});
+export {
+  v as default
+};
+//# sourceMappingURL=index2.vue.mjs.map

package/dist/components/ZlSorter/index.css

@@ -1 +1 @@
-.zl-sorter[data-v-af336d25]{display:inline-flex;align-items:center;cursor:pointer;gap:4px;font-size:12px;padding:1px 4px}.zl-sorter__label[data-v-af336d25]{color:var(--zl-text-2, #4d5e7d)}.zl-sorter__label.active[data-v-af336d25]{color:var(--zl-link-6, var(--el-color-primary, #3261ce))}.zl-sorter__icon[data-v-af336d25]{display:inline-flex;flex-direction:column;font-size:8px;color:var(--zl-text-4, #b3c0cc)}.zl-sorter__icon .active[data-v-af336d25]{color:var(--zl-link-6, var(--el-color-primary, #3261ce))}
+.zl-sorter[data-v-65e8178e]{display:inline-flex;align-items:center;cursor:pointer;gap:4px;font-size:12px;padding:1px 4px}.zl-sorter__label[data-v-65e8178e]{color:var(--zl-text-2, #4d5e7d)}.zl-sorter__label.active[data-v-65e8178e]{color:var(--zl-link-6, var(--el-color-primary, #3b82f6))}.zl-sorter__icon[data-v-65e8178e]{display:inline-flex;flex-direction:column;font-size:8px;color:var(--zl-text-4, #b3c0cc)}.zl-sorter__icon .active[data-v-65e8178e]{color:var(--zl-link-6, var(--el-color-primary, #3b82f6))}

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

@@ -1,8 +1,8 @@
 import o from "./index2.vue.mjs";
 import './index.css';/* empty css            */
 import r from "../../_virtual/_plugin-vue_export-helper.mjs";
-const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-af336d25"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-65e8178e"]]);
 export {
-  m as default
+  p as default
 };
 //# sourceMappingURL=index.vue.mjs.map

package/dist/components/ZlTitle/index.css

@@ -1 +1 @@
-.zl-title[data-v-44e90e6f]{--font-size: 14px;display:flex;align-items:center;gap:4px}.zl-title-size-small[data-v-44e90e6f]{--font-size: 12px}.zl-title-marker[data-v-44e90e6f]{position:relative;width:3px;align-self:stretch}.zl-title-marker[data-v-44e90e6f]:after{content:"";position:absolute;top:5px;bottom:5px;width:100%;background-color:var(--zl-primary-6, var(--el-color-primary, #3261ce));border-radius:3px}.zl-title-text[data-v-44e90e6f]{font-size:var(--font-size);font-weight:600;line-height:calc(var(--font-size) + 8px);color:var(--zl-text-1, #242e43)}.zl-title-tooltip[data-v-44e90e6f]{color:var(--zl-text-2, #4d5e7d)}.zl-title-description[data-v-44e90e6f]{font-size:12px;line-height:20px;color:var(--zl-text-3, #79879c)}
+.zl-title[data-v-6f88e477]{--font-size: 14px;display:flex;align-items:center;gap:4px}.zl-title-size-small[data-v-6f88e477]{--font-size: 12px}.zl-title-marker[data-v-6f88e477]{position:relative;width:3px;align-self:stretch}.zl-title-marker[data-v-6f88e477]:after{content:"";position:absolute;top:5px;bottom:5px;width:100%;background-color:var(--zl-primary-6, var(--el-color-primary, #3b82f6));border-radius:3px}.zl-title-text[data-v-6f88e477]{font-size:var(--font-size);font-weight:600;line-height:calc(var(--font-size) + 8px);color:var(--zl-text-1, #242e43)}.zl-title-tooltip[data-v-6f88e477]{color:var(--zl-text-2, #4d5e7d)}.zl-title-description[data-v-6f88e477]{font-size:12px;line-height:20px;color:var(--zl-text-3, #79879c)}

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

@@ -1,7 +1,7 @@
 import o from "./index2.vue.mjs";
 import './index.css';/* empty css            */
 import t from "../../_virtual/_plugin-vue_export-helper.mjs";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-44e90e6f"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6f88e477"]]);
 export {
   m as default
 };

package/dist/index.d.ts

@@ -35,6 +35,7 @@ export { default as ZlIconHover } from './components/ZlIconHover/index.vue';
 export { default as ZlIconLabel } from './components/ZlIconLabel/index.vue';
 export { default as ZlCornerTag } from './components/ZlTag/ZlCornerTag.vue';
 export { default as ZlLayoutSwitch } from './components/ZlLayoutSwitch/index.vue';
+export { default as ZlPageHeader } from './components/ZlPageHeader/index.vue';
 export { default as ZlPagination } from './components/ZlPagination/index.vue';
 export { default as ZlPermission } from './components/ZlPermission/index.vue';
 export { default as ZlPopconfirm } from './components/ZlPopconfirm/index.vue';

package/dist/index.mjs

@@ -5,9 +5,9 @@ import t from "./components/ZlAddSub/index.vue.mjs";
 import l from "./components/ZlAppLayout/index.vue.mjs";
 import p from "./components/ZlAppMenu/AppMenu.vue.mjs";
 /* empty css                                   */
-import s from "./components/ZlAppSlogan/index.vue.mjs";
+import f from "./components/ZlAppSlogan/index.vue.mjs";
 /* empty css                                   */
-import f from "./components/ZlAutoTooltip/index.vue.mjs";
+import s from "./components/ZlAutoTooltip/index.vue.mjs";
 import n from "./components/ZlAvatar/index.vue.mjs";
 import e from "./components/ZlAvatar/Group.vue.mjs";
 import Z from "./components/ZlCardPage/index.vue.mjs";
@@ -45,52 +45,53 @@ import F from "./components/ZlLayoutSwitch/index.vue.mjs";
 import G from "./components/ZlLogin/index.vue.mjs";
 /* empty css                               */
 import M from "./components/ZlLogin/components/LoginForm.vue.mjs";
-import k from "./components/ZlPagination/index.vue.mjs";
-import z from "./components/ZlPdfViewer/index.vue.mjs";
+import k from "./components/ZlPageHeader/index.vue.mjs";
+import z from "./components/ZlPagination/index.vue.mjs";
+import H from "./components/ZlPdfViewer/index.vue.mjs";
 /* empty css                                   */
 import E from "./components/ZlPermission/index.vue.mjs";
-import H from "./components/ZlPopconfirm/index.vue.mjs";
+import j from "./components/ZlPopconfirm/index.vue.mjs";
 /* empty css                                    */
-import j from "./components/ZlRadioTag/index.vue.mjs";
+import R from "./components/ZlRadioTag/index.vue.mjs";
 /* empty css                                  */
-import R from "./components/ZlSearch/index.vue.mjs";
+import V from "./components/ZlSearch/index.vue.mjs";
 /* empty css                                */
-import V from "./components/ZlSearchTable/index.vue.mjs";
+import q from "./components/ZlSearchTable/index.vue.mjs";
 /* empty css                                     */
-import q from "./components/ZlSection/index.vue.mjs";
+import O from "./components/ZlSection/index.vue.mjs";
 /* empty css                                 */
-import O from "./components/ZlSorter/index.vue.mjs";
-import U from "./components/ZlSorter/ZlSorterList.vue.mjs";
-import B from "./components/ZlSwitch/index.vue.mjs";
+import U from "./components/ZlSorter/index.vue.mjs";
+import B from "./components/ZlSorter/ZlSorterList.vue.mjs";
+import J from "./components/ZlSwitch/index.vue.mjs";
 /* empty css                                */
-import J from "./components/ZlTable/index.vue.mjs";
+import K from "./components/ZlTable/index.vue.mjs";
 /* empty css                               */
-import K from "./components/ZlTabs/index.vue.mjs";
+import N from "./components/ZlTabs/index.vue.mjs";
 /* empty css                              */
-import N from "./components/ZlTag/index.vue.mjs";
+import Q from "./components/ZlTag/index.vue.mjs";
 /* empty css                             */
-import Q from "./components/ZlText/index.vue.mjs";
-import W from "./components/ZlTitle/index.vue.mjs";
-import X from "./components/ZlTree/index.vue.mjs";
+import W from "./components/ZlText/index.vue.mjs";
+import X from "./components/ZlTitle/index.vue.mjs";
+import Y from "./components/ZlTree/index.vue.mjs";
 /* empty css                              */
-import Y from "./components/ZlTreeSelect/index.vue.mjs";
-import oo from "./components/ZlUpload/index.vue.mjs";
-import { presetIconifyIcon as vr } from "./components/ZlIcon/presetIconifyIcon.mjs";
-import { usePagination as yr } from "./components/ZlPagination/usePagination.mjs";
-import { useTablePagination as Gr } from "./components/ZlTable/useTablePagination.mjs";
-import { usePermission as kr, usePermissionProvider as zr } from "./components/ZlPermission/usePermission.mjs";
-import { createZlI18n as Hr } from "./locales/createZlI18n.mjs";
-import { default as Rr } from "./locales/en.mjs";
-import { zlMessages as qr } from "./locales/messages.mjs";
-import { default as Ur } from "./locales/zh-cn.mjs";
-const ro = {
+import oo from "./components/ZlTreeSelect/index.vue.mjs";
+import ro from "./components/ZlUpload/index.vue.mjs";
+import { presetIconifyIcon as yr } from "./components/ZlIcon/presetIconifyIcon.mjs";
+import { usePagination as Gr } from "./components/ZlPagination/usePagination.mjs";
+import { useTablePagination as kr } from "./components/ZlTable/useTablePagination.mjs";
+import { usePermission as Hr, usePermissionProvider as Er } from "./components/ZlPermission/usePermission.mjs";
+import { createZlI18n as Rr } from "./locales/createZlI18n.mjs";
+import { default as qr } from "./locales/en.mjs";
+import { zlMessages as Ur } from "./locales/messages.mjs";
+import { default as Jr } from "./locales/zh-cn.mjs";
+const mo = {
   ZlAction: i,
   ZlActionList: a,
   ZlAddSub: t,
   ZlAppLayout: l,
   ZlAppMenu: p,
-  ZlAppSlogan: s,
-  ZlAutoTooltip: f,
+  ZlAppSlogan: f,
+  ZlAutoTooltip: s,
   ZlAvatar: n,
   ZlAvatarGroup: e,
   ZlCardPage: Z,
@@ -117,40 +118,41 @@ const ro = {
   ZlLayoutSwitch: F,
   ZlLogin: G,
   ZlLoginForm: M,
-  ZlPagination: k,
-  ZlPdfViewer: z,
+  ZlPageHeader: k,
+  ZlPagination: z,
+  ZlPdfViewer: H,
   ZlPermission: E,
-  ZlPopconfirm: H,
-  ZlRadioTag: j,
-  ZlSearch: R,
-  ZlSearchTable: V,
-  ZlSection: q,
-  ZlSorter: O,
-  ZlSorterList: U,
-  ZlSwitch: B,
-  ZlTable: J,
-  ZlTabs: K,
-  ZlTag: N,
-  ZlText: Q,
-  ZlTitle: W,
-  ZlUpload: oo,
-  ZlTree: X,
-  ZlTreeSelect: Y
+  ZlPopconfirm: j,
+  ZlRadioTag: R,
+  ZlSearch: V,
+  ZlSearchTable: q,
+  ZlSection: O,
+  ZlSorter: U,
+  ZlSorterList: B,
+  ZlSwitch: J,
+  ZlTable: K,
+  ZlTabs: N,
+  ZlTag: Q,
+  ZlText: W,
+  ZlTitle: X,
+  ZlUpload: ro,
+  ZlTree: Y,
+  ZlTreeSelect: oo
 };
-function mo(o) {
-  Object.entries(ro).forEach(([r, m]) => {
+function io(o) {
+  Object.entries(mo).forEach(([r, m]) => {
     o.component(r, m);
   });
 }
-const Ir = { install: mo };
+const Dr = { install: io };
 export {
   i as ZlAction,
   a as ZlActionList,
   t as ZlAddSub,
   l as ZlAppLayout,
   p as ZlAppMenu,
-  s as ZlAppSlogan,
-  f as ZlAutoTooltip,
+  f as ZlAppSlogan,
+  s as ZlAutoTooltip,
   n as ZlAvatar,
   e as ZlAvatarGroup,
   c as ZlCard,
@@ -177,35 +179,36 @@ export {
   F as ZlLayoutSwitch,
   G as ZlLogin,
   M as ZlLoginForm,
-  k as ZlPagination,
-  z as ZlPdfViewer,
+  k as ZlPageHeader,
+  z as ZlPagination,
+  H as ZlPdfViewer,
   E as ZlPermission,
-  H as ZlPopconfirm,
-  j as ZlRadioTag,
-  R as ZlSearch,
-  V as ZlSearchTable,
-  q as ZlSection,
-  O as ZlSorter,
-  U as ZlSorterList,
-  B as ZlSwitch,
-  J as ZlTable,
-  K as ZlTabs,
-  N as ZlTag,
-  Q as ZlText,
-  W as ZlTitle,
-  X as ZlTree,
-  Y as ZlTreeSelect,
-  oo as ZlUpload,
-  Hr as createZlI18n,
-  Ir as default,
-  mo as install,
-  vr as presetIconifyIcon,
-  yr as usePagination,
-  kr as usePermission,
-  zr as usePermissionProvider,
-  Gr as useTablePagination,
-  Rr as zlEnMessages,
-  qr as zlMessages,
-  Ur as zlZhMessages
+  j as ZlPopconfirm,
+  R as ZlRadioTag,
+  V as ZlSearch,
+  q as ZlSearchTable,
+  O as ZlSection,
+  U as ZlSorter,
+  B as ZlSorterList,
+  J as ZlSwitch,
+  K as ZlTable,
+  N as ZlTabs,
+  Q as ZlTag,
+  W as ZlText,
+  X as ZlTitle,
+  Y as ZlTree,
+  oo as ZlTreeSelect,
+  ro as ZlUpload,
+  Rr as createZlI18n,
+  Dr as default,
+  io as install,
+  yr as presetIconifyIcon,
+  Gr as usePagination,
+  Hr as usePermission,
+  Er as usePermissionProvider,
+  kr as useTablePagination,
+  qr as zlEnMessages,
+  Ur as zlMessages,
+  Jr as zlZhMessages
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zl-ui-kit/components",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "type": "module",
   "description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "file-type": "^20.4.1",
     "dt-sql-parser": "^4.3.1",
     "sql-formatter": "^15.4.2",
-    "@zl-ui-kit/composables": "0.11.1",
-    "@zl-ui-kit/utils": "0.11.1",
-    "@zl-ui-kit/icons": "0.11.1"
+    "@zl-ui-kit/composables": "0.12.0",
+    "@zl-ui-kit/icons": "0.12.0",
+    "@zl-ui-kit/utils": "0.12.0"
   },
   "peerDependencies": {
     "@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
@@ -98,10 +98,10 @@
     "@vue-office/pdf": "^2.0.10",
     "@vue-office/pptx": "1.0.1",
     "echarts": "^5.6.0",
-    "@jichuang/eslint-config": "1.0.0",
-    "@zl-ui-kit/theme": "0.11.1",
+    "@jichuang/vite-config": "1.0.0",
     "@jichuang/tsconfig": "1.0.0",
-    "@jichuang/vite-config": "1.0.0"
+    "@jichuang/eslint-config": "1.0.0",
+    "@zl-ui-kit/theme": "0.12.0"
   },
   "repository": {
     "type": "git",