@pisell/private-materials 6.4.55 → 6.4.57

package/es/components/ticketBooking/components/ProductDisplayAdapter/index.less

@@ -0,0 +1,41 @@
+.sku-list-container {
+  height: 100%;
+  background-color: #4e4e4e;
+  .sku-list {
+    background-color: #4e4e4e;
+    overflow: auto;
+    border-radius: 0;
+    .list-group-items {
+      .list-item {
+        height: 100% !important;
+        .pisell-product-sku__card-wrapper {
+          height: 100% ;
+          .pisell-lowcode-card {
+            height: 100% !important;
+          }
+        }
+      }
+    }
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+  .list-content {
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+  .pisell-list-header {
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+      width: 0;
+      height: 0;
+    }
+  }
+}

package/es/components/ticketBooking/components/ProductDisplayAdapter/types.js

@@ -0,0 +1,273 @@
+/**
+ * 产品展示配置类型定义
+ */
+
+// 导入 SkuCard 的完整类型定义
+
+/** 预设配置的字符串键 */
+
+// 同 'product-select'
+
+/** ProductSelect 布局配置 */
+
+/** ProductSelect 列表设置 */
+
+/** ProductSelect 模式配置 */
+
+/** SkuCard 显示模式 */
+
+/**
+ * SkuCard 配置
+ * 直接使用 ProductCardConfig 类型，保持类型同步
+ *
+ * @see packages/private-materials/src/plus/productSelect/ProductCard/SkuCard/type.ts ProductCardConfig
+ */
+
+/** List 布局类型 */
+
+/** Tab 样式类型 */
+
+/** List 组件配置 */
+
+/** SkuList 模式配置 */
+
+/** 展示模式类型 */
+
+/**
+ * 产品展示配置
+ * 用于配置化控制产品展示的方式
+ */
+
+/**
+ * 产品展示配置预设
+ * 支持通过字符串键或直接使用配置对象
+ */
+export var ProductDisplayPresets = {
+  // 默认配置
+  default: {
+    displayMode: 'product-select',
+    productSelectConfig: {
+      showSearch: true,
+      showTab: true,
+      layout: {
+        grid: true,
+        config: '12:12'
+      },
+      productListSetting: {
+        isProductCover: 1,
+        isTitle: 1,
+        isSubtitle: 1,
+        isPrice: 1,
+        isOriginPrice: 0,
+        isStock: 0
+      }
+    }
+  },
+  // 别名：product-select
+  'product-select': {
+    displayMode: 'product-select',
+    productSelectConfig: {
+      showSearch: true,
+      showTab: true,
+      layout: {
+        grid: true,
+        config: '12:12'
+      },
+      productListSetting: {
+        isProductCover: 1,
+        isTitle: 1,
+        isSubtitle: 1,
+        isPrice: 1,
+        isOriginPrice: 0,
+        isStock: 0
+      }
+    }
+  },
+  // SkuList A1
+  'sku-list-a1': {
+    displayMode: 'sku-list',
+    skuListConfig: {
+      listConfig: {
+        layout: 'grid',
+        showPagination: false,
+        showTab: false
+      },
+      skuCardAllConfig: {
+        skuCardConfig: {
+          displayMode: 'display_a1',
+          isFavorite: false,
+          layoutDirection: 'column'
+        }
+      }
+    }
+  },
+  // SkuList A2 - 详细信息卡片
+  'sku-list-a2': {
+    displayMode: 'sku-list',
+    skuListConfig: {
+      listConfig: {
+        layout: 'grid',
+        showPagination: false,
+        showTab: false
+      },
+      skuCardAllConfig: {
+        skuCardConfig: {
+          displayMode: 'display_a2',
+          layoutDirection: 'row',
+          radius: 12,
+          paddingX: 12,
+          paddingY: 12,
+          skuImageConfig: {
+            isCover: true,
+            width: '140px',
+            height: '140px',
+            radius: 8
+          },
+          skuNameConfig: {
+            isOpen: true,
+            fontSize: 16,
+            fontWeight: 600,
+            color: '#101828',
+            ellipsisCount: 2
+          },
+          skuSubtitleConfig: {
+            isOpen: true,
+            fontSize: 14,
+            color: '#667085',
+            ellipsisCount: 1
+          },
+          skuPriceConfig: {
+            isOpen: true,
+            isPrice: true,
+            priceFontSize: 18,
+            priceFontWeight: 600,
+            priceColor: '#101828',
+            isOriginPrice: true,
+            originPriceFontSize: 14,
+            originPriceColor: '#98A2B3'
+          },
+          skuStockConfig: {
+            isOpen: true,
+            fontSize: 12,
+            color: '#667085'
+          }
+        }
+      }
+    }
+  },
+  // SkuList A5
+  'sku-list-a5': {
+    displayMode: 'sku-list',
+    skuListConfig: {
+      listConfig: {
+        layout: 'grid',
+        showPagination: false,
+        showTab: true,
+        // 启用 Tab
+        tabStyle: 'switch',
+        // 使用 switch 模式
+        stickyTop: true,
+        // Tab 吸顶
+        columns: 5,
+        tabGroup: 'category'
+      },
+      skuCardAllConfig: {
+        skuCardConfig: {
+          displayMode: 'display_a5',
+          layoutDirection: 'column',
+          background: '#ffffff',
+          paddingY: 8,
+          paddingX: 8,
+          marginY: 0,
+          marginX: 0,
+          radius: 12,
+          isBorderVisible: false,
+          borderWidth: 1,
+          borderColor: '#ffffff',
+          isFoldable: true
+        },
+        skuActionConfig: {
+          isOpen: false
+        },
+        skuTextConfig: {
+          skuSubtitleConfig: {
+            isOpen: false
+          },
+          skuNameConfig: {
+            isOpen: true
+            // fontSize: 18,
+            // fontWeight: 600,
+            // color: '#101828',
+            // ellipsisCount: 1,
+          },
+          skuPriceConfig: {
+            isOpen: true,
+            isPrice: true,
+            priceFontSize: 18,
+            priceFontWeight: 600,
+            priceColor: '#101828',
+            isShowZeroPrice: true,
+            isShowFreePrice: false,
+            isOriginPrice: true,
+            originPriceFontSize: 16,
+            originPriceFontWeight: 400,
+            originPriceColor: '#667085',
+            isTaxPrice: true,
+            isCustomText: false
+          }
+        },
+        skuImageConfig: {
+          isCover: true,
+          width: '100%',
+          height: '126px',
+          isTextFallback: true,
+          background: '#ffffff',
+          skuImageRadius: 12,
+          slotPosition: 'left_top',
+          radius: 12
+        },
+        skuExtraConfig: {
+          isOpen: false
+        }
+      }
+    }
+  }
+};
+
+/**
+ * 兼容性：保持原有的导出方式
+ * @deprecated 建议使用 ProductDisplayPresets['product-select'] 或字符串键访问
+ */
+export var LegacyProductDisplayPresets = {
+  /** @deprecated 使用 ProductDisplayPresets['product-select'] */
+  DEFAULT_PRODUCT_SELECT: ProductDisplayPresets['product-select'],
+  /** @deprecated 使用 ProductDisplayPresets['sku-list-a1'] */
+  DEFAULT_SKU_LIST_A1: ProductDisplayPresets['sku-list-a1'],
+  /** @deprecated 使用 ProductDisplayPresets['sku-list-a2'] */
+  DEFAULT_SKU_LIST_A2: ProductDisplayPresets['sku-list-a2'],
+  /** @deprecated 使用 ProductDisplayPresets['sku-list-a5'] */
+  DEFAULT_SKU_LIST_A5: ProductDisplayPresets['sku-list-a5']
+};
+
+/**
+ * 工具函数：将字符串键或配置对象解析为配置对象
+ */
+export function resolveProductDisplayConfig(config) {
+  // 未传配置，使用默认
+  if (!config) {
+    return ProductDisplayPresets['default'];
+  }
+
+  // 如果是字符串，从预设中获取
+  if (typeof config === 'string') {
+    var preset = ProductDisplayPresets[config];
+    if (!preset) {
+      console.warn("Unknown preset key: \"".concat(config, "\", falling back to default"));
+      return ProductDisplayPresets['default'];
+    }
+    return preset;
+  }
+
+  // 如果是对象，直接返回
+  return config;
+}

package/es/components/ticketBooking/components/ProductDisplayAdapter/utils.js

@@ -0,0 +1,130 @@
+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; }
+/**
+ * 格式化 SKU 数据源，适配 SkuCard 组件
+ */
+export var formatSkuDataSource = function formatSkuDataSource(dataSource) {
+  return {
+    id: dataSource.id,
+    title: dataSource.title,
+    subtitle: dataSource.subtitle,
+    cover: dataSource.cover,
+    price: dataSource.price,
+    original_price: dataSource.original_price,
+    stock: dataSource.stock_quantity,
+    sortKeys: ['title', 'subtitle', 'price']
+  };
+};
+
+/**
+ * Tab 项接口定义（与 List 组件保持一致）
+ */
+
+/**
+ * 产品分类信息接口
+ */
+
+/**
+ * 产品项接口
+ */
+
+/**
+ * 根据产品数据生成分类 Tabs（Switch 模式）
+ * 参考 TestResponsiveWrapper 的 generateSimpleTabItems 函数
+ * 
+ * @param products 产品列表
+ * @param tabStyle tab 样式类型
+ * @returns TabItem 数组
+ */
+export var generateProductTabs = function generateProductTabs(products) {
+  var tabStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'switch';
+  if (!products || products.length === 0) {
+    return [{
+      key: 'all',
+      label: '全部'
+    }];
+  }
+  if (tabStyle === 'switch') {
+    // 切换模式：提取产品的分类信息，不显示动态数量
+    var categoryMap = new Map();
+
+    // 收集所有分类
+    products.forEach(function (product) {
+      if (product.category && Array.isArray(product.category)) {
+        product.category.forEach(function (cat) {
+          if (!categoryMap.has(cat.id)) {
+            categoryMap.set(cat.id, cat);
+          }
+        });
+      }
+    });
+
+    // 按 sort 字段排序（降序，sort 越大越靠前）
+    var sortedCategories = Array.from(categoryMap.values()).sort(function (a, b) {
+      return (b.sort || 0) - (a.sort || 0);
+    });
+
+    // 生成 tabs
+    var tabs = [{
+      key: 'all',
+      label: '全部'
+    }];
+    sortedCategories.forEach(function (category) {
+      tabs.push({
+        key: String(category.id),
+        label: category.name,
+        group: String(category.id)
+      });
+    });
+    return tabs;
+  } else {
+    // 锚点模式：基于实际数据统计数量
+    var categoryCount = products.reduce(function (acc, product) {
+      if (product.category && Array.isArray(product.category)) {
+        product.category.forEach(function (cat) {
+          var key = String(cat.id);
+          if (!acc[key]) {
+            acc[key] = {
+              count: 0,
+              category: cat
+            };
+          }
+          acc[key].count += 1;
+        });
+      }
+      return acc;
+    }, {});
+
+    // 生成 tabs
+    var _tabs = [{
+      key: 'all',
+      label: "\u5168\u90E8 (".concat(products.length, ")")
+    }];
+
+    // 按 sort 排序
+    var sortedEntries = Object.entries(categoryCount).sort(function (_ref, _ref2) {
+      var _ref3 = _slicedToArray(_ref, 2),
+        a = _ref3[1];
+      var _ref4 = _slicedToArray(_ref2, 2),
+        b = _ref4[1];
+      return (b.category.sort || 0) - (a.category.sort || 0);
+    });
+    sortedEntries.forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+        key = _ref6[0],
+        _ref6$ = _ref6[1],
+        count = _ref6$.count,
+        category = _ref6$.category;
+      _tabs.push({
+        key: key,
+        label: "".concat(category.name, " (").concat(count, ")"),
+        group: key
+      });
+    });
+    return _tabs;
+  }
+};

