编辑页面

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; }
        :root { --primary: #07c160; --primary-dark: #05903f; --bg-gray: #f0f2f5; --bg-white: #ffffff; --text-dark: #333; --text-light: #666; --border: #e8e8e8; --danger: #ff4d4f; --warning: #faad14; --success: #52c41a; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Microsoft YaHei", Arial, sans-serif; background: var(--bg-gray); color: var(--text-dark); font-size: 14px; }
        
        .top-header { background: var(--primary); color: white; padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
        .top-header .logo { font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
        .top-header .user-info { display: flex; align-items: center; gap: 15px; }
        .top-header .user-info .avatar { width: 36px; height: 36px; background: rgba(255,255,255,0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; }
        .top-header .user-info span { cursor: pointer; }
        .top-header .user-info .icon-btn { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
        
        .main-container { display: flex; margin-top: 60px; min-height: calc(100vh - 60px); }
        .sidebar { width: 200px; background: var(--bg-white); border-right: 1px solid var(--border); position: fixed; top: 60px; left: 0; bottom: 0; overflow-y: auto; }
        .menu-group { padding: 10px 0; }
        .menu-title { padding: 10px 20px; font-size: 12px; color: var(--text-light); text-transform: uppercase; }
        .menu-item { padding: 12px 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: all 0.2s; }
        .menu-item:hover { background: #f5f5f5; }
        .menu-item.active { background: #e6f7ed; color: var(--primary); border-right: 3px solid var(--primary); }
        .menu-item .badge { background: var(--danger); color: white; font-size: 10px; padding: 2px 6px; border-radius: 10px; }
        
        .content { flex: 1; margin-left: 200px; padding: 20px; }
        .breadcrumb { padding: 10px 0; margin-bottom: 20px; font-size: 13px; color: var(--text-light); }
        .breadcrumb a { color: var(--primary); text-decoration: none; cursor: pointer; }
        .breadcrumb a:hover { text-decoration: underline; }
        .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .page-title { font-size: 20px; font-weight: 600; }
        .page-actions { display: flex; gap: 10px; }
        
        .btn { padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; display: inline-flex; align-items: center; gap: 5px; transition: all 0.2s; }
        .btn-primary { background: var(--primary); color: white; }
        .btn-primary:hover { background: var(--primary-dark); }
        .btn-default { background: #fff; border: 1px solid var(--border); color: var(--text-dark); }
        .btn-default:hover { border-color: var(--primary); color: var(--primary); }
        .btn-danger { background: var(--danger); color: white; }
        .btn-sm { padding: 5px 10px; font-size: 12px; }
        .btn-link { background: none; border: none; color: var(--primary); padding: 0; }
        .btn-link:hover { text-decoration: underline; }
        
        .card { background: var(--bg-white); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 20px; }
        .card-header { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .card-header .title { font-size: 16px; font-weight: 600; }
        .card-body { padding: 20px; }
        
        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 20px; }
        .stat-card { background: var(--bg-white); border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.2s; }
        .stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        .stat-card .label { font-size: 13px; color: var(--text-light); margin-bottom: 10px; }
        .stat-card .value { font-size: 28px; font-weight: 600; }
        .stat-card .trend { font-size: 12px; margin-top: 5px; }
        .stat-card .trend.up { color: var(--success); }
        .stat-card .trend.down { color: var(--danger); }
        
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border); }
        th { background: #fafafa; font-weight: 600; font-size: 13px; color: var(--text-light); }
        tr:hover { background: #fafafa; }
        tr.clickable { cursor: pointer; }
        
        .status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; }
        .status-success { background: #e6f7ed; color: var(--primary); }
        .status-warning { background: #fff7e6; color: var(--warning); }
        .status-danger { background: #fff2f0; color: var(--danger); }
        .status-default { background: #f5f5f5; color: var(--text-light); }
        
        .pagination { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; }
        .pagination-info { font-size: 13px; color: var(--text-light); }
        .pagination-controls { display: flex; gap: 5px; }
        .pagination-controls button { padding: 5px 12px; border: 1px solid var(--border); background: white; cursor: pointer; border-radius: 4px; }
        .pagination-controls button.active { background: var(--primary); color: white; border-color: var(--primary); }
        
        .form-row { display: flex; gap: 20px; margin-bottom: 15px; }
        .form-group { flex: 1; }
        .form-group label { display: block; margin-bottom: 5px; font-size: 13px; color: var(--text-light); }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; font-size: 14px; outline: none; }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--primary); }
        
        .search-box { display: flex; gap: 10px; margin-bottom: 20px; }
        .search-box input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; }
        .search-box select { padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; min-width: 150px; }
        
        .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
        .quick-action { background: white; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.2s; }
        .quick-action:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
        .quick-action .icon { width: 48px; height: 48px; background: #e6f7ed; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-size: 24px; }
        .quick-action .label { font-size: 14px; color: var(--text-dark); }
        .quick-action .sub { font-size: 12px; color: var(--text-light); margin-top: 5px; }
        
        .page { display: none; }
        .page.active { display: block; }
        
        .detail-section { background: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
        .detail-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
        .detail-row { display: flex; padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
        .detail-row:last-child { border-bottom: none; }
        .detail-label { width: 120px; color: var(--text-light); }
        .detail-value { flex: 1; }
        
        .switch { width: 40px; height: 22px; background: #ccc; border-radius: 11px; position: relative; cursor: pointer; display: inline-block; }
        .switch.active { background: var(--primary); }
        .switch::after { content: ''; width: 18px; height: 18px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: all 0.2s; }
        .switch.active::after { left: 20px; }
        
        .action-btns { display: flex; gap: 10px; }
        .action-btns a { color: var(--primary); cursor: pointer; }
        .action-btns a:hover { text-decoration: underline; }
        .action-btns .delete { color: var(--danger); }
        
        .product-img { width: 60px; height: 60px; border-radius: 4px; object-fit: cover; background: #f5f5f5; }
        
        .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; z-index: 2000; }
        .modal.show { display: flex; align-items: center; justify-content: center; }
        .modal-content { background: white; border-radius: 8px; width: 600px; max-height: 80vh; overflow-y: auto; }
        .modal-header { padding: 15px 20px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
        .modal-header h3 { font-size: 16px; font-weight: 600; }
        .modal-header .close { font-size: 24px; cursor: pointer; }
        .modal-body { padding: 20px; }
        .modal-footer { padding: 15px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
        
        .toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); color: white; padding: 12px 24px; border-radius: 8px; font-size: 14px; z-index: 3000; display: none; }
    </style>
</head>
<body>
    <div class="top-header">
        <div class="logo"><span>🥬</span><span>生鲜优选 - 商家管理后台</span></div>
        <div class="user-info">
            <div class="icon-btn" onclick="showPage('notifications')">🔔<span style="position:absolute;top:5px;right:5px;width:8px;height:8px;background:#ff4d4f;border-radius:50%;"></span></div>
            <div class="avatar" onclick="showPage('account')">👤</div>
            <span onclick="showToast('退出登录')">退出</span>
        </div>
    </div>
    
    <div class="main-container">
        <div class="sidebar">
            <div class="menu-group">
                <div class="menu-title">数据中心</div>
                <div class="menu-item active" data-page="dashboard" onclick="showPage('dashboard')">工作台</div>
                <div class="menu-item" data-page="statistics" onclick="showPage('statistics')">数据统计</div>
            </div>
            <div class="menu-group">
                <div class="menu-title">商品管理</div>
                <div class="menu-item" data-page="products" onclick="showPage('products')">商品管理</div>
                <div class="menu-item" data-page="categories" onclick="showPage('categories')">分类管理</div>
                <div class="menu-item" data-page="specs" onclick="showPage('specs')">规格管理</div>
            </div>
            <div class="menu-group">
                <div class="menu-title">订单管理</div>
                <div class="menu-item" data-page="orders" onclick="showPage('orders')">订单管理<span class="badge">12</span></div>
                <div class="menu-item" data-page="refunds" onclick="showPage('refunds')">退款管理</div>
            </div>
            <div class="menu-group">
                <div class="menu-title">用户管理</div>
                <div class="menu-item" data-page="users" onclick="showPage('users')">用户列表</div>
                <div class="menu-item" data-page="address" onclick="showPage('address')">地址管理</div>
            </div>
            <div class="menu-group">
                <div class="menu-title">系统设置</div>
                <div class="menu-item" data-page="settings" onclick="showPage('settings')">基础设置</div>
                <div class="menu-item" data-page="roles" onclick="showPage('roles')">权限管理</div>
                <div class="menu-item" data-page="delivery" onclick="showPage('delivery')">配送设置</div>
                <div class="menu-item" data-page="notification" onclick="showPage('notification')">通知设置</div>
                <div class="menu-item" data-page="payment" onclick="showPage('payment')">支付设置</div>
            </div>
        </div>
        
        <div class="content" id="mainContent">
            <!-- 工作台 -->
            <div class="page active" id="page-dashboard">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>工作台</div>
                <div class="page-header"><h2 class="page-title">工作台</h2><div class="page-actions"><button class="btn btn-primary" onclick="showModal('addProduct')">+ 添加商品</button></div></div>
                <div class="stats-grid">
                    <div class="stat-card" onclick="showPage('orders')"><div class="label">今日订单</div><div class="value">156</div><div class="trend up">↑ 12.5% 较昨日</div></div>
                    <div class="stat-card" onclick="showPage('statistics')"><div class="label">今日销售额</div><div class="value">¥8,562</div><div class="trend up">↑ 8.3% 较昨日</div></div>
                    <div class="stat-card" onclick="showPage('orders')"><div class="label">待发货订单</div><div class="value">23</div><div class="trend down">↓ 5.2% 较昨日</div></div>
                    <div class="stat-card" onclick="showPage('users')"><div class="label">新增用户</div><div class="value">45</div><div class="trend up">↑ 15.8% 较昨日</div></div>
                </div>
                <div class="card">
                    <div class="card-header"><span class="title">快捷操作</span></div>
                    <div class="card-body">
                        <div class="quick-actions">
                            <div class="quick-action" onclick="showModal('addProduct')"><div class="icon">📦</div><div class="label">添加商品</div></div>
                            <div class="quick-action" onclick="showPage('orders')"><div class="icon">🚚</div><div class="label">处理订单</div><div class="sub">待发货 23单</div></div>
                            <div class="quick-action" onclick="showPage('products')"><div class="icon">📋</div><div class="label">商品管理</div><div class="sub">共 28 件</div></div>
                            <div class="quick-action" onclick="showPage('refunds')"><div class="icon">💰</div><div class="label">退款审核</div><div class="sub">待处理 3单</div></div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header"><span class="title">待处理事项</span></div>
                    <div class="card-body">
                        <table>
                            <thead><tr><th>类型</th><th>内容</th><th>时间</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr class="clickable" onclick="showPage('orderDetail')"><td><span class="status status-warning">待发货</span></td><td>订单 #DD20240512001 需发货</td><td>10分钟前</td><td><button class="btn btn-sm btn-primary">处理</button></td></tr>
                                <tr class="clickable" onclick="showPage('refundDetail')"><td><span class="status status-danger">退款</span></td><td>用户申请退款 ¥68.00</td><td>30分钟前</td><td><button class="btn btn-sm btn-default">审核</button></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header"><span class="title">最新订单</span><a onclick="showPage('orders')" class="btn-link">查看全部</a></div>
                    <div class="card-body">
                        <table>
                            <thead><tr><th>订单号</th><th>用户</th><th>金额</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr class="clickable" onclick="showPage('orderDetail')"><td>DD20240512003</td><td>张三</td><td>¥128.00</td><td><span class="status status-success">已完成</span></td><td><button class="btn btn-sm btn-link">详情</button></td></tr>
                                <tr class="clickable" onclick="showPage('orderDetail')"><td>DD20240512002</td><td>李四</td><td>¥68.00</td><td><span class="status status-warning">待发货</span></td><td><button class="btn btn-sm btn-link">发货</button></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 商品管理 -->
            <div class="page" id="page-products">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span><a onclick="showPage('products')">商品管理</a><span>/</span>商品列表</div>
                <div class="page-header"><h2 class="page-title">商品管理</h2><div class="page-actions"><button class="btn btn-primary" onclick="showModal('addProduct')">+ 添加商品</button></div></div>
                <div class="search-box">
                    <input type="text" placeholder="搜索商品名称...">
                    <select><option>全部分类</option><option>时令水果</option><option>新鲜蔬菜</option></select>
                    <button class="btn btn-primary">搜索</button>
                </div>
                <div class="card">
                    <div class="card-header"><span class="title">商品列表</span></div>
                    <div class="card-body">
                        <table>
                            <thead><tr><th>商品信息</th><th>分类</th><th>价格</th><th>库存</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr class="clickable" onclick="showPage('productDetail')"><td style="display:flex;align-items:center;gap:10px;"><div style="width:50px;height:50px;background:#f0f0f0;border-radius:4px;"></div><span style="font-weight:600;">新鲜草莓 500g</span></td><td>时令水果</td><td>¥29.90</td><td>156</td><td><span class="status status-success">上架中</span></td><td onclick="event.stopPropagation()"><div class="action-btns"><a onclick="showModal('editProduct')">编辑</a></div></td></tr>
                                <tr class="clickable" onclick="showPage('productDetail')"><td style="display:flex;align-items:center;gap:10px;"><div style="width:50px;height:50px;background:#f0f0f0;border-radius:4px;"></div><span style="font-weight:600;">澳洲进口牛排 200g</span></td><td>肉禽蛋</td><td>¥68.00</td><td>8</td><td><span class="status status-success">上架中</span></td><td onclick="event.stopPropagation()"><div class="action-btns"><a onclick="showModal('editProduct')">编辑</a></div></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 商品详情 -->
            <div class="page" id="page-productDetail">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span><a onclick="showPage('products')">商品管理</a><span>/</span>商品详情</div>
                <div class="page-header"><h2 class="page-title">商品详情</h2><div class="page-actions"><button class="btn btn-default" onclick="showPage('products')">返回列表</button></div></div>
                <div class="detail-section"><h3>基本信息</h3>
                    <div class="detail-row"><div class="detail-label">商品名称</div><div class="detail-value">新鲜草莓 500g/盒</div></div>
                    <div class="detail-row"><div class="detail-label">商品分类</div><div class="detail-value">时令水果</div></div>
                    <div class="detail-row"><div class="detail-label">商品价格</div><div class="detail-value">¥29.90</div></div>
                    <div class="detail-row"><div class="detail-label">商品库存</div><div class="detail-value">156 件</div></div>
                </div>
            </div>
            
            <!-- 分类管理 -->
            <div class="page" id="page-categories">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span><a onclick="showPage('products')">商品管理</a><span>/</span>分类管理</div>
                <div class="page-header"><h2 class="page-title">分类管理</h2><div class="page-actions"><button class="btn btn-primary">+ 添加分类</button></div></div>
                <div class="card">
                    <div class="card-header"><span class="title">商品分类列表</span></div>
                    <div class="card-body">
                        <table>
                            <thead><tr><th>排序</th><th>分类名称</th><th>商品数量</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>1</td><td>时令水果</td><td>68</td><td><span class="switch active" onclick="this.classList.toggle('active')"></span></td><td><div class="action-btns"><a>编辑</a></div></td></tr>
                                <tr><td>2</td><td>新鲜蔬菜</td><td>45</td><td><span class="switch active" onclick="this.classList.toggle('active')"></span></td><td><div class="action-btns"><a>编辑</a></div></td></tr>
                                <tr><td>3</td><td>肉禽蛋</td><td>32</td><td><span class="switch active" onclick="this.classList.toggle('active')"></span></td><td><div class="action-btns"><a>编辑</a></div></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 规格管理 -->
            <div class="page" id="page-specs">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span><a onclick="showPage('products')">商品管理</a><span>/</span>规格管理</div>
                <div class="page-header"><h2 class="page-title">规格管理</h2><div class="page-actions"><button class="btn btn-primary">+ 添加规格</button></div></div>
                <div class="card">
                    <div class="card-header"><span class="title">规格列表</span></div>
                    <div class="card-body">
                        <table>
                            <thead><tr><th>规格名称</th><th>规格值</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>重量</td><td>300g、500g、1kg</td><td><div class="action-btns"><a>编辑</a><a class="delete">删除</a></div></td></tr>
                                <tr><td>包装</td><td>散装、盒装、礼盒装</td><td><div class="action-btns"><a>编辑</a><a class="delete">删除</a></div></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 订单管理 -->
            <div class="page" id="page-orders">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>订单管理<span>/</span>订单列表</div>
                <div class="page-header"><h2 class="page-title">订单管理</h2></div>
                <div class="search-box"><input type="text" placeholder="订单号/用户名"><button class="btn btn-primary">搜索</button></div>
                <div class="card">
                    <div class="card-header"><span class="title">订单列表</span></div>
                    <div class="card-body">
                        <table>
                            <thead><tr><th>订单号</th><th>用户</th><th>金额</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr class="clickable" onclick="showPage('orderDetail')"><td>DD20240512001</td><td>张三</td><td>¥196.90</td><td><span class="status status-warning">待发货</span></td><td onclick="event.stopPropagation()"><div class="action-btns"><a onclick="showPage('orderDetail')">详情</a></div></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 订单详情 -->
            <div class="page" id="page-orderDetail">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span><a onclick="showPage('orders')">订单管理</a><span>/</span>订单详情</div>
                <div class="page-header"><h2 class="page-title">订单详情</h2><div class="page-actions"><button class="btn btn-default" onclick="showPage('orders')">返回列表</button></div></div>
                <div class="detail-section"><h3>订单信息</h3>
                    <div class="detail-row"><div class="detail-label">订单编号</div><div class="detail-value">DD20240512001</div></div>
                    <div class="detail-row"><div class="detail-label">订单状态</div><div class="detail-value"><span class="status status-warning">待发货</span></div></div>
                </div>
                <div class="detail-section"><h3>收货信息</h3>
                    <div class="detail-row"><div class="detail-label">收货人</div><div class="detail-value">张三 138****8888</div></div>
                    <div class="detail-row"><div class="detail-label">收货地址</div><div class="detail-value">上海市浦东新区陆家嘴街道</div></div>
                </div>
            </div>
            
            <!-- 退款管理 -->
            <div class="page" id="page-refunds">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>订单管理<span>/</span>退款管理</div>
                <div class="page-header"><h2 class="page-title">退款管理</h2></div>
                <div class="card">
                    <div class="card-header"><span class="title">退款申请列表</span></div>
                    <div class="card-body">
                        <table>
                            <thead><tr><th>退款单号</th><th>订单号</th><th>用户</th><th>退款金额</th><th>状态</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr class="clickable" onclick="showPage('refundDetail')"><td>TK20240512001</td><td>DD20240511005</td><td>张三</td><td>¥68.00</td><td><span class="status status-warning">待处理</span></td><td onclick="event.stopPropagation()"><button class="btn btn-sm btn-primary">处理</button></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 退款详情 -->
            <div class="page" id="page-refundDetail">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span><a onclick="showPage('refunds')">退款管理</a><span>/</span>退款详情</div>
                <div class="page-header"><h2 class="page-title">退款详情</h2><div class="page-actions"><button class="btn btn-default" onclick="showPage('refunds')">返回列表</button><button class="btn btn-primary">同意退款</button></div></div>
                <div class="detail-section"><h3>退款信息</h3>
                    <div class="detail-row"><div class="detail-label">退款单号</div><div class="detail-value">TK20240512001</div></div>
                    <div class="detail-row"><div class="detail-label">退款金额</div><div class="detail-value" style="color:var(--danger);">¥68.00</div></div>
                    <div class="detail-row"><div class="detail-label">退款原因</div><div class="detail-value">商品损坏</div></div>
                </div>
            </div>
            
            <!-- 用户列表 -->
            <div class="page" id="page-users">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>用户管理<span>/</span>用户列表</div>
                <div class="page-header"><h2 class="page-title">用户列表</h2></div>
                <div class="search-box"><input type="text" placeholder="搜索用户..."><button class="btn btn-primary">搜索</button></div>
                <div class="card">
                    <div class="card-header"><span class="title">用户列表</span></div>
                    <div class="card-body">
                        <table>
                            <thead><tr><th>用户信息</th><th>手机号</th><th>会员等级</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr class="clickable" onclick="showPage('userDetail')"><td style="display:flex;align-items:center;gap:10px;"><div style="width:40px;height:40px;background:#ddd;border-radius:50%;"></div><span style="font-weight:600;">张三</span></td><td>138****8888</td><td><span class="status status-warning">VIP</span></td><td onclick="event.stopPropagation()"><div class="action-btns"><a onclick="showPage('userDetail')">详情</a></div></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 用户详情 -->
            <div class="page" id="page-userDetail">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span><a onclick="showPage('users')">用户管理</a><span>/</span>用户详情</div>
                <div class="page-header"><h2 class="page-title">用户详情</h2><div class="page-actions"><button class="btn btn-default" onclick="showPage('users')">返回列表</button></div></div>
                <div class="detail-section"><h3>基本信息</h3>
                    <div class="detail-row"><div class="detail-label">用户昵称</div><div class="detail-value">张三</div></div>
                    <div class="detail-row"><div class="detail-label">手机号码</div><div class="detail-value">138****8888</div></div>
                    <div class="detail-row"><div class="detail-label">会员等级</div><div class="detail-value"><span class="status status-warning">VIP会员</span></div></div>
                </div>
            </div>
            
            <!-- 地址管理 -->
            <div class="page" id="page-address">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>用户管理<span>/</span>地址管理</div>
                <div class="page-header"><h2 class="page-title">地址管理</h2></div>
                <div class="card">
                    <div class="card-header"><span class="title">用户地址列表</span></div>
                    <div class="card-body">
                        <table>
                            <thead><tr><th>用户</th><th>收货人</th><th>手机号</th><th>收货地址</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>张三</td><td>张三</td><td>138****8888</td><td>上海市浦东新区陆家嘴街道</td><td><div class="action-btns"><a>查看</a></div></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 数据统计 -->
            <div class="page" id="page-statistics">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>数据中心<span>/</span>数据统计</div>
                <div class="page-header"><h2 class="page-title">数据统计</h2></div>
                <div class="stats-grid">
                    <div class="stat-card"><div class="label">总销售额</div><div class="value">¥128,560</div><div class="trend up">↑ 15.8%</div></div>
                    <div class="stat-card"><div class="label">总订单数</div><div class="value">1,568</div><div class="trend up">↑ 12.3%</div></div>
                    <div class="stat-card"><div class="label">新增用户</div><div class="value">456</div><div class="trend up">↑ 8.5%</div></div>
                    <div class="stat-card"><div class="label">客单价</div><div class="value">¥82.00</div><div class="trend up">↑ 3.2%</div></div>
                </div>
            </div>
            
            <!-- ========== 系统设置相关页面 ========== -->
            
            <!-- 基础设置 -->
            <div class="page" id="page-settings">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>系统设置<span>/</span>基础设置</div>
                <div class="page-header"><h2 class="page-title">基础设置</h2></div>
                <div class="card">
                    <div class="card-header"><span class="title">基础配置</span></div>
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group">
                                <label>平台名称</label>
                                <input type="text" value="生鲜优选">
                            </div>
                            <div class="form-group">
                                <label>联系电话</label>
                                <input type="text" value="400-888-8888">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label>客服微信</label>
                                <input type="text" placeholder="请输入客服微信号">
                            </div>
                            <div class="form-group">
                                <label>营业时间</label>
                                <input type="text" value="08:00 - 22:00">
                            </div>
                        </div>
                        <div class="form-group">
                            <label>平台Logo</label>
                            <div style="display:flex;align-items:center;gap:15px;">
                                <div style="width:80px;height:80px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:32px;">🥬</div>
                                <button class="btn btn-default">更换Logo</button>
                            </div>
                        </div>
                        <div style="margin-top:20px;"><button class="btn btn-primary" onclick="showToast('保存成功')">保存设置</button></div>
                    </div>
                </div>
            </div>
            
            <!-- 权限管理 -->
            <div class="page" id="page-roles">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>系统设置<span>/</span>权限管理</div>
                <div class="page-header"><h2 class="page-title">权限管理</h2><div class="page-actions"><button class="btn btn-primary">+ 添加角色</button></div></div>
                <div class="card">
                    <div class="card-header"><span class="title">角色列表</span></div>
                    <div class="card-body">
                        <table>
                            <thead><tr><th>角色名称</th><th>角色描述</th><th>权限数量</th><th>用户数量</th><th>操作</th></tr></thead>
                            <tbody>
                                <tr><td>超级管理员</td><td>拥有所有权限</td><td>全部</td><td>2</td><td><div class="action-btns"><a>编辑</a></div></td></tr>
                                <tr><td>运营管理员</td><td>负责日常运营</td><td>部分</td><td>5</td><td><div class="action-btns"><a>编辑</a></div></td></tr>
                                <tr><td>商品管理员</td><td>负责商品上下架</td><td>商品管理</td><td>3</td><td><div class="action-btns"><a>编辑</a></div></td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 配送设置 -->
            <div class="page" id="page-delivery">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>系统设置<span>/</span>配送设置</div>
                <div class="page-header"><h2 class="page-title">配送设置</h2></div>
                <div class="card">
                    <div class="card-header"><span class="title">配送配置</span></div>
                    <div class="card-body">
                        <div class="form-row">
                            <div class="form-group">
                                <label>配送半径（公里）</label>
                                <input type="number" value="10">
                            </div>
                            <div class="form-group">
                                <label>预计送达时间（分钟）</label>
                                <input type="number" value="30">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label>起送价（元）</label>
                                <input type="number" value="29">
                            </div>
                            <div class="form-group">
                                <label>配送费（元）</label>
                                <input type="number" value="5">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label>满免配送费（元）</label>
                                <input type="number" value="99">
                            </div>
                            <div class="form-group">
                                <label>配送方式</label>
                                <select><option>平台配送</option><option>商家自送</option><option>骑手配送</option></select>
                            </div>
                        </div>
                        <div style="margin-top:20px;"><button class="btn btn-primary" onclick="showToast('保存成功')">保存设置</button></div>
                    </div>
                </div>
            </div>
            
            <!-- 通知设置 -->
            <div class="page" id="page-notification">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>系统设置<span>/</span>通知设置</div>
                <div class="page-header"><h2 class="page-title">通知设置</h2></div>
                <div class="card">
                    <div class="card-header"><span class="title">通知配置</span></div>
                    <div class="card-body">
                        <div class="detail-section" style="box-shadow:none;padding:0;margin-bottom:20px;">
                            <h3 style="border:none;padding-bottom:10px;">短信通知</h3>
                            <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f5f5f5;">
                                <span>订单通知</span>
                                <span class="switch active" onclick="this.classList.toggle('active')"></span>
                            </div>
                            <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f5f5f5;">
                                <span>发货通知</span>
                                <span class="switch active" onclick="this.classList.toggle('active')"></span>
                            </div>
                            <div style="display:flex;justify-content:space-between;padding:10px 0;">
                                <span>退款通知</span>
                                <span class="switch active" onclick="this.classList.toggle('active')"></span>
                            </div>
                        </div>
                        <div class="detail-section" style="box-shadow:none;padding:0;">
                            <h3 style="border:none;padding-bottom:10px;">公众号通知</h3>
                            <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f5f5f5;">
                                <span>模板消息</span>
                                <span class="switch active" onclick="this.classList.toggle('active')"></span>
                            </div>
                            <div style="display:flex;justify-content:space-between;padding:10px 0;">
                                <span>客服消息</span>
                                <span class="switch active" onclick="this.classList.toggle('active')"></span>
                            </div>
                        </div>
                        <div style="margin-top:20px;"><button class="btn btn-primary" onclick="showToast('保存成功')">保存设置</button></div>
                    </div>
                </div>
            </div>
            
            <!-- 支付设置 -->
            <div class="page" id="page-payment">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>系统设置<span>/</span>支付设置</div>
                <div class="page-header"><h2 class="page-title">支付设置</h2></div>
                <div class="card">
                    <div class="card-header"><span class="title">支付方式</span></div>
                    <div class="card-body">
                        <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:20px;">
                            <div style="border:1px solid var(--border);border-radius:8px;padding:20px;">
                                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;">
                                    <span style="font-weight:600;">微信支付</span>
                                    <span class="switch active" onclick="this.classList.toggle('active')"></span>
                                </div>
                                <div class="form-group" style="margin-bottom:0;">
                                    <label>商户号</label>
                                    <input type="text" placeholder="请输入微信商户号">
                                </div>
                            </div>
                            <div style="border:1px solid var(--border);border-radius:8px;padding:20px;">
                                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;">
                                    <span style="font-weight:600;">支付宝</span>
                                    <span class="switch active" onclick="this.classList.toggle('active')"></span>
                                </div>
                                <div class="form-group" style="margin-bottom:0;">
                                    <label>商户号</label>
                                    <input type="text" placeholder="请输入支付宝商户号">
                                </div>
                            </div>
                        </div>
                        <div style="margin-top:20px;"><button class="btn btn-primary" onclick="showToast('保存成功')">保存设置</button></div>
                    </div>
                </div>
            </div>
            
            <!-- 通知中心 -->
            <div class="page" id="page-notifications">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>通知中心</div>
                <div class="page-header"><h2 class="page-title">通知中心</h2></div>
                <div class="card">
                    <div class="card-header"><span class="title">系统通知</span></div>
                    <div class="card-body">
                        <table>
                            <thead><tr><th>通知类型</th><th>通知内容</th><th>时间</th><th>状态</th></tr></thead>
                            <tbody>
                                <tr><td><span class="status status-warning">待处理</span></td><td>您有3个订单待发货</td><td>2024-05-12 10:00</td><td>未读</td></tr>
                                <tr><td><span class="status status-default">系统</span></td><td>系统升级通知</td><td>2024-05-10 09:00</td><td>已读</td></tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 账号设置 -->
            <div class="page" id="page-account">
                <div class="breadcrumb"><a onclick="showPage('dashboard')">首页</a><span>/</span>账号设置</div>
                <div class="page-header"><h2 class="page-title">账号设置</h2></div>
                <div class="card">
                    <div class="card-header"><span class="title">个人信息</span></div>
                    <div class="card-body">
                        <div style="display:flex;align-items:center;gap:20px;padding:20px;">
                            <div style="width:80px;height:80px;background:#ddd;border-radius:50%;"></div>
                            <div><div style="font-size:18px;font-weight:600;">管理员</div><div style="color:var(--text-light);margin-top:5px;">超级管理员</div></div>
                        </div>
                        <div class="form-row" style="margin-top:20px;">
                            <div class="form-group"><label>账号</label><input type="text" value="admin" disabled></div>
                            <div class="form-group"><label>手机号</label><input type="text" value="138****8888"></div>
                        </div>
                        <div class="form-group" style="margin-top:15px;"><label>邮箱</label><input type="email" value="admin@example.com"></div>
                        <div style="margin-top:20px;"><button class="btn btn-primary" onclick="showToast('保存成功')">保存修改</button></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 添加商品弹窗 -->
    <div class="modal" id="addProductModal">
        <div class="modal-content">
            <div class="modal-header"><h3>添加商品</h3><span class="close" onclick="closeModal()">×</span></div>
            <div class="modal-body">
                <div class="form-group"><label>商品名称 *</label><input type="text" placeholder="请输入商品名称"></div>
                <div class="form-row">
                    <div class="form-group"><label>商品分类 *</label><select><option>请选择分类</option><option>时令水果</option><option>新鲜蔬菜</option></select></div>
                    <div class="form-group"><label>商品价格 *</label><input type="number" placeholder="0.00"></div>
                </div>
                <div class="form-row">
                    <div class="form-group"><label>库存数量 *</label><input type="number" placeholder="0"></div>
                    <div class="form-group"><label>商品单位</label><input type="text" placeholder="如：500g/盒"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="closeModal();showToast('商品添加成功')">确认添加</button>
            </div>
        </div>
    </div>
    
    <!-- 编辑商品弹窗 -->
    <div class="modal" id="editProductModal">
        <div class="modal-content">
            <div class="modal-header"><h3>编辑商品</h3><span class="close" onclick="closeModal()">×</span></div>
            <div class="modal-body">
                <div class="form-group"><label>商品名称</label><input type="text" value="新鲜草莓 500g/盒"></div>
                <div class="form-row">
                    <div class="form-group"><label>商品价格</label><input type="number" value="29.9"></div>
                    <div class="form-group"><label>库存</label><input type="number" value="156"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" onclick="closeModal()">取消</button>
                <button class="btn btn-primary" onclick="closeModal();showToast('保存成功')">保存</button>
            </div>
        </div>
    </div>
    
    <!-- Toast -->
    <div id="toast" class="toast"></div>
    
    <script>
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(function(p) {
                p.classList.remove('active');
            });
            // 显示目标页面
            var targetPage = document.getElementById('page-' + pageId);
            if (targetPage) {
                targetPage.classList.add('active');
            }
            // 更新菜单高亮
            document.querySelectorAll('.menu-item').forEach(function(item) {
                item.classList.remove('active');
                if (item.getAttribute('data-page') === pageId) {
                    item.classList.add('active');
                }
            });
            // 滚动到顶部
            window.scrollTo(0, 0);
        }
        
        function showModal(type) {
            var modal = document.getElementById(type + 'Modal');
            if (modal) {
                modal.classList.add('show');
            }
        }
        
        function closeModal() {
            document.querySelectorAll('.modal').forEach(function(m) {
                m.classList.remove('show');
            });
        }
        
        document.querySelectorAll('.modal').forEach(function(modal) {
            modal.addEventListener('click', function(e) {
                if (e.target === this) closeModal();
            });
        });
        
        function showToast(msg) {
            var toast = document.getElementById('toast');
            toast.textContent = msg;
            toast.style.display = 'block';
            setTimeout(function() {
                toast.style.display = 'none';
            }, 2000);
        }
    </script>
</body>
</html>