@pisell/materials 1.8.38 → 1.8.41

package/es/components/pisellEmail/PisellEmail.js

@@ -1,8 +1,10 @@
+import { getPisellComponentsThemeConfig } from "../../theme/pisell-components.js";
 import ReadOnlyView from "./components/ReadOnlyView.js";
 import EditView from "./components/EditView.js";
 import DisabledView from "./components/DisabledView.js";
 import React from "react";
 import { getDisplayState } from "@pisell/utils";
+import { ConfigProvider } from "antd";
 import "./PisellEmail.less";
 //#region src/components/pisellEmail/PisellEmail.tsx
 /**
@@ -38,12 +40,17 @@ import "./PisellEmail.less";
 */
 const PisellEmail = (props) => {
 	const { mode = "edit", disabled = false } = props;
-	switch (getDisplayState(mode, disabled)) {
-		case "read": return /* @__PURE__ */ React.createElement(ReadOnlyView, props);
-		case "edit": return /* @__PURE__ */ React.createElement(EditView, props);
-		case "disabled": return /* @__PURE__ */ React.createElement(DisabledView, props);
-		default: return null;
-	}
+	const displayState = getDisplayState(mode, disabled);
+	const render = () => {
+		switch (displayState) {
+			case "read": return /* @__PURE__ */ React.createElement(ReadOnlyView, props);
+			case "edit": return /* @__PURE__ */ React.createElement(EditView, props);
+			case "disabled": return /* @__PURE__ */ React.createElement(DisabledView, props);
+			default: return null;
+		}
+	};
+	const theme = getPisellComponentsThemeConfig();
+	return /* @__PURE__ */ React.createElement(ConfigProvider, { theme }, render());
 };
 var PisellEmail_default = React.memo(PisellEmail, (prevProps, nextProps) => {
 	return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.enableAutoComplete === nextProps.enableAutoComplete;

package/es/components/pisellEmail/PisellEmail.less

@@ -7,98 +7,6 @@
   &-edit {
     position: relative;
     width: 100%;
-
-    // 仅对 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
-      }
-    }
   }
 
   // 错误提示（与设计体系一致）

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

@@ -11,9 +11,9 @@ interface PisellEmptyProps extends EmptyProps {
   icon?: React.ReactNode;
   /** 自定义底部额外操作区域 */
   footer?: React.ReactNode;
-  [key: string]: any;
   /** 最大宽度 */
   maxWidth?: number;
+  [key: string]: any;
 }
 declare const PisellEmpty: (props: PisellEmptyProps) => React.JSX.Element;
 //#endregion

package/es/components/pisellEntityCard/PisellEntityCard.d.ts

@@ -0,0 +1,47 @@
+import { PisellEntityCardProps } from "./types.js";
+import React from "react";
+//#region src/components/pisellEntityCard/PisellEntityCard.d.ts
+/**
+ * PisellEntityCard 实体卡片
+ * 基于 PisellBaseCard，使用结构化配置展示实体信息，支持密度、布局、左滑删除与插槽
+ */
+declare function PisellEntityCard({
+  children,
+  className,
+  style,
+  hoverStyle,
+  activeStyle,
+  disabledStyle,
+  clickable,
+  disabled,
+  onClick,
+  media,
+  primaryText,
+  subtitleText,
+  secondaryTexts,
+  tags,
+  actions,
+  showMedia,
+  showPrimaryText,
+  showSubtitle,
+  showSecondaryText,
+  showTags,
+  showActions,
+  density,
+  layout,
+  width,
+  swipeToDelete,
+  onDelete,
+  tagPosition,
+  contentGap,
+  primaryLineClamp,
+  secondaryLineClamp: secondaryLineClampProp,
+  renderMedia,
+  renderPrimary,
+  renderSubtitle,
+  renderSecondary,
+  renderTags,
+  renderActions
+}: PisellEntityCardProps): React.JSX.Element;
+//#endregion
+export { PisellEntityCard };

package/es/components/pisellEntityCard/PisellEntityCard.js

