@pisell/materials 3.3.82 → 3.3.84

package/es/components/page/index.js

@@ -8,7 +8,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import ConfigProvider from "../config-provider";
 import { AdapterDayjs } from '@pisell/date-picker/es/AdapterDayjs';
 import VariablesProvider from "../dataSourceComponents/provider/variables/VariablesProvider";
@@ -18,14 +18,19 @@ import enUS from 'antd/es/locale/en_US';
 import zhCN from 'antd/es/locale/zh_CN';
 import zhTW from 'antd/es/locale/zh_TW';
 import zhHK from 'antd/es/locale/zh_HK';
+import jaJP from 'antd/es/locale/ja_JP';
+import ptPT from 'antd/es/locale/pt_PT';
 import PisellConfigProvider from "../pisell-config-provider";
 import useEngineContext from "../../hooks/useEngineContext";
+import { getThemeConfig } from "../../theme/tokens";
 var localMap = {
   'zh-TW': zhTW,
   'zh-CN': zhCN,
   'zh-HK': zhHK,
   'en-US': enUS,
-  en: enUS
+  en: enUS,
+  'ja': jaJP,
+  'pt': ptPT
 };
 var localeDateMap = {
   'en-US': {
@@ -42,6 +47,12 @@ var localeDateMap = {
   },
   'zh-CN': {
     adapterLocale: 'zh-cn'
+  },
+  'ja': {
+    adapterLocale: 'ja'
+  },
+  'pt': {
+    adapterLocale: 'pt'
   }
 };
 var Page = function Page(props) {
@@ -60,133 +71,15 @@ var Page = function Page(props) {
     if (props !== null && props !== void 0 && props.theme) {
       var _props$theme;
       return _objectSpread(_objectSpread({}, props.theme), {}, {
-        // cssVar: { key: 'app' },
         token: _objectSpread(_objectSpread({}, props.theme.token), {}, {
           // 外部透传主题时，如果没有传入colorPrimary 默认使用主项目内主题色
           colorPrimary: (props === null || props === void 0 || (_props$theme = props.theme) === null || _props$theme === void 0 || (_props$theme = _props$theme.token) === null || _props$theme === void 0 ? void 0 : _props$theme.colorPrimary) || themeColor || '#5D3F9F'
         })
       });
     }
-    return {
-      // cssVar: { key: 'app' },
-      components: {
-        Table: {
-          colorFillContent: '#EAECF0',
-          colorFillSecondary: '#F2F4F7',
-          colorBorderSecondary: '#EAECF0',
-          colorFillAlter: '#F9FAFB',
-          controlItemBgHover: '#F9FAFB',
-          colorTextHeading: '#475467',
-          colorTextDescription: '#667085',
-          colorText: '#101828',
-          controlHeight: 32,
-          padding: 24,
-          margin: 16
-        },
-        Message: {
-          contentBg: '#101828'
-        },
-        Button: {
-          borderRadiusSM: 6,
-          borderRadiusLG: 9,
-          borderRadius: 8,
-          controlHeight: 36,
-          colorBgContainerDisabled: '#F2F4F7',
-          colorBgTextHover: '#F9FAFB',
-          colorBorder: '#D0D5DD',
-          colorError: '#D92D20',
-          colorErrorActive: '#D92D20',
-          colorErrorHover: '#B42318',
-          colorErrorBg: '#FEF3F2',
-          colorErrorBorderHover: '#FDA29B',
-          colorErrorOutline: 'rgba(217, 45, 32, 0.06)',
-          colorLink: '#7F56DA',
-          colorLinkActive: '#5F3DA8',
-          colorLinkHover: '#6D48C4',
-          // colorPrimaryActive: '#5D3F9F',
-          // colorPrimaryBorder: '#E9D7FE',
-          colorText: '#344054',
-          colorTextDisabled: '#D0D5DD',
-          colorTextLightSolid: '#fff',
-          colorBgTextActive: '#D0D5DD',
-          controlOutline: 'rgba(127, 86, 217, 0.04)',
-          controlTmpOutline: '#F9FAFB',
-          paddingContentHorizontal: 14,
-          marginXS: 8
-        },
-        Divider: {
-          colorSplit: '#EAECF0'
-        },
-        Breadcrumb: {
-          itemColor: '#475467',
-          colorTextDescription: '#475467',
-          // lastItemColor: '#6941C6',
-          separatorMargin: 12,
-          separatorColor: '#D0D5DD',
-          linkHoverColor: '#1D2939',
-          linkColor: '#475467',
-          colorBgTextHover: '#F9FAFB',
-          paddingXXS: 8
-        },
-        Dropdown: {
-          borderRadiusLG: 8,
-          // "boxShadowPopoverArrow": "2px 2px 5px rgba(0, 0, 0, 0.05)",
-          controlHeight: 42,
-          fontSize: 14
-        },
-        DatePicker: {
-          borderRadius: 8,
-          colorTextPlaceholder: '#667085',
-          colorIcon: '#667085',
-          colorTextQuaternary: '#D0D5DD',
-          colorBgContainerDisabled: '#F9FAFB',
-          colorTextDisabled: '#98A2B3'
-        },
-        Input: {
-          fontSizeIcon: 16,
-          addonBg: '#fff'
-          // "lineHeight": 1
-        },
-        Select: {
-          fontSizeIcon: 16
-          // "lineHeight": 1
-        },
-        Menu: {
-          subMenuItemSelectedColor: "#9976e3"
-        }
-      },
-      token: {
-        colorPrimary: themeColor || '#5D3F9F',
-        colorPrimaryBg: '#eee5ff',
-        colorPrimaryBgHover: '#e4d9fc',
-        colorPrimaryBorder: '#d4c3f7',
-        colorSuccess: '#5f9e3f',
-        colorInfo: '#5d3f9f',
-        colorError: '#f5222d',
-        colorSuccessBg: '#e5fcd9',
-        colorSuccessBgHover: '#d5f7c3',
-        // 链接色
-        colorLink: '#7F56DA',
-        colorLinkActive: '#5F3DA8',
-        colorLinkHover: '#6D48C4',
-        colorText: '#101828',
-        colorTextSecondary: '#475467',
-        colorTextTertiary: '#667085',
-        colorTextQuaternary: '#D0D5DD',
-        colorBorder: '#D0D5DD',
-        colorBorderSecondary: '#EAECF0',
-        colorFill: '#D0D5DD',
-        colorFillSecondary: '#EAECF0',
-        colorFillTertiary: '#F2F4F7',
-        colorFillQuaternary: '#F9FAFB',
-        colorBgLayout: '#F2F4F7',
-        colorBgSpotlight: '#101828',
-        colorBgMask: 'rgba(0, 0, 0, 0.5)',
-        wireframe: false,
-        borderRadius: 8
-      }
-    };
-  }, [platform, themeColor, props === null || props === void 0 ? void 0 : props.theme]);
+    // 使用统一的 token 配置
+    return getThemeConfig(themeColor);
+  }, [themeColor, props === null || props === void 0 ? void 0 : props.theme]);
   var datePickerTheme = useMemo(function () {
     var _theme$token;
     return createTheme({
@@ -197,6 +90,11 @@ var Page = function Page(props) {
       }
     });
   }, [platform, themeColor]);