package/es/components/ticketBooking/components/addServiceVariant/addService.d.ts

@@ -1,9 +1,29 @@
+import { ProductDisplayConfig, ProductDisplayPresetKey } from '../ProductDisplayAdapter';
 import './index.less';
 interface AddServiceProps {
     onEdit?: any;
     dispatch?: any;
     state?: any;
     renderMode?: 'current' | 'drawer';
+    /**
+     * 产品展示配置
+     *
+     * 支持两种方式：
+     * 1. 简易模式：传入预设字符串，如 'product-select', 'sku-list-a1', 'sku-list-a2', 'sku-list-a5'
+     * 2. 完整配置模式：传入完整的配置对象
+     *
+     * @example
+     * // 简易模式
+     * <AddService productDisplayConfig="sku-list-a1" />
+     *
+     * @example
+     * // 完整配置模式
+     * <AddService productDisplayConfig={{
+     *   displayMode: 'sku-list',
+     *   skuListConfig: { ... }
+     * }} />
+     */
+    productDisplayConfig?: ProductDisplayPresetKey | ProductDisplayConfig;
 }
 declare const AddSerivce: (props: AddServiceProps) => JSX.Element | null;
 export default AddSerivce;

package/es/components/ticketBooking/components/addServiceVariant/addService.js

