@pisell/materials 6.11.5 → 6.11.6

package/es/components/PisellTabbar/PisellTabbar.js

@@ -57,7 +57,8 @@ var PisellTabbar = /*#__PURE__*/forwardRef(function (props, ref) {
     getActiveKey = _useActiveKey.getActiveKey,
     _setActiveKey = _useActiveKey._setActiveKey,
     setCacheActiveKey = _useActiveKey.setCacheActiveKey,
-    resetActiveKey = _useActiveKey.resetActiveKey;
+    resetActiveKey = _useActiveKey.resetActiveKey,
+    getCacheActiveKey = _useActiveKey.getCacheActiveKey;
   var level1Value = useMemo(function () {
     return getActiveKey(0);
   }, [activeKey]);
@@ -402,7 +403,50 @@ var PisellTabbar = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     }));
   }, [expand]);
-
+  var renderSearch = useCallback(function (itemProps, level) {
+    return /*#__PURE__*/React.createElement(PisellFind, {
+      showHistory: false,
+      modalWidth: '100%',
+      ref: searchRef,
+      onSearch: function onSearch(e) {
+        _onSearch === null || _onSearch === void 0 || _onSearch(e);
+      },
+      getContainer: function getContainer() {
+        return document.querySelector('#sku-list-tabbar') || document.body;
+      },
+      modalStyle: {
+        width: '100%'
+      },
+      onOpen: openSearchMode,
+      onClose: closeSearchMode,
+      trigger: /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+        card: function card(cardProps) {
+          var _cardProps = _objectSpread(_objectSpread({}, cardProps), {}, {
+            text: /*#__PURE__*/React.createElement("div", {
+              style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4
+              }
+            }, /*#__PURE__*/React.createElement(Iconfont, {
+              type: "pisell2-search-lg",
+              style: {
+                color: '#fff',
+                fontSize: 20
+              }
+            }), /*#__PURE__*/React.createElement(Iconfont, {
+              type: "pisell2-scan",
+              style: {
+                color: '#fff',
+                fontSize: 20
+              }
+            }), /*#__PURE__*/React.createElement("span", null, getText('table-filter-find')))
+          });
+          return renderLevelNCard(_cardProps, level);
+        }
+      }))
+    });
+  }, [activeKey]);
   /**
    * 渲染一级 Tab 项
    */
