one-design-next 0.0.4-alpha.100

package/dist/input-otp/style/index.css

@@ -0,0 +1,110 @@
+html {
+  --odn-otp-padding-block-medium: 6px;
+  --odn-otp-width-medium: 30px;
+  --odn-otp-font-size-medium: 14px;
+  --odn-otp-line-height-medium: 1.5714285714285714;
+  --odn-otp-border-radius-medium: 6px;
+  --odn-otp-icon-size-medium: 16px;
+  --odn-otp-icon-margin-inline-medium: 4px;
+  --odn-otp-padding-block-small: 4px;
+  --odn-otp-width-small: 24px;
+  --odn-otp-font-size-small: 12px;
+  --odn-otp-line-height-small: 1.6666666666666667;
+  --odn-otp-border-radius-small: 6px;
+  --odn-otp-icon-size-small: 14px;
+  --odn-otp-icon-margin-inline-small: 4px;
+  --odn-otp-padding-block-large: 8px;
+  --odn-otp-width-large: 36px;
+  --odn-otp-font-size-large: 16px;
+  --odn-otp-line-height-large: 1.5;
+  --odn-otp-border-radius-large: 6px;
+  --odn-otp-icon-size-large: 18px;
+  --odn-otp-icon-margin-inline-large: 4px;
+  --odn-otp-bg-normal: #fff;
+  --odn-otp-bg-normal-hover: var(--odn-color-black-1);
+  --odn-otp-bg-normal-focus: #fff;
+  --odn-otp-bg-disabled: var(--odn-color-black-3);
+  --odn-otp-color-normal: var(--odn-color-black-12);
+  --odn-otp-color-normal-hover: var(--odn-color-black-12);
+  --odn-otp-color-normal-focus: var(--odn-color-black-12);
+  --odn-otp-color-disabled: var(--odn-color-black-8);
+  --odn-otp-border-normal: 1px solid var(--odn-color-black-6);
+  --odn-otp-border-normal-hover: 1px solid var(--odn-color-black-7);
+  --odn-otp-border-normal-focus: 1px solid var(--odn-color-blue-6);
+  --odn-otp-border-disabled: 1px solid var(--odn-color-black-6);
+  --odn-otp-shadow-normal: none;
+  --odn-otp-shadow-normal-hover: none;
+  --odn-otp-shadow-normal-focus: 0 0 0 2px var(--odn-color-blue-2);
+  --odn-otp-shadow-disabled: none;
+}
+
+@layer components {
+  [data-odn-otp-root] {
+    display: flex;
+    gap: 8px;
+    flex-wrap: nowrap;
+  }
+  [data-odn-otp-input] {
+    text-align: center;
+    position: relative;
+    min-width: 0;
+    font-size: inherit;
+    border: none;
+    border-radius: 0;
+    outline: none;
+    background: transparent;
+    color: inherit;
+  }
+  [data-odn-otp-input-disabled=true] {
+    color: var(--odn-otp-color-disabled);
+    background: var(--odn-otp-bg-disabled);
+    border: var(--odn-otp-border-disabled);
+    box-shadow: var(--odn-otp-shadow-disabled);
+    cursor: not-allowed;
+  }
+  [data-odn-otp-input-disabled=true] [data-odn-otp] {
+    cursor: not-allowed;
+  }
+  [data-odn-otp-input-size=small] {
+    padding: var(--odn-otp-padding-block-small) 0;
+    width: var(--odn-otp-width-small);
+    font-size: var(--odn-otp-font-size-small);
+    line-height: var(--odn-otp-line-height-small);
+    border-radius: var(--odn-otp-border-radius-small);
+  }
+  [data-odn-otp-input-size=medium] {
+    padding: var(--odn-otp-padding-block-medium) 0;
+    width: var(--odn-otp-width-medium);
+    font-size: var(--odn-otp-font-size-medium);
+    line-height: var(--odn-otp-line-height-medium);
+    border-radius: var(--odn-otp-border-radius-medium);
+  }
+  [data-odn-otp-input-size=large] {
+    padding: var(--odn-otp-padding-block-large) 0;
+    width: var(--odn-otp-width-large);
+    font-size: var(--odn-otp-font-size-large);
+    line-height: var(--odn-otp-line-height-large);
+    border-radius: var(--odn-otp-border-radius-large);
+  }
+  [data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true]) {
+    color: var(--odn-otp-color-normal);
+    background: var(--odn-otp-bg-normal);
+    border: var(--odn-otp-border-normal);
+    box-shadow: var(--odn-otp-shadow-normal);
+  }
+  [data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true]):hover {
+    color: var(--odn-otp-color-normal-hover);
+    background: var(--odn-otp-bg-normal-hover);
+    border: var(--odn-otp-border-normal-hover);
+    box-shadow: var(--odn-otp-shadow-normal-hover);
+  }
+  [data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true]):focus {
+    color: var(--odn-otp-color-normal-focus);
+    background: var(--odn-otp-bg-normal-focus);
+    border: var(--odn-otp-border-normal-focus);
+    box-shadow: var(--odn-otp-shadow-normal-focus);
+  }
+  [data-odn-otp-input-intent=normal]:not([data-odn-otp-input-disabled=true])::selection {
+    background: var(--odn-otp-bg-normal-selection);
+  }
+}

