jky-component-lib 0.0.18 → 0.0.20

package/dist/es/button-nav/ButtonNav.vue.d.ts

@@ -1,4 +1,5 @@
 import { ButtonProps } from 'element-plus/es/components/button';
+import { RouteLocationRaw } from 'vue-router';
 type __VLS_Props = {
     modelValue?: string | number;
     items?: NavItem[];
@@ -7,17 +8,21 @@ type __VLS_Props = {
     type?: ButtonProps['type'];
     plain?: boolean;
     buttonWidth?: string;
+    route?: boolean;
 };
 interface NavItem {
     label: string;
     value: string | number;
     disabled?: boolean;
     icon?: string;
+    to?: RouteLocationRaw;
 }
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (item: NavItem) => any;
     change: (value: string | number) => any;
     "update:modelValue": (value: string | number) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((item: NavItem) => any) | undefined;
     onChange?: ((value: string | number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
@@ -26,5 +31,6 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     items: NavItem[];
     limit: number;
     plain: boolean;
+    route: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/es/button-nav/ButtonNav.vue.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, normalizeClass, normalizeStyle, createSlots, withCtx, createTextVNode, toDisplayString, createElementVNode, createVNode, createCommentVNode } from "vue";
+import { defineComponent, inject, computed, openBlock, createElementBlock, Fragment, renderList, createBlock, unref, normalizeClass, normalizeStyle, createSlots, withCtx, createTextVNode, toDisplayString, createElementVNode, createVNode, createCommentVNode } from "vue";
 import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem } from "element-plus";
 const _hoisted_1 = { class: "jky-button-nav flex flex-wrap items-center gap-2" };
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
@@ -31,33 +31,48 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
     size: { default: "default" },
     type: { default: "primary" },
     plain: { type: Boolean, default: false },
-    buttonWidth: {}
+    buttonWidth: {},
+    route: { type: Boolean, default: false }
   },
