@pisell/materials 1.8.38 → 1.8.41

package/es/components/pisellSingleLineText/docs/pisellSingleLineText.md

@@ -3,7 +3,7 @@ nav:
   title: 组件
   order: 1
 group:
-  title: Form Fields
+  title: General
   order: 1
 title: PisellSingleLineText
 order: 1
@@ -30,10 +30,10 @@ category: pro
 最简单的用法，默认为编辑态。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
+import {PisellSingleLineText} from '@pisell/materials';
 
 export default () => {
-  return <PisellSingleLineText placeholder="请输入内容" />;
+    return <PisellSingleLineText placeholder="请输入内容"/>;
 };
 ```
 
@@ -42,19 +42,19 @@ export default () => {
 通过 `value` 和 `onChange` 控制输入值。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
-import { useState } from 'react';
+import {PisellSingleLineText} from '@pisell/materials';
+import {useState} from 'react';
 
 export default () => {
-  const [value, setValue] = useState('');
-
-  return (
-    <PisellSingleLineText
-      value={value}
-      onChange={(newValue) => setValue(newValue)}
-      placeholder="请输入内容"
-    />
-  );
+    const [value, setValue] = useState('');
+
+    return (
+        <PisellSingleLineText
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+            placeholder="请输入内容"
+        />
+    );
 };
 ```
 
@@ -63,14 +63,14 @@ export default () => {
 使用 `mode="read"` 展示文本内容。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
+import {PisellSingleLineText} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div>
-      <PisellSingleLineText mode="read" value="这是一段展示的文本内容" />
-    </div>
-  );
+    return (
+        <div>
+            <PisellSingleLineText mode="read" value="这是一段展示的文本内容"/>
+        </div>
+    );
 };
 ```
 
@@ -79,19 +79,19 @@ export default () => {
 超出容器宽度时自动截断，鼠标悬停显示完整内容。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
+import {PisellSingleLineText} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ width: '200px' }}>
-      <PisellSingleLineText
-        mode="read"
-        value="这是一段非常非常非常长的文本内容，会被自动截断显示省略号"
-        ellipsis
-        showTooltip
-      />
-    </div>
-  );
+    return (
+        <div style={{width: '200px'}}>
+            <PisellSingleLineText
+                mode="read"
+                value="这是一段非常非常非常长的文本内容，会被自动截断显示省略号"
+                ellipsis
+                showTooltip
+            />
+        </div>
+    );
 };
 ```
 
@@ -100,34 +100,34 @@ export default () => {
 支持 4 种展示样式：普通文本、超链接、徽标、标签。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
+import {PisellSingleLineText} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      {/* 普通文本 */}
-      <PisellSingleLineText mode="read" value="普通文本" displayVariant="text" />
-
-      {/* 超链接样式 */}
-      <PisellSingleLineText
-        mode="read"
-        value="点击查看详情"
-        displayVariant="link"
-        onLinkClick={() => window.open('https://example.com')}
-      />
-
-      {/* 徽标样式 */}
-      <PisellSingleLineText
-        mode="read"
-        value="5"
-        displayVariant="badge"
-        badgeStatus="error"
-      />
-
-      {/* 标签样式 */}
-      <PisellSingleLineText mode="read" value="标签" displayVariant="tag" />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
+            {/* 普通文本 */}
+            <PisellSingleLineText mode="read" value="普通文本" displayVariant="text"/>
+
+            {/* 超链接样式 */}
+            <PisellSingleLineText
+                mode="read"
+                value="点击查看详情"
+                displayVariant="link"
+                onLinkClick={() => window.open('https://example.com')}
+            />
+
+            {/* 徽标样式 */}
+            <PisellSingleLineText
+                mode="read"
+                value="5"
+                displayVariant="badge"
+                badgeStatus="error"
+            />
+
+            {/* 标签样式 */}
+            <PisellSingleLineText mode="read" value="标签" displayVariant="tag"/>
+        </div>
+    );
 };
 ```
 
@@ -136,17 +136,17 @@ export default () => {
 设置 `disabled` 为 true。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
+import {PisellSingleLineText} from '@pisell/materials';
 
 export default () => {
-  return (
-    <PisellSingleLineText
-      mode="edit"
-      value="禁用状态的内容"
-      disabled
-      placeholder="禁用状态"
-    />
-  );
+    return (
+        <PisellSingleLineText
+            mode="edit"
+            value="禁用状态的内容"
+            disabled
+            placeholder="禁用状态"
+        />
+    );
 };
 ```
 
