@pisell/materials 6.11.8 → 6.11.9

package/lib/components/pisellEmail/PisellEmail.less

@@ -1,31 +1,129 @@
 /**
  * PisellEmail 组件样式
+ * 基于 Figma 设计规范，与 SingleLineText 设计体系一致
  */
 
 .pisell-email {
   &-edit {
+    position: relative;
     width: 100%;
 
-    // 错误提示样式
-    &-error {
-      margin-top: 4px;
-      font-size: 12px;
-      color: #ff4d4f;
-      line-height: 1.5;
+    // 仅对 affix-wrapper 设边框，避免与内层 input 双边框（Figma 设计规范）
+    .pisell-lowcode-input-affix-wrapper {
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border-radius: 8px !important;
+      border: 1px solid #d0d5dd !important; // Gray/300
+      padding: 0 !important;
+      height: 48px !important;
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+
+      &:focus,
+      &:focus-within {
+        border-color: #d6bbfb !important; // Primary/300
+        box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
+        outline: none !important;
+      }
+
+      &:hover:not(:focus):not(:focus-within):not([disabled]) {
+        border-color: #b692f6 !important; // Primary/400
+      }
+
+      &[disabled],
+      &.pisell-lowcode-input-disabled {
+        background-color: #f9fafb !important; // Gray/50
+        color: #98a2b3 !important; // Gray/400
+        border-color: #d0d5dd !important;
+        cursor: not-allowed !important;
+      }
     }
+
+    // 内层 input（无边框，由 wrapper 统一描边）
+    .pisell-lowcode-input-affix-wrapper .pisell-lowcode-input {
+      &::placeholder {
+        color: #667085 !important; // Gray/500
+      }
+    }
+
+    // 带前缀（邮箱图标）的 Input 容器
+    .pisell-lowcode-input-affix-wrapper {
+
+      .pisell-lowcode-input-prefix {
+        margin-right: 8px;
+        margin-left: 16px;
+        color: #667085; // Gray/500
+        font-size: 16px;
+      }
+
+      .pisell-lowcode-input-suffix {
+        margin-left: 8px;
+        margin-right: 16px;
+        color: #667085;
+        font-size: 16px;
+      }
+
+      .pisell-lowcode-input {
+        padding: 12px 0 !important;
+        border: none !important;
+        box-shadow: none !important;
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+    }
+
+    // 清空按钮
+    .pisell-lowcode-input-clear-icon {
+      color: #667085 !important;
+      font-size: 14px !important;
+
+      &:hover {
+        color: #344054 !important; // Gray/700
+      }
+    }
+
+    // 错误状态
+    .pisell-lowcode-input-status-error,
+    .pisell-lowcode-input-affix-wrapper-status-error {
+      border-color: #fda29b !important; // Error/300
+
+      &:focus,
+      &:focus-within {
+        border-color: #f97066 !important; // Error/400
+        box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
+      }
+
+      &:hover:not(:focus):not(:focus-within) {
+        border-color: #f97066 !important; // Error/400
+      }
+    }
+  }
+
+  // 错误提示（与设计体系一致）
+  &-edit-error {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #d92d20; // Error/600
+    line-height: 1.5;
+    animation: pisell-email-fadeIn 0.3s ease-in-out;
   }
 
   &-read {
     display: inline-flex;
     align-items: center;
 
-    // 链接样式
     .pisell-lowcode-typography-link {
       cursor: pointer;
-      transition: all 0.3s;
+      transition: color 0.2s ease-in-out;
 
       &:hover {
-        opacity: 0.8;
+        color: #6d48c4 !important;
+      }
+
+      &:active {
+        color: #5f3da8 !important;
       }
     }
   }
@@ -40,7 +138,7 @@
   }
 }
 
-// AutoComplete 下拉样式优化
+// AutoComplete 下拉样式
 .pisell-email-autocomplete-dropdown {
   .pisell-lowcode-select-item-option-content {
     display: flex;
@@ -48,3 +146,14 @@
     gap: 8px;
   }
 }
+
+@keyframes pisell-email-fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/lib/components/pisellEmail/PisellEmail.stories.js

@@ -60,7 +60,7 @@ module.exports = __toCommonJS(PisellEmail_stories_exports);
 var import_PisellEmail = require("./PisellEmail");
 var import_react = __toESM(require("react"));
 var meta = {
-  title: "表单/PisellEmail",
+  title: "表单/表单组件/PisellEmail",
   component: import_PisellEmail.PisellEmail,
   parameters: {
     layout: "centered",

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

@@ -1,5 +1,7 @@
 /**
  * PisellEmail 组件导出文件
  */
-export { PisellEmail, default } from './PisellEmail';
+import PisellEmail from './PisellEmail';
+export { PisellEmail };
+export default PisellEmail;
 export type { PisellEmailProps, MailtoOptions } from './types';

package/lib/components/pisellEmail/index.js

@@ -29,11 +29,19 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/components/pisellEmail/index.tsx
 var pisellEmail_exports = {};
 __export(pisellEmail_exports, {
-  PisellEmail: () => import_PisellEmail.PisellEmail,
-  default: () => import_PisellEmail.default
+  PisellEmail: () => import_PisellEmail.default,
+  default: () => pisellEmail_default
 });
 module.exports = __toCommonJS(pisellEmail_exports);
+var import_locales = require("../../locales");
 var import_PisellEmail = __toESM(require("./PisellEmail"));
+import_PisellEmail.default.SortOptions = {
+  getSortItems: (fieldKey) => [
+    { key: `${fieldKey}:asc`, label: (0, import_locales.getText)("sort-a-z") },
+    { key: `${fieldKey}:desc`, label: (0, import_locales.getText)("sort-z-a") }
+  ]
+};
+var pisellEmail_default = import_PisellEmail.default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PisellEmail

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PisellFilterProps } from './type';
-declare const PisellFilter: (props: PisellFilterProps) => React.JSX.Element;
+declare const PisellFilter: (props: PisellFilterProps) => JSX.Element;
 export default PisellFilter;

package/lib/components/pisellFilter/index.js

@@ -43,38 +43,109 @@ var PisellFilter = (props) => {
     hiddenQuickFilter = true,
     hiddenOtherFilter = false,
     hasForm = true,
+    onChange,
     ...otherProps
   } = props;
-  const [value, setValue] = (0, import_react.useState)({});
+  const [form] = import_antd.Form.useForm();
+  const [value, setValue] = (0, import_react.useState)(() => ({
+    quickFilter: (originalValue == null ? void 0 : originalValue.quickFilter) || [],
+    otherFilter: (originalValue == null ? void 0 : originalValue.otherFilter) || [],
+    values: (originalValue == null ? void 0 : originalValue.values) || {}
+  }));
+  const isInternalChange = (0, import_react.useRef)(false);
   (0, import_react.useEffect)(() => {
-    setValue({
-      quickFilter: (originalValue == null ? void 0 : originalValue.quickFilter) || [],
-      otherFilter: (originalValue == null ? void 0 : originalValue.otherFilter) || []
-    });
-  }, [originalValue]);
+    setValue((prev) => ({
+      quickFilter: (originalValue == null ? void 0 : originalValue.quickFilter) ?? prev.quickFilter,
+      otherFilter: (originalValue == null ? void 0 : originalValue.otherFilter) ?? prev.otherFilter,
+      values: (originalValue == null ? void 0 : originalValue.values) ?? prev.values ?? {}
+    }));
+  }, [
+    originalValue == null ? void 0 : originalValue.quickFilter,
+    originalValue == null ? void 0 : originalValue.otherFilter,
+    originalValue == null ? void 0 : originalValue.values
+  ]);
+  (0, import_react.useEffect)(() => {
+    if (!hasForm || typeof (originalValue == null ? void 0 : originalValue.values) !== "object") return;
+    if (isInternalChange.current) {
+      isInternalChange.current = false;
+      return;
+    }
+    const nextValues = (originalValue == null ? void 0 : originalValue.values) ?? {};
+    if (Object.keys(nextValues).length === 0) {
+      const current = form.getFieldsValue(true);
+      const cleared = Object.keys(current).reduce(
+        (acc, k) => {
+          acc[k] = void 0;
+          return acc;
+        },
+        {}
+      );
+      if (Object.keys(cleared).length > 0) {
+        form.setFieldsValue(cleared);
+      }
+    } else {
+      form.setFieldsValue(nextValues);
+    }
+  }, [hasForm, form, originalValue == null ? void 0 : originalValue.values]);
+  const handleChange = (0, import_react.useCallback)(
+    (newVal) => {
+      setValue((prev) => ({
+        ...prev,
+        ...newVal,
+        values: newVal.values ?? prev.values
+      }));
+      onChange == null ? void 0 : onChange(newVal);
+    },
+    [onChange]
+  );
+  const handleFormValuesChange = (0, import_react.useCallback)(
+    (_, allValues) => {
+      if (typeof allValues !== "object" || allValues === null) return;
+      isInternalChange.current = true;
+      const mergedValues = { ...value.values, ...allValues };
+      const next = {
+        quickFilter: value.quickFilter,
+        otherFilter: value.otherFilter,
+        values: mergedValues
+      };
+      setValue(next);
+      onChange == null ? void 0 : onChange(next);
+    },
+    [value.quickFilter, value.otherFilter, value.values, onChange]
+  );
   const content = (0, import_react.useMemo)(() => {
     return /* @__PURE__ */ import_react.default.createElement(
       import_FilterButton.default,
       {
         ...otherProps,
+        onChange: handleChange,
         value: {
           quickFilter: value.quickFilter,
           otherFilter: value.otherFilter
         },
         hiddenQuickFilter,
         hiddenOtherFilter,
-        onChange: setValue,
         quickFilterMaxLength: quickFilterMaxLength || 100,
         formFiltersPrefix: formFiltersPrefix || ""
       }
     );
-  }, [value, hiddenQuickFilter, hiddenOtherFilter, quickFilterMaxLength, formFiltersPrefix]);
+  }, [
+    value,
+    hiddenQuickFilter,
+    hiddenOtherFilter,
+    quickFilterMaxLength,
+    formFiltersPrefix,
+    handleChange
+  ]);
   if (hasForm) {
     return /* @__PURE__ */ import_react.default.createElement(
       import_antd.Form,
       {
+        form,
         size: "large",
         layout: "vertical",
+        initialValues: value.values,
+        onValuesChange: handleFormValuesChange,
         ...otherProps
       },
       content

package/lib/components/pisellFind/index.js

@@ -33,14 +33,15 @@ __export(pisellFind_exports, {
 });
 module.exports = __toCommonJS(pisellFind_exports);
 var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
 var import_pisellLookup = require("../pisellLookup");
 var import_locales = require("../../locales");
 var PisellFind = (0, import_react.forwardRef)((props, ref) => {
   const {
     // 提取需要设置默认值的 Props
     triggerType = "button",
-    buttonText = (0, import_locales.getText)("pisell-find-button-text"),
-    placeholder = (0, import_locales.getText)("pisell-find-placeholder"),
+    buttonText = import_utils.locales.getText("pisell2.recordBoard.toolbar.find") || (0, import_locales.getText)("pisell-find-button-text"),
+    placeholder = import_utils.locales.getText("pisell2.recordBoard.toolbar.findPlaceholder") || (0, import_locales.getText)("pisell-find-placeholder"),
     showConfirmButton = false,
     showHistory = true,
     historyKey = "pisell_find_history",

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

@@ -13,5 +13,5 @@ export interface PisellFloatingPanelProps {
     style?: React.CSSProperties;
     retractIconStyle?: React.CSSProperties;
 }
-declare const PisellFloatingPanel: (props: PisellFloatingPanelProps) => React.JSX.Element;
+declare const PisellFloatingPanel: (props: PisellFloatingPanelProps) => JSX.Element;
 export default PisellFloatingPanel;

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

@@ -46,5 +46,5 @@ export interface PisellGoodPassCardProps {
     mixedSort?: (val: Discount[]) => Discount[];
     isInModal: boolean;
 }
-declare const index: (props: PisellGoodPassCardProps) => React.JSX.Element;
+declare const index: (props: PisellGoodPassCardProps) => JSX.Element;
 export default index;

package/lib/components/pisellGridPro/ToolBar/index.less

@@ -14,6 +14,7 @@
   /**
    * 工具栏行通用样式
    */
+
   &-row {
     display: flex;
     flex-direction: row;
@@ -21,8 +22,10 @@
     gap: 12px;
     align-self: stretch;
   }
+
   .toolbar-row {
     justify-content: space-between;
+
     &-left {
       display: flex;
       flex-direction: row;
@@ -40,3 +43,23 @@
     }
   }
 }
+
+/**
+ * 手机版宽度：左侧区域与右侧区域换行，避免挤在一行
+ */
+@media (max-width: 768px) {
+  .pisell-grid-pro-toolbar .toolbar-row {
+    flex-wrap: wrap;
+  }
+
+  .pisell-grid-pro-toolbar .toolbar-row-left {
+    flex: 1 1 100%;
+    min-width: 0;
+  }
+
+  .pisell-grid-pro-toolbar .toolbar-row-right {
+    flex: 1 1 100%;
+    min-width: 0;
+    justify-content: flex-start;
+  }
+}

package/lib/components/pisellInformationEntry/Input/index.d.ts

@@ -4,5 +4,5 @@ export interface PisellEntryInputProps {
     onChange: (val: string) => void;
     searchDescribe?: React.ReactNode;
 }
-declare const PisellEntryInput: (props: PisellEntryInputProps) => React.JSX.Element;
+declare const PisellEntryInput: (props: PisellEntryInputProps) => JSX.Element;
 export default PisellEntryInput;

package/lib/components/pisellInformationEntry/Scan/index.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
 import './index.less';
 export interface ScanProps {
     onChange: (val: string) => void;
     onCancel: () => void;
 }
-declare const Scan: (props: ScanProps) => React.JSX.Element;
+declare const Scan: (props: ScanProps) => JSX.Element;
 export default Scan;

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

@@ -29,5 +29,5 @@ export interface PisellInformationEntryProps extends Omit<React.HTMLAttributes<H
     /** 录入类型切换时候触发的 */
     onChangeType?: (val: null | EntryModeType['type']) => void;
 }
-declare const PisellInformationEntry: (props: PisellInformationEntryProps) => React.JSX.Element;
+declare const PisellInformationEntry: (props: PisellInformationEntryProps) => JSX.Element;
 export default PisellInformationEntry;

package/lib/components/pisellInput/components/BankCard/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { InputProps } from 'antd';
 import { PisellContextType } from "../../../pisell-config-provider/context";
 import './index.less';
@@ -7,5 +6,5 @@ export declare type BankCardProps = InputProps & {
     platform?: PisellContextType['platform'];
     onChange?: (val: string) => void;
 };
-declare const BankCard: (props: BankCardProps) => React.JSX.Element;
+declare const BankCard: (props: BankCardProps) => JSX.Element;
 export default BankCard;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { InputProps, ButtonProps } from 'antd';
 import { PisellContextType } from "../../../pisell-config-provider/context";
 export interface CopyProps extends InputProps {
@@ -7,5 +6,5 @@ export interface CopyProps extends InputProps {
     /** 后缀button的透传配置 */
     buttonProps?: ButtonProps;
 }
-declare const Copy: (props: CopyProps) => React.JSX.Element;
+declare const Copy: (props: CopyProps) => JSX.Element;
 export default Copy;

package/lib/components/pisellInput/components/SecurityCode/index.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { InputProps } from 'antd';
 import './index.less';
 import { PisellContextType } from "../../../pisell-config-provider/context";
@@ -8,5 +7,5 @@ export interface SecurityCodeProps extends Omit<InputProps, 'onChange'> {
     onChange?: (val: string) => void;
     showCVCIcon?: boolean;
 }
-declare const SecurityCode: (props: SecurityCodeProps) => React.JSX.Element;
+declare const SecurityCode: (props: SecurityCodeProps) => JSX.Element;
 export default SecurityCode;

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

@@ -1,13 +1,13 @@
-import React from 'react';
+/// <reference types="react" />
 import { InputProps } from 'antd';
 import { PisellContextType } from '../pisell-config-provider/context';
 declare const PisellInput: {
     (props: InputProps & {
         /** 平台 */
         platform?: PisellContextType['platform'];
-    }): React.JSX.Element;
-    BankCard: (props: import("./components/BankCard").BankCardProps) => React.JSX.Element;
-    SecurityCode: (props: import("./components/SecurityCode").SecurityCodeProps) => React.JSX.Element;
-    Copy: (props: import("./components/Copy").CopyProps) => React.JSX.Element;
+    }): JSX.Element;
+    BankCard: (props: import("./components/BankCard").BankCardProps) => JSX.Element;
+    SecurityCode: (props: import("./components/SecurityCode").SecurityCodeProps) => JSX.Element;
+    Copy: (props: import("./components/Copy").CopyProps) => JSX.Element;
 };
 export default PisellInput;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SpinProps } from 'antd';
 import './index.less';
 declare type MaskType = {
@@ -16,5 +15,5 @@ export interface PisellLoadingProps extends SpinProps {
     /** 延迟显示加载效果的时间（防止闪烁）	 */
     delay?: number;
 }
-declare const PisellLoading: (props: PisellLoadingProps) => React.JSX.Element;
+declare const PisellLoading: (props: PisellLoadingProps) => JSX.Element;
 export default PisellLoading;

package/lib/components/pisellLongText/PisellLongText.less

@@ -1,5 +1,6 @@
 /**
  * PisellLongText 组件样式
+ * 基于 Figma 设计规范，与 SingleLineText 设计体系一致
  */
 
 .pisell-long-text {
@@ -7,16 +8,78 @@
     position: relative;
     width: 100%;
 
-    // 基于 Figma 设计规范的 TextArea 样式
+    // TextArea 样式（Figma 设计规范，覆盖时使用 pisell-lowcode-xxx）
     .pisell-lowcode-input {
-      padding: 12px 14px; // Figma: 垂直12px，水平14px（比 Input 小2px）
+      // 基础样式
+      font-size: 16px !important;
+      line-height: 24px !important;
+
+      // 边框和圆角
+      border-radius: 8px !important;
+      border: 1px solid #d0d5dd !important; // Gray/300
+
+      // 内边距（Figma: 垂直 12px，水平 14px）
+      padding: 12px 14px !important;
+      min-height: 80px !important; // 多行最小高度，由 rows 进一步控制
+
+      // 颜色
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+
+      &::placeholder {
+        color: #667085 !important; // Gray/500
+      }
+
+      // 聚焦态
+      &:focus,
+      &:focus-within {
+        border-color: #d6bbfb !important; // Primary/300
+        box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
+        outline: none !important;
+      }
+
+      // Hover 态
+      &:hover:not(:focus):not(:focus-within):not([disabled]) {
+        border-color: #b692f6 !important; // Primary/400
+      }
+
+      // 禁用态
+      &[disabled],
+      &.pisell-lowcode-input-disabled {
+        background-color: #f9fafb !important; // Gray/50
+        color: #98a2b3 !important; // Gray/400
+        border-color: #d0d5dd !important;
+        cursor: not-allowed !important;
+      }
+    }
+
+    // 字数统计样式（TextArea showCount）
+    .pisell-lowcode-input-data-count,
+    .pisell-lowcode-input-show-count-suffix {
+      color: #667085 !important; // Gray/500
+      font-size: 14px !important;
+    }
+
+    // 错误状态
+    .pisell-lowcode-input-status-error {
+      border-color: #fda29b !important; // Error/300
+
+      &:focus,
+      &:focus-within {
+        border-color: #f97066 !important; // Error/400
+        box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
+      }
+
+      &:hover:not(:focus):not(:focus-within) {
+        border-color: #f97066 !important; // Error/400
+      }
     }
   }
 
   &-error {
     margin-top: 4px;
     font-size: 12px;
-    color: #ff4d4f;
+    color: #d92d20; // Error/600
     line-height: 1.5;
     animation: fadeIn 0.3s ease-in-out;
   }
@@ -32,12 +95,17 @@
     height: auto;
     font-size: 14px;
     margin-top: 8px;
+    color: #6d48c4;
+
+    &:hover {
+      color: #6d48c4 !important;
+    }
   }
 
   &-word-count {
     margin-top: 8px;
     font-size: 12px;
-    color: #667085;
+    color: #667085; // Gray/500
     text-align: right;
   }
 

package/lib/components/pisellLongText/PisellLongText.stories.js

@@ -62,7 +62,7 @@ module.exports = __toCommonJS(PisellLongText_stories_exports);
 var import_PisellLongText = require("./PisellLongText");
 var import_react = __toESM(require("react"));
 var meta = {
-  title: "表单/PisellLongText",
+  title: "表单/表单组件/PisellLongText",
   component: import_PisellLongText.PisellLongText,
   parameters: {
     layout: "centered",

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

@@ -1,6 +1,7 @@
 /**
  * PisellLongText 组件导出
  */
-export { default as PisellLongText } from './PisellLongText';
+import PisellLongText from './PisellLongText';
+export { PisellLongText };
 export type { PisellLongTextProps } from './types';
 export type { DisplayState, ValidationResult, TextInputState } from './types';

package/lib/components/pisellLongText/index.js

@@ -32,7 +32,14 @@ __export(pisellLongText_exports, {
   PisellLongText: () => import_PisellLongText.default
 });
 module.exports = __toCommonJS(pisellLongText_exports);
+var import_locales = require("../../locales");
 var import_PisellLongText = __toESM(require("./PisellLongText"));
+import_PisellLongText.default.SortOptions = {
+  getSortItems: (fieldKey) => [
+    { key: `${fieldKey}:asc`, label: (0, import_locales.getText)("sort-a-z") },
+    { key: `${fieldKey}:desc`, label: (0, import_locales.getText)("sort-z-a") }
+  ]
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PisellLongText