mall-components 1.0.0

package/src/components/AdminLayout/Breadcrumb.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { Breadcrumb } from 'antd'
+import type { BreadcrumbItem } from './types'
+
+interface BreadcrumbProps {
+  items: BreadcrumbItem[]
+  onNavigate: (key: string) => void
+}
+
+const labelMap: Record<string, string> = {
+  dashboard: '工作台',
+  permission: '权限管理',
+  product: '商品管理',
+  order: '订单管理',
+  marketing: '营销管理',
+  users: '用户管理',
+  roles: '角色管理',
+  resources: '资源管理',
+  menus: '菜单管理',
+  list: '列表',
+  add: '添加',
+  category: '分类',
+  brand: '品牌',
+  attribute: '属性',
+  setting: '设置',
+  return: '退货',
+  reason: '原因',
+  coupon: '优惠券',
+  promotion: '促销',
+  flash: '秒杀',
+  new: '新品',
+  hot: '人气',
+  advertise: '广告',
+  subject: '专题',
+}
+
+const BreadcrumbNav: React.FC<BreadcrumbProps> = ({ items, onNavigate }) => {
+  const getLabel = (key: string): string => {
+    const parts = key.split('/')
+    return parts.map(part => labelMap[part] || part).join(' / ')
+  }
+
+  if (!items || items.length === 0) {
+    return null
+  }
+
+  return (
+    <Breadcrumb>
+      {items.map((item) => (
+        <Breadcrumb.Item key={item.key}>
+          <a onClick={() => onNavigate(item.key)}>
+            {item.label || getLabel(item.key)}
+          </a>
+        </Breadcrumb.Item>
+      ))}
+    </Breadcrumb>
+  )
+}
+
+export default BreadcrumbNav

package/src/components/AdminLayout/MainContent.tsx

@@ -0,0 +1,54 @@
+import React, { ReactNode } from 'react'
+import TabBar from './TabBar'
+import type { TabItem } from './types'
+
+interface MainContentProps {
+  children: ReactNode
+  pageKey: string
+  tabs: TabItem[]
+  activeTabKey: string
+  onTabClick: (key: string) => void
+  onCloseTab: (key: string) => void
+  onCloseOther: (keepKey: string) => void
+  onCloseAll: () => void
+  enableTabs?: boolean
+  closableTabs?: boolean
+  className?: string
+}
+
+const MainContent: React.FC<MainContentProps> = ({
+  children,
+  pageKey,
+  tabs,
+  activeTabKey,
+  onTabClick,
+  onCloseTab,
+  onCloseOther,
+  onCloseAll,
+  enableTabs = true,
+  closableTabs = true,
+  className = '',
+}) => {
+  return (
+    <main className={`main-content ${className}`}>
+      {enableTabs && tabs.length > 0 && (
+        <TabBar
+          tabs={tabs}
+          activeTabKey={activeTabKey}
+          onTabClick={onTabClick}
+          onCloseTab={onCloseTab}
+          onCloseOther={onCloseOther}
+          onCloseAll={onCloseAll}
+          closableTabs={closableTabs}
+        />
+      )}
+      <div className="content-wrapper">
+        <div className="page-container" key={pageKey}>
+          {children}
+        </div>
+      </div>
+    </main>
+  )
+}
+
+export default MainContent

