@pisell/materials 6.9.3 → 6.9.5

package/es/components/pisellEmail/utils/emailHelper.js

@@ -0,0 +1,135 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * 邮箱辅助函数
+ */
+
+/**
+ * 提取邮箱域名
+ * @param email 邮箱地址
+ * @returns 域名部分
+ * 
+ * @example
+ * extractEmailDomain('user@example.com') // 'example.com'
+ */
+export function extractEmailDomain(email) {
+  var parts = email.split('@');
+  return parts.length === 2 ? parts[1] : '';
+}
+
+/**
+ * 提取邮箱本地部分
+ * @param email 邮箱地址
+ * @returns 本地部分（@ 前面的部分）
+ * 
+ * @example
+ * extractEmailLocal('user@example.com') // 'user'
+ */
+export function extractEmailLocal(email) {
+  var parts = email.split('@');
+  return parts.length >= 1 ? parts[0] : '';
+}
+
+/**
+ * 规范化邮箱地址（转小写）
+ * @param email 邮箱地址
+ * @returns 规范化后的邮箱地址
+ * 
+ * @example
+ * normalizeEmail('User@Example.COM') // 'user@example.com'
+ */
+export function normalizeEmail(email) {
+  return email.trim().toLowerCase();
+}
+
+/**
+ * 邮箱域名脱敏（partial 模式）
+ * 只显示本地部分的第一个字符，其余用 *** 替代
+ * 
+ * @param email 邮箱地址
+ * @returns 脱敏后的邮箱（u***@gmail.com）
+ * 
+ * @example
+ * hideEmailDomain('user@gmail.com') // 'u***@gmail.com'
+ */
+export function hideEmailDomain(email) {
+  if (!email || !email.includes('@')) {
+    return email;
+  }
+  var _email$split = email.split('@'),
+    _email$split2 = _slicedToArray(_email$split, 2),
+    localPart = _email$split2[0],
+    domainPart = _email$split2[1];
+  if (!localPart || !domainPart) {
+    return email;
+  }
+
+  // 本地部分脱敏：只显示第一个字符
+  var visibleChars = Math.min(1, localPart.length);
+  var maskedLocal = localPart.substring(0, visibleChars) + '***';
+  return "".concat(maskedLocal, "@").concat(domainPart);
+}
+
+/**
+ * 邮箱域名完全隐藏（full 模式）
+ * 隐藏整个域名部分
+ * 
+ * @param email 邮箱地址
+ * @returns 脱敏后的邮箱（user@***）
+ * 
+ * @example
+ * maskEmailDomain('user@gmail.com') // 'user@***'
+ */
+export function maskEmailDomain(email) {
+  if (!email || !email.includes('@')) {
+    return email;
+  }
+  var _email$split3 = email.split('@'),
+    _email$split4 = _slicedToArray(_email$split3, 1),
+    localPart = _email$split4[0];
+  return "".concat(localPart, "@***");
+}
+
+/**
+ * 处理 mailto 点击，唤起邮件客户端
+ * 
+ * @param email 邮箱地址
+ * @param options mailto 可选参数（主题、正文、抄送等）
+ * 
+ * @example
+ * handleEmailClick('support@example.com', {
+ *   subject: '产品咨询',
+ *   body: '您好，我想咨询...'
+ * })
+ */
+export function handleEmailClick(email, options) {
+  if (!email) return;
+
+  // 构建 mailto URL
+  var mailtoUrl = "mailto:".concat(email);
+
+  // 添加可选参数
+  var params = [];
+  if (options !== null && options !== void 0 && options.subject) {
+    params.push("subject=".concat(encodeURIComponent(options.subject)));
+  }
+  if (options !== null && options !== void 0 && options.body) {
+    params.push("body=".concat(encodeURIComponent(options.body)));
+  }
+  if (options !== null && options !== void 0 && options.cc) {
+    params.push("cc=".concat(encodeURIComponent(options.cc)));
+  }
+  if (options !== null && options !== void 0 && options.bcc) {
+    params.push("bcc=".concat(encodeURIComponent(options.bcc)));
+  }
+  if (params.length > 0) {
+    mailtoUrl += '?' + params.join('&');
+  }
+
+  // 唤起邮件客户端
+  window.location.href = mailtoUrl;
+}

