component-sanzhizhou 1.2.0 → 1.2.1

package/dist/auth-main/account.d.ts

@@ -7,6 +7,6 @@ interface Props {
     accountRegDisabled?: boolean;
     onSuccess: () => void;
 }
-/** 账户登录 / 注册 / 找回密码 切换。 */
+/** 账户登录 / 注册；找回密码通过抽屉弹出。 */
 declare const Account: React.FC<Props>;
 export default Account;

package/dist/auth-main/account.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
-import { Radio } from 'antd';
-import { UserOutlined, UserAddOutlined, UnlockOutlined } from '@ant-design/icons';
+import { Radio, Drawer } from 'antd';
+import { UserOutlined, UserAddOutlined } from '@ant-design/icons';
 import formatMessage from "../lib/formatMessage";
 import Login from "./login";
 import Register from "./register";
 import ForgotPassword from "./forgot-password";
-import styles from "./index.css";
-/** 账户登录 / 注册 / 找回密码 切换。 */
+import styles from "./index.module.less";
+/** 账户登录 / 注册；找回密码通过抽屉弹出。 */
 var Account = function Account(_ref) {
   var env = _ref.env,
     apiUrl = _ref.apiUrl,
@@ -15,12 +15,18 @@ var Account = function Account(_ref) {
     disabledFormItemLabel = _ref.disabledFormItemLabel,
     accountRegDisabled = _ref.accountRegDisabled,
     onSuccess = _ref.onSuccess;
-  var _useState = useState(accountRegDisabled ? 'login' : 'login'),
+  var _useState = useState('login'),
     _useState2 = _slicedToArray(_useState, 2),
     activeKey = _useState2[0],
     setActiveKey = _useState2[1];
-  return /*#__PURE__*/React.createElement(styles.Account, null, /*#__PURE__*/React.createElement("div", {
-    className: "radioSelectBox"
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    forgotOpen = _useState4[0],
+    setForgotOpen = _useState4[1];
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.Account
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.radioSelectBox
   }, /*#__PURE__*/React.createElement(Radio.Group, {
     value: activeKey,
     onChange: function onChange(e) {
@@ -31,27 +37,35 @@ var Account = function Account(_ref) {
   }, /*#__PURE__*/React.createElement(UserOutlined, null), " ", formatMessage('登录')), /*#__PURE__*/React.createElement(Radio.Button, {
     value: "reg",
     disabled: accountRegDisabled
-  }, /*#__PURE__*/React.createElement(UserAddOutlined, null), " ", formatMessage('注册')), /*#__PURE__*/React.createElement(Radio.Button, {
-    value: "forgot"
-  }, /*#__PURE__*/React.createElement(UnlockOutlined, null), " ", formatMessage('忘记密码')))), activeKey === 'login' && /*#__PURE__*/React.createElement(Login, {
+  }, /*#__PURE__*/React.createElement(UserAddOutlined, null), " ", formatMessage('注册')))), activeKey === 'login' && /*#__PURE__*/React.createElement(Login, {
     env: env,
     apiUrl: apiUrl,
     roleType: roleType,
     disabledFormItemLabel: disabledFormItemLabel,
-    onSuccess: onSuccess
+    onSuccess: onSuccess,
+    onForgotPassword: function onForgotPassword() {
+      return setForgotOpen(true);
+    }
   }), activeKey === 'reg' && /*#__PURE__*/React.createElement(Register, {
     env: env,
     apiUrl: apiUrl,
     roleType: roleType,
     disabledFormItemLabel: disabledFormItemLabel,
     onSuccess: onSuccess
-  }), activeKey === 'forgot' && /*#__PURE__*/React.createElement(ForgotPassword, {
+  }), /*#__PURE__*/React.createElement(Drawer, {
+    title: formatMessage('找回密码'),
+    open: forgotOpen,
+    onClose: function onClose() {
+      return setForgotOpen(false);
+    },
+    size: 620
+  }, /*#__PURE__*/React.createElement(ForgotPassword, {
     env: env,
     apiUrl: apiUrl,
     disabledFormItemLabel: disabledFormItemLabel,
     onDone: function onDone() {
-      return setActiveKey('login');
+      return setForgotOpen(false);
     }
-  }));
+  })));
 };
 export default Account;

