@pisell/private-materials 6.6.1 → 6.7.1

package/lib/pro/Login2.0/components/OAuthButtonGroup.js

@@ -0,0 +1,87 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+
+// src/pro/Login2.0/components/OAuthButtonGroup.tsx
+var OAuthButtonGroup_exports = {};
+__export(OAuthButtonGroup_exports, {
+  default: () => OAuthButtonGroup_default
+});
+module.exports = __toCommonJS(OAuthButtonGroup_exports);
+var import_react = __toESM(require("react"));
+var import_classnames = __toESM(require("classnames"));
+var import_materials = require("@pisell/materials");
+var OAuthButtonGroup = ({
+  providers,
+  layout = "vertical",
+  size = "large",
+  block = true,
+  wrapperClassName,
+  buttonClassName,
+  gap = 12
+}) => {
+  if (!providers.length) {
+    return null;
+  }
+  const isVertical = layout === "vertical";
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)("oauth-button-group", wrapperClassName, {
+        "oauth-button-group-vertical": isVertical,
+        "oauth-button-group-horizontal": !isVertical
+      }),
+      style: isVertical ? { display: "grid", rowGap: gap } : { display: "flex", columnGap: gap, flexWrap: "wrap" }
+    },
+    providers.map(
+      ({
+        key,
+        label,
+        icon,
+        onClick,
+        disabled,
+        className,
+        badge,
+        badgeClassName
+      }) => /* @__PURE__ */ import_react.default.createElement(
+        import_materials.Button,
+        {
+          key,
+          size,
+          block,
+          disabled,
+          className: (0, import_classnames.default)(buttonClassName, className),
+          icon,
+          onClick
+        },
+        badge && /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)("oauth-button-badge", badgeClassName) }, badge),
+        label
+      )
+    )
+  );
+};
+var OAuthButtonGroup_default = OAuthButtonGroup;

