@pisell/private-materials 3.4.81 → 3.4.82

package/lib/pro/Login2.0/steps/EmailLinkAlreadyUsed.d.ts

@@ -1,7 +1,10 @@
-/// <reference types="react" />
+/**
+ * 邮件链接已使用页面 - 对应图3
+ */
+import React from 'react';
 export interface EmailLinkAlreadyUsedProps {
     /** 跳转到登录页回调 */
     onGoToLogin?: () => void;
 }
-declare function EmailLinkAlreadyUsed({ onGoToLogin }: EmailLinkAlreadyUsedProps): JSX.Element;
+declare function EmailLinkAlreadyUsed({ onGoToLogin }: EmailLinkAlreadyUsedProps): React.JSX.Element;
 export default EmailLinkAlreadyUsed;

package/lib/pro/Login2.0/steps/EmailLinkExpired.d.ts

@@ -1,9 +1,12 @@
-/// <reference types="react" />
+/**
+ * 邮件链接已过期页面 - 对应图2
+ */
+import React from 'react';
 export interface EmailLinkExpiredProps {
     /** 返回注册页回调 */
     onBackToRegistration?: () => void;
     /** 跳转到登录页回调 */
     onGoToLogin?: () => void;
 }
-declare function EmailLinkExpired({ onBackToRegistration, onGoToLogin }: EmailLinkExpiredProps): JSX.Element;
+declare function EmailLinkExpired({ onBackToRegistration, onGoToLogin }: EmailLinkExpiredProps): React.JSX.Element;
 export default EmailLinkExpired;

