@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellRating/types.js

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PisellContextType } from '../pisell-config-provider/context';
 import './index.less';
-interface PisellRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+export interface PisellRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     platform?: PisellContextType['platform'];
     gap?: number;
     padding?: number;

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.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { getDisplayState } from '@pisell/utils';
+import ReadOnlyView from "./components/ReadOnlyView";
+import EditView from "./components/EditView";
+import DisabledView from "./components/DisabledView";
+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 var PisellSingleLineText = function PisellSingleLineText(props) {
+  var _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'edit' : _props$mode,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled;
+
+  // 计算显示状态
+  var displayState = getDisplayState(mode, disabled);
+
+  // 根据状态渲染对应子组件
+  switch (displayState) {
+    case 'read':
+      return /*#__PURE__*/React.createElement(ReadOnlyView, props);
+    case 'edit':
+      return /*#__PURE__*/React.createElement(EditView, props);
+    case 'disabled':
+      return /*#__PURE__*/React.createElement(DisabledView, props);
+    default:
+      return null;
+  }
+};
+
+// 性能优化：使用 memo 避免不必要的重渲染
+export default /*#__PURE__*/React.memo(PisellSingleLineText, function (prevProps, nextProps) {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled;
+});

package/es/components/pisellSingleLineText/PisellSingleLineText.less

@@ -0,0 +1,201 @@
+/**
+ * PisellSingleLineText 组件样式
+ * 不依赖全局 antd token，使用内置样式
+ */
+
+.pisell-single-line-text {
+  &-edit {
+    position: relative;
+    width: 100%;
+
+    // Input 组件内置样式，覆盖 antd token 配置
+    .ant-input,
+    .ant-input-affix-wrapper {
+      // 基础样式（基于 Figma 设计规范）
+      font-size: 16px !important;
+      line-height: 24px !important;
+      
+      // 边框和圆角
+      border-radius: 8px !important;
+      border: 1px solid #D0D5DD !important; // Gray/300
+      
+      // 内边距（Figma: 16px 12px）
+      padding: 12px 16px !important;
+      height: 48px !important; // 12px + 24px + 12px = 48px
+      
+      // 颜色
+      color: #101828 !important; // Gray/900 - 输入文本
+      background-color: #FFFFFF !important; // 背景色
+      
+      &::placeholder {
+        color: #667085 !important; // Gray/500 - 占位符
+      }
+      
+      // 聚焦态
+      &:focus,
+      &:focus-within {
+        border-color: #D6BBFB !important; // Primary/300
+        box-shadow: 0 0 0 4px #F4EBFF !important; // Primary/100
+        outline: none !important;
+      }
+      
+      // Hover 态
+      &:hover:not(:focus):not(:focus-within):not([disabled]) {
+        border-color: #B692F6 !important; // Primary/400
+      }
+      
+      // 禁用态
+      &[disabled],
+      &.ant-input-disabled {
+        background-color: #F9FAFB !important; // Gray/50
+        color: #98A2B3 !important; // Gray/400
+        border-color: #D0D5DD !important;
+        cursor: not-allowed !important;
+      }
+    }
+    
+    // 前后缀容器样式
+    .ant-input-affix-wrapper {
+      padding: 0 !important;
+      
+      .ant-input-prefix {
+        margin-right: 8px;
+        margin-left: 16px;
+        color: #667085; // Gray/500
+        font-size: 16px;
+      }
+      
+      .ant-input-suffix {
+        margin-left: 8px;
+        margin-right: 16px;
+        color: #667085; // Gray/500
+        font-size: 16px;
+      }
+      
+      .ant-input {
+        padding: 12px 0 !important;
+        border: none !important;
+        box-shadow: none !important;
+        
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+    }
+    
+    // 前后置标签样式
+    .ant-input-group-wrapper {
+      .ant-input-group-addon {
+        background-color: #FFFFFF !important;
+        border: 1px solid #D0D5DD !important;
+        color: #344054 !important; // Gray/700
+        font-size: 16px !important;
+        padding: 12px 16px !important;
+        
+        &:first-child {
+          border-right: none !important;
+          border-radius: 8px 0 0 8px !important;
+        }
+        
+        &:last-child {
+          border-left: none !important;
+          border-radius: 0 8px 8px 0 !important;
+        }
+      }
+      
+      .ant-input-wrapper {
+        .ant-input,
+        .ant-input-affix-wrapper {
+          border-radius: 0 !important;
+          
+          &:first-child {
+            border-radius: 8px 0 0 8px !important;
+          }
+          
+          &:last-child {
+            border-radius: 0 8px 8px 0 !important;
+          }
+        }
+      }
+    }
+    
+    // 清空按钮样式
+    .ant-input-clear-icon {
+      color: #667085 !important; // Gray/500
+      font-size: 14px !important;
+      
+      &:hover {
+        color: #344054 !important; // Gray/700
+      }
+    }
+    
+    // 字数统计样式
+    .ant-input-show-count-suffix {
+      color: #667085 !important; // Gray/500
+      font-size: 14px !important;
+    }
+    
+    // 错误状态样式
+    .ant-input-status-error,
+    .ant-input-affix-wrapper-status-error {
+      border-color: #FDA29B !important; // Error/300
+      
+      &:focus,
+      &:focus-within {
+        border-color: #F97066 !important; // Error/400
+        box-shadow: 0 0 0 4px #FEE4E2 !important; // Error/100
+      }
+      
+      &:hover:not(:focus):not(:focus-within) {
+        border-color: #F97066 !important; // Error/400
+      }
+    }
+  }
+
+  &-error {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #D92D20; // Error/600
+    line-height: 1.5;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  &-read {
+    display: inline-block;
+    line-height: 1.5;
+  }
+
+  &-link {
+    transition: color 0.2s ease-in-out;
+
+    &:hover {
+      color: #6D48C4 !important; // 项目统一 hover 色
+    }
+
+    &:active {
+      color: #5F3DA8 !important; // 项目统一 active 色
+    }
+
+    &:focus {
+      outline: 2px solid rgba(127, 86, 218, 0.2);
+      outline-offset: 2px;
+    }
+  }
+
+  &-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+// 错误提示淡入动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

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;