@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

package/lib/form/layouts/LoginFormPage/index.js

@@ -1,188 +1,162 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/form/layouts/LoginFormPage/index.tsx
-var LoginFormPage_exports = {};
-__export(LoginFormPage_exports, {
-  LoginFormPage: () => LoginFormPage
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(LoginFormPage_exports);
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_provider = require("../../../provider");
-var import_ProForm = require("../ProForm");
-var import_style = require("./style");
+exports.LoginFormPage = LoginFormPage;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _provider = require("../../../provider");
+var _ProForm = require("../ProForm");
+var _style = require("./style");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["logo", "message", "style", "activityConfig", "backgroundImageUrl", "backgroundVideoUrl", "title", "subTitle", "actions", "children", "containerStyle", "otherStyle", "mainStyle"];
 function LoginFormPage(props) {
-  const _a = props, {
-    logo,
-    message,
-    style,
-    activityConfig,
-    backgroundImageUrl,
-    backgroundVideoUrl,
-    title,
-    subTitle,
-    actions,
-    children,
-    containerStyle,
-    otherStyle,
-    mainStyle
-  } = _a, proFormProps = __objRest(_a, [
-    "logo",
-    "message",
-    "style",
-    "activityConfig",
-    "backgroundImageUrl",
-    "backgroundVideoUrl",
-    "title",
-    "subTitle",
-    "actions",
-    "children",
-    "containerStyle",
-    "otherStyle",
-    "mainStyle"
-  ]);
-  const intl = (0, import_provider.useIntl)();
-  const genSubmitButtonProps = () => {
-    var _a2, _b;
-    if (proFormProps.submitter === false)
-      return false;
-    if (((_a2 = proFormProps.submitter) == null ? void 0 : _a2.submitButtonProps) === false)
-      return false;
-    return __spreadValues({
-      size: "large",
+  var logo = props.logo,
+    message = props.message,
+    style = props.style,
+    activityConfig = props.activityConfig,
+    backgroundImageUrl = props.backgroundImageUrl,
+    backgroundVideoUrl = props.backgroundVideoUrl,
+    title = props.title,
+    subTitle = props.subTitle,
+    actions = props.actions,
+    children = props.children,
+    containerStyle = props.containerStyle,
+    otherStyle = props.otherStyle,
+    mainStyle = props.mainStyle,
+    proFormProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var intl = (0, _provider.useIntl)();
+  var genSubmitButtonProps = function genSubmitButtonProps() {
+    var _proFormProps$submitt, _proFormProps$submitt2;
+    if (proFormProps.submitter === false) return false;
+    if (((_proFormProps$submitt = proFormProps.submitter) === null || _proFormProps$submitt === void 0 ? void 0 : _proFormProps$submitt.submitButtonProps) === false) return false;
+    return (0, _objectSpread2.default)({
+      size: 'large',
       style: {
-        width: "100%"
+        width: '100%'
       }
-    }, (_b = proFormProps.submitter) == null ? void 0 : _b.submitButtonProps);
+    }, (_proFormProps$submitt2 = proFormProps.submitter) === null || _proFormProps$submitt2 === void 0 ? void 0 : _proFormProps$submitt2.submitButtonProps);
   };
-  const submitter = __spreadProps(__spreadValues({
+  var submitter = (0, _objectSpread2.default)((0, _objectSpread2.default)({
     searchConfig: {
-      submitText: intl.getMessage("loginForm.submitText", "登录")
+      submitText: intl.getMessage('loginForm.submitText', '登录')
     },
-    render: (_, dom) => dom.pop()
-  }, proFormProps.submitter), {
+    render: function render(_, dom) {
+      return dom.pop();
+    }
+  }, proFormProps.submitter), {}, {
     submitButtonProps: genSubmitButtonProps()
   });
-  const context = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
-  const baseClassName = context.getPrefixCls("pro-form-login-page");
-  const { wrapSSR, hashId } = (0, import_style.useStyle)(baseClassName);
-  const getCls = (className) => `${baseClassName}-${className} ${hashId}`.trim();
-  const logoDom = (0, import_react.useMemo)(() => {
-    if (!logo)
-      return null;
-    if (typeof logo === "string") {
-      return /* @__PURE__ */ import_react.default.createElement("img", { src: logo });
+  var context = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  var baseClassName = context.getPrefixCls('pro-form-login-page');
+  var _useStyle = (0, _style.useStyle)(baseClassName),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var getCls = function getCls(className) {
+    return "".concat(baseClassName, "-").concat(className, " ").concat(hashId).trim();
+  };
+
+  /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
+  var logoDom = (0, _react.useMemo)(function () {
+    if (!logo) return null;
+    if (typeof logo === 'string') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+        src: logo
+      });
     }
     return logo;
   }, [logo]);
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(baseClassName, hashId),
-        style: __spreadProps(__spreadValues({}, style), {
-          position: "relative",
-          backgroundImage: backgroundImageUrl ? `url("${backgroundImageUrl}")` : void 0
-        })
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: (0, _classnames.default)(baseClassName, hashId),
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
+      position: 'relative',
+      backgroundImage: backgroundImageUrl ? "url(\"".concat(backgroundImageUrl, "\")") : undefined
+    }),
+    children: [backgroundVideoUrl ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        overflow: 'hidden',
+        height: '100%',
+        zIndex: 1,
+        pointerEvents: 'none'
       },
-      backgroundVideoUrl ? /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: "100%",
-            overflow: "hidden",
-            height: "100%",
-            zIndex: 1,
-            pointerEvents: "none"
-          }
-        },
-        /* @__PURE__ */ import_react.default.createElement(
-          "video",
-          {
-            src: backgroundVideoUrl,
-            controls: false,
-            autoPlay: true,
-            playsInline: true,
-            loop: true,
-            muted: true,
-            crossOrigin: "anonymous",
-            style: {
-              width: "100%",
-              height: "100%",
-              objectFit: "cover"
-            }
-          }
-        )
-      ) : null,
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(baseClassName, hashId) }, /* @__PURE__ */ import_react.default.createElement("div", { className: getCls("notice") }, activityConfig && /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          className: getCls("notice-activity"),
-          style: activityConfig.style
-        },
-        activityConfig.title && /* @__PURE__ */ import_react.default.createElement("div", { className: getCls("notice-activity-title") }, activityConfig.title),
-        activityConfig.subTitle && /* @__PURE__ */ import_react.default.createElement("div", { className: getCls("notice-activity-subTitle") }, activityConfig.subTitle),
-        activityConfig.action && /* @__PURE__ */ import_react.default.createElement("div", { className: getCls("notice-activity-action") }, activityConfig.action)
-      )), /* @__PURE__ */ import_react.default.createElement("div", { className: getCls("left") }, /* @__PURE__ */ import_react.default.createElement("div", { className: getCls("container"), style: containerStyle }, /* @__PURE__ */ import_react.default.createElement("div", { className: getCls("top") }, title || logoDom ? /* @__PURE__ */ import_react.default.createElement("div", { className: getCls("header") }, logoDom ? /* @__PURE__ */ import_react.default.createElement("span", { className: getCls("logo") }, logoDom) : null, title ? /* @__PURE__ */ import_react.default.createElement("span", { className: getCls("title") }, title) : null) : null, subTitle ? /* @__PURE__ */ import_react.default.createElement("div", { className: getCls("desc") }, subTitle) : null), /* @__PURE__ */ import_react.default.createElement("div", { className: getCls("main"), style: mainStyle }, /* @__PURE__ */ import_react.default.createElement(import_ProForm.ProForm, __spreadProps(__spreadValues({ isKeyPressSubmit: true }, proFormProps), { submitter }), message, children), actions ? /* @__PURE__ */ import_react.default.createElement("div", { className: getCls("other"), style: otherStyle }, actions) : null))))
-    )
-  );
-}
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("video", {
+        src: backgroundVideoUrl,
+        controls: false,
+        autoPlay: true,
+        playsInline: true,
+        loop: true,
+        muted: true,
+        crossOrigin: "anonymous",
+        style: {
+          width: '100%',
+          height: '100%',
+          objectFit: 'cover'
+        }
+      })
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(baseClassName, hashId),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: getCls('notice'),
+        children: activityConfig && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: getCls('notice-activity'),
+          style: activityConfig.style,
+          children: [activityConfig.title && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getCls('notice-activity-title'),
+            children: activityConfig.title
+          }), activityConfig.subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getCls('notice-activity-subTitle'),
+            children: activityConfig.subTitle
+          }), activityConfig.action && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: getCls('notice-activity-action'),
+            children: activityConfig.action
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: getCls('left'),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: getCls('container'),
+          style: containerStyle,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: getCls('top'),
+            children: [title || logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              className: getCls('header'),
+              children: [logoDom ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: getCls('logo'),
+                children: logoDom
+              }) : null, title ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: getCls('title'),
+                children: title
+              }) : null]
+            }) : null, subTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: getCls('desc'),
+              children: subTitle
+            }) : null]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: getCls('main'),
+            style: mainStyle,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_ProForm.ProForm, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+              isKeyPressSubmit: true
+            }, proFormProps), {}, {
+              submitter: submitter,
+              children: [message, children]
+            })), actions ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: getCls('other'),
+              style: otherStyle,
+              children: actions
+            }) : null]
+          })]
+        })
+      })]
+    })]
+  }));
+}

