@pisell/materials 1.0.1034 → 1.0.1035

package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js

@@ -46,7 +46,7 @@ require("./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 = require_localeUtils.getDayjsLocale(locale);
 	const baseLocale = localeKey.split("-")[0];
 	const presetSource = formatByLocale !== null && formatByLocale !== void 0 ? formatByLocale : require_dateTimeDisplayFormats.DATETIME_DISPLAY_FORMATS;
@@ -57,12 +57,13 @@ const PisellDateTimeDisplay = (props) => {
 	const effectiveWeekdayFormat = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, preset.weekdayFormat), weekdayFormat);
 	const currentTime = require_useCurrentTime.useCurrentTime({
 		refreshInterval: refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : require_getRefreshInterval.getRefreshInterval(effectiveTimeFormat),
-		disabled: disableAutoRefresh,
+		disabled: disableAutoRefresh || valueProp !== void 0,
 		locale,
 		onUpdate: onTimeUpdate
 	});
+	const displayTime = valueProp !== void 0 && valueProp !== null ? (0, dayjs.default)(valueProp) : currentTime;
 	if (customFormat) {
-		const formattedTime = currentTime.format(customFormat);
+		const formattedTime = displayTime.format(customFormat);
 		const containerInlineStyle$1 = require_objectSpread2._objectSpread2({
 			background: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.background,
 			borderRadius: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.borderRadius,
@@ -83,7 +84,7 @@ const PisellDateTimeDisplay = (props) => {
 		"weekday"
 	] } = effectiveFields || {};
 	const referenceDate = (0, dayjs.default)();
-	const relativeDay = (effectiveDateFormat === null || effectiveDateFormat === void 0 ? void 0 : effectiveDateFormat.showRelativeDay) ? require_relativeDay.getRelativeDay(currentTime, referenceDate) : null;
+	const relativeDay = (effectiveDateFormat === null || effectiveDateFormat === void 0 ? void 0 : effectiveDateFormat.showRelativeDay) ? require_relativeDay.getRelativeDay(displayTime, referenceDate) : null;
 	const hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
 	const containerInlineStyle = require_objectSpread2._objectSpread2({
 		background: containerStyle === null || containerStyle === void 0 ? void 0 : containerStyle.background,
@@ -98,20 +99,20 @@ const PisellDateTimeDisplay = (props) => {
 		switch (fieldType) {
 			case "time": return showTime ? /* @__PURE__ */ react.default.createElement(require_TimeDisplay.TimeDisplay, {
 				key: "time",
-				time: currentTime,
+				time: displayTime,
 				format: effectiveTimeFormat,
 				style: timeStyle
 			}) : null;
 			case "date": return showDate ? /* @__PURE__ */ react.default.createElement(require_DateDisplay.DateDisplay, {
 				key: "date",
-				date: currentTime,
+				date: displayTime,
 				format: effectiveDateFormat,
 				referenceDate: (0, dayjs.default)(),
 				style: dateStyle
 			}) : null;
 			case "weekday": return showWeekday && !hideWeekdayWhenDateRelative ? /* @__PURE__ */ react.default.createElement(require_WeekdayDisplay.WeekdayDisplay, {
 				key: "weekday",
-				weekday: currentTime,
+				weekday: displayTime,
 				format: effectiveWeekdayFormat,
 				style: weekdayStyle
 			}) : null;
@@ -135,12 +136,12 @@ const PisellDateTimeDisplay = (props) => {
 	if (renderedFields.length === 0) return null;
 	if (layout === "horizontal") {
 		const timeField = showTime ? renderField("time") : null;
-		const isChinese$1 = require_localeUtils.isChinese(currentTime.locale());
+		const isChinese$1 = require_localeUtils.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 : require_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 : require_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/lib/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/lib/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/lib/components/pisellEmail/PisellEmail.js

@@ -53,4 +53,4 @@ var PisellEmail_default = react.default.memo(PisellEmail, (prevProps, nextProps)
 });
 
 //#endregion
-exports.PisellEmail = PisellEmail;
+exports.default = PisellEmail_default;

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

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