+  useEffect(function () {
+    // body追加id来处理antd 5 取消:where 时css权重问题
+    // 物料中css使用post-css追加 #body 前缀
+    document.body.id = 'body';
+  }, []);
   return /*#__PURE__*/React.createElement(ConfigProvider, _extends({}, others, {
     locale: localMap[locale],
     prefixCls: props.prefixCls || 'pisell-lowcode',

package/es/components/pisellCurrency/PisellCurrency.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { PisellCurrencyProps } from './types';
+import './PisellCurrency.less';
+/**
+ * PisellCurrency 货币组件
+ *
+ * 基于 PisellNumber 派生，专门处理货币数据。
+ * 默认启用千分位和2位小数，符合财务规范。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 受控模式
+ * const [price, setPrice] = useState(0);
+ * <PisellCurrency
+ *   value={price}
+ *   onChange={setPrice}
+ *   currencySymbol="¥"
+ * />
+ *
+ * @example
+ * // 非受控模式
+ * <PisellCurrency
+ *   defaultValue={100}
+ *   currencySymbol="$"
+ * />
+ *
+ * @example
+ * // 只读态
+ * <PisellCurrency
+ *   mode="read"
+ *   value={1234.56}
+ *   currencySymbol="¥"
+ * />
+ * // 显示: ¥1,234.56
+ */
+export declare const PisellCurrency: React.FC<PisellCurrencyProps>;
+declare const MemoizedPisellCurrency: React.NamedExoticComponent<PisellCurrencyProps>;
+export default MemoizedPisellCurrency;

package/es/components/pisellCurrency/PisellCurrency.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 "./PisellCurrency.less";
+
+/**
+ * PisellCurrency 货币组件
+ * 
+ * 基于 PisellNumber 派生，专门处理货币数据。
+ * 默认启用千分位和2位小数，符合财务规范。
+ * 
+ * @param props 组件 Props
+ * 
+ * @example
+ * // 受控模式
+ * const [price, setPrice] = useState(0);
+ * <PisellCurrency 
+ *   value={price}
+ *   onChange={setPrice}
+ *   currencySymbol="¥"
+ * />
+ * 
+ * @example
+ * // 非受控模式
+ * <PisellCurrency 
+ *   defaultValue={100}
+ *   currencySymbol="$"
+ * />
+ * 
+ * @example
+ * // 只读态
+ * <PisellCurrency 
+ *   mode="read"
+ *   value={1234.56}
+ *   currencySymbol="¥"
+ * />
+ * // 显示: ¥1,234.56
+ */
+export var PisellCurrency = function PisellCurrency(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 避免不必要的重渲染
+var MemoizedPisellCurrency = /*#__PURE__*/React.memo(PisellCurrency, function (prevProps, nextProps) {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled && prevProps.currencySymbol === nextProps.currencySymbol && prevProps.symbolPosition === nextProps.symbolPosition;
+});
+export default MemoizedPisellCurrency;

package/es/components/pisellCurrency/PisellCurrency.less

@@ -0,0 +1,43 @@
+// PisellCurrency 组件样式
+
+.pisell-currency {
+  // 基础样式
+  display: inline-block;
+
+  // 只读态样式
+  &-read {
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 1.5715;
+    
+    // 货币数值可以加粗显示（可选）
+    font-weight: 500;
+  }
+
+  // 编辑态样式
+  &-edit {
+    position: relative;
+
+    // 错误提示
+    .pisell-currency-error {
+      margin-top: 4px;
+      color: #ff4d4f;
+      font-size: 14px;
+      line-height: 1.5;
+    }
+  }
+
+  // 禁用态样式
+  &-disabled {
+    // 继承 Ant Design InputNumber 的禁用样式
+  }
+  
+  // 负数显示为红色（可选）
+  &.negative {
+    color: #ff4d4f;
+  }
+  
+  // 正数显示为绿色（可选，用于收益场景）
+  &.positive {
+    color: #52c41a;
+  }
+}

package/es/components/pisellCurrency/PisellCurrency.stories.d.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellCurrency } from './PisellCurrency';
+/**
+ * PisellCurrency 组件 Storybook
+ */
+declare const meta: Meta<typeof PisellCurrency>;
+export default meta;
+declare type Story = StoryObj<typeof PisellCurrency>;
+/**
+ * 基础示例 - 人民币
+ */
+export declare const Basic: Story;
+/**
+ * 不同货币
+ */
+export declare const DifferentCurrencies: Story;
+/**
+ * 只读态展示
+ */
+export declare const ReadOnly: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 不显示货币符号
+ */
+export declare const WithoutSymbol: Story;
+/**
+ * 禁止负数（商品价格）
+ */
+export declare const NoNegative: Story;
+/**
+ * 允许负数（退款金额）
+ */
+export declare const AllowNegative: Story;
+/**
+ * 表单场景
+ */
+export declare const InForm: Story;
+/**
+ * 表格场景
+ */
+export declare const InTable: Story;
+/**
+ * 不同精度
+ */
+export declare const DifferentPrecision: Story;
+/**
+ * 只读态样式
+ */
+export declare const ReadOnlyStyles: Story;
+/**
+ * 空值处理
+ */
+export declare const EmptyValue: Story;