package/es/components/pisellEmail/utils/emailValidator.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 邮箱校验工具函数
+ */
+/**
+ * 标准邮箱格式校验
+ * @param email 邮箱地址
+ * @returns 是否通过校验
+ *
+ * @example
+ * validateEmail('user@example.com') // true
+ * validateEmail('invalid-email') // false
+ */
+export declare function validateEmail(email: string): boolean;
+/**
+ * 严格邮箱格式校验（RFC 5322）
+ * @param email 邮箱地址
+ * @returns 是否通过校验
+ *
+ * @example
+ * validateEmailStrict('user@example.com') // true
+ */
+export declare function validateEmailStrict(email: string): boolean;
+/**
+ * 邮箱分部校验
+ * 检查邮箱的各个部分是否符合规范
+ *
+ * @param email 邮箱地址
+ * @returns 校验结果
+ */
+export declare function validateEmailParts(email: string): {
+    isValid: boolean;
+    errors: string[];
+};
+/**
+ * 域名白名单/黑名单校验
+ *
+ * @param email 邮箱地址
+ * @param allowedDomains 白名单域名列表
+ * @param blockedDomains 黑名单域名列表
+ * @returns 校验结果
+ */
+export declare function validateEmailDomain(email: string, allowedDomains?: string[], blockedDomains?: string[]): {
+    isValid: boolean;
+    errors: string[];
+};

package/es/components/pisellEmail/utils/emailValidator.js

@@ -0,0 +1,130 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/**
+ * 邮箱校验工具函数
+ */
+
+import { EMAIL_REGEX, STRICT_EMAIL_REGEX } from "../constants/emailRegex";
+import { extractEmailDomain } from "./emailHelper";
+
+/**
+ * 标准邮箱格式校验
+ * @param email 邮箱地址
+ * @returns 是否通过校验
+ * 
+ * @example
+ * validateEmail('user@example.com') // true
+ * validateEmail('invalid-email') // false
+ */
+export function validateEmail(email) {
+  if (!email) return true; // 空值不校验，由 required 处理
+  return EMAIL_REGEX.test(email);
+}
+
+/**
+ * 严格邮箱格式校验（RFC 5322）
+ * @param email 邮箱地址
+ * @returns 是否通过校验
+ * 
+ * @example
+ * validateEmailStrict('user@example.com') // true
+ */
+export function validateEmailStrict(email) {
+  if (!email) return true;
+  return STRICT_EMAIL_REGEX.test(email);
+}
+
+/**
+ * 邮箱分部校验
+ * 检查邮箱的各个部分是否符合规范
+ * 
+ * @param email 邮箱地址
+ * @returns 校验结果
+ */
+export function validateEmailParts(email) {
+  var errors = [];
+
+  // 1. 基本格式检查
+  if (!email.includes('@')) {
+    errors.push('邮箱地址必须包含 @ 符号');
+    return {
+      isValid: false,
+      errors: errors
+    };
+  }
+  var _email$split = email.split('@'),
+    _email$split2 = _slicedToArray(_email$split, 2),
+    localPart = _email$split2[0],
+    domainPart = _email$split2[1];
+
+  // 2. 本地部分校验
+  if (!localPart || localPart.length === 0) {
+    errors.push('@ 符号前不能为空');
+  }
+  if (localPart.length > 64) {
+    errors.push('@ 符号前最多 64 个字符');
+  }
+
+  // 3. 域名部分校验
+  if (!domainPart || domainPart.length === 0) {
+    errors.push('@ 符号后不能为空');
+  }
+  if (!domainPart.includes('.')) {
+    errors.push('域名必须包含 . 符号');
+  }
+  if (domainPart.endsWith('.')) {
+    errors.push('域名不能以 . 结尾');
+  }
+
+  // 4. 顶级域名校验
+  var parts = domainPart.split('.');
+  var tld = parts[parts.length - 1];
+  if (tld && tld.length < 2) {
+    errors.push('顶级域名至少 2 个字符');
+  }
+  return {
+    isValid: errors.length === 0,
+    errors: errors
+  };
+}
+
+/**
+ * 域名白名单/黑名单校验
+ * 
+ * @param email 邮箱地址
+ * @param allowedDomains 白名单域名列表
+ * @param blockedDomains 黑名单域名列表
+ * @returns 校验结果
+ */
+export function validateEmailDomain(email, allowedDomains, blockedDomains) {
+  var errors = [];
+  var domain = extractEmailDomain(email);
+  if (!domain) {
+    return {
+      isValid: true,
+      errors: errors
+    };
+  }
+
+  // 白名单校验
+  if (allowedDomains && allowedDomains.length > 0) {
+    if (!allowedDomains.includes(domain)) {
+      errors.push("\u53EA\u5141\u8BB8\u4EE5\u4E0B\u57DF\u540D\uFF1A".concat(allowedDomains.join(', ')));
+    }
+  }
+
+  // 黑名单校验
+  if (blockedDomains && blockedDomains.length > 0) {
+    if (blockedDomains.includes(domain)) {
+      errors.push('该邮箱域名不可用');
+    }
+  }
+  return {
+    isValid: errors.length === 0,
+    errors: errors
+  };
+}