@@ -155,21 +155,21 @@ export default () => {
 通过 `required` 属性设置必填项。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
-import { useState } from 'react';
+import {PisellSingleLineText} from '@pisell/materials';
+import {useState} from 'react';
 
 export default () => {
-  const [value, setValue] = useState('');
-
-  return (
-    <PisellSingleLineText
-      value={value}
-      onChange={setValue}
-      required
-      placeholder="请输入（必填）"
-      validateTrigger="onBlur"
-    />
-  );
+    const [value, setValue] = useState('');
+
+    return (
+        <PisellSingleLineText
+            value={value}
+            onChange={setValue}
+            required
+            placeholder="请输入（必填）"
+            validateTrigger="onBlur"
+        />
+    );
 };
 ```
 
@@ -178,18 +178,18 @@ export default () => {
 限制输入的最小和最大长度。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
+import {PisellSingleLineText} from '@pisell/materials';
 
 export default () => {
-  return (
-    <PisellSingleLineText
-      placeholder="请输入 3-20 个字符"
-      minLength={3}
-      maxLength={20}
-      showCount
-      validateTrigger="onChange"
-    />
-  );
+    return (
+        <PisellSingleLineText
+            placeholder="请输入 3-20 个字符"
+            minLength={3}
+            maxLength={20}
+            showCount
+            validateTrigger="onChange"
+        />
+    );
 };
 ```
 
@@ -198,28 +198,28 @@ export default () => {
 使用正则表达式进行格式校验。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
+import {PisellSingleLineText} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      {/* 仅数字 */}
-      <PisellSingleLineText
-        placeholder="请输入数字"
-        pattern="^[0-9]+$"
-        errorMessage="只能输入数字"
-        validateTrigger="onChange"
-      />
-
-      {/* 邮箱格式 */}
-      <PisellSingleLineText
-        placeholder="请输入邮箱"
-        pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$"
-        errorMessage="邮箱格式不正确"
-        validateTrigger="onBlur"
-      />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
+            {/* 仅数字 */}
+            <PisellSingleLineText
+                placeholder="请输入数字"
+                pattern="^[0-9]+$"
+                errorMessage="只能输入数字"
+                validateTrigger="onChange"
+            />
+
+            {/* 邮箱格式 */}
+            <PisellSingleLineText
+                placeholder="请输入邮箱"
+                pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$"
+                errorMessage="邮箱格式不正确"
+                validateTrigger="onBlur"
+            />
+        </div>
+    );
 };
 ```
 
@@ -228,26 +228,26 @@ export default () => {
 使用自定义校验函数实现复杂校验逻辑。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
+import {PisellSingleLineText} from '@pisell/materials';
 
 export default () => {
-  const validator = (value: string) => {
-    if (value.includes('禁止')) {
-      return '内容不能包含敏感词';
-    }
-    if (value.length > 0 && value.length < 3) {
-      return '至少输入3个字符';
-    }
-    return true;
-  };
-
-  return (
-    <PisellSingleLineText
-      placeholder="请输入内容"
-      validator={validator}
-      validateTrigger="onChange"
-    />
-  );
+    const validator = (value: string) => {
+        if (value.includes('禁止')) {
+            return '内容不能包含敏感词';
+        }
+        if (value.length > 0 && value.length < 3) {
+            return '至少输入3个字符';
+        }
+        return true;
+    };
+
+    return (
+        <PisellSingleLineText
+            placeholder="请输入内容"
+            validator={validator}
+            validateTrigger="onChange"
+        />
+    );
 };
 ```
 
