後台管理系統是電商運營的指揮中心。本文詳細設計圖書銷售系統的管理後台四大核心模塊：圖書管理、入庫管理、訂單管理、歷史數據分析，涵蓋界面布局、交互流程、權限控制與數據導出需求。
+----------------------------------------------------------+
| 頂部導航: Logo | 系統名 | 當前管理員 | 角色 | 退出 |
+----------+-------------------------------------------------+
| 側邊欄 | 主內容區 |
| 菜單樹 | [麵包屑導航] |
| | [工具欄: 搜索/篩選/新增/導入/導出/批量操作] |
| 圖書管理▼| [數據表格/卡片列表] |
| 入庫管理▼| [分頁組件] |
| 訂單管理▼| |
| 數據分析▼| |
| 系統設置▼| |
+----------+-------------------------------------------------+
技術棧：Vue 3 + Element Plus / Ant Design Vue + ECharts + Apache POI 導出。
| 功能 | 交互細節 | 校驗規則 |
|---|---|---|
| 新增圖書 | 抽屜表單 (Drawer Form)：基本信息/價格庫存/圖片/詳情 | ISBN 唯一、價格>0、庫存≥0、封面必填 |
| 編輯圖書 | 預填現有數據、封面預覽、歷史價格查看 | 同上、不可修改 ISBN |
| 批量上架/下架 | 表格多選 + 頂部按鈕、確認彈窗 | 下架前檢查購物車/訂單引用 |
| 批量導入 | Excel 模板下載 → 文件上傳 → 預覽校驗 → 確認入庫 | 模板欄位鎖定、錯誤行紅標、事務性導入 |
| 圖片管理 | 多圖上傳、拖拽排序、主圖標記、CDN 同步 | 單圖 < 2MB、格式 jpg/png/webp |
| 庫存預警 | 閾值配置 (默認 10)、低庫存紅標、郵件/企微通知 | 定時任務每小時掃描 |
columns: [
{prop: 'id', label: 'ID', width: 60},
{prop: 'cover', label: '封面', render: 'image', width: 80},
{prop: 'name', label: '書名', minWidth: 180},
{prop: 'author', label: '作者'},
{prop: 'publisher', label: '出版社'},
{prop: 'price', label: '售價', formatter: '¥{val}'},
{prop: 'stock', label: '庫存', formatter: '{val} (警戒:10)'},
{prop: 'status', label: '狀態', render: 'tag: 上架/下架/預售'},
{prop: 'createdAt', label: '創建時間', width: 160},
{prop: 'action', label: '操作', fixed: 'right', width: 200,
buttons: ['編輯', '上下架', '複製', '刪除', '歷史價格']}
]
草稿 → 待審核 → 已審核 → 待收貨 → 部分入庫 → 全部入庫 → 已完成
↓
駁回 (退回草稿)
BookStockHistory 記錄、更新 t_book.quantity
篩選器組合:
- 時間範圍: 下單時間/付款時間/發貨時間 (快捷: 今天/近7天/近30天/本月/自定義)
- 狀態: 待付款/已付款/已發貨/已完成/已取消/退款中/已退款 (多選)
- 關鍵字: 訂單號/會員名/手機/書名/收貨人/電話 (模糊搜索)
- 金額區間: 最小/最大 (分)
- 來源: PC/H5/小程序/後台代下單
- 支付方式: 微信/支付寶/銀聯/貨到付款
基本信息: 訂單號、下單時間、會員、來源、備註
收貨信息: 姓名、電話、省市區、詳細地址、標籤(公司/家/學校)
商品清單: 封面、書名、規價、實付單價、數量、小計、促銷標籤
費用明細: 商品金額、運費、優惠券、會員折扣、積分抵扣、實付總額
支付信息: 支付方式、交易流水號、支付時間、退款流水(如有)
物流軌跡: 物流公司、單號、實時節點 (整合快遞100 API)、預計送達
操作日誌: 時間、操作人、動作(創建/付款/發貨/退款/備註)、IP
可用操作: 發貨/修改地址/備註/取消/退款/強制完成/打印面單/打印發票
| 維度 | 關鍵指標 (KPI) | 圖表類型 |
|---|---|---|
| 銷售概覽 | GMV、訂單量、客單價、轉化率、退款率、新客佔比 | 趨勢線圖 + 同環比卡片 |
| 商品分析 | 暢銷榜/滯銷榜、庫存周轉率、毛利率、新品貢獻度 | 柱狀圖 + 帕累托圖 |
| 用戶畫像 | RFM 模型、復購率、LTV、流失預警、地區分布 | 雷達圖 + 地圖熱力圖 |
| 運營效率 | 平均發貨時長、客單處理時長、客服響應率、缺貨率 | 儀表盤 + 趨勢圖 |
角色: 超級管理員 > 運營總監 > 類目運營 > 客服專員 > 倉庫管理員
權限矩陣:
- 圖書管理: 超管/運營總監/類目運營 (增刪改查) | 客服/倉管 (唯讀)
- 入庫管理: 超管/運營總監/倉管 (全權) | 類目運營 (查看/驗收)
- 訂單管理: 超管/運營總監/客服 (全權) | 倉管 (發貨/查看)
- 數據分析: 超管/運營總監 (全維度) | 類目運營 (本類目) | 客服/倉管 (無)
- 系統設置: 僅超管
前端路由守衛 + 後端 @PreAuthorize 雙重保障。
優秀的後台管理系統 = 業務流程數字化 + 數據決策可視化 + 權限最小化 + 操作高效化。每個模塊都應緊貼業務實際，減少認知負荷，提升操作確定性。