package/es/components/pisellEmail/utils/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellEmail 工具函数导出
+ */
+export * from './emailValidator';
+export * from './emailHelper';
+export * from './domainSuggestions';

package/es/components/pisellEmail/utils/index.js

@@ -0,0 +1,12 @@
+/**
+ * PisellEmail 工具函数导出
+ */
+
+// 邮箱校验相关
+export * from "./emailValidator";
+
+// 邮箱辅助函数
+export * from "./emailHelper";
+
+// 域名补全相关
+export * from "./domainSuggestions";

package/es/components/pisellEmpty/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { EmptyProps } from 'antd';
+import { PisellContextType } from '../pisell-config-provider/context';
+import './index.less';
+export interface PisellEmptyProps extends EmptyProps {
+    /** 平台 */
+    platform?: PisellContextType['platform'];
+    /** 额外内容描述 */
+    extraDescription?: React.ReactNode;
+    /** 额外内容描述 */
+    icon?: React.ReactNode;
+    /** 自定义底部额外操作区域 */
+    footer?: React.ReactNode;
+    [key: string]: any;
+    /** 最大宽度 */
+    maxWidth?: number;
+}
+declare const PisellEmpty: (props: PisellEmptyProps) => JSX.Element;
+export default PisellEmpty;

package/es/components/pisellInput/components/Copy/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps, ButtonProps } from 'antd';
 import { PisellContextType } from "../../../pisell-config-provider/context";
 export interface CopyProps extends InputProps {

package/es/components/pisellInput/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from 'antd';
 import { PisellContextType } from '../pisell-config-provider/context';
 declare const PisellInput: {

package/es/components/pisellLayout/index.d.ts

@@ -4,7 +4,7 @@ import React from 'react';
 export interface PisellLayoutProps extends LayoutProps {
     children?: React.ReactNode;
 }
-interface CompoundedComponent extends React.FC<PisellLayoutProps> {
+export interface CompoundedComponent extends React.FC<PisellLayoutProps> {
     Header: typeof Layout.Header;
     Content: typeof Layout.Content;
     Footer: typeof Layout.Footer;

package/es/components/pisellLoading/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SpinProps } from 'antd';
 import './index.less';
 declare type MaskType = {

package/es/components/pisellLongText/PisellLongText.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { PisellLongTextProps } from './types';
+import './PisellLongText.less';
+/**
+ * PisellLongText 长文本/多行文本组件
+ *
+ * 多行文本输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design TextArea 组件开发，提供展开/折叠功能和完整的校验框架。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 编辑态
+ * <PisellLongText
+ *   placeholder="请输入内容"
+ *   rows={3}
+ *   maxLength={500}
+ *   showCount
+ * />
+ *
+ * @example
+ * // 只读态（展开折叠）
+ * <PisellLongText
+ *   mode="read"
+ *   value={longText}
+ *   maxLines={3}
+ *   enableExpand
+ * />
+ *
+ * @example
+ * // 自动高度
+ * <PisellLongText
+ *   autoSize={{ minRows: 3, maxRows: 10 }}
+ *   placeholder="自动调整高度"
+ * />
+ */
+export declare const PisellLongText: React.FC<PisellLongTextProps>;
+declare const _default: React.NamedExoticComponent<PisellLongTextProps>;
+export default _default;

package/es/components/pisellLongText/PisellLongText.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { getDisplayState } from '@pisell/utils';
+import ReadOnlyView from "./components/ReadOnlyView";
+import EditView from "./components/EditView";
+import DisabledView from "./components/DisabledView";
+import "./PisellLongText.less";
+
+/**
+ * PisellLongText 长文本/多行文本组件
+ * 
+ * 多行文本输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design TextArea 组件开发，提供展开/折叠功能和完整的校验框架。
+ * 
+ * @param props 组件 Props
+ * 
+ * @example
+ * // 编辑态
+ * <PisellLongText 
+ *   placeholder="请输入内容"
+ *   rows={3}
+ *   maxLength={500}
+ *   showCount
+ * />
+ * 
+ * @example
+ * // 只读态（展开折叠）
+ * <PisellLongText 
+ *   mode="read"
+ *   value={longText}
+ *   maxLines={3}
+ *   enableExpand
+ * />
+ * 
+ * @example
+ * // 自动高度
+ * <PisellLongText 
+ *   autoSize={{ minRows: 3, maxRows: 10 }}
+ *   placeholder="自动调整高度"
+ * />
+ */
+export var PisellLongText = function PisellLongText(props) {
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'edit' : _props$mode,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+
+  // 计算显示状态
+  var displayState = getDisplayState(mode, disabled);
+
+  // 根据状态渲染对应子组件
+  switch (displayState) {
+    case 'read':
+      return /*#__PURE__*/React.createElement(ReadOnlyView, props);
+    case 'edit':
+      return /*#__PURE__*/React.createElement(EditView, props);
+    case 'disabled':
+      return /*#__PURE__*/React.createElement(DisabledView, props);
+    default:
+      return null;
+  }
+};
+
+// 性能优化：使用 memo 避免不必要的重渲染
+export default /*#__PURE__*/React.memo(PisellLongText, function (prevProps, nextProps) {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled;
+});

package/es/components/pisellLongText/PisellLongText.less

@@ -0,0 +1,60 @@
+/**
+ * PisellLongText 组件样式
+ */
+
+.pisell-long-text {
+  &-edit {
+    position: relative;
+    width: 100%;
+
+    // 基于 Figma 设计规范的 TextArea 样式
+    .ant-input {
+      padding: 12px 14px; // Figma: 垂直12px，水平14px（比 Input 小2px）
+    }
+  }
+
+  &-error {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #ff4d4f;
+    line-height: 1.5;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  &-read {
+    .ant-typography {
+      margin-bottom: 0;
+    }
+  }
+
+  &-expand-btn {
+    padding: 0;
+    height: auto;
+    font-size: 14px;
+    margin-top: 8px;
+  }
+
+  &-word-count {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #667085;
+    text-align: right;
+  }
+
+  &-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+// 错误提示淡入动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/es/components/pisellLongText/PisellLongText.stories.d.ts

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellLongText } from './PisellLongText';
+/**
+ * PisellLongText 是一个多行文本输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 展开/折叠功能（只读态）
+ * - 自动高度调整
+ * - 完整的校验框架
+ * - 字数统计
+ */
+declare const meta: Meta<typeof PisellLongText>;
+export default meta;
+declare type Story = StoryObj<typeof PisellLongText>;
+/**
+ * 基础编辑态示例
+ */
+export declare const Basic: Story;
+/**
+ * 只读态示例 - 短文本
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 展开/折叠功能（核心）
+ */
+export declare const ReadModeExpandCollapse: Story;
+/**
+ * 只读态 - 自定义展开/收起文案
+ */
+export declare const ReadModeCustomExpandText: Story;
+/**
+ * 只读态 - 禁用展开功能
+ */
+export declare const ReadModeDisableExpand: Story;
+/**
+ * 只读态 - 字数统计
+ */
+export declare const ReadModeWithWordCount: Story;
+/**
+ * 只读态 - 展开 + 字数统计
+ */
+export declare const ReadModeExpandAndWordCount: Story;
+/**
+ * 禁用态示例
+ */
+export declare const Disabled: Story;
+/**
+ * 编辑态 - 默认行数
+ */
+export declare const EditModeCustomRows: Story;
+/**
+ * 编辑态 - 自动高度（boolean）
+ */
+export declare const EditModeAutoSize: Story;
+/**
+ * 编辑态 - 自动高度（范围限定）
+ */
+export declare const EditModeAutoSizeRange: Story;
+/**
+ * 编辑态 - minRows 和 maxRows
+ */
+export declare const EditModeMinMaxRows: Story;
+/**
+ * 编辑态 - 字数统计
+ */
+export declare const EditModeWithCount: Story;
+/**
+ * 编辑态 - 清空按钮
+ */
+export declare const EditModeWithClear: Story;
+/**
+ * 必填校验
+ */
+export declare const Required: Story;
+/**
+ * 长度校验
+ */
+export declare const LengthValidation: Story;
+/**
+ * 自定义校验 - 段落数量限制
+ */
+export declare const CustomValidatorParagraphs: Story;
+/**
+ * 组合校验
+ */
+export declare const CombinedValidation: Story;
+/**
+ * 自动高度 + 字数统计
+ */
+export declare const AutoSizeWithCount: Story;
+/**
+ * 保留换行和空格
+ */
+export declare const PreserveWhitespace: Story;
+/**
+ * 自定义样式（只读态）
+ */
+export declare const CustomStyle: Story;
+/**
+ * 完整功能示例
+ */
+export declare const FullFeatures: Story;
+/**
+ * 所有展开/折叠场景对比
+ */
+export declare const AllExpandScenarios: Story;
+/**
+ * 所有自动高度场景对比
+ */
+export declare const AllAutoSizeScenarios: Story;
+/**
+ * 校验场景对比
+ */
+export declare const ValidationScenarios: Story;
+/**
+ * 边界情况测试
+ */
+export declare const EdgeCases: Story;
+/**
+ * 完整功能演示
+ */
+export declare const CompleteExample: Story;