@pisell/materials 6.3.27 → 6.3.28

package/es/components/pisellDataSourceContainer/components/Table/index.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["serverActions", "refManager", "columns", "scopeId"];
+var _excluded = ["serverActions", "refManager", "columns", "scopeId", "__id"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -19,14 +19,16 @@ var WithTable = /*#__PURE__*/forwardRef(function (props) {
     columns = props.columns,
     _props$scopeId = props.scopeId,
     scopeId = _props$scopeId === void 0 ? 'table' : _props$scopeId,
+    __id = props.__id,
     otherProps = _objectWithoutProperties(props, _excluded);
   var data = listAction.data,
     loading = listAction.loading;
-  // 🔥 使用 useColumns hook 管理列状态
+  // 🔥 使用 useColumns hook 管理列状态（支持本地缓存）
   var _useColumns = useColumns({
       columns: columns || [],
       scopeId: scopeId,
-      refManager: refManager
+      refManager: refManager,
+      __id: __id
     }),
     visibleColumns = _useColumns.visibleColumns;
   return /*#__PURE__*/React.createElement(Table, _extends({}, otherProps, {

package/es/components/pisellDataSourceContainer/components/Table/useColumns.d.ts

@@ -6,6 +6,7 @@ interface UseColumnsParams {
     columns: any[];
     scopeId: string;
     refManager: RefManagerContextType;
+    __id?: string;
 }
 declare const useColumns: (params: UseColumnsParams) => {
     visibleColumns: any[];

package/es/components/pisellDataSourceContainer/components/Table/useColumns.js

@@ -6,6 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useState, useEffect, useMemo } from 'react';
 import { COLUMNS_SHARED_STATE_KEYS } from "../ColumnsSetting";
+import { mergeColumnSettingSimple } from "../ColumnsSetting/utils";
 
 /**
  * useColumns Hook 参数
@@ -14,7 +15,8 @@ import { COLUMNS_SHARED_STATE_KEYS } from "../ColumnsSetting";
 var useColumns = function useColumns(params) {
   var columns = params.columns,
     scopeId = params.scopeId,
-    refManager = params.refManager;
+    refManager = params.refManager,
+    __id = params.__id;
 
   // 本地状态：存储列配置
   var _useState = useState([]),
@@ -23,14 +25,30 @@ var useColumns = function useColumns(params) {
     setColumnSettings = _useState2[1];
   useEffect(function () {
     if (!(columns !== null && columns !== void 0 && columns.length)) return;
-    var settings = columns.map(function (col, index) {
+
+    // 🔄 合并本地缓存和默认配置
+    var mergedColumns = mergeColumnSettingSimple({
+      columns: columns.map(function (col, index) {
+        return {
+          key: col.key || col.dataIndex,
+          dataIndex: col.dataIndex,
+          title: col.title,
+          titleString: typeof col.title === 'string' ? col.title : col.dataIndex,
+          isShow: typeof col.isShow === 'boolean' ? col.isShow : true,
+          sortIndex: index,
+          fixed: col.fixed
+        };
+      }),
+      componentId: __id
+    });
+    var settings = mergedColumns.map(function (col) {
       return {
-        key: col.key || col.dataIndex,
+        key: col.key,
         dataIndex: col.dataIndex,
         title: col.title,
-        titleString: typeof col.title === 'string' ? col.title : col.dataIndex,
-        isShow: typeof col.isShow === 'boolean' ? col.isShow : true,
-        sortIndex: index,
+        titleString: col.titleString,
+        isShow: col.isShow,
+        sortIndex: col.sortIndex,
         fixed: col.fixed
       };
     });
@@ -38,7 +56,7 @@ var useColumns = function useColumns(params) {
     // 写入共享状态（使用统一的 key，供 ColumnsSetting 读取）
     refManager.setSharedState(COLUMNS_SHARED_STATE_KEYS.columnsValue(scopeId), settings);
     setColumnSettings(settings);
-  }, [columns, refManager, scopeId]);
+  }, [columns, refManager, scopeId, __id]);
 
   /**
    * 订阅：监听 ColumnsSetting 的修改
@@ -47,22 +65,26 @@ var useColumns = function useColumns(params) {
     var unsubscribe = refManager.subscribeSharedState(COLUMNS_SHARED_STATE_KEYS.columnsChange(scopeId), setColumnSettings);
     return unsubscribe;
   }, [refManager, scopeId]);
-  var visibleColumns = useMemo(function () {
-    if (!(columns !== null && columns !== void 0 && columns.length)) return [];
-    if (!(columnSettings !== null && columnSettings !== void 0 && columnSettings.length)) return columns;
+  return useMemo(function () {
+    if (!(columns !== null && columns !== void 0 && columns.length)) return {
+      visibleColumns: []
+    };
+    if (!(columnSettings !== null && columnSettings !== void 0 && columnSettings.length)) return {
+      visibleColumns: columns
+    };
 
     // 创建 dataIndex 到原始 column 的映射
     var columnMap = new Map(columns.map(function (col) {
       return [col.dataIndex, col];
     }));
-    return columnSettings.filter(function (setting) {
+    var visibleColumns = columnSettings.filter(function (setting) {
       return setting.isShow;
     }).map(function (setting) {
       return columnMap.get(setting.dataIndex);
-    }).filter(Boolean); // 过滤掉不存在的 column
+    }).filter(Boolean);
+    return {
+      visibleColumns: visibleColumns
+    };
   }, [columns, columnSettings]);
-  return {
-    visibleColumns: visibleColumns
-  };
 };
 export default useColumns;

package/es/components/pisellDataSourceContainer/utils/formatData.d.ts

@@ -0,0 +1,9 @@
+declare const formatListResult: (result: any) => {
+    list: any;
+    count: any;
+};
+declare const formatListParams: (params: any) => {
+    page: any;
+    pageSize: any;
+};
+export { formatListParams, formatListResult };

package/es/components/pisellDatePicker/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const PisellDatePicker: (props: any) => import("react").JSX.Element;
 export default PisellDatePicker;

package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js

@@ -12,6 +12,7 @@ import { useCurrentTime } from "./hooks";
 import { getRefreshInterval, isChinese as checkIsChinese, getRelativeDay, getRelativeDayLabel, getDayjsLocale } from "./utils";
 import { TimeDisplay, DateDisplay, WeekdayDisplay } from "./components";
 import { DATETIME_DISPLAY_FORMATS } from "./formats/dateTimeDisplayFormats";
+import useEngineContext from "../../hooks/useEngineContext";
 import "./PisellDateTimeDisplay.less";
 
 /**
@@ -42,8 +43,9 @@ import "./PisellDateTimeDisplay.less";
  * />
  */
 export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
-  var _ref, _presetSource$localeK;
-  var _props$layout = props.layout,
+  var _context$engine, _ref, _presetSource$localeK;
+  var valueProp = props.value,
+    _props$layout = props.layout,
     layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
     _props$textAlign = props.textAlign,
     textAlign = _props$textAlign === void 0 ? 'center' : _props$textAlign,
@@ -67,9 +69,10 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
     onClick = props.onClick,
     className = props.className,
     style = props.style;
-
+  var context = useEngineContext();
+  var resolvedLocale = locale || (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || 'en';
   // 多语言格式：formatByLocale 优先，否则用内置 DATETIME_DISPLAY_FORMATS；再与单项 props 合并（单项优先）
-  var localeKey = getDayjsLocale(locale);
+  var localeKey = getDayjsLocale(resolvedLocale);
   var baseLocale = localeKey.split('-')[0];
   var presetSource = formatByLocale !== null && formatByLocale !== void 0 ? formatByLocale : DATETIME_DISPLAY_FORMATS;
   var preset = (_ref = (_presetSource$localeK = presetSource[localeKey]) !== null && _presetSource$localeK !== void 0 ? _presetSource$localeK : presetSource[baseLocale]) !== null && _ref !== void 0 ? _ref : {};
@@ -81,17 +84,20 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
   // 计算刷新间隔
   var computedRefreshInterval = refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : getRefreshInterval(effectiveTimeFormat);
 
-  // 使用自定义 hook 管理当前时间
+  // 使用自定义 hook 管理当前时间（仅在没有 value 时用于展示）
   var currentTime = useCurrentTime({
     refreshInterval: computedRefreshInterval,
-    disabled: disableAutoRefresh,
-    locale: locale,
+    disabled: disableAutoRefresh || valueProp !== undefined,
+    locale: resolvedLocale,
     onUpdate: onTimeUpdate
   });
 
+  // 展示时间：传入 value 时用 value 并应用当前 locale，否则用已带 locale 的 currentTime
+  var displayTime = valueProp !== undefined && valueProp !== null ? dayjs(valueProp).locale(localeKey) : currentTime;
+
   // 如果有自定义格式化，直接使用
   if (customFormat) {
-    var formattedTime = currentTime.format(customFormat);
+    var formattedTime = displayTime.format(customFormat);
     var _containerInlineStyle = _objectSpread({
       background: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.background,
       borderRadius: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.borderRadius,
@@ -120,7 +126,7 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
 
   // 日期与星期一体：若日期以相对日（今天/昨天/明天）展示，则不展示星期
   var referenceDate = dayjs();
-  var relativeDay = effectiveDateFormat !== null && effectiveDateFormat !== void 0 && effectiveDateFormat.showRelativeDay ? getRelativeDay(currentTime, referenceDate) : null;
+  var relativeDay = effectiveDateFormat !== null && effectiveDateFormat !== void 0 && effectiveDateFormat.showRelativeDay ? getRelativeDay(displayTime, referenceDate) : null;
   var hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
 
   // 构建容器样式
@@ -140,14 +146,14 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
       case 'time':
         return showTime ? /*#__PURE__*/React.createElement(TimeDisplay, {
           key: "time",
-          time: currentTime,
+          time: displayTime,
           format: effectiveTimeFormat,
           style: timeStyle
         }) : null;
       case 'date':
         return showDate ? /*#__PURE__*/React.createElement(DateDisplay, {
           key: "date",
-          date: currentTime,
+          date: displayTime,
           format: effectiveDateFormat,
           referenceDate: dayjs(),
           style: dateStyle
@@ -155,7 +161,7 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
       case 'weekday':
         return showWeekday && !hideWeekdayWhenDateRelative ? /*#__PURE__*/React.createElement(WeekdayDisplay, {
           key: "weekday",
-          weekday: currentTime,
+          weekday: displayTime,
           format: effectiveWeekdayFormat,
           style: weekdayStyle
         }) : null;
@@ -203,15 +209,15 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
     var timeField = showTime ? renderField('time') : null;
 
     // 判断是否为中文环境
-    var currentLocale = currentTime.locale();
+    var currentLocale = displayTime.locale();
     var isChinese = checkIsChinese(currentLocale);
 
     // 当同时显示日期和星期时，使用合并格式；有相对日时只展示相对日，不展示具体日期与星期
     if (showDate && showWeekday) {
       var _labels$relativeDay;
       var labels = effectiveDateFormat === null || effectiveDateFormat === void 0 ? void 0 : effectiveDateFormat.relativeDayLabels;
-      var dateStr = relativeDay ? (_labels$relativeDay = labels === null || labels === void 0 ? void 0 : labels[relativeDay]) !== null && _labels$relativeDay !== void 0 ? _labels$relativeDay : getRelativeDayLabel(relativeDay, currentTime.locale()) : isChinese ? currentTime.format('M月D日') : currentTime.format('D MMM');
-      var weekdayStr = currentTime.format('ddd');
+      var dateStr = relativeDay ? (_labels$relativeDay = labels === null || labels === void 0 ? void 0 : labels[relativeDay]) !== null && _labels$relativeDay !== void 0 ? _labels$relativeDay : getRelativeDayLabel(relativeDay, displayTime.locale()) : isChinese ? displayTime.format('M月D日') : displayTime.format('D MMM');
+      var weekdayStr = displayTime.format('ddd');
       // 相对日替换掉原日期展示：有今天/昨天/明天时只显示相对日，不拼接具体日期或星期
       var combinedStr = relativeDay ? dateStr : isChinese ? "".concat(weekdayStr, " ").concat(dateStr) : "".concat(weekdayStr, ", ").concat(dateStr);
 

package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.less

@@ -64,9 +64,10 @@
     line-height: 1.2;
   }
 
-  // 分隔符
+  // 分隔符：保留空格占位，避免纯空格时被折叠不显示
   &-separator {
     display: inline-block;
+    white-space: pre;
   }
 
   // 自定义格式化

package/es/components/pisellDateTimeDisplay/hooks/useCurrentTime.js

@@ -8,6 +8,7 @@ import { useState, useEffect } from 'react';
 import dayjs from 'dayjs';
 import { getDayjsLocale } from "../utils/localeUtils";
 import usePisellConfig from "../../pisell-config-provider/hooks/usePisellConfig";
+import useEngineContext from "../../../hooks/useEngineContext";
 
 /**
  * useCurrentTime Hook 配置项
@@ -33,6 +34,7 @@ import usePisellConfig from "../../pisell-config-provider/hooks/usePisellConfig"
  * @returns 当前时间（Dayjs 对象）
  */
 export function useCurrentTime(options) {
+  var _context$engine;
   var _ref = options || {},
     _ref$refreshInterval = _ref.refreshInterval,
     refreshInterval = _ref$refreshInterval === void 0 ? 60000 : _ref$refreshInterval,
@@ -40,13 +42,13 @@ export function useCurrentTime(options) {
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     userLocale = _ref.locale,
     onUpdate = _ref.onUpdate;
-
-  // 获取全局配置中的 locale
   var globalConfig = usePisellConfig();
+  var context = useEngineContext();
   var globalLocale = globalConfig === null || globalConfig === void 0 ? void 0 : globalConfig.locale;
+  var engineLocale = context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale;
 
-  // 获取实际使用的 locale（优先级：用户指定 > 全局配置 > i18n 当前语言）
-  var dayjsLocale = getDayjsLocale(userLocale || globalLocale);
+  // 优先级：用户指定 > 全局配置 > engine.props.locale > 'en'
+  var dayjsLocale = getDayjsLocale(userLocale || globalLocale || engineLocale || 'en');
 
   // 初始化时间
   var _useState = useState(function () {

package/es/components/pisellDateTimeDisplay/types.d.ts

@@ -247,6 +247,11 @@ export interface DateTimeDisplayFormatPreset {
  * PisellDateTimeDisplay 组件 Props
  */
 export interface PisellDateTimeDisplayProps {
+    /**
+     * 传入时展示该时间，不传则展示当前时间（并可按 refreshInterval 刷新）
+     * @description 用于表格列、详情等展示给定时间；支持 dayjs、时间戳、ISO 字符串
+     */
+    value?: Dayjs | string | number;
     /**
      * 布局方向
      * @default 'horizontal'

package/es/components/pisellDateTimeDisplay/utils/localeUtils.d.ts

@@ -14,9 +14,9 @@ export declare function normalizeLocale(locale: string): string;
 export declare function isChinese(locale: string): boolean;
 /**
  * 获取 dayjs 兼容的 locale 代码
- * 未传 locale 时使用 i18n 当前语言（全局配置 / umi_locale），不再使用浏览器语言
+ * 未传 locale 时：优先 materials 当前语言（globalConfig / umi_locale），若为默认 en-US 则用 @pisell/utils getLocale
  * @param locale 原始 locale 代码（可选）
- * @returns dayjs 兼容的 locale 代码
+ * @returns dayjs 兼容的 locale 代码（与已加载的 zh-cn、en 对齐）
  * @example 'zh-CN' -> 'zh-cn', 'en-US' -> 'en'
  */
 export declare function getDayjsLocale(locale?: string): string;

package/es/components/pisellDateTimeDisplay/utils/localeUtils.js

@@ -1,3 +1,4 @@
+import { locales as utilsLocales } from '@pisell/utils';
 import { getCurrentLocale } from "../../../utils/locale";
 
 /**
@@ -21,16 +22,26 @@ export function isChinese(locale) {
   return normalizedLocale.startsWith('zh');
 }
 
+/** dayjs 常用 locale 与项目已加载的 locale 对齐（zh-cn、en），en-us 等统一用 en */
+function toDayjsLoadedLocale(normalized) {
+  if (normalized.startsWith('en')) return 'en';
+  return normalized;
+}
+
 /**
  * 获取 dayjs 兼容的 locale 代码
- * 未传 locale 时使用 i18n 当前语言（全局配置 / umi_locale），不再使用浏览器语言
+ * 未传 locale 时：优先 materials 当前语言（globalConfig / umi_locale），若为默认 en-US 则用 @pisell/utils getLocale
  * @param locale 原始 locale 代码（可选）
- * @returns dayjs 兼容的 locale 代码
+ * @returns dayjs 兼容的 locale 代码（与已加载的 zh-cn、en 对齐）
  * @example 'zh-CN' -> 'zh-cn', 'en-US' -> 'en'
  */
 export function getDayjsLocale(locale) {
   if (!locale) {
-    return normalizeLocale(getCurrentLocale());
+    var fromMaterials = getCurrentLocale();
+    var fromUtils = typeof utilsLocales.getLocale === 'function' ? utilsLocales.getLocale() : undefined;
+    // 优先 materials（umi_locale / ConfigProvider），仅当为默认 en-US 时再用 utils，保证多语言能展示
+    var raw = (fromMaterials && fromMaterials !== 'en-US' ? fromMaterials : undefined) || (typeof fromUtils === 'string' && fromUtils ? fromUtils : undefined) || fromMaterials;
+    return toDayjsLoadedLocale(normalizeLocale(raw));
   }
-  return normalizeLocale(locale);
+  return toDayjsLoadedLocale(normalizeLocale(locale));
 }

package/es/components/pisellDateTimeDisplay/utils/relativeDay.d.ts

@@ -15,6 +15,7 @@ export declare type RelativeDay = 'today' | 'yesterday' | 'tomorrow';
 export declare function getRelativeDay(date: Dayjs, reference: Dayjs): RelativeDay | null;
 /**
  * 根据 locale 返回相对日期的展示文案
+ * 未传 locale 时使用 getDayjsLocale()（与 locales.getLocale 同源）
  *
  * @param day 'today' | 'yesterday' | 'tomorrow'
  * @param locale dayjs locale，如 'zh-cn'、'en'

package/es/components/pisellDateTimeDisplay/utils/relativeDay.js

@@ -1,4 +1,4 @@
-import { isChinese as checkIsChinese } from "./localeUtils";
+import { isChinese as checkIsChinese, getDayjsLocale } from "./localeUtils";
 var LABELS_ZH = {
   today: '今天',
   yesterday: '昨天',
@@ -34,12 +34,14 @@ export function getRelativeDay(date, reference) {
 
 /**
  * 根据 locale 返回相对日期的展示文案
+ * 未传 locale 时使用 getDayjsLocale()（与 locales.getLocale 同源）
  *
  * @param day 'today' | 'yesterday' | 'tomorrow'
  * @param locale dayjs locale，如 'zh-cn'、'en'
  * @returns 如 '今天'、'Today'
  */
 export function getRelativeDayLabel(day, locale) {
-  var isZh = locale ? checkIsChinese(locale) : false;
+  var resolvedLocale = locale !== null && locale !== void 0 ? locale : getDayjsLocale();
+  var isZh = checkIsChinese(resolvedLocale);
   return isZh ? LABELS_ZH[day] : LABELS_EN[day];
 }

package/es/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/es/components/pisellEmail/PisellEmail.stories.js

@@ -19,7 +19,7 @@ import React from 'react';
  * - 白名单/黑名单域名限制
  */
 var meta = {
-  title: '表单/PisellEmail',
+  title: '表单/表单组件/PisellEmail',
   component: PisellEmail,
   parameters: {
     layout: 'centered',

package/es/components/pisellEmail/constants/emailDomains.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 常用邮箱域名列表
+ * 用于域名自动补全功能
+ */
+export declare const COMMON_EMAIL_DOMAINS: string[];

package/es/components/pisellEmail/constants/emailRegex.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 邮箱正则表达式常量
+ */
+/**
+ * 标准邮箱格式正则
+ * 覆盖99%的常见邮箱格式
+ */
+export declare const EMAIL_REGEX: RegExp;
+/**
+ * 严格邮箱格式正则（RFC 5322）
+ * 支持更复杂的邮箱格式，符合 RFC 5322 标准
+ */
+export declare const STRICT_EMAIL_REGEX: RegExp;

package/es/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/es/components/pisellEmail/index.js

@@ -2,4 +2,20 @@
  * PisellEmail 组件导出文件
  */
 
-export { PisellEmail, default } from "./PisellEmail";
+import { getText } from "../../locales";
+import PisellEmail from "./PisellEmail";
+
+/** RecordBoard 列 type 联动排序：内置 A → Z / Z → A */
+PisellEmail.SortOptions = {
+  getSortItems: function getSortItems(fieldKey) {
+    return [{
+      key: "".concat(fieldKey, ":asc"),
+      label: getText('sort-a-z')
+    }, {
+      key: "".concat(fieldKey, ":desc"),
+      label: getText('sort-z-a')
+    }];
+  }
+};
+export { PisellEmail };
+export default PisellEmail;

package/es/components/pisellEmail/utils/domainSuggestions.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 域名补全工具函数（框架占位符）
+ * TODO: 实现完整的补全逻辑
+ */
+/**
+ * 获取邮箱域名补全建议
+ * @param input 用户输入
+ * @param domains 域名列表
+ * @returns 补全建议列表
+ *
+ * @example
+ * getEmailSuggestions('user@g', COMMON_EMAIL_DOMAINS)
+ * // 返回: ['user@gmail.com']
+ */
+export declare function getEmailSuggestions(input: string, domains?: string[]): string[];