@@ -411,48 +455,7 @@ var PisellTabbar = /*#__PURE__*/forwardRef(function (props, ref) {
     // 处理自定义点击事件的项（如展开按钮）
     if (itemData !== null && itemData !== void 0 && itemData.customClick) {
       if (itemProps.dataSource.key === 'search') {
-        return /*#__PURE__*/React.createElement(PisellFind, {
-          showHistory: false,
-          modalWidth: '100%',
-          ref: searchRef,
-          onSearch: function onSearch(e) {
-            _onSearch === null || _onSearch === void 0 || _onSearch(e);
-          },
-          getContainer: function getContainer() {
-            return document.querySelector('#sku-list-tabbar') || document.body;
-          },
-          modalStyle: {
-            width: '100%'
-          },
-          onOpen: openSearchMode,
-          onClose: closeSearchMode,
-          trigger: /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
-            card: function card(cardProps) {
-              var _cardProps = _objectSpread(_objectSpread({}, cardProps), {}, {
-                text: /*#__PURE__*/React.createElement("div", {
-                  style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 4
-                  }
-                }, /*#__PURE__*/React.createElement(Iconfont, {
-                  type: "pisell2-search-lg",
-                  style: {
-                    color: '#fff',
-                    fontSize: 20
-                  }
-                }), /*#__PURE__*/React.createElement(Iconfont, {
-                  type: "pisell2-scan",
-                  style: {
-                    color: '#fff',
-                    fontSize: 20
-                  }
-                }), /*#__PURE__*/React.createElement("span", null, getText('table-filter-find')))
-              });
-              return renderLevelNCard(_cardProps, 'level1');
-            }
-          }))
-        });
+        return renderSearch(itemProps, 'level1');
       }
       if (itemProps.dataSource.key === 'expand') {
         return renderExpand(itemProps, 'level1');

package/es/components/PisellTabbar/template/Template1/PisellTabbar.d.ts

@@ -1,20 +1,5 @@
 import React from 'react';
-import { PisellTabbarProps } from '../../types';
 import '../../PisellTabbar.less';
-/**
- * PisellTabbar - 多层级 Tabbar 组件
- *
- * 支持最多 3 层级的 Tab 导航，每层级可独立展开/收起
- *
- * @component
- * @example
- * ```tsx
- * <PisellTabbar
- *   dataSource={categoryData}
- *   value={[1, 10, 100]}
- *   onChange={(value) => console.log('当前选中:', value)}
- * />
- * ```
- */
-declare const PisellTabbar: React.FC<PisellTabbarProps>;
-export default PisellTabbar;
+import { PisellTabbarProps } from '../../types';
+declare const _default: React.ForwardRefExoticComponent<PisellTabbarProps & React.RefAttributes<unknown>>;
+export default _default;

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

@@ -5,16 +5,18 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { useCallback, useEffect, useMemo } from 'react';
 import classNames from 'classnames';
-import SuperTabs from "../../../PisellSuperTabs";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { getText } from "../../../../locales";
 import PisellCards from "../../../PisellCards";
+import SuperTabs from "../../../PisellSuperTabs";
 import Iconfont from "../../../iconfont";
+import { PisellFind } from "../../../pisellFind";
+import "../../PisellTabbar.less";
 import { useActiveKey, useExpand } from "../../hooks";
-import { addDataSourceItemsByKey, getDefaultActiveKey } from "./utils";
-import { DEFAULT_LEVEL_CONFIG, LEVEL_ADD_ITEMS, getExpandConfig } from "./constants";
 import mock from "../../mock";
-import "../../PisellTabbar.less";
+import { DEFAULT_LEVEL_CONFIG, LEVEL_ADD_ITEMS, getExpandConfig } from "./constants";
+import { addDataSourceItemsByKey, getDefaultActiveKey } from "./utils";
 var tabbarId = 'sku-list-tabbar-temp1';
 
 /**
@@ -32,7 +34,7 @@ var tabbarId = 'sku-list-tabbar-temp1';
  * />
  * ```
  */
-var PisellTabbar = function PisellTabbar(props) {
+var PisellTabbar = function PisellTabbar(props, ref) {
   var _props$dataSource = props.dataSource,
     dataSource = _props$dataSource === void 0 ? props !== null && props !== void 0 && props.__designMode ? mock : mock : _props$dataSource,
     value = props.value,
@@ -42,7 +44,10 @@ var PisellTabbar = function PisellTabbar(props) {
     customLevelConfig = props.levelConfig,
     customExpandConfig = props.expandConfig,
     _props$maxLevel = props.maxLevel,
-    maxLevel = _props$maxLevel === void 0 ? 3 : _props$maxLevel;
+    maxLevel = _props$maxLevel === void 0 ? 3 : _props$maxLevel,
+    _onSearch = props.onSearch;
+  var containerRef = useRef(null);
+  var searchRef = useRef(null);
 
   // 激活的 key 管理
   var _useActiveKey = useActiveKey({
@@ -52,7 +57,9 @@ var PisellTabbar = function PisellTabbar(props) {
     setActiveKey = _useActiveKey.setActiveKey,
     getActiveKey = _useActiveKey.getActiveKey,
     _setActiveKey = _useActiveKey._setActiveKey,
-    activeKey = _useActiveKey.activeKey;
+    activeKey = _useActiveKey.activeKey,
+    setCacheActiveKey = _useActiveKey.setCacheActiveKey,
+    resetActiveKey = _useActiveKey.resetActiveKey;
   console.log('getActiveKey', activeKey);
 
   // 展开状态管理
@@ -63,6 +70,43 @@ var PisellTabbar = function PisellTabbar(props) {
 
   // 展开配置
   var expandConfig = customExpandConfig || getExpandConfig();
+  var level1Value = useMemo(function () {
+    return getActiveKey(0);
+  }, [activeKey]);
+  var level2Value = useMemo(function () {
+    return getActiveKey(1);
+  }, [activeKey]);
+  var level3Value = useMemo(function () {
+    return getActiveKey(2);
+  }, [activeKey]);
+
+  /**
+   * 打开搜索模式
+   */
+  var openSearchMode = function openSearchMode() {
+    setCacheActiveKey(activeKey);
+    _setActiveKey([]);
+    onChange === null || onChange === void 0 || onChange([]);
+  };
+
+  /**
+   * 关闭搜索模式
+   */
+  var closeSearchMode = function closeSearchMode() {
+    _onSearch === null || _onSearch === void 0 || _onSearch('');
+    resetActiveKey();
+  };
+
+  //@ts-ignore
+  useImperativeHandle(ref, function () {
+    var _searchRef$current;
+    if (props !== null && props !== void 0 && props.__designMode) {
+      return containerRef.current;
+    }
+    return {
+      closeSearchMode: searchRef === null || searchRef === void 0 || (_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.close
+    };
+  });
 
   /**
    * 同步外部 value 到内部状态
@@ -144,6 +188,50 @@ var PisellTabbar = function PisellTabbar(props) {
       })
     }));
   }, [expandConfig, activeKey, getLevelConfig]);
+  var renderSearch = useCallback(function (itemProps, level) {
+    return /*#__PURE__*/React.createElement(PisellFind, {
+      showHistory: false,
+      modalWidth: '100%',
+      ref: searchRef,
+      onSearch: function onSearch(e) {
+        _onSearch === null || _onSearch === void 0 || _onSearch(e);
+      },
+      getContainer: function getContainer() {
+        return document.querySelector("#".concat(tabbarId)) || document.body;
+      },
+      modalStyle: {
+        width: '100%'
+      },
+      onOpen: openSearchMode,
+      onClose: closeSearchMode,
+      trigger: /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+        card: function card(cardProps) {
+          var _cardProps = _objectSpread(_objectSpread({}, cardProps), {}, {
+            text: /*#__PURE__*/React.createElement("div", {
+              style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4
+              }
+            }, /*#__PURE__*/React.createElement(Iconfont, {
+              type: "pisell2-search-lg",
+              style: {
+                color: '#000',
+                fontSize: 20
+              }
+            }), /*#__PURE__*/React.createElement(Iconfont, {
+              type: "pisell2-scan",
+              style: {
+                color: '#000',
+                fontSize: 20
+              }
+            }), /*#__PURE__*/React.createElement("span", null, getText('table-filter-find')))
+          });
+          return renderNormalCard(_cardProps, level);
+        }
+      }))
+    });
+  }, [activeKey]);
 
   /**
    * 渲染 level2/level3 普通卡片
@@ -152,8 +240,9 @@ var PisellTabbar = function PisellTabbar(props) {
     var _cardProps$active2;
     var itemData = cardProps.dataSource;
     var levelCfg = getLevelConfig(level);
-    return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({}, cardProps, {
-      text: itemData.name,
+    return /*#__PURE__*/React.createElement(PisellCards.TextCard, _extends({
+      text: itemData.name
+    }, cardProps, {
       variant: "outlined",
       widthMode: "auto",
       textConfig: {
@@ -190,19 +279,22 @@ var PisellTabbar = function PisellTabbar(props) {
    */
   var renderLevel1Item = useCallback(function (itemProps) {
     var itemData = itemProps.dataSource;
-    var level1Config = getLevelConfig('level1');
     var isExpanded = getExpand('level1');
-
-    // 处理展开按钮
     if (itemData !== null && itemData !== void 0 && itemData.customClick) {
-      return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
-        card: function card(cardProps) {
-          return renderExpandCard(cardProps, 'level1', isExpanded);
-        },
-        onClick: function onClick() {
-          return toggleExpand('level1');
-        }
-      }));
+      if (itemProps.dataSource.key === 'search') {
+        return renderSearch(itemProps, 'level1');
+      }
+      if (itemProps.dataSource.key === 'expand') {
+        return /*#__PURE__*/React.createElement(PisellCards.MultilevelCard, _extends({}, itemProps, {
+          card: function card(cardProps) {
+            return renderExpandCard(cardProps, 'level1', isExpanded);
+          },
+          onClick: function onClick() {
+            return toggleExpand('level1');
+          }
+        }));
+      }
+      return null;
     }
 
     // 普通项
@@ -237,9 +329,10 @@ var PisellTabbar = function PisellTabbar(props) {
     var skuId = "sku-list-tabbar-".concat(panelProps.dataSource.id);
     return /*#__PURE__*/React.createElement(SuperTabs, {
       id: skuId,
+      isControlled: true,
       tabItemStyle: {},
       dataSource: _dataSource,
-      value: String(getActiveKey(1)),
+      value: level2Value,
       onChange: handleLevel2Change,
       rowKey: "id",
       style: {
@@ -307,7 +400,7 @@ var PisellTabbar = function PisellTabbar(props) {
         }));
       }
     });
-  }, [maxLevel, activeKey, getActiveKey, handleLevel2Change, getExpand, toggleExpand, getLevelConfig, renderExpandCard, renderNormalCard]);
+  }, [level2Value, maxLevel, activeKey, getActiveKey, handleLevel2Change, getExpand, toggleExpand, getLevelConfig, renderExpandCard, renderNormalCard]);
 
   /**
    * 渲染三级 Tabbar 面板
@@ -323,9 +416,10 @@ var PisellTabbar = function PisellTabbar(props) {
     var skuId = "sku-list-tabbar-".concat(panelProps2.dataSource.id);
     return /*#__PURE__*/React.createElement(SuperTabs, {
       id: skuId,
+      isControlled: true,
       tabItemStyle: {},
       dataSource: _dataSource2,
-      value: String(getActiveKey(2)),
+      value: level3Value,
       onChange: handleLevel3Change,
       rowKey: "id",
       style: {
@@ -383,7 +477,7 @@ var PisellTabbar = function PisellTabbar(props) {
         }));
       }
     });