package/dist/auth-main/forgot-password.js

@@ -7,6 +7,8 @@ import Tool from "../lib/Tool";
 import * as AuthController from "../service/api/AuthController";
 import formatMessage from "../lib/formatMessage";
 import PhoneCode from "./phone-code";
+var FormSpan = 6;
+
 /** 找回密码：短信验证码 + 新密码。 */
 var ForgotPassword = function ForgotPassword(_ref) {
   var env = _ref.env,
@@ -38,18 +40,16 @@ var ForgotPassword = function ForgotPassword(_ref) {
     values.accountName = (values.accountName || '').replace(/\s+/g, '');
     run(values);
   };
-  return /*#__PURE__*/React.createElement("section", {
-    className: "authMainForgot"
-  }, /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(Form, {
     form: form,
     onFinish: onFinish,
     disabled: loading,
-    autoComplete: "off"
+    autoComplete: "off",
+    labelCol: {
+      span: FormSpan
+    }
   }, /*#__PURE__*/React.createElement(Form.Item, {
     label: disabledFormItemLabel ? undefined : formatMessage('手机号码'),
-    labelCol: {
-      span: 8
-    },
     name: "accountName",
     rules: [{
       required: true,
@@ -64,6 +64,7 @@ var ForgotPassword = function ForgotPassword(_ref) {
       className: "input-prefix-icon"
     })
   })), /*#__PURE__*/React.createElement(PhoneCode, {
+    formSpan: FormSpan,
     form: form,
     scene: "forgot",
     env: env,
@@ -71,9 +72,6 @@ var ForgotPassword = function ForgotPassword(_ref) {
     disabledFormItemLabel: disabledFormItemLabel
   }), /*#__PURE__*/React.createElement(Form.Item, {
     label: disabledFormItemLabel ? undefined : formatMessage('新密码'),
-    labelCol: {
-      span: 8
-    },
     name: "password",
     rules: [{
       required: true,
@@ -97,8 +95,10 @@ var ForgotPassword = function ForgotPassword(_ref) {
     iconRender: function iconRender(visible) {
       return visible ? /*#__PURE__*/React.createElement(EyeTwoTone, null) : /*#__PURE__*/React.createElement(EyeInvisibleOutlined, null);
     }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "auth-submits"
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    wrapperCol: {
+      offset: 6
+    }
   }, /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     loading: loading,

package/dist/auth-main/human-verify.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SmsScene } from './types';
+interface Props {
+    phone: string;
+    scene: SmsScene;
+    env?: Global.Env;
+    apiUrl?: string;
+    onVerified: (challenge: string, nonce: string) => void;
+}
+/** 人机验证（工作量证明）：点击后后台计算，通过后变绿。 */
+declare const HumanVerify: React.FC<Props>;
+export default HumanVerify;

package/dist/auth-main/human-verify.js

@@ -0,0 +1,89 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { Spin } from 'antd';
+import { SafetyCertificateOutlined, CheckCircleFilled, LoadingOutlined } from '@ant-design/icons';
+import Tool from "../lib/Tool";
+import formatMessage from "../lib/formatMessage";
+import * as AuthController from "../service/api/AuthController";
+import { solvePow } from "./pow";
+import styles from "./index.module.less";
+var phoneReg = /^1\d{10}$/;
+/** 人机验证（工作量证明）：点击后后台计算，通过后变绿。 */
+var HumanVerify = function HumanVerify(_ref) {
+  var phone = _ref.phone,
+    scene = _ref.scene,
+    env = _ref.env,
+    apiUrl = _ref.apiUrl,
+    onVerified = _ref.onVerified;
+  var _useState = useState('idle'),
+    _useState2 = _slicedToArray(_useState, 2),
+    status = _useState2[0],
+    setStatus = _useState2[1];
+  var onVerify = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var challengeData, _nonce;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(status !== 'idle')) {
+              _context.next = 2;
+              break;
+            }
+            return _context.abrupt("return");
+          case 2:
+            if (phoneReg.test(phone)) {
+              _context.next = 5;
+              break;
+            }
+            Tool.toastError(formatMessage('请输入正确的手机号码'));
+            return _context.abrupt("return");
+          case 5:
+            setStatus('verifying');
+            _context.prev = 6;
+            _context.next = 9;
+            return AuthController.powChallenge({
+              accountName: phone,
+              scene: scene
+            }, {
+              env: env,
+              apiUrl: apiUrl
+            });
+          case 9:
+            challengeData = _context.sent;
+            _context.next = 12;
+            return solvePow(challengeData.challenge, challengeData.difficulty);
+          case 12:
+            _nonce = _context.sent;
+            setStatus('verified');
+            onVerified(challengeData.challenge, _nonce);
+            _context.next = 20;
+            break;
+          case 17:
+            _context.prev = 17;
+            _context.t0 = _context["catch"](6);
+            // 错误已由 request 层 toast
+            setStatus('idle');
+          case 20:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[6, 17]]);
+    }));
+    return function onVerify() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.humanVerify, " ").concat(status === 'verified' ? styles.humanVerifyOk : ''),
+    onClick: onVerify
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.humanVerifyIcon
+  }, status === 'verified' ? /*#__PURE__*/React.createElement(CheckCircleFilled, null) : status === 'verifying' ? /*#__PURE__*/React.createElement(LoadingOutlined, null) : /*#__PURE__*/React.createElement(SafetyCertificateOutlined, null)), /*#__PURE__*/React.createElement("span", {
+    className: styles.humanVerifyText
+  }, status === 'verifying' ? "".concat(formatMessage('人机校验中'), "...") : status === 'verified' ? formatMessage('验证通过') : formatMessage('我不是机器人')), status === 'verifying' && /*#__PURE__*/React.createElement(Spin, {
+    size: "small"
+  }));
+};
+export default HumanVerify;

