@vef-framework/components 1.0.62 → 1.0.64

package/lib/vef-login/index.cjs

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