@pisell/private-materials 6.6.8 → 6.6.10

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

@@ -0,0 +1,220 @@
+.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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,203 @@
+# 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

@@ -0,0 +1,212 @@
+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 };