@pisell/materials 6.3.27 → 6.3.29

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

@@ -0,0 +1,14 @@
+import type { LayoutProps } from 'antd';
+import { Layout } from 'antd';
+import React from 'react';
+export interface PisellLayoutProps extends LayoutProps {
+    children?: React.ReactNode;
+}
+export interface CompoundedComponent extends React.FC<PisellLayoutProps> {
+    Header: typeof Layout.Header;
+    Content: typeof Layout.Content;
+    Footer: typeof Layout.Footer;
+    Sider: typeof Layout.Sider;
+}
+declare const PisellLayout: CompoundedComponent;
+export default PisellLayout;

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

package/lib/components/pisellLookup/PisellLookup.js

@@ -253,9 +253,13 @@ var PisellLookupComponent = (0, import_react.forwardRef)((props, ref) => {
       }, 200);
     }
   }, [displayType, close]);
-  const handleConfirm = (0, import_react.useCallback)(() => {
-    handleConfirmSearch(keyword);
-  }, [keyword, handleConfirmSearch]);
+  const handleConfirm = (0, import_react.useCallback)(
+    (valueFromTrigger) => {
+      const keywordToSearch = valueFromTrigger ?? keyword;
+      handleConfirmSearch(keywordToSearch);
+    },
+    [keyword, handleConfirmSearch]
+  );
   const handleClear = (0, import_react.useCallback)(() => {
     isManualSelectRef.current = true;
     setKeyword("");
@@ -267,11 +271,15 @@ var PisellLookupComponent = (0, import_react.forwardRef)((props, ref) => {
   }, [setKeyword, onSearch, debounceTime]);
   const handleScan = (0, import_react.useCallback)(
     (code) => {
+      isManualSelectRef.current = true;
       setKeyword(code);
       handleConfirmSearch(code);
       onScan == null ? void 0 : onScan(code);
+      setTimeout(() => {
+        isManualSelectRef.current = false;
+      }, debounceTime + 100);
     },
-    [setKeyword, handleConfirmSearch, onScan]
+    [setKeyword, handleConfirmSearch, onScan, debounceTime]
   );
   const handleSelectAuxiliary = (0, import_react.useCallback)(
     (selectedKeyword) => {
@@ -353,12 +361,14 @@ var PisellLookupComponent = (0, import_react.forwardRef)((props, ref) => {
     }
     return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lookup-result" }, resultRender(keyword, close));
   };
+  const hasAuxiliaryContent = showHistory && history.length > 0 || showSuggestions && suggestions.length > 0 && !!keyword || showHotWords && hotWords.length > 0 && !keyword;
+  const hasResultsContent = Boolean(loading || keyword && resultRender);
   const renderContent = () => {
-    const auxiliary = renderAuxiliary();
-    const results = renderResults();
-    if (!auxiliary && !results) {
+    if (!hasAuxiliaryContent && !hasResultsContent) {
       return null;
     }
+    const auxiliary = renderAuxiliary();
+    const results = renderResults();
     return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lookup-content" }, auxiliary, results);
   };
   if (displayType === "inline" || displayType === "popup") {

package/lib/components/pisellLookup/PisellLookup.less

@@ -132,8 +132,11 @@
 
   // ============ Input 样式覆盖 ============
 
-  // 覆盖 Ant Design Input 默认样式（适用于所有尺寸）
-  &-trigger-input.pisell-lowcode-input-affix-wrapper {
+  // 覆盖 Ant Design Input 默认样式（适用于所有尺寸）；默认高度 50px
+  // 同时匹配 ant- / pisell-lowcode- 前缀，确保有无 prefixCls 都能生效
+  &-trigger-input.pisell-lowcode-input-affix-wrapper,
+  &-trigger-input.ant-input-affix-wrapper {
+    min-height: 50px;
     border: 1px solid #d0d5dd;
     border-radius: 8px;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
@@ -145,13 +148,15 @@
     }
 
     &:focus,
-    &.pisell-lowcode-input-affix-wrapper-focused {
+    &.pisell-lowcode-input-affix-wrapper-focused,
+    &.ant-input-affix-wrapper-focused {
       border-color: #7f56d9;
       box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0 0 0 2px rgba(127, 86, 217, 0.1);
     }
 
-    // Input 文本样式
-    .pisell-lowcode-input {
+    // Input 文本样式（antd 内部 input 类名可能为 .ant-input 或 .pisell-lowcode-input）
+    .pisell-lowcode-input,
+    .ant-input {
       color: #000000;
       font-size: 16px;
       line-height: 24px;
@@ -164,8 +169,9 @@
     }
   }
 
-  // 小号输入框
-  &-trigger-input.pisell-lowcode-input-affix-wrapper-sm {
+  // 小号输入框（同时匹配 ant- / pisell-lowcode-）
+  &-trigger-input.pisell-lowcode-input-affix-wrapper-sm,
+  &-trigger-input.ant-input-affix-wrapper-sm {
     padding: 2px 2px 2px 12px;
 
     .pisell-lookup-input-clear {
@@ -192,8 +198,10 @@
     }
   }
 
-  // 大号输入框
-  &-trigger-input.pisell-lowcode-input-affix-wrapper-lg {
+  // 大号输入框，高度 58px（同时匹配 ant- / pisell-lowcode-）
+  &-trigger-input.pisell-lowcode-input-affix-wrapper-lg,
+  &-trigger-input.ant-input-affix-wrapper-lg {
+    min-height: 58px;
     padding: 6px 6px 6px 16px;
 
     .pisell-lookup-input-clear {
@@ -210,6 +218,23 @@
 
     .pisell-lookup-input-confirm {
       padding: 10px;
+      line-height: 24px;
+    }
+  }
+
+  // 无 Lookup 按钮时：class 在包裹层 .pisell-lookup-trigger-input-no-confirm 上，对子元素 affix-wrapper 设左右对称 padding
+  &-trigger-input-no-confirm {
+    > .ant-input-affix-wrapper,
+    > .pisell-lowcode-input-affix-wrapper {
+      padding: 4px 16px;
+    }
+    > .ant-input-affix-wrapper-sm,
+    > .pisell-lowcode-input-affix-wrapper-sm {
+      padding: 2px 12px;
+    }
+    > .ant-input-affix-wrapper-lg,
+    > .pisell-lowcode-input-affix-wrapper-lg {
+      padding: 6px 16px;
     }
   }
 
@@ -270,8 +295,8 @@
     }
 
     &-confirm {
+      border: none;
       background-color: #7f56d9;
-      border-color: #7f56d9;
       border-radius: 8px;
       box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
       padding: 10px;
@@ -279,39 +304,37 @@
       min-width: auto;
       font-size: 16px;
       font-weight: 600;
-      line-height: 22px;
+      line-height: 20px;
       color: #ffffff;
 
       &:hover {
         background-color: #6941c6 !important;
-        border-color: #6941c6 !important;
         color: #ffffff !important;
       }
 
       &:active {
         background-color: #53389e !important;
-        border-color: #53389e !important;
         color: #ffffff !important;
       }
 
       span {
         font-size: 16px;
         font-weight: 600;
-        line-height: 22px;
+        line-height: 20px;
       }
 
       &.pisell-lowcode-btn-sm {
         padding: 10px;
         height: auto;
         font-size: 16px;
-        line-height: 22px;
+        line-height: 20px;
       }
 
       &.pisell-lowcode-btn-middle {
         padding: 10px;
         height: auto;
         font-size: 16px;
-        line-height: 22px;
+        line-height: 20px;
       }
     }
   }

package/lib/components/pisellLookup/components/LookupTrigger.js

@@ -142,8 +142,10 @@ var LookupTriggerComponent = (0, import_react.forwardRef)(
       onConfirm == null ? void 0 : onConfirm();
     };
     const handleKeyPress = (e) => {
+      var _a2;
       if (e.key === "Enter") {
-        onConfirm == null ? void 0 : onConfirm();
+        const currentValue = ((_a2 = e.currentTarget) == null ? void 0 : _a2.value) ?? value ?? "";
+        onConfirm == null ? void 0 : onConfirm(currentValue);
       }
     };
     const renderInputTrigger = () => {
@@ -165,7 +167,7 @@ var LookupTriggerComponent = (0, import_react.forwardRef)(
         },
         confirmButtonText
       ));
-      return /* @__PURE__ */ import_react.default.createElement(
+      const inputEl = /* @__PURE__ */ import_react.default.createElement(
         import_antd.Input,
         {
           ref: inputRef,
@@ -180,10 +182,14 @@ var LookupTriggerComponent = (0, import_react.forwardRef)(
           prefix,
           suffix,
           autoFocus,
-          className: `pisell-lookup-trigger-input ${className || ""}`,
+          className: `pisell-lookup-trigger-input ${className || ""}`.trim(),
           style
         }
       );
+      if (!showConfirmButton) {
+        return /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-lookup-trigger-input pisell-lookup-trigger-input-no-confirm" }, inputEl);
+      }
+      return inputEl;
     };
     const renderButtonTrigger = () => {
       return /* @__PURE__ */ import_react.default.createElement(

package/lib/components/pisellLookup/hooks/useDebounceSearch.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 防抖搜索 Hook
+ */
+export interface UseDebounceSearchOptions {
+    /**
+     * 关键词
+     */
+    keyword: string;
+    /**
+     * 防抖时间（毫秒）
+     */
+    debounceTime: number;
+    /**
+     * 搜索触发回调
+     */
+    onSearch?: (keyword: string) => void;
+    /**
+     * 是否启用防抖
+     */
+    enabled?: boolean;
+    /**
+     * 上次搜索的关键词（用于去重）
+     */
+    lastSearchKeyword?: string;
+    /**
+     * 是否跳过防抖触发（用于手动选择场景）
+     */
+    skipDebounce?: boolean;
+}
+export interface UseDebounceSearchResult {
+    /**
+     * 防抖后的关键词
+     */
+    debouncedKeyword: string;
+}
+/**
+ * 防抖搜索 Hook
+ * 用于实时搜索模式的防抖处理
+ */
+export declare const useDebounceSearch: (options: UseDebounceSearchOptions) => UseDebounceSearchResult;

package/lib/components/pisellLookup/hooks/useSearchState.d.ts

@@ -0,0 +1,80 @@
+/**
+ * 搜索状态管理 Hook
+ */
+export interface UseSearchStateOptions {
+    /**
+     * 受控的关键词
+     */
+    value?: string;
+    /**
+     * 默认关键词
+     */
+    defaultValue?: string;
+    /**
+     * 受控的可见性
+     */
+    visible?: boolean;
+    /**
+     * 默认可见性
+     */
+    defaultVisible?: boolean;
+    /**
+     * 关键词变化回调
+     */
+    onChange?: (value: string) => void;
+    /**
+     * 可见性变化回调
+     */
+    onVisibleChange?: (visible: boolean) => void;
+    /**
+     * 打开回调
+     */
+    onOpen?: () => void;
+    /**
+     * 关闭回调
+     */
+    onClose?: () => void;
+}
+export interface UseSearchStateResult {
+    /**
+     * 当前关键词
+     */
+    keyword: string;
+    /**
+     * 设置关键词
+     */
+    setKeyword: (value: string) => void;
+    /**
+     * 是否可见
+     */
+    visible: boolean;
+    /**
+     * 设置可见性
+     */
+    setVisible: (visible: boolean) => void;
+    /**
+     * 打开
+     */
+    open: () => void;
+    /**
+     * 关闭
+     */
+    close: () => void;
+    /**
+     * 切换可见性
+     */
+    toggle: () => void;
+    /**
+     * 是否为受控的关键词
+     */
+    isControlledKeyword: boolean;
+    /**
+     * 是否为受控的可见性
+     */
+    isControlledVisible: boolean;
+}
+/**
+ * 搜索状态管理 Hook
+ * 支持受控和非受控模式
+ */
+export declare const useSearchState: (options: UseSearchStateOptions) => UseSearchStateResult;

package/lib/components/pisellLookup/types.d.ts

@@ -421,7 +421,8 @@ export interface LookupTriggerProps {
     /**
      * 确认触发回调
      */
-    onConfirm?: () => void;
+    /** 确认搜索（回车或点击按钮）；可传入当前输入值，受控下回车时传 input 当前值以保证历史能正确保存 */
+    onConfirm?: (value?: string) => void;
     /**
      * 扫码回调
      */

package/lib/components/pisellLookup/utils/storage.d.ts

@@ -0,0 +1,42 @@
+/**
+ * localStorage 工具函数
+ * 用于管理搜索历史的存储
+ */
+/**
+ * 从 localStorage 加载历史记录
+ * @param key 存储的 key
+ * @returns 历史记录数组
+ */
+export declare const loadHistory: (key: string) => string[];
+/**
+ * 保存历史记录到 localStorage
+ * @param key 存储的 key
+ * @param history 历史记录数组
+ * @param maxCount 最大数量限制
+ */
+export declare const saveHistory: (key: string, history: string[], maxCount: number) => void;
+/**
+ * 清除历史记录
+ * @param key 存储的 key
+ */
+export declare const clearHistory: (key: string) => void;
+/**
+ * 添加历史记录项
+ * @param key 存储的 key
+ * @param item 新的历史记录项
+ * @param maxCount 最大数量限制
+ * @returns 更新后的历史记录数组
+ */
+export declare const addHistoryItem: (key: string, item: string, maxCount: number) => string[];
+/**
+ * 删除历史记录项
+ * @param key 存储的 key
+ * @param item 要删除的历史记录项
+ * @returns 更新后的历史记录数组
+ */
+export declare const removeHistoryItem: (key: string, item: string) => string[];
+/**
+ * 检查 localStorage 是否可用
+ * @returns 是否可用
+ */
+export declare const isLocalStorageAvailable: () => boolean;

package/lib/components/pisellMetricCard/components/MetricTitle.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MetricTitleProps } from '../types';
+/**
+ * MetricTitle 标题组件
+ *
+ * 负责渲染标题、副标题和提示信息
+ * 支持自定义字号、字重、颜色等样式
+ *
+ * @param props 组件属性
+ */
+declare const MetricTitle: React.FC<MetricTitleProps>;
+export default MetricTitle;

package/lib/components/pisellMetricCard/components/MetricValue.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MetricValueProps } from '../types';
+/**
+ * MetricValue 数值展示组件
+ *
+ * 负责渲染格式化后的主数值
+ * 支持自定义字号、字重、颜色等样式
+ *
+ * @param props 组件属性
+ */
+declare const MetricValue: React.FC<MetricValueProps>;
+export default MetricValue;

package/lib/components/pisellMetricCard/components/TrendIcon.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { TrendIconProps } from '../types';
+/**
+ * TrendIcon 趋势箭头组件
+ *
+ * 根据趋势类型显示上升或下降箭头
+ * - up: 显示上升箭头 ↑
+ * - down: 显示下降箭头 ↓
+ * - neutral: 不显示箭头
+ *
+ * @param props 组件属性
+ */
+declare const TrendIcon: React.FC<TrendIconProps>;
+export default TrendIcon;