@pisell/private-materials 6.8.10 → 6.8.12

package/lib/pro/Selector/demo.js

@@ -34,69 +34,822 @@ __export(demo_exports, {
 module.exports = __toCommonJS(demo_exports);
 var import_react = __toESM(require("react"));
 var import_index = __toESM(require("./index"));
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var { Title, Paragraph, Text } = import_antd.Typography;
 var SelectorDemo = () => {
-  const [value, setValue] = (0, import_react.useState)([
+  const [presetDefault1, setPresetDefault1] = (0, import_react.useState)(1);
+  const [presetDefault2, setPresetDefault2] = (0, import_react.useState)(1);
+  const [presetDefault3, setPresetDefault3] = (0, import_react.useState)(1);
+  const [presetDefault4, setPresetDefault4] = (0, import_react.useState)(1);
+  const [presetCard1, setPresetCard1] = (0, import_react.useState)(1);
+  const [presetCard2, setPresetCard2] = (0, import_react.useState)(1);
+  const [presetCard3, setPresetCard3] = (0, import_react.useState)(1);
+  const [presetCard4, setPresetCard4] = (0, import_react.useState)(1);
+  const [presetCard5, setPresetCard5] = (0, import_react.useState)(1);
+  const [presetMedia1, setPresetMedia1] = (0, import_react.useState)([1]);
+  const [presetMedia2, setPresetMedia2] = (0, import_react.useState)([1]);
+  const [comparePreset, setComparePreset] = (0, import_react.useState)(1);
+  const [compareManual, setCompareManual] = (0, import_react.useState)(1);
+  const [productSpec, setProductSpec] = (0, import_react.useState)({
+    value: 2,
+    quantity: 1
+  });
+  const [paymentMethod, setPaymentMethod] = (0, import_react.useState)("alipay");
+  const [serviceOptions, setServiceOptions] = (0, import_react.useState)([1, 2]);
+  const [width, setWidth] = (0, import_react.useState)("660");
+  const simpleDataSource = [
+    { id: 1, title: "选项A" },
+    { id: 2, title: "选项B" },
+    { id: 3, title: "选项C" },
+    { id: 4, title: "选项D" },
+    { id: 5, title: "选项E" },
+    { id: 6, title: "选项F" }
+  ];
+  const cardDataSource = [
+    {
+      id: 1,
+      title: "基础版",
+      price: "¥99/月",
+      desc: "适合个人用户",
+      features: ["5GB 存储", "基础功能"]
+    },
+    {
+      id: 2,
+      title: "专业版",
+      price: "¥299/月",
+      desc: "适合小团队",
+      features: ["50GB 存储", "高级功能"],
+      ruleConfig: { min: 6, max: 5 }
+    },
+    {
+      id: 3,
+      title: "企业版",
+      price: "¥999/月",
+      desc: "适合大型企业",
+      features: ["无限存储", "全部功能"]
+    }
+  ];
+  const mediaDataSource = [
+    {
+      id: 1,
+      label: "风景",
+      value: "landscape",
+      cover: "https://picsum.photos/seed/landscape/300/200"
+    },
+    {
+      id: 2,
+      label: "人物",
+      value: "portrait",
+      cover: "https://picsum.photos/seed/portrait/300/200"
+    },
     {
-      value: 1,
-      quantity: 2
+      id: 3,
+      label: "建筑",
+      value: "architecture",
+      cover: "https://picsum.photos/seed/architecture/300/200"
+    },
+    {
+      id: 4,
+      label: "美食",
+      value: "food",
+      cover: "https://picsum.photos/seed/food/300/200"
     }
-  ]);
-  const [mutexValue, setMutexValue] = (0, import_react.useState)([]);
-  const dataSource = [
-    { id: 1, title: "选项1", price: 100, ruleConfig: { min: 1, max: 3 } },
-    { id: 2, title: "选项2", price: 200, ruleConfig: { min: 1, max: 2 } },
-    { id: 3, title: "选项3", price: 300, ruleConfig: { min: 1, max: 1 } },
-    { id: 4, title: "选项4", price: 400, ruleConfig: { min: 1, max: 2 } },
-    { id: 5, title: "选项5", price: 500, ruleConfig: { min: 1, max: 3 } },
-    { id: 6, title: "选项6", price: 600, ruleConfig: { min: 1, max: 1 } }
   ];
-  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: 20 } }, /* @__PURE__ */ import_react.default.createElement("h2", null, "Selector 组件演示"), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 40 } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "多选模式 - 卡片样式 + 网格布局"), /* @__PURE__ */ import_react.default.createElement(
-    import_index.default,
-    {
-      dataSource,
-      mode: "multiple",
-      valueType: "object",
-      fieldNames: { value: "id", label: "title" },
-      value,
-      onChange: setValue,
-      appearance: {
-        itemVariant: "card",
-        layout: { mode: "grid", columns: 3 },
-        selectedProps: {
-          variant: "filled"
+  const productSpecs = [
+    {
+      id: 1,
+      title: "128GB 黑色",
+      price: "¥5999",
+      stock: 156,
+      ruleConfig: { min: 1, max: 3 }
+    },
+    {
+      id: 2,
+      title: "256GB 白色",
+      price: "¥6999",
+      stock: 89,
+      ruleConfig: { min: 1, max: 5 }
+    },
+    {
+      id: 3,
+      title: "512GB 蓝色",
+      price: "¥7999",
+      stock: 23,
+      ruleConfig: { min: 1, max: 2 }
+    }
+  ];
+  const paymentMethods = [
+    { id: 1, value: "alipay", title: "支付宝", icon: "💳" },
+    { id: 2, value: "wechat", title: "微信支付", icon: "💚" },
+    { id: 3, value: "card", title: "银行卡", icon: "🏦" }
+  ];
+  const serviceOptionsList = [
+    { id: 1, title: "7天无理由退换", price: "免费" },
+    { id: 2, title: "延保服务", price: "+¥199" },
+    { id: 3, title: "碎屏险", price: "+¥299" },
+    { id: 4, title: "上门安装", price: "+¥99" }
+  ];
+  const renderValueDisplay = (value) => /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        marginTop: 12,
+        padding: 12,
+        background: "#f0f2f5",
+        borderRadius: 6,
+        fontSize: 13
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "当前值："),
+    /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: "4px 0 0", fontSize: 12 } }, JSON.stringify(value, null, 2))
+  );
+  const DemoSection = ({ title, description, children }) => /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 48 } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 16 } }, /* @__PURE__ */ import_react.default.createElement(Title, { level: 4, style: { marginBottom: 4 } }, title), /* @__PURE__ */ import_react.default.createElement(Paragraph, { type: "secondary", style: { marginBottom: 0, fontSize: 14 } }, description)), children);
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: width + "px", margin: "0 auto" } }, /* @__PURE__ */ import_react.default.createElement("input", { type: "text", value: width, onChange: (e) => setWidth(e.target.value) }), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 48 } }, /* @__PURE__ */ import_react.default.createElement(Title, { level: 1 }, "Selector 组件 - Preset 能力演示"), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 16, color: "#666" } }, "通过 ", /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "preset"), " ", "属性快速配置选择器样式，无需手动设置复杂的 grid 和 indicator 配置。", /* @__PURE__ */ import_react.default.createElement("br", null), "每个 variant 支持多种预设布局，让低代码配置更加简单直观。")), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
+    Title,
+    {
+      level: 2,
+      style: { borderLeft: "4px solid #1890ff", paddingLeft: 16 }
+    },
+    "一、Preset 快速入门"
+  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "使用 ", /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "preset"), " 属性即可快速应用预设样式，无需关心底层的 grid 布局配置。 只需指定 ", /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "variant"), " 值（'1' | '2' | '3' | '4' | '5'），系统自动应用对应的布局和样式。"), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "✨ 快速开始 - 一行配置搞定",
+      description: "使用 preset={{ variant: '1' }} 即可应用预设布局，无需任何 grid 配置"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: simpleDataSource,
+        mode: "multiple",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: presetDefault1,
+        onChange: setPresetDefault1,
+        variant: "select",
+        preset: { variant: "1" }
+      }
+    ),
+    renderValueDisplay(presetDefault1),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          marginTop: 12,
+          padding: 12,
+          background: "#e6f7ff",
+          borderRadius: 6
         }