package/lib/pro/Login2.0/components/PhoneInput.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import './PhoneInput.less';
+/** 国家/地区配置（后端返回格式） */
+export interface CountryOption {
+    /** 国家/地区名称 */
+    name: string;
+    /** 国家/地区代码 */
+    code: string;
+    /** 区号（不带+号） */
+    calling_code: string;
+    /** 货币代码 */
+    currency_code: string;
+}
+/** 手机号对象格式 */
+export interface PhoneValueObject {
+    /** 手机号（不含区号） */
+    phone: string;
+    /** 国家区号（不带+号） */
+    country_calling_code: string;
+}
+/** 值格式类型 */
+export declare type ValueFormat = 'string' | 'object';
+/** 手机号输入组件属性 */
+export interface PhoneInputProps {
+    /** 完整的手机号值（包含区号），格式：+86138****，或 +1555****（字符串模式） */
+    value?: string | PhoneValueObject;
+    /** 值变化回调 */
+    onChange?: (value: string | PhoneValueObject) => void;
+    /** Placeholder */
+    placeholder?: string;
+    /** 大小 */
+    size?: 'large' | 'middle' | 'small';
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 可用的国家/地区列表 */
+    countries?: CountryOption[];
+    /** 默认国家/地区代码 */
+    defaultCountry?: string;
+    /** 值格式：'string' 返回 "+8613800138000"，'object' 返回 { phone: "13800138000", country_calling_code: "86" } */
+    valueFormat?: ValueFormat;
+    /** 键盘按键事件回调 */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+/**
+ * 手机号输入组件
+ *
+ * 支持国际区号选择和手机号输入
+ * 值格式：+区号+手机号，例如：+8613800138000 或 +15551234567
+ */
+declare function PhoneInput({ value, onChange, placeholder, onKeyDown, size, disabled, className, countries, defaultCountry, valueFormat, }: PhoneInputProps): JSX.Element;
+export default PhoneInput;

package/lib/pro/Login2.0/components/PhoneInput.js

@@ -0,0 +1,263 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+
+// src/pro/Login2.0/components/PhoneInput.tsx
+var PhoneInput_exports = {};
+__export(PhoneInput_exports, {
+  default: () => PhoneInput_default
+});
+module.exports = __toCommonJS(PhoneInput_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_PhoneInput = require("./PhoneInput.less");
+var DEFAULT_COUNTRIES = [
+  { name: "United States", code: "US", calling_code: "1", currency_code: "USD" },
+  { name: "China", code: "CN", calling_code: "86", currency_code: "CNY" },
+  { name: "United Kingdom", code: "GB", calling_code: "44", currency_code: "GBP" },
+  { name: "Australia", code: "AU", calling_code: "61", currency_code: "AUD" },
+  { name: "Canada", code: "CA", calling_code: "1", currency_code: "CAD" },
+  { name: "Japan", code: "JP", calling_code: "81", currency_code: "JPY" },
+  { name: "South Korea", code: "KR", calling_code: "82", currency_code: "KRW" },
+  { name: "Singapore", code: "SG", calling_code: "65", currency_code: "SGD" },
+  { name: "Hong Kong", code: "HK", calling_code: "852", currency_code: "HKD" },
+  { name: "Taiwan", code: "TW", calling_code: "886", currency_code: "TWD" },
+  { name: "Malaysia", code: "MY", calling_code: "60", currency_code: "MYR" },
+  { name: "Thailand", code: "TH", calling_code: "66", currency_code: "THB" },
+  { name: "Vietnam", code: "VN", calling_code: "84", currency_code: "VND" },
+  { name: "Philippines", code: "PH", calling_code: "63", currency_code: "PHP" },
+  { name: "Indonesia", code: "ID", calling_code: "62", currency_code: "IDR" },
+  { name: "India", code: "IN", calling_code: "91", currency_code: "INR" },
+  { name: "Germany", code: "DE", calling_code: "49", currency_code: "EUR" },
+  { name: "France", code: "FR", calling_code: "33", currency_code: "EUR" },
+  { name: "Italy", code: "IT", calling_code: "39", currency_code: "EUR" },
+  { name: "Spain", code: "ES", calling_code: "34", currency_code: "EUR" }
+];
+function detectUserCountry() {
+  try {
+    if (typeof Intl !== "undefined" && Intl.DateTimeFormat) {
+      const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      const timeZoneMap = {
+        "America/New_York": "US",
+        "America/Los_Angeles": "US",
+        "America/Chicago": "US",
+        "America/Denver": "US",
+        "America/Toronto": "CA",
+        "America/Vancouver": "CA",
+        "Europe/London": "GB",
+        "Europe/Paris": "FR",
+        "Europe/Berlin": "DE",
+        "Europe/Rome": "IT",
+        "Europe/Madrid": "ES",
+        "Asia/Shanghai": "CN",
+        "Asia/Hong_Kong": "HK",
+        "Asia/Taipei": "TW",
+        "Asia/Tokyo": "JP",
+        "Asia/Seoul": "KR",
+        "Asia/Singapore": "SG",
+        "Asia/Bangkok": "TH",
+        "Asia/Kuala_Lumpur": "MY",
+        "Asia/Jakarta": "ID",
+        "Asia/Manila": "PH",
+        "Asia/Ho_Chi_Minh": "VN",
+        "Asia/Kolkata": "IN",
+        "Australia/Sydney": "AU",
+        "Australia/Melbourne": "AU"
+      };
+      if (timeZone && timeZoneMap[timeZone]) {
+        return timeZoneMap[timeZone];
+      }
+    }
+    if (typeof navigator !== "undefined" && navigator.language) {
+      const lang = navigator.language;
+      const parts = lang.split("-");
+      if (parts.length > 1) {
+        const countryCode = parts[1].toUpperCase();
+        return countryCode;
+      }
+      const langMap = {
+        "zh": "CN",
+        "en": "US",
+        "ja": "JP",
+        "ko": "KR",
+        "de": "DE",
+        "fr": "FR",
+        "es": "ES",
+        "it": "IT",
+        "th": "TH",
+        "vi": "VN",
+        "id": "ID",
+        "ms": "MY"
+      };
+      if (langMap[parts[0]]) {
+        return langMap[parts[0]];
+      }
+    }
+  } catch (error) {
+    console.warn("Failed to detect user country:", error);
+  }
+  return null;
+}
+function PhoneInput({
+  value,
+  onChange,
+  placeholder,
+  onKeyDown,
+  size = "large",
+  disabled = false,
+  className = "",
+  countries = DEFAULT_COUNTRIES,
+  defaultCountry,
+  valueFormat = "string"
+}) {
+  const effectivePlaceholder = placeholder || import_utils.locales.getText("pisell-phone-input-placeholder");
+  const normalizedValue = (0, import_react.useMemo)(() => {
+    if (!value) return "";
+    if (typeof value === "object" && "phone" in value) {
+      const { phone, country_calling_code } = value;
+      return `+${country_calling_code}${phone}`;
+    }
+    return value;
+  }, [value]);
+  const effectiveDefaultCountry = (0, import_react.useMemo)(() => {
+    var _a;
+    const detectedCountry = detectUserCountry();
+    if (detectedCountry && countries.some((c) => c.code === detectedCountry)) {
+      console.log("PhoneInput: Auto-detected country:", detectedCountry);
+      return detectedCountry;
+    }
+    if (defaultCountry && countries.some((c) => c.code === defaultCountry)) {
+      return defaultCountry;
+    }
+    return ((_a = countries == null ? void 0 : countries[0]) == null ? void 0 : _a.code) || "AU";
+  }, [countries, defaultCountry]);
+  const { dialCode: currentDialCode, phoneNumber: currentPhoneNumber } = (0, import_react.useMemo)(() => {
+    if (!(countries == null ? void 0 : countries.length)) {
+      return {
+        dialCode: "",
+        phoneNumber: ""
+      };
+    }
+    if (!normalizedValue || !normalizedValue.startsWith("+")) {
+      const defaultCountryOption2 = countries.find((c) => c.code === effectiveDefaultCountry) || countries[0];
+      return {
+        dialCode: `+${defaultCountryOption2.calling_code}`,
+        phoneNumber: ""
+      };
+    }
+    for (const country of countries) {
+      const countryDialCode = `+${country.calling_code}`;
+      if (normalizedValue.startsWith(countryDialCode)) {
+        return {
+          dialCode: countryDialCode,
+          phoneNumber: normalizedValue.slice(countryDialCode.length)
+        };
+      }
+    }
+    const defaultCountryOption = countries.find((c) => c.code === effectiveDefaultCountry) || countries[0];
+    return {
+      dialCode: `+${defaultCountryOption.calling_code}`,
+      phoneNumber: normalizedValue.startsWith("+") ? normalizedValue.slice(1) : normalizedValue
+    };
+  }, [normalizedValue, countries, effectiveDefaultCountry]);
+  const currentCountry = (0, import_react.useMemo)(() => {
+    return countries.find((c) => `+${c.calling_code}` === currentDialCode) || countries[0];
+  }, [currentDialCode, countries]);
+  const formatOutputValue = (dialCode, phoneNumber) => {
+    const fullString = `${dialCode}${phoneNumber}`;
+    if (valueFormat === "object") {
+      return {
+        phone: String(phoneNumber || ""),
+        country_calling_code: String(dialCode.replace("+", "") || "")
+        // 去掉 + 号并确保是字符串
+      };
+    }
+    return fullString;
+  };
+  const handleDialCodeChange = (e) => {
+    const newDialCode = e.target.value;
+    const newValue = formatOutputValue(newDialCode, currentPhoneNumber);
+    onChange == null ? void 0 : onChange(newValue);
+  };
+  const handlePhoneNumberChange = (e) => {
+    let inputValue = e.target.value;
+    const dialCodeWithoutPlus = currentDialCode.replace("+", "");
+    if (inputValue.startsWith("+")) {
+      if (inputValue.startsWith(currentDialCode)) {
+        inputValue = inputValue.slice(currentDialCode.length);
+      }
+    } else if (inputValue.startsWith(dialCodeWithoutPlus)) {
+      inputValue = inputValue.slice(dialCodeWithoutPlus.length);
+    }
+    const newPhoneNumber = inputValue.replace(/[^\d]/g, "");
+    const newValue = formatOutputValue(currentDialCode, newPhoneNumber);
+    onChange == null ? void 0 : onChange(newValue);
+  };
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `phone-input-wrapper ${className}` }, /* @__PURE__ */ import_react.default.createElement("div", { className: "phone-input-container" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "phone-input-prefix" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "phone-input-country-display" }, currentCountry == null ? void 0 : currentCountry.code, "(", currentDialCode, ")"), /* @__PURE__ */ import_react.default.createElement(
+    "select",
+    {
+      className: "phone-input-select",
+      value: currentDialCode,
+      onChange: handleDialCodeChange,
+      disabled
+    },
+    countries.map((country) => /* @__PURE__ */ import_react.default.createElement("option", { key: country.code, value: `+${country.calling_code}` }, country.code, " +", country.calling_code))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "svg",
+    {
+      className: "phone-input-arrow",
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      "path",
+      {
+        d: "M3 4.5L6 7.5L9 4.5",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "phone-input-divider" }), /* @__PURE__ */ import_react.default.createElement(
+    "input",
+    {
+      type: "tel",
+      className: `phone-input-field phone-input-field-${size}`,
+      value: currentPhoneNumber,
+      onChange: handlePhoneNumberChange,
+      onKeyDown,
+      placeholder: effectivePlaceholder,
+      disabled,
+      autoComplete: "tel"
+    }
+  )));
+}
+var PhoneInput_default = PhoneInput;

