@pisell/private-materials 6.6.10 → 6.6.12

package/dist/es/pro/NumericStepper/index.less

@@ -1,220 +0,0 @@
-.numeric-stepper {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  transition: all 0.2s ease-in-out;
-
-  &-disabled {
-    cursor: not-allowed;
-  }
-
-  // 简单模式样式（只显示加号按钮）
-  &-simple {
-    gap: 0;
-  }
-
-  // 按钮样式
-  &-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border: none;
-    background-color: #7f56d9;
-    cursor: pointer;
-    color: #ffffff;
-    transition: all 0.2s ease-in-out;
-
-    &:hover {
-      background-color: #6b46c1;
-    }
-
-    &:active {
-      background-color: #553c9a;
-      transform: scale(0.95);
-    }
-
-    &:focus {
-      outline: none;
-      box-shadow: 0 0 0 2px rgba(127, 86, 217, 0.3);
-    }
-
-    &-disabled {
-      cursor: not-allowed;
-      background-color: #d0d5dd !important;
-
-      &:hover {
-        background-color: #d0d5dd !important;
-        transform: none;
-      }
-    }
-
-    svg {
-      width: 16px;
-      height: 16px;
-      stroke: currentColor;
-    }
-  }
-
-  // 按钮形状样式
-  &-round {
-    .numeric-stepper-button {
-      border-radius: 50%;
-    }
-  }
-
-  &-square {
-    .numeric-stepper-button {
-      border-radius: 12px;
-    }
-  }
-
-  // 输入框样式
-  &-input {
-    border: none;
-    outline: none;
-    text-align: center;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1.5;
-    color: #101828;
-    background: transparent;
-    width: 30px;
-    height: 30px;
-    max-width: 56px;
-    padding: 0 4px;
-    overflow: hidden;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    &[type='number'] {
-      -moz-appearance: textfield;
-    }
-
-    &:disabled {
-      color: #9ca3af;
-      cursor: not-allowed;
-    }
-  }
-
-  // 显示区域样式（当不显示输入框时）
-  &-display {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 30px;
-    height: 30px;
-    max-width: 56px;
-    padding: 0 4px;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1.5;
-    color: #101828;
-    text-align: center;
-    overflow: hidden;
-  }
-
-  // 尺寸变体
-  &-small {
-    gap: 8px;
-
-    .numeric-stepper-button {
-      width: 24px;
-      height: 24px;
-
-      svg {
-        width: 12px;
-        height: 12px;
-      }
-    }
-
-    .numeric-stepper-input,
-    .numeric-stepper-display {
-      width: 24px;
-      height: 24px;
-      max-width: 40px;
-      font-size: 14px;
-      font-weight: 600;
-      color: #101828;
-      padding: 0 2px;
-      text-align: center;
-      overflow: hidden;
-    }
-  }
-
-  &-middle {
-    gap: 8px;
-
-    .numeric-stepper-button {
-      width: 32px;
-      height: 32px;
-
-      svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    .numeric-stepper-input,
-    .numeric-stepper-display {
-      width: 30px;
-      height: 30px;
-      max-width: 56px;
-      font-size: 16px;
-      font-weight: 600;
-      color: #101828;
-      padding: 0 4px;
-      text-align: center;
-      overflow: hidden;
-    }
-  }
-
-  &-large {
-    gap: 10px;
-
-    .numeric-stepper-button {
-      width: 40px;
-      height: 40px;
-
-      svg {
-        width: 20px;
-        height: 20px;
-      }
-    }
-
-    .numeric-stepper-input,
-    .numeric-stepper-display {
-      width: 36px;
-      height: 36px;
-      max-width: 64px;
-      font-size: 18px;
-      font-weight: 600;
-      color: #101828;
-      padding: 0 6px;
-      text-align: center;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  &-out-of-range {
-    .numeric-stepper-input,
-    .numeric-stepper-display {
-      color: #ff4d4f;
-    }
-  }
-
-  // 禁用状态下的特殊样式
-  &-disabled {
-    .numeric-stepper-input,
-    .numeric-stepper-display {
-      color: #9ca3af;
-    }
-  }
-}

package/dist/es/pro/Selector/Item.d.ts

@@ -1,17 +0,0 @@
-import { OptionItem } from "./types.js";
-import React from "react";
-
-//#region src/pro/Selector/Item.d.ts
-interface IItemProps {
-  actions: any;
-  dataSource: OptionItem;
-  indicator: React.ReactNode;
-  numberSelector: React.ReactNode;
-  optionItemValue?: any;
-  quantityInfo: any;
-  values: any;
-  children?: React.ReactNode;
-}
-declare const Item: (props: IItemProps) => JSX.Element;
-//#endregion
-export { Item };

package/dist/es/pro/Selector/Item.js

@@ -1,54 +0,0 @@
-import Card_default from "./components/Card/index.js";
-import Media_default from "./components/Media/index.js";
-import usePresetItemProps_default from "./hooks/usePresetItemProps.js";
-import { SelectorContext } from "./Selector.js";
-import React, { useContext } from "react";
-
-//#region src/pro/Selector/Item.tsx
-const Item = (props) => {
-	const { actions, dataSource, indicator, numberSelector, optionItemValue, quantityInfo, values, children } = props;
-	const { disabled, mode, variant, itemProps, preset, itemLayout } = useContext(SelectorContext);
-	const { mediaProps, cardProps } = usePresetItemProps_default({
-		variant,
-		itemLayout,
-		preset,
-		itemProps,
-		indicator,
-		numberSelector,
-		mode,
-		disabled: disabled || dataSource.disabled,
-		selected: dataSource.selected
-	});
-	const handleClick = () => {
-		if (disabled || dataSource.disabled) return;
-		if (mode === "multiple") actions.toggle(dataSource._key);
-		else actions.update(dataSource._key, { quantity: 1 });
-	};
-	if (variant === "media") return /* @__PURE__ */ React.createElement(Media_default, {
-		...mediaProps,
-		cover: dataSource.cover,
-		label: dataSource._label,
-		extra: numberSelector,
-		indicator,
-		selected: dataSource.selected,
-		disabled: disabled || dataSource.disabled,
-		onClick: handleClick
-	});
-	const renderChildren = () => {
-		if (typeof cardProps?.renderContent === "function") return cardProps?.renderContent?.({ dataSource });
-		if ("design" === props.__designMode) {
-			if (children == null || Array.isArray(children) && !children.length) return /* @__PURE__ */ React.createElement("div", { className: "lc-container-placeholder" }, "拖拽组件或模板到这里");
-		}
-		return children ? children : /* @__PURE__ */ React.createElement("span", null, dataSource._label);
-	};
-	return /* @__PURE__ */ React.createElement(Card_default, {
-		...cardProps,
-		selected: dataSource.selected,
-		disabled: disabled || dataSource.disabled,
-		onClick: handleClick
-	}, renderChildren());
-};
-var Item_default = Item;
-
-//#endregion
-export { Item_default as default };

package/dist/es/pro/Selector/STORYBOOK.md

@@ -1,203 +0,0 @@
-# Storybook 测试指南 - Selector 组件
-
-## 快速开始
-
-### 1. 启动 Storybook
-
-在 `packages/private-materials` 目录下运行：
-
-```bash
-pnpm storybook
-```
-
-或者
-
-```bash
-npm run storybook
-```
-
-Storybook 将在 `http://localhost:6006` 启动。
-
-### 2. 查看 Selector 组件
-
-在 Storybook 左侧菜单中找到：
-- **Pro Components** > **Selector**
-
-## Stories 说明
-
-### 基础功能
-
-- **Default**: 默认单选模式 - 原始值类型
-- **Multiple**: 多选模式 - 原始值数组
-- **SingleWithQuantity**: 单选 + 数量 - 对象值类型
-- **MultipleWithQuantity**: 多选 + 数量 - 卡片样式
-
-### 布局
-
-- **GridLayout2Columns**: 网格布局 - 2列
-- **GridLayout3Columns**: 网格布局 - 3列
-
-### 校验
-
-- **WithValidation**: 校验规则 - 必选、最小/最大数量
-  - 支持必选（required）
-  - 支持最小/最大选择数量（min/max）
-  - 支持手动校验和获取错误信息
-
-### 互斥组
-
-- **MutexGroups**: 互斥组示例
-  - 选项1、2、3属于互斥组1，只能选一个
-  - 选项4、5、6属于互斥组2，只能选一个
-
-### 状态
-
-- **Disabled**: 禁用状态
-  - 支持单个选项禁用
-  - 支持整个组件禁用
-
-### 样式变体
-
-- **SelectVariant**: Select 变体 - 下拉选择（单选）
-- **SelectVariantMultiple**: Select 变体 - 多选下拉
-- **CardVariants**: 卡片样式变体 - 不同选中态
-  - 默认选中态（default）
-  - 填充选中态（filled）
-  - 角标选中态（cornered）
-
-### 自定义
-
-- **CustomIcon**: 自定义选中图标
-- **CustomRender**: 自定义渲染内容
-
-### 分组组件
-
-- **SelectorGroupBasic**: SelectorGroup 基础示例
-  - 多个选择器组
-  - 每个组独立配置
-  - 标签页导航
-
-- **SelectorGroupWithLinkage**: SelectorGroup 联动规则示例
-  - 选择主菜后显示对应的定制选项
-  - 汉堡 → 显示"汉堡定制"分组
-  - 披萨 → 显示"披萨定制"分组
-
-## 交互测试
-
-在 Storybook 中，你可以：
-
-1. **手动测试交互**
-   - 点击选择器项
-   - 调整数量
-   - 验证校验规则
-   - 测试互斥组行为
-
-2. **查看状态变化**
-   - 在控制台查看 `onChange` 回调的输出
-   - 查看组件值的 JSON 展示
-
-3. **测试不同配置**
-   - 使用 Storybook 的 Controls 面板调整 props
-   - 切换不同的 mode、valueType、variant 等
-
-4. **调试样式**
-   - 使用浏览器开发者工具检查样式
-   - 测试不同屏幕尺寸
-
-## 控件面板
-
-Storybook 提供了交互式控件面板，你可以调整：
-
-- **mode**: 选择模式（single/multiple）
-- **valueType**: 值类型（primitive/object）
-- **variant**: 样式变体（default/card/select）
-- **disabled**: 是否禁用
-
-## 快捷键
-
-在 Storybook 界面中：
-
-- `A` - 切换到画布视图
-- `D` - 切换到文档视图
-- `S` - 搜索
-- `?` - 查看所有快捷键
-
-## 测试用例映射
-
-每个 Story 对应测试计划中的测试用例：
-
-| Story | 对应测试用例 |
-|-------|-------------|
-| Default | TC-B-001: 基础单选功能 |
-| Multiple | TC-B-002: 基础多选功能 |
-| SingleWithQuantity | TC-B-003: 单选 + 数量 |
-| MultipleWithQuantity | TC-B-004: 多选 + 数量 |
-| GridLayout2Columns | TC-L-001: 网格布局 2列 |
-| GridLayout3Columns | TC-L-002: 网格布局 3列 |
-| WithValidation | TC-V-001 ~ TC-V-005 |
-| MutexGroups | TC-R-001: 互斥组功能 |
-| Disabled | TC-U-001 ~ TC-U-003 |
-| SelectVariant | TC-A-001: Select 变体 |
-| CardVariants | TC-A-002: 卡片样式变体 |
-| SelectorGroupBasic | TC-G-001: 基础分组 |
-| SelectorGroupWithLinkage | TC-G-002: 联动规则 |
-
-## 注意事项
-
-1. **Storybook 主要用于视觉测试和交互验证**
-   - 不是单元测试的替代品
-   - 需要配合 Vitest 进行自动化测试
-
-2. **数据持久化**
-   - Storybook 中的状态不会持久化
-   - 刷新页面会重置状态
-
-3. **浏览器兼容性**
-   - 在不同浏览器中测试以确保兼容性
-   - 检查响应式布局
-
-4. **性能测试**
-   - 在大量选项的情况下测试性能
-   - 检查渲染时间和交互响应
-
-## 扩展 Stories
-
-要添加新的 Story，在 `Selector.stories.tsx` 中添加：
-
-```typescript
-export const MyNewStory: Story = {
-  args: {
-    // 配置...
-  },
-  render: (args: any) => {
-    // 渲染逻辑...
-  },
-};
-```
-
-## 故障排除
-
-### Storybook 无法启动
-
-1. 检查依赖是否安装：`pnpm install`
-2. 检查端口 6006 是否被占用
-3. 清除缓存：删除 `.storybook` 相关缓存文件
-
-### 组件不显示
-
-1. 检查导入路径是否正确
-2. 检查样式文件是否正确加载
-3. 查看浏览器控制台错误信息
-
-### 类型错误
-
-1. 确保 `@storybook/react` 版本兼容
-2. 检查 TypeScript 配置
-3. 查看 Storybook 配置文件
-
-## 参考文档
-
-- [Storybook 官方文档](https://storybook.js.org/)
-- [Selector 组件开发文档](./docs/selector.$tab-dev.md)
-- [Selector 组件测试计划](./TEST_PLAN.md)
-

package/dist/es/pro/Selector/Selector.js

@@ -1,212 +0,0 @@
-import useEngineContext_default from "../../hooks/useEngineContext.js";
-import locales_default from "./locales.js";
-import Indicator_default from "./components/Indicator/index.js";
-import LayoutContainer_default from "./components/LayoutContainer/index.js";
-import NumericStepper_default from "../NumericStepper/index.js";
-import useSelectionController from "./hooks/useSelectionController.js";
-import usePresetProps_default from "./hooks/usePresetProps.js";
-import Item_default from "./Item.js";
-import React, { forwardRef, useEffect, useImperativeHandle } from "react";
-import { Col, Row, Select, Tag } from "antd";
-import { locales } from "@pisell/utils";
-import classNames from "classnames";
-import { CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
-import "./selector.less";
-
-//#region src/pro/Selector/Selector.tsx
-const ATag = Tag;
-const SelectorContext = React.createContext({
-	disabled: false,
-	mode: "single",
-	itemLayout: "horizontal",
-	valueType: "primitive",
-	variant: "default",
-	itemProps: {},
-	preset: {}
-});
-const Selector = forwardRef((props, ref) => {
-	const { disabled, fieldNames, layout, indicatorProps, itemProps, itemLayout = "horizontal", mode = "single", preset = {}, renderItem, ruleConfig, valueType = "primitive", variant = "default" } = props;
-	const context = useEngineContext_default();
-	locales.init(locales_default, context?.appHelper?.utils?.storage?.get("umi_locale") || "en");
-	const { state, actions } = useSelectionController(props);
-	const { options, errors, validated, quantityInfo } = state;
-	const { showQuantity, remainingCount } = quantityInfo;
-	const headerProps = props.headerProps || props.titleProps || {};
-	const presetConfig = usePresetProps_default({
-		mode,
-		preset,
-		itemLayout,
-		variant,
-		layout,
-		indicatorProps
-	});
-	const finalLayout = presetConfig.layout;
-	const finalIndicatorProps = presetConfig.indicatorProps;
-	useImperativeHandle(ref, () => ({
-		validate: actions.validate,
-		reset: actions.reset,
-		clear: actions.clear,
-		getErrors: () => {
-			return errors || [];
-		}
-	}));
-	useEffect(() => {
-		document.body.id = "body";
-	}, [actions]);
-	const renderIndicator = (option, isDefault) => {
-		const { show = true, render, ...rest } = finalIndicatorProps || {};
-		if (finalIndicatorProps?.show === false) return null;
-		if (React.isValidElement(finalIndicatorProps?.render)) return finalIndicatorProps?.render;
-		if (typeof finalIndicatorProps?.render === "function") return finalIndicatorProps?.render?.({
-			option,
-			selected: option.selected,
-			disabled: disabled || option.disabled,
-			actions,
-			...rest
-		});
-		return /* @__PURE__ */ React.createElement(Indicator_default, {
-			...rest,
-			mode,
-			checked: option.selected,
-			disabled: disabled || option.disabled,
-			onChange: (e) => {
-				if (e.target.checked) actions.update(option._key, { quantity: 1 });
-				else actions.update(option._key, { quantity: 0 });
-			},
-			children: isDefault ? option._label : void 0
-		});
-	};
-	const renderQuantitySelector = (option) => {
-		if (valueType === "primitive") return null;
-		if (props.showStepper === false) return null;
-		if ((props.showStepper === "auto" || props.showStepper === void 0) && !showQuantity) return null;
-		const configMax = option?.ruleConfig?.max ?? Number.MAX_SAFE_INTEGER;
-		const effectiveMax = remainingCount !== void 0 ? Math.min(remainingCount + (option.quantity || 0), configMax) : configMax;
-		return /* @__PURE__ */ React.createElement(NumericStepper_default, {
-			...props.stepperProps || {},
-			min: option?.ruleConfig?.min ?? 0,
-			max: effectiveMax,
-			value: option.quantity,
-			disabled: disabled || option.disabled,
-			onChange: (value) => {
-				actions.update(option._key, { quantity: value });
-			},
-			showInput: true
-		});
-	};
-	const renderOption = (option) => {
-		const optionItemValue = Array.isArray(state.values) ? state.values.find((item) => item?.value === option._key) : state.values;
-		if (React.isValidElement(renderItem)) return renderItem;
-		if (typeof renderItem === "function") return renderItem({
-			dataSource: option,
-			actions,
-			optionItemValue,
-			indicator: renderIndicator(option),
-			numberSelector: renderQuantitySelector(option),
-			values: state.values,
-			quantityInfo
-		});
-		const numberSelector = renderQuantitySelector(option);
-		const indicator = renderIndicator(option);
-		return /* @__PURE__ */ React.createElement(Item_default, {
-			key: option._key,
-			dataSource: option,
-			actions,
-			indicator,
-			numberSelector,
-			optionItemValue,
-			quantityInfo,
-			values: state.values
-		});
-	};
-	const renderOptions = () => {
-		if (variant === "select") {
-			const _value = state.values;
-			const _maxCount = ruleConfig?.max;
-			return /* @__PURE__ */ React.createElement(Select, {
-				size: "large",
-				style: { width: "100%" },
-				mode: mode === "multiple" ? "multiple" : void 0,
-				options,
-				fieldNames,
-				value: _value,
-				onChange: (value) => actions.setValue(value),
-				disabled,
-				maxTagCount: _maxCount
-			});
-		}
-		return /* @__PURE__ */ React.createElement(LayoutContainer_default, { config: finalLayout }, options.map(renderOption));
-	};
-	const renderErrorMsg = () => {
-		if (!errors?.length) return null;
-		const error = errors[errors.length - 1];
-		return /* @__PURE__ */ React.createElement("div", { style: { color: "#D92D20" } }, error?.message);
-	};
-	const renderRequiredTag = () => {
-		const { required = false } = ruleConfig || {};
-		if (!required) return null;
-		const style = { borderRadius: 16 };
-		if (errors.find((item) => item.type === "required")) return /* @__PURE__ */ React.createElement(ATag, {
-			icon: /* @__PURE__ */ React.createElement(ExclamationCircleOutlined, null),
-			color: "error",
-			style
-		}, locales.getText("pisell2.pro.selector.required-tag"));
-		if (validated) return /* @__PURE__ */ React.createElement(ATag, {
-			icon: /* @__PURE__ */ React.createElement(CheckCircleOutlined, null),
-			color: "success",
-			style
-		}, locales.getText("pisell2.pro.selector.required-tag"));
-		return /* @__PURE__ */ React.createElement(ATag, { style }, locales.getText("pisell2.pro.selector.required-tag"));
-	};
-	const renderTip = () => {
-		if (headerProps?.tip?.visible === false) return null;
-		let text = headerProps?.tip?.text;
-		if (ruleConfig?.min || ruleConfig?.max) text = locales.getText("pisell2.pro.selector.tip.min-max-selection")(ruleConfig?.min, ruleConfig?.max);
-		if (!text) if (mode === "multiple") text = locales.getText("pisell2.pro.selector.mode.multiple");
-		else text = locales.getText("pisell2.pro.selector.mode.single");
-		if (!text) return null;
-		return /* @__PURE__ */ React.createElement("span", {
-			className: "pisell-pro-selector-tip",
-			style: { ...headerProps?.tip?.style || {} }
-		}, "(", text, ")");
-	};
-	const renderHeader = () => {
-		if (headerProps?.visible === false) return null;
-		const _extraContent = headerProps?.renderExtra ? headerProps?.renderExtra({
-			dataSource: options,
-			values: state.values
-		}) : null;
-		return /* @__PURE__ */ React.createElement("div", {
-			className: "pisell-pro-selector_header",
-			style: { ...headerProps?.style || {} }
-		}, /* @__PURE__ */ React.createElement("div", { className: "pisell-pro-selector_header-content-wrapper" }, /* @__PURE__ */ React.createElement("div", {
-			className: "pisell-pro-selector_header-content",
-			style: {
-				display: "flex",
-				alignItems: "center",
-				gap: 8,
-				flex: 1
-			}
-		}, headerProps?.icon?.visible === false || !headerProps?.icon?.icon ? null : /* @__PURE__ */ React.createElement("span", { style: headerProps?.icon?.style }, headerProps?.icon?.icon), headerProps?.title?.visible === false || !headerProps?.title?.text && !props.title ? null : /* @__PURE__ */ React.createElement("span", {
-			className: "pisell-pro-selector_header-content-title",
-			style: { ...headerProps?.title?.style || {} }
-		}, headerProps?.title?.text ?? props.title), renderRequiredTag()), renderTip()), _extraContent);
-	};
-	return /* @__PURE__ */ React.createElement("div", {
-		id: `pisell-pro-selector-${props.id}`,
-		className: classNames("pisell-pro-selector", props.className),
-		style: props.style
-	}, renderHeader(), renderErrorMsg(), /* @__PURE__ */ React.createElement(SelectorContext.Provider, { value: {
-		mode,
-		disabled,
-		valueType,
-		variant,
-		itemLayout,
-		itemProps,
-		preset
-	} }, renderOptions()));
-});
-var Selector_default = Selector;
-
-//#endregion
-export { SelectorContext, Selector_default as default };