-  }, [maxLevel, activeKey, getActiveKey, handleLevel3Change, getExpand, toggleExpand, getLevelConfig, renderExpandCard, renderNormalCard]);
+  }, [level3Value, maxLevel, activeKey, getActiveKey, handleLevel3Change, getExpand, toggleExpand, getLevelConfig, renderExpandCard, renderNormalCard]);
 
   /**
    * 渲染一级 Tabbar
@@ -392,12 +486,14 @@ var PisellTabbar = function PisellTabbar(props) {
   var isExpanded1 = getExpand('level1');
   return dataSource.length ? /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-tabbar', className),
-    style: style
+    style: style,
+    ref: containerRef
   }, /*#__PURE__*/React.createElement(SuperTabs, {
+    isControlled: true,
     id: tabbarId,
     tabItemStyle: {},
     dataSource: level1DataSource,
-    value: String(getActiveKey(0)),
+    value: level1Value,
     onChange: handleLevel1Change,
     rowKey: "id",
     style: {
@@ -424,4 +520,4 @@ var PisellTabbar = function PisellTabbar(props) {
   })) : null;
 };
 PisellTabbar.displayName = 'PisellTabbar';
-export default PisellTabbar;
+export default /*#__PURE__*/forwardRef(PisellTabbar);

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