package/lib/pro/Login2.0/steps/SetPassword.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**
+ * 设置密码页面（对应图5）
+ */
+import React from 'react';
 import type { RegisterFlowData } from '../shared/registerFlow';
 import { PasswordRuleConfig } from '../hooks/usePasswordValidationRules';
 export interface SetPasswordProps {
@@ -15,5 +18,5 @@ export interface SetPasswordProps {
     /** 场景类型：create 表示注册场景，reset 表示修改密码场景 */
     scenario?: 'create' | 'reset';
 }
-declare function SetPassword({ flowData, onSubmit, onBack, loading, passwordRules, scenario, }: SetPasswordProps): JSX.Element;
+declare function SetPassword({ flowData, onSubmit, onBack, loading, passwordRules, scenario, }: SetPasswordProps): React.JSX.Element;
 export default SetPassword;

package/lib/pro/Login2.0/steps/VerificationSuccess.d.ts

@@ -1,8 +1,11 @@
-/// <reference types="react" />
+/**
+ * 验证成功页面（对应图4）
+ */
+import React from 'react';
 import type { RegisterFlowData } from '../shared/registerFlow';
 export interface VerificationSuccessProps {
     /** 流程数据 */
     flowData: RegisterFlowData;
 }
-declare function VerificationSuccess({ flowData }: VerificationSuccessProps): JSX.Element;
+declare function VerificationSuccess({ flowData }: VerificationSuccessProps): React.JSX.Element;
 export default VerificationSuccess;

package/lib/pro/Login2.0/steps/VerifyingEmailLink.d.ts

@@ -1,7 +1,10 @@
-/// <reference types="react" />
+/**
+ * 验证邮件链接中（Loading 状态）- 对应图1
+ */
+import React from 'react';
 export interface VerifyingEmailLinkProps {
     /** 加载提示文本（可选，不传则使用国际化默认文本） */
     loadingText?: string;
 }
-declare function VerifyingEmailLink({ loadingText }: VerifyingEmailLinkProps): JSX.Element;
+declare function VerifyingEmailLink({ loadingText }: VerifyingEmailLinkProps): React.JSX.Element;
 export default VerifyingEmailLink;

package/lib/pro/Login2.0/steps/WaitEmailLink.d.ts

@@ -1,4 +1,7 @@
-/// <reference types="react" />
+/**
+ * 等待邮件链接验证页面（对应图1）
+ */
+import React from 'react';
 import type { RegisterFlowData, VerificationMethod } from '../shared/registerFlow';
 export interface WaitEmailLinkProps {
     /** 流程数据 */
@@ -14,5 +17,5 @@ export interface WaitEmailLinkProps {
     /** 验证方式 */
     verificationMethod?: VerificationMethod;
 }
-declare function WaitEmailLink({ flowData, onResend, onBack, onEditEmail, countdown, verificationMethod, }: WaitEmailLinkProps): JSX.Element;
+declare function WaitEmailLink({ flowData, onResend, onBack, onEditEmail, countdown, verificationMethod, }: WaitEmailLinkProps): React.JSX.Element;
 export default WaitEmailLink;

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

@@ -30,6 +30,11 @@ export interface NumericStepperProps {
     onChange?: (value: number) => void;
     /** 自定义类名 */
     className?: string;
+    theme?: {
+        token?: {
+            colorPrimary?: string;
+        };
+    };
     /** 自定义样式 */
     styles?: {
         container?: React.CSSProperties;

package/lib/pro/NumericStepper/index.js

@@ -37,6 +37,7 @@ var import_react = require("react");
 var import_classnames = __toESM(require("classnames"));
 var import_utils = require("@pisell/utils");
 var import_keyboards = require("../keyboards");
+var import_useThemeTokens = __toESM(require("../../hooks/useThemeTokens"));
 var import_index = require("./index.less");
 var NumericStepper = ({
   value,
@@ -55,13 +56,15 @@ var NumericStepper = ({
   horizontalPadding = 0,
   variant = "separated",
   enableInput = true,
-  displayMaxWidth
+  displayMaxWidth,
+  theme
 }) => {
   const [open, setOpen] = (0, import_react.useState)(false);
   const [internalValue, setInternalValue] = (0, import_react.useState)(
     value !== void 0 ? value : defaultValue
   );
   const _isMobile = (0, import_react.useMemo)(() => (0, import_utils.isMobile)(), [import_utils.isMobile]);
+  const { colorPrimary } = (0, import_useThemeTokens.default)(theme);
   const [tempValue, setTempValue] = (0, import_react.useState)("");
   const currentValue = value !== void 0 ? value : internalValue;
   (0, import_react.useEffect)(() => {
@@ -192,7 +195,9 @@ var NumericStepper = ({
     if (isPlusOnly) {
       return null;
     }
-    const displayWrapperStyle = variant === "capsule" && displayMaxWidth ? { maxWidth: typeof displayMaxWidth === "number" ? `${displayMaxWidth}px` : displayMaxWidth } : {};
+    const displayWrapperStyle = variant === "capsule" && displayMaxWidth ? {
+      maxWidth: typeof displayMaxWidth === "number" ? `${displayMaxWidth}px` : displayMaxWidth
+    } : {};
     const displayElement = /* @__PURE__ */ React.createElement(
       "span",
       {
@@ -295,7 +300,10 @@ var NumericStepper = ({
     "div",
     {
       className: stepperClasses,
-      style: styles == null ? void 0 : styles.container,
+      style: {
+        ...(styles == null ? void 0 : styles.container) || {},
+        ["--color-primary"]: colorPrimary
+      },
       onClick: (e) => e.stopPropagation()
     },
     _minus,

package/lib/pro/NumericStepper/index.less

@@ -1,7 +1,5 @@
 // ========== 变量定义 ==========
-@primary-color: #7f56d9;
-@primary-hover: #6b46c1;
-@primary-active: #553c9a;
+@primary-color: var(--color-primary, #5d3f9f);
 
 @text-color: #101828;
 @text-secondary: #344054;
@@ -77,13 +75,7 @@
     align-items: center;
     display: flex;
     height: 100%;
-
-    &:hover .numeric-stepper-button:not(.numeric-stepper-button-disabled) {
-      background-color: @primary-hover;
-    }
-
     &:active .numeric-stepper-button:not(.numeric-stepper-button-disabled) {
-      background-color: @primary-active;
       transform: scale(0.95);
     }
 

package/lib/pro/Selector/BatchSelectorDemo.js

@@ -49,22 +49,21 @@ var dataSource = [
       { id: 1, title: "汉堡", value: "burger" },
       { id: 2, title: "披萨", value: "pizza" }
     ],
-    grid: {
-      columns: 2,
-      gutter: 16,
-      colConfig: {
-        span: 3
-      }
-    },
     ruleConfig: {
       required: 1,
       autoValidate: true
     },
     titleProps: {
-      renderExtra: () => /* @__PURE__ */ import_react.default.createElement("div", { style: {
-        flex: 1,
-        textAlign: "right"
-      } }, "额外内容")
+      renderExtra: () => /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            textAlign: "right"
+          }
+        },
+        "额外内容"
+      )
     }
   },
   {
@@ -124,10 +123,6 @@ var dataSource = [
         cover: "https://file.mypisell-dev.com/pisel/image/9/52fe9ca4233877f2c06865d27b9fb7912022_12_01_13_32_47_147_00076174656__1080_1073__.jpeg"
       }
     ],
-    grid: {
-      columns: 3,
-      gutter: 16
-    },
     variant: "card",
     itemProps: {
       layout: "vertical",
@@ -252,7 +247,8 @@ var BatchSelectorDemo = () => {
         padding: "0",
         margin: "0 auto",
         height: "100vh",
-        overflow: "auto"
+        overflow: "auto",
+        "--theme-color": "#5d3f9f"
       },
       ref: containerRef
     },
@@ -632,9 +628,7 @@ var BatchSelectorDemo = () => {
         {
           type: "expr",
           when: {
-            and: [
-              { groupId: "31", op: "in", value: ["single", "double"] }
-            ]
+            and: [{ groupId: "31", op: "in", value: ["single", "double"] }]
           },
           then: [
             {

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

@@ -10,5 +10,5 @@ export interface IItemProps {
     values: any;
     children?: React.ReactNode;
 }
-declare const Item: (props: IItemProps) => JSX.Element;
+declare const Item: (props: IItemProps) => React.JSX.Element;
 export default Item;

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

@@ -3,7 +3,7 @@ import { ItemLayout, ItemProps, PresetConfig, SelectorProps, SelectorVariant } f
 import './selector.less';
 export declare const SelectorContext: React.Context<{
     disabled?: boolean | undefined;
-    mode?: "multiple" | "single" | undefined;
+    mode?: "single" | "multiple" | undefined;
     itemLayout?: ItemLayout | undefined;
     valueType?: "object" | "primitive" | undefined;
     variant?: SelectorVariant | undefined;

package/lib/pro/Selector/Selector.js

@@ -45,6 +45,7 @@ var import_NumericStepper = __toESM(require("../NumericStepper"));
 var import_useSelectionController = __toESM(require("./hooks/useSelectionController"));
 var import_usePresetProps = __toESM(require("./hooks/usePresetProps"));
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_useThemeTokens = __toESM(require("../../hooks/useThemeTokens"));
 var import_Item = __toESM(require("./Item"));
 var import_selector = require("./selector.less");
 var ATag = import_antd.Tag;
@@ -73,6 +74,7 @@ var Selector = (0, import_react.forwardRef)((props, ref) => {
     valueType = "primitive",
     variant = "default"
   } = props;
+  const { colorPrimary, colorPrimaryBg } = (0, import_useThemeTokens.default)(props.theme);
   const context = (0, import_useEngineContext.default)();
   import_utils.locales.init(
     import_locales.default,
@@ -328,7 +330,11 @@ var Selector = (0, import_react.forwardRef)((props, ref) => {
     {
       id: `pisell-pro-selector-${props.id}`,
       className: (0, import_classnames.default)("pisell-pro-selector", props.className),
-      style: props.style
+      style: {
+        ...props.style || {},
+        ["--color-primary"]: colorPrimary,
+        ["--color-primary-bg"]: colorPrimaryBg
+      }
     },
     renderHeader(),
     /* @__PURE__ */ import_react.default.createElement(

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SelectionValue, SelectorGroupProps } from './types';
+import type { SelectionValue, SelectorGroupProps } from './types';
 import './selectorGroup.less';
 export declare type SelectorGroupRef = {
     getValues: (includeHidden?: boolean) => Record<string, SelectionValue>;

package/lib/pro/Selector/SelectorGroup.js

@@ -38,6 +38,7 @@ var import_lodash = require("lodash");
 var import_utils = require("@pisell/utils");
 var import_locales = __toESM(require("./locales"));
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
+var import_useThemeTokens = __toESM(require("../../hooks/useThemeTokens"));
 var import_Selector = __toESM(require("./Selector"));
 var import_utils2 = require("./utils");
 var import_IntersectionObserver = require("./components/IntersectionObserver");
@@ -59,6 +60,7 @@ var SelectorGroup = (0, import_react.forwardRef)(
       preserve: preserveDefault = false,
       style
     } = props;
+    const { colorPrimary, colorPrimaryBg } = (0, import_useThemeTokens.default)(props.theme);
     const [activeIndex, setActiveIndex] = (0, import_react.useState)(-1);
     const isManualChangeIndexRef = (0, import_react.useRef)(false);
     const containerRef = (0, import_react.useRef)(null);
@@ -511,7 +513,11 @@ var SelectorGroup = (0, import_react.forwardRef)(
           `pisell-batch-selector-${_uniqueId}`
         ),
         ref: containerRef,
-        style
+        style: {
+          ...style || {},
+          ["--color-primary"]: colorPrimary,
+          ["--color-primary-bg"]: colorPrimaryBg
+        }
       },
       renderTabs(),
       /* @__PURE__ */ import_react.default.createElement(

package/lib/pro/Selector/components/Card/index.js

@@ -54,13 +54,16 @@ var Card = ({
   className,
   style
 }) => {
-  const styleProps = {
-    selected,
-    disabled,
-    hoverable,
-    variant,
-    layout
-  };
+  const styleProps = (0, import_react.useMemo)(
+    () => ({
+      selected,
+      disabled,
+      hoverable,
+      variant,
+      layout
+    }),
+    [selected, disabled, hoverable, variant, layout]
+  );
   const containerStyle = (0, import_react.useMemo)(() => {
     if (!(styles == null ? void 0 : styles.container)) return style;
     const customStyle = typeof styles.container === "function" ? styles.container(styleProps) : styles.container;

package/lib/pro/Selector/components/Card/index.less

@@ -1,7 +1,7 @@
 /* Card组件样式 */
 .pisell-pro-card {
   position: relative;
-  display: grid;
+  display: flex;
   border-radius: 8px;
   transition: all 0.2s;
   box-sizing: border-box;
@@ -22,6 +22,7 @@
   /* 布局样式 */
   &-vertical {
     border-radius: 12px;
+    flex-direction: column;
 
     .pisell-pro-card_content {
       flex: 1;
@@ -32,6 +33,7 @@
       align-items: center;
       justify-content: center;
       margin: 0;
+      padding: 0;
       height: 64px;
     }
 
@@ -42,12 +44,18 @@
   }
 
   &-horizontal {
-    grid-template-columns: 1fr auto;
+    flex-direction: row;
     align-items: center;
     gap: 10px;
 
     &.pisell-pro-card-actions-left {
-      grid-template-columns: auto 1fr;
+      .pisell-pro-card_actions {
+        order: 0;
+      }
+
+      .pisell-pro-card_content {
+        order: 1;
+      }
     }
 
     .pisell-pro-card_content {
@@ -61,6 +69,7 @@
       margin: 0;
       padding: 0;
       height: 100%;
+      order: 1;
     }
 
     .pisell-pro-card_actions-item {
@@ -94,34 +103,34 @@
   /* 选中状态 - outlined类型 */
   &-selected&-selected-outlined {
     &.pisell-pro-card-outlined {
-      border-color: #7f56d9;
-      background-color: #f9f5ff;
+      border-color: var(--color-primary, #5d3f9f);
+      background-color: var(--color-primary-bg, #f9f5ff);
     }
 
     &.pisell-pro-card-borderless {
-      border-color: #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
     }
     .pisell-pro-card_content {
-      color: #7f56d9;
+      color: var(--color-primary, #5d3f9f);
     }
   }
 
   /* 选中状态 - outlined-bold类型（加粗边框，使用 outline 实现不影响布局） */
   &-selected&-selected-outlined-bold {
     &.pisell-pro-card-outlined {
-      border-color: #7f56d9;
-      background-color: #f9f5ff;
-      outline: 2px solid #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
+      background-color: var(--color-primary-bg, #f9f5ff);
+      outline: 2px solid var(--color-primary, #5d3f9f);
       outline-offset: -2px;
     }
 
     &.pisell-pro-card-borderless {
-      border-color: #7f56d9;
-      outline: 2px solid #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
+      outline: 2px solid var(--color-primary, #5d3f9f);
       outline-offset: -2px;
     }
     .pisell-pro-card_content {
-      color: #7f56d9;
+      color: var(--color-primary, #5d3f9f);
     }
   }
 
@@ -129,9 +138,9 @@
   &-selected&-selected-filled {
     &.pisell-pro-card-outlined,
     &.pisell-pro-card-borderless {
-      background-color: #7f56d9;
+      background-color: var(--color-primary, #5d3f9f);
       color: #ffffff;
-      border-color: #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
 
       .pisell-pro-card_content {
         color: #ffffff;

package/lib/pro/Selector/components/Indicator/index.js

@@ -115,7 +115,7 @@ var Indicator = (props) => {
       )
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement("label", { className: classes, style: styles.container }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("label", { className: classes, style: styles == null ? void 0 : styles.container }, /* @__PURE__ */ import_react.default.createElement(
     "input",
     {
       type: mode === "single" ? "radio" : "checkbox",

package/lib/pro/Selector/components/Indicator/index.less

@@ -26,7 +26,6 @@
     position: relative;
     box-sizing: border-box;
     border: 1px solid #d0d5dd;
-    background-color: #ffffff;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -55,38 +54,39 @@
   }
 
   &-single.pisell-pro-indicator-outlined.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #ffffff;
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary-bg, transparent);
   }
 
   &-single.pisell-pro-indicator-outlined &-dot {
     width: 45%;
     height: 45%;
-    background-color: #7f56d9;
+    background-color: var(--color-primary, #5d3f9f);
     border-radius: 50%;
   }
 
   &-single.pisell-pro-indicator-filled.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #7f56d9;
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary, #5d3f9f);
   }
 
   &-single.pisell-pro-indicator-filled &-check-icon {
     color: #ffffff;
   }
 
-  &-multiple.pisell-pro-indicator-outlined.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #ffffff;
+  &-multiple.pisell-pro-indicator-outlined.pisell-pro-indicator-checked
+    &-inner {
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary-bg, transparent);
   }
 
   &-multiple.pisell-pro-indicator-outlined &-check-icon {
-    color: #7f56d9;
+    color: var(--color-primary, #5d3f9f);
   }
 
   &-multiple.pisell-pro-indicator-filled.pisell-pro-indicator-checked &-inner {
-    border-color: #7f56d9;
-    background-color: #7f56d9;
+    border-color: var(--color-primary, #5d3f9f);
+    background-color: var(--color-primary, #5d3f9f);
   }
 
   &-multiple.pisell-pro-indicator-filled &-check-icon {

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

@@ -1,6 +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 };
+export type { MediaProps, MediaStyleProps, MediaShape, MediaSize, MediaCoverType, };
 declare const Media: React.FC<MediaProps>;
 export default Media;

package/lib/pro/Selector/components/Media/index.js

@@ -164,10 +164,13 @@ var Media = ({
   const renderIndicator = () => {
     if (!showIndicator || !indicator || !selected) return null;
     if (import_react.default.isValidElement(indicator)) {
-      const clonedIndicator = import_react.default.cloneElement(indicator, {
-        size: indicatorSize,
-        variant: "filled"
-      });
+      const clonedIndicator = import_react.default.cloneElement(
+        indicator,
+        {
+          size: indicatorSize,
+          variant: "filled"
+        }
+      );
       return /* @__PURE__ */ import_react.default.createElement(
         "div",
         {

package/lib/pro/Selector/components/Media/index.less

@@ -80,7 +80,7 @@
   &-selected {
     .pisell-selector_media-cover {
       border-width: 2px;
-      border-color: #7f56d9;
+      border-color: var(--color-primary, #5d3f9f);
     }
 
     .pisell-selector_media-label {

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

@@ -1,2 +1,3 @@
-declare const SelectorDemo: () => JSX.Element;
+import React from 'react';
+declare const SelectorDemo: () => React.JSX.Element;
 export default SelectorDemo;

package/lib/pro/Selector/selectorGroup.less

@@ -1,6 +1,14 @@
 .pisell-batch-selector {
   .pisell-product-select__tabs-wrapper {
     padding: 16px 0;
+
+    .pisell-tabstruct-item--selected {
+      background-color: var(--color-primary, #5d3f9f);
+    }
+
+    .pisell-tabstruct-selection {
+      background-color: var(--color-primary, #5d3f9f);
+    }
   }
 
   &__content {
@@ -13,4 +21,4 @@
       padding-top: 16px;
     }
   }
-}
+}

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

@@ -158,6 +158,11 @@ export declare type HeaderProps = {
 };
 export interface SelectorProps<T = OptionKey> extends GroupItem {
     className?: string;
+    theme?: {
+        token?: {
+            colorPrimary?: string;
+        };
+    };
     value?: SelectionValue<T>;
     defaultValue?: SelectionValue<T>;
     onChange?: (value: SelectionValue<T>) => void;
@@ -201,6 +206,11 @@ export interface SelectorGroupProps {
     dataSource: GroupItem[];
     defaultValue?: Record<string, SelectionValue>;
     linkageRules?: ExprRule[] | Record<string, any>;
+    theme?: {
+        token?: {
+            colorPrimary?: string;
+        };
+    };
     onChange?: (values: Record<string, SelectionValue>) => void;
     preserve?: boolean;
     tabProps?: {

package/lib/pro/keyboards/numberKeyboard/index.d.ts

@@ -10,7 +10,7 @@ declare const NumberKeyboardBase: React.FC<NumberKeyboardBaseProps>;
  * NumberKeyboard - 数字输入键盘
  * 支持基础形式展示、popover 形态或 modal 形态
  */
-declare const NumberKeyboard: (props: NumberKeyboardProps) => JSX.Element | null;
+declare const NumberKeyboard: (props: NumberKeyboardProps) => React.JSX.Element | null;
 export default NumberKeyboard;
 export { NumberKeyboardBase };
 export type { NumberKeyboardProps, NumberKeyboardBaseProps, NumberKeyboardMode, } from './types';

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

@@ -24,5 +24,5 @@ interface NumberKeyboardProps {
     /** 输入框的样式 */
     inputStyle?: React.CSSProperties;
 }
-declare const NumberKeyboard: (props: NumberKeyboardProps) => JSX.Element;
+declare const NumberKeyboard: (props: NumberKeyboardProps) => React.JSX.Element;
 export default NumberKeyboard;