@pisell/private-materials 6.8.83 → 6.8.85

package/lib/plus/webPosLogin/types.d.ts

@@ -0,0 +1,286 @@
+/**
+ * WebPosLogin 组件类型定义
+ * @description WebPOS 登录流程组件，包含登录、店铺选择、设备选择三个步骤
+ */
+/// <reference types="react" />
+/**
+ * 店铺数据结构
+ * @description 从租户列表接口返回的店铺信息
+ */
+export interface StoreItem {
+    /** 店铺ID */
+    id: number;
+    /** 租户ID */
+    tenant_id: number;
+    /** 账户ID */
+    account_id: number;
+    /** 类型 */
+    type: string;
+    /** 昵称 */
+    nickname: string;
+    /** 状态 */
+    status: string;
+    /** 创建时间 */
+    created_at?: string;
+    /** 更新时间 */
+    updated_at?: string;
+    /** 租户详情 */
+    tenant: {
+        /** 租户ID */
+        id: number;
+        /** 父租户ID */
+        tenant_id?: number;
+        /** 账户ID */
+        account_id?: number;
+        /** 类型 */
+        type?: string;
+        /** 名称（多语言） */
+        name: {
+            en?: string | null;
+            'zh-CN'?: string | null;
+            'zh-HK'?: string | null;
+            original: string;
+        };
+        /** Logo图片 */
+        logo?: string;
+        /** 图标 */
+        icon?: string;
+        /** Favicon */
+        favicon?: string;
+        /** 默认域名 */
+        default_domain: string;
+        /** 私有域名 */
+        private_domain?: string | null;
+        /** 货币代码 */
+        currency_code?: string | null;
+        /** 国家代码 */
+        country_code?: string | null;
+        /** 语言 */
+        locale?: string;
+        /** 时区 */
+        timezone?: string;
+        /** 状态 */
+        status?: string;
+    };
+}
+/**
+ * 设备客户端信息
+ * @description 设备绑定的客户端详情
+ */
+export interface DeviceClient {
+    /** 客户端ID */
+    id: number;
+    /** 店铺ID */
+    shop_id: number;
+    /** 设备ID */
+    device_id: number;
+    /** 客户端编号 */
+    number: string;
+    /** 客户端名称 */
+    name: string;
+    /** 客户端类型 */
+    type: string;
+    /** 设备型号 */
+    model?: string;
+    /** 系统版本 */
+    version?: string;
+    /** 设备详细数据 */
+    data?: {
+        battery?: {
+            is_charging?: boolean;
+            visible_percent?: string;
+        };
+        hardware?: {
+            country?: string;
+            datetime?: string;
+            language?: string;
+            timezone?: string;
+        };
+        application?: {
+            name?: string;
+            type?: string;
+            version?: string;
+            language?: string;
+            bundle_id?: string;
+        };
+        connectivity?: {
+            ip?: string;
+            type?: string;
+            wifi_details?: any[];
+        };
+    };
+    /** 最后刷新时间 */
+    refreshed_at?: string;
+    /** 创建时间 */
+    created_at?: string;
+    /** 更新时间 */
+    updated_at?: string;
+}
+/**
+ * 设备数据结构
+ * @description 从设备列表接口返回的设备信息
+ */
+export interface DeviceItem {
+    /** 设备ID */
+    id: number;
+    /** 店铺ID */
+    shop_id: number;
+    /** 设备类型 */
+    type: string;
+    /** 设备编号 */
+    number: string;
+    /** 设备名称 */
+    name: string;
+    /** 设备描述 */
+    description?: string;
+    /** 设备设置 */
+    setting?: any[];
+    /** 创建时间 */
+    created_at?: string;
+    /** 更新时间 */
+    updated_at?: string;
+    /** 绑定的客户端信息（null 表示未被使用） */
+    client?: DeviceClient | null;
+}
+/**
+ * 用户信息
+ * @description 当前登录用户的基本信息
+ */
+export interface UserInfo {
+    /** 用户名称 */
+    name: string;
+    /** 用户头像 */
+    avatar?: string;
+}
+/**
+ * 品牌区轮播项
+ * @description 左侧品牌区的轮播内容配置
+ */
+export interface CarouselItem {
+    /** 内容类型：图片或视频 */
+    type: 'image' | 'video';
+    /** 资源URL */
+    url: string;
+}
+/**
+ * 品牌区配置
+ * @description 左侧品牌展示区域的配置
+ */
+export interface BrandConfig {
+    /** 轮播内容列表（图片/视频） */
+    carouselItems?: CarouselItem[];
+    /** 默认Logo（当无轮播时显示） */
+    logo?: string;
+    /** 品牌标语 */
+    slogan?: string;
+}
+/**
+ * 登录流程步骤
+ */
+export declare type LoginStep = 'login' | 'store' | 'device';
+/**
+ * 支持的语言类型
+ */
+export declare type LocaleType = 'en' | 'zh-CN' | 'zh-HK';
+/**
+ * WebPosLogin 主组件 Props
+ * @description WebPOS 登录组件的所有配置项
+ */
+export interface WebPosLoginCptProps {
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    /** 背景图片URL */
+    backgroundImage?: string;
+    /** 品牌区配置 */
+    brandConfig?: BrandConfig;
+    /** 当前步骤：login-登录 | store-店铺选择 | device-设备选择 */
+    step?: LoginStep;
+    /** 是否显示返回按钮（默认 true） */
+    showBackButton?: boolean;
+    /** 店铺列表数据 */
+    storeList?: StoreItem[];
+    /** 设备列表数据 */
+    deviceList?: DeviceItem[];
+    /** 当前用户信息 */
+    userInfo?: UserInfo;
+    /** 当前选中的店铺 */
+    selectedStore?: StoreItem;
+    /** 上次使用的店铺ID（用于显示 Last used 标签） */
+    lastUsedStoreId?: number;
+    /** 上次使用的设备ID（用于显示 Last used 标签） */
+    lastUsedDeviceId?: number;
+    /** 语言设置 */
+    locale?: LocaleType;
+    /** 加载状态 */
+    loading?: boolean;
+    /** 登录配置 */
+    loginConfig?: any;
+    /** 店铺选择回调 */
+    onStoreSelect?: (store: StoreItem) => void;
+    /** 设备选择回调 */
+    onDeviceSelect?: (device: DeviceItem) => void;
+    /** 切换账号回调 */
+    onChangeAccount?: () => void;
+    /** 切换店铺回调 */
+    onChangeStore?: () => void;
+    /** 返回上一步回调 */
+    onBack?: () => void;
+    /** 登录成功回调 */
+    onLoginSuccess?: (data: any) => void;
+}
+/**
+ * BrandPanel 品牌区组件 Props
+ */
+export interface BrandPanelProps {
+    /** 品牌配置 */
+    config?: BrandConfig;
+    /** 自定义类名 */
+    className?: string;
+}
+/**
+ * SelectStore 店铺选择组件 Props
+ */
+export interface SelectStoreProps {
+    /** 店铺列表 */
+    storeList?: StoreItem[];
+    /** 语言 */
+    locale?: LocaleType;
+    /** 加载状态 */
+    loading?: boolean;
+    /** 上次使用的店铺ID */
+    lastUsedStoreId?: number;
+    /** 选择店铺回调 */
+    onSelect?: (store: StoreItem) => void;
+}
+/**
+ * SelectDevice 设备选择组件 Props
+ */
+export interface SelectDeviceProps {
+    /** 设备列表 */
+    deviceList?: DeviceItem[];
+    /** 语言 */
+    locale?: LocaleType;
+    /** 加载状态 */
+    loading?: boolean;
+    /** 选择设备回调 */
+    onSelect?: (device: DeviceItem) => void;
+}
+/**
+ * UserFooter 底部用户信息组件 Props
+ */
+export interface UserFooterProps {
+    /** 用户信息 */
+    userInfo?: UserInfo;
+    /** 当前选中的店铺 */
+    selectedStore?: StoreItem;
+    /** 当前步骤 */
+    step?: LoginStep;
+    /** 语言 */
+    locale?: LocaleType;
+    /** 切换账号回调 */
+    onChangeAccount?: () => void;
+    /** 切换店铺回调 */
+    onChangeStore?: () => void;
+}

