@pisell/materials 1.8.18 → 1.8.19

package/es/components/pisellReservationSchedule/PisellReservationSchedule.less

@@ -0,0 +1,88 @@
+.pisell-reservation-schedule {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.pisell-reservation-schedule-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  padding: 6px 10px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  box-sizing: border-box;
+}
+
+.pisell-reservation-schedule-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.85);
+  cursor: pointer;
+  flex-shrink: 0;
+
+  &:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.14);
+    color: #fff;
+  }
+
+  &:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+}
+
+.pisell-reservation-schedule-btn-icon {
+  width: 16px;
+  height: 16px;
+}
+
+.pisell-reservation-schedule-label {
+  flex: 1;
+  min-width: 0;
+  padding: 0 12px;
+  font-size: 15px;
+  font-weight: 500;
+  line-height: 1.35;
+  color: rgba(255, 255, 255, 0.92);
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pisell-reservation-schedule-label--static {
+  cursor: default;
+}
+
+.pisell-reservation-schedule-label-trigger {
+  margin: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  color: rgba(255, 255, 255, 0.92);
+  width: 100%;
+
+  &:hover {
+    color: #fff;
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(255, 255, 255, 0.45);
+    outline-offset: 2px;
+    border-radius: 4px;
+  }
+}

package/es/components/pisellReservationSchedule/PisellReservationSchedule.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellReservationSchedule } from './PisellReservationSchedule';
+/**
+ * PisellReservationSchedule：预约营业日导航（上一天 / 日期文案 / 下一天）。
+ * 多语言与日期格式依赖 LowCode 引擎 locale。详见组件目录下 docs/PisellReservationSchedule.md。
+ */
+declare const meta: Meta<typeof PisellReservationSchedule>;
+export default meta;
+declare type Story = StoryObj<typeof PisellReservationSchedule>;
+export declare const Default: Story;
+export declare const WithMinMax: Story;
+export declare const Controlled: Story;

package/es/components/pisellReservationSchedule/PisellReservationSchedule.stories.js

@@ -0,0 +1,105 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import dayjs from 'dayjs';
+import { PisellReservationSchedule } from "./PisellReservationSchedule";
+
+/**
+ * PisellReservationSchedule：预约营业日导航（上一天 / 日期文案 / 下一天）。
+ * 多语言与日期格式依赖 LowCode 引擎 locale。详见组件目录下 docs/PisellReservationSchedule.md。
+ */
+var meta = {
+  title: 'Data Entry/PisellReservationSchedule',
+  component: PisellReservationSchedule,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: '深色圆角营业日条：左右切换日历日，中间展示「今天（若当日）· 日期 · 星期」。可与 PisellTimeNavigator 组合为 PisellReservationScheduleBand。支持受控 `value` / `onChange(dayjs)`，以及 `minDate` / `maxDate`。'
+      }
+    }
+  },
+  argTypes: {
+    value: {
+      description: '当前选中日（受控），dayjs 或可解析字符串',
+      control: 'text'
+    },
+    defaultValue: {
+      description: '非受控初始日',
+      control: 'text'
+    },
+    minDate: {
+      description: '不可早于该日（含）',
+      control: 'text'
+    },
+    maxDate: {
+      description: '不可晚于该日（含）',
+      control: 'text'
+    },
+    onChange: {
+      action: 'onChange',
+      description: '选中日变更，参数为 Dayjs（当日 0 点）'
+    },
+    className: {
+      control: 'text'
+    }
+  }
+};
+export default meta;
+export var Default = {
+  args: {
+    defaultValue: dayjs().format('YYYY-MM-DD')
+  },
+  decorators: [function (StoryComp) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxWidth: 440
+      }
+    }, /*#__PURE__*/React.createElement(StoryComp, null));
+  }]
+};
+export var WithMinMax = {
+  args: {
+    defaultValue: dayjs().format('YYYY-MM-DD'),
+    minDate: dayjs().startOf('day'),
+    maxDate: dayjs().add(14, 'day').endOf('day')
+  },
+  decorators: [function (StoryComp) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxWidth: 440
+      }
+    }, /*#__PURE__*/React.createElement(StoryComp, null));
+  }]
+};
+export var Controlled = {
+  render: function ControlledRender() {
+    var _useState = useState(dayjs().startOf('day')),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        maxWidth: 440
+      }
+    }, /*#__PURE__*/React.createElement(PisellReservationSchedule, {
+      value: value,
+      onChange: function onChange(d) {
+        setValue(d);
+        // eslint-disable-next-line no-console
+        console.log('onChange', d.format('YYYY-MM-DD'));
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        marginTop: 12,
+        fontSize: 12,
+        color: '#666'
+      }
+    }, "\u5F53\u524D\uFF1A", value.format('YYYY-MM-DD dddd')));
+  }
+};

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