+      },
+      /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "💡 代码示例："),
+      /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: "8px 0 0", fontSize: 12, color: "#1890ff" } }, `<Selector
+  preset={{ variant: '1' }}  // 仅需这一行配置
+  variant="default"
+  // ... 其他基础配置
+/>`)
+    )
+  )), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
+    Title,
+    {
+      level: 2,
+      style: { borderLeft: "4px solid #52c41a", paddingLeft: 16 }
+    },
+    "二、Default Variant - 预设样式展示"
+  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "Default 变体支持 4 种预设布局（variant: '1' | '2' | '3' | '4'）， 适用于常规的选项选择场景。"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 32 } }, /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "Preset 1 - 单列布局",
+      description: "preset={{ variant: '1' }} → 100% 宽度，垂直排列（适合长文本选项）"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: simpleDataSource,
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: presetDefault1,
+        onChange: setPresetDefault1,
+        variant: "default",
+        preset: { variant: "1" }
       }
-    }
-  )), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 40 } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "当前选择值："), /* @__PURE__ */ import_react.default.createElement("pre", null, JSON.stringify(value, null, 2))), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 40 } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "组内互斥示例（同组仅可选择一个）"), /* @__PURE__ */ import_react.default.createElement("p", { style: { color: "#667085", marginBottom: 8 } }, "规则：互斥组1（1、2、3 互斥），互斥组2（4、5 互斥）。当选择同组的一个选项时，会自动取消该组内其它已选项。"), /* @__PURE__ */ import_react.default.createElement(
-    import_index.default,
-    {
-      dataSource: [
-        { id: 1, title: "选项1" },
-        { id: 2, title: "选项2" },
-        { id: 3, title: "选项3" },
-        { id: 4, title: "选项4" },
-        { id: 5, title: "选项5" },
-        { id: 6, title: "选项6" }
-      ],
-      mode: "multiple",
-      valueType: "primitive",
-      fieldNames: { value: "id", label: "title" },
-      value: mutexValue,
-      onChange: setMutexValue,
-      ruleConfig: {
-        mutex: [
-          [1, 2, 3],
-          [4, 5]
-        ]
+    ),
+    renderValueDisplay(presetDefault1)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "Preset 2 - 自适应宽度",
+      description: "preset={{ variant: '2' }} → Flex 布局，选项宽度自动适应内容"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: simpleDataSource,
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: presetDefault2,
+        onChange: setPresetDefault2,
+        variant: "default",
+        preset: { variant: "2" }
+      }
+    ),
+    renderValueDisplay(presetDefault2)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "Preset 3 - 单列布局（变体）",
+      description: "preset={{ variant: '3' }} → 100% 宽度，另一种单列布局样式"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: simpleDataSource,
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: presetDefault3,
+        onChange: setPresetDefault3,
+        variant: "default",
+        preset: { variant: "3" },
+        renderItem: (option) => {
+          return /* @__PURE__ */ import_react.default.createElement(import_index.default.Item, { ...option }, /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: {
+                height: 60,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "#dfdfdf"
+              }
+            },
+            "container"
+          ));
+        }
+      }
+    ),
+    renderValueDisplay(presetDefault3)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "Preset 4 - 自适应宽度（变体）",
+      description: "preset={{ variant: '4' }} → 另一种 Flex 自适应布局"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: simpleDataSource,
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: presetDefault4,
+        onChange: setPresetDefault4,
+        variant: "default",
+        preset: { variant: "4" },
+        renderItem: (option) => {
+          return /* @__PURE__ */ import_react.default.createElement(import_index.default.Item, { ...option }, /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: {
+                height: 60,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                backgroundColor: "#dfdfdf"
+              }
+            },
+            "container".repeat(1 + Math.floor(Math.random() * 10))
+          ));
+        }
+      }
+    ),
+    renderValueDisplay(presetDefault4)
+  ))), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
+    Title,
+    {
+      level: 2,
+      style: { borderLeft: "4px solid #fa8c16", paddingLeft: 16 }
+    },
+    "三、Card Variant - 预设样式展示"
+  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "Card 变体支持 5 种预设布局（variant: '1' | '2' | '3' | '4' | '5'）， 适用于卡片式、套餐式的选项展示。"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 32 } }, /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "Preset 1 - 固定宽度网格（209px）",
+      description: "preset={{ variant: '1' }} → CSS Grid 布局，每列固定 209px"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: cardDataSource,
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: presetCard1,
+        onChange: setPresetCard1,
+        variant: "card",
+        preset: { variant: "1" }
+      }
+    ),
+    renderValueDisplay(presetCard1)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "Preset 2 - 固定宽度网格 + Filled 指示器",
+      description: "preset={{ variant: '2' }} → 209px Grid 布局，自动应用 filled 风格的 indicator"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: cardDataSource,
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: presetCard2,
+        onChange: setPresetCard2,
+        variant: "card",
+        preset: { variant: "2" }
+      }
+    ),
+    renderValueDisplay(presetCard2)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "Preset 3 - 单列卡片布局",
+      description: "preset={{ variant: '3' }} → 100% 宽度，适合横向卡片"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: cardDataSource,
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: presetCard3,
+        onChange: setPresetCard3,
+        variant: "card",
+        preset: { variant: "2" },
+        itemProps: {
+          layout: "vertical",
+          indicatorPosition: "right",
+          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 16, fontWeight: 600 } }, option.dataSource.title), /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: {
+                color: "#ff4d4f",
+                fontSize: 18,
+                margin: "4px 0"
+              }
+            },
+            option.dataSource.price
+          ), /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#999", fontSize: 13 } }, option.dataSource.desc))
+        }
+      }
+    ),
+    renderValueDisplay(presetCard3)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "Preset 4 - 大尺寸网格（325px）",
+      description: "preset={{ variant: '4' }} → CSS Grid 布局，每列固定 325px（适合内容丰富的卡片）"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: cardDataSource,
+        mode: "single",
+        valueType: "object",
+        fieldNames: { value: "id", label: "title" },
+        value: presetCard4,
+        onChange: setPresetCard4,
+        variant: "card",
+        preset: { variant: "4" },
+        itemProps: {
+          renderContent: (option) => {
+            var _a;
+            return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                style: {
+                  fontSize: 20,
+                  fontWeight: 600,
+                  marginBottom: 12
+                }
+              },
+              option.dataSource.title
+            ), /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                style: {
+                  color: "#ff4d4f",
+                  fontSize: 24,
+                  marginBottom: 12
+                }
+              },
+              option.dataSource.price
+            ), /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                style: { color: "#666", fontSize: 14, marginBottom: 16 }
+              },
+              option.dataSource.desc
+            ), /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                style: { fontSize: 13, color: "#333", lineHeight: 1.8 }
+              },
+              (_a = option.dataSource.features) == null ? void 0 : _a.map(
+                (f, i) => /* @__PURE__ */ import_react.default.createElement("div", { key: i }, "✓ ", f)
+              )
+            ));
+          }
+        }
+      }
+    ),
+    renderValueDisplay(presetCard4)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "Preset 5 - 单列大卡片",
+      description: "preset={{ variant: '5' }} → 100% 宽度，适合详细信息展示"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: cardDataSource,
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: presetCard5,
+        onChange: setPresetCard5,
+        variant: "card",
+        preset: { variant: "5" },
+        itemProps: {
+          layout: "horizontal",
+          indicatorPosition: "right",
+          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: { display: "flex", alignItems: "center", gap: 16 }
+            },
+            /* @__PURE__ */ import_react.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                style: {
+                  fontSize: 18,
+                  fontWeight: 600,
+                  marginBottom: 4
+                }
+              },
+              option.dataSource.title
+            ), /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#999", fontSize: 14 } }, option.dataSource.desc)),
+            /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                style: {
+                  color: "#ff4d4f",
+                  fontSize: 24,
+                  fontWeight: 600
+                }
+              },
+              option.dataSource.price
+            )
+          ))
+        }
+      }
+    ),
+    renderValueDisplay(presetCard5)
+  ))), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
+    Title,
+    {
+      level: 2,
+      style: { borderLeft: "4px solid #722ed1", paddingLeft: 16 }
+    },
+    "四、Media Variant - 预设样式展示"
+  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "Media 变体支持 2 种预设布局（variant: '1' | '2'）， 适用于图片、视频等媒体内容的选择场景。自动应用 filled 风格的指示器。"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 32 } }, /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "Preset 1 - 自适应媒体网格",
+      description: "preset={{ variant: '1' }} → Flex 布局，自动应用 filled 指示器"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: mediaDataSource,
+        mode: "multiple",
+        valueType: "primitive",
+        fieldNames: { value: "value", label: "label", cover: "cover" },
+        value: presetMedia1,
+        onChange: setPresetMedia1,
+        variant: "media",
+        preset: { variant: "1" }
+      }
+    ),
+    renderValueDisplay(presetMedia1)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "Preset 2 - 自适应媒体网格（变体）",
+      description: "preset={{ variant: '2' }} → 另一种 Flex 媒体布局"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: mediaDataSource,
+        mode: "single",
+        valueType: "object",
+        fieldNames: { value: "value", label: "label", cover: "cover" },
+        value: presetMedia2,
+        onChange: setPresetMedia2,
+        variant: "media",
+        preset: { variant: "2" }
+      }
+    ),
+    renderValueDisplay(presetMedia2)
+  ))), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
+    Title,
+    {
+      level: 2,
+      style: { borderLeft: "4px solid #eb2f96", paddingLeft: 16 }
+    },
+    "五、Preset vs 手动配置"
+  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "对比使用 preset 和手动配置 grid 的区别，展示 preset 的便捷性。"), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "使用 Preset - 简洁配置",
+      description: "只需一行 preset 配置，自动应用布局和样式"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: cardDataSource,
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: comparePreset,
+        onChange: setComparePreset,
+        variant: "card",
+        preset: { variant: "1" },
+        itemProps: {
+          layout: "vertical",
+          indicatorPosition: "topRight",
+          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 16, fontWeight: 600 } }, option.dataSource.title), /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: { color: "#ff4d4f", fontSize: 18, margin: "8px 0" }
+            },
+            option.dataSource.price
+          ))
+        }
+      }
+    ),
+    renderValueDisplay(comparePreset),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          marginTop: 12,
+          padding: 12,
+          background: "#f6ffed",
+          borderRadius: 6
+        }
       },
