@pisell/materials 1.8.20 → 1.8.21

package/es/components/pisellReservationScheduleBand/PisellReservationScheduleBand.js

@@ -29,6 +29,7 @@ export function PisellReservationScheduleBand(props) {
     timeNavigatorProps = props.timeNavigatorProps,
     scheduleStartSlot = props.scheduleStartSlot,
     scheduleEndSlot = props.scheduleEndSlot,
+    scheduleAfterDateSlot = props.scheduleAfterDateSlot,
     className = props.className,
     style = props.style;
   var isControlled = valueProp !== undefined;
@@ -78,7 +79,9 @@ export function PisellReservationScheduleBand(props) {
   }, /*#__PURE__*/React.createElement(PisellReservationSchedule, _extends({
     value: effective.date,
     onChange: handleDateChange
-  }, scheduleProps))), /*#__PURE__*/React.createElement("div", {
+  }, scheduleProps)), scheduleAfterDateSlot ? /*#__PURE__*/React.createElement("div", {
+    className: "pisell-reservation-schedule-band-after-date"
+  }, scheduleAfterDateSlot) : null), /*#__PURE__*/React.createElement("div", {
     className: "pisell-reservation-schedule-band-slot-end"
   }, scheduleEndSlot)), /*#__PURE__*/React.createElement("div", {
     className: "pisell-reservation-schedule-band-navigator"

package/es/components/pisellReservationScheduleBand/PisellReservationScheduleBand.less

@@ -3,7 +3,7 @@
   flex-direction: column;
   align-items: stretch;
   width: 100%;
-  gap: 12px;
+  gap: 0;
   box-sizing: border-box;
 }
 
@@ -17,7 +17,7 @@
   column-gap: 12px;
   box-sizing: border-box;
   padding: 10px 14px;
-  border-radius: 10px;
+  border-radius: 0;
   background: #141824;
   border: 1px solid rgba(255, 255, 255, 0.06);
 }
@@ -40,7 +40,24 @@
   justify-self: center;
   min-width: 0;
   display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
   justify-content: center;
+  gap: 8px;
+}
+
+/** 日程组件根节点默认 width:100%，在中间栏会与「日期右侧」插槽分两行；此处收窄为内容宽，保证与 after-date 同一行 */
+.pisell-reservation-schedule-band-schedule > .pisell-reservation-schedule {
+  width: auto;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.pisell-reservation-schedule-band-after-date {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 .pisell-reservation-schedule-band-navigator {

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

@@ -40,6 +40,10 @@ export interface PisellReservationScheduleBandProps {
      * 顶栏日程行：PisellReservationSchedule 右侧自定义内容（如状态、主按钮）
      */
     scheduleEndSlot?: ReactNode;
+    /**
+     * 顶栏日程行：紧挨在选日组件之后（如「跟随当前」），与中间列同一 flex 区
+     */
+    scheduleAfterDateSlot?: ReactNode;
     className?: string;
     style?: CSSProperties;
 }

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PisellContextType } from '../pisell-config-provider/context';
+import './index.less';
+export interface PisellRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    platform?: PisellContextType['platform'];
+    gap?: number;
+    padding?: number;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    centerContent?: React.ReactNode;
+    centerContentFill?: boolean;
+}
+/**
+ * @title: Pisell Row
+ * @description:  左中右布局组件
+ * @param {PisellRowProps} props
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-08-16 10:38
+ */
+declare const PisellRow: (props: PisellRowProps) => JSX.Element;
+export default PisellRow;

package/es/components/pisellShellFrame/PisellShellFrame.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { PisellShellFrameProps } from './types';
+import './PisellShellFrame.less';
+/**
+ * PisellShellFrame：通用壳层布局组件。
+ * 支持通过 config 控制各区域显隐，不同展示类型（表格/看板/日历/楼层图等）复用同一壳层。
+ *
+ * - 顶部：标题区（标题/副标题/辅助信息）、工具区（Toolbar）、统计区（Statistic List，可选折叠）
+ * - 中间：滚动承载（可选）+ Layout 插槽（children）
+ * - 底部：批量操作条（按选中状态出现）、状态提示区（加载/错误/同步提示等）
+ */
+export declare const PisellShellFrame: React.FC<PisellShellFrameProps>;
+export default PisellShellFrame;

package/es/components/pisellShellFrame/PisellShellFrame.less

@@ -15,15 +15,18 @@
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 8px;
+
     .pisell-shell-frame-title-main {
       font-size: 16px;
       font-weight: 600;
     }
+
     .pisell-shell-frame-title-sub {
       font-size: 12px;
       color: rgba(0, 0, 0, 0.45);
       margin-left: 8px;
     }
+
     .pisell-shell-frame-title-extra {
       flex-shrink: 0;
     }
@@ -33,8 +36,15 @@
     margin-bottom: 8px;
   }
 
