@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellLongText/PisellLongText.stories.js

@@ -0,0 +1,589 @@
+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 { PisellLongText } from "./PisellLongText";
+import React from 'react';
+
+/**
+ * PisellLongText 是一个多行文本输入/展示组件。
+ * 
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 展开/折叠功能（只读态）
+ * - 自动高度调整
+ * - 完整的校验框架
+ * - 字数统计
+ */
+var meta = {
+  title: '表单/PisellLongText',
+  component: PisellLongText,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: '多行文本输入/展示组件，基于 Ant Design TextArea 开发。'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    mode: {
+      control: 'radio',
+      options: ['read', 'edit'],
+      description: '状态模式',
+      table: {
+        defaultValue: {
+          summary: 'edit'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: '是否禁用'
+    },
+    value: {
+      control: 'text',
+      description: '当前值（受控）'
+    },
+    defaultValue: {
+      control: 'text',
+      description: '默认值（非受控）'
+    },
+    placeholder: {
+      control: 'text',
+      description: '占位文本'
+    },
+    rows: {
+      control: 'number',
+      description: '默认行数'
+    },
+    maxLength: {
+      control: 'number',
+      description: '最大长度'
+    },
+    showCount: {
+      control: 'boolean',
+      description: '显示字数统计（编辑态）'
+    },
+    allowClear: {
+      control: 'boolean',
+      description: '显示清空按钮'
+    },
+    required: {
+      control: 'boolean',
+      description: '是否必填'
+    },
+    minLength: {
+      control: 'number',
+      description: '最小长度'
+    },
+    maxLines: {
+      control: 'number',
+      description: '最大显示行数（只读态）'
+    },
+    enableExpand: {
+      control: 'boolean',
+      description: '启用展开功能（只读态）'
+    },
+    showWordCount: {
+      control: 'boolean',
+      description: '显示字数统计（只读态）'
+    }
+  }
+};
+export default meta;
+/**
+ * 基础编辑态示例
+ */
+export var Basic = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入内容',
+    rows: 3
+  }
+};
+
+/**
+ * 只读态示例 - 短文本
+ */
+export var ReadMode = {
+  args: {
+    mode: 'read',
+    value: '这是第一行\n这是第二行\n这是第三行'
+  }
+};
+
+/**
+ * 只读态 - 展开/折叠功能（核心）
+ */
+export var ReadModeExpandCollapse = {
+  args: {
+    mode: 'read',
+    value: '第1行：产品描述\n第2行：产品特性介绍\n第3行：使用方法说明\n第4行：注意事项\n第5行：售后服务\n第6行：联系方式',
+    maxLines: 3,
+    enableExpand: true
+  }
+};
+
+/**
+ * 只读态 - 自定义展开/收起文案
+ */
+export var ReadModeCustomExpandText = {
+  args: {
+    mode: 'read',
+    value: '第1行内容\n第2行内容\n第3行内容\n第4行内容\n第5行内容',
+    maxLines: 2,
+    expandText: '查看更多',
+    collapseText: '收起内容'
+  }
+};
+
+/**
+ * 只读态 - 禁用展开功能
+ */
+export var ReadModeDisableExpand = {
+  args: {
+    mode: 'read',
+    value: '第1行\n第2行\n第3行\n第4行\n第5行\n第6行',
+    maxLines: 3,
+    enableExpand: false
+  }
+};
+
+/**
+ * 只读态 - 字数统计
+ */
+export var ReadModeWithWordCount = {
+  args: {
+    mode: 'read',
+    value: '这是一段测试内容\n包含多行文本\n用于展示字数统计功能',
+    showWordCount: true
+  }
+};
+
+/**
+ * 只读态 - 展开 + 字数统计
+ */
+export var ReadModeExpandAndWordCount = {
+  args: {
+    mode: 'read',
+    value: '第1行\n第2行\n第3行\n第4行\n第5行',
+    maxLines: 3,
+    enableExpand: true,
+    showWordCount: true
+  }
+};
+
+/**
+ * 禁用态示例
+ */
+export var Disabled = {
+  args: {
+    mode: 'edit',
+    value: '禁用状态的多行文本内容\n第二行\n第三行',
+    disabled: true
+  }
+};
+
+/**
+ * 编辑态 - 默认行数
+ */
+export var EditModeCustomRows = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入内容（默认5行）',
+    rows: 5
+  }
+};
+
+/**
+ * 编辑态 - 自动高度（boolean）
+ */
+export var EditModeAutoSize = {
+  args: {
+    mode: 'edit',
+    placeholder: '输入内容，高度自动调整',
+    autoSize: true
+  }
+};
+
+/**
+ * 编辑态 - 自动高度（范围限定）
+ */
+export var EditModeAutoSizeRange = {
+  args: {
+    mode: 'edit',
+    placeholder: '高度在3-8行之间自动调整',
+    autoSize: {
+      minRows: 3,
+      maxRows: 8
+    }
+  }
+};
+
+/**
+ * 编辑态 - minRows 和 maxRows
+ */
+export var EditModeMinMaxRows = {
+  args: {
+    mode: 'edit',
+    placeholder: '使用 minRows 和 maxRows',
+    minRows: 3,
+    maxRows: 6
+  }
+};
+
+/**
+ * 编辑态 - 字数统计
+ */
+export var EditModeWithCount = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入内容',
+    maxLength: 200,
+    showCount: true
+  }
+};
+
+/**
+ * 编辑态 - 清空按钮
+ */
+export var EditModeWithClear = {
+  args: {
+    mode: 'edit',
+    defaultValue: '这是一些可以清空的内容\n第二行\n第三行',
+    allowClear: true
+  }
+};
+
+/**
+ * 必填校验
+ */
+export var Required = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入（必填）',
+    required: true,
+    validateTrigger: 'onBlur'
+  }
+};
+
+/**
+ * 长度校验
+ */
+export var LengthValidation = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入 20-500 个字符',
+    minLength: 20,
+    maxLength: 500,
+    showCount: true,
+    validateTrigger: 'onChange'
+  }
+};
+
+/**
+ * 自定义校验 - 段落数量限制
+ */
+export var CustomValidatorParagraphs = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入内容（最多10段）',
+    validator: function validator(value) {
+      var lines = value.split('\n').filter(function (l) {
+        return l.trim();
+      });
+      if (lines.length > 10) {
+        return '内容不能超过 10 段';
+      }
+      return true;
+    },
+    validateTrigger: 'onChange'
+  }
+};
+
+/**
+ * 组合校验
+ */
+export var CombinedValidation = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入产品描述',
+    required: true,
+    minLength: 20,
+    maxLength: 500,
+    showCount: true,
+    validateTrigger: 'both'
+  }
+};
+
+/**
+ * 自动高度 + 字数统计
+ */
+export var AutoSizeWithCount = {
+  args: {
+    mode: 'edit',
+    placeholder: '输入内容，自动调整高度',
+    autoSize: {
+      minRows: 3,
+      maxRows: 10
+    },
+    maxLength: 500,
+    showCount: true
+  }
+};
+
+/**
+ * 保留换行和空格
+ */
+export var PreserveWhitespace = {
+  args: {
+    mode: 'read',
+    value: '第1行  有多个空格  \n  第2行前有空格\n第3行\n\n第5行（第4行是空行）'
+  }
+};
+
+/**
+ * 自定义样式（只读态）
+ */
+export var CustomStyle = {
+  args: {
+    mode: 'read',
+    value: '这是自定义样式的文本\n第二行内容\n第三行内容',
+    fontSize: '18px',
+    fontWeight: 'bold',
+    color: '#1890ff',
+    lineHeight: 2
+  }
+};
+
+/**
+ * 完整功能示例
+ */
+export var FullFeatures = {
+  args: {
+    mode: 'edit',
+    placeholder: '请输入产品详细描述',
+    autoSize: {
+      minRows: 4,
+      maxRows: 12
+    },
+    maxLength: 1000,
+    showCount: true,
+    allowClear: true,
+    required: true,
+    minLength: 50,
+    validateTrigger: 'both'
+  }
+};
+
+/**
+ * 所有展开/折叠场景对比
+ */
+export var AllExpandScenarios = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '32px',
+        width: '600px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u57FA\u7840\u5C55\u5F00/\u6298\u53E0"), /*#__PURE__*/React.createElement(PisellLongText, {
+      mode: "read",
+      value: "\u7B2C1\u884C\uFF1A\u4EA7\u54C1\u540D\u79F0\\n\u7B2C2\u884C\uFF1A\u4EA7\u54C1\u63CF\u8FF0\\n\u7B2C3\u884C\uFF1A\u4EA7\u54C1\u7279\u6027\\n\u7B2C4\u884C\uFF1A\u4F7F\u7528\u8BF4\u660E\\n\u7B2C5\u884C\uFF1A\u6CE8\u610F\u4E8B\u9879",
+      maxLines: 3,
+      enableExpand: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u81EA\u5B9A\u4E49\u6587\u6848"), /*#__PURE__*/React.createElement(PisellLongText, {
+      mode: "read",
+      value: "\u7B2C1\u884C\u5185\u5BB9\\n\u7B2C2\u884C\u5185\u5BB9\\n\u7B2C3\u884C\u5185\u5BB9\\n\u7B2C4\u884C\u5185\u5BB9",
+      maxLines: 2,
+      expandText: "\u67E5\u770B\u66F4\u591A",
+      collapseText: "\u6536\u8D77"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u7981\u7528\u5C55\u5F00\u529F\u80FD"), /*#__PURE__*/React.createElement(PisellLongText, {
+      mode: "read",
+      value: "\u7B2C1\u884C\u5185\u5BB9\\n\u7B2C2\u884C\u5185\u5BB9\\n\u7B2C3\u884C\u5185\u5BB9\\n\u7B2C4\u884C\u5185\u5BB9",
+      maxLines: 2,
+      enableExpand: false
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u4E0D\u8D85\u51FA\u4E0D\u663E\u793A\u6309\u94AE"), /*#__PURE__*/React.createElement(PisellLongText, {
+      mode: "read",
+      value: "\u7B2C1\u884C\u5185\u5BB9\\n\u7B2C2\u884C\u5185\u5BB9",
+      maxLines: 3
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u5C55\u5F00 + \u5B57\u6570\u7EDF\u8BA1"), /*#__PURE__*/React.createElement(PisellLongText, {
+      mode: "read",
+      value: "\u7B2C1\u884C\\n\u7B2C2\u884C\\n\u7B2C3\u884C\\n\u7B2C4\u884C\\n\u7B2C5\u884C",
+      maxLines: 3,
+      enableExpand: true,
+      showWordCount: true
+    })));
+  }
+};
+
+/**
+ * 所有自动高度场景对比
+ */
+export var AllAutoSizeScenarios = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '32px',
+        width: '600px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "autoSize=true\uFF08\u5B8C\u5168\u81EA\u52A8\uFF09"), /*#__PURE__*/React.createElement(PisellLongText, {
+      autoSize: true,
+      placeholder: "\u8F93\u5165\u5185\u5BB9\uFF0C\u9AD8\u5EA6\u5B8C\u5168\u81EA\u52A8\u8C03\u6574"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "autoSize with range\uFF083-8\u884C\uFF09"), /*#__PURE__*/React.createElement(PisellLongText, {
+      autoSize: {
+        minRows: 3,
+        maxRows: 8
+      },
+      placeholder: "\u9AD8\u5EA6\u57283-8\u884C\u4E4B\u95F4\u81EA\u52A8\u8C03\u6574\uFF0C\u8D85\u8FC78\u884C\u51FA\u73B0\u6EDA\u52A8\u6761"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "minRows + maxRows\uFF08\u81EA\u52A8\u751F\u6548\uFF09"), /*#__PURE__*/React.createElement(PisellLongText, {
+      minRows: 3,
+      maxRows: 6,
+      placeholder: "\u8BBE\u7F6E minRows \u548C maxRows \u81EA\u52A8\u5E94\u7528 autoSize"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u56FA\u5B9A\u884C\u6570\uFF08rows=5\uFF09"), /*#__PURE__*/React.createElement(PisellLongText, {
+      rows: 5,
+      placeholder: "\u56FA\u5B9A5\u884C\u9AD8\u5EA6"
+    })));
+  }
+};
+
+/**
+ * 校验场景对比
+ */
+export var ValidationScenarios = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '32px',
+        width: '600px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u5FC5\u586B\u6821\u9A8C"), /*#__PURE__*/React.createElement(PisellLongText, {
+      placeholder: "\u8BF7\u8F93\u5165\uFF08\u5FC5\u586B\uFF09",
+      required: true,
+      validateTrigger: "onBlur"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u957F\u5EA6\u6821\u9A8C\uFF0820-200\u5B57\u7B26\uFF09"), /*#__PURE__*/React.createElement(PisellLongText, {
+      placeholder: "\u8BF7\u8F93\u5165 20-200 \u4E2A\u5B57\u7B26",
+      minLength: 20,
+      maxLength: 200,
+      showCount: true,
+      validateTrigger: "onChange"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u6BB5\u843D\u6570\u91CF\u9650\u5236\uFF08\u6700\u591A5\u6BB5\uFF09"), /*#__PURE__*/React.createElement(PisellLongText, {
+      placeholder: "\u8BF7\u8F93\u5165\u5185\u5BB9\uFF08\u6700\u591A5\u6BB5\uFF09",
+      validator: function validator(value) {
+        var lines = value.split('\n').filter(function (l) {
+          return l.trim();
+        });
+        if (lines.length > 5) {
+          return '内容不能超过 5 段';
+        }
+        return true;
+      },
+      validateTrigger: "onChange"
+    })));
+  }
+};
+
+/**
+ * 边界情况测试
+ */
+export var EdgeCases = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '32px',
+        width: '600px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u7A7A\u503C"), /*#__PURE__*/React.createElement(PisellLongText, {
+      mode: "read",
+      value: ""
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u53EA\u6709\u6362\u884C\u7B26"), /*#__PURE__*/React.createElement(PisellLongText, {
+      mode: "read",
+      value: "\\n\\n\\n\\n",
+      maxLines: 2,
+      enableExpand: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u8D85\u957F\u5355\u884C\uFF08\u65E0\u6362\u884C\uFF09"), /*#__PURE__*/React.createElement(PisellLongText, {
+      mode: "read",
+      value: "\u8FD9\u662F\u4E00\u884C\u975E\u5E38\u975E\u5E38\u975E\u5E38\u975E\u5E38\u975E\u5E38\u975E\u5E38\u975E\u5E38\u975E\u5E38\u975E\u5E38\u975E\u5E38\u975E\u5E38\u975E\u5E38\u975E\u5E38\u957F\u7684\u6587\u672C\u5185\u5BB9",
+      maxLines: 3
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u7279\u6B8A\u5B57\u7B26\u548C Emoji"), /*#__PURE__*/React.createElement(PisellLongText, {
+      mode: "read",
+      value: "\u5305\u542B Emoji \uD83D\uDE00\uD83D\uDE03\uD83D\uDE04\\n\u7279\u6B8A\u7B26\u53F7 @#$%\\n\u4E2D\u6587\u6D4B\u8BD5"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, "\u4FDD\u7559\u7A7A\u683C"), /*#__PURE__*/React.createElement(PisellLongText, {
+      mode: "read",
+      value: "\u7B2C1\u884C  \u6709\u591A\u4E2A\u7A7A\u683C  \\n  \u7B2C2\u884C\u524D\u6709\u7A7A\u683C"
+    })));
+  }
+};
+
+/**
+ * 完整功能演示
+ */
+export var CompleteExample = {
+  render: function render() {
+    var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      value = _React$useState2[0],
+      setValue = _React$useState2[1];
+    var _React$useState3 = React.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      expanded = _React$useState4[0],
+      setExpanded = _React$useState4[1];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: '600px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '24px'
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u7F16\u8F91\u6001 - \u5B8C\u6574\u529F\u80FD"), /*#__PURE__*/React.createElement(PisellLongText, {
+      value: value,
+      onChange: setValue,
+      placeholder: "\u8BF7\u8F93\u5165\u4EA7\u54C1\u63CF\u8FF0\uFF08\u81F3\u5C1150\u4E2A\u5B57\u7B26\uFF0C\u6700\u591A1000\u5B57\u7B26\uFF09",
+      autoSize: {
+        minRows: 4,
+        maxRows: 12
+      },
+      maxLength: 1000,
+      showCount: true,
+      allowClear: true,
+      required: true,
+      minLength: 50,
+      validateTrigger: "both",
+      onValidate: function onValidate(isValid, errors) {
+        console.log('校验结果:', isValid, errors);
+      },
+      onPressEnter: function onPressEnter(e) {
+        if (e.ctrlKey) {
+          console.log('Ctrl+Enter 提交');
+        }
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", null, "\u53EA\u8BFB\u6001 - \u5C55\u5F00\u6298\u53E0"), /*#__PURE__*/React.createElement(PisellLongText, {
+      mode: "read",
+      value: value || '产品名称：示例产品\n产品描述：这是一个优质的产品\n产品特性：功能强大\n使用说明：简单易用\n注意事项：请仔细阅读\n售后服务：7天无理由退换',
+      maxLines: 3,
+      enableExpand: true,
+      showWordCount: true,
+      onExpand: function onExpand(isExpanded) {
+        setExpanded(isExpanded);
+        console.log('展开状态:', isExpanded);
+      }
+    }), /*#__PURE__*/React.createElement("p", {
+      style: {
+        marginTop: '8px',
+        color: '#667085',
+        fontSize: '12px'
+      }
+    }, "\u5F53\u524D\u5C55\u5F00\u72B6\u6001\uFF1A", expanded ? '已展开' : '已收起')));
+  }
+};

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

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