@@ -256,29 +256,29 @@ export default () => {
 添加前缀图标或后缀文本。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
-import { UserOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import {PisellSingleLineText} from '@pisell/materials';
+import {UserOutlined, InfoCircleOutlined} from '@ant-design/icons';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      {/* 前缀图标 */}
-      <PisellSingleLineText
-        placeholder="请输入用户名"
-        prefix={<UserOutlined />}
-      />
-
-      {/* 后缀文本 */}
-      <PisellSingleLineText placeholder="请输入金额" suffix="元" />
-
-      {/* 前缀和后缀 */}
-      <PisellSingleLineText
-        placeholder="请输入"
-        prefix={<UserOutlined />}
-        suffix={<InfoCircleOutlined />}
-      />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
+            {/* 前缀图标 */}
+            <PisellSingleLineText
+                placeholder="请输入用户名"
+                prefix={<UserOutlined/>}
+            />
+
+            {/* 后缀文本 */}
+            <PisellSingleLineText placeholder="请输入金额" suffix="元"/>
+
+            {/* 前缀和后缀 */}
+            <PisellSingleLineText
+                placeholder="请输入"
+                prefix={<UserOutlined/>}
+                suffix={<InfoCircleOutlined/>}
+            />
+        </div>
+    );
 };
 ```
 
@@ -287,31 +287,31 @@ export default () => {
 添加前置或后置标签。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
-import { Button } from 'antd';
+import {PisellSingleLineText} from '@pisell/materials';
+import {Button} from 'antd';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      {/* 前置标签 */}
-      <PisellSingleLineText
-        placeholder="www.example.com"
-        addonBefore="https://"
-      />
-
-      {/* 后置标签 */}
-      <PisellSingleLineText
-        placeholder=".com"
-        addonAfter=".com"
-      />
-
-      {/* 后置按钮 */}
-      <PisellSingleLineText
-        placeholder="请输入搜索内容"
-        addonAfter={<Button type="primary">搜索</Button>}
-      />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
+            {/* 前置标签 */}
+            <PisellSingleLineText
+                placeholder="www.example.com"
+                addonBefore="https://"
+            />
+
+            {/* 后置标签 */}
+            <PisellSingleLineText
+                placeholder=".com"
+                addonAfter=".com"
+            />
+
+            {/* 后置按钮 */}
+            <PisellSingleLineText
+                placeholder="请输入搜索内容"
+                addonAfter={<Button type="primary">搜索</Button>}
+            />
+        </div>
+    );
 };
 ```
 