package/dist/auth-main/index.js

@@ -8,7 +8,7 @@ import formatMessage from "../lib/formatMessage";
 import h5WePublicLogin from "../AuthClient/qr/h5-we-public-login";
 import WechatQr from "./wechat-qr";
 import Account from "./account";
-import styles from "./index.css";
+import styles from "./index.module.less";
 /**
  * 登录 / 注册（重构版）。
  * - 微信扫码：逻辑与旧 Auth 保持一致（WechatQr）。
@@ -18,7 +18,8 @@ var Auth = function Auth(_ref) {
   var productType = _ref.productType,
     apiUrl = _ref.apiUrl,
     clientUniqueKeyList = _ref.clientUniqueKeyList,
-    loginTypeList = _ref.loginTypeList,
+    _ref$loginTypeList = _ref.loginTypeList,
+    loginTypeList = _ref$loginTypeList === void 0 ? [] : _ref$loginTypeList,
     env = _ref.env,
     postData = _ref.postData,
     roleType = _ref.roleType,
@@ -55,8 +56,12 @@ var Auth = function Auth(_ref) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return /*#__PURE__*/React.createElement(styles.AuthQrLogin, null, /*#__PURE__*/React.createElement(styles.LoginForm, null, /*#__PURE__*/React.createElement("div", {
-    className: "ssz-webTitle"
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.AuthQrLogin
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.LoginForm
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.sszWebTitle
   }, formatMessage('登录/注册')), /*#__PURE__*/React.createElement(Tabs, {
     activeKey: activeKey,
     onChange: onTabChange
@@ -67,9 +72,7 @@ var Auth = function Auth(_ref) {
     domain: domain,
     onLoginSuccess: onLoginSuccess
   })), /*#__PURE__*/React.createElement(Tabs.TabPane, {
-    tab: /*#__PURE__*/React.createElement("span", {
-      className: "tab-icon"
-    }, /*#__PURE__*/React.createElement(UserOutlined, null), " ", formatMessage('账户')),
+    tab: /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(UserOutlined, null), " ", formatMessage('账户')),
     disabled: !hasAccount,
     key: "account"
   }, /*#__PURE__*/React.createElement(Account, {
@@ -82,10 +85,10 @@ var Auth = function Auth(_ref) {
       return onLoginSuccess();
     }
   })))), /*#__PURE__*/React.createElement("div", {
-    className: "callWechat",
+    className: styles.callWechat,
     onClick: onCallWechat
   }), /*#__PURE__*/React.createElement("div", {
-    className: "callAccount",
+    className: styles.callAccount,
     onClick: onCallAccount
   }));
 };

