listpage-next 0.0.252 → 0.0.254

package/dist/features/ReactApp/Layout.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { MenuItem } from '../../components';
+import { type MenuItem } from '../../ui/Menu';
 export interface LayoutProps {
     menus: MenuItem[];
     basename?: string;

package/dist/features/ReactApp/Layout.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
-import { Menu, PageLayout } from "../../components/index.js";
+import { PageLayout } from "../../components/index.js";
+import { Menu } from "../../ui/Menu/index.js";
 import { getDefaultActiveKey } from "./utils.js";
 const Layout = (props)=>{
     const { menus, basename = '', title, icon } = props;
@@ -15,12 +16,12 @@ const Layout = (props)=>{
             icon,
             title
         },
+        content: /*#__PURE__*/ jsx(Outlet, {}),
         sider: /*#__PURE__*/ jsx(Menu, {
             items: menus,
             defaultActiveKey: defaultActiveKey,
             onSelect: navigate
-        }),
-        content: /*#__PURE__*/ jsx(Outlet, {})
+        })
     });
 };
 export { Layout };

package/dist/ui/Menu/SiderItem.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 export interface MenuItem {
-    id: string;
+    key: string;
     label: string;
     icon?: React.ReactNode;
-    path?: string;
     children?: MenuItem[];
     badge?: number | string;
 }
@@ -16,6 +15,8 @@ interface InternalSidebarItemProps {
     onToggleExpand: (id: string) => void;
     onNavigate?: (path: string) => void;
     level?: number;
+    parentPath?: string;
 }
+export declare const resolvePath: (key: string, parentPath?: string) => string;
 export declare const SidebarItem: React.FC<InternalSidebarItemProps>;
 export {};

package/dist/ui/Menu/SiderItem.js

@@ -1,13 +1,18 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import "react";
 import { ChevronDown, Circle } from "lucide-react";