package/lib/pro/Cards/index.d.ts

@@ -0,0 +1 @@
+export { default as SKUCard } from './components/SKUCard';

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

@@ -64,8 +64,25 @@ function LoginCodeInput({
     }
   }, [error, codeLength]);
   const handleInputChange = (index, value) => {
-    var _a;
-    if (!/^\d*$/.test(value)) return;
+    var _a, _b;
+    const digitsOnly = value.replace(/\D/g, "");
+    if (digitsOnly !== value && value !== "") return;
+    if (digitsOnly.length > 1) {
+      if (error && onClearError) onClearError();
+      const nextCode = [...code];
+      const maxFillLength = Math.min(codeLength - index, digitsOnly.length);
+      for (let offset = 0; offset < maxFillLength; offset += 1) {
+        nextCode[index + offset] = digitsOnly[offset];
+      }
+      setCode(nextCode);
+      const nextEmptyIndex = nextCode.findIndex((digit) => digit === "");
+      if (nextEmptyIndex === -1) {
+        onSubmit == null ? void 0 : onSubmit(nextCode.join(""));
+        return;
+      }
+      (_a = inputRefs.current[nextEmptyIndex]) == null ? void 0 : _a.focus();
+      return;
+    }
     if (value && error && onClearError) {
       onClearError();
     }
@@ -73,7 +90,7 @@ function LoginCodeInput({
     newCode[index] = value.slice(-1);
     setCode(newCode);
     if (value && index < codeLength - 1) {
-      (_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
+      (_b = inputRefs.current[index + 1]) == null ? void 0 : _b.focus();
     }
     if (newCode.every((digit) => digit !== "")) {
       const fullCode = newCode.join("");
@@ -118,7 +135,12 @@ function LoginCodeInput({
       ref: (el) => inputRefs.current[index] = el,
       type: "text",
       inputMode: "numeric",
-      maxLength: 1,
+      autoComplete: index === 0 ? "one-time-code" : "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      spellCheck: false,
+      maxLength: index === 0 ? codeLength : 1,
+      pattern: "[0-9]*",
       className: `code-input-box ${digit ? "has-value" : ""} ${error ? "has-error" : ""}`,
       value: digit,
       onChange: (e) => handleInputChange(index, e.target.value),

package/lib/pro/Login2.0/steps/CodeInput.js

@@ -62,8 +62,25 @@ function CodeInput({
     }
   }, [error, codeLength]);
   const handleInputChange = (index, value) => {
-    var _a;
-    if (!/^\d*$/.test(value)) return;
+    var _a, _b;
+    const digitsOnly = value.replace(/\D/g, "");
+    if (digitsOnly !== value && value !== "") return;
+    if (digitsOnly.length > 1) {
+      if (error && onClearError) onClearError();
+      const nextCode = [...code];
+      const maxFillLength = Math.min(codeLength - index, digitsOnly.length);
+      for (let offset = 0; offset < maxFillLength; offset += 1) {
+        nextCode[index + offset] = digitsOnly[offset];
+      }
+      setCode(nextCode);
+      const nextEmptyIndex = nextCode.findIndex((digit) => digit === "");
+      if (nextEmptyIndex === -1) {
+        onSubmit == null ? void 0 : onSubmit(nextCode.join(""));
+        return;
+      }
+      (_a = inputRefs.current[nextEmptyIndex]) == null ? void 0 : _a.focus();
+      return;
+    }
     if (value && error && onClearError) {
       onClearError();
     }
@@ -71,7 +88,7 @@ function CodeInput({
     newCode[index] = value.slice(-1);
     setCode(newCode);
     if (value && index < codeLength - 1) {
-      (_a = inputRefs.current[index + 1]) == null ? void 0 : _a.focus();
+      (_b = inputRefs.current[index + 1]) == null ? void 0 : _b.focus();
     }
     if (newCode.every((digit) => digit !== "")) {
       const fullCode = newCode.join("");
@@ -108,7 +125,7 @@ function CodeInput({
   };
   const title = flowData.accountType === "email" ? import_utils.locales.getText("pisell-register2-check-email-title") : import_utils.locales.getText("pisell-register2-check-phone-title");
   const description = flowData.accountType === "email" ? import_utils.locales.getText("pisell-register2-check-email-desc") : import_utils.locales.getText("pisell-register2-check-phone-desc");
-  const displayAccount = typeof flowData.account === "object" && "phone" in flowData.account ? `+${flowData.account.country_calling_code}${flowData.account.phone}` : flowData.account;
+  const displayAccount = flowData.account;
   const noReceiveText = flowData.accountType === "email" ? import_utils.locales.getText("pisell-register2-no-email-received") : import_utils.locales.getText("pisell-register2-no-message-received");
   return /* @__PURE__ */ import_react.default.createElement("div", { className: "register-step-container code-input-page" }, /* @__PURE__ */ import_react.default.createElement("button", { className: "back-button-top", onClick: onBack, "aria-label": "Go back" }, /* @__PURE__ */ import_react.default.createElement(import_iconfont.default, { type: "pisell2-arrow-left" })), /* @__PURE__ */ import_react.default.createElement("div", { className: "register-step-content" }, /* @__PURE__ */ import_react.default.createElement("h2", { className: "register-step-title" }, title), /* @__PURE__ */ import_react.default.createElement("p", { className: "register-step-desc" }, description, /* @__PURE__ */ import_react.default.createElement("br", null), displayAccount), /* @__PURE__ */ import_react.default.createElement("div", { className: "code-input-group", onPaste: handlePaste }, code.map((digit, index) => /* @__PURE__ */ import_react.default.createElement(
     "input",
@@ -117,7 +134,12 @@ function CodeInput({
       ref: (el) => inputRefs.current[index] = el,
       type: "text",
       inputMode: "numeric",
-      maxLength: 1,
+      autoComplete: index === 0 ? "one-time-code" : "off",
+      autoCorrect: "off",
+      autoCapitalize: "off",
+      spellCheck: false,
+      maxLength: index === 0 ? codeLength : 1,
+      pattern: "[0-9]*",
       className: `code-input-box ${digit ? "has-value" : ""} ${error ? "has-error" : ""}`,
       value: digit,
       onChange: (e) => handleInputChange(index, e.target.value),

package/lib/pro/Selector/BatchSelectorDemo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const BatchSelectorDemo: React.FC;
+export default BatchSelectorDemo;

package/lib/pro/Selector/Item.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { OptionItem } from './types';
+export interface IItemProps {
+    actions: any;
+    dataSource: OptionItem;
+    indicator: React.ReactNode;
+    numberSelector: React.ReactNode;
+    optionItemValue?: any;
+    quantityInfo: any;
+    values: any;
+    children?: React.ReactNode;
+}
+declare const Item: (props: IItemProps) => JSX.Element;
+export default Item;

package/lib/pro/Selector/Selector.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ItemLayout, ItemProps, PresetConfig, SelectorProps, SelectorVariant } from './types';
+import './selector.less';
+export declare const SelectorContext: React.Context<{
+    disabled?: boolean | undefined;
+    mode?: "multiple" | "single" | undefined;
+    itemLayout?: ItemLayout | undefined;
+    valueType?: "object" | "primitive" | undefined;
+    variant?: SelectorVariant | undefined;
+    itemProps?: ItemProps | undefined;
+    preset?: PresetConfig | undefined;
+}>;
+declare const Selector: React.ForwardRefExoticComponent<SelectorProps<import("./types").OptionKey> & React.RefAttributes<unknown>>;
+export default Selector;

package/lib/pro/Selector/Selector.stories.d.ts

@@ -0,0 +1,78 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Selector from './index';
+/**
+ * Selector 组件 - 高级选择器
+ *
+ * 支持单选/多选、数量控制、校验规则、互斥组等功能
+ *
+ * 查看文档：
+ * - [开发文档](https://studio.picoding-dev.com/pro-components/selector?tab=dev)
+ * - [需求文档](https://m1ed09stz4r.feishu.cn/wiki/NL5AwOs0ei5ZBekT4i6cuzIOnoM)
+ */
+declare const meta: Meta<typeof Selector>;
+export default meta;
+declare type Story = StoryObj<typeof Selector>;
+/**
+ * 默认单选模式 - 原始值类型
+ */
+export declare const Default: Story;
+/**
+ * 多选模式 - 原始值数组
+ */
+export declare const Multiple: Story;
+/**
+ * 单选 + 数量 - 对象值类型
+ */
+export declare const SingleWithQuantity: Story;
+/**
+ * 多选 + 数量 - 卡片样式
+ */
+export declare const MultipleWithQuantity: Story;
+/**
+ * 网格布局 - 2列
+ */
+export declare const GridLayout2Columns: Story;
+/**
+ * 网格布局 - 3列
+ */
+export declare const GridLayout3Columns: Story;
+/**
+ * 校验规则 - 必选、最小/最大数量
+ */
+export declare const WithValidation: Story;
+/**
+ * 互斥组 - 同组只能选一个
+ */
+export declare const MutexGroups: Story;
+/**
+ * 禁用状态
+ */
+export declare const Disabled: Story;
+/**
+ * Select 变体 - 下拉选择
+ */
+export declare const SelectVariant: Story;
+/**
+ * Select 变体 - 多选下拉
+ */
+export declare const SelectVariantMultiple: Story;
+/**
+ * 卡片样式变体 - 不同选中态
+ */
+export declare const CardVariants: Story;
+/**
+ * 自定义图标
+ */
+export declare const CustomIcon: Story;
+/**
+ * 自定义渲染
+ */
+export declare const CustomRender: Story;
+/**
+ * SelectorGroup 基础示例
+ */
+export declare const SelectorGroupBasic: StoryObj;
+/**
+ * SelectorGroup 联动规则示例
+ */
+export declare const SelectorGroupWithLinkage: StoryObj;

package/lib/pro/Selector/SelectorGroup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SelectionValue, SelectorGroupProps } from './types';
+import './selectorGroup.less';
+export declare type SelectorGroupRef = {
+    getValues: (includeHidden?: boolean) => Record<string, SelectionValue>;
+    setValues: (values: Record<string, SelectionValue>) => void;
+    validate: () => Promise<Record<string, never>>;
+    reset: () => void;
+};
+declare const SelectorGroup: React.ForwardRefExoticComponent<Omit<SelectorGroupProps, "ref"> & React.RefAttributes<SelectorGroupRef>>;
+export default SelectorGroup;

package/lib/pro/Selector/components/Card/index.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import './index.less';
+export declare type CardVariant = 'outlined' | 'borderless';
+export declare type CardLayout = 'vertical' | 'horizontal';
+export declare type SelectedType = 'none' | 'outlined' | 'outlined-bold' | 'filled';
+export declare type ActionsPosition = 'left' | 'right';
+export interface CardStyles {
+    container?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+    content?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+    actions?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+    corner?: React.CSSProperties | ((props: CardStyleProps) => React.CSSProperties);
+}
+export interface CardStyleProps {
+    selected?: boolean;
+    disabled?: boolean;
+    hoverable?: boolean;
+    variant?: CardVariant;
+    layout?: CardLayout;
+}
+export interface CardProps {
+    /** 卡片变体样式 */
+    variant?: CardVariant;
+    /** 布局方向 */
+    layout?: CardLayout;
+    /** 操作按钮区域，水平模式在右侧，垂直模式在底部 */
+    actions?: React.ReactNode[];
+    /** 水平模式下，操作按钮的位置 */
+    actionsPosition?: ActionsPosition;
+    /** 垂直模式下，右上角绝对定位展示的组件 */
+    corner?: React.ReactNode;
+    /** 子内容 */
+    children?: React.ReactNode;
+    /** 选中状态 */
+    selected?: boolean;
+    /** 禁用状态 */
+    disabled?: boolean;
+    /** 是否可悬停 */
+    hoverable?: boolean;
+    /** 点击事件 */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /** 自定义样式 */
+    styles?: CardStyles;
+    /**
+     * 选中时的样式类型
+     * - none: 无样式
+     * - outlined: 边框高亮
+     * - outlined-bold: 边框高亮 + 加粗（使用 outline 实现，不影响布局）
+     * - filled: 填充背景色
+     */
+    selectedType?: SelectedType;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+}
+declare const Card: React.FC<CardProps>;
+export default Card;

package/lib/pro/Selector/components/Card/types.d.ts

@@ -0,0 +1 @@
+export type { CardVariant, CardLayout, SelectedType, ActionsPosition, CardStyles, CardStyleProps, CardProps, } from './index';

package/lib/pro/Selector/components/Indicator/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import './index.less';
+export interface IndicatorProps {
+    mode?: 'single' | 'multiple';
+    variant?: 'outlined' | 'filled';
+    defaultChecked?: boolean;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    className?: string;
+    styles?: {
+        container?: React.CSSProperties;
+        indicator?: React.CSSProperties;
+        content?: React.CSSProperties;
+    };
+    children?: React.ReactNode;
+    size?: 'small' | 'middle' | 'large' | number;
+}
+declare const Indicator: React.FC<IndicatorProps>;
+export default Indicator;