one-design-next 0.0.7 → 0.0.9

package/dist/layout/huxuan-layout.js

@@ -0,0 +1,573 @@
+'use client';
+
+import React from 'react';
+import Button from "../button";
+import HoverFill from "../hover-fill";
+import Icon from "../icon";
+import Popover from "../popover";
+import Tabs from "../tabs";
+// ─── 平台图标 ───
+
+var IconFinder = /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 18 18",
+  fill: "none"
+}, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M14.3105 4.45158C14.1471 4.04253 13.0557 5.36 12.9001 5.54289C11.7935 6.84292 10.784 8.38726 9.96743 9.88139L10.105 10.0959C10.708 11.0362 11.2085 12.0327 11.8991 12.9174C12.3107 13.4447 12.4087 13.6538 12.7274 13.0145C13.7048 11.054 14.2028 8.71907 14.391 6.54875C14.4891 5.41762 14.416 4.71567 14.3105 4.45158ZM8.02178 9.86031C7.1955 8.35033 6.21794 6.85634 5.09993 5.54289C4.97737 5.3989 3.844 4.06491 3.68952 4.45161C3.584 4.7157 3.51086 5.41764 3.60897 6.54876C3.7972 8.71908 4.2952 11.054 5.27262 13.0145C5.59135 13.6538 5.68932 13.4447 6.10089 12.9174C6.76476 12.067 7.33085 11.1148 7.85053 10.1712L8.02178 9.86031ZM11.9006 4.69215C12.5881 3.88451 13.2033 3.34538 13.7607 3.11989C14.5295 2.8089 15.1868 3.10724 15.5293 3.96468C16.4511 6.27154 14.2934 15 12.6006 15C12.0529 15 11.504 14.5443 10.8645 13.7251C10.1471 12.806 9.62615 11.7805 9.00018 10.8044C8.44831 11.8064 7.83904 12.8238 7.13548 13.7251C6.496 14.5443 5.9471 15 5.39939 15C3.70658 15 1.54893 6.27154 2.47068 3.96471C2.81322 3.10724 3.47052 2.8089 4.23932 3.11989C4.79673 3.34538 5.41192 3.88451 6.09939 4.69215C7.13508 5.9089 8.03503 7.24579 8.83744 8.62611C8.89449 8.72426 8.94893 8.82048 9.00026 8.91428C9.05385 8.81622 9.10791 8.72029 9.1624 8.62611C9.94821 7.26775 10.8883 5.88141 11.9006 4.69215Z",
+  fill: "#FA9D3B"
+}));
+var IconMp = /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 18 18",
+  fill: "none"
+}, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M13.8814 4.79098C13.1501 3.28732 11.3003 2.0003 9.20591 2C8.10694 1.99971 6.42804 2.37698 5.17344 3.89406C4.33562 4.90711 4.05354 6.09273 4.2301 7.27512C4.35139 8.08744 4.80383 9.15915 5.45124 9.83707C5.6953 8.11854 6.60047 6.76697 7.78728 5.77352C9.93011 4.13649 12.2178 4.22918 13.8814 4.79098ZM15.5532 7.36963C14.2422 5.6682 11.9758 5.19218 9.92999 5.95086L9.9468 5.95592C10.0072 5.9741 10.0675 5.99225 10.1276 6.01261C13.1566 7.04453 14.7937 10.3305 13.7841 13.352C13.5155 14.1558 13.0854 14.8588 12.5437 15.4399C13.1963 15.2592 13.8642 15.0008 14.4372 14.5593C16.744 12.7818 17.1981 9.5042 15.5532 7.36963ZM7.86661 12.6553C8.29547 12.7511 8.74128 12.804 9.20153 12.804C10.6028 12.804 11.7126 12.478 12.7609 11.7068C12.7338 12.143 12.6026 12.6681 12.4827 12.9773C11.496 15.5232 8.63959 16.6267 5.64612 15.6436C3.04319 14.7887 1.44815 11.7365 2.17692 9.18889C2.37234 8.5061 2.57203 8.03774 2.94695 7.44839C3.17184 9.09073 4.19433 10.6881 5.68502 11.7047C5.79835 11.7811 5.87587 11.9085 5.88221 12.0561C5.88427 12.1051 5.87573 12.1511 5.86482 12.1989L5.61458 13.3347C5.61166 13.3482 5.60822 13.3619 5.60474 13.3757C5.59454 13.4162 5.58408 13.4578 5.58584 13.4991C5.59115 13.6218 5.69431 13.7174 5.81648 13.7121C5.86453 13.71 5.90284 13.6903 5.94249 13.6651L7.35699 12.7583C7.46339 12.6901 7.57731 12.6461 7.70435 12.6407C7.76035 12.6382 7.81429 12.6445 7.86661 12.6553Z",
+  fill: "#07C160"
+}));
+var IconMiniProgram = /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 18 18",
+  fill: "none"
+}, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M9.93333 3.56419C8.8145 4.21631 8.06667 5.36894 8.06667 6.68364V12.1497C8.06667 13.1341 7.12633 13.9321 5.96667 13.9321C4.80677 13.9321 3.86667 13.1341 3.86667 12.1497C3.86667 11.4491 4.34407 10.8447 5.03683 10.5534C5.08677 10.5325 5.1374 10.5125 5.18943 10.4949C5.62553 10.3167 5.99957 9.98205 6.1384 9.59348C6.3435 9.01978 5.96177 8.55493 5.28603 8.55493C5.11757 8.55493 4.94677 8.58393 4.78203 8.63621C3.80273 8.92258 2.98723 9.54904 2.4977 10.3673C2.18153 10.8961 2 11.5033 2 12.1497C2 14.1809 3.7794 15.8333 5.96667 15.8333C6.7383 15.8333 7.45673 15.6244 8.06667 15.2691C9.1855 14.617 9.93333 13.4644 9.93333 12.1497V6.68364C9.93333 5.69928 10.8734 4.90123 12.0333 4.90123C13.193 4.90123 14.1333 5.69928 14.1333 6.68364C14.1333 7.41419 13.6156 8.04207 12.8743 8.31728C12.3962 8.48055 12.0044 8.83299 11.8551 9.25055C11.6511 9.82139 12.031 10.2843 12.7037 10.2843C12.8561 10.2843 13.0101 10.2577 13.1601 10.2145C13.1846 10.2076 13.2089 10.2 13.2331 10.1926C14.2043 9.90528 15.0149 9.28073 15.5021 8.46605C15.8185 7.93751 16 7.33006 16 6.68364C16 4.65241 14.2206 3 12.0333 3C11.2617 3 10.5433 3.2089 9.93333 3.56419Z",
+  fill: "#605AB0"
+}));
+var IconQQVideo = /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 32 32",
+  fill: "none"
+}, /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M24.4631 7.56752C26.7059 9.68039 28.106 12.6778 28.106 16.0022C28.106 22.4011 22.9187 27.5884 16.5198 27.5884C10.1209 27.5884 4.93359 22.4011 4.93359 16.0022C4.93359 9.60334 10.1209 4.41602 16.5198 4.41602C18.6717 4.41602 20.6866 5.00266 22.4132 6.02476C22.5 6.07079 22.5863 6.11856 22.6721 6.16807C23.3484 6.55856 23.9472 7.03176 24.4631 7.56752ZM13.0595 7.28186C9.59205 8.65894 7.14049 12.0443 7.14049 16.0022C7.14049 21.1823 11.3398 25.3815 16.5198 25.3815C21.4188 25.3815 25.4405 21.6256 25.8625 16.8363C25.7929 16.9744 25.719 17.1114 25.6406 17.247C23.401 21.1261 18.4408 22.4552 14.5617 20.2156C10.6826 17.976 9.35351 13.0158 11.5931 9.13666C11.9998 8.43228 12.4962 7.81198 13.0595 7.28186ZM21.3302 7.94873C18.5448 6.50462 15.089 7.49543 13.5043 10.2401C11.8742 13.0637 12.8416 16.6742 15.6652 18.3044C18.4887 19.9346 22.0992 18.9671 23.7294 16.1436C25.0676 13.8257 24.6554 10.9776 22.9029 9.12998C22.4228 8.68378 21.8958 8.28731 21.3302 7.94873Z",
+  fill: "#0099FF"
+}));
+
+// ─── 默认数据 ───
+
+var DEFAULT_NAV = [{
+  key: 'home',
+  label: '首页'
+}, {
+  key: 'creator',
+  label: '创作者广场',
+  children: [{
+    key: 'creator-finder',
+    label: '视频号',
+    icon: IconFinder
+  }, {
+    key: 'creator-mp',
+    label: '公众号',
+    icon: IconMp
+  }, {
+    key: 'creator-weapp',
+    label: '小程序',
+    icon: IconMiniProgram
+  }, {
+    key: 'creator-qq',
+    label: 'QQ短视频',
+    icon: IconQQVideo
+  }]
+}, {
+  key: 'trending',
+  label: '互选趋势'
+}, {
+  key: 'mcn',
+  label: 'MCN广场'
+}, {
+  key: 'calendar',
+  label: '营销活动'
+}, {
+  key: 'manage',
+  label: '管理中心',
+  children: [{
+    key: 'manage-order',
+    label: '互选订单管理'
+  }, {
+    key: 'manage-report',
+    label: '互选结案报告管理'
+  }, {
+    key: 'manage-promotion',
+    label: '内容助推订单管理'
+  }, {
+    key: 'manage-recruitment',
+    label: '招募任务管理'
+  }, {
+    key: 'manage-project',
+    label: '营销项目管理'
+  }]
+}];
+var DEFAULT_ACTIONS = [{
+  key: 'recruitment',
+  label: '发布招募任务',
+  children: [{
+    key: 'recruitment-finder',
+    label: '视频号',
+    icon: IconFinder
+  }, {
+    key: 'recruitment-mp',
+    label: '公众号',
+    icon: IconMp
+  }]
+}, {
+  key: 'collection',
+  label: '达人名单',
+  popup: /*#__PURE__*/React.createElement(CollectionPanel, null)
+}];
+
+// ─── 达人名单面板 ───
+
+var MOCK_COLLECTIONS = [{
+  id: 1,
+  name: '618大促-视频号达人',
+  type: 'finder',
+  userTotal: 26,
+  nickname: '小鱼爱测评',
+  avatar: ''
+}, {
+  id: 2,
+  name: '美妆护肤-头部达人',
+  type: 'finder',
+  userTotal: 12,
+  nickname: '程十安',
+  avatar: '',
+  isShare: true
+}, {
+  id: 3,
+  name: '母婴亲子-种草达人',
+  type: 'mp',
+  userTotal: 8,
+  nickname: '年糕妈妈',
+  avatar: ''
+}, {
+  id: 4,
+  name: '食品饮料-测评博主',
+  type: 'finder',
+  userTotal: 34,
+  nickname: '大LOGO吃遍中国',
+  avatar: '',
+  shareUid: 'op_001'
+}, {
+  id: 5,
+  name: '运营推荐-优质达人',
+  type: 'finder',
+  userTotal: 0,
+  nickname: '',
+  avatar: '',
+  isShare: true
+}];
+var TYPE_MAP = {
+  finder: '视频号',
+  mp: '公众号'
+};
+function CollectionPanel() {
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-collection": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-collection-list": true
+  }, MOCK_COLLECTIONS.map(function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      "data-odn-huxuan-layout-collection-item": true
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-huxuan-layout-collection-avatars": true
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-huxuan-layout-collection-avatar": true,
+      style: {
+        backgroundImage: item.avatar ? "url(".concat(item.avatar, ")") : undefined,
+        backgroundColor: item.avatar ? undefined : '#e0e3e8'
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      "data-odn-huxuan-layout-collection-avatar": true,
+      "data-second": true,
+      style: {
+        backgroundColor: 'rgba(0,0,0,0.08)'
+      }
+    })), /*#__PURE__*/React.createElement("div", {
+      "data-odn-huxuan-layout-collection-info": true
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-huxuan-layout-collection-title": true
+    }, item.isShare && /*#__PURE__*/React.createElement("span", {
+      "data-odn-huxuan-layout-collection-badge": true
+    }, "\u5B9A\u5236"), /*#__PURE__*/React.createElement("span", {
+      "data-odn-huxuan-layout-collection-name": true
+    }, item.name), item.shareUid && /*#__PURE__*/React.createElement("span", {
+      "data-odn-huxuan-layout-collection-badge": true,
+      "data-share": true
+    }, "\u5171\u4EAB")), /*#__PURE__*/React.createElement("div", {
+      "data-odn-huxuan-layout-collection-desc": true
+    }, item.userTotal > 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, "\u5305\u542B ", item.nickname, item.userTotal > 1 && " \u7B49", " ", item.userTotal, " \u4E2A", TYPE_MAP[item.type]) : /*#__PURE__*/React.createElement(React.Fragment, null, "\u8FD8\u6CA1\u6709", TYPE_MAP[item.type]))));
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-collection-footer": true
+  }, /*#__PURE__*/React.createElement(Button, {
+    style: {
+      width: '100%',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "plus",
+    style: {
+      marginRight: 4
+    }
+  }), "\u65B0\u5EFA\u8FBE\u4EBA\u540D\u5355")));
+}
+
+/** 导航下拉面板：hover 触发 */
+function NavPopoverPanel(_ref) {
+  var items = _ref.items,
+    activeKey = _ref.activeKey,
+    onItemClick = _ref.onItemClick;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-popup": true
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement(HoverFill, {
+      key: item.key,
+      bgStyle: {
+        borderRadius: 0
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-huxuan-layout-popup-item": true,
+      "data-active": activeKey === item.key || undefined,
+      onClick: function onClick() {
+        return onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item.key);
+      }
+    }, item.icon && /*#__PURE__*/React.createElement("span", {
+      "data-odn-huxuan-layout-popup-icon": true
+    }, item.icon), item.label));
+  }));
+}
+function HuxuanLogo() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "207",
+    height: "72",
+    viewBox: "0 0 207 72",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: "0.4",
+    d: "M11.5071 48.873L5.87796 43.2439L10.9594 39.2279C12.2328 38.2214 14.0562 38.3196 15.2143 39.457C16.3806 40.6026 16.5039 42.4403 15.501 43.7314L11.5071 48.873Z",
+    fill: "#07C160"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.4",
+    d: "M26.9703 32.4547C25.6945 33.4852 23.8469 33.3872 22.6873 32.2276C21.5614 31.1017 21.432 29.3203 22.3833 28.0435L25.7933 23.4669L31.66 28.6669L26.9703 32.4547Z",
+    fill: "#07C160"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.4",
+    d: "M11.5349 23.1523L5.87806 28.8092L11.0461 32.6306C12.3235 33.5751 14.0966 33.4574 15.2379 32.3523C16.4541 31.1747 16.5622 29.2606 15.4864 27.9534L11.5349 23.1523Z",
+    fill: "#FA9D3B"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.4",
+    d: "M26.6995 39.4609C25.4233 38.4761 23.6114 38.6044 22.4867 39.7592C21.3966 40.8785 21.2831 42.6246 22.2192 43.8755L26.0037 48.9329L31.7174 43.3329L26.6995 39.4609Z",
+    fill: "#FA9D3B"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M9.05268 38.3335C10.3223 38.1394 11.26 37.0475 11.26 35.7631C11.26 34.4932 10.3426 33.409 9.09017 33.1988L5.12668 32.5336L5.12668 38.9336L9.05268 38.3335Z",
+    fill: "#296BEF"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: "0.3",
+    d: "M28.9341 38.3335C27.6645 38.1394 26.7268 37.0475 26.7268 35.7631C26.7268 34.4932 27.6442 33.409 28.8966 33.1988L32.8601 32.5336V38.9336L28.9341 38.3335Z",
+    fill: "#296BEF"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "29.1267",
+    cy: "25.5996",
+    r: "4",
+    fill: "#07C160"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "8.59351",
+    cy: "46.1328",
+    r: "4",
+    fill: "#07C160"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "8.59375",
+    cy: "25.8672",
+    r: "4",
+    fill: "#FA9D3B"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "29.1267",
+    cy: "46.4004",
+    r: "4",
+    fill: "#FA9D3B"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "18.9932",
+    cy: "35.7332",
+    r: "3.2",
+    fill: "#296BEF"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "33.1265",
+    cy: "35.7332",
+    r: "3.2",
+    fill: "#296BEF"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "4.85991",
+    cy: "35.7332",
+    r: "3.2",
+    fill: "#296BEF"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M202.352 35.3401L202.698 34.2421C203.139 34.8427 203.579 35.4438 203.975 36.0238H206.819C206.236 35.277 205.585 34.4601 204.921 33.6289L204.921 33.6277C203.781 32.1995 202.607 30.7284 201.693 29.4977H199.226C200.082 30.7463 201.081 32.1104 202.021 33.364L202.149 33.534H192.139C192.891 32.6844 193.896 31.0747 194.969 29.3566L194.97 29.3558C195.519 28.4767 196.086 27.569 196.646 26.7207H193.92C193.782 26.9343 193.638 27.1586 193.489 27.3918C191.94 29.8054 189.784 33.1676 187.86 35.3401H202.352Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M151.916 31.382C150.876 29.6417 149.99 28.1086 149.315 26.7412H147.159C147.675 27.8488 148.186 28.8663 148.686 29.8589L148.686 29.8599L148.687 29.861C148.944 30.3713 149.197 30.8758 149.446 31.382H151.916Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M165.557 35.7327V33.9717H160.554V31.2991H164.805V29.5381H160.554V26.7412H158.501V29.5381H156.547C156.761 28.8337 156.891 28.1293 156.917 27.4249H154.954C154.893 28.7715 154.2 30.4339 153.241 31.2005L153.151 33.4745C154.311 32.9565 155.144 32.19 155.729 31.2991H158.501V33.9717H153.012V35.7327H156.167C156.137 37.7423 155.382 39.6483 153.367 42.1138H156.074C157.496 40.042 158.186 37.8252 158.246 35.7327H160.413L160.293 42.2795H165.625L165.998 40.477H162.338L162.421 35.7327H165.557Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M151.366 41.4093C151.503 41.0682 151.622 40.7186 151.737 40.3819C151.803 40.187 151.868 39.9963 151.935 39.8141C151.939 38.2188 151.889 36.0849 151.791 34.6554C151.74 33.8474 151.453 33.5988 150.638 33.5988H147.287V35.3391H149.551C149.802 35.3391 149.856 35.4219 149.87 35.6705C149.936 36.7271 149.962 38.0945 149.929 39.1926C149.385 41.1193 148.429 43.3775 147.207 45.3871H149.69C150.015 44.7242 150.346 43.9576 150.691 43.1496C153.796 44.9935 156.989 45.3871 160.544 45.3871H165.855L166.247 43.5033H160.852C157.464 43.5033 153.796 43.0668 151.366 41.4093Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M144.706 29.2371V27.5727H127.098V29.2371H131.431C130.937 32.8419 130.291 36.3319 129.608 39.9368H139.724C139.66 40.4303 139.601 40.928 139.541 41.4261C139.458 42.1264 139.374 42.8277 139.276 43.5205H126.868V45.2938H145.354V43.5205H141.319C141.442 42.3397 141.56 41.2542 141.671 40.2346C141.928 37.8668 142.147 35.8539 142.302 33.8266C142.382 32.77 142.001 32.2935 140.893 32.2935H132.943L133.382 29.2371H144.706ZM139.942 34.096C140.234 34.096 140.336 34.2203 140.308 34.6139C140.221 35.6291 140.122 36.7191 139.942 38.1072H131.943C131.986 37.8768 132.028 37.6521 132.069 37.4314C132.279 36.3023 132.471 35.2744 132.654 34.096H139.942Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M168.91 27.3627H185.033V29.103H177.828V36.4993H186.011V38.2395H177.828V45.3872H175.682V38.2395H167.964V36.4993H175.682V29.103H168.91V27.3627Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M169.609 30.2011H171.846C172.357 31.4441 173.146 33.1844 174.257 35.4219H171.831C171.166 33.9717 170.418 32.2314 169.609 30.2011Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M183.581 30.2218C183.128 32.045 182.6 33.7852 181.914 35.4427H179.425C180.297 33.7645 180.929 32.0242 181.343 30.2218H183.581Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M203.121 37.7344H189.831V45.3H204.109V38.6072C204.081 38.3655 203.965 38.1425 203.783 37.9814C203.6 37.8202 203.364 37.7323 203.121 37.7344ZM191.779 43.7108V39.3329H201.878C201.954 39.3354 202.026 39.3671 202.079 39.4215C202.132 39.4758 202.162 39.5487 202.163 39.6246V43.7108H191.779Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M104.015 28.2529H86.4126V29.8249H104.015V28.2529Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M123.801 35.2598H114.03V36.8318H123.801V35.2598Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M123.801 38.832H114.03V40.4041H123.801V38.832Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M112.904 32.291H106.752V33.863H112.904V32.291Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M113.098 37.2783H106.539V38.8503H113.098V37.2783Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M123.831 45.3708H120.435L120.085 43.7988H123.831V45.3708Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M119.911 26.7207H117.97V32.6983H119.911V26.7207Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M115.971 32.4072H114.03V45.3521H115.971V32.4072Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M114.03 31.8446V33.4166H121.521C121.716 33.4166 121.871 33.5719 121.871 33.766V45.3523H123.812V32.815C123.812 32.2716 123.365 31.8252 122.822 31.8252H114.011L114.03 31.8446Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M88.3734 31.6689H86.4326V35.3758H88.3734V31.6689Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M86.432 31.6689V33.241H101.725C101.919 33.241 102.075 33.3962 102.075 33.5903V35.3758H104.015V32.6587C104.015 32.1153 103.569 31.6689 103.026 31.6689H86.4126H86.432Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M92.9334 26.7207H90.9927V31.0486H92.9334V26.7207Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M99.4549 26.7207H97.5142V31.0486H99.4549V26.7207Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M90.9925 34.3086H89.0518V39.0441H90.9925V34.3086Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M89.9844 34.3086V35.8806H99.0866C99.2806 35.8806 99.4359 36.0359 99.4359 36.23V39.0441H101.377V35.2984C101.377 34.755 100.93 34.3086 100.387 34.3086H89.9844Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M101.376 37.6279H89.0518V39.1999H101.376V37.6279Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M89.6148 40.2676H87.6741V45.0225H89.6148V40.2676Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M89.2076 40.2676V41.8396H100.464C100.658 41.8396 100.813 41.9949 100.813 42.1889V45.003H102.754V41.2574C102.754 40.714 102.308 40.2676 101.764 40.2676H89.1882H89.2076Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M102.754 43.7988H87.6741V45.3708H102.754V43.7988Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M117.31 31.0474L115.699 27.3018H113.72L115.331 31.0474H117.31Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M120.531 31.0474L122.142 27.3018H124.122L122.511 31.0474H120.531Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M70.5373 31.0486L69.0235 26.7207H67.0439L68.5577 31.0486H70.5373Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M82.6089 28.3506C82.6089 27.7684 82.1431 27.2832 81.5415 27.2832H71.6436L71.9153 28.8552H80.2994C80.4934 28.8552 80.6487 29.0299 80.6487 29.224V34.1535H76.7284V30.2138L74.7876 29.8838V34.1535H71.9347V35.7255H74.7876V45.3711H76.7284V35.7255H80.6487V45.3711H84.1227L84.3944 43.7991H82.5895V28.3506H82.6089Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M51.1684 27.3018H46.7823V37.1802C46.7823 41.4305 46.4524 44.4581 46.3359 45.3703H48.1797C48.2961 44.3611 48.529 42.071 48.5872 38.8493H50.1786V45.3703H52.1194V28.2915C52.1194 27.7481 51.6924 27.3212 51.1684 27.3018ZM49.9263 28.8738C50.0622 28.8738 50.1592 28.9902 50.1786 29.1261V32.2701H48.6066V28.8738H49.9263ZM48.6066 37.2773V33.8421H50.1786V37.2773H48.6066Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M61.5908 36.8903V36.7545C62.0566 37.065 62.5418 37.3561 63.0658 37.6084L63.8809 35.9005C62.8329 35.3959 61.9402 34.7361 61.2221 33.9015H63.648V32.3295H58.2915C58.4468 31.9608 58.5632 31.592 58.6797 31.2039H63.648V29.6318H62.076C62.5612 28.5644 63.0658 27.0894 63.0658 27.0894H60.931C60.931 27.0894 60.504 28.4868 59.9412 29.6318H58.9902C59.0678 29.0884 59.1067 28.545 59.1067 28.0016V26.7207H57.2047V28.0016C57.2047 28.5644 57.1659 29.1078 57.0688 29.6318H56.4284L55.4192 27.0894H53.2844L54.2936 29.6318H52.7021V31.2039H56.6613C56.5254 31.592 56.3702 31.9608 56.1761 32.3295H52.7021V33.9015H55.1281C54.41 34.7361 53.5173 35.3959 52.4692 35.9005L53.2844 37.6084C53.7696 37.3755 54.2159 37.1232 54.6429 36.8515L54.6041 36.8903H59.6112V38.7923H56.3702L56.4284 37.9189L54.4876 37.5502L54.313 40.3643H61.5908L61.3968 43.78H58.7379L59.0096 45.352H63.2599L63.5704 39.8985C63.6092 39.2969 63.124 38.7729 62.503 38.7729H61.5714V36.8709L61.5908 36.8903ZM58.8738 33.9015C59.2231 34.4644 59.6307 34.9884 60.077 35.4736H56.2925C56.7389 35.0078 57.1465 34.4838 57.4958 33.9015H58.8738Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M60.4263 41.334H52.9155L53.1678 42.8284H60.3681L60.4457 41.334H60.4263Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M70.1488 32.1738H66.0926L65.8792 33.7458H68.2081V45.3904L72.5554 43.1974V41.276L70.1488 42.4987V32.1738Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M110.711 34.1338H108.77V35.8999H110.711V34.1338Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M109.721 26.7207H107.839C107.703 27.7105 107.334 29.7483 106.539 31.6697H108.538C108.77 31.0292 108.965 30.3693 109.12 29.7677H113.098V28.1957H109.489C109.605 27.5746 109.683 27.0506 109.721 26.7207Z",
+    fill: "#333333"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M112.904 41.3537L110.711 42.4599V33.8623H108.77V45.3904L112.904 43.2944V41.3731V41.3537Z",
+    fill: "#333333"
+  }));
+}
+export function HuxuanLayout(_ref2) {
+  var logo = _ref2.logo,
+    _ref2$navItems = _ref2.navItems,
+    navItems = _ref2$navItems === void 0 ? DEFAULT_NAV : _ref2$navItems,
+    activeNav = _ref2.activeNav,
+    onNavChange = _ref2.onNavChange,
+    _ref2$actionItems = _ref2.actionItems,
+    actionItems = _ref2$actionItems === void 0 ? DEFAULT_ACTIONS : _ref2$actionItems,
+    onActionClick = _ref2.onActionClick,
+    headerRight = _ref2.headerRight,
+    _ref2$accountName = _ref2.accountName,
+    accountName = _ref2$accountName === void 0 ? '品牌名称' : _ref2$accountName,
+    _ref2$accountId = _ref2.accountId,
+    accountId = _ref2$accountId === void 0 ? '00000' : _ref2$accountId,
+    className = _ref2.className,
+    contentClassName = _ref2.contentClassName,
+    children = _ref2.children;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout": true,
+    className: className
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-header": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-header-left": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-logo": true
+  }, logo !== null && logo !== void 0 ? logo : /*#__PURE__*/React.createElement(HuxuanLogo, null)), /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-nav": true
+  }, /*#__PURE__*/React.createElement(Tabs, {
+    gap: 0,
+    items: navItems.map(function (item) {
+      return {
+        value: item.key,
+        label: function label(_tabItem, _index, active) {
+          var _item$children;
+          var content = /*#__PURE__*/React.createElement("div", {
+            "data-odn-huxuan-layout-nav-item": true,
+            "data-active": active || undefined
+          }, item.label, item.badge && /*#__PURE__*/React.createElement("span", {
+            "data-odn-huxuan-layout-nav-badge": true
+          }, item.badge));
+          if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length) {
+            return /*#__PURE__*/React.createElement(Popover, {
+              placement: "bottom",
+              arrowed: false,
+              offset: 2,
+              popup: /*#__PURE__*/React.createElement(NavPopoverPanel, {
+                items: item.children,
+                onItemClick: onNavChange
+              }),
+              popupStyle: {
+                padding: '8px 0'
+              }
+            }, content);
+          }
+          return content;
+        }
+      };
+    }),
+    value: activeNav,
+    onChange: function onChange(value) {
+      return onNavChange === null || onNavChange === void 0 ? void 0 : onNavChange(value);
+    },
+    "data-odn-huxuan-layout-tabs": true,
+    style: {
+      '--odn-tabs-active-color': 'var(--odn-huxuan-layout-active-color)',
+      '--odn-tabs-item-font-size': '16px',
+      '--odn-tabs-item-font-weight': '400'
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-header-right": true
+  }, headerRight !== null && headerRight !== void 0 ? headerRight : /*#__PURE__*/React.createElement(React.Fragment, null, actionItems.map(function (action) {
+    var _action$children;
+    var btn = /*#__PURE__*/React.createElement(Button, {
+      key: action.key
+    }, action.label);
+    if (action.popup) {
+      return /*#__PURE__*/React.createElement(Popover, {
+        key: action.key,
+        placement: "bottom",
+        arrowed: false,
+        offset: 8,
+        popup: action.popup,
+        popupStyle: {
+          padding: 0
+        }
+      }, btn);
+    }
+    if ((_action$children = action.children) !== null && _action$children !== void 0 && _action$children.length) {
+      return /*#__PURE__*/React.createElement(Popover, {
+        key: action.key,
+        placement: "bottom",
+        arrowed: false,
+        offset: 8,
+        popup: /*#__PURE__*/React.createElement(NavPopoverPanel, {
+          items: action.children,
+          onItemClick: onActionClick
+        }),
+        popupStyle: {
+          padding: '8px 0'
+        }
+      }, btn);
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      key: action.key,
+      onClick: function onClick() {
+        var _action$onClick;
+        (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action);
+        onActionClick === null || onActionClick === void 0 || onActionClick(action.key);
+      }
+    }, btn);
+  }), /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    icon: "bell",
+    style: {
+      marginLeft: 8
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-divider": true
+  }), /*#__PURE__*/React.createElement(HoverFill, {
+    bgStyle: {
+      borderRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-account": true
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-account-name": true
+  }, accountName), /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-account-id": true
+  }, "ID: ", accountId)), /*#__PURE__*/React.createElement(Icon, {
+    name: "down-filled"
+  }))))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-huxuan-layout-body": true
+  }, /*#__PURE__*/React.createElement("div", {
+    className: contentClassName
+  }, children)));
+}

package/dist/layout/index.d.ts

@@ -1,3 +1,4 @@
 import './style';
 export { RuyiLayout, type RuyiLayoutProps, type RuyiMenuItem, } from './layout';
 export { MpLayout, type MpLayoutProps, type MpMenuItem, type MpTabItem, type MpSubTab, } from './mp-layout';
+export { HuxuanLayout, type HuxuanLayoutProps, type HuxuanNavItem, type HuxuanNavChild, type HuxuanActionItem, } from './huxuan-layout';

package/dist/layout/index.js

@@ -1,3 +1,4 @@
 import "./style";
 export { RuyiLayout } from "./layout";
-export { MpLayout } from "./mp-layout";
+export { MpLayout } from "./mp-layout";
+export { HuxuanLayout } from "./huxuan-layout";