-const SidebarItem = ({ item, isCollapsed, isActive, activePath, expandedIds, onToggleExpand, onNavigate, level = 0 })=>{
-    const hasChildren = item.children && item.children.length > 0;
-    const isExpanded = expandedIds.includes(item.id);
+const resolvePath = (key, parentPath)=>{
+    const path = `${parentPath || ''}/${key}`;
+    return path.replace(/\/+/g, '/');
+};
+const SidebarItem = ({ item, isCollapsed, isActive, activePath, expandedIds, onToggleExpand, onNavigate, level = 0, parentPath })=>{
+    const hasChildren = !isCollapsed && item.children && item.children.length > 0;
+    const isExpanded = expandedIds.includes(item.key);
+    const currentPath = resolvePath(item.key, parentPath);
     const handleClick = (e)=>{
         e.stopPropagation();
-        if (hasChildren) onToggleExpand(item.id);
-        else if (item.path) onNavigate?.(item.path);
+        if (hasChildren) onToggleExpand(item.key);
+        else onNavigate?.(currentPath);
     };
     const paddingLeft = isCollapsed ? '0' : `${12 * level + 12}px`;
     return /*#__PURE__*/ jsxs("div", {
@@ -15,8 +20,7 @@ const SidebarItem = ({ item, isCollapsed, isActive, activePath, expandedIds, onT
         children: [
             /*#__PURE__*/ jsxs("div", {
                 onClick: handleClick,
-                className: `
-          relative flex items-center justify-between py-1.5 px-2 mx-2 rounded-md cursor-pointer transition-all duration-200 group
+                className: `h-[40px] relative flex items-center justify-between py-1.5 px-2 mx-2 rounded-md cursor-pointer transition-all duration-200 group
           ${isActive ? 'bg-[#007AFF] text-white shadow-sm' : 'text-neutral-400 hover:bg-white/10 hover:text-neutral-200'}
           ${isCollapsed ? 'justify-center mx-2 px-0' : ''}
         `,
@@ -40,7 +44,7 @@ const SidebarItem = ({ item, isCollapsed, isActive, activePath, expandedIds, onT
                                 })
                             }),
                             !isCollapsed && /*#__PURE__*/ jsx("span", {
-                                className: `truncate text-[13px] leading-none ${isActive ? 'font-medium' : 'font-normal'}`,
+                                className: `truncate text-[14px] leading-none ${isActive ? 'font-medium' : 'font-normal'}`,
                                 children: item.label
                             })
                         ]
@@ -53,7 +57,7 @@ const SidebarItem = ({ item, isCollapsed, isActive, activePath, expandedIds, onT
                                 children: item.badge
                             }),
                             hasChildren && /*#__PURE__*/ jsx("span", {
-                                className: `transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''} ${isActive ? 'text-white/70' : 'text-neutral-600'}`,
+                                className: `transition-transform duration-200 text-white/70 ${isExpanded ? 'rotate-180' : ''}`,
                                 children: /*#__PURE__*/ jsx(ChevronDown, {
                                     size: 12
                                 })
@@ -67,15 +71,16 @@ const SidebarItem = ({ item, isCollapsed, isActive, activePath, expandedIds, onT
                 children: item.children?.map((child)=>/*#__PURE__*/ jsx(SidebarItem, {
                         item: child,
                         isCollapsed: isCollapsed,
-                        isActive: child.path === activePath,
+                        isActive: resolvePath(child.key, currentPath) === activePath,
                         activePath: activePath,
                         expandedIds: expandedIds,
                         onToggleExpand: onToggleExpand,
                         onNavigate: onNavigate,
-                        level: level + 1
-                    }, child.id))
+                        level: level + 1,
+                        parentPath: currentPath
+                    }, child.key))
             })
         ]
     });
 };
-export { SidebarItem };
+export { SidebarItem, resolvePath };

package/dist/ui/Menu/index.d.ts

@@ -1,10 +1,11 @@
 import { MenuItem } from './SiderItem';
+export { type MenuItem } from './SiderItem';
 export interface MenuProps {
     title?: string;
     items: MenuItem[];
     isCollapsed?: boolean;
-    activePath?: string;
-    defaultActivePath?: string;
-    onNavigate?: (path: string) => void;
+    activeKey?: string;
+    defaultActiveKey?: string;
+    onSelect?: (path: string) => void;
 }
 export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/Menu/index.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { SidebarItem } from "./SiderItem.js";
+import { SidebarItem, resolvePath } from "./SiderItem.js";
 import { useControllableValue } from "ahooks";
 const Menu = (props)=>{
     const { items, isCollapsed, title } = props;
     const [activePath, setActivePath] = useControllableValue(props, {
-        valuePropName: 'activePath',
-        trigger: 'onNavigate',
-        defaultValuePropName: 'defaultActivePath',
+        valuePropName: 'activeKey',
+        trigger: 'onSelect',
+        defaultValuePropName: 'defaultActiveKey',
         defaultValue: ''
     });
     const [expandedIds, setExpandedIds] = useState([]);
@@ -18,7 +18,7 @@ const Menu = (props)=>{
             ]);
     };
     return /*#__PURE__*/ jsxs("div", {
-        className: "flex-1 overflow-y-auto overflow-x-hidden py-2 px-2 scrollbar-hide",
+        className: `overflow-y-auto overflow-x-hidden py-2 px-2 scrollbar-hide bg-[#000c17] ${isCollapsed ? 'w-[80px]' : 'flex-1'}`,
         children: [
             !isCollapsed && title && /*#__PURE__*/ jsx("div", {
                 className: "px-3 mb-2 mt-2 text-[11px] font-medium text-neutral-500 uppercase tracking-widest",
@@ -29,12 +29,12 @@ const Menu = (props)=>{
                 children: items.map((item)=>/*#__PURE__*/ jsx(SidebarItem, {
                         item: item,
                         isCollapsed: isCollapsed ?? false,
-                        isActive: item.path === activePath,
+                        isActive: resolvePath(item.key) === activePath,
                         activePath: activePath,
                         expandedIds: expandedIds,
                         onToggleExpand: handleToggleExpand,
                         onNavigate: setActivePath
-                    }, item.id))
+                    }, item.key))
             })
         ]
     });

package/dist/ui/index.d.ts

@@ -3,5 +3,5 @@ export { Button, type ButtonProps } from './Button';
 export { LogPreview, type LogPreviewProps, type LogEntry } from './LogPreview';
 export { StatusTag, type StatusTagProps } from './StatusTag';
 export { Tabs, type TabsProps } from './Tabs';
-export { Menu, type MenuProps } from './Menu';
+export { Menu, type MenuProps, type MenuItem } from './Menu';
 export { FileManager, AssetSelectorModal } from './FileManager';

package/dist/ui.css

@@ -71,7 +71,6 @@
     --color-neutral-200: oklch(92.2% 0 0);
     --color-neutral-400: oklch(70.8% 0 0);
     --color-neutral-500: oklch(55.6% 0 0);
-    --color-neutral-600: oklch(43.9% 0 0);
     --color-stone-400: oklch(70.9% 0.01 56.259);
     --color-stone-500: oklch(55.3% 0.013 58.071);
     --color-black: #000;
@@ -427,6 +426,9 @@
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
+  .h-\[40px\] {
+    height: 40px;
+  }
   .h-\[85vh\] {
     height: 85vh;
   }
@@ -490,6 +492,9 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
+  .w-\[80px\] {
+    width: 80px;
+  }
   .w-\[200px\] {
     width: 200px;
   }
@@ -882,6 +887,9 @@
   .bg-\[\#0B1120\] {
     background-color: #0B1120;
   }
+  .bg-\[\#000c17\] {
+    background-color: #000c17;
+  }
   .bg-\[\#007AFF\] {
     background-color: #007AFF;
   }
@@ -1312,8 +1320,8 @@
   .text-\[11px\] {
     font-size: 11px;
   }
-  .text-\[13px\] {
-    font-size: 13px;
+  .text-\[14px\] {
+    font-size: 14px;
   }
   .leading-none {
     --tw-leading: 1;
@@ -1410,9 +1418,6 @@
   .text-neutral-500 {
     color: var(--color-neutral-500);
   }
-  .text-neutral-600 {
-    color: var(--color-neutral-600);
-  }
   .text-orange-400 {
     color: var(--color-orange-400);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.252",
+  "version": "0.0.254",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",