@pisell/materials 6.11.16 → 6.11.18

package/es/components/pisellReservationScheduleBand/PisellReservationScheduleBand.less

@@ -0,0 +1,66 @@
+.pisell-reservation-schedule-band {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  gap: 0;
+  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: 0;
+  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;
+  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 {
+  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
+      }
+    }));
+  }
+};

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

@@ -0,0 +1,2 @@
+export { PisellReservationScheduleBand } from './PisellReservationScheduleBand';
+export type { PisellReservationScheduleBandProps, ReservationScheduleBandValue, TimeNavigatorPassthroughProps, } from './types';

package/es/components/pisellReservationScheduleBand/index.js

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

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

@@ -0,0 +1,49 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { Dayjs } from 'dayjs';
+import type { PisellTimeNavigatorProps } from '../pisellTimeNavigator/types';
+import type { PisellReservationScheduleProps } from '../pisellReservationSchedule/types';
+/** 组合值：日历日 + 该日上的时刻（与 PisellTimeNavigator 对齐） */
+export interface ReservationScheduleBandValue {
+    date: Dayjs;
+    at: Dayjs;
+}
+export declare type TimeNavigatorPassthroughProps = Omit<PisellTimeNavigatorProps, 'value' | 'onChange' | 'referenceDate' | 'defaultValue'>;
+/**
+ * PisellReservationScheduleBand：营业日条 + 横向时间轴
+ */
+export interface PisellReservationScheduleBandProps {
+    /**
+     * 受控：选中日 + 轴上时刻
+     */
+    value?: ReservationScheduleBandValue;
+    /**
+     * 日历日或时刻任一变化时触发
+     */
+    onChange?: (next: ReservationScheduleBandValue) => void;
+    /**
+     * 非受控初始值（可只传部分字段）
+     */
+    defaultValue?: Partial<ReservationScheduleBandValue>;
+    /**
+     * 透传给 PisellReservationSchedule（如 minDate / maxDate）
+     */
+    scheduleProps?: Omit<PisellReservationScheduleProps, 'value' | 'onChange' | 'defaultValue'>;
+    /**
+     * 透传给 PisellTimeNavigator（不含 value/onChange/referenceDate）
+     */
+    timeNavigatorProps?: TimeNavigatorPassthroughProps;
+    /**
+     * 顶栏日程行：PisellReservationSchedule 左侧自定义内容（如标题）
+     */
+    scheduleStartSlot?: ReactNode;
+    /**
+     * 顶栏日程行：PisellReservationSchedule 右侧自定义内容（如状态、主按钮）
+     */
+    scheduleEndSlot?: ReactNode;
+    /**
+     * 顶栏日程行：紧挨在选日组件之后（如「跟随当前」），与中间列同一 flex 区
+     */
+    scheduleAfterDateSlot?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}

package/es/components/pisellReservationScheduleBand/types.js

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

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) => React.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.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from './types';
+import './PisellSingleLineText.less';
+/**
+ * PisellSingleLineText 单行文本组件
+ *
+ * 通用的单行文本输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design Input 组件开发，提供完整的校验框架。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 受控模式
+ * const [value, setValue] = useState('');
+ * <PisellSingleLineText
+ *   value={value}
+ *   onChange={(v) => setValue(v)}
+ *   placeholder="请输入"
+ * />
+ *
+ * @example
+ * // 非受控模式
+ * <PisellSingleLineText
+ *   defaultValue="初始值"
+ *   required
+ *   minLength={3}
+ * />
+ *
+ * @example
+ * // 只读态
+ * <PisellSingleLineText
+ *   mode="read"
+ *   value="这是一段很长的文本内容"
+ *   ellipsis
+ *   showTooltip
+ * />
+ */
+export declare const PisellSingleLineText: React.FC<PisellSingleLineTextProps>;
+declare const _default: React.NamedExoticComponent<PisellSingleLineTextProps>;
+export default _default;

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;