-  emits: ["update:modelValue", "change"],
+  emits: ["update:modelValue", "change", "click"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const router = inject("router", null);
+    const route = inject("route", null);
     const visibleItems = computed(() => props.items.slice(0, props.limit));
     const hiddenItems = computed(() => props.items.slice(props.limit));
     const hasMore = computed(() => props.items.length > props.limit);
-    function handleClick(value) {
-      emit("update:modelValue", value);
-      emit("change", value);
+    function isActiveItem(item) {
+      if (props.route && item.to && route) {
+        const targetPath = typeof item.to === "string" ? item.to : item.to.path;
+        return route.path === targetPath;
+      }
+      return props.modelValue === item.value;
+    }
+    function handleClick(item) {
+      if (props.route && item.to && router) {
+        router.push(item.to);
+      } else {
+        emit("update:modelValue", item.value);
+        emit("change", item.value);
+        emit("click", item);
+      }
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(visibleItems.value, (item) => {
           return openBlock(), createBlock(unref(ElButton), {
             key: item.value,
-            type: props.modelValue === item.value ? props.type : "default",
+            type: isActiveItem(item) ? props.type : "default",
             size: props.size,
             disabled: item.disabled,
-            link: props.plain && props.modelValue !== item.value,
+            link: props.plain && !isActiveItem(item),
             style: normalizeStyle({ width: props.buttonWidth }),
             class: normalizeClass({
-              "is-active": props.modelValue === item.value
+              "is-active": isActiveItem(item)
             }),
-            onClick: ($event) => handleClick(item.value)
+            onClick: ($event) => handleClick(item)
           }, createSlots({
             default: withCtx(() => [
               createTextVNode(" " + toDisplayString(item.label), 1)
@@ -86,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
                   return openBlock(), createBlock(unref(ElDropdownItem), {
                     key: item.value,
                     disabled: item.disabled,
-                    onClick: ($event) => handleClick(item.value)
+                    onClick: ($event) => handleClick(item)
                   }, {
                     default: withCtx(() => [
                       item.icon ? (openBlock(), createElementBlock("span", {
@@ -104,12 +119,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
           ]),
           default: withCtx(() => [
             createVNode(unref(ElButton), {
-              type: hiddenItems.value.some((item) => item.value === props.modelValue) ? props.type : "default",
+              type: hiddenItems.value.some((item) => isActiveItem(item)) ? props.type : "default",
               size: props.size,
-              link: props.plain && !hiddenItems.value.some((item) => item.value === props.modelValue),
+              link: props.plain && !hiddenItems.value.some((item) => isActiveItem(item)),
               style: normalizeStyle({ width: props.buttonWidth }),
               class: normalizeClass({
-                "is-active": hiddenItems.value.some((item) => item.value === props.modelValue)
+                "is-active": hiddenItems.value.some((item) => isActiveItem(item))
               })
             }, {
               default: withCtx(() => [..._cache[0] || (_cache[0] = [

package/dist/es/package.json.js

@@ -1,4 +1,4 @@
-const version = "0.0.18";
+const version = "0.0.20";
 export {
   version
 };

package/dist/es/page-header/PageHeader.vue.d.ts

@@ -19,6 +19,7 @@ declare function __VLS_template(): {
     slots: {
         center?(_: {}): any;
         time?(_: {}): any;
+        userIcon?(_: {}): any;
     };
     refs: {};
     rootEl: HTMLElement;

package/dist/es/page-header/PageHeader.vue.js

@@ -40,7 +40,7 @@ const _hoisted_9 = { class: "jky-page-header__time hidden md:block" };
 const _hoisted_10 = { class: "jky-page-header__user" };
 const _hoisted_11 = ["src", "alt"];
 const _hoisted_12 = {
-  key: 2,
+  key: 0,
   class: "jky-page-header__username hidden md:block"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
@@ -224,33 +224,35 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
               ]),
               default: withCtx(() => [
                 createElementVNode("div", _hoisted_10, [
-                  __props.userAvatar ? (openBlock(), createBlock(unref(ElIcon), {
-                    key: 0,
-                    size: 32,
-                    class: "jky-page-header__avatar"
-                  }, {
-                    default: withCtx(() => [
-                      createElementVNode("img", {
-                        src: __props.userAvatar,
-                        alt: __props.userName,
-                        class: "rounded-full"
-                      }, null, 8, _hoisted_11)
-                    ]),
-                    _: 1
-                  })) : (openBlock(), createBlock(unref(ElIcon), {
-                    key: 1,
-                    size: 32,
-                    class: "jky-page-header__avatar"
-                  }, {
-                    default: withCtx(() => [..._cache[1] || (_cache[1] = [
-                      createElementVNode("span", { class: "icon-[heroicons--user]" }, null, -1)
-                    ])]),
-                    _: 1
-                  })),
+                  renderSlot(_ctx.$slots, "userIcon", {}, () => [
+                    __props.userAvatar ? (openBlock(), createBlock(unref(ElIcon), {
+                      key: 0,
+                      size: 24,
+                      class: "jky-page-header__avatar"
+                    }, {
+                      default: withCtx(() => [
+                        createElementVNode("img", {
+                          src: __props.userAvatar,
+                          alt: __props.userName,
+                          class: "rounded-full"
+                        }, null, 8, _hoisted_11)
+                      ]),
+                      _: 1
+                    })) : (openBlock(), createBlock(unref(ElIcon), {
+                      key: 1,
+                      size: 24,
+                      class: "jky-page-header__avatar"
+                    }, {
+                      default: withCtx(() => [..._cache[1] || (_cache[1] = [
+                        createElementVNode("span", { class: "icon-[heroicons--user]" }, null, -1)
+                      ])]),
+                      _: 1
+                    }))
+                  ]),
                   __props.userName ? (openBlock(), createElementBlock("span", _hoisted_12, toDisplayString(__props.userName), 1)) : createCommentVNode("", true)
                 ])
               ]),
-              _: 1
+              _: 3
             })
           ])
         ])

package/dist/lib/button-nav/ButtonNav.vue.d.ts

@@ -1,4 +1,5 @@
 import { ButtonProps } from 'element-plus/es/components/button';
+import { RouteLocationRaw } from 'vue-router';
 type __VLS_Props = {
     modelValue?: string | number;
     items?: NavItem[];
@@ -7,17 +8,21 @@ type __VLS_Props = {
     type?: ButtonProps['type'];
     plain?: boolean;
     buttonWidth?: string;
+    route?: boolean;
 };
 interface NavItem {
     label: string;
     value: string | number;
     disabled?: boolean;
     icon?: string;
+    to?: RouteLocationRaw;
 }
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (item: NavItem) => any;
     change: (value: string | number) => any;
     "update:modelValue": (value: string | number) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((item: NavItem) => any) | undefined;
     onChange?: ((value: string | number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
 }>, {
@@ -26,5 +31,6 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
     items: NavItem[];
     limit: number;
     plain: boolean;
+    route: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;

package/dist/lib/button-nav/ButtonNav.vue.js

@@ -33,33 +33,48 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
     size: { default: "default" },
     type: { default: "primary" },
     plain: { type: Boolean, default: false },
-    buttonWidth: {}
+    buttonWidth: {},
+    route: { type: Boolean, default: false }
   },
-  emits: ["update:modelValue", "change"],
+  emits: ["update:modelValue", "change", "click"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const router = vue.inject("router", null);
+    const route = vue.inject("route", null);
     const visibleItems = vue.computed(() => props.items.slice(0, props.limit));
     const hiddenItems = vue.computed(() => props.items.slice(props.limit));
     const hasMore = vue.computed(() => props.items.length > props.limit);
-    function handleClick(value) {
-      emit("update:modelValue", value);
-      emit("change", value);
+    function isActiveItem(item) {
+      if (props.route && item.to && route) {
+        const targetPath = typeof item.to === "string" ? item.to : item.to.path;
+        return route.path === targetPath;
+      }
+      return props.modelValue === item.value;
+    }
+    function handleClick(item) {
+      if (props.route && item.to && router) {
+        router.push(item.to);
+      } else {
+        emit("update:modelValue", item.value);
+        emit("change", item.value);
+        emit("click", item);
+      }
     }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleItems.value, (item) => {
           return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElButton), {
             key: item.value,
-            type: props.modelValue === item.value ? props.type : "default",
+            type: isActiveItem(item) ? props.type : "default",
             size: props.size,
             disabled: item.disabled,
-            link: props.plain && props.modelValue !== item.value,
+            link: props.plain && !isActiveItem(item),
             style: vue.normalizeStyle({ width: props.buttonWidth }),
             class: vue.normalizeClass({
-              "is-active": props.modelValue === item.value
+              "is-active": isActiveItem(item)
             }),
-            onClick: ($event) => handleClick(item.value)
+            onClick: ($event) => handleClick(item)
           }, vue.createSlots({
             default: vue.withCtx(() => [
               vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)
@@ -88,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
                   return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElDropdownItem), {
                     key: item.value,
                     disabled: item.disabled,
-                    onClick: ($event) => handleClick(item.value)
+                    onClick: ($event) => handleClick(item)
                   }, {
                     default: vue.withCtx(() => [
                       item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -106,12 +121,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
           ]),
           default: vue.withCtx(() => [
             vue.createVNode(vue.unref(ElementPlus.ElButton), {
-              type: hiddenItems.value.some((item) => item.value === props.modelValue) ? props.type : "default",
+              type: hiddenItems.value.some((item) => isActiveItem(item)) ? props.type : "default",
               size: props.size,
-              link: props.plain && !hiddenItems.value.some((item) => item.value === props.modelValue),
+              link: props.plain && !hiddenItems.value.some((item) => isActiveItem(item)),
               style: vue.normalizeStyle({ width: props.buttonWidth }),
               class: vue.normalizeClass({
-                "is-active": hiddenItems.value.some((item) => item.value === props.modelValue)
+                "is-active": hiddenItems.value.some((item) => isActiveItem(item))
               })
             }, {
               default: vue.withCtx(() => [..._cache[0] || (_cache[0] = [

package/dist/lib/package.json.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const version = "0.0.18";
+const version = "0.0.20";
 exports.version = version;

package/dist/lib/page-header/PageHeader.vue.d.ts

@@ -19,6 +19,7 @@ declare function __VLS_template(): {
     slots: {
         center?(_: {}): any;
         time?(_: {}): any;
+        userIcon?(_: {}): any;
     };
     refs: {};
     rootEl: HTMLElement;

package/dist/lib/page-header/PageHeader.vue.js

@@ -42,7 +42,7 @@ const _hoisted_9 = { class: "jky-page-header__time hidden md:block" };
 const _hoisted_10 = { class: "jky-page-header__user" };
 const _hoisted_11 = ["src", "alt"];
 const _hoisted_12 = {
-  key: 2,
+  key: 0,
   class: "jky-page-header__username hidden md:block"
 };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
@@ -226,33 +226,35 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
               ]),
               default: vue.withCtx(() => [
                 vue.createElementVNode("div", _hoisted_10, [
-                  __props.userAvatar ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElIcon), {
-                    key: 0,
-                    size: 32,
-                    class: "jky-page-header__avatar"
-                  }, {
-                    default: vue.withCtx(() => [
-                      vue.createElementVNode("img", {
-                        src: __props.userAvatar,
-                        alt: __props.userName,
-                        class: "rounded-full"
-                      }, null, 8, _hoisted_11)
-                    ]),
-                    _: 1
-                  })) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElIcon), {
-                    key: 1,
-                    size: 32,
-                    class: "jky-page-header__avatar"
-                  }, {
-                    default: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
-                      vue.createElementVNode("span", { class: "icon-[heroicons--user]" }, null, -1)
-                    ])]),
-                    _: 1
-                  })),
+                  vue.renderSlot(_ctx.$slots, "userIcon", {}, () => [
+                    __props.userAvatar ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElIcon), {
+                      key: 0,
+                      size: 24,
+                      class: "jky-page-header__avatar"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createElementVNode("img", {
+                          src: __props.userAvatar,
+                          alt: __props.userName,
+                          class: "rounded-full"
+                        }, null, 8, _hoisted_11)
+                      ]),
+                      _: 1
+                    })) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElIcon), {
+                      key: 1,
+                      size: 24,
+                      class: "jky-page-header__avatar"
+                    }, {
+                      default: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
+                        vue.createElementVNode("span", { class: "icon-[heroicons--user]" }, null, -1)
+                      ])]),
+                      _: 1
+                    }))
+                  ]),
                   __props.userName ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12, vue.toDisplayString(__props.userName), 1)) : vue.createCommentVNode("", true)
                 ])
               ]),
-              _: 1
+              _: 3
             })
           ])
         ])

package/dist/umd/index.js

@@ -1398,7 +1398,7 @@ img {
 }
 /*$vite$:1*/`;
   document.head.appendChild(__vite_style__);
-  const version$1 = "0.0.18";
+  const version$1 = "0.0.20";
   const INSTALLED_KEY = Symbol("INSTALLED_KEY");
   function createInstaller(components2 = []) {
     const install2 = (app, options) => {
@@ -1532,33 +1532,48 @@ img {
       size: { default: "default" },
       type: { default: "primary" },
       plain: { type: Boolean, default: false },
-      buttonWidth: {}
+      buttonWidth: {},
+      route: { type: Boolean, default: false }
     },
-    emits: ["update:modelValue", "change"],
+    emits: ["update:modelValue", "change", "click"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emit = __emit;
+      const router = vue.inject("router", null);
+      const route = vue.inject("route", null);
       const visibleItems = vue.computed(() => props.items.slice(0, props.limit));
       const hiddenItems = vue.computed(() => props.items.slice(props.limit));
       const hasMore = vue.computed(() => props.items.length > props.limit);
-      function handleClick(value) {
-        emit("update:modelValue", value);
-        emit("change", value);
+      function isActiveItem(item) {
+        if (props.route && item.to && route) {
+          const targetPath = typeof item.to === "string" ? item.to : item.to.path;
+          return route.path === targetPath;
+        }
+        return props.modelValue === item.value;
+      }
+      function handleClick(item) {
+        if (props.route && item.to && router) {
+          router.push(item.to);
+        } else {
+          emit("update:modelValue", item.value);
+          emit("change", item.value);
+          emit("click", item);
+        }
       }
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleItems.value, (item) => {
             return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElButton), {
               key: item.value,
-              type: props.modelValue === item.value ? props.type : "default",
+              type: isActiveItem(item) ? props.type : "default",
               size: props.size,
               disabled: item.disabled,
-              link: props.plain && props.modelValue !== item.value,
+              link: props.plain && !isActiveItem(item),
               style: vue.normalizeStyle({ width: props.buttonWidth }),
               class: vue.normalizeClass({
-                "is-active": props.modelValue === item.value
+                "is-active": isActiveItem(item)
               }),
-              onClick: ($event) => handleClick(item.value)
+              onClick: ($event) => handleClick(item)
             }, vue.createSlots({
               default: vue.withCtx(() => [
                 vue.createTextVNode(" " + vue.toDisplayString(item.label), 1)
@@ -1587,7 +1602,7 @@ img {
                     return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElDropdownItem), {
                       key: item.value,
                       disabled: item.disabled,
-                      onClick: ($event) => handleClick(item.value)
+                      onClick: ($event) => handleClick(item)
                     }, {
                       default: vue.withCtx(() => [
                         item.icon ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -1605,12 +1620,12 @@ img {
             ]),
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(ElementPlus.ElButton), {
-                type: hiddenItems.value.some((item) => item.value === props.modelValue) ? props.type : "default",
+                type: hiddenItems.value.some((item) => isActiveItem(item)) ? props.type : "default",
                 size: props.size,
-                link: props.plain && !hiddenItems.value.some((item) => item.value === props.modelValue),
+                link: props.plain && !hiddenItems.value.some((item) => isActiveItem(item)),
                 style: vue.normalizeStyle({ width: props.buttonWidth }),
                 class: vue.normalizeClass({
-                  "is-active": hiddenItems.value.some((item) => item.value === props.modelValue)
+                  "is-active": hiddenItems.value.some((item) => isActiveItem(item))
                 })
               }, {
                 default: vue.withCtx(() => [..._cache[0] || (_cache[0] = [
@@ -1735,7 +1750,7 @@ img {
   const _hoisted_10 = { class: "jky-page-header__user" };
   const _hoisted_11 = ["src", "alt"];
   const _hoisted_12 = {
-    key: 2,
+    key: 0,
     class: "jky-page-header__username hidden md:block"
   };
   const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValues({}, {
@@ -1919,33 +1934,35 @@ img {
                 ]),
                 default: vue.withCtx(() => [
                   vue.createElementVNode("div", _hoisted_10, [
-                    __props.userAvatar ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElIcon), {
-                      key: 0,
-                      size: 32,
-                      class: "jky-page-header__avatar"
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createElementVNode("img", {
-                          src: __props.userAvatar,
-                          alt: __props.userName,
-                          class: "rounded-full"
-                        }, null, 8, _hoisted_11)
-                      ]),
-                      _: 1
-                    })) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElIcon), {
-                      key: 1,
-                      size: 32,
-                      class: "jky-page-header__avatar"
-                    }, {
-                      default: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
-                        vue.createElementVNode("span", { class: "icon-[heroicons--user]" }, null, -1)
-                      ])]),
-                      _: 1
-                    })),
+                    vue.renderSlot(_ctx.$slots, "userIcon", {}, () => [
+                      __props.userAvatar ? (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElIcon), {
+                        key: 0,
+                        size: 24,
+                        class: "jky-page-header__avatar"
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createElementVNode("img", {
+                            src: __props.userAvatar,
+                            alt: __props.userName,
+                            class: "rounded-full"
+                          }, null, 8, _hoisted_11)
+                        ]),
+                        _: 1
+                      })) : (vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElIcon), {
+                        key: 1,
+                        size: 24,
+                        class: "jky-page-header__avatar"
+                      }, {
+                        default: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
+                          vue.createElementVNode("span", { class: "icon-[heroicons--user]" }, null, -1)
+                        ])]),
+                        _: 1
+                      }))
+                    ]),
                     __props.userName ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_12, vue.toDisplayString(__props.userName), 1)) : vue.createCommentVNode("", true)
                   ])
                 ]),
-                _: 1
+                _: 3
               })
             ])
           ])

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jky-component-lib",
   "type": "module",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "publishConfig": {
     "access": "public"
   },
@@ -101,6 +101,7 @@
     "vitepress": "^1.6.3",
     "vitest": "^3.1.3",
     "vue": "^3.5.13",
+    "vue-router": "^5.0.4",
     "vue-tsc": "^2.2.10"
   },
   "simple-git-hooks": {