package/dist/auth-main/index.module.less

@@ -0,0 +1,178 @@
+.AuthQrLogin {
+  position: relative;
+
+  :global(.ant-tabs-tab-btn .anticon) {
+    margin-right: 6px;
+  }
+
+  .weQrUrl {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .qr {
+    position: relative;
+    display: block;
+    margin: 12px auto 0;
+    width: 230px;
+    height: 230px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+
+    .reTry {
+      position: absolute;
+      z-index: 100;
+      left: 0;
+      top: 0;
+      width: 100%;
+      font-size: 80px;
+      background-color: rgba(255, 255, 255, 0.95);
+      text-align: center;
+      line-height: 210px;
+      height: 100%;
+
+      a {
+        display: block;
+      }
+    }
+  }
+
+  .alt {
+    padding: 10px 0 0;
+    color: #999;
+    text-align: center;
+  }
+
+  .altWeb {
+    padding: 16px 0 0;
+    max-width: 300px;
+    margin: 0 auto;
+
+    .titles {
+      text-align: center;
+      font-weight: bold;
+    }
+
+    ul {
+      margin: 0 10px;
+    }
+  }
+
+  .percent {
+    width: 100%;
+    position: absolute;
+    overflow: hidden;
+    left: 0;
+    bottom: 0;
+
+    .warp {
+      height: 4px;
+      background-color: #1677ff;
+      transition: all 1.6s ease-in-out;
+      -webkit-transition: all 1.6s ease-in-out;
+    }
+  }
+
+  .callWechat {
+    position: absolute;
+    left: 6px;
+    bottom: 6px;
+    background: #f6f6f6;
+    width: 4px;
+    height: 4px;
+  }
+
+  .callAccount {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+    background: #f6f6f6;
+    width: 4px;
+    height: 4px;
+  }
+
+  .sszWebTitle {
+    font-weight: normal;
+    font-size: 26px;
+    text-align: center;
+    padding: 6px 0 0 0;
+    line-height: 1em;
+
+    span {
+      display: inline-block;
+      padding-left: 5px;
+      font-weight: lighter;
+      font-size: 16px;
+    }
+  }
+}
+
+.LoginForm {
+  margin: 0 auto;
+  padding: 12px 16px 6px 16px;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 6px;
+}
+
+.WeQrUrlBox {
+  min-height: 240px !important;
+}
+
+.Account {
+  .radioSelectBox {
+    text-align: right;
+    margin-bottom: 8px;
+  }
+
+
+  .forgotLink {
+    padding: 6px 0 0 0;
+    text-align: right;
+  }
+}
+
+.humanVerifyItem {
+  margin-bottom: 12px;
+}
+
+.humanVerify {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  max-width: 300px;
+  padding: 10px 14px;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #fafafa;
+  cursor: pointer;
+  user-select: none;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: #1677ff;
+  }
+
+  .humanVerifyIcon {
+    font-size: 20px;
+    line-height: 1;
+    color: #1677ff;
+  }
+
+  .humanVerifyText {
+    flex: 1;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.85);
+  }
+}
+
+.humanVerifyOk {
+  border-color: #52c41a;
+  background: #f6ffed;
+
+  .humanVerifyIcon {
+    color: #52c41a;
+  }
+}

