编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓储进销管理系统 - 管理端</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
            background: #f5f7fa;
            display: flex;
            height: 100vh;
        }
        /* 侧边栏 */
        .sidebar {
            width: 260px;
            background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
            color: #fff;
            display: flex;
            flex-direction: column;
            box-shadow: 2px 0 10px rgba(0,0,0,0.2);
        }
        .logo {
            padding: 24px 20px;
            background: rgba(255,255,255,0.05);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .logo h1 {
            font-size: 18px;
            font-weight: 600;
            color: #00d4ff;
            letter-spacing: 2px;
        }
        .logo p {
            font-size: 12px;
            color: rgba(255,255,255,0.5);
            margin-top: 4px;
        }
        .nav-menu {
            flex: 1;
            overflow-y: auto;
            padding: 16px 0;
        }
        .nav-item {
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .nav-item > .nav-title {
            padding: 14px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255,255,255,0.8);
            font-size: 14px;
            border-left: 3px solid transparent;
        }
        .nav-item:hover > .nav-title,
        .nav-item.active > .nav-title {
            background: rgba(0,212,255,0.1);
            color: #00d4ff;
            border-left-color: #00d4ff;
        }
        .nav-icon {
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
        }
        .nav-arrow {
            margin-left: auto;
            transition: transform 0.3s ease;
            font-size: 10px;
        }
        .nav-item.open .nav-arrow {
            transform: rotate(180deg);
        }
        .sub-nav {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
            background: rgba(0,0,0,0.2);
        }
        .nav-item.open .sub-nav {
            max-height: 500px;
        }
        .sub-nav-item {
            padding: 12px 20px 12px 54px;
            font-size: 13px;
            color: rgba(255,255,255,0.6);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .sub-nav-item:hover,
        .sub-nav-item.active {
            background: rgba(0,212,255,0.15);
            color: #00d4ff;
        }
        .sub-nav-item::before {
            content: '';
            width: 4px;
            height: 4px;
            background: currentColor;
            border-radius: 50%;
        }
        /* 主内容区 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        /* 顶部栏 */
        .header {
            height: 60px;
            background: #fff;
            border-bottom: 1px solid #e8ecf1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .header-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .breadcrumb {
            color: #666;
            font-size: 14px;
        }
        .breadcrumb span {
            color: #00d4ff;
        }
        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #333;
            font-size: 14px;
        }
        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: linear-gradient(135deg, #00d4ff, #0066cc);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        /* 内容区域 */
        .content {
            flex: 1;
            padding: 24px;
            overflow-y: auto;
        }
        .page-header {
            margin-bottom: 24px;
        }
        .page-title {
            font-size: 24px;
            color: #1a1a2e;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .page-desc {
            color: #666;
            font-size: 14px;
        }
        /* 功能卡片网格 */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 20px;
            margin-top: 24px;
        }
        .feature-card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            transition: all 0.3s ease;
            cursor: pointer;
            border: 1px solid transparent;
        }
        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            border-color: #00d4ff;
        }
        .feature-card.active {
            border-color: #00d4ff;
            background: linear-gradient(135deg, rgba(0,212,255,0.05), rgba(0,102,204,0.05));
        }
        .card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-bottom: 16px;
        }
        .card-title {
            font-size: 16px;
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 8px;
        }
        .card-desc {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
        }
        /* 模块选择视图 */
        .module-list {
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        .module-item {
            padding: 20px 24px;
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            transition: all 0.2s ease;
            border-bottom: 1px solid #f0f0f0;
        }
        .module-item:last-child {
            border-bottom: none;
        }
        .module-item:hover {
            background: rgba(0,212,255,0.05);
        }
        .module-item.active {
            background: rgba(0,212,255,0.08);
            border-left: 3px solid #00d4ff;
        }
        .module-icon {
            width: 44px;
            height: 44px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .module-info {
            flex: 1;
        }
        .module-name {
            font-size: 15px;
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 4px;
        }
        .module-sub {
            font-size: 12px;
            color: #999;
        }
        .module-arrow {
            color: #ccc;
            transition: transform 0.2s ease;
        }
        .module-item:hover .module-arrow {
            color: #00d4ff;
            transform: translateX(4px);
        }
        /* 功能详情页 */
        .detail-header {
            background: #fff;
            border-radius: 12px;
            padding: 32px;
            margin-bottom: 24px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        .detail-title {
            font-size: 28px;
            color: #1a1a2e;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .detail-title-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
        }
        .detail-desc {
            color: #666;
            font-size: 15px;
            line-height: 1.8;
        }
        .detail-section {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #1a1a2e;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 2px solid #f0f0f0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .section-title::before {
            content: '';
            width: 4px;
            height: 18px;
            background: linear-gradient(180deg, #00d4ff, #0066cc);
            border-radius: 2px;
        }
        /* 表格样式 */
        .data-table {
            width: 100%;
            border-collapse: collapse;
        }
        .data-table th {
            background: #f8f9fa;
            padding: 12px 16px;
            text-align: left;
            font-weight: 600;
            color: #333;
            border-bottom: 2px solid #e8ecf1;
        }
        .data-table td {
            padding: 12px 16px;
            border-bottom: 1px solid #f0f0f0;
            color: #666;
            font-size: 14px;
        }
        .data-table tr:hover {
            background: rgba(0,212,255,0.03);
        }
        .status-tag {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-active {
            background: #e6f7ff;
            color: #00a8ff;
        }
        .status-inactive {
            background: #fff1e6;
            color: #ff9500;
        }
        /* 操作按钮 */
        .action-btn {
            padding: 8px 16px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        .action-primary {
            background: linear-gradient(135deg, #00d4ff, #0066cc);
            color: #fff;
        }
        .action-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,102,204,0.3);
        }
        .action-secondary {
            background: #f0f0f0;
            color: #666;
        }
        .action-secondary:hover {
            background: #e0e0e0;
        }
        /* 返回按钮 */
        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            color: #666;
            cursor: pointer;
            font-size: 14px;
            transition: color 0.2s;
            background: none;
            border: none;
        }
        .back-btn:hover {
            color: #00d4ff;
        }
        /* 欢迎页 */
        .welcome-banner {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            border-radius: 16px;
            padding: 48px;
            color: #fff;
            margin-bottom: 24px;
            position: relative;
            overflow: hidden;
        }
        .welcome-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(0,212,255,0.15) 0%, transparent 70%);
            border-radius: 50%;
        }
        .welcome-banner h2 {
            font-size: 28px;
            margin-bottom: 12px;
            position: relative;
        }
        .welcome-banner p {
            font-size: 15px;
            color: rgba(255,255,255,0.7);
            position: relative;
        }
        .welcome-stats {
            display: flex;
            gap: 32px;
            margin-top: 32px;
            position: relative;
        }
        .stat-item {
            text-align: center;
        }
        .stat-value {
            font-size: 32px;
            font-weight: 700;
            color: #00d4ff;
        }
        .stat-label {
            font-size: 13px;
            color: rgba(255,255,255,0.5);
            margin-top: 4px;
        }
        /* 列表页样式 */
        .list-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .search-box {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #fff;
            padding: 8px 16px;
            border-radius: 8px;
            border: 1px solid #e8ecf1;
        }
        .search-box input {
            border: none;
            outline: none;
            font-size: 14px;
            width: 200px;
        }
        .toolbar-buttons {
            display: flex;
            gap: 12px;
        }
        /* 分页 */
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding: 16px 0;
        }
        .page-info {
            color: #666;
            font-size: 14px;
        }
        .page-btns {
            display: flex;
            gap: 8px;
        }
        .page-btn {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            border: 1px solid #e8ecf1;
            background: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #666;
            transition: all 0.2s;
        }
        .page-btn:hover,
        .page-btn.active {
            border-color: #00d4ff;
            color: #00d4ff;
            background: rgba(0,212,255,0.05);
        }
        /* 隐藏所有页面 */
        .page { display: none; }
        .page.active { display: block; }
        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .page.active > * {
            animation: fadeIn 0.3s ease;
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="logo">
            <h1>仓储管理系统</h1>
            <p>Warehouse Management</p>
        </div>
        <nav class="nav-menu">
            <!-- 首页 -->
            <div class="nav-item active" data-page="home">
<div class="nav-title">
                    <span class="nav-icon">🏠</span>
                    <span>首页概览</span>
                </div>
            </div>
            
            <!-- 仓库管理 -->
            <div class="nav-item" data-page="warehouse">
                <div class="nav-title">
                    <span class="nav-icon">🏢</span>
                    <span>仓库管理</span>
                    <span class="nav-arrow">▼</span>
                </div>
                <div class="sub-nav">
                    <div class="sub-nav-item" data-page="warehouse-info">仓库信息维护</div>
                    <div class="sub-nav-item" data-page="warehouse-area">库区库位管理</div>
                    <div class="sub-nav-item" data-page="warehouse-category">仓库品类管理</div>
                    <div class="sub-nav-item" data-page="warehouse-config">仓库参数配置</div>
                </div>
            </div>
            
            <!-- 商品管理 -->
            <div class="nav-item" data-page="product">
                <div class="nav-title">
                    <span class="nav-icon">📦</span>
                    <span>商品管理</span>
                    <span class="nav-arrow">▼</span>
                </div>
                <div class="sub-nav">
                    <div class="sub-nav-item" data-page="product-category">商品分类</div>
                    <div class="sub-nav-item" data-page="product-info">商品信息维护</div>
                    <div class="sub-nav-item" data-page="product-spec">规格与计量单位</div>
                    <div class="sub-nav-item" data-page="product-barcode">商品条码管理</div>
                </div>
            </div>
            
            <!-- 采购管理 -->
            <div class="nav-item" data-page="purchase">
                <div class="nav-title">
                    <span class="nav-icon">🛒</span>
                    <span>采购管理</span>
                    <span class="nav-arrow">▼</span>
                </div>
                <div class="sub-nav">
                    <div class="sub-nav-item" data-page="purchase-order">采购订单</div>
                    <div class="sub-nav-item" data-page="purchase-in">采购入库</div>
                    <div class="sub-nav-item" data-page="purchase-return">采购退货</div>
                </div>
            </div>
            
            <!-- 销售管理 -->
            <div class="nav-item" data-page="sales">
                <div class="nav-title">
                    <span class="nav-icon">💰</span>
                    <span>销售管理</span>
                    <span class="nav-arrow">▼</span>
                </div>
                <div class="sub-nav">
                    <div class="sub-nav-item" data-page="sales-order">销售开单</div>
                    <div class="sub-nav-item" data-page="sales-out">销售出库</div>
                    <div class="sub-nav-item" data-page="sales-return">销售退货</div>
                    <div class="sub-nav-item" data-page="sales-quote">报价单管理</div>
                </div>
            </div>
            
            <!-- 库存管理 -->
            <div class="nav-item" data-page="inventory">
                <div class="nav-title">
                    <span class="nav-icon">📊</span>
                    <span>库存管理</span>
                    <span class="nav-arrow">▼</span>
                </div>
                <div class="sub-nav">
                    <div class="sub-nav-item" data-page="inventory-query">库存查询</div>
                    <div class="sub-nav-item" data-page="inventory-check">库存盘点</div>
                    <div class="sub-nav-item" data-page="inventory-transfer">库存调拨</div>
                    <div class="sub-nav-item" data-page="inventory-alert">库存预警</div>
                    <div class="sub-nav-item" data-page="inventory-log">库存流水</div>
                </div>
            </div>
            
            <!-- 客户管理 -->
            <div class="nav-item" data-page="customer">
                <div class="nav-title">
                    <span class="nav-icon">👥</span>
                    <span>客户管理</span>
                    <span class="nav-arrow">▼</span>
                </div>
                <div class="sub-nav">
                    <div class="sub-nav-item" data-page="customer-info">客户信息维护</div>
                    <div class="sub-nav-item" data-page="customer-category">客户分类</div>
                    <div class="sub-nav-item" data-page="customer-record">客户操作记录</div>
                    <div class="sub-nav-item" data-page="customer-price">客户价格体系</div>
                </div>
            </div>
            
            <!-- 供应商管理 -->
            <div class="nav-item" data-page="supplier">
                <div class="nav-title">
                    <span class="nav-icon">🏪</span>
                    <span>供应商管理</span>
                    <span class="nav-arrow">▼</span>
                </div>
                <div class="sub-nav">
                    <div class="sub-nav-item" data-page="supplier-info">供应商信息维护</div>
                    <div class="sub-nav-item" data-page="supplier-category">供应商分类</div>
                    <div class="sub-nav-item" data-page="supplier-price">供应商价格管理</div>
                </div>
            </div>
            
            <!-- 财务管理 -->
            <div class="nav-item" data-page="finance">
                <div class="nav-title">
                    <span class="nav-icon">💳</span>
                    <span>财务管理</span>
                    <span class="nav-arrow">▼</span>
                </div>
                <div class="sub-nav">
                    <div class="sub-nav-item" data-page="finance-receivable">应收管理</div>
                    <div class="sub-nav-item" data-page="finance-payable">应付管理</div>
                    <div class="sub-nav-item" data-page="finance-flow">收支流水</div>
                    <div class="sub-nav-item" data-page="finance-reconcile">对账管理</div>
                </div>
            </div>
            
            <!-- 报表统计 -->
            <div class="nav-item" data-page="report">
                <div class="nav-title">
                    <span class="nav-icon">📈</span>
                    <span>报表统计</span>
                    <span class="nav-arrow">▼</span>
                </div>
                <div class="sub-nav">
                    <div class="sub-nav-item" data-page="report-inout">进销存报表</div>
                    <div class="sub-nav-item" data-page="report-sales">销售统计</div>
                    <div class="sub-nav-item" data-page="report-purchase">采购统计</div>
                    <div class="sub-nav-item" data-page="report-inventory">库存报表</div>
                </div>
            </div>
            
            <!-- 系统设置 -->
            <div class="nav-item" data-page="system">
                <div class="nav-title">
                    <span class="nav-icon">⚙️</span>
                    <span>系统设置</span>
                    <span class="nav-arrow">▼</span>
                </div>
                <div class="sub-nav">
                    <div class="sub-nav-item" data-page="system-role">角色权限</div>
                    <div class="sub-nav-item" data-page="system-log">操作日志</div>
                    <div class="sub-nav-item" data-page="system-param">系统参数</div>
                    <div class="sub-nav-item" data-page="system-backup">数据备份</div>
                </div>
            </div>
        </nav>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="header">
            <div class="header-left">
                <span class="breadcrumb">管理端 / <span id="currentPageName">首页概览</span></span>
            </div>
            <div class="header-right">
                <div class="user-info">
                    <div class="user-avatar">管</div>
                    <span>管理员</span>
                </div>
            </div>
        </div>

        <div class="content">
            <!-- 首页 -->
            <div class="page active" id="page-home">
                <div class="welcome-banner">
                    <h2>欢迎使用仓储进销管理系统</h2>
                    <p>高效的仓库管理、精准的进销存控制，助力企业数字化升级</p>
                    <div class="welcome-stats">
                        <div class="stat-item">
                            <div class="stat-value">3</div>
                            <div class="stat-label">仓库数量</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">1,286</div>
                            <div class="stat-label">商品种类</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">¥85,320</div>
                            <div class="stat-label">今日销售额</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">12</div>
                            <div class="stat-label">待处理订单</div>
                        </div>
                    </div>
                </div>

                <div class="feature-grid">
                    <div class="feature-card" onclick="navigateTo('warehouse')">
                        <div class="card-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1976d2;">🏢</div>
                        <div class="card-title">仓库管理</div>
                        <div class="card-desc">管理仓库信息、库区库位、品类及业务参数配置</div>
                    </div>
                    <div class="feature-card" onclick="navigateTo('product')">
                        <div class="card-icon" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #f57c00;">📦</div>
                        <div class="card-title">商品管理</div>
                        <div class="card-desc">商品分类、信息维护、规格管理和条码管理</div>
                    </div>
                    <div class="feature-card" onclick="navigateTo('inventory')">
                        <div class="card-icon" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #388e3c;">📊</div>
                        <div class="card-title">库存管理</div>
                        <div class="card-desc">实时库存查询、盘点、调拨、预警和流水记录</div>
                    </div>
                    <div class="feature-card" onclick="navigateTo('sales')">
                        <div class="card-icon" style="background: linear-gradient(135deg, #fce4ec, #f8bbd9); color: #c2185b;">💰</div>
                        <div class="card-title">销售管理</div>
                        <div class="card-desc">销售开单、出库、退货和报价单管理</div>
                    </div>
                    <div class="feature-card" onclick="navigateTo('finance')">
                        <div class="card-icon" style="background: linear-gradient(135deg, #e1f5fe, #b3e5fc); color: #0288d1;">💳</div>
                        <div class="card-title">财务管理</div>
                        <div class="card-desc">应收应付、收支流水和对账管理</div>
                    </div>
                    <div class="feature-card" onclick="navigateTo('report')">
                        <div class="card-icon" style="background: linear-gradient(135deg, #f3e5f5, #e1bee7); color: #7b1fa2;">📈</div>
                        <div class="card-title">报表统计</div>
                        <div class="card-desc">进销存报表、销售采购统计和库存分析</div>
                    </div>
                </div>
            </div>

            <!-- 仓库管理 - 概览页 -->
            <div class="page" id="page-warehouse">
                <button class="back-btn" onclick="goHome()">← 返回首页</button>
                <div class="page-header">
                    <div class="page-title">仓库管理</div>
                    <div class="page-desc">管理仓库信息、库区库位、品类及业务参数配置</div>
                </div>
                <div class="module-list">
                    <div class="module-item" onclick="showDetail('warehouse-info', '仓库信息维护', '🏢', '新增、编辑、停用仓库，设置仓库名称、编码、地址、负责人等基础信息')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1976d2;">🏢</div>
                        <div class="module-info">
                            <div class="module-name">仓库信息维护</div>
                            <div class="module-sub">仓库基础信息管理与维护</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('warehouse-area', '库区库位管理', '🗂️', '按仓库划分库区与库位，支持多层级库位编码，便于精准定位存放')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #388e3c;">🗂️</div>
                        <div class="module-info">
                            <div class="module-name">库区库位管理</div>
                            <div class="module-sub">库区划分与库位编码管理</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('warehouse-category', '仓库品类管理', '📁', '维护仓库经营品类，支持品类多级分类（如布料/纱线/成品等），关联仓库与品类')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #f57c00;">📁</div>
                        <div class="module-info">
                            <div class="module-name">仓库品类管理</div>
                            <div class="module-sub">仓库经营品类分类管理</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('warehouse-config', '仓库参数配置', '⚙️', '设置仓库出入库规则、库存预警阈值、默认计量单位等业务参数')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #eceff1, #cfd8dc); color: #607d8b;">⚙️</div>
                        <div class="module-info">
                            <div class="module-name">仓库参数配置</div>
                            <div class="module-sub">出入库规则与预警阈值配置</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                </div>
            </div>

            <!-- 商品管理 - 概览页 -->
            <div class="page" id="page-product">
                <button class="back-btn" onclick="goHome()">← 返回首页</button>
                <div class="page-header">
                    <div class="page-title">商品管理</div>
                    <div class="page-desc">商品分类、信息维护、规格管理和条码管理</div>
                </div>
                <div class="module-list">
                    <div class="module-item" onclick="showDetail('product-category', '商品分类', '🏷️', '多级商品分类管理，支持新增、编辑、排序、启停用分类')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #388e3c;">🏷️</div>
                        <div class="module-info">
                            <div class="module-name">商品分类</div>
                            <div class="module-sub">多级商品分类管理</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('product-info', '商品信息维护', '📋', '录入商品名称、编码、规格、单位、成本价、销售价等基本信息，支持批量导入')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1976d2;">📋</div>
                        <div class="module-info">
                            <div class="module-name">商品信息维护</div>
                            <div class="module-sub">商品基础信息管理与批量导入</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('product-spec', '规格与计量单位', '📏', '管理商品规格属性（颜色、尺寸、重量等），维护计量单位及换算关系')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #f57c00;">📏</div>
                        <div class="module-info">
                            <div class="module-name">规格与计量单位</div>
                            <div class="module-sub">规格属性与计量单位管理</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('product-barcode', '商品条码管理', '🔢', '为商品生成或绑定条码，支持一物多码、自定义条码规则')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fce4ec, #f8bbd9); color: #c2185b;">🔢</div>
                        <div class="module-info">
                            <div class="module-name">商品条码管理</div>
                            <div class="module-sub">条码生成与绑定管理</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                </div>
            </div>

            <!-- 采购管理 - 概览页 -->
            <div class="page" id="page-purchase">
                <button class="back-btn" onclick="goHome()">← 返回首页</button>
                <div class="page-header">
                    <div class="page-title">采购管理</div>
                    <div class="page-desc">采购订单、入库和退货管理</div>
                </div>
                <div class="module-list">
                    <div class="module-item" onclick="showDetail('purchase-order', '采购订单', '📝', '新建采购订单，选择供应商与商品，填写数量、单价、交货日期，支持审核流程')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1976d2;">📝</div>
                        <div class="module-info">
                            <div class="module-name">采购订单</div>
                            <div class="module-sub">订单创建与审核管理</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('purchase-in', '采购入库', '📥', '采购到货后录入入库单，关联采购订单，确认实际入库数量与仓位')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #388e3c;">📥</div>
                        <div class="module-info">
                            <div class="module-name">采购入库</div>
                            <div class="module-sub">入库单录入与订单关联</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('purchase-return', '采购退货', '📤', '对已入库商品发起退货，生成采购退货单，扣减库存并记录退货原因')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #f57c00;">📤</div>
                        <div class="module-info">
                            <div class="module-name">采购退货</div>
                            <div class="module-sub">退货单生成与库存扣减</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                </div>
            </div>

            <!-- 销售管理 - 概览页 -->
            <div class="page" id="page-sales">
                <button class="back-btn" onclick="goHome()">← 返回首页</button>
                <div class="page-header">
                    <div class="page-title">销售管理</div>
                    <div class="page-desc">销售开单、出库、退货和报价单管理</div>
                </div>
                <div class="module-list">
                    <div class="module-item" onclick="showDetail('sales-order', '销售开单', '💵', '选择客户与商品，录入数量、单价、折扣，生成销售单据，支持多种支付方式')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1976d2;">💵</div>
                        <div class="module-info">
                            <div class="module-name">销售开单</div>
                            <div class="module-sub">销售单据创建与管理</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('sales-out', '销售出库', '🚚', '销售单审核后生成出库单，确认出库仓库与库位，扣减对应库存')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #388e3c;">🚚</div>
                        <div class="module-info">
                            <div class="module-name">销售出库</div>
                            <div class="module-sub">出库确认与库存扣减</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('sales-return', '销售退货', '↩️', '客户退货时生成销售退货单，商品入库并冲销对应应收款项')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #f57c00;">↩️</div>
                        <div class="module-info">
                            <div class="module-name">销售退货</div>
                            <div class="module-sub">退货处理与账款冲销</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('sales-quote', '报价单管理', '📄', '向客户发送商品报价，报价单可一键转销售开单')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #f3e5f5, #e1bee7); color: #7b1fa2;">📄</div>
                        <div class="module-info">
                            <div class="module-name">报价单管理</div>
                            <div class="module-sub">报价单发送与转开单</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                </div>
            </div>

            <!-- 库存管理 - 概览页 -->
            <div class="page" id="page-inventory">
                <button class="back-btn" onclick="goHome()">← 返回首页</button>
                <div class="page-header">
                    <div class="page-title">库存管理</div>
                    <div class="page-desc">实时库存查询、盘点、调拨、预警和流水记录</div>
                </div>
                <div class="module-list">
                    <div class="module-item" onclick="showDetail('inventory-query', '库存查询', '🔍', '按仓库/品类/商品多维度查询实时库存数量、可用量、在途量等')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1976d2;">🔍</div>
                        <div class="module-info">
                            <div class="module-name">库存查询</div>
                            <div class="module-sub">多维度库存数据查询</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('inventory-check', '库存盘点', '📋', '创建盘点任务，录入实盘数量，系统自动生成盘盈盘亏差异及调整单')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #388e3c;">📋</div>
                        <div class="module-info">
                            <div class="module-name">库存盘点</div>
                            <div class="module-sub">盘点任务与盈亏调整</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('inventory-transfer', '库存调拨', '🔄', '仓库间或库位间商品调拨，生成调拨单，调出方扣减、调入方增加库存')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #f57c00;">🔄</div>
                        <div class="module-info">
                            <div class="module-name">库存调拨</div>
                            <div class="module-sub">调拨单生成与库存变动</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('inventory-alert', '库存预警', '⚠️', '当库存低于安全库存或高于上限时自动预警，支持消息通知')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #ffebee, #ffcdd2); color: #d32f2f;">⚠️</div>
                        <div class="module-info">
                            <div class="module-name">库存预警</div>
                            <div class="module-sub">预警规则与消息通知</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('inventory-log', '库存流水', '📜', '记录所有出入库变动明细，支持按时间、单据、商品追溯库存变化')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #f3e5f5, #e1bee7); color: #7b1fa2;">📜</div>
                        <div class="module-info">
                            <div class="module-name">库存流水</div>
                            <div class="module-sub">出入库明细追溯</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                </div>
            </div>

            <!-- 客户管理 - 概览页 -->
            <div class="page" id="page-customer">
                <button class="back-btn" onclick="goHome()">← 返回首页</button>
                <div class="page-header">
                    <div class="page-title">客户管理</div>
                    <div class="page-desc">客户信息维护、分类、操作记录和价格体系</div>
                </div>
                <div class="module-list">
                    <div class="module-item" onclick="showDetail('customer-info', '客户信息维护', '👤', '录入客户名称、联系人、电话、地址、开票信息等，支持客户档案查看与编辑')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1976d2;">👤</div>
                        <div class="module-info">
                            <div class="module-name">客户信息维护</div>
                            <div class="module-sub">客户档案管理</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('customer-category', '客户分类', '🏷️', '按行业/等级/区域等维度对客户分类，便于差异化定价与管理')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #388e3c;">🏷️</div>
                        <div class="module-info">
                            <div class="module-name">客户分类</div>
                            <div class="module-sub">客户分类维度管理</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('customer-record', '客户操作记录', '📝', '记录客户的开单、退货、付款等业务操作历史，形成客户行为档案')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #f57c00;">📝</div>
                        <div class="module-info">
                            <div class="module-name">客户操作记录</div>
                            <div class="module-sub">行为历史档案</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('customer-price', '客户价格体系', '💰', '为不同客户/客户分类设置专属价格或折扣规则')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fce4ec, #f8bbd9); color: #c2185b;">💰</div>
                        <div class="module-info">
                            <div class="module-name">客户价格体系</div>
                            <div class="module-sub">专属价格与折扣规则</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                </div>
            </div>

            <!-- 供应商管理 - 概览页 -->
            <div class="page" id="page-supplier">
                <button class="back-btn" onclick="goHome()">← 返回首页</button>
                <div class="page-header">
                    <div class="page-title">供应商管理</div>
                    <div class="page-desc">供应商信息维护、分类和价格管理</div>
                </div>
                <div class="module-list">
                    <div class="module-item" onclick="showDetail('supplier-info', '供应商信息维护', '🏪', '录入供应商名称、联系人、电话、地址、结算方式等基本信息')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1976d2;">🏪</div>
                        <div class="module-info">
                            <div class="module-name">供应商信息维护</div>
                            <div class="module-sub">供应商档案管理</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('supplier-category', '供应商分类', '🏷️', '按供应品类/合作等级对供应商分类管理')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #388e3c;">🏷️</div>
                        <div class="module-info">
                            <div class="module-name">供应商分类</div>
                            <div class="module-sub">供应商分类管理</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('supplier-price', '供应商价格管理', '💵', '维护供应商供货价格，记录价格变动历史')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #f57c00;">💵</div>
                        <div class="module-info">
                            <div class="module-name">供应商价格管理</div>
                            <div class="module-sub">供货价格与变动历史</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                </div>
            </div>

            <!-- 财务管理 - 概览页 -->
            <div class="page" id="page-finance">
                <button class="back-btn" onclick="goHome()">← 返回首页</button>
                <div class="page-header">
                    <div class="page-title">财务管理</div>
                    <div class="page-desc">应收应付、收支流水和对账管理</div>
                </div>
                <div class="module-list">
                    <div class="module-item" onclick="showDetail('finance-receivable', '应收管理', '📥', '管理客户应收账款，支持收款登记、对账核销、账龄分析')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1976d2;">📥</div>
                        <div class="module-info">
                            <div class="module-name">应收管理</div>
                            <div class="module-sub">应收账款与收款登记</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('finance-payable', '应付管理', '📤', '管理供应商应付账款，支持付款登记、对账核销、账龄分析')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #388e3c;">📤</div>
                        <div class="module-info">
                            <div class="module-name">应付管理</div>
                            <div class="module-sub">应付账款与付款登记</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('finance-flow', '收支流水', '💳', '记录所有收款、付款流水，支持按客户/供应商/时间段查询')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #f57c00;">💳</div>
                        <div class="module-info">
                            <div class="module-name">收支流水</div>
                            <div class="module-sub">收付款记录查询</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('finance-reconcile', '对账管理', '📋', '生成客户/供应商对账单，支持发送对账单与确认回执')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #f3e5f5, #e1bee7); color: #7b1fa2;">📋</div>
                        <div class="module-info">
                            <div class="module-name">对账管理</div>
                            <div class="module-sub">对账单生成与确认</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                </div>
            </div>

            <!-- 报表统计 - 概览页 -->
            <div class="page" id="page-report">
                <button class="back-btn" onclick="goHome()">← 返回首页</button>
                <div class="page-header">
                    <div class="page-title">报表统计</div>
                    <div class="page-desc">进销存报表、销售采购统计和库存分析</div>
                </div>
                <div class="module-list">
                    <div class="module-item" onclick="showDetail('report-inout', '进销存报表', '📊', '按时间段汇总采购、销售、库存变动，生成进销存汇总表')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1976d2;">📊</div>
                        <div class="module-info">
                            <div class="module-name">进销存报表</div>
                            <div class="module-sub">采购销售库存汇总</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('report-sales', '销售统计', '📈', '按客户/商品/时间段统计销售额、毛利、销量排行等')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #388e3c;">📈</div>
                        <div class="module-info">
                            <div class="module-name">销售统计</div>
                            <div class="module-sub">销售业绩与排行分析</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('report-purchase', '采购统计', '📉', '按供应商/商品/时间段统计采购额、采购量等')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #f57c00;">📉</div>
                        <div class="module-info">
                            <div class="module-name">采购统计</div>
                            <div class="module-sub">采购数据统计分析</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('report-inventory', '库存报表', '📦', '库存分布、库存周转率、滞销商品分析等')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #f3e5f5, #e1bee7); color: #7b1fa2;">📦</div>
                        <div class="module-info">
                            <div class="module-name">库存报表</div>
                            <div class="module-sub">库存分析报表</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                </div>
            </div>

            <!-- 系统设置 - 概览页 -->
            <div class="page" id="page-system">
                <button class="back-btn" onclick="goHome()">← 返回首页</button>
                <div class="page-header">
                    <div class="page-title">系统设置</div>
                    <div class="page-desc">角色权限、操作日志、系统参数和数据备份</div>
                </div>
                <div class="module-list">
                    <div class="module-item" onclick="showDetail('system-role', '角色权限', '🔐', '定义系统角色，分配菜单与操作权限，支持数据权限隔离')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #1976d2;">🔐</div>
                        <div class="module-info">
                            <div class="module-name">角色权限</div>
                            <div class="module-sub">角色定义与权限分配</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('system-log', '操作日志', '📜', '记录用户登录与关键操作日志，支持按时间/用户/模块查询')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #388e3c;">📜</div>
                        <div class="module-info">
                            <div class="module-name">操作日志</div>
                            <div class="module-sub">日志记录与查询</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('system-param', '系统参数', '⚙️', '配置单据编号规则、默认仓库、审批流程等全局参数')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #f57c00;">⚙️</div>
                        <div class="module-info">
                            <div class="module-name">系统参数</div>
                            <div class="module-sub">全局参数配置</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                    <div class="module-item" onclick="showDetail('system-backup', '数据备份', '💾', '支持手动与定时数据备份，保障数据安全')">
                        <div class="module-icon" style="background: linear-gradient(135deg, #fce4ec, #f8bbd9); color: #c2185b;">💾</div>
                        <div class="module-info">
                            <div class="module-name">数据备份</div>
                            <div class="module-sub">手动与定时备份</div>
                        </div>
                        <div class="module-arrow">→</div>
                    </div>
                </div>
            </div>

            <!-- 功能详情页模板 -->
            <div class="page" id="page-detail">
                <button class="back-btn" id="detailBackBtn">← 返回</button>
                <div class="detail-header">
                    <div class="detail-title">
                        <span class="detail-title-icon" id="detailIcon">🏢</span>
                        <span id="detailTitle">仓库信息维护</span>
                    </div>
                    <div class="detail-desc" id="detailDesc">新增、编辑、停用仓库，设置仓库名称、编码、地址、负责人等基础信息</div>
                </div>
                
                <div class="detail-section">
                    <div class="section-title">功能操作</div>
                    <div class="list-toolbar">
                        <div class="search-box">
                            <span>🔍</span>
                            <input type="text" placeholder="搜索...">
                        </div>
                        <div class="toolbar-buttons">
                            <button class="action-btn action-primary">+ 新增</button>
                            <button class="action-btn action-secondary">📥 导入</button>
                            <button class="action-btn action-secondary">📤 导出</button>
                        </div>
                    </div>
                    <table class="data-table">
                        <thead>
                            <tr>
                                <th>编码</th>
                                <th>名称</th>
                                <th>地址</th>
                                <th>负责人</th>
                                <th>联系电话</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>WH001</td>
                                <td>主仓库</td>
                                <td>北京市朝阳区望京街道88号</td>
                                <td>张三</td>
                                <td>138****1234</td>
                                <td><span class="status-tag status-active">启用</span></td>
                                <td><button class="action-btn action-secondary" style="padding: 4px 8px; font-size: 12px;">编辑</button></td>
                            </tr>
                            <tr>
                                <td>WH002</td>
                                <td>东区分仓</td>
                                <td>上海市浦东新区张江路128号</td>
                                <td>李四</td>
                                <td>139****5678</td>
                                <td><span class="status-tag status-active">启用</span></td>
                                <td><button class="action-btn action-secondary" style="padding: 4px 8px; font-size: 12px;">编辑</button></td>
                            </tr>
                            <tr>
                                <td>WH003</td>
                                <td>广州仓库</td>
                                <td>广州市天河区珠江新城100号</td>
                                <td>王五</td>
                                <td>137****9012</td>
                                <td><span class="status-tag status-inactive">停用</span></td>
                                <td><button class="action-btn action-secondary" style="padding: 4px 8px; font-size: 12px;">编辑</button></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pagination">
                        <div class="page-info">共 3 条记录</div>
                        <div class="page-btns">
                            <button class="page-btn">«</button>
                            <button class="page-btn active">1</button>
                            <button class="page-btn">2</button>
                            <button class="page-btn">3</button>
                            <button class="page-btn">»</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 存储页面来源，用于返回
        let pageHistory = ['home'];

        // 导航到指定页面
        function navigateTo(page) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            
            // 显示目标页面
            const targetPage = document.getElementById('page-' + page);
            if (targetPage) {
                targetPage.classList.add('active');
                
                // 更新面包屑
                const pageNames = {
                    'home': '首页概览',
                    'warehouse': '仓库管理',
                    'product': '商品管理',
                    'purchase': '采购管理',
                    'sales': '销售管理',
                    'inventory': '库存管理',
                    'customer': '客户管理',
                    'supplier': '供应商管理',
                    'finance': '财务管理',
                    'report': '报表统计',
                    'system': '系统设置',
                    'detail': '功能详情'
                };
                document.getElementById('currentPageName').textContent = pageNames[page] || page;
                
                // 更新导航高亮和展开状态
                document.querySelectorAll('.nav-item').forEach(item => {
                    item.classList.remove('active');
                });
                
                // 展开对应的一级菜单
                const navItem = document.querySelector(`.nav-item[data-page="${page}"]`);
                if (navItem) {
                    navItem.classList.add('active');
                    // 确保展开子菜单
                    if (!navItem.classList.contains('open')) {
                        navItem.classList.add('open');
                    }
                }
            }
        }
        
        // 直接导航到子功能详情页
        function navigateToSub(subPage, mainPage, title, icon, desc) {
            // 展开对应的一级菜单
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
                if (item.dataset.page === mainPage) {
                    item.classList.add('active');
                    item.classList.add('open');
                }
            });
            
            // 高亮当前子菜单
            document.querySelectorAll('.sub-nav-item').forEach(item => {
                item.classList.remove('active');
                if (item.dataset.page === subPage) {
                    item.classList.add('active');
                }
            });
            
            // 显示详情页
            showDetail(subPage, title, icon, desc);
        }

        // 显示功能详情
        function showDetail(pageId, title, icon, desc) {
            document.getElementById('detailTitle').textContent = title;
            document.getElementById('detailIcon').textContent = icon;
            document.getElementById('detailIcon').style.background = getIconBg(icon);
            document.getElementById('detailDesc').textContent = desc;
            
            // 设置返回按钮
            const mainPage = pageHistory[pageHistory.length - 1];
            document.getElementById('detailBackBtn').onclick = function() {
                navigateTo(mainPage);
            };
            
            document.getElementById('currentPageName').textContent = title;
            
            // 显示详情页
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            document.getElementById('page-detail').classList.add('active');
        }

        // 获取图标背景色
        function getIconBg(icon) {
            const iconMap = {
                '🏢': 'linear-gradient(135deg, #e3f2fd, #bbdefb)',
                '🗂️': 'linear-gradient(135deg, #e8f5e9, #c8e6c9)',
                '📁': 'linear-gradient(135deg, #fff3e0, #ffe0b2)',
                '⚙️': 'linear-gradient(135deg, #eceff1, #cfd8dc)',
                '🏷️': 'linear-gradient(135deg, #e8f5e9, #c8e6c9)',
                '📋': 'linear-gradient(135deg, #e3f2fd, #bbdefb)',
                '📏': 'linear-gradient(135deg, #fff3e0, #ffe0b2)',
                '🔢': 'linear-gradient(135deg, #fce4ec, #f8bbd9)',
                '📝': 'linear-gradient(135deg, #e3f2fd, #bbdefb)',
                '📥': 'linear-gradient(135deg, #e8f5e9, #c8e6c9)',
                '📤': 'linear-gradient(135deg, #fff3e0, #ffe0b2)',
                '💵': 'linear-gradient(135deg, #e3f2fd, #bbdefb)',
                '🚚': 'linear-gradient(135deg, #e8f5e9, #c8e6c9)',
                '↩️': 'linear-gradient(135deg, #fff3e0, #ffe0b2)',
                '📄': 'linear-gradient(135deg, #f3e5f5, #e1bee7)',
                '🔍': 'linear-gradient(135deg, #e3f2fd, #bbdefb)',
                '📋': 'linear-gradient(135deg, #e8f5e9, #c8e6c9)',
                '🔄': 'linear-gradient(135deg, #fff3e0, #ffe0b2)',
                '⚠️': 'linear-gradient(135deg, #ffebee, #ffcdd2)',
                '📜': 'linear-gradient(135deg, #f3e5f5, #e1bee7)',
                '👤': 'linear-gradient(135deg, #e3f2fd, #bbdefb)',
                '📝': 'linear-gradient(135deg, #fff3e0, #ffe0b2)',
                '💰': 'linear-gradient(135deg, #fce4ec, #f8bbd9)',
                '🏪': 'linear-gradient(135deg, #e3f2fd, #bbdefb)',
                '💳': 'linear-gradient(135deg, #fff3e0, #ffe0b2)',
                '📊': 'linear-gradient(135deg, #e3f2fd, #bbdefb)',
                '📈': 'linear-gradient(135deg, #e8f5e9,#c8e6c9)',
                '📉': 'linear-gradient(135deg, #fff3e0, #ffe0b2)',
                '📦': 'linear-gradient(135deg, #f3e5f5, #e1bee7)',
                '🔐': 'linear-gradient(135deg, #e3f2fd, #bbdefb)',
                '💾': 'linear-gradient(135deg, #fce4ec, #f8bbd9)'
            };
            return iconMap[icon] || 'linear-gradient(135deg, #e3f2fd, #bbdefb)';
        }

        // 返回首页
        function goHome() {
            navigateTo('home');
        }

        // 侧边栏点击事件
        document.querySelectorAll('.nav-item > .nav-title').forEach(item => {
            item.addEventListener('click', function(e) {
                const navItem = this.parentElement;
                const page = navItem.dataset.page;
                
                if (navItem.querySelector('.sub-nav')) {
                    // 有子菜单，切换展开
                    navItem.classList.toggle('open');
                }
                
                // 记录历史
                if (page !== 'home' && !pageHistory.includes(page)) {
                    pageHistory.push(page);
                }
                
                navigateTo(page);
            });
        });

        // 子菜单点击 - 直接显示功能详情
        const subMenuConfig = {
            // 仓库管理
            'warehouse-info': { main: 'warehouse', title: '仓库信息维护', icon: '🏢', desc: '新增、编辑、停用仓库，设置仓库名称、编码、地址、负责人等基础信息' },
            'warehouse-area': { main: 'warehouse', title: '库区库位管理', icon: '🗂️', desc: '按仓库划分库区与库位，支持多层级库位编码，便于精准定位存放' },
            'warehouse-category': { main: 'warehouse', title: '仓库品类管理', icon: '📁', desc: '维护仓库经营品类，支持品类多级分类（如布料/纱线/成品等），关联仓库与品类' },
            'warehouse-config': { main: 'warehouse', title: '仓库参数配置', icon: '⚙️', desc: '设置仓库出入库规则、库存预警阈值、默认计量单位等业务参数' },
            // 商品管理
            'product-category': { main: 'product', title: '商品分类', icon: '🏷️', desc: '多级商品分类管理，支持新增、编辑、排序、启停用分类' },
            'product-info': { main: 'product', title: '商品信息维护', icon: '📋', desc: '录入商品名称、编码、规格、单位、成本价、销售价等基本信息，支持批量导入' },
            'product-spec': { main: 'product', title: '规格与计量单位', icon: '📏', desc: '管理商品规格属性（颜色、尺寸、重量等），维护计量单位及换算关系' },
            'product-barcode': { main: 'product', title: '商品条码管理', icon: '🔢', desc: '为商品生成或绑定条码，支持一物多码、自定义条码规则' },
            // 采购管理
            'purchase-order': { main: 'purchase', title: '采购订单', icon: '📝', desc: '新建采购订单，选择供应商与商品，填写数量、单价、交货日期，支持审核流程' },
            'purchase-in': { main: 'purchase', title: '采购入库', icon: '📥', desc: '采购到货后录入入库单，关联采购订单，确认实际入库数量与仓位' },
            'purchase-return': { main: 'purchase', title: '采购退货', icon: '📤', desc: '对已入库商品发起退货，生成采购退货单，扣减库存并记录退货原因' },
            // 销售管理
            'sales-order': { main: 'sales', title: '销售开单', icon: '💵', desc: '选择客户与商品，录入数量、单价、折扣，生成销售单据，支持多种支付方式' },
            'sales-out': { main: 'sales', title: '销售出库', icon: '🚚', desc: '销售单审核后生成出库单，确认出库仓库与库位，扣减对应库存'},
            'sales-return': { main: 'sales', title: '销售退货', icon: '↩️', desc: '客户退货时生成销售退货单，商品入库并冲销对应应收款项' },
            'sales-quote': { main: 'sales', title: '报价单管理', icon: '📄', desc: '向客户发送商品报价，报价单可一键转销售开单' },
            // 库存管理
            'inventory-query': { main: 'inventory', title: '库存查询', icon: '🔍', desc: '按仓库/品类/商品多维度查询实时库存数量、可用量、在途量等' },
            'inventory-check': { main: 'inventory', title: '库存盘点', icon: '📋', desc: '创建盘点任务，录入实盘数量，系统自动生成盘盈盘亏差异及调整单' },
            'inventory-transfer': { main: 'inventory', title: '库存调拨', icon: '🔄', desc: '仓库间或库位间商品调拨，生成调拨单，调出方扣减、调入方增加库存' },
            'inventory-alert': { main: 'inventory', title: '库存预警', icon: '⚠️', desc: '当库存低于安全库存或高于上限时自动预警，支持消息通知' },
            'inventory-log': { main: 'inventory', title: '库存流水', icon: '📜', desc: '记录所有出入库变动明细，支持按时间、单据、商品追溯库存变化' },
            // 客户管理
            'customer-info': { main: 'customer', title: '客户信息维护', icon: '👤', desc: '录入客户名称、联系人、电话、地址、开票信息等，支持客户档案查看与编辑' },
            'customer-category': { main: 'customer', title: '客户分类', icon: '🏷️', desc: '按行业/等级/区域等维度对客户分类，便于差异化定价与管理' },
            'customer-record': { main: 'customer', title: '客户操作记录', icon: '📝', desc: '记录客户的开单、退货、付款等业务操作历史，形成客户行为档案' },
            'customer-price': { main: 'customer', title: '客户价格体系', icon: '💰', desc: '为不同客户/客户分类设置专属价格或折扣规则' },
            // 供应商管理
            'supplier-info': { main: 'supplier', title: '供应商信息维护', icon: '🏪', desc: '录入供应商名称、联系人、电话、地址、结算方式等基本信息' },
            'supplier-category': { main: 'supplier', title: '供应商分类', icon: '🏷️', desc: '按供应品类/合作等级对供应商分类管理' },
            'supplier-price': { main: 'supplier', title: '供应商价格管理', icon: '💵', desc: '维护供应商供货价格，记录价格变动历史' },
            // 财务管理
            'finance-receivable': { main: 'finance', title: '应收管理', icon: '📥', desc: '管理客户应收账款，支持收款登记、对账核销、账龄分析' },
            'finance-payable': { main: 'finance', title: '应付管理', icon: '📤', desc: '管理供应商应付账款，支持付款登记、对账核销、账龄分析' },
            'finance-flow': { main: 'finance', title: '收支流水', icon: '💳', desc: '记录所有收款、付款流水，支持按客户/供应商/时间段查询' },
            'finance-reconcile': { main: 'finance', title: '对账管理', icon: '📋', desc: '生成客户/供应商对账单，支持发送对账单与确认回执' },
            // 报表统计
            'report-inout': { main: 'report', title: '进销存报表', icon: '📊', desc: '按时间段汇总采购、销售、库存变动，生成进销存汇总表' },
            'report-sales': { main: 'report', title: '销售统计', icon: '📈', desc: '按客户/商品/时间段统计销售额、毛利、销量排行等' },
            'report-purchase': { main: 'report', title: '采购统计', icon: '📉', desc: '按供应商/商品/时间段统计采购额、采购量等' },
            'report-inventory': { main: 'report', title: '库存报表', icon: '📦', desc: '库存分布、库存周转率、滞销商品分析等' },
            // 系统设置
            'system-role': { main: 'system', title: '角色权限', icon: '🔐', desc: '定义系统角色，分配菜单与操作权限，支持数据权限隔离' },
            'system-log': { main: 'system', title: '操作日志', icon: '📜', desc: '记录用户登录与关键操作日志，支持按时间/用户/模块查询' },
            'system-param': { main: 'system', title: '系统参数', icon: '⚙️', desc: '配置单据编号规则、默认仓库、审批流程等全局参数' },
            'system-backup': { main: 'system', title: '数据备份', icon: '💾', desc: '支持手动与定时数据备份，保障数据安全' }
        };
        
        document.querySelectorAll('.sub-nav-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.stopPropagation();
                const page = this.dataset.page;
                const config = subMenuConfig[page];
                if (config) {
                    navigateToSub(page, config.main, config.title, config.icon, config.desc);
                }
            });
        });

        // 初始化 - 默认显示首页
        navigateTo('home');
    </script>
</body>
</html>