编辑页面

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: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f5f6f8;
            color: #333;
        }
        /* 整体布局 */
        .app-container {
            display: flex;
            min-height: 100vh;
        }
        /* 左侧导航 */
        .sidebar {
            width: 220px;
            background: linear-gradient(180deg, #2c5e2e 0%, #1a3d1c 100%);
            color: #fff;
            padding: 20px 0;
            display: flex;
            flex-direction: column;
        }
        .logo {
            padding: 0 20px 30px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            margin-bottom: 20px;
        }
        .logo h1 {
            font-size: 20px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .logo-icon {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, #4a8f4a 0%, #2c5e2e 100%);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nav-section {
            margin-bottom: 10px;
        }
        .nav-title {
            font-size: 11px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.4);
            padding: 10px 20px 5px;
            letter-spacing: 1px;
        }
        .nav-item {
            padding: 12px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.2s;
            border-left: 3px solid transparent;
        }
        .nav-item:hover {
            background: rgba(255,255,255,0.1);
        }
        .nav-item.active {
            background: rgba(255,255,255,0.15);
            border-left-color: #7cb342;
        }
        .nav-item svg {
            width: 20px;
            height: 20px;
            opacity: 0.8;
        }
        .nav-item span {
            font-size: 14px;
        }
        .nav-item .badge {
            background: #e53935;
            color: #fff;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: auto;
        }
        .sidebar-footer {
            margin-top: auto;
            padding: 20px;
            border-top: 1px solid rgba(255,255,255,0.1);
        }
        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .user-avatar {
            width: 40px;
            height: 40px;
            background: #7cb342;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        .user-details {
            flex: 1;
        }
        .user-name {
            font-size: 14px;
            font-weight: 500;
        }
        .user-role {
            font-size: 12px;
            color: rgba(255,255,255,0.6);
        }
        /* 右侧内容区 */
        .main-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        /* 顶部栏 */
        .header {
            background: #fff;
            padding: 16px 30px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #eee;
        }
        .header-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .page-title {
            font-size: 20px;
            font-weight: 600;
            color: #1a1a1a;
        }
        .header-right {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        .header-time {
            color: #666;
            font-size: 14px;
        }
        .header-icon {
            width: 36px;
            height: 36px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
        }
        .header-icon .dot {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 8px;
            height: 8px;
            background: #e53935;
            border-radius: 50%;
        }
        /* 内容区域 */
        .content-area {
            flex: 1;
            padding: 24px 30px;
            overflow-y: auto;
        }
        /* 卡片通用样式 */
        .card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        .card-title {
            font-size: 16px;
            font-weight: 600;
            color: #1a1a1a;
        }
        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 24px;
        }
        .stat-card {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .stat-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 16px;
        }
        .stat-icon.blue { background: #e3f2fd; color: #1976d2; }
        .stat-icon.green { background: #e8f5e9; color: #388e3c; }
        .stat-icon.orange { background: #fff3e0; color: #f57c00; }
        .stat-icon.red { background: #ffebee; color: #d32f2f; }
        .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 4px;
        }
        .stat-label {
            font-size: 14px;
            color: #666;
        }
        .stat-change {
            font-size: 12px;
            margin-top: 8px;
        }
        .stat-change.up { color: #4caf50; }
        .stat-change.down { color: #f44336; }
        /* 表格样式 */
        .table-container {
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 14px 16px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
        }
        th {
            background: #fafafa;
            font-weight: 600;
            font-size: 13px;
            color: #666;
        }
        td {
            font-size: 14px;
            color: #333;
        }
        tr:hover {
            background: #fafafa;
        }
        /* 按钮样式 */
        .btn {
            padding: 8px 16px;
            border-radius: 6px;
            font-size: 13px;
            cursor: pointer;
            border: none;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-primary {
            background: #2c5e2e;
            color: #fff;
        }
        .btn-primary:hover {
            background: #1a3d1c;
        }
        .btn-outline {
            background: transparent;
            border: 1px solid #d9d9d9;
            color: #666;
        }
        .btn-outline:hover {
            border-color: #2c5e2e;
            color: #2c5e2e;
        }
        .btn-sm {
            padding: 4px 10px;
            font-size: 12px;
        }
        /* 状态标签 */
        .status-tag {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }
        .status-tag.pending { background: #fff3e0; color: #f57c00; }
        .status-tag.shipped { background: #e3f2fd; color: #1976d2; }
        .status-tag.completed { background: #e8f5e9; color: #388e3c; }
        .status-tag.refund { background: #ffebee; color: #d32f2f; }
        .status-tag.on-sale { background: #e8f5e9; color: #388e3c; }
        .status-tag.off-sale { background: #f5f5f5; color: #999; }
        /* 分页 */
        .pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #f0f0f0;
        }
        .pagination-info {
            font-size: 14px;
            color: #666;
        }
        .pagination-buttons {
            display: flex;
            gap: 8px;
        }
        .pagination-btn {
            width: 32px;
            height: 32px;
            border: 1px solid #d9d9d9;
            background: #fff;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
        }
        .pagination-btn:hover {
            border-color: #2c5e2e;
            color: #2c5e2e;
        }
        .pagination-btn.active {
            background: #2c5e2e;
            color: #fff;
            border-color: #2c5e2e;
        }
        /* 表单元素 */
        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 16px;
        }
        .form-group {
            flex: 1;
        }
        .form-label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 8px;
            color: #333;
        }
        .form-input {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
            transition: border-color 0.2s;
        }
        .form-input:focus {
            outline: none;
            border-color: #2c5e2e;
        }
        .form-select {
            width: 100%;
            padding: 10px 14px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
            background: #fff;
            cursor: pointer;
        }
        textarea.form-input {
            min-height: 100px;
            resize: vertical;
        }
        /* 搜索栏 */
        .search-bar {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .search-input {
            flex: 1;
            min-width: 200px;
            padding: 10px 14px 10px 40px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
            background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 12px center;
        }
        .filter-select {
            padding: 10px 14px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            font-size: 14px;
            background: #fff;
            cursor: pointer;
            min-width: 140px;
        }
        /* 弹窗 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }
        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .modal {
            background: #fff;
            border-radius: 12px;
            width: 90%;
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
            transform: translateY(-20px);
            transition: transform 0.3s;
        }
        .modal-overlay.active .modal {
            transform: translateY(0);
        }
        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .modal-title {
            font-size: 18px;
            font-weight: 600;
        }
        .modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: #f5f5f5;
            border-radius: 6px;
            cursor: pointer;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .modal-close:hover {
            background: #eee;
        }
        .modal-body {
            padding: 24px;
        }
        .modal-footer {
            padding: 16px 24px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }
        /* 图片预览 */
        .product-image {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 6px;
        }
        .product-images {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .product-images .preview-img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 6px;
            cursor: pointer;
            border: 2px solid transparent;
        }
        .product-images .preview-img:hover {
            border-color: #2c5e2e;
        }
        .product-images .add-img {
            width: 80px;
            height: 80px;
            border: 2px dashed #d9d9d9;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: #999;
            font-size: 30px;
        }
        /* 标签页 */
        .tabs {
            display: flex;
            gap: 4px;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }
        .tab {
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            font-size: 14px;
            color: #666;
            transition: all 0.2s;
        }
        .tab:hover {
            color: #2c5e2e;
        }
        .tab.active {
            color: #2c5e2e;
            border-bottom-color: #2c5e2e;
        }
        /* 图表区域 */
        .chart-container {
            height: 300px;
            background: #fafafa;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            margin-top: 16px;
        }
        /* 活动卡片 */
        .activity-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
        }
        .activity-card {
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 16px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .activity-card:hover {
            border-color: #2c5e2e;
            box-shadow: 0 2px 8px rgba(44,94,46,0.1);
        }
        .activity-icon {
            width: 40px;
            height: 40px;
            background: #e8f5e9;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            font-size: 20px;
        }
        .activity-title {
            font-weight: 600;
            margin-bottom: 6px;
        }
        .activity-desc {
            font-size: 13px;
            color: #666;
        }
        /* 评价卡片 */
        .review-item {
            display: flex;
            gap: 16px;
            padding: 16px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        .review-avatar {
            width: 40px;
            height: 40px;
            background: #e0e0e0;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .review-content {
            flex: 1;
        }
        .review-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .review-user {
            font-weight: 500;
        }
        .review-time {
            font-size: 12px;
            color: #999;
        }
        .review-text {
            font-size: 14px;
            color: #333;
            line-height: 1.6;
            margin-bottom: 8px;
        }
        .review-product {
            font-size: 13px;
            color: #666;
            background: #f5f5f5;
            padding: 8px 12px;
            border-radius: 4px;
        }
        .review-images {
            display: flex;
            gap: 8px;
            margin: 10px 0;
        }
        .review-images img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
        }
        /* 回复框 */
        .reply-box {
            margin-top: 12px;
            display: flex;
            gap: 10px;
        }
        .reply-box input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
        }
        /* 物流设置 */
        .logistics-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: #fafafa;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .logistics-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #2c5e2e;
        }
        /* 快捷操作 */
        .quick-actions {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px;
        }
        .quick-action {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            background: #fafafa;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .quick-action:hover {
            background: #e8f5e9;
        }
        .quick-action-icon {
            width: 48px;
            height: 48px;
            background: #fff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            font-size: 24px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }
        .quick-action-label {
            font-size: 14px;
            font-weight: 500;
        }
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #999;
        }
        .empty-state svg {
            width: 80px;
            height: 80px;
            margin-bottom: 16px;
            opacity: 0.5;
        }
        /* 隐藏页面 */
        .page {
            display: none;
        }
        .page.active {
            display: block;
        }
        /* 通知提示 */
        .toast {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #fff;
            padding: 16px 24px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            gap: 12px;
            transform: translateX(120%);
            transition: transform 0.3s;
            z-index: 2000;
        }
        .toast.show {
            transform: translateX(0);
        }
        .toast.success {
            border-left: 4px solid #4caf50;
        }
        .toast.error {
            border-left: 4px solid #f44336;
        }
        .toast-icon {
            width: 24px;
            height: 24px;
        }
        /* 步骤条 */
        .steps {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
        }
        .step {
            display: flex;
            align-items: center;
        }
        .step-circle {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #e0e0e0;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        .step.active .step-circle {
            background: #2c5e2e;
        }
        .step.completed .step-circle {
            background: #4caf50;
        }
        .step-label {
            margin-left: 8px;
            font-size: 14px;
            color: #999;
        }
        .step.active .step-label {
            color: #2c5e2e;
            font-weight: 500;
        }
        .step.completed .step-label {
            color: #4caf50;
        }
        .step-line {
            width: 80px;
            height: 2px;
            background: #e0e0e0;
            margin: 0 16px;
        }
        .step.completed + .step .step-line,
        .step.completed .step-line {
            background: #4caf50;
        }
        /* 物流信息 */
        .logistics-form {
            background: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            margin-top: 20px;
        }
        .express-company {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-top: 16px;
        }
        .express-option {
            padding: 12px;
            border: 1px solid #d9d9d9;
            border-radius: 6px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        .express-option:hover {
            border-color: #2c5e2e;
        }
        .express-option.selected {
            border-color: #2c5e2e;
            background: #e8f5e9;
        }
        /* 退款处理 */
        .refund-reason {
            background: #fff3e0;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 16px;
        }
        .refund-reason h4 {
            color: #f57c00;
            margin-bottom: 8px;
        }
        /* 规格管理 */
        .spec-row {
            display: flex;
            gap: 12px;
            align-items: center;
            margin-bottom: 12px;
            padding: 12px;
            background: #f9f9f9;
            border-radius: 6px;
        }
        .spec-row input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
        }
        .spec-row .btn {
            padding: 8px 12px;
        }
    </style>
</head>
<body>
    <div class="app-container">
        <!-- 左侧导航 -->
        <aside class="sidebar">
            <div class="logo">
                <h1>
                    <div class="logo-icon">
                        <svg width="24" height="24" fill="white" viewBox="0 0 24 24">
                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                        </svg>
                    </div>
                    茶叶商城
                </h1>
            </div>
            
            <nav class="nav-section">
                <div class="nav-title">主菜单</div>
                <div class="nav-item active" data-page="dashboard">
                    <svg fill="currentColor" viewBox="0 0 24 24"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
                    <span>首页</span>
                </div>
                <div class="nav-item" data-page="products">
                    <svg fill="currentColor" viewBox="0 0 24 24"><path d="M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6-2c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2zm6 16H6V8h2v2c0 .55.45 1 1 1s1-.45 1-1V8h4v2c0 .55.45 1 1 1s1-.45 1-1V8h2v12z"/></svg>
                    <span>商品管理</span>
                </div>
                <div class="nav-item" data-page="orders">
                    <svg fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                    <span>订单管理</span>
                    <span class="badge">5</span>
                </div>
                <div class="nav-item" data-page="marketing">
                    <svg fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                    <span>营销管理</span>
                </div>
                <div class="nav-item" data-page="logistics">
                    <svg fill="currentColor" viewBox="0 0 24 24"><path d="M18 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM19.5 9.5l1.96 2.5H17V9.5h2.5zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4z"/></svg>
                    <span>物流管理</span>
                </div>
                <div class="nav-item" data-page="statistics">
                    <svg fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/></svg>
                    <span>数据统计</span>
                </div>
                <div class="nav-item" data-page="reviews">
                    <svg fill="currentColor" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
                    <span>评价管理</span>
                    <span class="badge">3</span>
                </div>
            </nav>
            
            <div class="sidebar-footer">
                <div class="user-info">
                    <div class="user-avatar">李</div>
                    <div class="user-details">
                        <div class="user-name">李老板</div>
                        <div class="user-role">商家管理员</div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 右侧内容区 -->
        <main class="main-content">
            <!-- 顶部栏 -->
            <header class="header">
                <div class="header-left">
                    <h2 class="page-title" id="pageTitle">数据概览</h2>
                </div>
                <div class="header-right">
                    <span class="header-time" id="currentTime">2026-05-11 14:37</span>
                    <div class="header-icon">
                        <svg width="20" height="20" fill="#666" viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
                        <span class="dot"></span>
                    </div>
                    <div class="header-icon">
                        <svg width="20" height="20" fill="#666" viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
                    </div>
                </div>
            </header>

            <!-- 内容区域 -->
            <div class="content-area">
                <!-- 首页/数据概览 -->
                <div class="page active" id="page-dashboard">
                    <!-- 统计卡片 -->
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-icon green">
                                <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"/></svg>
                            </div>
                            <div class="stat-value">¥ 28,650</div>
                            <div class="stat-label">今日销售额</div>
                            <div class="stat-change up">↑ 12.5% 较昨日</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon blue">
                                <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                            </div>
                            <div class="stat-value">156</div>
                            <div class="stat-label">今日订单量</div>
                            <div class="stat-change up">↑ 8.3% 较昨日</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon orange">
                                <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
                            </div>
                            <div class="stat-value">2,845</div>
                            <div class="stat-label">今日访客数</div>
                            <div class="stat-change up">↑ 15.2% 较昨日</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon red">
                                <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                            </div>
                            <div class="stat-value">5</div>
                            <div class="stat-label">待处理订单</div>
                            <div class="stat-change down">↓ 需要处理</div>
                        </div>
                    </div>

                    <!-- 快捷操作 -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">快捷操作</h3>
                        </div>
                        <div class="quick-actions">
                            <div class="quick-action" onclick="switchPage('products'); openModal('addProductModal')">
                                <div class="quick-action-icon">📦</div>
                                <span class="quick-action-label">发布商品</span>
                            </div>
                            <div class="quick-action" onclick="switchPage('orders')">
                                <div class="quick-action-icon">📋</div>
                                <span class="quick-action-label">处理订单</span>
                            </div>
                            <div class="quick-action" onclick="switchPage('marketing')">
                                <div class="quick-action-icon">🎫</div>
                                <span class="quick-action-label">创建活动</span>
                            </div>
                            <div class="quick-action" onclick="switchPage('logistics')">
                                <div class="quick-action-icon">🚚</div>
                                <span class="quick-action-label">物流打印</span>
                            </div>
                        </div>
                    </div>

                    <!-- 待处理事项 -->
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">待处理事项</h3>
                        </div>
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>类型</th>
                                        <th>订单编号</th>
                                        <th>内容</th>
                                        <th>时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><span class="status-tag pending">待发货</span></td>
                                        <td>DD20260511001</td>
                                        <td>用户「张三」购买了 龙井茶特级 1件</td>
                                        <td>2026-05-11 14:20</td>
                                        <td><button class="btn btn-primary btn-sm" onclick="switchPage('orders'); openModal('shipModal')">立即发货</button></td>
                                    </tr>
                                    <tr>
                                        <td><span class="status-tag refund">退款</span></td>
                                        <td>DD20260510056</td>
                                        <td>用户「李四」申请退款 铁观音 2件</td>
                                        <td>2026-05-11 13:45</td>
                                        <td><button class="btn btn-primary btn-sm" onclick="switchPage('orders'); openModal('refundModal')">处理退款</button></td>
                                    </tr>
                                    <tr>
                                        <td><span class="status-tag pending">待回复</span></td>
                                        <td>评价-20260511</td>
                                        <td>用户「王五」发表了商品评价</td>
                                        <td>2026-05-11 12:30</td>
                                        <td><button class="btn btn-primary btn-sm" onclick="switchPage('reviews')">立即回复</button></td>
                                    </tr>
                                    <tr>
                                        <td><span class="status-tag pending">待发货</span></td>
                                        <td>DD20260511002</td>
                                        <td>用户「赵六」购买了 碧螺春 3件</td>
                                        <td>2026-05-11 11:15</td>
                                        <td><button class="btn btn-primary btn-sm" onclick="switchPage('orders'); openModal('shipModal')">立即发货</button></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 商品管理 -->
                <div class="page" id="page-products">
                    <div class="search-bar">
                        <input type="text" class="search-input" placeholder="搜索商品名称">
                        <select class="filter-select">
                            <option>全部状态</option>
                            <option>在售</option>
                            <option>已下架</option>
                        </select>
                        <select class="filter-select">
                            <option>全部分类</option>
                            <option>绿茶</option>
                            <option>红茶</option>
                            <option>普洱</option>
                        </select>
                        <button class="btn btn-primary" onclick="openModal('addProductModal')">
                            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                            新增商品
                        </button>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">商品列表</h3>
                            <span style="color: #999; font-size: 14px;">共 48 件商品</span>
                        </div>
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>商品</th>
                                        <th>分类</th>
                                        <th>价格</th>
                                        <th>库存</th>
                                        <th>销量</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td style="display: flex; align-items: center; gap: 12px;">
                                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='%23e8f5e9'%3E%3Crect width='50' height='50' rx='6'/%3E%3Ctext x='25' y='30' text-anchor='middle' font-size='20'%3E🍵%3C/text%3E%3C/svg%3E" class="product-image">
                                            <div>
                                                <div style="font-weight: 500;">龙井茶特级</div>
                                                <div style="font-size: 12px; color: #999;">编号: P001</div>
                                            </div>
                                        </td>
                                        <td>绿茶</td>
                                        <td>¥ 288.00</td>
                                        <td>520</td>
                                        <td>1,256</td>
                                        <td><span class="status-tag on-sale">在售</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm" onclick="openModal('editProductModal')">编辑</button>
                                            <button class="btn btn-outline btn-sm" onclick="showToast('商品已下架', 'success')">下架</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="display: flex; align-items: center; gap: 12px;">
                                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='%23ffebee'%3E%3Crect width='50' height='50' rx='6'/%3E%3Ctext x='25' y='30' text-anchor='middle' font-size='20'%3E🍂%3C/text%3E%3C/svg%3E" class="product-image">
                                            <div>
                                                <div style="font-weight: 500;">铁观音</div>
                                                <div style="font-size: 12px; color: #999;">编号: P002</div>
                                            </div>
                                        </td>
                                        <td>乌龙茶</td>
                                        <td>¥ 168.00</td>
                                        <td>380</td>
                                        <td>892</td>
                                        <td><span class="status-tag on-sale">在售</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm" onclick="openModal('editProductModal')">编辑</button>
                                            <button class="btn btn-outline btn-sm" onclick="showToast('商品已下架', 'success')">下架</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="display: flex; align-items: center; gap: 12px;">
                                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='%23e3f2fd'%3E%3Crect width='50' height='50' rx='6'/%3E%3Ctext x='25' y='30' text-anchor='middle' font-size='20'%3E🫖%3C/text%3E%3C/svg%3E" class="product-image">
                                            <div>
                                                <div style="font-weight: 500;">碧螺春</div>
                                                <div style="font-size: 12px; color: #999;">编号: P003</div>
                                            </div>
                                        </td>
                                        <td>绿茶</td>
                                        <td>¥ 128.00</td>
                                        <td>200</td>
                                        <td>568</td>
                                        <td><span class="status-tag on-sale">在售</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm" onclick="openModal('editProductModal')">编辑</button>
                                            <button class="btn btn-outline btn-sm" onclick="showToast('商品已下架', 'success')">下架</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="display: flex; align-items: center; gap: 12px;">
                                            <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' fill='%23fce4ec'%3E%3Crect width='50' height='50' rx='6'/%3E%3Ctext x='25' y='30' text-anchor='middle' font-size='20'%3E🧋%3C/text%3E%3C/svg%3E" class="product-image">
                                            <div>
                                                <div style="font-weight: 500;">普洱熟茶</div>
                                                <div style="font-size: 12px; color: #999;">编号: P004</div>
                                            </div>
                                        </td>
                                        <td>普洱</td>
                                        <td>¥ 358.00</td>
                                        <td>45</td>
                                        <td>234</td>
                                        <td><span class="status-tag off-sale">已下架</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm" onclick="openModal('editProductModal')">编辑</button>
                                            <button class="btn btn-outline btn-sm" onclick="showToast('商品已上架', 'success')">上架</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="pagination">
                            <div class="pagination-info">显示 1-4 条，共 48 条</div>
                            <div class="pagination-buttons">
                                <div class="pagination-btn">«</div>
                                <div class="pagination-btn">‹</div>
                                <div class="pagination-btn active">1</div>
                                <div class="pagination-btn">2</div>
                                <div class="pagination-btn">3</div>
                                <div class="pagination-btn">…</div>
                                <div class="pagination-btn">12</div>
                                <div class="pagination-btn">›</div>
                                <div class="pagination-btn">»</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 订单管理 -->
                <div class="page" id="page-orders">
                    <div class="tabs">
                        <div class="tab active" data-tab="all">全部订单</div>
                        <div class="tab" data-tab="pending">待发货 <span style="color: #e53935;">(5)</span></div>
                        <div class="tab" data-tab="shipped">已发货</div>
                        <div class="tab" data-tab="completed">已完成</div>
                        <div class="tab" data-tab="refund">退款/售后 <span style="color: #e53935;">(2)</span></div>
                    </div>

                    <div class="search-bar">
                        <input type="text" class="search-input" placeholder="搜索订单编号/用户">
                        <select class="filter-select">
                            <option>全部时间</option>
                            <option>今天</option>
                            <option>近7天</option>
                            <option>近30天</option>
                        </select>
                        <button class="btn btn-outline">导出订单</button>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">订单列表</h3>
                            <span style="color: #999; font-size: 14px;">共 156 笔订单</span>
                        </div>
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>订单编号</th>
                                        <th>用户</th>
                                        <th>商品</th>
                                        <th>金额</th>
                                        <th>状态</th>
                                        <th>下单时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>DD20260511001</td>
                                        <td>张三</td>
                                        <td>龙井茶特级 x1</td>
                                        <td>¥ 288.00</td>
                                        <td><span class="status-tag pending">待发货</span></td>
                                        <td>2026-05-11 14:20</td>
                                        <td>
                                            <button class="btn btn-primary btn-sm" onclick="openModal('shipModal')">发货</button>
                                            <button class="btn btn-outline btn-sm">详情</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>DD20260511002</td>
                                        <td>赵六</td>
                                        <td>碧螺春 x3</td>
                                        <td>¥ 384.00</td>
                                        <td><span class="status-tag pending">待发货</span></td>
                                        <td>2026-05-11 11:15</td>
                                        <td>
                                            <button class="btn btn-primary btn-sm" onclick="openModal('shipModal')">发货</button>
                                            <button class="btn btn-outline btn-sm">详情</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>DD20260510056</td>
                                        <td>李四</td>
                                        <td>铁观音 x2</td>
                                        <td>¥ 336.00</td>
                                        <td><span class="status-tag refund">退款中</span></td>
                                        <td>2026-05-10 16:30</td>
                                        <td>
                                            <button class="btn btn-primary btn-sm" onclick="openModal('refundModal')">处理</button>
                                            <button class="btn btn-outline btn-sm">详情</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>DD20260510055</td>
                                        <td>王五</td>
                                        <td>龙井茶特级 x2, 碧螺春 x1</td>
                                        <td>¥ 704.00</td>
                                        <td><span class="status-tag shipped">已发货</span></td>
                                        <td>2026-05-10 09:45</td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">查看物流</button>
                                            <button class="btn btn-outline btn-sm">详情</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>DD20260509088</td>
                                        <td>钱七</td>
                                        <td>普洱熟茶 x1</td>
                                        <td>¥ 358.00</td>
                                        <td><span class="status-tag completed">已完成</span></td>
                                        <td>2026-05-09 18:20</td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">详情</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="pagination">
                            <div class="pagination-info">显示 1-5 条，共 156 条</div>
                            <div class="pagination-buttons">
                                <div class="pagination-btn">«</div>
                                <div class="pagination-btn">‹</div>
                                <div class="pagination-btn active">1</div>
                                <div class="pagination-btn">2</div>
                                <div class="pagination-btn">3</div>
                                <div class="pagination-btn">›</div>
                                <div class="pagination-btn">»</div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 营销管理 -->
                <div class="page" id="page-marketing">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">营销活动</h3>
                            <button class="btn btn-primary" onclick="openModal('createActivityModal')">
                                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                                创建活动
                            </button>
                        </div>
                        <div class="activity-grid">
                            <div class="activity-card">
                                <div class="activity-icon">🎫</div>
                                <div class="activity-title">优惠券管理</div>
                                <div class="activity-desc">创建优惠券发放给用户，提高复购率</div>
                                <div style="margin-top: 12px;">
                                    <span class="status-tag on-sale">进行中 3个</span>
                                </div>
                            </div>
                            <div class="activity-card">
                                <div class="activity-icon">⏰</div>
                                <div class="activity-title">秒杀活动</div>
                                <div class="activity-desc">限时特价抢购，引流促销利器</div>
                                <div style="margin-top: 12px;">
                                    <span class="status-tag off-sale">未开始</span>
                                </div>
                            </div>
                            <div class="activity-card">
                                <div class="activity-icon">👥</div>
                                <div class="activity-title">拼团活动</div>
                                <div class="activity-desc">邀请好友一起购买，享受团购价</div>
                                <div style="margin-top: 12px;">
                                    <span class="status-tag on-sale">进行中 1个</span>
                                </div>
                            </div>
                            <div class="activity-card">
                                <div class="activity-icon">🏷️</div>
                                <div class="activity-title">满减活动</div>
                                <div class="activity-desc">设置满减门槛，提升客单价</div>
                                <div style="margin-top: 12px;">
                                    <span class="status-tag on-sale">进行中 2个</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">活动列表</h3>
                        </div>
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th>活动名称</th>
                                        <th>类型</th>
                                        <th>时间</th>
                                        <th>参与人数</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>新人专享优惠券</td>
                                        <td>优惠券</td>
                                        <td>长期有效</td>
                                        <td>1,256 人已领取</td>
                                        <td><span class="status-tag on-sale">进行中</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">编辑</button>
                                            <button class="btn btn-outline btn-sm">暂停</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>周末限时秒杀</td>
                                        <td>秒杀</td>
                                        <td>2026-05-15 10:00</td>
                                        <td>报名中 328 人</td>
                                        <td><span class="status-tag pending">即将开始</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">编辑</button>
                                            <button class="btn btn-outline btn-sm">取消</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>龙井茶拼团</td>
                                        <td>拼团</td>
                                        <td>2026-05-01 至 2026-05-31</td>
                                        <td>已拼成 56 团</td>
                                        <td><span class="status-tag on-sale">进行中</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">查看详情</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>满200减30</td>
                                        <td>满减</td>
                                        <td>2026-05-01 至 2026-05-31</td>
                                        <td>已使用 892 笔</td>
                                        <td><span class="status-tag on-sale">进行中</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm">编辑</button>
                                            <button class="btn btn-outline btn-sm">暂停</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- 物流管理 -->
                <div class="page" id="page-logistics">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">物流设置</h3>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">发货人姓名</label>
                                <input type="text" class="form-input" value="李老板">
                            </div>
                            <div class="form-group">
                                <label class="form-label">联系电话</label>
                                <input type="text" class="form-input" value="13800138000">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">发货地址</label>
                            <input type="text" class="form-input" value="浙江省杭州市西湖区龙井路88号">
                        </div>
<div style="margin-top: 20px;">
                            <h4 style="margin-bottom: 16px;">已对接物流公司</h4>
                            <div class="logistics-item">
                                <input type="checkbox" checked>
                                <span style="flex: 1;">顺丰速运</span>
                                <span style="color: #4caf50;">已启用</span>
                            </div>
                            <div class="logistics-item">
                                <input type="checkbox" checked>
                                <span style="flex: 1;">中通快递</span>
                                <span style="color: #4caf50;">已启用</span>
                            </div>
                            <div class="logistics-item">
                                <input type="checkbox" checked>
                                <span style="flex: 1;">圆通速递</span>
                                <span style="color: #4caf50;">已启用</span>
                            </div>
                            <div class="logistics-item">
                                <input type="checkbox">
                                <span style="flex: 1;">韵达快递</span>
                                <span style="color: #999;">未启用</span>
                            </div>
                            <div class="logistics-item">
                                <input type="checkbox">
                                <span style="flex: 1;">京东物流</span>
                                <span style="color: #999;">未启用</span>
                            </div>
                        </div>
                        <div style="margin-top: 20px;">
                            <button class="btn btn-primary">保存设置</button>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
<h3 class="card-title">物流打印</h3>
                        </div>
                        <p style="color: #666; margin-bottom: 20px;">选择需要打印发货的订单</p>
                        <div class="table-container">
                            <table>
                                <thead>
                                    <tr>
                                        <th><input type="checkbox"></th>
                                        <th>订单编号</th>
                                        <th>收件人</th>
                                        <th>联系方式</th>
                                        <th>收货地址</th>
                                        <th>物流公司</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td>DD20260511001</td>
                                        <td>张三</td>
                                        <td>139****1234</td>
                                        <td>北京市朝阳区建国路88号</td>
                                        <td>
                                            <select class="form-select" style="width: 120px; padding: 6px;">
                                                <option>顺丰速运</option>
                                                <option>中通快递</option>
                                                <option>圆通速递</option>
                                            </select>
                                        </td>
                                        <td>
                                            <button class="btn btn-primary btn-sm">打印</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><input type="checkbox"></td>
                                        <td>DD20260511002</td>
                                        <td>赵六</td>
                                        <td>158****5678</td>
                                        <td>上海市浦东新区世纪大道100号</td>
                                        <td>
                                            <select class="form-select" style="width: 120px; padding: 6px;">
                                                <option>顺丰速运</option>
                                                <option selected>中通快递</option>
                                                <option>圆通速递</option>
                                            </select>
                                        </td>
                                        <td>
                                            <button class="btn btn-primary btn-sm">打印</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div style="margin-top: 20px; display: flex; justify-content: space-between; align-items: center;">
                            <div>
                                <button class="btn btn-outline">批量打印</button>
                            </div>
                            <div style="color: #999; font-size: 14px;">勾选多条订单可批量打印电子面单</div>
                        </div>
                    </div>
                </div>

                <!-- 数据统计 -->
                <div class="page" id="page-statistics">
                    <div class="stats-grid">
                        <div class="stat-card">
                            <div class="stat-icon green">
                                <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"/></svg>
                            </div>
                            <div class="stat-value">¥ 286,500</div>
                            <div class="stat-label">本月销售额</div>
                            <div class="stat-change up">↑ 18.5% 较上月</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon blue">
                                <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
                            </div>
                            <div class="stat-value">1,568</div>
                            <div class="stat-label">本月订单量</div>
                            <div class="stat-change up">↑ 12.3% 较上月</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon orange">
                                <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>
                            </div>
                            <div class="stat-value">28,450</div>
                            <div class="stat-label">本月访客数</div>
                            <div class="stat-change up">↑ 25.8% 较上月</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon green">
                                <svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
                            </div>
                            <div class="stat-value">68.5%</div>
                            <div class="stat-label">订单转化率</div>
                            <div class="stat-change up">↑ 3.2% 较上月</div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">销售趋势</h3>
                            <select class="form-select" style="width: 150px;">
                                <option>近7天</option>
                                <option>近30天</option>
                                <option>近90天</option>
                            </select>
                        </div>
                        <div class="chart-container">
                            <div style="text-align: center;">
                                <div style="font-size: 48px; margin-bottom: 10px;">📈</div>
                                <div>销售趋势图表区域</div>
                                <div style="font-size: 13px; color: #999; margin-top: 5px;">折线图展示每日销售额变化</div>
                            </div>
                        </div>
                    </div>

                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">热销商品 TOP 5</h3>
                            </div>
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>排名</th>
                                            <th>商品</th>
                                            <th>销量</th>
                                            <th>销售额</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><span style="background: #ffd700; color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: bold;">1</span></td>
                                            <td>龙井茶特级</td>
                                            <td>1,256 件</td>
                                            <td>¥ 361,728</td>
                                        </tr>
                                        <tr>
                                            <td><span style="background: #c0c0c0; color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: bold;">2</span></td>
                                            <td>铁观音</td>
                                            <td>892 件</td>
                                            <td>¥ 149,856</td>
                                        </tr>
                                        <tr>
                                            <td><span style="background: #cd7f32; color: #fff; padding: 2px 8px; border-radius: 4px; font-weight: bold;">3</span></td>
                                            <td>碧螺春</td>
                                            <td>568 件</td>
                                            <td>¥ 72,704</td>
                                        </tr>
                                        <tr>
                                            <td>4</td>
                                            <td>大红袍</td>
                                            <td>345 件</td>
                                            <td>¥ 51,750</td>
                                        </tr>
                                        <tr>
                                            <td>5</td>
                                            <td>普洱生茶</td>
                                            <td>298 件</td>
                                            <td>¥ 41,720</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">滞销商品预警</h3>
                            </div>
                            <div class="table-container">
                                <table>
                                    <thead>
                                        <tr>
                                            <th>商品</th>
                                            <th>库存</th>
                                            <th>30天销量</th>
                                            <th>建议</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>茉莉花茶</td>
                                            <td style="color: #e53935;">156 件</td>
                                            <td>12 件</td>
                                            <td><button class="btn btn-outline btn-sm">促销</button></td>
                                        </tr>
                                        <tr>
                                            <td>陈皮普洱</td>
                                            <td style="color: #e53935;">89 件</td>
                                            <td>8 件</td>
                                            <td><button class="btn btn-outline btn-sm">促销</button></td>
                                        </tr>
                                        <tr>
                                            <td>白毫银针</td>
                                            <td style="color: #ffa726;">45 件</td>
                                            <td>15 件</td>
                                            <td><button class="btn btn-outline btn-sm">推广</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 评价管理 -->
                <div class="page" id="page-reviews">
                    <div class="tabs">
                        <div class="tab active">全部评价</div>
                        <div class="tab">待回复 <span style="color: #e53935;">(3)</span></div>
                        <div class="tab">已回复</div>
                    </div>

                    <div class="search-bar">
                        <input type="text" class="search-input" placeholder="搜索商品/用户">
                        <select class="filter-select">
                            <option>全部评分</option>
                            <option>5星</option>
                            <option>4星</option>
                            <option>3星</option>
                            <option>2星</option>
                            <option>1星</option>
                        </select>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">用户评价</h3>
                            <span style="color: #999; font-size: 14px;">共 892 条评价，平均评分 4.8 星</span>
                        </div>
                        
                        <div class="review-item">
                            <div class="review-avatar">张</div>
                            <div class="review-content">
                                <div class="review-header">
                                    <span class="review-user">张三 <span style="color: #ffd700;">★★★★★</span></span>
                                    <span class="review-time">2026-05-11 14:30</span>
                                </div>
                                <div class="review-text">茶叶品质非常好，包装精美，送礼很有面子。客服态度也很好，有问必答，下次还会回购！</div>
                                <div class="review-product">购买的商品：龙井茶特级</div>
                                <div class="review-images">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect fill='%23e8f5e9' width='60' height='60'/%3E%3Ctext x='30' y='35' text-anchor='middle'%3E📷%3C/text%3E%3C/svg%3E">
                                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect fill='%23e8f5e9' width='60' height='60'/%3E%3Ctext x='30' y='35' text-anchor='middle'%3E📷%3C/text%3E%3C/svg%3E">
                                </div>
                                <div style="color: #666; font-size: 13px;">商家回复：感谢您的认可，我们会继续努力为您提供更好的产品和服务！</div>
                            </div>
                        </div>

                        <div class="review-item">
                            <div class="review-avatar">李</div>
                            <div class="review-content">
                                <div class="review-header">
                                    <span class="review-user">李四 <span style="color: #ffd700;">★★★★</span></span>
                                    <span class="review-time">2026-05-11 12:15</span>
                                </div>
                                <div class="review-text">茶叶味道不错，就是物流稍微慢了点，希望改进。</div>
                                <div class="review-product">购买的商品：铁观音</div>
                                <div class="reply-box">
                                    <input type="text" placeholder="回复用户评价...">
                                    <button class="btn btn-primary btn-sm">回复</button>
                                </div>
                            </div>
                        </div>

                        <div class="review-item">
                            <div class="review-avatar">王</div>
                            <div class="review-content">
                                <div class="review-header">
                                    <span class="review-user">王五 <span style="color: #ffd700;">★★★★★</span></span>
                                    <span class="review-time">2026-05-11 10:00</span>
                                </div>
                                <div class="review-text">第一次买这家店，真的很惊喜！茶叶很新鲜，香气扑鼻，价格也很实惠。</div>
                                <div class="review-product">购买的商品：碧螺春</div>
                                <div class="reply-box">
                                    <input type="text" placeholder="回复用户评价...">
                                    <button class="btn btn-primary btn-sm">回复</button>
                                </div>
                            </div>
                        </div>

                        <div class="pagination">
                            <div class="pagination-info">显示 1-3 条，共 892 条</div>
                            <div class="pagination-buttons">
                                <div class="pagination-btn">«</div>
                                <div class="pagination-btn">‹</div>
                                <div class="pagination-btn active">1</div>
                                <div class="pagination-btn">2</div>
                                <div class="pagination-btn">3</div>
                                <div class="pagination-btn">›</div>
                                <div class="pagination-btn">»</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 新增商品弹窗 -->
    <div class="modal-overlay" id="addProductModal">
        <div class="modal">
            <div class="modal-header">
                <h3 class="modal-title">新增商品</h3>
                <button class="modal-close" onclick="closeModal('addProductModal')">×</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label class="form-label">商品图片</label>
                    <div class="product-images">
                        <div class="add-img">+</div>
                    </div>
                </div>
                <div class="form-group" style="margin-top: 16px;">
                    <label class="form-label">商品名称 *</label>
                    <input type="text" class="form-input" placeholder="请输入商品名称">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">商品分类</label>
                        <select class="form-select">
                            <option>请选择分类</option>
                            <option>绿茶</option>
                            <option>红茶</option>
                            <option>乌龙茶</option>
                            <option>普洱</option>
                            <option>白茶</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">商品规格</label>
                        <select class="form-select">
                            <option>散装</option>
                            <option>礼盒装</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">商品价格(元) *</label>
                        <input type="number" class="form-input" placeholder="请输入价格">
                    </div>
                    <div class="form-group">
                        <label class="form-label">商品库存 *</label>
                        <input type="number" class="form-input" placeholder="请输入库存">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">商品描述</label>
                    <textarea class="form-input" placeholder="请输入商品描述">
编辑页面

编辑商品

订单发货

选择物流公司

退款处理

退款原因

创建营销活动