-      appearance: {
-        itemVariant: "card",
-        layout: { mode: "grid", columns: 3 },
-        selectedProps: {
-          variant: "filled"
+      /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, style: { color: "#52c41a" } }, "✓ 使用 Preset 的代码："),
+      /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: "8px 0 0", fontSize: 12 } }, `<Selector
+  preset={{ variant: '1' }}  // ✨ 仅需这一行
+  variant="card"
+  // ... 其他配置
+/>`)
+    )
+  ), /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, null), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "手动配置 Grid - 复杂配置",
+      description: "需要手动配置 grid 的 layoutType、baseWidth 等多个参数"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        dataSource: cardDataSource,
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: compareManual,
+        onChange: setCompareManual,
+        variant: "card",
+        layout: {
+          containerStyle: {
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fit, minmax(min(209px, 100%), 1fr))"
+          }
+        },
+        itemProps: {
+          layout: "vertical",
+          indicatorPosition: "topRight",
+          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 16, fontWeight: 600 } }, option.dataSource.title), /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: { color: "#ff4d4f", fontSize: 18, margin: "8px 0" }
+            },
+            option.dataSource.price
+          ))
         }
       }
-    }
-  )), /* @__PURE__ */ import_react.default.createElement("div", { style: { marginBottom: 40 } }, /* @__PURE__ */ import_react.default.createElement("h3", null, "互斥组当前选择值："), /* @__PURE__ */ import_react.default.createElement("pre", null, JSON.stringify(mutexValue, null, 2))));
+    ),
+    renderValueDisplay(compareManual),
+    /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        style: {
+          marginTop: 12,
+          padding: 12,
+          background: "#fff7e6",
+          borderRadius: 6
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, style: { color: "#fa8c16" } }, "⚠ 手动配置的代码："),
+      /* @__PURE__ */ import_react.default.createElement("pre", { style: { margin: "8px 0 0", fontSize: 12 } }, `<Selector
+  grid={{                    // 需要详细配置
+    layoutType: 'grid',
+    baseWidth: '209px',
+    wrap: true,
+  }}
+  variant="card"
+  // ... 其他配置
+/>`)
+    )
+  )), /* @__PURE__ */ import_react.default.createElement("section", { style: { marginBottom: 80 } }, /* @__PURE__ */ import_react.default.createElement(
+    Title,
+    {
+      level: 2,
+      style: { borderLeft: "4px solid #13c2c2", paddingLeft: 16 }
+    },
+    "六、实际应用场景"
+  ), /* @__PURE__ */ import_react.default.createElement(Paragraph, { style: { fontSize: 15, marginTop: 16, marginBottom: 32 } }, "展示 Preset 在真实业务场景中的应用，如电商选规格、支付方式选择等。"), /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 48 } }, /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "场景1：电商商品规格选择",
+      description: "使用 preset={{ variant: '1' }} + card variant，配合数量选择器"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        title: "选择商品规格",
+        dataSource: productSpecs,
+        mode: "single",
+        valueType: "object",
+        fieldNames: { value: "id", label: "title" },
+        value: productSpec,
+        onChange: setProductSpec,
+        variant: "card",
+        preset: { variant: "1" },
+        itemProps: {
+          layout: "vertical",
+          indicatorPosition: "topRight",
+          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: { fontSize: 16, fontWeight: 600, marginBottom: 6 }
+            },
+            option.dataSource.title
+          ), /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: {
+                color: "#ff4d4f",
+                fontSize: 20,
+                fontWeight: 600,
+                marginBottom: 6
+              }
+            },
+            option.dataSource.price
+          ), /* @__PURE__ */ import_react.default.createElement("div", { style: { color: "#999", fontSize: 13 } }, "库存：", option.dataSource.stock, " 件"))
+        },
+        titleProps: {
+          visible: true,
+          icon: {
+            visible: true,
+            icon: /* @__PURE__ */ import_react.default.createElement(import_icons.StarOutlined, { style: { color: "#faad14" } })
+          }
+        }
+      }
+    ),
+    renderValueDisplay(productSpec)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "场景2：支付方式选择",
+      description: "使用 preset={{ variant: '3' }} + card variant，单列横向布局"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        title: "选择支付方式",
+        dataSource: paymentMethods,
+        mode: "single",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: paymentMethod,
+        onChange: setPaymentMethod,
+        variant: "card",
+        preset: { variant: "3" },
+        itemProps: {
+          layout: "horizontal",
+          indicatorPosition: "right",
+          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                flex: 1
+              }
+            },
+            /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 32 } }, option.dataSource.icon),
+            /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 16, fontWeight: 500 } }, option.dataSource.title)
+          )
+        }
+      }
+    ),
+    renderValueDisplay(paymentMethod)
+  ), /* @__PURE__ */ import_react.default.createElement(
+    DemoSection,
+    {
+      title: "场景3：增值服务选择",
+      description: "使用 preset={{ variant: '3' }} + 多选模式，选择多个增值服务"
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_index.default,
+      {
+        title: "增值服务（可选）",
+        dataSource: serviceOptionsList,
+        mode: "multiple",
+        valueType: "primitive",
+        fieldNames: { value: "id", label: "title" },
+        value: serviceOptions,
+        onChange: setServiceOptions,
+        variant: "card",
+        preset: { variant: "3" },
+        ruleConfig: {
+          max: 3
+        },
+        itemProps: {
+          layout: "horizontal",
+          indicatorPosition: "left",
+          renderContent: (option) => /* @__PURE__ */ import_react.default.createElement(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                flex: 1
+              }
+            },
+            /* @__PURE__ */ import_react.default.createElement("div", { style: { fontSize: 15 } }, option.dataSource.title),
+            /* @__PURE__ */ import_react.default.createElement(
+              "div",
+              {
+                style: {
+                  color: "#ff4d4f",
+                  fontSize: 15,
+                  fontWeight: 600
+                }
+              },
+              option.dataSource.price
+            )
+          )
+        },
+        titleProps: {
+          visible: true,
+          tip: {
+            visible: true,
+            text: "最多选择3项"
+          }
+        }
+      }
+    ),
+    renderValueDisplay(serviceOptions)
+  ))), /* @__PURE__ */ import_react.default.createElement("section", null, /* @__PURE__ */ import_react.default.createElement(
+    Title,
+    {
+      level: 2,
+      style: { borderLeft: "4px solid #595959", paddingLeft: 16 }
+    },
+    "七、Preset 使用总结"
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        marginTop: 24,
+        padding: 24,
+        background: "#fafafa",
+        borderRadius: 8
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 16 } }, /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, style: { fontSize: 15 } }, "🎯 Preset 的优势："), /* @__PURE__ */ import_react.default.createElement("ul", { style: { marginTop: 8, paddingLeft: 20 } }, /* @__PURE__ */ import_react.default.createElement("li", null, "✓ ", /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "简化配置"), "：无需手动设置复杂的 grid 布局参数"), /* @__PURE__ */ import_react.default.createElement("li", null, "✓ ", /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "快速应用"), "：一行代码即可应用预设样式"), /* @__PURE__ */ import_react.default.createElement("li", null, "✓ ", /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "响应式布局"), "：预设已优化好响应式效果"), /* @__PURE__ */ import_react.default.createElement("li", null, "✓ ", /* @__PURE__ */ import_react.default.createElement(Text, { strong: true }, "低代码友好"), "：适合在低代码平台中快速配置"))), /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: "8px 0" } }), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, style: { fontSize: 15 } }, "📋 支持的 Preset Variant："), /* @__PURE__ */ import_react.default.createElement("ul", { style: { marginTop: 8, paddingLeft: 20 } }, /* @__PURE__ */ import_react.default.createElement("li", null, /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "default"), ": 支持 variant '1', '2', '3', '4'"), /* @__PURE__ */ import_react.default.createElement("li", null, /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "card"), ": 支持 variant '1', '2', '3', '4', '5'"), /* @__PURE__ */ import_react.default.createElement("li", null, /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "media"), ": 支持 variant '1', '2'（自动应用 filled 指示器）"), /* @__PURE__ */ import_react.default.createElement("li", null, /* @__PURE__ */ import_react.default.createElement(Text, { code: true }, "select"), ": 仅支持 variant '1'（下拉选择器）"))), /* @__PURE__ */ import_react.default.createElement(import_antd.Divider, { style: { margin: "8px 0" } }), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(Text, { strong: true, style: { fontSize: 15 } }, "🔧 高级用法："), /* @__PURE__ */ import_react.default.createElement("ul", { style: { marginTop: 8, paddingLeft: 20 } }, /* @__PURE__ */ import_react.default.createElement("li", null, "• Preset 和手动 grid 配置可共存，手动配置优先级更高"), /* @__PURE__ */ import_react.default.createElement("li", null, "• indicatorProps 会根据 preset 自动调整（如 media/card-2 自动应用 filled）"), /* @__PURE__ */ import_react.default.createElement("li", null, "• 可通过 itemProps 进一步定制选项内容的渲染"))))
+  )));
 };
 var demo_default = SelectorDemo;