package/lib/pro/Login2.0/components/PhoneInput.less

@@ -0,0 +1,148 @@
+.phone-input-wrapper {
+  width: 100%;
+
+  .phone-input-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 44px;
+    padding: 0 16px;
+    background: #FFFFFF;
+    border: 1px solid #D0D5DD;
+    border-radius: 8px;
+    transition: all 0.2s ease;
+
+    &:hover {
+      border-color: #98A2B3;
+    }
+
+    &:focus-within {
+      border-color: var(--theme-color, #7F56D9);
+      box-shadow: 0px 0px 0px 4px rgba(127, 86, 217, 0.12);
+    }
+  }
+
+  .phone-input-prefix {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 6px;
+    cursor: pointer;
+  }
+
+  .phone-input-country-display {
+    font-size: 14px;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-weight: 400;
+    line-height: 20px;
+    color: #344054;
+    pointer-events: none;
+    white-space: nowrap;
+  }
+
+  .phone-input-select {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    font-size: 14px;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .phone-input-arrow {
+    flex-shrink: 0;
+    color: #667085;
+    pointer-events: none;
+  }
+
+  .phone-input-divider {
+    width: 1px;
+    height: 24px;
+    background: #D0D5DD;
+    margin: 0 12px;
+    flex-shrink: 0;
+  }
+
+  .phone-input-field {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 16px;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-weight: 400;
+    line-height: 24px;
+    color: #101828;
+    min-width: 0;
+
+    &::placeholder {
+      color: #98A2B3;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      color: #98A2B3;
+    }
+
+    // 移除 number 类型输入框的上下箭头
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &[type='number'] {
+      -moz-appearance: textfield;
+    }
+  }
+
+  // 大小变体
+  .phone-input-field-large {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  .phone-input-field-middle {
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .phone-input-field-small {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  // 禁用状态
+  &.phone-input-disabled {
+    .phone-input-container {
+      background: #F9FAFB;
+      border-color: #D0D5DD;
+      cursor: not-allowed;
+
+      &:hover {
+        border-color: #D0D5DD;
+      }
+    }
+  }
+
+  // 错误状态
+  &.phone-input-error {
+    .phone-input-container {
+      border-color: #F04438;
+
+      &:focus-within {
+        border-color: #F04438;
+        box-shadow: 0px 0px 0px 4px rgba(240, 68, 56, 0.12);
+      }
+    }
+  }
+}
+

package/lib/pro/Login2.0/components/phoneValidation.d.ts

@@ -0,0 +1,17 @@
+import { PhoneValueObject } from './PhoneInput';
+declare type GetTextFunction = (key: string) => string;
+/**
+ * 手机号校验函数，用于 Ant Design Form 的 rules
+ * @param value 手机号值，可以是字符串或对象格式
+ * @param getText 国际化文本获取函数
+ * @returns Promise<void> 校验通过时 resolve，失败时 reject 并返回错误信息
+ */
+export declare const validatePhoneNumber: (value: string | PhoneValueObject, getText: GetTextFunction) => Promise<void>;
+/**
+ * 创建手机号校验规则，用于 Form.Item 的 rules 属性
+ * @param getText 国际化文本获取函数
+ * @param required 是否必填
+ * @returns Form 校验规则数组
+ */
+export declare const createPhoneValidationRules: (getText: GetTextFunction, required?: boolean) => any[];
+export {};