@pisell/materials 1.0.1063 → 1.0.1065

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.js

@@ -48,6 +48,7 @@ var CELL_SIZE_V = 20;
 var CURSOR_MOVES_NOW_RESERVE_PX = 56;
 var CURSOR_MOVES_H_PADDING_PX = 8;
 var CURSOR_MOVES_MIN_CELL_PX = 8;
+var DENSITY_LAYER_HEIGHT = 46;
 function PisellTimeNavigator(props) {
   var _a, _b;
   const {
@@ -77,7 +78,9 @@ function PisellTimeNavigator(props) {
     locale,
     timeFormat = "HH:mm",
     renderNowButton,
-    onUserInteraction
+    onUserInteraction,
+    densitySeries: densitySeriesProp,
+    loadDensity: loadDensityProp
   } = props;
   const context = (0, import_useEngineContext.default)();
   import_utils2.locales.init(
@@ -91,6 +94,38 @@ function PisellTimeNavigator(props) {
   }, [referenceDateProp]);
   const referenceDate = referenceDateFromProp ?? (0, import_dayjs.default)().startOf("day");
   const isHorizontal = orientation === "horizontal";
+  const referenceDayKey = referenceDateFromProp != null ? referenceDateFromProp.format("YYYY-MM-DD") : (0, import_dayjs.default)().format("YYYY-MM-DD");
+  const [densityLoaded, setDensityLoaded] = (0, import_react.useState)();
+  const densityReqId = (0, import_react.useRef)(0);
+  const densityGradientId = (0, import_react.useMemo)(
+    () => `pisell-time-density-fill-${Math.random().toString(36).slice(2, 8)}`,
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (densitySeriesProp !== void 0) {
+      setDensityLoaded(void 0);
+      return;
+    }
+    if (!loadDensityProp) {
+      setDensityLoaded(void 0);
+      return;
+    }
+    const req = ++densityReqId.current;
+    let cancelled = false;
+    setDensityLoaded(void 0);
+    const refDay = (0, import_dayjs.default)(referenceDayKey).startOf("day");
+    void loadDensityProp({ referenceDate: refDay, stepMinutes }).then((arr) => {
+      if (cancelled || req !== densityReqId.current) return;
+      setDensityLoaded(Array.isArray(arr) ? arr : []);
+    }).catch(() => {
+      if (cancelled || req !== densityReqId.current) return;
+      setDensityLoaded(void 0);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [referenceDayKey, stepMinutes, loadDensityProp, densitySeriesProp]);
+  const resolvedDensity = densitySeriesProp !== void 0 ? densitySeriesProp : densityLoaded;
   const isAxisMoves = cursorMode === "axis-moves";
   const [viewportSize, setViewportSize] = (0, import_react.useState)({ w: 0, h: 0 });
   const viewportWrapRef = (0, import_react.useRef)(null);
@@ -122,10 +157,7 @@ function PisellTimeNavigator(props) {
     const reserve = showNowButton ? CURSOR_MOVES_NOW_RESERVE_PX : 0;
     const usable = Math.max(40, vpW - reserve - CURSOR_MOVES_H_PADDING_PX * 2);
     const raw = Math.floor(usable / n);
-    return Math.max(
-      CURSOR_MOVES_MIN_CELL_PX,
-      Math.min(CELL_SIZE_H, raw)
-    );
+    return Math.max(CURSOR_MOVES_MIN_CELL_PX, Math.min(CELL_SIZE_H, raw));
   }, [
     isHorizontal,
     isAxisMoves,
@@ -140,6 +172,48 @@ function PisellTimeNavigator(props) {
     orientation,
     cellSizePx
   });
+  const horizontalDensityCurve = (0, import_react.useMemo)(() => {
+    if (!isHorizontal || !(resolvedDensity == null ? void 0 : resolvedDensity.length)) return null;
+    const ticksN = axis.ticks.length;
+    const n = Math.min(resolvedDensity.length, ticksN);
+    if (n < 2) return null;
+    const slice = resolvedDensity.slice(0, n);
+    const maxV = Math.max(...slice, 0);
+    const minV = Math.min(...slice, 0);
+    const span = Math.max(1, maxV - minV);
+    const h = DENSITY_LAYER_HEIGHT;
+    const points = slice.map((v, i) => {
+      const x = i * cellSizePx + cellSizePx / 2;
+      const t = (v - minV) / span;
+      const y = h - 1 - t * (h - 3);
+      return { x, y };
+    });
+    const first = points[0];
+    const last = points[points.length - 1];
+    let linePath = `M ${first.x} ${first.y}`;
+    for (let i = 0; i < points.length - 1; i += 1) {
+      const p0 = points[i];
+      const p1 = points[i + 1];
+      const cx = (p0.x + p1.x) / 2;
+      const cy = (p0.y + p1.y) / 2;
+      linePath += ` Q ${p0.x} ${p0.y} ${cx} ${cy}`;
+    }
+    linePath += ` T ${last.x} ${last.y}`;
+    const areaPath = `${linePath} L ${last.x} ${h} L ${first.x} ${h} Z`;
+    return {
+      points,
+      linePath,
+      areaPath,
+      h,
+      w: axis.totalLengthPx
+    };
+  }, [
+    isHorizontal,
+    resolvedDensity,
+    axis.ticks,
+    axis.totalLengthPx,
+    cellSizePx
+  ]);
   const isControlled = valueProp !== void 0;
   const [internalValue, setInternalValue] = (0, import_react.useState)(() => {
     const v = valueProp ?? defaultValue;
@@ -181,6 +255,39 @@ function PisellTimeNavigator(props) {
   const dotOffsetPx = isHorizontal ? cellSizePx / 2 : 0;
   const axisStartMarginW = isHorizontal && !isAxisMoves ? CURSOR_MOVES_H_PADDING_PX : Math.max(0, halfViewportW - dotOffsetPx);
   const axisStartMarginH = Math.max(0, halfViewportH - dotOffsetPx);
+  const horizontalAxisWrapStyle = (0, import_react.useMemo)(() => {
+    if (!isHorizontal) return null;
+    const minHeight = 48;
+    if (isAxisMoves) {
+      const natural2 = axis.totalLengthPx + (effectiveViewportW - cellSizePx);
+      if (!showNowButton) {
+        return {
+          width: "100%",
+          minWidth: natural2,
+          minHeight,
+          boxSizing: "border-box"
+        };
+      }
+      return { width: natural2, minHeight };
+    }
+    const natural = CURSOR_MOVES_H_PADDING_PX + axis.totalLengthPx + CURSOR_MOVES_H_PADDING_PX;
+    if (!showNowButton) {
+      return {
+        width: "100%",
+        minWidth: natural,
+        minHeight,
+        boxSizing: "border-box"
+      };
+    }
+    return { width: natural, minHeight };
+  }, [
+    isHorizontal,
+    isAxisMoves,
+    axis.totalLengthPx,
+    effectiveViewportW,
+    cellSizePx,
+    showNowButton
+  ]);
   const handleScroll = (0, import_react.useCallback)(
     (data) => {
       if (scrollToCenterInProgressRef.current) return;
@@ -577,13 +684,7 @@ function PisellTimeNavigator(props) {
               "div",
               {
                 className: "pisell-time-navigator-axis-wrap",
-                style: isHorizontal ? isAxisMoves ? {
-                  width: axis.totalLengthPx + (effectiveViewportW - cellSizePx),
-                  minHeight: 48
-                } : {
-                  width: CURSOR_MOVES_H_PADDING_PX + axis.totalLengthPx + CURSOR_MOVES_H_PADDING_PX,
-                  minHeight: 48
-                } : {
+                style: isHorizontal ? horizontalAxisWrapStyle ?? { minHeight: 48 } : {
                   width: "100%"
                   /* 不设 height，由轴（marginTop + 内容 + marginBottom）自然撑开，避免固定高度与 margin 的 CSS 盒模型歧义 */
                 }
@@ -628,6 +729,70 @@ function PisellTimeNavigator(props) {
                     businessHoursPx
                   }
                 ),
+                horizontalDensityCurve ? /* @__PURE__ */ import_react.default.createElement(
+                  "svg",
+                  {
+                    className: "pisell-time-navigator-density-layer",
+                    width: horizontalDensityCurve.w,
+                    height: horizontalDensityCurve.h,
+                    viewBox: `0 0 ${horizontalDensityCurve.w} ${horizontalDensityCurve.h}`,
+                    preserveAspectRatio: "none",
+                    "aria-hidden": true
+                  },
+                  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement(
+                    "linearGradient",
+                    {
+                      id: densityGradientId,
+                      x1: "0",
+                      y1: "0",
+                      x2: "0",
+                      y2: "1"
+                    },
+                    /* @__PURE__ */ import_react.default.createElement(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: "#ff9c66",
+                        stopOpacity: "0.32"
+                      }
+                    ),
+                    /* @__PURE__ */ import_react.default.createElement(
+                      "stop",
+                      {
+                        offset: "100%",
+                        stopColor: "#ff9c66",
+                        stopOpacity: "0.02"
+                      }
+                    )
+                  )),
+                  /* @__PURE__ */ import_react.default.createElement(
+                    "path",
+                    {
+                      d: horizontalDensityCurve.areaPath,
+                      fill: `url(#${densityGradientId})`
+                    }
+                  ),
+                  /* @__PURE__ */ import_react.default.createElement(
+                    "path",
+                    {
+                      d: horizontalDensityCurve.linePath,
+                      fill: "none",
+                      stroke: "#ff8a4a",
+                      strokeWidth: 1.8,
+                      vectorEffect: "non-scaling-stroke"
+                    }
+                  ),
+                  horizontalDensityCurve.points.map((p, i) => /* @__PURE__ */ import_react.default.createElement(
+                    "circle",
+                    {
+                      key: i,
+                      cx: p.x,
+                      cy: p.y,
+                      r: 1.4,
+                      fill: "#ff8a4a"
+                    }
+                  ))
+                ) : null,
                 /* @__PURE__ */ import_react.default.createElement(
                   import_components.ScaleLayer,
                   {

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.less

@@ -128,6 +128,15 @@
   flex-shrink: 0;
 }
 
+.pisell-time-navigator-density-layer {
+  position: absolute;
+  left: 0;
+  top: 1px;
+  z-index: 0;
+  pointer-events: none;
+  overflow: visible;
+}
+
 /* 背景层（营业时间、过去时间淡化等；当前时间渐变已拆出为独立块） */
 .pisell-time-navigator-background {
   position: absolute;
@@ -369,6 +378,8 @@
 
   &--horizontal {
     height: 100%;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   &--vertical {

package/lib/components/pisellTimeNavigator/types.d.ts

@@ -142,6 +142,17 @@ export interface PisellTimeNavigatorProps {
      * 自定义 Now 按钮内容（覆盖默认文案与图标时使用）
      */
     renderNowButton?: () => ReactNode;
+    /**
+     * 横向轴上与刻度槽位数一致的密度序列（任意正数，内部按最大值归一化折线高度）
+     */
+    densitySeries?: number[];
+    /**
+     * 未传 `densitySeries` 时按 `referenceDate` 拉取；日历日变更会重新请求，过期响应丢弃
+     */
+    loadDensity?: (params: {
+        referenceDate: Dayjs;
+        stepMinutes: number;
+    }) => Promise<number[]>;
     /**
      * 用户开始操作时间轴（拖轴、点刻度、键盘、拖指针等）时回调；用于上层关闭「跟随当前」等。
      */

package/lib/index.d.ts

@@ -129,7 +129,7 @@ export { default as PisellRow } from './components/pisellRow';
 export { default as Div } from './components/div';
 export { default as PisellBasicGrid } from './components/PisellBasicGrid';
 export { default as PisellScrollView } from './components/PisellScrollView';
-export { PisellFloorMapLayout, FloorMapLayoutProvider, useFloorMapLayoutContext, EMPTY_FLOOR_MAP_LAYOUT_CONTEXT, mergeFloorMapLayoutPropsFromContext, getFigmaTableCardFromMerged, renderFigmaStyleTableCard, renderFigmaStyleRoundTableCard, getRenderItemByKindTable, getRenderItemByKindRoundTable, } from './components/pisellFloorMapLayout';
+export { PisellFloorMapLayout, FloorMapLayoutProvider, useFloorMapLayoutContext, EMPTY_FLOOR_MAP_LAYOUT_CONTEXT, mergeFloorMapLayoutPropsFromContext, getFigmaTableCardFromMerged, renderFigmaStyleTableCard, renderFigmaStyleRoundTableCard, getRenderItemByKindTable, getRenderItemByKindRoundTable, FloorMapImageElement, FLOOR_MAP_IMAGE_ELEMENT_KIND, renderFloorMapFallbackPlaceholder, isFloorMapImageElementKind, } from './components/pisellFloorMapLayout';
 export type { FloorMapViewConfig, FloorMapSceneElement, FloorMapCanvasNameI18n, FloorMapMergedItem, FloorMapDataSources, FloorMapItemBase, FloorMapRenderOptions, } from './components/pisellFloorMapLayout';
 /** PisellLayouts 命名空间另含 PisellFloorMapLayoutProps 等；平面图场景细粒度类型见上方 */
 export { default as PisellViewGrid } from './components/pisellViewGrid';
@@ -141,7 +141,7 @@ export type { ToolBarProps } from './components/pisellGridPro/ToolBar';
 export { default as PisellGridPro } from './components/pisellGridPro';
 export type { GridProProps } from './components/pisellGridPro';
 export { default as RecordView } from './components/record-view';
-export { default as PisellRecordBoard, useRecordBoardContext, } from './components/pisellRecordBoard';
+export { default as PisellRecordBoard, useRecordBoardContext, useRecordBoardShellBodyMeta } from './components/pisellRecordBoard';
 export type { RecordBoardProps, RecordBoardLayoutType, RecordBoardContextValue, RecordBoardChildComponentProps, RecordBoardGridProps, RecordBoardColumnType, RecordBoardFieldType, RecordBoardColumnFilterConfig, RecordBoardOptionItem, RecordBoardGetOptions, RecordBoardBodyView, RecordBoardFloorMapProps, RecordBoardToolBarProps, } from './components/pisellRecordBoard';
 export { PisellShellFrame } from './components/pisellShellFrame';
 export type { PisellShellFrameProps, PisellShellFrameConfig, PisellShellFrameScrollConfig, } from './components/pisellShellFrame';

package/lib/index.js

@@ -76,7 +76,9 @@ __export(src_exports, {
   Dropdown: () => import_dropdown.default,
   EMPTY_FLOOR_MAP_LAYOUT_CONTEXT: () => import_pisellFloorMapLayout.EMPTY_FLOOR_MAP_LAYOUT_CONTEXT,
   Empty: () => import_antd.Empty,
+  FLOOR_MAP_IMAGE_ELEMENT_KIND: () => import_pisellFloorMapLayout.FLOOR_MAP_IMAGE_ELEMENT_KIND,
   Filter: () => import_filter.default,
+  FloorMapImageElement: () => import_pisellFloorMapLayout.FloorMapImageElement,
   FloorMapLayoutProvider: () => import_pisellFloorMapLayout.FloorMapLayoutProvider,
   Form: () => import_form.default,
   FormGroup: () => import_group.default,
@@ -267,6 +269,7 @@ __export(src_exports, {
   getRenderItemByKindRoundTable: () => import_pisellFloorMapLayout.getRenderItemByKindRoundTable,
   getRenderItemByKindTable: () => import_pisellFloorMapLayout.getRenderItemByKindTable,
   globalConfig: () => import_context.globalConfig,
+  isFloorMapImageElementKind: () => import_pisellFloorMapLayout.isFloorMapImageElementKind,
   loginAndRegister: () => import_login_and_register.default,
   mergeFloorMapLayoutPropsFromContext: () => import_pisellFloorMapLayout.mergeFloorMapLayoutPropsFromContext,
   message: () => import_antd.message,
@@ -274,9 +277,11 @@ __export(src_exports, {
   pisellTimeNavigatorLocales: () => import_pisellTimeNavigator2.pisellTimeNavigatorLocales,
   renderFigmaStyleRoundTableCard: () => import_pisellFloorMapLayout.renderFigmaStyleRoundTableCard,
   renderFigmaStyleTableCard: () => import_pisellFloorMapLayout.renderFigmaStyleTableCard,
+  renderFloorMapFallbackPlaceholder: () => import_pisellFloorMapLayout.renderFloorMapFallbackPlaceholder,
   useFloorMapLayoutContext: () => import_pisellFloorMapLayout.useFloorMapLayoutContext,
   usePisellConfig: () => import_usePisellConfig.default,
   useRecordBoardContext: () => import_pisellRecordBoard.useRecordBoardContext,
+  useRecordBoardShellBodyMeta: () => import_pisellRecordBoard.useRecordBoardShellBodyMeta,
   useToast: () => import_pisellToast.useToast,
   version: () => import_antd.version
 });
@@ -532,7 +537,9 @@ var import_usePisellConfig = __toESM(require("./components/pisell-config-provide
   Dropdown,
   EMPTY_FLOOR_MAP_LAYOUT_CONTEXT,
   Empty,
+  FLOOR_MAP_IMAGE_ELEMENT_KIND,
   Filter,
+  FloorMapImageElement,
   FloorMapLayoutProvider,
   Form,
   FormGroup,
@@ -723,6 +730,7 @@ var import_usePisellConfig = __toESM(require("./components/pisell-config-provide
   getRenderItemByKindRoundTable,
   getRenderItemByKindTable,
   globalConfig,
+  isFloorMapImageElementKind,
   loginAndRegister,
   mergeFloorMapLayoutPropsFromContext,
   message,
@@ -730,9 +738,11 @@ var import_usePisellConfig = __toESM(require("./components/pisell-config-provide
   pisellTimeNavigatorLocales,
   renderFigmaStyleRoundTableCard,
   renderFigmaStyleTableCard,
+  renderFloorMapFallbackPlaceholder,
   useFloorMapLayoutContext,
   usePisellConfig,
   useRecordBoardContext,
+  useRecordBoardShellBodyMeta,
   useToast,
   version
 });

package/lowcode/floor-map-image-element/meta.ts

@@ -0,0 +1,113 @@
+
+import { ComponentMetadata, Snippet } from '@alilc/lowcode-types';
+
+const FloorMapImageElementMeta: ComponentMetadata = {
+  "componentName": "FloorMapImageElement",
+  "title": "FloorMapImageElement",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "@pisell/materials",
+    "version": "1.0.1064",
+    "exportName": "FloorMapImageElement",
+    "main": "src\\index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    "props": [
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "imageUrl",
+            "zh-CN": "imageUrl"
+          }
+        },
+        "name": "imageUrl",
+        "setter": {
+          "componentName": "MixedSetter",
+          "props": {
+            "setters": [
+              {
+                "componentName": "ObjectSetter",
+                "props": {
+                  "config": {
+                    "extraSetter": {
+                      "componentName": "MixedSetter",
+                      "isRequired": false,
+                      "props": {}
+                    }
+                  }
+                },
+                "isRequired": false,
+                "initialValue": {}
+              },
+              {
+                "componentName": "StringSetter",
+                "isRequired": false,
+                "initialValue": ""
+              }
+            ]
+          }
+        }
+      },
+      {
+        "title": {
+          "label": {
+            "type": "i18n",
+            "en-US": "name",
+            "zh-CN": "name"
+          }
+        },
+        "name": "name",
+        "setter": {
+          "componentName": "MixedSetter",
+          "props": {
+            "setters": [
+              {
+                "componentName": "ObjectSetter",
+                "props": {
+                  "config": {
+                    "extraSetter": {
+                      "componentName": "MixedSetter",
+                      "isRequired": false,
+                      "props": {}
+                    }
+                  }
+                },
+                "isRequired": false,
+                "initialValue": {}
+              },
+              {
+                "componentName": "StringSetter",
+                "isRequired": false,
+                "initialValue": ""
+              }
+            ]
+          }
+        }
+      }
+    ],
+    "supports": {
+      "style": true
+    },
+    "component": {}
+  }
+};
+const snippets: Snippet[] = [
+  {
+    "title": "FloorMapImageElement",
+    "screenshot": "",
+    "schema": {
+      "componentName": "FloorMapImageElement",
+      "props": {}
+    }
+  }
+];
+
+export default {
+  ...FloorMapImageElementMeta,
+  snippets
+};

package/lowcode/floor-map-layout-provider/meta.ts

@@ -9,7 +9,7 @@ const FloorMapLayoutProviderMeta: ComponentMetadata = {
   "devMode": "proCode",
   "npm": {
     "package": "@pisell/materials",
-    "version": "1.0.1062",
+    "version": "1.0.1064",
     "exportName": "FloorMapLayoutProvider",
     "main": "src\\index.tsx",
     "destructuring": true,

package/lowcode/pisell-floor-map-layout/meta.ts

@@ -9,7 +9,7 @@ const PisellFloorMapLayoutMeta: ComponentMetadata = {
   "devMode": "proCode",
   "npm": {
     "package": "@pisell/materials",
-    "version": "1.0.1062",
+    "version": "1.0.1064",
     "exportName": "PisellFloorMapLayout",
     "main": "src\\index.tsx",
     "destructuring": true,
@@ -1473,6 +1473,42 @@ const PisellFloorMapLayoutMeta: ComponentMetadata = {
                             ]
                           }
                         }
+                      },
+                      {
+                        "title": {
+                          "label": {
+                            "type": "i18n",
+                            "en-US": "showGridToggle",
+                            "zh-CN": "showGridToggle"
+                          }
+                        },
+                        "name": "showGridToggle",
+                        "setter": {
+                          "componentName": "MixedSetter",
+                          "props": {
+                            "setters": [
+                              {
+                                "componentName": "ObjectSetter",
+                                "props": {
+                                  "config": {
+                                    "extraSetter": {
+                                      "componentName": "MixedSetter",
+                                      "isRequired": false,
+                                      "props": {}
+                                    }
+                                  }
+                                },
+                                "isRequired": false,
+                                "initialValue": {}
+                              },
+                              {
+                                "componentName": "BoolSetter",
+                                "isRequired": false,
+                                "initialValue": false
+                              }
+                            ]
+                          }
+                        }
                       }
                     ],
                     "extraSetter": {

package/lowcode/render-figma-style-round-table-card/meta.ts

@@ -9,7 +9,7 @@ const renderFigmaStyleRoundTableCardMeta: ComponentMetadata = {
   "devMode": "proCode",
   "npm": {
     "package": "@pisell/materials",
-    "version": "1.0.1062",
+    "version": "1.0.1064",
     "exportName": "renderFigmaStyleRoundTableCard",
     "main": "src\\index.tsx",
     "destructuring": true,

package/lowcode/render-figma-style-table-card/meta.ts

@@ -9,7 +9,7 @@ const renderFigmaStyleTableCardMeta: ComponentMetadata = {
   "devMode": "proCode",
   "npm": {
     "package": "@pisell/materials",
-    "version": "1.0.1062",
+    "version": "1.0.1064",
     "exportName": "renderFigmaStyleTableCard",
     "main": "src\\index.tsx",
     "destructuring": true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "1.0.1063",
+  "version": "1.0.1065",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -90,9 +90,9 @@
     "swiper": "^8.4.7",
     "antd-mobile": "^5.38.1",
     "vod-js-sdk-v6": "^1.4.11",
-    "@pisell/date-picker": "1.0.140",
+    "@pisell/date-picker": "1.0.141",
     "@pisell/icon": "0.0.10",
-    "@pisell/utils": "1.0.67"
+    "@pisell/utils": "1.0.68"
   },
   "peerDependencies": {
     "react": "^18.0.0",