package/lib/form/layouts/LoginFormPage/style.js

@@ -1,181 +1,149 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/form/layouts/LoginFormPage/style.ts
-var style_exports = {};
-__export(style_exports, {
-  useStyle: () => useStyle
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(style_exports);
-var import_provider = require("../../../provider");
-var genLoginFormStyle = (token) => {
-  return {
-    [token.componentCls]: {
-      display: "flex",
-      width: "100%",
-      height: "100%",
-      backgroundSize: "cover",
-      backgroundPosition: "center",
-      backgroundRepeat: "no-repeat",
-      "&-notice": {
-        display: "flex",
-        flex: "1",
-        zIndex: 99,
-        alignItems: "flex-end",
-        "&-activity": {
-          marginBlock: 24,
-          marginInline: 24,
-          paddingInline: 24,
-          paddingBlock: 24,
-          "&-title": { fontWeight: "500", fontSize: "28px" },
-          "&-subTitle": { marginBlockStart: 8, fontSize: "16px" },
-          "&-action": { marginBlockStart: "24px" }
-        }
-      },
-      "&-left": {
-        display: "flex",
-        flex: "1",
-        zIndex: 99,
-        flexDirection: "column",
-        maxWidth: "550px",
-        paddingInline: 0,
-        paddingBlock: 32,
-        overflow: "auto",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 24,
-        height: "max-content",
-        margin: "auto"
-      },
-      "&-container": {
-        borderRadius: token.borderRadius,
-        backgroundSize: "100%",
-        backgroundPosition: "top",
-        backdropFilter: "blur(10px)",
-        backgroundColor: (0, import_provider.setAlpha)(token.colorBgContainer, 0.8),
-        backgroundImage: "radial-gradient(circle at 93% 1e+02%, rgba(22,119,255,0.17) 0%, rgba(255,255,255,0.05) 23%, rgba(255,255,255,0.03) 87%, rgba(22,119,255,0.12) 109%)",
-        padding: 32,
-        boxShadow: "0px 0px 24px 0px rgba(0,0,0,0.1)"
-      },
-      "&-top": {
-        textAlign: "center"
-      },
-      "&-header": {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        minHeight: "44px",
-        lineHeight: "44px",
-        a: {
-          textDecoration: "none"
-        }
-      },
-      "&-title": {
-        position: "relative",
-        tinsetBlockStartop: "2px",
-        color: token.colorTextHeading,
-        fontWeight: "600",
-        fontSize: "33px"
-      },
-      "&-logo": {
-        width: "44px",
-        height: "44px",
-        marginInlineEnd: "16px",
-        verticalAlign: "top",
-        img: {
-          width: "100%"
-        }
-      },
-      "&-desc": {
-        marginBlockStart: "12px",
-        marginBlockEnd: "40px",
-        color: token.colorTextSecondary,
-        fontSize: token.fontSize
-      },
-      "&-main": {
-        width: "328px",
-        margin: "0 auto",
-        "&-other": {
-          marginBlockStart: "24px",
-          lineHeight: "22px",
-          textAlign: "start"
+exports.useStyle = useStyle;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _provider = require("../../../provider");
+var genLoginFormStyle = function genLoginFormStyle(token) {
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, token.componentCls, {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    '&-notice': {
+      display: 'flex',
+      flex: '1',
+      zIndex: 99,
+      alignItems: 'flex-end',
+      '&-activity': {
+        marginBlock: 24,
+        marginInline: 24,
+        paddingInline: 24,
+        paddingBlock: 24,
+        '&-title': {
+          fontWeight: '500',
+          fontSize: '28px'
+        },
+        '&-subTitle': {
+          marginBlockStart: 8,
+          fontSize: '16px'
+        },
+        '&-action': {
+          marginBlockStart: '24px'
         }
       }
     },
-    [`@media (max-width: ${token.screenMDMin}px)`]: {
-      [token.componentCls]: {
-        flexDirection: "column-reverse",
-        background: "none !important",
-        "&-container": {
-          padding: 24,
-          boxShadow: "none",
-          backgroundImage: "none",
-          borderRadius: "0px"
-        },
-        "&-notice": {
-          display: "flex",
-          flex: "none",
-          alignItems: "flex-start",
-          width: "100%",
-          "> div": {
-            width: "100%"
-          }
-        }
+    '&-left': {
+      display: 'flex',
+      flex: '1',
+      zIndex: 99,
+      flexDirection: 'column',
+      maxWidth: '550px',
+      paddingInline: 0,
+      paddingBlock: 32,
+      overflow: 'auto',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: 24,
+      height: 'max-content',
+      margin: 'auto'
+    },
+    '&-container': {
+      borderRadius: token.borderRadius,
+      backgroundSize: '100%',
+      backgroundPosition: 'top',
+      backdropFilter: 'blur(10px)',
+      backgroundColor: (0, _provider.setAlpha)(token.colorBgContainer, 0.8),
+      backgroundImage: 'radial-gradient(circle at 93% 1e+02%, rgba(22,119,255,0.17) 0%, rgba(255,255,255,0.05) 23%, rgba(255,255,255,0.03) 87%, rgba(22,119,255,0.12) 109%)',
+      padding: 32,
+      boxShadow: '0px 0px 24px 0px rgba(0,0,0,0.1)'
+    },
+    '&-top': {
+      textAlign: 'center'
+    },
+    '&-header': {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minHeight: '44px',
+      lineHeight: '44px',
+      a: {
+        textDecoration: 'none'
       }
     },
-    [`@media (min-width: ${token.screenMDMin}px)`]: {
-      [token.componentCls]: {
-        "&-left": {
-          backgroundRepeat: "no-repeat",
-          backgroundPosition: "center 110px",
-          backgroundSize: "100%"
-        }
+    '&-title': {
+      position: 'relative',
+      tinsetBlockStartop: '2px',
+      color: token.colorTextHeading,
+      fontWeight: '600',
+      fontSize: '33px'
+    },
+    '&-logo': {
+      width: '44px',
+      height: '44px',
+      marginInlineEnd: '16px',
+      verticalAlign: 'top',
+      img: {
+        width: '100%'
       }
     },
-    [`@media (max-width: ${token.screenSM}px)`]: {
-      [token.componentCls]: {
-        "&-main": { width: "95%", maxWidth: "328px" }
+    '&-desc': {
+      marginBlockStart: '12px',
+      marginBlockEnd: '40px',
+      color: token.colorTextSecondary,
+      fontSize: token.fontSize
+    },
+    '&-main': {
+      width: '328px',
+      margin: '0 auto',
+      '&-other': {
+        marginBlockStart: '24px',
+        lineHeight: '22px',
+        textAlign: 'start'
       }
     }
-  };
+  }), "@media (max-width: ".concat(token.screenMDMin, "px)"), (0, _defineProperty2.default)({}, token.componentCls, {
+    flexDirection: 'column-reverse',
+    background: 'none !important',
+    '&-container': {
+      padding: 24,
+      boxShadow: 'none',
+      backgroundImage: 'none',
+      borderRadius: '0px'
+    },
+    '&-notice': {
+      display: 'flex',
+      flex: 'none',
+      alignItems: 'flex-start',
+      width: '100%',
+      '> div': {
+        width: '100%'
+      }
+    }
+  })), "@media (min-width: ".concat(token.screenMDMin, "px)"), (0, _defineProperty2.default)({}, token.componentCls, {
+    '&-left': {
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'center 110px',
+      backgroundSize: '100%'
+    }
+  })), "@media (max-width: ".concat(token.screenSM, "px)"), (0, _defineProperty2.default)({}, token.componentCls, {
+    '&-main': {
+      width: '95%',
+      maxWidth: '328px'
+    }
+  }));
 };
 function useStyle(prefixCls) {
-  return (0, import_provider.useStyle)("LoginFormPage", (token) => {
-    const loginFormToken = __spreadProps(__spreadValues({}, token), {
-      componentCls: `.${prefixCls}`
+  return (0, _provider.useStyle)('LoginFormPage', function (token) {
+    var loginFormToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
+      componentCls: ".".concat(prefixCls)
     });
     return [genLoginFormStyle(loginFormToken)];
   });
-}
+}