package/dist/input-otp/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/input-otp/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/layout/index.d.ts

@@ -0,0 +1,3 @@
+import './style';
+export { RuyiLayout, type RuyiLayoutProps, type RuyiMenuItem, } from './layout';
+export { MpLayout, type MpLayoutProps, type MpMenuItem, type MpTabItem, type MpSubTab, } from './mp-layout';

package/dist/layout/index.js

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

package/dist/layout/layout.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+export type RuyiMenuItem = {
+    key: string;
+    label: string;
+    icon?: string;
+    badge?: string;
+    children?: RuyiMenuItem[];
+};
+export type RuyiLayoutProps = {
+    navItems?: string[];
+    activeNav?: string;
+    onNavChange?: (nav: string) => void;
+    menuItems: RuyiMenuItem[];
+    activeMenu: string;
+    onMenuChange: (key: string) => void;
+    /** 顶栏右侧自定义内容，默认渲染标准按钮组 */
+    headerRight?: React.ReactNode;
+    /** 账号名称，如 "香奈儿/Chanel-美妆护肤" */
+    accountName?: string;
+    /** 账号 ID */
+    accountId?: string;
+    /** 是否显示侧边栏收起按钮 */
+    collapsible?: boolean;
+    /** 外层容器 className */
+    className?: string;
+    /** body 区域（header 下方）className */
+    bodyClassName?: string;
+    /** 内容区 className */
+    contentClassName?: string;
+    children: React.ReactNode;
+};
+export declare function RuyiLayout({ navItems, activeNav, onNavChange, menuItems, activeMenu, onMenuChange, headerRight, accountName, accountId, collapsible, className, bodyClassName, contentClassName, children, }: RuyiLayoutProps): React.JSX.Element;

package/dist/layout/layout.js