@@ -0,0 +1,2 @@
+export { PisellReservationSchedule } from './PisellReservationSchedule';
+export type { PisellReservationScheduleProps, ReservationScheduleValue, } from './types';

package/es/components/pisellReservationSchedule/index.js

@@ -0,0 +1 @@
+export { PisellReservationSchedule } from "./PisellReservationSchedule";

package/es/components/pisellReservationSchedule/locales.d.ts

@@ -0,0 +1,25 @@
+/** PisellReservationSchedule 多语言；使用前 locales.init 合并 */
+declare const _default: {
+    en: {
+        'pisell-reservation-schedule.today': string;
+        'pisell-reservation-schedule.prev': string;
+        'pisell-reservation-schedule.next': string;
+        'pisell-reservation-schedule.pick-date': string;
+        'pisell-reservation-schedule.pick-date-title': string;
+    };
+    'zh-CN': {
+        'pisell-reservation-schedule.today': string;
+        'pisell-reservation-schedule.prev': string;
+        'pisell-reservation-schedule.next': string;
+        'pisell-reservation-schedule.pick-date': string;
+        'pisell-reservation-schedule.pick-date-title': string;
+    };
+    'zh-HK': {
+        'pisell-reservation-schedule.today': string;
+        'pisell-reservation-schedule.prev': string;
+        'pisell-reservation-schedule.next': string;
+        'pisell-reservation-schedule.pick-date': string;
+        'pisell-reservation-schedule.pick-date-title': string;
+    };
+};
+export default _default;

package/es/components/pisellReservationSchedule/locales.js

@@ -0,0 +1,24 @@
+/** PisellReservationSchedule 多语言；使用前 locales.init 合并 */
+export default {
+  en: {
+    'pisell-reservation-schedule.today': 'Today',
+    'pisell-reservation-schedule.prev': 'Previous day',
+    'pisell-reservation-schedule.next': 'Next day',
+    'pisell-reservation-schedule.pick-date': 'Pick a date',
+    'pisell-reservation-schedule.pick-date-title': 'Pick a date'
+  },
+  'zh-CN': {
+    'pisell-reservation-schedule.today': '今天',
+    'pisell-reservation-schedule.prev': '上一天',
+    'pisell-reservation-schedule.next': '下一天',
+    'pisell-reservation-schedule.pick-date': '选择日期',
+    'pisell-reservation-schedule.pick-date-title': '选择日期'
+  },
+  'zh-HK': {
+    'pisell-reservation-schedule.today': '今天',
+    'pisell-reservation-schedule.prev': '上一日',
+    'pisell-reservation-schedule.next': '下一日',
+    'pisell-reservation-schedule.pick-date': '選擇日期',
+    'pisell-reservation-schedule.pick-date-title': '選擇日期'
+  }
+};

package/es/components/pisellReservationSchedule/types.d.ts

