@vef-framework/starter 1.0.97 → 1.0.99

package/lib/components/vef-not-found-page/index.cjs

@@ -1,3 +1,26 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),t=require("@tanstack/react-router"),r=require("@vef-framework/components"),o=require("react"),a=require("../../constants.cjs");exports.default=function VefNotFoundPage(){const u=t.useNavigate(),n=o.useCallback((()=>u({to:a.INDEX_PAGE_PATH,replace:!0})),[u]),{pathname:s}=t.useLocation();return e.jsx(r.VefNotFound,{uri:s,onNavigateHome:n})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const reactRouter = require('@tanstack/react-router');
+const components = require('@vef-framework/components');
+const react = require('react');
+const constants = require('../../constants.cjs');
+
+function VefNotFoundPage() {
+  const navigate = reactRouter.useNavigate();
+  const handleNavigateHome = react.useCallback(
+    () => navigate({
+      to: constants.INDEX_PAGE_PATH,
+      replace: true
+    }),
+    [navigate]
+  );
+  const { pathname } = reactRouter.useLocation();
+  return /* @__PURE__ */ jsxRuntime.jsx(components.VefNotFound, { uri: pathname, onNavigateHome: handleNavigateHome });
+}
+
+exports.default = VefNotFoundPage;
 /*! 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/components/vef-not-found-page/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, 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/components/vef-router-provider/index.cjs

@@ -1,3 +1,22 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@emotion/react/jsx-runtime"),r=require("@tanstack/react-router"),t=require("@vef-framework/core"),o=require("react");exports.default=function VefRouterProvider({router:u}){const{fetchAuthenticatedUserApi:i}=t.useApiContext(),c=o.useMemo((()=>({fetchAuthenticatedUserApi:i})),[i]);return e.jsx(r.RouterProvider,{context:c,router:u})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const reactRouter = require('@tanstack/react-router');
+const core = require('@vef-framework/core');
+const react = require('react');
+
+function VefRouterProvider({
+  router
+}) {
+  const { fetchAuthenticatedUserApi } = core.useApiContext();
+  const context = react.useMemo(() => ({
+    fetchAuthenticatedUserApi
+  }), [fetchAuthenticatedUserApi]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactRouter.RouterProvider, { context, router });
+}
+
+exports.default = VefRouterProvider;
 /*! 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/components/vef-router-provider/props.cjs

@@ -1,3 +1,5 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, 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/constants.cjs

@@ -1,3 +1,19 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});exports.ACCESS_DENIED_PAGE_PATH="/access-denied",exports.ACCESS_DENIED_PAGE_ROUTE="/_common/access-denied",exports.INDEX_PAGE_PATH="/",exports.INDEX_PAGE_ROUTE="/_layout",exports.LOGIN_PAGE_PATH="/login",exports.LOGIN_PAGE_ROUTE="/_common/login";
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const LOGIN_PAGE_PATH = "/login";
+const LOGIN_PAGE_ROUTE = "/_common/login";
+const INDEX_PAGE_PATH = "/";
+const INDEX_PAGE_ROUTE = "/_layout";
+const ACCESS_DENIED_PAGE_PATH = "/access-denied";
+const ACCESS_DENIED_PAGE_ROUTE = "/_common/access-denied";
+
+exports.ACCESS_DENIED_PAGE_PATH = ACCESS_DENIED_PAGE_PATH;
+exports.ACCESS_DENIED_PAGE_ROUTE = ACCESS_DENIED_PAGE_ROUTE;
+exports.INDEX_PAGE_PATH = INDEX_PAGE_PATH;
+exports.INDEX_PAGE_ROUTE = INDEX_PAGE_ROUTE;
+exports.LOGIN_PAGE_PATH = LOGIN_PAGE_PATH;
+exports.LOGIN_PAGE_ROUTE = LOGIN_PAGE_ROUTE;
 /*! 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/helper.cjs

@@ -1,3 +1,24 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./constants.cjs"),e=require("./store.cjs");exports.handleClientLogout=async function handleClientLogout(a,i){await i.invalidateQueries(),e.useAppStore.setState({isAuthenticated:!1},!0),await a.invalidate(),await a.navigate({to:t.LOGIN_PAGE_PATH})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const constants = require('./constants.cjs');
+const store = require('./store.cjs');
+
+async function handleClientLogout(router, fetchAuthenticatedUserApi) {
+  await fetchAuthenticatedUserApi.invalidateQueries();
+  store.useAppStore.setState(
+    {
+      isAuthenticated: false
+    },
+    true
+  );
+  await router.invalidate();
+  await router.navigate({
+    to: constants.LOGIN_PAGE_PATH
+  });
+}
+
+exports.handleClientLogout = handleClientLogout;
 /*! 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/index.cjs

@@ -1,3 +1,50 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./api.cjs"),t=require("./app.cjs");require("./components/index.cjs");const r=require("./constants.cjs"),o=require("./helper.cjs"),s=require("./router.cjs");require("./routes/index.cjs");const p=require("./store.cjs"),n=require("./components/vef-access-denied-page/index.cjs"),i=require("./components/vef-app/index.cjs"),c=require("./components/vef-dev-assistant/index.cjs"),u=require("./components/vef-error-page/index.cjs"),a=require("./components/vef-login-page/index.cjs"),E=require("./components/vef-not-found-page/index.cjs"),A=require("./components/vef-router-provider/index.cjs"),d=require("./routes/access-denied.cjs"),x=require("./routes/layout.cjs"),_=require("./routes/login.cjs"),P=require("./routes/root.cjs");exports.createApiClient=e.createApiClient,exports.createApp=t.createApp,exports.ACCESS_DENIED_PAGE_PATH=r.ACCESS_DENIED_PAGE_PATH,exports.ACCESS_DENIED_PAGE_ROUTE=r.ACCESS_DENIED_PAGE_ROUTE,exports.INDEX_PAGE_PATH=r.INDEX_PAGE_PATH,exports.INDEX_PAGE_ROUTE=r.INDEX_PAGE_ROUTE,exports.LOGIN_PAGE_PATH=r.LOGIN_PAGE_PATH,exports.LOGIN_PAGE_ROUTE=r.LOGIN_PAGE_ROUTE,exports.handleClientLogout=o.handleClientLogout,exports.createRouter=s.createRouter,exports.useAppStore=p.useAppStore,exports.VefAccessDeniedPage=n.default,exports.VefApp=i.default,exports.VefDevAssistant=c.default,exports.VefErrorPage=u.default,exports.VefLoginPage=a.default,exports.VefNotFoundPage=E.default,exports.VefRouterProvider=A.default,exports.createAccessDeniedRouteOptions=d.createAccessDeniedRouteOptions,exports.createLayoutRouteOptions=x.createLayoutRouteOptions,exports.createLoginRouteOptions=_.createLoginRouteOptions,exports.createRootRoute=P.createRootRoute;
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const api = require('./api.cjs');
+const app = require('./app.cjs');
+require('./components/index.cjs');
+const constants = require('./constants.cjs');
+const helper = require('./helper.cjs');
+const router = require('./router.cjs');
+require('./routes/index.cjs');
+const store = require('./store.cjs');
+const index = require('./components/vef-access-denied-page/index.cjs');
+const index$1 = require('./components/vef-app/index.cjs');
+const index$2 = require('./components/vef-dev-assistant/index.cjs');
+const index$3 = require('./components/vef-error-page/index.cjs');
+const index$4 = require('./components/vef-login-page/index.cjs');
+const index$5 = require('./components/vef-not-found-page/index.cjs');
+const index$6 = require('./components/vef-router-provider/index.cjs');
+const accessDenied = require('./routes/access-denied.cjs');
+const layout = require('./routes/layout.cjs');
+const login = require('./routes/login.cjs');
+const root = require('./routes/root.cjs');
+
+
+
+exports.createApiClient = api.createApiClient;
+exports.createApp = app.createApp;
+exports.ACCESS_DENIED_PAGE_PATH = constants.ACCESS_DENIED_PAGE_PATH;
+exports.ACCESS_DENIED_PAGE_ROUTE = constants.ACCESS_DENIED_PAGE_ROUTE;
+exports.INDEX_PAGE_PATH = constants.INDEX_PAGE_PATH;
+exports.INDEX_PAGE_ROUTE = constants.INDEX_PAGE_ROUTE;
+exports.LOGIN_PAGE_PATH = constants.LOGIN_PAGE_PATH;
+exports.LOGIN_PAGE_ROUTE = constants.LOGIN_PAGE_ROUTE;
+exports.handleClientLogout = helper.handleClientLogout;
+exports.createRouter = router.createRouter;
+exports.useAppStore = store.useAppStore;
+exports.VefAccessDeniedPage = index.default;
+exports.VefApp = index$1.default;
+exports.VefDevAssistant = index$2.default;
+exports.VefErrorPage = index$3.default;
+exports.VefLoginPage = index$4.default;
+exports.VefNotFoundPage = index$5.default;
+exports.VefRouterProvider = index$6.default;
+exports.createAccessDeniedRouteOptions = accessDenied.createAccessDeniedRouteOptions;
+exports.createLayoutRouteOptions = layout.createLayoutRouteOptions;
+exports.createLoginRouteOptions = login.createLoginRouteOptions;
+exports.createRootRoute = root.createRootRoute;
 /*! 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/router.cjs

@@ -1,3 +1,74 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@tanstack/react-router"),r=require("@vef-framework/components"),t=require("@vef-framework/shared"),a=require("nprogress"),o=require("react"),n=6e5;exports.createRouter=function createRouter({routeTree:s,history:i}){const l=e.createRouter({routeTree:s,trailingSlash:"never",caseSensitive:!0,history:"hash"===i?e.createHashHistory():e.createBrowserHistory(),search:{strict:!0},notFoundMode:"root",defaultPendingComponent:()=>o.createElement(r.VefLoadingPlaceholder,{size:"large"}),defaultPendingMs:500,defaultPendingMinMs:300,defaultSsr:!1,defaultStructuralSharing:!0,defaultHashScrollIntoView:{behavior:"smooth",block:"start",inline:"center"},defaultPreload:"intent",defaultPreloadDelay:50,defaultPreloadGcTime:n,defaultGcTime:n,defaultOnCatch(e,a){t.showErrorNotification(e.message||e.name,o.createElement(r.VefText,{color:"error",children:o.createElement("pre",{style:{maxHeight:"480px",overflowY:"auto",scrollbarWidth:"thin",scrollbarColor:"rgba(0, 0, 0, 0.2) transparent"},children:e.stack||a.componentStack||"No stack trace available"})}))}});return l.subscribe("onBeforeLoad",(({pathChanged:e})=>e&&a.start())),l.subscribe("onLoad",(()=>{a.done()})),l};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const reactRouter = require('@tanstack/react-router');
+const components = require('@vef-framework/components');
+const shared = require('@vef-framework/shared');
+const NProgress = require('nprogress');
+const react = require('react');
+
+const defaultGcTime = 10 * 60 * 1e3;
+function createRouter({
+  routeTree,
+  history
+}) {
+  const router = reactRouter.createRouter({
+    routeTree,
+    trailingSlash: "never",
+    caseSensitive: true,
+    history: history === "hash" ? reactRouter.createHashHistory() : reactRouter.createBrowserHistory(),
+    search: {
+      strict: true
+    },
+    notFoundMode: "root",
+    defaultPendingComponent: () => react.createElement(
+      components.VefLoadingPlaceholder,
+      {
+        size: "large"
+      }
+    ),
+    defaultPendingMs: 500,
+    defaultPendingMinMs: 300,
+    defaultSsr: false,
+    defaultStructuralSharing: true,
+    defaultHashScrollIntoView: {
+      behavior: "smooth",
+      block: "start",
+      inline: "center"
+    },
+    defaultPreload: "intent",
+    defaultPreloadDelay: 50,
+    defaultPreloadGcTime: defaultGcTime,
+    defaultGcTime,
+    defaultOnCatch(error, errorInfo) {
+      shared.showErrorNotification(
+        error.message || error.name,
+        react.createElement(
+          components.VefText,
+          {
+            color: "error",
+            children: react.createElement("pre", {
+              style: {
+                maxHeight: "480px",
+                overflowY: "auto",
+                scrollbarWidth: "thin",
+                scrollbarColor: "rgba(0, 0, 0, 0.2) transparent"
+              },
+              children: error.stack || errorInfo.componentStack || "No stack trace available"
+            })
+          }
+        )
+      );
+    }
+  });
+  router.subscribe("onBeforeLoad", ({ pathChanged }) => pathChanged && NProgress.start());
+  router.subscribe("onLoad", () => {
+    NProgress.done();
+  });
+  return router;
+}
+
+exports.createRouter = createRouter;
 /*! 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/routes/access-denied.cjs

@@ -1,3 +1,16 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),require("../components/index.cjs");const e=require("../components/vef-access-denied-page/index.cjs");exports.createAccessDeniedRouteOptions=function createAccessDeniedRouteOptions(){return{component:e.default}};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('../components/index.cjs');
+const index = require('../components/vef-access-denied-page/index.cjs');
+
+function createAccessDeniedRouteOptions() {
+  return {
+    component: index.default
+  };
+}
+
+exports.createAccessDeniedRouteOptions = createAccessDeniedRouteOptions;
 /*! 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/routes/index.cjs

@@ -1,3 +1,17 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./access-denied.cjs"),t=require("./layout.cjs"),o=require("./login.cjs"),r=require("./root.cjs");exports.createAccessDeniedRouteOptions=e.createAccessDeniedRouteOptions,exports.createLayoutRouteOptions=t.createLayoutRouteOptions,exports.createLoginRouteOptions=o.createLoginRouteOptions,exports.createRootRoute=r.createRootRoute;
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const accessDenied = require('./access-denied.cjs');
+const layout = require('./layout.cjs');
+const login = require('./login.cjs');
+const root = require('./root.cjs');
+
+
+
+exports.createAccessDeniedRouteOptions = accessDenied.createAccessDeniedRouteOptions;
+exports.createLayoutRouteOptions = layout.createLayoutRouteOptions;
+exports.createLoginRouteOptions = login.createLoginRouteOptions;
+exports.createRootRoute = root.createRootRoute;
 /*! 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/routes/layout.cjs

@@ -1,3 +1,138 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@emotion/react/jsx-runtime"),t=require("@tanstack/react-router"),r=require("@vef-framework/components"),o=require("@vef-framework/core"),a=require("@vef-framework/shared"),n=require("lucide-react"),s=require("react"),u=require("../constants.cjs"),i=require("../helper.cjs"),c=require("../store.cjs"),l={key:u.INDEX_PAGE_PATH,label:e.jsx(r.VefIcon,{children:e.jsx(n.HomeIcon,{})})};exports.createLayoutRouteOptions=function createLayoutRouteOptions({title:n,logo:p,getUserDescription:m}){return{beforeLoad:({location:e})=>{const{isAuthenticated:r,routeParentMenusMappings:o}=c.useAppStore.getState();if(!r)throw t.redirect({to:u.LOGIN_PAGE_PATH,search:{redirect:e.href}});if(o&&!o.has(e.pathname))throw t.redirect({to:u.ACCESS_DENIED_PAGE_PATH,replace:!0})},loader:async({context:e,location:r})=>{const{fetchAuthenticatedUserApi:o}=e,{menus:n,permissions:s,...i}=await o.fetchQuery(),l=Object.freeze(a.buildRouteParentMenusMappings(n));if(c.useAppStore.setState({user:Object.freeze(i),menus:Object.freeze(n),permissions:Object.freeze(new Set(s)),routeParentMenusMappings:l}),!l.has(r.pathname))throw t.redirect({to:u.ACCESS_DENIED_PAGE_PATH,replace:!0})},pendingComponent:()=>e.jsx(r.VefLoadingPlaceholder,{size:"large",tip:"系统加载中，请稍后..."}),component:function LayoutComponent(){const a=t.useRouter(),u=t.useNavigate(),{pathname:d}=t.useLocation(),[f,h,g]=c.useAppStore((e=>[e.menus,e.user,e.routeParentMenusMappings])),A=g?.get(d)?.[1].map((e=>e.key)),b=s.useMemo((()=>{const e=g?.get(d);if(!e)return[];const[t,r]=e;return[l,...r.map((e=>({key:e.key,label:e.label,dropdownItems:e.children.filter((e=>"divider"!==e.type)).map((e=>({key:e.key,label:e.label})))}))),{label:t.label}]}),[d,g]),{logoutApi:y,fetchAuthenticatedUserApi:j}=o.useApiContext(),{mutate:M}=y.useMutation(),P=s.useCallback((async()=>{await M(),await i.handleClientLogout(a,j)}),[M,a,j]),k=s.useCallback((e=>{u({to:e})}),[u]);return e.jsx(r.VefLayout,{activeMenuKey:d,breadcrumbItems:b,defaultOpenedMenuKeys:A,logo:p,menuItems:f,title:n,userAvatar:h?.avatar,userDescription:m?.(h),userGender:h?.gender,userName:h?.name,onActiveMenuKeyChange:k,onBreadcrumbClick:k,onLogout:P,children:e.jsx(t.Outlet,{})})},staleTime:1/0,gcTime:0,shouldReload:!1}};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const reactRouter = require('@tanstack/react-router');
+const components = require('@vef-framework/components');
+const core = require('@vef-framework/core');
+const shared = require('@vef-framework/shared');
+const lucideReact = require('lucide-react');
+const react = require('react');
+const constants = require('../constants.cjs');
+const helper = require('../helper.cjs');
+const store = require('../store.cjs');
+
+const indexBreadcrumbItem = {
+  key: constants.INDEX_PAGE_PATH,
+  label: /* @__PURE__ */ jsxRuntime.jsx(components.VefIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.HomeIcon, {}) })
+};
+function createLayoutRouteOptions({
+  title,
+  logo,
+  getUserDescription
+}) {
+  function LayoutComponent() {
+    const router = reactRouter.useRouter();
+    const navigate = reactRouter.useNavigate();
+    const { pathname } = reactRouter.useLocation();
+    const [menus, user, routeParentMenusMappings] = store.useAppStore((state) => [state.menus, state.user, state.routeParentMenusMappings]);
+    const defaultOpenedMenuKeys = routeParentMenusMappings?.get(pathname)?.[1].map((it) => it.key);
+    const breadcrumbItems = react.useMemo(() => {
+      const mapping = routeParentMenusMappings?.get(pathname);
+      if (!mapping) {
+        return [];
+      }
+      const [currentMenu, parentMenus] = mapping;
+      return [
+        indexBreadcrumbItem,
+        ...parentMenus.map((menu) => ({
+          key: menu.key,
+          label: menu.label,
+          dropdownItems: menu.children.filter((child) => child.type !== "divider").map((child) => ({
+            key: child.key,
+            label: child.label
+          }))
+        })),
+        {
+          label: currentMenu.label
+        }
+      ];
+    }, [pathname, routeParentMenusMappings]);
+    const { logoutApi, fetchAuthenticatedUserApi } = core.useApiContext();
+    const { mutate: logout } = logoutApi.useMutation();
+    const handleLogout = react.useCallback(async () => {
+      await logout();
+      await helper.handleClientLogout(router, fetchAuthenticatedUserApi);
+    }, [logout, router, fetchAuthenticatedUserApi]);
+    const handleMenuSwitch = react.useCallback((menuKey) => {
+      navigate({
+        to: menuKey
+      });
+    }, [navigate]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      components.VefLayout,
+      {
+        activeMenuKey: pathname,
+        breadcrumbItems,
+        defaultOpenedMenuKeys,
+        logo,
+        menuItems: menus,
+        title,
+        userAvatar: user?.avatar,
+        userDescription: getUserDescription?.(user),
+        userGender: user?.gender,
+        userName: user?.name,
+        onActiveMenuKeyChange: handleMenuSwitch,
+        onBreadcrumbClick: handleMenuSwitch,
+        onLogout: handleLogout,
+        children: /* @__PURE__ */ jsxRuntime.jsx(reactRouter.Outlet, {})
+      }
+    );
+  }
+  return {
+    beforeLoad: ({ location }) => {
+      const { isAuthenticated, routeParentMenusMappings } = store.useAppStore.getState();
+      if (!isAuthenticated) {
+        throw reactRouter.redirect({
+          to: constants.LOGIN_PAGE_PATH,
+          search: {
+            redirect: location.href
+          }
+        });
+      }
+      if (routeParentMenusMappings && !routeParentMenusMappings.has(location.pathname)) {
+        throw reactRouter.redirect({
+          to: constants.ACCESS_DENIED_PAGE_PATH,
+          replace: true
+        });
+      }
+    },
+    loader: async ({ context, location }) => {
+      const { fetchAuthenticatedUserApi } = context;
+      const {
+        menus,
+        permissions,
+        ...user
+      } = await fetchAuthenticatedUserApi.fetchQuery();
+      const routeParentMenusMappings = Object.freeze(shared.buildRouteParentMenusMappings(menus));
+      store.useAppStore.setState({
+        user: Object.freeze(user),
+        menus: Object.freeze(menus),
+        permissions: Object.freeze(new Set(permissions)),
+        routeParentMenusMappings
+      });
+      if (!routeParentMenusMappings.has(location.pathname)) {
+        throw reactRouter.redirect({
+          to: constants.ACCESS_DENIED_PAGE_PATH,
+          replace: true
+        });
+      }
+    },
+    pendingComponent: () => /* @__PURE__ */ jsxRuntime.jsx(
+      components.VefLoadingPlaceholder,
+      {
+        size: "large",
+        tip: "\u7CFB\u7EDF\u52A0\u8F7D\u4E2D\uFF0C\u8BF7\u7A0D\u540E..."
+      }
+    ),
+    component: LayoutComponent,
+    staleTime: Infinity,
+    gcTime: 0,
+    shouldReload: false
+  };
+}
+
+exports.createLayoutRouteOptions = createLayoutRouteOptions;
 /*! 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/routes/login.cjs

@@ -1,3 +1,33 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@emotion/react/jsx-runtime"),t=require("@tanstack/react-router"),r=require("@vef-framework/shared");require("../components/index.cjs");const o=require("../constants.cjs"),c=require("../store.cjs"),i=require("../components/vef-login-page/index.cjs");exports.createLoginRouteOptions=function createLoginRouteOptions(n){return{validateSearch:r.z.object({redirect:r.z.string().optional().default(o.INDEX_PAGE_PATH).catch(o.INDEX_PAGE_PATH)}),beforeLoad:({search:e})=>{if(c.useAppStore.getState().isAuthenticated){const{redirect:r}=e;throw t.redirect({to:r,replace:!0})}},component:()=>e.jsx(i.default,{...n})}};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const reactRouter = require('@tanstack/react-router');
+const shared = require('@vef-framework/shared');
+require('../components/index.cjs');
+const constants = require('../constants.cjs');
+const store = require('../store.cjs');
+const index = require('../components/vef-login-page/index.cjs');
+
+function createLoginRouteOptions(props) {
+  return {
+    validateSearch: shared.z.object({
+      redirect: shared.z.string().optional().default(constants.INDEX_PAGE_PATH).catch(constants.INDEX_PAGE_PATH)
+    }),
+    beforeLoad: ({ search }) => {
+      if (store.useAppStore.getState().isAuthenticated) {
+        const { redirect: redirectPath } = search;
+        throw reactRouter.redirect({
+          to: redirectPath,
+          replace: true
+        });
+      }
+    },
+    component: () => /* @__PURE__ */ jsxRuntime.jsx(index.default, { ...props })
+  };
+}
+
+exports.createLoginRouteOptions = createLoginRouteOptions;
 /*! 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/routes/root.cjs

@@ -1,3 +1,26 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@emotion/react/jsx-runtime"),t=require("@tanstack/react-router");require("../components/index.cjs");const o=require("../components/vef-not-found-page/index.cjs"),n=require("../components/vef-error-page/index.cjs"),r=require("../components/vef-dev-assistant/index.cjs");exports.createRootRoute=function createRootRoute(){return t.createRootRouteWithContext()({component:()=>e.jsxs(e.Fragment,{children:[e.jsx(t.Outlet,{}),"development"===process.env.NODE_ENV&&e.jsx(r.default,{})]}),errorComponent:n.default,notFoundComponent:o.default,ssr:!1})};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('@emotion/react/jsx-runtime');
+const reactRouter = require('@tanstack/react-router');
+require('../components/index.cjs');
+const index = require('../components/vef-not-found-page/index.cjs');
+const index$1 = require('../components/vef-error-page/index.cjs');
+const index$2 = require('../components/vef-dev-assistant/index.cjs');
+
+function createRootRoute() {
+  return reactRouter.createRootRouteWithContext()({
+    component: () => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactRouter.Outlet, {}),
+      process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxRuntime.jsx(index$2.default, {})
+    ] }),
+    errorComponent: index$1.default,
+    notFoundComponent: index.default,
+    ssr: false
+  });
+}
+
+exports.createRootRoute = createRootRoute;
 /*! 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/store.cjs

@@ -1,3 +1,23 @@
-/*! VefFramework version: 1.0.97, build time: 2025-03-06T12:24:37.719Z, made by Venus. */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@vef-framework/shared").createStore((()=>({isAuthenticated:!1})),{name:"APP",storage:"session",selector:e=>({isAuthenticated:e.isAuthenticated,token:e.token})});exports.useAppStore=e;
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:56.083Z, made by Venus. */
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const shared = require('@vef-framework/shared');
+
+const useAppStore = shared.createStore(
+  () => ({
+    isAuthenticated: false
+  }),
+  {
+    name: "APP",
+    storage: "session",
+    selector: (state) => ({
+      isAuthenticated: state.isAuthenticated,
+      token: state.token
+    })
+  }
+);
+
+exports.useAppStore = useAppStore;
 /*! 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vef-framework/starter",
   "type": "module",
-  "version": "1.0.97",
+  "version": "1.0.99",
   "private": false,
   "packageManager": "pnpm@9.15.0",
   "description": "The starter of the VEF framework",
@@ -30,7 +30,7 @@
   "peerDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "@tanstack/react-router": "^1.112.13"
+    "@tanstack/react-router": "^1.112.18"
   },
   "dependencies": {
     "@emotion/cache": "11.14.0",
@@ -40,11 +40,11 @@
     "tslib": "2.8.1",
     "use-sync-external-store": "^1.4.0",
     "@tanstack/react-query-devtools": "5.67.1",
-    "@tanstack/router-devtools": "^1.112.13",
-    "@vef-framework/components": "1.0.97",
-    "@vef-framework/core": "1.0.97",
-    "@vef-framework/hooks": "1.0.97",
-    "@vef-framework/shared": "1.0.97",
+    "@tanstack/router-devtools": "^1.112.18",
+    "@vef-framework/components": "1.0.99",
+    "@vef-framework/core": "1.0.99",
+    "@vef-framework/hooks": "1.0.99",
+    "@vef-framework/shared": "1.0.99",
     "lucide-react": "0.477.0",
     "motion": "12.4.10",
     "nprogress": "^0.2.0"