+  /** RecordBoard 平面图模式：与日程带衔接，去掉工具栏与内容区间距 */
+
+  &--floor-map-view &-toolbar {
+    margin-bottom: 0;
+  }
+
   &-statistic {
     margin-bottom: 8px;
+
     &-collapse-header {
       cursor: pointer;
       user-select: none;
@@ -66,6 +76,7 @@
   &-batch-bar {
     margin-top: 8px;
     /* 无内容时不占位，避免多余 margin */
+
     &:empty {
       margin-top: 0;
       display: none;

package/es/components/pisellShellFrame/PisellShellFrame.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellShellFrame } from './PisellShellFrame';
+declare const meta: Meta<typeof PisellShellFrame>;
+export default meta;
+declare type Story = StoryObj<typeof PisellShellFrame>;
+/** 仅标题区 */
+export declare const TitleOnly: Story;
+/** 标题 + 工具区 */
+export declare const WithToolbar: Story;
+/** 标题 + 统计区（可折叠，国际化） */
+export declare const WithStatisticCollapsible: Story;
+/** 中间滚动 + 底部批量条 + 状态区 */
+export declare const WithScrollBatchAndStatus: Story;
+/** 全区域展示（默认展开统计） */
+export declare const Full: Story;

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

@@ -0,0 +1,2 @@
+export { PisellShellFrame, default } from './PisellShellFrame';
+export type { PisellShellFrameProps, PisellShellFrameConfig, PisellShellFrameScrollConfig, } from './types';

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

@@ -0,0 +1,56 @@
+import type { ReactNode, CSSProperties } from 'react';
+/**
+ * 滚动配置：为 true 时使用默认滚动；为对象时传入样式或 scroll 相关配置。
+ */
+export declare type PisellShellFrameScrollConfig = boolean | {
+    style?: CSSProperties;
+    className?: string;
+};
+/**
+ * PisellShellFrame 配置：控制各区域的展示与行为。
+ * 不同展示类型（表格/看板/日历等）复用同一壳层，通过配置控制显隐。
+ */
+export interface PisellShellFrameConfig {
+    /** 是否展示顶部标题区（标题/副标题/辅助信息） */
+    showTitle?: boolean;
+    /** 是否展示顶部工具区（Toolbar） */
+    showToolbar?: boolean;
+    /** 是否展示顶部统计区（Statistic List） */
+    showStatistic?: boolean;
+    /** 统计区是否支持折叠，仅 showStatistic 为 true 时有效 */
+    statisticCollapsible?: boolean;
+    /** 中间内容区是否使用滚动承载包裹；为 true 时默认 overflow auto */
+    scroll?: PisellShellFrameScrollConfig;
+    /** 是否展示底部批量操作条（按选中状态出现由调用方控制，此处仅控制是否渲染该槽位） */
+    showBatchActionBar?: boolean;
+    /** 是否展示底部状态提示区（加载/错误/同步提示等） */
+    showStatusArea?: boolean;
+}
+/**
+ * PisellShellFrame 组件 Props。
+ * 通过 config 控制各区域显隐，通过 slot props 传入各区域内容。
+ */
+export interface PisellShellFrameProps {
+    /** 类名 */
+    className?: string;
+    /** 内联样式 */
+    style?: CSSProperties;
+    /** 区域显隐与行为配置，未传则默认不展示可选区域 */
+    config?: PisellShellFrameConfig;
+    /** 标题 */
+    title?: ReactNode;
+    /** 副标题 */
+    subtitle?: ReactNode;
+    /** 标题区右侧辅助信息 */
+    titleExtra?: ReactNode;
+    /** 工具栏内容 */
+    toolbar?: ReactNode;
+    /** 统计列表内容（如 PisellStatisticList 或自定义） */
+    statisticList?: ReactNode;
+    /** 主内容（表格/看板/日历/楼层图等），当 config.scroll 为 true 时会被滚动容器包裹 */
+    children?: ReactNode;
+    /** 批量操作条，通常按选中状态显隐由调用方控制 */
+    batchActionBar?: ReactNode;
+    /** 状态提示（加载/错误/同步提示等） */
+    statusArea?: ReactNode;
+}

package/es/components/pisellSingleLineText/PisellSingleLineText.stories.d.ts

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellSingleLineText } from './PisellSingleLineText';
+/**
+ * PisellSingleLineText 是一个通用的单行文本输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 完整的校验框架
+ * - 受控/非受控模式
+ * - 丰富的配置项
+ */
+declare const meta: Meta<typeof PisellSingleLineText>;
+export default meta;
+declare type Story = StoryObj<typeof PisellSingleLineText>;
+/**
+ * 基础编辑态示例
+ */
+export declare const Basic: Story;
+/**
+ * 只读态示例 - 展示文本内容
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 超长文本截断
+ */
+export declare const ReadModeEllipsis: Story;
+/**
+ * 禁用态示例
+ */
+export declare const Disabled: Story;
+/**
+ * 必填校验示例
+ */
+export declare const Required: Story;
+/**
+ * 长度校验示例
+ */
+export declare const LengthValidation: Story;
+/**
+ * 正则校验 - 仅数字
+ */
+export declare const PatternValidation: Story;
+/**
+ * 自定义校验函数
+ */
+export declare const CustomValidator: Story;
+/**
+ * 前缀图标
+ */
+export declare const WithPrefix: Story;
+/**
+ * 后缀文本
+ */
+export declare const WithSuffix: Story;
+/**
+ * 前置标签
+ */
+export declare const WithAddonBefore: Story;
+/**
+ * 后置标签 - 按钮
+ */
+export declare const WithAddonAfter: Story;
+/**
+ * 完整配置示例
+ */
+export declare const FullFeatures: Story;
+/**
+ * 自定义样式 - 只读态
+ */
+export declare const CustomStyle: Story;
+/**
+ * 只读态 - 普通文本样式（默认）
+ */
+export declare const DisplayVariantText: Story;
+/**
+ * 只读态 - 超链接样式
+ */
+export declare const DisplayVariantLink: Story;
+/**
+ * 只读态 - 徽标样式（圆形红色徽标）
+ */
+export declare const DisplayVariantBadge: Story;
+/**
+ * 只读态 - 徽标样式（文本内容）
+ */
+export declare const DisplayVariantBadgeText: Story;
+/**
+ * 只读态 - 标签样式（默认灰色边框）
+ */
+export declare const DisplayVariantTag: Story;
+/**
+ * 只读态 - 标签样式（自定义颜色）
+ */
+export declare const DisplayVariantTagColored: Story;
+/**
+ * 只读态 - 标签样式（可关闭）
+ */
+export declare const DisplayVariantTagClosable: Story;
+/**
+ * 展示样式对比 - 所有变体（基于 Figma 设计）
+ */
+export declare const AllDisplayVariants: Story;

package/es/components/pisellSingleLineText/components/DisabledView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from '../types';
+/**
+ * PisellSingleLineText 禁用态视图组件
+ *
+ * 负责渲染禁用态视图，基于原始 mode 渲染对应的视图，并添加禁用样式
+ *
+ * 设计规则：
+ * - 基于编辑态或只读态的视觉
+ * - 透明度 40%
+ * - 禁止所有交互行为
+ *
+ * @param props 组件 Props
+ */
+declare const DisabledView: React.FC<PisellSingleLineTextProps>;
+export default DisabledView;

package/es/components/pisellSingleLineText/components/EditView.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from '../types';
+/**
+ * PisellSingleLineText 编辑态视图组件
+ *
+ * 负责渲染编辑态的输入框，基于 Ant Design Input 组件
+ *
+ * 功能：
+ * - 文本输入
+ * - 实时或失焦校验
+ * - 错误提示展示
+ * - 字数统计
+ * - 清空按钮
+ * - 前后缀、前后置标签
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellSingleLineTextProps>;
+export default EditView;

package/es/components/pisellSingleLineText/components/ReadOnlyView.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from '../types';
+/**
+ * PisellSingleLineText 只读态视图组件
+ *
+ * 负责渲染只读态的文本展示，支持多种展示样式变体（基于 Figma 设计规范）
+ *
+ * 功能：
+ * - 普通文本展示（默认）- 16px, Medium, Gray/900
+ * - 超链接样式 - 链接色，带下划线
+ * - 徽标样式 - 圆形红色徽标（类似通知数量）
+ * - 标签样式 - 灰色边框标签
+ * - 文本截断（ellipsis）
+ * - Tooltip 悬停提示完整内容
+ * - 自定义样式（字号、字重、颜色、对齐）
+ *
+ * @param props 组件 Props
+ */
+declare const ReadOnlyView: React.FC<PisellSingleLineTextProps>;
+export default ReadOnlyView;

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

@@ -0,0 +1,7 @@
+/**
+ * PisellSingleLineText 组件导出
+ */
+import PisellSingleLineText from './PisellSingleLineText';
+export { PisellSingleLineText };
+export type { PisellSingleLineTextProps } from './types';
+export type { DisplayState, ValidationResult, TextInputState } from './types';

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

@@ -0,0 +1,139 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { BaseTextInputProps } from '@pisell/utils';
+/**
+ * PisellSingleLineText 组件 Props 类型定义
+ *
+ * 继承 BaseTextInputProps，添加单行文本特有的配置
+ */
+export interface PisellSingleLineTextProps extends BaseTextInputProps {
+    /**
+     * 状态模式
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 展示样式变体
+     * - text: 普通文本（默认）
+     * - link: 超链接样式
+     * - badge: 徽标样式
+     * - tag: 标签样式
+     * @default 'text'
+     */
+    displayVariant?: 'text' | 'link' | 'badge' | 'tag';
+    /**
+     * 超链接点击回调（displayVariant='link' 时有效）
+     */
+    onLinkClick?: () => void;
+    /**
+     * 徽标状态（displayVariant='badge' 时有效）
+     */
+    badgeStatus?: 'success' | 'processing' | 'default' | 'error' | 'warning';
+    /**
+     * 标签颜色（displayVariant='tag' 时有效）
+     */
+    tagColor?: string;
+    /**
+     * 标签是否可关闭（displayVariant='tag' 时有效）
+     */
+    tagClosable?: boolean;
+    /**
+     * 标签关闭回调（displayVariant='tag' 时有效）
+     */
+    onTagClose?: () => void;
+    /**
+     * 超出是否省略
+     * @default true
+     */
+    ellipsis?: boolean;
+    /**
+     * 悬停是否显示完整内容（Tooltip）
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * 字号
+     * @example '14px' 或 14
+     */
+    fontSize?: string | number;
+    /**
+     * 字重
+     * @example 'bold' 或 600
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     * @example '#000000'
+     */
+    color?: string;
+    /**
+     * 文本对齐方式
+     * @default 'left'
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    /**
+     * 占位文本
+     */
+    placeholder?: string;
+    /**
+     * 最大长度（字符数）
+     */
+    maxLength?: number;
+    /**
+     * 是否显示字数统计
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * 是否显示清空按钮
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 前缀图标或文本
+     */
+    prefix?: ReactNode;
+    /**
+     * 后缀图标或文本
+     */
+    suffix?: ReactNode;
+    /**
+     * 前置标签
+     */
+    addonBefore?: ReactNode;
+    /**
+     * 后置标签
+     */
+    addonAfter?: ReactNode;
+    /**
+     * 回车键回调
+     * @param value 当前值
+     */
+    onPressEnter?: (value: string) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 描述
+     */
+    'aria-describedby'?: string;
+}
+export type { DisplayState, ValidationResult, TextInputState } from '@pisell/utils';

package/es/components/pisellSingleSelect/PisellSingleSelect.stories.d.ts

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellSingleSelect from './PisellSingleSelect';
+/**
+ * PisellSingleSelect 组件 Storybook
+ *
+ * 用于展示和测试组件的各种状态和配置
+ */
+declare const meta: Meta<typeof PisellSingleSelect>;
+export default meta;
+declare type Story = StoryObj<typeof PisellSingleSelect>;
+/**
+ * 基础示例
+ */
+export declare const Basic: Story;
+/**
+ * 带标签
+ */
+export declare const WithLabel: Story;
+/**
+ * 带辅助文本
+ */
+export declare const WithHelperText: Story;
+/**
+ * 带搜索功能
+ */
+export declare const WithSearch: Story;
+/**
+ * 带清空按钮
+ */
+export declare const WithClear: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 只读态
+ */
+export declare const ReadOnly: Story;
+/**
+ * 只读态 - 空值
+ */
+export declare const ReadOnlyEmpty: Story;
+/**
+ * 错误状态
+ */
+export declare const WithError: Story;
+/**
+ * 不同尺寸
+ */
+export declare const Sizes: Story;
+/**
+ * 表单场景
+ */
+export declare const InForm: Story;
+/**
+ * 自定义过滤
+ */
+export declare const CustomFilter: Story;
+/**
+ * 回调事件演示
+ */
+export declare const WithCallbacks: Story;
+/**
+ * 所有状态组合
+ */
+export declare const AllStates: Story;

package/es/components/pisellSingleSelect/components/DisabledView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - DisabledView (禁用态视图)
+ * 禁用状态下的渲染
+ */
+import React from 'react';
+import type { DisabledViewProps } from '../types';
+declare const DisabledView: React.ForwardRefExoticComponent<DisabledViewProps<string | number> & React.RefAttributes<any>>;
+export default DisabledView;

package/es/components/pisellSingleSelect/components/EditView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - EditView (编辑态视图)
+ * 正常可编辑状态下的渲染
+ */
+import React from 'react';
+import type { EditViewProps } from '../types';
+declare const EditView: React.ForwardRefExoticComponent<EditViewProps<string | number> & React.RefAttributes<any>>;
+export default EditView;

package/es/components/pisellSingleSelect/components/ReadOnlyView.d.ts

@@ -0,0 +1,8 @@
+/**
+ * PisellSingleSelect - ReadOnlyView (只读态视图)
+ * 只读状态下使用 Tag 展示选中值
+ */
+import React from 'react';
+import type { ReadOnlyViewProps } from '../types';
+declare const ReadOnlyView: React.FC<ReadOnlyViewProps>;
+export default ReadOnlyView;

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

@@ -0,0 +1,7 @@
+/**
+ * PisellSingleSelect 组件导出
+ */
+import PisellSingleSelect from './PisellSingleSelect';
+export { PisellSingleSelect };
+export type { PisellSingleSelectProps, SingleSelectRef, EditViewProps, DisabledViewProps, ReadOnlyViewProps, } from './types';
+export type { SelectOption, FilterOptionFunc, SortDirection, SelectState, } from './types';