@vef-framework/components 1.0.62 → 1.0.64

package/lib/vef-layout/components/message.cjs

@@ -1,3 +1,16 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("lucide-react"),i=require("../../vef-icon/index.cjs"),t=require("../common-styles.cjs");exports.default=function(){return e.jsx("div",{css:t.iconStyle,children:e.jsx(i.default,{size:"large",children:e.jsx(r.BellIcon,{})})})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const index = require('../../vef-icon/index.cjs');
+const commonStyles = require('../common-styles.cjs');
+
+function VefMessage() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: commonStyles.iconStyle, children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { size: "large", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BellIcon, {}) }) });
+}
+
+exports.default = VefMessage;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-layout/components/search.cjs

@@ -1,3 +1,16 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("lucide-react"),i=require("../../vef-icon/index.cjs"),t=require("../common-styles.cjs");exports.default=function(){return e.jsx("div",{css:t.iconStyle,children:e.jsx(i.default,{size:"large",children:e.jsx(r.SearchIcon,{})})})};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const index = require('../../vef-icon/index.cjs');
+const commonStyles = require('../common-styles.cjs');
+
+function VefSearch() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: commonStyles.iconStyle, children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { size: "large", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, {}) }) });
+}
+
+exports.default = VefSearch;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-layout/components/sider.cjs

@@ -1,6 +1,22 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),i=require("@emotion/react"),t=require("@vef-framework/shared"),r=require("antd"),n=require("react"),l=require("../../vef-menu/index.cjs"),s=require("../../vef-scroll-area/index.cjs"),o=require("../hooks/use-layout-context.cjs"),a=require("../store.cjs"),u=require("./title.cjs"),{Sider:d}=r.Layout,c=i.css`
-  border-right: ${t.themeVariables.lineWidth} ${t.themeVariables.lineType} ${t.themeVariables.colorBorderSecondary};
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react$1 = require('react');
+const index$1 = require('../../vef-menu/index.cjs');
+const index = require('../../vef-scroll-area/index.cjs');
+const useLayoutContext = require('../hooks/use-layout-context.cjs');
+const store = require('../store.cjs');
+const title = require('./title.cjs');
+
+const { Sider } = antd.Layout;
+const siderStyle = react.css`
+  border-right: ${shared.themeVariables.lineWidth} ${shared.themeVariables.lineType} ${shared.themeVariables.colorBorderSecondary};
 
   > .vef-layout-sider-children {
     --vef-layout-header-height: 60px;
@@ -37,8 +53,8 @@
                 inset-inline-start: 0;
                 pointer-events: none;
                 width: 0;
-                height: calc(${t.themeVariables.fontSize} * 0.8);
-                border-inline-start: 4px ${t.themeVariables.lineType} var(--vef-menu-item-selected-color);
+                height: calc(${shared.themeVariables.fontSize} * 0.8);
+                border-inline-start: 4px ${shared.themeVariables.lineType} var(--vef-menu-item-selected-color);
                 border-radius: var(--vef-menu-item-border-radius);
               }
             }
@@ -47,5 +63,41 @@
       }
     }
   }
