@pisell/materials 1.0.1034 → 1.0.1035

package/es/components/pisellCurrency/PisellCurrency.less

@@ -1,43 +1,181 @@
-// PisellCurrency 组件样式
+/**
+ * PisellCurrency 组件样式
+ * 基于 Figma 设计规范，与 PisellNumber / SingleLineText 设计体系一致，覆盖时使用 pisell-lowcode-xxx
+ */
 
 .pisell-currency {
-  // 基础样式
   display: inline-block;
+  width: 100%;
 
-  // 只读态样式
-  &-read {
-    color: rgba(0, 0, 0, 0.85);
-    line-height: 1.5715;
-    
-    // 货币数值可以加粗显示（可选）
-    font-weight: 500;
-  }
-
-  // 编辑态样式
   &-edit {
     position: relative;
+    width: 100%;
+
+    // InputNumber 外层（Figma 设计规范，无边框避免双边框）
+    .pisell-lowcode-input-number {
+      width: 100% !important;
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border-radius: 8px !important;
+      border: none !important;
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+
+      // 内层 input
+      .pisell-lowcode-input-number-input {
+        height: 46px !important; // 48 - 2px border
+        padding: 12px 16px !important;
+        font-size: 16px !important;
+        line-height: 24px !important;
+        color: #101828 !important;
+        background: transparent !important;
+        border: none !important;
+
+        &::placeholder {
+          color: #667085 !important; // Gray/500
+        }
+      }
+
+      // 聚焦态
+      &.pisell-lowcode-input-number-focused,
+      &: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(.pisell-lowcode-input-number-disabled):not(.pisell-lowcode-input-number-focused) {
+        border-color: #b692f6 !important; // Primary/400
+      }
+
+      // 禁用态
+      &.pisell-lowcode-input-number-disabled {
+        background-color: #f9fafb !important; // Gray/50
+        border-color: #d0d5dd !important;
+        cursor: not-allowed !important;
+
+        .pisell-lowcode-input-number-input {
+          color: #98a2b3 !important; // Gray/400
+          cursor: not-allowed !important;
+        }
+      }
+
+      // 货币符号：前缀
+      .pisell-lowcode-input-number-prefix {
+        margin-right: 8px;
+        margin-left: 16px;
+        color: #667085; // Gray/500
+        font-size: 16px;
+      }
+
+      // 货币符号：后置（addonAfter）
+      .pisell-lowcode-input-number-suffix {
+        margin-left: 8px;
+        margin-right: 16px;
+        color: #667085;
+        font-size: 16px;
+      }
+
+      // addonBefore / addonAfter 包裹（InputNumber 后置符号可能用 addon 渲染）
+      .pisell-lowcode-input-number-group-addon {
+        background-color: #ffffff !important;
+        border: 1px solid #d0d5dd !important;
+        color: #344054; // 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;
+        }
+      }
+
+      // 步进器按钮（controls）
+      .pisell-lowcode-input-number-handler-wrap {
+        border-left: 1px solid #d0d5dd !important;
+        background: #ffffff !important;
 
-    // 错误提示
-    .pisell-currency-error {
-      margin-top: 4px;
-      color: #ff4d4f;
-      font-size: 14px;
-      line-height: 1.5;
+        .pisell-lowcode-input-number-handler {
+          color: #667085;
+          border-color: #d0d5dd;
+
+          &:hover {
+            color: #344054;
+          }
+
+          &.pisell-lowcode-input-number-handler-up-disabled,
+          &.pisell-lowcode-input-number-handler-down-disabled {
+            color: #98a2b3;
+            cursor: not-allowed;
+          }
+        }
+      }
+
+      // 错误状态
+      &.pisell-lowcode-input-number-status-error {
+        border-color: #fda29b !important; // Error/300
+
+        &.pisell-lowcode-input-number-focused,
+        &:focus-within {
+          border-color: #f97066 !important; // Error/400
+          box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
+        }
+
+        &:hover:not(:focus-within) {
+          border-color: #f97066 !important;
+        }
+      }
     }
   }
 
-  // 禁用态样式
+  // 错误提示（与设计体系一致）
+  &-error {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #d92d20; // Error/600
+    line-height: 1.5;
+    animation: pisell-currency-fadeIn 0.3s ease-in-out;
+  }
+
+  // 只读态（Figma: Gray/900, 16px, Medium, line-height 24px）
+  &-read {
+    color: #101828; // Gray/900
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0;
+  }
+
   &-disabled {
-    // 继承 Ant Design InputNumber 的禁用样式
+    opacity: 0.4;
+    cursor: not-allowed;
   }
-  
-  // 负数显示为红色（可选）
+
+  // 负数显示（与设计体系 Error 色一致）
   &.negative {
-    color: #ff4d4f;
+    color: #d92d20; // Error/600
   }
-  
-  // 正数显示为绿色（可选，用于收益场景）
+
+  // 正数高亮（收益等场景）
   &.positive {
     color: #52c41a;
   }
 }
