@pisell/private-materials 6.8.84 → 6.8.86

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

@@ -0,0 +1,49 @@
+/**
+ * WebPosLogin 组件国际化文本
+ * @description 支持 en、zh-CN、zh-HK 三种语言
+ */
+declare const _default: {
+    en: {
+        'webpos-login-search': string;
+        'webpos-login-back': string;
+        'webpos-login-last-used': string;
+        'webpos-login-select-store-title': string;
+        'webpos-login-select-store-empty': string;
+        'webpos-login-change-account': string;
+        'webpos-login-store-data-missing': string;
+        'webpos-login-select-device-title': string;
+        'webpos-login-select-device-empty': string;
+        'webpos-login-change-store': string;
+        'webpos-login-device-not-in-use': string;
+        'webpos-login-device-currently-used-by': string;
+    };
+    'zh-CN': {
+        'webpos-login-search': string;
+        'webpos-login-back': string;
+        'webpos-login-last-used': string;
+        'webpos-login-select-store-title': string;
+        'webpos-login-select-store-empty': string;
+        'webpos-login-change-account': string;
+        'webpos-login-store-data-missing': string;
+        'webpos-login-select-device-title': string;
+        'webpos-login-select-device-empty': string;
+        'webpos-login-change-store': string;
+        'webpos-login-device-not-in-use': string;
+        'webpos-login-device-currently-used-by': string;
+    };
+    'zh-HK': {
+        'webpos-login-search': string;
+        'webpos-login-back': string;
+        'webpos-login-last-used': string;
+        'webpos-login-select-store-title': string;
+        'webpos-login-select-store-empty': string;
+        'webpos-login-change-account': string;
+        'webpos-login-store-data-missing': string;
+        'webpos-login-select-device-title': string;
+        'webpos-login-select-device-empty': string;
+        'webpos-login-change-store': string;
+        'webpos-login-device-not-in-use': string;
+        'webpos-login-device-currently-used-by': string;
+    };
+};
+export default _default;

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/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;

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

@@ -0,0 +1,105 @@
+/**
+ * IntersectionObserver 组件
+ * 用于监听一组 DOM 元素的可见性状态，并获取第一个可见元素的索引。
+ * @example
+ * function App() {
+ *   return (
+ *     <IntersectionObserverProvider
+ *       onFirstVisibleIndexChange={(index) => {
+ *         console.log('第一个可见元素的索引:', index);
+ *       }}
+ *       rootMargin="0px 0px -10% 0px" // 自定义根边距
+ *     >
+ *       <ScrollContainer>
+ *         {items.map((item, index) => (
+ *           <IntersectionItem key={item.id} index={index}>
+ *             <ItemComponent data={item} />
+ *           </IntersectionItem>
+ *         ))}
+ *       </ScrollContainer>
+ *     </IntersectionObserverProvider>
+ *   );
+ * }
+ */
+import React from 'react';
+import type { ReactNode, CSSProperties } from 'react';
+declare global {
+    interface Window {
+        IntersectionObserver: typeof IntersectionObserver;
+    }
+}
+/**
+ * 元素信息接口
+ */
+interface ElementInfo {
+    element: HTMLElement;
+    index: number;
+    isVisible: boolean;
+}
+/**
+ * IntersectionObserver 上下文值接口
+ */
+interface IntersectionObserverContextValue {
+    /** 是否已初始化 */
+    initialized: boolean;
+    /** 注册元素 */
+    registerElement: (element: HTMLElement, index: number) => void;
+    /** 注销元素 */
+    unregisterElement: (element: HTMLElement) => void;
+    /** 批量注册元素 */
+    registerElements: (elements: Array<{
+        element: HTMLElement;
+        index: number;
+    }>) => void;
+    /** 清除所有注册的元素 */
+    clearAll: () => void;
+    /** 第一个可见元素的索引，-1 表示没有可见元素 */
+    firstVisibleIndex: number;
+}
+/**
+ * IntersectionObserver Provider 属性接口
+ */
+interface IntersectionObserverProps {
+    children: ReactNode;
+    /** 根容器，默认为视口 */
+    root?: Element | null;
+    /** 根边距 */
+    rootMargin?: string;
+    /** 阈值 */
+    threshold?: number | number[];
+    /** 第一个可见元素索引变化时的回调 */
+    onFirstVisibleIndexChange?: (index: number) => void;
+    /** 是否禁用组件，禁用后不会创建 IntersectionObserver */
+    disabled?: boolean;
+}
+/**
+ * IntersectionItem 组件属性接口
+ */
+interface IntersectionItemProps {
+    /** 元素索引 */
+    index: number;
+    /** 子元素 */
+    children?: ReactNode;
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: CSSProperties;
+}
+/**
+ * IntersectionObserver 上下文
+ */
+declare const IntersectionObserverContext: React.Context<IntersectionObserverContextValue>;
+export declare const IntersectionObserverProvider: React.FC<IntersectionObserverProps>;
+/**
+ * 使用 IntersectionObserver 的 Hook
+ * @returns {Object} 包含注册元素函数和第一个可见元素索引的对象
+ */
+export declare const useIntersectionObserver: () => IntersectionObserverContextValue;
+/**
+ * IntersectionItem 组件
+ * 自动注册元素到 IntersectionObserver 中
+ */
+export declare const IntersectionItem: React.FC<IntersectionItemProps>;
+export type { IntersectionObserverProps, IntersectionItemProps, IntersectionObserverContextValue, ElementInfo, };
+export { IntersectionObserverContext, };
+export default IntersectionObserverProvider;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { LayoutConfig } from '../../types';
+import './index.less';
+interface LayoutContainerProps {
+    className: string;
+    config: LayoutConfig | null;
+    children: React.ReactNode[];
+}
+/**
+ * 统一的布局容器组件
+ *
+ * 支持三种布局模式：
+ * 1. 响应式布局（推荐）：通过 responsive 配置，使用 ResizeObserver 实现容器级响应式
+ * 2. Custom 布局：通过 className 使用预设样式
+ * 3. Ant Design Grid 布局：基础的栅格布局，用于简单场景
+ */
+declare function LayoutContainer({ className: containerClassName, config, children, }: LayoutContainerProps): React.ReactElement | null;
+export default LayoutContainer;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import './index.less';
+import type { MediaProps, MediaStyleProps, MediaShape, MediaSize, MediaCoverType } from './types';
+export type { MediaProps, MediaStyleProps, MediaShape, MediaSize, MediaCoverType };
+declare const Media: React.FC<MediaProps>;
+export default Media;