-`;const m=n.memo((function(){const[i,t,r,n]=o.useLayoutContextSelector((e=>[e.menuItems,e.defaultOpenedMenuKeys,e.activeMenuKey,e.onActiveMenuKeyChange])),[m,f]=a.useLayoutStore((e=>[e.siderCollapsed,e.setSiderCollapsed]));return e.jsxs(d,{collapsible:!0,breakpoint:"lg",collapsed:m,collapsedWidth:80,css:c,theme:"light",trigger:null,width:220,onCollapse:f,children:[e.jsx(u.default,{}),e.jsx("div",{className:"vef-layout-sider-menu",children:e.jsx(s.default,{scrollbarSize:"small",children:e.jsx(l.default,{inlineExpansion:!0,defaultOpenedKeys:t,inlineCollapsed:m,items:i??[],selectedKeys:r?[r]:[],onSelect:n})})})]})}));m.displayName="VefSider",exports.default=m;
+`;
+function VefSiderBase() {
+  const [menuItems, defaultOpenedMenuKeys, activeMenuKey, onActiveMenuKeyChange] = useLayoutContext.useLayoutContextSelector((ctx) => [ctx.menuItems, ctx.defaultOpenedMenuKeys, ctx.activeMenuKey, ctx.onActiveMenuKeyChange]);
+  const [siderCollapsed, setSiderCollapsed] = store.useLayoutStore((state) => [state.siderCollapsed, state.setSiderCollapsed]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Sider,
+    {
+      collapsible: true,
+      breakpoint: "lg",
+      collapsed: siderCollapsed,
+      collapsedWidth: 80,
+      css: siderStyle,
+      theme: "light",
+      trigger: null,
+      width: 220,
+      onCollapse: setSiderCollapsed,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(title.default, {}),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vef-layout-sider-menu", children: /* @__PURE__ */ jsxRuntime.jsx(index.default, { scrollbarSize: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
+          index$1.default,
+          {
+            inlineExpansion: true,
+            defaultOpenedKeys: defaultOpenedMenuKeys,
+            inlineCollapsed: siderCollapsed,
+            items: menuItems ?? [],
+            selectedKeys: activeMenuKey ? [activeMenuKey] : [],
+            onSelect: onActiveMenuKeyChange
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+const VefSider = react$1.memo(VefSiderBase);
+VefSider.displayName = "VefSider";
+
+exports.default = VefSider;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-layout/components/title.cjs

@@ -1,20 +1,33 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("@emotion/react"),i=require("@vef-framework/shared"),o=require("motion/react"),r=require("react"),a=require("../hooks/use-layout-context.cjs"),l=require("../logo.svg.cjs"),s=require("../store.cjs"),n=t.css`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const react$1 = require('motion/react');
+const react$2 = require('react');
+const useLayoutContext = require('../hooks/use-layout-context.cjs');
+const logo = require('../logo.svg.cjs');
+const store = require('../store.cjs');
+
+const titleStyle = react.css`
   flex: none;
   height: var(--vef-layout-header-height);
-  border-bottom: ${i.themeVariables.lineWidth} ${i.themeVariables.lineType} ${i.themeVariables.colorBorderSecondary};
+  border-bottom: ${shared.themeVariables.lineWidth} ${shared.themeVariables.lineType} ${shared.themeVariables.colorBorderSecondary};
   display: flex;
   align-items: center;
-  padding: 0 ${i.themeVariables.paddingSm};
+  padding: 0 ${shared.themeVariables.paddingSm};
   overflow: hidden;
   user-select: none;
 
   > div {
     flex: none;
     width: 55px;
-    height: calc(${i.themeVariables.controlHeight} * 1.2);
+    height: calc(${shared.themeVariables.controlHeight} * 1.2);
     font-size: 0;
-    ${i.styles.flexCenter}
+    ${shared.styles.flexCenter}
 
     > img {
       height: 100%;
@@ -26,13 +39,48 @@
     flex: auto;
     margin: 0;
     font-weight: bold;
-    font-size: ${i.themeVariables.fontSizeLg};
-    color: ${i.themeVariables.colorTextSlate};
+    font-size: ${shared.themeVariables.fontSizeLg};
+    color: ${shared.themeVariables.colorTextSlate};
     max-width: 156px;
     white-space: nowrap;
     overflow: hidden;
     text-align: center;
     text-overflow: ellipsis;
   }
-`;const c=r.memo((function(){const[t,i]=a.useLayoutContextSelector((e=>[e.logo,e.title])),r=s.useLayoutStore((e=>e.siderCollapsed));return e.jsxs("div",{css:n,children:[e.jsx("div",{children:t||e.jsx("img",{alt:"VEF",src:l.default})}),e.jsx(o.AnimatePresence,{initial:!1,children:!r&&e.jsx(o.motion.h3,{layout:!0,animate:{opacity:1,x:0},exit:{opacity:0,x:32},initial:{opacity:0,x:-32},transition:{duration:.2,ease:"easeIn"},children:i||"VEF中后台系统"})})]})}));c.displayName="VefTitle",exports.default=c;
+`;
+const defaultTitle = "VEF\u4E2D\u540E\u53F0\u7CFB\u7EDF";
+function VefTitleBase() {
+  const [logo$1, title] = useLayoutContext.useLayoutContextSelector((ctx) => [ctx.logo, ctx.title]);
+  const siderCollapsed = store.useLayoutStore((state) => state.siderCollapsed);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: titleStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: logo$1 || /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "VEF", src: logo.default }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(react$1.AnimatePresence, { initial: false, children: !siderCollapsed && /* @__PURE__ */ jsxRuntime.jsx(
+      react$1.motion.h3,
+      {
+        layout: true,
+        animate: {
+          opacity: 1,
+          x: 0
+        },
+        exit: {
+          opacity: 0,
+          x: 32
+        },
+        initial: {
+          opacity: 0,
+          x: -32
+        },
+        transition: {
+          duration: 0.2,
+          ease: "easeIn"
+        },
+        children: title || defaultTitle
+      }
+    ) })
+  ] });
+}
+const VefTitle = react$2.memo(VefTitleBase);
+VefTitle.displayName = "VefTitle";
+
+exports.default = VefTitle;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-layout/components/user-avatar.cjs

@@ -1,18 +1,92 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),s=require("@emotion/react"),i=require("@vef-framework/shared"),r=require("lucide-react"),o=require("react"),t=require("../../vef-avatar/index.cjs"),n=require("../../vef-dropdown/index.cjs"),c=require("../../vef-icon/index.cjs"),a=require("../hooks/use-layout-context.cjs"),l=require("./icon-boy.cjs"),u=require("./icon-girl.cjs"),d=s.css`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const lucideReact = require('lucide-react');
+const react$1 = require('react');
+const index$2 = require('../../vef-avatar/index.cjs');
+const index$1 = require('../../vef-dropdown/index.cjs');
+const index = require('../../vef-icon/index.cjs');
+const useLayoutContext = require('../hooks/use-layout-context.cjs');
+const iconBoy = require('./icon-boy.cjs');
+const iconGirl = require('./icon-girl.cjs');
+
+const wrapperStyle = react.css`
   display: flex;
   align-items: center;
