@vef-framework/components 1.0.127 → 1.0.129

package/cjs/vef-login/index.cjs

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