sqxp/docs/原型图/web/工作台.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>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <link rel="stylesheet" href="https://unpkg.com/@element-plus/icons-vue/dist/index.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f7fa; color: #303133; }
        .topbar { height: 60px; background: linear-gradient(135deg, #1989fa 0%, #07c160 100%); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; color: white; }
        .topbar-logo h1 { font-size: 22px; font-weight: 600; }
        .topbar-logo span { font-size: 13px; opacity: 0.85; }
        .topbar-user { display: flex; align-items: center; gap: 16px; }
        .main-container { display: flex; min-height: calc(100vh - 60px); }
        .sidebar { width: 220px; background: #fff; border-right: 1px solid #e4e7ed; padding: 16px 0; }
        .menu-item { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; gap: 12px; color: #606266; font-size: 14px; }
        .menu-item:hover { background: #f5f7fa; color: #1989fa; }
        .menu-item.active { background: #ecf5ff; color: #1989fa; border-right: 3px solid #1989fa; }
        .content { flex: 1; padding: 24px; }
        .breadcrumb { font-size: 13px; color: #909399; margin-bottom: 8px; }
        .card { background: #fff; border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #ebeef5; }
        .card-title { font-size: 16px; font-weight: 600; }
        .stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
        .stats-card { background: #fff; border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.05); cursor: pointer; transition: all 0.3s; }
        .stats-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
        .stats-num { font-size: 32px; font-weight: 700; margin-bottom: 4px; }
        .stats-num.blue { color: #1989fa; }
        .stats-num.green { color: #07c160; }
        .stats-num.orange { color: #ff976a; }
        .stats-num.red { color: #ee0a24; }
        .stats-num.purple { color: #9c27b0; }
        .stats-label { font-size: 13px; color: #909399; }
        .todo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
        .todo-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); border-left: 4px solid; cursor: pointer; transition: all 0.3s; }
        .todo-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
        .todo-card.warning { border-left-color: #ff976a; }
        .todo-card.danger { border-left-color: #ee0a24; }
        .todo-card.primary { border-left-color: #1989fa; }
        .todo-card.success { border-left-color: #07c160; }
        .todo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
        .todo-title { font-size: 14px; font-weight: 600; }
        .todo-count { background: #fef0f0; color: #ee0a24; padding: 2px 10px; border-radius: 10px; font-size: 12px; font-weight: 600; }
        .todo-count.blue { background: #ecf5ff; color: #1989fa; }
        .todo-count.orange { background: #fdf6ec; color: #ff976a; }
        .todo-count.green { background: #f0f9eb; color: #07c160; }
        .todo-list { }
        .todo-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f7fa; font-size: 13px; }
        .todo-item:last-child { border-bottom: none; }
        .todo-item-text { color: #606266; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .todo-item-action { color: #1989fa; cursor: pointer; margin-left: 8px; }
        .alert-bar { display: flex; align-items: center; gap: 16px; padding: 16px 20px; background: #fef0f0; border-radius: 8px; margin-bottom: 20px; }
        .alert-icon { font-size: 20px; color: #ee0a24; }
        .alert-text { flex: 1; font-size: 14px; color: #ee0a24; }
        .alert-count { background: #ee0a24; color: #fff; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; }
        .quick-actions { display: flex; gap: 12px; margin-bottom: 20px; }
        .quick-btn { flex: 1; padding: 16px; background: #fff; border-radius: 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.05); transition: all 0.3s; }
        .quick-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.1); }
        .quick-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .quick-icon.blue { background: #ecf5ff; color: #1989fa; }
        .quick-icon.orange { background: #fdf6ec; color: #ff976a; }
        .quick-icon.green { background: #f0f9eb; color: #07c160; }
        .quick-icon.red { background: #fef0f0; color: #ee0a24; }
        .quick-text { font-size: 14px; font-weight: 500; }
        .quick-arrow { color: #c0c4cc; margin-left: auto; }
    </style>
</head>
<body>
    <div id="app">
        <div class="topbar">
            <div class="topbar-logo"><h1>叁强鲜配</h1><span>运营管理后台</span></div>
            <div class="topbar-user">
                <el-badge :value="5" :max="99"><el-button :icon="Bell" circle style="color:white;background:rgba(255,255,255,0.2);border:none;" /></el-badge>
                <el-avatar :size="32" style="background:#fff;color:#1989fa;">管</el-avatar>
                <span>管理员</span>
            </div>
        </div>
        <div class="main-container">
            <div class="sidebar">
                <div class="menu-item active"><el-icon><HomeFilled /></el-icon><span>工作台</span></div>
                <div class="menu-item"><el-icon><DataAnalysis /></el-icon><span>数据统计</span></div>
                <div class="menu-item"><el-icon><User /></el-icon><span>用户管理</span></div>
                <div class="menu-item"><el-icon><Location /></el-icon><span>区域管理</span></div>
                <div class="menu-item"><el-icon><Goods /></el-icon><span>商品管理</span></div>
                <div class="menu-item"><el-icon><Search /></el-icon><span>询价管理</span></div>
                <div class="menu-item"><el-icon><Ticket /></el-icon><span>报价管理</span></div>
                <div class="menu-item"><el-icon><PriceTag /></el-icon><span>价格管理</span></div>
                <div class="menu-item"><el-icon><ShoppingCart /></el-icon><span>订单管理</span></div>
                <div class="menu-item"><el-icon><Van /></el-icon><span>配送管理</span></div>
                <div class="menu-item"><el-icon><Wallet /></el-icon><span>结算管理</span></div>
                <div class="menu-item"><el-icon><Setting /></el-icon><span>系统设置</span></div>
            </div>
            <div class="content">
                <div class="breadcrumb">首页 / 工作台</div>
                
                <!-- 预警提示 -->
                <div class="alert-bar">
                    <span class="alert-icon">&#9888;</span>
                    <span class="alert-text">您有 <strong>3</strong> 个配送单即将超时，请及时处理！</span>
                    <span class="alert-count" style="cursor:pointer;" onclick="location.href='配送时效预警.html'">立即处理</span>
                </div>
                
                <!-- 数据统计 -->
                <div class="stats-grid">
                    <div class="stats-card">
                        <div class="stats-num blue">1,286</div>
                        <div class="stats-label">客户总数</div>
                    </div>
                    <div class="stats-card">
                        <div class="stats-num green">86</div>
                        <div class="stats-label">供应商数量</div>
                    </div>
                    <div class="stats-card">
                        <div class="stats-num orange">328</div>
                        <div class="stats-label">今日订单</div>
                    </div>
                    <div class="stats-card">
                        <div class="stats-num red">45</div>
                        <div class="stats-label">待配送</div>
                    </div>
                    <div class="stats-card">
                        <div class="stats-num purple">¥58,620</div>
                        <div class="stats-label">今日交易额</div>
                    </div>
                </div>
                
                <!-- 待办事项 -->
                <div class="todo-grid">
                    <div class="todo-card warning" onclick="location.href='报价管理.html'">
                        <div class="todo-header">
                            <span class="todo-title">待审核报价</span>
                            <span class="todo-count orange">5</span>
                        </div>
                        <div class="todo-list">
                            <div class="todo-item"><span class="todo-item-text">2026年3月第3周询价...</span><span class="todo-item-action">处理</span></div>
                            <div class="todo-item"><span class="todo-item-text">城东区域供应商报价...</span><span class="todo-item-action">处理</span></div>
                        </div>
                    </div>
                    <div class="todo-card danger" onclick="location.href='订单管理.html'">
                        <div class="todo-header">
                            <span class="todo-title">待分配配送</span>
                            <span class="todo-count">12</span>
                        </div>
                        <div class="todo-list">
                            <div class="todo-item"><span class="todo-item-text">ORD202603190003</span><span class="todo-item-action">分配</span></div>
                            <div class="todo-item"><span class="todo-item-text">ORD202603190004</span><span class="todo-item-action">分配</span></div>
                        </div>
                    </div>
                    <div class="todo-card primary" onclick="location.href='订单管理.html'">
                        <div class="todo-header">
                            <span class="todo-title">取消待审核</span>
                            <span class="todo-count blue">3</span>
                        </div>
                        <div class="todo-list">
                            <div class="todo-item"><span class="todo-item-text">客户BB超市申请取消...</span><span class="todo-item-action">审核</span></div>
                            <div class="todo-item"><span class="todo-item-text">客户CC商行申请取消...</span><span class="todo-item-action">审核</span></div>
                        </div>
                    </div>
                    <div class="todo-card success" onclick="location.href='结算管理.html'">
                        <div class="todo-header">
                            <span class="todo-title">待结算确认</span>
                            <span class="todo-count green">8</span>
                        </div>
                        <div class="todo-list">
                            <div class="todo-item"><span class="todo-item-text">AA餐厅线下结算...</span><span class="todo-item-action">确认</span></div>
                            <div class="todo-item"><span class="todo-item-text">BB超市线下结算...</span><span class="todo-item-action">确认</span></div>
                        </div>
                    </div>
                </div>
                
                <!-- 快捷操作 -->
                <div class="quick-actions">
                    <div class="quick-btn" onclick="location.href='询价新增.html'">
                        <div class="quick-icon blue"><el-icon><Plus /></el-icon></div>
                        <span class="quick-text">发布询价</span>
                        <span class="quick-arrow">&#8250;</span>
                    </div>
                    <div class="quick-btn" onclick="location.href='配送分配弹窗.html'">
                        <div class="quick-icon orange"><el-icon><Van /></el-icon></div>
                        <span class="quick-text">分配配送</span>
                        <span class="quick-arrow">&#8250;</span>
                    </div>
                    <div class="quick-btn" onclick="location.href='结算确认弹窗.html'">
                        <div class="quick-icon green"><el-icon><Wallet /></el-icon></div>
                        <span class="quick-text">确认结算</span>
                        <span class="quick-arrow">&#8250;</span>
                    </div>
                    <div class="quick-btn" onclick="location.href='用户新增.html'">
                        <div class="quick-icon red"><el-icon><UserPlus /></el-icon></div>
                        <span class="quick-text">新增用户</span>
                        <span class="quick-arrow">&#8250;</span>
                    </div>
                </div>
                
                <!-- 最新订单 -->
                <div class="card">
                    <div class="card-header">
                        <span class="card-title">最新订单</span>
                        <el-button type="primary" link onclick="location.href='订单管理.html'">查看更多</el-button>
                    </div>
                    <el-table :data="orderList" style="width:100%">
                        <el-table-column prop="orderNo" label="订单编号" width="180" />
                        <el-table-column prop="clientName" label="客户名称" width="150" />
                        <el-table-column prop="region" label="区域" width="100" />
                        <el-table-column prop="totalAmount" label="订单金额" width="120">
                            <template #default="{row}"><span style="color:#ee0a24;font-weight:600;">¥{{row.totalAmount}}</span></template>
                        </el-table-column>
                        <el-table-column prop="status" label="订单状态" width="130">
                            <template #default="{row}"><span :class="'status-tag '+row.statusClass">{{row.statusText}}</span></template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="下单时间" width="180" />
                        <el-table-column label="操作" width="150">
                            <template #default><el-button type="primary" link onclick="location.href='订单详情.html'">查看</el-button></template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/@element-plus/icons-vue"></script>
    <script>
        const { createApp, ref } = Vue;
        const app = createApp({
            setup() {
                const orderList = ref([
                    { orderNo: 'ORD202603190001', clientName: 'XX餐厅', region: '城东', totalAmount: '1,286.00', statusClass: 'warning', statusText: '待支付', createTime: '2026-03-19 10:23:45' },
                    { orderNo: 'ORD202603190002', clientName: 'YY超市', region: '城西', totalAmount: '2,560.00', statusClass: 'primary', statusText: '待分配配送', createTime: '2026-03-19 09:15:22' },
                    { orderNo: 'ORD202603180056', clientName: 'ZZ食堂', region: '城南', totalAmount: '856.00', statusClass: 'info', statusText: '配送中', createTime: '2026-03-18 16:45:30' },
                    { orderNo: 'ORD202603180055', clientName: 'AA饭店', region: '城东', totalAmount: '3,200.00', statusClass: 'success', statusText: '已完成', createTime: '2026-03-18 14:20:18' }
                ]);
                return { orderList };
            }
        });
        app.use(ElementPlus);
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component); }
        app.mount('#app');
    </script>
</body>
</html>