-  column-gap: ${i.themeVariables.marginSm};
-  padding: ${i.themeVariables.paddingXs};
-`,x=s.css`
+  column-gap: ${shared.themeVariables.marginSm};
+  padding: ${shared.themeVariables.paddingXs};
+`;
+const nameStyle = react.css`
   display: flex;
   flex-direction: column;
   align-items: center;
-  row-gap: calc(${i.themeVariables.marginXxs} + 2px);
+  row-gap: calc(${shared.themeVariables.marginXxs} + 2px);
   user-select: none;
   line-height: 1;
-`,m=s.css`
-  font-size: ${i.themeVariables.fontSizeSm};
-  color: ${i.themeVariables.colorTextDescription};
-`,f=[{type:"item",key:"userInfo",label:"个人信息",icon:e.jsx(c.default,{children:e.jsx(r.UserRoundIcon,{})})},{type:"item",key:"passwordModification",label:"修改密码",icon:e.jsx(c.default,{children:e.jsx(r.LockKeyholeIcon,{})})},{type:"item",key:"logout",label:"退出登录",icon:e.jsx(c.default,{children:e.jsx(r.LogOutIcon,{})})}],j=e.jsx(l.default,{}),h=e.jsx(u.default,{});exports.default=function(){const[s,r,c,l,u]=a.useLayoutContextSelector((e=>[e.onLogout,e.userName,e.userGender,e.userAvatar,e.userDescription])),p=o.useCallback((e=>{"logout"===e&&s&&i.showConfirmation("登出提示","确定要退出登录吗？",s)}),[s]);return e.jsx(n.default,{items:f,onClick:p,children:e.jsxs("div",{css:d,children:[e.jsx(t.default,{size:"medium",src:l||("female"===c?h:j)}),e.jsxs("div",{css:x,children:[e.jsx("span",{children:r??"佚名"}),u&&e.jsxs("span",{css:m,children:["[",u,"]"]})]})]})})};
+`;
+const descriptionStyle = react.css`
+  font-size: ${shared.themeVariables.fontSizeSm};
+  color: ${shared.themeVariables.colorTextDescription};
+`;
+const menuItems = [
+  {
+    type: "item",
+    key: "userInfo",
+    label: "\u4E2A\u4EBA\u4FE1\u606F",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UserRoundIcon, {}) })
+  },
+  {
+    type: "item",
+    key: "passwordModification",
+    label: "\u4FEE\u6539\u5BC6\u7801",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LockKeyholeIcon, {}) })
+  },
+  {
+    type: "item",
+    key: "logout",
+    label: "\u9000\u51FA\u767B\u5F55",
+    icon: /* @__PURE__ */ jsxRuntime.jsx(index.default, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.LogOutIcon, {}) })
+  }
+];
+const defaultBoyAvatar = /* @__PURE__ */ jsxRuntime.jsx(iconBoy.default, {});
+const defaultGirlAvatar = /* @__PURE__ */ jsxRuntime.jsx(iconGirl.default, {});
+function VefUserAvatar() {
+  const [onLogout, userName, userGender, userAvatar, userDescription] = useLayoutContext.useLayoutContextSelector((ctx) => [ctx.onLogout, ctx.userName, ctx.userGender, ctx.userAvatar, ctx.userDescription]);
+  const handleClick = react$1.useCallback((key) => {
+    if (key === "logout" && onLogout) {
+      shared.showConfirmation("\u767B\u51FA\u63D0\u793A", "\u786E\u5B9A\u8981\u9000\u51FA\u767B\u5F55\u5417\uFF1F", onLogout);
+    }
+  }, [onLogout]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index$1.default,
+    {
+      items: menuItems,
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: wrapperStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          index$2.default,
+          {
+            size: "medium",
+            src: userAvatar || (userGender === "female" ? defaultGirlAvatar : defaultBoyAvatar)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { css: nameStyle, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: userName ?? "\u4F5A\u540D" }),
+          userDescription && /* @__PURE__ */ jsxRuntime.jsxs("span", { css: descriptionStyle, children: [
+            "[",
+            userDescription,
+            "]"
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+
+exports.default = VefUserAvatar;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-layout/hooks/use-layout-context.cjs

@@ -1,3 +1,17 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),{useContextSelector:t,useContext:o,ContextProvider:r}=e.createSelectableContext({});exports.LayoutContextProvider=r,exports.useLayoutContext=o,exports.useLayoutContextSelector=t;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+
+const {
+  useContextSelector: useLayoutContextSelector,
+  useContext: useLayoutContext,
+  ContextProvider: LayoutContextProvider
+} = shared.createSelectableContext({});
+
+exports.LayoutContextProvider = LayoutContextProvider;
+exports.useLayoutContext = useLayoutContext;
+exports.useLayoutContextSelector = useLayoutContextSelector;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-layout/index.cjs

@@ -1,7 +1,41 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),t=require("@vef-framework/shared"),i=require("antd"),o=require("react"),s=require("./components/content.cjs"),n=require("./components/header.cjs"),u=require("./components/sider.cjs"),a=require("./hooks/use-layout-context.cjs"),c=require("./store.cjs"),l=r.css`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const antd = require('antd');
+const react$1 = require('react');
+const content = require('./components/content.cjs');
+const header = require('./components/header.cjs');
+const sider = require('./components/sider.cjs');
+const useLayoutContext = require('./hooks/use-layout-context.cjs');
+const store = require('./store.cjs');
+
+const layoutStyle = react.css`
   height: 100%;
   min-height: initial;
   overflow: hidden;
-`;function d({children:r}){return e.jsxs(i.Layout,{hasSider:!0,css:l,children:[e.jsx(u.default,{}),e.jsxs(i.Layout,{hasSider:!1,children:[e.jsx(n.default,{}),e.jsx(s.default,{children:r})]})]})}const h=o.memo((function({children:r,...t}){return e.jsx(c.LayoutStoreProvider,{initialState:null,children:e.jsx(a.LayoutContextProvider,{value:t,children:e.jsx(d,{children:r})})})}),((e,r)=>t.isShallowEqual(e.activeMenuKey,r.activeMenuKey)));h.displayName="VefLayout",exports.default=h;
+`;
+function VefLayoutBase({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(antd.Layout, { hasSider: true, css: layoutStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(sider.default, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(antd.Layout, { hasSider: false, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(header.default, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(content.default, { children })
+    ] })
+  ] });
+}
+function VefLayoutWrapper({ children, ...restProps }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(store.LayoutStoreProvider, { initialState: null, children: /* @__PURE__ */ jsxRuntime.jsx(useLayoutContext.LayoutContextProvider, { value: restProps, children: /* @__PURE__ */ jsxRuntime.jsx(VefLayoutBase, { children }) }) });
+}
+const VefLayout = react$1.memo(
+  VefLayoutWrapper,
+  (prevProps, nextProps) => shared.isShallowEqual(prevProps.activeMenuKey, nextProps.activeMenuKey)
+);
+VefLayout.displayName = "VefLayout";
+
+exports.default = VefLayout;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-layout/logo.svg.cjs

@@ -1,3 +1,9 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});exports.default="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%2296%2053%20150%20145.63955181855252%22%3E%3Cg%20transform%3D%22translate%2895%2C52.18022155761719%29%22%3E%3Cg%20fill%3D%22%2334435C%22%20hollow-target%3D%22text%22%3E%3Cg%20mask%3D%22url%28%23ab0ea033-fda4-47dc-88f0-22900a4a23a9%29%22%3E%3Cg%3E%3Csvg%20x%3D%220%22%20y%3D%220%22%20width%3D%22150%22%20height%3D%22145.63955181855252%22%20filtersec%3D%22colorsb9343370191%22%20class%3D%22image-svg-svg%20primary%22%20style%3D%22overflow%3A%20visible%3B%22%3E%3Csvg%20viewBox%3D%220%200%20334.1409912109375%20324.4289855957031%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22none%22%20pointer-events%3D%22none%22%20d%3D%22M0%200h334.141v324.429H0z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22st4%22%20d%3D%22M168.019%2013.483c-83.2%200-150.7%2067.5-150.7%20150.7%200%2083.2%2067.5%20150.7%20150.7%20150.7%2083.2%200%20150.7-67.5%20150.7-150.7%200-83.3-67.5-150.7-150.7-150.7zm0%20241c-49.9%200-90.4-40.5-90.4-90.4%200-49.9%2040.5-90.4%2090.4-90.4%2049.9%200%2090.4%2040.5%2090.4%2090.4%200%2050-40.5%2090.4-90.4%2090.4z%22%20fill%3D%22%23fcc29a%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22st5%22%20d%3D%22M258.419%20164.083c0%2049.9-40.5%2090.4-90.4%2090.4-49.9%200-90.4-40.5-90.4-90.4%200%2066.6%2054%20120.5%20120.5%20120.5s120.5-54%20120.5-120.5c0-83.2-67.5-150.7-150.7-150.7-83.2%200-150.7%2067.5-150.7%20150.7%200-66.6%2054-120.5%20120.5-120.5%2066.7%200%20120.7%2054%20120.7%20120.5%22%20fill%3D%22%233498db%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%3C%2Fsvg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2843.244998931884766%2C52.94477844238281%29%22%3E%3Cg%20data-gra%3D%22path-name%22%3E%3Cg%20transform%3D%22scale%281%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M31.8-21.32L31.8-21.32Q31.8-17.56%2030.83-14.54%2029.86-11.52%2028.13-9.17%2026.4-6.82%2024.01-5.13%2021.62-3.44%2018.77-2.35%2015.93-1.26%2012.72-0.74%209.51-0.21%206.12-0.21L6.12-0.21Q4.86-0.21%203.65-0.28%202.44-0.35%201.18-0.48L1.18-0.48%201.93-36.52Q4.89-37.46%208.02-37.85%2011.15-38.24%2014.23-38.24L14.23-38.24Q18.07-38.24%2021.3-37.09%2024.52-35.93%2026.86-33.76%2029.19-31.58%2030.49-28.44%2031.8-25.3%2031.8-21.32ZM20.79-19.23L20.79-19.6Q20.81-21.05%2020.48-22.4%2020.14-23.74%2019.38-24.77%2018.61-25.81%2017.43-26.44%2016.25-27.07%2014.61-27.12L14.61-27.12%2013.54-10.47Q15.15-10.72%2016.46-11.53%2017.78-12.35%2018.73-13.55%2019.69-14.74%2020.21-16.21%2020.73-17.67%2020.79-19.23L20.79-19.23ZM64.69-25.83L64.69-25.83Q64.69-23.23%2063.92-21.22%2063.14-19.2%2061.78-17.7%2060.42-16.19%2058.6-15.15%2056.77-14.1%2054.69-13.44%2052.61-12.78%2050.38-12.47%2048.15-12.17%2046-12.14L46-12.14%2046%200.38%2033.49%200.38Q33.49-5.77%2033.52-11.87%2033.54-17.97%2033.6-24.17L33.6-24.17Q33.65-27.45%2033.62-30.72%2033.6-34%2033.76-37.33L33.76-37.33Q37.19-38.35%2040.63-38.86%2044.07-39.37%2047.72-39.37L47.72-39.37Q49.79-39.37%2051.86-39.03%2053.93-38.7%2055.82-37.97%2057.71-37.25%2059.34-36.16%2060.96-35.07%2062.14-33.57%2063.33-32.07%2064.01-30.15%2064.69-28.23%2064.69-25.83ZM52.77-24.92L52.77-24.92Q52.77-26.67%2051.71-27.65%2050.65-28.63%2048.96-28.63L48.96-28.63Q48.39-28.63%2047.79-28.53%2047.19-28.44%2046.65-28.31L46.65-28.31%2046.33-20.46Q46.7-20.41%2047.05-20.41%2047.4-20.41%2047.78-20.41L47.78-20.41Q48.74-20.41%2049.64-20.73%2050.54-21.05%2051.24-21.66%2051.94-22.26%2052.35-23.08%2052.77-23.9%2052.77-24.92Z%22%20transform%3D%22translate%28-1.1800000667572021%2C%2039.369998931884766%29%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const defaultLogo = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20aria-hidden%3D%22true%22%20role%3D%22img%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%2296%2053%20150%20145.63955181855252%22%3E%3Cg%20transform%3D%22translate%2895%2C52.18022155761719%29%22%3E%3Cg%20fill%3D%22%2334435C%22%20hollow-target%3D%22text%22%3E%3Cg%20mask%3D%22url%28%23ab0ea033-fda4-47dc-88f0-22900a4a23a9%29%22%3E%3Cg%3E%3Csvg%20x%3D%220%22%20y%3D%220%22%20width%3D%22150%22%20height%3D%22145.63955181855252%22%20filtersec%3D%22colorsb9343370191%22%20class%3D%22image-svg-svg%20primary%22%20style%3D%22overflow%3A%20visible%3B%22%3E%3Csvg%20viewBox%3D%220%200%20334.1409912109375%20324.4289855957031%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22none%22%20pointer-events%3D%22none%22%20d%3D%22M0%200h334.141v324.429H0z%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22st4%22%20d%3D%22M168.019%2013.483c-83.2%200-150.7%2067.5-150.7%20150.7%200%2083.2%2067.5%20150.7%20150.7%20150.7%2083.2%200%20150.7-67.5%20150.7-150.7%200-83.3-67.5-150.7-150.7-150.7zm0%20241c-49.9%200-90.4-40.5-90.4-90.4%200-49.9%2040.5-90.4%2090.4-90.4%2049.9%200%2090.4%2040.5%2090.4%2090.4%200%2050-40.5%2090.4-90.4%2090.4z%22%20fill%3D%22%23fcc29a%22%3E%3C%2Fpath%3E%3Cpath%20class%3D%22st5%22%20d%3D%22M258.419%20164.083c0%2049.9-40.5%2090.4-90.4%2090.4-49.9%200-90.4-40.5-90.4-90.4%200%2066.6%2054%20120.5%20120.5%20120.5s120.5-54%20120.5-120.5c0-83.2-67.5-150.7-150.7-150.7-83.2%200-150.7%2067.5-150.7%20150.7%200-66.6%2054-120.5%20120.5-120.5%2066.7%200%20120.7%2054%20120.7%20120.5%22%20fill%3D%22%233498db%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%3C%2Fsvg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2843.244998931884766%2C52.94477844238281%29%22%3E%3Cg%20data-gra%3D%22path-name%22%3E%3Cg%20transform%3D%22scale%281%29%22%3E%3Cg%3E%3Cpath%20d%3D%22M31.8-21.32L31.8-21.32Q31.8-17.56%2030.83-14.54%2029.86-11.52%2028.13-9.17%2026.4-6.82%2024.01-5.13%2021.62-3.44%2018.77-2.35%2015.93-1.26%2012.72-0.74%209.51-0.21%206.12-0.21L6.12-0.21Q4.86-0.21%203.65-0.28%202.44-0.35%201.18-0.48L1.18-0.48%201.93-36.52Q4.89-37.46%208.02-37.85%2011.15-38.24%2014.23-38.24L14.23-38.24Q18.07-38.24%2021.3-37.09%2024.52-35.93%2026.86-33.76%2029.19-31.58%2030.49-28.44%2031.8-25.3%2031.8-21.32ZM20.79-19.23L20.79-19.6Q20.81-21.05%2020.48-22.4%2020.14-23.74%2019.38-24.77%2018.61-25.81%2017.43-26.44%2016.25-27.07%2014.61-27.12L14.61-27.12%2013.54-10.47Q15.15-10.72%2016.46-11.53%2017.78-12.35%2018.73-13.55%2019.69-14.74%2020.21-16.21%2020.73-17.67%2020.79-19.23L20.79-19.23ZM64.69-25.83L64.69-25.83Q64.69-23.23%2063.92-21.22%2063.14-19.2%2061.78-17.7%2060.42-16.19%2058.6-15.15%2056.77-14.1%2054.69-13.44%2052.61-12.78%2050.38-12.47%2048.15-12.17%2046-12.14L46-12.14%2046%200.38%2033.49%200.38Q33.49-5.77%2033.52-11.87%2033.54-17.97%2033.6-24.17L33.6-24.17Q33.65-27.45%2033.62-30.72%2033.6-34%2033.76-37.33L33.76-37.33Q37.19-38.35%2040.63-38.86%2044.07-39.37%2047.72-39.37L47.72-39.37Q49.79-39.37%2051.86-39.03%2053.93-38.7%2055.82-37.97%2057.71-37.25%2059.34-36.16%2060.96-35.07%2062.14-33.57%2063.33-32.07%2064.01-30.15%2064.69-28.23%2064.69-25.83ZM52.77-24.92L52.77-24.92Q52.77-26.67%2051.71-27.65%2050.65-28.63%2048.96-28.63L48.96-28.63Q48.39-28.63%2047.79-28.53%2047.19-28.44%2046.65-28.31L46.65-28.31%2046.33-20.46Q46.7-20.41%2047.05-20.41%2047.4-20.41%2047.78-20.41L47.78-20.41Q48.74-20.41%2049.64-20.73%2050.54-21.05%2051.24-21.66%2051.94-22.26%2052.35-23.08%2052.77-23.9%2052.77-24.92Z%22%20transform%3D%22translate%28-1.1800000667572021%2C%2039.369998931884766%29%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E";
+
+exports.default = defaultLogo;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-layout/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-layout/store.cjs

@@ -1,3 +1,23 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared"),{StoreProvider:o,useStore:r,useStoreApi:t}=e.createComponentStore("Layout",(()=>e=>({siderCollapsed:!1,setSiderCollapsed:o=>e({siderCollapsed:o})})));exports.LayoutStoreProvider=o,exports.useLayoutStore=r,exports.useLayoutStoreApi=t;
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+
+const {
+  StoreProvider: LayoutStoreProvider,
+  useStore: useLayoutStore,
+  useStoreApi: useLayoutStoreApi
+} = shared.createComponentStore(
+  "Layout",
+  () => (set) => ({
+    siderCollapsed: false,
+    setSiderCollapsed: (collapsed) => set({ siderCollapsed: collapsed })
+  })
+);
+
+exports.LayoutStoreProvider = LayoutStoreProvider;
+exports.useLayoutStore = useLayoutStore;
+exports.useLayoutStoreApi = useLayoutStoreApi;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-loading-placeholder/index.cjs

@@ -1,9 +1,49 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@emotion/react"),t=require("@vef-framework/shared"),i=require("motion/react"),s=require("../vef-spin/index.cjs"),n=require("../vef-text/index.cjs"),a=r.css`
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const react = require('@emotion/react');
+const shared = require('@vef-framework/shared');
+const react$1 = require('motion/react');
+const index = require('../vef-spin/index.cjs');
+const index$1 = require('../vef-text/index.cjs');
+
+const loadingPlaceholderStyle = react.css`
   height: 100%;
-  padding: ${t.themeVariables.paddingLg};
-  ${t.styles.flexCenter}
+  padding: ${shared.themeVariables.paddingLg};
+  ${shared.styles.flexCenter}
   flex-direction: column;
-  row-gap: ${t.themeVariables.marginLg};
-`;function o({text:r}){return e.jsx("div",{css:t.styles.flexCenter,children:String(r).split("").map(((r,t)=>e.jsx(i.motion.span,{animate:{y:[2,-2]},initial:{y:0},transition:{duration:.6,repeat:1/0,delay:.1*t,ease:"easeInOut",repeatType:"reverse"},children:r},t)))})}exports.default=function({tip:r,...i}){return e.jsxs("div",{css:a,children:[e.jsx(s.default,{...i}),r&&t.isString(r)&&e.jsx(n.default,{color:"secondary",children:e.jsx(o,{text:r})})||r]})};
+  row-gap: ${shared.themeVariables.marginLg};
+`;
+function AnimatedText({ text }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: shared.styles.flexCenter, children: String(text).split("").map((char, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    react$1.motion.span,
+    {
+      animate: { y: [2, -2] },
+      initial: { y: 0 },
+      transition: {
+        duration: 0.6,
+        repeat: Infinity,
+        delay: index * 0.1,
+        ease: "easeInOut",
+        repeatType: "reverse"
+      },
+      children: char
+    },
+    index
+  )) });
+}
+function VefLoadingPlaceholder({
+  tip,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { css: loadingPlaceholderStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.default, { ...restProps }),
+    tip && shared.isString(tip) && /* @__PURE__ */ jsxRuntime.jsx(index$1.default, { color: "secondary", children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedText, { text: tip }) }) || tip
+  ] });
+}
+
+exports.default = VefLoadingPlaceholder;
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */

package/lib/vef-loading-placeholder/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.62, build time: 2025-01-09T07:31:10.823Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.64, build time: 2025-01-10T01:26:01.691Z, made by Venus. */
+'use strict';
+
+
 /*! VefFramework is a blazingly high-level, modern, flexible, easy-to-use UI framework made by Venus. Follow me on Github: https://github.com/ilxqx! @ilxqx */