@@ -0,0 +1,203 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 Button from "../button";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapse";
+import HoverFill from "../hover-fill";
+import Icon from "../icon";
+import ScrollArea from "../scroll-area";
+var DEFAULT_NAV = ['首页', '洞察诊断', '人群策略', '策略应用', '全域度量', '数据工厂'];
+var RUYI_LOGO = 'https://dmp.gdtimg.com/static/dmp-web/test/images/ruyi-logo.aed6102a.svg';
+export function RuyiLayout(_ref) {
+  var _ref$navItems = _ref.navItems,
+    navItems = _ref$navItems === void 0 ? DEFAULT_NAV : _ref$navItems,
+    activeNav = _ref.activeNav,
+    onNavChange = _ref.onNavChange,
+    menuItems = _ref.menuItems,
+    activeMenu = _ref.activeMenu,
+    onMenuChange = _ref.onMenuChange,
+    headerRight = _ref.headerRight,
+    _ref$accountName = _ref.accountName,
+    accountName = _ref$accountName === void 0 ? '品牌名 – 行业' : _ref$accountName,
+    _ref$accountId = _ref.accountId,
+    accountId = _ref$accountId === void 0 ? '00000' : _ref$accountId,
+    _ref$collapsible = _ref.collapsible,
+    collapsible = _ref$collapsible === void 0 ? false : _ref$collapsible,
+    className = _ref.className,
+    bodyClassName = _ref.bodyClassName,
+    contentClassName = _ref.contentClassName,
+    children = _ref.children;
+  var _useState = useState(function () {
+      return Object.fromEntries(menuItems.map(function (g) {
+        return [g.key, true];
+      }));
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    expandedGroups = _useState2[0],
+    setExpandedGroups = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    collapsed = _useState4[0],
+    setCollapsed = _useState4[1];
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout": true,
+    className: className
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-header": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-header-left": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-logo": true,
+    style: {
+      backgroundImage: "url(".concat(RUYI_LOGO, ")")
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-nav": true
+  }, navItems.map(function (label) {
+    var isActive = activeNav === label;
+    return /*#__PURE__*/React.createElement(HoverFill, {
+      key: label,
+      bgStyle: {
+        borderRadius: 8
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      "data-odn-ruyi-layout-nav-item": true,
+      "data-active": isActive || undefined,
+      style: {
+        transition: 'text-shadow 0.3s',
+        textShadow: isActive ? '-0.2px 0 0 currentColor, 0.2px 0 0 currentColor, 0 -0.2px 0 currentColor, 0 0.2px 0 currentColor' : 'none'
+      },
+      onClick: function onClick() {
+        return onNavChange === null || onNavChange === void 0 ? void 0 : onNavChange(label);
+      }
+    }, label));
+  }))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-header-right": true
+  }, headerRight !== null && headerRight !== void 0 ? headerRight : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    icon: "code"
+  }), /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    icon: "user-pack"
+  }), /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    icon: "bell"
+  }), /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    icon: "help-circle"
+  }), /*#__PURE__*/React.createElement(Button, {
+    light: true,
+    icon: "setting"
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-divider": true
+  }), /*#__PURE__*/React.createElement(HoverFill, {
+    bgStyle: {
+      borderRadius: 8
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-account": true
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-account-name": true
+  }, accountName), /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-account-id": true
+  }, "ID: ", accountId)), /*#__PURE__*/React.createElement(Icon, {
+    name: "down-filled"
+  }))))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-body": true,
+    className: bodyClassName
+  }, !collapsed && /*#__PURE__*/React.createElement(ScrollArea, {
+    "data-odn-ruyi-layout-sidebar": true
+  }, menuItems.map(function (group) {
+    var _group$children2;
+    return /*#__PURE__*/React.createElement(Collapsible, {
+      key: group.key,
+      open: expandedGroups[group.key],
+      onOpenChange: function onOpenChange(open) {
+        return setExpandedGroups(function (prev) {
+          return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, group.key, open));
+        });
+      }
+    }, /*#__PURE__*/React.createElement(CollapsibleTrigger, {
+      asChild: true
+    }, function (_ref2) {
+      var _group$children;
+      var isOpen = _ref2.isOpen;
+      var groupActive = !isOpen && ((_group$children = group.children) === null || _group$children === void 0 ? void 0 : _group$children.some(function (c) {
+        return c.key === activeMenu;
+      }));
+      return /*#__PURE__*/React.createElement(HoverFill, {
+        bgStyle: {
+          borderRadius: 36
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-odn-ruyi-layout-menu-group": true,
+        "data-active": groupActive || undefined
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-odn-ruyi-layout-menu-group-left": true
+      }, /*#__PURE__*/React.createElement(Icon, {
+        name: group.icon,
+        color: groupActive ? 'var(--odn-color-blue-6)' : undefined
+      }), /*#__PURE__*/React.createElement("div", {
+        "data-odn-ruyi-layout-menu-group-label": true
+      }, group.label)), /*#__PURE__*/React.createElement(Icon, {
+        name: "up",
+        "data-odn-ruyi-layout-menu-arrow": true,
+        "data-collapsed": !isOpen || undefined,
+        color: groupActive ? 'var(--odn-color-blue-6)' : undefined
+      })));
+    }), /*#__PURE__*/React.createElement(CollapsibleContent, null, /*#__PURE__*/React.createElement("div", {
+      "data-odn-ruyi-layout-menu-children": true
+    }, (_group$children2 = group.children) === null || _group$children2 === void 0 ? void 0 : _group$children2.map(function (child) {
+      var isActive = activeMenu === child.key;
+      return /*#__PURE__*/React.createElement(HoverFill, {
+        key: child.key,
+        "data-odn-ruyi-layout-menu-item-wrapper": true,
+        bgStyle: {
+          borderRadius: 30
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-odn-ruyi-layout-menu-item": true,
+        "data-active": isActive || undefined,
+        onClick: function onClick() {
+          return onMenuChange(child.key);
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        "data-odn-ruyi-layout-menu-item-label": true
+      }, child.label), child.badge && /*#__PURE__*/React.createElement("div", {
+        "data-odn-ruyi-layout-badge": true
+      }, child.badge)));
+    }))));
+  }), collapsible && /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-collapse-section": true
+  }, /*#__PURE__*/React.createElement(HoverFill, {
+    bgStyle: {
+      borderRadius: 36
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-ruyi-layout-collapse-btn": true,
+    onClick: function onClick() {
+      return setCollapsed(true);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "menu"
+  }), /*#__PURE__*/React.createElement("span", {
+    "data-odn-ruyi-layout-collapse-btn-text": true
+  }, "\u6536\u8D77"))))), /*#__PURE__*/React.createElement(ScrollArea, {
+    "data-odn-ruyi-layout-content": true,
+    "data-sidebar-collapsed": collapsed || undefined
+  }, /*#__PURE__*/React.createElement("div", {
+    className: contentClassName
+  }, children))));
+}

