@pisell/materials 1.8.7 → 1.8.9

package/lib/components/PisellTabbar/constants.js

@@ -29,7 +29,7 @@ var import_locales = require("../../locales");
 var DEFAULT_LEVEL_CONFIG = {
   level1: {
     superTabsBg: "#3b2865",
-    cardWidth: 100,
+    cardWidth: 106,
     cardHeight: 60,
     paddingLeft: 0
   },
@@ -69,8 +69,9 @@ var DEFAULT_ITEMS = {
     id: "-1",
     shop_id: 9,
     parent_id: 0,
-    name: "Search",
-    slug: "Search",
+    name: (0, import_locales.getText)("table-filter-search"),
+    text: (0, import_locales.getText)("table-filter-search"),
+    slug: "search",
     key: "search",
     icon: "",
     customClick: true
@@ -87,7 +88,7 @@ var DEFAULT_ITEMS = {
   }
 };
 var LEVEL_ADD_ITEMS = {
-  level1: ["expand"],
+  level1: ["search", "expand"],
   level2: ["expand", "all"],
   level3: ["expand", "all"]
 };

package/lib/components/PisellTabbar/hooks/useActiveKey.js

@@ -26,6 +26,16 @@ var import_react = require("react");
 var useActiveKey = (props) => {
   const { initialActiveKey = [], onChange } = props;
   const [activeKey, _setActiveKey] = (0, import_react.useState)(initialActiveKey);
+  const cacheActiveKey = (0, import_react.useRef)([]);
+  const setCacheActiveKey = (val) => {
+    cacheActiveKey.current = [...val];
+  };
+  const resetActiveKey = () => {
+    let val = cacheActiveKey.current;
+    _setActiveKey(val);
+    onChange == null ? void 0 : onChange(val);
+    cacheActiveKey.current = [];
+  };
   const setActiveKey = (level, key, cKey) => {
     const newActiveKey = [...activeKey];
     newActiveKey.splice(level + 1);
@@ -37,12 +47,15 @@ var useActiveKey = (props) => {
     onChange == null ? void 0 : onChange(newActiveKey);
   };
   const getActiveKey = (level) => {
-    return activeKey[level];
+    return activeKey == null ? void 0 : activeKey[level];
   };
   return {
     activeKey,
     setActiveKey,
     getActiveKey,
+    resetActiveKey,
+    getCacheActiveKey: () => cacheActiveKey.current,
+    setCacheActiveKey,
     /**
      * 内部设置方法，用于同步外部传入的 value
      * 会进行深比较，避免不必要的更新

package/lib/components/PisellTabbar/hooks/useExpand.js

@@ -37,6 +37,13 @@ var useExpand = (props = {}) => {
       [level]: !prev[level]
     }));
   }, []);
+  const closeAll = () => {
+    setExpand({
+      level1: false,
+      level2: false,
+      level3: false
+    });
+  };
   const getExpand = (0, import_react.useCallback)(
     (level) => {
       return expand[level];
@@ -47,7 +54,8 @@ var useExpand = (props = {}) => {
     expand,
     setExpand,
     toggleExpand,
-    getExpand
+    getExpand,
+    closeAll
   };
 };
 var useExpand_default = useExpand;

package/lib/components/PisellTabbar/template/Template1/PisellTabbar.js

@@ -32,18 +32,20 @@ __export(PisellTabbar_exports, {
   default: () => PisellTabbar_default
 });
 module.exports = __toCommonJS(PisellTabbar_exports);
-var import_react = __toESM(require("react"));
 var import_classnames = __toESM(require("classnames"));
-var import_PisellSuperTabs = __toESM(require("../../../PisellSuperTabs"));
+var import_react = __toESM(require("react"));
+var import_locales = require("../../../../locales");
 var import_PisellCards = __toESM(require("../../../PisellCards"));
+var import_PisellSuperTabs = __toESM(require("../../../PisellSuperTabs"));
 var import_iconfont = __toESM(require("../../../iconfont"));
+var import_pisellFind = require("../../../pisellFind");
+var import_PisellTabbar = require("../../PisellTabbar.less");
 var import_hooks = require("../../hooks");
-var import_utils = require("./utils");
-var import_constants = require("./constants");
 var import_mock = __toESM(require("../../mock"));
-var import_PisellTabbar = require("../../PisellTabbar.less");
+var import_constants = require("./constants");
+var import_utils = require("./utils");
 var tabbarId = "sku-list-tabbar-temp1";
-var PisellTabbar = (props) => {
+var PisellTabbar = (props, ref) => {
   const {
     dataSource = (props == null ? void 0 : props.__designMode) ? import_mock.default : import_mock.default,
     value,
@@ -52,17 +54,52 @@ var PisellTabbar = (props) => {
     style,
     levelConfig: customLevelConfig,
     expandConfig: customExpandConfig,
-    maxLevel = 3
+    maxLevel = 3,
+    onSearch
   } = props;
-  const { setActiveKey, getActiveKey, _setActiveKey, activeKey } = (0, import_hooks.useActiveKey)(
-    {
-      initialActiveKey: value || (0, import_utils.getDefaultActiveKey)(dataSource, "id"),
-      onChange
-    }
-  );
+  const containerRef = (0, import_react.useRef)(null);
+  const searchRef = (0, import_react.useRef)(null);
+  const {
+    setActiveKey,
+    getActiveKey,
+    _setActiveKey,
+    activeKey,
+    setCacheActiveKey,
+    resetActiveKey
+  } = (0, import_hooks.useActiveKey)({
+    initialActiveKey: value || (0, import_utils.getDefaultActiveKey)(dataSource, "id"),
+    onChange
+  });
   console.log("getActiveKey", activeKey);
   const { expand, toggleExpand, getExpand } = (0, import_hooks.useExpand)();
   const expandConfig = customExpandConfig || (0, import_constants.getExpandConfig)();
+  const level1Value = (0, import_react.useMemo)(() => {
+    return getActiveKey(0);
+  }, [activeKey]);
+  const level2Value = (0, import_react.useMemo)(() => {
+    return getActiveKey(1);
+  }, [activeKey]);
+  const level3Value = (0, import_react.useMemo)(() => {
+    return getActiveKey(2);
+  }, [activeKey]);
+  const openSearchMode = () => {
+    setCacheActiveKey(activeKey);
+    _setActiveKey([]);
+    onChange == null ? void 0 : onChange([]);
+  };
+  const closeSearchMode = () => {
+    onSearch == null ? void 0 : onSearch("");
+    resetActiveKey();
+  };
+  (0, import_react.useImperativeHandle)(ref, () => {
+    var _a;
+    if (props == null ? void 0 : props.__designMode) {
+      return containerRef.current;
+    }
+    return {
+      closeSearchMode: (_a = searchRef == null ? void 0 : searchRef.current) == null ? void 0 : _a.close
+    };
+  });
   (0, import_react.useEffect)(() => {
     if (value) {
       _setActiveKey(value);
@@ -144,6 +181,67 @@ var PisellTabbar = (props) => {
     },
     [expandConfig, activeKey, getLevelConfig]
   );
+  const renderSearch = (0, import_react.useCallback)(
+    (itemProps, level) => {
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_pisellFind.PisellFind,
+        {
+          showHistory: false,
+          modalWidth: "100%",
+          ref: searchRef,
+          onSearch: (e) => {
+            onSearch == null ? void 0 : onSearch(e);
+          },
+          getContainer: () => {
+            return document.querySelector(`#${tabbarId}`) || document.body;
+          },
+          modalStyle: {
+            width: "100%"
+          },
+          onOpen: openSearchMode,
+          onClose: closeSearchMode,
+          trigger: /* @__PURE__ */ import_react.default.createElement(
+            import_PisellCards.default.MultilevelCard,
+            {
+              ...itemProps,
+              card: (cardProps) => {
+                let _cardProps = {
+                  ...cardProps,
+                  text: /* @__PURE__ */ import_react.default.createElement(
+                    "div",
+                    {
+                      style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 4
+                      }
+                    },
+                    /* @__PURE__ */ import_react.default.createElement(
+                      import_iconfont.default,
+                      {
+                        type: "pisell2-search-lg",
+                        style: { color: "#000", fontSize: 20 }
+                      }
+                    ),
+                    /* @__PURE__ */ import_react.default.createElement(
+                      import_iconfont.default,
+                      {
+                        type: "pisell2-scan",
+                        style: { color: "#000", fontSize: 20 }
+                      }
+                    ),
+                    /* @__PURE__ */ import_react.default.createElement("span", null, (0, import_locales.getText)("table-filter-find"))
+                  )
+                };
+                return renderNormalCard(_cardProps, level);
+              }
+            }
+          )
+        }
+      );
+    },
+    [activeKey]
+  );
   const renderNormalCard = (0, import_react.useCallback)(
     (cardProps, level) => {
       var _a;
@@ -152,8 +250,8 @@ var PisellTabbar = (props) => {
       return /* @__PURE__ */ import_react.default.createElement(
         import_PisellCards.default.TextCard,
         {
-          ...cardProps,
           text: itemData.name,
+          ...cardProps,
           variant: "outlined",
           widthMode: "auto",
           textConfig: {
@@ -189,17 +287,22 @@ var PisellTabbar = (props) => {
   const renderLevel1Item = (0, import_react.useCallback)(
     (itemProps) => {
       const { dataSource: itemData } = itemProps;
-      const level1Config2 = getLevelConfig("level1");
       const isExpanded = getExpand("level1");
       if (itemData == null ? void 0 : itemData.customClick) {
-        return /* @__PURE__ */ import_react.default.createElement(
-          import_PisellCards.default.MultilevelCard,
-          {
-            ...itemProps,
-            card: (cardProps) => renderExpandCard(cardProps, "level1", isExpanded),
-            onClick: () => toggleExpand("level1")
-          }
-        );
+        if (itemProps.dataSource.key === "search") {
+          return renderSearch(itemProps, "level1");
+        }
+        if (itemProps.dataSource.key === "expand") {
+          return /* @__PURE__ */ import_react.default.createElement(
+            import_PisellCards.default.MultilevelCard,
+            {
+              ...itemProps,
+              card: (cardProps) => renderExpandCard(cardProps, "level1", isExpanded),
+              onClick: () => toggleExpand("level1")
+            }
+          );
+        }
+        return null;
       }
       return /* @__PURE__ */ import_react.default.createElement(
         import_PisellCards.default.MultilevelCard,
@@ -236,9 +339,10 @@ var PisellTabbar = (props) => {
         import_PisellSuperTabs.default,
         {
           id: skuId,
+          isControlled: true,
           tabItemStyle: {},
           dataSource: _dataSource,
-          value: String(getActiveKey(1)),
+          value: level2Value,
           onChange: handleLevel2Change,
           rowKey: "id",
           style: {
@@ -302,6 +406,7 @@ var PisellTabbar = (props) => {
       );
     },
     [
+      level2Value,
       maxLevel,
       activeKey,
       getActiveKey,
@@ -330,9 +435,10 @@ var PisellTabbar = (props) => {
         import_PisellSuperTabs.default,
         {
           id: skuId,
+          isControlled: true,
           tabItemStyle: {},
           dataSource: _dataSource2,
-          value: String(getActiveKey(2)),
+          value: level3Value,
           onChange: handleLevel3Change,
           rowKey: "id",
           style: {
@@ -386,6 +492,7 @@ var PisellTabbar = (props) => {
       );
     },
     [
+      level3Value,
       maxLevel,
       activeKey,
       getActiveKey,
@@ -399,38 +506,47 @@ var PisellTabbar = (props) => {
   );
   const level1Config = getLevelConfig("level1");
   const isExpanded1 = getExpand("level1");
-  return dataSource.length ? /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-tabbar", className), style }, /* @__PURE__ */ import_react.default.createElement(
-    import_PisellSuperTabs.default,
+  return dataSource.length ? /* @__PURE__ */ import_react.default.createElement(
+    "div",
     {
-      id: tabbarId,
-      tabItemStyle: {},
-      dataSource: level1DataSource,
-      value: String(getActiveKey(0)),
-      onChange: handleLevel1Change,
-      rowKey: "id",
-      style: {
-        flex: 1,
-        background: level1Config.superTabsBg
-      },
-      gridProps: {
-        direction: "horizontal",
-        gap: 4,
-        wrap: isExpanded1 ? "wrap" : "nowrap"
-      },
-      scrollViewProps: {
+      className: (0, import_classnames.default)("pisell-tabbar", className),
+      style,
+      ref: containerRef
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_PisellSuperTabs.default,
+      {
+        isControlled: true,
+        id: tabbarId,
+        tabItemStyle: {},
+        dataSource: level1DataSource,
+        value: level1Value,
+        onChange: handleLevel1Change,
+        rowKey: "id",
         style: {
-          padding: "4px 8px"
+          flex: 1,
+          background: level1Config.superTabsBg
         },
-        overflow: !isExpanded1 ? "x" : "hidden",
-        scrollbarStyle: "none",
-        scrollActionsConfig: {
-          type: "lrArrows",
-          show: true
-        }
-      },
-      renderItem: renderLevel1Item
-    }
-  )) : null;
+        gridProps: {
+          direction: "horizontal",
+          gap: 4,
+          wrap: isExpanded1 ? "wrap" : "nowrap"
+        },
+        scrollViewProps: {
+          style: {
+            padding: "4px 8px"
+          },
+          overflow: !isExpanded1 ? "x" : "hidden",
+          scrollbarStyle: "none",
+          scrollActionsConfig: {
+            type: "lrArrows",
+            show: true
+          }
+        },
+        renderItem: renderLevel1Item
+      }
+    )
+  ) : null;
 };
 PisellTabbar.displayName = "PisellTabbar";
-var PisellTabbar_default = PisellTabbar;
+var PisellTabbar_default = (0, import_react.forwardRef)(PisellTabbar);

package/lib/components/PisellTabbar/template/Template1/constants.js

@@ -47,7 +47,7 @@ var DEFAULT_LEVEL_CONFIG = {
   }
 };
 var LEVEL_ADD_ITEMS = {
-  level1: ["all"],
+  level1: ["search", "all"],
   level2: ["expand", "all"],
   level3: ["expand", "all"]
 };

package/lib/components/PisellTabbar/utils/index.js

@@ -38,7 +38,8 @@ var defaultItems = {
     id: -1,
     shop_id: 9,
     parent_id: 0,
-    name: "Search",
+    name: (0, import_locales.getText)("table-filter-find"),
+    text: (0, import_locales.getText)("table-filter-find"),
     slug: "Search",
     key: "search",
     icon: "",

package/lib/components/dataSourceComponents/dataSourceShow/dataSourceQRCode/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const DataSourceQRCode: (props: any) => import("react").JSX.Element;
 export default DataSourceQRCode;

package/lib/components/dataSourceComponents/fields/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const formFieldMap: {
     FormItemCheckbox: import("react").FC<{}> & {
         Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
@@ -60,7 +59,7 @@ declare const formFieldMap: {
     FormItemTranslation: import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
     FormItemIconSelect: import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 };
-declare const getFieldComponent: (fieldComponent: string) => (import("react").FC<{}> & {
+declare const getFieldComponent: (fieldComponent: string) => import("react").FC<any> | (import("react").FC<{}> & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
 } & {
     Group: import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps>;
@@ -96,7 +95,7 @@ declare const getFieldComponent: (fieldComponent: string) => (import("react").FC
     extraParams?: Record<string, any> | undefined;
 } & {
     dataSource?: any;
-}) => import("react").JSX.Element) | import("react").FC<any> | import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Phone/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Mobile/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & {
+}) => import("react").JSX.Element) | import("react").FC<import("./TimePicker/type").TimePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Phone/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Input.Mobile/WithMode").PhoneInputProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & {
     onChange: (value: string) => void;
 } & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("antd/es/input").PasswordProps & import("react").RefAttributes<import("antd").InputRef> & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Radio/type").RadioGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./Checkbox/type").CheckboxGroupProps & import("../dataSourceForm/utils").WithModeProps> | import("react").FC<import("./DateRangePicker/type").DateRangePickerProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Upload/type").UploadProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./Translation/type").TranslationProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps> | import("react").FC<import("./IconSelect/type").IconSelectProps & import("../dataSourceForm/utils").WithModeProps & import("../dataSourceForm/utils").WithFormItemProps>;
 export { getFieldComponent, formFieldMap };

package/lib/components/page/index.js

@@ -98,6 +98,9 @@ var Page = (props) => {
     });
   }, [platform, themeColor]);
   const PisellConfigProvid = isRenderPisellConfigProvider ? import_pisell_config_provider.default : import_react.default.Fragment;
+  (0, import_react.useEffect)(() => {
+    document.body.id = "body";
+  }, []);
   return /* @__PURE__ */ import_react.default.createElement(
     import_config_provider.default,
     {

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const PisellDatePicker: (props: any) => import("react").JSX.Element;
 export default PisellDatePicker;

package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js

@@ -34,17 +34,20 @@ __export(PisellDateTimeDisplay_exports, {
 });
 module.exports = __toCommonJS(PisellDateTimeDisplay_exports);
 var import_react = __toESM(require("react"));
+var import_dayjs = __toESM(require("dayjs"));
 var import_zh_cn = require("dayjs/locale/zh-cn");
 var import_en = require("dayjs/locale/en");
 var import_hooks = require("./hooks");
 var import_utils = require("./utils");
 var import_components = require("./components");
+var import_dateTimeDisplayFormats = require("./formats/dateTimeDisplayFormats");
 var import_PisellDateTimeDisplay = require("./PisellDateTimeDisplay.less");
 var PisellDateTimeDisplay = (props) => {
   const {
     layout = "horizontal",
     textAlign = "center",
     fields,
+    formatByLocale,
     timeFormat,
     dateFormat,
     weekdayFormat,
@@ -62,7 +65,15 @@ var PisellDateTimeDisplay = (props) => {
     className,
     style
   } = props;
-  const computedRefreshInterval = refreshInterval ?? (0, import_utils.getRefreshInterval)(timeFormat);
+  const localeKey = (0, import_utils.getDayjsLocale)(locale);
+  const baseLocale = localeKey.split("-")[0];
+  const presetSource = formatByLocale ?? import_dateTimeDisplayFormats.DATETIME_DISPLAY_FORMATS;
+  const preset = presetSource[localeKey] ?? presetSource[baseLocale] ?? {};
+  const effectiveFields = { ...preset.fields, ...fields };
+  const effectiveDateFormat = { ...preset.dateFormat, ...dateFormat };
+  const effectiveTimeFormat = { ...preset.timeFormat, ...timeFormat };
+  const effectiveWeekdayFormat = { ...preset.weekdayFormat, ...weekdayFormat };
+  const computedRefreshInterval = refreshInterval ?? (0, import_utils.getRefreshInterval)(effectiveTimeFormat);
   const currentTime = (0, import_hooks.useCurrentTime)({
     refreshInterval: computedRefreshInterval,
     disabled: disableAutoRefresh,
@@ -95,7 +106,10 @@ var PisellDateTimeDisplay = (props) => {
     showDate = true,
     showWeekday = true,
     fieldOrder = ["time", "date", "weekday"]
-  } = fields || {};
+  } = effectiveFields || {};
+  const referenceDate = (0, import_dayjs.default)();
+  const relativeDay = (effectiveDateFormat == null ? void 0 : effectiveDateFormat.showRelativeDay) ? (0, import_utils.getRelativeDay)(currentTime, referenceDate) : null;
+  const hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
   const containerInlineStyle = {
     background: containerStyle == null ? void 0 : containerStyle.background,
     borderRadius: containerStyle == null ? void 0 : containerStyle.borderRadius,
@@ -114,7 +128,7 @@ var PisellDateTimeDisplay = (props) => {
           {
             key: "time",
             time: currentTime,
-            format: timeFormat,
+            format: effectiveTimeFormat,
             style: timeStyle
           }
         ) : null;
@@ -124,17 +138,18 @@ var PisellDateTimeDisplay = (props) => {
           {
             key: "date",
             date: currentTime,
-            format: dateFormat,
+            format: effectiveDateFormat,
+            referenceDate: (0, import_dayjs.default)(),
             style: dateStyle
           }
         ) : null;
       case "weekday":
-        return showWeekday ? /* @__PURE__ */ import_react.default.createElement(
+        return showWeekday && !hideWeekdayWhenDateRelative ? /* @__PURE__ */ import_react.default.createElement(
           import_components.WeekdayDisplay,
           {
             key: "weekday",
             weekday: currentTime,
-            format: weekdayFormat,
+            format: effectiveWeekdayFormat,
             style: weekdayStyle
           }
         ) : null;
@@ -143,6 +158,7 @@ var PisellDateTimeDisplay = (props) => {
     }
   };
   if (layout === "inline") {
+    const inlineSeparators = effectiveFields == null ? void 0 : effectiveFields.inlineSeparators;
     const renderedFields2 = fieldOrder.map(renderField).filter((field) => field !== null);
     if (renderedFields2.length === 0) {
       return null;
@@ -154,7 +170,7 @@ var PisellDateTimeDisplay = (props) => {
         style: containerInlineStyle,
         onClick
       },
-      renderedFields2.map((field, index) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: index }, field, index < renderedFields2.length - 1 && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-datetime-display-separator" }, inlineSeparator)))
+      renderedFields2.map((field, index) => /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: index }, field, index < renderedFields2.length - 1 && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-datetime-display-separator" }, (inlineSeparators == null ? void 0 : inlineSeparators[index]) ?? inlineSeparator)))
     );
   }
   const renderedFields = fieldOrder.map(renderField).filter((field) => field !== null);
@@ -166,16 +182,10 @@ var PisellDateTimeDisplay = (props) => {
     const currentLocale = currentTime.locale();
     const isChinese = (0, import_utils.isChinese)(currentLocale);
     if (showDate && showWeekday) {
-      let combinedStr = "";
-      if (isChinese) {
-        const weekdayStr = currentTime.format("ddd");
-        const dateStr = currentTime.format("M月D日");
-        combinedStr = `${weekdayStr} ${dateStr}`;
-      } else {
-        const weekdayStr = currentTime.format("ddd");
-        const dateStr = currentTime.format("D MMM");
-        combinedStr = `${weekdayStr}, ${dateStr}`;
-      }
+      const labels = effectiveDateFormat == null ? void 0 : effectiveDateFormat.relativeDayLabels;
+      const dateStr = relativeDay ? (labels == null ? void 0 : labels[relativeDay]) ?? (0, import_utils.getRelativeDayLabel)(relativeDay, currentTime.locale()) : isChinese ? currentTime.format("M月D日") : currentTime.format("D MMM");
+      const weekdayStr = currentTime.format("ddd");
+      const combinedStr = relativeDay ? dateStr : isChinese ? `${weekdayStr} ${dateStr}` : `${weekdayStr}, ${dateStr}`;
       const dateInlineStyle = {
         fontSize: dateStyle == null ? void 0 : dateStyle.fontSize,
         fontWeight: dateStyle == null ? void 0 : dateStyle.fontWeight,

package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.stories.d.ts

@@ -26,6 +26,11 @@ export declare const InlineLayout: Story;
  * 单行布局 - 自定义分隔符
  */
 export declare const InlineWithCustomSeparator: Story;
+/**
+ * 中文完整日期格式：2025-12-31 - 2:00 周四
+ * 单行、日期在前、日期与时间之间 " - "、时间与星期之间空格
+ */
+export declare const InlineDateTimeWeekdayZh: Story;
 /**
  * 12小时制
  */
@@ -62,6 +67,20 @@ export declare const DateDMY: Story;
  * 中文日期带单位
  */
 export declare const DateChinese: Story;
+/**
+ * 相对日：今天/昨天/明天
+ * 与「当前日期」同天显示「今天」，前一天「昨天」，后一天「明天」；其他日期仍按原格式。
+ * 参考日为 dayjs()，随时间变化：例如 2 月 4 日当天，2 月 4 日显示「今天」，2 月 3 日显示「昨天」。
+ */
+export declare const RelativeDay: Story;
+/**
+ * 相对日 - 英文
+ */
+export declare const RelativeDayEn: Story;
+/**
+ * 相对日 - 自定义文案
+ */
+export declare const RelativeDayCustomLabels: Story;
 /**
  * 英文完整月份
  */