fan-standard-comp 4.1.49 → 4.1.51

package/es/ButtonGroup/index.js

@@ -128,6 +128,7 @@ var ButtonGroup = function ButtonGroup(props) {
         others = _objectWithoutProperties(vItem, _excluded);
       var uniqueId = "".concat(Date.now(), "_").concat(Math.random().toString(36).substr(2, 9));
       return _objectSpread(_objectSpread({}, others), {}, {
+        popupClassName: 'spec-button-group-dropdown-submenu button-menus',
         key: code ? code + i + uniqueId : i + uniqueId,
         //  // 使用 useRef 保持 ID 的稳定性（只在组件挂载时生成一次）
         // icon: icon ? <IconNode icon={icon} style={{ marginRight: '4px' }}/> : null,
@@ -198,6 +199,7 @@ var ButtonGroup = function ButtonGroup(props) {
         others = _objectWithoutProperties(vItem, _excluded2);
       var uniqueId = "".concat(Date.now(), "_").concat(Math.random().toString(36).substr(2, 9));
       return {
+        popupClassName: 'spec-button-group-dropdown-submenu text-menus',
         danger: others.danger,
         disabled: btnIsDisabled(others.disabled, rowParams),
         key: code ? code + i + uniqueId : i + uniqueId,
@@ -291,13 +293,14 @@ var ButtonGroup = function ButtonGroup(props) {
         menu: {
           items: type === 'button' ? deepTransButtonMenus(item.children) : deepTransTextMenus(item.children)
         },
-        placement: "bottomRight"
+        placement: "bottomRight",
+        overlayClassName: 'spec-button-group-dropdown'
       }, (item === null || item === void 0 ? void 0 : item.dropdownConfig) || dropdownConfig || {}), type === 'button' ? /*#__PURE__*/React.createElement(Button, {
         type: "primary",
         size: size,
         onClick: function onClick(event) {
           var _item$fn;
-          event.preventDefault();
+          // event.preventDefault()
           item === null || item === void 0 || (_item$fn = item.fn) === null || _item$fn === void 0 || _item$fn.call(item, _objectSpread(_objectSpread({}, item), {}, {
             event: event,
             rowParams: rowParams
@@ -306,7 +309,7 @@ var ButtonGroup = function ButtonGroup(props) {
       }, renderCustomLabel(item, false), " ", item.hasOwnProperty('moreIcon') ? item.moreIcon : /*#__PURE__*/React.createElement(DownOutlined, null)) : /*#__PURE__*/React.createElement("a", {
         className: 'spec-button-group-text',
         onClick: function onClick(event) {
-          event.preventDefault();
+          // event.preventDefault()
           if (type === 'action') {
             var _item$fn2;
             item === null || item === void 0 || (_item$fn2 = item.fn) === null || _item$fn2 === void 0 || _item$fn2.call.apply(_item$fn2, [item].concat(_toConsumableArray(Object.keys(rowParams).map(function (pItem) {
@@ -533,6 +536,7 @@ var ButtonGroup = function ButtonGroup(props) {
         menu: {
           items: deepTransButtonMenus(forDrop)
         },
+        overlayClassName: 'spec-button-group-dropdown',
         placement: "bottomRight"
       }, dropdownConfig), /*#__PURE__*/React.createElement(Button, {
         type: "primary",
@@ -541,6 +545,7 @@ var ButtonGroup = function ButtonGroup(props) {
         menu: {
           items: deepTransTextMenus(forDrop)
         },
+        overlayClassName: 'spec-button-group-dropdown',
         placement: "bottomRight"
       }, dropdownConfig), /*#__PURE__*/React.createElement("a", {
         className: 'spec-button-group-text'

package/es/ButtonGroup/styles/index.js

@@ -12,7 +12,7 @@ export var prepareComponentToken = function prepareComponentToken(token) {
   };
 };
 var SpecButtonGroupTextStyle = function SpecButtonGroupTextStyle(prefixCls, token) {
-  return _defineProperty({}, ".".concat(prefixCls, "-text"), _defineProperty(_defineProperty({
+  return _defineProperty(_defineProperty({}, ".".concat(prefixCls, "-text"), _defineProperty(_defineProperty(_defineProperty({
     position: 'relative',
     display: 'inline-block',
     cursor: 'pointer',
@@ -35,6 +35,8 @@ var SpecButtonGroupTextStyle = function SpecButtonGroupTextStyle(prefixCls, toke
     //   verticalAlign: 'middle',
     //   borderLeft: `1px solid ${token.colorBorder}`
     // }
+  }), '.spec-button-group-label', {
+    display: 'block'
   }), '& > .spec-button-group-label ', {
     display: 'inline-flex !important',
     alignItems: 'center',
@@ -42,7 +44,14 @@ var SpecButtonGroupTextStyle = function SpecButtonGroupTextStyle(prefixCls, toke
     '.spec-icon': {
       fontSize: '14px'
     }
-  }));
+  })), '.spec-button-group-label', {
+    display: 'inline-flex !important',
+    alignItems: 'center',
+    gap: '4px',
+    '.spec-icon': {
+      fontSize: '14px'
+    }
+  });
 };
 var SpecButtonGroupStyleFunc = function SpecButtonGroupStyleFunc(prefix) {
   return createStyleHook(prefix, function (token) {
@@ -65,6 +74,30 @@ var SpecButtonGroupStyleFunc = function SpecButtonGroupStyleFunc(prefix) {
         }
       }
     }, SpecButtonGroupTextStyle(prefixCls, SpecButtonGroupToken))), {
+      '.spec-button-group-dropdown, .spec-button-group-dropdown-submenu': {
+        // backgroundColor: token.colorPrimary,
+        '.ant-dropdown-menu-item': {
+          padding: '0 !important'
+        },
+        '.ant-dropdown-menu-submenu-title': {
+          alignItems: 'center',
+          paddingBlock: '0 !important',
+          paddingInlineStart: '0 !important'
+        },
+        '.spec-button-group-label ': {
+          // backgroundColor: 'rgba(255, 155, 155, 0.5)',
+          width: '100%',
+          padding: "5px ".concat(token.paddingSM, "px"),
+          boxSizing: 'border-box',
+          display: 'flex !important',
+          alignItems: 'center',
+          gap: '4px',
+          '.spec-icon': {
+            fontSize: '14px'
+          }
+        }
+      }
+    }, {
       '.ant-dropdown-menu-item': {
         background: '#f00',
         '.spec-icon + .ant-dropdown-menu-title-content': {

package/es/FormComp/FieldComponent/index.js

@@ -13,6 +13,7 @@ import SpecIcon from "../../SpecIcon";
 // @ts-ignore
 import RefactorTreeSelect from "./RefactorTreeSelect";
 import DateTimeRangePicker from "../DateTimeRangePicker";
+import JsonInput from "../JsonInput";
 // @ts-ignore
 import { setSelectValue, setDatePickerValue, setTimePickerValue, setCascaderValue, setInputValue } from "./setReadonlyValues";
 import TitleNode from "./TitleNode";
@@ -161,6 +162,13 @@ var FieldComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
         style: _objectSpread(_objectSpread({}, defaultStyle), defaultProps.style)
       }));
       break;
+    case 'jsonInput':
+      compContent = /*#__PURE__*/React.createElement(JsonInput, _extends({}, defaultProps, {
+        fieldStatus: fieldStatus,
+        placeholder: defaultProps.placeholder || placeholder,
+        style: _objectSpread(_objectSpread({}, defaultStyle), defaultProps.style)
+      }));
+      break;
     case 'inputNumber':
       compContent = viewOnly ? setInputValue(value, _objectSpread(_objectSpread({}, defaultProps), {}, {
         type: type

package/es/FormComp/JsonInput/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * JsonInput JSON 输入控件
+ * 支持 JSON 格式校验、格式化、折叠/展开
+ * 兼容 FieldComponent 的 fieldStatus（default / disabled / viewOnly）
+ * 样式使用 CSS-in-JS（createStyleHook）
+ */
+import React from 'react';
+export interface JsonInputProps {
+    /** 当前值，支持 JSON 字符串或对象 */
+    value?: string | Record<string, any> | any[];
+    /** 值变化回调，返回 JSON 字符串 */
+    onChange?: (value: string) => void;
+    /** 控件尺寸 */
+    size?: 'large' | 'middle' | 'small';
+    /** 控件状态 */
+    fieldStatus?: 'default' | 'disabled' | 'viewOnly' | string;
+    /** placeholder */
+    placeholder?: string;
+    /** textarea 行数 */
+    rows?: number;
+    /** 是否自动格式化（失焦时自动 format） */
+    autoFormat?: boolean;
+    /** 是否显示操作按钮（格式化 / 折叠） */
+    showActions?: boolean;
+    /** 是否显示校验状态图标 */
+    showStatus?: boolean;
+    /** 自定义样式 */
+    style?: React.CSSProperties;
+    className?: string;
+    /** 禁用 */
+    disabled?: boolean;
+    /** 只读 */
+    readOnly?: boolean;
+    /** 最大输入长度 */
+    maxLength?: number;
+    [k: string]: any;
+}
+declare const JsonInput: React.ForwardRefExoticComponent<Omit<JsonInputProps, "ref"> & React.RefAttributes<any>>;
+export default JsonInput;

package/es/FormComp/JsonInput/index.js

@@ -0,0 +1,279 @@
+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; }
+/**
+ * JsonInput JSON 输入控件
+ * 支持 JSON 格式校验、格式化、折叠/展开
+ * 兼容 FieldComponent 的 fieldStatus（default / disabled / viewOnly）
+ * 样式使用 CSS-in-JS（createStyleHook）
+ */
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { Input, Button, Tooltip, Space } from 'antd';
+import { CheckCircleOutlined, CloseCircleOutlined, FormatPainterOutlined, ExpandOutlined, CompressOutlined } from '@ant-design/icons';
+import classNames from 'classnames';
+import { useLanguageObject } from "../../hooks/use-language";
+import useStyle from "./styles";
+var TextArea = Input.TextArea;
+var componentName = 'spec-json-input';
+
+/**
+ * 将 value 转为字符串显示
+ */
+var valueToString = function valueToString(val) {
+  if (val === undefined || val === null) return '';
+  if (typeof val === 'string') return val;
+  try {
+    return JSON.stringify(val, null, 2);
+  } catch (_unused) {
+    return String(val);
+  }
+};
+
+/**
+ * 根据语言包获取 JSON 解析错误信息
+ * 通过 error instanceof SyntaxError 判断，匹配常见 JSON 解析错误类型并返回本地化提示
+ */
+var getJsonErrorMessage = function getJsonErrorMessage(error, lang) {
+  var defaultMsg = (lang === null || lang === void 0 ? void 0 : lang['field.jsonInput.error.default']) || 'JSON 格式无效';
+  if (error instanceof SyntaxError) {
+    var msg = error.message || '';
+    // 提取位置号（V8: "at position N"，SpiderMonkey/Firefox 无统一格式）
+    var posMatch = /at position (\d+)/i.exec(msg) || /position (\d+)/i.exec(msg);
+    var position = posMatch ? posMatch[1] : '';
+
+    // JSON 输入意外结束
+    if (/unexpected end of json/i.test(msg) || /end of data/i.test(msg)) {
+      return (lang === null || lang === void 0 ? void 0 : lang['field.jsonInput.error.unexpectedEnd']) || 'JSON 输入意外结束';
+    }
+    // 字符串未闭合
+    if (/unterminated string/i.test(msg) || /unterminated/i.test(msg)) {
+      var template = (lang === null || lang === void 0 ? void 0 : lang['field.jsonInput.error.unterminatedString']) || '在位置 {position} 处字符串未闭合';
+      return position ? template.replace('{position}', position) : defaultMsg;
+    }
+    // 意外的标记（最常见的错误）
+    if (/unexpected token/i.test(msg) || /unexpected/i.test(msg)) {
+      var _template = (lang === null || lang === void 0 ? void 0 : lang['field.jsonInput.error.unexpectedToken']) || '在位置 {position} 处发现意外的标记';
+      return position ? _template.replace('{position}', position) : defaultMsg;
+    }
+    // 其他未知 SyntaxError
+    return defaultMsg;
+  }
+
+  // 非 SyntaxError 的异常
+  if (error instanceof Error && error.message) {
+    return error.message;
+  }
+  return defaultMsg;
+};
+var JsonInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var lang = useLanguageObject();
+  var _useStyle = useStyle(componentName),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    wrapSSR = _useStyle2[0],
+    hashId = _useStyle2[1];
+  var value = props.value,
+    onChange = props.onChange,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'middle' : _props$size,
+    _props$fieldStatus = props.fieldStatus,
+    fieldStatus = _props$fieldStatus === void 0 ? 'default' : _props$fieldStatus,
+    placeholder = props.placeholder,
+    _props$rows = props.rows,
+    rows = _props$rows === void 0 ? 6 : _props$rows,
+    _props$autoFormat = props.autoFormat,
+    autoFormat = _props$autoFormat === void 0 ? false : _props$autoFormat,
+    _props$showActions = props.showActions,
+    showActions = _props$showActions === void 0 ? true : _props$showActions,
+    _props$showStatus = props.showStatus,
+    showStatus = _props$showStatus === void 0 ? true : _props$showStatus,
+    style = props.style,
+    className = props.className,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    maxLength = props.maxLength;
+  var isDisabled = disabled || fieldStatus === 'disabled';
+  var isViewOnly = fieldStatus === 'viewOnly' || readOnly;
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isValid = _useState4[0],
+    setIsValid = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    errorMsg = _useState6[0],
+    setErrorMsg = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFormatted = _useState8[0],
+    setIsFormatted = _useState8[1];
+
+  // 外部 value 变化时同步内部状态
+  useEffect(function () {
+    var str = valueToString(value);
+    setInputValue(str);
+    if (str.trim() === '') {
+      setIsValid(true);
+      setErrorMsg('');
+    } else {
+      try {
+        JSON.parse(str);
+        setIsValid(true);
+        setErrorMsg('');
+      } catch (e) {
+        setIsValid(false);
+        setErrorMsg(getJsonErrorMessage(e, lang));
+      }
+    }
+  }, [value, lang]);
+
+  // 校验 JSON
+  var validateJson = useCallback(function (str) {
+    if (!str || str.trim() === '') {
+      setIsValid(true);
+      setErrorMsg('');
+      return true;
+    }
+    try {
+      JSON.parse(str);
+      setIsValid(true);
+      setErrorMsg('');
+      return true;
+    } catch (e) {
+      setIsValid(false);
+      setErrorMsg(getJsonErrorMessage(e, lang));
+      return false;
+    }
+  }, [lang]);
+
+  // 输入变化
+  var handleChange = useCallback(function (e) {
+    var val = e.target.value;
+    setInputValue(val);
+    validateJson(val);
+    if (onChange) onChange(val);
+  }, [onChange, validateJson]);
+
+  // 格式化
+  var handleFormat = useCallback(function () {
+    if (!inputValue || !inputValue.trim()) return;
+    try {
+      var parsed = JSON.parse(inputValue);
+      var formatted = JSON.stringify(parsed, null, 2);
+      setInputValue(formatted);
+      setIsValid(true);
+      setErrorMsg('');
+      setIsFormatted(true);
+      if (onChange) onChange(formatted);
+    } catch (e) {
+      setIsValid(false);
+      setErrorMsg(getJsonErrorMessage(e, lang));
+    }
+  }, [inputValue, onChange, lang]);
+
+  // 压缩（单行）
+  var handleCompress = useCallback(function () {
+    if (!inputValue || !inputValue.trim()) return;
+    try {
+      var parsed = JSON.parse(inputValue);
+      var compressed = JSON.stringify(parsed);
+      setInputValue(compressed);
+      setIsValid(true);
+      setErrorMsg('');
+      setIsFormatted(false);
+      if (onChange) onChange(compressed);
+    } catch (e) {
+      setIsValid(false);
+      setErrorMsg(getJsonErrorMessage(e, lang));
+    }
+  }, [inputValue, onChange, lang]);
+
+  // 失焦校验（autoFormat 时自动格式化）
+  var handleBlur = useCallback(function () {
+    if (autoFormat && inputValue && inputValue.trim()) {
+      handleFormat();
+    } else {
+      validateJson(inputValue);
+    }
+  }, [autoFormat, inputValue, handleFormat, validateJson]);
+  var inputPlaceholder = placeholder || (lang === null || lang === void 0 ? void 0 : lang['field.jsonInput.placeholder']) || '请输入 JSON，例如: {"name": "John"}';
+
+  // 状态图标
+  var statusIcon = useMemo(function () {
+    if (!showStatus) return null;
+    if (!inputValue || inputValue.trim() === '') return null;
+    return isValid ? /*#__PURE__*/React.createElement(CheckCircleOutlined, {
+      style: {
+        color: '#52c41a'
+      }
+    }) : /*#__PURE__*/React.createElement(Tooltip, {
+      title: errorMsg
+    }, /*#__PURE__*/React.createElement(CloseCircleOutlined, {
+      style: {
+        color: '#ff4d4f'
+      }
+    }));
+  }, [showStatus, inputValue, isValid, errorMsg]);
+
+  // 只读模式
+  if (isViewOnly) {
+    var displayValue = inputValue || '-';
+    return wrapSSR( /*#__PURE__*/React.createElement("pre", {
+      className: classNames(componentName, hashId, 'spec-json-input-viewonly', className),
+      style: style,
+      ref: ref
+    }, displayValue));
+  }
+  return wrapSSR( /*#__PURE__*/React.createElement("div", {
+    className: classNames(componentName, hashId, className, {
+      'spec-json-input-error': !isValid && inputValue,
+      'spec-json-input-disabled': isDisabled
+    }),
+    style: style,
+    ref: ref
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "spec-json-input-wrap"
+  }, /*#__PURE__*/React.createElement(TextArea, {
+    value: inputValue,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    rows: rows,
+    size: size,
+    disabled: isDisabled,
+    maxLength: maxLength,
+    placeholder: isDisabled ? '' : inputPlaceholder,
+    className: "spec-json-input-textarea",
+    style: {
+      fontFamily: 'monospace',
+      borderColor: !isValid && inputValue ? '#ff4d4f' : undefined
+    }
+  }), statusIcon && /*#__PURE__*/React.createElement("span", {
+    className: "spec-json-input-status"
+  }, statusIcon)), showActions && !isDisabled && /*#__PURE__*/React.createElement("div", {
+    className: "spec-json-input-actions"
+  }, /*#__PURE__*/React.createElement(Space, {
+    size: "small"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    title: (lang === null || lang === void 0 ? void 0 : lang['field.jsonInput.format']) || '格式化'
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    icon: /*#__PURE__*/React.createElement(FormatPainterOutlined, null),
+    onClick: handleFormat
+  }, (lang === null || lang === void 0 ? void 0 : lang['field.jsonInput.format']) || '格式化')), /*#__PURE__*/React.createElement(Tooltip, {
+    title: (lang === null || lang === void 0 ? void 0 : lang['field.jsonInput.compress']) || '压缩'
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    icon: isFormatted ? /*#__PURE__*/React.createElement(CompressOutlined, null) : /*#__PURE__*/React.createElement(ExpandOutlined, null),
+    onClick: handleCompress
+  }, (lang === null || lang === void 0 ? void 0 : lang['field.jsonInput.compress']) || '压缩')))), !isValid && inputValue && errorMsg && /*#__PURE__*/React.createElement("div", {
+    className: "spec-json-input-error-msg"
+  }, errorMsg)));
+});
+export default JsonInput;

package/es/FormComp/JsonInput/styles/index.d.ts

@@ -0,0 +1,6 @@
+import { GlobalToken } from 'antd';
+export interface JsonInputTokenType extends GlobalToken {
+    [k: string]: any;
+}
+declare const JsonInputStyleFunc: (prefix: string) => any;
+export default JsonInputStyleFunc;

package/es/FormComp/JsonInput/styles/index.js

@@ -0,0 +1,71 @@
+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 _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 { createStyleHook } from "../../../theme/utils/genStyleHook";
+var JsonInputStyleFunc = function JsonInputStyleFunc(prefix) {
+  var prepareComponentToken = function prepareComponentToken(token) {
+    return {};
+  };
+  return createStyleHook(prefix, function (token) {
+    var prefixCls = ".".concat(prefix);
+    return [_defineProperty({}, prefixCls, {
+      width: '100%',
+      '.spec-json-input-wrap': {
+        position: 'relative',
+        width: '100%',
+        '.spec-json-input-textarea': {
+          width: '100%',
+          fontFamily: 'Monaco, Menlo, Consolas, monospace',
+          resize: 'vertical'
+        },
+        '.spec-json-input-status': {
+          position: 'absolute',
+          top: '8px',
+          right: '8px',
+          fontSize: '16px',
+          lineHeight: 1,
+          pointerEvents: 'auto',
+          zIndex: 1
+        }
+      },
+      '.spec-json-input-actions': {
+        marginTop: '8px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'flex-start'
+      },
+      '.spec-json-input-error-msg': {
+        marginTop: '4px',
+        fontSize: token.fontSize,
+        color: token.colorError,
+        lineHeight: 1.5,
+        wordBreak: 'break-all'
+      }
+    }), _defineProperty({}, "".concat(prefixCls, ".spec-json-input-error"), {
+      '.spec-json-input-wrap': {
+        '.spec-json-input-textarea:focus': {
+          borderColor: token.colorError,
+          boxShadow: "0 0 0 2px ".concat(token.colorErrorBg)
+        }
+      }
+    }), _defineProperty({}, "".concat(prefixCls, ".spec-json-input-disabled"), {
+      opacity: 0.7
+    }), _defineProperty({}, "".concat(prefixCls, ".spec-json-input-viewonly"), {
+      margin: 0,
+      padding: '8px 12px',
+      fontFamily: 'Monaco, Menlo, Consolas, monospace',
+      fontSize: '13px',
+      lineHeight: 1.6,
+      background: token.colorFillQuaternary,
+      borderRadius: '6px',
+      border: "1px solid ".concat(token.colorBorderSecondary),
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-all',
+      color: token.colorText,
+      maxHeight: '300px',
+      overflow: 'auto'
+    })];
+  }, prepareComponentToken);
+};
+export default JsonInputStyleFunc;