@@ -26,7 +26,7 @@ import { getProductExtend } from "../../../booking/info2/service/addService/util
 import { holderId, isDaysBooking, isNormalProductByDurationSchedule } from "../../../booking/info/service2/utils";
 import { isBooking4Shop } from "../../../booking/info/utils";
 import { useService } from "../../../booking/info/service/serviceManager";
-import ProductSelect from "../../../../plus/productSelect";
+import ProductDisplayAdapter, { resolveProductDisplayConfig } from "../ProductDisplayAdapter";
 import "./index.less";
 import { addService, addServiceScroll, createSimpleCacheItem, genServiceKey, getIsShowNumber, isSameProduct } from "../../utils";
 import NotAvailable from "../notAvailable";
@@ -34,6 +34,7 @@ import dayjs from 'dayjs';
 import { useProducts } from "../../hooks/pisellos";
 import { createCacheItem, genValues, isBundle, isOption, setHandleSetService } from "./utils";
 import { useToast } from '@pisell/materials';
+import { useIsActive } from "../../context/IsActiveContext";
 var productListLayout = {
   grid: true,
   config: '12:12'
@@ -52,11 +53,13 @@ var AddSerivce = function AddSerivce(props) {
     state = props.state,
     dispatch = props.dispatch,
     _props$renderMode = props.renderMode,
-    renderMode = _props$renderMode === void 0 ? 'current' : _props$renderMode;
+    renderMode = _props$renderMode === void 0 ? 'current' : _props$renderMode,
+    productDisplayConfig = props.productDisplayConfig;
   var context = useEngineContext();
   var notAvailableRef = useRef(null);
   var isLoadedServiceRef = useRef(false);
   request.setRequest(context.appHelper.utils.request);
+  var isActive = useIsActive();
   var Toast = useToast();
   var _useService = useService({
       renderMode: renderMode,
@@ -71,12 +74,25 @@ var AddSerivce = function AddSerivce(props) {
     _useState2 = _slicedToArray(_useState, 2),
     currentProduct = _useState2[0],
     setCurrentProduct = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    firstLoading = _useState4[0],
+    setFirstLoading = _useState4[1];
   var stateRef = useRef(state);
   stateRef.current = state;
   var _useProducts = useProducts(),
     getProducts = _useProducts.getProducts,
     products = _useProducts.products,
     loading = _useProducts.loading;
+  useEffect(function () {
+    var timer = setTimeout(function () {
+      setFirstLoading(false);
+    }, 300);
+    return function () {
+      clearTimeout(timer);
+    };
+  }, []);
+
   // 组件卸载时清理所有定时器
   useEffect(function () {
     return function () {
@@ -140,8 +156,10 @@ var AddSerivce = function AddSerivce(props) {
     });
   });
   useMemo(function () {
-    setHandleSetService(scanAddService);
-  }, []);
+    if (isActive) {
+      setHandleSetService(scanAddService);
+    }
+  }, [isActive]);
 
   /*
   const removeNotAvailableService = (list: any) => {
@@ -543,20 +561,37 @@ var AddSerivce = function AddSerivce(props) {
       });
     }
   }, [renderMode, currentDate, customerId, menuList, currentDatetime]);
+
+  // 产品展示配置，支持字符串预设或完整配置对象
+  var finalDisplayConfig = useMemo(function () {
+    // 解析配置（支持字符串或对象）
+    var resolvedConfig = resolveProductDisplayConfig(productDisplayConfig);
+
+    // 如果是 ProductSelect 模式，合并默认的 layout 和 setting
+    if (resolvedConfig.displayMode === 'product-select') {
+      var _resolvedConfig$produ, _resolvedConfig$produ2;
+      return _objectSpread(_objectSpread({}, resolvedConfig), {}, {
+        productSelectConfig: _objectSpread(_objectSpread({}, resolvedConfig.productSelectConfig), {}, {
+          layout: ((_resolvedConfig$produ = resolvedConfig.productSelectConfig) === null || _resolvedConfig$produ === void 0 ? void 0 : _resolvedConfig$produ.layout) || productListLayout,
+          productListSetting: ((_resolvedConfig$produ2 = resolvedConfig.productSelectConfig) === null || _resolvedConfig$produ2 === void 0 ? void 0 : _resolvedConfig$produ2.productListSetting) || productListSetting
+        })
+      });
+    }
+    return resolvedConfig;
+  }, [productDisplayConfig]);
   return useMemo(function () {
     if (renderMode === 'current') {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProductSelect, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ProductDisplayAdapter, {
+        config: finalDisplayConfig,
         dataSource: renderList,
-        layout: productListLayout,
-        onChange: handleSelectProduct,
-        value: currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.id,
-        loading: !renderList.length && loading,
-        productListSetting: productListSetting
+        loading: !renderList.length && loading || firstLoading,
+        currentProductId: currentProduct === null || currentProduct === void 0 ? void 0 : currentProduct.id,
+        onSelectProduct: handleSelectProduct
       }), /*#__PURE__*/React.createElement(NotAvailable, {
         ref: notAvailableRef
       }));
     }
     return null;
-  }, [state.service.addModal, locales, renderList, state.amountSymbol, state.renderType, state === null || state === void 0 ? void 0 : state.activeCartId, holderId(state), loading, currentProduct, isBooking4]);
+  }, [state.service.addModal, locales, renderList, state.amountSymbol, state.renderType, state === null || state === void 0 ? void 0 : state.activeCartId, holderId(state), loading, currentProduct, isBooking4, finalDisplayConfig]);
 };
 export default AddSerivce;

