@pisell/private-materials 6.3.58 → 6.3.59

package/lib/pro/Selector/Selector.stories.js

@@ -0,0 +1,740 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/pro/Selector/Selector.stories.tsx
+var Selector_stories_exports = {};
+__export(Selector_stories_exports, {
+  CardVariants: () => CardVariants,
+  CustomIcon: () => CustomIcon,
+  CustomRender: () => CustomRender,
+  Default: () => Default,
+  Disabled: () => Disabled,
+  GridLayout2Columns: () => GridLayout2Columns,
+  GridLayout3Columns: () => GridLayout3Columns,
+  Multiple: () => Multiple,
+  MultipleWithQuantity: () => MultipleWithQuantity,
+  MutexGroups: () => MutexGroups,
+  SelectVariant: () => SelectVariant,
+  SelectVariantMultiple: () => SelectVariantMultiple,
+  SelectorGroupBasic: () => SelectorGroupBasic,
+  SelectorGroupWithLinkage: () => SelectorGroupWithLinkage,
+  SingleWithQuantity: () => SingleWithQuantity,
+  WithValidation: () => WithValidation,
+  default: () => Selector_stories_default
+});
+module.exports = __toCommonJS(Selector_stories_exports);
+var import_react = __toESM(require("react"));
+var import_index = __toESM(require("./index"));
+var import_SelectorGroup = __toESM(require("./SelectorGroup"));
+var import_icons = require("@ant-design/icons");
+var meta = {
+  title: "Pro Components/Selector",
+  component: import_index.default,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "高级选择器组件，支持单选/多选、数量控制、校验规则、多种样式变体等功能。"
+      }
+    }
+  },
+  argTypes: {
+    mode: {
+      control: "select",
+      options: ["single", "multiple"],
+      description: "选择模式：单选或多选"
+    },
+    valueType: {
+      control: "select",
+      options: ["primitive", "object"],
+      description: "值类型：原始值或对象值"
+    },
+    variant: {
+      control: "select",
+      options: ["default", "card", "select"],
+      description: "样式变体"
+    },
+    disabled: {
+      control: "boolean",
+      description: "是否禁用"
+    }
+  }
+};
+var Selector_stories_default = meta;
+var basicDataSource = [
+  { id: 1, value: 1, label: "选项1", title: "选项1" },
+  { id: 2, value: 2, label: "选项2", title: "选项2" },
+  { id: 3, value: 3, label: "选项3", title: "选项3" },
+  { id: 4, value: 4, label: "选项4", title: "选项4" },
+  { id: 5, value: 5, label: "选项5", title: "选项5" }
+];
+var Default = {
+  args: {
+    id: "default-selector",
+    title: "基础单选",
+    dataSource: basicDataSource,
+    mode: "single",
+    valueType: "primitive",
+    fieldNames: { value: "value", label: "label" }
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)(1);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        value,
+        onChange: (v) => {
+          setValue(v);
+          console.log("选中值:", v);
+        }
+      }
+    );
+  }
+};
+var Multiple = {
+  args: {
+    id: "multiple-selector",
+    title: "多选模式",
+    dataSource: basicDataSource,
+    mode: "multiple",
+    valueType: "primitive",
+    fieldNames: { value: "value", label: "label" }
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([1, 3]);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        value,
+        onChange: (v) => {
+          setValue(v);
+          console.log("选中值:", v);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 16, padding: 12, background: "#f5f5f5", borderRadius: 4 } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "当前选择值："), /* @__PURE__ */ import_react.default.createElement("pre", null, JSON.stringify(value, null, 2))));
+  }
+};
+var SingleWithQuantity = {
+  args: {
+    id: "single-quantity",
+    title: "单选 + 数量",
+    dataSource: [
+      { id: 1, value: 1, label: "可乐", title: "可乐", ruleConfig: { min: 1, max: 10 } },
+      { id: 2, value: 2, label: "橙汁", title: "橙汁", ruleConfig: { min: 1, max: 5 } }
+    ],
+    mode: "single",
+    valueType: "object",
+    fieldNames: { value: "value", label: "label" }
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)({ value: 1, quantity: 2 });
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        value,
+        onChange: (v) => {
+          setValue(v);
+          console.log("选中值:", v);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 16, padding: 12, background: "#f5f5f5", borderRadius: 4 } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "当前选择值："), /* @__PURE__ */ import_react.default.createElement("pre", null, JSON.stringify(value, null, 2))));
+  }
+};
+var MultipleWithQuantity = {
+  args: {
+    id: "multiple-quantity",
+    title: "多选 + 数量（卡片样式）",
+    dataSource: [
+      { id: 1, value: 1, label: "青菜", title: "青菜", ruleConfig: { min: 0, max: 3 } },
+      { id: 2, value: 2, label: "豆腐", title: "豆腐", ruleConfig: { min: 0, max: 3 } },
+      { id: 3, value: 3, label: "鸡蛋", title: "鸡蛋", ruleConfig: { min: 0, max: 5 } }
+    ],
+    mode: "multiple",
+    valueType: "object",
+    fieldNames: { value: "value", label: "label" },
+    variant: "card",
+    item: {
+      variant: "card",
+      layout: "vertical",
+      selectedTypeVariant: "filled"
+    },
+    grid: {
+      columns: 3,
+      gutter: 16
+    }
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([
+      { value: 1, quantity: 2 },
+      { value: 3, quantity: 1 }
+    ]);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        value,
+        onChange: (v) => {
+          setValue(v);
+          console.log("选中值:", v);
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 16, padding: 12, background: "#f5f5f5", borderRadius: 4 } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "当前选择值："), /* @__PURE__ */ import_react.default.createElement("pre", null, JSON.stringify(value, null, 2))));
+  }
+};
+var GridLayout2Columns = {
+  args: {
+    id: "grid-2",
+    title: "网格布局（2列）",
+    dataSource: basicDataSource,
+    mode: "multiple",
+    valueType: "primitive",
+    fieldNames: { value: "value", label: "label" },
+    variant: "card",
+    item: {
+      variant: "card"
+    },
+    grid: {
+      columns: 2,
+      gutter: 16
+    }
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([]);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        value,
+        onChange: setValue
+      }
+    );
+  }
+};
+var GridLayout3Columns = {
+  args: {
+    id: "grid-3",
+    title: "网格布局（3列）",
+    dataSource: basicDataSource,
+    mode: "multiple",
+    valueType: "primitive",
+    fieldNames: { value: "value", label: "label" },
+    variant: "card",
+    item: {
+      variant: "card",
+      layout: "vertical",
+      selectedTypeVariant: "cornered"
+    },
+    grid: {
+      columns: 3,
+      gutter: 16
+    }
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([]);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        value,
+        onChange: setValue
+      }
+    );
+  }
+};
+var WithValidation = {
+  args: {
+    id: "validation",
+    title: "校验规则",
+    dataSource: basicDataSource,
+    mode: "multiple",
+    valueType: "primitive",
+    fieldNames: { value: "value", label: "label" },
+    ruleConfig: {
+      required: 1,
+      min: 2,
+      max: 4
+    },
+    titleProps: {
+      visible: true,
+      title: { text: "请选择 2-4 个选项" },
+      tip: { visible: true }
+    }
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([]);
+    const ref = import_react.default.useRef(null);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ref,
+        ...args,
+        value,
+        onChange: setValue
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 16 } }, /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        onClick: async () => {
+          var _a, _b;
+          try {
+            await ((_a = ref.current) == null ? void 0 : _a.validate());
+            alert("校验通过！");
+          } catch (errors) {
+            console.error("校验失败:", errors);
+            alert("校验失败：" + JSON.stringify((_b = ref.current) == null ? void 0 : _b.getErrors(), null, 2));
+          }
+        },
+        style: { padding: "8px 16px", marginRight: 8 }
+      },
+      "校验"
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        onClick: () => {
+          var _a;
+          return (_a = ref.current) == null ? void 0 : _a.reset();
+        },
+        style: { padding: "8px 16px", marginRight: 8 }
+      },
+      "重置"
+    ), /* @__PURE__ */ import_react.default.createElement(
+      "button",
+      {
+        onClick: () => {
+          var _a;
+          return (_a = ref.current) == null ? void 0 : _a.clear();
+        },
+        style: { padding: "8px 16px" }
+      },
+      "清空"
+    )));
+  }
+};
+var MutexGroups = {
+  args: {
+    id: "mutex",
+    title: "互斥组示例",
+    dataSource: [
+      { id: 1, value: 1, label: "选项1（互斥组1）", title: "选项1" },
+      { id: 2, value: 2, label: "选项2（互斥组1）", title: "选项2" },
+      { id: 3, value: 3, label: "选项3（互斥组1）", title: "选项3" },
+      { id: 4, value: 4, label: "选项4（互斥组2）", title: "选项4" },
+      { id: 5, value: 5, label: "选项5（互斥组2）", title: "选项5" },
+      { id: 6, value: 6, label: "选项6（互斥组2）", title: "选项6" }
+    ],
+    mode: "multiple",
+    valueType: "primitive",
+    fieldNames: { value: "value", label: "label" },
+    ruleConfig: {
+      mutex: [
+        [1, 2, 3],
+        // 互斥组1
+        [4, 5, 6]
+        // 互斥组2
+      ]
+    },
+    variant: "card",
+    item: {
+      variant: "card"
+    },
+    grid: {
+      columns: 3,
+      gutter: 16
+    }
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([]);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#666", marginBottom: 16 } }, "规则：选项1、2、3属于互斥组1，只能选一个；选项4、5、6属于互斥组2，只能选一个。"), /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        value,
+        onChange: setValue
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 16, padding: 12, background: "#f5f5f5", borderRadius: 4 } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "当前选择值："), /* @__PURE__ */ import_react.default.createElement("pre", null, JSON.stringify(value, null, 2))));
+  }
+};
+var Disabled = {
+  args: {
+    id: "disabled",
+    title: "禁用状态",
+    dataSource: [
+      { id: 1, value: 1, label: "选项1（正常）", title: "选项1" },
+      { id: 2, value: 2, label: "选项2（禁用）", title: "选项2", disabled: true },
+      { id: 3, value: 3, label: "选项3（正常）", title: "选项3" }
+    ],
+    mode: "single",
+    valueType: "primitive",
+    fieldNames: { value: "value", label: "label" },
+    disabled: false
+  },
+  render: (args) => {
+    const [disabled, setDisabled] = (0, import_react.useState)(false);
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("label", { style: { marginBottom: 16, display: "block" } }, /* @__PURE__ */ import_react.default.createElement(
+      "input",
+      {
+        type: "checkbox",
+        checked: disabled,
+        onChange: (e) => setDisabled(e.target.checked),
+        style: { marginRight: 8 }
+      }
+    ), "禁用整个组件"), /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        disabled
+      }
+    ));
+  }
+};
+var SelectVariant = {
+  args: {
+    id: "select-variant",
+    title: "Select 变体（下拉选择）",
+    dataSource: basicDataSource,
+    mode: "single",
+    valueType: "primitive",
+    fieldNames: { value: "value", label: "label" },
+    variant: "select"
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)(1);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        value,
+        onChange: setValue
+      }
+    );
+  }
+};
+var SelectVariantMultiple = {
+  args: {
+    id: "select-variant-multiple",
+    title: "Select 变体（多选下拉）",
+    dataSource: basicDataSource,
+    mode: "multiple",
+    valueType: "primitive",
+    fieldNames: { value: "value", label: "label" },
+    variant: "select"
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([1, 3]);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        value,
+        onChange: setValue
+      }
+    );
+  }
+};
+var CardVariants = {
+  render: () => {
+    const [value1, setValue1] = (0, import_react.useState)([]);
+    const [value2, setValue2] = (0, import_react.useState)([]);
+    const [value3, setValue3] = (0, import_react.useState)([]);
+    return /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 32 } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "默认选中态"), /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        id: 1,
+        title: "默认样式",
+        dataSource: basicDataSource.slice(0, 3),
+        mode: "multiple",
+        valueType: "primitive",
+        variant: "card",
+        itemProps: { selectedTypeVariant: "default" },
+        grid: { columns: 3, gutter: 16 },
+        value: value1,
+        onChange: setValue1
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "填充选中态"), /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        id: 2,
+        title: "填充样式",
+        dataSource: basicDataSource.slice(0, 3),
+        mode: "multiple",
+        valueType: "primitive",
+        variant: "card",
+        itemProps: { selectedTypeVariant: "filled" },
+        grid: { columns: 3, gutter: 16 },
+        value: value2,
+        onChange: setValue2
+      }
+    )), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("h3", null, "角标选中态"), /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        id: 3,
+        title: "角标样式",
+        dataSource: basicDataSource.slice(0, 3),
+        mode: "multiple",
+        valueType: "primitive",
+        variant: "card",
+        itemProps: { selectedTypeVariant: "cornered", layout: "vertical" },
+        grid: { columns: 3, gutter: 16 },
+        value: value3,
+        onChange: setValue3
+      }
+    )));
+  }
+};
+var CustomIcon = {
+  args: {
+    id: "custom-icon",
+    title: "自定义选中图标",
+    dataSource: basicDataSource.slice(0, 3),
+    mode: "multiple",
+    valueType: "primitive",
+    variant: "card",
+    item: {
+      variant: "card",
+      selectedIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, { style: { color: "#52c41a", fontSize: 20 } }),
+      selectedTypeVariant: "filled"
+    },
+    grid: {
+      columns: 3,
+      gutter: 16
+    }
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([]);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        value,
+        onChange: setValue
+      }
+    );
+  }
+};
+var CustomRender = {
+  args: {
+    id: "custom-render",
+    title: "自定义渲染",
+    dataSource: [
+      { id: 1, value: 1, label: "选项1", title: "选项1", price: 100, image: "🍕" },
+      { id: 2, value: 2, label: "选项2", title: "选项2", price: 200, image: "🍔" },
+      { id: 3, value: 3, label: "选项3", title: "选项3", price: 300, image: "🍟" }
+    ],
+    mode: "multiple",
+    valueType: "primitive",
+    variant: "card",
+    item: {
+      variant: "card",
+      layout: "vertical",
+      renderContent: (dataSource) => /* @__PURE__ */ import_react.default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 48, marginBottom: 8 } }, dataSource.image), /* @__PURE__ */ import_react.default.createElement("div", { style: { fontWeight: "bold", marginBottom: 4 } }, dataSource.label), /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#666" } }, "¥", dataSource.price))
+    },
+    grid: {
+      columns: 3,
+      gutter: 16
+    }
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)([]);
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        ...args,
+        value,
+        onChange: setValue
+      }
+    );
+  }
+};
+var SelectorGroupBasic = {
+  render: () => {
+    const [values, setValues] = (0, import_react.useState)({});
+    const groupDataSource = [
+      {
+        id: 1,
+        title: "主食",
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "value", label: "label" },
+        dataSource: [
+          { value: 1, label: "米饭", title: "米饭" },
+          { value: 2, label: "面条", title: "面条" },
+          { value: 3, label: "馒头", title: "馒头" }
+        ],
+        ruleConfig: { required: 1 }
+      },
+      {
+        id: 2,
+        title: "配菜",
+        mode: "multiple",
+        valueType: "primitive",
+        fieldNames: { value: "value", label: "label" },
+        dataSource: [
+          { value: 1, label: "青菜", title: "青菜" },
+          { value: 2, label: "豆腐", title: "豆腐" },
+          { value: 3, label: "鸡蛋", title: "鸡蛋" }
+        ],
+        ruleConfig: { min: 1, max: 3 }
+      },
+      {
+        id: 3,
+        title: "饮品",
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "value", label: "label" },
+        dataSource: [
+          { value: 1, label: "可乐", title: "可乐" },
+          { value: 2, label: "橙汁", title: "橙汁" }
+        ]
+      }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_SelectorGroup.default,
+      {
+        dataSource: groupDataSource,
+        value: values,
+        onChange: (v) => {
+          setValues(v);
+          console.log("所有分组值:", v);
+        },
+        tabProps: { visible: true }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 24, padding: 12, background: "#f5f5f5", borderRadius: 4 } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "当前所有分组值："), /* @__PURE__ */ import_react.default.createElement("pre", null, JSON.stringify(values, null, 2))));
+  }
+};
+var SelectorGroupWithLinkage = {
+  render: () => {
+    const [values, setValues] = (0, import_react.useState)({});
+    const groupDataSource = [
+      {
+        id: 1,
+        title: "主菜",
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "value", label: "label" },
+        dataSource: [
+          { value: "burger", label: "汉堡", title: "汉堡" },
+          { value: "pizza", label: "披萨", title: "披萨" }
+        ],
+        ruleConfig: { required: 1 }
+      },
+      {
+        id: 4,
+        title: "汉堡定制",
+        mode: "single",
+        valueType: "object",
+        fieldNames: { value: "value", label: "label" },
+        dataSource: [
+          { value: "double-meat", label: "加倍牛肉", title: "加倍牛肉", ruleConfig: { min: 1, max: 3 } },
+          { value: "extra-cheese", label: "额外芝士", title: "额外芝士" }
+        ],
+        item: {
+          variant: "card",
+          selectedIcon: /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, null)
+        },
+        ruleConfig: { required: 1 }
+      },
+      {
+        id: 5,
+        title: "披萨定制",
+        mode: "multiple",
+        valueType: "object",
+        fieldNames: { value: "value", label: "label" },
+        dataSource: [
+          { value: "extra-cheese", label: "额外芝士", title: "额外芝士", ruleConfig: { min: 1, max: 3 } },
+          { value: "thin-crust", label: "薄底", title: "薄底" },
+          { value: "extra-onion", label: "额外洋葱", title: "额外洋葱" }
+        ],
+        variant: "card",
+        item: {
+          variant: "card",
+          layout: "vertical",
+          selectedTypeVariant: "cornered"
+        },
+        grid: {
+          columns: 3,
+          gutter: 16
+        },
+        ruleConfig: {
+          min: 1,
+          max: 2,
+          required: 1
+        }
+      }
+    ];
+    const linkageRules = [
+      {
+        type: "expr",
+        when: { and: [{ groupId: "1", op: "eq", value: "burger" }] },
+        then: [{ type: "show", groupId: "4" }],
+        stopAfterApply: true
+      },
+      {
+        type: "expr",
+        when: { and: [{ groupId: "1", op: "eq", value: "pizza" }] },
+        then: [{ type: "show", groupId: "5" }],
+        priority: 10
+      }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16, padding: 12, background: "#e6f7ff", borderRadius: 4 } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "联动规则说明："), /* @__PURE__ */ import_react.default.createElement("ul", { style: { margin: "8px 0 0 20px", padding: 0 } }, /* @__PURE__ */ import_react.default.createElement("li", null, '选择汉堡时显示"汉堡定制"分组'), /* @__PURE__ */ import_react.default.createElement("li", null, '选择披萨时显示"披萨定制"分组'))), /* @__PURE__ */ import_react.default.createElement(
+      import_SelectorGroup.default,
+      {
+        dataSource: groupDataSource,
+        linkageRules,
+        allowedValuesPolicy: "strict",
+        value: values,
+        onChange: (v) => {
+          setValues(v);
+          console.log("所有分组值:", v);
+        },
+        tabProps: { visible: true }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginTop: 24, padding: 12, background: "#f5f5f5", borderRadius: 4 } }, /* @__PURE__ */ import_react.default.createElement("strong", null, "当前所有分组值："), /* @__PURE__ */ import_react.default.createElement("pre", null, JSON.stringify(values, null, 2))));
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CardVariants,
+  CustomIcon,
+  CustomRender,
+  Default,
+  Disabled,
+  GridLayout2Columns,
+  GridLayout3Columns,
+  Multiple,
+  MultipleWithQuantity,
+  MutexGroups,
+  SelectVariant,
+  SelectVariantMultiple,
+  SelectorGroupBasic,
+  SelectorGroupWithLinkage,
+  SingleWithQuantity,
+  WithValidation
+});