@@ -320,16 +320,16 @@ export default () => {
 显示当前输入的字符数。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
+import {PisellSingleLineText} from '@pisell/materials';
 
 export default () => {
-  return (
-    <PisellSingleLineText
-      placeholder="请输入内容"
-      maxLength={100}
-      showCount
-    />
-  );
+    return (
+        <PisellSingleLineText
+            placeholder="请输入内容"
+            maxLength={100}
+            showCount
+        />
+    );
 };
 ```
 
@@ -338,20 +338,20 @@ export default () => {
 显示清空按钮，快速清空输入内容。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
-import { useState } from 'react';
+import {PisellSingleLineText} from '@pisell/materials';
+import {useState} from 'react';
 
 export default () => {
-  const [value, setValue] = useState('测试内容');
-
-  return (
-    <PisellSingleLineText
-      value={value}
-      onChange={setValue}
-      allowClear
-      placeholder="请输入内容"
-    />
-  );
+    const [value, setValue] = useState('测试内容');
+
+    return (
+        <PisellSingleLineText
+            value={value}
+            onChange={setValue}
+            allowClear
+            placeholder="请输入内容"
+        />
+    );
 };
 ```
 
@@ -360,21 +360,21 @@ export default () => {
 组合使用多种校验规则。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
+import {PisellSingleLineText} from '@pisell/materials';
 
 export default () => {
-  return (
-    <PisellSingleLineText
-      placeholder="请输入用户名"
-      required
-      minLength={3}
-      maxLength={20}
-      pattern="^[a-zA-Z0-9_]+$"
-      errorMessage="用户名只能包含字母、数字和下划线"
-      showCount
-      validateTrigger="both"
-    />
-  );
+    return (
+        <PisellSingleLineText
+            placeholder="请输入用户名"
+            required
+            minLength={3}
+            maxLength={20}
+            pattern="^[a-zA-Z0-9_]+$"
+            errorMessage="用户名只能包含字母、数字和下划线"
+            showCount
+            validateTrigger="both"
+        />
+    );
 };
 ```
 
@@ -383,31 +383,31 @@ export default () => {
 自定义文本的字号、字重、颜色等样式。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
+import {PisellSingleLineText} from '@pisell/materials';
 
 export default () => {
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-      <PisellSingleLineText
-        mode="read"
-        value="大号粗体文本"
-        fontSize="20px"
-        fontWeight="bold"
-      />
-
-      <PisellSingleLineText
-        mode="read"
-        value="红色文本"
-        color="#ff0000"
-      />
-
-      <PisellSingleLineText
-        mode="read"
-        value="居中对齐"
-        textAlign="center"
-      />
-    </div>
-  );
+    return (
+        <div style={{display: 'flex', flexDirection: 'column', gap: '16px'}}>
+            <PisellSingleLineText
+                mode="read"
+                value="大号粗体文本"
+                fontSize="20px"
+                fontWeight="bold"
+            />
+
+            <PisellSingleLineText
+                mode="read"
+                value="红色文本"
+                color="#ff0000"
+            />
+
+            <PisellSingleLineText
+                mode="read"
+                value="居中对齐"
+                textAlign="center"
+            />
+        </div>
+    );
 };
 ```
 
@@ -416,25 +416,25 @@ export default () => {
 监听校验结果。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
-import { message } from 'antd';
+import {PisellSingleLineText} from '@pisell/materials';
+import {message} from 'antd';
 
 export default () => {
-  const handleValidate = (isValid: boolean, errors: string[]) => {
-    if (!isValid) {
-      message.error(errors[0]);
-    }
-  };
-
-  return (
-    <PisellSingleLineText
-      placeholder="请输入内容"
-      required
-      minLength={3}
-      onValidate={handleValidate}
-      validateTrigger="onBlur"
-    />
-  );
+    const handleValidate = (isValid: boolean, errors: string[]) => {
+        if (!isValid) {
+            message.error(errors[0]);
+        }
+    };
+
+    return (
+        <PisellSingleLineText
+            placeholder="请输入内容"
+            required
+            minLength={3}
+            onValidate={handleValidate}
+            validateTrigger="onBlur"
+        />
+    );
 };
 ```
 
@@ -443,20 +443,20 @@ export default () => {
 监听回车键按下事件。
 
 ```tsx
-import { PisellSingleLineText } from '@pisell/materials';
-import { message } from 'antd';
+import {PisellSingleLineText} from '@pisell/materials';
+import {message} from 'antd';
 
 export default () => {
-  const handlePressEnter = (value: string) => {
-    message.success(`提交内容：${value}`);
-  };
-
-  return (
-    <PisellSingleLineText
-      placeholder="输入后按回车提交"
-      onPressEnter={handlePressEnter}
-    />
-  );
+    const handlePressEnter = (value: string) => {
+        message.success(`提交内容：${value}`);
+    };
+
+    return (
+        <PisellSingleLineText
+            placeholder="输入后按回车提交"
+            onPressEnter={handlePressEnter}
+        />
+    );
 };
 ```