package/src/components/AdminLayout/Navbar.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { Dropdown, Avatar, Space, Menu } from 'antd'
+import type { MenuProps } from 'antd'
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  UserOutlined,
+  SettingOutlined,
+  LogoutOutlined,
+} from '@ant-design/icons'
+import BreadcrumbNav from './Breadcrumb'
+import type { BreadcrumbItem } from './types'
+
+interface NavbarProps {
+  collapsed: boolean
+  onToggleCollapse: () => void
+  breadcrumbItems: BreadcrumbItem[]
+  onNavigate: (key: string) => void
+}
+
+const Navbar: React.FC<NavbarProps> = ({ collapsed, onToggleCollapse, breadcrumbItems, onNavigate }) => {
+  const userMenuItems: MenuProps['items'] = [
+    {
+      key: 'profile',
+      icon: <UserOutlined />,
+      label: '个人中心',
+    },
+    {
+      key: 'settings',
+      icon: <SettingOutlined />,
+      label: '系统设置',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      key: 'logout',
+      icon: <LogoutOutlined />,
+      label: '退出登录',
+      danger: true,
+    },
+  ]
+
+  const handleUserMenuClick: MenuProps['onClick'] = ({ key }) => {
+    if (key === 'logout') {
+      console.log('User logged out')
+    }
+  }
+
+  const menu = (
+    <Menu items={userMenuItems} onClick={handleUserMenuClick} />
+  )
+
+  return (
+    <div className="navbar-container">
+      <div className="navbar-left">
+        <button className="hamburger-btn" onClick={onToggleCollapse}>
+          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+        </button>
+        <BreadcrumbNav items={breadcrumbItems} onNavigate={onNavigate} />
+      </div>
+      <div className="navbar-right">
+        <Dropdown overlay={menu} placement="bottomRight">
+          <div className="user-info">
+            <Avatar size={32} icon={<UserOutlined />} className="user-avatar" />
+            <Space size={4} className="username">
+              <span>管理员</span>
+            </Space>
+          </div>
+        </Dropdown>
+      </div>
+    </div>
+  )
+}
+
+export default Navbar

package/src/components/AdminLayout/Sidebar.tsx

