@pisell/materials 1.8.41 → 1.8.43

package/es/components/pisellFloorMapLayout/components/FloorMapToolbar.less

@@ -2,20 +2,109 @@
 .pisell-floor-map-layout-toolbar {
   &.pisell-floor-map-layout-toolbar-sidebar {
     position: relative;
-    width: 248px;
+    /**
+     * 中等宽度抽屉：248px → 124px。
+     * 配合 cellW/cellH（见 FloorMapToolbar.tsx）按 0.5 倍渲染，preview-cell（最大 92px）
+     * + 标准 padding（12 8）正好落在 124px 内，兼顾画布展示空间与图元预览可视性。
+     */
+    width: 124px;
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     background: #fff;
     border-right: 1px solid #e8e8e8;
     z-index: 10;
+    /** 收起态：只保留一条边和外突的切换按钮 */
+    transition: width 0.2s ease;
+    /**
+     * 注意：根元素必须保持 overflow: visible —— 否则下方 collapse-handle
+     * 用 right: -22px 外突的按钮会被裁掉。横向裁剪转移到 &-inner 内层做。
+     */
+
+    &.pisell-floor-map-layout-toolbar-sidebar--collapsed {
+      width: 0;
+      border-right: none;
+      /**
+       * 不再给 body/footer 设 display: none —— 让它们维持固定宽度参与动画的横向裁剪，
+       * 否则收起态切换会先 hide 后再瞬间 show，反而更容易暴露挤压的瞬间。
+       */
+    }
+  }
+
+  /**
+   * 内层容器：宽度跟随 sidebar 100% 伸缩，但用 overflow: hidden + 子元素固定宽度
+   * 把中间帧的水平挤压裁掉。这样 0→124px 展开过程中，body/footer 始终按 124px
+   * 排版，只是从右侧逐步揭开，避免文案被压成竖排。
+   */
+  &-inner {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  /**
+   * 收起 / 展开按钮：左缘与侧栏**右缘对齐**（`left: 100%`），整体仍在侧栏外，不与图元预览重叠；
+   * 旧写法 `right: -22px` + `width: 28` 会让按钮左缘落在侧栏内约 6px 压到卡片。
+   * 收起态下容器宽度为 0，100% 仍锚在右缘，按钮仍能完整露出（z-index 高于地图区遮罩）。
+   */
+  &-collapse-handle {
+    position: absolute;
+    top: 50%;
+    left: 100%;
+    right: auto;
+    transform: translateY(-50%);
+    width: 28px;
+    height: 72px;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+    color: #595959;
+    border: 1px solid #e8e8e8;
+    border-left: none;
+    border-radius: 0 12px 12px 0;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
+    cursor: pointer;
+    z-index: 11;
+    transition: color 0.15s, background 0.15s, border-color 0.15s,
+      box-shadow 0.15s;
+
+    /** 与顶栏撤销/重做一致：不因 hover 变色，避免编辑画布时视觉干扰 */
+    &:hover {
+      color: #595959;
+      background: #fff;
+      border-color: #e8e8e8;
+      box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--fmap-primary, #1677ff);
+      outline-offset: 2px;
+    }
+
+    .anticon {
+      font-size: 16px;
+      line-height: 1;
+    }
   }
 
   &-body {
     flex: 1;
     min-height: 0;
     overflow-y: auto;
-    padding: 12px 10px;
+    /** 124px 抽屉下，左右各留 8px 给 preview-card 的标准 padding 兜住 92px cell */
+    padding: 12px 8px;
+    /**
+     * 写死 124px 防止展开动画过程中跟随父容器 0→124px 同步缩放，避免文案被挤成竖排。
+     * 父容器 overflow: hidden 会裁掉超出的部分，视觉上就是抽屉从右侧划出。
+     */
+    width: 124px;
+    box-sizing: border-box;
+    flex-shrink: 0;
   }
 
   &-section {
@@ -64,7 +153,8 @@
   &-preview-card {
     display: block;
     width: 100%;
-    padding: 6px;
+    /** 标准 padding 适配 124px 抽屉 + 92px cell 的尺寸预算 */
+    padding: 8px;
     text-align: center;
     background: #fafafa;
     border: 1px solid #e8e8e8;
@@ -186,11 +276,15 @@
 
   &-footer {
     flex-shrink: 0;
-    padding: 12px 10px;
+    /** 与 body 同步水平 padding，124px 抽屉下按钮宽度足够呈现 */
+    padding: 12px 8px;
     border-top: 1px solid #f0f0f0;
     display: flex;
     flex-direction: column;
     gap: 8px;
+    /** 同 body：固定 124px 防止展开动画期间被父容器宽度挤压换行 */
+    width: 124px;
+    box-sizing: border-box;
   }
 
   &-dirty-hint {
@@ -245,3 +339,83 @@
     border-radius: 4px;
   }
 }
+
+/**
+ * 手机图元栏：antd Drawer 挂在 body，需与 .pisell-floor-map-layout-toolbar 并列书写。
+ * z-index 与 PisellFloorMapLayout 约定一致，略低于右侧属性抽屉(2002)。
+ */
+.pisell-floor-map-layout-toolbar-phone-drawer-root {
+  /** 折叠柄贴在面板右缘外侧，antd 多层 wrapper 默认 overflow:hidden 会裁切，需一并放开 */
+  .pisell-floor-map-layout-toolbar-phone-drawer-body,
+  .ant-drawer-content-wrapper,
+  .ant-drawer-content {
+    overflow: visible !important;
+  }
+
+  /** ConfigProvider 修改 prefixCls 时常为 pisell-lowcode */
+  .pisell-lowcode-drawer-content-wrapper,
+  .pisell-lowcode-drawer-content {
+    overflow: visible !important;
+  }
+
+  .pisell-floor-map-layout-toolbar-phone-drawer-inner {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  .pisell-floor-map-layout-toolbar-inner {
+    flex: 1 1 auto;
+    min-height: 0;
+    width: min(320px, 88vw);
+  }
+
+  .pisell-floor-map-layout-toolbar-body {
+    width: min(320px, 88vw);
+    max-width: none;
+  }
+
+  .pisell-floor-map-layout-toolbar-footer {
+    width: min(320px, 88vw);
+    max-width: none;
+    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
+  }
+}
+
+/** 左侧抽屉收起后：贴左缘的展开触发条（与折叠柄视觉一致） */
+.pisell-floor-map-layout-toolbar-phone-peek-trigger {
+  position: fixed;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 2001;
+  width: 28px;
+  height: 72px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  color: #595959;
+  border: 1px solid #e8e8e8;
+  border-left: none;
+  border-radius: 0 12px 12px 0;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+
+  &:hover {
+    color: #595959;
+    background: #fff;
+    border-color: #e8e8e8;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
+  }
+
+  .anticon {
+    font-size: 16px;
+    line-height: 1;
+  }
+}

package/es/components/pisellFloorMapLayout/components/HistoryIcons.js

@@ -0,0 +1,64 @@
+import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
+import { _objectWithoutProperties } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
+import React from "react";
+//#region src/components/pisellFloorMapLayout/components/HistoryIcons.tsx
+/**
+* 编辑顶栏 Undo / Redo 自定义 SVG icon。
+*
+* 设计来源：业务方提供的「圆勾箭头」风格 —— 整圈 ~270° 回环 + 末端三角箭头。
+* 替换 antd 的 `UndoOutlined` / `RedoOutlined`：原版箭头偏方、回勾过短，
+* 在 24/16px 的小尺寸下与界面其它细线 icon 不齐，且 Undo/Redo 镜像不够直观。
+*
+* 实现要点：
+* - `stroke="currentColor"`、无填充：颜色完全跟随父级 `color`，与 Ant Button text 模式一致；
+* - viewBox 14×14，配合 `font-size: 14px` 自动得到 14px icon；调用方可通过 fontSize/CSS 调整；
+* - `stroke-linecap=round` + `stroke-linejoin=round`：在 1.5px 细线下保持圆润、抗锯齿友好；
+* - 箭头用同色 `path` 三角，避免 marker-end 在不同浏览器下的尺寸漂移；
+* - 接受 `className` / `style` / 其它 SVG 属性透传（与 antd icon 体感一致）。
+*/
+const _excluded = ["size", "children"];
+/**
+* 通用渲染：差异仅在 path 上，所以提取一个内核组件，
+* Undo / Redo 各自传入自己的箭头路径。
+*/
+function HistoryIconShell(_ref) {
+	let { size = "1em", children } = _ref, rest = _objectWithoutProperties(_ref, _excluded);
+	return /* @__PURE__ */ React.createElement("svg", _objectSpread2({
+		role: "img",
+		"aria-hidden": "true",
+		focusable: "false",
+		width: size,
+		height: size,
+		viewBox: "0 0 14 14",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.5,
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	}, rest), children);
+}
+/**
+* Undo 图标：「↰」L 形带小圆角 —— 箭头在左侧水平指向左，主干由箭头水平向右、
+* 经一个 1.5 半径的圆角折下、再竖直向下。
+*
+* 关于"看起来偏上"：antd `.anticon { vertical-align: -0.125em }` 已经把整个 svg
+* 相对文字基线下移 ~0.125em，但我们的形状在 viewBox 内是几何居中的（y ∈ [3,11]），
+* 与 antd 自家 outline icon（路径几乎铺满 viewBox）在视觉密度上不同 ——
+* 留白对称会让人眼判断"图形在 viewBox 上半"。
+*
+* 解决：把形状整体下移 1 单位到 y ∈ [4, 12]，上侧留 4 / 下侧留 2，
+* 让 icon 视觉中心匹配文字 x-height 中心，与 "Undo" 文本视觉齐平。
+* x 仍保持 [3, 11] 居中。
+*/
+function UndoHistoryIcon(props) {
+	return /* @__PURE__ */ React.createElement(HistoryIconShell, props, /* @__PURE__ */ React.createElement("path", { d: "M3 6h6.5a1.5 1.5 0 0 1 1.5 1.5V12" }), /* @__PURE__ */ React.createElement("path", { d: "M5 4 3 6l2 2" }));
+}
+/**
+* Redo 图标：与 Undo 水平镜像，箭头在右侧指向右，干线右→左→下。
+* 几何范围与 Undo 完全对称：x ∈ [3, 11]、y ∈ [4, 12]。
+*/
+function RedoHistoryIcon(props) {
+	return /* @__PURE__ */ React.createElement(HistoryIconShell, props, /* @__PURE__ */ React.createElement("path", { d: "M11 6H4.5A1.5 1.5 0 0 0 3 7.5V12" }), /* @__PURE__ */ React.createElement("path", { d: "M9 4l2 2-2 2" }));
+}
+//#endregion
+export { RedoHistoryIcon, UndoHistoryIcon };

package/es/components/pisellFloorMapLayout/components/ItemLayer.js

@@ -10,6 +10,8 @@ import "./ItemLayer.less";
 const PREFIX = "pisell-floor-map-layout";
 /** 图元内可滚动区标记（如预约房间卡 body / multi-list），与 private-materials 约定一致 */
 const ROOM_SCROLL_SURFACE_SELECTOR = "[data-pisell-floor-room-scroll-surface]";
+/** 与 EditableItemLayer `SELECTED_ITEM_STACK_Z` 一致：阅读态选中时抬升，避免邻桌图形盖住描边 */
+const READ_MODE_SELECTED_STACK_Z = 1e6;
 function getItemKey(item, index, rowKey) {
 	var _rowKey;
 	if (!rowKey) return item.id;
@@ -29,7 +31,7 @@ function getShapeStyle(shape = "rect") {
 	}
 }
 function ItemLayer(props) {
-	const { items, renderItem, rowKey, cellSize, itemUnit = "cell", itemGap = 0, contentWidth, contentHeight, contentOffsetX = 0, contentOffsetY = 0, enableHover = true, itemHoverOutline = true, onItemClick, onItemHover, onItemLeave, getMergedItemWrapperStyle, onInteractionChange, className } = props;
+	const { items, renderItem, viewportScale, rowKey, cellSize, itemUnit = "cell", itemGap = 0, contentWidth, contentHeight, contentOffsetX = 0, contentOffsetY = 0, enableHover = true, itemHoverOutline = true, onItemClick, onItemHover, onItemLeave, getMergedItemWrapperStyle, onInteractionChange, readModeSelectedItemId, className } = props;
 	/** 触控/指针在房间卡滚动区内按下时禁用画布 pan，松手恢复 */
 	const notifyRoomScrollSurfaceActive = useCallback(() => {
 		if (!onInteractionChange) return;
@@ -48,9 +50,21 @@ function ItemLayer(props) {
 			passive: true
 		});
 	}, [onInteractionChange]);
+	/**
+	* 只对触屏指针拦截画布 pan：触屏在卡内纵向滑动时会和画布 pan 抢事件，
+	* 这里把 `isInteractingWithElement` 拉起来让 TransformWrapper 关掉 panning，
+	* 让原生 scroll 接管列表。
+	*
+	* 鼠标 / 触控笔（pen）不走这条路径——桌面端鼠标要可以从任意图元上按下并直接拖动画布，
+	* 否则用户会发现「只有空白处才能拖动画布」（react-zoom-pan-pinch 的鼠标 pan 走的是
+	* window 的 mousedown 监听，但 panning.disabled=true 一样会让它直接拒绝启动）。
+	*
+	* 触屏 e.button 默认为 0，不再前置 `e.button !== 0` 早返；鼠标右键此时已被 pointerType 过滤掉。
+	*/
 	const handleItemPointerDownCapture = useCallback((e) => {
 		var _el$closest;
-		if (!onInteractionChange || e.button !== 0) return;
+		if (!onInteractionChange) return;
+		if (e.pointerType !== "touch") return;
 		const el = e.target;
 		if (!(el === null || el === void 0 || (_el$closest = el.closest) === null || _el$closest === void 0 ? void 0 : _el$closest.call(el, ROOM_SCROLL_SURFACE_SELECTOR))) return;
 		notifyRoomScrollSurfaceActive();
@@ -70,11 +84,13 @@ function ItemLayer(props) {
 	const itemNodes = useMemo(() => {
 		const isPixel = itemUnit === "pixel";
 		const g = itemGap;
-		return [...items].sort((a, b) => {
+		const sorted = [...items].sort((a, b) => {
 			var _a$zIndex, _b$zIndex;
 			return ((_a$zIndex = a.zIndex) !== null && _a$zIndex !== void 0 ? _a$zIndex : 0) - ((_b$zIndex = b.zIndex) !== null && _b$zIndex !== void 0 ? _b$zIndex : 0);
-		}).map((item, index) => {
-			var _item$zIndex;
+		});
+		const renderOpts = viewportScale != null && Number.isFinite(viewportScale) && viewportScale > 0 ? { viewportScale } : void 0;
+		return sorted.map((item, index) => {
+			var _item$zIndex, _item$zIndex2;
 			let left;
 			let top;
 			let width;
@@ -96,11 +112,13 @@ function ItemLayer(props) {
 			}
 			const key = getItemKey(item, index, rowKey);
 			const shapeStyle = getShapeStyle(item.shape);
+			const selectedRead = readModeSelectedItemId != null && String(readModeSelectedItemId).trim() !== "" && key === String(readModeSelectedItemId);
 			return /* @__PURE__ */ React.createElement("div", {
 				key,
 				className: classNames(`${PREFIX}-item`, {
 					[`${PREFIX}-item-hoverable`]: enableHover,
-					[`${PREFIX}-item-hover-outline`]: enableHover && itemHoverOutline
+					[`${PREFIX}-item-hover-outline`]: enableHover && itemHoverOutline,
+					[`${PREFIX}-item-read-selected`]: selectedRead
 				}),
 				style: _objectSpread2(_objectSpread2({
 					position: "absolute",
@@ -109,18 +127,20 @@ function ItemLayer(props) {
 					width,
 					height,
 					boxSizing: "border-box",
-					zIndex: (_item$zIndex = item.zIndex) !== null && _item$zIndex !== void 0 ? _item$zIndex : 0
+					zIndex: selectedRead ? READ_MODE_SELECTED_STACK_Z + ((_item$zIndex = item.zIndex) !== null && _item$zIndex !== void 0 ? _item$zIndex : 0) : (_item$zIndex2 = item.zIndex) !== null && _item$zIndex2 !== void 0 ? _item$zIndex2 : 0,
+					pointerEvents: "auto"
 				}, shapeStyle), getMergedItemWrapperStyle === null || getMergedItemWrapperStyle === void 0 ? void 0 : getMergedItemWrapperStyle(item, index)),
 				onClick: (e) => onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, index, e),
 				onMouseEnter: (e) => onItemHover === null || onItemHover === void 0 ? void 0 : onItemHover(item, index, e),
 				onMouseLeave: (e) => onItemLeave === null || onItemLeave === void 0 ? void 0 : onItemLeave(item, index, e),
 				onPointerDownCapture: handleItemPointerDownCapture,
 				onTouchStartCapture: handleItemTouchStartCapture
-			}, renderItem(item, index));
+			}, renderItem(item, index, renderOpts));
 		});
 	}, [
 		items,
 		renderItem,
+		viewportScale,
 		rowKey,
 		cellSize,
 		itemUnit,
@@ -132,7 +152,8 @@ function ItemLayer(props) {
 		onItemLeave,
 		getMergedItemWrapperStyle,
 		handleItemPointerDownCapture,
-		handleItemTouchStartCapture
+		handleItemTouchStartCapture,
+		readModeSelectedItemId
 	]);
 	return /* @__PURE__ */ React.createElement("div", {
 		className: classNames(`${PREFIX}-item-layer`, className),
@@ -151,7 +172,8 @@ function ItemLayer(props) {
 		top: 0,
 		width: contentWidth,
 		height: contentHeight,
-		transform: `translate(${contentOffsetX}px, ${contentOffsetY}px)`
+		transform: `translate(${contentOffsetX}px, ${contentOffsetY}px)`,
+		pointerEvents: "none"
 	} }, itemNodes) : itemNodes);
 }
 //#endregion

package/es/components/pisellFloorMapLayout/components/ItemLayer.less

@@ -13,10 +13,38 @@
 
   /** hover 描边与编辑态选中一致（见 EditableItemLayer：`pisell-floor-map-layout-editable-item-selected`） */
 
-  &-hoverable&-hover-outline:hover {
+  // &-hoverable&-hover-outline:hover {
+  //   outline: 3px solid var(--fmap-primary, #1677ff);
+  //   outline-offset: 0;
+  //   box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.25);
+  //   z-index: 1;
+  // }
+
+  /** 阅读态：详情弹层等打开时由业务传入 `readModeSelectedItemId`，与编辑态选中描边一致 */
+  &-read-selected {
     outline: 3px solid var(--fmap-primary, #1677ff);
     outline-offset: 0;
     box-shadow: 0 0 0 1px rgba(22, 119, 255, 0.25);
-    z-index: 1;
   }
 }
+
+/**
+ * 房台小卡（tooltip-time）需要允许 tooltip 浮层越出格子边界。
+ * 仅在 item 内包含该类卡片时放开 overflow，避免影响其它图元定位/裁剪。
+ */
+.pisell-floor-map-layout-item:has(.pisell-res-floor-room-card[data-tooltip-time='on']),
+.pisell-floor-map-layout-item:has(.pisell-res-floor-room-card[data-reserved-halo='on']) {
+  overflow: visible;
+  z-index: 1;
+}
+
+/**
+ * 小卡溢出标题 pill 跨 item 抢占：默认 tooltip-time item 都是 z-index:1，
+ * 相邻卡的进度条 / 框可能压住本卡溢出的桌名 pill。hover / 阅读态选中时把整张
+ * item 抬到 z-index:5，让用户当前关注的卡片溢出标题永远盖过邻居；编辑态选中
+ * 走 `EditableItemLayer` 的更高层级，不冲突。
+ */
+.pisell-floor-map-layout-item:has(.pisell-res-floor-room-card[data-tooltip-time='on']):hover,
+.pisell-floor-map-layout-item-read-selected:has(.pisell-res-floor-room-card[data-tooltip-time='on']) {
+  z-index: 5;
+}