@pisell/materials 6.8.3 → 6.8.4

package/es/components/walletCard/index.less

@@ -9,6 +9,36 @@
     width: 100%;
     display: flex;
     cursor: pointer;
+    position: relative;
+  }
+
+  .pisell-wallet-add-holder-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    z-index: 9;
+
+    &-text {
+      color: #fff;
+      text-align: center;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+      white-space: pre-line;
+    }
+
+    &-button {
+      font-weight: bold;
+    }
   }
 
   // 卡片内容区域
@@ -35,6 +65,12 @@
           color: #fff;
         }
       }
+
+      .pisell-wallet-card-header-holder-name {
+        color: var(--Gray-900, #101828);
+        border: 1px solid var(--Gray-100, #f2f4f7);
+        background: var(--Gray-100, #f2f4f7);
+      }
     }
 
     // 亮色主题
@@ -54,6 +90,12 @@
           color: #101828;
         }
       }
+
+      .pisell-wallet-card-header-holder-name {
+        color: #fff;
+        border: 1px solid var(--Gray-600, #475467);
+        background: var(--Gray-600, #475467);
+      }
     }
   }
 
@@ -66,6 +108,25 @@
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
+    min-height: 100px;
+
+    .pisell-wallet-card-header-holder-name {
+      cursor: pointer;
+      display: inline-block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      padding: 2px 8px;
+      border-radius: 16px;
+      height: 22px;
+      min-width: 50px;
+      text-align: center;
+      font-size: 12px;
+      line-height: 16px;
+      max-width: 100%;
+      font-style: normal;
+      font-weight: 500;
+    }
 
     // 头部左侧
     .pisell-wallet-card-header-left {
@@ -78,7 +139,7 @@
         display: flex;
         align-items: center;
         gap: 10px;
-        margin-bottom: 8px;
+        margin-bottom: 4px;
 
         // 卡片名称文本
         .pisell-wallet-card-header-level-text {
@@ -157,7 +218,7 @@
 
   // 卡片内容列表
   .pisell-wallet-card-list {
-    margin-top: 30px;
+    margin-top: unset;
     height: 50px;
     box-sizing: border-box;
     display: flex;

package/es/index.d.ts

@@ -96,7 +96,7 @@ export { default as PisellStatisticList } from './components/pisellStatisticList
 export { default as PisellSteps } from './components/PisellSteps';
 export type { PisellStepsProps, PisellStepItem, } from './components/PisellSteps/types';
 export { default as PisellProcedure } from './components/PisellProcedure';
-export type { PisellProcedureProps, ProcedureHeaderProps, ProcedureBodyProps, ProcedureFooterProps, } from './components/PisellProcedure/types';
+export type { PisellProcedureProps, PisellProcedureRef, ProcedureHeaderProps, ProcedureBodyProps, ProcedureFooterProps, } from './components/PisellProcedure/types';
 export { default as PisellTags } from './components/pisellTags';
 export { default as PisellText } from './components/pisellText';
 export { default as PisellToast, useToast } from './components/pisellToast';

package/es/locales/en-US.d.ts

@@ -287,6 +287,8 @@ declare const _default: {
     'pisell-wallet-pass-card-status-lastPayment': string;
     'pisell-wallet-pass-card-reset': string;
     'pisell-wallet-pass-card-done': string;
+    'pisell2.wallet-card.add-holder-tip': string;
+    'pisell2.wallet-card.add-holder-button-text': string;
     'pisell-camera-no-camera-accessible': string;
     'pisell-camera-permission-denied': string;
     'pisell-camera-switch-camera': string;
@@ -315,5 +317,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/es/locales/en-US.js

@@ -353,6 +353,8 @@ export default {
   'pisell-wallet-pass-card-status-lastPayment': 'Last Payment',
   'pisell-wallet-pass-card-reset': 'Reset',
   'pisell-wallet-pass-card-done': 'Done',
+  'pisell2.wallet-card.add-holder-tip': 'To ensure your benefits, please\r\nassign a holder to activate this card.',
+  'pisell2.wallet-card.add-holder-button-text': 'Set Holder',
   // 相机组件
   'pisell-camera-no-camera-accessible': 'No camera accessible',
   'pisell-camera-permission-denied': 'Permission denied',
@@ -388,5 +390,6 @@ export default {
   'pisell-procedure-header-close-confirm-title': 'Confirm exit?',
   'pisell-procedure-header-close-confirm-desc': 'All entered information will be lost. Are you sure you want to exit?',
   'pisell-procedure-header-close-confirm-no': 'Continue',
-  'pisell-procedure-header-close-confirm-yes': 'Exit'
+  'pisell-procedure-header-close-confirm-yes': 'Exit',
+  'pisell-procedure-footer-more': 'More'
 };

package/es/locales/zh-CN.d.ts

@@ -282,6 +282,8 @@ declare const _default: {
     'pisell-wallet-pass-card-status-lastPayment': string;
     'pisell-wallet-pass-card-reset': string;
     'pisell-wallet-pass-card-done': string;
+    'pisell2.wallet-card.add-holder-tip': string;
+    'pisell2.wallet-card.add-holder-button-text': string;
     'pisell-camera-no-camera-accessible': string;
     'pisell-camera-permission-denied': string;
     'pisell-camera-switch-camera': string;
@@ -310,5 +312,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/es/locales/zh-CN.js

@@ -344,6 +344,8 @@ export default {
   'pisell-wallet-pass-card-status-lastPayment': '上次结算',
   'pisell-wallet-pass-card-reset': '清空',
   'pisell-wallet-pass-card-done': '保存',
+  'pisell2.wallet-card.add-holder-tip': '为确保您的权益，此卡\r\n需指定使用人后方可激活使用。',
+  'pisell2.wallet-card.add-holder-button-text': '添加持有人',
   // 相机组件
   'pisell-camera-no-camera-accessible': '没有找到摄像头',
   'pisell-camera-permission-denied': '没有权限使用摄像头',
@@ -379,5 +381,6 @@ export default {
   'pisell-procedure-header-close-confirm-title': '确认退出？',
   'pisell-procedure-header-close-confirm-desc': '退出后将丢失所有已填写的信息，确定要退出吗？',
   'pisell-procedure-header-close-confirm-no': '继续',
-  'pisell-procedure-header-close-confirm-yes': '退出'
+  'pisell-procedure-header-close-confirm-yes': '退出',
+  'pisell-procedure-footer-more': '更多'
 };

package/es/locales/zh-TW.d.ts

@@ -282,6 +282,8 @@ declare const _default: {
     'pisell-wallet-pass-card-status-lastPayment': string;
     'pisell-wallet-pass-card-reset': string;
     'pisell-wallet-pass-card-done': string;
+    'pisell2.wallet-card.add-holder-tip': string;
+    'pisell2.wallet-card.add-holder-button-text': string;
     'pisell-camera-no-camera-accessible': string;
     'pisell-camera-permission-denied': string;
     'pisell-camera-switch-camera': string;
@@ -310,5 +312,6 @@ declare const _default: {
     'pisell-procedure-header-close-confirm-desc': string;
     'pisell-procedure-header-close-confirm-no': string;
     'pisell-procedure-header-close-confirm-yes': string;
+    'pisell-procedure-footer-more': string;
 };
 export default _default;

package/es/locales/zh-TW.js

@@ -345,6 +345,8 @@ export default {
   'pisell-wallet-pass-card-status-lastPayment': '上次結算',
   'pisell-wallet-pass-card-reset': '清空',
   'pisell-wallet-pass-card-done': '保存',
+  'pisell2.wallet-card.add-holder-tip': '為確保您的權益，此卡\r\n需指定使用人後方可激活使用。',
+  'pisell2.wallet-card.add-holder-button-text': '添加使用人',
   // 相机组件
   'pisell-camera-no-camera-accessible': '沒有找到攝像頭',
   'pisell-camera-permission-denied': '沒有權限使用攝像頭',
@@ -380,5 +382,6 @@ export default {
   'pisell-procedure-header-close-confirm-title': '確認退出？',
   'pisell-procedure-header-close-confirm-desc': '退出後將丟失所有已填寫的信息，確定要退出嗎？',
   'pisell-procedure-header-close-confirm-no': '繼續',
-  'pisell-procedure-header-close-confirm-yes': '退出'
+  'pisell-procedure-header-close-confirm-yes': '退出',
+  'pisell-procedure-footer-more': '更多'
 };

package/es/utils/hoc.d.ts

@@ -1,17 +1,17 @@
-import React, { ComponentType } from 'react';
+import { ComponentType } from 'react';
 /**
  * 简单包装，不做任何处理
  * 部分组件ref比较特殊，包一层会解决这个问题
  */
-export declare function withWrap<T extends ComponentType<any>>(Comp: T): (props: any) => React.JSX.Element;
+export declare function withWrap<T extends ComponentType<any>>(Comp: T): (props: any) => JSX.Element;
 /**
  * 某些组件会用React.Children.only检查子节点
  * 需要做处理避免报错
  */
-export declare function withSingleChild(Comp: ComponentType<any>, needsConvert?: string[]): (props: any) => React.JSX.Element;
-export declare function withSingleFunctionChild(Comp: ComponentType<any>): (props: any) => React.JSX.Element;
+export declare function withSingleChild(Comp: ComponentType<any>, needsConvert?: string[]): (props: any) => JSX.Element;
+export declare function withSingleFunctionChild(Comp: ComponentType<any>): (props: any) => JSX.Element;
 /**
  * moment对象在序列化后会被转为字符串
  * 需要让日期类组件支持接受字符串值
  */
-export declare function withMomentProps(Comp: ComponentType<any>, needsConvert?: string[]): (props: any) => React.JSX.Element;
+export declare function withMomentProps(Comp: ComponentType<any>, needsConvert?: string[]): (props: any) => JSX.Element;

package/es/utils/miniRedux.d.ts

@@ -12,6 +12,6 @@ declare const _default: <State extends Record<string, any>, Namespace extends st
             payload: any;
         }) => void;
     }>;
-    Provider: (ComponentUi: any) => (props: any, ref: any) => React.JSX.Element;
+    Provider: (ComponentUi: any) => (props: any, ref: any) => JSX.Element;
 };
 export default _default;

package/lib/components/DragSortList/index.d.ts

@@ -18,7 +18,7 @@ export interface Props<T> {
         attributes: DraggableAttributes;
     }) => React.ReactElement<HTMLElement>;
 }
-export default function Sortable<T extends Record<string, any>>({ list, onChange, rowKey, children, activationConstraint, }: Props<T>): React.JSX.Element;
+export default function Sortable<T extends Record<string, any>>({ list, onChange, rowKey, children, activationConstraint, }: Props<T>): JSX.Element;
 export interface SortableItemProps<T> {
     id: number;
     index: number;

package/lib/components/MultipleContainersSortList/index.d.ts

@@ -22,5 +22,5 @@ interface DefaultRenderContainerProps {
     }) => React.ReactElement;
     children: any;
 }
-declare const MultipleContainersSortList: <T extends Record<string, any>>(props: MultipleContainersSortListProps<T>) => React.JSX.Element;
+declare const MultipleContainersSortList: <T extends Record<string, any>>(props: MultipleContainersSortListProps<T>) => JSX.Element;
 export default MultipleContainersSortList;

package/lib/components/Pagination/index.d.ts

@@ -5,10 +5,10 @@ export declare const paginationConfig: {
     className: string;
     defaultCurrent: number;
     showTotal: (total: number, range: [number, number]) => string;
-    itemRender: (page: number, type: "next" | "page" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
+    itemRender: (page: number, type: "page" | "next" | "prev" | "jump-prev" | "jump-next", element: React.ReactNode) => React.ReactNode;
     responsive: boolean;
     size: string;
 };
-declare const Pagination: (props: PaginationProps) => React.JSX.Element | null;
+declare const Pagination: (props: PaginationProps) => JSX.Element | null;
 export default Pagination;
-export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => React.JSX.Element;
+export declare const FormPagination: ({ value, onChange, page, pageSize, ...other }: any) => JSX.Element;

package/lib/components/PisellBasicGrid/PisellBasicGrid.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+/// <reference types="react" />
 import type { PisellBasicGridProps } from './types';
 import './PisellBasicGrid.less';
 /**
  * 使用 memo 优化组件性能
  * @description 当 props 没有变化时，避免不必要的重新渲染
  */
-declare const MemoizedPisellBasicGrid: <T>(props: PisellBasicGridProps<T>) => React.JSX.Element;
+declare const MemoizedPisellBasicGrid: <T>(props: PisellBasicGridProps<T>) => JSX.Element;
 export { MemoizedPisellBasicGrid as PisellBasicGrid };
 export default MemoizedPisellBasicGrid;

package/lib/components/PisellCards/components/GraphicTextCard/GraphicTextCard.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { GraphicTextCardProps } from './types';
 import './GraphicTextCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: GraphicTextCardProps) => React.JSX.Element;
+declare const Provider: (props: GraphicTextCardProps) => JSX.Element;
 export default Provider;

package/lib/components/PisellCards/components/MultilevelCard/MultilevelCard.d.ts

@@ -15,5 +15,5 @@ import './MultilevelCard.less';
  * ```
  */
 export declare const MultilevelCard: React.FC<MultilevelCardProps<any>>;
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

package/lib/components/PisellCards/components/MultilevelCard/hooks/useMultilevelCardExpand.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { MultilevelCardTrigger } from '../types';
 /**
  * 管理 MultilevelCard 的展开/收起状态

package/lib/components/PisellCards/components/PisellImageCard/PisellImageCard.d.ts

@@ -1,9 +1,9 @@
-import React from 'react';
+/// <reference types="react" />
 import { PisellImageCardProps } from './types';
 import './PisellImageCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: PisellImageCardProps) => React.JSX.Element;
+declare const Provider: (props: PisellImageCardProps) => JSX.Element;
 export default Provider;

package/lib/components/PisellCards/components/PisellImageCard/hooks/useImageLoad.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * 图片加载状态管理 Hook
  * @param src - 图片地址

package/lib/components/PisellCards/components/TabCard/TabCard.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import './TabCard.less';
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

package/lib/components/PisellCards/components/TextCard/TextCard.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+/// <reference types="react" />
 import './TextCard.less';
 /**
  * Provider 包装器
  * 兼容 PisellCards 系统的 props 传递方式
  */
-declare const Provider: (props: any) => React.JSX.Element;
+declare const Provider: (props: any) => JSX.Element;
 export default Provider;

package/lib/components/PisellCards/index.d.ts

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 declare const PisellCards: {
-    TabCard: (props: any) => import("react").JSX.Element;
-    TextCard: (props: any) => import("react").JSX.Element;
-    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => import("react").JSX.Element;
-    MultilevelCard: (props: any) => import("react").JSX.Element;
-    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => import("react").JSX.Element;
+    TabCard: (props: any) => JSX.Element;
+    TextCard: (props: any) => JSX.Element;
+    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => JSX.Element;
+    MultilevelCard: (props: any) => JSX.Element;
+    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => JSX.Element;
 };
 export default PisellCards;
 export type { PisellBasicCardProps } from './types';

package/lib/components/PisellProcedure/PisellProcedure.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { PisellProcedureProps } from './types';
+import type { PisellProcedureProps, PisellProcedureRef } from './types';
 import './PisellProcedure.less';
 /**
  * PisellProcedure 流程容器组件
@@ -7,6 +7,16 @@ import './PisellProcedure.less';
  * @description 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
  * @author Pisell Team
  * @version 1.0.0
+ *
+ * @example
+ * // 使用 ref 调用组件方法
+ * const procedureRef = useRef<PisellProcedureRef>(null);
+ *
+ * // 跳转到下一步
+ * procedureRef.current?.goNext();
+ *
+ * // 获取当前步骤
+ * const currentStep = procedureRef.current?.getCurrentStep();
  */
-declare const PisellProcedure: React.FC<PisellProcedureProps>;
+declare const PisellProcedure: React.ForwardRefExoticComponent<PisellProcedureProps & React.RefAttributes<PisellProcedureRef>>;
 export default PisellProcedure;