package/dist/auth-main/login.d.ts

@@ -3,6 +3,7 @@ import type { AccountFormProps } from './types';
 interface Props extends AccountFormProps {
     roleType?: UserAuth.RoleType;
     disabledFormItemLabel?: boolean;
+    onForgotPassword?: () => void;
 }
 /** 账户密码登录。 */
 declare const Login: React.FC<Props>;

package/dist/auth-main/login.js

@@ -6,13 +6,15 @@ import { useRequest } from '@umijs/hooks';
 import * as AuthController from "../service/api/AuthController";
 import formatMessage from "../lib/formatMessage";
 import { applyLoginSuccess } from "./login-success";
+import styles from "./index.module.less";
 /** 账户密码登录。 */
 var Login = function Login(_ref) {
   var env = _ref.env,
     apiUrl = _ref.apiUrl,
     roleType = _ref.roleType,
     disabledFormItemLabel = _ref.disabledFormItemLabel,
-    _onSuccess = _ref.onSuccess;
+    _onSuccess = _ref.onSuccess,
+    onForgotPassword = _ref.onForgotPassword;
   var _Form$useForm = Form.useForm(),
     _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
     form = _Form$useForm2[0];
@@ -34,9 +36,7 @@ var Login = function Login(_ref) {
     values.accountName = (values.accountName || '').replace(/\s+/g, '');
     run(values);
   };
-  return /*#__PURE__*/React.createElement("section", {
-    className: "authMainLogin"
-  }, /*#__PURE__*/React.createElement(Form, {
+  return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(Form, {
     form: form,
     onFinish: onFinish,
     disabled: loading,
@@ -78,7 +78,14 @@ var Login = function Login(_ref) {
       message: formatMessage('最多{maxCount}个字符', {
         maxCount: 60
       })
-    }]
+    }],
+    extra: /*#__PURE__*/React.createElement("div", {
+      className: styles.forgotLink
+    }, /*#__PURE__*/React.createElement(Button, {
+      type: "link",
+      size: "small",
+      onClick: onForgotPassword
+    }, formatMessage('忘记密码')))
   }, /*#__PURE__*/React.createElement(Input.Password, {
     prefix: /*#__PURE__*/React.createElement(LockOutlined, {
       className: "input-prefix-icon"
@@ -87,8 +94,10 @@ var Login = function Login(_ref) {
     iconRender: function iconRender(visible) {
       return visible ? /*#__PURE__*/React.createElement(EyeTwoTone, null) : /*#__PURE__*/React.createElement(EyeInvisibleOutlined, null);
     }
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "auth-submits"
+  })), /*#__PURE__*/React.createElement(Form.Item, {
+    wrapperCol: {
+      offset: 8
+    }
   }, /*#__PURE__*/React.createElement(Button, {
     type: "primary",
     loading: loading,

package/dist/auth-main/phone-code.d.ts

@@ -2,11 +2,12 @@ import React from 'react';
 import type { SmsScene } from './types';
 interface Props {
     form: any;
+    formSpan: number;
     scene: SmsScene;
     env?: Global.Env;
     apiUrl?: string;
     disabledFormItemLabel?: boolean;
 }
-/** 手机号 + 验证码 + 发送按钮（含倒计时与工作量证明）。 */
+/** 人机验证 + 手机验证码 + 发送按钮（含倒计时）。 */
 declare const PhoneCode: React.FC<Props>;
 export default PhoneCode;