@@ -0,0 +1,256 @@
+import React, { useState } from 'react'
+import { Menu } from 'antd'
+import type { MenuProps } from 'antd'
+import {
+  UserOutlined,
+  SafetyCertificateOutlined,
+  ShoppingOutlined,
+  FileTextOutlined,
+  TeamOutlined,
+  SettingOutlined,
+  TagsOutlined,
+  InboxOutlined,
+  DollarOutlined,
+  GiftOutlined,
+  ThunderboltOutlined,
+  FireOutlined,
+  DashboardOutlined,
+} from '@ant-design/icons'
+import type { MenuItem } from './types'
+
+const { SubMenu } = Menu
+
+interface SidebarProps {
+  collapsed: boolean
+  selectedKey: string
+  openKeys: string[]
+  onMenuClick: (key: string) => void
+  onOpenChange: (keys: string[]) => void
+  menuItems?: MenuItem[]
+}
+
+const defaultMenuItems: MenuItem[] = [
+  {
+    key: 'dashboard',
+    label: '工作台',
+    icon: <DashboardOutlined />,
+    path: '/dashboard',
+  },
+  {
+    key: 'permission',
+    label: '权限管理',
+    icon: <SafetyCertificateOutlined />,
+    children: [
+      {
+        key: 'permission/users',
+        label: '用户管理',
+        icon: <UserOutlined />,
+        path: '/permission/users',
+      },
+      {
+        key: 'permission/roles',
+        label: '角色管理',
+        icon: <TeamOutlined />,
+        path: '/permission/roles',
+      },
+      {
+        key: 'permission/resources',
+        label: '资源管理',
+        icon: <SettingOutlined />,
+        path: '/permission/resources',
+      },
+      {
+        key: 'permission/menus',
+        label: '菜单管理',
+        icon: <FileTextOutlined />,
+        path: '/permission/menus',
+      },
+    ],
+  },
+  {
+    key: 'product',
+    label: '商品管理',
+    icon: <ShoppingOutlined />,
+    children: [
+      {
+        key: 'product/list',
+        label: '商品列表',
+        icon: <InboxOutlined />,
+        path: '/product/list',
+      },
+      {
+        key: 'product/add',
+        label: '添加商品',
+        icon: <ShoppingOutlined />,
+        path: '/product/add',
+      },
+      {
+        key: 'product/category',
+        label: '商品分类',
+        icon: <TagsOutlined />,
+        path: '/product/category',
+      },
+      {
+        key: 'product/brand',
+        label: '品牌管理',
+        path: '/product/brand',
+      },
+      {
+        key: 'product/attribute',
+        label: '商品属性',
+        path: '/product/attribute',
+      },
+    ],
+  },
+  {
+    key: 'order',
+    label: '订单管理',
+    icon: <FileTextOutlined />,
+    children: [
+      {
+        key: 'order/list',
+        label: '订单列表',
+        icon: <FileTextOutlined />,
+        path: '/order/list',
+      },
+      {
+        key: 'order/setting',
+        label: '订单设置',
+        icon: <SettingOutlined />,
+        path: '/order/setting',
+      },
+      {
+        key: 'order/return',
+        label: '退货申请',
+        path: '/order/return',
+      },
+      {
+        key: 'order/reason',
+        label: '退货原因',
+        path: '/order/reason',
+      },
+    ],
+  },
+  {
+    key: 'marketing',
+    label: '营销管理',
+    icon: <GiftOutlined />,
+    children: [
+      {
+        key: 'marketing/coupon',
+        label: '优惠券管理',
+        icon: <GiftOutlined />,
+        path: '/marketing/coupon',
+      },
+      {
+        key: 'marketing/promotion',
+        label: '促销活动',
+        icon: <DollarOutlined />,
+        path: '/marketing/promotion',
+      },
+      {
+        key: 'marketing/flash',
+        label: '秒杀活动',
+        icon: <ThunderboltOutlined />,
+        path: '/marketing/flash',
+      },
+      {
+        key: 'marketing/new',
+        label: '新品推荐',
+        icon: <FireOutlined />,
+        path: '/marketing/new',
+      },
+      {
+        key: 'marketing/hot',
+        label: '人气推荐',
+        icon: <FireOutlined />,
+        path: '/marketing/hot',
+      },
+      {
+        key: 'marketing/advertise',
+        label: '广告管理',
+        path: '/marketing/advertise',
+      },
+      {
+        key: 'marketing/subject',
+        label: '专题管理',
+        path: '/marketing/subject',
+      },
+      {
+        key: 'marketing/brand',
+        label: '品牌推荐',
+        path: '/marketing/brand',
+      },
+    ],
+  },
+]
+
+const Sidebar: React.FC<SidebarProps> = ({
+  collapsed,
+  selectedKey,
+  openKeys,
+  onMenuClick,
+  onOpenChange,
+  menuItems: customMenuItems,
+}) => {
+  const items = customMenuItems || defaultMenuItems
+  const [internalOpenKeys, setInternalOpenKeys] = useState<string[]>(
+    items.filter(item => item.children).map(item => item.key)
+  )
+
+  const handleOpenChange: MenuProps['onOpenChange'] = (keys) => {
+    const latestKey = keys[keys.length - 1]
+    if (latestKey && items.some((item) => item.key === latestKey)) {
+      setInternalOpenKeys(keys)
+      onOpenChange(keys)
+    } else {
+      setInternalOpenKeys(latestKey ? [latestKey] : [])
+      onOpenChange(latestKey ? [latestKey] : [])
+    }
+  }
+
+  const handleClick: MenuProps['onClick'] = ({ key }) => {
+    onMenuClick(key)
+  }
+
+  return (
+    <div className={`sidebar-container ${collapsed ? 'collapsed' : ''}`}>
+      <div className="sidebar-logo">
+        {!collapsed && <span className="logo-text">Mall Admin</span>}
+        {collapsed && <span className="logo-icon">M</span>}
+      </div>
+      <Menu
+        mode="inline"
+        theme="dark"
+        inlineCollapsed={collapsed}
+        selectedKeys={[selectedKey]}
+        defaultOpenKeys={internalOpenKeys}
+        openKeys={openKeys.length > 0 ? openKeys : internalOpenKeys}
+        onClick={handleClick}
+        onOpenChange={handleOpenChange}
+        items={items.map((item) => {
+          if (item.children && item.children.length > 0) {
+            return {
+              key: item.key,
+              icon: item.icon,
+              label: item.label,
+              children: item.children.map((child) => ({
+                key: child.key,
+                icon: child.icon,
+                label: child.label,
+              })),
+            }
+          }
+          return {
+            key: item.key,
+            icon: item.icon,
+            label: item.label,
+          }
+        })}
+      />
+    </div>
+  )
+}
+
+export default Sidebar
+export { defaultMenuItems }

