@vef-framework/components 1.0.98 → 1.0.99

package/es/vef-loading-placeholder/index.js

@@ -1,9 +1,45 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{jsx as e,jsxs as t}from"@emotion/react/jsx-runtime";import{css as r}from"@emotion/react";import{themeVariables as i,styles as n,isString as o}from"@vef-framework/shared";import{motion as a}from"motion/react";import d from"../vef-spin/index.js";import m from"../vef-text/index.js";const c=r`
+/*! 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 { themeVariables, styles, isString } from '@vef-framework/shared';
+import { motion } from 'motion/react';
+import VefSpin from '../vef-spin/index.js';
+import VefText from '../vef-text/index.js';
+
+const loadingPlaceholderStyle = css`
   height: 100%;
-  padding: ${i.paddingLg};
-  ${n.flexCenter}
+  padding: ${themeVariables.paddingLg};
+  ${styles.flexCenter}
   flex-direction: column;
-  row-gap: ${i.marginLg};
-`;function AnimatedText({text:t}){return e("div",{css:n.flexCenter,children:String(t).split("").map(((t,r)=>e(a.span,{animate:{y:[2,-2]},initial:{y:0},transition:{duration:.6,repeat:1/0,delay:.1*r,ease:"easeInOut",repeatType:"reverse"},children:t},r)))})}function VefLoadingPlaceholder({tip:r,...i}){return t("div",{css:c,children:[e(d,{...i}),r&&o(r)&&e(m,{color:"secondary",children:e(AnimatedText,{text:r})})||r]})}export{VefLoadingPlaceholder as default};
+  row-gap: ${themeVariables.marginLg};
+`;
+function AnimatedText({ text }) {
+  return /* @__PURE__ */ jsx("div", { css: styles.flexCenter, children: String(text).split("").map((char, index) => /* @__PURE__ */ jsx(
+    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__ */ jsxs("div", { css: loadingPlaceholderStyle, children: [
+    /* @__PURE__ */ jsx(VefSpin, { ...restProps }),
+    tip && isString(tip) && /* @__PURE__ */ jsx(VefText, { color: "secondary", children: /* @__PURE__ */ jsx(AnimatedText, { text: tip }) }) || tip
+  ] });
+}
+
+export { VefLoadingPlaceholder 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-login/index.js

@@ -1,5 +1,18 @@
-/*! VefFramework version: 1.0.98, build time: 2025-03-07T07:45:28.961Z, made by Venus. */
-import{jsx as e,jsxs as i}from"@emotion/react/jsx-runtime";import{UserOutlined as r,LockOutlined as o}from"@ant-design/icons";import{css as t}from"@emotion/react";import{useApiContext as n}from"@vef-framework/core";import{themeVariables as l,bmq as s,encryptRsa as a,showSuccessMessage as c,getTodayString as d,styles as m}from"@vef-framework/shared";import{useCallback as p,useState as f,useEffect as g}from"react";import h from"../vef-flex/index.js";import u from"../vef-form/index.js";import{isRequired as v}from"../vef-form/validation-rules.js";import x from"../vef-text/index.js";import y from"../vef-title/index.js";import b from"./login-icon.js";const w=t`
+/*! 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 { UserOutlined, LockOutlined } from '@ant-design/icons';
+import { css } from '@emotion/react';
+import { useApiContext } from '@vef-framework/core';
+import { themeVariables, bmq, encryptRsa, showSuccessMessage, getTodayString, styles } from '@vef-framework/shared';
+import { useCallback, useState, useEffect } from 'react';
+import VefFlex from '../vef-flex/index.js';
+import VefForm from '../vef-form/index.js';
+import { isRequired } from '../vef-form/validation-rules.js';
+import VefText from '../vef-text/index.js';
+import VefTitle from '../vef-title/index.js';
+import Memo from './login-icon.js';
+
+const loginStyle = css`
   position: relative;
   height: 100%;
   overflow: hidden;
@@ -7,50 +20,167 @@ import{jsx as e,jsxs as i}from"@emotion/react/jsx-runtime";import{UserOutlined a
   .vef-typography {
     --vef-typography-title-margin-bottom: 0.2em;
   }
-`,$=t`
+`;
+const titleStyle = css`
   flex: none;
-  padding-top: calc(${l.paddingXl} * 3);
+  padding-top: calc(${themeVariables.paddingXl} * 3);
   text-align: center;
-`,j=t`
+`;
+const logoStyle = css`
   position: absolute;
   top: 0;
   left: 0;
-  padding: ${l.padding};
-`,k=t`
+  padding: ${themeVariables.padding};
+`;
+const leftContentStyle = css`
   flex: 1;
   height: 100%;
   display: none;
-  background-image: linear-gradient(154deg, ${l.blue1} 30%, ${l.geekblue3} 48%, ${l.blue1} 64%);
-  ${s.md} {
+  background-image: linear-gradient(154deg, ${themeVariables.blue1} 30%, ${themeVariables.geekblue3} 48%, ${themeVariables.blue1} 64%);
+  ${bmq.md} {
     display: flex;
   }
-`,L=t`
+`;
+const iconStyle = css`
   flex: auto;
   min-height: 0;
   width: 40%;
-`,P=t`
+`;
+const rightContentStyle = css`
   position: relative;
   height: 100%;
   width: 360px;
-  padding: 0 ${l.paddingLg};
-  ${s.lg} {
+  padding: 0 ${themeVariables.paddingLg};
+  ${bmq.lg} {
     width: 480px;
-    padding: 0 calc(${l.paddingXl} * 2);
+    padding: 0 calc(${themeVariables.paddingXl} * 2);
   }
 
   .vef-form {
-    margin-top: ${l.marginXl};
+    margin-top: ${themeVariables.marginXl};
   }
-`,S=t`
+`;
+const copyrightStyle = css`
   position: absolute;
-  bottom: ${l.margin};
+  bottom: ${themeVariables.margin};
   left: 0;
   right: 0;
   text-align: center;
-`,V=t`
+`;
+const dateStyle = css`
   position: absolute;
-  top: ${l.margin};
-  right: ${l.margin};
-  left: ${l.margin};
-`,B=[{key:"default",rows:[{key:"1",columns:[{key:"1",items:[{name:"account",type:"Input",placeholder:"账号",prefix:e(r,{}),rules:[v("请输入账号")]},{name:"password",type:"Password",placeholder:"密码",prefix:e(o,{}),rules:[v("请输入密码")]}]}]}]}];function encryptPassword(e,i){return a(e,i)}function VefLogin({logo:r,title:o="VEF 中后台管理系统",description:t="一款极度快速的超能系统",publicKey:l,onLoginSuccess:s}){const a=p((e=>l?{...e,password:encryptPassword(e.password,l)}:e),[l]),v=p((({message:e,data:i})=>{c(e),s?.(i)}),[s]),[F,I]=f(d());g((()=>{const e=setInterval((()=>{I(d())}),1e3);return()=>{clearInterval(e)}}),[]);const{loginApi:X}=n();return i(h,{css:w,justify:"center",children:[r&&e("div",{css:j,children:r}),i(h,{vertical:!0,align:"center",css:k,children:[i("div",{css:$,children:[e(y,{children:o}),e(x,{children:t})]}),e("div",{css:[L,m.flexCenter],children:e(b,{})})]}),i(h,{vertical:!0,css:P,justify:"center",children:[i("div",{css:V,children:[e(x,{color:"secondary",children:"🕰️ 今天是 "}),e(x,{bold:!0,color:"green",children:F})]}),e(y,{level:2,children:"身份认证 🔑"}),e(x,{color:"secondary",children:"请输入您的账号和密码进行登录"}),e(u,{labelPosition:"left",resetButton:!1,scene:"login",schema:B,size:"large",submitApi:X,submitTip:"登录中...",submissionButton:{text:"登录",block:!0},onBeforeSubmit:a,onSubmitSuccess:v}),e("div",{css:S,children:i(x,{color:"secondary",children:["Copyright ©"," ",(new Date).getFullYear()," ","VEF."]})})]})]})}export{VefLogin as default};
+  top: ${themeVariables.margin};
+  right: ${themeVariables.margin};
+  left: ${themeVariables.margin};
+`;
+const loginFormSchema = [
+  {
+    key: "default",
+    rows: [
+      {
+        key: "1",
+        columns: [
+          {
+            key: "1",
+            items: [
+              {
+                name: "account",
+                type: "Input",
+                placeholder: "\u8D26\u53F7",
+                prefix: /* @__PURE__ */ jsx(UserOutlined, {}),
+                rules: [isRequired("\u8BF7\u8F93\u5165\u8D26\u53F7")]
+              },
+              {
+                name: "password",
+                type: "Password",
+                placeholder: "\u5BC6\u7801",
+                prefix: /* @__PURE__ */ jsx(LockOutlined, {}),
+                rules: [isRequired("\u8BF7\u8F93\u5165\u5BC6\u7801")]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+];
+function encryptPassword(password, publicKey) {
+  return encryptRsa(password, publicKey);
+}
+function VefLogin({
+  logo,
+  title = "VEF \u4E2D\u540E\u53F0\u7BA1\u7406\u7CFB\u7EDF",
+  description = "\u4E00\u6B3E\u6781\u5EA6\u5FEB\u901F\u7684\u8D85\u80FD\u7CFB\u7EDF",
+  publicKey,
+  onLoginSuccess
+}) {
+  const beforeSubmitHandler = useCallback((values) => {
+    if (!publicKey) {
+      return values;
+    }
+    return {
+      ...values,
+      password: encryptPassword(values.password, publicKey)
+    };
+  }, [publicKey]);
+  const submitSuccessHandler = useCallback(({ message, data }) => {
+    showSuccessMessage(message);
+    onLoginSuccess?.(data);
+  }, [onLoginSuccess]);
+  const [todayString, setTodayString] = useState(getTodayString());
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTodayString(getTodayString());
+    }, 1e3);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+  const { loginApi } = useApiContext();
+  return /* @__PURE__ */ jsxs(VefFlex, { css: loginStyle, justify: "center", children: [
+    logo && /* @__PURE__ */ jsx("div", { css: logoStyle, children: logo }),
+    /* @__PURE__ */ jsxs(VefFlex, { vertical: true, align: "center", css: leftContentStyle, children: [
+      /* @__PURE__ */ jsxs("div", { css: titleStyle, children: [
+        /* @__PURE__ */ jsx(VefTitle, { children: title }),
+        /* @__PURE__ */ jsx(VefText, { children: description })
+      ] }),
+      /* @__PURE__ */ jsx("div", { css: [iconStyle, styles.flexCenter], children: /* @__PURE__ */ jsx(Memo, {}) })
+    ] }),
+    /* @__PURE__ */ jsxs(VefFlex, { vertical: true, css: rightContentStyle, justify: "center", children: [
+      /* @__PURE__ */ jsxs("div", { css: dateStyle, children: [
+        /* @__PURE__ */ jsx(VefText, { color: "secondary", children: "\u{1F570}\uFE0F \u4ECA\u5929\u662F\xA0" }),
+        /* @__PURE__ */ jsx(VefText, { bold: true, color: "green", children: todayString })
+      ] }),
+      /* @__PURE__ */ jsx(VefTitle, { level: 2, children: "\u8EAB\u4EFD\u8BA4\u8BC1 \u{1F511}" }),
+      /* @__PURE__ */ jsx(VefText, { color: "secondary", children: "\u8BF7\u8F93\u5165\u60A8\u7684\u8D26\u53F7\u548C\u5BC6\u7801\u8FDB\u884C\u767B\u5F55" }),
+      /* @__PURE__ */ jsx(
+        VefForm,
+        {
+          labelPosition: "left",
+          resetButton: false,
+          scene: "login",
+          schema: loginFormSchema,
+          size: "large",
+          submitApi: loginApi,
+          submitTip: "\u767B\u5F55\u4E2D...",
+          submissionButton: {
+            text: "\u767B\u5F55",
+            block: true
+          },
+          onBeforeSubmit: beforeSubmitHandler,
+          onSubmitSuccess: submitSuccessHandler
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { css: copyrightStyle, children: /* @__PURE__ */ jsxs(VefText, { color: "secondary", children: [
+        "Copyright \xA9",
+        " ",
+        (/* @__PURE__ */ new Date()).getFullYear(),
+        " ",
+        "VEF."
+      ] }) })
+    ] })
+  ] });
+}
+
+export { VefLogin 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 */