@@ -0,0 +1,42 @@
+import type { CSSProperties } from 'react';
+import type { Dayjs } from 'dayjs';
+/** 与 PisellTimeNavigator 一致：dayjs 或可解析字符串 */
+export declare type ReservationScheduleValue = Dayjs | string | null | undefined;
+/**
+ * PisellReservationSchedule：营业日切换条（上一日 / 文案 / 下一日）
+ */
+export interface PisellReservationScheduleProps {
+    /**
+     * 当前选中日（受控），日历日语义，建议使用 startOf('day') 对齐
+     */
+    value?: ReservationScheduleValue;
+    /**
+     * 选中日变更
+     */
+    onChange?: (date: Dayjs) => void;
+    /**
+     * 非受控初始日
+     */
+    defaultValue?: ReservationScheduleValue;
+    /**
+     * 不可早于该日（含）
+     */
+    minDate?: ReservationScheduleValue;
+    /**
+     * 不可晚于该日（含）
+     */
+    maxDate?: ReservationScheduleValue;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 根节点样式
+     */
+    style?: CSSProperties;
+    /**
+     * 为 true 时禁用上一日/下一日、日期点选（弹日历）；用于「跟随当前时刻」等只读日期条
+     * @default false
+     */
+    navigationLocked?: boolean;
+}

package/es/components/pisellReservationSchedule/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/pisellReservationScheduleBand/PisellReservationScheduleBand.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { PisellReservationScheduleBandProps } from './types';
+import './PisellReservationScheduleBand.less';
+/**
+ * 预约顶栏组合：营业日切换 + 锚定到选中日的时间导航轴
+ */
+export declare function PisellReservationScheduleBand(props: PisellReservationScheduleBandProps): JSX.Element;
+export declare namespace PisellReservationScheduleBand {
+    var displayName: string;
+}

package/es/components/pisellReservationScheduleBand/PisellReservationScheduleBand.js

@@ -0,0 +1,91 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState, useCallback } from 'react';
+import dayjs from 'dayjs';
+import classNames from 'classnames';
+import { PisellReservationSchedule } from "../pisellReservationSchedule";
+import { PisellTimeNavigator } from "../pisellTimeNavigator";
+import "./PisellReservationScheduleBand.less";
+function startOfDay(d) {
+  return d.startOf('day');
+}
+function withTimeOnDate(dateDay, timeSource) {
+  return startOfDay(dateDay).hour(timeSource.hour()).minute(timeSource.minute()).second(0).millisecond(0);
+}
+
+/**
+ * 预约顶栏组合：营业日切换 + 锚定到选中日的时间导航轴
+ */
+export function PisellReservationScheduleBand(props) {
+  var valueProp = props.value,
+    onChange = props.onChange,
+    defaultValue = props.defaultValue,
+    scheduleProps = props.scheduleProps,
+    timeNavigatorProps = props.timeNavigatorProps,
+    scheduleStartSlot = props.scheduleStartSlot,
+    scheduleEndSlot = props.scheduleEndSlot,
+    className = props.className,
+    style = props.style;
+  var isControlled = valueProp !== undefined;
+  var _useState = useState(function () {
+      var _defaultValue$date, _defaultValue$at;
+      var d = (_defaultValue$date = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.date) !== null && _defaultValue$date !== void 0 ? _defaultValue$date : dayjs().startOf('day');
+      var atSrc = (_defaultValue$at = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.at) !== null && _defaultValue$at !== void 0 ? _defaultValue$at : dayjs();
+      return {
+        date: startOfDay(dayjs(d)),
+        at: withTimeOnDate(dayjs(d), dayjs(atSrc))
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    internal = _useState2[0],
+    setInternal = _useState2[1];
+  var effective = isControlled ? valueProp : internal;
+  var emit = useCallback(function (next) {
+    /** at 保留时间轴返回的绝对时刻（跨日营业时可能为锚定日的次日） */
+    var normalized = {
+      date: startOfDay(next.date),
+      at: next.at
+    };
+    if (!isControlled) setInternal(normalized);
+    onChange === null || onChange === void 0 || onChange(normalized);
+  }, [isControlled, onChange]);
+  var handleDateChange = useCallback(function (d) {
+    emit({
+      date: startOfDay(d),
+      at: withTimeOnDate(d, effective.at)
+    });
+  }, [emit, effective.at]);
+  var handleTimeChange = useCallback(function (t) {
+    emit({
+      date: startOfDay(effective.date),
+      at: t
+    });
+  }, [emit, effective.date]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('pisell-reservation-schedule-band', className),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-reservation-schedule-band-schedule-row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-reservation-schedule-band-slot-start"
+  }, scheduleStartSlot), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-reservation-schedule-band-schedule"
+  }, /*#__PURE__*/React.createElement(PisellReservationSchedule, _extends({
+    value: effective.date,
+    onChange: handleDateChange
+  }, scheduleProps))), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-reservation-schedule-band-slot-end"
+  }, scheduleEndSlot)), /*#__PURE__*/React.createElement("div", {
+    className: "pisell-reservation-schedule-band-navigator"
+  }, /*#__PURE__*/React.createElement(PisellTimeNavigator, _extends({
+    referenceDate: effective.date,
+    value: effective.at,
+    onChange: handleTimeChange
+  }, timeNavigatorProps))));
+}
+PisellReservationScheduleBand.displayName = 'PisellReservationScheduleBand';