package/src/components/AdminLayout/TabBar.tsx

@@ -0,0 +1,177 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { Dropdown, Menu } from 'antd'
+import type { MenuProps } from 'antd'
+import { CloseOutlined, ReloadOutlined, CloseCircleOutlined } from '@ant-design/icons'
+import type { TabItem } from './types'
+
+interface TabBarProps {
+  tabs: TabItem[]
+  activeTabKey: string
+  onTabClick: (key: string) => void
+  onCloseTab: (key: string) => void
+  onCloseOther: (keepKey: string) => void
+  onCloseAll: () => void
+  closableTabs?: boolean
+}
+
+const TabBar: React.FC<TabBarProps> = ({
+  tabs,
+  activeTabKey,
+  onTabClick,
+  onCloseTab,
+  onCloseOther,
+  onCloseAll,
+  closableTabs = true,
+}) => {
+  const [hoveredKey, setHoveredKey] = useState<string | null>(null)
+  const [contextMenuVisible, setContextMenuVisible] = useState(false)
+  const [contextMenuKey, setContextMenuKey] = useState<string>('')
+  const [menuPosition, setMenuPosition] = useState({ x: 0, y: 0 })
+  const scrollContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (scrollContainerRef.current && activeTabKey) {
+      const activeElement = scrollContainerRef.current.querySelector(`[data-tab-key="${activeTabKey}"]`)
+      if (activeElement) {
+        activeElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' })
+      }
+    }
+  }, [activeTabKey])
+
+  useEffect(() => {
+    const handleClick = () => setContextMenuVisible(false)
+    if (contextMenuVisible) {
+      document.addEventListener('click', handleClick)
+      return () => document.removeEventListener('click', handleClick)
+    }
+  }, [contextMenuVisible])
+
+  const handleContextMenu = (e: React.MouseEvent, tabKey: string) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setContextMenuKey(tabKey)
+    setMenuPosition({ x: e.clientX, y: e.clientY })
+    setContextMenuVisible(true)
+  }
+
+  const handleMenuClick = (key: string) => {
+    setContextMenuVisible(false)
+    switch (key) {
+      case 'close':
+        onCloseTab(contextMenuKey)
+        break
+      case 'closeOther':
+        onCloseOther(contextMenuKey)
+        break
+      case 'closeAll':
+        onCloseAll()
+        break
+      case 'refresh':
+        window.location.reload()
+        break
+    }
+  }
+
+  if (!tabs || tabs.length === 0) {
+    return null
+  }
+
+  const contextMenuItems: MenuProps['items'] = [
+    {
+      key: 'refresh',
+      icon: <ReloadOutlined />,
+      label: '刷新当前页',
+    },
+    {
+      key: 'close',
+      icon: <CloseOutlined />,
+      label: '关闭当前',
+      disabled: !closableTabs || tabs.find(t => t.key === contextMenuKey)?.closable === false,
+    },
+    {
+      type: 'divider',
+    },
+    {
+      key: 'closeOther',
+      icon: <CloseCircleOutlined />,
+      label: '关闭其他',
+      disabled: tabs.length <= 1,
+    },
+    {
+      key: 'closeAll',
+      icon: <CloseCircleOutlined />,
+      label: '关闭所有',
+    },
+  ]
+
+  const menu = (
+    <Menu items={contextMenuItems} onClick={({ key }) => handleMenuClick(key)} />
+  )
+
+  return (
+    <>
+      <div className="tab-bar-container">
+        <div className="tab-bar-scroll" ref={scrollContainerRef}>
+          {tabs.map((tab) => (
+            <div
+              key={tab.key}
+              data-tab-key={tab.key}
+              className={`tab-item ${activeTabKey === tab.key ? 'active' : ''} ${hoveredKey === tab.key ? 'hovered' : ''}`}
+              onClick={() => onTabClick(tab.key)}
+              onMouseEnter={() => setHoveredKey(tab.key)}
+              onMouseLeave={() => setHoveredKey(null)}
+              onContextMenu={(e) => handleContextMenu(e, tab.key)}
+            >
+              {tab.icon && <span className="tab-icon">{tab.icon}</span>}
+              <span className="tab-label">{tab.label}</span>
+              {closableTabs && tab.closable && (
+                <span
+                  className={`tab-close-btn ${hoveredKey === tab.key || activeTabKey === tab.key ? 'visible' : ''}`}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onCloseTab(tab.key)
+                  }}
+                >
+                  <CloseOutlined style={{ fontSize: 10 }} />
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+        {closableTabs && tabs.length > 1 && (
+          <div className="tab-actions">
+            <button
+              className="close-all-btn"
+              onClick={onCloseAll}
+              title="关闭全部标签"
+            >
+              <CloseCircleOutlined />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {contextMenuVisible && (
+        <div
+          style={{
+            position: 'fixed',
+            left: menuPosition.x,
+            top: menuPosition.y,
+            zIndex: 1000,
+          }}
+        >
+          <Dropdown
+            overlay={menu}
+            visible={contextMenuVisible}
+            onVisibleChange={setContextMenuVisible}
+            trigger={['click']}
+          >
+            <div style={{ width: 0, height: 0 }} />
+          </Dropdown>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default TabBar

package/src/components/AdminLayout/TabPane.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import type { TabPaneProps } from './types'
+
+const TabPane: React.FC<TabPaneProps> = ({
+  tab,
+  tabKey,
+  activeTabKey,
+  children,
+  className,
+  style,
+}) => {
+  const isActive = activeTabKey === tabKey
+
+  return (
+    <div 
+      className={`tab-pane ${isActive ? 'tab-pane--active' : ''} ${className || ''}`}
+      style={{
+        ...style,
+        display: isActive ? undefined : 'none',
+      }}
+      data-tab-key={tabKey}
+      data-active={isActive ? 'true' : 'false'}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default TabPane

package/src/components/AdminLayout/index.ts

@@ -0,0 +1,3 @@
+export { default as AdminLayout } from './AdminLayout'
+export { default as TabPane } from './TabPane'
+export type { AdminLayoutProps, TabPaneProps } from './types'

package/src/components/AdminLayout/types.ts

@@ -0,0 +1,46 @@
+export interface MenuItem {
+  key: string
+  label: string
+  icon?: React.ReactNode
+  path?: string
+  children?: MenuItem[]
+}
+
+export interface BreadcrumbItem {
+  key: string
+  label: string
+  path?: string
+}
+
+export interface TabItem {
+  key: string
+  label: string
+  icon?: React.ReactNode
+  closable: boolean
+  path: string
+}
+
+export interface AdminLayoutProps {
+  defaultSelectedKey?: string
+  defaultOpenKeys?: string[]
+  collapsible?: boolean
+  enableTabs?: boolean
+  maxTabs?: number
+  closableTabs?: boolean
+  logoText?: string
+  menuItems?: MenuItem[]
+  style?: React.CSSProperties
+  className?: string
+  __designMode?: 'design' | 'preview'
+  componentId?: string
+  children?: React.ReactNode
+}
+
+export interface TabPaneProps {
+  tab?: string
+  tabKey?: string
+  activeTabKey?: string
+  children?: React.ReactNode
+  className?: string
+  style?: React.CSSProperties
+}