@pisell/materials 1.8.41 → 1.8.42

package/lib/components/pisellSingleLineText/PisellSingleLineText.js

@@ -2,41 +2,39 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_ReadOnlyView = require("./components/ReadOnlyView.js");
 const require_EditView = require("./components/EditView.js");
 const require_DisabledView = require("./components/DisabledView.js");
-const require_pisell_components = require("../../theme/pisell-components.js");
 let react = require("react");
 react = require_runtime.__toESM(react);
 let _pisell_utils = require("@pisell/utils");
-let antd = require("antd");
 require("./PisellSingleLineText.less");
 //#region src/components/pisellSingleLineText/PisellSingleLineText.tsx
 /**
 * PisellSingleLineText 单行文本组件
-*
+* 
 * 通用的单行文本输入/展示组件，支持只读、编辑、禁用三种状态。
 * 基于 Ant Design Input 组件开发，提供完整的校验框架。
-*
+* 
 * @param props 组件 Props
-*
+* 
 * @example
 * // 受控模式
 * const [value, setValue] = useState('');
-* <PisellSingleLineText
+* <PisellSingleLineText 
 *   value={value}
 *   onChange={(v) => setValue(v)}
 *   placeholder="请输入"
 * />
-*
+* 
 * @example
 * // 非受控模式
-* <PisellSingleLineText
+* <PisellSingleLineText 
 *   defaultValue="初始值"
 *   required
 *   minLength={3}
 * />
-*
+* 
 * @example
 * // 只读态
-* <PisellSingleLineText
+* <PisellSingleLineText 
 *   mode="read"
 *   value="这是一段很长的文本内容"
 *   ellipsis
@@ -45,17 +43,12 @@ require("./PisellSingleLineText.less");
 */
 const PisellSingleLineText = (props) => {
 	const { mode = "edit", disabled = false } = props;
-	const displayState = (0, _pisell_utils.getDisplayState)(mode, disabled);
-	const render = () => {
-		switch (displayState) {
-			case "read": return /* @__PURE__ */ react.default.createElement(require_ReadOnlyView.default, props);
-			case "edit": return /* @__PURE__ */ react.default.createElement(require_EditView.default, props);
-			case "disabled": return /* @__PURE__ */ react.default.createElement(require_DisabledView.default, props);
-			default: return null;
-		}
-	};
-	const theme = require_pisell_components.getPisellComponentsThemeConfig();
-	return /* @__PURE__ */ react.default.createElement(antd.ConfigProvider, { theme }, render());
+	switch ((0, _pisell_utils.getDisplayState)(mode, disabled)) {
+		case "read": return /* @__PURE__ */ react.default.createElement(require_ReadOnlyView.default, props);
+		case "edit": return /* @__PURE__ */ react.default.createElement(require_EditView.default, props);
+		case "disabled": return /* @__PURE__ */ react.default.createElement(require_DisabledView.default, props);
+		default: return null;
+	}
 };
 var PisellSingleLineText_default = react.default.memo(PisellSingleLineText, (prevProps, nextProps) => {
 	return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled;

package/lib/components/pisellSingleLineText/PisellSingleLineText.less

@@ -7,6 +7,149 @@
   &-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 {