package/es/components/pisellLongText/components/DisabledView.js

@@ -0,0 +1,51 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 from 'react';
+import ReadOnlyView from "./ReadOnlyView";
+import EditView from "./EditView";
+/**
+ * PisellLongText 禁用态视图组件
+ * 
+ * 负责渲染禁用态视图，基于原始 mode 渲染对应的视图，并添加禁用样式
+ * 
+ * 设计规则：
+ * - 基于编辑态或只读态的视觉
+ * - 透明度 40%
+ * - 禁止所有交互行为
+ * 
+ * @param props 组件 Props
+ */
+var DisabledView = function DisabledView(props) {
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'edit' : _props$mode;
+
+  // 禁用态样式（透明度 40%）
+  var disabledStyle = _objectSpread({
+    opacity: 0.4,
+    pointerEvents: 'none',
+    cursor: 'not-allowed'
+  }, props.style);
+
+  // 根据原始 mode 决定渲染哪种视图
+  if (mode === 'read') {
+    // 基于只读态的禁用视图
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-long-text-disabled",
+      style: disabledStyle
+    }, /*#__PURE__*/React.createElement(ReadOnlyView, props));
+  }
+
+  // 基于编辑态的禁用视图（默认）
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-long-text-disabled",
+    style: disabledStyle
+  }, /*#__PURE__*/React.createElement(EditView, _extends({}, props, {
+    disabled: true
+  })));
+};
+export default DisabledView;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PisellLongTextProps } from '../types';
+/**
+ * PisellLongText 编辑态视图组件
+ *
+ * 负责渲染编辑态的多行输入框，基于 Ant Design TextArea 组件
+ *
+ * 功能：
+ * - 多行文本输入
+ * - 自动高度调整（autoSize）
+ * - 实时或失焦校验
+ * - 错误提示展示
+ * - 字数统计
+ * - 清空按钮
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellLongTextProps>;
+export default EditView;