@vef-framework/components 1.0.98 → 1.0.99

package/es/vef-menu/index.js

@@ -1,8 +1,80 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{jsx as e}from"@emotion/react/jsx-runtime";import{css as t}from"@emotion/react";import{useNormalizedMenuItems as n}from"@vef-framework/hooks";import{themeVariables as o,isFunction as l}from"@vef-framework/shared";import{Menu as i}from"antd";import{useMemo as s}from"react";const a=t`
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useNormalizedMenuItems } from '@vef-framework/hooks';
+import { themeVariables, isFunction } from '@vef-framework/shared';
+import { Menu } from 'antd';
+import { useMemo } from 'react';
+
+const menuStyle = css`
   &.vef-menu {
-    --vef-menu-icon-size: ${o.fontSizeLg};
-    --vef-menu-collapsed-icon-size: calc(${o.fontSizeLg} + 2px);
+    --vef-menu-icon-size: ${themeVariables.fontSizeLg};
+    --vef-menu-collapsed-icon-size: calc(${themeVariables.fontSizeLg} + 2px);
   }
-`;function VefMenu({defaultOpenedKeys:t,openedKeys:o,orientation:c="vertical",inlineCollapsed:r=!1,inlineIndent:m=20,inlineExpansion:d=!1,items:f,selectable:p=!0,deselectable:u=!1,multiple:y=!1,defaultSelectedKeys:k,selectedKeys:v,appearance:K,onClick:h,onChange:S,onSelect:z,onDeselect:C}){const b=n(f),[x,g,P]=s((()=>{const e=l(h)?({key:e,keyPath:t})=>h(e,t):void 0,t=l(S);return[e,l(z)||t?({key:e,keyPath:t,selectedKeys:n})=>{S?.(n),z?.(e,t)}:void 0,l(C)||t?({key:e,keyPath:t,selectedKeys:n})=>{S?.(n),C?.(e,t)}:void 0]}),[h,S,z,C]);return e(i,{css:a,defaultOpenKeys:t,defaultSelectedKeys:k,inlineCollapsed:r,inlineIndent:m,items:b,mode:"vertical"===c?d?"inline":"vertical":"horizontal",multiple:y,openKeys:o,selectable:p,selectedKeys:v,theme:K,unselectable:u?"on":"off",onClick:x,onDeselect:P,onSelect:g})}export{VefMenu as default};
+`;
+function VefMenu({
+  defaultOpenedKeys,
+  openedKeys,
+  orientation = "vertical",
+  inlineCollapsed = false,
+  inlineIndent = 20,
+  inlineExpansion = false,
+  items,
+  selectable = true,
+  deselectable = false,
+  multiple = false,
+  defaultSelectedKeys,
+  selectedKeys,
+  appearance,
+  onClick,
+  onChange,
+  onSelect,
+  onDeselect
+}) {
+  const normalizedItems = useNormalizedMenuItems(items);
+  const [handleClick, handleSelect, handleDeselect] = useMemo(() => {
+    const handleClick2 = isFunction(onClick) ? ({ key, keyPath }) => onClick(key, keyPath) : void 0;
+    const hasOnChange = isFunction(onChange);
+    const handleSelect2 = isFunction(onSelect) || hasOnChange ? ({
+      key,
+      keyPath,
+      selectedKeys: selectedKeys2
+    }) => {
+      onChange?.(selectedKeys2);
+      onSelect?.(key, keyPath);
+    } : void 0;
+    const handleDeselect2 = isFunction(onDeselect) || hasOnChange ? ({
+      key,
+      keyPath,
+      selectedKeys: selectedKeys2
+    }) => {
+      onChange?.(selectedKeys2);
+      onDeselect?.(key, keyPath);
+    } : void 0;
+    return [handleClick2, handleSelect2, handleDeselect2];
+  }, [onClick, onChange, onSelect, onDeselect]);
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      css: menuStyle,
+      defaultOpenKeys: defaultOpenedKeys,
+      defaultSelectedKeys,
+      inlineCollapsed,
+      inlineIndent,
+      items: normalizedItems,
+      mode: orientation === "vertical" ? inlineExpansion ? "inline" : "vertical" : "horizontal",
+      multiple,
+      openKeys: openedKeys,
+      selectable,
+      selectedKeys,
+      theme: appearance,
+      unselectable: deselectable ? "on" : "off",
+      onClick: handleClick,
+      onDeselect: handleDeselect,
+      onSelect: handleSelect
+    }
+  );
+}
+
+export { VefMenu as default };
 /*! 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/es/vef-modal/components/action-button-wrapper.js

@@ -1,3 +1,50 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{jsx as o,Fragment as r}from"@emotion/react/jsx-runtime";import{invokeMaybeAsyncFn as e}from"@vef-framework/shared";import{useState as t,useMemo as i,cloneElement as n}from"react";import{useModalContextSelector as a}from"../context.js";function VefModalActionButtonWrapper({children:l}){const[d,s]=a((o=>[o.isDisabled,o.setIsDisabled])),[c,f]=t(!1),{disabled:m,loading:p,onClick:u}=l.props,b=i((()=>{if(u)return async o=>{await e(u,{beforeInvoke:()=>{f(!0),s(!0)},onFinally:()=>{f(!1),s(!1)}},o)}}),[u,s]),k=n(l,{disabled:d||m,loading:c||p,onClick:b});return o(r,{children:k})}export{VefModalActionButtonWrapper as default};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { invokeMaybeAsyncFn } from '@vef-framework/shared';
+import { useState, useMemo, cloneElement } from 'react';
+import { useModalContextSelector } from '../context.js';
+
+function VefModalActionButtonWrapper({
+  children
+}) {
+  const [isDisabled, setIsDisabled] = useModalContextSelector((ctx) => [ctx.isDisabled, ctx.setIsDisabled]);
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    disabled,
+    loading,
+    onClick
+  } = children.props;
+  const wrappedOnClick = useMemo(() => {
+    if (!onClick) {
+      return;
+    }
+    return async (event) => {
+      await invokeMaybeAsyncFn(
+        onClick,
+        {
+          beforeInvoke: () => {
+            setIsLoading(true);
+            setIsDisabled(true);
+          },
+          onFinally: () => {
+            setIsLoading(false);
+            setIsDisabled(false);
+          }
+        },
+        event
+      );
+    };
+  }, [onClick, setIsDisabled]);
+  const buttonNode = cloneElement(
+    children,
+    {
+      disabled: isDisabled || disabled,
+      loading: isLoading || loading,
+      onClick: wrappedOnClick
+    }
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: buttonNode });
+}
+
+export { VefModalActionButtonWrapper as default };
 /*! 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/es/vef-modal/components/button-props.js

@@ -1,2 +1,3 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+
 /*! 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/es/vef-modal/components/cancel-action-button.js

@@ -1,3 +1,19 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{jsx as t}from"@emotion/react/jsx-runtime";import o from"../../vef-button/index.js";import n from"./action-button-wrapper.js";function VefCancelActionButton({text:e,onClick:r}){return t(n,{children:t(o,{color:"default",variant:"text",onClick:r,children:e})})}export{VefCancelActionButton as default};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import VefButton from '../../vef-button/index.js';
+import VefModalActionButtonWrapper from './action-button-wrapper.js';
+
+function VefCancelActionButton({ text, onClick }) {
+  return /* @__PURE__ */ jsx(VefModalActionButtonWrapper, { children: /* @__PURE__ */ jsx(
+    VefButton,
+    {
+      color: "default",
+      variant: "text",
+      onClick,
+      children: text
+    }
+  ) });
+}
+
+export { VefCancelActionButton as default };
 /*! 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/es/vef-modal/components/ok-action-button.js

@@ -1,3 +1,21 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{jsx as o}from"@emotion/react/jsx-runtime";import{CheckIcon as t}from"lucide-react";import r from"../../vef-button/index.js";import i from"../../vef-icon/index.js";import n from"./action-button-wrapper.js";function VefOkActionButton({text:e,onClick:c}){return o(n,{children:o(r,{color:"primary",icon:o(i,{children:o(t,{})}),onClick:c,children:e})})}export{VefOkActionButton as default};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx } from '@emotion/react/jsx-runtime';
+import { CheckIcon } from 'lucide-react';
+import VefButton from '../../vef-button/index.js';
+import VefIcon from '../../vef-icon/index.js';
+import VefModalActionButtonWrapper from './action-button-wrapper.js';
+
+function VefOkActionButton({ text, onClick }) {
+  return /* @__PURE__ */ jsx(VefModalActionButtonWrapper, { children: /* @__PURE__ */ jsx(
+    VefButton,
+    {
+      color: "primary",
+      icon: /* @__PURE__ */ jsx(VefIcon, { children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+      onClick,
+      children: text
+    }
+  ) });
+}
+
+export { VefOkActionButton as default };
 /*! 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/es/vef-modal/context.js

@@ -1,3 +1,16 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{createSelectableContext as e,noop as s}from"@vef-framework/shared";const{ContextProvider:o,useContext:t,useContextSelector:r}=e({isDisabled:!1,setIsDisabled:s,isFullyOpened:!1,isFullyClosed:!1});export{o as ModalContextProvider,t as useModalContext,r as useModalContextSelector};
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { createSelectableContext, noop } from '@vef-framework/shared';
+
+const {
+  ContextProvider: ModalContextProvider,
+  useContext: useModalContext,
+  useContextSelector: useModalContextSelector
+} = createSelectableContext({
+  isDisabled: false,
+  setIsDisabled: noop,
+  isFullyOpened: false,
+  isFullyClosed: false
+});
+
+export { ModalContextProvider, useModalContext, useModalContextSelector };
 /*! 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/es/vef-modal/index.js

@@ -1,6 +1,242 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{jsx as o,jsxs as t,Fragment as e}from"@emotion/react/jsx-runtime";import{css as n}from"@emotion/react";import{useWindowSize as r,useElementSize as l}from"@vef-framework/hooks";import{isFunction as s}from"@vef-framework/shared";import{Modal as i}from"antd";import{useDragControls as a,motion as c}from"motion/react";import{useCallback as d,useState as m,useMemo as f,useEffect as p,memo as u}from"react";import h from"./components/cancel-action-button.js";import C from"./components/ok-action-button.js";import{ModalContextProvider as k}from"./context.js";export{default as VefModalActionButtonWrapper}from"./components/action-button-wrapper.js";const g=n`
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { useWindowSize, useElementSize } from '@vef-framework/hooks';
+import { isFunction } from '@vef-framework/shared';
+import { Modal } from 'antd';
+import { useDragControls, motion } from 'motion/react';
+import { useCallback, useState, useMemo, useEffect, memo } from 'react';
+import VefCancelActionButton from './components/cancel-action-button.js';
+import VefOkActionButton from './components/ok-action-button.js';
+import { ModalContextProvider } from './context.js';
+export { default as VefModalActionButtonWrapper } from './components/action-button-wrapper.js';
+
+const titleStyle = css`
   cursor: move;
   user-select: none;
-`;const w=u((function VefModalBase({title:n,open:u,closable:w=!0,closeOnEscPress:b=!0,closeOnMaskClick:v=!1,destroyOnClose:O=!1,showCancelButton:x=!0,cancelButtonText:y="取消",okButtonText:B="提交",actions:F,width:j,loading:A=!1,cancelOnClose:E=!0,onClose:M,onOk:T,onCancel:D,onAfterOpen:L,onAfterClose:P,children:I}){const V=a(),z=d((o=>{o.stopPropagation(),V.start(o)}),[V]),{width:R,height:W}=r(),[q,G]=m(null),H=l(q),J=f((()=>{if(!H)return{left:0,top:0,right:0,bottom:0};const{width:o,height:t}=H;return{left:-(R/2-o/2),top:-(W/2-t/2),right:R/2-o/2,bottom:W/2-t/2}}),[H,W,R]),K=f((()=>"small"===j?378:"medium"===j?736:"narrow"===j?"25vw":"half"===j?"50vw":"wide"===j?"75vw":"full"===j?"100vw":j),[j]),N=d((t=>o(c.div,{ref:o=>G(o),drag:!0,dragConstraints:J,dragControls:V,dragElastic:.3,dragListener:!1,dragMomentum:!1,children:t})),[J,V]),Q=f((()=>o("div",{css:g,onPointerDown:z,children:n})),[n,z]),[S,U]=m(!1),[X,Y]=m({isFullyOpened:!1,isFullyClosed:!1}),Z=f((()=>({isDisabled:S,setIsDisabled:U,...X})),[S,U,X]),$=A||S;p((()=>{u&&X.isFullyClosed&&Y((o=>({...o,isFullyClosed:!1})))}),[u]);const _=d((o=>{if(!$){if(Y((o=>({...o,isFullyOpened:!1}))),E)return M?.(),void D?.();o?D?.():M?.()}}),[$,E,M,D]),oo=f((()=>{const n=o(h,{text:y,onClick:()=>_(!0)},"cancelActionButton"),r=o(C,{text:B,onClick:T},"okActionButton");return s(F)?F([n,r]):F||(x?t(e,{children:[n,r]}):r)}),[y,B,T,F,x,_]),to=d((({type:o,target:t})=>{let e=!0;if("click"===o){let o=t.parentElement;for(;o;){if(o.classList.contains("vef-modal-content")){e=!0;break}if(o.classList.contains("vef-modal-footer")){e=!1;break}o=o.parentElement}}_(!e)}),[_]),eo=d((o=>{const t=s(L),e=s(P);o?(t&&L(),Y((o=>({...o,isFullyOpened:!0})))):(e&&P(),Y((o=>({...o,isFullyClosed:!0}))))}),[L,P]);return o(k,{value:Z,children:o(i,{centered:!0,afterOpenChange:eo,cancelText:y,closable:w,destroyOnClose:O,footer:oo,keyboard:b,loading:A,maskClosable:v,modalRender:N,okText:B,open:u,title:Q,width:K,zIndex:10,onCancel:to,onOk:T,children:I})})}));export{w as default};
+`;
+function VefModalBase({
+  title,
+  open,
+  closable = true,
+  closeOnEscPress = true,
+  closeOnMaskClick = false,
+  destroyOnClose = false,
+  showCancelButton = true,
+  cancelButtonText = "\u53D6\u6D88",
+  okButtonText = "\u63D0\u4EA4",
+  actions,
+  width,
+  loading = false,
+  cancelOnClose = true,
+  onClose,
+  onOk,
+  onCancel,
+  onAfterOpen,
+  onAfterClose,
+  children
+}) {
+  const dragControls = useDragControls();
+  const handleDrag = useCallback((event) => {
+    event.stopPropagation();
+    dragControls.start(event);
+  }, [dragControls]);
+  const { width: windowWidth, height: windowHeight } = useWindowSize();
+  const [modalEl, setModalEl] = useState(null);
+  const modalSize = useElementSize(modalEl);
+  const dragConstraints = useMemo(() => {
+    if (!modalSize) {
+      return {
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0
+      };
+    }
+    const { width: width2, height } = modalSize;
+    return {
+      left: -(windowWidth / 2 - width2 / 2),
+      top: -(windowHeight / 2 - height / 2),
+      right: windowWidth / 2 - width2 / 2,
+      bottom: windowHeight / 2 - height / 2
+    };
+  }, [modalSize, windowHeight, windowWidth]);
+  const widthToUse = useMemo(() => {
+    if (width === "small") {
+      return 378;
+    } else if (width === "medium") {
+      return 736;
+    } else if (width === "narrow") {
+      return "25vw";
+    } else if (width === "half") {
+      return "50vw";
+    } else if (width === "wide") {
+      return "75vw";
+    } else if (width === "full") {
+      return "100vw";
+    }
+    return width;
+  }, [width]);
+  const renderContent = useCallback((node) => /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref: (el) => setModalEl(el),
+      drag: true,
+      dragConstraints,
+      dragControls,
+      dragElastic: 0.3,
+      dragListener: false,
+      dragMomentum: false,
+      children: node
+    }
+  ), [dragConstraints, dragControls]);
+  const titleContent = useMemo(() => /* @__PURE__ */ jsx(
+    "div",
+    {
+      css: titleStyle,
+      onPointerDown: handleDrag,
+      children: title
+    }
+  ), [title, handleDrag]);
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [modalVisibleState, setModalVisibleState] = useState({
+    isFullyOpened: false,
+    isFullyClosed: false
+  });
+  const modalContext = useMemo(() => ({
+    isDisabled,
+    setIsDisabled,
+    ...modalVisibleState
+  }), [isDisabled, setIsDisabled, modalVisibleState]);
+  const modalDisabled = loading || isDisabled;
+  useEffect(() => {
+    if (open && modalVisibleState.isFullyClosed) {
+      setModalVisibleState((prevState) => ({
+        ...prevState,
+        isFullyClosed: false
+      }));
+    }
+  }, [open]);
+  const handleClose = useCallback((isCancel) => {
+    if (modalDisabled) {
+      return;
+    }
+    setModalVisibleState((prevState) => ({
+      ...prevState,
+      isFullyOpened: false
+    }));
+    if (cancelOnClose) {
+      onClose?.();
+      onCancel?.();
+      return;
+    }
+    if (isCancel) {
+      onCancel?.();
+    } else {
+      onClose?.();
+    }
+  }, [
+    modalDisabled,
+    cancelOnClose,
+    onClose,
+    onCancel
+  ]);
+  const actionNode = useMemo(() => {
+    const cancelButton = /* @__PURE__ */ jsx(
+      VefCancelActionButton,
+      {
+        text: cancelButtonText,
+        onClick: () => handleClose(true)
+      },
+      "cancelActionButton"
+    );
+    const okButton = /* @__PURE__ */ jsx(VefOkActionButton, { text: okButtonText, onClick: onOk }, "okActionButton");
+    if (isFunction(actions)) {
+      return actions([cancelButton, okButton]);
+    }
+    if (actions) {
+      return actions;
+    }
+    if (!showCancelButton) {
+      return okButton;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      cancelButton,
+      okButton
+    ] });
+  }, [
+    cancelButtonText,
+    okButtonText,
+    onOk,
+    actions,
+    showCancelButton,
+    handleClose
+  ]);
+  const handleCancel = useCallback(({ type, target }) => {
+    let isClose = true;
+    if (type === "click") {
+      const el = target;
+      let parent = el.parentElement;
+      while (parent) {
+        if (parent.classList.contains("vef-modal-content")) {
+          isClose = true;
+          break;
+        }
+        if (parent.classList.contains("vef-modal-footer")) {
+          isClose = false;
+          break;
+        }
+        parent = parent.parentElement;
+      }
+    }
+    handleClose(!isClose);
+  }, [handleClose]);
+  const handleAfterOpenChange = useCallback((open2) => {
+    const hasAfterOpen = isFunction(onAfterOpen);
+    const hasAfterClose = isFunction(onAfterClose);
+    if (open2) {
+      if (hasAfterOpen) {
+        onAfterOpen();
+      }
+      setModalVisibleState((prevState) => ({
+        ...prevState,
+        isFullyOpened: true
+      }));
+    } else {
+      if (hasAfterClose) {
+        onAfterClose();
+      }
+      setModalVisibleState((prevState) => ({
+        ...prevState,
+        isFullyClosed: true
+      }));
+    }
+  }, [onAfterOpen, onAfterClose]);
+  return /* @__PURE__ */ jsx(ModalContextProvider, { value: modalContext, children: /* @__PURE__ */ jsx(
+    Modal,
+    {
+      centered: true,
+      afterOpenChange: handleAfterOpenChange,
+      cancelText: cancelButtonText,
+      closable,
+      destroyOnClose,
+      footer: actionNode,
+      keyboard: closeOnEscPress,
+      loading,
+      maskClosable: closeOnMaskClick,
+      modalRender: renderContent,
+      okText: okButtonText,
+      open,
+      title: titleContent,
+      width: widthToUse,
+      zIndex: 10,
+      onCancel: handleCancel,
+      onOk,
+      children
+    }
+  ) });
+}
+const VefModal = memo(VefModalBase);
+
+export { VefModal as default };
 /*! 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/es/vef-not-found/index.js

@@ -1,8 +1,17 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{jsx as o,jsxs as e}from"@emotion/react/jsx-runtime";import{css as i}from"@emotion/react";import{styles as n,themeVariables as r}from"@vef-framework/shared";import{ArrowLeftIcon as t}from"lucide-react";import c from"../vef-button/index.js";import f from"../vef-icon/index.js";import a from"./not-found-icon.js";const d=i`
+/*! VefFramework version: 1.0.99, build time: 2025-03-07T13:41:55.865Z, made by Venus. */
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { styles, themeVariables } from '@vef-framework/shared';
+import { ArrowLeftIcon } from 'lucide-react';
+import VefButton from '../vef-button/index.js';
+import VefIcon from '../vef-icon/index.js';
+import Memo from './not-found-icon.js';
+
+const notFoundStyle = css`
   height: 100%;
-  ${n.flexCenter}
-`,l=i`
+  ${styles.flexCenter}
+`;
+const contentStyle = css`
   width: 40%;
   position: relative;
   top: -60px;
@@ -10,21 +19,47 @@ import{jsx as o,jsxs as e}from"@emotion/react/jsx-runtime";import{css as i}from"
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  row-gap: ${r.margin};
+  row-gap: ${themeVariables.margin};
 
   > svg {
     width: 70%;
   }
 
   > span {
-    font-size: ${r.fontSizeLg};
+    font-size: ${themeVariables.fontSizeLg};
     font-weight: 500;
-    color: ${r.colorTextTertiary};
+    color: ${themeVariables.colorTextTertiary};
   }
 
   span.vef-not-found-uri {
-    padding-left: ${r.paddingSm};
-    color: ${r.colorWarningText};
+    padding-left: ${themeVariables.paddingSm};
+    color: ${themeVariables.colorWarningText};
   }
-`;function VefNotFound({uri:i,title:n="抱歉，您访问的页面不存在～～～",onNavigateHome:r}){return o("div",{css:d,children:e("div",{css:l,children:[o(a,{}),o("span",{children:n}),i&&e("span",{children:["路径:",o("span",{className:"vef-not-found-uri",children:i})]}),o(c,{color:"primary",size:"large",icon:o(f,{children:o(t,{})}),onClick:r,children:"回到首页"})]})})}export{VefNotFound as default};
+`;
+function VefNotFound({
+  uri,
+  title = "\u62B1\u6B49\uFF0C\u60A8\u8BBF\u95EE\u7684\u9875\u9762\u4E0D\u5B58\u5728\uFF5E\uFF5E\uFF5E",
+  onNavigateHome
+}) {
+  return /* @__PURE__ */ jsx("div", { css: notFoundStyle, children: /* @__PURE__ */ jsxs("div", { css: contentStyle, children: [
+    /* @__PURE__ */ jsx(Memo, {}),
+    /* @__PURE__ */ jsx("span", { children: title }),
+    uri && /* @__PURE__ */ jsxs("span", { children: [
+      "\u8DEF\u5F84:",
+      /* @__PURE__ */ jsx("span", { className: "vef-not-found-uri", children: uri })
+    ] }),
+    /* @__PURE__ */ jsx(
+      VefButton,
+      {
+        color: "primary",
+        size: "large",
+        icon: /* @__PURE__ */ jsx(VefIcon, { children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
+        onClick: onNavigateHome,
+        children: "\u56DE\u5230\u9996\u9875"
+      }
+    )
+  ] }) });
+}
+
+export { VefNotFound as default };
 /*! 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 */