@@ -27,7 +27,7 @@ export var DEFAULT_LEVEL_CONFIG = {
  * 获取层级对应的添加项配置
  */
 export var LEVEL_ADD_ITEMS = {
-  level1: ['all'],
+  level1: ['search', 'all'],
   level2: ['expand', 'all'],
   level3: ['expand', 'all']
 };

package/es/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.d.ts

@@ -1,5 +1,5 @@
 declare const useDataSourceKey: () => {
-    dataSourceKey: string | undefined;
-    dataSourceKeyRef: import("react").MutableRefObject<string | undefined>;
+    dataSourceKey: string | import("../../provider/dataSource/DataSourceContext").DataSourceType | undefined;
+    dataSourceKeyRef: import("react").MutableRefObject<string | import("../../provider/dataSource/DataSourceContext").DataSourceType | undefined>;
 };
 export default useDataSourceKey;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useTableProps.d.ts

@@ -19,7 +19,7 @@ interface UseTablePropsProps {
  */
 declare const useTableProps: (props: UseTablePropsProps) => {
     currentComponentId: any;
-    title: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
+    title: string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
     pagination: {
         total: number;
         current: number;
@@ -28,7 +28,7 @@ declare const useTableProps: (props: UseTablePropsProps) => {
         showSizeChanger: boolean;
     };
     columns: import("./useColumns").Column[];
-    subTitle: number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
+    subTitle: string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | (() => React.ReactNode) | null | undefined;
     buttons: any[] | null;
     filter: {
         dom: any;

package/es/components/pisellDataSourceContainer/hooks/useDataSourceKey.d.ts

@@ -1,5 +1,5 @@
 declare const useDataSourceKey: () => {
-    dataSourceKey: string | undefined;
-    dataSourceKeyRef: import("react").MutableRefObject<string | undefined>;
+    dataSourceKey: string | import("../../dataSourceComponents/provider/dataSource/DataSourceContext").DataSourceType | undefined;
+    dataSourceKeyRef: import("react").MutableRefObject<string | import("../../dataSourceComponents/provider/dataSource/DataSourceContext").DataSourceType | undefined>;
 };
 export default useDataSourceKey;

package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js

@@ -5,11 +5,13 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
+import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import 'dayjs/locale/en';
 import { useCurrentTime } from "./hooks";
-import { getRefreshInterval, isChinese as checkIsChinese } from "./utils";
+import { getRefreshInterval, isChinese as checkIsChinese, getRelativeDay, getRelativeDayLabel, getDayjsLocale } from "./utils";
 import { TimeDisplay, DateDisplay, WeekdayDisplay } from "./components";
+import { DATETIME_DISPLAY_FORMATS } from "./formats/dateTimeDisplayFormats";
 import "./PisellDateTimeDisplay.less";
 
 /**
@@ -40,11 +42,13 @@ import "./PisellDateTimeDisplay.less";
  * />
  */
 export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
+  var _ref, _presetSource$localeK;
   var _props$layout = props.layout,
     layout = _props$layout === void 0 ? 'horizontal' : _props$layout,
     _props$textAlign = props.textAlign,
     textAlign = _props$textAlign === void 0 ? 'center' : _props$textAlign,
     fields = props.fields,
+    formatByLocale = props.formatByLocale,
     timeFormat = props.timeFormat,
     dateFormat = props.dateFormat,
     weekdayFormat = props.weekdayFormat,
@@ -64,8 +68,18 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
     className = props.className,
     style = props.style;
 
+  // 多语言格式：formatByLocale 优先，否则用内置 DATETIME_DISPLAY_FORMATS；再与单项 props 合并（单项优先）
+  var localeKey = getDayjsLocale(locale);
+  var baseLocale = localeKey.split('-')[0];
+  var presetSource = formatByLocale !== null && formatByLocale !== void 0 ? formatByLocale : DATETIME_DISPLAY_FORMATS;
+  var preset = (_ref = (_presetSource$localeK = presetSource[localeKey]) !== null && _presetSource$localeK !== void 0 ? _presetSource$localeK : presetSource[baseLocale]) !== null && _ref !== void 0 ? _ref : {};
+  var effectiveFields = _objectSpread(_objectSpread({}, preset.fields), fields);
+  var effectiveDateFormat = _objectSpread(_objectSpread({}, preset.dateFormat), dateFormat);
+  var effectiveTimeFormat = _objectSpread(_objectSpread({}, preset.timeFormat), timeFormat);
+  var effectiveWeekdayFormat = _objectSpread(_objectSpread({}, preset.weekdayFormat), weekdayFormat);
+
   // 计算刷新间隔
-  var computedRefreshInterval = refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : getRefreshInterval(timeFormat);
+  var computedRefreshInterval = refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : getRefreshInterval(effectiveTimeFormat);
 
   // 使用自定义 hook 管理当前时间
   var currentTime = useCurrentTime({
@@ -93,16 +107,21 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
     }, /*#__PURE__*/React.createElement("span", null, formattedTime));
   }
 
-  // 获取字段配置
-  var _ref = fields || {},
-    _ref$showTime = _ref.showTime,
-    showTime = _ref$showTime === void 0 ? true : _ref$showTime,
-    _ref$showDate = _ref.showDate,
-    showDate = _ref$showDate === void 0 ? true : _ref$showDate,
-    _ref$showWeekday = _ref.showWeekday,
-    showWeekday = _ref$showWeekday === void 0 ? true : _ref$showWeekday,
-    _ref$fieldOrder = _ref.fieldOrder,
-    fieldOrder = _ref$fieldOrder === void 0 ? ['time', 'date', 'weekday'] : _ref$fieldOrder;
+  // 获取字段配置（已含多语言预设合并）
+  var _ref2 = effectiveFields || {},
+    _ref2$showTime = _ref2.showTime,
+    showTime = _ref2$showTime === void 0 ? true : _ref2$showTime,
+    _ref2$showDate = _ref2.showDate,
+    showDate = _ref2$showDate === void 0 ? true : _ref2$showDate,
+    _ref2$showWeekday = _ref2.showWeekday,
+    showWeekday = _ref2$showWeekday === void 0 ? true : _ref2$showWeekday,
+    _ref2$fieldOrder = _ref2.fieldOrder,
+    fieldOrder = _ref2$fieldOrder === void 0 ? ['time', 'date', 'weekday'] : _ref2$fieldOrder;
+
+  // 日期与星期一体：若日期以相对日（今天/昨天/明天）展示，则不展示星期
+  var referenceDate = dayjs();
+  var relativeDay = effectiveDateFormat !== null && effectiveDateFormat !== void 0 && effectiveDateFormat.showRelativeDay ? getRelativeDay(currentTime, referenceDate) : null;
+  var hideWeekdayWhenDateRelative = showDate && relativeDay !== null;
 
   // 构建容器样式
   var containerInlineStyle = _objectSpread({
@@ -122,21 +141,22 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
         return showTime ? /*#__PURE__*/React.createElement(TimeDisplay, {
           key: "time",
           time: currentTime,
-          format: timeFormat,
+          format: effectiveTimeFormat,
           style: timeStyle
         }) : null;
       case 'date':
         return showDate ? /*#__PURE__*/React.createElement(DateDisplay, {
           key: "date",
           date: currentTime,
-          format: dateFormat,
+          format: effectiveDateFormat,
+          referenceDate: dayjs(),
           style: dateStyle
         }) : null;
       case 'weekday':
-        return showWeekday ? /*#__PURE__*/React.createElement(WeekdayDisplay, {
+        return showWeekday && !hideWeekdayWhenDateRelative ? /*#__PURE__*/React.createElement(WeekdayDisplay, {
           key: "weekday",
           weekday: currentTime,
-          format: weekdayFormat,
+          format: effectiveWeekdayFormat,
           style: weekdayStyle
         }) : null;
       default:
@@ -144,14 +164,12 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
     }
   };
 
-  // 单行布局：使用分隔符连接
+  // 单行布局：使用分隔符连接，支持每段不同分隔符（如 2025-12-31 - 2:00 周四）
   if (layout === 'inline') {
-    // 根据 fieldOrder 渲染字段，过滤掉 null
+    var inlineSeparators = effectiveFields === null || effectiveFields === void 0 ? void 0 : effectiveFields.inlineSeparators;
     var _renderedFields = fieldOrder.map(renderField).filter(function (field) {
       return field !== null;
     });
-
-    // 如果没有要显示的字段，返回 null
     if (_renderedFields.length === 0) {
       return null;
     }
@@ -160,11 +178,12 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
       style: containerInlineStyle,
       onClick: onClick
     }, _renderedFields.map(function (field, index) {
+      var _inlineSeparators$ind;
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: index
       }, field, index < _renderedFields.length - 1 && /*#__PURE__*/React.createElement("span", {
         className: "pisell-datetime-display-separator"
-      }, inlineSeparator));
+      }, (_inlineSeparators$ind = inlineSeparators === null || inlineSeparators === void 0 ? void 0 : inlineSeparators[index]) !== null && _inlineSeparators$ind !== void 0 ? _inlineSeparators$ind : inlineSeparator));
     }));
   }
 