package/dist/layout/mp-layout.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+export type MpMenuItem = {
+    key: string;
+    label: string;
+    icon?: React.ReactNode;
+    children?: Omit<MpMenuItem, 'icon' | 'children'>[];
+};
+export type MpTabItem = {
+    value: string;
+    label: React.ReactNode;
+};
+export type MpSubTab = {
+    key: string;
+    label: string;
+    href?: string;
+    onClick?: () => void;
+};
+export type MpLayoutProps = {
+    /** Logo 区域，默认为小程序 SVG logo */
+    logo?: React.ReactNode;
+    /** 顶栏导航链接（文档、社区等） */
+    navLinks?: {
+        label: string;
+        href?: string;
+        active?: boolean;
+    }[];
+    /** 工具下拉菜单项 */
+    toolItems?: {
+        label: string;
+        href?: string;
+    }[];
+    /** 用户头像 URL */
+    avatarUrl?: string;
+    /** 用户名 */
+    userName?: string;
+    /** 退出回调 */
+    onLogout?: () => void;
+    /** 自定义整个顶栏右侧区域 */
+    headerRight?: React.ReactNode;
+    /** 侧边栏菜单 */
+    menuItems: MpMenuItem[];
+    /** 当前激活的菜单项 key */
+    activeMenu: string;
+    /** 菜单切换回调 */
+    onMenuChange: (key: string) => void;
+    /** 页面标题 */
+    pageTitle?: string;
+    /** 主标签页 */
+    tabs?: MpTabItem[];
+    /** 当前激活的标签页 */
+    activeTab?: string;
+    /** 标签页切换回调 */
+    onTabChange?: (value: string) => void;
+    /** 子标签页（标签页下方的链接行） */
+    subTabs?: MpSubTab[];
+    /** 当前激活的子标签页 key */
+    activeSubTab?: string;
+    /** 子标签页切换回调 */
+    onSubTabChange?: (key: string) => void;
+    /** 外层容器 className */
+    className?: string;
+    /** 侧边栏 className */
+    sidebarClassName?: string;
+    /** 内容区 className */
+    contentClassName?: string;
+    children: React.ReactNode;
+};
+export declare function MpLayout({ logo, navLinks, toolItems, avatarUrl, userName, onLogout, headerRight, menuItems, activeMenu, onMenuChange, pageTitle, tabs, activeTab, onTabChange, subTabs, activeSubTab, onSubTabChange, className, sidebarClassName, contentClassName, children, }: MpLayoutProps): React.JSX.Element;

package/dist/layout/mp-layout.js

