编辑页面

页面标题

有效期修改后将从当前时间重新计算过期时间

CSS文件（可选）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #ff6a00;
  --primary-hover: #e55d00;
  --primary-light: #fff4ed;
  --bg: #f5f6fa;
  --sidebar-bg: #1e1e2d;
  --sidebar-hover: #2a2a3d;
  --sidebar-active: #ff6a00;
  --card-bg: #fff;
  --text: #333;
  --text-secondary: #888;
  --border: #e8e8e8;
  --success: #52c41a;
  --warning: #faad14;
  --danger: #ff4d4f;
  --info: #1890ff;
  --radius: 8px;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* Login Page */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
  background: #fff;
  border-radius: 12px;
  padding: 48px 40px;
  width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.login-box h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 8px;
  color: var(--text);
}

.login-box .subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 32px;
  font-size: 14px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text);
  font-size: 13px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,106,0,0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  gap: 6px;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-full {
  width: 100%;
}

.btn-outline {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-success {
  background: var(--success);
  color: #fff;
}

.btn-info {
  background: var(--info);
  color: #fff;
}

/* Layout */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 220px;
  background: var(--sidebar-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 20px;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo .logo-icon {
  width: 36px;
  height: 36px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
}

.nav-group-title {
  padding: 16px 20px 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s;
  gap: 10px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: #fff;
}

.nav-item.active {
  background: rgba(255,106,0,0.15);
  color: var(--primary);
  border-left-color: var(--primary);
}

.nav-item .icon {
  width: 20px;
  text-align: center;
  font-size: 15px;
}

/* Main Content */
.main-content {
  flex: 1;
  margin-left: 220px;
  display: flex;
  flex-direction: column;
}

/* Header */
.top-header {
  background: #fff;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-left h2 {
  font-size: 16px;
  font-weight: 600;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.breadcrumb span.current {
  color: var(--text);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-right .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.notification-badge {
  position: relative;
  cursor: pointer;
  font-size: 18px;
}

.notification-badge .badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Page Content */
.page-content {
  padding: 24px;
  flex: 1;
}

/* Cards */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 {
  font-size: 15px;
  font-weight: 600;
}

.card-body {
  padding: 20px;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.stat-card .label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.stat-card .value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}

.stat-card .change {
  font-size: 12px;
  margin-top: 4px;
}

.stat-card .change.up {
  color: var(--success);
}

.stat-card .change.down {
  color: var(--danger);
}

/* Tables */
.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  white-space: nowrap;
}

table th {
  background: #fafafa;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

table tr:hover td {
  background: #fafafa;
}

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.tag-success {
  background: #f6ffed;
  color: var(--success);
  border: 1px solid #b7eb8f;
}

.tag-warning {
  background: #fffbe6;
  color: #d48806;
  border: 1px solid #ffe58f;
}

.tag-danger {
  background: #fff2f0;
  color: var(--danger);
  border: 1px solid #ffccc7;
}

.tag-info {
  background: #e6f7ff;
  color: var(--info);
  border: 1px solid #91d5ff;
}

.tag-default {
  background: #f5f5f5;
  color: #999;
  border: 1px solid #d9d9d9;
}

/* Tabs */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.tab-item:hover {
  color: var(--primary);
}

.tab-item.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 500;
}

/* Filter Bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-bar input,
.filter-bar select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}

.filter-bar input:focus,
.filter-bar select:focus {
  border-color: var(--primary);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.pagination .info {
  font-size: 13px;
  color: var(--text-secondary);
}

.pagination .pages {
  display: flex;
  gap: 4px;
}

.pagination .page-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  background: #fff;
  transition: all 0.2s;
}

.pagination .page-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pagination .page-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Modal */
.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.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: #fff;
  border-radius: 12px;
  width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform 0.3s;
}

.modal-overlay.show .modal {
  transform: translateY(0);
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 16px;
}

.modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  font-size: 18px;
  color: var(--text-secondary);
}

.modal-close:hover {
  background: #f5f5f5;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Progress Steps */
.steps {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.step .step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8e8e8;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.step.active .step-num {
  background: var(--primary);
  color: #fff;
}

.step.done .step-num {
  background: var(--success);
  color: #fff;
}

.step .step-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.step.active .step-label {
  color: var(--primary);
  font-weight: 500;
}

.step.done .step-label {
  color: var(--success);
}

.step-line {
  flex: 1;
  height: 2px;
  background: #e8e8e8;
  margin: 0 8px;
}

.step.done + .step-line {
  background: var(--success);
}

/* Upload Area */
.upload-area {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-area:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.upload-area .upload-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.upload-area .upload-text {
  color: var(--text-secondary);
  font-size: 13px;
}

/* Grid layouts */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Product Card */
.product-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.product-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.product-card .product-img {
  height: 160px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.product-card .product-info {
  padding: 12px;
}

.product-card .product-name {
  font-size: 13px;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .product-price {
  color: var(--primary);
  font-size: 16px;
  font-weight: 600;
}

.product-card .product-stock {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Charts placeholder */
.chart-placeholder {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

/* Simple bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 200px;
  padding: 20px 0;
}

.bar-chart .bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bar-chart .bar {
  width: 100%;
  background: var(--primary);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.5s;
}

.bar-chart .bar-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.bar-chart .bar-value {
  font-size: 11px;
  font-weight: 600;
}

/* Coupon card */
.coupon-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}

.coupon-amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  min-width: 80px;
  text-align: center;
}

.coupon-amount small {
  font-size: 14px;
}

.coupon-info {
  flex: 1;
}

.coupon-info .coupon-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.coupon-info .coupon-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.coupon-status {
  text-align: right;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  min-width: 160px;
  padding: 6px 0;
  z-index: 200;
  display: none;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

/* Switch toggle */
.switch {
  position: relative;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

.switch input {
  display: none;
}

.switch .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  border-radius: 22px;
  transition: 0.3s;
}

.switch .slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.switch input:checked + .slider {
  background: var(--primary);
}

.switch input:checked + .slider::before {
  transform: translateX(18px);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Tab panels */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Hidden utility */
.hidden {
  display: none !important;
}

/* Page sections */
.page-section {
  display: none;
}

.page-section.active {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

/* Responsive */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* SKU table */
.sku-table {
  width: 100%;
  margin-top: 12px;
}

.sku-table th,
.sku-table td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  font-size: 13px;
}

.sku-table input {
  width: 100%;
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
}

/* Spec tags */
.spec-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #f5f5f5;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 4px;
  font-size: 13px;
  cursor: pointer;
}

.spec-tag:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.spec-tag.selected {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* Score stars */
.stars {
  color: #faad14;
  font-size: 14px;
  letter-spacing: 2px;
}

/* Review card */
.review-card {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}

.review-card:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.review-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.review-content {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}

.review-reply {
  background: #f9f9f9;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.review-reply::before {
  content: '商家回复: ';
  color: var(--primary);
  font-weight: 500;
}

/* Money display */
.money {
  color: var(--primary);
  font-weight: 600;
}

/* Flex utilities */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.text-center { text-align: center; }
.text-secondary { color: var(--text-secondary); }
.text-sm { font-size: 12px; }
.fw-600 { font-weight: 600; }

/* Shop preview */
.shop-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.shop-banner {
  height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

.shop-info-bar {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.shop-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin-top: -32px;
  border: 3px solid #fff;
}

/* Timeline */
.timeline {
  padding: 0 0 0 20px;
  border-left: 2px solid var(--border);
}

.timeline-item {
  position: relative;
  padding: 0 0 24px 20px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
}

.timeline-item .time {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.timeline-item .content {
  font-size: 13px;
}

JS文件（可选）

const App = {
  currentPage: 'dashboard',
  currentTab: {},
  loadedPages: {},

  init() {
    this.bindLoginEvents();
    this.checkLogin();
  },

  checkLogin() {
    const loggedIn = sessionStorage.getItem('loggedIn');
    if (loggedIn) {
      document.getElementById('loginPage').classList.add('hidden');
      document.getElementById('appLayout').classList.remove('hidden');
      this.initApp();
    }
  },

  initApp() {
    this.bindNavEvents();
    this.bindModalEvents();
    this.bindTabEvents();
    this.bindFilterEvents();
    this.navigateTo('dashboard');
  },

  bindLoginEvents() {
    const loginBtn = document.getElementById('loginBtn');
    if (loginBtn) {
      loginBtn.addEventListener('click', () => {
        sessionStorage.setItem('loggedIn', 'true');
        document.getElementById('loginPage').classList.add('hidden');
        document.getElementById('appLayout').classList.remove('hidden');
        this.initApp();
      });
    }
  },

  bindNavEvents() {
    document.querySelectorAll('.nav-item[data-page]').forEach(item => {
      item.addEventListener('click', () => {
        this.navigateTo(item.dataset.page);
      });
    });
  },

  async navigateTo(page) {
    this.currentPage = page;

    document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
    const navItem = document.querySelector(`.nav-item[data-page="${page}"]`);
    if (navItem) navItem.classList.add('active');

    const titles = {
      dashboard: '数据概览',
      'entry-apply': '入驻申请',
      'shop-manage': '店铺管理',
      'product-manage': '商品管理',
      'order-manage': '订单管理',
      marketing: '营销工具',
      'data-board': '数据看板',
      finance: '财务结算',
      'review-manage': '评价管理'
    };

    document.getElementById('pageTitle').textContent = titles[page] || page;
    document.getElementById('breadcrumbCurrent').textContent = titles[page] || page;

    const container = document.getElementById('pageContent');

    if (this.loadedPages[page]) {
      container.innerHTML = this.loadedPages[page];
    } else {
      try {
        const response = await fetch(`pages/${page}.html`);
        if (response.ok) {
          const html = await response.text();
          this.loadedPages[page] = html;
          container.innerHTML = html;
        } else {
          container.innerHTML = `<div class="empty-state"><div class="empty-icon">🚧</div><p>页面加载失败</p></div>`;
        }
      } catch (e) {
        container.innerHTML = `<div class="empty-state"><div class="empty-icon">⚠️</div><p>网络错误，请刷新重试</p></div>`;
      }
    }

    const loadedSection = container.querySelector('.page-section');
    if (loadedSection) loadedSection.classList.add('active');

    this.rebindDynamicEvents();
    window.scrollTo(0, 0);
  },

  rebindDynamicEvents() {
    this.bindTabEvents();
    this.bindModalEvents();
    this.bindFilterEvents();
    this.bindSpecTags();
  },

  bindModalEvents() {
    document.querySelectorAll('[data-modal]').forEach(btn => {
      btn.onclick = () => {
        const modal = document.getElementById(btn.dataset.modal);
        if (modal) modal.classList.add('show');
      };
    });

    document.querySelectorAll('.modal-close').forEach(btn => {
      btn.onclick = () => {
        const overlay = btn.closest('.modal-overlay');
        if (overlay) overlay.classList.remove('show');
      };
    });

    document.querySelectorAll('.modal-overlay').forEach(overlay => {
      overlay.onclick = (e) => {
        if (e.target === overlay) overlay.classList.remove('show');
      };
    });
  },

  bindTabEvents() {
    document.querySelectorAll('.tabs').forEach(tabContainer => {
      const tabs = tabContainer.querySelectorAll('.tab-item');
      tabs.forEach(tab => {
        tab.onclick = () => {
          const group = tabContainer.dataset.group || 'default';
          tabs.forEach(t => t.classList.remove('active'));
          tab.classList.add('active');
          this.currentTab[group] = tab.dataset.tab;

          const parent = tabContainer.closest('.page-section') || tabContainer.closest('.card');
          if (parent) {
            parent.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
            const panel = parent.querySelector(`[data-panel="${tab.dataset.tab}"]`);
            if (panel) panel.classList.add('active');
          }
        };
      });
    });
  },

  bindFilterEvents() {
    document.querySelectorAll('.filter-bar select, .filter-bar input').forEach(el => {
      el.onchange = () => {
        this.showToast('筛选条件已更新', 'info');
      };
    });
  },

  bindSpecTags() {
    document.querySelectorAll('.spec-tag:not([style*="dashed"])').forEach(tag => {
      if (!tag.onclick) {
        tag.onclick = () => tag.classList.toggle('selected');
      }
    });
  },

  showToast(message, type = 'success') {
    const toast = document.createElement('div');
    toast.style.cssText = `
      position: fixed; top: 20px; right: 20px; z-index: 2000;
      padding: 12px 24px; border-radius: 8px; color: #fff;
      font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      animation: fadeIn 0.3s ease-out;
    `;
    const colors = { success: '#52c41a', warning: '#faad14', error: '#ff4d4f', info: '#1890ff' };
    toast.style.background = colors[type] || colors.success;
    toast.textContent = message;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
  },

  showConfirm(message, callback) {
    const overlay = document.createElement('div');
    overlay.className = 'modal-overlay show';
    overlay.innerHTML = `
      <div class="modal" style="width: 400px;">
        <div class="modal-header">
          <h3>确认操作</h3>
          <span class="modal-close" onclick="this.closest('.modal-overlay').remove()">×</span>
        </div>
        <div class="modal-body"><p>${message}</p></div>
        <div class="modal-footer">
          <button class="btn btn-outline" onclick="this.closest('.modal-overlay').remove()">取消</button>
          <button class="btn btn-primary confirm-ok">确认</button>
        </div>
      </div>
    `;
    document.body.appendChild(overlay);
    overlay.querySelector('.confirm-ok').onclick = () => {
      overlay.remove();
      if (callback) callback();
    };
    overlay.onclick = (e) => {
      if (e.target === overlay) overlay.remove();
    };
  }
};

document.addEventListener('DOMContentLoaded', () => App.init());

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: #ff6a00;
  --primary-hover: #e55d00;
  --primary-light: #fff4ed;
  --bg: #f5f6fa;
  --sidebar-bg: #1e1e2d;
  --sidebar-hover: #2a2a3d;
  --sidebar-active: #ff6a00;
  --card-bg: #fff;
  --text: #333;
  --text-secondary: #888;
  --border: #e8e8e8;
  --success: #52c41a;
  --warning: #faad14;
  --danger: #ff4d4f;
  --info: #1890ff;
  --radius: 8px;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* Login Page */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-box {
  background: #fff;
  border-radius: 12px;
  padding: 48px 40px;
  width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.login-box h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 8px;
  color: var(--text);
}

.login-box .subtitle {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 32px;
  font-size: 14px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--text);
  font-size: 13px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,106,0,0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  gap: 6px;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.btn-full {
  width: 100%;
}

.btn-outline {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-success {
  background: var(--success);
  color: #fff;
}

.btn-info {
  background: var(--info);
  color: #fff;
}

/* Layout */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 220px;
  background: var(--sidebar-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 20px;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-logo .logo-icon {
  width: 36px;
  height: 36px;
  background: var(--primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.sidebar-nav {
  flex: 1;
  padding: 12px 0;
}

.nav-group-title {
  padding: 16px 20px 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.2s;
  gap: 10px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  background: var(--sidebar-hover);
  color: #fff;
}

.nav-item.active {
  background: rgba(255,106,0,0.15);
  color: var(--primary);
  border-left-color: var(--primary);
}

.nav-item .icon {
  width: 20px;
  text-align: center;
  font-size: 15px;
}

/* Main Content */
.main-content {
  flex: 1;
  margin-left: 220px;
  display: flex;
  flex-direction: column;
}

/* Header */
.top-header {
  background: #fff;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-left h2 {
  font-size: 16px;
  font-weight: 600;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.breadcrumb span.current {
  color: var(--text);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-right .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
}

.notification-badge {
  position: relative;
  cursor: pointer;
  font-size: 18px;
}

.notification-badge .badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Page Content */
.page-content {
  padding: 24px;
  flex: 1;
}

/* Cards */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-header h3 {
  font-size: 15px;
  font-weight: 600;
}

.card-body {
  padding: 20px;
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.stat-card .label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.stat-card .value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}

.stat-card .change {
  font-size: 12px;
  margin-top: 4px;
}

.stat-card .change.up {
  color: var(--success);
}

.stat-card .change.down {
  color: var(--danger);
}

/* Tables */
.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th,
table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  white-space: nowrap;
}

table th {
  background: #fafafa;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

table tr:hover td {
  background: #fafafa;
}

/* Tags */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.tag-success {
  background: #f6ffed;
  color: var(--success);
  border: 1px solid #b7eb8f;
}

.tag-warning {
  background: #fffbe6;
  color: #d48806;
  border: 1px solid #ffe58f;
}

.tag-danger {
  background: #fff2f0;
  color: var(--danger);
  border: 1px solid #ffccc7;
}

.tag-info {
  background: #e6f7ff;
  color: var(--info);
  border: 1px solid #91d5ff;
}

.tag-default {
  background: #f5f5f5;
  color: #999;
  border: 1px solid #d9d9d9;
}

/* Tabs */
.tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.tab-item:hover {
  color: var(--primary);
}

.tab-item.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 500;
}

/* Filter Bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-bar input,
.filter-bar select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
}

.filter-bar input:focus,
.filter-bar select:focus {
  border-color: var(--primary);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.pagination .info {
  font-size: 13px;
  color: var(--text-secondary);
}

.pagination .pages {
  display: flex;
  gap: 4px;
}

.pagination .page-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  background: #fff;
  transition: all 0.2s;
}

.pagination .page-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.pagination .page-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Modal */
.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.show {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: #fff;
  border-radius: 12px;
  width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform 0.3s;
}

.modal-overlay.show .modal {
  transform: translateY(0);
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-header h3 {
  font-size: 16px;
}

.modal-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  font-size: 18px;
  color: var(--text-secondary);
}

.modal-close:hover {
  background: #f5f5f5;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Progress Steps */
.steps {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.step .step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8e8e8;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.step.active .step-num {
  background: var(--primary);
  color: #fff;
}

.step.done .step-num {
  background: var(--success);
  color: #fff;
}

.step .step-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.step.active .step-label {
  color: var(--primary);
  font-weight: 500;
}

.step.done .step-label {
  color: var(--success);
}

.step-line {
  flex: 1;
  height: 2px;
  background: #e8e8e8;
  margin: 0 8px;
}

.step.done + .step-line {
  background: var(--success);
}

/* Upload Area */
.upload-area {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.upload-area:hover {
  border-color: var(--primary);
  background: var(--primary-light);
}

.upload-area .upload-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.upload-area .upload-text {
  color: var(--text-secondary);
  font-size: 13px;
}

/* Grid layouts */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Product Card */
.product-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.product-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.product-card .product-img {
  height: 160px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.product-card .product-info {
  padding: 12px;
}

.product-card .product-name {
  font-size: 13px;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-card .product-price {
  color: var(--primary);
  font-size: 16px;
  font-weight: 600;
}

.product-card .product-stock {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Charts placeholder */
.chart-placeholder {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 8px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

/* Simple bar chart */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 200px;
  padding: 20px 0;
}

.bar-chart .bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bar-chart .bar {
  width: 100%;
  background: var(--primary);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.5s;
}

.bar-chart .bar-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.bar-chart .bar-value {
  font-size: 11px;
  font-weight: 600;
}

/* Coupon card */
.coupon-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}

.coupon-amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  min-width: 80px;
  text-align: center;
}

.coupon-amount small {
  font-size: 14px;
}

.coupon-info {
  flex: 1;
}

.coupon-info .coupon-name {
  font-weight: 600;
  margin-bottom: 4px;
}

.coupon-info .coupon-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.coupon-status {
  text-align: right;
}

/* Dropdown */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  min-width: 160px;
  padding: 6px 0;
  z-index: 200;
  display: none;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-item {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.empty-state .empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

/* Switch toggle */
.switch {
  position: relative;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

.switch input {
  display: none;
}

.switch .slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  border-radius: 22px;
  transition: 0.3s;
}

.switch .slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}

.switch input:checked + .slider {
  background: var(--primary);
}

.switch input:checked + .slider::before {
  transform: translateX(18px);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Tab panels */
.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Hidden utility */
.hidden {
  display: none !important;
}

/* Page sections */
.page-section {
  display: none;
}

.page-section.active {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

/* Responsive */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* SKU table */
.sku-table {
  width: 100%;
  margin-top: 12px;
}

.sku-table th,
.sku-table td {
  padding: 8px 12px;
  border: 1px solid var(--border);
  font-size: 13px;
}

.sku-table input {
  width: 100%;
  border: 1px solid var(--border);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 13px;
}

/* Spec tags */
.spec-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #f5f5f5;
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 4px;
  font-size: 13px;
  cursor: pointer;
}

.spec-tag:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.spec-tag.selected {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary);
}

/* Score stars */
.stars {
  color: #faad14;
  font-size: 14px;
  letter-spacing: 2px;
}

/* Review card */
.review-card {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}

.review-card:last-child {
  border-bottom: none;
}

.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.review-user {
  display: flex;
  align-items: center;
  gap: 8px;
}

.review-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.review-content {
  font-size: 13px;
  color: var(--text);
  margin-bottom: 8px;
}

.review-reply {
  background: #f9f9f9;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.review-reply::before {
  content: '商家回复: ';
  color: var(--primary);
  font-weight: 500;
}

/* Money display */
.money {
  color: var(--primary);
  font-weight: 600;
}

/* Flex utilities */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.text-center { text-align: center; }
.text-secondary { color: var(--text-secondary); }
.text-sm { font-size: 12px; }
.fw-600 { font-weight: 600; }

/* Shop preview */
.shop-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.shop-banner {
  height: 200px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

.shop-info-bar {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.shop-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin-top: -32px;
  border: 3px solid #fff;
}

/* Timeline */
.timeline {
  padding: 0 0 0 20px;
  border-left: 2px solid var(--border);
}

.timeline-item {
  position: relative;
  padding: 0 0 24px 20px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 2px solid #fff;
}

.timeline-item .time {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.timeline-item .content {
  font-size: 13px;
}

  </style>
</head>
<body>

<!-- 登录页 -->
<div class="login-page" id="loginPage">
  <div class="login-box">
    <h1>商家后台</h1>
    <p class="subtitle">Merchant Management System</p>
    <div class="form-group">
      <label>手机号 / 账号</label>
      <input type="text" placeholder="请输入手机号或账号" value="admin">
    </div>
    <div class="form-group">
      <label>密码</label>
      <input type="password" placeholder="请输入密码" value="123456">
    </div>
    <div class="form-group flex-between">
      <label style="display:flex;align-items:center;gap:6px;margin:0;cursor:pointer;">
        <input type="checkbox" checked> 记住登录
      </label>
      <a href="#" style="color:var(--primary);font-size:13px;text-decoration:none;">忘记密码?</a>
    </div>
    <button class="btn btn-primary btn-full" id="loginBtn" style="margin-top:8px;height:44px;">登 录</button>
    <p class="text-center mt-16 text-secondary text-sm">还没有账号? <a href="#" style="color:var(--primary);text-decoration:none;" onclick="App.showToast('请联系平台客服入驻','info');return false;">申请入驻</a></p>
  </div>
</div>

<!-- 主布局 -->
<div class="app-layout hidden" id="appLayout">
  <aside class="sidebar">
    <div class="sidebar-logo">
      <div class="logo-icon">M</div>
      <span>商家中心</span>
    </div>
    <nav class="sidebar-nav">
      <div class="nav-group-title">工作台</div>
      <div class="nav-item active" data-page="dashboard"><span class="icon">📊</span> 数据概览</div>
      <div class="nav-group-title">店铺运营</div>
      <div class="nav-item" data-page="entry-apply"><span class="icon">📝</span> 入驻申请</div>
      <div class="nav-item" data-page="shop-manage"><span class="icon">🏪</span> 店铺管理</div>
      <div class="nav-item" data-page="product-manage"><span class="icon">📦</span> 商品管理</div>
      <div class="nav-item" data-page="order-manage"><span class="icon">📋</span> 订单管理</div>
      <div class="nav-group-title">运营工具</div>
      <div class="nav-item" data-page="marketing"><span class="icon">🎯</span> 营销工具</div>
      <div class="nav-item" data-page="data-board"><span class="icon">📈</span> 数据看板</div>
      <div class="nav-group-title">财务中心</div>
      <div class="nav-item" data-page="finance"><span class="icon">💰</span> 财务结算</div>
      <div class="nav-item" data-page="review-manage"><span class="icon">⭐</span> 评价管理</div>
    </nav>
  </aside>

  <main class="main-content">
    <header class="top-header">
      <div class="header-left">
        <h2 id="pageTitle">数据概览</h2>
        <div class="breadcrumb">
          <span>首页</span> / <span class="current" id="breadcrumbCurrent">数据概览</span>
        </div>
      </div>
      <div class="header-right">
        <div class="notification-badge" onclick="App.showToast('3条新消息','info')">🔔<span class="badge">3</span></div>
        <span style="font-size:13px;color:var(--text-secondary);">欢迎回来, 张经理</span>
        <div class="avatar">张</div>
      </div>
    </header>

    <div class="page-content" id="pageContent">
    </div>
  </main>
</div>

<!-- Modals -->
<div class="modal-overlay" id="addProductModal">
  <div class="modal">
    <div class="modal-header"><h3>发布新商品</h3><span class="modal-close">×</span></div>
    <div class="modal-body">
      <div class="form-group"><label>商品名称</label><input type="text" placeholder="请输入商品名称"></div>
      <div class="form-group"><label>商品类目</label><select><option>请选择类目</option><option>男装</option><option>女装</option></select></div>
      <div class="form-group"><label>初始价格</label><input type="text" placeholder="¥"></div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline modal-close">取消</button>
      <button class="btn btn-primary" onclick="this.closest('.modal-overlay').classList.remove('show');App.navigateTo('product-manage');App.showToast('请填写完整商品信息','info')">下一步</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="addCouponModal">
  <div class="modal">
    <div class="modal-header"><h3>创建优惠券</h3><span class="modal-close">×</span></div>
    <div class="modal-body">
      <div class="form-group"><label>优惠券类型</label><select><option>满减券</option><option>折扣券</option><option>无门槛券</option></select></div>
      <div class="form-group"><label>面额 (元)</label><input type="text" placeholder="如: 30"></div>
      <div class="form-group"><label>使用门槛 (元)</label><input type="text" placeholder="如: 200"></div>
      <div class="form-group"><label>发行量</label><input type="text" placeholder="如: 500"></div>
      <div class="form-group"><label>有效期</label><div style="display:flex;gap:8px;"><input type="date" value="2026-08-17"><span>至</span><input type="date" value="2026-08-31"></div></div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline modal-close">取消</button>
      <button class="btn btn-primary" onclick="this.closest('.modal-overlay').classList.remove('show');App.showToast('优惠券创建成功!','success')">创建</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="addStaffModal">
  <div class="modal">
    <div class="modal-header"><h3>新增客服账号</h3><span class="modal-close">×</span></div>
    <div class="modal-body">
      <div class="form-group"><label>登录账号</label><input type="text" placeholder="如: cs_zhangsan"></div>
      <div class="form-group"><label>姓名</label><input type="text" placeholder="客服人员姓名"></div>
      <div class="form-group"><label>角色</label><select><option>售前客服</option><option>售后客服</option><option>客服主管</option></select></div>
      <div class="form-group"><label>初始密码</label><input type="password" placeholder="设置初始密码"></div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline modal-close">取消</button>
      <button class="btn btn-primary" onclick="this.closest('.modal-overlay').classList.remove('show');App.showToast('客服账号创建成功!','success')">创建</button>
    </div>
  </div>
</div>

<div class="modal-overlay" id="withdrawModal">
  <div class="modal">
    <div class="modal-header"><h3>申请提现</h3><span class="modal-close">×</span></div>
    <div class="modal-body">
      <div style="background:#f5f5f5;padding:16px;border-radius:8px;margin-bottom:16px;text-align:center;">
        <div class="text-sm text-secondary">可提现余额</div>
        <div style="font-size:28px;font-weight:700;color:var(--primary);">¥58,632.50</div>
      </div>
      <div class="form-group"><label>提现金额</label><input type="text" placeholder="请输入提现金额"></div>
      <div class="form-group"><label>提现方式</label><select><option>银行卡 (招商银行 ****8888)</option><option>支付宝 (138****8888)</option></select></div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-outline modal-close">取消</button>
      <button class="btn btn-primary" onclick="this.closest('.modal-overlay').classList.remove('show');App.showToast('提现申请已提交，预计1-3个工作日到账','success')">确认提现</button>
    </div>
  </div>
</div>

<script>
const PAGES = {
  'dashboard': `<section class="page-section active" id="page-dashboard">
  <div class="stats-grid">
    <div class="stat-card">
      <div class="label">今日访客</div>
      <div class="value">1,286</div>
      <div class="change up">↑ 12.5% 较昨日</div>
    </div>
    <div class="stat-card">
      <div class="label">今日成交额</div>
      <div class="value" style="color:var(--primary);">¥28,650</div>
      <div class="change up">↑ 8.3% 较昨日</div>
    </div>
    <div class="stat-card">
      <div class="label">待发货订单</div>
      <div class="value">46</div>
      <div class="change down">↓ 需及时处理</div>
    </div>
    <div class="stat-card">
      <div class="label">待回复评价</div>
      <div class="value">12</div>
      <div class="change">待处理</div>
    </div>
  </div>

  <div class="grid-2">
    <div class="card">
      <div class="card-header">
        <h3>近7日成交趋势</h3>
        <span class="text-sm text-secondary">单位: 元</span>
      </div>
      <div class="card-body">
        <div class="bar-chart">
          <div class="bar-item"><div class="bar-value">18.2k</div><div class="bar" style="height:120px;background:linear-gradient(180deg,#ff6a00,#ffb366);"></div><div class="bar-label">周一</div></div>
          <div class="bar-item"><div class="bar-value">22.5k</div><div class="bar" style="height:150px;background:linear-gradient(180deg,#ff6a00,#ffb366);"></div><div class="bar-label">周二</div></div>
          <div class="bar-item"><div class="bar-value">19.8k</div><div class="bar" style="height:132px;background:linear-gradient(180deg,#ff6a00,#ffb366);"></div><div class="bar-label">周三</div></div>
          <div class="bar-item"><div class="bar-value">25.3k</div><div class="bar" style="height:168px;background:linear-gradient(180deg,#ff6a00,#ffb366);"></div><div class="bar-label">周四</div></div>
          <div class="bar-item"><div class="bar-value">28.1k</div><div class="bar" style="height:187px;background:linear-gradient(180deg,#ff6a00,#ffb366);"></div><div class="bar-label">周五</div></div>
          <div class="bar-item"><div class="bar-value">32.6k</div><div class="bar" style="height:200px;background:linear-gradient(180deg,#ff6a00,#ffb366);"></div><div class="bar-label">周六</div></div>
          <div class="bar-item"><div class="bar-value">28.6k</div><div class="bar" style="height:190px;background:linear-gradient(180deg,#ff6a00,#ffb366);"></div><div class="bar-label">周日</div></div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header"><h3>待办事项</h3></div>
      <div class="card-body">
        <div style="display:flex;flex-direction:column;gap:12px;">
          <div class="flex-between" style="padding:10px 14px;background:#fff7e6;border-radius:6px;cursor:pointer;" onclick="App.navigateTo('order-manage')">
            <span>📦 待发货订单 <strong>46</strong> 笔</span>
            <span class="tag tag-warning">紧急</span>
          </div>
          <div class="flex-between" style="padding:10px 14px;background:#fff1f0;border-radius:6px;cursor:pointer;" onclick="App.navigateTo('order-manage')">
            <span>🔄 退款/售后 <strong>8</strong> 笔待处理</span>
            <span class="tag tag-danger">高</span>
          </div>
          <div class="flex-between" style="padding:10px 14px;background:#e6f7ff;border-radius:6px;cursor:pointer;" onclick="App.navigateTo('review-manage')">
            <span>⭐ 待回复评价 <strong>12</strong> 条</span>
            <span class="tag tag-info">中</span>
          </div>
          <div class="flex-between" style="padding:10px 14px;background:#f6ffed;border-radius:6px;cursor:pointer;" onclick="App.navigateTo('product-manage')">
            <span>📦 库存预警 <strong>3</strong> 件商品</span>
            <span class="tag tag-success">低</span>
          </div>
          <div class="flex-between" style="padding:10px 14px;background:#f9f0ff;border-radius:6px;cursor:pointer;" onclick="App.navigateTo('marketing')">
            <span>🎯 限时折扣即将到期 <strong>2</strong> 个活动</span>
            <span class="tag tag-default">提醒</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h3>热销商品 TOP5</h3>
      <button class="btn btn-sm btn-outline" onclick="App.navigateTo('product-manage')">查看全部</button>
    </div>
    <div class="card-body" style="padding:0;">
      <table>
        <thead>
          <tr><th>排名</th><th>商品名称</th><th>SKU</th><th>销量</th><th>成交额</th><th>转化率</th></tr>
        </thead>
        <tbody>
          <tr><td><span style="color:var(--primary);font-weight:700;">1</span></td><td>【爆款】纯棉圆领T恤 男女通用</td><td>白色-XL</td><td>1,286件</td><td class="money">¥64,300</td><td>8.6%</td></tr>
          <tr><td><span style="color:var(--primary);font-weight:700;">2</span></td><td>夏季防晒冰丝袖套 冰感透气</td><td>肤色-均码</td><td>968件</td><td class="money">¥29,040</td><td>7.2%</td></tr>
          <tr><td><span style="color:var(--primary);font-weight:700;">3</span></td><td>运动速干短裤 弹力透气</td><td>黑色-L</td><td>856件</td><td class="money">¥42,800</td><td>6.8%</td></tr>
          <tr><td><span style="font-weight:700;">4</span></td><td>帆布单肩包 大容量通勤</td><td>米白色</td><td>742件</td><td class="money">¥37,100</td><td>5.9%</td></tr>
          <tr><td><span style="font-weight:700;">5</span></td><td>运动跑鞋 软底减震</td><td>42码-黑白</td><td>635件</td><td class="money">¥50,800</td><td>5.4%</td></tr>
        </tbody>
      </table>
    </div>
  </div>
</section>`,
  'entry-apply': `<section class="page-section" id="page-entry-apply">
  <div class="steps">
    <div class="step done"><div class="step-num">✓</div><div class="step-label">填写基本信息</div></div>
    <div class="step-line" style="background:var(--success);"></div>
    <div class="step done"><div class="step-num">✓</div><div class="step-label">提交资质材料</div></div>
    <div class="step-line" style="background:var(--success);"></div>
    <div class="step active"><div class="step-num">3</div><div class="step-label">类目与保证金</div></div>
    <div class="step-line"></div>
    <div class="step"><div class="step-num">4</div><div class="step-label">平台审核</div></div>
  </div>

  <div class="grid-2">
    <div class="card">
      <div class="card-header"><h3>经营类目申请</h3></div>
      <div class="card-body">
        <div class="form-group">
          <label>主营类目</label>
          <select><option>服装/鞋帽/箱包</option><option>数码/家电</option><option>食品/生鲜</option><option>美妆/个护</option><option>家居/家装</option></select>
        </div>
        <div class="form-group">
          <label>二级类目</label>
          <select><option>男装</option><option>女装</option><option>运动户外</option><option>内衣</option></select>
        </div>
        <div class="form-group">
          <label>品牌授权 (如有)</label>
          <div class="upload-area"><div class="upload-icon">📄</div><div class="upload-text">点击或拖拽上传品牌授权书</div></div>
        </div>
        <div class="form-group">
          <label>特殊资质 (如需要)</label>
          <div class="upload-area"><div class="upload-icon">📋</div><div class="upload-text">上传相关行业许可证</div></div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header"><h3>保证金确认</h3></div>
      <div class="card-body">
        <div style="background:#fff7e6;padding:16px;border-radius:8px;margin-bottom:20px;border:1px solid #ffe58f;">
          <p style="font-weight:600;margin-bottom:8px;">💡 保证金说明</p>
          <p class="text-sm text-secondary">入驻服装类目需缴纳保证金 ¥5,000，用于保障消费者权益。店铺关闭后可申请退还。</p>
        </div>
        <div class="form-group">
          <label>保证金金额</label>
          <div style="font-size:32px;font-weight:700;color:var(--primary);padding:12px 0;">¥ 5,000.00</div>
        </div>
        <div class="form-group">
          <label>支付方式</label>
          <div style="display:flex;gap:12px;">
            <label style="flex:1;padding:12px;border:2px solid var(--primary);border-radius:8px;cursor:pointer;text-align:center;background:var(--primary-light);">
              <input type="radio" name="pay" checked style="display:none;"> 支付宝
            </label>
            <label style="flex:1;padding:12px;border:2px solid var(--border);border-radius:8px;cursor:pointer;text-align:center;">
              <input type="radio" name="pay" style="display:none;"> 银行卡
            </label>
          </div>
        </div>
        <div class="form-group">
          <label style="display:flex;align-items:center;gap:8px;">
            <input type="checkbox" checked> 我已阅读并同意《商家入驻协议》和《保证金规则》
          </label>
        </div>
        <button class="btn btn-primary btn-full" onclick="App.showToast('保证金缴纳成功，等待平台审核','success')">确认缴纳并提交申请</button>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header"><h3>申请进度</h3></div>
    <div class="card-body">
      <div class="timeline">
        <div class="timeline-item"><div class="time">2026-08-15 14:30</div><div class="content"><span class="tag tag-success">已完成</span> 提交入驻申请</div></div>
        <div class="timeline-item"><div class="time">2026-08-15 14:35</div><div class="content"><span class="tag tag-success">已完成</span> 资质审核通过</div></div>
        <div class="timeline-item"><div class="time">2026-08-17 10:00</div><div class="content"><span class="tag tag-info">进行中</span> 等待类目审核</div></div>
        <div class="timeline-item"><div class="time">-</div><div class="content"><span class="tag tag-default">待处理</span> 缴纳保证金</div></div>
      </div>
    </div>
  </div>
</section>`,
  'shop-manage': `<section class="page-section" id="page-shop-manage">
  <div class="tabs" data-group="shop">
    <div class="tab-item active" data-tab="shop-info">店铺信息</div>
    <div class="tab-item" data-tab="shop-decor">店铺装修</div>
    <div class="tab-item" data-tab="shop-staff">客服子账号</div>
    <div class="tab-item" data-tab="shop-notice">店铺公告</div>
  </div>

  <div class="tab-panel active" data-panel="shop-info">
    <div class="card">
      <div class="card-header"><h3>店铺预览</h3></div>
      <div class="card-body" style="padding:0;">
        <div class="shop-preview">
          <div class="shop-banner">潮流服饰旗舰店</div>
          <div class="shop-info-bar">
            <div class="shop-avatar-lg">潮</div>
            <div>
              <div style="font-size:16px;font-weight:600;">潮流服饰旗舰店</div>
              <div class="text-sm text-secondary">主营: 男装 | 女装 | 运动户外</div>
              <div class="text-sm" style="margin-top:4px;">⭐⭐⭐⭐⭐ <span class="text-secondary">4.8分</span> | <span class="text-secondary">已入驻2年</span></div>
            </div>
            <div style="margin-left:auto;"><span class="tag tag-success">营业中</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header"><h3>店铺基本信息</h3></div>
      <div class="card-body">
        <div class="grid-2">
          <div class="form-group"><label>店铺名称</label><input type="text" value="潮流服饰旗舰店"></div>
          <div class="form-group"><label>店铺类型</label><input type="text" value="企业店铺" disabled></div>
          <div class="form-group"><label>主营类目</label><input type="text" value="服装/鞋帽/箱包" disabled></div>
          <div class="form-group"><label>联系电话</label><input type="text" value="138****8888"></div>
          <div class="form-group" style="grid-column:span 2;"><label>店铺简介</label><textarea>专注于潮流服饰，提供高品质男装女装及运动户外装备。品牌直供，正品保障。

商品信息	价格	库存	销量	状态	操作
👕 纯棉圆领T恤男女通用 SPU: SP001 \| 6个SKU	¥49.90 - ¥79.90	2,456	1,286	在售中	编辑下架
🧊 夏季防晒冰丝袖套 SPU: SP002 \| 3个SKU	¥29.90	1,890	968	在售中	编辑下架
👖 运动速干短裤弹力透气 SPU: SP003 \| 8个SKU	¥49.90	23	856	库存预警	编辑下架
👜 帆布单肩包大容量通勤 SPU: SP004 \| 4个SKU	¥49.90	0	742	仓库中	编辑上架

最小数量	最大数量	单价 (元)	操作
			删除
			删除
			删除

订单号	商品信息	买家	实付金额	状态	下单时间	操作
20260817001	👕纯棉圆领T恤 × 2	王 138**1234	¥99.80	待发货	2026-08-17 10:30	发货
20260817002	🧊防晒冰丝袖套 × 3	李 139**5678	¥89.70	待发货	2026-08-17 09:15	发货
20260816003	👖运动速干短裤 × 1	张 137**9012	¥49.90	已发货	2026-08-16 15:42	SF1234567890
20260815004	👜帆布单肩包 × 1	赵 136**3456	¥49.90	已完成	2026-08-15 08:20	已签收
20260814005	👟运动跑鞋 × 1	刘 135**7890	¥79.90	退款中	2026-08-14 11:55	处理

	订单号	商品	收货地址	金额	物流	操作
	20260817001	纯棉圆领T恤 × 2	北京市朝阳区xxx街道123号	¥99.80
	20260817002	防晒冰丝袖套 × 3	上海市浦东新区yyy路456号	¥89.70

订单号	商品	物流单号	物流公司	发货时间	状态
20260816003	运动速干短裤 × 1	SF1234567890	顺丰速运	2026-08-16 16:00	运输中
20260815006	纯棉圆领T恤 × 1	ZT9876543210	中通快递	2026-08-15 14:30	已签收

编辑页面

装修模板

店铺Logo

店铺Banner

客服子账号管理

店铺公告

基本信息

商品规格 (SPU/SKU)

阶梯价设置

商品图片与视频

商品详情

待发货订单 (46笔)

已发货订单

退款/售后申请 (8笔待处理)

优惠券管理

限时折扣活动

满减活动

店铺会员体系

会员权益设置

平台活动报名

流量趋势

成交趋势

流量来源 TOP5

商品排行

转化漏斗

收入趋势

月度对账单

平台佣金明细

结算单

提现记录

待回复评价 (12条)

投诉申诉

账号	姓名	角色	今日接待	操作
cs_zhangsan	张三	客服主管	156	编辑
cs_lisi	李四	售前客服	98	编辑
cs_wangwu	王五	售后客服	0	编辑

订单号	商品	退款类型	退款金额	申请时间	原因	操作
20260814005	运动跑鞋 × 1	仅退款	¥79.90	2026-08-16	尺码不合适
20260813008	防晒冰丝袖套 × 2	退货退款	¥59.80	2026-08-15	质量问题

活动名称	商品	折扣	活动价	时间	状态	操作
夏日清凉特惠	防晒冰丝袖套	7折	¥20.90	08-15 ~ 08-31	进行中	编辑
T恤清仓特卖	纯棉圆领T恤	6折	¥29.90	08-10 ~ 08-20	即将到期	编辑

等级	折扣	积分倍率	专属券	生日礼
普通会员	9.8折	1倍	无	无
银卡会员	9.5折	1.5倍	满100减10	10元券
金卡会员	9折	2倍	满200减30	30元券

来源	访客数	占比	转化率
搜索流量	3,582	40%	4.2%
推荐流量	2,151	24%	2.8%
活动流量	1,523	17%	5.1%
直接访问	986	11%	6.3%
站外引流	717	8%	1.2%

排名	商品	销量	转化率
1	纯棉圆领T恤	1,286	8.6%
2	防晒冰丝袖套	968	7.2%
3	运动速干短裤	856	6.8%
4	帆布单肩包	742	5.9%
5	运动跑鞋	635	5.4%

月份	成交额	退款额	平台佣金	技术服务费	实际收入	状态	操作
2026年8月	¥186,520	¥3,280	¥9,326	¥1,865	¥172,049	结算中	查看
2026年7月	¥168,350	¥2,150	¥8,417	¥1,684	¥156,099	已结算	查看
2026年6月	¥152,800	¥1,890	¥7,640	¥1,528	¥141,742	已结算	查看

时间	订单号	类型	金额	费率	说明
2026-08-17	20260817001	商品佣金	¥4.99	5%	纯棉圆领T恤 × 2
2026-08-17	20260817002	商品佣金	¥4.49	5%	防晒冰丝袖套 × 3
2026-08-17	20260817001	技术服务费	¥1.00	1%	订单技术服务费

结算单号	结算周期	成交额	退款	佣金	技术服务费	实际结算	状态
JSD20260817001	08-10 ~ 08-16	¥68,520	¥1,280	¥3,426	¥685	¥63,129	待结算
JSD20260810001	08-03 ~ 08-09	¥72,800	¥980	¥3,640	¥728	¥67,452	已结算

提现单号	金额	提现方式	收款账户	申请时间	状态
TX20260815001	¥20,000.00	银行卡	招商银行 ****8888	2026-08-15	已到账
TX20260801001	¥15,000.00	支付宝	138****8888	2026-08-01	已到账
TX20260715001	¥30,000.00	银行卡	招商银行 ****8888	2026-07-15	已到账

颜色	尺码	价格 (元)	库存	商品编码
白色	S
白色	M
白色	L
黑色	S
黑色	M

投诉单号	投诉类型	投诉内容	投诉时间	状态	操作
TS20260816001	恶意差评	买家未收到货即给出1星差评，疑似恶意投诉	2026-08-16	处理中	查看
TS20260814002	虚假交易	买家要求好评返现，被拒绝后给差评	2026-08-14	已处理	查看