@pisell/materials 6.11.4 → 6.11.6

package/es/components/pisellLookup/utils/storage.js

@@ -0,0 +1,118 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * localStorage 工具函数
+ * 用于管理搜索历史的存储
+ */
+
+/**
+ * 从 localStorage 加载历史记录
+ * @param key 存储的 key
+ * @returns 历史记录数组
+ */
+export var loadHistory = function loadHistory(key) {
+  try {
+    var data = localStorage.getItem(key);
+    if (!data) return [];
+    return JSON.parse(data);
+  } catch (error) {
+    console.error('Failed to load history from localStorage:', error);
+    return [];
+  }
+};
+
+/**
+ * 保存历史记录到 localStorage
+ * @param key 存储的 key
+ * @param history 历史记录数组
+ * @param maxCount 最大数量限制
+ */
+export var saveHistory = function saveHistory(key, history, maxCount) {
+  try {
+    // 限制数量
+    var limitedHistory = history.slice(0, maxCount);
+    localStorage.setItem(key, JSON.stringify(limitedHistory));
+  } catch (error) {
+    console.error('Failed to save history to localStorage:', error);
+  }
+};
+
+/**
+ * 清除历史记录
+ * @param key 存储的 key
+ */
+export var clearHistory = function clearHistory(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch (error) {
+    console.error('Failed to clear history from localStorage:', error);
+  }
+};
+
+/**
+ * 添加历史记录项
+ * @param key 存储的 key
+ * @param item 新的历史记录项
+ * @param maxCount 最大数量限制
+ * @returns 更新后的历史记录数组
+ */
+export var addHistoryItem = function addHistoryItem(key, item, maxCount) {
+  try {
+    // 加载现有历史
+    var history = loadHistory(key);
+
+    // 去重：如果已存在，先移除
+    var filteredHistory = history.filter(function (h) {
+      return h !== item;
+    });
+
+    // 添加到开头
+    var newHistory = [item].concat(_toConsumableArray(filteredHistory));
+
+    // 保存
+    saveHistory(key, newHistory, maxCount);
+    return newHistory.slice(0, maxCount);
+  } catch (error) {
+    console.error('Failed to add history item:', error);
+    return [];
+  }
+};
+
+/**
+ * 删除历史记录项
+ * @param key 存储的 key
+ * @param item 要删除的历史记录项
+ * @returns 更新后的历史记录数组
+ */
+export var removeHistoryItem = function removeHistoryItem(key, item) {
+  try {
+    var history = loadHistory(key);
+    var newHistory = history.filter(function (h) {
+      return h !== item;
+    });
+    localStorage.setItem(key, JSON.stringify(newHistory));
+    return newHistory;
+  } catch (error) {
+    console.error('Failed to remove history item:', error);
+    return [];
+  }
+};
+
+/**
+ * 检查 localStorage 是否可用
+ * @returns 是否可用
+ */
+export var isLocalStorageAvailable = function isLocalStorageAvailable() {
+  try {
+    var testKey = '__pisell_lookup_test__';
+    localStorage.setItem(testKey, 'test');
+    localStorage.removeItem(testKey);
+    return true;
+  } catch (_unused) {
+    return false;
+  }
+};

package/es/components/pisellLookup/utils/trigger.d.ts

@@ -0,0 +1,42 @@
+import type { DisplayType, TriggerType } from '../types';
+/**
+ * 触发器相关工具函数
+ */
+/**
+ * 根据触发器类型获取默认的展示类型
+ * @param triggerType 触发器类型
+ * @param hasTrigger 是否有自定义触发器
+ * @returns 默认的展示类型
+ */
+export declare const getDefaultDisplayType: (triggerType?: TriggerType, hasTrigger?: boolean) => DisplayType;
+/**
+ * 判断是否为输入框触发器
+ * @param triggerType 触发器类型
+ * @returns 是否为输入框触发器
+ */
+export declare const isInputTrigger: (triggerType?: TriggerType) => boolean;
+/**
+ * 判断是否为按钮类触发器（button、icon、text、自定义）
+ * @param triggerType 触发器类型
+ * @param hasTrigger 是否有自定义触发器
+ * @returns 是否为按钮类触发器
+ */
+export declare const isButtonLikeTrigger: (triggerType?: TriggerType, hasTrigger?: boolean) => boolean;
+/**
+ * 判断展示类型是否需要容器（modal、drawer）
+ * @param displayType 展示类型
+ * @returns 是否需要容器
+ */
+export declare const needsContainer: (displayType?: DisplayType) => boolean;
+/**
+ * 判断展示类型是否需要浮层（popup）
+ * @param displayType 展示类型
+ * @returns 是否需要浮层
+ */
+export declare const needsPopup: (displayType?: DisplayType) => boolean;
+/**
+ * 判断展示类型是否为内联（inline）
+ * @param displayType 展示类型
+ * @returns 是否为内联
+ */
+export declare const isInline: (displayType?: DisplayType) => boolean;

