@pisell/materials 6.11.17 → 6.11.19

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.less

@@ -0,0 +1,461 @@
+/* Figma 设计规范：Gray/100 #F2F4F7, Gray/200 #EAECF0, Gray/700 #344054, Orange #FF692E, Orange/50 #FFF4ED, Text #333 */
+
+.pisell-time-navigator {
+  position: relative;
+  width: 100%;
+  min-width: 0; /* 在 flex 布局中允许收缩 */
+  background: #fff;
+  border: 1px solid #f2f4f7;
+
+  /* 视口包裹层：限制宽度/高度，内部轴可滚动 */
+
+  .pisell-time-navigator-viewport-wrap {
+    position: relative;
+    width: 100%;
+    min-width: 0;
+  }
+
+  /** 包裹 ScrollView；锁定交互时整块不响应指针，避免拖轴改时间 */
+
+  .pisell-time-navigator-scroll-host {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .pisell-time-navigator-scroll-host--interaction-locked {
+    pointer-events: none;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .pisell-time-navigator-cursor-fixed {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pisell-time-navigator-cursor-fixed--horizontal {
+    justify-content: center;
+  }
+
+  .pisell-time-navigator-cursor-fixed--vertical {
+    align-items: center;
+  }
+
+  &--horizontal {
+    .pisell-time-navigator-axis {
+      flex-direction: row;
+    }
+
+    .pisell-time-navigator-now {
+      position: absolute;
+      right: 0;
+      top: 2px;
+    }
+  }
+
+  &--vertical {
+    /* flex 子项内竖向轴须 min-height:0 + overflow，否则轴随内容无限增高、无法内部滚动 */
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+
+    .pisell-time-navigator-viewport-wrap {
+      flex: 1;
+      min-height: 0;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .pisell-time-navigator-scroll-host {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    .pisell-time-navigator-axis {
+      flex-direction: column;
+    }
+
+    .pisell-time-navigator-now {
+      position: absolute;
+      left: 3px;
+      bottom: 4px;
+      width: 48px;
+      flex-direction: column;
+    }
+  }
+}
+
+/* 轴包裹层：左右/上下各留半屏空白，便于把 0 和 24 点拖到中心 */
+.pisell-time-navigator-axis-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+/* 横向：当前时间渐变块，宽度由 TS 的 CURRENT_TIME_GRADIENT_WIDTH_H_PX 决定，在时间轴背后 */
+.pisell-time-navigator-current-gradient {
+  position: absolute;
+  z-index: 0;
+  pointer-events: none;
+
+  &--horizontal {
+    background: linear-gradient(to right,
+    rgba(255, 255, 255, 0),
+    rgba(217, 78, 12, 0.38),
+    rgba(194, 65, 12, 0.62));
+  }
+}
+
+/* 竖向：当前时间横线，与选择指示线一致，颜色 #FF692E；位置与尺寸由 inline 传入 */
+.pisell-time-navigator-current-line {
+  position: absolute;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.pisell-time-navigator-axis {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  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;
+  inset: 0;
+  pointer-events: none;
+
+  .pisell-time-navigator-background-business {
+    position: absolute;
+    background: rgba(255, 105, 46, 0.08);
+  }
+
+  &--horizontal .pisell-time-navigator-background-business {
+    top: 0;
+    bottom: 0;
+  }
+
+  &--vertical .pisell-time-navigator-background-business {
+    left: 0;
+    right: 0;
+  }
+}
+
+/* 刻度层 */
+.pisell-time-navigator-scale {
+  display: flex;
+  position: relative;
+  z-index: 1;
+
+  &--horizontal {
+    height: 48px;
+    align-items: center;
+    flex-direction: row;
+  }
+
+  /* 竖向：时间从上到下排列，每格 80px 高，与 Figma 一致 */
+
+  &--vertical {
+    width: 100%;
+    flex-direction: column;
+    flex-shrink: 0;
+  }
+}
+
+.pisell-time-navigator-scale-cell {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+
+  &--h {
+    width: 82px;
+    padding: 10px;
+    flex-direction: column;
+    gap: 0;
+    /* 整点：点固定在格子水平中心、底部；非整点：点垂直居中 */
+
+    .pisell-time-navigator-scale-dot {
+      position: absolute;
+      left: 50%;
+      bottom: 10px;
+      transform: translateX(-50%);
+    }
+
+    /* 非整点仅有小点，垂直居中 */
+
+    &:not(.pisell-time-navigator-scale-cell--major) .pisell-time-navigator-scale-dot {
+      top: 50%;
+      bottom: auto;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  /* 竖向：每格高度 20px，宽度 100%；整点格顶部粗线（对齐基准） */
+
+  &--v {
+    flex-shrink: 0;
+    height: 20px;
+    width: 100%;
+    padding: 0 6px;
+    flex-direction: column;
+    justify-content: center;
+    border-bottom: 1px solid #d0d5dd;
+    box-sizing: border-box;
+  }
+
+  &--v.pisell-time-navigator-scale-cell--major {
+    border-top: 2px solid #d0d5dd;
+  }
+}
+
+.pisell-time-navigator-scale-label {
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 28px;
+  color: #000;
+  /* 与 dot 一致：以格子水平中心为基准，避免与竖线错位 */
+  text-align: center;
+  /** 窄格（cursor-moves 压缩）下小时数字不换行 */
+  white-space: nowrap;
+}
+
+.pisell-time-navigator-scale-cell--h .pisell-time-navigator-scale-label {
+  width: 100%;
+}
+
+.pisell-time-navigator-scale-cell--v .pisell-time-navigator-scale-label {
+  font-size: 12px;
+  line-height: normal;
+  color: #333;
+  align-self: flex-start;
+}
+
+.pisell-time-navigator-scale-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #eaecf0;
+  flex-shrink: 0;
+}
+
+/* --h 下点的位置在 &--h 内已用 absolute 固定到格子中心 */
+
+.pisell-time-navigator-scale-divider {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0.5px;
+  background: #e5e5e5;
+}
+
+/* 竖向：细分线在格子底部，时间标签在上 */
+.pisell-time-navigator-scale-cell--v .pisell-time-navigator-scale-divider {
+  bottom: 0;
+}
+
+/* 时间指示器：以内部竖线/横线为对齐基准，容器宽/高=线宽/高，气泡绝对定位居中于线 */
+.pisell-time-navigator-cursor {
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &--horizontal {
+    top: 0;
+    height: 48px;
+    /** 与 CursorLayer CURSOR_ANCHOR_WIDTH_H / SVG 宽一致 */
+    width: 22px;
+  }
+
+  /* Figma 竖向：横线 2px 贯穿轴宽，气泡在横线上方居中，不超出 54px 轴宽 */
+
+  &--vertical {
+    left: 50%;
+    width: 54px;
+    height: 2px;
+    transform: translateX(-50%);
+  }
+
+  &--realtime .pisell-time-navigator-cursor-bubble {
+    background: #ff692e;
+  }
+
+  &--realtime .pisell-time-navigator-cursor-line:not(
+      .pisell-time-navigator-cursor-line--token
+    ) {
+    background: rgba(255, 105, 46, 0.55);
+  }
+
+  &--realtime .pisell-time-navigator-cursor-line--token {
+    color: rgba(255, 105, 46, 0.55);
+  }
+
+  &--draggable {
+    pointer-events: auto;
+    touch-action: none;
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  &--draggable.pisell-time-navigator-cursor--horizontal {
+    width: 36px;
+  }
+
+  &--draggable.pisell-time-navigator-cursor--vertical {
+    height: 40px;
+  }
+}
+
+.pisell-time-navigator-cursor-line {
+  flex: 1;
+  min-width: 3px;
+  min-height: 2px;
+  background: rgba(52, 64, 84, 0.55);
+}
+
+/** 横向：顶三角 + 竖长条（SVG + currentColor） */
+.pisell-time-navigator-cursor-line--token {
+  display: block;
+  width: 22px;
+  flex: 1 1 auto;
+  min-width: 22px;
+  min-height: 0;
+  background: transparent !important;
+  color: rgba(52, 64, 84, 0.55);
+}
+
+.pisell-time-navigator-cursor--vertical .pisell-time-navigator-cursor-line {
+  width: 100%;
+  height: 2px;
+  min-width: 0;
+}
+
+/* 真实「此刻」：与指针气泡同尺寸/行高，锚在轴内当前时刻，橙色底（与渐变/实时色一致） */
+.pisell-time-navigator-current-time-bubble {
+  position: absolute;
+  z-index: 1;
+  bottom: 2px;
+  left: 0;
+  transform: translateX(-50%);
+  padding: 2px 6px;
+  border-radius: 2px;
+  background: #ff692e;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.pisell-time-navigator-cursor-bubble {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 2px 6px;
+  border-radius: 2px;
+  background: #344054;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 12px;
+  white-space: nowrap;
+}
+
+/* 横向：时间气泡贴近轴带底边（48px 高区域底部） */
+.pisell-time-navigator-cursor--horizontal .pisell-time-navigator-cursor-bubble {
+  top: auto;
+  bottom: 2px;
+  margin-top: 0;
+  padding: 2px 6px;
+}
+
+/* 竖向：气泡在横线（cursor-line）垂直方向居中 */
+.pisell-time-navigator-cursor--vertical .pisell-time-navigator-cursor-bubble {
+  top: 50%;
+  left: 50%;
+  right: auto;
+  transform: translate(-50%, -50%);
+  padding: 0 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  line-height: 12px;
+}
+
+/* 交互层 */
+.pisell-time-navigator-gesture {
+  outline: none;
+  min-height: 0;
+  min-width: 0;
+
+  &--horizontal {
+    height: 100%;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  &--vertical {
+    width: 100%;
+  }
+}
+
+/* Now 按钮 */
+.pisell-time-navigator-now {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 9px 20px;
+  border-radius: 8px;
+  border: 1px solid #eaecf0;
+  background: #fff4ed;
+  box-shadow: 0 4px 8px rgba(16, 24, 40, 0.1), 0 2px 4px rgba(16, 24, 40, 0.06);
+  color: #ff692e;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  cursor: pointer;
+  z-index: 3;
+}
+
+.pisell-time-navigator-now--vertical {
+  padding: 10px 20px;
+}
+
+.pisell-time-navigator-now-icon {
+  width: 24px;
+  height: 24px;
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center/contain no-repeat;
+}
+
+.pisell-time-navigator-now--vertical .pisell-time-navigator-now-icon {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 19V5M5 12l7 7 7-7'/%3E%3C/svg%3E");
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M12 19V5M5 12l7 7 7-7'/%3E%3C/svg%3E");
+}

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.stories.d.ts

@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellTimeNavigator } from './PisellTimeNavigator';
+/**
+ * PisellTimeNavigator 组件 Storybook
+ * 时间导航轴：时间范围内浏览、选择、控制
+ */
+declare const meta: Meta<typeof PisellTimeNavigator>;
+export default meta;
+declare type Story = StoryObj<typeof PisellTimeNavigator>;
+/**
+ * 默认：横向、轴动、显示 Now
+ */
+export declare const Default: Story;
+/** 默认 - 竖向 */
+export declare const DefaultVertical: Story;
+/**
+ * 受控 + 默认 12:00
+ */
+export declare const Controlled: Story;
+/** 受控 - 竖向 */
+export declare const ControlledVertical: Story;
+/**
+ * 非受控 + 默认 14:30
+ */
+export declare const Uncontrolled: Story;
+/** 非受控 - 竖向 */
+export declare const UncontrolledVertical: Story;
+/**
+ * 竖向
+ */
+export declare const Vertical: Story;
+/**
+ * 指针动模式（cursor-moves）
+ */
+export declare const CursorMoves: Story;
+/** 指针动模式 - 竖向 */
+export declare const CursorMovesVertical: Story;
+/**
+ * 营业时间高亮 10:00–22:00
+ */
+export declare const BusinessHours: Story;
+/** 营业时间高亮 - 竖向 */
+export declare const BusinessHoursVertical: Story;
+/**
+ * 自定义时间范围 08:00–20:00
+ */
+export declare const CustomRange: Story;
+/** 自定义时间范围 - 竖向 */
+export declare const CustomRangeVertical: Story;
+/**
+ * 步长 30 分钟
+ */
+export declare const Step30: Story;
+/** 步长 30 分钟 - 竖向 */
+export declare const Step30Vertical: Story;
+/**
+ * 惯性滚动开启
+ */
+export declare const Inertia: Story;
+/** 惯性滚动 - 竖向 */
+export declare const InertiaVertical: Story;
+/**
+ * 吸附到整点（松手后自动吸附到 0/15/30/45 分刻度）
+ */
+export declare const SnapToStep: Story;
+/** 吸附到整点 - 竖向 */
+export declare const SnapToStepVertical: Story;
+/**
+ * 隐藏 Now 按钮
+ */
+export declare const NoNowButton: Story;
+/** 隐藏 Now 按钮 - 竖向 */
+export declare const NoNowButtonVertical: Story;
+/**
+ * 实时模式（仅演示，实际会跟随系统时间）
+ */
+export declare const Realtime: Story;
+/** 实时模式 - 竖向 */
+export declare const RealtimeVertical: Story;