package/es/components/ticketBooking/components/addServiceVariant/index.js

@@ -8,7 +8,8 @@ import React, { useRef } from 'react';
 import AddService from "./addService";
 var AddServiceVariant = function AddServiceVariant(props) {
   var globalState = props.globalState,
-    setGlobalState = props.setGlobalState;
+    setGlobalState = props.setGlobalState,
+    productDisplayConfig = props.productDisplayConfig;
   var stateRef = useRef(globalState);
   stateRef.current = globalState;
   var dispatch = function dispatch(_ref) {
@@ -22,7 +23,8 @@ var AddServiceVariant = function AddServiceVariant(props) {
   };
   return /*#__PURE__*/React.createElement(AddService, {
     state: globalState,
-    dispatch: dispatch
+    dispatch: dispatch,
+    productDisplayConfig: productDisplayConfig
   });
 };
 export default AddServiceVariant;

package/es/components/ticketBooking/components/menuBar/index.js

@@ -4,9 +4,33 @@ import "./index.less";
 import { Menu } from 'antd';
 import { SettingOutlined } from '@ant-design/icons';
 import { locales } from '@pisell/utils';
-import { ConfigProvider } from '@pisell/materials';
-var index = function index() {
+import { ConfigProvider, Iconfont } from '@pisell/materials';
+var index = function index(props) {
+  var _props$activeNavKey = props.activeNavKey,
+    activeNavKey = _props$activeNavKey === void 0 ? 'ticket' : _props$activeNavKey,
+    onNavChange = props.onNavChange;
   var status = useNetworkStatus();
+
+  // 导航项配置
+  var navItems = [{
+    key: 'ticket',
+    icon: /*#__PURE__*/React.createElement(Iconfont, {
+      type: "pisell2-ticket",
+      style: {
+        fontSize: 32
+      }
+    }),
+    label: ''
+  }, {
+    key: 'food',
+    label: '',
+    icon: /*#__PURE__*/React.createElement(Iconfont, {
+      type: "pisell2-food",
+      style: {
+        fontSize: 32
+      }
+    })
+  }];
   var items = [{
     key: '1',
     icon: /*#__PURE__*/React.createElement(SettingOutlined, null),
@@ -43,6 +67,11 @@ var index = function index() {
       window.location.href = '/login';
     }
   };
+
+  // 处理导航项点击
+  var handleNavClick = function handleNavClick(key) {
+    onNavChange === null || onNavChange === void 0 || onNavChange(key);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: "pisell-ticket-booking-menu-bar"
   }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -58,21 +87,15 @@ var index = function index() {
     fill: "#8157D5"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "nav-wrapper"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "nav-item active"
-  }, /*#__PURE__*/React.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "32",
-    height: "25",
-    viewBox: "0 0 34 27",
-    fill: "none"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M13.8 7.05078V5.48828M13.8 14.082V12.5195M13.8 21.1133V19.5508M6.12 0.800781H27.88C29.6722 0.800781 30.5683 0.800781 31.2528 1.14139C31.8549 1.44099 32.3444 1.91905 32.6512 2.50706C33 3.17554 33 4.05062 33 5.80078V7.83203C29.9072 7.83203 27.4 10.2805 27.4 13.3008C27.4 16.3211 29.9072 18.7695 33 18.7695V20.8008C33 22.5509 33 23.426 32.6512 24.0945C32.3444 24.6825 31.8549 25.1606 31.2528 25.4602C30.5683 25.8008 29.6722 25.8008 27.88 25.8008H6.12C4.32783 25.8008 3.43175 25.8008 2.74723 25.4602C2.14511 25.1606 1.65557 24.6825 1.34878 24.0945C1 23.426 1 22.5509 1 20.8008V18.7695C4.09279 18.7695 6.6 16.3211 6.6 13.3008C6.6 10.2805 4.09279 7.83203 1 7.83203V5.80078C1 4.05062 1 3.17554 1.34878 2.50706C1.65557 1.91905 2.14511 1.44099 2.74723 1.14139C3.43175 0.800781 4.32783 0.800781 6.12 0.800781Z",
-    stroke: "white",
-    "stroke-width": "1.5",
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round"
-  }))))), /*#__PURE__*/React.createElement("div", {
+  }, navItems.map(function (navItem) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: navItem.key,
+      className: "nav-item ".concat(activeNavKey === navItem.key ? 'active' : ''),
+      onClick: function onClick() {
+        return handleNavClick(navItem.key);
+      }
+    }, navItem.icon && navItem.icon, navItem.label && navItem.label);
+  }))), /*#__PURE__*/React.createElement("div", {
     className: "menu-wrapper"
   }, /*#__PURE__*/React.createElement(ConfigProvider, {
     theme: {