@@ -0,0 +1,315 @@
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import { PisellBaseCard } from "../pisellBaseCard/PisellBaseCard.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Avatar, Typography } from "antd";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import classNames from "classnames";
+import "./PisellEntityCard.less";
+//#region src/components/pisellEntityCard/PisellEntityCard.tsx
+/** 左滑删除区域宽度（px） */
+const SWIPE_DELETE_WIDTH = 72;
+/** 触发显示删除按钮的滑动阈值（px） */
+const SWIPE_THRESHOLD = 36;
+/**
+* 设计准则（见设计文档 6）：
+* - 当信息字段缺少时，不显示：例如选 B5 但只有 2 条次级，则只展示 2 条，视觉与 B2 一致。
+* - 当字段超出规范时，不展示：例如选 B2 但有 5 条次级，只展示前 2 条。
+*/
+/** 按密度得到次级文案最大行数：B1 不展示，B2=2，B5=5，B9 不限制 */
+function getSecondaryLineClampByDensity(density) {
+	switch (density) {
+		case "B1": return 0;
+		case "B2": return 2;
+		case "B5": return 5;
+		default: return;
+	}
+}
+/** 按密度得到次级文案最大条数（超出则只展示前 N 条） */
+function getSecondaryMaxItemsByDensity(density) {
+	switch (density) {
+		case "B1": return 0;
+		case "B2": return 2;
+		case "B5": return 5;
+		default: return 999;
+	}
+}
+/** 按密度得到标签最大条数（与次级文案规则一致） */
+function getTagsMaxByDensity(density) {
+	switch (density) {
+		case "B1": return 2;
+		case "B2": return 2;
+		case "B5": return 5;
+		default: return 999;
+	}
+}
+/**
+* 渲染媒体区：头像 / 缩略图 / 图标
+*/
+function renderMediaNode(config) {
+	var _config$size, _config$shape;
+	const size = (_config$size = config.size) !== null && _config$size !== void 0 ? _config$size : 40;
+	const sizePx = typeof size === "number" ? `${size}px` : size;
+	const shape = (_config$shape = config.shape) !== null && _config$shape !== void 0 ? _config$shape : "circle";
+	if (config.type === "icon" && config.icon) return /* @__PURE__ */ React.createElement("span", {
+		className: "pisell-entity-card-media pisell-entity-card-media-icon",
+		style: {
+			width: sizePx,
+			height: sizePx,
+			color: config.color,
+			fontSize: sizePx,
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center"
+		}
+	}, config.icon);
+	if (config.type === "avatar" || config.type === "thumbnail") return /* @__PURE__ */ React.createElement(Avatar, {
+		src: config.src,
+		alt: config.alt,
+		shape: shape === "circle" ? "circle" : "square",
+		style: {
+			width: sizePx,
+			height: sizePx,
+			flexShrink: 0
+		},
+		className: "pisell-entity-card-media pisell-entity-card-media-avatar"
+	});
+	return null;
+}
+/**
+* PisellEntityCard 实体卡片
+* 基于 PisellBaseCard，使用结构化配置展示实体信息，支持密度、布局、左滑删除与插槽
+*/
+function PisellEntityCard({ children, className, style, hoverStyle, activeStyle, disabledStyle, clickable = true, disabled = false, onClick, media, primaryText, subtitleText, secondaryTexts = [], tags = [], actions = [], showMedia = true, showPrimaryText = true, showSubtitle = true, showSecondaryText = true, showTags = true, showActions = false, density = "B2", layout = "horizontal", width = "content", swipeToDelete = false, onDelete, tagPosition = "below", contentGap, primaryLineClamp, secondaryLineClamp: secondaryLineClampProp, renderMedia, renderPrimary, renderSubtitle, renderSecondary, renderTags, renderActions }) {
+	const [swipeOffset, setSwipeOffset] = useState(0);
+	const [swipeStart, setSwipeStart] = useState(null);
+	/** 同步写入，保证 touchmove/mousemove 在当次事件流中能读到起始位置（setState 异步会滞后） */
+	const swipeStartDataRef = useRef(null);
+	const swipeOffsetRef = useRef(swipeOffset);
+	swipeOffsetRef.current = swipeOffset;
+	const swipeContainerRef = useRef(null);
+	const secondaryLineClamp = secondaryLineClampProp !== null && secondaryLineClampProp !== void 0 ? secondaryLineClampProp : getSecondaryLineClampByDensity(density);
+	const secondaryMaxItems = getSecondaryMaxItemsByDensity(density);
+	const tagsMaxItems = getTagsMaxByDensity(density);
+	/** 次级文案：按密度截断，缺时不补空（选 B5 仅 2 条则只显示 2 条，与 B2 一致） */
+	const effectiveSecondary = useMemo(() => secondaryLineClamp === 0 ? [] : secondaryTexts.slice(0, secondaryMaxItems), [
+		secondaryTexts,
+		secondaryLineClamp,
+		secondaryMaxItems
+	]);
+	/** 标签：按密度截断，超出规范只展示前 N 个 */
+	const effectiveTags = useMemo(() => tags.slice(0, tagsMaxItems), [tags, tagsMaxItems]);
+	const rootWidthStyle = useMemo(() => {
+		if (width === "full") return { width: "100%" };
+		if (typeof width === "number") return { width: `${width}px` };
+		return { width: "fit-content" };
+	}, [width]);
+	const handleSwipeStart = useCallback((x, isTouch) => {
+		if (!swipeToDelete || !onDelete) return;
+		swipeStartDataRef.current = {
+			x,
+			isTouch
+		};
+		setSwipeStart({
+			x,
+			isTouch
+		});
+	}, [swipeToDelete, onDelete]);
+	/** 左滑删除：手指往左滑 → 内容往左移 → 露出右侧删除。delta = start - currentX：左滑时 currentX 变小 delta>0，取 -delta 为负 offset */
+	const handleSwipeMove = useCallback((currentX) => {
+		const start = swipeStartDataRef.current;
+		if (start === null) return;
+		const delta = start.x - currentX;
+		const next = Math.max(-SWIPE_DELETE_WIDTH, Math.min(0, -delta));
+		swipeOffsetRef.current = next;
+		setSwipeOffset(next);
+	}, []);
+	const handleSwipeEnd = useCallback(() => {
+		const start = swipeStartDataRef.current;
+		const offset = swipeOffsetRef.current;
+		swipeStartDataRef.current = null;
+		if (start === null) return;
+		setSwipeOffset(offset <= -SWIPE_THRESHOLD ? -SWIPE_DELETE_WIDTH : 0);
+		setSwipeStart(null);
+	}, []);
+	/** 文档级鼠标滑动：鼠标移出容器后仍能继续滑动与松手 */
+	useEffect(() => {
+		if ((swipeStart === null || swipeStart === void 0 ? void 0 : swipeStart.isTouch) !== false) return;
+		const onDocMove = (e) => {
+			const start = swipeStartDataRef.current;
+			if (start === null) return;
+			const delta = start.x - e.clientX;
+			const next = Math.max(-SWIPE_DELETE_WIDTH, Math.min(0, -delta));
+			swipeOffsetRef.current = next;
+			setSwipeOffset(next);
+		};
+		const onDocUp = () => {
+			const start = swipeStartDataRef.current;
+			const offset = swipeOffsetRef.current;
+			if (start === null) return;
+			setSwipeOffset(offset <= -SWIPE_THRESHOLD ? -SWIPE_DELETE_WIDTH : 0);
+			setSwipeStart(null);
+		};
+		document.addEventListener("mousemove", onDocMove);
+		document.addEventListener("mouseup", onDocUp);
+		return () => {
+			document.removeEventListener("mousemove", onDocMove);
+			document.removeEventListener("mouseup", onDocUp);
+		};
+	}, [swipeStart === null || swipeStart === void 0 ? void 0 : swipeStart.isTouch]);
+	const onTouchStart = useCallback((e) => handleSwipeStart(e.touches[0].clientX, true), [handleSwipeStart]);
+	const onTouchMove = useCallback((e) => {
+		if (swipeStartDataRef.current !== null) {
+			e.preventDefault();
+			handleSwipeMove(e.touches[0].clientX);
+		}
+	}, [handleSwipeMove]);
+	const onTouchEnd = useCallback(() => handleSwipeEnd(), [handleSwipeEnd]);
+	const onMouseDown = useCallback((e) => {
+		e.preventDefault();
+		handleSwipeStart(e.clientX, false);
+	}, [handleSwipeStart]);
+	const onMouseMove = useCallback((e) => {
+		var _swipeStartDataRef$cu;
+		if (((_swipeStartDataRef$cu = swipeStartDataRef.current) === null || _swipeStartDataRef$cu === void 0 ? void 0 : _swipeStartDataRef$cu.isTouch) === false) handleSwipeMove(e.clientX);
+	}, [handleSwipeMove]);
+	const onMouseUp = useCallback(() => handleSwipeEnd(), [handleSwipeEnd]);
+	const onMouseLeave = useCallback(() => {
+		if (swipeStartDataRef.current !== null) {
+			swipeStartDataRef.current = null;
+			setSwipeOffset(0);
+			setSwipeStart(null);
+		}
+	}, []);
+	const handleDeleteClick = useCallback((e) => {
+		e.stopPropagation();
+		onDelete === null || onDelete === void 0 || onDelete();
+	}, [onDelete]);
+	const hasSwipe = swipeToDelete && !!onDelete;
+	/** 移动端：用原生 touchmove 且 passive: false，否则 preventDefault 不生效，无法拦截滚动 */
+	useEffect(() => {
+		if (!hasSwipe || !swipeContainerRef.current) return;
+		const el = swipeContainerRef.current;
+		const onTouchMoveNative = (e) => {
+			if (swipeStartDataRef.current !== null) {
+				e.preventDefault();
+				handleSwipeMove(e.touches[0].clientX);
+			}
+		};
+		el.addEventListener("touchmove", onTouchMoveNative, { passive: false });
+		return () => el.removeEventListener("touchmove", onTouchMoveNative);
+	}, [hasSwipe, handleSwipeMove]);
+	/** 滑出删除后，点击/触摸别处关闭滑出 */
+	useEffect(() => {
+		if (!hasSwipe || swipeOffset >= 0) return;
+		const closeIfOutside = (e) => {
+			const target = e.target;
+			if (target && swipeContainerRef.current && !swipeContainerRef.current.contains(target)) {
+				setSwipeOffset(0);
+				setSwipeStart(null);
+			}
+		};
+		document.addEventListener("click", closeIfOutside);
+		document.addEventListener("touchend", closeIfOutside);
+		return () => {
+			document.removeEventListener("click", closeIfOutside);
+			document.removeEventListener("touchend", closeIfOutside);
+		};
+	}, [hasSwipe, swipeOffset]);
+	const contentGapStyle = contentGap !== void 0 ? { gap: typeof contentGap === "number" ? `${contentGap}px` : contentGap } : void 0;
+	/** Figma 设计稿默认卡片样式：8px 圆角、8px 内边距、Gray/300 边框、白底、无阴影 */
+	const defaultCardStyle = {
+		padding: 8,
+		borderRadius: 8,
+		border: "1px solid #d0d5dd",
+		backgroundColor: "#ffffff",
+		boxShadow: "none"
+	};
+	const mergedCardStyle = useMemo(() => style ? _objectSpread2(_objectSpread2({}, defaultCardStyle), style) : defaultCardStyle, [style]);
+	const summaryContent = /* @__PURE__ */ React.createElement(React.Fragment, null, showMedia && (media || renderMedia) && /* @__PURE__ */ React.createElement("div", { className: "pisell-entity-card-media-wrap" }, renderMedia ? renderMedia() : media ? renderMediaNode(media) : null), /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-entity-card-text-wrap",
+		style: contentGapStyle
+	}, /* @__PURE__ */ React.createElement("div", { className: "pisell-entity-card-primary-row" }, showPrimaryText && (primaryText != null || renderPrimary) && /* @__PURE__ */ React.createElement("div", { className: "pisell-entity-card-primary" }, renderPrimary ? renderPrimary() : /* @__PURE__ */ React.createElement(Typography.Text, {
+		className: classNames("pisell-entity-card-primary-text", primaryLineClamp && "pisell-entity-card-primary-text-has-line-clamp"),
+		ellipsis: primaryLineClamp ? void 0 : true,
+		style: primaryLineClamp ? {
+			display: "-webkit-box",
+			WebkitLineClamp: primaryLineClamp,
+			WebkitBoxOrient: "vertical",
+			overflow: "hidden",
+			whiteSpace: "normal",
+			textOverflow: "ellipsis"
+		} : void 0
+	}, primaryText)), (showSubtitle && (subtitleText != null || renderSubtitle) || tagPosition === "inline" && showTags && effectiveTags.length > 0 && !renderTags) && /* @__PURE__ */ React.createElement("div", { className: "pisell-entity-card-primary-extra" }, showSubtitle && (subtitleText != null || renderSubtitle) && /* @__PURE__ */ React.createElement("div", { className: "pisell-entity-card-subtitle-wrap" }, renderSubtitle ? renderSubtitle() : /* @__PURE__ */ React.createElement("span", { className: "pisell-entity-card-subtitle" }, subtitleText)), tagPosition === "inline" && showTags && effectiveTags.length > 0 && !renderTags && /* @__PURE__ */ React.createElement("div", { className: "pisell-entity-card-tags pisell-entity-card-tags-inline" }, effectiveTags.map((t, i) => /* @__PURE__ */ React.createElement("span", {
+		key: i,
+		className: "pisell-entity-card-tag",
+		style: t.style
+	}, t.text))))), showSecondaryText && effectiveSecondary.length > 0 && !renderSecondary && /* @__PURE__ */ React.createElement("div", { className: "pisell-entity-card-secondary" }, /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-entity-card-secondary-text",
+		style: secondaryLineClamp ? {
+			display: "-webkit-box",
+			WebkitLineClamp: secondaryLineClamp,
+			WebkitBoxOrient: "vertical",
+			overflow: "hidden"
+		} : void 0
+	}, effectiveSecondary.map((item, i) => /* @__PURE__ */ React.createElement("span", {
+		key: i,
+		className: "pisell-entity-card-secondary-line"
+	}, item.showTooltip && /* @__PURE__ */ React.createElement(InfoCircleOutlined, { className: "pisell-entity-card-secondary-tooltip-icon" }), item.text)))), renderSecondary && renderSecondary(), tagPosition === "below" && showTags && (effectiveTags.length > 0 || renderTags) && /* @__PURE__ */ React.createElement("div", { className: "pisell-entity-card-tags pisell-entity-card-tags-below" }, renderTags ? renderTags() : effectiveTags.map((t, i) => /* @__PURE__ */ React.createElement("span", {
+		key: i,
+		className: "pisell-entity-card-tag",
+		style: t.style
+	}, t.text)))));
+	/** 设计稿：Action 在右侧与 summary 同一行（justify-between），非底部 */
+	const cardBody = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "pisell-entity-card-body" }, /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-entity-card-summary",
+		"data-layout": layout,
+		style: contentGapStyle
+	}, summaryContent), showActions && (actions.length > 0 || renderActions) && /* @__PURE__ */ React.createElement("div", { className: "pisell-entity-card-actions" }, renderActions ? renderActions() : actions.map((a, i) => /* @__PURE__ */ React.createElement("button", {
+		key: i,
+		type: "button",
+		className: classNames("pisell-entity-card-action", `pisell-entity-card-action-${a.type}`, a.className),
+		style: a.style,
+		onClick: (e) => {
+			var _a$onClick;
+			e.stopPropagation();
+			(_a$onClick = a.onClick) === null || _a$onClick === void 0 || _a$onClick.call(a);
+		}
+	}, a.icon, (a.type === "text" || a.type === "button") && a.label)))), children);
+	const wrappedByBaseCard = /* @__PURE__ */ React.createElement(PisellBaseCard, {
+		className: classNames("pisell-entity-card-root", className),
+		style: mergedCardStyle,
+		hoverStyle,
+		activeStyle,
+		disabledStyle,
+		clickable,
+		disabled,
+		onClick
+	}, cardBody);
+	if (!hasSwipe) return /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-entity-card-wrap",
+		style: rootWidthStyle
+	}, wrappedByBaseCard);
+	return /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-entity-card-wrap pisell-entity-card-wrap-swipe",
+		style: rootWidthStyle
+	}, /* @__PURE__ */ React.createElement("div", {
+		ref: swipeContainerRef,
+		className: "pisell-entity-card-swipe-container",
+		onTouchStart,
+		onTouchMove,
+		onTouchEnd,
+		onMouseDown,
+		onMouseMove,
+		onMouseUp,
+		onMouseLeave
+	}, /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-entity-card-swipe-delete",
+		style: { width: SWIPE_DELETE_WIDTH },
+		onClick: handleDeleteClick
+	}, "删除"), /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-entity-card-swipe-content",
+		style: { transform: `translateX(${swipeOffset}px)` }
+	}, wrappedByBaseCard)));
+}
+//#endregion
+export { PisellEntityCard };