@@ -0,0 +1,204 @@
+'use client';
+
+import React from 'react';
+import Icon from "../icon";
+import Tabs from "../tabs";
+var MP_LOGO_URL = "data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 185.4 47' xml:space='preserve'%3e%3cstyle%3e.st1%7bfill:%235e5e5e%7d%3c/style%3e%3cpath d='M50.4 20c-1.8 3-4.8 5.3-8.5 6.3-.1 0-.2.1-.3.1-.6.2-1.1.3-1.7.3-2.5 0-3.9-1.7-3.2-3.8.6-1.5 2-2.8 3.8-3.4 2.8-1 4.7-3.3 4.7-6 0-3.6-3.5-6.5-7.8-6.5s-7.8 2.9-7.8 6.5v20c0 4.8-2.8 9-7 11.4-2.3 1.3-5 2.1-7.8 2.1C6.6 47 0 40.9 0 33.5c0-2.4.7-4.6 1.9-6.5 1.8-3 4.9-5.3 8.5-6.3.6-.2 1.3-.3 1.9-.3 2.5 0 3.9 1.7 3.2 3.8-.5 1.4-1.9 2.6-3.5 3.3-.2.1-.4.1-.6.2-2.7 1-4.4 3.2-4.4 5.8 0 3.6 3.5 6.5 7.8 6.5s7.8-2.9 7.8-6.5v-20c0-4.8 2.8-9 7-11.4C31.9.8 34.6 0 37.4 0c8.2 0 14.8 6.1 14.8 13.5 0 2.4-.7 4.6-1.8 6.5z' fill='%236467ef'/%3e%3cpath class='st1' d='M172.2 9.9c-.7-1.4-1.6-3.3-2.1-4.3l-2.9.9 1.7 3.3h-14.5v12.4c0 8.4-.6 12.2-4 17.7l2.6 1.4c3.5-6 4.3-9.7 4.3-19.3v-9.4h28.1V9.9h-13.2z'/%3e%3cpath class='st1' d='M173.8 25.1l-.5-.3c2.6-1.6 8-5.1 9.5-6.1V16h-22.6v2.6h18.1c-1.5 1-5.1 3.3-7.3 4.6-2.1-1.4-4.4-3-5.9-3.9l-1.8 1.9c1.6 1.1 4.4 2.9 6.7 4.4h-11.7v2.7h11.9V36c0 2.1-.5 2.4-3 2.4h-4.5l.5 2.7h4.5c3.9 0 5.3-.9 5.3-4.5v-8.3h8.6l-3.4 5.5 2.6 1.1 3.8-6.7v-2.6H173l.8-.5zM142.2 8.4h-17.5v10.4h17.5V8.4zm-2.9 8h-11.9V11h11.9v5.4zM123.8 28.6c-1.2-1.5-3.7-4.3-4.7-5.4l-1.1 1V20h5v-2.8h-5v-5.8c1.9-.4 3.8-.8 5.3-1.2l-.6-2.7c-3.5 1-9.1 2-12.6 2.5l.3 2.7c1.4-.2 3.2-.5 5-.8v5.3H110V20h5.2c-1.2 3.9-3.3 8.3-5.9 12l1.7 2.4c1.7-2.5 3.2-5.5 4.4-8.5v15.5h2.6V25.6c1.2 1.4 2.9 3.5 3.8 4.7l2-1.7z'/%3e%3cpath class='st1' d='M134.8 32.2h8v-2.6h-8v-4.5h9v-2.6h-20.4v2.6h8.6v4.5h-8v2.6h8v4.4h-10.7v2.8H145v-2.8h-10.2z'/%3e%3cg%3e%3cpath class='st1' d='M92.4 14.5c2.4 5.1 6.9 15.1 8.9 20.3l3.1-1.3c-2-4.8-6.9-15.5-9.2-20.2l-2.8 1.2zM75.6 13.5c-1.3 5.9-4.4 14-7.5 19.6l2.8 1.4c3.1-5.8 6.1-13.7 7.7-20.3l-3-.7zM84.9 34c0 2.6-.4 3.2-3.2 3.2h-4.9l.7 3.1h5c4.4 0 5.6-1.2 5.6-5.4V6.8H85L84.9 34z'/%3e%3c/g%3e%3c/svg%3e";
+export function MpLayout(_ref) {
+  var logo = _ref.logo,
+    _ref$navLinks = _ref.navLinks,
+    navLinks = _ref$navLinks === void 0 ? [{
+      label: '文档',
+      href: 'https://developers.weixin.qq.com/miniprogram/dev/framework/'
+    }, {
+      label: '社区',
+      href: 'https://developers.weixin.qq.com/'
+    }] : _ref$navLinks,
+    _ref$toolItems = _ref.toolItems,
+    toolItems = _ref$toolItems === void 0 ? [{
+      label: '生成小程序码'
+    }] : _ref$toolItems,
+    avatarUrl = _ref.avatarUrl,
+    _ref$userName = _ref.userName,
+    userName = _ref$userName === void 0 ? '账号名称' : _ref$userName,
+    onLogout = _ref.onLogout,
+    headerRight = _ref.headerRight,
+    menuItems = _ref.menuItems,
+    activeMenu = _ref.activeMenu,
+    onMenuChange = _ref.onMenuChange,
+    pageTitle = _ref.pageTitle,
+    tabs = _ref.tabs,
+    activeTab = _ref.activeTab,
+    onTabChange = _ref.onTabChange,
+    subTabs = _ref.subTabs,
+    activeSubTab = _ref.activeSubTab,
+    onSubTabChange = _ref.onSubTabChange,
+    className = _ref.className,
+    sidebarClassName = _ref.sidebarClassName,
+    contentClassName = _ref.contentClassName,
+    children = _ref.children;
+  var isMenuActive = function isMenuActive(item) {
+    var _item$children$some, _item$children;
+    if (item.key === activeMenu) return true;
+    return (_item$children$some = (_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.some(function (c) {
+      return c.key === activeMenu;
+    })) !== null && _item$children$some !== void 0 ? _item$children$some : false;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout": true,
+    className: className
+  }, /*#__PURE__*/React.createElement("header", {
+    "data-odn-mp-layout-header": true
+  }, /*#__PURE__*/React.createElement("h1", {
+    "data-odn-mp-layout-logo-wrapper": true
+  }, logo !== null && logo !== void 0 ? logo : /*#__PURE__*/React.createElement("a", {
+    href: "/",
+    title: "\u5FAE\u4FE1\u516C\u4F17\u5E73\u53F0 \u5C0F\u7A0B\u5E8F",
+    "data-odn-mp-layout-logo": true,
+    style: {
+      backgroundImage: "url(\"".concat(MP_LOGO_URL, "\")"),
+      backgroundSize: 'contain'
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout-header-controls": true
+  }, headerRight !== null && headerRight !== void 0 ? headerRight : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("ul", {
+    "data-odn-mp-layout-nav": true
+  }, navLinks.map(function (link) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: link.label,
+      "data-odn-mp-layout-nav-item": true,
+      "data-active": link.active || undefined
+    }, /*#__PURE__*/React.createElement("a", {
+      href: link.href,
+      target: link.href ? '_blank' : undefined,
+      rel: link.href ? 'noopener noreferrer' : undefined,
+      "data-odn-mp-layout-nav-link": true
+    }, link.label));
+  })), toolItems.length > 0 && /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout-tools": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-mp-layout-tools-trigger": true
+  }, "\u5DE5\u5177")), /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout-bell": true
+  }, /*#__PURE__*/React.createElement("a", {
+    "data-odn-mp-layout-bell-link": true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "bell",
+    "data-odn-mp-layout-bell-icon": true
+  }))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout-user": true
+  }, /*#__PURE__*/React.createElement("span", {
+    "data-odn-mp-layout-user-trigger": true
+  }, /*#__PURE__*/React.createElement("img", {
+    "data-odn-mp-layout-avatar": true,
+    src: avatarUrl,
+    alt: ""
+  }), /*#__PURE__*/React.createElement(Icon, {
+    name: "down",
+    "data-odn-mp-layout-user-arrow": true
+  })))))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout-body": true
+  }, /*#__PURE__*/React.createElement("nav", {
+    "data-odn-mp-layout-sidebar": true,
+    className: sidebarClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout-menu": true
+  }, menuItems.map(function (group, groupIndex) {
+    var _group$children, _group$children2;
+    var isLastGroup = groupIndex === menuItems.length - 1;
+    if (!((_group$children = group.children) !== null && _group$children !== void 0 && _group$children.length)) {
+      var active = group.key === activeMenu;
+      return /*#__PURE__*/React.createElement("dl", {
+        key: group.key,
+        "data-odn-mp-layout-menu-group": true
+      }, /*#__PURE__*/React.createElement("dt", {
+        "data-odn-mp-layout-menu-group-title": true,
+        "data-active": active || undefined,
+        "data-clickable": true,
+        onClick: function onClick() {
+          return onMenuChange(group.key);
+        }
+      }, /*#__PURE__*/React.createElement("a", {
+        "data-odn-mp-layout-menu-group-link": true,
+        "data-active": active || undefined
+      }, group.icon && /*#__PURE__*/React.createElement("span", {
+        "data-odn-mp-layout-menu-icon": true
+      }, group.icon), /*#__PURE__*/React.createElement("span", {
+        "data-odn-mp-layout-menu-label": true
+      }, group.label))), !isLastGroup && /*#__PURE__*/React.createElement("div", {
+        "data-odn-mp-layout-separator": true
+      }));
+    }
+    return /*#__PURE__*/React.createElement("dl", {
+      key: group.key,
+      "data-odn-mp-layout-menu-group": true
+    }, /*#__PURE__*/React.createElement("dt", {
+      "data-odn-mp-layout-menu-group-title": true,
+      "data-has-children": true
+    }, /*#__PURE__*/React.createElement("a", {
+      "data-odn-mp-layout-menu-group-link": true
+    }, group.icon && /*#__PURE__*/React.createElement("span", {
+      "data-odn-mp-layout-menu-icon": true
+    }, group.icon), /*#__PURE__*/React.createElement("span", {
+      "data-odn-mp-layout-menu-label": true
+    }, group.label))), (_group$children2 = group.children) === null || _group$children2 === void 0 ? void 0 : _group$children2.map(function (child) {
+      var childActive = child.key === activeMenu;
+      return /*#__PURE__*/React.createElement("dd", {
+        key: child.key,
+        "data-odn-mp-layout-menu-item": true,
+        "data-active": childActive || undefined,
+        onClick: function onClick() {
+          return onMenuChange(child.key);
+        }
+      }, /*#__PURE__*/React.createElement("a", {
+        "data-odn-mp-layout-menu-item-link": true,
+        "data-active": childActive || undefined
+      }, child.label));
+    }), !isLastGroup && /*#__PURE__*/React.createElement("div", {
+      "data-odn-mp-layout-separator": true
+    }));
+  }))), /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout-content": true,
+    className: contentClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout-content-scroll": true
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout-content-inner": true
+  }, pageTitle && /*#__PURE__*/React.createElement("h2", {
+    "data-odn-mp-layout-page-title": true
+  }, pageTitle), tabs && tabs.length > 0 && /*#__PURE__*/React.createElement(Tabs.Default, {
+    gap: 20,
+    items: tabs,
+    value: activeTab,
+    onChange: function onChange(_, value) {
+      return onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(value);
+    },
+    "data-odn-mp-layout-tabs": true,
+    style: {
+      '--odn-tabs-active-color': '#000',
+      '--odn-tabs-active-font-weight': '600',
+      '--odn-tabs-item-padding-top': '10px',
+      '--odn-tabs-item-padding-bottom': '10px',
+      '--odn-tabs-item-padding-left': '10px',
+      '--odn-tabs-item-padding-right': '10px'
+    }
+  }), subTabs && subTabs.length > 0 && /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout-subtabs": true
+  }, subTabs.map(function (sub, i) {
+    return /*#__PURE__*/React.createElement("a", {
+      key: sub.key,
+      href: sub.href,
+      "data-odn-mp-layout-subtab": true,
+      "data-active": activeSubTab === sub.key || undefined,
+      "data-first": i === 0 || undefined,
+      onClick: function onClick(e) {
+        var _sub$onClick;
+        if (!sub.href) e.preventDefault();
+        (_sub$onClick = sub.onClick) === null || _sub$onClick === void 0 || _sub$onClick.call(sub);
+        onSubTabChange === null || onSubTabChange === void 0 || onSubTabChange(sub.key);
+      }
+    }, sub.label);
+  })), /*#__PURE__*/React.createElement("div", {
+    "data-odn-mp-layout-children": true
+  }, children))))));
+}