package/es/components/pisellReservationScheduleBand/PisellReservationScheduleBand.less

@@ -0,0 +1,49 @@
+.pisell-reservation-schedule-band {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  gap: 12px;
+  box-sizing: border-box;
+}
+
+/** 与中间日程条同一行：整行深色底，左标题 / 中选日 / 右操作 */
+.pisell-reservation-schedule-band-schedule-row {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  column-gap: 12px;
+  box-sizing: border-box;
+  padding: 10px 14px;
+  border-radius: 10px;
+  background: #141824;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.pisell-reservation-schedule-band-slot-start {
+  justify-self: start;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.pisell-reservation-schedule-band-slot-end {
+  justify-self: end;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+
+.pisell-reservation-schedule-band-schedule {
+  justify-self: center;
+  min-width: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.pisell-reservation-schedule-band-navigator {
+  width: 100%;
+  min-width: 0;
+}

package/es/components/pisellReservationScheduleBand/PisellReservationScheduleBand.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellReservationScheduleBand } from './PisellReservationScheduleBand';
+/**
+ * PisellReservationScheduleBand：营业日条 + 横向时间轴顶栏组合，统一 value `{ date, at }`。
+ * 详见组件目录下 docs/PisellReservationScheduleBand.md。
+ */
+declare const meta: Meta<typeof PisellReservationScheduleBand>;
+export default meta;
+declare type Story = StoryObj<typeof PisellReservationScheduleBand>;
+export declare const Default: Story;
+export declare const CustomTimeNavigator: Story;
+export declare const ScheduleMinMax: Story;
+export declare const Controlled: Story;
+export declare const InitialPastDay: Story;
+/** 日程行左右插槽：左标题 + 中间 PisellReservationSchedule + 右操作区（整条顶栏暗色背景需在业务外层自行包一层，避免压住下方时间轴） */
+export declare const WithScheduleSlots: Story;

package/es/components/pisellReservationScheduleBand/PisellReservationScheduleBand.stories.js

@@ -0,0 +1,197 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import dayjs from 'dayjs';
+import { PisellReservationScheduleBand } from "./PisellReservationScheduleBand";
+/**
+ * PisellReservationScheduleBand：营业日条 + 横向时间轴顶栏组合，统一 value `{ date, at }`。
+ * 详见组件目录下 docs/PisellReservationScheduleBand.md。
+ */
+var meta = {
+  title: 'Data Entry/PisellReservationScheduleBand',
+  component: PisellReservationScheduleBand,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: '纵向组合 PisellReservationSchedule 与 PisellTimeNavigator：选中日 `date` 与轴上时刻 `at` 由单一状态驱动；换日时会保留原时刻的时分并映射到新日。可通过 `scheduleProps` / `timeNavigatorProps` 透传子组件配置，适合作为 RecordBoard 等容器的 toolBar 顶栏。'
+      }
+    }
+  },
+  argTypes: {
+    value: {
+      description: '受控：{ date: Dayjs, at: Dayjs }',
+      control: 'object'
+    },
+    defaultValue: {
+      description: '非受控初始值，可只传 date 或 at',
+      control: 'object'
+    },
+    scheduleProps: {
+      description: '透传给 PisellReservationSchedule（不含 value/onChange/defaultValue）',
+      control: 'object'
+    },
+    timeNavigatorProps: {
+      description: '透传给 PisellTimeNavigator（不含 value/onChange/referenceDate）',
+      control: 'object'
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'date 或 at 变化时触发，参数已归一化'
+    },
+    className: {
+      control: 'text'
+    },
+    scheduleStartSlot: {
+      description: '日程行左侧插槽（如标题）',
+      control: false
+    },
+    scheduleEndSlot: {
+      description: '日程行右侧插槽（如状态、主按钮）',
+      control: false
+    }
+  }
+};
+export default meta;
+var wideDecorator = function wideDecorator(StoryComp) {
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%',
+      maxWidth: 960,
+      minWidth: 480
+    }
+  }, /*#__PURE__*/React.createElement(StoryComp, null));
+};
+export var Default = {
+  args: {},
+  decorators: [wideDecorator]
+};
+export var CustomTimeNavigator = {
+  args: {
+    timeNavigatorProps: {
+      stepMinutes: 30,
+      majorStepMinutes: 120,
+      showNowButton: true
+    }
+  },
+  decorators: [wideDecorator]
+};
+export var ScheduleMinMax = {
+  args: {
+    scheduleProps: {
+      minDate: dayjs().subtract(7, 'day'),
+      maxDate: dayjs().add(7, 'day')
+    },
+    defaultValue: {
+      date: dayjs().startOf('day')
+    }
+  },
+  decorators: [wideDecorator]
+};
+export var Controlled = {
+  render: function ControlledBandRender() {
+    var _useState = useState(function () {
+        return {
+          date: dayjs().startOf('day'),
+          at: dayjs()
+        };
+      }),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '100%',
+        maxWidth: 960,
+        minWidth: 480
+      }
+    }, /*#__PURE__*/React.createElement(PisellReservationScheduleBand, {
+      value: value,
+      onChange: function onChange(next) {
+        setValue(next);
+        // eslint-disable-next-line no-console
+        console.log('onChange', {
+          date: next.date.format('YYYY-MM-DD'),
+          at: next.at.format('YYYY-MM-DD HH:mm')
+        });
+      },
+      timeNavigatorProps: {
+        showNowButton: true
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        marginTop: 12,
+        fontSize: 12,
+        color: '#666'
+      }
+    }, "date: ", value.date.format('YYYY-MM-DD'), " \xB7 at:", ' ', value.at.format('HH:mm')));
+  }
+};
+export var InitialPastDay = {
+  args: {
+    defaultValue: {
+      date: dayjs().subtract(1, 'day').startOf('day'),
+      at: dayjs().subtract(1, 'day').hour(14).minute(30).second(0)
+    },
+    timeNavigatorProps: {
+      showNowButton: true
+    }
+  },
+  decorators: [wideDecorator]
+};
+
+/** 日程行左右插槽：左标题 + 中间 PisellReservationSchedule + 右操作区（整条顶栏暗色背景需在业务外层自行包一层，避免压住下方时间轴） */
+export var WithScheduleSlots = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '100%',
+        maxWidth: 960,
+        minWidth: 480
+      }
+    }, /*#__PURE__*/React.createElement(PisellReservationScheduleBand, {
+      scheduleStartSlot: /*#__PURE__*/React.createElement("span", {
+        style: {
+          fontSize: 15,
+          fontWeight: 600
+        }
+      }, "Reservation"),
+      scheduleEndSlot: /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          fontSize: 13,
+          color: '#595959'
+        }
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#52c41a',
+          marginRight: 6
+        }
+      }, "\u25CF"), "Current"), /*#__PURE__*/React.createElement("button", {
+        type: "button",
+        style: {
+          background: '#1677ff',
+          color: '#fff',
+          border: 'none',
+          borderRadius: 8,
+          padding: '6px 14px',
+          fontSize: 14,
+          cursor: 'pointer'
+        }
+      }, "+ \u65B0\u5EFA")),
+      timeNavigatorProps: {
+        showNowButton: true
+      }
+    }));
+  }
+};