@pisell/materials 3.3.81 → 3.3.83

package/es/components/pisellPercent/PisellPercent.stories.js

@@ -0,0 +1,332 @@
+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 _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 { PisellPercent } from "./PisellPercent";
+import { useState } from 'react';
+import { Form } from 'antd';
+
+/**
+ * PisellPercent 组件 Storybook
+ */
+var meta = {
+  title: 'Components/PisellPercent',
+  component: PisellPercent,
+  tags: ['autodocs']
+};
+export default meta;
+/**
+ * 基础示例 - Text 变体
+ */
+export var Basic = {
+  args: {
+    value: 85.5
+  },
+  render: function render(args) {
+    var _useState = useState(args.value),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+    return /*#__PURE__*/React.createElement(PisellPercent, _extends({}, args, {
+      value: value,
+      onChange: setValue
+    }));
+  }
+};
+
+/**
+ * 只读态 - Text
+ */
+export var ReadOnlyText = {
+  args: {
+    mode: 'read',
+    value: 85.5,
+    variant: 'text'
+  }
+};
+
+/**
+ * 只读态 - Progress 进度条
+ */
+export var ReadOnlyProgress = {
+  args: {
+    mode: 'read',
+    value: 75,
+    variant: 'progress',
+    style: {
+      width: 300
+    }
+  }
+};
+
+/**
+ * 只读态 - Circle 环形进度
+ */
+export var ReadOnlyCircle = {
+  args: {
+    mode: 'read',
+    value: 80,
+    variant: 'circle'
+  }
+};
+
+/**
+ * 进度条 - 不同状态
+ */
+export var ProgressStates = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+        width: 300
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 8
+      }
+    }, "\u6B63\u5E38\uFF08\u84DD\u8272\uFF09"), /*#__PURE__*/React.createElement(PisellPercent, {
+      mode: "read",
+      value: 50,
+      variant: "progress",
+      progressProps: {
+        strokeColor: '#1890ff'
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 8
+      }
+    }, "\u6210\u529F\uFF08\u7EFF\u8272\uFF09"), /*#__PURE__*/React.createElement(PisellPercent, {
+      mode: "read",
+      value: 100,
+      variant: "progress",
+      progressProps: {
+        strokeColor: '#52c41a',
+        status: 'success'
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 8
+      }
+    }, "\u5F02\u5E38\uFF08\u7EA2\u8272\uFF09"), /*#__PURE__*/React.createElement(PisellPercent, {
+      mode: "read",
+      value: 30,
+      variant: "progress",
+      progressProps: {
+        strokeColor: '#ff4d4f',
+        status: 'exception'
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 8
+      }
+    }, "\u52A8\u753B\u6548\u679C"), /*#__PURE__*/React.createElement(PisellPercent, {
+      mode: "read",
+      value: 65,
+      variant: "progress",
+      progressProps: {
+        status: 'active'
+      }
+    })));
+  }
+};
+
+/**
+ * 环形进度 - 不同配置
+ */
+export var CircleVariants = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: 32
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 8,
+        textAlign: 'center'
+      }
+    }, "\u9ED8\u8BA4"), /*#__PURE__*/React.createElement(PisellPercent, {
+      mode: "read",
+      value: 75,
+      variant: "circle"
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 8,
+        textAlign: 'center'
+      }
+    }, "\u5927\u5C3A\u5BF8"), /*#__PURE__*/React.createElement(PisellPercent, {
+      mode: "read",
+      value: 80,
+      variant: "circle",
+      circleProps: {
+        width: 150
+      }
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 8,
+        textAlign: 'center'
+      }
+    }, "\u81EA\u5B9A\u4E49\u989C\u8272"), /*#__PURE__*/React.createElement(PisellPercent, {
+      mode: "read",
+      value: 90,
+      variant: "circle",
+      circleProps: {
+        strokeColor: '#52c41a'
+      }
+    })));
+  }
+};
+
+/**
+ * 范围转换
+ */
+export var RangeConversion = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16
+      }
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "[0, 100] \u8303\u56F4\uFF0C\u503C 85.5\uFF1A"), /*#__PURE__*/React.createElement(PisellPercent, {
+      mode: "read",
+      value: 85.5,
+      range: [0, 100]
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "[0, 1] \u8303\u56F4\uFF0C\u503C 0.855\uFF1A"), /*#__PURE__*/React.createElement(PisellPercent, {
+      mode: "read",
+      value: 0.855,
+      range: [0, 1]
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: {
+        marginRight: 8
+      }
+    }, "[0, 1000] \u8303\u56F4\uFF0C\u503C 855\uFF1A"), /*#__PURE__*/React.createElement(PisellPercent, {
+      mode: "read",
+      value: 855,
+      range: [0, 1000]
+    })));
+  }
+};
+
+/**
+ * 编辑态 - 仅输入框
+ */
+export var EditWithInput = {
+  render: function render() {
+    var _useState3 = useState(65.5),
+      _useState4 = _slicedToArray(_useState3, 2),
+      value = _useState4[0],
+      setValue = _useState4[1];
+    return /*#__PURE__*/React.createElement(Form.Item, {
+      label: "\u5B8C\u6210\u5EA6"
+    }, /*#__PURE__*/React.createElement(PisellPercent, {
+      value: value,
+      onChange: setValue,
+      min: 0,
+      max: 100,
+      step: 0.1,
+      placeholder: "\u8BF7\u8F93\u5165\u767E\u5206\u6BD4"
+    }));
+  }
+};
+
+/**
+ * 编辑态 - 滑块 + 输入框
+ */
+export var EditWithSlider = {
+  render: function render() {
+    var _useState5 = useState(65),
+      _useState6 = _slicedToArray(_useState5, 2),
+      value = _useState6[0],
+      setValue = _useState6[1];
+    return /*#__PURE__*/React.createElement(Form.Item, {
+      label: "\u9879\u76EE\u8FDB\u5EA6"
+    }, /*#__PURE__*/React.createElement(PisellPercent, {
+      value: value,
+      onChange: setValue,
+      showSlider: true,
+      sliderProps: {
+        marks: {
+          0: '0%',
+          25: '25%',
+          50: '50%',
+          75: '75%',
+          100: '100%'
+        }
+      }
+    }));
+  }
+};
+
+/**
+ * 项目进度看板
+ */
+export var ProjectDashboard = {
+  render: function render() {
+    var tasks = [{
+      name: '前端开发',
+      completion: 85.5
+    }, {
+      name: '后端开发',
+      completion: 72
+    }, {
+      name: '测试',
+      completion: 45
+    }, {
+      name: '部署',
+      completion: 0
+    }];
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 24
+      }
+    }, tasks.map(function (task) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: task.name,
+        style: {
+          marginBottom: 24
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          marginBottom: 8
+        }
+      }, /*#__PURE__*/React.createElement("span", null, task.name), /*#__PURE__*/React.createElement(PisellPercent, {
+        mode: "read",
+        value: task.completion,
+        variant: "text"
+      })), /*#__PURE__*/React.createElement(PisellPercent, {
+        mode: "read",
+        value: task.completion,
+        variant: "progress",
+        progressProps: {
+          strokeColor: task.completion === 100 ? '#52c41a' : '#1890ff'
+        }
+      }));
+    }));
+  }
+};
+
+/**
+ * 禁用态
+ */
+export var Disabled = {
+  args: {
+    disabled: true,
+    value: 60
+  }
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { PisellPercentProps } from '../types';
+/**
+ * PisellPercent 禁用态视图组件
+ *
+ * 负责渲染禁用态的输入框
+ *
+ * @param props 组件 Props
+ */
+declare const DisabledView: React.FC<PisellPercentProps>;
+export default DisabledView;

package/es/components/pisellPercent/components/DisabledView.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { InputNumber } from 'antd';
+/**
+ * PisellPercent 禁用态视图组件
+ * 
+ * 负责渲染禁用态的输入框
+ * 
+ * @param props 组件 Props
+ */
+var DisabledView = function DisabledView(props) {
+  var value = props.value,
+    _props$showPercentSym = props.showPercentSymbol,
+    showPercentSymbol = _props$showPercentSym === void 0 ? true : _props$showPercentSym,
+    _props$precision = props.precision,
+    precision = _props$precision === void 0 ? 1 : _props$precision,
+    _props$range = props.range,
+    range = _props$range === void 0 ? [0, 100] : _props$range,
+    _props$min = props.min,
+    min = _props$min === void 0 ? range[0] : _props$min,
+    _props$max = props.max,
+    max = _props$max === void 0 ? range[1] : _props$max,
+    step = props.step,
+    placeholder = props.placeholder,
+    size = props.size,
+    controls = props.controls,
+    className = props.className,
+    style = props.style,
+    id = props.id,
+    name = props.name;
+  var suffixNode = showPercentSymbol ? '%' : undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-percent pisell-percent-disabled ".concat(className || '')
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    disabled: true,
+    value: value,
+    min: min,
+    max: max,
+    step: step,
+    precision: precision,
+    suffix: suffixNode,
+    placeholder: placeholder,
+    size: size,
+    controls: controls,
+    style: style,
+    id: id,
+    name: name
+  }));
+};
+export default DisabledView;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { PisellPercentProps } from '../types';
+/**
+ * PisellPercent 编辑态视图组件
+ *
+ * 负责渲染编辑态的输入框
+ *
+ * 功能：
+ * - 百分比输入（后缀显示 %）
+ * - 可选：滑块调节
+ * - 滑块和输入框双向同步
+ * - 实时或失焦校验
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellPercentProps>;
+export default EditView;

package/es/components/pisellPercent/components/EditView.js

@@ -0,0 +1,120 @@
+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 { InputNumber, Slider } from 'antd';
+import { useNumberInputState } from '@pisell/utils';
+/**
+ * PisellPercent 编辑态视图组件
+ * 
+ * 负责渲染编辑态的输入框
+ * 
+ * 功能：
+ * - 百分比输入（后缀显示 %）
+ * - 可选：滑块调节
+ * - 滑块和输入框双向同步
+ * - 实时或失焦校验
+ * 
+ * @param props 组件 Props
+ */
+var EditView = function EditView(props) {
+  var _props$showPercentSym = props.showPercentSymbol,
+    showPercentSymbol = _props$showPercentSym === void 0 ? true : _props$showPercentSym,
+    _props$showSlider = props.showSlider,
+    showSlider = _props$showSlider === void 0 ? false : _props$showSlider,
+    _props$precision = props.precision,
+    precision = _props$precision === void 0 ? 1 : _props$precision,
+    _props$range = props.range,
+    range = _props$range === void 0 ? [0, 100] : _props$range,
+    _props$min = props.min,
+    min = _props$min === void 0 ? range[0] : _props$min,
+    _props$max = props.max,
+    max = _props$max === void 0 ? range[1] : _props$max,
+    step = props.step,
+    sliderProps = props.sliderProps,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '请输入百分比' : _props$placeholder,
+    disabled = props.disabled,
+    autoFocus = props.autoFocus,
+    size = props.size,
+    keyboard = props.keyboard,
+    controls = props.controls,
+    className = props.className,
+    style = props.style,
+    ariaLabel = props['aria-label'],
+    ariaDescribedBy = props['aria-describedby'],
+    id = props.id,
+    name = props.name,
+    _onPressEnter = props.onPressEnter;
+
+  // 使用状态管理 hook
+  var _useNumberInputState = useNumberInputState(_objectSpread(_objectSpread({}, props), {}, {
+      min: min,
+      max: max,
+      precision: precision
+    })),
+    value = _useNumberInputState.value,
+    isValid = _useNumberInputState.isValid,
+    errors = _useNumberInputState.errors,
+    handleChange = _useNumberInputState.handleChange,
+    handleBlur = _useNumberInputState.handleBlur,
+    handleFocus = _useNumberInputState.handleFocus;
+
+  // % 符号显示在 suffix（输入框内部）
+  var suffixNode = showPercentSymbol ? '%' : undefined;
+  var inputNumberElement = /*#__PURE__*/React.createElement(InputNumber, {
+    value: value !== null && value !== void 0 ? value : undefined,
+    onChange: handleChange,
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onPressEnter: function onPressEnter() {
+      return _onPressEnter === null || _onPressEnter === void 0 ? void 0 : _onPressEnter(value !== null && value !== void 0 ? value : null);
+    },
+    min: min,
+    max: max,
+    step: step,
+    precision: precision,
+    suffix: suffixNode,
+    placeholder: placeholder,
+    disabled: disabled,
+    autoFocus: autoFocus,
+    size: size,
+    keyboard: keyboard,
+    controls: controls,
+    status: isValid ? undefined : 'error',
+    style: showSlider ? undefined : style,
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    id: id,
+    name: name
+  });
+
+  // 如果需要显示滑块
+  if (showSlider) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-percent pisell-percent-edit pisell-percent-with-slider ".concat(className || ''),
+      style: style
+    }, /*#__PURE__*/React.createElement(Slider, _extends({
+      value: value !== null && value !== void 0 ? value : undefined,
+      onChange: handleChange,
+      min: min,
+      max: max,
+      step: step,
+      disabled: disabled
+    }, sliderProps)), inputNumberElement, !isValid && errors.length > 0 && /*#__PURE__*/React.createElement("div", {
+      className: "pisell-percent-error"
+    }, errors[0]));
+  }
+
+  // 仅输入框
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-percent pisell-percent-edit ".concat(className || '')
+  }, inputNumberElement, !isValid && errors.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-percent-error"
+  }, errors[0]));
+};
+export default EditView;