+
+@keyframes pisell-currency-fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import * as react16 from "react";
+import * as react9 from "react";
 
 //#region src/components/pisellDatePicker/index.d.ts
-declare const PisellDatePicker: (props: any) => react16.JSX.Element;
+declare const PisellDatePicker: (props: any) => react9.JSX.Element;
 //#endregion
 export { PisellDatePicker };

package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js

@@ -43,7 +43,7 @@ import "./PisellDateTimeDisplay.less";
 */
 const PisellDateTimeDisplay = (props) => {
 	var _ref, _presetSource$localeK;
-	const { layout = "horizontal", textAlign = "center", fields, formatByLocale, timeFormat, dateFormat, weekdayFormat, customFormat, inlineSeparator = " · ", containerStyle, timeStyle, dateStyle, weekdayStyle, refreshInterval, disableAutoRefresh = false, locale, onTimeUpdate, onClick, className, style } = props;
+	const { value: valueProp, layout = "horizontal", textAlign = "center", fields, formatByLocale, timeFormat, dateFormat, weekdayFormat, customFormat, inlineSeparator = " · ", containerStyle, timeStyle, dateStyle, weekdayStyle, refreshInterval, disableAutoRefresh = false, locale, onTimeUpdate, onClick, className, style } = props;
 	const localeKey = getDayjsLocale(locale);
 	const baseLocale = localeKey.split("-")[0];
 	const presetSource = formatByLocale !== null && formatByLocale !== void 0 ? formatByLocale : DATETIME_DISPLAY_FORMATS;
@@ -54,12 +54,13 @@ const PisellDateTimeDisplay = (props) => {
 	const effectiveWeekdayFormat = _objectSpread2(_objectSpread2({}, preset.weekdayFormat), weekdayFormat);
 	const currentTime = useCurrentTime({
 		refreshInterval: refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : getRefreshInterval(effectiveTimeFormat),
-		disabled: disableAutoRefresh,
+		disabled: disableAutoRefresh || valueProp !== void 0,
 		locale,
 		onUpdate: onTimeUpdate
 	});
+	const displayTime = valueProp !== void 0 && valueProp !== null ? dayjs(valueProp) : currentTime;
 	if (customFormat) {
-		const formattedTime = currentTime.format(customFormat);
+		const formattedTime = displayTime.format(customFormat);
 		const containerInlineStyle$1 = _objectSpread2({
 			background: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.background,
 			borderRadius: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.borderRadius,
@@ -80,7 +81,7 @@ const PisellDateTimeDisplay = (props) => {
 		"weekday"
 	] } = effectiveFields || {};
 	const referenceDate = dayjs();
-	const relativeDay = (effectiveDateFormat === null || effectiveDateFormat === void 0 ? void 0 : effectiveDateFormat.showRelativeDay) ? getRelativeDay(currentTime, referenceDate) : null;
+	const relativeDay = (effectiveDateFormat === null || effectiveDateFormat === void 0 ? void 0 : effectiveDateFormat.showRelativeDay) ? getRelativeDay(displayTime, referenceDate) : null;
 	const hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
 	const containerInlineStyle = _objectSpread2({
 		background: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.background,
@@ -95,20 +96,20 @@ const PisellDateTimeDisplay = (props) => {
 		switch (fieldType) {
 			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
 			}) : null;
 			case "weekday": return showWeekday && !hideWeekdayWhenDateRelative ? /* @__PURE__ */ React.createElement(WeekdayDisplay, {
 				key: "weekday",
-				weekday: currentTime,
+				weekday: displayTime,
 				format: effectiveWeekdayFormat,
 				style: weekdayStyle
 			}) : null;
@@ -132,12 +133,12 @@ const PisellDateTimeDisplay = (props) => {
 	if (renderedFields.length === 0) return null;
 	if (layout === "horizontal") {
 		const timeField = showTime ? renderField("time") : null;
-		const isChinese$1 = isChinese(currentTime.locale());
+		const isChinese$1 = isChinese(displayTime.locale());
 		if (showDate && showWeekday) {
 			var _labels$relativeDay;
 			const labels = effectiveDateFormat === null || effectiveDateFormat === void 0 ? void 0 : effectiveDateFormat.relativeDayLabels;
-			const 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$1 ? currentTime.format("M月D日") : currentTime.format("D MMM");
-			const weekdayStr = currentTime.format("ddd");
+			const 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$1 ? displayTime.format("M月D日") : displayTime.format("D MMM");
+			const weekdayStr = displayTime.format("ddd");
 			const combinedStr = relativeDay ? dateStr : isChinese$1 ? `${weekdayStr} ${dateStr}` : `${weekdayStr}, ${dateStr}`;
 			const dateInlineStyle = {
 				fontSize: dateStyle === null || dateStyle === void 0 ? void 0 : dateStyle.fontSize,

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

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

package/es/components/pisellEmail/PisellEmail.d.ts

@@ -3,37 +3,6 @@ import React from "react";
 import "./PisellEmail.less";
 
 //#region src/components/pisellEmail/PisellEmail.d.ts
-/**
- * PisellEmail 邮箱地址组件
- *
- * 邮箱地址输入/展示组件，支持只读、编辑、禁用三种状态。
- * 基于 Ant Design AutoComplete 和 Input 组件开发，提供邮箱格式校验、域名智能补全、
- * mailto 邮件发送和域名隐藏功能。
- *
- * @param props 组件 Props
- *
- * @example
- * // 编辑态（邮箱输入）
- * <PisellEmail
- *   placeholder="请输入邮箱地址"
- *   required
- * />
- *
- * @example
- * // 只读态（可发邮件）
- * <PisellEmail
- *   mode="read"
- *   value="user@example.com"
- *   enableMailto
- * />
- *
- * @example
- * // 域名补全
- * <PisellEmail
- *   enableAutoComplete
- *   autoCompleteDomains={['gmail.com', 'company.com']}
- * />
- */
-declare const PisellEmail: React.FC<PisellEmailProps>;
+declare const _default: React.NamedExoticComponent<PisellEmailProps>;
 //#endregion
-export { PisellEmail };
+export { _default };

package/es/components/pisellEmail/PisellEmail.js

@@ -51,4 +51,4 @@ var PisellEmail_default = React.memo(PisellEmail, (prevProps, nextProps) => {
 });
 
 //#endregion
-export { PisellEmail };
+export { PisellEmail_default as default };

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/index.d.ts

@@ -1,2 +1,2 @@
 import { MailtoOptions, PisellEmailProps } from "./types.js";
-import { PisellEmail } from "./PisellEmail.js";
+import { _default } from "./PisellEmail.js";