@pisell/private-materials 3.4.58 → 3.4.59

package/es/pro/Selector/demo.js

@@ -0,0 +1,1088 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useState } from 'react';
+import Selector from "./index";
+import { StarOutlined } from '@ant-design/icons';
+import { Divider, Typography } from 'antd';
+var Title = Typography.Title,
+  Paragraph = Typography.Paragraph,
+  Text = Typography.Text;
+var SelectorDemo = function SelectorDemo() {
+  // Preset 演示状态
+  var _useState = useState(1),
+    _useState2 = _slicedToArray(_useState, 2),
+    presetDefault1 = _useState2[0],
+    setPresetDefault1 = _useState2[1];
+  var _useState3 = useState(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    presetDefault2 = _useState4[0],
+    setPresetDefault2 = _useState4[1];
+  var _useState5 = useState(1),
+    _useState6 = _slicedToArray(_useState5, 2),
+    presetDefault3 = _useState6[0],
+    setPresetDefault3 = _useState6[1];
+  var _useState7 = useState(1),
+    _useState8 = _slicedToArray(_useState7, 2),
+    presetDefault4 = _useState8[0],
+    setPresetDefault4 = _useState8[1];
+  var _useState9 = useState(1),
+    _useState10 = _slicedToArray(_useState9, 2),
+    presetCard1 = _useState10[0],
+    setPresetCard1 = _useState10[1];
+  var _useState11 = useState(1),
+    _useState12 = _slicedToArray(_useState11, 2),
+    presetCard2 = _useState12[0],
+    setPresetCard2 = _useState12[1];
+  var _useState13 = useState(1),
+    _useState14 = _slicedToArray(_useState13, 2),
+    presetCard3 = _useState14[0],
+    setPresetCard3 = _useState14[1];
+  var _useState15 = useState(1),
+    _useState16 = _slicedToArray(_useState15, 2),
+    presetCard4 = _useState16[0],
+    setPresetCard4 = _useState16[1];
+  var _useState17 = useState(1),
+    _useState18 = _slicedToArray(_useState17, 2),
+    presetCard5 = _useState18[0],
+    setPresetCard5 = _useState18[1];
+  var _useState19 = useState([1]),
+    _useState20 = _slicedToArray(_useState19, 2),
+    presetMedia1 = _useState20[0],
+    setPresetMedia1 = _useState20[1];
+  var _useState21 = useState([1]),
+    _useState22 = _slicedToArray(_useState21, 2),
+    presetMedia2 = _useState22[0],
+    setPresetMedia2 = _useState22[1];
+
+  // 对比示例状态
+  var _useState23 = useState(1),
+    _useState24 = _slicedToArray(_useState23, 2),
+    comparePreset = _useState24[0],
+    setComparePreset = _useState24[1];
+  var _useState25 = useState(1),
+    _useState26 = _slicedToArray(_useState25, 2),
+    compareManual = _useState26[0],
+    setCompareManual = _useState26[1];
+
+  // 实际应用场景状态
+  var _useState27 = useState({
+      value: 2,
+      quantity: 1
+    }),
+    _useState28 = _slicedToArray(_useState27, 2),
+    productSpec = _useState28[0],
+    setProductSpec = _useState28[1];
+  var _useState29 = useState('alipay'),
+    _useState30 = _slicedToArray(_useState29, 2),
+    paymentMethod = _useState30[0],
+    setPaymentMethod = _useState30[1];
+  var _useState31 = useState([1, 2]),
+    _useState32 = _slicedToArray(_useState31, 2),
+    serviceOptions = _useState32[0],
+    setServiceOptions = _useState32[1];
+  var _useState33 = useState('660'),
+    _useState34 = _slicedToArray(_useState33, 2),
+    width = _useState34[0],
+    setWidth = _useState34[1];
+
+  // 数据源
+  var 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'
+  }];
+  var 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: ['无限存储', '全部功能']
+  }];
+  var 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'
+  }, {
+    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'
+  }];
+  var 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
+    }
+  }];
+  var paymentMethods = [{
+    id: 1,
+    value: 'alipay',
+    title: '支付宝',
+    icon: '💳'
+  }, {
+    id: 2,
+    value: 'wechat',
+    title: '微信支付',
+    icon: '💚'
+  }, {
+    id: 3,
+    value: 'card',
+    title: '银行卡',
+    icon: '🏦'
+  }];
+  var serviceOptionsList = [{
+    id: 1,
+    title: '7天无理由退换',
+    price: '免费'
+  }, {
+    id: 2,
+    title: '延保服务',
+    price: '+¥199'
+  }, {
+    id: 3,
+    title: '碎屏险',
+    price: '+¥299'
+  }, {
+    id: 4,
+    title: '上门安装',
+    price: '+¥99'
+  }];
+  var renderValueDisplay = function renderValueDisplay(value) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginTop: 12,
+        padding: 12,
+        background: '#f0f2f5',
+        borderRadius: 6,
+        fontSize: 13
+      }
+    }, /*#__PURE__*/React.createElement(Text, {
+      strong: true
+    }, "\u5F53\u524D\u503C\uFF1A"), /*#__PURE__*/React.createElement("pre", {
+      style: {
+        margin: '4px 0 0',
+        fontSize: 12
+      }
+    }, JSON.stringify(value, null, 2)));
+  };
+  var DemoSection = function DemoSection(_ref) {
+    var title = _ref.title,
+      description = _ref.description,
+      children = _ref.children;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 48
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: 16
+      }
+    }, /*#__PURE__*/React.createElement(Title, {
+      level: 4,
+      style: {
+        marginBottom: 4
+      }
+    }, title), /*#__PURE__*/React.createElement(Paragraph, {
+      type: "secondary",
+      style: {
+        marginBottom: 0,
+        fontSize: 14
+      }
+    }, description)), children);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: width + 'px',
+      margin: '0 auto'
+    }
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: width,
+    onChange: function onChange(e) {
+      return setWidth(e.target.value);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginBottom: 48
+    }
+  }, /*#__PURE__*/React.createElement(Title, {
+    level: 1
+  }, "Selector \u7EC4\u4EF6 - Preset \u80FD\u529B\u6F14\u793A"), /*#__PURE__*/React.createElement(Paragraph, {
+    style: {
+      fontSize: 16,
+      color: '#666'
+    }
+  }, "\u901A\u8FC7 ", /*#__PURE__*/React.createElement(Text, {
+    code: true
+  }, "preset"), ' ', "\u5C5E\u6027\u5FEB\u901F\u914D\u7F6E\u9009\u62E9\u5668\u6837\u5F0F\uFF0C\u65E0\u9700\u624B\u52A8\u8BBE\u7F6E\u590D\u6742\u7684 grid \u548C indicator \u914D\u7F6E\u3002", /*#__PURE__*/React.createElement("br", null), "\u6BCF\u4E2A variant \u652F\u6301\u591A\u79CD\u9884\u8BBE\u5E03\u5C40\uFF0C\u8BA9\u4F4E\u4EE3\u7801\u914D\u7F6E\u66F4\u52A0\u7B80\u5355\u76F4\u89C2\u3002")), /*#__PURE__*/React.createElement("section", {
+    style: {
+      marginBottom: 80
+    }
+  }, /*#__PURE__*/React.createElement(Title, {
+    level: 2,
+    style: {
+      borderLeft: '4px solid #1890ff',
+      paddingLeft: 16
+    }
+  }, "\u4E00\u3001Preset \u5FEB\u901F\u5165\u95E8"), /*#__PURE__*/React.createElement(Paragraph, {
+    style: {
+      fontSize: 15,
+      marginTop: 16,
+      marginBottom: 32
+    }
+  }, "\u4F7F\u7528 ", /*#__PURE__*/React.createElement(Text, {
+    code: true
+  }, "preset"), " \u5C5E\u6027\u5373\u53EF\u5FEB\u901F\u5E94\u7528\u9884\u8BBE\u6837\u5F0F\uFF0C\u65E0\u9700\u5173\u5FC3\u5E95\u5C42\u7684 grid \u5E03\u5C40\u914D\u7F6E\u3002 \u53EA\u9700\u6307\u5B9A ", /*#__PURE__*/React.createElement(Text, {
+    code: true
+  }, "variant"), " \u503C\uFF08'1' | '2' | '3' | '4' | '5'\uFF09\uFF0C\u7CFB\u7EDF\u81EA\u52A8\u5E94\u7528\u5BF9\u5E94\u7684\u5E03\u5C40\u548C\u6837\u5F0F\u3002"), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "\u2728 \u5FEB\u901F\u5F00\u59CB - \u4E00\u884C\u914D\u7F6E\u641E\u5B9A",
+    description: "\u4F7F\u7528 preset={{ variant: '1' }} \u5373\u53EF\u5E94\u7528\u9884\u8BBE\u5E03\u5C40\uFF0C\u65E0\u9700\u4EFB\u4F55 grid \u914D\u7F6E"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    dataSource: simpleDataSource,
+    mode: "multiple",
+    valueType: "primitive",
+    fieldNames: {
+      value: 'id',
+      label: 'title'
+    },
+    value: presetDefault1,
+    onChange: setPresetDefault1,
+    variant: "select",
+    preset: {
+      variant: '1'
+    }
+  }), renderValueDisplay(presetDefault1), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 12,
+      padding: 12,
+      background: '#e6f7ff',
+      borderRadius: 6
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    strong: true
+  }, "\uD83D\uDCA1 \u4EE3\u7801\u793A\u4F8B\uFF1A"), /*#__PURE__*/React.createElement("pre", {
+    style: {
+      margin: '8px 0 0',
+      fontSize: 12,
+      color: '#1890ff'
+    }
+  }, "<Selector\n  preset={{ variant: '1' }}  // \u4EC5\u9700\u8FD9\u4E00\u884C\u914D\u7F6E\n  variant=\"default\"\n  // ... \u5176\u4ED6\u57FA\u7840\u914D\u7F6E\n/>")))), /*#__PURE__*/React.createElement("section", {
+    style: {
+      marginBottom: 80
+    }
+  }, /*#__PURE__*/React.createElement(Title, {
+    level: 2,
+    style: {
+      borderLeft: '4px solid #52c41a',
+      paddingLeft: 16
+    }
+  }, "\u4E8C\u3001Default Variant - \u9884\u8BBE\u6837\u5F0F\u5C55\u793A"), /*#__PURE__*/React.createElement(Paragraph, {
+    style: {
+      fontSize: 15,
+      marginTop: 16,
+      marginBottom: 32
+    }
+  }, "Default \u53D8\u4F53\u652F\u6301 4 \u79CD\u9884\u8BBE\u5E03\u5C40\uFF08variant: '1' | '2' | '3' | '4'\uFF09\uFF0C \u9002\u7528\u4E8E\u5E38\u89C4\u7684\u9009\u9879\u9009\u62E9\u573A\u666F\u3002"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 32
+    }
+  }, /*#__PURE__*/React.createElement(DemoSection, {
+    title: "Preset 1 - \u5355\u5217\u5E03\u5C40",
+    description: "preset={{ variant: '1' }} \u2192 100% \u5BBD\u5EA6\uFF0C\u5782\u76F4\u6392\u5217\uFF08\u9002\u5408\u957F\u6587\u672C\u9009\u9879\uFF09"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    dataSource: simpleDataSource,
+    mode: "single",
+    valueType: "primitive",
+    fieldNames: {
+      value: 'id',
+      label: 'title'
+    },
+    value: presetDefault1,
+    onChange: setPresetDefault1,
+    variant: "default",
+    preset: {
+      variant: '1'
+    }
+  }), renderValueDisplay(presetDefault1)), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "Preset 2 - \u81EA\u9002\u5E94\u5BBD\u5EA6",
+    description: "preset={{ variant: '2' }} \u2192 Flex \u5E03\u5C40\uFF0C\u9009\u9879\u5BBD\u5EA6\u81EA\u52A8\u9002\u5E94\u5185\u5BB9"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    dataSource: simpleDataSource,
+    mode: "single",
+    valueType: "primitive",
+    fieldNames: {
+      value: 'id',
+      label: 'title'
+    },
+    value: presetDefault2,
+    onChange: setPresetDefault2,
+    variant: "default",
+    preset: {
+      variant: '2'
+    }
+  }), renderValueDisplay(presetDefault2)), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "Preset 3 - \u5355\u5217\u5E03\u5C40\uFF08\u53D8\u4F53\uFF09",
+    description: "preset={{ variant: '3' }} \u2192 100% \u5BBD\u5EA6\uFF0C\u53E6\u4E00\u79CD\u5355\u5217\u5E03\u5C40\u6837\u5F0F"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    dataSource: simpleDataSource,
+    mode: "single",
+    valueType: "primitive",
+    fieldNames: {
+      value: 'id',
+      label: 'title'
+    },
+    value: presetDefault3,
+    onChange: setPresetDefault3,
+    variant: "default",
+    preset: {
+      variant: '3'
+    },
+    renderItem: function renderItem(option) {
+      return /*#__PURE__*/React.createElement(Selector.Item, option, /*#__PURE__*/React.createElement("div", {
+        style: {
+          height: 60,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#dfdfdf'
+        }
+      }, "container"));
+    }
+  }), renderValueDisplay(presetDefault3)), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "Preset 4 - \u81EA\u9002\u5E94\u5BBD\u5EA6\uFF08\u53D8\u4F53\uFF09",
+    description: "preset={{ variant: '4' }} \u2192 \u53E6\u4E00\u79CD Flex \u81EA\u9002\u5E94\u5E03\u5C40"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    dataSource: simpleDataSource,
+    mode: "single",
+    valueType: "primitive",
+    fieldNames: {
+      value: 'id',
+      label: 'title'
+    },
+    value: presetDefault4,
+    onChange: setPresetDefault4,
+    variant: "default",
+    preset: {
+      variant: '4'
+    },
+    renderItem: function renderItem(option) {
+      return /*#__PURE__*/React.createElement(Selector.Item, option, /*#__PURE__*/React.createElement("div", {
+        style: {
+          height: 60,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: '#dfdfdf'
+        }
+      }, 'container'.repeat(1 + Math.floor(Math.random() * 10))));
+    }
+  }), renderValueDisplay(presetDefault4)))), /*#__PURE__*/React.createElement("section", {
+    style: {
+      marginBottom: 80
+    }
+  }, /*#__PURE__*/React.createElement(Title, {
+    level: 2,
+    style: {
+      borderLeft: '4px solid #fa8c16',
+      paddingLeft: 16
+    }
+  }, "\u4E09\u3001Card Variant - \u9884\u8BBE\u6837\u5F0F\u5C55\u793A"), /*#__PURE__*/React.createElement(Paragraph, {
+    style: {
+      fontSize: 15,
+      marginTop: 16,
+      marginBottom: 32
+    }
+  }, "Card \u53D8\u4F53\u652F\u6301 5 \u79CD\u9884\u8BBE\u5E03\u5C40\uFF08variant: '1' | '2' | '3' | '4' | '5'\uFF09\uFF0C \u9002\u7528\u4E8E\u5361\u7247\u5F0F\u3001\u5957\u9910\u5F0F\u7684\u9009\u9879\u5C55\u793A\u3002"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 32
+    }
+  }, /*#__PURE__*/React.createElement(DemoSection, {
+    title: "Preset 1 - \u56FA\u5B9A\u5BBD\u5EA6\u7F51\u683C\uFF08209px\uFF09",
+    description: "preset={{ variant: '1' }} \u2192 CSS Grid \u5E03\u5C40\uFF0C\u6BCF\u5217\u56FA\u5B9A 209px"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    dataSource: cardDataSource,
+    mode: "single",
+    valueType: "primitive",
+    fieldNames: {
+      value: 'id',
+      label: 'title'
+    },
+    value: presetCard1,
+    onChange: setPresetCard1,
+    variant: "card",
+    preset: {
+      variant: '1'
+    }
+  }), renderValueDisplay(presetCard1)), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "Preset 2 - \u56FA\u5B9A\u5BBD\u5EA6\u7F51\u683C + Filled \u6307\u793A\u5668",
+    description: "preset={{ variant: '2' }} \u2192 209px Grid \u5E03\u5C40\uFF0C\u81EA\u52A8\u5E94\u7528 filled \u98CE\u683C\u7684 indicator"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    dataSource: cardDataSource,
+    mode: "single",
+    valueType: "primitive",
+    fieldNames: {
+      value: 'id',
+      label: 'title'
+    },
+    value: presetCard2,
+    onChange: setPresetCard2,
+    variant: "card",
+    preset: {
+      variant: '2'
+    }
+    // itemProps={{
+    //   renderContent: (option) => (
+    //     <div>
+    //       <div style={{ fontSize: 16, fontWeight: 600, textAlign: 'center' }}>
+    //         {option.dataSource.title}
+    //       </div>
+    //     </div>
+    //   ),
+    // }}
+  }), renderValueDisplay(presetCard2)), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "Preset 3 - \u5355\u5217\u5361\u7247\u5E03\u5C40",
+    description: "preset={{ variant: '3' }} \u2192 100% \u5BBD\u5EA6\uFF0C\u9002\u5408\u6A2A\u5411\u5361\u7247"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    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: function renderContent(option) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            fontSize: 16,
+            fontWeight: 600
+          }
+        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: '#ff4d4f',
+            fontSize: 18,
+            margin: '4px 0'
+          }
+        }, option.dataSource.price), /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: '#999',
+            fontSize: 13
+          }
+        }, option.dataSource.desc));
+      }
+    }
+  }), renderValueDisplay(presetCard3)), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "Preset 4 - \u5927\u5C3A\u5BF8\u7F51\u683C\uFF08325px\uFF09",
+    description: "preset={{ variant: '4' }} \u2192 CSS Grid \u5E03\u5C40\uFF0C\u6BCF\u5217\u56FA\u5B9A 325px\uFF08\u9002\u5408\u5185\u5BB9\u4E30\u5BCC\u7684\u5361\u7247\uFF09"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    dataSource: cardDataSource,
+    mode: "single",
+    valueType: "object",
+    fieldNames: {
+      value: 'id',
+      label: 'title'
+    },
+    value: presetCard4,
+    onChange: setPresetCard4,
+    variant: "card",
+    preset: {
+      variant: '4'
+    },
+    itemProps: {
+      renderContent: function renderContent(option) {
+        var _option$dataSource$fe;
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          style: {
+            fontSize: 20,
+            fontWeight: 600,
+            marginBottom: 12
+          }
+        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: '#ff4d4f',
+            fontSize: 24,
+            marginBottom: 12
+          }
+        }, option.dataSource.price), /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: '#666',
+            fontSize: 14,
+            marginBottom: 16
+          }
+        }, option.dataSource.desc), /*#__PURE__*/React.createElement("div", {
+          style: {
+            fontSize: 13,
+            color: '#333',
+            lineHeight: 1.8
+          }
+        }, (_option$dataSource$fe = option.dataSource.features) === null || _option$dataSource$fe === void 0 ? void 0 : _option$dataSource$fe.map(function (f, i) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: i
+          }, "\u2713 ", f);
+        })));
+      }
+    }
+  }), renderValueDisplay(presetCard4)), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "Preset 5 - \u5355\u5217\u5927\u5361\u7247",
+    description: "preset={{ variant: '5' }} \u2192 100% \u5BBD\u5EA6\uFF0C\u9002\u5408\u8BE6\u7EC6\u4FE1\u606F\u5C55\u793A"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    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: function renderContent(option) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 16
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            fontSize: 18,
+            fontWeight: 600,
+            marginBottom: 4
+          }
+        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: '#999',
+            fontSize: 14
+          }
+        }, option.dataSource.desc)), /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: '#ff4d4f',
+            fontSize: 24,
+            fontWeight: 600
+          }
+        }, option.dataSource.price)));
+      }
+    }
+  }), renderValueDisplay(presetCard5)))), /*#__PURE__*/React.createElement("section", {
+    style: {
+      marginBottom: 80
+    }
+  }, /*#__PURE__*/React.createElement(Title, {
+    level: 2,
+    style: {
+      borderLeft: '4px solid #722ed1',
+      paddingLeft: 16
+    }
+  }, "\u56DB\u3001Media Variant - \u9884\u8BBE\u6837\u5F0F\u5C55\u793A"), /*#__PURE__*/React.createElement(Paragraph, {
+    style: {
+      fontSize: 15,
+      marginTop: 16,
+      marginBottom: 32
+    }
+  }, "Media \u53D8\u4F53\u652F\u6301 2 \u79CD\u9884\u8BBE\u5E03\u5C40\uFF08variant: '1' | '2'\uFF09\uFF0C \u9002\u7528\u4E8E\u56FE\u7247\u3001\u89C6\u9891\u7B49\u5A92\u4F53\u5185\u5BB9\u7684\u9009\u62E9\u573A\u666F\u3002\u81EA\u52A8\u5E94\u7528 filled \u98CE\u683C\u7684\u6307\u793A\u5668\u3002"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 32
+    }
+  }, /*#__PURE__*/React.createElement(DemoSection, {
+    title: "Preset 1 - \u81EA\u9002\u5E94\u5A92\u4F53\u7F51\u683C",
+    description: "preset={{ variant: '1' }} \u2192 Flex \u5E03\u5C40\uFF0C\u81EA\u52A8\u5E94\u7528 filled \u6307\u793A\u5668"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    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__*/React.createElement(DemoSection, {
+    title: "Preset 2 - \u81EA\u9002\u5E94\u5A92\u4F53\u7F51\u683C\uFF08\u53D8\u4F53\uFF09",
+    description: "preset={{ variant: '2' }} \u2192 \u53E6\u4E00\u79CD Flex \u5A92\u4F53\u5E03\u5C40"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    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__*/React.createElement("section", {
+    style: {
+      marginBottom: 80
+    }
+  }, /*#__PURE__*/React.createElement(Title, {
+    level: 2,
+    style: {
+      borderLeft: '4px solid #eb2f96',
+      paddingLeft: 16
+    }
+  }, "\u4E94\u3001Preset vs \u624B\u52A8\u914D\u7F6E"), /*#__PURE__*/React.createElement(Paragraph, {
+    style: {
+      fontSize: 15,
+      marginTop: 16,
+      marginBottom: 32
+    }
+  }, "\u5BF9\u6BD4\u4F7F\u7528 preset \u548C\u624B\u52A8\u914D\u7F6E grid \u7684\u533A\u522B\uFF0C\u5C55\u793A preset \u7684\u4FBF\u6377\u6027\u3002"), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "\u4F7F\u7528 Preset - \u7B80\u6D01\u914D\u7F6E",
+    description: "\u53EA\u9700\u4E00\u884C preset \u914D\u7F6E\uFF0C\u81EA\u52A8\u5E94\u7528\u5E03\u5C40\u548C\u6837\u5F0F"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    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: function renderContent(option) {
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          style: {
+            fontSize: 16,
+            fontWeight: 600
+          }
+        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: '#ff4d4f',
+            fontSize: 18,
+            margin: '8px 0'
+          }
+        }, option.dataSource.price));
+      }
+    }
+  }), renderValueDisplay(comparePreset), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 12,
+      padding: 12,
+      background: '#f6ffed',
+      borderRadius: 6
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    strong: true,
+    style: {
+      color: '#52c41a'
+    }
+  }, "\u2713 \u4F7F\u7528 Preset \u7684\u4EE3\u7801\uFF1A"), /*#__PURE__*/React.createElement("pre", {
+    style: {
+      margin: '8px 0 0',
+      fontSize: 12
+    }
+  }, "<Selector\n  preset={{ variant: '1' }}  // \u2728 \u4EC5\u9700\u8FD9\u4E00\u884C\n  variant=\"card\"\n  // ... \u5176\u4ED6\u914D\u7F6E\n/>"))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "\u624B\u52A8\u914D\u7F6E Grid - \u590D\u6742\u914D\u7F6E",
+    description: "\u9700\u8981\u624B\u52A8\u914D\u7F6E grid \u7684 layoutType\u3001baseWidth \u7B49\u591A\u4E2A\u53C2\u6570"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    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: function renderContent(option) {
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          style: {
+            fontSize: 16,
+            fontWeight: 600
+          }
+        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: '#ff4d4f',
+            fontSize: 18,
+            margin: '8px 0'
+          }
+        }, option.dataSource.price));
+      }
+    }
+  }), renderValueDisplay(compareManual), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 12,
+      padding: 12,
+      background: '#fff7e6',
+      borderRadius: 6
+    }
+  }, /*#__PURE__*/React.createElement(Text, {
+    strong: true,
+    style: {
+      color: '#fa8c16'
+    }
+  }, "\u26A0 \u624B\u52A8\u914D\u7F6E\u7684\u4EE3\u7801\uFF1A"), /*#__PURE__*/React.createElement("pre", {
+    style: {
+      margin: '8px 0 0',
+      fontSize: 12
+    }
+  }, "<Selector\n  grid={{                    // \u9700\u8981\u8BE6\u7EC6\u914D\u7F6E\n    layoutType: 'grid',\n    baseWidth: '209px',\n    wrap: true,\n  }}\n  variant=\"card\"\n  // ... \u5176\u4ED6\u914D\u7F6E\n/>")))), /*#__PURE__*/React.createElement("section", {
+    style: {
+      marginBottom: 80
+    }
+  }, /*#__PURE__*/React.createElement(Title, {
+    level: 2,
+    style: {
+      borderLeft: '4px solid #13c2c2',
+      paddingLeft: 16
+    }
+  }, "\u516D\u3001\u5B9E\u9645\u5E94\u7528\u573A\u666F"), /*#__PURE__*/React.createElement(Paragraph, {
+    style: {
+      fontSize: 15,
+      marginTop: 16,
+      marginBottom: 32
+    }
+  }, "\u5C55\u793A Preset \u5728\u771F\u5B9E\u4E1A\u52A1\u573A\u666F\u4E2D\u7684\u5E94\u7528\uFF0C\u5982\u7535\u5546\u9009\u89C4\u683C\u3001\u652F\u4ED8\u65B9\u5F0F\u9009\u62E9\u7B49\u3002"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 48
+    }
+  }, /*#__PURE__*/React.createElement(DemoSection, {
+    title: "\u573A\u666F1\uFF1A\u7535\u5546\u5546\u54C1\u89C4\u683C\u9009\u62E9",
+    description: "\u4F7F\u7528 preset={{ variant: '1' }} + card variant\uFF0C\u914D\u5408\u6570\u91CF\u9009\u62E9\u5668"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    title: "\u9009\u62E9\u5546\u54C1\u89C4\u683C",
+    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: function renderContent(option) {
+        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+          style: {
+            fontSize: 16,
+            fontWeight: 600,
+            marginBottom: 6
+          }
+        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: '#ff4d4f',
+            fontSize: 20,
+            fontWeight: 600,
+            marginBottom: 6
+          }
+        }, option.dataSource.price), /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: '#999',
+            fontSize: 13
+          }
+        }, "\u5E93\u5B58\uFF1A", option.dataSource.stock, " \u4EF6"));
+      }
+    },
+    titleProps: {
+      visible: true,
+      icon: {
+        visible: true,
+        icon: /*#__PURE__*/React.createElement(StarOutlined, {
+          style: {
+            color: '#faad14'
+          }
+        })
+      }
+    }
+  }), renderValueDisplay(productSpec)), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "\u573A\u666F2\uFF1A\u652F\u4ED8\u65B9\u5F0F\u9009\u62E9",
+    description: "\u4F7F\u7528 preset={{ variant: '3' }} + card variant\uFF0C\u5355\u5217\u6A2A\u5411\u5E03\u5C40"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    title: "\u9009\u62E9\u652F\u4ED8\u65B9\u5F0F",
+    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: function renderContent(option) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 12,
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            fontSize: 32
+          }
+        }, option.dataSource.icon), /*#__PURE__*/React.createElement("div", {
+          style: {
+            fontSize: 16,
+            fontWeight: 500
+          }
+        }, option.dataSource.title));
+      }
+    }
+  }), renderValueDisplay(paymentMethod)), /*#__PURE__*/React.createElement(DemoSection, {
+    title: "\u573A\u666F3\uFF1A\u589E\u503C\u670D\u52A1\u9009\u62E9",
+    description: "\u4F7F\u7528 preset={{ variant: '3' }} + \u591A\u9009\u6A21\u5F0F\uFF0C\u9009\u62E9\u591A\u4E2A\u589E\u503C\u670D\u52A1"
+  }, /*#__PURE__*/React.createElement(Selector, {
+    title: "\u589E\u503C\u670D\u52A1\uFF08\u53EF\u9009\uFF09",
+    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: function renderContent(option) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flex: 1
+          }
+        }, /*#__PURE__*/React.createElement("div", {
+          style: {
+            fontSize: 15
+          }
+        }, option.dataSource.title), /*#__PURE__*/React.createElement("div", {
+          style: {
+            color: '#ff4d4f',
+            fontSize: 15,
+            fontWeight: 600
+          }
+        }, option.dataSource.price));
+      }
+    },
+    titleProps: {
+      visible: true,
+      tip: {
+        visible: true,
+        text: '最多选择3项'
+      }
+    }
+  }), renderValueDisplay(serviceOptions)))), /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement(Title, {
+    level: 2,
+    style: {
+      borderLeft: '4px solid #595959',
+      paddingLeft: 16
+    }
+  }, "\u4E03\u3001Preset \u4F7F\u7528\u603B\u7ED3"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      marginTop: 24,
+      padding: 24,
+      background: '#fafafa',
+      borderRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 16
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    strong: true,
+    style: {
+      fontSize: 15
+    }
+  }, "\uD83C\uDFAF Preset \u7684\u4F18\u52BF\uFF1A"), /*#__PURE__*/React.createElement("ul", {
+    style: {
+      marginTop: 8,
+      paddingLeft: 20
+    }
+  }, /*#__PURE__*/React.createElement("li", null, "\u2713 ", /*#__PURE__*/React.createElement(Text, {
+    strong: true
+  }, "\u7B80\u5316\u914D\u7F6E"), "\uFF1A\u65E0\u9700\u624B\u52A8\u8BBE\u7F6E\u590D\u6742\u7684 grid \u5E03\u5C40\u53C2\u6570"), /*#__PURE__*/React.createElement("li", null, "\u2713 ", /*#__PURE__*/React.createElement(Text, {
+    strong: true
+  }, "\u5FEB\u901F\u5E94\u7528"), "\uFF1A\u4E00\u884C\u4EE3\u7801\u5373\u53EF\u5E94\u7528\u9884\u8BBE\u6837\u5F0F"), /*#__PURE__*/React.createElement("li", null, "\u2713 ", /*#__PURE__*/React.createElement(Text, {
+    strong: true
+  }, "\u54CD\u5E94\u5F0F\u5E03\u5C40"), "\uFF1A\u9884\u8BBE\u5DF2\u4F18\u5316\u597D\u54CD\u5E94\u5F0F\u6548\u679C"), /*#__PURE__*/React.createElement("li", null, "\u2713 ", /*#__PURE__*/React.createElement(Text, {
+    strong: true
+  }, "\u4F4E\u4EE3\u7801\u53CB\u597D"), "\uFF1A\u9002\u5408\u5728\u4F4E\u4EE3\u7801\u5E73\u53F0\u4E2D\u5FEB\u901F\u914D\u7F6E"))), /*#__PURE__*/React.createElement(Divider, {
+    style: {
+      margin: '8px 0'
+    }
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    strong: true,
+    style: {
+      fontSize: 15
+    }
+  }, "\uD83D\uDCCB \u652F\u6301\u7684 Preset Variant\uFF1A"), /*#__PURE__*/React.createElement("ul", {
+    style: {
+      marginTop: 8,
+      paddingLeft: 20
+    }
+  }, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Text, {
+    code: true
+  }, "default"), ": \u652F\u6301 variant '1', '2', '3', '4'"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Text, {
+    code: true
+  }, "card"), ": \u652F\u6301 variant '1', '2', '3', '4', '5'"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Text, {
+    code: true
+  }, "media"), ": \u652F\u6301 variant '1', '2'\uFF08\u81EA\u52A8\u5E94\u7528 filled \u6307\u793A\u5668\uFF09"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Text, {
+    code: true
+  }, "select"), ": \u4EC5\u652F\u6301 variant '1'\uFF08\u4E0B\u62C9\u9009\u62E9\u5668\uFF09"))), /*#__PURE__*/React.createElement(Divider, {
+    style: {
+      margin: '8px 0'
+    }
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    strong: true,
+    style: {
+      fontSize: 15
+    }
+  }, "\uD83D\uDD27 \u9AD8\u7EA7\u7528\u6CD5\uFF1A"), /*#__PURE__*/React.createElement("ul", {
+    style: {
+      marginTop: 8,
+      paddingLeft: 20
+    }
+  }, /*#__PURE__*/React.createElement("li", null, "\u2022 Preset \u548C\u624B\u52A8 grid \u914D\u7F6E\u53EF\u5171\u5B58\uFF0C\u624B\u52A8\u914D\u7F6E\u4F18\u5148\u7EA7\u66F4\u9AD8"), /*#__PURE__*/React.createElement("li", null, "\u2022 indicatorProps \u4F1A\u6839\u636E preset \u81EA\u52A8\u8C03\u6574\uFF08\u5982 media/card-2 \u81EA\u52A8\u5E94\u7528 filled\uFF09"), /*#__PURE__*/React.createElement("li", null, "\u2022 \u53EF\u901A\u8FC7 itemProps \u8FDB\u4E00\u6B65\u5B9A\u5236\u9009\u9879\u5185\u5BB9\u7684\u6E32\u67D3")))))));
+};
+export default SelectorDemo;