package/es/components/pisellLookup/utils/trigger.js

@@ -0,0 +1,76 @@
+/**
+ * 触发器相关工具函数
+ */
+
+/**
+ * 根据触发器类型获取默认的展示类型
+ * @param triggerType 触发器类型
+ * @param hasTrigger 是否有自定义触发器
+ * @returns 默认的展示类型
+ */
+export var getDefaultDisplayType = function getDefaultDisplayType(triggerType, hasTrigger) {
+  // 如果有自定义触发器，默认使用 modal
+  if (hasTrigger) {
+    return 'modal';
+  }
+
+  // 根据触发器类型判断
+  if (triggerType === 'input') {
+    return 'inline';
+  }
+
+  // button、icon、text 默认使用 modal
+  if (triggerType === 'button' || triggerType === 'icon' || triggerType === 'text') {
+    return 'modal';
+  }
+
+  // 默认使用 detached
+  return 'detached';
+};
+
+/**
+ * 判断是否为输入框触发器
+ * @param triggerType 触发器类型
+ * @returns 是否为输入框触发器
+ */
+export var isInputTrigger = function isInputTrigger(triggerType) {
+  return triggerType === 'input';
+};
+
+/**
+ * 判断是否为按钮类触发器（button、icon、text、自定义）
+ * @param triggerType 触发器类型
+ * @param hasTrigger 是否有自定义触发器
+ * @returns 是否为按钮类触发器
+ */
+export var isButtonLikeTrigger = function isButtonLikeTrigger(triggerType, hasTrigger) {
+  if (hasTrigger) return true;
+  return triggerType === 'button' || triggerType === 'icon' || triggerType === 'text';
+};
+
+/**
+ * 判断展示类型是否需要容器（modal、drawer）
+ * @param displayType 展示类型
+ * @returns 是否需要容器
+ */
+export var needsContainer = function needsContainer(displayType) {
+  return displayType === 'modal' || displayType === 'drawer';
+};
+
+/**
+ * 判断展示类型是否需要浮层（popup）
+ * @param displayType 展示类型
+ * @returns 是否需要浮层
+ */
+export var needsPopup = function needsPopup(displayType) {
+  return displayType === 'popup';
+};
+
+/**
+ * 判断展示类型是否为内联（inline）
+ * @param displayType 展示类型
+ * @returns 是否为内联
+ */
+export var isInline = function isInline(displayType) {
+  return displayType === 'inline';
+};

package/es/components/pisellMultipleSelect/PisellMultipleSelect.less