@@ -187,20 +206,14 @@ export var PisellDateTimeDisplay = function PisellDateTimeDisplay(props) {
     var currentLocale = currentTime.locale();
     var isChinese = checkIsChinese(currentLocale);
 
-    // 当同时显示日期和星期时，使用合并格式
+    // 当同时显示日期和星期时，使用合并格式；有相对日时只展示相对日，不展示具体日期与星期
     if (showDate && showWeekday) {
-      var combinedStr = '';
-      if (isChinese) {
-        // 中文环境：使用格式 "周五 1月30日"
-        var weekdayStr = currentTime.format('ddd'); // 周五
-        var dateStr = currentTime.format('M月D日'); // 1月30日
-        combinedStr = "".concat(weekdayStr, " ").concat(dateStr);
-      } else {
-        // 英文环境：使用格式 "Sat, 21 Mar"
-        var _weekdayStr = currentTime.format('ddd'); // Sat
-        var _dateStr = currentTime.format('D MMM'); // 21 Mar
-        combinedStr = "".concat(_weekdayStr, ", ").concat(_dateStr);
-      }
+      var _labels$relativeDay;
+      var labels = effectiveDateFormat === null || effectiveDateFormat === void 0 ? void 0 : effectiveDateFormat.relativeDayLabels;
+      var dateStr = relativeDay ? (_labels$relativeDay = labels === null || labels === void 0 ? void 0 : labels[relativeDay]) !== null && _labels$relativeDay !== void 0 ? _labels$relativeDay : getRelativeDayLabel(relativeDay, currentTime.locale()) : isChinese ? currentTime.format('M月D日') : currentTime.format('D MMM');
+      var weekdayStr = currentTime.format('ddd');
+      // 相对日替换掉原日期展示：有今天/昨天/明天时只显示相对日，不拼接具体日期或星期
+      var combinedStr = relativeDay ? dateStr : isChinese ? "".concat(weekdayStr, " ").concat(dateStr) : "".concat(weekdayStr, ", ").concat(dateStr);
 
       // 构建日期样式
       var dateInlineStyle = {

package/es/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;
 /**
  * 英文完整月份
  */