package/es/components/pisellPercent/components/ReadOnlyView.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { PisellPercentProps } from '../types';
+/**
+ * PisellPercent 只读态视图组件
+ *
+ * 根据 variant 渲染不同形式：
+ * - text: 纯文本（85.5%）
+ * - progress: 进度条
+ * - circle: 环形进度
+ *
+ * @param props 组件 Props
+ */
+declare const ReadOnlyView: React.FC<PisellPercentProps>;
+export default ReadOnlyView;

package/es/components/pisellPercent/components/ReadOnlyView.js

@@ -0,0 +1,94 @@
+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 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); }
+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); }
+import React from 'react';
+import { Progress } from 'antd';
+import { formatPercent, convertToPercent } from "../utils";
+/**
+ * PisellPercent 只读态视图组件
+ * 
+ * 根据 variant 渲染不同形式：
+ * - text: 纯文本（85.5%）
+ * - progress: 进度条
+ * - circle: 环形进度
+ * 
+ * @param props 组件 Props
+ */
+var ReadOnlyView = function ReadOnlyView(props) {
+  var value = props.value,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'text' : _props$variant,
+    _props$showPercentSym = props.showPercentSymbol,
+    showPercentSymbol = _props$showPercentSym === void 0 ? true : _props$showPercentSym,
+    _props$precision = props.precision,
+    precision = _props$precision === void 0 ? 1 : _props$precision,
+    _props$range = props.range,
+    range = _props$range === void 0 ? [0, 100] : _props$range,
+    progressProps = props.progressProps,
+    circleProps = props.circleProps,
+    _props$emptyText = props.emptyText,
+    emptyText = _props$emptyText === void 0 ? '-' : _props$emptyText,
+    fontSize = props.fontSize,
+    fontWeight = props.fontWeight,
+    color = props.color,
+    _props$textAlign = props.textAlign,
+    textAlign = _props$textAlign === void 0 ? 'left' : _props$textAlign,
+    className = props.className,
+    style = props.style,
+    ariaLabel = props['aria-label'];
+
+  // 如果是 progress 或 circle 变体
+  if (variant === 'progress' || variant === 'circle') {
+    // 转换为 0-100 百分比
+    var percentValue = convertToPercent(value, range);
+    if (percentValue === null) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "pisell-percent pisell-percent-read ".concat(className || ''),
+        style: style
+      }, emptyText);
+    }
+
+    // 渲染进度条
+    if (variant === 'progress') {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "pisell-percent pisell-percent-progress ".concat(className || ''),
+        style: style
+      }, /*#__PURE__*/React.createElement(Progress, _extends({
+        percent: percentValue
+      }, progressProps)));
+    }
+
+    // 渲染环形进度
+    return /*#__PURE__*/React.createElement("div", {
+      className: "pisell-percent pisell-percent-circle ".concat(className || ''),
+      style: style
+    }, /*#__PURE__*/React.createElement(Progress, _extends({
+      type: "circle",
+      percent: percentValue
+    }, circleProps)));
+  }
+
+  // text 变体 - 纯文本展示
+  var displayValue = formatPercent(value, {
+    showPercentSymbol: showPercentSymbol,
+    precision: precision,
+    range: range
+  });
+  var text = displayValue !== null && displayValue !== void 0 ? displayValue : emptyText;
+  var combinedStyle = _objectSpread({
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    color: color,
+    textAlign: textAlign
+  }, style);
+  return /*#__PURE__*/React.createElement("span", {
+    className: "pisell-percent pisell-percent-read ".concat(className || ''),
+    style: combinedStyle,
+    "aria-label": ariaLabel
+  }, text);
+};
+export default ReadOnlyView;

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

@@ -0,0 +1,6 @@
+/**
+ * PisellPercent 子组件导出
+ */
+export { default as ReadOnlyView } from './ReadOnlyView';
+export { default as EditView } from './EditView';
+export { default as DisabledView } from './DisabledView';

package/es/components/pisellPercent/components/index.js

@@ -0,0 +1,7 @@
+/**
+ * PisellPercent 子组件导出
+ */
+
+export { default as ReadOnlyView } from "./ReadOnlyView";
+export { default as EditView } from "./EditView";
+export { default as DisabledView } from "./DisabledView";

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

@@ -0,0 +1,6 @@
+/**
+ * PisellPercent 组件导出
+ */
+export { default as PisellPercent } from './PisellPercent';
+export type { PisellPercentProps } from './types';
+export type { DisplayState, ValidationResult, NumberInputState, BaseNumberInputProps } from './types';

package/es/components/pisellPercent/index.js

@@ -0,0 +1,7 @@
+/**
+ * PisellPercent 组件导出
+ */
+
+export { default as PisellPercent } from "./PisellPercent";
+
+// 公共类型从 types 中重新导出，方便使用