@@ -64,16 +64,16 @@
   // 多选模式下的特殊样式（Token 部分支持，Less 补充细节）
   :global {
     // 选择框垂直内边距（多选时需要更小的内边距以容纳标签）
-    .ant-select-multiple .ant-select-selector {
+    .pisell-lowcode-select-multiple .pisell-lowcode-select-selector {
       padding: 6px 16px !important;
     }
 
     // 标签圆角（Token 不支持 multipleItemBorderRadius）
-    .ant-select-selection-item {
+    .pisell-lowcode-select-selection-item {
       border-radius: 6px !important;
       padding: 6px 10px !important;
       margin-inline-end: 4px !important;
-      
+
       // 确保标签内容垂直居中
       &-content {
         line-height: 24px !important;
@@ -90,7 +90,7 @@
     }
 
     // hover 边框颜色（Token 不支持 colorBorderHover）
-    .ant-select-multiple:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-select-open) {
+    .pisell-lowcode-select-multiple:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input):not(.ant-select-open) {
       .ant-select-selector:hover {
         border-color: #D6BBFB !important;
       }
@@ -108,17 +108,17 @@
   .pisell-select-search-input {
     padding: 9px 10px !important;
     font-size: 14px;
-    
+
     .ant-input {
       font-size: 14px !important;
       color: #344054 !important;
-      
+
       &::placeholder {
         color: #98A2B3 !important;
         font-size: 12px !important;
       }
     }
-    
+
     &:hover,
     &:focus-within {
       background-color: transparent !important;

package/es/components/pisellSingleLineText/PisellSingleLineText.less

@@ -1,5 +1,6 @@
 /**
  * PisellSingleLineText 组件样式
+ * 不依赖全局 antd token，使用内置样式
  */
 
 .pisell-single-line-text {
@@ -7,16 +8,154 @@
     position: relative;
     width: 100%;
 
-    // 可以在这里添加自定义输入框样式
-    .ant-input {
-      // 保持 Ant Design 默认样式
+    // Input 组件内置样式，覆盖 antd token 配置
+    .ant-input,
+    .ant-input-affix-wrapper {
+      // 基础样式（基于 Figma 设计规范）
+      font-size: 16px !important;
+      line-height: 24px !important;
+      
+      // 边框和圆角
+      border-radius: 8px !important;
+      border: 1px solid #D0D5DD !important; // Gray/300
+      
+      // 内边距（Figma: 16px 12px）
+      padding: 12px 16px !important;
+      height: 48px !important; // 12px + 24px + 12px = 48px
+      
+      // 颜色
+      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],
+      &.ant-input-disabled {
+        background-color: #F9FAFB !important; // Gray/50
+        color: #98A2B3 !important; // Gray/400
+        border-color: #D0D5DD !important;
+        cursor: not-allowed !important;
+      }
+    }
+    
+    // 前后缀容器样式
+    .ant-input-affix-wrapper {
+      padding: 0 !important;
+      
+      .ant-input-prefix {
+        margin-right: 8px;
+        margin-left: 16px;
+        color: #667085; // Gray/500
+        font-size: 16px;
+      }
+      
+      .ant-input-suffix {
+        margin-left: 8px;
+        margin-right: 16px;
+        color: #667085; // Gray/500
+        font-size: 16px;
+      }
+      
+      .ant-input {
+        padding: 12px 0 !important;
+        border: none !important;
+        box-shadow: none !important;
+        
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+    }
+    
+    // 前后置标签样式
+    .ant-input-group-wrapper {
+      .ant-input-group-addon {
+        background-color: #FFFFFF !important;
+        border: 1px solid #D0D5DD !important;
+        color: #344054 !important; // Gray/700
+        font-size: 16px !important;
+        padding: 12px 16px !important;
+        
+        &:first-child {
+          border-right: none !important;
+          border-radius: 8px 0 0 8px !important;
+        }
+        
+        &:last-child {
+          border-left: none !important;
+          border-radius: 0 8px 8px 0 !important;
+        }
+      }
+      
+      .ant-input-wrapper {
+        .ant-input,
+        .ant-input-affix-wrapper {
+          border-radius: 0 !important;
+          
+          &:first-child {
+            border-radius: 8px 0 0 8px !important;
+          }
+          
+          &:last-child {
+            border-radius: 0 8px 8px 0 !important;
+          }
+        }
+      }
+    }
+    
+    // 清空按钮样式
+    .ant-input-clear-icon {
+      color: #667085 !important; // Gray/500
+      font-size: 14px !important;
+      
+      &:hover {
+        color: #344054 !important; // Gray/700
+      }
+    }
+    
+    // 字数统计样式
+    .ant-input-show-count-suffix {
+      color: #667085 !important; // Gray/500
+      font-size: 14px !important;
+    }
+    
+    // 错误状态样式
+    .ant-input-status-error,
+    .ant-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
+      }
     }
   }
 
   &-error {
     margin-top: 4px;
     font-size: 12px;
-    color: #ff4d4f;
+    color: #D92D20; // Error/600
     line-height: 1.5;
     animation: fadeIn 0.3s ease-in-out;
   }

package/es/components/pisellSingleSelect/PisellSingleSelect.less

@@ -64,8 +64,8 @@
   // hover 边框颜色（Token 不支持 colorBorderHover）
   :global {
     // hover 边框颜色
-    .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-select-open) {
-      .ant-select-selector:hover {
+    .pisell-lowcode-select:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input):not(.pisell-lowcode-select-open) {
+      .pisell-lowcode-select-selector:hover {
         border-color: #D6BBFB !important;
       }
     }
@@ -82,17 +82,17 @@
   .pisell-select-search-input {
     padding: 9px 10px !important;
     font-size: 14px;
-    
-    .ant-input {
+
+    .pisell-lowcode-input {
       font-size: 14px !important;
       color: #344054 !important;
-      
+
       &::placeholder {
         color: #98A2B3 !important;
         font-size: 12px !important;
       }
     }
-    
+
     &:hover,
     &:focus-within {
       background-color: transparent !important;

package/es/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import 'dayjs/locale/zh-cn';
+import 'dayjs/locale/en';
+import type { PisellTimeRangeDisplayProps } from './types';
+import './PisellTimeRangeDisplay.less';
+/**
+ * PisellTimeRangeDisplay 组件
+ *
+ * @description
+ * 纯展示型时间区间组件，将 startAt / endAt 格式化为「时间区间 + 持续时间」。
+ * - 同一天：HH:mm-HH:mm，可选显示日期/星期
+ * - 跨天：起止日期时间
+ * - 持续时间：d h m s 格式
+ * - 字段顺序由 fieldOrder 控制，可将 duration 放在中间
+ *
+ * @example
+ * <PisellTimeRangeDisplay
+ *   startAt="2026-02-04 09:00"
+ *   endAt="2026-02-04 18:00"
+ * />
+ * // => "09:00-18:00" + "9h"
+ *
+ * <PisellTimeRangeDisplay
+ *   startAt={start}
+ *   endAt={end}
+ *   fields={{ fieldOrder: ['time', 'duration', 'date', 'weekday'] }}
+ *   showDateForSameDay
+ * />
+ */
+export declare const PisellTimeRangeDisplay: React.FC<PisellTimeRangeDisplayProps>;
+declare const _default: React.NamedExoticComponent<PisellTimeRangeDisplayProps>;
+export default _default;